diff --git a/.trae/rules/01model.md b/.trae/rules/01model.md
new file mode 100644
index 000000000..f94c92273
--- /dev/null
+++ b/.trae/rules/01model.md
@@ -0,0 +1,126 @@
+---
+alwaysApply: false
+description: 
+---
+# Laravel Search Scope Standard
+
+## Rule
+Untuk semua fitur pencarian (search) yang melibatkan beberapa kolom dengan OR, WAJIB dibungkus `where(function ($query) use (...) { ... })`
+agar seluruh OR-terikat dalam satu grup dan tidak merusak kondisi lain (mis. tenant_id, is_active, date range).
+
+Kolom `date`, `datetime`, `timestamp`, dan field waktu sejenis pada Model TIDAK BOLEH dimasukkan ke `scopeSearch()` secara default,
+kecuali memang ada kebutuhan bisnis yang jelas dan eksplisit bahwa user harus bisa mencari berdasarkan tanggal dari input search bebas.
+Untuk search umum, prioritaskan hanya field yang benar-benar relevan secara tekstual seperti `code`, `name`, `reference`, `notes`, atau `remarks`.
+
+## Why
+Tanpa grouping closure, `orWhere` dapat “membocorkan” logika sehingga mengabaikan filter lain di query utama.
+
+Kolom tanggal biasanya tidak relevan untuk keyword search umum, memperbesar noise hasil pencarian, dan lebih tepat ditangani oleh filter terpisah
+seperti `start_date`, `end_date`, atau parameter range tanggal.
+
+## Example (Correct)
+```php
+public function scopeSearch($query, string $search)
+{
+    return $query->where(function ($query) use ($search) {
+        $query->where('cash_accounts.code', 'like', '%'.$search.'%')
+            ->orWhere('cash_accounts.name', 'like', '%'.$search.'%')
+            ->orWhere('cash_accounts.remarks', 'like', '%'.$search.'%');
+    });
+}
+```
+
+## Example (Incorrect)
+```php
+public function scopeSearch($query, string $search)
+{
+    return $query->where(function ($query) use ($search) {
+        $query->where('capital_openings.code', 'like', '%'.$search.'%')
+            ->orWhere('capital_openings.date', 'like', '%'.$search.'%')
+            ->orWhere('capital_openings.remarks', 'like', '%'.$search.'%');
+    });
+}
+```
+
+# BelongsTo Relationship Standard
+
+## Rule
+Setiap relasi `belongsTo` WAJIB menggunakan `withTrashed()` jika model yang direlasikan mendukung SoftDeletes.
+
+## Why
+Agar data tidak hilang saat parent (referensi) di-soft delete, sehingga integritas data historis tetap terjaga saat ditampilkan.
+
+## Example (Correct)
+```php
+public function company()
+{
+    return $this->belongsTo(Company::class)->withTrashed();
+}
+```
+
+# Field Order Consistency Standard
+
+## Rule
+Urutan field pada Model dan layer terkait WAJIB mengikuti urutan definisi kolom di migration utama tabel tersebut.
+
+Aturan ini berlaku untuk:
+- `$fillable`
+- assignment field di Action `create()` dan `update()`
+- urutan output field di Resource
+- urutan field di FormRequest `rules()`, `attributes()`, dan `prepareForValidation()`
+- array atau mapping lain yang merepresentasikan field yang sama
+
+Jika tidak semua field dipakai pada sebuah method, pertahankan urutan relatif berdasarkan migration dan cukup lewati field yang memang tidak relevan.
+
+## Why
+Urutan yang konsisten membuat review lebih cepat, meminimalkan salah mapping antar layer, dan memudahkan pengecekan apakah implementasi sudah sesuai struktur database.
+
+## Example
+Jika migration mendefinisikan urutan:
+```php
+$table->foreignId('company_id');
+$table->foreignId('branch_id');
+$table->string('code');
+$table->dateTime('date');
+$table->foreignId('investor_id');
+$table->foreignId('cash_account_id');
+$table->decimal('amount', 30, 8)->default(0);
+$table->string('remarks')->nullable();
+```
+
+Maka urutan field di Model, Action, Resource, dan Request harus mengikuti susunan yang sama:
+```php
+'company_id',
+'branch_id',
+'code',
+'date',
+'investor_id',
+'cash_account_id',
+'amount',
+'remarks',
+```
+
+# Scopeable Traits Standard
+
+## Rule
+1.  **Gunakan Trait Standar**:
+    *   `App\Traits\ScopeableByCompany`: Untuk model yang memiliki `company_id`.
+    *   `App\Traits\ScopeableByBranch`: Untuk model yang memiliki `branch_id`.
+    *   `App\Traits\ScopeableByStatus`: Untuk model yang memiliki `status`.
+2.  **Mandatory Trait**: Jika Action Class atau Controller menggunakan helper `whereCompanyId($id)` atau `whereBranchId($id)`, Model **WAJIB** menggunakan trait terkait secara eksplisit (`use Scopeable...`). Jangan berasumsi helper tersedia secara global.
+
+## Example
+```php
+use App\Traits\ScopeableByCompany;
+use App\Traits\ScopeableByBranch;
+
+class Order extends Model
+{
+    // WAJIB use Trait agar method scope tersedia
+    use ScopeableByCompany, ScopeableByBranch;
+    // ...
+}
+
+// Usage in Action/Controller
+$query->whereCompanyId($companyId)->whereBranchId($branchId);
+```
diff --git a/.trae/rules/02factory.md b/.trae/rules/02factory.md
new file mode 100644
index 000000000..fba419a3a
--- /dev/null
+++ b/.trae/rules/02factory.md
@@ -0,0 +1,31 @@
+---
+alwaysApply: false
+description: 
+---
+# PROMPT RULE FACTORY (Laravel)
+
+Saat membuat/mengedit `database/factories/*.php`:
+
+- Wajib: Hanya field internal (tanpa foreign key).
+- State helper: method `public` deskriptif, return `$this->state(...)` (mis. `setStatusActive()`), hanya override field relevan.
+
+Field:
+- `code`: uppercase + pola rapi (mis. `SUP-####` via lexify/numerify); jangan `word/uuid` mentah.
+- `name`: realistis (Indonesia; “PT/CV …” bila cocok). Jika menambahkan suffix random (misal `Str::random`), wajib tambahkan spasi sebagai pemisah (contoh: `$name . ' ' . Str::random(3)`).
+- `remarks`: kalimat pendek wajar (boleh `sentence`, bukan lorem noise).
+
+Lokal Indonesia (jika ada): `city` kota Indo; `address` gaya “Jl.”; `phone/mobile` format `+62/08`; `tax_id` angka masuk akal (mis. `##.###.###.#-###.###`).
+
+Relasi/FK:
+- **STRICT FORBIDDEN**: Jangan pernah mendefinisikan `*_id` (Foreign Key) di dalam method `definition()`.
+- **Why**: 
+    1. Menghindari inkonsistensi data (misal: Child Model dibuatkan Company baru yang beda dengan Parent Model).
+    2. Mencegah spam database (membuat ratusan Company baru yang tidak perlu).
+    3. Memudahkan testing dengan skenario fleksibel.
+- **Solution**: Set relasi di pemanggil (Seeder/Test) menggunakan `->for($model)` atau `->for(Model::factory())`.
+
+Enum/boolean:
+- Enum cast: pakai enum; boolean: `fake()->boolean()` atau default logis + state variasi.
+
+Gaya:
+- Konsisten; `fake()` / `fake('id_ID')`; 1 field per baris; tanpa logika bisnis berat.
diff --git a/.trae/rules/03seeder.md b/.trae/rules/03seeder.md
new file mode 100644
index 000000000..fef3e7315
--- /dev/null
+++ b/.trae/rules/03seeder.md
@@ -0,0 +1,277 @@
+---
+alwaysApply: false
+description: 
+---
+## PROMPT RULE SEEDER
+
+Saat membuat atau mengubah seeder di project ini (`database/seeders/*.php`), gunakan standar berikut:
+
+1. **Struktur dasar seeder**
+
+- Namespace dan import:
+
+  - Namespace selalu `Database\Seeders;`.
+  - Import hanya model dan class yang benar‑benar dipakai (`use App\Models\X;`, `use Illuminate\Database\Seeder;`).
+  - Class selalu `extends Seeder`.
+
+- Signature method `run`:
+  - Untuk seeder yang bekerja **per user**: 
+
+    ```php
+    public function run(?int $entitiesPerUser = null, ?int $userId = null)
+    ```
+
+    Contoh: `CompanySeeder::run(?int $companiesPerUser = null, ?int $userId = null)`.
+
+  - Untuk seeder yang bekerja **per company**:
+
+    ```php
+    public function run(?int $entitiesPerCompany = null, ?int $companyId = null)
+    ```
+
+    Contoh: `BranchSeeder`, `WarehouseSeeder`, `InvestorSeeder`, `CustomerSeeder`, `CustomerGroupSeeder`, `ProductCategorySeeder`, `BrandSeeder`, `CashAccountSeeder`, `UnitSeeder`.
+
+  - Di awal method tetapkan default jika parameter `null`:
+
+    ```php
+    $entitiesPerCompany = $entitiesPerCompany ?? 5; // atau angka default lain
+    ```
+
+2. **Pattern pemilihan parent (User / Company)**
+
+- Untuk seeder per user (`CompanySeeder`):
+
+  ```php
+  $companiesPerUser = $companiesPerUser ?? 1;
+
+  $users = $userId ? User::where('id', $userId)->get() : User::all();
+  ```
+
+- Untuk seeder per company:
+
+  Boleh pakai salah satu pola berikut (pilih satu dan konsisten dalam seeder itu):
+
+  - Ternary sederhana (dipakai banyak seeder):
+
+    ```php
+    $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+    ```
+
+  - Atau query builder eksplisit (seperti `CustomerSeeder`):
+
+    ```php
+    $query = Company::query();
+    if ($companyId) {
+        $query->where('id', $companyId);
+    }
+    $companies = $query->get();
+    ```
+
+- Selalu loop:
+
+  ```php
+  foreach ($companies as $company) {
+      // isi per company
+  }
+  ```
+
+3. **Cara memakai factory di seeder**
+
+- Jangan set field detail di seeder; gunakan factory untuk mengisi data, dan seeder hanya:
+  - Mengatur parent (`->for($company)`, `->for($branch)`).
+  - Menghubungkan relasi khusus (`->hasAttached($user)`).
+  - Menggunakan state (status, default, dsb).
+
+- Contoh pola umum per company:
+
+  ```php
+  for ($i = 0; $i < $entitiesPerCompany; $i++) {
+      ModelX::factory()
+          ->for($company)
+          ->create();
+  }
+  ```
+
+- Untuk model yang butuh **company + branch** (Warehouse, CashAccount):
+  - Ambil branch untuk company dulu:
+
+    ```php
+    $branch = Branch::where('company_id', $company->id)->inRandomOrder()->first();
+    if (! $branch) {
+        continue; // atau lewati company ini
+    }
+    ```
+
+  - Baru gunakan:
+
+    ```php
+    ModelX::factory()
+        ->for($company)
+        ->for($branch)
+        ->create();
+    ```
+
+4. **Pola khusus seeder “utama”**
+
+- **CompanySeeder**:
+  - Per user, selalu buat minimal satu company default & aktif:
+
+    ```php
+    Company::factory()
+        ->hasAttached($user)
+        ->setIsDefault()
+        ->setStatusActive()
+        ->create();
+    ```
+
+  - Jika `companiesPerUser > 1`, buat sisa company dengan status random active/inactive:
+
+    ```php
+    $remaining = max(0, $companiesPerUser - 1);
+
+    for ($i = 0; $i < $remaining; $i++) {
+        $company = Company::factory()->hasAttached($user);
+
+        random_int(0, 1) ? $company->setStatusActive() : $company->setStatusInactive();
+
+        $company->create();
+    }
+    ```
+
+- **BranchSeeder**:
+  - Per company, selalu buat satu branch **main & active**:
+
+    ```php
+    Branch::factory()
+        ->for($company)
+        ->setIsMainBranch()
+        ->setStatusActive()
+        ->create();
+    ```
+
+  - Branch sisanya: status random active/inactive, tapi tetap `for($company)`:
+
+    ```php
+    $remaining = max(0, $branchesPerCompany - 1);
+
+    for ($i = 0; $i < $remaining; $i++) {
+        $branch = Branch::factory()->for($company);
+
+        random_int(0, 1) ? $branch->setStatusActive() : $branch->setStatusInactive();
+
+        $branch->create();
+    }
+    ```
+
+- **WarehouseSeeder**:
+  - Per company, pilih satu branch random:
+
+    ```php
+    $branch = Branch::where('company_id', $company->id)->inRandomOrder()->first();
+    ```
+
+  - Untuk tiap warehouse:
+    - `->for($company)`
+    - `->for($branch)`
+    - Status random active/inactive via state:
+
+    ```php
+    $warehouse = Warehouse::factory()
+        ->for($company)
+        ->for($branch);
+
+    random_int(0, 1) ? $warehouse->setStatusActive() : $warehouse->setStatusInactive();
+
+    $warehouse->create();
+    ```
+
+- **CashAccountSeeder**:
+  - Mirip WarehouseSeeder, tapi untuk CashAccount:
+    - Param `run(?int $cashAccountsPerCompany = null, ?int $companyId = null, ?int $branchId = null)`.
+    - Ambil branch dengan filter company, dan opsional `branchId`:
+
+      ```php
+      $branchQuery = Branch::where('company_id', $company->id);
+
+      if ($branchId) {
+          $branchQuery->where('id', $branchId);
+      }
+      $branch = $branchQuery->inRandomOrder()->first();
+
+      if (! $branch) {
+          continue;
+      }
+      ```
+
+    - Loop buat CashAccount dengan `->for($company)->for($branch)`.
+
+- **Seeder “simple master per company”** (`InvestorSeeder`, `CustomerGroupSeeder`, `CustomerSeeder`, `ProductCategorySeeder`, `BrandSeeder`):
+  - Pola standar:
+
+    ```php
+    $entitiesPerCompany = $entitiesPerCompany ?? 5;
+
+    $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+    foreach ($companies as $company) {
+        for ($i = 0; $i < $entitiesPerCompany; $i++) {
+            ModelX::factory()
+                ->for($company)
+                ->create();
+        }
+    }
+    ```
+
+- **UnitSeeder (master dengan “required set”)**:
+  - Jika ada daftar unit wajib, gunakan pola:
+    - Daftar array `requiredUnits`.
+    - Untuk setiap nama, cek dulu apakah sudah ada:
+
+      ```php
+      $exists = Unit::where('company_id', $company->id)
+          ->where('name', $unitName)
+          ->exists();
+      if (! $exists) {
+          Unit::factory()
+              ->for($company)
+              ->create([
+                  'name' => $unitName,
+                  'code' => $unitName,
+              ]);
+      }
+      ```
+
+    - Setelah itu hitung total dan top‑up sampai `unitsPerCompany` tercapai:
+
+      ```php
+      $currentCount = Unit::where('company_id', $company->id)->count();
+
+      if ($currentCount < $unitsPerCompany) {
+          Unit::factory()
+              ->count($unitsPerCompany - $currentCount)
+              ->for($company)
+              ->create();
+      }
+      ```
+
+5. **Pemanggilan seeder (di AppSeed / AppInstall)**
+
+- Saat memanggil seeder dari command lain, gunakan **named arguments** seperti di `AppSeed` / `AppInstall`:
+
+  ```php
+  (new CompanySeeder())->run(companiesPerUser: 1, userId: null);
+  (new BranchSeeder())->run(branchesPerCompany: 5, companyId: null);
+  (new WarehouseSeeder())->run(warehousesPerCompany: 5, companyId: null);
+  (new InvestorSeeder())->run(investorsPerCompany: 5, companyId: null);
+  (new CashAccountSeeder())->run(cashAccountsPerCompany: 5, companyId: null);
+  // dst.
+  ```
+
+- Jangan lupa pertahankan urutan seeding yang logis:
+  - `User` → `Company` → `Branch` → `Warehouse` → master lainnya (ProductCategory, Brand, Unit, CustomerGroup, Customer, Investor, CashAccount, dll).
+
+6. **Gaya coding di seeder**
+
+- Tidak perlu komentar ekstra di dalam seeder kecuali benar‑benar diperlukan.
+- Gunakan `random_int(0, 1)` untuk variasi sederhana status, bukan logic rumit.
+- Hindari query berat di dalam loop kecil jika bisa disederhanakan dengan satu query di awal (seperti pattern di `UnitSeeder`).
\ No newline at end of file
diff --git a/.trae/rules/04actionclasspattern.md b/.trae/rules/04actionclasspattern.md
new file mode 100644
index 000000000..8b82a8aa6
--- /dev/null
+++ b/.trae/rules/04actionclasspattern.md
@@ -0,0 +1,210 @@
+---
+alwaysApply: false
+description: 
+---
+Berikut adalah analisa pola standar yang ditemukan pada semua *Class Actions* di bawah menu **Master Data**. Analisa ini disusun dalam format yang siap Anda salin ke dalam file rules untuk standarisasi proyek.
+
+Analisa ini mencakup struktur dasar, pola method CRUD, penanganan *caching*, *logging*, dan *unique code generation*.
+
+***
+
+# Standardisasi Action Class (Master Data)
+
+Pola ini berlaku untuk *Action Classes* yang mengelola entitas Master Data (contoh: `CompanyActions`, `BrandActions`, `CustomerActions`, dll).
+
+## 1. Struktur Dasar Class
+Setiap Action class harus memiliki struktur berikut:
+*   **Namespace**: `App\Actions\{EntityName}`
+*   **Class Name**: `{EntityName}Actions`
+*   **Traits Wajib**:
+    *   `use App\Traits\CacheHelper;` (Untuk manajemen cache otomatis)
+    *   `use App\Traits\LoggerHelper;` (Untuk logging error dan performa)
+*   **Constructor**: Umumnya kosong `public function __construct() {}`.
+*   **Database Transaction**: **TIDAK PERLU** menggunakan `DB::beginTransaction()`, `DB::commit()`, atau `DB::rollBack()`.
+    *   Transaction akan ditangani di layer yang lebih tinggi (Controller/Service) atau tidak diperlukan untuk operasi single-model sederhana.
+    *   Cukup gunakan blok `try-catch` untuk menangkap exception dan melakukan logging.
+
+## 2. Pola Method CRUD
+Setiap Action class umumnya mengimplementasikan 5 method utama dengan *signature* dan alur logika yang konsisten.
+
+### 2.1 Urutan Method Public
+Untuk konsistensi navigasi dan kemudahan membaca, urutan method public di setiap Action class harus mengikuti pola berikut:
+
+1. `readAny`
+2. `read`
+3. `create`
+4. `update`
+5. `delete`
+
+### A. Method `create`
+*   **Signature**: `public function create(array $data): Model`
+    *   *Catatan*: Untuk entitas kompleks (seperti Product), parameter dapat berupa **DTO**.
+*   **Alur Logika**:
+    1.  Start timer: `$timer_start = microtime(true);`
+    2.  Block `try-catch-finally`.
+    3.  Instansiasi Model baru.
+    4.  **Auto-generate Code**: `$model->code = $this->generateUniqueCode(...)`.
+    5.  Assign attributes dari `$data`.
+        *   **Null Safety**: Jangan gunakan operator `?? null` atau `?? default` di sini. Null safety dan validasi data harus sudah ditangani di Controller/Request. Action class berasumsi data yang diterima sudah valid dan lengkap (sesuai struktur tabel).
+    6.  Simpan Model: `$model->save()`.
+    7.  **Flush Cache**: `$this->flushCache()`.
+    8.  Return Model.
+*   **Error Handling**: Log error di `catch` menggunakan `$this->loggerDebug(__METHOD__, $e)`.
+*   **Performance**: Log waktu eksekusi di `finally` menggunakan `$this->loggerPerformance(__METHOD__, $execution_time)`.
+
+### B. Method `readAny`
+*   **Signature**: `public function readAny(bool $withTrashed, int $companyId, ?int $branchId, ..., ?ExecuteDTO $execute)`
+*   **Grouping Parameter (Wajib 3 Blok Visual untuk Non-Outlier)**:
+*   Untuk semua Action class non-legacy yang memakai `?ExecuteDTO $execute`, signature `readAny` wajib dibagi menjadi 3 blok dengan linebreak:
+*       1. Blok basis/konteks: parameter scope utama seperti `withTrashed`, `companyId`, `branchId`, `search`, atau parameter konteks lain seperti `referableType` dan `referableId` bila modul tidak memakai company scope
+*       2. Blok filter: seluruh filter spesifik modul seperti `includeId`, `categoryId`, `brandId`, `warehouseId`, `cashAccountId`, `productId`, `productUnitId`, `serial`, `withRemainingStock`, dan filter bisnis lain
+*       3. Blok eksekusi: `execute`
+*   Urutan umum yang harus diutamakan adalah scope/konteks dulu, lalu filter, lalu `execute` terakhir.
+*   Untuk action yang memakai `companyId`, letakkan `companyId` sebelum `search`.
+*   `includeId` dianggap bagian dari blok filter, bukan blok eksekusi.
+*   Urutan dan grouping ini wajib konsisten pada:
+*       *   signature method `readAny`
+*       *   daftar variable di closure `use (...)`
+*       *   urutan filter `if (...)` di query
+*       *   array `$cacheParams`
+*   Action legacy/outlier berikut tidak boleh dirapikan ke pola ini kecuali diminta eksplisit:
+*       *   `UserActions`
+*       *   `RoleActions`
+*       *   `PurchaseOrderProductUnitActions`
+*       *   `PurchaseOrderDownPaymentApplyActions`
+*       *   `PurchaseOrderDownPaymentActions`
+*   **Alur Logika**:
+    1.  **Build Query (Mandatory Filters)**:
+        *   Inisialisasi query dengan filter wajib di level utama (bukan di dalam closure).
+        *   Gunakan Scope/Trait helper jika tersedia (`whereCompanyId`, `whereBranchId`).
+        *   **WithTrashed Pattern**: Gunakan pola deklaratif (withoutTrashed by default, override jika perlu). Gunakan *one-liner* `if` tanpa kurung kurawal agar ringkas.
+            ```php
+            // Correct (One-liner preferred)
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+            ```
+        *   **Joins**: Lakukan `join` eksplisit jika perlu melakukan filtering atau sorting berdasarkan kolom di tabel relasi (misal: `stock_adjustments.date`).
+    2.  **Apply Conditional/Complex Filters**:
+        *   Gunakan `where(function($q) { ... })` untuk search, filter spesifik, atau kondisi OR yang kompleks.
+    3.  **Apply Sorting**:
+        *   Gunakan `orderBy` yang relevan.
+        *   **Deterministic Sorting**: SELALU tambahkan `orderBy('id', 'asc')` (atau desc) sebagai sorting terakhir untuk memastikan urutan data konsisten saat pagination, terutama jika sorting utama memiliki nilai yang sama.
+        *   Contoh:
+            ```php
+            $query->orderBy('companies.name', 'asc')
+                  ->orderBy('stock_adjustments.date', 'desc')
+                  ->orderBy('stock_adjustment_in_products.id', 'asc'); // Final tie-breaker
+            ```
+    4.  **Execute Check**:
+        *   Jika `$execute` adalah `null`, return `$query` (Query Builder) segera.
+    5.  **Caching Logic** (Inside `if ($execute)`):
+        *   Generate `$cacheKey` menggunakan `implode` array parameter eksplisit (HINDARI `json_encode` object/DTO).
+            ```php
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                ...
+            ];
+            $cacheKey = 'read_any_...'.implode('_', $cacheParams);
+            ```
+        *   **Check Cache**: Gunakan method `readFromCache` (dari `CacheHelper`).
+        *   **Cache Hit Validation**: Bandingkan hasil dengan `Config::get('dcslab.ERROR_RETURN_VALUE')` untuk memastikan validitas cache (bukan sekadar `!is_null`).
+            ```php
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+            ```
+    6.  **Pagination/Limit**:
+        *   Handle `pagination` atau `limit` berdasarkan property di `ExecuteDTO`.
+        *   **PENTING**: Properti `limit` berada di dalam objek `$execute->get`, BUKAN langsung di `$execute`.
+            ```php
+            if ($execute->pagination) {
+                // ... paginate logic
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+            ```
+    7.  **Performance Logging**:
+        *   Hitung `$recordsCount` dari hasil.
+        *   Log performance dengan jumlah record: `$this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);`.
+
+### C. Method `read`
+*   **Signature**: `public function read(Model $model): Model`
+*   **Alur Logika**:
+    *   Load relasi yang dibutuhkan: `return $model->load('relation1', 'relation2');`.
+    *   Untuk modul transaksi stok yang menampilkan detail produk di frontend, relasi produk dan gambar wajib ikut di-load (contoh jalur: `productUnit.product.images`).
+
+### F. Aturan Relasi `with` untuk Transaksi Stok
+*   Pada method `readAny`:
+    *   Relasi utama (`belongsTo`) yang sering dipakai UI harus selalu di-`with` (contoh: `stockAdjustment`, `productUnit`, `productUnit.unit`, `productUnit.product`, `productUnit.product.images`).
+    *   Relasi `hasMany` yang berat hanya di-`with` saat pagination (`$execute?->pagination`) untuk efisiensi query.
+    *   Pola ini wajib dipakai pada action transaksi stok seperti `StockAdjustmentActions`, `StockAdjustmentInProductActions`, `StockAdjustmentOutProductActions`, `StockAdjustmentInProductSerialActions`, dan `StockAdjustmentOutProductSerialActions`.
+*   Pada method `read`:
+    *   Gunakan `load([...])` yang lengkap untuk seluruh relasi yang dibutuhkan halaman detail, termasuk nested relation ke produk dan gambar.
+
+### D. Method `update`
+*   **Signature**: `public function update(Model $model, array $data): Model`
+    *   *Catatan*: Gunakan **DTO** jika entitas kompleks.
+*   **Alur Logika**:
+    1.  Start timer & Try-Catch-Finally.
+    2.  **Regenerate Code**: `$this->generateUniqueCode(..., $model->id)` (pastikan kirim ID untuk pengecualian unik).
+    3.  **Assign Attributes**: Assign properti satu per satu (Style Property Assignment), BUKAN `update([...])`. Ini lebih eksplisit dan konsisten dengan method `create`.
+        ```php
+        $model->field1 = $data['field1'];
+        $model->field2 = $data['field2'];
+        // ...
+        $model->save();
+        ```
+    4.  **Jangan Ubah Foreign Key Konteks yang Immutable**:
+        *   Jika `company_id`, `branch_id`, atau foreign key konteks lain ditetapkan saat create dan secara bisnis tidak boleh berpindah konteks, maka field tersebut **tidak boleh** di-assign ulang pada method `update`.
+        *   Untuk kebutuhan seperti generate unique code saat update, gunakan nilai yang sudah ada di model (contoh: `$model->company_id`), bukan dari payload update.
+        *   Contoh yang benar:
+            ```php
+            $model->code = $this->generateUniqueCode($model->company_id, $data['code'], $model->id);
+            $model->date = $data['date'];
+            $model->remarks = $data['remarks'];
+            $model->save();
+            ```
+    5.  **Style Kondisional Singkat**:
+        *   Jika conditional hanya berisi satu statement pendek, utamakan *one-line if* tanpa kurung kurawal agar konsisten dengan style project pada action class.
+        *   Cocok dipakai untuk sinkronisasi atau delete relasi internal yang sederhana.
+        *   Contoh:
+            ```php
+            $cashTransaction = $model->cashTransaction;
+            if ($cashTransaction) $this->cashTransactionActions->delete($cashTransaction);
+            ```
+    6.  `$this->flushCache()`.
+    7.  Return `$model->refresh()`.
+
+### E. Method `delete`
+*   **Signature**: `public function delete(Model $model): bool`
+*   **Alur Logika**:
+    1.  Start timer & Try-Catch-Finally.
+    2.  `$model->delete()`.
+    3.  `$this->flushCache()`.
+    4.  Return `true` (atau hasil delete).
+
+## 3. Helper Methods (Wajib Ada)
+Untuk menjaga konsistensi data unik (Code & Name), method berikut wajib ada:
+
+### A. `generateUniqueCode`
+*   **Signature**: `public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string`
+*   **Logika**:
+    *   Cek jika input adalah keyword AUTO (misal: `config('dcslab.KEYWORDS.AUTO')`).
+    *   Looping `do-while` untuk generate kode (Prefix + Counter + Pad).
+    *   Validasi keunikan menggunakan `isUniqueCode`.
+
+### B. `isUniqueCode`
+*   **Signature**: `public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool`
+*   **Logika**: Cek database apakah kode sudah ada (exclude `$exceptId` jika update).
+
+### C. `isUniqueName`
+*   **Signature**: `public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool`
+*   **Logika**: Validasi keunikan nama (sering digunakan untuk validasi input).
diff --git a/.trae/rules/05resource.md b/.trae/rules/05resource.md
new file mode 100644
index 000000000..8940e3836
--- /dev/null
+++ b/.trae/rules/05resource.md
@@ -0,0 +1,106 @@
+---
+alwaysApply: false
+description: 
+---
+# Standardisasi Resource API
+
+Aturan ini mengatur standar penulisan API Resource (`app/Http/Resources`) untuk menjaga konsistensi format response dan performa aplikasi.
+
+## 1. Struktur Dasar
+- Class harus extends `Illuminate\Http\Resources\Json\JsonResource`.
+- Method utama adalah `toArray($request)`.
+
+## 2. ID Encoding
+Semua field `id` (primary key) **WAJIB** di-encode menggunakan `Hashids`.
+```php
+use Vinkla\Hashids\Facades\Hashids;
+
+'id' => Hashids::encode($this->id),
+```
+
+## 3. Handling Status (Soft Deletes)
+Jika model menggunakan Soft Deletes, resource harus menangani status `DELETED` secara eksplisit. Gunakan helper method private `setStatus` di dalam class resource.
+
+```php
+use App\Enums\RecordStatusEnum;
+
+public function toArray($request)
+{
+    return [
+        // ... field lainnya
+        'status' => $this->setStatus($this->status, $this->deleted_at),
+    ];
+}
+
+private function setStatus($status, $deleted_at)
+{
+    if (! is_null($deleted_at)) {
+        return RecordStatusEnum::DELETED->name;
+    } else {
+        return $status->name;
+    }
+}
+```
+
+## 4. Handling Relationships (Eager Loading)
+Untuk mencegah N+1 Query problem, **WAJIB**:
+- Tidak mengakses relationship secara langsung (`$this->company`, `$this->warehouse`, dll).
+- Selalu menggunakan `whenLoaded` untuk semua relasi pada Resource.
+
+### Single Relation (BelongsTo/HasOne)
+Gunakan `new Resource(...)` dengan `whenLoaded` dan opsional `mergeWhen`.
+```php
+'company' => new CompanyResource($this->whenLoaded('company')),
+// Atau jika ingin di-merge ke root level:
+$this->mergeWhen($this->relationLoaded('company'), [
+    'company' => new CompanyResource($this->whenLoaded('company')),
+]),
+```
+
+### Collection Relation (HasMany)
+Gunakan `Resource::collection(...)`.
+```php
+'branches' => BranchResource::collection($this->whenLoaded('branches')),
+```
+
+## 5. Format Data Lainnya
+- **ULID**: Sertakan jika ada kolom `ulid`.
+- **Enum**: Return `->name` atau `->value` sesuai kebutuhan (biasanya `->name` untuk status).
+- **Boolean**: Pastikan return tipe boolean asli (`true`/`false`) atau `1`/`0` sesuai konvensi database project (Project ini tampaknya menggunakan boolean asli di response JSON).
+
+## Contoh Lengkap
+```php
+namespace App\Http\Resources;
+
+use App\Enums\RecordStatusEnum;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class BranchResource extends JsonResource
+{
+    public function toArray($request)
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'code' => $this->code,
+            'name' => $this->name,
+            
+            // Relationship handling
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            
+            // Status handling
+            'status' => $this->setStatus($this->status, $this->deleted_at),
+        ];
+    }
+
+    private function setStatus($status, $deleted_at)
+    {
+        if (! is_null($deleted_at)) {
+            return RecordStatusEnum::DELETED->name;
+        } else {
+            return $status->name;
+        }
+    }
+}
+```
diff --git a/.trae/rules/06controller.md b/.trae/rules/06controller.md
new file mode 100644
index 000000000..3830f208b
--- /dev/null
+++ b/.trae/rules/06controller.md
@@ -0,0 +1,226 @@
+---
+alwaysApply: false
+description: Standarisasi penulisan Controller untuk modul Master Data, mencakup struktur method, handling request, cache strategy, dan exception handling.
+---
+# Controller Standardization Rules (Master Data)
+
+Aturan ini berlaku untuk semua Controller di bawah menu Master Data (e.g., Company, Branch, Warehouse, Investor, dll).
+
+## 1. General Structure & Dependencies
+- **Inheritance**: Semua controller wajib mewarisi `App\Http\Controllers\BaseController`.
+- **Dependency Injection**: Gunakan Constructor Injection untuk memanggil Action Class.
+- **Penamaan Properti DI**: Nama properti mengikuti nama class Action dalam camelCase, contoh:
+  - `StockAdjustmentActions` → `$stockAdjustmentActions`
+  - `StockAdjustmentInProductActions` → `$stockAdjustmentInProductActions`
+  - `StockAdjustmentOutProductActions` → `$stockAdjustmentOutProductActions`
+- **Common Imports**:
+  - `App\DTOs\ExecuteDTO`, `ExecuteGetDTO`, `ExecutePaginationDTO`
+  - `App\Helpers\HashidsHelper`
+  - `App\Http\Resources\<Entity>Resource`
+  - `Illuminate\Support\Facades\Auth`
+  - `Illuminate\Support\Facades\DB`
+  - `Exception`
+
+## 2. CRUD Methods Standard
+
+### 2.1 Urutan Method Public
+Untuk semua controller CRUD di bawah menu Master Data, urutan method public utama harus menggunakan pola berikut:
+
+1. `readAny`
+2. `read`
+3. `store`
+4. `update`
+5. `delete`
+
+### A. Method `store(StoreRequest $request)`
+1.  **Validation**: Gunakan dedicated FormRequest class (e.g., `StoreSupplierRequest` atau `SupplierStoreRequest`).
+    - **Pemisahan Request**: Wajib memisahkan Request untuk Store dan Update untuk menjaga *Single Responsibility*.
+    - Ambil data dengan `$request->validated()`.
+2.  **Transaction**: Bungkus logika dalam `try-catch` block dengan `DB::beginTransaction()`, `DB::commit()`, dan `DB::rollBack()`.
+3.  **Unique Validation**: Lakukan validasi unik manual (Code/Name) memanggil method Action (`isUniqueCode`/`isUniqueName`).
+    - **Guard Clause**: Gunakan *One-line Guard Clause* untuk pengecekan validasi.
+    - *Syntax*: `if (! $isUnique) return response()->error(['field' => [trans('rules.unique_...')]], 422);`
+4.  **Action Execution**: Panggil method `create` pada Action Class.
+    - *Input*: Kirimkan `array` data (Default).
+    - Jika Action menerima DTO, gunakan named argument pada pemanggilan Action dan constructor DTO agar mapping field eksplisit dan mudah dibaca.
+      ```php
+      $result = $this->entityActions->create(
+          data: new EntityCreateDTO(
+              companyId: $validatedRequest['company_id'],
+              branchId: $validatedRequest['branch_id'],
+          )
+      );
+      ```
+5.  **Response**:
+    - Success: `response()->success()`
+    - Failure: `response()->error($errorMsg)`
+    - **Formatting**: Gunakan ternary operator untuk return response.
+      `return is_null($result) ? response()->error($errorMsg) : response()->success();`
+
+### B. Method `readAny(Request $request)`
+1.  **Auth & Authorization**:
+    - **Guard Clause**: Wajib cek `Auth::check()` dengan *One-line Guard Clause*.
+      `if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);`
+    - Lanjutkan dengan `$this->authorize('viewAny', Model::class);`.
+2.  **Input Handling**:
+    - Gunakan `Illuminate\Http\Request` biasa, bukan FormRequest khusus.
+    - Decode Hashids (e.g., `company_id`, `include_id`) sebelum validasi.
+    - Validasi inline menggunakan `$request->validate([...])`.
+    - **Urutan Parameter Validasi Wajib**:
+      1. `with_trashed` (boolean)
+      2. `company_id` (integer)
+      3. `search` (string)
+      4. ... (Filter spesifik lainnya)
+      5. `refresh` (boolean)
+      6. `paginate` (array)
+      7. `get` (array)
+3.  **Cache Strategy**:
+    - Logic: `useCache` harus bernilai kebalikan dari request `refresh`.
+    - Syntax: `useCache: ! $validatedRequest['refresh']`.
+4.  **Pagination/Get Logic**:
+    - Gunakan *Immediately Invoked Function Expression (IIFE)* atau closure untuk memisahkan logika `ExecutePaginationDTO` dan `ExecuteGetDTO`.
+5.  **Grouping Named Argument `readAny` (Wajib 3 Blok untuk Non-Outlier)**:
+    - Pada pemanggilan Action `readAny`, susun named argument menjadi 3 blok dengan linebreak:
+      1. Blok basis/konteks: parameter seperti `withTrashed`, `companyId`, `branchId`, `search`, atau konteks utama lain seperti `referableType` dan `referableId`
+      2. Blok filter: semua filter spesifik modul seperti `includeId`, `categoryId`, `brandId`, `warehouseId`, `cashAccountId`, `productId`, `productUnitId`, `serial`, `withRemainingStock`, dan filter bisnis lain
+      3. Blok eksekusi: `execute`
+    - Untuk controller yang memakai `companyId`, urutan basis yang diutamakan adalah `withTrashed`, `companyId`, `branchId` (jika ada), lalu `search`.
+    - `includeId` tetap masuk ke blok filter.
+    - Named argument wajib mengikuti urutan pada signature Action agar mapping tetap mudah dibaca saat review.
+    - Aturan ini berlaku untuk seluruh controller non-legacy yang memanggil `readAny(..., execute: new ExecuteDTO(...))`, termasuk controller master data dan transaksi.
+    - Controller legacy/outlier berikut dikecualikan dan tidak boleh dipaksa ke pola ini kecuali diminta eksplisit:
+      - `UserController`
+      - `RoleController`
+      - `PurchaseOrderProductUnitController`
+      - `PurchaseOrderDownPaymentApplyController`
+      - `PurchaseOrderDownPaymentController`
+    - Controller Stock Adjustment Product tetap wajib mengikuti pola ini secara ketat:
+      - `StockAdjustmentInProductController`
+      - `StockAdjustmentOutProductController`
+      - `StockAdjustmentInProductSerialController`
+      - `StockAdjustmentOutProductSerialController`
+6.  **Response**: `Resource::collection($result)`.
+    - Gunakan *Early Return* jika hasil null.
+      ```php
+      if (is_null($result)) {
+          return response()->error($errorMsg);
+      }
+      return Resource::collection($result);
+      ```
+
+### C. Method `read(Model $model)`
+1.  **Auth & Authorization**:
+    - **Guard Clause**: Wajib cek `Auth::check()` dengan *One-line Guard Clause* (sama seperti `readAny`).
+    - Lanjutkan dengan `$this->authorize('view', $model);`.
+2.  **Execution**: Panggil method `read` pada Action Class.
+3.  **Response**: `new Resource($result)`.
+    - Gunakan *Early Return* jika hasil null (sama seperti `readAny`).
+
+### D. Method `update(Model $model, UpdateRequest $request)`
+1.  **Validation**: Gunakan dedicated FormRequest class (e.g., `UpdateSupplierRequest` atau `SupplierUpdateRequest`).
+2.  **Flow**: Mirip dengan `store`.
+3.  **Unique Validation**: Sertakan ID model saat ini untuk pengecualian (`ignore current id`).
+    - Gunakan *One-line Guard Clause* untuk pengecekan validasi.
+4.  **Action Execution**: Panggil method `update` pada Action Class.
+    - Jika Action menerima DTO, gunakan named argument baik untuk entity utama maupun `data`.
+      ```php
+      $result = $this->entityActions->update(
+          entity: $entity,
+          data: new EntityUpdateDTO(
+              code: $validatedRequest['code'],
+              remarks: $validatedRequest['remarks'],
+          )
+      );
+      ```
+5.  **Response**:
+    - Gunakan ternary operator untuk return response (sama seperti `store`).
+
+### E. Method `delete(Model $model)`
+1.  **Auth & Authorization**:
+    - **Guard Clause**: Wajib cek `Auth::check()` dengan *One-line Guard Clause*.
+    - Lanjutkan dengan `$this->authorize('delete', $model);`.
+2.  **Transaction**: Wajib menggunakan DB Transaction.
+3.  **Business Rules**: Cek validasi bisnis sebelum delete (e.g., `isDefault`).
+4.  **Response**:
+    - Gunakan ternary operator untuk return response.
+      `return ! $result ? response()->error($errorMsg) : response()->success();`
+
+## 3. Exceptions & Special Cases
+
+### A. Data Transfer Object (DTO) vs Array
+- **Default**: Gunakan **Array** (`$validatedRequest`) untuk mengirim data ke Action Class.
+- **DTO Usage Criteria**: Gunakan **DTO** hanya jika:
+  1.  Struktur data/kolom sangat rumit (complex columns).
+  2.  Data object tersebut digunakan kembali di banyak tempat (reusability).
+- **Contoh**: `ProductController` menggunakan `ProductPhysicalCreateDTO` karena kompleksitas atribut produk fisik.
+
+### B. Method Naming
+- Jika Controller menangani multiple tipe entitas (seperti **Product** yang memisahkan Physical dan Service), penamaan method boleh spesifik:
+  - `storePhysical`, `storeService`
+  - `updatePhysical`
+
+### C. Helper Methods
+- Method tambahan seperti `getTypes()` diperbolehkan untuk mengembalikan Enum/Konstanta ke frontend.
+
+## 4. Form Request Standard
+
+### A. Prepare For Validation
+1.  **Use `filled()` over `has()`**:
+    - Saat melakukan merge input di `prepareForValidation`, gunakan method `$this->filled('key')` daripada `$this->has('key')`.
+    - **Alasan**: `filled()` memastikan nilai tidak hanya *exist* tapi juga tidak kosong/null string. Ini mencegah error decoding pada Hashids dan memastikan sanitasi data (string kosong menjadi null).
+    - **Contoh**:
+      ```php
+      protected function prepareForValidation()
+      {
+          $this->merge([
+              // Decode Hashids hanya jika terisi
+              'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+              // Sanitasi string kosong menjadi null
+              'address' => $this->filled('address') ? $this['address'] : null,
+          ]);
+      }
+      ```
+
+### B. Transaksional Dengan Child (Parent + Detail)
+
+- Untuk modul transaksional yang saat simpan/update juga menyimpan child/detail (misal: StockAdjustment dengan in_products/out_products):
+  - Wajib menggunakan FormRequest terpisah untuk `store` dan `update` khusus transaksi tersebut.
+  - Struktur rules untuk child harus dipusatkan di class khusus di namespace `App\Validation\<Domain>\`, lalu dipetakan ke nested field di FormRequest.
+    - Contoh format di FormRequest:
+      ```php
+      $rules['in_products'] = ['nullable', 'array'];
+      $rules += StockAdjustmentInProductRules::mapToFieldNames($this->company_id ?? 0,
+          'in_products.*.qty',
+          'in_products.*.product_unit_id',
+          'in_products.*.product_unit_conversion_value',
+          'in_products.*.product_unit_cogs',
+          'in_products.*.remarks',
+      );
+
+      $rules['out_products'] = ['nullable', 'array'];
+      $rules += StockAdjustmentOutProductRules::mapToFieldNames($this->company_id ?? 0,
+          'out_products.*.qty',
+          'out_products.*.product_unit_id',
+          'out_products.*.product_unit_conversion_value',
+          'out_products.*.remarks',
+      );
+      ```
+  - Pola di atas memastikan:
+    - Satu sumber kebenaran untuk rules child.
+    - Jika aturan field child berubah, FormRequest akan ikut terdampak (mencegah duplikasi rules tersebar di banyak tempat).
+
+### B. Authorization
+1.  **Check Auth First**: Selalu cek `Auth::check()` terlebih dahulu.
+2.  **Gate Policy**: Gunakan `$user->can()` untuk memanggil Policy yang sesuai.
+    - **Contoh**:
+      ```php
+      public function authorize()
+      {
+          if (! Auth::check()) {
+              return false;
+          }
+          /** @var \App\User */
+          $user = Auth::user();
+          return $user->can('create', Supplier::class);
+      }
+      ```
diff --git a/.trae/rules/07apitest.md b/.trae/rules/07apitest.md
new file mode 100644
index 000000000..9ec6a7203
--- /dev/null
+++ b/.trae/rules/07apitest.md
@@ -0,0 +1,121 @@
+---
+alwaysApply: false
+description: 
+---
+# Standarisasi API Test (Master Data)
+
+Aturan ini berlaku untuk pembuatan dan pemeliharaan tes API pada modul Master Data (dan turunannya) yang terletak di `tests/Feature/API`.
+
+## 1. Struktur File dan Namespace
+
+Setiap modul memiliki direktori sendiri di dalam `tests/Feature/API/` dengan format nama `{Module}API`.
+Tes dipecah berdasarkan aksi (CRUD) menjadi file terpisah:
+
+- `Create`: `{Module}API/{Module}APICreateTest.php`
+- `Read`: `{Module}API/{Module}APIReadTest.php`
+- `Edit`: `{Module}API/{Module}APIEditTest.php`
+- `Delete`: `{Module}API/{Module}APIDeleteTest.php`
+
+**Namespace:** `Tests\Feature\API\{Module}API;`
+**Inheritance:** Semua class test harus meng-extend `Tests\APITestCase`.
+
+## 2. Penamaan Method Test
+
+Format penamaan method harus konsisten:
+`test_{module}_api_call_{action}_{condition}_expect_{result}`
+
+Contoh:
+- `test_branch_api_call_store_without_authorization_expect_unauthorized_message`
+- `test_branch_api_call_update_expect_successful`
+- `test_branch_api_call_delete_of_nonexistance_ulid_expect_not_found`
+
+## 3. Standar Test Case
+
+Setiap file test harus mencakup skenario berikut (jika relevan):
+
+### Common Scenarios (Create, Edit, Delete, Read)
+1.  **Unauthorized Access**: Memastikan user tanpa login mendapatkan respon 401.
+    - Method: `..._without_authorization_expect_unauthorized_message`
+    - Assert: `$api->assertUnauthorized()`
+2.  **Forbidden Access**: Memastikan user login tanpa hak akses mendapatkan respon 403.
+    - Method: `..._without_access_right_expect_forbidden_message`
+    - Assert: `$api->assertForbidden()`
+
+### Create & Edit Scenarios (`save`, `edit`)
+1.  **Successful Operation**: Test flow normal dengan data valid.
+    - Gunakan `Hashids::encode($id)` untuk referensi ID dalam payload.
+    - Assert: `$api->assertSuccessful()` dan `$this->assertDatabaseHas(...)`.
+2.  **XSS Protection**: Memastikan script tag di-strip atau di-encode.
+    - `..._with_script_tags_in_payload_expect_stripped`
+    - `..._with_script_tags_in_payload_expect_encoded` (header `X-Sanitizer-Mode: encode`)
+3.  **Validation Errors**: Test field wajib kosong atau format salah.
+    - Assert: `$api->assertJsonValidationErrors(['field_name'])`.
+4.  **Unique Code Validation**:
+    - `..._with_existing_code_in_same_company_expect_failed` (422 Unprocessable).
+    - `..._with_existing_code_in_different_company_expect_successful` (Harus boleh duplikat beda company).
+5.  **Auto Code**: Jika fitur mendukung `AUTO` generate code.
+    - `..._with_auto_code_expect_successful`.
+
+### Delete Scenarios (`delete`)
+1.  **Successful Delete**:
+    - Assert: `$api->assertSuccessful()` dan `$this->assertSoftDeleted(...)` (jika soft delete).
+2.  **Not Found**: Menghapus resource dengan ULID random/tidak ada.
+    - Assert: `$api->assertStatus(404)`.
+3.  **Logic Constraints**: Menghapus data yang tidak boleh dihapus (misal: Main Branch).
+    - Assert: `$api->assertUnprocessable()` atau status 422.
+
+### Read Scenarios (`read`)
+1.  **Successful Read**:
+    - Assert: `$api->assertSuccessful()`.
+    - Cek struktur JSON respon (pagination, data).
+2.  **Pagination & Filtering**:
+    - Pastikan parameter seperti `page`, `per_page`, `search`, `company_id` berfungsi.
+    - Ikuti urutan parameter sesuai `rules/05controller.md` untuk request.
+
+## 4. Setup dan Data Factory
+
+- Gunakan `User::factory()` dengan role `DEVELOPER` untuk user yang memiliki akses penuh dalam test positif.
+- Gunakan `setUp(): void` yang memanggil `parent::setUp()`.
+- Hindari hardcode ID, gunakan factory relationship.
+
+```php
+$user = User::factory()
+    ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+    ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+    ->create();
+```
+
+## 5. Routing
+
+Gunakan helper `route()` dengan nama route yang standar:
+- Create: `api.post.{module}.save`
+- Read: `api.get.{module}.read`
+- Edit: `api.post.{module}.edit` (parameter ULID)
+- Delete: `api.post.{module}.delete` (parameter ULID)
+
+## 6. Contoh Implementasi (Template Singkat)
+
+```php
+public function test_module_api_call_store_expect_successful()
+{
+    // 1. Setup User & Data
+    $user = User::factory()->...->create();
+    $this->actingAs($user);
+
+    // 2. Prepare Payload
+    $company = $user->companies->first();
+    $payload = Model::factory()->make([
+        'company_id' => Hashids::encode($company->id),
+    ])->toArray();
+
+    // 3. Call API
+    $api = $this->json('POST', route('api.post.module.save'), $payload);
+
+    // 4. Assertions
+    $api->assertSuccessful();
+    $this->assertDatabaseHas('table_name', [
+        'company_id' => $company->id,
+        'name' => $payload['name'],
+    ]);
+}
+```
diff --git a/.trae/rules/08requestts.md b/.trae/rules/08requestts.md
new file mode 100644
index 000000000..a07c24a5d
--- /dev/null
+++ b/.trae/rules/08requestts.md
@@ -0,0 +1,116 @@
+---
+alwaysApply: false
+description: 
+---
+# Standarisasi Request.ts (Frontend Type Definitions)
+
+Aturan ini mengatur standar penulisan file definisi tipe TypeScript (`Request.ts`) untuk layanan frontend di direktori `web/src/types/services`.
+
+## 1. Penamaan File dan Lokasi
+- **Lokasi**: `web/src/types/services/{module}/{Module}Request.ts`
+- **Penamaan File**: `{Module}Request.ts` (PascalCase).
+- **Contoh**: `web/src/types/services/branch/BranchRequest.ts`
+
+## 2. Struktur Interface
+Setiap file `Request.ts` umumnya harus memiliki interface berikut:
+
+### 2.1. ReadAnyPaginateRequest
+Digunakan untuk request daftar data dengan paginasi.
+
+**Format Penamaan**: `export interface {Module}ReadAnyPaginateRequest`
+
+**Urutan Property (Wajib Dipatuhi):**
+1.  `with_trashed: boolean;` (Wajib, paling atas)
+2.  `company_id: string;` (Jika modul scope company)
+3.  `branch_id?: string | null;` (Jika modul scope branch)
+4.  `search?: string | null;` (Pencarian umum)
+5.  `...filters` (Filter spesifik lain, misal `branch_id`, `status`, `type`, `include_id`, dll)
+    - **Catatan**: Urutan filter harus sesuai dengan urutan `$fillable` pada Model terkait di backend.
+6.  `refresh: boolean;` (Wajib)
+8.  `page: number;` (Wajib)
+9.  `per_page: number;` (Wajib)
+
+**Contoh:**
+```typescript
+export interface BranchReadAnyPaginateRequest {
+    with_trashed: boolean;
+    company_id: string;
+    search?: string | null;
+    is_main?: boolean;
+    status?: string | number;
+    include_id?: string;
+    refresh: boolean;
+    page: number;
+    per_page: number;
+}
+```
+
+### 2.2. ReadAnyGetRequest
+Digunakan untuk request daftar data tanpa paginasi penuh (biasanya dengan limit).
+
+**Format Penamaan**: `export interface {Module}ReadAnyGetRequest`
+
+**Urutan Property:**
+Mirip dengan `PaginateRequest`, namun mengganti `page` dan `per_page` dengan `limit`.
+
+1.  `with_trashed: boolean;`
+2.  `company_id: string;`
+3.  `search?: string | null;`
+
+4.  `...` (Property scope & filter sama seperti Paginate)
+    - **Catatan**: Urutan filter wajib mengikuti urutan `$fillable` pada Model terkait di backend.
+5.  `refresh: boolean;`
+6.  `limit: number;`
+
+**Contoh:**
+```typescript
+export interface BranchReadAnyGetRequest {
+    with_trashed: boolean;
+    company_id: string;
+    search?: string | null;
+    is_main?: boolean;
+    status?: string | number;
+    include_id?: string;
+    refresh: boolean;
+    limit: number;
+}
+```
+
+### 2.3. StoreRequest & UpdateRequest
+Digunakan untuk payload Create dan Edit.
+
+**Format Penamaan**:
+- `export interface {Module}StoreRequest`
+- `export interface {Module}UpdateRequest`
+
+**Aturan:**
+- Sesuaikan dengan field yang dibutuhkan API.
+- Gunakan tipe yang tepat (`string`, `number`, `boolean`).
+- Property opsional ditandai dengan `?`.
+
+## 3. Konvensi Tipe Data
+- **Search**: `search?: string | null;`
+- **Status**: `status?: string | number;` (Mengakomodasi status berupa kode string atau angka enum)
+- **ID Fields**: `string` (Karena menggunakan Hashids)
+- **Boolean Flags**: `boolean` (bukan number 0/1)
+
+## 4. Urutan Filter (Wajib)
+Semua filter tambahan (selain `company_id`, `branch_id`, dan `search`) **WAJIB** diurutkan berdasarkan urutan properti `$fillable` pada Model Eloquent terkait di backend. Hal ini untuk memastikan konsistensi antara Frontend dan Backend validation logic.
+
+## 5. Referensi
+Selalu pastikan interface ini sinkron dengan parameter yang diharapkan oleh Controller API di sisi backend (lihat `06controller.md` untuk urutan parameter di backend, meskipun di frontend kita mengirim object JSON/Query param, menjaga konsistensi penamaan sangat penting).
+
+## 6. Aturan Khusus Stock Adjustment Product `readAny`
+- Untuk request type:
+  - `StockAdjustmentInProductReadAnyPaginateRequest`
+  - `StockAdjustmentInProductReadAnyGetRequest`
+  - `StockAdjustmentOutProductReadAnyPaginateRequest`
+  - `StockAdjustmentOutProductReadAnyGetRequest`
+  - `StockAdjustmentInProductSerialReadAnyPaginateRequest`
+  - `StockAdjustmentInProductSerialReadAnyGetRequest`
+  - `StockAdjustmentOutProductSerialReadAnyPaginateRequest`
+  - `StockAdjustmentOutProductSerialReadAnyGetRequest`
+- Urutan property wajib mengikuti 3 blok:
+  1. `with_trashed`, `company_id`, `branch_id`, `search`
+  2. `stock_adjustment_id`, `start_date`, `end_date`, `category_id`, `in_warehouse_id`, `out_warehouse_id`, `product_unit_code`, `product_name`, `product_category_id`, `product_brand_id`
+  3. `refresh` lalu `page/per_page` atau `limit`
diff --git a/.trae/rules/09service.md b/.trae/rules/09service.md
new file mode 100644
index 000000000..392df13f8
--- /dev/null
+++ b/.trae/rules/09service.md
@@ -0,0 +1,221 @@
+---
+alwaysApply: false
+description: 
+---
+# Standarisasi Service Frontend (Service.ts)
+
+Dokumen ini menjelaskan standar penulisan file Service di frontend (`web/src/services/`) untuk menjaga konsistensi, type safety, dan kemudahan maintenance.
+
+## 1. Struktur Dasar Class
+Setiap Service class harus:
+- Di-export sebagai `default`.
+- Menginjeksi `ZiggyRouteStore` untuk manajemen route.
+- Menginjeksi `ErrorHandlerService` untuk penanganan error yang seragam.
+- Memiliki properti `ziggyRoute` dan `errorHandlerService`.
+
+```typescript
+import axios from "../axios";
+import { useZiggyRouteStore } from "../stores/ziggy-route";
+import { route, Config } from "ziggy-js";
+import { ServiceResponse } from "../types/services/ServiceResponse";
+import ErrorHandlerService from "./ErrorHandlerService";
+// ... imports lainnya
+
+export default class ExampleService {
+    private ziggyRoute: Config;
+    private ziggyRouteStore = useZiggyRouteStore();
+    private errorHandlerService;
+
+    constructor() {
+        this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+        this.errorHandlerService = new ErrorHandlerService();
+    }
+    // ... methods
+}
+```
+
+## 2. Penamaan Method (Naming Convention)
+Gunakan nama method berikut untuk operasi standar CRUD:
+
+| Operasi | Nama Method | Signature |
+|---------|-------------|-----------|
+| Read Paginated | `readAnyPaginate` | `(args: RequestType): Promise<ServiceResponse<Collection<Array<Model>> \| null>>` |
+| Read List (No Pagination) | `readAnyGet` | `(args: RequestType): Promise<ServiceResponse<Resource<Array<Model>> \| null>>` |
+| Read Single | `read` | `(ulid: string): Promise<ServiceResponse<Model \| null>>` |
+| Delete | `delete` | `(ulid: string): Promise<ServiceResponse<boolean \| null>>` |
+| Form Create | `use[Entity]CreateForm` | `(): Form<...>` |
+| Form Edit | `use[Entity]EditForm` | `(ulid: string): Form<...>` |
+
+## 2.1. Urutan Method dalam Class Service
+Setelah `constructor()`, urutan method di dalam class service wajib konsisten seperti berikut:
+
+1. `readAnyPaginate`
+2. `readAnyGet`
+3. `read`
+4. `use[Entity]CreateForm`
+5. `use[Entity]EditForm`
+6. `delete`
+
+Contoh urutan yang benar:
+
+```typescript
+export default class ExampleService {
+  constructor() {
+    // ...
+  }
+
+  public async readAnyPaginate(...) {
+    // ...
+  }
+
+  public async readAnyGet(...) {
+    // ...
+  }
+
+  public async read(...) {
+    // ...
+  }
+
+  public useExampleCreateForm() {
+    // ...
+  }
+
+  public useExampleEditForm(ulid: string) {
+    // ...
+  }
+
+  public async delete(ulid: string) {
+    // ...
+  }
+}
+```
+
+Urutan ini dipakai agar service mudah dipindai: method baca data ditempatkan lebih dulu, form builder di tengah, dan aksi destruktif `delete` diletakkan paling akhir.
+
+## 3. Penanganan Parameter Request (Query Params)
+Pastikan parameter diproses dengan benar sebelum dikirim ke API:
+
+### a. Boolean
+Jangan mengonversi boolean ke `1` atau `0` secara manual. Kirimkan nilai boolean asli jika API mendukungnya, atau biarkan handling di backend.
+**JANGAN:** `queryParams["active"] = args.active ? 1 : 0;`
+**LAKUKAN:**
+```typescript
+if (args.active !== undefined) queryParams['active'] = args.active;
+```
+
+### b. Search & Optional Strings
+Jangan mengirim string kosong (`""`) untuk parameter opsional seperti `search`. Cek keberadaan nilai terlebih dahulu.
+**JANGAN:** `queryParams["search"] = args.search ? args.search : "";`
+**LAKUKAN:**
+```typescript
+if (args.search) queryParams['search'] = args.search;
+```
+
+### c. Conditional Parameters
+Hanya masukkan parameter ke `queryParams` jika nilainya ada (tidak `undefined` atau `null`).
+```typescript
+if (args.status) queryParams['status'] = args.status;
+if (args.company_id) queryParams['company_id'] = args.company_id;
+```
+
+### d. Konsistensi Urutan Query `readAny` untuk Stock Adjustment Product
+Untuk service berikut:
+- `StockAdjustmentInProductService`
+- `StockAdjustmentOutProductService`
+- `StockAdjustmentInProductSerialService`
+- `StockAdjustmentOutProductSerialService`
+
+Urutan pengisian `queryParams` pada `readAnyPaginate` dan `readAnyGet` wajib mengikuti 3 blok:
+1. Basis: `with_trashed`, `company_id`, `branch_id`, `search`
+2. Filter: `stock_adjustment_id`, `start_date`, `end_date`, `category_id`, `in_warehouse_id`, `out_warehouse_id`, `product_unit_code`, `product_name`, `product_category_id`, `product_brand_id`
+3. Eksekusi: `refresh`, lalu `paginate` atau `get`
+
+## 4. Return Types & Response Handling
+Selalu gunakan tipe data yang eksplisit.
+
+### Delete Method
+Method `delete` harus mengembalikan `ServiceResponse<boolean | null>`, bukan `any` atau `void`.
+
+```typescript
+public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+    try {
+        // ... request
+        if (response.status == StatusCode.OK) {
+            result.success = true;
+        }
+        return result;
+    } catch (e: unknown) {
+        // error handling
+    }
+}
+```
+
+## 5. Error Handling
+Gunakan pola `try-catch` standar dengan `ErrorHandlerService`.
+
+```typescript
+try {
+    // ... axios call
+} catch (e: unknown) {
+    if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+    } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+    } else {
+        return result;
+    }
+}
+```
+
+## 6. Form Handling (Laravel Precognition)
+Untuk form Create dan Edit, gunakan helper `client` dan `useForm` dari `laravel-precognition-vue`. Pastikan credentials dan CSRF token di-set.
+
+```typescript
+public useExampleCreateForm() {
+    const url = route('api.post.example.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    
+    const form = useForm('post', url, {
+        code: '_AUTO_',
+        name: '',
+        status: 'ACTIVE',
+        // ... fields lainnya
+    });
+
+    return form;
+}
+```
+
+### a. Typing `useForm` (Penting)
+Pada beberapa versi type definition `laravel-precognition-vue`, parameter `data` pada `useForm(...)` dibatasi ke `Record<string, unknown>`. Akibatnya, menambahkan generic seperti `useForm<MyRequestType>(...)` atau mengirim object yang ditipkan langsung ke `MyRequestType` bisa memunculkan error:
+`Index signature for type 'string' is missing in type 'MyRequestType'`.
+
+**LAKUKAN:**
+- Panggil `useForm('post', url, { ... })` tanpa generic.
+- Jika ada field array yang butuh typing, gunakan assertion pada field tersebut saja.
+
+```typescript
+import type { MyStoreRequest } from "../types/services/my-entity/MyEntityRequest";
+
+const form = useForm("post", url, {
+    company_id: "",
+    code: "_AUTO_",
+    items: [] as NonNullable<MyStoreRequest["items"]>,
+});
+```
+
+**JANGAN:**
+```typescript
+const initialData: MyStoreRequest = { /* ... */ };
+const form = useForm("post", url, initialData);
+```
+
+## 7. Import Order
+Urutkan import untuk keterbacaan:
+1. Library eksternal (`axios`, `ziggy-js`, `laravel-precognition-vue`)
+2. Stores (`pinia` stores)
+3. Types (`models`, `resources`, `services`, `enums`)
+4. Internal Services (`ErrorHandlerService`, `CacheService`)
diff --git a/.trae/rules/10createvue.md b/.trae/rules/10createvue.md
new file mode 100644
index 000000000..6e8b04eea
--- /dev/null
+++ b/.trae/rules/10createvue.md
@@ -0,0 +1,620 @@
+---
+alwaysApply: false
+description: Standarisasi penulisan halaman Create (EntityCreate.vue) di Frontend
+---
+# Standarisasi Halaman Create (EntityCreate.vue)
+
+Dokumen ini menjelaskan standar penulisan halaman `[Entity]Create.vue` di frontend (`web/src/pages/[entity]/[Entity]Create.vue`) untuk menjaga konsistensi UI/UX, performa, dan error handling.
+
+## 1. Imports
+
+### Axios
+Jangan mengimpor `axios` secara default. Impor hanya `isAxiosError` dan `AxiosError` untuk keperluan type checking dan error handling.
+
+**JANGAN:** `import axios from "axios";`
+**LAKUKAN:**
+```typescript
+import { isAxiosError, AxiosError } from "axios";
+```
+
+### Components & Services
+Pastikan mengimpor komponen UI standar dan Service yang diperlukan.
+
+```typescript
+import { TwoColumnsLayout } from "@/components/Base/Form/FormLayout";
+import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
+import { CardState } from "@/types/enums/CardState";
+import Button from "@/components/Base/Button";
+import Lucide from "@/components/Base/Lucide";
+import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
+import {
+    FormInput,
+    FormLabel,
+    FormSelect,
+    FormErrorMessages,
+    // ... komponen form lainnya
+} from "@/components/Base/Form";
+import CacheService from "@/services/CacheService";
+import DashboardService from "@/services/DashboardService";
+// ... Import Service entitas terkait
+```
+
+## 2. Struktur & Layout
+
+Gunakan `TwoColumnsLayout` dengan definisi `cards` state.
+
+```typescript
+// Script Setup
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+        title: "views.entity.field_groups.group_1",
+        state: CardState.Expanded,
+        id: "group1"
+    },
+    // ... group lainnya
+    { title: "", state: CardState.Hidden, id: "button" },
+]);
+
+// Template
+<template>
+    <form id="entityForm" @submit.prevent="onSubmit">
+        <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+            <!-- Templates untuk setiap card items -->
+             <template #card-items-button>
+                <!-- Tombol Submit & Reset -->
+             </template>
+        </TwoColumnsLayout>
+    </form>
+</template>
+```
+
+### Struktur Script Setup (Region)
+
+Untuk halaman Create dengan `<script setup>`, gunakan komentar region untuk
+memisahkan blok kode berdasarkan tanggung jawab. Hindari nested region; semua
+region harus berdiri sejajar (flat).
+
+Pola yang direkomendasikan:
+
+```typescript
+// #region Imports
+// import ...
+// #endregion
+
+// #region Declarations
+// type, const ref/computed, service, state form, cards, dll.
+// #endregion
+
+// #region Vue Core
+// handleExpandCard
+// watcher (misal hitung total dari detail)
+// watcher lain
+// onMounted (validasi lokasi user, set default value, load DDL)
+// #endregion
+
+// #region Methods - [Entity]
+// method khusus entitas/form utama (setCode, handleDateTimeChange, load*DDL, clear*)
+// #endregion
+
+// #region Methods - [Detail]
+// method untuk nested array/detail (misal: in_products, out_products)
+// #endregion
+
+// #region Actions
+// helper terkait submit (scrollToError, resetForm, onSubmit)
+// #endregion
+```
+
+Manfaat:
+- Mudah collapse/expand per bagian di editor.
+- Mudah mencari method karena dikelompokkan by responsibility.
+- Konsisten antar halaman Create yang kompleks (terutama yang punya nested detail).
+
+### Form Identifier
+
+**WAJIB** memberikan `id` pada tag `<form>` dengan format `[entity]Form`.
+Ini berguna untuk keperluan testing atau styling spesifik jika dibutuhkan.
+
+```html
+<form id="supplierForm" @submit.prevent="onSubmit">
+    <!-- ... -->
+</form>
+```
+
+### Seksi Company & Branch (Context Lokasi User)
+
+Untuk halaman yang selalu terikat ke `selectedUserLocation`, tampilkan informasi company dan branch di card pertama dalam bentuk read-only, dan simpan `company_id` serta `branch_id` ke form sebagai hidden input.
+
+```vue
+<template #card-items-0>
+    <div class="p-5">
+        <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <!-- company -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+                <FormLabel>
+                    {{ selectedUserLocation.company.code }}
+                    <br />
+                    {{ selectedUserLocation.company.name }}
+                </FormLabel>
+                <FormInput type="hidden" v-model="form.company_id" />
+            </div>
+
+            <!-- branch -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+                <FormLabel>
+                    {{ selectedUserLocation.branch.code }}
+                    <br />
+                    {{ selectedUserLocation.branch.name }}
+                </FormLabel>
+                <FormInput type="hidden" v-model="form.branch_id" />
+            </div>
+        </div>
+    </div>
+</template>
+```
+
+## 3. Lifecycle Hooks (onMounted)
+
+Pada `onMounted`, urutan inisialisasi sangat PENTING untuk mencegah *race condition* antara loading cache dan inisialisasi default form.
+
+**Urutan yang Direkomendasikan:**
+1. Emit mode view.
+2. Validasi lokasi user.
+3. **Load Cache TERLEBIH DAHULU** sebelum inisialisasi default array/object.
+4. Inisialisasi default value (hanya jika cache kosong/tidak ada).
+5. Load DDL secara paralel.
+6. Repopulasi data label/nama dari DDL ke Form (jika diperlukan untuk UI).
+7. Set data kontekstual (misal: `company_id`).
+
+```typescript
+onMounted(async () => {
+    emits("mode-state", ViewMode.FORM_CREATE);
+    
+    // 1. Validasi lokasi user...
+
+    // 2. Load Cache DULUAN untuk mencegah tertimpa inisialisasi default
+    loadFromCache();
+
+    // 3. Inisialisasi Default (hanya jika data kosong)
+    if (form.details.length === 0) {
+        form.details.push({ ...defaultItem });
+    }
+
+    // 4. Load DDL Paralel
+    await Promise.all([
+        getCategoryDDL(),
+        getUnitDDL(),
+        getStatusDDL()
+    ]);
+
+    // 5. Repopulasi Label/Nama (setelah DDL siap)
+    // Penting untuk field yang menyimpan ID tapi menampilkan Nama (Read-only mode)
+    repopulateDetailNames();
+    
+    setCompanyIdData();
+});
+```
+
+## 4. DDL Loading (Drop Down List)
+
+Method `getDDL` sebaiknya bersifat `async` dan langsung mengisi ref variable.
+
+```typescript
+const getStatusDDL = async (): Promise<void> => {
+    const result = await dashboardServices.getStatusDDL();
+    if (result) {
+        statusDDL.value = result;
+    }
+};
+```
+
+## 5. Form Submission & Button State
+
+### Tombol Submit
+Tombol submit **HARUS** di-disable jika form sedang memvalidasi (`validating`) ATAU memiliki error (`hasErrors`).
+
+```html
+<Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
+    :disabled="form.validating || form.hasErrors">
+    <Lucide v-if="form.validating" icon="Loader" class="animate-spin" />
+    <template v-else>
+        {{ t("components.buttons.submit") }}
+    </template>
+</Button>
+```
+
+### Method onSubmit
+Method `onSubmit` harus menangani flow berikut:
+1. Cek `form.hasErrors` -> scroll ke error pertama.
+2. Emit `loading-state` true.
+3. Panggil `form.submit()`.
+4. Handle sukses: reset form, emit update, redirect.
+5. Handle error: parse error menggunakan helper standar.
+6. Finally: emit `loading-state` false.
+
+```typescript
+const onSubmit = async () => {
+    if (form.hasErrors) {
+        scrollToError(Object.keys(form.errors)[0]);
+    }
+    
+    emits("loading-state", true);
+    
+    await form.submit()
+        .then(() => {
+            resetForm();
+            // Sembunyikan alert error sebelumnya jika ada
+            showAlertPlaceholder("hidden", "", null);
+            emits("update-profile");
+            router.push({ name: "route-name-list" });
+        })
+        .catch((error) => {
+            const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+            showAlertPlaceholder("danger", "", errorList);
+        })
+        .finally(() => {
+            emits("loading-state", false);
+        });
+};
+```
+
+## 6. Real-time Validation (Precognition)
+
+Gunakan event `@change` untuk memicu validasi Precognition secara real-time pada setiap input. Ini memberikan feedback instan kepada user.
+
+**Single Field:**
+```html
+<FormInput 
+    v-model="form.name" 
+    :class="{ 'border-danger': form.invalid('name') }"
+    @change="form.validate('name')" 
+/>
+<FormErrorMessages :messages="form.errors.name" />
+```
+
+**Array Field:**
+Gunakan template literal untuk path array.
+```html
+<FormInput 
+    v-model="form.items[index].price" 
+    :class="{ 'border-danger': form.invalid(`items.${index}.price` as any) }"
+    @change="form.validate(`items.${index}.price` as any)" 
+/>
+<FormErrorMessages :messages="(form.errors as any)[`items.${index}.price`]" />
+```
+
+### Nested Array untuk Detail (Contoh: in_products / out_products)
+
+Untuk entity yang memiliki detail nested seperti `in_products` / `out_products` (misalnya Stock Adjustment), gunakan pola berikut agar konsisten dengan Form Request Laravel yang memakai notasi `in_products.*.field_name`:
+
+- Pisahkan detail ke dalam card sendiri di `TwoColumnsLayout` (misal: `views.stock_adjustment.field_groups.in_products`).
+- Gunakan struktur array di form TypeScript yang mengikuti nested request (`StockAdjustmentInProductNestedStoreRequest`, dsb).
+- Selalu gunakan path lengkap saat validasi Precognition:
+
+```html
+<div v-for="(item, index) in form.in_products" :key="index">
+    <FormInput
+        type="number"
+        v-model.number="form.in_products[index].qty"
+        :class="{ 'border-danger': form.invalid(`in_products.${index}.qty` as any) }"
+        @change="form.validate(`in_products.${index}.qty` as any)"
+    />
+    <FormErrorMessages
+        :messages="(form.errors as any)[`in_products.${index}.qty`]"
+    />
+</div>
+```
+
+**Catatan:**
+
+- Nama field di frontend harus selaras dengan rules di Form Request dan `*Rules::mapToFieldNames` agar error message muncul di field yang benar.
+- Untuk field detail lain (`product_unit_id`, `product_unit_conversion_value`, `product_unit_cogs`, `remarks`, dll), gunakan pola path yang sama (`in_products.${index}.field_name`).
+
+## 7. FormItem Types vs NestedStoreRequest
+
+Untuk detail array seperti `in_products` / `out_products`, biasanya ada perbedaan antara:
+
+- Tipe request ke backend (`*NestedStoreRequest`), dan
+- Tipe yang dipakai di halaman Vue (punya field tambahan untuk tampilan).
+
+Pola yang direkomendasikan:
+
+- Simpan `*NestedStoreRequest` di file `types/services/...Request.ts` (hanya field yang benar-benar dikirim ke backend).
+- Di file Vue (`[Entity]Create.vue`), buat `FormItem` type lokal yang:
+  - Menggunakan indexed access untuk field request agar selalu sinkron,
+  - Menambahkan field-field tambahan untuk UI / tampilan.
+
+Contoh (berdasarkan `StockAdjustmentInProductNestedStoreRequest`):
+
+```ts
+type StockAdjustmentInProductFormItem = {
+    qty: StockAdjustmentInProductNestedStoreRequest["qty"];
+    product_unit_id: StockAdjustmentInProductNestedStoreRequest["product_unit_id"];
+    product_unit_product_code?: string | null;
+    product_unit_product_name?: string | null;
+    product_unit_unit_name?: string | null;
+    product_unit_base_unit_name?: string | null;
+    product_unit_conversion_value: StockAdjustmentInProductNestedStoreRequest["product_unit_conversion_value"];
+    product_unit_cogs: StockAdjustmentInProductNestedStoreRequest["product_unit_cogs"];
+    product_unit_total_cogs?: number | null;
+    remarks?: StockAdjustmentInProductNestedStoreRequest["remarks"];
+};
+```
+
+Saat submit, bersihkan field UI sebelum mengirim ke backend:
+
+```ts
+const originalInProducts = form.in_products as StockAdjustmentInProductFormItem[];
+const cleanedInProducts: StockAdjustmentInProductNestedStoreRequest[] =
+    originalInProducts.map(
+        ({
+            product_unit_product_code,
+            product_unit_product_name,
+            product_unit_unit_name,
+            product_unit_base_unit_name,
+            product_unit_total_cogs,
+            ...rest
+        }: StockAdjustmentInProductFormItem) => rest
+    );
+```
+
+## 8. Standard Error Handling Helper
+
+Gunakan fungsi standar ini untuk memparsing error dari Axios response ke format alert list. Fungsi ini menangani `AxiosError` dan `Error` biasa.
+
+```typescript
+const convertErrorTypeToAlertListType = (error: unknown) => {
+    const record: Record<string, Array<string>> = {};
+
+    const anyError = error as any;
+    const response = isAxiosError(error)
+        ? (error as AxiosError).response
+        : anyError?.response;
+
+    if (response && response.data) {
+        const data = response.data as any;
+
+        if (data.errors && typeof data.errors === "object") {
+            for (const key of Object.keys(data.errors)) {
+                const value = data.errors[key];
+
+                if (Array.isArray(value)) {
+                    record[key] = value;
+                } else if (value !== undefined && value !== null) {
+                    record[key] = [String(value)];
+                }
+            }
+            return record;
+        }
+
+        if (data.message) {
+            record.error = [String(data.message)];
+            return record;
+        }
+    }
+
+    if (error instanceof Error && error.message) {
+        record.error = [error.message];
+    } else {
+        record.error = ["Unknown error"];
+    }
+
+    return record;
+};
+```
+
+## 8. Caching (Auto-Save)
+
+Gunakan watcher dengan `debounce` untuk menyimpan draft form ke cache secara otomatis agar data tidak hilang saat refresh.
+
+**Import:**
+```typescript
+import { debounce } from "lodash";
+```
+
+**Implementation:**
+```typescript
+watch(
+    form,
+    debounce(() => {
+        // Simpan form state ke cache
+        // Pastikan key cache unik per halaman (misal: ENTITY_CREATE)
+        cacheServices.setLastEntity("ENTITY_CREATE", form.data());
+    }, 500),
+    { deep: true }
+);
+```
+
+**Load from Cache:**
+Pastikan membuat method `loadFromCache` dan memanggilnya di awal `onMounted`.
+
+```typescript
+const loadFromCache = () => {
+    let data = cacheServices.getLastEntity("ENTITY_CREATE") as Record<string, unknown>;
+    if (!data) return;
+    
+    // Handle specific default values if needed
+    if (!data.code) data.code = '_AUTO_';
+    
+    form.setData(data);
+};
+```
+
+## 9. Dynamic Form Arrays (Master-Detail)
+
+Untuk form yang memiliki list item dinamis (seperti Product Units, Invoice Items), perhatikan hal berikut:
+
+### Tambah Item (Add Item)
+Saat menambah item baru, bersihkan error terkait array tersebut untuk mencegah error lama (stale errors) yang mungkin tidak relevan lagi.
+
+```typescript
+const addItem = () => {
+    form.items.push({
+        // ... default properties
+    });
+
+    // Clear errors related to items to prevent stale errors
+    Object.keys(form.errors).forEach((key) => {
+        if (key.startsWith("items.")) {
+            form.forgetError(key as any);
+        }
+    });
+};
+```
+
+### Hapus Item (Remove Item)
+Saat menghapus item, pastikan menangani state global yang mungkin terpengaruh (misal: Primary Item).
+
+```typescript
+const removeItem = (index: number) => {
+    const isPrimary = form.items[index].is_primary;
+    form.items.splice(index, 1);
+
+    // Re-assign primary status jika yang dihapus adalah primary
+    if (isPrimary && form.items.length > 0) {
+        form.items[0].is_primary = true;
+    }
+
+    // Bersihkan error stale yang mungkin tertinggal untuk index tersebut
+    Object.keys(form.errors).forEach((key) => {
+        if (key.startsWith("items.")) {
+            form.forgetError(key as any);
+        }
+    });
+};
+```
+
+### UX: Bersihkan DOM setelah Pilih Dropdown
+Setelah user memilih item dari dropdown (terutama jika UI berubah menjadi mode read-only), lepaskan fokus dari elemen.
+
+```typescript
+const updateItemName = (index: number, newVal: string) => {
+    // ... logic update ...
+    if (found) {
+        form.items[index].name = found.name;
+        // Lepas fokus agar dropdown tertutup rapi
+        (document.activeElement as HTMLElement)?.blur();
+        
+        // Hapus error spesifik field ini
+        form.forgetError(`items.${index}.item_id` as any);
+    }
+};
+```
+
+### Repopulasi Data Label
+Karena cache biasanya hanya menyimpan ID (value), sedangkan UI mungkin butuh Nama (label), buat fungsi untuk mengisi ulang nama setelah DDL siap.
+
+```typescript
+const repopulateDetailNames = () => {
+    form.items.forEach((item) => {
+        if (item.id && !item.name) {
+            const match = ddl.value?.find(opt => opt.code === item.id);
+            if (match) item.name = match.name;
+        }
+    });
+};
+```
+
+## 10. Helper UI Functions
+
+### Handle Expand Card
+Helper ini digunakan untuk mengatur state expand/collapse card pada `TwoColumnsLayout`.
+
+```typescript
+const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+        cards.value[index].state = CardState.Expanded
+    } else if (cards.value[index].state === CardState.Expanded) {
+        cards.value[index].state = CardState.Collapsed
+    }
+};
+```
+
+### Show Alert Placeholder
+Helper ini digunakan untuk menampilkan alert notifikasi (sukses/gagal) menggunakan emit.
+
+```typescript
+const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
+  let ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alert-placeholder', ap);
+};
+```
+
+### Scroll To Error
+Helper ini digunakan di `onSubmit` untuk scroll otomatis ke field yang error.
+
+```typescript
+const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+};
+```
+
+## 11. Auto-Generated Codes (_AUTO_)
+Untuk field kode yang bisa digenerate otomatis, gunakan pattern `_AUTO_`.
+
+**Template:**
+```html
+<FormInputCode 
+    v-model="form.code"
+    :placeholder="t('views.entity.fields.code')" 
+    @set-auto="setCode"
+    @change="form.validate('code')" 
+/>
+```
+
+**Script:**
+```typescript
+const setCode = () => {
+    form.forgetError("code");
+    if (form.code == "_AUTO_") {
+        form.setData({ code: "" });
+    } else {
+        form.setData({ code: "_AUTO_" });
+    }
+};
+```
+
+## 12. Reset Form Strategy
+Saat mereset form, pastikan untuk mengembalikan state default yang mungkin tidak dicover oleh `form.reset()` standar, terutama untuk array dinamis dan state lokal di luar form.
+
+```typescript
+const resetForm = () => {
+    form.reset();
+    form.setErrors({});
+
+    // Re-initialize default values for arrays or complex objects
+    form.setData({
+        details: [{
+            ...defaultItem,
+            code: '_AUTO_',
+            is_primary: true
+        }]
+    });
+
+    // Reset state lokal yang terkait UI tetapi bukan bagian dari form
+    dateTimeDisplay.value = "";
+    expandedRemarks.value = [];
+};
+```
+
+## 13. Debugging Tips
+
+Untuk men-debug masalah validasi form secara realtime, gunakan watcher ini:
+
+```typescript
+watch(
+    () => form.errors,
+    (newErrors) => {
+        console.log("Realtime Errors Update:", JSON.parse(JSON.stringify(newErrors)));
+        console.log("Has Errors:", form.hasErrors);
+    },
+    { deep: true }
+);
+```
diff --git a/.trae/rules/11editvue.md b/.trae/rules/11editvue.md
new file mode 100644
index 000000000..305645775
--- /dev/null
+++ b/.trae/rules/11editvue.md
@@ -0,0 +1,369 @@
+---
+alwaysApply: false
+description: Standarisasi penulisan halaman Edit (EntityEdit.vue) di Frontend
+---
+# Standarisasi Halaman Edit (EntityEdit.vue)
+
+Dokumen ini menjelaskan standar penulisan halaman `[Entity]Edit.vue` di frontend (`web/src/pages/[entity]/[Entity]Edit.vue`). Standar ini mirip dengan `EntityCreate.vue` namun dengan perbedaan kunci pada **Data Loading** dan **Reset Strategy**.
+
+Contoh konkret yang dijadikan referensi adalah `web/src/pages/stock-adjustment/StockAdjustmentEdit.vue`.
+
+## 1. Imports
+
+- Gunakan Composition API (`ref`, `computed`, `onMounted`, `watch`, `nextTick`).
+- Gunakan `useRoute`, `useRouter` dari `vue-router`.
+- Gunakan form dan layout dari base components (`TwoColumnsLayout`, `FormInput`, `FormLabel`, `FormErrorMessages`, `FormInputCode`, `FormInputCurrency`, `FormTextarea`, `FormSelectSearch`, `FormTomSelect`, `FormSwitch`).
+- Gunakan service khusus entity (misalnya `StockAdjustmentService`, `StockAdjustmentCategoryService`, `WarehouseService`, `ProductService`).
+- Gunakan helper utilitas (`formatDate`, `formatCurrency`).
+- Gunakan store lokasi user (`useSelectedUserLocationStore`) dan enum `ErrorCode` untuk redirect jika lokasi belum dipilih.
+
+Contoh (disederhanakan):
+
+```typescript
+import { computed, ref, onMounted, nextTick, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { TwoColumnsLayout } from "@/components/Base/Form/FormLayout";
+import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
+import { CardState } from "@/types/enums/CardState";
+import { useSelectedUserLocationStore } from "@/stores/selected-user-location";
+import {
+    FormInput,
+    FormLabel,
+    FormErrorMessages,
+    FormInputCode,
+    FormInputCurrency,
+    FormTextarea,
+    FormTomSelect,
+    FormSwitch,
+} from "@/components/Base/Form";
+import { ErrorCode } from "@/types/enums/ErrorCode";
+```
+
+## 2. Struktur & Layout
+
+- Gunakan `TwoColumnsLayout` dengan `cards` yang eksplisit berisi:
+  - Group company/branch (`views.[entity].field_groups.company_info`).
+  - Group data utama entity (`views.[entity].field_groups.[entity]_data`).
+  - Group untuk array detail (misalnya `in_products`, `out_products`).
+  - Card khusus tombol aksi dengan `id: "button"`.
+
+Contoh pola:
+
+```typescript
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+        title: "views.stock_adjustment.field_groups.company_info",
+        state: CardState.Expanded,
+    },
+    {
+        title: "views.stock_adjustment.field_groups.stock_adjustment_data",
+        state: CardState.Expanded,
+    },
+    {
+        title: "views.stock_adjustment.field_groups.in_products",
+        state: CardState.Collapsed,
+    },
+    {
+        title: "views.stock_adjustment.field_groups.out_products",
+        state: CardState.Collapsed,
+    },
+    { title: "", state: CardState.Hidden, id: "button" },
+]);
+```
+
+Form **WAJIB** diberi `id` dengan format `[entity]Form`.
+
+```html
+<form id="stockAdjustmentForm" @submit.prevent="onSubmit">
+    <!-- ... -->
+</form>
+```
+
+## 3. Lifecycle Hooks (onMounted)
+
+- Halaman Edit **tidak** memuat data dari cache; data harus selalu diambil dari server.
+- **WAJIB** validasi lokasi user (`isUserLocationSelected`); jika belum pilih, redirect ke halaman error.
+- Setelah valid, load DDL paralel, kemudian load data entity berdasarkan `route.params.ulid`.
+
+Contoh pola:
+
+```typescript
+onMounted(async () => {
+    if (!isUserLocationSelected.value) {
+        router.push({
+            name: "side-menu-error-code",
+            params: { code: ErrorCode.USERLOCATION_REQUIRED },
+        });
+        return;
+    }
+
+    await Promise.all([
+        loadCategoryDDL(),
+        loadInWarehouseDDL(),
+        loadOutWarehouseDDL(),
+    ]);
+
+    await loadData();
+});
+```
+
+## 4. Data Loading Strategy
+
+- `loadData` bertanggung jawab mengambil data dari API dan mengisi form.
+- Gunakan `route.params.ulid` sebagai key data.
+- Mapping dari model API ke struktur form dilakukan secara eksplisit, termasuk array detail.
+- Untuk kasus master–detail, di form digunakan struktur khusus (FormItem) yang menambahkan field tampilan seperti `product_unit_product_name`, `product_unit_unit_name`, dsb. Field tampilan ini **tidak** dikirim ke backend.
+
+Contoh mapping master–detail (disederhanakan):
+
+```typescript
+const loadData = async () => {
+    const result = await stockAdjustmentService.read(route.params.ulid as string);
+
+    if (result.success && result.data) {
+        const data = result.data;
+
+        const inProducts = (data.in_products || []).map((item: any) => {
+            const productUnit = item.product_unit;
+            const unit = productUnit?.unit;
+            const product = (productUnit as any)?.product;
+
+            return {
+                id: item.id,
+                qty: item.qty,
+                product_unit_id: productUnit?.id ?? "",
+                product_unit_product_code: productUnit?.code ?? "",
+                product_unit_product_name: product?.name ?? "",
+                product_unit_unit_name: unit?.name ?? "",
+                product_unit_base_unit_name: "",
+                product_unit_conversion_value: item.product_unit_conversion_value,
+                product_unit_cogs: item.product_unit_cogs,
+                product_unit_total_cogs: item.product_unit_total_cogs,
+                remarks: item.remarks ?? "",
+            };
+        });
+
+        // mapping outProducts serupa
+
+        stockAdjustmentForm.setData({
+            company_id: data.company.id,
+            branch_id: data.branch.id,
+            code: data.code,
+            date: data.date,
+            category_id: data.category?.id ?? "",
+            in_warehouse_id: data.in_warehouse?.id ?? "",
+            out_warehouse_id: data.out_warehouse?.id ?? "",
+            remarks: data.remarks ?? "",
+            is_posted: data.is_posted,
+            delete_in_product_ids: [],
+            in_products: inProducts as any,
+            delete_out_product_ids: [],
+            out_products: outProducts as any,
+        } as any);
+    }
+};
+```
+
+## 5. DDL Loading
+
+- DDL (dropdown) di-load dengan function async per jenis data (kategori, gudang, dst).
+- Hasil API di-map ke `DropDownOption` (`{ code, name }`).
+- Untuk halaman Edit, **WAJIB** simpan hasil `read` awal ke state terpisah (misalnya `const stockAdjustmentData = ref<StockAdjustment | null>(null);`) di dalam `loadData`, lalu gunakan state ini sebagai sumber kebenaran nilai awal.
+- Saat memanggil API `readAny*` untuk DDL yang punya parameter `include_id`, **WAJIB** gunakan ID dari data awal (misalnya `stockAdjustmentData.value?.category?.id`) dan **JANGAN** menggunakan nilai reactive di form (`stockAdjustmentForm.category_id`). Tujuannya agar opsi awal tetap ikut di hasil DDL walaupun user mengubah nilai form.
+- Di template, untuk select yang bisa di-search, gunakan `FormSelectSearch` dengan:
+  - `v-model` ke field form.
+  - `v-model:search` ke ref string lokal untuk query.
+  - `:options` berupa array `{ value, label }` hasil map dari `DropDownOption`.
+  - Event `@change` untuk memicu `form.validate(field)`.
+  - Event `@search` memanggil loader DDL (API akan dipanggil dengan query search).
+- `FormTomSelect` boleh tetap digunakan untuk kasus khusus yang belum dimigrasi, namun standar baru untuk select searchable adalah `FormSelectSearch`.
+
+Contoh standar DDL dengan `FormSelectSearch`:
+
+```typescript
+const stockAdjustmentData = ref<StockAdjustment | null>(null);
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>("");
+const categoryOptions = computed(() =>
+    (categoryDDL.value ?? []).map((item) => ({
+        value: item.code,
+        label: item.name,
+    }))
+);
+
+const loadCategoryDDL = async (search = "") => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await stockAdjustmentCategoryService.readAnyGet({
+        with_trashed: false,
+        company_id: selectedUserLocation.value.company.id,
+        search,
+        include_id: stockAdjustmentData.value?.category?.id as string | undefined,
+        refresh: false,
+        limit: 20,
+    });
+
+    if (result.success && result.data) {
+        categoryDDL.value = result.data.data.map((item: any) => ({
+            code: item.id,
+            name: item.name,
+        }));
+    }
+};
+```
+
+```html
+<FormSelectSearch
+    v-model="stockAdjustmentForm.category_id"
+    v-model:search="categorySearch"
+    :options="categoryOptions"
+    :placeholder="t('components.dropdown.placeholder')"
+    :class="{ 'border-danger': stockAdjustmentForm.invalid('category_id') }"
+    @change="stockAdjustmentForm.validate('category_id')"
+    @search="loadCategoryDDL"
+/>
+```
+
+## 6. Real-time Validation (Precognition)
+
+- Untuk field biasa gunakan:
+
+```html
+<FormInput
+    v-model="stockAdjustmentForm.code"
+    :class="{ 'border-danger': stockAdjustmentForm.invalid('code') }"
+    @change="stockAdjustmentForm.validate('code')"
+/>
+<FormErrorMessages :messages="stockAdjustmentForm.errors.code" />
+```
+
+- Untuk field array pakai path template literal:
+
+```html
+<FormInputCurrency
+    v-model="item.qty"
+    :class="{
+        'border-danger': stockAdjustmentForm.invalid(`in_products.${index}.qty` as any),
+    }"
+    @change="stockAdjustmentForm.validate(`in_products.${index}.qty` as any)"
+/>
+<FormErrorMessages
+    :messages="(stockAdjustmentForm.errors as any)[`in_products.${index}.qty`]"
+/>
+```
+
+## 7. Form Submission (Update)
+
+- Sebelum submit, bersihkan field tampilan dari array detail sehingga hanya field yang diharapkan backend yang terkirim.
+- Simpan backup array detail, set form ke versi "bersih", jalankan `submit()`, dan kembalikan backup jika terjadi error.
+
+Contoh:
+
+```typescript
+const onSubmit = async () => {
+    if (stockAdjustmentForm.hasErrors) {
+        const firstErrorKey = Object.keys(stockAdjustmentForm.errors)[0];
+        if (firstErrorKey) {
+            scrollToError(firstErrorKey);
+        }
+        return;
+    }
+
+    const originalInProducts = stockAdjustmentForm.in_products as StockAdjustmentInProductFormItem[];
+    const cleanedInProducts: StockAdjustmentInProductNestedUpdateRequest[] =
+        originalInProducts.map(({ product_unit_product_code, product_unit_product_name, product_unit_unit_name, product_unit_base_unit_name, product_unit_total_cogs, ...rest }) => rest);
+
+    const originalOutProducts = stockAdjustmentForm.out_products as StockAdjustmentOutProductFormItem[];
+    const cleanedOutProducts: StockAdjustmentOutProductNestedUpdateRequest[] =
+        originalOutProducts.map(({ product_unit_product_code, product_unit_product_name, product_unit_unit_name, product_unit_base_unit_name, ...rest }) => rest);
+
+    const backupInProducts = [...originalInProducts];
+    const backupOutProducts = [...originalOutProducts];
+
+    stockAdjustmentForm.in_products = cleanedInProducts as any;
+    stockAdjustmentForm.out_products = cleanedOutProducts as any;
+
+    try {
+        await stockAdjustmentForm.submit();
+    } catch (error) {
+        stockAdjustmentForm.in_products = backupInProducts as any;
+        stockAdjustmentForm.out_products = backupOutProducts as any;
+        console.error(error);
+    }
+};
+```
+
+## 8. Reset Form Strategy
+
+- Pada halaman Edit, `reset` berarti **reload data original dari server**, bukan mengosongkan field.
+- Selain reset data, juga reset error dan state tambahan (misalnya ekspansi remarks).
+
+Contoh:
+
+```typescript
+const resetForm = async () => {
+    stockAdjustmentForm.reset();
+    stockAdjustmentForm.setErrors({});
+    dateTimeDisplay.value = "";
+    inProductsRemarksExpanded.value = [];
+    outProductsRemarksExpanded.value = [];
+    await loadData();
+};
+```
+
+## 9. Dynamic Form Arrays (Master-Detail + Soft Delete)
+
+- Tambah item detail:
+  - Dorong item baru ke array.
+  - Bersihkan error yang berkaitan dengan prefix path array (misalnya `in_products.`).
+- Hapus item detail:
+  - Jika item punya `id`, dorong ke `delete_*_ids` di form untuk diproses backend.
+  - Splice array dan bersihkan error array terkait.
+
+Contoh tambah dan hapus in_product:
+
+```typescript
+const removeInProduct = (index: number) => {
+    const items = stockAdjustmentForm.in_products as StockAdjustmentInProductFormItem[];
+    const item = items[index];
+
+    if (item && item.id) {
+        stockAdjustmentForm.delete_in_product_ids.push(item.id);
+    }
+
+    items.splice(index, 1);
+    inProductsRemarksExpanded.value.splice(index, 1);
+
+    Object.keys(stockAdjustmentForm.errors).forEach((key) => {
+        if (key.startsWith("in_products.")) {
+            stockAdjustmentForm.forgetError(key as any);
+        }
+    });
+};
+```
+
+Pola serupa diterapkan untuk `out_products` dengan `delete_out_product_ids`.
+
+## 10. Helper UI Functions
+
+- `scrollToError` untuk scroll ke field yang pertama error.
+- `setCode` untuk toggle `_AUTO_` pada field `code`.
+- Menggunakan watcher untuk menghitung field turunan (misalnya total COGS).
+- Menggunakan `nextTick` untuk mengatur fokus setelah modal pemilihan item/produk ditutup.
+
+Contoh:
+
+```typescript
+const scrollToError = (id: string): void => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+};
+```
+
+Dengan mengikuti pola di atas, halaman `[Entity]Edit.vue` (contoh: `StockAdjustmentEdit.vue`) akan konsisten dengan kaidah yang sudah digunakan pada halaman Create, terutama untuk:
+
+- Struktur layout dan grouping card.
+- Penggunaan Precognition untuk validasi real-time.
+- Penanganan master–detail dengan soft delete.
+- Reset yang selalu mengembalikan data ke state server terbaru.
diff --git a/.trae/rules/12listvue.md b/.trae/rules/12listvue.md
new file mode 100644
index 000000000..6770b0b2a
--- /dev/null
+++ b/.trae/rules/12listvue.md
@@ -0,0 +1,282 @@
+---
+alwaysApply: false
+description: Standarisasi penulisan halaman List (EntityList.vue) di Frontend
+---
+# Standarisasi Halaman List (EntityList.vue)
+
+Dokumen ini menjelaskan standar penulisan halaman `[Entity]List.vue` di frontend (`web/src/pages/[entity]/[Entity]List.vue`). Halaman List berfungsi untuk menampilkan data dengan fitur pagination, pencarian, dan aksi CRUD dasar.
+
+## 1. Imports
+
+Hindari import library berat yang tidak perlu. Untuk list bergaya kartu/responsif gunakan `DataListFlex`. Untuk list tabular klasik tetap boleh memakai `DataList`.
+
+```typescript
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+import { DataListFlex } from "@/components/DataList";
+import Button from "@/components/Base/Button";
+import Lucide from "@/components/Base/Lucide";
+import { Dialog } from "@/components/Base/Headless";
+// ... Import Service & Types terkait
+```
+
+## 2. State Management (Refs)
+
+Gunakan struktur standar untuk menyimpan data list (Collection) dengan inisialisasi default yang aman (mencegah null reference di template).
+
+```typescript
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const { isUserLocationSelected } = storeToRefs(selectedUserLocationStore);
+
+const deleteUlid = ref<string>("");
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null); // State untuk fitur expand row
+
+// Inisialisasi struktur kosong untuk mencegah error 'undefined' saat loading awal
+const lists = ref<Collection<Array<Entity>> | null>({
+    data: [],
+    meta: {
+        current_page: 0,
+        from: null,
+        last_page: 0,
+        path: "",
+        per_page: 0,
+        to: null,
+        total: 0,
+    },
+    links: {
+        first: "",
+        last: "",
+        prev: null,
+        next: null,
+    },
+});
+```
+
+## 3. Lifecycle Hooks (onMounted)
+
+Pada `onMounted`, lakukan validasi lokasi (jika perlu) dan load data awal.
+
+```typescript
+onMounted(async () => {
+    emits("mode-state", ViewMode.LIST);
+
+    // Validasi User Location (Context)
+    if (!isUserLocationSelected.value) {
+        router.push({
+            name: "side-menu-error-code",
+            params: { code: ErrorCode.USERLOCATION_REQUIRED },
+        });
+        return;
+    }
+
+    await getData("", true, 1, 10);
+});
+```
+
+## 4. Data Loading Strategy
+
+Method `getData` (atau `getProducts`, `getUsers`, dsb) adalah inti dari halaman List.
+
+**PENTING: Error Handling Strategy & Parameter Ordering**
+1. Saat data berhasil dimuat (`result.success`), kita **WAJIB** membersihkan alert placeholder (`hidden`) untuk menghapus pesan error yang mungkin muncul dari kegagalan request sebelumnya.
+2. Parameter request harus diurutkan sesuai dengan definisi interface di TypeScript (misalnya `with_trashed` biasanya paling atas).
+3. Definisikan tipe return `result` secara eksplisit untuk type safety: `ServiceResponse<Collection<Array<Entity>> | null>`.
+
+```typescript
+const getData = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits("loading-state", true);
+
+    const requestParams: EntityReadAnyPaginateRequest = {
+        with_trashed: false, // Pastikan urutan sesuai definisi Interface!
+        company_id: selectedUserLocation.value.company.id,
+        search: search,
+        refresh: refresh,
+        page: page,
+        per_page: per_page,
+        // ... parameter lain
+    };
+
+    let result: ServiceResponse<Collection<Array<Entity>> | null> = 
+        await entityService.readAnyPaginate(requestParams);
+
+    if (result.success && result.data) {
+        lists.value = result.data;
+        // CLEANUP: Sembunyikan alert error lama jika request sukses
+        emits("show-alert-placeholder", {
+            alertType: "hidden",
+            title: "",
+            alertList: null,
+        });
+    } else {
+        // Tampilkan error jika request gagal
+        emits("show-alert-placeholder", {
+            alertType: "danger",
+            title: "",
+            alertList: result.errors,
+        });
+    }
+
+    emits("loading-state", false);
+};
+```
+
+## 5. Pagination & Search Handler
+
+Gunakan handler standar dari komponen `DataList`.
+
+```typescript
+const handleDataListChange = async (data: DataListEmittedData) => {
+    await getData(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+```
+
+## 6. Delete Strategy
+
+Operasi delete harus menggunakan konfirmasi modal dan refresh data setelah sukses. Perhatikan detail berikut:
+1. Panggil `emits("update-profile")` jika delete berhasil (untuk update state global jika perlu).
+2. Refresh data list (`await getData(...)`).
+3. Tampilkan notifikasi sukses.
+4. Jangan panggil `showAlertPlaceholder` tipe 'hidden' saat sukses (tidak perlu).
+5. Casting `result.errors` ke `Record<string, Array<string>>` saat menampilkan error.
+6. Definisikan tipe return `result` secara eksplisit: `ServiceResponse<boolean | null>`.
+
+```typescript
+const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits("loading-state", true);
+
+    const result: ServiceResponse<boolean | null> = await entityService.delete(
+        deleteUlid.value
+    );
+
+    if (result.success) {
+        emits("update-profile"); // PENTING: Update global state
+        await getData("", true, 1, 10);
+        
+        emits("show-notification", {
+            title: t("views.entity.alert.delete.title"),
+            content: t("views.entity.alert.delete.message"),
+        });
+    } else {
+        emits("show-alert-placeholder", {
+            alertType: "danger",
+            title: "",
+            alertList: result.errors as Record<string, Array<string>>, // Type Assertion
+        });
+    }
+
+    emits("loading-state", false);
+};
+```
+
+## 7. View Detail Strategy (Expandable Row)
+
+Untuk menampilkan detail data dalam baris yang bisa di-expand (toggle):
+1. Gunakan state `expandDetail` (number | null) untuk menyimpan index baris yang sedang terbuka.
+2. Buat method `viewSelected` untuk handle logic toggle.
+
+```typescript
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+```
+
+## 8. Edit Navigation
+
+Saat user mengklik tombol Edit, gunakan `router.push` untuk navigasi ke halaman form edit, bukan menggunakan event emit. 
+
+**PENTING**: 
+- Pastikan nama route (`name`) sama persis dengan yang terdaftar di `web/src/router/routes.ts`.
+- Jangan menebak nama module (misal: jangan pakai `purchase` jika route sebenarnya ada di bawah group `supplier` -> `side-menu-supplier-supplier-edit`).
+
+```typescript
+const editSelected = (idx: number) => {
+    if (!lists.value) return;
+    const ulid = lists.value.data[idx].ulid;
+    router.push({ 
+        name: "side-menu-[module]-[entity]-edit", 
+        params: { ulid: ulid } 
+    });
+};
+```
+
+## 9. Template Structure (DataListFlex)
+
+Gunakan komponen `DataListFlex` sebagai wrapper utama untuk list produk dan list stock adjustment karena lebih konsisten di desktop/mobile.
+
+**Aturan Penting untuk pola Stock Adjustment Product List**:
+- Layout row wajib memakai grid `12 columns` dengan pemisahan blok: image, stock adjustment, product, product unit/serial, action.
+- Setiap blok informasi memakai judul section uppercase (`text-primary text-xs font-semibold uppercase tracking-wide`).
+- Detail value memakai `text-slate-500 text-xs`, dan field yang panjang (misal serial) wajib `break-all`.
+- Aksi delete berada di kolom paling kanan (`lg:col-span-1`) dengan tombol outline-secondary + icon trash.
+
+```html
+<DataListFlex
+    :data="lists"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :rows="lists?.data ?? []"
+    row-class="bg-white dark:bg-darkmode-600"
+    :pagination="lists ? lists.meta : null"
+    @dataListChanged="handleDataListChange"
+>
+    <template #row="{ item, index }">
+        <div class="col-span-12 lg:col-span-1 md:col-span-12 flex items-center justify-center md:justify-start">
+            <!-- image -->
+        </div>
+        <div class="col-span-12 lg:col-span-4 md:col-span-5 self-start">
+            <!-- stock adjustment info -->
+        </div>
+        <div class="col-span-12 lg:col-span-3 md:col-span-4 self-start">
+            <!-- product info -->
+        </div>
+        <div class="col-span-12 lg:col-span-3 md:col-span-3 self-start">
+            <!-- product unit / serial info -->
+        </div>
+        <div class="col-span-12 lg:col-span-1 md:col-span-12 flex justify-end items-center gap-2">
+            <Button size="sm" variant="outline-secondary" @click="deleteSelected(index)">
+                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+        </div>
+    </template>
+</DataListFlex>
+```
+
+## 10. Standard Translation Keys
+
+Pastikan file translation (`web/src/lang/[lang]/views/[entity].json`) memiliki key standar berikut agar konsisten dengan komponen:
+
+```json
+{
+    "page_title": "Entity Name",
+    "table": {
+        "title": "Entity List",
+        "cols": {
+            "code": "Code",
+            "name": "Name",
+            "status": "Status"
+            // ... column lain
+        }
+    },
+    "alert": {
+        "delete": {
+            "title": "Delete Entity",
+            "message": "Entity Successfully Deleted"
+        }
+    }
+}
+```
+
+Juga gunakan translation global untuk komponen umum:
+- `t("components.data-list.data_not_found")`
+- `t("components.delete-modal.title")`
+- `t("components.buttons.delete")`
+- `t("components.dropdown.values.statusDDL.active")`
diff --git a/.trae/rules/13indexvue.md b/.trae/rules/13indexvue.md
new file mode 100644
index 000000000..18b038431
--- /dev/null
+++ b/.trae/rules/13indexvue.md
@@ -0,0 +1,211 @@
+---
+alwaysApply: false
+description: Standarisasi penulisan halaman Index/Wrapper (EntityIndex.vue) di Frontend
+---
+# Standarisasi Halaman Index (EntityIndex.vue)
+
+Dokumen ini menjelaskan standar penulisan halaman `[Entity]Index.vue` di frontend (`web/src/pages/[entity]/[Entity]Index.vue`). Halaman Index berfungsi sebagai **Wrapper** atau **Parent Layout** yang membungkus navigasi antara List, Create, dan Edit menggunakan `RouterView`.
+
+Halaman ini menangani:
+1.  Global Alert Placeholder
+2.  Notification Toast
+3.  Loading Overlay
+4.  Cache Clearing Strategy (saat navigasi)
+5.  Integrasi i18n untuk judul halaman (`views.[entity].*`)
+
+## 1. Imports
+
+Gunakan komponen layout standar dan store yang diperlukan.
+
+```typescript
+import { ref, provide } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { ViewMode } from "@/types/enums/ViewMode";
+import CacheService from "@/services/CacheService";
+import { useUserContextStore } from "@/stores/user-context";
+import { TitleLayout } from "@/components/Base/Form/FormLayout";
+import LoadingOverlay from "@/components/LoadingOverlay";
+import Button from "@/components/Base/Button";
+import Lucide from "@/components/Base/Lucide";
+import Notification from "@/components/Base/Notification/Notification.vue";
+import AlertPlaceholder from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
+// ... Imports Type & Service Lainnya
+```
+
+## 2. State Management (Refs)
+
+Definisikan state untuk mengontrol UI global seperti loading, alert, dan notifikasi.
+
+```typescript
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.entity.page_title'); // Default title key
+
+// Alert State
+const alertType = ref<'danger'|'success'|'warning'|'pending'|'dark'|'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+// Notification State
+const entityNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+```
+
+## 3. Navigation Methods (Cache & Alert Clearing)
+
+Saat berpindah halaman (terutama "Back to List"), sangat PENTING untuk:
+1.  **Reset Alert Placeholder**: Agar pesan error dari form tidak terbawa ke List.
+2.  **Clear Cache**: Menghapus draft form (Create/Edit) agar saat user kembali nanti, form dalam keadaan bersih (kecuali memang fitur draft diinginkan persisten).
+
+```typescript
+const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'entity-create-route' });
+};
+
+const backToList = async () => {
+    resetAlertPlaceholder(); // 1. Bersihkan Alert
+    clearCache(mode.value);  // 2. Bersihkan Cache Form
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'entity-list-route' });
+};
+
+const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+        case ViewMode.FORM_CREATE:
+            cacheService.removeLastEntity('ENTITY_CREATE');
+            break;
+        case ViewMode.FORM_EDIT:
+            cacheService.removeLastEntity('ENTITY_EDIT');
+            break;
+        default:
+            break;
+    }
+};
+
+const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+};
+```
+
+## 4. Event Handlers
+
+Handler untuk event yang di-emit oleh child components (List/Create/Edit).
+
+```typescript
+const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+    // Update Title based on Mode
+    switch (state) {
+        case ViewMode.FORM_CREATE:
+            titleView.value = 'views.entity.actions.create';
+            break;
+        case ViewMode.FORM_EDIT:
+            titleView.value = 'views.entity.actions.edit';
+            break;
+        default:
+            titleView.value = 'views.entity.page_title';
+            break;
+    }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (entityNotification.value)
+        entityNotification.value.showToast();
+};
+```
+
+## 5. Template Structure
+
+Gunakan `LoadingOverlay` sebagai root wrapper, diikuti `TitleLayout` untuk header, dan `RouterView` untuk konten dinamis.
+
+```html
+<template>
+    <div class="mt-8">
+        <LoadingOverlay :visible="loading">
+            <TitleLayout>
+                <template #title>
+                    {{ t(titleView) }}
+                </template>
+                <template #optional>
+                    <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+                        <!-- Create Button (List Mode) -->
+                        <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md"
+                            @click="createNew">
+                            <Lucide icon="Plus" class="w-4 h-4" />&nbsp;{{ t("components.buttons.create_new") }}
+                        </Button>
+                        
+                        <!-- Back Button (Form Mode) -->
+                        <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+                            <Lucide icon="ArrowLeft" class="w-4 h-4" />&nbsp;{{ t("components.buttons.back") }}
+                        </Button>
+                    </div>
+                </template>
+            </TitleLayout>
+
+            <!-- Global Alert Placeholder -->
+            <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+            
+            <!-- Dynamic Content (List/Create/Edit) -->
+            <RouterView 
+                @loading-state="onLoadingStateChanged" 
+                @mode-state="onModeStateChanged" 
+                @update-profile="onUpdateProfileTriggered" 
+                @show-alertplaceholder="onAlertPlaceholderTriggered" 
+                @show-notification="onShowNotificationTriggered" 
+            />
+        </LoadingOverlay>
+
+        <!-- Global Notification Toast -->
+        <Notification ref-key="entityNotification" :options="{ duration: 3000, }" class="flex">
+            <Lucide icon="CheckCircle" class="text-success" />
+            <div class="ml-4 mr-4">
+                <div class="font-medium">{{ notificationTitle }}</div>
+                <div class="mt-1 text-slate-500">
+                    {{ notificationContent }}
+                </div>
+            </div>
+        </Notification>
+    </div>
+</template>
+```
+
+## 6. Catatan i18n untuk Entity & Detail (contoh: Stock Adjustment)
+
+- Setiap entity yang punya halaman Index wajib memiliki file terjemahan view:
+  - `web/src/lang/en/views/[entity].json`
+  - `web/src/lang/id/views/[entity].json`
+- File `messages.en.ts` dan `messages.id.ts` **wajib**:
+  - `import [entity] from "./en/views/[entity].json";` (atau `./id/views/...`)
+  - Mendaftarkan ke dalam `views` dengan key: `"entity": entity`
+- Untuk entity yang punya detail terpisah (misal modul Stock Adjustment):
+  - Gunakan key tambahan:
+    - `stock_adjustment_in_product`
+    - `stock_adjustment_out_product`
+  - Sediakan pasangan file:
+    - `web/src/lang/en/views/stock_adjustment_in_product.json`
+    - `web/src/lang/en/views/stock_adjustment_out_product.json`
+    - `web/src/lang/id/views/stock_adjustment_in_product.json`
+    - `web/src/lang/id/views/stock_adjustment_out_product.json`
+  - Daftarkan di `messages.*.ts`:
+    - `"stock_adjustment`: stock_adjustment`
+    - `"stock_adjustment_in_product": stock_adjustment_in_product`
+    - `"stock_adjustment_out_product": stock_adjustment_out_product`
diff --git a/.trae/rules/14testexecution.md b/.trae/rules/14testexecution.md
new file mode 100644
index 000000000..08a509f36
--- /dev/null
+++ b/.trae/rules/14testexecution.md
@@ -0,0 +1,7 @@
+---
+alwaysApply: true
+---
+# Aturan Eksekusi Test oleh Agent
+
+- Agent tidak boleh menjalankan test apa pun tanpa permintaan eksplisit dari user.
+- Menjalankan test hanya diperbolehkan setelah user secara langsung meminta eksekusi test.
diff --git a/.trae/rules/15formrequest.md b/.trae/rules/15formrequest.md
new file mode 100644
index 000000000..0fbff788b
--- /dev/null
+++ b/.trae/rules/15formrequest.md
@@ -0,0 +1,101 @@
+---
+alwaysApply: false
+description: Standarisasi Laravel FormRequest backend
+---
+# Laravel FormRequest Standard
+
+## Authorize Method
+
+### Rule
+Method `authorize()` pada Laravel FormRequest backend WAJIB ditulis eksplisit, tidak dalam bentuk one-liner.
+
+Gunakan pola berikut:
+- cek autentikasi lebih dulu dengan `Auth::check()`
+- ambil user dari `Auth::user()`
+- untuk `StoreRequest`, gunakan policy check ke `Model::class`
+- untuk `UpdateRequest`, ambil model dari route binding lalu cek policy terhadap instance tersebut
+
+Hindari menulis `authorize()` dalam bentuk singkat seperti `return auth()->check() && ...` karena kurang konsisten dengan pola project dan lebih sulit direview saat butuh menambah logika.
+
+### Why
+- Konsisten dengan mayoritas FormRequest backend di project
+- Lebih mudah dibaca dan diperluas saat ada kebutuhan tambahan
+- Membuat pemisahan jelas antara pengecekan login, pengambilan resource route, dan policy check
+
+### Example (StoreRequest)
+```php
+public function authorize()
+{
+    if (! Auth::check()) {
+        return false;
+    }
+
+    /** @var \App\User */
+    $user = Auth::user();
+
+    return $user->can('create', CapitalOpening::class);
+}
+```
+
+### Example (UpdateRequest)
+```php
+public function authorize()
+{
+    if (! Auth::check()) {
+        return false;
+    }
+
+    /** @var \App\User */
+    $user = Auth::user();
+    $capitalOpening = $this->route('capital_opening');
+
+    return $user->can('update', $capitalOpening);
+}
+```
+
+## Prepare For Validation
+
+### Rule
+Method `prepareForValidation()` pada Laravel FormRequest backend hanya boleh dipakai untuk normalisasi input yang memang perlu dilakukan sebelum validasi, terutama:
+- decode Hashids ke integer ID
+- trimming atau normalisasi format sederhana yang memang dibutuhkan validator
+
+`prepareForValidation()` TIDAK BOLEH dipakai untuk mengurus field nullable biasa yang bukan bagian dari decoding atau normalisasi inti, misalnya memaksa `remarks`, `notes`, `description`, dan field teks sejenis menjadi `null`.
+
+Jika sebuah field memang opsional namun tetap wajib hadir di payload, gunakan rule `present` + `nullable` di `rules()`, dan biarkan validator menangani nilainya apa adanya.
+
+### Why
+- Tanggung jawab `prepareForValidation()` tetap sempit dan jelas: normalisasi sebelum validasi
+- Mencegah side effect tersembunyi yang mengubah payload di luar kebutuhan validasi inti
+- Membuat kontrak request lebih konsisten: field nullable dikontrol lewat `rules()`, bukan lewat mutasi tambahan
+
+### Example (Correct)
+```php
+public function rules(): array
+{
+    return [
+        'company_id' => ['required', 'integer', 'bail', new IsValidCompany],
+        'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+        'remarks' => ['present', 'nullable', 'string', 'max:255'],
+    ];
+}
+
+public function prepareForValidation()
+{
+    $this->merge([
+        'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+    ]);
+}
+```
+
+### Example (Incorrect)
+```php
+public function prepareForValidation()
+{
+    $this->merge([
+        'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        'remarks' => $this->filled('remarks') ? $this->remarks : null,
+    ]);
+}
+```
diff --git a/.trae/rules/16apiroutes.md b/.trae/rules/16apiroutes.md
new file mode 100644
index 000000000..b48c7af8d
--- /dev/null
+++ b/.trae/rules/16apiroutes.md
@@ -0,0 +1,57 @@
+---
+alwaysApply: false
+description: Standarisasi penulisan routes/api.php backend
+---
+# Laravel API Route Standard
+
+## Route Group Format
+
+### Rule
+Untuk penambahan endpoint baru di `api/routes/api.php`, gunakan format route modular per resource seperti berikut, bukan format nested legacy `get/post` yang dibungkus grup besar berdasarkan domain.
+
+Format yang WAJIB dipakai:
+- `Route::prefix('{resource}')`
+- `->middleware('auth:sanctum')`
+- subgroup GET dengan `throttle:100,1` dan name prefix `api.get.{resource}.`
+- subgroup POST dengan `throttle:50,1` + `precognitive` dan name prefix `api.post.{resource}.`
+
+Struktur endpoint di dalamnya:
+- `GET read`
+- `GET read/{resource:ulid}`
+- `POST save`
+- `POST edit/{resource:ulid}`
+- `POST delete/{resource:ulid}`
+
+### Why
+- Lebih ringkas dan mudah dibaca dibanding nested group legacy
+- Konsisten per resource sehingga lebih mudah dicari di `routes/api.php`
+- Name route dan middleware menjadi seragam untuk semua modul baru
+- Memisahkan jelas endpoint GET dan POST tanpa bergantung pada wrapper domain besar
+
+### Example (Correct)
+```php
+Route::prefix('capital_opening')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.capital_opening.')->group(function () {
+        Route::get('read', [CapitalOpeningController::class, 'readAny'])->name('read_any');
+        Route::get('read/{capital_opening:ulid}', [CapitalOpeningController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.capital_opening.')->group(function () {
+        Route::post('save', [CapitalOpeningController::class, 'store'])->name('save');
+        Route::post('edit/{capital_opening:ulid}', [CapitalOpeningController::class, 'update'])->name('edit');
+        Route::post('delete/{capital_opening:ulid}', [CapitalOpeningController::class, 'delete'])->name('delete');
+    });
+});
+```
+
+### Example (Avoid for New Modules)
+```php
+Route::group(['prefix' => 'get', 'middleware' => ['auth:sanctum', 'throttle:100,1'], 'as' => 'api.get'], function () {
+    Route::group(['prefix' => 'capital', 'as' => '.capital'], function () {
+        Route::group(['prefix' => 'capital_opening', 'as' => '.capital_opening'], function () {
+            Route::get('read', [CapitalOpeningController::class, 'readAny'])->name('.read_any');
+            Route::get('read/{capital_opening:ulid}', [CapitalOpeningController::class, 'read'])->name('.read');
+        });
+    });
+});
+```
diff --git a/.trae/rules/17consistency.md b/.trae/rules/17consistency.md
new file mode 100644
index 000000000..8408494cd
--- /dev/null
+++ b/.trae/rules/17consistency.md
@@ -0,0 +1,81 @@
+---
+alwaysApply: false
+description: Tekankan konsistensi implementasi dan larang improvisasi struktur ketika pola proyek sudah ada
+---
+# Aturan Konsistensi Implementasi
+
+Aturan ini dibuat untuk memastikan agent tidak membuat keputusan sepihak yang menghasilkan implementasi inkonsisten dengan pola arsitektur proyek.
+
+## 1. Prinsip Utama
+- Konsistensi lebih penting daripada solusi cepat yang bersifat ad-hoc.
+- Jika proyek sudah memiliki pola yang jelas, agent wajib mengikuti pola itu.
+- Agent dilarang membuat struktur manual satu kali pakai hanya untuk menyelesaikan kebutuhan sesaat.
+
+## 2. Larangan Improvisasi Sepihak
+- Jangan membuat keputusan desain sendiri jika kebutuhan tersebut sebenarnya sudah memiliki pola umum di codebase.
+- Jangan membuat representasi data manual di dalam resource, service, action, atau layer lain hanya karena class pendukungnya belum tersedia.
+- Jika ada kebutuhan relasi atau nested object yang secara arsitektur seharusnya memiliki class tersendiri, maka agent wajib membuat class tersebut terlebih dahulu lalu menggunakannya secara konsisten.
+
+## 3. Aturan Khusus Untuk Resource
+- Jangan otomatis mengekspos semua relasi yang tersedia di model.
+- Hanya tampilkan relasi di API Resource jika memang ada kebutuhan UI, kontrak API, atau pola existing yang mendukungnya.
+- Relasi internal, relasi teknis, atau relasi sinkronisasi sistem tidak boleh ikut ditampilkan hanya karena relasinya ada.
+- Jika sebuah model/relasi perlu ditampilkan di response API, utamakan penggunaan Resource class dedicated.
+- Jika Resource untuk model tersebut belum ada, buat Resource baru terlebih dahulu.
+- Jangan membuat array manual inline di dalam Resource induk untuk menggantikan Resource class yang seharusnya ada.
+- Semua relasi tetap harus mengikuti pola `whenLoaded`, `mergeWhen`, dan Resource dedicated agar konsisten dengan seluruh API project.
+
+## 3.1 Aturan Khusus Untuk Relasi Internal
+- Relasi seperti transaction log, stock transaction, cash transaction, audit trail, atau relasi turunan sinkronisasi tidak boleh dianggap perlu tampil secara default.
+- Sebelum mengekspos relasi seperti ini, agent wajib membandingkan dengan pola resource modul lain di folder `api/app/Http/Resources`.
+- Jika modul-modul serupa tidak menampilkan relasi internal tersebut, maka agent harus mengikuti pola itu dan tidak menampilkannya.
+- Adanya relation method di model bukan alasan untuk otomatis menambahkannya ke output Resource.
+
+## 4. Contoh Kasus Yang Dianggap Salah
+- Salah:
+```php
+$this->mergeWhen($this->relationLoaded('cashTransaction'), [
+    'cash_transaction' => $this->when($this->cashTransaction, fn () => [
+        'id' => Hashids::encode($this->cashTransaction?->id),
+        'date' => $this->cashTransaction?->date,
+        'amount' => $this->cashTransaction?->amount,
+    ]),
+]),
+```
+
+- Alasan salah:
+  - Membuat struktur response manual inline.
+  - Tidak konsisten dengan pola Resource project.
+  - Menambah special-case yang akan menyulitkan maintenance.
+
+## 5. Bentuk Keputusan Yang Wajib Diambil Agent
+- Saat menemukan relasi baru, jangan langsung menganggap relasi itu harus diekspos di response.
+- Cek dulu apakah relasi itu memang bagian dari kebutuhan output atau hanya detail internal backend.
+- Saat menemukan relasi baru yang perlu diekspos, cek dulu apakah Resource dedicated sudah ada.
+- Jika belum ada, buat Resource dedicated yang sesuai.
+- Setelah itu, gunakan Resource tersebut di parent Resource.
+- Jangan memilih shortcut manual hanya karena terlihat lebih cepat.
+
+## 6. Urutan Berpikir Yang Wajib
+1. Cari pola existing di codebase.
+2. Tentukan dulu apakah data itu memang perlu diekspos ke API.
+3. Cari class pendukung yang seharusnya dipakai.
+4. Jika belum ada, buat class pendukung sesuai pola proyek.
+5. Baru integrasikan ke file utama.
+
+## 7. Aturan Urutan Field
+- Untuk tampilan field di UI, payload request, resource, DTO, form, dan detail card, urutan field wajib mengikuti urutan field bisnis pada migration tabel yang menjadi sumber data.
+- Jika hanya sebagian field yang ditampilkan, pertahankan urutan relatifnya sesuai migration. Jangan menyusun ulang hanya karena terasa lebih enak dilihat.
+- Contoh: jika migration berurutan `company_id`, `branch_id`, `code`, `name`, `is_bank`, maka saat menampilkan subset field, urutan yang benar adalah `branch`, lalu `code`, lalu `name`, lalu `is_bank`.
+- Pengecualian hanya boleh dilakukan jika user secara eksplisit meminta urutan berbeda.
+- Agent dilarang mengutamakan preferensi pribadi dalam penyusunan urutan field.
+
+## 8. Prinsip Review Diri
+- Sebelum finalizing perubahan, agent wajib memeriksa:
+  - apakah field atau relasi ini benar-benar perlu tampil di response,
+  - apakah implementasi ini konsisten dengan pola modul lain,
+  - apakah ada class dedicated yang seharusnya dibuat,
+  - apakah ada shortcut manual yang mestinya dihindari,
+  - apakah urutan field sudah mengikuti migration kecuali user meminta sebaliknya.
+
+Jika jawaban terhadap salah satu poin di atas adalah ya, maka implementasi harus diperbaiki sebelum diserahkan.
diff --git a/.trae/rules/18internaltoolusage.md b/.trae/rules/18internaltoolusage.md
new file mode 100644
index 000000000..1e8381688
--- /dev/null
+++ b/.trae/rules/18internaltoolusage.md
@@ -0,0 +1,11 @@
+---
+alwaysApply: true
+description: Utamakan hasil akurat dengan tool internal Trae; jangan buat file/script sementara untuk search, scan, atau replace.
+---
+# Aturan Penggunaan Tool Internal Trae
+
+- Fokus utama: hasil akurat dan minim salah konteks.
+- Gunakan tool internal Trae untuk search, glob, grep, read, dan patch/edit.
+- Jangan buat file/script sementara seperti `check.php`, `scan.py`, `replace.php`, `tmp.js`, atau `temp.txt` hanya untuk mencari, memindai, menghitung pola, cek urutan method, atau replace.
+- Jangan buat script sementara untuk mengatasi quoting command.
+- File baru hanya boleh dibuat jika memang bagian dari source code proyek atau diminta eksplisit oleh user.
diff --git a/.trae/rules/19developmentstatus.md b/.trae/rules/19developmentstatus.md
new file mode 100644
index 000000000..cbf47a4db
--- /dev/null
+++ b/.trae/rules/19developmentstatus.md
@@ -0,0 +1,18 @@
+---
+alwaysApply: true
+description: Proyek masih tahap development; utamakan kontrak yang benar dan implementasi yang sederhana tanpa overthinking kompatibilitas sementara
+---
+# Aturan Status Development Project
+
+Project ini masih tahap development aktif.
+
+## Rule
+- Utamakan kontrak data dan implementasi yang benar.
+- Frontend dan backend harus mengikuti kontrak yang sama jika user sudah memutuskan formatnya.
+- Jangan membuat compatibility layer, normalisasi tersembunyi, atau patch transisi kecuali diminta user.
+- Jika ada inkonsistensi lama di seed, default data, atau config development, luruskan sumbernya.
+- Perapihan kontrak data, preview hitung, dan struktur UI boleh dilakukan selama tetap konsisten dengan pola proyek.
+
+## Guidance
+- `vat_rate` mengikuti satu format yang sama di semua layer.
+- Jika seed lama salah, perbaiki seed, bukan tambal di banyak tempat.
diff --git a/.trae/rules/20dialogfirst.md b/.trae/rules/20dialogfirst.md
new file mode 100644
index 000000000..8b6617ebc
--- /dev/null
+++ b/.trae/rules/20dialogfirst.md
@@ -0,0 +1,11 @@
+---
+alwaysApply: true
+description: Utamakan dialog interaktif dengan user melalui pertanyaan singkat sebelum dan selama implementasi.
+---
+# Aturan Dialog Interaktif
+
+- Agent wajib menjawab pertanyaan user secara interaktif: jawab inti pertanyaan dengan singkat dan jelas, lalu lanjutkan dengan satu pertanyaan kecil paling relevan jika masih ada keputusan yang perlu dikunci.
+- Untuk topik yang punya banyak kemungkinan arah, agent harus memecah diskusi menjadi langkah-langkah kecil, bukan memberi jawaban panjang yang menutup semua cabang sekaligus.
+- Jika ada beberapa opsi yang masuk akal, tampilkan opsi yang direkomendasikan lebih dulu agar user mudah memilih.
+- Jika user secara eksplisit meminta pola interaktif, agent harus mempertahankannya secara konsisten sampai user menghentikannya atau konteks sudah final.
+- Jika instruksi user sudah sangat jelas dan tidak ada ambiguitas berarti, agent tidak wajib menambah pertanyaan.
diff --git a/api/app/Actions/Asset/AssetActions.php b/api/app/Actions/Asset/AssetActions.php
new file mode 100644
index 000000000..3972bc297
--- /dev/null
+++ b/api/app/Actions/Asset/AssetActions.php
@@ -0,0 +1,277 @@
+<?php
+
+namespace App\Actions\Asset;
+
+use App\DTOs\AssetCreateDTO;
+use App\DTOs\AssetUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\Asset;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'assetCategory',
+        'assetUnit',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+        ?int $assetCategoryId,
+        ?int $assetUnitId,
+        ?int $status,
+        ?int $includeId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = Asset::query()
+            ->select('assets.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->withTrashed();
+
+        $query->join('asset_categories', 'assets.asset_category_id', '=', 'asset_categories.id');
+        $query->join('asset_units', 'assets.asset_unit_id', '=', 'asset_units.id');
+        $query->whereCompanyId('assets', $companyId);
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetCategoryId,
+            $assetUnitId,
+            $status,
+            $includeId
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $assetCategoryId,
+                $assetUnitId,
+                $status
+            ) {
+                $query->withoutTrashed();
+
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('assets.code', 'like', '%'.$search.'%')
+                            ->orWhere('assets.name', 'like', '%'.$search.'%')
+                            ->orWhere('assets.remarks', 'like', '%'.$search.'%')
+                            ->orWhere('asset_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('asset_categories.name', 'like', '%'.$search.'%')
+                            ->orWhere('asset_units.code', 'like', '%'.$search.'%')
+                            ->orWhere('asset_units.name', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if ($assetCategoryId) {
+                    $query->where('assets.asset_category_id', $assetCategoryId);
+                }
+
+                if ($assetUnitId) {
+                    $query->where('assets.asset_unit_id', $assetUnitId);
+                }
+
+                if (! is_null($status)) {
+                    $query->where('assets.status', $status);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('assets.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(assets.id, '.$includeId.') desc');
+        }
+
+        $query->orderBy('asset_categories.name', 'asc');
+        $query->orderBy('asset_units.name', 'asc');
+        $query->orderBy('assets.status', 'desc');
+        $query->orderBy('assets.name', 'asc');
+
+        if ($execute) {
+            $timerStart = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $assetCategoryId ?? '[null]',
+                    $assetUnitId ?? '[null]',
+                    $status ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page,
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $executionTime = microtime(true) - $timerStart;
+                $this->loggerPerformance(__METHOD__, $executionTime, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Asset $asset): Asset
+    {
+        return $asset->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetCreateDTO $data): Asset
+    {
+        $timerStart = microtime(true);
+
+        try {
+            $asset = new Asset();
+            $asset->company_id = $data->companyId;
+            $asset->asset_category_id = $data->assetCategoryId;
+            $asset->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $asset->name = $data->name;
+            $asset->asset_unit_id = $data->assetUnitId;
+            $asset->status = $data->status;
+            $asset->remarks = $data->remarks;
+            $asset->save();
+
+            $this->flushCache();
+
+            return $asset;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function update(Asset $asset, AssetUpdateDTO $data): bool
+    {
+        $timerStart = microtime(true);
+
+        try {
+            $asset->asset_category_id = $data->assetCategoryId;
+            $asset->code = $this->generateUniqueCode($asset->company_id, $data->code, $asset->id);
+            $asset->name = $data->name;
+            $asset->asset_unit_id = $data->assetUnitId;
+            $asset->status = $data->status;
+            $asset->remarks = $data->remarks;
+            $result = $asset->save();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function delete(Asset $asset): bool
+    {
+        $timerStart = microtime(true);
+
+        try {
+            $result = $asset->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $excludeId): bool
+    {
+        return ! Asset::query()
+            ->where('company_id', $companyId)
+            ->whereRaw('LOWER(code) = ?', [strtolower($code)])
+            ->when($excludeId, fn ($query) => $query->where('id', '!=', $excludeId))
+            ->exists();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $excludeId): bool
+    {
+        return ! Asset::query()
+            ->where('company_id', $companyId)
+            ->whereRaw('LOWER(name) = ?', [strtolower($name)])
+            ->when($excludeId, fn ($query) => $query->where('id', '!=', $excludeId))
+            ->exists();
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $tryCount = 0;
+        do {
+            $count = Asset::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'AST'.str_pad((string) $count, 4, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+}
diff --git a/api/app/Actions/AssetAdjustment/AssetAdjustmentActions.php b/api/app/Actions/AssetAdjustment/AssetAdjustmentActions.php
new file mode 100644
index 000000000..42300970a
--- /dev/null
+++ b/api/app/Actions/AssetAdjustment/AssetAdjustmentActions.php
@@ -0,0 +1,342 @@
+<?php
+
+namespace App\Actions\AssetAdjustment;
+
+use App\Actions\AssetAdjustmentInItem\AssetAdjustmentInItemActions;
+use App\Actions\AssetAdjustmentOutItem\AssetAdjustmentOutItemActions;
+use App\DTOs\AssetAdjustmentCreateDTO;
+use App\DTOs\AssetAdjustmentInItemCreateDTO;
+use App\DTOs\AssetAdjustmentInItemUpdateDTO;
+use App\DTOs\AssetAdjustmentOutItemCreateDTO;
+use App\DTOs\AssetAdjustmentOutItemUpdateDTO;
+use App\DTOs\AssetAdjustmentUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\AssetAdjustment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Illuminate\Support\Facades\Config;
+
+class AssetAdjustmentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'inItems.asset.assetCategory',
+        'inItems.asset.assetUnit',
+        'inItems.serials',
+        'outItems.asset.assetCategory',
+        'outItems.asset.assetUnit',
+        'outItems.serials',
+    ];
+
+    public function __construct(
+        private readonly AssetAdjustmentInItemActions $assetAdjustmentInItemActions,
+        private readonly AssetAdjustmentOutItemActions $assetAdjustmentOutItemActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $startDate,
+        ?string $endDate,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetAdjustment::select('asset_adjustments.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->join('companies', 'companies.id', '=', 'asset_adjustments.company_id')
+            ->whereCompanyId('asset_adjustments', $companyId)
+            ->whereBranchId('asset_adjustments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $startDate, $endDate) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('code', 'like', '%'.$search.'%')
+                        ->orWhere('remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('asset_adjustments.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('asset_adjustments.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+        });
+
+        $query->orderBy('asset_adjustments.date', 'desc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $cacheParams = [
+            $withTrashed ? 'true' : 'false',
+            $companyId,
+            $branchId ?? '[null]',
+            empty($search) ? '[empty]' : $search,
+            $startDate ?? '[null]',
+            $endDate ?? '[null]',
+            $execute->pagination ? 'true' : 'false',
+            $execute->pagination?->page ?? '[null]',
+            $execute->pagination?->perPage ?? '[null]',
+            $execute->get?->limit ?? '[null]',
+        ];
+
+        $cacheKey = 'read_any_asset_adjustment_'.implode('_', $cacheParams);
+
+        if ($execute->useCache) {
+            $cacheResult = $this->readFromCache($cacheKey);
+            if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                return $cacheResult;
+            }
+        }
+
+        $result = $execute->pagination
+            ? $query->paginate(
+                perPage: $execute->pagination->perPage,
+                columns: ['*'],
+                pageName: 'page',
+                page: $execute->pagination->page,
+            )
+            : ($execute->get?->limit ? $query->limit($execute->get->limit)->get() : $query->get());
+
+        if ($execute->useCache) {
+            $this->saveToCache($cacheKey, $result);
+        }
+
+        return $result;
+    }
+
+    public function read(AssetAdjustment $assetAdjustment): AssetAdjustment
+    {
+        return $assetAdjustment->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function create(AssetAdjustmentCreateDTO $data): AssetAdjustment
+    {
+        $assetAdjustment = new AssetAdjustment();
+        $assetAdjustment->company_id = $data->companyId;
+        $assetAdjustment->branch_id = $data->branchId;
+        $assetAdjustment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+        $assetAdjustment->date = $this->generateDate($data->date);
+        $assetAdjustment->remarks = $data->remarks;
+        $assetAdjustment->is_posted = $data->isPosted;
+        $assetAdjustment->save();
+
+        $this->saveInItems($assetAdjustment, $data->inItems);
+        $this->saveOutItems($assetAdjustment, $data->outItems);
+
+        $this->refreshTotals($assetAdjustment);
+        $this->flushCache();
+
+        return $assetAdjustment;
+    }
+
+    public function update(AssetAdjustment $assetAdjustment, AssetAdjustmentUpdateDTO $data): AssetAdjustment
+    {
+        $assetAdjustment->company_id = $data->companyId;
+        $assetAdjustment->branch_id = $data->branchId;
+        $assetAdjustment->code = $this->generateUniqueCode($data->companyId, $data->code, $assetAdjustment->id);
+        $assetAdjustment->date = $this->generateDate($data->date);
+        $assetAdjustment->remarks = $data->remarks;
+        $assetAdjustment->is_posted = $data->isPosted;
+        $assetAdjustment->save();
+
+        $this->updateInItems($assetAdjustment, $data->deleteInItemIds, $data->inItems);
+        $this->updateOutItems($assetAdjustment, $data->deleteOutItemIds, $data->outItems);
+
+        $this->refreshTotals($assetAdjustment);
+        $this->flushCache();
+
+        return $assetAdjustment->refresh();
+    }
+
+    public function delete(AssetAdjustment $assetAdjustment): bool
+    {
+        foreach ($assetAdjustment->inItems as $inItem) {
+            $this->assetAdjustmentInItemActions->delete($inItem);
+        }
+
+        foreach ($assetAdjustment->outItems as $outItem) {
+            $this->assetAdjustmentOutItemActions->delete($outItem);
+        }
+
+        $result = $assetAdjustment->delete();
+
+        $this->flushCache();
+
+        return $result;
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $tryCount = 0;
+        do {
+            $count = AssetAdjustment::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'AA'.str_pad((string) $count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = AssetAdjustment::where('company_id', $companyId)
+            ->where('code', $code);
+
+        if ($exceptId) {
+            $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() === 0;
+    }
+
+    private function saveInItems(AssetAdjustment $assetAdjustment, array $inItems): void
+    {
+        foreach ($inItems as $inItem) {
+            $dto = new AssetAdjustmentInItemCreateDTO(
+                companyId: $assetAdjustment->company_id,
+                branchId: $assetAdjustment->branch_id,
+                assetAdjustmentId: $assetAdjustment->id,
+                assetId: $inItem['asset_id'],
+                qty: $inItem['qty'],
+                remarks: $inItem['remarks'],
+                serials: $inItem['serials'],
+            );
+            $this->assetAdjustmentInItemActions->create($dto);
+        }
+    }
+
+    private function saveOutItems(AssetAdjustment $assetAdjustment, array $outItems): void
+    {
+        foreach ($outItems as $outItem) {
+            $dto = new AssetAdjustmentOutItemCreateDTO(
+                companyId: $assetAdjustment->company_id,
+                branchId: $assetAdjustment->branch_id,
+                assetAdjustmentId: $assetAdjustment->id,
+                assetId: $outItem['asset_id'],
+                qty: $outItem['qty'],
+                remarks: $outItem['remarks'],
+                serials: $outItem['serials'],
+            );
+            $this->assetAdjustmentOutItemActions->create($dto);
+        }
+    }
+
+    private function updateInItems(AssetAdjustment $assetAdjustment, array $deleteIds, array $inItems): void
+    {
+        foreach ($deleteIds as $deleteId) {
+            $assetAdjustmentInItem = $assetAdjustment->inItems()->findOrFail($deleteId);
+            $this->assetAdjustmentInItemActions->delete($assetAdjustmentInItem);
+        }
+
+        foreach ($inItems as $inItem) {
+            if ($inItem['id']) {
+                $assetAdjustmentInItem = $assetAdjustment->inItems()->findOrFail($inItem['id']);
+                $dto = new AssetAdjustmentInItemUpdateDTO(
+                    assetId: $inItem['asset_id'],
+                    qty: $inItem['qty'],
+                    remarks: $inItem['remarks'],
+                    deleteSerialIds: $inItem['delete_serial_ids'],
+                    serials: $inItem['serials'],
+                );
+                $this->assetAdjustmentInItemActions->update($assetAdjustmentInItem, $dto);
+            } else {
+                $dto = new AssetAdjustmentInItemCreateDTO(
+                    companyId: $assetAdjustment->company_id,
+                    branchId: $assetAdjustment->branch_id,
+                    assetAdjustmentId: $assetAdjustment->id,
+                    assetId: $inItem['asset_id'],
+                    qty: $inItem['qty'],
+                    remarks: $inItem['remarks'],
+                    serials: $inItem['serials'],
+                );
+                $this->assetAdjustmentInItemActions->create($dto);
+            }
+        }
+    }
+
+    private function updateOutItems(AssetAdjustment $assetAdjustment, array $deleteIds, array $outItems): void
+    {
+        foreach ($deleteIds as $deleteId) {
+            $assetAdjustmentOutItem = $assetAdjustment->outItems()->findOrFail($deleteId);
+            $this->assetAdjustmentOutItemActions->delete($assetAdjustmentOutItem);
+        }
+
+        foreach ($outItems as $outItem) {
+            if ($outItem['id']) {
+                $assetAdjustmentOutItem = $assetAdjustment->outItems()->findOrFail($outItem['id']);
+                $dto = new AssetAdjustmentOutItemUpdateDTO(
+                    assetId: $outItem['asset_id'],
+                    qty: $outItem['qty'],
+                    remarks: $outItem['remarks'],
+                    deleteSerialIds: $outItem['delete_serial_ids'],
+                    serials: $outItem['serials'],
+                );
+                $this->assetAdjustmentOutItemActions->update($assetAdjustmentOutItem, $dto);
+            } else {
+                $dto = new AssetAdjustmentOutItemCreateDTO(
+                    companyId: $assetAdjustment->company_id,
+                    branchId: $assetAdjustment->branch_id,
+                    assetAdjustmentId: $assetAdjustment->id,
+                    assetId: $outItem['asset_id'],
+                    qty: $outItem['qty'],
+                    remarks: $outItem['remarks'],
+                    serials: $outItem['serials'],
+                );
+                $this->assetAdjustmentOutItemActions->create($dto);
+            }
+        }
+    }
+
+    private function refreshTotals(AssetAdjustment $assetAdjustment): void
+    {
+        $assetAdjustment->total_incoming_asset_qty = $assetAdjustment->inItems()->sum('qty');
+        $assetAdjustment->total_outgoing_asset_qty = $assetAdjustment->outItems()->sum('qty');
+        $assetAdjustment->save();
+    }
+}
diff --git a/api/app/Actions/AssetAdjustmentInItem/AssetAdjustmentInItemActions.php b/api/app/Actions/AssetAdjustmentInItem/AssetAdjustmentInItemActions.php
new file mode 100644
index 000000000..d802e4865
--- /dev/null
+++ b/api/app/Actions/AssetAdjustmentInItem/AssetAdjustmentInItemActions.php
@@ -0,0 +1,226 @@
+<?php
+
+namespace App\Actions\AssetAdjustmentInItem;
+
+use App\Actions\AssetAdjustmentInItemSerial\AssetAdjustmentInItemSerialActions;
+use App\DTOs\AssetAdjustmentInItemCreateDTO;
+use App\DTOs\AssetAdjustmentInItemSerialCreateDTO;
+use App\DTOs\AssetAdjustmentInItemSerialUpdateDTO;
+use App\DTOs\AssetAdjustmentInItemUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetAdjustmentInItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetAdjustmentInItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'assetAdjustment',
+        'asset.assetCategory',
+        'asset.assetUnit',
+        'serials',
+    ];
+
+    public function __construct(
+        private readonly AssetAdjustmentInItemSerialActions $assetAdjustmentInItemSerialActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $assetAdjustmentId,
+        ?int $assetId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetAdjustmentInItem::select('asset_adjustment_in_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'asset_adjustment_in_items.company_id')
+            ->join('asset_adjustments', 'asset_adjustments.id', '=', 'asset_adjustment_in_items.asset_adjustment_id')
+            ->join('assets', 'assets.id', '=', 'asset_adjustment_in_items.asset_id')
+            ->whereCompanyId('asset_adjustment_in_items', $companyId)
+            ->whereBranchId('asset_adjustment_in_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetAdjustmentId,
+            $assetId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_adjustments.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.name', 'like', '%'.$search.'%')
+                        ->orWhere('asset_adjustment_in_items.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($assetAdjustmentId) {
+                $query->where('asset_adjustment_in_items.asset_adjustment_id', $assetAdjustmentId);
+            }
+
+            if ($assetId) {
+                $query->where('asset_adjustment_in_items.asset_id', $assetId);
+            }
+        });
+
+        $query->orderBy('asset_adjustments.date', 'desc')
+            ->orderBy('asset_adjustment_in_items.id', 'asc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                empty($search) ? '[empty]' : $search,
+                $assetAdjustmentId ?? '[null]',
+                $assetId ?? '[null]',
+                $execute->pagination ? 'true' : 'false',
+                $execute->pagination?->page ?? '[null]',
+                $execute->pagination?->perPage ?? '[null]',
+                $execute->get?->limit ?? '[null]',
+            ];
+
+            $cacheKey = 'read_any_asset_adjustment_in_item_'.implode('_', $cacheParams);
+
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+
+            if ($execute->pagination) {
+                $result = $query->paginate(
+                    perPage: $execute->pagination->perPage,
+                    columns: ['*'],
+                    pageName: 'page',
+                    page: $execute->pagination->page
+                );
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+
+            $recordsCount = $result->count();
+
+            if ($execute->useCache) {
+                $this->saveToCache($cacheKey, $result);
+            }
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(AssetAdjustmentInItem $assetAdjustmentInItem): AssetAdjustmentInItem
+    {
+        return $assetAdjustmentInItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetAdjustmentInItemCreateDTO $data): AssetAdjustmentInItem
+    {
+        $assetAdjustmentInItem = new AssetAdjustmentInItem();
+        $assetAdjustmentInItem->company_id = $data->companyId;
+        $assetAdjustmentInItem->branch_id = $data->branchId;
+        $assetAdjustmentInItem->asset_adjustment_id = $data->assetAdjustmentId;
+        $assetAdjustmentInItem->asset_id = $data->assetId;
+        $assetAdjustmentInItem->qty = $data->qty;
+        $assetAdjustmentInItem->remarks = $data->remarks;
+        $assetAdjustmentInItem->save();
+
+        foreach ($data->serials as $serial) {
+            $dto = new AssetAdjustmentInItemSerialCreateDTO(
+                companyId: $assetAdjustmentInItem->company_id,
+                branchId: $assetAdjustmentInItem->branch_id,
+                assetAdjustmentId: $assetAdjustmentInItem->asset_adjustment_id,
+                assetAdjustmentInItemId: $assetAdjustmentInItem->id,
+                serial: $serial['serial'],
+            );
+            $this->assetAdjustmentInItemSerialActions->create($dto);
+        }
+
+        $this->flushCache();
+
+        return $assetAdjustmentInItem;
+    }
+
+    public function update(AssetAdjustmentInItem $assetAdjustmentInItem, AssetAdjustmentInItemUpdateDTO $data): AssetAdjustmentInItem
+    {
+        $assetAdjustmentInItem->asset_id = $data->assetId;
+        $assetAdjustmentInItem->qty = $data->qty;
+        $assetAdjustmentInItem->remarks = $data->remarks;
+        $assetAdjustmentInItem->save();
+
+        foreach ($data->deleteSerialIds as $deleteId) {
+            $serial = $assetAdjustmentInItem->serials()->findOrFail($deleteId);
+            $this->assetAdjustmentInItemSerialActions->delete($serial);
+        }
+
+        foreach ($data->serials as $serial) {
+            if ($serial['id']) {
+                $serialRow = $assetAdjustmentInItem->serials()->findOrFail($serial['id']);
+                $dto = new AssetAdjustmentInItemSerialUpdateDTO(
+                    serial: $serial['serial'],
+                );
+                $this->assetAdjustmentInItemSerialActions->update($serialRow, $dto);
+            } else {
+                $dto = new AssetAdjustmentInItemSerialCreateDTO(
+                    companyId: $assetAdjustmentInItem->company_id,
+                    branchId: $assetAdjustmentInItem->branch_id,
+                    assetAdjustmentId: $assetAdjustmentInItem->asset_adjustment_id,
+                    assetAdjustmentInItemId: $assetAdjustmentInItem->id,
+                    serial: $serial['serial'],
+                );
+                $this->assetAdjustmentInItemSerialActions->create($dto);
+            }
+        }
+
+        $this->flushCache();
+
+        return $assetAdjustmentInItem->refresh();
+    }
+
+    public function delete(AssetAdjustmentInItem $assetAdjustmentInItem): bool
+    {
+        foreach ($assetAdjustmentInItem->serials as $serial) {
+            $this->assetAdjustmentInItemSerialActions->delete($serial);
+        }
+
+        $result = $assetAdjustmentInItem->delete();
+
+        $this->flushCache();
+
+        return $result;
+    }
+}
diff --git a/api/app/Actions/AssetAdjustmentInItemSerial/AssetAdjustmentInItemSerialActions.php b/api/app/Actions/AssetAdjustmentInItemSerial/AssetAdjustmentInItemSerialActions.php
new file mode 100644
index 000000000..88644133d
--- /dev/null
+++ b/api/app/Actions/AssetAdjustmentInItemSerial/AssetAdjustmentInItemSerialActions.php
@@ -0,0 +1,208 @@
+<?php
+
+namespace App\Actions\AssetAdjustmentInItemSerial;
+
+use App\DTOs\AssetAdjustmentInItemSerialCreateDTO;
+use App\DTOs\AssetAdjustmentInItemSerialUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetAdjustmentInItemSerial;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetAdjustmentInItemSerialActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'assetAdjustment',
+        'assetAdjustmentInItem.asset.assetCategory',
+        'assetAdjustmentInItem.asset.assetUnit',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $assetAdjustmentId,
+        ?int $assetAdjustmentInItemId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetAdjustmentInItemSerial::select('asset_adjustment_in_item_serials.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'asset_adjustment_in_item_serials.company_id')
+            ->join('asset_adjustments', 'asset_adjustments.id', '=', 'asset_adjustment_in_item_serials.asset_adjustment_id')
+            ->join('asset_adjustment_in_items', 'asset_adjustment_in_items.id', '=', 'asset_adjustment_in_item_serials.asset_adjustment_in_item_id')
+            ->join('assets', 'assets.id', '=', 'asset_adjustment_in_items.asset_id')
+            ->whereCompanyId('asset_adjustment_in_item_serials', $companyId)
+            ->whereBranchId('asset_adjustment_in_item_serials', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetAdjustmentId,
+            $assetAdjustmentInItemId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_adjustment_in_item_serials.serial', 'like', '%'.$search.'%')
+                        ->orWhere('asset_adjustments.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.name', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($assetAdjustmentId) {
+                $query->where('asset_adjustment_in_item_serials.asset_adjustment_id', $assetAdjustmentId);
+            }
+
+            if ($assetAdjustmentInItemId) {
+                $query->where('asset_adjustment_in_item_serials.asset_adjustment_in_item_id', $assetAdjustmentInItemId);
+            }
+        });
+
+        $query->orderBy('asset_adjustments.date', 'desc')
+            ->orderBy('asset_adjustment_in_item_serials.id', 'asc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                empty($search) ? '[empty]' : $search,
+                $assetAdjustmentId ?? '[null]',
+                $assetAdjustmentInItemId ?? '[null]',
+                $execute->pagination ? 'true' : 'false',
+                $execute->pagination?->page ?? '[null]',
+                $execute->pagination?->perPage ?? '[null]',
+                $execute->get?->limit ?? '[null]',
+            ];
+
+            $cacheKey = 'read_any_asset_adjustment_in_item_serial_'.implode('_', $cacheParams);
+
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+
+            if ($execute->pagination) {
+                $result = $query->paginate(
+                    perPage: $execute->pagination->perPage,
+                    columns: ['*'],
+                    pageName: 'page',
+                    page: $execute->pagination->page
+                );
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+
+            $recordsCount = $result->count();
+
+            if ($execute->useCache) {
+                $this->saveToCache($cacheKey, $result);
+            }
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(AssetAdjustmentInItemSerial $assetAdjustmentInItemSerial): AssetAdjustmentInItemSerial
+    {
+        return $assetAdjustmentInItemSerial->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetAdjustmentInItemSerialCreateDTO $data): AssetAdjustmentInItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $assetAdjustmentInItemSerial = new AssetAdjustmentInItemSerial();
+            $assetAdjustmentInItemSerial->company_id = $data->companyId;
+            $assetAdjustmentInItemSerial->branch_id = $data->branchId;
+            $assetAdjustmentInItemSerial->asset_adjustment_id = $data->assetAdjustmentId;
+            $assetAdjustmentInItemSerial->asset_adjustment_in_item_id = $data->assetAdjustmentInItemId;
+            $assetAdjustmentInItemSerial->serial = $data->serial;
+            $assetAdjustmentInItemSerial->save();
+
+            $this->flushCache();
+
+            return $assetAdjustmentInItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        AssetAdjustmentInItemSerial $assetAdjustmentInItemSerial,
+        AssetAdjustmentInItemSerialUpdateDTO $data
+    ): AssetAdjustmentInItemSerial {
+        $timer_start = microtime(true);
+
+        try {
+            $assetAdjustmentInItemSerial->serial = $data->serial;
+            $assetAdjustmentInItemSerial->save();
+
+            $this->flushCache();
+
+            return $assetAdjustmentInItemSerial->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(AssetAdjustmentInItemSerial $assetAdjustmentInItemSerial): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $assetAdjustmentInItemSerial->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/AssetAdjustmentOutItem/AssetAdjustmentOutItemActions.php b/api/app/Actions/AssetAdjustmentOutItem/AssetAdjustmentOutItemActions.php
new file mode 100644
index 000000000..dc97cff69
--- /dev/null
+++ b/api/app/Actions/AssetAdjustmentOutItem/AssetAdjustmentOutItemActions.php
@@ -0,0 +1,227 @@
+<?php
+
+namespace App\Actions\AssetAdjustmentOutItem;
+
+use App\Actions\AssetAdjustmentOutItemSerial\AssetAdjustmentOutItemSerialActions;
+use App\DTOs\AssetAdjustmentOutItemCreateDTO;
+use App\DTOs\AssetAdjustmentOutItemSerialCreateDTO;
+use App\DTOs\AssetAdjustmentOutItemSerialUpdateDTO;
+use App\DTOs\AssetAdjustmentOutItemUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetAdjustmentOutItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetAdjustmentOutItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'assetAdjustment',
+        'asset.assetCategory',
+        'asset.assetUnit',
+        'serials',
+    ];
+
+    public function __construct(
+        private readonly AssetAdjustmentOutItemSerialActions $assetAdjustmentOutItemSerialActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $assetAdjustmentId,
+        ?int $assetId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetAdjustmentOutItem::select('asset_adjustment_out_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'asset_adjustment_out_items.company_id')
+            ->join('asset_adjustments', 'asset_adjustments.id', '=', 'asset_adjustment_out_items.asset_adjustment_id')
+            ->join('assets', 'assets.id', '=', 'asset_adjustment_out_items.asset_id')
+            ->whereCompanyId('asset_adjustment_out_items', $companyId)
+            ->whereBranchId('asset_adjustment_out_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetAdjustmentId,
+            $assetId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_adjustments.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.name', 'like', '%'.$search.'%')
+                        ->orWhere('asset_adjustment_out_items.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($assetAdjustmentId) {
+                $query->where('asset_adjustment_out_items.asset_adjustment_id', $assetAdjustmentId);
+            }
+
+            if ($assetId) {
+                $query->where('asset_adjustment_out_items.asset_id', $assetId);
+            }
+        });
+
+        $query->orderBy('asset_adjustments.date', 'desc')
+            ->orderBy('asset_adjustment_out_items.id', 'asc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                empty($search) ? '[empty]' : $search,
+                $assetAdjustmentId ?? '[null]',
+                $assetId ?? '[null]',
+                $execute->pagination ? 'true' : 'false',
+                $execute->pagination?->page ?? '[null]',
+                $execute->pagination?->perPage ?? '[null]',
+                $execute->get?->limit ?? '[null]',
+            ];
+
+            $cacheKey = 'read_any_asset_adjustment_out_item_'.implode('_', $cacheParams);
+
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+
+            if ($execute->pagination) {
+                $result = $query->paginate(
+                    perPage: $execute->pagination->perPage,
+                    columns: ['*'],
+                    pageName: 'page',
+                    page: $execute->pagination->page
+                );
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+
+            $recordsCount = $result->count();
+
+            if ($execute->useCache) {
+                $this->saveToCache($cacheKey, $result);
+            }
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(AssetAdjustmentOutItem $assetAdjustmentOutItem): AssetAdjustmentOutItem
+    {
+        return $assetAdjustmentOutItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetAdjustmentOutItemCreateDTO $data): AssetAdjustmentOutItem
+    {
+        $assetAdjustmentOutItem = new AssetAdjustmentOutItem();
+        $assetAdjustmentOutItem->company_id = $data->companyId;
+        $assetAdjustmentOutItem->branch_id = $data->branchId;
+        $assetAdjustmentOutItem->asset_adjustment_id = $data->assetAdjustmentId;
+        $assetAdjustmentOutItem->asset_id = $data->assetId;
+        $assetAdjustmentOutItem->qty = $data->qty;
+        $assetAdjustmentOutItem->remarks = $data->remarks;
+        $assetAdjustmentOutItem->save();
+
+        foreach ($data->serials as $serial) {
+            $dto = new AssetAdjustmentOutItemSerialCreateDTO(
+                companyId: $assetAdjustmentOutItem->company_id,
+                branchId: $assetAdjustmentOutItem->branch_id,
+                assetAdjustmentId: $assetAdjustmentOutItem->asset_adjustment_id,
+                assetAdjustmentOutItemId: $assetAdjustmentOutItem->id,
+                serial: $serial['serial'],
+            );
+            $this->assetAdjustmentOutItemSerialActions->create($dto);
+        }
+
+        $this->flushCache();
+
+        return $assetAdjustmentOutItem;
+    }
+
+    public function update(AssetAdjustmentOutItem $assetAdjustmentOutItem, AssetAdjustmentOutItemUpdateDTO $data): AssetAdjustmentOutItem
+    {
+        $assetAdjustmentOutItem->asset_id = $data->assetId;
+        $assetAdjustmentOutItem->qty = $data->qty;
+        $assetAdjustmentOutItem->remarks = $data->remarks;
+        $assetAdjustmentOutItem->save();
+
+        foreach ($data->deleteSerialIds as $deleteId) {
+            $serial = $assetAdjustmentOutItem->serials()->findOrFail($deleteId);
+            $this->assetAdjustmentOutItemSerialActions->delete($serial);
+        }
+
+        foreach ($data->serials as $serial) {
+            if ($serial['id']) {
+                $serialRow = $assetAdjustmentOutItem->serials()->findOrFail($serial['id']);
+                $dto = new AssetAdjustmentOutItemSerialUpdateDTO(
+                    companyId: $assetAdjustmentOutItem->company_id,
+                    serial: $serial['serial'],
+                );
+                $this->assetAdjustmentOutItemSerialActions->update($serialRow, $dto);
+            } else {
+                $dto = new AssetAdjustmentOutItemSerialCreateDTO(
+                    companyId: $assetAdjustmentOutItem->company_id,
+                    branchId: $assetAdjustmentOutItem->branch_id,
+                    assetAdjustmentId: $assetAdjustmentOutItem->asset_adjustment_id,
+                    assetAdjustmentOutItemId: $assetAdjustmentOutItem->id,
+                    serial: $serial['serial'],
+                );
+                $this->assetAdjustmentOutItemSerialActions->create($dto);
+            }
+        }
+
+        $this->flushCache();
+
+        return $assetAdjustmentOutItem->refresh();
+    }
+
+    public function delete(AssetAdjustmentOutItem $assetAdjustmentOutItem): bool
+    {
+        foreach ($assetAdjustmentOutItem->serials as $serial) {
+            $this->assetAdjustmentOutItemSerialActions->delete($serial);
+        }
+
+        $result = $assetAdjustmentOutItem->delete();
+
+        $this->flushCache();
+
+        return $result;
+    }
+}
diff --git a/api/app/Actions/AssetAdjustmentOutItemSerial/AssetAdjustmentOutItemSerialActions.php b/api/app/Actions/AssetAdjustmentOutItemSerial/AssetAdjustmentOutItemSerialActions.php
new file mode 100644
index 000000000..477c9ab14
--- /dev/null
+++ b/api/app/Actions/AssetAdjustmentOutItemSerial/AssetAdjustmentOutItemSerialActions.php
@@ -0,0 +1,208 @@
+<?php
+
+namespace App\Actions\AssetAdjustmentOutItemSerial;
+
+use App\DTOs\AssetAdjustmentOutItemSerialCreateDTO;
+use App\DTOs\AssetAdjustmentOutItemSerialUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetAdjustmentOutItemSerial;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetAdjustmentOutItemSerialActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'assetAdjustment',
+        'assetAdjustmentOutItem.asset.assetCategory',
+        'assetAdjustmentOutItem.asset.assetUnit',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $assetAdjustmentId,
+        ?int $assetAdjustmentOutItemId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetAdjustmentOutItemSerial::select('asset_adjustment_out_item_serials.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'asset_adjustment_out_item_serials.company_id')
+            ->join('asset_adjustments', 'asset_adjustments.id', '=', 'asset_adjustment_out_item_serials.asset_adjustment_id')
+            ->join('asset_adjustment_out_items', 'asset_adjustment_out_items.id', '=', 'asset_adjustment_out_item_serials.asset_adjustment_out_item_id')
+            ->join('assets', 'assets.id', '=', 'asset_adjustment_out_items.asset_id')
+            ->whereCompanyId('asset_adjustment_out_item_serials', $companyId)
+            ->whereBranchId('asset_adjustment_out_item_serials', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetAdjustmentId,
+            $assetAdjustmentOutItemId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_adjustment_out_item_serials.serial', 'like', '%'.$search.'%')
+                        ->orWhere('asset_adjustments.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.name', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($assetAdjustmentId) {
+                $query->where('asset_adjustment_out_item_serials.asset_adjustment_id', $assetAdjustmentId);
+            }
+
+            if ($assetAdjustmentOutItemId) {
+                $query->where('asset_adjustment_out_item_serials.asset_adjustment_out_item_id', $assetAdjustmentOutItemId);
+            }
+        });
+
+        $query->orderBy('asset_adjustments.date', 'desc')
+            ->orderBy('asset_adjustment_out_item_serials.id', 'asc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                empty($search) ? '[empty]' : $search,
+                $assetAdjustmentId ?? '[null]',
+                $assetAdjustmentOutItemId ?? '[null]',
+                $execute->pagination ? 'true' : 'false',
+                $execute->pagination?->page ?? '[null]',
+                $execute->pagination?->perPage ?? '[null]',
+                $execute->get?->limit ?? '[null]',
+            ];
+
+            $cacheKey = 'read_any_asset_adjustment_out_item_serial_'.implode('_', $cacheParams);
+
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+
+            if ($execute->pagination) {
+                $result = $query->paginate(
+                    perPage: $execute->pagination->perPage,
+                    columns: ['*'],
+                    pageName: 'page',
+                    page: $execute->pagination->page
+                );
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+
+            $recordsCount = $result->count();
+
+            if ($execute->useCache) {
+                $this->saveToCache($cacheKey, $result);
+            }
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(AssetAdjustmentOutItemSerial $assetAdjustmentOutItemSerial): AssetAdjustmentOutItemSerial
+    {
+        return $assetAdjustmentOutItemSerial->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetAdjustmentOutItemSerialCreateDTO $data): AssetAdjustmentOutItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $assetAdjustmentOutItemSerial = new AssetAdjustmentOutItemSerial();
+            $assetAdjustmentOutItemSerial->company_id = $data->companyId;
+            $assetAdjustmentOutItemSerial->branch_id = $data->branchId;
+            $assetAdjustmentOutItemSerial->asset_adjustment_id = $data->assetAdjustmentId;
+            $assetAdjustmentOutItemSerial->asset_adjustment_out_item_id = $data->assetAdjustmentOutItemId;
+            $assetAdjustmentOutItemSerial->serial = $data->serial;
+            $assetAdjustmentOutItemSerial->save();
+
+            $this->flushCache();
+
+            return $assetAdjustmentOutItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        AssetAdjustmentOutItemSerial $assetAdjustmentOutItemSerial,
+        AssetAdjustmentOutItemSerialUpdateDTO $data
+    ): AssetAdjustmentOutItemSerial {
+        $timer_start = microtime(true);
+
+        try {
+            $assetAdjustmentOutItemSerial->serial = $data->serial;
+            $assetAdjustmentOutItemSerial->save();
+
+            $this->flushCache();
+
+            return $assetAdjustmentOutItemSerial->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(AssetAdjustmentOutItemSerial $assetAdjustmentOutItemSerial): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $assetAdjustmentOutItemSerial->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/AssetCategory/AssetCategoryActions.php b/api/app/Actions/AssetCategory/AssetCategoryActions.php
new file mode 100644
index 000000000..dc91525df
--- /dev/null
+++ b/api/app/Actions/AssetCategory/AssetCategoryActions.php
@@ -0,0 +1,254 @@
+<?php
+
+namespace App\Actions\AssetCategory;
+
+use App\DTOs\AssetCategoryCreateDTO;
+use App\DTOs\AssetCategoryUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetCategory;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetCategoryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetCategory::with(self::LIST_EAGER_LOADS)
+            ->select('asset_categories.*')
+            ->whereCompanyId('asset_categories', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('asset_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('asset_categories.name', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('asset_categories.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(asset_categories.id, '.$includeId.') desc');
+        }
+
+        $query->orderBy('asset_categories.name', 'asc')
+            ->orderBy('asset_categories.code', 'asc')
+            ->orderBy('asset_categories.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_asset_category_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(AssetCategory $assetCategory): AssetCategory
+    {
+        return $assetCategory->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetCategoryCreateDTO $data): AssetCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $assetCategory = new AssetCategory();
+            $assetCategory->company_id = $data->companyId;
+            $assetCategory->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $assetCategory->name = $data->name;
+            $assetCategory->estimated_useful_life_months = $data->estimatedUsefulLifeMonths;
+            $assetCategory->remarks = $data->remarks;
+            $assetCategory->save();
+
+            $this->flushCache();
+
+            return $assetCategory;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(AssetCategory $assetCategory, AssetCategoryUpdateDTO $data): AssetCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $assetCategory->code = $this->generateUniqueCode(
+                $assetCategory->company_id,
+                $data->code,
+                $assetCategory->id,
+            );
+            $assetCategory->name = $data->name;
+            $assetCategory->estimated_useful_life_months = $data->estimatedUsefulLifeMonths;
+            $assetCategory->remarks = $data->remarks;
+            $assetCategory->save();
+
+            $this->flushCache();
+
+            return $assetCategory->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(AssetCategory $assetCategory): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $assetCategory->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $tryCount = 0;
+        do {
+            $count = AssetCategory::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'ACT'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $query = AssetCategory::where('company_id', $companyId)
+            ->where('name', '=', $name);
+
+        if ($exceptId) {
+            $query->where('asset_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $query = AssetCategory::where('company_id', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $query->where('asset_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/AssetPurchase/AssetPurchaseActions.php b/api/app/Actions/AssetPurchase/AssetPurchaseActions.php
new file mode 100644
index 000000000..58d73da5a
--- /dev/null
+++ b/api/app/Actions/AssetPurchase/AssetPurchaseActions.php
@@ -0,0 +1,327 @@
+<?php
+
+namespace App\Actions\AssetPurchase;
+
+use App\Actions\AssetPurchaseItem\AssetPurchaseItemActions;
+use App\DTOs\AssetPurchaseCreateDTO;
+use App\DTOs\AssetPurchaseItemCreateDTO;
+use App\DTOs\AssetPurchaseItemUpdateDTO;
+use App\DTOs\AssetPurchaseUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\AssetPurchase;
+use App\Models\AssetPurchaseItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Illuminate\Support\Facades\Config;
+
+class AssetPurchaseActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'supplier',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'supplier',
+        'items.asset.assetCategory',
+        'items.asset.assetUnit',
+        'items.serials',
+    ];
+
+    public function __construct(
+        private readonly AssetPurchaseItemActions $assetPurchaseItemActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $startDate,
+        ?string $endDate,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetPurchase::select('asset_purchases.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->join('companies', 'companies.id', '=', 'asset_purchases.company_id')
+            ->leftJoin('suppliers', 'suppliers.id', '=', 'asset_purchases.supplier_id')
+            ->whereCompanyId('asset_purchases', $companyId)
+            ->whereBranchId('asset_purchases', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $startDate, $endDate) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_purchases.code', 'like', '%'.$search.'%')
+                        ->orWhere('asset_purchases.remarks', 'like', '%'.$search.'%')
+                        ->orWhere('suppliers.code', 'like', '%'.$search.'%')
+                        ->orWhere('suppliers.name', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('asset_purchases.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('asset_purchases.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+        });
+
+        $query->orderBy('asset_purchases.date', 'desc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $cacheParams = [
+            $withTrashed ? 'true' : 'false',
+            $companyId,
+            $branchId ?? '[null]',
+            empty($search) ? '[empty]' : $search,
+            $startDate ?? '[null]',
+            $endDate ?? '[null]',
+            $execute->pagination ? 'true' : 'false',
+            $execute->pagination?->page ?? '[null]',
+            $execute->pagination?->perPage ?? '[null]',
+            $execute->get?->limit ?? '[null]',
+        ];
+
+        $cacheKey = 'read_any_asset_purchase_'.implode('_', $cacheParams);
+
+        if ($execute->useCache) {
+            $cacheResult = $this->readFromCache($cacheKey);
+            if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                return $cacheResult;
+            }
+        }
+
+        $result = $execute->pagination
+            ? $query->paginate(
+                perPage: $execute->pagination->perPage,
+                columns: ['*'],
+                pageName: 'page',
+                page: $execute->pagination->page,
+            )
+            : ($execute->get?->limit ? $query->limit($execute->get->limit)->get() : $query->get());
+
+        if ($execute->useCache) {
+            $this->saveToCache($cacheKey, $result);
+        }
+
+        return $result;
+    }
+
+    public function read(AssetPurchase $assetPurchase): AssetPurchase
+    {
+        return $assetPurchase->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function create(AssetPurchaseCreateDTO $data): AssetPurchase
+    {
+        $assetPurchase = new AssetPurchase();
+        $assetPurchase->company_id = $data->companyId;
+        $assetPurchase->branch_id = $data->branchId;
+        $assetPurchase->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+        $assetPurchase->date = $this->generateDate($data->date);
+        $assetPurchase->due_days = $data->dueDays;
+        $assetPurchase->supplier_id = $data->supplierId;
+        $assetPurchase->remarks = $data->remarks;
+        $assetPurchase->is_posted = $data->isPosted;
+        $assetPurchase->item_total = 0;
+        $assetPurchase->additional_cost = $data->additionalCost;
+        $assetPurchase->rounding = $data->rounding;
+        $assetPurchase->amount_payable = 0;
+        $assetPurchase->save();
+
+        foreach ($data->items as $item) {
+            $dto = new AssetPurchaseItemCreateDTO(
+                companyId: $assetPurchase->company_id,
+                branchId: $assetPurchase->branch_id,
+                assetPurchaseId: $assetPurchase->id,
+                assetId: $item['asset_id'],
+                qty: (string) $item['qty'],
+                unitPrice: (string) $item['unit_price'],
+                remarks: $item['remarks'],
+                serials: $item['serials'],
+            );
+            $this->assetPurchaseItemActions->create($dto);
+        }
+
+        $this->updateSummary($assetPurchase);
+        $this->flushCache();
+
+        return $assetPurchase;
+    }
+
+    public function update(AssetPurchase $assetPurchase, AssetPurchaseUpdateDTO $data): AssetPurchase
+    {
+        $assetPurchase->company_id = $data->companyId;
+        $assetPurchase->branch_id = $data->branchId;
+        $assetPurchase->code = $this->generateUniqueCode($data->companyId, $data->code, $assetPurchase->id);
+        $assetPurchase->date = $this->generateDate($data->date);
+        $assetPurchase->due_days = $data->dueDays;
+        $assetPurchase->supplier_id = $data->supplierId;
+        $assetPurchase->remarks = $data->remarks;
+        $assetPurchase->is_posted = $data->isPosted;
+        $assetPurchase->additional_cost = $data->additionalCost;
+        $assetPurchase->rounding = $data->rounding;
+        $assetPurchase->save();
+
+        foreach ($data->deleteItemIds as $deleteId) {
+            $item = $assetPurchase->items()->findOrFail($deleteId);
+            $this->assetPurchaseItemActions->delete($item);
+        }
+
+        foreach ($data->items as $item) {
+            if (! empty($item['id'])) {
+                $existingItem = $assetPurchase->items()->findOrFail($item['id']);
+                $dto = new AssetPurchaseItemUpdateDTO(
+                    assetId: $item['asset_id'],
+                    qty: (string) $item['qty'],
+                    unitPrice: (string) $item['unit_price'],
+                    remarks: $item['remarks'],
+                    deleteSerialIds: $item['delete_serial_ids'],
+                    serials: $item['serials'],
+                );
+                $this->assetPurchaseItemActions->update($existingItem, $dto);
+            } else {
+                $dto = new AssetPurchaseItemCreateDTO(
+                    companyId: $assetPurchase->company_id,
+                    branchId: $assetPurchase->branch_id,
+                    assetPurchaseId: $assetPurchase->id,
+                    assetId: $item['asset_id'],
+                    qty: (string) $item['qty'],
+                    unitPrice: (string) $item['unit_price'],
+                    remarks: $item['remarks'],
+                    serials: $item['serials'],
+                );
+                $this->assetPurchaseItemActions->create($dto);
+            }
+        }
+
+        $this->updateSummary($assetPurchase);
+        $this->flushCache();
+
+        return $assetPurchase;
+    }
+
+    private function updateSummary(AssetPurchase $assetPurchase): void
+    {
+        /** @var \Illuminate\Database\Eloquent\Collection<int, AssetPurchaseItem> $items */
+        $items = $assetPurchase->items()->get();
+
+        $itemTotal = (float) $items->sum('subtotal');
+        $additionalCost = (float) $assetPurchase->additional_cost;
+        $remainingAdditionalCost = $additionalCost;
+        $itemsCount = $items->count();
+
+        foreach ($items->values() as $index => $item) {
+            $allocatedAdditionalCost = 0.0;
+
+            if ($itemTotal > 0) {
+                if ($index === $itemsCount - 1) {
+                    $allocatedAdditionalCost = $remainingAdditionalCost;
+                } else {
+                    $allocatedAdditionalCost = round(($additionalCost * (float) $item->subtotal) / $itemTotal, 8);
+                    $remainingAdditionalCost = round($remainingAdditionalCost - $allocatedAdditionalCost, 8);
+                }
+            }
+
+            $subtotalAfterAdditionalCost = round((float) $item->subtotal + $allocatedAdditionalCost, 8);
+            $unitAcquisitionCost = (float) $item->qty > 0
+                ? round($subtotalAfterAdditionalCost / (float) $item->qty, 8)
+                : 0.0;
+
+            $item->allocated_additional_cost = number_format(round($allocatedAdditionalCost, 8), 8, '.', '');
+            $item->subtotal_after_additional_cost = number_format(round($subtotalAfterAdditionalCost, 8), 8, '.', '');
+            $item->unit_acquisition_cost = number_format(round($unitAcquisitionCost, 8), 8, '.', '');
+            $item->save();
+        }
+
+        $assetPurchase->item_total = number_format(round($itemTotal, 8), 8, '.', '');
+        $assetPurchase->amount_payable = number_format(
+            round($itemTotal + (float) $assetPurchase->additional_cost + (float) $assetPurchase->rounding, 8),
+            8,
+            '.',
+            ''
+        );
+        $assetPurchase->save();
+
+        $assetPurchase->refresh();
+    }
+
+    public function delete(AssetPurchase $assetPurchase): bool
+    {
+        foreach ($assetPurchase->items as $item) {
+            $this->assetPurchaseItemActions->delete($item);
+        }
+
+        $result = $assetPurchase->delete();
+
+        $this->flushCache();
+
+        return $result;
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $tryCount = 0;
+        do {
+            $count = AssetPurchase::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'AP'.str_pad((string) $count, 4, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = AssetPurchase::where('company_id', $companyId)
+            ->where('code', $code);
+
+        if ($exceptId) {
+            $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() === 0;
+    }
+}
diff --git a/api/app/Actions/AssetPurchaseItem/AssetPurchaseItemActions.php b/api/app/Actions/AssetPurchaseItem/AssetPurchaseItemActions.php
new file mode 100644
index 000000000..b082d05ba
--- /dev/null
+++ b/api/app/Actions/AssetPurchaseItem/AssetPurchaseItemActions.php
@@ -0,0 +1,234 @@
+<?php
+
+namespace App\Actions\AssetPurchaseItem;
+
+use App\Actions\AssetPurchaseItemSerial\AssetPurchaseItemSerialActions;
+use App\DTOs\AssetPurchaseItemCreateDTO;
+use App\DTOs\AssetPurchaseItemSerialCreateDTO;
+use App\DTOs\AssetPurchaseItemSerialUpdateDTO;
+use App\DTOs\AssetPurchaseItemUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetPurchaseItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetPurchaseItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'assetPurchase.supplier',
+        'asset.assetCategory',
+        'asset.assetUnit',
+        'serials',
+    ];
+
+    public function __construct(
+        private readonly AssetPurchaseItemSerialActions $assetPurchaseItemSerialActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $assetPurchaseId,
+        ?int $assetId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetPurchaseItem::select('asset_purchase_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'asset_purchase_items.company_id')
+            ->join('asset_purchases', 'asset_purchases.id', '=', 'asset_purchase_items.asset_purchase_id')
+            ->join('assets', 'assets.id', '=', 'asset_purchase_items.asset_id')
+            ->whereCompanyId('asset_purchase_items', $companyId)
+            ->whereBranchId('asset_purchase_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetPurchaseId,
+            $assetId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_purchases.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.name', 'like', '%'.$search.'%')
+                        ->orWhere('asset_purchase_items.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($assetPurchaseId) {
+                $query->where('asset_purchase_items.asset_purchase_id', $assetPurchaseId);
+            }
+
+            if ($assetId) {
+                $query->where('asset_purchase_items.asset_id', $assetId);
+            }
+        });
+
+        $query->orderBy('asset_purchases.date', 'desc')
+            ->orderBy('asset_purchase_items.id', 'asc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                empty($search) ? '[empty]' : $search,
+                $assetPurchaseId ?? '[null]',
+                $assetId ?? '[null]',
+                $execute->pagination ? 'true' : 'false',
+                $execute->pagination?->page ?? '[null]',
+                $execute->pagination?->perPage ?? '[null]',
+                $execute->get?->limit ?? '[null]',
+            ];
+
+            $cacheKey = 'read_any_asset_purchase_item_'.implode('_', $cacheParams);
+
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+
+            if ($execute->pagination) {
+                $result = $query->paginate(
+                    perPage: $execute->pagination->perPage,
+                    columns: ['*'],
+                    pageName: 'page',
+                    page: $execute->pagination->page
+                );
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+
+            $recordsCount = $result->count();
+
+            if ($execute->useCache) {
+                $this->saveToCache($cacheKey, $result);
+            }
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(AssetPurchaseItem $assetPurchaseItem): AssetPurchaseItem
+    {
+        return $assetPurchaseItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetPurchaseItemCreateDTO $data): AssetPurchaseItem
+    {
+        $assetPurchaseItem = new AssetPurchaseItem();
+        $assetPurchaseItem->company_id = $data->companyId;
+        $assetPurchaseItem->branch_id = $data->branchId;
+        $assetPurchaseItem->asset_purchase_id = $data->assetPurchaseId;
+        $assetPurchaseItem->asset_id = $data->assetId;
+        $assetPurchaseItem->qty = $data->qty;
+        $assetPurchaseItem->unit_price = $data->unitPrice;
+        $assetPurchaseItem->subtotal = number_format(round((float) $data->qty * (float) $data->unitPrice, 8), 8, '.', '');
+        $assetPurchaseItem->allocated_additional_cost = 0;
+        $assetPurchaseItem->subtotal_after_additional_cost = 0;
+        $assetPurchaseItem->unit_acquisition_cost = 0;
+        $assetPurchaseItem->remarks = $data->remarks;
+        $assetPurchaseItem->save();
+
+        foreach ($data->serials as $serial) {
+            $dto = new AssetPurchaseItemSerialCreateDTO(
+                companyId: $assetPurchaseItem->company_id,
+                branchId: $assetPurchaseItem->branch_id,
+                assetPurchaseId: $assetPurchaseItem->asset_purchase_id,
+                assetPurchaseItemId: $assetPurchaseItem->id,
+                serial: $serial['serial'],
+            );
+            $this->assetPurchaseItemSerialActions->create($dto);
+        }
+
+        $this->flushCache();
+
+        return $assetPurchaseItem;
+    }
+
+    public function update(AssetPurchaseItem $assetPurchaseItem, AssetPurchaseItemUpdateDTO $data): AssetPurchaseItem
+    {
+        $assetPurchaseItem->asset_id = $data->assetId;
+        $assetPurchaseItem->qty = $data->qty;
+        $assetPurchaseItem->unit_price = $data->unitPrice;
+        $assetPurchaseItem->subtotal = number_format(round((float) $data->qty * (float) $data->unitPrice, 8), 8, '.', '');
+        $assetPurchaseItem->remarks = $data->remarks;
+        $assetPurchaseItem->save();
+
+        foreach ($data->deleteSerialIds as $deleteId) {
+            $serial = $assetPurchaseItem->serials()->findOrFail($deleteId);
+            $this->assetPurchaseItemSerialActions->delete($serial);
+        }
+
+        foreach ($data->serials as $serial) {
+            if ($serial['id']) {
+                $serialRow = $assetPurchaseItem->serials()->findOrFail($serial['id']);
+                $dto = new AssetPurchaseItemSerialUpdateDTO(
+                    companyId: $assetPurchaseItem->company_id,
+                    serial: $serial['serial'],
+                );
+                $this->assetPurchaseItemSerialActions->update($serialRow, $dto);
+            } else {
+                $dto = new AssetPurchaseItemSerialCreateDTO(
+                    companyId: $assetPurchaseItem->company_id,
+                    branchId: $assetPurchaseItem->branch_id,
+                    assetPurchaseId: $assetPurchaseItem->asset_purchase_id,
+                    assetPurchaseItemId: $assetPurchaseItem->id,
+                    serial: $serial['serial'],
+                );
+                $this->assetPurchaseItemSerialActions->create($dto);
+            }
+        }
+
+        $this->flushCache();
+
+        return $assetPurchaseItem->refresh();
+    }
+
+    public function delete(AssetPurchaseItem $assetPurchaseItem): bool
+    {
+        foreach ($assetPurchaseItem->serials as $serial) {
+            $this->assetPurchaseItemSerialActions->delete($serial);
+        }
+
+        $result = $assetPurchaseItem->delete();
+
+        $this->flushCache();
+
+        return $result;
+    }
+}
diff --git a/api/app/Actions/AssetPurchaseItemSerial/AssetPurchaseItemSerialActions.php b/api/app/Actions/AssetPurchaseItemSerial/AssetPurchaseItemSerialActions.php
new file mode 100644
index 000000000..d392e7b25
--- /dev/null
+++ b/api/app/Actions/AssetPurchaseItemSerial/AssetPurchaseItemSerialActions.php
@@ -0,0 +1,208 @@
+<?php
+
+namespace App\Actions\AssetPurchaseItemSerial;
+
+use App\DTOs\AssetPurchaseItemSerialCreateDTO;
+use App\DTOs\AssetPurchaseItemSerialUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetPurchaseItemSerial;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetPurchaseItemSerialActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'assetPurchase.supplier',
+        'assetPurchaseItem.asset.assetCategory',
+        'assetPurchaseItem.asset.assetUnit',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $assetPurchaseId,
+        ?int $assetPurchaseItemId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetPurchaseItemSerial::select('asset_purchase_item_serials.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'asset_purchase_item_serials.company_id')
+            ->join('asset_purchases', 'asset_purchases.id', '=', 'asset_purchase_item_serials.asset_purchase_id')
+            ->join('asset_purchase_items', 'asset_purchase_items.id', '=', 'asset_purchase_item_serials.asset_purchase_item_id')
+            ->join('assets', 'assets.id', '=', 'asset_purchase_items.asset_id')
+            ->whereCompanyId('asset_purchase_item_serials', $companyId)
+            ->whereBranchId('asset_purchase_item_serials', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetPurchaseId,
+            $assetPurchaseItemId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_purchase_item_serials.serial', 'like', '%'.$search.'%')
+                        ->orWhere('asset_purchases.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.name', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($assetPurchaseId) {
+                $query->where('asset_purchase_item_serials.asset_purchase_id', $assetPurchaseId);
+            }
+
+            if ($assetPurchaseItemId) {
+                $query->where('asset_purchase_item_serials.asset_purchase_item_id', $assetPurchaseItemId);
+            }
+        });
+
+        $query->orderBy('asset_purchases.date', 'desc')
+            ->orderBy('asset_purchase_item_serials.id', 'asc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                empty($search) ? '[empty]' : $search,
+                $assetPurchaseId ?? '[null]',
+                $assetPurchaseItemId ?? '[null]',
+                $execute->pagination ? 'true' : 'false',
+                $execute->pagination?->page ?? '[null]',
+                $execute->pagination?->perPage ?? '[null]',
+                $execute->get?->limit ?? '[null]',
+            ];
+
+            $cacheKey = 'read_any_asset_purchase_item_serial_'.implode('_', $cacheParams);
+
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+
+            if ($execute->pagination) {
+                $result = $query->paginate(
+                    perPage: $execute->pagination->perPage,
+                    columns: ['*'],
+                    pageName: 'page',
+                    page: $execute->pagination->page
+                );
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+
+            $recordsCount = $result->count();
+
+            if ($execute->useCache) {
+                $this->saveToCache($cacheKey, $result);
+            }
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(AssetPurchaseItemSerial $assetPurchaseItemSerial): AssetPurchaseItemSerial
+    {
+        return $assetPurchaseItemSerial->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetPurchaseItemSerialCreateDTO $data): AssetPurchaseItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $assetPurchaseItemSerial = new AssetPurchaseItemSerial();
+            $assetPurchaseItemSerial->company_id = $data->companyId;
+            $assetPurchaseItemSerial->branch_id = $data->branchId;
+            $assetPurchaseItemSerial->asset_purchase_id = $data->assetPurchaseId;
+            $assetPurchaseItemSerial->asset_purchase_item_id = $data->assetPurchaseItemId;
+            $assetPurchaseItemSerial->serial = $data->serial;
+            $assetPurchaseItemSerial->save();
+
+            $this->flushCache();
+
+            return $assetPurchaseItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        AssetPurchaseItemSerial $assetPurchaseItemSerial,
+        AssetPurchaseItemSerialUpdateDTO $data
+    ): AssetPurchaseItemSerial {
+        $timer_start = microtime(true);
+
+        try {
+            $assetPurchaseItemSerial->serial = $data->serial;
+            $assetPurchaseItemSerial->save();
+
+            $this->flushCache();
+
+            return $assetPurchaseItemSerial->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(AssetPurchaseItemSerial $assetPurchaseItemSerial): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $assetPurchaseItemSerial->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/AssetSale/AssetSaleActions.php b/api/app/Actions/AssetSale/AssetSaleActions.php
new file mode 100644
index 000000000..7cb068e76
--- /dev/null
+++ b/api/app/Actions/AssetSale/AssetSaleActions.php
@@ -0,0 +1,289 @@
+<?php
+
+namespace App\Actions\AssetSale;
+
+use App\Actions\AssetSaleItem\AssetSaleItemActions;
+use App\DTOs\AssetSaleCreateDTO;
+use App\DTOs\AssetSaleItemCreateDTO;
+use App\DTOs\AssetSaleItemUpdateDTO;
+use App\DTOs\AssetSaleUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\AssetSale;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Illuminate\Support\Facades\Config;
+
+class AssetSaleActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'customer',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'customer',
+        'items.asset.assetCategory',
+        'items.asset.assetUnit',
+        'items.serials',
+    ];
+
+    public function __construct(
+        private readonly AssetSaleItemActions $assetSaleItemActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $startDate,
+        ?string $endDate,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetSale::select('asset_sales.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->join('companies', 'companies.id', '=', 'asset_sales.company_id')
+            ->leftJoin('customers', 'customers.id', '=', 'asset_sales.customer_id')
+            ->whereCompanyId('asset_sales', $companyId)
+            ->whereBranchId('asset_sales', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $startDate, $endDate) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_sales.code', 'like', '%'.$search.'%')
+                        ->orWhere('asset_sales.remarks', 'like', '%'.$search.'%')
+                        ->orWhere('customers.code', 'like', '%'.$search.'%')
+                        ->orWhere('customers.name', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('asset_sales.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('asset_sales.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+        });
+
+        $query->orderBy('asset_sales.date', 'desc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $cacheParams = [
+            $withTrashed ? 'true' : 'false',
+            $companyId,
+            $branchId ?? '[null]',
+            empty($search) ? '[empty]' : $search,
+            $startDate ?? '[null]',
+            $endDate ?? '[null]',
+            $execute->pagination ? 'true' : 'false',
+            $execute->pagination?->page ?? '[null]',
+            $execute->pagination?->perPage ?? '[null]',
+            $execute->get?->limit ?? '[null]',
+        ];
+
+        $cacheKey = 'read_any_asset_sale_'.implode('_', $cacheParams);
+
+        if ($execute->useCache) {
+            $cacheResult = $this->readFromCache($cacheKey);
+            if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                return $cacheResult;
+            }
+        }
+
+        $result = $execute->pagination
+            ? $query->paginate(
+                perPage: $execute->pagination->perPage,
+                columns: ['*'],
+                pageName: 'page',
+                page: $execute->pagination->page,
+            )
+            : ($execute->get?->limit ? $query->limit($execute->get->limit)->get() : $query->get());
+
+        if ($execute->useCache) {
+            $this->saveToCache($cacheKey, $result);
+        }
+
+        return $result;
+    }
+
+    public function read(AssetSale $assetSale): AssetSale
+    {
+        return $assetSale->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function create(AssetSaleCreateDTO $data): AssetSale
+    {
+        $assetSale = new AssetSale();
+        $assetSale->company_id = $data->companyId;
+        $assetSale->branch_id = $data->branchId;
+        $assetSale->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+        $assetSale->date = $this->generateDate($data->date);
+        $assetSale->due_days = $data->dueDays;
+        $assetSale->customer_id = $data->customerId;
+        $assetSale->remarks = $data->remarks;
+        $assetSale->is_posted = $data->isPosted;
+        $assetSale->item_total = 0;
+        $assetSale->rounding = $data->rounding;
+        $assetSale->amount_receivable = 0;
+        $assetSale->save();
+
+        foreach ($data->items as $item) {
+            $dto = new AssetSaleItemCreateDTO(
+                companyId: $assetSale->company_id,
+                branchId: $assetSale->branch_id,
+                assetSaleId: $assetSale->id,
+                assetId: $item['asset_id'],
+                qty: (string) $item['qty'],
+                unitPrice: (string) $item['unit_price'],
+                remarks: $item['remarks'],
+                serials: $item['serials'],
+            );
+            $this->assetSaleItemActions->create($dto);
+        }
+
+        $this->updateSummary($assetSale);
+        $this->flushCache();
+
+        return $assetSale;
+    }
+
+    public function update(AssetSale $assetSale, AssetSaleUpdateDTO $data): AssetSale
+    {
+        $assetSale->company_id = $data->companyId;
+        $assetSale->branch_id = $data->branchId;
+        $assetSale->code = $this->generateUniqueCode($data->companyId, $data->code, $assetSale->id);
+        $assetSale->date = $this->generateDate($data->date);
+        $assetSale->due_days = $data->dueDays;
+        $assetSale->customer_id = $data->customerId;
+        $assetSale->remarks = $data->remarks;
+        $assetSale->is_posted = $data->isPosted;
+        $assetSale->rounding = $data->rounding;
+        $assetSale->save();
+
+        foreach ($data->deleteItemIds as $deleteId) {
+            $item = $assetSale->items()->findOrFail($deleteId);
+            $this->assetSaleItemActions->delete($item);
+        }
+
+        foreach ($data->items as $item) {
+            if (! empty($item['id'])) {
+                $existingItem = $assetSale->items()->findOrFail($item['id']);
+                $dto = new AssetSaleItemUpdateDTO(
+                    assetId: $item['asset_id'],
+                    qty: (string) $item['qty'],
+                    unitPrice: (string) $item['unit_price'],
+                    remarks: $item['remarks'],
+                    deleteSerialIds: $item['delete_serial_ids'],
+                    serials: $item['serials'],
+                );
+                $this->assetSaleItemActions->update($existingItem, $dto);
+            } else {
+                $dto = new AssetSaleItemCreateDTO(
+                    companyId: $assetSale->company_id,
+                    branchId: $assetSale->branch_id,
+                    assetSaleId: $assetSale->id,
+                    assetId: $item['asset_id'],
+                    qty: (string) $item['qty'],
+                    unitPrice: (string) $item['unit_price'],
+                    remarks: $item['remarks'],
+                    serials: $item['serials'],
+                );
+                $this->assetSaleItemActions->create($dto);
+            }
+        }
+
+        $this->updateSummary($assetSale);
+        $this->flushCache();
+
+        return $assetSale;
+    }
+
+    private function updateSummary(AssetSale $assetSale): void
+    {
+        $itemTotal = (float) $assetSale->items()->sum('subtotal');
+
+        $assetSale->item_total = number_format(round($itemTotal, 8), 8, '.', '');
+        $assetSale->amount_receivable = number_format(round($itemTotal + (float) $assetSale->rounding, 8), 8, '.', '');
+        $assetSale->save();
+
+        $assetSale->refresh();
+    }
+
+    public function delete(AssetSale $assetSale): bool
+    {
+        foreach ($assetSale->items as $item) {
+            $this->assetSaleItemActions->delete($item);
+        }
+
+        $result = $assetSale->delete();
+        $this->flushCache();
+
+        return $result;
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $tryCount = 0;
+        do {
+            $count = AssetSale::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'AS'.str_pad((string) $count, 4, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = AssetSale::where('company_id', $companyId)
+            ->where('code', $code);
+
+        if ($exceptId) {
+            $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() === 0;
+    }
+}
diff --git a/api/app/Actions/AssetSaleItem/AssetSaleItemActions.php b/api/app/Actions/AssetSaleItem/AssetSaleItemActions.php
new file mode 100644
index 000000000..5ab2721e5
--- /dev/null
+++ b/api/app/Actions/AssetSaleItem/AssetSaleItemActions.php
@@ -0,0 +1,230 @@
+<?php
+
+namespace App\Actions\AssetSaleItem;
+
+use App\Actions\AssetSaleItemSerial\AssetSaleItemSerialActions;
+use App\DTOs\AssetSaleItemCreateDTO;
+use App\DTOs\AssetSaleItemSerialCreateDTO;
+use App\DTOs\AssetSaleItemSerialUpdateDTO;
+use App\DTOs\AssetSaleItemUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetSaleItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetSaleItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'assetSale.customer',
+        'asset.assetCategory',
+        'asset.assetUnit',
+        'serials',
+    ];
+
+    public function __construct(
+        private readonly AssetSaleItemSerialActions $assetSaleItemSerialActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $assetSaleId,
+        ?int $assetId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetSaleItem::select('asset_sale_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'asset_sale_items.company_id')
+            ->join('asset_sales', 'asset_sales.id', '=', 'asset_sale_items.asset_sale_id')
+            ->join('assets', 'assets.id', '=', 'asset_sale_items.asset_id')
+            ->whereCompanyId('asset_sale_items', $companyId)
+            ->whereBranchId('asset_sale_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetSaleId,
+            $assetId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_sales.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.name', 'like', '%'.$search.'%')
+                        ->orWhere('asset_sale_items.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($assetSaleId) {
+                $query->where('asset_sale_items.asset_sale_id', $assetSaleId);
+            }
+
+            if ($assetId) {
+                $query->where('asset_sale_items.asset_id', $assetId);
+            }
+        });
+
+        $query->orderBy('asset_sales.date', 'desc')
+            ->orderBy('asset_sale_items.id', 'asc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                empty($search) ? '[empty]' : $search,
+                $assetSaleId ?? '[null]',
+                $assetId ?? '[null]',
+                $execute->pagination ? 'true' : 'false',
+                $execute->pagination?->page ?? '[null]',
+                $execute->pagination?->perPage ?? '[null]',
+                $execute->get?->limit ?? '[null]',
+            ];
+
+            $cacheKey = 'read_any_asset_sale_item_'.implode('_', $cacheParams);
+
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+
+            if ($execute->pagination) {
+                $result = $query->paginate(
+                    perPage: $execute->pagination->perPage,
+                    columns: ['*'],
+                    pageName: 'page',
+                    page: $execute->pagination->page
+                );
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+
+            $recordsCount = $result->count();
+
+            if ($execute->useCache) {
+                $this->saveToCache($cacheKey, $result);
+            }
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(AssetSaleItem $assetSaleItem): AssetSaleItem
+    {
+        return $assetSaleItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetSaleItemCreateDTO $data): AssetSaleItem
+    {
+        $assetSaleItem = new AssetSaleItem();
+        $assetSaleItem->company_id = $data->companyId;
+        $assetSaleItem->branch_id = $data->branchId;
+        $assetSaleItem->asset_sale_id = $data->assetSaleId;
+        $assetSaleItem->asset_id = $data->assetId;
+        $assetSaleItem->qty = $data->qty;
+        $assetSaleItem->unit_price = $data->unitPrice;
+        $assetSaleItem->subtotal = number_format(round((float) $data->qty * (float) $data->unitPrice, 8), 8, '.', '');
+        $assetSaleItem->remarks = $data->remarks;
+        $assetSaleItem->save();
+
+        foreach ($data->serials as $serial) {
+            $dto = new AssetSaleItemSerialCreateDTO(
+                companyId: $assetSaleItem->company_id,
+                branchId: $assetSaleItem->branch_id,
+                assetSaleId: $assetSaleItem->asset_sale_id,
+                assetSaleItemId: $assetSaleItem->id,
+                serial: $serial['serial'],
+            );
+            $this->assetSaleItemSerialActions->create($dto);
+        }
+
+        $this->flushCache();
+
+        return $assetSaleItem;
+    }
+
+    public function update(AssetSaleItem $assetSaleItem, AssetSaleItemUpdateDTO $data): AssetSaleItem
+    {
+        $assetSaleItem->asset_id = $data->assetId;
+        $assetSaleItem->qty = $data->qty;
+        $assetSaleItem->unit_price = $data->unitPrice;
+        $assetSaleItem->subtotal = number_format(round((float) $data->qty * (float) $data->unitPrice, 8), 8, '.', '');
+        $assetSaleItem->remarks = $data->remarks;
+        $assetSaleItem->save();
+
+        foreach ($data->deleteSerialIds as $deleteId) {
+            $serial = $assetSaleItem->serials()->findOrFail($deleteId);
+            $this->assetSaleItemSerialActions->delete($serial);
+        }
+
+        foreach ($data->serials as $serial) {
+            if ($serial['id']) {
+                $serialRow = $assetSaleItem->serials()->findOrFail($serial['id']);
+                $dto = new AssetSaleItemSerialUpdateDTO(
+                    companyId: $assetSaleItem->company_id,
+                    serial: $serial['serial'],
+                );
+                $this->assetSaleItemSerialActions->update($serialRow, $dto);
+            } else {
+                $dto = new AssetSaleItemSerialCreateDTO(
+                    companyId: $assetSaleItem->company_id,
+                    branchId: $assetSaleItem->branch_id,
+                    assetSaleId: $assetSaleItem->asset_sale_id,
+                    assetSaleItemId: $assetSaleItem->id,
+                    serial: $serial['serial'],
+                );
+                $this->assetSaleItemSerialActions->create($dto);
+            }
+        }
+
+        $this->flushCache();
+
+        return $assetSaleItem->refresh();
+    }
+
+    public function delete(AssetSaleItem $assetSaleItem): bool
+    {
+        foreach ($assetSaleItem->serials as $serial) {
+            $this->assetSaleItemSerialActions->delete($serial);
+        }
+
+        $result = $assetSaleItem->delete();
+        $this->flushCache();
+
+        return $result;
+    }
+}
diff --git a/api/app/Actions/AssetSaleItemSerial/AssetSaleItemSerialActions.php b/api/app/Actions/AssetSaleItemSerial/AssetSaleItemSerialActions.php
new file mode 100644
index 000000000..8e842d2d9
--- /dev/null
+++ b/api/app/Actions/AssetSaleItemSerial/AssetSaleItemSerialActions.php
@@ -0,0 +1,208 @@
+<?php
+
+namespace App\Actions\AssetSaleItemSerial;
+
+use App\DTOs\AssetSaleItemSerialCreateDTO;
+use App\DTOs\AssetSaleItemSerialUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetSaleItemSerial;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetSaleItemSerialActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'assetSale.customer',
+        'assetSaleItem.asset.assetCategory',
+        'assetSaleItem.asset.assetUnit',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $assetSaleId,
+        ?int $assetSaleItemId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetSaleItemSerial::select('asset_sale_item_serials.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'asset_sale_item_serials.company_id')
+            ->join('asset_sales', 'asset_sales.id', '=', 'asset_sale_item_serials.asset_sale_id')
+            ->join('asset_sale_items', 'asset_sale_items.id', '=', 'asset_sale_item_serials.asset_sale_item_id')
+            ->join('assets', 'assets.id', '=', 'asset_sale_items.asset_id')
+            ->whereCompanyId('asset_sale_item_serials', $companyId)
+            ->whereBranchId('asset_sale_item_serials', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $assetSaleId,
+            $assetSaleItemId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('asset_sale_item_serials.serial', 'like', '%'.$search.'%')
+                        ->orWhere('asset_sales.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.code', 'like', '%'.$search.'%')
+                        ->orWhere('assets.name', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($assetSaleId) {
+                $query->where('asset_sale_item_serials.asset_sale_id', $assetSaleId);
+            }
+
+            if ($assetSaleItemId) {
+                $query->where('asset_sale_item_serials.asset_sale_item_id', $assetSaleItemId);
+            }
+        });
+
+        $query->orderBy('asset_sales.date', 'desc')
+            ->orderBy('asset_sale_item_serials.id', 'asc');
+
+        if (! $execute) {
+            return $query;
+        }
+
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheParams = [
+                $withTrashed ? 'true' : 'false',
+                $companyId,
+                $branchId ?? '[null]',
+                empty($search) ? '[empty]' : $search,
+                $assetSaleId ?? '[null]',
+                $assetSaleItemId ?? '[null]',
+                $execute->pagination ? 'true' : 'false',
+                $execute->pagination?->page ?? '[null]',
+                $execute->pagination?->perPage ?? '[null]',
+                $execute->get?->limit ?? '[null]',
+            ];
+
+            $cacheKey = 'read_any_asset_sale_item_serial_'.implode('_', $cacheParams);
+
+            if ($execute->useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+                if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                    return $cacheResult;
+                }
+            }
+
+            if ($execute->pagination) {
+                $result = $query->paginate(
+                    perPage: $execute->pagination->perPage,
+                    columns: ['*'],
+                    pageName: 'page',
+                    page: $execute->pagination->page
+                );
+            } else {
+                if ($execute->get?->limit) {
+                    $query->limit($execute->get->limit);
+                }
+                $result = $query->get();
+            }
+
+            $recordsCount = $result->count();
+
+            if ($execute->useCache) {
+                $this->saveToCache($cacheKey, $result);
+            }
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(AssetSaleItemSerial $assetSaleItemSerial): AssetSaleItemSerial
+    {
+        return $assetSaleItemSerial->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetSaleItemSerialCreateDTO $data): AssetSaleItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $assetSaleItemSerial = new AssetSaleItemSerial();
+            $assetSaleItemSerial->company_id = $data->companyId;
+            $assetSaleItemSerial->branch_id = $data->branchId;
+            $assetSaleItemSerial->asset_sale_id = $data->assetSaleId;
+            $assetSaleItemSerial->asset_sale_item_id = $data->assetSaleItemId;
+            $assetSaleItemSerial->serial = $data->serial;
+            $assetSaleItemSerial->save();
+
+            $this->flushCache();
+
+            return $assetSaleItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        AssetSaleItemSerial $assetSaleItemSerial,
+        AssetSaleItemSerialUpdateDTO $data
+    ): AssetSaleItemSerial {
+        $timer_start = microtime(true);
+
+        try {
+            $assetSaleItemSerial->serial = $data->serial;
+            $assetSaleItemSerial->save();
+
+            $this->flushCache();
+
+            return $assetSaleItemSerial->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(AssetSaleItemSerial $assetSaleItemSerial): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $assetSaleItemSerial->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/AssetUnit/AssetUnitActions.php b/api/app/Actions/AssetUnit/AssetUnitActions.php
new file mode 100644
index 000000000..cfe591011
--- /dev/null
+++ b/api/app/Actions/AssetUnit/AssetUnitActions.php
@@ -0,0 +1,230 @@
+<?php
+
+namespace App\Actions\AssetUnit;
+
+use App\DTOs\AssetUnitCreateDTO;
+use App\DTOs\AssetUnitUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\AssetUnit;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class AssetUnitActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+        ?int $includeId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = AssetUnit::query()
+            ->select('asset_units.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->withTrashed();
+
+        $query->whereCompanyId('asset_units', $companyId);
+
+        $query->where(function ($query) use ($withTrashed, $search, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search) {
+                $query->withoutTrashed();
+
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('asset_units.code', 'like', '%'.$search.'%')
+                            ->orWhere('asset_units.name', 'like', '%'.$search.'%')
+                            ->orWhere('asset_units.description', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('asset_units.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(asset_units.id, '.$includeId.') desc');
+        }
+
+        $query->orderBy('asset_units.name', 'asc');
+        $query->orderBy('asset_units.code', 'asc');
+
+        if ($execute) {
+            $timerStart = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page,
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $executionTime = microtime(true) - $timerStart;
+                $this->loggerPerformance(__METHOD__, $executionTime, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(AssetUnit $assetUnit): AssetUnit
+    {
+        return $assetUnit->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(AssetUnitCreateDTO $data): AssetUnit
+    {
+        $timerStart = microtime(true);
+
+        try {
+            $assetUnit = new AssetUnit();
+            $assetUnit->company_id = $data->companyId;
+            $assetUnit->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $assetUnit->name = $data->name;
+            $assetUnit->description = $data->description;
+            $assetUnit->save();
+
+            $this->flushCache();
+
+            return $assetUnit;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function update(AssetUnit $assetUnit, AssetUnitUpdateDTO $data): bool
+    {
+        $timerStart = microtime(true);
+
+        try {
+            $assetUnit->code = $this->generateUniqueCode($assetUnit->company_id, $data->code, $assetUnit->id);
+            $assetUnit->name = $data->name;
+            $assetUnit->description = $data->description;
+            $result = $assetUnit->save();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function delete(AssetUnit $assetUnit): bool
+    {
+        $timerStart = microtime(true);
+
+        try {
+            $result = $assetUnit->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $excludeId): bool
+    {
+        return ! AssetUnit::query()
+            ->where('company_id', $companyId)
+            ->whereRaw('LOWER(code) = ?', [strtolower($code)])
+            ->when($excludeId, fn ($query) => $query->where('id', '!=', $excludeId))
+            ->exists();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $excludeId): bool
+    {
+        return ! AssetUnit::query()
+            ->where('company_id', $companyId)
+            ->whereRaw('LOWER(name) = ?', [strtolower($name)])
+            ->when($excludeId, fn ($query) => $query->where('id', '!=', $excludeId))
+            ->exists();
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $tryCount = 0;
+        do {
+            $count = AssetUnit::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'AUN'.str_pad((string) $count, 4, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+}
diff --git a/api/app/Actions/Branch/BranchActions.php b/api/app/Actions/Branch/BranchActions.php
index 70546133d..e69bc7c6a 100644
--- a/api/app/Actions/Branch/BranchActions.php
+++ b/api/app/Actions/Branch/BranchActions.php
@@ -2,215 +2,216 @@
 
 namespace App\Actions\Branch;
 
-use App\Actions\Randomizer\RandomizerActions;
+use App\DTOs\BranchCreateDTO;
+use App\DTOs\BranchUpdateDTO;
+use App\DTOs\ExecuteDTO;
 use App\Models\Branch;
 use App\Models\Company;
 use App\Traits\CacheHelper;
 use App\Traits\LoggerHelper;
 use Exception;
-use Illuminate\Contracts\Pagination\Paginator;
-use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Config;
-use Illuminate\Support\Facades\DB;
 
 class BranchActions
 {
     use CacheHelper;
     use LoggerHelper;
 
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
     public function __construct()
     {
     }
 
-    public function create(
-        array $branchArr
-    ): Branch {
-        DB::beginTransaction();
-        $timer_start = microtime(true);
-
-        try {
-            $company_id = $branchArr['company_id'];
-            $code = $branchArr['code'];
-            $name = $branchArr['name'];
-            $address = $branchArr['address'];
-            $city = $branchArr['city'];
-            $contact = $branchArr['contact'];
-            $is_main = $branchArr['is_main'];
-            $remarks = $branchArr['remarks'];
-            $status = $branchArr['status'];
-
-            $company = Company::find($company_id);
-            if ($company->branches()->count() == 0) {
-                $is_main = true;
-                $status = 1;
-            }
-
-            $branch = new Branch();
-            $branch->company_id = $company_id;
-            $branch->code = $code;
-            $branch->name = $name;
-            $branch->address = $address;
-            $branch->city = $city;
-            $branch->contact = $contact;
-            $branch->is_main = $is_main;
-            $branch->remarks = $remarks;
-            $branch->status = $status;
-            $branch->save();
-
-            DB::commit();
-
-            $this->flushCache();
-
-            return $branch;
-        } catch (Exception $e) {
-            DB::rollBack();
-            $this->loggerDebug(__METHOD__, $e);
-            throw $e;
-        } finally {
-            $execution_time = microtime(true) - $timer_start;
-            $this->loggerPerformance(__METHOD__, $execution_time);
-        }
-    }
-
     public function readAny(
+        bool $withTrashed,
         int $companyId,
-        string $search = '',
-        bool $paginate = true,
-        int $page = 1,
-        int $perPage = 10,
-        array $with = [],
-        bool $withTrashed = false,
-        bool $useCache = true
-    ): Paginator|Collection {
-        $timer_start = microtime(true);
-        $recordsCount = 0;
+        ?string $search,
+
+        ?bool $isMain,
+        ?int $status,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Branch::with(self::LIST_EAGER_LOADS)->select('branches.*')
+            ->whereCompanyId('branches', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $isMain, $status, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search, $isMain, $status) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
 
-        try {
-            $cacheSearch = empty($search) ? '[empty]' : $search;
-            $cacheKey = 'readAny_'.$companyId.'_'.$cacheSearch.'-'.$paginate.'-'.$page.'-'.$perPage;
-            if ($useCache) {
-                $cacheResult = $this->readFromCache($cacheKey);
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('branches.code', 'like', '%'.$search.'%')
+                            ->orWhere('branches.name', 'like', '%'.$search.'%')
+                            ->orWhere('branches.address', 'like', '%'.$search.'%')
+                            ->orWhere('branches.city', 'like', '%'.$search.'%')
+                            ->orWhere('branches.contact', 'like', '%'.$search.'%')
+                            ->orWhere('branches.remarks', 'like', '%'.$search.'%');
+                    });
+                }
 
-                if (! is_null($cacheResult)) {
-                    return $cacheResult;
+                if ($isMain !== null) {
+                    $query->where('branches.is_main', '=', $isMain);
                 }
-            }
 
-            $result = null;
+                if ($status !== null) {
+                    $query->where('branches.status', '=', $status);
+                }
+            });
 
-            if (! $companyId) {
-                return null;
+            if ($includeId) {
+                $query->orWhere('branches.id', $includeId);
             }
+        });
 
-            $relationship = ['company'];
-            $relationship = count($with) > 0 ? $with : $relationship;
-            $query = Branch::with($relationship);
-
-            $query = $query->whereCompanyId($companyId);
-
-            if (! empty($search)) {
-                $query = $query->where(function ($query) use ($search) {
-                    $query->where('name', 'like', '%'.$search.'%')
-                        ->orWhere('address', 'like', '%'.$search.'%')
-                        ->orWhere('city', 'like', '%'.$search.'%');
-                });
-            }
+        if ($includeId) {
+            $query->orderByRaw('FIELD(branches.id, '.$includeId.') desc');
+        }
+        $query->orderBy('branches.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    is_null($isMain) ? '[null]' : ($isMain ? 'true' : 'false'),
+                    $status ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) return $cacheData;
+                }
 
-            if ($withTrashed) {
-                $query = $query->withTrashed();
-            }
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
 
-            $query = $query->latest();
+                $recordsCount = $result->count();
 
-            if ($paginate) {
-                $perPage = is_numeric($perPage) ? abs($perPage) : Config::get('dcslab.PAGINATION_LIMIT');
-                $page = is_numeric($page) ? abs($page) : 1;
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
 
-                $result = $query->paginate(perPage: $perPage, page: $page);
-            } else {
-                $result = $query->get();
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
             }
-
-            $recordsCount = $result->count();
-
-            $this->saveToCache($cacheKey, $result);
-
-            return $result;
-        } catch (Exception $e) {
-            $this->loggerDebug(__METHOD__, $e);
-            throw $e;
-        } finally {
-            $execution_time = microtime(true) - $timer_start;
-            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
         }
+
+        return $query;
     }
 
     public function read(Branch $branch): Branch
     {
-        return $branch->load('company');
+        return $branch->load(self::LIST_EAGER_LOADS);
     }
 
-    public function getBranchByCompany(int $companyId = 0, ?Company $company = null): Collection
+    public function getById(int $branchId): Branch
     {
-        if (! is_null($company)) {
-            return $company->branches;
-        }
+        return Branch::find($branchId);
+    }
 
-        if ($companyId != 0) {
-            return Branch::where('company_id', '=', $companyId)->where('status', '=', 1)->get();
-        }
+    public function isMain(Branch $branch): bool
+    {
+        $result = $branch->is_main;
 
-        return null;
+        return is_null($result) ? false : $result;
     }
 
-    public function getMainBranchByCompany(int $companyId = 0, ?Company $company = null): Branch
+    public function create(BranchCreateDTO $data): Branch
     {
-        if (! is_null($company)) {
-            return $company->branches()->where('is_main', '=', true)->first();
-        }
+        $timer_start = microtime(true);
 
-        if ($companyId != 0) {
-            return Branch::where('company_id', '=', $companyId)->where('is_main', '=', true)->first();
-        }
+        try {
+            if ($data->isMain) {
+                $this->resetMainByCompany($data->companyId);
+            }
+
+            $branch = new Branch();
+            $branch->company_id = $data->companyId;
+            $branch->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $branch->name = $data->name;
+            $branch->address = $data->address;
+            $branch->city = $data->city;
+            $branch->contact = $data->contact;
+            $branch->is_main = $data->isMain;
+            $branch->remarks = $data->remarks;
+            $branch->status = $data->status;
 
-        return null;
+            $branch->save();
+
+            $this->flushCache();
+
+            return $branch;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
     }
 
     public function update(
-        Branch $branch,
-        array $branchArr,
-    ): Branch {
-        DB::beginTransaction();
+        Branch $branch, BranchUpdateDTO $data): Branch
+    {
         $timer_start = microtime(true);
 
         try {
-            $code = $branchArr['code'];
-            $name = $branchArr['name'];
-            $address = $branchArr['address'];
-            $city = $branchArr['city'];
-            $contact = $branchArr['contact'];
-            $is_main = $branchArr['is_main'];
-            $remarks = $branchArr['remarks'];
-            $status = $branchArr['status'];
-
-            $branch->update([
-                'code' => $code,
-                'name' => $name,
-                'address' => $address,
-                'city' => $city,
-                'contact' => $contact,
-                'is_main' => $is_main,
-                'remarks' => $remarks,
-                'status' => $status,
-            ]);
-
-            DB::commit();
+            if ($data->isMain) {
+                $this->resetMainByCompany($branch->company_id);
+                $branch->refresh();
+            }
+
+            $branch->code = $this->generateUniqueCode($branch->company_id, $data->code, $branch->id);
+            $branch->name = $data->name;
+            $branch->address = $data->address;
+            $branch->city = $data->city;
+            $branch->contact = $data->contact;
+            $branch->is_main = $data->isMain;
+            $branch->remarks = $data->remarks;
+            $branch->status = $data->status;
+
+            $branch->save();
 
             $this->flushCache();
 
-            return $branch->refresh();
+            return $branch;
         } catch (Exception $e) {
-            DB::rollBack();
             $this->loggerDebug(__METHOD__, $e);
             throw $e;
         } finally {
@@ -219,25 +220,15 @@ public function update(
         }
     }
 
-    public function resetMainBranch(int $companyId = 0, ?Company $company = null): bool
+    public function resetMainByCompany(int $companyId)
     {
-        DB::beginTransaction();
         $timer_start = microtime(true);
 
         try {
-            if ($companyId != 0) {
-                $retval = Branch::where('company_id', '=', $companyId)->update(['is_main' => false]);
-            } elseif (! is_null($company)) {
-                $retval = $company->branches()->update(['is_main' => false]);
-            } else {
-                $retval = 0;
-            }
-
-            DB::commit();
+            $company = Company::findOrFail($companyId);
 
-            return $retval;
+            return $company->branches()->update(['is_main' => false]);
         } catch (Exception $e) {
-            DB::rollBack();
             $this->loggerDebug(__METHOD__, $e);
             throw $e;
         } finally {
@@ -248,20 +239,16 @@ public function resetMainBranch(int $companyId = 0, ?Company $company = null): b
 
     public function delete(Branch $branch): bool
     {
-        DB::beginTransaction();
         $timer_start = microtime(true);
 
         $retval = false;
         try {
             $retval = $branch->delete();
 
-            DB::commit();
-
             $this->flushCache();
 
             return $retval;
         } catch (Exception $e) {
-            DB::rollBack();
             $this->loggerDebug(__METHOD__, $e);
             throw $e;
         } finally {
@@ -270,22 +257,47 @@ public function delete(Branch $branch): bool
         }
     }
 
-    public function generateUniqueCode(): string
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
     {
-        $rand = app(RandomizerActions::class);
-        $code = $rand->generateAlpha().$rand->generateNumeric();
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->branches()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'BC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
 
         return $code;
     }
 
-    public function isUniqueCode(string $code, int $companyId, ?int $exceptId = null): bool
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
     {
-        $result = Branch::whereCompanyId($companyId)->where('code', '=', $code);
+        $company = Company::find($companyId);
+
+        if ($company->branches()->count() == 0) return true;
+
+        $query = $company->branches()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('branches.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->branches()->count() == 0) return true;
 
+        $query = $company->branches()->where('name', '=', $name);
         if ($exceptId) {
-            $result = $result->where('id', '<>', $exceptId);
+            $query->where('branches.id', '<>', $exceptId);
         }
 
-        return $result->count() == 0 ? true : false;
+        return $query->doesntExist();
     }
 }
diff --git a/api/app/Actions/Brand/BrandActions.php b/api/app/Actions/Brand/BrandActions.php
new file mode 100644
index 000000000..9a6ae4067
--- /dev/null
+++ b/api/app/Actions/Brand/BrandActions.php
@@ -0,0 +1,241 @@
+<?php
+
+namespace App\Actions\Brand;
+
+use App\DTOs\BrandCreateDTO;
+use App\DTOs\BrandUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class BrandActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Brand::with(self::LIST_EAGER_LOADS)->select('brands.*')
+            ->whereCompanyId('brands', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('brands.code', 'like', '%'.$search.'%')
+                            ->orWhere('brands.name', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('brands.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(brands.id, '.$includeId.') desc');
+        }
+        $query->orderBy('brands.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Brand $brand): Brand
+    {
+        return $brand->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(BrandCreateDTO $data): Brand
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $brand = new Brand();
+            $brand->company_id = $data->companyId;
+            $brand->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $brand->name = $data->name;
+            $brand->save();
+
+            $this->flushCache();
+
+            return $brand;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Brand $brand, BrandUpdateDTO $data): Brand
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $brand->code = $this->generateUniqueCode($brand->company_id, $data->code, $brand->id);
+            $brand->name = $data->name;
+            $brand->save();
+
+            $this->flushCache();
+
+            return $brand->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(Brand $brand): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $brand->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->brands()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'BRD'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->brands()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->brands()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('brands.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->brands()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->brands()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('brands.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/CapitalOpening/CapitalOpeningActions.php b/api/app/Actions/CapitalOpening/CapitalOpeningActions.php
new file mode 100644
index 000000000..657c86f81
--- /dev/null
+++ b/api/app/Actions/CapitalOpening/CapitalOpeningActions.php
@@ -0,0 +1,386 @@
+<?php
+
+namespace App\Actions\CapitalOpening;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CapitalOpeningCreateDTO;
+use App\DTOs\CapitalOpeningUpdateDTO;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\CapitalOpening;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class CapitalOpeningActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'investor',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private CashTransactionActions $cashTransactionActions,
+        private JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+
+        ?string $search,
+        ?int $investorId,
+        ?int $cashAccountId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = CapitalOpening::select('capital_openings.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'capital_openings.company_id')
+            ->whereCompanyId('capital_openings', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $branchId, $investorId, $cashAccountId) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('capital_openings.code', 'like', '%'.$search.'%')
+                        ->orWhere('capital_openings.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($branchId) {
+                $query->where('capital_openings.branch_id', $branchId);
+            }
+
+            if ($investorId) {
+                $query->where('capital_openings.investor_id', $investorId);
+            }
+
+            if ($cashAccountId) {
+                $query->where('capital_openings.cash_account_id', $cashAccountId);
+            }
+        });
+
+        $query->orderBy('companies.name', 'asc')
+            ->orderBy('capital_openings.date', 'desc')
+            ->orderBy('capital_openings.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $branchId ?? '[null]',
+                    $investorId ?? '[null]',
+                    $cashAccountId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_capital_opening_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(CapitalOpening $capitalOpening): CapitalOpening
+    {
+        return $capitalOpening->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function create(CapitalOpeningCreateDTO $data): CapitalOpening
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $capitalOpening = new CapitalOpening();
+            $capitalOpening->company_id = $data->companyId;
+            $capitalOpening->branch_id = $data->branchId;
+            $capitalOpening->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $capitalOpening->date = $this->generateDate($data->date);
+            $capitalOpening->investor_id = $data->investorId;
+            $capitalOpening->cash_account_id = $data->cashAccountId;
+            $capitalOpening->amount = $data->amount;
+            $capitalOpening->remarks = $data->remarks;
+            $capitalOpening->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromCapitalOpening($capitalOpening)
+            );
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $capitalOpening->company_id,
+                branchId: $capitalOpening->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $capitalOpening->date,
+                journalType: null,
+                sourceType: CapitalOpening::class,
+                sourceId: $capitalOpening->id,
+                referenceNo: $capitalOpening->code,
+                remarks: $capitalOpening->remarks,
+                items: (function () use ($capitalOpening) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $capitalOpening->cashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $capitalOpening->amount,
+                        credit: 0,
+                        remarks: $capitalOpening->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $capitalOpening->investor?->openingCapitalChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $capitalOpening->amount,
+                        remarks: $capitalOpening->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            $this->flushCache();
+
+            return $capitalOpening;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(CapitalOpening $capitalOpening, CapitalOpeningUpdateDTO $data): CapitalOpening
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $capitalOpening->code = $this->generateUniqueCode($capitalOpening->company_id, $data->code, $capitalOpening->id);
+            $capitalOpening->date = $this->generateDate($data->date);
+            $capitalOpening->investor_id = $data->investorId;
+            $capitalOpening->cash_account_id = $data->cashAccountId;
+            $capitalOpening->amount = $data->amount;
+            $capitalOpening->remarks = $data->remarks;
+            $capitalOpening->save();
+
+            $cashTransaction = $capitalOpening->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromCapitalOpening($capitalOpening)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromCapitalOpening($capitalOpening)
+                );
+            }
+
+            $journalEntry = $capitalOpening->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $capitalOpening->company_id,
+                    branchId: $capitalOpening->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $capitalOpening->date,
+                    journalType: null,
+                    sourceType: CapitalOpening::class,
+                    sourceId: $capitalOpening->id,
+                    referenceNo: $capitalOpening->code,
+                    remarks: $capitalOpening->remarks,
+                    items: (function () use ($capitalOpening) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $capitalOpening->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $capitalOpening->amount,
+                            credit: 0,
+                            remarks: $capitalOpening->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $capitalOpening->investor?->openingCapitalChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $capitalOpening->amount,
+                            remarks: $capitalOpening->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $capitalOpening->branch_id,
+                    code: $journalEntry->code,
+                    date: $capitalOpening->date,
+                    journalType: null,
+                    referenceNo: $capitalOpening->code,
+                    remarks: $capitalOpening->remarks,
+                    items: (function () use ($capitalOpening) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $capitalOpening->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $capitalOpening->amount,
+                            credit: 0,
+                            remarks: $capitalOpening->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $capitalOpening->investor?->openingCapitalChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $capitalOpening->amount,
+                            remarks: $capitalOpening->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            $this->flushCache();
+
+            return $capitalOpening->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(CapitalOpening $capitalOpening): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $capitalOpening->cashTransaction;
+            if ($cashTransaction) $this->cashTransactionActions->delete($cashTransaction);
+
+            $journalEntry = $capitalOpening->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $capitalOpening->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = CapitalOpening::whereCompanyId('capital_openings', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'CO'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        } else {
+            return $code;
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = CapitalOpening::whereCompanyId('capital_openings', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0 ? true : false;
+    }
+}
diff --git a/api/app/Actions/CapitalTransaction/CapitalTransactionActions.php b/api/app/Actions/CapitalTransaction/CapitalTransactionActions.php
new file mode 100644
index 000000000..33f9999dc
--- /dev/null
+++ b/api/app/Actions/CapitalTransaction/CapitalTransactionActions.php
@@ -0,0 +1,498 @@
+<?php
+
+namespace App\Actions\CapitalTransaction;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CapitalTransactionCreateDTO;
+use App\DTOs\CapitalTransactionUpdateDTO;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Enums\CapitalTransactionTypeEnum;
+use App\Models\CapitalTransaction;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class CapitalTransactionActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'investor',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private CashTransactionActions $cashTransactionActions,
+        private JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+
+        ?string $search,
+        ?int $investorId,
+        ?int $cashAccountId,
+        ?string $type,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = CapitalTransaction::select('capital_transactions.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'capital_transactions.company_id')
+            ->whereCompanyId('capital_transactions', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $branchId, $investorId, $cashAccountId, $type) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('capital_transactions.code', 'like', '%'.$search.'%')
+                        ->orWhere('capital_transactions.type', 'like', '%'.$search.'%')
+                        ->orWhere('capital_transactions.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($branchId) {
+                $query->where('capital_transactions.branch_id', $branchId);
+            }
+
+            if ($investorId) {
+                $query->where('capital_transactions.investor_id', $investorId);
+            }
+
+            if ($cashAccountId) {
+                $query->where('capital_transactions.cash_account_id', $cashAccountId);
+            }
+
+            if ($type) {
+                $query->where('capital_transactions.type', $type);
+            }
+        });
+
+        $query->orderBy('companies.name', 'asc')
+            ->orderBy('capital_transactions.date', 'desc')
+            ->orderBy('capital_transactions.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $branchId ?? '[null]',
+                    $investorId ?? '[null]',
+                    $cashAccountId ?? '[null]',
+                    $type ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_capital_transaction_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function getTypes(): array
+    {
+        return [
+            ['name' => 'views.capital_transaction.types.in', 'code' => CapitalTransactionTypeEnum::IN->value],
+            ['name' => 'views.capital_transaction.types.out', 'code' => CapitalTransactionTypeEnum::OUT->value],
+        ];
+    }
+
+    public function read(CapitalTransaction $capitalTransaction): CapitalTransaction
+    {
+        return $capitalTransaction->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(CapitalTransactionCreateDTO $data): CapitalTransaction
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $capitalTransaction = new CapitalTransaction();
+            $capitalTransaction->company_id = $data->companyId;
+            $capitalTransaction->branch_id = $data->branchId;
+            $capitalTransaction->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $capitalTransaction->date = $data->date;
+            $capitalTransaction->investor_id = $data->investorId;
+            $capitalTransaction->cash_account_id = $data->cashAccountId;
+            $capitalTransaction->type = $data->type;
+            $capitalTransaction->amount = $data->amount;
+            $capitalTransaction->remarks = $data->remarks;
+            $capitalTransaction->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromCapitalTransaction($capitalTransaction)
+            );
+
+            $type = $capitalTransaction->type instanceof CapitalTransactionTypeEnum
+                ? $capitalTransaction->type
+                : CapitalTransactionTypeEnum::resolveToEnum($capitalTransaction->type);
+
+            if ($type === CapitalTransactionTypeEnum::IN) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $capitalTransaction->company_id,
+                    branchId: $capitalTransaction->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $capitalTransaction->date,
+                    sourceType: CapitalTransaction::class,
+                    sourceId: $capitalTransaction->id,
+                    referenceNo: $capitalTransaction->code,
+                    remarks: $capitalTransaction->remarks,
+                    items: (function () use ($capitalTransaction) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $capitalTransaction->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $capitalTransaction->amount,
+                            credit: 0,
+                            remarks: $capitalTransaction->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $capitalTransaction->investor?->additionalCapitalChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $capitalTransaction->amount,
+                            remarks: $capitalTransaction->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+            } else {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $capitalTransaction->company_id,
+                    branchId: $capitalTransaction->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $capitalTransaction->date,
+                    sourceType: CapitalTransaction::class,
+                    sourceId: $capitalTransaction->id,
+                    referenceNo: $capitalTransaction->code,
+                    remarks: $capitalTransaction->remarks,
+                    items: (function () use ($capitalTransaction) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $capitalTransaction->investor?->drawingChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $capitalTransaction->amount,
+                            credit: 0,
+                            remarks: $capitalTransaction->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $capitalTransaction->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $capitalTransaction->amount,
+                            remarks: $capitalTransaction->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+            }
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            $this->flushCache();
+
+            return $capitalTransaction;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(CapitalTransaction $capitalTransaction, CapitalTransactionUpdateDTO $data): CapitalTransaction
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $capitalTransaction->code = $this->generateUniqueCode($capitalTransaction->company_id, $data->code, $capitalTransaction->id);
+            $capitalTransaction->date = $data->date;
+            $capitalTransaction->investor_id = $data->investorId;
+            $capitalTransaction->cash_account_id = $data->cashAccountId;
+            $capitalTransaction->type = $data->type;
+            $capitalTransaction->amount = $data->amount;
+            $capitalTransaction->remarks = $data->remarks;
+            $capitalTransaction->save();
+
+            $cashTransaction = $capitalTransaction->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromCapitalTransaction($capitalTransaction)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromCapitalTransaction($capitalTransaction)
+                );
+            }
+
+            $type = $capitalTransaction->type instanceof CapitalTransactionTypeEnum
+                ? $capitalTransaction->type
+                : CapitalTransactionTypeEnum::resolveToEnum($capitalTransaction->type);
+
+            $journalEntry = $capitalTransaction->journalEntry;
+            if ($type === CapitalTransactionTypeEnum::IN) {
+                if (! $journalEntry) {
+                    $journalEntryDTO = new JournalEntryCreateDTO(
+                        companyId: $capitalTransaction->company_id,
+                        branchId: $capitalTransaction->branch_id,
+                        code: config('dcslab.KEYWORDS.AUTO'),
+                        date: $capitalTransaction->date,
+                        sourceType: CapitalTransaction::class,
+                        sourceId: $capitalTransaction->id,
+                        referenceNo: $capitalTransaction->code,
+                        remarks: $capitalTransaction->remarks,
+                        items: (function () use ($capitalTransaction) {
+                            $items = [];
+
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $capitalTransaction->cashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $capitalTransaction->amount,
+                                credit: 0,
+                                remarks: $capitalTransaction->remarks,
+                            );
+
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $capitalTransaction->investor?->additionalCapitalChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $capitalTransaction->amount,
+                                remarks: $capitalTransaction->remarks,
+                            );
+
+                            return $items;
+                        })(),
+                    );
+                    $this->journalEntryActions->create($journalEntryDTO);
+                } else {
+                    $journalEntryDTO = new JournalEntryUpdateDTO(
+                        branchId: $capitalTransaction->branch_id,
+                        code: $journalEntry->code,
+                        date: $capitalTransaction->date,
+                        referenceNo: $capitalTransaction->code,
+                        remarks: $capitalTransaction->remarks,
+                        items: (function () use ($capitalTransaction) {
+                            $items = [];
+
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $capitalTransaction->cashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $capitalTransaction->amount,
+                                credit: 0,
+                                remarks: $capitalTransaction->remarks,
+                            );
+
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $capitalTransaction->investor?->additionalCapitalChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $capitalTransaction->amount,
+                                remarks: $capitalTransaction->remarks,
+                            );
+
+                            return $items;
+                        })(),
+                    );
+                    $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+                }
+            } else {
+                if (! $journalEntry) {
+                    $journalEntryDTO = new JournalEntryCreateDTO(
+                        companyId: $capitalTransaction->company_id,
+                        branchId: $capitalTransaction->branch_id,
+                        code: config('dcslab.KEYWORDS.AUTO'),
+                        date: $capitalTransaction->date,
+                        sourceType: CapitalTransaction::class,
+                        sourceId: $capitalTransaction->id,
+                        referenceNo: $capitalTransaction->code,
+                        remarks: $capitalTransaction->remarks,
+                        items: (function () use ($capitalTransaction) {
+                            $items = [];
+
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $capitalTransaction->investor?->drawingChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $capitalTransaction->amount,
+                                credit: 0,
+                                remarks: $capitalTransaction->remarks,
+                            );
+
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $capitalTransaction->cashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $capitalTransaction->amount,
+                                remarks: $capitalTransaction->remarks,
+                            );
+
+                            return $items;
+                        })(),
+                    );
+                    $this->journalEntryActions->create($journalEntryDTO);
+                } else {
+                    $journalEntryDTO = new JournalEntryUpdateDTO(
+                        branchId: $capitalTransaction->branch_id,
+                        code: $journalEntry->code,
+                        date: $capitalTransaction->date,
+                        referenceNo: $capitalTransaction->code,
+                        remarks: $capitalTransaction->remarks,
+                        items: (function () use ($capitalTransaction) {
+                            $items = [];
+
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $capitalTransaction->investor?->drawingChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $capitalTransaction->amount,
+                                credit: 0,
+                                remarks: $capitalTransaction->remarks,
+                            );
+
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $capitalTransaction->cashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $capitalTransaction->amount,
+                                remarks: $capitalTransaction->remarks,
+                            );
+
+                            return $items;
+                        })(),
+                    );
+                    $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+                }
+            }
+
+            $this->flushCache();
+
+            return $capitalTransaction->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(CapitalTransaction $capitalTransaction): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $capitalTransaction->cashTransaction;
+            if ($cashTransaction) $this->cashTransactionActions->delete($cashTransaction);
+
+            $journalEntry = $capitalTransaction->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $capitalTransaction->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = CapitalTransaction::whereCompanyId('capital_transactions', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'CT'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        } else {
+            return $code;
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = CapitalTransaction::whereCompanyId('capital_transactions', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0 ? true : false;
+    }
+}
diff --git a/api/app/Actions/CashAccount/CashAccountActions.php b/api/app/Actions/CashAccount/CashAccountActions.php
new file mode 100644
index 000000000..0997236f5
--- /dev/null
+++ b/api/app/Actions/CashAccount/CashAccountActions.php
@@ -0,0 +1,351 @@
+<?php
+
+namespace App\Actions\CashAccount;
+
+use App\Actions\ChartOfAccount\ChartOfAccountActions;
+use App\DTOs\CashAccountCreateDTO;
+use App\DTOs\CashAccountUpdateDTO;
+use App\DTOs\CashAccountWithRemainingBalanceDTO;
+use App\DTOs\ChartOfAccountCreateDTO;
+use App\DTOs\ChartOfAccountUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+use InvalidArgumentException;
+
+class CashAccountActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+    ];
+
+    public function __construct(
+        private readonly ChartOfAccountActions $chartOfAccountActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?bool $isBank,
+        ?CashAccountWithRemainingBalanceDTO $withRemainingBalance,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = CashAccount::with(self::LIST_EAGER_LOADS)->select('cash_accounts.*')
+            ->whereCompanyId('cash_accounts', $companyId)
+            ->withTrashed();
+
+        if ($branchId) {
+            $query->where('cash_accounts.branch_id', $branchId);
+        }
+
+        if ($withRemainingBalance) {
+            $endDate = $withRemainingBalance->endDate ? TimezoneHelper::convertToUTC($withRemainingBalance->endDate) : null;
+
+            $query->withRemainingBalance(
+                endDate: $endDate
+            );
+        }
+
+        $query->where(function ($query) use ($withTrashed, $search, $includeId, $isBank) {
+            $query->where(function ($query) use ($withTrashed, $search, $isBank) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('cash_accounts.code', 'like', '%'.$search.'%')
+                            ->orWhere('cash_accounts.name', 'like', '%'.$search.'%')
+                            ->orWhere('cash_accounts.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($isBank)) {
+                    $query->where('cash_accounts.is_bank', $isBank);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('cash_accounts.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(cash_accounts.id, '.$includeId.') desc');
+        }
+
+        $query->orderBy('cash_accounts.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    empty($search) ? '[empty]' : $search,
+                    $companyId,
+                    $branchId ?? '[null]',
+                    is_null($isBank) ? '[null]' : ($isBank ? 'true' : 'false'),
+                    $withRemainingBalance?->endDate ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(CashAccount $cashAccount): CashAccount
+    {
+        return $cashAccount->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(CashAccountCreateDTO $data): CashAccount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $cashAccount = new CashAccount();
+            $cashAccount->company_id = $data->companyId;
+            $cashAccount->branch_id = $data->branchId;
+            $cashAccount->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $cashAccount->name = $data->name;
+            $cashAccount->is_bank = $data->isBank;
+            $cashAccount->is_active = $data->isActive;
+            $cashAccount->remarks = $data->remarks;
+            $cashAccount->save();
+
+            $parentChartOfAccount = (function () use ($cashAccount) {
+                if ($cashAccount->is_bank) {
+                    return $cashAccount->company->assetCurrentBankChartOfAccount;
+                }
+
+                return $cashAccount->company->assetCurrentCashChartOfAccount;
+            })();
+            if (! $parentChartOfAccount) {
+                throw new InvalidArgumentException('Cash account chart of account parent must exist in company.');
+            }
+
+            $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                companyId: $cashAccount->company_id,
+                scope: 'user',
+                systemKey: null,
+                parentId: $parentChartOfAccount->id,
+                sourceType: CashAccount::class,
+                sourceId: $cashAccount->id,
+                code: $parentChartOfAccount->code.'.'.$cashAccount->code,
+                name: $cashAccount->name,
+                normalBalance: 'debit',
+                isGroup: false,
+                isActive: $cashAccount->is_active,
+                remarks: $cashAccount->remarks,
+            );
+            $this->chartOfAccountActions->create($chartOfAccountDTO);
+
+            $this->flushCache();
+
+            return $cashAccount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(CashAccount $cashAccount, CashAccountUpdateDTO $data): CashAccount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $cashAccount->code = $this->generateUniqueCode($cashAccount->company_id, $data->code, $cashAccount->id);
+            $cashAccount->name = $data->name;
+            $cashAccount->is_bank = $data->isBank;
+            $cashAccount->is_active = $data->isActive;
+            $cashAccount->remarks = $data->remarks;
+            $cashAccount->save();
+
+            $parentChartOfAccount = (function () use ($cashAccount) {
+                if ($cashAccount->is_bank) {
+                    return $cashAccount->company->assetCurrentBankChartOfAccount;
+                }
+
+                return $cashAccount->company->assetCurrentCashChartOfAccount;
+            })();
+            if (! $parentChartOfAccount) {
+                throw new InvalidArgumentException('Cash account chart of account parent must exist in company.');
+            }
+
+            $chartOfAccount = $cashAccount->chartOfAccount;
+            if ($chartOfAccount) {
+                $chartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $parentChartOfAccount->id,
+                    code: $parentChartOfAccount->code.'.'.$cashAccount->code,
+                    name: $cashAccount->name,
+                    normalBalance: 'debit',
+                    isGroup: false,
+                    isActive: $cashAccount->is_active,
+                    remarks: $cashAccount->remarks,
+                );
+                $this->chartOfAccountActions->update($chartOfAccount, $chartOfAccountDTO);
+            } else {
+                $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                    companyId: $cashAccount->company_id,
+                    scope: 'user',
+                    systemKey: null,
+                    parentId: $parentChartOfAccount->id,
+                    sourceType: CashAccount::class,
+                    sourceId: $cashAccount->id,
+                    code: $parentChartOfAccount->code.'.'.$cashAccount->code,
+                    name: $cashAccount->name,
+                    normalBalance: 'debit',
+                    isGroup: false,
+                    isActive: $cashAccount->is_active,
+                    remarks: $cashAccount->remarks,
+                );
+                $this->chartOfAccountActions->create($chartOfAccountDTO);
+            }
+
+            $this->flushCache();
+
+            return $cashAccount->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(CashAccount $cashAccount): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $chartOfAccount = $cashAccount->chartOfAccount;
+            if ($chartOfAccount) $this->chartOfAccountActions->delete($chartOfAccount);
+
+            $retval = $cashAccount->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->cashAccounts()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'CAC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->cashAccounts()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->cashAccounts()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('cash_accounts.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->cashAccounts()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->cashAccounts()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('cash_accounts.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/CashTransaction/CashTransactionActions.php b/api/app/Actions/CashTransaction/CashTransactionActions.php
new file mode 100644
index 000000000..dabc04bac
--- /dev/null
+++ b/api/app/Actions/CashTransaction/CashTransactionActions.php
@@ -0,0 +1,184 @@
+<?php
+
+namespace App\Actions\CashTransaction;
+
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\CashTransaction;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class CashTransactionActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'cashAccount',
+        'referable',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        ?string $referableType,
+        ?int $referableId,
+        ?int $cashAccountId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = CashTransaction::select('cash_transactions.*')
+            ->with(self::LIST_EAGER_LOADS);
+
+        $query->where(function ($query) use ($referableType, $referableId, $cashAccountId) {
+            if ($referableType) {
+                $query->where('cash_transactions.referable_type', $referableType);
+            }
+
+            if ($referableId) {
+                $query->where('cash_transactions.referable_id', $referableId);
+            }
+
+            if ($cashAccountId) {
+                $query->where('cash_transactions.cash_account_id', $cashAccountId);
+            }
+        });
+
+        $query->orderBy('cash_transactions.date', 'desc')
+            ->orderBy('cash_transactions.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $referableType ?? '[null]',
+                    $referableId ?? '[null]',
+                    $cashAccountId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_cash_transaction_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(CashTransaction $cashTransaction): CashTransaction
+    {
+        return $cashTransaction->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(CashTransactionCreateDTO $data): CashTransaction
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $cashTransaction = new CashTransaction();
+            $cashTransaction->referable_type = $data->referableType;
+            $cashTransaction->referable_id = $data->referableId;
+            $cashTransaction->date = $data->date;
+            $cashTransaction->cash_account_id = $data->cashAccountId;
+            $cashTransaction->amount = $data->amount;
+            $cashTransaction->save();
+
+            $this->flushCache();
+
+            return $cashTransaction;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(CashTransaction $cashTransaction, CashTransactionUpdateDTO $data): CashTransaction
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $cashTransaction->referable_type = $data->referableType;
+            $cashTransaction->referable_id = $data->referableId;
+            $cashTransaction->date = $data->date;
+            $cashTransaction->cash_account_id = $data->cashAccountId;
+            $cashTransaction->amount = $data->amount;
+            $cashTransaction->save();
+
+            $this->flushCache();
+
+            return $cashTransaction;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(CashTransaction $cashTransaction): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $cashTransaction->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/CashTransfer/CashTransferActions.php b/api/app/Actions/CashTransfer/CashTransferActions.php
new file mode 100644
index 000000000..f5f18cccf
--- /dev/null
+++ b/api/app/Actions/CashTransfer/CashTransferActions.php
@@ -0,0 +1,373 @@
+<?php
+
+namespace App\Actions\CashTransfer;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\CashTransferCreateDTO;
+use App\DTOs\CashTransferUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Models\CashTransfer;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class CashTransferActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'sourceCashAccount',
+        'destinationCashAccount',
+    ];
+
+    public function __construct(
+        private CashTransactionActions $cashTransactionActions,
+        private JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?ExecuteDTO $execute
+    ) {
+        $query = CashTransfer::select('cash_transfers.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'cash_transfers.company_id')
+            ->whereCompanyId('cash_transfers', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $branchId) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('cash_transfers.code', 'like', '%'.$search.'%')
+                        ->orWhere('cash_transfers.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($branchId) {
+                $query->where('cash_transfers.branch_id', $branchId);
+            }
+        });
+
+        $query->orderBy('companies.name', 'asc')
+            ->orderBy('cash_transfers.date', 'desc')
+            ->orderBy('cash_transfers.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $branchId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_cash_transfer_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(CashTransfer $cashTransfer): CashTransfer
+    {
+        return $cashTransfer->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(CashTransferCreateDTO $data): CashTransfer
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $cashTransfer = new CashTransfer();
+            $cashTransfer->company_id = $data->companyId;
+            $cashTransfer->branch_id = $data->branchId;
+            $cashTransfer->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $cashTransfer->date = $data->date;
+            $cashTransfer->source_cash_account_id = $data->sourceCashAccountId;
+            $cashTransfer->destination_cash_account_id = $data->destinationCashAccountId;
+            $cashTransfer->amount = $data->amount;
+            $cashTransfer->remarks = $data->remarks;
+            $cashTransfer->save();
+
+            $dto = CashTransactionCreateDTO::fromCashTransferSource($cashTransfer);
+            $this->cashTransactionActions->create($dto);
+
+            $dto = CashTransactionCreateDTO::fromCashTransferDestination($cashTransfer);
+            $this->cashTransactionActions->create($dto);
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $cashTransfer->company_id,
+                branchId: $cashTransfer->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $cashTransfer->date,
+                sourceType: CashTransfer::class,
+                sourceId: $cashTransfer->id,
+                referenceNo: $cashTransfer->code,
+                remarks: $cashTransfer->remarks,
+                items: (function () use ($cashTransfer) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $cashTransfer->destinationCashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $cashTransfer->amount,
+                        credit: 0,
+                        remarks: $cashTransfer->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $cashTransfer->sourceCashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $cashTransfer->amount,
+                        remarks: $cashTransfer->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            $this->flushCache();
+
+            return $cashTransfer;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(CashTransfer $cashTransfer, CashTransferUpdateDTO $data): CashTransfer
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $cashTransactionSource = $cashTransfer->sourceCashTransaction;
+            $cashTransactionDestination = $cashTransfer->destinationCashTransaction;
+
+            $cashTransfer->code = $this->generateUniqueCode($cashTransfer->company_id, $data->code, $cashTransfer->id);
+            $cashTransfer->date = $data->date;
+            $cashTransfer->source_cash_account_id = $data->sourceCashAccountId;
+            $cashTransfer->destination_cash_account_id = $data->destinationCashAccountId;
+            $cashTransfer->amount = $data->amount;
+            $cashTransfer->remarks = $data->remarks;
+            $cashTransfer->save();
+
+            if (! $cashTransactionSource) {
+                $dto = CashTransactionCreateDTO::fromCashTransferSource($cashTransfer);
+                $this->cashTransactionActions->create($dto);
+            } else {
+                $dto = CashTransactionUpdateDTO::fromCashTransferSource($cashTransfer);
+                $this->cashTransactionActions->update($cashTransactionSource, $dto);
+            }
+
+            if (! $cashTransactionDestination) {
+                $dto = CashTransactionCreateDTO::fromCashTransferDestination($cashTransfer);
+                $this->cashTransactionActions->create($dto);
+            } else {
+                $dto = CashTransactionUpdateDTO::fromCashTransferDestination($cashTransfer);
+                $this->cashTransactionActions->update($cashTransactionDestination, $dto);
+            }
+
+            $journalEntry = $cashTransfer->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $cashTransfer->company_id,
+                    branchId: $cashTransfer->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $cashTransfer->date,
+                    sourceType: CashTransfer::class,
+                    sourceId: $cashTransfer->id,
+                    referenceNo: $cashTransfer->code,
+                    remarks: $cashTransfer->remarks,
+                    items: (function () use ($cashTransfer) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $cashTransfer->destinationCashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $cashTransfer->amount,
+                            credit: 0,
+                            remarks: $cashTransfer->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $cashTransfer->sourceCashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $cashTransfer->amount,
+                            remarks: $cashTransfer->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $cashTransfer->branch_id,
+                    code: $journalEntry->code,
+                    date: $cashTransfer->date,
+                    referenceNo: $cashTransfer->code,
+                    remarks: $cashTransfer->remarks,
+                    items: (function () use ($cashTransfer) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $cashTransfer->destinationCashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $cashTransfer->amount,
+                            credit: 0,
+                            remarks: $cashTransfer->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $cashTransfer->sourceCashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $cashTransfer->amount,
+                            remarks: $cashTransfer->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            $this->flushCache();
+
+            return $cashTransfer->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(CashTransfer $cashTransfer): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransactionSource = $cashTransfer->sourceCashTransaction;
+            if ($cashTransactionSource) {
+                $this->cashTransactionActions->delete($cashTransactionSource);
+            }
+
+            $cashTransactionDestination = $cashTransfer->destinationCashTransaction;
+            if ($cashTransactionDestination) {
+                $this->cashTransactionActions->delete($cashTransactionDestination);
+            }
+
+            $journalEntry = $cashTransfer->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $cashTransfer->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = CashTransfer::whereCompanyId('cash_transfers', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'CT'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = CashTransfer::whereCompanyId('cash_transfers', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0 ? true : false;
+    }
+}
diff --git a/api/app/Actions/ChartOfAccount/ChartOfAccountActions.php b/api/app/Actions/ChartOfAccount/ChartOfAccountActions.php
new file mode 100644
index 000000000..847cff39c
--- /dev/null
+++ b/api/app/Actions/ChartOfAccount/ChartOfAccountActions.php
@@ -0,0 +1,336 @@
+<?php
+
+namespace App\Actions\ChartOfAccount;
+
+use App\DTOs\ChartOfAccountCreateDTO;
+use App\DTOs\ChartOfAccountUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\ChartOfAccount;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ChartOfAccountActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const PAGINATED_LIST_EAGER_LOADS = [
+        'company',
+        'parent',
+    ];
+
+    private const TREE_LIST_EAGER_LOADS = [
+        'company',
+        'parent',
+        'childrenRecursive',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $parentId,
+        ?bool $hasParent,
+        ?bool $hasChildren,
+        ?string $scope,
+        ?string $systemKey,
+        ?string $accountType,
+        ?string $normalBalance,
+        ?bool $isGroup,
+        ?bool $isActive,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $eagerLoads = $execute?->pagination
+            ? self::PAGINATED_LIST_EAGER_LOADS
+            : self::TREE_LIST_EAGER_LOADS;
+
+        $query = ChartOfAccount::with($eagerLoads)
+            ->select('chart_of_accounts.*')
+            ->whereCompanyId('chart_of_accounts', $companyId);
+
+        $query->where(function ($query) use (
+            $search,
+            $parentId,
+            $hasParent,
+            $hasChildren,
+            $scope,
+            $systemKey,
+            $accountType,
+            $normalBalance,
+            $isGroup,
+            $isActive,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $search,
+                $parentId,
+                $hasParent,
+                $hasChildren,
+                $scope,
+                $systemKey,
+                $accountType,
+                $normalBalance,
+                $isGroup,
+                $isActive,
+            ) {
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('chart_of_accounts.code', 'like', '%'.$search.'%')
+                            ->orWhere('chart_of_accounts.name', 'like', '%'.$search.'%')
+                            ->orWhere('chart_of_accounts.system_key', 'like', '%'.$search.'%')
+                            ->orWhere('chart_of_accounts.source_type', 'like', '%'.$search.'%')
+                            ->orWhere('chart_of_accounts.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if ($parentId) {
+                    $query->where('chart_of_accounts.parent_id', $parentId);
+                }
+
+                if (! is_null($hasParent)) {
+                    if ($hasParent) {
+                        $query->whereNotNull('chart_of_accounts.parent_id');
+                    } else {
+                        $query->whereNull('chart_of_accounts.parent_id');
+                    }
+                }
+
+                if (! is_null($hasChildren)) {
+                    $hasChildren
+                        ? $query->whereHas('children')
+                        : $query->whereDoesntHave('children');
+                }
+
+                if (! is_null($scope)) {
+                    $query->where('chart_of_accounts.scope', $scope);
+                }
+
+                if (! is_null($systemKey)) {
+                    $query->where('chart_of_accounts.system_key', $systemKey);
+                }
+
+                if (! is_null($accountType)) {
+                    $query->where('chart_of_accounts.account_type', $accountType);
+                }
+
+                if (! is_null($normalBalance)) {
+                    $query->where('chart_of_accounts.normal_balance', $normalBalance);
+                }
+
+                if (! is_null($isGroup)) {
+                    $query->where('chart_of_accounts.is_group', $isGroup);
+                }
+
+                if (! is_null($isActive)) {
+                    $query->where('chart_of_accounts.is_active', $isActive);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('chart_of_accounts.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(chart_of_accounts.id, '.$includeId.') desc');
+        }
+        $query->orderBy('chart_of_accounts.code', 'asc')
+            ->orderBy('chart_of_accounts.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $parentId ?? '[null]',
+                    is_null($hasParent) ? '[null]' : ($hasParent ? 'true' : 'false'),
+                    is_null($hasChildren) ? '[null]' : ($hasChildren ? 'true' : 'false'),
+                    $scope ?? '[null]',
+                    $systemKey ?? '[null]',
+                    $accountType ?? '[null]',
+                    $normalBalance ?? '[null]',
+                    is_null($isGroup) ? '[null]' : ($isGroup ? 'true' : 'false'),
+                    is_null($isActive) ? '[null]' : ($isActive ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_chart_of_account_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(ChartOfAccount $chartOfAccount): ChartOfAccount
+    {
+        return $chartOfAccount->load(self::TREE_LIST_EAGER_LOADS);
+    }
+
+    public function hasChildren(ChartOfAccount $chartOfAccount): bool
+    {
+        return $chartOfAccount->children()->exists();
+    }
+
+    public function create(ChartOfAccountCreateDTO $data): ChartOfAccount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $parent = $data->parentId ? ChartOfAccount::query()->find($data->parentId) : null;
+
+            $chartOfAccount = new ChartOfAccount();
+            $chartOfAccount->company_id = $data->companyId;
+            $chartOfAccount->scope = $data->scope;
+            $chartOfAccount->system_key = $data->systemKey;
+            $chartOfAccount->parent_id = $data->parentId;
+            $chartOfAccount->source_type = $data->sourceType;
+            $chartOfAccount->source_id = $data->sourceId;
+            $chartOfAccount->code = $data->code;
+            $chartOfAccount->name = $data->name;
+            $chartOfAccount->account_type = $parent?->account_type;
+            $chartOfAccount->normal_balance = $data->normalBalance;
+            $chartOfAccount->level = $parent ? $parent->level + 1 : 1;
+            $chartOfAccount->is_group = $data->isGroup;
+            $chartOfAccount->is_active = $data->isActive;
+            $chartOfAccount->remarks = $data->remarks;
+            $chartOfAccount->save();
+
+            $this->flushCache();
+
+            return $chartOfAccount->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(ChartOfAccount $chartOfAccount, ChartOfAccountUpdateDTO $data): ChartOfAccount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $parent = $data->parentId ? ChartOfAccount::find($data->parentId) : null;
+
+            $chartOfAccount->parent_id = $data->parentId;
+            $chartOfAccount->code = $data->code;
+            $chartOfAccount->name = $data->name;
+            $chartOfAccount->account_type = $parent?->account_type ?? $chartOfAccount->account_type;
+            $chartOfAccount->normal_balance = $data->normalBalance;
+            $chartOfAccount->level = $parent ? $parent->level + 1 : 1;
+            $chartOfAccount->is_group = $data->isGroup;
+            $chartOfAccount->is_active = $data->isActive;
+            $chartOfAccount->remarks = $data->remarks;
+            $chartOfAccount->save();
+
+            $this->flushCache();
+
+            return $chartOfAccount->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(ChartOfAccount $chartOfAccount): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $chartOfAccount->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $query = ChartOfAccount::where('company_id', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $query->where('chart_of_accounts.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $query = ChartOfAccount::where('company_id', $companyId)
+            ->where('name', '=', $name);
+
+        if ($exceptId) {
+            $query->where('chart_of_accounts.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/Company/CompanyActions.php b/api/app/Actions/Company/CompanyActions.php
index 143ebb662..e479cd417 100644
--- a/api/app/Actions/Company/CompanyActions.php
+++ b/api/app/Actions/Company/CompanyActions.php
@@ -2,221 +2,208 @@
 
 namespace App\Actions\Company;
 
-use App\Actions\Randomizer\RandomizerActions;
-use App\Enums\RecordStatus;
+use App\DTOs\CompanyCreateDTO;
+use App\DTOs\CompanyUpdateDTO;
+use App\DTOs\ExecuteDTO;
 use App\Models\Company;
 use App\Models\User;
+use App\Services\Company\CompanyInitializationService;
 use App\Traits\CacheHelper;
 use App\Traits\LoggerHelper;
 use Exception;
-use Illuminate\Contracts\Pagination\Paginator;
-use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Config;
-use Illuminate\Support\Facades\DB;
 
 class CompanyActions
 {
     use CacheHelper;
     use LoggerHelper;
 
-    public function __construct()
-    {
+    private const DETAIL_EAGER_LOADS = [
+        'branches',
+    ];
+
+    public function __construct(
+        private CompanyInitializationService $companyInitializationService,
+    ) {
     }
 
-    public function create(array $companyArr): Company
-    {
-        DB::beginTransaction();
-        $timer_start = microtime(true);
+    public function readAny(
+        User $user,
+        bool $withTrashed,
 
-        try {
-            $code = $companyArr['code'];
-            $name = $companyArr['name'];
-            $address = $companyArr['address'];
-            $default = $companyArr['default'];
-            $status = $companyArr['status'];
-            $userId = $companyArr['user_id'];
-
-            $usr = User::find($userId);
-            if (! $usr) {
-                return null;
-            }
+        ?string $search,
+        ?bool $default,
+        ?int $status,
+        ?int $includeId,
 
-            if ($usr->companies()->count() == 0) {
-                $default = true;
-                $status = RecordStatus::ACTIVE->value;
-            }
+        ?ExecuteDTO $execute
+    ) {
+        $query = Company::select('companies.*')
+            ->whereIn('companies.id', $user->companies()->pluck('company_id'))
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $default, $status, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search, $default, $status) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
 
-            $company = new Company();
-            $company->code = $code;
-            $company->name = $name;
-            $company->address = $address;
-            $company->default = $default;
-            $company->status = $status;
-            $company->save();
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('companies.code', 'like', '%'.$search.'%')
+                            ->orWhere('companies.name', 'like', '%'.$search.'%')
+                            ->orWhere('companies.address', 'like', '%'.$search.'%');
+                    });
+                }
 
-            $usr->companies()->attach([$company->id]);
+                if ($default !== null) {
+                    $query->where('companies.default', $default);
+                }
 
-            DB::commit();
+                if ($status !== null) {
+                    $query->where('companies.status', $status);
+                }
+            });
 
-            $this->flushCache();
+            if ($includeId) {
+                $query->orWhere('companies.id', $includeId);
+            }
+        });
 
-            return $company;
-        } catch (Exception $e) {
-            DB::rollBack();
-            $this->loggerDebug(__METHOD__, $e);
-            throw $e;
-        } finally {
-            $execution_time = microtime(true) - $timer_start;
-            $this->loggerPerformance(__METHOD__, $execution_time);
+        if ($includeId) {
+            $query->orderByRaw('FIELD(companies.id, '.$includeId.') desc');
         }
-    }
-
-    public function readAny(
-        int $userId,
-        string $search = '',
-        bool $paginate = true,
-        int $page = 1,
-        int $perPage = 10,
-        array $with = [],
-        bool $withTrashed = false,
-        bool $useCache = true
-    ): Paginator|Collection {
-        $timer_start = microtime(true);
-        $recordsCount = 0;
-
-        try {
-            $cacheKey = 'readAny_'.$userId.'-'.(empty($search) ? '[empty]' : $search).'-'.$paginate.'-'.$page.'-'.$perPage;
-            if ($useCache) {
-                $cacheResult = $this->readFromCache($cacheKey);
-
-                if (! is_null($cacheResult)) {
-                    return $cacheResult;
+        $query->orderBy('companies.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $user->id,
+                    $withTrashed ? 'true' : 'false',
+                    empty($search) ? '[empty]' : $search,
+                    is_null($default) ? '[null]' : ($default ? 'true' : 'false'),
+                    $status ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) return $cacheData;
                 }
-            }
 
-            $result = null;
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
 
-            $relationship = ['branches'];
-            $relationship = count($with) > 0 ? $with : $relationship;
-            $query = Company::with($relationship);
+                $recordsCount = $result->count();
 
-            $user = User::find($userId);
-            if (! $user) {
-                return null;
-            }
-            $companyIds = $user->companies()->pluck('company_id');
-            $query = $query->whereIn('id', $companyIds);
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
 
-            if (! empty($search)) {
-                $query = $query->where('name', 'like', '%'.$search.'%');
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
             }
+        }
 
-            if ($withTrashed) {
-                $query = $query->withTrashed();
-            }
+        return $query;
+    }
 
-            $query = $query->latest();
+    public function read(Company $company): Company
+    {
+        return $company->load(self::DETAIL_EAGER_LOADS);
+    }
 
-            if ($paginate) {
-                $perPage = is_numeric($perPage) ? abs($perPage) : Config::get('dcslab.PAGINATION_LIMIT');
-                $page = is_numeric($page) ? abs($page) : 1;
+    public function create(User $user, CompanyCreateDTO $data): Company
+    {
+        $timer_start = microtime(true);
 
-                $result = $query->paginate(perPage: $perPage, page: $page);
-            } else {
-                $result = $query->get();
+        try {
+            if ($data->default) {
+                $this->resetDefault($user);
             }
 
-            $recordsCount = $result->count();
+            $company = new Company();
+            $company->code = $this->generateUniqueCode($user, $data->code, null);
+            $company->name = $data->name;
+            $company->address = $data->address;
+            $company->default = $data->default;
+            $company->status = $data->status;
+            $company->save();
+
+            $user->companies()->attach([$company->id]);
+            $this->companyInitializationService->initializeDefaultData($company);
 
-            $this->saveToCache($cacheKey, $result);
+            $this->flushCache();
 
-            return $result;
+            return $company;
         } catch (Exception $e) {
             $this->loggerDebug(__METHOD__, $e);
             throw $e;
         } finally {
             $execution_time = microtime(true) - $timer_start;
-            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            $this->loggerPerformance(__METHOD__, $execution_time);
         }
     }
 
-    public function read(Company $company): Company
+    public function getById(int $companyId): Company
     {
-        return $company->load('branches');
+        return Company::find($companyId);
     }
 
-    public function isDefaultCompany(Company $company): bool
+    public function isDefault(Company $company): bool
     {
         $result = $company->default;
 
         return is_null($result) ? false : $result;
     }
 
-    public function getCompanyById(int $companyId): Company
-    {
-        return Company::find($companyId)->first();
-    }
-
-    public function getDefaultCompany(User $user): Company
+    public function update(User $user, Company $company, CompanyUpdateDTO $data): Company
     {
-        return $user->companies()->where('default', '=', true)->first();
-    }
-
-    public function getAllActiveCompany(
-        int $userId,
-        ?array $with = []
-    ) {
         $timer_start = microtime(true);
 
         try {
-            $usr = User::find($userId);
-            if (! $usr) {
-                return null;
+            if ($data->default) {
+                $this->resetDefault($user);
+                $company->refresh();
             }
 
-            $compIds = $usr->companies()->pluck('company_id');
-
-            $companies = Company::where('status', '=', 1)->whereIn('id', $compIds);
-
-            if (in_array('branches', $with)) {
-                $companies = $companies->with(['branches' => function ($query) {
-                    $query->where('status', '=', 1);
-                }]);
-            }
-
-            return $companies->get();
-        } catch (Exception $e) {
-            $this->loggerDebug(__METHOD__, $e);
-            throw $e;
-        } finally {
-            $execution_time = microtime(true) - $timer_start;
-            $this->loggerPerformance(__METHOD__, $execution_time);
-        }
-    }
-
-    public function update(
-        Company $company,
-        array $companyArr
-    ): Company {
-        DB::beginTransaction();
-        $timer_start = microtime(true);
-
-        try {
-            $company->update([
-                'code' => $companyArr['code'],
-                'name' => $companyArr['name'],
-                'address' => $companyArr['address'],
-                'default' => $companyArr['default'],
-                'status' => $companyArr['status'],
-            ]);
-
-            DB::commit();
+            $company->code = $this->generateUniqueCode($user, $data->code, $company->id);
+            $company->name = $data->name;
+            $company->address = $data->address;
+            $company->default = $data->default;
+            $company->status = $data->status;
+            $company->save();
 
             $this->flushCache();
 
-            return $company->refresh();
+            return $company;
         } catch (Exception $e) {
-            DB::rollBack();
             $this->loggerDebug(__METHOD__, $e);
             throw $e;
         } finally {
@@ -225,22 +212,13 @@ public function update(
         }
     }
 
-    public function resetDefaultCompany(User $user): bool
+    public function resetDefault(User $user)
     {
-        DB::beginTransaction();
         $timer_start = microtime(true);
 
         try {
-            $compIds = $user->companies()->pluck('company_id');
-
-            $retval = Company::whereIn('id', $compIds)
-                ->update(['default' => 0]);
-
-            DB::commit();
-
-            return $retval;
+            return $user->companies()->update(['default' => 0]);
         } catch (Exception $e) {
-            DB::rollBack();
             $this->loggerDebug(__METHOD__, $e);
             throw $e;
         } finally {
@@ -251,7 +229,6 @@ public function resetDefaultCompany(User $user): bool
 
     public function delete(Company $company): bool
     {
-        DB::beginTransaction();
         $timer_start = microtime(true);
 
         $retval = false;
@@ -259,13 +236,10 @@ public function delete(Company $company): bool
         try {
             $retval = $company->delete();
 
-            DB::commit();
-
             $this->flushCache();
 
             return $retval;
         } catch (Exception $e) {
-            DB::rollBack();
             $this->loggerDebug(__METHOD__, $e);
             throw $e;
         } finally {
@@ -274,28 +248,41 @@ public function delete(Company $company): bool
         }
     }
 
-    public function generateUniqueCode(): string
+    public function generateUniqueCode(User $user, string $code, ?int $exceptId): string
     {
-        $rand = app(RandomizerActions::class);
-        $code = $rand->generateAlpha().$rand->generateNumeric();
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $tryCount = 0;
+        do {
+            $count = $user->companies()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'CP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($user, $code, $exceptId));
 
         return $code;
     }
 
-    public function isUniqueCode(string $code, int $userId, ?int $exceptId = null): bool
+    public function isUniqueCode(User $user, string $code, ?int $exceptId): bool
     {
-        $user = User::find($userId);
+        if ($user->companies->count() == 0) return true;
 
-        if ($user->companies->count() == 0) {
-            return true;
+        $query = $user->companies()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('companies.id', '<>', $exceptId);
         }
 
-        $result = $user->companies()->where('code', '=', $code);
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(User $user, string $name, ?int $exceptId): bool
+    {
+        if ($user->companies->count() == 0) return true;
 
+        $query = $user->companies()->where('name', '=', $name);
         if ($exceptId) {
-            $result = $result->get()->where('id', '<>', $exceptId);
+            $query->where('companies.id', '<>', $exceptId);
         }
 
-        return $result->count() == 0 ? true : false;
+        return $query->doesntExist();
     }
 }
diff --git a/api/app/Actions/Customer/CustomerActions.php b/api/app/Actions/Customer/CustomerActions.php
new file mode 100644
index 000000000..204f15791
--- /dev/null
+++ b/api/app/Actions/Customer/CustomerActions.php
@@ -0,0 +1,468 @@
+<?php
+
+namespace App\Actions\Customer;
+
+use App\Actions\ChartOfAccount\ChartOfAccountActions;
+use App\DTOs\ChartOfAccountCreateDTO;
+use App\DTOs\ChartOfAccountUpdateDTO;
+use App\DTOs\CustomerCreateDTO;
+use App\DTOs\CustomerUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Enums\RecordStatusEnum;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Config;
+use InvalidArgumentException;
+
+class CustomerActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'user',
+        'group',
+    ];
+
+    public function __construct(
+        private readonly ChartOfAccountActions $chartOfAccountActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+
+        ?string $search,
+        ?bool $isMember,
+        ?int $groupId,
+        ?string $zone,
+        ?int $maxOpenInvoice,
+        ?float $maxOutstandingInvoice,
+        ?int $maxInvoiceAge,
+        ?int $paymentTermType,
+        ?int $paymentTerm,
+        ?bool $taxableEnterprise,
+        ?string $taxId,
+        ?int $status,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ): Paginator|Collection|Builder {
+        $query = Customer::with(self::LIST_EAGER_LOADS)
+            ->select('customers.*')
+            ->where('customers.company_id', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $isMember,
+            $groupId,
+            $zone,
+            $maxOpenInvoice,
+            $maxOutstandingInvoice,
+            $maxInvoiceAge,
+            $paymentTermType,
+            $paymentTerm,
+            $taxableEnterprise,
+            $taxId,
+            $status,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $isMember,
+                $groupId,
+                $zone,
+                $maxOpenInvoice,
+                $maxOutstandingInvoice,
+                $maxInvoiceAge,
+                $paymentTermType,
+                $paymentTerm,
+                $taxableEnterprise,
+                $taxId,
+                $status
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('customers.code', 'like', '%'.$search.'%')
+                            ->orWhere('customers.name', 'like', '%'.$search.'%')
+                            ->orWhere('customers.zone', 'like', '%'.$search.'%')
+                            ->orWhere('customers.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($isMember)) {
+                    $query->where('customers.is_member', $isMember);
+                }
+
+                if (! is_null($groupId)) {
+                    $query->where('customers.group_id', $groupId);
+                }
+
+                if (! is_null($zone)) {
+                    $query->where('customers.zone', $zone);
+                }
+
+                if (! is_null($maxOpenInvoice)) {
+                    $query->where('customers.max_open_invoice', $maxOpenInvoice);
+                }
+
+                if (! is_null($maxOutstandingInvoice)) {
+                    $query->where('customers.max_outstanding_invoice', $maxOutstandingInvoice);
+                }
+
+                if (! is_null($maxInvoiceAge)) {
+                    $query->where('customers.max_invoice_age', $maxInvoiceAge);
+                }
+
+                if (! is_null($paymentTermType)) {
+                    $query->where('customers.payment_term_type', $paymentTermType);
+                }
+
+                if (! is_null($paymentTerm)) {
+                    $query->where('customers.payment_term', $paymentTerm);
+                }
+
+                if (! is_null($taxableEnterprise)) {
+                    $query->where('customers.taxable_enterprise', $taxableEnterprise);
+                }
+
+                if (! is_null($taxId)) {
+                    $query->where('customers.tax_id', $taxId);
+                }
+
+                if (! is_null($status)) {
+                    $query->where('customers.status', $status);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('customers.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(customers.id, '.$includeId.') desc');
+        }
+        $query->orderBy('customers.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    empty($search) ? '[empty]' : $search,
+                    $companyId,
+                    is_null($isMember) ? '[null]' : ($isMember ? 'true' : 'false'),
+                    $groupId ?? '[null]',
+                    is_null($zone) || $zone === '' ? '[empty]' : $zone,
+                    $maxOpenInvoice ?? '[null]',
+                    $maxOutstandingInvoice ?? '[null]',
+                    $maxInvoiceAge ?? '[null]',
+                    $paymentTermType ?? '[null]',
+                    $paymentTerm ?? '[null]',
+                    is_null($taxableEnterprise) ? '[null]' : ($taxableEnterprise ? 'true' : 'false'),
+                    is_null($taxId) || $taxId === '' ? '[empty]' : $taxId,
+                    $status ?? '[null]',
+                    $includeId ?? '[null]',
+                    $userId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Customer $customer): Customer
+    {
+        return $customer->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(CustomerCreateDTO $data): Customer
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $customer = new Customer();
+            $customer->company_id = $data->companyId;
+            $customer->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $customer->is_member = $data->isMember;
+            $customer->name = $data->name;
+            $customer->group_id = $data->groupId;
+            $customer->zone = $data->zone;
+            $customer->max_open_invoice = $data->maxOpenInvoice;
+            $customer->max_outstanding_invoice = $data->maxOutstandingInvoice;
+            $customer->max_invoice_age = $data->maxInvoiceAge;
+            $customer->payment_term_type = $data->paymentTermType;
+            $customer->payment_term = $data->paymentTerm;
+            $customer->taxable_enterprise = $data->taxableEnterprise;
+            $customer->tax_id = $data->taxId;
+            $customer->status = $data->status;
+            $customer->remarks = $data->remarks;
+            $customer->save();
+
+            // save user (not yet implemented)
+            // ...
+
+            $parentChartOfAccount = (function () use ($customer) {
+                if ($customer->group_id) {
+                    $parentChartOfAccount = $customer->group?->chartOfAccount;
+                    if (! $parentChartOfAccount) {
+                        throw new InvalidArgumentException('Customer group chart of account parent must exist in company.');
+                    }
+
+                    return $parentChartOfAccount;
+                }
+
+                $parentChartOfAccount = $customer->company->assetCurrentAccountReceivableChartOfAccount;
+                if (! $parentChartOfAccount) {
+                    throw new InvalidArgumentException('Customer chart of account parent must exist in company.');
+                }
+
+                return $parentChartOfAccount;
+            })();
+
+            $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                companyId: $customer->company_id,
+                scope: 'user',
+                systemKey: null,
+                parentId: $parentChartOfAccount->id,
+                sourceType: Customer::class,
+                sourceId: $customer->id,
+                code: $parentChartOfAccount->code.'.'.$customer->code,
+                name: $customer->name,
+                normalBalance: 'debit',
+                isGroup: false,
+                isActive: $customer->status === RecordStatusEnum::ACTIVE,
+                remarks: $customer->remarks,
+            );
+            $this->chartOfAccountActions->create($chartOfAccountDTO);
+
+            $this->flushCache();
+
+            return $customer;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Customer $customer, CustomerUpdateDTO $data): Customer
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $customer->code = $this->generateUniqueCode($customer->company_id, $data->code, $customer->id);
+            $customer->is_member = $data->isMember;
+            $customer->name = $data->name;
+            $customer->group_id = $data->groupId;
+            $customer->zone = $data->zone;
+            $customer->max_open_invoice = $data->maxOpenInvoice;
+            $customer->max_outstanding_invoice = $data->maxOutstandingInvoice;
+            $customer->max_invoice_age = $data->maxInvoiceAge;
+            $customer->payment_term_type = $data->paymentTermType;
+            $customer->payment_term = $data->paymentTerm;
+            $customer->taxable_enterprise = $data->taxableEnterprise;
+            $customer->tax_id = $data->taxId;
+            $customer->status = $data->status;
+            $customer->remarks = $data->remarks;
+            $customer->save();
+
+            $parentChartOfAccount = (function () use ($customer) {
+                if ($customer->group_id) {
+                    $parentChartOfAccount = $customer->group?->chartOfAccount;
+                    if (! $parentChartOfAccount) {
+                        throw new InvalidArgumentException('Customer group chart of account parent must exist in company.');
+                    }
+
+                    return $parentChartOfAccount;
+                }
+
+                $parentChartOfAccount = $customer->company->assetCurrentAccountReceivableChartOfAccount;
+                if (! $parentChartOfAccount) {
+                    throw new InvalidArgumentException('Customer chart of account parent must exist in company.');
+                }
+
+                return $parentChartOfAccount;
+            })();
+
+            $chartOfAccount = $customer->chartOfAccount;
+            if ($chartOfAccount) {
+                $chartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $parentChartOfAccount->id,
+                    code: $parentChartOfAccount->code.'.'.$customer->code,
+                    name: $customer->name,
+                    normalBalance: 'debit',
+                    isGroup: false,
+                    isActive: $customer->status === RecordStatusEnum::ACTIVE,
+                    remarks: $customer->remarks,
+                );
+                $this->chartOfAccountActions->update($chartOfAccount, $chartOfAccountDTO);
+            } else {
+                $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                    companyId: $customer->company_id,
+                    scope: 'user',
+                    systemKey: null,
+                    parentId: $parentChartOfAccount->id,
+                    sourceType: Customer::class,
+                    sourceId: $customer->id,
+                    code: $parentChartOfAccount->code.'.'.$customer->code,
+                    name: $customer->name,
+                    normalBalance: 'debit',
+                    isGroup: false,
+                    isActive: $customer->status === RecordStatusEnum::ACTIVE,
+                    remarks: $customer->remarks,
+                );
+                $this->chartOfAccountActions->create($chartOfAccountDTO);
+            }
+
+            $this->flushCache();
+
+            return $customer->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(Customer $customer): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $chartOfAccount = $customer->chartOfAccount;
+            if ($chartOfAccount) {
+                $this->chartOfAccountActions->delete($chartOfAccount);
+            }
+
+            $retval = $customer->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->customers()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'C'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->customers()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->customers()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('customers.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->customers()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->customers()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('customers.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/CustomerAddress/CustomerAddressActions.php b/api/app/Actions/CustomerAddress/CustomerAddressActions.php
new file mode 100644
index 000000000..39a3dbfa8
--- /dev/null
+++ b/api/app/Actions/CustomerAddress/CustomerAddressActions.php
@@ -0,0 +1,217 @@
+<?php
+
+namespace App\Actions\CustomerAddress;
+
+use App\DTOs\CustomerAddressCreateDTO;
+use App\DTOs\CustomerAddressUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\CustomerAddress;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class CustomerAddressActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'customer',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+
+        ?string $search,
+        ?int $customerId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = CustomerAddress::select('customer_addresses.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'customer_addresses.company_id')
+            ->whereCompanyId('customer_addresses', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $customerId, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search, $customerId) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where('customer_addresses.code', 'like', '%'.$search.'%')
+                        ->orWhere('customer_addresses.remarks', 'like', '%'.$search.'%');
+                }
+
+                if ($customerId) {
+                    $query->where('customer_addresses.customer_id', $customerId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('customer_addresses.id', $includeId);
+            }
+        });
+
+        if ($includeId) $query->orderByRaw('FIELD(customer_addresses.id, '.$includeId.') desc');
+        $query->orderBy('companies.name', 'asc')
+            ->orderBy('customer_addresses.address', 'asc')
+            ->orderBy('customer_addresses.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $customerId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_customer_address_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(CustomerAddress $customerAddress): CustomerAddress
+    {
+        return $customerAddress->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function isUniqueAddress(int $companyId, int $customerId, string $address, ?int $exceptId = null): bool
+    {
+        $query = CustomerAddress::whereCompanyId('customer_addresses', $companyId)
+            ->whereCustomerId($customerId)
+            ->whereAddress($address);
+
+        if ($exceptId) {
+            $query->where('id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function create(CustomerAddressCreateDTO $data): CustomerAddress
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $customerAddress = new CustomerAddress();
+            $customerAddress->company_id = $data->companyId;
+            $customerAddress->customer_id = $data->customerId;
+            $customerAddress->address = $data->address;
+            $customerAddress->city = $data->city;
+            $customerAddress->contact = $data->contact;
+            $customerAddress->is_main = $data->isMain;
+            $customerAddress->remarks = $data->remarks;
+            $customerAddress->save();
+
+            $this->flushCache();
+
+            return $customerAddress;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(CustomerAddress $customerAddress, CustomerAddressUpdateDTO $data): CustomerAddress
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $customerAddress->address = $data->address;
+            $customerAddress->city = $data->city;
+            $customerAddress->contact = $data->contact;
+            $customerAddress->is_main = $data->isMain;
+            $customerAddress->remarks = $data->remarks;
+            $customerAddress->save();
+
+            $this->flushCache();
+
+            return $customerAddress->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(CustomerAddress $customerAddress): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $customerAddress->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/CustomerGroup/CustomerGroupActions.php b/api/app/Actions/CustomerGroup/CustomerGroupActions.php
new file mode 100644
index 000000000..2756e0e2c
--- /dev/null
+++ b/api/app/Actions/CustomerGroup/CustomerGroupActions.php
@@ -0,0 +1,372 @@
+<?php
+
+namespace App\Actions\CustomerGroup;
+
+use App\Actions\ChartOfAccount\ChartOfAccountActions;
+use App\DTOs\ChartOfAccountCreateDTO;
+use App\DTOs\ChartOfAccountUpdateDTO;
+use App\DTOs\CustomerGroupCreateDTO;
+use App\DTOs\CustomerGroupUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+use InvalidArgumentException;
+
+class CustomerGroupActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct(
+        private readonly ChartOfAccountActions $chartOfAccountActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+
+        ?string $search,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = CustomerGroup::with(self::LIST_EAGER_LOADS)->select('customer_groups.*')
+            ->where('customer_groups.company_id', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('customer_groups.code', 'like', '%'.$search.'%')
+                            ->orWhere('customer_groups.name', 'like', '%'.$search.'%')
+                            ->orWhere('customer_groups.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('customer_groups.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(customer_groups.id, '.$includeId.') desc');
+        }
+        $query->orderBy('customer_groups.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    empty($search) ? '[empty]' : $search,
+                    $companyId,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(CustomerGroup $customerGroup): CustomerGroup
+    {
+        return $customerGroup->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(CustomerGroupCreateDTO $data): CustomerGroup
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $customerGroup = new CustomerGroup();
+            $customerGroup->company_id = $data->companyId;
+            $customerGroup->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $customerGroup->name = $data->name;
+            $customerGroup->max_open_invoice = $data->maxOpenInvoice;
+            $customerGroup->max_outstanding_invoice = $data->maxOutstandingInvoice;
+            $customerGroup->max_invoice_age = $data->maxInvoiceAge;
+            $customerGroup->payment_term_type = $data->paymentTermType;
+            $customerGroup->payment_term = $data->paymentTerm;
+            $customerGroup->selling_point = $data->sellingPoint;
+            $customerGroup->selling_point_multiple = $data->sellingPointMultiple;
+            $customerGroup->sell_at_cost = $data->sellAtCost;
+            $customerGroup->price_markup_percent = $data->priceMarkupPercent;
+            $customerGroup->price_markup_nominal = $data->priceMarkupNominal;
+            $customerGroup->price_markdown_percent = $data->priceMarkdownPercent;
+            $customerGroup->price_markdown_nominal = $data->priceMarkdownNominal;
+            $customerGroup->rounding_type = $data->roundingType;
+            $customerGroup->rounding_digit = $data->roundingDigit;
+            $customerGroup->remarks = $data->remarks;
+            $customerGroup->save();
+
+            $parentChartOfAccount = $customerGroup->company->assetCurrentAccountReceivableChartOfAccount;
+            if (! $parentChartOfAccount) {
+                throw new InvalidArgumentException('Customer group chart of account parent must exist in company.');
+            }
+
+            $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                companyId: $customerGroup->company_id,
+                scope: 'user',
+                systemKey: null,
+                parentId: $parentChartOfAccount->id,
+                sourceType: CustomerGroup::class,
+                sourceId: $customerGroup->id,
+                code: $parentChartOfAccount->code.'.'.$customerGroup->code,
+                name: $customerGroup->name,
+                normalBalance: 'debit',
+                isGroup: true,
+                isActive: true,
+                remarks: $customerGroup->remarks,
+            );
+            $this->chartOfAccountActions->create($chartOfAccountDTO);
+
+            $this->flushCache();
+
+            return $customerGroup;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(CustomerGroup $customerGroup, CustomerGroupUpdateDTO $data): CustomerGroup
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $customerGroup->code = $this->generateUniqueCode($customerGroup->company_id, $data->code, $customerGroup->id);
+            $customerGroup->name = $data->name;
+            $customerGroup->max_open_invoice = $data->maxOpenInvoice;
+            $customerGroup->max_outstanding_invoice = $data->maxOutstandingInvoice;
+            $customerGroup->max_invoice_age = $data->maxInvoiceAge;
+            $customerGroup->payment_term_type = $data->paymentTermType;
+            $customerGroup->payment_term = $data->paymentTerm;
+            $customerGroup->selling_point = $data->sellingPoint;
+            $customerGroup->selling_point_multiple = $data->sellingPointMultiple;
+            $customerGroup->sell_at_cost = $data->sellAtCost;
+            $customerGroup->price_markup_percent = $data->priceMarkupPercent;
+            $customerGroup->price_markup_nominal = $data->priceMarkupNominal;
+            $customerGroup->price_markdown_percent = $data->priceMarkdownPercent;
+            $customerGroup->price_markdown_nominal = $data->priceMarkdownNominal;
+            $customerGroup->rounding_type = $data->roundingType;
+            $customerGroup->rounding_digit = $data->roundingDigit;
+            $customerGroup->remarks = $data->remarks;
+            $customerGroup->save();
+
+            $parentChartOfAccount = $customerGroup->company->assetCurrentAccountReceivableChartOfAccount;
+            if (! $parentChartOfAccount) {
+                throw new InvalidArgumentException('Customer group chart of account parent must exist in company.');
+            }
+
+            $chartOfAccount = $customerGroup->chartOfAccount;
+            if ($chartOfAccount) {
+                $chartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $parentChartOfAccount->id,
+                    code: $parentChartOfAccount->code.'.'.$customerGroup->code,
+                    name: $customerGroup->name,
+                    normalBalance: 'debit',
+                    isGroup: true,
+                    isActive: true,
+                    remarks: $customerGroup->remarks,
+                );
+                $chartOfAccount = $this->chartOfAccountActions->update($chartOfAccount, $chartOfAccountDTO);
+            } else {
+                $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                    companyId: $customerGroup->company_id,
+                    scope: 'user',
+                    systemKey: null,
+                    parentId: $parentChartOfAccount->id,
+                    sourceType: CustomerGroup::class,
+                    sourceId: $customerGroup->id,
+                    code: $parentChartOfAccount->code.'.'.$customerGroup->code,
+                    name: $customerGroup->name,
+                    normalBalance: 'debit',
+                    isGroup: true,
+                    isActive: true,
+                    remarks: $customerGroup->remarks,
+                );
+                $chartOfAccount = $this->chartOfAccountActions->create($chartOfAccountDTO);
+            }
+
+            foreach ($customerGroup->customers as $customer) {
+                $customerChartOfAccount = $customer->chartOfAccount;
+                if (! $customerChartOfAccount) {
+                    continue;
+                }
+
+                $customerChartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $chartOfAccount->id,
+                    code: $chartOfAccount->code.'.'.$customer->code,
+                    name: $customer->name,
+                    normalBalance: 'debit',
+                    isGroup: false,
+                    isActive: $customer->status === \App\Enums\RecordStatusEnum::ACTIVE,
+                    remarks: $customer->remarks,
+                );
+                $this->chartOfAccountActions->update($customerChartOfAccount, $customerChartOfAccountDTO);
+            }
+
+            $this->flushCache();
+
+            return $customerGroup->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(CustomerGroup $customerGroup): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $chartOfAccount = $customerGroup->chartOfAccount;
+            if ($chartOfAccount) {
+                foreach ($customerGroup->customers as $customer) {
+                    $customerChartOfAccount = $customer->chartOfAccount;
+                    if ($customerChartOfAccount) {
+                        $this->chartOfAccountActions->delete($customerChartOfAccount);
+                    }
+                }
+
+                $this->chartOfAccountActions->delete($chartOfAccount);
+            }
+
+            $retval = $customerGroup->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->customerGroups()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'CG'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->customerGroups()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->customerGroups()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('customer_groups.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->customerGroups()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->customerGroups()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('customer_groups.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/Dashboard/DashboardActions.php b/api/app/Actions/Dashboard/DashboardActions.php
index 8d57d27ec..b4c3edb2d 100644
--- a/api/app/Actions/Dashboard/DashboardActions.php
+++ b/api/app/Actions/Dashboard/DashboardActions.php
@@ -2,7 +2,7 @@
 
 namespace App\Actions\Dashboard;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Traits\CacheHelper;
 use Illuminate\Support\Facades\Auth;
 
@@ -32,20 +32,24 @@ public function createUserMenu(bool $useCache = true): array
 
         $usrRoles = $usr->roles;
 
-        $hasUserRole = $usrRoles->where('name', UserRoles::USER->value)->isNotEmpty() ? true : false;
-        $hasOnlyUserRole = $usrRoles->where('name', UserRoles::USER->value)->isNotEmpty() && $usrRoles->count() == 1 ? true : false;
+        $hasUserRole = $usrRoles->where('name', UserRolesEnum::USER->value)->isNotEmpty() ? true : false;
+        $hasOnlyUserRole = $usrRoles->where('name', UserRolesEnum::USER->value)->isNotEmpty() && $usrRoles->count() == 1 ? true : false;
 
-        $hasAdminRole = $usrRoles->where('name', UserRoles::ADMINISTRATOR->value)->isNotEmpty() ? true : false;
-        $hasOnlyAdminRole = $usrRoles->where('name', UserRoles::ADMINISTRATOR->value)->isNotEmpty() && $usrRoles->count() == 1 ? true : false;
+        $hasAdminRole = $usrRoles->where('name', UserRolesEnum::ADMINISTRATOR->value)->isNotEmpty() ? true : false;
+        $hasOnlyAdminRole = $usrRoles->where('name', UserRolesEnum::ADMINISTRATOR->value)->isNotEmpty() && $usrRoles->count() == 1 ? true : false;
 
-        $hasDevRole = $usrRoles->where('name', UserRoles::DEVELOPER->value)->isNotEmpty() ? true : false;
+        $hasDevRole = $usrRoles->where('name', UserRolesEnum::DEVELOPER->value)->isNotEmpty() ? true : false;
 
         $hasCompany = $usr->companies->count() != 0 ? true : false;
 
         $showDemoMenu = false;
 
         $menu = $this->createMenu_Dashboard($menu, $showDemoMenu);
-        $menu = $this->createMenu_Company($menu, $hasOnlyUserRole, $hasOnlyAdminRole, $hasCompany, $hasDevRole);
+        $menu = $this->createMenu_MasterData($menu, $hasOnlyUserRole, $hasOnlyAdminRole, $hasCompany, $hasDevRole);
+        $menu = $this->createMenu_Finance($menu, $hasOnlyUserRole, $hasOnlyAdminRole);
+        $menu = $this->createMenu_Transaction($menu, $hasOnlyUserRole, $hasOnlyAdminRole);
+        $menu = $this->createMenu_Report($menu, $hasOnlyUserRole, $hasOnlyAdminRole);
+
         $menu = $this->createMenu_Administrator($menu, $hasAdminRole, $hasDevRole);
         $menu = $this->createMenu_DevTool($menu, $hasDevRole);
 
@@ -57,66 +61,620 @@ public function createUserMenu(bool $useCache = true): array
     private function createMenu_Dashboard(array $menu, bool $showDemo): array
     {
         $maindashboard = [
-            'icon' => 'ChevronRight',
+            'icon' => 'Home',
             'pageName' => 'side-menu-dashboard-maindashboard',
-            'title' => 'components.menu.main-dashboard',
+            'title' => 'components.menu.dashboard',
         ];
 
-        $demo = [
-            'icon' => 'ChevronRight',
-            'pageName' => 'side-menu-dashboard-demo',
-            'title' => 'components.menu.main-demo',
-        ];
+        array_push($menu, $maindashboard);
+
+        if ($showDemo) {
+            $demo = [
+                'icon' => 'ChevronRight',
+                'pageName' => 'side-menu-dashboard-demo',
+                'title' => 'components.menu.main-demo',
+            ];
+
+            array_push($menu, $demo);
+        }
+
+        return $menu;
+    }
+
+    private function createMenu_MasterData(array $menu, bool $hasOnlyUserRole, bool $hasOnlyAdminRole, bool $hasCompany, bool $hasDevRole): array
+    {
+        if ($hasOnlyUserRole || $hasOnlyAdminRole) {
+            return $menu;
+        }
 
         $root_array = [
-            'icon' => 'Home',
-            'pageName' => 'side-menu-dashboard',
-            'title' => 'components.menu.dashboard',
+            'icon' => 'Database',
+            'pageName' => 'side-menu-master-data',
+            'title' => 'components.menu.master-data',
             'subMenu' => [],
         ];
 
-        if ($showDemo) {
-            array_push($root_array['subMenu'], $maindashboard, $demo);
+        $companyManagement = [
+            'icon' => 'Umbrella',
+            'pageName' => 'side-menu-company',
+            'title' => 'components.menu.company-management',
+            'subMenu' => [],
+        ];
+
+        $company = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-company-company',
+            'title' => 'components.menu.company',
+        ];
+
+        $branches = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-company-branch',
+            'title' => 'components.menu.branch',
+        ];
+
+        $warehouse = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-company-warehouse',
+            'title' => 'components.menu.warehouse',
+        ];
+
+        if ($hasCompany || $hasDevRole) {
+            array_push($companyManagement['subMenu'], $company, $branches, $warehouse);
         } else {
-            array_push($root_array['subMenu'], $maindashboard);
+            array_push($companyManagement['subMenu'], $company);
         }
 
+        $financeManagement = [
+            'icon' => 'Wallet',
+            'pageName' => 'side-menu-master-data-finance',
+            'title' => 'components.menu.finance-management',
+            'subMenu' => [],
+        ];
+
+        $chartOfAccount = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-chart-of-account',
+            'title' => 'components.menu.chart-of-account',
+        ];
+
+        $investor = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-company-investor',
+            'title' => 'components.menu.investor',
+        ];
+
+        $cashAccount = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-finance-cash-account',
+            'title' => 'components.menu.cash-account',
+        ];
+
+        $productManagement = [
+            'icon' => 'Package',
+            'pageName' => 'side-menu-product',
+            'title' => 'components.menu.product-management',
+            'subMenu' => [],
+        ];
+
+        $productCategory = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-product-product-category',
+            'title' => 'components.menu.product-category',
+        ];
+
+        $brand = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-product-brand',
+            'title' => 'components.menu.brand',
+        ];
+
+        $unit = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-product-unit',
+            'title' => 'components.menu.unit',
+        ];
+
+        $vatProfile = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-product-vat-profile',
+            'title' => 'components.menu.vat-profile',
+        ];
+
+        $productService = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-product-product-service',
+            'title' => 'components.menu.product-service',
+        ];
+
+        $product = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-product-product',
+            'title' => 'components.menu.product',
+        ];
+
+        array_push($productManagement['subMenu'], $productCategory, $brand, $unit, $vatProfile, $product, $productService);
+
+        $supplier = [
+            'icon' => 'Users',
+            'pageName' => 'side-menu-supplier',
+            'title' => 'components.menu.supplier',
+        ];
+
+        $customerManagement = [
+            'icon' => 'Users',
+            'pageName' => 'side-menu-customer',
+            'title' => 'components.menu.customer-management',
+            'subMenu' => [],
+        ];
+
+        $customerGroup = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-customer-group',
+            'title' => 'components.menu.customer-group',
+        ];
+
+        $customer = [
+            'icon' => 'ChevronRight',
+            'pageName' => 'side-menu-customer',
+            'title' => 'components.menu.customer',
+        ];
+
+        array_push($customerManagement['subMenu'], $customerGroup, $customer);
+
+        $stockAdjustmentCategory = [
+            'icon' => 'Tags',
+            'pageName' => 'side-menu-stock-adjustment-category',
+            'title' => 'components.menu.stock-adjustment-category',
+        ];
+
+        $expenseCategory = [
+            'icon' => 'Tags',
+            'pageName' => 'side-menu-expense-category',
+            'title' => 'components.menu.expense-category',
+        ];
+
+        $incomeCategory = [
+            'icon' => 'Tags',
+            'pageName' => 'side-menu-income-category',
+            'title' => 'components.menu.income-category',
+        ];
+
+        $debtCategory = [
+            'icon' => 'Tags',
+            'pageName' => 'side-menu-debt-category',
+            'title' => 'components.menu.debt-category',
+        ];
+
+        $receivableCategory = [
+            'icon' => 'Tags',
+            'pageName' => 'side-menu-receivable-category',
+            'title' => 'components.menu.receivable-category',
+        ];
+
+        $debtCreditor = [
+            'icon' => 'Building2',
+            'pageName' => 'side-menu-debt-creditor',
+            'title' => 'components.menu.debt-creditor',
+        ];
+
+        $purchaseAdditionalCostCategory = [
+            'icon' => 'Tags',
+            'pageName' => 'side-menu-purchase-additional-cost-category',
+            'title' => 'components.menu.purchase-additional-cost-category',
+        ];
+
+        $assetCategory = [
+            'icon' => 'Tags',
+            'pageName' => 'side-menu-asset-category',
+            'title' => 'components.menu.asset-category',
+        ];
+
+        $assetUnit = [
+            'icon' => 'Ruler',
+            'pageName' => 'side-menu-asset-unit',
+            'title' => 'components.menu.asset-unit',
+        ];
+
+        $asset = [
+            'icon' => 'Laptop',
+            'pageName' => 'side-menu-asset',
+            'title' => 'components.menu.asset',
+        ];
+
+        array_push(
+            $financeManagement['subMenu'],
+            $chartOfAccount,
+            $investor,
+            $cashAccount,
+            $expenseCategory,
+            $incomeCategory,
+            $debtCategory,
+            $receivableCategory,
+            $debtCreditor,
+            $assetCategory,
+            $assetUnit,
+            $asset,
+        );
+
+        array_push(
+            $root_array['subMenu'],
+            $companyManagement,
+            $financeManagement,
+            $productManagement,
+            $supplier,
+            $customerManagement,
+            $stockAdjustmentCategory,
+            $purchaseAdditionalCostCategory
+        );
         array_push($menu, $root_array);
 
         return $menu;
     }
 
-    private function createMenu_Company(array $menu, bool $hasOnlyUserRole, bool $hasOnlyAdminRole, bool $hasCompany, bool $hasDevRole): array
+    private function createMenu_Finance(array $menu, bool $hasOnlyUserRole, bool $hasOnlyAdminRole): array
     {
         if ($hasOnlyUserRole || $hasOnlyAdminRole) {
             return $menu;
         }
 
-        $company = [
-            'icon' => 'ChevronRight',
-            'pageName' => 'side-menu-company-company',
-            'title' => 'components.menu.company-company',
+        $root_array = [
+            'icon' => 'Wallet',
+            'pageName' => 'side-menu-finance',
+            'title' => 'components.menu.finance',
+            'subMenu' => [],
         ];
 
-        $branches = [
+        $capitalOpening = [
+            'icon' => 'Wallet',
+            'pageName' => 'side-menu-finance-capital-opening',
+            'title' => 'components.menu.capital-opening',
+        ];
+
+        $capitalTransaction = [
+            'icon' => 'ArrowLeftRight',
+            'pageName' => 'side-menu-finance-capital-transaction',
+            'title' => 'components.menu.capital-transaction',
+        ];
+
+        $cashTransfer = [
+            'icon' => 'Repeat',
+            'pageName' => 'side-menu-finance-cash-transfer',
+            'title' => 'components.menu.cash-transfer',
+        ];
+
+        $expense = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-expense',
+            'title' => 'components.menu.expense',
+        ];
+
+        $prepaidExpense = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-prepaid-expense',
+            'title' => 'components.menu.prepaid-expense',
+        ];
+
+        $income = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-income',
+            'title' => 'components.menu.income',
+        ];
+
+        $prepaidIncome = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-prepaid-income',
+            'title' => 'components.menu.prepaid-income',
+        ];
+
+        $debt = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-debt',
+            'title' => 'components.menu.debt',
+        ];
+
+        $receivable = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-receivable',
+            'title' => 'components.menu.receivable',
+        ];
+
+        $journalEntry = [
             'icon' => 'ChevronRight',
-            'pageName' => 'side-menu-company-branch',
-            'title' => 'components.menu.company-branch',
+            'pageName' => 'side-menu-journal-entry',
+            'title' => 'components.menu.journal-entry',
         ];
 
+        array_push(
+            $root_array['subMenu'],
+            $capitalOpening,
+            $capitalTransaction,
+            $cashTransfer,
+            $expense,
+            $prepaidExpense,
+            $income,
+            $prepaidIncome,
+            $debt,
+            $receivable,
+            $journalEntry
+        );
+
+        array_push($menu, $root_array);
+
+        return $menu;
+    }
+
+    private function createMenu_Transaction(array $menu, bool $hasOnlyUserRole, bool $hasOnlyAdminRole): array
+    {
+        if ($hasOnlyUserRole || $hasOnlyAdminRole) {
+            return $menu;
+        }
+
         $root_array = [
-            'icon' => 'Umbrella',
-            'pageName' => 'side-menu-company',
-            'title' => 'components.menu.company',
+            'icon' => 'ArrowLeftRight',
+            'pageName' => 'side-menu-transaction',
+            'title' => 'components.menu.transaction',
             'subMenu' => [],
         ];
 
-        if ($hasCompany || $hasDevRole) {
-            array_push($root_array['subMenu'], $company, $branches);
-        } else {
-            array_push($root_array['subMenu'], $company);
+        $stockAdjustment = [
+            'icon' => 'SlidersHorizontal',
+            'pageName' => 'side-menu-stock-adjustment',
+            'title' => 'components.menu.stock-adjustment',
+        ];
+
+        $purchaseOrder = [
+            'icon' => 'FileSpreadsheet',
+            'pageName' => 'side-menu-purchase-order',
+            'title' => 'components.menu.purchase-order',
+        ];
+
+        $purchasing = [
+            'icon' => 'ShoppingCart',
+            'pageName' => 'side-menu-purchasing',
+            'title' => 'components.menu.purchase-management',
+            'subMenu' => [],
+        ];
+
+        $purchase = [
+            'icon' => 'ShoppingCart',
+            'pageName' => 'side-menu-purchase',
+            'title' => 'components.menu.purchase',
+        ];
+
+        $purchaseReceipt = [
+            'icon' => 'PackageCheck',
+            'pageName' => 'side-menu-purchase-receipt',
+            'title' => 'components.menu.purchase-receipt',
+        ];
+
+        array_push(
+            $purchasing['subMenu'],
+            $purchaseOrder,
+            $purchase,
+            $purchaseReceipt
+        );
+
+        $stockTransfer = [
+            'icon' => 'Truck',
+            'pageName' => 'side-menu-stock-transfer',
+            'title' => 'components.menu.stock-transfer',
+        ];
+
+        $assetTransactions = [
+            'icon' => 'Laptop',
+            'pageName' => 'side-menu-transaction-asset',
+            'title' => 'components.menu.asset',
+            'subMenu' => [],
+        ];
+
+        $assetAdjustment = [
+            'icon' => 'ArrowLeftRight',
+            'pageName' => 'side-menu-asset-adjustment',
+            'title' => 'components.menu.asset-adjustment',
+        ];
+
+        $assetPurchase = [
+            'icon' => 'PackagePlus',
+            'pageName' => 'side-menu-asset-purchase',
+            'title' => 'components.menu.asset-purchase',
+        ];
+
+        $assetSale = [
+            'icon' => 'PackageMinus',
+            'pageName' => 'side-menu-asset-sale',
+            'title' => 'components.menu.asset-sale',
+        ];
+
+        array_push(
+            $assetTransactions['subMenu'],
+            $assetAdjustment,
+            $assetPurchase,
+            $assetSale
+        );
+
+        array_push(
+            $root_array['subMenu'],
+            $stockAdjustment,
+            $purchasing,
+            $stockTransfer,
+            $assetTransactions
+        );
+
+        array_push($menu, $root_array);
+
+        return $menu;
+    }
+
+    private function createMenu_Report(array $menu, bool $hasOnlyUserRole, bool $hasOnlyAdminRole): array
+    {
+        if ($hasOnlyUserRole || $hasOnlyAdminRole) {
+            return $menu;
         }
 
+        $root_array = [
+            'icon' => 'BarChart3',
+            'pageName' => 'side-menu-report',
+            'title' => 'components.menu.report',
+            'subMenu' => [],
+        ];
+
+        $cashAccount = [
+            'icon' => 'Wallet',
+            'pageName' => 'side-menu-report-cash-account',
+            'title' => 'components.menu.cash-account',
+            'subMenu' => [],
+        ];
+
+        $financialStatement = [
+            'icon' => 'FileBarChart',
+            'pageName' => 'side-menu-report-financial-statement',
+            'title' => 'components.menu.financial-statement',
+            'subMenu' => [],
+        ];
+
+        $cashAccountWithRemainingBalance = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-cash-account-with-remaining-balance',
+            'title' => 'components.menu.cash-account-with-remaining-balance',
+        ];
+
+        array_push($cashAccount['subMenu'], $cashAccountWithRemainingBalance);
+
+        $product = [
+            'icon' => 'Package',
+            'pageName' => 'side-menu-report-product',
+            'title' => 'components.menu.product',
+            'subMenu' => [],
+        ];
+
+        $productWithRemainingStock = [
+            'icon' => 'Boxes',
+            'pageName' => 'side-menu-product-with-remaining-stock',
+            'title' => 'components.menu.product-with-remaining-stock',
+        ];
+
+        array_push($product['subMenu'], $productWithRemainingStock);
+
+        $stockAdjustment = [
+            'icon' => 'SlidersHorizontal',
+            'pageName' => 'side-menu-stock-adjustment',
+            'title' => 'components.menu.stock-adjustment',
+            'subMenu' => [],
+        ];
+
+        $stockAdjustmentInItem = [
+            'icon' => 'PackagePlus',
+            'pageName' => 'side-menu-stock-adjustment-in-item',
+            'title' => 'components.menu.stock-adjustment-in-item',
+        ];
+
+        $stockAdjustmentInItemSerial = [
+            'icon' => 'ScanLine',
+            'pageName' => 'side-menu-stock-adjustment-in-item-serial',
+            'title' => 'components.menu.stock-adjustment-in-item-serial',
+        ];
+
+        $stockAdjustmentOutItem = [
+            'icon' => 'PackageMinus',
+            'pageName' => 'side-menu-stock-adjustment-out-item',
+            'title' => 'components.menu.stock-adjustment-out-item',
+        ];
+
+        $stockAdjustmentOutItemSerial = [
+            'icon' => 'ScanLine',
+            'pageName' => 'side-menu-stock-adjustment-out-item-serial',
+            'title' => 'components.menu.stock-adjustment-out-item-serial',
+        ];
+
+        $stockTransfer = [
+            'icon' => 'Truck',
+            'pageName' => 'side-menu-report-stock-transfer',
+            'title' => 'components.menu.stock-transfer',
+            'subMenu' => [],
+        ];
+
+        $purchaseOrder = [
+            'icon' => 'FileSpreadsheet',
+            'pageName' => 'side-menu-report-purchase-order',
+            'title' => 'components.menu.purchase-order',
+            'subMenu' => [],
+        ];
+
+        $purchaseOrderItem = [
+            'icon' => 'PackageSearch',
+            'pageName' => 'side-menu-purchase-order-item',
+            'title' => 'components.menu.purchase-order-item',
+        ];
+
+        $purchaseOrderDownPayment = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-purchase-order-down-payment',
+            'title' => 'components.menu.purchase-order-down-payment',
+        ];
+
+        $purchaseOrderDownPaymentNotFullyAllocated = [
+            'icon' => 'WalletCards',
+            'pageName' => 'side-menu-purchase-order-down-payment-not-fully-allocated',
+            'title' => 'components.menu.purchase-order-down-payment-not-fully-allocated',
+        ];
+
+        $purchaseOrderDownPaymentRefund = [
+            'icon' => 'Undo2',
+            'pageName' => 'side-menu-purchase-order-down-payment-refund',
+            'title' => 'components.menu.purchase-order-down-payment-refund',
+        ];
+
+        $stockTransferItem = [
+            'icon' => 'Boxes',
+            'pageName' => 'side-menu-stock-transfer-item',
+            'title' => 'components.menu.stock-transfer-item',
+        ];
+
+        $stockTransferItemSerial = [
+            'icon' => 'ScanLine',
+            'pageName' => 'side-menu-stock-transfer-item-serial',
+            'title' => 'components.menu.stock-transfer-item-serial',
+        ];
+
+        $journalEntryDetail = [
+            'icon' => 'FileText',
+            'pageName' => 'side-menu-report-journal-entry-detail',
+            'title' => 'components.menu.journal-entry-detail',
+        ];
+
+        $balanceSheet = [
+            'icon' => 'Scale',
+            'pageName' => 'side-menu-report-balance-sheet',
+            'title' => 'components.menu.balance-sheet',
+        ];
+
+        array_push($financialStatement['subMenu'], $journalEntryDetail, $balanceSheet);
+
+        array_push(
+            $stockAdjustment['subMenu'],
+            $stockAdjustmentInItem,
+            $stockAdjustmentInItemSerial,
+            $stockAdjustmentOutItem,
+            $stockAdjustmentOutItemSerial
+        );
+
+        array_push(
+            $stockTransfer['subMenu'],
+            $stockTransferItem,
+            $stockTransferItemSerial
+        );
+
+        array_push(
+            $purchaseOrder['subMenu'],
+            $purchaseOrderItem,
+            $purchaseOrderDownPayment,
+            $purchaseOrderDownPaymentNotFullyAllocated,
+            $purchaseOrderDownPaymentRefund
+        );
+
+        array_push($root_array['subMenu'], $financialStatement, $cashAccount, $product, $stockAdjustment, $purchaseOrder, $stockTransfer);
+
         array_push($menu, $root_array);
 
         return $menu;
diff --git a/api/app/Actions/Debt/DebtActions.php b/api/app/Actions/Debt/DebtActions.php
new file mode 100644
index 000000000..a02017823
--- /dev/null
+++ b/api/app/Actions/Debt/DebtActions.php
@@ -0,0 +1,607 @@
+<?php
+
+namespace App\Actions\Debt;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\DebtPayment\DebtPaymentActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\DebtCreateDTO;
+use App\DTOs\DebtPaymentCreateDTO;
+use App\DTOs\DebtPaymentUpdateDTO;
+use App\DTOs\DebtUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\Debt;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class DebtActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'creditor',
+        'supplier',
+        'cashAccount',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'creditor',
+        'supplier',
+        'cashAccount',
+        'payments.cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly DebtPaymentActions $debtPaymentActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $categoryId,
+        ?int $creditorId,
+        ?int $supplierId,
+        ?bool $isPaidOff,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Debt::select('debts.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->whereCompanyId('debts', $companyId)
+            ->whereBranchId('debts', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $categoryId,
+            $creditorId,
+            $supplierId,
+            $isPaidOff,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $categoryId,
+                $creditorId,
+                $supplierId,
+                $isPaidOff,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('debts.code', 'like', '%'.$search.'%')
+                            ->orWhere('debts.remarks', 'like', '%'.$search.'%')
+                            ->orWhereHas('category', function ($categoryQuery) use ($search) {
+                                $categoryQuery->where('debt_categories.code', 'like', '%'.$search.'%')
+                                    ->orWhere('debt_categories.name', 'like', '%'.$search.'%');
+                            })
+                            ->orWhereHas('creditor', function ($creditorQuery) use ($search) {
+                                $creditorQuery->where('debt_creditors.code', 'like', '%'.$search.'%')
+                                    ->orWhere('debt_creditors.name', 'like', '%'.$search.'%');
+                            })
+                            ->orWhereHas('supplier', function ($supplierQuery) use ($search) {
+                                $supplierQuery->where('suppliers.code', 'like', '%'.$search.'%')
+                                    ->orWhere('suppliers.name', 'like', '%'.$search.'%');
+                            });
+                    });
+                }
+
+                if (! is_null($categoryId)) {
+                    $query->where('debts.category_id', $categoryId);
+                }
+
+                if (! is_null($creditorId)) {
+                    $query->where('debts.creditor_id', $creditorId);
+                }
+
+                if (! is_null($supplierId)) {
+                    $query->where('debts.supplier_id', $supplierId);
+                }
+
+                if (! is_null($isPaidOff)) {
+                    $query->where('debts.is_paid_off', $isPaidOff);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('debts.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(debts.id, '.$includeId.') desc');
+        }
+        $query->orderBy('debts.date', 'desc');
+        $query->orderBy('debts.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $categoryId ?? '[null]',
+                    $creditorId ?? '[null]',
+                    $supplierId ?? '[null]',
+                    is_null($isPaidOff) ? '[null]' : ($isPaidOff ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_debt_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Debt $debt): Debt
+    {
+        return $debt->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = Debt::whereCompanyId('debts', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'DEB'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = Debt::whereCompanyId('debts', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(DebtCreateDTO $data): Debt
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $debt = new Debt();
+            $debt->company_id = $data->companyId;
+            $debt->branch_id = $data->branchId;
+            $debt->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $debt->date = $this->generateDate($data->date);
+            $debt->category_id = $data->categoryId;
+            $debt->creditor_id = $data->creditorId;
+            $debt->supplier_id = $data->supplierId;
+            $debt->cash_account_id = $data->cashAccountId;
+            $debt->direct_amount_received = $data->directAmountReceived;
+            $debt->opening_amount_due = $data->openingAmountDue;
+            $debt->due_days = $data->dueDays;
+            $debt->remarks = $data->remarks;
+            $debt->save();
+
+            if ($debt->cash_account_id && $debt->direct_amount_received > 0) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromDebt($debt)
+                );
+            }
+
+            foreach ($data->payments as $payment) {
+                $dto = new DebtPaymentCreateDTO(
+                    companyId: $debt->company_id,
+                    branchId: $debt->branch_id,
+                    code: $payment['code'],
+                    date: $payment['date'],
+                    debtId: $debt->id,
+                    cashAccountId: $payment['cash_account_id'],
+                    amount: $payment['amount'],
+                    remarks: $payment['remarks'],
+                );
+                $this->debtPaymentActions->create($dto, false);
+            }
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $debt->company_id,
+                branchId: $debt->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $debt->date,
+                journalType: null,
+                sourceType: Debt::class,
+                sourceId: $debt->id,
+                referenceNo: $debt->code,
+                remarks: $debt->remarks,
+                items: (function () use ($debt) {
+                    $items = [];
+
+                    if ((float) $debt->direct_amount_received > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $debt->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $debt->direct_amount_received,
+                            credit: 0,
+                            remarks: $debt->remarks,
+                        );
+                    }
+
+                    if ((float) $debt->opening_amount_due > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $debt->company->equityCapitalOpeningCapitalChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $debt->opening_amount_due,
+                            credit: 0,
+                            remarks: $debt->remarks,
+                        );
+                    }
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: (function () use ($debt) {
+                            if ($debt->supplier_id) {
+                                return $debt->supplier?->chartOfAccount?->id;
+                            }
+
+                            if ($debt->creditor_id) {
+                                return $debt->creditor?->chartOfAccount?->id;
+                            }
+
+                            return $debt->company->liabilityAccountPayableChartOfAccount?->id;
+                        })(),
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $debt->amount_total,
+                        remarks: $debt->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            self::updateSummary($debt);
+
+            $this->flushCache();
+
+            return $debt;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Debt $debt, DebtUpdateDTO $data): Debt
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $debt->code = $this->generateUniqueCode($debt->company_id, $data->code, $debt->id);
+            $debt->date = $this->generateDate($data->date);
+            $debt->category_id = $data->categoryId;
+            $debt->creditor_id = $data->creditorId;
+            $debt->supplier_id = $data->supplierId;
+            $debt->cash_account_id = $data->cashAccountId;
+            $debt->direct_amount_received = $data->directAmountReceived;
+            $debt->opening_amount_due = $data->openingAmountDue;
+            $debt->due_days = $data->dueDays;
+            $debt->remarks = $data->remarks;
+            $debt->save();
+
+            $cashTransaction = $debt->cashTransaction;
+            if ($debt->cash_account_id && $debt->direct_amount_received > 0) {
+                if (! $cashTransaction) {
+                    $this->cashTransactionActions->create(
+                        data: CashTransactionCreateDTO::fromDebt($debt)
+                    );
+                } else {
+                    $this->cashTransactionActions->update(
+                        cashTransaction: $cashTransaction,
+                        data: CashTransactionUpdateDTO::fromDebt($debt)
+                    );
+                }
+            } elseif ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            foreach ($data->deletePaymentIds as $deleteId) {
+                $debtPayment = $debt->payments()->findOrFail($deleteId);
+                $this->debtPaymentActions->delete($debtPayment, false);
+            }
+
+            foreach ($data->payments as $payment) {
+                if (! empty($payment['id'])) {
+                    $debtPayment = $debt->payments()->findOrFail($payment['id']);
+                    $dto = new DebtPaymentUpdateDTO(
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->debtPaymentActions->update($debtPayment, $dto, false);
+                } else {
+                    $dto = new DebtPaymentCreateDTO(
+                        companyId: $debt->company_id,
+                        branchId: $debt->branch_id,
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        debtId: $debt->id,
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->debtPaymentActions->create($dto, false);
+                }
+            }
+
+            $journalEntry = $debt->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $debt->company_id,
+                    branchId: $debt->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $debt->date,
+                    journalType: null,
+                    sourceType: Debt::class,
+                    sourceId: $debt->id,
+                    referenceNo: $debt->code,
+                    remarks: $debt->remarks,
+                    items: (function () use ($debt) {
+                        $items = [];
+
+                        if ((float) $debt->direct_amount_received > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $debt->cashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $debt->direct_amount_received,
+                                credit: 0,
+                                remarks: $debt->remarks,
+                            );
+                        }
+
+                        if ((float) $debt->opening_amount_due > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $debt->company->equityCapitalOpeningCapitalChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $debt->opening_amount_due,
+                                credit: 0,
+                                remarks: $debt->remarks,
+                            );
+                        }
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: (function () use ($debt) {
+                                if ($debt->supplier_id) {
+                                    return $debt->supplier?->chartOfAccount?->id;
+                                }
+
+                                if ($debt->creditor_id) {
+                                    return $debt->creditor?->chartOfAccount?->id;
+                                }
+
+                                return $debt->company->liabilityAccountPayableChartOfAccount?->id;
+                            })(),
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $debt->amount_total,
+                            remarks: $debt->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $debt->branch_id,
+                    code: $journalEntry->code,
+                    date: $debt->date,
+                    journalType: null,
+                    referenceNo: $debt->code,
+                    remarks: $debt->remarks,
+                    items: (function () use ($debt) {
+                        $items = [];
+
+                        if ((float) $debt->direct_amount_received > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $debt->cashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $debt->direct_amount_received,
+                                credit: 0,
+                                remarks: $debt->remarks,
+                            );
+                        }
+
+                        if ((float) $debt->opening_amount_due > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $debt->company->equityCapitalOpeningCapitalChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $debt->opening_amount_due,
+                                credit: 0,
+                                remarks: $debt->remarks,
+                            );
+                        }
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: (function () use ($debt) {
+                                if ($debt->supplier_id) {
+                                    return $debt->supplier?->chartOfAccount?->id;
+                                }
+
+                                if ($debt->creditor_id) {
+                                    return $debt->creditor?->chartOfAccount?->id;
+                                }
+
+                                return $debt->company->liabilityAccountPayableChartOfAccount?->id;
+                            })(),
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $debt->amount_total,
+                            remarks: $debt->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            self::updateSummary($debt);
+
+            $this->flushCache();
+
+            return $debt;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(Debt $debt): void
+    {
+        $debt->refresh();
+
+        $debt->amount_total = (float) $debt->direct_amount_received + (float) $debt->opening_amount_due;
+        $debt->amount_paid_by_cash_account = (float) $debt->payments()->sum('amount');
+        // Stock-adjustment settlement link is not implemented yet in this batch.
+        $debt->amount_paid_by_stock_adjustment = 0;
+        $debt->amount_due = max(
+            0,
+            (float) $debt->amount_total
+                - (float) $debt->amount_paid_by_cash_account
+                - (float) $debt->amount_paid_by_stock_adjustment
+        );
+        $debt->is_paid_off = $debt->amount_due == 0;
+        $debt->save();
+    }
+
+    public function delete(Debt $debt): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $debt->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            foreach ($debt->payments as $payment) {
+                $this->debtPaymentActions->delete($payment, false);
+            }
+
+            $journalEntry = $debt->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $debt->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/DebtCategory/DebtCategoryActions.php b/api/app/Actions/DebtCategory/DebtCategoryActions.php
new file mode 100644
index 000000000..c0ee6160f
--- /dev/null
+++ b/api/app/Actions/DebtCategory/DebtCategoryActions.php
@@ -0,0 +1,243 @@
+<?php
+
+namespace App\Actions\DebtCategory;
+
+use App\DTOs\DebtCategoryCreateDTO;
+use App\DTOs\DebtCategoryUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\DebtCategory;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class DebtCategoryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = DebtCategory::with(self::LIST_EAGER_LOADS)
+            ->select('debt_categories.*')
+            ->whereCompanyId('debt_categories', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('debt_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('debt_categories.name', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('debt_categories.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(debt_categories.id, '.$includeId.') desc');
+        }
+        $query->orderBy('debt_categories.sequence', 'asc')
+            ->orderBy('debt_categories.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_debt_category_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(DebtCategory $debtCategory): DebtCategory
+    {
+        return $debtCategory->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(DebtCategoryCreateDTO $data): DebtCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $debtCategory = new DebtCategory();
+            $debtCategory->company_id = $data->companyId;
+            $debtCategory->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $debtCategory->name = $data->name;
+            $debtCategory->sequence = $data->sequence;
+            $debtCategory->save();
+
+            $this->flushCache();
+
+            return $debtCategory;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(DebtCategory $debtCategory, DebtCategoryUpdateDTO $data): DebtCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $debtCategory->code = $this->generateUniqueCode(
+                $debtCategory->company_id,
+                $data->code,
+                $debtCategory->id,
+            );
+            $debtCategory->name = $data->name;
+            $debtCategory->sequence = $data->sequence;
+            $debtCategory->save();
+
+            $this->flushCache();
+
+            return $debtCategory->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(DebtCategory $debtCategory): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $debtCategory->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $tryCount = 0;
+        do {
+            $count = DebtCategory::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'DCT'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $query = DebtCategory::where('company_id', $companyId)
+            ->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('debt_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $query = DebtCategory::where('company_id', $companyId)
+            ->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('debt_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/DebtCreditor/DebtCreditorActions.php b/api/app/Actions/DebtCreditor/DebtCreditorActions.php
new file mode 100644
index 000000000..70ac63542
--- /dev/null
+++ b/api/app/Actions/DebtCreditor/DebtCreditorActions.php
@@ -0,0 +1,253 @@
+<?php
+
+namespace App\Actions\DebtCreditor;
+
+use App\DTOs\DebtCreditorCreateDTO;
+use App\DTOs\DebtCreditorUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\Company;
+use App\Models\DebtCreditor;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class DebtCreditorActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+
+        ?string $search,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = DebtCreditor::with(self::LIST_EAGER_LOADS)->select('debt_creditors.*')
+            ->where('debt_creditors.company_id', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('debt_creditors.code', 'like', '%'.$search.'%')
+                            ->orWhere('debt_creditors.name', 'like', '%'.$search.'%')
+                            ->orWhere('debt_creditors.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('debt_creditors.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(debt_creditors.id, '.$includeId.') desc');
+        }
+        $query->orderBy('debt_creditors.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_debt_creditor_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(DebtCreditor $debtCreditor): DebtCreditor
+    {
+        return $debtCreditor->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(DebtCreditorCreateDTO $data): DebtCreditor
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $debtCreditor = new DebtCreditor();
+            $debtCreditor->company_id = $data->companyId;
+            $debtCreditor->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $debtCreditor->name = $data->name;
+            $debtCreditor->remarks = $data->remarks;
+            $debtCreditor->save();
+
+            $this->flushCache();
+
+            return $debtCreditor;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(DebtCreditor $debtCreditor, DebtCreditorUpdateDTO $data): DebtCreditor
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $debtCreditor->code = $this->generateUniqueCode($debtCreditor->company_id, $data->code, $debtCreditor->id);
+            $debtCreditor->name = $data->name;
+            $debtCreditor->remarks = $data->remarks;
+            $debtCreditor->save();
+
+            $this->flushCache();
+
+            return $debtCreditor->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(DebtCreditor $debtCreditor): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $debtCreditor->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->debt_creditors()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'DCR'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->debt_creditors()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->debt_creditors()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('debt_creditors.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->debt_creditors()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->debt_creditors()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('debt_creditors.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/DebtPayment/DebtPaymentActions.php b/api/app/Actions/DebtPayment/DebtPaymentActions.php
new file mode 100644
index 000000000..61391e4d5
--- /dev/null
+++ b/api/app/Actions/DebtPayment/DebtPaymentActions.php
@@ -0,0 +1,445 @@
+<?php
+
+namespace App\Actions\DebtPayment;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\Debt\DebtActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\DebtPaymentCreateDTO;
+use App\DTOs\DebtPaymentUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\DebtPayment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class DebtPaymentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'debt.category',
+        'debt.creditor',
+        'debt.supplier',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $debtId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = DebtPayment::with(self::LIST_EAGER_LOADS)
+            ->select('debt_payments.*')
+            ->whereCompanyId('debt_payments', $companyId)
+            ->whereBranchId('debt_payments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $debtId,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $debtId,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('debt_payments.code', 'like', '%'.$search.'%')
+                            ->orWhere('debt_payments.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($debtId)) {
+                    $query->where('debt_payments.debt_id', $debtId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('debt_payments.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(debt_payments.id, '.$includeId.') desc');
+        }
+        $query->orderBy('debt_payments.date', 'desc');
+        $query->orderBy('debt_payments.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $debtId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_debt_payment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(DebtPayment $debtPayment): DebtPayment
+    {
+        return $debtPayment->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = DebtPayment::whereCompanyId('debt_payments', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'DPM'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = DebtPayment::whereCompanyId('debt_payments', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(DebtPaymentCreateDTO $data, bool $updateParentSummary = true): DebtPayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $debtPayment = new DebtPayment();
+            $debtPayment->company_id = $data->companyId;
+            $debtPayment->branch_id = $data->branchId;
+            $debtPayment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $debtPayment->date = $this->generateDate($data->date);
+            $debtPayment->debt_id = $data->debtId;
+            $debtPayment->cash_account_id = $data->cashAccountId;
+            $debtPayment->amount = $data->amount;
+            $debtPayment->remarks = $data->remarks;
+            $debtPayment->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromDebtPayment($debtPayment)
+            );
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $debtPayment->company_id,
+                branchId: $debtPayment->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $debtPayment->date,
+                journalType: null,
+                sourceType: DebtPayment::class,
+                sourceId: $debtPayment->id,
+                referenceNo: $debtPayment->code,
+                remarks: $debtPayment->remarks,
+                items: (function () use ($debtPayment) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: (function () use ($debtPayment) {
+                            if ($debtPayment->debt->supplier_id) {
+                                return $debtPayment->debt->supplier?->chartOfAccount?->id;
+                            }
+
+                            if ($debtPayment->debt->creditor_id) {
+                                return $debtPayment->debt->creditor?->chartOfAccount?->id;
+                            }
+
+                            return $debtPayment->debt->company->liabilityAccountPayableChartOfAccount?->id;
+                        })(),
+                        sequence: count($items) + 1,
+                        debit: (float) $debtPayment->amount,
+                        credit: 0,
+                        remarks: $debtPayment->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $debtPayment->cashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $debtPayment->amount,
+                        remarks: $debtPayment->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            if ($updateParentSummary) {
+                DebtActions::updateSummary($debtPayment->debt);
+                $debtPayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $debtPayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(DebtPayment $debtPayment, DebtPaymentUpdateDTO $data, bool $updateParentSummary = true): DebtPayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $debtPayment->code = $this->generateUniqueCode($debtPayment->company_id, $data->code, $debtPayment->id);
+            $debtPayment->date = $this->generateDate($data->date);
+            $debtPayment->cash_account_id = $data->cashAccountId;
+            $debtPayment->amount = $data->amount;
+            $debtPayment->remarks = $data->remarks;
+            $debtPayment->save();
+
+            $cashTransaction = $debtPayment->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromDebtPayment($debtPayment)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromDebtPayment($debtPayment)
+                );
+            }
+
+            $journalEntry = $debtPayment->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $debtPayment->company_id,
+                    branchId: $debtPayment->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $debtPayment->date,
+                    journalType: null,
+                    sourceType: DebtPayment::class,
+                    sourceId: $debtPayment->id,
+                    referenceNo: $debtPayment->code,
+                    remarks: $debtPayment->remarks,
+                    items: (function () use ($debtPayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: (function () use ($debtPayment) {
+                                if ($debtPayment->debt->supplier_id) {
+                                    return $debtPayment->debt->supplier?->chartOfAccount?->id;
+                                }
+
+                                if ($debtPayment->debt->creditor_id) {
+                                    return $debtPayment->debt->creditor?->chartOfAccount?->id;
+                                }
+
+                                return $debtPayment->debt->company->liabilityAccountPayableChartOfAccount?->id;
+                            })(),
+                            sequence: count($items) + 1,
+                            debit: (float) $debtPayment->amount,
+                            credit: 0,
+                            remarks: $debtPayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $debtPayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $debtPayment->amount,
+                            remarks: $debtPayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $debtPayment->branch_id,
+                    code: $journalEntry->code,
+                    date: $debtPayment->date,
+                    journalType: null,
+                    referenceNo: $debtPayment->code,
+                    remarks: $debtPayment->remarks,
+                    items: (function () use ($debtPayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: (function () use ($debtPayment) {
+                                if ($debtPayment->debt->supplier_id) {
+                                    return $debtPayment->debt->supplier?->chartOfAccount?->id;
+                                }
+
+                                if ($debtPayment->debt->creditor_id) {
+                                    return $debtPayment->debt->creditor?->chartOfAccount?->id;
+                                }
+
+                                return $debtPayment->debt->company->liabilityAccountPayableChartOfAccount?->id;
+                            })(),
+                            sequence: count($items) + 1,
+                            debit: (float) $debtPayment->amount,
+                            credit: 0,
+                            remarks: $debtPayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $debtPayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $debtPayment->amount,
+                            remarks: $debtPayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            if ($updateParentSummary) {
+                DebtActions::updateSummary($debtPayment->debt);
+                $debtPayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $debtPayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(
+        DebtPayment $debtPayment,
+        bool $updateParentSummary = true,
+    ): bool {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $debtPayment->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $debtPayment->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $debtPayment->delete();
+
+            if ($updateParentSummary) {
+                DebtActions::updateSummary($debtPayment->debt);
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/Employee/EmployeeActions.php b/api/app/Actions/Employee/EmployeeActions.php
new file mode 100644
index 000000000..12183afb1
--- /dev/null
+++ b/api/app/Actions/Employee/EmployeeActions.php
@@ -0,0 +1,240 @@
+<?php
+
+namespace App\Actions\Employee;
+
+use App\DTOs\EmployeeCreateDTO;
+use App\DTOs\EmployeeUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class EmployeeActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $userId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Employee::select('employees.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'employees.company_id')
+            ->whereCompanyId('employees', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $userId, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search, $userId) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where('employees.code', 'like', '%'.$search.'%')
+                        ->orWhere('employees.remarks', 'like', '%'.$search.'%');
+                }
+
+                if ($userId) {
+                    $query->where('employees.user_id', $userId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('employees.id', $includeId);
+            }
+        });
+
+        if ($includeId) $query->orderByRaw('FIELD(employees.id, '.$includeId.') desc');
+        $query->orderBy('companies.name', 'asc')
+            ->orderBy('employees.name', 'asc')
+            ->orderBy('employees.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $userId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_employee_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Employee $employee): Employee
+    {
+        return $employee->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(EmployeeCreateDTO $data): Employee
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $employee = new Employee();
+            $employee->company_id = $data->companyId;
+            $employee->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $employee->name = $data->name;
+            $employee->remarks = $data->remarks;
+            $employee->save();
+
+            $this->flushCache();
+
+            return $employee;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Employee $employee, EmployeeUpdateDTO $data): Employee
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $employee->company_id = $data->companyId;
+            $employee->code = $this->generateUniqueCode($employee->company_id, $data->code, $employee->id);
+            $employee->name = $data->name;
+            $employee->remarks = $data->remarks;
+            $employee->save();
+
+            $this->flushCache();
+
+            return $employee->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(Employee $employee): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $employee->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $company = Company::find($companyId);
+
+            $tryCount = 0;
+            do {
+                $count = $company->employees()->withTrashed()->count() + 1 + $tryCount;
+                $code = 'EMP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        } else {
+            return $code;
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = Employee::whereCompanyId('employees', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0 ? true : false;
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $result = Employee::whereCompanyId('employees', $companyId)->where('name', '=', $name);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0 ? true : false;
+    }
+}
diff --git a/api/app/Actions/Expense/ExpenseActions.php b/api/app/Actions/Expense/ExpenseActions.php
new file mode 100644
index 000000000..96916f090
--- /dev/null
+++ b/api/app/Actions/Expense/ExpenseActions.php
@@ -0,0 +1,1038 @@
+<?php
+
+namespace App\Actions\Expense;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\ExpenseImage\ExpenseImageActions;
+use App\Actions\ExpensePayment\ExpensePaymentActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExpenseCreateDTO;
+use App\DTOs\ExpenseImageDTO;
+use App\DTOs\ExpensePaymentCreateDTO;
+use App\DTOs\ExpensePaymentUpdateDTO;
+use App\DTOs\ExpenseUpdateDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Enums\JournalEntryTypeEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\Expense;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Carbon\Carbon;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ExpenseActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'paidImmediatelyCashAccount',
+        'mainImage',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'paidImmediatelyCashAccount',
+        'images',
+        'mainImage',
+        'payments.cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly ExpenseImageActions $expenseImageActions,
+        private readonly ExpensePaymentActions $expensePaymentActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $categoryId,
+        ?bool $isAmountPayablePaidOff,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Expense::select('expenses.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->whereCompanyId('expenses', $companyId)
+            ->whereBranchId('expenses', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $categoryId,
+            $isAmountPayablePaidOff,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $categoryId,
+                $isAmountPayablePaidOff,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('expenses.code', 'like', '%'.$search.'%')
+                            ->orWhere('expenses.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($categoryId)) {
+                    $query->where('expenses.expense_category_id', $categoryId);
+                }
+
+                if (! is_null($isAmountPayablePaidOff)) {
+                    $query->where('expenses.is_amount_payable_paid_off', $isAmountPayablePaidOff);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('expenses.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(expenses.id, '.$includeId.') desc');
+        }
+        $query->orderBy('expenses.date', 'desc');
+        $query->orderBy('expenses.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $categoryId ?? '[null]',
+                    is_null($isAmountPayablePaidOff) ? '[null]' : ($isAmountPayablePaidOff ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_expense_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Expense $expense): Expense
+    {
+        return $expense->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = Expense::whereCompanyId('expenses', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'EXP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = Expense::whereCompanyId('expenses', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(ExpenseCreateDTO $data): Expense
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $expense = new Expense();
+            $expense->company_id = $data->companyId;
+            $expense->branch_id = $data->branchId;
+            $expense->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $expense->date = $this->generateDate($data->date);
+            $expense->expense_category_id = $data->expenseCategoryId;
+            $expense->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $expense->amount_paid_immediately = $data->amountPaidImmediately;
+            $expense->amount_payable = $data->amountPayable;
+            $expense->due_days = $data->dueDays;
+            $expense->remarks = $data->remarks;
+            $expense->save();
+
+            if ($expense->paid_immediately_cash_account_id && $expense->amount_paid_immediately > 0) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromExpense($expense)
+                );
+            }
+
+            foreach ($data->payments as $payment) {
+                $dto = new ExpensePaymentCreateDTO(
+                    companyId: $expense->company_id,
+                    branchId: $expense->branch_id,
+                    code: $payment['code'],
+                    date: $payment['date'],
+                    expenseId: $expense->id,
+                    cashAccountId: $payment['cash_account_id'],
+                    amount: $payment['amount'],
+                    remarks: $payment['remarks'],
+                );
+                $this->expensePaymentActions->create($dto, false);
+            }
+
+            foreach ($data->images as $image) {
+                $expenseImageDTO = new ExpenseImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->expenseImageActions->attachByHash($expense, $expenseImageDTO);
+            }
+
+            self::updateSummary($expense);
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $expense->company_id,
+                branchId: $expense->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $expense->date,
+                journalType: JournalEntryTypeEnum::TRANSACTION->value,
+                sourceType: Expense::class,
+                sourceId: $expense->id,
+                referenceNo: $expense->code,
+                remarks: $expense->remarks,
+                items: (function () use ($expense) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->category?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $expense->amount_total,
+                        credit: 0,
+                        remarks: $expense->remarks,
+                    );
+
+                    if ((float) $expense->amount_paid_immediately > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_paid_immediately,
+                            remarks: $expense->remarks,
+                        );
+                    }
+
+                    if ((float) $expense->amount_payable > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->liabilityAccountPayableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_payable,
+                            remarks: $expense->remarks,
+                        );
+                    }
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $expense->company_id,
+                branchId: $expense->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $expense->date,
+                journalType: JournalEntryTypeEnum::CURRENT_MONTH_EARNINGS->value,
+                sourceType: Expense::class,
+                sourceId: $expense->id,
+                referenceNo: $expense->code,
+                remarks: $expense->remarks,
+                items: (function () use ($expense) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->company->equityCurrentMonthEarningsChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $expense->amount_total,
+                        credit: 0,
+                        remarks: $expense->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->company->systemSuspenseChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $expense->amount_total,
+                        remarks: $expense->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $expense->company_id,
+                branchId: $expense->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: (function () use ($expense) {
+                    return ($expense->date instanceof Carbon
+                        ? $expense->date->copy()
+                        : Carbon::parse((string) $expense->date))
+                        ->endOfMonth()
+                        ->format('Y-m-d H:i:s');
+                })(),
+                journalType: JournalEntryTypeEnum::MONTH_END_CLOSING->value,
+                sourceType: Expense::class,
+                sourceId: $expense->id,
+                referenceNo: $expense->code,
+                remarks: $expense->remarks,
+                items: (function () use ($expense) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->company->systemSuspenseChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $expense->amount_total,
+                        credit: 0,
+                        remarks: $expense->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->category?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $expense->amount_total,
+                        remarks: $expense->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $expense->company_id,
+                branchId: $expense->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: (function () use ($expense) {
+                    return ($expense->date instanceof Carbon
+                        ? $expense->date->copy()
+                        : Carbon::parse((string) $expense->date))
+                        ->endOfMonth()
+                        ->format('Y-m-d H:i:s');
+                })(),
+                journalType: JournalEntryTypeEnum::MONTH_TO_YEAR_CLOSING->value,
+                sourceType: Expense::class,
+                sourceId: $expense->id,
+                referenceNo: $expense->code,
+                remarks: $expense->remarks,
+                items: (function () use ($expense) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->company->equityCurrentYearEarningsChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $expense->amount_total,
+                        credit: 0,
+                        remarks: $expense->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->company->equityCurrentMonthEarningsChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $expense->amount_total,
+                        remarks: $expense->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $expense->company_id,
+                branchId: $expense->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: (function () use ($expense) {
+                    return ($expense->date instanceof Carbon
+                        ? $expense->date->copy()
+                        : Carbon::parse((string) $expense->date))
+                        ->endOfYear()
+                        ->format('Y-m-d H:i:s');
+                })(),
+                journalType: JournalEntryTypeEnum::YEAR_TO_RETAINED_EARNINGS_CLOSING->value,
+                sourceType: Expense::class,
+                sourceId: $expense->id,
+                referenceNo: $expense->code,
+                remarks: $expense->remarks,
+                items: (function () use ($expense) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->company->equityRetainedEarningsChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $expense->amount_total,
+                        credit: 0,
+                        remarks: $expense->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expense->company->equityCurrentYearEarningsChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $expense->amount_total,
+                        remarks: $expense->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            $this->flushCache();
+
+            return $expense;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Expense $expense, ExpenseUpdateDTO $data): Expense
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $expense->code = $this->generateUniqueCode($expense->company_id, $data->code, $expense->id);
+            $expense->date = $this->generateDate($data->date);
+            $expense->expense_category_id = $data->expenseCategoryId;
+            $expense->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $expense->amount_paid_immediately = $data->amountPaidImmediately;
+            $expense->amount_payable = $data->amountPayable;
+            $expense->due_days = $data->dueDays;
+            $expense->remarks = $data->remarks;
+            $expense->save();
+
+            $cashTransaction = $expense->cashTransaction;
+            if ($expense->paid_immediately_cash_account_id && $expense->amount_paid_immediately > 0) {
+                if (! $cashTransaction) {
+                    $this->cashTransactionActions->create(
+                        data: CashTransactionCreateDTO::fromExpense($expense)
+                    );
+                } else {
+                    $this->cashTransactionActions->update(
+                        cashTransaction: $cashTransaction,
+                        data: CashTransactionUpdateDTO::fromExpense($expense)
+                    );
+                }
+            } elseif ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            foreach ($data->deletePaymentIds as $deleteId) {
+                $expensePayment = $expense->payments()->findOrFail($deleteId);
+                $this->expensePaymentActions->delete($expensePayment, false);
+            }
+
+            foreach ($data->deleteImageIds as $deleteId) {
+                $this->expenseImageActions->detachById($expense, $deleteId);
+            }
+
+            foreach ($data->payments as $payment) {
+                if (! empty($payment['id'])) {
+                    $expensePayment = $expense->payments()->findOrFail($payment['id']);
+                    $dto = new ExpensePaymentUpdateDTO(
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->expensePaymentActions->update($expensePayment, $dto, false);
+                } else {
+                    $dto = new ExpensePaymentCreateDTO(
+                        companyId: $expense->company_id,
+                        branchId: $expense->branch_id,
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        expenseId: $expense->id,
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->expensePaymentActions->create($dto, false);
+                }
+            }
+
+            foreach ($data->images as $image) {
+                $expenseImageDTO = new ExpenseImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->expenseImageActions->attachByHash($expense, $expenseImageDTO);
+            }
+
+            self::updateSummary($expense);
+
+            $journalEntry = $expense->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $expense->company_id,
+                    branchId: $expense->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $expense->date,
+                    journalType: JournalEntryTypeEnum::TRANSACTION->value,
+                    sourceType: Expense::class,
+                    sourceId: $expense->id,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->category?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        if ((float) $expense->amount_paid_immediately > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $expense->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $expense->amount_paid_immediately,
+                                remarks: $expense->remarks,
+                            );
+                        }
+
+                        if ((float) $expense->amount_payable > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $expense->company->liabilityAccountPayableChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $expense->amount_payable,
+                                remarks: $expense->remarks,
+                            );
+                        }
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $expense->branch_id,
+                    code: $journalEntry->code,
+                    date: $expense->date,
+                    journalType: JournalEntryTypeEnum::TRANSACTION->value,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->category?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        if ((float) $expense->amount_paid_immediately > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $expense->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $expense->amount_paid_immediately,
+                                remarks: $expense->remarks,
+                            );
+                        }
+
+                        if ((float) $expense->amount_payable > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $expense->company->liabilityAccountPayableChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $expense->amount_payable,
+                                remarks: $expense->remarks,
+                            );
+                        }
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            $currentMonthEarningsJournalEntry = $expense->currentMonthEarningsJournalEntry;
+            if (! $currentMonthEarningsJournalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $expense->company_id,
+                    branchId: $expense->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $expense->date,
+                    journalType: JournalEntryTypeEnum::CURRENT_MONTH_EARNINGS->value,
+                    sourceType: Expense::class,
+                    sourceId: $expense->id,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityCurrentMonthEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->systemSuspenseChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_total,
+                            remarks: $expense->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $expense->branch_id,
+                    code: $currentMonthEarningsJournalEntry->code,
+                    date: $expense->date,
+                    journalType: JournalEntryTypeEnum::CURRENT_MONTH_EARNINGS->value,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityCurrentMonthEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->systemSuspenseChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_total,
+                            remarks: $expense->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($currentMonthEarningsJournalEntry, $journalEntryDTO);
+            }
+
+            $monthEndClosingJournalEntry = $expense->monthEndClosingJournalEntry;
+            if (! $monthEndClosingJournalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $expense->company_id,
+                    branchId: $expense->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: (function () use ($expense) {
+                        return ($expense->date instanceof Carbon
+                            ? $expense->date->copy()
+                            : Carbon::parse((string) $expense->date))
+                            ->endOfMonth()
+                            ->format('Y-m-d H:i:s');
+                    })(),
+                    journalType: JournalEntryTypeEnum::MONTH_END_CLOSING->value,
+                    sourceType: Expense::class,
+                    sourceId: $expense->id,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->systemSuspenseChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->category?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_total,
+                            remarks: $expense->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $expense->branch_id,
+                    code: $monthEndClosingJournalEntry->code,
+                    date: (function () use ($expense) {
+                        return ($expense->date instanceof Carbon
+                            ? $expense->date->copy()
+                            : Carbon::parse((string) $expense->date))
+                            ->endOfMonth()
+                            ->format('Y-m-d H:i:s');
+                    })(),
+                    journalType: JournalEntryTypeEnum::MONTH_END_CLOSING->value,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->systemSuspenseChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->category?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_total,
+                            remarks: $expense->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($monthEndClosingJournalEntry, $journalEntryDTO);
+            }
+
+            $monthToYearClosingJournalEntry = $expense->monthToYearClosingJournalEntry;
+            if (! $monthToYearClosingJournalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $expense->company_id,
+                    branchId: $expense->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: (function () use ($expense) {
+                        return ($expense->date instanceof Carbon
+                            ? $expense->date->copy()
+                            : Carbon::parse((string) $expense->date))
+                            ->endOfMonth()
+                            ->format('Y-m-d H:i:s');
+                    })(),
+                    journalType: JournalEntryTypeEnum::MONTH_TO_YEAR_CLOSING->value,
+                    sourceType: Expense::class,
+                    sourceId: $expense->id,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityCurrentYearEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityCurrentMonthEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_total,
+                            remarks: $expense->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $expense->branch_id,
+                    code: $monthToYearClosingJournalEntry->code,
+                    date: (function () use ($expense) {
+                        return ($expense->date instanceof Carbon
+                            ? $expense->date->copy()
+                            : Carbon::parse((string) $expense->date))
+                            ->endOfMonth()
+                            ->format('Y-m-d H:i:s');
+                    })(),
+                    journalType: JournalEntryTypeEnum::MONTH_TO_YEAR_CLOSING->value,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityCurrentYearEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityCurrentMonthEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_total,
+                            remarks: $expense->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($monthToYearClosingJournalEntry, $journalEntryDTO);
+            }
+
+            $yearToRetainedEarningsClosingJournalEntry = $expense->yearToRetainedEarningsClosingJournalEntry;
+            if (! $yearToRetainedEarningsClosingJournalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $expense->company_id,
+                    branchId: $expense->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: (function () use ($expense) {
+                        return ($expense->date instanceof Carbon
+                            ? $expense->date->copy()
+                            : Carbon::parse((string) $expense->date))
+                            ->endOfYear()
+                            ->format('Y-m-d H:i:s');
+                    })(),
+                    journalType: JournalEntryTypeEnum::YEAR_TO_RETAINED_EARNINGS_CLOSING->value,
+                    sourceType: Expense::class,
+                    sourceId: $expense->id,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityRetainedEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityCurrentYearEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_total,
+                            remarks: $expense->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $expense->branch_id,
+                    code: $yearToRetainedEarningsClosingJournalEntry->code,
+                    date: (function () use ($expense) {
+                        return ($expense->date instanceof Carbon
+                            ? $expense->date->copy()
+                            : Carbon::parse((string) $expense->date))
+                            ->endOfYear()
+                            ->format('Y-m-d H:i:s');
+                    })(),
+                    journalType: JournalEntryTypeEnum::YEAR_TO_RETAINED_EARNINGS_CLOSING->value,
+                    referenceNo: $expense->code,
+                    remarks: $expense->remarks,
+                    items: (function () use ($expense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityRetainedEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expense->amount_total,
+                            credit: 0,
+                            remarks: $expense->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expense->company->equityCurrentYearEarningsChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expense->amount_total,
+                            remarks: $expense->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($yearToRetainedEarningsClosingJournalEntry, $journalEntryDTO);
+            }
+
+            $this->flushCache();
+
+            return $expense;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(Expense $expense): void
+    {
+        $expense->refresh();
+
+        $expense->amount_payable_paid = (float) $expense->payments()->sum('amount');
+        $expense->amount_payable_due = max(0, $expense->amount_payable - $expense->amount_payable_paid);
+        $expense->is_amount_payable_paid_off = $expense->amount_payable_due == 0;
+        $expense->amount_total = (float) ($expense->amount_paid_immediately + $expense->amount_payable);
+        $expense->save();
+    }
+
+    public function delete(Expense $expense): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            foreach ($expense->payments as $payment) {
+                $this->expensePaymentActions->delete($payment, false);
+            }
+
+            $cashTransaction = $expense->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $expense->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $currentMonthEarningsJournalEntry = $expense->currentMonthEarningsJournalEntry;
+            if ($currentMonthEarningsJournalEntry) $this->journalEntryActions->delete($currentMonthEarningsJournalEntry);
+
+            $monthEndClosingJournalEntry = $expense->monthEndClosingJournalEntry;
+            if ($monthEndClosingJournalEntry) $this->journalEntryActions->delete($monthEndClosingJournalEntry);
+
+            $monthToYearClosingJournalEntry = $expense->monthToYearClosingJournalEntry;
+            if ($monthToYearClosingJournalEntry) $this->journalEntryActions->delete($monthToYearClosingJournalEntry);
+
+            $yearToRetainedEarningsClosingJournalEntry = $expense->yearToRetainedEarningsJournalEntry;
+            if ($yearToRetainedEarningsClosingJournalEntry) $this->journalEntryActions->delete($yearToRetainedEarningsClosingJournalEntry);
+
+            $retval = $expense->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/ExpenseCategory/ExpenseCategoryActions.php b/api/app/Actions/ExpenseCategory/ExpenseCategoryActions.php
new file mode 100644
index 000000000..6e01068a3
--- /dev/null
+++ b/api/app/Actions/ExpenseCategory/ExpenseCategoryActions.php
@@ -0,0 +1,434 @@
+<?php
+
+namespace App\Actions\ExpenseCategory;
+
+use App\Actions\ChartOfAccount\ChartOfAccountActions;
+use App\DTOs\ChartOfAccountCreateDTO;
+use App\DTOs\ChartOfAccountUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExpenseCategoryCreateDTO;
+use App\DTOs\ExpenseCategoryUpdateDTO;
+use App\Enums\ExpenseCategoryTypeEnum;
+use App\Models\ExpenseCategory;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+use InvalidArgumentException;
+
+class ExpenseCategoryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const PAGINATED_LIST_EAGER_LOADS = [
+        'company',
+        'parent',
+        'chartOfAccount.parent',
+    ];
+
+    private const TREE_LIST_EAGER_LOADS = [
+        'company',
+        'parent',
+        'childrenRecursive',
+        'chartOfAccount.parent',
+    ];
+
+    public function __construct(
+        private readonly ChartOfAccountActions $chartOfAccountActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $parentId,
+        ?bool $hasParent,
+        ?bool $hasChildren,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $eagerLoads = $execute?->pagination
+            ? self::PAGINATED_LIST_EAGER_LOADS
+            : self::TREE_LIST_EAGER_LOADS;
+
+        $query = ExpenseCategory::with($eagerLoads)
+            ->select('expense_categories.*')
+            ->whereCompanyId('expense_categories', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $parentId,
+            $hasParent,
+            $hasChildren,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $parentId,
+                $hasParent,
+                $hasChildren,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('expense_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('expense_categories.name', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if ($parentId) {
+                    $query->where('expense_categories.parent_id', $parentId);
+                }
+
+                if (! is_null($hasParent)) {
+                    if ($hasParent) {
+                        $query->whereNotNull('expense_categories.parent_id');
+                    } else {
+                        $query->whereNull('expense_categories.parent_id');
+                    }
+                }
+
+                if (! is_null($hasChildren)) {
+                    $hasChildren
+                        ? $query->whereHas('children')
+                        : $query->whereDoesntHave('children');
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('expense_categories.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(expense_categories.id, '.$includeId.') desc');
+        }
+        $query->orderBy('expense_categories.sequence', 'asc')
+            ->orderBy('expense_categories.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $parentId ?? '[null]',
+                    is_null($hasParent) ? '[null]' : ($hasParent ? 'true' : 'false'),
+                    is_null($hasChildren) ? '[null]' : ($hasChildren ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_expense_category_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(ExpenseCategory $expenseCategory): ExpenseCategory
+    {
+        return $expenseCategory->load(self::TREE_LIST_EAGER_LOADS);
+    }
+
+    public function hasChildren(ExpenseCategory $expenseCategory): bool
+    {
+        return $expenseCategory->children()->exists();
+    }
+
+    public function create(ExpenseCategoryCreateDTO $data): ExpenseCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $expenseCategory = new ExpenseCategory();
+            $expenseCategory->company_id = $data->companyId;
+            $expenseCategory->parent_id = $data->parentId;
+            $expenseCategory->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $expenseCategory->name = $data->name;
+            $expenseCategory->sequence = $data->sequence;
+            $expenseCategory->save();
+
+            if ($expenseCategory->parent_id) {
+                $parentChartOfAccount = $expenseCategory->parent?->chartOfAccount;
+                if (! $parentChartOfAccount) {
+                    throw new InvalidArgumentException('Expense category parent chart of account must exist in company.');
+                }
+            } else {
+                if ($data->categoryType === ExpenseCategoryTypeEnum::OTHER_EXPENSE->value) {
+                    $parentChartOfAccount = $expenseCategory->company->otherExpenseRootChartOfAccount;
+                } else {
+                    $parentChartOfAccount = $expenseCategory->company->expenseRootChartOfAccount;
+                }
+
+                if (! $parentChartOfAccount) {
+                    throw new InvalidArgumentException('Expense category chart of account parent must exist in company.');
+                }
+            }
+
+            $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                companyId: $expenseCategory->company_id,
+                scope: 'user',
+                systemKey: null,
+                parentId: $parentChartOfAccount->id,
+                sourceType: ExpenseCategory::class,
+                sourceId: $expenseCategory->id,
+                code: $parentChartOfAccount->code.'.'.$expenseCategory->code,
+                name: $expenseCategory->name,
+                normalBalance: 'debit',
+                isGroup: false,
+                isActive: true,
+                remarks: null,
+            );
+            $this->chartOfAccountActions->create($chartOfAccountDTO);
+
+            if ($expenseCategory->parent_id) {
+                $parentExpenseCategoryChartOfAccount = $expenseCategory->parent?->chartOfAccount;
+                if ($parentExpenseCategoryChartOfAccount && ! $parentExpenseCategoryChartOfAccount->is_group) {
+                    $parentExpenseCategoryChartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                        parentId: $parentExpenseCategoryChartOfAccount->parent_id,
+                        code: $parentExpenseCategoryChartOfAccount->code,
+                        name: $parentExpenseCategoryChartOfAccount->name,
+                        normalBalance: 'debit',
+                        isGroup: true,
+                        isActive: $parentExpenseCategoryChartOfAccount->is_active,
+                        remarks: $parentExpenseCategoryChartOfAccount->remarks,
+                    );
+                    $this->chartOfAccountActions->update($parentExpenseCategoryChartOfAccount, $parentExpenseCategoryChartOfAccountDTO);
+                }
+            }
+
+            $this->flushCache();
+
+            return $expenseCategory;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(ExpenseCategory $expenseCategory, ExpenseCategoryUpdateDTO $data): ExpenseCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $expenseCategory->code = $this->generateUniqueCode(
+                $expenseCategory->company_id,
+                $data->code,
+                $expenseCategory->id,
+            );
+            $expenseCategory->name = $data->name;
+            $expenseCategory->sequence = $data->sequence;
+            $expenseCategory->save();
+
+            if ($expenseCategory->parent_id) {
+                $parentChartOfAccount = $expenseCategory->parent?->chartOfAccount;
+                if (! $parentChartOfAccount) {
+                    throw new InvalidArgumentException('Expense category parent chart of account must exist in company.');
+                }
+            } else {
+                if ($data->categoryType === ExpenseCategoryTypeEnum::OTHER_EXPENSE->value) {
+                    $parentChartOfAccount = $expenseCategory->company->otherExpenseRootChartOfAccount;
+                } else {
+                    $parentChartOfAccount = $expenseCategory->company->expenseRootChartOfAccount;
+                }
+
+                if (! $parentChartOfAccount) {
+                    throw new InvalidArgumentException('Expense category chart of account parent must exist in company.');
+                }
+            }
+
+            $chartOfAccount = $expenseCategory->chartOfAccount;
+            if ($chartOfAccount) {
+                $chartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $parentChartOfAccount->id,
+                    code: $parentChartOfAccount->code.'.'.$expenseCategory->code,
+                    name: $expenseCategory->name,
+                    normalBalance: 'debit',
+                    isGroup: $expenseCategory->children()->exists(),
+                    isActive: true,
+                    remarks: null,
+                );
+                $chartOfAccount = $this->chartOfAccountActions->update($chartOfAccount, $chartOfAccountDTO);
+            } else {
+                $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                    companyId: $expenseCategory->company_id,
+                    scope: 'user',
+                    systemKey: null,
+                    parentId: $parentChartOfAccount->id,
+                    sourceType: ExpenseCategory::class,
+                    sourceId: $expenseCategory->id,
+                    code: $parentChartOfAccount->code.'.'.$expenseCategory->code,
+                    name: $expenseCategory->name,
+                    normalBalance: 'debit',
+                    isGroup: $expenseCategory->children()->exists(),
+                    isActive: true,
+                    remarks: null,
+                );
+                $chartOfAccount = $this->chartOfAccountActions->create($chartOfAccountDTO);
+            }
+
+            foreach ($expenseCategory->children as $childExpenseCategory) {
+                $childChartOfAccount = $childExpenseCategory->chartOfAccount;
+                if (! $childChartOfAccount) {
+                    continue;
+                }
+
+                $childChartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $chartOfAccount->id,
+                    code: $chartOfAccount->code.'.'.$childExpenseCategory->code,
+                    name: $childExpenseCategory->name,
+                    normalBalance: 'debit',
+                    isGroup: $childExpenseCategory->children()->exists(),
+                    isActive: true,
+                    remarks: null,
+                );
+                $this->chartOfAccountActions->update($childChartOfAccount, $childChartOfAccountDTO);
+            }
+
+            $this->flushCache();
+
+            return $expenseCategory->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(ExpenseCategory $expenseCategory): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $parentExpenseCategory = $expenseCategory->parent;
+            $chartOfAccount = $expenseCategory->chartOfAccount;
+            if ($chartOfAccount) {
+                $this->chartOfAccountActions->delete($chartOfAccount);
+            }
+
+            $retval = $expenseCategory->delete();
+
+            if ($parentExpenseCategory && ! $parentExpenseCategory->children()->exists()) {
+                $parentExpenseCategoryChartOfAccount = $parentExpenseCategory->chartOfAccount;
+                if ($parentExpenseCategoryChartOfAccount) {
+                    $parentExpenseCategoryChartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                        parentId: $parentExpenseCategoryChartOfAccount->parent_id,
+                        code: $parentExpenseCategoryChartOfAccount->code,
+                        name: $parentExpenseCategoryChartOfAccount->name,
+                        normalBalance: 'debit',
+                        isGroup: false,
+                        isActive: $parentExpenseCategoryChartOfAccount->is_active,
+                        remarks: $parentExpenseCategoryChartOfAccount->remarks,
+                    );
+                    $this->chartOfAccountActions->update($parentExpenseCategoryChartOfAccount, $parentExpenseCategoryChartOfAccountDTO);
+                }
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $tryCount = 0;
+        do {
+            $count = ExpenseCategory::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'EC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $query = ExpenseCategory::where('company_id', $companyId)
+            ->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('expense_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $query = ExpenseCategory::where('company_id', $companyId)
+            ->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('expense_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/ExpenseImage/ExpenseImageActions.php b/api/app/Actions/ExpenseImage/ExpenseImageActions.php
new file mode 100644
index 000000000..e0fc59ebf
--- /dev/null
+++ b/api/app/Actions/ExpenseImage/ExpenseImageActions.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace App\Actions\ExpenseImage;
+
+use App\DTOs\ExpenseImageDTO;
+use App\Helpers\ImageHelper\ImageHelper;
+use App\Models\Expense;
+use App\Models\ExpenseImage;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+
+class ExpenseImageActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct()
+    {
+    }
+
+    public function upload(UploadedFile $image): ExpenseImage
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $path = ImageHelper::storeAndResizeImage($image, 'expenses', 500, 500);
+
+            $absolutePath = ImageHelper::getPath($path);
+            $hash = $absolutePath ? md5_file($absolutePath) : null;
+
+            if ($hash && ExpenseImage::where('hash', $hash)->exists()) {
+                Storage::disk('public')->delete($path);
+
+                $expenseImage = ExpenseImage::where('hash', $hash)->first();
+            } else {
+                $expenseImage = new ExpenseImage();
+                $expenseImage->path = $path;
+                $expenseImage->hash = $hash;
+                $expenseImage->is_main = false;
+                $expenseImage->save();
+            }
+
+            $this->flushCache();
+
+            return $expenseImage;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function attachByHash(Expense $expense, ExpenseImageDTO $data): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            if ($data->isMain === true) {
+                $expense->images()->update(['is_main' => false]);
+            }
+
+            $expenseImage = ExpenseImage::where('expense_id', $expense->id)
+                ->where('hash', $data->hash)
+                ->first();
+
+            if ($expenseImage) {
+                $expenseImage->is_main = $data->isMain;
+                $expenseImage->save();
+            } else {
+                $expenseImage = ExpenseImage::where('hash', $data->hash)
+                    ->whereNull('expense_id')
+                    ->first();
+
+                if ($expenseImage) {
+                    $expenseImage->expense_id = $expense->id;
+                    $expenseImage->is_main = $data->isMain;
+                    $expenseImage->save();
+                } else {
+                    $expenseImage = ExpenseImage::where('hash', $data->hash)->first();
+
+                    if ($expenseImage) {
+                        $expense->images()->create([
+                            'path' => $expenseImage->path,
+                            'hash' => $expenseImage->hash,
+                            'is_main' => $data->isMain,
+                        ]);
+                    }
+                }
+            }
+
+            $unusedExpenseImages = ExpenseImage::whereNull('expense_id')
+                ->where('created_at', '<', now()->subDay())
+                ->get();
+
+            foreach ($unusedExpenseImages as $expenseImage) {
+                $isUsedElsewhere = ExpenseImage::where('path', $expenseImage->path)
+                    ->whereNotNull('expense_id')
+                    ->exists();
+
+                if (! $isUsedElsewhere) {
+                    Storage::disk('public')->delete($expenseImage->path);
+                }
+
+                $expenseImage->delete();
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function detachById(Expense $expense, int $id): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $expenseImage = ExpenseImage::where('expense_id', $expense->id)
+                ->where('id', $id)
+                ->first();
+
+            if ($expenseImage) {
+                $wasMainImage = (bool) $expenseImage->is_main;
+                $expenseImage->delete();
+
+                if ($wasMainImage) {
+                    $nextMainImage = ExpenseImage::where('expense_id', $expense->id)
+                        ->orderBy('id')
+                        ->first();
+
+                    if ($nextMainImage) {
+                        $nextMainImage->is_main = true;
+                        $nextMainImage->save();
+                    }
+                }
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/ExpensePayment/ExpensePaymentActions.php b/api/app/Actions/ExpensePayment/ExpensePaymentActions.php
new file mode 100644
index 000000000..4a5bf1bc3
--- /dev/null
+++ b/api/app/Actions/ExpensePayment/ExpensePaymentActions.php
@@ -0,0 +1,410 @@
+<?php
+
+namespace App\Actions\ExpensePayment;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\Expense\ExpenseActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExpensePaymentCreateDTO;
+use App\DTOs\ExpensePaymentUpdateDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\ExpensePayment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ExpensePaymentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'expense.category',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $expenseId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = ExpensePayment::with(self::LIST_EAGER_LOADS)
+            ->select('expense_payments.*')
+            ->whereCompanyId('expense_payments', $companyId)
+            ->whereBranchId('expense_payments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $expenseId,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $expenseId,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('expense_payments.code', 'like', '%'.$search.'%')
+                            ->orWhere('expense_payments.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($expenseId)) {
+                    $query->where('expense_payments.expense_id', $expenseId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('expense_payments.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(expense_payments.id, '.$includeId.') desc');
+        }
+        $query->orderBy('expense_payments.date', 'desc');
+        $query->orderBy('expense_payments.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $expenseId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_expense_payment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(ExpensePayment $expensePayment): ExpensePayment
+    {
+        return $expensePayment->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = ExpensePayment::whereCompanyId('expense_payments', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'EXPP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = ExpensePayment::whereCompanyId('expense_payments', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(ExpensePaymentCreateDTO $data, bool $updateParentSummary = true): ExpensePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $expensePayment = new ExpensePayment();
+            $expensePayment->company_id = $data->companyId;
+            $expensePayment->branch_id = $data->branchId;
+            $expensePayment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $expensePayment->date = $this->generateDate($data->date);
+            $expensePayment->expense_id = $data->expenseId;
+            $expensePayment->cash_account_id = $data->cashAccountId;
+            $expensePayment->amount = $data->amount;
+            $expensePayment->remarks = $data->remarks;
+            $expensePayment->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromExpensePayment($expensePayment)
+            );
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $expensePayment->company_id,
+                branchId: $expensePayment->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $expensePayment->date,
+                sourceType: ExpensePayment::class,
+                sourceId: $expensePayment->id,
+                referenceNo: $expensePayment->code,
+                remarks: $expensePayment->remarks,
+                items: (function () use ($expensePayment) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expensePayment->company->liabilityAccountPayableChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $expensePayment->amount,
+                        credit: 0,
+                        remarks: $expensePayment->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $expensePayment->cashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $expensePayment->amount,
+                        remarks: $expensePayment->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            if ($updateParentSummary) {
+                ExpenseActions::updateSummary($expensePayment->expense);
+                $expensePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $expensePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(ExpensePayment $expensePayment, ExpensePaymentUpdateDTO $data, bool $updateParentSummary = true): ExpensePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $expensePayment->code = $this->generateUniqueCode($expensePayment->company_id, $data->code, $expensePayment->id);
+            $expensePayment->date = $this->generateDate($data->date);
+            $expensePayment->cash_account_id = $data->cashAccountId;
+            $expensePayment->amount = $data->amount;
+            $expensePayment->remarks = $data->remarks;
+            $expensePayment->save();
+
+            $cashTransaction = $expensePayment->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromExpensePayment($expensePayment)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromExpensePayment($expensePayment)
+                );
+            }
+
+            $journalEntry = $expensePayment->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $expensePayment->company_id,
+                    branchId: $expensePayment->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $expensePayment->date,
+                    sourceType: ExpensePayment::class,
+                    sourceId: $expensePayment->id,
+                    referenceNo: $expensePayment->code,
+                    remarks: $expensePayment->remarks,
+                    items: (function () use ($expensePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expensePayment->company->liabilityAccountPayableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expensePayment->amount,
+                            credit: 0,
+                            remarks: $expensePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expensePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expensePayment->amount,
+                            remarks: $expensePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $expensePayment->branch_id,
+                    code: $journalEntry->code,
+                    date: $expensePayment->date,
+                    referenceNo: $expensePayment->code,
+                    remarks: $expensePayment->remarks,
+                    items: (function () use ($expensePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expensePayment->company->liabilityAccountPayableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $expensePayment->amount,
+                            credit: 0,
+                            remarks: $expensePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $expensePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $expensePayment->amount,
+                            remarks: $expensePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            if ($updateParentSummary) {
+                ExpenseActions::updateSummary($expensePayment->expense);
+                $expensePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $expensePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(
+        ExpensePayment $expensePayment,
+        bool $updateParentSummary = true,
+    ): bool {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $expensePayment->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $expensePayment->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $expensePayment->delete();
+
+            if ($updateParentSummary) {
+                ExpenseActions::updateSummary($expensePayment->expense);
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/Income/IncomeActions.php b/api/app/Actions/Income/IncomeActions.php
new file mode 100644
index 000000000..b493d744f
--- /dev/null
+++ b/api/app/Actions/Income/IncomeActions.php
@@ -0,0 +1,559 @@
+<?php
+
+namespace App\Actions\Income;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\IncomeImage\IncomeImageActions;
+use App\Actions\IncomePayment\IncomePaymentActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\IncomeCreateDTO;
+use App\DTOs\IncomeImageDTO;
+use App\DTOs\IncomePaymentCreateDTO;
+use App\DTOs\IncomePaymentUpdateDTO;
+use App\DTOs\IncomeUpdateDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\Income;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class IncomeActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'paidImmediatelyCashAccount',
+        'mainImage',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'paidImmediatelyCashAccount',
+        'images',
+        'mainImage',
+        'payments.cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly IncomeImageActions $incomeImageActions,
+        private readonly IncomePaymentActions $incomePaymentActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $categoryId,
+        ?bool $isAmountReceivablePaidOff,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Income::select('incomes.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->whereCompanyId('incomes', $companyId)
+            ->whereBranchId('incomes', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $categoryId,
+            $isAmountReceivablePaidOff,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $categoryId,
+                $isAmountReceivablePaidOff,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('incomes.code', 'like', '%'.$search.'%')
+                            ->orWhere('incomes.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($categoryId)) {
+                    $query->where('incomes.income_category_id', $categoryId);
+                }
+
+                if (! is_null($isAmountReceivablePaidOff)) {
+                    $query->where('incomes.is_amount_receivable_paid_off', $isAmountReceivablePaidOff);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('incomes.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(incomes.id, '.$includeId.') desc');
+        }
+        $query->orderBy('incomes.date', 'desc');
+        $query->orderBy('incomes.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $categoryId ?? '[null]',
+                    is_null($isAmountReceivablePaidOff) ? '[null]' : ($isAmountReceivablePaidOff ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_income_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Income $income): Income
+    {
+        return $income->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = Income::whereCompanyId('incomes', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'INC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = Income::whereCompanyId('incomes', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(IncomeCreateDTO $data): Income
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $income = new Income();
+            $income->company_id = $data->companyId;
+            $income->branch_id = $data->branchId;
+            $income->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $income->date = $this->generateDate($data->date);
+            $income->income_category_id = $data->incomeCategoryId;
+            $income->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $income->amount_paid_immediately = $data->amountPaidImmediately;
+            $income->amount_receivable = $data->amountReceivable;
+            $income->due_days = $data->dueDays;
+            $income->remarks = $data->remarks;
+            $income->save();
+
+            if ($income->paid_immediately_cash_account_id && $income->amount_paid_immediately > 0) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromIncome($income)
+                );
+            }
+
+            foreach ($data->payments as $payment) {
+                $dto = new IncomePaymentCreateDTO(
+                    companyId: $income->company_id,
+                    branchId: $income->branch_id,
+                    code: $payment['code'],
+                    date: $payment['date'],
+                    incomeId: $income->id,
+                    cashAccountId: $payment['cash_account_id'],
+                    amount: $payment['amount'],
+                    remarks: $payment['remarks'],
+                );
+                $this->incomePaymentActions->create($dto, false);
+            }
+
+            foreach ($data->images as $image) {
+                $incomeImageDTO = new IncomeImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->incomeImageActions->attachByHash($income, $incomeImageDTO);
+            }
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $income->company_id,
+                branchId: $income->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $income->date,
+                sourceType: Income::class,
+                sourceId: $income->id,
+                referenceNo: $income->code,
+                remarks: $income->remarks,
+                items: (function () use ($income) {
+                    $items = [];
+
+                    if ((float) $income->amount_paid_immediately > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $income->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $income->amount_paid_immediately,
+                            credit: 0,
+                            remarks: $income->remarks,
+                        );
+                    }
+
+                    if ((float) $income->amount_receivable > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $income->company->assetCurrentAccountReceivableChartOfAccount,
+                            sequence: count($items) + 1,
+                            debit: (float) $income->amount_receivable,
+                            credit: 0,
+                            remarks: $income->remarks,
+                        );
+                    }
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $income->category?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $income->amount_total,
+                        remarks: $income->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            self::updateSummary($income);
+
+            $this->flushCache();
+
+            return $income;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Income $income, IncomeUpdateDTO $data): Income
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $income->code = $this->generateUniqueCode($income->company_id, $data->code, $income->id);
+            $income->date = $this->generateDate($data->date);
+            $income->income_category_id = $data->incomeCategoryId;
+            $income->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $income->amount_paid_immediately = $data->amountPaidImmediately;
+            $income->amount_receivable = $data->amountReceivable;
+            $income->due_days = $data->dueDays;
+            $income->remarks = $data->remarks;
+            $income->save();
+
+            $cashTransaction = $income->cashTransaction;
+            if ($income->paid_immediately_cash_account_id && $income->amount_paid_immediately > 0) {
+                if (! $cashTransaction) {
+                    $this->cashTransactionActions->create(
+                        data: CashTransactionCreateDTO::fromIncome($income)
+                    );
+                } else {
+                    $this->cashTransactionActions->update(
+                        cashTransaction: $cashTransaction,
+                        data: CashTransactionUpdateDTO::fromIncome($income)
+                    );
+                }
+            } elseif ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            foreach ($data->deletePaymentIds as $deleteId) {
+                $incomePayment = $income->payments()->findOrFail($deleteId);
+                $this->incomePaymentActions->delete($incomePayment, false);
+            }
+
+            foreach ($data->deleteImageIds as $deleteId) {
+                $this->incomeImageActions->detachById($income, $deleteId);
+            }
+
+            foreach ($data->payments as $payment) {
+                if (! empty($payment['id'])) {
+                    $incomePayment = $income->payments()->findOrFail($payment['id']);
+                    $dto = new IncomePaymentUpdateDTO(
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->incomePaymentActions->update($incomePayment, $dto, false);
+                } else {
+                    $dto = new IncomePaymentCreateDTO(
+                        companyId: $income->company_id,
+                        branchId: $income->branch_id,
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        incomeId: $income->id,
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->incomePaymentActions->create($dto, false);
+                }
+            }
+
+            foreach ($data->images as $image) {
+                $incomeImageDTO = new IncomeImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->incomeImageActions->attachByHash($income, $incomeImageDTO);
+            }
+
+            $journalEntry = $income->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $income->company_id,
+                    branchId: $income->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $income->date,
+                    sourceType: Income::class,
+                    sourceId: $income->id,
+                    referenceNo: $income->code,
+                    remarks: $income->remarks,
+                    items: (function () use ($income) {
+                        $items = [];
+
+                        if ((float) $income->amount_paid_immediately > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $income->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $income->amount_paid_immediately,
+                                credit: 0,
+                                remarks: $income->remarks,
+                            );
+                        }
+
+                        if ((float) $income->amount_receivable > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $income->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $income->amount_receivable,
+                                credit: 0,
+                                remarks: $income->remarks,
+                            );
+                        }
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $income->category?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $income->amount_total,
+                            remarks: $income->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $income->branch_id,
+                    code: $journalEntry->code,
+                    date: $income->date,
+                    referenceNo: $income->code,
+                    remarks: $income->remarks,
+                    items: (function () use ($income) {
+                        $items = [];
+
+                        if ((float) $income->amount_paid_immediately > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $income->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $income->amount_paid_immediately,
+                                credit: 0,
+                                remarks: $income->remarks,
+                            );
+                        }
+
+                        if ((float) $income->amount_receivable > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $income->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $income->amount_receivable,
+                                credit: 0,
+                                remarks: $income->remarks,
+                            );
+                        }
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $income->category?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $income->amount_total,
+                            remarks: $income->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            self::updateSummary($income);
+
+            $this->flushCache();
+
+            return $income;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(Income $income): void
+    {
+        $income->refresh();
+
+        $income->amount_receivable_paid = (float) $income->payments()->sum('amount');
+        $income->amount_receivable_due = max(0, $income->amount_receivable - $income->amount_receivable_paid);
+        $income->is_amount_receivable_paid_off = $income->amount_receivable_due == 0;
+        $income->amount_total = (float) ($income->amount_paid_immediately + $income->amount_receivable);
+        $income->save();
+    }
+
+    public function delete(Income $income): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            foreach ($income->payments as $payment) {
+                $this->incomePaymentActions->delete($payment, false);
+            }
+
+            $cashTransaction = $income->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $income->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $income->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/IncomeCategory/IncomeCategoryActions.php b/api/app/Actions/IncomeCategory/IncomeCategoryActions.php
new file mode 100644
index 000000000..77f47f545
--- /dev/null
+++ b/api/app/Actions/IncomeCategory/IncomeCategoryActions.php
@@ -0,0 +1,290 @@
+<?php
+
+namespace App\Actions\IncomeCategory;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\IncomeCategoryCreateDTO;
+use App\DTOs\IncomeCategoryUpdateDTO;
+use App\Models\IncomeCategory;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class IncomeCategoryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const PAGINATED_LIST_EAGER_LOADS = [
+        'company',
+        'parent',
+    ];
+
+    private const TREE_LIST_EAGER_LOADS = [
+        'company',
+        'parent',
+        'childrenRecursive',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $parentId,
+        ?bool $hasParent,
+        ?bool $hasChildren,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $eagerLoads = $execute?->pagination
+            ? self::PAGINATED_LIST_EAGER_LOADS
+            : self::TREE_LIST_EAGER_LOADS;
+
+        $query = IncomeCategory::with($eagerLoads)
+            ->select('income_categories.*')
+            ->whereCompanyId('income_categories', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $parentId,
+            $hasParent,
+            $hasChildren,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $parentId,
+                $hasParent,
+                $hasChildren,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('income_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('income_categories.name', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if ($parentId) {
+                    $query->where('income_categories.parent_id', $parentId);
+                }
+
+                if (! is_null($hasParent)) {
+                    if ($hasParent) {
+                        $query->whereNotNull('income_categories.parent_id');
+                    } else {
+                        $query->whereNull('income_categories.parent_id');
+                    }
+                }
+
+                if (! is_null($hasChildren)) {
+                    $hasChildren
+                        ? $query->whereHas('children')
+                        : $query->whereDoesntHave('children');
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('income_categories.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(income_categories.id, '.$includeId.') desc');
+        }
+        $query->orderBy('income_categories.sequence', 'asc')
+            ->orderBy('income_categories.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $parentId ?? '[null]',
+                    is_null($hasParent) ? '[null]' : ($hasParent ? 'true' : 'false'),
+                    is_null($hasChildren) ? '[null]' : ($hasChildren ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_income_category_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(IncomeCategory $incomeCategory): IncomeCategory
+    {
+        return $incomeCategory->load(self::TREE_LIST_EAGER_LOADS);
+    }
+
+    public function hasChildren(IncomeCategory $incomeCategory): bool
+    {
+        return $incomeCategory->children()->exists();
+    }
+
+    public function create(IncomeCategoryCreateDTO $data): IncomeCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $incomeCategory = new IncomeCategory();
+            $incomeCategory->company_id = $data->companyId;
+            $incomeCategory->parent_id = $data->parentId;
+            $incomeCategory->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $incomeCategory->name = $data->name;
+            $incomeCategory->sequence = $data->sequence;
+            $incomeCategory->save();
+
+            $this->flushCache();
+
+            return $incomeCategory;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(IncomeCategory $incomeCategory, IncomeCategoryUpdateDTO $data): IncomeCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $incomeCategory->code = $this->generateUniqueCode(
+                $incomeCategory->company_id,
+                $data->code,
+                $incomeCategory->id,
+            );
+            $incomeCategory->name = $data->name;
+            $incomeCategory->sequence = $data->sequence;
+            $incomeCategory->save();
+
+            $this->flushCache();
+
+            return $incomeCategory->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(IncomeCategory $incomeCategory): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $incomeCategory->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $tryCount = 0;
+        do {
+            $count = IncomeCategory::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'EC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $query = IncomeCategory::where('company_id', $companyId)
+            ->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('income_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $query = IncomeCategory::where('company_id', $companyId)
+            ->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('income_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/IncomeImage/IncomeImageActions.php b/api/app/Actions/IncomeImage/IncomeImageActions.php
new file mode 100644
index 000000000..c35ac032c
--- /dev/null
+++ b/api/app/Actions/IncomeImage/IncomeImageActions.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace App\Actions\IncomeImage;
+
+use App\DTOs\IncomeImageDTO;
+use App\Helpers\ImageHelper\ImageHelper;
+use App\Models\Income;
+use App\Models\IncomeImage;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+
+class IncomeImageActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct()
+    {
+    }
+
+    public function upload(UploadedFile $image): IncomeImage
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $path = ImageHelper::storeAndResizeImage($image, 'incomes', 500, 500);
+
+            $absolutePath = ImageHelper::getPath($path);
+            $hash = $absolutePath ? md5_file($absolutePath) : null;
+
+            if ($hash && IncomeImage::where('hash', $hash)->exists()) {
+                Storage::disk('public')->delete($path);
+
+                $incomeImage = IncomeImage::where('hash', $hash)->first();
+            } else {
+                $incomeImage = new IncomeImage();
+                $incomeImage->path = $path;
+                $incomeImage->hash = $hash;
+                $incomeImage->is_main = false;
+                $incomeImage->save();
+            }
+
+            $this->flushCache();
+
+            return $incomeImage;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function attachByHash(Income $income, IncomeImageDTO $data): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            if ($data->isMain === true) {
+                $income->images()->update(['is_main' => false]);
+            }
+
+            $incomeImage = IncomeImage::where('income_id', $income->id)
+                ->where('hash', $data->hash)
+                ->first();
+
+            if ($incomeImage) {
+                $incomeImage->is_main = $data->isMain;
+                $incomeImage->save();
+            } else {
+                $incomeImage = IncomeImage::where('hash', $data->hash)
+                    ->whereNull('income_id')
+                    ->first();
+
+                if ($incomeImage) {
+                    $incomeImage->income_id = $income->id;
+                    $incomeImage->is_main = $data->isMain;
+                    $incomeImage->save();
+                } else {
+                    $incomeImage = IncomeImage::where('hash', $data->hash)->first();
+
+                    if ($incomeImage) {
+                        $income->images()->create([
+                            'path' => $incomeImage->path,
+                            'hash' => $incomeImage->hash,
+                            'is_main' => $data->isMain,
+                        ]);
+                    }
+                }
+            }
+
+            $unusedIncomeImages = IncomeImage::whereNull('income_id')
+                ->where('created_at', '<', now()->subDay())
+                ->get();
+
+            foreach ($unusedIncomeImages as $incomeImage) {
+                $isUsedElsewhere = IncomeImage::where('path', $incomeImage->path)
+                    ->whereNotNull('income_id')
+                    ->exists();
+
+                if (! $isUsedElsewhere) {
+                    Storage::disk('public')->delete($incomeImage->path);
+                }
+
+                $incomeImage->delete();
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function detachById(Income $income, int $id): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $incomeImage = IncomeImage::where('income_id', $income->id)
+                ->where('id', $id)
+                ->first();
+
+            if ($incomeImage) {
+                $wasMainImage = (bool) $incomeImage->is_main;
+                $incomeImage->delete();
+
+                if ($wasMainImage) {
+                    $nextMainImage = IncomeImage::where('income_id', $income->id)
+                        ->orderBy('id')
+                        ->first();
+
+                    if ($nextMainImage) {
+                        $nextMainImage->is_main = true;
+                        $nextMainImage->save();
+                    }
+                }
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/IncomePayment/IncomePaymentActions.php b/api/app/Actions/IncomePayment/IncomePaymentActions.php
new file mode 100644
index 000000000..11f42e5d0
--- /dev/null
+++ b/api/app/Actions/IncomePayment/IncomePaymentActions.php
@@ -0,0 +1,410 @@
+<?php
+
+namespace App\Actions\IncomePayment;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\Income\IncomeActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\IncomePaymentCreateDTO;
+use App\DTOs\IncomePaymentUpdateDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\IncomePayment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class IncomePaymentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'income.category',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $incomeId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = IncomePayment::with(self::LIST_EAGER_LOADS)
+            ->select('income_payments.*')
+            ->whereCompanyId('income_payments', $companyId)
+            ->whereBranchId('income_payments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $incomeId,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $incomeId,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('income_payments.code', 'like', '%'.$search.'%')
+                            ->orWhere('income_payments.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($incomeId)) {
+                    $query->where('income_payments.income_id', $incomeId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('income_payments.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(income_payments.id, '.$includeId.') desc');
+        }
+        $query->orderBy('income_payments.date', 'desc');
+        $query->orderBy('income_payments.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $incomeId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_income_payment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(IncomePayment $incomePayment): IncomePayment
+    {
+        return $incomePayment->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = IncomePayment::whereCompanyId('income_payments', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'INCP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = IncomePayment::whereCompanyId('income_payments', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(IncomePaymentCreateDTO $data, bool $updateParentSummary = true): IncomePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $incomePayment = new IncomePayment();
+            $incomePayment->company_id = $data->companyId;
+            $incomePayment->branch_id = $data->branchId;
+            $incomePayment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $incomePayment->date = $this->generateDate($data->date);
+            $incomePayment->income_id = $data->incomeId;
+            $incomePayment->cash_account_id = $data->cashAccountId;
+            $incomePayment->amount = $data->amount;
+            $incomePayment->remarks = $data->remarks;
+            $incomePayment->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromIncomePayment($incomePayment)
+            );
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $incomePayment->company_id,
+                branchId: $incomePayment->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $incomePayment->date,
+                sourceType: IncomePayment::class,
+                sourceId: $incomePayment->id,
+                referenceNo: $incomePayment->code,
+                remarks: $incomePayment->remarks,
+                items: (function () use ($incomePayment) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $incomePayment->cashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $incomePayment->amount,
+                        credit: 0,
+                        remarks: $incomePayment->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $incomePayment->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $incomePayment->amount,
+                        remarks: $incomePayment->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            if ($updateParentSummary) {
+                IncomeActions::updateSummary($incomePayment->income);
+                $incomePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $incomePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(IncomePayment $incomePayment, IncomePaymentUpdateDTO $data, bool $updateParentSummary = true): IncomePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $incomePayment->code = $this->generateUniqueCode($incomePayment->company_id, $data->code, $incomePayment->id);
+            $incomePayment->date = $this->generateDate($data->date);
+            $incomePayment->cash_account_id = $data->cashAccountId;
+            $incomePayment->amount = $data->amount;
+            $incomePayment->remarks = $data->remarks;
+            $incomePayment->save();
+
+            $cashTransaction = $incomePayment->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromIncomePayment($incomePayment)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromIncomePayment($incomePayment)
+                );
+            }
+
+            $journalEntry = $incomePayment->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $incomePayment->company_id,
+                    branchId: $incomePayment->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $incomePayment->date,
+                    sourceType: IncomePayment::class,
+                    sourceId: $incomePayment->id,
+                    referenceNo: $incomePayment->code,
+                    remarks: $incomePayment->remarks,
+                    items: (function () use ($incomePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $incomePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $incomePayment->amount,
+                            credit: 0,
+                            remarks: $incomePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $incomePayment->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $incomePayment->amount,
+                            remarks: $incomePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $incomePayment->branch_id,
+                    code: $journalEntry->code,
+                    date: $incomePayment->date,
+                    referenceNo: $incomePayment->code,
+                    remarks: $incomePayment->remarks,
+                    items: (function () use ($incomePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $incomePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $incomePayment->amount,
+                            credit: 0,
+                            remarks: $incomePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $incomePayment->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $incomePayment->amount,
+                            remarks: $incomePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            if ($updateParentSummary) {
+                IncomeActions::updateSummary($incomePayment->income);
+                $incomePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $incomePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(
+        IncomePayment $incomePayment,
+        bool $updateParentSummary = true,
+    ): bool {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $incomePayment->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $incomePayment->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $incomePayment->delete();
+
+            if ($updateParentSummary) {
+                IncomeActions::updateSummary($incomePayment->income);
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/Investor/InvestorActions.php b/api/app/Actions/Investor/InvestorActions.php
new file mode 100644
index 000000000..ec2398940
--- /dev/null
+++ b/api/app/Actions/Investor/InvestorActions.php
@@ -0,0 +1,442 @@
+<?php
+
+namespace App\Actions\Investor;
+
+use App\Actions\ChartOfAccount\ChartOfAccountActions;
+use App\DTOs\ChartOfAccountCreateDTO;
+use App\DTOs\ChartOfAccountUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\InvestorCreateDTO;
+use App\DTOs\InvestorUpdateDTO;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+use InvalidArgumentException;
+
+class InvestorActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct(
+        private readonly ChartOfAccountActions $chartOfAccountActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+
+        ?string $search,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Investor::with(self::LIST_EAGER_LOADS)->select('investors.*')
+            ->where('investors.company_id', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('investors.code', 'like', '%'.$search.'%')
+                            ->orWhere('investors.name', 'like', '%'.$search.'%')
+                            ->orWhere('investors.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('investors.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(investors.id, '.$includeId.') desc');
+        }
+        $query->orderBy('investors.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Investor $investor): Investor
+    {
+        return $investor->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(InvestorCreateDTO $data): Investor
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $investor = new Investor();
+            $investor->company_id = $data->companyId;
+            $investor->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $investor->name = $data->name;
+            $investor->remarks = $data->remarks;
+            $investor->save();
+
+            $openingCapitalParentChartOfAccount = $investor->company->equityCapitalOpeningCapitalChartOfAccount;
+            if (! $openingCapitalParentChartOfAccount) {
+                throw new InvalidArgumentException('Opening capital chart of account parent must exist in company.');
+            }
+
+            $openingCapitalChartOfAccountDTO = new ChartOfAccountCreateDTO(
+                companyId: $investor->company_id,
+                scope: 'user',
+                systemKey: null,
+                parentId: $openingCapitalParentChartOfAccount->id,
+                sourceType: Investor::class,
+                sourceId: $investor->id,
+                code: $openingCapitalParentChartOfAccount->code.'.'.$investor->code,
+                name: $investor->name,
+                normalBalance: 'credit',
+                isGroup: false,
+                isActive: true,
+                remarks: $investor->remarks,
+            );
+            $this->chartOfAccountActions->create($openingCapitalChartOfAccountDTO);
+
+            $additionalCapitalParentChartOfAccount = $investor->company->equityCapitalAdditionalCapitalChartOfAccount;
+            if (! $additionalCapitalParentChartOfAccount) {
+                throw new InvalidArgumentException('Additional capital chart of account parent must exist in company.');
+            }
+
+            $additionalCapitalChartOfAccountDTO = new ChartOfAccountCreateDTO(
+                companyId: $investor->company_id,
+                scope: 'user',
+                systemKey: null,
+                parentId: $additionalCapitalParentChartOfAccount->id,
+                sourceType: Investor::class,
+                sourceId: $investor->id,
+                code: $additionalCapitalParentChartOfAccount->code.'.'.$investor->code,
+                name: $investor->name,
+                normalBalance: 'credit',
+                isGroup: false,
+                isActive: true,
+                remarks: $investor->remarks,
+            );
+            $this->chartOfAccountActions->create($additionalCapitalChartOfAccountDTO);
+
+            $drawingParentChartOfAccount = $investor->company->equityCapitalDrawingChartOfAccount;
+            if (! $drawingParentChartOfAccount) {
+                throw new InvalidArgumentException('Drawing chart of account parent must exist in company.');
+            }
+
+            $drawingChartOfAccountDTO = new ChartOfAccountCreateDTO(
+                companyId: $investor->company_id,
+                scope: 'user',
+                systemKey: null,
+                parentId: $drawingParentChartOfAccount->id,
+                sourceType: Investor::class,
+                sourceId: $investor->id,
+                code: $drawingParentChartOfAccount->code.'.'.$investor->code,
+                name: $investor->name,
+                normalBalance: 'debit',
+                isGroup: false,
+                isActive: true,
+                remarks: $investor->remarks,
+            );
+            $this->chartOfAccountActions->create($drawingChartOfAccountDTO);
+
+            $this->flushCache();
+
+            return $investor;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Investor $investor, InvestorUpdateDTO $data): Investor
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $investor->code = $this->generateUniqueCode($investor->company_id, $data->code, $investor->id);
+            $investor->name = $data->name;
+            $investor->remarks = $data->remarks;
+            $investor->save();
+
+            $openingCapitalParentChartOfAccount = $investor->company->equityCapitalOpeningCapitalChartOfAccount;
+            if (! $openingCapitalParentChartOfAccount) {
+                throw new InvalidArgumentException('Opening capital chart of account parent must exist in company.');
+            }
+
+            $openingCapitalChartOfAccount = $investor->openingCapitalChartOfAccount;
+            if ($openingCapitalChartOfAccount) {
+                $openingCapitalChartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $openingCapitalParentChartOfAccount->id,
+                    code: $openingCapitalParentChartOfAccount->code.'.'.$investor->code,
+                    name: $investor->name,
+                    normalBalance: 'credit',
+                    isGroup: false,
+                    isActive: true,
+                    remarks: $investor->remarks,
+                );
+                $openingCapitalChartOfAccount = $this->chartOfAccountActions->update($openingCapitalChartOfAccount, $openingCapitalChartOfAccountDTO);
+            } else {
+                $openingCapitalChartOfAccountDTO = new ChartOfAccountCreateDTO(
+                    companyId: $investor->company_id,
+                    scope: 'user',
+                    systemKey: null,
+                    parentId: $openingCapitalParentChartOfAccount->id,
+                    sourceType: Investor::class,
+                    sourceId: $investor->id,
+                    code: $openingCapitalParentChartOfAccount->code.'.'.$investor->code,
+                    name: $investor->name,
+                    normalBalance: 'credit',
+                    isGroup: false,
+                    isActive: true,
+                    remarks: $investor->remarks,
+                );
+                $openingCapitalChartOfAccount = $this->chartOfAccountActions->create($openingCapitalChartOfAccountDTO);
+            }
+
+            $additionalCapitalParentChartOfAccount = $investor->company->equityCapitalAdditionalCapitalChartOfAccount;
+            if (! $additionalCapitalParentChartOfAccount) {
+                throw new InvalidArgumentException('Additional capital chart of account parent must exist in company.');
+            }
+
+            $additionalCapitalChartOfAccount = $investor->additionalCapitalChartOfAccount;
+            if ($additionalCapitalChartOfAccount) {
+                $additionalCapitalChartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $additionalCapitalParentChartOfAccount->id,
+                    code: $additionalCapitalParentChartOfAccount->code.'.'.$investor->code,
+                    name: $investor->name,
+                    normalBalance: 'credit',
+                    isGroup: false,
+                    isActive: true,
+                    remarks: $investor->remarks,
+                );
+                $additionalCapitalChartOfAccount = $this->chartOfAccountActions->update($additionalCapitalChartOfAccount, $additionalCapitalChartOfAccountDTO);
+            } else {
+                $additionalCapitalChartOfAccountDTO = new ChartOfAccountCreateDTO(
+                    companyId: $investor->company_id,
+                    scope: 'user',
+                    systemKey: null,
+                    parentId: $additionalCapitalParentChartOfAccount->id,
+                    sourceType: Investor::class,
+                    sourceId: $investor->id,
+                    code: $additionalCapitalParentChartOfAccount->code.'.'.$investor->code,
+                    name: $investor->name,
+                    normalBalance: 'credit',
+                    isGroup: false,
+                    isActive: true,
+                    remarks: $investor->remarks,
+                );
+                $additionalCapitalChartOfAccount = $this->chartOfAccountActions->create($additionalCapitalChartOfAccountDTO);
+            }
+
+            $drawingParentChartOfAccount = $investor->company->equityCapitalDrawingChartOfAccount;
+            if (! $drawingParentChartOfAccount) {
+                throw new InvalidArgumentException('Drawing chart of account parent must exist in company.');
+            }
+
+            $drawingChartOfAccount = $investor->drawingChartOfAccount;
+            if ($drawingChartOfAccount) {
+                $drawingChartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $drawingParentChartOfAccount->id,
+                    code: $drawingParentChartOfAccount->code.'.'.$investor->code,
+                    name: $investor->name,
+                    normalBalance: 'debit',
+                    isGroup: false,
+                    isActive: true,
+                    remarks: $investor->remarks,
+                );
+                $drawingChartOfAccount = $this->chartOfAccountActions->update($drawingChartOfAccount, $drawingChartOfAccountDTO);
+            } else {
+                $drawingChartOfAccountDTO = new ChartOfAccountCreateDTO(
+                    companyId: $investor->company_id,
+                    scope: 'user',
+                    systemKey: null,
+                    parentId: $drawingParentChartOfAccount->id,
+                    sourceType: Investor::class,
+                    sourceId: $investor->id,
+                    code: $drawingParentChartOfAccount->code.'.'.$investor->code,
+                    name: $investor->name,
+                    normalBalance: 'debit',
+                    isGroup: false,
+                    isActive: true,
+                    remarks: $investor->remarks,
+                );
+                $drawingChartOfAccount = $this->chartOfAccountActions->create($drawingChartOfAccountDTO);
+            }
+
+            $usedChartOfAccountIds = [
+                $openingCapitalChartOfAccount->id,
+                $additionalCapitalChartOfAccount->id,
+                $drawingChartOfAccount->id,
+            ];
+
+            foreach ($investor->chartOfAccounts as $chartOfAccount) {
+                if (! in_array($chartOfAccount->id, $usedChartOfAccountIds, true)) {
+                    $this->chartOfAccountActions->delete($chartOfAccount);
+                }
+            }
+
+            $this->flushCache();
+
+            return $investor->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(Investor $investor): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            foreach ($investor->chartOfAccounts()->get() as $chartOfAccount) {
+                $this->chartOfAccountActions->delete($chartOfAccount);
+            }
+
+            $retval = $investor->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->investors()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'INV'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->investors()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->investors()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('investors.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->investors()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->investors()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('investors.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/JournalEntry/JournalEntryActions.php b/api/app/Actions/JournalEntry/JournalEntryActions.php
new file mode 100644
index 000000000..8a683f29b
--- /dev/null
+++ b/api/app/Actions/JournalEntry/JournalEntryActions.php
@@ -0,0 +1,298 @@
+<?php
+
+namespace App\Actions\JournalEntry;
+
+use App\Actions\JournalEntryItem\JournalEntryItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Enums\JournalEntryTypeEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\JournalEntry;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class JournalEntryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'items.chartOfAccount',
+    ];
+
+    public function __construct(
+        private readonly JournalEntryItemActions $journalEntryItemActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $startDate,
+        ?string $endDate,
+        ?string $journalType,
+        ?string $sourceType,
+        ?int $sourceId,
+        ?ExecuteDTO $execute,
+    ) {
+        $query = JournalEntry::with(self::LIST_EAGER_LOADS)
+            ->select('journal_entries.*')
+            ->whereCompanyId('journal_entries', $companyId);
+
+        if ($branchId) {
+            $query->where('journal_entries.branch_id', $branchId);
+        }
+
+        if ($search) {
+            $query->where(function ($query) use ($search) {
+                $query->where('journal_entries.code', 'like', '%'.$search.'%')
+                    ->orWhere('journal_entries.reference_no', 'like', '%'.$search.'%')
+                    ->orWhere('journal_entries.journal_type', 'like', '%'.$search.'%')
+                    ->orWhere('journal_entries.source_type', 'like', '%'.$search.'%')
+                    ->orWhere('journal_entries.remarks', 'like', '%'.$search.'%')
+                    ->orWhereHas('items.chartOfAccount', function ($itemQuery) use ($search) {
+                        $itemQuery->where('chart_of_accounts.code', 'like', '%'.$search.'%')
+                            ->orWhere('chart_of_accounts.name', 'like', '%'.$search.'%');
+                    });
+            });
+        }
+
+        if ($startDate) {
+            $query->where('journal_entries.date', '>=', TimezoneHelper::convertToUTC($startDate));
+        }
+
+        if ($endDate) {
+            $query->where('journal_entries.date', '<=', TimezoneHelper::convertToUTC($endDate));
+        }
+
+        if ($journalType) {
+            $query->where('journal_entries.journal_type', $journalType);
+        }
+
+        if ($sourceType) {
+            $query->where('journal_entries.source_type', $sourceType);
+        }
+
+        if ($sourceId) {
+            $query->where('journal_entries.source_id', $sourceId);
+        }
+
+        $query->orderBy('journal_entries.date', 'desc')
+            ->orderBy('journal_entries.id', 'asc');
+
+        if ($execute) {
+            $timerStart = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheKey = 'readAny_journal_entry_'.implode('-', [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $journalType ?? '[null]',
+                    $sourceType ?? '[null]',
+                    $sourceId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ]);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page,
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $executionTime = microtime(true) - $timerStart;
+                $this->loggerPerformance(__METHOD__, $executionTime, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(JournalEntry $journalEntry): JournalEntry
+    {
+        return $journalEntry->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function create(JournalEntryCreateDTO $data): JournalEntry
+    {
+        $timerStart = microtime(true);
+
+        try {
+            $journalEntry = new JournalEntry();
+            $journalEntry->company_id = $data->companyId;
+            $journalEntry->branch_id = $data->branchId;
+            $journalEntry->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $journalEntry->date = $this->resolveDate($data->date);
+            $journalEntry->journal_type = (function () use ($data): ?string {
+                if ($data->journalType) return $data->journalType;
+                if ($data->sourceType && $data->sourceId) return JournalEntryTypeEnum::TRANSACTION->value;
+
+                return null;
+            })();
+            $journalEntry->source_type = $data->sourceType;
+            $journalEntry->source_id = $data->sourceId;
+            $journalEntry->reference_no = $data->referenceNo;
+            $journalEntry->total_debit = collect($data->items)->sum(fn (JournalEntryItemDTO $item) => $item->debit);
+            $journalEntry->total_credit = collect($data->items)->sum(fn (JournalEntryItemDTO $item) => $item->credit);
+            $journalEntry->remarks = $data->remarks;
+            $journalEntry->save();
+
+            foreach ($data->items as $item) {
+                $this->journalEntryItemActions->create($journalEntry, $item);
+            }
+            $this->flushCache();
+
+            return $journalEntry->refresh()->load(self::DETAIL_EAGER_LOADS);
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function update(JournalEntry $journalEntry, JournalEntryUpdateDTO $data): JournalEntry
+    {
+        $timerStart = microtime(true);
+
+        try {
+            $journalEntry->branch_id = $data->branchId;
+            $journalEntry->code = $this->generateUniqueCode($journalEntry->company_id, $data->code, $journalEntry->id);
+            $journalEntry->date = $this->resolveDate($data->date);
+            $journalEntry->journal_type = (function () use ($data, $journalEntry): ?string {
+                if ($data->journalType) return $data->journalType;
+                if ($journalEntry->journal_type) return $journalEntry->journal_type->value;
+                if ($journalEntry->source_type && $journalEntry->source_id) return JournalEntryTypeEnum::TRANSACTION->value;
+
+                return null;
+            })();
+            $journalEntry->reference_no = $data->referenceNo;
+            $journalEntry->total_debit = collect($data->items)->sum(fn (JournalEntryItemDTO $item) => $item->debit);
+            $journalEntry->total_credit = collect($data->items)->sum(fn (JournalEntryItemDTO $item) => $item->credit);
+            $journalEntry->remarks = $data->remarks;
+            $journalEntry->save();
+
+            foreach ($journalEntry->items as $journalEntryItem) {
+                $this->journalEntryItemActions->delete($journalEntryItem);
+            }
+            foreach ($data->items as $item) {
+                $this->journalEntryItemActions->create($journalEntry, $item);
+            }
+            $this->flushCache();
+
+            return $journalEntry->refresh()->load(self::DETAIL_EAGER_LOADS);
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function delete(JournalEntry $journalEntry): bool
+    {
+        $timerStart = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $journalEntry->delete();
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $query = JournalEntry::whereCompanyId('journal_entries', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $query->where('journal_entries.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $tryCount = 0;
+
+        do {
+            $count = JournalEntry::whereCompanyId('journal_entries', $companyId)->count() + 1 + $tryCount;
+            $code = 'JRN'.str_pad($count, 4, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    private function resolveDate(string $date): string
+    {
+        if ($date === config('dcslab.KEYWORDS.AUTO')) {
+            return now('UTC')->format('Y-m-d H:i:s');
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+}
diff --git a/api/app/Actions/JournalEntryItem/JournalEntryItemActions.php b/api/app/Actions/JournalEntryItem/JournalEntryItemActions.php
new file mode 100644
index 000000000..acb564cb4
--- /dev/null
+++ b/api/app/Actions/JournalEntryItem/JournalEntryItemActions.php
@@ -0,0 +1,306 @@
+<?php
+
+namespace App\Actions\JournalEntryItem;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\Enums\JournalEntryTypeEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\ChartOfAccount;
+use App\Models\JournalEntry;
+use App\Models\JournalEntryItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+use InvalidArgumentException;
+
+class JournalEntryItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'journalEntry',
+        'chartOfAccount',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $startDate,
+        ?string $endDate,
+        ?int $journalEntryId,
+        ?int $chartOfAccountId,
+        bool $includeSystemJournals,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = JournalEntryItem::with(self::LIST_EAGER_LOADS)
+            ->select('journal_entry_items.*')
+            ->join('journal_entries', 'journal_entries.id', '=', 'journal_entry_items.journal_entry_id');
+
+        $query->whereCompanyId('journal_entry_items', $companyId);
+
+        $query->where(function ($query) use (
+            $branchId,
+            $search,
+            $startDate,
+            $endDate,
+            $journalEntryId,
+            $chartOfAccountId,
+            $includeSystemJournals,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $branchId,
+                $search,
+                $startDate,
+                $endDate,
+                $journalEntryId,
+                $chartOfAccountId,
+                $includeSystemJournals,
+            ) {
+                if ($branchId) {
+                    $query->where('journal_entries.branch_id', $branchId);
+                }
+
+                if ($startDate) {
+                    $query->where('journal_entries.date', '>=', TimezoneHelper::convertToUTC($startDate));
+                }
+
+                if ($endDate) {
+                    $query->where('journal_entries.date', '<=', TimezoneHelper::convertToUTC($endDate));
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('journal_entry_items.remarks', 'like', '%'.$search.'%')
+                            ->orWhere('journal_entries.code', 'like', '%'.$search.'%')
+                            ->orWhere('journal_entries.reference_no', 'like', '%'.$search.'%')
+                            ->orWhereHas('chartOfAccount', function ($chartOfAccountQuery) use ($search) {
+                                $chartOfAccountQuery->where('chart_of_accounts.code', 'like', '%'.$search.'%')
+                                    ->orWhere('chart_of_accounts.name', 'like', '%'.$search.'%');
+                            });
+                    });
+                }
+
+                if ($journalEntryId) {
+                    $query->where('journal_entry_items.journal_entry_id', $journalEntryId);
+                }
+
+                if ($chartOfAccountId) {
+                    $query->where('journal_entry_items.chart_of_account_id', $chartOfAccountId);
+                }
+
+                if (! $includeSystemJournals) {
+                    $query->where(function ($query) {
+                        $query->whereNull('journal_entries.journal_type')
+                            ->orWhereNotIn('journal_entries.journal_type', [
+                                JournalEntryTypeEnum::CURRENT_MONTH_EARNINGS->value,
+                                JournalEntryTypeEnum::MONTH_END_CLOSING->value,
+                                JournalEntryTypeEnum::MONTH_TO_YEAR_CLOSING->value,
+                                JournalEntryTypeEnum::YEAR_TO_RETAINED_EARNINGS_CLOSING->value,
+                            ]);
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('journal_entry_items.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(journal_entry_items.id, '.$includeId.') desc');
+        }
+        $query->orderBy('journal_entries.date', 'desc')
+            ->orderBy('journal_entries.id', 'asc')
+            ->orderBy('journal_entry_items.sequence', 'asc');
+
+        if ($execute) {
+            $timerStart = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $journalEntryId ?? '[null]',
+                    $chartOfAccountId ?? '[null]',
+                    $includeSystemJournals ? 'true' : 'false',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_journal_entry_item_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page,
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $executionTime = microtime(true) - $timerStart;
+                $this->loggerPerformance(__METHOD__, $executionTime, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(JournalEntryItem $journalEntryItem): JournalEntryItem
+    {
+        return $journalEntryItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(JournalEntry $journalEntry, JournalEntryItemDTO $data): JournalEntryItem
+    {
+        $timerStart = microtime(true);
+
+        try {
+            if ($data->sequence < 1) {
+                throw new InvalidArgumentException('Journal entry item sequence must be at least 1.');
+            }
+
+            $chartOfAccountId = $data->chartOfAccountId;
+            if (! $chartOfAccountId) {
+                throw new InvalidArgumentException('Journal entry item chart of account must exist.');
+            }
+
+            $chartOfAccount = ChartOfAccount::query()
+                ->where('id', $chartOfAccountId)
+                ->where('company_id', $journalEntry->company_id)
+                ->first();
+            if (! $chartOfAccount) {
+                throw new InvalidArgumentException('Journal entry item chart of account must exist.');
+            }
+
+            $journalEntryItem = new JournalEntryItem();
+            $journalEntryItem->company_id = $journalEntry->company_id;
+            $journalEntryItem->journal_entry_id = $journalEntry->id;
+            $journalEntryItem->chart_of_account_id = $chartOfAccount->id;
+            $journalEntryItem->sequence = $data->sequence;
+            $journalEntryItem->debit = $data->debit;
+            $journalEntryItem->credit = $data->credit;
+            $journalEntryItem->remarks = $data->remarks;
+            if (auth()->check()) {
+                $journalEntryItem->created_by = auth()->id();
+                $journalEntryItem->updated_by = auth()->id();
+            }
+            $journalEntryItem->save();
+
+            $this->flushCache();
+
+            return $journalEntryItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function update(JournalEntryItem $journalEntryItem, JournalEntryItemDTO $data): JournalEntryItem
+    {
+        $timerStart = microtime(true);
+
+        try {
+            if ($data->sequence < 1) {
+                throw new InvalidArgumentException('Journal entry item sequence must be at least 1.');
+            }
+
+            $chartOfAccountId = $data->chartOfAccountId;
+            if (! $chartOfAccountId) {
+                throw new InvalidArgumentException('Journal entry item chart of account must exist.');
+            }
+
+            $chartOfAccount = ChartOfAccount::query()
+                ->where('id', $chartOfAccountId)
+                ->where('company_id', $journalEntryItem->company_id)
+                ->first();
+            if (! $chartOfAccount) {
+                throw new InvalidArgumentException('Journal entry item chart of account must exist.');
+            }
+
+            $journalEntryItem->chart_of_account_id = $chartOfAccount->id;
+            $journalEntryItem->sequence = $data->sequence;
+            $journalEntryItem->debit = $data->debit;
+            $journalEntryItem->credit = $data->credit;
+            $journalEntryItem->remarks = $data->remarks;
+            $journalEntryItem->save();
+
+            $this->flushCache();
+
+            return $journalEntryItem->refresh()->load(self::LIST_EAGER_LOADS);
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+
+    public function delete(JournalEntryItem $journalEntryItem): bool
+    {
+        $timerStart = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $journalEntryItem->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $executionTime = microtime(true) - $timerStart;
+            $this->loggerPerformance(__METHOD__, $executionTime);
+        }
+    }
+}
diff --git a/api/app/Actions/PrepaidExpense/PrepaidExpenseActions.php b/api/app/Actions/PrepaidExpense/PrepaidExpenseActions.php
new file mode 100644
index 000000000..d0bd178a9
--- /dev/null
+++ b/api/app/Actions/PrepaidExpense/PrepaidExpenseActions.php
@@ -0,0 +1,561 @@
+<?php
+
+namespace App\Actions\PrepaidExpense;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\Actions\PrepaidExpenseImage\PrepaidExpenseImageActions;
+use App\Actions\PrepaidExpensePayment\PrepaidExpensePaymentActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\DTOs\PrepaidExpenseCreateDTO;
+use App\DTOs\PrepaidExpenseImageDTO;
+use App\DTOs\PrepaidExpensePaymentCreateDTO;
+use App\DTOs\PrepaidExpensePaymentUpdateDTO;
+use App\DTOs\PrepaidExpenseUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PrepaidExpense;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PrepaidExpenseActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'paidImmediatelyCashAccount',
+        'mainImage',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'paidImmediatelyCashAccount',
+        'images',
+        'mainImage',
+        'payments.cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly PrepaidExpenseImageActions $prepaidExpenseImageActions,
+        private readonly PrepaidExpensePaymentActions $prepaidExpensePaymentActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $categoryId,
+        ?bool $isAmountPayablePaidOff,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PrepaidExpense::select('prepaid_expenses.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->whereCompanyId('prepaid_expenses', $companyId)
+            ->whereBranchId('prepaid_expenses', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $categoryId,
+            $isAmountPayablePaidOff,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $categoryId,
+                $isAmountPayablePaidOff,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('prepaid_expenses.code', 'like', '%'.$search.'%')
+                            ->orWhere('prepaid_expenses.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($categoryId)) {
+                    $query->where('prepaid_expenses.expense_category_id', $categoryId);
+                }
+
+                if (! is_null($isAmountPayablePaidOff)) {
+                    $query->where('prepaid_expenses.is_amount_payable_paid_off', $isAmountPayablePaidOff);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('prepaid_expenses.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(prepaid_expenses.id, '.$includeId.') desc');
+        }
+        $query->orderBy('prepaid_expenses.date', 'desc');
+        $query->orderBy('prepaid_expenses.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $categoryId ?? '[null]',
+                    is_null($isAmountPayablePaidOff) ? '[null]' : ($isAmountPayablePaidOff ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_prepaid_expense_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PrepaidExpense $prepaidExpense): PrepaidExpense
+    {
+        return $prepaidExpense->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = PrepaidExpense::whereCompanyId('prepaid_expenses', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'PRE'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PrepaidExpense::whereCompanyId('prepaid_expenses', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(PrepaidExpenseCreateDTO $data): PrepaidExpense
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidExpense = new PrepaidExpense();
+            $prepaidExpense->company_id = $data->companyId;
+            $prepaidExpense->branch_id = $data->branchId;
+            $prepaidExpense->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $prepaidExpense->date = $this->generateDate($data->date);
+            $prepaidExpense->expense_category_id = $data->expenseCategoryId;
+            $prepaidExpense->estimated_useful_life = $data->estimatedUsefulLife;
+            $prepaidExpense->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $prepaidExpense->amount_paid_immediately = $data->amountPaidImmediately;
+            $prepaidExpense->amount_payable = $data->amountPayable;
+            $prepaidExpense->due_days = $data->dueDays;
+            $prepaidExpense->remarks = $data->remarks;
+            $prepaidExpense->save();
+
+            if ($prepaidExpense->paid_immediately_cash_account_id && $prepaidExpense->amount_paid_immediately > 0) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromPrepaidExpense($prepaidExpense)
+                );
+            }
+
+            foreach ($data->payments as $payment) {
+                $dto = new PrepaidExpensePaymentCreateDTO(
+                    companyId: $prepaidExpense->company_id,
+                    branchId: $prepaidExpense->branch_id,
+                    code: $payment['code'],
+                    date: $payment['date'],
+                    prepaidExpenseId: $prepaidExpense->id,
+                    cashAccountId: $payment['cash_account_id'],
+                    amount: $payment['amount'],
+                    remarks: $payment['remarks'],
+                );
+                $this->prepaidExpensePaymentActions->create($dto, false);
+            }
+
+            foreach ($data->images as $image) {
+                $prepaidExpenseImageDTO = new PrepaidExpenseImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->prepaidExpenseImageActions->attachByHash($prepaidExpense, $prepaidExpenseImageDTO);
+            }
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $prepaidExpense->company_id,
+                branchId: $prepaidExpense->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $prepaidExpense->date,
+                sourceType: PrepaidExpense::class,
+                sourceId: $prepaidExpense->id,
+                referenceNo: $prepaidExpense->code,
+                remarks: $prepaidExpense->remarks,
+                items: (function () use ($prepaidExpense) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $prepaidExpense->company->assetCurrentPrepaidExpenseChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $prepaidExpense->amount_total,
+                        credit: 0,
+                        remarks: $prepaidExpense->remarks,
+                    );
+
+                    if ((float) $prepaidExpense->amount_paid_immediately > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidExpense->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $prepaidExpense->amount_paid_immediately,
+                            remarks: $prepaidExpense->remarks,
+                        );
+                    }
+
+                    if ((float) $prepaidExpense->amount_payable > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidExpense->company->liabilityAccountPayableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $prepaidExpense->amount_payable,
+                            remarks: $prepaidExpense->remarks,
+                        );
+                    }
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            self::updateSummary($prepaidExpense);
+
+            $this->flushCache();
+
+            return $prepaidExpense;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PrepaidExpense $prepaidExpense, PrepaidExpenseUpdateDTO $data): PrepaidExpense
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidExpense->code = $this->generateUniqueCode($prepaidExpense->company_id, $data->code, $prepaidExpense->id);
+            $prepaidExpense->date = $this->generateDate($data->date);
+            $prepaidExpense->expense_category_id = $data->expenseCategoryId;
+            $prepaidExpense->estimated_useful_life = $data->estimatedUsefulLife;
+            $prepaidExpense->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $prepaidExpense->amount_paid_immediately = $data->amountPaidImmediately;
+            $prepaidExpense->amount_payable = $data->amountPayable;
+            $prepaidExpense->due_days = $data->dueDays;
+            $prepaidExpense->remarks = $data->remarks;
+            $prepaidExpense->save();
+
+            $cashTransaction = $prepaidExpense->cashTransaction;
+            if ($prepaidExpense->paid_immediately_cash_account_id && $prepaidExpense->amount_paid_immediately > 0) {
+                if (! $cashTransaction) {
+                    $this->cashTransactionActions->create(
+                        data: CashTransactionCreateDTO::fromPrepaidExpense($prepaidExpense)
+                    );
+                } else {
+                    $this->cashTransactionActions->update(
+                        cashTransaction: $cashTransaction,
+                        data: CashTransactionUpdateDTO::fromPrepaidExpense($prepaidExpense)
+                    );
+                }
+            } elseif ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            foreach ($data->deletePaymentIds as $deleteId) {
+                $prepaidExpensePayment = $prepaidExpense->payments()->findOrFail($deleteId);
+                $this->prepaidExpensePaymentActions->delete($prepaidExpensePayment, false);
+            }
+
+            foreach ($data->deleteImageIds as $deleteId) {
+                $this->prepaidExpenseImageActions->detachById($prepaidExpense, $deleteId);
+            }
+
+            foreach ($data->payments as $payment) {
+                if (! empty($payment['id'])) {
+                    $prepaidExpensePayment = $prepaidExpense->payments()->findOrFail($payment['id']);
+                    $dto = new PrepaidExpensePaymentUpdateDTO(
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->prepaidExpensePaymentActions->update($prepaidExpensePayment, $dto, false);
+                } else {
+                    $dto = new PrepaidExpensePaymentCreateDTO(
+                        companyId: $prepaidExpense->company_id,
+                        branchId: $prepaidExpense->branch_id,
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        prepaidExpenseId: $prepaidExpense->id,
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->prepaidExpensePaymentActions->create($dto, false);
+                }
+            }
+
+            foreach ($data->images as $image) {
+                $prepaidExpenseImageDTO = new PrepaidExpenseImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->prepaidExpenseImageActions->attachByHash($prepaidExpense, $prepaidExpenseImageDTO);
+            }
+
+            $journalEntry = $prepaidExpense->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $prepaidExpense->company_id,
+                    branchId: $prepaidExpense->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $prepaidExpense->date,
+                    sourceType: PrepaidExpense::class,
+                    sourceId: $prepaidExpense->id,
+                    referenceNo: $prepaidExpense->code,
+                    remarks: $prepaidExpense->remarks,
+                    items: (function () use ($prepaidExpense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidExpense->company->assetCurrentPrepaidExpenseChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $prepaidExpense->amount_total,
+                            credit: 0,
+                            remarks: $prepaidExpense->remarks,
+                        );
+
+                        if ((float) $prepaidExpense->amount_paid_immediately > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $prepaidExpense->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $prepaidExpense->amount_paid_immediately,
+                                remarks: $prepaidExpense->remarks,
+                            );
+                        }
+
+                        if ((float) $prepaidExpense->amount_payable > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $prepaidExpense->company->liabilityAccountPayableChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $prepaidExpense->amount_payable,
+                                remarks: $prepaidExpense->remarks,
+                            );
+                        }
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $prepaidExpense->branch_id,
+                    code: $journalEntry->code,
+                    date: $prepaidExpense->date,
+                    referenceNo: $prepaidExpense->code,
+                    remarks: $prepaidExpense->remarks,
+                    items: (function () use ($prepaidExpense) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidExpense->company->assetCurrentPrepaidExpenseChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $prepaidExpense->amount_total,
+                            credit: 0,
+                            remarks: $prepaidExpense->remarks,
+                        );
+
+                        if ((float) $prepaidExpense->amount_paid_immediately > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $prepaidExpense->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $prepaidExpense->amount_paid_immediately,
+                                remarks: $prepaidExpense->remarks,
+                            );
+                        }
+
+                        if ((float) $prepaidExpense->amount_payable > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $prepaidExpense->company->liabilityAccountPayableChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: 0,
+                                credit: (float) $prepaidExpense->amount_payable,
+                                remarks: $prepaidExpense->remarks,
+                            );
+                        }
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            self::updateSummary($prepaidExpense);
+
+            $this->flushCache();
+
+            return $prepaidExpense;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(PrepaidExpense $prepaidExpense): void
+    {
+        $prepaidExpense->refresh();
+
+        $prepaidExpense->amount_payable_paid = (float) $prepaidExpense->payments()->sum('amount');
+        $prepaidExpense->amount_payable_due = max(0, $prepaidExpense->amount_payable - $prepaidExpense->amount_payable_paid);
+        $prepaidExpense->is_amount_payable_paid_off = $prepaidExpense->amount_payable_due == 0;
+        $prepaidExpense->amount_total = (float) ($prepaidExpense->amount_paid_immediately + $prepaidExpense->amount_payable);
+        $prepaidExpense->save();
+    }
+
+    public function delete(PrepaidExpense $prepaidExpense): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            foreach ($prepaidExpense->payments as $payment) {
+                $this->prepaidExpensePaymentActions->delete($payment, false);
+            }
+
+            $cashTransaction = $prepaidExpense->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $prepaidExpense->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $prepaidExpense->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PrepaidExpenseImage/PrepaidExpenseImageActions.php b/api/app/Actions/PrepaidExpenseImage/PrepaidExpenseImageActions.php
new file mode 100644
index 000000000..5417a3c90
--- /dev/null
+++ b/api/app/Actions/PrepaidExpenseImage/PrepaidExpenseImageActions.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace App\Actions\PrepaidExpenseImage;
+
+use App\DTOs\PrepaidExpenseImageDTO;
+use App\Helpers\ImageHelper\ImageHelper;
+use App\Models\PrepaidExpense;
+use App\Models\PrepaidExpenseImage;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+
+class PrepaidExpenseImageActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct()
+    {
+    }
+
+    public function upload(UploadedFile $image): PrepaidExpenseImage
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $path = ImageHelper::storeAndResizeImage($image, 'prepaid_expenses', 500, 500);
+
+            $absolutePath = ImageHelper::getPath($path);
+            $hash = $absolutePath ? md5_file($absolutePath) : null;
+
+            if ($hash && PrepaidExpenseImage::where('hash', $hash)->exists()) {
+                Storage::disk('public')->delete($path);
+
+                $prepaidExpenseImage = PrepaidExpenseImage::where('hash', $hash)->first();
+            } else {
+                $prepaidExpenseImage = new PrepaidExpenseImage();
+                $prepaidExpenseImage->path = $path;
+                $prepaidExpenseImage->hash = $hash;
+                $prepaidExpenseImage->is_main = false;
+                $prepaidExpenseImage->save();
+            }
+
+            $this->flushCache();
+
+            return $prepaidExpenseImage;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function attachByHash(PrepaidExpense $prepaidExpense, PrepaidExpenseImageDTO $data): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            if ($data->isMain === true) {
+                $prepaidExpense->images()->update(['is_main' => false]);
+            }
+
+            $prepaidExpenseImage = PrepaidExpenseImage::where('prepaid_expense_id', $prepaidExpense->id)
+                ->where('hash', $data->hash)
+                ->first();
+
+            if ($prepaidExpenseImage) {
+                $prepaidExpenseImage->is_main = $data->isMain;
+                $prepaidExpenseImage->save();
+            } else {
+                $prepaidExpenseImage = PrepaidExpenseImage::where('hash', $data->hash)
+                    ->whereNull('prepaid_expense_id')
+                    ->first();
+
+                if ($prepaidExpenseImage) {
+                    $prepaidExpenseImage->prepaid_expense_id = $prepaidExpense->id;
+                    $prepaidExpenseImage->is_main = $data->isMain;
+                    $prepaidExpenseImage->save();
+                } else {
+                    $prepaidExpenseImage = PrepaidExpenseImage::where('hash', $data->hash)->first();
+
+                    if ($prepaidExpenseImage) {
+                        $prepaidExpense->images()->create([
+                            'path' => $prepaidExpenseImage->path,
+                            'hash' => $prepaidExpenseImage->hash,
+                            'is_main' => $data->isMain,
+                        ]);
+                    }
+                }
+            }
+
+            $unusedPrepaidExpenseImages = PrepaidExpenseImage::whereNull('prepaid_expense_id')
+                ->where('created_at', '<', now()->subDay())
+                ->get();
+
+            foreach ($unusedPrepaidExpenseImages as $prepaidExpenseImage) {
+                $isUsedElsewhere = PrepaidExpenseImage::where('path', $prepaidExpenseImage->path)
+                    ->whereNotNull('prepaid_expense_id')
+                    ->exists();
+
+                if (! $isUsedElsewhere) {
+                    Storage::disk('public')->delete($prepaidExpenseImage->path);
+                }
+
+                $prepaidExpenseImage->delete();
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function detachById(PrepaidExpense $prepaidExpense, int $id): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidExpenseImage = PrepaidExpenseImage::where('prepaid_expense_id', $prepaidExpense->id)
+                ->where('id', $id)
+                ->first();
+
+            if ($prepaidExpenseImage) {
+                $wasMainImage = (bool) $prepaidExpenseImage->is_main;
+                $prepaidExpenseImage->delete();
+
+                if ($wasMainImage) {
+                    $nextMainImage = PrepaidExpenseImage::where('prepaid_expense_id', $prepaidExpense->id)
+                        ->orderBy('id')
+                        ->first();
+
+                    if ($nextMainImage) {
+                        $nextMainImage->is_main = true;
+                        $nextMainImage->save();
+                    }
+                }
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PrepaidExpensePayment/PrepaidExpensePaymentActions.php b/api/app/Actions/PrepaidExpensePayment/PrepaidExpensePaymentActions.php
new file mode 100644
index 000000000..734a27ba7
--- /dev/null
+++ b/api/app/Actions/PrepaidExpensePayment/PrepaidExpensePaymentActions.php
@@ -0,0 +1,410 @@
+<?php
+
+namespace App\Actions\PrepaidExpensePayment;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\Actions\PrepaidExpense\PrepaidExpenseActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\DTOs\PrepaidExpensePaymentCreateDTO;
+use App\DTOs\PrepaidExpensePaymentUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PrepaidExpensePayment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PrepaidExpensePaymentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'prepaidExpense.category',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $prepaidExpenseId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PrepaidExpensePayment::with(self::LIST_EAGER_LOADS)
+            ->select('prepaid_expense_payments.*')
+            ->whereCompanyId('prepaid_expense_payments', $companyId)
+            ->whereBranchId('prepaid_expense_payments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $prepaidExpenseId,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $prepaidExpenseId,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('prepaid_expense_payments.code', 'like', '%'.$search.'%')
+                            ->orWhere('prepaid_expense_payments.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($prepaidExpenseId)) {
+                    $query->where('prepaid_expense_payments.prepaid_expense_id', $prepaidExpenseId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('prepaid_expense_payments.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(prepaid_expense_payments.id, '.$includeId.') desc');
+        }
+        $query->orderBy('prepaid_expense_payments.date', 'desc');
+        $query->orderBy('prepaid_expense_payments.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $prepaidExpenseId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_prepaid_expense_payment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PrepaidExpensePayment $prepaidExpensePayment): PrepaidExpensePayment
+    {
+        return $prepaidExpensePayment->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = PrepaidExpensePayment::whereCompanyId('prepaid_expense_payments', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'PREP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PrepaidExpensePayment::whereCompanyId('prepaid_expense_payments', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(PrepaidExpensePaymentCreateDTO $data, bool $updateParentSummary = true): PrepaidExpensePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidExpensePayment = new PrepaidExpensePayment();
+            $prepaidExpensePayment->company_id = $data->companyId;
+            $prepaidExpensePayment->branch_id = $data->branchId;
+            $prepaidExpensePayment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $prepaidExpensePayment->date = $this->generateDate($data->date);
+            $prepaidExpensePayment->prepaid_expense_id = $data->prepaidExpenseId;
+            $prepaidExpensePayment->cash_account_id = $data->cashAccountId;
+            $prepaidExpensePayment->amount = $data->amount;
+            $prepaidExpensePayment->remarks = $data->remarks;
+            $prepaidExpensePayment->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromPrepaidExpensePayment($prepaidExpensePayment)
+            );
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $prepaidExpensePayment->company_id,
+                branchId: $prepaidExpensePayment->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $prepaidExpensePayment->date,
+                sourceType: PrepaidExpensePayment::class,
+                sourceId: $prepaidExpensePayment->id,
+                referenceNo: $prepaidExpensePayment->code,
+                remarks: $prepaidExpensePayment->remarks,
+                items: (function () use ($prepaidExpensePayment) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $prepaidExpensePayment->company->liabilityAccountPayableChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $prepaidExpensePayment->amount,
+                        credit: 0,
+                        remarks: $prepaidExpensePayment->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $prepaidExpensePayment->cashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $prepaidExpensePayment->amount,
+                        remarks: $prepaidExpensePayment->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            if ($updateParentSummary) {
+                PrepaidExpenseActions::updateSummary($prepaidExpensePayment->prepaidExpense);
+                $prepaidExpensePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $prepaidExpensePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PrepaidExpensePayment $prepaidExpensePayment, PrepaidExpensePaymentUpdateDTO $data, bool $updateParentSummary = true): PrepaidExpensePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidExpensePayment->code = $this->generateUniqueCode($prepaidExpensePayment->company_id, $data->code, $prepaidExpensePayment->id);
+            $prepaidExpensePayment->date = $this->generateDate($data->date);
+            $prepaidExpensePayment->cash_account_id = $data->cashAccountId;
+            $prepaidExpensePayment->amount = $data->amount;
+            $prepaidExpensePayment->remarks = $data->remarks;
+            $prepaidExpensePayment->save();
+
+            $cashTransaction = $prepaidExpensePayment->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromPrepaidExpensePayment($prepaidExpensePayment)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromPrepaidExpensePayment($prepaidExpensePayment)
+                );
+            }
+
+            $journalEntry = $prepaidExpensePayment->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $prepaidExpensePayment->company_id,
+                    branchId: $prepaidExpensePayment->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $prepaidExpensePayment->date,
+                    sourceType: PrepaidExpensePayment::class,
+                    sourceId: $prepaidExpensePayment->id,
+                    referenceNo: $prepaidExpensePayment->code,
+                    remarks: $prepaidExpensePayment->remarks,
+                    items: (function () use ($prepaidExpensePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidExpensePayment->company->liabilityAccountPayableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $prepaidExpensePayment->amount,
+                            credit: 0,
+                            remarks: $prepaidExpensePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidExpensePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $prepaidExpensePayment->amount,
+                            remarks: $prepaidExpensePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $prepaidExpensePayment->branch_id,
+                    code: $journalEntry->code,
+                    date: $prepaidExpensePayment->date,
+                    referenceNo: $prepaidExpensePayment->code,
+                    remarks: $prepaidExpensePayment->remarks,
+                    items: (function () use ($prepaidExpensePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidExpensePayment->company->liabilityAccountPayableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $prepaidExpensePayment->amount,
+                            credit: 0,
+                            remarks: $prepaidExpensePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidExpensePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $prepaidExpensePayment->amount,
+                            remarks: $prepaidExpensePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            if ($updateParentSummary) {
+                PrepaidExpenseActions::updateSummary($prepaidExpensePayment->prepaidExpense);
+                $prepaidExpensePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $prepaidExpensePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(
+        PrepaidExpensePayment $prepaidExpensePayment,
+        bool $updateParentSummary = true,
+    ): bool {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $prepaidExpensePayment->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $prepaidExpensePayment->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $prepaidExpensePayment->delete();
+
+            if ($updateParentSummary) {
+                PrepaidExpenseActions::updateSummary($prepaidExpensePayment->prepaidExpense);
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PrepaidIncome/PrepaidIncomeActions.php b/api/app/Actions/PrepaidIncome/PrepaidIncomeActions.php
new file mode 100644
index 000000000..d2b6a045d
--- /dev/null
+++ b/api/app/Actions/PrepaidIncome/PrepaidIncomeActions.php
@@ -0,0 +1,561 @@
+<?php
+
+namespace App\Actions\PrepaidIncome;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\Actions\PrepaidIncomeImage\PrepaidIncomeImageActions;
+use App\Actions\PrepaidIncomePayment\PrepaidIncomePaymentActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\DTOs\PrepaidIncomeCreateDTO;
+use App\DTOs\PrepaidIncomeImageDTO;
+use App\DTOs\PrepaidIncomePaymentCreateDTO;
+use App\DTOs\PrepaidIncomePaymentUpdateDTO;
+use App\DTOs\PrepaidIncomeUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PrepaidIncome;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PrepaidIncomeActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'paidImmediatelyCashAccount',
+        'mainImage',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'paidImmediatelyCashAccount',
+        'images',
+        'mainImage',
+        'payments.cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly PrepaidIncomeImageActions $prepaidIncomeImageActions,
+        private readonly PrepaidIncomePaymentActions $prepaidIncomePaymentActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $categoryId,
+        ?bool $isAmountReceivablePaidOff,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PrepaidIncome::select('prepaid_incomes.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->whereCompanyId('prepaid_incomes', $companyId)
+            ->whereBranchId('prepaid_incomes', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $categoryId,
+            $isAmountReceivablePaidOff,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $categoryId,
+                $isAmountReceivablePaidOff,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('prepaid_incomes.code', 'like', '%'.$search.'%')
+                            ->orWhere('prepaid_incomes.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($categoryId)) {
+                    $query->where('prepaid_incomes.income_category_id', $categoryId);
+                }
+
+                if (! is_null($isAmountReceivablePaidOff)) {
+                    $query->where('prepaid_incomes.is_amount_receivable_paid_off', $isAmountReceivablePaidOff);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('prepaid_incomes.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(prepaid_incomes.id, '.$includeId.') desc');
+        }
+        $query->orderBy('prepaid_incomes.date', 'desc');
+        $query->orderBy('prepaid_incomes.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $categoryId ?? '[null]',
+                    is_null($isAmountReceivablePaidOff) ? '[null]' : ($isAmountReceivablePaidOff ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_prepaid_income_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PrepaidIncome $prepaidIncome): PrepaidIncome
+    {
+        return $prepaidIncome->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = PrepaidIncome::whereCompanyId('prepaid_incomes', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'PREI'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PrepaidIncome::whereCompanyId('prepaid_incomes', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(PrepaidIncomeCreateDTO $data): PrepaidIncome
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidIncome = new PrepaidIncome();
+            $prepaidIncome->company_id = $data->companyId;
+            $prepaidIncome->branch_id = $data->branchId;
+            $prepaidIncome->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $prepaidIncome->date = $this->generateDate($data->date);
+            $prepaidIncome->income_category_id = $data->incomeCategoryId;
+            $prepaidIncome->estimated_useful_life = $data->estimatedUsefulLife;
+            $prepaidIncome->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $prepaidIncome->amount_paid_immediately = $data->amountPaidImmediately;
+            $prepaidIncome->amount_receivable = $data->amountReceivable;
+            $prepaidIncome->due_days = $data->dueDays;
+            $prepaidIncome->remarks = $data->remarks;
+            $prepaidIncome->save();
+
+            if ($prepaidIncome->paid_immediately_cash_account_id && $prepaidIncome->amount_paid_immediately > 0) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromPrepaidIncome($prepaidIncome)
+                );
+            }
+
+            foreach ($data->payments as $payment) {
+                $dto = new PrepaidIncomePaymentCreateDTO(
+                    companyId: $prepaidIncome->company_id,
+                    branchId: $prepaidIncome->branch_id,
+                    code: $payment['code'],
+                    date: $payment['date'],
+                    prepaidIncomeId: $prepaidIncome->id,
+                    cashAccountId: $payment['cash_account_id'],
+                    amount: $payment['amount'],
+                    remarks: $payment['remarks'],
+                );
+                $this->prepaidIncomePaymentActions->create($dto, false);
+            }
+
+            foreach ($data->images as $image) {
+                $prepaidIncomeImageDTO = new PrepaidIncomeImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->prepaidIncomeImageActions->attachByHash($prepaidIncome, $prepaidIncomeImageDTO);
+            }
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $prepaidIncome->company_id,
+                branchId: $prepaidIncome->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $prepaidIncome->date,
+                sourceType: PrepaidIncome::class,
+                sourceId: $prepaidIncome->id,
+                referenceNo: $prepaidIncome->code,
+                remarks: $prepaidIncome->remarks,
+                items: (function () use ($prepaidIncome) {
+                    $items = [];
+
+                    if ((float) $prepaidIncome->amount_paid_immediately > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidIncome->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $prepaidIncome->amount_paid_immediately,
+                            credit: 0,
+                            remarks: $prepaidIncome->remarks,
+                        );
+                    }
+
+                    if ((float) $prepaidIncome->amount_receivable > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidIncome->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $prepaidIncome->amount_receivable,
+                            credit: 0,
+                            remarks: $prepaidIncome->remarks,
+                        );
+                    }
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $prepaidIncome->company->liabilityDeferredIncomeChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $prepaidIncome->amount_total,
+                        remarks: $prepaidIncome->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            self::updateSummary($prepaidIncome);
+
+            $this->flushCache();
+
+            return $prepaidIncome;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PrepaidIncome $prepaidIncome, PrepaidIncomeUpdateDTO $data): PrepaidIncome
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidIncome->code = $this->generateUniqueCode($prepaidIncome->company_id, $data->code, $prepaidIncome->id);
+            $prepaidIncome->date = $this->generateDate($data->date);
+            $prepaidIncome->income_category_id = $data->incomeCategoryId;
+            $prepaidIncome->estimated_useful_life = $data->estimatedUsefulLife;
+            $prepaidIncome->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $prepaidIncome->amount_paid_immediately = $data->amountPaidImmediately;
+            $prepaidIncome->amount_receivable = $data->amountReceivable;
+            $prepaidIncome->due_days = $data->dueDays;
+            $prepaidIncome->remarks = $data->remarks;
+            $prepaidIncome->save();
+
+            $cashTransaction = $prepaidIncome->cashTransaction;
+            if ($prepaidIncome->paid_immediately_cash_account_id && $prepaidIncome->amount_paid_immediately > 0) {
+                if (! $cashTransaction) {
+                    $this->cashTransactionActions->create(
+                        data: CashTransactionCreateDTO::fromPrepaidIncome($prepaidIncome)
+                    );
+                } else {
+                    $this->cashTransactionActions->update(
+                        cashTransaction: $cashTransaction,
+                        data: CashTransactionUpdateDTO::fromPrepaidIncome($prepaidIncome)
+                    );
+                }
+            } elseif ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            foreach ($data->deletePaymentIds as $deleteId) {
+                $prepaidIncomePayment = $prepaidIncome->payments()->findOrFail($deleteId);
+                $this->prepaidIncomePaymentActions->delete($prepaidIncomePayment, false);
+            }
+
+            foreach ($data->deleteImageIds as $deleteId) {
+                $this->prepaidIncomeImageActions->detachById($prepaidIncome, $deleteId);
+            }
+
+            foreach ($data->payments as $payment) {
+                if (! empty($payment['id'])) {
+                    $prepaidIncomePayment = $prepaidIncome->payments()->findOrFail($payment['id']);
+                    $dto = new PrepaidIncomePaymentUpdateDTO(
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->prepaidIncomePaymentActions->update($prepaidIncomePayment, $dto, false);
+                } else {
+                    $dto = new PrepaidIncomePaymentCreateDTO(
+                        companyId: $prepaidIncome->company_id,
+                        branchId: $prepaidIncome->branch_id,
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        prepaidIncomeId: $prepaidIncome->id,
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->prepaidIncomePaymentActions->create($dto, false);
+                }
+            }
+
+            foreach ($data->images as $image) {
+                $prepaidIncomeImageDTO = new PrepaidIncomeImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->prepaidIncomeImageActions->attachByHash($prepaidIncome, $prepaidIncomeImageDTO);
+            }
+
+            $journalEntry = $prepaidIncome->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $prepaidIncome->company_id,
+                    branchId: $prepaidIncome->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $prepaidIncome->date,
+                    sourceType: PrepaidIncome::class,
+                    sourceId: $prepaidIncome->id,
+                    referenceNo: $prepaidIncome->code,
+                    remarks: $prepaidIncome->remarks,
+                    items: (function () use ($prepaidIncome) {
+                        $items = [];
+
+                        if ((float) $prepaidIncome->amount_paid_immediately > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $prepaidIncome->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $prepaidIncome->amount_paid_immediately,
+                                credit: 0,
+                                remarks: $prepaidIncome->remarks,
+                            );
+                        }
+
+                        if ((float) $prepaidIncome->amount_receivable > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $prepaidIncome->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $prepaidIncome->amount_receivable,
+                                credit: 0,
+                                remarks: $prepaidIncome->remarks,
+                            );
+                        }
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidIncome->company->liabilityDeferredIncomeChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $prepaidIncome->amount_total,
+                            remarks: $prepaidIncome->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $prepaidIncome->branch_id,
+                    code: $journalEntry->code,
+                    date: $prepaidIncome->date,
+                    referenceNo: $prepaidIncome->code,
+                    remarks: $prepaidIncome->remarks,
+                    items: (function () use ($prepaidIncome) {
+                        $items = [];
+
+                        if ((float) $prepaidIncome->amount_paid_immediately > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $prepaidIncome->paidImmediatelyCashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $prepaidIncome->amount_paid_immediately,
+                                credit: 0,
+                                remarks: $prepaidIncome->remarks,
+                            );
+                        }
+
+                        if ((float) $prepaidIncome->amount_receivable > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $prepaidIncome->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $prepaidIncome->amount_receivable,
+                                credit: 0,
+                                remarks: $prepaidIncome->remarks,
+                            );
+                        }
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidIncome->company->liabilityDeferredIncomeChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $prepaidIncome->amount_total,
+                            remarks: $prepaidIncome->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            self::updateSummary($prepaidIncome);
+
+            $this->flushCache();
+
+            return $prepaidIncome;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(PrepaidIncome $prepaidIncome): void
+    {
+        $prepaidIncome->refresh();
+
+        $prepaidIncome->amount_receivable_paid = (float) $prepaidIncome->payments()->sum('amount');
+        $prepaidIncome->amount_receivable_due = max(0, $prepaidIncome->amount_receivable - $prepaidIncome->amount_receivable_paid);
+        $prepaidIncome->is_amount_receivable_paid_off = $prepaidIncome->amount_receivable_due == 0;
+        $prepaidIncome->amount_total = (float) ($prepaidIncome->amount_paid_immediately + $prepaidIncome->amount_receivable);
+        $prepaidIncome->save();
+    }
+
+    public function delete(PrepaidIncome $prepaidIncome): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            foreach ($prepaidIncome->payments as $payment) {
+                $this->prepaidIncomePaymentActions->delete($payment, false);
+            }
+
+            $cashTransaction = $prepaidIncome->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $prepaidIncome->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $prepaidIncome->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PrepaidIncomeImage/PrepaidIncomeImageActions.php b/api/app/Actions/PrepaidIncomeImage/PrepaidIncomeImageActions.php
new file mode 100644
index 000000000..3ea6d342e
--- /dev/null
+++ b/api/app/Actions/PrepaidIncomeImage/PrepaidIncomeImageActions.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace App\Actions\PrepaidIncomeImage;
+
+use App\DTOs\PrepaidIncomeImageDTO;
+use App\Helpers\ImageHelper\ImageHelper;
+use App\Models\PrepaidIncome;
+use App\Models\PrepaidIncomeImage;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+
+class PrepaidIncomeImageActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct()
+    {
+    }
+
+    public function upload(UploadedFile $image): PrepaidIncomeImage
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $path = ImageHelper::storeAndResizeImage($image, 'prepaid_incomes', 500, 500);
+
+            $absolutePath = ImageHelper::getPath($path);
+            $hash = $absolutePath ? md5_file($absolutePath) : null;
+
+            if ($hash && PrepaidIncomeImage::where('hash', $hash)->exists()) {
+                Storage::disk('public')->delete($path);
+
+                $prepaidIncomeImage = PrepaidIncomeImage::where('hash', $hash)->first();
+            } else {
+                $prepaidIncomeImage = new PrepaidIncomeImage();
+                $prepaidIncomeImage->path = $path;
+                $prepaidIncomeImage->hash = $hash;
+                $prepaidIncomeImage->is_main = false;
+                $prepaidIncomeImage->save();
+            }
+
+            $this->flushCache();
+
+            return $prepaidIncomeImage;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function attachByHash(PrepaidIncome $prepaidIncome, PrepaidIncomeImageDTO $data): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            if ($data->isMain === true) {
+                $prepaidIncome->images()->update(['is_main' => false]);
+            }
+
+            $prepaidIncomeImage = PrepaidIncomeImage::where('prepaid_income_id', $prepaidIncome->id)
+                ->where('hash', $data->hash)
+                ->first();
+
+            if ($prepaidIncomeImage) {
+                $prepaidIncomeImage->is_main = $data->isMain;
+                $prepaidIncomeImage->save();
+            } else {
+                $prepaidIncomeImage = PrepaidIncomeImage::where('hash', $data->hash)
+                    ->whereNull('prepaid_income_id')
+                    ->first();
+
+                if ($prepaidIncomeImage) {
+                    $prepaidIncomeImage->prepaid_income_id = $prepaidIncome->id;
+                    $prepaidIncomeImage->is_main = $data->isMain;
+                    $prepaidIncomeImage->save();
+                } else {
+                    $prepaidIncomeImage = PrepaidIncomeImage::where('hash', $data->hash)->first();
+
+                    if ($prepaidIncomeImage) {
+                        $prepaidIncome->images()->create([
+                            'path' => $prepaidIncomeImage->path,
+                            'hash' => $prepaidIncomeImage->hash,
+                            'is_main' => $data->isMain,
+                        ]);
+                    }
+                }
+            }
+
+            $unusedPrepaidIncomeImages = PrepaidIncomeImage::whereNull('prepaid_income_id')
+                ->where('created_at', '<', now()->subDay())
+                ->get();
+
+            foreach ($unusedPrepaidIncomeImages as $prepaidIncomeImage) {
+                $isUsedElsewhere = PrepaidIncomeImage::where('path', $prepaidIncomeImage->path)
+                    ->whereNotNull('prepaid_income_id')
+                    ->exists();
+
+                if (! $isUsedElsewhere) {
+                    Storage::disk('public')->delete($prepaidIncomeImage->path);
+                }
+
+                $prepaidIncomeImage->delete();
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function detachById(PrepaidIncome $prepaidIncome, int $id): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidIncomeImage = PrepaidIncomeImage::where('prepaid_income_id', $prepaidIncome->id)
+                ->where('id', $id)
+                ->first();
+
+            if ($prepaidIncomeImage) {
+                $wasMainImage = (bool) $prepaidIncomeImage->is_main;
+                $prepaidIncomeImage->delete();
+
+                if ($wasMainImage) {
+                    $nextMainImage = PrepaidIncomeImage::where('prepaid_income_id', $prepaidIncome->id)
+                        ->orderBy('id')
+                        ->first();
+
+                    if ($nextMainImage) {
+                        $nextMainImage->is_main = true;
+                        $nextMainImage->save();
+                    }
+                }
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PrepaidIncomePayment/PrepaidIncomePaymentActions.php b/api/app/Actions/PrepaidIncomePayment/PrepaidIncomePaymentActions.php
new file mode 100644
index 000000000..7052c9731
--- /dev/null
+++ b/api/app/Actions/PrepaidIncomePayment/PrepaidIncomePaymentActions.php
@@ -0,0 +1,410 @@
+<?php
+
+namespace App\Actions\PrepaidIncomePayment;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\Actions\PrepaidIncome\PrepaidIncomeActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\DTOs\PrepaidIncomePaymentCreateDTO;
+use App\DTOs\PrepaidIncomePaymentUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PrepaidIncomePayment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PrepaidIncomePaymentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'prepaidIncome.category',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $prepaidIncomeId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PrepaidIncomePayment::with(self::LIST_EAGER_LOADS)
+            ->select('prepaid_income_payments.*')
+            ->whereCompanyId('prepaid_income_payments', $companyId)
+            ->whereBranchId('prepaid_income_payments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $prepaidIncomeId,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $prepaidIncomeId,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('prepaid_income_payments.code', 'like', '%'.$search.'%')
+                            ->orWhere('prepaid_income_payments.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($prepaidIncomeId)) {
+                    $query->where('prepaid_income_payments.prepaid_income_id', $prepaidIncomeId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('prepaid_income_payments.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(prepaid_income_payments.id, '.$includeId.') desc');
+        }
+        $query->orderBy('prepaid_income_payments.date', 'desc');
+        $query->orderBy('prepaid_income_payments.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $prepaidIncomeId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_prepaid_income_payment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PrepaidIncomePayment $prepaidIncomePayment): PrepaidIncomePayment
+    {
+        return $prepaidIncomePayment->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = PrepaidIncomePayment::whereCompanyId('prepaid_income_payments', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'PREIP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PrepaidIncomePayment::whereCompanyId('prepaid_income_payments', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(PrepaidIncomePaymentCreateDTO $data, bool $updateParentSummary = true): PrepaidIncomePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidIncomePayment = new PrepaidIncomePayment();
+            $prepaidIncomePayment->company_id = $data->companyId;
+            $prepaidIncomePayment->branch_id = $data->branchId;
+            $prepaidIncomePayment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $prepaidIncomePayment->date = $this->generateDate($data->date);
+            $prepaidIncomePayment->prepaid_income_id = $data->prepaidIncomeId;
+            $prepaidIncomePayment->cash_account_id = $data->cashAccountId;
+            $prepaidIncomePayment->amount = $data->amount;
+            $prepaidIncomePayment->remarks = $data->remarks;
+            $prepaidIncomePayment->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromPrepaidIncomePayment($prepaidIncomePayment)
+            );
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $prepaidIncomePayment->company_id,
+                branchId: $prepaidIncomePayment->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $prepaidIncomePayment->date,
+                sourceType: PrepaidIncomePayment::class,
+                sourceId: $prepaidIncomePayment->id,
+                referenceNo: $prepaidIncomePayment->code,
+                remarks: $prepaidIncomePayment->remarks,
+                items: (function () use ($prepaidIncomePayment) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $prepaidIncomePayment->cashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $prepaidIncomePayment->amount,
+                        credit: 0,
+                        remarks: $prepaidIncomePayment->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $prepaidIncomePayment->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $prepaidIncomePayment->amount,
+                        remarks: $prepaidIncomePayment->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            if ($updateParentSummary) {
+                PrepaidIncomeActions::updateSummary($prepaidIncomePayment->prepaidIncome);
+                $prepaidIncomePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $prepaidIncomePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PrepaidIncomePayment $prepaidIncomePayment, PrepaidIncomePaymentUpdateDTO $data, bool $updateParentSummary = true): PrepaidIncomePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $prepaidIncomePayment->code = $this->generateUniqueCode($prepaidIncomePayment->company_id, $data->code, $prepaidIncomePayment->id);
+            $prepaidIncomePayment->date = $this->generateDate($data->date);
+            $prepaidIncomePayment->cash_account_id = $data->cashAccountId;
+            $prepaidIncomePayment->amount = $data->amount;
+            $prepaidIncomePayment->remarks = $data->remarks;
+            $prepaidIncomePayment->save();
+
+            $cashTransaction = $prepaidIncomePayment->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromPrepaidIncomePayment($prepaidIncomePayment)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromPrepaidIncomePayment($prepaidIncomePayment)
+                );
+            }
+
+            $journalEntry = $prepaidIncomePayment->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $prepaidIncomePayment->company_id,
+                    branchId: $prepaidIncomePayment->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $prepaidIncomePayment->date,
+                    sourceType: PrepaidIncomePayment::class,
+                    sourceId: $prepaidIncomePayment->id,
+                    referenceNo: $prepaidIncomePayment->code,
+                    remarks: $prepaidIncomePayment->remarks,
+                    items: (function () use ($prepaidIncomePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidIncomePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $prepaidIncomePayment->amount,
+                            credit: 0,
+                            remarks: $prepaidIncomePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidIncomePayment->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $prepaidIncomePayment->amount,
+                            remarks: $prepaidIncomePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $prepaidIncomePayment->branch_id,
+                    code: $journalEntry->code,
+                    date: $prepaidIncomePayment->date,
+                    referenceNo: $prepaidIncomePayment->code,
+                    remarks: $prepaidIncomePayment->remarks,
+                    items: (function () use ($prepaidIncomePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidIncomePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $prepaidIncomePayment->amount,
+                            credit: 0,
+                            remarks: $prepaidIncomePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $prepaidIncomePayment->company->assetCurrentAccountReceivableChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $prepaidIncomePayment->amount,
+                            remarks: $prepaidIncomePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            if ($updateParentSummary) {
+                PrepaidIncomeActions::updateSummary($prepaidIncomePayment->prepaidIncome);
+                $prepaidIncomePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $prepaidIncomePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(
+        PrepaidIncomePayment $prepaidIncomePayment,
+        bool $updateParentSummary = true,
+    ): bool {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $prepaidIncomePayment->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $prepaidIncomePayment->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $prepaidIncomePayment->delete();
+
+            if ($updateParentSummary) {
+                PrepaidIncomeActions::updateSummary($prepaidIncomePayment->prepaidIncome);
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/Product/ProductActions.php b/api/app/Actions/Product/ProductActions.php
new file mode 100644
index 000000000..5ad66f0a0
--- /dev/null
+++ b/api/app/Actions/Product/ProductActions.php
@@ -0,0 +1,308 @@
+<?php
+
+namespace App\Actions\Product;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ProductWithRemainingStockDTO;
+use App\Enums\ProductStockFilterEnum;
+use App\Enums\ProductTypeEnum;
+use App\Enums\SortDirectionEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\Product;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ProductActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'category',
+        'brand',
+        'defaultVatProfile',
+        'productUnits.unit',
+        'images',
+        'mainImage',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $categoryId,
+        ?int $brandId,
+        ?int $defaultVatProfileId,
+        ?bool $isPriceIncludeVat,
+        ?bool $isUseSerialNumber,
+        ?bool $isExpirable,
+        ?int $type,
+        ?int $status,
+        ?int $includeId,
+        ?ProductWithRemainingStockDTO $withRemainingStock,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Product::select('products.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->withTrashed();
+
+        $query->join('product_categories', 'products.category_id', '=', 'product_categories.id');
+        $query->leftJoin('brands', 'products.brand_id', '=', 'brands.id');
+
+        $query->whereCompanyId('products', $companyId);
+
+        if ($withRemainingStock) {
+            $endDate = $withRemainingStock->endDate ? TimezoneHelper::convertToUTC($withRemainingStock->endDate) : null;
+
+            $query->withRemainingStock(
+                endDate: $endDate,
+                warehouseId: $withRemainingStock->warehouseId,
+            );
+        }
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $categoryId,
+            $brandId,
+            $defaultVatProfileId,
+            $isPriceIncludeVat,
+            $isUseSerialNumber,
+            $isExpirable,
+            $type,
+            $status,
+            $includeId,
+            $withRemainingStock,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $categoryId,
+                $brandId,
+                $defaultVatProfileId,
+                $isPriceIncludeVat,
+                $isUseSerialNumber,
+                $isExpirable,
+                $type,
+                $status,
+                $withRemainingStock,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->whereHas('brand', function ($query) use ($search) {
+                            $query->where(function ($query) use ($search) {
+                                $query->where('brands.code', 'like', '%'.$search.'%')
+                                    ->orWhere('brands.name', 'like', '%'.$search.'%');
+                            });
+                        })
+                            ->orWhereHas('category', function ($query) use ($search) {
+                                $query->where(function ($query) use ($search) {
+                                    $query->where('product_categories.code', 'like', '%'.$search.'%')
+                                        ->orWhere('product_categories.name', 'like', '%'.$search.'%');
+                                });
+                            })
+                            ->orWhere('products.code', 'like', '%'.$search.'%')
+                            ->orWhere('products.name', 'like', '%'.$search.'%')
+                            ->orWhere('products.remarks', 'like', '%'.$search.'%')
+                            ->orWhereHas('productUnits', function ($query) use ($search) {
+                                $query->where(function ($query) use ($search) {
+                                    $query->where('items.code', 'like', '%'.$search.'%')
+                                        ->orWhere('items.remarks', 'like', '%'.$search.'%');
+                                });
+                            });
+                    });
+                }
+
+                if ($categoryId) {
+                    $query->where('products.category_id', $categoryId);
+                }
+
+                if ($brandId) {
+                    $query->where('products.brand_id', $brandId);
+                }
+
+                if ($defaultVatProfileId) {
+                    $query->where('products.default_vat_profile_id', $defaultVatProfileId);
+                }
+
+                if (! is_null($isPriceIncludeVat)) {
+                    $query->where('products.is_price_include_vat', $isPriceIncludeVat);
+                }
+
+                if (! is_null($isUseSerialNumber)) {
+                    $query->where('products.is_use_serial_number', $isUseSerialNumber);
+                }
+
+                if (! is_null($isExpirable)) {
+                    $query->where('products.is_expirable', $isExpirable);
+                }
+
+                if (! is_null($type)) {
+                    $query->where('products.type', $type);
+                }
+
+                if (! is_null($status)) {
+                    $query->where('products.status', $status);
+                }
+
+                if ($withRemainingStock) {
+                    $query->where(function ($query) use ($withRemainingStock) {
+                        if ($withRemainingStock->stockFilter !== null) {
+                            $stockFilter = $withRemainingStock->stockFilter;
+
+                            if ($stockFilter === ProductStockFilterEnum::HAS_STOCK->value) {
+                                $query->whereRaw('COALESCE(products_with_remaining_stock.remaining_stock, 0) > 0');
+                            } elseif ($stockFilter === ProductStockFilterEnum::EMPTY->value) {
+                                $query->whereRaw('COALESCE(products_with_remaining_stock.remaining_stock, 0) = 0');
+                            } elseif ($stockFilter === ProductStockFilterEnum::VALID->value) {
+                                $query->whereRaw('COALESCE(products_with_remaining_stock.remaining_stock, 0) >= 0');
+                            } elseif ($stockFilter === ProductStockFilterEnum::INVALID->value) {
+                                $query->whereRaw('COALESCE(products_with_remaining_stock.remaining_stock, 0) < 0');
+                            }
+                        }
+
+                        if ($withRemainingStock->lessThan !== null) {
+                            $query->whereRaw(
+                                'COALESCE(products_with_remaining_stock.remaining_stock, 0) < ?',
+                                [$withRemainingStock->lessThan]
+                            );
+                        }
+
+                        if ($withRemainingStock->greaterThan !== null) {
+                            $query->whereRaw(
+                                'COALESCE(products_with_remaining_stock.remaining_stock, 0) > ?',
+                                [$withRemainingStock->greaterThan]
+                            );
+                        }
+                    });
+
+                    if ($withRemainingStock->includeServiceProducts === true) {
+                        $query->orWhere('products.type', ProductTypeEnum::SERVICE->value);
+                    }
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('products.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(products.id, '.$includeId.') desc');
+        }
+
+        if ($withRemainingStock?->sortByRemainingStock) {
+            $directionEnum = SortDirectionEnum::tryFrom(strtolower($withRemainingStock->sortByRemainingStock)) ?? SortDirectionEnum::ASC;
+            $query->orderByRaw('COALESCE(products_with_remaining_stock.remaining_stock, 0) '.$directionEnum->value);
+        }
+
+        $query->orderBy('product_categories.name', 'asc');
+        $query->orderBy('brands.name', 'asc');
+        $query->orderBy('products.status', 'desc');
+        $query->orderBy('products.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $categoryId ?? '[null]',
+                    $brandId ?? '[null]',
+                    is_null($isPriceIncludeVat) ? '[null]' : ($isPriceIncludeVat ? 'true' : 'false'),
+                    is_null($isUseSerialNumber) ? '[null]' : ($isUseSerialNumber ? 'true' : 'false'),
+                    is_null($isExpirable) ? '[null]' : ($isExpirable ? 'true' : 'false'),
+                    $type ?? '[null]',
+                    $status ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Product $product): Product
+    {
+        return $product->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function delete(Product $product): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $product->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/Product/ProductPhysicalActions.php b/api/app/Actions/Product/ProductPhysicalActions.php
new file mode 100644
index 000000000..06bcf1cfe
--- /dev/null
+++ b/api/app/Actions/Product/ProductPhysicalActions.php
@@ -0,0 +1,223 @@
+<?php
+
+namespace App\Actions\Product;
+
+use App\Actions\ProductImage\ProductImageActions;
+use App\Actions\ProductUnit\ProductUnitActions;
+use App\DTOs\ProductImageDTO;
+use App\DTOs\ProductPhysicalCreateDTO;
+use App\DTOs\ProductPhysicalUpdateDTO;
+use App\DTOs\ProductUnitCreatePhysicalDTO;
+use App\DTOs\ProductUnitUpdatePhysicalDTO;
+use App\Enums\ProductTypeEnum;
+use App\Models\Company;
+use App\Models\Product;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+
+class ProductPhysicalActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct(
+        private ProductUnitActions $productUnitActions,
+        private ProductImageActions $productImageActions,
+    ) {
+    }
+
+    public function create(ProductPhysicalCreateDTO $data): Product
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $product = new Product();
+            $product->company_id = $data->companyId;
+            $product->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $product->category_id = $data->categoryId;
+            $product->brand_id = $data->brandId;
+            $product->default_vat_profile_id = $data->defaultVatProfileId;
+            $product->name = $data->name;
+            $product->is_price_include_vat = $data->isPriceIncludeVat;
+            $product->is_use_serial_number = $data->isUseSerialNumber;
+            $product->is_expirable = $data->isExpirable;
+            $product->remarks = $data->remarks;
+            $product->type = $data->type;
+            $product->status = $data->status;
+            $product->save();
+
+            foreach ($data->productUnits as $productUnit) {
+                $productUnitDTO = new ProductUnitCreatePhysicalDTO(
+                    companyId: $product->company_id,
+                    productId: $product->id,
+                    code: $productUnit['code'],
+                    isManufacturerSKU: $productUnit['is_manufacturer_sku'],
+                    unitId: $productUnit['unit_id'],
+                    price: $productUnit['price'],
+                    conversionValue: $productUnit['conversion_value'],
+                    isPrimaryUnit: $productUnit['is_primary_unit'],
+                    point: $productUnit['point'],
+                    remarks: $productUnit['remarks'],
+                );
+
+                $this->productUnitActions->createPhysical($productUnitDTO);
+            }
+
+            foreach ($data->images as $image) {
+                $productImageDTO = new ProductImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->productImageActions->attachByHash($product, $productImageDTO);
+            }
+
+            $this->flushCache();
+
+            return $product;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Product $product, ProductPhysicalUpdateDTO $data): Product
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $product->code = $this->generateUniqueCode($product->company_id, $data->code, $product->id);
+            $product->category_id = $data->categoryId;
+            $product->brand_id = $data->brandId;
+            $product->default_vat_profile_id = $data->defaultVatProfileId;
+            $product->name = $data->name;
+            $product->is_price_include_vat = $data->isPriceIncludeVat;
+            $product->is_use_serial_number = $data->isUseSerialNumber;
+            $product->is_expirable = $data->isExpirable;
+            $product->remarks = $data->remarks;
+            $product->type = $data->type;
+            $product->status = $data->status;
+            $product->save();
+
+            foreach ($data->deleteProductUnitIds as $deleteProductUnitId) {
+                $productUnit = $product->productUnits()->find($deleteProductUnitId);
+                if ($productUnit) {
+                    $this->productUnitActions->delete($productUnit);
+                }
+            }
+
+            foreach ($data->productUnits as $productUnitData) {
+                if (! isset($productUnitData['id'])) {
+                    $dto = new ProductUnitCreatePhysicalDTO(
+                        companyId: $product->company_id,
+                        productId: $product->id,
+                        code: $productUnitData['code'],
+                        isManufacturerSKU: $productUnitData['is_manufacturer_sku'],
+                        unitId: $productUnitData['unit_id'],
+                        price: $productUnitData['price'],
+                        conversionValue: $productUnitData['conversion_value'],
+                        isPrimaryUnit: $productUnitData['is_primary_unit'],
+                        point: $productUnitData['point'],
+                        remarks: $productUnitData['remarks'],
+                    );
+
+                    $this->productUnitActions->createPhysical($dto);
+                } else {
+                    $productUnit = $product->productUnits()->find($productUnitData['id']);
+                    if ($productUnit) {
+                        $updateDto = new ProductUnitUpdatePhysicalDTO(
+                            code: $productUnitData['code'],
+                            isManufacturerSku: $productUnitData['is_manufacturer_sku'],
+                            unitId: $productUnitData['unit_id'],
+                            price: $productUnitData['price'],
+                            conversionValue: $productUnitData['conversion_value'],
+                            isPrimaryUnit: $productUnitData['is_primary_unit'],
+                            point: $productUnitData['point'],
+                            remarks: $productUnitData['remarks'],
+                        );
+
+                        $this->productUnitActions->updatePhysical($productUnit, $updateDto);
+                    }
+                }
+            }
+
+            foreach ($data->deleteImageIds as $imageId) {
+                $this->productImageActions->detachById($product, $imageId);
+            }
+
+            foreach ($data->images as $image) {
+                $productImageDTO = new ProductImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->productImageActions->attachByHash($product, $productImageDTO);
+            }
+
+            $this->flushCache();
+
+            return $product->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->products()
+                ->where('type', '<>', ProductTypeEnum::SERVICE->value)
+                ->withTrashed()
+                ->count() + 1 + $tryCount;
+            $code = 'PRD'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->products()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->products()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('products.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->products()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->products()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('products.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/Product/ProductServiceActions.php b/api/app/Actions/Product/ProductServiceActions.php
new file mode 100644
index 000000000..29ed8b785
--- /dev/null
+++ b/api/app/Actions/Product/ProductServiceActions.php
@@ -0,0 +1,186 @@
+<?php
+
+namespace App\Actions\Product;
+
+use App\Actions\ProductImage\ProductImageActions;
+use App\Actions\ProductUnit\ProductUnitActions;
+use App\DTOs\ProductImageDTO;
+use App\DTOs\ProductServiceCreateDTO;
+use App\DTOs\ProductServiceUpdateDTO;
+use App\DTOs\ProductUnitCreateServiceDTO;
+use App\DTOs\ProductUnitUpdateServiceDTO;
+use App\Enums\ProductTypeEnum;
+use App\Models\Company;
+use App\Models\Product;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+
+class ProductServiceActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct(
+        private ProductUnitActions $productUnitActions,
+        private ProductImageActions $productImageActions,
+    ) {
+    }
+
+    public function create(ProductServiceCreateDTO $data): Product
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $product = new Product();
+            $product->company_id = $data->companyId;
+            $product->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $product->category_id = $data->categoryId;
+            $product->brand_id = null;
+            $product->default_vat_profile_id = $data->defaultVatProfileId;
+            $product->name = $data->name;
+            $product->is_price_include_vat = $data->isPriceIncludeVat;
+            $product->is_use_serial_number = false;
+            $product->is_expirable = false;
+            $product->remarks = $data->remarks;
+            $product->type = ProductTypeEnum::SERVICE->value;
+            $product->status = $data->status;
+            $product->save();
+
+            $productUnitDTO = new ProductUnitCreateServiceDTO(
+                companyId: $product->company_id,
+                productId: $product->id,
+                remarks: null,
+                unitId: $data->unitId,
+                price: $data->price,
+                point: $data->point,
+            );
+
+            $this->productUnitActions->createService($productUnitDTO);
+
+            foreach ($data->images as $image) {
+                $productImageDTO = new ProductImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->productImageActions->attachByHash($product, $productImageDTO);
+            }
+
+            $this->flushCache();
+
+            return $product;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Product $product, ProductServiceUpdateDTO $data): Product
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $product->code = $this->generateUniqueCode($product->company_id, $data->code, $product->id);
+            $product->category_id = $data->categoryId;
+            $product->brand_id = null;
+            $product->default_vat_profile_id = $data->defaultVatProfileId;
+            $product->name = $data->name;
+            $product->is_price_include_vat = $data->isPriceIncludeVat;
+            $product->is_use_serial_number = false;
+            $product->is_expirable = false;
+            $product->remarks = $data->remarks;
+            $product->type = ProductTypeEnum::SERVICE->value;
+            $product->status = $data->status;
+            $product->save();
+
+            $productUnit = $product->productUnits()->firstOrFail();
+
+            $updateDto = new ProductUnitUpdateServiceDTO(
+                remarks: null,
+                unitId: $data->unitId,
+                price: $data->price,
+                point: $data->point,
+            );
+
+            $this->productUnitActions->updateService($productUnit, $updateDto);
+
+            foreach ($data->deleteImageIds as $imageId) {
+                $this->productImageActions->detachById($product, $imageId);
+            }
+
+            foreach ($data->images as $image) {
+                $productImageDTO = new ProductImageDTO(
+                    hash: $image['hash'],
+                    isMain: (bool) $image['is_main'],
+                );
+
+                $this->productImageActions->attachByHash($product, $productImageDTO);
+            }
+
+            $this->flushCache();
+
+            return $product->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->products()
+                ->where('type', '=', ProductTypeEnum::SERVICE->value)
+                ->withTrashed()
+                ->count() + 1 + $tryCount;
+            $code = 'SVC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->products()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->products()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('products.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->products()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->products()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('products.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/ProductCategory/ProductCategoryActions.php b/api/app/Actions/ProductCategory/ProductCategoryActions.php
new file mode 100644
index 000000000..7d360d161
--- /dev/null
+++ b/api/app/Actions/ProductCategory/ProductCategoryActions.php
@@ -0,0 +1,249 @@
+<?php
+
+namespace App\Actions\ProductCategory;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ProductCategoryCreateDTO;
+use App\DTOs\ProductCategoryUpdateDTO;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ProductCategoryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+
+        ?string $search,
+        ?int $type,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = ProductCategory::with(self::LIST_EAGER_LOADS)->select('product_categories.*')
+            ->whereCompanyId('product_categories', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $type, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search, $type) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('product_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('product_categories.name', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if ($type !== null) {
+                    $query->where('product_categories.type', $type);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('product_categories.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(product_categories.id, '.$includeId.') desc');
+        }
+        $query->orderBy('product_categories.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $type ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(ProductCategory $productCategory): ProductCategory
+    {
+        return $productCategory->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(ProductCategoryCreateDTO $data): ProductCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $productCategory = new ProductCategory();
+            $productCategory->company_id = $data->companyId;
+            $productCategory->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $productCategory->name = $data->name;
+            $productCategory->type = $data->type;
+            $productCategory->save();
+
+            $this->flushCache();
+
+            return $productCategory;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(ProductCategory $productCategory, ProductCategoryUpdateDTO $data): ProductCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $productCategory->code = $this->generateUniqueCode($productCategory->company_id, $data->code, $productCategory->id);
+            $productCategory->name = $data->name;
+            $productCategory->type = $data->type;
+            $productCategory->save();
+
+            $this->flushCache();
+
+            return $productCategory->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(ProductCategory $productCategory): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $productCategory->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->productCategories()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'PC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->productCategories()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->productCategories()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('product_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->productCategories()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->productCategories()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('product_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/ProductImage/ProductImageActions.php b/api/app/Actions/ProductImage/ProductImageActions.php
new file mode 100644
index 000000000..ba0861f99
--- /dev/null
+++ b/api/app/Actions/ProductImage/ProductImageActions.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace App\Actions\ProductImage;
+
+use App\DTOs\ProductImageDTO;
+use App\Helpers\ImageHelper\ImageHelper;
+use App\Models\Product;
+use App\Models\ProductImage;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+
+class ProductImageActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct()
+    {
+    }
+
+    public function upload(UploadedFile $image): ProductImage
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $path = ImageHelper::storeAndResizeImage($image, 'products', 500, 500);
+
+            $absolutePath = ImageHelper::getPath($path);
+            $hash = $absolutePath ? md5_file($absolutePath) : null;
+
+            if ($hash && ProductImage::where('hash', $hash)->exists()) {
+                Storage::disk('public')->delete($path);
+
+                $productImage = ProductImage::where('hash', $hash)->first();
+            } else {
+                $productImage = new ProductImage();
+                $productImage->path = $path;
+                $productImage->hash = $hash;
+                $productImage->is_main = false;
+                $productImage->save();
+            }
+
+            $this->flushCache();
+
+            return $productImage;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function attachByHash(Product $product, ProductImageDTO $data): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            if ($data->isMain === true) {
+                $product->images()->update(['is_main' => false]);
+            }
+
+            $productImage = ProductImage::where('product_id', $product->id)
+                ->where('hash', $data->hash)
+                ->first();
+
+            if ($productImage) {
+                $productImage->is_main = $data->isMain;
+                $productImage->save();
+            } else {
+                $productImage = ProductImage::where('hash', $data->hash)
+                    ->whereNull('product_id')
+                    ->first();
+
+                if ($productImage) {
+                    $productImage->product_id = $product->id;
+                    $productImage->is_main = $data->isMain;
+                    $productImage->save();
+                } else {
+                    $productImage = ProductImage::where('hash', $data->hash)->first();
+
+                    if ($productImage) {
+                        $product->images()->create([
+                            'path' => $productImage->path,
+                            'hash' => $productImage->hash,
+                            'is_main' => $data->isMain,
+                        ]);
+                    }
+                }
+            }
+
+            $unusedProductImages = ProductImage::whereNull('product_id')
+                ->where('created_at', '<', now()->subDay())
+                ->get();
+
+            foreach ($unusedProductImages as $productImage) {
+                $isUsedElsewhere = ProductImage::where('path', $productImage->path)
+                    ->whereNotNull('product_id')
+                    ->exists();
+
+                if (! $isUsedElsewhere) {
+                    Storage::disk('public')->delete($productImage->path);
+                }
+
+                $productImage->delete();
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function detachById(Product $product, int $id): void
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $productImage = ProductImage::where('product_id', $product->id)
+                ->where('id', $id)
+                ->first();
+
+            if ($productImage) {
+                $wasMainImage = (bool) $productImage->is_main;
+                $productImage->delete();
+
+                if ($wasMainImage) {
+                    $nextMainImage = ProductImage::where('product_id', $product->id)
+                        ->orderBy('id')
+                        ->first();
+
+                    if ($nextMainImage) {
+                        $nextMainImage->is_main = true;
+                        $nextMainImage->save();
+                    }
+                }
+            }
+
+            $this->flushCache();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/ProductUnit/ProductUnitActions.php b/api/app/Actions/ProductUnit/ProductUnitActions.php
new file mode 100644
index 000000000..fe209c1dc
--- /dev/null
+++ b/api/app/Actions/ProductUnit/ProductUnitActions.php
@@ -0,0 +1,379 @@
+<?php
+
+namespace App\Actions\ProductUnit;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ProductUnitCreatePhysicalDTO;
+use App\DTOs\ProductUnitCreateServiceDTO;
+use App\DTOs\ProductUnitUpdatePhysicalDTO;
+use App\DTOs\ProductUnitUpdateServiceDTO;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\ProductUnit;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ProductUnitActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'unit',
+        'product',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $productId,
+        ?int $unitId,
+        ?bool $isBase,
+        ?bool $isPrimaryUnit,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = ProductUnit::with(self::LIST_EAGER_LOADS)->select('product_units.*')
+            ->where('product_units.company_id', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $productId, $unitId, $isBase, $isPrimaryUnit, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search, $productId, $unitId, $isBase, $isPrimaryUnit) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('items.code', 'like', '%'.$search.'%')
+                            ->orWhere('items.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if ($productId) {
+                    $query->where('product_units.product_id', $productId);
+                }
+
+                if ($unitId) {
+                    $query->where('product_units.unit_id', $unitId);
+                }
+
+                if (! is_null($isBase)) {
+                    $query->where('product_units.is_base', $isBase);
+                }
+
+                if (! is_null($isPrimaryUnit)) {
+                    $query->where('product_units.is_primary_unit', $isPrimaryUnit);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('product_units.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(product_units.id, '.$includeId.') desc');
+        }
+        $query->orderBy('product_units.conversion_value', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    empty($search) ? '[empty]' : $search,
+                    $companyId,
+                    $productId ?? '[null]',
+                    $unitId ?? '[null]',
+                    is_null($isBase) ? '[null]' : ($isBase ? 'true' : 'false'),
+                    is_null($isPrimaryUnit) ? '[null]' : ($isPrimaryUnit ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(ProductUnit $productUnit): ProductUnit
+    {
+        return $productUnit->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function createPhysical(ProductUnitCreatePhysicalDTO $data): ProductUnit
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $isBase = $data->conversionValue == 1;
+            if ($isBase) $this->resetBaseUnit($data->companyId, $data->productId);
+            if ($data->isPrimaryUnit) $this->resetPrimaryUnit($data->companyId, $data->productId);
+
+            $productUnit = new ProductUnit();
+            $productUnit->company_id = $data->companyId;
+            $productUnit->product_id = $data->productId;
+            $productUnit->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $productUnit->is_manufacturer_sku = $data->isManufacturerSKU;
+            $productUnit->unit_id = $data->unitId;
+            $productUnit->price = $data->price;
+            $productUnit->is_base = $isBase;
+            $productUnit->conversion_value = $data->conversionValue;
+            $productUnit->is_primary_unit = $data->isPrimaryUnit;
+            $productUnit->point = $data->point;
+            $productUnit->remarks = $data->remarks;
+            $productUnit->save();
+
+            $this->flushCache();
+
+            return $productUnit;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function createService(ProductUnitCreateServiceDTO $data): ProductUnit
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $product = Product::findOrFail($data->productId);
+
+            $productUnit = new ProductUnit();
+            $productUnit->company_id = $data->companyId;
+            $productUnit->product_id = $data->productId;
+            $productUnit->code = $product->code;
+            $productUnit->is_manufacturer_sku = false;
+            $productUnit->unit_id = $data->unitId;
+            $productUnit->price = $data->price;
+            $productUnit->is_base = true;
+            $productUnit->conversion_value = 1;
+            $productUnit->is_primary_unit = true;
+            $productUnit->point = $data->point;
+            $productUnit->remarks = $data->remarks;
+            $productUnit->save();
+
+            $this->flushCache();
+
+            return $productUnit;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function updatePhysical(ProductUnit $productUnit, ProductUnitUpdatePhysicalDTO $data): ProductUnit
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $isBase = $data->conversionValue == 1;
+            if ($isBase) $this->resetBaseUnit($productUnit->company_id, $productUnit->product_id);
+            if ($data->isPrimaryUnit)  $this->resetPrimaryUnit($productUnit->company_id, $productUnit->product_id);
+            $productUnit->refresh();
+
+            $productUnit->code = $this->generateUniqueCode($productUnit->company_id, $data->code, $productUnit->id);
+            $productUnit->is_manufacturer_sku = $data->isManufacturerSku;
+            $productUnit->unit_id = $data->unitId;
+            $productUnit->price = $data->price;
+            $productUnit->is_base = $isBase;
+            $productUnit->conversion_value = $data->conversionValue;
+            $productUnit->is_primary_unit = $data->isPrimaryUnit;
+            $productUnit->point = $data->point;
+            $productUnit->remarks = $data->remarks;
+            $productUnit->save();
+
+            $this->flushCache();
+
+            return $productUnit;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function updateService(ProductUnit $productUnit, ProductUnitUpdateServiceDTO $data): ProductUnit
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $productUnit->code = $productUnit->product->code;
+            $productUnit->is_manufacturer_sku = false;
+            $productUnit->unit_id = $data->unitId;
+            $productUnit->price = $data->price;
+            $productUnit->is_base = true;
+            $productUnit->conversion_value = 1;
+            $productUnit->is_primary_unit = true;
+            $productUnit->point = $data->point;
+            $productUnit->remarks = $data->remarks;
+            $productUnit->save();
+
+            $this->flushCache();
+
+            return $productUnit->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(ProductUnit $productUnit): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $productUnit->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function resetBaseUnit(int $companyId, int $productId): void
+    {
+        ProductUnit::where('company_id', $companyId)
+            ->where('product_id', $productId)
+            ->update(['is_base' => false]);
+    }
+
+    public function resetPrimaryUnit(int $companyId, int $productId): void
+    {
+        ProductUnit::where('company_id', $companyId)
+            ->where('product_id', $productId)
+            ->update(['is_primary_unit' => false]);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != Config::get('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->productUnits()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'PU'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->productUnits()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->productUnits()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('product_units.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueUnit(int $companyId, int $productId, int $unitId, ?int $exceptId): bool
+    {
+        $query = ProductUnit::where('company_id', $companyId)
+            ->where('product_id', $productId)
+            ->where('unit_id', $unitId);
+
+        if ($exceptId) {
+            $query->where('id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueConversionValue(int $companyId, int $productId, float $conversionValue, ?int $exceptId): bool
+    {
+        $query = ProductUnit::where('company_id', $companyId)
+            ->where('product_id', $productId)
+            ->where('conversion_value', $conversionValue);
+
+        if ($exceptId) {
+            $query->where('id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/Purchase/PurchaseActions.php b/api/app/Actions/Purchase/PurchaseActions.php
new file mode 100644
index 000000000..ea4dde7f9
--- /dev/null
+++ b/api/app/Actions/Purchase/PurchaseActions.php
@@ -0,0 +1,1247 @@
+<?php
+
+namespace App\Actions\Purchase;
+
+use App\Actions\PurchaseAdditionalCost\PurchaseAdditionalCostActions;
+use App\Actions\PurchaseGlobalDiscount\PurchaseGlobalDiscountActions;
+use App\Actions\PurchaseItem\PurchaseItemActions;
+use App\Actions\PurchaseOrder\PurchaseOrderActions;
+use App\Actions\PurchaseReceipt\PurchaseReceiptActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseAdditionalCostCreateDTO;
+use App\DTOs\PurchaseAdditionalCostUpdateDTO;
+use App\DTOs\PurchaseDirectCreateDTO;
+use App\DTOs\PurchaseDirectUpdateDTO;
+use App\DTOs\PurchaseGlobalDiscountCreateDTO;
+use App\DTOs\PurchaseGlobalDiscountUpdateDTO;
+use App\DTOs\PurchaseItemCreateDTO;
+use App\DTOs\PurchaseItemUpdateDTO;
+use App\DTOs\PurchaseManualCreateDTO;
+use App\DTOs\PurchaseManualUpdateDTO;
+use App\DTOs\PurchaseReceiptCreateDTO;
+use App\DTOs\PurchaseReceiptUpdateDTO;
+use App\Enums\DiscountTypeEnum;
+use App\Enums\PurchaseProgressStatusEnum;
+use App\Enums\PurchaseReceiptModeEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\Company;
+use App\Models\Purchase;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'supplier',
+        'purchaseOrder',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'supplier',
+        'purchaseOrder.supplier',
+        'items.productUnit.unit',
+        'items.productUnit.product.category',
+        'items.productUnit.product.brand',
+        'items.productUnit.product.baseProductUnit.unit',
+        'items.productUnit.product.images',
+        'items.productUnit.product.mainImage',
+        'items.vatProfile',
+        'items.productUnitPriceDiscounts',
+        'items.subtotalDiscounts',
+        'globalDiscounts',
+        'additionalCosts.category',
+        'additionalCosts.paidImmediatelyCashAccount',
+        'additionalCosts.payments.cashAccount',
+        'payments.cashAccount',
+        'directReceipt.supplier',
+        'directReceipt.warehouse',
+        'directReceipt.items.productUnit.unit',
+        'directReceipt.items.productUnit.product.category',
+        'directReceipt.items.productUnit.product.brand',
+        'directReceipt.items.productUnit.product.baseProductUnit.unit',
+        'directReceipt.items.productUnit.product.images',
+        'directReceipt.items.productUnit.product.mainImage',
+        'directReceipt.items.serials',
+        'manualReceipts.supplier',
+        'manualReceipts.warehouse',
+        'manualReceipts.items.productUnit.unit',
+        'manualReceipts.items.productUnit.product.category',
+        'manualReceipts.items.productUnit.product.brand',
+        'manualReceipts.items.productUnit.product.baseProductUnit.unit',
+        'manualReceipts.items.productUnit.product.images',
+        'manualReceipts.items.productUnit.product.mainImage',
+        'manualReceipts.items.serials',
+        'purchaseOrderDownPaymentAllocations.purchaseOrderDownPayment',
+        'purchaseReturnAllocations.purchaseReturn',
+        'purchaseReturns.supplier',
+    ];
+
+    public function __construct(
+        private readonly PurchaseItemActions $purchaseItemActions,
+        private readonly PurchaseGlobalDiscountActions $purchaseGlobalDiscountActions,
+        private readonly PurchaseAdditionalCostActions $purchaseAdditionalCostActions,
+        private readonly PurchaseReceiptActions $purchaseReceiptActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $startDate,
+        ?string $endDate,
+        ?int $supplierId,
+        ?int $purchaseOrderId,
+        ?string $receiptMode,
+        ?bool $isPosted,
+        ?bool $isPaidOff,
+        ?string $progressStatus,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Purchase::select('purchases.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query->join('companies', 'companies.id', '=', 'purchases.company_id')
+            ->whereCompanyId('purchases', $companyId)
+            ->whereBranchId('purchases', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $startDate,
+            $endDate,
+            $supplierId,
+            $purchaseOrderId,
+            $receiptMode,
+            $isPosted,
+            $isPaidOff,
+            $progressStatus,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchases.code', 'like', '%'.$search.'%')
+                        ->orWhere('purchases.tax_invoice_number', 'like', '%'.$search.'%')
+                        ->orWhere('purchases.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('purchases.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('purchases.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+
+            if ($supplierId) {
+                $query->where('purchases.supplier_id', $supplierId);
+            }
+
+            if ($purchaseOrderId) {
+                $query->where('purchases.purchase_order_id', $purchaseOrderId);
+            }
+
+            if ($receiptMode) {
+                $query->where('purchases.receipt_mode', $receiptMode);
+            }
+
+            if (! is_null($isPosted)) {
+                $query->where('purchases.is_posted', $isPosted);
+            }
+
+            if (! is_null($isPaidOff)) {
+                $query->where('purchases.is_paid_off', $isPaidOff);
+            }
+
+            if ($progressStatus) {
+                $query->where('purchases.progress_status', $progressStatus);
+            }
+        });
+
+        $query->orderBy('purchases.date', 'desc')
+            ->orderBy('purchases.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $supplierId ?? '[null]',
+                    $purchaseOrderId ?? '[null]',
+                    $receiptMode ?? '[null]',
+                    is_null($isPosted) ? '[null]' : ($isPosted ? 'true' : 'false'),
+                    is_null($isPaidOff) ? '[null]' : ($isPaidOff ? 'true' : 'false'),
+                    $progressStatus ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Purchase $purchase): Purchase
+    {
+        return $purchase->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != Config::get('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->purchases()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'PU'.str_pad($count, 5, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = Purchase::where('company_id', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    private function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function createDirect(PurchaseDirectCreateDTO $data): Purchase
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchase = new Purchase();
+            $purchase->company_id = $data->companyId;
+            $purchase->branch_id = $data->branchId;
+            $purchase->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchase->date = $this->generateDate($data->date);
+            $purchase->due_days = $data->dueDays;
+            $purchase->supplier_id = $data->supplierId;
+            $purchase->purchase_order_id = $data->purchaseOrderId;
+            $purchase->receipt_mode = PurchaseReceiptModeEnum::DIRECT;
+            $purchase->tax_invoice_number = $data->taxInvoiceNumber;
+            $purchase->tax_invoice_vat_base = $data->taxInvoiceVatBase;
+            $purchase->tax_invoice_vat = $data->taxInvoiceVat;
+            $purchase->remarks = $data->remarks;
+            $purchase->is_posted = $data->isPosted;
+            $purchase->rounding = $data->rounding;
+            $purchase->save();
+
+            for ($i = 0; $i < count($data->items); $i++) {
+                $dto = new PurchaseItemCreateDTO(
+                    companyId: $purchase->company_id,
+                    branchId: $purchase->branch_id,
+                    purchaseId: $purchase->id,
+                    qty: $data->items[$i]['qty'],
+                    productUnitId: $data->items[$i]['product_unit_id'],
+                    productUnitConversionValue: $data->items[$i]['product_unit_conversion_value'],
+                    productUnitPrice: $data->items[$i]['product_unit_price'],
+                    productUnitIsPriceIncludeVat: $data->items[$i]['product_unit_is_price_include_vat'],
+                    productUnitPriceDiscounts: $data->items[$i]['product_unit_price_discounts'],
+                    subtotalDiscounts: $data->items[$i]['subtotal_discounts'],
+                    vatProfileId: $data->items[$i]['vat_profile_id'],
+                    vatRate: $data->items[$i]['vat_rate'],
+                    vatBaseNumerator: $data->items[$i]['vat_base_numerator'],
+                    vatBaseDenominator: $data->items[$i]['vat_base_denominator'],
+                    remarks: $data->items[$i]['remarks'],
+                );
+
+                $result = $this->purchaseItemActions->create($dto, false);
+                $data->items[$i]['id'] = $result->id;
+            }
+
+            $items = [];
+            foreach ($data->items as $item) {
+                $items[] = [
+                    'purchase_item_id' => $item['id'],
+                    'qty' => $item['qty'],
+                    'product_unit_id' => $item['product_unit_id'],
+                    'product_unit_conversion_value' => $item['product_unit_conversion_value'],
+                    'remarks' => $item['remarks'],
+                    'serials' => $item['serials'],
+                ];
+            }
+
+            $dto = new PurchaseReceiptCreateDTO(
+                companyId: $purchase->company_id,
+                branchId: $purchase->branch_id,
+                supplierId: $purchase->supplier_id,
+                purchaseId: $purchase->id,
+                isFromDirectPurchase: true,
+                code: $data->directReceiptCode,
+                date: $purchase->date,
+                warehouseId: $data->directReceiptWarehouseId,
+                remarks: $purchase->remarks,
+                isPosted: $purchase->is_posted,
+                items: $items,
+            );
+
+            $this->purchaseReceiptActions->createDirect($dto, false);
+
+            foreach ($data->globalDiscounts as $globalDiscount) {
+                $dto = new PurchaseGlobalDiscountCreateDTO(
+                    companyId: $purchase->company_id,
+                    branchId: $purchase->branch_id,
+                    purchaseId: $purchase->id,
+                    sequence: $globalDiscount['sequence'],
+                    discountType: $globalDiscount['discount_type'],
+                    discountValue: $globalDiscount['discount_value'],
+                );
+
+                $this->purchaseGlobalDiscountActions->create($dto);
+            }
+
+            foreach ($data->additionalCosts as $additionalCost) {
+                $dto = new PurchaseAdditionalCostCreateDTO(
+                    companyId: $purchase->company_id,
+                    branchId: $purchase->branch_id,
+                    purchaseId: $purchase->id,
+                    purchaseAdditionalCostCategoryId: $additionalCost['purchase_additional_cost_category_id'],
+                    code: $additionalCost['code'],
+                    date: $additionalCost['date'],
+                    dueDays: $additionalCost['due_days'],
+                    paidImmediatelyCashAccountId: $additionalCost['paid_immediately_cash_account_id'],
+                    amountPaidImmediately: $additionalCost['amount_paid_immediately'],
+                    amountPayable: $additionalCost['amount_payable'],
+                    remarks: $additionalCost['remarks'],
+                );
+                $this->purchaseAdditionalCostActions->create($dto);
+            }
+
+            self::updateSummary($purchase);
+
+            if ($purchase->purchaseOrder) {
+                PurchaseOrderActions::updateSummary($purchase->purchaseOrder);
+            }
+
+            $this->flushCache();
+
+            return $purchase;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function createManual(PurchaseManualCreateDTO $data): Purchase
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchase = new Purchase();
+            $purchase->company_id = $data->companyId;
+            $purchase->branch_id = $data->branchId;
+            $purchase->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchase->date = $this->generateDate($data->date);
+            $purchase->due_days = $data->dueDays;
+            $purchase->supplier_id = $data->supplierId;
+            $purchase->purchase_order_id = $data->purchaseOrderId;
+            $purchase->receipt_mode = PurchaseReceiptModeEnum::MANUAL;
+            $purchase->tax_invoice_number = $data->taxInvoiceNumber;
+            $purchase->tax_invoice_vat_base = $data->taxInvoiceVatBase;
+            $purchase->tax_invoice_vat = $data->taxInvoiceVat;
+            $purchase->remarks = $data->remarks;
+            $purchase->is_posted = $data->isPosted;
+            $purchase->rounding = $data->rounding;
+            $purchase->save();
+
+            foreach ($data->items as $item) {
+                $dto = new PurchaseItemCreateDTO(
+                    companyId: $purchase->company_id,
+                    branchId: $purchase->branch_id,
+                    purchaseId: $purchase->id,
+                    qty: $item['qty'],
+                    productUnitId: $item['product_unit_id'],
+                    productUnitConversionValue: $item['product_unit_conversion_value'],
+                    productUnitPrice: $item['product_unit_price'],
+                    productUnitIsPriceIncludeVat: $item['product_unit_is_price_include_vat'],
+                    productUnitPriceDiscounts: $item['product_unit_price_discounts'],
+                    subtotalDiscounts: $item['subtotal_discounts'],
+                    vatProfileId: $item['vat_profile_id'],
+                    vatRate: $item['vat_rate'],
+                    vatBaseNumerator: $item['vat_base_numerator'],
+                    vatBaseDenominator: $item['vat_base_denominator'],
+                    remarks: $item['remarks'],
+                );
+
+                $this->purchaseItemActions->create($dto, false);
+            }
+
+            foreach ($data->globalDiscounts as $globalDiscount) {
+                $dto = new PurchaseGlobalDiscountCreateDTO(
+                    companyId: $purchase->company_id,
+                    branchId: $purchase->branch_id,
+                    purchaseId: $purchase->id,
+                    sequence: $globalDiscount['sequence'],
+                    discountType: $globalDiscount['discount_type'],
+                    discountValue: $globalDiscount['discount_value'],
+                );
+
+                $this->purchaseGlobalDiscountActions->create($dto);
+            }
+
+            foreach ($data->additionalCosts as $additionalCost) {
+                $dto = new PurchaseAdditionalCostCreateDTO(
+                    companyId: $purchase->company_id,
+                    branchId: $purchase->branch_id,
+                    purchaseId: $purchase->id,
+                    purchaseAdditionalCostCategoryId: $additionalCost['purchase_additional_cost_category_id'],
+                    code: $additionalCost['code'],
+                    date: $additionalCost['date'],
+                    dueDays: $additionalCost['due_days'],
+                    paidImmediatelyCashAccountId: $additionalCost['paid_immediately_cash_account_id'],
+                    amountPaidImmediately: $additionalCost['amount_paid_immediately'],
+                    amountPayable: $additionalCost['amount_payable'],
+                    remarks: $additionalCost['remarks'],
+                );
+                $this->purchaseAdditionalCostActions->create($dto);
+            }
+
+            self::updateSummary($purchase);
+
+            if ($purchase->purchaseOrder) {
+                PurchaseOrderActions::updateSummary($purchase->purchaseOrder);
+            }
+
+            $this->flushCache();
+
+            return $purchase;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function updateDirect(Purchase $purchase, PurchaseDirectUpdateDTO $data): Purchase
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $previousPurchaseOrder = $purchase->purchaseOrder;
+            $purchaseReceipt = $purchase->directReceipt()->firstOrFail();
+
+            $purchase->code = $this->generateUniqueCode($purchase->company_id, $data->code, $purchase->id);
+            $purchase->date = $this->generateDate($data->date);
+            $purchase->due_days = $data->dueDays;
+            $purchase->supplier_id = $data->supplierId;
+            $purchase->purchase_order_id = $data->purchaseOrderId;
+            $purchase->receipt_mode = PurchaseReceiptModeEnum::DIRECT;
+            $purchase->tax_invoice_number = $data->taxInvoiceNumber;
+            $purchase->tax_invoice_vat_base = $data->taxInvoiceVatBase;
+            $purchase->tax_invoice_vat = $data->taxInvoiceVat;
+            $purchase->remarks = $data->remarks;
+            $purchase->is_posted = $data->isPosted;
+            $purchase->rounding = $data->rounding;
+            $purchase->save();
+
+            foreach ($data->deleteItemIds as $deleteId) {
+                $purchaseItem = $purchase->items()->findOrFail($deleteId);
+                $this->purchaseItemActions->delete($purchaseItem, false);
+            }
+
+            for ($i = 0; $i < count($data->items); $i++) {
+                if (! empty($data->items[$i]['id'])) {
+                    $purchaseItem = $purchase->items()->findOrFail($data->items[$i]['id']);
+                    $dto = new PurchaseItemUpdateDTO(
+                        qty: $data->items[$i]['qty'],
+                        productUnitId: $data->items[$i]['product_unit_id'],
+                        productUnitConversionValue: $data->items[$i]['product_unit_conversion_value'],
+                        productUnitPrice: $data->items[$i]['product_unit_price'],
+                        productUnitIsPriceIncludeVat: $data->items[$i]['product_unit_is_price_include_vat'],
+                        deleteProductUnitPriceDiscountIds: $data->items[$i]['delete_product_unit_price_discount_ids'],
+                        productUnitPriceDiscounts: $data->items[$i]['product_unit_price_discounts'],
+                        deleteSubtotalDiscountIds: $data->items[$i]['delete_subtotal_discount_ids'],
+                        subtotalDiscounts: $data->items[$i]['subtotal_discounts'],
+                        vatProfileId: $data->items[$i]['vat_profile_id'],
+                        vatRate: $data->items[$i]['vat_rate'],
+                        vatBaseNumerator: $data->items[$i]['vat_base_numerator'],
+                        vatBaseDenominator: $data->items[$i]['vat_base_denominator'],
+                        remarks: $data->items[$i]['remarks'],
+                    );
+                    $this->purchaseItemActions->update($purchaseItem, $dto, false);
+
+                    $data->items[$i]['id'] = $purchaseItem->id;
+                    $data->items[$i]['purchase_receipt_item_id'] = $purchaseItem->directReceiptItem->id;
+                } else {
+                    $dto = new PurchaseItemCreateDTO(
+                        companyId: $purchase->company_id,
+                        branchId: $purchase->branch_id,
+                        purchaseId: $purchase->id,
+                        qty: $data->items[$i]['qty'],
+                        productUnitId: $data->items[$i]['product_unit_id'],
+                        productUnitConversionValue: $data->items[$i]['product_unit_conversion_value'],
+                        productUnitPrice: $data->items[$i]['product_unit_price'],
+                        productUnitIsPriceIncludeVat: $data->items[$i]['product_unit_is_price_include_vat'],
+                        productUnitPriceDiscounts: $data->items[$i]['product_unit_price_discounts'],
+                        subtotalDiscounts: $data->items[$i]['subtotal_discounts'],
+                        vatProfileId: $data->items[$i]['vat_profile_id'],
+                        vatRate: $data->items[$i]['vat_rate'],
+                        vatBaseNumerator: $data->items[$i]['vat_base_numerator'],
+                        vatBaseDenominator: $data->items[$i]['vat_base_denominator'],
+                        remarks: $data->items[$i]['remarks'],
+                    );
+                    $purchaseItem = $this->purchaseItemActions->create($dto, false);
+
+                    $data->items[$i]['id'] = $purchaseItem->id;
+                    $data->items[$i]['purchase_receipt_item_id'] = null;
+                }
+            }
+
+            $items = [];
+            foreach ($data->items as $item) {
+                $items[] = [
+                    'id' => $item['purchase_receipt_item_id'],
+                    'purchase_item_id' => $item['id'],
+                    'qty' => $item['qty'],
+                    'product_unit_id' => $item['product_unit_id'],
+                    'product_unit_conversion_value' => $item['product_unit_conversion_value'],
+                    'remarks' => $item['remarks'],
+                    'delete_serial_ids' => $item['delete_serial_ids'],
+                    'serials' => $item['serials'],
+                ];
+            }
+
+            $dto = new PurchaseReceiptUpdateDTO(
+                supplierId: $purchase->supplier_id,
+                purchaseId: $purchase->id,
+                code: $purchaseReceipt->code,
+                date: $purchase->date,
+                isFromDirectPurchase: true,
+                warehouseId: $data->directReceiptWarehouseId,
+                remarks: $purchase->remarks,
+                isPosted: $purchase->is_posted,
+
+                deleteItemIds: [],
+                items: $items,
+            );
+
+            $this->purchaseReceiptActions->updateDirect($purchaseReceipt, $dto, false);
+
+            foreach ($data->deleteGlobalDiscountIds as $deleteId) {
+                $purchaseGlobalDiscount = $purchase->globalDiscounts()->findOrFail($deleteId);
+                $this->purchaseGlobalDiscountActions->delete($purchaseGlobalDiscount);
+            }
+
+            foreach ($data->globalDiscounts as $globalDiscount) {
+                if (! empty($globalDiscount['id'])) {
+                    $purchaseGlobalDiscount = $purchase->globalDiscounts()->findOrFail($globalDiscount['id']);
+                    $dto = new PurchaseGlobalDiscountUpdateDTO(
+                        sequence: $globalDiscount['sequence'],
+                        discountType: $globalDiscount['discount_type'],
+                        discountValue: $globalDiscount['discount_value'],
+                    );
+
+                    $this->purchaseGlobalDiscountActions->update($purchaseGlobalDiscount, $dto);
+                } else {
+                    $dto = new PurchaseGlobalDiscountCreateDTO(
+                        companyId: $purchase->company_id,
+                        branchId: $purchase->branch_id,
+                        purchaseId: $purchase->id,
+                        sequence: $globalDiscount['sequence'],
+                        discountType: $globalDiscount['discount_type'],
+                        discountValue: $globalDiscount['discount_value'],
+                    );
+
+                    $this->purchaseGlobalDiscountActions->create($dto);
+                }
+            }
+
+            foreach ($data->deleteAdditionalCostIds as $deleteId) {
+                $purchaseAdditionalCost = $purchase->additionalCosts()->findOrFail($deleteId);
+                $this->purchaseAdditionalCostActions->delete($purchaseAdditionalCost);
+            }
+
+            foreach ($data->additionalCosts as $additionalCost) {
+                if (! empty($additionalCost['id'])) {
+                    $purchaseAdditionalCost = $purchase->additionalCosts()->findOrFail($additionalCost['id']);
+
+                    $dto = new PurchaseAdditionalCostUpdateDTO(
+                        purchaseId: $purchase->id,
+                        purchaseAdditionalCostCategoryId: $additionalCost['purchase_additional_cost_category_id'],
+                        code: $additionalCost['code'],
+                        date: $additionalCost['date'],
+                        dueDays: $additionalCost['due_days'],
+                        paidImmediatelyCashAccountId: $additionalCost['paid_immediately_cash_account_id'],
+                        amountPaidImmediately: $additionalCost['amount_paid_immediately'],
+                        amountPayable: $additionalCost['amount_payable'],
+                        remarks: $additionalCost['remarks'],
+                    );
+                    $this->purchaseAdditionalCostActions->update($purchaseAdditionalCost, $dto);
+                } else {
+                    $dto = new PurchaseAdditionalCostCreateDTO(
+                        companyId: $purchase->company_id,
+                        branchId: $purchase->branch_id,
+                        purchaseId: $purchase->id,
+                        purchaseAdditionalCostCategoryId: $additionalCost['purchase_additional_cost_category_id'],
+                        code: $additionalCost['code'],
+                        date: $additionalCost['date'],
+                        dueDays: $additionalCost['due_days'],
+                        paidImmediatelyCashAccountId: $additionalCost['paid_immediately_cash_account_id'],
+                        amountPaidImmediately: $additionalCost['amount_paid_immediately'],
+                        amountPayable: $additionalCost['amount_payable'],
+                        remarks: $additionalCost['remarks'],
+                    );
+                    $this->purchaseAdditionalCostActions->create($dto);
+                }
+            }
+
+            self::updateSummary($purchase);
+
+            if ($previousPurchaseOrder) {
+                PurchaseOrderActions::updateSummary($previousPurchaseOrder->refresh());
+            }
+
+            if ($purchase->purchaseOrder) {
+                if (! $previousPurchaseOrder || $purchase->purchaseOrder->id !== $previousPurchaseOrder->id) {
+                    PurchaseOrderActions::updateSummary($purchase->purchaseOrder);
+                } else {
+                    PurchaseOrderActions::updateSummary($purchase->purchaseOrder->refresh());
+                }
+            }
+
+            $this->flushCache();
+
+            return $purchase;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function updateManual(Purchase $purchase, PurchaseManualUpdateDTO $data): Purchase
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $previousPurchaseOrder = $purchase->purchaseOrder;
+
+            $purchase->code = $this->generateUniqueCode($purchase->company_id, $data->code, $purchase->id);
+            $purchase->date = $this->generateDate($data->date);
+            $purchase->due_days = $data->dueDays;
+            $purchase->supplier_id = $data->supplierId;
+            $purchase->purchase_order_id = $data->purchaseOrderId;
+            $purchase->receipt_mode = PurchaseReceiptModeEnum::MANUAL;
+            $purchase->tax_invoice_number = $data->taxInvoiceNumber;
+            $purchase->tax_invoice_vat_base = $data->taxInvoiceVatBase;
+            $purchase->tax_invoice_vat = $data->taxInvoiceVat;
+            $purchase->remarks = $data->remarks;
+            $purchase->is_posted = $data->isPosted;
+            $purchase->rounding = $data->rounding;
+            $purchase->save();
+
+            foreach ($data->deleteItemIds as $deleteId) {
+                $purchaseItem = $purchase->items()->findOrFail($deleteId);
+                $this->purchaseItemActions->delete($purchaseItem, false);
+            }
+
+            foreach ($data->items as $item) {
+                if (! empty($item['id'])) {
+                    $purchaseItem = $purchase->items()->findOrFail($item['id']);
+                    $dto = new PurchaseItemUpdateDTO(
+                        qty: $item['qty'],
+                        productUnitId: $item['product_unit_id'],
+                        productUnitConversionValue: $item['product_unit_conversion_value'],
+                        productUnitPrice: $item['product_unit_price'],
+                        productUnitIsPriceIncludeVat: $item['product_unit_is_price_include_vat'],
+                        deleteProductUnitPriceDiscountIds: $item['delete_product_unit_price_discount_ids'],
+                        productUnitPriceDiscounts: $item['product_unit_price_discounts'],
+                        deleteSubtotalDiscountIds: $item['delete_subtotal_discount_ids'],
+                        subtotalDiscounts: $item['subtotal_discounts'],
+                        vatProfileId: $item['vat_profile_id'],
+                        vatRate: $item['vat_rate'],
+                        vatBaseNumerator: $item['vat_base_numerator'],
+                        vatBaseDenominator: $item['vat_base_denominator'],
+                        remarks: $item['remarks'],
+                    );
+
+                    $this->purchaseItemActions->update($purchaseItem, $dto, false);
+                } else {
+                    $dto = new PurchaseItemCreateDTO(
+                        companyId: $purchase->company_id,
+                        branchId: $purchase->branch_id,
+                        purchaseId: $purchase->id,
+                        qty: $item['qty'],
+                        productUnitId: $item['product_unit_id'],
+                        productUnitConversionValue: $item['product_unit_conversion_value'],
+                        productUnitPrice: $item['product_unit_price'],
+                        productUnitIsPriceIncludeVat: $item['product_unit_is_price_include_vat'],
+                        productUnitPriceDiscounts: $item['product_unit_price_discounts'],
+                        subtotalDiscounts: $item['subtotal_discounts'],
+                        vatProfileId: $item['vat_profile_id'],
+                        vatRate: $item['vat_rate'],
+                        vatBaseNumerator: $item['vat_base_numerator'],
+                        vatBaseDenominator: $item['vat_base_denominator'],
+                        remarks: $item['remarks'],
+                    );
+
+                    $this->purchaseItemActions->create($dto, false);
+                }
+            }
+
+            foreach ($data->deleteGlobalDiscountIds as $deleteId) {
+                $purchaseGlobalDiscount = $purchase->globalDiscounts()->findOrFail($deleteId);
+                $this->purchaseGlobalDiscountActions->delete($purchaseGlobalDiscount);
+            }
+
+            foreach ($data->globalDiscounts as $globalDiscount) {
+                if (! empty($globalDiscount['id'])) {
+                    $purchaseGlobalDiscount = $purchase->globalDiscounts()->findOrFail($globalDiscount['id']);
+                    $dto = new PurchaseGlobalDiscountUpdateDTO(
+                        sequence: $globalDiscount['sequence'],
+                        discountType: $globalDiscount['discount_type'],
+                        discountValue: $globalDiscount['discount_value'],
+                    );
+
+                    $this->purchaseGlobalDiscountActions->update($purchaseGlobalDiscount, $dto);
+                } else {
+                    $dto = new PurchaseGlobalDiscountCreateDTO(
+                        companyId: $purchase->company_id,
+                        branchId: $purchase->branch_id,
+                        purchaseId: $purchase->id,
+                        sequence: $globalDiscount['sequence'],
+                        discountType: $globalDiscount['discount_type'],
+                        discountValue: $globalDiscount['discount_value'],
+                    );
+
+                    $this->purchaseGlobalDiscountActions->create($dto);
+                }
+            }
+
+            foreach ($data->deleteAdditionalCostIds as $deleteId) {
+                $purchaseAdditionalCost = $purchase->additionalCosts()->findOrFail($deleteId);
+                $this->purchaseAdditionalCostActions->delete($purchaseAdditionalCost);
+            }
+
+            foreach ($data->additionalCosts as $additionalCost) {
+                if (! empty($additionalCost['id'])) {
+                    $purchaseAdditionalCost = $purchase->additionalCosts()->findOrFail($additionalCost['id']);
+
+                    $dto = new PurchaseAdditionalCostUpdateDTO(
+                        purchaseId: $purchase->id,
+                        purchaseAdditionalCostCategoryId: $additionalCost['purchase_additional_cost_category_id'],
+                        code: $additionalCost['code'],
+                        date: $additionalCost['date'],
+                        dueDays: $additionalCost['due_days'],
+                        paidImmediatelyCashAccountId: $additionalCost['paid_immediately_cash_account_id'],
+                        amountPaidImmediately: $additionalCost['amount_paid_immediately'],
+                        amountPayable: $additionalCost['amount_payable'],
+                        remarks: $additionalCost['remarks'],
+                    );
+                    $this->purchaseAdditionalCostActions->update($purchaseAdditionalCost, $dto);
+                } else {
+                    $dto = new PurchaseAdditionalCostCreateDTO(
+                        companyId: $purchase->company_id,
+                        branchId: $purchase->branch_id,
+                        purchaseId: $purchase->id,
+                        purchaseAdditionalCostCategoryId: $additionalCost['purchase_additional_cost_category_id'],
+                        code: $additionalCost['code'],
+                        date: $additionalCost['date'],
+                        dueDays: $additionalCost['due_days'],
+                        paidImmediatelyCashAccountId: $additionalCost['paid_immediately_cash_account_id'],
+                        amountPaidImmediately: $additionalCost['amount_paid_immediately'],
+                        amountPayable: $additionalCost['amount_payable'],
+                        remarks: $additionalCost['remarks'],
+                    );
+                    $this->purchaseAdditionalCostActions->create($dto);
+                }
+            }
+
+            self::updateSummary($purchase);
+
+            if ($previousPurchaseOrder) {
+                PurchaseOrderActions::updateSummary($previousPurchaseOrder->refresh());
+            }
+
+            if ($purchase->purchaseOrder) {
+                if (! $previousPurchaseOrder || $purchase->purchaseOrder->id !== $previousPurchaseOrder->id) {
+                    PurchaseOrderActions::updateSummary($purchase->purchaseOrder);
+                } else {
+                    PurchaseOrderActions::updateSummary($purchase->purchaseOrder->refresh());
+                }
+            }
+
+            $this->flushCache();
+
+            return $purchase;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(Purchase $purchase): void
+    {
+        $purchase->refresh();
+
+        $purchase->item_total_before_global_discount = (float) $purchase->items()->sum('subtotal_after_discount');
+        $purchase->global_discount = (function () use ($purchase) {
+            $beforeDiscount = (float) $purchase->item_total_before_global_discount;
+            $afterDiscount = $beforeDiscount;
+
+            foreach ($purchase->globalDiscounts()->orderBy('sequence')->orderBy('id')->get() as $globalDiscount) {
+                $discountType = $globalDiscount->discount_type instanceof DiscountTypeEnum
+                    ? $globalDiscount->discount_type
+                    : DiscountTypeEnum::resolveToEnum($globalDiscount->discount_type);
+                $discountValue = (float) $globalDiscount->discount_value;
+
+                if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                    $afterDiscount -= $afterDiscount * $discountValue / 100;
+                } else {
+                    $afterDiscount -= $discountValue;
+                }
+
+                if ($afterDiscount < 0) {
+                    $afterDiscount = 0;
+                }
+            }
+
+            return $beforeDiscount - $afterDiscount;
+        })();
+
+        foreach ($purchase->items as $purchaseItem) {
+            $purchaseItem->global_discount = (function () use ($purchaseItem, $purchase) {
+                $itemTotalBeforeGlobalDiscount = (float) $purchase->item_total_before_global_discount;
+                $purchaseGlobalDiscount = (float) $purchase->global_discount;
+
+                if ($itemTotalBeforeGlobalDiscount <= 0 || $purchaseGlobalDiscount <= 0) return 0;
+
+                $value = ((float) $purchaseItem->subtotal_after_discount / $itemTotalBeforeGlobalDiscount) * $purchaseGlobalDiscount;
+
+                return $value < 0 ? 0 : $value;
+            })();
+            $purchaseItem->subtotal_after_global_discount = $purchaseItem->subtotal_after_discount - $purchaseItem->global_discount;
+            $purchaseItem->save();
+        }
+
+        $globalDiscountDifference = round((float) $purchase->global_discount - (float) $purchase->items()->sum('global_discount'), 8);
+        if (abs($globalDiscountDifference) > 0.00000001) {
+            $lastGlobalDiscountPurchaseItem = $purchase->items
+                ->filter(fn ($purchaseItem) => (float) $purchaseItem->subtotal_after_discount > 0)
+                ->last();
+
+            if ($lastGlobalDiscountPurchaseItem) {
+                $lastGlobalDiscountPurchaseItem->global_discount = max(
+                    0,
+                    (float) $lastGlobalDiscountPurchaseItem->global_discount + $globalDiscountDifference
+                );
+                $lastGlobalDiscountPurchaseItem->subtotal_after_global_discount = max(
+                    0,
+                    (float) $lastGlobalDiscountPurchaseItem->subtotal_after_discount - (float) $lastGlobalDiscountPurchaseItem->global_discount
+                );
+                $lastGlobalDiscountPurchaseItem->save();
+            }
+        }
+
+        $purchase->item_total_after_global_discount = (float) $purchase->items()->sum('subtotal_after_global_discount');
+
+        foreach ($purchase->items as $purchaseItem) {
+            $purchaseItem->vat_base = (function () use ($purchaseItem) {
+                $subtotalAfterGlobalDiscount = (float) $purchaseItem->subtotal_after_global_discount;
+                $vatRate = (float) $purchaseItem->vat_rate;
+                $vatBaseFactor = $purchaseItem->vat_base_denominator > 0
+                    ? (float) $purchaseItem->vat_base_numerator / (float) $purchaseItem->vat_base_denominator
+                    : 0;
+
+                if ($subtotalAfterGlobalDiscount <= 0 || $vatRate <= 0 || $vatBaseFactor <= 0) return 0;
+
+                if ($purchaseItem->product_unit_is_price_include_vat) {
+                    $subtotalAfterGlobalDiscount = $subtotalAfterGlobalDiscount / (1 + ($vatRate / 100));
+                }
+
+                return $subtotalAfterGlobalDiscount * $vatBaseFactor;
+            })();
+            $purchaseItem->vat = (function () use ($purchaseItem) {
+                $vatBase = (float) $purchaseItem->vat_base;
+                $vatRate = (float) $purchaseItem->vat_rate;
+
+                if ($vatBase <= 0 || $vatRate <= 0) return 0;
+
+                $value = $vatBase * ($vatRate / 100);
+
+                return $value < 0 ? 0 : $value;
+            })();
+            $purchaseItem->subtotal_after_vat = (function () use ($purchaseItem) {
+                $subtotalAfterGlobalDiscount = (float) $purchaseItem->subtotal_after_global_discount;
+                $vat = (float) $purchaseItem->vat;
+
+                if ($purchaseItem->product_unit_is_price_include_vat) {
+                    return $subtotalAfterGlobalDiscount;
+                }
+
+                return $subtotalAfterGlobalDiscount + $vat;
+            })();
+            $purchaseItem->save();
+        }
+
+        $purchase->vat_base = (float) $purchase->items()->sum('vat_base');
+        $purchase->vat = (float) $purchase->items()->sum('vat');
+        $purchase->item_total_after_vat = (float) $purchase->items()->sum('subtotal_after_vat');
+        $purchase->additional_cost = (float) $purchase->additionalCosts()->sum('amount_total');
+
+        foreach ($purchase->items as $purchaseItem) {
+            $purchaseItem->additional_cost = (function () use ($purchaseItem, $purchase) {
+                $itemTotalAfterVat = (float) $purchase->item_total_after_vat;
+                $purchaseAdditionalCost = (float) $purchase->additional_cost;
+
+                if ($itemTotalAfterVat <= 0 || $purchaseAdditionalCost <= 0) return 0;
+
+                return ((float) $purchaseItem->subtotal_after_vat / $itemTotalAfterVat) * $purchaseAdditionalCost;
+            })();
+            $purchaseItem->rounding = (function () use ($purchaseItem, $purchase) {
+                $purchaseItemSubtotalAfterVat = (float) $purchaseItem->subtotal_after_vat;
+                $itemTotalAfterVat = (float) $purchase->item_total_after_vat;
+                $purchaseRounding = (float) $purchase->rounding;
+
+                if ($itemTotalAfterVat <= 0 || $purchaseRounding == 0 || $purchaseItemSubtotalAfterVat <= 0) return 0;
+
+                return ($purchaseItemSubtotalAfterVat / $itemTotalAfterVat) * $purchaseRounding;
+            })();
+            $purchaseItem->save();
+        }
+
+        $additionalCostDifference = round((float) $purchase->additional_cost - (float) $purchase->items()->sum('additional_cost'), 8);
+        if (abs($additionalCostDifference) > 0.00000001) {
+            $lastAdditionalCostPurchaseItem = $purchase->items
+                ->filter(fn ($purchaseItem) => (float) $purchaseItem->subtotal_after_vat > 0)
+                ->last();
+
+            if ($lastAdditionalCostPurchaseItem) {
+                $lastAdditionalCostPurchaseItem->additional_cost = max(
+                    0,
+                    (float) $lastAdditionalCostPurchaseItem->additional_cost + $additionalCostDifference
+                );
+                $lastAdditionalCostPurchaseItem->save();
+            }
+        }
+
+        $roundingDifference = round((float) $purchase->rounding - (float) $purchase->items()->sum('rounding'), 8);
+        if (abs($roundingDifference) > 0.00000001) {
+            $lastRoundingPurchaseItem = $purchase->items
+                ->filter(function ($purchaseItem) {
+                    return ((float) $purchaseItem->subtotal_after_vat + (float) $purchaseItem->additional_cost) > 0;
+                })
+                ->last();
+
+            if ($lastRoundingPurchaseItem) {
+                $lastRoundingPurchaseItem->rounding = (float) $lastRoundingPurchaseItem->rounding + $roundingDifference;
+                $lastRoundingPurchaseItem->amount_payable = (float) $lastRoundingPurchaseItem->subtotal_after_vat
+                    + (float) $lastRoundingPurchaseItem->additional_cost
+                    + (float) $lastRoundingPurchaseItem->rounding;
+                $lastRoundingPurchaseItem->cogs = (function () use ($lastRoundingPurchaseItem) {
+                    $qty = (float) $lastRoundingPurchaseItem->qty;
+                    $amountPayable = (float) $lastRoundingPurchaseItem->amount_payable;
+
+                    if ($qty <= 0 || $amountPayable <= 0) return 0;
+
+                    return $amountPayable / $qty;
+                })();
+                $lastRoundingPurchaseItem->total_cogs = (function () use ($lastRoundingPurchaseItem) {
+                    $qty = (float) $lastRoundingPurchaseItem->qty;
+                    $cogs = (float) $lastRoundingPurchaseItem->cogs;
+
+                    if ($qty <= 0 || $cogs <= 0) return 0;
+
+                    return $qty * $cogs;
+                })();
+                $lastRoundingPurchaseItem->base_unit_cogs = (function () use ($lastRoundingPurchaseItem) {
+                    $productUnitQtyBase = (float) $lastRoundingPurchaseItem->product_unit_qty_base;
+                    $totalCogs = (float) $lastRoundingPurchaseItem->total_cogs;
+
+                    if ($productUnitQtyBase <= 0 || $totalCogs <= 0) return 0;
+
+                    return $totalCogs / $productUnitQtyBase;
+                })();
+                $lastRoundingPurchaseItem->save();
+            }
+        }
+
+        foreach ($purchase->items as $purchaseItem) {
+            $purchaseItem->amount_payable = (float) $purchaseItem->subtotal_after_vat
+                + (float) $purchaseItem->additional_cost
+                + (float) $purchaseItem->rounding;
+            $purchaseItem->cogs = (function () use ($purchaseItem) {
+                $qty = (float) $purchaseItem->qty;
+                $amountPayable = (float) $purchaseItem->amount_payable;
+
+                if ($qty <= 0 || $amountPayable <= 0) return 0;
+
+                return $amountPayable / $qty;
+            })();
+            $purchaseItem->total_cogs = (function () use ($purchaseItem) {
+                $qty = (float) $purchaseItem->qty;
+                $cogs = (float) $purchaseItem->cogs;
+
+                if ($qty <= 0 || $cogs <= 0) return 0;
+
+                return $qty * $cogs;
+            })();
+            $purchaseItem->base_unit_cogs = (function () use ($purchaseItem) {
+                $productUnitQtyBase = (float) $purchaseItem->product_unit_qty_base;
+                $totalCogs = (float) $purchaseItem->total_cogs;
+
+                if ($productUnitQtyBase <= 0 || $totalCogs <= 0) return 0;
+
+                return $totalCogs / $productUnitQtyBase;
+            })();
+            $purchaseItem->save();
+        }
+
+        $purchase->amount_payable = (float) $purchase->items()->sum('amount_payable');
+        $purchase->amount_paid_by_purchase_order_down_payment = (float) $purchase->purchaseOrderDownPaymentAllocations()->sum('amount');
+        $purchase->amount_paid_by_purchase_return = (float) $purchase->purchaseReturnAllocations()->sum('amount');
+        $purchase->amount_paid_total =
+            $purchase->amount_paid_by_purchase_order_down_payment +
+            $purchase->amount_paid_by_purchase_return +
+            (float) $purchase->payments()->sum('amount');
+        $purchase->amount_due = max(0, (float) $purchase->amount_payable - (float) $purchase->amount_paid_total);
+        $purchase->is_paid_off = $purchase->amount_due == 0;
+
+        foreach ($purchase->items as $purchaseItem) {
+            $purchaseItem->qty_received_base = (float) $purchase->receiptItems()
+                ->where('product_id', $purchaseItem->product_id)
+                ->sum('product_unit_qty_base');
+            $purchaseItem->qty_outstanding_base = max($purchaseItem->product_unit_qty_base - $purchaseItem->qty_received_base, 0);
+            $purchaseItem->qty_excess_base = max($purchaseItem->qty_received_base - $purchaseItem->product_unit_qty_base, 0);
+            $purchaseItem->save();
+        }
+
+        $purchase->item_total_count = (function () use ($purchase) {
+            return $purchase->items()->count();
+        })();
+        $purchase->item_matched_count = (function () use ($purchase) {
+            $itemMatchedCount = 0;
+
+            foreach ($purchase->items as $purchaseItem) {
+                if (! $purchase->receiptItems()->where('product_id', $purchaseItem->product_id)->exists()) {
+                    continue;
+                }
+
+                if ((float) $purchaseItem->qty_excess_base > 0) {
+                    continue;
+                }
+
+                if ((float) $purchaseItem->qty_outstanding_base > 0) {
+                    continue;
+                }
+
+                $itemMatchedCount++;
+            }
+
+            return $itemMatchedCount;
+        })();
+        $purchase->item_less_count = (function () use ($purchase) {
+            $itemLessCount = 0;
+
+            foreach ($purchase->items as $purchaseItem) {
+                if (! $purchase->receiptItems()->where('product_id', $purchaseItem->product_id)->exists()) {
+                    continue;
+                }
+
+                if ((float) $purchaseItem->qty_excess_base > 0) {
+                    continue;
+                }
+
+                if ((float) $purchaseItem->qty_outstanding_base > 0) {
+                    $itemLessCount++;
+                }
+            }
+
+            return $itemLessCount;
+        })();
+        $purchase->item_more_count = (function () use ($purchase) {
+            $itemMoreCount = 0;
+
+            foreach ($purchase->items as $purchaseItem) {
+                if (! $purchase->receiptItems()->where('product_id', $purchaseItem->product_id)->exists()) {
+                    continue;
+                }
+
+                if ((float) $purchaseItem->qty_excess_base > 0) {
+                    $itemMoreCount++;
+                }
+            }
+
+            return $itemMoreCount;
+        })();
+        $purchase->item_unlinked_count = (function () use ($purchase) {
+            $itemUnlinkedCount = 0;
+
+            foreach ($purchase->items as $purchaseItem) {
+                if (! $purchase->receiptItems()->where('product_id', $purchaseItem->product_id)->exists()) {
+                    $itemUnlinkedCount++;
+                }
+            }
+
+            return $itemUnlinkedCount;
+        })();
+        $purchase->progress_status = (function () use ($purchase) {
+            if ($purchase->item_total_count === 0) {
+                return PurchaseProgressStatusEnum::UNLINKED;
+            }
+
+            if ($purchase->item_unlinked_count === $purchase->item_total_count) {
+                return PurchaseProgressStatusEnum::UNLINKED;
+            }
+
+            if ($purchase->item_matched_count === $purchase->item_total_count) {
+                return PurchaseProgressStatusEnum::MATCHED;
+            }
+
+            return PurchaseProgressStatusEnum::UNMATCHED;
+        })();
+
+        $purchaseProductIds = $purchase->items()->distinct()->pluck('product_id')->filter()->values()->all();
+        $purchase->receiptItems()->whereIn('product_id', $purchaseProductIds)->update(['has_purchase_item_product' => true]);
+        $purchase->receiptItems()->whereNotIn('product_id', $purchaseProductIds)->update(['has_purchase_item_product' => false]);
+
+        $purchase->save();
+    }
+
+    public function delete(Purchase $purchase): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrder = $purchase->purchaseOrder;
+
+            if (
+                $purchase->payments()->exists()
+                || $purchase->purchaseOrderDownPaymentAllocations()->exists()
+                || $purchase->purchaseReturnAllocations()->exists()
+                || $purchase->purchaseReturns()->exists()
+            ) {
+                throw new Exception('Purchase cannot be deleted because it already has related transactions.');
+            }
+
+            foreach ($purchase->items as $purchaseItem) {
+                $this->purchaseItemActions->delete($purchaseItem, false);
+            }
+
+            foreach ($purchase->globalDiscounts as $purchaseGlobalDiscount) {
+                $this->purchaseGlobalDiscountActions->delete($purchaseGlobalDiscount);
+            }
+
+            foreach ($purchase->additionalCosts as $purchaseAdditionalCost) {
+                $this->purchaseAdditionalCostActions->delete($purchaseAdditionalCost);
+            }
+
+            foreach ($purchase->receipts as $purchaseReceipt) {
+                $this->purchaseReceiptActions->delete($purchaseReceipt, false);
+            }
+
+            $result = $purchase->delete();
+
+            if ($purchaseOrder) {
+                PurchaseOrderActions::updateSummary($purchaseOrder->refresh());
+            }
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseAdditionalCost/PurchaseAdditionalCostActions.php b/api/app/Actions/PurchaseAdditionalCost/PurchaseAdditionalCostActions.php
new file mode 100644
index 000000000..3cf7c1b32
--- /dev/null
+++ b/api/app/Actions/PurchaseAdditionalCost/PurchaseAdditionalCostActions.php
@@ -0,0 +1,374 @@
+<?php
+
+namespace App\Actions\PurchaseAdditionalCost;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\Purchase\PurchaseActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseAdditionalCostCreateDTO;
+use App\DTOs\PurchaseAdditionalCostUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseAdditionalCost;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseAdditionalCostActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchase',
+        'category',
+        'paidImmediatelyCashAccount',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchase',
+        'category',
+        'paidImmediatelyCashAccount',
+        'payments.cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $purchaseId,
+        ?int $categoryId,
+        ?bool $isAmountPayablePaidOff,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseAdditionalCost::with(self::LIST_EAGER_LOADS)
+            ->select('purchase_additional_costs.*')
+            ->whereCompanyId('purchase_additional_costs', $companyId)
+            ->whereBranchId('purchase_additional_costs', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseId,
+            $categoryId,
+            $isAmountPayablePaidOff,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $purchaseId,
+                $categoryId,
+                $isAmountPayablePaidOff,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('purchase_additional_costs.code', 'like', '%'.$search.'%')
+                            ->orWhere('purchase_additional_costs.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($purchaseId)) {
+                    $query->where('purchase_additional_costs.purchase_id', $purchaseId);
+                }
+
+                if (! is_null($categoryId)) {
+                    $query->where('purchase_additional_costs.purchase_additional_cost_category_id', $categoryId);
+                }
+
+                if (! is_null($isAmountPayablePaidOff)) {
+                    $query->where('purchase_additional_costs.is_amount_payable_paid_off', $isAmountPayablePaidOff);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('purchase_additional_costs.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(purchase_additional_costs.id, '.$includeId.') desc');
+        }
+        $query->orderBy('purchase_additional_costs.date', 'desc');
+        $query->orderBy('purchase_additional_costs.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $purchaseId ?? '[null]',
+                    $categoryId ?? '[null]',
+                    is_null($isAmountPayablePaidOff) ? '[null]' : ($isAmountPayablePaidOff ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_additional_cost_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseAdditionalCost $purchaseAdditionalCost): PurchaseAdditionalCost
+    {
+        return $purchaseAdditionalCost->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public static function updateSummary(PurchaseAdditionalCost $purchaseAdditionalCost): void
+    {
+        $purchaseAdditionalCost->load('payments');
+
+        $purchaseAdditionalCost->amount_payable_paid = (float) $purchaseAdditionalCost->payments->sum('amount');
+        $purchaseAdditionalCost->amount_payable_due = max(
+            0,
+            (float) $purchaseAdditionalCost->amount_payable - (float) $purchaseAdditionalCost->amount_payable_paid
+        );
+        $purchaseAdditionalCost->is_amount_payable_paid_off = $purchaseAdditionalCost->amount_payable_due == 0;
+        $purchaseAdditionalCost->amount_total =
+            (float) $purchaseAdditionalCost->amount_paid_immediately +
+            (float) $purchaseAdditionalCost->amount_payable;
+
+        $purchaseAdditionalCost->save();
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = PurchaseAdditionalCost::whereCompanyId('purchase_additional_costs', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'PAC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PurchaseAdditionalCost::whereCompanyId('purchase_additional_costs', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(PurchaseAdditionalCostCreateDTO $data): PurchaseAdditionalCost
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseAdditionalCost = new PurchaseAdditionalCost();
+            $purchaseAdditionalCost->company_id = $data->companyId;
+            $purchaseAdditionalCost->branch_id = $data->branchId;
+            $purchaseAdditionalCost->purchase_id = $data->purchaseId;
+            $purchaseAdditionalCost->purchase_additional_cost_category_id = $data->purchaseAdditionalCostCategoryId;
+            $purchaseAdditionalCost->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchaseAdditionalCost->date = $this->generateDate($data->date);
+            $purchaseAdditionalCost->due_days = $data->dueDays;
+            $purchaseAdditionalCost->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $purchaseAdditionalCost->amount_paid_immediately = $data->amountPaidImmediately;
+            $purchaseAdditionalCost->amount_payable = $data->amountPayable;
+            $purchaseAdditionalCost->remarks = $data->remarks;
+            $purchaseAdditionalCost->save();
+
+            self::updateSummary($purchaseAdditionalCost);
+
+            if (
+                (float) $purchaseAdditionalCost->amount_paid_immediately > 0 &&
+                ! is_null($purchaseAdditionalCost->paid_immediately_cash_account_id)
+            ) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromPurchaseAdditionalCost($purchaseAdditionalCost)
+                );
+            }
+
+            PurchaseActions::updateSummary($purchaseAdditionalCost->purchase);
+            $purchaseAdditionalCost->refresh();
+
+            $this->flushCache();
+
+            return $purchaseAdditionalCost;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseAdditionalCost $purchaseAdditionalCost, PurchaseAdditionalCostUpdateDTO $data): PurchaseAdditionalCost
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseAdditionalCost->purchase_id = $data->purchaseId;
+            $purchaseAdditionalCost->purchase_additional_cost_category_id = $data->purchaseAdditionalCostCategoryId;
+            $purchaseAdditionalCost->code = $this->generateUniqueCode($purchaseAdditionalCost->company_id, $data->code, $purchaseAdditionalCost->id);
+            $purchaseAdditionalCost->date = $this->generateDate($data->date);
+            $purchaseAdditionalCost->due_days = $data->dueDays;
+            $purchaseAdditionalCost->paid_immediately_cash_account_id = $data->paidImmediatelyCashAccountId;
+            $purchaseAdditionalCost->amount_paid_immediately = $data->amountPaidImmediately;
+            $purchaseAdditionalCost->amount_payable = $data->amountPayable;
+            $purchaseAdditionalCost->remarks = $data->remarks;
+            $purchaseAdditionalCost->save();
+
+            self::updateSummary($purchaseAdditionalCost);
+
+            $cashTransaction = $purchaseAdditionalCost->cashTransaction;
+            if (
+                (float) $purchaseAdditionalCost->amount_paid_immediately > 0 &&
+                ! is_null($purchaseAdditionalCost->paid_immediately_cash_account_id)
+            ) {
+                if (! $cashTransaction) {
+                    $this->cashTransactionActions->create(
+                        data: CashTransactionCreateDTO::fromPurchaseAdditionalCost($purchaseAdditionalCost)
+                    );
+                } else {
+                    $this->cashTransactionActions->update(
+                        cashTransaction: $cashTransaction,
+                        data: CashTransactionUpdateDTO::fromPurchaseAdditionalCost($purchaseAdditionalCost)
+                    );
+                }
+            } elseif ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            PurchaseActions::updateSummary($purchaseAdditionalCost->purchase);
+            $purchaseAdditionalCost->refresh();
+
+            $this->flushCache();
+
+            return $purchaseAdditionalCost;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseAdditionalCost $purchaseAdditionalCost): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            foreach ($purchaseAdditionalCost->payments as $payment) {
+                $cashTransaction = $payment->cashTransaction;
+                if ($cashTransaction) {
+                    $this->cashTransactionActions->delete($cashTransaction);
+                }
+                $payment->delete();
+            }
+
+            $cashTransaction = $purchaseAdditionalCost->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $purchase = $purchaseAdditionalCost->purchase;
+            $retval = $purchaseAdditionalCost->delete();
+
+            if ($purchase) {
+                PurchaseActions::updateSummary($purchase);
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryActions.php b/api/app/Actions/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryActions.php
new file mode 100644
index 000000000..3b6b849d9
--- /dev/null
+++ b/api/app/Actions/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryActions.php
@@ -0,0 +1,253 @@
+<?php
+
+namespace App\Actions\PurchaseAdditionalCostCategory;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseAdditionalCostCategoryCreateDTO;
+use App\DTOs\PurchaseAdditionalCostCategoryUpdateDTO;
+use App\Models\Company;
+use App\Models\PurchaseAdditionalCostCategory;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseAdditionalCostCategoryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseAdditionalCostCategory::with(self::LIST_EAGER_LOADS)
+            ->select('purchase_additional_cost_categories.*')
+            ->whereCompanyId('purchase_additional_cost_categories', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('purchase_additional_cost_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('purchase_additional_cost_categories.name', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('purchase_additional_cost_categories.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(purchase_additional_cost_categories.id, '.$includeId.') desc');
+        }
+        $query->orderBy('purchase_additional_cost_categories.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    empty($search) ? '[empty]' : $search,
+                    $companyId,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_purchase_additional_cost_category_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory): PurchaseAdditionalCostCategory
+    {
+        return $purchaseAdditionalCostCategory->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseAdditionalCostCategoryCreateDTO $data): PurchaseAdditionalCostCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseAdditionalCostCategory = new PurchaseAdditionalCostCategory();
+            $purchaseAdditionalCostCategory->company_id = $data->companyId;
+            $purchaseAdditionalCostCategory->code = $this->generateUniqueCode(
+                $data->companyId,
+                $data->code,
+                null,
+            );
+            $purchaseAdditionalCostCategory->name = $data->name;
+            $purchaseAdditionalCostCategory->save();
+
+            $this->flushCache();
+
+            return $purchaseAdditionalCostCategory;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory, PurchaseAdditionalCostCategoryUpdateDTO $data): PurchaseAdditionalCostCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseAdditionalCostCategory->code = $this->generateUniqueCode(
+                $purchaseAdditionalCostCategory->company_id,
+                $data->code,
+                $purchaseAdditionalCostCategory->id,
+            );
+            $purchaseAdditionalCostCategory->name = $data->name;
+            $purchaseAdditionalCostCategory->save();
+
+            $this->flushCache();
+
+            return $purchaseAdditionalCostCategory->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $retval = $purchaseAdditionalCostCategory->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->purchaseAdditionalCostCategories()
+                ->withTrashed()
+                ->count() + 1 + $tryCount;
+            $code = 'PACC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->purchaseAdditionalCostCategories()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->purchaseAdditionalCostCategories()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('purchase_additional_cost_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->purchaseAdditionalCostCategories()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->purchaseAdditionalCostCategories()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('purchase_additional_cost_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentActions.php b/api/app/Actions/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentActions.php
new file mode 100644
index 000000000..f8487a633
--- /dev/null
+++ b/api/app/Actions/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentActions.php
@@ -0,0 +1,306 @@
+<?php
+
+namespace App\Actions\PurchaseAdditionalCostPayment;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\Purchase\PurchaseActions;
+use App\Actions\PurchaseAdditionalCost\PurchaseAdditionalCostActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseAdditionalCostPaymentCreateDTO;
+use App\DTOs\PurchaseAdditionalCostPaymentUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseAdditionalCostPayment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseAdditionalCostPaymentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseAdditionalCost.purchase',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $purchaseAdditionalCostId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseAdditionalCostPayment::with(self::LIST_EAGER_LOADS)
+            ->select('purchase_additional_cost_payments.*')
+            ->whereCompanyId('purchase_additional_cost_payments', $companyId)
+            ->whereBranchId('purchase_additional_cost_payments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseAdditionalCostId,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $purchaseAdditionalCostId,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('purchase_additional_cost_payments.code', 'like', '%'.$search.'%')
+                            ->orWhere('purchase_additional_cost_payments.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($purchaseAdditionalCostId)) {
+                    $query->where('purchase_additional_cost_payments.purchase_additional_cost_id', $purchaseAdditionalCostId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('purchase_additional_cost_payments.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(purchase_additional_cost_payments.id, '.$includeId.') desc');
+        }
+        $query->orderBy('purchase_additional_cost_payments.date', 'desc');
+        $query->orderBy('purchase_additional_cost_payments.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $purchaseAdditionalCostId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_additional_cost_payment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment): PurchaseAdditionalCostPayment
+    {
+        return $purchaseAdditionalCostPayment->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = PurchaseAdditionalCostPayment::whereCompanyId('purchase_additional_cost_payments', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'PACP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PurchaseAdditionalCostPayment::whereCompanyId('purchase_additional_cost_payments', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(PurchaseAdditionalCostPaymentCreateDTO $data): PurchaseAdditionalCostPayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseAdditionalCostPayment = new PurchaseAdditionalCostPayment();
+            $purchaseAdditionalCostPayment->company_id = $data->companyId;
+            $purchaseAdditionalCostPayment->branch_id = $data->branchId;
+            $purchaseAdditionalCostPayment->purchase_additional_cost_id = $data->purchaseAdditionalCostId;
+            $purchaseAdditionalCostPayment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchaseAdditionalCostPayment->date = $this->generateDate($data->date);
+            $purchaseAdditionalCostPayment->cash_account_id = $data->cashAccountId;
+            $purchaseAdditionalCostPayment->amount = $data->amount;
+            $purchaseAdditionalCostPayment->remarks = $data->remarks;
+            $purchaseAdditionalCostPayment->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromPurchaseAdditionalCostPayment($purchaseAdditionalCostPayment)
+            );
+
+            $purchaseAdditionalCost = $purchaseAdditionalCostPayment->purchaseAdditionalCost;
+            PurchaseAdditionalCostActions::updateSummary($purchaseAdditionalCost);
+            PurchaseActions::updateSummary($purchaseAdditionalCost->purchase);
+            $purchaseAdditionalCostPayment->refresh();
+
+            $this->flushCache();
+
+            return $purchaseAdditionalCostPayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment, PurchaseAdditionalCostPaymentUpdateDTO $data): PurchaseAdditionalCostPayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseAdditionalCostPayment->code = $this->generateUniqueCode($purchaseAdditionalCostPayment->company_id, $data->code, $purchaseAdditionalCostPayment->id);
+            $purchaseAdditionalCostPayment->date = $this->generateDate($data->date);
+            $purchaseAdditionalCostPayment->cash_account_id = $data->cashAccountId;
+            $purchaseAdditionalCostPayment->amount = $data->amount;
+            $purchaseAdditionalCostPayment->remarks = $data->remarks;
+            $purchaseAdditionalCostPayment->save();
+
+            $cashTransaction = $purchaseAdditionalCostPayment->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromPurchaseAdditionalCostPayment($purchaseAdditionalCostPayment)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromPurchaseAdditionalCostPayment($purchaseAdditionalCostPayment)
+                );
+            }
+
+            $purchaseAdditionalCost = $purchaseAdditionalCostPayment->purchaseAdditionalCost;
+            PurchaseAdditionalCostActions::updateSummary($purchaseAdditionalCost);
+            PurchaseActions::updateSummary($purchaseAdditionalCost->purchase);
+            $purchaseAdditionalCostPayment->refresh();
+
+            $this->flushCache();
+
+            return $purchaseAdditionalCostPayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $purchaseAdditionalCostPayment->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $purchaseAdditionalCost = $purchaseAdditionalCostPayment->purchaseAdditionalCost;
+            $retval = $purchaseAdditionalCostPayment->delete();
+
+            if ($purchaseAdditionalCost) {
+                PurchaseAdditionalCostActions::updateSummary($purchaseAdditionalCost);
+                PurchaseActions::updateSummary($purchaseAdditionalCost->purchase);
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseGlobalDiscount/PurchaseGlobalDiscountActions.php b/api/app/Actions/PurchaseGlobalDiscount/PurchaseGlobalDiscountActions.php
new file mode 100644
index 000000000..8ca1df887
--- /dev/null
+++ b/api/app/Actions/PurchaseGlobalDiscount/PurchaseGlobalDiscountActions.php
@@ -0,0 +1,218 @@
+<?php
+
+namespace App\Actions\PurchaseGlobalDiscount;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseGlobalDiscountCreateDTO;
+use App\DTOs\PurchaseGlobalDiscountUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseGlobalDiscount;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseGlobalDiscountActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchase.supplier',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $purchaseCode,
+        ?string $purchaseStartDate,
+        ?string $purchaseEndDate,
+        ?int $purchaseSupplierId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseGlobalDiscount::select('purchase_global_discounts.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_global_discounts.company_id')
+            ->join('purchases', 'purchases.id', '=', 'purchase_global_discounts.purchase_id')
+            ->whereCompanyId('purchase_global_discounts', $companyId)
+            ->whereBranchId('purchase_global_discounts', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseCode,
+            $purchaseStartDate,
+            $purchaseEndDate,
+            $purchaseSupplierId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_global_discounts.discount_type', 'like', '%'.$search.'%');
+                });
+            }
+
+            $purchaseStartDateUtc = $purchaseStartDate ? TimezoneHelper::convertToUTC($purchaseStartDate) : null;
+            if ($purchaseStartDateUtc) {
+                $query->where('purchases.date', '>=', $purchaseStartDateUtc);
+            }
+
+            $purchaseEndDateUtc = $purchaseEndDate ? TimezoneHelper::convertToUTC($purchaseEndDate) : null;
+            if ($purchaseEndDateUtc) {
+                $query->where('purchases.date', '<=', $purchaseEndDateUtc);
+            }
+
+            if ($purchaseCode) {
+                $query->where('purchases.code', $purchaseCode);
+            }
+
+            if ($purchaseSupplierId) {
+                $query->where('purchases.supplier_id', $purchaseSupplierId);
+            }
+        });
+
+        $query->orderBy('purchases.date', 'desc')
+            ->orderBy('purchase_global_discounts.sequence', 'asc')
+            ->orderBy('purchase_global_discounts.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($purchaseCode) ? '[empty]' : $purchaseCode,
+                    $purchaseStartDate ?? '[null]',
+                    $purchaseEndDate ?? '[null]',
+                    $purchaseSupplierId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_global_discount_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseGlobalDiscount $purchaseGlobalDiscount): PurchaseGlobalDiscount
+    {
+        return $purchaseGlobalDiscount->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseGlobalDiscountCreateDTO $data): PurchaseGlobalDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseGlobalDiscount = new PurchaseGlobalDiscount();
+            $purchaseGlobalDiscount->company_id = $data->companyId;
+            $purchaseGlobalDiscount->branch_id = $data->branchId;
+            $purchaseGlobalDiscount->purchase_id = $data->purchaseId;
+            $purchaseGlobalDiscount->sequence = $data->sequence;
+            $purchaseGlobalDiscount->discount_type = $data->discountType;
+            $purchaseGlobalDiscount->discount_value = $data->discountValue;
+            $purchaseGlobalDiscount->save();
+
+            $this->flushCache();
+
+            return $purchaseGlobalDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseGlobalDiscount $purchaseGlobalDiscount, PurchaseGlobalDiscountUpdateDTO $data): PurchaseGlobalDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseGlobalDiscount->sequence = $data->sequence;
+            $purchaseGlobalDiscount->discount_type = $data->discountType;
+            $purchaseGlobalDiscount->discount_value = $data->discountValue;
+            $purchaseGlobalDiscount->save();
+
+            $this->flushCache();
+
+            return $purchaseGlobalDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseGlobalDiscount $purchaseGlobalDiscount): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $purchaseGlobalDiscount->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseItem/PurchaseItemActions.php b/api/app/Actions/PurchaseItem/PurchaseItemActions.php
new file mode 100644
index 000000000..af553c731
--- /dev/null
+++ b/api/app/Actions/PurchaseItem/PurchaseItemActions.php
@@ -0,0 +1,507 @@
+<?php
+
+namespace App\Actions\PurchaseItem;
+
+use App\Actions\Purchase\PurchaseActions;
+use App\Actions\PurchaseItemProductUnitPriceDiscount\PurchaseItemProductUnitPriceDiscountActions;
+use App\Actions\PurchaseItemSubtotalDiscount\PurchaseItemSubtotalDiscountActions;
+use App\Actions\PurchaseReceiptItem\PurchaseReceiptItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseItemCreateDTO;
+use App\DTOs\PurchaseItemProductUnitPriceDiscountCreateDTO;
+use App\DTOs\PurchaseItemProductUnitPriceDiscountUpdateDTO;
+use App\DTOs\PurchaseItemSubtotalDiscountCreateDTO;
+use App\DTOs\PurchaseItemSubtotalDiscountUpdateDTO;
+use App\DTOs\PurchaseItemUpdateDTO;
+use App\Enums\DiscountTypeEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\ProductUnit;
+use App\Models\PurchaseItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchase.supplier',
+        'productUnit.unit',
+        'productUnit.product.category',
+        'productUnit.product.brand',
+        'productUnit.product.baseProductUnit.unit',
+        'productUnit.product.images',
+        'productUnit.product.mainImage',
+        'vatProfile',
+        'productUnitPriceDiscounts',
+        'subtotalDiscounts',
+    ];
+
+    public function __construct(
+        private readonly PurchaseItemProductUnitPriceDiscountActions $purchaseItemProductUnitPriceDiscountActions,
+        private readonly PurchaseItemSubtotalDiscountActions $purchaseItemSubtotalDiscountActions,
+        private readonly PurchaseReceiptItemActions $purchaseReceiptItemActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $purchaseCode,
+        ?string $purchaseStartDate,
+        ?string $purchaseEndDate,
+        ?int $purchaseSupplierId,
+        ?string $productUnitCode,
+        ?string $productUnitProductName,
+        ?int $productUnitProductCategoryId,
+        ?int $productUnitProductBrandId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseItem::select('purchase_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_items.company_id')
+            ->join('purchases', 'purchases.id', '=', 'purchase_items.purchase_id')
+            ->join('product_units', 'product_units.id', '=', 'purchase_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'purchase_items.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('purchase_items', $companyId)
+            ->whereBranchId('purchase_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseCode,
+            $purchaseStartDate,
+            $purchaseEndDate,
+            $purchaseSupplierId,
+            $productUnitCode,
+            $productUnitProductName,
+            $productUnitProductCategoryId,
+            $productUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_items.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            $purchaseStartDateUtc = $purchaseStartDate ? TimezoneHelper::convertToUTC($purchaseStartDate) : null;
+            if ($purchaseStartDateUtc) {
+                $query->where('purchases.date', '>=', $purchaseStartDateUtc);
+            }
+
+            $purchaseEndDateUtc = $purchaseEndDate ? TimezoneHelper::convertToUTC($purchaseEndDate) : null;
+            if ($purchaseEndDateUtc) {
+                $query->where('purchases.date', '<=', $purchaseEndDateUtc);
+            }
+
+            if ($purchaseCode) {
+                $query->where('purchases.code', $purchaseCode);
+            }
+
+            if ($purchaseSupplierId) {
+                $query->where('purchases.supplier_id', $purchaseSupplierId);
+            }
+
+            if ($productUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$productUnitCode.'%');
+            }
+
+            if ($productUnitProductName) {
+                $query->where('products.name', 'like', '%'.$productUnitProductName.'%');
+            }
+
+            if ($productUnitProductCategoryId) {
+                $query->where('products.category_id', $productUnitProductCategoryId);
+            }
+
+            if ($productUnitProductBrandId) {
+                $query->where('products.brand_id', $productUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('purchases.date', 'desc')
+            ->orderBy('purchase_items.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($purchaseCode) ? '[empty]' : $purchaseCode,
+                    $purchaseStartDate ?? '[null]',
+                    $purchaseEndDate ?? '[null]',
+                    $purchaseSupplierId ?? '[null]',
+                    empty($productUnitCode) ? '[empty]' : $productUnitCode,
+                    empty($productUnitProductName) ? '[empty]' : $productUnitProductName,
+                    $productUnitProductCategoryId ?? '[null]',
+                    $productUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_item_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseItem $purchaseItem): PurchaseItem
+    {
+        return $purchaseItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseItemCreateDTO $data, bool $updateParentSummary): PurchaseItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseItem = new PurchaseItem();
+            $purchaseItem->company_id = $data->companyId;
+            $purchaseItem->branch_id = $data->branchId;
+            $purchaseItem->purchase_id = $data->purchaseId;
+            $purchaseItem->qty = $data->qty;
+            $purchaseItem->product_unit_id = $data->productUnitId;
+            $purchaseItem->product_id = ProductUnit::query()->whereKey($data->productUnitId)->value('product_id');
+            $purchaseItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $purchaseItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $purchaseItem->product_unit_price = $data->productUnitPrice;
+            $purchaseItem->product_unit_is_price_include_vat = $data->productUnitIsPriceIncludeVat;
+            $purchaseItem->vat_profile_id = $data->vatProfileId;
+            $purchaseItem->vat_rate = $data->vatRate;
+            $purchaseItem->vat_base_numerator = $data->vatBaseNumerator;
+            $purchaseItem->vat_base_denominator = $data->vatBaseDenominator;
+            $purchaseItem->remarks = $data->remarks;
+            $purchaseItem->save();
+
+            foreach ($data->productUnitPriceDiscounts as $discount) {
+                $dto = new PurchaseItemProductUnitPriceDiscountCreateDTO(
+                    companyId: $purchaseItem->company_id,
+                    branchId: $purchaseItem->branch_id,
+                    purchaseItemId: $purchaseItem->id,
+                    sequence: $discount['sequence'],
+                    discountType: $discount['discount_type'],
+                    discountValue: $discount['discount_value'],
+                );
+
+                $this->purchaseItemProductUnitPriceDiscountActions->create($dto);
+            }
+
+            foreach ($data->subtotalDiscounts as $discount) {
+                $dto = new PurchaseItemSubtotalDiscountCreateDTO(
+                    companyId: $purchaseItem->company_id,
+                    branchId: $purchaseItem->branch_id,
+                    purchaseItemId: $purchaseItem->id,
+                    sequence: $discount['sequence'],
+                    discountType: $discount['discount_type'],
+                    discountValue: $discount['discount_value'],
+                );
+
+                $this->purchaseItemSubtotalDiscountActions->create($dto);
+            }
+
+            $purchaseItem->price_discount = (function () use ($purchaseItem) {
+                $beforeDiscount = (float) $purchaseItem->product_unit_price;
+                $afterDiscount = $beforeDiscount;
+
+                foreach ($purchaseItem->productUnitPriceDiscounts()->orderBy('sequence')->orderBy('id')->get() as $discount) {
+                    $discountType = $discount->discount_type instanceof DiscountTypeEnum
+                        ? $discount->discount_type
+                        : DiscountTypeEnum::resolveToEnum($discount->discount_type);
+                    $discountValue = (float) $discount->discount_value;
+
+                    if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                        $afterDiscount -= $afterDiscount * $discountValue / 100;
+                    } else {
+                        $afterDiscount -= $discountValue;
+                    }
+
+                    if ($afterDiscount < 0) {
+                        $afterDiscount = 0;
+                    }
+                }
+
+                return $beforeDiscount - $afterDiscount;
+            })();
+            $purchaseItem->price_after_discount = $purchaseItem->product_unit_price - $purchaseItem->price_discount;
+            $purchaseItem->subtotal = $purchaseItem->qty * $purchaseItem->price_after_discount;
+            $purchaseItem->subtotal_discount = (function () use ($purchaseItem) {
+                $beforeDiscount = (float) $purchaseItem->subtotal;
+                $afterDiscount = $beforeDiscount;
+
+                foreach ($purchaseItem->subtotalDiscounts()->orderBy('sequence')->orderBy('id')->get() as $discount) {
+                    $discountType = $discount->discount_type instanceof DiscountTypeEnum
+                        ? $discount->discount_type
+                        : DiscountTypeEnum::resolveToEnum($discount->discount_type);
+                    $discountValue = (float) $discount->discount_value;
+
+                    if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                        $afterDiscount -= $afterDiscount * $discountValue / 100;
+                    } else {
+                        $afterDiscount -= $discountValue;
+                    }
+
+                    if ($afterDiscount < 0) {
+                        $afterDiscount = 0;
+                    }
+                }
+
+                return $beforeDiscount - $afterDiscount;
+            })();
+            $purchaseItem->subtotal_after_discount = $purchaseItem->subtotal - $purchaseItem->subtotal_discount;
+            $purchaseItem->save();
+
+            if ($updateParentSummary) {
+                PurchaseActions::updateSummary($purchaseItem->purchase);
+                $purchaseItem->refresh();
+            }
+
+            $this->flushCache();
+
+            return $purchaseItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseItem $purchaseItem, PurchaseItemUpdateDTO $data, bool $updateParentSummary): PurchaseItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseItem->qty = $data->qty;
+            $purchaseItem->product_unit_id = $data->productUnitId;
+            $purchaseItem->product_id = ProductUnit::query()->whereKey($data->productUnitId)->value('product_id');
+            $purchaseItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $purchaseItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $purchaseItem->product_unit_price = $data->productUnitPrice;
+            $purchaseItem->product_unit_is_price_include_vat = $data->productUnitIsPriceIncludeVat;
+            $purchaseItem->vat_profile_id = $data->vatProfileId;
+            $purchaseItem->vat_rate = $data->vatRate;
+            $purchaseItem->vat_base_numerator = $data->vatBaseNumerator;
+            $purchaseItem->vat_base_denominator = $data->vatBaseDenominator;
+            $purchaseItem->remarks = $data->remarks;
+
+            foreach ($data->deleteProductUnitPriceDiscountIds as $deleteId) {
+                $purchaseItemPriceDiscount = $purchaseItem->productUnitPriceDiscounts()->findOrFail($deleteId);
+                $this->purchaseItemProductUnitPriceDiscountActions->delete($purchaseItemPriceDiscount);
+            }
+
+            foreach ($data->productUnitPriceDiscounts as $discount) {
+                if (! empty($discount['id'])) {
+                    $purchaseItemPriceDiscount = $purchaseItem->productUnitPriceDiscounts()->findOrFail($discount['id']);
+                    $dto = new PurchaseItemProductUnitPriceDiscountUpdateDTO(
+                        sequence: $discount['sequence'],
+                        discountType: $discount['discount_type'],
+                        discountValue: $discount['discount_value'],
+                    );
+
+                    $this->purchaseItemProductUnitPriceDiscountActions->update($purchaseItemPriceDiscount, $dto);
+                } else {
+                    $dto = new PurchaseItemProductUnitPriceDiscountCreateDTO(
+                        companyId: $purchaseItem->company_id,
+                        branchId: $purchaseItem->branch_id,
+                        purchaseItemId: $purchaseItem->id,
+                        sequence: $discount['sequence'],
+                        discountType: $discount['discount_type'],
+                        discountValue: $discount['discount_value'],
+                    );
+
+                    $this->purchaseItemProductUnitPriceDiscountActions->create($dto);
+                }
+            }
+
+            foreach ($data->deleteSubtotalDiscountIds as $deleteId) {
+                $purchaseItemSubtotalDiscount = $purchaseItem->subtotalDiscounts()->findOrFail($deleteId);
+                $this->purchaseItemSubtotalDiscountActions->delete($purchaseItemSubtotalDiscount);
+            }
+
+            foreach ($data->subtotalDiscounts as $discount) {
+                if (! empty($discount['id'])) {
+                    $purchaseItemSubtotalDiscount = $purchaseItem->subtotalDiscounts()->findOrFail($discount['id']);
+                    $dto = new PurchaseItemSubtotalDiscountUpdateDTO(
+                        sequence: $discount['sequence'],
+                        discountType: $discount['discount_type'],
+                        discountValue: $discount['discount_value'],
+                    );
+
+                    $this->purchaseItemSubtotalDiscountActions->update($purchaseItemSubtotalDiscount, $dto);
+                } else {
+                    $dto = new PurchaseItemSubtotalDiscountCreateDTO(
+                        companyId: $purchaseItem->company_id,
+                        branchId: $purchaseItem->branch_id,
+                        purchaseItemId: $purchaseItem->id,
+                        sequence: $discount['sequence'],
+                        discountType: $discount['discount_type'],
+                        discountValue: $discount['discount_value'],
+                    );
+
+                    $this->purchaseItemSubtotalDiscountActions->create($dto);
+                }
+            }
+
+            $purchaseItem->price_discount = (function () use ($purchaseItem) {
+                $beforeDiscount = (float) $purchaseItem->product_unit_price;
+                $afterDiscount = $beforeDiscount;
+
+                foreach ($purchaseItem->productUnitPriceDiscounts()->orderBy('sequence')->orderBy('id')->get() as $discount) {
+                    $discountType = $discount->discount_type instanceof DiscountTypeEnum
+                        ? $discount->discount_type
+                        : DiscountTypeEnum::resolveToEnum($discount->discount_type);
+                    $discountValue = (float) $discount->discount_value;
+
+                    if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                        $afterDiscount -= $afterDiscount * $discountValue / 100;
+                    } else {
+                        $afterDiscount -= $discountValue;
+                    }
+
+                    if ($afterDiscount < 0) {
+                        $afterDiscount = 0;
+                    }
+                }
+
+                return $beforeDiscount - $afterDiscount;
+            })();
+            $purchaseItem->price_after_discount = $purchaseItem->product_unit_price - $purchaseItem->price_discount;
+            $purchaseItem->subtotal = $purchaseItem->qty * $purchaseItem->price_after_discount;
+            $purchaseItem->subtotal_discount = (function () use ($purchaseItem) {
+                $beforeDiscount = (float) $purchaseItem->subtotal;
+                $afterDiscount = $beforeDiscount;
+
+                foreach ($purchaseItem->subtotalDiscounts()->orderBy('sequence')->orderBy('id')->get() as $discount) {
+                    $discountType = $discount->discount_type instanceof DiscountTypeEnum
+                        ? $discount->discount_type
+                        : DiscountTypeEnum::resolveToEnum($discount->discount_type);
+                    $discountValue = (float) $discount->discount_value;
+
+                    if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                        $afterDiscount -= $afterDiscount * $discountValue / 100;
+                    } else {
+                        $afterDiscount -= $discountValue;
+                    }
+
+                    if ($afterDiscount < 0) {
+                        $afterDiscount = 0;
+                    }
+                }
+
+                return $beforeDiscount - $afterDiscount;
+            })();
+            $purchaseItem->subtotal_after_discount = $purchaseItem->subtotal - $purchaseItem->subtotal_discount;
+            $purchaseItem->save();
+
+            if ($updateParentSummary) {
+                PurchaseActions::updateSummary($purchaseItem->purchase);
+                $purchaseItem->refresh();
+            }
+
+            $this->flushCache();
+
+            return $purchaseItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseItem $purchaseItem, bool $updateParentSummary): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchase = $purchaseItem->purchase;
+
+            foreach ($purchaseItem->productUnitPriceDiscounts as $purchaseItemPriceDiscount) {
+                $this->purchaseItemProductUnitPriceDiscountActions->delete($purchaseItemPriceDiscount);
+            }
+
+            foreach ($purchaseItem->subtotalDiscounts as $purchaseItemSubtotalDiscount) {
+                $this->purchaseItemSubtotalDiscountActions->delete($purchaseItemSubtotalDiscount);
+            }
+
+            $directReceiptItem = $purchaseItem->directReceiptItem;
+            if ($directReceiptItem) {
+                $this->purchaseReceiptItemActions->delete($directReceiptItem, false);
+            }
+
+            $result = $purchaseItem->delete();
+
+            if ($updateParentSummary) {
+                PurchaseActions::updateSummary($purchase->refresh());
+            }
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseItemProductUnitPriceDiscount/PurchaseItemProductUnitPriceDiscountActions.php b/api/app/Actions/PurchaseItemProductUnitPriceDiscount/PurchaseItemProductUnitPriceDiscountActions.php
new file mode 100644
index 000000000..88a34e84f
--- /dev/null
+++ b/api/app/Actions/PurchaseItemProductUnitPriceDiscount/PurchaseItemProductUnitPriceDiscountActions.php
@@ -0,0 +1,260 @@
+<?php
+
+namespace App\Actions\PurchaseItemProductUnitPriceDiscount;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseItemProductUnitPriceDiscountCreateDTO;
+use App\DTOs\PurchaseItemProductUnitPriceDiscountUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseItemProductUnitPriceDiscount;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseItemProductUnitPriceDiscountActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseItem.purchase.supplier',
+        'purchaseItem.productUnit.unit',
+        'purchaseItem.productUnit.product.category',
+        'purchaseItem.productUnit.product.brand',
+        'purchaseItem.productUnit.product.baseProductUnit.unit',
+        'purchaseItem.productUnit.product.images',
+        'purchaseItem.productUnit.product.mainImage',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $purchaseCode,
+        ?string $purchaseStartDate,
+        ?string $purchaseEndDate,
+        ?int $purchaseSupplierId,
+        ?string $productUnitCode,
+        ?string $productUnitProductName,
+        ?int $productUnitProductCategoryId,
+        ?int $productUnitProductBrandId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseItemProductUnitPriceDiscount::select('purchase_item_product_unit_price_discounts.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_item_product_unit_price_discounts.company_id')
+            ->join('purchase_items', 'purchase_items.id', '=', 'purchase_item_product_unit_price_discounts.purchase_item_id')
+            ->join('purchases', 'purchases.id', '=', 'purchase_items.purchase_id')
+            ->join('product_units', 'product_units.id', '=', 'purchase_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'purchase_items.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('purchase_item_product_unit_price_discounts', $companyId)
+            ->whereBranchId('purchase_item_product_unit_price_discounts', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseCode,
+            $purchaseStartDate,
+            $purchaseEndDate,
+            $purchaseSupplierId,
+            $productUnitCode,
+            $productUnitProductName,
+            $productUnitProductCategoryId,
+            $productUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_item_product_unit_price_discounts.discount_type', 'like', '%'.$search.'%');
+                });
+            }
+
+            $purchaseStartDateUtc = $purchaseStartDate ? TimezoneHelper::convertToUTC($purchaseStartDate) : null;
+            if ($purchaseStartDateUtc) {
+                $query->where('purchases.date', '>=', $purchaseStartDateUtc);
+            }
+
+            $purchaseEndDateUtc = $purchaseEndDate ? TimezoneHelper::convertToUTC($purchaseEndDate) : null;
+            if ($purchaseEndDateUtc) {
+                $query->where('purchases.date', '<=', $purchaseEndDateUtc);
+            }
+
+            if ($purchaseCode) {
+                $query->where('purchases.code', $purchaseCode);
+            }
+
+            if ($purchaseSupplierId) {
+                $query->where('purchases.supplier_id', $purchaseSupplierId);
+            }
+
+            if ($productUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$productUnitCode.'%');
+            }
+
+            if ($productUnitProductName) {
+                $query->where('products.name', 'like', '%'.$productUnitProductName.'%');
+            }
+
+            if ($productUnitProductCategoryId) {
+                $query->where('products.category_id', $productUnitProductCategoryId);
+            }
+
+            if ($productUnitProductBrandId) {
+                $query->where('products.brand_id', $productUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('purchases.date', 'desc')
+            ->orderBy('purchase_items.id', 'asc')
+            ->orderBy('purchase_item_product_unit_price_discounts.sequence', 'asc')
+            ->orderBy('purchase_item_product_unit_price_discounts.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($purchaseCode) ? '[empty]' : $purchaseCode,
+                    $purchaseStartDate ?? '[null]',
+                    $purchaseEndDate ?? '[null]',
+                    $purchaseSupplierId ?? '[null]',
+                    empty($productUnitCode) ? '[empty]' : $productUnitCode,
+                    empty($productUnitProductName) ? '[empty]' : $productUnitProductName,
+                    $productUnitProductCategoryId ?? '[null]',
+                    $productUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_item_product_unit_price_discount_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseItemProductUnitPriceDiscount $purchaseItemPriceDiscount): PurchaseItemProductUnitPriceDiscount
+    {
+        return $purchaseItemPriceDiscount->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseItemProductUnitPriceDiscountCreateDTO $data): PurchaseItemProductUnitPriceDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseItemPriceDiscount = new PurchaseItemProductUnitPriceDiscount();
+            $purchaseItemPriceDiscount->company_id = $data->companyId;
+            $purchaseItemPriceDiscount->branch_id = $data->branchId;
+            $purchaseItemPriceDiscount->purchase_item_id = $data->purchaseItemId;
+            $purchaseItemPriceDiscount->sequence = $data->sequence;
+            $purchaseItemPriceDiscount->discount_type = $data->discountType;
+            $purchaseItemPriceDiscount->discount_value = $data->discountValue;
+            $purchaseItemPriceDiscount->save();
+
+            $this->flushCache();
+
+            return $purchaseItemPriceDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        PurchaseItemProductUnitPriceDiscount $purchaseItemPriceDiscount,
+        PurchaseItemProductUnitPriceDiscountUpdateDTO $data
+    ): PurchaseItemProductUnitPriceDiscount {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseItemPriceDiscount->sequence = $data->sequence;
+            $purchaseItemPriceDiscount->discount_type = $data->discountType;
+            $purchaseItemPriceDiscount->discount_value = $data->discountValue;
+            $purchaseItemPriceDiscount->save();
+
+            $this->flushCache();
+
+            return $purchaseItemPriceDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseItemProductUnitPriceDiscount $purchaseItemPriceDiscount): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $purchaseItemPriceDiscount->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseItemSubtotalDiscount/PurchaseItemSubtotalDiscountActions.php b/api/app/Actions/PurchaseItemSubtotalDiscount/PurchaseItemSubtotalDiscountActions.php
new file mode 100644
index 000000000..8a9c123da
--- /dev/null
+++ b/api/app/Actions/PurchaseItemSubtotalDiscount/PurchaseItemSubtotalDiscountActions.php
@@ -0,0 +1,260 @@
+<?php
+
+namespace App\Actions\PurchaseItemSubtotalDiscount;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseItemSubtotalDiscountCreateDTO;
+use App\DTOs\PurchaseItemSubtotalDiscountUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseItemSubtotalDiscount;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseItemSubtotalDiscountActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseItem.purchase.supplier',
+        'purchaseItem.productUnit.unit',
+        'purchaseItem.productUnit.product.category',
+        'purchaseItem.productUnit.product.brand',
+        'purchaseItem.productUnit.product.baseProductUnit.unit',
+        'purchaseItem.productUnit.product.images',
+        'purchaseItem.productUnit.product.mainImage',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $purchaseCode,
+        ?string $purchaseStartDate,
+        ?string $purchaseEndDate,
+        ?int $purchaseSupplierId,
+        ?string $productUnitCode,
+        ?string $productUnitProductName,
+        ?int $productUnitProductCategoryId,
+        ?int $productUnitProductBrandId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseItemSubtotalDiscount::select('purchase_item_subtotal_discounts.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_item_subtotal_discounts.company_id')
+            ->join('purchase_items', 'purchase_items.id', '=', 'purchase_item_subtotal_discounts.purchase_item_id')
+            ->join('purchases', 'purchases.id', '=', 'purchase_items.purchase_id')
+            ->join('product_units', 'product_units.id', '=', 'purchase_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'purchase_items.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('purchase_item_subtotal_discounts', $companyId)
+            ->whereBranchId('purchase_item_subtotal_discounts', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseCode,
+            $purchaseStartDate,
+            $purchaseEndDate,
+            $purchaseSupplierId,
+            $productUnitCode,
+            $productUnitProductName,
+            $productUnitProductCategoryId,
+            $productUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_item_subtotal_discounts.discount_type', 'like', '%'.$search.'%');
+                });
+            }
+
+            $purchaseStartDateUtc = $purchaseStartDate ? TimezoneHelper::convertToUTC($purchaseStartDate) : null;
+            if ($purchaseStartDateUtc) {
+                $query->where('purchases.date', '>=', $purchaseStartDateUtc);
+            }
+
+            $purchaseEndDateUtc = $purchaseEndDate ? TimezoneHelper::convertToUTC($purchaseEndDate) : null;
+            if ($purchaseEndDateUtc) {
+                $query->where('purchases.date', '<=', $purchaseEndDateUtc);
+            }
+
+            if ($purchaseCode) {
+                $query->where('purchases.code', $purchaseCode);
+            }
+
+            if ($purchaseSupplierId) {
+                $query->where('purchases.supplier_id', $purchaseSupplierId);
+            }
+
+            if ($productUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$productUnitCode.'%');
+            }
+
+            if ($productUnitProductName) {
+                $query->where('products.name', 'like', '%'.$productUnitProductName.'%');
+            }
+
+            if ($productUnitProductCategoryId) {
+                $query->where('products.category_id', $productUnitProductCategoryId);
+            }
+
+            if ($productUnitProductBrandId) {
+                $query->where('products.brand_id', $productUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('purchases.date', 'desc')
+            ->orderBy('purchase_items.id', 'asc')
+            ->orderBy('purchase_item_subtotal_discounts.sequence', 'asc')
+            ->orderBy('purchase_item_subtotal_discounts.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($purchaseCode) ? '[empty]' : $purchaseCode,
+                    $purchaseStartDate ?? '[null]',
+                    $purchaseEndDate ?? '[null]',
+                    $purchaseSupplierId ?? '[null]',
+                    empty($productUnitCode) ? '[empty]' : $productUnitCode,
+                    empty($productUnitProductName) ? '[empty]' : $productUnitProductName,
+                    $productUnitProductCategoryId ?? '[null]',
+                    $productUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_item_subtotal_discount_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseItemSubtotalDiscount $purchaseItemSubtotalDiscount): PurchaseItemSubtotalDiscount
+    {
+        return $purchaseItemSubtotalDiscount->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseItemSubtotalDiscountCreateDTO $data): PurchaseItemSubtotalDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseItemSubtotalDiscount = new PurchaseItemSubtotalDiscount();
+            $purchaseItemSubtotalDiscount->company_id = $data->companyId;
+            $purchaseItemSubtotalDiscount->branch_id = $data->branchId;
+            $purchaseItemSubtotalDiscount->purchase_item_id = $data->purchaseItemId;
+            $purchaseItemSubtotalDiscount->sequence = $data->sequence;
+            $purchaseItemSubtotalDiscount->discount_type = $data->discountType;
+            $purchaseItemSubtotalDiscount->discount_value = $data->discountValue;
+            $purchaseItemSubtotalDiscount->save();
+
+            $this->flushCache();
+
+            return $purchaseItemSubtotalDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        PurchaseItemSubtotalDiscount $purchaseItemSubtotalDiscount,
+        PurchaseItemSubtotalDiscountUpdateDTO $data
+    ): PurchaseItemSubtotalDiscount {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseItemSubtotalDiscount->sequence = $data->sequence;
+            $purchaseItemSubtotalDiscount->discount_type = $data->discountType;
+            $purchaseItemSubtotalDiscount->discount_value = $data->discountValue;
+            $purchaseItemSubtotalDiscount->save();
+
+            $this->flushCache();
+
+            return $purchaseItemSubtotalDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseItemSubtotalDiscount $purchaseItemSubtotalDiscount): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $purchaseItemSubtotalDiscount->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseOrder/PurchaseOrderActions.php b/api/app/Actions/PurchaseOrder/PurchaseOrderActions.php
new file mode 100644
index 000000000..68d3c9483
--- /dev/null
+++ b/api/app/Actions/PurchaseOrder/PurchaseOrderActions.php
@@ -0,0 +1,846 @@
+<?php
+
+namespace App\Actions\PurchaseOrder;
+
+use App\Actions\PurchaseOrderDownPayment\PurchaseOrderDownPaymentActions;
+use App\Actions\PurchaseOrderDownPaymentRefund\PurchaseOrderDownPaymentRefundActions;
+use App\Actions\PurchaseOrderGlobalDiscount\PurchaseOrderGlobalDiscountActions;
+use App\Actions\PurchaseOrderItem\PurchaseOrderItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseOrderCreateDTO;
+use App\DTOs\PurchaseOrderDownPaymentCreateDTO;
+use App\DTOs\PurchaseOrderDownPaymentRefundCreateDTO;
+use App\DTOs\PurchaseOrderDownPaymentRefundUpdateDTO;
+use App\DTOs\PurchaseOrderDownPaymentUpdateDTO;
+use App\DTOs\PurchaseOrderGlobalDiscountCreateDTO;
+use App\DTOs\PurchaseOrderGlobalDiscountUpdateDTO;
+use App\DTOs\PurchaseOrderItemCreateDTO;
+use App\DTOs\PurchaseOrderItemUpdateDTO;
+use App\DTOs\PurchaseOrderUpdateDTO;
+use App\Enums\DiscountTypeEnum;
+use App\Enums\PurchaseProgressStatusEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\Company;
+use App\Models\PurchaseOrder;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseOrderActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'supplier',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'supplier',
+        'globalDiscounts',
+        'items.productUnit.unit',
+        'items.productUnit.product.category',
+        'items.productUnit.product.brand',
+        'items.productUnit.product.baseProductUnit.unit',
+        'items.productUnit.product.images',
+        'items.productUnit.product.mainImage',
+        'items.vatProfile',
+        'items.productUnitPriceDiscounts',
+        'items.subtotalDiscounts',
+        'downPayments.cashAccount',
+        'refundedDownPayments.cashAccount',
+    ];
+
+    private $purchaseOrderItemActions;
+
+    private $purchaseOrderGlobalDiscountActions;
+
+    private $purchaseOrderDownPaymentActions;
+
+    private $purchaseOrderDownPaymentRefundActions;
+
+    public function __construct(
+        PurchaseOrderItemActions $purchaseOrderItemActions,
+        PurchaseOrderGlobalDiscountActions $purchaseOrderGlobalDiscountActions,
+        PurchaseOrderDownPaymentActions $purchaseOrderDownPaymentActions,
+        PurchaseOrderDownPaymentRefundActions $purchaseOrderDownPaymentRefundActions,
+    ) {
+        $this->purchaseOrderItemActions = $purchaseOrderItemActions;
+        $this->purchaseOrderGlobalDiscountActions = $purchaseOrderGlobalDiscountActions;
+        $this->purchaseOrderDownPaymentActions = $purchaseOrderDownPaymentActions;
+        $this->purchaseOrderDownPaymentRefundActions = $purchaseOrderDownPaymentRefundActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $startDate,
+        ?string $endDate,
+        ?int $supplierId,
+        ?string $progressStatus,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseOrder::select('purchase_orders.*');
+
+        if ($execute->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query->join('companies', 'companies.id', '=', 'purchase_orders.company_id')
+            ->whereCompanyId('purchase_orders', $companyId)
+            ->whereBranchId('purchase_orders', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $startDate,
+            $endDate,
+            $supplierId,
+            $progressStatus,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('code', 'like', '%'.$search.'%')
+                        ->orWhere('remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('purchase_orders.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('purchase_orders.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+
+            if ($supplierId) {
+                $query->where('purchase_orders.supplier_id', $supplierId);
+            }
+
+            if ($progressStatus) {
+                $query->where('purchase_orders.progress_status', $progressStatus);
+            }
+        });
+
+        $query->orderBy('purchase_orders.date', 'desc')
+            ->orderBy('purchase_orders.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $supplierId ?? '[null]',
+                    $progressStatus ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_order_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function getProgressStatuses(): array
+    {
+        return PurchaseProgressStatusEnum::toDropDownOptions('views.purchase_order.filters.progress_status_');
+    }
+
+    public function read(PurchaseOrder $purchaseOrder): PurchaseOrder
+    {
+        return $purchaseOrder->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != Config::get('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->purchaseOrders()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'PO'.str_pad($count, 5, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PurchaseOrder::where('company_id', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    private function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function create(PurchaseOrderCreateDTO $data): PurchaseOrder
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrder = new PurchaseOrder();
+            $purchaseOrder->company_id = $data->companyId;
+            $purchaseOrder->branch_id = $data->branchId;
+            $purchaseOrder->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchaseOrder->date = $this->generateDate($data->date);
+            $purchaseOrder->due_days = $data->dueDays;
+            $purchaseOrder->supplier_id = $data->supplierId;
+            $purchaseOrder->remarks = $data->remarks;
+            $purchaseOrder->rounding = $data->rounding;
+            $purchaseOrder->save();
+
+            foreach ($data->items as $item) {
+                $dto = new PurchaseOrderItemCreateDTO(
+                    companyId: $purchaseOrder->company_id,
+                    branchId: $purchaseOrder->branch_id,
+                    purchaseOrderId: $purchaseOrder->id,
+                    qty: $item['qty'],
+                    productUnitId: $item['product_unit_id'],
+                    productUnitConversionValue: $item['product_unit_conversion_value'],
+                    productUnitPrice: $item['product_unit_price'],
+                    productUnitIsPriceIncludeVat: $item['product_unit_is_price_include_vat'],
+                    productUnitPriceDiscounts: $item['product_unit_price_discounts'],
+                    subtotalDiscounts: $item['subtotal_discounts'],
+                    vatProfileId: $item['vat_profile_id'],
+                    vatRate: $item['vat_rate'],
+                    vatBaseNumerator: $item['vat_base_numerator'],
+                    vatBaseDenominator: $item['vat_base_denominator'],
+                    remarks: $item['remarks'],
+                );
+
+                $this->purchaseOrderItemActions->create($dto, false);
+            }
+
+            foreach ($data->globalDiscounts as $globalDiscount) {
+                $dto = new PurchaseOrderGlobalDiscountCreateDTO(
+                    companyId: $purchaseOrder->company_id,
+                    branchId: $purchaseOrder->branch_id,
+                    purchaseOrderId: $purchaseOrder->id,
+                    sequence: $globalDiscount['sequence'],
+                    discountType: $globalDiscount['discount_type'],
+                    discountValue: $globalDiscount['discount_value'],
+                );
+
+                $this->purchaseOrderGlobalDiscountActions->create($dto);
+            }
+
+            foreach ($data->downPayments as $downPayment) {
+                $dto = new PurchaseOrderDownPaymentCreateDTO(
+                    companyId: $purchaseOrder->company_id,
+                    branchId: $purchaseOrder->branch_id,
+                    purchaseOrderId: $purchaseOrder->id,
+                    code: $downPayment['code'],
+                    date: $downPayment['date'],
+                    cashAccountId: $downPayment['cash_account_id'],
+                    amount: $downPayment['amount'],
+                    remarks: $downPayment['remarks'],
+                );
+
+                $this->purchaseOrderDownPaymentActions->create($dto, false);
+            }
+
+            foreach ($data->refundedDownPayments as $refundedDownPayment) {
+                $dto = new PurchaseOrderDownPaymentRefundCreateDTO(
+                    companyId: $purchaseOrder->company_id,
+                    branchId: $purchaseOrder->branch_id,
+                    purchaseOrderId: $purchaseOrder->id,
+                    code: $refundedDownPayment['code'],
+                    date: $refundedDownPayment['date'],
+                    cashAccountId: $refundedDownPayment['cash_account_id'],
+                    amount: $refundedDownPayment['amount'],
+                    remarks: $refundedDownPayment['remarks'],
+                );
+
+                $this->purchaseOrderDownPaymentRefundActions->create($dto, false);
+            }
+
+            self::updateSummary($purchaseOrder);
+
+            $this->flushCache();
+
+            return $purchaseOrder;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseOrder $purchaseOrder, PurchaseOrderUpdateDTO $data): PurchaseOrder
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrder->code = $this->generateUniqueCode($purchaseOrder->company_id, $data->code, $purchaseOrder->id);
+            $purchaseOrder->date = $this->generateDate($data->date);
+            $purchaseOrder->due_days = $data->dueDays;
+            $purchaseOrder->supplier_id = $data->supplierId;
+            $purchaseOrder->remarks = $data->remarks;
+            $purchaseOrder->rounding = $data->rounding;
+            $purchaseOrder->save();
+
+            foreach ($data->deleteGlobalDiscountIds as $deleteId) {
+                $poGlobalDiscount = $purchaseOrder->globalDiscounts()->findOrFail($deleteId);
+                $this->purchaseOrderGlobalDiscountActions->delete($poGlobalDiscount);
+            }
+
+            foreach ($data->globalDiscounts as $globalDiscount) {
+                if (! empty($globalDiscount['id'])) {
+                    $poGlobalDiscount = $purchaseOrder->globalDiscounts()->findOrFail($globalDiscount['id']);
+                    $dto = new PurchaseOrderGlobalDiscountUpdateDTO(
+                        sequence: $globalDiscount['sequence'],
+                        discountType: $globalDiscount['discount_type'],
+                        discountValue: $globalDiscount['discount_value'],
+                    );
+
+                    $this->purchaseOrderGlobalDiscountActions->update($poGlobalDiscount, $dto);
+                } else {
+                    $dto = new PurchaseOrderGlobalDiscountCreateDTO(
+                        companyId: $purchaseOrder->company_id,
+                        branchId: $purchaseOrder->branch_id,
+                        purchaseOrderId: $purchaseOrder->id,
+                        sequence: $globalDiscount['sequence'],
+                        discountType: $globalDiscount['discount_type'],
+                        discountValue: $globalDiscount['discount_value'],
+                    );
+
+                    $this->purchaseOrderGlobalDiscountActions->create($dto);
+                }
+            }
+
+            foreach ($data->deleteItemIds as $deleteId) {
+                $poItem = $purchaseOrder->items()->findOrFail($deleteId);
+                $this->purchaseOrderItemActions->delete($poItem);
+            }
+
+            foreach ($data->items as $item) {
+                if (! empty($item['id'])) {
+                    $poItem = $purchaseOrder->items()->findOrFail($item['id']);
+                    $dto = new PurchaseOrderItemUpdateDTO(
+                        qty: $item['qty'],
+                        productUnitId: $item['product_unit_id'],
+                        productUnitConversionValue: $item['product_unit_conversion_value'],
+                        productUnitPrice: $item['product_unit_price'],
+                        productUnitIsPriceIncludeVat: $item['product_unit_is_price_include_vat'],
+                        deleteProductUnitPriceDiscountIds: $item['delete_product_unit_price_discount_ids'],
+                        productUnitPriceDiscounts: $item['product_unit_price_discounts'],
+                        deleteSubtotalDiscountIds: $item['delete_subtotal_discount_ids'],
+                        subtotalDiscounts: $item['subtotal_discounts'],
+                        vatProfileId: $item['vat_profile_id'],
+                        vatRate: $item['vat_rate'],
+                        vatBaseNumerator: $item['vat_base_numerator'],
+                        vatBaseDenominator: $item['vat_base_denominator'],
+                        remarks: $item['remarks'],
+                    );
+
+                    $this->purchaseOrderItemActions->update($poItem, $dto, false);
+                } else {
+                    $dto = new PurchaseOrderItemCreateDTO(
+                        companyId: $purchaseOrder->company_id,
+                        branchId: $purchaseOrder->branch_id,
+                        purchaseOrderId: $purchaseOrder->id,
+                        qty: $item['qty'],
+                        productUnitId: $item['product_unit_id'],
+                        productUnitConversionValue: $item['product_unit_conversion_value'],
+                        productUnitPrice: $item['product_unit_price'],
+                        productUnitIsPriceIncludeVat: $item['product_unit_is_price_include_vat'],
+                        productUnitPriceDiscounts: $item['product_unit_price_discounts'],
+                        subtotalDiscounts: $item['subtotal_discounts'],
+                        vatProfileId: $item['vat_profile_id'],
+                        vatRate: $item['vat_rate'],
+                        vatBaseNumerator: $item['vat_base_numerator'],
+                        vatBaseDenominator: $item['vat_base_denominator'],
+                        remarks: $item['remarks'],
+                    );
+
+                    $this->purchaseOrderItemActions->create($dto, false);
+                }
+            }
+
+            foreach ($data->deleteDownPaymentIds as $deleteId) {
+                $poDownPayment = $purchaseOrder->downPayments()->findOrFail($deleteId);
+                $this->purchaseOrderDownPaymentActions->delete($poDownPayment);
+            }
+
+            foreach ($data->downPayments as $downPayment) {
+                if (! empty($downPayment['id'])) {
+                    $poDownPayment = $purchaseOrder->downPayments()->findOrFail($downPayment['id']);
+                    $dto = new PurchaseOrderDownPaymentUpdateDTO(
+                        code: $downPayment['code'],
+                        date: $downPayment['date'],
+                        cashAccountId: $downPayment['cash_account_id'],
+                        amount: $downPayment['amount'],
+                        remarks: $downPayment['remarks'],
+                    );
+
+                    $this->purchaseOrderDownPaymentActions->update($poDownPayment, $dto, false);
+                } else {
+                    $dto = new PurchaseOrderDownPaymentCreateDTO(
+                        companyId: $purchaseOrder->company_id,
+                        branchId: $purchaseOrder->branch_id,
+                        purchaseOrderId: $purchaseOrder->id,
+                        code: $downPayment['code'],
+                        date: $downPayment['date'],
+                        cashAccountId: $downPayment['cash_account_id'],
+                        amount: $downPayment['amount'],
+                        remarks: $downPayment['remarks'],
+                    );
+
+                    $this->purchaseOrderDownPaymentActions->create($dto, false);
+                }
+            }
+
+            foreach ($data->deleteRefundedDownPaymentIds as $deleteId) {
+                $poRefundedDownPayment = $purchaseOrder->refundedDownPayments()->findOrFail($deleteId);
+                $this->purchaseOrderDownPaymentRefundActions->delete($poRefundedDownPayment);
+            }
+
+            foreach ($data->refundedDownPayments as $refundedDownPayment) {
+                if (! empty($refundedDownPayment['id'])) {
+                    $poRefundedDownPayment = $purchaseOrder->refundedDownPayments()->findOrFail($refundedDownPayment['id']);
+                    $dto = new PurchaseOrderDownPaymentRefundUpdateDTO(
+                        code: $refundedDownPayment['code'],
+                        date: $refundedDownPayment['date'],
+                        cashAccountId: $refundedDownPayment['cash_account_id'],
+                        amount: $refundedDownPayment['amount'],
+                        remarks: $refundedDownPayment['remarks'],
+                    );
+
+                    $this->purchaseOrderDownPaymentRefundActions->update($poRefundedDownPayment, $dto, false);
+                } else {
+                    $dto = new PurchaseOrderDownPaymentRefundCreateDTO(
+                        companyId: $purchaseOrder->company_id,
+                        branchId: $purchaseOrder->branch_id,
+                        purchaseOrderId: $purchaseOrder->id,
+                        code: $refundedDownPayment['code'],
+                        date: $refundedDownPayment['date'],
+                        cashAccountId: $refundedDownPayment['cash_account_id'],
+                        amount: $refundedDownPayment['amount'],
+                        remarks: $refundedDownPayment['remarks'],
+                    );
+
+                    $this->purchaseOrderDownPaymentRefundActions->create($dto, false);
+                }
+            }
+
+            self::updateSummary($purchaseOrder);
+
+            $this->flushCache();
+
+            return $purchaseOrder;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(PurchaseOrder $po): void
+    {
+        $po->refresh();
+
+        $po->item_total_before_global_discount = $po->items->sum('subtotal_after_discount');
+        $po->global_discount = (function () use ($po) {
+            $beforeDiscount = (float) $po->item_total_before_global_discount;
+            $afterDiscount = $beforeDiscount;
+
+            foreach ($po->globalDiscounts()->orderBy('sequence')->orderBy('id')->get() as $globalDiscount) {
+                $discountType = $globalDiscount->discount_type instanceof DiscountTypeEnum
+                    ? $globalDiscount->discount_type
+                    : DiscountTypeEnum::resolveToEnum($globalDiscount->discount_type);
+                $discountValue = (float) $globalDiscount->discount_value;
+
+                if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                    $afterDiscount -= $afterDiscount * $discountValue / 100;
+                } else {
+                    $afterDiscount -= $discountValue;
+                }
+
+                if ($afterDiscount < 0) {
+                    $afterDiscount = 0;
+                }
+            }
+
+            return $beforeDiscount - $afterDiscount;
+        })();
+
+        foreach ($po->items as $poItem) {
+            $poItem->global_discount = (function () use ($poItem, $po) {
+                $itemTotalBeforeGlobalDiscount = (float) $po->item_total_before_global_discount;
+                $purchaseOrderGlobalDiscount = (float) $po->global_discount;
+
+                if ($itemTotalBeforeGlobalDiscount <= 0 || $purchaseOrderGlobalDiscount <= 0) return 0;
+
+                $value = ((float) $poItem->subtotal_after_discount / $itemTotalBeforeGlobalDiscount) * $purchaseOrderGlobalDiscount;
+
+                return $value < 0 ? 0 : $value;
+            })();
+            $poItem->subtotal_after_global_discount = $poItem->subtotal_after_discount - $poItem->global_discount;
+            $poItem->save();
+        }
+
+        $globalDiscountDifference = round((float) $po->global_discount - (float) $po->items->sum('global_discount'), 8);
+        if (abs($globalDiscountDifference) > 0.00000001) {
+            $lastGlobalDiscountPoItem = $po->items
+                ->filter(fn ($poItem) => (float) $poItem->subtotal_after_discount > 0)
+                ->last();
+
+            if ($lastGlobalDiscountPoItem) {
+                $lastGlobalDiscountPoItem->global_discount = max(
+                    0,
+                    (float) $lastGlobalDiscountPoItem->global_discount + $globalDiscountDifference
+                );
+                $lastGlobalDiscountPoItem->subtotal_after_global_discount = max(
+                    0,
+                    (float) $lastGlobalDiscountPoItem->subtotal_after_discount - (float) $lastGlobalDiscountPoItem->global_discount
+                );
+                $lastGlobalDiscountPoItem->save();
+            }
+        }
+
+        $po->item_total_after_global_discount = (float) $po->items->sum('subtotal_after_global_discount');
+
+        foreach ($po->items as $poItem) {
+            $poItem->vat_base = (function () use ($poItem) {
+                $subtotalAfterGlobalDiscount = (float) $poItem->subtotal_after_global_discount;
+                $vatRate = (float) $poItem->vat_rate;
+                $vatBaseFactor = $poItem->vat_base_denominator > 0
+                    ? (float) $poItem->vat_base_numerator / (float) $poItem->vat_base_denominator
+                    : 0;
+
+                if ($subtotalAfterGlobalDiscount <= 0 || $vatRate <= 0 || $vatBaseFactor <= 0) return 0;
+
+                if ($poItem->product_unit_is_price_include_vat) {
+                    $subtotalAfterGlobalDiscount = $subtotalAfterGlobalDiscount / (1 + ($vatRate / 100));
+                }
+
+                return $subtotalAfterGlobalDiscount * $vatBaseFactor;
+            })();
+            $poItem->vat = (function () use ($poItem) {
+                $vatBase = (float) $poItem->vat_base;
+                $vatRate = (float) $poItem->vat_rate;
+
+                if ($vatBase <= 0 || $vatRate <= 0) return 0;
+
+                $value = $vatBase * ($vatRate / 100);
+
+                return $value < 0 ? 0 : $value;
+            })();
+            $poItem->subtotal_after_vat = (function () use ($poItem) {
+                $subtotalAfterGlobalDiscount = (float) $poItem->subtotal_after_global_discount;
+                $vat = (float) $poItem->vat;
+
+                if ($poItem->product_unit_is_price_include_vat) {
+                    return $subtotalAfterGlobalDiscount;
+                }
+
+                return $subtotalAfterGlobalDiscount + $vat;
+            })();
+            $poItem->save();
+        }
+
+        $po->vat_base = (float) $po->items->sum('vat_base');
+        $po->vat = (float) $po->items->sum('vat');
+        $po->item_total_after_vat = (float) $po->items->sum('subtotal_after_vat');
+
+        foreach ($po->items as $poItem) {
+            $poItem->rounding = (function () use ($poItem, $po) {
+                $poItemSubtotalAfterVat = (float) $poItem->subtotal_after_vat;
+                $itemTotalAfterVat = (float) $po->item_total_after_vat;
+                $purchaseOrderRounding = (float) $po->rounding;
+
+                if ($itemTotalAfterVat <= 0 || $purchaseOrderRounding == 0 || $poItemSubtotalAfterVat <= 0) return 0;
+
+                return ($poItemSubtotalAfterVat / $itemTotalAfterVat) * $purchaseOrderRounding;
+            })();
+            $poItem->amount_payable = (function () use ($poItem) {
+                return (float) $poItem->subtotal_after_vat + (float) $poItem->rounding;
+            })();
+            $poItem->cogs = (function () use ($poItem) {
+                $qty = (float) $poItem->qty;
+                $amountPayable = (float) $poItem->amount_payable;
+
+                if ($qty <= 0 || $amountPayable <= 0) return 0;
+
+                return $amountPayable / $qty;
+            })();
+            $poItem->total_cogs = (function () use ($poItem) {
+                $qty = (float) $poItem->qty;
+                $cogs = (float) $poItem->cogs;
+
+                if ($qty <= 0 || $cogs <= 0) return 0;
+
+                return $qty * $cogs;
+            })();
+            $poItem->base_unit_cogs = (function () use ($poItem) {
+                $productUnitQtyBase = (float) $poItem->product_unit_qty_base;
+                $totalCogs = (float) $poItem->total_cogs;
+
+                if ($productUnitQtyBase <= 0 || $totalCogs <= 0) return 0;
+
+                return $totalCogs / $productUnitQtyBase;
+            })();
+            $poItem->save();
+        }
+
+        $roundingDifference = round((float) $po->rounding - (float) $po->items->sum('rounding'), 8);
+        if (abs($roundingDifference) > 0.00000001) {
+            $lastRoundingPoItem = $po->items
+                ->filter(fn ($poItem) => (float) $poItem->subtotal_after_vat > 0)
+                ->last();
+
+            if ($lastRoundingPoItem) {
+                $lastRoundingPoItem->rounding = (float) $lastRoundingPoItem->rounding + $roundingDifference;
+                $lastRoundingPoItem->amount_payable = (float) $lastRoundingPoItem->subtotal_after_vat
+                    + (float) $lastRoundingPoItem->rounding;
+                $lastRoundingPoItem->cogs = (function () use ($lastRoundingPoItem) {
+                    $qty = (float) $lastRoundingPoItem->qty;
+                    $amountPayable = (float) $lastRoundingPoItem->amount_payable;
+
+                    if ($qty <= 0 || $amountPayable <= 0) return 0;
+
+                    return $amountPayable / $qty;
+                })();
+                $lastRoundingPoItem->total_cogs = (function () use ($lastRoundingPoItem) {
+                    $qty = (float) $lastRoundingPoItem->qty;
+                    $cogs = (float) $lastRoundingPoItem->cogs;
+
+                    if ($qty <= 0 || $cogs <= 0) return 0;
+
+                    return $qty * $cogs;
+                })();
+                $lastRoundingPoItem->base_unit_cogs = (function () use ($lastRoundingPoItem) {
+                    $productUnitQtyBase = (float) $lastRoundingPoItem->product_unit_qty_base;
+                    $totalCogs = (float) $lastRoundingPoItem->total_cogs;
+
+                    if ($productUnitQtyBase <= 0 || $totalCogs <= 0) return 0;
+
+                    return $totalCogs / $productUnitQtyBase;
+                })();
+                $lastRoundingPoItem->save();
+            }
+        }
+
+        $po->amount_payable = (float) $po->items->sum('amount_payable');
+        $po->amount_paid_down_payment = $po->downPayments->sum('amount');
+        $po->amount_allocated_down_payment = $po->downPayments->sum('amount_allocated');
+        $po->amount_refunded_down_payment = $po->refundedDownPayments->sum('amount');
+        $po->amount_available_down_payment = $po->amount_paid_down_payment - $po->amount_allocated_down_payment - $po->amount_refunded_down_payment;
+        foreach ($po->items as $poItem) {
+            $qtyTargetBase = (float) $poItem->product_unit_qty_base;
+            $poItem->qty_purchased_base = (float) $po->purchaseItems()
+                ->where('product_id', $poItem->product_id)
+                ->sum('product_unit_qty_base');
+            $poItem->qty_outstanding_base = max($qtyTargetBase - $poItem->qty_purchased_base, 0);
+            $poItem->qty_excess_base = max($poItem->qty_purchased_base - $qtyTargetBase, 0);
+            $poItem->save();
+        }
+
+        $po->item_total_count = (function () use ($po) {
+            return $po->items()->count();
+        })();
+        $po->item_matched_count = (function () use ($po) {
+            $itemMatchedCount = 0;
+
+            foreach ($po->items as $poItem) {
+                if (! $po->purchaseItems()->where('product_id', $poItem->product_id)->exists()) {
+                    continue;
+                }
+
+                if ((float) $poItem->qty_excess_base > 0) {
+                    continue;
+                }
+
+                if ((float) $poItem->qty_outstanding_base > 0) {
+                    continue;
+                }
+
+                $itemMatchedCount++;
+            }
+
+            return $itemMatchedCount;
+        })();
+        $po->item_less_count = (function () use ($po) {
+            $itemLessCount = 0;
+
+            foreach ($po->items as $poItem) {
+                if (! $po->purchaseItems()->where('product_id', $poItem->product_id)->exists()) {
+                    continue;
+                }
+
+                if ((float) $poItem->qty_excess_base > 0) {
+                    continue;
+                }
+
+                if ((float) $poItem->qty_outstanding_base > 0) {
+                    $itemLessCount++;
+                }
+            }
+
+            return $itemLessCount;
+        })();
+        $po->item_more_count = (function () use ($po) {
+            $itemMoreCount = 0;
+
+            foreach ($po->items as $poItem) {
+                if (! $po->purchaseItems()->where('product_id', $poItem->product_id)->exists()) {
+                    continue;
+                }
+
+                if ((float) $poItem->qty_excess_base > 0) {
+                    $itemMoreCount++;
+                }
+            }
+
+            return $itemMoreCount;
+        })();
+        $po->item_unlinked_count = (function () use ($po) {
+            $itemUnlinkedCount = 0;
+
+            foreach ($po->items as $poItem) {
+                if (! $po->purchaseItems()->where('product_id', $poItem->product_id)->exists()) {
+                    $itemUnlinkedCount++;
+                }
+            }
+
+            return $itemUnlinkedCount;
+        })();
+        $po->progress_status = (function () use ($po) {
+            if ($po->item_total_count === 0) {
+                return PurchaseProgressStatusEnum::UNLINKED;
+            }
+
+            if ($po->item_unlinked_count === $po->item_total_count) {
+                return PurchaseProgressStatusEnum::UNLINKED;
+            }
+
+            if ($po->item_matched_count === $po->item_total_count) {
+                return PurchaseProgressStatusEnum::MATCHED;
+            }
+
+            return PurchaseProgressStatusEnum::UNMATCHED;
+        })();
+
+        $purchaseOrderProductIds = $po->items()->distinct()->pluck('product_id')->filter()->values()->all();
+        $po->purchaseItems()->whereIn('product_id', $purchaseOrderProductIds)->update(['has_purchase_order_item_product' => true]);
+        $po->purchaseItems()->whereNotIn('product_id', $purchaseOrderProductIds)->update(['has_purchase_order_item_product' => false]);
+
+        $po->save();
+    }
+
+    public function delete(PurchaseOrder $purchaseOrder): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            foreach ($purchaseOrder->items as $poItem) {
+                $this->purchaseOrderItemActions->delete($poItem);
+            }
+
+            foreach ($purchaseOrder->globalDiscounts as $poGlobalDiscount) {
+                $this->purchaseOrderGlobalDiscountActions->delete($poGlobalDiscount);
+            }
+
+            foreach ($purchaseOrder->downPayments as $poDownPayment) {
+                $this->purchaseOrderDownPaymentActions->delete($poDownPayment);
+            }
+
+            foreach ($purchaseOrder->refundedDownPayments as $poRefundedDownPayment) {
+                $this->purchaseOrderDownPaymentRefundActions->delete($poRefundedDownPayment);
+            }
+
+            $result = $purchaseOrder->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseOrderDownPayment/PurchaseOrderDownPaymentActions.php b/api/app/Actions/PurchaseOrderDownPayment/PurchaseOrderDownPaymentActions.php
new file mode 100644
index 000000000..f35ce47b4
--- /dev/null
+++ b/api/app/Actions/PurchaseOrderDownPayment/PurchaseOrderDownPaymentActions.php
@@ -0,0 +1,339 @@
+<?php
+
+namespace App\Actions\PurchaseOrderDownPayment;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\PurchaseOrder\PurchaseOrderActions;
+use App\Actions\PurchaseOrderDownPaymentAllocation\PurchaseOrderDownPaymentAllocationActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseOrderDownPaymentCreateDTO;
+use App\DTOs\PurchaseOrderDownPaymentUpdateDTO;
+use App\Enums\PurchaseOrderDownPaymentAllocationStatusEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseOrderDownPayment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseOrderDownPaymentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseOrder.supplier',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private CashTransactionActions $cashTransactionActions,
+        private PurchaseOrderDownPaymentAllocationActions $purchaseOrderDownPaymentAllocationActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $startDate,
+        ?string $endDate,
+        ?int $purchaseOrderId,
+        ?int $supplierId,
+        ?int $cashAccountId,
+        ?string $allocationStatus,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseOrderDownPayment::select('purchase_order_down_payments.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_order_down_payments.company_id')
+            ->join('purchase_orders', 'purchase_orders.id', '=', 'purchase_order_down_payments.purchase_order_id')
+            ->whereCompanyId('purchase_order_down_payments', $companyId)
+            ->whereBranchId('purchase_order_down_payments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $startDate, $endDate, $purchaseOrderId, $supplierId, $cashAccountId, $allocationStatus) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_order_down_payments.code', 'like', '%'.$search.'%')
+                        ->orWhere('purchase_order_down_payments.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('purchase_order_down_payments.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('purchase_order_down_payments.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+
+            if ($purchaseOrderId) {
+                $query->where('purchase_order_down_payments.purchase_order_id', $purchaseOrderId);
+            }
+
+            if ($supplierId) {
+                $query->where('purchase_orders.supplier_id', $supplierId);
+            }
+
+            if ($cashAccountId) {
+                $query->where('purchase_order_down_payments.cash_account_id', $cashAccountId);
+            }
+
+            if ($allocationStatus === PurchaseOrderDownPaymentAllocationStatusEnum::NOT_FULLY_ALLOCATED->value) {
+                $query->whereColumn('purchase_order_down_payments.amount_allocated', '<', 'purchase_order_down_payments.amount');
+            }
+
+            if ($allocationStatus === PurchaseOrderDownPaymentAllocationStatusEnum::FULLY_ALLOCATED->value) {
+                $query->whereColumn('purchase_order_down_payments.amount_allocated', '>=', 'purchase_order_down_payments.amount')
+                    ->where('purchase_order_down_payments.amount', '>', 0);
+            }
+        });
+
+        $query->orderBy('purchase_order_down_payments.date', 'desc')
+            ->orderBy('purchase_order_down_payments.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $purchaseOrderId ?? '[null]',
+                    $supplierId ?? '[null]',
+                    $cashAccountId ?? '[null]',
+                    $allocationStatus ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_order_down_payment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function getAllocationStatuses(): array
+    {
+        return [
+            [
+                'name' => 'views.purchase_order.filters.down_payment_allocation_status_not_fully_allocated',
+                'code' => PurchaseOrderDownPaymentAllocationStatusEnum::NOT_FULLY_ALLOCATED->value,
+            ],
+            [
+                'name' => 'views.purchase_order.filters.down_payment_allocation_status_fully_allocated',
+                'code' => PurchaseOrderDownPaymentAllocationStatusEnum::FULLY_ALLOCATED->value,
+            ],
+        ];
+    }
+
+    public function read(PurchaseOrderDownPayment $purchaseOrderDownPayment): PurchaseOrderDownPayment
+    {
+        return $purchaseOrderDownPayment->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = PurchaseOrderDownPayment::whereCompanyId('purchase_order_down_payments', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'PODP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        } else {
+            return $code;
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PurchaseOrderDownPayment::whereCompanyId('purchase_order_down_payments', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(
+        PurchaseOrderDownPaymentCreateDTO $data,
+        bool $updateParentSummary,
+    ): PurchaseOrderDownPayment {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrderDownPayment = new PurchaseOrderDownPayment();
+            $purchaseOrderDownPayment->company_id = $data->companyId;
+            $purchaseOrderDownPayment->branch_id = $data->branchId;
+            $purchaseOrderDownPayment->purchase_order_id = $data->purchaseOrderId;
+            $purchaseOrderDownPayment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchaseOrderDownPayment->date = $this->generateDate($data->date);
+            $purchaseOrderDownPayment->cash_account_id = $data->cashAccountId;
+            $purchaseOrderDownPayment->amount = $data->amount;
+            $purchaseOrderDownPayment->remarks = $data->remarks;
+            $purchaseOrderDownPayment->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromPurchaseOrderDownPayment($purchaseOrderDownPayment)
+            );
+
+            if ($updateParentSummary) {
+                $purchaseOrder = $purchaseOrderDownPayment->purchaseOrder;
+                PurchaseOrderActions::updateSummary($purchaseOrder);
+                $purchaseOrderDownPayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $purchaseOrderDownPayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        PurchaseOrderDownPayment $purchaseOrderDownPayment,
+        PurchaseOrderDownPaymentUpdateDTO $data,
+        bool $updateParentSummary,
+    ): PurchaseOrderDownPayment {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrderDownPayment->code = $this->generateUniqueCode($purchaseOrderDownPayment->company_id, $data->code, $purchaseOrderDownPayment->id);
+            $purchaseOrderDownPayment->date = $this->generateDate($data->date);
+            $purchaseOrderDownPayment->cash_account_id = $data->cashAccountId;
+            $purchaseOrderDownPayment->amount = $data->amount;
+            $purchaseOrderDownPayment->remarks = $data->remarks;
+            $purchaseOrderDownPayment->save();
+
+            $cashTransaction = $purchaseOrderDownPayment->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromPurchaseOrderDownPayment($purchaseOrderDownPayment)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromPurchaseOrderDownPayment($purchaseOrderDownPayment)
+                );
+            }
+
+            if ($updateParentSummary) {
+                $purchaseOrder = $purchaseOrderDownPayment->purchaseOrder;
+                PurchaseOrderActions::updateSummary($purchaseOrder);
+                $purchaseOrderDownPayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $purchaseOrderDownPayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseOrderDownPayment $purchaseOrderDownPayment): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            foreach ($purchaseOrderDownPayment->allocations as $allocation) {
+                $this->purchaseOrderDownPaymentAllocationActions->delete($allocation);
+            }
+
+            $cashTransaction = $purchaseOrderDownPayment->cashTransaction;
+            if ($cashTransaction) $this->cashTransactionActions->delete($cashTransaction);
+
+            $retval = $purchaseOrderDownPayment->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseOrderDownPaymentAllocation/PurchaseOrderDownPaymentAllocationActions.php b/api/app/Actions/PurchaseOrderDownPaymentAllocation/PurchaseOrderDownPaymentAllocationActions.php
new file mode 100644
index 000000000..b1aee00c0
--- /dev/null
+++ b/api/app/Actions/PurchaseOrderDownPaymentAllocation/PurchaseOrderDownPaymentAllocationActions.php
@@ -0,0 +1,270 @@
+<?php
+
+namespace App\Actions\PurchaseOrderDownPaymentAllocation;
+
+use App\Actions\PurchaseOrder\PurchaseOrderActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseOrderDownPaymentAllocationCreateDTO;
+use App\DTOs\PurchaseOrderDownPaymentAllocationUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseOrderDownPaymentAllocation;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseOrderDownPaymentAllocationActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseOrderDownPayment.purchaseOrder.supplier',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $startDate,
+        ?string $endDate,
+        ?int $purchaseOrderDownPaymentId,
+        ?int $purchaseId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseOrderDownPaymentAllocation::select('purchase_order_down_payment_allocations.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_order_down_payment_allocations.company_id')
+            ->join(
+                'purchase_order_down_payments',
+                'purchase_order_down_payments.id',
+                '=',
+                'purchase_order_down_payment_allocations.purchase_order_down_payment_id'
+            )
+            ->join('purchase_orders', 'purchase_orders.id', '=', 'purchase_order_down_payments.purchase_order_id')
+            ->whereCompanyId('purchase_order_down_payment_allocations', $companyId)
+            ->whereBranchId('purchase_order_down_payment_allocations', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $startDate,
+            $endDate,
+            $purchaseOrderDownPaymentId,
+            $purchaseId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_order_down_payment_allocations.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('purchase_order_down_payment_allocations.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('purchase_order_down_payment_allocations.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+
+            if ($purchaseOrderDownPaymentId) {
+                $query->where('purchase_order_down_payment_allocations.purchase_order_down_payment_id', $purchaseOrderDownPaymentId);
+            }
+
+            if ($purchaseId) {
+                $query->where('purchase_order_down_payment_allocations.purchase_id', $purchaseId);
+            }
+        });
+
+        $query->orderBy('purchase_order_down_payment_allocations.date', 'desc')
+            ->orderBy('purchase_order_down_payment_allocations.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $purchaseOrderDownPaymentId ?? '[null]',
+                    $purchaseId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_order_down_payment_allocation_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseOrderDownPaymentAllocation $purchaseOrderDownPaymentAllocation): PurchaseOrderDownPaymentAllocation
+    {
+        return $purchaseOrderDownPaymentAllocation->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function create(PurchaseOrderDownPaymentAllocationCreateDTO $data): PurchaseOrderDownPaymentAllocation
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrderDownPaymentAllocation = new PurchaseOrderDownPaymentAllocation();
+            $purchaseOrderDownPaymentAllocation->company_id = $data->companyId;
+            $purchaseOrderDownPaymentAllocation->branch_id = $data->branchId;
+            $purchaseOrderDownPaymentAllocation->purchase_order_down_payment_id = $data->purchaseOrderDownPaymentId;
+            $purchaseOrderDownPaymentAllocation->purchase_id = $data->purchaseId;
+            $purchaseOrderDownPaymentAllocation->date = $this->generateDate($data->date);
+            $purchaseOrderDownPaymentAllocation->amount = $data->amount;
+            $purchaseOrderDownPaymentAllocation->remarks = $data->remarks;
+            $purchaseOrderDownPaymentAllocation->save();
+
+            $poDownPayment = $purchaseOrderDownPaymentAllocation->purchaseOrderDownPayment;
+            if ($poDownPayment) {
+                $poDownPayment->amount_allocated = (float) $poDownPayment->allocations()->sum('amount');
+                $poDownPayment->save();
+                PurchaseOrderActions::updateSummary($poDownPayment->purchaseOrder);
+                $purchaseOrderDownPaymentAllocation->refresh();
+            }
+
+            $this->flushCache();
+
+            return $purchaseOrderDownPaymentAllocation;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        PurchaseOrderDownPaymentAllocation $poDownPaymentAllocation,
+        PurchaseOrderDownPaymentAllocationUpdateDTO $data,
+    ): PurchaseOrderDownPaymentAllocation {
+        $timer_start = microtime(true);
+
+        try {
+            $originalPoDownPayment = $poDownPaymentAllocation->purchaseOrderDownPayment;
+
+            $poDownPaymentAllocation->purchase_order_down_payment_id = $data->purchaseOrderDownPaymentId;
+            $poDownPaymentAllocation->purchase_id = $data->purchaseId;
+            $poDownPaymentAllocation->date = $this->generateDate($data->date);
+            $poDownPaymentAllocation->amount = $data->amount;
+            $poDownPaymentAllocation->remarks = $data->remarks;
+            $poDownPaymentAllocation->save();
+
+            if ($originalPoDownPayment) {
+                $originalPoDownPayment->amount_allocated = (float) $originalPoDownPayment->allocations()->sum('amount');
+                $originalPoDownPayment->save();
+                PurchaseOrderActions::updateSummary($originalPoDownPayment->purchaseOrder);
+            }
+
+            $poDownPaymentAllocation->refresh();
+            $newPoDownPayment = $poDownPaymentAllocation->purchaseOrderDownPayment;
+            if ($newPoDownPayment && $originalPoDownPayment?->id !== $newPoDownPayment->id) {
+                $newPoDownPayment->amount_allocated = (float) $newPoDownPayment->allocations()->sum('amount');
+                $newPoDownPayment->save();
+                PurchaseOrderActions::updateSummary($newPoDownPayment->purchaseOrder);
+            }
+
+            $this->flushCache();
+
+            return $poDownPaymentAllocation;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseOrderDownPaymentAllocation $purchaseOrderDownPaymentAllocation): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $poDownPayment = $purchaseOrderDownPaymentAllocation->purchaseOrderDownPayment;
+            $result = $purchaseOrderDownPaymentAllocation->delete();
+
+            if ($poDownPayment) {
+                $poDownPayment->amount_allocated = (float) $poDownPayment->allocations()->sum('amount');
+                $poDownPayment->save();
+
+                PurchaseOrderActions::updateSummary($poDownPayment->purchaseOrder);
+            }
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseOrderDownPaymentRefund/PurchaseOrderDownPaymentRefundActions.php b/api/app/Actions/PurchaseOrderDownPaymentRefund/PurchaseOrderDownPaymentRefundActions.php
new file mode 100644
index 000000000..6a731e3f4
--- /dev/null
+++ b/api/app/Actions/PurchaseOrderDownPaymentRefund/PurchaseOrderDownPaymentRefundActions.php
@@ -0,0 +1,305 @@
+<?php
+
+namespace App\Actions\PurchaseOrderDownPaymentRefund;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\PurchaseOrder\PurchaseOrderActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseOrderDownPaymentRefundCreateDTO;
+use App\DTOs\PurchaseOrderDownPaymentRefundUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseOrderDownPaymentRefund;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseOrderDownPaymentRefundActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseOrder.supplier',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private CashTransactionActions $cashTransactionActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $startDate,
+        ?string $endDate,
+        ?int $purchaseOrderId,
+        ?int $supplierId,
+        ?int $cashAccountId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseOrderDownPaymentRefund::select('purchase_order_down_payment_refunds.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_order_down_payment_refunds.company_id')
+            ->join('purchase_orders', 'purchase_orders.id', '=', 'purchase_order_down_payment_refunds.purchase_order_id')
+            ->whereCompanyId('purchase_order_down_payment_refunds', $companyId)
+            ->whereBranchId('purchase_order_down_payment_refunds', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $startDate, $endDate, $purchaseOrderId, $supplierId, $cashAccountId) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_order_down_payment_refunds.code', 'like', '%'.$search.'%')
+                        ->orWhere('purchase_order_down_payment_refunds.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('purchase_order_down_payment_refunds.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('purchase_order_down_payment_refunds.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+
+            if ($purchaseOrderId) {
+                $query->where('purchase_order_down_payment_refunds.purchase_order_id', $purchaseOrderId);
+            }
+
+            if ($supplierId) {
+                $query->where('purchase_orders.supplier_id', $supplierId);
+            }
+
+            if ($cashAccountId) {
+                $query->where('purchase_order_down_payment_refunds.cash_account_id', $cashAccountId);
+            }
+        });
+
+        $query->orderBy('purchase_order_down_payment_refunds.date', 'desc')
+            ->orderBy('purchase_order_down_payment_refunds.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $purchaseOrderId ?? '[null]',
+                    $supplierId ?? '[null]',
+                    $cashAccountId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_order_down_payment_refund_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund): PurchaseOrderDownPaymentRefund
+    {
+        return $purchaseOrderDownPaymentRefund->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = PurchaseOrderDownPaymentRefund::whereCompanyId('purchase_order_down_payment_refunds', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'PODPR'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        } else {
+            return $code;
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PurchaseOrderDownPaymentRefund::whereCompanyId('purchase_order_down_payment_refunds', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(
+        PurchaseOrderDownPaymentRefundCreateDTO $data,
+        bool $updateParentSummary,
+    ): PurchaseOrderDownPaymentRefund {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrderDownPaymentRefund = new PurchaseOrderDownPaymentRefund();
+            $purchaseOrderDownPaymentRefund->company_id = $data->companyId;
+            $purchaseOrderDownPaymentRefund->branch_id = $data->branchId;
+            $purchaseOrderDownPaymentRefund->purchase_order_id = $data->purchaseOrderId;
+            $purchaseOrderDownPaymentRefund->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchaseOrderDownPaymentRefund->date = $this->generateDate($data->date);
+            $purchaseOrderDownPaymentRefund->cash_account_id = $data->cashAccountId;
+            $purchaseOrderDownPaymentRefund->amount = $data->amount;
+            $purchaseOrderDownPaymentRefund->remarks = $data->remarks;
+            $purchaseOrderDownPaymentRefund->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromPurchaseOrderDownPaymentRefund($purchaseOrderDownPaymentRefund)
+            );
+
+            if ($updateParentSummary) {
+                $purchaseOrder = $purchaseOrderDownPaymentRefund->purchaseOrder;
+                PurchaseOrderActions::updateSummary($purchaseOrder);
+                $purchaseOrderDownPaymentRefund->refresh();
+            }
+
+            $this->flushCache();
+
+            return $purchaseOrderDownPaymentRefund;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund,
+        PurchaseOrderDownPaymentRefundUpdateDTO $data,
+        bool $updateParentSummary,
+    ): PurchaseOrderDownPaymentRefund {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrderDownPaymentRefund->code = $this->generateUniqueCode($purchaseOrderDownPaymentRefund->company_id, $data->code, $purchaseOrderDownPaymentRefund->id);
+            $purchaseOrderDownPaymentRefund->date = $this->generateDate($data->date);
+            $purchaseOrderDownPaymentRefund->cash_account_id = $data->cashAccountId;
+            $purchaseOrderDownPaymentRefund->amount = $data->amount;
+            $purchaseOrderDownPaymentRefund->remarks = $data->remarks;
+            $purchaseOrderDownPaymentRefund->save();
+
+            $cashTransaction = $purchaseOrderDownPaymentRefund->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromPurchaseOrderDownPaymentRefund($purchaseOrderDownPaymentRefund)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromPurchaseOrderDownPaymentRefund($purchaseOrderDownPaymentRefund)
+                );
+            }
+
+            if ($updateParentSummary) {
+                $purchaseOrder = $purchaseOrderDownPaymentRefund->purchaseOrder;
+                PurchaseOrderActions::updateSummary($purchaseOrder);
+                $purchaseOrderDownPaymentRefund->refresh();
+            }
+
+            $this->flushCache();
+
+            return $purchaseOrderDownPaymentRefund;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $purchaseOrderDownPaymentRefund->cashTransaction;
+            if ($cashTransaction) $this->cashTransactionActions->delete($cashTransaction);
+
+            $retval = $purchaseOrderDownPaymentRefund->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseOrderGlobalDiscount/PurchaseOrderGlobalDiscountActions.php b/api/app/Actions/PurchaseOrderGlobalDiscount/PurchaseOrderGlobalDiscountActions.php
new file mode 100644
index 000000000..ec8acad9d
--- /dev/null
+++ b/api/app/Actions/PurchaseOrderGlobalDiscount/PurchaseOrderGlobalDiscountActions.php
@@ -0,0 +1,218 @@
+<?php
+
+namespace App\Actions\PurchaseOrderGlobalDiscount;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseOrderGlobalDiscountCreateDTO;
+use App\DTOs\PurchaseOrderGlobalDiscountUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseOrderGlobalDiscount;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseOrderGlobalDiscountActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseOrder.supplier',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?string $purchaseOrderCode,
+        ?string $purchaseOrderStartDate,
+        ?string $purchaseOrderEndDate,
+        ?int $purchaseOrderSupplierId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseOrderGlobalDiscount::select('purchase_order_global_discounts.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_order_global_discounts.company_id')
+            ->join('purchase_orders', 'purchase_orders.id', '=', 'purchase_order_global_discounts.purchase_order_id')
+            ->whereCompanyId('purchase_order_global_discounts', $companyId)
+            ->whereBranchId('purchase_order_global_discounts', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseOrderCode,
+            $purchaseOrderStartDate,
+            $purchaseOrderEndDate,
+            $purchaseOrderSupplierId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_order_global_discounts.discount_type', 'like', '%'.$search.'%');
+                });
+            }
+
+            $purchaseOrderStartDateUtc = $purchaseOrderStartDate ? TimezoneHelper::convertToUTC($purchaseOrderStartDate) : null;
+            if ($purchaseOrderStartDateUtc) {
+                $query->where('purchase_orders.date', '>=', $purchaseOrderStartDateUtc);
+            }
+
+            $purchaseOrderEndDateUtc = $purchaseOrderEndDate ? TimezoneHelper::convertToUTC($purchaseOrderEndDate) : null;
+            if ($purchaseOrderEndDateUtc) {
+                $query->where('purchase_orders.date', '<=', $purchaseOrderEndDateUtc);
+            }
+
+            if ($purchaseOrderCode) {
+                $query->where('purchase_orders.code', $purchaseOrderCode);
+            }
+
+            if ($purchaseOrderSupplierId) {
+                $query->where('purchase_orders.supplier_id', $purchaseOrderSupplierId);
+            }
+        });
+
+        $query->orderBy('purchase_orders.date', 'desc')
+            ->orderBy('purchase_order_global_discounts.sequence', 'asc')
+            ->orderBy('purchase_order_global_discounts.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($purchaseOrderCode) ? '[empty]' : $purchaseOrderCode,
+                    $purchaseOrderStartDate ?? '[null]',
+                    $purchaseOrderEndDate ?? '[null]',
+                    $purchaseOrderSupplierId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_order_global_discount_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseOrderGlobalDiscount $purchaseOrderGlobalDiscount): PurchaseOrderGlobalDiscount
+    {
+        return $purchaseOrderGlobalDiscount->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseOrderGlobalDiscountCreateDTO $data): PurchaseOrderGlobalDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrderGlobalDiscount = new PurchaseOrderGlobalDiscount();
+            $purchaseOrderGlobalDiscount->company_id = $data->companyId;
+            $purchaseOrderGlobalDiscount->branch_id = $data->branchId;
+            $purchaseOrderGlobalDiscount->purchase_order_id = $data->purchaseOrderId;
+            $purchaseOrderGlobalDiscount->sequence = $data->sequence;
+            $purchaseOrderGlobalDiscount->discount_type = $data->discountType;
+            $purchaseOrderGlobalDiscount->discount_value = $data->discountValue;
+            $purchaseOrderGlobalDiscount->save();
+
+            $this->flushCache();
+
+            return $purchaseOrderGlobalDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseOrderGlobalDiscount $purchaseOrderGlobalDiscount, PurchaseOrderGlobalDiscountUpdateDTO $data): PurchaseOrderGlobalDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseOrderGlobalDiscount->sequence = $data->sequence;
+            $purchaseOrderGlobalDiscount->discount_type = $data->discountType;
+            $purchaseOrderGlobalDiscount->discount_value = $data->discountValue;
+            $purchaseOrderGlobalDiscount->save();
+
+            $this->flushCache();
+
+            return $purchaseOrderGlobalDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseOrderGlobalDiscount $purchaseOrderGlobalDiscount): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $purchaseOrderGlobalDiscount->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseOrderItem/PurchaseOrderItemActions.php b/api/app/Actions/PurchaseOrderItem/PurchaseOrderItemActions.php
new file mode 100644
index 000000000..cc498739e
--- /dev/null
+++ b/api/app/Actions/PurchaseOrderItem/PurchaseOrderItemActions.php
@@ -0,0 +1,507 @@
+<?php
+
+namespace App\Actions\PurchaseOrderItem;
+
+use App\Actions\PurchaseOrder\PurchaseOrderActions;
+use App\Actions\PurchaseOrderItemProductUnitPriceDiscount\PurchaseOrderItemProductUnitPriceDiscountActions;
+use App\Actions\PurchaseOrderItemSubtotalDiscount\PurchaseOrderItemSubtotalDiscountActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseOrderItemCreateDTO;
+use App\DTOs\PurchaseOrderItemProductUnitPriceDiscountCreateDTO;
+use App\DTOs\PurchaseOrderItemProductUnitPriceDiscountUpdateDTO;
+use App\DTOs\PurchaseOrderItemSubtotalDiscountCreateDTO;
+use App\DTOs\PurchaseOrderItemSubtotalDiscountUpdateDTO;
+use App\DTOs\PurchaseOrderItemUpdateDTO;
+use App\Enums\DiscountTypeEnum;
+use App\Helpers\TimezoneHelper;
+use App\Models\ProductUnit;
+use App\Models\PurchaseOrderItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseOrderItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseOrder.supplier',
+        'productUnit.unit',
+        'productUnit.product.category',
+        'productUnit.product.brand',
+        'productUnit.product.baseProductUnit.unit',
+        'productUnit.product.images',
+        'productUnit.product.mainImage',
+        'vatProfile',
+        'productUnitPriceDiscounts',
+        'subtotalDiscounts',
+    ];
+
+    private $purchaseOrderItemProductUnitPriceDiscountActions;
+
+    private $purchaseOrderItemSubtotalDiscountActions;
+
+    public function __construct(
+        PurchaseOrderItemProductUnitPriceDiscountActions $purchaseOrderItemProductUnitPriceDiscountActions,
+        PurchaseOrderItemSubtotalDiscountActions $purchaseOrderItemSubtotalDiscountActions,
+    ) {
+        $this->purchaseOrderItemProductUnitPriceDiscountActions = $purchaseOrderItemProductUnitPriceDiscountActions;
+        $this->purchaseOrderItemSubtotalDiscountActions = $purchaseOrderItemSubtotalDiscountActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $purchaseOrderCode,
+        ?string $purchaseOrderStartDate,
+        ?string $purchaseOrderEndDate,
+        ?int $purchaseOrderSupplierId,
+        ?string $productUnitCode,
+        ?string $productUnitProductName,
+        ?int $productUnitProductCategoryId,
+        ?int $productUnitProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseOrderItem::select('purchase_order_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_order_items.company_id')
+            ->join('purchase_orders', 'purchase_orders.id', '=', 'purchase_order_items.purchase_order_id')
+            ->join('product_units', 'product_units.id', '=', 'purchase_order_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'purchase_order_items.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('purchase_order_items', $companyId)
+            ->whereBranchId('purchase_order_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseOrderCode,
+            $purchaseOrderStartDate,
+            $purchaseOrderEndDate,
+            $purchaseOrderSupplierId,
+            $productUnitCode,
+            $productUnitProductName,
+            $productUnitProductCategoryId,
+            $productUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_order_items.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            $purchaseOrderStartDateUtc = $purchaseOrderStartDate ? TimezoneHelper::convertToUTC($purchaseOrderStartDate) : null;
+            if ($purchaseOrderStartDateUtc) {
+                $query->where('purchase_orders.date', '>=', $purchaseOrderStartDateUtc);
+            }
+
+            $purchaseOrderEndDateUtc = $purchaseOrderEndDate ? TimezoneHelper::convertToUTC($purchaseOrderEndDate) : null;
+            if ($purchaseOrderEndDateUtc) {
+                $query->where('purchase_orders.date', '<=', $purchaseOrderEndDateUtc);
+            }
+
+            if ($purchaseOrderCode) {
+                $query->where('purchase_orders.code', $purchaseOrderCode);
+            }
+
+            if ($purchaseOrderSupplierId) {
+                $query->where('purchase_orders.supplier_id', $purchaseOrderSupplierId);
+            }
+
+            if ($productUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$productUnitCode.'%');
+            }
+
+            if ($productUnitProductName) {
+                $query->where('products.name', 'like', '%'.$productUnitProductName.'%');
+            }
+
+            if ($productUnitProductCategoryId) {
+                $query->where('products.category_id', $productUnitProductCategoryId);
+            }
+
+            if ($productUnitProductBrandId) {
+                $query->where('products.brand_id', $productUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('purchase_orders.date', 'desc')
+            ->orderBy('purchase_order_items.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($purchaseOrderCode) ? '[empty]' : $purchaseOrderCode,
+                    $purchaseOrderStartDate ?? '[null]',
+                    $purchaseOrderEndDate ?? '[null]',
+                    $purchaseOrderSupplierId ?? '[null]',
+                    empty($productUnitCode) ? '[empty]' : $productUnitCode,
+                    empty($productUnitProductName) ? '[empty]' : $productUnitProductName,
+                    $productUnitProductCategoryId ?? '[null]',
+                    $productUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_order_item_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseOrderItem $poItem): PurchaseOrderItem
+    {
+        return $poItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(
+        PurchaseOrderItemCreateDTO $data,
+        bool $updateParentSummary,
+    ): PurchaseOrderItem {
+        $timer_start = microtime(true);
+
+        try {
+            $poItem = new PurchaseOrderItem();
+            $poItem->company_id = $data->companyId;
+            $poItem->branch_id = $data->branchId;
+            $poItem->purchase_order_id = $data->purchaseOrderId;
+            $poItem->qty = $data->qty;
+            $poItem->product_unit_id = $data->productUnitId;
+            $poItem->product_id = ProductUnit::query()->whereKey($data->productUnitId)->value('product_id');
+            $poItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $poItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $poItem->product_unit_price = $data->productUnitPrice;
+            $poItem->product_unit_is_price_include_vat = $data->productUnitIsPriceIncludeVat;
+            $poItem->vat_profile_id = $data->vatProfileId;
+            $poItem->vat_rate = $data->vatRate;
+            $poItem->vat_base_numerator = $data->vatBaseNumerator;
+            $poItem->vat_base_denominator = $data->vatBaseDenominator;
+            $poItem->remarks = $data->remarks;
+            $poItem->save();
+
+            foreach ($data->productUnitPriceDiscounts as $discount) {
+                $dto = new PurchaseOrderItemProductUnitPriceDiscountCreateDTO(
+                    companyId: $poItem->company_id,
+                    branchId: $poItem->branch_id,
+                    purchaseOrderItemId: $poItem->id,
+                    sequence: $discount['sequence'],
+                    discountType: $discount['discount_type'],
+                    discountValue: $discount['discount_value'],
+                );
+
+                $this->purchaseOrderItemProductUnitPriceDiscountActions->create($dto);
+            }
+
+            foreach ($data->subtotalDiscounts as $discount) {
+                $dto = new PurchaseOrderItemSubtotalDiscountCreateDTO(
+                    companyId: $poItem->company_id,
+                    branchId: $poItem->branch_id,
+                    purchaseOrderItemId: $poItem->id,
+                    sequence: $discount['sequence'],
+                    discountType: $discount['discount_type'],
+                    discountValue: $discount['discount_value'],
+                );
+
+                $this->purchaseOrderItemSubtotalDiscountActions->create($dto);
+            }
+
+            $poItem->price_discount = (function () use ($poItem) {
+                $beforeDiscount = (float) $poItem->product_unit_price;
+                $afterDiscount = $beforeDiscount;
+
+                foreach ($poItem->productUnitPriceDiscounts()->orderBy('sequence')->orderBy('id')->get() as $discount) {
+                    $discountType = $discount->discount_type instanceof DiscountTypeEnum
+                        ? $discount->discount_type
+                        : DiscountTypeEnum::resolveToEnum($discount->discount_type);
+                    $discountValue = (float) $discount->discount_value;
+
+                    if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                        $afterDiscount -= $afterDiscount * $discountValue / 100;
+                    } else {
+                        $afterDiscount -= $discountValue;
+                    }
+
+                    if ($afterDiscount < 0) {
+                        $afterDiscount = 0;
+                    }
+                }
+
+                return $beforeDiscount - $afterDiscount;
+            })();
+            $poItem->price_after_discount = $poItem->product_unit_price - $poItem->price_discount;
+            $poItem->subtotal = $poItem->qty * $poItem->price_after_discount;
+            $poItem->subtotal_discount = (function () use ($poItem) {
+                $beforeDiscount = (float) $poItem->subtotal;
+                $afterDiscount = $beforeDiscount;
+
+                foreach ($poItem->subtotalDiscounts()->orderBy('sequence')->orderBy('id')->get() as $discount) {
+                    $discountType = $discount->discount_type instanceof DiscountTypeEnum
+                        ? $discount->discount_type
+                        : DiscountTypeEnum::resolveToEnum($discount->discount_type);
+                    $discountValue = (float) $discount->discount_value;
+
+                    if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                        $afterDiscount -= $afterDiscount * $discountValue / 100;
+                    } else {
+                        $afterDiscount -= $discountValue;
+                    }
+
+                    if ($afterDiscount < 0) {
+                        $afterDiscount = 0;
+                    }
+                }
+
+                return $beforeDiscount - $afterDiscount;
+            })();
+            $poItem->subtotal_after_discount = $poItem->subtotal - $poItem->subtotal_discount;
+            $poItem->save();
+
+            if ($updateParentSummary) {
+                PurchaseOrderActions::updateSummary($poItem->purchaseOrder);
+                $poItem->refresh();
+            }
+
+            $this->flushCache();
+
+            return $poItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(
+        PurchaseOrderItem $poItem,
+        PurchaseOrderItemUpdateDTO $data,
+        bool $updateParentSummary,
+    ): PurchaseOrderItem {
+        $timer_start = microtime(true);
+
+        try {
+            $poItem->qty = $data->qty;
+            $poItem->product_unit_id = $data->productUnitId;
+            $poItem->product_id = ProductUnit::query()->whereKey($data->productUnitId)->value('product_id');
+            $poItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $poItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $poItem->product_unit_price = $data->productUnitPrice;
+            $poItem->product_unit_is_price_include_vat = $data->productUnitIsPriceIncludeVat;
+            $poItem->vat_profile_id = $data->vatProfileId;
+            $poItem->vat_rate = $data->vatRate;
+            $poItem->vat_base_numerator = $data->vatBaseNumerator;
+            $poItem->vat_base_denominator = $data->vatBaseDenominator;
+            $poItem->remarks = $data->remarks;
+
+            foreach ($data->deleteProductUnitPriceDiscountIds as $deleteId) {
+                $poItemPriceDiscount = $poItem->productUnitPriceDiscounts()->findOrFail($deleteId);
+                $this->purchaseOrderItemProductUnitPriceDiscountActions->delete($poItemPriceDiscount);
+            }
+
+            foreach ($data->productUnitPriceDiscounts as $discount) {
+                if (! empty($discount['id'])) {
+                    $poItemPriceDiscount = $poItem->productUnitPriceDiscounts()->findOrFail($discount['id']);
+                    $dto = new PurchaseOrderItemProductUnitPriceDiscountUpdateDTO(
+                        sequence: $discount['sequence'],
+                        discountType: $discount['discount_type'],
+                        discountValue: $discount['discount_value'],
+                    );
+
+                    $this->purchaseOrderItemProductUnitPriceDiscountActions->update($poItemPriceDiscount, $dto);
+                } else {
+                    $dto = new PurchaseOrderItemProductUnitPriceDiscountCreateDTO(
+                        companyId: $poItem->company_id,
+                        branchId: $poItem->branch_id,
+                        purchaseOrderItemId: $poItem->id,
+                        sequence: $discount['sequence'],
+                        discountType: $discount['discount_type'],
+                        discountValue: $discount['discount_value'],
+                    );
+
+                    $this->purchaseOrderItemProductUnitPriceDiscountActions->create($dto);
+                }
+            }
+
+            foreach ($data->deleteSubtotalDiscountIds as $deleteId) {
+                $poItemSubtotalDiscount = $poItem->subtotalDiscounts()->findOrFail($deleteId);
+                $this->purchaseOrderItemSubtotalDiscountActions->delete($poItemSubtotalDiscount);
+            }
+
+            foreach ($data->subtotalDiscounts as $discount) {
+                if (! empty($discount['id'])) {
+                    $poItemSubtotalDiscount = $poItem->subtotalDiscounts()->findOrFail($discount['id']);
+                    $dto = new PurchaseOrderItemSubtotalDiscountUpdateDTO(
+                        sequence: $discount['sequence'],
+                        discountType: $discount['discount_type'],
+                        discountValue: $discount['discount_value'],
+                    );
+
+                    $this->purchaseOrderItemSubtotalDiscountActions->update($poItemSubtotalDiscount, $dto);
+                } else {
+                    $dto = new PurchaseOrderItemSubtotalDiscountCreateDTO(
+                        companyId: $poItem->company_id,
+                        branchId: $poItem->branch_id,
+                        purchaseOrderItemId: $poItem->id,
+                        sequence: $discount['sequence'],
+                        discountType: $discount['discount_type'],
+                        discountValue: $discount['discount_value'],
+                    );
+
+                    $this->purchaseOrderItemSubtotalDiscountActions->create($dto);
+                }
+            }
+
+            $poItem->price_discount = (function () use ($poItem) {
+                $beforeDiscount = (float) $poItem->product_unit_price;
+                $afterDiscount = $beforeDiscount;
+
+                foreach ($poItem->productUnitPriceDiscounts()->orderBy('sequence')->orderBy('id')->get() as $discount) {
+                    $discountType = $discount->discount_type instanceof DiscountTypeEnum
+                        ? $discount->discount_type
+                        : DiscountTypeEnum::resolveToEnum($discount->discount_type);
+                    $discountValue = (float) $discount->discount_value;
+
+                    if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                        $afterDiscount -= $afterDiscount * $discountValue / 100;
+                    } else {
+                        $afterDiscount -= $discountValue;
+                    }
+
+                    if ($afterDiscount < 0) {
+                        $afterDiscount = 0;
+                    }
+                }
+
+                return $beforeDiscount - $afterDiscount;
+            })();
+            $poItem->price_after_discount = $poItem->product_unit_price - $poItem->price_discount;
+            $poItem->subtotal = $poItem->qty * $poItem->price_after_discount;
+            $poItem->subtotal_discount = (function () use ($poItem) {
+                $beforeDiscount = (float) $poItem->subtotal;
+                $afterDiscount = $beforeDiscount;
+
+                foreach ($poItem->subtotalDiscounts()->orderBy('sequence')->orderBy('id')->get() as $discount) {
+                    $discountType = $discount->discount_type instanceof DiscountTypeEnum
+                        ? $discount->discount_type
+                        : DiscountTypeEnum::resolveToEnum($discount->discount_type);
+                    $discountValue = (float) $discount->discount_value;
+
+                    if ($discountType === DiscountTypeEnum::PERCENTAGE) {
+                        $afterDiscount -= $afterDiscount * $discountValue / 100;
+                    } else {
+                        $afterDiscount -= $discountValue;
+                    }
+
+                    if ($afterDiscount < 0) {
+                        $afterDiscount = 0;
+                    }
+                }
+
+                return $beforeDiscount - $afterDiscount;
+            })();
+            $poItem->subtotal_after_discount = $poItem->subtotal - $poItem->subtotal_discount;
+            $poItem->save();
+
+            if ($updateParentSummary) {
+                PurchaseOrderActions::updateSummary($poItem->purchaseOrder);
+                $poItem->refresh();
+            }
+
+            $this->flushCache();
+
+            return $poItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseOrderItem $poItem): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            foreach ($poItem->productUnitPriceDiscounts as $poItemPriceDiscount) {
+                $this->purchaseOrderItemProductUnitPriceDiscountActions->delete($poItemPriceDiscount);
+            }
+
+            foreach ($poItem->subtotalDiscounts as $poItemSubtotalDiscount) {
+                $this->purchaseOrderItemSubtotalDiscountActions->delete($poItemSubtotalDiscount);
+            }
+
+            $result = $poItem->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseOrderItemProductUnitPriceDiscount/PurchaseOrderItemProductUnitPriceDiscountActions.php b/api/app/Actions/PurchaseOrderItemProductUnitPriceDiscount/PurchaseOrderItemProductUnitPriceDiscountActions.php
new file mode 100644
index 000000000..489f879e7
--- /dev/null
+++ b/api/app/Actions/PurchaseOrderItemProductUnitPriceDiscount/PurchaseOrderItemProductUnitPriceDiscountActions.php
@@ -0,0 +1,260 @@
+<?php
+
+namespace App\Actions\PurchaseOrderItemProductUnitPriceDiscount;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseOrderItemProductUnitPriceDiscountCreateDTO;
+use App\DTOs\PurchaseOrderItemProductUnitPriceDiscountUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseOrderItemProductUnitPriceDiscount;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseOrderItemProductUnitPriceDiscountActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseOrderItem.purchaseOrder.supplier',
+        'purchaseOrderItem.productUnit.unit',
+        'purchaseOrderItem.productUnit.product.category',
+        'purchaseOrderItem.productUnit.product.brand',
+        'purchaseOrderItem.productUnit.product.baseProductUnit.unit',
+        'purchaseOrderItem.productUnit.product.images',
+        'purchaseOrderItem.productUnit.product.mainImage',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $purchaseOrderCode,
+        ?string $purchaseOrderStartDate,
+        ?string $purchaseOrderEndDate,
+        ?int $purchaseOrderSupplierId,
+        ?string $productUnitCode,
+        ?string $productUnitProductName,
+        ?int $productUnitProductCategoryId,
+        ?int $productUnitProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseOrderItemProductUnitPriceDiscount::select('purchase_order_item_product_unit_price_discounts.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_order_item_product_unit_price_discounts.company_id')
+            ->join('purchase_order_items', 'purchase_order_items.id', '=', 'purchase_order_item_product_unit_price_discounts.purchase_order_item_id')
+            ->join('purchase_orders', 'purchase_orders.id', '=', 'purchase_order_items.purchase_order_id')
+            ->join('product_units', 'product_units.id', '=', 'purchase_order_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'purchase_order_items.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('purchase_order_item_product_unit_price_discounts', $companyId)
+            ->whereBranchId('purchase_order_item_product_unit_price_discounts', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseOrderCode,
+            $purchaseOrderStartDate,
+            $purchaseOrderEndDate,
+            $purchaseOrderSupplierId,
+            $productUnitCode,
+            $productUnitProductName,
+            $productUnitProductCategoryId,
+            $productUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_order_item_product_unit_price_discounts.discount_type', 'like', '%'.$search.'%');
+                });
+            }
+
+            $purchaseOrderStartDateUtc = $purchaseOrderStartDate ? TimezoneHelper::convertToUTC($purchaseOrderStartDate) : null;
+            if ($purchaseOrderStartDateUtc) {
+                $query->where('purchase_orders.date', '>=', $purchaseOrderStartDateUtc);
+            }
+
+            $purchaseOrderEndDateUtc = $purchaseOrderEndDate ? TimezoneHelper::convertToUTC($purchaseOrderEndDate) : null;
+            if ($purchaseOrderEndDateUtc) {
+                $query->where('purchase_orders.date', '<=', $purchaseOrderEndDateUtc);
+            }
+
+            if ($purchaseOrderCode) {
+                $query->where('purchase_orders.code', $purchaseOrderCode);
+            }
+
+            if ($purchaseOrderSupplierId) {
+                $query->where('purchase_orders.supplier_id', $purchaseOrderSupplierId);
+            }
+
+            if ($productUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$productUnitCode.'%');
+            }
+
+            if ($productUnitProductName) {
+                $query->where('products.name', 'like', '%'.$productUnitProductName.'%');
+            }
+
+            if ($productUnitProductCategoryId) {
+                $query->where('products.category_id', $productUnitProductCategoryId);
+            }
+
+            if ($productUnitProductBrandId) {
+                $query->where('products.brand_id', $productUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('purchase_orders.date', 'desc')
+            ->orderBy('purchase_order_items.id', 'asc')
+            ->orderBy('purchase_order_item_product_unit_price_discounts.sequence', 'asc')
+            ->orderBy('purchase_order_item_product_unit_price_discounts.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($purchaseOrderCode) ? '[empty]' : $purchaseOrderCode,
+                    $purchaseOrderStartDate ?? '[null]',
+                    $purchaseOrderEndDate ?? '[null]',
+                    $purchaseOrderSupplierId ?? '[null]',
+                    empty($productUnitCode) ? '[empty]' : $productUnitCode,
+                    empty($productUnitProductName) ? '[empty]' : $productUnitProductName,
+                    $productUnitProductCategoryId ?? '[null]',
+                    $productUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_order_item_product_unit_price_discount_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseOrderItemProductUnitPriceDiscount $poItemPriceDiscount): PurchaseOrderItemProductUnitPriceDiscount
+    {
+        return $poItemPriceDiscount->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseOrderItemProductUnitPriceDiscountCreateDTO $data): PurchaseOrderItemProductUnitPriceDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $poItemPriceDiscount = new PurchaseOrderItemProductUnitPriceDiscount();
+            $poItemPriceDiscount->company_id = $data->companyId;
+            $poItemPriceDiscount->branch_id = $data->branchId;
+            $poItemPriceDiscount->purchase_order_item_id = $data->purchaseOrderItemId;
+            $poItemPriceDiscount->sequence = $data->sequence;
+            $poItemPriceDiscount->discount_type = $data->discountType;
+            $poItemPriceDiscount->discount_value = $data->discountValue;
+            $poItemPriceDiscount->save();
+
+            $this->flushCache();
+
+            return $poItemPriceDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseOrderItemProductUnitPriceDiscount $poItemPriceDiscount, PurchaseOrderItemProductUnitPriceDiscountUpdateDTO $data): PurchaseOrderItemProductUnitPriceDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $poItemPriceDiscount->sequence = $data->sequence;
+            $poItemPriceDiscount->discount_type = $data->discountType;
+            $poItemPriceDiscount->discount_value = $data->discountValue;
+            $poItemPriceDiscount->save();
+
+            $this->flushCache();
+
+            return $poItemPriceDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseOrderItemProductUnitPriceDiscount $poItemPriceDiscount): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $poItemPriceDiscount->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseOrderItemSubtotalDiscount/PurchaseOrderItemSubtotalDiscountActions.php b/api/app/Actions/PurchaseOrderItemSubtotalDiscount/PurchaseOrderItemSubtotalDiscountActions.php
new file mode 100644
index 000000000..7d2b08ac7
--- /dev/null
+++ b/api/app/Actions/PurchaseOrderItemSubtotalDiscount/PurchaseOrderItemSubtotalDiscountActions.php
@@ -0,0 +1,260 @@
+<?php
+
+namespace App\Actions\PurchaseOrderItemSubtotalDiscount;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseOrderItemSubtotalDiscountCreateDTO;
+use App\DTOs\PurchaseOrderItemSubtotalDiscountUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseOrderItemSubtotalDiscount;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseOrderItemSubtotalDiscountActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseOrderItem.purchaseOrder.supplier',
+        'purchaseOrderItem.productUnit.unit',
+        'purchaseOrderItem.productUnit.product.category',
+        'purchaseOrderItem.productUnit.product.brand',
+        'purchaseOrderItem.productUnit.product.baseProductUnit.unit',
+        'purchaseOrderItem.productUnit.product.images',
+        'purchaseOrderItem.productUnit.product.mainImage',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $purchaseOrderCode,
+        ?string $purchaseOrderStartDate,
+        ?string $purchaseOrderEndDate,
+        ?int $purchaseOrderSupplierId,
+        ?string $productUnitCode,
+        ?string $productUnitProductName,
+        ?int $productUnitProductCategoryId,
+        ?int $productUnitProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseOrderItemSubtotalDiscount::select('purchase_order_item_subtotal_discounts.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_order_item_subtotal_discounts.company_id')
+            ->join('purchase_order_items', 'purchase_order_items.id', '=', 'purchase_order_item_subtotal_discounts.purchase_order_item_id')
+            ->join('purchase_orders', 'purchase_orders.id', '=', 'purchase_order_items.purchase_order_id')
+            ->join('product_units', 'product_units.id', '=', 'purchase_order_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'purchase_order_items.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('purchase_order_item_subtotal_discounts', $companyId)
+            ->whereBranchId('purchase_order_item_subtotal_discounts', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseOrderCode,
+            $purchaseOrderStartDate,
+            $purchaseOrderEndDate,
+            $purchaseOrderSupplierId,
+            $productUnitCode,
+            $productUnitProductName,
+            $productUnitProductCategoryId,
+            $productUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_order_item_subtotal_discounts.discount_type', 'like', '%'.$search.'%');
+                });
+            }
+
+            $purchaseOrderStartDateUtc = $purchaseOrderStartDate ? TimezoneHelper::convertToUTC($purchaseOrderStartDate) : null;
+            if ($purchaseOrderStartDateUtc) {
+                $query->where('purchase_orders.date', '>=', $purchaseOrderStartDateUtc);
+            }
+
+            $purchaseOrderEndDateUtc = $purchaseOrderEndDate ? TimezoneHelper::convertToUTC($purchaseOrderEndDate) : null;
+            if ($purchaseOrderEndDateUtc) {
+                $query->where('purchase_orders.date', '<=', $purchaseOrderEndDateUtc);
+            }
+
+            if ($purchaseOrderCode) {
+                $query->where('purchase_orders.code', $purchaseOrderCode);
+            }
+
+            if ($purchaseOrderSupplierId) {
+                $query->where('purchase_orders.supplier_id', $purchaseOrderSupplierId);
+            }
+
+            if ($productUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$productUnitCode.'%');
+            }
+
+            if ($productUnitProductName) {
+                $query->where('products.name', 'like', '%'.$productUnitProductName.'%');
+            }
+
+            if ($productUnitProductCategoryId) {
+                $query->where('products.category_id', $productUnitProductCategoryId);
+            }
+
+            if ($productUnitProductBrandId) {
+                $query->where('products.brand_id', $productUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('purchase_orders.date', 'desc')
+            ->orderBy('purchase_order_items.id', 'asc')
+            ->orderBy('purchase_order_item_subtotal_discounts.sequence', 'asc')
+            ->orderBy('purchase_order_item_subtotal_discounts.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($purchaseOrderCode) ? '[empty]' : $purchaseOrderCode,
+                    $purchaseOrderStartDate ?? '[null]',
+                    $purchaseOrderEndDate ?? '[null]',
+                    $purchaseOrderSupplierId ?? '[null]',
+                    empty($productUnitCode) ? '[empty]' : $productUnitCode,
+                    empty($productUnitProductName) ? '[empty]' : $productUnitProductName,
+                    $productUnitProductCategoryId ?? '[null]',
+                    $productUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_order_item_subtotal_discount_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseOrderItemSubtotalDiscount $poItemSubtotalDiscount): PurchaseOrderItemSubtotalDiscount
+    {
+        return $poItemSubtotalDiscount->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseOrderItemSubtotalDiscountCreateDTO $data): PurchaseOrderItemSubtotalDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $poItemSubtotalDiscount = new PurchaseOrderItemSubtotalDiscount();
+            $poItemSubtotalDiscount->company_id = $data->companyId;
+            $poItemSubtotalDiscount->branch_id = $data->branchId;
+            $poItemSubtotalDiscount->purchase_order_item_id = $data->purchaseOrderItemId;
+            $poItemSubtotalDiscount->sequence = $data->sequence;
+            $poItemSubtotalDiscount->discount_type = $data->discountType;
+            $poItemSubtotalDiscount->discount_value = $data->discountValue;
+            $poItemSubtotalDiscount->save();
+
+            $this->flushCache();
+
+            return $poItemSubtotalDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseOrderItemSubtotalDiscount $poItemSubtotalDiscount, PurchaseOrderItemSubtotalDiscountUpdateDTO $data): PurchaseOrderItemSubtotalDiscount
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $poItemSubtotalDiscount->sequence = $data->sequence;
+            $poItemSubtotalDiscount->discount_type = $data->discountType;
+            $poItemSubtotalDiscount->discount_value = $data->discountValue;
+            $poItemSubtotalDiscount->save();
+
+            $this->flushCache();
+
+            return $poItemSubtotalDiscount;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseOrderItemSubtotalDiscount $poItemSubtotalDiscount): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $poItemSubtotalDiscount->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseReceipt/PurchaseReceiptActions.php b/api/app/Actions/PurchaseReceipt/PurchaseReceiptActions.php
new file mode 100644
index 000000000..0f0c7169f
--- /dev/null
+++ b/api/app/Actions/PurchaseReceipt/PurchaseReceiptActions.php
@@ -0,0 +1,542 @@
+<?php
+
+namespace App\Actions\PurchaseReceipt;
+
+use App\Actions\Purchase\PurchaseActions;
+use App\Actions\PurchaseReceiptItem\PurchaseReceiptItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseReceiptCreateDTO;
+use App\DTOs\PurchaseReceiptDirectItemCreateDTO;
+use App\DTOs\PurchaseReceiptDirectItemUpdateDTO;
+use App\DTOs\PurchaseReceiptManualItemCreateDTO;
+use App\DTOs\PurchaseReceiptManualItemUpdateDTO;
+use App\DTOs\PurchaseReceiptUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\PurchaseReceipt;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseReceiptActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct(
+        private readonly PurchaseReceiptItemActions $purchaseReceiptItemActions,
+    ) {
+    }
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'supplier',
+        'purchase.supplier',
+        'warehouse',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'supplier',
+        'purchase.supplier',
+        'warehouse',
+        'items.productUnit.unit',
+        'items.productUnit.product.category',
+        'items.productUnit.product.brand',
+        'items.productUnit.product.baseProductUnit.unit',
+        'items.productUnit.product.images',
+        'items.productUnit.product.mainImage',
+        'items.serials',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $supplierId,
+        ?int $purchaseId,
+        ?bool $isFromDirectPurchase,
+        ?string $startDate,
+        ?string $endDate,
+        ?int $warehouseId,
+        ?bool $isPosted,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseReceipt::select('purchase_receipts.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->join('companies', 'companies.id', '=', 'purchase_receipts.company_id')
+            ->whereCompanyId('purchase_receipts', $companyId)
+            ->whereBranchId('purchase_receipts', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $supplierId,
+            $purchaseId,
+            $isFromDirectPurchase,
+            $startDate,
+            $endDate,
+            $warehouseId,
+            $isPosted,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('purchase_receipts.code', 'like', '%'.$search.'%')
+                        ->orWhere('purchase_receipts.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($supplierId) {
+                $query->where('purchase_receipts.supplier_id', $supplierId);
+            }
+
+            if ($purchaseId) {
+                $query->where('purchase_receipts.purchase_id', $purchaseId);
+            }
+
+            if (! is_null($isFromDirectPurchase)) {
+                $query->where('purchase_receipts.is_from_direct_purchase', $isFromDirectPurchase);
+            }
+
+            if ($startDate) {
+                $query->where('purchase_receipts.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('purchase_receipts.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+
+            if ($warehouseId) {
+                $query->where('purchase_receipts.warehouse_id', $warehouseId);
+            }
+
+            if (! is_null($isPosted)) {
+                $query->where('purchase_receipts.is_posted', $isPosted);
+            }
+        });
+
+        $query->orderBy('purchase_receipts.date', 'desc')
+            ->orderBy('purchase_receipts.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $supplierId ?? '[null]',
+                    $purchaseId ?? '[null]',
+                    is_null($isFromDirectPurchase) ? '[null]' : ($isFromDirectPurchase ? 'true' : 'false'),
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $warehouseId ?? '[null]',
+                    is_null($isPosted) ? '[null]' : ($isPosted ? 'true' : 'false'),
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_receipt_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseReceipt $purchaseReceipt): PurchaseReceipt
+    {
+        return $purchaseReceipt->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != Config::get('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $tryCount = 0;
+        do {
+            $count = PurchaseReceipt::withTrashed()->where('company_id', $companyId)->count() + 1 + $tryCount;
+            $code = 'PRC'.str_pad($count, 5, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = PurchaseReceipt::where('company_id', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    private function generateDate($date): string
+    {
+        if ($date instanceof \DateTimeInterface) {
+            return $date->format('Y-m-d H:i:s');
+        }
+
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function createDirect(PurchaseReceiptCreateDTO $data, bool $updatePurchaseSummary): PurchaseReceipt
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceipt = new PurchaseReceipt();
+            $purchaseReceipt->company_id = $data->companyId;
+            $purchaseReceipt->branch_id = $data->branchId;
+            $purchaseReceipt->supplier_id = $data->supplierId;
+            $purchaseReceipt->purchase_id = $data->purchaseId;
+            $purchaseReceipt->is_from_direct_purchase = true;
+            $purchaseReceipt->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchaseReceipt->date = $this->generateDate($data->date);
+            $purchaseReceipt->warehouse_id = $data->warehouseId;
+            $purchaseReceipt->remarks = $data->remarks;
+            $purchaseReceipt->is_posted = $data->isPosted;
+            $purchaseReceipt->save();
+
+            foreach ($data->items as $item) {
+                $dto = new PurchaseReceiptDirectItemCreateDTO(
+                    companyId: $purchaseReceipt->company_id,
+                    branchId: $purchaseReceipt->branch_id,
+                    purchaseReceiptId: $purchaseReceipt->id,
+                    purchaseItemId: $item['purchase_item_id'],
+                    qty: $item['qty'],
+                    productUnitId: $item['product_unit_id'],
+                    productUnitConversionValue: $item['product_unit_conversion_value'],
+                    remarks: $item['remarks'],
+
+                    serials: $item['serials'],
+                );
+
+                $this->purchaseReceiptItemActions->createDirect($dto, false);
+            }
+
+            self::updateSummary($purchaseReceipt);
+
+            if ($purchaseReceipt->purchase && $updatePurchaseSummary) {
+                PurchaseActions::updateSummary($purchaseReceipt->purchase);
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceipt;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function createManual(PurchaseReceiptCreateDTO $data, bool $updatePurchaseSummary): PurchaseReceipt
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceipt = new PurchaseReceipt();
+            $purchaseReceipt->company_id = $data->companyId;
+            $purchaseReceipt->branch_id = $data->branchId;
+            $purchaseReceipt->supplier_id = $data->supplierId;
+            $purchaseReceipt->purchase_id = $data->purchaseId;
+            $purchaseReceipt->is_from_direct_purchase = false;
+            $purchaseReceipt->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $purchaseReceipt->date = $this->generateDate($data->date);
+            $purchaseReceipt->warehouse_id = $data->warehouseId;
+            $purchaseReceipt->remarks = $data->remarks;
+            $purchaseReceipt->is_posted = $data->isPosted;
+            $purchaseReceipt->save();
+
+            foreach ($data->items as $item) {
+                $dto = new PurchaseReceiptManualItemCreateDTO(
+                    companyId: $purchaseReceipt->company_id,
+                    branchId: $purchaseReceipt->branch_id,
+                    purchaseReceiptId: $purchaseReceipt->id,
+                    qty: $item['qty'],
+                    productUnitId: $item['product_unit_id'],
+                    productUnitConversionValue: $item['product_unit_conversion_value'],
+                    remarks: $item['remarks'],
+                    serials: $item['serials'],
+                );
+
+                $this->purchaseReceiptItemActions->createManual($dto, false);
+            }
+
+            self::updateSummary($purchaseReceipt);
+
+            if ($purchaseReceipt->purchase && $updatePurchaseSummary) {
+                PurchaseActions::updateSummary($purchaseReceipt->purchase);
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceipt;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function updateDirect(PurchaseReceipt $purchaseReceipt, PurchaseReceiptUpdateDTO $data, bool $updatePurchaseSummary): PurchaseReceipt
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $previousPurchase = $purchaseReceipt->purchase;
+
+            $purchaseReceipt->supplier_id = $data->supplierId;
+            $purchaseReceipt->purchase_id = $data->purchaseId;
+            $purchaseReceipt->code = $this->generateUniqueCode($purchaseReceipt->company_id, $data->code, $purchaseReceipt->id);
+            $purchaseReceipt->date = $this->generateDate($data->date);
+            $purchaseReceipt->is_from_direct_purchase = true;
+            $purchaseReceipt->warehouse_id = $data->warehouseId;
+            $purchaseReceipt->remarks = $data->remarks;
+            $purchaseReceipt->is_posted = $data->isPosted;
+            $purchaseReceipt->save();
+
+            foreach ($data->deleteItemIds as $deleteId) {
+                $purchaseReceiptItem = $purchaseReceipt->items()->findOrFail($deleteId);
+                $this->purchaseReceiptItemActions->delete($purchaseReceiptItem, false);
+            }
+
+            foreach ($data->items as $item) {
+                if (! empty($item['id'])) {
+                    $purchaseReceiptItem = $purchaseReceipt->items()->findOrFail($item['id']);
+                    $dto = new PurchaseReceiptDirectItemUpdateDTO(
+                        purchaseItemId: $item['purchase_item_id'],
+                        qty: $item['qty'],
+                        productUnitId: $item['product_unit_id'],
+                        productUnitConversionValue: $item['product_unit_conversion_value'],
+                        remarks: $item['remarks'],
+                        deleteSerialIds: $item['delete_serial_ids'],
+                        serials: $item['serials'],
+                    );
+
+                    $this->purchaseReceiptItemActions->updateDirect($purchaseReceiptItem, $dto, false);
+                } else {
+                    $dto = new PurchaseReceiptDirectItemCreateDTO(
+                        companyId: $purchaseReceipt->company_id,
+                        branchId: $purchaseReceipt->branch_id,
+                        purchaseReceiptId: $purchaseReceipt->id,
+                        purchaseItemId: $item['purchase_item_id'],
+
+                        qty: $item['qty'],
+                        productUnitId: $item['product_unit_id'],
+                        productUnitConversionValue: $item['product_unit_conversion_value'],
+                        remarks: $item['remarks'],
+
+                        serials: $item['serials'],
+                    );
+
+                    $this->purchaseReceiptItemActions->createDirect($dto, false);
+                }
+            }
+
+            self::updateSummary($purchaseReceipt);
+
+            if ($previousPurchase && $updatePurchaseSummary) {
+                PurchaseActions::updateSummary($previousPurchase->refresh());
+            }
+
+            if ($purchaseReceipt->purchase && $updatePurchaseSummary) {
+                if (! $previousPurchase || $purchaseReceipt->purchase->id !== $previousPurchase->id) {
+                    PurchaseActions::updateSummary($purchaseReceipt->purchase);
+                } else {
+                    PurchaseActions::updateSummary($purchaseReceipt->purchase->refresh());
+                }
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceipt;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function updateManual(PurchaseReceipt $purchaseReceipt, PurchaseReceiptUpdateDTO $data, bool $updatePurchaseSummary): PurchaseReceipt
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $previousPurchase = $purchaseReceipt->purchase;
+
+            $purchaseReceipt->supplier_id = $data->supplierId;
+            $purchaseReceipt->purchase_id = $data->purchaseId;
+            $purchaseReceipt->code = $this->generateUniqueCode($purchaseReceipt->company_id, $data->code, $purchaseReceipt->id);
+            $purchaseReceipt->date = $this->generateDate($data->date);
+            $purchaseReceipt->is_from_direct_purchase = false;
+            $purchaseReceipt->warehouse_id = $data->warehouseId;
+            $purchaseReceipt->remarks = $data->remarks;
+            $purchaseReceipt->is_posted = $data->isPosted;
+            $purchaseReceipt->save();
+
+            foreach ($data->deleteItemIds as $deleteId) {
+                $purchaseReceiptItem = $purchaseReceipt->items()->findOrFail($deleteId);
+                $this->purchaseReceiptItemActions->delete($purchaseReceiptItem, false);
+            }
+
+            foreach ($data->items as $item) {
+                if (! empty($item['id'])) {
+                    $purchaseReceiptItem = $purchaseReceipt->items()->findOrFail($item['id']);
+                    $dto = new PurchaseReceiptManualItemUpdateDTO(
+                        qty: $item['qty'],
+                        productUnitId: $item['product_unit_id'],
+                        productUnitConversionValue: $item['product_unit_conversion_value'],
+                        remarks: $item['remarks'],
+                        deleteSerialIds: $item['delete_serial_ids'],
+                        serials: $item['serials'],
+                    );
+
+                    $this->purchaseReceiptItemActions->updateManual($purchaseReceiptItem, $dto, false);
+                } else {
+                    $dto = new PurchaseReceiptManualItemCreateDTO(
+                        companyId: $purchaseReceipt->company_id,
+                        branchId: $purchaseReceipt->branch_id,
+                        purchaseReceiptId: $purchaseReceipt->id,
+                        qty: $item['qty'],
+                        productUnitId: $item['product_unit_id'],
+                        productUnitConversionValue: $item['product_unit_conversion_value'],
+                        remarks: $item['remarks'],
+                        serials: $item['serials'],
+                    );
+
+                    $this->purchaseReceiptItemActions->createManual($dto, false);
+                }
+            }
+
+            self::updateSummary($purchaseReceipt);
+
+            if ($previousPurchase && $updatePurchaseSummary) {
+                PurchaseActions::updateSummary($previousPurchase->refresh());
+            }
+
+            if ($purchaseReceipt->purchase && $updatePurchaseSummary) {
+                if (! $previousPurchase || $purchaseReceipt->purchase->id !== $previousPurchase->id) {
+                    PurchaseActions::updateSummary($purchaseReceipt->purchase);
+                } else {
+                    PurchaseActions::updateSummary($purchaseReceipt->purchase->refresh());
+                }
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceipt;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(PurchaseReceipt $purchaseReceipt): void
+    {
+        $purchaseReceipt->refresh()->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function delete(PurchaseReceipt $purchaseReceipt, bool $updatePurchaseSummary): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchase = $purchaseReceipt->purchase;
+
+            foreach ($purchaseReceipt->items as $purchaseReceiptItem) {
+                $this->purchaseReceiptItemActions->delete($purchaseReceiptItem, false);
+            }
+
+            $result = $purchaseReceipt->delete();
+
+            if ($purchase && $updatePurchaseSummary) {
+                PurchaseActions::updateSummary($purchase->refresh());
+            }
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseReceiptItem/PurchaseReceiptItemActions.php b/api/app/Actions/PurchaseReceiptItem/PurchaseReceiptItemActions.php
new file mode 100644
index 000000000..a338f26fd
--- /dev/null
+++ b/api/app/Actions/PurchaseReceiptItem/PurchaseReceiptItemActions.php
@@ -0,0 +1,449 @@
+<?php
+
+namespace App\Actions\PurchaseReceiptItem;
+
+use App\Actions\PurchaseReceipt\PurchaseReceiptActions;
+use App\Actions\PurchaseReceiptItemSerial\PurchaseReceiptItemSerialActions;
+use App\Actions\StockTransaction\StockTransactionActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseReceiptDirectItemCreateDTO;
+use App\DTOs\PurchaseReceiptDirectItemUpdateDTO;
+use App\DTOs\PurchaseReceiptItemSerialCreateDTO;
+use App\DTOs\PurchaseReceiptItemSerialUpdateDTO;
+use App\DTOs\PurchaseReceiptManualItemCreateDTO;
+use App\DTOs\PurchaseReceiptManualItemUpdateDTO;
+use App\DTOs\StockTransactionCreateDTO;
+use App\DTOs\StockTransactionUpdateDTO;
+use App\Models\ProductUnit;
+use App\Models\PurchaseReceiptItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseReceiptItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct(
+        private readonly PurchaseReceiptItemSerialActions $purchaseReceiptItemSerialActions,
+        private readonly StockTransactionActions $stockTransactionActions,
+    ) {
+    }
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseReceipt.supplier',
+        'purchaseReceipt.purchase.supplier',
+        'productUnit.unit',
+        'productUnit.product.category',
+        'productUnit.product.brand',
+        'productUnit.product.baseProductUnit.unit',
+        'productUnit.product.images',
+        'productUnit.product.mainImage',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseReceipt.supplier',
+        'purchaseReceipt.purchase.supplier',
+        'productUnit.unit',
+        'productUnit.product.category',
+        'productUnit.product.brand',
+        'productUnit.product.baseProductUnit.unit',
+        'productUnit.product.images',
+        'productUnit.product.mainImage',
+        'serials',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+
+        ?string $search,
+        ?int $purchaseReceiptId,
+        ?bool $hasPurchaseItemProduct,
+        ?int $productUnitId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseReceiptItem::select('purchase_receipt_items.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query->join('companies', 'companies.id', '=', 'purchase_receipt_items.company_id')
+            ->join('purchase_receipts', 'purchase_receipts.id', '=', 'purchase_receipt_items.purchase_receipt_id')
+            ->whereCompanyId('purchase_receipt_items', $companyId)
+            ->whereBranchId('purchase_receipt_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseReceiptId,
+            $hasPurchaseItemProduct,
+            $productUnitId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where('purchase_receipt_items.remarks', 'like', '%'.$search.'%');
+            }
+
+            if ($purchaseReceiptId) {
+                $query->where('purchase_receipt_items.purchase_receipt_id', $purchaseReceiptId);
+            }
+
+            if (! is_null($hasPurchaseItemProduct)) {
+                $query->where('purchase_receipt_items.has_purchase_item_product', $hasPurchaseItemProduct);
+            }
+
+            if ($productUnitId) {
+                $query->where('purchase_receipt_items.product_unit_id', $productUnitId);
+            }
+        });
+
+        $query->orderBy('purchase_receipts.date', 'desc')
+            ->orderBy('purchase_receipt_items.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $purchaseReceiptId ?? '[null]',
+                    is_null($hasPurchaseItemProduct) ? '[null]' : ($hasPurchaseItemProduct ? 'true' : 'false'),
+                    $productUnitId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_receipt_item_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseReceiptItem $purchaseReceiptItem): PurchaseReceiptItem
+    {
+        return $purchaseReceiptItem->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function createDirect(PurchaseReceiptDirectItemCreateDTO $data, bool $updateParent): PurchaseReceiptItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceiptItem = new PurchaseReceiptItem();
+            $purchaseReceiptItem->company_id = $data->companyId;
+            $purchaseReceiptItem->branch_id = $data->branchId;
+            $purchaseReceiptItem->purchase_receipt_id = $data->purchaseReceiptId;
+            $purchaseReceiptItem->purchase_item_id = $data->purchaseItemId;
+            $purchaseReceiptItem->has_purchase_item_product = false;
+            $purchaseReceiptItem->qty = $data->qty;
+            $purchaseReceiptItem->product_unit_id = $data->productUnitId;
+            $purchaseReceiptItem->product_id = ProductUnit::query()->whereKey($data->productUnitId)->value('product_id');
+            $purchaseReceiptItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $purchaseReceiptItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $purchaseReceiptItem->remarks = $data->remarks;
+            $purchaseReceiptItem->save();
+
+            $this->stockTransactionActions->create(
+                data: StockTransactionCreateDTO::fromPurchaseReceiptItem($purchaseReceiptItem)
+            );
+
+            foreach ($data->serials as $serial) {
+                $dto = new PurchaseReceiptItemSerialCreateDTO(
+                    companyId: $purchaseReceiptItem->company_id,
+                    branchId: $purchaseReceiptItem->branch_id,
+                    purchaseReceiptId: $purchaseReceiptItem->purchase_receipt_id,
+                    purchaseReceiptItemId: $purchaseReceiptItem->id,
+                    serial: $serial['serial'],
+                );
+
+                $this->purchaseReceiptItemSerialActions->create($dto);
+            }
+
+            if ($updateParent) {
+                PurchaseReceiptActions::updateSummary($purchaseReceiptItem->purchaseReceipt);
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceiptItem->refresh()->load(self::DETAIL_EAGER_LOADS);
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function createManual(PurchaseReceiptManualItemCreateDTO $data, bool $updateParent): PurchaseReceiptItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceiptItem = new PurchaseReceiptItem();
+            $purchaseReceiptItem->company_id = $data->companyId;
+            $purchaseReceiptItem->branch_id = $data->branchId;
+            $purchaseReceiptItem->purchase_receipt_id = $data->purchaseReceiptId;
+            $purchaseReceiptItem->purchase_item_id = null;
+            $purchaseReceiptItem->has_purchase_item_product = false;
+            $purchaseReceiptItem->qty = $data->qty;
+            $purchaseReceiptItem->product_unit_id = $data->productUnitId;
+            $purchaseReceiptItem->product_id = ProductUnit::query()->whereKey($data->productUnitId)->value('product_id');
+            $purchaseReceiptItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $purchaseReceiptItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $purchaseReceiptItem->remarks = $data->remarks;
+            $purchaseReceiptItem->save();
+
+            $this->stockTransactionActions->create(
+                data: StockTransactionCreateDTO::fromPurchaseReceiptItem($purchaseReceiptItem)
+            );
+
+            foreach ($data->serials as $serial) {
+                $dto = new PurchaseReceiptItemSerialCreateDTO(
+                    companyId: $purchaseReceiptItem->company_id,
+                    branchId: $purchaseReceiptItem->branch_id,
+                    purchaseReceiptId: $purchaseReceiptItem->purchase_receipt_id,
+                    purchaseReceiptItemId: $purchaseReceiptItem->id,
+                    serial: $serial['serial'],
+                );
+
+                $this->purchaseReceiptItemSerialActions->create($dto);
+            }
+
+            if ($updateParent) {
+                PurchaseReceiptActions::updateSummary($purchaseReceiptItem->purchaseReceipt);
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceiptItem->refresh()->load(self::DETAIL_EAGER_LOADS);
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function updateDirect(PurchaseReceiptItem $purchaseReceiptItem, PurchaseReceiptDirectItemUpdateDTO $data, bool $updateParent): PurchaseReceiptItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceiptItem->purchase_item_id = $data->purchaseItemId;
+            $purchaseReceiptItem->qty = $data->qty;
+            $purchaseReceiptItem->product_unit_id = $data->productUnitId;
+            $purchaseReceiptItem->product_id = ProductUnit::query()->whereKey($data->productUnitId)->value('product_id');
+            $purchaseReceiptItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $purchaseReceiptItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $purchaseReceiptItem->remarks = $data->remarks;
+            $purchaseReceiptItem->save();
+
+            $stockTransaction = $purchaseReceiptItem->stockTransaction;
+            if (! $stockTransaction) {
+                $dto = StockTransactionCreateDTO::fromPurchaseReceiptItem($purchaseReceiptItem);
+                $this->stockTransactionActions->create($dto);
+            } else {
+                $dto = StockTransactionUpdateDTO::fromPurchaseReceiptItem($purchaseReceiptItem);
+                $this->stockTransactionActions->update($stockTransaction, $dto);
+            }
+
+            foreach ($data->deleteSerialIds as $deleteId) {
+                $purchaseReceiptItemSerial = $purchaseReceiptItem->serials()->findOrFail($deleteId);
+                $this->purchaseReceiptItemSerialActions->delete($purchaseReceiptItemSerial);
+            }
+
+            foreach ($data->serials as $serial) {
+                if ($serial['id']) {
+                    $purchaseReceiptItemSerial = $purchaseReceiptItem->serials()->findOrFail($serial['id']);
+                    $dto = new PurchaseReceiptItemSerialUpdateDTO(
+                        serial: $serial['serial'],
+                    );
+
+                    $this->purchaseReceiptItemSerialActions->update($purchaseReceiptItemSerial, $dto);
+                } else {
+                    $dto = new PurchaseReceiptItemSerialCreateDTO(
+                        companyId: $purchaseReceiptItem->company_id,
+                        branchId: $purchaseReceiptItem->branch_id,
+                        purchaseReceiptId: $purchaseReceiptItem->purchase_receipt_id,
+                        purchaseReceiptItemId: $purchaseReceiptItem->id,
+                        serial: $serial['serial'],
+                    );
+
+                    $this->purchaseReceiptItemSerialActions->create($dto);
+                }
+            }
+
+            if ($updateParent) {
+                PurchaseReceiptActions::updateSummary($purchaseReceiptItem->purchaseReceipt);
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceiptItem->refresh()->load(self::DETAIL_EAGER_LOADS);
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function updateManual(PurchaseReceiptItem $purchaseReceiptItem, PurchaseReceiptManualItemUpdateDTO $data, bool $updateParent): PurchaseReceiptItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceiptItem->purchase_item_id = null;
+            $purchaseReceiptItem->qty = $data->qty;
+            $purchaseReceiptItem->product_unit_id = $data->productUnitId;
+            $purchaseReceiptItem->product_id = ProductUnit::query()->whereKey($data->productUnitId)->value('product_id');
+            $purchaseReceiptItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $purchaseReceiptItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $purchaseReceiptItem->remarks = $data->remarks;
+            $purchaseReceiptItem->save();
+
+            $stockTransaction = $purchaseReceiptItem->stockTransaction;
+            if (! $stockTransaction) {
+                $dto = StockTransactionCreateDTO::fromPurchaseReceiptItem($purchaseReceiptItem);
+                $this->stockTransactionActions->create($dto);
+            } else {
+                $dto = StockTransactionUpdateDTO::fromPurchaseReceiptItem($purchaseReceiptItem);
+                $this->stockTransactionActions->update($stockTransaction, $dto);
+            }
+
+            foreach ($data->deleteSerialIds as $deleteId) {
+                $purchaseReceiptItemSerial = $purchaseReceiptItem->serials()->findOrFail($deleteId);
+                $this->purchaseReceiptItemSerialActions->delete($purchaseReceiptItemSerial);
+            }
+
+            foreach ($data->serials as $serial) {
+                if ($serial['id']) {
+                    $purchaseReceiptItemSerial = $purchaseReceiptItem->serials()->findOrFail($serial['id']);
+                    $dto = new PurchaseReceiptItemSerialUpdateDTO(
+                        serial: $serial['serial'],
+                    );
+
+                    $this->purchaseReceiptItemSerialActions->update($purchaseReceiptItemSerial, $dto);
+                } else {
+                    $dto = new PurchaseReceiptItemSerialCreateDTO(
+                        companyId: $purchaseReceiptItem->company_id,
+                        branchId: $purchaseReceiptItem->branch_id,
+                        purchaseReceiptId: $purchaseReceiptItem->purchase_receipt_id,
+                        purchaseReceiptItemId: $purchaseReceiptItem->id,
+                        serial: $serial['serial'],
+                    );
+
+                    $this->purchaseReceiptItemSerialActions->create($dto);
+                }
+            }
+
+            if ($updateParent) {
+                PurchaseReceiptActions::updateSummary($purchaseReceiptItem->purchaseReceipt);
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceiptItem->refresh()->load(self::DETAIL_EAGER_LOADS);
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseReceiptItem $purchaseReceiptItem, bool $updateParent): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceipt = $purchaseReceiptItem->purchaseReceipt;
+
+            $stockTransaction = $purchaseReceiptItem->stockTransaction;
+            if ($stockTransaction) {
+                $this->stockTransactionActions->delete($stockTransaction);
+            }
+
+            foreach ($purchaseReceiptItem->serials as $purchaseReceiptItemSerial) {
+                $this->purchaseReceiptItemSerialActions->delete($purchaseReceiptItemSerial);
+            }
+
+            $result = $purchaseReceiptItem->delete();
+
+            if ($updateParent) {
+                PurchaseReceiptActions::updateSummary($purchaseReceipt);
+            }
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/PurchaseReceiptItemSerial/PurchaseReceiptItemSerialActions.php b/api/app/Actions/PurchaseReceiptItemSerial/PurchaseReceiptItemSerialActions.php
new file mode 100644
index 000000000..9bc32a16d
--- /dev/null
+++ b/api/app/Actions/PurchaseReceiptItemSerial/PurchaseReceiptItemSerialActions.php
@@ -0,0 +1,231 @@
+<?php
+
+namespace App\Actions\PurchaseReceiptItemSerial;
+
+use App\Actions\StockSerialTransaction\StockSerialTransactionActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\PurchaseReceiptItemSerialCreateDTO;
+use App\DTOs\PurchaseReceiptItemSerialUpdateDTO;
+use App\DTOs\StockSerialTransactionCreateDTO;
+use App\DTOs\StockSerialTransactionUpdateDTO;
+use App\Models\PurchaseReceiptItemSerial;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class PurchaseReceiptItemSerialActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    public function __construct(
+        private readonly StockSerialTransactionActions $stockSerialTransactionActions,
+    ) {
+    }
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'purchaseReceipt.supplier',
+        'purchaseReceipt.purchase.supplier',
+        'purchaseReceipt.warehouse',
+        'purchaseReceiptItem.productUnit.unit',
+        'purchaseReceiptItem.productUnit.product.category',
+        'purchaseReceiptItem.productUnit.product.brand',
+        'purchaseReceiptItem.productUnit.product.baseProductUnit.unit',
+        'purchaseReceiptItem.productUnit.product.images',
+        'purchaseReceiptItem.productUnit.product.mainImage',
+    ];
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+        ?int $purchaseReceiptId,
+        ?int $purchaseReceiptItemId,
+        ?ExecuteDTO $execute
+    ) {
+        $query = PurchaseReceiptItemSerial::select('purchase_receipt_item_serials.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'purchase_receipt_item_serials.company_id')
+            ->join('purchase_receipts', 'purchase_receipts.id', '=', 'purchase_receipt_item_serials.purchase_receipt_id')
+            ->whereCompanyId('purchase_receipt_item_serials', $companyId)
+            ->whereBranchId('purchase_receipt_item_serials', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $purchaseReceiptId,
+            $purchaseReceiptItemId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where('purchase_receipt_item_serials.serial', 'like', '%'.$search.'%');
+            }
+
+            if ($purchaseReceiptId) {
+                $query->where('purchase_receipt_item_serials.purchase_receipt_id', $purchaseReceiptId);
+            }
+
+            if ($purchaseReceiptItemId) {
+                $query->where('purchase_receipt_item_serials.purchase_receipt_item_id', $purchaseReceiptItemId);
+            }
+        });
+
+        $query->orderBy('purchase_receipts.date', 'desc')
+            ->orderBy('purchase_receipt_item_serials.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $purchaseReceiptId ?? '[null]',
+                    $purchaseReceiptItemId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_purchase_receipt_item_serial_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(PurchaseReceiptItemSerial $purchaseReceiptItemSerial): PurchaseReceiptItemSerial
+    {
+        return $purchaseReceiptItemSerial->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(PurchaseReceiptItemSerialCreateDTO $data): PurchaseReceiptItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceiptItemSerial = new PurchaseReceiptItemSerial();
+            $purchaseReceiptItemSerial->company_id = $data->companyId;
+            $purchaseReceiptItemSerial->branch_id = $data->branchId;
+            $purchaseReceiptItemSerial->purchase_receipt_id = $data->purchaseReceiptId;
+            $purchaseReceiptItemSerial->purchase_receipt_item_id = $data->purchaseReceiptItemId;
+            $purchaseReceiptItemSerial->serial = $data->serial;
+            $purchaseReceiptItemSerial->save();
+
+            $stockSerialTransactionCreateDTO = StockSerialTransactionCreateDTO::fromPurchaseReceiptItemSerial(
+                purchaseReceiptItemSerial: $purchaseReceiptItemSerial,
+                serial: $data->serial
+            );
+            $this->stockSerialTransactionActions->create($stockSerialTransactionCreateDTO);
+
+            $this->flushCache();
+
+            return $purchaseReceiptItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(PurchaseReceiptItemSerial $purchaseReceiptItemSerial, PurchaseReceiptItemSerialUpdateDTO $data): PurchaseReceiptItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $purchaseReceiptItemSerial->serial = $data->serial;
+            $purchaseReceiptItemSerial->save();
+
+            $stockSerialTransaction = $purchaseReceiptItemSerial->stockSerialTransaction;
+            if (! $stockSerialTransaction) {
+                $dto = StockSerialTransactionCreateDTO::fromPurchaseReceiptItemSerial($purchaseReceiptItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->create($dto);
+            } else {
+                $dto = StockSerialTransactionUpdateDTO::fromPurchaseReceiptItemSerial($purchaseReceiptItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->update($stockSerialTransaction, $dto);
+            }
+
+            $this->flushCache();
+
+            return $purchaseReceiptItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(PurchaseReceiptItemSerial $purchaseReceiptItemSerial): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockSerialTransaction = $purchaseReceiptItemSerial->stockSerialTransaction;
+            if ($stockSerialTransaction) {
+                $this->stockSerialTransactionActions->delete($stockSerialTransaction);
+            }
+
+            $result = $purchaseReceiptItemSerial->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/Receivable/ReceivableActions.php b/api/app/Actions/Receivable/ReceivableActions.php
new file mode 100644
index 000000000..0aebaea25
--- /dev/null
+++ b/api/app/Actions/Receivable/ReceivableActions.php
@@ -0,0 +1,557 @@
+<?php
+
+namespace App\Actions\Receivable;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\Actions\ReceivablePayment\ReceivablePaymentActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\DTOs\ReceivableCreateDTO;
+use App\DTOs\ReceivablePaymentCreateDTO;
+use App\DTOs\ReceivablePaymentUpdateDTO;
+use App\DTOs\ReceivableUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\Receivable;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ReceivableActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'customer',
+        'cashAccount',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'customer',
+        'cashAccount',
+        'payments.cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly ReceivablePaymentActions $receivablePaymentActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $categoryId,
+        ?int $customerId,
+        ?bool $isPaidOff,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Receivable::select('receivables.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->whereCompanyId('receivables', $companyId)
+            ->whereBranchId('receivables', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $categoryId,
+            $customerId,
+            $isPaidOff,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $categoryId,
+                $customerId,
+                $isPaidOff,
+            ) {
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('receivables.code', 'like', '%'.$search.'%')
+                            ->orWhere('receivables.remarks', 'like', '%'.$search.'%')
+                            ->orWhereHas('category', function ($categoryQuery) use ($search) {
+                                $categoryQuery->where('receivable_categories.code', 'like', '%'.$search.'%')
+                                    ->orWhere('receivable_categories.name', 'like', '%'.$search.'%');
+                            })
+                            ->orWhereHas('customer', function ($customerQuery) use ($search) {
+                                $customerQuery->where('customers.code', 'like', '%'.$search.'%')
+                                    ->orWhere('customers.name', 'like', '%'.$search.'%');
+                            });
+                    });
+                }
+
+                if (! is_null($categoryId)) {
+                    $query->where('receivables.category_id', $categoryId);
+                }
+
+                if (! is_null($customerId)) {
+                    $query->where('receivables.customer_id', $customerId);
+                }
+
+                if (! is_null($isPaidOff)) {
+                    $query->where('receivables.is_paid_off', $isPaidOff);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('receivables.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(receivables.id, '.$includeId.') desc');
+        }
+        $query->orderBy('receivables.date', 'desc');
+        $query->orderBy('receivables.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $categoryId ?? '[null]',
+                    $customerId ?? '[null]',
+                    is_null($isPaidOff) ? '[null]' : ($isPaidOff ? 'true' : 'false'),
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_receivable_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Receivable $receivable): Receivable
+    {
+        return $receivable->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = Receivable::whereCompanyId('receivables', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'REC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = Receivable::whereCompanyId('receivables', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(ReceivableCreateDTO $data): Receivable
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $receivable = new Receivable();
+            $receivable->company_id = $data->companyId;
+            $receivable->branch_id = $data->branchId;
+            $receivable->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $receivable->date = $this->generateDate($data->date);
+            $receivable->category_id = $data->categoryId;
+            $receivable->customer_id = $data->customerId;
+            $receivable->cash_account_id = $data->cashAccountId;
+            $receivable->direct_amount_received = $data->directAmountReceived;
+            $receivable->opening_amount_due = $data->openingAmountDue;
+            $receivable->due_days = $data->dueDays;
+            $receivable->remarks = $data->remarks;
+            $receivable->save();
+
+            if ($receivable->cash_account_id && $receivable->direct_amount_received > 0) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromReceivable($receivable)
+                );
+            }
+
+            foreach ($data->payments as $payment) {
+                $dto = new ReceivablePaymentCreateDTO(
+                    companyId: $receivable->company_id,
+                    branchId: $receivable->branch_id,
+                    code: $payment['code'],
+                    date: $payment['date'],
+                    receivableId: $receivable->id,
+                    cashAccountId: $payment['cash_account_id'],
+                    amount: $payment['amount'],
+                    remarks: $payment['remarks'],
+                );
+                $this->receivablePaymentActions->create($dto, false);
+            }
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $receivable->company_id,
+                branchId: $receivable->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $receivable->date,
+                sourceType: Receivable::class,
+                sourceId: $receivable->id,
+                referenceNo: $receivable->code,
+                remarks: $receivable->remarks,
+                items: (function () use ($receivable) {
+                    $items = [];
+
+                    if ((float) $receivable->direct_amount_received > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $receivable->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $receivable->direct_amount_received,
+                            credit: 0,
+                            remarks: $receivable->remarks,
+                        );
+                    }
+
+                    if ((float) $receivable->opening_amount_due > 0) {
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $receivable->customer?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $receivable->opening_amount_due,
+                            credit: 0,
+                            remarks: $receivable->remarks,
+                        );
+                    }
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $receivable->company->equityCapitalOpeningCapitalChartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $receivable->amount_total,
+                        remarks: $receivable->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            self::updateSummary($receivable);
+
+            $this->flushCache();
+
+            return $receivable;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Receivable $receivable, ReceivableUpdateDTO $data): Receivable
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $receivable->code = $this->generateUniqueCode($receivable->company_id, $data->code, $receivable->id);
+            $receivable->date = $this->generateDate($data->date);
+            $receivable->category_id = $data->categoryId;
+            $receivable->customer_id = $data->customerId;
+            $receivable->cash_account_id = $data->cashAccountId;
+            $receivable->direct_amount_received = $data->directAmountReceived;
+            $receivable->opening_amount_due = $data->openingAmountDue;
+            $receivable->due_days = $data->dueDays;
+            $receivable->remarks = $data->remarks;
+            $receivable->save();
+
+            $cashTransaction = $receivable->cashTransaction;
+            if ($receivable->cash_account_id && $receivable->direct_amount_received > 0) {
+                if (! $cashTransaction) {
+                    $this->cashTransactionActions->create(
+                        data: CashTransactionCreateDTO::fromReceivable($receivable)
+                    );
+                } else {
+                    $this->cashTransactionActions->update(
+                        cashTransaction: $cashTransaction,
+                        data: CashTransactionUpdateDTO::fromReceivable($receivable)
+                    );
+                }
+            } elseif ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            foreach ($data->deletePaymentIds as $deleteId) {
+                $receivablePayment = $receivable->payments()->findOrFail($deleteId);
+                $this->receivablePaymentActions->delete($receivablePayment, false);
+            }
+
+            foreach ($data->payments as $payment) {
+                if (! empty($payment['id'])) {
+                    $receivablePayment = $receivable->payments()->findOrFail($payment['id']);
+                    $dto = new ReceivablePaymentUpdateDTO(
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->receivablePaymentActions->update($receivablePayment, $dto, false);
+                } else {
+                    $dto = new ReceivablePaymentCreateDTO(
+                        companyId: $receivable->company_id,
+                        branchId: $receivable->branch_id,
+                        code: $payment['code'],
+                        date: $payment['date'],
+                        receivableId: $receivable->id,
+                        cashAccountId: $payment['cash_account_id'],
+                        amount: $payment['amount'],
+                        remarks: $payment['remarks'],
+                    );
+                    $this->receivablePaymentActions->create($dto, false);
+                }
+            }
+
+            $journalEntry = $receivable->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $receivable->company_id,
+                    branchId: $receivable->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $receivable->date,
+                    sourceType: Receivable::class,
+                    sourceId: $receivable->id,
+                    referenceNo: $receivable->code,
+                    remarks: $receivable->remarks,
+                    items: (function () use ($receivable) {
+                        $items = [];
+
+                        if ((float) $receivable->direct_amount_received > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $receivable->cashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $receivable->direct_amount_received,
+                                credit: 0,
+                                remarks: $receivable->remarks,
+                            );
+                        }
+
+                        if ((float) $receivable->opening_amount_due > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $receivable->customer?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $receivable->opening_amount_due,
+                                credit: 0,
+                                remarks: $receivable->remarks,
+                            );
+                        }
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $receivable->company->equityCapitalOpeningCapitalChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $receivable->amount_total,
+                            remarks: $receivable->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $receivable->branch_id,
+                    code: $journalEntry->code,
+                    date: $receivable->date,
+                    referenceNo: $receivable->code,
+                    remarks: $receivable->remarks,
+                    items: (function () use ($receivable) {
+                        $items = [];
+
+                        if ((float) $receivable->direct_amount_received > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $receivable->cashAccount?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $receivable->direct_amount_received,
+                                credit: 0,
+                                remarks: $receivable->remarks,
+                            );
+                        }
+
+                        if ((float) $receivable->opening_amount_due > 0) {
+                            $items[] = new JournalEntryItemDTO(
+                                chartOfAccountId: $receivable->customer?->chartOfAccount?->id,
+                                sequence: count($items) + 1,
+                                debit: (float) $receivable->opening_amount_due,
+                                credit: 0,
+                                remarks: $receivable->remarks,
+                            );
+                        }
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $receivable->company->equityCapitalOpeningCapitalChartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $receivable->amount_total,
+                            remarks: $receivable->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            self::updateSummary($receivable);
+
+            $this->flushCache();
+
+            return $receivable;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public static function updateSummary(Receivable $receivable): void
+    {
+        $receivable->refresh();
+
+        $receivable->amount_total = (float) $receivable->direct_amount_received + (float) $receivable->opening_amount_due;
+        $receivable->amount_paid_by_cash_account = (float) $receivable->payments()->sum('amount');
+        // Stock-adjustment settlement link is not implemented yet in this batch.
+        $receivable->amount_paid_by_stock_adjustment = 0;
+        $receivable->amount_due = max(
+            0,
+            (float) $receivable->amount_total
+            - (float) $receivable->amount_paid_by_cash_account
+            - (float) $receivable->amount_paid_by_stock_adjustment
+        );
+        $receivable->is_paid_off = $receivable->amount_due == 0;
+        $receivable->save();
+    }
+
+    public function delete(Receivable $receivable): bool
+    {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $receivable->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            foreach ($receivable->payments as $payment) {
+                $this->receivablePaymentActions->delete($payment, false);
+            }
+
+            $journalEntry = $receivable->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $receivable->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/ReceivableCategory/ReceivableCategoryActions.php b/api/app/Actions/ReceivableCategory/ReceivableCategoryActions.php
new file mode 100644
index 000000000..28810f8f0
--- /dev/null
+++ b/api/app/Actions/ReceivableCategory/ReceivableCategoryActions.php
@@ -0,0 +1,243 @@
+<?php
+
+namespace App\Actions\ReceivableCategory;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ReceivableCategoryCreateDTO;
+use App\DTOs\ReceivableCategoryUpdateDTO;
+use App\Models\ReceivableCategory;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ReceivableCategoryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = ReceivableCategory::with(self::LIST_EAGER_LOADS)
+            ->select('receivable_categories.*')
+            ->whereCompanyId('receivable_categories', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('receivable_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('receivable_categories.name', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('receivable_categories.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(receivable_categories.id, '.$includeId.') desc');
+        }
+        $query->orderBy('receivable_categories.sequence', 'asc')
+            ->orderBy('receivable_categories.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_receivable_category_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(ReceivableCategory $receivableCategory): ReceivableCategory
+    {
+        return $receivableCategory->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(ReceivableCategoryCreateDTO $data): ReceivableCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $receivableCategory = new ReceivableCategory();
+            $receivableCategory->company_id = $data->companyId;
+            $receivableCategory->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $receivableCategory->name = $data->name;
+            $receivableCategory->sequence = $data->sequence;
+            $receivableCategory->save();
+
+            $this->flushCache();
+
+            return $receivableCategory;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(ReceivableCategory $receivableCategory, ReceivableCategoryUpdateDTO $data): ReceivableCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $receivableCategory->code = $this->generateUniqueCode(
+                $receivableCategory->company_id,
+                $data->code,
+                $receivableCategory->id,
+            );
+            $receivableCategory->name = $data->name;
+            $receivableCategory->sequence = $data->sequence;
+            $receivableCategory->save();
+
+            $this->flushCache();
+
+            return $receivableCategory->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(ReceivableCategory $receivableCategory): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $receivableCategory->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $tryCount = 0;
+        do {
+            $count = ReceivableCategory::withTrashed()
+                ->where('company_id', $companyId)
+                ->count() + 1 + $tryCount;
+            $code = 'RCT'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $query = ReceivableCategory::where('company_id', $companyId)
+            ->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('receivable_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $query = ReceivableCategory::where('company_id', $companyId)
+            ->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('receivable_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/ReceivablePayment/ReceivablePaymentActions.php b/api/app/Actions/ReceivablePayment/ReceivablePaymentActions.php
new file mode 100644
index 000000000..94e0f5196
--- /dev/null
+++ b/api/app/Actions/ReceivablePayment/ReceivablePaymentActions.php
@@ -0,0 +1,411 @@
+<?php
+
+namespace App\Actions\ReceivablePayment;
+
+use App\Actions\CashTransaction\CashTransactionActions;
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\Actions\Receivable\ReceivableActions;
+use App\DTOs\CashTransactionCreateDTO;
+use App\DTOs\CashTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\DTOs\ReceivablePaymentCreateDTO;
+use App\DTOs\ReceivablePaymentUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\ReceivablePayment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class ReceivablePaymentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'receivable.category',
+        'receivable.customer',
+        'cashAccount',
+    ];
+
+    public function __construct(
+        private readonly CashTransactionActions $cashTransactionActions,
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?int $receivableId,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = ReceivablePayment::with(self::LIST_EAGER_LOADS)
+            ->select('receivable_payments.*')
+            ->whereCompanyId('receivable_payments', $companyId)
+            ->whereBranchId('receivable_payments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $receivableId,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+                $receivableId,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('receivable_payments.code', 'like', '%'.$search.'%')
+                            ->orWhere('receivable_payments.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if (! is_null($receivableId)) {
+                    $query->where('receivable_payments.receivable_id', $receivableId);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('receivable_payments.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(receivable_payments.id, '.$includeId.') desc');
+        }
+        $query->orderBy('receivable_payments.date', 'desc');
+        $query->orderBy('receivable_payments.code', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $receivableId ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_receivable_payment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(ReceivablePayment $receivablePayment): ReceivablePayment
+    {
+        return $receivablePayment->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $tryCount = 0;
+
+            do {
+                $count = ReceivablePayment::whereCompanyId('receivable_payments', $companyId)->withTrashed()->count() + 1 + $tryCount;
+                $code = 'RPM'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        }
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = ReceivablePayment::whereCompanyId('receivable_payments', $companyId)
+            ->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0;
+    }
+
+    public function create(ReceivablePaymentCreateDTO $data, bool $updateParentSummary = true): ReceivablePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $receivablePayment = new ReceivablePayment();
+            $receivablePayment->company_id = $data->companyId;
+            $receivablePayment->branch_id = $data->branchId;
+            $receivablePayment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $receivablePayment->date = $this->generateDate($data->date);
+            $receivablePayment->receivable_id = $data->receivableId;
+            $receivablePayment->cash_account_id = $data->cashAccountId;
+            $receivablePayment->amount = $data->amount;
+            $receivablePayment->remarks = $data->remarks;
+            $receivablePayment->save();
+
+            $this->cashTransactionActions->create(
+                data: CashTransactionCreateDTO::fromReceivablePayment($receivablePayment)
+            );
+
+            $journalEntryDTO = new JournalEntryCreateDTO(
+                companyId: $receivablePayment->company_id,
+                branchId: $receivablePayment->branch_id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                date: $receivablePayment->date,
+                sourceType: ReceivablePayment::class,
+                sourceId: $receivablePayment->id,
+                referenceNo: $receivablePayment->code,
+                remarks: $receivablePayment->remarks,
+                items: (function () use ($receivablePayment) {
+                    $items = [];
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $receivablePayment->cashAccount?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: (float) $receivablePayment->amount,
+                        credit: 0,
+                        remarks: $receivablePayment->remarks,
+                    );
+
+                    $items[] = new JournalEntryItemDTO(
+                        chartOfAccountId: $receivablePayment->receivable->customer?->chartOfAccount?->id,
+                        sequence: count($items) + 1,
+                        debit: 0,
+                        credit: (float) $receivablePayment->amount,
+                        remarks: $receivablePayment->remarks,
+                    );
+
+                    return $items;
+                })(),
+            );
+            $this->journalEntryActions->create($journalEntryDTO);
+
+            if ($updateParentSummary) {
+                ReceivableActions::updateSummary($receivablePayment->receivable);
+                $receivablePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $receivablePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(ReceivablePayment $receivablePayment, ReceivablePaymentUpdateDTO $data, bool $updateParentSummary = true): ReceivablePayment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $receivablePayment->code = $this->generateUniqueCode($receivablePayment->company_id, $data->code, $receivablePayment->id);
+            $receivablePayment->date = $this->generateDate($data->date);
+            $receivablePayment->cash_account_id = $data->cashAccountId;
+            $receivablePayment->amount = $data->amount;
+            $receivablePayment->remarks = $data->remarks;
+            $receivablePayment->save();
+
+            $cashTransaction = $receivablePayment->cashTransaction;
+            if (! $cashTransaction) {
+                $this->cashTransactionActions->create(
+                    data: CashTransactionCreateDTO::fromReceivablePayment($receivablePayment)
+                );
+            } else {
+                $this->cashTransactionActions->update(
+                    cashTransaction: $cashTransaction,
+                    data: CashTransactionUpdateDTO::fromReceivablePayment($receivablePayment)
+                );
+            }
+
+            $journalEntry = $receivablePayment->journalEntry;
+            if (! $journalEntry) {
+                $journalEntryDTO = new JournalEntryCreateDTO(
+                    companyId: $receivablePayment->company_id,
+                    branchId: $receivablePayment->branch_id,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    date: $receivablePayment->date,
+                    sourceType: ReceivablePayment::class,
+                    sourceId: $receivablePayment->id,
+                    referenceNo: $receivablePayment->code,
+                    remarks: $receivablePayment->remarks,
+                    items: (function () use ($receivablePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $receivablePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $receivablePayment->amount,
+                            credit: 0,
+                            remarks: $receivablePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $receivablePayment->receivable->customer?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $receivablePayment->amount,
+                            remarks: $receivablePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->create($journalEntryDTO);
+            } else {
+                $journalEntryDTO = new JournalEntryUpdateDTO(
+                    branchId: $receivablePayment->branch_id,
+                    code: $journalEntry->code,
+                    date: $receivablePayment->date,
+                    referenceNo: $receivablePayment->code,
+                    remarks: $receivablePayment->remarks,
+                    items: (function () use ($receivablePayment) {
+                        $items = [];
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $receivablePayment->cashAccount?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: (float) $receivablePayment->amount,
+                            credit: 0,
+                            remarks: $receivablePayment->remarks,
+                        );
+
+                        $items[] = new JournalEntryItemDTO(
+                            chartOfAccountId: $receivablePayment->receivable->customer?->chartOfAccount?->id,
+                            sequence: count($items) + 1,
+                            debit: 0,
+                            credit: (float) $receivablePayment->amount,
+                            remarks: $receivablePayment->remarks,
+                        );
+
+                        return $items;
+                    })(),
+                );
+                $this->journalEntryActions->update($journalEntry, $journalEntryDTO);
+            }
+
+            if ($updateParentSummary) {
+                ReceivableActions::updateSummary($receivablePayment->receivable);
+                $receivablePayment->refresh();
+            }
+
+            $this->flushCache();
+
+            return $receivablePayment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(
+        ReceivablePayment $receivablePayment,
+        bool $updateParentSummary = true,
+    ): bool {
+        $timer_start = microtime(true);
+        $retval = false;
+
+        try {
+            $cashTransaction = $receivablePayment->cashTransaction;
+            if ($cashTransaction) {
+                $this->cashTransactionActions->delete($cashTransaction);
+            }
+
+            $journalEntry = $receivablePayment->journalEntry;
+            if ($journalEntry) $this->journalEntryActions->delete($journalEntry);
+
+            $retval = $receivablePayment->delete();
+
+            if ($updateParentSummary) {
+                ReceivableActions::updateSummary($receivablePayment->receivable);
+            }
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/Role/RoleActions.php b/api/app/Actions/Role/RoleActions.php
index 04a62f8a1..4526c37e6 100644
--- a/api/app/Actions/Role/RoleActions.php
+++ b/api/app/Actions/Role/RoleActions.php
@@ -2,7 +2,7 @@
 
 namespace App\Actions\Role;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Permission;
 use App\Models\Role;
 use App\Traits\CacheHelper;
@@ -14,6 +14,10 @@ class RoleActions
     use CacheHelper;
     use LoggerHelper;
 
+    private const DETAIL_EAGER_LOADS = [
+        'permissions',
+    ];
+
     public function __construct()
     {
     }
@@ -27,7 +31,7 @@ public function readAny(array $relationship = [], array $onlyName = [], bool $ex
         }
 
         if ($excludeDevAdminRole) {
-            $role = $role->whereNotIn('name', [UserRoles::DEVELOPER->value, UserRoles::ADMINISTRATOR->value]);
+            $role = $role->whereNotIn('name', [UserRolesEnum::DEVELOPER->value, UserRolesEnum::ADMINISTRATOR->value]);
         }
 
         return $role->get();
@@ -35,7 +39,7 @@ public function readAny(array $relationship = [], array $onlyName = [], bool $ex
 
     public function read(Role $role): Role
     {
-        return $role->with('permissions')->first();
+        return $role->load(self::DETAIL_EAGER_LOADS);
     }
 
     public function readBy(string $key, string $value): ?Role
@@ -65,5 +69,7 @@ public function getAllPermissions(string $roleName = ''): Collection
         if ($role) {
             return $role->permissions()->get();
         }
+
+        return collect([]);
     }
 }
diff --git a/api/app/Actions/StockAdjustment/StockAdjustmentActions.php b/api/app/Actions/StockAdjustment/StockAdjustmentActions.php
new file mode 100644
index 000000000..8244a7c0c
--- /dev/null
+++ b/api/app/Actions/StockAdjustment/StockAdjustmentActions.php
@@ -0,0 +1,447 @@
+<?php
+
+namespace App\Actions\StockAdjustment;
+
+use App\Actions\StockAdjustmentInItem\StockAdjustmentInItemActions;
+use App\Actions\StockAdjustmentOutItem\StockAdjustmentOutItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockAdjustmentCreateDTO;
+use App\DTOs\StockAdjustmentInItemCreateDTO;
+use App\DTOs\StockAdjustmentInItemUpdateDTO;
+use App\DTOs\StockAdjustmentOutItemCreateDTO;
+use App\DTOs\StockAdjustmentOutItemUpdateDTO;
+use App\DTOs\StockAdjustmentUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\Company;
+use App\Models\StockAdjustment;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockAdjustmentActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'inWarehouse',
+        'outWarehouse',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'category',
+        'inWarehouse',
+        'outWarehouse',
+        'inItems.productUnit.product.images',
+        'inItems.productUnit.unit',
+        'inItems.serials',
+        'outItems.productUnit.product.images',
+        'outItems.productUnit.unit',
+        'outItems.serials',
+    ];
+
+    private $stockAdjustmentInItemActions;
+
+    private $stockAdjustmentOutItemActions;
+
+    public function __construct(
+        StockAdjustmentInItemActions $stockAdjustmentInItemActions,
+        StockAdjustmentOutItemActions $stockAdjustmentOutItemActions,
+    ) {
+        $this->stockAdjustmentInItemActions = $stockAdjustmentInItemActions;
+        $this->stockAdjustmentOutItemActions = $stockAdjustmentOutItemActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+
+        ?string $search,
+        ?string $startDate,
+        ?string $endDate,
+        ?int $categoryId,
+        ?int $inWarehouseId,
+        ?int $outWarehouseId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockAdjustment::select('stock_adjustments.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->join('companies', 'companies.id', '=', 'stock_adjustments.company_id')
+            ->whereCompanyId('stock_adjustments', $companyId)
+            ->whereBranchId('stock_adjustments', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $startDate,
+            $endDate,
+            $categoryId,
+            $inWarehouseId,
+            $outWarehouseId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('code', 'like', '%'.$search.'%')
+                        ->orWhere('remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('stock_adjustments.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('stock_adjustments.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+
+            if ($categoryId) {
+                $query->where('stock_adjustments.category_id', $categoryId);
+            }
+
+            if ($inWarehouseId) {
+                $query->where('stock_adjustments.in_warehouse_id', $inWarehouseId);
+            }
+
+            if ($outWarehouseId) {
+                $query->where('stock_adjustments.out_warehouse_id', $outWarehouseId);
+            }
+        });
+
+        $query->orderBy('stock_adjustments.date', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $categoryId ?? '[null]',
+                    $inWarehouseId ?? '[null]',
+                    $outWarehouseId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_stock_adjustment_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockAdjustment $stockAdjustment): StockAdjustment
+    {
+        return $stockAdjustment->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function create(StockAdjustmentCreateDTO $data): StockAdjustment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustment = new StockAdjustment();
+            $stockAdjustment->company_id = $data->companyId;
+            $stockAdjustment->branch_id = $data->branchId;
+            $stockAdjustment->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $stockAdjustment->date = $this->generateDate($data->date);
+            $stockAdjustment->category_id = $data->categoryId;
+            $stockAdjustment->in_warehouse_id = $data->inWarehouseId;
+            $stockAdjustment->out_warehouse_id = $data->outWarehouseId;
+            $stockAdjustment->remarks = $data->remarks;
+            $stockAdjustment->is_posted = $data->isPosted;
+            $stockAdjustment->save();
+
+            $this->saveInItems($stockAdjustment, $data->inItems);
+            $this->saveOutItems($stockAdjustment, $data->outItems);
+
+            $stockAdjustment->total_incoming_item_qty = $stockAdjustment->inItems()->sum('qty');
+            $stockAdjustment->total_incoming_item_cogs = $stockAdjustment->inItems()->sum('product_unit_total_cogs');
+            $stockAdjustment->total_outgoing_item_qty = $stockAdjustment->outItems()->sum('qty');
+            $stockAdjustment->save();
+
+            $this->flushCache();
+
+            return $stockAdjustment;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    private function saveInItems(StockAdjustment $stockAdjustment, array $inItems): void
+    {
+        foreach ($inItems as $inItem) {
+            $data = new StockAdjustmentInItemCreateDTO(
+                companyId: $stockAdjustment->company_id,
+                branchId: $stockAdjustment->branch_id,
+                stockAdjustmentId: $stockAdjustment->id,
+                qty: $inItem['qty'],
+                productUnitId: $inItem['product_unit_id'],
+                productUnitConversionValue: $inItem['product_unit_conversion_value'],
+                productUnitCogs: $inItem['product_unit_cogs'],
+                remarks: $inItem['remarks'],
+                serials: $inItem['serials'],
+            );
+            $this->stockAdjustmentInItemActions->create($data);
+        }
+    }
+
+    private function saveOutItems(StockAdjustment $stockAdjustment, array $outItems): void
+    {
+        foreach ($outItems as $outItem) {
+            $data = new StockAdjustmentOutItemCreateDTO(
+                companyId: $stockAdjustment->company_id,
+                branchId: $stockAdjustment->branch_id,
+                stockAdjustmentId: $stockAdjustment->id,
+                qty: $outItem['qty'],
+                productUnitId: $outItem['product_unit_id'],
+                productUnitConversionValue: $outItem['product_unit_conversion_value'],
+                remarks: $outItem['remarks'],
+                serials: $outItem['serials'],
+            );
+            $this->stockAdjustmentOutItemActions->create($data);
+        }
+    }
+
+    public function update(StockAdjustment $stockAdjustment, StockAdjustmentUpdateDTO $data): StockAdjustment
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustment->company_id = $data->companyId;
+            $stockAdjustment->branch_id = $data->branchId;
+            $stockAdjustment->code = $this->generateUniqueCode($data->companyId, $data->code, $stockAdjustment->id);
+            $stockAdjustment->date = $this->generateDate($data->date);
+            $stockAdjustment->category_id = $data->categoryId;
+            $stockAdjustment->in_warehouse_id = $data->inWarehouseId;
+            $stockAdjustment->out_warehouse_id = $data->outWarehouseId;
+            $stockAdjustment->remarks = $data->remarks;
+            $stockAdjustment->is_posted = $data->isPosted;
+            $stockAdjustment->save();
+
+            $this->updateInItems($stockAdjustment, $data->deleteInItemIds, $data->inItems);
+            $this->updateOutItems($stockAdjustment, $data->deleteOutItemIds, $data->outItems);
+
+            $stockAdjustment->total_incoming_item_qty = $stockAdjustment->inItems()->sum('qty');
+            $stockAdjustment->total_incoming_item_cogs = $stockAdjustment->inItems()->sum('product_unit_total_cogs');
+            $stockAdjustment->total_outgoing_item_qty = $stockAdjustment->outItems()->sum('qty');
+            $stockAdjustment->save();
+
+            $this->flushCache();
+
+            return $stockAdjustment->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    private function updateInItems(StockAdjustment $stockAdjustment, array $deleteIds, array $inItems): void
+    {
+        foreach ($deleteIds as $deleteId) {
+            $stockAdjustmentInItem = $stockAdjustment->inItems()->findOrFail($deleteId);
+            $this->stockAdjustmentInItemActions->delete($stockAdjustmentInItem);
+        }
+
+        foreach ($inItems as $inItem) {
+            if ($inItem['id']) {
+                $stockAdjustmentInItem = $stockAdjustment->inItems()->findOrFail($inItem['id']);
+
+                $data = new StockAdjustmentInItemUpdateDTO(
+                    qty: $inItem['qty'],
+                    productUnitId: $inItem['product_unit_id'],
+                    productUnitConversionValue: $inItem['product_unit_conversion_value'],
+                    productUnitCogs: $inItem['product_unit_cogs'],
+                    remarks: $inItem['remarks'],
+
+                    deleteSerialIds: $inItem['delete_serial_ids'],
+                    serials: $inItem['serials'],
+                );
+
+                $this->stockAdjustmentInItemActions->update($stockAdjustmentInItem, $data);
+            } else {
+                $data = new StockAdjustmentInItemCreateDTO(
+                    companyId: $stockAdjustment->company_id,
+                    branchId: $stockAdjustment->branch_id,
+                    stockAdjustmentId: $stockAdjustment->id,
+                    qty: $inItem['qty'],
+                    productUnitId: $inItem['product_unit_id'],
+                    productUnitConversionValue: $inItem['product_unit_conversion_value'],
+                    productUnitCogs: $inItem['product_unit_cogs'],
+                    remarks: $inItem['remarks'],
+
+                    serials: $inItem['serials'],
+                );
+                $this->stockAdjustmentInItemActions->create($data);
+            }
+        }
+    }
+
+    private function updateOutItems(StockAdjustment $stockAdjustment, array $deleteIds, array $outItems): void
+    {
+        foreach ($deleteIds as $deleteId) {
+            $stockAdjustmentOutItem = $stockAdjustment->outItems()->findOrFail($deleteId);
+            $this->stockAdjustmentOutItemActions->delete($stockAdjustmentOutItem);
+        }
+
+        foreach ($outItems as $outItem) {
+            if ($outItem['id']) {
+                $stockAdjustmentOutItem = $stockAdjustment->outItems()->findOrFail($outItem['id']);
+
+                $data = new StockAdjustmentOutItemUpdateDTO(
+                    qty: $outItem['qty'],
+                    productUnitId: $outItem['product_unit_id'],
+                    productUnitConversionValue: $outItem['product_unit_conversion_value'],
+                    remarks: $outItem['remarks'],
+
+                    deleteSerialIds: $outItem['delete_serial_ids'],
+                    serials: $outItem['serials'],
+                );
+
+                $this->stockAdjustmentOutItemActions->update($stockAdjustmentOutItem, $data);
+            } else {
+                $data = new StockAdjustmentOutItemCreateDTO(
+                    companyId: $stockAdjustment->company_id,
+                    branchId: $stockAdjustment->branch_id,
+                    stockAdjustmentId: $stockAdjustment->id,
+                    qty: $outItem['qty'],
+                    productUnitId: $outItem['product_unit_id'],
+                    productUnitConversionValue: $outItem['product_unit_conversion_value'],
+                    remarks: $outItem['remarks'],
+
+                    serials: $outItem['serials'],
+                );
+                $this->stockAdjustmentOutItemActions->create($data);
+            }
+        }
+    }
+
+    public function delete(StockAdjustment $stockAdjustment): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $stockAdjustment->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $company = Company::find($companyId);
+
+            $tryCount = 0;
+            do {
+                $count = $company->stockAdjustments()->withTrashed()->count() + 1 + $tryCount;
+                $code = 'SA'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        } else {
+            return $code;
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = StockAdjustment::where('company_id', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0 ? true : false;
+    }
+}
diff --git a/api/app/Actions/StockAdjustmentCategory/StockAdjustmentCategoryActions.php b/api/app/Actions/StockAdjustmentCategory/StockAdjustmentCategoryActions.php
new file mode 100644
index 000000000..37be12b5f
--- /dev/null
+++ b/api/app/Actions/StockAdjustmentCategory/StockAdjustmentCategoryActions.php
@@ -0,0 +1,258 @@
+<?php
+
+namespace App\Actions\StockAdjustmentCategory;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockAdjustmentCategoryCreateDTO;
+use App\DTOs\StockAdjustmentCategoryUpdateDTO;
+use App\Models\Company;
+use App\Models\StockAdjustmentCategory;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockAdjustmentCategoryActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockAdjustmentCategory::with(self::LIST_EAGER_LOADS)->select('stock_adjustment_categories.*')
+            ->where('stock_adjustment_categories.company_id', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('stock_adjustment_categories.code', 'like', '%'.$search.'%')
+                            ->orWhere('stock_adjustment_categories.name', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('stock_adjustment_categories.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(stock_adjustment_categories.id, '.$includeId.') desc');
+        }
+        $query->orderBy('stock_adjustment_categories.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    empty($search) ? '[empty]' : $search,
+                    $companyId,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockAdjustmentCategory $stockAdjustmentCategory): StockAdjustmentCategory
+    {
+        return $stockAdjustmentCategory->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockAdjustmentCategoryCreateDTO $data): StockAdjustmentCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentCategory = new StockAdjustmentCategory();
+            $stockAdjustmentCategory->company_id = $data->companyId;
+            $stockAdjustmentCategory->code = $this->generateUniqueCode(
+                $data->companyId,
+                $data->code,
+                null,
+            );
+            $stockAdjustmentCategory->name = $data->name;
+            $stockAdjustmentCategory->save();
+
+            $this->flushCache();
+
+            return $stockAdjustmentCategory;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockAdjustmentCategory $stockAdjustmentCategory, StockAdjustmentCategoryUpdateDTO $data): StockAdjustmentCategory
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentCategory->code = $this->generateUniqueCode(
+                $stockAdjustmentCategory->company_id,
+                $data->code,
+                $stockAdjustmentCategory->id,
+            );
+            $stockAdjustmentCategory->name = $data->name;
+            $stockAdjustmentCategory->save();
+
+            $this->flushCache();
+
+            return $stockAdjustmentCategory->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockAdjustmentCategory $stockAdjustmentCategory): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $stockAdjustmentCategory->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->stockAdjustmentCategories()
+                ->withTrashed()
+                ->count() + 1 + $tryCount;
+            $code = 'SAC'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->stockAdjustmentCategories()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->stockAdjustmentCategories()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('stock_adjustment_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->stockAdjustmentCategories()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->stockAdjustmentCategories()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('stock_adjustment_categories.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/StockAdjustmentInItem/StockAdjustmentInItemActions.php b/api/app/Actions/StockAdjustmentInItem/StockAdjustmentInItemActions.php
new file mode 100644
index 000000000..55c4c1ad0
--- /dev/null
+++ b/api/app/Actions/StockAdjustmentInItem/StockAdjustmentInItemActions.php
@@ -0,0 +1,347 @@
+<?php
+
+namespace App\Actions\StockAdjustmentInItem;
+
+use App\Actions\StockAdjustmentInItemSerial\StockAdjustmentInItemSerialActions;
+use App\Actions\StockTransaction\StockTransactionActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockAdjustmentInItemCreateDTO;
+use App\DTOs\StockAdjustmentInItemSerialCreateDTO;
+use App\DTOs\StockAdjustmentInItemSerialUpdateDTO;
+use App\DTOs\StockAdjustmentInItemUpdateDTO;
+use App\DTOs\StockTransactionCreateDTO;
+use App\DTOs\StockTransactionUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\StockAdjustmentInItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockAdjustmentInItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'stockAdjustment.category',
+        'stockAdjustment.inWarehouse',
+        'stockAdjustment.outWarehouse',
+        'productUnit.unit',
+        'productUnit.product.category',
+        'productUnit.product.brand',
+        'productUnit.product.baseProductUnit.unit',
+        'productUnit.product.images',
+        'productUnit.product.mainImage',
+        'serials',
+    ];
+
+    private $stockAdjustmentInItemSerialActions;
+
+    private $stockTransactionActions;
+
+    public function __construct(
+        StockTransactionActions $stockTransactionActions,
+        StockAdjustmentInItemSerialActions $stockAdjustmentInItemSerialActions,
+    ) {
+        $this->stockTransactionActions = $stockTransactionActions;
+        $this->stockAdjustmentInItemSerialActions = $stockAdjustmentInItemSerialActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $stockAdjustmentCode,
+        ?string $stockAdjustmentStartDate,
+        ?string $stockAdjustmentEndDate,
+        ?int $stockAdjustmentCategoryId,
+        ?int $stockAdjustmentInWarehouseId,
+        ?int $stockAdjustmentOutWarehouseId,
+        ?string $productUnitCode,
+        ?string $productUnitProductName,
+        ?int $productUnitProductCategoryId,
+        ?int $productUnitProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockAdjustmentInItem::select('stock_adjustment_in_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'stock_adjustment_in_items.company_id')
+            ->join('stock_adjustments', 'stock_adjustments.id', '=', 'stock_adjustment_in_items.stock_adjustment_id')
+            ->join('product_units', 'product_units.id', '=', 'stock_adjustment_in_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'product_units.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('stock_adjustment_in_items', $companyId)
+            ->whereBranchId('stock_adjustment_in_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $stockAdjustmentCode,
+            $stockAdjustmentStartDate,
+            $stockAdjustmentEndDate,
+            $stockAdjustmentCategoryId,
+            $stockAdjustmentInWarehouseId,
+            $stockAdjustmentOutWarehouseId,
+            $productUnitCode,
+            $productUnitProductName,
+            $productUnitProductCategoryId,
+            $productUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            $stockAdjustmentStartDateUtc = $stockAdjustmentStartDate ? TimezoneHelper::convertToUTC($stockAdjustmentStartDate) : null;
+            if ($stockAdjustmentStartDateUtc) {
+                $query->where('stock_adjustments.date', '>=', $stockAdjustmentStartDateUtc);
+            }
+
+            $stockAdjustmentEndDateUtc = $stockAdjustmentEndDate ? TimezoneHelper::convertToUTC($stockAdjustmentEndDate) : null;
+            if ($stockAdjustmentEndDateUtc) {
+                $query->where('stock_adjustments.date', '<=', $stockAdjustmentEndDateUtc);
+            }
+
+            if ($stockAdjustmentCode) {
+                $query->where('stock_adjustments.code', $stockAdjustmentCode);
+            }
+
+            if ($stockAdjustmentCategoryId) {
+                $query->where('stock_adjustments.category_id', $stockAdjustmentCategoryId);
+            }
+
+            if ($stockAdjustmentInWarehouseId) {
+                $query->where('stock_adjustments.in_warehouse_id', $stockAdjustmentInWarehouseId);
+            }
+
+            if ($stockAdjustmentOutWarehouseId) {
+                $query->where('stock_adjustments.out_warehouse_id', $stockAdjustmentOutWarehouseId);
+            }
+
+            if ($productUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$productUnitCode.'%');
+            }
+
+            if ($productUnitProductName) {
+                $query->where('products.name', 'like', '%'.$productUnitProductName.'%');
+            }
+
+            if ($productUnitProductCategoryId) {
+                $query->where('products.category_id', $productUnitProductCategoryId);
+            }
+
+            if ($productUnitProductBrandId) {
+                $query->where('products.brand_id', $productUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('stock_adjustments.date', 'desc')
+            ->orderBy('stock_adjustment_in_items.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($stockAdjustmentCode) ? '[empty]' : $stockAdjustmentCode,
+                    $stockAdjustmentStartDate ?? '[null]',
+                    $stockAdjustmentEndDate ?? '[null]',
+                    $stockAdjustmentCategoryId ?? '[null]',
+                    $stockAdjustmentInWarehouseId ?? '[null]',
+                    $stockAdjustmentOutWarehouseId ?? '[null]',
+                    empty($productUnitCode) ? '[empty]' : $productUnitCode,
+                    empty($productUnitProductName) ? '[empty]' : $productUnitProductName,
+                    $productUnitProductCategoryId ?? '[null]',
+                    $productUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_stock_adjustment_in_item_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockAdjustmentInItem $stockAdjustmentInItem): StockAdjustmentInItem
+    {
+        return $stockAdjustmentInItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockAdjustmentInItemCreateDTO $data): StockAdjustmentInItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentInItem = new StockAdjustmentInItem();
+            $stockAdjustmentInItem->company_id = $data->companyId;
+            $stockAdjustmentInItem->branch_id = $data->branchId;
+            $stockAdjustmentInItem->stock_adjustment_id = $data->stockAdjustmentId;
+            $stockAdjustmentInItem->qty = $data->qty;
+            $stockAdjustmentInItem->product_unit_id = $data->productUnitId;
+            $stockAdjustmentInItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $stockAdjustmentInItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $stockAdjustmentInItem->product_unit_cogs = $data->productUnitCogs;
+            $stockAdjustmentInItem->product_unit_total_cogs = $data->qty * $data->productUnitCogs;
+            $stockAdjustmentInItem->product_unit_base_unit_cogs = $stockAdjustmentInItem->product_unit_total_cogs / $stockAdjustmentInItem->product_unit_qty_base;
+            $stockAdjustmentInItem->remarks = $data->remarks;
+            $stockAdjustmentInItem->save();
+
+            $this->stockTransactionActions->create(
+                data: StockTransactionCreateDTO::fromStockAdjustmentInItem($stockAdjustmentInItem)
+            );
+
+            foreach ($data->serials as $serial) {
+                $dto = StockAdjustmentInItemSerialCreateDTO::fromStockAdjustmentInItem($stockAdjustmentInItem, $serial['serial']);
+                $this->stockAdjustmentInItemSerialActions->create($dto);
+            }
+
+            $this->flushCache();
+
+            return $stockAdjustmentInItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockAdjustmentInItem $stockAdjustmentInItem, StockAdjustmentInItemUpdateDTO $data): StockAdjustmentInItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentInItem->qty = $data->qty;
+            $stockAdjustmentInItem->product_unit_id = $data->productUnitId;
+            $stockAdjustmentInItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $stockAdjustmentInItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $stockAdjustmentInItem->product_unit_cogs = $data->productUnitCogs;
+            $stockAdjustmentInItem->product_unit_total_cogs = $data->qty * $data->productUnitCogs;
+            $stockAdjustmentInItem->product_unit_base_unit_cogs = $stockAdjustmentInItem->product_unit_total_cogs / $stockAdjustmentInItem->product_unit_qty_base;
+            $stockAdjustmentInItem->remarks = $data->remarks;
+            $stockAdjustmentInItem->save();
+
+            $stockTransaction = $stockAdjustmentInItem->stockTransaction;
+            if (! $stockTransaction) {
+                $dto = StockTransactionCreateDTO::fromStockAdjustmentInItem($stockAdjustmentInItem);
+                $stockTransaction = $this->stockTransactionActions->create($dto);
+            } else {
+                $dto = StockTransactionUpdateDTO::fromStockAdjustmentInItem($stockAdjustmentInItem);
+                $this->stockTransactionActions->update($stockTransaction, $dto);
+            }
+
+            foreach ($data->deleteSerialIds as $deleteId) {
+                $stockAdjustmentInItemSerial = $stockAdjustmentInItem->serials()->findOrFail($deleteId);
+                $this->stockAdjustmentInItemSerialActions->delete($stockAdjustmentInItemSerial);
+            }
+
+            foreach ($data->serials as $serial) {
+                if ($serial['id']) {
+                    $stockAdjustmentInItemSerial = $stockAdjustmentInItem->serials()->findOrFail($serial['id']);
+                    $dto = StockAdjustmentInItemSerialUpdateDTO::fromStockAdjustmentInItemSerial($stockAdjustmentInItemSerial, $serial['serial']);
+
+                    $this->stockAdjustmentInItemSerialActions->update($stockAdjustmentInItemSerial, $dto);
+                } else {
+                    $dto = StockAdjustmentInItemSerialCreateDTO::fromStockAdjustmentInItem($stockAdjustmentInItem, $serial['serial']);
+                    $this->stockAdjustmentInItemSerialActions->create($dto);
+                }
+            }
+
+            $this->flushCache();
+
+            return $stockAdjustmentInItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockAdjustmentInItem $stockAdjustmentInItem): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransaction = $stockAdjustmentInItem->stockTransaction;
+            if ($stockTransaction) {
+                $this->stockTransactionActions->delete($stockTransaction);
+            }
+
+            $serials = $stockAdjustmentInItem->serials;
+            foreach ($serials as $serial) {
+                $this->stockAdjustmentInItemSerialActions->delete($serial);
+            }
+
+            $result = $stockAdjustmentInItem->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialActions.php b/api/app/Actions/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialActions.php
new file mode 100644
index 000000000..a61867be8
--- /dev/null
+++ b/api/app/Actions/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialActions.php
@@ -0,0 +1,307 @@
+<?php
+
+namespace App\Actions\StockAdjustmentInItemSerial;
+
+use App\Actions\StockSerialTransaction\StockSerialTransactionActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockAdjustmentInItemSerialCreateDTO;
+use App\DTOs\StockAdjustmentInItemSerialUpdateDTO;
+use App\DTOs\StockSerialTransactionCreateDTO;
+use App\DTOs\StockSerialTransactionUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\StockAdjustmentInItemSerial;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockAdjustmentInItemSerialActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'stockAdjustment.category',
+        'stockAdjustment.inWarehouse',
+        'stockAdjustment.outWarehouse',
+        'stockAdjustmentInItem.company',
+        'stockAdjustmentInItem.branch',
+        'stockAdjustmentInItem.stockAdjustment.category',
+        'stockAdjustmentInItem.stockAdjustment.inWarehouse',
+        'stockAdjustmentInItem.stockAdjustment.outWarehouse',
+        'stockAdjustmentInItem.productUnit.unit',
+        'stockAdjustmentInItem.productUnit.product.category',
+        'stockAdjustmentInItem.productUnit.product.brand',
+        'stockAdjustmentInItem.productUnit.product.baseProductUnit.unit',
+        'stockAdjustmentInItem.productUnit.product.images',
+        'stockAdjustmentInItem.productUnit.product.mainImage',
+    ];
+
+    protected StockSerialTransactionActions $stockSerialTransactionActions;
+
+    public function __construct(StockSerialTransactionActions $stockSerialTransactionActions)
+    {
+        $this->stockSerialTransactionActions = $stockSerialTransactionActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $stockAdjustmentCode,
+        ?string $stockAdjustmentStartDate,
+        ?string $stockAdjustmentEndDate,
+        ?int $stockAdjustmentCategoryId,
+        ?int $stockAdjustmentInWarehouseId,
+        ?int $stockAdjustmentOutWarehouseId,
+        ?string $stockAdjustmentProductUnitCode,
+        ?string $stockAdjustmentProductUnitProductName,
+        ?int $stockAdjustmentProductUnitProductCategoryId,
+        ?int $stockAdjustmentProductUnitProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockAdjustmentInItemSerial::select('stock_adjustment_in_item_serials.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'stock_adjustment_in_item_serials.company_id')
+            ->join('stock_adjustments', 'stock_adjustments.id', '=', 'stock_adjustment_in_item_serials.stock_adjustment_id')
+            ->join('stock_adjustment_in_items', 'stock_adjustment_in_items.id', '=', 'stock_adjustment_in_item_serials.stock_adjustment_in_item_id')
+            ->join('product_units', 'product_units.id', '=', 'stock_adjustment_in_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'product_units.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('stock_adjustment_in_item_serials', $companyId)
+            ->whereBranchId('stock_adjustment_in_item_serials', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $stockAdjustmentCode,
+            $stockAdjustmentStartDate,
+            $stockAdjustmentEndDate,
+            $stockAdjustmentCategoryId,
+            $stockAdjustmentInWarehouseId,
+            $stockAdjustmentOutWarehouseId,
+            $stockAdjustmentProductUnitCode,
+            $stockAdjustmentProductUnitProductName,
+            $stockAdjustmentProductUnitProductCategoryId,
+            $stockAdjustmentProductUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where('serial', 'like', '%'.$search.'%');
+            }
+
+            $stockAdjustmentStartDateUtc = $stockAdjustmentStartDate ? TimezoneHelper::convertToUTC($stockAdjustmentStartDate) : null;
+            if ($stockAdjustmentStartDateUtc) {
+                $query->where('stock_adjustments.date', '>=', $stockAdjustmentStartDateUtc);
+            }
+
+            $stockAdjustmentEndDateUtc = $stockAdjustmentEndDate ? TimezoneHelper::convertToUTC($stockAdjustmentEndDate) : null;
+            if ($stockAdjustmentEndDateUtc) {
+                $query->where('stock_adjustments.date', '<=', $stockAdjustmentEndDateUtc);
+            }
+
+            if ($stockAdjustmentCode) {
+                $query->where('stock_adjustments.code', $stockAdjustmentCode);
+            }
+
+            if ($stockAdjustmentCategoryId) {
+                $query->where('stock_adjustments.category_id', $stockAdjustmentCategoryId);
+            }
+
+            if ($stockAdjustmentInWarehouseId) {
+                $query->where('stock_adjustments.in_warehouse_id', $stockAdjustmentInWarehouseId);
+            }
+
+            if ($stockAdjustmentOutWarehouseId) {
+                $query->where('stock_adjustments.out_warehouse_id', $stockAdjustmentOutWarehouseId);
+            }
+
+            if ($stockAdjustmentProductUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$stockAdjustmentProductUnitCode.'%');
+            }
+
+            if ($stockAdjustmentProductUnitProductName) {
+                $query->where('products.name', 'like', '%'.$stockAdjustmentProductUnitProductName.'%');
+            }
+
+            if ($stockAdjustmentProductUnitProductCategoryId) {
+                $query->where('products.category_id', $stockAdjustmentProductUnitProductCategoryId);
+            }
+
+            if ($stockAdjustmentProductUnitProductBrandId) {
+                $query->where('products.brand_id', $stockAdjustmentProductUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('stock_adjustments.date', 'desc')
+            ->orderBy('stock_adjustment_in_item_serials.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($stockAdjustmentCode) ? '[empty]' : $stockAdjustmentCode,
+                    $stockAdjustmentStartDate ?? '[null]',
+                    $stockAdjustmentEndDate ?? '[null]',
+                    $stockAdjustmentCategoryId ?? '[null]',
+                    $stockAdjustmentInWarehouseId ?? '[null]',
+                    $stockAdjustmentOutWarehouseId ?? '[null]',
+                    empty($stockAdjustmentProductUnitCode) ? '[empty]' : $stockAdjustmentProductUnitCode,
+                    empty($stockAdjustmentProductUnitProductName) ? '[empty]' : $stockAdjustmentProductUnitProductName,
+                    $stockAdjustmentProductUnitProductCategoryId ?? '[null]',
+                    $stockAdjustmentProductUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_stock_adjustment_in_item_serial_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial): StockAdjustmentInItemSerial
+    {
+        return $stockAdjustmentInItemSerial->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockAdjustmentInItemSerialCreateDTO $data): StockAdjustmentInItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentInItemSerial = new StockAdjustmentInItemSerial();
+            $stockAdjustmentInItemSerial->company_id = $data->companyId;
+            $stockAdjustmentInItemSerial->branch_id = $data->branchId;
+            $stockAdjustmentInItemSerial->stock_adjustment_id = $data->stockAdjustmentId;
+            $stockAdjustmentInItemSerial->stock_adjustment_in_item_id = $data->stockAdjustmentInItemId;
+            $stockAdjustmentInItemSerial->serial = $data->serial;
+            $stockAdjustmentInItemSerial->save();
+
+            $stockSerialTransactionCreateDTO = StockSerialTransactionCreateDTO::fromStockAdjustmentInItemSerial(
+                stockAdjustmentInItemSerial: $stockAdjustmentInItemSerial,
+                serial: $data->serial
+            );
+            $this->stockSerialTransactionActions->create($stockSerialTransactionCreateDTO);
+
+            $this->flushCache();
+
+            return $stockAdjustmentInItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial, StockAdjustmentInItemSerialUpdateDTO $data): StockAdjustmentInItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentInItemSerial->serial = $data->serial;
+            $stockAdjustmentInItemSerial->save();
+
+            $stockSerialTransaction = $stockAdjustmentInItemSerial->stockSerialTransaction;
+            if (! $stockSerialTransaction) {
+                $dto = StockSerialTransactionCreateDTO::fromStockAdjustmentInItemSerial($stockAdjustmentInItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->create($dto);
+            } else {
+                $dto = StockSerialTransactionUpdateDTO::fromStockAdjustmentInItemSerial($stockAdjustmentInItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->update($stockSerialTransaction, $dto);
+            }
+
+            $this->flushCache();
+
+            return $stockAdjustmentInItemSerial->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $stockSerialTransaction = $stockAdjustmentInItemSerial->stockSerialTransaction;
+            if ($stockSerialTransaction) {
+                $this->stockSerialTransactionActions->delete($stockSerialTransaction);
+            }
+
+            $retval = $stockAdjustmentInItemSerial->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/StockAdjustmentOutItem/StockAdjustmentOutItemActions.php b/api/app/Actions/StockAdjustmentOutItem/StockAdjustmentOutItemActions.php
new file mode 100644
index 000000000..2fa1c5028
--- /dev/null
+++ b/api/app/Actions/StockAdjustmentOutItem/StockAdjustmentOutItemActions.php
@@ -0,0 +1,341 @@
+<?php
+
+namespace App\Actions\StockAdjustmentOutItem;
+
+use App\Actions\StockAdjustmentOutItemSerial\StockAdjustmentOutItemSerialActions;
+use App\Actions\StockTransaction\StockTransactionActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockAdjustmentOutItemCreateDTO;
+use App\DTOs\StockAdjustmentOutItemSerialCreateDTO;
+use App\DTOs\StockAdjustmentOutItemSerialUpdateDTO;
+use App\DTOs\StockAdjustmentOutItemUpdateDTO;
+use App\DTOs\StockTransactionCreateDTO;
+use App\DTOs\StockTransactionUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\StockAdjustmentOutItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockAdjustmentOutItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'stockAdjustment.category',
+        'stockAdjustment.inWarehouse',
+        'stockAdjustment.outWarehouse',
+        'productUnit.unit',
+        'productUnit.product.category',
+        'productUnit.product.brand',
+        'productUnit.product.baseProductUnit.unit',
+        'productUnit.product.images',
+        'productUnit.product.mainImage',
+        'serials',
+    ];
+
+    private $stockAdjustmentOutItemSerialActions;
+
+    private $stockTransactionActions;
+
+    public function __construct(
+        StockTransactionActions $stockTransactionActions,
+        StockAdjustmentOutItemSerialActions $stockAdjustmentOutItemSerialActions,
+    ) {
+        $this->stockTransactionActions = $stockTransactionActions;
+        $this->stockAdjustmentOutItemSerialActions = $stockAdjustmentOutItemSerialActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $stockAdjustmentCode,
+        ?string $stockAdjustmentStartDate,
+        ?string $stockAdjustmentEndDate,
+        ?int $stockAdjustmentCategoryId,
+        ?int $stockAdjustmentInWarehouseId,
+        ?int $stockAdjustmentOutWarehouseId,
+        ?string $stockAdjustmentProductUnitCode,
+        ?string $stockAdjustmentProductUnitProductName,
+        ?int $stockAdjustmentProductUnitProductCategoryId,
+        ?int $stockAdjustmentProductUnitProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockAdjustmentOutItem::select('stock_adjustment_out_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'stock_adjustment_out_items.company_id')
+            ->join('stock_adjustments', 'stock_adjustments.id', '=', 'stock_adjustment_out_items.stock_adjustment_id')
+            ->join('product_units', 'product_units.id', '=', 'stock_adjustment_out_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'product_units.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('stock_adjustment_out_items', $companyId)
+            ->whereBranchId('stock_adjustment_out_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $stockAdjustmentCode,
+            $stockAdjustmentStartDate,
+            $stockAdjustmentEndDate,
+            $stockAdjustmentCategoryId,
+            $stockAdjustmentInWarehouseId,
+            $stockAdjustmentOutWarehouseId,
+            $stockAdjustmentProductUnitCode,
+            $stockAdjustmentProductUnitProductName,
+            $stockAdjustmentProductUnitProductCategoryId,
+            $stockAdjustmentProductUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            $stockAdjustmentStartDateUtc = $stockAdjustmentStartDate ? TimezoneHelper::convertToUTC($stockAdjustmentStartDate) : null;
+            if ($stockAdjustmentStartDateUtc) {
+                $query->where('stock_adjustments.date', '>=', $stockAdjustmentStartDateUtc);
+            }
+
+            $stockAdjustmentEndDateUtc = $stockAdjustmentEndDate ? TimezoneHelper::convertToUTC($stockAdjustmentEndDate) : null;
+            if ($stockAdjustmentEndDateUtc) {
+                $query->where('stock_adjustments.date', '<=', $stockAdjustmentEndDateUtc);
+            }
+
+            if ($stockAdjustmentCode) {
+                $query->where('stock_adjustments.code', $stockAdjustmentCode);
+            }
+
+            if ($stockAdjustmentCategoryId) {
+                $query->where('stock_adjustments.category_id', $stockAdjustmentCategoryId);
+            }
+
+            if ($stockAdjustmentInWarehouseId) {
+                $query->where('stock_adjustments.in_warehouse_id', $stockAdjustmentInWarehouseId);
+            }
+
+            if ($stockAdjustmentOutWarehouseId) {
+                $query->where('stock_adjustments.out_warehouse_id', $stockAdjustmentOutWarehouseId);
+            }
+
+            if ($stockAdjustmentProductUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$stockAdjustmentProductUnitCode.'%');
+            }
+
+            if ($stockAdjustmentProductUnitProductName) {
+                $query->where('products.name', 'like', '%'.$stockAdjustmentProductUnitProductName.'%');
+            }
+
+            if ($stockAdjustmentProductUnitProductCategoryId) {
+                $query->where('products.category_id', $stockAdjustmentProductUnitProductCategoryId);
+            }
+
+            if ($stockAdjustmentProductUnitProductBrandId) {
+                $query->where('products.brand_id', $stockAdjustmentProductUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('stock_adjustments.date', 'desc')
+            ->orderBy('stock_adjustment_out_items.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($stockAdjustmentCode) ? '[empty]' : $stockAdjustmentCode,
+                    $stockAdjustmentStartDate ?? '[null]',
+                    $stockAdjustmentEndDate ?? '[null]',
+                    $stockAdjustmentCategoryId ?? '[null]',
+                    $stockAdjustmentInWarehouseId ?? '[null]',
+                    $stockAdjustmentOutWarehouseId ?? '[null]',
+                    empty($stockAdjustmentProductUnitCode) ? '[empty]' : $stockAdjustmentProductUnitCode,
+                    empty($stockAdjustmentProductUnitProductName) ? '[empty]' : $stockAdjustmentProductUnitProductName,
+                    $stockAdjustmentProductUnitProductCategoryId ?? '[null]',
+                    $stockAdjustmentProductUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_stock_adjustment_out_item_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockAdjustmentOutItem $stockAdjustmentOutItem): StockAdjustmentOutItem
+    {
+        return $stockAdjustmentOutItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockAdjustmentOutItemCreateDTO $data): StockAdjustmentOutItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentOutItem = new StockAdjustmentOutItem();
+            $stockAdjustmentOutItem->company_id = $data->companyId;
+            $stockAdjustmentOutItem->branch_id = $data->branchId;
+            $stockAdjustmentOutItem->stock_adjustment_id = $data->stockAdjustmentId;
+            $stockAdjustmentOutItem->qty = $data->qty;
+            $stockAdjustmentOutItem->product_unit_id = $data->productUnitId;
+            $stockAdjustmentOutItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $stockAdjustmentOutItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $stockAdjustmentOutItem->remarks = $data->remarks;
+            $stockAdjustmentOutItem->save();
+
+            $this->stockTransactionActions->create(
+                data: StockTransactionCreateDTO::fromStockAdjustmentOutItem($stockAdjustmentOutItem)
+            );
+
+            foreach ($data->serials as $serial) {
+                $dto = StockAdjustmentOutItemSerialCreateDTO::fromStockAdjustmentOutItem($stockAdjustmentOutItem, $serial['serial']);
+                $this->stockAdjustmentOutItemSerialActions->create($dto);
+            }
+
+            $this->flushCache();
+
+            return $stockAdjustmentOutItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockAdjustmentOutItem $stockAdjustmentOutItem, StockAdjustmentOutItemUpdateDTO $data): StockAdjustmentOutItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentOutItem->qty = $data->qty;
+            $stockAdjustmentOutItem->product_unit_id = $data->productUnitId;
+            $stockAdjustmentOutItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $stockAdjustmentOutItem->product_unit_qty_base = $stockAdjustmentOutItem->qty * $stockAdjustmentOutItem->product_unit_conversion_value;
+            $stockAdjustmentOutItem->remarks = $data->remarks;
+            $stockAdjustmentOutItem->save();
+
+            $stockTransaction = $stockAdjustmentOutItem->stockTransaction;
+            if (! $stockTransaction) {
+                $dto = StockTransactionCreateDTO::fromStockAdjustmentOutItem($stockAdjustmentOutItem);
+                $stockTransaction = $this->stockTransactionActions->create($dto);
+            } else {
+                $dto = StockTransactionUpdateDTO::fromStockAdjustmentOutItem($stockAdjustmentOutItem);
+                $this->stockTransactionActions->update($stockTransaction, $dto);
+            }
+
+            foreach ($data->deleteSerialIds as $deleteId) {
+                $stockAdjustmentOutItemSerial = $stockAdjustmentOutItem->serials()->findOrFail($deleteId);
+                $this->stockAdjustmentOutItemSerialActions->delete($stockAdjustmentOutItemSerial);
+            }
+
+            foreach ($data->serials as $serial) {
+                if ($serial['id']) {
+                    $stockAdjustmentOutItemSerial = $stockAdjustmentOutItem->serials()->findOrFail($serial['id']);
+                    $dto = StockAdjustmentOutItemSerialUpdateDTO::fromStockAdjustmentOutItemSerial($stockAdjustmentOutItemSerial, $serial['serial']);
+                    $this->stockAdjustmentOutItemSerialActions->update($stockAdjustmentOutItemSerial, $dto);
+                } else {
+                    $dto = StockAdjustmentOutItemSerialCreateDTO::fromStockAdjustmentOutItem($stockAdjustmentOutItem, $serial['serial']);
+                    $this->stockAdjustmentOutItemSerialActions->create($dto);
+                }
+            }
+
+            $this->flushCache();
+
+            return $stockAdjustmentOutItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockAdjustmentOutItem $stockAdjustmentOutItem): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransaction = $stockAdjustmentOutItem->stockTransaction;
+            if ($stockTransaction) {
+                $this->stockTransactionActions->delete($stockTransaction);
+            }
+
+            $serials = $stockAdjustmentOutItem->serials;
+            foreach ($serials as $serial) {
+                $this->stockAdjustmentOutItemSerialActions->delete($serial);
+            }
+
+            $result = $stockAdjustmentOutItem->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialActions.php b/api/app/Actions/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialActions.php
new file mode 100644
index 000000000..4589105ca
--- /dev/null
+++ b/api/app/Actions/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialActions.php
@@ -0,0 +1,308 @@
+<?php
+
+namespace App\Actions\StockAdjustmentOutItemSerial;
+
+use App\Actions\StockSerialTransaction\StockSerialTransactionActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockAdjustmentOutItemSerialCreateDTO;
+use App\DTOs\StockAdjustmentOutItemSerialUpdateDTO;
+use App\DTOs\StockSerialTransactionCreateDTO;
+use App\DTOs\StockSerialTransactionUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\StockAdjustmentOutItemSerial;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockAdjustmentOutItemSerialActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'stockAdjustment.category',
+        'stockAdjustment.inWarehouse',
+        'stockAdjustment.outWarehouse',
+        'stockAdjustmentOutItem.company',
+        'stockAdjustmentOutItem.branch',
+        'stockAdjustmentOutItem.stockAdjustment.category',
+        'stockAdjustmentOutItem.stockAdjustment.inWarehouse',
+        'stockAdjustmentOutItem.stockAdjustment.outWarehouse',
+        'stockAdjustmentOutItem.productUnit.unit',
+        'stockAdjustmentOutItem.productUnit.product.category',
+        'stockAdjustmentOutItem.productUnit.product.brand',
+        'stockAdjustmentOutItem.productUnit.product.baseProductUnit.unit',
+        'stockAdjustmentOutItem.productUnit.product.images',
+        'stockAdjustmentOutItem.productUnit.product.mainImage',
+    ];
+
+    protected StockSerialTransactionActions $stockSerialTransactionActions;
+
+    public function __construct(StockSerialTransactionActions $stockSerialTransactionActions)
+    {
+        $this->stockSerialTransactionActions = $stockSerialTransactionActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $stockAdjustmentCode,
+        ?string $stockAdjustmentStartDate,
+        ?string $stockAdjustmentEndDate,
+        ?int $stockAdjustmentCategoryId,
+        ?int $stockAdjustmentInWarehouseId,
+        ?int $stockAdjustmentOutWarehouseId,
+        ?string $stockAdjustmentProductUnitCode,
+        ?string $stockAdjustmentProductUnitProductName,
+        ?int $stockAdjustmentProductUnitProductCategoryId,
+        ?int $stockAdjustmentProductUnitProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockAdjustmentOutItemSerial::select('stock_adjustment_out_item_serials.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'stock_adjustment_out_item_serials.company_id')
+            ->join('stock_adjustments', 'stock_adjustments.id', '=', 'stock_adjustment_out_item_serials.stock_adjustment_id')
+            ->join('stock_adjustment_out_items', 'stock_adjustment_out_items.id', '=', 'stock_adjustment_out_item_serials.stock_adjustment_out_item_id')
+            ->join('product_units', 'product_units.id', '=', 'stock_adjustment_out_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'product_units.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('stock_adjustment_out_item_serials', $companyId)
+            ->whereBranchId('stock_adjustment_out_item_serials', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $stockAdjustmentCode,
+            $stockAdjustmentStartDate,
+            $stockAdjustmentEndDate,
+            $stockAdjustmentCategoryId,
+            $stockAdjustmentInWarehouseId,
+            $stockAdjustmentOutWarehouseId,
+            $stockAdjustmentProductUnitCode,
+            $stockAdjustmentProductUnitProductName,
+            $stockAdjustmentProductUnitProductCategoryId,
+            $stockAdjustmentProductUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where('serial', 'like', '%'.$search.'%');
+            }
+
+            $stockAdjustmentStartDateUtc = $stockAdjustmentStartDate ? TimezoneHelper::convertToUTC($stockAdjustmentStartDate) : null;
+            if ($stockAdjustmentStartDateUtc) {
+                $query->where('stock_adjustments.date', '>=', $stockAdjustmentStartDateUtc);
+            }
+
+            $stockAdjustmentEndDateUtc = $stockAdjustmentEndDate ? TimezoneHelper::convertToUTC($stockAdjustmentEndDate) : null;
+            if ($stockAdjustmentEndDateUtc) {
+                $query->where('stock_adjustments.date', '<=', $stockAdjustmentEndDateUtc);
+            }
+
+            if ($stockAdjustmentCode) {
+                $query->where('stock_adjustments.code', $stockAdjustmentCode);
+            }
+
+            if ($stockAdjustmentCategoryId) {
+                $query->where('stock_adjustments.category_id', $stockAdjustmentCategoryId);
+            }
+
+            if ($stockAdjustmentInWarehouseId) {
+                $query->where('stock_adjustments.in_warehouse_id', $stockAdjustmentInWarehouseId);
+            }
+
+            if ($stockAdjustmentOutWarehouseId) {
+                $query->where('stock_adjustments.out_warehouse_id', $stockAdjustmentOutWarehouseId);
+            }
+
+            if ($stockAdjustmentProductUnitCode) {
+                $query->where('product_units.code', 'like', '%'.$stockAdjustmentProductUnitCode.'%');
+            }
+
+            if ($stockAdjustmentProductUnitProductName) {
+                $query->where('products.name', 'like', '%'.$stockAdjustmentProductUnitProductName.'%');
+            }
+
+            if ($stockAdjustmentProductUnitProductCategoryId) {
+                $query->where('products.category_id', $stockAdjustmentProductUnitProductCategoryId);
+            }
+
+            if ($stockAdjustmentProductUnitProductBrandId) {
+                $query->where('products.brand_id', $stockAdjustmentProductUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('stock_adjustments.date', 'desc')
+            ->orderBy('stock_adjustment_out_item_serials.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($stockAdjustmentCode) ? '[empty]' : $stockAdjustmentCode,
+                    $stockAdjustmentStartDate ?? '[null]',
+                    $stockAdjustmentEndDate ?? '[null]',
+                    $stockAdjustmentCategoryId ?? '[null]',
+                    $stockAdjustmentInWarehouseId ?? '[null]',
+                    $stockAdjustmentOutWarehouseId ?? '[null]',
+                    empty($stockAdjustmentProductUnitCode) ? '[empty]' : $stockAdjustmentProductUnitCode,
+                    empty($stockAdjustmentProductUnitProductName) ? '[empty]' : $stockAdjustmentProductUnitProductName,
+                    $stockAdjustmentProductUnitProductCategoryId ?? '[null]',
+                    $stockAdjustmentProductUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_stock_adjustment_out_item_serial_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial): StockAdjustmentOutItemSerial
+    {
+        return $stockAdjustmentOutItemSerial->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockAdjustmentOutItemSerialCreateDTO $data): StockAdjustmentOutItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentOutItemSerial = new StockAdjustmentOutItemSerial();
+            $stockAdjustmentOutItemSerial->company_id = $data->companyId;
+            $stockAdjustmentOutItemSerial->branch_id = $data->branchId;
+            $stockAdjustmentOutItemSerial->stock_adjustment_id = $data->stockAdjustmentId;
+            $stockAdjustmentOutItemSerial->stock_adjustment_out_item_id = $data->stockAdjustmentOutItemId;
+            $stockAdjustmentOutItemSerial->serial = $data->serial;
+            $stockAdjustmentOutItemSerial->save();
+
+            $stockSerialTransactionCreateDTO = StockSerialTransactionCreateDTO::fromStockAdjustmentOutItemSerial(
+                stockAdjustmentOutItemSerial: $stockAdjustmentOutItemSerial,
+                serial: $data->serial
+            );
+            $this->stockSerialTransactionActions->create($stockSerialTransactionCreateDTO);
+
+            $this->flushCache();
+
+            return $stockAdjustmentOutItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial, StockAdjustmentOutItemSerialUpdateDTO $data): StockAdjustmentOutItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockAdjustmentOutItemSerial->serial = $data->serial;
+            $stockAdjustmentOutItemSerial->save();
+
+            $stockSerialTransaction = $stockAdjustmentOutItemSerial->stockSerialTransaction;
+
+            if (! $stockSerialTransaction) {
+                $dto = StockSerialTransactionCreateDTO::fromStockAdjustmentOutItemSerial($stockAdjustmentOutItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->create($dto);
+            } else {
+                $dto = StockSerialTransactionUpdateDTO::fromStockAdjustmentOutItemSerial($stockAdjustmentOutItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->update($stockSerialTransaction, $dto);
+            }
+
+            $this->flushCache();
+
+            return $stockAdjustmentOutItemSerial->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $stockSerialTransaction = $stockAdjustmentOutItemSerial->stockSerialTransaction;
+            if ($stockSerialTransaction) {
+                $this->stockSerialTransactionActions->delete($stockSerialTransaction);
+            }
+
+            $retval = $stockAdjustmentOutItemSerial->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/StockSerialTransaction/StockSerialTransactionActions.php b/api/app/Actions/StockSerialTransaction/StockSerialTransactionActions.php
new file mode 100644
index 000000000..7ed93f3b6
--- /dev/null
+++ b/api/app/Actions/StockSerialTransaction/StockSerialTransactionActions.php
@@ -0,0 +1,201 @@
+<?php
+
+namespace App\Actions\StockSerialTransaction;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockSerialTransactionCreateDTO;
+use App\DTOs\StockSerialTransactionUpdateDTO;
+use App\Models\StockSerialTransaction;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockSerialTransactionActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'warehouse',
+        'product',
+        'referable',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        ?string $referableType,
+        ?int $referableId,
+        ?int $warehouseId,
+        ?int $productId,
+        ?string $serial,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockSerialTransaction::select('stock_serial_transactions.*')
+            ->with(self::LIST_EAGER_LOADS);
+
+        $query->where(function ($query) use ($referableType, $referableId, $warehouseId, $productId, $serial) {
+            if ($referableType) {
+                $query->where('stock_serial_transactions.referable_type', $referableType);
+            }
+
+            if ($referableId) {
+                $query->where('stock_serial_transactions.referable_id', $referableId);
+            }
+
+            if ($warehouseId) {
+                $query->where('stock_serial_transactions.warehouse_id', $warehouseId);
+            }
+
+            if ($productId) {
+                $query->where('stock_serial_transactions.product_id', $productId);
+            }
+
+            if ($serial) {
+                $query->where('stock_serial_transactions.serial', $serial);
+            }
+        });
+
+        $query->orderBy('stock_serial_transactions.date', 'desc')
+            ->orderBy('stock_serial_transactions.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $referableType ?? '[null]',
+                    $referableId ?? '[null]',
+                    $warehouseId ?? '[null]',
+                    $productId ?? '[null]',
+                    $serial ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_stock_serial_transaction_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockSerialTransaction $stockSerialTransaction): StockSerialTransaction
+    {
+        return $stockSerialTransaction->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockSerialTransactionCreateDTO $data): StockSerialTransaction
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockSerialTransaction = new StockSerialTransaction();
+            $stockSerialTransaction->referable_type = $data->referableType;
+            $stockSerialTransaction->referable_id = $data->referableId;
+            $stockSerialTransaction->date = $data->date;
+            $stockSerialTransaction->warehouse_id = $data->warehouseId;
+            $stockSerialTransaction->product_id = $data->productId;
+            $stockSerialTransaction->direction = $data->direction;
+            $stockSerialTransaction->serial = $data->serial;
+            $stockSerialTransaction->save();
+
+            $this->flushCache();
+
+            return $stockSerialTransaction;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockSerialTransaction $stockSerialTransaction, StockSerialTransactionUpdateDTO $data): StockSerialTransaction
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockSerialTransaction->referable_type = $data->referableType;
+            $stockSerialTransaction->referable_id = $data->referableId;
+            $stockSerialTransaction->date = $data->date;
+            $stockSerialTransaction->warehouse_id = $data->warehouseId;
+            $stockSerialTransaction->product_id = $data->productId;
+            $stockSerialTransaction->direction = $data->direction;
+            $stockSerialTransaction->serial = $data->serial;
+            $stockSerialTransaction->save();
+
+            $this->flushCache();
+
+            return $stockSerialTransaction;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockSerialTransaction $stockSerialTransaction): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $stockSerialTransaction->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/StockTransaction/StockTransactionActions.php b/api/app/Actions/StockTransaction/StockTransactionActions.php
new file mode 100644
index 000000000..2315f8ea5
--- /dev/null
+++ b/api/app/Actions/StockTransaction/StockTransactionActions.php
@@ -0,0 +1,193 @@
+<?php
+
+namespace App\Actions\StockTransaction;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockTransactionCreateDTO;
+use App\DTOs\StockTransactionUpdateDTO;
+use App\Models\StockTransaction;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockTransactionActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'warehouse',
+        'product',
+        'referable',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        ?string $referableType,
+        ?int $referableId,
+        ?int $warehouseId,
+        ?int $productId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockTransaction::select('stock_transactions.*')
+            ->with(self::LIST_EAGER_LOADS);
+
+        $query->where(function ($query) use ($referableType, $referableId, $warehouseId, $productId) {
+            if ($referableType) {
+                $query->where('stock_transactions.referable_type', $referableType);
+            }
+
+            if ($referableId) {
+                $query->where('stock_transactions.referable_id', $referableId);
+            }
+
+            if ($warehouseId) {
+                $query->where('stock_transactions.warehouse_id', $warehouseId);
+            }
+
+            if ($productId) {
+                $query->where('stock_transactions.product_id', $productId);
+            }
+        });
+
+        $query->orderBy('stock_transactions.date', 'desc')
+            ->orderBy('stock_transactions.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $referableType ?? '[null]',
+                    $referableId ?? '[null]',
+                    $warehouseId ?? '[null]',
+                    $productId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_stock_transaction_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockTransaction $stockTransaction): StockTransaction
+    {
+        return $stockTransaction->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockTransactionCreateDTO $data): StockTransaction
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransaction = new StockTransaction();
+            $stockTransaction->referable_type = $data->referableType;
+            $stockTransaction->referable_id = $data->referableId;
+            $stockTransaction->date = $data->date;
+            $stockTransaction->warehouse_id = $data->warehouseId;
+            $stockTransaction->product_id = $data->productId;
+            $stockTransaction->base_qty = $data->baseQty;
+            $stockTransaction->save();
+
+            $this->flushCache();
+
+            return $stockTransaction;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockTransaction $stockTransaction, StockTransactionUpdateDTO $data): StockTransaction
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransaction->referable_type = $data->referableType;
+            $stockTransaction->referable_id = $data->referableId;
+            $stockTransaction->date = $data->date;
+            $stockTransaction->warehouse_id = $data->warehouseId;
+            $stockTransaction->product_id = $data->productId;
+            $stockTransaction->base_qty = $data->baseQty;
+            $stockTransaction->save();
+
+            $this->flushCache();
+
+            return $stockTransaction;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockTransaction $stockTransaction): bool
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $result = $stockTransaction->delete();
+
+            $this->flushCache();
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/StockTransfer/StockTransferActions.php b/api/app/Actions/StockTransfer/StockTransferActions.php
new file mode 100644
index 000000000..27aa6f00d
--- /dev/null
+++ b/api/app/Actions/StockTransfer/StockTransferActions.php
@@ -0,0 +1,352 @@
+<?php
+
+namespace App\Actions\StockTransfer;
+
+use App\Actions\StockTransferItem\StockTransferItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockTransferCreateDTO;
+use App\DTOs\StockTransferItemCreateDTO;
+use App\DTOs\StockTransferItemUpdateDTO;
+use App\DTOs\StockTransferUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\Company;
+use App\Models\StockTransfer;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockTransferActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'sourceWarehouse',
+        'destinationWarehouse',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'company',
+        'branch',
+        'sourceWarehouse',
+        'destinationWarehouse',
+        'stockTransferItems.productUnit.unit',
+        'stockTransferItems.productUnit.product.images',
+        'stockTransferItems.productUnit.product.baseProductUnit.unit',
+        'stockTransferItems.serials',
+    ];
+
+    private $stockTransferItemActions;
+
+    public function __construct(
+        StockTransferItemActions $stockTransferItemActions,
+    ) {
+        $this->stockTransferItemActions = $stockTransferItemActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+
+        ?string $search,
+        ?string $startDate,
+        ?string $endDate,
+        ?int $sourceWarehouseId,
+        ?int $destinationWarehouseId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockTransfer::select('stock_transfers.*');
+
+        if ($execute?->pagination) {
+            $query->with(self::DETAIL_EAGER_LOADS);
+        } else {
+            $query->with(self::LIST_EAGER_LOADS);
+        }
+
+        $query
+            ->join('companies', 'companies.id', '=', 'stock_transfers.company_id')
+            ->whereCompanyId('stock_transfers', $companyId)
+            ->whereBranchId('stock_transfers', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $startDate,
+            $endDate,
+            $sourceWarehouseId,
+            $destinationWarehouseId
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('stock_transfers.code', 'like', '%'.$search.'%')
+                        ->orWhere('stock_transfers.remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            if ($startDate) {
+                $query->where('stock_transfers.date', '>=', TimezoneHelper::convertToUTC($startDate));
+            }
+
+            if ($endDate) {
+                $query->where('stock_transfers.date', '<=', TimezoneHelper::convertToUTC($endDate));
+            }
+
+            if ($sourceWarehouseId) {
+                $query->where('stock_transfers.source_warehouse_id', $sourceWarehouseId);
+            }
+
+            if ($destinationWarehouseId) {
+                $query->where('stock_transfers.destination_warehouse_id', $destinationWarehouseId);
+            }
+        });
+
+        $query->orderBy('stock_transfers.date', 'desc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    $startDate ?? '[null]',
+                    $endDate ?? '[null]',
+                    $sourceWarehouseId ?? '[null]',
+                    $destinationWarehouseId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'read_any_stock_transfer_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockTransfer $stockTransfer): StockTransfer
+    {
+        return $stockTransfer->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function create(StockTransferCreateDTO $data): StockTransfer
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransfer = new StockTransfer();
+            $stockTransfer->company_id = $data->companyId;
+            $stockTransfer->branch_id = $data->branchId;
+            $stockTransfer->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $stockTransfer->date = $this->generateDate($data->date);
+            $stockTransfer->source_warehouse_id = $data->sourceWarehouseId;
+            $stockTransfer->destination_warehouse_id = $data->destinationWarehouseId;
+            $stockTransfer->remarks = $data->remarks;
+            $stockTransfer->is_posted = $data->isPosted;
+            $stockTransfer->save();
+
+            $this->saveItems($stockTransfer, $data->items);
+
+            $this->flushCache();
+
+            return $stockTransfer;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    private function saveItems(StockTransfer $stockTransfer, array $items): void
+    {
+        foreach ($items as $item) {
+            $data = new StockTransferItemCreateDTO(
+                companyId: $stockTransfer->company_id,
+                branchId: $stockTransfer->branch_id,
+                stockTransferId: $stockTransfer->id,
+                qty: $item['qty'],
+                productUnitId: $item['product_unit_id'],
+                productUnitConversionValue: $item['product_unit_conversion_value'],
+                remarks: $item['remarks'],
+                serials: $item['serials'],
+            );
+            $this->stockTransferItemActions->create($data);
+        }
+    }
+
+    public function update(StockTransfer $stockTransfer, StockTransferUpdateDTO $data): StockTransfer
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransfer->company_id = $data->companyId;
+            $stockTransfer->branch_id = $data->branchId;
+            $stockTransfer->code = $this->generateUniqueCode($data->companyId, $data->code, $stockTransfer->id);
+            $stockTransfer->date = $this->generateDate($data->date);
+            $stockTransfer->source_warehouse_id = $data->sourceWarehouseId;
+            $stockTransfer->destination_warehouse_id = $data->destinationWarehouseId;
+            $stockTransfer->remarks = $data->remarks;
+            $stockTransfer->is_posted = $data->isPosted;
+            $stockTransfer->save();
+
+            $this->updateItems($stockTransfer, $data->deleteItemIds, $data->items);
+
+            $this->flushCache();
+
+            return $stockTransfer->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    private function updateItems(StockTransfer $stockTransfer, array $deleteIds, array $items): void
+    {
+        foreach ($deleteIds as $deleteId) {
+            $stockTransferItem = $stockTransfer->stockTransferItems()->findOrFail($deleteId);
+            $this->stockTransferItemActions->delete($stockTransferItem);
+        }
+
+        foreach ($items as $item) {
+            if ($item['id']) {
+                $stockTransferItem = $stockTransfer->stockTransferItems()->findOrFail($item['id']);
+                $data = new StockTransferItemUpdateDTO(
+                    qty: $item['qty'],
+                    productUnitId: $item['product_unit_id'],
+                    productUnitConversionValue: $item['product_unit_conversion_value'],
+                    remarks: $item['remarks'],
+                    deleteSerialIds: $item['delete_serial_ids'],
+                    serials: $item['serials'],
+                );
+                $this->stockTransferItemActions->update($stockTransferItem, $data);
+            } else {
+                $data = new StockTransferItemCreateDTO(
+                    companyId: $stockTransfer->company_id,
+                    branchId: $stockTransfer->branch_id,
+                    stockTransferId: $stockTransfer->id,
+                    qty: $item['qty'],
+                    productUnitId: $item['product_unit_id'],
+                    productUnitConversionValue: $item['product_unit_conversion_value'],
+                    remarks: $item['remarks'],
+                    serials: $item['serials'],
+                );
+                $this->stockTransferItemActions->create($data);
+            }
+        }
+    }
+
+    public function delete(StockTransfer $stockTransfer): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $stockTransfer->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateDate(string $date): string
+    {
+        if ($date == config('dcslab.KEYWORDS.AUTO')) {
+            $nowLocal = now(TimezoneHelper::getUserTimezone())->toDateTimeString();
+
+            return TimezoneHelper::convertToUTC($nowLocal);
+        }
+
+        return TimezoneHelper::convertToUTC($date);
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $company = Company::find($companyId);
+
+            $tryCount = 0;
+            do {
+                $count = $company->stockTransfers()->withTrashed()->count() + 1 + $tryCount;
+                $code = 'ST'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        } else {
+            return $code;
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = StockTransfer::whereCompanyId('stock_transfers', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0 ? true : false;
+    }
+}
diff --git a/api/app/Actions/StockTransferItem/StockTransferItemActions.php b/api/app/Actions/StockTransferItem/StockTransferItemActions.php
new file mode 100644
index 000000000..eed3bd04d
--- /dev/null
+++ b/api/app/Actions/StockTransferItem/StockTransferItemActions.php
@@ -0,0 +1,385 @@
+<?php
+
+namespace App\Actions\StockTransferItem;
+
+use App\Actions\StockTransaction\StockTransactionActions;
+use App\Actions\StockTransferItemSerial\StockTransferItemSerialActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockTransactionCreateDTO;
+use App\DTOs\StockTransactionUpdateDTO;
+use App\DTOs\StockTransferItemCreateDTO;
+use App\DTOs\StockTransferItemSerialCreateDTO;
+use App\DTOs\StockTransferItemSerialUpdateDTO;
+use App\DTOs\StockTransferItemUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\Company;
+use App\Models\StockTransferItem;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+use Illuminate\Support\Facades\DB;
+
+class StockTransferItemActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'stockTransfer.sourceWarehouse',
+        'stockTransfer.destinationWarehouse',
+        'productUnit.unit',
+        'productUnit.product.category',
+        'productUnit.product.brand',
+        'productUnit.product.baseProductUnit.unit',
+        'productUnit.product.images',
+        'productUnit.product.mainImage',
+        'serials',
+    ];
+
+    private $stockTransferItemSerialActions;
+
+    private $stockTransactionActions;
+
+    public function __construct(
+        StockTransferItemSerialActions $stockTransferItemSerialActions,
+        StockTransactionActions $stockTransactionActions,
+    ) {
+        $this->stockTransferItemSerialActions = $stockTransferItemSerialActions;
+        $this->stockTransactionActions = $stockTransactionActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $stockTransferCode,
+        ?string $stockTransferStartDate,
+        ?string $stockTransferEndDate,
+        ?int $stockTransferSourceWarehouseId,
+        ?int $stockTransferDestinationWarehouseId,
+        ?string $productUnitCode,
+        ?string $productUnitProductName,
+        ?int $productUnitProductCategoryId,
+        ?int $productUnitProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockTransferItem::select('stock_transfer_items.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'stock_transfer_items.company_id')
+            ->join('stock_transfers', 'stock_transfers.id', '=', 'stock_transfer_items.stock_transfer_id')
+            ->join('items', 'items.id', '=', 'stock_transfer_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'items.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('stock_transfer_items', $companyId)
+            ->whereBranchId('stock_transfer_items', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $stockTransferCode,
+            $stockTransferStartDate,
+            $stockTransferEndDate,
+            $stockTransferSourceWarehouseId,
+            $stockTransferDestinationWarehouseId,
+            $productUnitCode,
+            $productUnitProductName,
+            $productUnitProductCategoryId,
+            $productUnitProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) $query->withTrashed();
+
+            if ($search) {
+                $query->where(function ($query) use ($search) {
+                    $query->where('remarks', 'like', '%'.$search.'%');
+                });
+            }
+
+            $stockTransferStartDateUtc = $stockTransferStartDate ? TimezoneHelper::convertToUTC($stockTransferStartDate) : null;
+            if ($stockTransferStartDateUtc) {
+                $query->where('stock_transfers.date', '>=', $stockTransferStartDateUtc);
+            }
+
+            $stockTransferEndDateUtc = $stockTransferEndDate ? TimezoneHelper::convertToUTC($stockTransferEndDate) : null;
+            if ($stockTransferEndDateUtc) {
+                $query->where('stock_transfers.date', '<=', $stockTransferEndDateUtc);
+            }
+
+            if ($stockTransferCode) {
+                $query->where('stock_transfers.code', $stockTransferCode);
+            }
+
+            if ($stockTransferSourceWarehouseId) {
+                $query->where('stock_transfers.source_warehouse_id', $stockTransferSourceWarehouseId);
+            }
+
+            if ($stockTransferDestinationWarehouseId) {
+                $query->where('stock_transfers.destination_warehouse_id', $stockTransferDestinationWarehouseId);
+            }
+
+            if ($productUnitCode) {
+                $query->where('items.code', 'like', '%'.$productUnitCode.'%');
+            }
+
+            if ($productUnitProductName) {
+                $query->where('products.name', 'like', '%'.$productUnitProductName.'%');
+            }
+
+            if ($productUnitProductCategoryId) {
+                $query->where('products.category_id', $productUnitProductCategoryId);
+            }
+
+            if ($productUnitProductBrandId) {
+                $query->where('products.brand_id', $productUnitProductBrandId);
+            }
+        });
+
+        $query->orderBy('stock_transfers.date', 'desc')
+            ->orderBy('stock_transfer_items.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($stockTransferCode) ? '[empty]' : $stockTransferCode,
+                    $stockTransferStartDate ?? '[null]',
+                    $stockTransferEndDate ?? '[null]',
+                    $stockTransferSourceWarehouseId ?? '[null]',
+                    $stockTransferDestinationWarehouseId ?? '[null]',
+                    empty($productUnitCode) ? '[empty]' : $productUnitCode,
+                    empty($productUnitProductName) ? '[empty]' : $productUnitProductName,
+                    $productUnitProductCategoryId ?? '[null]',
+                    $productUnitProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+                $cacheKey = 'read_any_stock_transfer_item_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockTransferItem $stockTransferItem): StockTransferItem
+    {
+        return $stockTransferItem->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockTransferItemCreateDTO $data): StockTransferItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransferItem = new StockTransferItem();
+            $stockTransferItem->company_id = $data->companyId;
+            $stockTransferItem->branch_id = $data->branchId;
+            $stockTransferItem->stock_transfer_id = $data->stockTransferId;
+            $stockTransferItem->qty = $data->qty;
+            $stockTransferItem->product_unit_id = $data->productUnitId;
+            $stockTransferItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $stockTransferItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $stockTransferItem->remarks = $data->remarks;
+            $stockTransferItem->save();
+
+            foreach ($data->serials as $serial) {
+                $dto = StockTransferItemSerialCreateDTO::fromStockTransferItem($stockTransferItem, $serial['serial']);
+                $this->stockTransferItemSerialActions->create($dto);
+            }
+
+            $this->stockTransactionActions->create(
+                data: StockTransactionCreateDTO::fromStockTransferItemSource($stockTransferItem)
+            );
+            $this->stockTransactionActions->create(
+                data: StockTransactionCreateDTO::fromStockTransferItemDestination($stockTransferItem)
+            );
+
+            $this->flushCache();
+
+            return $stockTransferItem;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockTransferItem $stockTransferItem, StockTransferItemUpdateDTO $data): StockTransferItem
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransferItem->qty = $data->qty;
+            $stockTransferItem->product_unit_id = $data->productUnitId;
+            $stockTransferItem->product_unit_conversion_value = $data->productUnitConversionValue;
+            $stockTransferItem->product_unit_qty_base = $data->qty * $data->productUnitConversionValue;
+            $stockTransferItem->remarks = $data->remarks;
+            $stockTransferItem->save();
+
+            foreach ($data->deleteSerialIds as $deleteId) {
+                $stockTransferItemSerial = $stockTransferItem->serials()->findOrFail($deleteId);
+                $this->stockTransferItemSerialActions->delete($stockTransferItemSerial);
+            }
+
+            foreach ($data->serials as $serial) {
+                if ($serial['id']) {
+                    $stockTransferItemSerial = $stockTransferItem->serials()->findOrFail($serial['id']);
+                    $dto = StockTransferItemSerialUpdateDTO::fromStockTransferItemSerial($stockTransferItemSerial, $serial['serial']);
+                    $this->stockTransferItemSerialActions->update($stockTransferItemSerial, $dto);
+                } else {
+                    $dto = StockTransferItemSerialCreateDTO::fromStockTransferItem($stockTransferItem, $serial['serial']);
+                    $this->stockTransferItemSerialActions->create($dto);
+                }
+            }
+
+            $stockTransactionSource = $stockTransferItem->sourceStockTransaction;
+            if (! $stockTransactionSource) {
+                $dto = StockTransactionCreateDTO::fromStockTransferItemSource($stockTransferItem);
+                $this->stockTransactionActions->create($dto);
+            } else {
+                $dto = StockTransactionUpdateDTO::fromStockTransferItemSource($stockTransferItem);
+                $this->stockTransactionActions->update($stockTransactionSource, $dto);
+            }
+
+            $stockTransactionDestination = $stockTransferItem->destinationStockTransaction;
+            if (! $stockTransactionDestination) {
+                $dto = StockTransactionCreateDTO::fromStockTransferItemDestination($stockTransferItem);
+                $this->stockTransactionActions->create($dto);
+            } else {
+                $dto = StockTransactionUpdateDTO::fromStockTransferItemDestination($stockTransferItem);
+                $this->stockTransactionActions->update($stockTransactionDestination, $dto);
+            }
+
+            $this->flushCache();
+
+            return $stockTransferItem->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockTransferItem $stockTransferItem): bool
+    {
+        DB::beginTransaction();
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $stockTransferItemSerials = $stockTransferItem->serials()->get();
+            foreach ($stockTransferItemSerials as $stockTransferItemSerial) {
+                $this->stockTransferItemSerialActions->delete($stockTransferItemSerial);
+            }
+
+            $stockTransactionSource = $stockTransferItem->sourceStockTransaction;
+            if ($stockTransactionSource) {
+                $this->stockTransactionActions->delete($stockTransactionSource);
+            }
+
+            $stockTransactionDestination = $stockTransferItem->destinationStockTransaction;
+            if ($stockTransactionDestination) {
+                $this->stockTransactionActions->delete($stockTransactionDestination);
+            }
+
+            $retval = $stockTransferItem->delete();
+
+            DB::commit();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            DB::rollBack();
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code == config('dcslab.KEYWORDS.AUTO')) {
+            $company = Company::find($companyId);
+
+            $tryCount = 0;
+            do {
+                $count = $company->stockTransferItems()->withTrashed()->count() + 1 + $tryCount;
+                $code = 'WH'.str_pad($count, 3, '0', STR_PAD_LEFT);
+                $tryCount++;
+            } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+            return $code;
+        } else {
+            return $code;
+        }
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $result = StockTransferItem::whereCompanyId('stock_transfer_items', $companyId)->where('code', '=', $code);
+
+        if ($exceptId) {
+            $result = $result->where('id', '<>', $exceptId);
+        }
+
+        return $result->count() == 0 ? true : false;
+    }
+}
diff --git a/api/app/Actions/StockTransferItemSerial/StockTransferItemSerialActions.php b/api/app/Actions/StockTransferItemSerial/StockTransferItemSerialActions.php
new file mode 100644
index 000000000..1166032ea
--- /dev/null
+++ b/api/app/Actions/StockTransferItemSerial/StockTransferItemSerialActions.php
@@ -0,0 +1,317 @@
+<?php
+
+namespace App\Actions\StockTransferItemSerial;
+
+use App\Actions\StockSerialTransaction\StockSerialTransactionActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\StockSerialTransactionCreateDTO;
+use App\DTOs\StockSerialTransactionUpdateDTO;
+use App\DTOs\StockTransferItemSerialCreateDTO;
+use App\DTOs\StockTransferItemSerialUpdateDTO;
+use App\Helpers\TimezoneHelper;
+use App\Models\StockTransferItemSerial;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class StockTransferItemSerialActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+        'stockTransfer.sourceWarehouse',
+        'stockTransfer.destinationWarehouse',
+        'stockTransferItem.company',
+        'stockTransferItem.branch',
+        'stockTransferItem.stockTransfer.sourceWarehouse',
+        'stockTransferItem.stockTransfer.destinationWarehouse',
+        'stockTransferItem.productUnit.unit',
+        'stockTransferItem.productUnit.product.category',
+        'stockTransferItem.productUnit.product.brand',
+        'stockTransferItem.productUnit.product.baseProductUnit.unit',
+        'stockTransferItem.productUnit.product.images',
+        'stockTransferItem.productUnit.product.mainImage',
+    ];
+
+    protected StockSerialTransactionActions $stockSerialTransactionActions;
+
+    public function __construct(StockSerialTransactionActions $stockSerialTransactionActions)
+    {
+        $this->stockSerialTransactionActions = $stockSerialTransactionActions;
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+        ?string $search,
+
+        ?string $stockTransferCode,
+        ?string $stockTransferStartDate,
+        ?string $stockTransferEndDate,
+        ?int $stockTransferSourceWarehouseId,
+        ?int $stockTransferDestinationWarehouseId,
+        ?string $stockTransferItemCode,
+        ?string $stockTransferItemProductName,
+        ?int $stockTransferItemProductCategoryId,
+        ?int $stockTransferItemProductBrandId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = StockTransferItemSerial::select('stock_transfer_item_serials.*')
+            ->with(self::LIST_EAGER_LOADS)
+            ->join('companies', 'companies.id', '=', 'stock_transfer_item_serials.company_id')
+            ->join('stock_transfers', 'stock_transfers.id', '=', 'stock_transfer_item_serials.stock_transfer_id')
+            ->join('stock_transfer_items', 'stock_transfer_items.id', '=', 'stock_transfer_item_serials.stock_transfer_item_id')
+            ->join('items', 'items.id', '=', 'stock_transfer_items.product_unit_id')
+            ->join('products', 'products.id', '=', 'items.product_id')
+            ->join('product_categories', 'product_categories.id', '=', 'products.category_id')
+            ->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
+            ->whereCompanyId('stock_transfer_item_serials', $companyId)
+            ->whereBranchId('stock_transfer_item_serials', $branchId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $stockTransferCode,
+            $stockTransferStartDate,
+            $stockTransferEndDate,
+            $stockTransferSourceWarehouseId,
+            $stockTransferDestinationWarehouseId,
+            $stockTransferItemCode,
+            $stockTransferItemProductName,
+            $stockTransferItemProductCategoryId,
+            $stockTransferItemProductBrandId,
+        ) {
+            $query->withoutTrashed();
+            if ($withTrashed) {
+                $query->withTrashed();
+            }
+
+            if ($search) {
+                $query->where('serial', 'like', '%'.$search.'%');
+            }
+
+            $stockTransferStartDateUtc = $stockTransferStartDate ? TimezoneHelper::convertToUTC($stockTransferStartDate) : null;
+            if ($stockTransferStartDateUtc) {
+                $query->where('stock_transfers.date', '>=', $stockTransferStartDateUtc);
+            }
+
+            $stockTransferEndDateUtc = $stockTransferEndDate ? TimezoneHelper::convertToUTC($stockTransferEndDate) : null;
+            if ($stockTransferEndDateUtc) {
+                $query->where('stock_transfers.date', '<=', $stockTransferEndDateUtc);
+            }
+
+            if ($stockTransferCode) {
+                $query->where('stock_transfers.code', $stockTransferCode);
+            }
+
+            if ($stockTransferSourceWarehouseId) {
+                $query->where('stock_transfers.source_warehouse_id', $stockTransferSourceWarehouseId);
+            }
+
+            if ($stockTransferDestinationWarehouseId) {
+                $query->where('stock_transfers.destination_warehouse_id', $stockTransferDestinationWarehouseId);
+            }
+
+            if ($stockTransferItemCode) {
+                $query->where('items.code', 'like', '%'.$stockTransferItemCode.'%');
+            }
+
+            if ($stockTransferItemProductName) {
+                $query->where('products.name', 'like', '%'.$stockTransferItemProductName.'%');
+            }
+
+            if ($stockTransferItemProductCategoryId) {
+                $query->where('products.category_id', $stockTransferItemProductCategoryId);
+            }
+
+            if ($stockTransferItemProductBrandId) {
+                $query->where('products.brand_id', $stockTransferItemProductBrandId);
+            }
+        });
+
+        $query->orderBy('stock_transfers.date', 'desc')
+            ->orderBy('stock_transfer_item_serials.id', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    $branchId ?? '[null]',
+                    empty($search) ? '[empty]' : $search,
+                    empty($stockTransferCode) ? '[empty]' : $stockTransferCode,
+                    $stockTransferStartDate ?? '[null]',
+                    $stockTransferEndDate ?? '[null]',
+                    $stockTransferSourceWarehouseId ?? '[null]',
+                    $stockTransferDestinationWarehouseId ?? '[null]',
+                    empty($stockTransferItemCode) ? '[empty]' : $stockTransferItemCode,
+                    empty($stockTransferItemProductName) ? '[empty]' : $stockTransferItemProductName,
+                    $stockTransferItemProductCategoryId ?? '[null]',
+                    $stockTransferItemProductBrandId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+                $cacheKey = 'read_any_stock_transfer_item_serial_'.implode('_', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheResult = $this->readFromCache($cacheKey);
+                    if ($cacheResult !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheResult;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(StockTransferItemSerial $stockTransferItemSerial): StockTransferItemSerial
+    {
+        return $stockTransferItemSerial->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(StockTransferItemSerialCreateDTO $data): StockTransferItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransferItemSerial = new StockTransferItemSerial();
+            $stockTransferItemSerial->company_id = $data->companyId;
+            $stockTransferItemSerial->branch_id = $data->branchId;
+            $stockTransferItemSerial->stock_transfer_id = $data->stockTransferId;
+            $stockTransferItemSerial->stock_transfer_item_id = $data->stockTransferItemId;
+            $stockTransferItemSerial->serial = $data->serial;
+            $stockTransferItemSerial->save();
+
+            $stockSerialTransactionCreateDTO = StockSerialTransactionCreateDTO::fromStockTransferItemSerialSource(
+                stockTransferItemSerial: $stockTransferItemSerial,
+                serial: $data->serial
+            );
+            $this->stockSerialTransactionActions->create($stockSerialTransactionCreateDTO);
+            $stockSerialTransactionCreateDTO = StockSerialTransactionCreateDTO::fromStockTransferItemSerialDestination(
+                stockTransferItemSerial: $stockTransferItemSerial,
+                serial: $data->serial
+            );
+            $this->stockSerialTransactionActions->create($stockSerialTransactionCreateDTO);
+
+            $this->flushCache();
+
+            return $stockTransferItemSerial;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(StockTransferItemSerial $stockTransferItemSerial, StockTransferItemSerialUpdateDTO $data): StockTransferItemSerial
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $stockTransferItemSerial->serial = $data->serial;
+            $stockTransferItemSerial->save();
+
+            $stockSerialTransactionSource = $stockTransferItemSerial->stockSerialTransactionSource;
+            if (! $stockSerialTransactionSource) {
+                $dto = StockSerialTransactionCreateDTO::fromStockTransferItemSerialSource($stockTransferItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->create($dto);
+            } else {
+                $dto = StockSerialTransactionUpdateDTO::fromStockTransferItemSerialSource($stockTransferItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->update($stockSerialTransactionSource, $dto);
+            }
+
+            $stockSerialTransactionDestination = $stockTransferItemSerial->stockSerialTransactionDestination;
+            if (! $stockSerialTransactionDestination) {
+                $dto = StockSerialTransactionCreateDTO::fromStockTransferItemSerialDestination($stockTransferItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->create($dto);
+            } else {
+                $dto = StockSerialTransactionUpdateDTO::fromStockTransferItemSerialDestination($stockTransferItemSerial, $data->serial);
+                $this->stockSerialTransactionActions->update($stockSerialTransactionDestination, $dto);
+            }
+
+            $this->flushCache();
+
+            return $stockTransferItemSerial->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(StockTransferItemSerial $stockTransferItemSerial): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $stockSerialTransactionSource = $stockTransferItemSerial->stockSerialTransactionSource;
+            if ($stockSerialTransactionSource) {
+                $this->stockSerialTransactionActions->delete($stockSerialTransactionSource);
+            }
+
+            $stockSerialTransactionDestination = $stockTransferItemSerial->stockSerialTransactionDestination;
+            if ($stockSerialTransactionDestination) {
+                $this->stockSerialTransactionActions->delete($stockSerialTransactionDestination);
+            }
+
+            $retval = $stockTransferItemSerial->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+}
diff --git a/api/app/Actions/Supplier/SupplierActions.php b/api/app/Actions/Supplier/SupplierActions.php
new file mode 100644
index 000000000..6731226ac
--- /dev/null
+++ b/api/app/Actions/Supplier/SupplierActions.php
@@ -0,0 +1,330 @@
+<?php
+
+namespace App\Actions\Supplier;
+
+use App\Actions\ChartOfAccount\ChartOfAccountActions;
+use App\DTOs\ChartOfAccountCreateDTO;
+use App\DTOs\ChartOfAccountUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\SupplierCreateDTO;
+use App\DTOs\SupplierUpdateDTO;
+use App\Enums\RecordStatusEnum;
+use App\Models\Company;
+use App\Models\Supplier;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+use InvalidArgumentException;
+
+class SupplierActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct(
+        private readonly ChartOfAccountActions $chartOfAccountActions,
+    ) {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+
+        ?string $search,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Supplier::with(self::LIST_EAGER_LOADS)->select('suppliers.*')
+            ->whereCompanyId('suppliers', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('suppliers.code', 'like', '%'.$search.'%')
+                            ->orWhere('suppliers.name', 'like', '%'.$search.'%')
+                            ->orWhere('suppliers.address', 'like', '%'.$search.'%')
+                            ->orWhere('suppliers.city', 'like', '%'.$search.'%')
+                            ->orWhere('suppliers.payment_term_type', 'like', '%'.$search.'%')
+                            ->orWhere('suppliers.payment_term', 'like', '%'.$search.'%')
+                            ->orWhere('suppliers.tax_id', 'like', '%'.$search.'%')
+                            ->orWhere('suppliers.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('suppliers.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(suppliers.id, '.$includeId.') desc');
+        }
+        $query->orderBy('suppliers.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Supplier $supplier): Supplier
+    {
+        return $supplier->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(SupplierCreateDTO $data): Supplier
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $supplier = new Supplier();
+            $supplier->company_id = $data->companyId;
+            $supplier->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $supplier->name = $data->name;
+            $supplier->address = $data->address;
+            $supplier->city = $data->city;
+            $supplier->payment_term_type = $data->paymentTermType;
+            $supplier->payment_term = $data->paymentTerm;
+            $supplier->taxable_enterprise = $data->taxableEnterprise;
+            $supplier->tax_id = $data->taxId;
+            $supplier->status = $data->status;
+            $supplier->remarks = $data->remarks;
+            $supplier->save();
+
+            $parentChartOfAccount = $supplier->company->liabilityAccountPayableChartOfAccount;
+            if (! $parentChartOfAccount) {
+                throw new InvalidArgumentException('Supplier chart of account parent must exist in company.');
+            }
+
+            $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                companyId: $supplier->company_id,
+                scope: 'user',
+                systemKey: null,
+                parentId: $parentChartOfAccount->id,
+                sourceType: Supplier::class,
+                sourceId: $supplier->id,
+                code: $parentChartOfAccount->code.'.'.$supplier->code,
+                name: $supplier->name,
+                normalBalance: 'credit',
+                isGroup: false,
+                isActive: $supplier->status === RecordStatusEnum::ACTIVE,
+                remarks: $supplier->remarks,
+            );
+            $this->chartOfAccountActions->create($chartOfAccountDTO);
+
+            $this->flushCache();
+
+            return $supplier;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Supplier $supplier, SupplierUpdateDTO $data): Supplier
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $supplier->code = $this->generateUniqueCode($supplier->company_id, $data->code, $supplier->id);
+            $supplier->name = $data->name;
+            $supplier->address = $data->address;
+            $supplier->city = $data->city;
+            $supplier->payment_term_type = $data->paymentTermType;
+            $supplier->payment_term = $data->paymentTerm;
+            $supplier->taxable_enterprise = $data->taxableEnterprise;
+            $supplier->tax_id = $data->taxId;
+            $supplier->status = $data->status;
+            $supplier->remarks = $data->remarks;
+            $supplier->save();
+
+            $parentChartOfAccount = $supplier->company->liabilityAccountPayableChartOfAccount;
+            if (! $parentChartOfAccount) {
+                throw new InvalidArgumentException('Supplier chart of account parent must exist in company.');
+            }
+
+            $chartOfAccount = $supplier->chartOfAccount;
+            if ($chartOfAccount) {
+                $chartOfAccountDTO = new ChartOfAccountUpdateDTO(
+                    parentId: $parentChartOfAccount->id,
+                    code: $parentChartOfAccount->code.'.'.$supplier->code,
+                    name: $supplier->name,
+                    normalBalance: 'credit',
+                    isGroup: false,
+                    isActive: $supplier->status === RecordStatusEnum::ACTIVE,
+                    remarks: $supplier->remarks,
+                );
+                $this->chartOfAccountActions->update($chartOfAccount, $chartOfAccountDTO);
+            } else {
+                $chartOfAccountDTO = new ChartOfAccountCreateDTO(
+                    companyId: $supplier->company_id,
+                    scope: 'user',
+                    systemKey: null,
+                    parentId: $parentChartOfAccount->id,
+                    sourceType: Supplier::class,
+                    sourceId: $supplier->id,
+                    code: $parentChartOfAccount->code.'.'.$supplier->code,
+                    name: $supplier->name,
+                    normalBalance: 'credit',
+                    isGroup: false,
+                    isActive: $supplier->status === RecordStatusEnum::ACTIVE,
+                    remarks: $supplier->remarks,
+                );
+                $this->chartOfAccountActions->create($chartOfAccountDTO);
+            }
+
+            $this->flushCache();
+
+            return $supplier->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(Supplier $supplier): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $chartOfAccount = $supplier->chartOfAccount;
+            if ($chartOfAccount) {
+                $this->chartOfAccountActions->delete($chartOfAccount);
+            }
+
+            $retval = $supplier->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) {
+            return $code;
+        }
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->suppliers()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'SUP'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->suppliers()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->suppliers()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('suppliers.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->suppliers()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->suppliers()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('suppliers.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/Unit/UnitActions.php b/api/app/Actions/Unit/UnitActions.php
new file mode 100644
index 000000000..70266ed70
--- /dev/null
+++ b/api/app/Actions/Unit/UnitActions.php
@@ -0,0 +1,246 @@
+<?php
+
+namespace App\Actions\Unit;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\UnitCreateDTO;
+use App\DTOs\UnitUpdateDTO;
+use App\Models\Company;
+use App\Models\Unit;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class UnitActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+
+        ?string $search,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Unit::with(self::LIST_EAGER_LOADS)->select('units.*')
+            ->where('units.company_id', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('units.code', 'like', '%'.$search.'%')
+                            ->orWhere('units.name', 'like', '%'.$search.'%')
+                            ->orWhere('units.description', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('units.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(units.id, '.$includeId.') desc');
+        }
+        $query->orderBy('units.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Unit $unit): Unit
+    {
+        return $unit->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(UnitCreateDTO $data): Unit
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $unit = new Unit();
+            $unit->company_id = $data->companyId;
+            $unit->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $unit->name = $data->name;
+            $unit->description = $data->description;
+            $unit->type = $data->type;
+            $unit->save();
+
+            $this->flushCache();
+
+            return $unit;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Unit $unit, UnitUpdateDTO $data): Unit
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $unit->code = $this->generateUniqueCode($unit->company_id, $data->code, $unit->id);
+            $unit->name = $data->name;
+            $unit->description = $data->description;
+            $unit->type = $data->type;
+            $unit->save();
+
+            $this->flushCache();
+
+            return $unit->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(Unit $unit): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $unit->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->units()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'UNT'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->units()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->units()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('units.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->units()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->units()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('units.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/User/UserActions.php b/api/app/Actions/User/UserActions.php
index aef2d5fab..86fe112ce 100644
--- a/api/app/Actions/User/UserActions.php
+++ b/api/app/Actions/User/UserActions.php
@@ -3,8 +3,8 @@
 namespace App\Actions\User;
 
 use App\Actions\Role\RoleActions;
-use App\Enums\RecordStatus;
-use App\Enums\UserRoles;
+use App\Enums\RecordStatusEnum;
+use App\Enums\UserRolesEnum;
 use App\Models\Profile;
 use App\Models\Setting;
 use App\Models\User;
@@ -24,10 +24,111 @@ class UserActions
     use CacheHelper;
     use LoggerHelper;
 
+    private const LIST_EAGER_LOADS = [
+        'roles',
+        'profile',
+        'settings',
+    ];
+
+    private const DETAIL_EAGER_LOADS = [
+        'roles',
+        'profile',
+        'settings',
+        'companies.branches',
+    ];
+
+    private const READ_BY_ID_EAGER_LOADS = [
+        'roles.permissions',
+        'profile',
+        'companies.branches',
+        'settings',
+    ];
+
     public function __construct()
     {
     }
 
+    public function readAny(
+        string $search = '',
+        bool $paginate = true,
+        int $page = 1,
+        int $perPage = 10,
+        bool $useCache = true,
+    ): Paginator|Collection {
+        $timer_start = microtime(true);
+        $recordsCount = 0;
+
+        try {
+            $cacheKey = 'readAny_'.(empty($search) ? '[empty]' : $search).'-'.$paginate.'-'.$page.'-'.$perPage;
+            if ($useCache) {
+                $cacheResult = $this->readFromCache($cacheKey);
+
+                if (! is_null($cacheResult)) {
+                    return $cacheResult;
+                }
+            }
+
+            $result = null;
+            if (empty($search)) {
+                $usr = User::with(self::LIST_EAGER_LOADS)->latest();
+            } else {
+                $usr = User::with(self::LIST_EAGER_LOADS)
+                    ->where('email', 'like', '%'.$search.'%')
+                    ->orWhere('name', 'like', '%'.$search.'%')
+                    ->orWhereHas('profile', function ($query) use ($search) {
+                        $query->where('first_name', 'like', '%'.$search.'%')
+                            ->orWhere('last_name', 'like', '%'.$search.'%');
+                    })->latest();
+            }
+
+            if ($paginate) {
+                $perPage = is_numeric($perPage) ? $perPage : Config::get('dcslab.PAGINATION_LIMIT');
+                $result = $usr->paginate(abs($perPage));
+            } else {
+                $result = $usr->get();
+            }
+
+            $recordsCount = $result->count();
+
+            $this->saveToCache($cacheKey, $result);
+
+            return $result;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+        }
+    }
+
+    public function read(User $user): User
+    {
+        return $user->load(self::DETAIL_EAGER_LOADS);
+    }
+
+    public function readBy(string $key, string $value)
+    {
+        $timer_start = microtime(true);
+
+        try {
+            switch (strtoupper($key)) {
+                case 'ID':
+                    return User::with(self::READ_BY_ID_EAGER_LOADS)->find($value);
+                case 'EMAIL':
+                    return User::where('email', '=', $value)->first();
+                default:
+                    return null;
+            }
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
     public function registration(array $input): User
     {
         $name = $input['name'];
@@ -49,11 +150,11 @@ public function registration(array $input): User
             'tax_id' => 0,
             'ic_num' => 0,
             'country' => 'Singapore',
-            'status' => RecordStatus::ACTIVE,
+            'status' => RecordStatusEnum::ACTIVE,
         ];
 
         $roleActions = app(RoleActions::class);
-        $roles = [$roleActions->readBy('name', UserRoles::USER->value)->id];
+        $roles = [$roleActions->readBy('name', UserRolesEnum::USER->value)->id];
 
         $usr = $this->create(
             $input,
@@ -128,89 +229,6 @@ public function create(array $userArr, array $rolesArr, array $profileArr): User
         }
     }
 
-    public function readAny(
-        string $search = '',
-        bool $paginate = true,
-        int $page = 1,
-        int $perPage = 10,
-        bool $useCache = true,
-    ): Paginator|Collection {
-        $timer_start = microtime(true);
-        $recordsCount = 0;
-
-        try {
-            $cacheKey = 'readAny_'.(empty($search) ? '[empty]' : $search).'-'.$paginate.'-'.$page.'-'.$perPage;
-            if ($useCache) {
-                $cacheResult = $this->readFromCache($cacheKey);
-
-                if (! is_null($cacheResult)) {
-                    return $cacheResult;
-                }
-            }
-
-            $result = null;
-            $relationship = ['roles', 'profile', 'settings'];
-
-            if (empty($search)) {
-                $usr = User::with($relationship)->latest();
-            } else {
-                $usr = User::with($relationship)
-                    ->where('email', 'like', '%'.$search.'%')
-                    ->orWhere('name', 'like', '%'.$search.'%')
-                    ->orWhereHas('profile', function ($query) use ($search) {
-                        $query->where('first_name', 'like', '%'.$search.'%')
-                            ->orWhere('last_name', 'like', '%'.$search.'%');
-                    })->latest();
-            }
-
-            if ($paginate) {
-                $perPage = is_numeric($perPage) ? $perPage : Config::get('dcslab.PAGINATION_LIMIT');
-                $result = $usr->paginate(abs($perPage));
-            } else {
-                $result = $usr->get();
-            }
-
-            $recordsCount = $result->count();
-
-            $this->saveToCache($cacheKey, $result);
-
-            return $result;
-        } catch (Exception $e) {
-            $this->loggerDebug(__METHOD__, $e);
-            throw $e;
-        } finally {
-            $execution_time = microtime(true) - $timer_start;
-            $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
-        }
-    }
-
-    public function read(User $user): User
-    {
-        return $user->load('profile', 'roles', 'settings', 'companies.branches');
-    }
-
-    public function readBy(string $key, string $value)
-    {
-        $timer_start = microtime(true);
-
-        try {
-            switch (strtoupper($key)) {
-                case 'ID':
-                    return User::with('roles.permissions', 'profile', 'companies.branches', 'settings')->find($value);
-                case 'EMAIL':
-                    return User::where('email', '=', $value)->first();
-                default:
-                    return null;
-            }
-        } catch (Exception $e) {
-            $this->loggerDebug(__METHOD__, $e);
-            throw $e;
-        } finally {
-            $execution_time = microtime(true) - $timer_start;
-            $this->loggerPerformance(__METHOD__, $execution_time);
-        }
-    }
-
     public function update(User $user, ?array $userArr = null, ?array $rolesArr = null, ?array $profileArr = null, ?array $settingsArr = null): User
     {
         DB::beginTransaction();
diff --git a/api/app/Actions/VatProfile/VatProfileActions.php b/api/app/Actions/VatProfile/VatProfileActions.php
new file mode 100644
index 000000000..90094c553
--- /dev/null
+++ b/api/app/Actions/VatProfile/VatProfileActions.php
@@ -0,0 +1,267 @@
+<?php
+
+namespace App\Actions\VatProfile;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\VatProfileCreateDTO;
+use App\DTOs\VatProfileUpdateDTO;
+use App\Models\Company;
+use App\Models\VatProfile;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class VatProfileActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?string $search,
+
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = VatProfile::with(self::LIST_EAGER_LOADS)->select('vat_profiles.*')
+            ->where('vat_profiles.company_id', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use (
+            $withTrashed,
+            $search,
+            $includeId,
+        ) {
+            $query->where(function ($query) use (
+                $withTrashed,
+                $search,
+            ) {
+                $query->withoutTrashed();
+                if ($withTrashed) {
+                    $query->withTrashed();
+                }
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->where('vat_profiles.code', 'like', '%'.$search.'%')
+                            ->orWhere('vat_profiles.name', 'like', '%'.$search.'%')
+                            ->orWhere('vat_profiles.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('vat_profiles.id', $includeId);
+            }
+        });
+
+        if ($includeId) {
+            $query->orderByRaw('FIELD(vat_profiles.id, '.$includeId.') desc');
+        }
+        $query->orderBy('vat_profiles.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    empty($search) ? '[empty]' : $search,
+                    $companyId,
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) {
+                        return $cacheData;
+                    }
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(VatProfile $vatProfile): VatProfile
+    {
+        return $vatProfile->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(VatProfileCreateDTO $data): VatProfile
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $vatProfile = new VatProfile();
+            $vatProfile->company_id = $data->companyId;
+            $vatProfile->code = $this->generateUniqueCode(
+                $data->companyId,
+                $data->code,
+                null,
+            );
+            $vatProfile->name = $data->name;
+            $vatProfile->vat_rate = $data->vatRate;
+            $vatProfile->vat_base_numerator = $data->vatBaseNumerator;
+            $vatProfile->vat_base_denominator = $data->vatBaseDenominator;
+            $vatProfile->remarks = $data->remarks;
+            $vatProfile->is_active = $data->isActive;
+            $vatProfile->save();
+
+            $this->flushCache();
+
+            return $vatProfile;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(VatProfile $vatProfile, VatProfileUpdateDTO $data): VatProfile
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $vatProfile->code = $this->generateUniqueCode(
+                $vatProfile->company_id,
+                $data->code,
+                $vatProfile->id,
+            );
+            $vatProfile->name = $data->name;
+            $vatProfile->vat_rate = $data->vatRate;
+            $vatProfile->vat_base_numerator = $data->vatBaseNumerator;
+            $vatProfile->vat_base_denominator = $data->vatBaseDenominator;
+            $vatProfile->remarks = $data->remarks;
+            $vatProfile->is_active = $data->isActive;
+            $vatProfile->save();
+
+            $this->flushCache();
+
+            return $vatProfile->refresh();
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(VatProfile $vatProfile): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $vatProfile->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->vatProfiles()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'VAT'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->vatProfiles()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->vatProfiles()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('vat_profiles.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->vatProfiles()->count() == 0) {
+            return true;
+        }
+
+        $query = $company->vatProfiles()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('vat_profiles.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Actions/Warehouse/WarehouseActions.php b/api/app/Actions/Warehouse/WarehouseActions.php
new file mode 100644
index 000000000..0aba8580f
--- /dev/null
+++ b/api/app/Actions/Warehouse/WarehouseActions.php
@@ -0,0 +1,269 @@
+<?php
+
+namespace App\Actions\Warehouse;
+
+use App\DTOs\ExecuteDTO;
+use App\DTOs\WarehouseCreateDTO;
+use App\DTOs\WarehouseUpdateDTO;
+use App\Models\Company;
+use App\Models\Warehouse;
+use App\Traits\CacheHelper;
+use App\Traits\LoggerHelper;
+use Exception;
+use Illuminate\Support\Facades\Config;
+
+class WarehouseActions
+{
+    use CacheHelper;
+    use LoggerHelper;
+
+    private const LIST_EAGER_LOADS = [
+        'company',
+        'branch',
+    ];
+
+    public function __construct()
+    {
+    }
+
+    public function readAny(
+        bool $withTrashed,
+        int $companyId,
+        ?int $branchId,
+
+        ?string $search,
+        ?int $status,
+        ?int $includeId,
+
+        ?ExecuteDTO $execute
+    ) {
+        $query = Warehouse::with(self::LIST_EAGER_LOADS)->select('warehouses.*')
+            ->whereCompanyId('warehouses', $companyId)
+            ->withTrashed();
+
+        $query->where(function ($query) use ($withTrashed, $search, $branchId, $status, $includeId) {
+            $query->where(function ($query) use ($withTrashed, $search, $branchId, $status) {
+                $query->withoutTrashed();
+                if ($withTrashed) $query->withTrashed();
+
+                if ($search) {
+                    $query->where(function ($query) use ($search) {
+                        $query->whereHas('branch', function ($query) use ($search) {
+                            $query->where(function ($query) use ($search) {
+                                $query->where('branches.code', 'like', '%'.$search.'%')
+                                    ->orWhere('branches.name', 'like', '%'.$search.'%')
+                                    ->orWhere('branches.address', 'like', '%'.$search.'%')
+                                    ->orWhere('branches.city', 'like', '%'.$search.'%')
+                                    ->orWhere('branches.contact', 'like', '%'.$search.'%')
+                                    ->orWhere('branches.remarks', 'like', '%'.$search.'%');
+                            });
+                        })
+                            ->orWhere('warehouses.code', 'like', '%'.$search.'%')
+                            ->orWhere('warehouses.name', 'like', '%'.$search.'%')
+                            ->orWhere('warehouses.address', 'like', '%'.$search.'%')
+                            ->orWhere('warehouses.city', 'like', '%'.$search.'%')
+                            ->orWhere('warehouses.contact', 'like', '%'.$search.'%')
+                            ->orWhere('warehouses.remarks', 'like', '%'.$search.'%');
+                    });
+                }
+
+                if ($branchId) {
+                    $query->where('warehouses.branch_id', $branchId);
+                }
+
+                if ($status !== null) {
+                    $query->where('warehouses.status', '=', $status);
+                }
+            });
+
+            if ($includeId) {
+                $query->orWhere('warehouses.id', $includeId);
+            }
+        });
+
+        if ($includeId) $query->orderByRaw('FIELD(warehouses.id, '.$includeId.') desc');
+        $query->orderBy('warehouses.name', 'asc');
+
+        if ($execute) {
+            $timer_start = microtime(true);
+            $recordsCount = 0;
+
+            try {
+                $cacheParams = [
+                    $withTrashed ? 'true' : 'false',
+                    $companyId,
+                    empty($search) ? '[empty]' : $search,
+                    $branchId ?? '[null]',
+                    $status ?? '[null]',
+                    $includeId ?? '[null]',
+                    $execute->pagination ? 'true' : 'false',
+                    $execute->pagination?->page ?? '[null]',
+                    $execute->pagination?->perPage ?? '[null]',
+                    $execute->get?->limit ?? '[null]',
+                ];
+
+                $cacheKey = 'readAny_'.implode('-', $cacheParams);
+
+                if ($execute->useCache) {
+                    $cacheData = $this->readFromCache($cacheKey);
+                    if ($cacheData !== Config::get('dcslab.ERROR_RETURN_VALUE')) return $cacheData;
+                }
+
+                if ($execute->pagination) {
+                    $result = $query->paginate(
+                        perPage: $execute->pagination->perPage,
+                        columns: ['*'],
+                        pageName: 'page',
+                        page: $execute->pagination->page
+                    );
+                } else {
+                    if ($execute->get?->limit) {
+                        $query->limit($execute->get->limit);
+                    }
+                    $result = $query->get();
+                }
+
+                $recordsCount = $result->count();
+
+                if ($execute->useCache) {
+                    $this->saveToCache($cacheKey, $result);
+                }
+
+                return $result;
+            } catch (Exception $e) {
+                $this->loggerDebug(__METHOD__, $e);
+                throw $e;
+            } finally {
+                $execution_time = microtime(true) - $timer_start;
+                $this->loggerPerformance(__METHOD__, $execution_time, $recordsCount);
+            }
+        }
+
+        return $query;
+    }
+
+    public function read(Warehouse $warehouse): Warehouse
+    {
+        return $warehouse->load(self::LIST_EAGER_LOADS);
+    }
+
+    public function create(WarehouseCreateDTO $data): Warehouse
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $warehouse = new Warehouse();
+            $warehouse->company_id = $data->companyId;
+            $warehouse->branch_id = $data->branchId;
+            $warehouse->code = $this->generateUniqueCode($data->companyId, $data->code, null);
+            $warehouse->name = $data->name;
+            $warehouse->address = $data->address;
+            $warehouse->city = $data->city;
+            $warehouse->contact = $data->contact;
+            $warehouse->remarks = $data->remarks;
+            $warehouse->status = $data->status;
+            $warehouse->save();
+
+            $this->flushCache();
+
+            return $warehouse;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function update(Warehouse $warehouse, WarehouseUpdateDTO $data): Warehouse
+    {
+        $timer_start = microtime(true);
+
+        try {
+            $warehouse->code = $this->generateUniqueCode($warehouse->company_id, $data->code, $warehouse->id);
+            $warehouse->name = $data->name;
+            $warehouse->address = $data->address;
+            $warehouse->city = $data->city;
+            $warehouse->contact = $data->contact;
+            $warehouse->remarks = $data->remarks;
+            $warehouse->status = $data->status;
+            $warehouse->save();
+
+            $this->flushCache();
+
+            return $warehouse;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function delete(Warehouse $warehouse): bool
+    {
+        $timer_start = microtime(true);
+
+        $retval = false;
+
+        try {
+            $retval = $warehouse->delete();
+
+            $this->flushCache();
+
+            return $retval;
+        } catch (Exception $e) {
+            $this->loggerDebug(__METHOD__, $e);
+            throw $e;
+        } finally {
+            $execution_time = microtime(true) - $timer_start;
+            $this->loggerPerformance(__METHOD__, $execution_time);
+        }
+    }
+
+    public function generateUniqueCode(int $companyId, string $code, ?int $exceptId): string
+    {
+        if ($code != config('dcslab.KEYWORDS.AUTO')) return $code;
+
+        $company = Company::find($companyId);
+
+        $tryCount = 0;
+        do {
+            $count = $company->warehouses()->withTrashed()->count() + 1 + $tryCount;
+            $code = 'WH'.str_pad($count, 3, '0', STR_PAD_LEFT);
+            $tryCount++;
+        } while (! $this->isUniqueCode($companyId, $code, $exceptId));
+
+        return $code;
+    }
+
+    public function isUniqueCode(int $companyId, string $code, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->warehouses()->count() == 0) return true;
+
+        $query = $company->warehouses()->where('code', '=', $code);
+        if ($exceptId) {
+            $query->where('warehouses.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+
+    public function isUniqueName(int $companyId, string $name, ?int $exceptId): bool
+    {
+        $company = Company::find($companyId);
+
+        if ($company->warehouses()->count() == 0) return true;
+
+        $query = $company->warehouses()->where('name', '=', $name);
+        if ($exceptId) {
+            $query->where('warehouses.id', '<>', $exceptId);
+        }
+
+        return $query->doesntExist();
+    }
+}
diff --git a/api/app/Console/Commands/AppInstall.php b/api/app/Console/Commands/AppInstall.php
index f3524b5ca..6d4d584ba 100644
--- a/api/app/Console/Commands/AppInstall.php
+++ b/api/app/Console/Commands/AppInstall.php
@@ -2,7 +2,17 @@
 
 namespace App\Console\Commands;
 
+use App\Actions\Role\RoleActions;
 use App\Actions\System\SystemActions;
+use App\Actions\User\UserActions;
+use App\Enums\RecordStatusEnum;
+use App\Enums\UserRolesEnum;
+use Database\Seeders\BrandSeeder;
+use Database\Seeders\CompanySeeder;
+use Database\Seeders\CustomerGroupSeeder;
+use Database\Seeders\CustomerSeeder;
+use Database\Seeders\ProductCategorySeeder;
+use Database\Seeders\UnitSeeder;
 use Exception;
 use Illuminate\Console\Command;
 use Illuminate\Support\Facades\App;
@@ -43,6 +53,17 @@ public function handle()
                 break;
         }
 
+        (new CompanySeeder())->run();
+
+        (new ProductCategorySeeder())->run();
+        (new BrandSeeder())->run();
+        (new UnitSeeder())->run();
+        // (new ProductSeeder())->run();
+
+        (new CustomerGroupSeeder())->run();
+        (new CustomerSeeder())->run();
+        // (new StockAdjustmentSeeder())->run();
+
         $this->info('Done!');
 
         return Command::SUCCESS;
@@ -62,10 +83,11 @@ private function defaultInstallation(): void
             return;
         }
 
+        $this->cleanupStorageDirectories();
         $this->generateAppKey();
         $this->migrateAndSeed();
         $this->storageLinking();
-        $this->createAdminOrDevAccount('admin');
+        $this->createDevAccount();
     }
 
     private function systemCheckingIsOK(): bool
@@ -132,6 +154,34 @@ private function storageLinking(): void
         $this->info(Artisan::output());
     }
 
+    private function cleanupStorageDirectories(): void
+    {
+        $this->info('Cleaning storage directories ...');
+
+        $directories = [
+            storage_path('app/public'),
+            storage_path('logs'),
+        ];
+
+        foreach ($directories as $directory) {
+            if (! File::exists($directory) || ! File::isDirectory($directory)) {
+                continue;
+            }
+
+            foreach (File::files($directory) as $file) {
+                if ($file->getFilename() === '.gitignore') {
+                    continue;
+                }
+
+                File::delete($file->getPathname());
+            }
+
+            foreach (File::directories($directory) as $subDirectory) {
+                File::deleteDirectory($subDirectory);
+            }
+        }
+    }
+
     private function passPreInstallCheck()
     {
         if (! File::exists('.env')) {
@@ -183,4 +233,70 @@ private function checkRedisConnection()
             return false;
         }
     }
+
+    private function createDevAccount(): void
+    {
+        $this->info('Creating Developer Account...');
+
+        $userActions = new UserActions();
+        $roleActions = new RoleActions();
+
+        // Get Developer role
+        $roleName = ucfirst(UserRolesEnum::DEVELOPER->value);
+
+        try {
+            $role = $roleActions->readBy('NAME', $roleName);
+
+            if (! $role) {
+                $this->error('Role "'.$roleName.'" not found. Skipping account creation.');
+                $this->warn('Make sure you have run the seeders to create roles.');
+
+                return;
+            }
+
+            // Default user data
+            $userName = 'Developer';
+            $userEmail = 'dev@app.com';
+            $userPassword = 'password';
+
+            // Check if user already exists
+            $existingUser = $userActions->readBy('EMAIL', $userEmail);
+            if ($existingUser) {
+                $this->warn('User with email "'.$userEmail.'" already exists. Skipping account creation.');
+
+                return;
+            }
+
+            $user = [
+                'name' => $userName,
+                'email' => $userEmail,
+                'password' => $userPassword,
+            ];
+
+            $profile = [
+                'first_name' => $userName,
+                'last_name' => '',
+                'tax_id' => 0,
+                'ic_num' => 0,
+                'country' => 'Singapore',
+                'status' => RecordStatusEnum::ACTIVE,
+            ];
+
+            $userActions->create(
+                $user,
+                [$role->id],
+                $profile
+            );
+
+            $this->info('✓ Developer account created successfully!');
+            $this->info('  Name: '.$userName);
+            $this->info('  Email: '.$userEmail);
+            $this->info('  Password: '.$userPassword);
+            $this->info('  Role: '.$role->display_name);
+            $this->warn('  ⚠ Please change the default password after first login!');
+        } catch (Exception $e) {
+            $this->error('Failed to create developer account: '.$e->getMessage());
+            $this->warn('You can create an account manually using: php artisan app:user create');
+        }
+    }
 }
diff --git a/api/app/Console/Commands/AppSeed.php b/api/app/Console/Commands/AppSeed.php
index 250fdcfc5..e8daa6bc9 100644
--- a/api/app/Console/Commands/AppSeed.php
+++ b/api/app/Console/Commands/AppSeed.php
@@ -2,10 +2,22 @@
 
 namespace App\Console\Commands;
 
-use Database\Seeders\BranchTableSeeder;
-use Database\Seeders\CompanyTableSeeder;
-use Database\Seeders\RoleTableSeeder;
-use Database\Seeders\UserTableSeeder;
+use Database\Seeders\BranchSeeder;
+use Database\Seeders\BrandSeeder;
+use Database\Seeders\CashAccountSeeder;
+use Database\Seeders\CompanySeeder;
+use Database\Seeders\CustomerGroupSeeder;
+use Database\Seeders\CustomerSeeder;
+use Database\Seeders\InvestorSeeder;
+use Database\Seeders\ProductCategorySeeder;
+use Database\Seeders\ProductSeeder;
+use Database\Seeders\RoleSeeder;
+use Database\Seeders\StockAdjustmentCategorySeeder;
+use Database\Seeders\StockAdjustmentSeeder;
+use Database\Seeders\SupplierSeeder;
+use Database\Seeders\UnitSeeder;
+use Database\Seeders\UserSeeder;
+use Database\Seeders\WarehouseSeeder;
 use Illuminate\Console\Command;
 use Illuminate\Support\Facades\App;
 
@@ -16,7 +28,7 @@ class AppSeed extends Command
      *
      * @var string
      */
-    protected $signature = 'app:seed {args?}';
+    protected $signature = 'app:seed';
 
     /**
      * The console command description.
@@ -40,151 +52,75 @@ public function handle()
             $runInProd = $this->confirm('Do you really wish to run this command?', false);
 
             if (! $runInProd) {
-                return;
+                return Command::SUCCESS;
             }
         }
 
-        $argsArr = [];
-
-        if (! empty($this->argument('args'))) {
-            if (str_contains($this->argument('args'), ',')) {
-                $argsArr = explode(',', $this->argument('args'));
-            } else {
-                $argsArr = [
-                    $this->argument('args'),
-                ];
-            }
-            $this->runWithArgs($argsArr);
-        } else {
-            $this->runDefault();
-        }
+        $this->runDefault();
 
         $this->info('Done!');
 
         return Command::SUCCESS;
     }
 
-    private function runWithArgs(array $argsArr)
-    {
-        foreach ($argsArr as $args) {
-            switch (strtolower($args)) {
-                case 'user':
-                case 'usertableseeder':
-                    $this->runUserTableSeederInteractive();
-                    break;
-                case 'role':
-                case 'roletableseeder':
-                    $this->runRoleTableSeederInteractive();
-                    break;
-                case 'company':
-                case 'companytableseeder':
-                    $this->runCompanyTableSeederInteractive();
-                    break;
-                case 'branch':
-                case 'branchtableseeder':
-                    $this->runBranchTableSeederInteractive();
-                    break;
-                default:
-                    $this->info('Cannot find seeder for '.$args);
-                    break;
-            }
-        }
-    }
-
     private function runDefault()
     {
-        $total = 4;
+        $total = 12;
+        $this->info('Starting data seeding...');
         $this->info('');
         $progressBar = $this->output->createProgressBar($total);
         $progressBar->start();
 
-        $this->runUserTableSeeder(false, 5);
-        $progressBar->advance();
-        $this->runRoleTableSeeder(true, 5);
-        $progressBar->advance();
-        $this->runCompanyTableSeeder(5, 0);
-        $progressBar->advance();
-        $this->runBranchTableSeeder(5, 0);
-        $progressBar->advance();
-
-        $progressBar->finish();
-        $this->info('');
-        $this->info('');
-    }
-
-    private function runUserTableSeederInteractive()
-    {
-        $this->info('Starting UserTableSeeder');
-        $truncate = $this->confirm('Do you want to truncate the users table first?', false);
-        $count = $this->ask('How many data:', 5);
-
-        $this->info('Seeding...');
+        // (new UserSeeder())->run(truncate: false, count: 5);
+        // $progressBar->advance();
 
-        $this->runUserTableSeeder($truncate, $count);
+        // (new RoleSeeder())->run(randomPermission: true, count: 5);
+        // $progressBar->advance();
 
-        $this->info('UserTableSeeder Finish.');
-    }
-
-    private function runUserTableSeeder($truncate, $count)
-    {
-        $seeder = new UserTableSeeder();
-        $seeder->callWith(UserTableSeeder::class, [$truncate, $count]);
-    }
-
-    private function runRoleTableSeederInteractive()
-    {
-        $this->info('Starting RoleTableSeeder');
-        $randomPermission = true;
-        $count = $this->ask('How many data:', 5);
+        (new CompanySeeder())->run(companiesPerUser: 1, userId: null);
+        $progressBar->advance();
 
-        $this->info('Seeding...');
+        (new BranchSeeder())->run(branchesPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-        $this->runRoleTableSeeder($randomPermission, $count);
+        (new WarehouseSeeder())->run(warehousesPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-        $this->info('RoleTableSeeder Finish.');
-    }
+        (new InvestorSeeder())->run(investorsPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-    private function runRoleTableSeeder($randomPermission, $count)
-    {
-        $seeder = new RoleTableSeeder();
-        $seeder->callWith(RoleTableSeeder::class, [$randomPermission, $count]);
-    }
+        (new CashAccountSeeder())->run(cashAccountsPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-    private function runCompanyTableSeederInteractive()
-    {
-        $this->info('Starting CompanyTableSeeder');
-        $companiesPerUsers = $this->ask('How many companies for each users:', 3);
-        $userId = $this->ask('Only to this userId (0 to all):', 0);
+        (new ProductCategorySeeder())->run(productCategoriesPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-        $this->info('Seeding...');
+        (new BrandSeeder())->run(brandsPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-        $this->runCompanyTableSeeder($companiesPerUsers, $userId);
+        (new UnitSeeder())->run(unitsPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-        $this->info('CompanyTableSeeder Finish.');
-    }
+        // (new ProductSeeder())->run(companyId: null, qtyPerCompany: 5);
+        // $progressBar->advance();
 
-    private function runCompanyTableSeeder($companiesPerUsers, $userId)
-    {
-        $seeder = new CompanyTableSeeder();
-        $seeder->callWith(CompanyTableSeeder::class, [$companiesPerUsers, $userId]);
-    }
+        (new SupplierSeeder())->run(suppliersPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-    private function runBranchTableSeederInteractive()
-    {
-        $this->info('Starting BranchTableSeeder');
-        $branchPerCompanies = $this->ask('How many branches per company (0 to skip) :', 3);
-        $onlyThisCompanyId = $this->ask('Only for this companyId (0 to all):', 0);
+        (new CustomerGroupSeeder())->run(customerGroupsPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-        $this->info('Seeding...');
+        (new CustomerSeeder())->run(customersPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-        $this->runBranchTableSeeder($branchPerCompanies, $onlyThisCompanyId);
+        (new StockAdjustmentCategorySeeder())->run(stockAdjustmentCategoriesPerCompany: 5, companyId: null);
+        $progressBar->advance();
 
-        $this->info('BranchTableSeeder Finish.');
-    }
+        // (new StockAdjustmentSeeder())->run(qtyPerCompany: 5, companyId: null);
+        // $progressBar->advance();
 
-    private function runBranchTableSeeder($branchPerCompanies, $onlyThisCompanyId)
-    {
-        $seeder = new BranchTableSeeder();
-        $seeder->callWith(BranchTableSeeder::class, [$branchPerCompanies, $onlyThisCompanyId]);
+        $progressBar->finish();
+        $this->info('');
+        $this->info('');
     }
 }
diff --git a/api/app/Console/Commands/AppUser.php b/api/app/Console/Commands/AppUser.php
index c48069f95..3c7a5c977 100644
--- a/api/app/Console/Commands/AppUser.php
+++ b/api/app/Console/Commands/AppUser.php
@@ -4,8 +4,8 @@
 
 use App\Actions\Role\RoleActions;
 use App\Actions\User\UserActions;
-use App\Enums\RecordStatus;
-use App\Enums\UserRoles;
+use App\Enums\RecordStatusEnum;
+use App\Enums\UserRolesEnum;
 use Exception;
 use Illuminate\Console\Command;
 
@@ -39,7 +39,7 @@ public function handle()
             case 'changerole':
             case 'changeroles':
             case 'changeuserrole':
-            case 'changeuserroles':
+            case 'changeuserrolesEnum':
                 $this->changeUserRoles();
                 break;
             default:
@@ -64,9 +64,9 @@ private function createUser()
 
         do {
             $userType = $this->choice('Select Role: ', [
-                ucfirst(UserRoles::DEVELOPER->value),
-                ucfirst(UserRoles::ADMINISTRATOR->value),
-                ucfirst(UserRoles::USER->value),
+                ucfirst(UserRolesEnum::DEVELOPER->value),
+                ucfirst(UserRolesEnum::ADMINISTRATOR->value),
+                ucfirst(UserRolesEnum::USER->value),
             ]);
             $userName = $this->ask('Name', $userName);
             $userEmail = $this->ask('Email', $userEmail);
@@ -79,7 +79,7 @@ private function createUser()
                 'tax_id' => 0,
                 'ic_num' => 0,
                 'country' => 'Singapore',
-                'status' => RecordStatus::ACTIVE,
+                'status' => RecordStatusEnum::ACTIVE,
             ];
 
             $user = [
diff --git a/api/app/Console/Commands/OpenFilesCommand.php b/api/app/Console/Commands/OpenFilesCommand.php
new file mode 100644
index 000000000..2bc4230fc
--- /dev/null
+++ b/api/app/Console/Commands/OpenFilesCommand.php
@@ -0,0 +1,320 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\File;
+use Illuminate\Support\Str;
+
+class OpenFilesCommand extends Command
+{
+    protected $signature = 'app:open-files {name}';
+
+    protected $description = 'Command description';
+
+    public function handle()
+    {
+        $this->info('Opening files... 🪄');
+
+        $name = $this->argument('name');
+
+        $this->openMigration($name);
+        $this->openModel($name);
+        $this->openFactory($name);
+        $this->openSeeder($name);
+        $this->openAppSeed();
+        $this->openActions($name);
+        $this->openResource($name);
+        // $this->openEnMenuJson();
+        // $this->openIdMenuJson();
+        $this->openPolicy($name);
+        $this->openRequest($name);
+        $this->openController($name);
+        $this->openLaratrustSeeder();
+        $this->openApiRoutes();
+        $this->openActionsTest($name);
+        $this->openAPITest($name);
+    }
+
+    public function openMigration($name)
+    {
+        $name = Str::snake($name);
+        $name = Str::plural($name);
+
+        $migrationsPath = database_path('migrations');
+
+        $migrations = collect(File::allFiles($migrationsPath))
+            ->filter(function ($file) use ($name) {
+                return Str::contains($file->getFilename(), $name);
+            })
+            ->map(function ($file) {
+                return $file->getPathname();
+            });
+
+        foreach ($migrations as $migration) {
+            if (! File::exists($migration)) {
+                $this->error("Migration file not found: {$migration}");
+
+                continue;
+            } else {
+                $this->info("Opening: {$migration}");
+                $this->openInCodeEditor($migration);
+            }
+        }
+    }
+
+    public function openModel($name)
+    {
+        $modelPath = app_path("Models/{$name}.php");
+
+        if (! File::exists($modelPath)) {
+            $this->error("Model file not found: {$modelPath}");
+
+            return;
+        } else {
+            $this->info("Opening: {$modelPath}");
+            $this->openInCodeEditor($modelPath);
+        }
+    }
+
+    public function openFactory($name)
+    {
+        $factoryPath = database_path("factories/{$name}Factory.php");
+
+        if (! File::exists($factoryPath)) {
+            $this->error("Factory file not found: {$factoryPath}");
+
+            return;
+        } else {
+            $this->info("Opening: {$factoryPath}");
+            $this->openInCodeEditor($factoryPath);
+        }
+    }
+
+    public function openSeeder($name)
+    {
+        $seederPath = database_path("seeders/{$name}Seeder.php");
+
+        if (! File::exists($seederPath)) {
+            $this->error("Seeder file not found: {$seederPath}");
+
+            return;
+        } else {
+            $this->info("Opening: {$seederPath}");
+            $this->openInCodeEditor($seederPath);
+        }
+    }
+
+    public function openAppSeed()
+    {
+        $path = app_path('Console/Commands/AppSeed.php');
+
+        if (! File::exists($path)) {
+            $this->error("Seeder file not found: {$path}");
+        } else {
+            $this->info("Opening: {$path}");
+            $this->openInCodeEditor($path);
+        }
+    }
+
+    public function openActions($name)
+    {
+        $ActionsPath = app_path("Actions/{$name}/{$name}Actions.php");
+
+        if (! File::exists($ActionsPath)) {
+            $this->error("Actions file not found: {$ActionsPath}");
+
+            return;
+        } else {
+            $this->info("Opening: {$ActionsPath}");
+            $this->openInCodeEditor($ActionsPath);
+        }
+    }
+
+    public function openResource($name)
+    {
+        $resourcePath = app_path("Http/Resources/{$name}Resource.php");
+
+        if (! File::exists($resourcePath)) {
+            $this->error("Resource file not found: {$resourcePath}");
+
+            return;
+        } else {
+            $this->info("Opening: {$resourcePath}");
+            $this->openInCodeEditor($resourcePath);
+        }
+    }
+
+    // public function openEnMenuJson()
+    // {
+    //     $path = base_path('src/lang/en/components/menu.json');
+
+    //     if (! File::exists($path)) {
+    //         $this->error("menu json file not found: {$path}");
+    //     } else {
+    //         $this->info("Opening: {$path}");
+    //         $this->openInCodeEditor($path);
+    //     }
+    // }
+
+    // public function openIdMenuJson()
+    // {
+    //     $path = base_path('src/lang/id/components/menu.json');
+
+    //     if (! File::exists($path)) {
+    //         $this->error("menu json file not found: {$path}");
+    //     } else {
+    //         $this->info("Opening: {$path}");
+    //         $this->openInCodeEditor($path);
+    //     }
+    // }
+
+    public function openPolicy($name)
+    {
+        $policyPath = app_path("Policies/{$name}Policy.php");
+
+        if (! File::exists($policyPath)) {
+            $this->error("Policy file not found: {$policyPath}");
+
+            return;
+        } else {
+            $this->info("Opening: {$policyPath}");
+            $this->openInCodeEditor($policyPath);
+        }
+    }
+
+    public function openRequest($name)
+    {
+        $requestPath = app_path("Http/Requests/{$name}Request.php");
+
+        if (File::exists($requestPath)) {
+            $this->info("Opening: {$requestPath}");
+            $this->openInCodeEditor($requestPath);
+        } else {
+            $this->error("Request file not found: {$requestPath}");
+        }
+    }
+
+    public function openController($name)
+    {
+        $controllerPath = app_path("Http/Controllers/{$name}Controller.php");
+
+        if (! File::exists($controllerPath)) {
+            $this->error("Controller file not found: {$controllerPath}");
+
+            return;
+        } else {
+            $this->info("Opening: {$controllerPath}");
+            $this->openInCodeEditor($controllerPath);
+        }
+    }
+
+    public function openLaratrustSeeder()
+    {
+        $path = base_path('config/laratrust_seeder.php');
+
+        if (! File::exists($path)) {
+            $this->error("laratrust_seeder file not found: {$path}");
+        } else {
+            $this->info("Opening: {$path}");
+            $this->openInCodeEditor($path);
+        }
+    }
+
+    public function openApiRoutes()
+    {
+        $path = base_path('routes/api.php');
+
+        if (! File::exists($path)) {
+            $this->error("API routes file not found: {$path}");
+        } else {
+            $this->info("Opening: {$path}");
+            $this->openInCodeEditor($path);
+        }
+    }
+
+    public function openActionsTest($name)
+    {
+        $createTest = base_path("tests/Unit/Actions/{$name}Actions/{$name}ActionsCreateTest.php");
+
+        if (! File::exists($createTest)) {
+            $this->error("Test file not found: {$createTest}");
+        } else {
+            $this->info("Opening: {$createTest}");
+            $this->openInCodeEditor($createTest);
+        }
+
+        $readTest = base_path("tests/Unit/Actions/{$name}Actions/{$name}ActionsReadTest.php");
+
+        if (! File::exists($readTest)) {
+            $this->error("Test file not found: {$readTest}");
+        } else {
+            $this->info("Opening: {$readTest}");
+            $this->openInCodeEditor($readTest);
+        }
+
+        $editTest = base_path("tests/Unit/Actions/{$name}Actions/{$name}ActionsEditTest.php");
+
+        if (! File::exists($editTest)) {
+            $this->error("Test file not found: {$editTest}");
+        } else {
+            $this->info("Opening: {$editTest}");
+            $this->openInCodeEditor($editTest);
+        }
+
+        $deleteTest = base_path("tests/Unit/Actions/{$name}Actions/{$name}ActionsDeleteTest.php");
+
+        if (! File::exists($deleteTest)) {
+            $this->error("Test file not found: {$deleteTest}");
+        } else {
+            $this->info("Opening: {$deleteTest}");
+            $this->openInCodeEditor($deleteTest);
+        }
+    }
+
+    public function openAPITest($name)
+    {
+        $createTest = base_path("tests/Feature/API/{$name}API/{$name}APICreateTest.php");
+
+        if (! File::exists($createTest)) {
+            $this->error("Test file not found: {$createTest}");
+        } else {
+            $this->info("Opening: {$createTest}");
+            $this->openInCodeEditor($createTest);
+        }
+
+        $readTest = base_path("tests/Feature/API/{$name}API/{$name}APIReadTest.php");
+
+        if (! File::exists($readTest)) {
+            $this->error("Test file not found: {$readTest}");
+        } else {
+            $this->info("Opening: {$readTest}");
+            $this->openInCodeEditor($readTest);
+        }
+
+        $editTest = base_path("tests/Feature/API/{$name}API/{$name}APIEditTest.php");
+
+        if (! File::exists($editTest)) {
+            $this->error("Test file not found: {$editTest}");
+        } else {
+            $this->info("Opening: {$editTest}");
+            $this->openInCodeEditor($editTest);
+        }
+
+        $deleteTest = base_path("tests/Feature/API/{$name}API/{$name}APIDeleteTest.php");
+
+        if (! File::exists($deleteTest)) {
+            $this->error("Test file not found: {$deleteTest}");
+        } else {
+            $this->info("Opening: {$deleteTest}");
+            $this->openInCodeEditor($deleteTest);
+        }
+    }
+
+    protected function openInCodeEditor($filePath)
+    {
+        $command = 'code '.escapeshellarg($filePath);
+        // $command = 'cursor '.escapeshellarg($filePath);
+        exec($command);
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentCreateDTO.php b/api/app/DTOs/AssetAdjustmentCreateDTO.php
new file mode 100644
index 000000000..2dae98faa
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentCreateDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly string $remarks,
+        public readonly bool $isPosted,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $inItems,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $outItems,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentInItemCreateDTO.php b/api/app/DTOs/AssetAdjustmentInItemCreateDTO.php
new file mode 100644
index 000000000..dfb130d90
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentInItemCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentInItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $assetAdjustmentId,
+        public readonly int $assetId,
+        public readonly float $qty,
+        public readonly string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentInItemSerialCreateDTO.php b/api/app/DTOs/AssetAdjustmentInItemSerialCreateDTO.php
new file mode 100644
index 000000000..eb47ecdea
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentInItemSerialCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentInItemSerialCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $assetAdjustmentId,
+        public readonly int $assetAdjustmentInItemId,
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentInItemSerialUpdateDTO.php b/api/app/DTOs/AssetAdjustmentInItemSerialUpdateDTO.php
new file mode 100644
index 000000000..aa822b4a5
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentInItemSerialUpdateDTO.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentInItemSerialUpdateDTO
+{
+    public function __construct(
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentInItemUpdateDTO.php b/api/app/DTOs/AssetAdjustmentInItemUpdateDTO.php
new file mode 100644
index 000000000..c71fc312e
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentInItemUpdateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentInItemUpdateDTO
+{
+    public function __construct(
+        public readonly int $assetId,
+        public readonly float $qty,
+        public readonly string $remarks,
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentOutItemCreateDTO.php b/api/app/DTOs/AssetAdjustmentOutItemCreateDTO.php
new file mode 100644
index 000000000..13a122f85
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentOutItemCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentOutItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $assetAdjustmentId,
+        public readonly int $assetId,
+        public readonly float $qty,
+        public readonly string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentOutItemSerialCreateDTO.php b/api/app/DTOs/AssetAdjustmentOutItemSerialCreateDTO.php
new file mode 100644
index 000000000..ae1d2ef38
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentOutItemSerialCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentOutItemSerialCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $assetAdjustmentId,
+        public readonly int $assetAdjustmentOutItemId,
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentOutItemSerialUpdateDTO.php b/api/app/DTOs/AssetAdjustmentOutItemSerialUpdateDTO.php
new file mode 100644
index 000000000..bca35e11b
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentOutItemSerialUpdateDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentOutItemSerialUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentOutItemUpdateDTO.php b/api/app/DTOs/AssetAdjustmentOutItemUpdateDTO.php
new file mode 100644
index 000000000..ab30d62af
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentOutItemUpdateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentOutItemUpdateDTO
+{
+    public function __construct(
+        public readonly int $assetId,
+        public readonly float $qty,
+        public readonly string $remarks,
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetAdjustmentUpdateDTO.php b/api/app/DTOs/AssetAdjustmentUpdateDTO.php
new file mode 100644
index 000000000..c7a47f6e1
--- /dev/null
+++ b/api/app/DTOs/AssetAdjustmentUpdateDTO.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetAdjustmentUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly string $remarks,
+        public readonly bool $isPosted,
+        /** @var int[] */
+        public readonly array $deleteInItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $inItems,
+        /** @var int[] */
+        public readonly array $deleteOutItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $outItems,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetCategoryCreateDTO.php b/api/app/DTOs/AssetCategoryCreateDTO.php
new file mode 100644
index 000000000..1cf4b915c
--- /dev/null
+++ b/api/app/DTOs/AssetCategoryCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetCategoryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $estimatedUsefulLifeMonths,
+        public readonly string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetCategoryUpdateDTO.php b/api/app/DTOs/AssetCategoryUpdateDTO.php
new file mode 100644
index 000000000..8bc10e1c2
--- /dev/null
+++ b/api/app/DTOs/AssetCategoryUpdateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetCategoryUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $estimatedUsefulLifeMonths,
+        public readonly string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetCreateDTO.php b/api/app/DTOs/AssetCreateDTO.php
new file mode 100644
index 000000000..577f98eae
--- /dev/null
+++ b/api/app/DTOs/AssetCreateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $assetCategoryId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $assetUnitId,
+        public readonly int $status,
+        public readonly string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetPurchaseCreateDTO.php b/api/app/DTOs/AssetPurchaseCreateDTO.php
new file mode 100644
index 000000000..c4f791a7c
--- /dev/null
+++ b/api/app/DTOs/AssetPurchaseCreateDTO.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetPurchaseCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly int $supplierId,
+        public readonly string $remarks,
+        public readonly bool $isPosted,
+        public readonly string $additionalCost,
+        public readonly string $rounding,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetPurchaseItemCreateDTO.php b/api/app/DTOs/AssetPurchaseItemCreateDTO.php
new file mode 100644
index 000000000..8ef9ea41e
--- /dev/null
+++ b/api/app/DTOs/AssetPurchaseItemCreateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetPurchaseItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $assetPurchaseId,
+        public readonly int $assetId,
+        public readonly string $qty,
+        public readonly string $unitPrice,
+        public readonly string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetPurchaseItemSerialCreateDTO.php b/api/app/DTOs/AssetPurchaseItemSerialCreateDTO.php
new file mode 100644
index 000000000..b818adac7
--- /dev/null
+++ b/api/app/DTOs/AssetPurchaseItemSerialCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetPurchaseItemSerialCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $assetPurchaseId,
+        public readonly int $assetPurchaseItemId,
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetPurchaseItemSerialUpdateDTO.php b/api/app/DTOs/AssetPurchaseItemSerialUpdateDTO.php
new file mode 100644
index 000000000..f8881a238
--- /dev/null
+++ b/api/app/DTOs/AssetPurchaseItemSerialUpdateDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetPurchaseItemSerialUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetPurchaseItemUpdateDTO.php b/api/app/DTOs/AssetPurchaseItemUpdateDTO.php
new file mode 100644
index 000000000..9d787c4ea
--- /dev/null
+++ b/api/app/DTOs/AssetPurchaseItemUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetPurchaseItemUpdateDTO
+{
+    public function __construct(
+        public readonly int $assetId,
+        public readonly string $qty,
+        public readonly string $unitPrice,
+        public readonly string $remarks,
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetPurchaseUpdateDTO.php b/api/app/DTOs/AssetPurchaseUpdateDTO.php
new file mode 100644
index 000000000..059f562b8
--- /dev/null
+++ b/api/app/DTOs/AssetPurchaseUpdateDTO.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetPurchaseUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly int $supplierId,
+        public readonly string $remarks,
+        public readonly bool $isPosted,
+        public readonly string $additionalCost,
+        public readonly string $rounding,
+        /** @var int[] */
+        public readonly array $deleteItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetSaleCreateDTO.php b/api/app/DTOs/AssetSaleCreateDTO.php
new file mode 100644
index 000000000..caa1273e3
--- /dev/null
+++ b/api/app/DTOs/AssetSaleCreateDTO.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetSaleCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly int $customerId,
+        public readonly string $remarks,
+        public readonly bool $isPosted,
+        public readonly string $rounding,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetSaleItemCreateDTO.php b/api/app/DTOs/AssetSaleItemCreateDTO.php
new file mode 100644
index 000000000..fbedbdb41
--- /dev/null
+++ b/api/app/DTOs/AssetSaleItemCreateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetSaleItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $assetSaleId,
+        public readonly int $assetId,
+        public readonly string $qty,
+        public readonly string $unitPrice,
+        public readonly string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetSaleItemSerialCreateDTO.php b/api/app/DTOs/AssetSaleItemSerialCreateDTO.php
new file mode 100644
index 000000000..90f89e3bf
--- /dev/null
+++ b/api/app/DTOs/AssetSaleItemSerialCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetSaleItemSerialCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $assetSaleId,
+        public readonly int $assetSaleItemId,
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetSaleItemSerialUpdateDTO.php b/api/app/DTOs/AssetSaleItemSerialUpdateDTO.php
new file mode 100644
index 000000000..53f0ff2cd
--- /dev/null
+++ b/api/app/DTOs/AssetSaleItemSerialUpdateDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetSaleItemSerialUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetSaleItemUpdateDTO.php b/api/app/DTOs/AssetSaleItemUpdateDTO.php
new file mode 100644
index 000000000..5132a6229
--- /dev/null
+++ b/api/app/DTOs/AssetSaleItemUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetSaleItemUpdateDTO
+{
+    public function __construct(
+        public readonly int $assetId,
+        public readonly string $qty,
+        public readonly string $unitPrice,
+        public readonly string $remarks,
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetSaleUpdateDTO.php b/api/app/DTOs/AssetSaleUpdateDTO.php
new file mode 100644
index 000000000..75325f5b2
--- /dev/null
+++ b/api/app/DTOs/AssetSaleUpdateDTO.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetSaleUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly int $customerId,
+        public readonly string $remarks,
+        public readonly bool $isPosted,
+        public readonly string $rounding,
+        /** @var int[] */
+        public readonly array $deleteItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetUnitCreateDTO.php b/api/app/DTOs/AssetUnitCreateDTO.php
new file mode 100644
index 000000000..221668bfd
--- /dev/null
+++ b/api/app/DTOs/AssetUnitCreateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetUnitCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly string $description,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetUnitUpdateDTO.php b/api/app/DTOs/AssetUnitUpdateDTO.php
new file mode 100644
index 000000000..de5b43f33
--- /dev/null
+++ b/api/app/DTOs/AssetUnitUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetUnitUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly string $description,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/AssetUpdateDTO.php b/api/app/DTOs/AssetUpdateDTO.php
new file mode 100644
index 000000000..4edfa1f58
--- /dev/null
+++ b/api/app/DTOs/AssetUpdateDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class AssetUpdateDTO
+{
+    public function __construct(
+        public readonly int $assetCategoryId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $assetUnitId,
+        public readonly int $status,
+        public readonly string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/BranchCreateDTO.php b/api/app/DTOs/BranchCreateDTO.php
new file mode 100644
index 000000000..3cc4827e3
--- /dev/null
+++ b/api/app/DTOs/BranchCreateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class BranchCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $address,
+        public readonly ?string $city,
+        public readonly ?string $contact,
+        public readonly bool $isMain,
+        public readonly ?string $remarks,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/BranchUpdateDTO.php b/api/app/DTOs/BranchUpdateDTO.php
new file mode 100644
index 000000000..6a7c6d720
--- /dev/null
+++ b/api/app/DTOs/BranchUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class BranchUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $address,
+        public readonly ?string $city,
+        public readonly ?string $contact,
+        public readonly bool $isMain,
+        public readonly ?string $remarks,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/BrandCreateDTO.php b/api/app/DTOs/BrandCreateDTO.php
new file mode 100644
index 000000000..c8c9cef37
--- /dev/null
+++ b/api/app/DTOs/BrandCreateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class BrandCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/BrandUpdateDTO.php b/api/app/DTOs/BrandUpdateDTO.php
new file mode 100644
index 000000000..4efd2ac3a
--- /dev/null
+++ b/api/app/DTOs/BrandUpdateDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class BrandUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CapitalOpeningCreateDTO.php b/api/app/DTOs/CapitalOpeningCreateDTO.php
new file mode 100644
index 000000000..74e34e0d4
--- /dev/null
+++ b/api/app/DTOs/CapitalOpeningCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class CapitalOpeningCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $investorId,
+        public readonly int $cashAccountId,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CapitalOpeningUpdateDTO.php b/api/app/DTOs/CapitalOpeningUpdateDTO.php
new file mode 100644
index 000000000..cb0573b7a
--- /dev/null
+++ b/api/app/DTOs/CapitalOpeningUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class CapitalOpeningUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $investorId,
+        public readonly int $cashAccountId,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CapitalTransactionCreateDTO.php b/api/app/DTOs/CapitalTransactionCreateDTO.php
new file mode 100644
index 000000000..3e1396159
--- /dev/null
+++ b/api/app/DTOs/CapitalTransactionCreateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class CapitalTransactionCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $investorId,
+        public readonly int $cashAccountId,
+        public readonly string $type,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CapitalTransactionUpdateDTO.php b/api/app/DTOs/CapitalTransactionUpdateDTO.php
new file mode 100644
index 000000000..2e4159743
--- /dev/null
+++ b/api/app/DTOs/CapitalTransactionUpdateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class CapitalTransactionUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $investorId,
+        public readonly int $cashAccountId,
+        public readonly string $type,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CashAccountCreateDTO.php b/api/app/DTOs/CashAccountCreateDTO.php
new file mode 100644
index 000000000..9bbf1d090
--- /dev/null
+++ b/api/app/DTOs/CashAccountCreateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class CashAccountCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly bool $isBank,
+        public readonly bool $isActive,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CashAccountUpdateDTO.php b/api/app/DTOs/CashAccountUpdateDTO.php
new file mode 100644
index 000000000..aa1b5bfc9
--- /dev/null
+++ b/api/app/DTOs/CashAccountUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class CashAccountUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly bool $isBank,
+        public readonly bool $isActive,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CashAccountWithRemainingBalanceDTO.php b/api/app/DTOs/CashAccountWithRemainingBalanceDTO.php
new file mode 100644
index 000000000..a57543936
--- /dev/null
+++ b/api/app/DTOs/CashAccountWithRemainingBalanceDTO.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\DTOs;
+
+final class CashAccountWithRemainingBalanceDTO
+{
+    public function __construct(
+        public readonly ?string $endDate,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CashTransactionCreateDTO.php b/api/app/DTOs/CashTransactionCreateDTO.php
new file mode 100644
index 000000000..107afbff7
--- /dev/null
+++ b/api/app/DTOs/CashTransactionCreateDTO.php
@@ -0,0 +1,259 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Enums\CapitalTransactionTypeEnum;
+use App\Models\CapitalOpening;
+use App\Models\CapitalTransaction;
+use App\Models\CashTransfer;
+use App\Models\Debt;
+use App\Models\DebtPayment;
+use App\Models\Expense;
+use App\Models\ExpensePayment;
+use App\Models\Income;
+use App\Models\IncomePayment;
+use App\Models\PrepaidExpense;
+use App\Models\PrepaidExpensePayment;
+use App\Models\PrepaidIncome;
+use App\Models\PrepaidIncomePayment;
+use App\Models\PurchaseAdditionalCost;
+use App\Models\PurchaseAdditionalCostPayment;
+use App\Models\PurchaseOrderDownPayment;
+use App\Models\PurchaseOrderDownPaymentRefund;
+use App\Models\Receivable;
+use App\Models\ReceivablePayment;
+
+final class CashTransactionCreateDTO
+{
+    public function __construct(
+        public readonly string $referableType,
+        public readonly int $referableId,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float $amount,
+    ) {
+    }
+
+    public static function fromCapitalOpening(CapitalOpening $capitalOpening): self
+    {
+        return new self(
+            referableType: CapitalOpening::class,
+            referableId: $capitalOpening->id,
+            date: $capitalOpening->date,
+            cashAccountId: $capitalOpening->cash_account_id,
+            amount: (float) $capitalOpening->amount,
+        );
+    }
+
+    public static function fromCapitalTransaction(CapitalTransaction $capitalTransaction): self
+    {
+        $type = $capitalTransaction->type instanceof CapitalTransactionTypeEnum ? $capitalTransaction->type : CapitalTransactionTypeEnum::resolveToEnum($capitalTransaction->type);
+        $amount = $type === CapitalTransactionTypeEnum::IN ? (float) $capitalTransaction->amount : ((float) $capitalTransaction->amount * -1);
+
+        return new self(
+            referableType: CapitalTransaction::class,
+            referableId: $capitalTransaction->id,
+            date: $capitalTransaction->date,
+            cashAccountId: $capitalTransaction->cash_account_id,
+            amount: $amount,
+        );
+    }
+
+    public static function fromExpense(Expense $expense): self
+    {
+        return new self(
+            referableType: Expense::class,
+            referableId: $expense->id,
+            date: $expense->date,
+            cashAccountId: $expense->paid_immediately_cash_account_id,
+            amount: ((float) $expense->amount_paid_immediately * -1),
+        );
+    }
+
+    public static function fromExpensePayment(ExpensePayment $expensePayment): self
+    {
+        return new self(
+            referableType: ExpensePayment::class,
+            referableId: $expensePayment->id,
+            date: $expensePayment->date,
+            cashAccountId: $expensePayment->cash_account_id,
+            amount: ((float) $expensePayment->amount * -1),
+        );
+    }
+
+    public static function fromPrepaidExpense(PrepaidExpense $prepaidExpense): self
+    {
+        return new self(
+            referableType: PrepaidExpense::class,
+            referableId: $prepaidExpense->id,
+            date: $prepaidExpense->date,
+            cashAccountId: $prepaidExpense->paid_immediately_cash_account_id,
+            amount: ((float) $prepaidExpense->amount_paid_immediately * -1),
+        );
+    }
+
+    public static function fromPrepaidExpensePayment(PrepaidExpensePayment $prepaidExpensePayment): self
+    {
+        return new self(
+            referableType: PrepaidExpensePayment::class,
+            referableId: $prepaidExpensePayment->id,
+            date: $prepaidExpensePayment->date,
+            cashAccountId: $prepaidExpensePayment->cash_account_id,
+            amount: ((float) $prepaidExpensePayment->amount * -1),
+        );
+    }
+
+    public static function fromIncome(Income $income): self
+    {
+        return new self(
+            referableType: Income::class,
+            referableId: $income->id,
+            date: $income->date,
+            cashAccountId: $income->paid_immediately_cash_account_id,
+            amount: (float) $income->amount_paid_immediately,
+        );
+    }
+
+    public static function fromIncomePayment(IncomePayment $incomePayment): self
+    {
+        return new self(
+            referableType: IncomePayment::class,
+            referableId: $incomePayment->id,
+            date: $incomePayment->date,
+            cashAccountId: $incomePayment->cash_account_id,
+            amount: (float) $incomePayment->amount,
+        );
+    }
+
+    public static function fromPrepaidIncome(PrepaidIncome $prepaidIncome): self
+    {
+        return new self(
+            referableType: PrepaidIncome::class,
+            referableId: $prepaidIncome->id,
+            date: $prepaidIncome->date,
+            cashAccountId: $prepaidIncome->paid_immediately_cash_account_id,
+            amount: (float) $prepaidIncome->amount_paid_immediately,
+        );
+    }
+
+    public static function fromPrepaidIncomePayment(PrepaidIncomePayment $prepaidIncomePayment): self
+    {
+        return new self(
+            referableType: PrepaidIncomePayment::class,
+            referableId: $prepaidIncomePayment->id,
+            date: $prepaidIncomePayment->date,
+            cashAccountId: $prepaidIncomePayment->cash_account_id,
+            amount: (float) $prepaidIncomePayment->amount,
+        );
+    }
+
+    public static function fromCashTransferSource(CashTransfer $cashTransfer): self
+    {
+        return new self(
+            referableType: CashTransfer::class,
+            referableId: $cashTransfer->id,
+            date: $cashTransfer->date,
+            cashAccountId: $cashTransfer->source_cash_account_id,
+            amount: ((float) $cashTransfer->amount * -1),
+        );
+    }
+
+    public static function fromCashTransferDestination(CashTransfer $cashTransfer): self
+    {
+        return new self(
+            referableType: CashTransfer::class,
+            referableId: $cashTransfer->id,
+            date: $cashTransfer->date,
+            cashAccountId: $cashTransfer->destination_cash_account_id,
+            amount: (float) $cashTransfer->amount,
+        );
+    }
+
+    public static function fromDebt(Debt $debt): self
+    {
+        return new self(
+            referableType: Debt::class,
+            referableId: $debt->id,
+            date: $debt->date,
+            cashAccountId: $debt->cash_account_id,
+            amount: (float) $debt->direct_amount_received,
+        );
+    }
+
+    public static function fromDebtPayment(DebtPayment $debtPayment): self
+    {
+        return new self(
+            referableType: DebtPayment::class,
+            referableId: $debtPayment->id,
+            date: $debtPayment->date,
+            cashAccountId: $debtPayment->cash_account_id,
+            amount: ((float) $debtPayment->amount * -1),
+        );
+    }
+
+    public static function fromReceivable(Receivable $receivable): self
+    {
+        return new self(
+            referableType: Receivable::class,
+            referableId: $receivable->id,
+            date: $receivable->date,
+            cashAccountId: $receivable->cash_account_id,
+            amount: (float) $receivable->direct_amount_received,
+        );
+    }
+
+    public static function fromReceivablePayment(ReceivablePayment $receivablePayment): self
+    {
+        return new self(
+            referableType: ReceivablePayment::class,
+            referableId: $receivablePayment->id,
+            date: $receivablePayment->date,
+            cashAccountId: $receivablePayment->cash_account_id,
+            amount: (float) $receivablePayment->amount,
+        );
+    }
+
+    public static function fromPurchaseOrderDownPayment(PurchaseOrderDownPayment $purchaseOrderDownPayment): self
+    {
+        return new self(
+            referableType: PurchaseOrderDownPayment::class,
+            referableId: $purchaseOrderDownPayment->id,
+            date: $purchaseOrderDownPayment->date,
+            cashAccountId: $purchaseOrderDownPayment->cash_account_id,
+            amount: (float) $purchaseOrderDownPayment->amount,
+        );
+    }
+
+    public static function fromPurchaseOrderDownPaymentRefund(PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund): self
+    {
+        return new self(
+            referableType: PurchaseOrderDownPaymentRefund::class,
+            referableId: $purchaseOrderDownPaymentRefund->id,
+            date: $purchaseOrderDownPaymentRefund->date,
+            cashAccountId: $purchaseOrderDownPaymentRefund->cash_account_id,
+            amount: (float) $purchaseOrderDownPaymentRefund->amount,
+        );
+    }
+
+    public static function fromPurchaseAdditionalCost(PurchaseAdditionalCost $purchaseAdditionalCost): self
+    {
+        return new self(
+            referableType: PurchaseAdditionalCost::class,
+            referableId: $purchaseAdditionalCost->id,
+            date: $purchaseAdditionalCost->date,
+            cashAccountId: $purchaseAdditionalCost->paid_immediately_cash_account_id,
+            amount: (float) $purchaseAdditionalCost->amount_paid_immediately,
+        );
+    }
+
+    public static function fromPurchaseAdditionalCostPayment(PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment): self
+    {
+        return new self(
+            referableType: PurchaseAdditionalCostPayment::class,
+            referableId: $purchaseAdditionalCostPayment->id,
+            date: $purchaseAdditionalCostPayment->date,
+            cashAccountId: $purchaseAdditionalCostPayment->cash_account_id,
+            amount: (float) $purchaseAdditionalCostPayment->amount,
+        );
+    }
+}
diff --git a/api/app/DTOs/CashTransactionUpdateDTO.php b/api/app/DTOs/CashTransactionUpdateDTO.php
new file mode 100644
index 000000000..ffdd9f28f
--- /dev/null
+++ b/api/app/DTOs/CashTransactionUpdateDTO.php
@@ -0,0 +1,259 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Enums\CapitalTransactionTypeEnum;
+use App\Models\CapitalOpening;
+use App\Models\CapitalTransaction;
+use App\Models\CashTransfer;
+use App\Models\Debt;
+use App\Models\DebtPayment;
+use App\Models\Expense;
+use App\Models\ExpensePayment;
+use App\Models\Income;
+use App\Models\IncomePayment;
+use App\Models\PrepaidExpense;
+use App\Models\PrepaidExpensePayment;
+use App\Models\PrepaidIncome;
+use App\Models\PrepaidIncomePayment;
+use App\Models\PurchaseAdditionalCost;
+use App\Models\PurchaseAdditionalCostPayment;
+use App\Models\PurchaseOrderDownPayment;
+use App\Models\PurchaseOrderDownPaymentRefund;
+use App\Models\Receivable;
+use App\Models\ReceivablePayment;
+
+final class CashTransactionUpdateDTO
+{
+    public function __construct(
+        public readonly string $referableType,
+        public readonly int $referableId,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float $amount,
+    ) {
+    }
+
+    public static function fromCapitalOpening(CapitalOpening $capitalOpening): self
+    {
+        return new self(
+            referableType: CapitalOpening::class,
+            referableId: $capitalOpening->id,
+            date: $capitalOpening->date,
+            cashAccountId: $capitalOpening->cash_account_id,
+            amount: (float) $capitalOpening->amount,
+        );
+    }
+
+    public static function fromCapitalTransaction(CapitalTransaction $capitalTransaction): self
+    {
+        $type = $capitalTransaction->type instanceof CapitalTransactionTypeEnum ? $capitalTransaction->type : CapitalTransactionTypeEnum::resolveToEnum($capitalTransaction->type);
+        $amount = $type === CapitalTransactionTypeEnum::IN ? (float) $capitalTransaction->amount : ((float) $capitalTransaction->amount * -1);
+
+        return new self(
+            referableType: CapitalTransaction::class,
+            referableId: $capitalTransaction->id,
+            date: $capitalTransaction->date,
+            cashAccountId: $capitalTransaction->cash_account_id,
+            amount: $amount,
+        );
+    }
+
+    public static function fromExpense(Expense $expense): self
+    {
+        return new self(
+            referableType: Expense::class,
+            referableId: $expense->id,
+            date: $expense->date,
+            cashAccountId: $expense->paid_immediately_cash_account_id,
+            amount: ((float) $expense->amount_paid_immediately * -1),
+        );
+    }
+
+    public static function fromExpensePayment(ExpensePayment $expensePayment): self
+    {
+        return new self(
+            referableType: ExpensePayment::class,
+            referableId: $expensePayment->id,
+            date: $expensePayment->date,
+            cashAccountId: $expensePayment->cash_account_id,
+            amount: ((float) $expensePayment->amount * -1),
+        );
+    }
+
+    public static function fromPrepaidExpense(PrepaidExpense $prepaidExpense): self
+    {
+        return new self(
+            referableType: PrepaidExpense::class,
+            referableId: $prepaidExpense->id,
+            date: $prepaidExpense->date,
+            cashAccountId: $prepaidExpense->paid_immediately_cash_account_id,
+            amount: ((float) $prepaidExpense->amount_paid_immediately * -1),
+        );
+    }
+
+    public static function fromPrepaidExpensePayment(PrepaidExpensePayment $prepaidExpensePayment): self
+    {
+        return new self(
+            referableType: PrepaidExpensePayment::class,
+            referableId: $prepaidExpensePayment->id,
+            date: $prepaidExpensePayment->date,
+            cashAccountId: $prepaidExpensePayment->cash_account_id,
+            amount: ((float) $prepaidExpensePayment->amount * -1),
+        );
+    }
+
+    public static function fromIncome(Income $income): self
+    {
+        return new self(
+            referableType: Income::class,
+            referableId: $income->id,
+            date: $income->date,
+            cashAccountId: $income->paid_immediately_cash_account_id,
+            amount: (float) $income->amount_paid_immediately,
+        );
+    }
+
+    public static function fromIncomePayment(IncomePayment $incomePayment): self
+    {
+        return new self(
+            referableType: IncomePayment::class,
+            referableId: $incomePayment->id,
+            date: $incomePayment->date,
+            cashAccountId: $incomePayment->cash_account_id,
+            amount: (float) $incomePayment->amount,
+        );
+    }
+
+    public static function fromPrepaidIncome(PrepaidIncome $prepaidIncome): self
+    {
+        return new self(
+            referableType: PrepaidIncome::class,
+            referableId: $prepaidIncome->id,
+            date: $prepaidIncome->date,
+            cashAccountId: $prepaidIncome->paid_immediately_cash_account_id,
+            amount: (float) $prepaidIncome->amount_paid_immediately,
+        );
+    }
+
+    public static function fromPrepaidIncomePayment(PrepaidIncomePayment $prepaidIncomePayment): self
+    {
+        return new self(
+            referableType: PrepaidIncomePayment::class,
+            referableId: $prepaidIncomePayment->id,
+            date: $prepaidIncomePayment->date,
+            cashAccountId: $prepaidIncomePayment->cash_account_id,
+            amount: (float) $prepaidIncomePayment->amount,
+        );
+    }
+
+    public static function fromCashTransferSource(CashTransfer $cashTransfer): self
+    {
+        return new self(
+            referableType: CashTransfer::class,
+            referableId: $cashTransfer->id,
+            date: $cashTransfer->date,
+            cashAccountId: $cashTransfer->source_cash_account_id,
+            amount: ((float) $cashTransfer->amount * -1),
+        );
+    }
+
+    public static function fromCashTransferDestination(CashTransfer $cashTransfer): self
+    {
+        return new self(
+            referableType: CashTransfer::class,
+            referableId: $cashTransfer->id,
+            date: $cashTransfer->date,
+            cashAccountId: $cashTransfer->destination_cash_account_id,
+            amount: (float) $cashTransfer->amount,
+        );
+    }
+
+    public static function fromDebt(Debt $debt): self
+    {
+        return new self(
+            referableType: Debt::class,
+            referableId: $debt->id,
+            date: $debt->date,
+            cashAccountId: $debt->cash_account_id,
+            amount: (float) $debt->direct_amount_received,
+        );
+    }
+
+    public static function fromDebtPayment(DebtPayment $debtPayment): self
+    {
+        return new self(
+            referableType: DebtPayment::class,
+            referableId: $debtPayment->id,
+            date: $debtPayment->date,
+            cashAccountId: $debtPayment->cash_account_id,
+            amount: ((float) $debtPayment->amount * -1),
+        );
+    }
+
+    public static function fromReceivable(Receivable $receivable): self
+    {
+        return new self(
+            referableType: Receivable::class,
+            referableId: $receivable->id,
+            date: $receivable->date,
+            cashAccountId: $receivable->cash_account_id,
+            amount: (float) $receivable->direct_amount_received,
+        );
+    }
+
+    public static function fromReceivablePayment(ReceivablePayment $receivablePayment): self
+    {
+        return new self(
+            referableType: ReceivablePayment::class,
+            referableId: $receivablePayment->id,
+            date: $receivablePayment->date,
+            cashAccountId: $receivablePayment->cash_account_id,
+            amount: (float) $receivablePayment->amount,
+        );
+    }
+
+    public static function fromPurchaseOrderDownPayment(PurchaseOrderDownPayment $purchaseOrderDownPayment): self
+    {
+        return new self(
+            referableType: PurchaseOrderDownPayment::class,
+            referableId: $purchaseOrderDownPayment->id,
+            date: $purchaseOrderDownPayment->date,
+            cashAccountId: $purchaseOrderDownPayment->cash_account_id,
+            amount: (float) $purchaseOrderDownPayment->amount,
+        );
+    }
+
+    public static function fromPurchaseOrderDownPaymentRefund(PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund): self
+    {
+        return new self(
+            referableType: PurchaseOrderDownPaymentRefund::class,
+            referableId: $purchaseOrderDownPaymentRefund->id,
+            date: $purchaseOrderDownPaymentRefund->date,
+            cashAccountId: $purchaseOrderDownPaymentRefund->cash_account_id,
+            amount: (float) $purchaseOrderDownPaymentRefund->amount,
+        );
+    }
+
+    public static function fromPurchaseAdditionalCost(PurchaseAdditionalCost $purchaseAdditionalCost): self
+    {
+        return new self(
+            referableType: PurchaseAdditionalCost::class,
+            referableId: $purchaseAdditionalCost->id,
+            date: $purchaseAdditionalCost->date,
+            cashAccountId: $purchaseAdditionalCost->paid_immediately_cash_account_id,
+            amount: (float) $purchaseAdditionalCost->amount_paid_immediately,
+        );
+    }
+
+    public static function fromPurchaseAdditionalCostPayment(PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment): self
+    {
+        return new self(
+            referableType: PurchaseAdditionalCostPayment::class,
+            referableId: $purchaseAdditionalCostPayment->id,
+            date: $purchaseAdditionalCostPayment->date,
+            cashAccountId: $purchaseAdditionalCostPayment->cash_account_id,
+            amount: (float) $purchaseAdditionalCostPayment->amount,
+        );
+    }
+}
diff --git a/api/app/DTOs/CashTransferCreateDTO.php b/api/app/DTOs/CashTransferCreateDTO.php
new file mode 100644
index 000000000..11e0785ac
--- /dev/null
+++ b/api/app/DTOs/CashTransferCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class CashTransferCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $sourceCashAccountId,
+        public readonly int $destinationCashAccountId,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CashTransferUpdateDTO.php b/api/app/DTOs/CashTransferUpdateDTO.php
new file mode 100644
index 000000000..e62c8f8cd
--- /dev/null
+++ b/api/app/DTOs/CashTransferUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class CashTransferUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $sourceCashAccountId,
+        public readonly int $destinationCashAccountId,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ChartOfAccountCreateDTO.php b/api/app/DTOs/ChartOfAccountCreateDTO.php
new file mode 100644
index 000000000..389f11b21
--- /dev/null
+++ b/api/app/DTOs/ChartOfAccountCreateDTO.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\DTOs;
+
+final class ChartOfAccountCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $scope,
+        public readonly ?string $systemKey,
+        public readonly ?int $parentId,
+        public readonly ?string $sourceType,
+        public readonly ?int $sourceId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly string $normalBalance,
+        public readonly bool $isGroup,
+        public readonly bool $isActive,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ChartOfAccountUpdateDTO.php b/api/app/DTOs/ChartOfAccountUpdateDTO.php
new file mode 100644
index 000000000..9b4042934
--- /dev/null
+++ b/api/app/DTOs/ChartOfAccountUpdateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class ChartOfAccountUpdateDTO
+{
+    public function __construct(
+        public readonly ?int $parentId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly string $normalBalance,
+        public readonly bool $isGroup,
+        public readonly bool $isActive,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CompanyCreateDTO.php b/api/app/DTOs/CompanyCreateDTO.php
new file mode 100644
index 000000000..7b74ad895
--- /dev/null
+++ b/api/app/DTOs/CompanyCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class CompanyCreateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $address,
+        public readonly bool $default,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CompanyUpdateDTO.php b/api/app/DTOs/CompanyUpdateDTO.php
new file mode 100644
index 000000000..d92a5d1dc
--- /dev/null
+++ b/api/app/DTOs/CompanyUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class CompanyUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $address,
+        public readonly bool $default,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CustomerAddressCreateDTO.php b/api/app/DTOs/CustomerAddressCreateDTO.php
new file mode 100644
index 000000000..9484fe244
--- /dev/null
+++ b/api/app/DTOs/CustomerAddressCreateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class CustomerAddressCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $customerId,
+        public readonly ?string $address,
+        public readonly ?string $city,
+        public readonly ?string $contact,
+        public readonly bool $isMain,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CustomerAddressUpdateDTO.php b/api/app/DTOs/CustomerAddressUpdateDTO.php
new file mode 100644
index 000000000..20cfcfedb
--- /dev/null
+++ b/api/app/DTOs/CustomerAddressUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class CustomerAddressUpdateDTO
+{
+    public function __construct(
+        public readonly ?string $address,
+        public readonly ?string $city,
+        public readonly ?string $contact,
+        public readonly bool $isMain,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CustomerCreateDTO.php b/api/app/DTOs/CustomerCreateDTO.php
new file mode 100644
index 000000000..a737fa100
--- /dev/null
+++ b/api/app/DTOs/CustomerCreateDTO.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\DTOs;
+
+final class CustomerCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly ?int $groupId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly mixed $paymentTermType,
+        public readonly int $paymentTerm,
+        public readonly bool $taxableEnterprise,
+        public readonly ?string $taxId,
+        public readonly bool $isMember,
+        public readonly int $maxOpenInvoice,
+        public readonly int $maxInvoiceAge,
+        public readonly int $maxOutstandingInvoice,
+        public readonly mixed $zone,
+        public readonly ?string $remarks,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CustomerGroupCreateDTO.php b/api/app/DTOs/CustomerGroupCreateDTO.php
new file mode 100644
index 000000000..80c143922
--- /dev/null
+++ b/api/app/DTOs/CustomerGroupCreateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+final class CustomerGroupCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly mixed $paymentTermType,
+        public readonly int $paymentTerm,
+        public readonly bool $sellAtCost,
+        public readonly string $sellingPoint,
+        public readonly string $sellingPointMultiple,
+        public readonly float|int $priceMarkupPercent,
+        public readonly float|int $priceMarkupNominal,
+        public readonly float|int $priceMarkdownPercent,
+        public readonly float|int $priceMarkdownNominal,
+        public readonly mixed $roundingType,
+        public readonly int $roundingDigit,
+        public readonly int $maxOpenInvoice,
+        public readonly int $maxInvoiceAge,
+        public readonly int $maxOutstandingInvoice,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CustomerGroupUpdateDTO.php b/api/app/DTOs/CustomerGroupUpdateDTO.php
new file mode 100644
index 000000000..13212704e
--- /dev/null
+++ b/api/app/DTOs/CustomerGroupUpdateDTO.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\DTOs;
+
+final class CustomerGroupUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly mixed $paymentTermType,
+        public readonly int $paymentTerm,
+        public readonly bool $sellAtCost,
+        public readonly string $sellingPoint,
+        public readonly string $sellingPointMultiple,
+        public readonly float|int $priceMarkupPercent,
+        public readonly float|int $priceMarkupNominal,
+        public readonly float|int $priceMarkdownPercent,
+        public readonly float|int $priceMarkdownNominal,
+        public readonly mixed $roundingType,
+        public readonly int $roundingDigit,
+        public readonly int $maxOpenInvoice,
+        public readonly int $maxInvoiceAge,
+        public readonly int $maxOutstandingInvoice,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/CustomerUpdateDTO.php b/api/app/DTOs/CustomerUpdateDTO.php
new file mode 100644
index 000000000..824ec1655
--- /dev/null
+++ b/api/app/DTOs/CustomerUpdateDTO.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\DTOs;
+
+final class CustomerUpdateDTO
+{
+    public function __construct(
+        public readonly ?int $groupId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly mixed $paymentTermType,
+        public readonly int $paymentTerm,
+        public readonly bool $taxableEnterprise,
+        public readonly ?string $taxId,
+        public readonly bool $isMember,
+        public readonly int $maxOpenInvoice,
+        public readonly int $maxInvoiceAge,
+        public readonly int $maxOutstandingInvoice,
+        public readonly mixed $zone,
+        public readonly ?string $remarks,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/DebtCategoryCreateDTO.php b/api/app/DTOs/DebtCategoryCreateDTO.php
new file mode 100644
index 000000000..09438ab7e
--- /dev/null
+++ b/api/app/DTOs/DebtCategoryCreateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class DebtCategoryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $sequence,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/DebtCategoryUpdateDTO.php b/api/app/DTOs/DebtCategoryUpdateDTO.php
new file mode 100644
index 000000000..466bc92ff
--- /dev/null
+++ b/api/app/DTOs/DebtCategoryUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class DebtCategoryUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $sequence,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/DebtCreateDTO.php b/api/app/DTOs/DebtCreateDTO.php
new file mode 100644
index 000000000..ec7b1f275
--- /dev/null
+++ b/api/app/DTOs/DebtCreateDTO.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\DTOs;
+
+final class DebtCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $categoryId,
+        public readonly ?int $creditorId,
+        public readonly ?int $supplierId,
+        public readonly ?int $cashAccountId,
+        public readonly float $directAmountReceived,
+        public readonly float $openingAmountDue,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/DebtCreditorCreateDTO.php b/api/app/DTOs/DebtCreditorCreateDTO.php
new file mode 100644
index 000000000..e5881658c
--- /dev/null
+++ b/api/app/DTOs/DebtCreditorCreateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class DebtCreditorCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/DebtCreditorUpdateDTO.php b/api/app/DTOs/DebtCreditorUpdateDTO.php
new file mode 100644
index 000000000..315a2011d
--- /dev/null
+++ b/api/app/DTOs/DebtCreditorUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class DebtCreditorUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/DebtPaymentCreateDTO.php b/api/app/DTOs/DebtPaymentCreateDTO.php
new file mode 100644
index 000000000..bd3f6eca3
--- /dev/null
+++ b/api/app/DTOs/DebtPaymentCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class DebtPaymentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $debtId,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/DebtPaymentUpdateDTO.php b/api/app/DTOs/DebtPaymentUpdateDTO.php
new file mode 100644
index 000000000..b316a8816
--- /dev/null
+++ b/api/app/DTOs/DebtPaymentUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class DebtPaymentUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/DebtUpdateDTO.php b/api/app/DTOs/DebtUpdateDTO.php
new file mode 100644
index 000000000..4bf1b506f
--- /dev/null
+++ b/api/app/DTOs/DebtUpdateDTO.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\DTOs;
+
+final class DebtUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $categoryId,
+        public readonly ?int $creditorId,
+        public readonly ?int $supplierId,
+        public readonly ?int $cashAccountId,
+        public readonly float $directAmountReceived,
+        public readonly float $openingAmountDue,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var int[] */
+        public readonly array $deletePaymentIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/EmployeeCreateDTO.php b/api/app/DTOs/EmployeeCreateDTO.php
new file mode 100644
index 000000000..8c982b6e8
--- /dev/null
+++ b/api/app/DTOs/EmployeeCreateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class EmployeeCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/EmployeeUpdateDTO.php b/api/app/DTOs/EmployeeUpdateDTO.php
new file mode 100644
index 000000000..e9cc9a09c
--- /dev/null
+++ b/api/app/DTOs/EmployeeUpdateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class EmployeeUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExecuteDTO.php b/api/app/DTOs/ExecuteDTO.php
new file mode 100644
index 000000000..8cdd4026b
--- /dev/null
+++ b/api/app/DTOs/ExecuteDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExecuteDTO
+{
+    public function __construct(
+        public readonly bool $useCache,
+        public readonly ?ExecutePaginationDTO $pagination,
+        public readonly ?ExecuteGetDTO $get,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExecuteGetDTO.php b/api/app/DTOs/ExecuteGetDTO.php
new file mode 100644
index 000000000..d8c6fd51b
--- /dev/null
+++ b/api/app/DTOs/ExecuteGetDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExecuteGetDTO
+{
+    public function __construct(
+        public readonly ?int $limit,
+        // public readonly int $offset, // for next
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExecutePaginationDTO.php b/api/app/DTOs/ExecutePaginationDTO.php
new file mode 100644
index 000000000..6b70e095a
--- /dev/null
+++ b/api/app/DTOs/ExecutePaginationDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExecutePaginationDTO
+{
+    public readonly int $page;
+
+    public readonly int $perPage;
+
+    public function __construct(?int $page, ?int $perPage)
+    {
+        $this->page = max(1, abs((int) ($page ?? 1)));
+        $this->perPage = max(1, abs((int) ($perPage ?? 10)));
+    }
+}
diff --git a/api/app/DTOs/ExpenseCategoryCreateDTO.php b/api/app/DTOs/ExpenseCategoryCreateDTO.php
new file mode 100644
index 000000000..a5be4b333
--- /dev/null
+++ b/api/app/DTOs/ExpenseCategoryCreateDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExpenseCategoryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly ?int $parentId,
+        public readonly ?string $categoryType,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $sequence,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExpenseCategoryUpdateDTO.php b/api/app/DTOs/ExpenseCategoryUpdateDTO.php
new file mode 100644
index 000000000..8a358e34d
--- /dev/null
+++ b/api/app/DTOs/ExpenseCategoryUpdateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExpenseCategoryUpdateDTO
+{
+    public function __construct(
+        public readonly ?string $categoryType,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $sequence,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExpenseCreateDTO.php b/api/app/DTOs/ExpenseCreateDTO.php
new file mode 100644
index 000000000..2f166952c
--- /dev/null
+++ b/api/app/DTOs/ExpenseCreateDTO.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExpenseCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $expenseCategoryId,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float $amountPaidImmediately,
+        public readonly float $amountPayable,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExpenseImageDTO.php b/api/app/DTOs/ExpenseImageDTO.php
new file mode 100644
index 000000000..7db63eca4
--- /dev/null
+++ b/api/app/DTOs/ExpenseImageDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExpenseImageDTO
+{
+    public function __construct(
+        public readonly string $hash,
+        public readonly bool $isMain,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExpensePaymentCreateDTO.php b/api/app/DTOs/ExpensePaymentCreateDTO.php
new file mode 100644
index 000000000..c223ac346
--- /dev/null
+++ b/api/app/DTOs/ExpensePaymentCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExpensePaymentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $expenseId,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExpensePaymentUpdateDTO.php b/api/app/DTOs/ExpensePaymentUpdateDTO.php
new file mode 100644
index 000000000..18042f2bf
--- /dev/null
+++ b/api/app/DTOs/ExpensePaymentUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExpensePaymentUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ExpenseUpdateDTO.php b/api/app/DTOs/ExpenseUpdateDTO.php
new file mode 100644
index 000000000..9a2daad99
--- /dev/null
+++ b/api/app/DTOs/ExpenseUpdateDTO.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\DTOs;
+
+final class ExpenseUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $expenseCategoryId,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float $amountPaidImmediately,
+        public readonly float $amountPayable,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var int[] */
+        public readonly array $deleteImageIds,
+        /** @var int[] */
+        public readonly array $deletePaymentIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/IncomeCategoryCreateDTO.php b/api/app/DTOs/IncomeCategoryCreateDTO.php
new file mode 100644
index 000000000..78e3f7e44
--- /dev/null
+++ b/api/app/DTOs/IncomeCategoryCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class IncomeCategoryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly ?int $parentId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $sequence,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/IncomeCategoryUpdateDTO.php b/api/app/DTOs/IncomeCategoryUpdateDTO.php
new file mode 100644
index 000000000..80067b7e6
--- /dev/null
+++ b/api/app/DTOs/IncomeCategoryUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class IncomeCategoryUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $sequence,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/IncomeCreateDTO.php b/api/app/DTOs/IncomeCreateDTO.php
new file mode 100644
index 000000000..199190393
--- /dev/null
+++ b/api/app/DTOs/IncomeCreateDTO.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\DTOs;
+
+final class IncomeCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $incomeCategoryId,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float $amountPaidImmediately,
+        public readonly float $amountReceivable,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/IncomeImageDTO.php b/api/app/DTOs/IncomeImageDTO.php
new file mode 100644
index 000000000..069a43eab
--- /dev/null
+++ b/api/app/DTOs/IncomeImageDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class IncomeImageDTO
+{
+    public function __construct(
+        public readonly string $hash,
+        public readonly bool $isMain,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/IncomePaymentCreateDTO.php b/api/app/DTOs/IncomePaymentCreateDTO.php
new file mode 100644
index 000000000..33ee8bf6f
--- /dev/null
+++ b/api/app/DTOs/IncomePaymentCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class IncomePaymentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $incomeId,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/IncomePaymentUpdateDTO.php b/api/app/DTOs/IncomePaymentUpdateDTO.php
new file mode 100644
index 000000000..4b2bc7731
--- /dev/null
+++ b/api/app/DTOs/IncomePaymentUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class IncomePaymentUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/IncomeUpdateDTO.php b/api/app/DTOs/IncomeUpdateDTO.php
new file mode 100644
index 000000000..83224e850
--- /dev/null
+++ b/api/app/DTOs/IncomeUpdateDTO.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\DTOs;
+
+final class IncomeUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $incomeCategoryId,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float $amountPaidImmediately,
+        public readonly float $amountReceivable,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var int[] */
+        public readonly array $deleteImageIds,
+        /** @var int[] */
+        public readonly array $deletePaymentIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/InvestorCreateDTO.php b/api/app/DTOs/InvestorCreateDTO.php
new file mode 100644
index 000000000..d9dd0ad1c
--- /dev/null
+++ b/api/app/DTOs/InvestorCreateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class InvestorCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/InvestorUpdateDTO.php b/api/app/DTOs/InvestorUpdateDTO.php
new file mode 100644
index 000000000..dcd6fdb33
--- /dev/null
+++ b/api/app/DTOs/InvestorUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class InvestorUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/JournalEntryCreateDTO.php b/api/app/DTOs/JournalEntryCreateDTO.php
new file mode 100644
index 000000000..bfd628e47
--- /dev/null
+++ b/api/app/DTOs/JournalEntryCreateDTO.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\DTOs;
+
+final class JournalEntryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly ?string $journalType,
+        public readonly ?string $sourceType,
+        public readonly ?int $sourceId,
+        public readonly ?string $referenceNo,
+        public readonly ?string $remarks,
+        /** @var JournalEntryItemDTO[] */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/JournalEntryItemDTO.php b/api/app/DTOs/JournalEntryItemDTO.php
new file mode 100644
index 000000000..8c3a16244
--- /dev/null
+++ b/api/app/DTOs/JournalEntryItemDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class JournalEntryItemDTO
+{
+    public function __construct(
+        public readonly ?int $chartOfAccountId,
+        public readonly int $sequence,
+        public readonly float $debit,
+        public readonly float $credit,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/JournalEntryUpdateDTO.php b/api/app/DTOs/JournalEntryUpdateDTO.php
new file mode 100644
index 000000000..ff4d0aa8f
--- /dev/null
+++ b/api/app/DTOs/JournalEntryUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class JournalEntryUpdateDTO
+{
+    public function __construct(
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly ?string $journalType,
+        public readonly ?string $referenceNo,
+        public readonly ?string $remarks,
+        /** @var JournalEntryItemDTO[] */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidExpenseCreateDTO.php b/api/app/DTOs/PrepaidExpenseCreateDTO.php
new file mode 100644
index 000000000..bcd3ade61
--- /dev/null
+++ b/api/app/DTOs/PrepaidExpenseCreateDTO.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidExpenseCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $expenseCategoryId,
+        public readonly int $estimatedUsefulLife,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float $amountPaidImmediately,
+        public readonly float $amountPayable,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidExpenseImageDTO.php b/api/app/DTOs/PrepaidExpenseImageDTO.php
new file mode 100644
index 000000000..5a79d6019
--- /dev/null
+++ b/api/app/DTOs/PrepaidExpenseImageDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidExpenseImageDTO
+{
+    public function __construct(
+        public readonly string $hash,
+        public readonly bool $isMain,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidExpensePaymentCreateDTO.php b/api/app/DTOs/PrepaidExpensePaymentCreateDTO.php
new file mode 100644
index 000000000..dfa472485
--- /dev/null
+++ b/api/app/DTOs/PrepaidExpensePaymentCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidExpensePaymentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $prepaidExpenseId,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidExpensePaymentUpdateDTO.php b/api/app/DTOs/PrepaidExpensePaymentUpdateDTO.php
new file mode 100644
index 000000000..c9931655c
--- /dev/null
+++ b/api/app/DTOs/PrepaidExpensePaymentUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidExpensePaymentUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidExpenseUpdateDTO.php b/api/app/DTOs/PrepaidExpenseUpdateDTO.php
new file mode 100644
index 000000000..1e52f8796
--- /dev/null
+++ b/api/app/DTOs/PrepaidExpenseUpdateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidExpenseUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $expenseCategoryId,
+        public readonly int $estimatedUsefulLife,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float $amountPaidImmediately,
+        public readonly float $amountPayable,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var int[] */
+        public readonly array $deleteImageIds,
+        /** @var int[] */
+        public readonly array $deletePaymentIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidIncomeCreateDTO.php b/api/app/DTOs/PrepaidIncomeCreateDTO.php
new file mode 100644
index 000000000..765a0a638
--- /dev/null
+++ b/api/app/DTOs/PrepaidIncomeCreateDTO.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidIncomeCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $incomeCategoryId,
+        public readonly int $estimatedUsefulLife,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float $amountPaidImmediately,
+        public readonly float $amountReceivable,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidIncomeImageDTO.php b/api/app/DTOs/PrepaidIncomeImageDTO.php
new file mode 100644
index 000000000..5c1588c47
--- /dev/null
+++ b/api/app/DTOs/PrepaidIncomeImageDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidIncomeImageDTO
+{
+    public function __construct(
+        public readonly string $hash,
+        public readonly bool $isMain,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidIncomePaymentCreateDTO.php b/api/app/DTOs/PrepaidIncomePaymentCreateDTO.php
new file mode 100644
index 000000000..67e3bfb17
--- /dev/null
+++ b/api/app/DTOs/PrepaidIncomePaymentCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidIncomePaymentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $prepaidIncomeId,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidIncomePaymentUpdateDTO.php b/api/app/DTOs/PrepaidIncomePaymentUpdateDTO.php
new file mode 100644
index 000000000..f1f903352
--- /dev/null
+++ b/api/app/DTOs/PrepaidIncomePaymentUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidIncomePaymentUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PrepaidIncomeUpdateDTO.php b/api/app/DTOs/PrepaidIncomeUpdateDTO.php
new file mode 100644
index 000000000..45b670bef
--- /dev/null
+++ b/api/app/DTOs/PrepaidIncomeUpdateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+final class PrepaidIncomeUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $incomeCategoryId,
+        public readonly int $estimatedUsefulLife,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float $amountPaidImmediately,
+        public readonly float $amountReceivable,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var int[] */
+        public readonly array $deleteImageIds,
+        /** @var int[] */
+        public readonly array $deletePaymentIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductCategoryCreateDTO.php b/api/app/DTOs/ProductCategoryCreateDTO.php
new file mode 100644
index 000000000..942b4e445
--- /dev/null
+++ b/api/app/DTOs/ProductCategoryCreateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductCategoryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly string $type,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductCategoryUpdateDTO.php b/api/app/DTOs/ProductCategoryUpdateDTO.php
new file mode 100644
index 000000000..8520d2de8
--- /dev/null
+++ b/api/app/DTOs/ProductCategoryUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductCategoryUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly string $type,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductImageDTO.php b/api/app/DTOs/ProductImageDTO.php
new file mode 100644
index 000000000..f382040d2
--- /dev/null
+++ b/api/app/DTOs/ProductImageDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductImageDTO
+{
+    public function __construct(
+        public readonly string $hash,
+        public readonly bool $isMain,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductPhysicalCreateDTO.php b/api/app/DTOs/ProductPhysicalCreateDTO.php
new file mode 100644
index 000000000..350a9cec6
--- /dev/null
+++ b/api/app/DTOs/ProductPhysicalCreateDTO.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductPhysicalCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly int $categoryId,
+        public readonly ?int $brandId,
+        public readonly ?int $defaultVatProfileId,
+        public readonly string $name,
+        public readonly bool $isPriceIncludeVat,
+        public readonly bool $isUseSerialNumber,
+        public readonly bool $isExpirable,
+        public readonly ?string $remarks,
+        public readonly int $type,
+        public readonly int $status,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $productUnits,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductPhysicalUpdateDTO.php b/api/app/DTOs/ProductPhysicalUpdateDTO.php
new file mode 100644
index 000000000..b3377598c
--- /dev/null
+++ b/api/app/DTOs/ProductPhysicalUpdateDTO.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductPhysicalUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly int $categoryId,
+        public readonly ?int $brandId,
+        public readonly ?int $defaultVatProfileId,
+        public readonly string $name,
+        public readonly bool $isPriceIncludeVat,
+        public readonly bool $isUseSerialNumber,
+        public readonly bool $isExpirable,
+        public readonly ?string $remarks,
+        public readonly int $type,
+        public readonly int $status,
+
+        /** @var int[] */
+        public readonly array $deleteProductUnitIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $productUnits,
+
+        /** @var int[] */
+        public readonly array $deleteImageIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductServiceCreateDTO.php b/api/app/DTOs/ProductServiceCreateDTO.php
new file mode 100644
index 000000000..e893f2379
--- /dev/null
+++ b/api/app/DTOs/ProductServiceCreateDTO.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductServiceCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly int $categoryId,
+        public readonly ?int $defaultVatProfileId,
+        public readonly string $name,
+        public readonly bool $isPriceIncludeVat,
+        public readonly ?string $remarks,
+        public readonly int $status,
+        public readonly int $unitId,
+        public readonly float $price,
+        public readonly int $point,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductServiceUpdateDTO.php b/api/app/DTOs/ProductServiceUpdateDTO.php
new file mode 100644
index 000000000..9a9d62ef1
--- /dev/null
+++ b/api/app/DTOs/ProductServiceUpdateDTO.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductServiceUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly int $categoryId,
+        public readonly ?int $defaultVatProfileId,
+        public readonly string $name,
+        public readonly bool $isPriceIncludeVat,
+        public readonly ?string $remarks,
+        public readonly int $status,
+        public readonly int $unitId,
+        public readonly float $price,
+        public readonly int $point,
+
+        /** @var int[] */
+        public readonly array $deleteImageIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $images,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductUnitCreateDTO.php b/api/app/DTOs/ProductUnitCreateDTO.php
new file mode 100644
index 000000000..461e51275
--- /dev/null
+++ b/api/app/DTOs/ProductUnitCreateDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductUnitCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $productId,
+        public readonly string $code,
+        public readonly bool $isManufacturerSku,
+        public readonly int $unitId,
+        public readonly bool $isBase,
+        public readonly float $conversionValue,
+        public readonly bool $isPrimaryUnit,
+        public readonly int $point,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductUnitCreatePhysicalDTO.php b/api/app/DTOs/ProductUnitCreatePhysicalDTO.php
new file mode 100644
index 000000000..71e2b337c
--- /dev/null
+++ b/api/app/DTOs/ProductUnitCreatePhysicalDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductUnitCreatePhysicalDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $productId,
+        public readonly string $code,
+        public readonly bool $isManufacturerSKU,
+        public readonly int $unitId,
+        public readonly float $price,
+        public readonly float $conversionValue,
+        public readonly bool $isPrimaryUnit,
+        public readonly int $point,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductUnitCreateServiceDTO.php b/api/app/DTOs/ProductUnitCreateServiceDTO.php
new file mode 100644
index 000000000..f1c0fc6c9
--- /dev/null
+++ b/api/app/DTOs/ProductUnitCreateServiceDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductUnitCreateServiceDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $productId,
+        public readonly ?string $remarks,
+        public readonly int $unitId,
+        public readonly float $price,
+        public readonly int $point,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductUnitUpdateDTO.php b/api/app/DTOs/ProductUnitUpdateDTO.php
new file mode 100644
index 000000000..9153d3181
--- /dev/null
+++ b/api/app/DTOs/ProductUnitUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductUnitUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly bool $isManufacturerSku,
+        public readonly int $unitId,
+        public readonly bool $isBase,
+        public readonly float $conversionValue,
+        public readonly bool $isPrimaryUnit,
+        public readonly int $point,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductUnitUpdatePhysicalDTO.php b/api/app/DTOs/ProductUnitUpdatePhysicalDTO.php
new file mode 100644
index 000000000..b9a19c4c1
--- /dev/null
+++ b/api/app/DTOs/ProductUnitUpdatePhysicalDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductUnitUpdatePhysicalDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly bool $isManufacturerSku,
+        public readonly int $unitId,
+        public readonly float $price,
+        public readonly float $conversionValue,
+        public readonly bool $isPrimaryUnit,
+        public readonly int $point,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductUnitUpdateServiceDTO.php b/api/app/DTOs/ProductUnitUpdateServiceDTO.php
new file mode 100644
index 000000000..284efaaa4
--- /dev/null
+++ b/api/app/DTOs/ProductUnitUpdateServiceDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductUnitUpdateServiceDTO
+{
+    public function __construct(
+        public readonly ?string $remarks,
+        public readonly int $unitId,
+        public readonly float $price,
+        public readonly int $point,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ProductWithRemainingStockDTO.php b/api/app/DTOs/ProductWithRemainingStockDTO.php
new file mode 100644
index 000000000..da6edba72
--- /dev/null
+++ b/api/app/DTOs/ProductWithRemainingStockDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class ProductWithRemainingStockDTO
+{
+    public function __construct(
+        public readonly ?string $endDate,
+        public readonly ?int $warehouseId,
+        public readonly ?string $stockFilter,
+        public readonly ?float $lessThan,
+        public readonly ?float $greaterThan,
+        public readonly ?bool $includeServiceProducts,
+        public readonly ?string $sortByRemainingStock,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseAdditionalCostCategoryCreateDTO.php b/api/app/DTOs/PurchaseAdditionalCostCategoryCreateDTO.php
new file mode 100644
index 000000000..804e8df81
--- /dev/null
+++ b/api/app/DTOs/PurchaseAdditionalCostCategoryCreateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseAdditionalCostCategoryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseAdditionalCostCategoryUpdateDTO.php b/api/app/DTOs/PurchaseAdditionalCostCategoryUpdateDTO.php
new file mode 100644
index 000000000..899b36306
--- /dev/null
+++ b/api/app/DTOs/PurchaseAdditionalCostCategoryUpdateDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseAdditionalCostCategoryUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseAdditionalCostCreateDTO.php b/api/app/DTOs/PurchaseAdditionalCostCreateDTO.php
new file mode 100644
index 000000000..a62f813b5
--- /dev/null
+++ b/api/app/DTOs/PurchaseAdditionalCostCreateDTO.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseAdditionalCostCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseId,
+        public readonly int $purchaseAdditionalCostCategoryId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float|int $amountPaidImmediately,
+        public readonly float|int $amountPayable,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseAdditionalCostPaymentCreateDTO.php b/api/app/DTOs/PurchaseAdditionalCostPaymentCreateDTO.php
new file mode 100644
index 000000000..8ccda4619
--- /dev/null
+++ b/api/app/DTOs/PurchaseAdditionalCostPaymentCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseAdditionalCostPaymentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $purchaseAdditionalCostId,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseAdditionalCostPaymentUpdateDTO.php b/api/app/DTOs/PurchaseAdditionalCostPaymentUpdateDTO.php
new file mode 100644
index 000000000..f4c017612
--- /dev/null
+++ b/api/app/DTOs/PurchaseAdditionalCostPaymentUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseAdditionalCostPaymentUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseAdditionalCostUpdateDTO.php b/api/app/DTOs/PurchaseAdditionalCostUpdateDTO.php
new file mode 100644
index 000000000..630f7d1d6
--- /dev/null
+++ b/api/app/DTOs/PurchaseAdditionalCostUpdateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseAdditionalCostUpdateDTO
+{
+    public function __construct(
+        public readonly int $purchaseId,
+        public readonly int $purchaseAdditionalCostCategoryId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly ?int $paidImmediatelyCashAccountId,
+        public readonly float|int $amountPaidImmediately,
+        public readonly float|int $amountPayable,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseDirectCreateDTO.php b/api/app/DTOs/PurchaseDirectCreateDTO.php
new file mode 100644
index 000000000..590ef5e3d
--- /dev/null
+++ b/api/app/DTOs/PurchaseDirectCreateDTO.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseDirectCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly int $supplierId,
+        public readonly ?int $purchaseOrderId,
+        public readonly string $directReceiptCode,
+        public readonly int $directReceiptWarehouseId,
+        public readonly ?string $taxInvoiceNumber,
+        public readonly float $taxInvoiceVatBase,
+        public readonly float $taxInvoiceVat,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+        public readonly float $rounding,
+
+        /** @var array<int, array<string, mixed>> */
+        public array $items,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $globalDiscounts,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $additionalCosts,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseDirectUpdateDTO.php b/api/app/DTOs/PurchaseDirectUpdateDTO.php
new file mode 100644
index 000000000..02b42db1e
--- /dev/null
+++ b/api/app/DTOs/PurchaseDirectUpdateDTO.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseDirectUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly int $supplierId,
+        public readonly ?int $purchaseOrderId,
+        public readonly int $directReceiptWarehouseId,
+        public readonly ?string $taxInvoiceNumber,
+        public readonly float $taxInvoiceVatBase,
+        public readonly float $taxInvoiceVat,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+        public readonly float $rounding,
+
+        /** @var int[] */
+        public readonly array $deleteItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public array $items,
+
+        /** @var int[] */
+        public readonly array $deleteGlobalDiscountIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $globalDiscounts,
+
+        /** @var int[] */
+        public readonly array $deleteAdditionalCostIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $additionalCosts,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseGlobalDiscountCreateDTO.php b/api/app/DTOs/PurchaseGlobalDiscountCreateDTO.php
new file mode 100644
index 000000000..df020b29a
--- /dev/null
+++ b/api/app/DTOs/PurchaseGlobalDiscountCreateDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseGlobalDiscountCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseId,
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseGlobalDiscountUpdateDTO.php b/api/app/DTOs/PurchaseGlobalDiscountUpdateDTO.php
new file mode 100644
index 000000000..5eaf056bc
--- /dev/null
+++ b/api/app/DTOs/PurchaseGlobalDiscountUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseGlobalDiscountUpdateDTO
+{
+    public function __construct(
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseItemCreateDTO.php b/api/app/DTOs/PurchaseItemCreateDTO.php
new file mode 100644
index 000000000..6f15e2037
--- /dev/null
+++ b/api/app/DTOs/PurchaseItemCreateDTO.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseId,
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly float $productUnitPrice,
+        public readonly bool $productUnitIsPriceIncludeVat,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $productUnitPriceDiscounts,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $subtotalDiscounts,
+        public readonly ?int $vatProfileId,
+        public readonly float $vatRate,
+        public readonly int $vatBaseNumerator,
+        public readonly int $vatBaseDenominator,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseItemProductUnitPriceDiscountCreateDTO.php b/api/app/DTOs/PurchaseItemProductUnitPriceDiscountCreateDTO.php
new file mode 100644
index 000000000..f8c6dbdd0
--- /dev/null
+++ b/api/app/DTOs/PurchaseItemProductUnitPriceDiscountCreateDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseItemProductUnitPriceDiscountCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseItemId,
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseItemProductUnitPriceDiscountUpdateDTO.php b/api/app/DTOs/PurchaseItemProductUnitPriceDiscountUpdateDTO.php
new file mode 100644
index 000000000..6b1e34c4b
--- /dev/null
+++ b/api/app/DTOs/PurchaseItemProductUnitPriceDiscountUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseItemProductUnitPriceDiscountUpdateDTO
+{
+    public function __construct(
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseItemSubtotalDiscountCreateDTO.php b/api/app/DTOs/PurchaseItemSubtotalDiscountCreateDTO.php
new file mode 100644
index 000000000..5e28b9bbd
--- /dev/null
+++ b/api/app/DTOs/PurchaseItemSubtotalDiscountCreateDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseItemSubtotalDiscountCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseItemId,
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseItemSubtotalDiscountUpdateDTO.php b/api/app/DTOs/PurchaseItemSubtotalDiscountUpdateDTO.php
new file mode 100644
index 000000000..b2198376b
--- /dev/null
+++ b/api/app/DTOs/PurchaseItemSubtotalDiscountUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseItemSubtotalDiscountUpdateDTO
+{
+    public function __construct(
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseItemUpdateDTO.php b/api/app/DTOs/PurchaseItemUpdateDTO.php
new file mode 100644
index 000000000..18341fd0d
--- /dev/null
+++ b/api/app/DTOs/PurchaseItemUpdateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseItemUpdateDTO
+{
+    public function __construct(
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly float $productUnitPrice,
+        public readonly bool $productUnitIsPriceIncludeVat,
+        /** @var int[] */
+        public readonly array $deleteProductUnitPriceDiscountIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $productUnitPriceDiscounts,
+        /** @var int[] */
+        public readonly array $deleteSubtotalDiscountIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $subtotalDiscounts,
+        public readonly ?int $vatProfileId,
+        public readonly float $vatRate,
+        public readonly int $vatBaseNumerator,
+        public readonly int $vatBaseDenominator,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseManualCreateDTO.php b/api/app/DTOs/PurchaseManualCreateDTO.php
new file mode 100644
index 000000000..cd88ba9f2
--- /dev/null
+++ b/api/app/DTOs/PurchaseManualCreateDTO.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseManualCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly int $supplierId,
+        public readonly ?int $purchaseOrderId,
+        public readonly ?string $taxInvoiceNumber,
+        public readonly float $taxInvoiceVatBase,
+        public readonly float $taxInvoiceVat,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+        public readonly float $rounding,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $globalDiscounts,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $additionalCosts,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseManualUpdateDTO.php b/api/app/DTOs/PurchaseManualUpdateDTO.php
new file mode 100644
index 000000000..42e96c588
--- /dev/null
+++ b/api/app/DTOs/PurchaseManualUpdateDTO.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseManualUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly int $supplierId,
+        public readonly ?int $purchaseOrderId,
+        public readonly ?string $taxInvoiceNumber,
+        public readonly float $taxInvoiceVatBase,
+        public readonly float $taxInvoiceVat,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+        public readonly float $rounding,
+
+        /** @var int[] */
+        public readonly array $deleteItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+
+        /** @var int[] */
+        public readonly array $deleteGlobalDiscountIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $globalDiscounts,
+        /** @var int[] */
+        public readonly array $deleteAdditionalCostIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $additionalCosts,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderCreateDTO.php b/api/app/DTOs/PurchaseOrderCreateDTO.php
new file mode 100644
index 000000000..84eda3764
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderCreateDTO.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly ?int $supplierId,
+        public readonly ?string $remarks,
+        public readonly float $rounding,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $globalDiscounts,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $downPayments,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $refundedDownPayments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderDownPaymentAllocationCreateDTO.php b/api/app/DTOs/PurchaseOrderDownPaymentAllocationCreateDTO.php
new file mode 100644
index 000000000..9b798c0b7
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderDownPaymentAllocationCreateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderDownPaymentAllocationCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseOrderDownPaymentId,
+        public readonly int $purchaseId,
+        public readonly string $date,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderDownPaymentAllocationUpdateDTO.php b/api/app/DTOs/PurchaseOrderDownPaymentAllocationUpdateDTO.php
new file mode 100644
index 000000000..ffb6733cb
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderDownPaymentAllocationUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderDownPaymentAllocationUpdateDTO
+{
+    public function __construct(
+        public readonly int $purchaseOrderDownPaymentId,
+        public readonly int $purchaseId,
+        public readonly string $date,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderDownPaymentCreateDTO.php b/api/app/DTOs/PurchaseOrderDownPaymentCreateDTO.php
new file mode 100644
index 000000000..d533ac56e
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderDownPaymentCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderDownPaymentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseOrderId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderDownPaymentRefundCreateDTO.php b/api/app/DTOs/PurchaseOrderDownPaymentRefundCreateDTO.php
new file mode 100644
index 000000000..56391ff07
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderDownPaymentRefundCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderDownPaymentRefundCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseOrderId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderDownPaymentRefundUpdateDTO.php b/api/app/DTOs/PurchaseOrderDownPaymentRefundUpdateDTO.php
new file mode 100644
index 000000000..46cde2e09
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderDownPaymentRefundUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderDownPaymentRefundUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderDownPaymentUpdateDTO.php b/api/app/DTOs/PurchaseOrderDownPaymentUpdateDTO.php
new file mode 100644
index 000000000..c7032fcf1
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderDownPaymentUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderDownPaymentUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderGlobalDiscountCreateDTO.php b/api/app/DTOs/PurchaseOrderGlobalDiscountCreateDTO.php
new file mode 100644
index 000000000..4f0806bb7
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderGlobalDiscountCreateDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderGlobalDiscountCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseOrderId,
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderGlobalDiscountUpdateDTO.php b/api/app/DTOs/PurchaseOrderGlobalDiscountUpdateDTO.php
new file mode 100644
index 000000000..77e004757
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderGlobalDiscountUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderGlobalDiscountUpdateDTO
+{
+    public function __construct(
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderItemCreateDTO.php b/api/app/DTOs/PurchaseOrderItemCreateDTO.php
new file mode 100644
index 000000000..2aefa6e05
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderItemCreateDTO.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseOrderId,
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly float $productUnitPrice,
+        public readonly bool $productUnitIsPriceIncludeVat,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $productUnitPriceDiscounts,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $subtotalDiscounts,
+        public readonly ?int $vatProfileId,
+        public readonly float $vatRate,
+        public readonly int $vatBaseNumerator,
+        public readonly int $vatBaseDenominator,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderItemProductUnitPriceDiscountCreateDTO.php b/api/app/DTOs/PurchaseOrderItemProductUnitPriceDiscountCreateDTO.php
new file mode 100644
index 000000000..57c3cfd9a
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderItemProductUnitPriceDiscountCreateDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderItemProductUnitPriceDiscountCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseOrderItemId,
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderItemProductUnitPriceDiscountUpdateDTO.php b/api/app/DTOs/PurchaseOrderItemProductUnitPriceDiscountUpdateDTO.php
new file mode 100644
index 000000000..a51327d15
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderItemProductUnitPriceDiscountUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderItemProductUnitPriceDiscountUpdateDTO
+{
+    public function __construct(
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderItemSubtotalDiscountCreateDTO.php b/api/app/DTOs/PurchaseOrderItemSubtotalDiscountCreateDTO.php
new file mode 100644
index 000000000..1ab755e9a
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderItemSubtotalDiscountCreateDTO.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderItemSubtotalDiscountCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseOrderItemId,
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderItemSubtotalDiscountUpdateDTO.php b/api/app/DTOs/PurchaseOrderItemSubtotalDiscountUpdateDTO.php
new file mode 100644
index 000000000..e52a98d7f
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderItemSubtotalDiscountUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderItemSubtotalDiscountUpdateDTO
+{
+    public function __construct(
+        public readonly int $sequence,
+        public readonly string $discountType,
+        public readonly float $discountValue,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderItemUpdateDTO.php b/api/app/DTOs/PurchaseOrderItemUpdateDTO.php
new file mode 100644
index 000000000..fa506ceba
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderItemUpdateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderItemUpdateDTO
+{
+    public function __construct(
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly float $productUnitPrice,
+        public readonly bool $productUnitIsPriceIncludeVat,
+        /** @var int[] */
+        public readonly array $deleteProductUnitPriceDiscountIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $productUnitPriceDiscounts,
+        /** @var int[] */
+        public readonly array $deleteSubtotalDiscountIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $subtotalDiscounts,
+        public readonly ?int $vatProfileId,
+        public readonly float $vatRate,
+        public readonly int $vatBaseNumerator,
+        public readonly int $vatBaseDenominator,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseOrderUpdateDTO.php b/api/app/DTOs/PurchaseOrderUpdateDTO.php
new file mode 100644
index 000000000..9f4aeb1ce
--- /dev/null
+++ b/api/app/DTOs/PurchaseOrderUpdateDTO.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseOrderUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $dueDays,
+        public readonly ?int $supplierId,
+        public readonly ?string $remarks,
+        public readonly float $rounding,
+
+        /** @var int[] */
+        public readonly array $deleteGlobalDiscountIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $globalDiscounts,
+
+        /** @var int[] */
+        public readonly array $deleteItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+
+        /** @var int[] */
+        public readonly array $deleteDownPaymentIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $downPayments,
+
+        /** @var int[] */
+        public readonly array $deleteRefundedDownPaymentIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $refundedDownPayments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseReceiptCreateDTO.php b/api/app/DTOs/PurchaseReceiptCreateDTO.php
new file mode 100644
index 000000000..402ba2e87
--- /dev/null
+++ b/api/app/DTOs/PurchaseReceiptCreateDTO.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseReceiptCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $supplierId,
+        public readonly ?int $purchaseId,
+        public readonly bool $isFromDirectPurchase,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $warehouseId,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseReceiptDirectItemCreateDTO.php b/api/app/DTOs/PurchaseReceiptDirectItemCreateDTO.php
new file mode 100644
index 000000000..cbcc124ea
--- /dev/null
+++ b/api/app/DTOs/PurchaseReceiptDirectItemCreateDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseReceiptDirectItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseReceiptId,
+        public readonly int $purchaseItemId,
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly ?string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseReceiptDirectItemUpdateDTO.php b/api/app/DTOs/PurchaseReceiptDirectItemUpdateDTO.php
new file mode 100644
index 000000000..f5c5fae0c
--- /dev/null
+++ b/api/app/DTOs/PurchaseReceiptDirectItemUpdateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseReceiptDirectItemUpdateDTO
+{
+    public function __construct(
+        public readonly int $purchaseItemId,
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly ?string $remarks,
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseReceiptItemSerialCreateDTO.php b/api/app/DTOs/PurchaseReceiptItemSerialCreateDTO.php
new file mode 100644
index 000000000..20db4b9af
--- /dev/null
+++ b/api/app/DTOs/PurchaseReceiptItemSerialCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseReceiptItemSerialCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseReceiptId,
+        public readonly int $purchaseReceiptItemId,
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseReceiptItemSerialUpdateDTO.php b/api/app/DTOs/PurchaseReceiptItemSerialUpdateDTO.php
new file mode 100644
index 000000000..bb4563e51
--- /dev/null
+++ b/api/app/DTOs/PurchaseReceiptItemSerialUpdateDTO.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseReceiptItemSerialUpdateDTO
+{
+    public function __construct(
+        public readonly string $serial,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseReceiptManualItemCreateDTO.php b/api/app/DTOs/PurchaseReceiptManualItemCreateDTO.php
new file mode 100644
index 000000000..69cc2a455
--- /dev/null
+++ b/api/app/DTOs/PurchaseReceiptManualItemCreateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseReceiptManualItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $purchaseReceiptId,
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly ?string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseReceiptManualItemUpdateDTO.php b/api/app/DTOs/PurchaseReceiptManualItemUpdateDTO.php
new file mode 100644
index 000000000..7e85da467
--- /dev/null
+++ b/api/app/DTOs/PurchaseReceiptManualItemUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseReceiptManualItemUpdateDTO
+{
+    public function __construct(
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly ?string $remarks,
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/PurchaseReceiptUpdateDTO.php b/api/app/DTOs/PurchaseReceiptUpdateDTO.php
new file mode 100644
index 000000000..b69873f2f
--- /dev/null
+++ b/api/app/DTOs/PurchaseReceiptUpdateDTO.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\DTOs;
+
+final class PurchaseReceiptUpdateDTO
+{
+    public function __construct(
+        public readonly int $supplierId,
+        public readonly ?int $purchaseId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly bool $isFromDirectPurchase,
+        public readonly int $warehouseId,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+
+        /** @var int[] */
+        public readonly array $deleteItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ReceivableCategoryCreateDTO.php b/api/app/DTOs/ReceivableCategoryCreateDTO.php
new file mode 100644
index 000000000..3658a4e7c
--- /dev/null
+++ b/api/app/DTOs/ReceivableCategoryCreateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class ReceivableCategoryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $sequence,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ReceivableCategoryUpdateDTO.php b/api/app/DTOs/ReceivableCategoryUpdateDTO.php
new file mode 100644
index 000000000..372879206
--- /dev/null
+++ b/api/app/DTOs/ReceivableCategoryUpdateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class ReceivableCategoryUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly int $sequence,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ReceivableCreateDTO.php b/api/app/DTOs/ReceivableCreateDTO.php
new file mode 100644
index 000000000..a6d6f5186
--- /dev/null
+++ b/api/app/DTOs/ReceivableCreateDTO.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\DTOs;
+
+final class ReceivableCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $categoryId,
+        public readonly int $customerId,
+        public readonly ?int $cashAccountId,
+        public readonly float $directAmountReceived,
+        public readonly float $openingAmountDue,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ReceivablePaymentCreateDTO.php b/api/app/DTOs/ReceivablePaymentCreateDTO.php
new file mode 100644
index 000000000..3e145a84e
--- /dev/null
+++ b/api/app/DTOs/ReceivablePaymentCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class ReceivablePaymentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $receivableId,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ReceivablePaymentUpdateDTO.php b/api/app/DTOs/ReceivablePaymentUpdateDTO.php
new file mode 100644
index 000000000..06eb827b7
--- /dev/null
+++ b/api/app/DTOs/ReceivablePaymentUpdateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class ReceivablePaymentUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $cashAccountId,
+        public readonly float|int $amount,
+        public readonly ?string $remarks,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/ReceivableUpdateDTO.php b/api/app/DTOs/ReceivableUpdateDTO.php
new file mode 100644
index 000000000..cdc78e968
--- /dev/null
+++ b/api/app/DTOs/ReceivableUpdateDTO.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\DTOs;
+
+final class ReceivableUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $categoryId,
+        public readonly int $customerId,
+        public readonly ?int $cashAccountId,
+        public readonly float $directAmountReceived,
+        public readonly float $openingAmountDue,
+        public readonly int $dueDays,
+        public readonly ?string $remarks,
+
+        /** @var int[] */
+        public readonly array $deletePaymentIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $payments,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentCategoryCreateDTO.php b/api/app/DTOs/StockAdjustmentCategoryCreateDTO.php
new file mode 100644
index 000000000..b5404d5ec
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentCategoryCreateDTO.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockAdjustmentCategoryCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentCategoryUpdateDTO.php b/api/app/DTOs/StockAdjustmentCategoryUpdateDTO.php
new file mode 100644
index 000000000..c46d4a53f
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentCategoryUpdateDTO.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockAdjustmentCategoryUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentCreateDTO.php b/api/app/DTOs/StockAdjustmentCreateDTO.php
new file mode 100644
index 000000000..ceec34f0a
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentCreateDTO.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockAdjustmentCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $categoryId,
+        public readonly ?int $inWarehouseId,
+        public readonly ?int $outWarehouseId,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $inItems,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $outItems,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentInItemCreateDTO.php b/api/app/DTOs/StockAdjustmentInItemCreateDTO.php
new file mode 100644
index 000000000..7af56ddc8
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentInItemCreateDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockAdjustmentInItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $stockAdjustmentId,
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly float $productUnitCogs,
+        public readonly ?string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentInItemSerialCreateDTO.php b/api/app/DTOs/StockAdjustmentInItemSerialCreateDTO.php
new file mode 100644
index 000000000..99b619e18
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentInItemSerialCreateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\StockAdjustmentInItem;
+
+final class StockAdjustmentInItemSerialCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $stockAdjustmentId,
+        public readonly int $stockAdjustmentInItemId,
+        public readonly string $serial,
+    ) {
+    }
+
+    public static function fromStockAdjustmentInItem(StockAdjustmentInItem $stockAdjustmentInItem, string $serial): self
+    {
+        return new self(
+            companyId: $stockAdjustmentInItem->company_id,
+            branchId: $stockAdjustmentInItem->branch_id,
+            stockAdjustmentId: $stockAdjustmentInItem->stock_adjustment_id,
+            stockAdjustmentInItemId: $stockAdjustmentInItem->id,
+            serial: $serial,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentInItemSerialUpdateDTO.php b/api/app/DTOs/StockAdjustmentInItemSerialUpdateDTO.php
new file mode 100644
index 000000000..ff35c77d7
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentInItemSerialUpdateDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\StockAdjustmentInItemSerial;
+
+final class StockAdjustmentInItemSerialUpdateDTO
+{
+    public function __construct(
+        public readonly string $serial,
+    ) {
+    }
+
+    public static function fromStockAdjustmentInItemSerial(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial, string $serial): self
+    {
+        return new self(
+            serial: $serial,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentInItemUpdateDTO.php b/api/app/DTOs/StockAdjustmentInItemUpdateDTO.php
new file mode 100644
index 000000000..e9b772f87
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentInItemUpdateDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockAdjustmentInItemUpdateDTO
+{
+    public function __construct(
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly float $productUnitCogs,
+        public readonly ?string $remarks,
+
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentOutItemCreateDTO.php b/api/app/DTOs/StockAdjustmentOutItemCreateDTO.php
new file mode 100644
index 000000000..a817322a5
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentOutItemCreateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockAdjustmentOutItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $stockAdjustmentId,
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly ?string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentOutItemSerialCreateDTO.php b/api/app/DTOs/StockAdjustmentOutItemSerialCreateDTO.php
new file mode 100644
index 000000000..1d9cbed6c
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentOutItemSerialCreateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\StockAdjustmentOutItem;
+
+final class StockAdjustmentOutItemSerialCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $stockAdjustmentId,
+        public readonly int $stockAdjustmentOutItemId,
+        public readonly string $serial,
+    ) {
+    }
+
+    public static function fromStockAdjustmentOutItem(StockAdjustmentOutItem $stockAdjustmentOutItem, string $serial): self
+    {
+        return new self(
+            companyId: $stockAdjustmentOutItem->company_id,
+            branchId: $stockAdjustmentOutItem->branch_id,
+            stockAdjustmentId: $stockAdjustmentOutItem->stock_adjustment_id,
+            stockAdjustmentOutItemId: $stockAdjustmentOutItem->id,
+            serial: $serial,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentOutItemSerialUpdateDTO.php b/api/app/DTOs/StockAdjustmentOutItemSerialUpdateDTO.php
new file mode 100644
index 000000000..2e3f4a40b
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentOutItemSerialUpdateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\StockAdjustmentOutItemSerial;
+
+final class StockAdjustmentOutItemSerialUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $stockAdjustmentId,
+        public readonly int $stockAdjustmentOutItemId,
+        public readonly string $serial,
+    ) {
+    }
+
+    public static function fromStockAdjustmentOutItemSerial(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial, string $serial): self
+    {
+        return new self(
+            companyId: $stockAdjustmentOutItemSerial->company_id,
+            branchId: $stockAdjustmentOutItemSerial->branch_id,
+            stockAdjustmentId: $stockAdjustmentOutItemSerial->stock_adjustment_id,
+            stockAdjustmentOutItemId: $stockAdjustmentOutItemSerial->stock_adjustment_out_item_id,
+            serial: $serial,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentOutItemUpdateDTO.php b/api/app/DTOs/StockAdjustmentOutItemUpdateDTO.php
new file mode 100644
index 000000000..d2b79d607
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentOutItemUpdateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockAdjustmentOutItemUpdateDTO
+{
+    public function __construct(
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly ?string $remarks,
+
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockAdjustmentUpdateDTO.php b/api/app/DTOs/StockAdjustmentUpdateDTO.php
new file mode 100644
index 000000000..3aa67361a
--- /dev/null
+++ b/api/app/DTOs/StockAdjustmentUpdateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockAdjustmentUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $categoryId,
+        public readonly ?int $inWarehouseId,
+        public readonly ?int $outWarehouseId,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+
+        /** @var int[] */
+        public readonly array $deleteInItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $inItems,
+        /** @var int[] */
+        public readonly array $deleteOutItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $outItems,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockSerialTransactionCreateDTO.php b/api/app/DTOs/StockSerialTransactionCreateDTO.php
new file mode 100644
index 000000000..96ae576a5
--- /dev/null
+++ b/api/app/DTOs/StockSerialTransactionCreateDTO.php
@@ -0,0 +1,87 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\PurchaseReceiptItemSerial;
+use App\Models\StockAdjustmentInItemSerial;
+use App\Models\StockAdjustmentOutItemSerial;
+use App\Models\StockTransferItemSerial;
+
+final class StockSerialTransactionCreateDTO
+{
+    public function __construct(
+        public readonly string $referableType,
+        public readonly int $referableId,
+        public readonly string $date,
+        public readonly int $warehouseId,
+        public readonly int $productId,
+        public readonly int $direction,
+        public readonly string $serial,
+    ) {
+    }
+
+    public static function fromStockAdjustmentInItemSerial(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: StockAdjustmentInItemSerial::class,
+            referableId: $stockAdjustmentInItemSerial->id,
+            date: $stockAdjustmentInItemSerial->stockAdjustmentInItem->stockAdjustment->date,
+            warehouseId: $stockAdjustmentInItemSerial->stockAdjustmentInItem->stockAdjustment->in_warehouse_id,
+            productId: $stockAdjustmentInItemSerial->stockAdjustmentInItem->productUnit->product_id,
+            direction: 1,
+            serial: $serial,
+        );
+    }
+
+    public static function fromStockAdjustmentOutItemSerial(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: StockAdjustmentOutItemSerial::class,
+            referableId: $stockAdjustmentOutItemSerial->id,
+            date: $stockAdjustmentOutItemSerial->stockAdjustmentOutItem->stockAdjustment->date,
+            warehouseId: $stockAdjustmentOutItemSerial->stockAdjustmentOutItem->stockAdjustment->out_warehouse_id,
+            productId: $stockAdjustmentOutItemSerial->stockAdjustmentOutItem->productUnit->product_id,
+            direction: -1,
+            serial: $serial,
+        );
+    }
+
+    public static function fromPurchaseReceiptItemSerial(PurchaseReceiptItemSerial $purchaseReceiptItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: PurchaseReceiptItemSerial::class,
+            referableId: $purchaseReceiptItemSerial->id,
+            date: $purchaseReceiptItemSerial->purchaseReceipt->date,
+            warehouseId: $purchaseReceiptItemSerial->purchaseReceipt->warehouse_id,
+            productId: $purchaseReceiptItemSerial->purchaseReceiptItem->productUnit->product_id,
+            direction: 1,
+            serial: $serial,
+        );
+    }
+
+    public static function fromStockTransferItemSerialSource(StockTransferItemSerial $stockTransferItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: StockTransferItemSerial::class,
+            referableId: $stockTransferItemSerial->id,
+            date: $stockTransferItemSerial->stockTransferItem->stockTransfer->date,
+            warehouseId: $stockTransferItemSerial->stockTransferItem->stockTransfer->source_warehouse_id,
+            productId: $stockTransferItemSerial->stockTransferItem->productUnit->product_id,
+            direction: -1,
+            serial: $serial,
+        );
+    }
+
+    public static function fromStockTransferItemSerialDestination(StockTransferItemSerial $stockTransferItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: StockTransferItemSerial::class,
+            referableId: $stockTransferItemSerial->id,
+            date: $stockTransferItemSerial->stockTransferItem->stockTransfer->date,
+            warehouseId: $stockTransferItemSerial->stockTransferItem->stockTransfer->destination_warehouse_id,
+            productId: $stockTransferItemSerial->stockTransferItem->productUnit->product_id,
+            direction: 1,
+            serial: $serial,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockSerialTransactionUpdateDTO.php b/api/app/DTOs/StockSerialTransactionUpdateDTO.php
new file mode 100644
index 000000000..9c7229334
--- /dev/null
+++ b/api/app/DTOs/StockSerialTransactionUpdateDTO.php
@@ -0,0 +1,87 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\PurchaseReceiptItemSerial;
+use App\Models\StockAdjustmentInItemSerial;
+use App\Models\StockAdjustmentOutItemSerial;
+use App\Models\StockTransferItemSerial;
+
+final class StockSerialTransactionUpdateDTO
+{
+    public function __construct(
+        public readonly string $referableType,
+        public readonly int $referableId,
+        public readonly string $date,
+        public readonly int $warehouseId,
+        public readonly int $productId,
+        public readonly int $direction,
+        public readonly string $serial,
+    ) {
+    }
+
+    public static function fromStockAdjustmentInItemSerial(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: StockAdjustmentInItemSerial::class,
+            referableId: $stockAdjustmentInItemSerial->id,
+            date: $stockAdjustmentInItemSerial->stockAdjustmentInItem->stockAdjustment->date,
+            warehouseId: $stockAdjustmentInItemSerial->stockAdjustmentInItem->stockAdjustment->in_warehouse_id,
+            productId: $stockAdjustmentInItemSerial->stockAdjustmentInItem->productUnit->product_id,
+            direction: 1,
+            serial: $serial,
+        );
+    }
+
+    public static function fromStockAdjustmentOutItemSerial(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: StockAdjustmentOutItemSerial::class,
+            referableId: $stockAdjustmentOutItemSerial->id,
+            date: $stockAdjustmentOutItemSerial->stockAdjustmentOutItem->stockAdjustment->date,
+            warehouseId: $stockAdjustmentOutItemSerial->stockAdjustmentOutItem->stockAdjustment->out_warehouse_id,
+            productId: $stockAdjustmentOutItemSerial->stockAdjustmentOutItem->productUnit->product_id,
+            direction: -1,
+            serial: $serial,
+        );
+    }
+
+    public static function fromPurchaseReceiptItemSerial(PurchaseReceiptItemSerial $purchaseReceiptItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: PurchaseReceiptItemSerial::class,
+            referableId: $purchaseReceiptItemSerial->id,
+            date: $purchaseReceiptItemSerial->purchaseReceipt->date,
+            warehouseId: $purchaseReceiptItemSerial->purchaseReceipt->warehouse_id,
+            productId: $purchaseReceiptItemSerial->purchaseReceiptItem->productUnit->product_id,
+            direction: 1,
+            serial: $serial,
+        );
+    }
+
+    public static function fromStockTransferItemSerialSource(StockTransferItemSerial $stockTransferItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: StockTransferItemSerial::class,
+            referableId: $stockTransferItemSerial->id,
+            date: $stockTransferItemSerial->stockTransferItem->stockTransfer->date,
+            warehouseId: $stockTransferItemSerial->stockTransferItem->stockTransfer->source_warehouse_id,
+            productId: $stockTransferItemSerial->stockTransferItem->productUnit->product_id,
+            direction: -1,
+            serial: $serial,
+        );
+    }
+
+    public static function fromStockTransferItemSerialDestination(StockTransferItemSerial $stockTransferItemSerial, string $serial): self
+    {
+        return new self(
+            referableType: StockTransferItemSerial::class,
+            referableId: $stockTransferItemSerial->id,
+            date: $stockTransferItemSerial->stockTransferItem->stockTransfer->date,
+            warehouseId: $stockTransferItemSerial->stockTransferItem->stockTransfer->destination_warehouse_id,
+            productId: $stockTransferItemSerial->stockTransferItem->productUnit->product_id,
+            direction: 1,
+            serial: $serial,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockTransactionCreateDTO.php b/api/app/DTOs/StockTransactionCreateDTO.php
new file mode 100644
index 000000000..ad50cfa42
--- /dev/null
+++ b/api/app/DTOs/StockTransactionCreateDTO.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\PurchaseReceiptItem;
+use App\Models\StockAdjustmentInItem;
+use App\Models\StockAdjustmentOutItem;
+use App\Models\StockTransferItem;
+
+final class StockTransactionCreateDTO
+{
+    public function __construct(
+        public readonly string $referableType,
+        public readonly int $referableId,
+        public readonly string $date,
+        public readonly int $warehouseId,
+        public readonly int $productId,
+        public readonly float $baseQty,
+    ) {
+    }
+
+    public static function fromStockAdjustmentInItem(StockAdjustmentInItem $stockAdjustmentInItem): self
+    {
+        return new self(
+            referableType: StockAdjustmentInItem::class,
+            referableId: $stockAdjustmentInItem->id,
+            date: $stockAdjustmentInItem->stockAdjustment->date,
+            warehouseId: $stockAdjustmentInItem->stockAdjustment->in_warehouse_id,
+            productId: $stockAdjustmentInItem->productUnit->product_id,
+            baseQty: $stockAdjustmentInItem->product_unit_qty_base,
+        );
+    }
+
+    public static function fromStockAdjustmentOutItem(StockAdjustmentOutItem $stockAdjustmentOutItem): self
+    {
+        return new self(
+            referableType: StockAdjustmentOutItem::class,
+            referableId: $stockAdjustmentOutItem->id,
+            date: $stockAdjustmentOutItem->stockAdjustment->date,
+            warehouseId: $stockAdjustmentOutItem->stockAdjustment->out_warehouse_id,
+            productId: $stockAdjustmentOutItem->productUnit->product_id,
+            baseQty: $stockAdjustmentOutItem->product_unit_qty_base * -1,
+        );
+    }
+
+    public static function fromPurchaseReceiptItem(PurchaseReceiptItem $purchaseReceiptItem): self
+    {
+        return new self(
+            referableType: PurchaseReceiptItem::class,
+            referableId: $purchaseReceiptItem->id,
+            date: $purchaseReceiptItem->purchaseReceipt->date,
+            warehouseId: $purchaseReceiptItem->purchaseReceipt->warehouse_id,
+            productId: $purchaseReceiptItem->productUnit->product_id,
+            baseQty: $purchaseReceiptItem->product_unit_qty_base,
+        );
+    }
+
+    public static function fromStockTransferItemSource(StockTransferItem $stockTransferItem): self
+    {
+        return new self(
+            referableType: StockTransferItem::class,
+            referableId: $stockTransferItem->id,
+            date: $stockTransferItem->stockTransfer->date,
+            warehouseId: $stockTransferItem->stockTransfer->source_warehouse_id,
+            productId: $stockTransferItem->productUnit->product_id,
+            baseQty: $stockTransferItem->product_unit_qty_base * -1,
+        );
+    }
+
+    public static function fromStockTransferItemDestination(StockTransferItem $stockTransferItem): self
+    {
+        return new self(
+            referableType: StockTransferItem::class,
+            referableId: $stockTransferItem->id,
+            date: $stockTransferItem->stockTransfer->date,
+            warehouseId: $stockTransferItem->stockTransfer->destination_warehouse_id,
+            productId: $stockTransferItem->productUnit->product_id,
+            baseQty: $stockTransferItem->product_unit_qty_base,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockTransactionUpdateDTO.php b/api/app/DTOs/StockTransactionUpdateDTO.php
new file mode 100644
index 000000000..ac460da52
--- /dev/null
+++ b/api/app/DTOs/StockTransactionUpdateDTO.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\PurchaseReceiptItem;
+use App\Models\StockAdjustmentInItem;
+use App\Models\StockAdjustmentOutItem;
+use App\Models\StockTransferItem;
+
+final class StockTransactionUpdateDTO
+{
+    public function __construct(
+        public readonly string $referableType,
+        public readonly int $referableId,
+        public readonly string $date,
+        public readonly int $warehouseId,
+        public readonly int $productId,
+        public readonly float $baseQty,
+    ) {
+    }
+
+    public static function fromStockAdjustmentInItem(StockAdjustmentInItem $stockAdjustmentInItem): self
+    {
+        return new self(
+            referableType: StockAdjustmentInItem::class,
+            referableId: $stockAdjustmentInItem->id,
+            date: $stockAdjustmentInItem->stockAdjustment->date,
+            warehouseId: $stockAdjustmentInItem->stockAdjustment->in_warehouse_id,
+            productId: $stockAdjustmentInItem->productUnit->product_id,
+            baseQty: $stockAdjustmentInItem->product_unit_qty_base,
+        );
+    }
+
+    public static function fromStockAdjustmentOutItem(StockAdjustmentOutItem $stockAdjustmentOutItem): self
+    {
+        return new self(
+            referableType: StockAdjustmentOutItem::class,
+            referableId: $stockAdjustmentOutItem->id,
+            date: $stockAdjustmentOutItem->stockAdjustment->date,
+            warehouseId: $stockAdjustmentOutItem->stockAdjustment->out_warehouse_id,
+            productId: $stockAdjustmentOutItem->productUnit->product_id,
+            baseQty: $stockAdjustmentOutItem->product_unit_qty_base * -1,
+        );
+    }
+
+    public static function fromPurchaseReceiptItem(PurchaseReceiptItem $purchaseReceiptItem): self
+    {
+        return new self(
+            referableType: PurchaseReceiptItem::class,
+            referableId: $purchaseReceiptItem->id,
+            date: $purchaseReceiptItem->purchaseReceipt->date,
+            warehouseId: $purchaseReceiptItem->purchaseReceipt->warehouse_id,
+            productId: $purchaseReceiptItem->productUnit->product_id,
+            baseQty: $purchaseReceiptItem->product_unit_qty_base,
+        );
+    }
+
+    public static function fromStockTransferItemSource(StockTransferItem $stockTransferItem): self
+    {
+        return new self(
+            referableType: StockTransferItem::class,
+            referableId: $stockTransferItem->id,
+            date: $stockTransferItem->stockTransfer->date,
+            warehouseId: $stockTransferItem->stockTransfer->source_warehouse_id,
+            productId: $stockTransferItem->productUnit->product_id,
+            baseQty: $stockTransferItem->product_unit_qty_base * -1,
+        );
+    }
+
+    public static function fromStockTransferItemDestination(StockTransferItem $stockTransferItem): self
+    {
+        return new self(
+            referableType: StockTransferItem::class,
+            referableId: $stockTransferItem->id,
+            date: $stockTransferItem->stockTransfer->date,
+            warehouseId: $stockTransferItem->stockTransfer->destination_warehouse_id,
+            productId: $stockTransferItem->productUnit->product_id,
+            baseQty: $stockTransferItem->product_unit_qty_base,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockTransferCreateDTO.php b/api/app/DTOs/StockTransferCreateDTO.php
new file mode 100644
index 000000000..f402037b9
--- /dev/null
+++ b/api/app/DTOs/StockTransferCreateDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockTransferCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $sourceWarehouseId,
+        public readonly int $destinationWarehouseId,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockTransferItemCreateDTO.php b/api/app/DTOs/StockTransferItemCreateDTO.php
new file mode 100644
index 000000000..2434c239e
--- /dev/null
+++ b/api/app/DTOs/StockTransferItemCreateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockTransferItemCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $stockTransferId,
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly ?string $remarks,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockTransferItemSerialCreateDTO.php b/api/app/DTOs/StockTransferItemSerialCreateDTO.php
new file mode 100644
index 000000000..d723390be
--- /dev/null
+++ b/api/app/DTOs/StockTransferItemSerialCreateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\StockTransferItem;
+
+final class StockTransferItemSerialCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $stockTransferId,
+        public readonly int $stockTransferItemId,
+        public readonly string $serial,
+    ) {
+    }
+
+    public static function fromStockTransferItem(StockTransferItem $stockTransferItem, string $serial): self
+    {
+        return new self(
+            companyId: $stockTransferItem->company_id,
+            branchId: $stockTransferItem->branch_id,
+            stockTransferId: $stockTransferItem->stock_transfer_id,
+            stockTransferItemId: $stockTransferItem->id,
+            serial: $serial,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockTransferItemSerialUpdateDTO.php b/api/app/DTOs/StockTransferItemSerialUpdateDTO.php
new file mode 100644
index 000000000..d54176423
--- /dev/null
+++ b/api/app/DTOs/StockTransferItemSerialUpdateDTO.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\DTOs;
+
+use App\Models\StockTransferItemSerial;
+
+final class StockTransferItemSerialUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly int $stockTransferId,
+        public readonly int $stockTransferItemId,
+        public readonly string $serial,
+    ) {
+    }
+
+    public static function fromStockTransferItemSerial(StockTransferItemSerial $stockTransferItemSerial, string $serial): self
+    {
+        return new self(
+            companyId: $stockTransferItemSerial->company_id,
+            branchId: $stockTransferItemSerial->branch_id,
+            stockTransferId: $stockTransferItemSerial->stock_transfer_id,
+            stockTransferItemId: $stockTransferItemSerial->stock_transfer_item_id,
+            serial: $serial,
+        );
+    }
+}
diff --git a/api/app/DTOs/StockTransferItemUpdateDTO.php b/api/app/DTOs/StockTransferItemUpdateDTO.php
new file mode 100644
index 000000000..f80c52370
--- /dev/null
+++ b/api/app/DTOs/StockTransferItemUpdateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockTransferItemUpdateDTO
+{
+    public function __construct(
+        public readonly float $qty,
+        public readonly int $productUnitId,
+        public readonly float $productUnitConversionValue,
+        public readonly ?string $remarks,
+        /** @var int[] */
+        public readonly array $deleteSerialIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $serials,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/StockTransferUpdateDTO.php b/api/app/DTOs/StockTransferUpdateDTO.php
new file mode 100644
index 000000000..55bd446a0
--- /dev/null
+++ b/api/app/DTOs/StockTransferUpdateDTO.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\DTOs;
+
+final class StockTransferUpdateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $date,
+        public readonly int $sourceWarehouseId,
+        public readonly int $destinationWarehouseId,
+        public readonly ?string $remarks,
+        public readonly bool $isPosted,
+        /** @var int[] */
+        public readonly array $deleteItemIds,
+        /** @var array<int, array<string, mixed>> */
+        public readonly array $items,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/SupplierCreateDTO.php b/api/app/DTOs/SupplierCreateDTO.php
new file mode 100644
index 000000000..699b86c3b
--- /dev/null
+++ b/api/app/DTOs/SupplierCreateDTO.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\DTOs;
+
+final class SupplierCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $address,
+        public readonly ?string $city,
+        public readonly mixed $paymentTermType,
+        public readonly int $paymentTerm,
+        public readonly bool $taxableEnterprise,
+        public readonly ?string $taxId,
+        public readonly ?string $remarks,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/SupplierUpdateDTO.php b/api/app/DTOs/SupplierUpdateDTO.php
new file mode 100644
index 000000000..28d7a56f4
--- /dev/null
+++ b/api/app/DTOs/SupplierUpdateDTO.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\DTOs;
+
+final class SupplierUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $address,
+        public readonly ?string $city,
+        public readonly mixed $paymentTermType,
+        public readonly int $paymentTerm,
+        public readonly bool $taxableEnterprise,
+        public readonly ?string $taxId,
+        public readonly ?string $remarks,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/UnitCreateDTO.php b/api/app/DTOs/UnitCreateDTO.php
new file mode 100644
index 000000000..9fbf4794a
--- /dev/null
+++ b/api/app/DTOs/UnitCreateDTO.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DTOs;
+
+final class UnitCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $description,
+        public readonly string $type,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/UnitUpdateDTO.php b/api/app/DTOs/UnitUpdateDTO.php
new file mode 100644
index 000000000..ce1acddf2
--- /dev/null
+++ b/api/app/DTOs/UnitUpdateDTO.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\DTOs;
+
+final class UnitUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $description,
+        public readonly string $type,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/VatProfileCreateDTO.php b/api/app/DTOs/VatProfileCreateDTO.php
new file mode 100644
index 000000000..2412dfb77
--- /dev/null
+++ b/api/app/DTOs/VatProfileCreateDTO.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\DTOs;
+
+final class VatProfileCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly float|int $vatRate,
+        public readonly float|int $vatBaseNumerator,
+        public readonly float|int $vatBaseDenominator,
+        public readonly ?string $remarks,
+        public readonly bool $isActive,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/VatProfileUpdateDTO.php b/api/app/DTOs/VatProfileUpdateDTO.php
new file mode 100644
index 000000000..22dbf0e95
--- /dev/null
+++ b/api/app/DTOs/VatProfileUpdateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class VatProfileUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly float|int $vatRate,
+        public readonly float|int $vatBaseNumerator,
+        public readonly float|int $vatBaseDenominator,
+        public readonly ?string $remarks,
+        public readonly bool $isActive,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/WarehouseCreateDTO.php b/api/app/DTOs/WarehouseCreateDTO.php
new file mode 100644
index 000000000..a386bdcdd
--- /dev/null
+++ b/api/app/DTOs/WarehouseCreateDTO.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\DTOs;
+
+final class WarehouseCreateDTO
+{
+    public function __construct(
+        public readonly int $companyId,
+        public readonly int $branchId,
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $address,
+        public readonly ?string $city,
+        public readonly ?string $contact,
+        public readonly ?string $remarks,
+        public readonly int $status,
+    ) {
+    }
+}
diff --git a/api/app/DTOs/WarehouseUpdateDTO.php b/api/app/DTOs/WarehouseUpdateDTO.php
new file mode 100644
index 000000000..40e17d4c6
--- /dev/null
+++ b/api/app/DTOs/WarehouseUpdateDTO.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\DTOs;
+
+final class WarehouseUpdateDTO
+{
+    public function __construct(
+        public readonly string $code,
+        public readonly string $name,
+        public readonly ?string $address,
+        public readonly ?string $city,
+        public readonly ?string $contact,
+        public readonly ?string $remarks,
+        public readonly mixed $status,
+    ) {
+    }
+}
diff --git a/api/app/Enums/CapitalTransactionTypeEnum.php b/api/app/Enums/CapitalTransactionTypeEnum.php
new file mode 100644
index 000000000..e2dbd921a
--- /dev/null
+++ b/api/app/Enums/CapitalTransactionTypeEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum CapitalTransactionTypeEnum: string
+{
+    use EnumHelper;
+
+    case IN = 'IN';
+    case OUT = 'OUT';
+}
diff --git a/api/app/Enums/ChartOfAccountAccountTypeEnum.php b/api/app/Enums/ChartOfAccountAccountTypeEnum.php
new file mode 100644
index 000000000..8cb48f2dc
--- /dev/null
+++ b/api/app/Enums/ChartOfAccountAccountTypeEnum.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum ChartOfAccountAccountTypeEnum: string
+{
+    use EnumHelper;
+
+    case ASSET = 'asset';
+    case LIABILITY = 'liability';
+    case EQUITY = 'equity';
+    case INCOME = 'income';
+    case EXPENSE = 'expense';
+    case SYSTEM = 'system';
+}
diff --git a/api/app/Enums/ChartOfAccountNormalBalanceEnum.php b/api/app/Enums/ChartOfAccountNormalBalanceEnum.php
new file mode 100644
index 000000000..0f653e444
--- /dev/null
+++ b/api/app/Enums/ChartOfAccountNormalBalanceEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum ChartOfAccountNormalBalanceEnum: string
+{
+    use EnumHelper;
+
+    case DEBIT = 'debit';
+    case CREDIT = 'credit';
+}
diff --git a/api/app/Enums/ChartOfAccountScopeEnum.php b/api/app/Enums/ChartOfAccountScopeEnum.php
new file mode 100644
index 000000000..b3ee22f4f
--- /dev/null
+++ b/api/app/Enums/ChartOfAccountScopeEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum ChartOfAccountScopeEnum: string
+{
+    use EnumHelper;
+
+    case SYSTEM = 'system';
+    case USER = 'user';
+}
diff --git a/api/app/Enums/ChartOfAccountSystemKeyEnum.php b/api/app/Enums/ChartOfAccountSystemKeyEnum.php
new file mode 100644
index 000000000..6a3c22762
--- /dev/null
+++ b/api/app/Enums/ChartOfAccountSystemKeyEnum.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum ChartOfAccountSystemKeyEnum: string
+{
+    use EnumHelper;
+
+    case ASSET_ROOT = 'asset_root';
+    case ASSET_CURRENT = 'asset_current';
+    case ASSET_CURRENT_CASH_AND_CASH_EQUIVALENTS = 'asset_current_cash_and_cash_equivalents';
+    case ASSET_CURRENT_CASH = 'asset_current_cash';
+    case ASSET_CURRENT_BANK = 'asset_current_bank';
+    case ASSET_CURRENT_ACCOUNT_RECEIVABLE = 'asset_current_account_receivable';
+    case ASSET_CURRENT_INVENTORY = 'asset_current_inventory';
+    case ASSET_CURRENT_PREPAID_EXPENSE = 'asset_current_prepaid_expense';
+    case ASSET_NON_CURRENT = 'asset_non_current';
+    case ASSET_NON_CURRENT_FIXED_ASSET = 'asset_non_current_fixed_asset';
+    case ASSET_NON_CURRENT_ACCUMULATED_DEPRECIATION = 'asset_non_current_accumulated_depreciation';
+    case ASSET_NON_CURRENT_INTANGIBLE_ASSET = 'asset_non_current_intangible_asset';
+
+    case LIABILITY_ROOT = 'liability_root';
+    case LIABILITY_ACCOUNT_PAYABLE = 'liability_account_payable';
+    case LIABILITY_TAX_PAYABLE = 'liability_tax_payable';
+    case LIABILITY_DEFERRED_INCOME = 'liability_deferred_income';
+
+    case EQUITY_ROOT = 'equity_root';
+    case EQUITY_CAPITAL = 'equity_capital';
+    case EQUITY_CAPITAL_OPENING_CAPITAL = 'equity_capital_opening_capital';
+    case EQUITY_CAPITAL_ADDITIONAL_CAPITAL = 'equity_capital_additional_capital';
+    case EQUITY_CAPITAL_DRAWING = 'equity_capital_drawing';
+    case EQUITY_CURRENT_MONTH_EARNINGS = 'equity_current_month_earnings';
+    case EQUITY_CURRENT_YEAR_EARNINGS = 'equity_current_year_earnings';
+    case EQUITY_RETAINED_EARNINGS = 'equity_retained_earnings';
+
+    case INCOME_ROOT = 'income_root';
+    case INCOME_SALES = 'income_sales';
+    case INCOME_SERVICE = 'income_service';
+
+    case COGS_ROOT = 'cogs_root';
+    case COGS_MATERIAL_COST = 'cogs_material_cost';
+    case COGS_DIRECT_LABOR_COST = 'cogs_direct_labor_cost';
+
+    case EXPENSE_ROOT = 'expense_root';
+    case EXPENSE_SALARY = 'expense_salary';
+    case EXPENSE_ELECTRICITY = 'expense_electricity';
+    case EXPENSE_RENT = 'expense_rent';
+
+    case OTHER_INCOME_ROOT = 'other_income_root';
+    case OTHER_INCOME_INTEREST = 'other_income_interest';
+    case OTHER_EXPENSE_ROOT = 'other_expense_root';
+    case OTHER_EXPENSE_INTEREST = 'other_expense_interest';
+
+    case SYSTEM_SUSPENSE = 'system_suspense';
+}
diff --git a/api/app/Enums/DiscountTypeEnum.php b/api/app/Enums/DiscountTypeEnum.php
new file mode 100644
index 000000000..83027962c
--- /dev/null
+++ b/api/app/Enums/DiscountTypeEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum DiscountTypeEnum: string
+{
+    use EnumHelper;
+
+    case PERCENTAGE = 'PERCENTAGE';
+    case NOMINAL = 'NOMINAL';
+}
diff --git a/api/app/Enums/ExpenseCategoryTypeEnum.php b/api/app/Enums/ExpenseCategoryTypeEnum.php
new file mode 100644
index 000000000..61ebbe43d
--- /dev/null
+++ b/api/app/Enums/ExpenseCategoryTypeEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum ExpenseCategoryTypeEnum: string
+{
+    use EnumHelper;
+
+    case EXPENSE = 'expense';
+    case OTHER_EXPENSE = 'other_expense';
+}
diff --git a/api/app/Enums/JournalEntryTypeEnum.php b/api/app/Enums/JournalEntryTypeEnum.php
new file mode 100644
index 000000000..c24d45391
--- /dev/null
+++ b/api/app/Enums/JournalEntryTypeEnum.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum JournalEntryTypeEnum: string
+{
+    use EnumHelper;
+
+    case TRANSACTION = 'transaction';
+    case CURRENT_MONTH_EARNINGS = 'current_month_earnings';
+    case MONTH_END_CLOSING = 'month_end_closing';
+    case MONTH_TO_YEAR_CLOSING = 'month_to_year_closing';
+    case YEAR_TO_RETAINED_EARNINGS_CLOSING = 'year_to_retained_earnings_closing';
+}
diff --git a/api/app/Enums/PaymentTermTypeEnum.php b/api/app/Enums/PaymentTermTypeEnum.php
new file mode 100644
index 000000000..b043e5a12
--- /dev/null
+++ b/api/app/Enums/PaymentTermTypeEnum.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum PaymentTermTypeEnum: string
+{
+    use EnumHelper;
+
+    case PAYMENT_IN_ADVANCE = 'PIA';
+    case X_DAYS_AFTER_INVOICE = 'NET';
+    case END_OF_MONTH = 'EOM';
+    case CASH_ON_DELIVERY = 'COD';
+    case CASH_ON_NEXT_DELIVERY = 'CND';
+    case CASH_BEFORE_SHIPMENT = 'CBS';
+}
diff --git a/api/app/Enums/ProductCategoryTypeEnum.php b/api/app/Enums/ProductCategoryTypeEnum.php
new file mode 100644
index 000000000..4922bd73e
--- /dev/null
+++ b/api/app/Enums/ProductCategoryTypeEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum ProductCategoryTypeEnum: int
+{
+    use EnumHelper;
+
+    case PRODUCT = 1;
+    case SERVICE = 2;
+}
diff --git a/api/app/Enums/ProductStockFilterEnum.php b/api/app/Enums/ProductStockFilterEnum.php
new file mode 100644
index 000000000..38198df36
--- /dev/null
+++ b/api/app/Enums/ProductStockFilterEnum.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum ProductStockFilterEnum: string
+{
+    use EnumHelper;
+
+    case HAS_STOCK = 'has_stock';
+    case EMPTY = 'empty';
+    case VALID = 'valid';
+    case INVALID = 'invalid';
+}
diff --git a/api/app/Enums/ProductTypeEnum.php b/api/app/Enums/ProductTypeEnum.php
new file mode 100644
index 000000000..8bb14f5ae
--- /dev/null
+++ b/api/app/Enums/ProductTypeEnum.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum ProductTypeEnum: int
+{
+    use EnumHelper;
+
+    case RAW_MATERIAL = 1;
+    case WORK_IN_PROGRESS = 2;
+    case FINISHED_GOODS = 3;
+    case SERVICE = 4;
+}
diff --git a/api/app/Enums/PurchaseOrderDownPaymentAllocationStatusEnum.php b/api/app/Enums/PurchaseOrderDownPaymentAllocationStatusEnum.php
new file mode 100644
index 000000000..582ab84e9
--- /dev/null
+++ b/api/app/Enums/PurchaseOrderDownPaymentAllocationStatusEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum PurchaseOrderDownPaymentAllocationStatusEnum: string
+{
+    use EnumHelper;
+
+    case NOT_FULLY_ALLOCATED = 'not_fully_allocated';
+    case FULLY_ALLOCATED = 'fully_allocated';
+}
diff --git a/api/app/Enums/PurchaseProgressStatusEnum.php b/api/app/Enums/PurchaseProgressStatusEnum.php
new file mode 100644
index 000000000..302aed4c6
--- /dev/null
+++ b/api/app/Enums/PurchaseProgressStatusEnum.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum PurchaseProgressStatusEnum: string
+{
+    use EnumHelper;
+
+    case UNLINKED = 'unlinked';
+    case UNMATCHED = 'unmatched';
+    case MATCHED = 'matched';
+
+    public static function toDropDownOptions(string $translationPrefix): array
+    {
+        return array_map(
+            fn (self $enum) => [
+                'name' => $translationPrefix.$enum->value,
+                'code' => $enum->value,
+            ],
+            self::cases(),
+        );
+    }
+}
diff --git a/api/app/Enums/PurchaseReceiptModeEnum.php b/api/app/Enums/PurchaseReceiptModeEnum.php
new file mode 100644
index 000000000..3ccc8d425
--- /dev/null
+++ b/api/app/Enums/PurchaseReceiptModeEnum.php
@@ -0,0 +1,9 @@
+<?php
+
+namespace App\Enums;
+
+enum PurchaseReceiptModeEnum: string
+{
+    case DIRECT = 'direct';
+    case MANUAL = 'manual';
+}
diff --git a/api/app/Enums/RecordStatus.php b/api/app/Enums/RecordStatusEnum.php
similarity index 84%
rename from api/app/Enums/RecordStatus.php
rename to api/app/Enums/RecordStatusEnum.php
index b6f008286..a994fa6dd 100644
--- a/api/app/Enums/RecordStatus.php
+++ b/api/app/Enums/RecordStatusEnum.php
@@ -4,7 +4,7 @@
 
 use App\Traits\EnumHelper;
 
-enum RecordStatus: int
+enum RecordStatusEnum: int
 {
     use EnumHelper;
 
diff --git a/api/app/Enums/RoundingTypeEnum.php b/api/app/Enums/RoundingTypeEnum.php
new file mode 100644
index 000000000..fd2438ce7
--- /dev/null
+++ b/api/app/Enums/RoundingTypeEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum RoundingTypeEnum: int
+{
+    use EnumHelper;
+
+    case UP = 1;
+    case DOWN = 2;
+}
diff --git a/api/app/Enums/SortDirectionEnum.php b/api/app/Enums/SortDirectionEnum.php
new file mode 100644
index 000000000..dcfdce48d
--- /dev/null
+++ b/api/app/Enums/SortDirectionEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum SortDirectionEnum: string
+{
+    use EnumHelper;
+
+    case ASC = 'asc';
+    case DESC = 'desc';
+}
diff --git a/api/app/Enums/UnitTypeEnum.php b/api/app/Enums/UnitTypeEnum.php
new file mode 100644
index 000000000..1b81d913d
--- /dev/null
+++ b/api/app/Enums/UnitTypeEnum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\EnumHelper;
+
+enum UnitTypeEnum: int
+{
+    use EnumHelper;
+
+    case PRODUCT = 1;
+    case SERVICE = 2;
+}
diff --git a/api/app/Enums/UserRoles.php b/api/app/Enums/UserRolesEnum.php
similarity index 90%
rename from api/app/Enums/UserRoles.php
rename to api/app/Enums/UserRolesEnum.php
index 0ba47239c..d18a2d29f 100644
--- a/api/app/Enums/UserRoles.php
+++ b/api/app/Enums/UserRolesEnum.php
@@ -4,7 +4,7 @@
 
 use App\Traits\EnumHelper;
 
-enum UserRoles: string
+enum UserRolesEnum: string
 {
     use EnumHelper;
 
diff --git a/api/app/Helpers/FactoryHelper.php b/api/app/Helpers/FactoryHelper.php
new file mode 100644
index 000000000..ca3016169
--- /dev/null
+++ b/api/app/Helpers/FactoryHelper.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Helpers;
+
+use Vinkla\Hashids\Facades\Hashids;
+
+class FactoryHelper
+{
+    public static function encodeIds(array $data): array
+    {
+        foreach ($data as $key => $value) {
+            if (self::isValidId($key, $value)) {
+                $data[$key] = Hashids::encode($value);
+            }
+        }
+
+        return $data;
+    }
+
+    private static function isValidId($key, $value): bool
+    {
+        if (substr($key, -3) == '_id') {
+            return is_int($value);
+        }
+
+        return false;
+    }
+}
diff --git a/api/app/Helpers/GlobalHelpers.php b/api/app/Helpers/GlobalHelpers.php
new file mode 100644
index 000000000..e8933bd14
--- /dev/null
+++ b/api/app/Helpers/GlobalHelpers.php
@@ -0,0 +1,14 @@
+<?php
+
+if (! function_exists('dec_trim')) {
+    function dec_trim($value): ?string
+    {
+        if ($value === null || $value === '') {
+            return null;
+        }
+
+        $value = (string) $value;
+
+        return rtrim(rtrim($value, '0'), '.');
+    }
+}
diff --git a/api/app/Helpers/HashidsHelper.php b/api/app/Helpers/HashidsHelper.php
new file mode 100644
index 000000000..1311a70f6
--- /dev/null
+++ b/api/app/Helpers/HashidsHelper.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Helpers;
+
+use Vinkla\Hashids\Facades\Hashids;
+
+class HashidsHelper
+{
+    public static function decodeId($encoded)
+    {
+        try {
+            $result = Hashids::decode((string) $encoded);
+
+            if (count($result) != 1) {
+                return (int) 0;
+            }
+
+            return $result[0];
+        } catch (\Exception $e) {
+            return (int) 0;
+        }
+    }
+}
diff --git a/api/app/Helpers/ImageHelper/ImageHelper.php b/api/app/Helpers/ImageHelper/ImageHelper.php
new file mode 100644
index 000000000..d70ed90ce
--- /dev/null
+++ b/api/app/Helpers/ImageHelper/ImageHelper.php
@@ -0,0 +1,211 @@
+<?php
+
+namespace App\Helpers\ImageHelper;
+
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+use LogicException;
+
+class ImageHelper
+{
+    /**
+     * Create a dummy image with text, size, and position specified.
+     *
+     * @param  int  $width  The width of the image
+     * @param  int  $height  The height of the image
+     * @param  string  $hPos  The horizontal position of the text (left, center, right)
+     * @param  string  $vPos  The vertical position of the text (top, center, bottom)
+     * @param  string|null  $color  The background color of the image (hex color code) or null for grey color or 'random' for random color
+     * @param  string  $textSize  The size of the text (small, medium, large)
+     */
+    public static function createDummyImageWithTextSizeAndPosition(
+        int $width,
+        int $height,
+        string $hPos,
+        string $vPos,
+        ?string $color,
+        string $textSize
+    ): UploadedFile {
+        $img = imagecreatetruecolor($width, $height);
+
+        if ($color) {
+            if ($color == 'random') {
+                $r = mt_rand(0, 255);
+                $g = mt_rand(0, 255);
+                $b = mt_rand(0, 255);
+
+                imagefill($img, 0, 0, imagecolorallocate($img, $r, $g, $b));
+            } else {
+                $color = str_replace('#', '', $color);
+                $r = substr($color, 0, 2);
+                $g = substr($color, 2, 2);
+                $b = substr($color, 4, 2);
+                imagefill($img, 0, 0, imagecolorallocate($img, $r, $g, $b));
+            }
+        } else {
+            $greyColor = imagecolorallocate($img, 192, 192, 192);
+            imagefill($img, 0, 0, $greyColor);
+        }
+
+        $xSize = max($width, $height);
+
+        switch ($textSize) {
+            case 'small':
+                $fontSize = round($xSize / 30);
+                break;
+            case 'medium':
+                $fontSize = round($xSize / 20);
+                break;
+            case 'large':
+                $fontSize = round($xSize / 10);
+                break;
+            default:
+                throw new LogicException('Invalid text size');
+                break;
+        }
+
+        $text = $width.' x '.$height;
+        $font = __DIR__.'/fonts/arial/ARIAL.TTF';
+        $textBox = imagettfbbox($fontSize, 0, $font, $text);
+        $textWidth = $textBox[2] - $textBox[0];
+        $textHeight = $textBox[1] - $textBox[7];
+
+        $x = 0;
+        $y = 0;
+
+        switch ($hPos) {
+            case 'left':
+                $x = round($width * 0.025);
+                break;
+            case 'center':
+                $x = round($width / 2) - round($textWidth / 2);
+                break;
+            case 'right':
+                $x = round($width * 0.975) - round($textWidth);
+                break;
+            default:
+                throw new LogicException('Invalid horizontal text position');
+                break;
+        }
+
+        switch ($vPos) {
+            case 'top':
+                $y = round($height * 0.1) + round($textHeight / 2);
+                break;
+            case 'center':
+                $y = round($height / 2) + round($textHeight / 2);
+                break;
+            case 'bottom':
+                $y = round($height * 0.9) + round($textHeight / 2);
+                break;
+            default:
+                throw new LogicException('Invalid vertical text position');
+                break;
+        }
+
+        $textColor = imagecolorallocate($img, 255, 255, 255);
+
+        imagettftext($img, $fontSize, 0, $x, $y, $textColor, $font, $text);
+
+        // $tempFilePath = tempnam(sys_get_temp_dir(), 'modified_image_');
+        $tempFilePath = sys_get_temp_dir().'/modified_image_'.time().'.jpg';
+        imagejpeg($img, $tempFilePath, 100);
+
+        $uploadedFile = new UploadedFile($tempFilePath, 'modified_image.jpg', 'image/jpeg', null, true);
+
+        imagedestroy($img);
+
+        return $uploadedFile;
+    }
+
+    public static function storeAndResizeImage($image, string $path, int $outputWidth, int $outputHeight): string
+    {
+        $path = $image->store($path, 'public');
+
+        /** @var \Illuminate\Filesystem\FilesystemAdapter $disk */
+        $disk = Storage::disk('public');
+        $storagePath = $disk->path($path);
+
+        self::resizeImage($storagePath, $storagePath, $outputWidth, $outputHeight);
+
+        return $path;
+    }
+
+    public static function resizeImage(string $sourcePath, string $destinationPath, int $outputWidth, int $outputHeight)
+    {
+        // Ambil ukuran asli gambar
+        [$width, $height] = getimagesize($sourcePath);
+
+        // Hitung rasio
+        $thumbRatio = $outputWidth / $outputHeight;
+        $originalRatio = $width / $height;
+
+        if ($thumbRatio > $originalRatio) {
+            $newHeight = $outputHeight;
+            $newWidth = $width / ($height / $outputHeight);
+        } else {
+            $newWidth = $outputWidth;
+            $newHeight = $height / ($width / $outputWidth);
+        }
+
+        // Buat gambar baru dengan ukuran yang sudah ditentukan
+        $thumbnail = imagecreatetruecolor($newWidth, $newHeight);
+
+        // Buat image dari file asli berdasarkan tipe file
+        $source = imagecreatefromstring(file_get_contents($sourcePath));
+
+        // Salin dan ubah ukuran gambar
+        imagecopyresampled($thumbnail, $source, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
+
+        // Path untuk menyimpan thumbnail
+        // $thumbnailPath = storage_path($destinationPath);
+
+        // Simpan thumbnail berdasarkan tipe file
+        // imagejpeg($thumbnail, $destinationPath, 90); // untuk JPEG
+        imagepng($thumbnail, $destinationPath, 8); // untuk PNG
+
+        // Hapus gambar dari memori
+        imagedestroy($thumbnail);
+        imagedestroy($source);
+    }
+
+    public static function getPath(?string $path): ?string
+    {
+        /** @var \Illuminate\Filesystem\FilesystemAdapter $disk */
+        $disk = Storage::disk('public');
+
+        if ($path && $disk->exists($path)) {
+            return $disk->path($path);
+        }
+
+        return null;
+    }
+
+    public static function getUrl(?string $path): ?string
+    {
+        /** @var \Illuminate\Filesystem\FilesystemAdapter $disk */
+        $disk = Storage::disk('public');
+
+        if ($path && $disk->exists($path)) {
+            return $disk->url($path);
+        }
+
+        return null;
+    }
+
+    public static function getBinary(?string $path): ?string
+    {
+        /** @var \Illuminate\Filesystem\FilesystemAdapter $disk */
+        $disk = Storage::disk('public');
+
+        if ($path && $disk->exists($path)) {
+            $fileContents = $disk->get($path);
+            $mimeType = $disk->mimeType($path);
+            $base64 = base64_encode($fileContents);
+
+            return 'data:'.$mimeType.';base64,'.$base64;
+        }
+
+        return null;
+    }
+}
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIAL.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIAL.TTF
new file mode 100644
index 000000000..27372d9db
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIAL.TTF differ
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIALBD.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIALBD.TTF
new file mode 100644
index 000000000..03bb5e24b
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIALBD.TTF differ
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIALBI.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIALBI.TTF
new file mode 100644
index 000000000..dc80b4e42
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIALBI.TTF differ
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIALI.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIALI.TTF
new file mode 100644
index 000000000..652df712c
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIALI.TTF differ
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIALN.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIALN.TTF
new file mode 100644
index 000000000..94907a3df
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIALN.TTF differ
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIALNB.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIALNB.TTF
new file mode 100644
index 000000000..62437f02f
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIALNB.TTF differ
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIALNBI.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIALNBI.TTF
new file mode 100644
index 000000000..d3f019a36
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIALNBI.TTF differ
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIALNI.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIALNI.TTF
new file mode 100644
index 000000000..4acd4685f
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIALNI.TTF differ
diff --git a/api/app/Helpers/ImageHelper/fonts/arial/ARIBLK.TTF b/api/app/Helpers/ImageHelper/fonts/arial/ARIBLK.TTF
new file mode 100644
index 000000000..e7ae345aa
Binary files /dev/null and b/api/app/Helpers/ImageHelper/fonts/arial/ARIBLK.TTF differ
diff --git a/api/app/Helpers/RequestHelper.php b/api/app/Helpers/RequestHelper.php
new file mode 100644
index 000000000..78d706ada
--- /dev/null
+++ b/api/app/Helpers/RequestHelper.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Helpers;
+
+class RequestHelper
+{
+    public static function safeReturn(?object $input)
+    {
+        try {
+            if ($input) {
+                return $input;
+            } else {
+                return null;
+            }
+        } catch (\Exception $e) {
+            return null;
+        }
+    }
+}
diff --git a/api/app/Helpers/TimezoneHelper.php b/api/app/Helpers/TimezoneHelper.php
new file mode 100644
index 000000000..9e331f866
--- /dev/null
+++ b/api/app/Helpers/TimezoneHelper.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Helpers;
+
+use Carbon\Carbon;
+use DateTimeInterface;
+use Illuminate\Support\Facades\Auth;
+use Throwable;
+
+class TimezoneHelper
+{
+    public static function convertToUTC(string $datetime): string
+    {
+        $timezone = self::getUserTimezone();
+
+        return Carbon::parse($datetime, $timezone)
+            ->setTimezone('UTC')
+            ->format('Y-m-d H:i:s');
+    }
+
+    public static function convertFromUTC(string $datetime): string
+    {
+        $timezone = self::getUserTimezone();
+
+        return Carbon::parse($datetime, 'UTC')
+            ->setTimezone($timezone)
+            ->format('Y-m-d H:i:s');
+    }
+
+    public static function convertFromUTCIfValid(mixed $datetime): ?string
+    {
+        if (! self::isValidDateTime($datetime)) {
+            return null;
+        }
+
+        if ($datetime instanceof Carbon) {
+            $datetime = $datetime->toDateTimeString();
+        } elseif ($datetime instanceof DateTimeInterface) {
+            $datetime = Carbon::instance($datetime)->toDateTimeString();
+        }
+
+        return self::convertFromUTC((string) $datetime);
+    }
+
+    public static function isValidDateTime(mixed $value): bool
+    {
+        if ($value instanceof Carbon || $value instanceof DateTimeInterface) {
+            return true;
+        }
+
+        if (is_string($value) && trim($value) !== '') {
+            try {
+                Carbon::parse($value);
+
+                return true;
+            } catch (Throwable) {
+                return false;
+            }
+        }
+
+        return false;
+    }
+
+    public static function getUserTimezone(): string
+    {
+        return Auth::user()?->timezone ?? config('app.timezone', 'UTC');
+    }
+}
diff --git a/api/app/Http/Controllers/AssetAdjustmentController.php b/api/app/Http/Controllers/AssetAdjustmentController.php
new file mode 100644
index 000000000..a7a6d4606
--- /dev/null
+++ b/api/app/Http/Controllers/AssetAdjustmentController.php
@@ -0,0 +1,237 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\AssetAdjustment\AssetAdjustmentActions;
+use App\DTOs\AssetAdjustmentCreateDTO;
+use App\DTOs\AssetAdjustmentUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\AssetAdjustment\AssetAdjustmentStoreRequest;
+use App\Http\Requests\AssetAdjustment\AssetAdjustmentUpdateRequest;
+use App\Http\Resources\AssetAdjustmentResource;
+use App\Models\AssetAdjustment;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class AssetAdjustmentController extends BaseController
+{
+    private $assetAdjustmentActions;
+
+    public function __construct(AssetAdjustmentActions $assetAdjustmentActions)
+    {
+        parent::__construct();
+
+        $this->assetAdjustmentActions = $assetAdjustmentActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', AssetAdjustment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'date'],
+            'end_date' => ['nullable', 'date', 'after_or_equal:start_date'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetAdjustmentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return AssetAdjustmentResource::collection($result);
+        }
+    }
+
+    public function read(AssetAdjustment $assetAdjustment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $assetAdjustment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetAdjustmentActions->read($assetAdjustment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new AssetAdjustmentResource($result);
+        }
+    }
+
+    public function store(AssetAdjustmentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->assetAdjustmentActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new AssetAdjustmentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                remarks: $validatedRequest['remarks'],
+                isPosted: $validatedRequest['is_posted'],
+                inItems: $validatedRequest['in_items'],
+                outItems: $validatedRequest['out_items'],
+            );
+
+            $result = $this->assetAdjustmentActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(AssetAdjustment $assetAdjustment, AssetAdjustmentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->assetAdjustmentActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $assetAdjustment->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->assetAdjustmentActions->update(
+                assetAdjustment: $assetAdjustment,
+                data: new AssetAdjustmentUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    branchId: $validatedRequest['branch_id'],
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    remarks: $validatedRequest['remarks'],
+                    isPosted: $validatedRequest['is_posted'],
+                    deleteInItemIds: $validatedRequest['delete_in_item_ids'],
+                    inItems: $validatedRequest['in_items'],
+                    deleteOutItemIds: $validatedRequest['delete_out_item_ids'],
+                    outItems: $validatedRequest['out_items'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(AssetAdjustment $assetAdjustment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $assetAdjustment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->assetAdjustmentActions->delete($assetAdjustment);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/AssetCategoryController.php b/api/app/Http/Controllers/AssetCategoryController.php
new file mode 100644
index 000000000..7627201b7
--- /dev/null
+++ b/api/app/Http/Controllers/AssetCategoryController.php
@@ -0,0 +1,214 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\AssetCategory\AssetCategoryActions;
+use App\DTOs\AssetCategoryCreateDTO;
+use App\DTOs\AssetCategoryUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\AssetCategory\AssetCategoryStoreRequest;
+use App\Http\Requests\AssetCategory\AssetCategoryUpdateRequest;
+use App\Http\Resources\AssetCategoryResource;
+use App\Models\AssetCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class AssetCategoryController extends BaseController
+{
+    public function __construct(
+        private readonly AssetCategoryActions $assetCategoryActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', AssetCategory::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('asset_categories', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetCategoryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : AssetCategoryResource::collection($result);
+    }
+
+    public function read(AssetCategory $assetCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $assetCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetCategoryActions->read($assetCategory);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new AssetCategoryResource($result);
+    }
+
+    public function store(AssetCategoryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->assetCategoryActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->assetCategoryActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new AssetCategoryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                estimatedUsefulLifeMonths: $validatedRequest['estimated_useful_life_months'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->assetCategoryActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(AssetCategory $assetCategory, AssetCategoryUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->assetCategoryActions->isUniqueCode(
+                    $assetCategory->company_id,
+                    $validatedRequest['code'],
+                    $assetCategory->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->assetCategoryActions->isUniqueName(
+                $assetCategory->company_id,
+                $validatedRequest['name'],
+                $assetCategory->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->assetCategoryActions->update(
+                assetCategory: $assetCategory,
+                data: new AssetCategoryUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    estimatedUsefulLifeMonths: $validatedRequest['estimated_useful_life_months'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(AssetCategory $assetCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $assetCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->assetCategoryActions->delete($assetCategory);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/AssetController.php b/api/app/Http/Controllers/AssetController.php
new file mode 100644
index 000000000..f32342859
--- /dev/null
+++ b/api/app/Http/Controllers/AssetController.php
@@ -0,0 +1,225 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Asset\AssetActions;
+use App\DTOs\AssetCreateDTO;
+use App\DTOs\AssetUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Asset\AssetStoreRequest;
+use App\Http\Requests\Asset\AssetUpdateRequest;
+use App\Http\Resources\AssetResource;
+use App\Models\Asset;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rules\Enum;
+
+class AssetController extends BaseController
+{
+    public function __construct(
+        private readonly AssetActions $assetActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', Asset::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'asset_category_id' => $request->filled('asset_category_id') ? HashidsHelper::decodeId($request->asset_category_id) : null,
+            'asset_unit_id' => $request->filled('asset_unit_id') ? HashidsHelper::decodeId($request->asset_unit_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'asset_category_id' => ['nullable', 'integer', new ExistsForCompany('asset_categories', $request->company_id)],
+            'asset_unit_id' => ['nullable', 'integer', new ExistsForCompany('asset_units', $request->company_id)],
+            'status' => ['nullable', 'integer', new Enum(RecordStatusEnum::class)],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('assets', $request->company_id)],
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+                assetCategoryId: $validatedRequest['asset_category_id'] ?? null,
+                assetUnitId: $validatedRequest['asset_unit_id'] ?? null,
+                status: $validatedRequest['status'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : AssetResource::collection($result);
+    }
+
+    public function read(Asset $asset)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $asset);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetActions->read($asset);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new AssetResource($result);
+    }
+
+    public function store(AssetStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->assetActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->assetActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->assetActions->create(
+                new AssetCreateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    assetCategoryId: $validatedRequest['asset_category_id'],
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    assetUnitId: $validatedRequest['asset_unit_id'],
+                    status: $validatedRequest['status'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Asset $asset, AssetUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->assetActions->isUniqueCode(
+                    $asset->company_id,
+                    $validatedRequest['code'],
+                    $asset->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->assetActions->isUniqueName(
+                $asset->company_id,
+                $validatedRequest['name'],
+                $asset->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->assetActions->update(
+                asset: $asset,
+                data: new AssetUpdateDTO(
+                    assetCategoryId: $validatedRequest['asset_category_id'],
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    assetUnitId: $validatedRequest['asset_unit_id'],
+                    status: $validatedRequest['status'],
+                    remarks: $validatedRequest['remarks'],
+                ),
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Asset $asset)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $asset);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->assetActions->delete($asset);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/AssetPurchaseController.php b/api/app/Http/Controllers/AssetPurchaseController.php
new file mode 100644
index 000000000..b1fc8ce43
--- /dev/null
+++ b/api/app/Http/Controllers/AssetPurchaseController.php
@@ -0,0 +1,242 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\AssetPurchase\AssetPurchaseActions;
+use App\DTOs\AssetPurchaseCreateDTO;
+use App\DTOs\AssetPurchaseUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\AssetPurchase\AssetPurchaseStoreRequest;
+use App\Http\Requests\AssetPurchase\AssetPurchaseUpdateRequest;
+use App\Http\Resources\AssetPurchaseResource;
+use App\Models\AssetPurchase;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class AssetPurchaseController extends BaseController
+{
+    private $assetPurchaseActions;
+
+    public function __construct(AssetPurchaseActions $assetPurchaseActions)
+    {
+        parent::__construct();
+
+        $this->assetPurchaseActions = $assetPurchaseActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', AssetPurchase::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'date'],
+            'end_date' => ['nullable', 'date', 'after_or_equal:start_date'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetPurchaseActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return AssetPurchaseResource::collection($result);
+        }
+    }
+
+    public function read(AssetPurchase $assetPurchase)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $assetPurchase);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetPurchaseActions->read($assetPurchase);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new AssetPurchaseResource($result);
+        }
+    }
+
+    public function store(AssetPurchaseStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->assetPurchaseActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new AssetPurchaseCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                dueDays: $validatedRequest['due_days'],
+                supplierId: $validatedRequest['supplier_id'],
+                remarks: $validatedRequest['remarks'],
+                isPosted: $validatedRequest['is_posted'],
+                additionalCost: (string) $validatedRequest['additional_cost'],
+                rounding: (string) $validatedRequest['rounding'],
+                items: $validatedRequest['items'],
+            );
+
+            $result = $this->assetPurchaseActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(AssetPurchase $assetPurchase, AssetPurchaseUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->assetPurchaseActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $assetPurchase->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->assetPurchaseActions->update(
+                assetPurchase: $assetPurchase,
+                data: new AssetPurchaseUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    branchId: $validatedRequest['branch_id'],
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    dueDays: $validatedRequest['due_days'],
+                    supplierId: $validatedRequest['supplier_id'],
+                    remarks: $validatedRequest['remarks'],
+                    isPosted: $validatedRequest['is_posted'],
+                    additionalCost: (string) $validatedRequest['additional_cost'],
+                    rounding: (string) $validatedRequest['rounding'],
+                    deleteItemIds: $validatedRequest['delete_item_ids'],
+                    items: $validatedRequest['items'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(AssetPurchase $assetPurchase)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $assetPurchase);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->assetPurchaseActions->delete($assetPurchase);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/AssetSaleController.php b/api/app/Http/Controllers/AssetSaleController.php
new file mode 100644
index 000000000..750a2009e
--- /dev/null
+++ b/api/app/Http/Controllers/AssetSaleController.php
@@ -0,0 +1,233 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\AssetSale\AssetSaleActions;
+use App\DTOs\AssetSaleCreateDTO;
+use App\DTOs\AssetSaleUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\AssetSale\AssetSaleStoreRequest;
+use App\Http\Requests\AssetSale\AssetSaleUpdateRequest;
+use App\Http\Resources\AssetSaleResource;
+use App\Models\AssetSale;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class AssetSaleController extends BaseController
+{
+    private $assetSaleActions;
+
+    public function __construct(AssetSaleActions $assetSaleActions)
+    {
+        parent::__construct();
+
+        $this->assetSaleActions = $assetSaleActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', AssetSale::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'date'],
+            'end_date' => ['nullable', 'date', 'after_or_equal:start_date'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetSaleActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(limit: $validatedRequest['get']['limit']);
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return AssetSaleResource::collection($result);
+        }
+    }
+
+    public function read(AssetSale $assetSale)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $assetSale);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetSaleActions->read($assetSale);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new AssetSaleResource($result);
+        }
+    }
+
+    public function store(AssetSaleStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->assetSaleActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new AssetSaleCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                dueDays: $validatedRequest['due_days'],
+                customerId: $validatedRequest['customer_id'],
+                remarks: $validatedRequest['remarks'],
+                isPosted: $validatedRequest['is_posted'],
+                rounding: (string) $validatedRequest['rounding'],
+                items: $validatedRequest['items'],
+            );
+
+            $result = $this->assetSaleActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(AssetSale $assetSale, AssetSaleUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->assetSaleActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $assetSale->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->assetSaleActions->update(
+                assetSale: $assetSale,
+                data: new AssetSaleUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    branchId: $validatedRequest['branch_id'],
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    dueDays: $validatedRequest['due_days'],
+                    customerId: $validatedRequest['customer_id'],
+                    remarks: $validatedRequest['remarks'],
+                    isPosted: $validatedRequest['is_posted'],
+                    rounding: (string) $validatedRequest['rounding'],
+                    deleteItemIds: $validatedRequest['delete_item_ids'],
+                    items: $validatedRequest['items'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(AssetSale $assetSale)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $assetSale);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->assetSaleActions->delete($assetSale);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/AssetUnitController.php b/api/app/Http/Controllers/AssetUnitController.php
new file mode 100644
index 000000000..0c0974e25
--- /dev/null
+++ b/api/app/Http/Controllers/AssetUnitController.php
@@ -0,0 +1,209 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\AssetUnit\AssetUnitActions;
+use App\DTOs\AssetUnitCreateDTO;
+use App\DTOs\AssetUnitUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\AssetUnit\AssetUnitStoreRequest;
+use App\Http\Requests\AssetUnit\AssetUnitUpdateRequest;
+use App\Http\Resources\AssetUnitResource;
+use App\Models\AssetUnit;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class AssetUnitController extends BaseController
+{
+    public function __construct(
+        private readonly AssetUnitActions $assetUnitActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', AssetUnit::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('asset_units', $request->company_id)],
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetUnitActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : AssetUnitResource::collection($result);
+    }
+
+    public function read(AssetUnit $assetUnit)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $assetUnit);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->assetUnitActions->read($assetUnit);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new AssetUnitResource($result);
+    }
+
+    public function store(AssetUnitStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->assetUnitActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->assetUnitActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->assetUnitActions->create(
+                new AssetUnitCreateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    description: $validatedRequest['description'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(AssetUnit $assetUnit, AssetUnitUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->assetUnitActions->isUniqueCode(
+                    $assetUnit->company_id,
+                    $validatedRequest['code'],
+                    $assetUnit->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->assetUnitActions->isUniqueName(
+                $assetUnit->company_id,
+                $validatedRequest['name'],
+                $assetUnit->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->assetUnitActions->update(
+                assetUnit: $assetUnit,
+                data: new AssetUnitUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    description: $validatedRequest['description'],
+                ),
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(AssetUnit $assetUnit)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $assetUnit);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->assetUnitActions->delete($assetUnit);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/BranchController.php b/api/app/Http/Controllers/BranchController.php
index c8c9d39c5..e420ec440 100644
--- a/api/app/Http/Controllers/BranchController.php
+++ b/api/app/Http/Controllers/BranchController.php
@@ -3,11 +3,23 @@
 namespace App\Http\Controllers;
 
 use App\Actions\Branch\BranchActions;
-use App\Http\Requests\BranchRequest;
+use App\DTOs\BranchCreateDTO;
+use App\DTOs\BranchUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Branch\BranchStoreRequest;
+use App\Http\Requests\Branch\BranchUpdateRequest;
 use App\Http\Resources\BranchResource;
 use App\Models\Branch;
-use App\Models\Company;
+use App\Rules\IsValidCompany;
 use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rules\Enum;
 
 class BranchController extends BaseController
 {
@@ -20,76 +32,73 @@ public function __construct(BranchActions $branchActions)
         $this->branchActions = $branchActions;
     }
 
-    public function store(BranchRequest $branchRequest)
+    public function readAny(Request $request)
     {
-        $request = $branchRequest->validated();
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', Branch::class);
 
-        $company_id = $request['company_id'];
+        if ($request->filled('company_id')) $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
 
-        $code = $request['code'];
-        if ($code == config('dcslab.KEYWORDS.AUTO')) {
-            do {
-                $code = $this->branchActions->generateUniqueCode();
-            } while (! $this->branchActions->isUniqueCode($code, $company_id));
-        } else {
-            if (! $this->branchActions->isUniqueCode($code, $company_id)) {
-                return response()->error([
-                    'code' => [trans('rules.unique_code')],
-                ], 422);
-            }
-        }
-
-        $branchArr = [
-            'company_id' => $company_id,
-            'code' => $code,
-            'name' => $request['name'],
-            'address' => $request['address'],
-            'city' => $request['city'],
-            'contact' => $request['contact'],
-            'is_main' => $request['is_main'],
-            'remarks' => $request['remarks'],
-            'status' => $request['status'],
-        ];
-
-        $result = null;
-        $errorMsg = '';
+        if ($request->filled('include_id')) $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
 
-        try {
-            if ($branchArr['is_main']) {
-                $this->branchActions->resetMainBranch(companyId: $company_id);
-            }
-
-            $result = $this->branchActions->create($branchArr);
-        } catch (Exception $e) {
-            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        if ($request->filled('status')) {
+            $request->merge(['status' => RecordStatusEnum::isValid($request->status) ? RecordStatusEnum::resolveToEnum($request->status)->value : -1]);
         }
 
-        return is_null($result) ? response()->error($errorMsg) : response()->success();
-    }
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
 
-    public function readAny(BranchRequest $branchRequest)
-    {
-        $request = $branchRequest->validated();
-
-        $search = $request['search'];
-        $paginate = $request['paginate'];
-        $page = array_key_exists('page', $request) ? abs($request['page']) : 1;
-        $perPage = array_key_exists('per_page', $request) ? abs($request['per_page']) : 10;
-        $useCache = array_key_exists('refresh', $request) ? boolval($request['refresh']) : true;
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'is_main' => ['nullable', 'boolean'],
+            'status' => ['nullable', new Enum(RecordStatusEnum::class)],
+            'include_id' => ['nullable', 'integer', 'exists:branches,id'],
 
-        $companyId = $request['company_id'];
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
 
         $result = null;
         $errorMsg = '';
 
         try {
             $result = $this->branchActions->readAny(
-                companyId: $companyId,
-                search: $search,
-                paginate: $paginate,
-                page: $page,
-                perPage: $perPage,
-                useCache: $useCache
+                withTrashed: $validatedRequest['with_trashed'],
+
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+                isMain: $validatedRequest['is_main'] ?? null,
+                status: $validatedRequest['status'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
             );
         } catch (Exception $e) {
             $errorMsg = app()->environment('production') ? '' : $e->getMessage();
@@ -98,15 +107,14 @@ public function readAny(BranchRequest $branchRequest)
         if (is_null($result)) {
             return response()->error($errorMsg);
         } else {
-            $response = BranchResource::collection($result);
-
-            return $response;
+            return BranchResource::collection($result);
         }
     }
 
-    public function read(Branch $branch, BranchRequest $branchRequest)
+    public function read(Branch $branch)
     {
-        $request = $branchRequest->validated();
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $branch);
 
         $result = null;
         $errorMsg = '';
@@ -120,111 +128,95 @@ public function read(Branch $branch, BranchRequest $branchRequest)
         if (is_null($result)) {
             return response()->error($errorMsg);
         } else {
-            $response = new BranchResource($result);
-
-            return $response;
+            return new BranchResource($result);
         }
     }
 
-    public function getBranchByCompany(Company $company)
+    public function store(BranchStoreRequest $request)
     {
-        $result = null;
-        $errorMsg = '';
+        $validatedRequest = $request->validated();
 
-        try {
-            $result = $this->branchActions->getBranchByCompany(company: $company);
-        } catch (Exception $e) {
-            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
-        }
-
-        if (is_null($result)) {
-            return response()->error($errorMsg);
-        } else {
-            $response = BranchResource::collection($result);
-
-            return $response;
-        }
-    }
-
-    public function getMainBranchByCompany(Company $company)
-    {
         $result = null;
         $errorMsg = '';
 
         try {
-            $result = $this->branchActions->getMainBranchByCompany(company: $company);
+            DB::beginTransaction();
+
+            $dto = new BranchCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                address: $validatedRequest['address'],
+                city: $validatedRequest['city'],
+                contact: $validatedRequest['contact'],
+                isMain: $validatedRequest['is_main'],
+                remarks: $validatedRequest['remarks'],
+                status: $validatedRequest['status'],
+            );
+            $result = $this->branchActions->create($dto);
+
+            DB::commit();
         } catch (Exception $e) {
+            DB::rollBack();
             $errorMsg = app()->environment('production') ? '' : $e->getMessage();
         }
 
-        if (is_null($result)) {
-            return response()->error($errorMsg);
-        } else {
-            return $result;
-        }
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
     }
 
-    public function update(Branch $branch, BranchRequest $branchRequest)
+    public function update(Branch $branch, BranchUpdateRequest $request)
     {
-        $request = $branchRequest->validated();
-
-        $company_id = $request['company_id'];
-
-        $code = $request['code'];
-        if ($code == config('dcslab.KEYWORDS.AUTO')) {
-            do {
-                $code = $this->branchActions->generateUniqueCode();
-            } while (! $this->branchActions->isUniqueCode($code, $company_id, $branch->id));
-        } else {
-            if (! $this->branchActions->isUniqueCode($code, $company_id, $branch->id)) {
-                return response()->error([
-                    'code' => [trans('rules.unique_code')],
-                ], 422);
-            }
-        }
-
-        $branchArr = [
-            'code' => $code,
-            'name' => $request['name'],
-            'address' => $request['address'],
-            'city' => $request['city'],
-            'contact' => $request['contact'],
-            'is_main' => $request['is_main'],
-            'remarks' => $request['remarks'],
-            'status' => $request['status'],
-        ];
+        $validatedRequest = $request->validated();
 
         $result = null;
         $errorMsg = '';
 
         try {
-            if ($branchArr['is_main']) {
-                $this->branchActions->resetMainBranch(companyId: $company_id);
-            }
+            DB::beginTransaction();
 
             $result = $this->branchActions->update(
-                $branch,
-                $branchArr
+                branch: $branch,
+                data: new BranchUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    address: $validatedRequest['address'],
+                    city: $validatedRequest['city'],
+                    contact: $validatedRequest['contact'],
+                    isMain: $validatedRequest['is_main'],
+                    remarks: $validatedRequest['remarks'],
+                    status: $validatedRequest['status'],
+                )
             );
+
+            DB::commit();
         } catch (Exception $e) {
+            DB::rollBack();
             $errorMsg = app()->environment('production') ? '' : $e->getMessage();
         }
 
         return is_null($result) ? response()->error($errorMsg) : response()->success();
     }
 
-    public function delete(Branch $branch, BranchRequest $branchRequest)
+    public function delete(Branch $branch)
     {
-        if ($branch->is_main) {
-            return response()->error(trans('rules.branch.delete_main_branch'), 422);
-        }
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $branch);
 
         $result = false;
         $errorMsg = '';
 
         try {
+            if ($this->branchActions->isMain($branch)) {
+                return response()->error(trans('rules.branch.delete_main_branch'), 422);
+            }
+
+            DB::beginTransaction();
+
             $result = $this->branchActions->delete($branch);
+
+            DB::commit();
         } catch (Exception $e) {
+            DB::rollBack();
             $errorMsg = app()->environment('production') ? '' : $e->getMessage();
         }
 
diff --git a/api/app/Http/Controllers/BrandController.php b/api/app/Http/Controllers/BrandController.php
new file mode 100644
index 000000000..98ec9ff71
--- /dev/null
+++ b/api/app/Http/Controllers/BrandController.php
@@ -0,0 +1,222 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Brand\BrandActions;
+use App\DTOs\BrandCreateDTO;
+use App\DTOs\BrandUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Brand\BrandStoreRequest;
+use App\Http\Requests\Brand\BrandUpdateRequest;
+use App\Http\Resources\BrandResource;
+use App\Models\Brand;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class BrandController extends BaseController
+{
+    private $brandActions;
+
+    public function __construct(BrandActions $brandActions)
+    {
+        parent::__construct();
+
+        $this->brandActions = $brandActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', Brand::class);
+
+        if ($request->filled('company_id')) $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        if ($request->filled('include_id')) $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'include_id' => ['nullable', 'integer', 'exists:brands,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->brandActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return BrandResource::collection($result);
+        }
+    }
+
+    public function read(Brand $brand)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $brand);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->brandActions->read($brand);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new BrandResource($result);
+        }
+    }
+
+    public function store(BrandStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->brandActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->brandActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new BrandCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+            );
+            $result = $this->brandActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Brand $brand, BrandUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->brandActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], $brand->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->brandActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], $brand->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->brandActions->update(
+                brand: $brand,
+                data: new BrandUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Brand $brand)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $brand);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->brandActions->delete($brand);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/CapitalOpeningController.php b/api/app/Http/Controllers/CapitalOpeningController.php
new file mode 100644
index 000000000..72cec8333
--- /dev/null
+++ b/api/app/Http/Controllers/CapitalOpeningController.php
@@ -0,0 +1,237 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\CapitalOpening\CapitalOpeningActions;
+use App\DTOs\CapitalOpeningCreateDTO;
+use App\DTOs\CapitalOpeningUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\CapitalOpening\CapitalOpeningStoreRequest;
+use App\Http\Requests\CapitalOpening\CapitalOpeningUpdateRequest;
+use App\Http\Resources\CapitalOpeningResource;
+use App\Models\CapitalOpening;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidInvestor;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class CapitalOpeningController extends BaseController
+{
+    public function __construct(
+        private CapitalOpeningActions $capitalOpeningActions
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', CapitalOpening::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'investor_id' => $request->filled('investor_id') ? HashidsHelper::decodeId($request->investor_id) : null,
+            'cash_account_id' => $request->filled('cash_account_id') ? HashidsHelper::decodeId($request->cash_account_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'refresh' => ['required', 'boolean'],
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', 'bail', new IsValidBranch($request->company_id, true)],
+            'search' => ['nullable', 'string'],
+            'investor_id' => ['nullable', 'integer', 'bail', new IsValidInvestor($request->company_id)],
+            'cash_account_id' => ['nullable', 'integer', 'bail', new IsValidCashAccount($request->branch_id)],
+
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->capitalOpeningActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                investorId: $validatedRequest['investor_id'] ?? null,
+                cashAccountId: $validatedRequest['cash_account_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return CapitalOpeningResource::collection($result);
+    }
+
+    public function read(CapitalOpening $capitalOpening)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $capitalOpening);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->capitalOpeningActions->read($capitalOpening);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new CapitalOpeningResource($result);
+    }
+
+    public function store(CapitalOpeningStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->capitalOpeningActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new CapitalOpeningCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                investorId: $validatedRequest['investor_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->capitalOpeningActions->create(
+                data: $dto
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(CapitalOpening $capitalOpening, CapitalOpeningUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->capitalOpeningActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $capitalOpening->id
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->capitalOpeningActions->update(
+                capitalOpening: $capitalOpening,
+                data: new CapitalOpeningUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    branchId: $validatedRequest['branch_id'],
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    investorId: $validatedRequest['investor_id'],
+                    cashAccountId: $validatedRequest['cash_account_id'],
+                    amount: $validatedRequest['amount'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(CapitalOpening $capitalOpening)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $capitalOpening);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->capitalOpeningActions->delete($capitalOpening);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/CapitalTransactionController.php b/api/app/Http/Controllers/CapitalTransactionController.php
new file mode 100644
index 000000000..504b02ecf
--- /dev/null
+++ b/api/app/Http/Controllers/CapitalTransactionController.php
@@ -0,0 +1,249 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\CapitalTransaction\CapitalTransactionActions;
+use App\DTOs\CapitalTransactionCreateDTO;
+use App\DTOs\CapitalTransactionUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Enums\CapitalTransactionTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\CapitalTransaction\CapitalTransactionStoreRequest;
+use App\Http\Requests\CapitalTransaction\CapitalTransactionUpdateRequest;
+use App\Http\Resources\CapitalTransactionResource;
+use App\Models\CapitalTransaction;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidInvestor;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rules\Enum;
+
+class CapitalTransactionController extends BaseController
+{
+    public function __construct(
+        private CapitalTransactionActions $capitalTransactionActions
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', CapitalTransaction::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'investor_id' => $request->filled('investor_id') ? HashidsHelper::decodeId($request->investor_id) : null,
+            'cash_account_id' => $request->filled('cash_account_id') ? HashidsHelper::decodeId($request->cash_account_id) : null,
+            'type' => CapitalTransactionTypeEnum::isValid($request->type) ? CapitalTransactionTypeEnum::resolveToEnum($request->type)->value : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'refresh' => ['required', 'boolean'],
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', 'bail', new IsValidBranch($request->company_id, true)],
+            'search' => ['nullable', 'string'],
+            'investor_id' => ['nullable', 'integer', 'bail', new IsValidInvestor($request->company_id)],
+            'cash_account_id' => ['nullable', 'integer', 'bail', new IsValidCashAccount($request->branch_id)],
+            'type' => ['nullable', new Enum(CapitalTransactionTypeEnum::class)],
+
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->capitalTransactionActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                investorId: $validatedRequest['investor_id'] ?? null,
+                cashAccountId: $validatedRequest['cash_account_id'] ?? null,
+                type: $validatedRequest['type'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return CapitalTransactionResource::collection($result);
+    }
+
+    public function getTypes()
+    {
+        return $this->capitalTransactionActions->getTypes();
+    }
+
+    public function read(CapitalTransaction $capitalTransaction)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $capitalTransaction);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->capitalTransactionActions->read($capitalTransaction);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new CapitalTransactionResource($result);
+    }
+
+    public function store(CapitalTransactionStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->capitalTransactionActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new CapitalTransactionCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                investorId: $validatedRequest['investor_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                type: $validatedRequest['type'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->capitalTransactionActions->create(
+                data: $dto
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(CapitalTransaction $capitalTransaction, CapitalTransactionUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->capitalTransactionActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $capitalTransaction->id
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->capitalTransactionActions->update(
+                capitalTransaction: $capitalTransaction,
+                data: new CapitalTransactionUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    branchId: $validatedRequest['branch_id'],
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    investorId: $validatedRequest['investor_id'],
+                    cashAccountId: $validatedRequest['cash_account_id'],
+                    type: $validatedRequest['type'],
+                    amount: $validatedRequest['amount'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(CapitalTransaction $capitalTransaction)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $capitalTransaction);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->capitalTransactionActions->delete($capitalTransaction);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/CashAccountController.php b/api/app/Http/Controllers/CashAccountController.php
new file mode 100644
index 000000000..16936b23c
--- /dev/null
+++ b/api/app/Http/Controllers/CashAccountController.php
@@ -0,0 +1,240 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\CashAccount\CashAccountActions;
+use App\DTOs\CashAccountCreateDTO;
+use App\DTOs\CashAccountUpdateDTO;
+use App\DTOs\CashAccountWithRemainingBalanceDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\CashAccount\CashAccountStoreRequest;
+use App\Http\Requests\CashAccount\CashAccountUpdateRequest;
+use App\Http\Resources\CashAccountResource;
+use App\Models\CashAccount;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class CashAccountController extends BaseController
+{
+    private $cashAccountActions;
+
+    public function __construct(CashAccountActions $cashAccountActions)
+    {
+        parent::__construct();
+
+        $this->cashAccountActions = $cashAccountActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', CashAccount::class);
+
+        if ($request->filled('company_id')) {
+            $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        }
+        if ($request->filled('branch_id')) {
+            $request->merge(['branch_id' => HashidsHelper::decodeId($request->branch_id)]);
+        }
+        if ($request->filled('include_id')) {
+            $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+        }
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', 'bail', new IsValidBranch($request->company_id, true)],
+            'search' => ['nullable', 'string'],
+
+            'is_bank' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', 'exists:cash_accounts,id'],
+            'with_remaining_balance' => ['nullable', 'array'],
+            'with_remaining_balance.end_date' => ['nullable', 'date'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $withRemainingBalanceDTO = null;
+        if (isset($validatedRequest['with_remaining_balance'])) {
+            $withRemainingBalance = $validatedRequest['with_remaining_balance'];
+
+            $withRemainingBalanceDTO = new CashAccountWithRemainingBalanceDTO(
+                endDate: $withRemainingBalance['end_date'] ?? null,
+            );
+        }
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->cashAccountActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+                isBank: isset($validatedRequest['is_bank']) ? (bool) $validatedRequest['is_bank'] : null,
+                withRemainingBalance: $withRemainingBalanceDTO,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate']) ? new ExecutePaginationDTO(
+                        page: $validatedRequest['paginate']['page'],
+                        perPage: $validatedRequest['paginate']['per_page'],
+                    ) : null,
+                    get: isset($validatedRequest['get']) ? new ExecuteGetDTO(
+                        limit: $validatedRequest['get']['limit'],
+                    ) : null,
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return CashAccountResource::collection($result);
+        }
+    }
+
+    public function read(CashAccount $cashAccount)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $cashAccount);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->cashAccountActions->read($cashAccount);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new CashAccountResource($result);
+        }
+    }
+
+    public function store(CashAccountStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] != config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->cashAccountActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->cashAccountActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new CashAccountCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                isBank: $validatedRequest['is_bank'],
+                isActive: $validatedRequest['is_active'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->cashAccountActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(CashAccountUpdateRequest $request, CashAccount $cashAccount)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] != config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->cashAccountActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], $cashAccount->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->cashAccountActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], $cashAccount->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->cashAccountActions->update(
+                cashAccount: $cashAccount,
+                data: new CashAccountUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    isBank: $validatedRequest['is_bank'],
+                    isActive: $validatedRequest['is_active'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(CashAccount $cashAccount)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $cashAccount);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->cashAccountActions->delete($cashAccount);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/CashTransferController.php b/api/app/Http/Controllers/CashTransferController.php
new file mode 100644
index 000000000..24792e6f1
--- /dev/null
+++ b/api/app/Http/Controllers/CashTransferController.php
@@ -0,0 +1,227 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\CashTransfer\CashTransferActions;
+use App\DTOs\CashTransferCreateDTO;
+use App\DTOs\CashTransferUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\CashTransfer\CashTransferStoreRequest;
+use App\Http\Requests\CashTransfer\CashTransferUpdateRequest;
+use App\Http\Resources\CashTransferResource;
+use App\Models\CashTransfer;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class CashTransferController extends BaseController
+{
+    public function __construct(
+        private CashTransferActions $cashTransferActions
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', CashTransfer::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'refresh' => ['required', 'boolean'],
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', 'bail', new IsValidBranch($request->company_id, true)],
+            'search' => ['nullable', 'string'],
+
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->cashTransferActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return CashTransferResource::collection($result);
+    }
+
+    public function read(CashTransfer $cashTransfer)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $cashTransfer);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->cashTransferActions->read($cashTransfer);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new CashTransferResource($result);
+    }
+
+    public function store(CashTransferStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->cashTransferActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new CashTransferCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                sourceCashAccountId: $validatedRequest['source_cash_account_id'],
+                destinationCashAccountId: $validatedRequest['destination_cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->cashTransferActions->create(
+                data: $dto
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(CashTransfer $cashTransfer, CashTransferUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->cashTransferActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $cashTransfer->id
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->cashTransferActions->update(
+                cashTransfer: $cashTransfer,
+                data: new CashTransferUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    branchId: $validatedRequest['branch_id'],
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    sourceCashAccountId: $validatedRequest['source_cash_account_id'],
+                    destinationCashAccountId: $validatedRequest['destination_cash_account_id'],
+                    amount: $validatedRequest['amount'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(CashTransfer $cashTransfer)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $cashTransfer);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->cashTransferActions->delete($cashTransfer);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ChartOfAccountController.php b/api/app/Http/Controllers/ChartOfAccountController.php
new file mode 100644
index 000000000..7d2df3a71
--- /dev/null
+++ b/api/app/Http/Controllers/ChartOfAccountController.php
@@ -0,0 +1,255 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ChartOfAccount\ChartOfAccountActions;
+use App\DTOs\ChartOfAccountCreateDTO;
+use App\DTOs\ChartOfAccountUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Enums\ChartOfAccountAccountTypeEnum;
+use App\Enums\ChartOfAccountNormalBalanceEnum;
+use App\Enums\ChartOfAccountScopeEnum;
+use App\Enums\ChartOfAccountSystemKeyEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\ChartOfAccount\ChartOfAccountStoreRequest;
+use App\Http\Requests\ChartOfAccount\ChartOfAccountUpdateRequest;
+use App\Http\Resources\ChartOfAccountResource;
+use App\Models\ChartOfAccount;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rules\Enum;
+
+class ChartOfAccountController extends BaseController
+{
+    public function __construct(
+        private readonly ChartOfAccountActions $chartOfAccountActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', ChartOfAccount::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'parent_id' => $request->filled('parent_id') ? HashidsHelper::decodeId($request->parent_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+            'scope' => ChartOfAccountScopeEnum::isValid($request->scope) ? ChartOfAccountScopeEnum::resolveToEnum($request->scope)->value : null,
+            'system_key' => ChartOfAccountSystemKeyEnum::isValid($request->system_key) ? ChartOfAccountSystemKeyEnum::resolveToEnum($request->system_key)->value : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+
+            'parent_id' => ['nullable', 'integer', new ExistsForCompany('chart_of_accounts', $request->company_id)],
+            'has_parent' => ['nullable', 'boolean'],
+            'has_children' => ['nullable', 'boolean'],
+            'scope' => ['nullable', new Enum(ChartOfAccountScopeEnum::class)],
+            'system_key' => ['nullable', new Enum(ChartOfAccountSystemKeyEnum::class)],
+            'account_type' => ['nullable', new Enum(ChartOfAccountAccountTypeEnum::class)],
+            'normal_balance' => ['nullable', new Enum(ChartOfAccountNormalBalanceEnum::class)],
+            'is_group' => ['nullable', 'boolean'],
+            'is_active' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('chart_of_accounts', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->chartOfAccountActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                parentId: $validatedRequest['parent_id'] ?? null,
+                hasParent: $validatedRequest['has_parent'] ?? null,
+                hasChildren: $validatedRequest['has_children'] ?? null,
+                scope: $validatedRequest['scope'] ?? null,
+                systemKey: $validatedRequest['system_key'] ?? null,
+                accountType: $validatedRequest['account_type'] ?? null,
+                normalBalance: $validatedRequest['normal_balance'] ?? null,
+                isGroup: $validatedRequest['is_group'] ?? null,
+                isActive: $validatedRequest['is_active'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : ChartOfAccountResource::collection($result);
+    }
+
+    public function read(ChartOfAccount $chartOfAccount)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $chartOfAccount);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->chartOfAccountActions->read($chartOfAccount);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new ChartOfAccountResource($result);
+    }
+
+    public function store(ChartOfAccountStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->chartOfAccountActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->chartOfAccountActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new ChartOfAccountCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                scope: $validatedRequest['scope'],
+                systemKey: $validatedRequest['system_key'],
+                parentId: $validatedRequest['parent_id'],
+                sourceType: $validatedRequest['source_type'],
+                sourceId: $validatedRequest['source_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                normalBalance: $validatedRequest['normal_balance'],
+                isGroup: $validatedRequest['is_group'],
+                isActive: $validatedRequest['is_active'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->chartOfAccountActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(ChartOfAccount $chartOfAccount, ChartOfAccountUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->chartOfAccountActions->isUniqueCode(
+                $chartOfAccount->company_id,
+                $validatedRequest['code'],
+                $chartOfAccount->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->chartOfAccountActions->isUniqueName(
+                $chartOfAccount->company_id,
+                $validatedRequest['name'],
+                $chartOfAccount->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->chartOfAccountActions->update(
+                chartOfAccount: $chartOfAccount,
+                data: new ChartOfAccountUpdateDTO(
+                    parentId: $validatedRequest['parent_id'],
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    normalBalance: $validatedRequest['normal_balance'],
+                    isGroup: $validatedRequest['is_group'],
+                    isActive: $validatedRequest['is_active'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(ChartOfAccount $chartOfAccount)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $chartOfAccount);
+
+        if ($this->chartOfAccountActions->hasChildren($chartOfAccount)) {
+            return response()->error([
+                'errors' => [
+                    'chart_of_account' => [trans('rules.chart_of_account.cannot_delete_with_children')],
+                ],
+                'message' => trans('rules.chart_of_account.cannot_delete_with_children'),
+            ], 422);
+        }
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->chartOfAccountActions->delete($chartOfAccount);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/CommonController.php b/api/app/Http/Controllers/CommonController.php
index 2b758e258..4cc48f9ba 100644
--- a/api/app/Http/Controllers/CommonController.php
+++ b/api/app/Http/Controllers/CommonController.php
@@ -2,7 +2,10 @@
 
 namespace App\Http\Controllers;
 
-use App\Enums\RecordStatus;
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Enums\RoundingTypeEnum;
+use Illuminate\Http\Request;
 
 class CommonController extends BaseController
 {
@@ -19,11 +22,37 @@ public function getCountries()
         ];
     }
 
-    public function getStatus()
+    public function getStatus(Request $request)
+    {
+        $statuses = [
+            ['name' => 'components.dropdown.values.statusDDL.active', 'code' => RecordStatusEnum::ACTIVE->name],
+            ['name' => 'components.dropdown.values.statusDDL.inactive', 'code' => RecordStatusEnum::INACTIVE->name],
+        ];
+
+        if ($request->boolean('show_deleted', true)) {
+            $statuses[] = ['name' => 'components.dropdown.values.statusDDL.deleted', 'code' => RecordStatusEnum::DELETED->name];
+        }
+
+        return $statuses;
+    }
+
+    public function getPaymentTermTypes()
+    {
+        return [
+            ['name' => 'components.dropdown.values.paymentTermTypeDDL.pia', 'code' => PaymentTermTypeEnum::PAYMENT_IN_ADVANCE->name],
+            ['name' => 'components.dropdown.values.paymentTermTypeDDL.net', 'code' => PaymentTermTypeEnum::X_DAYS_AFTER_INVOICE->name],
+            ['name' => 'components.dropdown.values.paymentTermTypeDDL.eom', 'code' => PaymentTermTypeEnum::END_OF_MONTH->name],
+            ['name' => 'components.dropdown.values.paymentTermTypeDDL.cod', 'code' => PaymentTermTypeEnum::CASH_ON_DELIVERY->name],
+            ['name' => 'components.dropdown.values.paymentTermTypeDDL.cnd', 'code' => PaymentTermTypeEnum::CASH_ON_NEXT_DELIVERY->name],
+            ['name' => 'components.dropdown.values.paymentTermTypeDDL.cbs', 'code' => PaymentTermTypeEnum::CASH_BEFORE_SHIPMENT->name],
+        ];
+    }
+
+    public function getRoundingTypes()
     {
         return [
-            ['name' => 'components.dropdown.values.statusDDL.active', 'code' => RecordStatus::ACTIVE->name],
-            ['name' => 'components.dropdown.values.statusDDL.inactive', 'code' => RecordStatus::INACTIVE->name],
+            ['name' => 'components.dropdown.values.roundingTypeDDL.up', 'code' => RoundingTypeEnum::UP->name],
+            ['name' => 'components.dropdown.values.roundingTypeDDL.down', 'code' => RoundingTypeEnum::DOWN->name],
         ];
     }
 }
diff --git a/api/app/Http/Controllers/CompanyController.php b/api/app/Http/Controllers/CompanyController.php
index f76cfec8b..87e57b0d3 100644
--- a/api/app/Http/Controllers/CompanyController.php
+++ b/api/app/Http/Controllers/CompanyController.php
@@ -3,12 +3,22 @@
 namespace App\Http\Controllers;
 
 use App\Actions\Company\CompanyActions;
-use App\Http\Requests\CompanyRequest;
+use App\DTOs\CompanyCreateDTO;
+use App\DTOs\CompanyUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Company\CompanyStoreRequest;
+use App\Http\Requests\Company\CompanyUpdateRequest;
 use App\Http\Resources\CompanyResource;
 use App\Models\Company;
 use Exception;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rules\Enum;
 
 class CompanyController extends BaseController
 {
@@ -21,73 +31,70 @@ public function __construct(CompanyActions $companyActions)
         $this->companyActions = $companyActions;
     }
 
-    public function store(CompanyRequest $companyRequest)
+    public function readAny(Request $request)
     {
-        $request = $companyRequest->validated();
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', Company::class);
 
-        $user = Auth::user();
+        if ($request->filled('include_id')) $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
 
-        $code = $request['code'];
-        if ($code == config('dcslab.KEYWORDS.AUTO')) {
-            do {
-                $code = $this->companyActions->generateUniqueCode();
-            } while (! $this->companyActions->isUniqueCode($code, $user->id));
-        } else {
-            if (! $this->companyActions->isUniqueCode($code, $user->id)) {
-                return response()->error([
-                    'code' => [trans('rules.unique_code')],
-                ], 422);
-            }
-        }
-
-        $companyArr = [
-            'user_id' => $user->id,
-            'code' => $code,
-            'name' => $request['name'],
-            'address' => $request['address'],
-            'default' => $request['default'],
-            'status' => $request['status'],
-
-        ];
-
-        $result = null;
-        $errorMsg = '';
-
-        try {
-            if ($companyArr['default']) {
-                $this->companyActions->resetDefaultCompany($user);
-            }
-
-            $result = $this->companyActions->create($companyArr);
-        } catch (Exception $e) {
-            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        if ($request->filled('status')) {
+            $request->merge(['status' => RecordStatusEnum::isValid($request->status) ? RecordStatusEnum::resolveToEnum($request->status)->value : -1]);
         }
 
-        return is_null($result) ? response()->error($errorMsg) : response()->success();
-    }
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
 
-    public function readAny(CompanyRequest $companyRequest)
-    {
-        $userId = Auth::id();
-        $request = $companyRequest->validated();
+            'search' => ['nullable', 'string'],
+            'default' => ['nullable', 'boolean'],
+            'status' => ['nullable', new Enum(RecordStatusEnum::class)],
+            'include_id' => ['nullable', 'integer', 'exists:companies,id'],
 
-        $search = $request['search'];
-        $paginate = $request['paginate'];
-        $page = array_key_exists('page', $request) ? abs($request['page']) : 1;
-        $perPage = array_key_exists('per_page', $request) ? abs($request['per_page']) : 10;
-        $useCache = array_key_exists('refresh', $request) ? boolval($request['refresh']) : true;
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
 
         $result = null;
         $errorMsg = '';
 
         try {
             $result = $this->companyActions->readAny(
-                userId: $userId,
-                search: $search,
-                paginate: $paginate,
-                page: $page,
-                perPage: $perPage,
-                useCache: $useCache
+                user: Auth::user(),
+                withTrashed: $validatedRequest['with_trashed'],
+
+                search: $validatedRequest['search'] ?? null,
+                default: $validatedRequest['default'] ?? null,
+                status: $validatedRequest['status'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
             );
         } catch (Exception $e) {
             $errorMsg = app()->environment('production') ? '' : $e->getMessage();
@@ -96,15 +103,14 @@ public function readAny(CompanyRequest $companyRequest)
         if (is_null($result)) {
             return response()->error($errorMsg);
         } else {
-            $response = CompanyResource::collection($result);
-
-            return $response;
+            return CompanyResource::collection($result);
         }
     }
 
-    public function read(Company $company, CompanyRequest $companyRequest)
+    public function read(Company $company)
     {
-        $request = $companyRequest->validated();
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $company);
 
         $result = null;
         $errorMsg = '';
@@ -118,85 +124,73 @@ public function read(Company $company, CompanyRequest $companyRequest)
         if (is_null($result)) {
             return response()->error($errorMsg);
         } else {
-            $response = new CompanyResource($result);
-
-            return $response;
+            return new CompanyResource($result);
         }
     }
 
-    public function getAllActiveCompany(Request $request)
+    public function store(CompanyStoreRequest $request)
     {
-        $userId = $request->user()->id;
-
-        $with = $request->has('with') ? explode(',', $request['with']) : [];
+        $validatedRequest = $request->validated();
 
-        $result = $this->companyActions->getAllActiveCompany($userId, $with);
+        $result = null;
+        $errorMsg = '';
 
-        if (is_null($result)) {
-            return response()->error();
-        } else {
-            $response = CompanyResource::collection($result);
+        try {
+            DB::beginTransaction();
+
+            $dto = new CompanyCreateDTO(
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                address: $validatedRequest['address'],
+                default: $validatedRequest['default'],
+                status: $validatedRequest['status'],
+            );
+            $result = $this->companyActions->create(
+                user: Auth::user(),
+                data: $dto
+            );
 
-            return $response;
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
         }
-    }
 
-    public function getDefaultCompany()
-    {
-        $user = Auth::user();
-        $defaultCompany = $this->companyActions->getDefaultCompany($user);
-
-        return $defaultCompany->hId;
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
     }
 
-    public function update(Company $company, CompanyRequest $companyRequest)
+    public function update(Company $company, CompanyUpdateRequest $request)
     {
-        $request = $companyRequest->validated();
-
-        $user = Auth::user();
-
-        $code = $request['code'];
-        if ($code == config('dcslab.KEYWORDS.AUTO')) {
-            do {
-                $code = $this->companyActions->generateUniqueCode();
-            } while (! $this->companyActions->isUniqueCode($code, $user->id, $company->id));
-        } else {
-            if (! $this->companyActions->isUniqueCode($code, $user->id, $company->id)) {
-                return response()->error([
-                    'code' => [trans('rules.unique_code')],
-                ], 422);
-            }
-        }
-
-        $companyArr = [
-            'code' => $code,
-            'name' => $request['name'],
-            'address' => $request['address'],
-            'default' => $request['default'],
-            'status' => $request['status'],
-            'user_id' => $user->id,
-        ];
+        $validatedRequest = $request->validated();
 
         $result = null;
         $errorMsg = '';
 
         try {
-            if ($companyArr['default']) {
-                $this->companyActions->resetDefaultCompany($user);
-            }
+            DB::beginTransaction();
 
             $result = $this->companyActions->update(
-                $company,
-                $companyArr
+                user: Auth::user(),
+                company: $company,
+                data: new CompanyUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    address: $validatedRequest['address'],
+                    default: $validatedRequest['default'],
+                    status: $validatedRequest['status'],
+                )
             );
+
+            DB::commit();
         } catch (Exception $e) {
+            DB::rollBack();
             $errorMsg = app()->environment('production') ? '' : $e->getMessage();
         }
 
         return is_null($result) ? response()->error($errorMsg) : response()->success();
     }
 
-    public function delete(Company $company, CompanyRequest $companyRequest)
+    public function delete(Company $company)
     {
         //Throw Error
         //throw New \Exception('Test Exception From Controller');
@@ -210,16 +204,24 @@ public function delete(Company $company, CompanyRequest $companyRequest)
         //Custom Validation With Multiple Error (HttpStatus 422)
         //return response()->error(['name' => ['Custom Validation With Multiple Error'], 'address' => ['Custom Validation With Multiple Error']], 422);
 
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $company);
+
         $result = false;
         $errorMsg = '';
 
         try {
-            if ($this->companyActions->isDefaultCompany($company)) {
+            if ($this->companyActions->isDefault($company)) {
                 return response()->error(trans('rules.company.delete_default_company'), 422);
             }
 
+            DB::beginTransaction();
+
             $result = $this->companyActions->delete($company);
+
+            DB::commit();
         } catch (Exception $e) {
+            DB::rollBack();
             $errorMsg = app()->environment('production') ? '' : $e->getMessage();
         }
 
diff --git a/api/app/Http/Controllers/Controller.php b/api/app/Http/Controllers/Controller.php
index 8677cd5ca..af473395b 100644
--- a/api/app/Http/Controllers/Controller.php
+++ b/api/app/Http/Controllers/Controller.php
@@ -2,7 +2,11 @@
 
 namespace App\Http\Controllers;
 
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+
 abstract class Controller
 {
-    //
+    use AuthorizesRequests;
+    use ValidatesRequests;
 }
diff --git a/api/app/Http/Controllers/CustomerAddressController.php b/api/app/Http/Controllers/CustomerAddressController.php
new file mode 100644
index 000000000..8de320f66
--- /dev/null
+++ b/api/app/Http/Controllers/CustomerAddressController.php
@@ -0,0 +1,208 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\CustomerAddress\CustomerAddressActions;
+use App\DTOs\CustomerAddressCreateDTO;
+use App\DTOs\CustomerAddressUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\CustomerAddress\CustomerAddressStoreRequest;
+use App\Http\Requests\CustomerAddress\CustomerAddressUpdateRequest;
+use App\Http\Resources\CustomerAddressResource;
+use App\Models\CustomerAddress;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class CustomerAddressController extends BaseController
+{
+    private $customerAddressActions;
+
+    public function __construct(CustomerAddressActions $customerAddressActions)
+    {
+        parent::__construct();
+
+        $this->customerAddressActions = $customerAddressActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', CustomerAddress::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'include_id' => ['nullable', 'integer', 'exists:customer_addresses,id'],
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->customerAddressActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                customerId: null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return CustomerAddressResource::collection($result);
+    }
+
+    public function read(CustomerAddress $customerAddress)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $customerAddress);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->customerAddressActions->read($customerAddress);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new CustomerAddressResource($result);
+    }
+
+    public function store(CustomerAddressStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueAddress = $this->customerAddressActions->isUniqueAddress(
+                companyId: $validatedRequest['company_id'],
+                customerId: $validatedRequest['customer_id'],
+                address: $validatedRequest['address'],
+                exceptId: null
+            );
+
+            if (! $isUniqueAddress) return response()->error(['address' => [trans('rules.unique_address')]], 422);
+
+            $dto = new CustomerAddressCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                customerId: $validatedRequest['customer_id'],
+                address: $validatedRequest['address'],
+                city: $validatedRequest['city'],
+                contact: $validatedRequest['contact'],
+                isMain: $validatedRequest['is_main'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->customerAddressActions->create($dto);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(CustomerAddress $customerAddress, CustomerAddressUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueAddress = $this->customerAddressActions->isUniqueAddress(
+                companyId: $validatedRequest['company_id'],
+                customerId: $validatedRequest['customer_id'],
+                address: $validatedRequest['address'],
+                exceptId: $customerAddress->id
+            );
+
+            if (! $isUniqueAddress) return response()->error(['address' => [trans('rules.unique_address')]], 422);
+
+            $result = $this->customerAddressActions->update(
+                customerAddress: $customerAddress,
+                data: new CustomerAddressUpdateDTO(
+                    address: $validatedRequest['address'],
+                    city: $validatedRequest['city'],
+                    contact: $validatedRequest['contact'],
+                    isMain: $validatedRequest['is_main'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(CustomerAddress $customerAddress)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $customerAddress);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            $result = $this->customerAddressActions->delete($customerAddress);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/CustomerController.php b/api/app/Http/Controllers/CustomerController.php
new file mode 100644
index 000000000..d2999717e
--- /dev/null
+++ b/api/app/Http/Controllers/CustomerController.php
@@ -0,0 +1,292 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Customer\CustomerActions;
+use App\DTOs\CustomerCreateDTO;
+use App\DTOs\CustomerUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Customer\CustomerStoreRequest;
+use App\Http\Requests\Customer\CustomerUpdateRequest;
+use App\Http\Resources\CustomerResource;
+use App\Models\Customer;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class CustomerController extends BaseController
+{
+    private $customerActions;
+
+    public function __construct(CustomerActions $customerActions)
+    {
+        parent::__construct();
+
+        $this->customerActions = $customerActions;
+    }
+
+    public function store(CustomerStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->customerActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null
+                );
+                if (! $isUniqueCode) {
+                    return response()->error(['code' => [trans('rules.unique_code')]], 422);
+                }
+            }
+
+            $isUniqueName = $this->customerActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null
+            );
+            if (! $isUniqueName) {
+                return response()->error(['name' => [trans('rules.unique_name')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new CustomerCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                groupId: $validatedRequest['group_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                paymentTermType: $validatedRequest['payment_term_type'],
+                paymentTerm: $validatedRequest['payment_term'],
+                taxableEnterprise: $validatedRequest['taxable_enterprise'],
+                taxId: $validatedRequest['tax_id'],
+                isMember: $validatedRequest['is_member'],
+                maxOpenInvoice: $validatedRequest['max_open_invoice'],
+                maxInvoiceAge: $validatedRequest['max_invoice_age'],
+                maxOutstandingInvoice: $validatedRequest['max_outstanding_invoice'],
+                zone: $validatedRequest['zone'],
+                remarks: $validatedRequest['remarks'],
+                status: $validatedRequest['status'],
+            );
+            $result = $this->customerActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', Customer::class);
+
+        if ($request->filled('company_id')) {
+            $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        }
+        if ($request->filled('group_id')) {
+            $request->merge(['group_id' => HashidsHelper::decodeId($request->group_id)]);
+        }
+        if ($request->filled('include_id')) {
+            $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+        }
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'search' => ['nullable', 'string'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'is_member' => ['nullable', 'boolean'],
+            'group_id' => ['nullable', 'integer', new ExistsForCompany('customer_groups', $request->company_id)],
+            'zone' => ['nullable', 'string'],
+            'max_open_invoice' => ['nullable', 'integer', 'min:0'],
+            'max_outstanding_invoice' => ['nullable', 'numeric', 'min:0'],
+            'max_invoice_age' => ['nullable', 'integer', 'min:0'],
+            'payment_term_type' => ['nullable', 'integer'],
+            'payment_term' => ['nullable', 'integer', 'min:0'],
+            'taxable_enterprise' => ['nullable', 'boolean'],
+            'tax_id' => ['nullable', 'string'],
+            'status' => ['nullable', 'integer'],
+            'include_id' => ['nullable', 'integer', 'exists:customers,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $validatedRequest['search'] = $validatedRequest['search'] ?? null;
+            $validatedRequest['is_member'] = $validatedRequest['is_member'] ?? null;
+            $validatedRequest['group_id'] = $validatedRequest['group_id'] ?? null;
+            $validatedRequest['zone'] = $validatedRequest['zone'] ?? null;
+            $validatedRequest['max_open_invoice'] = $validatedRequest['max_open_invoice'] ?? null;
+            $validatedRequest['max_outstanding_invoice'] = $validatedRequest['max_outstanding_invoice'] ?? null;
+            $validatedRequest['max_invoice_age'] = $validatedRequest['max_invoice_age'] ?? null;
+            $validatedRequest['payment_term_type'] = $validatedRequest['payment_term_type'] ?? null;
+            $validatedRequest['payment_term'] = $validatedRequest['payment_term'] ?? null;
+            $validatedRequest['taxable_enterprise'] = $validatedRequest['taxable_enterprise'] ?? null;
+            $validatedRequest['tax_id'] = $validatedRequest['tax_id'] ?? null;
+            $validatedRequest['status'] = $validatedRequest['status'] ?? null;
+            $validatedRequest['include_id'] = $validatedRequest['include_id'] ?? null;
+
+            $result = $this->customerActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                isMember: $validatedRequest['is_member'],
+                groupId: $validatedRequest['group_id'],
+                zone: $validatedRequest['zone'],
+                maxOpenInvoice: $validatedRequest['max_open_invoice'],
+                maxOutstandingInvoice: $validatedRequest['max_outstanding_invoice'],
+                maxInvoiceAge: $validatedRequest['max_invoice_age'],
+                paymentTermType: $validatedRequest['payment_term_type'],
+                paymentTerm: $validatedRequest['payment_term'],
+                taxableEnterprise: $validatedRequest['taxable_enterprise'],
+                taxId: $validatedRequest['tax_id'],
+                status: $validatedRequest['status'],
+                includeId: $validatedRequest['include_id'],
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate']) ? new ExecutePaginationDTO(
+                        page: $validatedRequest['paginate']['page'],
+                        perPage: $validatedRequest['paginate']['per_page'],
+                    ) : null,
+                    get: isset($validatedRequest['get']) ? new ExecuteGetDTO(
+                        limit: $validatedRequest['get']['limit'],
+                    ) : null,
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return CustomerResource::collection($result);
+        }
+    }
+
+    public function read(Customer $customer)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $customer);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->customerActions->read($customer);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new CustomerResource($result);
+        }
+    }
+
+    public function update(Customer $customer, CustomerUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->customerActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $customer->id
+                );
+                if (! $isUniqueCode) {
+                    return response()->error(['code' => [trans('rules.unique_code')]], 422);
+                }
+            }
+
+            $isUniqueName = $this->customerActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                $customer->id
+            );
+            if (! $isUniqueName) {
+                return response()->error(['name' => [trans('rules.unique_name')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->customerActions->update(
+                customer: $customer,
+                data: new CustomerUpdateDTO(
+                    groupId: $validatedRequest['group_id'],
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    paymentTermType: $validatedRequest['payment_term_type'],
+                    paymentTerm: $validatedRequest['payment_term'],
+                    taxableEnterprise: $validatedRequest['taxable_enterprise'],
+                    taxId: $validatedRequest['tax_id'],
+                    isMember: $validatedRequest['is_member'],
+                    maxOpenInvoice: $validatedRequest['max_open_invoice'],
+                    maxInvoiceAge: $validatedRequest['max_invoice_age'],
+                    maxOutstandingInvoice: $validatedRequest['max_outstanding_invoice'],
+                    zone: $validatedRequest['zone'],
+                    remarks: $validatedRequest['remarks'],
+                    status: $validatedRequest['status'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Customer $customer)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $customer);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->customerActions->delete($customer);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/CustomerGroupController.php b/api/app/Http/Controllers/CustomerGroupController.php
new file mode 100644
index 000000000..ac2a902af
--- /dev/null
+++ b/api/app/Http/Controllers/CustomerGroupController.php
@@ -0,0 +1,242 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\CustomerGroup\CustomerGroupActions;
+use App\DTOs\CustomerGroupCreateDTO;
+use App\DTOs\CustomerGroupUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\CustomerGroup\CustomerGroupStoreRequest;
+use App\Http\Requests\CustomerGroup\CustomerGroupUpdateRequest;
+use App\Http\Resources\CustomerGroupResource;
+use App\Models\CustomerGroup;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class CustomerGroupController extends BaseController
+{
+    private $customerGroupActions;
+
+    public function __construct(CustomerGroupActions $customerGroupActions)
+    {
+        parent::__construct();
+
+        $this->customerGroupActions = $customerGroupActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', CustomerGroup::class);
+
+        if ($request->filled('company_id')) {
+            $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        }
+        if ($request->filled('include_id')) {
+            $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+        }
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'search' => ['nullable', 'string'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'include_id' => ['nullable', 'integer', 'exists:customer_groups,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->customerGroupActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate']) ? new ExecutePaginationDTO(
+                        page: $validatedRequest['paginate']['page'],
+                        perPage: $validatedRequest['paginate']['per_page'],
+                    ) : null,
+                    get: isset($validatedRequest['get']) ? new ExecuteGetDTO(
+                        limit: $validatedRequest['get']['limit'],
+                    ) : null,
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return CustomerGroupResource::collection($result);
+        }
+    }
+
+    public function read(CustomerGroup $customerGroup)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $customerGroup);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->customerGroupActions->read($customerGroup);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new CustomerGroupResource($result);
+        }
+    }
+
+    public function store(CustomerGroupStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->customerGroupActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUnique = $this->customerGroupActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], null,
+            );
+            if (! $isUnique) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new CustomerGroupCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                paymentTermType: $validatedRequest['payment_term_type'],
+                paymentTerm: $validatedRequest['payment_term'],
+                sellAtCost: $validatedRequest['sell_at_cost'],
+                sellingPoint: $validatedRequest['selling_point'],
+                sellingPointMultiple: $validatedRequest['selling_point_multiple'],
+                priceMarkupPercent: $validatedRequest['price_markup_percent'],
+                priceMarkupNominal: $validatedRequest['price_markup_nominal'],
+                priceMarkdownPercent: $validatedRequest['price_markdown_percent'],
+                priceMarkdownNominal: $validatedRequest['price_markdown_nominal'],
+                roundingType: $validatedRequest['rounding_type'],
+                roundingDigit: $validatedRequest['rounding_digit'],
+                maxOpenInvoice: $validatedRequest['max_open_invoice'],
+                maxInvoiceAge: $validatedRequest['max_invoice_age'],
+                maxOutstandingInvoice: $validatedRequest['max_outstanding_invoice'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->customerGroupActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(CustomerGroup $customerGroup, CustomerGroupUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->customerGroupActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], $customerGroup->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUnique = $this->customerGroupActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], $customerGroup->id,
+            );
+            if (! $isUnique) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->customerGroupActions->update(
+                customerGroup: $customerGroup,
+                data: new CustomerGroupUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    paymentTermType: $validatedRequest['payment_term_type'],
+                    paymentTerm: $validatedRequest['payment_term'],
+                    sellAtCost: $validatedRequest['sell_at_cost'],
+                    sellingPoint: $validatedRequest['selling_point'],
+                    sellingPointMultiple: $validatedRequest['selling_point_multiple'],
+                    priceMarkupPercent: $validatedRequest['price_markup_percent'],
+                    priceMarkupNominal: $validatedRequest['price_markup_nominal'],
+                    priceMarkdownPercent: $validatedRequest['price_markdown_percent'],
+                    priceMarkdownNominal: $validatedRequest['price_markdown_nominal'],
+                    roundingType: $validatedRequest['rounding_type'],
+                    roundingDigit: $validatedRequest['rounding_digit'],
+                    maxOpenInvoice: $validatedRequest['max_open_invoice'],
+                    maxInvoiceAge: $validatedRequest['max_invoice_age'],
+                    maxOutstandingInvoice: $validatedRequest['max_outstanding_invoice'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(CustomerGroup $customerGroup)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $customerGroup);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->customerGroupActions->delete($customerGroup);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/DebtCategoryController.php b/api/app/Http/Controllers/DebtCategoryController.php
new file mode 100644
index 000000000..db3a8a48f
--- /dev/null
+++ b/api/app/Http/Controllers/DebtCategoryController.php
@@ -0,0 +1,208 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\DebtCategory\DebtCategoryActions;
+use App\DTOs\DebtCategoryCreateDTO;
+use App\DTOs\DebtCategoryUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\DebtCategory\DebtCategoryStoreRequest;
+use App\Http\Requests\DebtCategory\DebtCategoryUpdateRequest;
+use App\Http\Resources\DebtCategoryResource;
+use App\Models\DebtCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class DebtCategoryController extends BaseController
+{
+    public function __construct(
+        private readonly DebtCategoryActions $debtCategoryActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', DebtCategory::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('debt_categories', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->debtCategoryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : DebtCategoryResource::collection($result);
+    }
+
+    public function read(DebtCategory $debtCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $debtCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->debtCategoryActions->read($debtCategory);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new DebtCategoryResource($result);
+    }
+
+    public function store(DebtCategoryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->debtCategoryActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->debtCategoryActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new DebtCategoryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                sequence: $validatedRequest['sequence'],
+            );
+            $result = $this->debtCategoryActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(DebtCategory $debtCategory, DebtCategoryUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->debtCategoryActions->isUniqueCode(
+                $debtCategory->company_id,
+                $validatedRequest['code'],
+                $debtCategory->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->debtCategoryActions->isUniqueName(
+                $debtCategory->company_id,
+                $validatedRequest['name'],
+                $debtCategory->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->debtCategoryActions->update(
+                debtCategory: $debtCategory,
+                data: new DebtCategoryUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    sequence: $validatedRequest['sequence'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(DebtCategory $debtCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $debtCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->debtCategoryActions->delete($debtCategory);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/DebtController.php b/api/app/Http/Controllers/DebtController.php
new file mode 100644
index 000000000..43e713403
--- /dev/null
+++ b/api/app/Http/Controllers/DebtController.php
@@ -0,0 +1,223 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Debt\DebtActions;
+use App\DTOs\DebtCreateDTO;
+use App\DTOs\DebtUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Debt\DebtStoreRequest;
+use App\Http\Requests\Debt\DebtUpdateRequest;
+use App\Http\Resources\DebtResource;
+use App\Models\Debt;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class DebtController extends BaseController
+{
+    public function __construct(
+        private readonly DebtActions $debtActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', Debt::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'category_id' => $request->filled('category_id') ? HashidsHelper::decodeId($request->category_id) : null,
+            'creditor_id' => $request->filled('creditor_id') ? HashidsHelper::decodeId($request->creditor_id) : null,
+            'supplier_id' => $request->filled('supplier_id') ? HashidsHelper::decodeId($request->supplier_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'category_id' => ['nullable', 'integer', new ExistsForCompany('debt_categories', $request->company_id)],
+            'creditor_id' => ['nullable', 'integer', new ExistsForCompany('debt_creditors', $request->company_id)],
+            'supplier_id' => ['nullable', 'integer', new ExistsForCompany('suppliers', $request->company_id)],
+            'is_paid_off' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('debts', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->debtActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                categoryId: $validatedRequest['category_id'] ?? null,
+                creditorId: $validatedRequest['creditor_id'] ?? null,
+                supplierId: $validatedRequest['supplier_id'] ?? null,
+                isPaidOff: $validatedRequest['is_paid_off'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : DebtResource::collection($result);
+    }
+
+    public function read(Debt $debt)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $debt);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->debtActions->read($debt);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new DebtResource($result);
+    }
+
+    public function store(DebtStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->debtActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new DebtCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                categoryId: $validatedRequest['category_id'],
+                creditorId: $validatedRequest['creditor_id'],
+                supplierId: $validatedRequest['supplier_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                directAmountReceived: (float) $validatedRequest['direct_amount_received'],
+                openingAmountDue: (float) $validatedRequest['opening_amount_due'],
+                dueDays: $validatedRequest['due_days'],
+                remarks: $validatedRequest['remarks'],
+                payments: $validatedRequest['payments'],
+            );
+            $result = $this->debtActions->create(
+                data: $dto,
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Debt $debt, DebtUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->debtActions->isUniqueCode(
+                $debt->company_id,
+                $validatedRequest['code'],
+                $debt->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->debtActions->update(
+                debt: $debt,
+                data: new DebtUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    categoryId: $validatedRequest['category_id'],
+                    creditorId: $validatedRequest['creditor_id'],
+                    supplierId: $validatedRequest['supplier_id'],
+                    cashAccountId: $validatedRequest['cash_account_id'],
+                    directAmountReceived: (float) $validatedRequest['direct_amount_received'],
+                    openingAmountDue: (float) $validatedRequest['opening_amount_due'],
+                    dueDays: $validatedRequest['due_days'],
+                    remarks: $validatedRequest['remarks'],
+                    deletePaymentIds: $validatedRequest['delete_payment_ids'],
+                    payments: $validatedRequest['payments'],
+                ),
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Debt $debt)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $debt);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->debtActions->delete($debt);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/DebtCreditorController.php b/api/app/Http/Controllers/DebtCreditorController.php
new file mode 100644
index 000000000..283feeba5
--- /dev/null
+++ b/api/app/Http/Controllers/DebtCreditorController.php
@@ -0,0 +1,199 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\DebtCreditor\DebtCreditorActions;
+use App\DTOs\DebtCreditorCreateDTO;
+use App\DTOs\DebtCreditorUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\DebtCreditor\DebtCreditorStoreRequest;
+use App\Http\Requests\DebtCreditor\DebtCreditorUpdateRequest;
+use App\Http\Resources\DebtCreditorResource;
+use App\Models\DebtCreditor;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class DebtCreditorController extends BaseController
+{
+    public function __construct(
+        private readonly DebtCreditorActions $debtCreditorActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', DebtCreditor::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'include_id' => ['nullable', 'integer', 'exists:debt_creditors,id'],
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->debtCreditorActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : DebtCreditorResource::collection($result);
+    }
+
+    public function read(DebtCreditor $debtCreditor)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $debtCreditor);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->debtCreditorActions->read($debtCreditor);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new DebtCreditorResource($result);
+    }
+
+    public function store(DebtCreditorStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->debtCreditorActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->debtCreditorActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+            $dto = new DebtCreditorCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->debtCreditorActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(DebtCreditor $debtCreditor, DebtCreditorUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->debtCreditorActions->isUniqueCode(
+                $debtCreditor->company_id,
+                $validatedRequest['code'],
+                $debtCreditor->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->debtCreditorActions->isUniqueName(
+                $debtCreditor->company_id,
+                $validatedRequest['name'],
+                $debtCreditor->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->debtCreditorActions->update(
+                debtCreditor: $debtCreditor,
+                data: new DebtCreditorUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(DebtCreditor $debtCreditor)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $debtCreditor);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->debtCreditorActions->delete($debtCreditor);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/DebtPaymentController.php b/api/app/Http/Controllers/DebtPaymentController.php
new file mode 100644
index 000000000..322b837b2
--- /dev/null
+++ b/api/app/Http/Controllers/DebtPaymentController.php
@@ -0,0 +1,198 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\DebtPayment\DebtPaymentActions;
+use App\DTOs\DebtPaymentCreateDTO;
+use App\DTOs\DebtPaymentUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\DebtPayment\DebtPaymentStoreRequest;
+use App\Http\Requests\DebtPayment\DebtPaymentUpdateRequest;
+use App\Http\Resources\DebtPaymentResource;
+use App\Models\DebtPayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class DebtPaymentController extends BaseController
+{
+    public function __construct(
+        private readonly DebtPaymentActions $debtPaymentActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', DebtPayment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'debt_id' => $request->filled('debt_id') ? HashidsHelper::decodeId($request->debt_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'debt_id' => ['nullable', 'integer', new ExistsForCompany('debts', $request->company_id)],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('debt_payments', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->debtPaymentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                debtId: $validatedRequest['debt_id'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : DebtPaymentResource::collection($result);
+    }
+
+    public function read(DebtPayment $debt_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $debt_payment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->debtPaymentActions->read($debt_payment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new DebtPaymentResource($result);
+    }
+
+    public function store(DebtPaymentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->debtPaymentActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new DebtPaymentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                debtId: $validatedRequest['debt_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->debtPaymentActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(DebtPayment $debt_payment, DebtPaymentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->debtPaymentActions->isUniqueCode(
+                $debt_payment->company_id,
+                $validatedRequest['code'],
+                $debt_payment->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->debtPaymentActions->update($debt_payment, new DebtPaymentUpdateDTO(
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            ));
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(DebtPayment $debt_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $debt_payment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->debtPaymentActions->delete($debt_payment);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/EmployeeController.php b/api/app/Http/Controllers/EmployeeController.php
new file mode 100644
index 000000000..10108e858
--- /dev/null
+++ b/api/app/Http/Controllers/EmployeeController.php
@@ -0,0 +1,222 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Employee\EmployeeActions;
+use App\DTOs\EmployeeCreateDTO;
+use App\DTOs\EmployeeUpdateDTO;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Employee\EmployeeStoreRequest;
+use App\Http\Requests\Employee\EmployeeUpdateRequest;
+use App\Http\Resources\EmployeeResource;
+use App\Models\Employee;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class EmployeeController extends BaseController
+{
+    private $employeeActions;
+
+    public function __construct(EmployeeActions $employeeActions)
+    {
+        parent::__construct();
+
+        $this->employeeActions = $employeeActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', Employee::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+
+            'include_id' => ['nullable', 'integer', 'exists:employees,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->employeeActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                userId: null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate']) ? new ExecutePaginationDTO(
+                        page: $validatedRequest['paginate']['page'],
+                        perPage: $validatedRequest['paginate']['per_page'],
+                    ) : null,
+                    get: isset($validatedRequest['get']) ? new ExecuteGetDTO(
+                        limit: $validatedRequest['get']['limit'],
+                    ) : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return EmployeeResource::collection($result);
+    }
+
+    public function read(Employee $employee)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $employee);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->employeeActions->read($employee);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new EmployeeResource($result);
+    }
+
+    public function store(EmployeeStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->employeeActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->employeeActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new EmployeeCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->employeeActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Employee $employee, EmployeeUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->employeeActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $employee->id
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->employeeActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                $employee->id
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->employeeActions->update(
+                employee: $employee,
+                data: new EmployeeUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Employee $employee)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $employee);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->employeeActions->delete($employee);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ExpenseCategoryController.php b/api/app/Http/Controllers/ExpenseCategoryController.php
new file mode 100644
index 000000000..cd38809be
--- /dev/null
+++ b/api/app/Http/Controllers/ExpenseCategoryController.php
@@ -0,0 +1,227 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ExpenseCategory\ExpenseCategoryActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\ExpenseCategoryCreateDTO;
+use App\DTOs\ExpenseCategoryUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\ExpenseCategory\ExpenseCategoryStoreRequest;
+use App\Http\Requests\ExpenseCategory\ExpenseCategoryUpdateRequest;
+use App\Http\Resources\ExpenseCategoryResource;
+use App\Models\ExpenseCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class ExpenseCategoryController extends BaseController
+{
+    public function __construct(
+        private readonly ExpenseCategoryActions $expenseCategoryActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', ExpenseCategory::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'parent_id' => $request->filled('parent_id') ? HashidsHelper::decodeId($request->parent_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+
+            'parent_id' => ['nullable', 'integer', new ExistsForCompany('expense_categories', $request->company_id)],
+            'has_parent' => ['nullable', 'boolean'],
+            'has_children' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('expense_categories', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->expenseCategoryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                parentId: $validatedRequest['parent_id'] ?? null,
+                hasParent: $validatedRequest['has_parent'] ?? null,
+                hasChildren: $validatedRequest['has_children'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : ExpenseCategoryResource::collection($result);
+    }
+
+    public function read(ExpenseCategory $expenseCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $expenseCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->expenseCategoryActions->read($expenseCategory);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new ExpenseCategoryResource($result);
+    }
+
+    public function store(ExpenseCategoryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->expenseCategoryActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->expenseCategoryActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new ExpenseCategoryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                parentId: $validatedRequest['parent_id'],
+                categoryType: $validatedRequest['category_type'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                sequence: $validatedRequest['sequence'],
+            );
+            $result = $this->expenseCategoryActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(ExpenseCategory $expenseCategory, ExpenseCategoryUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->expenseCategoryActions->isUniqueCode(
+                $expenseCategory->company_id,
+                $validatedRequest['code'],
+                $expenseCategory->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->expenseCategoryActions->isUniqueName(
+                $expenseCategory->company_id,
+                $validatedRequest['name'],
+                $expenseCategory->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->expenseCategoryActions->update(
+                expenseCategory: $expenseCategory,
+                data: new ExpenseCategoryUpdateDTO(
+                    categoryType: $validatedRequest['category_type'],
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    sequence: $validatedRequest['sequence'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(ExpenseCategory $expenseCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $expenseCategory);
+
+        if ($this->expenseCategoryActions->hasChildren($expenseCategory)) {
+            return response()->error([
+                'errors' => [
+                    'expense_category' => [trans('rules.expense_category.cannot_delete_with_children')],
+                ],
+                'message' => trans('rules.expense_category.cannot_delete_with_children'),
+            ], 422);
+        }
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->expenseCategoryActions->delete($expenseCategory);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ExpenseController.php b/api/app/Http/Controllers/ExpenseController.php
new file mode 100644
index 000000000..30c3f5a48
--- /dev/null
+++ b/api/app/Http/Controllers/ExpenseController.php
@@ -0,0 +1,216 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Expense\ExpenseActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\ExpenseCreateDTO;
+use App\DTOs\ExpenseUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Expense\ExpenseStoreRequest;
+use App\Http\Requests\Expense\ExpenseUpdateRequest;
+use App\Http\Resources\ExpenseResource;
+use App\Models\Expense;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class ExpenseController extends BaseController
+{
+    public function __construct(
+        private readonly ExpenseActions $expenseActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', Expense::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'expense_category_id' => $request->filled('expense_category_id') ? HashidsHelper::decodeId($request->expense_category_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'expense_category_id' => ['nullable', 'integer', new ExistsForCompany('expense_categories', $request->company_id)],
+            'is_amount_payable_paid_off' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('expenses', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->expenseActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                categoryId: $validatedRequest['expense_category_id'] ?? null,
+                isAmountPayablePaidOff: $validatedRequest['is_amount_payable_paid_off'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : ExpenseResource::collection($result);
+    }
+
+    public function read(Expense $expense)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $expense);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->expenseActions->read($expense);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new ExpenseResource($result);
+    }
+
+    public function store(ExpenseStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->expenseActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new ExpenseCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                expenseCategoryId: $validatedRequest['expense_category_id'],
+                paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                amountPaidImmediately: (float) $validatedRequest['amount_paid_immediately'],
+                amountPayable: (float) $validatedRequest['amount_payable'],
+                dueDays: $validatedRequest['due_days'],
+                remarks: $validatedRequest['remarks'],
+                images: $validatedRequest['image_hashes'],
+                payments: $validatedRequest['payments'],
+            );
+            $result = $this->expenseActions->create(
+                data: $dto,
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Expense $expense, ExpenseUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->expenseActions->isUniqueCode(
+                $expense->company_id,
+                $validatedRequest['code'],
+                $expense->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->expenseActions->update(
+                expense: $expense,
+                data: new ExpenseUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    expenseCategoryId: $validatedRequest['expense_category_id'],
+                    paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                    amountPaidImmediately: (float) $validatedRequest['amount_paid_immediately'],
+                    amountPayable: (float) $validatedRequest['amount_payable'],
+                    dueDays: $validatedRequest['due_days'],
+                    remarks: $validatedRequest['remarks'],
+                    deleteImageIds: $validatedRequest['delete_image_ids'],
+                    deletePaymentIds: $validatedRequest['delete_payment_ids'],
+                    images: $validatedRequest['image_hashes'],
+                    payments: $validatedRequest['payments'],
+                ),
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Expense $expense)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $expense);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->expenseActions->delete($expense);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ExpenseImageController.php b/api/app/Http/Controllers/ExpenseImageController.php
new file mode 100644
index 000000000..746b25147
--- /dev/null
+++ b/api/app/Http/Controllers/ExpenseImageController.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ExpenseImage\ExpenseImageActions;
+use App\Http\Resources\ExpenseImageResource;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class ExpenseImageController extends BaseController
+{
+    private $expenseImageActions;
+
+    public function __construct(ExpenseImageActions $expenseImageActions)
+    {
+        parent::__construct();
+
+        $this->expenseImageActions = $expenseImageActions;
+    }
+
+    public function upload(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+
+        $validatedRequest = $request->validate([
+            'image' => ['required', 'image', 'mimes:jpeg,jpg,png', 'max:5120'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->expenseImageActions->upload($validatedRequest['image']);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return response()->success(new ExpenseImageResource($result));
+    }
+}
diff --git a/api/app/Http/Controllers/ExpensePaymentController.php b/api/app/Http/Controllers/ExpensePaymentController.php
new file mode 100644
index 000000000..48298966f
--- /dev/null
+++ b/api/app/Http/Controllers/ExpensePaymentController.php
@@ -0,0 +1,198 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ExpensePayment\ExpensePaymentActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\ExpensePaymentCreateDTO;
+use App\DTOs\ExpensePaymentUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\ExpensePayment\ExpensePaymentStoreRequest;
+use App\Http\Requests\ExpensePayment\ExpensePaymentUpdateRequest;
+use App\Http\Resources\ExpensePaymentResource;
+use App\Models\ExpensePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class ExpensePaymentController extends BaseController
+{
+    public function __construct(
+        private readonly ExpensePaymentActions $expensePaymentActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', ExpensePayment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'expense_id' => $request->filled('expense_id') ? HashidsHelper::decodeId($request->expense_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'expense_id' => ['nullable', 'integer', new ExistsForCompany('expenses', $request->company_id)],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('expense_payments', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->expensePaymentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                expenseId: $validatedRequest['expense_id'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : ExpensePaymentResource::collection($result);
+    }
+
+    public function read(ExpensePayment $expense_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $expense_payment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->expensePaymentActions->read($expense_payment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new ExpensePaymentResource($result);
+    }
+
+    public function store(ExpensePaymentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->expensePaymentActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new ExpensePaymentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                expenseId: $validatedRequest['expense_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->expensePaymentActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(ExpensePayment $expense_payment, ExpensePaymentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->expensePaymentActions->isUniqueCode(
+                $expense_payment->company_id,
+                $validatedRequest['code'],
+                $expense_payment->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->expensePaymentActions->update($expense_payment, new ExpensePaymentUpdateDTO(
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            ));
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(ExpensePayment $expense_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $expense_payment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->expensePaymentActions->delete($expense_payment);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/IncomeCategoryController.php b/api/app/Http/Controllers/IncomeCategoryController.php
new file mode 100644
index 000000000..637de4d6f
--- /dev/null
+++ b/api/app/Http/Controllers/IncomeCategoryController.php
@@ -0,0 +1,225 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\IncomeCategory\IncomeCategoryActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\IncomeCategoryCreateDTO;
+use App\DTOs\IncomeCategoryUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\IncomeCategory\IncomeCategoryStoreRequest;
+use App\Http\Requests\IncomeCategory\IncomeCategoryUpdateRequest;
+use App\Http\Resources\IncomeCategoryResource;
+use App\Models\IncomeCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class IncomeCategoryController extends BaseController
+{
+    public function __construct(
+        private readonly IncomeCategoryActions $incomeCategoryActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', IncomeCategory::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'parent_id' => $request->filled('parent_id') ? HashidsHelper::decodeId($request->parent_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+
+            'parent_id' => ['nullable', 'integer', new ExistsForCompany('income_categories', $request->company_id)],
+            'has_parent' => ['nullable', 'boolean'],
+            'has_children' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('income_categories', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->incomeCategoryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                parentId: $validatedRequest['parent_id'] ?? null,
+                hasParent: $validatedRequest['has_parent'] ?? null,
+                hasChildren: $validatedRequest['has_children'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : IncomeCategoryResource::collection($result);
+    }
+
+    public function read(IncomeCategory $incomeCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $incomeCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->incomeCategoryActions->read($incomeCategory);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new IncomeCategoryResource($result);
+    }
+
+    public function store(IncomeCategoryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->incomeCategoryActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->incomeCategoryActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new IncomeCategoryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                parentId: $validatedRequest['parent_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                sequence: $validatedRequest['sequence'],
+            );
+            $result = $this->incomeCategoryActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(IncomeCategory $incomeCategory, IncomeCategoryUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->incomeCategoryActions->isUniqueCode(
+                $incomeCategory->company_id,
+                $validatedRequest['code'],
+                $incomeCategory->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->incomeCategoryActions->isUniqueName(
+                $incomeCategory->company_id,
+                $validatedRequest['name'],
+                $incomeCategory->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->incomeCategoryActions->update(
+                incomeCategory: $incomeCategory,
+                data: new IncomeCategoryUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    sequence: $validatedRequest['sequence'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(IncomeCategory $incomeCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $incomeCategory);
+
+        if ($this->incomeCategoryActions->hasChildren($incomeCategory)) {
+            return response()->error([
+                'errors' => [
+                    'income_category' => [trans('rules.income_category.cannot_delete_with_children')],
+                ],
+                'message' => trans('rules.income_category.cannot_delete_with_children'),
+            ], 422);
+        }
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->incomeCategoryActions->delete($incomeCategory);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/IncomeController.php b/api/app/Http/Controllers/IncomeController.php
new file mode 100644
index 000000000..17c33c6ad
--- /dev/null
+++ b/api/app/Http/Controllers/IncomeController.php
@@ -0,0 +1,216 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Income\IncomeActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\IncomeCreateDTO;
+use App\DTOs\IncomeUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Income\IncomeStoreRequest;
+use App\Http\Requests\Income\IncomeUpdateRequest;
+use App\Http\Resources\IncomeResource;
+use App\Models\Income;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class IncomeController extends BaseController
+{
+    public function __construct(
+        private readonly IncomeActions $incomeActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', Income::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'income_category_id' => $request->filled('income_category_id') ? HashidsHelper::decodeId($request->income_category_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'income_category_id' => ['nullable', 'integer', new ExistsForCompany('income_categories', $request->company_id)],
+            'is_amount_receivable_paid_off' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('incomes', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->incomeActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                categoryId: $validatedRequest['income_category_id'] ?? null,
+                isAmountReceivablePaidOff: $validatedRequest['is_amount_receivable_paid_off'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : IncomeResource::collection($result);
+    }
+
+    public function read(Income $income)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $income);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->incomeActions->read($income);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new IncomeResource($result);
+    }
+
+    public function store(IncomeStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->incomeActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new IncomeCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                incomeCategoryId: $validatedRequest['income_category_id'],
+                paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                amountPaidImmediately: (float) $validatedRequest['amount_paid_immediately'],
+                amountReceivable: (float) $validatedRequest['amount_receivable'],
+                dueDays: $validatedRequest['due_days'],
+                remarks: $validatedRequest['remarks'],
+                images: $validatedRequest['image_hashes'],
+                payments: $validatedRequest['payments'],
+            );
+            $result = $this->incomeActions->create(
+                data: $dto,
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Income $income, IncomeUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->incomeActions->isUniqueCode(
+                $income->company_id,
+                $validatedRequest['code'],
+                $income->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->incomeActions->update(
+                income: $income,
+                data: new IncomeUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    incomeCategoryId: $validatedRequest['income_category_id'],
+                    paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                    amountPaidImmediately: (float) $validatedRequest['amount_paid_immediately'],
+                    amountReceivable: (float) $validatedRequest['amount_receivable'],
+                    dueDays: $validatedRequest['due_days'],
+                    remarks: $validatedRequest['remarks'],
+                    deleteImageIds: $validatedRequest['delete_image_ids'],
+                    deletePaymentIds: $validatedRequest['delete_payment_ids'],
+                    images: $validatedRequest['image_hashes'],
+                    payments: $validatedRequest['payments'],
+                ),
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Income $income)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $income);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->incomeActions->delete($income);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/IncomeImageController.php b/api/app/Http/Controllers/IncomeImageController.php
new file mode 100644
index 000000000..d2adb5834
--- /dev/null
+++ b/api/app/Http/Controllers/IncomeImageController.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\IncomeImage\IncomeImageActions;
+use App\Http\Resources\IncomeImageResource;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class IncomeImageController extends BaseController
+{
+    private $incomeImageActions;
+
+    public function __construct(IncomeImageActions $incomeImageActions)
+    {
+        parent::__construct();
+
+        $this->incomeImageActions = $incomeImageActions;
+    }
+
+    public function upload(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+
+        $validatedRequest = $request->validate([
+            'image' => ['required', 'image', 'mimes:jpeg,jpg,png', 'max:5120'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->incomeImageActions->upload($validatedRequest['image']);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return response()->success(new IncomeImageResource($result));
+    }
+}
diff --git a/api/app/Http/Controllers/IncomePaymentController.php b/api/app/Http/Controllers/IncomePaymentController.php
new file mode 100644
index 000000000..861fcddf1
--- /dev/null
+++ b/api/app/Http/Controllers/IncomePaymentController.php
@@ -0,0 +1,198 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\IncomePayment\IncomePaymentActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\IncomePaymentCreateDTO;
+use App\DTOs\IncomePaymentUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\IncomePayment\IncomePaymentStoreRequest;
+use App\Http\Requests\IncomePayment\IncomePaymentUpdateRequest;
+use App\Http\Resources\IncomePaymentResource;
+use App\Models\IncomePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class IncomePaymentController extends BaseController
+{
+    public function __construct(
+        private readonly IncomePaymentActions $incomePaymentActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', IncomePayment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'income_id' => $request->filled('income_id') ? HashidsHelper::decodeId($request->income_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'income_id' => ['nullable', 'integer', new ExistsForCompany('incomes', $request->company_id)],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('income_payments', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->incomePaymentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                incomeId: $validatedRequest['income_id'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : IncomePaymentResource::collection($result);
+    }
+
+    public function read(IncomePayment $income_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $income_payment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->incomePaymentActions->read($income_payment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new IncomePaymentResource($result);
+    }
+
+    public function store(IncomePaymentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->incomePaymentActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new IncomePaymentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                incomeId: $validatedRequest['income_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->incomePaymentActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(IncomePayment $income_payment, IncomePaymentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->incomePaymentActions->isUniqueCode(
+                $income_payment->company_id,
+                $validatedRequest['code'],
+                $income_payment->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->incomePaymentActions->update($income_payment, new IncomePaymentUpdateDTO(
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            ));
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(IncomePayment $income_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $income_payment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->incomePaymentActions->delete($income_payment);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/InvestorController.php b/api/app/Http/Controllers/InvestorController.php
new file mode 100644
index 000000000..cf946fd34
--- /dev/null
+++ b/api/app/Http/Controllers/InvestorController.php
@@ -0,0 +1,247 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Investor\InvestorActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\InvestorCreateDTO;
+use App\DTOs\InvestorUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Investor\InvestorStoreRequest;
+use App\Http\Requests\Investor\InvestorUpdateRequest;
+use App\Http\Resources\InvestorResource;
+use App\Models\Investor;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class InvestorController extends BaseController
+{
+    private $investorActions;
+
+    public function __construct(InvestorActions $investorActions)
+    {
+        parent::__construct();
+
+        $this->investorActions = $investorActions;
+    }
+
+    public function store(InvestorStoreRequest $investorStoreRequest)
+    {
+        $validatedRequest = $investorStoreRequest->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->investorActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null
+                );
+                if (! $isUnique) {
+                    return response()->error(['code' => [trans('rules.unique_code')]], 422);
+                }
+            }
+
+            $isUnique = $this->investorActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null
+            );
+            if (! $isUnique) {
+                return response()->error(['name' => [trans('rules.unique_name')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new InvestorCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->investorActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', Investor::class);
+
+        if ($request->filled('company_id')) {
+            $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        }
+        if ($request->filled('include_id')) {
+            $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+        }
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+
+            'search' => ['nullable', 'string'],
+            'include_id' => ['nullable', 'integer', 'exists:investors,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $validatedRequest['search'] = $validatedRequest['search'] ?? null;
+        $validatedRequest['include_id'] = $validatedRequest['include_id'] ?? null;
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->investorActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return InvestorResource::collection($result);
+        }
+    }
+
+    public function read(Investor $investor)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $investor);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->investorActions->read($investor);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new InvestorResource($result);
+        }
+    }
+
+    public function update(Investor $investor, InvestorUpdateRequest $investorUpdateRequest)
+    {
+        $validatedRequest = $investorUpdateRequest->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->investorActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $investor->id
+                );
+                if (! $isUnique) {
+                    return response()->error(['code' => [trans('rules.unique_code')]], 422);
+                }
+            }
+
+            $isUnique = $this->investorActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                $investor->id
+            );
+            if (! $isUnique) {
+                return response()->error(['name' => [trans('rules.unique_name')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->investorActions->update(
+                investor: $investor,
+                data: new InvestorUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    remarks: $validatedRequest['remarks'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Investor $investor)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $investor);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->investorActions->delete($investor);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/JournalEntryController.php b/api/app/Http/Controllers/JournalEntryController.php
new file mode 100644
index 000000000..4eff2bfa6
--- /dev/null
+++ b/api/app/Http/Controllers/JournalEntryController.php
@@ -0,0 +1,246 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\JournalEntry\JournalEntryActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\JournalEntryCreateDTO;
+use App\DTOs\JournalEntryItemDTO;
+use App\DTOs\JournalEntryUpdateDTO;
+use App\Enums\JournalEntryTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\JournalEntry\JournalEntryStoreRequest;
+use App\Http\Requests\JournalEntry\JournalEntryUpdateRequest;
+use App\Http\Resources\JournalEntryResource;
+use App\Models\JournalEntry;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class JournalEntryController extends BaseController
+{
+    public function __construct(
+        private readonly JournalEntryActions $journalEntryActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', JournalEntry::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'journal_type' => JournalEntryTypeEnum::isValid($request->journal_type) ? JournalEntryTypeEnum::resolveToEnum($request->journal_type)->value : null,
+            'source_id' => $request->filled('source_id') ? (int) $request->source_id : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', 'bail', new ExistsForCompany('branches', $request->company_id), new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+            'start_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'end_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'journal_type' => ['nullable', new \Illuminate\Validation\Rules\Enum(JournalEntryTypeEnum::class)],
+            'source_type' => ['nullable', 'string', 'max:255'],
+            'source_id' => ['nullable', 'integer', 'min:1'],
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->journalEntryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+                journalType: $validatedRequest['journal_type'] ?? null,
+                sourceType: $validatedRequest['source_type'] ?? null,
+                sourceId: $validatedRequest['source_id'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : JournalEntryResource::collection($result);
+    }
+
+    public function read(JournalEntry $journalEntry)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $journalEntry);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->journalEntryActions->read($journalEntry);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new JournalEntryResource($result);
+    }
+
+    public function store(JournalEntryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->journalEntryActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new JournalEntryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                journalType: $validatedRequest['journal_type'],
+                sourceType: $validatedRequest['source_type'],
+                sourceId: $validatedRequest['source_id'],
+                referenceNo: $validatedRequest['reference_no'],
+                remarks: $validatedRequest['remarks'],
+                items: (function (array $items): array {
+                    $result = [];
+
+                    foreach ($items as $index => $item) {
+                        $dto = new JournalEntryItemDTO(
+                            chartOfAccountId: (int) $item['chart_of_account_id'],
+                            sequence: $index + 1,
+                            debit: max((float) ($item['debit'] ?? 0), 0),
+                            credit: max((float) ($item['credit'] ?? 0), 0),
+                            remarks: $item['remarks'] ?? null,
+                        );
+
+                        $result[] = $dto;
+                    }
+
+                    return $result;
+                })($validatedRequest['items']),
+            );
+            $result = $this->journalEntryActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(JournalEntry $journalEntry, JournalEntryUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->journalEntryActions->isUniqueCode(
+                    $journalEntry->company_id,
+                    $validatedRequest['code'],
+                    $journalEntry->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new JournalEntryUpdateDTO(
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                journalType: $validatedRequest['journal_type'],
+                referenceNo: $validatedRequest['reference_no'],
+                remarks: $validatedRequest['remarks'],
+                items: (function (array $items): array {
+                    $result = [];
+
+                    foreach ($items as $index => $item) {
+                        $dto = new JournalEntryItemDTO(
+                            chartOfAccountId: (int) $item['chart_of_account_id'],
+                            sequence: $index + 1,
+                            debit: max((float) ($item['debit'] ?? 0), 0),
+                            credit: max((float) ($item['credit'] ?? 0), 0),
+                            remarks: $item['remarks'] ?? null,
+                        );
+
+                        $result[] = $dto;
+                    }
+
+                    return $result;
+                })($validatedRequest['items']),
+            );
+            $result = $this->journalEntryActions->update($journalEntry, $dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(JournalEntry $journalEntry)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $journalEntry);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->journalEntryActions->delete($journalEntry);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/JournalEntryItemController.php b/api/app/Http/Controllers/JournalEntryItemController.php
new file mode 100644
index 000000000..36f752995
--- /dev/null
+++ b/api/app/Http/Controllers/JournalEntryItemController.php
@@ -0,0 +1,108 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\JournalEntryItem\JournalEntryItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Resources\JournalEntryItemResource;
+use App\Models\JournalEntry;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class JournalEntryItemController extends BaseController
+{
+    public function __construct(
+        private readonly JournalEntryItemActions $journalEntryItemActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', JournalEntry::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'journal_entry_id' => $request->filled('journal_entry_id') ? HashidsHelper::decodeId($request->journal_entry_id) : null,
+            'chart_of_account_id' => $request->filled('chart_of_account_id') ? HashidsHelper::decodeId($request->chart_of_account_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', 'bail', new ExistsForCompany('branches', $request->company_id), new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'end_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'journal_entry_id' => ['nullable', 'integer', new ExistsForCompany('journal_entries', $request->company_id)],
+            'chart_of_account_id' => ['nullable', 'integer', new ExistsForCompany('chart_of_accounts', $request->company_id)],
+            'include_system_journals' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('journal_entry_items', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->journalEntryItemActions->readAny(
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+                startDate: $validated['start_date'] ?? null,
+                endDate: $validated['end_date'] ?? null,
+                journalEntryId: $validated['journal_entry_id'] ?? null,
+                chartOfAccountId: $validated['chart_of_account_id'] ?? null,
+                includeSystemJournals: (bool) ($validated['include_system_journals'] ?? false),
+                includeId: $validated['include_id'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        if (! isset($validated['paginate'])) {
+                            return null;
+                        }
+
+                        return new ExecutePaginationDTO(
+                            page: $validated['paginate']['page'],
+                            perPage: $validated['paginate']['per_page'],
+                        );
+                    })(),
+                    get: (function () use ($validated) {
+                        if (! isset($validated['get'])) {
+                            return null;
+                        }
+
+                        return new ExecuteGetDTO(
+                            limit: $validated['get']['limit'],
+                        );
+                    })(),
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return JournalEntryItemResource::collection($result);
+    }
+}
diff --git a/api/app/Http/Controllers/PrepaidExpenseController.php b/api/app/Http/Controllers/PrepaidExpenseController.php
new file mode 100644
index 000000000..3ee06ffbf
--- /dev/null
+++ b/api/app/Http/Controllers/PrepaidExpenseController.php
@@ -0,0 +1,218 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PrepaidExpense\PrepaidExpenseActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PrepaidExpenseCreateDTO;
+use App\DTOs\PrepaidExpenseUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PrepaidExpense\PrepaidExpenseStoreRequest;
+use App\Http\Requests\PrepaidExpense\PrepaidExpenseUpdateRequest;
+use App\Http\Resources\PrepaidExpenseResource;
+use App\Models\PrepaidExpense;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class PrepaidExpenseController extends BaseController
+{
+    public function __construct(
+        private readonly PrepaidExpenseActions $prepaidExpenseActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PrepaidExpense::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'expense_category_id' => $request->filled('expense_category_id') ? HashidsHelper::decodeId($request->expense_category_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'expense_category_id' => ['nullable', 'integer', new ExistsForCompany('expense_categories', $request->company_id)],
+            'is_amount_payable_paid_off' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('prepaid_expenses', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidExpenseActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                categoryId: $validatedRequest['expense_category_id'] ?? null,
+                isAmountPayablePaidOff: $validatedRequest['is_amount_payable_paid_off'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : PrepaidExpenseResource::collection($result);
+    }
+
+    public function read(PrepaidExpense $prepaidExpense)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $prepaidExpense);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidExpenseActions->read($prepaidExpense);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new PrepaidExpenseResource($result);
+    }
+
+    public function store(PrepaidExpenseStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->prepaidExpenseActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new PrepaidExpenseCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                expenseCategoryId: $validatedRequest['expense_category_id'],
+                estimatedUsefulLife: $validatedRequest['estimated_useful_life'],
+                paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                amountPaidImmediately: (float) $validatedRequest['amount_paid_immediately'],
+                amountPayable: (float) $validatedRequest['amount_payable'],
+                dueDays: $validatedRequest['due_days'],
+                remarks: $validatedRequest['remarks'],
+                images: $validatedRequest['image_hashes'],
+                payments: $validatedRequest['payments'],
+            );
+            $result = $this->prepaidExpenseActions->create(
+                data: $dto,
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(PrepaidExpense $prepaidExpense, PrepaidExpenseUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->prepaidExpenseActions->isUniqueCode(
+                $prepaidExpense->company_id,
+                $validatedRequest['code'],
+                $prepaidExpense->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->prepaidExpenseActions->update(
+                prepaidExpense: $prepaidExpense,
+                data: new PrepaidExpenseUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    expenseCategoryId: $validatedRequest['expense_category_id'],
+                    estimatedUsefulLife: $validatedRequest['estimated_useful_life'],
+                    paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                    amountPaidImmediately: (float) $validatedRequest['amount_paid_immediately'],
+                    amountPayable: (float) $validatedRequest['amount_payable'],
+                    dueDays: $validatedRequest['due_days'],
+                    remarks: $validatedRequest['remarks'],
+                    deleteImageIds: $validatedRequest['delete_image_ids'],
+                    deletePaymentIds: $validatedRequest['delete_payment_ids'],
+                    images: $validatedRequest['image_hashes'],
+                    payments: $validatedRequest['payments'],
+                ),
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(PrepaidExpense $prepaidExpense)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $prepaidExpense);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->prepaidExpenseActions->delete($prepaidExpense);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/PrepaidExpenseImageController.php b/api/app/Http/Controllers/PrepaidExpenseImageController.php
new file mode 100644
index 000000000..0e9f866a5
--- /dev/null
+++ b/api/app/Http/Controllers/PrepaidExpenseImageController.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PrepaidExpenseImage\PrepaidExpenseImageActions;
+use App\Http\Resources\PrepaidExpenseImageResource;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class PrepaidExpenseImageController extends BaseController
+{
+    private $prepaidExpenseImageActions;
+
+    public function __construct(PrepaidExpenseImageActions $prepaidExpenseImageActions)
+    {
+        parent::__construct();
+
+        $this->prepaidExpenseImageActions = $prepaidExpenseImageActions;
+    }
+
+    public function upload(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+
+        $validatedRequest = $request->validate([
+            'image' => ['required', 'image', 'mimes:jpeg,jpg,png', 'max:5120'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidExpenseImageActions->upload($validatedRequest['image']);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return response()->success(new PrepaidExpenseImageResource($result));
+    }
+}
diff --git a/api/app/Http/Controllers/PrepaidExpensePaymentController.php b/api/app/Http/Controllers/PrepaidExpensePaymentController.php
new file mode 100644
index 000000000..6bf69b26d
--- /dev/null
+++ b/api/app/Http/Controllers/PrepaidExpensePaymentController.php
@@ -0,0 +1,198 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PrepaidExpensePayment\PrepaidExpensePaymentActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PrepaidExpensePaymentCreateDTO;
+use App\DTOs\PrepaidExpensePaymentUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PrepaidExpensePayment\PrepaidExpensePaymentStoreRequest;
+use App\Http\Requests\PrepaidExpensePayment\PrepaidExpensePaymentUpdateRequest;
+use App\Http\Resources\PrepaidExpensePaymentResource;
+use App\Models\PrepaidExpensePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class PrepaidExpensePaymentController extends BaseController
+{
+    public function __construct(
+        private readonly PrepaidExpensePaymentActions $prepaidExpensePaymentActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PrepaidExpensePayment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'prepaid_expense_id' => $request->filled('prepaid_expense_id') ? HashidsHelper::decodeId($request->prepaid_expense_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'prepaid_expense_id' => ['nullable', 'integer', new ExistsForCompany('prepaid_expenses', $request->company_id)],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('prepaid_expense_payments', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidExpensePaymentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                prepaidExpenseId: $validatedRequest['prepaid_expense_id'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : PrepaidExpensePaymentResource::collection($result);
+    }
+
+    public function read(PrepaidExpensePayment $prepaidExpensePayment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $prepaidExpensePayment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidExpensePaymentActions->read($prepaidExpensePayment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new PrepaidExpensePaymentResource($result);
+    }
+
+    public function store(PrepaidExpensePaymentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->prepaidExpensePaymentActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new PrepaidExpensePaymentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                prepaidExpenseId: $validatedRequest['prepaid_expense_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->prepaidExpensePaymentActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(PrepaidExpensePayment $prepaidExpensePayment, PrepaidExpensePaymentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->prepaidExpensePaymentActions->isUniqueCode(
+                $prepaidExpensePayment->company_id,
+                $validatedRequest['code'],
+                $prepaidExpensePayment->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->prepaidExpensePaymentActions->update($prepaidExpensePayment, new PrepaidExpensePaymentUpdateDTO(
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            ));
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(PrepaidExpensePayment $prepaidExpensePayment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $prepaidExpensePayment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->prepaidExpensePaymentActions->delete($prepaidExpensePayment);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/PrepaidIncomeController.php b/api/app/Http/Controllers/PrepaidIncomeController.php
new file mode 100644
index 000000000..e46415ab8
--- /dev/null
+++ b/api/app/Http/Controllers/PrepaidIncomeController.php
@@ -0,0 +1,218 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PrepaidIncome\PrepaidIncomeActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PrepaidIncomeCreateDTO;
+use App\DTOs\PrepaidIncomeUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PrepaidIncome\PrepaidIncomeStoreRequest;
+use App\Http\Requests\PrepaidIncome\PrepaidIncomeUpdateRequest;
+use App\Http\Resources\PrepaidIncomeResource;
+use App\Models\PrepaidIncome;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class PrepaidIncomeController extends BaseController
+{
+    public function __construct(
+        private readonly PrepaidIncomeActions $prepaidIncomeActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PrepaidIncome::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'income_category_id' => $request->filled('income_category_id') ? HashidsHelper::decodeId($request->income_category_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'income_category_id' => ['nullable', 'integer', new ExistsForCompany('income_categories', $request->company_id)],
+            'is_amount_receivable_paid_off' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('prepaid_incomes', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidIncomeActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                categoryId: $validatedRequest['income_category_id'] ?? null,
+                isAmountReceivablePaidOff: $validatedRequest['is_amount_receivable_paid_off'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : PrepaidIncomeResource::collection($result);
+    }
+
+    public function read(PrepaidIncome $prepaidIncome)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $prepaidIncome);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidIncomeActions->read($prepaidIncome);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new PrepaidIncomeResource($result);
+    }
+
+    public function store(PrepaidIncomeStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->prepaidIncomeActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new PrepaidIncomeCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                incomeCategoryId: $validatedRequest['income_category_id'],
+                estimatedUsefulLife: $validatedRequest['estimated_useful_life'],
+                paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                amountPaidImmediately: (float) $validatedRequest['amount_paid_immediately'],
+                amountReceivable: (float) $validatedRequest['amount_receivable'],
+                dueDays: $validatedRequest['due_days'],
+                remarks: $validatedRequest['remarks'],
+                images: $validatedRequest['image_hashes'],
+                payments: $validatedRequest['payments'],
+            );
+            $result = $this->prepaidIncomeActions->create(
+                data: $dto,
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(PrepaidIncome $prepaidIncome, PrepaidIncomeUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->prepaidIncomeActions->isUniqueCode(
+                $prepaidIncome->company_id,
+                $validatedRequest['code'],
+                $prepaidIncome->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->prepaidIncomeActions->update(
+                prepaidIncome: $prepaidIncome,
+                data: new PrepaidIncomeUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    incomeCategoryId: $validatedRequest['income_category_id'],
+                    estimatedUsefulLife: $validatedRequest['estimated_useful_life'],
+                    paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                    amountPaidImmediately: (float) $validatedRequest['amount_paid_immediately'],
+                    amountReceivable: (float) $validatedRequest['amount_receivable'],
+                    dueDays: $validatedRequest['due_days'],
+                    remarks: $validatedRequest['remarks'],
+                    deleteImageIds: $validatedRequest['delete_image_ids'],
+                    deletePaymentIds: $validatedRequest['delete_payment_ids'],
+                    images: $validatedRequest['image_hashes'],
+                    payments: $validatedRequest['payments'],
+                ),
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(PrepaidIncome $prepaidIncome)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $prepaidIncome);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->prepaidIncomeActions->delete($prepaidIncome);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/PrepaidIncomeImageController.php b/api/app/Http/Controllers/PrepaidIncomeImageController.php
new file mode 100644
index 000000000..2f1807208
--- /dev/null
+++ b/api/app/Http/Controllers/PrepaidIncomeImageController.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PrepaidIncomeImage\PrepaidIncomeImageActions;
+use App\Http\Resources\PrepaidIncomeImageResource;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class PrepaidIncomeImageController extends BaseController
+{
+    private $prepaidIncomeImageActions;
+
+    public function __construct(PrepaidIncomeImageActions $prepaidIncomeImageActions)
+    {
+        parent::__construct();
+
+        $this->prepaidIncomeImageActions = $prepaidIncomeImageActions;
+    }
+
+    public function upload(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+
+        $validatedRequest = $request->validate([
+            'image' => ['required', 'image', 'mimes:jpeg,jpg,png', 'max:5120'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidIncomeImageActions->upload($validatedRequest['image']);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return response()->success(new PrepaidIncomeImageResource($result));
+    }
+}
diff --git a/api/app/Http/Controllers/PrepaidIncomePaymentController.php b/api/app/Http/Controllers/PrepaidIncomePaymentController.php
new file mode 100644
index 000000000..6314d031b
--- /dev/null
+++ b/api/app/Http/Controllers/PrepaidIncomePaymentController.php
@@ -0,0 +1,198 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PrepaidIncomePayment\PrepaidIncomePaymentActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PrepaidIncomePaymentCreateDTO;
+use App\DTOs\PrepaidIncomePaymentUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PrepaidIncomePayment\PrepaidIncomePaymentStoreRequest;
+use App\Http\Requests\PrepaidIncomePayment\PrepaidIncomePaymentUpdateRequest;
+use App\Http\Resources\PrepaidIncomePaymentResource;
+use App\Models\PrepaidIncomePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class PrepaidIncomePaymentController extends BaseController
+{
+    public function __construct(
+        private readonly PrepaidIncomePaymentActions $prepaidIncomePaymentActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PrepaidIncomePayment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'prepaid_income_id' => $request->filled('prepaid_income_id') ? HashidsHelper::decodeId($request->prepaid_income_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'prepaid_income_id' => ['nullable', 'integer', new ExistsForCompany('prepaid_incomes', $request->company_id)],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('prepaid_income_payments', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidIncomePaymentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                prepaidIncomeId: $validatedRequest['prepaid_income_id'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : PrepaidIncomePaymentResource::collection($result);
+    }
+
+    public function read(PrepaidIncomePayment $prepaidIncomePayment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $prepaidIncomePayment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->prepaidIncomePaymentActions->read($prepaidIncomePayment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new PrepaidIncomePaymentResource($result);
+    }
+
+    public function store(PrepaidIncomePaymentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->prepaidIncomePaymentActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new PrepaidIncomePaymentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                prepaidIncomeId: $validatedRequest['prepaid_income_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->prepaidIncomePaymentActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(PrepaidIncomePayment $prepaidIncomePayment, PrepaidIncomePaymentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->prepaidIncomePaymentActions->isUniqueCode(
+                $prepaidIncomePayment->company_id,
+                $validatedRequest['code'],
+                $prepaidIncomePayment->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->prepaidIncomePaymentActions->update($prepaidIncomePayment, new PrepaidIncomePaymentUpdateDTO(
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            ));
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(PrepaidIncomePayment $prepaidIncomePayment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $prepaidIncomePayment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->prepaidIncomePaymentActions->delete($prepaidIncomePayment);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ProductCategoryController.php b/api/app/Http/Controllers/ProductCategoryController.php
new file mode 100644
index 000000000..9aaae5781
--- /dev/null
+++ b/api/app/Http/Controllers/ProductCategoryController.php
@@ -0,0 +1,238 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ProductCategory\ProductCategoryActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\ProductCategoryCreateDTO;
+use App\DTOs\ProductCategoryUpdateDTO;
+use App\Enums\ProductCategoryTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\ProductCategory\ProductCategoryStoreRequest;
+use App\Http\Requests\ProductCategory\ProductCategoryUpdateRequest;
+use App\Http\Resources\ProductCategoryResource;
+use App\Models\ProductCategory;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rules\Enum;
+
+class ProductCategoryController extends BaseController
+{
+    private $productCategoryActions;
+
+    public function __construct(ProductCategoryActions $productCategoryActions)
+    {
+        parent::__construct();
+
+        $this->productCategoryActions = $productCategoryActions;
+    }
+
+    public function store(ProductCategoryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] != config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->productCategoryActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->productCategoryActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new ProductCategoryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                type: $validatedRequest['type'],
+            );
+            $result = $this->productCategoryActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', ProductCategory::class);
+
+        if ($request->filled('company_id')) $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        if ($request->filled('include_id')) $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+
+        if ($request->filled('type')) {
+            $request->merge(['type' => ProductCategoryTypeEnum::isValid($request->type) ? ProductCategoryTypeEnum::resolveToEnum($request->type)->value : -1]);
+        }
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'type' => ['nullable', new Enum(ProductCategoryTypeEnum::class)],
+            'include_id' => ['nullable', 'integer', 'exists:product_categories,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->productCategoryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+                type: $validatedRequest['type'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return ProductCategoryResource::collection($result);
+        }
+    }
+
+    public function getTypes()
+    {
+        return [
+            ['name' => 'views.product_category.type.product', 'code' => ProductCategoryTypeEnum::PRODUCT->value],
+            ['name' => 'views.product_category.type.service', 'code' => ProductCategoryTypeEnum::SERVICE->value],
+        ];
+    }
+
+    public function read(ProductCategory $productCategory)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $productCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->productCategoryActions->read($productCategory);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new ProductCategoryResource($result);
+        }
+    }
+
+    public function update(ProductCategory $productCategory, ProductCategoryUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->productCategoryActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], $productCategory->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->productCategoryActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], $productCategory->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->productCategoryActions->update(
+                productCategory: $productCategory,
+                data: new ProductCategoryUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    type: $validatedRequest['type'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(ProductCategory $productCategory)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $productCategory);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->productCategoryActions->delete($productCategory);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ProductController.php b/api/app/Http/Controllers/ProductController.php
new file mode 100644
index 000000000..3e86201b5
--- /dev/null
+++ b/api/app/Http/Controllers/ProductController.php
@@ -0,0 +1,507 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Product\ProductActions;
+use App\Actions\Product\ProductPhysicalActions;
+use App\Actions\Product\ProductServiceActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\ProductPhysicalCreateDTO;
+use App\DTOs\ProductPhysicalUpdateDTO;
+use App\DTOs\ProductServiceCreateDTO;
+use App\DTOs\ProductServiceUpdateDTO;
+use App\DTOs\ProductWithRemainingStockDTO;
+use App\Enums\ProductStockFilterEnum;
+use App\Enums\ProductTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Product\ProductPhysicalStoreRequest;
+use App\Http\Requests\Product\ProductPhysicalUpdateRequest;
+use App\Http\Requests\Product\ProductServiceStoreRequest;
+use App\Http\Requests\Product\ProductServiceUpdateRequest;
+use App\Http\Resources\ProductResource;
+use App\Models\Product;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rules\Enum;
+
+class ProductController extends BaseController
+{
+    private ProductActions $productActions;
+
+    private ProductPhysicalActions $productPhysicalActions;
+
+    private ProductServiceActions $productServiceActions;
+
+    public function __construct(
+        ProductActions $productActions,
+        ProductPhysicalActions $productPhysicalActions,
+        ProductServiceActions $productServiceActions
+    ) {
+        parent::__construct();
+
+        $this->productActions = $productActions;
+        $this->productPhysicalActions = $productPhysicalActions;
+        $this->productServiceActions = $productServiceActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', Product::class);
+
+        if ($request->filled('company_id')) $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        if ($request->filled('include_id')) $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+        if ($request->filled('category_id')) $request->merge(['category_id' => HashidsHelper::decodeId($request->category_id)]);
+        if ($request->filled('brand_id')) $request->merge(['brand_id' => HashidsHelper::decodeId($request->brand_id)]);
+        if ($request->filled('default_vat_profile_id')) $request->merge(['default_vat_profile_id' => HashidsHelper::decodeId($request->default_vat_profile_id)]);
+        if ($request->filled('with_remaining_stock.warehouse_id')) {
+            $withRemainingStock = $request->input('with_remaining_stock', []);
+            $withRemainingStock['warehouse_id'] = HashidsHelper::decodeId($request->input('with_remaining_stock.warehouse_id'));
+            $request->merge(['with_remaining_stock' => $withRemainingStock]);
+        }
+
+        $validatedRequest = $request->validate([
+            'refresh' => ['required', 'boolean'],
+            'with_trashed' => ['required', 'boolean'],
+
+            'search' => ['nullable', 'string'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'category_id' => ['nullable', 'integer', new ExistsForCompany('product_categories', $request->company_id)],
+            'brand_id' => ['nullable', 'integer', new ExistsForCompany('brands', $request->company_id)],
+            'default_vat_profile_id' => ['nullable', 'integer', new ExistsForCompany('vat_profiles', $request->company_id)],
+            'is_price_include_vat' => ['nullable', 'boolean'],
+            'is_use_serial_number' => ['nullable', 'boolean'],
+            'is_expirable' => ['nullable', 'boolean'],
+            'type' => ['nullable', 'integer', new Enum(ProductTypeEnum::class)],
+            'status' => ['nullable', 'integer', new Enum(RecordStatusEnum::class)],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('products', $request->company_id)],
+
+            'with_remaining_stock' => ['nullable', 'array'],
+            'with_remaining_stock.end_date' => ['nullable', 'date'],
+            'with_remaining_stock.warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'with_remaining_stock.stock_filter' => ['nullable', 'string', new Enum(ProductStockFilterEnum::class)],
+            'with_remaining_stock.less_than' => ['nullable', 'numeric'],
+            'with_remaining_stock.greater_than' => ['nullable', 'numeric'],
+            'with_remaining_stock.include_service_products' => ['nullable', 'boolean'],
+            'with_remaining_stock.sort_by_remaining_stock' => ['nullable', 'string', 'in:asc,desc'],
+
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $withRemainingStockDTO = null;
+        if (isset($validatedRequest['with_remaining_stock'])) {
+            $withRemainingStock = $validatedRequest['with_remaining_stock'];
+
+            $withRemainingStockDTO = new ProductWithRemainingStockDTO(
+                endDate: $withRemainingStock['end_date'] ?? null,
+                warehouseId: $withRemainingStock['warehouse_id'] ?? null,
+                stockFilter: $withRemainingStock['stock_filter'] ?? null,
+                lessThan: array_key_exists('less_than', $withRemainingStock) ? (float) $withRemainingStock['less_than'] : null,
+                greaterThan: array_key_exists('greater_than', $withRemainingStock) ? (float) $withRemainingStock['greater_than'] : null,
+                includeServiceProducts: array_key_exists('include_service_products', $withRemainingStock) ? (bool) $withRemainingStock['include_service_products'] : null,
+                sortByRemainingStock: $withRemainingStock['sort_by_remaining_stock'] ?? null,
+            );
+        }
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->productActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                categoryId: $validatedRequest['category_id'] ?? null,
+                brandId: $validatedRequest['brand_id'] ?? null,
+                defaultVatProfileId: $validatedRequest['default_vat_profile_id'] ?? null,
+                isPriceIncludeVat: $validatedRequest['is_price_include_vat'] ?? null,
+                isUseSerialNumber: $validatedRequest['is_use_serial_number'] ?? null,
+                isExpirable: $validatedRequest['is_expirable'] ?? null,
+                type: $validatedRequest['type'] ?? null,
+                status: $validatedRequest['status'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+                withRemainingStock: $withRemainingStockDTO,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return ProductResource::collection($result);
+        }
+    }
+
+    public function read(Product $product)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $product);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->productActions->read($product);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new ProductResource($result);
+        }
+    }
+
+    public function storePhysical(ProductPhysicalStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->productPhysicalActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], null
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->productPhysicalActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], null
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            $units = $validatedRequest['product_units'];
+
+            $unitCodes = array_map(fn ($u) => $u['code'], $units);
+            $unitCodes = array_filter($unitCodes, fn ($code) => $code !== config('dcslab.KEYWORDS.AUTO'));
+            $duplicateUnitCodes = array_filter(array_count_values($unitCodes), fn ($c) => $c > 1);
+            if (! empty($duplicateUnitCodes)) {
+                return response()->error(['product_units.code' => [trans('rules.product.unit.duplicate_code')]], 422);
+            }
+
+            $unitIds = array_map(fn ($u) => $u['unit_id'], $units);
+            $dupUnitIds = array_filter(array_count_values($unitIds), fn ($c) => $c > 1);
+            if (! empty($dupUnitIds)) {
+                return response()->error(['product_units.unit_id' => [trans('rules.product.unit.duplicate_unit')]], 422);
+            }
+
+            $conversionValues = array_map(fn ($u) => (string) $u['conversion_value'], $units);
+            $dupConversion = array_filter(array_count_values($conversionValues), fn ($c) => $c > 1);
+            if (! empty($dupConversion)) {
+                return response()->error(['product_units.conversion_value' => [trans('rules.product.unit.duplicate_conversion')]], 422);
+            }
+
+            $baseUnits = array_filter($units, fn ($u) => (float) $u['conversion_value'] == 1.0);
+            $baseCount = count($baseUnits);
+            if ($baseCount !== 1) {
+                return response()->error(['product_units.conversion_value' => [trans('rules.product.unit.single_base')]], 422);
+            }
+
+            $primaryCount = count(array_filter($units, function ($u) {
+                return filter_var($u['is_primary_unit'] ?? false, FILTER_VALIDATE_BOOLEAN);
+            }));
+            if ($primaryCount !== 1) {
+                return response()->error(['product_units.is_primary_unit' => [trans('rules.product.unit.single_primary')]], 422);
+            }
+
+            foreach ($validatedRequest['product_units'] as $index => $productUnit) {
+                if (! array_key_exists('remarks', $productUnit)) {
+                    $validatedRequest['product_units'][$index]['remarks'] = null;
+                }
+            }
+
+            DB::beginTransaction();
+
+            $dto = new ProductPhysicalCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                categoryId: $validatedRequest['category_id'],
+                brandId: $validatedRequest['brand_id'] ?? null,
+                defaultVatProfileId: $validatedRequest['default_vat_profile_id'] ?? null,
+                name: $validatedRequest['name'],
+                isPriceIncludeVat: $validatedRequest['is_price_include_vat'],
+                isUseSerialNumber: $validatedRequest['is_use_serial_number'] ?? false,
+                isExpirable: $validatedRequest['is_expirable'] ?? false,
+                remarks: $validatedRequest['remarks'] ?? null,
+                type: $validatedRequest['type'],
+                status: $validatedRequest['status'],
+
+                productUnits: $validatedRequest['product_units'],
+                images: $validatedRequest['image_hashes'] ?? [],
+            );
+            $result = $this->productPhysicalActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function storeService(ProductServiceStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->productServiceActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], null
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->productServiceActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], null
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new ProductServiceCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                categoryId: $validatedRequest['category_id'],
+                defaultVatProfileId: $validatedRequest['default_vat_profile_id'] ?? null,
+                name: $validatedRequest['name'],
+                isPriceIncludeVat: $validatedRequest['is_price_include_vat'],
+                remarks: $validatedRequest['remarks'] ?? null,
+                status: $validatedRequest['status'],
+                unitId: $validatedRequest['unit_id'],
+                price: $validatedRequest['price'],
+                point: $validatedRequest['point'],
+
+                images: $validatedRequest['image_hashes'] ?? [],
+            );
+            $result = $this->productServiceActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function updatePhysical(Product $product, ProductPhysicalUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->productPhysicalActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], $product->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->productPhysicalActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], $product->id
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            if (! array_key_exists('delete_product_unit_ids', $validatedRequest)) $validatedRequest['delete_product_unit_ids'] = null;
+
+            // Prevent deleting base unit
+            if (! empty($validatedRequest['delete_product_unit_ids'])) {
+                $deletedUnits = $product->productUnits()->whereIn('id', $validatedRequest['delete_product_unit_ids'])->get();
+                if ($deletedUnits->contains(fn ($unit) => (bool) $unit->is_base)) {
+                    return response()->error(['delete_product_unit_ids' => [trans('rules.product.unit.cannot_delete_base_unit')]], 422);
+                }
+            }
+
+            // Custom validations for product units
+            $units = $validatedRequest['product_units'];
+
+            $unitCodes = array_map(fn ($u) => $u['code'], $units);
+            $unitCodes = array_filter($unitCodes, fn ($code) => $code !== config('dcslab.KEYWORDS.AUTO'));
+            $dupUnitCodes = array_filter(array_count_values($unitCodes), fn ($c) => $c > 1);
+            if (! empty($dupUnitCodes)) {
+                return response()->error(['product_units.code' => [trans('rules.product.unit.duplicate_code')]], 422);
+            }
+
+            $unitIds = array_map(fn ($u) => $u['unit_id'], $units);
+            $dupUnitIds = array_filter(array_count_values($unitIds), fn ($c) => $c > 1);
+            if (! empty($dupUnitIds)) {
+                return response()->error(['product_units.unit_id' => [trans('rules.product.unit.duplicate_unit')]], 422);
+            }
+
+            $conversionValues = array_map(fn ($u) => (string) $u['conversion_value'], $units);
+            $dupConversion = array_filter(array_count_values($conversionValues), fn ($c) => $c > 1);
+            if (! empty($dupConversion)) {
+                return response()->error(['product_units.conversion_value' => [trans('rules.product.unit.duplicate_conversion')]], 422);
+            }
+
+            $baseUnits = array_filter($units, fn ($u) => (float) $u['conversion_value'] == 1.0);
+            $baseCount = count($baseUnits);
+            if ($baseCount !== 1) {
+                return response()->error(['product_units.conversion_value' => [trans('rules.product.unit.single_base')]], 422);
+            }
+
+            $primaryCount = count(array_filter($units, function ($u) {
+                return filter_var($u['is_primary_unit'] ?? false, FILTER_VALIDATE_BOOLEAN);
+            }));
+            if ($primaryCount !== 1) {
+                return response()->error(['product_units.is_primary_unit' => [trans('rules.product.unit.single_primary')]], 422);
+            }
+
+            foreach ($validatedRequest['product_units'] as $index => $productUnit) {
+                if (! array_key_exists('remarks', $productUnit)) {
+                    $validatedRequest['product_units'][$index]['remarks'] = null;
+                }
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->productPhysicalActions->update(
+                product: $product,
+                data: new ProductPhysicalUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    code: $validatedRequest['code'],
+                    categoryId: $validatedRequest['category_id'],
+                    brandId: $validatedRequest['brand_id'] ?? null,
+                    defaultVatProfileId: $validatedRequest['default_vat_profile_id'] ?? null,
+                    name: $validatedRequest['name'],
+                    isPriceIncludeVat: $validatedRequest['is_price_include_vat'],
+                    isUseSerialNumber: $validatedRequest['is_use_serial_number'] ?? false,
+                    isExpirable: $validatedRequest['is_expirable'] ?? false,
+                    remarks: $validatedRequest['remarks'] ?? null,
+                    type: $validatedRequest['type'],
+                    status: $validatedRequest['status'],
+
+                    deleteProductUnitIds: $validatedRequest['delete_product_unit_ids'] ?? [],
+                    productUnits: $validatedRequest['product_units'],
+
+                    deleteImageIds: $validatedRequest['delete_image_ids'] ?? [],
+                    images: $validatedRequest['image_hashes'] ?? [],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function updateService(Product $product, ProductServiceUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->productServiceActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], $product->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->productServiceActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], $product->id
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->productServiceActions->update(
+                product: $product,
+                data: new ProductServiceUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    code: $validatedRequest['code'],
+                    categoryId: $validatedRequest['category_id'],
+                    defaultVatProfileId: $validatedRequest['default_vat_profile_id'] ?? null,
+                    name: $validatedRequest['name'],
+                    isPriceIncludeVat: $validatedRequest['is_price_include_vat'],
+                    remarks: $validatedRequest['remarks'] ?? null,
+                    status: $validatedRequest['status'],
+                    unitId: $validatedRequest['unit_id'],
+                    price: $validatedRequest['price'],
+                    point: $validatedRequest['point'],
+
+                    deleteImageIds: $validatedRequest['delete_image_ids'] ?? [],
+                    images: $validatedRequest['image_hashes'] ?? [],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Product $product)
+    {
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->productActions->delete($product);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ProductImageController.php b/api/app/Http/Controllers/ProductImageController.php
new file mode 100644
index 000000000..55e7edf3b
--- /dev/null
+++ b/api/app/Http/Controllers/ProductImageController.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ProductImage\ProductImageActions;
+use App\Http\Resources\ProductImageResource;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class ProductImageController extends BaseController
+{
+    private $productImageActions;
+
+    public function __construct(ProductImageActions $productImageActions)
+    {
+        parent::__construct();
+
+        $this->productImageActions = $productImageActions;
+    }
+
+    public function upload(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+
+        $validatedRequest = $request->validate([
+            'image' => ['required', 'image', 'mimes:jpeg,jpg,png', 'max:5120'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->productImageActions->upload($validatedRequest['image']);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return response()->success(new ProductImageResource($result));
+    }
+}
diff --git a/api/app/Http/Controllers/ProductUnitController.php b/api/app/Http/Controllers/ProductUnitController.php
new file mode 100644
index 000000000..b393bb5e9
--- /dev/null
+++ b/api/app/Http/Controllers/ProductUnitController.php
@@ -0,0 +1,131 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ProductUnit\ProductUnitActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Resources\ProductUnitResource;
+use App\Models\ProductUnit;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class ProductUnitController extends BaseController
+{
+    private ProductUnitActions $productUnitActions;
+
+    public function __construct(ProductUnitActions $productUnitActions)
+    {
+        parent::__construct();
+
+        $this->productUnitActions = $productUnitActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', ProductUnit::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'product_id' => $request->filled('product_id') ? HashidsHelper::decodeId($request->product_id) : null,
+            'unit_id' => $request->filled('unit_id') ? HashidsHelper::decodeId($request->unit_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'product_id' => ['nullable', 'integer', new ExistsForCompany('products', $request->company_id)],
+            'unit_id' => ['nullable', 'integer', new ExistsForCompany('units', $request->company_id)],
+            'is_base' => ['nullable', 'boolean'],
+            'is_primary_unit' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('product_units', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->productUnitActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                productId: $validatedRequest['product_id'] ?? null,
+                unitId: $validatedRequest['unit_id'] ?? null,
+                isBase: $validatedRequest['is_base'] ?? null,
+                isPrimaryUnit: $validatedRequest['is_primary_unit'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return ProductUnitResource::collection($result);
+        }
+    }
+
+    public function read(ProductUnit $productUnit)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $productUnit);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->productUnitActions->read($productUnit);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new ProductUnitResource($result);
+        }
+    }
+}
diff --git a/api/app/Http/Controllers/ProfileController.php b/api/app/Http/Controllers/ProfileController.php
index a274d4fe0..fa3e852b4 100644
--- a/api/app/Http/Controllers/ProfileController.php
+++ b/api/app/Http/Controllers/ProfileController.php
@@ -4,7 +4,7 @@
 
 use App\Actions\Role\RoleActions;
 use App\Actions\User\UserActions;
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Http\Requests\UserProfileRequest;
 use App\Http\Resources\UserProfileResource;
 use Illuminate\Support\Facades\Auth;
@@ -98,7 +98,7 @@ public function updateUserRoles(UserProfileRequest $profileRequest)
 
         $roleId = '';
         if ($addedRole == 'pos') {
-            $roleId = $this->roleActions->readBy('NAME', UserRoles::POS_OWNER->value)->id;
+            $roleId = $this->roleActions->readBy('NAME', UserRolesEnum::POS_OWNER->value)->id;
         }
 
         if (empty($roleId)) {
diff --git a/api/app/Http/Controllers/PurchaseAdditionalCostCategoryController.php b/api/app/Http/Controllers/PurchaseAdditionalCostCategoryController.php
new file mode 100644
index 000000000..c7f80eb62
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseAdditionalCostCategoryController.php
@@ -0,0 +1,207 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PurchaseAdditionalCostCategory\PurchaseAdditionalCostCategoryActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PurchaseAdditionalCostCategoryCreateDTO;
+use App\DTOs\PurchaseAdditionalCostCategoryUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PurchaseAdditionalCostCategory\PurchaseAdditionalCostCategoryStoreRequest;
+use App\Http\Requests\PurchaseAdditionalCostCategory\PurchaseAdditionalCostCategoryUpdateRequest;
+use App\Http\Resources\PurchaseAdditionalCostCategoryResource;
+use App\Models\PurchaseAdditionalCostCategory;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class PurchaseAdditionalCostCategoryController extends BaseController
+{
+    public function __construct(
+        private readonly PurchaseAdditionalCostCategoryActions $purchaseAdditionalCostCategoryActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseAdditionalCostCategory::class);
+
+        $request->merge([
+            'company_id' => HashidsHelper::decodeId($request->company_id),
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+
+            'include_id' => ['nullable', 'integer'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseAdditionalCostCategoryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : PurchaseAdditionalCostCategoryResource::collection($result);
+    }
+
+    public function read(PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchaseAdditionalCostCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseAdditionalCostCategoryActions->read($purchaseAdditionalCostCategory);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new PurchaseAdditionalCostCategoryResource($result);
+    }
+
+    public function store(PurchaseAdditionalCostCategoryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->purchaseAdditionalCostCategoryActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->purchaseAdditionalCostCategoryActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new PurchaseAdditionalCostCategoryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+            );
+            $result = $this->purchaseAdditionalCostCategoryActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(
+        PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory,
+        PurchaseAdditionalCostCategoryUpdateRequest $request
+    ) {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->purchaseAdditionalCostCategoryActions->isUniqueCode(
+                $purchaseAdditionalCostCategory->company_id,
+                $validatedRequest['code'],
+                $purchaseAdditionalCostCategory->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->purchaseAdditionalCostCategoryActions->isUniqueName(
+                $purchaseAdditionalCostCategory->company_id,
+                $validatedRequest['name'],
+                $purchaseAdditionalCostCategory->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->purchaseAdditionalCostCategoryActions->update(
+                purchaseAdditionalCostCategory: $purchaseAdditionalCostCategory,
+                data: new PurchaseAdditionalCostCategoryUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $purchaseAdditionalCostCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->purchaseAdditionalCostCategoryActions->delete($purchaseAdditionalCostCategory);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/PurchaseAdditionalCostController.php b/api/app/Http/Controllers/PurchaseAdditionalCostController.php
new file mode 100644
index 000000000..1fc70f2d6
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseAdditionalCostController.php
@@ -0,0 +1,210 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PurchaseAdditionalCost\PurchaseAdditionalCostActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PurchaseAdditionalCostCreateDTO;
+use App\DTOs\PurchaseAdditionalCostUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PurchaseAdditionalCost\PurchaseAdditionalCostStoreRequest;
+use App\Http\Requests\PurchaseAdditionalCost\PurchaseAdditionalCostUpdateRequest;
+use App\Http\Resources\PurchaseAdditionalCostResource;
+use App\Models\PurchaseAdditionalCost;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class PurchaseAdditionalCostController extends BaseController
+{
+    public function __construct(
+        private readonly PurchaseAdditionalCostActions $purchaseAdditionalCostActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseAdditionalCost::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'purchase_id' => $request->filled('purchase_id') ? HashidsHelper::decodeId($request->purchase_id) : null,
+            'purchase_additional_cost_category_id' => $request->filled('purchase_additional_cost_category_id') ? HashidsHelper::decodeId($request->purchase_additional_cost_category_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'purchase_id' => ['nullable', 'integer', new ExistsForCompany('purchases', $request->company_id)],
+            'purchase_additional_cost_category_id' => ['nullable', 'integer', new ExistsForCompany('purchase_additional_cost_categories', $request->company_id)],
+            'is_amount_payable_paid_off' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseAdditionalCostActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                purchaseId: $validatedRequest['purchase_id'] ?? null,
+                categoryId: $validatedRequest['purchase_additional_cost_category_id'] ?? null,
+                isAmountPayablePaidOff: $validatedRequest['is_amount_payable_paid_off'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : PurchaseAdditionalCostResource::collection($result);
+    }
+
+    public function read(PurchaseAdditionalCost $purchase_additional_cost)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchase_additional_cost);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseAdditionalCostActions->read($purchase_additional_cost);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new PurchaseAdditionalCostResource($result);
+    }
+
+    public function store(PurchaseAdditionalCostStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->purchaseAdditionalCostActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new PurchaseAdditionalCostCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                purchaseId: $validatedRequest['purchase_id'],
+                purchaseAdditionalCostCategoryId: $validatedRequest['purchase_additional_cost_category_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                dueDays: $validatedRequest['due_days'],
+                paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                amountPaidImmediately: $validatedRequest['amount_paid_immediately'],
+                amountPayable: $validatedRequest['amount_payable'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->purchaseAdditionalCostActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(PurchaseAdditionalCost $purchase_additional_cost, PurchaseAdditionalCostUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->purchaseAdditionalCostActions->isUniqueCode(
+                $purchase_additional_cost->company_id,
+                $validatedRequest['code'],
+                $purchase_additional_cost->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->purchaseAdditionalCostActions->update($purchase_additional_cost, new PurchaseAdditionalCostUpdateDTO(
+                purchaseId: $validatedRequest['purchase_id'],
+                purchaseAdditionalCostCategoryId: $validatedRequest['purchase_additional_cost_category_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                dueDays: $validatedRequest['due_days'],
+                paidImmediatelyCashAccountId: $validatedRequest['paid_immediately_cash_account_id'],
+                amountPaidImmediately: $validatedRequest['amount_paid_immediately'],
+                amountPayable: $validatedRequest['amount_payable'],
+                remarks: $validatedRequest['remarks'],
+            ));
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(PurchaseAdditionalCost $purchase_additional_cost)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $purchase_additional_cost);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->purchaseAdditionalCostActions->delete($purchase_additional_cost);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/PurchaseAdditionalCostPaymentController.php b/api/app/Http/Controllers/PurchaseAdditionalCostPaymentController.php
new file mode 100644
index 000000000..bff7f703f
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseAdditionalCostPaymentController.php
@@ -0,0 +1,198 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PurchaseAdditionalCostPayment\PurchaseAdditionalCostPaymentActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PurchaseAdditionalCostPaymentCreateDTO;
+use App\DTOs\PurchaseAdditionalCostPaymentUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PurchaseAdditionalCostPayment\PurchaseAdditionalCostPaymentStoreRequest;
+use App\Http\Requests\PurchaseAdditionalCostPayment\PurchaseAdditionalCostPaymentUpdateRequest;
+use App\Http\Resources\PurchaseAdditionalCostPaymentResource;
+use App\Models\PurchaseAdditionalCostPayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class PurchaseAdditionalCostPaymentController extends BaseController
+{
+    public function __construct(
+        private readonly PurchaseAdditionalCostPaymentActions $purchaseAdditionalCostPaymentActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseAdditionalCostPayment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'purchase_additional_cost_id' => $request->filled('purchase_additional_cost_id') ? HashidsHelper::decodeId($request->purchase_additional_cost_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'purchase_additional_cost_id' => ['nullable', 'integer', new ExistsForCompany('purchase_additional_costs', $request->company_id)],
+            'include_id' => ['nullable', 'integer'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseAdditionalCostPaymentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                purchaseAdditionalCostId: $validatedRequest['purchase_additional_cost_id'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : PurchaseAdditionalCostPaymentResource::collection($result);
+    }
+
+    public function read(PurchaseAdditionalCostPayment $purchase_additional_cost_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchase_additional_cost_payment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseAdditionalCostPaymentActions->read($purchase_additional_cost_payment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new PurchaseAdditionalCostPaymentResource($result);
+    }
+
+    public function store(PurchaseAdditionalCostPaymentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->purchaseAdditionalCostPaymentActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new PurchaseAdditionalCostPaymentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                purchaseAdditionalCostId: $validatedRequest['purchase_additional_cost_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->purchaseAdditionalCostPaymentActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(PurchaseAdditionalCostPayment $purchase_additional_cost_payment, PurchaseAdditionalCostPaymentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->purchaseAdditionalCostPaymentActions->isUniqueCode(
+                $purchase_additional_cost_payment->company_id,
+                $validatedRequest['code'],
+                $purchase_additional_cost_payment->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->purchaseAdditionalCostPaymentActions->update($purchase_additional_cost_payment, new PurchaseAdditionalCostPaymentUpdateDTO(
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            ));
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(PurchaseAdditionalCostPayment $purchase_additional_cost_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $purchase_additional_cost_payment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->purchaseAdditionalCostPaymentActions->delete($purchase_additional_cost_payment);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/PurchaseController.php b/api/app/Http/Controllers/PurchaseController.php
new file mode 100644
index 000000000..4db8bf156
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseController.php
@@ -0,0 +1,390 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Purchase\PurchaseActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PurchaseDirectCreateDTO;
+use App\DTOs\PurchaseDirectUpdateDTO;
+use App\DTOs\PurchaseManualCreateDTO;
+use App\DTOs\PurchaseManualUpdateDTO;
+use App\Enums\PurchaseProgressStatusEnum;
+use App\Enums\PurchaseReceiptModeEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Purchase\PurchaseDirectStoreRequest;
+use App\Http\Requests\Purchase\PurchaseDirectUpdateRequest;
+use App\Http\Requests\Purchase\PurchaseManualStoreRequest;
+use App\Http\Requests\Purchase\PurchaseManualUpdateRequest;
+use App\Http\Resources\PurchaseResource;
+use App\Models\Purchase;
+use App\Models\PurchaseReceipt;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rule;
+
+class PurchaseController extends BaseController
+{
+    public function __construct(
+        private readonly PurchaseActions $purchaseActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', Purchase::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'supplier_id' => $request->filled('supplier_id') ? HashidsHelper::decodeId($request->supplier_id) : null,
+            'purchase_order_id' => $request->filled('purchase_order_id') ? HashidsHelper::decodeId($request->purchase_order_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'end_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'supplier_id' => ['nullable', 'integer', new IsValidSupplier($request->company_id)],
+            'purchase_order_id' => ['nullable', 'integer', new ExistsForCompany('purchase_orders', $request->company_id)],
+            'receipt_mode' => ['nullable', Rule::enum(PurchaseReceiptModeEnum::class)],
+            'is_posted' => ['nullable', 'boolean'],
+            'is_paid_off' => ['nullable', 'boolean'],
+            'progress_status' => ['nullable', Rule::in(PurchaseProgressStatusEnum::toArrayValue())],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+                supplierId: $validatedRequest['supplier_id'] ?? null,
+                purchaseOrderId: $validatedRequest['purchase_order_id'] ?? null,
+                receiptMode: $validatedRequest['receipt_mode'] ?? null,
+                isPosted: $validatedRequest['is_posted'] ?? null,
+                isPaidOff: $validatedRequest['is_paid_off'] ?? null,
+                progressStatus: $validatedRequest['progress_status'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result)
+            ? response()->error($errorMsg)
+            : PurchaseResource::collection($result);
+    }
+
+    public function read(Purchase $purchase)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchase);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseActions->read($purchase);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result)
+            ? response()->error($errorMsg)
+            : new PurchaseResource($result);
+    }
+
+    public function storeDirect(PurchaseDirectStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->purchaseActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            if ($validatedRequest['direct_receipt_code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueDirectReceiptCode = PurchaseReceipt::query()
+                    ->where('company_id', $validatedRequest['company_id'])
+                    ->whereNull('deleted_at')
+                    ->where('code', $validatedRequest['direct_receipt_code'])
+                    ->doesntExist();
+                if (! $isUniqueDirectReceiptCode) {
+                    return response()->error(['direct_receipt_code' => [trans('rules.unique_code')]], 422);
+                }
+            }
+
+            DB::beginTransaction();
+            $dto = new PurchaseDirectCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                dueDays: $validatedRequest['due_days'],
+                supplierId: $validatedRequest['supplier_id'],
+                purchaseOrderId: $validatedRequest['purchase_order_id'],
+                directReceiptCode: $validatedRequest['direct_receipt_code'],
+                directReceiptWarehouseId: $validatedRequest['direct_receipt_warehouse_id'],
+                taxInvoiceNumber: $validatedRequest['tax_invoice_number'],
+                taxInvoiceVatBase: (float) $validatedRequest['tax_invoice_vat_base'],
+                taxInvoiceVat: (float) $validatedRequest['tax_invoice_vat'],
+                remarks: $validatedRequest['remarks'],
+                isPosted: $validatedRequest['is_posted'],
+                rounding: (float) $validatedRequest['rounding'],
+
+                items: $validatedRequest['items'],
+
+                globalDiscounts: $validatedRequest['global_discounts'],
+
+                additionalCosts: $validatedRequest['additional_costs'],
+            );
+            $result = $this->purchaseActions->createDirect(
+                data: $dto
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function storeManual(PurchaseManualStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->purchaseActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new PurchaseManualCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                dueDays: $validatedRequest['due_days'],
+                supplierId: $validatedRequest['supplier_id'],
+                purchaseOrderId: $validatedRequest['purchase_order_id'],
+                taxInvoiceNumber: $validatedRequest['tax_invoice_number'],
+                taxInvoiceVatBase: (float) $validatedRequest['tax_invoice_vat_base'],
+                taxInvoiceVat: (float) $validatedRequest['tax_invoice_vat'],
+                remarks: $validatedRequest['remarks'],
+                isPosted: $validatedRequest['is_posted'],
+                rounding: (float) $validatedRequest['rounding'],
+
+                items: $validatedRequest['items'],
+
+                globalDiscounts: $validatedRequest['global_discounts'],
+
+                additionalCosts: $validatedRequest['additional_costs'],
+            );
+            $result = $this->purchaseActions->createManual(
+                data: $dto
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function updateDirect(Purchase $purchase, PurchaseDirectUpdateRequest $request)
+    {
+        if ($purchase->receipt_mode !== PurchaseReceiptModeEnum::DIRECT) {
+            return response()->error([
+                'receipt_mode' => ['Purchase ini bukan mode direct.'],
+            ], 422);
+        }
+
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->purchaseActions->isUniqueCode(
+                    $purchase->company_id,
+                    $validatedRequest['code'],
+                    $purchase->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+            $result = $this->purchaseActions->updateDirect(
+                purchase: $purchase,
+                data: new PurchaseDirectUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    dueDays: $validatedRequest['due_days'],
+                    supplierId: $validatedRequest['supplier_id'],
+                    purchaseOrderId: $validatedRequest['purchase_order_id'],
+                    directReceiptWarehouseId: $validatedRequest['direct_receipt_warehouse_id'],
+                    taxInvoiceNumber: $validatedRequest['tax_invoice_number'],
+                    taxInvoiceVatBase: (float) $validatedRequest['tax_invoice_vat_base'],
+                    taxInvoiceVat: (float) $validatedRequest['tax_invoice_vat'],
+                    remarks: $validatedRequest['remarks'],
+                    isPosted: $validatedRequest['is_posted'],
+                    rounding: (float) $validatedRequest['rounding'],
+
+                    deleteItemIds: $validatedRequest['delete_item_ids'],
+                    items: $validatedRequest['items'],
+
+                    deleteGlobalDiscountIds: $validatedRequest['delete_global_discount_ids'],
+                    globalDiscounts: $validatedRequest['global_discounts'],
+
+                    deleteAdditionalCostIds: $validatedRequest['delete_additional_cost_ids'],
+                    additionalCosts: $validatedRequest['additional_costs'],
+                ),
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function updateManual(Purchase $purchase, PurchaseManualUpdateRequest $request)
+    {
+        if ($purchase->receipt_mode !== PurchaseReceiptModeEnum::MANUAL) {
+            return response()->error([
+                'receipt_mode' => ['Purchase ini bukan mode manual.'],
+            ], 422);
+        }
+
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->purchaseActions->isUniqueCode(
+                    $purchase->company_id,
+                    $validatedRequest['code'],
+                    $purchase->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+            $result = $this->purchaseActions->updateManual(
+                purchase: $purchase,
+                data: new PurchaseManualUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    dueDays: $validatedRequest['due_days'],
+                    supplierId: $validatedRequest['supplier_id'],
+                    purchaseOrderId: $validatedRequest['purchase_order_id'],
+                    taxInvoiceNumber: $validatedRequest['tax_invoice_number'],
+                    taxInvoiceVatBase: (float) $validatedRequest['tax_invoice_vat_base'],
+                    taxInvoiceVat: (float) $validatedRequest['tax_invoice_vat'],
+                    remarks: $validatedRequest['remarks'],
+                    isPosted: $validatedRequest['is_posted'],
+                    rounding: (float) $validatedRequest['rounding'],
+
+                    deleteItemIds: $validatedRequest['delete_item_ids'],
+                    items: $validatedRequest['items'],
+
+                    deleteGlobalDiscountIds: $validatedRequest['delete_global_discount_ids'],
+                    globalDiscounts: $validatedRequest['global_discounts'],
+
+                    deleteAdditionalCostIds: $validatedRequest['delete_additional_cost_ids'],
+                    additionalCosts: $validatedRequest['additional_costs'],
+                ),
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Purchase $purchase)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $purchase);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->purchaseActions->delete($purchase);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/PurchaseOrderController.php b/api/app/Http/Controllers/PurchaseOrderController.php
new file mode 100644
index 000000000..9e1b3adcb
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseOrderController.php
@@ -0,0 +1,264 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PurchaseOrder\PurchaseOrderActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PurchaseOrderCreateDTO;
+use App\DTOs\PurchaseOrderUpdateDTO;
+use App\Enums\PurchaseProgressStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PurchaseOrder\PurchaseOrderStoreRequest;
+use App\Http\Requests\PurchaseOrder\PurchaseOrderUpdateRequest;
+use App\Http\Resources\PurchaseOrderResource;
+use App\Models\PurchaseOrder;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rule;
+
+class PurchaseOrderController extends BaseController
+{
+    private PurchaseOrderActions $purchaseOrderActions;
+
+    public function __construct(PurchaseOrderActions $purchaseOrderActions)
+    {
+        parent::__construct();
+
+        $this->purchaseOrderActions = $purchaseOrderActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseOrder::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'supplier_id' => $request->filled('supplier_id') ? HashidsHelper::decodeId($request->supplier_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'end_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'supplier_id' => ['nullable', 'integer', new IsValidSupplier($request->company_id)],
+            'progress_status' => ['nullable', 'string', Rule::in(PurchaseProgressStatusEnum::toArrayValue())],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseOrderActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+                supplierId: $validatedRequest['supplier_id'] ?? null,
+                progressStatus: $validatedRequest['progress_status'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return PurchaseOrderResource::collection($result);
+        }
+    }
+
+    public function read(PurchaseOrder $purchaseOrder)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchaseOrder);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseOrderActions->read($purchaseOrder);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new PurchaseOrderResource($result);
+        }
+    }
+
+    public function getProgressStatuses()
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseOrder::class);
+
+        return $this->purchaseOrderActions->getProgressStatuses();
+    }
+
+    public function store(PurchaseOrderStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->purchaseOrderActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new PurchaseOrderCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                dueDays: $validatedRequest['due_days'],
+                supplierId: $validatedRequest['supplier_id'],
+                remarks: $validatedRequest['remarks'],
+                rounding: (float) $validatedRequest['rounding'],
+                globalDiscounts: $validatedRequest['global_discounts'],
+                items: $validatedRequest['items'],
+                downPayments: $validatedRequest['down_payments'],
+                refundedDownPayments: $validatedRequest['refunded_down_payments'],
+            );
+            $result = $this->purchaseOrderActions->create(
+                data: $dto
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(PurchaseOrder $purchaseOrder, PurchaseOrderUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->purchaseOrderActions->isUniqueCode(
+                    $purchaseOrder->company_id,
+                    $validatedRequest['code'],
+                    $purchaseOrder->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->purchaseOrderActions->update(
+                purchaseOrder: $purchaseOrder,
+                data: new PurchaseOrderUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    dueDays: $validatedRequest['due_days'],
+                    supplierId: $validatedRequest['supplier_id'],
+                    remarks: $validatedRequest['remarks'],
+                    rounding: (float) $validatedRequest['rounding'],
+                    deleteGlobalDiscountIds: $validatedRequest['delete_global_discount_ids'],
+                    globalDiscounts: $validatedRequest['global_discounts'],
+                    deleteItemIds: $validatedRequest['delete_item_ids'],
+                    items: $validatedRequest['items'],
+                    deleteDownPaymentIds: $validatedRequest['delete_down_payment_ids'],
+                    downPayments: $validatedRequest['down_payments'],
+                    deleteRefundedDownPaymentIds: $validatedRequest['delete_refunded_down_payment_ids'],
+                    refundedDownPayments: $validatedRequest['refunded_down_payments'],
+                ),
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(PurchaseOrder $purchaseOrder)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $purchaseOrder);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->purchaseOrderActions->delete($purchaseOrder);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/PurchaseOrderDownPaymentController.php b/api/app/Http/Controllers/PurchaseOrderDownPaymentController.php
new file mode 100644
index 000000000..035879ddc
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseOrderDownPaymentController.php
@@ -0,0 +1,137 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PurchaseOrderDownPayment\PurchaseOrderDownPaymentActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Enums\PurchaseOrderDownPaymentAllocationStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Resources\PurchaseOrderDownPaymentResource;
+use App\Models\PurchaseOrderDownPayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PurchaseOrderDownPaymentController extends BaseController
+{
+    public function __construct(
+        private PurchaseOrderDownPaymentActions $purchaseOrderDownPaymentActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseOrderDownPayment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'purchase_order_id' => $request->filled('purchase_order_id') ? HashidsHelper::decodeId($request->purchase_order_id) : null,
+            'supplier_id' => $request->filled('supplier_id') ? HashidsHelper::decodeId($request->supplier_id) : null,
+            'cash_account_id' => $request->filled('cash_account_id') ? HashidsHelper::decodeId($request->cash_account_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'date'],
+            'end_date' => ['nullable', 'date', 'after_or_equal:start_date'],
+            'purchase_order_id' => ['nullable', 'integer', new ExistsForCompany('purchase_orders', $request->company_id)],
+            'supplier_id' => ['nullable', 'integer', new ExistsForCompany('suppliers', $request->company_id)],
+            'cash_account_id' => ['nullable', 'integer', new ExistsForCompany('cash_accounts', $request->company_id)],
+            'allocation_status' => ['nullable', 'string', Rule::in(PurchaseOrderDownPaymentAllocationStatusEnum::toArrayValue())],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseOrderDownPaymentActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+                startDate: $validated['start_date'] ?? null,
+                endDate: $validated['end_date'] ?? null,
+                purchaseOrderId: $validated['purchase_order_id'] ?? null,
+                supplierId: $validated['supplier_id'] ?? null,
+                cashAccountId: $validated['cash_account_id'] ?? null,
+                allocationStatus: $validated['allocation_status'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        if (! isset($validated['paginate'])) {
+                            return null;
+                        }
+
+                        return new ExecutePaginationDTO(
+                            page: $validated['paginate']['page'],
+                            perPage: $validated['paginate']['per_page'],
+                        );
+                    })(),
+                    get: (function () use ($validated) {
+                        if (! isset($validated['get'])) {
+                            return null;
+                        }
+
+                        return new ExecuteGetDTO(
+                            limit: $validated['get']['limit'],
+                        );
+                    })(),
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return PurchaseOrderDownPaymentResource::collection($result);
+    }
+
+    public function read(PurchaseOrderDownPayment $purchaseOrderDownPayment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchaseOrderDownPayment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseOrderDownPaymentActions->read($purchaseOrderDownPayment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new PurchaseOrderDownPaymentResource($result);
+    }
+
+    public function getAllocationStatuses()
+    {
+        return $this->purchaseOrderDownPaymentActions->getAllocationStatuses();
+    }
+}
diff --git a/api/app/Http/Controllers/PurchaseOrderDownPaymentRefundController.php b/api/app/Http/Controllers/PurchaseOrderDownPaymentRefundController.php
new file mode 100644
index 000000000..c8db84acc
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseOrderDownPaymentRefundController.php
@@ -0,0 +1,128 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PurchaseOrderDownPaymentRefund\PurchaseOrderDownPaymentRefundActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Resources\PurchaseOrderDownPaymentRefundResource;
+use App\Models\PurchaseOrderDownPaymentRefund;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseOrderDownPaymentRefundController extends BaseController
+{
+    public function __construct(
+        private PurchaseOrderDownPaymentRefundActions $purchaseOrderDownPaymentRefundActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseOrderDownPaymentRefund::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'purchase_order_id' => $request->filled('purchase_order_id') ? HashidsHelper::decodeId($request->purchase_order_id) : null,
+            'supplier_id' => $request->filled('supplier_id') ? HashidsHelper::decodeId($request->supplier_id) : null,
+            'cash_account_id' => $request->filled('cash_account_id') ? HashidsHelper::decodeId($request->cash_account_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'date'],
+            'end_date' => ['nullable', 'date', 'after_or_equal:start_date'],
+            'purchase_order_id' => ['nullable', 'integer', new ExistsForCompany('purchase_orders', $request->company_id)],
+            'supplier_id' => ['nullable', 'integer', new ExistsForCompany('suppliers', $request->company_id)],
+            'cash_account_id' => ['nullable', 'integer', new ExistsForCompany('cash_accounts', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseOrderDownPaymentRefundActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+                startDate: $validated['start_date'] ?? null,
+                endDate: $validated['end_date'] ?? null,
+                purchaseOrderId: $validated['purchase_order_id'] ?? null,
+                supplierId: $validated['supplier_id'] ?? null,
+                cashAccountId: $validated['cash_account_id'] ?? null,
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        if (! isset($validated['paginate'])) {
+                            return null;
+                        }
+
+                        return new ExecutePaginationDTO(
+                            page: $validated['paginate']['page'],
+                            perPage: $validated['paginate']['per_page'],
+                        );
+                    })(),
+                    get: (function () use ($validated) {
+                        if (! isset($validated['get'])) {
+                            return null;
+                        }
+
+                        return new ExecuteGetDTO(
+                            limit: $validated['get']['limit'],
+                        );
+                    })(),
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return PurchaseOrderDownPaymentRefundResource::collection($result);
+    }
+
+    public function read(PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchaseOrderDownPaymentRefund);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseOrderDownPaymentRefundActions->read($purchaseOrderDownPaymentRefund);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new PurchaseOrderDownPaymentRefundResource($result);
+    }
+}
diff --git a/api/app/Http/Controllers/PurchaseOrderItemController.php b/api/app/Http/Controllers/PurchaseOrderItemController.php
new file mode 100644
index 000000000..9e7ec2305
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseOrderItemController.php
@@ -0,0 +1,136 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PurchaseOrderItem\PurchaseOrderItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Resources\PurchaseOrderItemResource;
+use App\Models\PurchaseOrderItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseOrderItemController extends BaseController
+{
+    public function __construct(
+        private PurchaseOrderItemActions $purchaseOrderItemActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseOrderItem::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'purchase_order_supplier_id' => $request->filled('purchase_order_supplier_id') ? HashidsHelper::decodeId($request->purchase_order_supplier_id) : null,
+            'product_unit_product_category_id' => $request->filled('product_unit_product_category_id') ? HashidsHelper::decodeId($request->product_unit_product_category_id) : null,
+            'product_unit_product_brand_id' => $request->filled('product_unit_product_brand_id') ? HashidsHelper::decodeId($request->product_unit_product_brand_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'purchase_order_code' => ['nullable', 'string'],
+            'purchase_order_start_date' => ['nullable', 'date'],
+            'purchase_order_end_date' => ['nullable', 'date', 'after_or_equal:purchase_order_start_date'],
+            'purchase_order_supplier_id' => ['nullable', 'integer', new ExistsForCompany('suppliers', $request->company_id)],
+            'product_unit_code' => ['nullable', 'string'],
+            'product_unit_product_name' => ['nullable', 'string'],
+            'product_unit_product_category_id' => ['nullable', 'integer', new ExistsForCompany('product_categories', $request->company_id)],
+            'product_unit_product_brand_id' => ['nullable', 'integer', new ExistsForCompany('brands', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseOrderItemActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+
+                purchaseOrderCode: $validated['purchase_order_code'] ?? null,
+                purchaseOrderStartDate: $validated['purchase_order_start_date'] ?? null,
+                purchaseOrderEndDate: $validated['purchase_order_end_date'] ?? null,
+                purchaseOrderSupplierId: $validated['purchase_order_supplier_id'] ?? null,
+                productUnitCode: $validated['product_unit_code'] ?? null,
+                productUnitProductName: $validated['product_unit_product_name'] ?? null,
+                productUnitProductCategoryId: $validated['product_unit_product_category_id'] ?? null,
+                productUnitProductBrandId: $validated['product_unit_product_brand_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        if (! isset($validated['paginate'])) {
+                            return null;
+                        }
+
+                        return new ExecutePaginationDTO(
+                            page: $validated['paginate']['page'],
+                            perPage: $validated['paginate']['per_page'],
+                        );
+                    })(),
+                    get: (function () use ($validated) {
+                        if (! isset($validated['get'])) {
+                            return null;
+                        }
+
+                        return new ExecuteGetDTO(
+                            limit: $validated['get']['limit'],
+                        );
+                    })(),
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return PurchaseOrderItemResource::collection($result);
+    }
+
+    public function read(PurchaseOrderItem $purchaseOrderItem)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchaseOrderItem);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseOrderItemActions->read($purchaseOrderItem);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new PurchaseOrderItemResource($result);
+    }
+}
diff --git a/api/app/Http/Controllers/PurchaseReceiptController.php b/api/app/Http/Controllers/PurchaseReceiptController.php
new file mode 100644
index 000000000..d8448a571
--- /dev/null
+++ b/api/app/Http/Controllers/PurchaseReceiptController.php
@@ -0,0 +1,244 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\PurchaseReceipt\PurchaseReceiptActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\PurchaseReceiptCreateDTO;
+use App\DTOs\PurchaseReceiptUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\PurchaseReceipt\PurchaseReceiptStoreRequest;
+use App\Http\Requests\PurchaseReceipt\PurchaseReceiptUpdateRequest;
+use App\Http\Resources\PurchaseReceiptResource;
+use App\Models\PurchaseReceipt;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class PurchaseReceiptController extends BaseController
+{
+    public function __construct(
+        private readonly PurchaseReceiptActions $purchaseReceiptActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', PurchaseReceipt::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'supplier_id' => $request->filled('supplier_id') ? HashidsHelper::decodeId($request->supplier_id) : null,
+            'purchase_id' => $request->filled('purchase_id') ? HashidsHelper::decodeId($request->purchase_id) : null,
+            'warehouse_id' => $request->filled('warehouse_id') ? HashidsHelper::decodeId($request->warehouse_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+
+            'search' => ['nullable', 'string'],
+            'start_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'end_date' => ['nullable', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'supplier_id' => ['nullable', 'integer', new ExistsForCompany('suppliers', $request->company_id)],
+            'purchase_id' => ['nullable', 'integer', new ExistsForCompany('purchases', $request->company_id)],
+            'warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'is_posted' => ['nullable', 'boolean'],
+            'is_from_direct_purchase' => ['nullable', 'boolean'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseReceiptActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                supplierId: $validatedRequest['supplier_id'] ?? null,
+                purchaseId: $validatedRequest['purchase_id'] ?? null,
+                isFromDirectPurchase: $validatedRequest['is_from_direct_purchase'] ?? null,
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+                warehouseId: $validatedRequest['warehouse_id'] ?? null,
+                isPosted: $validatedRequest['is_posted'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result)
+            ? response()->error($errorMsg)
+            : PurchaseReceiptResource::collection($result);
+    }
+
+    public function read(PurchaseReceipt $purchaseReceipt)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $purchaseReceipt);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->purchaseReceiptActions->read($purchaseReceipt);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result)
+            ? response()->error($errorMsg)
+            : new PurchaseReceiptResource($result);
+    }
+
+    public function storeManual(PurchaseReceiptStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+        $items = collect($validatedRequest['items'])
+            ->map(fn ($item) => [...$item, 'purchase_item_id' => null])
+            ->all();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->purchaseReceiptActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+            $dto = new PurchaseReceiptCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                supplierId: $validatedRequest['supplier_id'],
+                purchaseId: $validatedRequest['purchase_id'] ?? null,
+                isFromDirectPurchase: false,
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                warehouseId: $validatedRequest['warehouse_id'],
+                remarks: $validatedRequest['remarks'] ?? null,
+                isPosted: $validatedRequest['is_posted'],
+                items: $items,
+            );
+            $result = $this->purchaseReceiptActions->createManual(
+                data: $dto,
+                updatePurchaseSummary: true,
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function updateManual(PurchaseReceiptUpdateRequest $request, PurchaseReceipt $purchaseReceipt)
+    {
+        $validatedRequest = $request->validated();
+        $items = collect($validatedRequest['items'])
+            ->map(fn ($item) => [...$item, 'purchase_item_id' => null])
+            ->all();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->purchaseReceiptActions->isUniqueCode(
+                    $purchaseReceipt->company_id,
+                    $validatedRequest['code'],
+                    $purchaseReceipt->id,
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+            $result = $this->purchaseReceiptActions->updateManual(
+                purchaseReceipt: $purchaseReceipt,
+                data: new PurchaseReceiptUpdateDTO(
+                    supplierId: $validatedRequest['supplier_id'],
+                    purchaseId: $validatedRequest['purchase_id'] ?? null,
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    isFromDirectPurchase: false,
+                    warehouseId: $validatedRequest['warehouse_id'],
+                    remarks: $validatedRequest['remarks'] ?? null,
+                    isPosted: $validatedRequest['is_posted'],
+
+                    deleteItemIds: $validatedRequest['delete_item_ids'],
+                    items: $items,
+                ),
+                updatePurchaseSummary: true,
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function deleteManual(PurchaseReceipt $purchaseReceipt)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $purchaseReceipt);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($purchaseReceipt->is_from_direct_purchase) {
+                return response()->error(['purchase_id' => [trans('rules.purchase_receipt.direct_mode_cannot_be_deleted_here')]], 422);
+            }
+
+            DB::beginTransaction();
+            $result = $this->purchaseReceiptActions->delete($purchaseReceipt, updatePurchaseSummary: true);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ReceivableCategoryController.php b/api/app/Http/Controllers/ReceivableCategoryController.php
new file mode 100644
index 000000000..7af37a444
--- /dev/null
+++ b/api/app/Http/Controllers/ReceivableCategoryController.php
@@ -0,0 +1,208 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ReceivableCategory\ReceivableCategoryActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\ReceivableCategoryCreateDTO;
+use App\DTOs\ReceivableCategoryUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\ReceivableCategory\ReceivableCategoryStoreRequest;
+use App\Http\Requests\ReceivableCategory\ReceivableCategoryUpdateRequest;
+use App\Http\Resources\ReceivableCategoryResource;
+use App\Models\ReceivableCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class ReceivableCategoryController extends BaseController
+{
+    public function __construct(
+        private readonly ReceivableCategoryActions $receivableCategoryActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', ReceivableCategory::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('receivable_categories', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->receivableCategoryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : ReceivableCategoryResource::collection($result);
+    }
+
+    public function read(ReceivableCategory $receivableCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $receivableCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->receivableCategoryActions->read($receivableCategory);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new ReceivableCategoryResource($result);
+    }
+
+    public function store(ReceivableCategoryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->receivableCategoryActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->receivableCategoryActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new ReceivableCategoryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                sequence: $validatedRequest['sequence'],
+            );
+            $result = $this->receivableCategoryActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(ReceivableCategory $receivableCategory, ReceivableCategoryUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->receivableCategoryActions->isUniqueCode(
+                $receivableCategory->company_id,
+                $validatedRequest['code'],
+                $receivableCategory->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            $isUniqueName = $this->receivableCategoryActions->isUniqueName(
+                $receivableCategory->company_id,
+                $validatedRequest['name'],
+                $receivableCategory->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->receivableCategoryActions->update(
+                receivableCategory: $receivableCategory,
+                data: new ReceivableCategoryUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    sequence: $validatedRequest['sequence'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(ReceivableCategory $receivableCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $receivableCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->receivableCategoryActions->delete($receivableCategory);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ReceivableController.php b/api/app/Http/Controllers/ReceivableController.php
new file mode 100644
index 000000000..2a28440d2
--- /dev/null
+++ b/api/app/Http/Controllers/ReceivableController.php
@@ -0,0 +1,218 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Receivable\ReceivableActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\ReceivableCreateDTO;
+use App\DTOs\ReceivableUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Receivable\ReceivableStoreRequest;
+use App\Http\Requests\Receivable\ReceivableUpdateRequest;
+use App\Http\Resources\ReceivableResource;
+use App\Models\Receivable;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class ReceivableController extends BaseController
+{
+    public function __construct(
+        private readonly ReceivableActions $receivableActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', Receivable::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'category_id' => $request->filled('category_id') ? HashidsHelper::decodeId($request->category_id) : null,
+            'customer_id' => $request->filled('customer_id') ? HashidsHelper::decodeId($request->customer_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'category_id' => ['nullable', 'integer', new ExistsForCompany('receivable_categories', $request->company_id)],
+            'customer_id' => ['nullable', 'integer', new ExistsForCompany('customers', $request->company_id)],
+            'is_paid_off' => ['nullable', 'boolean'],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('receivables', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->receivableActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                categoryId: $validatedRequest['category_id'] ?? null,
+                customerId: $validatedRequest['customer_id'] ?? null,
+                isPaidOff: $validatedRequest['is_paid_off'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : ReceivableResource::collection($result);
+    }
+
+    public function read(Receivable $receivable)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $receivable);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->receivableActions->read($receivable);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new ReceivableResource($result);
+    }
+
+    public function store(ReceivableStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->receivableActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new ReceivableCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                categoryId: $validatedRequest['category_id'],
+                customerId: $validatedRequest['customer_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                directAmountReceived: (float) $validatedRequest['direct_amount_received'],
+                openingAmountDue: (float) $validatedRequest['opening_amount_due'],
+                dueDays: $validatedRequest['due_days'],
+                remarks: $validatedRequest['remarks'],
+                payments: $validatedRequest['payments'],
+            );
+            $result = $this->receivableActions->create(
+                data: $dto,
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Receivable $receivable, ReceivableUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->receivableActions->isUniqueCode(
+                $receivable->company_id,
+                $validatedRequest['code'],
+                $receivable->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->receivableActions->update(
+                receivable: $receivable,
+                data: new ReceivableUpdateDTO(
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    categoryId: $validatedRequest['category_id'],
+                    customerId: $validatedRequest['customer_id'],
+                    cashAccountId: $validatedRequest['cash_account_id'],
+                    directAmountReceived: (float) $validatedRequest['direct_amount_received'],
+                    openingAmountDue: (float) $validatedRequest['opening_amount_due'],
+                    dueDays: $validatedRequest['due_days'],
+                    remarks: $validatedRequest['remarks'],
+                    deletePaymentIds: $validatedRequest['delete_payment_ids'],
+                    payments: $validatedRequest['payments'],
+                ),
+            );
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Receivable $receivable)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $receivable);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->receivableActions->delete($receivable);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/ReceivablePaymentController.php b/api/app/Http/Controllers/ReceivablePaymentController.php
new file mode 100644
index 000000000..5bdc3389b
--- /dev/null
+++ b/api/app/Http/Controllers/ReceivablePaymentController.php
@@ -0,0 +1,198 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ReceivablePayment\ReceivablePaymentActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\ReceivablePaymentCreateDTO;
+use App\DTOs\ReceivablePaymentUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\ReceivablePayment\ReceivablePaymentStoreRequest;
+use App\Http\Requests\ReceivablePayment\ReceivablePaymentUpdateRequest;
+use App\Http\Resources\ReceivablePaymentResource;
+use App\Models\ReceivablePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class ReceivablePaymentController extends BaseController
+{
+    public function __construct(
+        private readonly ReceivablePaymentActions $receivablePaymentActions,
+    ) {
+        parent::__construct();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', ReceivablePayment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'receivable_id' => $request->filled('receivable_id') ? HashidsHelper::decodeId($request->receivable_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'receivable_id' => ['nullable', 'integer', new ExistsForCompany('receivables', $request->company_id)],
+            'include_id' => ['nullable', 'integer', new ExistsForCompany('receivable_payments', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->receivablePaymentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                receivableId: $validatedRequest['receivable_id'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate'])
+                        ? new ExecutePaginationDTO(
+                            page: $validatedRequest['paginate']['page'],
+                            perPage: $validatedRequest['paginate']['per_page'],
+                        )
+                        : null,
+                    get: isset($validatedRequest['get'])
+                        ? new ExecuteGetDTO(limit: $validatedRequest['get']['limit'])
+                        : null,
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : ReceivablePaymentResource::collection($result);
+    }
+
+    public function read(ReceivablePayment $receivable_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $receivable_payment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->receivablePaymentActions->read($receivable_payment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : new ReceivablePaymentResource($result);
+    }
+
+    public function store(ReceivablePaymentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->receivablePaymentActions->isUniqueCode(
+                $validatedRequest['company_id'],
+                $validatedRequest['code'],
+                null,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $dto = new ReceivablePaymentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                receivableId: $validatedRequest['receivable_id'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            );
+            $result = $this->receivablePaymentActions->create($dto);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(ReceivablePayment $receivable_payment, ReceivablePaymentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $isUniqueCode = $this->receivablePaymentActions->isUniqueCode(
+                $receivable_payment->company_id,
+                $validatedRequest['code'],
+                $receivable_payment->id,
+            );
+            if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+
+            DB::beginTransaction();
+            $result = $this->receivablePaymentActions->update($receivable_payment, new ReceivablePaymentUpdateDTO(
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                cashAccountId: $validatedRequest['cash_account_id'],
+                amount: $validatedRequest['amount'],
+                remarks: $validatedRequest['remarks'],
+            ));
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(ReceivablePayment $receivable_payment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $receivable_payment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+            $result = $this->receivablePaymentActions->delete($receivable_payment);
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/RoleController.php b/api/app/Http/Controllers/RoleController.php
index 10787de05..77f200081 100644
--- a/api/app/Http/Controllers/RoleController.php
+++ b/api/app/Http/Controllers/RoleController.php
@@ -3,7 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Actions\Role\RoleActions;
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Http\Requests\RoleRequest;
 use App\Http\Resources\RoleResource;
 use Exception;
@@ -61,7 +61,7 @@ private function hasAdministratorRole(): bool
         }
 
         foreach ($usr->roles as $r) {
-            if (strtolower($r->name) == UserRoles::ADMINISTRATOR->value) {
+            if (strtolower($r->name) == UserRolesEnum::ADMINISTRATOR->value) {
                 $result = true;
 
                 return $result;
@@ -84,7 +84,7 @@ private function hasDeveloperRole(): bool
         }
 
         foreach ($usr->roles as $r) {
-            if (strtolower($r->name) == UserRoles::DEVELOPER->value) {
+            if (strtolower($r->name) == UserRolesEnum::DEVELOPER->value) {
                 $result = true;
 
                 return $result;
diff --git a/api/app/Http/Controllers/StockAdjustmentCategoryController.php b/api/app/Http/Controllers/StockAdjustmentCategoryController.php
new file mode 100644
index 000000000..34c6823bc
--- /dev/null
+++ b/api/app/Http/Controllers/StockAdjustmentCategoryController.php
@@ -0,0 +1,223 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockAdjustmentCategory\StockAdjustmentCategoryActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockAdjustmentCategoryCreateDTO;
+use App\DTOs\StockAdjustmentCategoryUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockAdjustmentCategory\StockAdjustmentCategoryStoreRequest;
+use App\Http\Requests\StockAdjustmentCategory\StockAdjustmentCategoryUpdateRequest;
+use App\Http\Resources\StockAdjustmentCategoryResource;
+use App\Models\StockAdjustmentCategory;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class StockAdjustmentCategoryController extends BaseController
+{
+    private $stockAdjustmentCategoryActions;
+
+    public function __construct(StockAdjustmentCategoryActions $stockAdjustmentCategoryActions)
+    {
+        parent::__construct();
+
+        $this->stockAdjustmentCategoryActions = $stockAdjustmentCategoryActions;
+    }
+
+    public function store(StockAdjustmentCategoryStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->stockAdjustmentCategoryActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new StockAdjustmentCategoryCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+            );
+            $result = $this->stockAdjustmentCategoryActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', StockAdjustmentCategory::class);
+
+        if ($request->filled('company_id')) $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        if ($request->filled('include_id')) $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'search' => ['nullable', 'string'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'include_id' => ['nullable', 'integer', 'exists:stock_adjustment_categories,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentCategoryActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return StockAdjustmentCategoryResource::collection($result);
+        }
+    }
+
+    public function read(StockAdjustmentCategory $stockAdjustmentCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $stockAdjustmentCategory);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentCategoryActions->read($stockAdjustmentCategory);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new StockAdjustmentCategoryResource($result);
+        }
+    }
+
+    public function update(StockAdjustmentCategory $stockAdjustmentCategory, StockAdjustmentCategoryUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->stockAdjustmentCategoryActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $stockAdjustmentCategory->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->stockAdjustmentCategoryActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                $stockAdjustmentCategory->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->stockAdjustmentCategoryActions->update(
+                stockAdjustmentCategory: $stockAdjustmentCategory,
+                data: new StockAdjustmentCategoryUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockAdjustmentCategory $stockAdjustmentCategory)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $stockAdjustmentCategory);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->stockAdjustmentCategoryActions->delete($stockAdjustmentCategory);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/StockAdjustmentController.php b/api/app/Http/Controllers/StockAdjustmentController.php
new file mode 100644
index 000000000..77379241a
--- /dev/null
+++ b/api/app/Http/Controllers/StockAdjustmentController.php
@@ -0,0 +1,253 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockAdjustment\StockAdjustmentActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockAdjustmentCreateDTO;
+use App\DTOs\StockAdjustmentUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockAdjustment\StockAdjustmentStoreRequest;
+use App\Http\Requests\StockAdjustment\StockAdjustmentUpdateRequest;
+use App\Http\Resources\StockAdjustmentResource;
+use App\Models\StockAdjustment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class StockAdjustmentController extends BaseController
+{
+    private $stockAdjustmentActions;
+
+    public function __construct(StockAdjustmentActions $stockAdjustmentActions)
+    {
+        parent::__construct();
+
+        $this->stockAdjustmentActions = $stockAdjustmentActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', StockAdjustment::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'category_id' => $request->filled('category_id') ? HashidsHelper::decodeId($request->category_id) : null,
+            'in_warehouse_id' => $request->filled('in_warehouse_id') ? HashidsHelper::decodeId($request->in_warehouse_id) : null,
+            'out_warehouse_id' => $request->filled('out_warehouse_id') ? HashidsHelper::decodeId($request->out_warehouse_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'date'],
+            'end_date' => ['nullable', 'date', 'after_or_equal:start_date'],
+            'category_id' => ['nullable', 'integer', new ExistsForCompany('stock_adjustment_categories', $request->company_id)],
+            'in_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'out_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+                categoryId: $validatedRequest['category_id'] ?? null,
+                inWarehouseId: $validatedRequest['in_warehouse_id'] ?? null,
+                outWarehouseId: $validatedRequest['out_warehouse_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return StockAdjustmentResource::collection($result);
+        }
+    }
+
+    public function read(StockAdjustment $stockAdjustment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $stockAdjustment);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentActions->read($stockAdjustment);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new StockAdjustmentResource($result);
+        }
+    }
+
+    public function store(StockAdjustmentStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->stockAdjustmentActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new StockAdjustmentCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                categoryId: $validatedRequest['category_id'],
+                inWarehouseId: $validatedRequest['in_warehouse_id'] ?? null,
+                outWarehouseId: $validatedRequest['out_warehouse_id'] ?? null,
+                remarks: $validatedRequest['remarks'] ?? null,
+                isPosted: $validatedRequest['is_posted'],
+                inItems: $validatedRequest['in_items'] ?? [],
+                outItems: $validatedRequest['out_items'] ?? [],
+            );
+
+            $result = $this->stockAdjustmentActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(StockAdjustment $stockAdjustment, StockAdjustmentUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->stockAdjustmentActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $stockAdjustment->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->stockAdjustmentActions->update(
+                stockAdjustment: $stockAdjustment,
+                data: new StockAdjustmentUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    branchId: $validatedRequest['branch_id'],
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    categoryId: $validatedRequest['category_id'],
+                    inWarehouseId: $validatedRequest['in_warehouse_id'] ?? null,
+                    outWarehouseId: $validatedRequest['out_warehouse_id'] ?? null,
+                    remarks: $validatedRequest['remarks'] ?? null,
+                    isPosted: $validatedRequest['is_posted'],
+                    deleteInItemIds: $validatedRequest['delete_in_item_ids'] ?? [],
+                    inItems: $validatedRequest['in_items'] ?? [],
+                    deleteOutItemIds: $validatedRequest['delete_out_item_ids'] ?? [],
+                    outItems: $validatedRequest['out_items'] ?? [],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockAdjustment $stockAdjustment)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $stockAdjustment);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->stockAdjustmentActions->delete($stockAdjustment);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/StockAdjustmentInItemController.php b/api/app/Http/Controllers/StockAdjustmentInItemController.php
new file mode 100644
index 000000000..a70936856
--- /dev/null
+++ b/api/app/Http/Controllers/StockAdjustmentInItemController.php
@@ -0,0 +1,226 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockAdjustmentInItem\StockAdjustmentInItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockAdjustmentInItemCreateDTO;
+use App\DTOs\StockAdjustmentInItemUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockAdjustmentInItem\StockAdjustmentInItemStoreRequest;
+use App\Http\Requests\StockAdjustmentInItem\StockAdjustmentInItemUpdateRequest;
+use App\Http\Resources\StockAdjustmentInItemResource;
+use App\Models\StockAdjustmentInItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentInItemController extends BaseController
+{
+    private $stockAdjustmentInItemActions;
+
+    public function __construct(StockAdjustmentInItemActions $stockAdjustmentInItemActions)
+    {
+        parent::__construct();
+        $this->stockAdjustmentInItemActions = $stockAdjustmentInItemActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', StockAdjustmentInItem::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'stock_adjustment_category_id' => $request->filled('stock_adjustment_category_id') ? HashidsHelper::decodeId($request->stock_adjustment_category_id) : null,
+            'stock_adjustment_in_warehouse_id' => $request->filled('stock_adjustment_in_warehouse_id') ? HashidsHelper::decodeId($request->stock_adjustment_in_warehouse_id) : null,
+            'stock_adjustment_out_warehouse_id' => $request->filled('stock_adjustment_out_warehouse_id') ? HashidsHelper::decodeId($request->stock_adjustment_out_warehouse_id) : null,
+            'product_unit_product_category_id' => $request->filled('product_unit_product_category_id') ? HashidsHelper::decodeId($request->product_unit_product_category_id) : null,
+            'product_unit_product_brand_id' => $request->filled('product_unit_product_brand_id') ? HashidsHelper::decodeId($request->product_unit_product_brand_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'stock_adjustment_code' => ['nullable', 'string'],
+            'stock_adjustment_start_date' => ['nullable', 'date'],
+            'stock_adjustment_end_date' => ['nullable', 'date', 'after_or_equal:stock_adjustment_start_date'],
+            'stock_adjustment_category_id' => ['nullable', 'integer', new ExistsForCompany('stock_adjustment_categories', $request->company_id)],
+            'stock_adjustment_in_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'stock_adjustment_out_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'product_unit_code' => ['nullable', 'string'],
+            'product_unit_product_name' => ['nullable', 'string'],
+            'product_unit_product_category_id' => ['nullable', 'integer', new ExistsForCompany('product_categories', $request->company_id)],
+            'product_unit_product_brand_id' => ['nullable', 'integer', new ExistsForCompany('brands', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentInItemActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+
+                stockAdjustmentCode: $validated['stock_adjustment_code'] ?? null,
+                stockAdjustmentStartDate: $validated['stock_adjustment_start_date'] ?? null,
+                stockAdjustmentEndDate: $validated['stock_adjustment_end_date'] ?? null,
+                stockAdjustmentCategoryId: $validated['stock_adjustment_category_id'] ?? null,
+                stockAdjustmentInWarehouseId: $validated['stock_adjustment_in_warehouse_id'] ?? null,
+                stockAdjustmentOutWarehouseId: $validated['stock_adjustment_out_warehouse_id'] ?? null,
+                productUnitCode: $validated['product_unit_code'] ?? null,
+                productUnitProductName: $validated['product_unit_product_name'] ?? null,
+                productUnitProductCategoryId: $validated['product_unit_product_category_id'] ?? null,
+                productUnitProductBrandId: $validated['product_unit_product_brand_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        $pagination = null;
+                        if (isset($validated['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validated['paginate']['page'],
+                                perPage: $validated['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validated) {
+                        $get = null;
+                        if (isset($validated['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validated['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return StockAdjustmentInItemResource::collection($result);
+    }
+
+    public function read(StockAdjustmentInItem $stockAdjustmentInItem)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $stockAdjustmentInItem);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentInItemActions->read($stockAdjustmentInItem);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new StockAdjustmentInItemResource($result);
+    }
+
+    public function store(StockAdjustmentInItemStoreRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $dto = new StockAdjustmentInItemCreateDTO(
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'],
+                stockAdjustmentId: $validated['stock_adjustment_id'],
+                qty: $validated['qty'],
+                productUnitId: $validated['product_unit_id'],
+                productUnitConversionValue: $validated['product_unit_conversion_value'],
+                productUnitCogs: $validated['product_unit_cogs'],
+                remarks: $validated['remarks'],
+
+                serials: $validated['serials'],
+            );
+
+            $result = $this->stockAdjustmentInItemActions->create($dto);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(StockAdjustmentInItem $stockAdjustmentInItem, StockAdjustmentInItemUpdateRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $data = new StockAdjustmentInItemUpdateDTO(
+                qty: $validated['qty'],
+                productUnitId: $validated['product_unit_id'],
+                productUnitConversionValue: $validated['product_unit_conversion_value'],
+                productUnitCogs: $validated['product_unit_cogs'],
+                remarks: $validated['remarks'],
+
+                deleteSerialIds: $validated['delete_serial_ids'],
+                serials: $validated['serials'],
+            );
+
+            $result = $this->stockAdjustmentInItemActions->update(
+                stockAdjustmentInItem: $stockAdjustmentInItem,
+                data: $data
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockAdjustmentInItem $stockAdjustmentInItem)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $stockAdjustmentInItem);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentInItemActions->delete($stockAdjustmentInItem);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/StockAdjustmentInItemSerialController.php b/api/app/Http/Controllers/StockAdjustmentInItemSerialController.php
new file mode 100644
index 000000000..93913f9f0
--- /dev/null
+++ b/api/app/Http/Controllers/StockAdjustmentInItemSerialController.php
@@ -0,0 +1,233 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockAdjustmentInItemSerial\StockAdjustmentInItemSerialActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockAdjustmentInItemSerialCreateDTO;
+use App\DTOs\StockAdjustmentInItemSerialUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockAdjustmentInItemSerial\StockAdjustmentInItemSerialStoreRequest;
+use App\Http\Requests\StockAdjustmentInItemSerial\StockAdjustmentInItemSerialUpdateRequest;
+use App\Http\Resources\StockAdjustmentInItemSerialResource;
+use App\Models\StockAdjustmentInItemSerial;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class StockAdjustmentInItemSerialController extends BaseController
+{
+    private $stockAdjustmentInItemSerialActions;
+
+    public function __construct(StockAdjustmentInItemSerialActions $stockAdjustmentInItemSerialActions)
+    {
+        parent::__construct();
+        $this->stockAdjustmentInItemSerialActions = $stockAdjustmentInItemSerialActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', StockAdjustmentInItemSerial::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'stock_adjustment_category_id' => $request->filled('stock_adjustment_category_id') ? HashidsHelper::decodeId($request->stock_adjustment_category_id) : null,
+            'stock_adjustment_in_warehouse_id' => $request->filled('stock_adjustment_in_warehouse_id') ? HashidsHelper::decodeId($request->stock_adjustment_in_warehouse_id) : null,
+            'stock_adjustment_out_warehouse_id' => $request->filled('stock_adjustment_out_warehouse_id') ? HashidsHelper::decodeId($request->stock_adjustment_out_warehouse_id) : null,
+            'product_unit_product_category_id' => $request->filled('product_unit_product_category_id') ? HashidsHelper::decodeId($request->product_unit_product_category_id) : null,
+            'product_unit_product_brand_id' => $request->filled('product_unit_product_brand_id') ? HashidsHelper::decodeId($request->product_unit_product_brand_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'stock_adjustment_code' => ['nullable', 'string'],
+            'stock_adjustment_start_date' => ['nullable', 'date'],
+            'stock_adjustment_end_date' => ['nullable', 'date', 'after_or_equal:stock_adjustment_start_date'],
+            'stock_adjustment_category_id' => ['nullable', 'integer', new ExistsForCompany('stock_adjustment_categories', $request->company_id)],
+            'stock_adjustment_in_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'stock_adjustment_out_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'product_unit_code' => ['nullable', 'string'],
+            'product_unit_product_name' => ['nullable', 'string'],
+            'product_unit_product_category_id' => ['nullable', 'integer', new ExistsForCompany('product_categories', $request->company_id)],
+            'product_unit_product_brand_id' => ['nullable', 'integer', new ExistsForCompany('brands', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentInItemSerialActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+
+                stockAdjustmentCode: $validated['stock_adjustment_code'] ?? null,
+                stockAdjustmentStartDate: $validated['stock_adjustment_start_date'] ?? null,
+                stockAdjustmentEndDate: $validated['stock_adjustment_end_date'] ?? null,
+                stockAdjustmentCategoryId: $validated['stock_adjustment_category_id'] ?? null,
+                stockAdjustmentInWarehouseId: $validated['stock_adjustment_in_warehouse_id'] ?? null,
+                stockAdjustmentOutWarehouseId: $validated['stock_adjustment_out_warehouse_id'] ?? null,
+                stockAdjustmentProductUnitCode: $validated['product_unit_code'] ?? null,
+                stockAdjustmentProductUnitProductName: $validated['product_unit_product_name'] ?? null,
+                stockAdjustmentProductUnitProductCategoryId: $validated['product_unit_product_category_id'] ?? null,
+                stockAdjustmentProductUnitProductBrandId: $validated['product_unit_product_brand_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        $pagination = null;
+                        if (isset($validated['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validated['paginate']['page'],
+                                perPage: $validated['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validated) {
+                        $get = null;
+                        if (isset($validated['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validated['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return StockAdjustmentInItemSerialResource::collection($result);
+    }
+
+    public function read(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+
+        $this->authorize('view', $stockAdjustmentInItemSerial);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentInItemSerialActions->read($stockAdjustmentInItemSerial);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new StockAdjustmentInItemSerialResource($result);
+    }
+
+    public function store(StockAdjustmentInItemSerialStoreRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $dto = new StockAdjustmentInItemSerialCreateDTO(
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'],
+                stockAdjustmentId: $validated['stock_adjustment_id'],
+                stockAdjustmentInItemId: $validated['stock_adjustment_in_item_id'],
+                serial: $validated['serial'],
+            );
+
+            $result = $this->stockAdjustmentInItemSerialActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial, StockAdjustmentInItemSerialUpdateRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $data = StockAdjustmentInItemSerialUpdateDTO::fromStockAdjustmentInItemSerial(
+                $stockAdjustmentInItemSerial,
+                $validated['serial']
+            );
+
+            $result = $this->stockAdjustmentInItemSerialActions->update(
+                $stockAdjustmentInItemSerial,
+                $data
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockAdjustmentInItemSerial $stockAdjustmentInItemSerial)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+
+        $this->authorize('delete', $stockAdjustmentInItemSerial);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->stockAdjustmentInItemSerialActions->delete($stockAdjustmentInItemSerial);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/StockAdjustmentOutItemController.php b/api/app/Http/Controllers/StockAdjustmentOutItemController.php
new file mode 100644
index 000000000..63ba2d2e5
--- /dev/null
+++ b/api/app/Http/Controllers/StockAdjustmentOutItemController.php
@@ -0,0 +1,222 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockAdjustmentOutItem\StockAdjustmentOutItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockAdjustmentOutItemCreateDTO;
+use App\DTOs\StockAdjustmentOutItemUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockAdjustmentOutItem\StockAdjustmentOutItemStoreRequest;
+use App\Http\Requests\StockAdjustmentOutItem\StockAdjustmentOutItemUpdateRequest;
+use App\Http\Resources\StockAdjustmentOutItemResource;
+use App\Models\StockAdjustmentOutItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentOutItemController extends BaseController
+{
+    private $stockAdjustmentOutItemActions;
+
+    public function __construct(StockAdjustmentOutItemActions $stockAdjustmentOutItemActions)
+    {
+        parent::__construct();
+        $this->stockAdjustmentOutItemActions = $stockAdjustmentOutItemActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', StockAdjustmentOutItem::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'stock_adjustment_category_id' => $request->filled('stock_adjustment_category_id') ? HashidsHelper::decodeId($request->stock_adjustment_category_id) : null,
+            'stock_adjustment_in_warehouse_id' => $request->filled('stock_adjustment_in_warehouse_id') ? HashidsHelper::decodeId($request->stock_adjustment_in_warehouse_id) : null,
+            'stock_adjustment_out_warehouse_id' => $request->filled('stock_adjustment_out_warehouse_id') ? HashidsHelper::decodeId($request->stock_adjustment_out_warehouse_id) : null,
+            'product_unit_product_category_id' => $request->filled('product_unit_product_category_id') ? HashidsHelper::decodeId($request->product_unit_product_category_id) : null,
+            'product_unit_product_brand_id' => $request->filled('product_unit_product_brand_id') ? HashidsHelper::decodeId($request->product_unit_product_brand_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'stock_adjustment_code' => ['nullable', 'string'],
+            'stock_adjustment_start_date' => ['nullable', 'date'],
+            'stock_adjustment_end_date' => ['nullable', 'date', 'after_or_equal:stock_adjustment_start_date'],
+            'stock_adjustment_category_id' => ['nullable', 'integer', new ExistsForCompany('stock_adjustment_categories', $request->company_id)],
+            'stock_adjustment_in_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'stock_adjustment_out_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'product_unit_code' => ['nullable', 'string'],
+            'product_unit_product_name' => ['nullable', 'string'],
+            'product_unit_product_category_id' => ['nullable', 'integer', new ExistsForCompany('product_categories', $request->company_id)],
+            'product_unit_product_brand_id' => ['nullable', 'integer', new ExistsForCompany('brands', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentOutItemActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+
+                stockAdjustmentCode: $validated['stock_adjustment_code'] ?? null,
+                stockAdjustmentStartDate: $validated['stock_adjustment_start_date'] ?? null,
+                stockAdjustmentEndDate: $validated['stock_adjustment_end_date'] ?? null,
+                stockAdjustmentCategoryId: $validated['stock_adjustment_category_id'] ?? null,
+                stockAdjustmentInWarehouseId: $validated['stock_adjustment_in_warehouse_id'] ?? null,
+                stockAdjustmentOutWarehouseId: $validated['stock_adjustment_out_warehouse_id'] ?? null,
+                stockAdjustmentProductUnitCode: $validated['product_unit_code'] ?? null,
+                stockAdjustmentProductUnitProductName: $validated['product_unit_product_name'] ?? null,
+                stockAdjustmentProductUnitProductCategoryId: $validated['product_unit_product_category_id'] ?? null,
+                stockAdjustmentProductUnitProductBrandId: $validated['product_unit_product_brand_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        $pagination = null;
+                        if (isset($validated['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validated['paginate']['page'],
+                                perPage: $validated['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validated) {
+                        $get = null;
+                        if (isset($validated['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validated['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return StockAdjustmentOutItemResource::collection($result);
+    }
+
+    public function read(StockAdjustmentOutItem $stockAdjustmentOutItem)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $stockAdjustmentOutItem);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentOutItemActions->read($stockAdjustmentOutItem);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new StockAdjustmentOutItemResource($result);
+    }
+
+    public function store(StockAdjustmentOutItemStoreRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $dto = new StockAdjustmentOutItemCreateDTO(
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'],
+                stockAdjustmentId: $validated['stock_adjustment_id'],
+                qty: $validated['qty'],
+                productUnitId: $validated['product_unit_id'],
+                productUnitConversionValue: $validated['product_unit_conversion_value'],
+                remarks: $validated['remarks'],
+                serials: $validated['serials'],
+            );
+
+            $result = $this->stockAdjustmentOutItemActions->create($dto);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(StockAdjustmentOutItem $stockAdjustmentOutItem, StockAdjustmentOutItemUpdateRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $data = new StockAdjustmentOutItemUpdateDTO(
+                qty: $validated['qty'],
+                productUnitId: $validated['product_unit_id'],
+                productUnitConversionValue: $validated['product_unit_conversion_value'],
+                remarks: $validated['remarks'],
+                deleteSerialIds: $validated['delete_serial_ids'],
+                serials: $validated['serials'],
+            );
+
+            $result = $this->stockAdjustmentOutItemActions->update(
+                stockAdjustmentOutItem: $stockAdjustmentOutItem,
+                data: $data
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockAdjustmentOutItem $stockAdjustmentOutItem)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $stockAdjustmentOutItem);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentOutItemActions->delete($stockAdjustmentOutItem);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/StockAdjustmentOutItemSerialController.php b/api/app/Http/Controllers/StockAdjustmentOutItemSerialController.php
new file mode 100644
index 000000000..f238108c0
--- /dev/null
+++ b/api/app/Http/Controllers/StockAdjustmentOutItemSerialController.php
@@ -0,0 +1,233 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockAdjustmentOutItemSerial\StockAdjustmentOutItemSerialActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockAdjustmentOutItemSerialCreateDTO;
+use App\DTOs\StockAdjustmentOutItemSerialUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockAdjustmentOutItemSerial\StockAdjustmentOutItemSerialStoreRequest;
+use App\Http\Requests\StockAdjustmentOutItemSerial\StockAdjustmentOutItemSerialUpdateRequest;
+use App\Http\Resources\StockAdjustmentOutItemSerialResource;
+use App\Models\StockAdjustmentOutItemSerial;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class StockAdjustmentOutItemSerialController extends BaseController
+{
+    private $stockAdjustmentOutItemSerialActions;
+
+    public function __construct(StockAdjustmentOutItemSerialActions $stockAdjustmentOutItemSerialActions)
+    {
+        parent::__construct();
+        $this->stockAdjustmentOutItemSerialActions = $stockAdjustmentOutItemSerialActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', StockAdjustmentOutItemSerial::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'stock_adjustment_category_id' => $request->filled('stock_adjustment_category_id') ? HashidsHelper::decodeId($request->stock_adjustment_category_id) : null,
+            'stock_adjustment_in_warehouse_id' => $request->filled('stock_adjustment_in_warehouse_id') ? HashidsHelper::decodeId($request->stock_adjustment_in_warehouse_id) : null,
+            'stock_adjustment_out_warehouse_id' => $request->filled('stock_adjustment_out_warehouse_id') ? HashidsHelper::decodeId($request->stock_adjustment_out_warehouse_id) : null,
+            'product_unit_product_category_id' => $request->filled('product_unit_product_category_id') ? HashidsHelper::decodeId($request->product_unit_product_category_id) : null,
+            'product_unit_product_brand_id' => $request->filled('product_unit_product_brand_id') ? HashidsHelper::decodeId($request->product_unit_product_brand_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'stock_adjustment_code' => ['nullable', 'string'],
+            'stock_adjustment_start_date' => ['nullable', 'date'],
+            'stock_adjustment_end_date' => ['nullable', 'date', 'after_or_equal:stock_adjustment_start_date'],
+            'stock_adjustment_category_id' => ['nullable', 'integer', new ExistsForCompany('stock_adjustment_categories', $request->company_id)],
+            'stock_adjustment_in_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'stock_adjustment_out_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'product_unit_code' => ['nullable', 'string'],
+            'product_unit_product_name' => ['nullable', 'string'],
+            'product_unit_product_category_id' => ['nullable', 'integer', new ExistsForCompany('product_categories', $request->company_id)],
+            'product_unit_product_brand_id' => ['nullable', 'integer', new ExistsForCompany('brands', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentOutItemSerialActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+
+                stockAdjustmentCode: $validated['stock_adjustment_code'] ?? null,
+                stockAdjustmentStartDate: $validated['stock_adjustment_start_date'] ?? null,
+                stockAdjustmentEndDate: $validated['stock_adjustment_end_date'] ?? null,
+                stockAdjustmentCategoryId: $validated['stock_adjustment_category_id'] ?? null,
+                stockAdjustmentInWarehouseId: $validated['stock_adjustment_in_warehouse_id'] ?? null,
+                stockAdjustmentOutWarehouseId: $validated['stock_adjustment_out_warehouse_id'] ?? null,
+                stockAdjustmentProductUnitCode: $validated['product_unit_code'] ?? null,
+                stockAdjustmentProductUnitProductName: $validated['product_unit_product_name'] ?? null,
+                stockAdjustmentProductUnitProductCategoryId: $validated['product_unit_product_category_id'] ?? null,
+                stockAdjustmentProductUnitProductBrandId: $validated['product_unit_product_brand_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        $pagination = null;
+                        if (isset($validated['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validated['paginate']['page'],
+                                perPage: $validated['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validated) {
+                        $get = null;
+                        if (isset($validated['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validated['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return StockAdjustmentOutItemSerialResource::collection($result);
+    }
+
+    public function read(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+
+        $this->authorize('view', $stockAdjustmentOutItemSerial);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockAdjustmentOutItemSerialActions->read($stockAdjustmentOutItemSerial);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new StockAdjustmentOutItemSerialResource($result);
+    }
+
+    public function store(StockAdjustmentOutItemSerialStoreRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $dto = new StockAdjustmentOutItemSerialCreateDTO(
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'],
+                stockAdjustmentId: $validated['stock_adjustment_id'],
+                stockAdjustmentOutItemId: $validated['stock_adjustment_out_item_id'],
+                serial: $validated['serial'],
+            );
+
+            $result = $this->stockAdjustmentOutItemSerialActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial, StockAdjustmentOutItemSerialUpdateRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $data = StockAdjustmentOutItemSerialUpdateDTO::fromStockAdjustmentOutItemSerial(
+                $stockAdjustmentOutItemSerial,
+                $validated['serial']
+            );
+
+            $result = $this->stockAdjustmentOutItemSerialActions->update(
+                $stockAdjustmentOutItemSerial,
+                $data
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+
+        $this->authorize('delete', $stockAdjustmentOutItemSerial);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->stockAdjustmentOutItemSerialActions->delete($stockAdjustmentOutItemSerial);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/StockTransferController.php b/api/app/Http/Controllers/StockTransferController.php
new file mode 100644
index 000000000..55933741a
--- /dev/null
+++ b/api/app/Http/Controllers/StockTransferController.php
@@ -0,0 +1,244 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockTransfer\StockTransferActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockTransferCreateDTO;
+use App\DTOs\StockTransferUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockTransfer\StockTransferStoreRequest;
+use App\Http\Requests\StockTransfer\StockTransferUpdateRequest;
+use App\Http\Resources\StockTransferResource;
+use App\Models\StockTransfer;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidWarehouse;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class StockTransferController extends BaseController
+{
+    private $stockTransferActions;
+
+    public function __construct(StockTransferActions $stockTransferActions)
+    {
+        parent::__construct();
+
+        $this->stockTransferActions = $stockTransferActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', StockTransfer::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'source_warehouse_id' => $request->filled('source_warehouse_id') ? HashidsHelper::decodeId($request->source_warehouse_id) : null,
+            'destination_warehouse_id' => $request->filled('destination_warehouse_id') ? HashidsHelper::decodeId($request->destination_warehouse_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'start_date' => ['nullable', 'date'],
+            'end_date' => ['nullable', 'date', 'after_or_equal:start_date'],
+            'source_warehouse_id' => ['nullable', 'integer', new IsValidWarehouse($request->company_id, false)],
+            'destination_warehouse_id' => ['nullable', 'integer', new IsValidWarehouse($request->company_id, false)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockTransferActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+
+                search: $validatedRequest['search'] ?? null,
+                startDate: $validatedRequest['start_date'] ?? null,
+                endDate: $validatedRequest['end_date'] ?? null,
+                sourceWarehouseId: $validatedRequest['source_warehouse_id'] ?? null,
+                destinationWarehouseId: $validatedRequest['destination_warehouse_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page']
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit']
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return StockTransferResource::collection($result);
+    }
+
+    public function read(StockTransfer $stockTransfer)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $stockTransfer);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockTransferActions->read($stockTransfer);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new StockTransferResource($result);
+    }
+
+    public function store(StockTransferStoreRequest $stockTransferStoreRequest)
+    {
+        $validatedRequest = $stockTransferStoreRequest->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->stockTransferActions->isUniqueCode(
+                    companyId: $validatedRequest['company_id'],
+                    code: $validatedRequest['code'],
+                    exceptId: null
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $dto = new StockTransferCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                date: $validatedRequest['date'],
+                sourceWarehouseId: $validatedRequest['source_warehouse_id'],
+                destinationWarehouseId: $validatedRequest['destination_warehouse_id'],
+                remarks: $validatedRequest['remarks'],
+                isPosted: $validatedRequest['is_posted'],
+                items: $validatedRequest['items'],
+            );
+            $result = $this->stockTransferActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(StockTransfer $stockTransfer, StockTransferUpdateRequest $stockTransferUpdateRequest)
+    {
+        $validatedRequest = $stockTransferUpdateRequest->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->stockTransferActions->isUniqueCode(
+                    companyId: $validatedRequest['company_id'],
+                    code: $validatedRequest['code'],
+                    exceptId: $stockTransfer->id
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            DB::beginTransaction();
+
+            $result = $this->stockTransferActions->update(
+                stockTransfer: $stockTransfer,
+                data: new StockTransferUpdateDTO(
+                    companyId: $validatedRequest['company_id'],
+                    branchId: $validatedRequest['branch_id'],
+                    code: $validatedRequest['code'],
+                    date: $validatedRequest['date'],
+                    sourceWarehouseId: $validatedRequest['source_warehouse_id'],
+                    destinationWarehouseId: $validatedRequest['destination_warehouse_id'],
+                    remarks: $validatedRequest['remarks'],
+                    isPosted: $validatedRequest['is_posted'],
+                    deleteItemIds: $validatedRequest['delete_item_ids'],
+                    items: $validatedRequest['items'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockTransfer $stockTransfer)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $stockTransfer);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->stockTransferActions->delete($stockTransfer);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/StockTransferItemController.php b/api/app/Http/Controllers/StockTransferItemController.php
new file mode 100644
index 000000000..ffc25971b
--- /dev/null
+++ b/api/app/Http/Controllers/StockTransferItemController.php
@@ -0,0 +1,222 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockTransferItem\StockTransferItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockTransferItemCreateDTO;
+use App\DTOs\StockTransferItemUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockTransferItem\StockTransferItemStoreRequest;
+use App\Http\Requests\StockTransferItem\StockTransferItemUpdateRequest;
+use App\Http\Resources\StockTransferItemResource;
+use App\Models\StockTransferItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class StockTransferItemController extends BaseController
+{
+    private $stockTransferItemActions;
+
+    public function __construct(StockTransferItemActions $stockTransferItemActions)
+    {
+        parent::__construct();
+
+        $this->stockTransferItemActions = $stockTransferItemActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', StockTransferItem::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'stock_transfer_source_warehouse_id' => $request->filled('stock_transfer_source_warehouse_id') ? HashidsHelper::decodeId($request->stock_transfer_source_warehouse_id) : null,
+            'stock_transfer_destination_warehouse_id' => $request->filled('stock_transfer_destination_warehouse_id') ? HashidsHelper::decodeId($request->stock_transfer_destination_warehouse_id) : null,
+            'product_unit_product_category_id' => $request->filled('product_unit_product_category_id') ? HashidsHelper::decodeId($request->product_unit_product_category_id) : null,
+            'product_unit_product_brand_id' => $request->filled('product_unit_product_brand_id') ? HashidsHelper::decodeId($request->product_unit_product_brand_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'stock_transfer_code' => ['nullable', 'string'],
+            'stock_transfer_start_date' => ['nullable', 'date'],
+            'stock_transfer_end_date' => ['nullable', 'date', 'after_or_equal:stock_transfer_start_date'],
+            'stock_transfer_source_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'stock_transfer_destination_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'product_unit_code' => ['nullable', 'string'],
+            'product_unit_product_name' => ['nullable', 'string'],
+            'product_unit_product_category_id' => ['nullable', 'integer', new ExistsForCompany('product_categories', $request->company_id)],
+            'product_unit_product_brand_id' => ['nullable', 'integer', new ExistsForCompany('brands', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockTransferItemActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+
+                stockTransferCode: $validated['stock_transfer_code'] ?? null,
+                stockTransferStartDate: $validated['stock_transfer_start_date'] ?? null,
+                stockTransferEndDate: $validated['stock_transfer_end_date'] ?? null,
+                stockTransferSourceWarehouseId: $validated['stock_transfer_source_warehouse_id'] ?? null,
+                stockTransferDestinationWarehouseId: $validated['stock_transfer_destination_warehouse_id'] ?? null,
+                productUnitCode: $validated['product_unit_code'] ?? null,
+                productUnitProductName: $validated['product_unit_product_name'] ?? null,
+                productUnitProductCategoryId: $validated['product_unit_product_category_id'] ?? null,
+                productUnitProductBrandId: $validated['product_unit_product_brand_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        $pagination = null;
+                        if (isset($validated['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validated['paginate']['page'],
+                                perPage: $validated['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validated) {
+                        $get = null;
+                        if (isset($validated['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validated['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            $response = StockTransferItemResource::collection($result);
+
+            return $response;
+        }
+    }
+
+    public function read(StockTransferItem $stockTransferItem)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $stockTransferItem);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockTransferItemActions->read($stockTransferItem);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            $response = new StockTransferItemResource($result);
+
+            return $response;
+        }
+    }
+
+    public function store(StockTransferItemStoreRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $dto = new StockTransferItemCreateDTO(
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'],
+                stockTransferId: $validated['stock_transfer_id'],
+                qty: $validated['qty'],
+                productUnitId: $validated['product_unit_id'],
+                productUnitConversionValue: $validated['product_unit_conversion_value'],
+                remarks: $validated['remarks'],
+                serials: $validated['serials'],
+            );
+            $result = $this->stockTransferItemActions->create($dto);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(StockTransferItem $stockTransferItem, StockTransferItemUpdateRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $data = new StockTransferItemUpdateDTO(
+                qty: $validated['qty'],
+                productUnitId: $validated['product_unit_id'],
+                productUnitConversionValue: $validated['product_unit_conversion_value'],
+                remarks: $validated['remarks'],
+                deleteSerialIds: $validated['delete_serial_ids'],
+                serials: $validated['serials'],
+            );
+            $result = $this->stockTransferItemActions->update(
+                stockTransferItem: $stockTransferItem,
+                data: $data
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockTransferItem $stockTransferItem)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $stockTransferItem);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockTransferItemActions->delete($stockTransferItem);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/StockTransferItemSerialController.php b/api/app/Http/Controllers/StockTransferItemSerialController.php
new file mode 100644
index 000000000..891116e19
--- /dev/null
+++ b/api/app/Http/Controllers/StockTransferItemSerialController.php
@@ -0,0 +1,231 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\StockTransferItemSerial\StockTransferItemSerialActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\StockTransferItemSerialCreateDTO;
+use App\DTOs\StockTransferItemSerialUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\StockTransferItemSerial\StockTransferItemSerialStoreRequest;
+use App\Http\Requests\StockTransferItemSerial\StockTransferItemSerialUpdateRequest;
+use App\Http\Resources\StockTransferItemSerialResource;
+use App\Models\StockTransferItemSerial;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class StockTransferItemSerialController extends BaseController
+{
+    private $stockTransferItemSerialActions;
+
+    public function __construct(StockTransferItemSerialActions $stockTransferItemSerialActions)
+    {
+        parent::__construct();
+
+        $this->stockTransferItemSerialActions = $stockTransferItemSerialActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', StockTransferItemSerial::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'branch_id' => $request->filled('branch_id') ? HashidsHelper::decodeId($request->branch_id) : null,
+            'stock_transfer_source_warehouse_id' => $request->filled('stock_transfer_source_warehouse_id') ? HashidsHelper::decodeId($request->stock_transfer_source_warehouse_id) : null,
+            'stock_transfer_destination_warehouse_id' => $request->filled('stock_transfer_destination_warehouse_id') ? HashidsHelper::decodeId($request->stock_transfer_destination_warehouse_id) : null,
+            'product_unit_product_category_id' => $request->filled('product_unit_product_category_id') ? HashidsHelper::decodeId($request->product_unit_product_category_id) : null,
+            'product_unit_product_brand_id' => $request->filled('product_unit_product_brand_id') ? HashidsHelper::decodeId($request->product_unit_product_brand_id) : null,
+        ]);
+
+        $validated = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+
+            'stock_transfer_code' => ['nullable', 'string'],
+            'stock_transfer_start_date' => ['nullable', 'date'],
+            'stock_transfer_end_date' => ['nullable', 'date', 'after_or_equal:stock_transfer_start_date'],
+            'stock_transfer_source_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'stock_transfer_destination_warehouse_id' => ['nullable', 'integer', new ExistsForCompany('warehouses', $request->company_id)],
+            'product_unit_code' => ['nullable', 'string'],
+            'product_unit_product_name' => ['nullable', 'string'],
+            'product_unit_product_category_id' => ['nullable', 'integer', new ExistsForCompany('product_categories', $request->company_id)],
+            'product_unit_product_brand_id' => ['nullable', 'integer', new ExistsForCompany('brands', $request->company_id)],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockTransferItemSerialActions->readAny(
+                withTrashed: $validated['with_trashed'],
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'] ?? null,
+                search: $validated['search'] ?? null,
+
+                stockTransferCode: $validated['stock_transfer_code'] ?? null,
+                stockTransferStartDate: $validated['stock_transfer_start_date'] ?? null,
+                stockTransferEndDate: $validated['stock_transfer_end_date'] ?? null,
+                stockTransferSourceWarehouseId: $validated['stock_transfer_source_warehouse_id'] ?? null,
+                stockTransferDestinationWarehouseId: $validated['stock_transfer_destination_warehouse_id'] ?? null,
+                stockTransferItemCode: $validated['product_unit_code'] ?? null,
+                stockTransferItemProductName: $validated['product_unit_product_name'] ?? null,
+                stockTransferItemProductCategoryId: $validated['product_unit_product_category_id'] ?? null,
+                stockTransferItemProductBrandId: $validated['product_unit_product_brand_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validated['refresh'],
+                    pagination: (function () use ($validated) {
+                        $pagination = null;
+                        if (isset($validated['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validated['paginate']['page'],
+                                perPage: $validated['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validated) {
+                        $get = null;
+                        if (isset($validated['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validated['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                ),
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            $response = StockTransferItemSerialResource::collection($result);
+
+            return $response;
+        }
+    }
+
+    public function read(StockTransferItemSerial $stockTransferItemSerial)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $stockTransferItemSerial);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->stockTransferItemSerialActions->read($stockTransferItemSerial);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            $response = new StockTransferItemSerialResource($result);
+
+            return $response;
+        }
+    }
+
+    public function store(StockTransferItemSerialStoreRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $dto = new StockTransferItemSerialCreateDTO(
+                companyId: $validated['company_id'],
+                branchId: $validated['branch_id'],
+                stockTransferId: $validated['stock_transfer_id'],
+                stockTransferItemId: $validated['stock_transfer_item_id'],
+                serial: $validated['serial'],
+            );
+            $result = $this->stockTransferItemSerialActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(StockTransferItemSerial $stockTransferItemSerial, StockTransferItemSerialUpdateRequest $request)
+    {
+        $validated = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $data = StockTransferItemSerialUpdateDTO::fromStockTransferItemSerial(
+                $stockTransferItemSerial,
+                $validated['serial'],
+            );
+            $result = $this->stockTransferItemSerialActions->update(
+                stockTransferItemSerial: $stockTransferItemSerial,
+                data: $data
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(StockTransferItemSerial $stockTransferItemSerial)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $stockTransferItemSerial);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->stockTransferItemSerialActions->delete($stockTransferItemSerial);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/SupplierController.php b/api/app/Http/Controllers/SupplierController.php
new file mode 100644
index 000000000..64d31334e
--- /dev/null
+++ b/api/app/Http/Controllers/SupplierController.php
@@ -0,0 +1,249 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Supplier\SupplierActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\SupplierCreateDTO;
+use App\DTOs\SupplierUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Supplier\SupplierStoreRequest;
+use App\Http\Requests\Supplier\SupplierUpdateRequest;
+use App\Http\Resources\SupplierResource;
+use App\Models\Supplier;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class SupplierController extends BaseController
+{
+    private $supplierActions;
+
+    public function __construct(SupplierActions $supplierActions)
+    {
+        parent::__construct();
+
+        $this->supplierActions = $supplierActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('viewAny', Supplier::class);
+
+        $request->merge([
+            'company_id' => $request->filled('company_id') ? HashidsHelper::decodeId($request->company_id) : null,
+            'include_id' => $request->filled('include_id') ? HashidsHelper::decodeId($request->include_id) : null,
+        ]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+
+            'search' => ['nullable', 'string'],
+            'include_id' => ['nullable', 'integer'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:1'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:1'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->supplierActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+
+                search: $validatedRequest['search'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })(),
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return SupplierResource::collection($result);
+        }
+    }
+
+    public function read(Supplier $supplier)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('view', $supplier);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->supplierActions->read($supplier);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        }
+
+        return new SupplierResource($result);
+    }
+
+    public function store(SupplierStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+        $validatedRequest['user_id'] = Auth::id();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->supplierActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->supplierActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new SupplierCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                address: $validatedRequest['address'],
+                city: $validatedRequest['city'],
+                paymentTermType: $validatedRequest['payment_term_type'],
+                paymentTerm: $validatedRequest['payment_term'],
+                taxableEnterprise: $validatedRequest['taxable_enterprise'],
+                taxId: $validatedRequest['tax_id'],
+                remarks: $validatedRequest['remarks'],
+                status: $validatedRequest['status'],
+            );
+            $result = $this->supplierActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Supplier $supplier, SupplierUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUniqueCode = $this->supplierActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $supplier->id
+                );
+                if (! $isUniqueCode) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->supplierActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                $supplier->id
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->supplierActions->update(
+                supplier: $supplier,
+                data: new SupplierUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    address: $validatedRequest['address'],
+                    city: $validatedRequest['city'],
+                    paymentTermType: $validatedRequest['payment_term_type'],
+                    paymentTerm: $validatedRequest['payment_term'],
+                    taxableEnterprise: $validatedRequest['taxable_enterprise'],
+                    taxId: $validatedRequest['tax_id'],
+                    remarks: $validatedRequest['remarks'],
+                    status: $validatedRequest['status'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Supplier $supplier)
+    {
+        if (! Auth::check()) return response()->error(trans('auth.unauthenticated'), 401);
+        $this->authorize('delete', $supplier);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->supplierActions->delete($supplier);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/UnitController.php b/api/app/Http/Controllers/UnitController.php
new file mode 100644
index 000000000..e2ab4f805
--- /dev/null
+++ b/api/app/Http/Controllers/UnitController.php
@@ -0,0 +1,225 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Unit\UnitActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\UnitCreateDTO;
+use App\DTOs\UnitUpdateDTO;
+use App\Enums\UnitTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Unit\UnitStoreRequest;
+use App\Http\Requests\Unit\UnitUpdateRequest;
+use App\Http\Resources\UnitResource;
+use App\Models\Unit;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class UnitController extends BaseController
+{
+    private $unitActions;
+
+    public function __construct(UnitActions $unitActions)
+    {
+        parent::__construct();
+
+        $this->unitActions = $unitActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) {
+            return response()->error(trans('rules.auth.unauthorized'), 401);
+        }
+        $this->authorize('viewAny', Unit::class);
+
+        if ($request->filled('company_id')) {
+            $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        }
+        if ($request->filled('include_id')) {
+            $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+        }
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'search' => ['nullable', 'string'],
+            'include_id' => ['nullable', 'integer', 'exists:units,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->unitActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: isset($validatedRequest['paginate']) ? new ExecutePaginationDTO(
+                        page: $validatedRequest['paginate']['page'],
+                        perPage: $validatedRequest['paginate']['per_page'],
+                    ) : null,
+                    get: isset($validatedRequest['get']) ? new ExecuteGetDTO(
+                        limit: $validatedRequest['get']['limit'],
+                    ) : null,
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return UnitResource::collection($result);
+        }
+    }
+
+    public function getTypes()
+    {
+        return [
+            ['name' => 'views.unit.enums.unit_type.product', 'code' => UnitTypeEnum::PRODUCT->value],
+            ['name' => 'views.unit.enums.unit_type.service', 'code' => UnitTypeEnum::SERVICE->value],
+        ];
+    }
+
+    public function read(Unit $unit)
+    {
+        $this->authorize('view', $unit);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->unitActions->read($unit);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new UnitResource($result);
+        }
+    }
+
+    public function store(UnitStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->unitActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->unitActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new UnitCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                description: $validatedRequest['description'],
+                type: $validatedRequest['type'],
+            );
+            $result = $this->unitActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(UnitUpdateRequest $request, Unit $unit)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->unitActions->isUniqueCode(
+                    $validatedRequest['company_id'], $validatedRequest['code'], $unit->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->unitActions->isUniqueName(
+                $validatedRequest['company_id'], $validatedRequest['name'], $unit->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->unitActions->update(
+                unit: $unit,
+                data: new UnitUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    description: $validatedRequest['description'],
+                    type: $validatedRequest['type'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Unit $unit)
+    {
+        $this->authorize('delete', $unit);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->unitActions->delete($unit);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/UserController.php b/api/app/Http/Controllers/UserController.php
index d40b73f56..f4ed3b722 100644
--- a/api/app/Http/Controllers/UserController.php
+++ b/api/app/Http/Controllers/UserController.php
@@ -4,6 +4,8 @@
 
 use App\Actions\Randomizer\RandomizerActions;
 use App\Actions\User\UserActions;
+use App\DTOs\UserCreateDTO;
+use App\DTOs\UserUpdateDTO;
 use App\Http\Requests\UserRequest;
 use App\Http\Resources\UserResource;
 use App\Models\User;
@@ -132,9 +134,11 @@ public function store(UserRequest $userRequest)
 
         try {
             $result = $this->userActions->create(
-                $userArr,
-                $rolesArr,
-                $profileArr
+                UserCreateDTO::fromParts(
+                    user: $userArr,
+                    roles: $rolesArr,
+                    profile: $profileArr,
+                )
             );
         } catch (Exception $e) {
             $errorMsg = app()->environment('production') ? '' : $e->getMessage();
@@ -189,10 +193,12 @@ public function update(User $user, UserRequest $userRequest)
         try {
             $result = $this->userActions->update(
                 $user,
-                $userArr,
-                $rolesArr,
-                $profileArr,
-                $settingsArr
+                UserUpdateDTO::fromParts(
+                    user: $userArr,
+                    roles: $rolesArr,
+                    profile: $profileArr,
+                    settings: $settingsArr,
+                )
             );
 
             if (array_key_exists('api_token', $request) && (bool) $request['api_token']) {
diff --git a/api/app/Http/Controllers/VatProfileController.php b/api/app/Http/Controllers/VatProfileController.php
new file mode 100644
index 000000000..36f9d8c6e
--- /dev/null
+++ b/api/app/Http/Controllers/VatProfileController.php
@@ -0,0 +1,240 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\VatProfile\VatProfileActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\VatProfileCreateDTO;
+use App\DTOs\VatProfileUpdateDTO;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\VatProfile\VatProfileStoreRequest;
+use App\Http\Requests\VatProfile\VatProfileUpdateRequest;
+use App\Http\Resources\VatProfileResource;
+use App\Models\VatProfile;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class VatProfileController extends BaseController
+{
+    private $vatProfileActions;
+
+    public function __construct(VatProfileActions $vatProfileActions)
+    {
+        parent::__construct();
+
+        $this->vatProfileActions = $vatProfileActions;
+    }
+
+    public function store(VatProfileStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->vatProfileActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    null,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->vatProfileActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                null,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $dto = new VatProfileCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                vatRate: $validatedRequest['vat_rate'],
+                vatBaseNumerator: $validatedRequest['vat_base_numerator'],
+                vatBaseDenominator: $validatedRequest['vat_base_denominator'],
+                remarks: $validatedRequest['remarks'],
+                isActive: $validatedRequest['is_active'],
+            );
+            $result = $this->vatProfileActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', VatProfile::class);
+
+        if ($request->filled('company_id')) $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        if ($request->filled('include_id')) $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'search' => ['nullable', 'string'],
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'include_id' => ['nullable', 'integer', 'exists:vat_profiles,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->vatProfileActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                search: $validatedRequest['search'] ?? null,
+
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return VatProfileResource::collection($result);
+        }
+    }
+
+    public function read(VatProfile $vatProfile)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $vatProfile);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->vatProfileActions->read($vatProfile);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new VatProfileResource($result);
+        }
+    }
+
+    public function update(VatProfile $vatProfile, VatProfileUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            if ($validatedRequest['code'] !== config('dcslab.KEYWORDS.AUTO')) {
+                $isUnique = $this->vatProfileActions->isUniqueCode(
+                    $validatedRequest['company_id'],
+                    $validatedRequest['code'],
+                    $vatProfile->id,
+                );
+                if (! $isUnique) return response()->error(['code' => [trans('rules.unique_code')]], 422);
+            }
+
+            $isUniqueName = $this->vatProfileActions->isUniqueName(
+                $validatedRequest['company_id'],
+                $validatedRequest['name'],
+                $vatProfile->id,
+            );
+            if (! $isUniqueName) return response()->error(['name' => [trans('rules.unique_name')]], 422);
+
+            DB::beginTransaction();
+
+            $result = $this->vatProfileActions->update(
+                vatProfile: $vatProfile,
+                data: new VatProfileUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    vatRate: $validatedRequest['vat_rate'],
+                    vatBaseNumerator: $validatedRequest['vat_base_numerator'],
+                    vatBaseDenominator: $validatedRequest['vat_base_denominator'],
+                    remarks: $validatedRequest['remarks'],
+                    isActive: $validatedRequest['is_active'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(VatProfile $vatProfile)
+    {
+        if (! Auth::check()) return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $vatProfile);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->vatProfileActions->delete($vatProfile);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Controllers/WarehouseController.php b/api/app/Http/Controllers/WarehouseController.php
new file mode 100644
index 000000000..21511ef4e
--- /dev/null
+++ b/api/app/Http/Controllers/WarehouseController.php
@@ -0,0 +1,220 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Warehouse\WarehouseActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\DTOs\WarehouseCreateDTO;
+use App\DTOs\WarehouseUpdateDTO;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Http\Requests\Warehouse\WarehouseStoreRequest;
+use App\Http\Requests\Warehouse\WarehouseUpdateRequest;
+use App\Http\Resources\WarehouseResource;
+use App\Models\Warehouse;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Exception;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\Rules\Enum;
+
+class WarehouseController extends BaseController
+{
+    private $warehouseActions;
+
+    public function __construct(WarehouseActions $warehouseActions)
+    {
+        parent::__construct();
+
+        $this->warehouseActions = $warehouseActions;
+    }
+
+    public function readAny(Request $request)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('viewAny', Warehouse::class);
+
+        if ($request->filled('company_id')) $request->merge(['company_id' => HashidsHelper::decodeId($request->company_id)]);
+        if ($request->filled('branch_id')) $request->merge(['branch_id' => HashidsHelper::decodeId($request->branch_id)]);
+        if ($request->filled('include_id')) $request->merge(['include_id' => HashidsHelper::decodeId($request->include_id)]);
+        if ($request->filled('status')) {
+            $request->merge(['status' => RecordStatusEnum::isValid($request->status) ? RecordStatusEnum::resolveToEnum($request->status)->value : -1]);
+        }
+
+        $validatedRequest = $request->validate([
+            'with_trashed' => ['required', 'boolean'],
+
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['nullable', 'integer', 'bail', new IsValidBranch($request->company_id, false)],
+            'search' => ['nullable', 'string'],
+            'status' => ['nullable', new Enum(RecordStatusEnum::class)],
+            'include_id' => ['nullable', 'integer', 'exists:warehouses,id'],
+
+            'refresh' => ['required', 'boolean'],
+            'paginate' => ['nullable', 'array', 'required_without:get', 'prohibits:get'],
+            'paginate.page' => ['required_with:paginate', 'integer', 'min:1'],
+            'paginate.per_page' => ['required_with:paginate', 'integer', 'min:10'],
+            'get' => ['nullable', 'array', 'required_without:paginate', 'prohibits:paginate'],
+            'get.limit' => ['required_with:get', 'integer', 'min:10'],
+        ]);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->warehouseActions->readAny(
+                withTrashed: $validatedRequest['with_trashed'],
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'] ?? null,
+                search: $validatedRequest['search'] ?? null,
+
+                status: $validatedRequest['status'] ?? null,
+                includeId: $validatedRequest['include_id'] ?? null,
+
+                execute: new ExecuteDTO(
+                    useCache: ! $validatedRequest['refresh'],
+                    pagination: (function () use ($validatedRequest) {
+                        $pagination = null;
+                        if (isset($validatedRequest['paginate'])) {
+                            $pagination = new ExecutePaginationDTO(
+                                page: $validatedRequest['paginate']['page'],
+                                perPage: $validatedRequest['paginate']['per_page'],
+                            );
+                        }
+
+                        return $pagination;
+                    })(),
+                    get: (function () use ($validatedRequest) {
+                        $get = null;
+                        if (isset($validatedRequest['get'])) {
+                            $get = new ExecuteGetDTO(
+                                limit: $validatedRequest['get']['limit'],
+                            );
+                        }
+
+                        return $get;
+                    })()
+                )
+            );
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return WarehouseResource::collection($result);
+        }
+    }
+
+    public function read(Warehouse $warehouse)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('view', $warehouse);
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            $result = $this->warehouseActions->read($warehouse);
+        } catch (Exception $e) {
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        if (is_null($result)) {
+            return response()->error($errorMsg);
+        } else {
+            return new WarehouseResource($result);
+        }
+    }
+
+    public function store(WarehouseStoreRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $dto = new WarehouseCreateDTO(
+                companyId: $validatedRequest['company_id'],
+                branchId: $validatedRequest['branch_id'],
+                code: $validatedRequest['code'],
+                name: $validatedRequest['name'],
+                address: $validatedRequest['address'],
+                city: $validatedRequest['city'],
+                contact: $validatedRequest['contact'],
+                remarks: $validatedRequest['remarks'],
+                status: $validatedRequest['status'],
+            );
+            $result = $this->warehouseActions->create($dto);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function update(Warehouse $warehouse, WarehouseUpdateRequest $request)
+    {
+        $validatedRequest = $request->validated();
+
+        $result = null;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->warehouseActions->update(
+                warehouse: $warehouse,
+                data: new WarehouseUpdateDTO(
+                    code: $validatedRequest['code'],
+                    name: $validatedRequest['name'],
+                    address: $validatedRequest['address'],
+                    city: $validatedRequest['city'],
+                    contact: $validatedRequest['contact'],
+                    remarks: $validatedRequest['remarks'],
+                    status: $validatedRequest['status'],
+                )
+            );
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return is_null($result) ? response()->error($errorMsg) : response()->success();
+    }
+
+    public function delete(Warehouse $warehouse)
+    {
+        if (! Auth::check())  return response()->error(trans('rules.auth.unauthorized'), 401);
+        $this->authorize('delete', $warehouse);
+
+        $result = false;
+        $errorMsg = '';
+
+        try {
+            DB::beginTransaction();
+
+            $result = $this->warehouseActions->delete($warehouse);
+
+            DB::commit();
+        } catch (Exception $e) {
+            DB::rollBack();
+            $errorMsg = app()->environment('production') ? '' : $e->getMessage();
+        }
+
+        return ! $result ? response()->error($errorMsg) : response()->success();
+    }
+}
diff --git a/api/app/Http/Middleware/UpdateUserTimezone.php b/api/app/Http/Middleware/UpdateUserTimezone.php
new file mode 100644
index 000000000..24ccde986
--- /dev/null
+++ b/api/app/Http/Middleware/UpdateUserTimezone.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class UpdateUserTimezone
+{
+    public function handle(Request $request, Closure $next)
+    {
+        $response = $next($request);
+
+        if (Auth::check()) {
+            $timezone = $request->header('X-Timezone');
+
+            if (is_string($timezone) && $timezone !== '') {
+                $user = $request->user();
+
+                if ($user && $user->timezone !== $timezone) {
+                    $user->timezone = $timezone;
+                    $user->save();
+                }
+            }
+        }
+
+        return $response;
+    }
+}
diff --git a/api/app/Http/Middleware/ValidateUser.php b/api/app/Http/Middleware/ValidateUser.php
index ba2415727..dcc797979 100644
--- a/api/app/Http/Middleware/ValidateUser.php
+++ b/api/app/Http/Middleware/ValidateUser.php
@@ -2,7 +2,7 @@
 
 namespace App\Http\Middleware;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use Carbon\Carbon;
 use Closure;
 use Illuminate\Http\Request;
@@ -47,7 +47,7 @@ public function handle(Request $request, Closure $next): Response
             ], 401);
         }
 
-        if (! $profile->status->value == RecordStatus::ACTIVE->value) {
+        if (! $profile->status->value == RecordStatusEnum::ACTIVE->value) {
             return response()->json([
                 'message' => __('rules.inactive_user'),
             ], 403);
diff --git a/api/app/Http/Requests/Asset/AssetStoreRequest.php b/api/app/Http/Requests/Asset/AssetStoreRequest.php
new file mode 100644
index 000000000..f612deaa0
--- /dev/null
+++ b/api/app/Http/Requests/Asset/AssetStoreRequest.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Requests\Asset;
+
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Asset;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class AssetStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+
+        return $user->can('create', Asset::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'asset_category_id' => $this->filled('asset_category_id') ? HashidsHelper::decodeId($this->asset_category_id) : null,
+            'asset_unit_id' => $this->filled('asset_unit_id') ? HashidsHelper::decodeId($this->asset_unit_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'asset_category_id' => ['required', 'integer', new ExistsForCompany('asset_categories', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'asset_unit_id' => ['required', 'integer', new ExistsForCompany('asset_units', $this->company_id)],
+            'status' => ['required', 'integer', new Enum(RecordStatusEnum::class)],
+            'remarks' => ['present', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.asset');
+    }
+}
diff --git a/api/app/Http/Requests/Asset/AssetUpdateRequest.php b/api/app/Http/Requests/Asset/AssetUpdateRequest.php
new file mode 100644
index 000000000..3173ced29
--- /dev/null
+++ b/api/app/Http/Requests/Asset/AssetUpdateRequest.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Http\Requests\Asset;
+
+use App\Enums\RecordStatusEnum;
+use App\Rules\ExistsForCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class AssetUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+        $asset = $this->route('asset');
+
+        return $user->can('update', $asset);
+    }
+
+    public function prepareForValidation()
+    {
+        $asset = $this->route('asset');
+
+        $this->merge([
+            'company_id' => $asset?->company_id,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'asset_category_id' => ['required', 'integer', new ExistsForCompany('asset_categories', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'asset_unit_id' => ['required', 'integer', new ExistsForCompany('asset_units', $this->company_id)],
+            'status' => ['required', 'integer', new Enum(RecordStatusEnum::class)],
+            'remarks' => ['present', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.asset');
+    }
+}
diff --git a/api/app/Http/Requests/AssetAdjustment/AssetAdjustmentStoreRequest.php b/api/app/Http/Requests/AssetAdjustment/AssetAdjustmentStoreRequest.php
new file mode 100644
index 000000000..339ae57b2
--- /dev/null
+++ b/api/app/Http/Requests/AssetAdjustment/AssetAdjustmentStoreRequest.php
@@ -0,0 +1,250 @@
+<?php
+
+namespace App\Http\Requests\AssetAdjustment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\AssetAdjustment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetAdjustmentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', AssetAdjustment::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'remarks' => ['present', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+
+            'in_items' => ['present', 'array'],
+            'in_items.*.qty' => ['required', 'numeric', 'min:1'],
+            'in_items.*.asset_id' => ['required', 'integer', 'distinct', new ExistsForCompany('assets', $this->company_id)],
+            'in_items.*.remarks' => ['present', 'string', 'max:255'],
+            'in_items.*.serials' => ['present', 'array'],
+            'in_items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+
+            'out_items' => ['present', 'array'],
+            'out_items.*.qty' => ['required', 'numeric', 'min:1'],
+            'out_items.*.asset_id' => ['required', 'integer', 'distinct', new ExistsForCompany('assets', $this->company_id)],
+            'out_items.*.remarks' => ['present', 'string', 'max:255'],
+            'out_items.*.serials' => ['present', 'array'],
+            'out_items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.asset_adjustment.company_id'),
+            'branch_id' => trans('validation_attributes.asset_adjustment.branch_id'),
+            'code' => trans('validation_attributes.asset_adjustment.code'),
+            'date' => trans('validation_attributes.asset_adjustment.date'),
+            'remarks' => trans('validation_attributes.asset_adjustment.remarks'),
+            'is_posted' => trans('validation_attributes.asset_adjustment.is_posted'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+        ]);
+
+        if (is_array($this->input('in_items'))) {
+            $inItems = [];
+            foreach ($this->input('in_items') as $item) {
+                if (isset($item['asset_id'])) {
+                    $item['asset_id'] = HashidsHelper::decodeId($item['asset_id']);
+                }
+                $inItems[] = $item;
+            }
+            $this->merge(['in_items' => $inItems]);
+        }
+
+        if (is_array($this->input('out_items'))) {
+            $outItems = [];
+            foreach ($this->input('out_items') as $item) {
+                if (isset($item['asset_id'])) {
+                    $item['asset_id'] = HashidsHelper::decodeId($item['asset_id']);
+                }
+                $outItems[] = $item;
+            }
+            $this->merge(['out_items' => $outItems]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $hasInitialErrors = $validator->errors()->isNotEmpty();
+            if ($hasInitialErrors) {
+                return;
+            }
+
+            $data = $validator->getData();
+            $inItems = is_array($data['in_items'] ?? null) ? $data['in_items'] : [];
+            $outItems = is_array($data['out_items'] ?? null) ? $data['out_items'] : [];
+
+            if (empty($inItems) && empty($outItems)) {
+                $validator->errors()->add('in_items', trans('validation.asset_adjustment.at_least_one_item'));
+
+                return;
+            }
+
+            $this->validateItemSerialCounts($validator, $inItems, 'in_items', 'validation.asset_adjustment_in_item');
+            $this->validateItemSerialCounts($validator, $outItems, 'out_items', 'validation.asset_adjustment_out_item');
+
+            $this->validateDuplicateSerials($validator, $inItems, 'in_items');
+            $this->validateDuplicateSerials($validator, $outItems, 'out_items');
+            $this->validateCrossDirectionDuplicateSerials($validator, $inItems, $outItems);
+
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $this->validateIncomingSerialAvailability($validator, $inItems);
+            $this->validateOutgoingSerialAvailability($validator, $outItems);
+        });
+    }
+
+    private function validateItemSerialCounts($validator, array $items, string $fieldPrefix, string $translationPrefix): void
+    {
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            $qty = $item['qty'] ?? null;
+            if (! is_numeric($qty)) {
+                continue;
+            }
+
+            $normalizedQty = rtrim(rtrim((string) $qty, '0'), '.');
+            if ($normalizedQty === '') {
+                $normalizedQty = '0';
+            }
+
+            if (str_contains($normalizedQty, '.')) {
+                $validator->errors()->add(
+                    $fieldPrefix.'.'.$i.'.qty',
+                    trans($translationPrefix.'.qty_must_be_integer')
+                );
+
+                continue;
+            }
+
+            $serialCount = (string) count($item['serials'] ?? []);
+            if (bccomp($serialCount, (string) $qty, 8) !== 0) {
+                $validator->errors()->add(
+                    $fieldPrefix.'.'.$i.'.serials',
+                    trans($translationPrefix.'.serial_count_not_match_qty')
+                );
+            }
+        }
+    }
+
+    private function validateDuplicateSerials($validator, array $items, string $fieldPrefix): void
+    {
+        $seen = [];
+
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                if (! is_array($serialItem)) {
+                    continue;
+                }
+
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if ($serial === '') {
+                    continue;
+                }
+
+                if (isset($seen[$serial])) {
+                    $validator->errors()->add(
+                        $fieldPrefix.'.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_adjustment.duplicate_serial_in_transaction')
+                    );
+                }
+
+                $seen[$serial] = true;
+            }
+        }
+    }
+
+    private function validateCrossDirectionDuplicateSerials($validator, array $inItems, array $outItems): void
+    {
+        $inSerials = collect($inItems)
+            ->flatMap(fn ($item) => collect($item['serials'] ?? [])->pluck('serial'))
+            ->filter(fn ($serial) => filled($serial))
+            ->map(fn ($serial) => trim((string) $serial))
+            ->all();
+
+        $outSerials = collect($outItems)
+            ->flatMap(fn ($item) => collect($item['serials'] ?? [])->pluck('serial'))
+            ->filter(fn ($serial) => filled($serial))
+            ->map(fn ($serial) => trim((string) $serial))
+            ->all();
+
+        $duplicates = array_unique(array_intersect($inSerials, $outSerials));
+        if (empty($duplicates)) {
+            return;
+        }
+
+        foreach ($inItems as $i => $item) {
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if (in_array($serial, $duplicates, true)) {
+                    $validator->errors()->add(
+                        'in_items.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_adjustment.duplicate_serial_in_transaction')
+                    );
+                }
+            }
+        }
+
+        foreach ($outItems as $i => $item) {
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if (in_array($serial, $duplicates, true)) {
+                    $validator->errors()->add(
+                        'out_items.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_adjustment.duplicate_serial_in_transaction')
+                    );
+                }
+            }
+        }
+    }
+
+    private function validateIncomingSerialAvailability($validator, array $inItems): void
+    {
+
+    }
+
+    private function validateOutgoingSerialAvailability($validator, array $outItems): void
+    {
+
+    }
+}
diff --git a/api/app/Http/Requests/AssetAdjustment/AssetAdjustmentUpdateRequest.php b/api/app/Http/Requests/AssetAdjustment/AssetAdjustmentUpdateRequest.php
new file mode 100644
index 000000000..a18b04ea7
--- /dev/null
+++ b/api/app/Http/Requests/AssetAdjustment/AssetAdjustmentUpdateRequest.php
@@ -0,0 +1,447 @@
+<?php
+
+namespace App\Http\Requests\AssetAdjustment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\AssetAdjustment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetAdjustmentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $assetAdjustment = $this->route('asset_adjustment');
+
+        return $user->can('update', AssetAdjustment::class, $assetAdjustment) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'remarks' => ['present', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+
+            'delete_in_item_ids' => ['present', 'array'],
+            'delete_in_item_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('asset_adjustment_in_items', $this->company_id)],
+            'in_items' => ['present', 'array'],
+            'in_items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('asset_adjustment_in_items', $this->company_id)],
+            'in_items.*.qty' => ['required', 'numeric', 'min:1'],
+            'in_items.*.asset_id' => ['required', 'integer', 'distinct', new ExistsForCompany('assets', $this->company_id)],
+            'in_items.*.remarks' => ['present', 'string', 'max:255'],
+            'in_items.*.delete_serial_ids' => ['present', 'array'],
+            'in_items.*.delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('asset_adjustment_in_item_serials', $this->company_id)],
+            'in_items.*.serials' => ['present', 'array'],
+            'in_items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('asset_adjustment_in_item_serials', $this->company_id)],
+            'in_items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+
+            'delete_out_item_ids' => ['present', 'array'],
+            'delete_out_item_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('asset_adjustment_out_items', $this->company_id)],
+            'out_items' => ['present', 'array'],
+            'out_items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('asset_adjustment_out_items', $this->company_id)],
+            'out_items.*.qty' => ['required', 'numeric', 'min:1'],
+            'out_items.*.asset_id' => ['required', 'integer', 'distinct', new ExistsForCompany('assets', $this->company_id)],
+            'out_items.*.remarks' => ['present', 'string', 'max:255'],
+            'out_items.*.delete_serial_ids' => ['present', 'array'],
+            'out_items.*.delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('asset_adjustment_out_item_serials', $this->company_id)],
+            'out_items.*.serials' => ['present', 'array'],
+            'out_items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('asset_adjustment_out_item_serials', $this->company_id)],
+            'out_items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.asset_adjustment.company_id'),
+            'branch_id' => trans('validation_attributes.asset_adjustment.branch_id'),
+            'code' => trans('validation_attributes.asset_adjustment.code'),
+            'date' => trans('validation_attributes.asset_adjustment.date'),
+            'remarks' => trans('validation_attributes.asset_adjustment.remarks'),
+            'is_posted' => trans('validation_attributes.asset_adjustment.is_posted'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+        ]);
+
+        if (is_array($this->input('delete_in_item_ids'))) {
+            $deleteInItemIds = [];
+            foreach ($this->input('delete_in_item_ids') as $deleteInItemId) {
+                $deleteInItemIds[] = HashidsHelper::decodeId($deleteInItemId);
+            }
+            $this->merge(['delete_in_item_ids' => $deleteInItemIds]);
+        }
+
+        if (is_array($this->input('in_items'))) {
+            $inItems = [];
+            foreach ($this->input('in_items') as $item) {
+                if (! empty($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                if (isset($item['asset_id'])) {
+                    $item['asset_id'] = HashidsHelper::decodeId($item['asset_id']);
+                }
+
+                if (array_key_exists('delete_serial_ids', $item) && is_array($item['delete_serial_ids'])) {
+                    $deleteSerialIds = [];
+                    foreach ($item['delete_serial_ids'] as $deleteSerialId) {
+                        $deleteSerialIds[] = HashidsHelper::decodeId($deleteSerialId);
+                    }
+                    $item['delete_serial_ids'] = $deleteSerialIds;
+                }
+
+                if (array_key_exists('serials', $item) && is_array($item['serials'])) {
+                    $serials = [];
+                    foreach ($item['serials'] as $serialItem) {
+                        if (! empty($serialItem['id'])) {
+                            $serialItem['id'] = HashidsHelper::decodeId($serialItem['id']);
+                        }
+                        $serials[] = $serialItem;
+                    }
+                    $item['serials'] = $serials;
+                }
+
+                $inItems[] = $item;
+            }
+            $this->merge(['in_items' => $inItems]);
+        }
+
+        if (is_array($this->input('delete_out_item_ids'))) {
+            $deleteOutItemIds = [];
+            foreach ($this->input('delete_out_item_ids') as $deleteOutItemId) {
+                $deleteOutItemIds[] = HashidsHelper::decodeId($deleteOutItemId);
+            }
+            $this->merge(['delete_out_item_ids' => $deleteOutItemIds]);
+        }
+
+        if (is_array($this->input('out_items'))) {
+            $outItems = [];
+            foreach ($this->input('out_items') as $item) {
+                if (! empty($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                if (isset($item['asset_id'])) {
+                    $item['asset_id'] = HashidsHelper::decodeId($item['asset_id']);
+                }
+
+                if (array_key_exists('delete_serial_ids', $item) && is_array($item['delete_serial_ids'])) {
+                    $deleteSerialIds = [];
+                    foreach ($item['delete_serial_ids'] as $deleteSerialId) {
+                        $deleteSerialIds[] = HashidsHelper::decodeId($deleteSerialId);
+                    }
+                    $item['delete_serial_ids'] = $deleteSerialIds;
+                }
+
+                if (array_key_exists('serials', $item) && is_array($item['serials'])) {
+                    $serials = [];
+                    foreach ($item['serials'] as $serialItem) {
+                        if (! empty($serialItem['id'])) {
+                            $serialItem['id'] = HashidsHelper::decodeId($serialItem['id']);
+                        }
+                        $serials[] = $serialItem;
+                    }
+                    $item['serials'] = $serials;
+                }
+
+                $outItems[] = $item;
+            }
+            $this->merge(['out_items' => $outItems]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $hasInitialErrors = $validator->errors()->isNotEmpty();
+            if ($hasInitialErrors) {
+                return;
+            }
+
+            $assetAdjustment = $this->route('asset_adjustment');
+            if (! $assetAdjustment instanceof AssetAdjustment) {
+                return;
+            }
+
+            $assetAdjustment->loadMissing('inItems.serials', 'outItems.serials');
+
+            $data = $validator->getData();
+            $inItems = is_array($data['in_items'] ?? null) ? $data['in_items'] : [];
+            $outItems = is_array($data['out_items'] ?? null) ? $data['out_items'] : [];
+
+            if (empty($inItems) && empty($outItems)) {
+                $validator->errors()->add('in_items', trans('validation.asset_adjustment.at_least_one_item'));
+
+                return;
+            }
+
+            $this->validateItemSerialCounts($validator, $inItems, 'in_items', 'validation.asset_adjustment_in_item');
+            $this->validateItemSerialCounts($validator, $outItems, 'out_items', 'validation.asset_adjustment_out_item');
+
+            $this->validateDuplicateSerials($validator, $inItems, 'in_items');
+            $this->validateDuplicateSerials($validator, $outItems, 'out_items');
+            $this->validateCrossDirectionDuplicateSerials($validator, $inItems, $outItems);
+
+            $allowedInItemIds = $assetAdjustment->inItems->pluck('id')->map(fn ($id) => (int) $id)->all();
+            $allowedOutItemIds = $assetAdjustment->outItems->pluck('id')->map(fn ($id) => (int) $id)->all();
+            $allowedInSerialIdsByItemId = $assetAdjustment->inItems
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('id')->map(fn ($id) => (int) $id)->all(),
+                ])
+                ->all();
+            $allowedOutSerialIdsByItemId = $assetAdjustment->outItems
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('id')->map(fn ($id) => (int) $id)->all(),
+                ])
+                ->all();
+            $allowedInSerialValuesByItemId = $assetAdjustment->inItems
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('serial')->map(fn ($serial) => trim((string) $serial))->all(),
+                ])
+                ->all();
+            $allowedOutSerialValuesByItemId = $assetAdjustment->outItems
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('serial')->map(fn ($serial) => trim((string) $serial))->all(),
+                ])
+                ->all();
+
+            foreach (($data['delete_in_item_ids'] ?? []) as $i => $deleteInItemId) {
+                if (! empty($deleteInItemId) && ! in_array((int) $deleteInItemId, $allowedInItemIds, true)) {
+                    $validator->errors()->add('delete_in_item_ids.'.$i, trans('rules.asset_adjustment.invalid_in_item_reference'));
+                }
+            }
+
+            foreach (($data['delete_out_item_ids'] ?? []) as $i => $deleteOutItemId) {
+                if (! empty($deleteOutItemId) && ! in_array((int) $deleteOutItemId, $allowedOutItemIds, true)) {
+                    $validator->errors()->add('delete_out_item_ids.'.$i, trans('rules.asset_adjustment.invalid_out_item_reference'));
+                }
+            }
+
+            foreach ($inItems as $i => $item) {
+                if (! is_array($item)) {
+                    continue;
+                }
+
+                $itemId = $item['id'] ?? null;
+                $allowedSerialIds = [];
+
+                if (! empty($itemId)) {
+                    if (! in_array((int) $itemId, $allowedInItemIds, true)) {
+                        $validator->errors()->add('in_items.'.$i.'.id', trans('rules.asset_adjustment.invalid_in_item_reference'));
+                    } else {
+                        $allowedSerialIds = $allowedInSerialIdsByItemId[(int) $itemId] ?? [];
+                    }
+                }
+
+                foreach (($item['delete_serial_ids'] ?? []) as $j => $deleteSerialId) {
+                    if (! empty($deleteSerialId) && ! in_array((int) $deleteSerialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add(
+                            'in_items.'.$i.'.delete_serial_ids.'.$j,
+                            trans('rules.asset_adjustment.invalid_in_item_serial_reference')
+                        );
+                    }
+                }
+
+                foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                    if (! is_array($serialItem)) {
+                        continue;
+                    }
+
+                    $serialId = $serialItem['id'] ?? null;
+                    if (! empty($serialId) && ! in_array((int) $serialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add(
+                            'in_items.'.$i.'.serials.'.$j.'.id',
+                            trans('rules.asset_adjustment.invalid_in_item_serial_reference')
+                        );
+                    }
+                }
+            }
+
+            foreach ($outItems as $i => $item) {
+                if (! is_array($item)) {
+                    continue;
+                }
+
+                $itemId = $item['id'] ?? null;
+                $allowedSerialIds = [];
+
+                if (! empty($itemId)) {
+                    if (! in_array((int) $itemId, $allowedOutItemIds, true)) {
+                        $validator->errors()->add('out_items.'.$i.'.id', trans('rules.asset_adjustment.invalid_out_item_reference'));
+                    } else {
+                        $allowedSerialIds = $allowedOutSerialIdsByItemId[(int) $itemId] ?? [];
+                    }
+                }
+
+                foreach (($item['delete_serial_ids'] ?? []) as $j => $deleteSerialId) {
+                    if (! empty($deleteSerialId) && ! in_array((int) $deleteSerialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add(
+                            'out_items.'.$i.'.delete_serial_ids.'.$j,
+                            trans('rules.asset_adjustment.invalid_out_item_serial_reference')
+                        );
+                    }
+                }
+
+                foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                    if (! is_array($serialItem)) {
+                        continue;
+                    }
+
+                    $serialId = $serialItem['id'] ?? null;
+                    if (! empty($serialId) && ! in_array((int) $serialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add(
+                            'out_items.'.$i.'.serials.'.$j.'.id',
+                            trans('rules.asset_adjustment.invalid_out_item_serial_reference')
+                        );
+                    }
+                }
+            }
+
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $this->validateIncomingSerialAvailability($validator, $inItems, $allowedInSerialValuesByItemId);
+            $this->validateOutgoingSerialAvailability($validator, $outItems, $allowedOutSerialValuesByItemId);
+        });
+    }
+
+    private function validateItemSerialCounts($validator, array $items, string $fieldPrefix, string $translationPrefix): void
+    {
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            $qty = $item['qty'] ?? null;
+            if (! is_numeric($qty)) {
+                continue;
+            }
+
+            $normalizedQty = rtrim(rtrim((string) $qty, '0'), '.');
+            if ($normalizedQty === '') {
+                $normalizedQty = '0';
+            }
+
+            if (str_contains($normalizedQty, '.')) {
+                $validator->errors()->add(
+                    $fieldPrefix.'.'.$i.'.qty',
+                    trans($translationPrefix.'.qty_must_be_integer')
+                );
+
+                continue;
+            }
+
+            $serialCount = (string) count($item['serials'] ?? []);
+            if (bccomp($serialCount, (string) $qty, 8) !== 0) {
+                $validator->errors()->add(
+                    $fieldPrefix.'.'.$i.'.serials',
+                    trans($translationPrefix.'.serial_count_not_match_qty')
+                );
+            }
+        }
+    }
+
+    private function validateDuplicateSerials($validator, array $items, string $fieldPrefix): void
+    {
+        $seen = [];
+
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                if (! is_array($serialItem)) {
+                    continue;
+                }
+
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if ($serial === '') {
+                    continue;
+                }
+
+                if (isset($seen[$serial])) {
+                    $validator->errors()->add(
+                        $fieldPrefix.'.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_adjustment.duplicate_serial_in_transaction')
+                    );
+                }
+
+                $seen[$serial] = true;
+            }
+        }
+    }
+
+    private function validateCrossDirectionDuplicateSerials($validator, array $inItems, array $outItems): void
+    {
+        $inSerials = collect($inItems)
+            ->flatMap(fn ($item) => collect($item['serials'] ?? [])->pluck('serial'))
+            ->filter(fn ($serial) => filled($serial))
+            ->map(fn ($serial) => trim((string) $serial))
+            ->all();
+
+        $outSerials = collect($outItems)
+            ->flatMap(fn ($item) => collect($item['serials'] ?? [])->pluck('serial'))
+            ->filter(fn ($serial) => filled($serial))
+            ->map(fn ($serial) => trim((string) $serial))
+            ->all();
+
+        $duplicates = array_unique(array_intersect($inSerials, $outSerials));
+        if (empty($duplicates)) {
+            return;
+        }
+
+        foreach ($inItems as $i => $item) {
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if (in_array($serial, $duplicates, true)) {
+                    $validator->errors()->add(
+                        'in_items.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_adjustment.duplicate_serial_in_transaction')
+                    );
+                }
+            }
+        }
+
+        foreach ($outItems as $i => $item) {
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if (in_array($serial, $duplicates, true)) {
+                    $validator->errors()->add(
+                        'out_items.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_adjustment.duplicate_serial_in_transaction')
+                    );
+                }
+            }
+        }
+    }
+
+    private function validateIncomingSerialAvailability($validator, array $inItems, array $allowedSerialValuesByItemId): void
+    {
+
+    }
+
+    private function validateOutgoingSerialAvailability($validator, array $outItems, array $allowedSerialValuesByItemId): void
+    {
+
+    }
+}
diff --git a/api/app/Http/Requests/AssetCategory/AssetCategoryStoreRequest.php b/api/app/Http/Requests/AssetCategory/AssetCategoryStoreRequest.php
new file mode 100644
index 000000000..489a91ddc
--- /dev/null
+++ b/api/app/Http/Requests/AssetCategory/AssetCategoryStoreRequest.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Requests\AssetCategory;
+
+use App\Helpers\HashidsHelper;
+use App\Models\AssetCategory;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetCategoryStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', AssetCategory::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'estimated_useful_life_months' => ['required', 'integer', 'min:1'],
+            'remarks' => ['present', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.asset_category');
+    }
+}
diff --git a/api/app/Http/Requests/AssetCategory/AssetCategoryUpdateRequest.php b/api/app/Http/Requests/AssetCategory/AssetCategoryUpdateRequest.php
new file mode 100644
index 000000000..5ff7c5416
--- /dev/null
+++ b/api/app/Http/Requests/AssetCategory/AssetCategoryUpdateRequest.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Requests\AssetCategory;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetCategoryUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $assetCategory = $this->route('asset_category');
+
+        return $user->can('update', $assetCategory);
+    }
+
+    public function prepareForValidation()
+    {
+        $assetCategory = $this->route('asset_category');
+
+        $this->merge([
+            'company_id' => $assetCategory?->company_id,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+            'estimated_useful_life_months' => ['required', 'integer', 'min:1'],
+            'remarks' => ['present', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.asset_category');
+    }
+}
diff --git a/api/app/Http/Requests/AssetPurchase/AssetPurchaseStoreRequest.php b/api/app/Http/Requests/AssetPurchase/AssetPurchaseStoreRequest.php
new file mode 100644
index 000000000..f5801150b
--- /dev/null
+++ b/api/app/Http/Requests/AssetPurchase/AssetPurchaseStoreRequest.php
@@ -0,0 +1,186 @@
+<?php
+
+namespace App\Http\Requests\AssetPurchase;
+
+use App\Helpers\HashidsHelper;
+use App\Models\AssetPurchase;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetPurchaseStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+
+        return $user->can('create', AssetPurchase::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'supplier_id' => ['required', 'integer', 'bail', new ExistsForCompany('suppliers', $this->company_id), new IsValidSupplier($this->company_id)],
+            'remarks' => ['present', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+            'additional_cost' => ['required', 'numeric', 'min:0'],
+            'rounding' => ['required', 'numeric'],
+
+            'items' => ['present', 'array'],
+            'items.*.qty' => ['required', 'numeric', 'min:1'],
+            'items.*.asset_id' => ['required', 'integer', 'distinct', new ExistsForCompany('assets', $this->company_id)],
+            'items.*.unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.remarks' => ['present', 'string', 'max:255'],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.asset_purchase.company_id'),
+            'branch_id' => trans('validation_attributes.asset_purchase.branch_id'),
+            'code' => trans('validation_attributes.asset_purchase.code'),
+            'date' => trans('validation_attributes.asset_purchase.date'),
+            'due_days' => trans('validation_attributes.asset_purchase.due_days'),
+            'supplier_id' => trans('validation_attributes.asset_purchase.supplier_id'),
+            'remarks' => trans('validation_attributes.asset_purchase.remarks'),
+            'is_posted' => trans('validation_attributes.asset_purchase.is_posted'),
+            'additional_cost' => trans('validation_attributes.asset_purchase.additional_cost'),
+            'rounding' => trans('validation_attributes.asset_purchase.rounding'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+        ]);
+
+        if (is_array($this->input('items'))) {
+            $items = [];
+            foreach ($this->input('items') as $item) {
+                if (isset($item['asset_id'])) {
+                    $item['asset_id'] = HashidsHelper::decodeId($item['asset_id']);
+                }
+                $items[] = $item;
+            }
+            $this->merge(['items' => $items]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $items = is_array($this->input('items')) ? $this->input('items') : [];
+
+            if (empty($items)) {
+                $validator->errors()->add('items', trans('validation.asset_purchase.at_least_one_item'));
+
+                return;
+            }
+
+            $this->validateItemSerialCounts($validator, $items);
+            $this->validateDuplicateSerials($validator, $items);
+
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $this->validateIncomingSerialAvailability($validator, $items);
+        });
+    }
+
+    private function validateItemSerialCounts($validator, array $items): void
+    {
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            $qty = $item['qty'] ?? null;
+            if (! is_numeric($qty)) {
+                continue;
+            }
+
+            $normalizedQty = rtrim(rtrim((string) $qty, '0'), '.');
+            if ($normalizedQty === '') {
+                $normalizedQty = '0';
+            }
+
+            if (str_contains($normalizedQty, '.')) {
+                $validator->errors()->add(
+                    'items.'.$i.'.qty',
+                    trans('validation.asset_purchase_item.qty_must_be_integer')
+                );
+
+                continue;
+            }
+
+            $serialCount = (string) count($item['serials'] ?? []);
+            if (bccomp($serialCount, (string) $qty, 8) !== 0) {
+                $validator->errors()->add(
+                    'items.'.$i.'.serials',
+                    trans('validation.asset_purchase_item.serial_count_not_match_qty')
+                );
+            }
+        }
+    }
+
+    private function validateDuplicateSerials($validator, array $items): void
+    {
+        $seen = [];
+
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                if (! is_array($serialItem)) {
+                    continue;
+                }
+
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if ($serial === '') {
+                    continue;
+                }
+
+                if (isset($seen[$serial])) {
+                    $validator->errors()->add(
+                        'items.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_purchase.duplicate_serial_in_transaction')
+                    );
+                }
+
+                $seen[$serial] = true;
+            }
+        }
+    }
+
+    private function validateIncomingSerialAvailability($validator, array $items): void
+    {
+
+    }
+}
diff --git a/api/app/Http/Requests/AssetPurchase/AssetPurchaseUpdateRequest.php b/api/app/Http/Requests/AssetPurchase/AssetPurchaseUpdateRequest.php
new file mode 100644
index 000000000..d48c26d17
--- /dev/null
+++ b/api/app/Http/Requests/AssetPurchase/AssetPurchaseUpdateRequest.php
@@ -0,0 +1,288 @@
+<?php
+
+namespace App\Http\Requests\AssetPurchase;
+
+use App\Helpers\HashidsHelper;
+use App\Models\AssetPurchase;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetPurchaseUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+        $assetPurchase = $this->route('asset_purchase');
+
+        return $assetPurchase instanceof AssetPurchase && $user->can('update', $assetPurchase);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'supplier_id' => ['required', 'integer', 'bail', new ExistsForCompany('suppliers', $this->company_id), new IsValidSupplier($this->company_id)],
+            'remarks' => ['present', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+            'additional_cost' => ['required', 'numeric', 'min:0'],
+            'rounding' => ['required', 'numeric'],
+
+            'delete_item_ids' => ['present', 'array'],
+            'delete_item_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('asset_purchase_items', $this->company_id)],
+            'items' => ['present', 'array'],
+            'items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('asset_purchase_items', $this->company_id)],
+            'items.*.qty' => ['required', 'numeric', 'min:1'],
+            'items.*.asset_id' => ['required', 'integer', 'distinct', new ExistsForCompany('assets', $this->company_id)],
+            'items.*.unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.remarks' => ['present', 'string', 'max:255'],
+            'items.*.delete_serial_ids' => ['present', 'array'],
+            'items.*.delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('asset_purchase_item_serials', $this->company_id)],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('asset_purchase_item_serials', $this->company_id)],
+            'items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.asset_purchase.company_id'),
+            'branch_id' => trans('validation_attributes.asset_purchase.branch_id'),
+            'code' => trans('validation_attributes.asset_purchase.code'),
+            'date' => trans('validation_attributes.asset_purchase.date'),
+            'due_days' => trans('validation_attributes.asset_purchase.due_days'),
+            'supplier_id' => trans('validation_attributes.asset_purchase.supplier_id'),
+            'remarks' => trans('validation_attributes.asset_purchase.remarks'),
+            'is_posted' => trans('validation_attributes.asset_purchase.is_posted'),
+            'additional_cost' => trans('validation_attributes.asset_purchase.additional_cost'),
+            'rounding' => trans('validation_attributes.asset_purchase.rounding'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+        ]);
+
+        if (is_array($this->input('delete_item_ids'))) {
+            $deleteItemIds = [];
+            foreach ($this->input('delete_item_ids') as $deleteItemId) {
+                $deleteItemIds[] = HashidsHelper::decodeId($deleteItemId);
+            }
+            $this->merge(['delete_item_ids' => $deleteItemIds]);
+        }
+
+        if (is_array($this->input('items'))) {
+            $items = [];
+            foreach ($this->input('items') as $item) {
+                if (! empty($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                if (isset($item['asset_id'])) {
+                    $item['asset_id'] = HashidsHelper::decodeId($item['asset_id']);
+                }
+
+                if (array_key_exists('delete_serial_ids', $item) && is_array($item['delete_serial_ids'])) {
+                    $deleteSerialIds = [];
+                    foreach ($item['delete_serial_ids'] as $deleteSerialId) {
+                        $deleteSerialIds[] = HashidsHelper::decodeId($deleteSerialId);
+                    }
+                    $item['delete_serial_ids'] = $deleteSerialIds;
+                }
+
+                if (array_key_exists('serials', $item) && is_array($item['serials'])) {
+                    $serials = [];
+                    foreach ($item['serials'] as $serialItem) {
+                        if (! empty($serialItem['id'])) {
+                            $serialItem['id'] = HashidsHelper::decodeId($serialItem['id']);
+                        }
+                        $serials[] = $serialItem;
+                    }
+                    $item['serials'] = $serials;
+                }
+
+                $items[] = $item;
+            }
+            $this->merge(['items' => $items]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $assetPurchase = $this->route('asset_purchase');
+            if (! $assetPurchase instanceof AssetPurchase) {
+                return;
+            }
+
+            $assetPurchase->loadMissing('items.serials');
+
+            $items = is_array($this->input('items')) ? $this->input('items') : [];
+            if (empty($items)) {
+                $validator->errors()->add('items', trans('validation.asset_purchase.at_least_one_item'));
+
+                return;
+            }
+
+            $this->validateItemSerialCounts($validator, $items);
+            $this->validateDuplicateSerials($validator, $items);
+
+            $allowedItemIds = $assetPurchase->items->pluck('id')->map(fn ($id) => (int) $id)->all();
+            $allowedSerialIdsByItemId = $assetPurchase->items
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('id')->map(fn ($id) => (int) $id)->all(),
+                ])
+                ->all();
+            $allowedSerialValuesByItemId = $assetPurchase->items
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('serial')->map(fn ($serial) => trim((string) $serial))->all(),
+                ])
+                ->all();
+
+            foreach (($this->input('delete_item_ids') ?? []) as $i => $deleteItemId) {
+                if (! empty($deleteItemId) && ! in_array((int) $deleteItemId, $allowedItemIds, true)) {
+                    $validator->errors()->add('delete_item_ids.'.$i, trans('rules.asset_purchase.invalid_item_reference'));
+                }
+            }
+
+            foreach ($items as $i => $item) {
+                if (! is_array($item)) {
+                    continue;
+                }
+
+                $itemId = $item['id'] ?? null;
+                $allowedSerialIds = [];
+
+                if (! empty($itemId)) {
+                    if (! in_array((int) $itemId, $allowedItemIds, true)) {
+                        $validator->errors()->add('items.'.$i.'.id', trans('rules.asset_purchase.invalid_item_reference'));
+                    } else {
+                        $allowedSerialIds = $allowedSerialIdsByItemId[(int) $itemId] ?? [];
+                    }
+                }
+
+                foreach (($item['delete_serial_ids'] ?? []) as $j => $deleteSerialId) {
+                    if (! empty($deleteSerialId) && ! in_array((int) $deleteSerialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add(
+                            'items.'.$i.'.delete_serial_ids.'.$j,
+                            trans('rules.asset_purchase.invalid_item_serial_reference')
+                        );
+                    }
+                }
+
+                foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                    $serialId = $serialItem['id'] ?? null;
+                    if (! empty($serialId) && ! in_array((int) $serialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add(
+                            'items.'.$i.'.serials.'.$j.'.id',
+                            trans('rules.asset_purchase.invalid_item_serial_reference')
+                        );
+                    }
+                }
+            }
+
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $this->validateIncomingSerialAvailability(
+                validator: $validator,
+                items: $items,
+                allowedSerialValuesByItemId: $allowedSerialValuesByItemId,
+            );
+        });
+    }
+
+    private function validateItemSerialCounts($validator, array $items): void
+    {
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            $qty = $item['qty'] ?? null;
+            if (! is_numeric($qty)) {
+                continue;
+            }
+
+            $normalizedQty = rtrim(rtrim((string) $qty, '0'), '.');
+            if ($normalizedQty === '') {
+                $normalizedQty = '0';
+            }
+
+            if (str_contains($normalizedQty, '.')) {
+                $validator->errors()->add(
+                    'items.'.$i.'.qty',
+                    trans('validation.asset_purchase_item.qty_must_be_integer')
+                );
+
+                continue;
+            }
+
+            $serialCount = (string) count($item['serials'] ?? []);
+            if (bccomp($serialCount, (string) $qty, 8) !== 0) {
+                $validator->errors()->add(
+                    'items.'.$i.'.serials',
+                    trans('validation.asset_purchase_item.serial_count_not_match_qty')
+                );
+            }
+        }
+    }
+
+    private function validateDuplicateSerials($validator, array $items): void
+    {
+        $seen = [];
+
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                if (! is_array($serialItem)) {
+                    continue;
+                }
+
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if ($serial === '') {
+                    continue;
+                }
+
+                if (isset($seen[$serial])) {
+                    $validator->errors()->add(
+                        'items.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_purchase.duplicate_serial_in_transaction')
+                    );
+                }
+
+                $seen[$serial] = true;
+            }
+        }
+    }
+
+    private function validateIncomingSerialAvailability($validator, array $items, array $allowedSerialValuesByItemId): void
+    {
+
+    }
+}
diff --git a/api/app/Http/Requests/AssetSale/AssetSaleStoreRequest.php b/api/app/Http/Requests/AssetSale/AssetSaleStoreRequest.php
new file mode 100644
index 000000000..f85d45e3c
--- /dev/null
+++ b/api/app/Http/Requests/AssetSale/AssetSaleStoreRequest.php
@@ -0,0 +1,184 @@
+<?php
+
+namespace App\Http\Requests\AssetSale;
+
+use App\Helpers\HashidsHelper;
+use App\Models\AssetSale;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidCustomer;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetSaleStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+
+        return $user->can('create', AssetSale::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'customer_id' => ['required', 'integer', 'bail', new ExistsForCompany('customers', $this->company_id), new IsValidCustomer()],
+            'remarks' => ['present', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+            'rounding' => ['required', 'numeric'],
+
+            'items' => ['present', 'array'],
+            'items.*.qty' => ['required', 'numeric', 'min:1'],
+            'items.*.asset_id' => ['required', 'integer', 'distinct', new ExistsForCompany('assets', $this->company_id)],
+            'items.*.unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.remarks' => ['present', 'string', 'max:255'],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.asset_sale.company_id'),
+            'branch_id' => trans('validation_attributes.asset_sale.branch_id'),
+            'code' => trans('validation_attributes.asset_sale.code'),
+            'date' => trans('validation_attributes.asset_sale.date'),
+            'due_days' => trans('validation_attributes.asset_sale.due_days'),
+            'customer_id' => trans('validation_attributes.asset_sale.customer_id'),
+            'remarks' => trans('validation_attributes.asset_sale.remarks'),
+            'is_posted' => trans('validation_attributes.asset_sale.is_posted'),
+            'rounding' => trans('validation_attributes.asset_sale.rounding'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'customer_id' => $this->filled('customer_id') ? HashidsHelper::decodeId($this->customer_id) : null,
+        ]);
+
+        if (is_array($this->input('items'))) {
+            $items = [];
+            foreach ($this->input('items') as $item) {
+                if (isset($item['asset_id'])) {
+                    $item['asset_id'] = HashidsHelper::decodeId($item['asset_id']);
+                }
+                $items[] = $item;
+            }
+            $this->merge(['items' => $items]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $items = is_array($this->input('items')) ? $this->input('items') : [];
+
+            if (empty($items)) {
+                $validator->errors()->add('items', trans('validation.asset_sale.at_least_one_item'));
+
+                return;
+            }
+
+            $this->validateItemSerialCounts($validator, $items);
+            $this->validateDuplicateSerials($validator, $items);
+
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $this->validateOutgoingSerials($validator, $items);
+        });
+    }
+
+    private function validateItemSerialCounts($validator, array $items): void
+    {
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            $qty = $item['qty'] ?? null;
+            if (! is_numeric($qty)) {
+                continue;
+            }
+
+            $normalizedQty = rtrim(rtrim((string) $qty, '0'), '.');
+            if ($normalizedQty === '') {
+                $normalizedQty = '0';
+            }
+
+            if (str_contains($normalizedQty, '.')) {
+                $validator->errors()->add(
+                    'items.'.$i.'.qty',
+                    trans('validation.asset_sale_item.qty_must_be_integer')
+                );
+
+                continue;
+            }
+
+            $serialCount = (string) count($item['serials'] ?? []);
+            if (bccomp($serialCount, (string) $qty, 8) !== 0) {
+                $validator->errors()->add(
+                    'items.'.$i.'.serials',
+                    trans('validation.asset_sale_item.serial_count_not_match_qty')
+                );
+            }
+        }
+    }
+
+    private function validateDuplicateSerials($validator, array $items): void
+    {
+        $seen = [];
+
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                if (! is_array($serialItem)) {
+                    continue;
+                }
+
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if ($serial === '') {
+                    continue;
+                }
+
+                if (isset($seen[$serial])) {
+                    $validator->errors()->add(
+                        'items.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_sale.duplicate_serial_in_transaction')
+                    );
+                }
+
+                $seen[$serial] = true;
+            }
+        }
+    }
+
+    private function validateOutgoingSerials($validator, array $items): void
+    {
+
+    }
+}
diff --git a/api/app/Http/Requests/AssetSale/AssetSaleUpdateRequest.php b/api/app/Http/Requests/AssetSale/AssetSaleUpdateRequest.php
new file mode 100644
index 000000000..252181835
--- /dev/null
+++ b/api/app/Http/Requests/AssetSale/AssetSaleUpdateRequest.php
@@ -0,0 +1,280 @@
+<?php
+
+namespace App\Http\Requests\AssetSale;
+
+use App\Helpers\HashidsHelper;
+use App\Models\AssetSale;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidCustomer;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetSaleUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+        $assetSale = $this->route('asset_sale');
+
+        return $assetSale instanceof AssetSale && $user->can('update', $assetSale);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'customer_id' => ['required', 'integer', 'bail', new ExistsForCompany('customers', $this->company_id), new IsValidCustomer()],
+            'remarks' => ['present', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+            'rounding' => ['required', 'numeric'],
+
+            'delete_item_ids' => ['present', 'array'],
+            'delete_item_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('asset_sale_items', $this->company_id)],
+            'items' => ['present', 'array'],
+            'items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('asset_sale_items', $this->company_id)],
+            'items.*.qty' => ['required', 'numeric', 'min:1'],
+            'items.*.asset_id' => ['required', 'integer', 'distinct', new ExistsForCompany('assets', $this->company_id)],
+            'items.*.unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.remarks' => ['present', 'string', 'max:255'],
+            'items.*.delete_serial_ids' => ['present', 'array'],
+            'items.*.delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('asset_sale_item_serials', $this->company_id)],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('asset_sale_item_serials', $this->company_id)],
+            'items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.asset_sale.company_id'),
+            'branch_id' => trans('validation_attributes.asset_sale.branch_id'),
+            'code' => trans('validation_attributes.asset_sale.code'),
+            'date' => trans('validation_attributes.asset_sale.date'),
+            'due_days' => trans('validation_attributes.asset_sale.due_days'),
+            'customer_id' => trans('validation_attributes.asset_sale.customer_id'),
+            'remarks' => trans('validation_attributes.asset_sale.remarks'),
+            'is_posted' => trans('validation_attributes.asset_sale.is_posted'),
+            'rounding' => trans('validation_attributes.asset_sale.rounding'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'customer_id' => $this->filled('customer_id') ? HashidsHelper::decodeId($this->customer_id) : null,
+        ]);
+
+        if (is_array($this->input('delete_item_ids'))) {
+            $deleteItemIds = [];
+            foreach ($this->input('delete_item_ids') as $deleteItemId) {
+                $deleteItemIds[] = HashidsHelper::decodeId($deleteItemId);
+            }
+            $this->merge(['delete_item_ids' => $deleteItemIds]);
+        }
+
+        if (is_array($this->input('items'))) {
+            $items = [];
+            foreach ($this->input('items') as $item) {
+                if (! empty($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                if (isset($item['asset_id'])) {
+                    $item['asset_id'] = HashidsHelper::decodeId($item['asset_id']);
+                }
+
+                if (array_key_exists('delete_serial_ids', $item) && is_array($item['delete_serial_ids'])) {
+                    $deleteSerialIds = [];
+                    foreach ($item['delete_serial_ids'] as $deleteSerialId) {
+                        $deleteSerialIds[] = HashidsHelper::decodeId($deleteSerialId);
+                    }
+                    $item['delete_serial_ids'] = $deleteSerialIds;
+                }
+
+                if (array_key_exists('serials', $item) && is_array($item['serials'])) {
+                    $serials = [];
+                    foreach ($item['serials'] as $serialItem) {
+                        if (! empty($serialItem['id'])) {
+                            $serialItem['id'] = HashidsHelper::decodeId($serialItem['id']);
+                        }
+                        $serials[] = $serialItem;
+                    }
+                    $item['serials'] = $serials;
+                }
+
+                $items[] = $item;
+            }
+            $this->merge(['items' => $items]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $assetSale = $this->route('asset_sale');
+            if (! $assetSale instanceof AssetSale) {
+                return;
+            }
+
+            $assetSale->loadMissing('items.serials');
+
+            $items = is_array($this->input('items')) ? $this->input('items') : [];
+            if (empty($items)) {
+                $validator->errors()->add('items', trans('validation.asset_sale.at_least_one_item'));
+
+                return;
+            }
+
+            $this->validateItemSerialCounts($validator, $items);
+            $this->validateDuplicateSerials($validator, $items);
+
+            $allowedItemIds = $assetSale->items->pluck('id')->map(fn ($id) => (int) $id)->all();
+            $allowedSerialIdsByItemId = $assetSale->items
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('id')->map(fn ($id) => (int) $id)->all(),
+                ])->all();
+            $allowedSerialValuesByItemId = $assetSale->items
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('serial')->map(fn ($serial) => trim((string) $serial))->all(),
+                ])->all();
+
+            foreach (($this->input('delete_item_ids') ?? []) as $i => $deleteItemId) {
+                if (! empty($deleteItemId) && ! in_array((int) $deleteItemId, $allowedItemIds, true)) {
+                    $validator->errors()->add('delete_item_ids.'.$i, trans('rules.asset_sale.invalid_item_reference'));
+                }
+            }
+
+            foreach ($items as $i => $item) {
+                if (! is_array($item)) {
+                    continue;
+                }
+
+                $itemId = $item['id'] ?? null;
+                $allowedSerialIds = [];
+
+                if (! empty($itemId)) {
+                    if (! in_array((int) $itemId, $allowedItemIds, true)) {
+                        $validator->errors()->add('items.'.$i.'.id', trans('rules.asset_sale.invalid_item_reference'));
+                    } else {
+                        $allowedSerialIds = $allowedSerialIdsByItemId[(int) $itemId] ?? [];
+                    }
+                }
+
+                foreach (($item['delete_serial_ids'] ?? []) as $j => $deleteSerialId) {
+                    if (! empty($deleteSerialId) && ! in_array((int) $deleteSerialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add(
+                            'items.'.$i.'.delete_serial_ids.'.$j,
+                            trans('rules.asset_sale.invalid_item_serial_reference')
+                        );
+                    }
+                }
+
+                foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                    $serialId = $serialItem['id'] ?? null;
+                    if (! empty($serialId) && ! in_array((int) $serialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add(
+                            'items.'.$i.'.serials.'.$j.'.id',
+                            trans('rules.asset_sale.invalid_item_serial_reference')
+                        );
+                    }
+                }
+            }
+
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $this->validateOutgoingSerials($validator, $items, $allowedSerialValuesByItemId);
+        });
+    }
+
+    private function validateItemSerialCounts($validator, array $items): void
+    {
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            $qty = $item['qty'] ?? null;
+            if (! is_numeric($qty)) {
+                continue;
+            }
+
+            $normalizedQty = rtrim(rtrim((string) $qty, '0'), '.');
+            if ($normalizedQty === '') {
+                $normalizedQty = '0';
+            }
+
+            if (str_contains($normalizedQty, '.')) {
+                $validator->errors()->add(
+                    'items.'.$i.'.qty',
+                    trans('validation.asset_sale_item.qty_must_be_integer')
+                );
+
+                continue;
+            }
+
+            $serialCount = (string) count($item['serials'] ?? []);
+            if (bccomp($serialCount, (string) $qty, 8) !== 0) {
+                $validator->errors()->add(
+                    'items.'.$i.'.serials',
+                    trans('validation.asset_sale_item.serial_count_not_match_qty')
+                );
+            }
+        }
+    }
+
+    private function validateDuplicateSerials($validator, array $items): void
+    {
+        $seen = [];
+
+        foreach ($items as $i => $item) {
+            if (! is_array($item)) {
+                continue;
+            }
+
+            foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                if (! is_array($serialItem)) {
+                    continue;
+                }
+
+                $serial = trim((string) ($serialItem['serial'] ?? ''));
+                if ($serial === '') {
+                    continue;
+                }
+
+                if (isset($seen[$serial])) {
+                    $validator->errors()->add(
+                        'items.'.$i.'.serials.'.$j.'.serial',
+                        trans('validation.asset_sale.duplicate_serial_in_transaction')
+                    );
+                }
+
+                $seen[$serial] = true;
+            }
+        }
+    }
+
+    private function validateOutgoingSerials($validator, array $items, array $allowedSerialValuesByItemId): void
+    {
+
+    }
+}
diff --git a/api/app/Http/Requests/AssetUnit/AssetUnitStoreRequest.php b/api/app/Http/Requests/AssetUnit/AssetUnitStoreRequest.php
new file mode 100644
index 000000000..cc087c14b
--- /dev/null
+++ b/api/app/Http/Requests/AssetUnit/AssetUnitStoreRequest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests\AssetUnit;
+
+use App\Helpers\HashidsHelper;
+use App\Models\AssetUnit;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetUnitStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+
+        return $user->can('create', AssetUnit::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'description' => ['present', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.asset_unit');
+    }
+}
diff --git a/api/app/Http/Requests/AssetUnit/AssetUnitUpdateRequest.php b/api/app/Http/Requests/AssetUnit/AssetUnitUpdateRequest.php
new file mode 100644
index 000000000..fd1f4434d
--- /dev/null
+++ b/api/app/Http/Requests/AssetUnit/AssetUnitUpdateRequest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests\AssetUnit;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class AssetUnitUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+        $assetUnit = $this->route('asset_unit');
+
+        return $user->can('update', $assetUnit);
+    }
+
+    public function prepareForValidation()
+    {
+        $assetUnit = $this->route('asset_unit');
+
+        $this->merge([
+            'company_id' => $assetUnit?->company_id,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'description' => ['present', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.asset_unit');
+    }
+}
diff --git a/api/app/Http/Requests/Branch/BranchStoreRequest.php b/api/app/Http/Requests/Branch/BranchStoreRequest.php
new file mode 100644
index 000000000..4b3cb7fa9
--- /dev/null
+++ b/api/app/Http/Requests/Branch/BranchStoreRequest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Requests\Branch;
+
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Branch;
+use App\Rules\BranchStoreValidCode;
+use App\Rules\BranchStoreValidName;
+use App\Rules\BranchStoreValidStatus;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class BranchStoreRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Branch::class) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255', new BranchStoreValidCode($this->input('company_id'))],
+            'name' => ['required', 'string', 'max:255', new BranchStoreValidName($this->input('company_id'))],
+            'address' => ['present', 'nullable', 'string', 'max:255'],
+            'city' => ['present', 'nullable', 'string', 'max:255'],
+            'contact' => ['present', 'nullable', 'string', 'max:255'],
+            'is_main' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class), 'bail', new BranchStoreValidStatus($this->input('is_main'))],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.branch.company'),
+            'code' => trans('validation_attributes.branch.code'),
+            'name' => trans('validation_attributes.branch.name'),
+            'address' => trans('validation_attributes.branch.address'),
+            'city' => trans('validation_attributes.branch.city'),
+            'contact' => trans('validation_attributes.branch.contact'),
+            'is_main' => trans('validation_attributes.branch.is_main'),
+            'remarks' => trans('validation_attributes.branch.remarks'),
+            'status' => trans('validation_attributes.branch.status'),
+        ];
+    }
+
+    public function validationData()
+    {
+        $additionalArray = [];
+
+        return array_merge($this->all(), $additionalArray);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Branch/BranchUpdateRequest.php b/api/app/Http/Requests/Branch/BranchUpdateRequest.php
new file mode 100644
index 000000000..329cc1ca7
--- /dev/null
+++ b/api/app/Http/Requests/Branch/BranchUpdateRequest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Requests\Branch;
+
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Rules\BranchUpdateValidCode;
+use App\Rules\BranchUpdateValidIsMain;
+use App\Rules\BranchUpdateValidName;
+use App\Rules\BranchUpdateValidStatus;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class BranchUpdateRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('update', $this->route('branch')) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255', new BranchUpdateValidCode($this->input('company_id'), $this->route('branch'))],
+            'name' => ['required', 'string', 'max:255', new BranchUpdateValidName($this->input('company_id'), $this->route('branch'))],
+            'address' => ['present', 'nullable', 'string', 'max:255'],
+            'city' => ['present', 'nullable', 'string', 'max:255'],
+            'contact' => ['present', 'nullable', 'string', 'max:255'],
+            'is_main' => ['required', 'boolean', 'bail', new BranchUpdateValidIsMain($this->route('branch'))],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class), 'bail', new BranchUpdateValidStatus($this->input('is_main'))],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.branch.company'),
+            'code' => trans('validation_attributes.branch.code'),
+            'name' => trans('validation_attributes.branch.name'),
+            'address' => trans('validation_attributes.branch.address'),
+            'city' => trans('validation_attributes.branch.city'),
+            'contact' => trans('validation_attributes.branch.contact'),
+            'is_main' => trans('validation_attributes.branch.is_main'),
+            'remarks' => trans('validation_attributes.branch.remarks'),
+            'status' => trans('validation_attributes.branch.status'),
+        ];
+    }
+
+    public function validationData()
+    {
+        $additionalArray = [];
+
+        return array_merge($this->all(), $additionalArray);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/BranchRequest.php b/api/app/Http/Requests/BranchRequest.php
deleted file mode 100644
index 9782c13be..000000000
--- a/api/app/Http/Requests/BranchRequest.php
+++ /dev/null
@@ -1,163 +0,0 @@
-<?php
-
-namespace App\Http\Requests;
-
-use App\Enums\RecordStatus;
-use App\Models\Branch;
-use App\Rules\IsValidCompany;
-use App\Rules\SetBranchToNonMain;
-use Illuminate\Foundation\Http\FormRequest;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Validation\Rules\Enum;
-use Vinkla\Hashids\Facades\Hashids;
-
-class BranchRequest extends FormRequest
-{
-    /**
-     * Determine if the user is authorized to make this request.
-     *
-     * @return bool
-     */
-    public function authorize()
-    {
-        if (! Auth::check()) {
-            return false;
-        }
-
-        /** @var \App\User */
-        $user = Auth::user();
-        $branch = $this->route('branch');
-
-        $currentRouteMethod = $this->route()->getActionMethod();
-        switch ($currentRouteMethod) {
-            case 'readAny':
-                return $user->can('viewAny', Branch::class) ? true : false;
-            case 'read':
-                return $user->can('view', Branch::class, $branch) ? true : false;
-            case 'store':
-                return $user->can('create', Branch::class) ? true : false;
-            case 'update':
-                return $user->can('update', Branch::class, $branch) ? true : false;
-            case 'delete':
-                return $user->can('delete', Branch::class, $branch) ? true : false;
-            default:
-                return false;
-        }
-    }
-
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array
-     */
-    public function rules()
-    {
-        $nullableArr = [
-            'address' => ['nullable', 'max:255'],
-            'city' => ['nullable', 'max:255'],
-            'contact' => ['nullable', 'max:255'],
-            'remarks' => ['nullable', 'max:255'],
-        ];
-
-        $currentRouteMethod = $this->route()->getActionMethod();
-        switch ($currentRouteMethod) {
-            case 'readAny':
-                $rules_read_any = [
-                    'company_id' => ['required', new IsValidCompany(), 'bail'],
-                    'search' => ['present', 'string'],
-                    'paginate' => ['required', 'boolean'],
-                    'page' => ['required_if:paginate,true', 'numeric'],
-                    'per_page' => ['required_if:paginate,true', 'numeric'],
-                    'refresh' => ['nullable', 'boolean'],
-                ];
-
-                return $rules_read_any;
-            case 'read':
-                $rules_read = [
-
-                ];
-
-                return $rules_read;
-            case 'store':
-                $rules_store = [
-                    'company_id' => ['required', new IsValidCompany(), 'bail'],
-                    'code' => ['required', 'max:255'],
-                    'name' => ['required', 'max:255'],
-                    'is_main' => ['boolean'],
-                    'status' => [new Enum(RecordStatus::class)],
-                ];
-
-                return array_merge($rules_store, $nullableArr);
-            case 'update':
-                $branch = $this->route('branch');
-                $rules_update = [
-                    'company_id' => ['required', new IsValidCompany(), 'bail'],
-                    'code' => ['required', 'max:255'],
-                    'name' => ['required', 'max:255'],
-                    'is_main' => ['boolean', new SetBranchToNonMain($branch)],
-                    'status' => [new Enum(RecordStatus::class)],
-                ];
-
-                return array_merge($rules_update, $nullableArr);
-            case 'delete':
-                $rules_delete = [
-
-                ];
-
-                return $rules_delete;
-            default:
-                return [
-                    '' => 'required',
-                ];
-        }
-    }
-
-    public function attributes()
-    {
-        return [
-            'company_id' => trans('validation_attributes.branch.company'),
-            'code' => trans('validation_attributes.branch.code'),
-            'name' => trans('validation_attributes.branch.name'),
-            'address' => trans('validation_attributes.branch.address'),
-            'city' => trans('validation_attributes.branch.city'),
-            'contact' => trans('validation_attributes.branch.contact'),
-            'is_main' => trans('validation_attributes.branch.is_main'),
-            'remarks' => trans('validation_attributes.branch.remarks'),
-            'status' => trans('validation_attributes.branch.status'),
-        ];
-    }
-
-    public function validationData()
-    {
-        $additionalArray = [];
-
-        return array_merge($this->all(), $additionalArray);
-    }
-
-    public function prepareForValidation()
-    {
-        $currentRouteMethod = $this->route()->getActionMethod();
-        switch ($currentRouteMethod) {
-            case 'readAny':
-                $this->merge([
-                    'company_id' => $this->has('company_id') ? Hashids::decode($this['company_id'])[0] : '',
-                    'search' => $this->has('search') && ! is_null($this->search) ? $this->search : '',
-                    'paginate' => $this->has('paginate') ? filter_var($this->paginate, FILTER_VALIDATE_BOOLEAN) : true,
-                ]);
-                break;
-            case 'read':
-                $this->merge([]);
-                break;
-            case 'store':
-            case 'update':
-                $this->merge([
-                    'company_id' => $this->has('company_id') ? Hashids::decode($this['company_id'])[0] : '',
-                    'is_main' => $this->has('is_main') ? filter_var($this->is_main, FILTER_VALIDATE_BOOLEAN) : false,
-                    'status' => RecordStatus::isValid($this->status) ? RecordStatus::resolveToEnum($this->status)->value : -1,
-                ]);
-                break;
-            default:
-                $this->merge([]);
-        }
-    }
-}
diff --git a/api/app/Http/Requests/Brand/BrandStoreRequest.php b/api/app/Http/Requests/Brand/BrandStoreRequest.php
new file mode 100644
index 000000000..9dd139695
--- /dev/null
+++ b/api/app/Http/Requests/Brand/BrandStoreRequest.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Http\Requests\Brand;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Brand;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class BrandStoreRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Brand::class) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.brand.company'),
+            'code' => trans('validation_attributes.brand.code'),
+            'name' => trans('validation_attributes.brand.name'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Brand/BrandUpdateRequest.php b/api/app/Http/Requests/Brand/BrandUpdateRequest.php
new file mode 100644
index 000000000..185d21fa0
--- /dev/null
+++ b/api/app/Http/Requests/Brand/BrandUpdateRequest.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Http\Requests\Brand;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Brand;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class BrandUpdateRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $brand = $this->route('brand');
+
+        return $user->can('update', Brand::class, $brand) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.brand.company'),
+            'code' => trans('validation_attributes.brand.code'),
+            'name' => trans('validation_attributes.brand.name'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CapitalOpening/CapitalOpeningStoreRequest.php b/api/app/Http/Requests/CapitalOpening/CapitalOpeningStoreRequest.php
new file mode 100644
index 000000000..955ee850b
--- /dev/null
+++ b/api/app/Http/Requests/CapitalOpening/CapitalOpeningStoreRequest.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Requests\CapitalOpening;
+
+use App\Helpers\HashidsHelper;
+use App\Models\CapitalOpening;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidInvestor;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CapitalOpeningStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', CapitalOpening::class);
+    }
+
+    public function rules(): array
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'investor_id' => ['required', 'integer', 'bail', new IsValidInvestor($this->company_id)],
+            'cash_account_id' => ['required', 'integer', 'bail', new IsValidCashAccount($this->branch_id)],
+            'amount' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.capital_opening.company'),
+            'branch_id' => trans('validation_attributes.capital_opening.branch'),
+            'code' => trans('validation_attributes.capital_opening.code'),
+            'date' => trans('validation_attributes.capital_opening.date'),
+            'investor_id' => trans('validation_attributes.capital_opening.investor'),
+            'cash_account_id' => trans('validation_attributes.capital_opening.cash_account'),
+            'amount' => trans('validation_attributes.capital_opening.amount'),
+            'remarks' => trans('validation_attributes.capital_opening.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'investor_id' => $this->filled('investor_id') ? HashidsHelper::decodeId($this->investor_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CapitalOpening/CapitalOpeningUpdateRequest.php b/api/app/Http/Requests/CapitalOpening/CapitalOpeningUpdateRequest.php
new file mode 100644
index 000000000..addaea487
--- /dev/null
+++ b/api/app/Http/Requests/CapitalOpening/CapitalOpeningUpdateRequest.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Requests\CapitalOpening;
+
+use App\Helpers\HashidsHelper;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidInvestor;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CapitalOpeningUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $capitalOpening = $this->route('capital_opening');
+
+        return $user->can('update', $capitalOpening);
+    }
+
+    public function rules(): array
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'investor_id' => ['required', 'integer', 'bail', new IsValidInvestor($this->company_id)],
+            'cash_account_id' => ['required', 'integer', 'bail', new IsValidCashAccount($this->branch_id)],
+            'amount' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.capital_opening.company'),
+            'branch_id' => trans('validation_attributes.capital_opening.branch'),
+            'code' => trans('validation_attributes.capital_opening.code'),
+            'date' => trans('validation_attributes.capital_opening.date'),
+            'investor_id' => trans('validation_attributes.capital_opening.investor'),
+            'cash_account_id' => trans('validation_attributes.capital_opening.cash_account'),
+            'amount' => trans('validation_attributes.capital_opening.amount'),
+            'remarks' => trans('validation_attributes.capital_opening.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'investor_id' => $this->filled('investor_id') ? HashidsHelper::decodeId($this->investor_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CapitalTransaction/CapitalTransactionStoreRequest.php b/api/app/Http/Requests/CapitalTransaction/CapitalTransactionStoreRequest.php
new file mode 100644
index 000000000..8dd72811c
--- /dev/null
+++ b/api/app/Http/Requests/CapitalTransaction/CapitalTransactionStoreRequest.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Http\Requests\CapitalTransaction;
+
+use App\Enums\CapitalTransactionTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\CapitalTransaction;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidInvestor;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class CapitalTransactionStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', CapitalTransaction::class);
+    }
+
+    public function rules(): array
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'investor_id' => ['required', 'integer', 'bail', new IsValidInvestor($this->company_id)],
+            'cash_account_id' => ['required', 'integer', 'bail', new IsValidCashAccount($this->branch_id)],
+            'type' => ['required', new Enum(CapitalTransactionTypeEnum::class)],
+            'amount' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.capital_transaction.company'),
+            'branch_id' => trans('validation_attributes.capital_transaction.branch'),
+            'code' => trans('validation_attributes.capital_transaction.code'),
+            'date' => trans('validation_attributes.capital_transaction.date'),
+            'investor_id' => trans('validation_attributes.capital_transaction.investor'),
+            'cash_account_id' => trans('validation_attributes.capital_transaction.cash_account'),
+            'type' => trans('validation_attributes.capital_transaction.type'),
+            'amount' => trans('validation_attributes.capital_transaction.amount'),
+            'remarks' => trans('validation_attributes.capital_transaction.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'investor_id' => $this->filled('investor_id') ? HashidsHelper::decodeId($this->investor_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+            'type' => CapitalTransactionTypeEnum::isValid($this->type) ? CapitalTransactionTypeEnum::resolveToEnum($this->type)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CapitalTransaction/CapitalTransactionUpdateRequest.php b/api/app/Http/Requests/CapitalTransaction/CapitalTransactionUpdateRequest.php
new file mode 100644
index 000000000..217771209
--- /dev/null
+++ b/api/app/Http/Requests/CapitalTransaction/CapitalTransactionUpdateRequest.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Http\Requests\CapitalTransaction;
+
+use App\Enums\CapitalTransactionTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidInvestor;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class CapitalTransactionUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $capitalTransaction = $this->route('capital_transaction');
+
+        return $user->can('update', $capitalTransaction);
+    }
+
+    public function rules(): array
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'investor_id' => ['required', 'integer', 'bail', new IsValidInvestor($this->company_id)],
+            'cash_account_id' => ['required', 'integer', 'bail', new IsValidCashAccount($this->branch_id)],
+            'type' => ['required', new Enum(CapitalTransactionTypeEnum::class)],
+            'amount' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.capital_transaction.company'),
+            'branch_id' => trans('validation_attributes.capital_transaction.branch'),
+            'code' => trans('validation_attributes.capital_transaction.code'),
+            'date' => trans('validation_attributes.capital_transaction.date'),
+            'investor_id' => trans('validation_attributes.capital_transaction.investor'),
+            'cash_account_id' => trans('validation_attributes.capital_transaction.cash_account'),
+            'type' => trans('validation_attributes.capital_transaction.type'),
+            'amount' => trans('validation_attributes.capital_transaction.amount'),
+            'remarks' => trans('validation_attributes.capital_transaction.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'investor_id' => $this->filled('investor_id') ? HashidsHelper::decodeId($this->investor_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+            'type' => CapitalTransactionTypeEnum::isValid($this->type) ? CapitalTransactionTypeEnum::resolveToEnum($this->type)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CashAccount/CashAccountStoreRequest.php b/api/app/Http/Requests/CashAccount/CashAccountStoreRequest.php
new file mode 100644
index 000000000..e07a09724
--- /dev/null
+++ b/api/app/Http/Requests/CashAccount/CashAccountStoreRequest.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Http\Requests\CashAccount;
+
+use App\Helpers\HashidsHelper;
+use App\Models\CashAccount;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CashAccountStoreRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', CashAccount::class) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'is_bank' => ['required', 'boolean'],
+            'is_active' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.cash_account.company'),
+            'branch_id' => trans('validation_attributes.cash_account.branch'),
+            'code' => trans('validation_attributes.cash_account.code'),
+            'name' => trans('validation_attributes.cash_account.name'),
+            'is_bank' => trans('validation_attributes.cash_account.is_bank'),
+            'is_active' => trans('validation_attributes.cash_account.is_active'),
+            'remarks' => trans('validation_attributes.cash_account.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CashAccount/CashAccountUpdateRequest.php b/api/app/Http/Requests/CashAccount/CashAccountUpdateRequest.php
new file mode 100644
index 000000000..b6a0905a1
--- /dev/null
+++ b/api/app/Http/Requests/CashAccount/CashAccountUpdateRequest.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Requests\CashAccount;
+
+use App\Helpers\HashidsHelper;
+use App\Models\CashAccount;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CashAccountUpdateRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $cashAccount = $this->route('cash_account');
+
+        return $user->can('update', CashAccount::class, $cashAccount) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'is_bank' => ['required', 'boolean'],
+            'is_active' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.cash_account.company'),
+            'code' => trans('validation_attributes.cash_account.code'),
+            'name' => trans('validation_attributes.cash_account.name'),
+            'is_bank' => trans('validation_attributes.cash_account.is_bank'),
+            'is_active' => trans('validation_attributes.cash_account.is_active'),
+            'remarks' => trans('validation_attributes.cash_account.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CashTransfer/CashTransferStoreRequest.php b/api/app/Http/Requests/CashTransfer/CashTransferStoreRequest.php
new file mode 100644
index 000000000..bf6ec6c8c
--- /dev/null
+++ b/api/app/Http/Requests/CashTransfer/CashTransferStoreRequest.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Requests\CashTransfer;
+
+use App\Helpers\HashidsHelper;
+use App\Models\CashTransfer;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CashTransferStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', CashTransfer::class);
+    }
+
+    public function rules(): array
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'source_cash_account_id' => ['required', 'integer', 'bail', new IsValidCashAccount($this->branch_id), 'different:destination_cash_account_id'],
+            'destination_cash_account_id' => ['required', 'integer', 'bail', new IsValidCashAccount($this->branch_id), 'different:source_cash_account_id'],
+            'amount' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.cash_transfer.company'),
+            'branch_id' => trans('validation_attributes.cash_transfer.branch'),
+            'code' => trans('validation_attributes.cash_transfer.code'),
+            'date' => trans('validation_attributes.cash_transfer.date'),
+            'source_cash_account_id' => trans('validation_attributes.cash_transfer.source_cash_account'),
+            'destination_cash_account_id' => trans('validation_attributes.cash_transfer.destination_cash_account'),
+            'amount' => trans('validation_attributes.cash_transfer.amount'),
+            'remarks' => trans('validation_attributes.cash_transfer.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'source_cash_account_id' => $this->filled('source_cash_account_id') ? HashidsHelper::decodeId($this->source_cash_account_id) : null,
+            'destination_cash_account_id' => $this->filled('destination_cash_account_id') ? HashidsHelper::decodeId($this->destination_cash_account_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CashTransfer/CashTransferUpdateRequest.php b/api/app/Http/Requests/CashTransfer/CashTransferUpdateRequest.php
new file mode 100644
index 000000000..e5eae0c6b
--- /dev/null
+++ b/api/app/Http/Requests/CashTransfer/CashTransferUpdateRequest.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Requests\CashTransfer;
+
+use App\Helpers\HashidsHelper;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CashTransferUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $cashTransfer = $this->route('cash_transfer');
+
+        return $user->can('update', $cashTransfer);
+    }
+
+    public function rules(): array
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'source_cash_account_id' => ['required', 'integer', 'bail', new IsValidCashAccount($this->branch_id), 'different:destination_cash_account_id'],
+            'destination_cash_account_id' => ['required', 'integer', 'bail', new IsValidCashAccount($this->branch_id), 'different:source_cash_account_id'],
+            'amount' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.cash_transfer.company'),
+            'branch_id' => trans('validation_attributes.cash_transfer.branch'),
+            'code' => trans('validation_attributes.cash_transfer.code'),
+            'date' => trans('validation_attributes.cash_transfer.date'),
+            'source_cash_account_id' => trans('validation_attributes.cash_transfer.source_cash_account'),
+            'destination_cash_account_id' => trans('validation_attributes.cash_transfer.destination_cash_account'),
+            'amount' => trans('validation_attributes.cash_transfer.amount'),
+            'remarks' => trans('validation_attributes.cash_transfer.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'source_cash_account_id' => $this->filled('source_cash_account_id') ? HashidsHelper::decodeId($this->source_cash_account_id) : null,
+            'destination_cash_account_id' => $this->filled('destination_cash_account_id') ? HashidsHelper::decodeId($this->destination_cash_account_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/ChartOfAccount/ChartOfAccountStoreRequest.php b/api/app/Http/Requests/ChartOfAccount/ChartOfAccountStoreRequest.php
new file mode 100644
index 000000000..5172c25c1
--- /dev/null
+++ b/api/app/Http/Requests/ChartOfAccount/ChartOfAccountStoreRequest.php
@@ -0,0 +1,111 @@
+<?php
+
+namespace App\Http\Requests\ChartOfAccount;
+
+use App\Enums\ChartOfAccountNormalBalanceEnum;
+use App\Enums\ChartOfAccountScopeEnum;
+use App\Enums\ChartOfAccountSystemKeyEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ChartOfAccount;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\Rules\Enum;
+
+class ChartOfAccountStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', ChartOfAccount::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'parent_id' => $this->filled('parent_id') ? HashidsHelper::decodeId($this->parent_id) : null,
+            'scope' => ChartOfAccountScopeEnum::isValid($this->scope) ? ChartOfAccountScopeEnum::resolveToEnum($this->scope)->value : null,
+            'system_key' => ChartOfAccountSystemKeyEnum::isValid($this->system_key) ? ChartOfAccountSystemKeyEnum::resolveToEnum($this->system_key)->value : null,
+            'source_type' => $this->filled('source_type') ? $this->source_type : null,
+            'source_id' => $this->filled('source_id') ? (int) $this->source_id : null,
+            'remarks' => $this->filled('remarks') ? $this->remarks : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'scope' => ['required', new Enum(ChartOfAccountScopeEnum::class)],
+            'system_key' => [
+                'present',
+                'nullable',
+                new Enum(ChartOfAccountSystemKeyEnum::class),
+                Rule::unique('chart_of_accounts', 'system_key')->where(fn ($query) => $query->where('company_id', $this->company_id)),
+            ],
+            'parent_id' => ['present', 'nullable', 'integer', new ExistsForCompany('chart_of_accounts', $this->company_id)],
+            'source_type' => ['present', 'nullable', 'string', 'max:255'],
+            'source_id' => ['present', 'nullable', 'integer', 'min:1'],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'normal_balance' => ['required', new Enum(ChartOfAccountNormalBalanceEnum::class)],
+            'is_group' => ['required', 'boolean'],
+            'is_active' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($this->scope === ChartOfAccountScopeEnum::SYSTEM->value && is_null($this->system_key)) {
+                $validator->errors()->add('system_key', trans('rules.chart_of_account.system_scope_requires_system_key'));
+            }
+
+            if ($this->scope === ChartOfAccountScopeEnum::USER->value && ! is_null($this->system_key)) {
+                $validator->errors()->add('system_key', trans('rules.chart_of_account.user_scope_must_not_have_system_key'));
+            }
+
+            if (is_null($this->source_type) xor is_null($this->source_id)) {
+                $validator->errors()->add('source_type', trans('rules.chart_of_account.source_type_and_source_id_must_be_paired'));
+                $validator->errors()->add('source_id', trans('rules.chart_of_account.source_type_and_source_id_must_be_paired'));
+            }
+
+            if (is_null($this->parent_id)) {
+                $validator->errors()->add('parent_id', trans('rules.chart_of_account.parent_is_required_for_account_type'));
+
+                return;
+            }
+
+            if (
+                $validator->errors()->has('company_id')
+                || $validator->errors()->has('parent_id')
+            ) {
+                return;
+            }
+
+            $parent = ChartOfAccount::query()
+                ->where('company_id', $this->company_id)
+                ->where('id', $this->parent_id)
+                ->first();
+
+            if (! $parent?->is_group) {
+                $validator->errors()->add('parent_id', trans('rules.chart_of_account.parent_must_be_group'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.chart_of_account');
+    }
+}
diff --git a/api/app/Http/Requests/ChartOfAccount/ChartOfAccountUpdateRequest.php b/api/app/Http/Requests/ChartOfAccount/ChartOfAccountUpdateRequest.php
new file mode 100644
index 000000000..879a8ca28
--- /dev/null
+++ b/api/app/Http/Requests/ChartOfAccount/ChartOfAccountUpdateRequest.php
@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Http\Requests\ChartOfAccount;
+
+use App\Enums\ChartOfAccountNormalBalanceEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ChartOfAccount;
+use App\Rules\ExistsForCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class ChartOfAccountUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $chartOfAccount = $this->route('chart_of_account');
+
+        return $user->can('update', $chartOfAccount);
+    }
+
+    public function prepareForValidation()
+    {
+        /** @var ChartOfAccount|null $chartOfAccount */
+        $chartOfAccount = $this->route('chart_of_account');
+
+        $this->merge([
+            'company_id' => $chartOfAccount?->company_id,
+            'parent_id' => $this->filled('parent_id') ? HashidsHelper::decodeId($this->parent_id) : null,
+            'remarks' => $this->filled('remarks') ? $this->remarks : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'parent_id' => ['present', 'nullable', 'integer', new ExistsForCompany('chart_of_accounts', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'normal_balance' => ['required', new Enum(ChartOfAccountNormalBalanceEnum::class)],
+            'is_group' => ['required', 'boolean'],
+            'is_active' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            /** @var ChartOfAccount|null $chartOfAccount */
+            $chartOfAccount = $this->route('chart_of_account');
+
+            if (! $chartOfAccount) {
+                return;
+            }
+
+            if ($this->parent_id === $chartOfAccount->id) {
+                $validator->errors()->add('parent_id', trans('rules.chart_of_account.parent_must_not_be_self'));
+            }
+
+            if (is_null($this->parent_id) && ! is_null($chartOfAccount->parent_id)) {
+                $validator->errors()->add('parent_id', trans('rules.chart_of_account.parent_is_required_for_account_type'));
+            }
+
+            if (
+                ! is_null($this->parent_id)
+                && ! $validator->errors()->has('parent_id')
+            ) {
+                $parent = ChartOfAccount::query()
+                    ->where('company_id', $chartOfAccount->company_id)
+                    ->where('id', $this->parent_id)
+                    ->first();
+
+                if (! $parent?->is_group) {
+                    $validator->errors()->add('parent_id', trans('rules.chart_of_account.parent_must_be_group'));
+                }
+
+                if ($parent && $this->isDescendantOf($parent, $chartOfAccount->id)) {
+                    $validator->errors()->add('parent_id', trans('rules.chart_of_account.parent_must_not_be_descendant'));
+                }
+            }
+
+            if (! $this->boolean('is_group') && $chartOfAccount->children()->exists()) {
+                $validator->errors()->add('is_group', trans('rules.chart_of_account.non_group_must_not_have_children'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.chart_of_account');
+    }
+
+    private function isDescendantOf(ChartOfAccount $candidateParent, int $chartOfAccountId): bool
+    {
+        $current = $candidateParent;
+
+        while (! is_null($current)) {
+            if ($current->id === $chartOfAccountId) {
+                return true;
+            }
+
+            $current = $current->parent;
+        }
+
+        return false;
+    }
+}
diff --git a/api/app/Http/Requests/Company/CompanyStoreRequest.php b/api/app/Http/Requests/Company/CompanyStoreRequest.php
new file mode 100644
index 000000000..8de4006ca
--- /dev/null
+++ b/api/app/Http/Requests/Company/CompanyStoreRequest.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Http\Requests\Company;
+
+use App\Enums\RecordStatusEnum;
+use App\Models\Company;
+use App\Rules\CompanyStoreValidCode;
+use App\Rules\CompanyStoreValidDefault;
+use App\Rules\CompanyStoreValidName;
+use App\Rules\CompanyStoreValidStatus;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class CompanyStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\Models\User */
+        $user = Auth::user();
+
+        return $user->can('create', Company::class);
+    }
+
+    public function rules()
+    {
+        /** @var \App\Models\User */
+        $user = Auth::user();
+
+        return [
+            'code' => ['required', 'string', 'max:255', new CompanyStoreValidCode($user)],
+            'name' => ['required', 'string', 'max:255', new CompanyStoreValidName($user)],
+            'address' => ['present', 'nullable', 'string', 'max:255'],
+            'default' => ['required', 'boolean', new CompanyStoreValidDefault($user)],
+            'status' => ['required', new Enum(RecordStatusEnum::class), new CompanyStoreValidStatus($this->input('default'))],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.company.company'),
+            'code' => trans('validation_attributes.company.code'),
+            'name' => trans('validation_attributes.company.name'),
+            'address' => trans('validation_attributes.company.address'),
+            'default' => trans('validation_attributes.company.default'),
+            'status' => trans('validation_attributes.company.status'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Company/CompanyUpdateRequest.php b/api/app/Http/Requests/Company/CompanyUpdateRequest.php
new file mode 100644
index 000000000..1e30280ae
--- /dev/null
+++ b/api/app/Http/Requests/Company/CompanyUpdateRequest.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Http\Requests\Company;
+
+use App\Enums\RecordStatusEnum;
+use App\Rules\CompanyUpdateValidCode;
+use App\Rules\CompanyUpdateValidDefault;
+use App\Rules\CompanyUpdateValidName;
+use App\Rules\CompanyUpdateValidStatus;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class CompanyUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\Models\User */
+        $user = Auth::user();
+
+        return $user->can('update', $this->route('company'));
+    }
+
+    public function rules()
+    {
+        /** @var \App\Models\User */
+        $user = Auth::user();
+
+        return [
+            'code' => ['required', 'string', 'max:255', new CompanyUpdateValidCode($user, $this->route('company'))],
+            'name' => ['required', 'string', 'max:255', new CompanyUpdateValidName($user, $this->route('company'))],
+            'address' => ['present', 'nullable', 'string', 'max:255'],
+            'default' => ['required', 'boolean', new CompanyUpdateValidDefault($user)],
+            'status' => ['required', new Enum(RecordStatusEnum::class), new CompanyUpdateValidStatus($this->input('default'))],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.company.company'),
+            'code' => trans('validation_attributes.company.code'),
+            'name' => trans('validation_attributes.company.name'),
+            'address' => trans('validation_attributes.company.address'),
+            'default' => trans('validation_attributes.company.default'),
+            'status' => trans('validation_attributes.company.status'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CompanyRequest.php b/api/app/Http/Requests/CompanyRequest.php
deleted file mode 100644
index 1dc13ad91..000000000
--- a/api/app/Http/Requests/CompanyRequest.php
+++ /dev/null
@@ -1,163 +0,0 @@
-<?php
-
-namespace App\Http\Requests;
-
-use App\Enums\RecordStatus;
-use App\Models\Company;
-use App\Rules\DeactivateDefaultCompany;
-use App\Rules\SetCompanyToNonDefault;
-use Illuminate\Foundation\Http\FormRequest;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Validation\Rules\Enum;
-
-class CompanyRequest extends FormRequest
-{
-    /**
-     * Determine if the user is authorized to make this request.
-     *
-     * @return bool
-     */
-    public function authorize()
-    {
-        if (! Auth::check()) {
-            return false;
-        }
-
-        /** @var \App\User */
-        $user = Auth::user();
-        $company = $this->route('company');
-
-        $currentRouteMethod = $this->route()->getActionMethod();
-        switch ($currentRouteMethod) {
-            case 'readAny':
-                return $user->can('viewAny', Company::class) ? true : false;
-            case 'read':
-                return $user->can('view', Company::class, $company) ? true : false;
-            case 'store':
-                return $user->can('create', Company::class) ? true : false;
-            case 'update':
-                return $user->can('update', Company::class, $company) ? true : false;
-            case 'delete':
-                return $user->can('delete', Company::class, $company) ? true : false;
-            default:
-                return false;
-        }
-    }
-
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array
-     */
-    public function rules()
-    {
-        $nullableArr = [
-            'address' => ['nullable', 'max:255'],
-        ];
-
-        $currentRouteMethod = $this->route()->getActionMethod();
-        switch ($currentRouteMethod) {
-            case 'readAny':
-                $rules_read_any = [
-                    'search' => ['present', 'string'],
-                    'paginate' => ['required', 'boolean'],
-                    'page' => ['required_if:paginate,true', 'numeric'],
-                    'per_page' => ['required_if:paginate,true', 'numeric'],
-                    'refresh' => ['nullable', 'boolean'],
-                ];
-
-                return $rules_read_any;
-            case 'read':
-                $rules_read = [
-                ];
-
-                return $rules_read;
-            case 'store':
-                $rules_store = [
-                    /* Test Validation Error For Code */
-                    //'code' => ['required', 'max:1', 'alpha'],
-                    //'name' => ['required', 'max:1'],
-                    /* Test Validation Error For Code */
-                    'code' => ['required', 'max:255'],
-                    'name' => ['required', 'max:255'],
-                    'default' => ['required', 'boolean'],
-                    'status' => [new Enum(RecordStatus::class), new DeactivateDefaultCompany($this->input('default'))],
-                ];
-
-                return array_merge($rules_store, $nullableArr);
-            case 'update':
-                $user = Auth::user();
-                $rules_update = [
-                    'code' => ['required', 'max:255'],
-                    'name' => ['required', 'max:255'],
-                    'default' => ['required', 'boolean', new SetCompanyToNonDefault($user)],
-                    'status' => [new Enum(RecordStatus::class), new DeactivateDefaultCompany($this->input('default'))],
-                ];
-
-                return array_merge($rules_update, $nullableArr);
-
-            case 'delete':
-                $rules_delete = [
-
-                ];
-
-                return $rules_delete;
-            default:
-                return [
-                    '' => 'required',
-                ];
-        }
-    }
-
-    public function attributes()
-    {
-        return [
-            'company_id' => trans('validation_attributes.company.company'),
-            'code' => trans('validation_attributes.company.code'),
-            'name' => trans('validation_attributes.company.name'),
-            'address' => trans('validation_attributes.company.address'),
-            'default' => trans('validation_attributes.company.default'),
-            'status' => trans('validation_attributes.company.status'),
-        ];
-    }
-
-    public function validationData()
-    {
-        $additionalArray = [];
-
-        return array_merge($this->all(), $additionalArray);
-    }
-
-    public function prepareForValidation()
-    {
-        $currentRouteMethod = $this->route()->getActionMethod();
-        switch ($currentRouteMethod) {
-            case 'readAny':
-                $this->merge([
-                    'search' => $this->has('search') && ! is_null($this->search) ? $this->search : '',
-                    'paginate' => $this->has('paginate') ? filter_var($this->paginate, FILTER_VALIDATE_BOOLEAN) : true,
-                ]);
-                break;
-            case 'read':
-                $this->merge([]);
-                break;
-            case 'store':
-                $this->merge([
-                    'address' => $this->has('address') ? $this['address'] : null,
-                    'default' => $this->has('default') ? filter_var($this->default, FILTER_VALIDATE_BOOLEAN) : false,
-                    'status' => RecordStatus::isValid($this->status) ? RecordStatus::resolveToEnum($this->status)->value : -1,
-                ]);
-                break;
-            case 'update':
-                $this->merge([
-                    'address' => $this->has('address') ? $this['address'] : null,
-                    'default' => $this->has('default') ? filter_var($this->default, FILTER_VALIDATE_BOOLEAN) : false,
-                    'status' => RecordStatus::isValid($this->status) ? RecordStatus::resolveToEnum($this->status)->value : -1,
-                ]);
-                break;
-            default:
-                $this->merge([]);
-                break;
-        }
-    }
-}
diff --git a/api/app/Http/Requests/Customer/CustomerStoreRequest.php b/api/app/Http/Requests/Customer/CustomerStoreRequest.php
new file mode 100644
index 000000000..300e3cad4
--- /dev/null
+++ b/api/app/Http/Requests/Customer/CustomerStoreRequest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Requests\Customer;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Customer;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class CustomerStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Customer::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'is_member' => ['required', 'boolean'],
+            'name' => ['required', 'string', 'max:255'],
+            'group_id' => ['present', 'nullable', 'integer', 'bail', new ExistsForCompany('customer_groups', $this->company_id)],
+            'zone' => ['present', 'nullable', 'string', 'max:255'],
+            'max_open_invoice' => ['required', 'integer', 'min:0'],
+            'max_outstanding_invoice' => ['required', 'numeric', 'min:0'],
+            'max_invoice_age' => ['required', 'integer', 'min:0'],
+            'payment_term_type' => ['present', 'nullable', new Enum(PaymentTermTypeEnum::class)],
+            'payment_term' => ['required', 'integer', 'min:0'],
+            'taxable_enterprise' => ['required', 'boolean'],
+            'tax_id' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.customer.company'),
+            'code' => trans('validation_attributes.customer.code'),
+            'is_member' => trans('validation_attributes.customer.is_member'),
+            'name' => trans('validation_attributes.customer.name'),
+            'zone' => trans('validation_attributes.customer.zone'),
+            'max_open_invoice' => trans('validation_attributes.customer.max_open_invoice'),
+            'max_outstanding_invoice' => trans('validation_attributes.customer.max_outstanding_invoice'),
+            'max_invoice_age' => trans('validation_attributes.customer.max_invoice_age'),
+            'payment_term_type' => trans('validation_attributes.customer.payment_term_type'),
+            'payment_term' => trans('validation_attributes.customer.payment_term'),
+            'taxable_enterprise' => trans('validation_attributes.customer.taxable_enterprise'),
+            'tax_id' => trans('validation_attributes.customer.tax_id'),
+            'status' => trans('validation_attributes.customer.status'),
+            'remarks' => trans('validation_attributes.customer.remarks'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'group_id' => $this->filled('group_id') ? HashidsHelper::decodeId($this->group_id) : null,
+            'payment_term_type' => PaymentTermTypeEnum::isValid($this->payment_term_type) ? PaymentTermTypeEnum::resolveToEnum($this->payment_term_type)->value : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Customer/CustomerUpdateRequest.php b/api/app/Http/Requests/Customer/CustomerUpdateRequest.php
new file mode 100644
index 000000000..9e7c94707
--- /dev/null
+++ b/api/app/Http/Requests/Customer/CustomerUpdateRequest.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Requests\Customer;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Customer;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class CustomerUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $customer = $this->route('customer');
+
+        return $user->can('update', Customer::class, $customer) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'is_member' => ['required', 'boolean'],
+            'name' => ['required', 'string', 'max:255'],
+            'group_id' => ['present', 'nullable', 'integer', new ExistsForCompany('customer_groups', $this->company_id)],
+            'zone' => ['present', 'nullable', 'string', 'max:255'],
+            'max_open_invoice' => ['required', 'integer', 'min:0'],
+            'max_outstanding_invoice' => ['required', 'numeric', 'min:0'],
+            'max_invoice_age' => ['required', 'integer', 'min:0'],
+            'payment_term_type' => ['present', 'nullable', new Enum(PaymentTermTypeEnum::class)],
+            'payment_term' => ['required', 'integer', 'min:0'],
+            'taxable_enterprise' => ['required', 'boolean'],
+            'tax_id' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.customer.company'),
+            'code' => trans('validation_attributes.customer.code'),
+            'is_member' => trans('validation_attributes.customer.is_member'),
+            'name' => trans('validation_attributes.customer.name'),
+            'zone' => trans('validation_attributes.customer.zone'),
+            'max_open_invoice' => trans('validation_attributes.customer.max_open_invoice'),
+            'max_outstanding_invoice' => trans('validation_attributes.customer.max_outstanding_invoice'),
+            'max_invoice_age' => trans('validation_attributes.customer.max_invoice_age'),
+            'payment_term_type' => trans('validation_attributes.customer.payment_term_type'),
+            'payment_term' => trans('validation_attributes.customer.payment_term'),
+            'taxable_enterprise' => trans('validation_attributes.customer.taxable_enterprise'),
+            'tax_id' => trans('validation_attributes.customer.tax_id'),
+            'status' => trans('validation_attributes.customer.status'),
+            'remarks' => trans('validation_attributes.customer.remarks'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'group_id' => $this->filled('group_id') ? HashidsHelper::decodeId($this->group_id) : null,
+            'payment_term_type' => PaymentTermTypeEnum::isValid($this->payment_term_type) ? PaymentTermTypeEnum::resolveToEnum($this->payment_term_type)->value : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CustomerAddress/CustomerAddressStoreRequest.php b/api/app/Http/Requests/CustomerAddress/CustomerAddressStoreRequest.php
new file mode 100644
index 000000000..7bb70f3b6
--- /dev/null
+++ b/api/app/Http/Requests/CustomerAddress/CustomerAddressStoreRequest.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Requests\CustomerAddress;
+
+use App\Helpers\HashidsHelper;
+use App\Models\CustomerAddress;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidCustomer;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CustomerAddressStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', CustomerAddress::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'customer_id' => ['required', 'integer', new IsValidCustomer($this->company_id)],
+            'address' => ['required', 'string', 'max:255'],
+            'city' => ['present', 'nullable', 'string', 'max:255'],
+            'contact' => ['present', 'nullable', 'string', 'max:255'],
+            'is_main' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.customer_address.company'),
+            'customer_id' => trans('validation_attributes.customer_address.customer'),
+            'address' => trans('validation_attributes.customer_address.address'),
+            'city' => trans('validation_attributes.customer_address.city'),
+            'contact' => trans('validation_attributes.customer_address.contact'),
+            'is_main' => trans('validation_attributes.customer_address.is_main'),
+            'remarks' => trans('validation_attributes.customer_address.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'customer_id' => $this->filled('customer_id') ? HashidsHelper::decodeId($this->customer_id) : null,
+            'city' => $this->filled('city') ? $this['city'] : null,
+            'contact' => $this->filled('contact') ? $this['contact'] : null,
+            'remarks' => $this->filled('remarks') ? $this['remarks'] : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CustomerAddress/CustomerAddressUpdateRequest.php b/api/app/Http/Requests/CustomerAddress/CustomerAddressUpdateRequest.php
new file mode 100644
index 000000000..1987da897
--- /dev/null
+++ b/api/app/Http/Requests/CustomerAddress/CustomerAddressUpdateRequest.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Requests\CustomerAddress;
+
+use App\Helpers\HashidsHelper;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidCustomer;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CustomerAddressUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $customerAddress = $this->route('customer_address');
+
+        return $user->can('update', $customerAddress);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'customer_id' => ['required', 'integer', new IsValidCustomer($this->company_id)],
+            'address' => ['required', 'string', 'max:255'],
+            'city' => ['present', 'nullable', 'string', 'max:255'],
+            'contact' => ['present', 'nullable', 'string', 'max:255'],
+            'is_main' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.customer_address.company'),
+            'customer_id' => trans('validation_attributes.customer_address.customer'),
+            'address' => trans('validation_attributes.customer_address.address'),
+            'city' => trans('validation_attributes.customer_address.city'),
+            'contact' => trans('validation_attributes.customer_address.contact'),
+            'is_main' => trans('validation_attributes.customer_address.is_main'),
+            'remarks' => trans('validation_attributes.customer_address.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'customer_id' => $this->filled('customer_id') ? HashidsHelper::decodeId($this->customer_id) : null,
+            'city' => $this->filled('city') ? $this['city'] : null,
+            'contact' => $this->filled('contact') ? $this['contact'] : null,
+            'remarks' => $this->filled('remarks') ? $this['remarks'] : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CustomerGroup/CustomerGroupStoreRequest.php b/api/app/Http/Requests/CustomerGroup/CustomerGroupStoreRequest.php
new file mode 100644
index 000000000..430686aa3
--- /dev/null
+++ b/api/app/Http/Requests/CustomerGroup/CustomerGroupStoreRequest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Requests\CustomerGroup;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RoundingTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\CustomerGroup;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class CustomerGroupStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', CustomerGroup::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'max_open_invoice' => ['required', 'integer', 'min:0'],
+            'max_outstanding_invoice' => ['required', 'numeric', 'min:0'],
+            'max_invoice_age' => ['required', 'integer', 'min:0'],
+            'payment_term_type' => ['required', new Enum(PaymentTermTypeEnum::class)],
+            'payment_term' => ['required', 'integer', 'min:0'],
+            'selling_point' => ['required', 'integer', 'max:255'],
+            'selling_point_multiple' => ['required', 'numeric', 'min:0'],
+            'sell_at_cost' => ['required', 'boolean'],
+            'price_markup_percent' => ['required', 'numeric', 'min:0'],
+            'price_markup_nominal' => ['required', 'numeric', 'min:0'],
+            'price_markdown_percent' => ['required', 'numeric', 'min:0'],
+            'price_markdown_nominal' => ['required', 'numeric', 'min:0'],
+            'rounding_type' => ['required', new Enum(RoundingTypeEnum::class)],
+            'rounding_digit' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.customer_group.company'),
+            'code' => trans('validation_attributes.customer_group.code'),
+            'name' => trans('validation_attributes.customer_group.name'),
+            'max_open_invoice' => trans('validation_attributes.customer_group.max_open_invoice'),
+            'max_outstanding_invoice' => trans('validation_attributes.customer_group.max_outstanding_invoice'),
+            'max_invoice_age' => trans('validation_attributes.customer_group.max_invoice_age'),
+            'payment_term_type' => trans('validation_attributes.customer_group.payment_term_type'),
+            'payment_term' => trans('validation_attributes.customer_group.payment_term'),
+            'selling_point' => trans('validation_attributes.customer_group.selling_point'),
+            'selling_point_multiple' => trans('validation_attributes.customer_group.selling_point_multiple'),
+            'sell_at_cost' => trans('validation_attributes.customer_group.sell_at_cost'),
+            'price_markup_percent' => trans('validation_attributes.customer_group.price_markup_percent'),
+            'price_markup_nominal' => trans('validation_attributes.customer_group.price_markup_nominal'),
+            'price_markdown_percent' => trans('validation_attributes.customer_group.price_markdown_percent'),
+            'price_markdown_nominal' => trans('validation_attributes.customer_group.price_markdown_nominal'),
+            'rounding_type' => trans('validation_attributes.customer_group.rounding_type'),
+            'rounding_digit' => trans('validation_attributes.customer_group.rounding_digit'),
+            'remarks' => trans('validation_attributes.customer_group.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'payment_term_type' => PaymentTermTypeEnum::isValid($this->payment_term_type) ? PaymentTermTypeEnum::resolveToEnum($this->payment_term_type)->value : null,
+            'rounding_type' => RoundingTypeEnum::isValid($this->rounding_type) ? RoundingTypeEnum::resolveToEnum($this->rounding_type)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/CustomerGroup/CustomerGroupUpdateRequest.php b/api/app/Http/Requests/CustomerGroup/CustomerGroupUpdateRequest.php
new file mode 100644
index 000000000..80499b3bf
--- /dev/null
+++ b/api/app/Http/Requests/CustomerGroup/CustomerGroupUpdateRequest.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Requests\CustomerGroup;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RoundingTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\CustomerGroup;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class CustomerGroupUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $customerGroup = $this->route('customer_group');
+
+        return $user->can('update', CustomerGroup::class, $customerGroup);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'max_open_invoice' => ['required', 'integer', 'min:0'],
+            'max_outstanding_invoice' => ['required', 'numeric', 'min:0'],
+            'max_invoice_age' => ['required', 'integer', 'min:0'],
+            'payment_term_type' => ['required', new Enum(PaymentTermTypeEnum::class)],
+            'payment_term' => ['required', 'integer', 'min:0'],
+            'selling_point' => ['required', 'integer', 'max:255'],
+            'selling_point_multiple' => ['required', 'numeric', 'min:0'],
+            'sell_at_cost' => ['required', 'boolean'],
+            'price_markup_percent' => ['required', 'numeric', 'min:0'],
+            'price_markup_nominal' => ['required', 'numeric', 'min:0'],
+            'price_markdown_percent' => ['required', 'numeric', 'min:0'],
+            'price_markdown_nominal' => ['required', 'numeric', 'min:0'],
+            'rounding_type' => ['required', new Enum(RoundingTypeEnum::class)],
+            'rounding_digit' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.customer_group.company'),
+            'code' => trans('validation_attributes.customer_group.code'),
+            'name' => trans('validation_attributes.customer_group.name'),
+            'max_open_invoice' => trans('validation_attributes.customer_group.max_open_invoice'),
+            'max_outstanding_invoice' => trans('validation_attributes.customer_group.max_outstanding_invoice'),
+            'max_invoice_age' => trans('validation_attributes.customer_group.max_invoice_age'),
+            'payment_term_type' => trans('validation_attributes.customer_group.payment_term_type'),
+            'payment_term' => trans('validation_attributes.customer_group.payment_term'),
+            'selling_point' => trans('validation_attributes.customer_group.selling_point'),
+            'selling_point_multiple' => trans('validation_attributes.customer_group.selling_point_multiple'),
+            'sell_at_cost' => trans('validation_attributes.customer_group.sell_at_cost'),
+            'price_markup_percent' => trans('validation_attributes.customer_group.price_markup_percent'),
+            'price_markup_nominal' => trans('validation_attributes.customer_group.price_markup_nominal'),
+            'price_markdown_percent' => trans('validation_attributes.customer_group.price_markdown_percent'),
+            'price_markdown_nominal' => trans('validation_attributes.customer_group.price_markdown_nominal'),
+            'rounding_type' => trans('validation_attributes.customer_group.rounding_type'),
+            'rounding_digit' => trans('validation_attributes.customer_group.rounding_digit'),
+            'remarks' => trans('validation_attributes.customer_group.remarks'),
+        ];
+    }
+
+    protected function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'payment_term_type' => PaymentTermTypeEnum::isValid($this->payment_term_type) ? PaymentTermTypeEnum::resolveToEnum($this->payment_term_type)->value : null,
+            'rounding_type' => RoundingTypeEnum::isValid($this->rounding_type) ? RoundingTypeEnum::resolveToEnum($this->rounding_type)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Debt/DebtStoreRequest.php b/api/app/Http/Requests/Debt/DebtStoreRequest.php
new file mode 100644
index 000000000..ef57d4fb8
--- /dev/null
+++ b/api/app/Http/Requests/Debt/DebtStoreRequest.php
@@ -0,0 +1,159 @@
+<?php
+
+namespace App\Http\Requests\Debt;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Debt;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class DebtStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Debt::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+            'creditor_id' => $this->filled('creditor_id') ? HashidsHelper::decodeId($this->creditor_id) : null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'category_id' => [
+                'required',
+                'integer',
+                Rule::exists('debt_categories', 'id')->where(function ($query) {
+                    $query->where('company_id', $this->company_id)
+                        ->whereNull('deleted_at');
+                }),
+            ],
+            'creditor_id' => [
+                'present',
+                'nullable',
+                'integer',
+                Rule::exists('debt_creditors', 'id')->where(function ($query) {
+                    $query->where('company_id', $this->company_id)
+                        ->whereNull('deleted_at');
+                }),
+            ],
+            'supplier_id' => ['present', 'nullable', 'integer', new ExistsForCompany('suppliers', $this->company_id)],
+            'cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'direct_amount_received' => ['required', 'numeric', 'min:0'],
+            'opening_amount_due' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'payments' => ['present', 'array'],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $directAmountReceived = (float) $this->input('direct_amount_received', 0);
+            $openingAmountDue = (float) $this->input('opening_amount_due', 0);
+            $amountTotal = $directAmountReceived + $openingAmountDue;
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+            $creditorId = $this->input('creditor_id');
+            $supplierId = $this->input('supplier_id');
+            $cashAccountId = $this->input('cash_account_id');
+
+            if (filled($creditorId) && filled($supplierId)) {
+                $validator->errors()->add('form', trans('rules.debt.party_must_be_single'));
+            }
+
+            if (! filled($creditorId) && ! filled($supplierId)) {
+                $validator->errors()->add('form', trans('rules.debt.party_is_required'));
+            }
+
+            if ($amountTotal <= 0) {
+                $validator->errors()->add('form', trans('rules.debt.amount_total_must_be_positive'));
+            }
+
+            if ($directAmountReceived > 0 && ! filled($cashAccountId)) {
+                $validator->errors()->add('cash_account_id', trans('rules.debt.cash_account_is_required_for_direct_amount_received'));
+            }
+
+            if ($directAmountReceived <= 0 && filled($cashAccountId)) {
+                $validator->errors()->add('direct_amount_received', trans('rules.debt.direct_amount_received_is_required_for_cash_account'));
+            }
+
+            if ($paymentTotal > $amountTotal) {
+                $validator->errors()->add('payments', trans('rules.debt.payments_exceed_total_debt'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.debt'),
+            [
+                'payments.*.code' => trans('validation_attributes.debt_payment.code'),
+                'payments.*.date' => trans('validation_attributes.debt_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.debt_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.debt_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.debt_payment.remarks'),
+            ],
+        );
+    }
+}
diff --git a/api/app/Http/Requests/Debt/DebtUpdateRequest.php b/api/app/Http/Requests/Debt/DebtUpdateRequest.php
new file mode 100644
index 000000000..8022f70a4
--- /dev/null
+++ b/api/app/Http/Requests/Debt/DebtUpdateRequest.php
@@ -0,0 +1,183 @@
+<?php
+
+namespace App\Http\Requests\Debt;
+
+use App\Helpers\HashidsHelper;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class DebtUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $debt = $this->route('debt');
+
+        return $user->can('update', $debt);
+    }
+
+    public function prepareForValidation()
+    {
+        $debt = $this->route('debt');
+        $deletePaymentIds = collect($this->input('delete_payment_ids', []))
+            ->map(fn ($id) => HashidsHelper::decodeId($id))
+            ->all();
+
+        $this->merge([
+            'company_id' => $debt->company_id,
+            'branch_id' => $debt->branch_id,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+            'creditor_id' => $this->filled('creditor_id') ? HashidsHelper::decodeId($this->creditor_id) : null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+            'delete_payment_ids' => $deletePaymentIds,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('id', $payment) && ! is_null($payment['id'])) {
+                    $payment['id'] = HashidsHelper::decodeId($payment['id']);
+                }
+
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        $debt = $this->route('debt');
+
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'category_id' => ['required', 'integer', new ExistsForCompany('debt_categories', $this->company_id)],
+            'creditor_id' => ['present', 'nullable', 'integer', new ExistsForCompany('debt_creditors', $this->company_id)],
+            'supplier_id' => ['present', 'nullable', 'integer', new ExistsForCompany('suppliers', $this->company_id)],
+            'cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'direct_amount_received' => ['required', 'numeric', 'min:0'],
+            'opening_amount_due' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_payment_ids' => ['present', 'array'],
+            'delete_payment_ids.*' => [
+                'required',
+                'integer',
+                'distinct',
+                Rule::exists('debt_payments', 'id')->where(function ($query) use ($debt) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('debt_id', $debt->id);
+                }),
+            ],
+
+            'payments' => ['present', 'array'],
+            'payments.*.id' => [
+                'present',
+                'nullable',
+                'integer',
+                Rule::exists('debt_payments', 'id')->where(function ($query) use ($debt) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('debt_id', $debt->id);
+                }),
+            ],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $directAmountReceived = (float) $this->input('direct_amount_received', 0);
+            $openingAmountDue = (float) $this->input('opening_amount_due', 0);
+            $amountTotal = $directAmountReceived + $openingAmountDue;
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+            $creditorId = $this->input('creditor_id');
+            $supplierId = $this->input('supplier_id');
+            $cashAccountId = $this->input('cash_account_id');
+
+            if (filled($creditorId) && filled($supplierId)) {
+                $validator->errors()->add('form', trans('rules.debt.party_must_be_single'));
+            }
+
+            if (! filled($creditorId) && ! filled($supplierId)) {
+                $validator->errors()->add('form', trans('rules.debt.party_is_required'));
+            }
+
+            if ($amountTotal <= 0) {
+                $validator->errors()->add('form', trans('rules.debt.amount_total_must_be_positive'));
+            }
+
+            if ($directAmountReceived > 0 && ! filled($cashAccountId)) {
+                $validator->errors()->add('cash_account_id', trans('rules.debt.cash_account_is_required_for_direct_amount_received'));
+            }
+
+            if ($directAmountReceived <= 0 && filled($cashAccountId)) {
+                $validator->errors()->add('direct_amount_received', trans('rules.debt.direct_amount_received_is_required_for_cash_account'));
+            }
+
+            if ($paymentTotal > $amountTotal) {
+                $validator->errors()->add('payments', trans('rules.debt.payments_exceed_total_debt'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.debt'),
+            [
+                'payments.*.id' => trans('validation_attributes.debt_payment.id'),
+                'payments.*.code' => trans('validation_attributes.debt_payment.code'),
+                'payments.*.date' => trans('validation_attributes.debt_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.debt_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.debt_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.debt_payment.remarks'),
+            ],
+        );
+    }
+
+    public function messages()
+    {
+        return [
+            'delete_payment_ids.*.exists' => trans('rules.debt.invalid_payment_reference'),
+            'payments.*.id.exists' => trans('rules.debt.invalid_payment_reference'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/DebtCategory/DebtCategoryStoreRequest.php b/api/app/Http/Requests/DebtCategory/DebtCategoryStoreRequest.php
new file mode 100644
index 000000000..5299b11d1
--- /dev/null
+++ b/api/app/Http/Requests/DebtCategory/DebtCategoryStoreRequest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests\DebtCategory;
+
+use App\Helpers\HashidsHelper;
+use App\Models\DebtCategory;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class DebtCategoryStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', DebtCategory::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'sequence' => ['required', 'integer', 'min:0'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.debt_category');
+    }
+}
diff --git a/api/app/Http/Requests/DebtCategory/DebtCategoryUpdateRequest.php b/api/app/Http/Requests/DebtCategory/DebtCategoryUpdateRequest.php
new file mode 100644
index 000000000..ba8a51e7a
--- /dev/null
+++ b/api/app/Http/Requests/DebtCategory/DebtCategoryUpdateRequest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests\DebtCategory;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class DebtCategoryUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $debtCategory = $this->route('debt_category');
+
+        return $user->can('update', $debtCategory);
+    }
+
+    public function prepareForValidation()
+    {
+        $debtCategory = $this->route('debt_category');
+
+        $this->merge([
+            'company_id' => $debtCategory?->company_id,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+            'sequence' => ['required', 'integer', 'min:0'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.debt_category');
+    }
+}
diff --git a/api/app/Http/Requests/DebtCreditor/DebtCreditorStoreRequest.php b/api/app/Http/Requests/DebtCreditor/DebtCreditorStoreRequest.php
new file mode 100644
index 000000000..769bb5e16
--- /dev/null
+++ b/api/app/Http/Requests/DebtCreditor/DebtCreditorStoreRequest.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Http\Requests\DebtCreditor;
+
+use App\Helpers\HashidsHelper;
+use App\Models\DebtCreditor;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class DebtCreditorStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', DebtCreditor::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.debt_creditor.company'),
+            'code' => trans('validation_attributes.debt_creditor.code'),
+            'name' => trans('validation_attributes.debt_creditor.name'),
+            'remarks' => trans('validation_attributes.debt_creditor.remarks'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/DebtCreditor/DebtCreditorUpdateRequest.php b/api/app/Http/Requests/DebtCreditor/DebtCreditorUpdateRequest.php
new file mode 100644
index 000000000..e3b427262
--- /dev/null
+++ b/api/app/Http/Requests/DebtCreditor/DebtCreditorUpdateRequest.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Http\Requests\DebtCreditor;
+
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class DebtCreditorUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $debtCreditor = $this->route('debt_creditor');
+
+        return $user->can('update', $debtCreditor);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.debt_creditor.company'),
+            'code' => trans('validation_attributes.debt_creditor.code'),
+            'name' => trans('validation_attributes.debt_creditor.name'),
+            'remarks' => trans('validation_attributes.debt_creditor.remarks'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $debtCreditor = $this->route('debt_creditor');
+
+        $this->merge([
+            'company_id' => $debtCreditor?->company_id,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/DebtPayment/DebtPaymentStoreRequest.php b/api/app/Http/Requests/DebtPayment/DebtPaymentStoreRequest.php
new file mode 100644
index 000000000..72861977d
--- /dev/null
+++ b/api/app/Http/Requests/DebtPayment/DebtPaymentStoreRequest.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Http\Requests\DebtPayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Debt;
+use App\Models\DebtPayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class DebtPaymentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', DebtPayment::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'debt_id' => $this->filled('debt_id') ? HashidsHelper::decodeId($this->debt_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        $debt = $this->filled('debt_id')
+            ? Debt::find($this->input('debt_id'))
+            : null;
+
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'debt_id' => [
+                'required',
+                'integer',
+                Rule::exists('debts', 'id')->where(function ($query) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('branch_id', $this->branch_id)
+                        ->whereNull('deleted_at');
+                }),
+            ],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => [
+                'required',
+                'numeric',
+                'gt:0',
+                function (string $attribute, mixed $value, \Closure $fail) use ($debt): void {
+                    if (! $debt || is_null($value)) {
+                        return;
+                    }
+
+                    $maxAmount = (float) $debt->amount_due;
+
+                    if ((float) $value > $maxAmount) {
+                        $fail(trans('validation.max.numeric', [
+                            'attribute' => trans('validation_attributes.debt_payment.amount'),
+                            'max' => $maxAmount,
+                        ]));
+                    }
+                },
+            ],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.debt_payment');
+    }
+
+    public function messages()
+    {
+        return [
+            'debt_id.exists' => trans('rules.debt_payment.invalid_debt_reference'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/DebtPayment/DebtPaymentUpdateRequest.php b/api/app/Http/Requests/DebtPayment/DebtPaymentUpdateRequest.php
new file mode 100644
index 000000000..5923bb178
--- /dev/null
+++ b/api/app/Http/Requests/DebtPayment/DebtPaymentUpdateRequest.php
@@ -0,0 +1,86 @@
+<?php
+
+namespace App\Http\Requests\DebtPayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\DebtPayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class DebtPaymentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $debtPayment = $this->route('debt_payment');
+
+        return $user->can('update', $debtPayment);
+    }
+
+    public function prepareForValidation()
+    {
+        $debtPayment = $this->route('debt_payment');
+
+        $this->merge([
+            'company_id' => $debtPayment->company_id,
+            'branch_id' => $debtPayment->branch_id,
+            'debt_id' => $debtPayment->debt_id,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        /** @var DebtPayment $debtPayment */
+        $debtPayment = $this->route('debt_payment');
+
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'debt_id' => ['required', 'integer', new ExistsForCompany('debts', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => [
+                'required',
+                'numeric',
+                'gt:0',
+                function (string $attribute, mixed $value, \Closure $fail) use ($debtPayment): void {
+                    $debt = $debtPayment->debt;
+                    if (! $debt || is_null($value)) {
+                        return;
+                    }
+
+                    $maxAmount = (float) $debt->amount_due + (float) $debtPayment->amount;
+
+                    if ((float) $value > $maxAmount) {
+                        $fail(trans('validation.max.numeric', [
+                            'attribute' => trans('validation_attributes.debt_payment.amount'),
+                            'max' => $maxAmount,
+                        ]));
+                    }
+                },
+            ],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.debt_payment');
+    }
+}
diff --git a/api/app/Http/Requests/Employee/EmployeeStoreRequest.php b/api/app/Http/Requests/Employee/EmployeeStoreRequest.php
new file mode 100644
index 000000000..001e13492
--- /dev/null
+++ b/api/app/Http/Requests/Employee/EmployeeStoreRequest.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Http\Requests\Employee;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Employee;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class EmployeeStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Employee::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.employee.company'),
+            'code' => trans('validation_attributes.employee.code'),
+            'name' => trans('validation_attributes.employee.name'),
+            'remarks' => trans('validation_attributes.employee.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'remarks' => $this->filled('remarks') ? $this['remarks'] : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Employee/EmployeeUpdateRequest.php b/api/app/Http/Requests/Employee/EmployeeUpdateRequest.php
new file mode 100644
index 000000000..5b3c5287d
--- /dev/null
+++ b/api/app/Http/Requests/Employee/EmployeeUpdateRequest.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Http\Requests\Employee;
+
+use App\Helpers\HashidsHelper;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class EmployeeUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $employee = $this->route('employee');
+
+        return $user->can('update', $employee);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.employee.company'),
+            'code' => trans('validation_attributes.employee.code'),
+            'name' => trans('validation_attributes.employee.name'),
+            'remarks' => trans('validation_attributes.employee.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'remarks' => $this->filled('remarks') ? $this['remarks'] : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Expense/ExpenseStoreRequest.php b/api/app/Http/Requests/Expense/ExpenseStoreRequest.php
new file mode 100644
index 000000000..c68b47397
--- /dev/null
+++ b/api/app/Http/Requests/Expense/ExpenseStoreRequest.php
@@ -0,0 +1,141 @@
+<?php
+
+namespace App\Http\Requests\Expense;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Expense;
+use App\Models\ExpenseCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class ExpenseStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Expense::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'expense_category_id' => $this->filled('expense_category_id') ? HashidsHelper::decodeId($this->expense_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'expense_category_id' => ['required', 'integer', new ExistsForCompany('expense_categories', $this->company_id)],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_payable' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'image_hashes' => ['present', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('expense_images', 'hash')],
+            'image_hashes.*.is_main' => ['required', 'boolean'],
+
+            'payments' => ['present', 'array'],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountPayable = (float) $this->input('amount_payable', 0);
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.expense.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.expense.amount_total_must_be_positive'));
+            }
+
+            if ($paymentTotal > $amountPayable) {
+                $validator->errors()->add('payments', trans('rules.expense.payments_exceed_amount_payable'));
+            }
+
+            if (! $validator->errors()->has('expense_category_id')) {
+                $expenseCategory = ExpenseCategory::query()
+                    ->select('id')
+                    ->find($this->input('expense_category_id'));
+
+                if ($expenseCategory && $expenseCategory->children()->exists()) {
+                    $validator->errors()->add('expense_category_id', trans('rules.expense_category.must_not_have_children'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.expense'),
+            [
+                'payments.*.code' => trans('validation_attributes.expense_payment.code'),
+                'payments.*.date' => trans('validation_attributes.expense_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.expense_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.expense_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.expense_payment.remarks'),
+            ],
+        );
+    }
+}
diff --git a/api/app/Http/Requests/Expense/ExpenseUpdateRequest.php b/api/app/Http/Requests/Expense/ExpenseUpdateRequest.php
new file mode 100644
index 000000000..1a6d7a152
--- /dev/null
+++ b/api/app/Http/Requests/Expense/ExpenseUpdateRequest.php
@@ -0,0 +1,195 @@
+<?php
+
+namespace App\Http\Requests\Expense;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ExpenseCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class ExpenseUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $expense = $this->route('expense');
+
+        return $user->can('update', $expense);
+    }
+
+    public function prepareForValidation()
+    {
+        $expense = $this->route('expense');
+        $deleteImageIds = $this->input('delete_image_ids', []);
+        $deletePaymentIds = collect($this->input('delete_payment_ids', []))
+            ->map(fn ($id) => HashidsHelper::decodeId($id))
+            ->all();
+
+        foreach ($deleteImageIds as $index => $id) {
+            $deleteImageIds[$index] = HashidsHelper::decodeId($id);
+        }
+
+        $this->merge([
+            'company_id' => $expense->company_id,
+            'branch_id' => $expense->branch_id,
+            'expense_category_id' => $this->filled('expense_category_id') ? HashidsHelper::decodeId($this->expense_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+            'delete_image_ids' => $deleteImageIds,
+            'delete_payment_ids' => $deletePaymentIds,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('id', $payment) && ! is_null($payment['id'])) {
+                    $payment['id'] = HashidsHelper::decodeId($payment['id']);
+                }
+
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        $expense = $this->route('expense');
+
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'expense_category_id' => ['required', 'integer', new ExistsForCompany('expense_categories', $this->company_id)],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_payable' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_image_ids' => ['present', 'array'],
+            'delete_image_ids.*' => [
+                'required',
+                'integer',
+                Rule::exists('expense_images', 'id')->where(function ($query) use ($expense) {
+                    $query->where('expense_id', $expense->id);
+                }),
+            ],
+
+            'image_hashes' => ['present', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('expense_images', 'hash')],
+            'image_hashes.*.is_main' => ['required', 'boolean'],
+
+            'delete_payment_ids' => ['present', 'array'],
+            'delete_payment_ids.*' => [
+                'required',
+                'integer',
+                'distinct',
+                Rule::exists('expense_payments', 'id')->where(function ($query) use ($expense) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('expense_id', $expense->id);
+                }),
+            ],
+
+            'payments' => ['present', 'array'],
+            'payments.*.id' => [
+                'present',
+                'nullable',
+                'integer',
+                Rule::exists('expense_payments', 'id')->where(function ($query) use ($expense) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('expense_id', $expense->id);
+                }),
+            ],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountPayable = (float) $this->input('amount_payable', 0);
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.expense.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.expense.amount_total_must_be_positive'));
+            }
+
+            if ($paymentTotal > $amountPayable) {
+                $validator->errors()->add('payments', trans('rules.expense.payments_exceed_amount_payable'));
+            }
+
+            if (! $validator->errors()->has('expense_category_id')) {
+                $expenseCategory = ExpenseCategory::query()
+                    ->select('id')
+                    ->find($this->input('expense_category_id'));
+
+                if ($expenseCategory && $expenseCategory->children()->exists()) {
+                    $validator->errors()->add('expense_category_id', trans('rules.expense_category.must_not_have_children'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.expense'),
+            [
+                'payments.*.id' => trans('validation_attributes.expense_payment.id'),
+                'payments.*.code' => trans('validation_attributes.expense_payment.code'),
+                'payments.*.date' => trans('validation_attributes.expense_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.expense_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.expense_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.expense_payment.remarks'),
+            ],
+        );
+    }
+
+    public function messages()
+    {
+        return [
+            'delete_payment_ids.*.exists' => trans('rules.expense.invalid_payment_reference'),
+            'payments.*.id.exists' => trans('rules.expense.invalid_payment_reference'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/ExpenseCategory/ExpenseCategoryStoreRequest.php b/api/app/Http/Requests/ExpenseCategory/ExpenseCategoryStoreRequest.php
new file mode 100644
index 000000000..ece1584e2
--- /dev/null
+++ b/api/app/Http/Requests/ExpenseCategory/ExpenseCategoryStoreRequest.php
@@ -0,0 +1,103 @@
+<?php
+
+namespace App\Http\Requests\ExpenseCategory;
+
+use App\Enums\ChartOfAccountSystemKeyEnum;
+use App\Enums\ExpenseCategoryTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ChartOfAccount;
+use App\Models\ExpenseCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class ExpenseCategoryStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', ExpenseCategory::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'parent_id' => $this->filled('parent_id') ? HashidsHelper::decodeId($this->parent_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'parent_id' => ['present', 'nullable', 'integer', new ExistsForCompany('expense_categories', $this->company_id)],
+            'category_type' => ['present', 'nullable', 'string', Rule::in(ExpenseCategoryTypeEnum::toArray())],
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+            'sequence' => ['required', 'integer', 'min:0'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if (
+                $validator->errors()->has('company_id')
+                || $validator->errors()->has('parent_id')
+            ) {
+                return;
+            }
+
+            if (is_null($this->parent_id)) {
+                if (empty($this->category_type)) {
+                    $validator->errors()->add('category_type', trans('rules.expense_category.category_type_required_without_parent'));
+                }
+
+                return;
+            }
+
+            $parentExists = ExpenseCategory::query()
+                ->where('company_id', $this->company_id)
+                ->where('id', $this->parent_id)
+                ->whereNull('deleted_at')
+                ->exists();
+
+            if (! $parentExists) {
+                $validator->errors()->add('parent_id', trans('rules.expense_category.parent_must_be_active'));
+
+                return;
+            }
+
+            $parentChartOfAccountSystemKey = ChartOfAccount::query()
+                ->where('company_id', $this->company_id)
+                ->where('source_type', ExpenseCategory::class)
+                ->where('source_id', $this->parent_id)
+                ->with('parent')
+                ->first()?->parent?->system_key;
+
+            if ($parentChartOfAccountSystemKey === ChartOfAccountSystemKeyEnum::OTHER_EXPENSE_ROOT->value) {
+                $expectedCategoryType = ExpenseCategoryTypeEnum::OTHER_EXPENSE->value;
+            } else {
+                $expectedCategoryType = ExpenseCategoryTypeEnum::EXPENSE->value;
+            }
+
+            if (! empty($this->category_type) && $this->category_type !== $expectedCategoryType) {
+                $validator->errors()->add('category_type', trans('rules.expense_category.category_type_must_follow_parent'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.expense_category');
+    }
+}
diff --git a/api/app/Http/Requests/ExpenseCategory/ExpenseCategoryUpdateRequest.php b/api/app/Http/Requests/ExpenseCategory/ExpenseCategoryUpdateRequest.php
new file mode 100644
index 000000000..817e79cb7
--- /dev/null
+++ b/api/app/Http/Requests/ExpenseCategory/ExpenseCategoryUpdateRequest.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Requests\ExpenseCategory;
+
+use App\Enums\ExpenseCategoryTypeEnum;
+use App\Models\ExpenseCategory;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class ExpenseCategoryUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $expenseCategory = $this->route('expense_category');
+
+        return $user->can('update', $expenseCategory);
+    }
+
+    public function prepareForValidation()
+    {
+        $expenseCategory = $this->route('expense_category');
+
+        $this->merge([
+            'company_id' => $expenseCategory?->company_id,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'category_type' => ['present', 'nullable', 'string', Rule::in(ExpenseCategoryTypeEnum::toArray())],
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+            'sequence' => ['required', 'integer', 'min:0'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            /** @var ExpenseCategory|null $expenseCategory */
+            $expenseCategory = $this->route('expense_category');
+
+            if (! $expenseCategory || ! is_null($expenseCategory->parent_id)) {
+                return;
+            }
+
+            if (empty($this->category_type)) {
+                $validator->errors()->add('category_type', trans('rules.expense_category.category_type_required_without_parent'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.expense_category');
+    }
+}
diff --git a/api/app/Http/Requests/ExpensePayment/ExpensePaymentStoreRequest.php b/api/app/Http/Requests/ExpensePayment/ExpensePaymentStoreRequest.php
new file mode 100644
index 000000000..97717d977
--- /dev/null
+++ b/api/app/Http/Requests/ExpensePayment/ExpensePaymentStoreRequest.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Http\Requests\ExpensePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Expense;
+use App\Models\ExpensePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class ExpensePaymentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', ExpensePayment::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'expense_id' => $this->filled('expense_id') ? HashidsHelper::decodeId($this->expense_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'expense_id' => ['required', 'integer', new ExistsForCompany('expenses', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $expense = Expense::find($this->input('expense_id'));
+            if (! $expense) {
+                return;
+            }
+
+            if ((float) $this->input('amount', 0) > (float) $expense->amount_payable_due) {
+                $validator->errors()->add('amount', trans('validation.max.numeric', [
+                    'attribute' => trans('validation_attributes.expense_payment.amount'),
+                    'max' => $expense->amount_payable_due,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.expense_payment');
+    }
+}
diff --git a/api/app/Http/Requests/ExpensePayment/ExpensePaymentUpdateRequest.php b/api/app/Http/Requests/ExpensePayment/ExpensePaymentUpdateRequest.php
new file mode 100644
index 000000000..a3c3db6ae
--- /dev/null
+++ b/api/app/Http/Requests/ExpensePayment/ExpensePaymentUpdateRequest.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Requests\ExpensePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ExpensePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class ExpensePaymentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $expensePayment = $this->route('expense_payment');
+
+        return $user->can('update', $expensePayment);
+    }
+
+    public function prepareForValidation()
+    {
+        $expensePayment = $this->route('expense_payment');
+
+        $this->merge([
+            'company_id' => $expensePayment->company_id,
+            'branch_id' => $expensePayment->branch_id,
+            'expense_id' => $expensePayment->expense_id,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'expense_id' => ['required', 'integer', new ExistsForCompany('expenses', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            /** @var ExpensePayment $payment */
+            $payment = $this->route('expense_payment');
+            $expense = $payment->expense;
+
+            if (! $expense) {
+                return;
+            }
+
+            $maxAmount = (float) $expense->amount_payable_due + (float) $payment->amount;
+            if ((float) $this->input('amount', 0) > $maxAmount) {
+                $validator->errors()->add('amount', trans('validation.max.numeric', [
+                    'attribute' => trans('validation_attributes.expense_payment.amount'),
+                    'max' => $maxAmount,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.expense_payment');
+    }
+}
diff --git a/api/app/Http/Requests/Income/IncomeStoreRequest.php b/api/app/Http/Requests/Income/IncomeStoreRequest.php
new file mode 100644
index 000000000..10f9892db
--- /dev/null
+++ b/api/app/Http/Requests/Income/IncomeStoreRequest.php
@@ -0,0 +1,141 @@
+<?php
+
+namespace App\Http\Requests\Income;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Income;
+use App\Models\IncomeCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class IncomeStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Income::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'income_category_id' => $this->filled('income_category_id') ? HashidsHelper::decodeId($this->income_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'income_category_id' => ['required', 'integer', new ExistsForCompany('income_categories', $this->company_id)],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_receivable' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'image_hashes' => ['present', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('income_images', 'hash')],
+            'image_hashes.*.is_main' => ['required', 'boolean'],
+
+            'payments' => ['present', 'array'],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountReceivable = (float) $this->input('amount_receivable', 0);
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.income.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountReceivable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.income.amount_total_must_be_positive'));
+            }
+
+            if ($paymentTotal > $amountReceivable) {
+                $validator->errors()->add('payments', trans('rules.income.payments_exceed_amount_receivable'));
+            }
+
+            if (! $validator->errors()->has('income_category_id')) {
+                $incomeCategory = IncomeCategory::query()
+                    ->select('id')
+                    ->find($this->input('income_category_id'));
+
+                if ($incomeCategory && $incomeCategory->children()->exists()) {
+                    $validator->errors()->add('income_category_id', trans('rules.income_category.must_not_have_children'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.income'),
+            [
+                'payments.*.code' => trans('validation_attributes.income_payment.code'),
+                'payments.*.date' => trans('validation_attributes.income_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.income_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.income_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.income_payment.remarks'),
+            ],
+        );
+    }
+}
diff --git a/api/app/Http/Requests/Income/IncomeUpdateRequest.php b/api/app/Http/Requests/Income/IncomeUpdateRequest.php
new file mode 100644
index 000000000..422d91497
--- /dev/null
+++ b/api/app/Http/Requests/Income/IncomeUpdateRequest.php
@@ -0,0 +1,195 @@
+<?php
+
+namespace App\Http\Requests\Income;
+
+use App\Helpers\HashidsHelper;
+use App\Models\IncomeCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class IncomeUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $income = $this->route('income');
+
+        return $user->can('update', $income);
+    }
+
+    public function prepareForValidation()
+    {
+        $income = $this->route('income');
+        $deleteImageIds = $this->input('delete_image_ids', []);
+        $deletePaymentIds = collect($this->input('delete_payment_ids', []))
+            ->map(fn ($id) => HashidsHelper::decodeId($id))
+            ->all();
+
+        foreach ($deleteImageIds as $index => $id) {
+            $deleteImageIds[$index] = HashidsHelper::decodeId($id);
+        }
+
+        $this->merge([
+            'company_id' => $income->company_id,
+            'branch_id' => $income->branch_id,
+            'income_category_id' => $this->filled('income_category_id') ? HashidsHelper::decodeId($this->income_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+            'delete_image_ids' => $deleteImageIds,
+            'delete_payment_ids' => $deletePaymentIds,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('id', $payment) && ! is_null($payment['id'])) {
+                    $payment['id'] = HashidsHelper::decodeId($payment['id']);
+                }
+
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        $income = $this->route('income');
+
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'income_category_id' => ['required', 'integer', new ExistsForCompany('income_categories', $this->company_id)],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_receivable' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_image_ids' => ['present', 'array'],
+            'delete_image_ids.*' => [
+                'required',
+                'integer',
+                Rule::exists('income_images', 'id')->where(function ($query) use ($income) {
+                    $query->where('income_id', $income->id);
+                }),
+            ],
+
+            'image_hashes' => ['present', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('income_images', 'hash')],
+            'image_hashes.*.is_main' => ['required', 'boolean'],
+
+            'delete_payment_ids' => ['present', 'array'],
+            'delete_payment_ids.*' => [
+                'required',
+                'integer',
+                'distinct',
+                Rule::exists('income_payments', 'id')->where(function ($query) use ($income) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('income_id', $income->id);
+                }),
+            ],
+
+            'payments' => ['present', 'array'],
+            'payments.*.id' => [
+                'present',
+                'nullable',
+                'integer',
+                Rule::exists('income_payments', 'id')->where(function ($query) use ($income) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('income_id', $income->id);
+                }),
+            ],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountReceivable = (float) $this->input('amount_receivable', 0);
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.income.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountReceivable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.income.amount_total_must_be_positive'));
+            }
+
+            if ($paymentTotal > $amountReceivable) {
+                $validator->errors()->add('payments', trans('rules.income.payments_exceed_amount_receivable'));
+            }
+
+            if (! $validator->errors()->has('income_category_id')) {
+                $incomeCategory = IncomeCategory::query()
+                    ->select('id')
+                    ->find($this->input('income_category_id'));
+
+                if ($incomeCategory && $incomeCategory->children()->exists()) {
+                    $validator->errors()->add('income_category_id', trans('rules.income_category.must_not_have_children'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.income'),
+            [
+                'payments.*.id' => trans('validation_attributes.income_payment.id'),
+                'payments.*.code' => trans('validation_attributes.income_payment.code'),
+                'payments.*.date' => trans('validation_attributes.income_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.income_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.income_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.income_payment.remarks'),
+            ],
+        );
+    }
+
+    public function messages()
+    {
+        return [
+            'delete_payment_ids.*.exists' => trans('rules.income.invalid_payment_reference'),
+            'payments.*.id.exists' => trans('rules.income.invalid_payment_reference'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/IncomeCategory/IncomeCategoryStoreRequest.php b/api/app/Http/Requests/IncomeCategory/IncomeCategoryStoreRequest.php
new file mode 100644
index 000000000..d4f2cc3c9
--- /dev/null
+++ b/api/app/Http/Requests/IncomeCategory/IncomeCategoryStoreRequest.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Http\Requests\IncomeCategory;
+
+use App\Helpers\HashidsHelper;
+use App\Models\IncomeCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class IncomeCategoryStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', IncomeCategory::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'parent_id' => $this->filled('parent_id') ? HashidsHelper::decodeId($this->parent_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'parent_id' => ['present', 'nullable', 'integer', new ExistsForCompany('income_categories', $this->company_id)],
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+            'sequence' => ['required', 'integer', 'min:0'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if (
+                is_null($this->parent_id)
+                || $validator->errors()->has('company_id')
+                || $validator->errors()->has('parent_id')
+            ) {
+                return;
+            }
+
+            $parentExists = IncomeCategory::query()
+                ->where('company_id', $this->company_id)
+                ->where('id', $this->parent_id)
+                ->whereNull('deleted_at')
+                ->exists();
+
+            if (! $parentExists) {
+                $validator->errors()->add('parent_id', trans('rules.income_category.parent_must_be_active'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.income_category');
+    }
+}
diff --git a/api/app/Http/Requests/IncomeCategory/IncomeCategoryUpdateRequest.php b/api/app/Http/Requests/IncomeCategory/IncomeCategoryUpdateRequest.php
new file mode 100644
index 000000000..c1d19fae0
--- /dev/null
+++ b/api/app/Http/Requests/IncomeCategory/IncomeCategoryUpdateRequest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests\IncomeCategory;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class IncomeCategoryUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $incomeCategory = $this->route('income_category');
+
+        return $user->can('update', $incomeCategory);
+    }
+
+    public function prepareForValidation()
+    {
+        $incomeCategory = $this->route('income_category');
+
+        $this->merge([
+            'company_id' => $incomeCategory?->company_id,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+            'sequence' => ['required', 'integer', 'min:0'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.income_category');
+    }
+}
diff --git a/api/app/Http/Requests/IncomePayment/IncomePaymentStoreRequest.php b/api/app/Http/Requests/IncomePayment/IncomePaymentStoreRequest.php
new file mode 100644
index 000000000..58eb43156
--- /dev/null
+++ b/api/app/Http/Requests/IncomePayment/IncomePaymentStoreRequest.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Http\Requests\IncomePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Income;
+use App\Models\IncomePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class IncomePaymentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', IncomePayment::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'income_id' => $this->filled('income_id') ? HashidsHelper::decodeId($this->income_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'income_id' => ['required', 'integer', new ExistsForCompany('incomes', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $income = Income::find($this->input('income_id'));
+            if (! $income) {
+                return;
+            }
+
+            if ((float) $this->input('amount', 0) > (float) $income->amount_receivable_due) {
+                $validator->errors()->add('amount', trans('validation.max.numeric', [
+                    'attribute' => trans('validation_attributes.income_payment.amount'),
+                    'max' => $income->amount_receivable_due,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.income_payment');
+    }
+}
diff --git a/api/app/Http/Requests/IncomePayment/IncomePaymentUpdateRequest.php b/api/app/Http/Requests/IncomePayment/IncomePaymentUpdateRequest.php
new file mode 100644
index 000000000..36440dc21
--- /dev/null
+++ b/api/app/Http/Requests/IncomePayment/IncomePaymentUpdateRequest.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Requests\IncomePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\IncomePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class IncomePaymentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $incomePayment = $this->route('income_payment');
+
+        return $user->can('update', $incomePayment);
+    }
+
+    public function prepareForValidation()
+    {
+        $incomePayment = $this->route('income_payment');
+
+        $this->merge([
+            'company_id' => $incomePayment->company_id,
+            'branch_id' => $incomePayment->branch_id,
+            'income_id' => $incomePayment->income_id,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'income_id' => ['required', 'integer', new ExistsForCompany('incomes', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            /** @var IncomePayment $payment */
+            $payment = $this->route('income_payment');
+            $income = $payment->income;
+
+            if (! $income) {
+                return;
+            }
+
+            $maxAmount = (float) $income->amount_receivable_due + (float) $payment->amount;
+            if ((float) $this->input('amount', 0) > $maxAmount) {
+                $validator->errors()->add('amount', trans('validation.max.numeric', [
+                    'attribute' => trans('validation_attributes.income_payment.amount'),
+                    'max' => $maxAmount,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.income_payment');
+    }
+}
diff --git a/api/app/Http/Requests/Investor/InvestorStoreRequest.php b/api/app/Http/Requests/Investor/InvestorStoreRequest.php
new file mode 100644
index 000000000..4004394ee
--- /dev/null
+++ b/api/app/Http/Requests/Investor/InvestorStoreRequest.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Http\Requests\Investor;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Investor;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class InvestorStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Investor::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.investor.company'),
+            'code' => trans('validation_attributes.investor.code'),
+            'name' => trans('validation_attributes.investor.name'),
+            'remarks' => trans('validation_attributes.investor.remarks'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Investor/InvestorUpdateRequest.php b/api/app/Http/Requests/Investor/InvestorUpdateRequest.php
new file mode 100644
index 000000000..d7ec0c72b
--- /dev/null
+++ b/api/app/Http/Requests/Investor/InvestorUpdateRequest.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Http\Requests\Investor;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Investor;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class InvestorUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $investor = $this->route('investor');
+
+        return $user->can('update', Investor::class, $investor);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.investor.company'),
+            'code' => trans('validation_attributes.investor.code'),
+            'name' => trans('validation_attributes.investor.name'),
+            'remarks' => trans('validation_attributes.investor.remarks'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/JournalEntry/JournalEntryStoreRequest.php b/api/app/Http/Requests/JournalEntry/JournalEntryStoreRequest.php
new file mode 100644
index 000000000..6d55629ca
--- /dev/null
+++ b/api/app/Http/Requests/JournalEntry/JournalEntryStoreRequest.php
@@ -0,0 +1,139 @@
+<?php
+
+namespace App\Http\Requests\JournalEntry;
+
+use App\Enums\JournalEntryTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ChartOfAccount;
+use App\Models\JournalEntry;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class JournalEntryStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+
+        return $user->can('create', JournalEntry::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'journal_type' => $this->filled('journal_type') ? $this->journal_type : null,
+            'source_type' => $this->filled('source_type') ? $this->source_type : null,
+            'source_id' => $this->filled('source_id') ? (int) $this->source_id : null,
+            'reference_no' => $this->filled('reference_no') ? $this->reference_no : null,
+            'remarks' => $this->filled('remarks') ? $this->remarks : null,
+            'items' => collect($this->items ?? [])->map(function ($item) {
+                $item['chart_of_account_id'] = ! empty($item['chart_of_account_id'])
+                    ? HashidsHelper::decodeId($item['chart_of_account_id'])
+                    : null;
+                $item['remarks'] = ! empty($item['remarks']) ? $item['remarks'] : null;
+
+                return $item;
+            })->all(),
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'journal_type' => ['present', 'nullable', new Enum(JournalEntryTypeEnum::class)],
+            'source_type' => ['present', 'nullable', 'string', 'max:255'],
+            'source_id' => ['present', 'nullable', 'integer', 'min:1'],
+            'reference_no' => ['present', 'nullable', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'items' => ['required', 'array', 'min:2'],
+            'items.*.chart_of_account_id' => ['required', 'integer', new ExistsForCompany('chart_of_accounts', $this->company_id)],
+            'items.*.debit' => ['required', 'numeric', 'min:0'],
+            'items.*.credit' => ['required', 'numeric', 'min:0'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if (is_null($this->source_type) xor is_null($this->source_id)) {
+                $validator->errors()->add('source_type', trans('rules.journal_entry.source_type_and_source_id_must_be_paired'));
+                $validator->errors()->add('source_id', trans('rules.journal_entry.source_type_and_source_id_must_be_paired'));
+            }
+
+            $items = collect($this->input('items', []));
+            $totalDebit = 0.0;
+            $totalCredit = 0.0;
+
+            $chartOfAccounts = ChartOfAccount::query()
+                ->where('company_id', $this->company_id)
+                ->whereIn('id', $items->pluck('chart_of_account_id')->filter()->all())
+                ->get()
+                ->keyBy('id');
+
+            foreach ($items as $index => $item) {
+                $debit = max((float) ($item['debit'] ?? 0), 0);
+                $credit = max((float) ($item['credit'] ?? 0), 0);
+
+                if (($debit > 0 && $credit > 0) || ($debit <= 0 && $credit <= 0)) {
+                    $validator->errors()->add("items.$index.debit", trans('rules.journal_entry.item_must_have_single_side_amount'));
+                    $validator->errors()->add("items.$index.credit", trans('rules.journal_entry.item_must_have_single_side_amount'));
+                }
+
+                $chartOfAccountId = $item['chart_of_account_id'] ?? null;
+                $chartOfAccount = $chartOfAccounts->get($chartOfAccountId);
+                if ($chartOfAccount) {
+                    if ($chartOfAccount->is_group) {
+                        $validator->errors()->add("items.$index.chart_of_account_id", trans('rules.journal_entry.account_must_not_be_group'));
+                    }
+
+                    if (! $chartOfAccount->is_active) {
+                        $validator->errors()->add("items.$index.chart_of_account_id", trans('rules.journal_entry.account_must_be_active'));
+                    }
+                }
+
+                $totalDebit += $debit;
+                $totalCredit += $credit;
+            }
+
+            if ($totalDebit <= 0 || $totalCredit <= 0) {
+                $validator->errors()->add('items', trans('rules.journal_entry.total_must_be_positive'));
+            }
+
+            if (round($totalDebit, 8) !== round($totalCredit, 8)) {
+                $validator->errors()->add('items', trans('rules.journal_entry.total_debit_and_credit_must_balance'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.journal_entry'),
+            [
+                'journal_type' => trans('validation_attributes.journal_entry.journal_type'),
+                'items.*.chart_of_account_id' => trans('validation_attributes.journal_entry_item.chart_of_account_id'),
+                'items.*.debit' => trans('validation_attributes.journal_entry_item.debit'),
+                'items.*.credit' => trans('validation_attributes.journal_entry_item.credit'),
+                'items.*.remarks' => trans('validation_attributes.journal_entry_item.remarks'),
+            ],
+        );
+    }
+}
diff --git a/api/app/Http/Requests/JournalEntry/JournalEntryUpdateRequest.php b/api/app/Http/Requests/JournalEntry/JournalEntryUpdateRequest.php
new file mode 100644
index 000000000..8a78f57a6
--- /dev/null
+++ b/api/app/Http/Requests/JournalEntry/JournalEntryUpdateRequest.php
@@ -0,0 +1,134 @@
+<?php
+
+namespace App\Http\Requests\JournalEntry;
+
+use App\Enums\JournalEntryTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ChartOfAccount;
+use App\Models\JournalEntry;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class JournalEntryUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User $user */
+        $user = Auth::user();
+        /** @var JournalEntry $journalEntry */
+        $journalEntry = $this->route('journal_entry');
+
+        return $user->can('update', $journalEntry);
+    }
+
+    public function prepareForValidation()
+    {
+        /** @var JournalEntry|null $journalEntry */
+        $journalEntry = $this->route('journal_entry');
+
+        $this->merge([
+            'company_id' => $journalEntry?->company_id,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'journal_type' => $this->filled('journal_type') ? $this->journal_type : $journalEntry?->journal_type?->value,
+            'reference_no' => $this->filled('reference_no') ? $this->reference_no : null,
+            'remarks' => $this->filled('remarks') ? $this->remarks : null,
+            'items' => collect($this->items ?? [])->map(function ($item) {
+                $item['chart_of_account_id'] = ! empty($item['chart_of_account_id'])
+                    ? HashidsHelper::decodeId($item['chart_of_account_id'])
+                    : null;
+                $item['remarks'] = ! empty($item['remarks']) ? $item['remarks'] : null;
+
+                return $item;
+            })->all(),
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'journal_type' => ['present', 'nullable', new Enum(JournalEntryTypeEnum::class)],
+            'reference_no' => ['present', 'nullable', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'items' => ['required', 'array', 'min:2'],
+            'items.*.chart_of_account_id' => ['required', 'integer', new ExistsForCompany('chart_of_accounts', $this->company_id)],
+            'items.*.debit' => ['required', 'numeric', 'min:0'],
+            'items.*.credit' => ['required', 'numeric', 'min:0'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = collect($this->input('items', []));
+            $totalDebit = 0.0;
+            $totalCredit = 0.0;
+
+            $chartOfAccounts = ChartOfAccount::query()
+                ->where('company_id', $this->company_id)
+                ->whereIn('id', $items->pluck('chart_of_account_id')->filter()->all())
+                ->get()
+                ->keyBy('id');
+
+            foreach ($items as $index => $item) {
+                $debit = max((float) ($item['debit'] ?? 0), 0);
+                $credit = max((float) ($item['credit'] ?? 0), 0);
+
+                if (($debit > 0 && $credit > 0) || ($debit <= 0 && $credit <= 0)) {
+                    $validator->errors()->add("items.$index.debit", trans('rules.journal_entry.item_must_have_single_side_amount'));
+                    $validator->errors()->add("items.$index.credit", trans('rules.journal_entry.item_must_have_single_side_amount'));
+                }
+
+                $chartOfAccountId = $item['chart_of_account_id'] ?? null;
+                $chartOfAccount = $chartOfAccounts->get($chartOfAccountId);
+                if ($chartOfAccount) {
+                    if ($chartOfAccount->is_group) {
+                        $validator->errors()->add("items.$index.chart_of_account_id", trans('rules.journal_entry.account_must_not_be_group'));
+                    }
+
+                    if (! $chartOfAccount->is_active) {
+                        $validator->errors()->add("items.$index.chart_of_account_id", trans('rules.journal_entry.account_must_be_active'));
+                    }
+                }
+
+                $totalDebit += $debit;
+                $totalCredit += $credit;
+            }
+
+            if ($totalDebit <= 0 || $totalCredit <= 0) {
+                $validator->errors()->add('items', trans('rules.journal_entry.total_must_be_positive'));
+            }
+
+            if (round($totalDebit, 8) !== round($totalCredit, 8)) {
+                $validator->errors()->add('items', trans('rules.journal_entry.total_debit_and_credit_must_balance'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.journal_entry'),
+            [
+                'journal_type' => trans('validation_attributes.journal_entry.journal_type'),
+                'items.*.chart_of_account_id' => trans('validation_attributes.journal_entry_item.chart_of_account_id'),
+                'items.*.debit' => trans('validation_attributes.journal_entry_item.debit'),
+                'items.*.credit' => trans('validation_attributes.journal_entry_item.credit'),
+                'items.*.remarks' => trans('validation_attributes.journal_entry_item.remarks'),
+            ],
+        );
+    }
+}
diff --git a/api/app/Http/Requests/PrepaidExpense/PrepaidExpenseStoreRequest.php b/api/app/Http/Requests/PrepaidExpense/PrepaidExpenseStoreRequest.php
new file mode 100644
index 000000000..1a900614e
--- /dev/null
+++ b/api/app/Http/Requests/PrepaidExpense/PrepaidExpenseStoreRequest.php
@@ -0,0 +1,142 @@
+<?php
+
+namespace App\Http\Requests\PrepaidExpense;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ExpenseCategory;
+use App\Models\PrepaidExpense;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PrepaidExpenseStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PrepaidExpense::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'expense_category_id' => $this->filled('expense_category_id') ? HashidsHelper::decodeId($this->expense_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'expense_category_id' => ['required', 'integer', new ExistsForCompany('expense_categories', $this->company_id)],
+            'estimated_useful_life' => ['required', 'integer', 'min:1'],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_payable' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'image_hashes' => ['present', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('prepaid_expense_images', 'hash')],
+            'image_hashes.*.is_main' => ['required', 'boolean'],
+
+            'payments' => ['present', 'array'],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountPayable = (float) $this->input('amount_payable', 0);
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.prepaid_expense.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.prepaid_expense.amount_total_must_be_positive'));
+            }
+
+            if ($paymentTotal > $amountPayable) {
+                $validator->errors()->add('payments', trans('rules.prepaid_expense.payments_exceed_amount_payable'));
+            }
+
+            if (! $validator->errors()->has('expense_category_id')) {
+                $prepaidExpenseCategory = ExpenseCategory::query()
+                    ->select('id')
+                    ->find($this->input('expense_category_id'));
+
+                if ($prepaidExpenseCategory && $prepaidExpenseCategory->children()->exists()) {
+                    $validator->errors()->add('expense_category_id', trans('rules.expense_category.must_not_have_children'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.prepaid_expense'),
+            [
+                'payments.*.code' => trans('validation_attributes.prepaid_expense_payment.code'),
+                'payments.*.date' => trans('validation_attributes.prepaid_expense_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.prepaid_expense_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.prepaid_expense_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.prepaid_expense_payment.remarks'),
+            ],
+        );
+    }
+}
diff --git a/api/app/Http/Requests/PrepaidExpense/PrepaidExpenseUpdateRequest.php b/api/app/Http/Requests/PrepaidExpense/PrepaidExpenseUpdateRequest.php
new file mode 100644
index 000000000..6be76b680
--- /dev/null
+++ b/api/app/Http/Requests/PrepaidExpense/PrepaidExpenseUpdateRequest.php
@@ -0,0 +1,196 @@
+<?php
+
+namespace App\Http\Requests\PrepaidExpense;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ExpenseCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PrepaidExpenseUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $prepaidExpense = $this->route('prepaid_expense');
+
+        return $user->can('update', $prepaidExpense);
+    }
+
+    public function prepareForValidation()
+    {
+        $prepaidExpense = $this->route('prepaid_expense');
+        $deleteImageIds = $this->input('delete_image_ids', []);
+        $deletePaymentIds = collect($this->input('delete_payment_ids', []))
+            ->map(fn ($id) => HashidsHelper::decodeId($id))
+            ->all();
+
+        foreach ($deleteImageIds as $index => $id) {
+            $deleteImageIds[$index] = HashidsHelper::decodeId($id);
+        }
+
+        $this->merge([
+            'company_id' => $prepaidExpense->company_id,
+            'branch_id' => $prepaidExpense->branch_id,
+            'expense_category_id' => $this->filled('expense_category_id') ? HashidsHelper::decodeId($this->expense_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+            'delete_image_ids' => $deleteImageIds,
+            'delete_payment_ids' => $deletePaymentIds,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('id', $payment) && ! is_null($payment['id'])) {
+                    $payment['id'] = HashidsHelper::decodeId($payment['id']);
+                }
+
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        $prepaidExpense = $this->route('prepaid_expense');
+
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'expense_category_id' => ['required', 'integer', new ExistsForCompany('expense_categories', $this->company_id)],
+            'estimated_useful_life' => ['required', 'integer', 'min:1'],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_payable' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_image_ids' => ['present', 'array'],
+            'delete_image_ids.*' => [
+                'required',
+                'integer',
+                Rule::exists('prepaid_expense_images', 'id')->where(function ($query) use ($prepaidExpense) {
+                    $query->where('prepaid_expense_id', $prepaidExpense->id);
+                }),
+            ],
+
+            'image_hashes' => ['present', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('prepaid_expense_images', 'hash')],
+            'image_hashes.*.is_main' => ['required', 'boolean'],
+
+            'delete_payment_ids' => ['present', 'array'],
+            'delete_payment_ids.*' => [
+                'required',
+                'integer',
+                'distinct',
+                Rule::exists('prepaid_expense_payments', 'id')->where(function ($query) use ($prepaidExpense) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('prepaid_expense_id', $prepaidExpense->id);
+                }),
+            ],
+
+            'payments' => ['present', 'array'],
+            'payments.*.id' => [
+                'present',
+                'nullable',
+                'integer',
+                Rule::exists('prepaid_expense_payments', 'id')->where(function ($query) use ($prepaidExpense) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('prepaid_expense_id', $prepaidExpense->id);
+                }),
+            ],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountPayable = (float) $this->input('amount_payable', 0);
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.prepaid_expense.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.prepaid_expense.amount_total_must_be_positive'));
+            }
+
+            if ($paymentTotal > $amountPayable) {
+                $validator->errors()->add('payments', trans('rules.prepaid_expense.payments_exceed_amount_payable'));
+            }
+
+            if (! $validator->errors()->has('expense_category_id')) {
+                $prepaidExpenseCategory = ExpenseCategory::query()
+                    ->select('id')
+                    ->find($this->input('expense_category_id'));
+
+                if ($prepaidExpenseCategory && $prepaidExpenseCategory->children()->exists()) {
+                    $validator->errors()->add('expense_category_id', trans('rules.expense_category.must_not_have_children'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.prepaid_expense'),
+            [
+                'payments.*.id' => trans('validation_attributes.prepaid_expense_payment.id'),
+                'payments.*.code' => trans('validation_attributes.prepaid_expense_payment.code'),
+                'payments.*.date' => trans('validation_attributes.prepaid_expense_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.prepaid_expense_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.prepaid_expense_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.prepaid_expense_payment.remarks'),
+            ],
+        );
+    }
+
+    public function messages()
+    {
+        return [
+            'delete_payment_ids.*.exists' => trans('rules.prepaid_expense.invalid_payment_reference'),
+            'payments.*.id.exists' => trans('rules.prepaid_expense.invalid_payment_reference'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/PrepaidExpensePayment/PrepaidExpensePaymentStoreRequest.php b/api/app/Http/Requests/PrepaidExpensePayment/PrepaidExpensePaymentStoreRequest.php
new file mode 100644
index 000000000..5608757ac
--- /dev/null
+++ b/api/app/Http/Requests/PrepaidExpensePayment/PrepaidExpensePaymentStoreRequest.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Http\Requests\PrepaidExpensePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\PrepaidExpense;
+use App\Models\PrepaidExpensePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PrepaidExpensePaymentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PrepaidExpensePayment::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'prepaid_expense_id' => $this->filled('prepaid_expense_id') ? HashidsHelper::decodeId($this->prepaid_expense_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'prepaid_expense_id' => ['required', 'integer', new ExistsForCompany('prepaid_expenses', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $prepaidExpense = PrepaidExpense::find($this->input('prepaid_expense_id'));
+            if (! $prepaidExpense) {
+                return;
+            }
+
+            if ((float) $this->input('amount', 0) > (float) $prepaidExpense->amount_payable_due) {
+                $validator->errors()->add('amount', trans('validation.max.numeric', [
+                    'attribute' => trans('validation_attributes.prepaid_expense_payment.amount'),
+                    'max' => $prepaidExpense->amount_payable_due,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.prepaid_expense_payment');
+    }
+}
diff --git a/api/app/Http/Requests/PrepaidExpensePayment/PrepaidExpensePaymentUpdateRequest.php b/api/app/Http/Requests/PrepaidExpensePayment/PrepaidExpensePaymentUpdateRequest.php
new file mode 100644
index 000000000..6ef94cbea
--- /dev/null
+++ b/api/app/Http/Requests/PrepaidExpensePayment/PrepaidExpensePaymentUpdateRequest.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Requests\PrepaidExpensePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\PrepaidExpensePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PrepaidExpensePaymentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $prepaidExpensePayment = $this->route('prepaid_expense_payment');
+
+        return $user->can('update', $prepaidExpensePayment);
+    }
+
+    public function prepareForValidation()
+    {
+        $prepaidExpensePayment = $this->route('prepaid_expense_payment');
+
+        $this->merge([
+            'company_id' => $prepaidExpensePayment->company_id,
+            'branch_id' => $prepaidExpensePayment->branch_id,
+            'prepaid_expense_id' => $prepaidExpensePayment->prepaid_expense_id,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'prepaid_expense_id' => ['required', 'integer', new ExistsForCompany('prepaid_expenses', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            /** @var PrepaidExpensePayment $payment */
+            $payment = $this->route('prepaid_expense_payment');
+            $prepaidExpense = $payment->prepaidExpense;
+
+            if (! $prepaidExpense) {
+                return;
+            }
+
+            $maxAmount = (float) $prepaidExpense->amount_payable_due + (float) $payment->amount;
+            if ((float) $this->input('amount', 0) > $maxAmount) {
+                $validator->errors()->add('amount', trans('validation.max.numeric', [
+                    'attribute' => trans('validation_attributes.prepaid_expense_payment.amount'),
+                    'max' => $maxAmount,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.prepaid_expense_payment');
+    }
+}
diff --git a/api/app/Http/Requests/PrepaidIncome/PrepaidIncomeStoreRequest.php b/api/app/Http/Requests/PrepaidIncome/PrepaidIncomeStoreRequest.php
new file mode 100644
index 000000000..6d6e0473f
--- /dev/null
+++ b/api/app/Http/Requests/PrepaidIncome/PrepaidIncomeStoreRequest.php
@@ -0,0 +1,142 @@
+<?php
+
+namespace App\Http\Requests\PrepaidIncome;
+
+use App\Helpers\HashidsHelper;
+use App\Models\IncomeCategory;
+use App\Models\PrepaidIncome;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PrepaidIncomeStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PrepaidIncome::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'income_category_id' => $this->filled('income_category_id') ? HashidsHelper::decodeId($this->income_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'income_category_id' => ['required', 'integer', new ExistsForCompany('income_categories', $this->company_id)],
+            'estimated_useful_life' => ['required', 'integer', 'min:1'],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_receivable' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'image_hashes' => ['present', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('prepaid_income_images', 'hash')],
+            'image_hashes.*.is_main' => ['required', 'boolean'],
+
+            'payments' => ['present', 'array'],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountReceivable = (float) $this->input('amount_receivable', 0);
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.prepaid_income.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountReceivable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.prepaid_income.amount_total_must_be_positive'));
+            }
+
+            if ($paymentTotal > $amountReceivable) {
+                $validator->errors()->add('payments', trans('rules.prepaid_income.payments_exceed_amount_receivable'));
+            }
+
+            if (! $validator->errors()->has('income_category_id')) {
+                $prepaidIncomeCategory = IncomeCategory::query()
+                    ->select('id')
+                    ->find($this->input('income_category_id'));
+
+                if ($prepaidIncomeCategory && $prepaidIncomeCategory->children()->exists()) {
+                    $validator->errors()->add('income_category_id', trans('rules.income_category.must_not_have_children'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.prepaid_income'),
+            [
+                'payments.*.code' => trans('validation_attributes.prepaid_income_payment.code'),
+                'payments.*.date' => trans('validation_attributes.prepaid_income_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.prepaid_income_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.prepaid_income_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.prepaid_income_payment.remarks'),
+            ],
+        );
+    }
+}
diff --git a/api/app/Http/Requests/PrepaidIncome/PrepaidIncomeUpdateRequest.php b/api/app/Http/Requests/PrepaidIncome/PrepaidIncomeUpdateRequest.php
new file mode 100644
index 000000000..be7dc8079
--- /dev/null
+++ b/api/app/Http/Requests/PrepaidIncome/PrepaidIncomeUpdateRequest.php
@@ -0,0 +1,196 @@
+<?php
+
+namespace App\Http\Requests\PrepaidIncome;
+
+use App\Helpers\HashidsHelper;
+use App\Models\IncomeCategory;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PrepaidIncomeUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $prepaidIncome = $this->route('prepaid_income');
+
+        return $user->can('update', $prepaidIncome);
+    }
+
+    public function prepareForValidation()
+    {
+        $prepaidIncome = $this->route('prepaid_income');
+        $deleteImageIds = $this->input('delete_image_ids', []);
+        $deletePaymentIds = collect($this->input('delete_payment_ids', []))
+            ->map(fn ($id) => HashidsHelper::decodeId($id))
+            ->all();
+
+        foreach ($deleteImageIds as $index => $id) {
+            $deleteImageIds[$index] = HashidsHelper::decodeId($id);
+        }
+
+        $this->merge([
+            'company_id' => $prepaidIncome->company_id,
+            'branch_id' => $prepaidIncome->branch_id,
+            'income_category_id' => $this->filled('income_category_id') ? HashidsHelper::decodeId($this->income_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+            'delete_image_ids' => $deleteImageIds,
+            'delete_payment_ids' => $deletePaymentIds,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('id', $payment) && ! is_null($payment['id'])) {
+                    $payment['id'] = HashidsHelper::decodeId($payment['id']);
+                }
+
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        $prepaidIncome = $this->route('prepaid_income');
+
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'income_category_id' => ['required', 'integer', new ExistsForCompany('income_categories', $this->company_id)],
+            'estimated_useful_life' => ['required', 'integer', 'min:1'],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_receivable' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_image_ids' => ['present', 'array'],
+            'delete_image_ids.*' => [
+                'required',
+                'integer',
+                Rule::exists('prepaid_income_images', 'id')->where(function ($query) use ($prepaidIncome) {
+                    $query->where('prepaid_income_id', $prepaidIncome->id);
+                }),
+            ],
+
+            'image_hashes' => ['present', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('prepaid_income_images', 'hash')],
+            'image_hashes.*.is_main' => ['required', 'boolean'],
+
+            'delete_payment_ids' => ['present', 'array'],
+            'delete_payment_ids.*' => [
+                'required',
+                'integer',
+                'distinct',
+                Rule::exists('prepaid_income_payments', 'id')->where(function ($query) use ($prepaidIncome) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('prepaid_income_id', $prepaidIncome->id);
+                }),
+            ],
+
+            'payments' => ['present', 'array'],
+            'payments.*.id' => [
+                'present',
+                'nullable',
+                'integer',
+                Rule::exists('prepaid_income_payments', 'id')->where(function ($query) use ($prepaidIncome) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('prepaid_income_id', $prepaidIncome->id);
+                }),
+            ],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountReceivable = (float) $this->input('amount_receivable', 0);
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.prepaid_income.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountReceivable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.prepaid_income.amount_total_must_be_positive'));
+            }
+
+            if ($paymentTotal > $amountReceivable) {
+                $validator->errors()->add('payments', trans('rules.prepaid_income.payments_exceed_amount_receivable'));
+            }
+
+            if (! $validator->errors()->has('income_category_id')) {
+                $prepaidIncomeCategory = IncomeCategory::query()
+                    ->select('id')
+                    ->find($this->input('income_category_id'));
+
+                if ($prepaidIncomeCategory && $prepaidIncomeCategory->children()->exists()) {
+                    $validator->errors()->add('income_category_id', trans('rules.income_category.must_not_have_children'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.prepaid_income'),
+            [
+                'payments.*.id' => trans('validation_attributes.prepaid_income_payment.id'),
+                'payments.*.code' => trans('validation_attributes.prepaid_income_payment.code'),
+                'payments.*.date' => trans('validation_attributes.prepaid_income_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.prepaid_income_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.prepaid_income_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.prepaid_income_payment.remarks'),
+            ],
+        );
+    }
+
+    public function messages()
+    {
+        return [
+            'delete_payment_ids.*.exists' => trans('rules.prepaid_income.invalid_payment_reference'),
+            'payments.*.id.exists' => trans('rules.prepaid_income.invalid_payment_reference'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/PrepaidIncomePayment/PrepaidIncomePaymentStoreRequest.php b/api/app/Http/Requests/PrepaidIncomePayment/PrepaidIncomePaymentStoreRequest.php
new file mode 100644
index 000000000..16839e17e
--- /dev/null
+++ b/api/app/Http/Requests/PrepaidIncomePayment/PrepaidIncomePaymentStoreRequest.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Http\Requests\PrepaidIncomePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\PrepaidIncome;
+use App\Models\PrepaidIncomePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PrepaidIncomePaymentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PrepaidIncomePayment::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'prepaid_income_id' => $this->filled('prepaid_income_id') ? HashidsHelper::decodeId($this->prepaid_income_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'prepaid_income_id' => ['required', 'integer', new ExistsForCompany('prepaid_incomes', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $prepaidIncome = PrepaidIncome::find($this->input('prepaid_income_id'));
+            if (! $prepaidIncome) {
+                return;
+            }
+
+            if ((float) $this->input('amount', 0) > (float) $prepaidIncome->amount_receivable_due) {
+                $validator->errors()->add('amount', trans('validation.max.numeric', [
+                    'attribute' => trans('validation_attributes.prepaid_income_payment.amount'),
+                    'max' => $prepaidIncome->amount_receivable_due,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.prepaid_income_payment');
+    }
+}
diff --git a/api/app/Http/Requests/PrepaidIncomePayment/PrepaidIncomePaymentUpdateRequest.php b/api/app/Http/Requests/PrepaidIncomePayment/PrepaidIncomePaymentUpdateRequest.php
new file mode 100644
index 000000000..99a837168
--- /dev/null
+++ b/api/app/Http/Requests/PrepaidIncomePayment/PrepaidIncomePaymentUpdateRequest.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Requests\PrepaidIncomePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\PrepaidIncomePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PrepaidIncomePaymentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $prepaidIncomePayment = $this->route('prepaid_income_payment');
+
+        return $user->can('update', $prepaidIncomePayment);
+    }
+
+    public function prepareForValidation()
+    {
+        $prepaidIncomePayment = $this->route('prepaid_income_payment');
+
+        $this->merge([
+            'company_id' => $prepaidIncomePayment->company_id,
+            'branch_id' => $prepaidIncomePayment->branch_id,
+            'prepaid_income_id' => $prepaidIncomePayment->prepaid_income_id,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'prepaid_income_id' => ['required', 'integer', new ExistsForCompany('prepaid_incomes', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            /** @var PrepaidIncomePayment $payment */
+            $payment = $this->route('prepaid_income_payment');
+            $prepaidIncome = $payment->prepaidIncome;
+
+            if (! $prepaidIncome) {
+                return;
+            }
+
+            $maxAmount = (float) $prepaidIncome->amount_receivable_due + (float) $payment->amount;
+            if ((float) $this->input('amount', 0) > $maxAmount) {
+                $validator->errors()->add('amount', trans('validation.max.numeric', [
+                    'attribute' => trans('validation_attributes.prepaid_income_payment.amount'),
+                    'max' => $maxAmount,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.prepaid_income_payment');
+    }
+}
diff --git a/api/app/Http/Requests/Product/ProductPhysicalStoreRequest.php b/api/app/Http/Requests/Product/ProductPhysicalStoreRequest.php
new file mode 100644
index 000000000..9c33f5011
--- /dev/null
+++ b/api/app/Http/Requests/Product/ProductPhysicalStoreRequest.php
@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Http\Requests\Product;
+
+use App\Enums\ProductTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Product;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\Rules\Enum;
+
+class ProductPhysicalStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Product::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'category_id' => ['required', 'integer', new ExistsForCompany('product_categories', $this->company_id)],
+            'brand_id' => ['present', 'nullable', 'integer', new ExistsForCompany('brands', $this->company_id)],
+            'default_vat_profile_id' => ['present', 'nullable', 'integer', new ExistsForCompany('vat_profiles', $this->company_id)],
+            'name' => ['required', 'string', 'max:255'],
+            'is_price_include_vat' => ['required', 'boolean'],
+            'is_use_serial_number' => ['required', 'boolean'],
+            'is_expirable' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'type' => ['required', new Enum(ProductTypeEnum::class)],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+
+            'product_units' => ['required', 'array'],
+            'product_units.*.code' => ['required', 'string'],
+            'product_units.*.is_manufacturer_sku' => 'required|boolean',
+            'product_units.*.unit_id' => ['required', 'integer', new ExistsForCompany('units', $this->company_id), 'distinct'],
+            'product_units.*.price' => 'required|numeric|min:0',
+            'product_units.*.conversion_value' => 'required|numeric|min:1|distinct',
+            'product_units.*.is_primary_unit' => 'required|boolean',
+            'product_units.*.point' => 'required|integer|min:0',
+            'product_units.*.remarks' => 'nullable|string',
+
+            'image_hashes' => ['nullable', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('product_images', 'hash')],
+            'image_hashes.*.is_main' => 'required|boolean',
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.product.company'),
+            'code' => trans('validation_attributes.product.code'),
+            'category_id' => trans('validation_attributes.product.product_category'),
+            'brand_id' => trans('validation_attributes.product.brand'),
+            'default_vat_profile_id' => trans('validation_attributes.product.default_vat_profile'),
+            'name' => trans('validation_attributes.product.name'),
+            'is_price_include_vat' => trans('validation_attributes.product.is_price_include_vat'),
+            'is_use_serial_number' => trans('validation_attributes.product.is_use_serial_number'),
+            'is_expirable' => trans('validation_attributes.product.is_expirable'),
+            'remarks' => trans('validation_attributes.product.remarks'),
+            'type' => trans('validation_attributes.product.product_type'),
+            'status' => trans('validation_attributes.product.status'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+            'brand_id' => $this->filled('brand_id') ? HashidsHelper::decodeId($this->brand_id) : null,
+            'default_vat_profile_id' => $this->filled('default_vat_profile_id') ? HashidsHelper::decodeId($this->default_vat_profile_id) : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+
+        if ($this->filled('product_units')) {
+            $productUnits = $this->product_units;
+            foreach ($productUnits as $index => $unit) {
+                if (isset($unit['unit_id'])) {
+                    $productUnits[$index]['unit_id'] = HashidsHelper::decodeId($unit['unit_id']);
+                }
+            }
+            $this->merge(['product_units' => $productUnits]);
+        }
+    }
+}
diff --git a/api/app/Http/Requests/Product/ProductPhysicalUpdateRequest.php b/api/app/Http/Requests/Product/ProductPhysicalUpdateRequest.php
new file mode 100644
index 000000000..30bab70fe
--- /dev/null
+++ b/api/app/Http/Requests/Product/ProductPhysicalUpdateRequest.php
@@ -0,0 +1,141 @@
+<?php
+
+namespace App\Http\Requests\Product;
+
+use App\Enums\ProductTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Product;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\Rules\Enum;
+
+class ProductPhysicalUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $product = $this->route('product');
+
+        return $user->can('update', Product::class, $product);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'category_id' => ['required', 'integer', new ExistsForCompany('product_categories', $this->company_id)],
+            'brand_id' => ['present', 'nullable', 'integer', new ExistsForCompany('brands', $this->company_id)],
+            'default_vat_profile_id' => ['present', 'nullable', 'integer', new ExistsForCompany('vat_profiles', $this->company_id)],
+            'name' => ['required', 'string', 'max:255'],
+            'is_price_include_vat' => ['required', 'boolean'],
+            'is_use_serial_number' => ['required', 'boolean'],
+            'is_expirable' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'type' => ['required', new Enum(ProductTypeEnum::class)],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+
+            'delete_product_unit_ids' => ['nullable', 'array'],
+            'delete_product_unit_ids.*' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+
+            'product_units' => ['required', 'array'],
+            'product_units.*.id' => ['nullable', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'product_units.*.code' => 'required|string',
+            'product_units.*.is_manufacturer_sku' => 'required|boolean',
+            'product_units.*.unit_id' => ['required', 'integer', new ExistsForCompany('units', $this->company_id), 'distinct'],
+            'product_units.*.price' => 'required|numeric|min:0',
+            'product_units.*.conversion_value' => 'required|numeric|min:1|distinct',
+            'product_units.*.is_primary_unit' => 'required|boolean',
+            'product_units.*.point' => 'required|integer|min:0',
+            'product_units.*.remarks' => 'nullable|string',
+
+            'delete_image_ids' => 'nullable|array',
+            'delete_image_ids.*' => [
+                'required',
+                'integer',
+                Rule::exists('product_images', 'id')->where(function ($query) {
+                    $product = $this->route('product');
+                    if ($product) {
+                        $query->where('product_id', $product->id);
+                    }
+                }),
+            ],
+
+            'image_hashes' => ['nullable', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('product_images', 'hash')],
+            'image_hashes.*.is_main' => 'required|boolean',
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.product.company'),
+            'code' => trans('validation_attributes.product.code'),
+            'category_id' => trans('validation_attributes.product.product_category'),
+            'brand_id' => trans('validation_attributes.product.brand'),
+            'default_vat_profile_id' => trans('validation_attributes.product.default_vat_profile'),
+            'name' => trans('validation_attributes.product.name'),
+            'is_price_include_vat' => trans('validation_attributes.product.is_price_include_vat'),
+            'is_use_serial_number' => trans('validation_attributes.product.is_use_serial_number'),
+            'is_expirable' => trans('validation_attributes.product.is_expirable'),
+            'remarks' => trans('validation_attributes.product.remarks'),
+            'type' => trans('validation_attributes.product.product_type'),
+            'status' => trans('validation_attributes.product.status'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    protected function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+            'brand_id' => $this->filled('brand_id') ? HashidsHelper::decodeId($this->brand_id) : null,
+            'default_vat_profile_id' => $this->filled('default_vat_profile_id') ? HashidsHelper::decodeId($this->default_vat_profile_id) : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+
+        if ($this->filled('delete_product_unit_ids')) {
+            $deleteProductUnitIds = $this->delete_product_unit_ids;
+            foreach ($deleteProductUnitIds as $index => $id) {
+                $deleteProductUnitIds[$index] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_product_unit_ids' => $deleteProductUnitIds]);
+        }
+
+        if ($this->filled('product_units')) {
+            $productUnits = $this->product_units;
+            foreach ($productUnits as $index => $unit) {
+                if ($this->filled("product_units.$index.id")) {
+                    $productUnits[$index]['id'] = HashidsHelper::decodeId($unit['id']);
+                }
+                if (isset($unit['unit_id'])) {
+                    $productUnits[$index]['unit_id'] = HashidsHelper::decodeId($unit['unit_id']);
+                }
+            }
+            $this->merge(['product_units' => $productUnits]);
+        }
+
+        if ($this->filled('delete_image_ids')) {
+            $deleteImageIds = $this->delete_image_ids;
+            foreach ($deleteImageIds as $index => $id) {
+                $deleteImageIds[$index] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_image_ids' => $deleteImageIds]);
+        }
+    }
+}
diff --git a/api/app/Http/Requests/Product/ProductServiceStoreRequest.php b/api/app/Http/Requests/Product/ProductServiceStoreRequest.php
new file mode 100644
index 000000000..49de0b571
--- /dev/null
+++ b/api/app/Http/Requests/Product/ProductServiceStoreRequest.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace App\Http\Requests\Product;
+
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Product;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\Rules\Enum;
+
+class ProductServiceStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Product::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'category_id' => ['required', 'integer', new ExistsForCompany('product_categories', $this->company_id)],
+            'default_vat_profile_id' => ['present', 'nullable', 'integer', new ExistsForCompany('vat_profiles', $this->company_id)],
+            'name' => ['required', 'string', 'max:255'],
+            'is_price_include_vat' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+            'unit_id' => ['required', 'integer', new ExistsForCompany('units', $this->company_id)],
+            'price' => ['required', 'numeric', 'min:0'],
+            'point' => 'required|integer|min:0',
+
+            'image_hashes' => ['nullable', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('product_images', 'hash')],
+            'image_hashes.*.is_main' => 'required|boolean',
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.product.company'),
+            'code' => trans('validation_attributes.product.code'),
+            'category_id' => trans('validation_attributes.product.product_category'),
+            'default_vat_profile_id' => trans('validation_attributes.product.default_vat_profile'),
+            'name' => trans('validation_attributes.product.name'),
+            'is_price_include_vat' => trans('validation_attributes.product.is_price_include_vat'),
+            'remarks' => trans('validation_attributes.product.remarks'),
+            'status' => trans('validation_attributes.product.status'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+            'default_vat_profile_id' => $this->filled('default_vat_profile_id') ? HashidsHelper::decodeId($this->default_vat_profile_id) : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+            'unit_id' => $this->filled('unit_id') ? HashidsHelper::decodeId($this->unit_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Product/ProductServiceUpdateRequest.php b/api/app/Http/Requests/Product/ProductServiceUpdateRequest.php
new file mode 100644
index 000000000..862eff030
--- /dev/null
+++ b/api/app/Http/Requests/Product/ProductServiceUpdateRequest.php
@@ -0,0 +1,100 @@
+<?php
+
+namespace App\Http\Requests\Product;
+
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Product;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\Rules\Enum;
+
+class ProductServiceUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $product = $this->route('product');
+
+        return $user->can('update', Product::class, $product);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'category_id' => ['required', 'integer', new ExistsForCompany('product_categories', $this->company_id)],
+            'default_vat_profile_id' => ['present', 'nullable', 'integer', new ExistsForCompany('vat_profiles', $this->company_id)],
+            'name' => ['required', 'string', 'max:255'],
+            'is_price_include_vat' => ['required', 'boolean'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+            'unit_id' => ['required', 'integer', new ExistsForCompany('units', $this->company_id)],
+            'price' => ['required', 'numeric', 'min:0'],
+            'point' => 'required|integer|min:0',
+
+            'delete_image_ids' => 'nullable|array',
+            'delete_image_ids.*' => [
+                'required',
+                'integer',
+                Rule::exists('product_images', 'id')->where(function ($query) {
+                    $product = $this->route('product');
+                    if ($product) {
+                        $query->where('product_id', $product->id);
+                    }
+                }),
+            ],
+
+            'image_hashes' => ['nullable', 'array'],
+            'image_hashes.*.hash' => ['required', 'string', Rule::exists('product_images', 'hash')],
+            'image_hashes.*.is_main' => 'required|boolean',
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.product.company'),
+            'code' => trans('validation_attributes.product.code'),
+            'category_id' => trans('validation_attributes.product.product_category'),
+            'default_vat_profile_id' => trans('validation_attributes.product.default_vat_profile'),
+            'name' => trans('validation_attributes.product.name'),
+            'is_price_include_vat' => trans('validation_attributes.product.is_price_include_vat'),
+            'remarks' => trans('validation_attributes.product.remarks'),
+            'status' => trans('validation_attributes.product.status'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    protected function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+            'default_vat_profile_id' => $this->filled('default_vat_profile_id') ? HashidsHelper::decodeId($this->default_vat_profile_id) : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+            'unit_id' => $this->filled('unit_id') ? HashidsHelper::decodeId($this->unit_id) : null,
+        ]);
+
+        if ($this->filled('delete_image_ids')) {
+            $deleteImageIds = $this->delete_image_ids;
+            foreach ($deleteImageIds as $index => $id) {
+                $deleteImageIds[$index] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_image_ids' => $deleteImageIds]);
+        }
+    }
+}
diff --git a/api/app/Http/Requests/ProductCategory/ProductCategoryStoreRequest.php b/api/app/Http/Requests/ProductCategory/ProductCategoryStoreRequest.php
new file mode 100644
index 000000000..ddc548ef3
--- /dev/null
+++ b/api/app/Http/Requests/ProductCategory/ProductCategoryStoreRequest.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Requests\ProductCategory;
+
+use App\Enums\ProductCategoryTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductCategory;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class ProductCategoryStoreRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', ProductCategory::class) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'type' => ['required', new Enum(ProductCategoryTypeEnum::class)],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.product_category.company'),
+            'code' => trans('validation_attributes.product_category.code'),
+            'name' => trans('validation_attributes.product_category.name'),
+            'type' => trans('validation_attributes.product_category.type'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'type' => ProductCategoryTypeEnum::isValid($this->type) ? ProductCategoryTypeEnum::resolveToEnum($this->type)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/ProductCategory/ProductCategoryUpdateRequest.php b/api/app/Http/Requests/ProductCategory/ProductCategoryUpdateRequest.php
new file mode 100644
index 000000000..8966468ac
--- /dev/null
+++ b/api/app/Http/Requests/ProductCategory/ProductCategoryUpdateRequest.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Requests\ProductCategory;
+
+use App\Enums\ProductCategoryTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductCategory;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class ProductCategoryUpdateRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $productCategory = $this->route('product_category');
+
+        return $user->can('update', ProductCategory::class, $productCategory) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'type' => ['required', new Enum(ProductCategoryTypeEnum::class)],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.product_category.company'),
+            'code' => trans('validation_attributes.product_category.code'),
+            'name' => trans('validation_attributes.product_category.name'),
+            'type' => trans('validation_attributes.product_category.type'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'type' => ProductCategoryTypeEnum::isValid($this->type) ? ProductCategoryTypeEnum::resolveToEnum($this->type)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Purchase/PurchaseDirectStoreRequest.php b/api/app/Http/Requests/Purchase/PurchaseDirectStoreRequest.php
new file mode 100644
index 000000000..6a566b7e0
--- /dev/null
+++ b/api/app/Http/Requests/Purchase/PurchaseDirectStoreRequest.php
@@ -0,0 +1,332 @@
+<?php
+
+namespace App\Http\Requests\Purchase;
+
+use App\Enums\DiscountTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\Purchase;
+use App\Models\PurchaseAdditionalCost;
+use App\Models\PurchaseOrder;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use App\Rules\IsValidWarehouse;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PurchaseDirectStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Purchase::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+            'purchase_order_id' => $this->filled('purchase_order_id') ? HashidsHelper::decodeId($this->purchase_order_id) : null,
+            'direct_receipt_warehouse_id' => $this->filled('direct_receipt_warehouse_id') ? HashidsHelper::decodeId($this->direct_receipt_warehouse_id) : null,
+        ]);
+
+        if (is_array($this->input('items'))) {
+            $items = [];
+            foreach ($this->input('items') as $item) {
+                if (array_key_exists('product_unit_id', $item) && ! is_null($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+                if (array_key_exists('vat_profile_id', $item) && ! is_null($item['vat_profile_id'])) {
+                    $item['vat_profile_id'] = HashidsHelper::decodeId($item['vat_profile_id']);
+                }
+                $items[] = $item;
+            }
+            $this->merge(['items' => $items]);
+        }
+
+        if (is_array($this->input('additional_costs'))) {
+            $additionalCosts = [];
+            foreach ($this->input('additional_costs') as $additionalCost) {
+                if (array_key_exists('purchase_additional_cost_category_id', $additionalCost) && ! is_null($additionalCost['purchase_additional_cost_category_id'])) {
+                    $additionalCost['purchase_additional_cost_category_id'] = HashidsHelper::decodeId($additionalCost['purchase_additional_cost_category_id']);
+                }
+                if (array_key_exists('paid_immediately_cash_account_id', $additionalCost) && ! is_null($additionalCost['paid_immediately_cash_account_id'])) {
+                    $additionalCost['paid_immediately_cash_account_id'] = HashidsHelper::decodeId($additionalCost['paid_immediately_cash_account_id']);
+                }
+                $additionalCosts[] = $additionalCost;
+            }
+            $this->merge(['additional_costs' => $additionalCosts]);
+        }
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'supplier_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('suppliers', $this->company_id),
+                new IsValidSupplier($this->company_id),
+            ],
+            'purchase_order_id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_orders', $this->company_id)],
+            'direct_receipt_code' => ['required', 'string'],
+            'direct_receipt_warehouse_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('warehouses', $this->company_id),
+                new IsValidWarehouse($this->company_id, false),
+            ],
+            'tax_invoice_number' => ['present', 'nullable', 'string'],
+            'tax_invoice_vat_base' => ['required', 'numeric', 'min:0'],
+            'tax_invoice_vat' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string'],
+            'is_posted' => ['required', 'boolean'],
+            'rounding' => ['required', 'numeric'],
+
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.qty' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.product_unit_is_price_include_vat' => ['required', 'boolean'],
+            'items.*.product_unit_price_discounts' => ['present', 'array'],
+            'items.*.product_unit_price_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.product_unit_price_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.product_unit_price_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.subtotal_discounts' => ['present', 'array'],
+            'items.*.subtotal_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.subtotal_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.subtotal_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.vat_profile_id' => [
+                'present',
+                'nullable',
+                'integer',
+                new ExistsForCompany('vat_profiles', $this->company_id),
+            ],
+            'items.*.vat_rate' => ['required', 'numeric', 'min:0', 'max:100'],
+            'items.*.vat_base_numerator' => ['required', 'integer', 'min:1'],
+            'items.*.vat_base_denominator' => ['required', 'integer', 'min:1'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.serial' => ['required', 'string'],
+
+            'global_discounts' => ['present', 'array'],
+            'global_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'global_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'global_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+
+            'additional_costs' => ['present', 'array'],
+            'additional_costs.*.code' => ['required', 'string'],
+            'additional_costs.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'additional_costs.*.due_days' => ['required', 'integer', 'min:0'],
+            'additional_costs.*.purchase_additional_cost_category_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('purchase_additional_cost_categories', $this->company_id),
+            ],
+            'additional_costs.*.paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'additional_costs.*.amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'additional_costs.*.amount_payable' => ['required', 'numeric', 'min:0'],
+            'additional_costs.*.remarks' => ['present', 'nullable', 'string'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = $this->input('items', []);
+            $productUnitIds = collect($items)
+                ->pluck('product_unit_id')
+                ->filter(fn ($productUnitId) => is_numeric($productUnitId))
+                ->map(fn ($productUnitId) => (int) $productUnitId)
+                ->unique()
+                ->values();
+
+            if ($productUnitIds->isNotEmpty()) {
+                $productIdsByProductUnitId = ProductUnit::query()
+                    ->whereIn('id', $productUnitIds)
+                    ->pluck('product_id', 'id')
+                    ->map(fn ($productId) => (int) $productId)
+                    ->all();
+
+                $seenProductIds = [];
+                foreach ($items as $index => $item) {
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (! is_numeric($productUnitId)) {
+                        continue;
+                    }
+
+                    $productId = $productIdsByProductUnitId[(int) $productUnitId] ?? null;
+                    if (is_null($productId)) {
+                        continue;
+                    }
+
+                    if (isset($seenProductIds[$productId])) {
+                        $validator->errors()->add("items.$index.product_unit_id", trans('rules.purchase.duplicate_product'));
+
+                        continue;
+                    }
+
+                    $seenProductIds[$productId] = true;
+                }
+            }
+
+            $purchaseOrderId = $this->input('purchase_order_id');
+
+            if (! is_null($purchaseOrderId)) {
+                $purchaseOrder = PurchaseOrder::with('items:id,purchase_order_id')->find($purchaseOrderId);
+
+                if (! is_null($purchaseOrder)) {
+                    if ((int) $this->input('supplier_id') !== (int) $purchaseOrder->supplier_id) {
+                        $validator->errors()->add('purchase_order_id', trans('rules.purchase.purchase_order_supplier_must_match'));
+                    }
+
+                    if ((int) $this->input('branch_id') !== (int) $purchaseOrder->branch_id) {
+                        $validator->errors()->add('purchase_order_id', trans('rules.purchase.purchase_order_branch_must_match'));
+                    }
+                }
+            }
+
+            foreach ($this->input('additional_costs', []) as $index => $additionalCost) {
+                $amountPaidImmediately = (float) ($additionalCost['amount_paid_immediately'] ?? 0);
+                $amountPayable = (float) ($additionalCost['amount_payable'] ?? 0);
+                $code = $additionalCost['code'] ?? null;
+
+                if ($amountPaidImmediately > 0 && empty($additionalCost['paid_immediately_cash_account_id'])) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.paid_immediately_cash_account_id",
+                        trans('validation.required', [
+                            'attribute' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+                        ])
+                    );
+                }
+
+                if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.amount_total",
+                        trans('rules.purchase.additional_cost_amount_total_must_be_positive')
+                    );
+                }
+
+                if (
+                    ! empty($code)
+                    && $code !== config('dcslab.KEYWORDS.AUTO')
+                    && PurchaseAdditionalCost::where('company_id', $this->company_id)
+                        ->whereNull('deleted_at')
+                        ->where('code', $code)
+                        ->exists()
+                ) {
+                    $validator->errors()->add("additional_costs.$index.code", trans('rules.unique_code'));
+                }
+            }
+
+            foreach (($validator->getData()['items'] ?? []) as $index => $item) {
+                $productUnitId = $item['product_unit_id'] ?? null;
+                $qty = $item['qty'] ?? null;
+                $conversionValue = $item['product_unit_conversion_value'] ?? null;
+                $serials = $item['serials'] ?? [];
+
+                if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                    continue;
+                }
+
+                $product = ProductUnit::with('product')->find($productUnitId)?->product;
+                if (! $product?->is_use_serial_number) {
+                    continue;
+                }
+
+                $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                if (str_contains($normalizedBaseQty, '.')) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_base_qty_must_be_integer'));
+
+                    continue;
+                }
+
+                $serialValues = collect(is_array($serials) ? $serials : [])
+                    ->pluck('serial')
+                    ->values();
+                if ($serialValues->count() !== $serialValues->unique()->count()) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.purchase.duplicate_serial'));
+                }
+
+                $serialCount = (string) count(is_array($serials) ? $serials : []);
+                if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_count_must_match_base_qty'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.purchase.company_id'),
+            'branch_id' => trans('validation_attributes.purchase.branch_id'),
+            'code' => trans('validation_attributes.purchase.code'),
+            'date' => trans('validation_attributes.purchase.date'),
+            'due_days' => trans('validation_attributes.purchase.due_days'),
+            'supplier_id' => trans('validation_attributes.purchase.supplier_id'),
+            'purchase_order_id' => trans('validation_attributes.purchase.purchase_order_id'),
+            'direct_receipt_code' => trans('validation_attributes.purchase.direct_receipt_code'),
+            'direct_receipt_warehouse_id' => trans('validation_attributes.purchase.direct_receipt_warehouse_id'),
+            'tax_invoice_number' => trans('validation_attributes.purchase.tax_invoice_number'),
+            'tax_invoice_vat_base' => trans('validation_attributes.purchase.tax_invoice_vat_base'),
+            'tax_invoice_vat' => trans('validation_attributes.purchase.tax_invoice_vat'),
+            'remarks' => trans('validation_attributes.purchase.remarks'),
+
+            'items.*.qty' => trans('validation_attributes.purchase_order_item.qty'),
+            'items.*.product_unit_id' => trans('validation_attributes.purchase_order_item.product_unit_id'),
+            'items.*.product_unit_conversion_value' => trans('validation_attributes.purchase_order_item.product_unit_conversion_value'),
+            'items.*.product_unit_price' => trans('validation_attributes.purchase_order_item.product_unit_price'),
+            'items.*.product_unit_is_price_include_vat' => trans('validation_attributes.purchase_order_item.product_unit_is_price_include_vat'),
+            'items.*.vat_profile_id' => trans('validation_attributes.purchase_order_item.vat_profile_id'),
+            'items.*.vat_rate' => trans('validation_attributes.purchase_order_item.vat_rate'),
+            'items.*.vat_base_numerator' => trans('validation_attributes.purchase_order_item.vat_base_numerator'),
+            'items.*.vat_base_denominator' => trans('validation_attributes.purchase_order_item.vat_base_denominator'),
+            'items.*.remarks' => trans('validation_attributes.purchase_order_item.remarks'),
+            'items.*.serials' => 'serials',
+
+            'global_discounts.*.sequence' => trans('validation_attributes.purchase_order_global_discount.sequence'),
+            'global_discounts.*.discount_type' => trans('validation_attributes.purchase_order_global_discount.discount_type'),
+            'global_discounts.*.discount_value' => trans('validation_attributes.purchase_order_global_discount.discount_value'),
+
+            'additional_costs.*.purchase_additional_cost_category_id' => trans('validation_attributes.purchase_additional_cost.purchase_additional_cost_category_id'),
+            'additional_costs.*.code' => trans('validation_attributes.purchase_additional_cost.code'),
+            'additional_costs.*.date' => trans('validation_attributes.purchase_additional_cost.date'),
+            'additional_costs.*.due_days' => trans('validation_attributes.purchase_additional_cost.due_days'),
+            'additional_costs.*.paid_immediately_cash_account_id' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+            'additional_costs.*.amount_paid_immediately' => trans('validation_attributes.purchase_additional_cost.amount_paid_immediately'),
+            'additional_costs.*.amount_payable' => trans('validation_attributes.purchase_additional_cost.amount_payable'),
+            'additional_costs.*.remarks' => trans('validation_attributes.purchase_additional_cost.remarks'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/Purchase/PurchaseDirectUpdateRequest.php b/api/app/Http/Requests/Purchase/PurchaseDirectUpdateRequest.php
new file mode 100644
index 000000000..426936a34
--- /dev/null
+++ b/api/app/Http/Requests/Purchase/PurchaseDirectUpdateRequest.php
@@ -0,0 +1,492 @@
+<?php
+
+namespace App\Http\Requests\Purchase;
+
+use App\Enums\DiscountTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\PurchaseAdditionalCost;
+use App\Models\PurchaseOrder;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use App\Rules\IsValidWarehouse;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PurchaseDirectUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $purchase = $this->route('purchase');
+
+        return $user->can('update', $purchase);
+    }
+
+    public function prepareForValidation()
+    {
+        $purchase = $this->route('purchase');
+
+        $this->merge([
+            'company_id' => $purchase->company_id,
+            'branch_id' => $purchase->branch_id,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+            'purchase_order_id' => $this->filled('purchase_order_id') ? HashidsHelper::decodeId($this->purchase_order_id) : null,
+            'direct_receipt_warehouse_id' => $this->filled('direct_receipt_warehouse_id') ? HashidsHelper::decodeId($this->direct_receipt_warehouse_id) : null,
+
+            'delete_item_ids' => collect($this->delete_item_ids ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all(),
+            'items' => collect($this->items ?? [])->map(function ($item) {
+                $item['id'] = ! empty($item['id']) ? HashidsHelper::decodeId($item['id']) : null;
+                $item['product_unit_id'] = ! empty($item['product_unit_id']) ? HashidsHelper::decodeId($item['product_unit_id']) : null;
+                $item['vat_profile_id'] = ! empty($item['vat_profile_id']) ? HashidsHelper::decodeId($item['vat_profile_id']) : null;
+                $item['delete_product_unit_price_discount_ids'] = collect($item['delete_product_unit_price_discount_ids'] ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all();
+                $item['product_unit_price_discounts'] = collect($item['product_unit_price_discounts'] ?? [])->map(function ($discount) {
+                    $discount['id'] = ! empty($discount['id']) ? HashidsHelper::decodeId($discount['id']) : null;
+
+                    return $discount;
+                })->all();
+                $item['delete_subtotal_discount_ids'] = collect($item['delete_subtotal_discount_ids'] ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all();
+                $item['subtotal_discounts'] = collect($item['subtotal_discounts'] ?? [])->map(function ($discount) {
+                    $discount['id'] = ! empty($discount['id']) ? HashidsHelper::decodeId($discount['id']) : null;
+
+                    return $discount;
+                })->all();
+                $item['delete_serial_ids'] = collect($item['delete_serial_ids'] ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all();
+                $item['serials'] = collect($item['serials'] ?? [])->map(function ($serial) {
+                    $serial['id'] = ! empty($serial['id']) ? HashidsHelper::decodeId($serial['id']) : null;
+
+                    return $serial;
+                })->all();
+
+                return $item;
+            })->all(),
+            'delete_global_discount_ids' => collect($this->delete_global_discount_ids ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all(),
+            'global_discounts' => collect($this->global_discounts ?? [])->map(function ($discount) {
+                $discount['id'] = ! empty($discount['id']) ? HashidsHelper::decodeId($discount['id']) : null;
+
+                return $discount;
+            })->all(),
+            'delete_additional_cost_ids' => collect($this->delete_additional_cost_ids ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all(),
+            'additional_costs' => collect($this->additional_costs ?? [])->map(function ($additionalCost) {
+                $additionalCost['id'] = ! empty($additionalCost['id']) ? HashidsHelper::decodeId($additionalCost['id']) : null;
+                $additionalCost['purchase_additional_cost_category_id'] = ! empty($additionalCost['purchase_additional_cost_category_id'])
+                    ? HashidsHelper::decodeId($additionalCost['purchase_additional_cost_category_id'])
+                    : null;
+                $additionalCost['paid_immediately_cash_account_id'] = ! empty($additionalCost['paid_immediately_cash_account_id'])
+                    ? HashidsHelper::decodeId($additionalCost['paid_immediately_cash_account_id'])
+                    : null;
+
+                return $additionalCost;
+            })->all(),
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'supplier_id' => ['required', 'integer', 'bail', new ExistsForCompany('suppliers', $this->company_id), new IsValidSupplier($this->company_id)],
+            'purchase_order_id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_orders', $this->company_id)],
+            'direct_receipt_warehouse_id' => ['required', 'integer', 'bail', new ExistsForCompany('warehouses', $this->company_id), new IsValidWarehouse($this->company_id, false)],
+            'tax_invoice_number' => ['present', 'nullable', 'string'],
+            'tax_invoice_vat_base' => ['required', 'numeric', 'min:0'],
+            'tax_invoice_vat' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string'],
+            'is_posted' => ['required', 'boolean'],
+            'rounding' => ['required', 'numeric'],
+
+            'delete_item_ids' => ['present', 'array'],
+            'delete_item_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_items', $this->company_id)],
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_items', $this->company_id)],
+            'items.*.qty' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.product_unit_is_price_include_vat' => ['required', 'boolean'],
+            'items.*.delete_product_unit_price_discount_ids' => ['present', 'array'],
+            'items.*.delete_product_unit_price_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_item_product_unit_price_discounts', $this->company_id)],
+            'items.*.product_unit_price_discounts' => ['present', 'array'],
+            'items.*.product_unit_price_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_item_product_unit_price_discounts', $this->company_id)],
+            'items.*.product_unit_price_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.product_unit_price_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.product_unit_price_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.delete_subtotal_discount_ids' => ['present', 'array'],
+            'items.*.delete_subtotal_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_item_subtotal_discounts', $this->company_id)],
+            'items.*.subtotal_discounts' => ['present', 'array'],
+            'items.*.subtotal_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_item_subtotal_discounts', $this->company_id)],
+            'items.*.subtotal_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.subtotal_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.subtotal_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.vat_profile_id' => ['present', 'nullable', 'integer', new ExistsForCompany('vat_profiles', $this->company_id)],
+            'items.*.vat_rate' => ['required', 'numeric', 'min:0', 'max:100'],
+            'items.*.vat_base_numerator' => ['required', 'integer', 'min:1'],
+            'items.*.vat_base_denominator' => ['required', 'integer', 'min:1'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'items.*.delete_serial_ids' => ['present', 'array'],
+            'items.*.delete_serial_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_receipt_item_serials', $this->company_id)],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_receipt_item_serials', $this->company_id)],
+            'items.*.serials.*.serial' => ['required', 'string'],
+
+            'delete_global_discount_ids' => ['present', 'array'],
+            'delete_global_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_global_discounts', $this->company_id)],
+            'global_discounts' => ['present', 'array'],
+            'global_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_global_discounts', $this->company_id)],
+            'global_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'global_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'global_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+
+            'delete_additional_cost_ids' => ['present', 'array'],
+            'delete_additional_cost_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_additional_costs', $this->company_id)],
+            'additional_costs' => ['present', 'array'],
+            'additional_costs.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_additional_costs', $this->company_id)],
+            'additional_costs.*.code' => ['required', 'string'],
+            'additional_costs.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'additional_costs.*.due_days' => ['required', 'integer', 'min:0'],
+            'additional_costs.*.purchase_additional_cost_category_id' => [
+                'required',
+                'integer',
+                new ExistsForCompany('purchase_additional_cost_categories', $this->company_id),
+            ],
+            'additional_costs.*.paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'additional_costs.*.amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'additional_costs.*.amount_payable' => ['required', 'numeric', 'min:0'],
+            'additional_costs.*.remarks' => ['present', 'nullable', 'string'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = $this->input('items', []);
+            $productUnitIds = collect($items)
+                ->pluck('product_unit_id')
+                ->filter(fn ($productUnitId) => is_numeric($productUnitId))
+                ->map(fn ($productUnitId) => (int) $productUnitId)
+                ->unique()
+                ->values();
+
+            if ($productUnitIds->isNotEmpty()) {
+                $productIdsByProductUnitId = ProductUnit::query()
+                    ->whereIn('id', $productUnitIds)
+                    ->pluck('product_id', 'id')
+                    ->map(fn ($productId) => (int) $productId)
+                    ->all();
+
+                $seenProductIds = [];
+                foreach ($items as $index => $item) {
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (! is_numeric($productUnitId)) {
+                        continue;
+                    }
+
+                    $productId = $productIdsByProductUnitId[(int) $productUnitId] ?? null;
+                    if (is_null($productId)) {
+                        continue;
+                    }
+
+                    if (isset($seenProductIds[$productId])) {
+                        $validator->errors()->add("items.$index.product_unit_id", trans('rules.purchase.duplicate_product'));
+
+                        continue;
+                    }
+
+                    $seenProductIds[$productId] = true;
+                }
+            }
+
+            $purchase = $this->route('purchase');
+            $purchaseOrderId = $this->input('purchase_order_id');
+            $purchaseItems = $purchase->items()
+                ->with([
+                    'productUnitPriceDiscounts:id,purchase_item_id',
+                    'subtotalDiscounts:id,purchase_item_id',
+                ])
+                ->get()
+                ->keyBy('id');
+            $purchaseReceiptItemsByPurchaseItemId = $purchase->directReceipt()
+                ->with('items.serials:id,purchase_receipt_item_id')
+                ->first()
+                ?->items
+                ->whereNotNull('purchase_item_id')
+                ->keyBy('purchase_item_id')
+                ?? collect();
+            $purchaseItemIds = $purchaseItems->keys()->all();
+            $purchaseGlobalDiscountIds = $purchase->globalDiscounts()->pluck('id')->all();
+            $purchaseAdditionalCostIds = $purchase->additionalCosts()->pluck('id')->all();
+
+            if (! is_null($purchaseOrderId)) {
+                $purchaseOrder = PurchaseOrder::with('items:id,purchase_order_id')->find($purchaseOrderId);
+
+                if (! is_null($purchaseOrder)) {
+                    if ((int) $this->input('supplier_id') !== (int) $purchaseOrder->supplier_id) {
+                        $validator->errors()->add('purchase_order_id', trans('rules.purchase.purchase_order_supplier_must_match'));
+                    }
+
+                    if ((int) $purchase->branch_id !== (int) $purchaseOrder->branch_id) {
+                        $validator->errors()->add('purchase_order_id', trans('rules.purchase.purchase_order_branch_must_match'));
+                    }
+                }
+            }
+
+            foreach ($this->input('delete_item_ids', []) as $index => $deleteItemId) {
+                if (! in_array($deleteItemId, $purchaseItemIds, true)) {
+                    $validator->errors()->add("delete_item_ids.$index", trans('rules.purchase.invalid_delete_item_reference'));
+                }
+            }
+
+            foreach ($this->input('items', []) as $index => $item) {
+                $itemId = $item['id'] ?? null;
+                $purchaseItem = ! is_null($itemId) ? $purchaseItems->get($itemId) : null;
+                $purchaseReceiptItem = ! is_null($itemId) ? $purchaseReceiptItemsByPurchaseItemId->get($itemId) : null;
+
+                if (! is_null($itemId) && is_null($purchaseItem)) {
+                    $validator->errors()->add("items.$index.id", trans('rules.purchase.invalid_item_reference'));
+                }
+
+                if (! is_null($itemId) && is_null($purchaseReceiptItem)) {
+                    $validator->errors()->add(
+                        "items.$index.id",
+                        trans('rules.purchase_receipt.invalid_item_reference')
+                    );
+                }
+
+                $productUnitPriceDiscountIds = $purchaseItem?->productUnitPriceDiscounts->pluck('id')->all() ?? [];
+                foreach ($item['delete_product_unit_price_discount_ids'] ?? [] as $discountIndex => $discountId) {
+                    if (! in_array($discountId, $productUnitPriceDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.delete_product_unit_price_discount_ids.$discountIndex",
+                            trans('rules.purchase.invalid_product_unit_price_discount_reference')
+                        );
+                    }
+                }
+
+                foreach ($item['product_unit_price_discounts'] ?? [] as $discountIndex => $discount) {
+                    $discountId = $discount['id'] ?? null;
+
+                    if (! is_null($discountId) && ! in_array($discountId, $productUnitPriceDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.product_unit_price_discounts.$discountIndex.id",
+                            trans('rules.purchase.invalid_product_unit_price_discount_reference')
+                        );
+                    }
+                }
+
+                $subtotalDiscountIds = $purchaseItem?->subtotalDiscounts->pluck('id')->all() ?? [];
+                foreach ($item['delete_subtotal_discount_ids'] ?? [] as $discountIndex => $discountId) {
+                    if (! in_array($discountId, $subtotalDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.delete_subtotal_discount_ids.$discountIndex",
+                            trans('rules.purchase.invalid_subtotal_discount_reference')
+                        );
+                    }
+                }
+
+                foreach ($item['subtotal_discounts'] ?? [] as $discountIndex => $discount) {
+                    $discountId = $discount['id'] ?? null;
+
+                    if (! is_null($discountId) && ! in_array($discountId, $subtotalDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.subtotal_discounts.$discountIndex.id",
+                            trans('rules.purchase.invalid_subtotal_discount_reference')
+                        );
+                    }
+                }
+
+                $purchaseReceiptItemSerialIds = $purchaseReceiptItem?->serials->pluck('id')->all() ?? [];
+                foreach ($item['delete_serial_ids'] ?? [] as $serialIndex => $serialId) {
+                    if (! in_array($serialId, $purchaseReceiptItemSerialIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.delete_serial_ids.$serialIndex",
+                            trans('rules.purchase_receipt.invalid_serial_reference')
+                        );
+                    }
+                }
+
+                foreach ($item['serials'] ?? [] as $serialIndex => $serial) {
+                    $serialId = $serial['id'] ?? null;
+
+                    if (! is_null($serialId) && ! in_array($serialId, $purchaseReceiptItemSerialIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.serials.$serialIndex.id",
+                            trans('rules.purchase_receipt.invalid_serial_reference')
+                        );
+                    }
+                }
+            }
+
+            foreach ($this->input('delete_global_discount_ids', []) as $index => $discountId) {
+                if (! in_array($discountId, $purchaseGlobalDiscountIds, true)) {
+                    $validator->errors()->add(
+                        "delete_global_discount_ids.$index",
+                        trans('rules.purchase.invalid_global_discount_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('global_discounts', []) as $index => $discount) {
+                $discountId = $discount['id'] ?? null;
+
+                if (! is_null($discountId) && ! in_array($discountId, $purchaseGlobalDiscountIds, true)) {
+                    $validator->errors()->add(
+                        "global_discounts.$index.id",
+                        trans('rules.purchase.invalid_global_discount_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('delete_additional_cost_ids', []) as $index => $additionalCostId) {
+                if (! in_array($additionalCostId, $purchaseAdditionalCostIds, true)) {
+                    $validator->errors()->add(
+                        "delete_additional_cost_ids.$index",
+                        trans('rules.purchase.invalid_additional_cost_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('additional_costs', []) as $index => $additionalCost) {
+                $amountPaidImmediately = (float) ($additionalCost['amount_paid_immediately'] ?? 0);
+                $amountPayable = (float) ($additionalCost['amount_payable'] ?? 0);
+                $code = $additionalCost['code'] ?? null;
+                $id = $additionalCost['id'] ?? null;
+
+                if (! is_null($id) && ! in_array($id, $purchaseAdditionalCostIds, true)) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.id",
+                        trans('rules.purchase.invalid_additional_cost_reference')
+                    );
+                }
+
+                if ($amountPaidImmediately > 0 && empty($additionalCost['paid_immediately_cash_account_id'])) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.paid_immediately_cash_account_id",
+                        trans('validation.required', [
+                            'attribute' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+                        ])
+                    );
+                }
+
+                if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.amount_total",
+                        trans('rules.purchase.additional_cost_amount_total_must_be_positive')
+                    );
+                }
+
+                if (! empty($code) && $code !== config('dcslab.KEYWORDS.AUTO')) {
+                    $query = PurchaseAdditionalCost::where('company_id', $this->company_id)
+                        ->whereNull('deleted_at')
+                        ->where('code', $code);
+
+                    if (! empty($id)) {
+                        $query->where('id', '<>', $id);
+                    }
+
+                    if ($query->exists()) {
+                        $validator->errors()->add("additional_costs.$index.code", trans('rules.unique_code'));
+                    }
+                }
+            }
+
+            foreach (($validator->getData()['items'] ?? []) as $index => $item) {
+                $productUnitId = $item['product_unit_id'] ?? null;
+                $qty = $item['qty'] ?? null;
+                $conversionValue = $item['product_unit_conversion_value'] ?? null;
+                $serials = $item['serials'] ?? [];
+
+                if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                    continue;
+                }
+
+                $product = ProductUnit::with('product')->find($productUnitId)?->product;
+                if (! $product?->is_use_serial_number) {
+                    continue;
+                }
+
+                $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                if (str_contains($normalizedBaseQty, '.')) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_base_qty_must_be_integer'));
+
+                    continue;
+                }
+
+                $serialValues = collect(is_array($serials) ? $serials : [])
+                    ->pluck('serial')
+                    ->values();
+                if ($serialValues->count() !== $serialValues->unique()->count()) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.purchase.duplicate_serial'));
+                }
+
+                $serialCount = (string) count(is_array($serials) ? $serials : []);
+                if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_count_must_match_base_qty'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.purchase.company_id'),
+            'branch_id' => trans('validation_attributes.purchase.branch_id'),
+            'code' => trans('validation_attributes.purchase.code'),
+            'date' => trans('validation_attributes.purchase.date'),
+            'due_days' => trans('validation_attributes.purchase.due_days'),
+            'supplier_id' => trans('validation_attributes.purchase.supplier_id'),
+            'purchase_order_id' => trans('validation_attributes.purchase.purchase_order_id'),
+            'direct_receipt_warehouse_id' => trans('validation_attributes.purchase.direct_receipt_warehouse_id'),
+            'tax_invoice_number' => trans('validation_attributes.purchase.tax_invoice_number'),
+            'tax_invoice_vat_base' => trans('validation_attributes.purchase.tax_invoice_vat_base'),
+            'tax_invoice_vat' => trans('validation_attributes.purchase.tax_invoice_vat'),
+            'remarks' => trans('validation_attributes.purchase.remarks'),
+
+            'items.*.qty' => trans('validation_attributes.purchase_order_item.qty'),
+            'items.*.product_unit_id' => trans('validation_attributes.purchase_order_item.product_unit_id'),
+            'items.*.product_unit_conversion_value' => trans('validation_attributes.purchase_order_item.product_unit_conversion_value'),
+            'items.*.product_unit_price' => trans('validation_attributes.purchase_order_item.product_unit_price'),
+            'items.*.product_unit_is_price_include_vat' => trans('validation_attributes.purchase_order_item.product_unit_is_price_include_vat'),
+            'items.*.vat_profile_id' => trans('validation_attributes.purchase_order_item.vat_profile_id'),
+            'items.*.vat_rate' => trans('validation_attributes.purchase_order_item.vat_rate'),
+            'items.*.vat_base_numerator' => trans('validation_attributes.purchase_order_item.vat_base_numerator'),
+            'items.*.vat_base_denominator' => trans('validation_attributes.purchase_order_item.vat_base_denominator'),
+            'items.*.remarks' => trans('validation_attributes.purchase_order_item.remarks'),
+            'items.*.delete_serial_ids' => 'delete serial ids',
+            'items.*.serials' => 'serials',
+
+            'global_discounts.*.sequence' => trans('validation_attributes.purchase_order_global_discount.sequence'),
+            'global_discounts.*.discount_type' => trans('validation_attributes.purchase_order_global_discount.discount_type'),
+            'global_discounts.*.discount_value' => trans('validation_attributes.purchase_order_global_discount.discount_value'),
+
+            'additional_costs.*.purchase_additional_cost_category_id' => trans('validation_attributes.purchase_additional_cost.purchase_additional_cost_category_id'),
+            'additional_costs.*.code' => trans('validation_attributes.purchase_additional_cost.code'),
+            'additional_costs.*.date' => trans('validation_attributes.purchase_additional_cost.date'),
+            'additional_costs.*.due_days' => trans('validation_attributes.purchase_additional_cost.due_days'),
+            'additional_costs.*.paid_immediately_cash_account_id' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+            'additional_costs.*.amount_paid_immediately' => trans('validation_attributes.purchase_additional_cost.amount_paid_immediately'),
+            'additional_costs.*.amount_payable' => trans('validation_attributes.purchase_additional_cost.amount_payable'),
+            'additional_costs.*.remarks' => trans('validation_attributes.purchase_additional_cost.remarks'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/Purchase/PurchaseManualStoreRequest.php b/api/app/Http/Requests/Purchase/PurchaseManualStoreRequest.php
new file mode 100644
index 000000000..38cdf9d8c
--- /dev/null
+++ b/api/app/Http/Requests/Purchase/PurchaseManualStoreRequest.php
@@ -0,0 +1,281 @@
+<?php
+
+namespace App\Http\Requests\Purchase;
+
+use App\Enums\DiscountTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\Purchase;
+use App\Models\PurchaseAdditionalCost;
+use App\Models\PurchaseOrder;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PurchaseManualStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Purchase::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+            'purchase_order_id' => $this->filled('purchase_order_id') ? HashidsHelper::decodeId($this->purchase_order_id) : null,
+        ]);
+
+        if (is_array($this->input('items'))) {
+            $items = [];
+            foreach ($this->input('items') as $item) {
+                if (array_key_exists('product_unit_id', $item) && ! is_null($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+                if (array_key_exists('vat_profile_id', $item) && ! is_null($item['vat_profile_id'])) {
+                    $item['vat_profile_id'] = HashidsHelper::decodeId($item['vat_profile_id']);
+                }
+                $items[] = $item;
+            }
+            $this->merge(['items' => $items]);
+        }
+
+        if (is_array($this->input('additional_costs'))) {
+            $additionalCosts = [];
+            foreach ($this->input('additional_costs') as $additionalCost) {
+                if (array_key_exists('purchase_additional_cost_category_id', $additionalCost) && ! is_null($additionalCost['purchase_additional_cost_category_id'])) {
+                    $additionalCost['purchase_additional_cost_category_id'] = HashidsHelper::decodeId($additionalCost['purchase_additional_cost_category_id']);
+                }
+                if (array_key_exists('paid_immediately_cash_account_id', $additionalCost) && ! is_null($additionalCost['paid_immediately_cash_account_id'])) {
+                    $additionalCost['paid_immediately_cash_account_id'] = HashidsHelper::decodeId($additionalCost['paid_immediately_cash_account_id']);
+                }
+                $additionalCosts[] = $additionalCost;
+            }
+            $this->merge(['additional_costs' => $additionalCosts]);
+        }
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'supplier_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('suppliers', $this->company_id),
+                new IsValidSupplier($this->company_id),
+            ],
+            'purchase_order_id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_orders', $this->company_id)],
+            'direct_receipt_warehouse_id' => ['prohibited'],
+            'tax_invoice_number' => ['present', 'nullable', 'string'],
+            'tax_invoice_vat_base' => ['required', 'numeric', 'min:0'],
+            'tax_invoice_vat' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string'],
+            'is_posted' => ['required', 'boolean'],
+            'rounding' => ['required', 'numeric'],
+
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.qty' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.product_unit_is_price_include_vat' => ['required', 'boolean'],
+            'items.*.product_unit_price_discounts' => ['present', 'array'],
+            'items.*.product_unit_price_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.product_unit_price_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.product_unit_price_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.subtotal_discounts' => ['present', 'array'],
+            'items.*.subtotal_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.subtotal_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.subtotal_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.vat_profile_id' => [
+                'present',
+                'nullable',
+                'integer',
+                new ExistsForCompany('vat_profiles', $this->company_id),
+            ],
+            'items.*.vat_rate' => ['required', 'numeric', 'min:0', 'max:100'],
+            'items.*.vat_base_numerator' => ['required', 'integer', 'min:1'],
+            'items.*.vat_base_denominator' => ['required', 'integer', 'min:1'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'global_discounts' => ['present', 'array'],
+            'global_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'global_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'global_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+
+            'additional_costs' => ['present', 'array'],
+            'additional_costs.*.code' => ['required', 'string'],
+            'additional_costs.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'additional_costs.*.due_days' => ['required', 'integer', 'min:0'],
+            'additional_costs.*.purchase_additional_cost_category_id' => [
+                'required',
+                'integer',
+                new ExistsForCompany('purchase_additional_cost_categories', $this->company_id),
+            ],
+            'additional_costs.*.paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'additional_costs.*.amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'additional_costs.*.amount_payable' => ['required', 'numeric', 'min:0'],
+            'additional_costs.*.remarks' => ['present', 'nullable', 'string'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = $this->input('items', []);
+            $productUnitIds = collect($items)
+                ->pluck('product_unit_id')
+                ->filter(fn ($productUnitId) => is_numeric($productUnitId))
+                ->map(fn ($productUnitId) => (int) $productUnitId)
+                ->unique()
+                ->values();
+
+            if ($productUnitIds->isNotEmpty()) {
+                $productIdsByProductUnitId = ProductUnit::query()
+                    ->whereIn('id', $productUnitIds)
+                    ->pluck('product_id', 'id')
+                    ->map(fn ($productId) => (int) $productId)
+                    ->all();
+
+                $seenProductIds = [];
+                foreach ($items as $index => $item) {
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (! is_numeric($productUnitId)) {
+                        continue;
+                    }
+
+                    $productId = $productIdsByProductUnitId[(int) $productUnitId] ?? null;
+                    if (is_null($productId)) {
+                        continue;
+                    }
+
+                    if (isset($seenProductIds[$productId])) {
+                        $validator->errors()->add("items.$index.product_unit_id", trans('rules.purchase.duplicate_product'));
+
+                        continue;
+                    }
+
+                    $seenProductIds[$productId] = true;
+                }
+            }
+
+            $purchaseOrderId = $this->input('purchase_order_id');
+
+            if (! is_null($purchaseOrderId)) {
+                $purchaseOrder = PurchaseOrder::with('items:id,purchase_order_id')->find($purchaseOrderId);
+
+                if (! is_null($purchaseOrder)) {
+                    if ((int) $this->input('supplier_id') !== (int) $purchaseOrder->supplier_id) {
+                        $validator->errors()->add('purchase_order_id', trans('rules.purchase.purchase_order_supplier_must_match'));
+                    }
+
+                    if ((int) $this->input('branch_id') !== (int) $purchaseOrder->branch_id) {
+                        $validator->errors()->add('purchase_order_id', trans('rules.purchase.purchase_order_branch_must_match'));
+                    }
+                }
+            }
+
+            foreach ($this->input('additional_costs', []) as $index => $additionalCost) {
+                $amountPaidImmediately = (float) ($additionalCost['amount_paid_immediately'] ?? 0);
+                $amountPayable = (float) ($additionalCost['amount_payable'] ?? 0);
+                $code = $additionalCost['code'] ?? null;
+
+                if ($amountPaidImmediately > 0 && empty($additionalCost['paid_immediately_cash_account_id'])) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.paid_immediately_cash_account_id",
+                        trans('validation.required', [
+                            'attribute' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+                        ])
+                    );
+                }
+
+                if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.amount_total",
+                        trans('rules.purchase.additional_cost_amount_total_must_be_positive')
+                    );
+                }
+
+                if (
+                    ! empty($code)
+                    && $code !== config('dcslab.KEYWORDS.AUTO')
+                    && PurchaseAdditionalCost::where('company_id', $this->company_id)
+                        ->whereNull('deleted_at')
+                        ->where('code', $code)
+                        ->exists()
+                ) {
+                    $validator->errors()->add("additional_costs.$index.code", trans('rules.unique_code'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.purchase.company_id'),
+            'branch_id' => trans('validation_attributes.purchase.branch_id'),
+            'code' => trans('validation_attributes.purchase.code'),
+            'date' => trans('validation_attributes.purchase.date'),
+            'due_days' => trans('validation_attributes.purchase.due_days'),
+            'supplier_id' => trans('validation_attributes.purchase.supplier_id'),
+            'purchase_order_id' => trans('validation_attributes.purchase.purchase_order_id'),
+            'tax_invoice_number' => trans('validation_attributes.purchase.tax_invoice_number'),
+            'tax_invoice_vat_base' => trans('validation_attributes.purchase.tax_invoice_vat_base'),
+            'tax_invoice_vat' => trans('validation_attributes.purchase.tax_invoice_vat'),
+            'remarks' => trans('validation_attributes.purchase.remarks'),
+
+            'items.*.qty' => trans('validation_attributes.purchase_order_item.qty'),
+            'items.*.product_unit_id' => trans('validation_attributes.purchase_order_item.product_unit_id'),
+            'items.*.product_unit_conversion_value' => trans('validation_attributes.purchase_order_item.product_unit_conversion_value'),
+            'items.*.product_unit_price' => trans('validation_attributes.purchase_order_item.product_unit_price'),
+            'items.*.product_unit_is_price_include_vat' => trans('validation_attributes.purchase_order_item.product_unit_is_price_include_vat'),
+            'items.*.vat_profile_id' => trans('validation_attributes.purchase_order_item.vat_profile_id'),
+            'items.*.vat_rate' => trans('validation_attributes.purchase_order_item.vat_rate'),
+            'items.*.vat_base_numerator' => trans('validation_attributes.purchase_order_item.vat_base_numerator'),
+            'items.*.vat_base_denominator' => trans('validation_attributes.purchase_order_item.vat_base_denominator'),
+            'items.*.remarks' => trans('validation_attributes.purchase_order_item.remarks'),
+
+            'global_discounts.*.sequence' => trans('validation_attributes.purchase_order_global_discount.sequence'),
+            'global_discounts.*.discount_type' => trans('validation_attributes.purchase_order_global_discount.discount_type'),
+            'global_discounts.*.discount_value' => trans('validation_attributes.purchase_order_global_discount.discount_value'),
+
+            'additional_costs.*.purchase_additional_cost_category_id' => trans('validation_attributes.purchase_additional_cost.purchase_additional_cost_category_id'),
+            'additional_costs.*.code' => trans('validation_attributes.purchase_additional_cost.code'),
+            'additional_costs.*.date' => trans('validation_attributes.purchase_additional_cost.date'),
+            'additional_costs.*.due_days' => trans('validation_attributes.purchase_additional_cost.due_days'),
+            'additional_costs.*.paid_immediately_cash_account_id' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+            'additional_costs.*.amount_paid_immediately' => trans('validation_attributes.purchase_additional_cost.amount_paid_immediately'),
+            'additional_costs.*.amount_payable' => trans('validation_attributes.purchase_additional_cost.amount_payable'),
+            'additional_costs.*.remarks' => trans('validation_attributes.purchase_additional_cost.remarks'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/Purchase/PurchaseManualUpdateRequest.php b/api/app/Http/Requests/Purchase/PurchaseManualUpdateRequest.php
new file mode 100644
index 000000000..03899ddad
--- /dev/null
+++ b/api/app/Http/Requests/Purchase/PurchaseManualUpdateRequest.php
@@ -0,0 +1,404 @@
+<?php
+
+namespace App\Http\Requests\Purchase;
+
+use App\Enums\DiscountTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\PurchaseAdditionalCost;
+use App\Models\PurchaseOrder;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PurchaseManualUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $purchase = $this->route('purchase');
+
+        return $user->can('update', $purchase);
+    }
+
+    public function prepareForValidation()
+    {
+        $purchase = $this->route('purchase');
+
+        $this->merge([
+            'company_id' => $purchase->company_id,
+            'branch_id' => $purchase->branch_id,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+            'purchase_order_id' => $this->filled('purchase_order_id') ? HashidsHelper::decodeId($this->purchase_order_id) : null,
+
+            'delete_item_ids' => collect($this->delete_item_ids ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all(),
+            'items' => collect($this->items ?? [])->map(function ($item) {
+                $item['id'] = ! empty($item['id']) ? HashidsHelper::decodeId($item['id']) : null;
+                $item['product_unit_id'] = ! empty($item['product_unit_id']) ? HashidsHelper::decodeId($item['product_unit_id']) : null;
+                $item['vat_profile_id'] = ! empty($item['vat_profile_id']) ? HashidsHelper::decodeId($item['vat_profile_id']) : null;
+                $item['delete_product_unit_price_discount_ids'] = collect($item['delete_product_unit_price_discount_ids'] ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all();
+                $item['product_unit_price_discounts'] = collect($item['product_unit_price_discounts'] ?? [])->map(function ($discount) {
+                    $discount['id'] = ! empty($discount['id']) ? HashidsHelper::decodeId($discount['id']) : null;
+
+                    return $discount;
+                })->all();
+                $item['delete_subtotal_discount_ids'] = collect($item['delete_subtotal_discount_ids'] ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all();
+                $item['subtotal_discounts'] = collect($item['subtotal_discounts'] ?? [])->map(function ($discount) {
+                    $discount['id'] = ! empty($discount['id']) ? HashidsHelper::decodeId($discount['id']) : null;
+
+                    return $discount;
+                })->all();
+
+                return $item;
+            })->all(),
+            'delete_global_discount_ids' => collect($this->delete_global_discount_ids ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all(),
+            'global_discounts' => collect($this->global_discounts ?? [])->map(function ($discount) {
+                $discount['id'] = ! empty($discount['id']) ? HashidsHelper::decodeId($discount['id']) : null;
+
+                return $discount;
+            })->all(),
+            'delete_additional_cost_ids' => collect($this->delete_additional_cost_ids ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all(),
+            'additional_costs' => collect($this->additional_costs ?? [])->map(function ($additionalCost) {
+                $additionalCost['id'] = ! empty($additionalCost['id']) ? HashidsHelper::decodeId($additionalCost['id']) : null;
+                $additionalCost['purchase_additional_cost_category_id'] = ! empty($additionalCost['purchase_additional_cost_category_id'])
+                    ? HashidsHelper::decodeId($additionalCost['purchase_additional_cost_category_id'])
+                    : null;
+                $additionalCost['paid_immediately_cash_account_id'] = ! empty($additionalCost['paid_immediately_cash_account_id'])
+                    ? HashidsHelper::decodeId($additionalCost['paid_immediately_cash_account_id'])
+                    : null;
+
+                return $additionalCost;
+            })->all(),
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'supplier_id' => ['required', 'integer', 'bail', new ExistsForCompany('suppliers', $this->company_id), new IsValidSupplier($this->company_id)],
+            'purchase_order_id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_orders', $this->company_id)],
+            'direct_receipt_warehouse_id' => ['prohibited'],
+            'tax_invoice_number' => ['present', 'nullable', 'string'],
+            'tax_invoice_vat_base' => ['required', 'numeric', 'min:0'],
+            'tax_invoice_vat' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string'],
+            'is_posted' => ['required', 'boolean'],
+            'rounding' => ['required', 'numeric'],
+
+            'delete_item_ids' => ['present', 'array'],
+            'delete_item_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_items', $this->company_id)],
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_items', $this->company_id)],
+            'items.*.qty' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.product_unit_is_price_include_vat' => ['required', 'boolean'],
+            'items.*.delete_product_unit_price_discount_ids' => ['present', 'array'],
+            'items.*.delete_product_unit_price_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_item_product_unit_price_discounts', $this->company_id)],
+            'items.*.product_unit_price_discounts' => ['present', 'array'],
+            'items.*.product_unit_price_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_item_product_unit_price_discounts', $this->company_id)],
+            'items.*.product_unit_price_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.product_unit_price_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.product_unit_price_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.delete_subtotal_discount_ids' => ['present', 'array'],
+            'items.*.delete_subtotal_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_item_subtotal_discounts', $this->company_id)],
+            'items.*.subtotal_discounts' => ['present', 'array'],
+            'items.*.subtotal_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_item_subtotal_discounts', $this->company_id)],
+            'items.*.subtotal_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.subtotal_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.subtotal_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.vat_profile_id' => ['present', 'nullable', 'integer', new ExistsForCompany('vat_profiles', $this->company_id)],
+            'items.*.vat_rate' => ['required', 'numeric', 'min:0', 'max:100'],
+            'items.*.vat_base_numerator' => ['required', 'integer', 'min:1'],
+            'items.*.vat_base_denominator' => ['required', 'integer', 'min:1'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_global_discount_ids' => ['present', 'array'],
+            'delete_global_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_global_discounts', $this->company_id)],
+            'global_discounts' => ['present', 'array'],
+            'global_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_global_discounts', $this->company_id)],
+            'global_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'global_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'global_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+
+            'delete_additional_cost_ids' => ['present', 'array'],
+            'delete_additional_cost_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_additional_costs', $this->company_id)],
+            'additional_costs' => ['present', 'array'],
+            'additional_costs.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_additional_costs', $this->company_id)],
+            'additional_costs.*.code' => ['required', 'string'],
+            'additional_costs.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'additional_costs.*.due_days' => ['required', 'integer', 'min:0'],
+            'additional_costs.*.purchase_additional_cost_category_id' => [
+                'required',
+                'integer',
+                new ExistsForCompany('purchase_additional_cost_categories', $this->company_id),
+            ],
+            'additional_costs.*.paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'additional_costs.*.amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'additional_costs.*.amount_payable' => ['required', 'numeric', 'min:0'],
+            'additional_costs.*.remarks' => ['present', 'nullable', 'string'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = $this->input('items', []);
+            $productUnitIds = collect($items)
+                ->pluck('product_unit_id')
+                ->filter(fn ($productUnitId) => is_numeric($productUnitId))
+                ->map(fn ($productUnitId) => (int) $productUnitId)
+                ->unique()
+                ->values();
+
+            if ($productUnitIds->isNotEmpty()) {
+                $productIdsByProductUnitId = ProductUnit::query()
+                    ->whereIn('id', $productUnitIds)
+                    ->pluck('product_id', 'id')
+                    ->map(fn ($productId) => (int) $productId)
+                    ->all();
+
+                $seenProductIds = [];
+                foreach ($items as $index => $item) {
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (! is_numeric($productUnitId)) {
+                        continue;
+                    }
+
+                    $productId = $productIdsByProductUnitId[(int) $productUnitId] ?? null;
+                    if (is_null($productId)) {
+                        continue;
+                    }
+
+                    if (isset($seenProductIds[$productId])) {
+                        $validator->errors()->add("items.$index.product_unit_id", trans('rules.purchase.duplicate_product'));
+
+                        continue;
+                    }
+
+                    $seenProductIds[$productId] = true;
+                }
+            }
+
+            $purchase = $this->route('purchase');
+            $purchaseOrderId = $this->input('purchase_order_id');
+            $purchaseItems = $purchase->items()
+                ->with([
+                    'productUnitPriceDiscounts:id,purchase_item_id',
+                    'subtotalDiscounts:id,purchase_item_id',
+                ])
+                ->get()
+                ->keyBy('id');
+            $purchaseItemIds = $purchaseItems->keys()->all();
+            $purchaseGlobalDiscountIds = $purchase->globalDiscounts()->pluck('id')->all();
+            $purchaseAdditionalCostIds = $purchase->additionalCosts()->pluck('id')->all();
+
+            if (! is_null($purchaseOrderId)) {
+                $purchaseOrder = PurchaseOrder::with('items:id,purchase_order_id')->find($purchaseOrderId);
+
+                if (! is_null($purchaseOrder)) {
+                    if ((int) $this->input('supplier_id') !== (int) $purchaseOrder->supplier_id) {
+                        $validator->errors()->add('purchase_order_id', trans('rules.purchase.purchase_order_supplier_must_match'));
+                    }
+
+                    if ((int) $purchase->branch_id !== (int) $purchaseOrder->branch_id) {
+                        $validator->errors()->add('purchase_order_id', trans('rules.purchase.purchase_order_branch_must_match'));
+                    }
+                }
+            }
+
+            foreach ($this->input('delete_item_ids', []) as $index => $deleteItemId) {
+                if (! in_array($deleteItemId, $purchaseItemIds, true)) {
+                    $validator->errors()->add("delete_item_ids.$index", trans('rules.purchase.invalid_delete_item_reference'));
+                }
+            }
+
+            foreach ($this->input('items', []) as $index => $item) {
+                $itemId = $item['id'] ?? null;
+                $purchaseItem = ! is_null($itemId) ? $purchaseItems->get($itemId) : null;
+
+                if (! is_null($itemId) && is_null($purchaseItem)) {
+                    $validator->errors()->add("items.$index.id", trans('rules.purchase.invalid_item_reference'));
+                }
+
+                $productUnitPriceDiscountIds = $purchaseItem?->productUnitPriceDiscounts->pluck('id')->all() ?? [];
+                foreach ($item['delete_product_unit_price_discount_ids'] ?? [] as $discountIndex => $discountId) {
+                    if (! in_array($discountId, $productUnitPriceDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.delete_product_unit_price_discount_ids.$discountIndex",
+                            trans('rules.purchase.invalid_product_unit_price_discount_reference')
+                        );
+                    }
+                }
+
+                foreach ($item['product_unit_price_discounts'] ?? [] as $discountIndex => $discount) {
+                    $discountId = $discount['id'] ?? null;
+
+                    if (! is_null($discountId) && ! in_array($discountId, $productUnitPriceDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.product_unit_price_discounts.$discountIndex.id",
+                            trans('rules.purchase.invalid_product_unit_price_discount_reference')
+                        );
+                    }
+                }
+
+                $subtotalDiscountIds = $purchaseItem?->subtotalDiscounts->pluck('id')->all() ?? [];
+                foreach ($item['delete_subtotal_discount_ids'] ?? [] as $discountIndex => $discountId) {
+                    if (! in_array($discountId, $subtotalDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.delete_subtotal_discount_ids.$discountIndex",
+                            trans('rules.purchase.invalid_subtotal_discount_reference')
+                        );
+                    }
+                }
+
+                foreach ($item['subtotal_discounts'] ?? [] as $discountIndex => $discount) {
+                    $discountId = $discount['id'] ?? null;
+
+                    if (! is_null($discountId) && ! in_array($discountId, $subtotalDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.subtotal_discounts.$discountIndex.id",
+                            trans('rules.purchase.invalid_subtotal_discount_reference')
+                        );
+                    }
+                }
+            }
+
+            foreach ($this->input('delete_global_discount_ids', []) as $index => $discountId) {
+                if (! in_array($discountId, $purchaseGlobalDiscountIds, true)) {
+                    $validator->errors()->add(
+                        "delete_global_discount_ids.$index",
+                        trans('rules.purchase.invalid_global_discount_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('global_discounts', []) as $index => $discount) {
+                $discountId = $discount['id'] ?? null;
+
+                if (! is_null($discountId) && ! in_array($discountId, $purchaseGlobalDiscountIds, true)) {
+                    $validator->errors()->add(
+                        "global_discounts.$index.id",
+                        trans('rules.purchase.invalid_global_discount_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('delete_additional_cost_ids', []) as $index => $additionalCostId) {
+                if (! in_array($additionalCostId, $purchaseAdditionalCostIds, true)) {
+                    $validator->errors()->add(
+                        "delete_additional_cost_ids.$index",
+                        trans('rules.purchase.invalid_additional_cost_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('additional_costs', []) as $index => $additionalCost) {
+                $amountPaidImmediately = (float) ($additionalCost['amount_paid_immediately'] ?? 0);
+                $amountPayable = (float) ($additionalCost['amount_payable'] ?? 0);
+                $code = $additionalCost['code'] ?? null;
+                $id = $additionalCost['id'] ?? null;
+
+                if (! is_null($id) && ! in_array($id, $purchaseAdditionalCostIds, true)) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.id",
+                        trans('rules.purchase.invalid_additional_cost_reference')
+                    );
+                }
+
+                if ($amountPaidImmediately > 0 && empty($additionalCost['paid_immediately_cash_account_id'])) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.paid_immediately_cash_account_id",
+                        trans('validation.required', [
+                            'attribute' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+                        ])
+                    );
+                }
+
+                if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                    $validator->errors()->add(
+                        "additional_costs.$index.amount_total",
+                        trans('rules.purchase.additional_cost_amount_total_must_be_positive')
+                    );
+                }
+
+                if (! empty($code) && $code !== config('dcslab.KEYWORDS.AUTO')) {
+                    $query = PurchaseAdditionalCost::where('company_id', $this->company_id)
+                        ->whereNull('deleted_at')
+                        ->where('code', $code);
+
+                    if (! empty($id)) {
+                        $query->where('id', '<>', $id);
+                    }
+
+                    if ($query->exists()) {
+                        $validator->errors()->add("additional_costs.$index.code", trans('rules.unique_code'));
+                    }
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.purchase.company_id'),
+            'branch_id' => trans('validation_attributes.purchase.branch_id'),
+            'code' => trans('validation_attributes.purchase.code'),
+            'date' => trans('validation_attributes.purchase.date'),
+            'due_days' => trans('validation_attributes.purchase.due_days'),
+            'supplier_id' => trans('validation_attributes.purchase.supplier_id'),
+            'purchase_order_id' => trans('validation_attributes.purchase.purchase_order_id'),
+            'tax_invoice_number' => trans('validation_attributes.purchase.tax_invoice_number'),
+            'tax_invoice_vat_base' => trans('validation_attributes.purchase.tax_invoice_vat_base'),
+            'tax_invoice_vat' => trans('validation_attributes.purchase.tax_invoice_vat'),
+            'remarks' => trans('validation_attributes.purchase.remarks'),
+
+            'items.*.qty' => trans('validation_attributes.purchase_order_item.qty'),
+            'items.*.product_unit_id' => trans('validation_attributes.purchase_order_item.product_unit_id'),
+            'items.*.product_unit_conversion_value' => trans('validation_attributes.purchase_order_item.product_unit_conversion_value'),
+            'items.*.product_unit_price' => trans('validation_attributes.purchase_order_item.product_unit_price'),
+            'items.*.product_unit_is_price_include_vat' => trans('validation_attributes.purchase_order_item.product_unit_is_price_include_vat'),
+            'items.*.vat_profile_id' => trans('validation_attributes.purchase_order_item.vat_profile_id'),
+            'items.*.vat_rate' => trans('validation_attributes.purchase_order_item.vat_rate'),
+            'items.*.vat_base_numerator' => trans('validation_attributes.purchase_order_item.vat_base_numerator'),
+            'items.*.vat_base_denominator' => trans('validation_attributes.purchase_order_item.vat_base_denominator'),
+            'items.*.remarks' => trans('validation_attributes.purchase_order_item.remarks'),
+
+            'global_discounts.*.sequence' => trans('validation_attributes.purchase_order_global_discount.sequence'),
+            'global_discounts.*.discount_type' => trans('validation_attributes.purchase_order_global_discount.discount_type'),
+            'global_discounts.*.discount_value' => trans('validation_attributes.purchase_order_global_discount.discount_value'),
+
+            'additional_costs.*.purchase_additional_cost_category_id' => trans('validation_attributes.purchase_additional_cost.purchase_additional_cost_category_id'),
+            'additional_costs.*.code' => trans('validation_attributes.purchase_additional_cost.code'),
+            'additional_costs.*.date' => trans('validation_attributes.purchase_additional_cost.date'),
+            'additional_costs.*.due_days' => trans('validation_attributes.purchase_additional_cost.due_days'),
+            'additional_costs.*.paid_immediately_cash_account_id' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+            'additional_costs.*.amount_paid_immediately' => trans('validation_attributes.purchase_additional_cost.amount_paid_immediately'),
+            'additional_costs.*.amount_payable' => trans('validation_attributes.purchase_additional_cost.amount_payable'),
+            'additional_costs.*.remarks' => trans('validation_attributes.purchase_additional_cost.remarks'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseAdditionalCost/PurchaseAdditionalCostStoreRequest.php b/api/app/Http/Requests/PurchaseAdditionalCost/PurchaseAdditionalCostStoreRequest.php
new file mode 100644
index 000000000..d98c82d56
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseAdditionalCost/PurchaseAdditionalCostStoreRequest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Requests\PurchaseAdditionalCost;
+
+use App\Helpers\HashidsHelper;
+use App\Models\PurchaseAdditionalCost;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseAdditionalCostStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) return false;
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PurchaseAdditionalCost::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'purchase_id' => $this->filled('purchase_id') ? HashidsHelper::decodeId($this->purchase_id) : null,
+            'purchase_additional_cost_category_id' => $this->filled('purchase_additional_cost_category_id') ? HashidsHelper::decodeId($this->purchase_additional_cost_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'purchase_id' => ['required', 'integer', new ExistsForCompany('purchases', $this->company_id)],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'purchase_additional_cost_category_id' => ['required', 'integer', new ExistsForCompany('purchase_additional_cost_categories', $this->company_id)],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_payable' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountPayable = (float) $this->input('amount_payable', 0);
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.purchase_additional_cost.amount_total_must_be_positive'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.purchase_additional_cost');
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseAdditionalCost/PurchaseAdditionalCostUpdateRequest.php b/api/app/Http/Requests/PurchaseAdditionalCost/PurchaseAdditionalCostUpdateRequest.php
new file mode 100644
index 000000000..f58c0ab5f
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseAdditionalCost/PurchaseAdditionalCostUpdateRequest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Requests\PurchaseAdditionalCost;
+
+use App\Helpers\HashidsHelper;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseAdditionalCostUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) return false;
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $purchaseAdditionalCost = $this->route('purchase_additional_cost');
+
+        return $user->can('update', $purchaseAdditionalCost);
+    }
+
+    public function prepareForValidation()
+    {
+        $purchaseAdditionalCost = $this->route('purchase_additional_cost');
+
+        $this->merge([
+            'company_id' => $purchaseAdditionalCost->company_id,
+            'branch_id' => $purchaseAdditionalCost->branch_id,
+            'purchase_id' => $this->filled('purchase_id') ? HashidsHelper::decodeId($this->purchase_id) : null,
+            'purchase_additional_cost_category_id' => $this->filled('purchase_additional_cost_category_id') ? HashidsHelper::decodeId($this->purchase_additional_cost_category_id) : null,
+            'paid_immediately_cash_account_id' => $this->filled('paid_immediately_cash_account_id') ? HashidsHelper::decodeId($this->paid_immediately_cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'purchase_id' => ['required', 'integer', new ExistsForCompany('purchases', $this->company_id)],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'purchase_additional_cost_category_id' => ['required', 'integer', new ExistsForCompany('purchase_additional_cost_categories', $this->company_id)],
+            'paid_immediately_cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount_paid_immediately' => ['required', 'numeric', 'min:0'],
+            'amount_payable' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $amountPaidImmediately = (float) $this->input('amount_paid_immediately', 0);
+            $amountPayable = (float) $this->input('amount_payable', 0);
+
+            if ($amountPaidImmediately > 0 && empty($this->input('paid_immediately_cash_account_id'))) {
+                $validator->errors()->add('paid_immediately_cash_account_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.purchase_additional_cost.paid_immediately_cash_account_id'),
+                ]));
+            }
+
+            if ($amountPaidImmediately <= 0 && $amountPayable <= 0) {
+                $validator->errors()->add('amount_total', trans('rules.purchase_additional_cost.amount_total_must_be_positive'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.purchase_additional_cost');
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryStoreRequest.php b/api/app/Http/Requests/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryStoreRequest.php
new file mode 100644
index 000000000..eaa518a0e
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryStoreRequest.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Requests\PurchaseAdditionalCostCategory;
+
+use App\Helpers\HashidsHelper;
+use App\Models\PurchaseAdditionalCostCategory;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseAdditionalCostCategoryStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PurchaseAdditionalCostCategory::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.purchase_additional_cost_category');
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryUpdateRequest.php b/api/app/Http/Requests/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryUpdateRequest.php
new file mode 100644
index 000000000..8b6e5ba4f
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseAdditionalCostCategory/PurchaseAdditionalCostCategoryUpdateRequest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Http\Requests\PurchaseAdditionalCostCategory;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseAdditionalCostCategoryUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $purchaseAdditionalCostCategory = $this->route('pacc');
+
+        return $user->can('update', $purchaseAdditionalCostCategory);
+    }
+
+    public function prepareForValidation()
+    {
+    }
+
+    public function rules()
+    {
+        return [
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.purchase_additional_cost_category');
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentStoreRequest.php b/api/app/Http/Requests/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentStoreRequest.php
new file mode 100644
index 000000000..2337c13b2
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentStoreRequest.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace App\Http\Requests\PurchaseAdditionalCostPayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\PurchaseAdditionalCost;
+use App\Models\PurchaseAdditionalCostPayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseAdditionalCostPaymentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) return false;
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PurchaseAdditionalCostPayment::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'purchase_additional_cost_id' => $this->filled('purchase_additional_cost_id') ? HashidsHelper::decodeId($this->purchase_additional_cost_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'purchase_additional_cost_id' => ['required', 'integer', new ExistsForCompany('purchase_additional_costs', $this->company_id)],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $purchaseAdditionalCost = PurchaseAdditionalCost::find($this->input('purchase_additional_cost_id'));
+            if (! $purchaseAdditionalCost) {
+                return;
+            }
+
+            if ((float) $this->input('amount', 0) > (float) $purchaseAdditionalCost->amount_payable_due) {
+                $validator->errors()->add('amount', trans('rules.max.numeric', [
+                    'attribute' => trans('validation_attributes.purchase_additional_cost_payment.amount'),
+                    'max' => $purchaseAdditionalCost->amount_payable_due,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.purchase_additional_cost_payment');
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentUpdateRequest.php b/api/app/Http/Requests/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentUpdateRequest.php
new file mode 100644
index 000000000..6e0b0e645
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseAdditionalCostPayment/PurchaseAdditionalCostPaymentUpdateRequest.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace App\Http\Requests\PurchaseAdditionalCostPayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\PurchaseAdditionalCostPayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseAdditionalCostPaymentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) return false;
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $purchaseAdditionalCostPayment = $this->route('purchase_additional_cost_payment');
+
+        return $user->can('update', $purchaseAdditionalCostPayment);
+    }
+
+    public function prepareForValidation()
+    {
+        $purchaseAdditionalCostPayment = $this->route('purchase_additional_cost_payment');
+
+        $this->merge([
+            'company_id' => $purchaseAdditionalCostPayment->company_id,
+            'branch_id' => $purchaseAdditionalCostPayment->branch_id,
+            'purchase_additional_cost_id' => $purchaseAdditionalCostPayment->purchase_additional_cost_id,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'purchase_additional_cost_id' => ['required', 'integer', new ExistsForCompany('purchase_additional_costs', $this->company_id)],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => ['required', 'numeric', 'gt:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            /** @var PurchaseAdditionalCostPayment $payment */
+            $payment = $this->route('purchase_additional_cost_payment');
+            $purchaseAdditionalCost = $payment->purchaseAdditionalCost;
+
+            if (! $purchaseAdditionalCost) {
+                return;
+            }
+
+            $maxAmount = (float) $purchaseAdditionalCost->amount_payable_due + (float) $payment->amount;
+            if ((float) $this->input('amount', 0) > $maxAmount) {
+                $validator->errors()->add('amount', trans('rules.max.numeric', [
+                    'attribute' => trans('validation_attributes.purchase_additional_cost_payment.amount'),
+                    'max' => $maxAmount,
+                ]));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.purchase_additional_cost_payment');
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseOrder/PurchaseOrderStoreRequest.php b/api/app/Http/Requests/PurchaseOrder/PurchaseOrderStoreRequest.php
new file mode 100644
index 000000000..77dd73d0a
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseOrder/PurchaseOrderStoreRequest.php
@@ -0,0 +1,291 @@
+<?php
+
+namespace App\Http\Requests\PurchaseOrder;
+
+use App\Enums\DiscountTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\PurchaseOrder;
+use App\Models\PurchaseOrderDownPayment;
+use App\Models\PurchaseOrderDownPaymentRefund;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PurchaseOrderStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PurchaseOrder::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'supplier_id' => ['present', 'nullable', 'integer', new IsValidSupplier($this->company_id)],
+            'remarks' => ['present', 'nullable', 'string'],
+            'rounding' => ['required', 'numeric'],
+
+            'global_discounts' => ['present', 'array'],
+            'global_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'global_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'global_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.qty' => ['required', 'numeric', 'min:0.00000001'],
+            'items.*.product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'items.*.product_unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.product_unit_is_price_include_vat' => ['required', 'boolean'],
+            'items.*.product_unit_price_discounts' => ['present', 'array'],
+            'items.*.product_unit_price_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.product_unit_price_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.product_unit_price_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.subtotal_discounts' => ['present', 'array'],
+            'items.*.subtotal_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.subtotal_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.subtotal_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.vat_profile_id' => ['present', 'nullable', 'integer', new ExistsForCompany('vat_profiles', $this->company_id)],
+            'items.*.vat_rate' => ['required', 'numeric', 'min:0', 'max:100'],
+            'items.*.vat_base_numerator' => ['required', 'integer', 'min:1'],
+            'items.*.vat_base_denominator' => ['required', 'integer', 'min:1'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'down_payments' => ['present', 'array'],
+            'down_payments.*.code' => ['required', 'string', 'max:255'],
+            'down_payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'down_payments.*.cash_account_id' => ['required', 'integer', 'bail', new ExistsForCompany('cash_accounts', $this->company_id), new IsValidCashAccount($this->branch_id)],
+            'down_payments.*.amount' => ['required', 'numeric', 'min:0'],
+            'down_payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'refunded_down_payments' => [
+                'present',
+                'array',
+                function (string $attribute, mixed $value, \Closure $fail) {
+                    $downPaymentsTotal = (float) collect($this->input('down_payments', []))->sum(function ($row) {
+                        return max((float) ($row['amount'] ?? 0), 0);
+                    });
+                    $refundedDownPaymentsTotal = (float) collect(is_array($value) ? $value : [])->sum(function ($row) {
+                        return max((float) ($row['amount'] ?? 0), 0);
+                    });
+                    $maxRefundableAmount = max($downPaymentsTotal, 0);
+
+                    if ($refundedDownPaymentsTotal > $maxRefundableAmount) {
+                        $fail(trans('rules.purchase_order.exceed_available_down_payment'));
+                    }
+                },
+            ],
+            'refunded_down_payments.*.code' => ['required', 'string', 'max:255'],
+            'refunded_down_payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'refunded_down_payments.*.cash_account_id' => ['required', 'integer', 'bail', new ExistsForCompany('cash_accounts', $this->company_id), new IsValidCashAccount($this->branch_id)],
+            'refunded_down_payments.*.amount' => ['required', 'numeric', 'min:0'],
+            'refunded_down_payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.purchase_order.company_id'),
+            'branch_id' => trans('validation_attributes.purchase_order.branch_id'),
+            'code' => trans('validation_attributes.purchase_order.code'),
+            'date' => trans('validation_attributes.purchase_order.date'),
+            'due_days' => trans('validation_attributes.purchase_order.due_days'),
+            'supplier_id' => trans('validation_attributes.purchase_order.supplier_id'),
+            'remarks' => trans('validation_attributes.purchase_order.remarks'),
+            'rounding' => trans('validation_attributes.purchase_order.rounding'),
+
+            'global_discounts.*.sequence' => trans('validation_attributes.purchase_order_global_discount.sequence'),
+            'global_discounts.*.discount_type' => trans('validation_attributes.purchase_order_global_discount.discount_type'),
+            'global_discounts.*.discount_value' => trans('validation_attributes.purchase_order_global_discount.discount_value'),
+
+            'items.*.qty' => trans('validation_attributes.purchase_order_item.qty'),
+            'items.*.product_unit_id' => trans('validation_attributes.purchase_order_item.product_unit_id'),
+            'items.*.product_unit_conversion_value' => trans('validation_attributes.purchase_order_item.product_unit_conversion_value'),
+            'items.*.product_unit_price' => trans('validation_attributes.purchase_order_item.product_unit_price'),
+            'items.*.product_unit_is_price_include_vat' => trans('validation_attributes.purchase_order_item.product_unit_is_price_include_vat'),
+            'items.*.vat_profile_id' => trans('validation_attributes.purchase_order_item.vat_profile_id'),
+            'items.*.vat_rate' => trans('validation_attributes.purchase_order_item.vat_rate'),
+            'items.*.vat_base_numerator' => trans('validation_attributes.purchase_order_item.vat_base_numerator'),
+            'items.*.vat_base_denominator' => trans('validation_attributes.purchase_order_item.vat_base_denominator'),
+            'items.*.remarks' => trans('validation_attributes.purchase_order_item.remarks'),
+
+            'down_payments.*.code' => trans('validation_attributes.purchase_order_down_payment.code'),
+            'down_payments.*.date' => trans('validation_attributes.purchase_order_down_payment.date'),
+            'down_payments.*.cash_account_id' => trans('validation_attributes.purchase_order_down_payment.cash_account_id'),
+            'down_payments.*.amount' => trans('validation_attributes.purchase_order_down_payment.amount'),
+            'down_payments.*.remarks' => trans('validation_attributes.purchase_order_down_payment.remarks'),
+
+            'refunded_down_payments.*.code' => trans('validation_attributes.purchase_order_down_payment_refund.code'),
+            'refunded_down_payments.*.date' => trans('validation_attributes.purchase_order_down_payment_refund.date'),
+            'refunded_down_payments.*.cash_account_id' => trans('validation_attributes.purchase_order_down_payment_refund.cash_account_id'),
+            'refunded_down_payments.*.amount' => trans('validation_attributes.purchase_order_down_payment_refund.amount'),
+            'refunded_down_payments.*.remarks' => trans('validation_attributes.purchase_order_down_payment_refund.remarks'),
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = $this->input('items', []);
+            $productUnitIds = collect($items)
+                ->pluck('product_unit_id')
+                ->filter(fn ($productUnitId) => is_numeric($productUnitId))
+                ->map(fn ($productUnitId) => (int) $productUnitId)
+                ->unique()
+                ->values();
+
+            if ($productUnitIds->isNotEmpty()) {
+                $productIdsByProductUnitId = ProductUnit::query()
+                    ->whereIn('id', $productUnitIds)
+                    ->pluck('product_id', 'id')
+                    ->map(fn ($productId) => (int) $productId)
+                    ->all();
+
+                $seenProductIds = [];
+                foreach ($items as $index => $item) {
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (! is_numeric($productUnitId)) {
+                        continue;
+                    }
+
+                    $productId = $productIdsByProductUnitId[(int) $productUnitId] ?? null;
+                    if (is_null($productId)) {
+                        continue;
+                    }
+
+                    if (isset($seenProductIds[$productId])) {
+                        $validator->errors()->add("items.$index.product_unit_id", trans('rules.purchase_order.duplicate_product'));
+
+                        continue;
+                    }
+
+                    $seenProductIds[$productId] = true;
+                }
+            }
+
+            $code = $this->input('code');
+
+            if (
+                ! empty($code)
+                && $code !== config('dcslab.KEYWORDS.AUTO')
+                && PurchaseOrder::where('company_id', $this->company_id)
+                    ->where('code', $code)
+                    ->exists()
+            ) {
+                $validator->errors()->add('code', trans('rules.unique_code'));
+            }
+
+            $downPaymentCodesInRequest = [];
+            foreach ($this->input('down_payments', []) as $index => $downPayment) {
+                $downPaymentCode = $downPayment['code'] ?? null;
+                if (empty($downPaymentCode) || $downPaymentCode === config('dcslab.KEYWORDS.AUTO')) {
+                    continue;
+                }
+
+                if (in_array($downPaymentCode, $downPaymentCodesInRequest, true)) {
+                    $validator->errors()->add("down_payments.$index.code", trans('rules.unique_code'));
+
+                    continue;
+                }
+
+                $downPaymentCodesInRequest[] = $downPaymentCode;
+
+                if (
+                    PurchaseOrderDownPayment::where('company_id', $this->company_id)
+                        ->where('code', $downPaymentCode)
+                        ->exists()
+                ) {
+                    $validator->errors()->add("down_payments.$index.code", trans('rules.unique_code'));
+                }
+            }
+
+            $refundedDownPaymentCodesInRequest = [];
+            foreach ($this->input('refunded_down_payments', []) as $index => $refundedDownPayment) {
+                $refundedDownPaymentCode = $refundedDownPayment['code'] ?? null;
+                if (empty($refundedDownPaymentCode) || $refundedDownPaymentCode === config('dcslab.KEYWORDS.AUTO')) {
+                    continue;
+                }
+
+                if (in_array($refundedDownPaymentCode, $refundedDownPaymentCodesInRequest, true)) {
+                    $validator->errors()->add("refunded_down_payments.$index.code", trans('rules.unique_code'));
+
+                    continue;
+                }
+
+                $refundedDownPaymentCodesInRequest[] = $refundedDownPaymentCode;
+
+                if (
+                    PurchaseOrderDownPaymentRefund::where('company_id', $this->company_id)
+                        ->where('code', $refundedDownPaymentCode)
+                        ->exists()
+                ) {
+                    $validator->errors()->add("refunded_down_payments.$index.code", trans('rules.unique_code'));
+                }
+            }
+        });
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+        ]);
+
+        if (is_array($this->input('items'))) {
+            $items = [];
+            foreach ($this->input('items') as $item) {
+                if (array_key_exists('product_unit_id', $item) && ! is_null($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+                if (array_key_exists('vat_profile_id', $item) && ! is_null($item['vat_profile_id'])) {
+                    $item['vat_profile_id'] = HashidsHelper::decodeId($item['vat_profile_id']);
+                }
+                $items[] = $item;
+            }
+            $this->merge(['items' => $items]);
+        }
+
+        if (is_array($this->input('down_payments'))) {
+            $downPayments = [];
+            foreach ($this->input('down_payments') as $downPayment) {
+                if (array_key_exists('cash_account_id', $downPayment) && ! is_null($downPayment['cash_account_id'])) {
+                    $downPayment['cash_account_id'] = HashidsHelper::decodeId($downPayment['cash_account_id']);
+                }
+                $downPayments[] = $downPayment;
+            }
+            $this->merge(['down_payments' => $downPayments]);
+        }
+
+        if (is_array($this->input('refunded_down_payments'))) {
+            $refundedDownPayments = [];
+            foreach ($this->input('refunded_down_payments') as $refundedDownPayment) {
+                if (array_key_exists('cash_account_id', $refundedDownPayment) && ! is_null($refundedDownPayment['cash_account_id'])) {
+                    $refundedDownPayment['cash_account_id'] = HashidsHelper::decodeId($refundedDownPayment['cash_account_id']);
+                }
+                $refundedDownPayments[] = $refundedDownPayment;
+            }
+            $this->merge(['refunded_down_payments' => $refundedDownPayments]);
+        }
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseOrder/PurchaseOrderUpdateRequest.php b/api/app/Http/Requests/PurchaseOrder/PurchaseOrderUpdateRequest.php
new file mode 100644
index 000000000..72b709db7
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseOrder/PurchaseOrderUpdateRequest.php
@@ -0,0 +1,563 @@
+<?php
+
+namespace App\Http\Requests\PurchaseOrder;
+
+use App\Enums\DiscountTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\PurchaseOrder;
+use App\Models\PurchaseOrderDownPayment;
+use App\Models\PurchaseOrderDownPaymentRefund;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class PurchaseOrderUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $purchaseOrder = $this->route('purchase_order');
+
+        return $user->can('update', $purchaseOrder);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'supplier_id' => ['present', 'nullable', 'integer', new IsValidSupplier($this->company_id)],
+            'remarks' => ['present', 'nullable', 'string'],
+            'rounding' => ['required', 'numeric'],
+
+            'global_discounts' => ['present', 'array'],
+            'global_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_order_global_discounts', $this->company_id)],
+            'global_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'global_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'global_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'delete_global_discount_ids' => ['present', 'array'],
+            'delete_global_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_order_global_discounts', $this->company_id)],
+
+            'delete_item_ids' => ['present', 'array'],
+            'delete_item_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_order_items', $this->company_id)],
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_order_items', $this->company_id)],
+            'items.*.qty' => ['required', 'numeric', 'min:0.00000001'],
+            'items.*.product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'items.*.product_unit_price' => ['required', 'numeric', 'min:0'],
+            'items.*.product_unit_is_price_include_vat' => ['required', 'boolean'],
+
+            'items.*.delete_product_unit_price_discount_ids' => ['present', 'array'],
+            'items.*.delete_product_unit_price_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_order_item_product_unit_price_discounts', $this->company_id)],
+            'items.*.product_unit_price_discounts' => ['present', 'array'],
+            'items.*.product_unit_price_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_order_item_product_unit_price_discounts', $this->company_id)],
+            'items.*.product_unit_price_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.product_unit_price_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.product_unit_price_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+
+            'items.*.delete_subtotal_discount_ids' => ['present', 'array'],
+            'items.*.delete_subtotal_discount_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_order_item_subtotal_discounts', $this->company_id)],
+            'items.*.subtotal_discounts' => ['present', 'array'],
+            'items.*.subtotal_discounts.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_order_item_subtotal_discounts', $this->company_id)],
+            'items.*.subtotal_discounts.*.sequence' => ['required', 'integer', 'min:1'],
+            'items.*.subtotal_discounts.*.discount_type' => ['required', Rule::enum(DiscountTypeEnum::class)],
+            'items.*.subtotal_discounts.*.discount_value' => ['required', 'numeric', 'min:0'],
+            'items.*.vat_profile_id' => ['present', 'nullable', 'integer', new ExistsForCompany('vat_profiles', $this->company_id)],
+            'items.*.vat_rate' => ['required', 'numeric', 'min:0', 'max:100'],
+            'items.*.vat_base_numerator' => ['required', 'integer', 'min:1'],
+            'items.*.vat_base_denominator' => ['required', 'integer', 'min:1'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_down_payment_ids' => ['present', 'array'],
+            'delete_down_payment_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_order_down_payments', $this->company_id)],
+            'down_payments' => ['present', 'array'],
+            'down_payments.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_order_down_payments', $this->company_id)],
+            'down_payments.*.code' => ['required', 'string', 'max:255'],
+            'down_payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'down_payments.*.cash_account_id' => ['required', 'integer', 'bail', new ExistsForCompany('cash_accounts', $this->company_id), new IsValidCashAccount($this->branch_id)],
+            'down_payments.*.amount' => ['required', 'numeric', 'min:0'],
+            'down_payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_refunded_down_payment_ids' => ['present', 'array'],
+            'delete_refunded_down_payment_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_order_down_payment_refunds', $this->company_id)],
+            'refunded_down_payments' => [
+                'present',
+                'array',
+                function (string $attribute, mixed $value, \Closure $fail) {
+                    $downPaymentsTotal = (float) collect($this->input('down_payments', []))->sum(function ($row) {
+                        return max((float) ($row['amount'] ?? 0), 0);
+                    });
+                    $refundedDownPaymentsTotal = (float) collect(is_array($value) ? $value : [])->sum(function ($row) {
+                        return max((float) ($row['amount'] ?? 0), 0);
+                    });
+                    $purchaseOrder = $this->route('purchase_order');
+                    $remainingAllocatedDownPaymentTotal = 0;
+
+                    if ($purchaseOrder) {
+                        $deleteDownPaymentIds = collect($this->input('delete_down_payment_ids', []))
+                            ->filter(fn ($id) => ! is_null($id))
+                            ->map(fn ($id) => (int) $id)
+                            ->values();
+
+                        $remainingAllocatedDownPaymentTotal = (float) $purchaseOrder->downPayments()
+                            ->when(
+                                $deleteDownPaymentIds->isNotEmpty(),
+                                fn ($query) => $query->whereNotIn('id', $deleteDownPaymentIds->all())
+                            )
+                            ->get()
+                            ->sum('amount_allocated');
+                    }
+
+                    $maxRefundableAmount = max($downPaymentsTotal - $remainingAllocatedDownPaymentTotal, 0);
+
+                    if ($refundedDownPaymentsTotal > $maxRefundableAmount) {
+                        $fail(trans('rules.purchase_order.exceed_available_down_payment'));
+                    }
+                },
+            ],
+            'refunded_down_payments.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_order_down_payment_refunds', $this->company_id)],
+            'refunded_down_payments.*.code' => ['required', 'string', 'max:255'],
+            'refunded_down_payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'refunded_down_payments.*.cash_account_id' => ['required', 'integer', 'bail', new ExistsForCompany('cash_accounts', $this->company_id), new IsValidCashAccount($this->branch_id)],
+            'refunded_down_payments.*.amount' => ['required', 'numeric', 'min:0'],
+            'refunded_down_payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.purchase_order.company_id'),
+            'branch_id' => trans('validation_attributes.purchase_order.branch_id'),
+            'code' => trans('validation_attributes.purchase_order.code'),
+            'date' => trans('validation_attributes.purchase_order.date'),
+            'due_days' => trans('validation_attributes.purchase_order.due_days'),
+            'supplier_id' => trans('validation_attributes.purchase_order.supplier_id'),
+            'remarks' => trans('validation_attributes.purchase_order.remarks'),
+            'rounding' => trans('validation_attributes.purchase_order.rounding'),
+
+            'global_discounts.*.sequence' => trans('validation_attributes.purchase_order_global_discount.sequence'),
+            'global_discounts.*.discount_type' => trans('validation_attributes.purchase_order_global_discount.discount_type'),
+            'global_discounts.*.discount_value' => trans('validation_attributes.purchase_order_global_discount.discount_value'),
+
+            'items.*.qty' => trans('validation_attributes.purchase_order_item.qty'),
+            'items.*.product_unit_id' => trans('validation_attributes.purchase_order_item.product_unit_id'),
+            'items.*.product_unit_conversion_value' => trans('validation_attributes.purchase_order_item.product_unit_conversion_value'),
+            'items.*.product_unit_price' => trans('validation_attributes.purchase_order_item.product_unit_price'),
+            'items.*.product_unit_is_price_include_vat' => trans('validation_attributes.purchase_order_item.product_unit_is_price_include_vat'),
+            'items.*.vat_profile_id' => trans('validation_attributes.purchase_order_item.vat_profile_id'),
+            'items.*.vat_rate' => trans('validation_attributes.purchase_order_item.vat_rate'),
+            'items.*.vat_base_numerator' => trans('validation_attributes.purchase_order_item.vat_base_numerator'),
+            'items.*.vat_base_denominator' => trans('validation_attributes.purchase_order_item.vat_base_denominator'),
+            'items.*.remarks' => trans('validation_attributes.purchase_order_item.remarks'),
+
+            'down_payments.*.code' => trans('validation_attributes.purchase_order_down_payment.code'),
+            'down_payments.*.date' => trans('validation_attributes.purchase_order_down_payment.date'),
+            'down_payments.*.cash_account_id' => trans('validation_attributes.purchase_order_down_payment.cash_account_id'),
+            'down_payments.*.amount' => trans('validation_attributes.purchase_order_down_payment.amount'),
+            'down_payments.*.remarks' => trans('validation_attributes.purchase_order_down_payment.remarks'),
+
+            'refunded_down_payments.*.code' => trans('validation_attributes.purchase_order_down_payment_refund.code'),
+            'refunded_down_payments.*.date' => trans('validation_attributes.purchase_order_down_payment_refund.date'),
+            'refunded_down_payments.*.cash_account_id' => trans('validation_attributes.purchase_order_down_payment_refund.cash_account_id'),
+            'refunded_down_payments.*.amount' => trans('validation_attributes.purchase_order_down_payment_refund.amount'),
+            'refunded_down_payments.*.remarks' => trans('validation_attributes.purchase_order_down_payment_refund.remarks'),
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = $this->input('items', []);
+            $productUnitIds = collect($items)
+                ->pluck('product_unit_id')
+                ->filter(fn ($productUnitId) => is_numeric($productUnitId))
+                ->map(fn ($productUnitId) => (int) $productUnitId)
+                ->unique()
+                ->values();
+
+            if ($productUnitIds->isNotEmpty()) {
+                $productIdsByProductUnitId = ProductUnit::query()
+                    ->whereIn('id', $productUnitIds)
+                    ->pluck('product_id', 'id')
+                    ->map(fn ($productId) => (int) $productId)
+                    ->all();
+
+                $seenProductIds = [];
+                foreach ($items as $index => $item) {
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (! is_numeric($productUnitId)) {
+                        continue;
+                    }
+
+                    $productId = $productIdsByProductUnitId[(int) $productUnitId] ?? null;
+                    if (is_null($productId)) {
+                        continue;
+                    }
+
+                    if (isset($seenProductIds[$productId])) {
+                        $validator->errors()->add("items.$index.product_unit_id", trans('rules.purchase_order.duplicate_product'));
+
+                        continue;
+                    }
+
+                    $seenProductIds[$productId] = true;
+                }
+            }
+
+            $purchaseOrder = $this->route('purchase_order');
+            $code = $this->input('code');
+
+            if (
+                ! empty($code)
+                && $code !== config('dcslab.KEYWORDS.AUTO')
+                && PurchaseOrder::where('company_id', $this->company_id)
+                    ->where('code', $code)
+                    ->where('id', '<>', $purchaseOrder?->id)
+                    ->exists()
+            ) {
+                $validator->errors()->add('code', trans('rules.unique_code'));
+            }
+
+            $purchaseOrderItems = $purchaseOrder?->items()
+                ->with([
+                    'productUnitPriceDiscounts:id,purchase_order_item_id',
+                    'subtotalDiscounts:id,purchase_order_item_id',
+                ])
+                ->get()
+                ->keyBy('id') ?? collect();
+            $purchaseOrderItemIds = $purchaseOrderItems->keys()->all();
+            $purchaseOrderGlobalDiscountIds = $purchaseOrder?->globalDiscounts()->pluck('id')->all() ?? [];
+            $purchaseOrderDownPaymentIds = $purchaseOrder?->downPayments()->pluck('id')->all() ?? [];
+            $purchaseOrderRefundedDownPaymentIds = $purchaseOrder?->refundedDownPayments()->pluck('id')->all() ?? [];
+
+            foreach ($this->input('delete_global_discount_ids', []) as $index => $discountId) {
+                if (! in_array($discountId, $purchaseOrderGlobalDiscountIds, true)) {
+                    $validator->errors()->add(
+                        "delete_global_discount_ids.$index",
+                        trans('rules.purchase_order.invalid_global_discount_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('global_discounts', []) as $index => $discount) {
+                $discountId = $discount['id'] ?? null;
+
+                if (! is_null($discountId) && ! in_array($discountId, $purchaseOrderGlobalDiscountIds, true)) {
+                    $validator->errors()->add(
+                        "global_discounts.$index.id",
+                        trans('rules.purchase_order.invalid_global_discount_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('delete_item_ids', []) as $index => $deleteItemId) {
+                if (! in_array($deleteItemId, $purchaseOrderItemIds, true)) {
+                    $validator->errors()->add(
+                        "delete_item_ids.$index",
+                        trans('rules.purchase_order.invalid_delete_item_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('items', []) as $index => $item) {
+                $itemId = $item['id'] ?? null;
+                $purchaseOrderItem = ! is_null($itemId) ? $purchaseOrderItems->get($itemId) : null;
+
+                if (! is_null($itemId) && is_null($purchaseOrderItem)) {
+                    $validator->errors()->add(
+                        "items.$index.id",
+                        trans('rules.purchase_order.invalid_item_reference')
+                    );
+                }
+
+                $productUnitPriceDiscountIds = $purchaseOrderItem?->productUnitPriceDiscounts->pluck('id')->all() ?? [];
+                foreach ($item['delete_product_unit_price_discount_ids'] ?? [] as $discountIndex => $discountId) {
+                    if (! in_array($discountId, $productUnitPriceDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.delete_product_unit_price_discount_ids.$discountIndex",
+                            trans('rules.purchase_order.invalid_product_unit_price_discount_reference')
+                        );
+                    }
+                }
+
+                foreach ($item['product_unit_price_discounts'] ?? [] as $discountIndex => $discount) {
+                    $discountId = $discount['id'] ?? null;
+
+                    if (! is_null($discountId) && ! in_array($discountId, $productUnitPriceDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.product_unit_price_discounts.$discountIndex.id",
+                            trans('rules.purchase_order.invalid_product_unit_price_discount_reference')
+                        );
+                    }
+                }
+
+                $subtotalDiscountIds = $purchaseOrderItem?->subtotalDiscounts->pluck('id')->all() ?? [];
+                foreach ($item['delete_subtotal_discount_ids'] ?? [] as $discountIndex => $discountId) {
+                    if (! in_array($discountId, $subtotalDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.delete_subtotal_discount_ids.$discountIndex",
+                            trans('rules.purchase_order.invalid_subtotal_discount_reference')
+                        );
+                    }
+                }
+
+                foreach ($item['subtotal_discounts'] ?? [] as $discountIndex => $discount) {
+                    $discountId = $discount['id'] ?? null;
+
+                    if (! is_null($discountId) && ! in_array($discountId, $subtotalDiscountIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.subtotal_discounts.$discountIndex.id",
+                            trans('rules.purchase_order.invalid_subtotal_discount_reference')
+                        );
+                    }
+                }
+            }
+
+            foreach ($this->input('delete_down_payment_ids', []) as $index => $downPaymentId) {
+                if (! in_array($downPaymentId, $purchaseOrderDownPaymentIds, true)) {
+                    $validator->errors()->add(
+                        "delete_down_payment_ids.$index",
+                        trans('rules.purchase_order.invalid_down_payment_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('down_payments', []) as $index => $downPayment) {
+                $downPaymentId = $downPayment['id'] ?? null;
+
+                if (! is_null($downPaymentId) && ! in_array($downPaymentId, $purchaseOrderDownPaymentIds, true)) {
+                    $validator->errors()->add(
+                        "down_payments.$index.id",
+                        trans('rules.purchase_order.invalid_down_payment_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('delete_refunded_down_payment_ids', []) as $index => $refundedDownPaymentId) {
+                if (! in_array($refundedDownPaymentId, $purchaseOrderRefundedDownPaymentIds, true)) {
+                    $validator->errors()->add(
+                        "delete_refunded_down_payment_ids.$index",
+                        trans('rules.purchase_order.invalid_refunded_down_payment_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('refunded_down_payments', []) as $index => $refundedDownPayment) {
+                $refundedDownPaymentId = $refundedDownPayment['id'] ?? null;
+
+                if (! is_null($refundedDownPaymentId) && ! in_array($refundedDownPaymentId, $purchaseOrderRefundedDownPaymentIds, true)) {
+                    $validator->errors()->add(
+                        "refunded_down_payments.$index.id",
+                        trans('rules.purchase_order.invalid_refunded_down_payment_reference')
+                    );
+                }
+            }
+
+            $downPaymentCodesInRequest = [];
+            foreach ($this->input('down_payments', []) as $index => $downPayment) {
+                $downPaymentCode = $downPayment['code'] ?? null;
+                $downPaymentId = $downPayment['id'] ?? null;
+
+                if (empty($downPaymentCode) || $downPaymentCode === config('dcslab.KEYWORDS.AUTO')) {
+                    continue;
+                }
+
+                if (in_array($downPaymentCode, $downPaymentCodesInRequest, true)) {
+                    $validator->errors()->add("down_payments.$index.code", trans('rules.unique_code'));
+
+                    continue;
+                }
+
+                $downPaymentCodesInRequest[] = $downPaymentCode;
+
+                $downPaymentQuery = PurchaseOrderDownPayment::where('company_id', $this->company_id)
+                    ->where('code', $downPaymentCode);
+
+                if (! empty($downPaymentId)) {
+                    $downPaymentQuery->where('id', '<>', $downPaymentId);
+                }
+
+                if ($downPaymentQuery->exists()) {
+                    $validator->errors()->add("down_payments.$index.code", trans('rules.unique_code'));
+                }
+            }
+
+            $refundedDownPaymentCodesInRequest = [];
+            foreach ($this->input('refunded_down_payments', []) as $index => $refundedDownPayment) {
+                $refundedDownPaymentCode = $refundedDownPayment['code'] ?? null;
+                $refundedDownPaymentId = $refundedDownPayment['id'] ?? null;
+
+                if (empty($refundedDownPaymentCode) || $refundedDownPaymentCode === config('dcslab.KEYWORDS.AUTO')) {
+                    continue;
+                }
+
+                if (in_array($refundedDownPaymentCode, $refundedDownPaymentCodesInRequest, true)) {
+                    $validator->errors()->add("refunded_down_payments.$index.code", trans('rules.unique_code'));
+
+                    continue;
+                }
+
+                $refundedDownPaymentCodesInRequest[] = $refundedDownPaymentCode;
+
+                $refundedDownPaymentQuery = PurchaseOrderDownPaymentRefund::where('company_id', $this->company_id)
+                    ->where('code', $refundedDownPaymentCode);
+
+                if (! empty($refundedDownPaymentId)) {
+                    $refundedDownPaymentQuery->where('id', '<>', $refundedDownPaymentId);
+                }
+
+                if ($refundedDownPaymentQuery->exists()) {
+                    $validator->errors()->add("refunded_down_payments.$index.code", trans('rules.unique_code'));
+                }
+            }
+        });
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->route('purchase_order')?->company_id ?? null,
+            'branch_id' => $this->route('purchase_order')?->branch_id ?? null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+        ]);
+
+        if (is_array($this->input('global_discounts'))) {
+            $globalDiscounts = [];
+            foreach ($this->input('global_discounts') as $globalDiscount) {
+                if (array_key_exists('id', $globalDiscount) && ! is_null($globalDiscount['id'])) {
+                    $globalDiscount['id'] = HashidsHelper::decodeId($globalDiscount['id']);
+                }
+                $globalDiscounts[] = $globalDiscount;
+            }
+            $this->merge(['global_discounts' => $globalDiscounts]);
+        }
+
+        if (is_array($this->input('delete_global_discount_ids'))) {
+            $deleteGlobalDiscountIds = [];
+            foreach ($this->input('delete_global_discount_ids') as $id) {
+                $deleteGlobalDiscountIds[] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_global_discount_ids' => $deleteGlobalDiscountIds]);
+        }
+
+        if (is_array($this->input('items'))) {
+            $items = [];
+            foreach ($this->input('items') as $item) {
+                if (array_key_exists('id', $item) && ! is_null($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                if (array_key_exists('product_unit_id', $item) && ! is_null($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+                if (array_key_exists('vat_profile_id', $item) && ! is_null($item['vat_profile_id'])) {
+                    $item['vat_profile_id'] = HashidsHelper::decodeId($item['vat_profile_id']);
+                }
+                if (isset($item['product_unit_price_discounts']) && is_array($item['product_unit_price_discounts'])) {
+                    $priceDiscounts = [];
+                    foreach ($item['product_unit_price_discounts'] as $discount) {
+                        if (array_key_exists('id', $discount) && ! is_null($discount['id'])) {
+                            $discount['id'] = HashidsHelper::decodeId($discount['id']);
+                        }
+                        $priceDiscounts[] = $discount;
+                    }
+                    $item['product_unit_price_discounts'] = $priceDiscounts;
+                }
+                if (isset($item['subtotal_discounts']) && is_array($item['subtotal_discounts'])) {
+                    $subtotalDiscounts = [];
+                    foreach ($item['subtotal_discounts'] as $discount) {
+                        if (array_key_exists('id', $discount) && ! is_null($discount['id'])) {
+                            $discount['id'] = HashidsHelper::decodeId($discount['id']);
+                        }
+                        $subtotalDiscounts[] = $discount;
+                    }
+                    $item['subtotal_discounts'] = $subtotalDiscounts;
+                }
+                if (isset($item['delete_product_unit_price_discount_ids']) && is_array($item['delete_product_unit_price_discount_ids'])) {
+                    $deletePriceDiscountIds = [];
+                    foreach ($item['delete_product_unit_price_discount_ids'] as $id) {
+                        $deletePriceDiscountIds[] = HashidsHelper::decodeId($id);
+                    }
+                    $item['delete_product_unit_price_discount_ids'] = $deletePriceDiscountIds;
+                }
+                if (isset($item['delete_subtotal_discount_ids']) && is_array($item['delete_subtotal_discount_ids'])) {
+                    $deleteSubtotalDiscountIds = [];
+                    foreach ($item['delete_subtotal_discount_ids'] as $id) {
+                        $deleteSubtotalDiscountIds[] = HashidsHelper::decodeId($id);
+                    }
+                    $item['delete_subtotal_discount_ids'] = $deleteSubtotalDiscountIds;
+                }
+                $items[] = $item;
+            }
+            $this->merge(['items' => $items]);
+        }
+
+        if (is_array($this->input('delete_item_ids'))) {
+            $deleteItemIds = [];
+            foreach ($this->input('delete_item_ids') as $id) {
+                $deleteItemIds[] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_item_ids' => $deleteItemIds]);
+        }
+
+        if (is_array($this->input('down_payments'))) {
+            $downPayments = [];
+            foreach ($this->input('down_payments') as $downPayment) {
+                if (array_key_exists('id', $downPayment) && ! is_null($downPayment['id'])) {
+                    $downPayment['id'] = HashidsHelper::decodeId($downPayment['id']);
+                }
+                if (array_key_exists('cash_account_id', $downPayment) && ! is_null($downPayment['cash_account_id'])) {
+                    $downPayment['cash_account_id'] = HashidsHelper::decodeId($downPayment['cash_account_id']);
+                }
+                $downPayments[] = $downPayment;
+            }
+            $this->merge(['down_payments' => $downPayments]);
+        }
+
+        if (is_array($this->input('delete_down_payment_ids'))) {
+            $deleteDownPaymentIds = [];
+            foreach ($this->input('delete_down_payment_ids') as $id) {
+                $deleteDownPaymentIds[] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_down_payment_ids' => $deleteDownPaymentIds]);
+        }
+
+        if (is_array($this->input('refunded_down_payments'))) {
+            $refundedDownPayments = [];
+            foreach ($this->input('refunded_down_payments') as $refundedDownPayment) {
+                if (array_key_exists('id', $refundedDownPayment) && ! is_null($refundedDownPayment['id'])) {
+                    $refundedDownPayment['id'] = HashidsHelper::decodeId($refundedDownPayment['id']);
+                }
+                if (array_key_exists('cash_account_id', $refundedDownPayment) && ! is_null($refundedDownPayment['cash_account_id'])) {
+                    $refundedDownPayment['cash_account_id'] = HashidsHelper::decodeId($refundedDownPayment['cash_account_id']);
+                }
+                $refundedDownPayments[] = $refundedDownPayment;
+            }
+            $this->merge(['refunded_down_payments' => $refundedDownPayments]);
+        }
+
+        if (is_array($this->input('delete_refunded_down_payment_ids'))) {
+            $deleteRefundedDownPaymentIds = [];
+            foreach ($this->input('delete_refunded_down_payment_ids') as $id) {
+                $deleteRefundedDownPaymentIds[] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_refunded_down_payment_ids' => $deleteRefundedDownPaymentIds]);
+        }
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseReceipt/PurchaseReceiptStoreRequest.php b/api/app/Http/Requests/PurchaseReceipt/PurchaseReceiptStoreRequest.php
new file mode 100644
index 000000000..f4d47b869
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseReceipt/PurchaseReceiptStoreRequest.php
@@ -0,0 +1,186 @@
+<?php
+
+namespace App\Http\Requests\PurchaseReceipt;
+
+use App\Enums\PurchaseReceiptModeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\Purchase;
+use App\Models\PurchaseReceipt;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use App\Rules\IsValidWarehouse;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseReceiptStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) return false;
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', PurchaseReceipt::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+            'purchase_id' => $this->filled('purchase_id') ? HashidsHelper::decodeId($this->purchase_id) : null,
+            'warehouse_id' => $this->filled('warehouse_id') ? HashidsHelper::decodeId($this->warehouse_id) : null,
+            'items' => collect($this->items ?? [])->map(function ($item) {
+                $item['product_unit_id'] = ! empty($item['product_unit_id']) ? HashidsHelper::decodeId($item['product_unit_id']) : null;
+
+                return $item;
+            })->all(),
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'supplier_id' => ['required', 'integer', 'bail', new ExistsForCompany('suppliers', $this->company_id), new IsValidSupplier($this->company_id)],
+            'purchase_id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchases', $this->company_id)],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'warehouse_id' => ['required', 'integer', 'bail', new ExistsForCompany('warehouses', $this->company_id), new IsValidWarehouse($this->company_id, false)],
+            'remarks' => ['present', 'nullable', 'string'],
+            'is_posted' => ['required', 'boolean'],
+
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.qty' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'gt:0'],
+            'items.*.remarks' => ['present', 'nullable', 'string'],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.serial' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = $this->input('items', []);
+            $productUnitIds = collect($items)
+                ->pluck('product_unit_id')
+                ->filter(fn ($productUnitId) => is_numeric($productUnitId))
+                ->map(fn ($productUnitId) => (int) $productUnitId)
+                ->unique()
+                ->values();
+
+            if ($productUnitIds->isNotEmpty()) {
+                $productIdsByProductUnitId = ProductUnit::query()
+                    ->whereIn('id', $productUnitIds)
+                    ->pluck('product_id', 'id')
+                    ->map(fn ($productId) => (int) $productId)
+                    ->all();
+
+                $seenProductIds = [];
+                foreach ($items as $index => $item) {
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (! is_numeric($productUnitId)) {
+                        continue;
+                    }
+
+                    $productId = $productIdsByProductUnitId[(int) $productUnitId] ?? null;
+                    if (is_null($productId)) {
+                        continue;
+                    }
+
+                    if (isset($seenProductIds[$productId])) {
+                        $validator->errors()->add("items.$index.product_unit_id", trans('rules.purchase_receipt.duplicate_product'));
+
+                        continue;
+                    }
+
+                    $seenProductIds[$productId] = true;
+                }
+            }
+
+            $purchaseId = $this->input('purchase_id');
+
+            if (! is_null($purchaseId)) {
+                $purchase = Purchase::with(['items', 'receipts'])->find($purchaseId);
+                if (! is_null($purchase)) {
+                    if ($purchase->receipt_mode === PurchaseReceiptModeEnum::DIRECT) {
+                        $validator->errors()->add('purchase_id', trans('rules.purchase_receipt.direct_mode_is_managed_from_purchase'));
+                    }
+
+                    if ((int) $this->input('supplier_id') !== (int) $purchase->supplier_id) {
+                        $validator->errors()->add('supplier_id', trans('rules.purchase_receipt.supplier_must_match_purchase'));
+                    }
+
+                    if ((int) $this->input('branch_id') !== (int) $purchase->branch_id) {
+                        $validator->errors()->add('branch_id', trans('rules.purchase_receipt.branch_must_match_purchase'));
+                    }
+                }
+            }
+
+            foreach (($validator->getData()['items'] ?? []) as $index => $item) {
+                $productUnitId = $item['product_unit_id'] ?? null;
+                $qty = $item['qty'] ?? null;
+                $conversionValue = $item['product_unit_conversion_value'] ?? null;
+                $serials = $item['serials'] ?? [];
+
+                if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                    continue;
+                }
+
+                $product = ProductUnit::with('product')->find($productUnitId)?->product;
+                if (! $product?->is_use_serial_number) {
+                    continue;
+                }
+
+                $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                if (str_contains($normalizedBaseQty, '.')) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_base_qty_must_be_integer'));
+
+                    continue;
+                }
+
+                $serialValues = collect(is_array($serials) ? $serials : [])
+                    ->pluck('serial')
+                    ->values();
+                if ($serialValues->count() !== $serialValues->unique()->count()) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.purchase_receipt.duplicate_serial'));
+                }
+
+                $serialCount = (string) count(is_array($serials) ? $serials : []);
+                if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_count_must_match_base_qty'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => 'company',
+            'branch_id' => 'branch',
+            'supplier_id' => 'supplier',
+            'purchase_id' => 'purchase',
+            'code' => 'code',
+            'date' => 'date',
+            'warehouse_id' => 'warehouse',
+            'remarks' => 'remarks',
+            'is_posted' => 'is posted',
+            'items.*.qty' => 'qty',
+            'items.*.product_unit_id' => 'product unit',
+            'items.*.product_unit_conversion_value' => 'product unit conversion value',
+            'items.*.remarks' => 'remarks',
+            'items.*.serials' => 'serials',
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/PurchaseReceipt/PurchaseReceiptUpdateRequest.php b/api/app/Http/Requests/PurchaseReceipt/PurchaseReceiptUpdateRequest.php
new file mode 100644
index 000000000..76f6e846d
--- /dev/null
+++ b/api/app/Http/Requests/PurchaseReceipt/PurchaseReceiptUpdateRequest.php
@@ -0,0 +1,253 @@
+<?php
+
+namespace App\Http\Requests\PurchaseReceipt;
+
+use App\Enums\PurchaseReceiptModeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\Purchase;
+use App\Models\PurchaseReceipt;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidSupplier;
+use App\Rules\IsValidWarehouse;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class PurchaseReceiptUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) return false;
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('update', $this->route('purchase_receipt'));
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'supplier_id' => $this->filled('supplier_id') ? HashidsHelper::decodeId($this->supplier_id) : null,
+            'purchase_id' => $this->filled('purchase_id') ? HashidsHelper::decodeId($this->purchase_id) : null,
+            'warehouse_id' => $this->filled('warehouse_id') ? HashidsHelper::decodeId($this->warehouse_id) : null,
+            'delete_item_ids' => collect($this->delete_item_ids ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all(),
+            'items' => collect($this->items ?? [])->map(function ($item) {
+                $item['id'] = ! empty($item['id']) ? HashidsHelper::decodeId($item['id']) : null;
+                $item['product_unit_id'] = ! empty($item['product_unit_id']) ? HashidsHelper::decodeId($item['product_unit_id']) : null;
+                $item['delete_serial_ids'] = collect($item['delete_serial_ids'] ?? [])->map(fn ($id) => HashidsHelper::decodeId($id))->all();
+                $item['serials'] = collect($item['serials'] ?? [])->map(function ($serial) {
+                    $serial['id'] = ! empty($serial['id']) ? HashidsHelper::decodeId($serial['id']) : null;
+
+                    return $serial;
+                })->all();
+
+                return $item;
+            })->all(),
+        ]);
+    }
+
+    public function rules()
+    {
+        /** @var PurchaseReceipt $purchaseReceipt */
+        $purchaseReceipt = $this->route('purchase_receipt');
+
+        return [
+            'supplier_id' => ['required', 'integer', 'bail', new ExistsForCompany('suppliers', $purchaseReceipt->company_id), new IsValidSupplier($purchaseReceipt->company_id)],
+            'purchase_id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchases', $purchaseReceipt->company_id)],
+            'code' => ['required', 'string'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'warehouse_id' => ['required', 'integer', 'bail', new ExistsForCompany('warehouses', $purchaseReceipt->company_id), new IsValidWarehouse($purchaseReceipt->company_id, false)],
+            'remarks' => ['present', 'nullable', 'string'],
+            'is_posted' => ['required', 'boolean'],
+
+            'delete_item_ids' => ['present', 'array'],
+            'delete_item_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_receipt_items', $purchaseReceipt->company_id)],
+
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_receipt_items', $purchaseReceipt->company_id)],
+            'items.*.qty' => ['required', 'numeric', 'gt:0'],
+            'items.*.product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $purchaseReceipt->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'gt:0'],
+            'items.*.remarks' => ['present', 'nullable', 'string'],
+
+            'items.*.delete_serial_ids' => ['present', 'array'],
+            'items.*.delete_serial_ids.*' => ['required', 'integer', new ExistsForCompany('purchase_receipt_item_serials', $purchaseReceipt->company_id)],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('purchase_receipt_item_serials', $purchaseReceipt->company_id)],
+            'items.*.serials.*.serial' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $items = $this->input('items', []);
+            $productUnitIds = collect($items)
+                ->pluck('product_unit_id')
+                ->filter(fn ($productUnitId) => is_numeric($productUnitId))
+                ->map(fn ($productUnitId) => (int) $productUnitId)
+                ->unique()
+                ->values();
+
+            if ($productUnitIds->isNotEmpty()) {
+                $productIdsByProductUnitId = ProductUnit::query()
+                    ->whereIn('id', $productUnitIds)
+                    ->pluck('product_id', 'id')
+                    ->map(fn ($productId) => (int) $productId)
+                    ->all();
+
+                $seenProductIds = [];
+                foreach ($items as $index => $item) {
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (! is_numeric($productUnitId)) {
+                        continue;
+                    }
+
+                    $productId = $productIdsByProductUnitId[(int) $productUnitId] ?? null;
+                    if (is_null($productId)) {
+                        continue;
+                    }
+
+                    if (isset($seenProductIds[$productId])) {
+                        $validator->errors()->add("items.$index.product_unit_id", trans('rules.purchase_receipt.duplicate_product'));
+
+                        continue;
+                    }
+
+                    $seenProductIds[$productId] = true;
+                }
+            }
+
+            /** @var PurchaseReceipt $purchaseReceipt */
+            $purchaseReceipt = $this->route('purchase_receipt');
+            $purchaseId = $this->input('purchase_id');
+            $purchaseReceiptItems = $purchaseReceipt->items()
+                ->with('serials:id,purchase_receipt_item_id')
+                ->get()
+                ->keyBy('id');
+            $purchaseReceiptItemIds = $purchaseReceiptItems->keys()->all();
+
+            if ($purchaseReceipt->is_from_direct_purchase) {
+                $validator->errors()->add('purchase_id', trans('rules.purchase_receipt.direct_mode_is_managed_from_purchase'));
+
+                return;
+            }
+
+            if (! is_null($purchaseId)) {
+                $purchase = Purchase::with(['items', 'receipts'])->find($purchaseId);
+                if (! is_null($purchase)) {
+                    if ($purchase->receipt_mode === PurchaseReceiptModeEnum::DIRECT) {
+                        $validator->errors()->add('purchase_id', trans('rules.purchase_receipt.direct_mode_is_managed_from_purchase'));
+                    }
+
+                    if ((int) $this->input('supplier_id') !== (int) $purchase->supplier_id) {
+                        $validator->errors()->add('supplier_id', trans('rules.purchase_receipt.supplier_must_match_purchase'));
+                    }
+
+                    if ((int) $purchaseReceipt->branch_id !== (int) $purchase->branch_id) {
+                        $validator->errors()->add('purchase_id', trans('rules.purchase_receipt.purchase_branch_must_match_receipt_branch'));
+                    }
+                }
+            }
+
+            foreach ($this->input('delete_item_ids', []) as $index => $deleteItemId) {
+                if (! in_array($deleteItemId, $purchaseReceiptItemIds, true)) {
+                    $validator->errors()->add(
+                        "delete_item_ids.$index",
+                        trans('rules.purchase_receipt.invalid_delete_item_reference')
+                    );
+                }
+            }
+
+            foreach ($this->input('items', []) as $index => $item) {
+                $itemId = $item['id'] ?? null;
+                $purchaseReceiptItem = ! is_null($itemId) ? $purchaseReceiptItems->get($itemId) : null;
+
+                if (! is_null($itemId) && is_null($purchaseReceiptItem)) {
+                    $validator->errors()->add(
+                        "items.$index.id",
+                        trans('rules.purchase_receipt.invalid_item_reference')
+                    );
+                }
+
+                $purchaseReceiptItemSerialIds = $purchaseReceiptItem?->serials->pluck('id')->all() ?? [];
+                foreach ($item['delete_serial_ids'] ?? [] as $serialIndex => $serialId) {
+                    if (! in_array($serialId, $purchaseReceiptItemSerialIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.delete_serial_ids.$serialIndex",
+                            trans('rules.purchase_receipt.invalid_serial_reference')
+                        );
+                    }
+                }
+
+                foreach ($item['serials'] ?? [] as $serialIndex => $serial) {
+                    $serialId = $serial['id'] ?? null;
+
+                    if (! is_null($serialId) && ! in_array($serialId, $purchaseReceiptItemSerialIds, true)) {
+                        $validator->errors()->add(
+                            "items.$index.serials.$serialIndex.id",
+                            trans('rules.purchase_receipt.invalid_serial_reference')
+                        );
+                    }
+                }
+            }
+
+            foreach (($validator->getData()['items'] ?? []) as $index => $item) {
+                $productUnitId = $item['product_unit_id'] ?? null;
+                $qty = $item['qty'] ?? null;
+                $conversionValue = $item['product_unit_conversion_value'] ?? null;
+                $serials = $item['serials'] ?? [];
+
+                if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                    continue;
+                }
+
+                $product = ProductUnit::with('product')->find($productUnitId)?->product;
+                if (! $product?->is_use_serial_number) {
+                    continue;
+                }
+
+                $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                if (str_contains($normalizedBaseQty, '.')) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_base_qty_must_be_integer'));
+
+                    continue;
+                }
+
+                $serialValues = collect(is_array($serials) ? $serials : [])
+                    ->pluck('serial')
+                    ->values();
+                if ($serialValues->count() !== $serialValues->unique()->count()) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.purchase_receipt.duplicate_serial'));
+                }
+
+                $serialCount = (string) count(is_array($serials) ? $serials : []);
+                if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_count_must_match_base_qty'));
+                }
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return [
+            'supplier_id' => 'supplier',
+            'purchase_id' => 'purchase',
+            'code' => 'code',
+            'date' => 'date',
+            'warehouse_id' => 'warehouse',
+            'remarks' => 'remarks',
+            'is_posted' => 'is posted',
+            'items.*.qty' => 'qty',
+            'items.*.product_unit_id' => 'product unit',
+            'items.*.product_unit_conversion_value' => 'product unit conversion value',
+            'items.*.remarks' => 'remarks',
+            'items.*.delete_serial_ids' => 'delete serial ids',
+            'items.*.serials' => 'serials',
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/Receivable/ReceivableStoreRequest.php b/api/app/Http/Requests/Receivable/ReceivableStoreRequest.php
new file mode 100644
index 000000000..64ca3d09e
--- /dev/null
+++ b/api/app/Http/Requests/Receivable/ReceivableStoreRequest.php
@@ -0,0 +1,146 @@
+<?php
+
+namespace App\Http\Requests\Receivable;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Receivable;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class ReceivableStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Receivable::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+            'customer_id' => $this->filled('customer_id') ? HashidsHelper::decodeId($this->customer_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'category_id' => [
+                'required',
+                'integer',
+                Rule::exists('receivable_categories', 'id')->where(function ($query) {
+                    $query->where('company_id', $this->company_id)
+                        ->whereNull('deleted_at');
+                }),
+            ],
+            'customer_id' => ['required', 'integer', new ExistsForCompany('customers', $this->company_id)],
+            'cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'direct_amount_received' => ['required', 'numeric', 'min:0'],
+            'opening_amount_due' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'payments' => ['present', 'array'],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $directAmountReceived = (float) $this->input('direct_amount_received', 0);
+            $openingAmountDue = (float) $this->input('opening_amount_due', 0);
+            $amountTotal = $directAmountReceived + $openingAmountDue;
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+            $customerId = $this->input('customer_id');
+            $cashAccountId = $this->input('cash_account_id');
+
+            if (! filled($customerId)) {
+                $validator->errors()->add('customer_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.receivable.customer_id'),
+                ]));
+            }
+
+            if ($amountTotal <= 0) {
+                $validator->errors()->add('form', trans('rules.receivable.amount_total_must_be_positive'));
+            }
+
+            if ($directAmountReceived > 0 && ! filled($cashAccountId)) {
+                $validator->errors()->add('cash_account_id', trans('rules.receivable.cash_account_is_required_for_direct_amount_received'));
+            }
+
+            if ($directAmountReceived <= 0 && filled($cashAccountId)) {
+                $validator->errors()->add('direct_amount_received', trans('rules.receivable.direct_amount_received_is_required_for_cash_account'));
+            }
+
+            if ($paymentTotal > $amountTotal) {
+                $validator->errors()->add('payments', trans('rules.receivable.payments_exceed_total_receivable'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.receivable'),
+            [
+                'payments.*.code' => trans('validation_attributes.receivable_payment.code'),
+                'payments.*.date' => trans('validation_attributes.receivable_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.receivable_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.receivable_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.receivable_payment.remarks'),
+            ],
+        );
+    }
+}
diff --git a/api/app/Http/Requests/Receivable/ReceivableUpdateRequest.php b/api/app/Http/Requests/Receivable/ReceivableUpdateRequest.php
new file mode 100644
index 000000000..4f04e1f97
--- /dev/null
+++ b/api/app/Http/Requests/Receivable/ReceivableUpdateRequest.php
@@ -0,0 +1,178 @@
+<?php
+
+namespace App\Http\Requests\Receivable;
+
+use App\Helpers\HashidsHelper;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class ReceivableUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $receivable = $this->route('receivable');
+
+        return $user->can('update', $receivable);
+    }
+
+    public function prepareForValidation()
+    {
+        $receivable = $this->route('receivable');
+        $deletePaymentIds = collect($this->input('delete_payment_ids', []))
+            ->map(fn ($id) => HashidsHelper::decodeId($id))
+            ->all();
+
+        $this->merge([
+            'company_id' => $receivable->company_id,
+            'branch_id' => $receivable->branch_id,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+            'customer_id' => $this->filled('customer_id') ? HashidsHelper::decodeId($this->customer_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+            'delete_payment_ids' => $deletePaymentIds,
+        ]);
+
+        if (is_array($this->input('payments'))) {
+            $payments = [];
+            foreach ($this->input('payments') as $payment) {
+                if (is_array($payment) && array_key_exists('id', $payment) && ! is_null($payment['id'])) {
+                    $payment['id'] = HashidsHelper::decodeId($payment['id']);
+                }
+
+                if (is_array($payment) && array_key_exists('cash_account_id', $payment) && ! is_null($payment['cash_account_id'])) {
+                    $payment['cash_account_id'] = HashidsHelper::decodeId($payment['cash_account_id']);
+                }
+
+                $payments[] = $payment;
+            }
+
+            $this->merge(['payments' => $payments]);
+        }
+    }
+
+    public function rules()
+    {
+        $receivable = $this->route('receivable');
+
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'category_id' => ['required', 'integer', new ExistsForCompany('receivable_categories', $this->company_id)],
+            'customer_id' => ['required', 'integer', new ExistsForCompany('customers', $this->company_id)],
+            'cash_account_id' => [
+                'present',
+                'nullable',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'direct_amount_received' => ['required', 'numeric', 'min:0'],
+            'opening_amount_due' => ['required', 'numeric', 'min:0'],
+            'due_days' => ['required', 'integer', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_payment_ids' => ['present', 'array'],
+            'delete_payment_ids.*' => [
+                'required',
+                'integer',
+                'distinct',
+                Rule::exists('receivable_payments', 'id')->where(function ($query) use ($receivable) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('receivable_id', $receivable->id);
+                }),
+            ],
+
+            'payments' => ['present', 'array'],
+            'payments.*.id' => [
+                'present',
+                'nullable',
+                'integer',
+                Rule::exists('receivable_payments', 'id')->where(function ($query) use ($receivable) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('receivable_id', $receivable->id);
+                }),
+            ],
+            'payments.*.code' => ['required', 'string', 'max:255'],
+            'payments.*.date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'payments.*.cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'payments.*.amount' => ['required', 'numeric', 'gt:0'],
+            'payments.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $directAmountReceived = (float) $this->input('direct_amount_received', 0);
+            $openingAmountDue = (float) $this->input('opening_amount_due', 0);
+            $amountTotal = $directAmountReceived + $openingAmountDue;
+            $paymentTotal = collect($this->input('payments', []))
+                ->sum(fn (array $payment) => (float) ($payment['amount'] ?? 0));
+            $customerId = $this->input('customer_id');
+            $cashAccountId = $this->input('cash_account_id');
+
+            if (! filled($customerId)) {
+                $validator->errors()->add('customer_id', trans('validation.required', [
+                    'attribute' => trans('validation_attributes.receivable.customer_id'),
+                ]));
+            }
+
+            if ($amountTotal <= 0) {
+                $validator->errors()->add('form', trans('rules.receivable.amount_total_must_be_positive'));
+            }
+
+            if ($directAmountReceived > 0 && ! filled($cashAccountId)) {
+                $validator->errors()->add('cash_account_id', trans('rules.receivable.cash_account_is_required_for_direct_amount_received'));
+            }
+
+            if ($directAmountReceived <= 0 && filled($cashAccountId)) {
+                $validator->errors()->add('direct_amount_received', trans('rules.receivable.direct_amount_received_is_required_for_cash_account'));
+            }
+
+            if ($paymentTotal > $amountTotal) {
+                $validator->errors()->add('payments', trans('rules.receivable.payments_exceed_total_receivable'));
+            }
+        });
+    }
+
+    public function attributes()
+    {
+        return array_merge(
+            trans('validation_attributes.receivable'),
+            [
+                'payments.*.id' => trans('validation_attributes.receivable_payment.id'),
+                'payments.*.code' => trans('validation_attributes.receivable_payment.code'),
+                'payments.*.date' => trans('validation_attributes.receivable_payment.date'),
+                'payments.*.cash_account_id' => trans('validation_attributes.receivable_payment.cash_account_id'),
+                'payments.*.amount' => trans('validation_attributes.receivable_payment.amount'),
+                'payments.*.remarks' => trans('validation_attributes.receivable_payment.remarks'),
+            ],
+        );
+    }
+
+    public function messages()
+    {
+        return [
+            'delete_payment_ids.*.exists' => trans('rules.receivable.invalid_payment_reference'),
+            'payments.*.id.exists' => trans('rules.receivable.invalid_payment_reference'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/ReceivableCategory/ReceivableCategoryStoreRequest.php b/api/app/Http/Requests/ReceivableCategory/ReceivableCategoryStoreRequest.php
new file mode 100644
index 000000000..21e08ec9f
--- /dev/null
+++ b/api/app/Http/Requests/ReceivableCategory/ReceivableCategoryStoreRequest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests\ReceivableCategory;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ReceivableCategory;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class ReceivableCategoryStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', ReceivableCategory::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'sequence' => ['required', 'integer', 'min:0'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.receivable_category');
+    }
+}
diff --git a/api/app/Http/Requests/ReceivableCategory/ReceivableCategoryUpdateRequest.php b/api/app/Http/Requests/ReceivableCategory/ReceivableCategoryUpdateRequest.php
new file mode 100644
index 000000000..408b5723d
--- /dev/null
+++ b/api/app/Http/Requests/ReceivableCategory/ReceivableCategoryUpdateRequest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests\ReceivableCategory;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class ReceivableCategoryUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $receivableCategory = $this->route('receivable_category');
+
+        return $user->can('update', $receivableCategory);
+    }
+
+    public function prepareForValidation()
+    {
+        $receivableCategory = $this->route('receivable_category');
+
+        $this->merge([
+            'company_id' => $receivableCategory?->company_id,
+        ]);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer'],
+            'code' => ['required', 'string'],
+            'name' => ['required', 'string', 'max:255'],
+            'sequence' => ['required', 'integer', 'min:0'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.receivable_category');
+    }
+}
diff --git a/api/app/Http/Requests/ReceivablePayment/ReceivablePaymentStoreRequest.php b/api/app/Http/Requests/ReceivablePayment/ReceivablePaymentStoreRequest.php
new file mode 100644
index 000000000..a570fba16
--- /dev/null
+++ b/api/app/Http/Requests/ReceivablePayment/ReceivablePaymentStoreRequest.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Http\Requests\ReceivablePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\Receivable;
+use App\Models\ReceivablePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class ReceivablePaymentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', ReceivablePayment::class);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'receivable_id' => $this->filled('receivable_id') ? HashidsHelper::decodeId($this->receivable_id) : null,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        $receivable = $this->filled('receivable_id')
+            ? Receivable::find($this->input('receivable_id'))
+            : null;
+
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->company_id, true)],
+            'receivable_id' => [
+                'required',
+                'integer',
+                Rule::exists('receivables', 'id')->where(function ($query) {
+                    $query->where('company_id', $this->company_id)
+                        ->where('branch_id', $this->branch_id)
+                        ->whereNull('deleted_at');
+                }),
+            ],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => [
+                'required',
+                'numeric',
+                'gt:0',
+                function (string $attribute, mixed $value, \Closure $fail) use ($receivable): void {
+                    if (! $receivable || is_null($value)) {
+                        return;
+                    }
+
+                    $maxAmount = (float) $receivable->amount_due;
+
+                    if ((float) $value > $maxAmount) {
+                        $fail(trans('validation.max.numeric', [
+                            'attribute' => trans('validation_attributes.receivable_payment.amount'),
+                            'max' => $maxAmount,
+                        ]));
+                    }
+                },
+            ],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.receivable_payment');
+    }
+
+    public function messages()
+    {
+        return [
+            'receivable_id.exists' => trans('rules.receivable_payment.invalid_receivable_reference'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/ReceivablePayment/ReceivablePaymentUpdateRequest.php b/api/app/Http/Requests/ReceivablePayment/ReceivablePaymentUpdateRequest.php
new file mode 100644
index 000000000..128acb27f
--- /dev/null
+++ b/api/app/Http/Requests/ReceivablePayment/ReceivablePaymentUpdateRequest.php
@@ -0,0 +1,86 @@
+<?php
+
+namespace App\Http\Requests\ReceivablePayment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ReceivablePayment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidCashAccount;
+use App\Rules\IsValidDate;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class ReceivablePaymentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $receivablePayment = $this->route('receivable_payment');
+
+        return $user->can('update', $receivablePayment);
+    }
+
+    public function prepareForValidation()
+    {
+        $receivablePayment = $this->route('receivable_payment');
+
+        $this->merge([
+            'company_id' => $receivablePayment->company_id,
+            'branch_id' => $receivablePayment->branch_id,
+            'receivable_id' => $receivablePayment->receivable_id,
+            'cash_account_id' => $this->filled('cash_account_id') ? HashidsHelper::decodeId($this->cash_account_id) : null,
+        ]);
+    }
+
+    public function rules()
+    {
+        /** @var ReceivablePayment $receivablePayment */
+        $receivablePayment = $this->route('receivable_payment');
+
+        return [
+            'company_id' => ['required', 'integer'],
+            'branch_id' => ['required', 'integer'],
+            'receivable_id' => ['required', 'integer', new ExistsForCompany('receivables', $this->company_id)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'cash_account_id' => [
+                'required',
+                'integer',
+                'bail',
+                new ExistsForCompany('cash_accounts', $this->company_id),
+                new IsValidCashAccount($this->branch_id),
+            ],
+            'amount' => [
+                'required',
+                'numeric',
+                'gt:0',
+                function (string $attribute, mixed $value, \Closure $fail) use ($receivablePayment): void {
+                    $receivable = $receivablePayment->receivable;
+                    if (! $receivable || is_null($value)) {
+                        return;
+                    }
+
+                    $maxAmount = (float) $receivable->amount_due + (float) $receivablePayment->amount;
+
+                    if ((float) $value > $maxAmount) {
+                        $fail(trans('validation.max.numeric', [
+                            'attribute' => trans('validation_attributes.receivable_payment.amount'),
+                            'max' => $maxAmount,
+                        ]));
+                    }
+                },
+            ],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return trans('validation_attributes.receivable_payment');
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustment/StockAdjustmentStoreRequest.php b/api/app/Http/Requests/StockAdjustment/StockAdjustmentStoreRequest.php
new file mode 100644
index 000000000..847d75990
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustment/StockAdjustmentStoreRequest.php
@@ -0,0 +1,267 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockAdjustment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidWarehouse;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockAdjustment::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'category_id' => ['required', 'integer', new ExistsForCompany('stock_adjustment_categories', $this->company_id)],
+            'in_warehouse_id' => ['present', 'nullable', 'integer', 'required_without:out_warehouse_id', new IsValidWarehouse($this->company_id, false)],
+            'out_warehouse_id' => ['present', 'nullable', 'integer', 'required_without:in_warehouse_id', new IsValidWarehouse($this->company_id, false)],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+
+            'in_items' => ['array', 'required_with:in_warehouse_id'],
+            'in_items.*.qty' => ['required', 'numeric', 'min:1'],
+            'in_items.*.product_unit_id' => ['required', 'integer', 'distinct', new ExistsForCompany('product_units', $this->company_id)],
+            'in_items.*.product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'in_items.*.product_unit_cogs' => ['required', 'numeric', 'min:0'],
+            'in_items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'in_items.*.serials' => ['present', 'array'],
+            'in_items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+
+            'out_items' => ['array', 'required_with:out_warehouse_id'],
+            'out_items.*.qty' => ['required', 'numeric', 'min:1'],
+            'out_items.*.product_unit_id' => ['required', 'integer', 'distinct', new ExistsForCompany('product_units', $this->company_id)],
+            'out_items.*.product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'out_items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'out_items.*.serials' => ['present', 'array'],
+            'out_items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment.company_id'),
+            'branch_id' => trans('validation_attributes.stock_adjustment.branch_id'),
+            'code' => trans('validation_attributes.stock_adjustment.code'),
+            'date' => trans('validation_attributes.stock_adjustment.date'),
+            'category_id' => trans('validation_attributes.stock_adjustment.category_id'),
+            'in_warehouse_id' => trans('validation_attributes.stock_adjustment.in_warehouse_id'),
+            'out_warehouse_id' => trans('validation_attributes.stock_adjustment.out_warehouse_id'),
+            'remarks' => trans('validation_attributes.stock_adjustment.remarks'),
+            'is_posted' => trans('validation_attributes.stock_adjustment.is_posted'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'in_warehouse_id' => $this->filled('in_warehouse_id') ? HashidsHelper::decodeId($this->in_warehouse_id) : null,
+            'out_warehouse_id' => $this->filled('out_warehouse_id') ? HashidsHelper::decodeId($this->out_warehouse_id) : null,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+        ]);
+
+        if (is_array($this->input('in_items'))) {
+            $inItems = [];
+            foreach ($this->input('in_items') as $item) {
+                if (isset($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+                $inItems[] = $item;
+            }
+            $this->merge(['in_items' => $inItems]);
+        }
+
+        if (is_array($this->input('out_items'))) {
+            $outItems = [];
+            foreach ($this->input('out_items') as $item) {
+                if (isset($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+                $outItems[] = $item;
+            }
+            $this->merge(['out_items' => $outItems]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $hasInitialErrors = $validator->errors()->isNotEmpty();
+
+            $inItems = $validator->getData()['in_items'] ?? [];
+            $inItems = is_array($inItems) ? $inItems : [];
+            if (! $hasInitialErrors && is_array($inItems) && ! empty($inItems)) {
+                $inItemUnits = ProductUnit::with('product')
+                    ->whereIn('id', collect($inItems)->pluck('product_unit_id')->filter()->unique()->values()->all())
+                    ->get()
+                    ->keyBy('id');
+
+                foreach ($inItems as $i => $item) {
+                    if (! is_array($item)) {
+                        continue;
+                    }
+
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (empty($productUnitId)) {
+                        continue;
+                    }
+
+                    $product = $inItemUnits->get((int) $productUnitId)?->product;
+                    if ($product?->is_use_serial_number) {
+                        $qty = $item['qty'] ?? null;
+                        $conversionValue = $item['product_unit_conversion_value'] ?? null;
+                        if (! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                            continue;
+                        }
+
+                        $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                        $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                        if (str_contains($normalizedBaseQty, '.')) {
+                            $validator->errors()->add('in_items.'.$i.'.serials', trans('validation.stock_adjustment_in_item.base_qty_must_be_integer'));
+
+                            continue;
+                        }
+
+                        $serialCount = (string) count($item['serials'] ?? []);
+                        if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                            $validator->errors()->add('in_items.'.$i.'.serials', trans('validation.stock_adjustment_in_item.serial_count_not_match_qty'));
+                        }
+                    }
+                }
+            }
+
+            $outItems = $validator->getData()['out_items'] ?? [];
+            $outItems = is_array($outItems) ? $outItems : [];
+            if (! $hasInitialErrors && is_array($outItems) && ! empty($outItems)) {
+                $outItemUnits = ProductUnit::with('product')
+                    ->whereIn('id', collect($outItems)->pluck('product_unit_id')->filter()->unique()->values()->all())
+                    ->get()
+                    ->keyBy('id');
+
+                foreach ($outItems as $i => $item) {
+                    if (! is_array($item)) {
+                        continue;
+                    }
+
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (empty($productUnitId)) {
+                        continue;
+                    }
+
+                    $product = $outItemUnits->get((int) $productUnitId)?->product;
+                    if ($product?->is_use_serial_number) {
+                        $qty = $item['qty'] ?? null;
+                        $conversionValue = $item['product_unit_conversion_value'] ?? null;
+                        if (! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                            continue;
+                        }
+
+                        $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                        $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                        if (str_contains($normalizedBaseQty, '.')) {
+                            $validator->errors()->add('out_items.'.$i.'.serials', trans('validation.stock_adjustment_out_item.base_qty_must_be_integer'));
+
+                            continue;
+                        }
+
+                        $serialCount = (string) count($item['serials'] ?? []);
+                        if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                            $validator->errors()->add('out_items.'.$i.'.serials', trans('validation.stock_adjustment_out_item.serial_count_not_match_qty'));
+                        }
+                    }
+                }
+            }
+
+            $inWarehouseId = $validator->getData()['in_warehouse_id'] ?? null;
+            $outWarehouseId = $validator->getData()['out_warehouse_id'] ?? null;
+            if (
+                empty($inWarehouseId) || empty($outWarehouseId) ||
+                (int) $inWarehouseId !== (int) $outWarehouseId ||
+                empty($inItems) || empty($outItems)
+            ) {
+                return;
+            }
+
+            $allProductUnitIds = collect($inItems)->pluck('product_unit_id')
+                ->concat(collect($outItems)->pluck('product_unit_id'))
+                ->filter()
+                ->unique()
+                ->values()
+                ->all();
+
+            $productUnitProductIds = ProductUnit::whereIn('id', $allProductUnitIds)
+                ->pluck('product_id', 'id')
+                ->map(fn ($productId) => (int) $productId)
+                ->all();
+
+            $inProductIdsByIndex = [];
+            foreach ($inItems as $i => $item) {
+                $productUnitId = $item['product_unit_id'] ?? null;
+                if (empty($productUnitId) || ! isset($productUnitProductIds[$productUnitId])) {
+                    continue;
+                }
+
+                $inProductIdsByIndex[$i] = $productUnitProductIds[$productUnitId];
+            }
+
+            $outProductIdsByIndex = [];
+            foreach ($outItems as $i => $item) {
+                $productUnitId = $item['product_unit_id'] ?? null;
+                if (empty($productUnitId) || ! isset($productUnitProductIds[$productUnitId])) {
+                    continue;
+                }
+
+                $outProductIdsByIndex[$i] = $productUnitProductIds[$productUnitId];
+            }
+
+            $duplicateProductIds = array_unique(array_intersect(
+                array_values($inProductIdsByIndex),
+                array_values($outProductIdsByIndex)
+            ));
+
+            foreach ($inProductIdsByIndex as $i => $productId) {
+                if (in_array($productId, $duplicateProductIds, true)) {
+                    $validator->errors()->add(
+                        'in_items.'.$i.'.product_unit_id',
+                        trans('validation.stock_adjustment.same_warehouse_same_product_not_allowed')
+                    );
+                }
+            }
+
+            foreach ($outProductIdsByIndex as $i => $productId) {
+                if (in_array($productId, $duplicateProductIds, true)) {
+                    $validator->errors()->add(
+                        'out_items.'.$i.'.product_unit_id',
+                        trans('validation.stock_adjustment.same_warehouse_same_product_not_allowed')
+                    );
+                }
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustment/StockAdjustmentUpdateRequest.php b/api/app/Http/Requests/StockAdjustment/StockAdjustmentUpdateRequest.php
new file mode 100644
index 000000000..9cb751072
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustment/StockAdjustmentUpdateRequest.php
@@ -0,0 +1,442 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustment;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockAdjustment;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidWarehouse;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $stockAdjustment = $this->route('stock_adjustment');
+
+        return $user->can('update', StockAdjustment::class, $stockAdjustment) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'category_id' => ['required', 'integer', new ExistsForCompany('stock_adjustment_categories', $this->company_id)],
+            'in_warehouse_id' => ['present', 'nullable', 'integer', 'required_without:out_warehouse_id', new IsValidWarehouse($this->company_id, false)],
+            'out_warehouse_id' => ['present', 'nullable', 'integer', 'required_without:in_warehouse_id', new IsValidWarehouse($this->company_id, false)],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+
+            'delete_in_item_ids' => ['present', 'array'],
+            'delete_in_item_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('stock_adjustment_in_items', $this->company_id)],
+            'in_items' => ['array', 'required_with:in_warehouse_id'],
+            'in_items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_adjustment_in_items', $this->company_id)],
+            'in_items.*.qty' => ['required', 'numeric', 'min:1'],
+            'in_items.*.product_unit_id' => ['required', 'integer', 'distinct', new ExistsForCompany('product_units', $this->company_id)],
+            'in_items.*.product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'in_items.*.product_unit_cogs' => ['required', 'numeric', 'min:0'],
+            'in_items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'in_items.*.delete_serial_ids' => ['present', 'array'],
+            'in_items.*.delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('stock_adjustment_in_item_serials', $this->company_id)],
+            'in_items.*.serials' => ['present', 'array'],
+            'in_items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_adjustment_in_item_serials', $this->company_id)],
+            'in_items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+
+            'delete_out_item_ids' => ['present', 'array'],
+            'delete_out_item_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('stock_adjustment_out_items', $this->company_id)],
+            'out_items' => ['array', 'required_with:out_warehouse_id'],
+            'out_items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_adjustment_out_items', $this->company_id)],
+            'out_items.*.qty' => ['required', 'numeric', 'min:1'],
+            'out_items.*.product_unit_id' => ['required', 'integer', 'distinct', new ExistsForCompany('product_units', $this->company_id)],
+            'out_items.*.product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'out_items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'out_items.*.delete_serial_ids' => ['present', 'array'],
+            'out_items.*.delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('stock_adjustment_out_item_serials', $this->company_id)],
+            'out_items.*.serials' => ['present', 'array'],
+            'out_items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_adjustment_out_item_serials', $this->company_id)],
+            'out_items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment.company_id'),
+            'branch_id' => trans('validation_attributes.stock_adjustment.branch_id'),
+            'code' => trans('validation_attributes.stock_adjustment.code'),
+            'date' => trans('validation_attributes.stock_adjustment.date'),
+            'category_id' => trans('validation_attributes.stock_adjustment.category_id'),
+            'in_warehouse_id' => trans('validation_attributes.stock_adjustment.in_warehouse_id'),
+            'out_warehouse_id' => trans('validation_attributes.stock_adjustment.out_warehouse_id'),
+            'remarks' => trans('validation_attributes.stock_adjustment.remarks'),
+            'is_posted' => trans('validation_attributes.stock_adjustment.is_posted'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'in_warehouse_id' => $this->filled('in_warehouse_id') ? HashidsHelper::decodeId($this->in_warehouse_id) : null,
+            'out_warehouse_id' => $this->filled('out_warehouse_id') ? HashidsHelper::decodeId($this->out_warehouse_id) : null,
+            'category_id' => $this->filled('category_id') ? HashidsHelper::decodeId($this->category_id) : null,
+        ]);
+
+        if (is_array($this->input('delete_in_item_ids'))) {
+            $deleteInItemIds = [];
+            foreach ($this->input('delete_in_item_ids') as $deleteInItemId) {
+                $deleteInItemIds[] = HashidsHelper::decodeId($deleteInItemId);
+            }
+            $this->merge(['delete_in_item_ids' => $deleteInItemIds]);
+        }
+
+        if (is_array($this->input('in_items'))) {
+            $inItems = [];
+            foreach ($this->input('in_items') as $item) {
+                if (! empty($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                if (isset($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+
+                if (array_key_exists('delete_serial_ids', $item) && is_array($item['delete_serial_ids'])) {
+                    $deleteSerialIds = [];
+                    foreach ($item['delete_serial_ids'] as $deleteSerialId) {
+                        $deleteSerialIds[] = HashidsHelper::decodeId($deleteSerialId);
+                    }
+                    $item['delete_serial_ids'] = $deleteSerialIds;
+                }
+
+                if (array_key_exists('serials', $item) && is_array($item['serials'])) {
+                    $serials = [];
+                    foreach ($item['serials'] as $serialItem) {
+                        if (! empty($serialItem['id'])) {
+                            $serialItem['id'] = HashidsHelper::decodeId($serialItem['id']);
+                        }
+                        $serials[] = $serialItem;
+                    }
+                    $item['serials'] = $serials;
+                }
+
+                $inItems[] = $item;
+            }
+            $this->merge(['in_items' => $inItems]);
+        }
+
+        if (is_array($this->input('delete_out_item_ids'))) {
+            $deleteOutItemIds = [];
+            foreach ($this->input('delete_out_item_ids') as $deleteOutItemId) {
+                $deleteOutItemIds[] = HashidsHelper::decodeId($deleteOutItemId);
+            }
+            $this->merge(['delete_out_item_ids' => $deleteOutItemIds]);
+        }
+
+        if (is_array($this->input('out_items'))) {
+            $outItems = [];
+            foreach ($this->input('out_items') as $item) {
+                if (! empty($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                if (isset($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+
+                if (array_key_exists('delete_serial_ids', $item) && is_array($item['delete_serial_ids'])) {
+                    $deleteSerialIds = [];
+                    foreach ($item['delete_serial_ids'] as $deleteSerialId) {
+                        $deleteSerialIds[] = HashidsHelper::decodeId($deleteSerialId);
+                    }
+                    $item['delete_serial_ids'] = $deleteSerialIds;
+                }
+
+                if (array_key_exists('serials', $item) && is_array($item['serials'])) {
+                    $serials = [];
+                    foreach ($item['serials'] as $serialItem) {
+                        if (! empty($serialItem['id'])) {
+                            $serialItem['id'] = HashidsHelper::decodeId($serialItem['id']);
+                        }
+                        $serials[] = $serialItem;
+                    }
+                    $item['serials'] = $serials;
+                }
+
+                $outItems[] = $item;
+            }
+            $this->merge(['out_items' => $outItems]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            $hasInitialErrors = $validator->errors()->isNotEmpty();
+
+            $inItems = $validator->getData()['in_items'] ?? [];
+            $inItems = is_array($inItems) ? $inItems : [];
+            if (! $hasInitialErrors && is_array($inItems) && ! empty($inItems)) {
+                $inItemUnits = ProductUnit::with('product')
+                    ->whereIn('id', collect($inItems)->pluck('product_unit_id')->filter()->unique()->values()->all())
+                    ->get()
+                    ->keyBy('id');
+
+                foreach ($inItems as $i => $item) {
+                    if (! is_array($item)) {
+                        continue;
+                    }
+
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (empty($productUnitId)) {
+                        continue;
+                    }
+
+                    $product = $inItemUnits->get((int) $productUnitId)?->product;
+                    if ($product?->is_use_serial_number) {
+                        $qty = $item['qty'] ?? null;
+                        $conversionValue = $item['product_unit_conversion_value'] ?? null;
+                        if (! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                            continue;
+                        }
+
+                        $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                        $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                        if (str_contains($normalizedBaseQty, '.')) {
+                            $validator->errors()->add('in_items.'.$i.'.serials', trans('validation.stock_adjustment_in_item.base_qty_must_be_integer'));
+
+                            continue;
+                        }
+
+                        $serialCount = (string) count($item['serials'] ?? []);
+                        if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                            $validator->errors()->add('in_items.'.$i.'.serials', trans('validation.stock_adjustment_in_item.serial_count_not_match_qty'));
+                        }
+                    }
+                }
+            }
+
+            $outItems = $validator->getData()['out_items'] ?? [];
+            $outItems = is_array($outItems) ? $outItems : [];
+            if (! $hasInitialErrors && is_array($outItems) && ! empty($outItems)) {
+                $outItemUnits = ProductUnit::with('product')
+                    ->whereIn('id', collect($outItems)->pluck('product_unit_id')->filter()->unique()->values()->all())
+                    ->get()
+                    ->keyBy('id');
+
+                foreach ($outItems as $i => $item) {
+                    if (! is_array($item)) {
+                        continue;
+                    }
+
+                    $productUnitId = $item['product_unit_id'] ?? null;
+                    if (empty($productUnitId)) {
+                        continue;
+                    }
+
+                    $product = $outItemUnits->get((int) $productUnitId)?->product;
+                    if ($product?->is_use_serial_number) {
+                        $qty = $item['qty'] ?? null;
+                        $conversionValue = $item['product_unit_conversion_value'] ?? null;
+                        if (! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                            continue;
+                        }
+
+                        $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                        $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                        if (str_contains($normalizedBaseQty, '.')) {
+                            $validator->errors()->add('out_items.'.$i.'.serials', trans('validation.stock_adjustment_out_item.base_qty_must_be_integer'));
+
+                            continue;
+                        }
+
+                        $serialCount = (string) count($item['serials'] ?? []);
+                        if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                            $validator->errors()->add('out_items.'.$i.'.serials', trans('validation.stock_adjustment_out_item.serial_count_not_match_qty'));
+                        }
+                    }
+                }
+            }
+
+            $inWarehouseId = $validator->getData()['in_warehouse_id'] ?? null;
+            $outWarehouseId = $validator->getData()['out_warehouse_id'] ?? null;
+            if (
+                empty($inWarehouseId) || empty($outWarehouseId) ||
+                (int) $inWarehouseId !== (int) $outWarehouseId ||
+                empty($inItems) || empty($outItems)
+            ) {
+                return;
+            }
+
+            $allProductUnitIds = collect($inItems)->pluck('product_unit_id')
+                ->concat(collect($outItems)->pluck('product_unit_id'))
+                ->filter()
+                ->unique()
+                ->values()
+                ->all();
+
+            $productUnitProductIds = ProductUnit::whereIn('id', $allProductUnitIds)
+                ->pluck('product_id', 'id')
+                ->map(fn ($productId) => (int) $productId)
+                ->all();
+
+            $inProductIdsByIndex = [];
+            foreach ($inItems as $i => $item) {
+                $productUnitId = $item['product_unit_id'] ?? null;
+                if (empty($productUnitId) || ! isset($productUnitProductIds[$productUnitId])) {
+                    continue;
+                }
+
+                $inProductIdsByIndex[$i] = $productUnitProductIds[$productUnitId];
+            }
+
+            $outProductIdsByIndex = [];
+            foreach ($outItems as $i => $item) {
+                $productUnitId = $item['product_unit_id'] ?? null;
+                if (empty($productUnitId) || ! isset($productUnitProductIds[$productUnitId])) {
+                    continue;
+                }
+
+                $outProductIdsByIndex[$i] = $productUnitProductIds[$productUnitId];
+            }
+
+            $duplicateProductIds = array_unique(array_intersect(
+                array_values($inProductIdsByIndex),
+                array_values($outProductIdsByIndex)
+            ));
+
+            foreach ($inProductIdsByIndex as $i => $productId) {
+                if (in_array($productId, $duplicateProductIds, true)) {
+                    $validator->errors()->add(
+                        'in_items.'.$i.'.product_unit_id',
+                        trans('validation.stock_adjustment.same_warehouse_same_product_not_allowed')
+                    );
+                }
+            }
+
+            foreach ($outProductIdsByIndex as $i => $productId) {
+                if (in_array($productId, $duplicateProductIds, true)) {
+                    $validator->errors()->add(
+                        'out_items.'.$i.'.product_unit_id',
+                        trans('validation.stock_adjustment.same_warehouse_same_product_not_allowed')
+                    );
+                }
+            }
+
+            $stockAdjustment = $this->route('stock_adjustment');
+            if (! $stockAdjustment instanceof StockAdjustment) {
+                return;
+            }
+
+            $stockAdjustment->loadMissing('inItems.serials', 'outItems.serials');
+
+            $allowedInItemIds = $stockAdjustment->inItems->pluck('id')->map(fn ($id) => (int) $id)->all();
+            $allowedOutItemIds = $stockAdjustment->outItems->pluck('id')->map(fn ($id) => (int) $id)->all();
+            $allowedInSerialIdsByItemId = $stockAdjustment->inItems
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('id')->map(fn ($id) => (int) $id)->all(),
+                ])
+                ->all();
+            $allowedOutSerialIdsByItemId = $stockAdjustment->outItems
+                ->mapWithKeys(fn ($item) => [
+                    (int) $item->id => $item->serials->pluck('id')->map(fn ($id) => (int) $id)->all(),
+                ])
+                ->all();
+
+            foreach (($validator->getData()['delete_in_item_ids'] ?? []) as $i => $deleteInItemId) {
+                if (! empty($deleteInItemId) && ! in_array((int) $deleteInItemId, $allowedInItemIds, true)) {
+                    $validator->errors()->add('delete_in_item_ids.'.$i, trans('rules.stock_adjustment.invalid_in_item_reference'));
+                }
+            }
+
+            foreach ($inItems as $i => $item) {
+                if (! is_array($item)) {
+                    continue;
+                }
+
+                $itemId = $item['id'] ?? null;
+                $allowedSerialIds = [];
+
+                if (! empty($itemId)) {
+                    if (! in_array((int) $itemId, $allowedInItemIds, true)) {
+                        $validator->errors()->add('in_items.'.$i.'.id', trans('rules.stock_adjustment.invalid_in_item_reference'));
+                    } else {
+                        $allowedSerialIds = $allowedInSerialIdsByItemId[(int) $itemId] ?? [];
+                    }
+                }
+
+                foreach (($item['delete_serial_ids'] ?? []) as $j => $deleteSerialId) {
+                    if (! empty($deleteSerialId) && ! in_array((int) $deleteSerialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add('in_items.'.$i.'.delete_serial_ids.'.$j, trans('rules.stock_adjustment.invalid_in_item_serial_reference'));
+                    }
+                }
+
+                foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                    if (! is_array($serialItem)) {
+                        continue;
+                    }
+
+                    $serialId = $serialItem['id'] ?? null;
+                    if (! empty($serialId) && ! in_array((int) $serialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add('in_items.'.$i.'.serials.'.$j.'.id', trans('rules.stock_adjustment.invalid_in_item_serial_reference'));
+                    }
+                }
+            }
+
+            foreach (($validator->getData()['delete_out_item_ids'] ?? []) as $i => $deleteOutItemId) {
+                if (! empty($deleteOutItemId) && ! in_array((int) $deleteOutItemId, $allowedOutItemIds, true)) {
+                    $validator->errors()->add('delete_out_item_ids.'.$i, trans('rules.stock_adjustment.invalid_out_item_reference'));
+                }
+            }
+
+            foreach ($outItems as $i => $item) {
+                if (! is_array($item)) {
+                    continue;
+                }
+
+                $itemId = $item['id'] ?? null;
+                $allowedSerialIds = [];
+
+                if (! empty($itemId)) {
+                    if (! in_array((int) $itemId, $allowedOutItemIds, true)) {
+                        $validator->errors()->add('out_items.'.$i.'.id', trans('rules.stock_adjustment.invalid_out_item_reference'));
+                    } else {
+                        $allowedSerialIds = $allowedOutSerialIdsByItemId[(int) $itemId] ?? [];
+                    }
+                }
+
+                foreach (($item['delete_serial_ids'] ?? []) as $j => $deleteSerialId) {
+                    if (! empty($deleteSerialId) && ! in_array((int) $deleteSerialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add('out_items.'.$i.'.delete_serial_ids.'.$j, trans('rules.stock_adjustment.invalid_out_item_serial_reference'));
+                    }
+                }
+
+                foreach (($item['serials'] ?? []) as $j => $serialItem) {
+                    if (! is_array($serialItem)) {
+                        continue;
+                    }
+
+                    $serialId = $serialItem['id'] ?? null;
+                    if (! empty($serialId) && ! in_array((int) $serialId, $allowedSerialIds, true)) {
+                        $validator->errors()->add('out_items.'.$i.'.serials.'.$j.'.id', trans('rules.stock_adjustment.invalid_out_item_serial_reference'));
+                    }
+                }
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentCategory/StockAdjustmentCategoryStoreRequest.php b/api/app/Http/Requests/StockAdjustmentCategory/StockAdjustmentCategoryStoreRequest.php
new file mode 100644
index 000000000..8fa009990
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentCategory/StockAdjustmentCategoryStoreRequest.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentCategory;
+
+use App\Helpers\HashidsHelper;
+use App\Models\StockAdjustmentCategory;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentCategoryStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockAdjustmentCategory::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment_category.company'),
+            'code' => trans('validation_attributes.stock_adjustment_category.code'),
+            'name' => trans('validation_attributes.stock_adjustment_category.name'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentCategory/StockAdjustmentCategoryUpdateRequest.php b/api/app/Http/Requests/StockAdjustmentCategory/StockAdjustmentCategoryUpdateRequest.php
new file mode 100644
index 000000000..6ab441134
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentCategory/StockAdjustmentCategoryUpdateRequest.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentCategory;
+
+use App\Helpers\HashidsHelper;
+use App\Models\StockAdjustmentCategory;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentCategoryUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $stockAdjustmentCategory = $this->route('stock_adjustment_category');
+
+        return $user->can('update', StockAdjustmentCategory::class, $stockAdjustmentCategory);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment_category.company'),
+            'code' => trans('validation_attributes.stock_adjustment_category.code'),
+            'name' => trans('validation_attributes.stock_adjustment_category.name'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    protected function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentInItem/StockAdjustmentInItemStoreRequest.php b/api/app/Http/Requests/StockAdjustmentInItem/StockAdjustmentInItemStoreRequest.php
new file mode 100644
index 000000000..582cb73d2
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentInItem/StockAdjustmentInItemStoreRequest.php
@@ -0,0 +1,104 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentInItem;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockAdjustmentInItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentInItemStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockAdjustmentInItem::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_adjustment_id' => ['required', 'integer', new ExistsForCompany('stock_adjustments', $this->company_id)],
+            'qty' => ['required', 'numeric', 'min:1'],
+            'product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'product_unit_cogs' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'serials' => ['present', 'array'],
+            'serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment_in_item.company_id'),
+            'branch_id' => trans('validation_attributes.stock_adjustment_in_item.branch_id'),
+            'stock_adjustment_id' => trans('validation_attributes.stock_adjustment_in_item.stock_adjustment_id'),
+            'qty' => trans('validation_attributes.stock_adjustment_in_item.qty'),
+            'product_unit_id' => trans('validation_attributes.stock_adjustment_in_item.product_unit_id'),
+            'product_unit_conversion_value' => trans('validation_attributes.stock_adjustment_in_item.product_unit_conversion_value'),
+            'product_unit_cogs' => trans('validation_attributes.stock_adjustment_in_item.product_unit_cogs'),
+            'remarks' => trans('validation_attributes.stock_adjustment_in_item.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_adjustment_id' => $this->filled('stock_adjustment_id') ? HashidsHelper::decodeId($this->stock_adjustment_id) : null,
+            'product_unit_id' => $this->filled('product_unit_id') ? HashidsHelper::decodeId($this->product_unit_id) : null,
+        ]);
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $productUnitId = $validator->getData()['product_unit_id'] ?? null;
+            $qty = $validator->getData()['qty'] ?? null;
+            $conversionValue = $validator->getData()['product_unit_conversion_value'] ?? null;
+            $serials = $validator->getData()['serials'] ?? [];
+
+            if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                return;
+            }
+
+            $product = ProductUnit::with('product')->find($productUnitId)?->product;
+            if (! $product?->is_use_serial_number) {
+                return;
+            }
+
+            $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+            $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+            if (str_contains($normalizedBaseQty, '.')) {
+                $validator->errors()->add('serials', trans('validation.stock_adjustment_in_item.base_qty_must_be_integer'));
+
+                return;
+            }
+
+            $serialCount = (string) count(is_array($serials) ? $serials : []);
+            if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                $validator->errors()->add('serials', trans('validation.stock_adjustment_in_item.serial_count_not_match_qty'));
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentInItem/StockAdjustmentInItemUpdateRequest.php b/api/app/Http/Requests/StockAdjustmentInItem/StockAdjustmentInItemUpdateRequest.php
new file mode 100644
index 000000000..34617410b
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentInItem/StockAdjustmentInItemUpdateRequest.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentInItem;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockAdjustmentInItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentInItemUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $resource = $this->route('stock_adjustment_in_item');
+
+        return $user->can('update', StockAdjustmentInItem::class, $resource) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_adjustment_id' => ['required', 'integer', new ExistsForCompany('stock_adjustments', $this->company_id)],
+            'qty' => ['required', 'numeric', 'min:1'],
+            'product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'product_unit_cogs' => ['required', 'numeric', 'min:0'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_serial_ids' => ['present', 'array'],
+            'delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('stock_adjustment_in_item_serials', $this->company_id)],
+            'serials' => ['present', 'array'],
+            'serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_adjustment_in_item_serials', $this->company_id)],
+            'serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment_in_item.company_id'),
+            'branch_id' => trans('validation_attributes.stock_adjustment_in_item.branch_id'),
+            'stock_adjustment_id' => trans('validation_attributes.stock_adjustment_in_item.stock_adjustment_id'),
+            'qty' => trans('validation_attributes.stock_adjustment_in_item.qty'),
+            'product_unit_id' => trans('validation_attributes.stock_adjustment_in_item.product_unit_id'),
+            'product_unit_conversion_value' => trans('validation_attributes.stock_adjustment_in_item.product_unit_conversion_value'),
+            'product_unit_cogs' => trans('validation_attributes.stock_adjustment_in_item.product_unit_cogs'),
+            'remarks' => trans('validation_attributes.stock_adjustment_in_item.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_adjustment_id' => $this->filled('stock_adjustment_id') ? HashidsHelper::decodeId($this->stock_adjustment_id) : null,
+            'product_unit_id' => $this->filled('product_unit_id') ? HashidsHelper::decodeId($this->product_unit_id) : null,
+        ]);
+
+        if ($this->filled('delete_serial_ids')) {
+            $deleteSerialIds = $this->delete_serial_ids;
+            foreach ($deleteSerialIds as $index => $id) {
+                $deleteSerialIds[$index] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_serial_ids' => $deleteSerialIds]);
+        }
+
+        if (is_array($this->input('serials'))) {
+            $serials = [];
+            foreach ($this->input('serials') as $item) {
+                if (isset($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                $serials[] = $item;
+            }
+            $this->merge(['serials' => $serials]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $productUnitId = $validator->getData()['product_unit_id'] ?? null;
+            $qty = $validator->getData()['qty'] ?? null;
+            $conversionValue = $validator->getData()['product_unit_conversion_value'] ?? null;
+            $serials = $validator->getData()['serials'] ?? [];
+
+            if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                return;
+            }
+
+            $product = ProductUnit::with('product')->find($productUnitId)?->product;
+            if (! $product?->is_use_serial_number) {
+                return;
+            }
+
+            $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+            $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+            if (str_contains($normalizedBaseQty, '.')) {
+                $validator->errors()->add('serials', trans('validation.stock_adjustment_in_item.base_qty_must_be_integer'));
+
+                return;
+            }
+
+            $serialCount = (string) count(is_array($serials) ? $serials : []);
+            if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                $validator->errors()->add('serials', trans('validation.stock_adjustment_in_item.serial_count_not_match_qty'));
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialStoreRequest.php b/api/app/Http/Requests/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialStoreRequest.php
new file mode 100644
index 000000000..c8b97cc54
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialStoreRequest.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentInItemSerial;
+
+use App\Helpers\HashidsHelper;
+use App\Models\StockAdjustmentInItemSerial;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidStockAdjustmentInItem;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentInItemSerialStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockAdjustmentInItemSerial::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_adjustment_id' => ['required', 'integer', new ExistsForCompany('stock_adjustments', $this->company_id)],
+            'stock_adjustment_in_item_id' => ['required', 'integer', new IsValidStockAdjustmentInItem($this->company_id, $this->stock_adjustment_id)],
+            'serial' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment_in_item_serial.company_id'),
+            'branch_id' => trans('validation_attributes.stock_adjustment_in_item_serial.branch_id'),
+            'stock_adjustment_id' => trans('validation_attributes.stock_adjustment_in_item_serial.stock_adjustment_id'),
+            'stock_adjustment_in_item_id' => trans('validation_attributes.stock_adjustment_in_item_serial.stock_adjustment_in_item_id'),
+            'serial' => trans('validation_attributes.stock_adjustment_in_item_serial.serial'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_adjustment_id' => $this->filled('stock_adjustment_id') ? HashidsHelper::decodeId($this->stock_adjustment_id) : null,
+            'stock_adjustment_in_item_id' => $this->filled('stock_adjustment_in_item_id') ? HashidsHelper::decodeId($this->stock_adjustment_in_item_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialUpdateRequest.php b/api/app/Http/Requests/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialUpdateRequest.php
new file mode 100644
index 000000000..4bebec2b1
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentInItemSerial/StockAdjustmentInItemSerialUpdateRequest.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentInItemSerial;
+
+use App\Models\StockAdjustmentInItemSerial;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentInItemSerialUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $stockAdjustmentInItemSerial = $this->route('stock_adjustment_in_item_serial');
+
+        return $user->can('update', StockAdjustmentInItemSerial::class, $stockAdjustmentInItemSerial) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'serial' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'serial' => trans('validation_attributes.stock_adjustment_in_item_serial.serial'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentOutItem/StockAdjustmentOutItemStoreRequest.php b/api/app/Http/Requests/StockAdjustmentOutItem/StockAdjustmentOutItemStoreRequest.php
new file mode 100644
index 000000000..f3db41e23
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentOutItem/StockAdjustmentOutItemStoreRequest.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentOutItem;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockAdjustmentOutItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentOutItemStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockAdjustmentOutItem::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_adjustment_id' => ['required', 'integer', new ExistsForCompany('stock_adjustments', $this->company_id)],
+            'qty' => ['required', 'numeric', 'min:1'],
+            'product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'serials' => ['present', 'array'],
+            'serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment_out_item.company_id'),
+            'branch_id' => trans('validation_attributes.stock_adjustment_out_item.branch_id'),
+            'stock_adjustment_id' => trans('validation_attributes.stock_adjustment_out_item.stock_adjustment_id'),
+            'qty' => trans('validation_attributes.stock_adjustment_out_item.qty'),
+            'product_unit_id' => trans('validation_attributes.stock_adjustment_out_item.product_unit_id'),
+            'product_unit_conversion_value' => trans('validation_attributes.stock_adjustment_out_item.product_unit_conversion_value'),
+            'remarks' => trans('validation_attributes.stock_adjustment_out_item.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_adjustment_id' => $this->filled('stock_adjustment_id') ? HashidsHelper::decodeId($this->stock_adjustment_id) : null,
+            'product_unit_id' => $this->filled('product_unit_id') ? HashidsHelper::decodeId($this->product_unit_id) : null,
+        ]);
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $productUnitId = $validator->getData()['product_unit_id'] ?? null;
+            $qty = $validator->getData()['qty'] ?? null;
+            $conversionValue = $validator->getData()['product_unit_conversion_value'] ?? null;
+            $serials = $validator->getData()['serials'] ?? [];
+
+            if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                return;
+            }
+
+            $product = ProductUnit::with('product')->find($productUnitId)?->product;
+            if (! $product?->is_use_serial_number) {
+                return;
+            }
+
+            $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+            $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+            if (str_contains($normalizedBaseQty, '.')) {
+                $validator->errors()->add('serials', trans('validation.stock_adjustment_out_item.base_qty_must_be_integer'));
+
+                return;
+            }
+
+            $serialCount = (string) count(is_array($serials) ? $serials : []);
+            if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                $validator->errors()->add('serials', trans('validation.stock_adjustment_out_item.serial_count_not_match_qty'));
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentOutItem/StockAdjustmentOutItemUpdateRequest.php b/api/app/Http/Requests/StockAdjustmentOutItem/StockAdjustmentOutItemUpdateRequest.php
new file mode 100644
index 000000000..2c86e60e6
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentOutItem/StockAdjustmentOutItemUpdateRequest.php
@@ -0,0 +1,125 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentOutItem;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockAdjustmentOutItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentOutItemUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $resource = $this->route('stock_adjustment_out_item');
+
+        return $user->can('update', StockAdjustmentOutItem::class, $resource) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_adjustment_id' => ['required', 'integer', new ExistsForCompany('stock_adjustments', $this->company_id)],
+            'qty' => ['required', 'numeric', 'min:1'],
+            'product_unit_id' => ['required', 'integer', new ExistsForCompany('product_units', $this->company_id)],
+            'product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_serial_ids' => ['present', 'array'],
+            'delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('stock_adjustment_out_item_serials', $this->company_id)],
+            'serials' => ['present', 'array'],
+            'serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_adjustment_out_item_serials', $this->company_id)],
+            'serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment_out_item.company_id'),
+            'branch_id' => trans('validation_attributes.stock_adjustment_out_item.branch_id'),
+            'stock_adjustment_id' => trans('validation_attributes.stock_adjustment_out_item.stock_adjustment_id'),
+            'qty' => trans('validation_attributes.stock_adjustment_out_item.qty'),
+            'product_unit_id' => trans('validation_attributes.stock_adjustment_out_item.product_unit_id'),
+            'product_unit_conversion_value' => trans('validation_attributes.stock_adjustment_out_item.product_unit_conversion_value'),
+            'remarks' => trans('validation_attributes.stock_adjustment_out_item.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_adjustment_id' => $this->filled('stock_adjustment_id') ? HashidsHelper::decodeId($this->stock_adjustment_id) : null,
+            'product_unit_id' => $this->filled('product_unit_id') ? HashidsHelper::decodeId($this->product_unit_id) : null,
+        ]);
+
+        if ($this->filled('delete_serial_ids')) {
+            $deleteSerialIds = $this->delete_serial_ids;
+            foreach ($deleteSerialIds as $index => $id) {
+                $deleteSerialIds[$index] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_serial_ids' => $deleteSerialIds]);
+        }
+
+        if (is_array($this->input('serials'))) {
+            $serials = [];
+            foreach ($this->input('serials') as $item) {
+                if (isset($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                $serials[] = $item;
+            }
+            $this->merge(['serials' => $serials]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $productUnitId = $validator->getData()['product_unit_id'] ?? null;
+            $qty = $validator->getData()['qty'] ?? null;
+            $conversionValue = $validator->getData()['product_unit_conversion_value'] ?? null;
+            $serials = $validator->getData()['serials'] ?? [];
+
+            if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                return;
+            }
+
+            $product = ProductUnit::with('product')->find($productUnitId)?->product;
+            if (! $product?->is_use_serial_number) {
+                return;
+            }
+
+            $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+            $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+            if (str_contains($normalizedBaseQty, '.')) {
+                $validator->errors()->add('serials', trans('validation.stock_adjustment_out_item.base_qty_must_be_integer'));
+
+                return;
+            }
+
+            $serialCount = (string) count(is_array($serials) ? $serials : []);
+            if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                $validator->errors()->add('serials', trans('validation.stock_adjustment_out_item.serial_count_not_match_qty'));
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialStoreRequest.php b/api/app/Http/Requests/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialStoreRequest.php
new file mode 100644
index 000000000..f2fe76c61
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialStoreRequest.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentOutItemSerial;
+
+use App\Helpers\HashidsHelper;
+use App\Models\StockAdjustmentOutItemSerial;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidStockAdjustmentOutItem;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentOutItemSerialStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockAdjustmentOutItemSerial::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_adjustment_id' => ['required', 'integer', new ExistsForCompany('stock_adjustments', $this->company_id)],
+            'stock_adjustment_out_item_id' => ['required', 'integer', new IsValidStockAdjustmentOutItem($this->company_id, $this->stock_adjustment_id)],
+            'serial' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_adjustment_out_item_serial.company_id'),
+            'branch_id' => trans('validation_attributes.stock_adjustment_out_item_serial.branch_id'),
+            'stock_adjustment_id' => trans('validation_attributes.stock_adjustment_out_item_serial.stock_adjustment_id'),
+            'stock_adjustment_out_item_id' => trans('validation_attributes.stock_adjustment_out_item_serial.stock_adjustment_out_item_id'),
+            'serial' => trans('validation_attributes.stock_adjustment_out_item_serial.serial'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_adjustment_id' => $this->filled('stock_adjustment_id') ? HashidsHelper::decodeId($this->stock_adjustment_id) : null,
+            'stock_adjustment_out_item_id' => $this->filled('stock_adjustment_out_item_id') ? HashidsHelper::decodeId($this->stock_adjustment_out_item_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialUpdateRequest.php b/api/app/Http/Requests/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialUpdateRequest.php
new file mode 100644
index 000000000..4f5ee3af8
--- /dev/null
+++ b/api/app/Http/Requests/StockAdjustmentOutItemSerial/StockAdjustmentOutItemSerialUpdateRequest.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Requests\StockAdjustmentOutItemSerial;
+
+use App\Models\StockAdjustmentOutItemSerial;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockAdjustmentOutItemSerialUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $stockAdjustmentOutItemSerial = $this->route('stock_adjustment_out_item_serial');
+
+        return $user->can('update', StockAdjustmentOutItemSerial::class, $stockAdjustmentOutItemSerial) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'serial' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'serial' => trans('validation_attributes.stock_adjustment_out_item_serial.serial'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/StockTransfer/StockTransferStoreRequest.php b/api/app/Http/Requests/StockTransfer/StockTransferStoreRequest.php
new file mode 100644
index 000000000..6cde690df
--- /dev/null
+++ b/api/app/Http/Requests/StockTransfer/StockTransferStoreRequest.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace App\Http\Requests\StockTransfer;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockTransfer;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidWarehouse;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockTransferStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockTransfer::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'source_warehouse_id' => ['required', 'integer', new IsValidWarehouse($this->company_id, false)],
+            'destination_warehouse_id' => ['required', 'integer', 'different:source_warehouse_id', new IsValidWarehouse($this->company_id, false)],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.qty' => ['required', 'numeric', 'min:1'],
+            'items.*.product_unit_id' => ['required', 'integer', 'distinct', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_transfer.company_id'),
+            'branch_id' => trans('validation_attributes.stock_transfer.branch_id'),
+            'code' => trans('validation_attributes.stock_transfer.code'),
+            'date' => trans('validation_attributes.stock_transfer.date'),
+            'source_warehouse_id' => trans('validation_attributes.stock_transfer.source_warehouse_id'),
+            'destination_warehouse_id' => trans('validation_attributes.stock_transfer.destination_warehouse_id'),
+            'remarks' => trans('validation_attributes.stock_transfer.remarks'),
+            'is_posted' => trans('validation_attributes.stock_transfer.is_posted'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'source_warehouse_id' => $this->filled('source_warehouse_id') ? HashidsHelper::decodeId($this->source_warehouse_id) : null,
+            'destination_warehouse_id' => $this->filled('destination_warehouse_id') ? HashidsHelper::decodeId($this->destination_warehouse_id) : null,
+            'remarks' => $this->filled('remarks') ? $this['remarks'] : null,
+        ]);
+
+        if (is_array($this->input('items'))) {
+            $productUnits = [];
+            foreach ($this->input('items') as $item) {
+                if (isset($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+                $item['remarks'] = $item['remarks'] ?? null;
+                $item['serials'] = $item['serials'] ?? [];
+                $productUnits[] = $item;
+            }
+            $this->merge(['items' => $productUnits]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            foreach (($validator->getData()['items'] ?? []) as $index => $productUnit) {
+                $productUnitId = $productUnit['product_unit_id'] ?? null;
+                $qty = $productUnit['qty'] ?? null;
+                $conversionValue = $productUnit['product_unit_conversion_value'] ?? null;
+                $serials = $productUnit['serials'] ?? [];
+
+                if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                    continue;
+                }
+
+                $product = ProductUnit::with('product')->find($productUnitId)?->product;
+                if (! $product?->is_use_serial_number) {
+                    continue;
+                }
+
+                $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                if (str_contains($normalizedBaseQty, '.')) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_base_qty_must_be_integer'));
+
+                    continue;
+                }
+
+                $serialCount = (string) count(is_array($serials) ? $serials : []);
+                if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_count_must_match_base_qty'));
+                }
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockTransfer/StockTransferUpdateRequest.php b/api/app/Http/Requests/StockTransfer/StockTransferUpdateRequest.php
new file mode 100644
index 000000000..011ecc47a
--- /dev/null
+++ b/api/app/Http/Requests/StockTransfer/StockTransferUpdateRequest.php
@@ -0,0 +1,162 @@
+<?php
+
+namespace App\Http\Requests\StockTransfer;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockTransfer;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidDate;
+use App\Rules\IsValidWarehouse;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockTransferUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $stockTransfer = $this->route('stock_transfer');
+
+        return $user->can('update', StockTransfer::class, $stockTransfer) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'code' => ['required', 'string', 'max:255'],
+            'date' => ['required', 'string', new IsValidDate('Y-m-d H:i:s')],
+            'source_warehouse_id' => ['required', 'integer', new IsValidWarehouse($this->company_id, false)],
+            'destination_warehouse_id' => ['required', 'integer', 'different:source_warehouse_id', new IsValidWarehouse($this->company_id, false)],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'is_posted' => ['required', 'boolean'],
+
+            'delete_item_ids' => ['present', 'array'],
+            'delete_item_ids.*' => ['required', 'integer', new ExistsForCompany('stock_transfer_items', $this->company_id)],
+
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_transfer_items', $this->company_id)],
+            'items.*.qty' => ['required', 'numeric', 'min:1'],
+            'items.*.product_unit_id' => ['required', 'integer', 'distinct', new ExistsForCompany('product_units', $this->company_id)],
+            'items.*.product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'items.*.remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'items.*.delete_serial_ids' => ['present', 'array'],
+            'items.*.delete_serial_ids.*' => ['required', 'integer', new ExistsForCompany('stock_transfer_item_serials', $this->company_id)],
+            'items.*.serials' => ['present', 'array'],
+            'items.*.serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_transfer_item_serials', $this->company_id)],
+            'items.*.serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_transfer.company_id'),
+            'branch_id' => trans('validation_attributes.stock_transfer.branch_id'),
+            'code' => trans('validation_attributes.stock_transfer.code'),
+            'date' => trans('validation_attributes.stock_transfer.date'),
+            'source_warehouse_id' => trans('validation_attributes.stock_transfer.source_warehouse_id'),
+            'destination_warehouse_id' => trans('validation_attributes.stock_transfer.destination_warehouse_id'),
+            'remarks' => trans('validation_attributes.stock_transfer.remarks'),
+            'is_posted' => trans('validation_attributes.stock_transfer.is_posted'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'source_warehouse_id' => $this->filled('source_warehouse_id') ? HashidsHelper::decodeId($this->source_warehouse_id) : null,
+            'destination_warehouse_id' => $this->filled('destination_warehouse_id') ? HashidsHelper::decodeId($this->destination_warehouse_id) : null,
+        ]);
+
+        if (is_array($this->input('delete_item_ids'))) {
+            $deleteProductUnitIds = [];
+            foreach ($this->input('delete_item_ids') as $item) {
+                $deleteProductUnitIds[] = HashidsHelper::decodeId($item);
+            }
+            $this->merge(['delete_item_ids' => $deleteProductUnitIds]);
+        }
+
+        if (is_array($this->input('items'))) {
+            $productUnits = [];
+            foreach ($this->input('items') as $item) {
+                if (array_key_exists('id', $item) && ! is_null($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                if (isset($item['product_unit_id'])) {
+                    $item['product_unit_id'] = HashidsHelper::decodeId($item['product_unit_id']);
+                }
+                if (isset($item['delete_serial_ids']) && is_array($item['delete_serial_ids'])) {
+                    $deleteSerialIds = [];
+                    foreach ($item['delete_serial_ids'] as $serialId) {
+                        $deleteSerialIds[] = HashidsHelper::decodeId($serialId);
+                    }
+                    $item['delete_serial_ids'] = $deleteSerialIds;
+                }
+                if (isset($item['serials']) && is_array($item['serials'])) {
+                    $serials = [];
+                    foreach ($item['serials'] as $serial) {
+                        if (array_key_exists('id', $serial) && ! is_null($serial['id'])) {
+                            $serial['id'] = HashidsHelper::decodeId($serial['id']);
+                        }
+                        $serials[] = $serial;
+                    }
+                    $item['serials'] = $serials;
+                }
+
+                $productUnits[] = $item;
+            }
+            $this->merge(['items' => $productUnits]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            foreach (($validator->getData()['items'] ?? []) as $index => $productUnit) {
+                $productUnitId = $productUnit['product_unit_id'] ?? null;
+                $qty = $productUnit['qty'] ?? null;
+                $conversionValue = $productUnit['product_unit_conversion_value'] ?? null;
+                $serials = $productUnit['serials'] ?? [];
+
+                if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                    continue;
+                }
+
+                $product = ProductUnit::with('product')->find($productUnitId)?->product;
+                if (! $product?->is_use_serial_number) {
+                    continue;
+                }
+
+                $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+                $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+                if (str_contains($normalizedBaseQty, '.')) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_base_qty_must_be_integer'));
+
+                    continue;
+                }
+
+                $serialCount = (string) count(is_array($serials) ? $serials : []);
+                if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                    $validator->errors()->add('items.'.$index.'.serials', trans('rules.stock_transfer.serial_count_must_match_base_qty'));
+                }
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockTransferItem/StockTransferItemStoreRequest.php b/api/app/Http/Requests/StockTransferItem/StockTransferItemStoreRequest.php
new file mode 100644
index 000000000..f8d0c7fc3
--- /dev/null
+++ b/api/app/Http/Requests/StockTransferItem/StockTransferItemStoreRequest.php
@@ -0,0 +1,104 @@
+<?php
+
+namespace App\Http\Requests\StockTransferItem;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockTransferItem;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidProductUnit;
+use App\Rules\IsValidStockTransfer;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockTransferItemStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockTransferItem::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_transfer_id' => ['required', 'integer', 'bail', new IsValidStockTransfer()],
+            'qty' => ['required', 'numeric', 'min:1'],
+            'product_unit_id' => ['required', 'integer', 'bail', new IsValidProductUnit($this->company_id)],
+            'product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'serials' => ['present', 'array'],
+            'serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_transfer_item.company'),
+            'branch_id' => trans('validation_attributes.stock_transfer_item.branch'),
+            'stock_transfer_id' => trans('validation_attributes.stock_transfer_item.stock_transfer'),
+            'qty' => trans('validation_attributes.stock_transfer_item.qty'),
+            'product_unit_id' => trans('validation_attributes.stock_transfer_item.product_unit'),
+            'product_unit_conversion_value' => trans('validation_attributes.stock_adjustment_in_item.product_unit_conversion_value'),
+            'remarks' => trans('validation_attributes.stock_transfer_item.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_transfer_id' => $this->filled('stock_transfer_id') ? HashidsHelper::decodeId($this->stock_transfer_id) : null,
+            'product_unit_id' => $this->filled('product_unit_id') ? HashidsHelper::decodeId($this->product_unit_id) : null,
+        ]);
+
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $productUnitId = $validator->getData()['product_unit_id'] ?? null;
+            $qty = $validator->getData()['qty'] ?? null;
+            $conversionValue = $validator->getData()['product_unit_conversion_value'] ?? null;
+            $serials = $validator->getData()['serials'] ?? [];
+
+            if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                return;
+            }
+
+            $product = ProductUnit::with('product')->find($productUnitId)?->product;
+            if (! $product?->is_use_serial_number) {
+                return;
+            }
+
+            $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+            $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+            if (str_contains($normalizedBaseQty, '.')) {
+                $validator->errors()->add('serials', trans('rules.stock_transfer.serial_base_qty_must_be_integer'));
+
+                return;
+            }
+
+            $serialCount = (string) count(is_array($serials) ? $serials : []);
+            if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                $validator->errors()->add('serials', trans('rules.stock_transfer.serial_count_must_match_base_qty'));
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockTransferItem/StockTransferItemUpdateRequest.php b/api/app/Http/Requests/StockTransferItem/StockTransferItemUpdateRequest.php
new file mode 100644
index 000000000..54f06ee44
--- /dev/null
+++ b/api/app/Http/Requests/StockTransferItem/StockTransferItemUpdateRequest.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace App\Http\Requests\StockTransferItem;
+
+use App\Helpers\HashidsHelper;
+use App\Models\ProductUnit;
+use App\Models\StockTransferItem;
+use App\Rules\ExistsForCompany;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidProductUnit;
+use App\Rules\IsValidStockTransfer;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockTransferItemUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $resource = $this->route('stock_transfer_item');
+
+        return $user->can('update', StockTransferItem::class, $resource) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_transfer_id' => ['required', 'integer', 'bail', new IsValidStockTransfer()],
+            'qty' => ['required', 'numeric', 'min:1'],
+            'product_unit_id' => ['required', 'integer', 'bail', new IsValidProductUnit($this->company_id)],
+            'product_unit_conversion_value' => ['required', 'numeric', 'min:1'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+
+            'delete_serial_ids' => ['present', 'array'],
+            'delete_serial_ids.*' => ['required', 'integer', 'distinct', new ExistsForCompany('stock_transfer_item_serials', $this->company_id)],
+            'serials' => ['present', 'array'],
+            'serials.*.id' => ['present', 'nullable', 'integer', new ExistsForCompany('stock_transfer_item_serials', $this->company_id)],
+            'serials.*.serial' => ['required', 'distinct', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_transfer_item.company'),
+            'branch_id' => trans('validation_attributes.stock_transfer_item.branch'),
+            'stock_transfer_id' => trans('validation_attributes.stock_transfer_item.stock_transfer'),
+            'qty' => trans('validation_attributes.stock_transfer_item.qty'),
+            'product_unit_id' => trans('validation_attributes.stock_transfer_item.product_unit'),
+            'product_unit_conversion_value' => trans('validation_attributes.stock_adjustment_in_item.product_unit_conversion_value'),
+            'remarks' => trans('validation_attributes.stock_transfer_item.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_transfer_id' => $this->filled('stock_transfer_id') ? HashidsHelper::decodeId($this->stock_transfer_id) : null,
+            'product_unit_id' => $this->filled('product_unit_id') ? HashidsHelper::decodeId($this->product_unit_id) : null,
+        ]);
+
+        if (is_array($this->input('delete_serial_ids'))) {
+            $deleteSerialIds = $this->delete_serial_ids;
+            foreach ($deleteSerialIds as $index => $id) {
+                $deleteSerialIds[$index] = HashidsHelper::decodeId($id);
+            }
+            $this->merge(['delete_serial_ids' => $deleteSerialIds]);
+        }
+
+        if (is_array($this->input('serials'))) {
+            $serials = [];
+            foreach ($this->input('serials') as $item) {
+                if (isset($item['id'])) {
+                    $item['id'] = HashidsHelper::decodeId($item['id']);
+                }
+                $serials[] = $item;
+            }
+            $this->merge(['serials' => $serials]);
+        }
+    }
+
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $productUnitId = $validator->getData()['product_unit_id'] ?? null;
+            $qty = $validator->getData()['qty'] ?? null;
+            $conversionValue = $validator->getData()['product_unit_conversion_value'] ?? null;
+            $serials = $validator->getData()['serials'] ?? [];
+
+            if (empty($productUnitId) || ! is_numeric($qty) || ! is_numeric($conversionValue)) {
+                return;
+            }
+
+            $product = ProductUnit::with('product')->find($productUnitId)?->product;
+            if (! $product?->is_use_serial_number) {
+                return;
+            }
+
+            $baseQty = bcmul((string) $qty, (string) $conversionValue, 8);
+            $normalizedBaseQty = rtrim(rtrim($baseQty, '0'), '.');
+            if (str_contains($normalizedBaseQty, '.')) {
+                $validator->errors()->add('serials', trans('rules.stock_transfer.serial_base_qty_must_be_integer'));
+
+                return;
+            }
+
+            $serialCount = (string) count(is_array($serials) ? $serials : []);
+            if (bccomp($serialCount, $baseQty, 8) !== 0) {
+                $validator->errors()->add('serials', trans('rules.stock_transfer.serial_count_must_match_base_qty'));
+            }
+        });
+    }
+}
diff --git a/api/app/Http/Requests/StockTransferItemSerial/StockTransferItemSerialStoreRequest.php b/api/app/Http/Requests/StockTransferItemSerial/StockTransferItemSerialStoreRequest.php
new file mode 100644
index 000000000..d54a21db8
--- /dev/null
+++ b/api/app/Http/Requests/StockTransferItemSerial/StockTransferItemSerialStoreRequest.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Http\Requests\StockTransferItemSerial;
+
+use App\Helpers\HashidsHelper;
+use App\Models\StockTransferItemSerial;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\IsValidStockTransfer;
+use App\Rules\IsValidStockTransferItem;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockTransferItemSerialStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', StockTransferItemSerial::class) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', new IsValidBranch($this->company_id, true)],
+            'stock_transfer_id' => ['required', 'integer', new IsValidStockTransfer()],
+            'stock_transfer_item_id' => ['required', 'integer', new IsValidStockTransferItem($this->company_id, $this->stock_transfer_id)],
+            'serial' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.stock_transfer_item_serial.company'),
+            'branch_id' => trans('validation_attributes.stock_transfer_item_serial.branch'),
+            'stock_transfer_id' => trans('validation_attributes.stock_transfer_item_serial.stock_transfer'),
+            'stock_transfer_item_id' => trans('validation_attributes.stock_transfer_item_serial.stock_transfer_item'),
+            'serial' => trans('validation_attributes.stock_transfer_item_serial.serial'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'stock_transfer_id' => $this->filled('stock_transfer_id') ? HashidsHelper::decodeId($this->stock_transfer_id) : null,
+            'stock_transfer_item_id' => $this->filled('stock_transfer_item_id') ? HashidsHelper::decodeId($this->stock_transfer_item_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/StockTransferItemSerial/StockTransferItemSerialUpdateRequest.php b/api/app/Http/Requests/StockTransferItemSerial/StockTransferItemSerialUpdateRequest.php
new file mode 100644
index 000000000..cce6c7af1
--- /dev/null
+++ b/api/app/Http/Requests/StockTransferItemSerial/StockTransferItemSerialUpdateRequest.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Requests\StockTransferItemSerial;
+
+use App\Models\StockTransferItemSerial;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StockTransferItemSerialUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $stockTransferItemSerial = $this->route('stock_transfer_item_serial');
+
+        return $user->can('update', StockTransferItemSerial::class, $stockTransferItemSerial) ? true : false;
+    }
+
+    public function rules()
+    {
+        return [
+            'serial' => ['required', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'serial' => trans('validation_attributes.stock_transfer_item_serial.serial'),
+        ];
+    }
+}
diff --git a/api/app/Http/Requests/Supplier/SupplierStoreRequest.php b/api/app/Http/Requests/Supplier/SupplierStoreRequest.php
new file mode 100644
index 000000000..d05b85203
--- /dev/null
+++ b/api/app/Http/Requests/Supplier/SupplierStoreRequest.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Http\Requests\Supplier;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Supplier;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class SupplierStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Supplier::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'address' => ['present', 'nullable', 'string', 'max:255'],
+            'city' => ['present', 'nullable', 'string', 'max:255'],
+            'payment_term_type' => ['required', new Enum(PaymentTermTypeEnum::class)],
+            'payment_term' => ['required', 'integer'],
+            'taxable_enterprise' => ['required', 'boolean'],
+            'tax_id' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.supplier.company'),
+            'code' => trans('validation_attributes.supplier.code'),
+            'name' => trans('validation_attributes.supplier.name'),
+            'address' => trans('validation_attributes.supplier.address'),
+            'city' => trans('validation_attributes.supplier.city'),
+            'payment_term_type' => trans('validation_attributes.supplier.payment_term_type'),
+            'payment_term' => trans('validation_attributes.supplier.payment_term'),
+            'taxable_enterprise' => trans('validation_attributes.supplier.taxable_enterprise'),
+            'tax_id' => trans('validation_attributes.supplier.tax_id'),
+            'status' => trans('validation_attributes.supplier.status'),
+            'remarks' => trans('validation_attributes.supplier.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'payment_term_type' => PaymentTermTypeEnum::isValid($this->payment_term_type) ? PaymentTermTypeEnum::resolveToEnum($this->payment_term_type)->value : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Supplier/SupplierUpdateRequest.php b/api/app/Http/Requests/Supplier/SupplierUpdateRequest.php
new file mode 100644
index 000000000..bf265d384
--- /dev/null
+++ b/api/app/Http/Requests/Supplier/SupplierUpdateRequest.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Http\Requests\Supplier;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Supplier;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class SupplierUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $supplier = $this->route('supplier');
+
+        return $user->can('update', Supplier::class, $supplier);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'address' => ['present', 'nullable', 'string', 'max:255'],
+            'city' => ['present', 'nullable', 'string', 'max:255'],
+            'payment_term_type' => ['required', new Enum(PaymentTermTypeEnum::class)],
+            'payment_term' => ['required', 'integer'],
+            'taxable_enterprise' => ['required', 'boolean'],
+            'tax_id' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.supplier.company'),
+            'code' => trans('validation_attributes.supplier.code'),
+            'name' => trans('validation_attributes.supplier.name'),
+            'address' => trans('validation_attributes.supplier.address'),
+            'city' => trans('validation_attributes.supplier.city'),
+            'payment_term_type' => trans('validation_attributes.supplier.payment_term_type'),
+            'payment_term' => trans('validation_attributes.supplier.payment_term'),
+            'taxable_enterprise' => trans('validation_attributes.supplier.taxable_enterprise'),
+            'tax_id' => trans('validation_attributes.supplier.tax_id'),
+            'status' => trans('validation_attributes.supplier.status'),
+            'remarks' => trans('validation_attributes.supplier.remarks'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'payment_term_type' => PaymentTermTypeEnum::isValid($this->payment_term_type) ? PaymentTermTypeEnum::resolveToEnum($this->payment_term_type)->value : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Unit/UnitStoreRequest.php b/api/app/Http/Requests/Unit/UnitStoreRequest.php
new file mode 100644
index 000000000..af4144613
--- /dev/null
+++ b/api/app/Http/Requests/Unit/UnitStoreRequest.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Requests\Unit;
+
+use App\Enums\UnitTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Unit;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class UnitStoreRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Unit::class) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'description' => ['present', 'nullable', 'string'],
+            'type' => ['required', Rule::enum(UnitTypeEnum::class)],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.unit.company'),
+            'code' => trans('validation_attributes.unit.code'),
+            'name' => trans('validation_attributes.unit.name'),
+            'description' => trans('validation_attributes.unit.description'),
+            'type' => trans('validation_attributes.unit.type'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Unit/UnitUpdateRequest.php b/api/app/Http/Requests/Unit/UnitUpdateRequest.php
new file mode 100644
index 000000000..81252f0d3
--- /dev/null
+++ b/api/app/Http/Requests/Unit/UnitUpdateRequest.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Requests\Unit;
+
+use App\Enums\UnitTypeEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Unit;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+class UnitUpdateRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $unit = $this->route('unit');
+
+        return $user->can('update', Unit::class, $unit) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'description' => ['present', 'nullable', 'string'],
+            'type' => ['required', Rule::enum(UnitTypeEnum::class)],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.unit.company'),
+            'code' => trans('validation_attributes.unit.code'),
+            'name' => trans('validation_attributes.unit.name'),
+            'description' => trans('validation_attributes.unit.description'),
+            'type' => trans('validation_attributes.unit.type'),
+        ];
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/UserRequest.php b/api/app/Http/Requests/UserRequest.php
index 7ef928d57..e5cb7e9bc 100644
--- a/api/app/Http/Requests/UserRequest.php
+++ b/api/app/Http/Requests/UserRequest.php
@@ -2,7 +2,7 @@
 
 namespace App\Http\Requests;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use App\Models\User;
 use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Facades\Auth;
@@ -103,7 +103,7 @@ public function rules()
                 'roles' => ['required'],
                 'tax_id' => ['required'],
                 'ic_num' => ['required'],
-                'status' => [new Enum(RecordStatus::class)],
+                'status' => [new Enum(RecordStatusEnum::class)],
                 'country' => ['required'],
             ];
 
@@ -116,7 +116,7 @@ public function rules()
                 'roles' => ['required'],
                 'tax_id' => ['required'],
                 'ic_num' => ['required'],
-                'status' => [new Enum(RecordStatus::class)],
+                'status' => [new Enum(RecordStatusEnum::class)],
                 'country' => ['required'],
 
                 'api_token' => ['nullable', 'boolean'],
@@ -176,7 +176,7 @@ public function prepareForValidation()
                 $this->merge(['roles' => $arr_roles]);
 
                 $this->merge([
-                    'status' => RecordStatus::isValid($this->status) ? RecordStatus::resolveToEnum($this->status)->value : -1,
+                    'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : -1,
                 ]);
                 break;
             default:
diff --git a/api/app/Http/Requests/VatProfile/VatProfileStoreRequest.php b/api/app/Http/Requests/VatProfile/VatProfileStoreRequest.php
new file mode 100644
index 000000000..e9327823d
--- /dev/null
+++ b/api/app/Http/Requests/VatProfile/VatProfileStoreRequest.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Requests\VatProfile;
+
+use App\Helpers\HashidsHelper;
+use App\Models\VatProfile;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class VatProfileStoreRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', VatProfile::class);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'vat_rate' => ['required', 'numeric', 'min:0', 'max:100'],
+            'vat_base_numerator' => ['required', 'integer', 'min:1'],
+            'vat_base_denominator' => ['required', 'integer', 'min:1'],
+            'remarks' => ['present', 'nullable', 'string'],
+            'is_active' => ['required', 'boolean'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.vat_profile.company'),
+            'code' => trans('validation_attributes.vat_profile.code'),
+            'name' => trans('validation_attributes.vat_profile.name'),
+            'vat_rate' => trans('validation_attributes.vat_profile.vat_rate'),
+            'vat_base_numerator' => trans('validation_attributes.vat_profile.vat_base_numerator'),
+            'vat_base_denominator' => trans('validation_attributes.vat_profile.vat_base_denominator'),
+            'remarks' => trans('validation_attributes.vat_profile.remarks'),
+            'is_active' => trans('validation_attributes.vat_profile.is_active'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/VatProfile/VatProfileUpdateRequest.php b/api/app/Http/Requests/VatProfile/VatProfileUpdateRequest.php
new file mode 100644
index 000000000..104436298
--- /dev/null
+++ b/api/app/Http/Requests/VatProfile/VatProfileUpdateRequest.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Requests\VatProfile;
+
+use App\Helpers\HashidsHelper;
+use App\Models\VatProfile;
+use App\Rules\IsValidCompany;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class VatProfileUpdateRequest extends FormRequest
+{
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+        $vatProfile = $this->route('vat_profile');
+
+        return $user->can('update', VatProfile::class, $vatProfile);
+    }
+
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'code' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'],
+            'vat_rate' => ['required', 'numeric', 'min:0', 'max:100'],
+            'vat_base_numerator' => ['required', 'integer', 'min:1'],
+            'vat_base_denominator' => ['required', 'integer', 'min:1'],
+            'remarks' => ['present', 'nullable', 'string'],
+            'is_active' => ['required', 'boolean'],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.vat_profile.company'),
+            'code' => trans('validation_attributes.vat_profile.code'),
+            'name' => trans('validation_attributes.vat_profile.name'),
+            'vat_rate' => trans('validation_attributes.vat_profile.vat_rate'),
+            'vat_base_numerator' => trans('validation_attributes.vat_profile.vat_base_numerator'),
+            'vat_base_denominator' => trans('validation_attributes.vat_profile.vat_base_denominator'),
+            'remarks' => trans('validation_attributes.vat_profile.remarks'),
+            'is_active' => trans('validation_attributes.vat_profile.is_active'),
+        ];
+    }
+
+    public function validationData()
+    {
+        return $this->all();
+    }
+
+    protected function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Warehouse/WarehouseStoreRequest.php b/api/app/Http/Requests/Warehouse/WarehouseStoreRequest.php
new file mode 100644
index 000000000..29491e9a0
--- /dev/null
+++ b/api/app/Http/Requests/Warehouse/WarehouseStoreRequest.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Requests\Warehouse;
+
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Warehouse;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\WarehouseStoreValidCode;
+use App\Rules\WarehouseStoreValidName;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class WarehouseStoreRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('create', Warehouse::class) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->input('company_id'), true)],
+            'code' => ['required', 'string', 'max:255', new WarehouseStoreValidCode($this->input('company_id'))],
+            'name' => ['required', 'string', 'max:255', new WarehouseStoreValidName($this->input('company_id'))],
+            'address' => ['present', 'nullable', 'string', 'max:255'],
+            'city' => ['present', 'nullable', 'string', 'max:255'],
+            'contact' => ['present', 'nullable', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.warehouse.company'),
+            'branch_id' => trans('validation_attributes.warehouse.branch'),
+            'code' => trans('validation_attributes.warehouse.code'),
+            'name' => trans('validation_attributes.warehouse.name'),
+            'address' => trans('validation_attributes.warehouse.address'),
+            'city' => trans('validation_attributes.warehouse.city'),
+            'contact' => trans('validation_attributes.warehouse.contact'),
+            'remarks' => trans('validation_attributes.warehouse.remarks'),
+            'status' => trans('validation_attributes.warehouse.status'),
+        ];
+    }
+
+    public function validationData()
+    {
+        $additionalArray = [];
+
+        return array_merge($this->all(), $additionalArray);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Requests/Warehouse/WarehouseUpdateRequest.php b/api/app/Http/Requests/Warehouse/WarehouseUpdateRequest.php
new file mode 100644
index 000000000..adb3551ac
--- /dev/null
+++ b/api/app/Http/Requests/Warehouse/WarehouseUpdateRequest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Requests\Warehouse;
+
+use App\Enums\RecordStatusEnum;
+use App\Helpers\HashidsHelper;
+use App\Rules\IsValidBranch;
+use App\Rules\IsValidCompany;
+use App\Rules\WarehouseUpdateValidCode;
+use App\Rules\WarehouseUpdateValidName;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Enum;
+
+class WarehouseUpdateRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (! Auth::check()) {
+            return false;
+        }
+
+        /** @var \App\User */
+        $user = Auth::user();
+
+        return $user->can('update', $this->route('warehouse')) ? true : false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'company_id' => ['required', 'integer', 'bail', new IsValidCompany()],
+            'branch_id' => ['required', 'integer', 'bail', new IsValidBranch($this->input('company_id'), true)],
+            'code' => ['required', 'string', 'max:255', new WarehouseUpdateValidCode($this->input('company_id'), $this->route('warehouse'))],
+            'name' => ['required', 'string', 'max:255', new WarehouseUpdateValidName($this->input('company_id'), $this->route('warehouse'))],
+            'address' => ['present', 'nullable', 'string', 'max:255'],
+            'city' => ['present', 'nullable', 'string', 'max:255'],
+            'contact' => ['present', 'nullable', 'string', 'max:255'],
+            'remarks' => ['present', 'nullable', 'string', 'max:255'],
+            'status' => ['required', new Enum(RecordStatusEnum::class)],
+        ];
+    }
+
+    public function attributes()
+    {
+        return [
+            'company_id' => trans('validation_attributes.warehouse.company'),
+            'branch_id' => trans('validation_attributes.warehouse.branch'),
+            'code' => trans('validation_attributes.warehouse.code'),
+            'name' => trans('validation_attributes.warehouse.name'),
+            'address' => trans('validation_attributes.warehouse.address'),
+            'city' => trans('validation_attributes.warehouse.city'),
+            'contact' => trans('validation_attributes.warehouse.contact'),
+            'remarks' => trans('validation_attributes.warehouse.remarks'),
+            'status' => trans('validation_attributes.warehouse.status'),
+        ];
+    }
+
+    public function validationData()
+    {
+        $additionalArray = [];
+
+        return array_merge($this->all(), $additionalArray);
+    }
+
+    public function prepareForValidation()
+    {
+        $this->merge([
+            'company_id' => $this->filled('company_id') ? HashidsHelper::decodeId($this->company_id) : null,
+            'branch_id' => $this->filled('branch_id') ? HashidsHelper::decodeId($this->branch_id) : null,
+            'status' => RecordStatusEnum::isValid($this->status) ? RecordStatusEnum::resolveToEnum($this->status)->value : null,
+        ]);
+    }
+}
diff --git a/api/app/Http/Resources/AssetAdjustmentInItemResource.php b/api/app/Http/Resources/AssetAdjustmentInItemResource.php
new file mode 100644
index 000000000..55c10456b
--- /dev/null
+++ b/api/app/Http/Resources/AssetAdjustmentInItemResource.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetAdjustmentInItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'asset' => new AssetResource($this->whenLoaded('asset')),
+            'qty' => dec_trim($this->qty),
+            'remarks' => $this->remarks,
+            'serials' => AssetAdjustmentInItemSerialResource::collection($this->whenLoaded('serials')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetAdjustmentInItemSerialResource.php b/api/app/Http/Resources/AssetAdjustmentInItemSerialResource.php
new file mode 100644
index 000000000..0d465bf04
--- /dev/null
+++ b/api/app/Http/Resources/AssetAdjustmentInItemSerialResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetAdjustmentInItemSerialResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'serial' => $this->serial,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetAdjustmentOutItemResource.php b/api/app/Http/Resources/AssetAdjustmentOutItemResource.php
new file mode 100644
index 000000000..08ac0226f
--- /dev/null
+++ b/api/app/Http/Resources/AssetAdjustmentOutItemResource.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetAdjustmentOutItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'asset' => new AssetResource($this->whenLoaded('asset')),
+            'qty' => dec_trim($this->qty),
+            'remarks' => $this->remarks,
+            'serials' => AssetAdjustmentOutItemSerialResource::collection($this->whenLoaded('serials')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetAdjustmentOutItemSerialResource.php b/api/app/Http/Resources/AssetAdjustmentOutItemSerialResource.php
new file mode 100644
index 000000000..0d7f25b28
--- /dev/null
+++ b/api/app/Http/Resources/AssetAdjustmentOutItemSerialResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetAdjustmentOutItemSerialResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'serial' => $this->serial,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetAdjustmentResource.php b/api/app/Http/Resources/AssetAdjustmentResource.php
new file mode 100644
index 000000000..3d73634ce
--- /dev/null
+++ b/api/app/Http/Resources/AssetAdjustmentResource.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetAdjustmentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'branch' => new BranchResource($this->whenLoaded('branch')),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'remarks' => $this->remarks,
+            'is_posted' => $this->is_posted,
+            'total_incoming_asset_qty' => dec_trim($this->total_incoming_asset_qty),
+            'total_outgoing_asset_qty' => dec_trim($this->total_outgoing_asset_qty),
+            'in_items' => AssetAdjustmentInItemResource::collection($this->whenLoaded('inItems')),
+            'out_items' => AssetAdjustmentOutItemResource::collection($this->whenLoaded('outItems')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetCategoryResource.php b/api/app/Http/Resources/AssetCategoryResource.php
new file mode 100644
index 000000000..bb8e7e1df
--- /dev/null
+++ b/api/app/Http/Resources/AssetCategoryResource.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetCategoryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'estimated_useful_life_months' => $this->estimated_useful_life_months,
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetPurchaseItemResource.php b/api/app/Http/Resources/AssetPurchaseItemResource.php
new file mode 100644
index 000000000..fa98c86f3
--- /dev/null
+++ b/api/app/Http/Resources/AssetPurchaseItemResource.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetPurchaseItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'asset' => new AssetResource($this->whenLoaded('asset')),
+            'qty' => dec_trim($this->qty),
+            'unit_price' => dec_trim($this->unit_price),
+            'subtotal' => dec_trim($this->subtotal),
+            'allocated_additional_cost' => dec_trim($this->allocated_additional_cost),
+            'subtotal_after_additional_cost' => dec_trim($this->subtotal_after_additional_cost),
+            'unit_acquisition_cost' => dec_trim($this->unit_acquisition_cost),
+            'remarks' => $this->remarks,
+            'serials' => AssetPurchaseItemSerialResource::collection($this->whenLoaded('serials')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetPurchaseItemSerialResource.php b/api/app/Http/Resources/AssetPurchaseItemSerialResource.php
new file mode 100644
index 000000000..f095df7f1
--- /dev/null
+++ b/api/app/Http/Resources/AssetPurchaseItemSerialResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetPurchaseItemSerialResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'serial' => $this->serial,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetPurchaseResource.php b/api/app/Http/Resources/AssetPurchaseResource.php
new file mode 100644
index 000000000..8152320b7
--- /dev/null
+++ b/api/app/Http/Resources/AssetPurchaseResource.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetPurchaseResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'branch' => new BranchResource($this->whenLoaded('branch')),
+            'supplier' => new SupplierResource($this->whenLoaded('supplier')),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'due_days' => $this->due_days,
+            'remarks' => $this->remarks,
+            'is_posted' => $this->is_posted,
+            'item_total' => dec_trim($this->item_total),
+            'additional_cost' => dec_trim($this->additional_cost),
+            'rounding' => dec_trim($this->rounding),
+            'amount_payable' => dec_trim($this->amount_payable),
+            'items' => AssetPurchaseItemResource::collection($this->whenLoaded('items')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetResource.php b/api/app/Http/Resources/AssetResource.php
new file mode 100644
index 000000000..b1caad5ec
--- /dev/null
+++ b/api/app/Http/Resources/AssetResource.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('assetCategory'), [
+                'asset_category' => new AssetCategoryResource($this->whenLoaded('assetCategory')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            $this->mergeWhen($this->relationLoaded('assetUnit'), [
+                'asset_unit' => new AssetUnitResource($this->whenLoaded('assetUnit')),
+            ]),
+            'status' => $this->status?->value,
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetSaleItemResource.php b/api/app/Http/Resources/AssetSaleItemResource.php
new file mode 100644
index 000000000..7d7635022
--- /dev/null
+++ b/api/app/Http/Resources/AssetSaleItemResource.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetSaleItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'asset' => new AssetResource($this->whenLoaded('asset')),
+            'qty' => dec_trim($this->qty),
+            'unit_price' => dec_trim($this->unit_price),
+            'subtotal' => dec_trim($this->subtotal),
+            'remarks' => $this->remarks,
+            'serials' => AssetSaleItemSerialResource::collection($this->whenLoaded('serials')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetSaleItemSerialResource.php b/api/app/Http/Resources/AssetSaleItemSerialResource.php
new file mode 100644
index 000000000..4f9a96bb8
--- /dev/null
+++ b/api/app/Http/Resources/AssetSaleItemSerialResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetSaleItemSerialResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'serial' => $this->serial,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetSaleResource.php b/api/app/Http/Resources/AssetSaleResource.php
new file mode 100644
index 000000000..73cbca957
--- /dev/null
+++ b/api/app/Http/Resources/AssetSaleResource.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetSaleResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'branch' => new BranchResource($this->whenLoaded('branch')),
+            'customer' => new CustomerResource($this->whenLoaded('customer')),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'due_days' => $this->due_days,
+            'remarks' => $this->remarks,
+            'is_posted' => $this->is_posted,
+            'item_total' => dec_trim($this->item_total),
+            'rounding' => dec_trim($this->rounding),
+            'amount_receivable' => dec_trim($this->amount_receivable),
+            'items' => AssetSaleItemResource::collection($this->whenLoaded('items')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/AssetUnitResource.php b/api/app/Http/Resources/AssetUnitResource.php
new file mode 100644
index 000000000..abf8af3a8
--- /dev/null
+++ b/api/app/Http/Resources/AssetUnitResource.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class AssetUnitResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'description' => $this->description,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/BranchResource.php b/api/app/Http/Resources/BranchResource.php
index f273b649d..cb04c6363 100644
--- a/api/app/Http/Resources/BranchResource.php
+++ b/api/app/Http/Resources/BranchResource.php
@@ -2,7 +2,7 @@
 
 namespace App\Http\Resources;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use Illuminate\Http\Resources\Json\JsonResource;
 use Vinkla\Hashids\Facades\Hashids;
 
@@ -36,7 +36,7 @@ public function toArray($request)
     private function setStatus($status, $deleted_at)
     {
         if (! is_null($deleted_at)) {
-            return RecordStatus::DELETED->name;
+            return RecordStatusEnum::DELETED->name;
         } else {
             return $status->name;
         }
diff --git a/api/app/Http/Resources/BrandResource.php b/api/app/Http/Resources/BrandResource.php
new file mode 100644
index 000000000..9abbbfa6c
--- /dev/null
+++ b/api/app/Http/Resources/BrandResource.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class BrandResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
+     */
+    public function toArray($request)
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/CapitalOpeningResource.php b/api/app/Http/Resources/CapitalOpeningResource.php
new file mode 100644
index 000000000..90ea08f25
--- /dev/null
+++ b/api/app/Http/Resources/CapitalOpeningResource.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CapitalOpeningResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => $this->date,
+            $this->mergeWhen($this->relationLoaded('investor'), [
+                'investor' => new InvestorResource($this->whenLoaded('investor')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/CapitalTransactionResource.php b/api/app/Http/Resources/CapitalTransactionResource.php
new file mode 100644
index 000000000..03757a0e8
--- /dev/null
+++ b/api/app/Http/Resources/CapitalTransactionResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CapitalTransactionResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => $this->date,
+            $this->mergeWhen($this->relationLoaded('investor'), [
+                'investor' => new InvestorResource($this->whenLoaded('investor')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'type' => $this->type?->value,
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/CashAccountResource.php b/api/app/Http/Resources/CashAccountResource.php
new file mode 100644
index 000000000..e835ad8bf
--- /dev/null
+++ b/api/app/Http/Resources/CashAccountResource.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CashAccountResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'is_bank' => $this->is_bank,
+            'is_active' => $this->is_active,
+            'remarks' => $this->remarks,
+            'remaining_balance' => $this->when(
+                isset($this->remaining_balance),
+                (float) $this->remaining_balance
+            ),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/CashTransferResource.php b/api/app/Http/Resources/CashTransferResource.php
new file mode 100644
index 000000000..599beb5df
--- /dev/null
+++ b/api/app/Http/Resources/CashTransferResource.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CashTransferResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => $this->date,
+            $this->mergeWhen($this->relationLoaded('sourceCashAccount'), [
+                'source_cash_account' => new CashAccountResource($this->whenLoaded('sourceCashAccount')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('destinationCashAccount'), [
+                'destination_cash_account' => new CashAccountResource($this->whenLoaded('destinationCashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ChartOfAccountResource.php b/api/app/Http/Resources/ChartOfAccountResource.php
new file mode 100644
index 000000000..a3268e964
--- /dev/null
+++ b/api/app/Http/Resources/ChartOfAccountResource.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ChartOfAccountResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('parent'), [
+                'parent' => new self($this->whenLoaded('parent')),
+            ]),
+            'scope' => $this->scope?->value,
+            'system_key' => $this->system_key?->value,
+            'source_type' => $this->source_type,
+            'source_id' => $this->source_id,
+            'code' => $this->code,
+            'name' => $this->name,
+            'account_type' => $this->account_type?->value,
+            'normal_balance' => $this->normal_balance?->value,
+            'level' => $this->level,
+            'is_group' => $this->is_group,
+            'is_active' => $this->is_active,
+            'remarks' => $this->remarks,
+            $this->mergeWhen($this->relationLoaded('childrenRecursive'), [
+                'children' => self::collection($this->whenLoaded('childrenRecursive')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('children'), [
+                'children' => self::collection($this->whenLoaded('children')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/CompanyResource.php b/api/app/Http/Resources/CompanyResource.php
index 2ffba9b1b..b869762cf 100644
--- a/api/app/Http/Resources/CompanyResource.php
+++ b/api/app/Http/Resources/CompanyResource.php
@@ -2,7 +2,7 @@
 
 namespace App\Http\Resources;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use Illuminate\Http\Resources\Json\JsonResource;
 use Vinkla\Hashids\Facades\Hashids;
 
@@ -33,7 +33,7 @@ public function toArray($request)
     private function setStatus($status, $deleted_at)
     {
         if (! is_null($deleted_at)) {
-            return RecordStatus::DELETED->name;
+            return RecordStatusEnum::DELETED->name;
         } else {
             return $status->name;
         }
diff --git a/api/app/Http/Resources/CustomerAddressResource.php b/api/app/Http/Resources/CustomerAddressResource.php
new file mode 100644
index 000000000..cc36a912a
--- /dev/null
+++ b/api/app/Http/Resources/CustomerAddressResource.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerAddressResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->company),
+            'customer' => new CustomerResource($this->customer),
+            'address' => $this->address,
+            'city' => $this->city,
+            'contact' => $this->contact,
+            'is_main' => $this->is_main,
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/CustomerGroupResource.php b/api/app/Http/Resources/CustomerGroupResource.php
new file mode 100644
index 000000000..70de3d3f0
--- /dev/null
+++ b/api/app/Http/Resources/CustomerGroupResource.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerGroupResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'max_open_invoice' => (int) $this->max_open_invoice,
+            'max_outstanding_invoice' => dec_trim($this->max_outstanding_invoice),
+            'max_invoice_age' => (int) $this->max_invoice_age,
+            'payment_term_type' => $this->payment_term_type->name,
+            'payment_term' => (int) $this->payment_term,
+            'selling_point' => (int) $this->selling_point,
+            'selling_point_multiple' => dec_trim($this->selling_point_multiple),
+            'sell_at_cost' => $this->sell_at_cost,
+            'price_markup_percent' => dec_trim($this->price_markup_percent),
+            'price_markup_nominal' => dec_trim($this->price_markup_nominal),
+            'price_markdown_percent' => dec_trim($this->price_markdown_percent),
+            'price_markdown_nominal' => dec_trim($this->price_markdown_nominal),
+            'rounding_type' => $this->rounding_type->name,
+            'rounding_digit' => (int) $this->rounding_digit,
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/CustomerResource.php b/api/app/Http/Resources/CustomerResource.php
new file mode 100644
index 000000000..c05417955
--- /dev/null
+++ b/api/app/Http/Resources/CustomerResource.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Enums\RecordStatusEnum;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('user'), [
+                'user' => new UserResource($this->whenLoaded('user')),
+            ]),
+            'code' => $this->code,
+            'is_member' => $this->is_member,
+            'name' => $this->name,
+            $this->mergeWhen($this->relationLoaded('group'), [
+                'group' => new CustomerGroupResource($this->whenLoaded('group')),
+            ]),
+            'zone' => $this->zone,
+            'max_open_invoice' => $this->max_open_invoice,
+            'max_outstanding_invoice' => dec_trim($this->max_outstanding_invoice),
+            'max_invoice_age' => $this->max_invoice_age,
+            'payment_term_type' => $this->payment_term_type?->name,
+            'payment_term' => $this->payment_term,
+            'taxable_enterprise' => $this->taxable_enterprise,
+            'tax_id' => $this->tax_id,
+            'status' => $this->setStatus($this->status, $this->deleted_at),
+            'remarks' => $this->remarks,
+        ];
+    }
+
+    private function setStatus($status, $deleted_at)
+    {
+        if (! is_null($deleted_at)) {
+            return RecordStatusEnum::DELETED->name;
+        } else {
+            return $status->name;
+        }
+    }
+}
diff --git a/api/app/Http/Resources/DebtCategoryResource.php b/api/app/Http/Resources/DebtCategoryResource.php
new file mode 100644
index 000000000..e04893b03
--- /dev/null
+++ b/api/app/Http/Resources/DebtCategoryResource.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class DebtCategoryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'sequence' => $this->sequence,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/DebtCreditorResource.php b/api/app/Http/Resources/DebtCreditorResource.php
new file mode 100644
index 000000000..647aa7198
--- /dev/null
+++ b/api/app/Http/Resources/DebtCreditorResource.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class DebtCreditorResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/DebtPaymentResource.php b/api/app/Http/Resources/DebtPaymentResource.php
new file mode 100644
index 000000000..61b41aac7
--- /dev/null
+++ b/api/app/Http/Resources/DebtPaymentResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class DebtPaymentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('debt'), [
+                'debt' => new DebtResource($this->whenLoaded('debt')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/DebtResource.php b/api/app/Http/Resources/DebtResource.php
new file mode 100644
index 000000000..54c67fff3
--- /dev/null
+++ b/api/app/Http/Resources/DebtResource.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class DebtResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('category'), [
+                'category' => new DebtCategoryResource($this->whenLoaded('category')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('creditor'), [
+                'creditor' => new DebtCreditorResource($this->whenLoaded('creditor')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('supplier'), [
+                'supplier' => new SupplierResource($this->whenLoaded('supplier')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'direct_amount_received' => dec_trim($this->direct_amount_received),
+            'opening_amount_due' => dec_trim($this->opening_amount_due),
+            'amount_total' => dec_trim($this->amount_total),
+            'amount_paid_by_cash_account' => dec_trim($this->amount_paid_by_cash_account),
+            'amount_paid_by_stock_adjustment' => dec_trim($this->amount_paid_by_stock_adjustment),
+            'amount_due' => dec_trim($this->amount_due),
+            'due_days' => $this->due_days,
+            'is_paid_off' => $this->is_paid_off,
+            'remarks' => $this->remarks,
+            $this->mergeWhen($this->relationLoaded('payments'), [
+                'payments' => DebtPaymentResource::collection($this->whenLoaded('payments')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/EmployeeResource.php b/api/app/Http/Resources/EmployeeResource.php
new file mode 100644
index 000000000..857564bfa
--- /dev/null
+++ b/api/app/Http/Resources/EmployeeResource.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class EmployeeResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'code' => $this->code,
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ExpenseCategoryResource.php b/api/app/Http/Resources/ExpenseCategoryResource.php
new file mode 100644
index 000000000..26bb3a5f3
--- /dev/null
+++ b/api/app/Http/Resources/ExpenseCategoryResource.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Enums\ChartOfAccountSystemKeyEnum;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ExpenseCategoryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('parent'), [
+                'parent' => new self($this->whenLoaded('parent')),
+            ]),
+            'code' => $this->code,
+            'display_code' => $this->display_code,
+            'category_type' => (function () {
+                if (! is_null($this->parent_id)) return null;
+
+                return match ($this->chartOfAccount?->parent?->system_key) {
+                    ChartOfAccountSystemKeyEnum::OTHER_EXPENSE_ROOT->value => 'other_expense',
+                    ChartOfAccountSystemKeyEnum::EXPENSE_ROOT->value => 'expense',
+                    default => null,
+                };
+            })(),
+            'name' => $this->name,
+            'sequence' => $this->sequence,
+            $this->mergeWhen($this->relationLoaded('childrenRecursive'), [
+                'children' => self::collection($this->whenLoaded('childrenRecursive')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('children'), [
+                'children' => self::collection($this->whenLoaded('children')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ExpenseImageResource.php b/api/app/Http/Resources/ExpenseImageResource.php
new file mode 100644
index 000000000..92d92e56a
--- /dev/null
+++ b/api/app/Http/Resources/ExpenseImageResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\ImageHelper\ImageHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ExpenseImageResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'expense_id' => $this->whenNotNull($this->expense_id, fn () => Hashids::encode($this->expense_id)),
+            'path' => $this->path,
+            'url' => ImageHelper::getUrl($this->path),
+            'hash' => $this->hash,
+            'is_main' => $this->is_main,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ExpensePaymentResource.php b/api/app/Http/Resources/ExpensePaymentResource.php
new file mode 100644
index 000000000..5da5eb5ee
--- /dev/null
+++ b/api/app/Http/Resources/ExpensePaymentResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ExpensePaymentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('expense'), [
+                'expense' => new ExpenseResource($this->whenLoaded('expense')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ExpenseResource.php b/api/app/Http/Resources/ExpenseResource.php
new file mode 100644
index 000000000..b2672f7c5
--- /dev/null
+++ b/api/app/Http/Resources/ExpenseResource.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ExpenseResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('category'), [
+                'category' => new ExpenseCategoryResource($this->whenLoaded('category')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('paidImmediatelyCashAccount'), [
+                'paid_immediately_cash_account' => new CashAccountResource($this->whenLoaded('paidImmediatelyCashAccount')),
+            ]),
+            'amount_paid_immediately' => dec_trim($this->amount_paid_immediately),
+            'amount_payable' => dec_trim($this->amount_payable),
+            'due_days' => $this->due_days,
+            'amount_payable_paid' => dec_trim($this->amount_payable_paid),
+            'amount_payable_due' => dec_trim($this->amount_payable_due),
+            'is_amount_payable_paid_off' => $this->is_amount_payable_paid_off,
+            'amount_total' => dec_trim($this->amount_total),
+            'remarks' => $this->remarks,
+            $this->mergeWhen($this->relationLoaded('payments'), [
+                'payments' => ExpensePaymentResource::collection($this->whenLoaded('payments')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('images'), [
+                'expense_images' => ExpenseImageResource::collection($this->whenLoaded('images')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('mainImage'), [
+                'main_expense_image' => new ExpenseImageResource($this->whenLoaded('mainImage')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/IncomeCategoryResource.php b/api/app/Http/Resources/IncomeCategoryResource.php
new file mode 100644
index 000000000..aae068518
--- /dev/null
+++ b/api/app/Http/Resources/IncomeCategoryResource.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class IncomeCategoryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('parent'), [
+                'parent' => new self($this->whenLoaded('parent')),
+            ]),
+            'code' => $this->code,
+            'display_code' => $this->display_code,
+            'name' => $this->name,
+            'sequence' => $this->sequence,
+            $this->mergeWhen($this->relationLoaded('childrenRecursive'), [
+                'children' => self::collection($this->whenLoaded('childrenRecursive')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('children'), [
+                'children' => self::collection($this->whenLoaded('children')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/IncomeImageResource.php b/api/app/Http/Resources/IncomeImageResource.php
new file mode 100644
index 000000000..a4e19f4d2
--- /dev/null
+++ b/api/app/Http/Resources/IncomeImageResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\ImageHelper\ImageHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class IncomeImageResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'income_id' => $this->whenNotNull($this->income_id, fn () => Hashids::encode($this->income_id)),
+            'path' => $this->path,
+            'url' => ImageHelper::getUrl($this->path),
+            'hash' => $this->hash,
+            'is_main' => $this->is_main,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/IncomePaymentResource.php b/api/app/Http/Resources/IncomePaymentResource.php
new file mode 100644
index 000000000..c3a27712e
--- /dev/null
+++ b/api/app/Http/Resources/IncomePaymentResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class IncomePaymentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('income'), [
+                'income' => new IncomeResource($this->whenLoaded('income')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/IncomeResource.php b/api/app/Http/Resources/IncomeResource.php
new file mode 100644
index 000000000..d924f6412
--- /dev/null
+++ b/api/app/Http/Resources/IncomeResource.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class IncomeResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('category'), [
+                'category' => new IncomeCategoryResource($this->whenLoaded('category')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('paidImmediatelyCashAccount'), [
+                'paid_immediately_cash_account' => new CashAccountResource($this->whenLoaded('paidImmediatelyCashAccount')),
+            ]),
+            'amount_paid_immediately' => dec_trim($this->amount_paid_immediately),
+            'amount_receivable' => dec_trim($this->amount_receivable),
+            'due_days' => $this->due_days,
+            'amount_receivable_paid' => dec_trim($this->amount_receivable_paid),
+            'amount_receivable_due' => dec_trim($this->amount_receivable_due),
+            'is_amount_receivable_paid_off' => $this->is_amount_receivable_paid_off,
+            'amount_total' => dec_trim($this->amount_total),
+            'remarks' => $this->remarks,
+            $this->mergeWhen($this->relationLoaded('payments'), [
+                'payments' => IncomePaymentResource::collection($this->whenLoaded('payments')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('images'), [
+                'income_images' => IncomeImageResource::collection($this->whenLoaded('images')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('mainImage'), [
+                'main_income_image' => new IncomeImageResource($this->whenLoaded('mainImage')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/InvestorResource.php b/api/app/Http/Resources/InvestorResource.php
new file mode 100644
index 000000000..8368c3098
--- /dev/null
+++ b/api/app/Http/Resources/InvestorResource.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class InvestorResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/JournalEntryItemResource.php b/api/app/Http/Resources/JournalEntryItemResource.php
new file mode 100644
index 000000000..cb9929d5a
--- /dev/null
+++ b/api/app/Http/Resources/JournalEntryItemResource.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class JournalEntryItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            $this->mergeWhen($this->relationLoaded('journalEntry') && $this->journalEntry, [
+                'journal_entry' => new JournalEntryResource($this->whenLoaded('journalEntry')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('chartOfAccount') && $this->chartOfAccount, [
+                'chart_of_account' => new ChartOfAccountResource($this->whenLoaded('chartOfAccount')),
+            ]),
+            'sequence' => $this->sequence,
+            'debit' => dec_trim($this->debit),
+            'credit' => dec_trim($this->credit),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/JournalEntryResource.php b/api/app/Http/Resources/JournalEntryResource.php
new file mode 100644
index 000000000..6b31f099a
--- /dev/null
+++ b/api/app/Http/Resources/JournalEntryResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class JournalEntryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'journal_type' => $this->journal_type?->value,
+            'source_type' => $this->source_type,
+            'source_id' => $this->source_id,
+            'reference_no' => $this->reference_no,
+            'total_debit' => dec_trim($this->total_debit),
+            'total_credit' => dec_trim($this->total_credit),
+            'remarks' => $this->remarks,
+            'items' => JournalEntryItemResource::collection($this->whenLoaded('items')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PrepaidExpenseImageResource.php b/api/app/Http/Resources/PrepaidExpenseImageResource.php
new file mode 100644
index 000000000..8b303c549
--- /dev/null
+++ b/api/app/Http/Resources/PrepaidExpenseImageResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\ImageHelper\ImageHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PrepaidExpenseImageResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'prepaid_expense_id' => $this->whenNotNull($this->prepaid_expense_id, fn () => Hashids::encode($this->prepaid_expense_id)),
+            'path' => $this->path,
+            'url' => ImageHelper::getUrl($this->path),
+            'hash' => $this->hash,
+            'is_main' => $this->is_main,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PrepaidExpensePaymentResource.php b/api/app/Http/Resources/PrepaidExpensePaymentResource.php
new file mode 100644
index 000000000..8b54b4013
--- /dev/null
+++ b/api/app/Http/Resources/PrepaidExpensePaymentResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PrepaidExpensePaymentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('prepaidExpense'), [
+                'prepaid_expense' => new PrepaidExpenseResource($this->whenLoaded('prepaidExpense')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PrepaidExpenseResource.php b/api/app/Http/Resources/PrepaidExpenseResource.php
new file mode 100644
index 000000000..1ced46339
--- /dev/null
+++ b/api/app/Http/Resources/PrepaidExpenseResource.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PrepaidExpenseResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('category'), [
+                'category' => new ExpenseCategoryResource($this->whenLoaded('category')),
+            ]),
+            'estimated_useful_life' => $this->estimated_useful_life,
+            $this->mergeWhen($this->relationLoaded('paidImmediatelyCashAccount'), [
+                'paid_immediately_cash_account' => new CashAccountResource($this->whenLoaded('paidImmediatelyCashAccount')),
+            ]),
+            'amount_paid_immediately' => dec_trim($this->amount_paid_immediately),
+            'amount_payable' => dec_trim($this->amount_payable),
+            'due_days' => $this->due_days,
+            'amount_payable_paid' => dec_trim($this->amount_payable_paid),
+            'amount_payable_due' => dec_trim($this->amount_payable_due),
+            'is_amount_payable_paid_off' => $this->is_amount_payable_paid_off,
+            'amount_total' => dec_trim($this->amount_total),
+            'remarks' => $this->remarks,
+            $this->mergeWhen($this->relationLoaded('payments'), [
+                'payments' => PrepaidExpensePaymentResource::collection($this->whenLoaded('payments')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('images'), [
+                'prepaid_expense_images' => PrepaidExpenseImageResource::collection($this->whenLoaded('images')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('mainImage'), [
+                'main_prepaid_expense_image' => new PrepaidExpenseImageResource($this->whenLoaded('mainImage')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PrepaidIncomeImageResource.php b/api/app/Http/Resources/PrepaidIncomeImageResource.php
new file mode 100644
index 000000000..46a0ab75a
--- /dev/null
+++ b/api/app/Http/Resources/PrepaidIncomeImageResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\ImageHelper\ImageHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PrepaidIncomeImageResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'prepaid_income_id' => $this->whenNotNull($this->prepaid_income_id, fn () => Hashids::encode($this->prepaid_income_id)),
+            'path' => $this->path,
+            'url' => ImageHelper::getUrl($this->path),
+            'hash' => $this->hash,
+            'is_main' => $this->is_main,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PrepaidIncomePaymentResource.php b/api/app/Http/Resources/PrepaidIncomePaymentResource.php
new file mode 100644
index 000000000..9c9a4f479
--- /dev/null
+++ b/api/app/Http/Resources/PrepaidIncomePaymentResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PrepaidIncomePaymentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('prepaidIncome'), [
+                'prepaid_income' => new PrepaidIncomeResource($this->whenLoaded('prepaidIncome')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PrepaidIncomeResource.php b/api/app/Http/Resources/PrepaidIncomeResource.php
new file mode 100644
index 000000000..eebdecdd7
--- /dev/null
+++ b/api/app/Http/Resources/PrepaidIncomeResource.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PrepaidIncomeResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('category'), [
+                'category' => new IncomeCategoryResource($this->whenLoaded('category')),
+            ]),
+            'estimated_useful_life' => $this->estimated_useful_life,
+            $this->mergeWhen($this->relationLoaded('paidImmediatelyCashAccount'), [
+                'paid_immediately_cash_account' => new CashAccountResource($this->whenLoaded('paidImmediatelyCashAccount')),
+            ]),
+            'amount_paid_immediately' => dec_trim($this->amount_paid_immediately),
+            'amount_receivable' => dec_trim($this->amount_receivable),
+            'due_days' => $this->due_days,
+            'amount_receivable_paid' => dec_trim($this->amount_receivable_paid),
+            'amount_receivable_due' => dec_trim($this->amount_receivable_due),
+            'is_amount_receivable_paid_off' => $this->is_amount_receivable_paid_off,
+            'amount_total' => dec_trim($this->amount_total),
+            'remarks' => $this->remarks,
+            $this->mergeWhen($this->relationLoaded('payments'), [
+                'payments' => PrepaidIncomePaymentResource::collection($this->whenLoaded('payments')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('images'), [
+                'prepaid_income_images' => PrepaidIncomeImageResource::collection($this->whenLoaded('images')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('mainImage'), [
+                'main_prepaid_income_image' => new PrepaidIncomeImageResource($this->whenLoaded('mainImage')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ProductCategoryResource.php b/api/app/Http/Resources/ProductCategoryResource.php
new file mode 100644
index 000000000..1d9a059ce
--- /dev/null
+++ b/api/app/Http/Resources/ProductCategoryResource.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductCategoryResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
+     */
+    public function toArray($request)
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'type' => $this->type->value,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ProductImageResource.php b/api/app/Http/Resources/ProductImageResource.php
new file mode 100644
index 000000000..6a6af964c
--- /dev/null
+++ b/api/app/Http/Resources/ProductImageResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\ImageHelper\ImageHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductImageResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'product_id' => $this->whenNotNull($this->product_id, fn () => Hashids::encode($this->product_id)),
+            'path' => $this->path,
+            'url' => ImageHelper::getUrl($this->path),
+            'hash' => $this->hash,
+            'is_main' => $this->is_main,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ProductResource.php b/api/app/Http/Resources/ProductResource.php
new file mode 100644
index 000000000..8c38e05af
--- /dev/null
+++ b/api/app/Http/Resources/ProductResource.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Enums\RecordStatusEnum;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            $this->mergeWhen($this->relationLoaded('category'), [
+                'category' => new ProductCategoryResource($this->whenLoaded('category')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('brand'), [
+                'brand' => new BrandResource($this->whenLoaded('brand')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('defaultVatProfile'), [
+                'default_vat_profile' => new VatProfileResource($this->whenLoaded('defaultVatProfile')),
+            ]),
+            'name' => $this->name,
+            'is_price_include_vat' => $this->is_price_include_vat,
+            'is_use_serial_number' => $this->is_use_serial_number,
+            'is_expirable' => $this->is_expirable,
+            'remarks' => $this->remarks,
+            'type' => $this->type,
+            'status' => $this->setStatus($this->status, $this->deleted_at),
+            'remaining_stock_base_unit' => $this->when(
+                isset($this->remaining_stock),
+                (float) $this->remaining_stock
+            ),
+            'base_product_unit' => $this->when($this->relationLoaded('baseProductUnit'),
+                new ProductUnitResource($this->whenLoaded('baseProductUnit'))
+            ),
+            $this->mergeWhen($this->relationLoaded('productUnits'), [
+                'product_units' => ProductUnitResource::collection($this->whenLoaded('productUnits')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('images'), [
+                'product_images' => ProductImageResource::collection($this->whenLoaded('images')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('mainImage'), [
+                'main_product_image' => new ProductImageResource($this->whenLoaded('mainImage')),
+            ]),
+        ];
+    }
+
+    private function setStatus($status, $deleted_at)
+    {
+        if (! is_null($deleted_at)) {
+            return RecordStatusEnum::DELETED->name;
+        } else {
+            return $status->name;
+        }
+    }
+}
diff --git a/api/app/Http/Resources/ProductUnitResource.php b/api/app/Http/Resources/ProductUnitResource.php
new file mode 100644
index 000000000..cb1ccb140
--- /dev/null
+++ b/api/app/Http/Resources/ProductUnitResource.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductUnitResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('product'), [
+                'product' => new ProductResource($this->whenLoaded('product')),
+            ]),
+            $this->mergeWhen(
+                $this->relationLoaded('product')
+                && $this->product
+                && $this->product->relationLoaded('images'),
+                function () {
+                    return [
+                        'product_images' => ProductImageResource::collection($this->product->images),
+                    ];
+                }
+            ),
+            'code' => $this->code,
+            'is_manufacturer_sku' => $this->is_manufacturer_sku,
+            $this->mergeWhen($this->relationLoaded('unit'), [
+                'unit' => new UnitResource($this->whenLoaded('unit')),
+            ]),
+            'price' => $this->price,
+            'is_base' => $this->is_base,
+            'conversion_value' => $this->conversion_value,
+            'base_unit_price' => $this->conversion_value > 0 ? $this->price / $this->conversion_value : 0,
+            'is_primary_unit' => $this->is_primary_unit,
+            'point' => $this->point,
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseAdditionalCostCategoryResource.php b/api/app/Http/Resources/PurchaseAdditionalCostCategoryResource.php
new file mode 100644
index 000000000..3a55b4c7f
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseAdditionalCostCategoryResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseAdditionalCostCategoryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseAdditionalCostPaymentResource.php b/api/app/Http/Resources/PurchaseAdditionalCostPaymentResource.php
new file mode 100644
index 000000000..907eb6fbc
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseAdditionalCostPaymentResource.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseAdditionalCostPaymentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseAdditionalCost'), [
+                'purchase_additional_cost' => new PurchaseAdditionalCostResource($this->whenLoaded('purchaseAdditionalCost')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'code' => $this->code,
+            'date' => $this->date,
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseAdditionalCostResource.php b/api/app/Http/Resources/PurchaseAdditionalCostResource.php
new file mode 100644
index 000000000..c8354569f
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseAdditionalCostResource.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseAdditionalCostResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchase'), [
+                'purchase' => new PurchaseResource($this->whenLoaded('purchase')),
+            ]),
+            'code' => $this->code,
+            'date' => $this->date,
+            'due_days' => $this->due_days,
+            $this->mergeWhen($this->relationLoaded('category'), [
+                'category' => new PurchaseAdditionalCostCategoryResource($this->whenLoaded('category')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('paidImmediatelyCashAccount'), [
+                'paid_immediately_cash_account' => new CashAccountResource($this->whenLoaded('paidImmediatelyCashAccount')),
+            ]),
+            'amount_paid_immediately' => dec_trim($this->amount_paid_immediately),
+            'amount_payable' => dec_trim($this->amount_payable),
+            'amount_payable_paid' => dec_trim($this->amount_payable_paid),
+            'amount_payable_due' => dec_trim($this->amount_payable_due),
+            'is_amount_payable_paid_off' => $this->is_amount_payable_paid_off,
+            'amount_total' => dec_trim($this->amount_total),
+            'remarks' => $this->remarks,
+            $this->mergeWhen($this->relationLoaded('payments'), [
+                'payments' => PurchaseAdditionalCostPaymentResource::collection($this->whenLoaded('payments')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseGlobalDiscountResource.php b/api/app/Http/Resources/PurchaseGlobalDiscountResource.php
new file mode 100644
index 000000000..bdaead8e8
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseGlobalDiscountResource.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseGlobalDiscountResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchase'), [
+                'purchase' => new PurchaseResource($this->whenLoaded('purchase')),
+            ]),
+            'sequence' => $this->sequence,
+            'discount_type' => $this->discount_type?->value,
+            'discount_value' => dec_trim($this->discount_value),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseItemProductUnitPriceDiscountResource.php b/api/app/Http/Resources/PurchaseItemProductUnitPriceDiscountResource.php
new file mode 100644
index 000000000..e456761eb
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseItemProductUnitPriceDiscountResource.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseItemProductUnitPriceDiscountResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseItem'), [
+                'purchase_item' => new PurchaseItemResource($this->whenLoaded('purchaseItem')),
+            ]),
+            'sequence' => $this->sequence,
+            'discount_type' => $this->discount_type?->value,
+            'discount_value' => dec_trim($this->discount_value),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseItemResource.php b/api/app/Http/Resources/PurchaseItemResource.php
new file mode 100644
index 000000000..39228a8d5
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseItemResource.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchase'), [
+                'purchase' => new PurchaseResource($this->whenLoaded('purchase')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('productUnit'), [
+                'product_unit' => new ProductUnitResource($this->whenLoaded('productUnit')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('vatProfile'), [
+                'vat_profile' => new VatProfileResource($this->whenLoaded('vatProfile')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('productUnitPriceDiscounts'), [
+                'product_unit_price_discounts' => PurchaseItemProductUnitPriceDiscountResource::collection(
+                    $this->whenLoaded('productUnitPriceDiscounts')
+                ),
+            ]),
+            $this->mergeWhen($this->relationLoaded('subtotalDiscounts'), [
+                'subtotal_discounts' => PurchaseItemSubtotalDiscountResource::collection(
+                    $this->whenLoaded('subtotalDiscounts')
+                ),
+            ]),
+
+            'has_purchase_order_item_product' => (bool) $this->has_purchase_order_item_product,
+            'qty' => dec_trim($this->qty),
+            'product_unit_conversion_value' => dec_trim($this->product_unit_conversion_value),
+            'product_unit_qty_base' => dec_trim($this->product_unit_qty_base),
+            'qty_received_base' => dec_trim($this->qty_received_base),
+            'qty_outstanding_base' => dec_trim($this->qty_outstanding_base),
+            'qty_excess_base' => dec_trim($this->qty_excess_base),
+            'product_unit_price' => dec_trim($this->product_unit_price),
+            'product_unit_is_price_include_vat' => $this->product_unit_is_price_include_vat,
+
+            'price_discount' => dec_trim($this->price_discount),
+            'price_after_discount' => dec_trim($this->price_after_discount),
+            'subtotal' => dec_trim($this->subtotal),
+            'subtotal_discount' => dec_trim($this->subtotal_discount),
+            'subtotal_after_discount' => dec_trim($this->subtotal_after_discount),
+            'global_discount' => dec_trim($this->global_discount),
+            'subtotal_after_global_discount' => dec_trim($this->subtotal_after_global_discount),
+
+            'vat_rate' => dec_trim($this->vat_rate),
+            'vat_base_numerator' => $this->vat_base_numerator,
+            'vat_base_denominator' => $this->vat_base_denominator,
+            'vat_base' => dec_trim($this->vat_base),
+            'vat' => dec_trim($this->vat),
+            'subtotal_after_vat' => dec_trim($this->subtotal_after_vat),
+
+            'additional_cost' => dec_trim($this->additional_cost),
+            'rounding' => dec_trim($this->rounding),
+            'amount_payable' => dec_trim($this->amount_payable),
+            'cogs' => dec_trim($this->cogs),
+            'total_cogs' => dec_trim($this->total_cogs),
+            'base_unit_cogs' => dec_trim($this->base_unit_cogs),
+
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseItemSubtotalDiscountResource.php b/api/app/Http/Resources/PurchaseItemSubtotalDiscountResource.php
new file mode 100644
index 000000000..f02929c9b
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseItemSubtotalDiscountResource.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseItemSubtotalDiscountResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseItem'), [
+                'purchase_item' => new PurchaseItemResource($this->whenLoaded('purchaseItem')),
+            ]),
+            'sequence' => $this->sequence,
+            'discount_type' => $this->discount_type?->value,
+            'discount_value' => dec_trim($this->discount_value),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseOrderDownPaymentRefundResource.php b/api/app/Http/Resources/PurchaseOrderDownPaymentRefundResource.php
new file mode 100644
index 000000000..f0bbf88f3
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseOrderDownPaymentRefundResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseOrderDownPaymentRefundResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseOrder'), [
+                'purchase_order' => new PurchaseOrderResource($this->whenLoaded('purchaseOrder')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseOrderDownPaymentResource.php b/api/app/Http/Resources/PurchaseOrderDownPaymentResource.php
new file mode 100644
index 000000000..ce590978d
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseOrderDownPaymentResource.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseOrderDownPaymentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseOrder'), [
+                'purchase_order' => new PurchaseOrderResource($this->whenLoaded('purchaseOrder')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'amount_allocated' => dec_trim($this->amount_allocated),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseOrderGlobalDiscountResource.php b/api/app/Http/Resources/PurchaseOrderGlobalDiscountResource.php
new file mode 100644
index 000000000..b0d8bdffe
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseOrderGlobalDiscountResource.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseOrderGlobalDiscountResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseOrder'), [
+                'purchase_order' => new PurchaseOrderResource($this->whenLoaded('purchaseOrder')),
+            ]),
+            'sequence' => $this->sequence,
+            'discount_type' => $this->discount_type?->value,
+            'discount_value' => dec_trim($this->discount_value),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseOrderItemProductUnitPriceDiscountResource.php b/api/app/Http/Resources/PurchaseOrderItemProductUnitPriceDiscountResource.php
new file mode 100644
index 000000000..a94f7d372
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseOrderItemProductUnitPriceDiscountResource.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseOrderItemProductUnitPriceDiscountResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseOrderItem'), [
+                'purchase_order_item' => new PurchaseOrderItemResource($this->whenLoaded('purchaseOrderItem')),
+            ]),
+            'sequence' => $this->sequence,
+            'discount_type' => $this->discount_type?->value,
+            'discount_value' => dec_trim($this->discount_value),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseOrderItemResource.php b/api/app/Http/Resources/PurchaseOrderItemResource.php
new file mode 100644
index 000000000..74884430e
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseOrderItemResource.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseOrderItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseOrder'), [
+                'purchase_order' => new PurchaseOrderResource($this->whenLoaded('purchaseOrder')),
+            ]),
+            'qty' => dec_trim($this->qty),
+            $this->mergeWhen($this->relationLoaded('productUnit'), [
+                'product_unit' => new ProductUnitResource($this->whenLoaded('productUnit')),
+            ]),
+            'product_unit_conversion_value' => dec_trim($this->product_unit_conversion_value),
+            'product_unit_qty_base' => dec_trim($this->product_unit_qty_base),
+            'qty_purchased_base' => dec_trim($this->qty_purchased_base),
+            'qty_outstanding_base' => dec_trim($this->qty_outstanding_base),
+            'qty_excess_base' => dec_trim($this->qty_excess_base),
+            'product_unit_price' => dec_trim($this->product_unit_price),
+            'product_unit_is_price_include_vat' => $this->product_unit_is_price_include_vat,
+            'price_discount' => dec_trim($this->price_discount),
+            'product_unit_price_discounts' => PurchaseOrderItemProductUnitPriceDiscountResource::collection($this->whenLoaded('productUnitPriceDiscounts')),
+            'price_after_discount' => dec_trim($this->price_after_discount),
+            'subtotal' => dec_trim($this->subtotal),
+            'subtotal_discount' => dec_trim($this->subtotal_discount),
+            'subtotal_discounts' => PurchaseOrderItemSubtotalDiscountResource::collection($this->whenLoaded('subtotalDiscounts')),
+            'subtotal_after_discount' => dec_trim($this->subtotal_after_discount),
+            'global_discount' => dec_trim($this->global_discount),
+            'subtotal_after_global_discount' => dec_trim($this->subtotal_after_global_discount),
+            $this->mergeWhen($this->relationLoaded('vatProfile'), [
+                'vat_profile' => new VatProfileResource($this->whenLoaded('vatProfile')),
+            ]),
+            'vat_rate' => dec_trim($this->vat_rate),
+            'vat_base_numerator' => $this->vat_base_numerator,
+            'vat_base_denominator' => $this->vat_base_denominator,
+            'vat_base' => dec_trim($this->vat_base),
+            'vat' => dec_trim($this->vat),
+            'subtotal_after_vat' => dec_trim($this->subtotal_after_vat),
+            'rounding' => dec_trim($this->rounding),
+            'amount_payable' => dec_trim($this->amount_payable),
+            'cogs' => dec_trim($this->cogs),
+            'total_cogs' => dec_trim($this->total_cogs),
+            'base_unit_cogs' => dec_trim($this->base_unit_cogs),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseOrderItemSubtotalDiscountResource.php b/api/app/Http/Resources/PurchaseOrderItemSubtotalDiscountResource.php
new file mode 100644
index 000000000..0beaa9759
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseOrderItemSubtotalDiscountResource.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseOrderItemSubtotalDiscountResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseOrderItem'), [
+                'purchase_order_item' => new PurchaseOrderItemResource($this->whenLoaded('purchaseOrderItem')),
+            ]),
+            'sequence' => $this->sequence,
+            'discount_type' => $this->discount_type?->value,
+            'discount_value' => dec_trim($this->discount_value),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseOrderResource.php b/api/app/Http/Resources/PurchaseOrderResource.php
new file mode 100644
index 000000000..3f3478f66
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseOrderResource.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseOrderResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'due_days' => $this->due_days,
+            $this->mergeWhen($this->relationLoaded('supplier'), [
+                'supplier' => new SupplierResource($this->whenLoaded('supplier')),
+            ]),
+            'remarks' => $this->remarks,
+            'item_total_before_global_discount' => dec_trim($this->item_total_before_global_discount),
+            'global_discount' => dec_trim($this->global_discount),
+            'item_total_after_global_discount' => dec_trim($this->item_total_after_global_discount),
+            'vat_base' => dec_trim($this->vat_base),
+            'vat' => dec_trim($this->vat),
+            'item_total_after_vat' => dec_trim($this->item_total_after_vat),
+            'rounding' => dec_trim($this->rounding),
+            'amount_payable' => dec_trim($this->amount_payable),
+            'amount_paid_down_payment' => dec_trim($this->amount_paid_down_payment),
+            'amount_allocated_down_payment' => dec_trim($this->amount_allocated_down_payment),
+            'amount_refunded_down_payment' => dec_trim($this->amount_refunded_down_payment),
+            'amount_available_down_payment' => dec_trim($this->amount_available_down_payment),
+            'progress_status' => $this->progress_status?->value,
+            'item_total_count' => $this->item_total_count,
+            'item_matched_count' => $this->item_matched_count,
+            'item_less_count' => $this->item_less_count,
+            'item_more_count' => $this->item_more_count,
+            'item_unlinked_count' => $this->item_unlinked_count,
+            'global_discounts' => PurchaseOrderGlobalDiscountResource::collection($this->whenLoaded('globalDiscounts')),
+            'items' => PurchaseOrderItemResource::collection($this->whenLoaded('items')),
+            'down_payments' => PurchaseOrderDownPaymentResource::collection($this->whenLoaded('downPayments')),
+            'refunded_down_payments' => PurchaseOrderDownPaymentRefundResource::collection($this->whenLoaded('refundedDownPayments')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseReceiptItemResource.php b/api/app/Http/Resources/PurchaseReceiptItemResource.php
new file mode 100644
index 000000000..34104f881
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseReceiptItemResource.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseReceiptItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseReceipt'), [
+                'purchase_receipt' => new PurchaseReceiptResource($this->whenLoaded('purchaseReceipt')),
+            ]),
+            'has_purchase_item_product' => (bool) $this->has_purchase_item_product,
+            'qty' => dec_trim($this->qty),
+            $this->mergeWhen($this->relationLoaded('productUnit'), [
+                'product_unit' => new ProductUnitResource($this->whenLoaded('productUnit')),
+            ]),
+            'product_unit_conversion_value' => dec_trim($this->product_unit_conversion_value),
+            'product_unit_qty_base' => dec_trim($this->product_unit_qty_base),
+            'remarks' => $this->remarks,
+
+            $this->mergeWhen($this->relationLoaded('serials'), [
+                'serials' => PurchaseReceiptItemSerialResource::collection($this->whenLoaded('serials')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseReceiptItemSerialResource.php b/api/app/Http/Resources/PurchaseReceiptItemSerialResource.php
new file mode 100644
index 000000000..78cc6e361
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseReceiptItemSerialResource.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseReceiptItemSerialResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseReceipt'), [
+                'purchase_receipt' => new PurchaseReceiptResource($this->whenLoaded('purchaseReceipt')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseReceiptItem'), [
+                'purchase_receipt_item' => new PurchaseReceiptItemResource($this->whenLoaded('purchaseReceiptItem')),
+            ]),
+            'serial' => $this->serial,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseReceiptResource.php b/api/app/Http/Resources/PurchaseReceiptResource.php
new file mode 100644
index 000000000..ee5fb089e
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseReceiptResource.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseReceiptResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('supplier'), [
+                'supplier' => new SupplierResource($this->whenLoaded('supplier')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchase'), [
+                'purchase' => new PurchaseResource($this->whenLoaded('purchase')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'is_linked_to_purchase' => ! is_null($this->purchase_id),
+            'is_from_direct_purchase' => $this->is_from_direct_purchase,
+            $this->mergeWhen($this->relationLoaded('warehouse'), [
+                'warehouse' => new WarehouseResource($this->whenLoaded('warehouse')),
+            ]),
+            'remarks' => $this->remarks,
+            'is_posted' => $this->is_posted,
+
+            $this->mergeWhen($this->relationLoaded('items'), [
+                'items' => PurchaseReceiptItemResource::collection($this->whenLoaded('items')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/PurchaseResource.php b/api/app/Http/Resources/PurchaseResource.php
new file mode 100644
index 000000000..44c7c4df9
--- /dev/null
+++ b/api/app/Http/Resources/PurchaseResource.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class PurchaseResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'due_days' => $this->due_days,
+            $this->mergeWhen($this->relationLoaded('supplier'), [
+                'supplier' => new SupplierResource($this->whenLoaded('supplier')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('purchaseOrder'), [
+                'purchase_order' => new PurchaseOrderResource($this->whenLoaded('purchaseOrder')),
+            ]),
+            'receipt_mode' => $this->receipt_mode?->value,
+            'tax_invoice_number' => $this->tax_invoice_number,
+            'tax_invoice_vat_base' => dec_trim($this->tax_invoice_vat_base),
+            'tax_invoice_vat' => dec_trim($this->tax_invoice_vat),
+            'remarks' => $this->remarks,
+            'is_posted' => $this->is_posted,
+            'item_total_before_global_discount' => dec_trim($this->item_total_before_global_discount),
+            'global_discount' => dec_trim($this->global_discount),
+            'item_total_after_global_discount' => dec_trim($this->item_total_after_global_discount),
+            'vat_base' => dec_trim($this->vat_base),
+            'vat' => dec_trim($this->vat),
+            'item_total_after_vat' => dec_trim($this->item_total_after_vat),
+            'additional_cost' => dec_trim($this->additional_cost),
+            'rounding' => dec_trim($this->rounding),
+            'amount_payable' => dec_trim($this->amount_payable),
+            'amount_paid_by_purchase_order_down_payment' => dec_trim($this->amount_paid_by_purchase_order_down_payment),
+            'amount_paid_by_purchase_return' => dec_trim($this->amount_paid_by_purchase_return),
+            'amount_paid_total' => dec_trim($this->amount_paid_total),
+            'amount_due' => dec_trim($this->amount_due),
+            'is_paid_off' => $this->is_paid_off,
+            'progress_status' => $this->progress_status?->value,
+            'item_total_count' => $this->item_total_count,
+            'item_matched_count' => $this->item_matched_count,
+            'item_less_count' => $this->item_less_count,
+            'item_more_count' => $this->item_more_count,
+            'item_unlinked_count' => $this->item_unlinked_count,
+            $this->mergeWhen($this->relationLoaded('items'), [
+                'items' => PurchaseItemResource::collection($this->whenLoaded('items')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('directReceipt'), [
+                'direct_receipt' => new PurchaseReceiptResource($this->whenLoaded('directReceipt')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('manualReceipts'), [
+                'manual_receipts' => PurchaseReceiptResource::collection($this->whenLoaded('manualReceipts')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('globalDiscounts'), [
+                'global_discounts' => PurchaseGlobalDiscountResource::collection($this->whenLoaded('globalDiscounts')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('additionalCosts'), [
+                'additional_costs' => PurchaseAdditionalCostResource::collection($this->whenLoaded('additionalCosts')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ReceivableCategoryResource.php b/api/app/Http/Resources/ReceivableCategoryResource.php
new file mode 100644
index 000000000..9e25555bd
--- /dev/null
+++ b/api/app/Http/Resources/ReceivableCategoryResource.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ReceivableCategoryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'sequence' => $this->sequence,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ReceivablePaymentResource.php b/api/app/Http/Resources/ReceivablePaymentResource.php
new file mode 100644
index 000000000..d5b395582
--- /dev/null
+++ b/api/app/Http/Resources/ReceivablePaymentResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ReceivablePaymentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('receivable'), [
+                'receivable' => new ReceivableResource($this->whenLoaded('receivable')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'amount' => dec_trim($this->amount),
+            'remarks' => $this->remarks,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/ReceivableResource.php b/api/app/Http/Resources/ReceivableResource.php
new file mode 100644
index 000000000..da3913029
--- /dev/null
+++ b/api/app/Http/Resources/ReceivableResource.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ReceivableResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            $this->mergeWhen($this->relationLoaded('category'), [
+                'category' => new ReceivableCategoryResource($this->whenLoaded('category')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('customer'), [
+                'customer' => new CustomerResource($this->whenLoaded('customer')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('cashAccount'), [
+                'cash_account' => new CashAccountResource($this->whenLoaded('cashAccount')),
+            ]),
+            'direct_amount_received' => dec_trim($this->direct_amount_received),
+            'opening_amount_due' => dec_trim($this->opening_amount_due),
+            'amount_total' => dec_trim($this->amount_total),
+            'amount_paid_by_cash_account' => dec_trim($this->amount_paid_by_cash_account),
+            'amount_paid_by_stock_adjustment' => dec_trim($this->amount_paid_by_stock_adjustment),
+            'amount_due' => dec_trim($this->amount_due),
+            'due_days' => $this->due_days,
+            'is_paid_off' => $this->is_paid_off,
+            'remarks' => $this->remarks,
+            $this->mergeWhen($this->relationLoaded('payments'), [
+                'payments' => ReceivablePaymentResource::collection($this->whenLoaded('payments')),
+            ]),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockAdjustmentCategoryResource.php b/api/app/Http/Resources/StockAdjustmentCategoryResource.php
new file mode 100644
index 000000000..35baf5c73
--- /dev/null
+++ b/api/app/Http/Resources/StockAdjustmentCategoryResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentCategoryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockAdjustmentInItemResource.php b/api/app/Http/Resources/StockAdjustmentInItemResource.php
new file mode 100644
index 000000000..e00b795c2
--- /dev/null
+++ b/api/app/Http/Resources/StockAdjustmentInItemResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentInItemResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'branch' => new BranchResource($this->whenLoaded('branch')),
+            'stock_adjustment' => new StockAdjustmentResource($this->whenLoaded('stockAdjustment')),
+            'qty' => dec_trim($this->qty),
+            'product_unit' => new ProductUnitResource($this->whenLoaded('productUnit')),
+            'product_unit_conversion_value' => dec_trim($this->product_unit_conversion_value),
+            'product_unit_qty_base' => dec_trim($this->product_unit_qty_base),
+            'product_unit_cogs' => dec_trim($this->product_unit_cogs),
+            'product_unit_total_cogs' => dec_trim($this->product_unit_total_cogs),
+            'product_unit_base_unit_cogs' => dec_trim($this->product_unit_base_unit_cogs),
+            'remarks' => $this->remarks,
+            'serials' => StockAdjustmentInItemSerialResource::collection($this->whenLoaded('serials')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockAdjustmentInItemSerialResource.php b/api/app/Http/Resources/StockAdjustmentInItemSerialResource.php
new file mode 100644
index 000000000..9083dfb2f
--- /dev/null
+++ b/api/app/Http/Resources/StockAdjustmentInItemSerialResource.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentInItemSerialResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('stockAdjustment'), [
+                'stock_adjustment' => new StockAdjustmentResource($this->whenLoaded('stockAdjustment')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('stockAdjustmentInItem'), [
+                'stock_adjustment_in_item' => new StockAdjustmentInItemResource($this->whenLoaded('stockAdjustmentInItem')),
+            ]),
+            'serial' => $this->serial,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockAdjustmentOutItemResource.php b/api/app/Http/Resources/StockAdjustmentOutItemResource.php
new file mode 100644
index 000000000..6c7ce2ce6
--- /dev/null
+++ b/api/app/Http/Resources/StockAdjustmentOutItemResource.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentOutItemResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'branch' => new BranchResource($this->whenLoaded('branch')),
+            'stock_adjustment' => new StockAdjustmentResource($this->whenLoaded('stockAdjustment')),
+            'qty' => dec_trim($this->qty),
+            'product_unit' => new ProductUnitResource($this->whenLoaded('productUnit')),
+            'product_unit_conversion_value' => dec_trim($this->product_unit_conversion_value),
+            'product_unit_qty_base' => dec_trim($this->product_unit_qty_base),
+            'remarks' => $this->remarks,
+            'serials' => StockAdjustmentOutItemSerialResource::collection($this->whenLoaded('serials')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockAdjustmentOutItemSerialResource.php b/api/app/Http/Resources/StockAdjustmentOutItemSerialResource.php
new file mode 100644
index 000000000..eb8b318bf
--- /dev/null
+++ b/api/app/Http/Resources/StockAdjustmentOutItemSerialResource.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentOutItemSerialResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('stockAdjustment'), [
+                'stock_adjustment' => new StockAdjustmentResource($this->whenLoaded('stockAdjustment')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('stockAdjustmentOutItem'), [
+                'stock_adjustment_out_item' => new StockAdjustmentOutItemResource($this->whenLoaded('stockAdjustmentOutItem')),
+            ]),
+            'serial' => $this->serial,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockAdjustmentResource.php b/api/app/Http/Resources/StockAdjustmentResource.php
new file mode 100644
index 000000000..e70424ce9
--- /dev/null
+++ b/api/app/Http/Resources/StockAdjustmentResource.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'branch' => new BranchResource($this->whenLoaded('branch')),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'category' => new StockAdjustmentCategoryResource($this->whenLoaded('category')),
+            'in_warehouse' => new WarehouseResource($this->whenLoaded('inWarehouse')),
+            'out_warehouse' => new WarehouseResource($this->whenLoaded('outWarehouse')),
+            'remarks' => $this->remarks,
+            'is_posted' => $this->is_posted,
+            'total_incoming_item_qty' => dec_trim($this->total_incoming_item_qty),
+            'total_incoming_item_cogs' => dec_trim($this->total_incoming_item_cogs),
+            'total_outgoing_item_qty' => dec_trim($this->total_outgoing_item_qty),
+
+            'in_items' => StockAdjustmentInItemResource::collection($this->whenLoaded('inItems')),
+            'out_items' => StockAdjustmentOutItemResource::collection($this->whenLoaded('outItems')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockTransferItemResource.php b/api/app/Http/Resources/StockTransferItemResource.php
new file mode 100644
index 000000000..5068c19a7
--- /dev/null
+++ b/api/app/Http/Resources/StockTransferItemResource.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferItemResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'branch' => new BranchResource($this->whenLoaded('branch')),
+            'stock_transfer' => new StockTransferResource($this->whenLoaded('stockTransfer')),
+            'qty' => dec_trim($this->qty),
+            'product_unit' => new ProductUnitResource($this->whenLoaded('productUnit')),
+            'product_unit_conversion_value' => dec_trim($this->product_unit_conversion_value),
+            'product_unit_qty_base' => dec_trim($this->product_unit_qty_base),
+            'remarks' => $this->remarks,
+            'serials' => StockTransferItemSerialResource::collection($this->whenLoaded('serials')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockTransferItemSerialResource.php b/api/app/Http/Resources/StockTransferItemSerialResource.php
new file mode 100644
index 000000000..3c559806c
--- /dev/null
+++ b/api/app/Http/Resources/StockTransferItemSerialResource.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferItemSerialResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('stockTransfer'), [
+                'stock_transfer' => new StockTransferResource($this->whenLoaded('stockTransfer')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('stockTransferItem'), [
+                'stock_transfer_item' => new StockTransferItemResource($this->whenLoaded('stockTransferItem')),
+            ]),
+            'serial' => $this->serial,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/StockTransferResource.php b/api/app/Http/Resources/StockTransferResource.php
new file mode 100644
index 000000000..389b38a2e
--- /dev/null
+++ b/api/app/Http/Resources/StockTransferResource.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Helpers\TimezoneHelper;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            'company' => new CompanyResource($this->whenLoaded('company')),
+            'branch' => new BranchResource($this->whenLoaded('branch')),
+            'code' => $this->code,
+            'date' => TimezoneHelper::convertFromUTCIfValid($this->date),
+            'source_warehouse' => new WarehouseResource($this->whenLoaded('sourceWarehouse')),
+            'destination_warehouse' => new WarehouseResource($this->whenLoaded('destinationWarehouse')),
+            'remarks' => $this->remarks,
+            'is_posted' => $this->is_posted,
+            'items' => StockTransferItemResource::collection($this->whenLoaded('stockTransferItems')),
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/SupplierResource.php b/api/app/Http/Resources/SupplierResource.php
new file mode 100644
index 000000000..743499153
--- /dev/null
+++ b/api/app/Http/Resources/SupplierResource.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Enums\RecordStatusEnum;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class SupplierResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'address' => $this->address,
+            'payment_term_type' => $this->payment_term_type,
+            'payment_term' => $this->payment_term,
+            'taxable_enterprise' => $this->taxable_enterprise,
+            'tax_id' => $this->tax_id,
+            'status' => $this->setStatus($this->status, $this->deleted_at),
+            'remarks' => $this->remarks,
+        ];
+    }
+
+    private function setStatus($status, $deleted_at)
+    {
+        if (! is_null($deleted_at)) {
+            return RecordStatusEnum::DELETED->name;
+        } else {
+            return $status->name;
+        }
+    }
+}
diff --git a/api/app/Http/Resources/UnitResource.php b/api/app/Http/Resources/UnitResource.php
new file mode 100644
index 000000000..f7dd6730a
--- /dev/null
+++ b/api/app/Http/Resources/UnitResource.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class UnitResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
+     */
+    public function toArray($request)
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'description' => $this->description,
+            'type' => $this->type->value,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/VatProfileResource.php b/api/app/Http/Resources/VatProfileResource.php
new file mode 100644
index 000000000..9f3d1c776
--- /dev/null
+++ b/api/app/Http/Resources/VatProfileResource.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class VatProfileResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'vat_rate' => dec_trim($this->vat_rate),
+            'vat_base_numerator' => $this->vat_base_numerator,
+            'vat_base_denominator' => $this->vat_base_denominator,
+            'remarks' => $this->remarks,
+            'is_active' => $this->is_active,
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/WarehouseResource.php b/api/app/Http/Resources/WarehouseResource.php
new file mode 100644
index 000000000..7c34b6f6a
--- /dev/null
+++ b/api/app/Http/Resources/WarehouseResource.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Enums\RecordStatusEnum;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Vinkla\Hashids\Facades\Hashids;
+
+class WarehouseResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
+     */
+    public function toArray($request)
+    {
+        return [
+            'id' => Hashids::encode($this->id),
+            'ulid' => $this->ulid,
+            $this->mergeWhen($this->relationLoaded('company'), [
+                'company' => new CompanyResource($this->whenLoaded('company')),
+            ]),
+            $this->mergeWhen($this->relationLoaded('branch'), [
+                'branch' => new BranchResource($this->whenLoaded('branch')),
+            ]),
+            'code' => $this->code,
+            'name' => $this->name,
+            'address' => $this->address,
+            'city' => $this->city,
+            'contact' => $this->contact,
+            'remarks' => $this->remarks,
+            'status' => $this->setStatus($this->status, $this->deleted_at),
+        ];
+    }
+
+    private function setStatus($status, $deleted_at)
+    {
+        if (! is_null($deleted_at)) {
+            return RecordStatusEnum::DELETED->name;
+        } else {
+            return $status->name;
+        }
+    }
+}
diff --git a/api/app/Models/Asset.php b/api/app/Models/Asset.php
new file mode 100644
index 000000000..3662e4ad8
--- /dev/null
+++ b/api/app/Models/Asset.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\RecordStatusEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Asset extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'asset_category_id',
+        'code',
+        'name',
+        'asset_unit_id',
+        'status',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'status' => RecordStatusEnum::class,
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function assetCategory()
+    {
+        return $this->belongsTo(AssetCategory::class)->withTrashed();
+    }
+
+    public function assetUnit()
+    {
+        return $this->belongsTo(AssetUnit::class)->withTrashed();
+    }
+
+    public function assetAdjustmentInItems()
+    {
+        return $this->hasMany(AssetAdjustmentInItem::class);
+    }
+
+    public function assetAdjustmentOutItems()
+    {
+        return $this->hasMany(AssetAdjustmentOutItem::class);
+    }
+
+    public function assetPurchaseItems()
+    {
+        return $this->hasMany(AssetPurchaseItem::class);
+    }
+
+    public function assetSaleItems()
+    {
+        return $this->hasMany(AssetSaleItem::class);
+    }
+}
diff --git a/api/app/Models/AssetAdjustment.php b/api/app/Models/AssetAdjustment.php
new file mode 100644
index 000000000..6783781af
--- /dev/null
+++ b/api/app/Models/AssetAdjustment.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetAdjustment extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'remarks',
+        'is_posted',
+        'total_incoming_asset_qty',
+        'total_outgoing_asset_qty',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'date' => 'datetime',
+            'is_posted' => 'boolean',
+            'total_incoming_asset_qty' => 'decimal:8',
+            'total_outgoing_asset_qty' => 'decimal:8',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function inItems()
+    {
+        return $this->hasMany(AssetAdjustmentInItem::class);
+    }
+
+    public function outItems()
+    {
+        return $this->hasMany(AssetAdjustmentOutItem::class);
+    }
+}
diff --git a/api/app/Models/AssetAdjustmentInItem.php b/api/app/Models/AssetAdjustmentInItem.php
new file mode 100644
index 000000000..cccfaed61
--- /dev/null
+++ b/api/app/Models/AssetAdjustmentInItem.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetAdjustmentInItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'asset_adjustment_id',
+        'asset_id',
+        'qty',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'qty' => 'decimal:8',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function assetAdjustment()
+    {
+        return $this->belongsTo(AssetAdjustment::class)->withTrashed();
+    }
+
+    public function asset()
+    {
+        return $this->belongsTo(Asset::class)->withTrashed();
+    }
+
+    public function serials()
+    {
+        return $this->hasMany(AssetAdjustmentInItemSerial::class);
+    }
+}
diff --git a/api/app/Models/AssetAdjustmentInItemSerial.php b/api/app/Models/AssetAdjustmentInItemSerial.php
new file mode 100644
index 000000000..af39db12c
--- /dev/null
+++ b/api/app/Models/AssetAdjustmentInItemSerial.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetAdjustmentInItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'asset_adjustment_id',
+        'asset_adjustment_in_item_id',
+        'serial',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function assetAdjustment()
+    {
+        return $this->belongsTo(AssetAdjustment::class)->withTrashed();
+    }
+
+    public function assetAdjustmentInItem()
+    {
+        return $this->belongsTo(AssetAdjustmentInItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/AssetAdjustmentOutItem.php b/api/app/Models/AssetAdjustmentOutItem.php
new file mode 100644
index 000000000..588ec17a9
--- /dev/null
+++ b/api/app/Models/AssetAdjustmentOutItem.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetAdjustmentOutItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'asset_adjustment_id',
+        'asset_id',
+        'qty',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'qty' => 'decimal:8',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function assetAdjustment()
+    {
+        return $this->belongsTo(AssetAdjustment::class)->withTrashed();
+    }
+
+    public function asset()
+    {
+        return $this->belongsTo(Asset::class)->withTrashed();
+    }
+
+    public function serials()
+    {
+        return $this->hasMany(AssetAdjustmentOutItemSerial::class);
+    }
+}
diff --git a/api/app/Models/AssetAdjustmentOutItemSerial.php b/api/app/Models/AssetAdjustmentOutItemSerial.php
new file mode 100644
index 000000000..1d9962d6c
--- /dev/null
+++ b/api/app/Models/AssetAdjustmentOutItemSerial.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetAdjustmentOutItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'asset_adjustment_id',
+        'asset_adjustment_out_item_id',
+        'serial',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function assetAdjustment()
+    {
+        return $this->belongsTo(AssetAdjustment::class)->withTrashed();
+    }
+
+    public function assetAdjustmentOutItem()
+    {
+        return $this->belongsTo(AssetAdjustmentOutItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/AssetCategory.php b/api/app/Models/AssetCategory.php
new file mode 100644
index 000000000..252e55975
--- /dev/null
+++ b/api/app/Models/AssetCategory.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetCategory extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'estimated_useful_life_months',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'estimated_useful_life_months' => 'integer',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function assets()
+    {
+        return $this->hasMany(Asset::class);
+    }
+}
diff --git a/api/app/Models/AssetPurchase.php b/api/app/Models/AssetPurchase.php
new file mode 100644
index 000000000..87fa446cd
--- /dev/null
+++ b/api/app/Models/AssetPurchase.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetPurchase extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'due_days',
+        'supplier_id',
+        'remarks',
+        'is_posted',
+        'item_total',
+        'additional_cost',
+        'rounding',
+        'amount_payable',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'date' => 'datetime',
+            'due_days' => 'integer',
+            'is_posted' => 'boolean',
+            'item_total' => 'decimal:8',
+            'additional_cost' => 'decimal:8',
+            'rounding' => 'decimal:8',
+            'amount_payable' => 'decimal:8',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function supplier()
+    {
+        return $this->belongsTo(Supplier::class)->withTrashed();
+    }
+
+    public function items()
+    {
+        return $this->hasMany(AssetPurchaseItem::class);
+    }
+}
diff --git a/api/app/Models/AssetPurchaseItem.php b/api/app/Models/AssetPurchaseItem.php
new file mode 100644
index 000000000..3ba116e07
--- /dev/null
+++ b/api/app/Models/AssetPurchaseItem.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetPurchaseItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'asset_purchase_id',
+        'asset_id',
+        'qty',
+        'unit_price',
+        'subtotal',
+        'allocated_additional_cost',
+        'subtotal_after_additional_cost',
+        'unit_acquisition_cost',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'qty' => 'decimal:8',
+            'unit_price' => 'decimal:8',
+            'subtotal' => 'decimal:8',
+            'allocated_additional_cost' => 'decimal:8',
+            'subtotal_after_additional_cost' => 'decimal:8',
+            'unit_acquisition_cost' => 'decimal:8',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function assetPurchase()
+    {
+        return $this->belongsTo(AssetPurchase::class)->withTrashed();
+    }
+
+    public function asset()
+    {
+        return $this->belongsTo(Asset::class)->withTrashed();
+    }
+
+    public function serials()
+    {
+        return $this->hasMany(AssetPurchaseItemSerial::class);
+    }
+}
diff --git a/api/app/Models/AssetPurchaseItemSerial.php b/api/app/Models/AssetPurchaseItemSerial.php
new file mode 100644
index 000000000..96b9da8c9
--- /dev/null
+++ b/api/app/Models/AssetPurchaseItemSerial.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetPurchaseItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'asset_purchase_id',
+        'asset_purchase_item_id',
+        'serial',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function assetPurchase()
+    {
+        return $this->belongsTo(AssetPurchase::class)->withTrashed();
+    }
+
+    public function assetPurchaseItem()
+    {
+        return $this->belongsTo(AssetPurchaseItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/AssetSale.php b/api/app/Models/AssetSale.php
new file mode 100644
index 000000000..05f71191d
--- /dev/null
+++ b/api/app/Models/AssetSale.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetSale extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'due_days',
+        'customer_id',
+        'remarks',
+        'is_posted',
+        'item_total',
+        'rounding',
+        'amount_receivable',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'date' => 'datetime',
+            'due_days' => 'integer',
+            'is_posted' => 'boolean',
+            'item_total' => 'decimal:8',
+            'rounding' => 'decimal:8',
+            'amount_receivable' => 'decimal:8',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function customer()
+    {
+        return $this->belongsTo(Customer::class)->withTrashed();
+    }
+
+    public function items()
+    {
+        return $this->hasMany(AssetSaleItem::class);
+    }
+}
diff --git a/api/app/Models/AssetSaleItem.php b/api/app/Models/AssetSaleItem.php
new file mode 100644
index 000000000..ea48c12e4
--- /dev/null
+++ b/api/app/Models/AssetSaleItem.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetSaleItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'asset_sale_id',
+        'asset_id',
+        'qty',
+        'unit_price',
+        'subtotal',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'qty' => 'decimal:8',
+            'unit_price' => 'decimal:8',
+            'subtotal' => 'decimal:8',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function assetSale()
+    {
+        return $this->belongsTo(AssetSale::class)->withTrashed();
+    }
+
+    public function asset()
+    {
+        return $this->belongsTo(Asset::class)->withTrashed();
+    }
+
+    public function serials()
+    {
+        return $this->hasMany(AssetSaleItemSerial::class);
+    }
+}
diff --git a/api/app/Models/AssetSaleItemSerial.php b/api/app/Models/AssetSaleItemSerial.php
new file mode 100644
index 000000000..0355ed9f5
--- /dev/null
+++ b/api/app/Models/AssetSaleItemSerial.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetSaleItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'asset_sale_id',
+        'asset_sale_item_id',
+        'serial',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function assetSale()
+    {
+        return $this->belongsTo(AssetSale::class)->withTrashed();
+    }
+
+    public function assetSaleItem()
+    {
+        return $this->belongsTo(AssetSaleItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/AssetUnit.php b/api/app/Models/AssetUnit.php
new file mode 100644
index 000000000..6874730c5
--- /dev/null
+++ b/api/app/Models/AssetUnit.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AssetUnit extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'description',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function assets()
+    {
+        return $this->hasMany(Asset::class);
+    }
+}
diff --git a/api/app/Models/Branch.php b/api/app/Models/Branch.php
index 22a612baf..184acdc77 100644
--- a/api/app/Models/Branch.php
+++ b/api/app/Models/Branch.php
@@ -2,8 +2,9 @@
 
 namespace App\Models;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
@@ -12,6 +13,7 @@ class Branch extends Model
 {
     use BootableModel;
     use HasFactory;
+    use ScopeableByCompany;
     use SoftDeletes;
 
     protected $fillable = [
@@ -30,7 +32,7 @@ protected function casts(): array
     {
         return [
             'is_main' => 'boolean',
-            'status' => RecordStatus::class,
+            'status' => RecordStatusEnum::class,
         ];
     }
 
@@ -38,4 +40,29 @@ public function company()
     {
         return $this->belongsTo(Company::class);
     }
+
+    public function warehouses()
+    {
+        return $this->hasMany(Warehouse::class);
+    }
+
+    public function cashAccounts()
+    {
+        return $this->hasMany(CashAccount::class);
+    }
+
+    public function stockTransfers()
+    {
+        return $this->hasMany(StockTransfer::class);
+    }
+
+    public function stockTransferItems()
+    {
+        return $this->hasMany(StockTransferItem::class);
+    }
+
+    public function stockTransferItemSerials()
+    {
+        return $this->hasMany(StockTransferItemSerial::class);
+    }
 }
diff --git a/api/app/Models/Brand.php b/api/app/Models/Brand.php
new file mode 100644
index 000000000..e8caad209
--- /dev/null
+++ b/api/app/Models/Brand.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Brand extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function products()
+    {
+        return $this->hasMany(Product::class);
+    }
+}
diff --git a/api/app/Models/CapitalOpening.php b/api/app/Models/CapitalOpening.php
new file mode 100644
index 000000000..ed4e9a6e7
--- /dev/null
+++ b/api/app/Models/CapitalOpening.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class CapitalOpening extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'investor_id',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $capitalOpening): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($capitalOpening): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $capitalOpening->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $capitalOpening->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Capital opening branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $capitalOpening->investor_id,
+                modelClass: Investor::class,
+                errorMessage: 'Capital opening investor must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $capitalOpening->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Capital opening cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $capitalOpening) use ($validateRelations) {
+            $capitalOpening->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $capitalOpening->created_by = auth()->id();
+                $capitalOpening->updated_by = auth()->id();
+            }
+
+            $validateRelations($capitalOpening);
+        });
+
+        static::updating(function (self $capitalOpening) use ($validateRelations) {
+            if (auth()->check()) {
+                $capitalOpening->updated_by = auth()->id();
+            }
+
+            $validateRelations($capitalOpening);
+        });
+
+        static::deleting(function (self $capitalOpening) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $capitalOpening->deleted_by = auth()->id();
+            $capitalOpening->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function investor()
+    {
+        return $this->belongsTo(Investor::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/CapitalTransaction.php b/api/app/Models/CapitalTransaction.php
new file mode 100644
index 000000000..0b1736b7d
--- /dev/null
+++ b/api/app/Models/CapitalTransaction.php
@@ -0,0 +1,135 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\CapitalTransactionTypeEnum;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class CapitalTransaction extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'investor_id',
+        'cash_account_id',
+        'type',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'type' => CapitalTransactionTypeEnum::class,
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $capitalTransaction): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($capitalTransaction): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $capitalTransaction->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $capitalTransaction->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Capital transaction branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $capitalTransaction->investor_id,
+                modelClass: Investor::class,
+                errorMessage: 'Capital transaction investor must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $capitalTransaction->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Capital transaction cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $capitalTransaction) use ($validateRelations) {
+            $capitalTransaction->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $capitalTransaction->created_by = auth()->id();
+                $capitalTransaction->updated_by = auth()->id();
+            }
+
+            $validateRelations($capitalTransaction);
+        });
+
+        static::updating(function (self $capitalTransaction) use ($validateRelations) {
+            if (auth()->check()) {
+                $capitalTransaction->updated_by = auth()->id();
+            }
+
+            $validateRelations($capitalTransaction);
+        });
+
+        static::deleting(function (self $capitalTransaction) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $capitalTransaction->deleted_by = auth()->id();
+            $capitalTransaction->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function investor()
+    {
+        return $this->belongsTo(Investor::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/CashAccount.php b/api/app/Models/CashAccount.php
new file mode 100644
index 000000000..75fd1c808
--- /dev/null
+++ b/api/app/Models/CashAccount.php
@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class CashAccount extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'name',
+        'is_bank',
+        'is_active',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'is_bank' => 'boolean',
+        'is_active' => 'boolean',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $cashAccount): void {
+            if (is_null($cashAccount->branch_id)) {
+                return;
+            }
+
+            $branch = Branch::find($cashAccount->branch_id);
+
+            if (! $branch || (int) $branch->company_id !== (int) $cashAccount->company_id) {
+                throw new InvalidArgumentException('Cash account branch must exist in the same company.');
+            }
+        };
+
+        static::creating(function (self $cashAccount) use ($validateRelations) {
+            $cashAccount->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $cashAccount->created_by = auth()->id();
+                $cashAccount->updated_by = auth()->id();
+            }
+
+            $validateRelations($cashAccount);
+        });
+
+        static::updating(function (self $cashAccount) use ($validateRelations) {
+            if (auth()->check()) {
+                $cashAccount->updated_by = auth()->id();
+            }
+
+            $validateRelations($cashAccount);
+        });
+
+        static::deleting(function (self $cashAccount) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $cashAccount->deleted_by = auth()->id();
+            $cashAccount->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function chartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source');
+    }
+
+    public function scopeWithRemainingBalance($query, ?string $endDate)
+    {
+        $cashAccountsWithRemainingBalanceQuery = CashTransaction::select(
+            'cash_transactions.cash_account_id',
+            DB::raw('SUM(cash_transactions.amount) AS remaining_balance')
+        );
+
+        if ($endDate) {
+            $cashAccountsWithRemainingBalanceQuery->where('cash_transactions.date', '<=', $endDate);
+        }
+
+        $cashAccountsWithRemainingBalanceQuery->groupBy('cash_transactions.cash_account_id');
+
+        $query->leftJoinSub($cashAccountsWithRemainingBalanceQuery, 'cash_accounts_with_remaining_balance', function ($join) {
+            $join->on('cash_accounts.id', '=', 'cash_accounts_with_remaining_balance.cash_account_id');
+        });
+
+        $query->addSelect(
+            DB::raw('COALESCE(cash_accounts_with_remaining_balance.remaining_balance, 0) AS remaining_balance')
+        );
+
+        return $query;
+    }
+}
diff --git a/api/app/Models/CashTransaction.php b/api/app/Models/CashTransaction.php
new file mode 100644
index 000000000..609c3c427
--- /dev/null
+++ b/api/app/Models/CashTransaction.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class CashTransaction extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'referable_type',
+        'referable_id',
+        'date',
+        'cash_account_id',
+        'amount',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    public function referable()
+    {
+        return $this->morphTo();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class);
+    }
+}
diff --git a/api/app/Models/CashTransfer.php b/api/app/Models/CashTransfer.php
new file mode 100644
index 000000000..ee5867252
--- /dev/null
+++ b/api/app/Models/CashTransfer.php
@@ -0,0 +1,139 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class CashTransfer extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'source_cash_account_id',
+        'destination_cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $cashTransfer): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($cashTransfer): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $cashTransfer->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $cashTransfer->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Cash transfer branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $cashTransfer->source_cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Cash transfer source cash account must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $cashTransfer->destination_cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Cash transfer destination cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $cashTransfer) use ($validateRelations) {
+            $cashTransfer->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $cashTransfer->created_by = auth()->id();
+                $cashTransfer->updated_by = auth()->id();
+            }
+
+            $validateRelations($cashTransfer);
+        });
+
+        static::updating(function (self $cashTransfer) use ($validateRelations) {
+            if (auth()->check()) {
+                $cashTransfer->updated_by = auth()->id();
+            }
+
+            $validateRelations($cashTransfer);
+        });
+
+        static::deleting(function (self $cashTransfer) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $cashTransfer->deleted_by = auth()->id();
+            $cashTransfer->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function sourceCashAccount()
+    {
+        return $this->belongsTo(CashAccount::class, 'source_cash_account_id')->withTrashed();
+    }
+
+    public function destinationCashAccount()
+    {
+        return $this->belongsTo(CashAccount::class, 'destination_cash_account_id')->withTrashed();
+    }
+
+    public function sourceCashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable')
+            ->where('cash_account_id', $this->source_cash_account_id);
+    }
+
+    public function destinationCashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable')
+            ->where('cash_account_id', $this->destination_cash_account_id);
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/ChartOfAccount.php b/api/app/Models/ChartOfAccount.php
new file mode 100644
index 000000000..77280ef13
--- /dev/null
+++ b/api/app/Models/ChartOfAccount.php
@@ -0,0 +1,130 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\ChartOfAccountAccountTypeEnum;
+use App\Enums\ChartOfAccountNormalBalanceEnum;
+use App\Enums\ChartOfAccountScopeEnum;
+use App\Enums\ChartOfAccountSystemKeyEnum;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class ChartOfAccount extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+
+    protected $fillable = [
+        'company_id',
+        'scope',
+        'system_key',
+        'parent_id',
+        'source_type',
+        'source_id',
+        'code',
+        'name',
+        'account_type',
+        'normal_balance',
+        'level',
+        'is_group',
+        'is_active',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'scope' => ChartOfAccountScopeEnum::class,
+            'system_key' => ChartOfAccountSystemKeyEnum::class,
+            'account_type' => ChartOfAccountAccountTypeEnum::class,
+            'normal_balance' => ChartOfAccountNormalBalanceEnum::class,
+            'level' => 'integer',
+            'is_group' => 'boolean',
+            'is_active' => 'boolean',
+        ];
+    }
+
+    protected static function booted(): void
+    {
+        $validateParent = static function (self $chartOfAccount): void {
+            if (! $chartOfAccount->parent_id) {
+                return;
+            }
+
+            if ((int) $chartOfAccount->parent_id === (int) $chartOfAccount->id) {
+                throw new InvalidArgumentException('Parent chart of account must not reference itself.');
+            }
+
+            $parent = self::find($chartOfAccount->parent_id);
+
+            if (! $parent || (int) $parent->company_id !== (int) $chartOfAccount->company_id) {
+                throw new InvalidArgumentException('Parent chart of account must exist in the same company.');
+            }
+        };
+
+        $validateAccountType = static function (self $chartOfAccount): void {
+            $isRoot = is_null($chartOfAccount->parent_id);
+
+            if ($isRoot && is_null($chartOfAccount->account_type)) {
+                throw new InvalidArgumentException('Account type for root chart of account must be provided by the system.');
+            }
+        };
+
+        static::creating(function (self $chartOfAccount) use ($validateParent, $validateAccountType) {
+            $chartOfAccount->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $chartOfAccount->created_by = auth()->id();
+                $chartOfAccount->updated_by = auth()->id();
+            }
+
+            $validateParent($chartOfAccount);
+            $validateAccountType($chartOfAccount);
+        });
+
+        static::updating(function (self $chartOfAccount) use ($validateParent, $validateAccountType) {
+            if (auth()->check()) {
+                $chartOfAccount->updated_by = auth()->id();
+            }
+
+            $validateParent($chartOfAccount);
+            $validateAccountType($chartOfAccount);
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function parent()
+    {
+        return $this->belongsTo(self::class, 'parent_id');
+    }
+
+    public function children()
+    {
+        return $this->hasMany(self::class, 'parent_id')
+            ->orderBy('code')
+            ->orderBy('id');
+    }
+
+    public function childrenRecursive()
+    {
+        return $this->hasMany(self::class, 'parent_id')
+            ->with([
+                'parent',
+                'childrenRecursive',
+            ])
+            ->orderBy('code')
+            ->orderBy('id');
+    }
+
+    public function source()
+    {
+        return $this->morphTo();
+    }
+}
diff --git a/api/app/Models/Company.php b/api/app/Models/Company.php
index 08165044f..5ce87cc12 100644
--- a/api/app/Models/Company.php
+++ b/api/app/Models/Company.php
@@ -2,7 +2,8 @@
 
 namespace App\Models;
 
-use App\Enums\RecordStatus;
+use App\Enums\ChartOfAccountSystemKeyEnum;
+use App\Enums\RecordStatusEnum;
 use App\Traits\BootableModel;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -26,7 +27,7 @@ protected function casts(): array
     {
         return [
             'default' => 'boolean',
-            'status' => RecordStatus::class,
+            'status' => RecordStatusEnum::class,
         ];
     }
 
@@ -39,4 +40,241 @@ public function branches()
     {
         return $this->hasMany(Branch::class);
     }
+
+    public function warehouses()
+    {
+        return $this->hasMany(Warehouse::class);
+    }
+
+    public function employees()
+    {
+        return $this->hasMany(Employee::class);
+    }
+
+    public function productCategories()
+    {
+        return $this->hasMany(ProductCategory::class);
+    }
+
+    public function brands()
+    {
+        return $this->hasMany(Brand::class);
+    }
+
+    public function units()
+    {
+        return $this->hasMany(Unit::class);
+    }
+
+    public function vatProfiles()
+    {
+        return $this->hasMany(VatProfile::class);
+    }
+
+    public function products()
+    {
+        return $this->hasMany(Product::class);
+    }
+
+    public function productUnits()
+    {
+        return $this->hasMany(ProductUnit::class);
+    }
+
+    public function stockAdjustmentCategories()
+    {
+        return $this->hasMany(StockAdjustmentCategory::class);
+    }
+
+    public function stockAdjustments()
+    {
+        return $this->hasMany(StockAdjustment::class);
+    }
+
+    public function stockAdjustmentInItems()
+    {
+        return $this->hasMany(StockAdjustmentInItem::class);
+    }
+
+    public function stockAdjustmentOutItems()
+    {
+        return $this->hasMany(StockAdjustmentOutItem::class);
+    }
+
+    public function purchaseOrders()
+    {
+        return $this->hasMany(PurchaseOrder::class);
+    }
+
+    public function purchases()
+    {
+        return $this->hasMany(Purchase::class);
+    }
+
+    public function purchaseAdditionalCostCategories()
+    {
+        return $this->hasMany(PurchaseAdditionalCostCategory::class);
+    }
+
+    public function purchaseAdditionalCosts()
+    {
+        return $this->hasMany(PurchaseAdditionalCost::class);
+    }
+
+    public function purchaseAdditionalCostPayments()
+    {
+        return $this->hasMany(PurchaseAdditionalCostPayment::class);
+    }
+
+    public function customers()
+    {
+        return $this->hasMany(Customer::class);
+    }
+
+    public function customerAddresses()
+    {
+        return $this->hasMany(CustomerAddress::class);
+    }
+
+    public function customerGroups()
+    {
+        return $this->hasMany(CustomerGroup::class);
+    }
+
+    public function suppliers()
+    {
+        return $this->hasMany(Supplier::class);
+    }
+
+    public function chartOfAccounts()
+    {
+        return $this->hasMany(ChartOfAccount::class);
+    }
+
+    public function equityRootChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_ROOT);
+    }
+
+    public function assetCurrentCashChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::ASSET_CURRENT_CASH);
+    }
+
+    public function assetCurrentBankChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::ASSET_CURRENT_BANK);
+    }
+
+    public function liabilityAccountPayableChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::LIABILITY_ACCOUNT_PAYABLE);
+    }
+
+    public function assetCurrentAccountReceivableChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::ASSET_CURRENT_ACCOUNT_RECEIVABLE);
+    }
+
+    public function assetCurrentPrepaidExpenseChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::ASSET_CURRENT_PREPAID_EXPENSE);
+    }
+
+    public function equityCapitalOpeningCapitalChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_OPENING_CAPITAL);
+    }
+
+    public function equityCapitalAdditionalCapitalChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_ADDITIONAL_CAPITAL);
+    }
+
+    public function equityCapitalDrawingChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_DRAWING);
+    }
+
+    public function equityCurrentMonthEarningsChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_CURRENT_MONTH_EARNINGS);
+    }
+
+    public function equityCurrentYearEarningsChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_CURRENT_YEAR_EARNINGS);
+    }
+
+    public function equityRetainedEarningsChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_RETAINED_EARNINGS);
+    }
+
+    public function incomeRootChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::INCOME_ROOT);
+    }
+
+    public function expenseRootChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::EXPENSE_ROOT);
+    }
+
+    public function otherExpenseRootChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::OTHER_EXPENSE_ROOT);
+    }
+
+    public function systemSuspenseChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::SYSTEM_SUSPENSE);
+    }
+
+    public function liabilityDeferredIncomeChartOfAccount()
+    {
+        return $this->hasOne(ChartOfAccount::class)
+            ->where('system_key', ChartOfAccountSystemKeyEnum::LIABILITY_DEFERRED_INCOME);
+    }
+
+    public function investors()
+    {
+        return $this->hasMany(Investor::class);
+    }
+
+    public function cashAccounts()
+    {
+        return $this->hasMany(CashAccount::class);
+    }
+
+    public function stockTransfers()
+    {
+        return $this->hasMany(StockTransfer::class);
+    }
+
+    public function stockTransferItems()
+    {
+        return $this->hasMany(StockTransferItem::class);
+    }
+
+    public function stockTransferItemSerials()
+    {
+        return $this->hasMany(StockTransferItemSerial::class);
+    }
 }
diff --git a/api/app/Models/Customer.php b/api/app/Models/Customer.php
new file mode 100644
index 000000000..6f6aa745d
--- /dev/null
+++ b/api/app/Models/Customer.php
@@ -0,0 +1,116 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class Customer extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'user_id',
+        'code',
+        'is_member',
+        'name',
+        'group_id',
+        'zone',
+        'max_open_invoice',
+        'max_outstanding_invoice',
+        'max_invoice_age',
+        'payment_term_type',
+        'payment_term',
+        'taxable_enterprise',
+        'tax_id',
+        'status',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'is_member' => 'boolean',
+        'max_open_invoice' => 'integer',
+        'max_outstanding_invoice' => 'decimal:8',
+        'max_invoice_age' => 'integer',
+        'payment_term_type' => PaymentTermTypeEnum::class,
+        'taxable_enterprise' => 'boolean',
+        'status' => RecordStatusEnum::class,
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $customer): void {
+            if (is_null($customer->group_id)) {
+                return;
+            }
+
+            $group = CustomerGroup::find($customer->group_id);
+
+            if (! $group || (int) $group->company_id !== (int) $customer->company_id) {
+                throw new InvalidArgumentException('Customer group must exist in the same company.');
+            }
+        };
+
+        static::creating(function (self $customer) use ($validateRelations) {
+            $customer->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $customer->created_by = auth()->id();
+                $customer->updated_by = auth()->id();
+            }
+
+            $validateRelations($customer);
+        });
+
+        static::updating(function (self $customer) use ($validateRelations) {
+            if (auth()->check()) {
+                $customer->updated_by = auth()->id();
+            }
+
+            $validateRelations($customer);
+        });
+
+        static::deleting(function (self $customer) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $customer->deleted_by = auth()->id();
+            $customer->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    public function group()
+    {
+        return $this->belongsTo(CustomerGroup::class, 'group_id')->withTrashed();
+    }
+
+    public function addresses()
+    {
+        return $this->hasMany(CustomerAddress::class);
+    }
+
+    public function chartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source');
+    }
+}
diff --git a/api/app/Models/CustomerAddress.php b/api/app/Models/CustomerAddress.php
new file mode 100644
index 000000000..303dce147
--- /dev/null
+++ b/api/app/Models/CustomerAddress.php
@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class CustomerAddress extends Model
+{
+    use HasFactory;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'customer_id',
+        'address',
+        'city',
+        'contact',
+        'is_main',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'is_main' => 'boolean',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $customerAddress): void {
+            if (is_null($customerAddress->customer_id)) {
+                return;
+            }
+
+            $customer = Customer::find($customerAddress->customer_id);
+
+            if (! $customer || (int) $customer->company_id !== (int) $customerAddress->company_id) {
+                throw new InvalidArgumentException('Customer address customer must exist in the same company.');
+            }
+        };
+
+        static::creating(function (self $customerAddress) use ($validateRelations) {
+            $customerAddress->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $customerAddress->created_by = auth()->id();
+                $customerAddress->updated_by = auth()->id();
+            }
+
+            $validateRelations($customerAddress);
+        });
+
+        static::updating(function (self $customerAddress) use ($validateRelations) {
+            if (auth()->check()) {
+                $customerAddress->updated_by = auth()->id();
+            }
+
+            $validateRelations($customerAddress);
+        });
+
+        static::deleting(function (self $customerAddress) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $customerAddress->deleted_by = auth()->id();
+            $customerAddress->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class);
+    }
+
+    public function customer()
+    {
+        return $this->belongsTo(Customer::class);
+    }
+}
diff --git a/api/app/Models/CustomerGroup.php b/api/app/Models/CustomerGroup.php
new file mode 100644
index 000000000..8d723e91c
--- /dev/null
+++ b/api/app/Models/CustomerGroup.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RoundingTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class CustomerGroup extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'max_open_invoice',
+        'max_outstanding_invoice',
+        'max_invoice_age',
+        'payment_term_type',
+        'payment_term',
+        'selling_point',
+        'selling_point_multiple',
+        'sell_at_cost',
+        'price_markup_percent',
+        'price_markup_nominal',
+        'price_markdown_percent',
+        'price_markdown_nominal',
+        'rounding_type',
+        'rounding_digit',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'max_outstanding_invoice' => 'decimal:8',
+            'payment_term_type' => PaymentTermTypeEnum::class,
+            'selling_point' => 'integer',
+            'selling_point_multiple' => 'decimal:8',
+            'price_markup_percent' => 'decimal:8',
+            'price_markup_nominal' => 'decimal:8',
+            'price_markdown_percent' => 'decimal:8',
+            'price_markdown_nominal' => 'decimal:8',
+            'rounding_type' => RoundingTypeEnum::class,
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function customers()
+    {
+        return $this->hasMany(Customer::class);
+    }
+
+    public function chartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source');
+    }
+}
diff --git a/api/app/Models/Debt.php b/api/app/Models/Debt.php
new file mode 100644
index 000000000..001e1c7aa
--- /dev/null
+++ b/api/app/Models/Debt.php
@@ -0,0 +1,175 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class Debt extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'category_id',
+        'creditor_id',
+        'supplier_id',
+        'cash_account_id',
+        'direct_amount_received',
+        'opening_amount_due',
+        'amount_total',
+        'amount_paid_by_cash_account',
+        'amount_paid_by_stock_adjustment',
+        'amount_due',
+        'due_days',
+        'is_paid_off',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'direct_amount_received' => 'decimal:8',
+        'opening_amount_due' => 'decimal:8',
+        'amount_total' => 'decimal:8',
+        'amount_paid_by_cash_account' => 'decimal:8',
+        'amount_paid_by_stock_adjustment' => 'decimal:8',
+        'amount_due' => 'decimal:8',
+        'due_days' => 'integer',
+        'is_paid_off' => 'boolean',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $debt): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($debt): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $debt->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $debt->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Debt branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $debt->category_id,
+                modelClass: DebtCategory::class,
+                errorMessage: 'Debt category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $debt->creditor_id,
+                modelClass: DebtCreditor::class,
+                errorMessage: 'Debt creditor must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $debt->supplier_id,
+                modelClass: Supplier::class,
+                errorMessage: 'Debt supplier must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $debt->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Debt cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $debt) use ($validateRelations) {
+            $debt->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $debt->created_by = auth()->id();
+                $debt->updated_by = auth()->id();
+            }
+
+            $validateRelations($debt);
+        });
+
+        static::updating(function (self $debt) use ($validateRelations) {
+            if (auth()->check()) {
+                $debt->updated_by = auth()->id();
+            }
+
+            $validateRelations($debt);
+        });
+
+        static::deleting(function (self $debt) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $debt->deleted_by = auth()->id();
+            $debt->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(DebtCategory::class, 'category_id')->withTrashed();
+    }
+
+    public function creditor()
+    {
+        return $this->belongsTo(DebtCreditor::class)->withTrashed();
+    }
+
+    public function supplier()
+    {
+        return $this->belongsTo(Supplier::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(DebtPayment::class);
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/DebtCategory.php b/api/app/Models/DebtCategory.php
new file mode 100644
index 000000000..c945f7f00
--- /dev/null
+++ b/api/app/Models/DebtCategory.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class DebtCategory extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'sequence',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'sequence' => 'integer',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/DebtCreditor.php b/api/app/Models/DebtCreditor.php
new file mode 100644
index 000000000..60344d599
--- /dev/null
+++ b/api/app/Models/DebtCreditor.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class DebtCreditor extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function chartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source');
+    }
+}
diff --git a/api/app/Models/DebtPayment.php b/api/app/Models/DebtPayment.php
new file mode 100644
index 000000000..7209df44d
--- /dev/null
+++ b/api/app/Models/DebtPayment.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class DebtPayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'debt_id',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $debtPayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($debtPayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $debtPayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $debtPayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Debt payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $debtPayment->debt_id,
+                modelClass: Debt::class,
+                errorMessage: 'Debt payment debt must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $debtPayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Debt payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $debtPayment) use ($validateRelations) {
+            $debtPayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $debtPayment->created_by = auth()->id();
+                $debtPayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($debtPayment);
+        });
+
+        static::updating(function (self $debtPayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $debtPayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($debtPayment);
+        });
+
+        static::deleting(function (self $debtPayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $debtPayment->deleted_by = auth()->id();
+            $debtPayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function debt()
+    {
+        return $this->belongsTo(Debt::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/Employee.php b/api/app/Models/Employee.php
new file mode 100644
index 000000000..b7a62eb61
--- /dev/null
+++ b/api/app/Models/Employee.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\RecordStatusEnum;
+use App\Traits\BootableModel;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Employee extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'user_id',
+        'join_date',
+        'status',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'join_date' => 'date',
+        'status' => RecordStatusEnum::class,
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class);
+    }
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+}
diff --git a/api/app/Models/Expense.php b/api/app/Models/Expense.php
new file mode 100644
index 000000000..ed2988991
--- /dev/null
+++ b/api/app/Models/Expense.php
@@ -0,0 +1,191 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\JournalEntryTypeEnum;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class Expense extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'expense_category_id',
+        'paid_immediately_cash_account_id',
+        'amount_paid_immediately',
+        'amount_payable',
+        'due_days',
+        'amount_payable_paid',
+        'amount_payable_due',
+        'is_amount_payable_paid_off',
+        'amount_total',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount_paid_immediately' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'due_days' => 'integer',
+        'amount_payable_paid' => 'decimal:8',
+        'amount_payable_due' => 'decimal:8',
+        'is_amount_payable_paid_off' => 'boolean',
+        'amount_total' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $expense): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($expense): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $expense->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $expense->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Expense branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $expense->expense_category_id,
+                modelClass: ExpenseCategory::class,
+                errorMessage: 'Expense category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $expense->paid_immediately_cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Paid immediately cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $expense) use ($validateRelations) {
+            $expense->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $expense->created_by = auth()->id();
+                $expense->updated_by = auth()->id();
+            }
+
+            $validateRelations($expense);
+        });
+
+        static::updating(function (self $expense) use ($validateRelations) {
+            if (auth()->check()) {
+                $expense->updated_by = auth()->id();
+            }
+
+            $validateRelations($expense);
+        });
+
+        static::deleting(function (self $expense) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $expense->deleted_by = auth()->id();
+            $expense->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(ExpenseCategory::class, 'expense_category_id')->withTrashed();
+    }
+
+    public function paidImmediatelyCashAccount()
+    {
+        return $this->belongsTo(CashAccount::class, 'paid_immediately_cash_account_id')->withTrashed();
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(ExpensePayment::class);
+    }
+
+    public function images()
+    {
+        return $this->hasMany(ExpenseImage::class);
+    }
+
+    public function mainImage()
+    {
+        return $this->hasOne(ExpenseImage::class)
+            ->orderByDesc('is_main')
+            ->orderBy('id');
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source')
+            ->where('journal_type', JournalEntryTypeEnum::TRANSACTION->value);
+    }
+
+    public function currentMonthEarningsJournalEntry()
+    {
+        return $this->hasOne(JournalEntry::class, 'source_id', 'id')
+            ->where('source_type', self::class)
+            ->where('journal_type', JournalEntryTypeEnum::CURRENT_MONTH_EARNINGS->value);
+    }
+
+    public function monthEndClosingJournalEntry()
+    {
+        return $this->hasOne(JournalEntry::class, 'source_id', 'id')
+            ->where('source_type', self::class)
+            ->where('journal_type', JournalEntryTypeEnum::MONTH_END_CLOSING->value);
+    }
+
+    public function monthToYearClosingJournalEntry()
+    {
+        return $this->hasOne(JournalEntry::class, 'source_id', 'id')
+            ->where('source_type', self::class)
+            ->where('journal_type', JournalEntryTypeEnum::MONTH_TO_YEAR_CLOSING->value);
+    }
+
+    public function yearToRetainedEarningsClosingJournalEntry()
+    {
+        return $this->hasOne(JournalEntry::class, 'source_id', 'id')
+            ->where('source_type', self::class)
+            ->where('journal_type', JournalEntryTypeEnum::YEAR_TO_RETAINED_EARNINGS_CLOSING->value);
+    }
+}
diff --git a/api/app/Models/ExpenseCategory.php b/api/app/Models/ExpenseCategory.php
new file mode 100644
index 000000000..2cddf6313
--- /dev/null
+++ b/api/app/Models/ExpenseCategory.php
@@ -0,0 +1,131 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class ExpenseCategory extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'parent_id',
+        'code',
+        'name',
+        'sequence',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'sequence' => 'integer',
+        ];
+    }
+
+    protected static function booted(): void
+    {
+        $validateParent = static function (self $expenseCategory): void {
+            if (! $expenseCategory->parent_id) {
+                return;
+            }
+
+            if ((int) $expenseCategory->parent_id === (int) $expenseCategory->id) {
+                throw new InvalidArgumentException('Expense category parent must not reference itself.');
+            }
+
+            $parent = self::find($expenseCategory->parent_id);
+
+            if (! $parent || (int) $parent->company_id !== (int) $expenseCategory->company_id) {
+                throw new InvalidArgumentException('Expense category parent must exist in the same company.');
+            }
+        };
+
+        static::creating(function (self $expenseCategory) use ($validateParent) {
+            $expenseCategory->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $expenseCategory->created_by = auth()->id();
+                $expenseCategory->updated_by = auth()->id();
+            }
+
+            $validateParent($expenseCategory);
+        });
+
+        static::updating(function (self $expenseCategory) use ($validateParent) {
+            if (auth()->check()) {
+                $expenseCategory->updated_by = auth()->id();
+            }
+
+            $validateParent($expenseCategory);
+        });
+
+        static::deleting(function (self $expenseCategory) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $expenseCategory->deleted_by = auth()->id();
+            $expenseCategory->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function parent()
+    {
+        return $this->belongsTo(self::class, 'parent_id')->withTrashed();
+    }
+
+    public function children()
+    {
+        return $this->hasMany(self::class, 'parent_id')
+            ->orderBy('sequence')
+            ->orderBy('id');
+    }
+
+    public function childrenRecursive()
+    {
+        return $this->hasMany(self::class, 'parent_id')
+            ->with([
+                'parent',
+                'childrenRecursive',
+            ])
+            ->orderBy('sequence')
+            ->orderBy('id');
+    }
+
+    public function chartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source');
+    }
+
+    public function getDisplayCodeAttribute(): string
+    {
+        $segments = [$this->code];
+        $visitedIds = [$this->id => true];
+        $parent = $this->relationLoaded('parent') ? $this->parent : $this->parent()->first();
+
+        while ($parent) {
+            if (isset($visitedIds[$parent->id])) {
+                break;
+            }
+
+            array_unshift($segments, $parent->code);
+            $visitedIds[$parent->id] = true;
+            $parent = $parent->relationLoaded('parent') ? $parent->parent : $parent->parent()->first();
+        }
+
+        return implode('.', $segments);
+    }
+}
diff --git a/api/app/Models/ExpenseImage.php b/api/app/Models/ExpenseImage.php
new file mode 100644
index 000000000..95e71608e
--- /dev/null
+++ b/api/app/Models/ExpenseImage.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class ExpenseImage extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'expense_id',
+        'path',
+        'hash',
+        'is_main',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'is_main' => 'boolean',
+        ];
+    }
+
+    public function expense()
+    {
+        return $this->belongsTo(Expense::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/ExpensePayment.php b/api/app/Models/ExpensePayment.php
new file mode 100644
index 000000000..504c8cb7c
--- /dev/null
+++ b/api/app/Models/ExpensePayment.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class ExpensePayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'expense_id',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $expensePayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($expensePayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $expensePayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $expensePayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Expense payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $expensePayment->expense_id,
+                modelClass: Expense::class,
+                errorMessage: 'Expense payment expense must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $expensePayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Expense payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $expensePayment) use ($validateRelations) {
+            $expensePayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $expensePayment->created_by = auth()->id();
+                $expensePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($expensePayment);
+        });
+
+        static::updating(function (self $expensePayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $expensePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($expensePayment);
+        });
+
+        static::deleting(function (self $expensePayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $expensePayment->deleted_by = auth()->id();
+            $expensePayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function expense()
+    {
+        return $this->belongsTo(Expense::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/Income.php b/api/app/Models/Income.php
new file mode 100644
index 000000000..382322492
--- /dev/null
+++ b/api/app/Models/Income.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class Income extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'income_category_id',
+        'paid_immediately_cash_account_id',
+        'amount_paid_immediately',
+        'amount_receivable',
+        'due_days',
+        'amount_receivable_paid',
+        'amount_receivable_due',
+        'is_amount_receivable_paid_off',
+        'amount_total',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount_paid_immediately' => 'decimal:8',
+        'amount_receivable' => 'decimal:8',
+        'due_days' => 'integer',
+        'amount_receivable_paid' => 'decimal:8',
+        'amount_receivable_due' => 'decimal:8',
+        'is_amount_receivable_paid_off' => 'boolean',
+        'amount_total' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $income): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($income): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $income->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $income->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Income branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $income->income_category_id,
+                modelClass: IncomeCategory::class,
+                errorMessage: 'Income category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $income->paid_immediately_cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Income paid immediately cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $income) use ($validateRelations) {
+            $income->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $income->created_by = auth()->id();
+                $income->updated_by = auth()->id();
+            }
+
+            $validateRelations($income);
+        });
+
+        static::updating(function (self $income) use ($validateRelations) {
+            if (auth()->check()) {
+                $income->updated_by = auth()->id();
+            }
+
+            $validateRelations($income);
+        });
+
+        static::deleting(function (self $income) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $income->deleted_by = auth()->id();
+            $income->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(IncomeCategory::class, 'income_category_id')->withTrashed();
+    }
+
+    public function paidImmediatelyCashAccount()
+    {
+        return $this->belongsTo(CashAccount::class, 'paid_immediately_cash_account_id')->withTrashed();
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(IncomePayment::class);
+    }
+
+    public function images()
+    {
+        return $this->hasMany(IncomeImage::class);
+    }
+
+    public function mainImage()
+    {
+        return $this->hasOne(IncomeImage::class)
+            ->orderByDesc('is_main')
+            ->orderBy('id');
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/IncomeCategory.php b/api/app/Models/IncomeCategory.php
new file mode 100644
index 000000000..fb9e108de
--- /dev/null
+++ b/api/app/Models/IncomeCategory.php
@@ -0,0 +1,126 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class IncomeCategory extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'parent_id',
+        'code',
+        'name',
+        'sequence',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'sequence' => 'integer',
+        ];
+    }
+
+    protected static function booted(): void
+    {
+        $validateParent = static function (self $incomeCategory): void {
+            if (! $incomeCategory->parent_id) {
+                return;
+            }
+
+            if ((int) $incomeCategory->parent_id === (int) $incomeCategory->id) {
+                throw new InvalidArgumentException('Income category parent must not reference itself.');
+            }
+
+            $parent = self::find($incomeCategory->parent_id);
+
+            if (! $parent || (int) $parent->company_id !== (int) $incomeCategory->company_id) {
+                throw new InvalidArgumentException('Income category parent must exist in the same company.');
+            }
+        };
+
+        static::creating(function (self $incomeCategory) use ($validateParent) {
+            $incomeCategory->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $incomeCategory->created_by = auth()->id();
+                $incomeCategory->updated_by = auth()->id();
+            }
+
+            $validateParent($incomeCategory);
+        });
+
+        static::updating(function (self $incomeCategory) use ($validateParent) {
+            if (auth()->check()) {
+                $incomeCategory->updated_by = auth()->id();
+            }
+
+            $validateParent($incomeCategory);
+        });
+
+        static::deleting(function (self $incomeCategory) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $incomeCategory->deleted_by = auth()->id();
+            $incomeCategory->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function parent()
+    {
+        return $this->belongsTo(self::class, 'parent_id')->withTrashed();
+    }
+
+    public function children()
+    {
+        return $this->hasMany(self::class, 'parent_id')
+            ->orderBy('sequence')
+            ->orderBy('id');
+    }
+
+    public function childrenRecursive()
+    {
+        return $this->hasMany(self::class, 'parent_id')
+            ->with([
+                'parent',
+                'childrenRecursive',
+            ])
+            ->orderBy('sequence')
+            ->orderBy('id');
+    }
+
+    public function getDisplayCodeAttribute(): string
+    {
+        $segments = [$this->code];
+        $visitedIds = [$this->id => true];
+        $parent = $this->relationLoaded('parent') ? $this->parent : $this->parent()->first();
+
+        while ($parent) {
+            if (isset($visitedIds[$parent->id])) {
+                break;
+            }
+
+            array_unshift($segments, $parent->code);
+            $visitedIds[$parent->id] = true;
+            $parent = $parent->relationLoaded('parent') ? $parent->parent : $parent->parent()->first();
+        }
+
+        return implode('.', $segments);
+    }
+}
diff --git a/api/app/Models/IncomeImage.php b/api/app/Models/IncomeImage.php
new file mode 100644
index 000000000..bf6e8ec31
--- /dev/null
+++ b/api/app/Models/IncomeImage.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class IncomeImage extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'income_id',
+        'path',
+        'hash',
+        'is_main',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'is_main' => 'boolean',
+        ];
+    }
+
+    public function income()
+    {
+        return $this->belongsTo(Income::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/IncomePayment.php b/api/app/Models/IncomePayment.php
new file mode 100644
index 000000000..f66699019
--- /dev/null
+++ b/api/app/Models/IncomePayment.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class IncomePayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'income_id',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $incomePayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($incomePayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $incomePayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $incomePayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Income payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $incomePayment->income_id,
+                modelClass: Income::class,
+                errorMessage: 'Income payment income must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $incomePayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Income payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $incomePayment) use ($validateRelations) {
+            $incomePayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $incomePayment->created_by = auth()->id();
+                $incomePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($incomePayment);
+        });
+
+        static::updating(function (self $incomePayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $incomePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($incomePayment);
+        });
+
+        static::deleting(function (self $incomePayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $incomePayment->deleted_by = auth()->id();
+            $incomePayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function income()
+    {
+        return $this->belongsTo(Income::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/Investor.php b/api/app/Models/Investor.php
new file mode 100644
index 000000000..f72bcf791
--- /dev/null
+++ b/api/app/Models/Investor.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\ChartOfAccountSystemKeyEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Investor extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function chartOfAccounts()
+    {
+        return $this->morphMany(ChartOfAccount::class, 'source');
+    }
+
+    public function openingCapitalChartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source')
+            ->whereHas('parent', fn ($query) => $query->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_OPENING_CAPITAL));
+    }
+
+    public function additionalCapitalChartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source')
+            ->whereHas('parent', fn ($query) => $query->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_ADDITIONAL_CAPITAL));
+    }
+
+    public function drawingChartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source')
+            ->whereHas('parent', fn ($query) => $query->where('system_key', ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_DRAWING));
+    }
+}
diff --git a/api/app/Models/JournalEntry.php b/api/app/Models/JournalEntry.php
new file mode 100644
index 000000000..447da4d97
--- /dev/null
+++ b/api/app/Models/JournalEntry.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\JournalEntryTypeEnum;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Str;
+
+class JournalEntry extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'journal_type',
+        'source_type',
+        'source_id',
+        'reference_no',
+        'total_debit',
+        'total_credit',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'journal_type' => JournalEntryTypeEnum::class,
+        'total_debit' => 'decimal:8',
+        'total_credit' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        static::creating(function (self $journalEntry) {
+            $journalEntry->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $journalEntry->created_by = auth()->id();
+                $journalEntry->updated_by = auth()->id();
+            }
+        });
+
+        static::updating(function (self $journalEntry) {
+            if (auth()->check()) {
+                $journalEntry->updated_by = auth()->id();
+            }
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function items()
+    {
+        return $this->hasMany(JournalEntryItem::class)
+            ->orderBy('sequence')
+            ->orderBy('id');
+    }
+}
diff --git a/api/app/Models/JournalEntryItem.php b/api/app/Models/JournalEntryItem.php
new file mode 100644
index 000000000..710f6c8b7
--- /dev/null
+++ b/api/app/Models/JournalEntryItem.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class JournalEntryItem extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+
+    protected $fillable = [
+        'company_id',
+        'journal_entry_id',
+        'chart_of_account_id',
+        'sequence',
+        'debit',
+        'credit',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'sequence' => 'integer',
+        'debit' => 'decimal:8',
+        'credit' => 'decimal:8',
+    ];
+
+    public function journalEntry()
+    {
+        return $this->belongsTo(JournalEntry::class);
+    }
+
+    public function chartOfAccount()
+    {
+        return $this->belongsTo(ChartOfAccount::class);
+    }
+}
diff --git a/api/app/Models/PrepaidExpense.php b/api/app/Models/PrepaidExpense.php
new file mode 100644
index 000000000..c13e6d164
--- /dev/null
+++ b/api/app/Models/PrepaidExpense.php
@@ -0,0 +1,163 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PrepaidExpense extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'expense_category_id',
+        'estimated_useful_life',
+        'paid_immediately_cash_account_id',
+        'amount_paid_immediately',
+        'amount_payable',
+        'due_days',
+        'amount_payable_paid',
+        'amount_payable_due',
+        'is_amount_payable_paid_off',
+        'amount_total',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'estimated_useful_life' => 'integer',
+        'amount_paid_immediately' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'due_days' => 'integer',
+        'amount_payable_paid' => 'decimal:8',
+        'amount_payable_due' => 'decimal:8',
+        'is_amount_payable_paid_off' => 'boolean',
+        'amount_total' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $prepaidExpense): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($prepaidExpense): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $prepaidExpense->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $prepaidExpense->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Prepaid expense branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $prepaidExpense->expense_category_id,
+                modelClass: ExpenseCategory::class,
+                errorMessage: 'Prepaid expense category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $prepaidExpense->paid_immediately_cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Prepaid expense paid immediately cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $prepaidExpense) use ($validateRelations) {
+            $prepaidExpense->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $prepaidExpense->created_by = auth()->id();
+                $prepaidExpense->updated_by = auth()->id();
+            }
+
+            $validateRelations($prepaidExpense);
+        });
+
+        static::updating(function (self $prepaidExpense) use ($validateRelations) {
+            if (auth()->check()) {
+                $prepaidExpense->updated_by = auth()->id();
+            }
+
+            $validateRelations($prepaidExpense);
+        });
+
+        static::deleting(function (self $prepaidExpense) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $prepaidExpense->deleted_by = auth()->id();
+            $prepaidExpense->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(ExpenseCategory::class, 'expense_category_id')->withTrashed();
+    }
+
+    public function paidImmediatelyCashAccount()
+    {
+        return $this->belongsTo(CashAccount::class, 'paid_immediately_cash_account_id')->withTrashed();
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(PrepaidExpensePayment::class);
+    }
+
+    public function images()
+    {
+        return $this->hasMany(PrepaidExpenseImage::class);
+    }
+
+    public function mainImage()
+    {
+        return $this->hasOne(PrepaidExpenseImage::class)
+            ->orderByDesc('is_main')
+            ->orderBy('id');
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/PrepaidExpenseImage.php b/api/app/Models/PrepaidExpenseImage.php
new file mode 100644
index 000000000..c304542bf
--- /dev/null
+++ b/api/app/Models/PrepaidExpenseImage.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class PrepaidExpenseImage extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'prepaid_expense_id',
+        'path',
+        'hash',
+        'is_main',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'is_main' => 'boolean',
+        ];
+    }
+
+    public function prepaidExpense()
+    {
+        return $this->belongsTo(PrepaidExpense::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PrepaidExpensePayment.php b/api/app/Models/PrepaidExpensePayment.php
new file mode 100644
index 000000000..86aab4336
--- /dev/null
+++ b/api/app/Models/PrepaidExpensePayment.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PrepaidExpensePayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'prepaid_expense_id',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $prepaidExpensePayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($prepaidExpensePayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $prepaidExpensePayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $prepaidExpensePayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Prepaid expense payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $prepaidExpensePayment->prepaid_expense_id,
+                modelClass: PrepaidExpense::class,
+                errorMessage: 'Prepaid expense payment prepaid expense must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $prepaidExpensePayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Prepaid expense payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $prepaidExpensePayment) use ($validateRelations) {
+            $prepaidExpensePayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $prepaidExpensePayment->created_by = auth()->id();
+                $prepaidExpensePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($prepaidExpensePayment);
+        });
+
+        static::updating(function (self $prepaidExpensePayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $prepaidExpensePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($prepaidExpensePayment);
+        });
+
+        static::deleting(function (self $prepaidExpensePayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $prepaidExpensePayment->deleted_by = auth()->id();
+            $prepaidExpensePayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function prepaidExpense()
+    {
+        return $this->belongsTo(PrepaidExpense::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/PrepaidIncome.php b/api/app/Models/PrepaidIncome.php
new file mode 100644
index 000000000..4f3e5131f
--- /dev/null
+++ b/api/app/Models/PrepaidIncome.php
@@ -0,0 +1,163 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PrepaidIncome extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'income_category_id',
+        'estimated_useful_life',
+        'paid_immediately_cash_account_id',
+        'amount_paid_immediately',
+        'amount_receivable',
+        'due_days',
+        'amount_receivable_paid',
+        'amount_receivable_due',
+        'is_amount_receivable_paid_off',
+        'amount_total',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'estimated_useful_life' => 'integer',
+        'amount_paid_immediately' => 'decimal:8',
+        'amount_receivable' => 'decimal:8',
+        'due_days' => 'integer',
+        'amount_receivable_paid' => 'decimal:8',
+        'amount_receivable_due' => 'decimal:8',
+        'is_amount_receivable_paid_off' => 'boolean',
+        'amount_total' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $prepaidIncome): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($prepaidIncome): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $prepaidIncome->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $prepaidIncome->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Prepaid income branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $prepaidIncome->income_category_id,
+                modelClass: IncomeCategory::class,
+                errorMessage: 'Prepaid income category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $prepaidIncome->paid_immediately_cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Prepaid income paid immediately cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $prepaidIncome) use ($validateRelations) {
+            $prepaidIncome->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $prepaidIncome->created_by = auth()->id();
+                $prepaidIncome->updated_by = auth()->id();
+            }
+
+            $validateRelations($prepaidIncome);
+        });
+
+        static::updating(function (self $prepaidIncome) use ($validateRelations) {
+            if (auth()->check()) {
+                $prepaidIncome->updated_by = auth()->id();
+            }
+
+            $validateRelations($prepaidIncome);
+        });
+
+        static::deleting(function (self $prepaidIncome) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $prepaidIncome->deleted_by = auth()->id();
+            $prepaidIncome->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(IncomeCategory::class, 'income_category_id')->withTrashed();
+    }
+
+    public function paidImmediatelyCashAccount()
+    {
+        return $this->belongsTo(CashAccount::class, 'paid_immediately_cash_account_id')->withTrashed();
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(PrepaidIncomePayment::class);
+    }
+
+    public function images()
+    {
+        return $this->hasMany(PrepaidIncomeImage::class);
+    }
+
+    public function mainImage()
+    {
+        return $this->hasOne(PrepaidIncomeImage::class)
+            ->orderByDesc('is_main')
+            ->orderBy('id');
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/PrepaidIncomeImage.php b/api/app/Models/PrepaidIncomeImage.php
new file mode 100644
index 000000000..7a97ab602
--- /dev/null
+++ b/api/app/Models/PrepaidIncomeImage.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class PrepaidIncomeImage extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'prepaid_income_id',
+        'path',
+        'hash',
+        'is_main',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'is_main' => 'boolean',
+        ];
+    }
+
+    public function prepaidIncome()
+    {
+        return $this->belongsTo(PrepaidIncome::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PrepaidIncomePayment.php b/api/app/Models/PrepaidIncomePayment.php
new file mode 100644
index 000000000..3bda7493d
--- /dev/null
+++ b/api/app/Models/PrepaidIncomePayment.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PrepaidIncomePayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'prepaid_income_id',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $prepaidIncomePayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($prepaidIncomePayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $prepaidIncomePayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $prepaidIncomePayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Prepaid income payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $prepaidIncomePayment->prepaid_income_id,
+                modelClass: PrepaidIncome::class,
+                errorMessage: 'Prepaid income payment prepaid income must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $prepaidIncomePayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Prepaid income payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $prepaidIncomePayment) use ($validateRelations) {
+            $prepaidIncomePayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $prepaidIncomePayment->created_by = auth()->id();
+                $prepaidIncomePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($prepaidIncomePayment);
+        });
+
+        static::updating(function (self $prepaidIncomePayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $prepaidIncomePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($prepaidIncomePayment);
+        });
+
+        static::deleting(function (self $prepaidIncomePayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $prepaidIncomePayment->deleted_by = auth()->id();
+            $prepaidIncomePayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function prepaidIncome()
+    {
+        return $this->belongsTo(PrepaidIncome::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/Product.php b/api/app/Models/Product.php
new file mode 100644
index 000000000..26c67cf92
--- /dev/null
+++ b/api/app/Models/Product.php
@@ -0,0 +1,188 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\ProductTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class Product extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'category_id',
+        'brand_id',
+        'name',
+        'default_vat_profile_id',
+        'is_price_include_vat',
+        'is_use_serial_number',
+        'is_expirable',
+        'remarks',
+        'type',
+        'status',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'is_price_include_vat' => 'boolean',
+            'is_use_serial_number' => 'boolean',
+            'is_expirable' => 'boolean',
+            'type' => ProductTypeEnum::class,
+            'status' => RecordStatusEnum::class,
+        ];
+    }
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $product): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($product): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $product->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $product->category_id,
+                modelClass: ProductCategory::class,
+                errorMessage: 'Product category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $product->brand_id,
+                modelClass: Brand::class,
+                errorMessage: 'Product brand must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $product->default_vat_profile_id,
+                modelClass: VatProfile::class,
+                errorMessage: 'Product default VAT profile must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $product) use ($validateRelations) {
+            $product->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $product->created_by = auth()->id();
+                $product->updated_by = auth()->id();
+            }
+
+            $validateRelations($product);
+        });
+
+        static::updating(function (self $product) use ($validateRelations) {
+            if (auth()->check()) {
+                $product->updated_by = auth()->id();
+            }
+
+            $validateRelations($product);
+        });
+
+        static::deleting(function (self $product) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $product->deleted_by = auth()->id();
+            $product->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(ProductCategory::class, 'category_id')->withTrashed();
+    }
+
+    public function brand()
+    {
+        return $this->belongsTo(Brand::class)->withTrashed();
+    }
+
+    public function defaultVatProfile()
+    {
+        return $this->belongsTo(VatProfile::class, 'default_vat_profile_id')->withTrashed();
+    }
+
+    public function baseProductUnit()
+    {
+        return $this->hasOne(ProductUnit::class)->where('is_base', true);
+    }
+
+    public function productUnits()
+    {
+        return $this->hasMany(ProductUnit::class);
+    }
+
+    public function images()
+    {
+        return $this->hasMany(ProductImage::class);
+    }
+
+    public function mainImage()
+    {
+        return $this->hasOne(ProductImage::class)
+            ->orderByDesc('is_main')
+            ->orderBy('id');
+    }
+
+    public function stockTransactions()
+    {
+        return $this->hasMany(StockTransaction::class);
+    }
+
+    public function scopeWithRemainingStock($query, ?string $endDate, ?int $warehouseId)
+    {
+        $productsWithRemainingStockQuery = StockTransaction::select(
+            'stock_transactions.product_id',
+            DB::raw('SUM(stock_transactions.base_qty) AS remaining_stock')
+        );
+
+        if ($endDate) {
+            $productsWithRemainingStockQuery->where('stock_transactions.date', '<=', $endDate);
+        }
+
+        if ($warehouseId) {
+            $productsWithRemainingStockQuery->where('stock_transactions.warehouse_id', '=', $warehouseId);
+        }
+
+        $productsWithRemainingStockQuery->groupBy('stock_transactions.product_id');
+
+        $query->leftJoinSub($productsWithRemainingStockQuery, 'products_with_remaining_stock', function ($join) {
+            $join->on('products.id', '=', 'products_with_remaining_stock.product_id');
+        });
+
+        $query->addSelect(
+            DB::raw('COALESCE(products_with_remaining_stock.remaining_stock, 0) AS remaining_stock')
+        );
+
+        return $query;
+    }
+}
diff --git a/api/app/Models/ProductCategory.php b/api/app/Models/ProductCategory.php
new file mode 100644
index 000000000..9d2401e86
--- /dev/null
+++ b/api/app/Models/ProductCategory.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\ProductCategoryTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class ProductCategory extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'type',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'type' => ProductCategoryTypeEnum::class,
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function products()
+    {
+        return $this->hasMany(Product::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/ProductImage.php b/api/app/Models/ProductImage.php
new file mode 100644
index 000000000..5b7ef99dc
--- /dev/null
+++ b/api/app/Models/ProductImage.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class ProductImage extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'product_id',
+        'path',
+        'hash',
+        'is_main',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'is_main' => 'boolean',
+        ];
+    }
+
+    public function product()
+    {
+        return $this->belongsTo(Product::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/ProductUnit.php b/api/app/Models/ProductUnit.php
new file mode 100644
index 000000000..5c1b1a00d
--- /dev/null
+++ b/api/app/Models/ProductUnit.php
@@ -0,0 +1,123 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class ProductUnit extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'product_id',
+        'code',
+        'is_manufacturer_sku',
+        'unit_id',
+        'price',
+        'is_base',
+        'conversion_value',
+        'is_primary_unit',
+        'point',
+        'remarks',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'is_base' => 'boolean',
+            'is_manufacturer_sku' => 'boolean',
+            'conversion_value' => 'decimal:2',
+            'is_primary_unit' => 'boolean',
+            'point' => 'integer',
+        ];
+    }
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $productUnit): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($productUnit): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $productUnit->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $productUnit->product_id,
+                modelClass: Product::class,
+                errorMessage: 'Product unit product must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $productUnit->unit_id,
+                modelClass: Unit::class,
+                errorMessage: 'Product unit unit must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $productUnit) use ($validateRelations) {
+            $productUnit->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $productUnit->created_by = auth()->id();
+                $productUnit->updated_by = auth()->id();
+            }
+
+            $validateRelations($productUnit);
+        });
+
+        static::updating(function (self $productUnit) use ($validateRelations) {
+            if (auth()->check()) {
+                $productUnit->updated_by = auth()->id();
+            }
+
+            $validateRelations($productUnit);
+        });
+
+        static::deleting(function (self $productUnit) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $productUnit->deleted_by = auth()->id();
+            $productUnit->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function product()
+    {
+        return $this->belongsTo(Product::class)->withTrashed();
+    }
+
+    public function unit()
+    {
+        return $this->belongsTo(Unit::class)->withTrashed();
+    }
+
+    public function stockTransferItems()
+    {
+        return $this->hasMany(StockTransferItem::class);
+    }
+}
diff --git a/api/app/Models/Profile.php b/api/app/Models/Profile.php
index 75516a4d5..27460fc34 100644
--- a/api/app/Models/Profile.php
+++ b/api/app/Models/Profile.php
@@ -2,7 +2,7 @@
 
 namespace App\Models;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use App\Traits\BootableModel;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -29,7 +29,7 @@ class Profile extends Model
     protected function casts(): array
     {
         return [
-            'status' => RecordStatus::class,
+            'status' => RecordStatusEnum::class,
         ];
     }
 
diff --git a/api/app/Models/Purchase.php b/api/app/Models/Purchase.php
new file mode 100644
index 000000000..41410dc83
--- /dev/null
+++ b/api/app/Models/Purchase.php
@@ -0,0 +1,238 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\PurchaseProgressStatusEnum;
+use App\Enums\PurchaseReceiptModeEnum;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasManyThrough;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class Purchase extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'due_days',
+        'supplier_id',
+        'purchase_order_id',
+        'receipt_mode',
+        'tax_invoice_number',
+        'tax_invoice_vat_base',
+        'tax_invoice_vat',
+        'remarks',
+        'is_posted',
+
+        'item_total_before_global_discount',
+        'global_discount',
+        'item_total_after_global_discount',
+        'vat_base',
+        'vat',
+        'item_total_after_vat',
+        'additional_cost',
+        'rounding',
+        'amount_payable',
+        'amount_paid_by_purchase_order_down_payment',
+        'amount_paid_by_purchase_return',
+        'amount_paid_total',
+        'amount_due',
+        'is_paid_off',
+
+        'progress_status',
+        'item_total_count',
+        'item_matched_count',
+        'item_less_count',
+        'item_more_count',
+        'item_unlinked_count',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'due_days' => 'integer',
+        'receipt_mode' => PurchaseReceiptModeEnum::class,
+        'tax_invoice_vat_base' => 'decimal:8',
+        'tax_invoice_vat' => 'decimal:8',
+        'is_posted' => 'boolean',
+        'item_total_before_global_discount' => 'decimal:8',
+        'global_discount' => 'decimal:8',
+        'item_total_after_global_discount' => 'decimal:8',
+        'vat_base' => 'decimal:8',
+        'vat' => 'decimal:8',
+        'item_total_after_vat' => 'decimal:8',
+        'additional_cost' => 'decimal:8',
+        'rounding' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'amount_paid_by_purchase_order_down_payment' => 'decimal:8',
+        'amount_paid_by_purchase_return' => 'decimal:8',
+        'amount_paid_total' => 'decimal:8',
+        'amount_due' => 'decimal:8',
+        'is_paid_off' => 'boolean',
+        'progress_status' => PurchaseProgressStatusEnum::class,
+        'item_total_count' => 'integer',
+        'item_matched_count' => 'integer',
+        'item_less_count' => 'integer',
+        'item_more_count' => 'integer',
+        'item_unlinked_count' => 'integer',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $purchase): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($purchase): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $purchase->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $purchase->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Purchase branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchase->supplier_id,
+                modelClass: Supplier::class,
+                errorMessage: 'Purchase supplier must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchase->purchase_order_id,
+                modelClass: PurchaseOrder::class,
+                errorMessage: 'Purchase order must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $purchase) use ($validateRelations) {
+            $purchase->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $purchase->created_by = auth()->id();
+                $purchase->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchase);
+        });
+
+        static::updating(function (self $purchase) use ($validateRelations) {
+            if (auth()->check()) {
+                $purchase->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchase);
+        });
+
+        static::deleting(function (self $purchase) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $purchase->deleted_by = auth()->id();
+            $purchase->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function supplier()
+    {
+        return $this->belongsTo(Supplier::class)->withTrashed();
+    }
+
+    public function purchaseOrder()
+    {
+        return $this->belongsTo(PurchaseOrder::class)->withTrashed();
+    }
+
+    public function items()
+    {
+        return $this->hasMany(PurchaseItem::class);
+    }
+
+    public function receipts()
+    {
+        return $this->hasMany(PurchaseReceipt::class);
+    }
+
+    public function directReceipt()
+    {
+        return $this->hasOne(PurchaseReceipt::class)->where('is_from_direct_purchase', true);
+    }
+
+    public function manualReceipts()
+    {
+        return $this->hasMany(PurchaseReceipt::class)->where('is_from_direct_purchase', false);
+    }
+
+    public function receiptItems(): HasManyThrough
+    {
+        return $this->hasManyThrough(
+            PurchaseReceiptItem::class,
+            PurchaseReceipt::class,
+            'purchase_id',
+            'purchase_receipt_id',
+            'id',
+            'id'
+        );
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(PurchasePayment::class);
+    }
+
+    public function additionalCosts()
+    {
+        return $this->hasMany(PurchaseAdditionalCost::class);
+    }
+
+    public function globalDiscounts()
+    {
+        return $this->hasMany(PurchaseGlobalDiscount::class);
+    }
+
+    public function purchaseOrderDownPaymentAllocations()
+    {
+        return $this->hasMany(PurchaseOrderDownPaymentAllocation::class);
+    }
+
+    public function purchaseReturns()
+    {
+        return $this->hasMany(PurchaseReturn::class);
+    }
+
+    public function purchaseReturnAllocations()
+    {
+        return $this->hasMany(PurchaseReturnAllocation::class);
+    }
+}
diff --git a/api/app/Models/PurchaseAdditionalCost.php b/api/app/Models/PurchaseAdditionalCost.php
new file mode 100644
index 000000000..a199ba54b
--- /dev/null
+++ b/api/app/Models/PurchaseAdditionalCost.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PurchaseAdditionalCost extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_id',
+        'code',
+        'date',
+        'due_days',
+        'purchase_additional_cost_category_id',
+        'paid_immediately_cash_account_id',
+        'amount_paid_immediately',
+        'amount_payable',
+        'amount_payable_paid',
+        'amount_payable_due',
+        'is_amount_payable_paid_off',
+        'amount_total',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'due_days' => 'integer',
+        'amount_paid_immediately' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'amount_payable_paid' => 'decimal:8',
+        'amount_payable_due' => 'decimal:8',
+        'is_amount_payable_paid_off' => 'boolean',
+        'amount_total' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $purchaseAdditionalCost): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($purchaseAdditionalCost): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $purchaseAdditionalCost->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $purchaseAdditionalCost->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Purchase additional cost branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseAdditionalCost->purchase_id,
+                modelClass: Purchase::class,
+                errorMessage: 'Purchase additional cost purchase must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseAdditionalCost->purchase_additional_cost_category_id,
+                modelClass: PurchaseAdditionalCostCategory::class,
+                errorMessage: 'Purchase additional cost category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseAdditionalCost->paid_immediately_cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Purchase additional cost paid immediately cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $purchaseAdditionalCost) use ($validateRelations) {
+            $purchaseAdditionalCost->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $purchaseAdditionalCost->created_by = auth()->id();
+                $purchaseAdditionalCost->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseAdditionalCost);
+        });
+
+        static::updating(function (self $purchaseAdditionalCost) use ($validateRelations) {
+            if (auth()->check()) {
+                $purchaseAdditionalCost->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseAdditionalCost);
+        });
+
+        static::deleting(function (self $purchaseAdditionalCost) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $purchaseAdditionalCost->deleted_by = auth()->id();
+            $purchaseAdditionalCost->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchase()
+    {
+        return $this->belongsTo(Purchase::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(PurchaseAdditionalCostCategory::class, 'purchase_additional_cost_category_id')->withTrashed();
+    }
+
+    public function paidImmediatelyCashAccount()
+    {
+        return $this->belongsTo(CashAccount::class, 'paid_immediately_cash_account_id')->withTrashed();
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(PurchaseAdditionalCostPayment::class);
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+}
diff --git a/api/app/Models/PurchaseAdditionalCostCategory.php b/api/app/Models/PurchaseAdditionalCostCategory.php
new file mode 100644
index 000000000..530baa339
--- /dev/null
+++ b/api/app/Models/PurchaseAdditionalCostCategory.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseAdditionalCostCategory extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class);
+    }
+
+    public function additionalCosts()
+    {
+        return $this->hasMany(PurchaseAdditionalCost::class);
+    }
+}
diff --git a/api/app/Models/PurchaseAdditionalCostPayment.php b/api/app/Models/PurchaseAdditionalCostPayment.php
new file mode 100644
index 000000000..5131f8e24
--- /dev/null
+++ b/api/app/Models/PurchaseAdditionalCostPayment.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PurchaseAdditionalCostPayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_additional_cost_id',
+        'code',
+        'date',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $purchaseAdditionalCostPayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($purchaseAdditionalCostPayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $purchaseAdditionalCostPayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $purchaseAdditionalCostPayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Purchase additional cost payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseAdditionalCostPayment->purchase_additional_cost_id,
+                modelClass: PurchaseAdditionalCost::class,
+                errorMessage: 'Purchase additional cost payment purchase additional cost must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseAdditionalCostPayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Purchase additional cost payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $purchaseAdditionalCostPayment) use ($validateRelations) {
+            $purchaseAdditionalCostPayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $purchaseAdditionalCostPayment->created_by = auth()->id();
+                $purchaseAdditionalCostPayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseAdditionalCostPayment);
+        });
+
+        static::updating(function (self $purchaseAdditionalCostPayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $purchaseAdditionalCostPayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseAdditionalCostPayment);
+        });
+
+        static::deleting(function (self $purchaseAdditionalCostPayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $purchaseAdditionalCostPayment->deleted_by = auth()->id();
+            $purchaseAdditionalCostPayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseAdditionalCost()
+    {
+        return $this->belongsTo(PurchaseAdditionalCost::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+}
diff --git a/api/app/Models/PurchaseGlobalDiscount.php b/api/app/Models/PurchaseGlobalDiscount.php
new file mode 100644
index 000000000..1ad447ec5
--- /dev/null
+++ b/api/app/Models/PurchaseGlobalDiscount.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\DiscountTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseGlobalDiscount extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_id',
+        'sequence',
+        'discount_type',
+        'discount_value',
+    ];
+
+    protected $casts = [
+        'sequence' => 'integer',
+        'discount_type' => DiscountTypeEnum::class,
+        'discount_value' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchase()
+    {
+        return $this->belongsTo(Purchase::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseItem.php b/api/app/Models/PurchaseItem.php
new file mode 100644
index 000000000..45fb350da
--- /dev/null
+++ b/api/app/Models/PurchaseItem.php
@@ -0,0 +1,138 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_id',
+        'has_purchase_order_item_product',
+        'qty',
+        'product_unit_id',
+        'product_id',
+        'product_unit_conversion_value',
+        'product_unit_qty_base',
+        'qty_received_base',
+        'qty_outstanding_base',
+        'qty_excess_base',
+        'product_unit_price',
+        'product_unit_is_price_include_vat',
+        'price_discount',
+        'price_after_discount',
+        'subtotal',
+        'subtotal_discount',
+        'subtotal_after_discount',
+        'global_discount',
+        'subtotal_after_global_discount',
+        'vat_profile_id',
+        'vat_rate',
+        'vat_base_numerator',
+        'vat_base_denominator',
+        'vat_base',
+        'vat',
+        'subtotal_after_vat',
+        'additional_cost',
+        'rounding',
+        'amount_payable',
+        'cogs',
+        'total_cogs',
+        'base_unit_cogs',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'has_purchase_order_item_product' => 'boolean',
+        'qty' => 'decimal:8',
+        'product_unit_conversion_value' => 'decimal:8',
+        'product_unit_qty_base' => 'decimal:8',
+        'qty_received_base' => 'decimal:8',
+        'qty_outstanding_base' => 'decimal:8',
+        'qty_excess_base' => 'decimal:8',
+        'product_unit_price' => 'decimal:8',
+        'product_unit_is_price_include_vat' => 'boolean',
+        'price_discount' => 'decimal:8',
+        'price_after_discount' => 'decimal:8',
+        'subtotal' => 'decimal:8',
+        'subtotal_discount' => 'decimal:8',
+        'subtotal_after_discount' => 'decimal:8',
+        'global_discount' => 'decimal:8',
+        'subtotal_after_global_discount' => 'decimal:8',
+        'vat_rate' => 'decimal:8',
+        'vat_base_numerator' => 'integer',
+        'vat_base_denominator' => 'integer',
+        'vat_base' => 'decimal:8',
+        'vat' => 'decimal:8',
+        'subtotal_after_vat' => 'decimal:8',
+        'additional_cost' => 'decimal:8',
+        'rounding' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'cogs' => 'decimal:8',
+        'total_cogs' => 'decimal:8',
+        'base_unit_cogs' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchase()
+    {
+        return $this->belongsTo(Purchase::class)->withTrashed();
+    }
+
+    public function productUnit()
+    {
+        return $this->belongsTo(ProductUnit::class)->withTrashed();
+    }
+
+    public function product()
+    {
+        return $this->belongsTo(Product::class)->withTrashed();
+    }
+
+    public function vatProfile()
+    {
+        return $this->belongsTo(VatProfile::class)->withTrashed();
+    }
+
+    public function productUnitPriceDiscounts()
+    {
+        return $this->hasMany(PurchaseItemProductUnitPriceDiscount::class);
+    }
+
+    public function subtotalDiscounts()
+    {
+        return $this->hasMany(PurchaseItemSubtotalDiscount::class);
+    }
+
+    public function directReceiptItem()
+    {
+        return $this->hasOne(PurchaseReceiptItem::class);
+    }
+
+    public function returnItems()
+    {
+        return $this->hasMany(PurchaseReturnItem::class);
+    }
+}
diff --git a/api/app/Models/PurchaseItemProductUnitPriceDiscount.php b/api/app/Models/PurchaseItemProductUnitPriceDiscount.php
new file mode 100644
index 000000000..7a251d5b0
--- /dev/null
+++ b/api/app/Models/PurchaseItemProductUnitPriceDiscount.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\DiscountTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseItemProductUnitPriceDiscount extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_item_id',
+        'sequence',
+        'discount_type',
+        'discount_value',
+    ];
+
+    protected $casts = [
+        'sequence' => 'integer',
+        'discount_type' => DiscountTypeEnum::class,
+        'discount_value' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseItem()
+    {
+        return $this->belongsTo(PurchaseItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseItemSubtotalDiscount.php b/api/app/Models/PurchaseItemSubtotalDiscount.php
new file mode 100644
index 000000000..b61bca139
--- /dev/null
+++ b/api/app/Models/PurchaseItemSubtotalDiscount.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\DiscountTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseItemSubtotalDiscount extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_item_id',
+        'sequence',
+        'discount_type',
+        'discount_value',
+    ];
+
+    protected $casts = [
+        'sequence' => 'integer',
+        'discount_type' => DiscountTypeEnum::class,
+        'discount_value' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseItem()
+    {
+        return $this->belongsTo(PurchaseItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseOrder.php b/api/app/Models/PurchaseOrder.php
new file mode 100644
index 000000000..dbf501bb6
--- /dev/null
+++ b/api/app/Models/PurchaseOrder.php
@@ -0,0 +1,186 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\PurchaseProgressStatusEnum;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasManyThrough;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PurchaseOrder extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'due_days',
+        'supplier_id',
+        'remarks',
+
+        'item_total_before_global_discount',
+        'global_discount',
+        'item_total_after_global_discount',
+        'vat_base',
+        'vat',
+        'item_total_after_vat',
+        'rounding',
+        'amount_payable',
+        'amount_paid_down_payment',
+        'amount_allocated_down_payment',
+        'amount_refunded_down_payment',
+        'amount_available_down_payment',
+        'progress_status',
+        'item_total_count',
+        'item_matched_count',
+        'item_less_count',
+        'item_more_count',
+        'item_unlinked_count',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'due_days' => 'integer',
+        'item_total_before_global_discount' => 'decimal:8',
+        'global_discount' => 'decimal:8',
+        'item_total_after_global_discount' => 'decimal:8',
+        'vat_base' => 'decimal:8',
+        'vat' => 'decimal:8',
+        'item_total_after_vat' => 'decimal:8',
+        'rounding' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'amount_paid_down_payment' => 'decimal:8',
+        'amount_allocated_down_payment' => 'decimal:8',
+        'amount_refunded_down_payment' => 'decimal:8',
+        'amount_available_down_payment' => 'decimal:8',
+        'progress_status' => PurchaseProgressStatusEnum::class,
+        'item_total_count' => 'integer',
+        'item_matched_count' => 'integer',
+        'item_less_count' => 'integer',
+        'item_more_count' => 'integer',
+        'item_unlinked_count' => 'integer',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $purchaseOrder): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($purchaseOrder): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $purchaseOrder->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $purchaseOrder->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Purchase order branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseOrder->supplier_id,
+                modelClass: Supplier::class,
+                errorMessage: 'Purchase order supplier must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $purchaseOrder) use ($validateRelations) {
+            $purchaseOrder->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $purchaseOrder->created_by = auth()->id();
+                $purchaseOrder->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseOrder);
+        });
+
+        static::updating(function (self $purchaseOrder) use ($validateRelations) {
+            if (auth()->check()) {
+                $purchaseOrder->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseOrder);
+        });
+
+        static::deleting(function (self $purchaseOrder) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $purchaseOrder->deleted_by = auth()->id();
+            $purchaseOrder->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function supplier()
+    {
+        return $this->belongsTo(Supplier::class)->withTrashed();
+    }
+
+    public function items()
+    {
+        return $this->hasMany(PurchaseOrderItem::class);
+    }
+
+    public function globalDiscounts()
+    {
+        return $this->hasMany(PurchaseOrderGlobalDiscount::class);
+    }
+
+    public function downPayments()
+    {
+        return $this->hasMany(PurchaseOrderDownPayment::class);
+    }
+
+    public function refundedDownPayments()
+    {
+        return $this->hasMany(PurchaseOrderDownPaymentRefund::class);
+    }
+
+    public function purchases()
+    {
+        return $this->hasMany(Purchase::class);
+    }
+
+    public function purchaseItems(): HasManyThrough
+    {
+        return $this->hasManyThrough(
+            PurchaseItem::class,
+            Purchase::class,
+            'purchase_order_id',
+            'purchase_id',
+            'id',
+            'id'
+        );
+    }
+}
diff --git a/api/app/Models/PurchaseOrderDownPayment.php b/api/app/Models/PurchaseOrderDownPayment.php
new file mode 100644
index 000000000..50a6bc3d2
--- /dev/null
+++ b/api/app/Models/PurchaseOrderDownPayment.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseOrderDownPayment extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_order_id',
+        'code',
+        'date',
+        'cash_account_id',
+        'amount',
+        'amount_allocated',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+        'amount_allocated' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseOrder()
+    {
+        return $this->belongsTo(PurchaseOrder::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function allocations()
+    {
+        return $this->hasMany(PurchaseOrderDownPaymentAllocation::class);
+    }
+}
diff --git a/api/app/Models/PurchaseOrderDownPaymentAllocation.php b/api/app/Models/PurchaseOrderDownPaymentAllocation.php
new file mode 100644
index 000000000..aa914f8df
--- /dev/null
+++ b/api/app/Models/PurchaseOrderDownPaymentAllocation.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseOrderDownPaymentAllocation extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_order_down_payment_id',
+        'purchase_id',
+        'date',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseOrderDownPayment()
+    {
+        return $this->belongsTo(PurchaseOrderDownPayment::class)->withTrashed();
+    }
+
+    public function purchase()
+    {
+        return $this->belongsTo(Purchase::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseOrderDownPaymentRefund.php b/api/app/Models/PurchaseOrderDownPaymentRefund.php
new file mode 100644
index 000000000..3a4148e2e
--- /dev/null
+++ b/api/app/Models/PurchaseOrderDownPaymentRefund.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseOrderDownPaymentRefund extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_order_id',
+        'code',
+        'date',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseOrder()
+    {
+        return $this->belongsTo(PurchaseOrder::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+}
diff --git a/api/app/Models/PurchaseOrderGlobalDiscount.php b/api/app/Models/PurchaseOrderGlobalDiscount.php
new file mode 100644
index 000000000..7fc2a26e3
--- /dev/null
+++ b/api/app/Models/PurchaseOrderGlobalDiscount.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\DiscountTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseOrderGlobalDiscount extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_order_id',
+        'sequence',
+        'discount_type',
+        'discount_value',
+    ];
+
+    protected $casts = [
+        'sequence' => 'integer',
+        'discount_type' => DiscountTypeEnum::class,
+        'discount_value' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseOrder()
+    {
+        return $this->belongsTo(PurchaseOrder::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseOrderItem.php b/api/app/Models/PurchaseOrderItem.php
new file mode 100644
index 000000000..abf818af7
--- /dev/null
+++ b/api/app/Models/PurchaseOrderItem.php
@@ -0,0 +1,125 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseOrderItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id', // user_input
+        'branch_id', // user_input
+        'purchase_order_id', // user_input
+        'qty', // user_input
+        'product_unit_id', // user_input
+        'product_id', // derived_from_product_unit
+        'product_unit_conversion_value', // user_input
+        'product_unit_qty_base', // calculated_when_saving_item_row
+        'qty_purchased_base', // calculated_after_purchase_summary
+        'qty_outstanding_base', // calculated_after_purchase_summary
+        'qty_excess_base', // calculated_after_purchase_summary
+        'product_unit_price', // user_input
+        'product_unit_is_price_include_vat', // user_input
+        'price_discount', // calculated_after_save_item_row
+        'price_after_discount', // calculated_after_save_item_row
+        'subtotal', // calculated_after_save_item_row
+        'subtotal_discount', // calculated_after_save_item_row
+        'subtotal_after_discount', // calculated_after_save_item_row
+
+        'global_discount', // calculated_after_save_discount_rows
+        'subtotal_after_global_discount', // calculated_after_save_discount_rows
+        'vat_profile_id', // user_input
+        'vat_rate', // user_input
+        'vat_base_numerator', // user_input
+        'vat_base_denominator', // user_input
+        'vat_base', // calculated_after_save_discount_rows
+        'vat', // calculated_after_save_discount_rows
+        'subtotal_after_vat', // calculated_after_save_discount_rows
+        'rounding', // calculated_after_save_discount_rows
+        'amount_payable', // calculated_after_save_discount_rows
+        'cogs', // calculated_after_save_discount_rows
+        'total_cogs', // calculated_after_save_discount_rows
+        'base_unit_cogs', // calculated_after_save_discount_rows
+        'remarks', // user_input
+    ];
+
+    protected $casts = [
+        'qty' => 'decimal:8',
+        'product_unit_conversion_value' => 'decimal:8',
+        'product_unit_qty_base' => 'decimal:8',
+        'qty_purchased_base' => 'decimal:8',
+        'qty_outstanding_base' => 'decimal:8',
+        'qty_excess_base' => 'decimal:8',
+        'product_unit_price' => 'decimal:8',
+        'product_unit_is_price_include_vat' => 'boolean',
+        'price_discount' => 'decimal:8',
+        'price_after_discount' => 'decimal:8',
+        'subtotal' => 'decimal:8',
+        'subtotal_discount' => 'decimal:8',
+        'subtotal_after_discount' => 'decimal:8',
+        'global_discount' => 'decimal:8',
+        'subtotal_after_global_discount' => 'decimal:8',
+        'vat_rate' => 'decimal:8',
+        'vat_base_numerator' => 'integer',
+        'vat_base_denominator' => 'integer',
+        'vat_base' => 'decimal:8',
+        'vat' => 'decimal:8',
+        'subtotal_after_vat' => 'decimal:8',
+        'rounding' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'cogs' => 'decimal:8',
+        'total_cogs' => 'decimal:8',
+        'base_unit_cogs' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseOrder()
+    {
+        return $this->belongsTo(PurchaseOrder::class)->withTrashed();
+    }
+
+    public function productUnit()
+    {
+        return $this->belongsTo(ProductUnit::class)->withTrashed();
+    }
+
+    public function product()
+    {
+        return $this->belongsTo(Product::class)->withTrashed();
+    }
+
+    public function vatProfile()
+    {
+        return $this->belongsTo(VatProfile::class)->withTrashed();
+    }
+
+    public function productUnitPriceDiscounts()
+    {
+        return $this->hasMany(PurchaseOrderItemProductUnitPriceDiscount::class);
+    }
+
+    public function subtotalDiscounts()
+    {
+        return $this->hasMany(PurchaseOrderItemSubtotalDiscount::class);
+    }
+}
diff --git a/api/app/Models/PurchaseOrderItemProductUnitPriceDiscount.php b/api/app/Models/PurchaseOrderItemProductUnitPriceDiscount.php
new file mode 100644
index 000000000..8db734ee4
--- /dev/null
+++ b/api/app/Models/PurchaseOrderItemProductUnitPriceDiscount.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\DiscountTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseOrderItemProductUnitPriceDiscount extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_order_item_id',
+        'sequence',
+        'discount_type',
+        'discount_value',
+    ];
+
+    protected $casts = [
+        'sequence' => 'integer',
+        'discount_type' => DiscountTypeEnum::class,
+        'discount_value' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseOrderItem()
+    {
+        return $this->belongsTo(PurchaseOrderItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseOrderItemSubtotalDiscount.php b/api/app/Models/PurchaseOrderItemSubtotalDiscount.php
new file mode 100644
index 000000000..0edfff4c6
--- /dev/null
+++ b/api/app/Models/PurchaseOrderItemSubtotalDiscount.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\DiscountTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseOrderItemSubtotalDiscount extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_order_item_id',
+        'sequence',
+        'discount_type',
+        'discount_value',
+    ];
+
+    protected $casts = [
+        'sequence' => 'integer',
+        'discount_type' => DiscountTypeEnum::class,
+        'discount_value' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseOrderItem()
+    {
+        return $this->belongsTo(PurchaseOrderItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchasePayment.php b/api/app/Models/PurchasePayment.php
new file mode 100644
index 000000000..1932a3998
--- /dev/null
+++ b/api/app/Models/PurchasePayment.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PurchasePayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_id',
+        'code',
+        'date',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $purchasePayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($purchasePayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $purchasePayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $purchasePayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Purchase payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchasePayment->purchase_id,
+                modelClass: Purchase::class,
+                errorMessage: 'Purchase payment purchase must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchasePayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Purchase payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $purchasePayment) use ($validateRelations) {
+            $purchasePayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $purchasePayment->created_by = auth()->id();
+                $purchasePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchasePayment);
+        });
+
+        static::updating(function (self $purchasePayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $purchasePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchasePayment);
+        });
+
+        static::deleting(function (self $purchasePayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $purchasePayment->deleted_by = auth()->id();
+            $purchasePayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchase()
+    {
+        return $this->belongsTo(Purchase::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+}
diff --git a/api/app/Models/PurchaseReceipt.php b/api/app/Models/PurchaseReceipt.php
new file mode 100644
index 000000000..8260b37be
--- /dev/null
+++ b/api/app/Models/PurchaseReceipt.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReceipt extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'supplier_id',
+        'purchase_id',
+        'is_from_direct_purchase',
+        'code',
+        'date',
+        'warehouse_id',
+        'remarks',
+        'is_posted',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'is_posted' => 'boolean',
+        'is_from_direct_purchase' => 'boolean',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchase()
+    {
+        return $this->belongsTo(Purchase::class)->withTrashed();
+    }
+
+    public function supplier()
+    {
+        return $this->belongsTo(Supplier::class)->withTrashed();
+    }
+
+    public function warehouse()
+    {
+        return $this->belongsTo(Warehouse::class)->withTrashed();
+    }
+
+    public function items()
+    {
+        return $this->hasMany(PurchaseReceiptItem::class);
+    }
+
+    public function itemSerials()
+    {
+        return $this->hasMany(PurchaseReceiptItemSerial::class);
+    }
+}
diff --git a/api/app/Models/PurchaseReceiptItem.php b/api/app/Models/PurchaseReceiptItem.php
new file mode 100644
index 000000000..8c1ccd2d9
--- /dev/null
+++ b/api/app/Models/PurchaseReceiptItem.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReceiptItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_receipt_id',
+        'purchase_item_id',
+        'has_purchase_item_product',
+        'qty',
+        'product_unit_id',
+        'product_id',
+        'product_unit_conversion_value',
+        'product_unit_qty_base',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'has_purchase_item_product' => 'boolean',
+        'qty' => 'decimal:8',
+        'product_unit_conversion_value' => 'decimal:8',
+        'product_unit_qty_base' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReceipt()
+    {
+        return $this->belongsTo(PurchaseReceipt::class)->withTrashed();
+    }
+
+    /**
+     * Only filled when this receipt item is created from direct purchase.
+     */
+    public function purchaseItem()
+    {
+        return $this->belongsTo(PurchaseItem::class)->withTrashed();
+    }
+
+    public function productUnit()
+    {
+        return $this->belongsTo(ProductUnit::class)->withTrashed();
+    }
+
+    public function product()
+    {
+        return $this->belongsTo(Product::class)->withTrashed();
+    }
+
+    public function stockTransaction()
+    {
+        return $this->morphOne(StockTransaction::class, 'referable');
+    }
+
+    public function serials()
+    {
+        return $this->hasMany(PurchaseReceiptItemSerial::class);
+    }
+}
diff --git a/api/app/Models/PurchaseReceiptItemSerial.php b/api/app/Models/PurchaseReceiptItemSerial.php
new file mode 100644
index 000000000..c7a07027a
--- /dev/null
+++ b/api/app/Models/PurchaseReceiptItemSerial.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReceiptItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_receipt_id',
+        'purchase_receipt_item_id',
+        'serial',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReceipt()
+    {
+        return $this->belongsTo(PurchaseReceipt::class)->withTrashed();
+    }
+
+    public function purchaseReceiptItem()
+    {
+        return $this->belongsTo(PurchaseReceiptItem::class)->withTrashed();
+    }
+
+    public function stockSerialTransaction()
+    {
+        return $this->morphOne(StockSerialTransaction::class, 'referable');
+    }
+}
diff --git a/api/app/Models/PurchaseReturn.php b/api/app/Models/PurchaseReturn.php
new file mode 100644
index 000000000..6f254e3f2
--- /dev/null
+++ b/api/app/Models/PurchaseReturn.php
@@ -0,0 +1,175 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PurchaseReturn extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_id',
+        'supplier_id',
+        'code',
+        'date',
+        'remarks',
+        'is_posted',
+        'item_total_before_global_discount',
+        'global_discount',
+        'item_total_after_global_discount',
+        'vat_base',
+        'vat',
+        'item_total_after_vat',
+        'additional_cost',
+        'rounding',
+        'amount_payable',
+        'amount_allocated_to_purchase',
+        'amount_received_total',
+        'amount_settled_total',
+        'amount_available',
+        'is_settled',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'is_posted' => 'boolean',
+        'item_total_before_global_discount' => 'decimal:8',
+        'global_discount' => 'decimal:8',
+        'item_total_after_global_discount' => 'decimal:8',
+        'vat_base' => 'decimal:8',
+        'vat' => 'decimal:8',
+        'item_total_after_vat' => 'decimal:8',
+        'additional_cost' => 'decimal:8',
+        'rounding' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'amount_allocated_to_purchase' => 'decimal:8',
+        'amount_received_total' => 'decimal:8',
+        'amount_settled_total' => 'decimal:8',
+        'amount_available' => 'decimal:8',
+        'is_settled' => 'boolean',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $purchaseReturn): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($purchaseReturn): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $purchaseReturn->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $purchaseReturn->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Purchase return branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseReturn->purchase_id,
+                modelClass: Purchase::class,
+                errorMessage: 'Purchase return purchase must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseReturn->supplier_id,
+                modelClass: Supplier::class,
+                errorMessage: 'Purchase return supplier must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $purchaseReturn) use ($validateRelations) {
+            $purchaseReturn->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $purchaseReturn->created_by = auth()->id();
+                $purchaseReturn->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseReturn);
+        });
+
+        static::updating(function (self $purchaseReturn) use ($validateRelations) {
+            if (auth()->check()) {
+                $purchaseReturn->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseReturn);
+        });
+
+        static::deleting(function (self $purchaseReturn) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $purchaseReturn->deleted_by = auth()->id();
+            $purchaseReturn->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchase()
+    {
+        return $this->belongsTo(Purchase::class)->withTrashed();
+    }
+
+    public function supplier()
+    {
+        return $this->belongsTo(Supplier::class)->withTrashed();
+    }
+
+    public function items()
+    {
+        return $this->hasMany(PurchaseReturnItem::class);
+    }
+
+    public function shipments()
+    {
+        return $this->hasMany(PurchaseReturnShipment::class);
+    }
+
+    public function allocations()
+    {
+        return $this->hasMany(PurchaseReturnAllocation::class);
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(PurchaseReturnPayment::class);
+    }
+
+    public function globalDiscounts()
+    {
+        return $this->hasMany(PurchaseReturnGlobalDiscount::class);
+    }
+}
diff --git a/api/app/Models/PurchaseReturnAllocation.php b/api/app/Models/PurchaseReturnAllocation.php
new file mode 100644
index 000000000..85805254e
--- /dev/null
+++ b/api/app/Models/PurchaseReturnAllocation.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReturnAllocation extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_return_id',
+        'purchase_id',
+        'date',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReturn()
+    {
+        return $this->belongsTo(PurchaseReturn::class)->withTrashed();
+    }
+
+    public function purchase()
+    {
+        return $this->belongsTo(Purchase::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseReturnGlobalDiscount.php b/api/app/Models/PurchaseReturnGlobalDiscount.php
new file mode 100644
index 000000000..3627bb202
--- /dev/null
+++ b/api/app/Models/PurchaseReturnGlobalDiscount.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\DiscountTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReturnGlobalDiscount extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_return_id',
+        'sequence',
+        'discount_type',
+        'discount_value',
+    ];
+
+    protected $casts = [
+        'sequence' => 'integer',
+        'discount_type' => DiscountTypeEnum::class,
+        'discount_value' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReturn()
+    {
+        return $this->belongsTo(PurchaseReturn::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseReturnItem.php b/api/app/Models/PurchaseReturnItem.php
new file mode 100644
index 000000000..b70a3abac
--- /dev/null
+++ b/api/app/Models/PurchaseReturnItem.php
@@ -0,0 +1,120 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReturnItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_return_id',
+        'purchase_item_id',
+        'qty',
+        'product_unit_id',
+        'product_unit_conversion_value',
+        'product_unit_qty_base',
+        'product_unit_price',
+        'product_unit_is_price_include_vat',
+        'price_discount',
+        'price_after_discount',
+        'subtotal',
+        'subtotal_discount',
+        'subtotal_after_discount',
+        'global_discount',
+        'subtotal_after_global_discount',
+        'vat_profile_id',
+        'vat_rate',
+        'vat_base_numerator',
+        'vat_base_denominator',
+        'vat_base',
+        'vat',
+        'subtotal_after_vat',
+        'additional_cost',
+        'rounding',
+        'amount_payable',
+        'cogs',
+        'total_cogs',
+        'base_unit_cogs',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'qty' => 'decimal:8',
+        'product_unit_conversion_value' => 'decimal:8',
+        'product_unit_qty_base' => 'decimal:8',
+        'product_unit_price' => 'decimal:8',
+        'product_unit_is_price_include_vat' => 'boolean',
+        'price_discount' => 'decimal:8',
+        'price_after_discount' => 'decimal:8',
+        'subtotal' => 'decimal:8',
+        'subtotal_discount' => 'decimal:8',
+        'subtotal_after_discount' => 'decimal:8',
+        'global_discount' => 'decimal:8',
+        'subtotal_after_global_discount' => 'decimal:8',
+        'vat_rate' => 'decimal:8',
+        'vat_base_numerator' => 'integer',
+        'vat_base_denominator' => 'integer',
+        'vat_base' => 'decimal:8',
+        'vat' => 'decimal:8',
+        'subtotal_after_vat' => 'decimal:8',
+        'additional_cost' => 'decimal:8',
+        'rounding' => 'decimal:8',
+        'amount_payable' => 'decimal:8',
+        'cogs' => 'decimal:8',
+        'total_cogs' => 'decimal:8',
+        'base_unit_cogs' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReturn()
+    {
+        return $this->belongsTo(PurchaseReturn::class)->withTrashed();
+    }
+
+    public function purchaseItem()
+    {
+        return $this->belongsTo(PurchaseItem::class)->withTrashed();
+    }
+
+    public function productUnit()
+    {
+        return $this->belongsTo(ProductUnit::class)->withTrashed();
+    }
+
+    public function vatProfile()
+    {
+        return $this->belongsTo(VatProfile::class)->withTrashed();
+    }
+
+    public function itemSerials()
+    {
+        return $this->hasMany(PurchaseReturnItemSerial::class);
+    }
+
+    public function shipmentItems()
+    {
+        return $this->hasMany(PurchaseReturnShipmentItem::class);
+    }
+}
diff --git a/api/app/Models/PurchaseReturnItemSerial.php b/api/app/Models/PurchaseReturnItemSerial.php
new file mode 100644
index 000000000..2c7b5c251
--- /dev/null
+++ b/api/app/Models/PurchaseReturnItemSerial.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReturnItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_return_id',
+        'purchase_return_item_id',
+        'serial',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReturn()
+    {
+        return $this->belongsTo(PurchaseReturn::class)->withTrashed();
+    }
+
+    public function purchaseReturnItem()
+    {
+        return $this->belongsTo(PurchaseReturnItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/PurchaseReturnPayment.php b/api/app/Models/PurchaseReturnPayment.php
new file mode 100644
index 000000000..7752c9185
--- /dev/null
+++ b/api/app/Models/PurchaseReturnPayment.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class PurchaseReturnPayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_return_id',
+        'code',
+        'date',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $purchaseReturnPayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($purchaseReturnPayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $purchaseReturnPayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $purchaseReturnPayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Purchase return payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseReturnPayment->purchase_return_id,
+                modelClass: PurchaseReturn::class,
+                errorMessage: 'Purchase return payment purchase return must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $purchaseReturnPayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Purchase return payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $purchaseReturnPayment) use ($validateRelations) {
+            $purchaseReturnPayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $purchaseReturnPayment->created_by = auth()->id();
+                $purchaseReturnPayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseReturnPayment);
+        });
+
+        static::updating(function (self $purchaseReturnPayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $purchaseReturnPayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($purchaseReturnPayment);
+        });
+
+        static::deleting(function (self $purchaseReturnPayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $purchaseReturnPayment->deleted_by = auth()->id();
+            $purchaseReturnPayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReturn()
+    {
+        return $this->belongsTo(PurchaseReturn::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+}
diff --git a/api/app/Models/PurchaseReturnShipment.php b/api/app/Models/PurchaseReturnShipment.php
new file mode 100644
index 000000000..f0e455457
--- /dev/null
+++ b/api/app/Models/PurchaseReturnShipment.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReturnShipment extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_return_id',
+        'supplier_id',
+        'code',
+        'date',
+        'warehouse_id',
+        'remarks',
+        'is_posted',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'is_posted' => 'boolean',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReturn()
+    {
+        return $this->belongsTo(PurchaseReturn::class)->withTrashed();
+    }
+
+    public function supplier()
+    {
+        return $this->belongsTo(Supplier::class)->withTrashed();
+    }
+
+    public function warehouse()
+    {
+        return $this->belongsTo(Warehouse::class)->withTrashed();
+    }
+
+    public function items()
+    {
+        return $this->hasMany(PurchaseReturnShipmentItem::class);
+    }
+
+    public function itemSerials()
+    {
+        return $this->hasMany(PurchaseReturnShipmentItemSerial::class);
+    }
+}
diff --git a/api/app/Models/PurchaseReturnShipmentItem.php b/api/app/Models/PurchaseReturnShipmentItem.php
new file mode 100644
index 000000000..000995824
--- /dev/null
+++ b/api/app/Models/PurchaseReturnShipmentItem.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReturnShipmentItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_return_shipment_id',
+        'purchase_return_item_id',
+        'qty',
+        'product_unit_id',
+        'product_unit_conversion_value',
+        'product_unit_qty_base',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'qty' => 'decimal:8',
+        'product_unit_conversion_value' => 'decimal:8',
+        'product_unit_qty_base' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReturnShipment()
+    {
+        return $this->belongsTo(PurchaseReturnShipment::class)->withTrashed();
+    }
+
+    public function purchaseReturnItem()
+    {
+        return $this->belongsTo(PurchaseReturnItem::class)->withTrashed();
+    }
+
+    public function productUnit()
+    {
+        return $this->belongsTo(ProductUnit::class)->withTrashed();
+    }
+
+    public function itemSerials()
+    {
+        return $this->hasMany(PurchaseReturnShipmentItemSerial::class);
+    }
+}
diff --git a/api/app/Models/PurchaseReturnShipmentItemSerial.php b/api/app/Models/PurchaseReturnShipmentItemSerial.php
new file mode 100644
index 000000000..caae8131e
--- /dev/null
+++ b/api/app/Models/PurchaseReturnShipmentItemSerial.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class PurchaseReturnShipmentItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'purchase_return_shipment_id',
+        'purchase_return_shipment_item_id',
+        'serial',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function purchaseReturnShipment()
+    {
+        return $this->belongsTo(PurchaseReturnShipment::class)->withTrashed();
+    }
+
+    public function purchaseReturnShipmentItem()
+    {
+        return $this->belongsTo(PurchaseReturnShipmentItem::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/Receivable.php b/api/app/Models/Receivable.php
new file mode 100644
index 000000000..59e76f0a0
--- /dev/null
+++ b/api/app/Models/Receivable.php
@@ -0,0 +1,163 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class Receivable extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'category_id',
+        'customer_id',
+        'cash_account_id',
+        'direct_amount_received',
+        'opening_amount_due',
+        'amount_total',
+        'amount_paid_by_cash_account',
+        'amount_paid_by_stock_adjustment',
+        'amount_due',
+        'due_days',
+        'is_paid_off',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'direct_amount_received' => 'decimal:8',
+        'opening_amount_due' => 'decimal:8',
+        'amount_total' => 'decimal:8',
+        'amount_paid_by_cash_account' => 'decimal:8',
+        'amount_paid_by_stock_adjustment' => 'decimal:8',
+        'amount_due' => 'decimal:8',
+        'due_days' => 'integer',
+        'is_paid_off' => 'boolean',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $receivable): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($receivable): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $receivable->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $receivable->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Receivable branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $receivable->category_id,
+                modelClass: ReceivableCategory::class,
+                errorMessage: 'Receivable category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $receivable->customer_id,
+                modelClass: Customer::class,
+                errorMessage: 'Receivable customer must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $receivable->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Receivable cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $receivable) use ($validateRelations) {
+            $receivable->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $receivable->created_by = auth()->id();
+                $receivable->updated_by = auth()->id();
+            }
+
+            $validateRelations($receivable);
+        });
+
+        static::updating(function (self $receivable) use ($validateRelations) {
+            if (auth()->check()) {
+                $receivable->updated_by = auth()->id();
+            }
+
+            $validateRelations($receivable);
+        });
+
+        static::deleting(function (self $receivable) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $receivable->deleted_by = auth()->id();
+            $receivable->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(ReceivableCategory::class, 'category_id')->withTrashed();
+    }
+
+    public function customer()
+    {
+        return $this->belongsTo(Customer::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function payments()
+    {
+        return $this->hasMany(ReceivablePayment::class);
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/ReceivableCategory.php b/api/app/Models/ReceivableCategory.php
new file mode 100644
index 000000000..30a241972
--- /dev/null
+++ b/api/app/Models/ReceivableCategory.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class ReceivableCategory extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'sequence',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'sequence' => 'integer',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/ReceivablePayment.php b/api/app/Models/ReceivablePayment.php
new file mode 100644
index 000000000..56ebb00fc
--- /dev/null
+++ b/api/app/Models/ReceivablePayment.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class ReceivablePayment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'receivable_id',
+        'cash_account_id',
+        'amount',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'amount' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $receivablePayment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($receivablePayment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $receivablePayment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $receivablePayment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Receivable payment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $receivablePayment->receivable_id,
+                modelClass: Receivable::class,
+                errorMessage: 'Receivable payment receivable must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $receivablePayment->cash_account_id,
+                modelClass: CashAccount::class,
+                errorMessage: 'Receivable payment cash account must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $receivablePayment) use ($validateRelations) {
+            $receivablePayment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $receivablePayment->created_by = auth()->id();
+                $receivablePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($receivablePayment);
+        });
+
+        static::updating(function (self $receivablePayment) use ($validateRelations) {
+            if (auth()->check()) {
+                $receivablePayment->updated_by = auth()->id();
+            }
+
+            $validateRelations($receivablePayment);
+        });
+
+        static::deleting(function (self $receivablePayment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $receivablePayment->deleted_by = auth()->id();
+            $receivablePayment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function receivable()
+    {
+        return $this->belongsTo(Receivable::class)->withTrashed();
+    }
+
+    public function cashAccount()
+    {
+        return $this->belongsTo(CashAccount::class)->withTrashed();
+    }
+
+    public function cashTransaction()
+    {
+        return $this->morphOne(CashTransaction::class, 'referable');
+    }
+
+    public function journalEntry()
+    {
+        return $this->morphOne(JournalEntry::class, 'source');
+    }
+}
diff --git a/api/app/Models/StockAdjustment.php b/api/app/Models/StockAdjustment.php
new file mode 100644
index 000000000..545a1b02b
--- /dev/null
+++ b/api/app/Models/StockAdjustment.php
@@ -0,0 +1,150 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class StockAdjustment extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'category_id',
+        'in_warehouse_id',
+        'out_warehouse_id',
+        'remarks',
+        'is_posted',
+        'total_incoming_item_qty',
+        'total_incoming_item_cogs',
+        'total_outgoing_item_qty',
+    ];
+
+    protected $casts = [
+        'is_posted' => 'boolean',
+        'date' => 'datetime',
+        'total_incoming_item_qty' => 'decimal:8',
+        'total_incoming_item_cogs' => 'decimal:8',
+        'total_outgoing_item_qty' => 'decimal:8',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $stockAdjustment): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($stockAdjustment): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $stockAdjustment->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $stockAdjustment->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Stock adjustment branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $stockAdjustment->category_id,
+                modelClass: StockAdjustmentCategory::class,
+                errorMessage: 'Stock adjustment category must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $stockAdjustment->in_warehouse_id,
+                modelClass: Warehouse::class,
+                errorMessage: 'Stock adjustment incoming warehouse must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $stockAdjustment->out_warehouse_id,
+                modelClass: Warehouse::class,
+                errorMessage: 'Stock adjustment outgoing warehouse must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $stockAdjustment) use ($validateRelations) {
+            $stockAdjustment->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $stockAdjustment->created_by = auth()->id();
+                $stockAdjustment->updated_by = auth()->id();
+            }
+
+            $validateRelations($stockAdjustment);
+        });
+
+        static::updating(function (self $stockAdjustment) use ($validateRelations) {
+            if (auth()->check()) {
+                $stockAdjustment->updated_by = auth()->id();
+            }
+
+            $validateRelations($stockAdjustment);
+        });
+
+        static::deleting(function (self $stockAdjustment) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $stockAdjustment->deleted_by = auth()->id();
+            $stockAdjustment->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function category()
+    {
+        return $this->belongsTo(StockAdjustmentCategory::class, 'category_id')->withTrashed();
+    }
+
+    public function inWarehouse()
+    {
+        return $this->belongsTo(Warehouse::class, 'in_warehouse_id')->withTrashed();
+    }
+
+    public function outWarehouse()
+    {
+        return $this->belongsTo(Warehouse::class, 'out_warehouse_id')->withTrashed();
+    }
+
+    public function inItems()
+    {
+        return $this->hasMany(StockAdjustmentInItem::class);
+    }
+
+    public function outItems()
+    {
+        return $this->hasMany(StockAdjustmentOutItem::class);
+    }
+}
diff --git a/api/app/Models/StockAdjustmentCategory.php b/api/app/Models/StockAdjustmentCategory.php
new file mode 100644
index 000000000..d4cb95f67
--- /dev/null
+++ b/api/app/Models/StockAdjustmentCategory.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class StockAdjustmentCategory extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class);
+    }
+}
diff --git a/api/app/Models/StockAdjustmentInItem.php b/api/app/Models/StockAdjustmentInItem.php
new file mode 100644
index 000000000..c866c3fbf
--- /dev/null
+++ b/api/app/Models/StockAdjustmentInItem.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class StockAdjustmentInItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'stock_adjustment_id',
+        'qty',
+        'product_unit_id',
+        'product_unit_conversion_value',
+        'product_unit_qty_base',
+        'product_unit_cogs',
+        'product_unit_total_cogs',
+        'product_unit_base_unit_cogs',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'qty' => 'decimal:8',
+        'product_unit_conversion_value' => 'decimal:8',
+        'product_unit_qty_base' => 'decimal:8',
+        'product_unit_cogs' => 'decimal:8',
+        'product_unit_total_cogs' => 'decimal:8',
+        'product_unit_base_unit_cogs' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function stockAdjustment()
+    {
+        return $this->belongsTo(StockAdjustment::class)->withTrashed();
+    }
+
+    public function productUnit()
+    {
+        return $this->belongsTo(ProductUnit::class)->withTrashed();
+    }
+
+    public function stockTransaction()
+    {
+        return $this->morphOne(StockTransaction::class, 'referable');
+    }
+
+    public function serials()
+    {
+        return $this->hasMany(StockAdjustmentInItemSerial::class);
+    }
+}
diff --git a/api/app/Models/StockAdjustmentInItemSerial.php b/api/app/Models/StockAdjustmentInItemSerial.php
new file mode 100644
index 000000000..869222b24
--- /dev/null
+++ b/api/app/Models/StockAdjustmentInItemSerial.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class StockAdjustmentInItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'stock_adjustment_id',
+        'stock_adjustment_in_item_id',
+        'serial',
+    ];
+
+    protected $casts = [
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function stockAdjustment()
+    {
+        return $this->belongsTo(StockAdjustment::class)->withTrashed();
+    }
+
+    public function stockAdjustmentInItem()
+    {
+        return $this->belongsTo(StockAdjustmentInItem::class)->withTrashed();
+    }
+
+    public function stockSerialTransaction()
+    {
+        return $this->morphOne(StockSerialTransaction::class, 'referable');
+    }
+}
diff --git a/api/app/Models/StockAdjustmentOutItem.php b/api/app/Models/StockAdjustmentOutItem.php
new file mode 100644
index 000000000..e3898a06b
--- /dev/null
+++ b/api/app/Models/StockAdjustmentOutItem.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class StockAdjustmentOutItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'stock_adjustment_id',
+        'qty',
+        'product_unit_id',
+        'product_unit_conversion_value',
+        'product_unit_qty_base',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'qty' => 'decimal:8',
+        'product_unit_conversion_value' => 'decimal:8',
+        'product_unit_qty_base' => 'decimal:8',
+        'product_base_unit_cogs' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function stockAdjustment()
+    {
+        return $this->belongsTo(StockAdjustment::class)->withTrashed();
+    }
+
+    public function productUnit()
+    {
+        return $this->belongsTo(ProductUnit::class)->withTrashed();
+    }
+
+    public function stockTransaction()
+    {
+        return $this->morphOne(StockTransaction::class, 'referable');
+    }
+
+    public function serials()
+    {
+        return $this->hasMany(StockAdjustmentOutItemSerial::class);
+    }
+}
diff --git a/api/app/Models/StockAdjustmentOutItemSerial.php b/api/app/Models/StockAdjustmentOutItemSerial.php
new file mode 100644
index 000000000..ce73f1eab
--- /dev/null
+++ b/api/app/Models/StockAdjustmentOutItemSerial.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class StockAdjustmentOutItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'stock_adjustment_id',
+        'stock_adjustment_out_item_id',
+        'serial',
+    ];
+
+    protected $casts = [
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function stockAdjustment()
+    {
+        return $this->belongsTo(StockAdjustment::class)->withTrashed();
+    }
+
+    public function stockAdjustmentOutItem()
+    {
+        return $this->belongsTo(StockAdjustmentOutItem::class)->withTrashed();
+    }
+
+    public function stockSerialTransaction()
+    {
+        return $this->morphOne(StockSerialTransaction::class, 'referable');
+    }
+}
diff --git a/api/app/Models/StockSerialTransaction.php b/api/app/Models/StockSerialTransaction.php
new file mode 100644
index 000000000..ba9a5a86c
--- /dev/null
+++ b/api/app/Models/StockSerialTransaction.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class StockSerialTransaction extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'referable_type',
+        'referable_id',
+        'date',
+        'warehouse_id',
+        'product_id',
+        'direction',
+        'serial',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'direction' => 'integer',
+    ];
+
+    public function referable()
+    {
+        return $this->morphTo();
+    }
+
+    public function warehouse()
+    {
+        return $this->belongsTo(Warehouse::class);
+    }
+
+    public function product()
+    {
+        return $this->belongsTo(Product::class);
+    }
+}
diff --git a/api/app/Models/StockTransaction.php b/api/app/Models/StockTransaction.php
new file mode 100644
index 000000000..68b38bb8e
--- /dev/null
+++ b/api/app/Models/StockTransaction.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class StockTransaction extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'referable_type',
+        'referable_id',
+        'date',
+        'warehouse_id',
+        'product_id',
+        'base_qty',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'base_qty' => 'decimal:8',
+    ];
+
+    public function referable()
+    {
+        return $this->morphTo();
+    }
+
+    public function warehouse()
+    {
+        return $this->belongsTo(Warehouse::class);
+    }
+
+    public function product()
+    {
+        return $this->belongsTo(Product::class);
+    }
+}
diff --git a/api/app/Models/StockTransfer.php b/api/app/Models/StockTransfer.php
new file mode 100644
index 000000000..f36943326
--- /dev/null
+++ b/api/app/Models/StockTransfer.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class StockTransfer extends Model
+{
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'date',
+        'source_warehouse_id',
+        'destination_warehouse_id',
+        'remarks',
+        'is_posted',
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'is_posted' => 'boolean',
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $stockTransfer): void {
+            $validateCompanyRelation = static function (
+                ?int $relationId,
+                string $modelClass,
+                string $errorMessage
+            ) use ($stockTransfer): void {
+                if (is_null($relationId)) {
+                    return;
+                }
+
+                $relation = $modelClass::find($relationId);
+
+                if (! $relation || (int) $relation->company_id !== (int) $stockTransfer->company_id) {
+                    throw new InvalidArgumentException($errorMessage);
+                }
+            };
+
+            $validateCompanyRelation(
+                relationId: $stockTransfer->branch_id,
+                modelClass: Branch::class,
+                errorMessage: 'Stock transfer branch must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $stockTransfer->source_warehouse_id,
+                modelClass: Warehouse::class,
+                errorMessage: 'Stock transfer source warehouse must exist in the same company.',
+            );
+
+            $validateCompanyRelation(
+                relationId: $stockTransfer->destination_warehouse_id,
+                modelClass: Warehouse::class,
+                errorMessage: 'Stock transfer destination warehouse must exist in the same company.',
+            );
+        };
+
+        static::creating(function (self $stockTransfer) use ($validateRelations) {
+            $stockTransfer->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $stockTransfer->created_by = auth()->id();
+                $stockTransfer->updated_by = auth()->id();
+            }
+
+            $validateRelations($stockTransfer);
+        });
+
+        static::updating(function (self $stockTransfer) use ($validateRelations) {
+            if (auth()->check()) {
+                $stockTransfer->updated_by = auth()->id();
+            }
+
+            $validateRelations($stockTransfer);
+        });
+
+        static::deleting(function (self $stockTransfer) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $stockTransfer->deleted_by = auth()->id();
+            $stockTransfer->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function sourceWarehouse()
+    {
+        return $this->belongsTo(Warehouse::class, 'source_warehouse_id')->withTrashed();
+    }
+
+    public function destinationWarehouse()
+    {
+        return $this->belongsTo(Warehouse::class, 'destination_warehouse_id')->withTrashed();
+    }
+
+    public function stockTransferItems()
+    {
+        return $this->hasMany(StockTransferItem::class);
+    }
+}
diff --git a/api/app/Models/StockTransferItem.php b/api/app/Models/StockTransferItem.php
new file mode 100644
index 000000000..cb9f8fd17
--- /dev/null
+++ b/api/app/Models/StockTransferItem.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class StockTransferItem extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'stock_transfer_id',
+        'qty',
+        'product_unit_id',
+        'product_unit_conversion_value',
+        'product_unit_qty_base',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'qty' => 'decimal:8',
+        'product_unit_conversion_value' => 'decimal:8',
+        'product_unit_qty_base' => 'decimal:8',
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function stockTransfer()
+    {
+        return $this->belongsTo(StockTransfer::class)->withTrashed();
+    }
+
+    public function productUnit()
+    {
+        return $this->belongsTo(ProductUnit::class)->withTrashed();
+    }
+
+    public function serials()
+    {
+        return $this->hasMany(StockTransferItemSerial::class);
+    }
+
+    public function sourceStockTransaction()
+    {
+        return $this->morphOne(StockTransaction::class, 'referable')
+            ->where('warehouse_id', $this->stockTransfer->source_warehouse_id);
+    }
+
+    public function destinationStockTransaction()
+    {
+        return $this->morphOne(StockTransaction::class, 'referable')
+            ->where('warehouse_id', $this->stockTransfer->destination_warehouse_id);
+    }
+}
diff --git a/api/app/Models/StockTransferItemSerial.php b/api/app/Models/StockTransferItemSerial.php
new file mode 100644
index 000000000..455d64caa
--- /dev/null
+++ b/api/app/Models/StockTransferItemSerial.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByBranch;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class StockTransferItemSerial extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByBranch;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'stock_transfer_id',
+        'stock_transfer_item_id',
+        'serial',
+    ];
+
+    protected $casts = [
+
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function stockTransfer()
+    {
+        return $this->belongsTo(StockTransfer::class)->withTrashed();
+    }
+
+    public function stockTransferItem()
+    {
+        return $this->belongsTo(StockTransferItem::class)->withTrashed();
+    }
+
+    public function stockSerialTransactionSource()
+    {
+        return $this->morphOne(StockSerialTransaction::class, 'referable')->where('direction', -1);
+    }
+
+    public function stockSerialTransactionDestination()
+    {
+        return $this->morphOne(StockSerialTransaction::class, 'referable')->where('direction', 1);
+    }
+}
diff --git a/api/app/Models/Supplier.php b/api/app/Models/Supplier.php
new file mode 100644
index 000000000..aad37b418
--- /dev/null
+++ b/api/app/Models/Supplier.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Supplier extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'user_id',
+        'code',
+        'name',
+        'address',
+        'city',
+        'payment_term_type',
+        'payment_term',
+        'taxable_enterprise',
+        'tax_id',
+        'status',
+        'remarks',
+    ];
+
+    protected $casts = [
+        'payment_term_type' => PaymentTermTypeEnum::class,
+        'taxable_enterprise' => 'boolean',
+        'status' => RecordStatusEnum::class,
+    ];
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function chartOfAccount()
+    {
+        return $this->morphOne(ChartOfAccount::class, 'source');
+    }
+}
diff --git a/api/app/Models/Unit.php b/api/app/Models/Unit.php
new file mode 100644
index 000000000..5d6c4a8b6
--- /dev/null
+++ b/api/app/Models/Unit.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\UnitTypeEnum;
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Unit extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'description',
+        'type',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'type' => UnitTypeEnum::class,
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+}
diff --git a/api/app/Models/User.php b/api/app/Models/User.php
index be338a8f1..6de565e19 100644
--- a/api/app/Models/User.php
+++ b/api/app/Models/User.php
@@ -18,15 +18,11 @@ class User extends Authenticatable
     use HasRolesAndPermissions;
     use TwoFactorAuthenticatable;
 
-    /**
-     * The attributes that are mass assignable.
-     *
-     * @var array<int, string>
-     */
     protected $fillable = [
         'name',
         'email',
         'password',
+        'timezone',
     ];
 
     /**
@@ -39,11 +35,6 @@ class User extends Authenticatable
         'remember_token',
     ];
 
-    /**
-     * Get the attributes that should be cast.
-     *
-     * @return array<string, string>
-     */
     protected function casts(): array
     {
         return [
@@ -67,6 +58,21 @@ public function companies()
         return $this->belongsToMany(Company::class);
     }
 
+    public function employees()
+    {
+        return $this->belongsToMany(Employee::class);
+    }
+
+    public function customers()
+    {
+        return $this->belongsToMany(Customer::class);
+    }
+
+    public function suppliers()
+    {
+        return $this->belongsToMany(Supplier::class);
+    }
+
     public static function boot()
     {
         parent::boot();
diff --git a/api/app/Models/VatProfile.php b/api/app/Models/VatProfile.php
new file mode 100644
index 000000000..0c954d302
--- /dev/null
+++ b/api/app/Models/VatProfile.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BootableModel;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class VatProfile extends Model
+{
+    use BootableModel;
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'code',
+        'name',
+        'vat_rate',
+        'vat_base_numerator',
+        'vat_base_denominator',
+        'remarks',
+        'is_active',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'vat_rate' => 'decimal:8',
+            'vat_base_numerator' => 'integer',
+            'vat_base_denominator' => 'integer',
+            'is_active' => 'boolean',
+        ];
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function products()
+    {
+        return $this->hasMany(Product::class, 'default_vat_profile_id');
+    }
+
+    public function purchaseOrderItems()
+    {
+        return $this->hasMany(PurchaseOrderItem::class);
+    }
+
+    // public function purchaseItems()
+    // {
+    //     return $this->hasMany(PurchaseItem::class);
+    // }
+
+    // public function purchaseReturnItems()
+    // {
+    //     return $this->hasMany(PurchaseReturnItem::class);
+    // }
+
+}
diff --git a/api/app/Models/Warehouse.php b/api/app/Models/Warehouse.php
new file mode 100644
index 000000000..3fd0f9847
--- /dev/null
+++ b/api/app/Models/Warehouse.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\RecordStatusEnum;
+use App\Traits\ScopeableByCompany;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use InvalidArgumentException;
+
+class Warehouse extends Model
+{
+    use HasFactory;
+    use ScopeableByCompany;
+    use SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'branch_id',
+        'code',
+        'name',
+        'address',
+        'city',
+        'contact',
+        'remarks',
+        'status',
+    ];
+
+    protected $casts = [
+        'status' => RecordStatusEnum::class,
+    ];
+
+    protected static function booted(): void
+    {
+        $validateRelations = static function (self $warehouse): void {
+            if (is_null($warehouse->branch_id)) {
+                return;
+            }
+
+            $branch = Branch::find($warehouse->branch_id);
+
+            if (! $branch || (int) $branch->company_id !== (int) $warehouse->company_id) {
+                throw new InvalidArgumentException('Warehouse branch must exist in the same company.');
+            }
+        };
+
+        static::creating(function (self $warehouse) use ($validateRelations) {
+            $warehouse->ulid = Str::ulid()->generate();
+
+            if (auth()->check()) {
+                $warehouse->created_by = auth()->id();
+                $warehouse->updated_by = auth()->id();
+            }
+
+            $validateRelations($warehouse);
+        });
+
+        static::updating(function (self $warehouse) use ($validateRelations) {
+            if (auth()->check()) {
+                $warehouse->updated_by = auth()->id();
+            }
+
+            $validateRelations($warehouse);
+        });
+
+        static::deleting(function (self $warehouse) {
+            if (! auth()->check()) {
+                return;
+            }
+
+            $warehouse->deleted_by = auth()->id();
+            $warehouse->save();
+        });
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(Company::class)->withTrashed();
+    }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class)->withTrashed();
+    }
+
+    public function stockTransferSource()
+    {
+        return $this->hasMany(StockTransfer::class, 'source_warehouse_id');
+    }
+
+    public function stockTransferDestination()
+    {
+        return $this->hasMany(StockTransfer::class, 'destination_warehouse_id');
+    }
+
+    public function stockTransactions()
+    {
+        return $this->hasMany(StockTransaction::class);
+    }
+}
diff --git a/api/app/Policies/AssetAdjustmentPolicy.php b/api/app/Policies/AssetAdjustmentPolicy.php
new file mode 100644
index 000000000..ebb1ac2d2
--- /dev/null
+++ b/api/app/Policies/AssetAdjustmentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\AssetAdjustment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class AssetAdjustmentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_adjustment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?AssetAdjustment $assetAdjustment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_adjustment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_adjustment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?AssetAdjustment $assetAdjustment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_adjustment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?AssetAdjustment $assetAdjustment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_adjustment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, AssetAdjustment $assetAdjustment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, AssetAdjustment $assetAdjustment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/AssetCategoryPolicy.php b/api/app/Policies/AssetCategoryPolicy.php
new file mode 100644
index 000000000..36a2921c6
--- /dev/null
+++ b/api/app/Policies/AssetCategoryPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\AssetCategory;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class AssetCategoryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_category-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?AssetCategory $assetCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_category-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_category-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?AssetCategory $assetCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_category-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?AssetCategory $assetCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_category-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, AssetCategory $assetCategory)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, AssetCategory $assetCategory)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/AssetPolicy.php b/api/app/Policies/AssetPolicy.php
new file mode 100644
index 000000000..0941b39f2
--- /dev/null
+++ b/api/app/Policies/AssetPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Asset;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class AssetPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Asset $asset = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Asset $asset = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Asset $asset = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Asset $asset)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Asset $asset)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/AssetPurchasePolicy.php b/api/app/Policies/AssetPurchasePolicy.php
new file mode 100644
index 000000000..e55f4500b
--- /dev/null
+++ b/api/app/Policies/AssetPurchasePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\AssetPurchase;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class AssetPurchasePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_purchase-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?AssetPurchase $assetPurchase = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_purchase-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_purchase-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?AssetPurchase $assetPurchase = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_purchase-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?AssetPurchase $assetPurchase = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_purchase-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, AssetPurchase $assetPurchase)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, AssetPurchase $assetPurchase)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/AssetSalePolicy.php b/api/app/Policies/AssetSalePolicy.php
new file mode 100644
index 000000000..ff4e18eeb
--- /dev/null
+++ b/api/app/Policies/AssetSalePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\AssetSale;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class AssetSalePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_sale-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?AssetSale $assetSale = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_sale-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_sale-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?AssetSale $assetSale = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_sale-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?AssetSale $assetSale = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_sale-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, AssetSale $assetSale)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, AssetSale $assetSale)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/AssetUnitPolicy.php b/api/app/Policies/AssetUnitPolicy.php
new file mode 100644
index 000000000..f58e75d4f
--- /dev/null
+++ b/api/app/Policies/AssetUnitPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\AssetUnit;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class AssetUnitPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_unit-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?AssetUnit $assetUnit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_unit-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_unit-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?AssetUnit $assetUnit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_unit-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?AssetUnit $assetUnit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('asset_unit-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, AssetUnit $assetUnit)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, AssetUnit $assetUnit)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/BranchPolicy.php b/api/app/Policies/BranchPolicy.php
index 4c7018c24..5ba0447d7 100644
--- a/api/app/Policies/BranchPolicy.php
+++ b/api/app/Policies/BranchPolicy.php
@@ -2,7 +2,7 @@
 
 namespace App\Policies;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Branch;
 use App\Models\User;
 use Illuminate\Auth\Access\HandlesAuthorization;
@@ -22,7 +22,7 @@ public function viewAny(User $user)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -42,7 +42,7 @@ public function view(User $user, ?Branch $branch = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -62,7 +62,7 @@ public function create(User $user)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -82,7 +82,7 @@ public function update(User $user, ?Branch $branch = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -102,7 +102,7 @@ public function delete(User $user, ?Branch $branch = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
diff --git a/api/app/Policies/BrandPolicy.php b/api/app/Policies/BrandPolicy.php
new file mode 100644
index 000000000..6aa5967e5
--- /dev/null
+++ b/api/app/Policies/BrandPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Brand;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class BrandPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('brand-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Brand $brand = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('brand-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('brand-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Brand $brand = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('brand-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Brand $brand = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('brand-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Brand $brand)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Brand $brand)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/CapitalOpeningPolicy.php b/api/app/Policies/CapitalOpeningPolicy.php
new file mode 100644
index 000000000..4e39a52f7
--- /dev/null
+++ b/api/app/Policies/CapitalOpeningPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\CapitalOpening;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class CapitalOpeningPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_opening-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?CapitalOpening $capitalOpening = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_opening-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_opening-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?CapitalOpening $capitalOpening = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_opening-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?CapitalOpening $capitalOpening = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_opening-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, CapitalOpening $capitalOpening)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, CapitalOpening $capitalOpening)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/CapitalTransactionPolicy.php b/api/app/Policies/CapitalTransactionPolicy.php
new file mode 100644
index 000000000..4b570aa4a
--- /dev/null
+++ b/api/app/Policies/CapitalTransactionPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\CapitalTransaction;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class CapitalTransactionPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_transaction-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?CapitalTransaction $capitalTransaction = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_transaction-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_transaction-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?CapitalTransaction $capitalTransaction = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_transaction-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?CapitalTransaction $capitalTransaction = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('capital_transaction-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, CapitalTransaction $capitalTransaction)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, CapitalTransaction $capitalTransaction)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/CashAccountPolicy.php b/api/app/Policies/CashAccountPolicy.php
new file mode 100644
index 000000000..59b6af731
--- /dev/null
+++ b/api/app/Policies/CashAccountPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\CashAccount;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class CashAccountPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_account-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?CashAccount $cashAccount = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_account-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_account-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?CashAccount $cashAccount = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_account-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?CashAccount $cashAccount = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_account-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, CashAccount $cashAccount)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, CashAccount $cashAccount)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/CashTransferPolicy.php b/api/app/Policies/CashTransferPolicy.php
new file mode 100644
index 000000000..64c9022da
--- /dev/null
+++ b/api/app/Policies/CashTransferPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\CashTransfer;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class CashTransferPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_transfer-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?CashTransfer $cashTransfer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_transfer-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_transfer-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?CashTransfer $cashTransfer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_transfer-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?CashTransfer $cashTransfer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('cash_transfer-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, CashTransfer $cashTransfer)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, CashTransfer $cashTransfer)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ChartOfAccountPolicy.php b/api/app/Policies/ChartOfAccountPolicy.php
new file mode 100644
index 000000000..e21105238
--- /dev/null
+++ b/api/app/Policies/ChartOfAccountPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\ChartOfAccount;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ChartOfAccountPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('chart_of_account-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?ChartOfAccount $chartOfAccount = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('chart_of_account-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('chart_of_account-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?ChartOfAccount $chartOfAccount = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('chart_of_account-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?ChartOfAccount $chartOfAccount = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('chart_of_account-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, ChartOfAccount $chartOfAccount)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, ChartOfAccount $chartOfAccount)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/CompanyPolicy.php b/api/app/Policies/CompanyPolicy.php
index bf2ce763c..17767db19 100644
--- a/api/app/Policies/CompanyPolicy.php
+++ b/api/app/Policies/CompanyPolicy.php
@@ -2,7 +2,7 @@
 
 namespace App\Policies;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Company;
 use App\Models\User;
 use Illuminate\Auth\Access\HandlesAuthorization;
@@ -22,7 +22,7 @@ public function viewAny(User $user)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -42,7 +42,7 @@ public function view(User $user, ?Company $company = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -62,7 +62,7 @@ public function create(User $user)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -82,7 +82,7 @@ public function update(User $user, ?Company $company = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -102,7 +102,7 @@ public function delete(User $user, ?Company $company = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
diff --git a/api/app/Policies/CustomerAddressPolicy.php b/api/app/Policies/CustomerAddressPolicy.php
new file mode 100644
index 000000000..af2ad2808
--- /dev/null
+++ b/api/app/Policies/CustomerAddressPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\CustomerAddress;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class CustomerAddressPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_address-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?CustomerAddress $customerAddress = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_address-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_address-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?CustomerAddress $customerAddress = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_address-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?CustomerAddress $customerAddress = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_address-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, CustomerAddress $customerAddress)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, CustomerAddress $customerAddress)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/CustomerGroupPolicy.php b/api/app/Policies/CustomerGroupPolicy.php
new file mode 100644
index 000000000..60bfa3bec
--- /dev/null
+++ b/api/app/Policies/CustomerGroupPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\CustomerGroup;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class CustomerGroupPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_group-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?CustomerGroup $customerGroup = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_group-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_group-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?CustomerGroup $customerGroup = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_group-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?CustomerGroup $customerGroup = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer_group-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, CustomerGroup $customerGroup)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, CustomerGroup $customerGroup)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/CustomerPolicy.php b/api/app/Policies/CustomerPolicy.php
new file mode 100644
index 000000000..f75b996de
--- /dev/null
+++ b/api/app/Policies/CustomerPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Customer;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class CustomerPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Customer $customer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Customer $customer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Customer $customer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('customer-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Customer $customer)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Customer $customer)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/DebtCategoryPolicy.php b/api/app/Policies/DebtCategoryPolicy.php
new file mode 100644
index 000000000..9bf37ff3e
--- /dev/null
+++ b/api/app/Policies/DebtCategoryPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\DebtCategory;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class DebtCategoryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_category-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?DebtCategory $debtCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_category-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_category-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?DebtCategory $debtCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_category-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?DebtCategory $debtCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_category-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, DebtCategory $debtCategory)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, DebtCategory $debtCategory)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/DebtCreditorPolicy.php b/api/app/Policies/DebtCreditorPolicy.php
new file mode 100644
index 000000000..d06610d76
--- /dev/null
+++ b/api/app/Policies/DebtCreditorPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\DebtCreditor;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class DebtCreditorPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_creditor-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?DebtCreditor $debt_creditor = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_creditor-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_creditor-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?DebtCreditor $debt_creditor = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_creditor-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?DebtCreditor $debt_creditor = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_creditor-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, DebtCreditor $debt_creditor)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, DebtCreditor $debt_creditor)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/DebtPaymentPolicy.php b/api/app/Policies/DebtPaymentPolicy.php
new file mode 100644
index 000000000..6f03dff3f
--- /dev/null
+++ b/api/app/Policies/DebtPaymentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\DebtPayment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class DebtPaymentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_payment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?DebtPayment $debtPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_payment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_payment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?DebtPayment $debtPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_payment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?DebtPayment $debtPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt_payment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, DebtPayment $debtPayment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, DebtPayment $debtPayment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/DebtPolicy.php b/api/app/Policies/DebtPolicy.php
new file mode 100644
index 000000000..25192254e
--- /dev/null
+++ b/api/app/Policies/DebtPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Debt;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class DebtPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Debt $debt = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Debt $debt = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Debt $debt = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('debt-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Debt $debt)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Debt $debt)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/EmployeePolicy.php b/api/app/Policies/EmployeePolicy.php
new file mode 100644
index 000000000..da3a583d1
--- /dev/null
+++ b/api/app/Policies/EmployeePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Employee;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class EmployeePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('employee-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Employee $employee = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('employee-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('employee-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Employee $employee = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('employee-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Employee $employee = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('employee-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Employee $employee)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Employee $employee)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ExpenseCategoryPolicy.php b/api/app/Policies/ExpenseCategoryPolicy.php
new file mode 100644
index 000000000..fe81bd6dd
--- /dev/null
+++ b/api/app/Policies/ExpenseCategoryPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\ExpenseCategory;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ExpenseCategoryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_category-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?ExpenseCategory $expenseCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_category-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_category-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?ExpenseCategory $expenseCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_category-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?ExpenseCategory $expenseCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_category-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, ExpenseCategory $expenseCategory)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, ExpenseCategory $expenseCategory)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ExpensePaymentPolicy.php b/api/app/Policies/ExpensePaymentPolicy.php
new file mode 100644
index 000000000..b01adfb7a
--- /dev/null
+++ b/api/app/Policies/ExpensePaymentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\ExpensePayment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ExpensePaymentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_payment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?ExpensePayment $expensePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_payment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_payment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?ExpensePayment $expensePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_payment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?ExpensePayment $expensePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense_payment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, ExpensePayment $expensePayment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, ExpensePayment $expensePayment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ExpensePolicy.php b/api/app/Policies/ExpensePolicy.php
new file mode 100644
index 000000000..059171b9d
--- /dev/null
+++ b/api/app/Policies/ExpensePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Expense;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ExpensePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Expense $expense = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Expense $expense = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Expense $expense = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('expense-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Expense $expense)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Expense $expense)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/IncomeCategoryPolicy.php b/api/app/Policies/IncomeCategoryPolicy.php
new file mode 100644
index 000000000..9fe89e4d0
--- /dev/null
+++ b/api/app/Policies/IncomeCategoryPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\IncomeCategory;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class IncomeCategoryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_category-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?IncomeCategory $incomeCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_category-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_category-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?IncomeCategory $incomeCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_category-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?IncomeCategory $incomeCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_category-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, IncomeCategory $incomeCategory)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, IncomeCategory $incomeCategory)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/IncomePaymentPolicy.php b/api/app/Policies/IncomePaymentPolicy.php
new file mode 100644
index 000000000..42999c711
--- /dev/null
+++ b/api/app/Policies/IncomePaymentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\IncomePayment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class IncomePaymentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_payment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?IncomePayment $incomePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_payment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_payment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?IncomePayment $incomePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_payment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?IncomePayment $incomePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income_payment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, IncomePayment $incomePayment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, IncomePayment $incomePayment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/IncomePolicy.php b/api/app/Policies/IncomePolicy.php
new file mode 100644
index 000000000..51b02656e
--- /dev/null
+++ b/api/app/Policies/IncomePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Income;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class IncomePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Income $income = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Income $income = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Income $income = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('income-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Income $income)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Income $income)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/InvestorPolicy.php b/api/app/Policies/InvestorPolicy.php
new file mode 100644
index 000000000..ad6d975ce
--- /dev/null
+++ b/api/app/Policies/InvestorPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Investor;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class InvestorPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('investor-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Investor $investor = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('investor-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('investor-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Investor $investor = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('investor-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Investor $investor = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('investor-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Investor $investor)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Investor $investor)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/JournalEntryPolicy.php b/api/app/Policies/JournalEntryPolicy.php
new file mode 100644
index 000000000..09158b6a2
--- /dev/null
+++ b/api/app/Policies/JournalEntryPolicy.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\JournalEntry;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class JournalEntryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('journal_entry-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?JournalEntry $journalEntry = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('journal_entry-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('journal_entry-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?JournalEntry $journalEntry = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('journal_entry-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?JournalEntry $journalEntry = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('journal_entry-delete')) {
+            return true;
+        }
+    }
+}
diff --git a/api/app/Policies/PrepaidExpensePaymentPolicy.php b/api/app/Policies/PrepaidExpensePaymentPolicy.php
new file mode 100644
index 000000000..61961ae23
--- /dev/null
+++ b/api/app/Policies/PrepaidExpensePaymentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PrepaidExpensePayment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PrepaidExpensePaymentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense_payment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PrepaidExpensePayment $prepaidExpensePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense_payment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense_payment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PrepaidExpensePayment $prepaidExpensePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense_payment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PrepaidExpensePayment $prepaidExpensePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense_payment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PrepaidExpensePayment $prepaidExpensePayment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PrepaidExpensePayment $prepaidExpensePayment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PrepaidExpensePolicy.php b/api/app/Policies/PrepaidExpensePolicy.php
new file mode 100644
index 000000000..ae4a6a57f
--- /dev/null
+++ b/api/app/Policies/PrepaidExpensePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PrepaidExpense;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PrepaidExpensePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PrepaidExpense $prepaidExpense = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PrepaidExpense $prepaidExpense = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PrepaidExpense $prepaidExpense = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_expense-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PrepaidExpense $prepaidExpense)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PrepaidExpense $prepaidExpense)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PrepaidIncomePaymentPolicy.php b/api/app/Policies/PrepaidIncomePaymentPolicy.php
new file mode 100644
index 000000000..41b87e341
--- /dev/null
+++ b/api/app/Policies/PrepaidIncomePaymentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PrepaidIncomePayment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PrepaidIncomePaymentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income_payment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PrepaidIncomePayment $prepaidIncomePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income_payment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income_payment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PrepaidIncomePayment $prepaidIncomePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income_payment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PrepaidIncomePayment $prepaidIncomePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income_payment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PrepaidIncomePayment $prepaidIncomePayment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PrepaidIncomePayment $prepaidIncomePayment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PrepaidIncomePolicy.php b/api/app/Policies/PrepaidIncomePolicy.php
new file mode 100644
index 000000000..ae4a2d0a0
--- /dev/null
+++ b/api/app/Policies/PrepaidIncomePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PrepaidIncome;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PrepaidIncomePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PrepaidIncome $prepaidIncome = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PrepaidIncome $prepaidIncome = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PrepaidIncome $prepaidIncome = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('prepaid_income-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PrepaidIncome $prepaidIncome)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PrepaidIncome $prepaidIncome)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ProductCategoryPolicy.php b/api/app/Policies/ProductCategoryPolicy.php
new file mode 100644
index 000000000..cf2e45418
--- /dev/null
+++ b/api/app/Policies/ProductCategoryPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ProductCategoryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_category-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?ProductCategory $productCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_category-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_category-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?ProductCategory $productCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_category-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?ProductCategory $productCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_category-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, ProductCategory $productCategory)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, ProductCategory $productCategory)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ProductPolicy.php b/api/app/Policies/ProductPolicy.php
new file mode 100644
index 000000000..275d287fb
--- /dev/null
+++ b/api/app/Policies/ProductPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Product;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ProductPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Product $product = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Product $product = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Product $product = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Product $product)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Product $product)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ProductUnitPolicy.php b/api/app/Policies/ProductUnitPolicy.php
new file mode 100644
index 000000000..ea7b866f0
--- /dev/null
+++ b/api/app/Policies/ProductUnitPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\ProductUnit;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ProductUnitPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_unit-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?ProductUnit $productUnit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_unit-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_unit-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?ProductUnit $productUnit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_unit-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?ProductUnit $productUnit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('product_unit-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, ProductUnit $productUnit)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, ProductUnit $productUnit)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ProfilePolicy.php b/api/app/Policies/ProfilePolicy.php
index 3e456f2ed..4d6ecf37a 100644
--- a/api/app/Policies/ProfilePolicy.php
+++ b/api/app/Policies/ProfilePolicy.php
@@ -2,7 +2,7 @@
 
 namespace App\Policies;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Profile;
 use App\Models\User;
 use Illuminate\Auth\Access\HandlesAuthorization;
@@ -32,7 +32,7 @@ public function view(User $user, ?Profile $profile = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -62,7 +62,7 @@ public function update(User $user, ?Profile $profile = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
diff --git a/api/app/Policies/PurchaseAdditionalCostCategoryPolicy.php b/api/app/Policies/PurchaseAdditionalCostCategoryPolicy.php
new file mode 100644
index 000000000..0ca906791
--- /dev/null
+++ b/api/app/Policies/PurchaseAdditionalCostCategoryPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PurchaseAdditionalCostCategory;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchaseAdditionalCostCategoryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_category-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_category-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_category-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_category-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_category-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PurchaseAdditionalCostCategory $purchaseAdditionalCostCategory)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PurchaseAdditionalCostPaymentPolicy.php b/api/app/Policies/PurchaseAdditionalCostPaymentPolicy.php
new file mode 100644
index 000000000..ed245737d
--- /dev/null
+++ b/api/app/Policies/PurchaseAdditionalCostPaymentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PurchaseAdditionalCostPayment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchaseAdditionalCostPaymentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_payment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_payment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_payment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_payment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost_payment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PurchaseAdditionalCostPayment $purchaseAdditionalCostPayment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PurchaseAdditionalCostPolicy.php b/api/app/Policies/PurchaseAdditionalCostPolicy.php
new file mode 100644
index 000000000..1209a170d
--- /dev/null
+++ b/api/app/Policies/PurchaseAdditionalCostPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PurchaseAdditionalCost;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchaseAdditionalCostPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PurchaseAdditionalCost $purchaseAdditionalCost = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PurchaseAdditionalCost $purchaseAdditionalCost = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PurchaseAdditionalCost $purchaseAdditionalCost = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_additional_cost-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PurchaseAdditionalCost $purchaseAdditionalCost)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PurchaseAdditionalCost $purchaseAdditionalCost)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PurchaseOrderDownPaymentPolicy.php b/api/app/Policies/PurchaseOrderDownPaymentPolicy.php
new file mode 100644
index 000000000..496511d03
--- /dev/null
+++ b/api/app/Policies/PurchaseOrderDownPaymentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PurchaseOrderDownPayment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchaseOrderDownPaymentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PurchaseOrderDownPayment $purchaseOrderDownPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PurchaseOrderDownPayment $purchaseOrderDownPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PurchaseOrderDownPayment $purchaseOrderDownPayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PurchaseOrderDownPayment $purchaseOrderDownPayment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PurchaseOrderDownPayment $purchaseOrderDownPayment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PurchaseOrderDownPaymentRefundPolicy.php b/api/app/Policies/PurchaseOrderDownPaymentRefundPolicy.php
new file mode 100644
index 000000000..5c4378218
--- /dev/null
+++ b/api/app/Policies/PurchaseOrderDownPaymentRefundPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PurchaseOrderDownPaymentRefund;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchaseOrderDownPaymentRefundPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment_refund-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment_refund-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment_refund-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment_refund-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_down_payment_refund-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PurchaseOrderDownPaymentRefund $purchaseOrderDownPaymentRefund)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PurchaseOrderItemPolicy.php b/api/app/Policies/PurchaseOrderItemPolicy.php
new file mode 100644
index 000000000..455bb76cb
--- /dev/null
+++ b/api/app/Policies/PurchaseOrderItemPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PurchaseOrderItem;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchaseOrderItemPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_item-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PurchaseOrderItem $purchaseOrderItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_item-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_item-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PurchaseOrderItem $purchaseOrderItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_item-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PurchaseOrderItem $purchaseOrderItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order_item-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PurchaseOrderItem $purchaseOrderItem)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PurchaseOrderItem $purchaseOrderItem)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PurchaseOrderPolicy.php b/api/app/Policies/PurchaseOrderPolicy.php
new file mode 100644
index 000000000..140fe2d48
--- /dev/null
+++ b/api/app/Policies/PurchaseOrderPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PurchaseOrder;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchaseOrderPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PurchaseOrder $purchaseOrder = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PurchaseOrder $purchaseOrder = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PurchaseOrder $purchaseOrder = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_order-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PurchaseOrder $purchaseOrder)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PurchaseOrder $purchaseOrder)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PurchasePolicy.php b/api/app/Policies/PurchasePolicy.php
new file mode 100644
index 000000000..04d16e131
--- /dev/null
+++ b/api/app/Policies/PurchasePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Purchase;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchasePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Purchase $purchase = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Purchase $purchase = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Purchase $purchase = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Purchase $purchase)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Purchase $purchase)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/PurchaseReceiptPolicy.php b/api/app/Policies/PurchaseReceiptPolicy.php
new file mode 100644
index 000000000..3bf50cad1
--- /dev/null
+++ b/api/app/Policies/PurchaseReceiptPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\PurchaseReceipt;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class PurchaseReceiptPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_receipt-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?PurchaseReceipt $purchaseReceipt = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_receipt-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_receipt-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?PurchaseReceipt $purchaseReceipt = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_receipt-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?PurchaseReceipt $purchaseReceipt = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('purchase_receipt-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, PurchaseReceipt $purchaseReceipt)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, PurchaseReceipt $purchaseReceipt)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ReceivableCategoryPolicy.php b/api/app/Policies/ReceivableCategoryPolicy.php
new file mode 100644
index 000000000..fb98591c0
--- /dev/null
+++ b/api/app/Policies/ReceivableCategoryPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\ReceivableCategory;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ReceivableCategoryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_category-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?ReceivableCategory $receivableCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_category-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_category-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?ReceivableCategory $receivableCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_category-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?ReceivableCategory $receivableCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_category-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, ReceivableCategory $receivableCategory)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, ReceivableCategory $receivableCategory)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ReceivablePaymentPolicy.php b/api/app/Policies/ReceivablePaymentPolicy.php
new file mode 100644
index 000000000..407e949e3
--- /dev/null
+++ b/api/app/Policies/ReceivablePaymentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\ReceivablePayment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ReceivablePaymentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_payment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?ReceivablePayment $receivablePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_payment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_payment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?ReceivablePayment $receivablePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_payment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?ReceivablePayment $receivablePayment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable_payment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, ReceivablePayment $receivablePayment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, ReceivablePayment $receivablePayment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/ReceivablePolicy.php b/api/app/Policies/ReceivablePolicy.php
new file mode 100644
index 000000000..bf07d4893
--- /dev/null
+++ b/api/app/Policies/ReceivablePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Receivable;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class ReceivablePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Receivable $receivable = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Receivable $receivable = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Receivable $receivable = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('receivable-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Receivable $receivable)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Receivable $receivable)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockAdjustmentCategoryPolicy.php b/api/app/Policies/StockAdjustmentCategoryPolicy.php
new file mode 100644
index 000000000..79c0cc9f2
--- /dev/null
+++ b/api/app/Policies/StockAdjustmentCategoryPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockAdjustmentCategory;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockAdjustmentCategoryPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_category-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockAdjustmentCategory $stockAdjustmentCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_category-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_category-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockAdjustmentCategory $stockAdjustmentCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_category-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockAdjustmentCategory $stockAdjustmentCategory = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_category-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockAdjustmentCategory $stockAdjustmentCategory)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockAdjustmentCategory $stockAdjustmentCategory)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockAdjustmentInItemPolicy.php b/api/app/Policies/StockAdjustmentInItemPolicy.php
new file mode 100644
index 000000000..b9a11f31a
--- /dev/null
+++ b/api/app/Policies/StockAdjustmentInItemPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockAdjustmentInItem;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockAdjustmentInItemPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockAdjustmentInItem $stockAdjustmentInItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockAdjustmentInItem $stockAdjustmentInItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockAdjustmentInItem $stockAdjustmentInItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockAdjustmentInItem $stockAdjustmentInItem)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockAdjustmentInItem $stockAdjustmentInItem)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockAdjustmentInItemSerialPolicy.php b/api/app/Policies/StockAdjustmentInItemSerialPolicy.php
new file mode 100644
index 000000000..3d6f206b2
--- /dev/null
+++ b/api/app/Policies/StockAdjustmentInItemSerialPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockAdjustmentInItemSerial;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockAdjustmentInItemSerialPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item_serial-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockAdjustmentInItemSerial $stockAdjustmentInItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item_serial-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item_serial-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockAdjustmentInItemSerial $stockAdjustmentInItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item_serial-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockAdjustmentInItemSerial $stockAdjustmentInItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_in_item_serial-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockAdjustmentInItemSerial $stockAdjustmentInItemSerial)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockAdjustmentInItemSerial $stockAdjustmentInItemSerial)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockAdjustmentOutItemPolicy.php b/api/app/Policies/StockAdjustmentOutItemPolicy.php
new file mode 100644
index 000000000..b23334624
--- /dev/null
+++ b/api/app/Policies/StockAdjustmentOutItemPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockAdjustmentOutItem;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockAdjustmentOutItemPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockAdjustmentOutItem $stockAdjustmentOutItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockAdjustmentOutItem $stockAdjustmentOutItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockAdjustmentOutItem $stockAdjustmentOutItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockAdjustmentOutItem $stockAdjustmentOutItem)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockAdjustmentOutItem $stockAdjustmentOutItem)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockAdjustmentOutItemSerialPolicy.php b/api/app/Policies/StockAdjustmentOutItemSerialPolicy.php
new file mode 100644
index 000000000..602b96e2d
--- /dev/null
+++ b/api/app/Policies/StockAdjustmentOutItemSerialPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockAdjustmentOutItemSerial;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockAdjustmentOutItemSerialPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item_serial-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item_serial-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item_serial-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item_serial-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment_out_item_serial-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockAdjustmentOutItemSerial $stockAdjustmentOutItemSerial)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockAdjustmentPolicy.php b/api/app/Policies/StockAdjustmentPolicy.php
new file mode 100644
index 000000000..8bd20f7c7
--- /dev/null
+++ b/api/app/Policies/StockAdjustmentPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockAdjustment;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockAdjustmentPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockAdjustment $stockAdjustment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockAdjustment $stockAdjustment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockAdjustment $stockAdjustment = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_adjustment-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockAdjustment $stockAdjustment)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockAdjustment $stockAdjustment)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockTransferItemPolicy.php b/api/app/Policies/StockTransferItemPolicy.php
new file mode 100644
index 000000000..50dd4026a
--- /dev/null
+++ b/api/app/Policies/StockTransferItemPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockTransferItemPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockTransferItem $stockTransferItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockTransferItem $stockTransferItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockTransferItem $stockTransferItem = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockTransferItem $stockTransferItem)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockTransferItem $stockTransferItem)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockTransferItemSerialPolicy.php b/api/app/Policies/StockTransferItemSerialPolicy.php
new file mode 100644
index 000000000..f1b6045a3
--- /dev/null
+++ b/api/app/Policies/StockTransferItemSerialPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockTransferItemSerialPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item_serial-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockTransferItemSerial $stockTransferItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item_serial-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item_serial-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockTransferItemSerial $stockTransferItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item_serial-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockTransferItemSerial $stockTransferItemSerial = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer_item_serial-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockTransferItemSerial $stockTransferItemSerial)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockTransferItemSerial $stockTransferItemSerial)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/StockTransferPolicy.php b/api/app/Policies/StockTransferPolicy.php
new file mode 100644
index 000000000..4aa5b2889
--- /dev/null
+++ b/api/app/Policies/StockTransferPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class StockTransferPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?StockTransfer $stockTransfer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?StockTransfer $stockTransfer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?StockTransfer $stockTransfer = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('stock_transfer-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, StockTransfer $stockTransfer)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, StockTransfer $stockTransfer)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/SupplierPolicy.php b/api/app/Policies/SupplierPolicy.php
new file mode 100644
index 000000000..d356d032d
--- /dev/null
+++ b/api/app/Policies/SupplierPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Supplier;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class SupplierPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('supplier-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Supplier $supplier = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('supplier-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('supplier-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Supplier $supplier = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('supplier-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Supplier $supplier = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('supplier-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Supplier $supplier)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Supplier $supplier)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/UnitPolicy.php b/api/app/Policies/UnitPolicy.php
new file mode 100644
index 000000000..85d0a67a4
--- /dev/null
+++ b/api/app/Policies/UnitPolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Unit;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class UnitPolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('unit-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?Unit $unit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('unit-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('unit-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?Unit $unit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('unit-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?Unit $unit = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('unit-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, Unit $unit)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Unit $unit)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/UserPolicy.php b/api/app/Policies/UserPolicy.php
index ab55f0078..ab0e62572 100644
--- a/api/app/Policies/UserPolicy.php
+++ b/api/app/Policies/UserPolicy.php
@@ -2,7 +2,7 @@
 
 namespace App\Policies;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\User;
 use Illuminate\Auth\Access\HandlesAuthorization;
 
@@ -21,7 +21,7 @@ public function viewAny(User $user)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -41,7 +41,7 @@ public function view(User $user, ?User $model = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -61,7 +61,7 @@ public function create(User $user)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
@@ -81,7 +81,7 @@ public function update(User $user, ?User $model = null)
             return false;
         }
 
-        if (! app()->environment('production') && $user->hasRole(UserRoles::DEVELOPER->value)) {
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
             return true;
         }
 
diff --git a/api/app/Policies/VatProfilePolicy.php b/api/app/Policies/VatProfilePolicy.php
new file mode 100644
index 000000000..fa7d428d5
--- /dev/null
+++ b/api/app/Policies/VatProfilePolicy.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\User;
+use App\Models\VatProfile;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class VatProfilePolicy
+{
+    use HandlesAuthorization;
+
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('vat_profile-readAny')) {
+            return true;
+        }
+    }
+
+    public function view(User $user, ?VatProfile $vatProfile = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('vat_profile-read')) {
+            return true;
+        }
+    }
+
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('vat_profile-create')) {
+            return true;
+        }
+    }
+
+    public function update(User $user, ?VatProfile $vatProfile = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('vat_profile-update')) {
+            return true;
+        }
+    }
+
+    public function delete(User $user, ?VatProfile $vatProfile = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('vat_profile-delete')) {
+            return true;
+        }
+    }
+
+    public function restore(User $user, VatProfile $vatProfile)
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, VatProfile $vatProfile)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Policies/WarehousePolicy.php b/api/app/Policies/WarehousePolicy.php
new file mode 100644
index 000000000..36f9c5072
--- /dev/null
+++ b/api/app/Policies/WarehousePolicy.php
@@ -0,0 +1,133 @@
+<?php
+
+namespace App\Policies;
+
+use App\Enums\UserRolesEnum;
+use App\Models\User;
+use App\Models\Warehouse;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class WarehousePolicy
+{
+    use HandlesAuthorization;
+
+    /**
+     * Determine whether the user can view any models.
+     *
+     * @return \Illuminate\Auth\Access\Response|bool
+     */
+    public function viewAny(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('warehouse-readAny')) {
+            return true;
+        }
+    }
+
+    /**
+     * Determine whether the user can view the model.
+     *
+     * @return \Illuminate\Auth\Access\Response|bool
+     */
+    public function view(User $user, ?Warehouse $warehouse = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('warehouse-read')) {
+            return true;
+        }
+    }
+
+    /**
+     * Determine whether the user can create models.
+     *
+     * @return \Illuminate\Auth\Access\Response|bool
+     */
+    public function create(User $user)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('warehouse-create')) {
+            return true;
+        }
+    }
+
+    /**
+     * Determine whether the user can update the model.
+     *
+     * @return \Illuminate\Auth\Access\Response|bool
+     */
+    public function update(User $user, ?Warehouse $warehouse = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('warehouse-update')) {
+            return true;
+        }
+    }
+
+    /**
+     * Determine whether the user can delete the model.
+     *
+     * @return \Illuminate\Auth\Access\Response|bool
+     */
+    public function delete(User $user, ?Warehouse $warehouse = null)
+    {
+        if ($user->roles->isEmpty()) {
+            return false;
+        }
+
+        if (! app()->environment('production') && $user->hasRole(UserRolesEnum::DEVELOPER->value)) {
+            return true;
+        }
+
+        if ($user->hasPermission('warehouse-delete')) {
+            return true;
+        }
+    }
+
+    /**
+     * Determine whether the user can restore the model.
+     *
+     * @return \Illuminate\Auth\Access\Response|bool
+     */
+    public function restore(User $user, Warehouse $warehouse)
+    {
+        return false;
+    }
+
+    /**
+     * Determine whether the user can permanently delete the model.
+     *
+     * @return \Illuminate\Auth\Access\Response|bool
+     */
+    public function forceDelete(User $user, Warehouse $warehouse)
+    {
+        return false;
+    }
+}
diff --git a/api/app/Providers/AppServiceProvider.php b/api/app/Providers/AppServiceProvider.php
index 24a0f2dcc..83dfefc65 100644
--- a/api/app/Providers/AppServiceProvider.php
+++ b/api/app/Providers/AppServiceProvider.php
@@ -5,6 +5,7 @@
 use App\Listeners\LoginEventListener;
 use App\Listeners\LogoutEventListener;
 use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\Schema;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -22,6 +23,8 @@ public function register(): void
      */
     public function boot(): void
     {
+        Schema::defaultStringLength(191);
+
         Event::listen(
             LoginEventListener::class,
             LogoutEventListener::class,
diff --git a/api/app/Rules/BranchStoreValidCode.php b/api/app/Rules/BranchStoreValidCode.php
new file mode 100644
index 000000000..211d24b51
--- /dev/null
+++ b/api/app/Rules/BranchStoreValidCode.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BranchStoreValidCode implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value === config('dcslab.KEYWORDS.AUTO')) {
+            return;
+        }
+
+        $company = Company::find($this->companyId);
+        if (! $company) {
+            return;
+        }
+
+        if ($company->branches()->where('code', (string) $value)->exists()) {
+            $fail('rules.unique_code')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/BranchStoreValidName.php b/api/app/Rules/BranchStoreValidName.php
new file mode 100644
index 000000000..148faead0
--- /dev/null
+++ b/api/app/Rules/BranchStoreValidName.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BranchStoreValidName implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $company = Company::find($this->companyId);
+        if (! $company) {
+            return;
+        }
+
+        if ($company->branches()->where('name', (string) $value)->exists()) {
+            $fail('rules.unique_name')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/BranchStoreValidStatus.php b/api/app/Rules/BranchStoreValidStatus.php
new file mode 100644
index 000000000..ba055f561
--- /dev/null
+++ b/api/app/Rules/BranchStoreValidStatus.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Rules;
+
+use App\Enums\RecordStatusEnum;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BranchStoreValidStatus implements ValidationRule
+{
+    private ?bool $isMain;
+
+    public function __construct(?bool $isMain)
+    {
+        $this->isMain = $isMain;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        return;
+        if ($this->isMain == true && $value == RecordStatusEnum::INACTIVE->value) {
+            $fail('rules.branch.set_branch_to_non_main')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/BranchUpdateValidCode.php b/api/app/Rules/BranchUpdateValidCode.php
new file mode 100644
index 000000000..cc5602329
--- /dev/null
+++ b/api/app/Rules/BranchUpdateValidCode.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Branch;
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BranchUpdateValidCode implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId,
+        protected Branch $branch,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value === config('dcslab.KEYWORDS.AUTO')) {
+            return;
+        }
+
+        $company = Company::find($this->companyId);
+        if (! $company) {
+            return;
+        }
+
+        if ($company->branches()
+            ->where('branches.id', '<>', $this->branch->id)
+            ->where('code', (string) $value)
+            ->exists()) {
+            $fail('rules.unique_code')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/BranchUpdateValidIsMain.php b/api/app/Rules/BranchUpdateValidIsMain.php
new file mode 100644
index 000000000..22c66bf60
--- /dev/null
+++ b/api/app/Rules/BranchUpdateValidIsMain.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Branch;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BranchUpdateValidIsMain implements ValidationRule
+{
+    private Branch $branch;
+
+    public function __construct(Branch $branch)
+    {
+        $this->branch = $branch;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $company = $this->branch->company;
+        if ($company->branches->count() == 1 && $value == false) {
+            $fail('rules.branch.set_branch_to_non_main')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/BranchUpdateValidName.php b/api/app/Rules/BranchUpdateValidName.php
new file mode 100644
index 000000000..821da14ab
--- /dev/null
+++ b/api/app/Rules/BranchUpdateValidName.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Branch;
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BranchUpdateValidName implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId,
+        protected Branch $branch,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $company = Company::find($this->companyId);
+        if (! $company) {
+            return;
+        }
+
+        if ($company->branches()
+            ->where('branches.id', '<>', $this->branch->id)
+            ->where('name', (string) $value)
+            ->exists()) {
+            $fail('rules.unique_name')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/BranchUpdateValidStatus.php b/api/app/Rules/BranchUpdateValidStatus.php
new file mode 100644
index 000000000..cf5521bc0
--- /dev/null
+++ b/api/app/Rules/BranchUpdateValidStatus.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Rules;
+
+use App\Enums\RecordStatusEnum;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BranchUpdateValidStatus implements ValidationRule
+{
+    protected ?bool $isMain;
+
+    public function __construct(?bool $isMain)
+    {
+        $this->isMain = $isMain;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->isMain == true && $value == RecordStatusEnum::INACTIVE->value) {
+            $fail('rules.branch.set_branch_to_non_main')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/BrandStoreValidCode.php b/api/app/Rules/BrandStoreValidCode.php
new file mode 100644
index 000000000..5a82cd9f9
--- /dev/null
+++ b/api/app/Rules/BrandStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Brand\BrandActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BrandStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $brandActions = new BrandActions();
+
+            if (! $brandActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/BrandUpdateValidCode.php b/api/app/Rules/BrandUpdateValidCode.php
new file mode 100644
index 000000000..3353b6762
--- /dev/null
+++ b/api/app/Rules/BrandUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Brand\BrandActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class BrandUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $brand;
+
+    public function __construct($companyId, $brand)
+    {
+        $this->companyId = $companyId;
+        $this->brand = $brand;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $brandActions = new BrandActions();
+
+            if (! $brandActions->isUniqueCode($this->companyId, $value, $this->brand->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/CompanyStoreValidCode.php b/api/app/Rules/CompanyStoreValidCode.php
new file mode 100644
index 000000000..eb0062c8d
--- /dev/null
+++ b/api/app/Rules/CompanyStoreValidCode.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\User;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CompanyStoreValidCode implements ValidationRule
+{
+    public function __construct(
+        protected User $user,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value === config('dcslab.KEYWORDS.AUTO')) {
+            return;
+        }
+
+        if ($this->user->companies()->where('code', (string) $value)->exists()) {
+            $fail('rules.unique_code')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/CompanyStoreValidDefault.php b/api/app/Rules/CompanyStoreValidDefault.php
new file mode 100644
index 000000000..19ad7ba2d
--- /dev/null
+++ b/api/app/Rules/CompanyStoreValidDefault.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\User;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CompanyStoreValidDefault implements ValidationRule
+{
+    private User $user;
+
+    public function __construct(User $user)
+    {
+        $this->user = $user;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->user->companies->count() == 0 && $value == false) {
+            $fail('rules.company.set_company_to_non_default')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/CompanyStoreValidName.php b/api/app/Rules/CompanyStoreValidName.php
new file mode 100644
index 000000000..824eda02e
--- /dev/null
+++ b/api/app/Rules/CompanyStoreValidName.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\User;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CompanyStoreValidName implements ValidationRule
+{
+    public function __construct(
+        protected User $user,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->user->companies()->where('name', (string) $value)->exists()) {
+            $fail('rules.unique_name')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/CompanyStoreValidStatus.php b/api/app/Rules/CompanyStoreValidStatus.php
new file mode 100644
index 000000000..c9fd8d9d2
--- /dev/null
+++ b/api/app/Rules/CompanyStoreValidStatus.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Rules;
+
+use App\Enums\RecordStatusEnum;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CompanyStoreValidStatus implements ValidationRule
+{
+    private ?bool $isDefault;
+
+    public function __construct(?bool $isDefault)
+    {
+        $this->isDefault = $isDefault;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->isDefault == true && $value == RecordStatusEnum::INACTIVE->value) {
+            $fail('rules.company.deactivate_default_company')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/CompanyUpdateValidCode.php b/api/app/Rules/CompanyUpdateValidCode.php
new file mode 100644
index 000000000..334e1672a
--- /dev/null
+++ b/api/app/Rules/CompanyUpdateValidCode.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use App\Models\User;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CompanyUpdateValidCode implements ValidationRule
+{
+    public function __construct(
+        protected User $user,
+        protected Company $company,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value === config('dcslab.KEYWORDS.AUTO')) {
+            return;
+        }
+
+        if ($this->user->companies()
+            ->where('companies.id', '<>', $this->company->id)
+            ->where('code', (string) $value)
+            ->exists()) {
+            $fail('rules.unique_code')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/CompanyUpdateValidDefault.php b/api/app/Rules/CompanyUpdateValidDefault.php
new file mode 100644
index 000000000..278dd4692
--- /dev/null
+++ b/api/app/Rules/CompanyUpdateValidDefault.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\User;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CompanyUpdateValidDefault implements ValidationRule
+{
+    private User $user;
+
+    public function __construct(User $user)
+    {
+        $this->user = $user;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->user->companies->count() == 1 && $value == false) {
+            $fail('rules.company.set_company_to_non_default')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/CompanyUpdateValidName.php b/api/app/Rules/CompanyUpdateValidName.php
new file mode 100644
index 000000000..42161daf1
--- /dev/null
+++ b/api/app/Rules/CompanyUpdateValidName.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use App\Models\User;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CompanyUpdateValidName implements ValidationRule
+{
+    public function __construct(
+        protected User $user,
+        protected Company $company,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->user->companies()
+            ->where('companies.id', '<>', $this->company->id)
+            ->where('name', (string) $value)
+            ->exists()) {
+            $fail('rules.unique_name')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/CompanyUpdateValidStatus.php b/api/app/Rules/CompanyUpdateValidStatus.php
new file mode 100644
index 000000000..152e01941
--- /dev/null
+++ b/api/app/Rules/CompanyUpdateValidStatus.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Rules;
+
+use App\Enums\RecordStatusEnum;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CompanyUpdateValidStatus implements ValidationRule
+{
+    private ?bool $isDefault;
+
+    public function __construct(?bool $isDefault)
+    {
+        $this->isDefault = $isDefault;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->isDefault == true && $value == RecordStatusEnum::INACTIVE->value) {
+            $fail('rules.company.deactivate_default_company')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/CustomerAddressStoreValidCode.php b/api/app/Rules/CustomerAddressStoreValidCode.php
new file mode 100644
index 000000000..51653c528
--- /dev/null
+++ b/api/app/Rules/CustomerAddressStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\CustomerAddress\CustomerAddressActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CustomerAddressStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $customerAddressActions = new CustomerAddressActions();
+
+            if (! $customerAddressActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/CustomerAddressUpdateValidCode.php b/api/app/Rules/CustomerAddressUpdateValidCode.php
new file mode 100644
index 000000000..758f6e1cc
--- /dev/null
+++ b/api/app/Rules/CustomerAddressUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\CustomerAddress\CustomerAddressActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CustomerAddressUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $customerAddress;
+
+    public function __construct($companyId, $customerAddress)
+    {
+        $this->companyId = $companyId;
+        $this->customerAddress = $customerAddress;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $customerAddressActions = new CustomerAddressActions();
+
+            if (! $customerAddressActions->isUniqueCode($this->companyId, $value, $this->customerAddress->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/CustomerGroupStoreValidCode.php b/api/app/Rules/CustomerGroupStoreValidCode.php
new file mode 100644
index 000000000..1aa45d2af
--- /dev/null
+++ b/api/app/Rules/CustomerGroupStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\CustomerGroup\CustomerGroupActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CustomerGroupStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $customerGroupActions = new CustomerGroupActions();
+
+            if (! $customerGroupActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/CustomerGroupUpdateValidCode.php b/api/app/Rules/CustomerGroupUpdateValidCode.php
new file mode 100644
index 000000000..646033ce7
--- /dev/null
+++ b/api/app/Rules/CustomerGroupUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\CustomerGroup\CustomerGroupActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CustomerGroupUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $customerGroup;
+
+    public function __construct($companyId, $customerGroup)
+    {
+        $this->companyId = $companyId;
+        $this->customerGroup = $customerGroup;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $customerGroupActions = new CustomerGroupActions();
+
+            if (! $customerGroupActions->isUniqueCode($this->companyId, $value, $this->customerGroup->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/CustomerStoreValidCode.php b/api/app/Rules/CustomerStoreValidCode.php
new file mode 100644
index 000000000..3c738de97
--- /dev/null
+++ b/api/app/Rules/CustomerStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Customer\CustomerActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CustomerStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $customerActions = new CustomerActions();
+
+            if (! $customerActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/CustomerStoreValidGroup.php b/api/app/Rules/CustomerStoreValidGroup.php
new file mode 100644
index 000000000..968eba9b5
--- /dev/null
+++ b/api/app/Rules/CustomerStoreValidGroup.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\CustomerGroup;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CustomerStoreValidGroup implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! $value) {
+            return;
+        }
+
+        $data = CustomerGroup::whereCompanyId('customer_groups', $this->companyId)->where('id', $value);
+        if ($data->doesntExist()) {
+            $fail('rules.valid_customer_group')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/CustomerUpdateValidCode.php b/api/app/Rules/CustomerUpdateValidCode.php
new file mode 100644
index 000000000..f0ea7a574
--- /dev/null
+++ b/api/app/Rules/CustomerUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Customer\CustomerActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CustomerUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $customer;
+
+    public function __construct($companyId, $customer)
+    {
+        $this->companyId = $companyId;
+        $this->customer = $customer;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $customerActions = new CustomerActions();
+
+            if (! $customerActions->isUniqueCode($this->companyId, $value, $this->customer->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/CustomerUpdateValidGroup.php b/api/app/Rules/CustomerUpdateValidGroup.php
new file mode 100644
index 000000000..b54dfa515
--- /dev/null
+++ b/api/app/Rules/CustomerUpdateValidGroup.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\CustomerGroup;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class CustomerUpdateValidGroup implements ValidationRule
+{
+    protected $companyId;
+
+    protected $customer;
+
+    public function __construct($companyId, $customer)
+    {
+        $this->companyId = $companyId;
+        $this->customer = $customer;
+    }
+
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $data = CustomerGroup::whereCompanyId('customer_groups', $this->companyId)->where('id', $value);
+
+        if ($data->doesntExist() && $this->customer->group_id !== $value) {
+            $fail('rules.valid_customer_group')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/DeactivateDefaultCompany.php b/api/app/Rules/DeactivateDefaultCompany.php
deleted file mode 100644
index 59f65cb5e..000000000
--- a/api/app/Rules/DeactivateDefaultCompany.php
+++ /dev/null
@@ -1,29 +0,0 @@
-<?php
-
-namespace App\Rules;
-
-use App\Enums\RecordStatus;
-use Closure;
-use Illuminate\Contracts\Validation\ValidationRule;
-
-class DeactivateDefaultCompany implements ValidationRule
-{
-    private bool $isDefault;
-
-    public function __construct(bool $isDefault)
-    {
-        $this->isDefault = $isDefault;
-    }
-
-    /**
-     * Run the validation rule.
-     *
-     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
-     */
-    public function validate(string $attribute, mixed $value, Closure $fail): void
-    {
-        if ($this->isDefault == true && $value == RecordStatus::INACTIVE->value) {
-            $fail('rules.company.deactivate_default_company')->translate();
-        }
-    }
-}
diff --git a/api/app/Rules/EmployeeStoreValidCode.php b/api/app/Rules/EmployeeStoreValidCode.php
new file mode 100644
index 000000000..7fa4d6fea
--- /dev/null
+++ b/api/app/Rules/EmployeeStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Employee\EmployeeActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class EmployeeStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $employeeActions = new EmployeeActions();
+
+            if (! $employeeActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/EmployeeUpdateValidCode.php b/api/app/Rules/EmployeeUpdateValidCode.php
new file mode 100644
index 000000000..686c6d638
--- /dev/null
+++ b/api/app/Rules/EmployeeUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Employee\EmployeeActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class EmployeeUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $employee;
+
+    public function __construct($companyId, $employee)
+    {
+        $this->companyId = $companyId;
+        $this->employee = $employee;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $employeeActions = new EmployeeActions();
+
+            if (! $employeeActions->isUniqueCode($this->companyId, $value, $this->employee->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/ExistsForCompany.php b/api/app/Rules/ExistsForCompany.php
new file mode 100644
index 000000000..0d742ed57
--- /dev/null
+++ b/api/app/Rules/ExistsForCompany.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Schema;
+
+class ExistsForCompany implements ValidationRule
+{
+    private static array $hasDeletedAtColumnCache = [];
+
+    public function __construct(
+        private string $table,
+        private ?int $companyId
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (is_null($this->companyId) || is_null($value)) {
+            return;
+        }
+
+        $exists = DB::table($this->table)
+            ->where('id', $value)
+            ->where('company_id', $this->companyId);
+
+        if ($this->tableHasDeletedAtColumn()) {
+            $exists->whereNull('deleted_at');
+        }
+
+        if (! $exists->exists()) {
+            $fail('The selected :attribute is invalid.');
+        }
+    }
+
+    private function tableHasDeletedAtColumn(): bool
+    {
+        if (! array_key_exists($this->table, self::$hasDeletedAtColumnCache)) {
+            self::$hasDeletedAtColumnCache[$this->table] = Schema::hasColumn($this->table, 'deleted_at');
+        }
+
+        return self::$hasDeletedAtColumnCache[$this->table];
+    }
+}
diff --git a/api/app/Rules/InactiveUser.php b/api/app/Rules/InactiveUser.php
index b9477f05d..43622330a 100644
--- a/api/app/Rules/InactiveUser.php
+++ b/api/app/Rules/InactiveUser.php
@@ -2,7 +2,7 @@
 
 namespace App\Rules;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use App\Models\User;
 use Closure;
 use Illuminate\Contracts\Validation\ValidationRule;
@@ -23,7 +23,7 @@ public function __construct($user)
      */
     public function validate(string $attribute, mixed $value, Closure $fail): void
     {
-        if ($this->user->profile->status == RecordStatus::INACTIVE) {
+        if ($this->user->profile->status == RecordStatusEnum::INACTIVE) {
             $fail('rules.inactive_user')->translate();
         }
     }
diff --git a/api/app/Rules/InvestorStoreValidCode.php b/api/app/Rules/InvestorStoreValidCode.php
new file mode 100644
index 000000000..3728442ad
--- /dev/null
+++ b/api/app/Rules/InvestorStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Investor\InvestorActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class InvestorStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $investorActions = new InvestorActions();
+
+            if (! $investorActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/InvestorStoreValidName.php b/api/app/Rules/InvestorStoreValidName.php
new file mode 100644
index 000000000..9c7cc8c8d
--- /dev/null
+++ b/api/app/Rules/InvestorStoreValidName.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Investor;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class InvestorStoreValidName implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $investor = Investor::whereCompanyId('investors', $this->companyId)->where('name', $value);
+
+        if ($investor->exists()) {
+            $fail('rules.unique_name')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/InvestorUpdateValidCode.php b/api/app/Rules/InvestorUpdateValidCode.php
new file mode 100644
index 000000000..5565701ec
--- /dev/null
+++ b/api/app/Rules/InvestorUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Investor\InvestorActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class InvestorUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $investor;
+
+    public function __construct($companyId, $investor)
+    {
+        $this->companyId = $companyId;
+        $this->investor = $investor;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $investorActions = new InvestorActions();
+
+            if (! $investorActions->isUniqueCode($this->companyId, $value, $this->investor->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/InvestorUpdateValidName.php b/api/app/Rules/InvestorUpdateValidName.php
new file mode 100644
index 000000000..b9e164b75
--- /dev/null
+++ b/api/app/Rules/InvestorUpdateValidName.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Investor;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class InvestorUpdateValidName implements ValidationRule
+{
+    protected $companyId;
+
+    protected $investor;
+
+    public function __construct($companyId, $investor)
+    {
+        $this->companyId = $companyId;
+        $this->investor = $investor;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $data = Investor::whereCompanyId('investors', $this->companyId)->where('name', $value);
+
+        if ($data->exists() && $this->investor->name !== $value) {
+            $fail('rules.unique_name')->translate();
+
+            return;
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidBranch.php b/api/app/Rules/IsValidBranch.php
new file mode 100644
index 000000000..7f0fa0884
--- /dev/null
+++ b/api/app/Rules/IsValidBranch.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidBranch implements ValidationRule
+{
+    protected ?int $companyId;
+
+    protected bool $required;
+
+    public function __construct(?int $companyId, bool $required)
+    {
+        $this->companyId = $companyId;
+        $this->required = $required;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value || $this->required) {
+            $company = Company::find($this->companyId);
+            if (! $company->branches->pluck('id')->contains($value)) {
+                $fail('rules.valid_branch')->translate();
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidCashAccount.php b/api/app/Rules/IsValidCashAccount.php
new file mode 100644
index 000000000..26d29a253
--- /dev/null
+++ b/api/app/Rules/IsValidCashAccount.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Branch;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidCashAccount implements ValidationRule
+{
+    public ?int $branchId;
+
+    public function __construct(?int $branchId)
+    {
+        $this->branchId = $branchId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->branchId && $value) {
+            $branch = Branch::find($this->branchId);
+
+            if (! $branch->cashAccounts?->pluck('id')->contains($value)) {
+                $fail('rules.valid_cash_account')->translate();
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidCustomer.php b/api/app/Rules/IsValidCustomer.php
new file mode 100644
index 000000000..e490f16a5
--- /dev/null
+++ b/api/app/Rules/IsValidCustomer.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidCustomer implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! auth()->company()->customers->pluck('id')->contains($value)) {
+            $fail('rules.valid_customer')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidCustomerAddress.php b/api/app/Rules/IsValidCustomerAddress.php
new file mode 100644
index 000000000..ac4bc0360
--- /dev/null
+++ b/api/app/Rules/IsValidCustomerAddress.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidCustomerAddress implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! auth()->customer()->customerAddresses->pluck('id')->contains($value)) {
+            $fail('rules.valid_customer_address')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidCustomerGroup.php b/api/app/Rules/IsValidCustomerGroup.php
new file mode 100644
index 000000000..e44fc50e2
--- /dev/null
+++ b/api/app/Rules/IsValidCustomerGroup.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidCustomerGroup implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! auth()->user()->customerGroups->pluck('id')->contains($value)) {
+            $fail('rules.valid_customer_group')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidDate.php b/api/app/Rules/IsValidDate.php
new file mode 100644
index 000000000..098d895ae
--- /dev/null
+++ b/api/app/Rules/IsValidDate.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Support\Facades\Config;
+use Illuminate\Support\Facades\Validator;
+
+class IsValidDate implements ValidationRule
+{
+    public function __construct(
+        private string $format
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value === null) {
+            return;
+        }
+
+        $autoKeyword = Config::get('dcslab.KEYWORDS.AUTO');
+
+        if ($value === $autoKeyword) {
+            return;
+        }
+
+        if (! is_string($value)) {
+            $fail(trans('validation.date_format', ['attribute' => ':attribute', 'format' => $this->format]));
+
+            return;
+        }
+
+        $validator = Validator::make(
+            [$attribute => $value],
+            [$attribute => 'date_format:'.$this->format]
+        );
+
+        if ($validator->fails()) {
+            $fail(trans('validation.date_format', ['attribute' => ':attribute', 'format' => $this->format]));
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidInvestor.php b/api/app/Rules/IsValidInvestor.php
new file mode 100644
index 000000000..c9db8684a
--- /dev/null
+++ b/api/app/Rules/IsValidInvestor.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidInvestor implements ValidationRule
+{
+    public ?int $companyId;
+
+    public function __construct(?int $companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($this->companyId && $value) {
+            if (! auth()->user()->companies?->pluck('id')->contains($this->companyId)) {
+                // next change message
+                $fail('rules.valid_company')->translate();
+            }
+
+            $company = Company::find($this->companyId);
+
+            if (! $company->investors?->pluck('id')->contains($value)) {
+                $fail('rules.valid_investor')->translate();
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidProduct.php b/api/app/Rules/IsValidProduct.php
new file mode 100644
index 000000000..b557612b5
--- /dev/null
+++ b/api/app/Rules/IsValidProduct.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidProduct implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! auth()->product()->pluck('id')->contains($value)) {
+            $fail('rules.valid_product')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidProductUnit.php b/api/app/Rules/IsValidProductUnit.php
new file mode 100644
index 000000000..4e88c94ff
--- /dev/null
+++ b/api/app/Rules/IsValidProductUnit.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidProductUnit implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! auth()->product()->product_units->pluck('id')->contains($value)) {
+            $fail('rules.valid_product_unit')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidStockAdjustmentInItem.php b/api/app/Rules/IsValidStockAdjustmentInItem.php
new file mode 100644
index 000000000..4d19c57e5
--- /dev/null
+++ b/api/app/Rules/IsValidStockAdjustmentInItem.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\StockAdjustmentInItem;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidStockAdjustmentInItem implements ValidationRule
+{
+    public function __construct(
+        private ?int $companyId = null,
+        private ?int $stockAdjustmentId = null
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (is_null($value) || is_null($this->companyId) || is_null($this->stockAdjustmentId)) {
+            return;
+        }
+
+        $isValid = StockAdjustmentInItem::query()
+            ->where('id', $value)
+            ->where('company_id', $this->companyId)
+            ->where('stock_adjustment_id', $this->stockAdjustmentId)
+            ->exists();
+
+        if (! $isValid) {
+            $fail('rules.valid_stock_adjustment_in_item')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidStockAdjustmentOutItem.php b/api/app/Rules/IsValidStockAdjustmentOutItem.php
new file mode 100644
index 000000000..48e3eab97
--- /dev/null
+++ b/api/app/Rules/IsValidStockAdjustmentOutItem.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\StockAdjustmentOutItem;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidStockAdjustmentOutItem implements ValidationRule
+{
+    public function __construct(
+        private ?int $companyId = null,
+        private ?int $stockAdjustmentId = null
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (is_null($value) || is_null($this->companyId) || is_null($this->stockAdjustmentId)) {
+            return;
+        }
+
+        $isValid = StockAdjustmentOutItem::query()
+            ->where('id', $value)
+            ->where('company_id', $this->companyId)
+            ->where('stock_adjustment_id', $this->stockAdjustmentId)
+            ->exists();
+
+        if (! $isValid) {
+            $fail('rules.valid_stock_adjustment_out_item')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidStockTransfer.php b/api/app/Rules/IsValidStockTransfer.php
new file mode 100644
index 000000000..fd64dbb46
--- /dev/null
+++ b/api/app/Rules/IsValidStockTransfer.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidStockTransfer implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! auth()->company()->stockTransfers->pluck('id')->contains($value)) {
+            $fail('rules.valid_stock_transfer')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidStockTransferItem.php b/api/app/Rules/IsValidStockTransferItem.php
new file mode 100644
index 000000000..ed9f01246
--- /dev/null
+++ b/api/app/Rules/IsValidStockTransferItem.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\StockTransferItem;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidStockTransferItem implements ValidationRule
+{
+    public function __construct(
+        private ?int $companyId = null,
+        private ?int $stockTransferId = null
+    ) {
+    }
+
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (is_null($value) || is_null($this->companyId) || is_null($this->stockTransferId)) {
+            return;
+        }
+
+        $isValid = StockTransferItem::query()
+            ->where('id', $value)
+            ->where('company_id', $this->companyId)
+            ->where('stock_transfer_id', $this->stockTransferId)
+            ->exists();
+
+        if (! $isValid) {
+            $fail('rules.valid_stock_transfer_item')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidSupplier.php b/api/app/Rules/IsValidSupplier.php
new file mode 100644
index 000000000..80a3c91d4
--- /dev/null
+++ b/api/app/Rules/IsValidSupplier.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Supplier;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidSupplier implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId
+    ) {
+    }
+
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (is_null($value) || is_null($this->companyId)) {
+            return;
+        }
+
+        $exists = Supplier::query()
+            ->where('id', $value)
+            ->where('company_id', $this->companyId)
+            ->exists();
+
+        if (! $exists) {
+            $fail('rules.valid_supplier')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidUnit.php b/api/app/Rules/IsValidUnit.php
new file mode 100644
index 000000000..a929beebf
--- /dev/null
+++ b/api/app/Rules/IsValidUnit.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidUnit implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! auth()->product()->units->pluck('id')->contains($value)) {
+            $fail('rules.valid_unit')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidUser.php b/api/app/Rules/IsValidUser.php
new file mode 100644
index 000000000..4b0d48d9a
--- /dev/null
+++ b/api/app/Rules/IsValidUser.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidUser implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (! auth()->product()->users->pluck('id')->contains($value)) {
+            $fail('rules.valid_user')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/IsValidWarehouse.php b/api/app/Rules/IsValidWarehouse.php
new file mode 100644
index 000000000..9230cd914
--- /dev/null
+++ b/api/app/Rules/IsValidWarehouse.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class IsValidWarehouse implements ValidationRule
+{
+    protected ?int $companyId;
+
+    protected bool $required;
+
+    public function __construct(?int $companyId, bool $required)
+    {
+        $this->companyId = $companyId;
+        $this->required = $required;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value || $this->required) {
+            $company = Company::find($this->companyId);
+            if (! $company->warehouses->pluck('id')->contains($value)) {
+                $fail('rules.valid_warehouse')->translate();
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/MaxTokens.php b/api/app/Rules/MaxTokens.php
index 566d839a6..a2f48312f 100644
--- a/api/app/Rules/MaxTokens.php
+++ b/api/app/Rules/MaxTokens.php
@@ -9,6 +9,7 @@
 class MaxTokens implements ValidationRule
 {
     private int $maxTokensPerUser;
+
     private User $user;
 
     public function __construct($user)
@@ -16,6 +17,7 @@ public function __construct($user)
         $this->user = $user;
         $this->maxTokensPerUser = 2;
     }
+
     /**
      * Run the validation rule.
      *
diff --git a/api/app/Rules/ProductUnitStoreValidCode.php b/api/app/Rules/ProductUnitStoreValidCode.php
new file mode 100644
index 000000000..5335dff01
--- /dev/null
+++ b/api/app/Rules/ProductUnitStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\ProductUnit\ProductUnitActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class ProductUnitStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $productUnitActions = new ProductUnitActions();
+
+            if (! $productUnitActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/ProductUnitUpdateValidCode.php b/api/app/Rules/ProductUnitUpdateValidCode.php
new file mode 100644
index 000000000..ae71e8586
--- /dev/null
+++ b/api/app/Rules/ProductUnitUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\ProductUnit\ProductUnitActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class ProductUnitUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $productUnit;
+
+    public function __construct($companyId, $productUnit)
+    {
+        $this->companyId = $companyId;
+        $this->productUnit = $productUnit;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $productUnitActions = new ProductUnitActions();
+
+            if (! $productUnitActions->isUniqueCode($this->companyId, $value, $this->productUnit->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/SetBranchToNonMain.php b/api/app/Rules/SetBranchToNonMain.php
deleted file mode 100644
index cb0cab8eb..000000000
--- a/api/app/Rules/SetBranchToNonMain.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-namespace App\Rules;
-
-use App\Models\Branch;
-use Closure;
-use Illuminate\Contracts\Validation\ValidationRule;
-
-class SetBranchToNonMain implements ValidationRule
-{
-    private Branch $branch;
-
-    public function __construct(Branch $branch)
-    {
-        $this->branch = $branch;
-    }
-    /**
-     * Run the validation rule.
-     *
-     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
-     */
-    public function validate(string $attribute, mixed $value, Closure $fail): void
-    {
-        $company = $this->branch->company;
-        if (! boolval($value) &&
-            $company &&
-            $company->branches->count() == 1) {
-                $fail('rules.branch.set_branch_to_non_main')->translate();
-            }
-    }
-}
diff --git a/api/app/Rules/SetCompanyToNonDefault.php b/api/app/Rules/SetCompanyToNonDefault.php
deleted file mode 100644
index 9d533925e..000000000
--- a/api/app/Rules/SetCompanyToNonDefault.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-namespace App\Rules;
-
-use App\Models\User;
-use Closure;
-use Illuminate\Contracts\Validation\ValidationRule;
-
-class SetCompanyToNonDefault implements ValidationRule
-{
-    private User $user;
-
-    public function __construct(User $user)
-    {
-        $this->user = $user;
-    }
-
-    /**
-     * Run the validation rule.
-     *
-     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
-     */
-    public function validate(string $attribute, mixed $value, Closure $fail): void
-    {
-        if (! boolval($value) && 
-            $this->user->companies &&
-            $this->user->companies->count() == 1) {
-                $fail('rules.company.set_company_to_non_default')->translate();
-            }
-    }
-}
diff --git a/api/app/Rules/StockTransferItemSerialStoreValidCode.php b/api/app/Rules/StockTransferItemSerialStoreValidCode.php
new file mode 100644
index 000000000..f25c290f2
--- /dev/null
+++ b/api/app/Rules/StockTransferItemSerialStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\StockTransferItemSerial\StockTransferItemSerialActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class StockTransferItemSerialStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $stockTransferItemSerialActions = new StockTransferItemSerialActions();
+
+            if (! $stockTransferItemSerialActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/StockTransferItemSerialUpdateValidCode.php b/api/app/Rules/StockTransferItemSerialUpdateValidCode.php
new file mode 100644
index 000000000..443075055
--- /dev/null
+++ b/api/app/Rules/StockTransferItemSerialUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\StockTransferItemSerial\StockTransferItemSerialActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class StockTransferItemSerialUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $stockTransferItemSerial;
+
+    public function __construct($companyId, $stockTransferItemSerial)
+    {
+        $this->companyId = $companyId;
+        $this->stockTransferItemSerial = $stockTransferItemSerial;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $stockTransferItemSerialActions = new StockTransferItemSerialActions();
+
+            if (! $stockTransferItemSerialActions->isUniqueCode($this->companyId, $value, $this->stockTransferItemSerial->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/StockTransferItemStoreValidCode.php b/api/app/Rules/StockTransferItemStoreValidCode.php
new file mode 100644
index 000000000..43c66c74c
--- /dev/null
+++ b/api/app/Rules/StockTransferItemStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\StockTransferItem\StockTransferItemActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class StockTransferItemStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $stockTransferItemActions = new StockTransferItemActions();
+
+            if (! $stockTransferItemActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/StockTransferItemUpdateValidCode.php b/api/app/Rules/StockTransferItemUpdateValidCode.php
new file mode 100644
index 000000000..a7755d4d8
--- /dev/null
+++ b/api/app/Rules/StockTransferItemUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\StockTransferItem\StockTransferItemActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class StockTransferItemUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $stockTransferItem;
+
+    public function __construct($companyId, $stockTransferItem)
+    {
+        $this->companyId = $companyId;
+        $this->stockTransferItem = $stockTransferItem;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $stockTransferItemActions = new StockTransferItemActions();
+
+            if (! $stockTransferItemActions->isUniqueCode($this->companyId, $value, $this->stockTransferItem->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/StockTransferStoreValidCode.php b/api/app/Rules/StockTransferStoreValidCode.php
new file mode 100644
index 000000000..af44cea51
--- /dev/null
+++ b/api/app/Rules/StockTransferStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\StockTransfer\StockTransferActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class StockTransferStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $stockTransferActions = new StockTransferActions();
+
+            if (! $stockTransferActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/StockTransferUpdateValidCode.php b/api/app/Rules/StockTransferUpdateValidCode.php
new file mode 100644
index 000000000..79ac1a615
--- /dev/null
+++ b/api/app/Rules/StockTransferUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\StockTransfer\StockTransferActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class StockTransferUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $stockTransfer;
+
+    public function __construct($companyId, $stockTransfer)
+    {
+        $this->companyId = $companyId;
+        $this->stockTransfer = $stockTransfer;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $stockTransferActions = new StockTransferActions();
+
+            if (! $stockTransferActions->isUniqueCode($this->companyId, $value, $this->stockTransfer->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/SupplierStoreValidCode.php b/api/app/Rules/SupplierStoreValidCode.php
new file mode 100644
index 000000000..25885716f
--- /dev/null
+++ b/api/app/Rules/SupplierStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Supplier\SupplierActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class SupplierStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $supplierActions = new SupplierActions();
+
+            if (! $supplierActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/SupplierUpdateValidCode.php b/api/app/Rules/SupplierUpdateValidCode.php
new file mode 100644
index 000000000..0a0577c0b
--- /dev/null
+++ b/api/app/Rules/SupplierUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Supplier\SupplierActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class SupplierUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $supplier;
+
+    public function __construct($companyId, $supplier)
+    {
+        $this->companyId = $companyId;
+        $this->supplier = $supplier;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $supplierActions = new SupplierActions();
+
+            if (! $supplierActions->isUniqueCode($this->companyId, $value, $this->supplier->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/UnitStoreValidCode.php b/api/app/Rules/UnitStoreValidCode.php
new file mode 100644
index 000000000..f5ca03a50
--- /dev/null
+++ b/api/app/Rules/UnitStoreValidCode.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Unit\UnitActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class UnitStoreValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    public function __construct($companyId)
+    {
+        $this->companyId = $companyId;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $unitActions = new UnitActions();
+
+            if (! $unitActions->isUniqueCode($this->companyId, $value, null)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/UnitUpdateValidCode.php b/api/app/Rules/UnitUpdateValidCode.php
new file mode 100644
index 000000000..57f957b0e
--- /dev/null
+++ b/api/app/Rules/UnitUpdateValidCode.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Rules;
+
+use App\Actions\Unit\UnitActions;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class UnitUpdateValidCode implements ValidationRule
+{
+    protected $companyId;
+
+    protected $unit;
+
+    public function __construct($companyId, $unit)
+    {
+        $this->companyId = $companyId;
+        $this->unit = $unit;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value !== config('dcslab.KEYWORDS.AUTO')) {
+            $unitActions = new UnitActions();
+
+            if (! $unitActions->isUniqueCode($this->companyId, $value, $this->unit->id)) {
+                $fail('rules.unique_code')->translate();
+
+                return;
+            }
+        }
+    }
+}
diff --git a/api/app/Rules/WarehouseStoreValidCode.php b/api/app/Rules/WarehouseStoreValidCode.php
new file mode 100644
index 000000000..bfb437d75
--- /dev/null
+++ b/api/app/Rules/WarehouseStoreValidCode.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class WarehouseStoreValidCode implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value === config('dcslab.KEYWORDS.AUTO')) {
+            return;
+        }
+
+        $company = Company::find($this->companyId);
+        if (! $company) {
+            return;
+        }
+
+        if ($company->warehouses()->where('code', (string) $value)->exists()) {
+            $fail('rules.unique_code')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/WarehouseStoreValidName.php b/api/app/Rules/WarehouseStoreValidName.php
new file mode 100644
index 000000000..49484cb52
--- /dev/null
+++ b/api/app/Rules/WarehouseStoreValidName.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class WarehouseStoreValidName implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $company = Company::find($this->companyId);
+        if (! $company) {
+            return;
+        }
+
+        if ($company->warehouses()->where('name', (string) $value)->exists()) {
+            $fail('rules.unique_name')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/WarehouseUpdateValidCode.php b/api/app/Rules/WarehouseUpdateValidCode.php
new file mode 100644
index 000000000..f37c01b98
--- /dev/null
+++ b/api/app/Rules/WarehouseUpdateValidCode.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use App\Models\Warehouse;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class WarehouseUpdateValidCode implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId,
+        protected Warehouse $warehouse,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if ($value === config('dcslab.KEYWORDS.AUTO')) {
+            return;
+        }
+
+        $company = Company::find($this->companyId);
+        if (! $company) {
+            return;
+        }
+
+        if ($company->warehouses()
+            ->where('warehouses.id', '<>', $this->warehouse->id)
+            ->where('code', (string) $value)
+            ->exists()) {
+            $fail('rules.unique_code')->translate();
+        }
+    }
+}
diff --git a/api/app/Rules/WarehouseUpdateValidName.php b/api/app/Rules/WarehouseUpdateValidName.php
new file mode 100644
index 000000000..24ecb0563
--- /dev/null
+++ b/api/app/Rules/WarehouseUpdateValidName.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Rules;
+
+use App\Models\Company;
+use App\Models\Warehouse;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class WarehouseUpdateValidName implements ValidationRule
+{
+    public function __construct(
+        protected ?int $companyId,
+        protected Warehouse $warehouse,
+    ) {
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $company = Company::find($this->companyId);
+        if (! $company) {
+            return;
+        }
+
+        if ($company->warehouses()
+            ->where('warehouses.id', '<>', $this->warehouse->id)
+            ->where('name', (string) $value)
+            ->exists()) {
+            $fail('rules.unique_name')->translate();
+        }
+    }
+}
diff --git a/api/app/Services/ChartOfAccount/ChartOfAccountSyncService.php b/api/app/Services/ChartOfAccount/ChartOfAccountSyncService.php
new file mode 100644
index 000000000..fcff55604
--- /dev/null
+++ b/api/app/Services/ChartOfAccount/ChartOfAccountSyncService.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Services\ChartOfAccount;
+
+use App\Enums\ChartOfAccountScopeEnum;
+use App\Models\ChartOfAccount;
+use App\Models\Company;
+
+class ChartOfAccountSyncService
+{
+    public function __construct()
+    {
+    }
+
+    public function sync(Company $company): void
+    {
+        $defaultChartOfAccounts = config('chart_of_accounts', []);
+
+        $this->upsertChartOfAccountNodes($company, $defaultChartOfAccounts, null);
+    }
+
+    private function upsertChartOfAccountNodes(Company $company, array $nodes, ?ChartOfAccount $parent): void
+    {
+        foreach ($nodes as $node) {
+            $chartOfAccount = ChartOfAccount::query()->firstOrNew([
+                'company_id' => $company->id,
+                'system_key' => $node['system_key'],
+            ]);
+
+            $chartOfAccount->company_id = $company->id;
+            $chartOfAccount->scope = ChartOfAccountScopeEnum::SYSTEM;
+            $chartOfAccount->system_key = $node['system_key'];
+            $chartOfAccount->parent_id = $parent?->id;
+            $chartOfAccount->source_type = null;
+            $chartOfAccount->source_id = null;
+            $chartOfAccount->code = $node['code'];
+            $chartOfAccount->name = $node['name'];
+            $chartOfAccount->account_type = $node['account_type'];
+            $chartOfAccount->normal_balance = $node['normal_balance'];
+            $chartOfAccount->level = $parent ? $parent->level + 1 : 1;
+            $chartOfAccount->is_group = $node['is_group'];
+            $chartOfAccount->is_active = $node['is_active'] ?? true;
+            $chartOfAccount->remarks = $node['remarks'] ?? null;
+            $chartOfAccount->save();
+
+            $this->upsertChartOfAccountNodes($company, $node['children'] ?? [], $chartOfAccount);
+        }
+    }
+}
diff --git a/api/app/Services/Company/CompanyInitializationService.php b/api/app/Services/Company/CompanyInitializationService.php
new file mode 100644
index 000000000..61750921c
--- /dev/null
+++ b/api/app/Services/Company/CompanyInitializationService.php
@@ -0,0 +1,453 @@
+<?php
+
+namespace App\Services\Company;
+
+use App\Actions\Branch\BranchActions;
+use App\Actions\CashAccount\CashAccountActions;
+use App\Actions\ExpenseCategory\ExpenseCategoryActions;
+use App\Actions\Investor\InvestorActions;
+use App\Actions\StockAdjustmentCategory\StockAdjustmentCategoryActions;
+use App\Actions\Supplier\SupplierActions;
+use App\Actions\VatProfile\VatProfileActions;
+use App\Actions\Warehouse\WarehouseActions;
+use App\DTOs\BranchCreateDTO;
+use App\DTOs\CashAccountCreateDTO;
+use App\DTOs\ExpenseCategoryCreateDTO;
+use App\DTOs\InvestorCreateDTO;
+use App\DTOs\StockAdjustmentCategoryCreateDTO;
+use App\DTOs\SupplierCreateDTO;
+use App\DTOs\VatProfileCreateDTO;
+use App\DTOs\WarehouseCreateDTO;
+use App\Enums\ChartOfAccountScopeEnum;
+use App\Enums\ExpenseCategoryTypeEnum;
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Models\Branch;
+use App\Models\ChartOfAccount;
+use App\Models\Company;
+
+class CompanyInitializationService
+{
+    public function __construct(
+        private BranchActions $branchActions,
+        private WarehouseActions $warehouseActions,
+        private CashAccountActions $cashAccountActions,
+        private VatProfileActions $vatProfileActions,
+        private ExpenseCategoryActions $expenseCategoryActions,
+        private InvestorActions $investorActions,
+        private SupplierActions $supplierActions,
+        private StockAdjustmentCategoryActions $stockAdjustmentCategoryActions,
+    ) {
+    }
+
+    public function initializeDefaultData(Company $company): void
+    {
+        $mainBranch = $this->createMainBranch($company);
+        $this->createDefaultWarehouses($company, $mainBranch);
+
+        $this->createDefaultChartOfAccounts($company);
+        $this->createDefaultInvestors($company);
+        $this->createDefaultCashAccounts($company, $mainBranch);
+        $this->createDefaultOperationalExpenseCategory($company);
+        $this->createDefaultOtherExpenseCategory($company);
+
+        $this->createDefaultVatProfiles($company);
+
+        $this->createDefaultSuppliers($company);
+
+        $this->createDefaultStockAdjustmentCategories($company);
+    }
+
+    private function createMainBranch(Company $company): Branch
+    {
+        return $this->branchActions->create(
+            new BranchCreateDTO(
+                companyId: $company->id,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                name: 'Cab. Utama',
+                address: null,
+                city: null,
+                contact: null,
+                isMain: true,
+                remarks: 'Cabang utama default saat perusahaan dibuat',
+                status: RecordStatusEnum::ACTIVE,
+            )
+        );
+    }
+
+    private function createDefaultWarehouses(Company $company, Branch $branch): void
+    {
+        $dto = new WarehouseCreateDTO(
+            companyId: $company->id,
+            branchId: $branch->id,
+            code: config('dcslab.KEYWORDS.AUTO'),
+            name: 'G. Toko',
+            address: null,
+            city: null,
+            contact: null,
+            remarks: 'Gudang utama default saat perusahaan dibuat',
+            status: RecordStatusEnum::ACTIVE->value,
+        );
+        $this->warehouseActions->create($dto);
+    }
+
+    private function createDefaultChartOfAccounts(Company $company): void
+    {
+        $defaultChartOfAccounts = config('chart_of_accounts', []);
+
+        $upsertChartOfAccountNode = function (array $node, ?ChartOfAccount $parent) use ($company, &$upsertChartOfAccountNode): void {
+            $chartOfAccount = ChartOfAccount::query()->firstOrNew([
+                'company_id' => $company->id,
+                'system_key' => $node['system_key'],
+            ]);
+
+            $chartOfAccount->company_id = $company->id;
+            $chartOfAccount->scope = ChartOfAccountScopeEnum::SYSTEM;
+            $chartOfAccount->system_key = $node['system_key'];
+            $chartOfAccount->parent_id = $parent?->id;
+            $chartOfAccount->source_type = null;
+            $chartOfAccount->source_id = null;
+            $chartOfAccount->code = $node['code'];
+            $chartOfAccount->name = $node['name'];
+            $chartOfAccount->account_type = $node['account_type'];
+            $chartOfAccount->normal_balance = $node['normal_balance'];
+            $chartOfAccount->level = $parent ? $parent->level + 1 : 1;
+            $chartOfAccount->is_group = $node['is_group'];
+            $chartOfAccount->is_active = $node['is_active'] ?? true;
+            $chartOfAccount->remarks = $node['remarks'] ?? null;
+            $chartOfAccount->save();
+
+            foreach ($node['children'] ?? [] as $childNode) {
+                $upsertChartOfAccountNode($childNode, $chartOfAccount);
+            }
+        };
+
+        foreach ($defaultChartOfAccounts as $node) {
+            $upsertChartOfAccountNode($node, null);
+        }
+    }
+
+    private function createDefaultCashAccounts(Company $company, Branch $branch): void
+    {
+        $defaultCashAccounts = [
+            [
+                'company_id' => $company->id,
+                'branch_id' => $branch->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Kas Tunai Toko',
+                'is_bank' => false,
+                'is_active' => true,
+                'remarks' => 'Kas utama default saat perusahaan dibuat',
+            ],
+            [
+                'company_id' => $company->id,
+                'branch_id' => $branch->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Kas Bank',
+                'is_bank' => true,
+                'is_active' => true,
+                'remarks' => 'Bank utama default saat perusahaan dibuat',
+            ],
+        ];
+
+        foreach ($defaultCashAccounts as $defaultCashAccount) {
+            $dto = new CashAccountCreateDTO(
+                companyId: $defaultCashAccount['company_id'],
+                branchId: $defaultCashAccount['branch_id'],
+                code: $defaultCashAccount['code'],
+                name: $defaultCashAccount['name'],
+                isBank: $defaultCashAccount['is_bank'],
+                isActive: $defaultCashAccount['is_active'],
+                remarks: $defaultCashAccount['remarks'],
+            );
+            $this->cashAccountActions->create($dto);
+        }
+    }
+
+    private function createDefaultOperationalExpenseCategory(Company $company): void
+    {
+        $defaultExpenseCategories = [
+            [
+                'name' => 'Biaya Operasional Tetap',
+                'sequence' => 0,
+                'children' => [
+                    [
+                        'name' => 'Sewa',
+                        'sequence' => 0,
+                    ],
+                    [
+                        'name' => 'Gaji dan Upah',
+                        'sequence' => 1,
+                    ],
+                    [
+                        'name' => 'BPJS dan Tunjangan Tetap',
+                        'sequence' => 2,
+                    ],
+                    [
+                        'name' => 'Internet dan Langganan Software',
+                        'sequence' => 3,
+                    ],
+                ],
+            ],
+            [
+                'name' => 'Biaya Operasional Variabel',
+                'sequence' => 1,
+                'children' => [
+                    [
+                        'name' => 'Listrik dan Air',
+                        'sequence' => 0,
+                    ],
+                    [
+                        'name' => 'Bahan Habis Pakai',
+                        'sequence' => 1,
+                    ],
+                    [
+                        'name' => 'Transportasi Operasional',
+                        'sequence' => 2,
+                    ],
+                    [
+                        'name' => 'Perawatan dan Perbaikan',
+                        'sequence' => 3,
+                    ],
+                    [
+                        'name' => 'Biaya Pengiriman',
+                        'sequence' => 4,
+                    ],
+                ],
+            ],
+            [
+                'name' => 'Biaya Operasional Umum',
+                'sequence' => 2,
+                'children' => [
+                    [
+                        'name' => 'ATK dan Perlengkapan Kantor',
+                        'sequence' => 0,
+                    ],
+                    [
+                        'name' => 'Biaya Administrasi Bank',
+                        'sequence' => 1,
+                    ],
+                    [
+                        'name' => 'Biaya Telepon',
+                        'sequence' => 2,
+                    ],
+                    [
+                        'name' => 'Biaya Kebersihan',
+                        'sequence' => 3,
+                    ],
+                    [
+                        'name' => 'Biaya Keamanan',
+                        'sequence' => 4,
+                    ],
+                    [
+                        'name' => 'Biaya Operasional Umum Lainnya',
+                        'sequence' => 5,
+                    ],
+                ],
+            ],
+        ];
+
+        foreach ($defaultExpenseCategories as $defaultExpenseCategory) {
+            $parentDTO = new ExpenseCategoryCreateDTO(
+                companyId: $company->id,
+                parentId: null,
+                categoryType: ExpenseCategoryTypeEnum::EXPENSE->value,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                name: $defaultExpenseCategory['name'],
+                sequence: $defaultExpenseCategory['sequence'],
+            );
+            $parentExpenseCategory = $this->expenseCategoryActions->create($parentDTO);
+
+            foreach ($defaultExpenseCategory['children'] as $defaultExpenseCategoryChild) {
+                $childDTO = new ExpenseCategoryCreateDTO(
+                    companyId: $company->id,
+                    parentId: $parentExpenseCategory->id,
+                    categoryType: null,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    name: $defaultExpenseCategoryChild['name'],
+                    sequence: $defaultExpenseCategoryChild['sequence'],
+                );
+                $this->expenseCategoryActions->create($childDTO);
+            }
+        }
+    }
+
+    private function createDefaultOtherExpenseCategory(Company $company): void
+    {
+        $defaultExpenseCategories = [
+            [
+                'name' => 'Biaya Lain-lain Umum',
+                'sequence' => 0,
+                'children' => [],
+            ],
+        ];
+
+        foreach ($defaultExpenseCategories as $defaultExpenseCategory) {
+            $parentDTO = new ExpenseCategoryCreateDTO(
+                companyId: $company->id,
+                parentId: null,
+                categoryType: ExpenseCategoryTypeEnum::OTHER_EXPENSE->value,
+                code: config('dcslab.KEYWORDS.AUTO'),
+                name: $defaultExpenseCategory['name'],
+                sequence: $defaultExpenseCategory['sequence'],
+            );
+            $parentExpenseCategory = $this->expenseCategoryActions->create($parentDTO);
+
+            foreach ($defaultExpenseCategory['children'] as $defaultExpenseCategoryChild) {
+                $childDTO = new ExpenseCategoryCreateDTO(
+                    companyId: $company->id,
+                    parentId: $parentExpenseCategory->id,
+                    categoryType: null,
+                    code: config('dcslab.KEYWORDS.AUTO'),
+                    name: $defaultExpenseCategoryChild['name'],
+                    sequence: $defaultExpenseCategoryChild['sequence'],
+                );
+                $this->expenseCategoryActions->create($childDTO);
+            }
+        }
+    }
+
+    private function createDefaultVatProfiles(Company $company): void
+    {
+        $defaultVatProfiles = [
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Non PPN',
+                'vat_rate' => 0,
+                'vat_base_numerator' => 0,
+                'vat_base_denominator' => 1,
+                'remarks' => 'Default profil tanpa PPN saat perusahaan dibuat',
+                'is_active' => true,
+            ],
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'PPN Efektif 11%',
+                'vat_rate' => 12,
+                'vat_base_numerator' => 11,
+                'vat_base_denominator' => 12,
+                'remarks' => 'Default profil PPN efektif 11% saat perusahaan dibuat',
+                'is_active' => true,
+            ],
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'PPN 12%',
+                'vat_rate' => 12,
+                'vat_base_numerator' => 1,
+                'vat_base_denominator' => 1,
+                'remarks' => 'Default profil PPN 12% saat perusahaan dibuat',
+                'is_active' => true,
+            ],
+        ];
+
+        foreach ($defaultVatProfiles as $defaultVatProfile) {
+            $dto = new VatProfileCreateDTO(
+                companyId: $defaultVatProfile['company_id'],
+                code: $defaultVatProfile['code'],
+                name: $defaultVatProfile['name'],
+                vatRate: $defaultVatProfile['vat_rate'],
+                vatBaseNumerator: $defaultVatProfile['vat_base_numerator'],
+                vatBaseDenominator: $defaultVatProfile['vat_base_denominator'],
+                remarks: $defaultVatProfile['remarks'],
+                isActive: $defaultVatProfile['is_active'],
+            );
+            $this->vatProfileActions->create($dto);
+        }
+    }
+
+    private function createDefaultSuppliers(Company $company): void
+    {
+        $defaultSuppliers = [
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Supplier Umum',
+                'address' => null,
+                'city' => null,
+                'payment_term_type' => PaymentTermTypeEnum::CASH_ON_DELIVERY,
+                'payment_term' => 0,
+                'taxable_enterprise' => false,
+                'tax_id' => null,
+                'status' => RecordStatusEnum::ACTIVE,
+                'remarks' => 'Supplier default saat perusahaan dibuat',
+            ],
+        ];
+
+        foreach ($defaultSuppliers as $defaultSupplier) {
+            $this->supplierActions->create(
+                new SupplierCreateDTO(
+                    companyId: $defaultSupplier['company_id'],
+                    code: $defaultSupplier['code'],
+                    name: $defaultSupplier['name'],
+                    address: $defaultSupplier['address'],
+                    city: $defaultSupplier['city'],
+                    paymentTermType: $defaultSupplier['payment_term_type'],
+                    paymentTerm: $defaultSupplier['payment_term'],
+                    taxableEnterprise: $defaultSupplier['taxable_enterprise'],
+                    taxId: $defaultSupplier['tax_id'],
+                    remarks: $defaultSupplier['remarks'],
+                    status: $defaultSupplier['status'],
+                )
+            );
+        }
+    }
+
+    private function createDefaultInvestors(Company $company): void
+    {
+        $defaultInvestors = [
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Investor Umum',
+                'remarks' => 'Investor default saat perusahaan dibuat',
+            ],
+        ];
+
+        foreach ($defaultInvestors as $defaultInvestor) {
+            $dto = new InvestorCreateDTO(
+                companyId: $defaultInvestor['company_id'],
+                code: $defaultInvestor['code'],
+                name: $defaultInvestor['name'],
+                remarks: $defaultInvestor['remarks'],
+            );
+            $this->investorActions->create($dto);
+        }
+    }
+
+    private function createDefaultStockAdjustmentCategories(Company $company): void
+    {
+        $defaultStockAdjustmentCategories = [
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Koreksi Pencatatan',
+            ],
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Stock Opname',
+            ],
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Hilang',
+            ],
+            [
+                'company_id' => $company->id,
+                'code' => config('dcslab.KEYWORDS.AUTO'),
+                'name' => 'Rusak',
+            ],
+        ];
+
+        foreach ($defaultStockAdjustmentCategories as $defaultStockAdjustmentCategory) {
+            $dto = new StockAdjustmentCategoryCreateDTO(
+                companyId: $defaultStockAdjustmentCategory['company_id'],
+                code: $defaultStockAdjustmentCategory['code'],
+                name: $defaultStockAdjustmentCategory['name'],
+            );
+            $this->stockAdjustmentCategoryActions->create($dto);
+        }
+    }
+}
diff --git a/api/app/Traits/ScopeableByBranch.php b/api/app/Traits/ScopeableByBranch.php
new file mode 100644
index 000000000..63643080e
--- /dev/null
+++ b/api/app/Traits/ScopeableByBranch.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Traits;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Collection;
+
+trait ScopeableByBranch
+{
+    public function scopeWhereBranchId(
+        Builder $query,
+        Collection|array|int|string|null $table = null,
+        Collection|array|int|null $branchId = null,
+    ) {
+        if (is_int($table) || is_array($table) || $table instanceof Collection) {
+            $branchId = $table;
+            $table = null;
+        }
+
+        if ($branchId != null) {
+            $targetColumn = $table ? $table.'.branch_id' : 'branch_id';
+
+            if (is_a($branchId, 'Illuminate\Support\Collection')) {
+                $query->whereIn($targetColumn, $branchId->toArray());
+            } elseif (is_array($branchId)) {
+                $query->whereIn($targetColumn, $branchId);
+            } else {
+                $query->where($targetColumn, '=', $branchId);
+            }
+        }
+    }
+}
diff --git a/api/app/Traits/ScopeableByCompany.php b/api/app/Traits/ScopeableByCompany.php
index fa4ad74ca..15c1446b0 100644
--- a/api/app/Traits/ScopeableByCompany.php
+++ b/api/app/Traits/ScopeableByCompany.php
@@ -4,19 +4,28 @@
 
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Number;
 
 trait ScopeableByCompany
 {
-    public function scopeWhereCompanyId(Builder $query, Collection|array|Number|null $companyId = null)
-    {
+    public function scopeWhereCompanyId(
+        Builder $query,
+        Collection|array|int|string|null $table = null,
+        Collection|array|int|null $companyId = null,
+    ) {
+        if (is_int($table) || is_array($table) || $table instanceof Collection) {
+            $companyId = $table;
+            $table = null;
+        }
+
         if ($companyId != null) {
+            $targetColumn = $table ? $table.'.company_id' : 'company_id';
+
             if (is_a($companyId, 'Illuminate\Support\Collection')) {
-                $query->whereIn('company_id', $companyId->toArray());
+                $query->whereIn($targetColumn, $companyId->toArray());
             } elseif (is_array($companyId)) {
-                $query->whereIn('company_id', $companyId);
+                $query->whereIn($targetColumn, $companyId);
             } else {
-                $query->where('company_id', '=', $companyId);
+                $query->where($targetColumn, '=', $companyId);
             }
         }
     }
diff --git a/api/app/Traits/ScopeableByStatus.php b/api/app/Traits/ScopeableByStatus.php
index 22cc64dc3..517e9089c 100644
--- a/api/app/Traits/ScopeableByStatus.php
+++ b/api/app/Traits/ScopeableByStatus.php
@@ -2,12 +2,12 @@
 
 namespace App\Traits;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use Illuminate\Database\Eloquent\Builder;
 
 trait ScopeableByStatus
 {
-    public function scopeWhereStatus(Builder $query, array|RecordStatus|null $status = null)
+    public function scopeWhereStatus(Builder $query, array|RecordStatusEnum|null $status = null)
     {
         if ($status != null) {
             if (is_array($status)) {
@@ -20,11 +20,11 @@ public function scopeWhereStatus(Builder $query, array|RecordStatus|null $status
 
     public function scopeWhereStatusActive(Builder $query)
     {
-        $query->where('status', '=', RecordStatus::ACTIVE);
+        $query->where('status', '=', RecordStatusEnum::ACTIVE);
     }
 
     public function scopeWhereStatusInactive(Builder $query)
     {
-        $query->where('status', '=', RecordStatus::INACTIVE);
+        $query->where('status', '=', RecordStatusEnum::INACTIVE);
     }
 }
diff --git a/api/bootstrap/app.php b/api/bootstrap/app.php
index 29fb9014b..20fde8446 100644
--- a/api/bootstrap/app.php
+++ b/api/bootstrap/app.php
@@ -1,7 +1,9 @@
 <?php
 
 use App\Http\Middleware\RedirectIfAuthenticatedJson;
+use App\Http\Middleware\UpdateUserTimezone;
 use App\Http\Middleware\ValidateUser;
+use App\Http\Middleware\XssSanitizer;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -21,6 +23,8 @@
             'precognitive' => HandlePrecognitiveRequests::class,
             'validate.user' => ValidateUser::class,
         ]);
+        $middleware->append(XssSanitizer::class);
+        $middleware->append(UpdateUserTimezone::class);
     })
     ->withExceptions(function (Exceptions $exceptions) {
         //
diff --git a/api/composer.json b/api/composer.json
index 96cd87e72..482ea59cf 100644
--- a/api/composer.json
+++ b/api/composer.json
@@ -2,7 +2,12 @@
     "name": "gitzjoey/dcslab",
     "type": "project",
     "description": "DCSLab - Laravel Always Updated ERP System.",
-    "keywords": ["ERP", "framework", "laravel", "gitzjoey"],
+    "keywords": [
+        "ERP",
+        "framework",
+        "laravel",
+        "gitzjoey"
+    ],
     "license": "MIT",
     "require": {
         "php": "^8.2",
@@ -28,7 +33,10 @@
             "App\\": "app/",
             "Database\\Factories\\": "database/factories/",
             "Database\\Seeders\\": "database/seeders/"
-        }
+        },
+        "files": [
+            "app/Helpers/GlobalHelpers.php"
+        ]
     },
     "autoload-dev": {
         "psr-4": {
diff --git a/api/config/chart_of_accounts.php b/api/config/chart_of_accounts.php
new file mode 100644
index 000000000..9ade1ee67
--- /dev/null
+++ b/api/config/chart_of_accounts.php
@@ -0,0 +1,302 @@
+<?php
+
+use App\Enums\ChartOfAccountAccountTypeEnum;
+use App\Enums\ChartOfAccountSystemKeyEnum;
+
+return [
+    'asset_root' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::ASSET_ROOT->value,
+        'code' => '01',
+        'name' => 'Aset',
+        'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+        'normal_balance' => 'debit',
+        'is_group' => true,
+        'children' => [
+            'current_asset' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::ASSET_CURRENT->value,
+                'code' => '01.01',
+                'name' => 'Aset Lancar',
+                'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                'normal_balance' => 'debit',
+                'is_group' => true,
+                'children' => [
+                    'cash_and_cash_equivalents' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::ASSET_CURRENT_CASH_AND_CASH_EQUIVALENTS->value,
+                        'code' => '01.01.01',
+                        'name' => 'Kas dan Setara Kas',
+                        'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                        'normal_balance' => 'debit',
+                        'is_group' => true,
+                        'children' => [
+                            'cash' => [
+                                'system_key' => ChartOfAccountSystemKeyEnum::ASSET_CURRENT_CASH->value,
+                                'code' => '01.01.01.01',
+                                'name' => 'Kas',
+                                'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                                'normal_balance' => 'debit',
+                                'is_group' => true,
+                                'children' => [],
+                            ],
+                            'bank' => [
+                                'system_key' => ChartOfAccountSystemKeyEnum::ASSET_CURRENT_BANK->value,
+                                'code' => '01.01.01.02',
+                                'name' => 'Bank',
+                                'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                                'normal_balance' => 'debit',
+                                'is_group' => true,
+                                'children' => [],
+                            ],
+                        ],
+                    ],
+                    'account_receivable' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::ASSET_CURRENT_ACCOUNT_RECEIVABLE->value,
+                        'code' => '01.01.02',
+                        'name' => 'Piutang Usaha',
+                        'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                        'normal_balance' => 'debit',
+                        'is_group' => false,
+                    ],
+                    'inventory' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::ASSET_CURRENT_INVENTORY->value,
+                        'code' => '01.01.03',
+                        'name' => 'Persediaan',
+                        'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                        'normal_balance' => 'debit',
+                        'is_group' => false,
+                    ],
+                    'prepaid_expense' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::ASSET_CURRENT_PREPAID_EXPENSE->value,
+                        'code' => '01.01.04',
+                        'name' => 'Biaya Dibayar Dimuka',
+                        'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                        'normal_balance' => 'debit',
+                        'is_group' => false,
+                    ],
+                ],
+            ],
+            'non_current_asset' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::ASSET_NON_CURRENT->value,
+                'code' => '01.02',
+                'name' => 'Aset Tidak Lancar',
+                'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                'normal_balance' => 'debit',
+                'is_group' => true,
+                'children' => [
+                    'fixed_asset' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::ASSET_NON_CURRENT_FIXED_ASSET->value,
+                        'code' => '01.02.01',
+                        'name' => 'Aset Tetap',
+                        'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                        'normal_balance' => 'debit',
+                        'is_group' => false,
+                    ],
+                    'accumulated_depreciation' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::ASSET_NON_CURRENT_ACCUMULATED_DEPRECIATION->value,
+                        'code' => '01.02.02',
+                        'name' => 'Akumulasi Penyusutan',
+                        'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                        'normal_balance' => 'credit',
+                        'is_group' => false,
+                    ],
+                    'intangible_asset' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::ASSET_NON_CURRENT_INTANGIBLE_ASSET->value,
+                        'code' => '01.02.03',
+                        'name' => 'Aset Tidak Berwujud',
+                        'account_type' => ChartOfAccountAccountTypeEnum::ASSET->value,
+                        'normal_balance' => 'debit',
+                        'is_group' => false,
+                    ],
+                ],
+            ],
+        ],
+    ],
+    'liability_root' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::LIABILITY_ROOT->value,
+        'code' => '02',
+        'name' => 'Liabilitas',
+        'account_type' => ChartOfAccountAccountTypeEnum::LIABILITY->value,
+        'normal_balance' => 'credit',
+        'is_group' => true,
+        'children' => [
+            'account_payable' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::LIABILITY_ACCOUNT_PAYABLE->value,
+                'code' => '02.01',
+                'name' => 'Utang Usaha',
+                'account_type' => ChartOfAccountAccountTypeEnum::LIABILITY->value,
+                'normal_balance' => 'credit',
+                'is_group' => true,
+            ],
+            'tax_payable' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::LIABILITY_TAX_PAYABLE->value,
+                'code' => '02.02',
+                'name' => 'Utang Pajak',
+                'account_type' => ChartOfAccountAccountTypeEnum::LIABILITY->value,
+                'normal_balance' => 'credit',
+                'is_group' => false,
+            ],
+            'deferred_income' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::LIABILITY_DEFERRED_INCOME->value,
+                'code' => '02.03',
+                'name' => 'Pendapatan Diterima Dimuka',
+                'account_type' => ChartOfAccountAccountTypeEnum::LIABILITY->value,
+                'normal_balance' => 'credit',
+                'is_group' => false,
+            ],
+        ],
+    ],
+    'equity_root' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::EQUITY_ROOT->value,
+        'code' => '03',
+        'name' => 'Ekuitas',
+        'account_type' => ChartOfAccountAccountTypeEnum::EQUITY->value,
+        'normal_balance' => 'credit',
+        'is_group' => true,
+        'children' => [
+            'capital' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL->value,
+                'code' => '03.01',
+                'name' => 'Modal',
+                'account_type' => ChartOfAccountAccountTypeEnum::EQUITY->value,
+                'normal_balance' => 'credit',
+                'is_group' => true,
+                'children' => [
+                    'opening_capital' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_OPENING_CAPITAL->value,
+                        'code' => '03.01.01',
+                        'name' => 'Modal Awal',
+                        'account_type' => ChartOfAccountAccountTypeEnum::EQUITY->value,
+                        'normal_balance' => 'credit',
+                        'is_group' => false,
+                    ],
+                    'additional_capital' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_ADDITIONAL_CAPITAL->value,
+                        'code' => '03.01.02',
+                        'name' => 'Modal Tambahan',
+                        'account_type' => ChartOfAccountAccountTypeEnum::EQUITY->value,
+                        'normal_balance' => 'credit',
+                        'is_group' => false,
+                    ],
+                    'drawing' => [
+                        'system_key' => ChartOfAccountSystemKeyEnum::EQUITY_CAPITAL_DRAWING->value,
+                        'code' => '03.01.03',
+                        'name' => 'Prive/Penarikan Modal',
+                        'account_type' => ChartOfAccountAccountTypeEnum::EQUITY->value,
+                        'normal_balance' => 'debit',
+                        'is_group' => false,
+                    ],
+                ],
+            ],
+            'current_month_earnings' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::EQUITY_CURRENT_MONTH_EARNINGS->value,
+                'code' => '03.02',
+                'name' => 'Laba Bulan Berjalan',
+                'account_type' => ChartOfAccountAccountTypeEnum::EQUITY->value,
+                'normal_balance' => 'credit',
+                'is_group' => false,
+            ],
+            'current_year_earnings' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::EQUITY_CURRENT_YEAR_EARNINGS->value,
+                'code' => '03.03',
+                'name' => 'Laba Tahun Berjalan',
+                'account_type' => ChartOfAccountAccountTypeEnum::EQUITY->value,
+                'normal_balance' => 'credit',
+                'is_group' => false,
+            ],
+            'retained_earnings' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::EQUITY_RETAINED_EARNINGS->value,
+                'code' => '03.04',
+                'name' => 'Laba Ditahan',
+                'account_type' => ChartOfAccountAccountTypeEnum::EQUITY->value,
+                'normal_balance' => 'credit',
+                'is_group' => false,
+            ],
+        ],
+    ],
+    'income_root' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::INCOME_ROOT->value,
+        'code' => '04',
+        'name' => 'Pendapatan',
+        'account_type' => ChartOfAccountAccountTypeEnum::INCOME->value,
+        'normal_balance' => 'credit',
+        'is_group' => true,
+        'children' => [
+            'sales_income' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::INCOME_SALES->value,
+                'code' => '04.01',
+                'name' => 'Pendapatan Penjualan',
+                'account_type' => ChartOfAccountAccountTypeEnum::INCOME->value,
+                'normal_balance' => 'credit',
+                'is_group' => false,
+            ],
+            'service_income' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::INCOME_SERVICE->value,
+                'code' => '04.02',
+                'name' => 'Pendapatan Jasa',
+                'account_type' => ChartOfAccountAccountTypeEnum::INCOME->value,
+                'normal_balance' => 'credit',
+                'is_group' => false,
+            ],
+        ],
+    ],
+    'cogs_root' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::COGS_ROOT->value,
+        'code' => '05',
+        'name' => 'Harga Pokok Penjualan',
+        'account_type' => ChartOfAccountAccountTypeEnum::EXPENSE->value,
+        'normal_balance' => 'debit',
+        'is_group' => true,
+        'children' => [
+            'material_cost' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::COGS_MATERIAL_COST->value,
+                'code' => '05.01',
+                'name' => 'Beban Bahan Baku',
+                'account_type' => ChartOfAccountAccountTypeEnum::EXPENSE->value,
+                'normal_balance' => 'debit',
+                'is_group' => false,
+            ],
+            'direct_labor_cost' => [
+                'system_key' => ChartOfAccountSystemKeyEnum::COGS_DIRECT_LABOR_COST->value,
+                'code' => '05.02',
+                'name' => 'Beban Tenaga Kerja Langsung',
+                'account_type' => ChartOfAccountAccountTypeEnum::EXPENSE->value,
+                'normal_balance' => 'debit',
+                'is_group' => false,
+            ],
+        ],
+    ],
+    'expense_root' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::EXPENSE_ROOT->value,
+        'code' => '06',
+        'name' => 'Beban Operasional',
+        'account_type' => ChartOfAccountAccountTypeEnum::EXPENSE->value,
+        'normal_balance' => 'debit',
+        'is_group' => true,
+        'children' => [],
+    ],
+    'other_income_root' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::OTHER_INCOME_ROOT->value,
+        'code' => '07',
+        'name' => 'Pendapatan Lain-lain',
+        'account_type' => ChartOfAccountAccountTypeEnum::INCOME->value,
+        'normal_balance' => 'credit',
+        'is_group' => true,
+        'children' => [],
+    ],
+    'other_expense_root' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::OTHER_EXPENSE_ROOT->value,
+        'code' => '08',
+        'name' => 'Beban Lain-lain',
+        'account_type' => ChartOfAccountAccountTypeEnum::EXPENSE->value,
+        'normal_balance' => 'debit',
+        'is_group' => true,
+        'children' => [],
+    ],
+    'system_suspense' => [
+        'system_key' => ChartOfAccountSystemKeyEnum::SYSTEM_SUSPENSE->value,
+        'code' => '09',
+        'name' => 'Akun Tampungan Sistem',
+        'account_type' => ChartOfAccountAccountTypeEnum::SYSTEM->value,
+        'normal_balance' => 'credit',
+        'is_group' => false,
+    ],
+];
diff --git a/api/config/database.php b/api/config/database.php
index f8e8dcb8a..521540b1b 100644
--- a/api/config/database.php
+++ b/api/config/database.php
@@ -73,7 +73,7 @@
             'prefix' => '',
             'prefix_indexes' => true,
             'strict' => true,
-            'engine' => null,
+            'engine' => 'InnoDB ROW_FORMAT=DYNAMIC',
             'options' => extension_loaded('pdo_mysql') ? array_filter([
                 PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
             ]) : [],
diff --git a/api/config/laratrust_seeder.php b/api/config/laratrust_seeder.php
index ffebcbfa5..e963e7e58 100644
--- a/api/config/laratrust_seeder.php
+++ b/api/config/laratrust_seeder.php
@@ -33,6 +33,68 @@
         'POS-owner' => [
             'company' => 'c,r,ra,u,d',
             'branch' => 'c,r,ra,u,d',
+            'warehouse' => 'c,r,ra,u,d',
+            'investor' => 'c,r,ra,u,d',
+            'cash_account' => 'c,r,ra,u,d',
+            'product_category' => 'c,r,ra,u,d',
+            'brand' => 'c,r,ra,u,d',
+            'unit' => 'c,r,ra,u,d',
+            'vat_profile' => 'c,r,ra,u,d',
+            'product' => 'c,r,ra,u,d',
+            'supplier' => 'c,r,ra,u,d',
+            'customer_group' => 'c,r,ra,u,d',
+            'customer_address' => 'c,r,ra,u,d',
+            'customer' => 'c,r,ra,u,d',
+            'expense_category' => 'c,r,ra,u,d',
+            'income_category' => 'c,r,ra,u,d',
+            'debt_category' => 'c,r,ra,u,d',
+            'receivable_category' => 'c,r,ra,u,d',
+            'debt_creditor' => 'c,r,ra,u,d',
+            'stock_adjustment_category' => 'c,r,ra,u,d',
+            'asset_category' => 'c,r,ra,u,d',
+            'asset_unit' => 'c,r,ra,u,d',
+            'asset' => 'c,r,ra,u,d',
+            'asset_adjustment' => 'c,r,ra,u,d',
+            'asset_adjustment_in_item' => 'c,r,ra,u,d',
+            'asset_adjustment_in_item_serial' => 'c,r,ra,u,d',
+            'asset_adjustment_out_item' => 'c,r,ra,u,d',
+            'asset_adjustment_out_item_serial' => 'c,r,ra,u,d',
+            'asset_purchase' => 'c,r,ra,u,d',
+            'asset_purchase_item' => 'c,r,ra,u,d',
+            'asset_purchase_item_serial' => 'c,r,ra,u,d',
+            'asset_sale' => 'c,r,ra,u,d',
+            'asset_sale_item' => 'c,r,ra,u,d',
+            'asset_sale_item_serial' => 'c,r,ra,u,d',
+
+            'capital_opening' => 'c,r,ra,u,d',
+            'capital_transaction' => 'c,r,ra,u,d',
+            'expense' => 'c,r,ra,u,d',
+            'expense_payment' => 'c,r,ra,u,d',
+            'prepaid_expense' => 'c,r,ra,u,d',
+            'prepaid_expense_payment' => 'c,r,ra,u,d',
+            'debt' => 'c,r,ra,u,d',
+            'debt_payment' => 'c,r,ra,u,d',
+            'receivable' => 'c,r,ra,u,d',
+            'receivable_payment' => 'c,r,ra,u,d',
+            'income' => 'c,r,ra,u,d',
+            'income_payment' => 'c,r,ra,u,d',
+            'prepaid_income' => 'c,r,ra,u,d',
+            'prepaid_income_payment' => 'c,r,ra,u,d',
+            'cash_transfer' => 'c,r,ra,u,d',
+
+            'stock_adjustment' => 'c,r,ra,u,d',
+            'stock_adjustment_in_item' => 'c,r,ra,u,d',
+            'stock_adjustment_in_item_serial' => 'c,r,ra,u,d',
+            'stock_adjustment_out_item' => 'c,r,ra,u,d',
+            'stock_adjustment_out_item_serial' => 'c,r,ra,u,d',
+
+            'purchase_order' => 'c,r,ra,u,d',
+            'purchase' => 'c,r,ra,u,d',
+            'purchase_receipt' => 'c,r,ra,u,d',
+
+            'stock_transfer' => 'c,r,ra,u,d',
+            'stock_transfer_item' => 'c,r,ra,u,d',
+            'stock_transfer_item_serial' => 'c,r,ra,u,d',
         ],
         /* #endregion */
     ],
diff --git a/api/database/factories/BranchFactory.php b/api/database/factories/BranchFactory.php
index 49d9d9909..0b86c6020 100644
--- a/api/database/factories/BranchFactory.php
+++ b/api/database/factories/BranchFactory.php
@@ -2,7 +2,7 @@
 
 namespace Database\Factories;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use App\Models\Branch;
 use Illuminate\Database\Eloquent\Factories\Factory;
 
@@ -33,7 +33,7 @@ public function definition()
             'contact' => fake($locale)->e164PhoneNumber(),
             'is_main' => false,
             'remarks' => fake($locale)->sentence(),
-            'status' => fake()->randomElement(RecordStatus::toArrayEnum()),
+            'status' => fake()->randomElement(RecordStatusEnum::toArrayEnum()),
         ];
     }
 
@@ -41,7 +41,7 @@ public function setStatusActive()
     {
         return $this->state(function (array $attributes) {
             return [
-                'status' => RecordStatus::ACTIVE,
+                'status' => RecordStatusEnum::ACTIVE,
             ];
         });
     }
@@ -50,7 +50,7 @@ public function setStatusInactive()
     {
         return $this->state(function (array $attributes) {
             return [
-                'status' => RecordStatus::INACTIVE,
+                'status' => RecordStatusEnum::INACTIVE,
             ];
         });
     }
diff --git a/api/database/factories/BrandFactory.php b/api/database/factories/BrandFactory.php
new file mode 100644
index 000000000..1369ea3ae
--- /dev/null
+++ b/api/database/factories/BrandFactory.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class BrandFactory extends Factory
+{
+    protected $brands = [
+        'Samsung', 'Huawei', 'LV', 'Apple', 'Xiaomi', 'Oppo',
+        'Vivo', 'Google', 'OnePlus', 'Motorola', 'Nokia', 'Sony',
+        'LG', 'TCL', 'Hisense', 'Sharp',
+    ];
+
+    public function definition(): array
+    {
+        return [
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'name' => fake()->randomElement($this->brands),
+        ];
+    }
+
+    public function insertStringInName(string $str)
+    {
+        return $this->state(function (array $attributes) use ($str) {
+            return [
+                'name' => $this->craftName($str),
+            ];
+        });
+    }
+
+    private function craftName(string $str)
+    {
+        $text = fake()->randomElement($this->brands);
+
+        return substr_replace($text, $str, random_int(0, strlen($text) - 1), 0);
+    }
+}
diff --git a/api/database/factories/CashAccountFactory.php b/api/database/factories/CashAccountFactory.php
new file mode 100644
index 000000000..93c85f169
--- /dev/null
+++ b/api/database/factories/CashAccountFactory.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class CashAccountFactory extends Factory
+{
+    protected $cashAccounts = [
+        'Cash', 'Bank', 'Giro',
+    ];
+
+    public function definition(): array
+    {
+        return [
+            'code' => strtoupper(fake()->lexify()).' '.fake()->numerify(),
+            'name' => fake()->randomElement($this->cashAccounts),
+            'is_bank' => fake()->boolean(),
+            'is_active' => fake()->boolean(),
+            'remarks' => fake()->sentence(),
+        ];
+    }
+
+    public function insertStringInName(string $str)
+    {
+        return $this->state(function (array $attributes) use ($str) {
+            return [
+                'name' => $this->craftName($str),
+            ];
+        });
+    }
+
+    private function craftName(string $str)
+    {
+        $text = fake()->randomElement(['Cash', 'Bank', 'Giro']);
+
+        return substr_replace($text, $str, random_int(0, strlen($text) - 1), 0);
+    }
+}
diff --git a/api/database/factories/CompanyFactory.php b/api/database/factories/CompanyFactory.php
index 4adfac19f..75886a445 100644
--- a/api/database/factories/CompanyFactory.php
+++ b/api/database/factories/CompanyFactory.php
@@ -2,7 +2,7 @@
 
 namespace Database\Factories;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use App\Models\Company;
 use Illuminate\Database\Eloquent\Factories\Factory;
 
@@ -29,7 +29,7 @@ public function definition()
             'name' => fake($locale)->company(),
             'address' => fake($locale)->address(),
             'default' => false,
-            'status' => RecordStatus::ACTIVE,
+            'status' => RecordStatusEnum::ACTIVE,
         ];
     }
 
@@ -53,7 +53,7 @@ public function setStatusActive()
     {
         return $this->state(function (array $attributes) {
             return [
-                'status' => RecordStatus::ACTIVE,
+                'status' => RecordStatusEnum::ACTIVE,
             ];
         });
     }
@@ -62,7 +62,7 @@ public function setStatusInactive()
     {
         return $this->state(function (array $attributes) {
             return [
-                'status' => RecordStatus::INACTIVE,
+                'status' => RecordStatusEnum::INACTIVE,
             ];
         });
     }
diff --git a/api/database/factories/CustomerAddressFactory.php b/api/database/factories/CustomerAddressFactory.php
new file mode 100644
index 000000000..1158ccc80
--- /dev/null
+++ b/api/database/factories/CustomerAddressFactory.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class CustomerAddressFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'address' => fake()->address(),
+            'city' => fake()->city(),
+            'contact' => fake()->phoneNumber(),
+            'is_main' => fake()->boolean(),
+            'remarks' => fake()->sentence(),
+        ];
+    }
+}
diff --git a/api/database/factories/CustomerFactory.php b/api/database/factories/CustomerFactory.php
new file mode 100644
index 000000000..fedbfbbfd
--- /dev/null
+++ b/api/database/factories/CustomerFactory.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class CustomerFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'code' => strtoupper(fake()->lexify()).' '.fake()->numerify(),
+            'is_member' => fake()->boolean(),
+            'name' => fake()->name(),
+            'zone' => fake()->city(),
+            'max_open_invoice' => fake()->randomNumber(),
+            'max_outstanding_invoice' => fake()->randomNumber(),
+            'max_invoice_age' => fake()->randomNumber(),
+            'payment_term_type' => fake()->randomElement(PaymentTermTypeEnum::toArrayEnum()),
+            'payment_term' => fake()->randomNumber(),
+            'taxable_enterprise' => fake()->boolean(),
+            'tax_id' => (string) fake()->numberBetween(100000000000, 999999999999),
+            'status' => fake()->randomElement(RecordStatusEnum::toArrayEnum()),
+            'remarks' => fake()->sentence(),
+        ];
+    }
+
+    public function insertStringInName(string $str)
+    {
+        return $this->state(function (array $attributes) use ($str) {
+            return [
+                'name' => $this->craftName($str),
+            ];
+        });
+    }
+
+    private function craftName(string $str)
+    {
+        $text = fake()->name();
+
+        return substr_replace($text, $str, random_int(0, strlen($text) - 1), 0);
+    }
+}
diff --git a/api/database/factories/CustomerGroupFactory.php b/api/database/factories/CustomerGroupFactory.php
new file mode 100644
index 000000000..59d865582
--- /dev/null
+++ b/api/database/factories/CustomerGroupFactory.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RoundingTypeEnum;
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Str;
+
+class CustomerGroupFactory extends Factory
+{
+    public function definition(): array
+    {
+        $names = [
+            'Grosir',
+            'Semi Grosir',
+            'Umum',
+        ];
+
+        return [
+            'code' => strtoupper(fake()->lexify()).' '.fake()->numerify(),
+            'name' => fake()->randomElement($names).Str::random(3),
+            'max_open_invoice' => fake()->numberBetween(1, 100),
+            'max_outstanding_invoice' => fake()->numberBetween(0, 100) * 10000,
+            'max_invoice_age' => fake()->numberBetween(1, 100),
+            'payment_term_type' => fake()->randomElement(PaymentTermTypeEnum::toArrayEnum()),
+            'payment_term' => fake()->numberBetween(1, 100),
+            'selling_point' => fake()->numberBetween(0, 5),
+            'selling_point_multiple' => fake()->numberBetween(0, 100) * 10000,
+            'sell_at_cost' => fake()->boolean(),
+            'price_markup_percent' => fake()->numberBetween(0, 100),
+            'price_markup_nominal' => fake()->numberBetween(0, 100) * 10000,
+            'price_markdown_percent' => fake()->numberBetween(0, 100),
+            'price_markdown_nominal' => fake()->numberBetween(0, 100) * 10000,
+            'rounding_type' => fake()->randomElement(RoundingTypeEnum::toArrayEnum()),
+            'rounding_digit' => fake()->numberBetween(0, 100),
+            'remarks' => fake()->sentence(),
+        ];
+    }
+
+    public function insertStringInName(string $str)
+    {
+        return $this->state(function (array $attributes) use ($str) {
+            return [
+                'name' => $this->craftName($str),
+            ];
+        });
+    }
+
+    private function craftName(string $str)
+    {
+        $faker = \Faker\Factory::create('id_ID');
+        $text = Str::random(10);
+
+        return substr_replace($text, $str, random_int(0, strlen($text) - 1), 0);
+    }
+}
diff --git a/api/database/factories/EmployeeFactory.php b/api/database/factories/EmployeeFactory.php
new file mode 100644
index 000000000..c865c13cb
--- /dev/null
+++ b/api/database/factories/EmployeeFactory.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class EmployeeFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'remarks' => fake()->sentence(),
+        ];
+    }
+}
diff --git a/api/database/factories/InvestorFactory.php b/api/database/factories/InvestorFactory.php
new file mode 100644
index 000000000..55b821300
--- /dev/null
+++ b/api/database/factories/InvestorFactory.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class InvestorFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'name' => fake()->name(),
+            'remarks' => fake()->sentence(),
+        ];
+    }
+
+    public function insertStringInName(string $str)
+    {
+        return $this->state(function (array $attributes) use ($str) {
+            return [
+                'name' => $this->craftName($str),
+            ];
+        });
+    }
+
+    private function craftName(string $str)
+    {
+        $text = fake()->name();
+
+        return substr_replace($text, $str, random_int(0, strlen($text) - 1), 0);
+    }
+}
diff --git a/api/database/factories/ProductCategoryFactory.php b/api/database/factories/ProductCategoryFactory.php
new file mode 100644
index 000000000..134388e10
--- /dev/null
+++ b/api/database/factories/ProductCategoryFactory.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Enums\ProductCategoryTypeEnum;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class ProductCategoryFactory extends Factory
+{
+    protected $productNames = [
+        'Baju', 'Celana', 'Sepatu', 'Topi', 'Kacamata', 'Jam',
+        'Gelang', 'Pensil', 'Penghapus', 'Buku', 'Rautan', 'Penggaris',
+        'Kertas', 'Spidol', 'Tinta', 'Pulpen', 'Tas', 'Celengan',
+        'Baterai', 'Kabel', 'Kipas', 'Lampu', 'Kulkas', 'Mesin Cuci',
+        'TV', 'Radio', 'Kompor', 'Headset', 'Keyboard', 'Mouse', 'Monitor',
+        'Powerbank', 'Charger', 'Adaptor', 'Kamera', 'Tripod', 'Stabilizer',
+        'Obeng', 'Tang', 'Palu', 'Meteran', 'Gunting', 'Pisau',
+        'Wajan', 'Panci', 'Talenan', 'Gelas', 'Piring', 'Sendok', 'Garpu',
+        'Ember', 'Sapu', 'Pel', 'Gayung', 'Dispenser', 'Blender',
+        'Microwave', 'Oven', 'Rice Cooker', 'Vacuum Cleaner',
+        'Sabun', 'Sampo', 'Pasta Gigi', 'Sikat Gigi', 'Tisu', 'Detergen',
+        'Parfum', 'Deodoran', 'Lotion', 'Masker', 'Hand Sanitizer',
+        'Dompet', 'Koper', 'Ransel', 'Toples', 'Botol Minum', 'Kotak Makan',
+        'Flashdisk', 'Harddisk', 'Memory Card', 'Printer', 'Scanner',
+    ];
+
+    protected $serviceNames = [
+        'Jasa Cuci', 'Jasa Perbaikan', 'Jasa Konsultasi', 'Jasa Kebersihan', 'Jasa Pengiriman',
+        'Jasa Pindahan', 'Jasa Servis AC', 'Jasa Las', 'Jasa Potong Rambut', 'Jasa Pijat',
+        'Jasa Laundry', 'Jasa Penitipan Anak', 'Jasa Tukang Bangunan', 'Jasa Fotografi',
+        'Jasa Videografi', 'Jasa Make Up', 'Jasa Desain Grafis', 'Jasa Cetak Undangan',
+        'Jasa Percetakan', 'Jasa Servis Komputer', 'Jasa Instalasi Listrik', 'Jasa Catering',
+        'Jasa Sewa Mobil', 'Jasa Sewa Motor', 'Jasa Sewa Tenda', 'Jasa Sewa Kamera',
+        'Jasa Antar Jemput', 'Jasa Bersih Rumah', 'Jasa Pembuatan Website', 'Jasa SEO',
+        'Jasa Digital Marketing', 'Jasa Editing Video', 'Jasa Voice Over', 'Jasa Penerjemah',
+        'Jasa Penulisan Artikel', 'Jasa Konsultan Pajak', 'Jasa Konsultan Hukum',
+        'Jasa Akuntansi', 'Jasa Pembuatan Aplikasi', 'Jasa Interior Design', 'Jasa Arsitektur',
+        'Jasa Jahit Baju', 'Jasa Reparasi Sepeda', 'Jasa Sablon Kaos', 'Jasa Pengaspalan',
+        'Jasa Penitipan Hewan', 'Jasa Dog Grooming', 'Jasa Cuci Karpet', 'Jasa Fogging Nyamuk',
+        'Jasa Reparasi HP', 'Jasa Branding Produk', 'Jasa Packing Barang', 'Jasa Sablon Mug',
+        'Jasa Survey', 'Jasa Pendakian Gunung', 'Jasa Travel Wisata', 'Jasa Tukang Ledeng',
+        'Jasa Tambal Ban', 'Jasa Kalibrasi Alat', 'Jasa Uji Laboratorium',
+    ];
+
+    public function definition(): array
+    {
+        $type = fake()->randomElement(ProductCategoryTypeEnum::cases());
+
+        return [
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'name' => match ($type) {
+                ProductCategoryTypeEnum::PRODUCT => fake()->randomElement($this->productNames),
+                ProductCategoryTypeEnum::SERVICE => fake()->randomElement($this->serviceNames),
+            },
+            'type' => $type,
+        ];
+    }
+
+    public function forProduct()
+    {
+        return $this->state(fn (array $attributes) => [
+            'name' => fake()->randomElement($this->productNames),
+            'type' => ProductCategoryTypeEnum::PRODUCT,
+        ]);
+    }
+
+    public function forService()
+    {
+        return $this->state(fn (array $attributes) => [
+            'name' => fake()->randomElement($this->serviceNames),
+            'type' => ProductCategoryTypeEnum::SERVICE,
+        ]);
+    }
+
+    public function insertStringInName(string $str)
+    {
+        return $this->state(fn (array $attributes) => [
+            'name' => $this->craftName($str),
+        ]);
+    }
+
+    private function craftName(string $str)
+    {
+        $text = fake()->randomElement(['Buku', 'Elektronik', 'Tas']);
+
+        return substr_replace($text, $str, random_int(0, strlen($text) - 1), 0);
+    }
+}
diff --git a/api/database/factories/ProductFactory.php b/api/database/factories/ProductFactory.php
new file mode 100644
index 000000000..e4d671606
--- /dev/null
+++ b/api/database/factories/ProductFactory.php
@@ -0,0 +1,120 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Enums\ProductCategoryTypeEnum;
+use App\Enums\ProductTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class ProductFactory extends Factory
+{
+    public function definition(): array
+    {
+        // Default state: RAW_MATERIAL (Goods)
+        $companyId = Company::inRandomOrder()->value('id') ?? Company::factory()->create()->id;
+
+        $type = ProductTypeEnum::RAW_MATERIAL;
+        $category = $this->getCategory(ProductCategoryTypeEnum::PRODUCT, $companyId);
+        $brand = $this->getBrand($companyId);
+
+        return [
+            'company_id' => $companyId,
+            'code' => strtoupper(fake()->lexify('??')).fake()->numerify('####'),
+            'category_id' => $category->id,
+            'brand_id' => $brand->id,
+            'name' => $this->generateName($category, $brand),
+            'is_price_include_vat' => fake()->boolean(),
+            'is_use_serial_number' => fake()->boolean(),
+            'is_expirable' => fake()->boolean(),
+            'remarks' => fake()->sentence(),
+            'type' => $type,
+            'status' => fake()->randomElement(RecordStatusEnum::toArrayEnum()),
+        ];
+    }
+
+    public function service(): Factory
+    {
+        return $this->state(function (array $attributes) {
+            $companyId = $attributes['company_id'] ?? Company::factory()->create()->id;
+            $category = $this->getCategory(ProductCategoryTypeEnum::SERVICE, $companyId);
+
+            return [
+                'type' => ProductTypeEnum::SERVICE,
+                'category_id' => $category->id,
+                'brand_id' => null,
+                'name' => $this->generateName($category, null),
+                'is_use_serial_number' => false,
+                'is_expirable' => false,
+            ];
+        });
+    }
+
+    public function workInProgress(): Factory
+    {
+        return $this->state(function (array $attributes) {
+            return [
+                'type' => ProductTypeEnum::WORK_IN_PROGRESS,
+            ];
+        });
+    }
+
+    public function finishedGoods(): Factory
+    {
+        return $this->state(function (array $attributes) {
+            return [
+                'type' => ProductTypeEnum::FINISHED_GOODS,
+            ];
+        });
+    }
+
+    public function rawMaterial(): Factory
+    {
+        return $this->state(function (array $attributes) {
+            return [
+                'type' => ProductTypeEnum::RAW_MATERIAL,
+            ];
+        });
+    }
+
+    private function getCategory(ProductCategoryTypeEnum $type, int $companyId): ProductCategory
+    {
+        $query = ProductCategory::where('type', $type->value)->where('company_id', $companyId);
+
+        if ($query->exists()) {
+            return $query->inRandomOrder()->first();
+        }
+
+        return ProductCategory::factory()->create([
+            'type' => $type,
+            'company_id' => $companyId,
+        ]);
+    }
+
+    private function getBrand(int $companyId): Brand
+    {
+        $query = Brand::where('company_id', $companyId);
+
+        if ($query->exists()) {
+            return $query->inRandomOrder()->first();
+        }
+
+        return Brand::factory()->create([
+            'company_id' => $companyId,
+        ]);
+    }
+
+    private function generateName(ProductCategory $category, ?Brand $brand): string
+    {
+        $name = $category->name;
+
+        if ($brand) {
+            $name .= ' '.$brand->name;
+        }
+
+        return $name.' '.fake()->words(3, true);
+    }
+}
diff --git a/api/database/factories/ProductUnitFactory.php b/api/database/factories/ProductUnitFactory.php
new file mode 100644
index 000000000..b99a21453
--- /dev/null
+++ b/api/database/factories/ProductUnitFactory.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Product;
+use App\Models\Unit;
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductUnitFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'company_id' => \App\Models\Company::factory(),
+            'product_id' => \App\Models\Product::factory(),
+            'unit_id' => \App\Models\Unit::factory(),
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'is_manufacturer_sku' => fake()->boolean(),
+            'is_base' => fake()->boolean(),
+            'conversion_value' => fake()->numberBetween(1, 1000),
+            'is_primary_unit' => fake()->boolean(),
+            'point' => fake()->numberBetween(0, 100),
+            'remarks' => fake()->sentence(),
+        ];
+    }
+
+    public function withRelation(bool $encode)
+    {
+        return $this->state(function (array $attributes) use ($encode) {
+            $product = Product::inRandomOrder()->first();
+            $unit = Unit::inRandomOrder()->first();
+
+            return [
+                'product_id' => $encode ? Hashids::encode($product->id) : $product->id,
+                'unit_id' => $encode ? Hashids::encode($unit->id) : $unit->id,
+            ];
+        });
+    }
+
+    public function setIsManufacturerSku(?bool $isManufacturerSku = null)
+    {
+        return $this->state(function (array $attributes) use ($isManufacturerSku) {
+            return [
+                'is_manufacturer_sku' => is_null($isManufacturerSku) ? true : $isManufacturerSku,
+            ];
+        });
+    }
+
+    public function setIsBase(?bool $isBase = null)
+    {
+        return $this->state(function (array $attributes) use ($isBase) {
+            return [
+                'is_base' => is_null($isBase) ? true : $isBase,
+            ];
+        });
+    }
+
+    public function setIsPrimaryUnit(?bool $isPrimaryUnit = null)
+    {
+        return $this->state(function (array $attributes) use ($isPrimaryUnit) {
+            return [
+                'is_primary_unit' => is_null($isPrimaryUnit) ? false : $isPrimaryUnit,
+            ];
+        });
+    }
+
+    public function setConversionValue($val)
+    {
+        return $this->state(function (array $attributes) use ($val) {
+            return [
+                'conversion_value' => $val,
+            ];
+        });
+    }
+}
diff --git a/api/database/factories/ProfileFactory.php b/api/database/factories/ProfileFactory.php
index abeef99bb..f7dc23b37 100644
--- a/api/database/factories/ProfileFactory.php
+++ b/api/database/factories/ProfileFactory.php
@@ -2,7 +2,7 @@
 
 namespace Database\Factories;
 
-use App\Enums\RecordStatus;
+use App\Enums\RecordStatusEnum;
 use App\Models\Profile;
 use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Factories\Factory;
@@ -36,7 +36,7 @@ public function definition()
             'tax_id' => fake()->numberBetween(100000000000, 999999999999),
             'ic_num' => fake()->numberBetween(100000000000, 999999999999),
             'img_path' => '',
-            'status' => RecordStatus::INACTIVE,
+            'status' => RecordStatusEnum::INACTIVE,
             'remarks' => fake()->catchPhrase(),
         ];
     }
@@ -72,7 +72,7 @@ public function setStatusActive()
     {
         return $this->state(function (array $attributes) {
             return [
-                'status' => RecordStatus::ACTIVE,
+                'status' => RecordStatusEnum::ACTIVE,
             ];
         });
     }
@@ -81,7 +81,7 @@ public function setStatusInactive()
     {
         return $this->state(function (array $attributes) {
             return [
-                'status' => RecordStatus::INACTIVE,
+                'status' => RecordStatusEnum::INACTIVE,
             ];
         });
     }
diff --git a/api/database/factories/StockAdjustmentCategoryFactory.php b/api/database/factories/StockAdjustmentCategoryFactory.php
new file mode 100644
index 000000000..57c9392ea
--- /dev/null
+++ b/api/database/factories/StockAdjustmentCategoryFactory.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Str;
+
+class StockAdjustmentCategoryFactory extends Factory
+{
+    public function definition(): array
+    {
+        $names = [
+            'Koreksi Pencatatan',
+            'Stock Opname',
+            'Hilang',
+            'Rusak',
+        ];
+
+        return [
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'name' => fake()->randomElement($names).' '.Str::random(3),
+        ];
+    }
+}
diff --git a/api/database/factories/StockAdjustmentFactory.php b/api/database/factories/StockAdjustmentFactory.php
new file mode 100644
index 000000000..44e10d55f
--- /dev/null
+++ b/api/database/factories/StockAdjustmentFactory.php
@@ -0,0 +1,114 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Enums\ProductTypeEnum;
+use App\Models\Product;
+use App\Models\ProductUnit;
+use App\Models\StockAdjustment;
+use App\Models\StockAdjustmentInItem;
+use App\Models\StockAdjustmentOutItem;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\StockAdjustment>
+ */
+class StockAdjustmentFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'code' => strtoupper(fake()->lexify('??')).fake()->numerify('####'),
+            'date' => fake()->dateTime(),
+            'remarks' => fake()->sentence(),
+            'is_posted' => fake()->boolean(),
+            'total_incoming_item_qty' => 0,
+            'total_incoming_item_cogs' => 0,
+            'total_outgoing_item_qty' => 0,
+        ];
+    }
+
+    public function withInProducts(int $count = 1): static
+    {
+        return $this->afterCreating(function (StockAdjustment $stockAdjustment) use ($count) {
+            $inItems = collect();
+            for ($i = 0; $i < $count; $i++) {
+                $productUnit = $this->getProductUnit($stockAdjustment->company_id);
+
+                $inItems->push(StockAdjustmentInItem::factory()->create([
+                    'stock_adjustment_id' => $stockAdjustment->id,
+                    'company_id' => $stockAdjustment->company_id,
+                    'branch_id' => $stockAdjustment->branch_id,
+                    'product_unit_id' => $productUnit->id,
+                ]));
+            }
+
+            $stockAdjustment->update([
+                'total_incoming_item_qty' => $stockAdjustment->total_incoming_item_qty + $inItems->sum('qty'),
+                'total_incoming_item_cogs' => $stockAdjustment->total_incoming_item_cogs + $inItems->sum('product_unit_total_cogs'),
+            ]);
+        });
+    }
+
+    public function withOutProducts(int $count = 1): static
+    {
+        return $this->afterCreating(function (StockAdjustment $stockAdjustment) use ($count) {
+            $outItems = collect();
+            for ($i = 0; $i < $count; $i++) {
+                $product = $this->getProduct($stockAdjustment->company_id);
+
+                $outItems->push(StockAdjustmentOutItem::factory()->create([
+                    'stock_adjustment_id' => $stockAdjustment->id,
+                    'company_id' => $stockAdjustment->company_id,
+                    'branch_id' => $stockAdjustment->branch_id,
+                    'product_id' => $product->id,
+                ]));
+            }
+
+            $stockAdjustment->update([
+                'total_outgoing_item_qty' => $stockAdjustment->total_outgoing_item_qty + $outItems->sum('qty'),
+            ]);
+        });
+    }
+
+    private function getProductUnit(int $companyId): ProductUnit
+    {
+        $product = $this->getProduct($companyId);
+
+        $productUnit = $product->productUnits()->inRandomOrder()->first();
+
+        if ($productUnit) {
+            return $productUnit;
+        }
+
+        return ProductUnit::factory()->create([
+            'company_id' => $companyId,
+            'product_id' => $product->id,
+        ]);
+    }
+
+    private function getProduct(int $companyId): Product
+    {
+        $query = Product::where('company_id', $companyId)
+            ->whereIn('type', [
+                ProductTypeEnum::RAW_MATERIAL,
+                ProductTypeEnum::WORK_IN_PROGRESS,
+                ProductTypeEnum::FINISHED_GOODS,
+            ]);
+
+        if ($query->exists()) {
+            return $query->inRandomOrder()->first();
+        }
+
+        $type = fake()->randomElement(['rawMaterial', 'workInProgress', 'finishedGoods']);
+
+        return Product::factory()->{$type}()->create([
+            'company_id' => $companyId,
+        ]);
+    }
+}
diff --git a/api/database/factories/StockAdjustmentInItemFactory.php b/api/database/factories/StockAdjustmentInItemFactory.php
new file mode 100644
index 000000000..b167ac7b2
--- /dev/null
+++ b/api/database/factories/StockAdjustmentInItemFactory.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\StockAdjustmentInItem>
+ */
+class StockAdjustmentInItemFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        $qty = fake()->randomNumber(2);
+        $productUnitCogs = fake()->randomNumber(5);
+        $conversionValue = fake()->randomFloat(2, 1, 10);
+        $qtyBase = $qty * $conversionValue;
+        $totalUnitCogs = $qty * $productUnitCogs;
+        $baseUnitCogs = $qtyBase > 0 ? $totalUnitCogs / $qtyBase : 0;
+
+        return [
+            'qty' => $qty,
+            'product_unit_conversion_value' => $conversionValue,
+            'product_unit_qty_base' => $qtyBase,
+            'product_unit_cogs' => $productUnitCogs,
+            'product_unit_total_cogs' => $totalUnitCogs,
+            'product_unit_base_unit_cogs' => $baseUnitCogs,
+            'remarks' => fake()->sentence(),
+        ];
+    }
+}
diff --git a/api/database/factories/StockAdjustmentOutItemFactory.php b/api/database/factories/StockAdjustmentOutItemFactory.php
new file mode 100644
index 000000000..6add8b9e8
--- /dev/null
+++ b/api/database/factories/StockAdjustmentOutItemFactory.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\StockAdjustmentOutItem>
+ */
+class StockAdjustmentOutItemFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        $qty = fake()->randomNumber(2);
+        $conversionValue = fake()->randomFloat(2, 1, 10);
+        $qtyBase = $qty * $conversionValue;
+
+        return [
+            'qty' => $qty,
+            'product_unit_conversion_value' => $conversionValue,
+            'product_unit_qty_base' => $qtyBase,
+            'remarks' => fake()->sentence(),
+        ];
+    }
+}
diff --git a/api/database/factories/StockTransferFactory.php b/api/database/factories/StockTransferFactory.php
new file mode 100644
index 000000000..b706f34fb
--- /dev/null
+++ b/api/database/factories/StockTransferFactory.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class StockTransferFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'date' => fake()->date(),
+            'remarks' => fake()->sentence(),
+            'is_posted' => fake()->boolean(),
+        ];
+    }
+}
diff --git a/api/database/factories/StockTransferItemFactory.php b/api/database/factories/StockTransferItemFactory.php
new file mode 100644
index 000000000..af2bc734c
--- /dev/null
+++ b/api/database/factories/StockTransferItemFactory.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class StockTransferItemFactory extends Factory
+{
+    public function definition(): array
+    {
+        $qty = fake()->randomFloat(8, 1, 10000);
+        $conversionValue = fake()->randomFloat(8, 1, 10000);
+
+        return [
+            'qty' => $qty,
+            'product_unit_conversion_value' => $conversionValue,
+            'product_unit_qty_base' => bcmul((string) $qty, (string) $conversionValue, 8),
+        ];
+    }
+}
diff --git a/api/database/factories/StockTransferItemSerialFactory.php b/api/database/factories/StockTransferItemSerialFactory.php
new file mode 100644
index 000000000..7de11fd36
--- /dev/null
+++ b/api/database/factories/StockTransferItemSerialFactory.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class StockTransferItemSerialFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'serial' => fake()->numerify(),
+        ];
+    }
+}
diff --git a/api/database/factories/SupplierFactory.php b/api/database/factories/SupplierFactory.php
new file mode 100644
index 000000000..c5e6e6bd9
--- /dev/null
+++ b/api/database/factories/SupplierFactory.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Enums\PaymentTermTypeEnum;
+use App\Enums\RecordStatusEnum;
+use App\Models\Company;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class SupplierFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'company_id' => Company::factory(),
+            'code' => 'SUP-'.fake()->numerify('#####'),
+            'name' => fake()->company(),
+            'address' => fake()->address(),
+            'city' => fake()->city(),
+            'payment_term_type' => fake()->randomElement(PaymentTermTypeEnum::toArrayEnum()),
+            'payment_term' => fake()->numberBetween(1, 30),
+            'taxable_enterprise' => fake()->boolean(),
+            'tax_id' => fake()->numerify('##.###.###.#-###.###'),
+            'status' => fake()->randomElement(RecordStatusEnum::toArrayEnum()),
+            'remarks' => fake()->sentence(),
+        ];
+    }
+
+    public function setStatusActive()
+    {
+        return $this->state(function (array $attributes) {
+            return [
+                'status' => RecordStatusEnum::ACTIVE->value,
+            ];
+        });
+    }
+
+    public function setStatusInactive()
+    {
+        return $this->state(function (array $attributes) {
+            return [
+                'status' => RecordStatusEnum::INACTIVE->value,
+            ];
+        });
+    }
+}
diff --git a/api/database/factories/UnitFactory.php b/api/database/factories/UnitFactory.php
new file mode 100644
index 000000000..1f378f6d0
--- /dev/null
+++ b/api/database/factories/UnitFactory.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Enums\UnitTypeEnum;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class UnitFactory extends Factory
+{
+    protected $units = [
+        'PCS', 'SET', 'BTL', 'KG', 'LITRE', 'BOX', 'PACK', 'DOZEN',
+        'METER', 'ROLL', 'CAN', 'DRUM', 'BAG', 'TUBE', 'JAR', 'GRAM',
+        'LSN', 'KRT', 'BKS', 'SLOP',
+    ];
+
+    public function definition(): array
+    {
+        return [
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'name' => fake()->randomElement($this->units),
+            'description' => fake()->sentence(),
+            'type' => fake()->randomElement(UnitTypeEnum::toArrayEnum()),
+        ];
+    }
+
+    public function insertStringInName(string $str)
+    {
+        return $this->state(function (array $attributes) use ($str) {
+            return [
+                'name' => $this->craftName($str),
+            ];
+        });
+    }
+
+    private function craftName(string $str)
+    {
+        $text = fake()->randomElement($this->units);
+
+        return substr_replace($text, $str, random_int(0, strlen($text) - 1), 0);
+    }
+}
diff --git a/api/database/factories/UserFactory.php b/api/database/factories/UserFactory.php
index 027b5d252..25cf5be85 100644
--- a/api/database/factories/UserFactory.php
+++ b/api/database/factories/UserFactory.php
@@ -26,7 +26,7 @@ public function definition(): array
     {
         return [
             'name' => str_replace('.', '', fake()->username()),
-            'email' => fake()->unique()->safeEmail(),
+            'email' => fake()->word().fake()->unique()->safeEmail(),
             'email_verified_at' => now(),
             'password' => static::$password ??= Hash::make('password'),
             'remember_token' => Str::random(10),
diff --git a/api/database/factories/WarehouseFactory.php b/api/database/factories/WarehouseFactory.php
new file mode 100644
index 000000000..2261e171b
--- /dev/null
+++ b/api/database/factories/WarehouseFactory.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Enums\RecordStatusEnum;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Warehouse>
+ */
+class WarehouseFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        $faker = \Faker\Factory::create('id_ID');
+        $warehouse_name = $faker->city();
+
+        return [
+            'code' => strtoupper(fake()->lexify()).fake()->numerify(),
+            'name' => 'Gudang '.$warehouse_name,
+            'address' => $faker->address(),
+            'city' => $warehouse_name,
+            'contact' => $faker->e164PhoneNumber(),
+            'remarks' => $faker->word(),
+            'status' => RecordStatusEnum::ACTIVE,
+        ];
+    }
+
+    public function setStatusActive()
+    {
+        return $this->state(function (array $attributes) {
+            return [
+                'status' => RecordStatusEnum::ACTIVE,
+            ];
+        });
+    }
+
+    public function setStatusInactive()
+    {
+        return $this->state(function (array $attributes) {
+            return [
+                'status' => RecordStatusEnum::INACTIVE,
+            ];
+        });
+    }
+
+    public function insertStringInName(string $str)
+    {
+        return $this->state(function (array $attributes) use ($str) {
+            return [
+                'name' => $this->craftName($str),
+            ];
+        });
+    }
+
+    private function craftName(string $str)
+    {
+        $faker = \Faker\Factory::create('id_ID');
+        $text = 'Gudang '.$faker->city();
+
+        return substr_replace($text, $str, random_int(0, strlen($text) - 1), 0);
+    }
+}
diff --git a/api/database/migrations/0001_01_01_000000_create_users_table.php b/api/database/migrations/0001_01_01_000000_create_users_table.php
index 05fb5d9ea..0d9cb61bd 100644
--- a/api/database/migrations/0001_01_01_000000_create_users_table.php
+++ b/api/database/migrations/0001_01_01_000000_create_users_table.php
@@ -17,6 +17,7 @@ public function up(): void
             $table->string('email')->unique();
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
+            $table->string('timezone', 64)->default(config('app.timezone', 'UTC'));
             $table->rememberToken();
             $table->timestamps();
         });
diff --git a/api/database/migrations/2023_03_05_040332_create_companies_table.php b/api/database/migrations/2023_03_05_040332_create_companies_table.php
index a50114727..526f0d803 100644
--- a/api/database/migrations/2023_03_05_040332_create_companies_table.php
+++ b/api/database/migrations/2023_03_05_040332_create_companies_table.php
@@ -14,8 +14,8 @@ public function up(): void
         Schema::create('companies', function (Blueprint $table) {
             $table->id();
             $table->ulid();
-            $table->string('code');
-            $table->string('name');
+            $table->string('code', 50);
+            $table->string('name', 150);
             $table->string('address')->nullable();
             $table->boolean('default')->default(false);
             $table->integer('status');
@@ -25,10 +25,10 @@ public function up(): void
             $table->timestamps();
             $table->softDeletes();
 
-            $table->index([
-                'code',
-                'name',
-            ]);
+            // $table->index([
+            //     'code',
+            //     'name',
+            // ]);
         });
     }
 
diff --git a/api/database/migrations/2023_03_05_040337_create_branches_table.php b/api/database/migrations/2023_03_05_040337_create_branches_table.php
index 1265c393e..c9a07deae 100644
--- a/api/database/migrations/2023_03_05_040337_create_branches_table.php
+++ b/api/database/migrations/2023_03_05_040337_create_branches_table.php
@@ -29,10 +29,10 @@ public function up(): void
             $table->timestamps();
             $table->softDeletes();
 
-            $table->index([
-                'code',
-                'name',
-            ]);
+            // $table->index([
+            //     'code',
+            //     'name',
+            // ]);
         });
     }
 
diff --git a/api/database/migrations/2024_06_03_175300_create_warehouses_table.php b/api/database/migrations/2024_06_03_175300_create_warehouses_table.php
new file mode 100644
index 000000000..6a6b60db8
--- /dev/null
+++ b/api/database/migrations/2024_06_03_175300_create_warehouses_table.php
@@ -0,0 +1,46 @@
+<?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('warehouses', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->string('name');
+            $table->string('address')->nullable();
+            $table->string('city')->nullable();
+            $table->string('contact')->nullable();
+            $table->string('remarks')->nullable();
+            $table->integer('status');
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+
+            // $table->index([
+            //     'code',
+            //     'name',
+            // ]);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('warehouses');
+    }
+};
diff --git a/api/database/migrations/2024_09_27_035136_create_product_categories_table.php b/api/database/migrations/2024_09_27_035136_create_product_categories_table.php
new file mode 100644
index 000000000..fc5cf6b6a
--- /dev/null
+++ b/api/database/migrations/2024_09_27_035136_create_product_categories_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('product_categories', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->integer('type');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('product_categories');
+    }
+};
diff --git a/api/database/migrations/2024_09_28_022527_create_brands_table.php b/api/database/migrations/2024_09_28_022527_create_brands_table.php
new file mode 100644
index 000000000..f78c3af7b
--- /dev/null
+++ b/api/database/migrations/2024_09_28_022527_create_brands_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
+{
+    public function up(): void
+    {
+        Schema::create('brands', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('brands');
+    }
+};
diff --git a/api/database/migrations/2024_09_29_124754_create_units_table.php b/api/database/migrations/2024_09_29_124754_create_units_table.php
new file mode 100644
index 000000000..6cff50f7f
--- /dev/null
+++ b/api/database/migrations/2024_09_29_124754_create_units_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
+{
+    public function up(): void
+    {
+        Schema::create('units', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->string('description')->nullable();
+            $table->integer('type');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('units');
+    }
+};
diff --git a/api/database/migrations/2024_09_29_145200_create_vat_profiles_table.php b/api/database/migrations/2024_09_29_145200_create_vat_profiles_table.php
new file mode 100644
index 000000000..4e054f64a
--- /dev/null
+++ b/api/database/migrations/2024_09_29_145200_create_vat_profiles_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('vat_profiles', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->decimal('vat_rate', 30, 8)->default(0);
+            $table->unsignedInteger('vat_base_numerator')->default(1);
+            $table->unsignedInteger('vat_base_denominator')->default(1);
+            $table->text('remarks')->nullable();
+            $table->boolean('is_active')->default(true);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('vat_profiles');
+    }
+};
diff --git a/api/database/migrations/2024_09_29_145300_create_products_table.php b/api/database/migrations/2024_09_29_145300_create_products_table.php
new file mode 100644
index 000000000..9126ece21
--- /dev/null
+++ b/api/database/migrations/2024_09_29_145300_create_products_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('products', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->foreignId('category_id')->references('id')->on('product_categories');
+            $table->foreignId('brand_id')->nullable()->references('id')->on('brands');
+            $table->string('name');
+            $table->foreignId('default_vat_profile_id')->nullable()->references('id')->on('vat_profiles');
+            $table->boolean('is_price_include_vat')->default(false);
+            $table->boolean('is_use_serial_number')->default(false);
+            $table->boolean('is_expirable')->default(false);
+            $table->string('remarks')->nullable();
+            $table->integer('type');
+            $table->integer('status');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('products');
+    }
+};
diff --git a/api/database/migrations/2024_10_03_035136_create_product_units_table.php b/api/database/migrations/2024_10_03_035136_create_product_units_table.php
new file mode 100644
index 000000000..266c69cca
--- /dev/null
+++ b/api/database/migrations/2024_10_03_035136_create_product_units_table.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('product_units', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('product_id')->references('id')->on('products');
+            $table->string('code');
+            $table->boolean('is_manufacturer_sku')->default(false);
+            $table->foreignId('unit_id')->references('id')->on('units');
+            $table->decimal('price', 30, 8)->default(0);
+            $table->boolean('is_base')->default(false);
+            $table->decimal('conversion_value', 30, 8)->default(0);
+            $table->boolean('is_primary_unit')->default(false);
+            $table->integer('point')->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('product_units');
+    }
+};
diff --git a/api/database/migrations/2024_10_12_035513_create_suppliers_table.php b/api/database/migrations/2024_10_12_035513_create_suppliers_table.php
new file mode 100644
index 000000000..544594f12
--- /dev/null
+++ b/api/database/migrations/2024_10_12_035513_create_suppliers_table.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('suppliers', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->string('address')->nullable();
+            $table->string('city')->nullable();
+            $table->string('payment_term_type');
+            $table->integer('payment_term');
+            $table->boolean('taxable_enterprise');
+            $table->string('tax_id')->nullable();
+            $table->integer('status');
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('suppliers');
+    }
+};
diff --git a/api/database/migrations/2025_04_02_032102_create_customer_groups_table.php b/api/database/migrations/2025_04_02_032102_create_customer_groups_table.php
new file mode 100644
index 000000000..39c706ac5
--- /dev/null
+++ b/api/database/migrations/2025_04_02_032102_create_customer_groups_table.php
@@ -0,0 +1,46 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('customer_groups', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->integer('max_open_invoice')->default(0);
+            $table->decimal('max_outstanding_invoice', 30, 8)->default(0);
+            $table->integer('max_invoice_age')->default(0);
+            $table->string('payment_term_type');
+            $table->integer('payment_term')->default(0);
+            $table->decimal('selling_point', 30, 8)->default(0);
+            $table->decimal('selling_point_multiple', 30, 8)->default(0);
+            $table->integer('sell_at_cost')->default(0);
+            $table->decimal('price_markup_percent', 30, 8)->default(0);
+            $table->decimal('price_markup_nominal', 30, 8)->default(0);
+            $table->decimal('price_markdown_percent', 30, 8)->default(0);
+            $table->decimal('price_markdown_nominal', 30, 8)->default(0);
+            $table->integer('rounding_type')->default(0);
+            $table->integer('rounding_digit')->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('customer_groups');
+    }
+};
diff --git a/api/database/migrations/2025_04_02_050803_create_customers_table.php b/api/database/migrations/2025_04_02_050803_create_customers_table.php
new file mode 100644
index 000000000..6d4a5c18c
--- /dev/null
+++ b/api/database/migrations/2025_04_02_050803_create_customers_table.php
@@ -0,0 +1,44 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('customers', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('user_id')->nullable()->references('id')->on('users');
+            $table->string('code');
+            $table->boolean('is_member');
+            $table->string('name');
+            $table->foreignId('group_id')->nullable()->references('id')->on('customer_groups');
+            $table->string('zone')->nullable();
+            $table->integer('max_open_invoice')->default(0);
+            $table->decimal('max_outstanding_invoice', 30, 8)->default(0);
+            $table->integer('max_invoice_age')->default(0);
+            $table->string('payment_term_type')->nullable();
+            $table->integer('payment_term')->default(0);
+            $table->boolean('taxable_enterprise');
+            $table->string('tax_id')->nullable();
+            $table->boolean('status');
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('customers');
+    }
+};
diff --git a/api/database/migrations/2025_04_02_050804_create_customer_addresses_table.php b/api/database/migrations/2025_04_02_050804_create_customer_addresses_table.php
new file mode 100644
index 000000000..0946fffe9
--- /dev/null
+++ b/api/database/migrations/2025_04_02_050804_create_customer_addresses_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('customer_addresses', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('customer_id')->references('id')->on('customers');
+            $table->string('address');
+            $table->string('city')->nullable();
+            $table->string('contact')->nullable();
+            $table->boolean('is_main');
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('customer_addresses');
+    }
+};
diff --git a/api/database/migrations/2025_04_03_040843_create_employees_table.php b/api/database/migrations/2025_04_03_040843_create_employees_table.php
new file mode 100644
index 000000000..720d2fc0d
--- /dev/null
+++ b/api/database/migrations/2025_04_03_040843_create_employees_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
+{
+    public function up(): void
+    {
+        Schema::create('employees', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->foreignId('user_id')->references('id')->on('users');
+            $table->dateTime('join_date')->nullable();
+            $table->integer('status')->nullable();
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('employees');
+    }
+};
diff --git a/api/database/migrations/2025_04_03_053302_create_cash_accounts_table.php b/api/database/migrations/2025_04_03_053302_create_cash_accounts_table.php
new file mode 100644
index 000000000..2421cfbdb
--- /dev/null
+++ b/api/database/migrations/2025_04_03_053302_create_cash_accounts_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('cash_accounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->string('name');
+            $table->boolean('is_bank')->default(false);
+            $table->boolean('is_active')->default(false);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('cash_accounts');
+    }
+};
diff --git a/api/database/migrations/2025_04_03_055338_create_investors_table.php b/api/database/migrations/2025_04_03_055338_create_investors_table.php
new file mode 100644
index 000000000..ae71f15d9
--- /dev/null
+++ b/api/database/migrations/2025_04_03_055338_create_investors_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('investors', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('investors');
+    }
+};
diff --git a/api/database/migrations/2025_04_25_033755_create_stock_transfers_table.php b/api/database/migrations/2025_04_25_033755_create_stock_transfers_table.php
new file mode 100644
index 000000000..64a14c6f5
--- /dev/null
+++ b/api/database/migrations/2025_04_25_033755_create_stock_transfers_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('stock_transfers', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('source_warehouse_id')->references('id')->on('warehouses');
+            $table->foreignId('destination_warehouse_id')->references('id')->on('warehouses');
+            $table->string('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_transfers');
+    }
+};
diff --git a/api/database/migrations/2025_04_25_044210_create_stock_transfer_items_table.php b/api/database/migrations/2025_04_25_044210_create_stock_transfer_items_table.php
new file mode 100644
index 000000000..3f2ccf6b7
--- /dev/null
+++ b/api/database/migrations/2025_04_25_044210_create_stock_transfer_items_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('stock_transfer_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('stock_transfer_id')->references('id')->on('stock_transfers');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->foreignId('product_unit_id')->references('id')->on('product_units');
+            $table->decimal('product_unit_conversion_value', 30, 8)->default(0);
+            $table->decimal('product_unit_qty_base', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_transfer_items');
+    }
+};
diff --git a/api/database/migrations/2025_04_30_082301_create_stock_transfer_item_serials_table.php b/api/database/migrations/2025_04_30_082301_create_stock_transfer_item_serials_table.php
new file mode 100644
index 000000000..c30bf1c31
--- /dev/null
+++ b/api/database/migrations/2025_04_30_082301_create_stock_transfer_item_serials_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
+{
+    public function up(): void
+    {
+        Schema::create('stock_transfer_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('stock_transfer_id')->references('id')->on('stock_transfers');
+            $table->foreignId('stock_transfer_item_id');
+            $table->foreign('stock_transfer_item_id', 'fk_stis_sti_id')->references('id')->on('stock_transfer_items');
+            $table->string('serial');
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_transfer_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_01_17_000000_create_stock_adjustment_categories_table.php b/api/database/migrations/2026_01_17_000000_create_stock_adjustment_categories_table.php
new file mode 100644
index 000000000..bfd54fcc8
--- /dev/null
+++ b/api/database/migrations/2026_01_17_000000_create_stock_adjustment_categories_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
+{
+    public function up(): void
+    {
+        Schema::create('stock_adjustment_categories', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_adjustment_categories');
+    }
+};
diff --git a/api/database/migrations/2026_02_12_080234_create_stock_adjustments_table.php b/api/database/migrations/2026_02_12_080234_create_stock_adjustments_table.php
new file mode 100644
index 000000000..b8ad43c21
--- /dev/null
+++ b/api/database/migrations/2026_02_12_080234_create_stock_adjustments_table.php
@@ -0,0 +1,47 @@
+<?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('stock_adjustments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('category_id')->references('id')->on('stock_adjustment_categories');
+            $table->foreignId('in_warehouse_id')->nullable()->references('id')->on('warehouses');
+            $table->foreignId('out_warehouse_id')->nullable()->references('id')->on('warehouses');
+            $table->string('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            $table->decimal('total_incoming_item_qty', 30, 8)->default(0);
+            $table->decimal('total_incoming_item_cogs', 30, 8)->default(0);
+            $table->decimal('total_outgoing_item_qty', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_adjustments');
+    }
+};
diff --git a/api/database/migrations/2026_02_12_081746_create_stock_adjustment_in_items_table.php b/api/database/migrations/2026_02_12_081746_create_stock_adjustment_in_items_table.php
new file mode 100644
index 000000000..67a9853ed
--- /dev/null
+++ b/api/database/migrations/2026_02_12_081746_create_stock_adjustment_in_items_table.php
@@ -0,0 +1,45 @@
+<?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('stock_adjustment_in_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('stock_adjustment_id')->references('id')->on('stock_adjustments');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->foreignId('product_unit_id')->references('id')->on('product_units');
+            $table->decimal('product_unit_conversion_value', 30, 8)->default(0);
+            $table->decimal('product_unit_qty_base', 30, 8)->default(0);
+            $table->decimal('product_unit_cogs', 30, 8)->default(0);
+            $table->decimal('product_unit_total_cogs', 30, 8)->default(0);
+            $table->decimal('product_unit_base_unit_cogs', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_adjustment_in_items');
+    }
+};
diff --git a/api/database/migrations/2026_02_12_081747_create_stock_adjustment_out_items_table.php b/api/database/migrations/2026_02_12_081747_create_stock_adjustment_out_items_table.php
new file mode 100644
index 000000000..26a731599
--- /dev/null
+++ b/api/database/migrations/2026_02_12_081747_create_stock_adjustment_out_items_table.php
@@ -0,0 +1,42 @@
+<?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('stock_adjustment_out_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('stock_adjustment_id')->references('id')->on('stock_adjustments');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->foreignId('product_unit_id')->references('id')->on('product_units');
+            $table->decimal('product_unit_conversion_value', 30, 8)->default(0);
+            $table->decimal('product_unit_qty_base', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_adjustment_out_items');
+    }
+};
diff --git a/api/database/migrations/2026_02_12_083747_create_stock_adjustment_in_item_serials_table.php b/api/database/migrations/2026_02_12_083747_create_stock_adjustment_in_item_serials_table.php
new file mode 100644
index 000000000..90771d943
--- /dev/null
+++ b/api/database/migrations/2026_02_12_083747_create_stock_adjustment_in_item_serials_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('stock_adjustment_in_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('stock_adjustment_id')->references('id')->on('stock_adjustments');
+
+            $table->foreignId('stock_adjustment_in_item_id');
+            $table->foreign('stock_adjustment_in_item_id', 'fk_saip_serials_saip_id')->references('id')->on('stock_adjustment_in_items');
+
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_adjustment_in_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_02_12_083748_create_stock_adjustment_out_item_serials_table.php b/api/database/migrations/2026_02_12_083748_create_stock_adjustment_out_item_serials_table.php
new file mode 100644
index 000000000..9cdd039f0
--- /dev/null
+++ b/api/database/migrations/2026_02_12_083748_create_stock_adjustment_out_item_serials_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('stock_adjustment_out_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('stock_adjustment_id')->references('id')->on('stock_adjustments');
+
+            $table->foreignId('stock_adjustment_out_item_id');
+            $table->foreign('stock_adjustment_out_item_id', 'fk_saop_serials_saop_id')->references('id')->on('stock_adjustment_out_items');
+
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_adjustment_out_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_03_01_115359_create_stock_transactions_table.php b/api/database/migrations/2026_03_01_115359_create_stock_transactions_table.php
new file mode 100644
index 000000000..c52079666
--- /dev/null
+++ b/api/database/migrations/2026_03_01_115359_create_stock_transactions_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
+{
+    public function up(): void
+    {
+        Schema::create('stock_transactions', function (Blueprint $table) {
+            $table->id();
+
+            $table->morphs('referable');
+            $table->dateTime('date');
+            $table->foreignId('warehouse_id')->references('id')->on('warehouses');
+            $table->foreignId('product_id')->references('id')->on('products');
+            $table->decimal('base_qty', 30, 8);
+
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_transactions');
+    }
+};
diff --git a/api/database/migrations/2026_03_06_000000_create_cash_transactions_table.php b/api/database/migrations/2026_03_06_000000_create_cash_transactions_table.php
new file mode 100644
index 000000000..16a84556e
--- /dev/null
+++ b/api/database/migrations/2026_03_06_000000_create_cash_transactions_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('cash_transactions', function (Blueprint $table) {
+            $table->id();
+
+            $table->morphs('referable');
+            $table->dateTime('date');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8);
+
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('cash_transactions');
+    }
+};
diff --git a/api/database/migrations/2026_03_09_000001_create_product_images_table.php b/api/database/migrations/2026_03_09_000001_create_product_images_table.php
new file mode 100644
index 000000000..d792c8866
--- /dev/null
+++ b/api/database/migrations/2026_03_09_000001_create_product_images_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('product_images', function (Blueprint $table): void {
+            $table->id();
+
+            $table->foreignId('product_id')->nullable()->constrained('products')->onDelete('cascade');
+            $table->string('path');
+            $table->string('hash');
+            $table->boolean('is_main');
+
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('product_images');
+    }
+};
diff --git a/api/database/migrations/2026_03_15_000000_create_stock_transaction_serials_table.php b/api/database/migrations/2026_03_15_000000_create_stock_transaction_serials_table.php
new file mode 100644
index 000000000..29dd2bbc6
--- /dev/null
+++ b/api/database/migrations/2026_03_15_000000_create_stock_transaction_serials_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
+{
+    public function up(): void
+    {
+        Schema::create('stock_serial_transactions', function (Blueprint $table) {
+            $table->id();
+
+            $table->morphs('referable');
+            $table->dateTime('date');
+            $table->foreignId('warehouse_id')->references('id')->on('warehouses');
+            $table->foreignId('product_id')->references('id')->on('products');
+            $table->tinyInteger('direction'); // +1 = in, -1 = out
+            $table->string('serial');
+
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('stock_serial_transactions');
+    }
+};
diff --git a/api/database/migrations/2026_04_01_000001_create_capital_transactions_table.php b/api/database/migrations/2026_04_01_000001_create_capital_transactions_table.php
new file mode 100644
index 000000000..4cf8f5628
--- /dev/null
+++ b/api/database/migrations/2026_04_01_000001_create_capital_transactions_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('capital_transactions', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('investor_id')->references('id')->on('investors');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->string('type');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('capital_transactions');
+    }
+};
diff --git a/api/database/migrations/2026_04_01_000002_create_capital_openings_table.php b/api/database/migrations/2026_04_01_000002_create_capital_openings_table.php
new file mode 100644
index 000000000..a4c25da1a
--- /dev/null
+++ b/api/database/migrations/2026_04_01_000002_create_capital_openings_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('capital_openings', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('investor_id')->references('id')->on('investors');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('capital_openings');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_010000_create_purchase_orders_table.php b/api/database/migrations/2026_04_03_010000_create_purchase_orders_table.php
new file mode 100644
index 000000000..04d9cd36e
--- /dev/null
+++ b/api/database/migrations/2026_04_03_010000_create_purchase_orders_table.php
@@ -0,0 +1,59 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_orders', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->integer('due_days')->default(0);
+            $table->foreignId('supplier_id')->nullable()->references('id')->on('suppliers');
+
+            // Header advanced
+            $table->text('remarks')->nullable();
+
+            // Footer totals
+            $table->decimal('item_total_before_global_discount', 30, 8)->default(0);
+            $table->decimal('global_discount', 30, 8)->default(0);
+            $table->decimal('item_total_after_global_discount', 30, 8)->default(0);
+            $table->decimal('vat_base', 30, 8)->default(0);
+            $table->decimal('vat', 30, 8)->default(0);
+            $table->decimal('item_total_after_vat', 30, 8)->default(0);
+            $table->decimal('rounding', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            $table->decimal('amount_paid_down_payment', 30, 8)->default(0);
+            $table->decimal('amount_allocated_down_payment', 30, 8)->default(0);
+            $table->decimal('amount_refunded_down_payment', 30, 8)->default(0);
+            $table->decimal('amount_available_down_payment', 30, 8)->default(0);
+            $table->string('progress_status')->default('unlinked');
+            $table->unsignedInteger('item_total_count')->default(0);
+            $table->unsignedInteger('item_matched_count')->default(0);
+            $table->unsignedInteger('item_less_count')->default(0);
+            $table->unsignedInteger('item_more_count')->default(0);
+            $table->unsignedInteger('item_unlinked_count')->default(0);
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_orders');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_010001_create_purchase_order_items_table.php b/api/database/migrations/2026_04_03_010001_create_purchase_order_items_table.php
new file mode 100644
index 000000000..9464cc2d6
--- /dev/null
+++ b/api/database/migrations/2026_04_03_010001_create_purchase_order_items_table.php
@@ -0,0 +1,64 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_order_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_order_id')->references('id')->on('purchase_orders');
+
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->foreignId('product_unit_id')->references('id')->on('product_units');
+            $table->foreignId('product_id')->references('id')->on('products');
+            $table->decimal('product_unit_conversion_value', 30, 8)->default(0);
+            $table->decimal('product_unit_qty_base', 30, 8)->default(0);
+            $table->decimal('qty_purchased_base', 30, 8)->default(0);
+            $table->decimal('qty_outstanding_base', 30, 8)->default(0);
+            $table->decimal('qty_excess_base', 30, 8)->default(0);
+            $table->decimal('product_unit_price', 30, 8)->default(0);
+            $table->boolean('product_unit_is_price_include_vat')->default(false);
+            $table->decimal('price_discount', 30, 8)->default(0);
+            $table->decimal('price_after_discount', 30, 8)->default(0);
+            $table->decimal('subtotal', 30, 8)->default(0);
+            $table->decimal('subtotal_discount', 30, 8)->default(0);
+            $table->decimal('subtotal_after_discount', 30, 8)->default(0);
+
+            $table->decimal('global_discount', 30, 8)->default(0);
+            $table->decimal('subtotal_after_global_discount', 30, 8)->default(0);
+
+            $table->foreignId('vat_profile_id')->nullable()->references('id')->on('vat_profiles');
+            $table->decimal('vat_rate', 30, 8)->default(0);
+            $table->unsignedInteger('vat_base_numerator')->default(1);
+            $table->unsignedInteger('vat_base_denominator')->default(1);
+            $table->decimal('vat_base', 30, 8)->default(0);
+            $table->decimal('vat', 30, 8)->default(0);
+            $table->decimal('subtotal_after_vat', 30, 8)->default(0);
+            $table->decimal('rounding', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            $table->decimal('cogs', 30, 8)->default(0);
+            $table->decimal('total_cogs', 30, 8)->default(0);
+            $table->decimal('base_unit_cogs', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_order_items');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_010002_create_purchase_order_item_product_unit_price_discounts_table.php b/api/database/migrations/2026_04_03_010002_create_purchase_order_item_product_unit_price_discounts_table.php
new file mode 100644
index 000000000..305399d67
--- /dev/null
+++ b/api/database/migrations/2026_04_03_010002_create_purchase_order_item_product_unit_price_discounts_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_order_item_product_unit_price_discounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id');
+            $table->foreign('company_id', 'fk_poipupd_company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id');
+            $table->foreign('branch_id', 'fk_poipupd_branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_order_item_id');
+            $table->foreign('purchase_order_item_id', 'fk_poipupd_poi_id')->references('id')->on('purchase_order_items');
+            $table->integer('sequence')->default(0);
+            $table->string('discount_type');
+            $table->decimal('discount_value', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_order_item_product_unit_price_discounts');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_010003_create_purchase_order_item_subtotal_discounts_table.php b/api/database/migrations/2026_04_03_010003_create_purchase_order_item_subtotal_discounts_table.php
new file mode 100644
index 000000000..bf722673e
--- /dev/null
+++ b/api/database/migrations/2026_04_03_010003_create_purchase_order_item_subtotal_discounts_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_order_item_subtotal_discounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_order_item_id');
+            $table->foreign('purchase_order_item_id', 'fk_poisd_poi_id')->references('id')->on('purchase_order_items');
+            $table->integer('sequence')->default(0);
+            $table->string('discount_type');
+            $table->decimal('discount_value', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_order_item_subtotal_discounts');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_010004_create_purchase_order_global_discounts_table.php b/api/database/migrations/2026_04_03_010004_create_purchase_order_global_discounts_table.php
new file mode 100644
index 000000000..74767e6b4
--- /dev/null
+++ b/api/database/migrations/2026_04_03_010004_create_purchase_order_global_discounts_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_order_global_discounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id');
+            $table->foreign('company_id', 'fk_pogd_company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id');
+            $table->foreign('branch_id', 'fk_pogd_branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_order_id');
+            $table->foreign('purchase_order_id', 'fk_pogd_po_id')->references('id')->on('purchase_orders');
+            $table->integer('sequence')->default(0);
+            $table->string('discount_type');
+            $table->decimal('discount_value', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_order_global_discounts');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_010005_create_purchase_order_down_payments_table.php b/api/database/migrations/2026_04_03_010005_create_purchase_order_down_payments_table.php
new file mode 100644
index 000000000..17e709892
--- /dev/null
+++ b/api/database/migrations/2026_04_03_010005_create_purchase_order_down_payments_table.php
@@ -0,0 +1,41 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_order_down_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('purchase_order_id')->references('id')->on('purchase_orders');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->decimal('amount_allocated', 30, 8)->default(0);
+
+            // Header advanced
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_order_down_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_010006_create_purchase_order_down_payment_refunds_table.php b/api/database/migrations/2026_04_03_010006_create_purchase_order_down_payment_refunds_table.php
new file mode 100644
index 000000000..e1ddfe058
--- /dev/null
+++ b/api/database/migrations/2026_04_03_010006_create_purchase_order_down_payment_refunds_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_order_down_payment_refunds', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('purchase_order_id')->references('id')->on('purchase_orders');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+
+            // Header advanced
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_order_down_payment_refunds');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020000_create_purchases_table.php b/api/database/migrations/2026_04_03_020000_create_purchases_table.php
new file mode 100644
index 000000000..1f7ec7142
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020000_create_purchases_table.php
@@ -0,0 +1,66 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchases', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->integer('due_days')->default(0);
+            $table->foreignId('supplier_id')->nullable()->references('id')->on('suppliers');
+            $table->foreignId('purchase_order_id')->nullable()->references('id')->on('purchase_orders');
+            $table->string('receipt_mode')->default('direct');
+            // Header advanced
+            $table->string('tax_invoice_number')->nullable();
+            $table->decimal('tax_invoice_vat_base', 30, 8)->default(0);
+            $table->decimal('tax_invoice_vat', 30, 8)->default(0);
+            $table->text('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            // Footer totals
+            $table->decimal('item_total_before_global_discount', 30, 8)->default(0);
+            $table->decimal('global_discount', 30, 8)->default(0);
+            $table->decimal('item_total_after_global_discount', 30, 8)->default(0);
+            $table->decimal('vat_base', 30, 8)->default(0);
+            $table->decimal('vat', 30, 8)->default(0);
+            $table->decimal('item_total_after_vat', 30, 8)->default(0);
+            $table->decimal('additional_cost', 30, 8)->default(0);
+            $table->decimal('rounding', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            $table->decimal('amount_paid_by_purchase_order_down_payment', 30, 8)->default(0);
+            $table->decimal('amount_paid_by_purchase_return', 30, 8)->default(0);
+            $table->decimal('amount_paid_total', 30, 8)->default(0);
+            $table->decimal('amount_due', 30, 8)->default(0);
+            $table->boolean('is_paid_off')->default(false);
+            $table->string('progress_status')->default('unlinked');
+            $table->unsignedInteger('item_total_count')->default(0);
+            $table->unsignedInteger('item_matched_count')->default(0);
+            $table->unsignedInteger('item_less_count')->default(0);
+            $table->unsignedInteger('item_more_count')->default(0);
+            $table->unsignedInteger('item_unlinked_count')->default(0);
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchases');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020001_create_purchase_items_table.php b/api/database/migrations/2026_04_03_020001_create_purchase_items_table.php
new file mode 100644
index 000000000..d89f519cc
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020001_create_purchase_items_table.php
@@ -0,0 +1,64 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_id')->references('id')->on('purchases');
+            $table->boolean('has_purchase_order_item_product')->default(false);
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->foreignId('product_unit_id')->references('id')->on('product_units');
+            $table->foreignId('product_id')->references('id')->on('products');
+            $table->decimal('product_unit_conversion_value', 30, 8)->default(0);
+            $table->decimal('product_unit_qty_base', 30, 8)->default(0);
+            $table->decimal('qty_received_base', 30, 8)->default(0);
+            $table->decimal('qty_outstanding_base', 30, 8)->default(0);
+            $table->decimal('qty_excess_base', 30, 8)->default(0);
+            $table->decimal('product_unit_price', 30, 8)->default(0);
+            $table->boolean('product_unit_is_price_include_vat')->default(false);
+            $table->decimal('price_discount', 30, 8)->default(0);
+            $table->decimal('price_after_discount', 30, 8)->default(0);
+            $table->decimal('subtotal', 30, 8)->default(0);
+            $table->decimal('subtotal_discount', 30, 8)->default(0);
+            $table->decimal('subtotal_after_discount', 30, 8)->default(0);
+
+            $table->decimal('global_discount', 30, 8)->default(0);
+            $table->decimal('subtotal_after_global_discount', 30, 8)->default(0);
+            $table->foreignId('vat_profile_id')->nullable()->references('id')->on('vat_profiles');
+            $table->decimal('vat_rate', 30, 8)->default(0);
+            $table->unsignedInteger('vat_base_numerator')->default(1);
+            $table->unsignedInteger('vat_base_denominator')->default(1);
+            $table->decimal('vat_base', 30, 8)->default(0);
+            $table->decimal('vat', 30, 8)->default(0);
+            $table->decimal('subtotal_after_vat', 30, 8)->default(0);
+            $table->decimal('additional_cost', 30, 8)->default(0);
+            $table->decimal('rounding', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            $table->decimal('cogs', 30, 8)->default(0);
+            $table->decimal('total_cogs', 30, 8)->default(0);
+            $table->decimal('base_unit_cogs', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_items');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020002_create_purchase_item_product_unit_price_discounts_table.php b/api/database/migrations/2026_04_03_020002_create_purchase_item_product_unit_price_discounts_table.php
new file mode 100644
index 000000000..20dce6735
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020002_create_purchase_item_product_unit_price_discounts_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_item_product_unit_price_discounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id');
+            $table->foreign('company_id', 'fk_pipupd_company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id');
+            $table->foreign('branch_id', 'fk_pipupd_branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_item_id');
+            $table->foreign('purchase_item_id', 'fk_pipupd_pi_id')->references('id')->on('purchase_items');
+            $table->integer('sequence')->default(0);
+            $table->string('discount_type');
+            $table->decimal('discount_value', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_item_product_unit_price_discounts');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020003_create_purchase_item_subtotal_discounts_table.php b/api/database/migrations/2026_04_03_020003_create_purchase_item_subtotal_discounts_table.php
new file mode 100644
index 000000000..71c0613b5
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020003_create_purchase_item_subtotal_discounts_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
+{
+    public function up(): void
+    {
+        Schema::create('purchase_item_subtotal_discounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_item_id')->references('id')->on('purchase_items');
+            $table->integer('sequence')->default(0);
+            $table->string('discount_type');
+            $table->decimal('discount_value', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_item_subtotal_discounts');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020004_create_purchase_order_down_payment_allocations_table.php b/api/database/migrations/2026_04_03_020004_create_purchase_order_down_payment_allocations_table.php
new file mode 100644
index 000000000..410b84ce6
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020004_create_purchase_order_down_payment_allocations_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_order_down_payment_allocations', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_order_down_payment_id');
+            $table->foreign('purchase_order_down_payment_id', 'fk_podpa_podp_id')->references('id')->on('purchase_order_down_payments');
+            $table->foreignId('purchase_id')->references('id')->on('purchases');
+            $table->dateTime('date');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_order_down_payment_allocations');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020005_create_purchase_receipts_table.php b/api/database/migrations/2026_04_03_020005_create_purchase_receipts_table.php
new file mode 100644
index 000000000..99e184f8f
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020005_create_purchase_receipts_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_receipts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('supplier_id')->references('id')->on('suppliers');
+            $table->foreignId('purchase_id')->nullable()->references('id')->on('purchases');
+            $table->boolean('is_from_direct_purchase')->default(false);
+            $table->foreignId('warehouse_id')->references('id')->on('warehouses');
+            $table->string('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_receipts');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020006_create_purchase_receipt_items_table.php b/api/database/migrations/2026_04_03_020006_create_purchase_receipt_items_table.php
new file mode 100644
index 000000000..b97dff17a
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020006_create_purchase_receipt_items_table.php
@@ -0,0 +1,43 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_receipt_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_receipt_id')->references('id')->on('purchase_receipts');
+            $table->foreignId('purchase_item_id')
+                ->nullable()
+                ->references('id')
+                ->on('purchase_items')
+                ->comment('Only filled when the receipt item comes from direct purchase.');
+            $table->boolean('has_purchase_item_product')->default(false);
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->foreignId('product_unit_id')->references('id')->on('product_units');
+            $table->foreignId('product_id')->references('id')->on('products');
+            $table->decimal('product_unit_conversion_value', 30, 8)->default(0);
+            $table->decimal('product_unit_qty_base', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_receipt_items');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020007_create_purchase_receipt_item_serials_table.php b/api/database/migrations/2026_04_03_020007_create_purchase_receipt_item_serials_table.php
new file mode 100644
index 000000000..79cb1050f
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020007_create_purchase_receipt_item_serials_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
+{
+    public function up(): void
+    {
+        Schema::create('purchase_receipt_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_receipt_id')->references('id')->on('purchase_receipts');
+            $table->foreignId('purchase_receipt_item_id')->references('id')->on('purchase_receipt_items');
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_receipt_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020008_create_purchase_payments_table.php b/api/database/migrations/2026_04_03_020008_create_purchase_payments_table.php
new file mode 100644
index 000000000..e19645984
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020008_create_purchase_payments_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('purchase_id')->references('id')->on('purchases');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+
+            // Header advanced
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020009_create_purchase_global_discounts_table.php b/api/database/migrations/2026_04_03_020009_create_purchase_global_discounts_table.php
new file mode 100644
index 000000000..3bcbbb335
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020009_create_purchase_global_discounts_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_global_discounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id');
+            $table->foreign('company_id', 'fk_pgd_company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id');
+            $table->foreign('branch_id', 'fk_pgd_branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_id');
+            $table->foreign('purchase_id', 'fk_pgd_purchase_id')->references('id')->on('purchases');
+            $table->integer('sequence')->default(0);
+            $table->string('discount_type');
+            $table->decimal('discount_value', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_global_discounts');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020010_create_purchase_additional_cost_categories_table.php b/api/database/migrations/2026_04_03_020010_create_purchase_additional_cost_categories_table.php
new file mode 100644
index 000000000..5177dc2af
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020010_create_purchase_additional_cost_categories_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
+{
+    public function up(): void
+    {
+        Schema::create('purchase_additional_cost_categories', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_additional_cost_categories');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020011_create_purchase_additional_costs_table.php b/api/database/migrations/2026_04_03_020011_create_purchase_additional_costs_table.php
new file mode 100644
index 000000000..e6182140c
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020011_create_purchase_additional_costs_table.php
@@ -0,0 +1,46 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_additional_costs', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_id')->references('id')->on('purchases');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->integer('due_days')->default(0);
+            $table->foreignId('purchase_additional_cost_category_id');
+            $table->foreign('purchase_additional_cost_category_id', 'pacs_pacc_id_fk')->references('id')->on('purchase_additional_cost_categories');
+            $table->foreignId('paid_immediately_cash_account_id')->nullable();
+            $table->foreign('paid_immediately_cash_account_id', 'pacs_pica_id_fk')->references('id')->on('cash_accounts');
+            $table->decimal('amount_paid_immediately', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            $table->decimal('amount_payable_paid', 30, 8)->default(0);
+            $table->decimal('amount_payable_due', 30, 8)->default(0);
+            $table->boolean('is_amount_payable_paid_off')->default(false);
+            $table->decimal('amount_total', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_additional_costs');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_020012_create_purchase_additional_cost_payments_table.php b/api/database/migrations/2026_04_03_020012_create_purchase_additional_cost_payments_table.php
new file mode 100644
index 000000000..ff80bede1
--- /dev/null
+++ b/api/database/migrations/2026_04_03_020012_create_purchase_additional_cost_payments_table.php
@@ -0,0 +1,42 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_additional_cost_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('purchase_additional_cost_id');
+            $table->foreign('purchase_additional_cost_id', 'pacps_pac_id_fk')->references('id')->on('purchase_additional_costs');
+            $table->foreignId('cash_account_id');
+            $table->foreign('cash_account_id', 'pacps_ca_id_fk')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+
+            // Header advanced
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_additional_cost_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030000_create_purchase_returns_table.php b/api/database/migrations/2026_04_03_030000_create_purchase_returns_table.php
new file mode 100644
index 000000000..2a350727b
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030000_create_purchase_returns_table.php
@@ -0,0 +1,61 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_returns', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('supplier_id')->references('id')->on('suppliers');
+            $table->foreignId('purchase_id')->nullable()->references('id')->on('purchases');
+
+            // Header advanced
+            $table->string('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            // Footer totals
+            $table->decimal('item_total_before_global_discount', 30, 8)->default(0);
+            $table->decimal('global_discount', 30, 8)->default(0);
+            $table->decimal('item_total_after_global_discount', 30, 8)->default(0);
+            $table->decimal('vat_base', 30, 8)->default(0);
+            $table->decimal('vat', 30, 8)->default(0);
+            $table->decimal('item_total_after_vat', 30, 8)->default(0);
+            $table->decimal('additional_cost', 30, 8)->default(0);
+            $table->decimal('rounding', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            // nilai retur yang dipakai memotong purchase lain
+            $table->decimal('amount_allocated_to_purchase', 30, 8)->default(0);
+            // uang yang benar-benar sudah diterima dari supplier
+            $table->decimal('amount_received_total', 30, 8)->default(0);
+            // total penyelesaian retur
+            $table->decimal('amount_settled_total', 30, 8)->default(0);
+            // sisa retur yang belum dipakai dan belum dibayar balik
+            $table->decimal('amount_available', 30, 8)->default(0);
+            // status akhir kalau retur sudah habis terselesaikan
+            $table->boolean('is_settled')->default(false);
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_returns');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030001_create_purchase_return_items_table.php b/api/database/migrations/2026_04_03_030001_create_purchase_return_items_table.php
new file mode 100644
index 000000000..d6b626d95
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030001_create_purchase_return_items_table.php
@@ -0,0 +1,60 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_return_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_return_id')->references('id')->on('purchase_returns');
+            $table->foreignId('purchase_item_id')->nullable()->references('id')->on('purchase_items');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->foreignId('product_unit_id')->references('id')->on('product_units');
+            $table->decimal('product_unit_conversion_value', 30, 8)->default(0);
+            $table->decimal('product_unit_qty_base', 30, 8)->default(0);
+            $table->decimal('product_unit_price', 30, 8)->default(0);
+            $table->boolean('product_unit_is_price_include_vat')->default(false);
+            $table->decimal('price_discount', 30, 8)->default(0);
+            $table->decimal('price_after_discount', 30, 8)->default(0);
+            $table->decimal('subtotal', 30, 8)->default(0);
+            $table->decimal('subtotal_discount', 30, 8)->default(0);
+            $table->decimal('subtotal_after_discount', 30, 8)->default(0);
+            $table->decimal('global_discount', 30, 8)->default(0);
+            $table->decimal('subtotal_after_global_discount', 30, 8)->default(0);
+
+            $table->foreignId('vat_profile_id')->nullable()->references('id')->on('vat_profiles');
+            $table->decimal('vat_rate', 30, 8)->default(0);
+            $table->unsignedInteger('vat_base_numerator')->default(1);
+            $table->unsignedInteger('vat_base_denominator')->default(1);
+            $table->decimal('vat_base', 30, 8)->default(0);
+            $table->decimal('vat', 30, 8)->default(0);
+            $table->decimal('subtotal_after_vat', 30, 8)->default(0);
+            $table->decimal('additional_cost', 30, 8)->default(0);
+            $table->decimal('rounding', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            $table->decimal('cogs', 30, 8)->default(0);
+            $table->decimal('total_cogs', 30, 8)->default(0);
+            $table->decimal('base_unit_cogs', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_return_items');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030002_create_purchase_return_item_serials_table.php b/api/database/migrations/2026_04_03_030002_create_purchase_return_item_serials_table.php
new file mode 100644
index 000000000..803ffd33e
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030002_create_purchase_return_item_serials_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
+{
+    public function up(): void
+    {
+        Schema::create('purchase_return_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_return_id')->references('id')->on('purchase_returns');
+            $table->foreignId('purchase_return_item_id')->references('id')->on('purchase_return_items');
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_return_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030003_create_purchase_return_shipments_table.php b/api/database/migrations/2026_04_03_030003_create_purchase_return_shipments_table.php
new file mode 100644
index 000000000..24a69d706
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030003_create_purchase_return_shipments_table.php
@@ -0,0 +1,41 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_return_shipments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('supplier_id')->references('id')->on('suppliers');
+            $table->foreignId('purchase_return_id')->references('id')->on('purchase_returns');
+            $table->foreignId('warehouse_id')->references('id')->on('warehouses');
+
+            // Header advanced
+            $table->string('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_return_shipments');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030004_create_purchase_return_shipment_items_table.php b/api/database/migrations/2026_04_03_030004_create_purchase_return_shipment_items_table.php
new file mode 100644
index 000000000..cafbee916
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030004_create_purchase_return_shipment_items_table.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_return_shipment_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_return_shipment_id');
+            $table->foreign('purchase_return_shipment_id', 'fk_prsi_prs_id')->references('id')->on('purchase_return_shipments');
+            $table->foreignId('purchase_return_item_id')->references('id')->on('purchase_return_items');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->foreignId('product_unit_id')->references('id')->on('product_units');
+            $table->decimal('product_unit_conversion_value', 30, 8)->default(0);
+            $table->decimal('product_unit_qty_base', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_return_shipment_items');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030005_create_purchase_return_shipment_item_serials_table.php b/api/database/migrations/2026_04_03_030005_create_purchase_return_shipment_item_serials_table.php
new file mode 100644
index 000000000..c007d86da
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030005_create_purchase_return_shipment_item_serials_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_return_shipment_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_return_shipment_id');
+            $table->foreign('purchase_return_shipment_id', 'fk_prsis_prs_id')->references('id')->on('purchase_return_shipments');
+            $table->foreignId('purchase_return_shipment_item_id');
+            $table->foreign('purchase_return_shipment_item_id', 'fk_prsis_prsi_id')->references('id')->on('purchase_return_shipment_items');
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_return_shipment_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030006_create_purchase_return_allocations_table.php b/api/database/migrations/2026_04_03_030006_create_purchase_return_allocations_table.php
new file mode 100644
index 000000000..04cf1399b
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030006_create_purchase_return_allocations_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_return_allocations', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_return_id')->references('id')->on('purchase_returns');
+            $table->foreignId('purchase_id')->references('id')->on('purchases');
+            $table->dateTime('date');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_return_allocations');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030007_create_purchase_return_payments_table.php b/api/database/migrations/2026_04_03_030007_create_purchase_return_payments_table.php
new file mode 100644
index 000000000..9637af994
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030007_create_purchase_return_payments_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_return_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            // Header
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('purchase_return_id')->references('id')->on('purchase_returns');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+
+            // Header advanced
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_return_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_03_030008_create_purchase_return_global_discounts_table.php b/api/database/migrations/2026_04_03_030008_create_purchase_return_global_discounts_table.php
new file mode 100644
index 000000000..4e8a926da
--- /dev/null
+++ b/api/database/migrations/2026_04_03_030008_create_purchase_return_global_discounts_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_return_global_discounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id');
+            $table->foreign('company_id', 'fk_prgd_company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id');
+            $table->foreign('branch_id', 'fk_prgd_branch_id')->references('id')->on('branches');
+            $table->foreignId('purchase_return_id');
+            $table->foreign('purchase_return_id', 'fk_prgd_pr_id')->references('id')->on('purchase_returns');
+            $table->integer('sequence')->default(0);
+            $table->string('discount_type');
+            $table->decimal('discount_value', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_return_global_discounts');
+    }
+};
diff --git a/api/database/migrations/2026_04_21_000000_create_expense_categories_table.php b/api/database/migrations/2026_04_21_000000_create_expense_categories_table.php
new file mode 100644
index 000000000..d8080864f
--- /dev/null
+++ b/api/database/migrations/2026_04_21_000000_create_expense_categories_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
+{
+    public function up(): void
+    {
+        Schema::create('expense_categories', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('parent_id')->nullable()->references('id')->on('expense_categories');
+            $table->string('code');
+            $table->string('name');
+            $table->integer('sequence')->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('expense_categories');
+    }
+};
diff --git a/api/database/migrations/2026_04_22_000000_create_expenses_table.php b/api/database/migrations/2026_04_22_000000_create_expenses_table.php
new file mode 100644
index 000000000..ed05e8b3f
--- /dev/null
+++ b/api/database/migrations/2026_04_22_000000_create_expenses_table.php
@@ -0,0 +1,44 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('expenses', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('expense_category_id')->references('id')->on('expense_categories');
+            $table->foreignId('paid_immediately_cash_account_id')->nullable();
+            $table->foreign('paid_immediately_cash_account_id', 'es_pica_id_fk')->references('id')->on('cash_accounts');
+            $table->decimal('amount_paid_immediately', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            $table->integer('due_days')->default(0);
+            $table->decimal('amount_payable_paid', 30, 8)->default(0);
+            $table->decimal('amount_payable_due', 30, 8)->default(0);
+            $table->boolean('is_amount_payable_paid_off')->default(false);
+            $table->decimal('amount_total', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('expenses');
+    }
+};
diff --git a/api/database/migrations/2026_04_22_000001_create_expense_payments_table.php b/api/database/migrations/2026_04_22_000001_create_expense_payments_table.php
new file mode 100644
index 000000000..89eee8a20
--- /dev/null
+++ b/api/database/migrations/2026_04_22_000001_create_expense_payments_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('expense_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('expense_id')->references('id')->on('expenses');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('expense_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000002_create_expense_images_table.php b/api/database/migrations/2026_04_23_000002_create_expense_images_table.php
new file mode 100644
index 000000000..91bf548d4
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000002_create_expense_images_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('expense_images', function (Blueprint $table): void {
+            $table->id();
+
+            $table->foreignId('expense_id')->nullable()->constrained('expenses')->onDelete('cascade');
+            $table->string('path');
+            $table->string('hash');
+            $table->boolean('is_main');
+
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('expense_images');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000003_create_prepaid_expenses_table.php b/api/database/migrations/2026_04_23_000003_create_prepaid_expenses_table.php
new file mode 100644
index 000000000..47f2d27ae
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000003_create_prepaid_expenses_table.php
@@ -0,0 +1,45 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('prepaid_expenses', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('expense_category_id')->references('id')->on('expense_categories');
+            $table->unsignedInteger('estimated_useful_life')->default(0);
+            $table->foreignId('paid_immediately_cash_account_id')->nullable();
+            $table->foreign('paid_immediately_cash_account_id', 'pes_pica_id_fk')->references('id')->on('cash_accounts');
+            $table->decimal('amount_paid_immediately', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+            $table->integer('due_days')->default(0);
+            $table->decimal('amount_payable_paid', 30, 8)->default(0);
+            $table->decimal('amount_payable_due', 30, 8)->default(0);
+            $table->boolean('is_amount_payable_paid_off')->default(false);
+            $table->decimal('amount_total', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('prepaid_expenses');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000004_create_prepaid_expense_payments_table.php b/api/database/migrations/2026_04_23_000004_create_prepaid_expense_payments_table.php
new file mode 100644
index 000000000..ddea0b113
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000004_create_prepaid_expense_payments_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('prepaid_expense_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('prepaid_expense_id')->references('id')->on('prepaid_expenses');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('prepaid_expense_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000005_create_prepaid_expense_images_table.php b/api/database/migrations/2026_04_23_000005_create_prepaid_expense_images_table.php
new file mode 100644
index 000000000..3852ce0ac
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000005_create_prepaid_expense_images_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('prepaid_expense_images', function (Blueprint $table): void {
+            $table->id();
+
+            $table->foreignId('prepaid_expense_id')->nullable()->constrained('prepaid_expenses')->onDelete('cascade');
+            $table->string('path');
+            $table->string('hash');
+            $table->boolean('is_main');
+
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('prepaid_expense_images');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000006_create_cash_transfers_table.php b/api/database/migrations/2026_04_23_000006_create_cash_transfers_table.php
new file mode 100644
index 000000000..a255016e9
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000006_create_cash_transfers_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('cash_transfers', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('source_cash_account_id')->references('id')->on('cash_accounts');
+            $table->foreignId('destination_cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('cash_transfers');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000006_create_debt_categories_table.php b/api/database/migrations/2026_04_23_000006_create_debt_categories_table.php
new file mode 100644
index 000000000..0b73293c1
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000006_create_debt_categories_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('debt_categories', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->integer('sequence')->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('debt_categories');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000007_create_debt_creditors_table.php b/api/database/migrations/2026_04_23_000007_create_debt_creditors_table.php
new file mode 100644
index 000000000..8abbc5e3b
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000007_create_debt_creditors_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('debt_creditors', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('debt_creditors');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000007_create_income_categories_table.php b/api/database/migrations/2026_04_23_000007_create_income_categories_table.php
new file mode 100644
index 000000000..b02fccaa9
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000007_create_income_categories_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
+{
+    public function up(): void
+    {
+        Schema::create('income_categories', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('parent_id')->nullable()->references('id')->on('income_categories');
+            $table->string('code');
+            $table->string('name');
+            $table->integer('sequence')->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('income_categories');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000008_create_debts_table.php b/api/database/migrations/2026_04_23_000008_create_debts_table.php
new file mode 100644
index 000000000..2cddb8eac
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000008_create_debts_table.php
@@ -0,0 +1,45 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('debts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('category_id')->references('id')->on('debt_categories');
+            $table->foreignId('creditor_id')->nullable()->references('id')->on('debt_creditors');
+            $table->foreignId('supplier_id')->nullable()->references('id')->on('suppliers');
+            $table->foreignId('cash_account_id')->nullable()->references('id')->on('cash_accounts');
+            $table->decimal('direct_amount_received', 30, 8)->default(0);
+            $table->decimal('opening_amount_due', 30, 8)->default(0);
+            $table->decimal('amount_total', 30, 8)->default(0);
+            $table->decimal('amount_paid_by_cash_account', 30, 8)->default(0);
+            $table->decimal('amount_paid_by_stock_adjustment', 30, 8)->default(0);
+            $table->decimal('amount_due', 30, 8)->default(0);
+            $table->integer('due_days')->default(0);
+            $table->boolean('is_paid_off')->default(false);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('debts');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000008_create_incomes_table.php b/api/database/migrations/2026_04_23_000008_create_incomes_table.php
new file mode 100644
index 000000000..ed3010f6b
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000008_create_incomes_table.php
@@ -0,0 +1,44 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('incomes', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('income_category_id')->references('id')->on('income_categories');
+            $table->foreignId('paid_immediately_cash_account_id')->nullable();
+            $table->foreign('paid_immediately_cash_account_id', 'ins_pica_id_fk')->references('id')->on('cash_accounts');
+            $table->decimal('amount_paid_immediately', 30, 8)->default(0);
+            $table->decimal('amount_receivable', 30, 8)->default(0);
+            $table->integer('due_days')->default(0);
+            $table->decimal('amount_receivable_paid', 30, 8)->default(0);
+            $table->decimal('amount_receivable_due', 30, 8)->default(0);
+            $table->boolean('is_amount_receivable_paid_off')->default(false);
+            $table->decimal('amount_total', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('incomes');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000009_create_debt_payments_table.php b/api/database/migrations/2026_04_23_000009_create_debt_payments_table.php
new file mode 100644
index 000000000..42e8e9682
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000009_create_debt_payments_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('debt_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('debt_id')->references('id')->on('debts');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('debt_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000009_create_income_payments_table.php b/api/database/migrations/2026_04_23_000009_create_income_payments_table.php
new file mode 100644
index 000000000..cde0d4bc7
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000009_create_income_payments_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('income_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('income_id')->references('id')->on('incomes');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('income_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000010_create_income_images_table.php b/api/database/migrations/2026_04_23_000010_create_income_images_table.php
new file mode 100644
index 000000000..1c2d54ff2
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000010_create_income_images_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('income_images', function (Blueprint $table): void {
+            $table->id();
+
+            $table->foreignId('income_id')->nullable()->constrained('incomes')->onDelete('cascade');
+            $table->string('path');
+            $table->string('hash');
+            $table->boolean('is_main');
+
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('income_images');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000011_create_prepaid_incomes_table.php b/api/database/migrations/2026_04_23_000011_create_prepaid_incomes_table.php
new file mode 100644
index 000000000..a1cedaaf7
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000011_create_prepaid_incomes_table.php
@@ -0,0 +1,45 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('prepaid_incomes', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('income_category_id')->references('id')->on('income_categories');
+            $table->unsignedInteger('estimated_useful_life')->default(0);
+            $table->foreignId('paid_immediately_cash_account_id')->nullable();
+            $table->foreign('paid_immediately_cash_account_id', 'pins_pica_id_fk')->references('id')->on('cash_accounts');
+            $table->decimal('amount_paid_immediately', 30, 8)->default(0);
+            $table->decimal('amount_receivable', 30, 8)->default(0);
+            $table->integer('due_days')->default(0);
+            $table->decimal('amount_receivable_paid', 30, 8)->default(0);
+            $table->decimal('amount_receivable_due', 30, 8)->default(0);
+            $table->boolean('is_amount_receivable_paid_off')->default(false);
+            $table->decimal('amount_total', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('prepaid_incomes');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000012_create_prepaid_income_payments_table.php b/api/database/migrations/2026_04_23_000012_create_prepaid_income_payments_table.php
new file mode 100644
index 000000000..507ea2a99
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000012_create_prepaid_income_payments_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('prepaid_income_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('prepaid_income_id')->references('id')->on('prepaid_incomes');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            // Audit
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('prepaid_income_payments');
+    }
+};
diff --git a/api/database/migrations/2026_04_23_000013_create_prepaid_income_images_table.php b/api/database/migrations/2026_04_23_000013_create_prepaid_income_images_table.php
new file mode 100644
index 000000000..c79451e7b
--- /dev/null
+++ b/api/database/migrations/2026_04_23_000013_create_prepaid_income_images_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('prepaid_income_images', function (Blueprint $table): void {
+            $table->id();
+
+            $table->foreignId('prepaid_income_id')->nullable()->constrained('prepaid_incomes')->onDelete('cascade');
+            $table->string('path');
+            $table->string('hash');
+            $table->boolean('is_main');
+
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('prepaid_income_images');
+    }
+};
diff --git a/api/database/migrations/2026_04_24_000008_create_receivable_categories_table.php b/api/database/migrations/2026_04_24_000008_create_receivable_categories_table.php
new file mode 100644
index 000000000..082d3a4ef
--- /dev/null
+++ b/api/database/migrations/2026_04_24_000008_create_receivable_categories_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('receivable_categories', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->integer('sequence')->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('receivable_categories');
+    }
+};
diff --git a/api/database/migrations/2026_04_24_000010_create_receivables_table.php b/api/database/migrations/2026_04_24_000010_create_receivables_table.php
new file mode 100644
index 000000000..0027d7ae4
--- /dev/null
+++ b/api/database/migrations/2026_04_24_000010_create_receivables_table.php
@@ -0,0 +1,44 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('receivables', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('category_id')->references('id')->on('receivable_categories');
+            $table->foreignId('customer_id')->references('id')->on('customers');
+            $table->foreignId('cash_account_id')->nullable()->references('id')->on('cash_accounts');
+            $table->decimal('direct_amount_received', 30, 8)->default(0);
+            $table->decimal('opening_amount_due', 30, 8)->default(0);
+            $table->decimal('amount_total', 30, 8)->default(0);
+            $table->decimal('amount_paid_by_cash_account', 30, 8)->default(0);
+            $table->decimal('amount_paid_by_stock_adjustment', 30, 8)->default(0);
+            $table->decimal('amount_due', 30, 8)->default(0);
+            $table->integer('due_days')->default(0);
+            $table->boolean('is_paid_off')->default(false);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('receivables');
+    }
+};
diff --git a/api/database/migrations/2026_04_24_000011_create_receivable_payments_table.php b/api/database/migrations/2026_04_24_000011_create_receivable_payments_table.php
new file mode 100644
index 000000000..9bcb3b4c8
--- /dev/null
+++ b/api/database/migrations/2026_04_24_000011_create_receivable_payments_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('receivable_payments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->foreignId('receivable_id')->references('id')->on('receivables');
+            $table->foreignId('cash_account_id')->references('id')->on('cash_accounts');
+            $table->decimal('amount', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('receivable_payments');
+    }
+};
diff --git a/api/database/migrations/2026_05_03_000002_create_chart_of_accounts_table.php b/api/database/migrations/2026_05_03_000002_create_chart_of_accounts_table.php
new file mode 100644
index 000000000..2398d5f61
--- /dev/null
+++ b/api/database/migrations/2026_05_03_000002_create_chart_of_accounts_table.php
@@ -0,0 +1,46 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('chart_of_accounts', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('scope')->default('user');
+            $table->string('system_key')->nullable();
+            $table->foreignId('parent_id')->nullable()->references('id')->on('chart_of_accounts');
+            $table->string('source_type')->nullable();
+            $table->unsignedBigInteger('source_id')->nullable();
+            $table->string('code');
+            $table->string('name');
+            $table->string('account_type');
+            $table->string('normal_balance');
+            $table->unsignedInteger('level')->default(1);
+            $table->boolean('is_group')->default(false);
+            $table->boolean('is_active')->default(true);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->timestamps();
+
+            $table->unique(['company_id', 'code']);
+            $table->unique(['company_id', 'system_key']);
+
+            $table->index(['company_id', 'scope']);
+            $table->index(['source_type', 'source_id']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('chart_of_accounts');
+    }
+};
diff --git a/api/database/migrations/2026_05_10_000001_create_journal_entries_table.php b/api/database/migrations/2026_05_10_000001_create_journal_entries_table.php
new file mode 100644
index 000000000..610880d75
--- /dev/null
+++ b/api/database/migrations/2026_05_10_000001_create_journal_entries_table.php
@@ -0,0 +1,43 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('journal_entries', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->nullable()->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->string('journal_type')->nullable();
+            $table->string('source_type')->nullable();
+            $table->unsignedBigInteger('source_id')->nullable();
+            $table->string('reference_no')->nullable();
+            $table->decimal('total_debit', 30, 8)->default(0);
+            $table->decimal('total_credit', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->timestamps();
+
+            $table->unique(['company_id', 'code']);
+            $table->unique(['source_type', 'source_id', 'journal_type']);
+
+            $table->index(['company_id', 'date']);
+            $table->index(['branch_id', 'date']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('journal_entries');
+    }
+};
diff --git a/api/database/migrations/2026_05_10_000002_create_journal_entry_items_table.php b/api/database/migrations/2026_05_10_000002_create_journal_entry_items_table.php
new file mode 100644
index 000000000..085730a62
--- /dev/null
+++ b/api/database/migrations/2026_05_10_000002_create_journal_entry_items_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('journal_entry_items', function (Blueprint $table) {
+            $table->id();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('journal_entry_id')->references('id')->on('journal_entries')->cascadeOnDelete();
+            $table->foreignId('chart_of_account_id')->references('id')->on('chart_of_accounts');
+            $table->unsignedInteger('sequence')->default(0);
+            $table->decimal('debit', 30, 8)->default(0);
+            $table->decimal('credit', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->timestamps();
+
+            $table->index(['company_id']);
+            $table->index(['journal_entry_id', 'sequence']);
+            $table->index(['chart_of_account_id']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('journal_entry_items');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000000_create_asset_categories_table.php b/api/database/migrations/2026_05_13_000000_create_asset_categories_table.php
new file mode 100644
index 000000000..a6f9410e5
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000000_create_asset_categories_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
+{
+    public function up(): void
+    {
+        Schema::create('asset_categories', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->unsignedInteger('estimated_useful_life_months')->nullable();
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_categories');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000001_create_asset_units_table.php b/api/database/migrations/2026_05_13_000001_create_asset_units_table.php
new file mode 100644
index 000000000..adcd8ca66
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000001_create_asset_units_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_units', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->string('code');
+            $table->string('name');
+            $table->string('description')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_units');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000002_create_assets_table.php b/api/database/migrations/2026_05_13_000002_create_assets_table.php
new file mode 100644
index 000000000..f31defa5d
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000002_create_assets_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('assets', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('asset_category_id')->references('id')->on('asset_categories');
+            $table->string('code');
+            $table->string('name');
+            $table->foreignId('asset_unit_id')->references('id')->on('asset_units');
+            $table->unsignedTinyInteger('status')->default(1);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('assets');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000003_create_asset_adjustments_table.php b/api/database/migrations/2026_05_13_000003_create_asset_adjustments_table.php
new file mode 100644
index 000000000..3feefec25
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000003_create_asset_adjustments_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_adjustments', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->string('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            $table->decimal('total_incoming_asset_qty', 30, 8)->default(0);
+            $table->decimal('total_outgoing_asset_qty', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_adjustments');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000004_create_asset_adjustment_in_items_table.php b/api/database/migrations/2026_05_13_000004_create_asset_adjustment_in_items_table.php
new file mode 100644
index 000000000..89eb94a22
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000004_create_asset_adjustment_in_items_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
+{
+    public function up(): void
+    {
+        Schema::create('asset_adjustment_in_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('asset_adjustment_id')->references('id')->on('asset_adjustments');
+            $table->foreignId('asset_id')->references('id')->on('assets');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_adjustment_in_items');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000005_create_asset_adjustment_out_items_table.php b/api/database/migrations/2026_05_13_000005_create_asset_adjustment_out_items_table.php
new file mode 100644
index 000000000..b1c242fd9
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000005_create_asset_adjustment_out_items_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
+{
+    public function up(): void
+    {
+        Schema::create('asset_adjustment_out_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('asset_adjustment_id')->references('id')->on('asset_adjustments');
+            $table->foreignId('asset_id')->references('id')->on('assets');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_adjustment_out_items');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000007_create_asset_adjustment_in_item_serials_table.php b/api/database/migrations/2026_05_13_000007_create_asset_adjustment_in_item_serials_table.php
new file mode 100644
index 000000000..a183616a3
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000007_create_asset_adjustment_in_item_serials_table.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_adjustment_in_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('asset_adjustment_id')->references('id')->on('asset_adjustments');
+
+            $table->foreignId('asset_adjustment_in_item_id');
+            $table->foreign('asset_adjustment_in_item_id', 'fk_aaip_serials_aaip_id')->references('id')->on('asset_adjustment_in_items');
+
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+
+            $table->unique(['asset_adjustment_in_item_id', 'serial'], 'uq_aaip_serials_item_serial');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_adjustment_in_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000008_create_asset_adjustment_out_item_serials_table.php b/api/database/migrations/2026_05_13_000008_create_asset_adjustment_out_item_serials_table.php
new file mode 100644
index 000000000..b2ee1f160
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000008_create_asset_adjustment_out_item_serials_table.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_adjustment_out_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('asset_adjustment_id')->references('id')->on('asset_adjustments');
+
+            $table->foreignId('asset_adjustment_out_item_id');
+            $table->foreign('asset_adjustment_out_item_id', 'fk_aaop_serials_aaop_id')->references('id')->on('asset_adjustment_out_items');
+
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+
+            $table->unique(['asset_adjustment_out_item_id', 'serial'], 'uq_aaop_serials_item_serial');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_adjustment_out_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000009_create_asset_purchases_table.php b/api/database/migrations/2026_05_13_000009_create_asset_purchases_table.php
new file mode 100644
index 000000000..378a3cc3f
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000009_create_asset_purchases_table.php
@@ -0,0 +1,41 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_purchases', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->integer('due_days')->default(0);
+            $table->foreignId('supplier_id')->references('id')->on('suppliers');
+            $table->string('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            $table->decimal('item_total', 30, 8)->default(0);
+            $table->decimal('additional_cost', 30, 8)->default(0);
+            $table->decimal('rounding', 30, 8)->default(0);
+            $table->decimal('amount_payable', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_purchases');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000010_create_asset_purchase_items_table.php b/api/database/migrations/2026_05_13_000010_create_asset_purchase_items_table.php
new file mode 100644
index 000000000..fadf214ae
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000010_create_asset_purchase_items_table.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_purchase_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('asset_purchase_id')->references('id')->on('asset_purchases');
+            $table->foreignId('asset_id')->references('id')->on('assets');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->decimal('unit_price', 30, 8)->default(0);
+            $table->decimal('subtotal', 30, 8)->default(0);
+            $table->decimal('allocated_additional_cost', 30, 8)->default(0);
+            $table->decimal('subtotal_after_additional_cost', 30, 8)->default(0);
+            $table->decimal('unit_acquisition_cost', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_purchase_items');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000011_create_asset_purchase_item_serials_table.php b/api/database/migrations/2026_05_13_000011_create_asset_purchase_item_serials_table.php
new file mode 100644
index 000000000..4c0c802a9
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000011_create_asset_purchase_item_serials_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_purchase_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('asset_purchase_id')->references('id')->on('asset_purchases');
+            $table->foreignId('asset_purchase_item_id')->references('id')->on('asset_purchase_items');
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+
+            $table->unique(['asset_purchase_item_id', 'serial'], 'uq_apis_item_serial');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_purchase_item_serials');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000012_create_asset_sales_table.php b/api/database/migrations/2026_05_13_000012_create_asset_sales_table.php
new file mode 100644
index 000000000..f17ed2ade
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000012_create_asset_sales_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_sales', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->string('code');
+            $table->dateTime('date');
+            $table->integer('due_days')->default(0);
+            $table->foreignId('customer_id')->references('id')->on('customers');
+            $table->string('remarks')->nullable();
+            $table->boolean('is_posted')->default(false);
+
+            $table->decimal('item_total', 30, 8)->default(0);
+            $table->decimal('rounding', 30, 8)->default(0);
+            $table->decimal('amount_receivable', 30, 8)->default(0);
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_sales');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000013_create_asset_sale_items_table.php b/api/database/migrations/2026_05_13_000013_create_asset_sale_items_table.php
new file mode 100644
index 000000000..dea9ddb27
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000013_create_asset_sale_items_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_sale_items', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('asset_sale_id')->references('id')->on('asset_sales');
+            $table->foreignId('asset_id')->references('id')->on('assets');
+            $table->decimal('qty', 30, 8)->default(0);
+            $table->decimal('unit_price', 30, 8)->default(0);
+            $table->decimal('subtotal', 30, 8)->default(0);
+            $table->string('remarks')->nullable();
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_sale_items');
+    }
+};
diff --git a/api/database/migrations/2026_05_13_000014_create_asset_sale_item_serials_table.php b/api/database/migrations/2026_05_13_000014_create_asset_sale_item_serials_table.php
new file mode 100644
index 000000000..1ec4b5d34
--- /dev/null
+++ b/api/database/migrations/2026_05_13_000014_create_asset_sale_item_serials_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('asset_sale_item_serials', function (Blueprint $table) {
+            $table->id();
+            $table->ulid();
+
+            $table->foreignId('company_id')->references('id')->on('companies');
+            $table->foreignId('branch_id')->references('id')->on('branches');
+            $table->foreignId('asset_sale_id')->references('id')->on('asset_sales');
+            $table->foreignId('asset_sale_item_id')->references('id')->on('asset_sale_items');
+            $table->string('serial');
+
+            $table->unsignedBigInteger('created_by')->default(0);
+            $table->unsignedBigInteger('updated_by')->default(0);
+            $table->unsignedBigInteger('deleted_by')->default(0);
+            $table->timestamps();
+            $table->softDeletes();
+
+            $table->unique(['asset_sale_item_id', 'serial'], 'uq_asis_item_serial');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('asset_sale_item_serials');
+    }
+};
diff --git a/api/database/seeders/BranchSeeder.php b/api/database/seeders/BranchSeeder.php
new file mode 100644
index 000000000..95e43b286
--- /dev/null
+++ b/api/database/seeders/BranchSeeder.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Branch;
+use App\Models\Company;
+use Illuminate\Database\Seeder;
+
+class BranchSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run(?int $branchesPerCompany = null, ?int $companyId = null)
+    {
+        $branchesPerCompany = $branchesPerCompany ?? 1;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            Branch::factory()
+                ->for($company)
+                ->setIsMainBranch()
+                ->setStatusActive()
+                ->create();
+
+            $remaining = max(0, $branchesPerCompany - 1);
+
+            for ($i = 0; $i < $remaining; $i++) {
+                $branch = Branch::factory()->for($company);
+
+                random_int(0, 1) ? $branch->setStatusActive() : $branch->setStatusInactive();
+
+                $branch->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/BranchTableSeeder.php b/api/database/seeders/BranchTableSeeder.php
deleted file mode 100644
index 77fb072fa..000000000
--- a/api/database/seeders/BranchTableSeeder.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-
-namespace Database\Seeders;
-
-use App\Models\Branch;
-use App\Models\Company;
-use Illuminate\Database\Seeder;
-
-class BranchTableSeeder extends Seeder
-{
-    /**
-     * Run the database seeds.
-     *
-     * @return void
-     */
-    public function run($branchPerCompanies = 3, $onlyThisCompanyId = 0)
-    {
-        if ($onlyThisCompanyId != 0) {
-            $companies = Company::where('id', '=', $onlyThisCompanyId)->get();
-        } else {
-            $companies = Company::get();
-        }
-
-        foreach ($companies as $company) {
-            $rand = random_int(0, $branchPerCompanies - 1);
-
-            for ($i = 0; $i < $branchPerCompanies; $i++) {
-                $makeItActiveStatus = boolval(random_int(0, 1));
-
-                $branchFactory = Branch::factory()->for($company);
-
-                if ($i == $rand) {
-                    $branchFactory->setIsMainBranch()->setStatusActive()->create();
-                } else {
-                    if ($makeItActiveStatus) {
-                        $branchFactory->setStatusActive()->create();
-                    } else {
-                        $branchFactory->setStatusInactive()->create();
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/api/database/seeders/BrandSeeder.php b/api/database/seeders/BrandSeeder.php
new file mode 100644
index 000000000..2e62e10a4
--- /dev/null
+++ b/api/database/seeders/BrandSeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Brand;
+use App\Models\Company;
+use Illuminate\Database\Seeder;
+
+class BrandSeeder extends Seeder
+{
+    public function run(?int $brandsPerCompany = null, ?int $companyId = null)
+    {
+        $brandsPerCompany = $brandsPerCompany ?? 5;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $brandsPerCompany; $i++) {
+                Brand::factory()
+                    ->for($company)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/CashAccountSeeder.php b/api/database/seeders/CashAccountSeeder.php
new file mode 100644
index 000000000..74047cfe2
--- /dev/null
+++ b/api/database/seeders/CashAccountSeeder.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use Illuminate\Database\Seeder;
+
+class CashAccountSeeder extends Seeder
+{
+    public function run(?int $cashAccountsPerCompany = null, ?int $companyId = null, ?int $branchId = null)
+    {
+        $cashAccountsPerCompany = $cashAccountsPerCompany ?? 5;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            $branchQuery = Branch::where('company_id', $company->id);
+            if ($branchId) $branchQuery->where('id', $branchId);
+            $branch = $branchQuery->inRandomOrder()->first();
+            if (! $branch) continue;
+
+            for ($i = 0; $i < $cashAccountsPerCompany; $i++) {
+                CashAccount::factory()
+                    ->for($company)
+                    ->for($branch)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/CompanySeeder.php b/api/database/seeders/CompanySeeder.php
new file mode 100644
index 000000000..679d9bbb7
--- /dev/null
+++ b/api/database/seeders/CompanySeeder.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Actions\Company\CompanyActions;
+use App\DTOs\CompanyCreateDTO;
+use App\Models\Company;
+use App\Models\User;
+use Illuminate\Database\Seeder;
+
+class CompanySeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run(?int $companiesPerUser = null, ?int $userId = null)
+    {
+        $companiesPerUser = $companiesPerUser ?? 1;
+        $companyActions = app(CompanyActions::class);
+
+        $users = $userId ? User::where('id', $userId)->get() : User::all();
+
+        foreach ($users as $user) {
+            $defaultCompanyData = Company::factory()
+                ->setIsDefault()
+                ->setStatusActive()
+                ->make()
+                ->toArray();
+
+            $companyActions->resetDefault($user);
+            $companyActions->create($user, new CompanyCreateDTO(
+                code: $defaultCompanyData['code'],
+                name: $defaultCompanyData['name'],
+                address: $defaultCompanyData['address'],
+                default: $defaultCompanyData['default'],
+                status: $defaultCompanyData['status'],
+            ));
+
+            $remaining = max(0, $companiesPerUser - 1);
+
+            for ($i = 0; $i < $remaining; $i++) {
+                $company = Company::factory();
+
+                random_int(0, 1) ? $company->setStatusActive() : $company->setStatusInactive();
+
+                $companyActions->create($user, new CompanyCreateDTO(
+                    code: $company->make()->toArray()['code'],
+                    name: $company->make()->toArray()['name'],
+                    address: $company->make()->toArray()['address'],
+                    default: $company->make()->toArray()['default'],
+                    status: $company->make()->toArray()['status'],
+                ));
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/CompanyTableSeeder.php b/api/database/seeders/CompanyTableSeeder.php
deleted file mode 100644
index 4d65b5de5..000000000
--- a/api/database/seeders/CompanyTableSeeder.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-
-namespace Database\Seeders;
-
-use App\Models\Company;
-use App\Models\User;
-use Illuminate\Database\Seeder;
-
-class CompanyTableSeeder extends Seeder
-{
-    /**
-     * Run the database seeds.
-     *
-     * @return void
-     */
-    public function run($companiesPerUsers = 3, $userId = 0)
-    {
-        if ($userId != 0) {
-            $users = User::where('id', '=', $userId)->get();
-        } else {
-            $users = User::all();
-        }
-
-        if ($companiesPerUsers <= 0) {
-            $companiesPerUsers = 3;
-        }
-
-        foreach ($users as $user) {
-            $rand = random_int(0, $companiesPerUsers - 1);
-
-            for ($i = 0; $i < $companiesPerUsers; $i++) {
-                $makeItActiveStatus = boolval(random_int(0, 1));
-
-                $companyFactory = Company::factory()->hasAttached($user);
-
-                if ($i == $rand) {
-                    $companyFactory->setIsDefault()->setStatusActive()->create();
-                } else {
-                    if ($makeItActiveStatus) {
-                        $companyFactory->setStatusActive()->create();
-                    } else {
-                        $companyFactory->setStatusInactive()->create();
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/api/database/seeders/CustomerAddressSeeder.php b/api/database/seeders/CustomerAddressSeeder.php
new file mode 100644
index 000000000..4ec3385e8
--- /dev/null
+++ b/api/database/seeders/CustomerAddressSeeder.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\CustomerAddress;
+use Illuminate\Database\Seeder;
+
+class CustomerAddressSeeder extends Seeder
+{
+    public function run(?int $companyId, ?int $qtyPerCompany)
+    {
+        $query = Company::query();
+        if ($companyId) {
+            $query->where('id', '=', $companyId);
+        }
+        $companies = $query->get();
+
+        if (! $qtyPerCompany) {
+            $qtyPerCompany = 5;
+        }
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $qtyPerCompany; $i++) {
+                $customerAddressFactory = CustomerAddress::factory()->for($company);
+                $customerAddressFactory->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/CustomerGroupSeeder.php b/api/database/seeders/CustomerGroupSeeder.php
new file mode 100644
index 000000000..84f9a38c2
--- /dev/null
+++ b/api/database/seeders/CustomerGroupSeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use Illuminate\Database\Seeder;
+
+class CustomerGroupSeeder extends Seeder
+{
+    public function run(?int $customerGroupsPerCompany = null, ?int $companyId = null)
+    {
+        $customerGroupsPerCompany = $customerGroupsPerCompany ?? 5;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $customerGroupsPerCompany; $i++) {
+                CustomerGroup::factory()
+                    ->for($company)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/CustomerSeeder.php b/api/database/seeders/CustomerSeeder.php
new file mode 100644
index 000000000..bdbb1f091
--- /dev/null
+++ b/api/database/seeders/CustomerSeeder.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\Customer;
+use Illuminate\Database\Seeder;
+
+class CustomerSeeder extends Seeder
+{
+    public function run(?int $customersPerCompany = null, ?int $companyId = null)
+    {
+        $query = Company::query();
+        if ($companyId) {
+            $query->where('id', $companyId);
+        }
+        $companies = $query->get();
+
+        $customersPerCompany = $customersPerCompany ?? 5;
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $customersPerCompany; $i++) {
+                Customer::factory()
+                    ->for($company)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/EmployeeSeeder.php b/api/database/seeders/EmployeeSeeder.php
new file mode 100644
index 000000000..cfba0db76
--- /dev/null
+++ b/api/database/seeders/EmployeeSeeder.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\Employee;
+use Illuminate\Database\Seeder;
+
+class EmployeeSeeder extends Seeder
+{
+    public function run(?int $companyId, ?int $qtyPerCompany)
+    {
+        $query = Company::query();
+        if ($companyId) {
+            $query->where('id', '=', $companyId);
+        }
+        $companies = $query->get();
+
+        if (! $qtyPerCompany) {
+            $qtyPerCompany = 5;
+        }
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $qtyPerCompany; $i++) {
+                $employeeFactory = Employee::factory()->for($company);
+                $employeeFactory->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/InvestorSeeder.php b/api/database/seeders/InvestorSeeder.php
new file mode 100644
index 000000000..adbe2e850
--- /dev/null
+++ b/api/database/seeders/InvestorSeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\Investor;
+use Illuminate\Database\Seeder;
+
+class InvestorSeeder extends Seeder
+{
+    public function run(?int $investorsPerCompany = null, ?int $companyId = null)
+    {
+        $investorsPerCompany = $investorsPerCompany ?? 5;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $investorsPerCompany; $i++) {
+                Investor::factory()
+                    ->for($company)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/LaratrustSeeder.php b/api/database/seeders/LaratrustSeeder.php
index 4962ce154..1d09b7556 100644
--- a/api/database/seeders/LaratrustSeeder.php
+++ b/api/database/seeders/LaratrustSeeder.php
@@ -2,10 +2,10 @@
 
 namespace Database\Seeders;
 
-use Illuminate\Support\Facades\Schema;
 use Illuminate\Database\Seeder;
-use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Config;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Schema;
 
 class LaratrustSeeder extends Seeder
 {
@@ -21,8 +21,9 @@ public function run()
         $config = Config::get('laratrust_seeder.roles_structure');
 
         if ($config === null) {
-            $this->command->error("The configuration has not been published. Did you run `php artisan vendor:publish --tag=\"laratrust-seeder\"`");
+            $this->command->error('The configuration has not been published. Did you run `php artisan vendor:publish --tag="laratrust-seeder"`');
             $this->command->line('');
+
             return false;
         }
 
@@ -34,11 +35,11 @@ public function run()
             $role = \App\Models\Role::firstOrCreate([
                 'name' => $key,
                 'display_name' => ucwords(str_replace('_', ' ', $key)),
-                'description' => ucwords(str_replace('_', ' ', $key))
+                'description' => ucwords(str_replace('_', ' ', $key)),
             ]);
             $permissions = [];
 
-            $this->command->info('Creating Role '. strtoupper($key));
+            $this->command->info('Creating Role '.strtoupper($key));
 
             // Reading role permission modules
             foreach ($modules as $module => $value) {
@@ -48,12 +49,12 @@ public function run()
                     $permissionValue = $mapPermission->get($perm);
 
                     $permissions[] = \App\Models\Permission::firstOrCreate([
-                        'name' => $module . '-' . $permissionValue,
-                        'display_name' => ucfirst($permissionValue) . ' ' . ucfirst($module),
-                        'description' => ucfirst($permissionValue) . ' ' . ucfirst($module),
+                        'name' => $module.'-'.$permissionValue,
+                        'display_name' => ucfirst($permissionValue).' '.ucfirst($module),
+                        'description' => ucfirst($permissionValue).' '.ucfirst($module),
                     ])->id;
 
-                    $this->command->info('Creating Permission to '.$permissionValue.' for '. $module);
+                    $this->command->info('Creating Permission to '.$permissionValue.' for '.$module);
                 }
             }
 
@@ -66,7 +67,7 @@ public function run()
                 $user = \App\Models\User::create([
                     'name' => ucwords(str_replace('_', ' ', $key)),
                     'email' => $key.'@app.com',
-                    'password' => bcrypt('password')
+                    'password' => bcrypt('password'),
                 ]);
                 $user->addRole($role);
             }
@@ -77,7 +78,7 @@ public function run()
     /**
      * Truncates all the laratrust tables and the users table
      *
-     * @return  void
+     * @return void
      */
     public function truncateLaratrustTables()
     {
diff --git a/api/database/seeders/ProductCategorySeeder.php b/api/database/seeders/ProductCategorySeeder.php
new file mode 100644
index 000000000..9f814d53e
--- /dev/null
+++ b/api/database/seeders/ProductCategorySeeder.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Enums\ProductCategoryTypeEnum;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use Illuminate\Database\Seeder;
+
+class ProductCategorySeeder extends Seeder
+{
+    public function run(?int $productCategoriesPerCompany = null, ?int $companyId = null)
+    {
+        $productCategoriesPerCompany = $productCategoriesPerCompany ?? 5;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            ProductCategory::firstOrCreate(
+                [
+                    'company_id' => $company->id,
+                    'name' => 'Rokok',
+                ],
+                [
+                    'code' => 'ROKOK',
+                    'type' => ProductCategoryTypeEnum::PRODUCT,
+                ]
+            );
+
+            for ($i = 0; $i < $productCategoriesPerCompany; $i++) {
+                ProductCategory::factory()
+                    ->for($company)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/ProductSeeder.php b/api/database/seeders/ProductSeeder.php
new file mode 100644
index 000000000..e806eb14d
--- /dev/null
+++ b/api/database/seeders/ProductSeeder.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Actions\Product\ProductActions;
+use App\Enums\ProductTypeEnum;
+use App\Enums\UnitTypeEnum;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\ProductCategory;
+use App\Models\ProductUnit;
+use App\Models\Unit;
+use Illuminate\Database\Seeder;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductSeeder extends Seeder
+{
+    public function run(?int $companyId, int $qtyPerCompany = 5)
+    {
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $qtyPerCompany; $i++) {
+                $productCategory = ProductCategory::where('company_id', '=', $company->id)->inRandomOrder()->first();
+                $brand = Brand::where('company_id', '=', $company->id)->first();
+
+                $productFactory = Product::factory()
+                    ->for($company)
+                    ->for($productCategory)
+                    ->for($brand);
+
+                $productFactory->create();
+            }
+        }
+    }
+
+    public function makeRegularProduct(bool $encode)
+    {
+
+    }
+
+    public function makeProductUnits(bool $encode)
+    {
+        $company_id = Company::inRandomOrder()->first();
+        $product_category_id = ProductCategory::inRandomOrder()->where('company_id', '=', $company_id->id)->first();
+        $brand_id = Brand::inRandomOrder()->where('company_id', '=', $company_id->id)->first();
+
+        for ($i = 0; $i < 5; $i++) {
+            $product_category_id = ProductCategory::inRandomOrder()->where('company_id', '=', $company_id->id)->first();
+            $brand_id = Brand::inRandomOrder()->where('company_id', '=', $company_id->id)->first();
+        }
+
+        $product = Product::factory()
+            ->make([
+                'company_id' => $company_id->id,
+                'product_category_id' => $encode ? Hashids::encode($product_category_id->id) : $product_category_id->id,
+                'brand_id' => $encode ? Hashids::encode($brand_id->id) : $brand_id->id,
+                'code' => 'AUTO',
+            ]);
+
+        $units = Unit::whereRelation('company', 'id', $company_id->id)
+            ->where('type', '=', UnitTypeEnum::PRODUCT->value)
+            ->inRandomOrder()->get();
+        $shuffledUnits = $units->shuffle();
+
+        $productUnitCount = random_int(1, $units->count());
+        $primaryUnitIdx = random_int(0, $productUnitCount - 1);
+
+        for ($j = 0; $j < $productUnitCount; $j++) {
+            $product = $product->has(
+                ProductUnit::factory()
+                    ->for($company_id)->for($shuffledUnits[$j])
+                    ->setConversionValue($j == 0 ? 1 : random_int(2, 10))
+                    ->setIsPrimaryUnit($j == $primaryUnitIdx)
+            );
+        }
+
+        return $product;
+    }
+
+    public function create()
+    {
+        $productActions = new ProductActions();
+
+        $data = $this->make(encode: false)->toArray();
+        $product = ($data['type'] ?? null) === ProductTypeEnum::SERVICE->value
+            ? $productActions->createService($data)
+            : $productActions->createProduct($data);
+
+        $product = Product::with('company', 'productCategory', 'brand', 'productUnits.unit')->find($product->id);
+
+        return $product;
+    }
+}
diff --git a/api/database/seeders/RoleTableSeeder.php b/api/database/seeders/RoleSeeder.php
similarity index 96%
rename from api/database/seeders/RoleTableSeeder.php
rename to api/database/seeders/RoleSeeder.php
index a561d3c24..8043cf74b 100644
--- a/api/database/seeders/RoleTableSeeder.php
+++ b/api/database/seeders/RoleSeeder.php
@@ -7,7 +7,7 @@
 use Exception;
 use Illuminate\Database\Seeder;
 
-class RoleTableSeeder extends Seeder
+class RoleSeeder extends Seeder
 {
     /**
      * Run the database seeds.
diff --git a/api/database/seeders/StockAdjustmentCategorySeeder.php b/api/database/seeders/StockAdjustmentCategorySeeder.php
new file mode 100644
index 000000000..2743fa617
--- /dev/null
+++ b/api/database/seeders/StockAdjustmentCategorySeeder.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\StockAdjustmentCategory;
+use Illuminate\Database\Seeder;
+
+class StockAdjustmentCategorySeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run(?int $stockAdjustmentCategoriesPerCompany = null, ?int $companyId = null)
+    {
+        $stockAdjustmentCategoriesPerCompany = $stockAdjustmentCategoriesPerCompany ?? 5;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $stockAdjustmentCategoriesPerCompany; $i++) {
+                StockAdjustmentCategory::factory()
+                    ->for($company)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/StockAdjustmentSeeder.php b/api/database/seeders/StockAdjustmentSeeder.php
new file mode 100644
index 000000000..21a0baebc
--- /dev/null
+++ b/api/database/seeders/StockAdjustmentSeeder.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\StockAdjustment;
+use App\Models\StockAdjustmentCategory;
+use App\Models\Warehouse;
+use Illuminate\Database\Seeder;
+
+class StockAdjustmentSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(?int $companyId = null, ?int $qtyPerCompany = null): void
+    {
+        $query = Company::query();
+        if ($companyId) {
+            $query->where('id', '=', $companyId);
+        }
+        $companies = $query->get();
+
+        if (! $qtyPerCompany) {
+            $qtyPerCompany = 5;
+        }
+
+        foreach ($companies as $company) {
+            $branch = Branch::where('company_id', $company->id)->inRandomOrder()->first();
+            if (! $branch) {
+                $branch = Branch::factory()->create(['company_id' => $company->id]);
+            }
+
+            $category = StockAdjustmentCategory::where('company_id', $company->id)->inRandomOrder()->first();
+            if (! $category) {
+                $category = StockAdjustmentCategory::factory()->create(['company_id' => $company->id]);
+            }
+
+            $warehouse = Warehouse::where('company_id', $company->id)->where('branch_id', $branch->id)->inRandomOrder()->first();
+            if (! $warehouse) {
+                $warehouse = Warehouse::factory()->create(['company_id' => $company->id, 'branch_id' => $branch->id]);
+            }
+
+            for ($i = 0; $i < $qtyPerCompany; $i++) {
+                $factory = StockAdjustment::factory()
+                    ->for($company)
+                    ->for($branch)
+                    ->for($category, 'category');
+
+                // Randomize type: IN, OUT, or BOTH
+                $type = fake()->randomElement(['in', 'out', 'both']);
+
+                if ($type === 'in' || $type === 'both') {
+                    $factory = $factory
+                        ->for($warehouse, 'inWarehouse')
+                        ->withInProducts(rand(1, 3));
+                }
+
+                if ($type === 'out' || $type === 'both') {
+                    $factory = $factory
+                        ->for($warehouse, 'outWarehouse')
+                        ->withOutProducts(rand(1, 3));
+                }
+
+                $factory->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/StockTransferItemSeeder.php b/api/database/seeders/StockTransferItemSeeder.php
new file mode 100644
index 000000000..9391bb69a
--- /dev/null
+++ b/api/database/seeders/StockTransferItemSeeder.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\StockTransferItem;
+use Illuminate\Database\Seeder;
+
+class StockTransferItemSeeder extends Seeder
+{
+    public function run(?int $companyId, ?int $qtyPerCompany)
+    {
+        $query = Company::query();
+        if ($companyId) {
+            $query->where('id', '=', $companyId);
+        }
+        $companies = $query->get();
+
+        if (! $qtyPerCompany) {
+            $qtyPerCompany = 5;
+        }
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $qtyPerCompany; $i++) {
+                $stockTransferItemFactory = StockTransferItem::factory()->for($company);
+                $stockTransferItemFactory->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/StockTransferItemSerialSeeder.php b/api/database/seeders/StockTransferItemSerialSeeder.php
new file mode 100644
index 000000000..0deb9dd73
--- /dev/null
+++ b/api/database/seeders/StockTransferItemSerialSeeder.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\StockTransferItemSerial;
+use Illuminate\Database\Seeder;
+
+class StockTransferItemSerialSeeder extends Seeder
+{
+    public function run(?int $companyId, ?int $qtyPerCompany)
+    {
+        $query = Company::query();
+        if ($companyId) {
+            $query->where('id', '=', $companyId);
+        }
+        $companies = $query->get();
+
+        if (! $qtyPerCompany) {
+            $qtyPerCompany = 5;
+        }
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $qtyPerCompany; $i++) {
+                $stockTransferItemSerialFactory = StockTransferItemSerial::factory()->for($company);
+                $stockTransferItemSerialFactory->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/StockTransferSeeder.php b/api/database/seeders/StockTransferSeeder.php
new file mode 100644
index 000000000..56c70c0f9
--- /dev/null
+++ b/api/database/seeders/StockTransferSeeder.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\StockTransfer;
+use Illuminate\Database\Seeder;
+
+class StockTransferSeeder extends Seeder
+{
+    public function run(?int $companyId, ?int $qtyPerCompany)
+    {
+        $query = Company::query();
+        if ($companyId) {
+            $query->where('id', '=', $companyId);
+        }
+        $companies = $query->get();
+
+        if (! $qtyPerCompany) {
+            $qtyPerCompany = 5;
+        }
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $qtyPerCompany; $i++) {
+                $stockTransferFactory = StockTransfer::factory()->for($company);
+                $stockTransferFactory->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/SupplierSeeder.php b/api/database/seeders/SupplierSeeder.php
new file mode 100644
index 000000000..e4f0eec4d
--- /dev/null
+++ b/api/database/seeders/SupplierSeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\Supplier;
+use Illuminate\Database\Seeder;
+
+class SupplierSeeder extends Seeder
+{
+    public function run(?int $suppliersPerCompany = null, ?int $companyId = null)
+    {
+        $suppliersPerCompany = $suppliersPerCompany ?? 5;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            for ($i = 0; $i < $suppliersPerCompany; $i++) {
+                Supplier::factory()
+                    ->for($company)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/UnitSeeder.php b/api/database/seeders/UnitSeeder.php
new file mode 100644
index 000000000..d16b17397
--- /dev/null
+++ b/api/database/seeders/UnitSeeder.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Company;
+use App\Models\Unit;
+use Illuminate\Database\Seeder;
+
+class UnitSeeder extends Seeder
+{
+    public function run(?int $unitsPerCompany = null, ?int $companyId = null)
+    {
+        $unitsPerCompany = $unitsPerCompany ?? 5;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        $requiredUnits = ['PCS', 'GRAM', 'METER', 'PACK', 'LSN', 'KRT', 'BKS', 'SLOP'];
+
+        foreach ($companies as $company) {
+            foreach ($requiredUnits as $unitName) {
+                $exists = Unit::where('company_id', $company->id)->where('name', $unitName)->exists();
+                if (! $exists) {
+                    Unit::factory()
+                        ->for($company)
+                        ->create([
+                            'name' => $unitName,
+                            'code' => $unitName,
+                        ]);
+                }
+            }
+
+            $currentCount = Unit::where('company_id', $company->id)->count();
+            if ($currentCount < $unitsPerCompany) {
+                Unit::factory()
+                    ->count($unitsPerCompany - $currentCount)
+                    ->for($company)
+                    ->create();
+            }
+        }
+    }
+}
diff --git a/api/database/seeders/UserTableSeeder.php b/api/database/seeders/UserSeeder.php
similarity index 97%
rename from api/database/seeders/UserTableSeeder.php
rename to api/database/seeders/UserSeeder.php
index f940b64f2..8ce6d239a 100644
--- a/api/database/seeders/UserTableSeeder.php
+++ b/api/database/seeders/UserSeeder.php
@@ -10,7 +10,7 @@
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Schema;
 
-class UserTableSeeder extends Seeder
+class UserSeeder extends Seeder
 {
     /**
      * Run the database seeds.
diff --git a/api/database/seeders/WarehouseSeeder.php b/api/database/seeders/WarehouseSeeder.php
new file mode 100644
index 000000000..e67bee180
--- /dev/null
+++ b/api/database/seeders/WarehouseSeeder.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\Warehouse;
+use Illuminate\Database\Seeder;
+
+class WarehouseSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(?int $warehousesPerCompany = null, ?int $companyId = null)
+    {
+        $warehousesPerCompany = $warehousesPerCompany ?? 1;
+
+        $companies = $companyId ? Company::where('id', $companyId)->get() : Company::all();
+
+        foreach ($companies as $company) {
+            $branch = Branch::where('company_id', $company->id)->inRandomOrder()->first();
+
+            for ($i = 0; $i < $warehousesPerCompany; $i++) {
+                $warehouse = Warehouse::factory()
+                    ->for($company)
+                    ->for($branch);
+
+                random_int(0, 1) ? $warehouse->setStatusActive() : $warehouse->setStatusInactive();
+
+                $warehouse->create();
+            }
+        }
+    }
+}
diff --git a/api/lang/en/rules.php b/api/lang/en/rules.php
index f75e6e22d..e0ab33128 100644
--- a/api/lang/en/rules.php
+++ b/api/lang/en/rules.php
@@ -2,12 +2,66 @@
 
 return [
     'unique_code' => 'The Code has already been taken',
+    'unique_name' => 'The Name has already been taken',
+    'unique_address' => 'The Address has already been taken',
     'valid_dropdown' => 'Invalid value',
     'valid_company' => 'Invalid company value',
     'valid_branch' => 'Invalid branch value',
+    'valid_warehouse' => 'Invalid warehouse value',
+    'valid_stock_adjustment_in_item' => 'Invalid stock adjustment in item value',
+    'valid_stock_adjustment_out_item' => 'Invalid stock adjustment out item value',
+    'valid_customer_group' => 'Invalid customer group value',
+    'valid_customer' => 'Invalid customer value',
+    'valid_supplier' => 'Invalid supplier value',
+    'valid_cash_account' => 'Invalid cash account value',
     'too_many_tokens' => 'Too many token request',
     'must_reset_password' => 'Require to reset the password',
     'inactive_user' => 'Your profile status is inactive',
+    'purchase_order' => [
+        'exceed_available_down_payment' => 'Total down payment refund exceeds the available down payment',
+        'duplicate_product' => 'The same product cannot be used more than once within a single purchase order.',
+        'invalid_global_discount_reference' => 'The selected global discount is invalid for this purchase order.',
+        'invalid_delete_item_reference' => 'The selected delete item id is invalid for this purchase order.',
+        'invalid_item_reference' => 'The selected item is invalid for this purchase order.',
+        'invalid_product_unit_price_discount_reference' => 'The selected item unit price discount is invalid for this purchase order.',
+        'invalid_subtotal_discount_reference' => 'The selected item subtotal discount is invalid for this purchase order.',
+        'invalid_down_payment_reference' => 'The selected down payment is invalid for this purchase order.',
+        'invalid_refunded_down_payment_reference' => 'The selected refunded down payment is invalid for this purchase order.',
+    ],
+    'purchase' => [
+        'invalid_delete_item_reference' => 'The selected delete item id is invalid for this purchase.',
+        'invalid_item_reference' => 'The selected item is invalid for this purchase.',
+        'purchase_order_supplier_must_match' => 'Supplier must match the selected purchase order.',
+        'purchase_order_branch_must_match' => 'Branch must match the selected purchase order.',
+        'purchase_order_item_must_be_empty_without_purchase_order' => 'Purchase order item must be empty when purchase order is not selected.',
+        'invalid_purchase_order_item_reference' => 'The selected purchase order item is invalid for this purchase order.',
+        'invalid_product_unit_price_discount_reference' => 'The selected item unit price discount is invalid for this purchase.',
+        'invalid_subtotal_discount_reference' => 'The selected item subtotal discount is invalid for this purchase.',
+        'invalid_global_discount_reference' => 'The selected global discount is invalid for this purchase.',
+        'invalid_additional_cost_reference' => 'The selected additional cost is invalid for this purchase.',
+        'manual_receipt_id_must_be_empty_on_store' => 'Manual receipt id must be empty when creating a purchase.',
+        'invalid_manual_receipt_reference' => 'The selected manual receipt is invalid for this purchase.',
+        'duplicate_manual_receipt_reference' => 'The same manual receipt cannot be used more than once in a single request.',
+        'invalid_purchase_item_index' => 'The selected purchase item index is invalid.',
+        'additional_cost_amount_total_must_be_positive' => 'Either immediate payment or payable amount must be greater than zero.',
+        'duplicate_product' => 'The same product cannot be used more than once within a single purchase.',
+        'duplicate_serial' => 'The same serial cannot be used more than once within a single purchase item.',
+    ],
+    'purchase_receipt' => [
+        'direct_mode_is_managed_from_purchase' => 'Direct purchase receipt must be managed from purchase.',
+        'supplier_must_match_purchase' => 'Supplier must match the linked purchase.',
+        'branch_must_match_purchase' => 'Branch must match the linked purchase.',
+        'purchase_branch_must_match_receipt_branch' => 'Purchase branch must match the purchase receipt branch.',
+        'direct_mode_cannot_be_deleted_here' => 'Direct purchase receipt cannot be deleted from purchase receipt management.',
+        'invalid_delete_item_reference' => 'The selected delete item id is invalid for this purchase receipt.',
+        'invalid_item_reference' => 'The selected item is invalid for this purchase receipt.',
+        'invalid_serial_reference' => 'The selected serial is invalid for this purchase receipt item.',
+        'duplicate_product' => 'The same product cannot be used more than once within a single purchase receipt.',
+        'duplicate_serial' => 'The same serial cannot be used more than once within a single purchase receipt item.',
+    ],
+    'purchase_additional_cost' => [
+        'amount_total_must_be_positive' => 'Either immediate payment or payable amount must be greater than zero.',
+    ],
     'company' => [
         'deactivate_default_company' => 'Default company cannot be deactivated',
         'delete_default_company' => 'Default company cannot be deleted',
@@ -17,4 +71,118 @@
         'delete_main_branch' => 'Main branch cannot be deleted',
         'set_branch_to_non_main' => 'Set branch to non main is not permitted',
     ],
+    'expense_category' => [
+        'parent_must_be_active' => 'Parent expense category must be active.',
+        'cannot_delete_with_children' => 'Expense category cannot be deleted because it still has child categories.',
+        'must_not_have_children' => 'Expense category must be a category without child categories.',
+        'category_type_required_without_parent' => 'Category type is required when parent is empty.',
+        'category_type_must_follow_parent' => 'Category type must follow the selected parent.',
+    ],
+    'income_category' => [
+        'parent_must_be_active' => 'Parent income category must be active.',
+        'cannot_delete_with_children' => 'Income category cannot be deleted because it still has child categories.',
+        'must_not_have_children' => 'Income category must be a category without child categories.',
+    ],
+    'chart_of_account' => [
+        'parent_must_be_group' => 'Parent account must be a group account.',
+        'parent_must_not_be_self' => 'Parent account must not reference itself.',
+        'parent_must_not_be_descendant' => 'Parent account must not come from this account descendant.',
+        'parent_is_required_for_account_type' => 'A parent account must be selected so account type can be derived automatically.',
+        'cannot_delete_with_children' => 'Chart of account cannot be deleted because it still has child accounts.',
+        'non_group_must_not_have_children' => 'Non-group account must not still have child accounts.',
+        'system_scope_requires_system_key' => 'System key is required for accounts with system scope.',
+        'user_scope_must_not_have_system_key' => 'System key can only be used for accounts with system scope.',
+        'source_type_and_source_id_must_be_paired' => 'Source type and source id must be filled as a pair.',
+    ],
+    'journal_entry' => [
+        'source_type_and_source_id_must_be_paired' => 'Source type and source id must be filled as a pair.',
+        'item_must_have_single_side_amount' => 'Each journal item may only contain debit or credit amount.',
+        'total_must_be_positive' => 'Journal total debit and credit must be greater than zero.',
+        'total_debit_and_credit_must_balance' => 'Journal total debit and credit must be balanced.',
+        'account_must_not_be_group' => 'Journal account must not be a group account.',
+        'account_must_be_active' => 'Journal account must be active.',
+    ],
+    'expense' => [
+        'amount_total_must_be_positive' => 'Either immediate payment or payable amount must be greater than zero.',
+        'payments_exceed_amount_payable' => 'Total payable payments must not exceed the payable amount.',
+        'invalid_payment_reference' => 'Expense payment data is invalid for this expense.',
+    ],
+    'income' => [
+        'amount_total_must_be_positive' => 'Either immediate receipt or receivable amount must be greater than zero.',
+        'payments_exceed_amount_receivable' => 'Total receivable payments must not exceed the receivable amount.',
+        'invalid_payment_reference' => 'Income payment data is invalid for this income.',
+    ],
+    'prepaid_expense' => [
+        'amount_total_must_be_positive' => 'Either immediate payment or payable amount must be greater than zero.',
+        'payments_exceed_amount_payable' => 'Total payable payments must not exceed the payable amount.',
+        'invalid_payment_reference' => 'Prepaid expense payment data is invalid for this prepaid expense.',
+    ],
+    'debt' => [
+        'amount_total_must_be_positive' => 'Either direct amount received or opening amount due must be greater than zero.',
+        'payments_exceed_total_debt' => 'Total debt payments must not exceed the total debt.',
+        'invalid_payment_reference' => 'Debt payment data is invalid for this debt.',
+        'party_must_be_single' => 'Choose only one party, either creditor or supplier.',
+        'party_is_required' => 'A creditor or supplier must be selected.',
+        'cash_account_is_required_for_direct_amount_received' => 'Cash account is required when direct amount received is filled.',
+        'direct_amount_received_is_required_for_cash_account' => 'Direct amount received must be greater than zero when cash account is selected.',
+    ],
+    'debt_payment' => [
+        'invalid_debt_reference' => 'Debt data is invalid for the selected branch.',
+    ],
+    'receivable' => [
+        'amount_total_must_be_positive' => 'Either direct amount received or opening amount due must be greater than zero.',
+        'payments_exceed_total_receivable' => 'Total receivable payments must not exceed the total receivable.',
+        'invalid_payment_reference' => 'Receivable payment data is invalid for this transaction.',
+        'cash_account_is_required_for_direct_amount_received' => 'Cash account is required when direct amount received is filled.',
+        'direct_amount_received_is_required_for_cash_account' => 'Direct amount received must be greater than zero when cash account is selected.',
+    ],
+    'receivable_payment' => [
+        'invalid_receivable_reference' => 'Receivable data is invalid for the selected branch.',
+    ],
+    'prepaid_income' => [
+        'amount_total_must_be_positive' => 'Either immediate receipt or receivable amount must be greater than zero.',
+        'payments_exceed_amount_receivable' => 'Total receivable payments must not exceed the receivable amount.',
+        'invalid_payment_reference' => 'Prepaid income payment data is invalid for this prepaid income.',
+    ],
+    'stock_adjustment' => [
+        'invalid_in_item_reference' => 'Incoming item data is invalid for this stock adjustment.',
+        'invalid_out_item_reference' => 'Outgoing item data is invalid for this stock adjustment.',
+        'invalid_in_item_serial_reference' => 'Incoming item serial data is invalid for this stock adjustment.',
+        'invalid_out_item_serial_reference' => 'Outgoing item serial data is invalid for this stock adjustment.',
+    ],
+    'asset_adjustment' => [
+        'invalid_in_item_reference' => 'Incoming asset item data is invalid for this asset adjustment.',
+        'invalid_out_item_reference' => 'Outgoing asset item data is invalid for this asset adjustment.',
+        'invalid_in_item_serial_reference' => 'Incoming asset serial data is invalid for this asset adjustment.',
+        'invalid_out_item_serial_reference' => 'Outgoing asset serial data is invalid for this asset adjustment.',
+    ],
+    'asset_purchase' => [
+        'invalid_item_reference' => 'Asset item data is invalid for this asset purchase.',
+        'invalid_item_serial_reference' => 'Asset serial data is invalid for this asset purchase item.',
+    ],
+    'asset_sale' => [
+        'invalid_item_reference' => 'Asset item data is invalid for this asset sale.',
+        'invalid_item_serial_reference' => 'Asset serial data is invalid for this asset sale item.',
+    ],
+    'stock_transfer' => [
+        'serial_base_qty_must_be_integer' => 'Base qty must be an integer for serial products.',
+        'serial_count_must_match_base_qty' => 'The serial count must match the base qty.',
+    ],
+    'product' => [
+        'unit' => [
+            'duplicate_conversion' => 'Within one product, conversion values must be unique.',
+            'duplicate_unit' => 'Within one product, units must be unique.',
+            'single_base' => 'Within one product, there must be exactly one base unit.',
+            'single_primary' => 'Within one product, there must be exactly one primary unit.',
+            'duplicate_code' => 'Within one product, product unit code (SKU) must be unique.',
+            'base_conversion_must_be_one' => 'Conversion value for the base unit must be 1.',
+            'non_base_conversion_must_gt_one' => 'Conversion value for non-base units must be greater than 1.',
+            'base_price_inconsistent' => 'Base unit price is inconsistent across units.',
+            'cannot_delete_base_unit' => 'Base unit cannot be deleted.',
+        ],
+        'vat' => [
+            'must_be_zero_if_not_taxable' => 'VAT rate must be 0 when product is not taxable.',
+            'out_of_range' => 'VAT rate must be between 0 and 100.',
+        ],
+    ],
 ];
diff --git a/api/lang/en/validation.php b/api/lang/en/validation.php
index aea190d40..474f2451a 100644
--- a/api/lang/en/validation.php
+++ b/api/lang/en/validation.php
@@ -176,6 +176,52 @@
         ],
     ],
 
+    'stock_adjustment_in_item' => [
+        'base_qty_must_be_integer' => 'Qty x product unit conversion value for serialized product must be an integer.',
+        'serial_count_not_match_qty' => 'The number of serials must match qty x product unit conversion value.',
+    ],
+    'stock_adjustment_out_item' => [
+        'base_qty_must_be_integer' => 'Qty x product unit conversion value for serialized product must be an integer.',
+        'serial_count_not_match_qty' => 'The number of serials must match qty x product unit conversion value.',
+    ],
+    'stock_adjustment' => [
+        'same_warehouse_same_product_not_allowed' => 'The same product cannot appear in both incoming and outgoing items when the warehouse is the same.',
+    ],
+    'asset_adjustment' => [
+        'at_least_one_item' => 'At least one incoming asset item or outgoing asset item is required.',
+        'duplicate_serial_in_transaction' => 'The same serial cannot be used more than once within a single asset adjustment.',
+    ],
+    'asset_adjustment_in_item' => [
+        'qty_must_be_integer' => 'Incoming asset qty must be an integer.',
+        'serial_count_not_match_qty' => 'The number of incoming asset serials must match qty.',
+        'serial_already_active' => 'The incoming asset serial is already active and cannot be added again.',
+    ],
+    'asset_adjustment_out_item' => [
+        'qty_must_be_integer' => 'Outgoing asset qty must be an integer.',
+        'serial_count_not_match_qty' => 'The number of outgoing asset serials must match qty.',
+        'serial_not_found' => 'The outgoing asset serial was not found or is already inactive.',
+        'serial_asset_mismatch' => 'The outgoing asset serial does not match the selected asset.',
+    ],
+    'asset_purchase' => [
+        'at_least_one_item' => 'At least one purchased asset item is required.',
+        'duplicate_serial_in_transaction' => 'The same serial cannot be used more than once within a single asset purchase.',
+    ],
+    'asset_purchase_item' => [
+        'qty_must_be_integer' => 'Purchased asset qty must be an integer.',
+        'serial_count_not_match_qty' => 'The number of purchased asset serials must match qty.',
+        'serial_already_active' => 'The purchased asset serial is already active and cannot be used again.',
+    ],
+    'asset_sale' => [
+        'at_least_one_item' => 'At least one sold asset item is required.',
+        'duplicate_serial_in_transaction' => 'The same serial cannot be used more than once within a single asset sale.',
+    ],
+    'asset_sale_item' => [
+        'qty_must_be_integer' => 'Sold asset qty must be an integer.',
+        'serial_count_not_match_qty' => 'The number of sold asset serials must match qty.',
+        'serial_not_found' => 'The sold asset serial was not found or is already inactive.',
+        'serial_asset_mismatch' => 'The sold asset serial does not match the selected asset.',
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Custom Validation Attributes
diff --git a/api/lang/en/validation_attributes.php b/api/lang/en/validation_attributes.php
index 8caf3c514..af8565314 100644
--- a/api/lang/en/validation_attributes.php
+++ b/api/lang/en/validation_attributes.php
@@ -10,6 +10,7 @@
         'country' => 'Country',
         'status' => 'Status',
     ],
+
     'company' => [
         'company' => 'Company',
         'code' => 'Code',
@@ -29,4 +30,702 @@
         'remarks' => 'Remarks',
         'status' => 'Status',
     ],
+    'warehouse' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'code' => 'Code',
+        'name' => 'Name',
+        'address' => 'Address',
+        'city' => 'City',
+        'contact' => 'Contact',
+        'remarks' => 'Remarks',
+        'status' => 'Status',
+    ],
+
+    'investor' => [
+        'company' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'remarks' => 'Remarks',
+    ],
+    'cash_account' => [
+        'company' => 'Company',
+        'branch' => 'Branch',
+        'code' => 'Code',
+        'name' => 'Name',
+        'is_bank' => 'Is Bank',
+        'is_active' => 'Is Active',
+        'remarks' => 'Remarks',
+    ],
+    'chart_of_account' => [
+        'company_id' => 'Company',
+        'scope' => 'Scope',
+        'system_key' => 'System Key',
+        'parent_id' => 'Parent Account',
+        'source_type' => 'Source Type',
+        'source_id' => 'Source ID',
+        'code' => 'Code',
+        'name' => 'Name',
+        'account_type' => 'Account Type',
+        'normal_balance' => 'Normal Balance',
+        'is_group' => 'Group',
+        'is_active' => 'Active',
+        'remarks' => 'Remarks',
+    ],
+    'journal_entry' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'journal_type' => 'Journal Type',
+        'source_type' => 'Source Type',
+        'source_id' => 'Source ID',
+        'reference_no' => 'Reference No',
+        'remarks' => 'Remarks',
+        'items' => 'Journal Items',
+    ],
+    'journal_entry_item' => [
+        'chart_of_account_id' => 'Account',
+        'debit' => 'Debit',
+        'credit' => 'Credit',
+        'remarks' => 'Item Remarks',
+    ],
+
+    'product_category' => [
+        'company' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+    ],
+    'brand' => [
+        'company' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+    ],
+    'unit' => [
+        'company' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'description' => 'Description',
+        'type' => 'Type',
+    ],
+    'product' => [
+        'company' => 'Company',
+        'product_category' => 'Product Category',
+        'brand' => 'Brand',
+        'default_vat_profile' => 'VAT Profile',
+        'code' => 'Code',
+        'name' => 'Name',
+        'product_type' => 'Product Type',
+        'taxable_supply' => 'Taxable Supply',
+        'standard_rated_supply' => 'Standard Rated Supply',
+        'price_include_vat' => 'Price Include VAT',
+        'point' => 'Point',
+        'use_serial_number' => 'Use Serial Number',
+        'has_expiry_date' => 'Has Expiry Date',
+        'type' => 'Type',
+        'remarks' => 'Remarks',
+        'status' => 'Status',
+        'product_units' => [
+            'product_unit' => 'Product Unit',
+            'unit' => 'Product Unit Unit',
+            'code' => 'Product Unit Code',
+            'is_base' => 'Product Unit Is Base',
+            'conversion_value' => 'Product Unit Conversion Value',
+            'is_primary_unit' => 'Product Unit Primary',
+            'remarks' => 'Product Unit Remarks',
+        ],
+    ],
+    'supplier' => [
+        'company' => 'Company',
+        'user' => 'User',
+        'code' => 'Code',
+        'name' => 'Name',
+        'address' => 'Address',
+        'city' => 'City',
+        'payment_term_type' => 'Payment Term Type',
+        'payment_term' => 'Payment Term',
+        'taxable_enterprise' => 'Taxable Enterprise',
+        'tax_id' => 'Tax ID',
+        'status' => 'Status',
+        'remarks' => 'Remarks',
+    ],
+
+    'customer_group' => [
+        'company' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'max_open_invoice' => 'Max Open Invoice',
+        'max_outstanding_invoice' => 'Max Outstanding Invoice',
+        'max_invoice_age' => 'Max Invoice Age',
+        'payment_term_type' => 'Payment Term Type',
+        'payment_term' => 'Payment Term',
+        'selling_point' => 'Selling Point',
+        'selling_point_multiple' => 'Selling Point Multiple',
+        'sell_at_cost' => 'Sell At Cost',
+        'price_markup_percent' => 'Price Markup Percent',
+        'price_markup_nominal' => 'Price Markup Nominal',
+        'price_markdown_percent' => 'Price Markdown Percent',
+        'price_markdown_nominal' => 'Price Markdown Nominal',
+        'rounding_type' => 'Rounding Type',
+        'rounding_digit' => 'Rounding Digit',
+        'remarks' => 'Remarks',
+    ],
+    'customer' => [
+        'company' => 'Company',
+        'customer_group' => 'Customer Group',
+        'user' => 'User',
+        'code' => 'Code',
+        'is_member' => 'Member',
+        'name' => 'Name',
+        'zone' => 'Zone',
+        'max_open_invoice' => 'Max Open Invoice',
+        'max_outstanding_invoice' => 'Max Outstanding Invoice',
+        'max_invoice_age' => 'Max Invoice Age',
+        'payment_term_type' => 'Payment Term Type',
+        'payment_term' => 'Payment Term',
+        'taxable_enterprise' => 'Taxable Enterprise',
+        'tax_id' => 'Tax ID',
+        'status' => 'Status',
+        'remarks' => 'Remarks',
+    ],
+
+    'stock_adjustment_category' => [
+        'company' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+    ],
+
+    'vat_profile' => [
+        'company' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'vat_rate' => 'VAT Rate',
+        'vat_base_numerator' => 'VAT Base Numerator',
+        'vat_base_denominator' => 'VAT Base Denominator',
+        'remarks' => 'Remarks',
+        'is_active' => 'Active Status',
+    ],
+
+    'stock_adjustment' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'in_warehouse_id' => 'In Warehouse',
+        'out_warehouse_id' => 'Out Warehouse',
+        'category_id' => 'Category',
+        'remarks' => 'Remarks',
+        'is_posted' => 'Is Posted',
+        'total_incoming_item_qty' => 'Total Incoming Product Qty',
+        'total_incoming_item_cogs' => 'Total Incoming Product COGS',
+        'total_outgoing_item_qty' => 'Total Outgoing Product Qty',
+    ],
+
+    'stock_adjustment_in_item' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'stock_adjustment_id' => 'Stock Adjustment',
+        'qty' => 'Qty',
+        'product_unit_id' => 'Product Unit',
+        'product_unit_conversion_value' => 'Product Unit Conversion Value',
+        'product_unit_cogs' => 'Product Unit COGS',
+        'product_unit_total_cogs' => 'Product Unit Total COGS',
+        'remarks' => 'Remarks',
+    ],
+
+    'stock_adjustment_in_item_serial' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'stock_adjustment_id' => 'Stock Adjustment',
+        'stock_adjustment_in_item_id' => 'Stock Adjustment In Item',
+        'serial' => 'Serial',
+    ],
+
+    'stock_adjustment_out_item' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'stock_adjustment_id' => 'Stock Adjustment',
+        'qty' => 'Qty',
+        'product_id' => 'Product',
+        'product_unit_id' => 'Product Unit',
+        'product_unit_conversion_value' => 'Product Unit Conversion Value',
+        'remarks' => 'Remarks',
+    ],
+
+    'stock_adjustment_out_item_serial' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'stock_adjustment_id' => 'Stock Adjustment',
+        'stock_adjustment_out_item_id' => 'Stock Adjustment Out Item',
+        'serial' => 'Serial',
+    ],
+
+    'capital_opening' => [
+        'company' => 'Company',
+        'branch' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'investor' => 'Investor',
+        'cash_account' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'capital_transaction' => [
+        'company' => 'Company',
+        'branch' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'investor' => 'Investor',
+        'cash_account' => 'Cash Account',
+        'type' => 'Type',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'cash_transfer' => [
+        'company' => 'Company',
+        'branch' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'source_cash_account' => 'Source Cash Account',
+        'destination_cash_account' => 'Destination Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'stock_transfer' => [
+        'company_id' => 'Company Id',
+        'branch_id' => 'Branch Id',
+        'code' => 'Code',
+        'date' => 'Date',
+        'source_warehouse_id' => 'Source Warehouse Id',
+        'destination_warehouse_id' => 'Destination Warehouse Id',
+        'remarks' => 'Remarks',
+        'is_posted' => 'Is Posted',
+    ],
+    'stock_transfer_item' => [
+        'company' => 'Company',
+        'branch' => 'Branch',
+        'stock_transfer' => 'Stock Transfer',
+        'qty' => 'Qty',
+        'product_unit' => 'Product Unit',
+        'product_unit_conversion_value' => 'Product Unit Conversion Value',
+        'remarks' => 'Remarks',
+    ],
+    'stock_transfer_item_serial' => [
+        'company' => 'Company',
+        'branch' => 'Branch',
+        'stock_transfer' => 'Stock Transfer',
+        'stock_transfer_item' => 'Stock Transfer by Item',
+        'serial' => 'Serial',
+    ],
+    'purchase_order' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'supplier_id' => 'Supplier',
+        'remarks' => 'Remarks',
+    ],
+    'purchase_order_global_discount' => [
+        'sequence' => 'Sequence',
+        'discount_type' => 'Discount Type',
+        'discount_value' => 'Discount Value',
+    ],
+    'purchase_additional_cost_category' => [
+        'company_id' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+    ],
+    'expense_category' => [
+        'company_id' => 'Company',
+        'parent_id' => 'Parent',
+        'category_type' => 'Category Type',
+        'code' => 'Code',
+        'name' => 'Name',
+        'sequence' => 'Sequence',
+    ],
+    'income_category' => [
+        'company_id' => 'Company',
+        'parent_id' => 'Parent',
+        'code' => 'Code',
+        'name' => 'Name',
+        'sequence' => 'Sequence',
+    ],
+    'debt_category' => [
+        'company_id' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'sequence' => 'Sequence',
+    ],
+    'asset_category' => [
+        'company_id' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'estimated_useful_life_months' => 'Estimated Useful Life (Months)',
+        'remarks' => 'Remarks',
+    ],
+    'asset_unit' => [
+        'company_id' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'description' => 'Description',
+    ],
+    'asset' => [
+        'company_id' => 'Company',
+        'asset_category_id' => 'Asset Category',
+        'asset_unit_id' => 'Asset Unit',
+        'code' => 'Code',
+        'name' => 'Name',
+        'status' => 'Status',
+        'remarks' => 'Remarks',
+    ],
+    'asset_adjustment' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'remarks' => 'Remarks',
+        'is_posted' => 'Is Posted',
+        'total_incoming_asset_qty' => 'Total Incoming Asset Qty',
+        'total_outgoing_asset_qty' => 'Total Outgoing Asset Qty',
+    ],
+    'asset_adjustment_in_item' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'asset_adjustment_id' => 'Asset Adjustment',
+        'asset_id' => 'Asset',
+        'qty' => 'Qty',
+        'remarks' => 'Remarks',
+    ],
+    'asset_adjustment_in_item_serial' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'asset_adjustment_id' => 'Asset Adjustment',
+        'asset_adjustment_in_item_id' => 'Asset Adjustment In Item',
+        'serial' => 'Serial',
+    ],
+    'asset_adjustment_out_item' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'asset_adjustment_id' => 'Asset Adjustment',
+        'asset_id' => 'Asset',
+        'qty' => 'Qty',
+        'remarks' => 'Remarks',
+    ],
+    'asset_adjustment_out_item_serial' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'asset_adjustment_id' => 'Asset Adjustment',
+        'asset_adjustment_out_item_id' => 'Asset Adjustment Out Item',
+        'serial' => 'Serial',
+    ],
+    'asset_purchase' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'supplier_id' => 'Supplier',
+        'remarks' => 'Remarks',
+        'is_posted' => 'Posted',
+        'item_total' => 'Item Total',
+        'additional_cost' => 'Additional Cost',
+        'rounding' => 'Rounding',
+        'amount_payable' => 'Amount Payable',
+    ],
+    'asset_purchase_item' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'asset_purchase_id' => 'Asset Purchase',
+        'asset_id' => 'Asset',
+        'qty' => 'Qty',
+        'unit_price' => 'Unit Price',
+        'subtotal' => 'Subtotal',
+        'allocated_additional_cost' => 'Allocated Additional Cost',
+        'subtotal_after_additional_cost' => 'Subtotal After Additional Cost',
+        'unit_acquisition_cost' => 'Unit Acquisition Cost',
+        'remarks' => 'Remarks',
+    ],
+    'asset_purchase_item_serial' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'asset_purchase_id' => 'Asset Purchase',
+        'asset_purchase_item_id' => 'Asset Purchase Item',
+        'serial' => 'Serial',
+    ],
+    'asset_sale' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'customer_id' => 'Customer',
+        'remarks' => 'Remarks',
+        'is_posted' => 'Posted',
+        'item_total' => 'Item Total',
+        'rounding' => 'Rounding',
+        'amount_receivable' => 'Amount Receivable',
+    ],
+    'asset_sale_item' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'asset_sale_id' => 'Asset Sale',
+        'asset_id' => 'Asset',
+        'qty' => 'Qty',
+        'unit_price' => 'Unit Price',
+        'subtotal' => 'Subtotal',
+        'remarks' => 'Remarks',
+    ],
+    'asset_sale_item_serial' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'asset_sale_id' => 'Asset Sale',
+        'asset_sale_item_id' => 'Asset Sale Item',
+        'serial' => 'Serial',
+    ],
+    'receivable_category' => [
+        'company_id' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'sequence' => 'Sequence',
+    ],
+    'debt_creditor' => [
+        'company_id' => 'Company',
+        'code' => 'Code',
+        'name' => 'Name',
+        'remarks' => 'Remarks',
+    ],
+    'expense' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'expense_category_id' => 'Expense Category',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'paid_immediately_cash_account_id' => 'Paid Immediately Cash Account',
+        'amount_paid_immediately' => 'Amount Paid Immediately',
+        'amount_payable' => 'Amount Payable',
+        'amount_payable_paid' => 'Amount Payable Paid',
+        'amount_payable_due' => 'Amount Payable Due',
+        'amount_total' => 'Amount Total',
+        'remarks' => 'Remarks',
+    ],
+    'income' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'income_category_id' => 'Income Category',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'paid_immediately_cash_account_id' => 'Paid Immediately Cash Account',
+        'amount_paid_immediately' => 'Amount Received Immediately',
+        'amount_receivable' => 'Amount Receivable',
+        'amount_receivable_paid' => 'Amount Receivable Collected',
+        'amount_receivable_due' => 'Amount Receivable Due',
+        'amount_total' => 'Amount Total',
+        'remarks' => 'Remarks',
+    ],
+    'expense_payment' => [
+        'id' => 'Expense Payment',
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'expense_id' => 'Expense',
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'income_payment' => [
+        'id' => 'Income Payment',
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'income_id' => 'Income',
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'prepaid_expense' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'expense_category_id' => 'Prepaid Expense Category',
+        'code' => 'Code',
+        'date' => 'Date',
+        'estimated_useful_life' => 'Estimated Useful Life',
+        'due_days' => 'Due Days',
+        'paid_immediately_cash_account_id' => 'Paid Immediately Cash Account',
+        'amount_paid_immediately' => 'Amount Paid Immediately',
+        'amount_payable' => 'Amount Payable',
+        'amount_payable_paid' => 'Amount Payable Paid',
+        'amount_payable_due' => 'Amount Payable Due',
+        'amount_total' => 'Amount Total',
+        'remarks' => 'Remarks',
+    ],
+    'debt' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'category_id' => 'Debt Category',
+        'creditor_id' => 'Creditor',
+        'supplier_id' => 'Supplier',
+        'cash_account_id' => 'Cash Account',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'direct_amount_received' => 'Direct Amount Received',
+        'opening_amount_due' => 'Opening Amount Due',
+        'amount_total' => 'Amount Total',
+        'amount_paid_by_cash_account' => 'Amount Paid by Cash Account',
+        'amount_paid_by_stock_adjustment' => 'Amount Paid by Stock Adjustment',
+        'amount_due' => 'Amount Due',
+        'is_paid_off' => 'Paid Off',
+        'remarks' => 'Remarks',
+    ],
+    'receivable' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'category_id' => 'Receivable Category',
+        'customer_id' => 'Customer',
+        'cash_account_id' => 'Cash Account',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'direct_amount_received' => 'Direct Amount Received',
+        'opening_amount_due' => 'Opening Amount Due',
+        'amount_total' => 'Amount Total',
+        'amount_paid_by_cash_account' => 'Amount Received by Cash Account',
+        'amount_paid_by_stock_adjustment' => 'Amount Received by Stock Adjustment',
+        'amount_due' => 'Amount Due',
+        'is_paid_off' => 'Paid Off',
+        'remarks' => 'Remarks',
+    ],
+    'prepaid_income' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'income_category_id' => 'Prepaid Income Category',
+        'code' => 'Code',
+        'date' => 'Date',
+        'estimated_useful_life' => 'Estimated Useful Life',
+        'due_days' => 'Due Days',
+        'paid_immediately_cash_account_id' => 'Paid Immediately Cash Account',
+        'amount_paid_immediately' => 'Amount Received Immediately',
+        'amount_receivable' => 'Amount Receivable',
+        'amount_receivable_paid' => 'Amount Receivable Collected',
+        'amount_receivable_due' => 'Amount Receivable Due',
+        'amount_total' => 'Amount Total',
+        'remarks' => 'Remarks',
+    ],
+    'prepaid_expense_payment' => [
+        'id' => 'Prepaid Expense Payment',
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'prepaid_expense_id' => 'Prepaid Expense',
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'debt_payment' => [
+        'id' => 'Debt Payment',
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'debt_id' => 'Debt',
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'receivable_payment' => [
+        'id' => 'Receivable Payment',
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'receivable_id' => 'Receivable',
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'prepaid_income_payment' => [
+        'id' => 'Prepaid Income Payment',
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'prepaid_income_id' => 'Prepaid Income',
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'purchase_additional_cost' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'purchase_id' => 'Purchase',
+        'purchase_additional_cost_category_id' => 'Purchase Additional Cost Category',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'paid_immediately_cash_account_id' => 'Paid Immediately Cash Account',
+        'amount_paid_immediately' => 'Amount Paid Immediately',
+        'amount_payable' => 'Amount Payable',
+        'amount_payable_paid' => 'Amount Payable Paid',
+        'amount_payable_due' => 'Amount Payable Due',
+        'amount_total' => 'Amount Total',
+        'remarks' => 'Remarks',
+    ],
+    'purchase_additional_cost_payment' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'purchase_additional_cost_id' => 'Purchase Additional Cost',
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'purchase_order_item' => [
+        'qty' => 'Qty',
+        'product_unit_id' => 'Product Unit',
+        'product_unit_conversion_value' => 'Product Unit Conversion Value',
+        'product_unit_price' => 'Product Unit Price',
+        'product_unit_is_price_include_vat' => 'VAT Included',
+        'vat_profile_id' => 'VAT Profile',
+        'vat_rate' => 'VAT Rate',
+        'vat_base_numerator' => 'VAT Base Numerator',
+        'vat_base_denominator' => 'VAT Base Denominator',
+        'remarks' => 'Remarks',
+    ],
+    'purchase' => [
+        'company_id' => 'Company',
+        'branch_id' => 'Branch',
+        'code' => 'Code',
+        'date' => 'Date',
+        'due_days' => 'Due Days',
+        'receipt_mode' => 'Receipt Mode',
+        'direct_receipt_code' => 'Direct Receipt Code',
+        'direct_receipt_warehouse_id' => 'Direct Receipt Warehouse',
+        'supplier_id' => 'Supplier',
+        'purchase_order_id' => 'Purchase Order',
+        'tax_invoice_number' => 'Tax Invoice Number',
+        'tax_invoice_vat_base' => 'Tax Invoice VAT Base',
+        'tax_invoice_vat' => 'Tax Invoice VAT',
+        'remarks' => 'Remarks',
+    ],
+    'purchase_order_down_payment' => [
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
+    'purchase_order_down_payment_refund' => [
+        'code' => 'Code',
+        'date' => 'Date',
+        'cash_account_id' => 'Cash Account',
+        'amount' => 'Amount',
+        'remarks' => 'Remarks',
+    ],
 ];
diff --git a/api/lang/id/rules.php b/api/lang/id/rules.php
index 501461bbf..ac06da653 100644
--- a/api/lang/id/rules.php
+++ b/api/lang/id/rules.php
@@ -2,12 +2,66 @@
 
 return [
     'unique_code' => 'Code sudah pernah dipakai',
+    'unique_name' => 'Nama sudah pernah dipakai',
+    'unique_address' => 'Alamat sudah pernah dipakai',
     'valid_dropdown' => 'Nilai tidak valid',
     'valid_company' => 'Perusahaan tidak valid',
     'valid_branch' => 'Cabang tidak valid',
+    'valid_warehouse' => 'Gudang tidak valid',
+    'valid_stock_adjustment_in_item' => 'Penyesuaian stok masuk per item tidak valid',
+    'valid_stock_adjustment_out_item' => 'Penyesuaian stok keluar per item tidak valid',
+    'valid_customer_group' => 'Kelompok pelanggan tidak valid',
+    'valid_customer' => 'Pelanggan tidak valid',
+    'valid_supplier' => 'Pemasok tidak valid',
+    'valid_cash_account' => 'Akun kas tidak valid',
     'too_many_tokens' => 'Terlalu banyak permintaan token',
     'must_reset_password' => 'Harap lakukan reset password',
     'inactive_user' => 'Profil anda tidak aktif',
+    'purchase_order' => [
+        'exceed_available_down_payment' => 'Total refund down payment melebihi down payment yang tersedia',
+        'duplicate_product' => 'Produk yang sama tidak boleh dipakai lebih dari sekali dalam satu purchase order.',
+        'invalid_global_discount_reference' => 'Diskon global yang dipilih tidak valid untuk purchase order ini.',
+        'invalid_delete_item_reference' => 'ID item hapus yang dipilih tidak valid untuk purchase order ini.',
+        'invalid_item_reference' => 'Item yang dipilih tidak valid untuk purchase order ini.',
+        'invalid_product_unit_price_discount_reference' => 'Diskon harga satuan item yang dipilih tidak valid untuk purchase order ini.',
+        'invalid_subtotal_discount_reference' => 'Diskon subtotal item yang dipilih tidak valid untuk purchase order ini.',
+        'invalid_down_payment_reference' => 'Down payment yang dipilih tidak valid untuk purchase order ini.',
+        'invalid_refunded_down_payment_reference' => 'Refund down payment yang dipilih tidak valid untuk purchase order ini.',
+    ],
+    'purchase' => [
+        'invalid_delete_item_reference' => 'ID item hapus yang dipilih tidak valid untuk pembelian ini.',
+        'invalid_item_reference' => 'Item yang dipilih tidak valid untuk pembelian ini.',
+        'purchase_order_supplier_must_match' => 'Supplier harus sama dengan purchase order yang dipilih.',
+        'purchase_order_branch_must_match' => 'Cabang harus sama dengan purchase order yang dipilih.',
+        'purchase_order_item_must_be_empty_without_purchase_order' => 'Purchase order item harus kosong ketika purchase order tidak dipilih.',
+        'invalid_purchase_order_item_reference' => 'Purchase order item yang dipilih tidak valid untuk purchase order ini.',
+        'invalid_product_unit_price_discount_reference' => 'Diskon harga satuan item yang dipilih tidak valid untuk pembelian ini.',
+        'invalid_subtotal_discount_reference' => 'Diskon subtotal item yang dipilih tidak valid untuk pembelian ini.',
+        'invalid_global_discount_reference' => 'Diskon global yang dipilih tidak valid untuk pembelian ini.',
+        'invalid_additional_cost_reference' => 'Biaya tambahan yang dipilih tidak valid untuk pembelian ini.',
+        'manual_receipt_id_must_be_empty_on_store' => 'ID manual receipt harus kosong saat membuat pembelian.',
+        'invalid_manual_receipt_reference' => 'Manual receipt yang dipilih tidak valid untuk pembelian ini.',
+        'duplicate_manual_receipt_reference' => 'Manual receipt yang sama tidak boleh dipakai lebih dari sekali dalam satu request.',
+        'invalid_purchase_item_index' => 'Indeks item pembelian yang dipilih tidak valid.',
+        'additional_cost_amount_total_must_be_positive' => 'Jumlah bayar langsung atau jumlah terhutang harus lebih dari nol.',
+        'duplicate_product' => 'Produk yang sama tidak boleh dipakai lebih dari sekali dalam satu purchase.',
+        'duplicate_serial' => 'Serial yang sama tidak boleh dipakai lebih dari sekali dalam satu item purchase.',
+    ],
+    'purchase_receipt' => [
+        'direct_mode_is_managed_from_purchase' => 'Purchase receipt mode direct harus dikelola dari purchase.',
+        'supplier_must_match_purchase' => 'Supplier harus sama dengan purchase yang terhubung.',
+        'branch_must_match_purchase' => 'Cabang harus sama dengan purchase yang terhubung.',
+        'purchase_branch_must_match_receipt_branch' => 'Cabang purchase harus sama dengan cabang purchase receipt.',
+        'direct_mode_cannot_be_deleted_here' => 'Purchase receipt mode direct tidak boleh dihapus dari pengelolaan purchase receipt.',
+        'invalid_delete_item_reference' => 'ID item hapus yang dipilih tidak valid untuk purchase receipt ini.',
+        'invalid_item_reference' => 'Item yang dipilih tidak valid untuk purchase receipt ini.',
+        'invalid_serial_reference' => 'Serial yang dipilih tidak valid untuk item purchase receipt ini.',
+        'duplicate_product' => 'Produk yang sama tidak boleh dipakai lebih dari sekali dalam satu purchase receipt.',
+        'duplicate_serial' => 'Serial yang sama tidak boleh dipakai lebih dari sekali dalam satu item purchase receipt.',
+    ],
+    'purchase_additional_cost' => [
+        'amount_total_must_be_positive' => 'Jumlah bayar langsung atau jumlah terhutang harus lebih dari nol.',
+    ],
     'company' => [
         'deactivate_default_company' => 'Perusahaan utama tidak boleh dinonaktifkan',
         'delete_default_company' => 'Perusahaan utama tidak boleh dihapus',
@@ -17,4 +71,118 @@
         'delete_main_branch' => 'Cabang utama tidak boleh dihapus',
         'set_branch_to_non_main' => 'Tidak di ijinkan merubah cabang utama',
     ],
+    'expense_category' => [
+        'parent_must_be_active' => 'Parent expense category harus aktif.',
+        'cannot_delete_with_children' => 'Expense category tidak boleh dihapus karena masih memiliki child category.',
+        'must_not_have_children' => 'Expense category harus memilih category yang tidak memiliki child lagi.',
+        'category_type_required_without_parent' => 'Jenis kategori wajib dipilih jika parent tidak diisi.',
+        'category_type_must_follow_parent' => 'Jenis kategori harus mengikuti parent yang dipilih.',
+    ],
+    'income_category' => [
+        'parent_must_be_active' => 'Parent income category harus aktif.',
+        'cannot_delete_with_children' => 'Income category tidak boleh dihapus karena masih memiliki child category.',
+        'must_not_have_children' => 'Income category harus memilih category yang tidak memiliki child lagi.',
+    ],
+    'chart_of_account' => [
+        'parent_must_be_group' => 'Parent akun harus berupa group account.',
+        'parent_must_not_be_self' => 'Parent akun tidak boleh dirinya sendiri.',
+        'parent_must_not_be_descendant' => 'Parent akun tidak boleh berasal dari child akun ini.',
+        'parent_is_required_for_account_type' => 'Parent akun wajib dipilih agar tipe akun dapat diturunkan otomatis.',
+        'cannot_delete_with_children' => 'Chart of account tidak boleh dihapus karena masih memiliki child account.',
+        'non_group_must_not_have_children' => 'Akun non-group tidak boleh masih memiliki child account.',
+        'system_scope_requires_system_key' => 'System key wajib diisi untuk akun dengan scope system.',
+        'user_scope_must_not_have_system_key' => 'System key hanya boleh dipakai untuk akun dengan scope system.',
+        'source_type_and_source_id_must_be_paired' => 'Source type dan source id harus diisi berpasangan.',
+    ],
+    'journal_entry' => [
+        'source_type_and_source_id_must_be_paired' => 'Source type dan source id harus diisi berpasangan.',
+        'item_must_have_single_side_amount' => 'Setiap item jurnal hanya boleh memiliki debit atau kredit saja.',
+        'total_must_be_positive' => 'Total debit dan kredit jurnal harus lebih dari nol.',
+        'total_debit_and_credit_must_balance' => 'Total debit dan kredit jurnal harus seimbang.',
+        'account_must_not_be_group' => 'Akun jurnal tidak boleh berupa group account.',
+        'account_must_be_active' => 'Akun jurnal harus aktif.',
+    ],
+    'expense' => [
+        'amount_total_must_be_positive' => 'Jumlah bayar langsung atau jumlah terhutang harus lebih dari nol.',
+        'payments_exceed_amount_payable' => 'Total pembayaran hutang tidak boleh melebihi jumlah terhutang.',
+        'invalid_payment_reference' => 'Data pembayaran expense tidak valid untuk expense ini.',
+    ],
+    'income' => [
+        'amount_total_must_be_positive' => 'Jumlah diterima langsung atau jumlah piutang harus lebih dari nol.',
+        'payments_exceed_amount_receivable' => 'Total pembayaran piutang tidak boleh melebihi jumlah piutang.',
+        'invalid_payment_reference' => 'Data pembayaran pendapatan tidak valid untuk pendapatan ini.',
+    ],
+    'prepaid_expense' => [
+        'amount_total_must_be_positive' => 'Jumlah bayar langsung atau jumlah terhutang harus lebih dari nol.',
+        'payments_exceed_amount_payable' => 'Total pembayaran hutang tidak boleh melebihi jumlah terhutang.',
+        'invalid_payment_reference' => 'Data pembayaran biaya dibayar dimuka tidak valid untuk transaksi ini.',
+    ],
+    'debt' => [
+        'amount_total_must_be_positive' => 'Jumlah pencairan atau jumlah hutang bawaan harus lebih dari nol.',
+        'payments_exceed_total_debt' => 'Total pembayaran hutang tidak boleh melebihi total hutang.',
+        'invalid_payment_reference' => 'Data pembayaran hutang tidak valid untuk transaksi ini.',
+        'party_must_be_single' => 'Pilih salah satu pihak saja, kreditur atau pemasok.',
+        'party_is_required' => 'Kreditur atau pemasok wajib dipilih.',
+        'cash_account_is_required_for_direct_amount_received' => 'Akun kas wajib dipilih jika ada nominal diterima langsung.',
+        'direct_amount_received_is_required_for_cash_account' => 'Nominal diterima langsung wajib lebih dari nol jika akun kas diisi.',
+    ],
+    'debt_payment' => [
+        'invalid_debt_reference' => 'Data hutang tidak valid untuk cabang yang dipilih.',
+    ],
+    'receivable' => [
+        'amount_total_must_be_positive' => 'Jumlah diterima langsung atau jumlah piutang bawaan harus lebih dari nol.',
+        'payments_exceed_total_receivable' => 'Total pembayaran piutang tidak boleh melebihi total piutang.',
+        'invalid_payment_reference' => 'Data pembayaran piutang tidak valid untuk transaksi ini.',
+        'cash_account_is_required_for_direct_amount_received' => 'Akun kas wajib dipilih jika ada nominal diterima langsung.',
+        'direct_amount_received_is_required_for_cash_account' => 'Nominal diterima langsung wajib lebih dari nol jika akun kas diisi.',
+    ],
+    'receivable_payment' => [
+        'invalid_receivable_reference' => 'Data piutang tidak valid untuk cabang yang dipilih.',
+    ],
+    'prepaid_income' => [
+        'amount_total_must_be_positive' => 'Jumlah diterima langsung atau jumlah piutang harus lebih dari nol.',
+        'payments_exceed_amount_receivable' => 'Total pembayaran piutang tidak boleh melebihi jumlah piutang.',
+        'invalid_payment_reference' => 'Data pembayaran pendapatan diterima dimuka tidak valid untuk transaksi ini.',
+    ],
+    'stock_adjustment' => [
+        'invalid_in_item_reference' => 'Data item barang masuk tidak valid untuk stock adjustment ini.',
+        'invalid_out_item_reference' => 'Data item barang keluar tidak valid untuk stock adjustment ini.',
+        'invalid_in_item_serial_reference' => 'Data serial barang masuk tidak valid untuk stock adjustment ini.',
+        'invalid_out_item_serial_reference' => 'Data serial barang keluar tidak valid untuk stock adjustment ini.',
+    ],
+    'asset_adjustment' => [
+        'invalid_in_item_reference' => 'Data item aset masuk tidak valid untuk penyesuaian aset ini.',
+        'invalid_out_item_reference' => 'Data item aset keluar tidak valid untuk penyesuaian aset ini.',
+        'invalid_in_item_serial_reference' => 'Data serial aset masuk tidak valid untuk penyesuaian aset ini.',
+        'invalid_out_item_serial_reference' => 'Data serial aset keluar tidak valid untuk penyesuaian aset ini.',
+    ],
+    'asset_purchase' => [
+        'invalid_item_reference' => 'Data item aset tidak valid untuk pembelian aset ini.',
+        'invalid_item_serial_reference' => 'Data serial aset tidak valid untuk item pembelian aset ini.',
+    ],
+    'asset_sale' => [
+        'invalid_item_reference' => 'Data item aset tidak valid untuk penjualan aset ini.',
+        'invalid_item_serial_reference' => 'Data serial aset tidak valid untuk item penjualan aset ini.',
+    ],
+    'stock_transfer' => [
+        'serial_base_qty_must_be_integer' => 'Qty base harus bilangan bulat untuk produk serial.',
+        'serial_count_must_match_base_qty' => 'Jumlah serial harus sama dengan qty base.',
+    ],
+    'product' => [
+        'unit' => [
+            'duplicate_conversion' => 'Dalam satu produk, conversion value tidak boleh duplikat.',
+            'duplicate_unit' => 'Dalam satu produk, unit tidak boleh duplikat.',
+            'single_base' => 'Dalam satu produk harus ada tepat satu base unit.',
+            'single_primary' => 'Dalam satu produk harus ada tepat satu primary unit.',
+            'duplicate_code' => 'Dalam satu produk, kode unit (SKU) tidak boleh duplikat.',
+            'base_conversion_must_be_one' => 'Conversion value untuk base unit harus bernilai 1.',
+            'non_base_conversion_must_gt_one' => 'Conversion value untuk unit non-base harus lebih dari 1.',
+            'base_price_inconsistent' => 'Harga per satuan dasar tidak konsisten antar unit.',
+            'cannot_delete_base_unit' => 'Base unit tidak boleh dihapus.',
+        ],
+        'vat' => [
+            'must_be_zero_if_not_taxable' => 'VAT rate harus 0 jika produk tidak dikenai pajak.',
+            'out_of_range' => 'VAT rate harus di antara 0 hingga 100.',
+        ],
+    ],
 ];
diff --git a/api/lang/id/validation.php b/api/lang/id/validation.php
index df2b768f0..86fe5f8c5 100644
--- a/api/lang/id/validation.php
+++ b/api/lang/id/validation.php
@@ -175,6 +175,52 @@
         ],
     ],
 
+    'stock_adjustment_in_item' => [
+        'base_qty_must_be_integer' => 'Qty x nilai konversi satuan produk serial harus menghasilkan bilangan bulat.',
+        'serial_count_not_match_qty' => 'Jumlah serial harus sama dengan qty x nilai konversi satuan produk.',
+    ],
+    'stock_adjustment_out_item' => [
+        'base_qty_must_be_integer' => 'Qty x nilai konversi satuan produk serial harus menghasilkan bilangan bulat.',
+        'serial_count_not_match_qty' => 'Jumlah serial harus sama dengan qty x nilai konversi satuan produk.',
+    ],
+    'stock_adjustment' => [
+        'same_warehouse_same_product_not_allowed' => 'Produk yang sama tidak boleh muncul di barang masuk dan barang keluar ketika gudangnya sama.',
+    ],
+    'asset_adjustment' => [
+        'at_least_one_item' => 'Minimal harus ada satu item aset masuk atau aset keluar.',
+        'duplicate_serial_in_transaction' => 'Serial yang sama tidak boleh dipakai lebih dari sekali dalam satu penyesuaian aset.',
+    ],
+    'asset_adjustment_in_item' => [
+        'qty_must_be_integer' => 'Qty aset masuk harus berupa bilangan bulat.',
+        'serial_count_not_match_qty' => 'Jumlah serial aset masuk harus sama dengan qty.',
+        'serial_already_active' => 'Serial aset masuk sudah aktif dan tidak boleh ditambahkan lagi.',
+    ],
+    'asset_adjustment_out_item' => [
+        'qty_must_be_integer' => 'Qty aset keluar harus berupa bilangan bulat.',
+        'serial_count_not_match_qty' => 'Jumlah serial aset keluar harus sama dengan qty.',
+        'serial_not_found' => 'Serial aset keluar tidak ditemukan atau sudah tidak aktif.',
+        'serial_asset_mismatch' => 'Serial aset keluar tidak sesuai dengan aset yang dipilih.',
+    ],
+    'asset_purchase' => [
+        'at_least_one_item' => 'Minimal harus ada satu item aset yang dibeli.',
+        'duplicate_serial_in_transaction' => 'Serial yang sama tidak boleh dipakai lebih dari sekali dalam satu pembelian aset.',
+    ],
+    'asset_purchase_item' => [
+        'qty_must_be_integer' => 'Qty aset pembelian harus berupa bilangan bulat.',
+        'serial_count_not_match_qty' => 'Jumlah serial aset pembelian harus sama dengan qty.',
+        'serial_already_active' => 'Serial aset pembelian sudah aktif dan tidak boleh dipakai lagi.',
+    ],
+    'asset_sale' => [
+        'at_least_one_item' => 'Minimal harus ada satu item aset yang dijual.',
+        'duplicate_serial_in_transaction' => 'Serial yang sama tidak boleh dipakai lebih dari sekali dalam satu penjualan aset.',
+    ],
+    'asset_sale_item' => [
+        'qty_must_be_integer' => 'Qty aset penjualan harus berupa bilangan bulat.',
+        'serial_count_not_match_qty' => 'Jumlah serial aset penjualan harus sama dengan qty.',
+        'serial_not_found' => 'Serial aset penjualan tidak ditemukan atau sudah tidak aktif.',
+        'serial_asset_mismatch' => 'Serial aset penjualan tidak sesuai dengan aset yang dipilih.',
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Custom Validation Attributes
diff --git a/api/lang/id/validation_attributes.php b/api/lang/id/validation_attributes.php
index cab5c5641..b3e198757 100644
--- a/api/lang/id/validation_attributes.php
+++ b/api/lang/id/validation_attributes.php
@@ -29,4 +29,722 @@
         'remarks' => 'Catatan',
         'status' => 'Status',
     ],
+    'warehouse' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'address' => 'Alamat',
+        'city' => 'Kota',
+        'contact' => 'Kontak',
+        'remarks' => 'Catatan',
+        'status' => 'Status',
+    ],
+
+    'investor' => [
+        'company' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'remarks' => 'Catatan',
+    ],
+    'cash_account' => [
+        'company' => 'Perusahaan',
+        'branch' => 'Cabang',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'is_bank' => 'Bank',
+        'is_active' => 'Aktif',
+        'remarks' => 'Catatan',
+    ],
+    'chart_of_account' => [
+        'company_id' => 'Perusahaan',
+        'scope' => 'Scope',
+        'system_key' => 'System Key',
+        'parent_id' => 'Parent Akun',
+        'source_type' => 'Tipe Sumber',
+        'source_id' => 'ID Sumber',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'account_type' => 'Tipe Akun',
+        'normal_balance' => 'Saldo Normal',
+        'is_group' => 'Group',
+        'is_active' => 'Aktif',
+        'remarks' => 'Catatan',
+    ],
+    'journal_entry' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'journal_type' => 'Tipe Jurnal',
+        'source_type' => 'Tipe Sumber',
+        'source_id' => 'ID Sumber',
+        'reference_no' => 'Nomor Referensi',
+        'remarks' => 'Catatan',
+        'items' => 'Item Jurnal',
+    ],
+    'journal_entry_item' => [
+        'chart_of_account_id' => 'Akun',
+        'debit' => 'Debit',
+        'credit' => 'Kredit',
+        'remarks' => 'Catatan Item',
+    ],
+
+    'product_category' => [
+        'company' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+    ],
+    'brand' => [
+        'company' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+    ],
+    'unit' => [
+        'company' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'description' => 'Deskripsi',
+        'type' => 'Tipe',
+    ],
+    'product' => [
+        'company' => 'Perusahaan',
+        'product_category' => 'Product Category',
+        'brand' => 'Brand',
+        'default_vat_profile' => 'Profil PPN',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'product_type' => 'Product Type',
+        'taxable_supply' => 'Persediaan Kena Pajak',
+        'standard_rated_supply' => 'Nilai Pajak Standard',
+        'price_include_vat' => 'Harga Termasuk Pajak',
+        'point' => 'Point',
+        'use_serial_number' => 'Gunakan Nomor Seri',
+        'has_expiry_date' => 'Tanggal Kadaluarsa',
+        'type' => 'Type',
+        'remarks' => 'Catatan',
+        'status' => 'Status',
+        'product_units' => [
+            'product_unit' => 'Product Satuan',
+            'unit' => 'Satuan Product Satuan',
+            'code' => 'Kode Product Satuan',
+            'is_base' => 'Satuan Dasar Product Satuan',
+            'conversion_value' => 'Nilai Tukar Product Satuan',
+            'is_primary_unit' => 'Satuan Utama Product Satuan',
+            'remarks' => 'Catatan Product Satuan',
+        ],
+    ],
+    'supplier' => [
+        'company' => 'Perusahaan',
+        'user' => 'Pengguna',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'address' => 'Alamat',
+        'city' => 'Kota',
+        'payment_term_type' => 'Jenis Syarat Pembayaran',
+        'payment_term' => 'Syarat Pembayaran',
+        'taxable_enterprise' => 'Perusahaan Kena Pajak',
+        'tax_id' => 'No. NPWP',
+        'status' => 'Status',
+        'remarks' => 'Catatan',
+    ],
+
+    'customer_group' => [
+        'company' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'max_open_invoice' => 'Jumlah Nota Belum Lunas',
+        'max_outstanding_invoice' => 'Jumlah Maksimal Piutang',
+        'max_invoice_age' => 'Jumlah Maksimal Umur Nota',
+        'payment_term_type' => 'Jenis Syarat Pembayaran',
+        'payment_term' => 'Syarat Pembayaran',
+        'selling_point' => 'Poin Penjualan',
+        'selling_point_multiple' => 'Poin Penjualan',
+        'sell_at_cost' => 'Jual di Harga Pokok',
+        'price_markup_percent' => 'Persentase Penambah Harga',
+        'price_markup_nominal' => 'Nilai Penambah Harga',
+        'price_markdown_percent' => 'Persentase Penurunan Harga',
+        'price_markdown_nominal' => 'Nilai Penurunan Harga',
+        'rounding_type' => 'Jenis Pembulatan',
+        'rounding_digit' => 'Digit Pembulatan',
+        'remarks' => 'Catatan',
+    ],
+    'customer' => [
+        'company' => 'Perusahaan',
+        'customer_group' => 'Kelompok Pelanggan',
+        'user' => 'Pengguna',
+        'code' => 'Kode',
+        'is_member' => 'Member',
+        'name' => 'Nama',
+        'zone' => 'Wilayah',
+        'max_open_invoice' => 'Jumlah Nota Belum Lunas',
+        'max_outstanding_invoice' => 'Jumlah Maksimal Piutang',
+        'max_invoice_age' => 'Jumlah Maksimal Umur Nota',
+        'payment_term_type' => 'Jenis Syarat Pembayaran',
+        'payment_term' => 'Syarat Pembayaran',
+        'taxable_enterprise' => 'Perusahaan Kena Pajak',
+        'tax_id' => 'No. NPWP',
+        'status' => 'Status',
+        'remarks' => 'Catatan',
+    ],
+
+    'stock_adjustment_category' => [
+        'company' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+    ],
+
+    'vat_profile' => [
+        'company' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'vat_rate' => 'Tarif PPN',
+        'vat_base_numerator' => 'Pembilang Dasar PPN',
+        'vat_base_denominator' => 'Penyebut Dasar PPN',
+        'remarks' => 'Catatan',
+        'is_active' => 'Status Aktif',
+    ],
+
+    'stock_adjustment_in_item' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'stock_adjustment_id' => 'Penyesuaian Stok',
+        'qty' => 'Qty',
+        'product_unit_id' => 'Satuan Produk',
+        'product_unit_conversion_value' => 'Nilai Konversi Satuan',
+        'product_unit_cogs' => 'HPP Satuan',
+        'product_unit_total_cogs' => 'Total HPP',
+        'remarks' => 'Catatan',
+    ],
+
+    'stock_adjustment_in_item_serial' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'stock_adjustment_id' => 'Penyesuaian Stok',
+        'stock_adjustment_in_item_id' => 'Penyesuaian Stok Masuk per Item',
+        'serial' => 'Serial',
+    ],
+
+    'stock_adjustment_out_item' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'stock_adjustment_id' => 'Penyesuaian Stok',
+        'qty' => 'Qty',
+        'product_id' => 'Produk',
+        'product_unit_id' => 'Satuan Produk',
+        'product_unit_conversion_value' => 'Nilai Konversi Satuan',
+        'remarks' => 'Catatan',
+    ],
+
+    'stock_adjustment_out_item_serial' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'stock_adjustment_id' => 'Penyesuaian Stok',
+        'stock_adjustment_out_item_id' => 'Penyesuaian Stok Keluar per Item',
+        'serial' => 'Serial',
+    ],
+
+    'capital_opening' => [
+        'company' => 'Perusahaan',
+        'branch' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'investor' => 'Investor',
+        'cash_account' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'capital_transaction' => [
+        'company' => 'Perusahaan',
+        'branch' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'investor' => 'Investor',
+        'cash_account' => 'Akun Kas',
+        'type' => 'Tipe',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'cash_transfer' => [
+        'company' => 'Perusahaan',
+        'branch' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'source_cash_account' => 'Akun Kas Sumber',
+        'destination_cash_account' => 'Akun Kas Tujuan',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'stock_transfer' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'source_warehouse_id' => 'Gudang Asal',
+        'destination_warehouse_id' => 'Gudang Tujuan',
+        'remarks' => 'Catatan',
+        'is_posted' => 'Diposting',
+    ],
+    'stock_transfer_item' => [
+        'company' => 'Perusahaan',
+        'branch' => 'Cabang',
+        'stock_transfer' => 'Transfer Stok',
+        'qty' => 'Qty',
+        'product_unit' => 'Satuan Produk',
+        'product_unit_conversion_value' => 'Nilai Konversi Satuan',
+        'remarks' => 'Catatan',
+    ],
+    'stock_transfer_item_serial' => [
+        'company' => 'Perusahaan',
+        'branch' => 'Cabang',
+        'stock_transfer' => 'Transfer Stok',
+        'stock_transfer_item' => 'Transfer Stok per Item',
+        'serial' => 'Serial',
+    ],
+    'stock_adjustment' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'in_warehouse_id' => 'Gudang Masuk',
+        'out_warehouse_id' => 'Gudang Keluar',
+        'category_id' => 'Kategori',
+        'remarks' => 'Catatan',
+        'is_posted' => 'Diposting',
+        'total_incoming_item_qty' => 'Total Qty Masuk',
+        'total_incoming_item_cogs' => 'Total HPP Masuk',
+        'total_outgoing_item_qty' => 'Total Qty Keluar',
+    ],
+    'stock_adjustment_in_item' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'stock_adjustment_id' => 'Penyesuaian Stok',
+        'qty' => 'Qty',
+        'product_unit_id' => 'Satuan Produk',
+        'product_unit_conversion_value' => 'Nilai Konversi Satuan',
+        'product_unit_cogs' => 'HPP Satuan',
+        'product_unit_total_cogs' => 'Total HPP',
+        'remarks' => 'Catatan',
+    ],
+    'stock_adjustment_out_item' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'stock_adjustment_id' => 'Penyesuaian Stok',
+        'qty' => 'Qty',
+        'product_id' => 'Produk',
+        'product_unit_id' => 'Satuan Produk',
+        'product_unit_conversion_value' => 'Nilai Konversi Satuan',
+        'remarks' => 'Catatan',
+    ],
+    'purchase_order' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'supplier_id' => 'Pemasok',
+        'remarks' => 'Catatan',
+    ],
+    'purchase_order_global_discount' => [
+        'sequence' => 'Urutan',
+        'discount_type' => 'Tipe Diskon',
+        'discount_value' => 'Nilai Diskon',
+    ],
+    'purchase_additional_cost_category' => [
+        'company_id' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+    ],
+    'expense_category' => [
+        'company_id' => 'Perusahaan',
+        'parent_id' => 'Parent',
+        'category_type' => 'Jenis Kategori',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'sequence' => 'Urutan',
+    ],
+    'income_category' => [
+        'company_id' => 'Perusahaan',
+        'parent_id' => 'Parent',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'sequence' => 'Urutan',
+    ],
+    'debt_category' => [
+        'company_id' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'sequence' => 'Urutan',
+    ],
+    'asset_category' => [
+        'company_id' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'estimated_useful_life_months' => 'Taksiran Masa Manfaat (Bulan)',
+        'remarks' => 'Catatan',
+    ],
+    'asset_unit' => [
+        'company_id' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'description' => 'Deskripsi',
+    ],
+    'asset' => [
+        'company_id' => 'Perusahaan',
+        'asset_category_id' => 'Kategori Aset',
+        'asset_unit_id' => 'Satuan Aset',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'status' => 'Status',
+        'remarks' => 'Catatan',
+    ],
+    'asset_adjustment' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'remarks' => 'Catatan',
+        'is_posted' => 'Terposting',
+        'total_incoming_asset_qty' => 'Total Qty Aset Masuk',
+        'total_outgoing_asset_qty' => 'Total Qty Aset Keluar',
+    ],
+    'asset_adjustment_in_item' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'asset_adjustment_id' => 'Penyesuaian Aset',
+        'asset_id' => 'Aset',
+        'qty' => 'Qty',
+        'remarks' => 'Catatan',
+    ],
+    'asset_adjustment_in_item_serial' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'asset_adjustment_id' => 'Penyesuaian Aset',
+        'asset_adjustment_in_item_id' => 'Penyesuaian Aset Masuk per Item',
+        'serial' => 'Serial',
+    ],
+    'asset_adjustment_out_item' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'asset_adjustment_id' => 'Penyesuaian Aset',
+        'asset_id' => 'Aset',
+        'qty' => 'Qty',
+        'remarks' => 'Catatan',
+    ],
+    'asset_adjustment_out_item_serial' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'asset_adjustment_id' => 'Penyesuaian Aset',
+        'asset_adjustment_out_item_id' => 'Penyesuaian Aset Keluar per Item',
+        'serial' => 'Serial',
+    ],
+    'asset_purchase' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'supplier_id' => 'Supplier',
+        'remarks' => 'Catatan',
+        'is_posted' => 'Terposting',
+        'item_total' => 'Total Item',
+        'additional_cost' => 'Biaya Tambahan',
+        'rounding' => 'Pembulatan',
+        'amount_payable' => 'Jumlah Hutang',
+    ],
+    'asset_purchase_item' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'asset_purchase_id' => 'Pembelian Aset',
+        'asset_id' => 'Aset',
+        'qty' => 'Qty',
+        'unit_price' => 'Harga Satuan',
+        'subtotal' => 'Subtotal',
+        'allocated_additional_cost' => 'Alokasi Biaya Tambahan',
+        'subtotal_after_additional_cost' => 'Subtotal Setelah Biaya Tambahan',
+        'unit_acquisition_cost' => 'Harga Perolehan per Unit',
+        'remarks' => 'Catatan',
+    ],
+    'asset_purchase_item_serial' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'asset_purchase_id' => 'Pembelian Aset',
+        'asset_purchase_item_id' => 'Pembelian Aset per Item',
+        'serial' => 'Serial',
+    ],
+    'asset_sale' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'customer_id' => 'Customer',
+        'remarks' => 'Catatan',
+        'is_posted' => 'Terposting',
+        'item_total' => 'Total Item',
+        'rounding' => 'Pembulatan',
+        'amount_receivable' => 'Jumlah Piutang',
+    ],
+    'asset_sale_item' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'asset_sale_id' => 'Penjualan Aset',
+        'asset_id' => 'Aset',
+        'qty' => 'Qty',
+        'unit_price' => 'Harga Satuan',
+        'subtotal' => 'Subtotal',
+        'remarks' => 'Catatan',
+    ],
+    'asset_sale_item_serial' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'asset_sale_id' => 'Penjualan Aset',
+        'asset_sale_item_id' => 'Penjualan Aset per Item',
+        'serial' => 'Serial',
+    ],
+    'receivable_category' => [
+        'company_id' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'sequence' => 'Urutan',
+    ],
+    'debt_creditor' => [
+        'company_id' => 'Perusahaan',
+        'code' => 'Kode',
+        'name' => 'Nama',
+        'remarks' => 'Catatan',
+    ],
+    'expense' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'expense_category_id' => 'Kategori Pengeluaran',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'paid_immediately_cash_account_id' => 'Akun Kas Pembayaran Langsung',
+        'amount_paid_immediately' => 'Jumlah Bayar Langsung',
+        'amount_payable' => 'Jumlah Terhutang',
+        'amount_payable_paid' => 'Jumlah Terhutang Sudah Dibayar',
+        'amount_payable_due' => 'Sisa Hutang',
+        'amount_total' => 'Jumlah Total',
+        'remarks' => 'Catatan',
+    ],
+    'income' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'income_category_id' => 'Kategori Pendapatan',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'paid_immediately_cash_account_id' => 'Akun Kas Penerimaan Langsung',
+        'amount_paid_immediately' => 'Jumlah Diterima Langsung',
+        'amount_receivable' => 'Jumlah Piutang',
+        'amount_receivable_paid' => 'Jumlah Piutang Sudah Diterima',
+        'amount_receivable_due' => 'Sisa Piutang',
+        'amount_total' => 'Jumlah Total',
+        'remarks' => 'Catatan',
+    ],
+    'expense_payment' => [
+        'id' => 'Pembayaran Pengeluaran',
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'expense_id' => 'Pengeluaran',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'income_payment' => [
+        'id' => 'Pembayaran Pendapatan',
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'income_id' => 'Pendapatan',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'prepaid_expense' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'expense_category_id' => 'Kategori Biaya Dibayar Dimuka',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'estimated_useful_life' => 'Taksiran Masa Manfaat',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'paid_immediately_cash_account_id' => 'Akun Kas Pembayaran Langsung',
+        'amount_paid_immediately' => 'Jumlah Bayar Langsung',
+        'amount_payable' => 'Jumlah Terhutang',
+        'amount_payable_paid' => 'Jumlah Terhutang Sudah Dibayar',
+        'amount_payable_due' => 'Sisa Hutang',
+        'amount_total' => 'Jumlah Total',
+        'remarks' => 'Catatan',
+    ],
+    'debt' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'category_id' => 'Kategori Hutang',
+        'creditor_id' => 'Kreditur',
+        'supplier_id' => 'Pemasok',
+        'cash_account_id' => 'Akun Kas',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'direct_amount_received' => 'Nominal Diterima Langsung',
+        'opening_amount_due' => 'Hutang Bawaan',
+        'amount_total' => 'Jumlah Total',
+        'amount_paid_by_cash_account' => 'Sudah Dibayar dari Kas',
+        'amount_paid_by_stock_adjustment' => 'Sudah Dibayar dari Penyesuaian Stok',
+        'amount_due' => 'Sisa Hutang',
+        'is_paid_off' => 'Lunas',
+        'remarks' => 'Catatan',
+    ],
+    'receivable' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'category_id' => 'Kategori Piutang',
+        'customer_id' => 'Pelanggan',
+        'cash_account_id' => 'Akun Kas',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'direct_amount_received' => 'Nominal Diterima Langsung',
+        'opening_amount_due' => 'Piutang Bawaan',
+        'amount_total' => 'Jumlah Total',
+        'amount_paid_by_cash_account' => 'Sudah Diterima dari Kas',
+        'amount_paid_by_stock_adjustment' => 'Sudah Diterima dari Penyesuaian Stok',
+        'amount_due' => 'Sisa Piutang',
+        'is_paid_off' => 'Lunas',
+        'remarks' => 'Catatan',
+    ],
+    'prepaid_income' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'income_category_id' => 'Kategori Pendapatan Diterima Dimuka',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'estimated_useful_life' => 'Taksiran Masa Manfaat',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'paid_immediately_cash_account_id' => 'Akun Kas Penerimaan Langsung',
+        'amount_paid_immediately' => 'Jumlah Diterima Langsung',
+        'amount_receivable' => 'Jumlah Piutang',
+        'amount_receivable_paid' => 'Jumlah Piutang Sudah Diterima',
+        'amount_receivable_due' => 'Sisa Piutang',
+        'amount_total' => 'Jumlah Total',
+        'remarks' => 'Catatan',
+    ],
+    'prepaid_expense_payment' => [
+        'id' => 'Pembayaran Biaya Dibayar Dimuka',
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'prepaid_expense_id' => 'Biaya Dibayar Dimuka',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'debt_payment' => [
+        'id' => 'Pembayaran Hutang',
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'debt_id' => 'Hutang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'receivable_payment' => [
+        'id' => 'Pembayaran Piutang',
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'receivable_id' => 'Piutang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'prepaid_income_payment' => [
+        'id' => 'Pembayaran Pendapatan Diterima Dimuka',
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'prepaid_income_id' => 'Pendapatan Diterima Dimuka',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'purchase_additional_cost' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'purchase_id' => 'Purchase',
+        'purchase_additional_cost_category_id' => 'Kategori Biaya Tambahan Purchase',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'paid_immediately_cash_account_id' => 'Akun Kas Pembayaran Langsung',
+        'amount_paid_immediately' => 'Jumlah Bayar Langsung',
+        'amount_payable' => 'Jumlah Terhutang',
+        'amount_payable_paid' => 'Jumlah Terhutang Sudah Dibayar',
+        'amount_payable_due' => 'Sisa Hutang',
+        'amount_total' => 'Jumlah Total',
+        'remarks' => 'Catatan',
+    ],
+    'purchase_additional_cost_payment' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'purchase_additional_cost_id' => 'Biaya Tambahan Purchase',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'purchase_order_item' => [
+        'qty' => 'Qty',
+        'product_unit_id' => 'Satuan Produk',
+        'product_unit_conversion_value' => 'Nilai Konversi Satuan',
+        'product_unit_price' => 'Harga Satuan',
+        'product_unit_is_price_include_vat' => 'Harga Termasuk PPN',
+        'vat_profile_id' => 'Profil PPN',
+        'vat_rate' => 'Tarif PPN',
+        'vat_base_numerator' => 'Pembilang Dasar PPN',
+        'vat_base_denominator' => 'Penyebut Dasar PPN',
+        'remarks' => 'Catatan',
+    ],
+    'purchase' => [
+        'company_id' => 'Perusahaan',
+        'branch_id' => 'Cabang',
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'due_days' => 'Jatuh Tempo (Hari)',
+        'receipt_mode' => 'Mode Penerimaan',
+        'direct_receipt_code' => 'Kode Penerimaan Langsung',
+        'direct_receipt_warehouse_id' => 'Gudang Penerimaan Langsung',
+        'supplier_id' => 'Pemasok',
+        'purchase_order_id' => 'Purchase Order',
+        'tax_invoice_number' => 'No. Faktur Pajak',
+        'tax_invoice_vat_base' => 'Dasar PPN Faktur Pajak',
+        'tax_invoice_vat' => 'PPN Faktur Pajak',
+        'remarks' => 'Catatan',
+    ],
+    'purchase_order_down_payment' => [
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
+    'purchase_order_down_payment_refund' => [
+        'code' => 'Kode',
+        'date' => 'Tanggal',
+        'cash_account_id' => 'Akun Kas',
+        'amount' => 'Jumlah',
+        'remarks' => 'Catatan',
+    ],
 ];
diff --git a/api/package.json b/api/package.json
index 51cdc1e37..cdb3dd66c 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,7 +1,7 @@
 {
     "name": "api",
     "scripts": {
-      "serve": "php artisan serve",
-      "host": "php artisan serve --host=0.0.0.0"
+        "serve": "php artisan serve",
+        "host": "php artisan serve --host=0.0.0.0"
     }
-  }
\ No newline at end of file
+}
diff --git a/api/phpunit.xml b/api/phpunit.xml
index 61c031c47..e3b7139ae 100644
--- a/api/phpunit.xml
+++ b/api/phpunit.xml
@@ -22,8 +22,8 @@
         <env name="APP_MAINTENANCE_DRIVER" value="file"/>
         <env name="BCRYPT_ROUNDS" value="4"/>
         <env name="CACHE_STORE" value="array"/>
-        <env name="DB_CONNECTION" value="sqlite"/>
-        <env name="DB_DATABASE" value=":memory:"/>
+        <!-- <env name="DB_CONNECTION" value="sqlite"/>
+        <env name="DB_DATABASE" value=":memory:"/> -->
         <env name="MAIL_MAILER" value="array"/>
         <env name="PULSE_ENABLED" value="false"/>
         <env name="QUEUE_CONNECTION" value="sync"/>
diff --git a/api/pint.json b/api/pint.json
index baf2b8614..57d1f4c6b 100644
--- a/api/pint.json
+++ b/api/pint.json
@@ -4,5 +4,8 @@
         "config/laratrust.php",
         "config/laratrust_seeder.php",
         "database/seeders/LaratrustSeeder.php"
-    ]
-}
\ No newline at end of file
+    ],
+    "rules": {
+        "control_structure_braces": false
+    }
+}
diff --git a/api/routes/api.php b/api/routes/api.php
index e0f6ba40e..98f2ed070 100644
--- a/api/routes/api.php
+++ b/api/routes/api.php
@@ -1,31 +1,880 @@
 <?php
 
 use App\Http\Controllers\ApiAuthController;
+use App\Http\Controllers\AssetAdjustmentController;
+use App\Http\Controllers\AssetCategoryController;
+use App\Http\Controllers\AssetController;
+use App\Http\Controllers\AssetPurchaseController;
+use App\Http\Controllers\AssetSaleController;
+use App\Http\Controllers\AssetUnitController;
 use App\Http\Controllers\BranchController;
+use App\Http\Controllers\BrandController;
+use App\Http\Controllers\CapitalOpeningController;
+use App\Http\Controllers\CapitalTransactionController;
+use App\Http\Controllers\CashAccountController;
+use App\Http\Controllers\CashTransferController;
+use App\Http\Controllers\ChartOfAccountController;
 use App\Http\Controllers\CommonController;
 use App\Http\Controllers\CompanyController;
+use App\Http\Controllers\CustomerController;
+use App\Http\Controllers\CustomerGroupController;
 use App\Http\Controllers\DashboardController;
+use App\Http\Controllers\DebtCategoryController;
+use App\Http\Controllers\DebtController;
+use App\Http\Controllers\DebtCreditorController;
+use App\Http\Controllers\DebtPaymentController;
+use App\Http\Controllers\ExpenseCategoryController;
+use App\Http\Controllers\ExpenseController;
+use App\Http\Controllers\ExpenseImageController;
+use App\Http\Controllers\ExpensePaymentController;
+use App\Http\Controllers\IncomeCategoryController;
+use App\Http\Controllers\IncomeController;
+use App\Http\Controllers\IncomeImageController;
+use App\Http\Controllers\IncomePaymentController;
+use App\Http\Controllers\InvestorController;
+use App\Http\Controllers\JournalEntryController;
+use App\Http\Controllers\JournalEntryItemController;
+use App\Http\Controllers\PrepaidExpenseController;
+use App\Http\Controllers\PrepaidExpenseImageController;
+use App\Http\Controllers\PrepaidExpensePaymentController;
+use App\Http\Controllers\PrepaidIncomeController;
+use App\Http\Controllers\PrepaidIncomeImageController;
+use App\Http\Controllers\PrepaidIncomePaymentController;
+use App\Http\Controllers\ProductCategoryController;
+use App\Http\Controllers\ProductController;
+use App\Http\Controllers\ProductImageController;
+use App\Http\Controllers\ProductUnitController;
 use App\Http\Controllers\ProfileController;
+use App\Http\Controllers\PurchaseAdditionalCostCategoryController;
+use App\Http\Controllers\PurchaseAdditionalCostController;
+use App\Http\Controllers\PurchaseAdditionalCostPaymentController;
+use App\Http\Controllers\PurchaseController;
+use App\Http\Controllers\PurchaseOrderController;
+use App\Http\Controllers\PurchaseOrderDownPaymentController;
+use App\Http\Controllers\PurchaseOrderDownPaymentRefundController;
+use App\Http\Controllers\PurchaseOrderItemController;
+use App\Http\Controllers\PurchaseReceiptController;
+use App\Http\Controllers\ReceivableCategoryController;
+use App\Http\Controllers\ReceivableController;
+use App\Http\Controllers\ReceivablePaymentController;
 use App\Http\Controllers\RoleController;
 use App\Http\Controllers\SearchController;
+use App\Http\Controllers\StockAdjustmentCategoryController;
+use App\Http\Controllers\StockAdjustmentController;
+use App\Http\Controllers\StockAdjustmentInItemController;
+use App\Http\Controllers\StockAdjustmentInItemSerialController;
+use App\Http\Controllers\StockAdjustmentOutItemController;
+use App\Http\Controllers\StockAdjustmentOutItemSerialController;
+use App\Http\Controllers\StockTransferController;
+use App\Http\Controllers\StockTransferItemController;
+use App\Http\Controllers\StockTransferItemSerialController;
+use App\Http\Controllers\SupplierController;
+use App\Http\Controllers\UnitController;
 use App\Http\Controllers\UserController;
+use App\Http\Controllers\VatProfileController;
+use App\Http\Controllers\WarehouseController;
 use Illuminate\Support\Facades\Route;
 
 Route::post('auth', [ApiAuthController::class, 'auth', 'middleware' => ['guest', 'throttle:3,1']])->name('api.auth');
 
+Route::prefix('company')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.company.')->group(function () {
+        Route::get('read', [CompanyController::class, 'readAny'])->name('read_any');
+        Route::get('read/{company:ulid}', [CompanyController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.company.')->group(function () {
+        Route::post('save', [CompanyController::class, 'store'])->name('save');
+        Route::post('edit/{company:ulid}', [CompanyController::class, 'update'])->name('edit');
+        Route::post('delete/{company:ulid}', [CompanyController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('branch')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.branch.')->group(function () {
+        Route::get('read', [BranchController::class, 'readAny'])->name('read_any');
+        Route::get('read/{branch:ulid}', [BranchController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.branch.')->group(function () {
+        Route::post('save', [BranchController::class, 'store'])->name('save');
+        Route::post('edit/{branch:ulid}', [BranchController::class, 'update'])->name('edit');
+        Route::post('delete/{branch:ulid}', [BranchController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('warehouse')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.warehouse.')->group(function () {
+        Route::get('read', [WarehouseController::class, 'readAny'])->name('read_any');
+        Route::get('read/{warehouse:ulid}', [WarehouseController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.warehouse.')->group(function () {
+        Route::post('save', [WarehouseController::class, 'store'])->name('save');
+        Route::post('edit/{warehouse:ulid}', [WarehouseController::class, 'update'])->name('edit');
+        Route::post('delete/{warehouse:ulid}', [WarehouseController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('chart_of_account')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.chart_of_account.')->group(function () {
+        Route::get('read', [ChartOfAccountController::class, 'readAny'])->name('read_any');
+        Route::get('read/{chart_of_account:ulid}', [ChartOfAccountController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.chart_of_account.')->group(function () {
+        Route::post('save', [ChartOfAccountController::class, 'store'])->name('save');
+        Route::post('edit/{chart_of_account:ulid}', [ChartOfAccountController::class, 'update'])->name('edit');
+        Route::post('delete/{chart_of_account:ulid}', [ChartOfAccountController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('journal_entry')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.journal_entry.')->group(function () {
+        Route::get('read', [JournalEntryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{journal_entry:ulid}', [JournalEntryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.journal_entry.')->group(function () {
+        Route::post('save', [JournalEntryController::class, 'store'])->name('save');
+        Route::post('edit/{journal_entry:ulid}', [JournalEntryController::class, 'update'])->name('edit');
+        Route::post('delete/{journal_entry:ulid}', [JournalEntryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('journal_entry_item')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.journal_entry_item.')->group(function () {
+        Route::get('read', [JournalEntryItemController::class, 'readAny'])->name('read_any');
+    });
+});
+
+Route::prefix('investor')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.investor.')->group(function () {
+        Route::get('read', [InvestorController::class, 'readAny'])->name('read_any');
+        Route::get('read/{investor:ulid}', [InvestorController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.investor.')->group(function () {
+        Route::post('save', [InvestorController::class, 'store'])->name('save');
+        Route::post('edit/{investor:ulid}', [InvestorController::class, 'update'])->name('edit');
+        Route::post('delete/{investor:ulid}', [InvestorController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('cash_account')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.cash_account.')->group(function () {
+        Route::get('read', [CashAccountController::class, 'readAny'])->name('read_any');
+        Route::get('read/{cash_account:ulid}', [CashAccountController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.cash_account.')->group(function () {
+        Route::post('save', [CashAccountController::class, 'store'])->name('save');
+        Route::post('edit/{cash_account:ulid}', [CashAccountController::class, 'update'])->name('edit');
+        Route::post('delete/{cash_account:ulid}', [CashAccountController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('product_category')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.product_category.')->group(function () {
+        Route::get('read', [ProductCategoryController::class, 'readAny'])->name('read_any');
+        Route::get('read/types', [ProductCategoryController::class, 'getTypes'])->name('read_types');
+        Route::get('read/{product_category:ulid}', [ProductCategoryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.product_category.')->group(function () {
+        Route::post('save', [ProductCategoryController::class, 'store'])->name('save');
+        Route::post('edit/{product_category:ulid}', [ProductCategoryController::class, 'update'])->name('edit');
+        Route::post('delete/{product_category:ulid}', [ProductCategoryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('brand')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.brand.')->group(function () {
+        Route::get('read', [BrandController::class, 'readAny'])->name('read_any');
+        Route::get('read/{brand:ulid}', [BrandController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.brand.')->group(function () {
+        Route::post('save', [BrandController::class, 'store'])->name('save');
+        Route::post('edit/{brand:ulid}', [BrandController::class, 'update'])->name('edit');
+        Route::post('delete/{brand:ulid}', [BrandController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('unit')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.unit.')->group(function () {
+        Route::get('read', [UnitController::class, 'readAny'])->name('read_any');
+        Route::get('read/types', [UnitController::class, 'getTypes'])->name('read_types');
+        Route::get('read/{unit:ulid}', [UnitController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.unit.')->group(function () {
+        Route::post('save', [UnitController::class, 'store'])->name('save');
+        Route::post('edit/{unit:ulid}', [UnitController::class, 'update'])->name('edit');
+        Route::post('delete/{unit:ulid}', [UnitController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('vat_profile')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.vat_profile.')->group(function () {
+        Route::get('read', [VatProfileController::class, 'readAny'])->name('read_any');
+        Route::get('read/{vat_profile:ulid}', [VatProfileController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.vat_profile.')->group(function () {
+        Route::post('save', [VatProfileController::class, 'store'])->name('save');
+        Route::post('edit/{vat_profile:ulid}', [VatProfileController::class, 'update'])->name('edit');
+        Route::post('delete/{vat_profile:ulid}', [VatProfileController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('product')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.product.')->group(function () {
+        Route::get('read', [ProductController::class, 'readAny'])->name('read_any');
+        Route::get('read/{product:ulid}', [ProductController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.product.')->group(function () {
+        Route::post('save/physical', [ProductController::class, 'storePhysical'])->name('save.physical');
+        Route::post('save/service', [ProductController::class, 'storeService'])->name('save.service');
+        Route::post('edit/physical/{product:ulid}', [ProductController::class, 'updatePhysical'])->name('edit.physical');
+        Route::post('edit/service/{product:ulid}', [ProductController::class, 'updateService'])->name('edit.service');
+        Route::post('delete/{product:ulid}', [ProductController::class, 'delete'])->name('delete');
+        Route::post('image/upload', [ProductImageController::class, 'upload'])->name('image.upload');
+    });
+});
+
+Route::prefix('product_unit')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.product_unit.')->group(function () {
+        Route::get('read', [ProductUnitController::class, 'readAny'])->name('read_any');
+        Route::get('read/{product_unit:ulid}', [ProductUnitController::class, 'read'])->name('read');
+    });
+});
+
+Route::prefix('supplier')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.supplier.')->group(function () {
+        Route::get('read', [SupplierController::class, 'readAny'])->name('read_any');
+        Route::get('read/{supplier:ulid}', [SupplierController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.supplier.')->group(function () {
+        Route::post('save', [SupplierController::class, 'store'])->name('save');
+        Route::post('edit/{supplier:ulid}', [SupplierController::class, 'update'])->name('edit');
+        Route::post('delete/{supplier:ulid}', [SupplierController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('customer_group')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.customer_group.')->group(function () {
+        Route::get('read', [CustomerGroupController::class, 'readAny'])->name('read_any');
+        Route::get('read/{customer_group:ulid}', [CustomerGroupController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.customer_group.')->group(function () {
+        Route::post('save', [CustomerGroupController::class, 'store'])->name('save');
+        Route::post('edit/{customer_group:ulid}', [CustomerGroupController::class, 'update'])->name('edit');
+        Route::post('delete/{customer_group:ulid}', [CustomerGroupController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('customer')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.customer.')->group(function () {
+        Route::get('read', [CustomerController::class, 'readAny'])->name('read_any');
+        Route::get('read/{customer:ulid}', [CustomerController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.customer.')->group(function () {
+        Route::post('save', [CustomerController::class, 'store'])->name('save');
+        Route::post('edit/{customer:ulid}', [CustomerController::class, 'update'])->name('edit');
+        Route::post('delete/{customer:ulid}', [CustomerController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_adjustment_category')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_adjustment_category.')->group(function () {
+        Route::get('read', [StockAdjustmentCategoryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{stock_adjustment_category:ulid}', [StockAdjustmentCategoryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_adjustment_category.')->group(function () {
+        Route::post('save', [StockAdjustmentCategoryController::class, 'store'])->name('save');
+        Route::post('edit/{stock_adjustment_category:ulid}', [StockAdjustmentCategoryController::class, 'update'])->name('edit');
+        Route::post('delete/{stock_adjustment_category:ulid}', [StockAdjustmentCategoryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('expense_category')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.expense_category.')->group(function () {
+        Route::get('read', [ExpenseCategoryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{expense_category:ulid}', [ExpenseCategoryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.expense_category.')->group(function () {
+        Route::post('save', [ExpenseCategoryController::class, 'store'])->name('save');
+        Route::post('edit/{expense_category:ulid}', [ExpenseCategoryController::class, 'update'])->name('edit');
+        Route::post('delete/{expense_category:ulid}', [ExpenseCategoryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('income_category')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.income_category.')->group(function () {
+        Route::get('read', [IncomeCategoryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{income_category:ulid}', [IncomeCategoryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.income_category.')->group(function () {
+        Route::post('save', [IncomeCategoryController::class, 'store'])->name('save');
+        Route::post('edit/{income_category:ulid}', [IncomeCategoryController::class, 'update'])->name('edit');
+        Route::post('delete/{income_category:ulid}', [IncomeCategoryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('debt_category')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.debt_category.')->group(function () {
+        Route::get('read', [DebtCategoryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{debt_category:ulid}', [DebtCategoryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.debt_category.')->group(function () {
+        Route::post('save', [DebtCategoryController::class, 'store'])->name('save');
+        Route::post('edit/{debt_category:ulid}', [DebtCategoryController::class, 'update'])->name('edit');
+        Route::post('delete/{debt_category:ulid}', [DebtCategoryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('receivable_category')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.receivable_category.')->group(function () {
+        Route::get('read', [ReceivableCategoryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{receivable_category:ulid}', [ReceivableCategoryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.receivable_category.')->group(function () {
+        Route::post('save', [ReceivableCategoryController::class, 'store'])->name('save');
+        Route::post('edit/{receivable_category:ulid}', [ReceivableCategoryController::class, 'update'])->name('edit');
+        Route::post('delete/{receivable_category:ulid}', [ReceivableCategoryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('debt_creditor')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.debt_creditor.')->group(function () {
+        Route::get('read', [DebtCreditorController::class, 'readAny'])->name('read_any');
+        Route::get('read/{debt_creditor:ulid}', [DebtCreditorController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.debt_creditor.')->group(function () {
+        Route::post('save', [DebtCreditorController::class, 'store'])->name('save');
+        Route::post('edit/{debt_creditor:ulid}', [DebtCreditorController::class, 'update'])->name('edit');
+        Route::post('delete/{debt_creditor:ulid}', [DebtCreditorController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('purchase_additional_cost_category')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase_additional_cost_category.')->group(function () {
+        Route::get('read', [PurchaseAdditionalCostCategoryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{pacc:ulid}', [PurchaseAdditionalCostCategoryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.purchase_additional_cost_category.')->group(function () {
+        Route::post('save', [PurchaseAdditionalCostCategoryController::class, 'store'])->name('save');
+        Route::post('edit/{pacc:ulid}', [PurchaseAdditionalCostCategoryController::class, 'update'])->name('edit');
+        Route::post('delete/{pacc:ulid}', [PurchaseAdditionalCostCategoryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('asset_category')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.asset_category.')->group(function () {
+        Route::get('read', [AssetCategoryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{asset_category:ulid}', [AssetCategoryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.asset_category.')->group(function () {
+        Route::post('save', [AssetCategoryController::class, 'store'])->name('save');
+        Route::post('edit/{asset_category:ulid}', [AssetCategoryController::class, 'update'])->name('edit');
+        Route::post('delete/{asset_category:ulid}', [AssetCategoryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('asset_unit')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.asset_unit.')->group(function () {
+        Route::get('read', [AssetUnitController::class, 'readAny'])->name('read_any');
+        Route::get('read/{asset_unit:ulid}', [AssetUnitController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.asset_unit.')->group(function () {
+        Route::post('save', [AssetUnitController::class, 'store'])->name('save');
+        Route::post('edit/{asset_unit:ulid}', [AssetUnitController::class, 'update'])->name('edit');
+        Route::post('delete/{asset_unit:ulid}', [AssetUnitController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('asset')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.asset.')->group(function () {
+        Route::get('read', [AssetController::class, 'readAny'])->name('read_any');
+        Route::get('read/{asset:ulid}', [AssetController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.asset.')->group(function () {
+        Route::post('save', [AssetController::class, 'store'])->name('save');
+        Route::post('edit/{asset:ulid}', [AssetController::class, 'update'])->name('edit');
+        Route::post('delete/{asset:ulid}', [AssetController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('capital_opening')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.capital_opening.')->group(function () {
+        Route::get('read', [CapitalOpeningController::class, 'readAny'])->name('read_any');
+        Route::get('read/{capital_opening:ulid}', [CapitalOpeningController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.capital_opening.')->group(function () {
+        Route::post('save', [CapitalOpeningController::class, 'store'])->name('save');
+        Route::post('edit/{capital_opening:ulid}', [CapitalOpeningController::class, 'update'])->name('edit');
+        Route::post('delete/{capital_opening:ulid}', [CapitalOpeningController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('capital_transaction')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.capital_transaction.')->group(function () {
+        Route::get('read', [CapitalTransactionController::class, 'readAny'])->name('read_any');
+        Route::get('read/types', [CapitalTransactionController::class, 'getTypes'])->name('read_types');
+        Route::get('read/{capital_transaction:ulid}', [CapitalTransactionController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.capital_transaction.')->group(function () {
+        Route::post('save', [CapitalTransactionController::class, 'store'])->name('save');
+        Route::post('edit/{capital_transaction:ulid}', [CapitalTransactionController::class, 'update'])->name('edit');
+        Route::post('delete/{capital_transaction:ulid}', [CapitalTransactionController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('expense')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.expense.')->group(function () {
+        Route::get('read', [ExpenseController::class, 'readAny'])->name('read_any');
+        Route::get('read/{expense:ulid}', [ExpenseController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.expense.')->group(function () {
+        Route::post('save', [ExpenseController::class, 'store'])->name('save');
+        Route::post('edit/{expense:ulid}', [ExpenseController::class, 'update'])->name('edit');
+        Route::post('delete/{expense:ulid}', [ExpenseController::class, 'delete'])->name('delete');
+        Route::post('image/upload', [ExpenseImageController::class, 'upload'])->name('image.upload');
+    });
+});
+
+Route::prefix('expense_payment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.expense_payment.')->group(function () {
+        Route::get('read', [ExpensePaymentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{expense_payment:ulid}', [ExpensePaymentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.expense_payment.')->group(function () {
+        Route::post('save', [ExpensePaymentController::class, 'store'])->name('save');
+        Route::post('edit/{expense_payment:ulid}', [ExpensePaymentController::class, 'update'])->name('edit');
+        Route::post('delete/{expense_payment:ulid}', [ExpensePaymentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('prepaid_expense')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.prepaid_expense.')->group(function () {
+        Route::get('read', [PrepaidExpenseController::class, 'readAny'])->name('read_any');
+        Route::get('read/{prepaid_expense:ulid}', [PrepaidExpenseController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.prepaid_expense.')->group(function () {
+        Route::post('save', [PrepaidExpenseController::class, 'store'])->name('save');
+        Route::post('edit/{prepaid_expense:ulid}', [PrepaidExpenseController::class, 'update'])->name('edit');
+        Route::post('delete/{prepaid_expense:ulid}', [PrepaidExpenseController::class, 'delete'])->name('delete');
+        Route::post('image/upload', [PrepaidExpenseImageController::class, 'upload'])->name('image.upload');
+    });
+});
+
+Route::prefix('prepaid_expense_payment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.prepaid_expense_payment.')->group(function () {
+        Route::get('read', [PrepaidExpensePaymentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{prepaid_expense_payment:ulid}', [PrepaidExpensePaymentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.prepaid_expense_payment.')->group(function () {
+        Route::post('save', [PrepaidExpensePaymentController::class, 'store'])->name('save');
+        Route::post('edit/{prepaid_expense_payment:ulid}', [PrepaidExpensePaymentController::class, 'update'])->name('edit');
+        Route::post('delete/{prepaid_expense_payment:ulid}', [PrepaidExpensePaymentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('income')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.income.')->group(function () {
+        Route::get('read', [IncomeController::class, 'readAny'])->name('read_any');
+        Route::get('read/{income:ulid}', [IncomeController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.income.')->group(function () {
+        Route::post('save', [IncomeController::class, 'store'])->name('save');
+        Route::post('edit/{income:ulid}', [IncomeController::class, 'update'])->name('edit');
+        Route::post('delete/{income:ulid}', [IncomeController::class, 'delete'])->name('delete');
+        Route::post('image/upload', [IncomeImageController::class, 'upload'])->name('image.upload');
+    });
+});
+
+Route::prefix('income_payment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.income_payment.')->group(function () {
+        Route::get('read', [IncomePaymentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{income_payment:ulid}', [IncomePaymentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.income_payment.')->group(function () {
+        Route::post('save', [IncomePaymentController::class, 'store'])->name('save');
+        Route::post('edit/{income_payment:ulid}', [IncomePaymentController::class, 'update'])->name('edit');
+        Route::post('delete/{income_payment:ulid}', [IncomePaymentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('prepaid_income')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.prepaid_income.')->group(function () {
+        Route::get('read', [PrepaidIncomeController::class, 'readAny'])->name('read_any');
+        Route::get('read/{prepaid_income:ulid}', [PrepaidIncomeController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.prepaid_income.')->group(function () {
+        Route::post('save', [PrepaidIncomeController::class, 'store'])->name('save');
+        Route::post('edit/{prepaid_income:ulid}', [PrepaidIncomeController::class, 'update'])->name('edit');
+        Route::post('delete/{prepaid_income:ulid}', [PrepaidIncomeController::class, 'delete'])->name('delete');
+        Route::post('image/upload', [PrepaidIncomeImageController::class, 'upload'])->name('image.upload');
+    });
+});
+
+Route::prefix('prepaid_income_payment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.prepaid_income_payment.')->group(function () {
+        Route::get('read', [PrepaidIncomePaymentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{prepaid_income_payment:ulid}', [PrepaidIncomePaymentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.prepaid_income_payment.')->group(function () {
+        Route::post('save', [PrepaidIncomePaymentController::class, 'store'])->name('save');
+        Route::post('edit/{prepaid_income_payment:ulid}', [PrepaidIncomePaymentController::class, 'update'])->name('edit');
+        Route::post('delete/{prepaid_income_payment:ulid}', [PrepaidIncomePaymentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('cash_transfer')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.cash_transfer.')->group(function () {
+        Route::get('read', [CashTransferController::class, 'readAny'])->name('read_any');
+        Route::get('read/{cash_transfer:ulid}', [CashTransferController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.cash_transfer.')->group(function () {
+        Route::post('save', [CashTransferController::class, 'store'])->name('save');
+        Route::post('edit/{cash_transfer:ulid}', [CashTransferController::class, 'update'])->name('edit');
+        Route::post('delete/{cash_transfer:ulid}', [CashTransferController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('debt')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.debt.')->group(function () {
+        Route::get('read', [DebtController::class, 'readAny'])->name('read_any');
+        Route::get('read/{debt:ulid}', [DebtController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.debt.')->group(function () {
+        Route::post('save', [DebtController::class, 'store'])->name('save');
+        Route::post('edit/{debt:ulid}', [DebtController::class, 'update'])->name('edit');
+        Route::post('delete/{debt:ulid}', [DebtController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('debt_payment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.debt_payment.')->group(function () {
+        Route::get('read', [DebtPaymentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{debt_payment:ulid}', [DebtPaymentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.debt_payment.')->group(function () {
+        Route::post('save', [DebtPaymentController::class, 'store'])->name('save');
+        Route::post('edit/{debt_payment:ulid}', [DebtPaymentController::class, 'update'])->name('edit');
+        Route::post('delete/{debt_payment:ulid}', [DebtPaymentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('receivable')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.receivable.')->group(function () {
+        Route::get('read', [ReceivableController::class, 'readAny'])->name('read_any');
+        Route::get('read/{receivable:ulid}', [ReceivableController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.receivable.')->group(function () {
+        Route::post('save', [ReceivableController::class, 'store'])->name('save');
+        Route::post('edit/{receivable:ulid}', [ReceivableController::class, 'update'])->name('edit');
+        Route::post('delete/{receivable:ulid}', [ReceivableController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('receivable_payment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.receivable_payment.')->group(function () {
+        Route::get('read', [ReceivablePaymentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{receivable_payment:ulid}', [ReceivablePaymentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.receivable_payment.')->group(function () {
+        Route::post('save', [ReceivablePaymentController::class, 'store'])->name('save');
+        Route::post('edit/{receivable_payment:ulid}', [ReceivablePaymentController::class, 'update'])->name('edit');
+        Route::post('delete/{receivable_payment:ulid}', [ReceivablePaymentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_adjustment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_adjustment.')->group(function () {
+        Route::get('read', [StockAdjustmentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{stock_adjustment:ulid}', [StockAdjustmentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_adjustment.')->group(function () {
+        Route::post('save', [StockAdjustmentController::class, 'store'])->name('save');
+        Route::post('edit/{stock_adjustment:ulid}', [StockAdjustmentController::class, 'update'])->name('edit');
+        Route::post('delete/{stock_adjustment:ulid}', [StockAdjustmentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_adjustment_in_item')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_adjustment_in_item.')->group(function () {
+        Route::get('read', [StockAdjustmentInItemController::class, 'readAny'])->name('read_any');
+        Route::get('read/{stock_adjustment_in_item:ulid}', [StockAdjustmentInItemController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_adjustment_in_item.')->group(function () {
+        Route::post('save', [StockAdjustmentInItemController::class, 'store'])->name('save');
+        Route::post('edit/{stock_adjustment_in_item:ulid}', [StockAdjustmentInItemController::class, 'update'])->name('edit');
+        Route::post('delete/{stock_adjustment_in_item:ulid}', [StockAdjustmentInItemController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_adjustment_in_item_serial')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_adjustment_in_item_serial.')->group(function () {
+        Route::get('read', [StockAdjustmentInItemSerialController::class, 'readAny'])->name('read_any');
+        Route::get('read/{saii_serial:ulid}', [StockAdjustmentInItemSerialController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_adjustment_in_item_serial.')->group(function () {
+        Route::post('save', [StockAdjustmentInItemSerialController::class, 'store'])->name('save');
+        Route::post('edit/{saii_serial:ulid}', [StockAdjustmentInItemSerialController::class, 'update'])->name('edit');
+        Route::post('delete/{saii_serial:ulid}', [StockAdjustmentInItemSerialController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_adjustment_out_item')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_adjustment_out_item.')->group(function () {
+        Route::get('read', [StockAdjustmentOutItemController::class, 'readAny'])->name('read_any');
+        Route::get('read/{stock_adjustment_out_item:ulid}', [StockAdjustmentOutItemController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_adjustment_out_item.')->group(function () {
+        Route::post('save', [StockAdjustmentOutItemController::class, 'store'])->name('save');
+        Route::post('edit/{stock_adjustment_out_item:ulid}', [StockAdjustmentOutItemController::class, 'update'])->name('edit');
+        Route::post('delete/{stock_adjustment_out_item:ulid}', [StockAdjustmentOutItemController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_adjustment_out_item_serial')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_adjustment_out_item_serial.')->group(function () {
+        Route::get('read', [StockAdjustmentOutItemSerialController::class, 'readAny'])->name('read_any');
+        Route::get('read/{saoi_serial:ulid}', [StockAdjustmentOutItemSerialController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_adjustment_out_item_serial.')->group(function () {
+        Route::post('save', [StockAdjustmentOutItemSerialController::class, 'store'])->name('save');
+        Route::post('edit/{saoi_serial:ulid}', [StockAdjustmentOutItemSerialController::class, 'update'])->name('edit');
+        Route::post('delete/{saoi_serial:ulid}', [StockAdjustmentOutItemSerialController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_transfer')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_transfer.')->group(function () {
+        Route::get('read', [StockTransferController::class, 'readAny'])->name('read_any');
+        Route::get('read/{stock_transfer:ulid}', [StockTransferController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_transfer.')->group(function () {
+        Route::post('save', [StockTransferController::class, 'store'])->name('save');
+        Route::post('edit/{stock_transfer:ulid}', [StockTransferController::class, 'update'])->name('edit');
+        Route::post('delete/{stock_transfer:ulid}', [StockTransferController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_transfer_item')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_transfer_item.')->group(function () {
+        Route::get('read', [StockTransferItemController::class, 'readAny'])->name('read_any');
+        Route::get('read/{stock_transfer_item:ulid}', [StockTransferItemController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_transfer_item.')->group(function () {
+        Route::post('save', [StockTransferItemController::class, 'store'])->name('save');
+        Route::post('edit/{stock_transfer_item:ulid}', [StockTransferItemController::class, 'update'])->name('edit');
+        Route::post('delete/{stock_transfer_item:ulid}', [StockTransferItemController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('stock_transfer_item_serial')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.stock_transfer_item_serial.')->group(function () {
+        Route::get('read', [StockTransferItemSerialController::class, 'readAny'])->name('read_any');
+        Route::get('read/{stock_transfer_item_serial:ulid}', [StockTransferItemSerialController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.stock_transfer_item_serial.')->group(function () {
+        Route::post('save', [StockTransferItemSerialController::class, 'store'])->name('save');
+        Route::post('edit/{stock_transfer_item_serial:ulid}', [StockTransferItemSerialController::class, 'update'])->name('edit');
+        Route::post('delete/{stock_transfer_item_serial:ulid}', [StockTransferItemSerialController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('purchase_order')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase_order.')->group(function () {
+        Route::get('read/progress-statuses', [PurchaseOrderController::class, 'getProgressStatuses'])->name('read_progress_statuses');
+        Route::get('read', [PurchaseOrderController::class, 'readAny'])->name('read_any');
+        Route::get('read/{purchase_order:ulid}', [PurchaseOrderController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.purchase_order.')->group(function () {
+        Route::post('save', [PurchaseOrderController::class, 'store'])->name('save');
+        Route::post('edit/{purchase_order:ulid}', [PurchaseOrderController::class, 'update'])->name('edit');
+        Route::post('delete/{purchase_order:ulid}', [PurchaseOrderController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('purchase_order_item')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase_order_item.')->group(function () {
+        Route::get('read', [PurchaseOrderItemController::class, 'readAny'])->name('read_any');
+        Route::get('read/{purchase_order_item:ulid}', [PurchaseOrderItemController::class, 'read'])->name('read');
+    });
+});
+
+Route::prefix('purchase_order_down_payment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase_order_down_payment.')->group(function () {
+        Route::get('read/allocation-statuses', [PurchaseOrderDownPaymentController::class, 'getAllocationStatuses'])->name('read_allocation_statuses');
+        Route::get('read', [PurchaseOrderDownPaymentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{purchase_order_down_payment:ulid}', [PurchaseOrderDownPaymentController::class, 'read'])->name('read');
+    });
+});
+
+Route::prefix('purchase_order_down_payment_refund')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase_order_down_payment_refund.')->group(function () {
+        Route::get('read', [PurchaseOrderDownPaymentRefundController::class, 'readAny'])->name('read_any');
+        Route::get('read/{podp_refund:ulid}', [PurchaseOrderDownPaymentRefundController::class, 'read'])->name('read');
+    });
+});
+
+Route::prefix('purchase')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase.')->group(function () {
+        Route::get('read', [PurchaseController::class, 'readAny'])->name('read_any');
+        Route::get('read/{purchase:ulid}', [PurchaseController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.purchase.')->group(function () {
+        Route::post('save/direct', [PurchaseController::class, 'storeDirect'])->name('save.direct');
+        Route::post('save/manual', [PurchaseController::class, 'storeManual'])->name('save.manual');
+        Route::post('edit/direct/{purchase:ulid}', [PurchaseController::class, 'updateDirect'])->name('edit.direct');
+        Route::post('edit/manual/{purchase:ulid}', [PurchaseController::class, 'updateManual'])->name('edit.manual');
+        Route::post('delete/{purchase:ulid}', [PurchaseController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('purchase_additional_cost')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase_additional_cost.')->group(function () {
+        Route::get('read', [PurchaseAdditionalCostController::class, 'readAny'])->name('read_any');
+        Route::get('read/{purchase_additional_cost:ulid}', [PurchaseAdditionalCostController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.purchase_additional_cost.')->group(function () {
+        Route::post('save', [PurchaseAdditionalCostController::class, 'store'])->name('save');
+        Route::post('edit/{purchase_additional_cost:ulid}', [PurchaseAdditionalCostController::class, 'update'])->name('edit');
+        Route::post('delete/{purchase_additional_cost:ulid}', [PurchaseAdditionalCostController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('purchase_additional_cost_payment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase_additional_cost_payment.')->group(function () {
+        Route::get('read', [PurchaseAdditionalCostPaymentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{purchase_additional_cost_payment:ulid}', [PurchaseAdditionalCostPaymentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.purchase_additional_cost_payment.')->group(function () {
+        Route::post('save', [PurchaseAdditionalCostPaymentController::class, 'store'])->name('save');
+        Route::post('edit/{purchase_additional_cost_payment:ulid}', [PurchaseAdditionalCostPaymentController::class, 'update'])->name('edit');
+        Route::post('delete/{purchase_additional_cost_payment:ulid}', [PurchaseAdditionalCostPaymentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('purchase_receipt')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.purchase_receipt.')->group(function () {
+        Route::get('read', [PurchaseReceiptController::class, 'readAny'])->name('read_any');
+        Route::get('read/{purchase_receipt:ulid}', [PurchaseReceiptController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.purchase_receipt.')->group(function () {
+        Route::post('save/manual', [PurchaseReceiptController::class, 'storeManual'])->name('save.manual');
+        Route::post('edit/manual/{purchase_receipt:ulid}', [PurchaseReceiptController::class, 'updateManual'])->name('edit.manual');
+        Route::post('delete/manual/{purchase_receipt:ulid}', [PurchaseReceiptController::class, 'deleteManual'])->name('delete.manual');
+    });
+});
+Route::prefix('asset_adjustment')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.asset_adjustment.')->group(function () {
+        Route::get('read', [AssetAdjustmentController::class, 'readAny'])->name('read_any');
+        Route::get('read/{asset_adjustment:ulid}', [AssetAdjustmentController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.asset_adjustment.')->group(function () {
+        Route::post('save', [AssetAdjustmentController::class, 'store'])->name('save');
+        Route::post('edit/{asset_adjustment:ulid}', [AssetAdjustmentController::class, 'update'])->name('edit');
+        Route::post('delete/{asset_adjustment:ulid}', [AssetAdjustmentController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('asset_purchase')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.asset_purchase.')->group(function () {
+        Route::get('read', [AssetPurchaseController::class, 'readAny'])->name('read_any');
+        Route::get('read/{asset_purchase:ulid}', [AssetPurchaseController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.asset_purchase.')->group(function () {
+        Route::post('save', [AssetPurchaseController::class, 'store'])->name('save');
+        Route::post('edit/{asset_purchase:ulid}', [AssetPurchaseController::class, 'update'])->name('edit');
+        Route::post('delete/{asset_purchase:ulid}', [AssetPurchaseController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('asset_sale')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.asset_sale.')->group(function () {
+        Route::get('read', [AssetSaleController::class, 'readAny'])->name('read_any');
+        Route::get('read/{asset_sale:ulid}', [AssetSaleController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.asset_sale.')->group(function () {
+        Route::post('save', [AssetSaleController::class, 'store'])->name('save');
+        Route::post('edit/{asset_sale:ulid}', [AssetSaleController::class, 'update'])->name('edit');
+        Route::post('delete/{asset_sale:ulid}', [AssetSaleController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('journal_entry')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.journal_entry.')->group(function () {
+        Route::get('read', [JournalEntryController::class, 'readAny'])->name('read_any');
+        Route::get('read/{journal_entry:ulid}', [JournalEntryController::class, 'read'])->name('read');
+    });
+
+    Route::middleware(['throttle:50,1', 'precognitive'])->name('api.post.journal_entry.')->group(function () {
+        Route::post('save', [JournalEntryController::class, 'store'])->name('save');
+        Route::post('edit/{journal_entry:ulid}', [JournalEntryController::class, 'update'])->name('edit');
+        Route::post('delete/{journal_entry:ulid}', [JournalEntryController::class, 'delete'])->name('delete');
+    });
+});
+
+Route::prefix('journal_entry_item')->middleware('auth:sanctum')->group(function () {
+    Route::middleware('throttle:100,1')->name('api.get.journal_entry_item.')->group(function () {
+        Route::get('read', [JournalEntryItemController::class, 'readAny'])->name('read_any');
+    });
+});
+
 Route::group(['prefix' => 'get', 'middleware' => ['auth:sanctum', 'throttle:100,1'], 'as' => 'api.get'], function () {
     Route::group(['prefix' => 'dashboard', 'as' => '.db'], function () {
         /* #region Extensions */
-        Route::group(['prefix' => 'company', 'as' => '.company'], function () {
-            Route::group(['prefix' => 'company', 'as' => '.company'], function () {
-                Route::get('read', [CompanyController::class, 'readAny'])->name('.read_any');
-                Route::get('read/{company:ulid}', [CompanyController::class, 'read'])->name('.read');
-            });
-            Route::group(['prefix' => 'branch', 'as' => '.branch'], function () {
-                Route::get('read', [BranchController::class, 'readAny'])->name('.read_any');
-                Route::get('read/{branch:ulid}', [BranchController::class, 'read'])->name('.read');
-            });
-        });
+
         /* #endregion */
 
         Route::group(['prefix' => 'admin', 'as' => '.admin'], function () {
@@ -52,6 +901,10 @@
             Route::group(['prefix' => 'ddl', 'as' => '.ddl'], function () {
                 Route::get('list/countries', [CommonController::class, 'getCountries'])->name('.list.countries');
                 Route::get('list/statuses', [CommonController::class, 'getStatus'])->name('.list.statuses');
+                Route::get('list/payment_term_types', [CommonController::class, 'getPaymentTermTypes'])->name('.list.payment_term_types');
+                Route::get('list/rounding_types', [CommonController::class, 'getRoundingTypes'])->name('.list.rounding_types');
+                Route::get('list/record_statuses', [CommonController::class, 'getRecordStatuses'])->name('.list.record_statuses');
+
             });
         });
 
@@ -66,18 +919,7 @@
 Route::group(['prefix' => 'post', 'middleware' => ['auth:sanctum', 'throttle:50,1'], 'as' => 'api.post'], function () {
     Route::group(['prefix' => 'dashboard', 'as' => '.db'], function () {
         /* #region Extensions */
-        Route::group(['prefix' => 'company', 'middleware' => ['precognitive'], 'as' => '.company'], function () {
-            Route::group(['prefix' => 'company', 'as' => '.company'], function () {
-                Route::post('save', [CompanyController::class, 'store'])->name('.save');
-                Route::post('edit/{company:ulid}', [CompanyController::class, 'update'])->name('.edit');
-                Route::post('delete/{company:ulid}', [CompanyController::class, 'delete'])->name('.delete');
-            });
-            Route::group(['prefix' => 'branch', 'middleware' => ['precognitive'], 'as' => '.branch'], function () {
-                Route::post('save', [BranchController::class, 'store'])->name('.save');
-                Route::post('edit/{branch:ulid}', [BranchController::class, 'update'])->name('.edit');
-                Route::post('delete/{branch:ulid}', [BranchController::class, 'delete'])->name('.delete');
-            });
-        });
+
         /* #endregion */
 
         Route::group(['prefix' => 'admin', 'as' => '.admin'], function () {
diff --git a/api/tests/APITestCase.php b/api/tests/APITestCase.php
index b4ce76cb4..d6228ba34 100644
--- a/api/tests/APITestCase.php
+++ b/api/tests/APITestCase.php
@@ -6,7 +6,7 @@
 
 class APITestCase extends TestCase
 {
-    use RefreshDatabase;
+    // use RefreshDatabase;
 
     protected $seed = true;
 }
diff --git a/api/tests/Feature/API/BranchAPI/BranchAPICreateTest.php b/api/tests/Feature/API/BranchAPI/BranchAPICreateTest.php
index 384ba4cda..737c97733 100644
--- a/api/tests/Feature/API/BranchAPI/BranchAPICreateTest.php
+++ b/api/tests/Feature/API/BranchAPI/BranchAPICreateTest.php
@@ -2,7 +2,8 @@
 
 namespace Tests\Feature\API\BranchAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\RecordStatusEnum;
+use App\Enums\UserRolesEnum;
 use App\Models\Branch;
 use App\Models\Company;
 use App\Models\Role;
@@ -21,17 +22,17 @@ protected function setUp(): void
     public function test_branch_api_call_store_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($company->id),
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.save'), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
 
         $api->assertUnauthorized();
     }
@@ -46,11 +47,11 @@ public function test_branch_api_call_store_without_access_right_expect_forbidden
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($company->id),
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.save'), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
 
         $api->assertForbidden();
     }
@@ -68,7 +69,7 @@ public function test_branch_api_call_store_with_script_tags_in_payload_expect_en
     public function test_branch_api_call_store_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
@@ -76,24 +77,24 @@ public function test_branch_api_call_store_expect_successful()
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($company->id),
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.save'), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
 
         $api->assertSuccessful();
         $this->assertDatabaseHas('branches', [
             'company_id' => $company->id,
-            'code' => $branchArr['code'],
-            'name' => $branchArr['name'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
         ]);
     }
 
     public function test_branch_api_call_store_with_existing_code_in_same_company_expect_failed()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setIsDefault())
             ->create();
 
@@ -105,13 +106,13 @@ public function test_branch_api_call_store_with_existing_code_in_same_company_ex
             'code' => 'test1',
         ]);
 
-        $branchArr = array_merge([
+        $payload = array_merge([
             'company_id' => Hashids::encode($company->id),
         ], Branch::factory()->make([
             'code' => 'test1',
         ])->toArray());
 
-        $api = $this->json('POST', route('api.post.db.company.branch.save'), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
 
         $api->assertUnprocessable();
         $api->assertJsonStructure([
@@ -125,7 +126,7 @@ public function test_branch_api_call_store_with_existing_code_in_different_compa
         $idxDefaultCompany = random_int(0, $companyCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->count($companyCount)
                 ->state(new Sequence(
                     fn (Sequence $sequence) => [
@@ -148,32 +149,124 @@ public function test_branch_api_call_store_with_existing_code_in_different_compa
             'code' => 'test1',
         ]);
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($companyId_2),
             'code' => 'test1',
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.save'), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
 
         $api->assertSuccessful();
         $this->assertDatabaseHas('branches', [
             'company_id' => $companyId_2,
-            'code' => $branchArr['code'],
+            'code' => $payload['code'],
         ]);
     }
 
+    public function test_branch_api_call_store_with_existing_name_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Branch::factory()->for($company)->create([
+            'name' => 'Branch Sama',
+        ]);
+
+        $payload = array_merge([
+            'company_id' => Hashids::encode($company->id),
+        ], Branch::factory()->make([
+            'name' => 'Branch Sama',
+        ])->toArray());
+
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonValidationErrors(['name']);
+    }
+
     public function test_branch_api_call_store_with_empty_string_parameters_expect_validation_error()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setIsDefault())
             ->create();
 
         $this->actingAs($user);
 
-        $branchArr = [];
-        $api = $this->json('POST', route('api.post.db.company.branch.save'), $branchArr);
+        $payload = [];
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
 
         $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
     }
+
+    public function test_branch_api_call_store_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Branch::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => config('dcslab.KEYWORDS.AUTO'),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('branches', [
+            'company_id' => $company->id,
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_branch_api_call_store_with_is_main_expect_other_branches_reset()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->count(3)->state(['is_main' => false]))
+            )
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        // Set one existing branch as main manually
+        $existingMain = $company->branches()->first();
+        $existingMain->update(['is_main' => true]);
+
+        $payload = Branch::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'is_main' => true,
+            'status' => RecordStatusEnum::ACTIVE->value,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.branch.save'), $payload);
+
+        $api->assertSuccessful();
+
+        // Check if new branch is main
+        $this->assertDatabaseHas('branches', [
+            'company_id' => $company->id,
+            'name' => $payload['name'],
+            'is_main' => true,
+        ]);
+
+        // Check if old main branch is now not main
+        $this->assertDatabaseHas('branches', [
+            'id' => $existingMain->id,
+            'is_main' => false,
+        ]);
+    }
 }
diff --git a/api/tests/Feature/API/BranchAPI/BranchAPIDeleteTest.php b/api/tests/Feature/API/BranchAPI/BranchAPIDeleteTest.php
index c2dce3db0..b918842ea 100644
--- a/api/tests/Feature/API/BranchAPI/BranchAPIDeleteTest.php
+++ b/api/tests/Feature/API/BranchAPI/BranchAPIDeleteTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\BranchAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Branch;
 use App\Models\Company;
 use App\Models\Role;
@@ -21,7 +21,7 @@ protected function setUp(): void
     public function test_branch_api_call_delete_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setIsDefault()
                 ->has(Branch::factory()))
             ->create();
@@ -29,7 +29,7 @@ public function test_branch_api_call_delete_without_authorization_expect_unautho
         $branch = $user->companies()->inRandomOrder()->first()
             ->branches()->inRandomOrder()->first();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.delete', $branch->ulid));
+        $api = $this->json('POST', route('api.post.branch.delete', $branch->ulid));
 
         $api->assertUnauthorized();
     }
@@ -46,7 +46,7 @@ public function test_branch_api_call_delete_without_access_right_expect_unauthor
         $branch = $user->companies()->inRandomOrder()->first()
             ->branches()->inRandomOrder()->first();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.delete', $branch->ulid));
+        $api = $this->json('POST', route('api.post.branch.delete', $branch->ulid));
 
         $api->assertForbidden();
     }
@@ -54,7 +54,7 @@ public function test_branch_api_call_delete_without_access_right_expect_unauthor
     public function test_branch_api_call_delete_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setIsDefault()
                 ->has(Branch::factory()))
             ->create();
@@ -64,7 +64,7 @@ public function test_branch_api_call_delete_expect_successful()
         $branch = $user->companies()->inRandomOrder()->first()
             ->branches()->inRandomOrder()->first();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.delete', $branch->ulid));
+        $api = $this->json('POST', route('api.post.branch.delete', $branch->ulid));
 
         $api->assertSuccessful();
         $this->assertSoftDeleted('branches', [
@@ -79,7 +79,7 @@ public function test_branch_api_call_delete_of_nonexistance_ulid_expect_not_foun
         $this->actingAs($user);
         $ulid = Str::ulid()->generate();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.delete', $ulid));
+        $api = $this->json('POST', route('api.post.branch.delete', $ulid));
 
         $api->assertStatus(404);
     }
@@ -90,6 +90,24 @@ public function test_branch_api_call_delete_without_parameters_expect_failed()
         $user = User::factory()->create();
 
         $this->actingAs($user);
-        $api = $this->json('POST', route('api.post.db.company.branch.delete', null));
+        $api = $this->json('POST', route('api.post.branch.delete', null));
+    }
+
+    public function test_branch_api_call_delete_main_branch_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault()
+                ->has(Branch::factory()->setIsMainBranch(true)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $branch = $user->companies()->first()->branches()->first();
+
+        $api = $this->json('POST', route('api.post.branch.delete', $branch->ulid));
+
+        $api->assertUnprocessable();
+        $api->assertJsonValidationErrors(['' => trans('rules.branch.delete_main_branch')]);
     }
 }
diff --git a/api/tests/Feature/API/BranchAPI/BranchAPIEditTest.php b/api/tests/Feature/API/BranchAPI/BranchAPIEditTest.php
index 8f2b0cfc3..09847d48b 100644
--- a/api/tests/Feature/API/BranchAPI/BranchAPIEditTest.php
+++ b/api/tests/Feature/API/BranchAPI/BranchAPIEditTest.php
@@ -2,7 +2,8 @@
 
 namespace Tests\Feature\API\BranchAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\RecordStatusEnum;
+use App\Enums\UserRolesEnum;
 use App\Models\Branch;
 use App\Models\Company;
 use App\Models\Role;
@@ -21,7 +22,7 @@ protected function setUp(): void
     public function test_branch_api_call_update_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault()
                 ->has(Branch::factory()->setStatusActive()->count(3)))
             ->create();
@@ -30,11 +31,11 @@ public function test_branch_api_call_update_without_authorization_expect_unautho
 
         $branch = $company->branches()->inRandomOrder()->first();
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($company->id),
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.edit', $branch->ulid), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.edit', $branch->ulid), $payload);
 
         $api->assertUnauthorized();
     }
@@ -52,11 +53,11 @@ public function test_branch_api_call_update_without_access_right_expect_unauthor
 
         $branch = $company->branches()->inRandomOrder()->first();
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($company->id),
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.edit', $branch->ulid), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.edit', $branch->ulid), $payload);
 
         $api->assertForbidden();
     }
@@ -74,7 +75,7 @@ public function test_branch_api_call_update_with_script_tags_in_payload_expect_e
     public function test_branch_api_call_update_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault()
                 ->has(Branch::factory()->setStatusActive()->count(3)))
             ->create();
@@ -85,25 +86,25 @@ public function test_branch_api_call_update_expect_successful()
 
         $branch = $company->branches()->inRandomOrder()->first();
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($company->id),
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.edit', $branch->ulid), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.edit', $branch->ulid), $payload);
 
         $api->assertSuccessful();
         $this->assertDatabaseHas('branches', [
             'id' => $branch->id,
             'company_id' => $company->id,
-            'code' => $branchArr['code'],
-            'name' => $branchArr['name'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
         ]);
     }
 
     public function test_branch_api_call_update_and_use_existing_code_in_same_company_expect_failed()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(
                 Company::factory()->setIsDefault()
                     ->has(Branch::factory()->setStatusActive()->count(3))
@@ -117,12 +118,12 @@ public function test_branch_api_call_update_and_use_existing_code_in_same_compan
         $branch_1 = $branches[0];
         $branch_2 = $branches[1];
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($company->id),
             'code' => $branch_1->code,
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.edit', $branch_2->ulid), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.edit', $branch_2->ulid), $payload);
 
         $api->assertUnprocessable();
         $api->assertJsonStructure([
@@ -133,14 +134,13 @@ public function test_branch_api_call_update_and_use_existing_code_in_same_compan
     public function test_branch_api_call_update_and_use_existing_code_in_different_company_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->count(2)
                 ->state(new Sequence(
                     ['default' => true],
                     ['default' => false]
                 ))
-            )
-            ->create();
+            )->create();
 
         $this->actingAs($user);
 
@@ -160,13 +160,119 @@ public function test_branch_api_call_update_and_use_existing_code_in_different_c
             'code' => 'test2',
         ]);
 
-        $branchArr = Branch::factory()->make([
+        $payload = Branch::factory()->make([
             'company_id' => Hashids::encode($companyId_2),
             'code' => 'test1',
+            'is_main' => true,
+            'status' => RecordStatusEnum::ACTIVE->value,
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.branch.edit', $company_2->branches()->first()->ulid), $branchArr);
+        $api = $this->json('POST', route('api.post.branch.edit', $company_2->branches()->first()->ulid), $payload);
 
         $api->assertSuccessful();
     }
+
+    public function test_branch_api_call_update_and_use_existing_name_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setIsDefault()
+                    ->has(Branch::factory()->setStatusActive()->count(3))
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        $branches = $company->branches()->inRandomOrder()->take(2)->get();
+        $branch_1 = $branches[0];
+        $branch_2 = $branches[1];
+
+        $payload = Branch::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => $branch_1->name,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.branch.edit', $branch_2->ulid), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonValidationErrors(['name']);
+    }
+
+    public function test_branch_api_call_update_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->count(1)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        $branch = $company->branches()->first();
+
+        $payload = Branch::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => config('dcslab.KEYWORDS.AUTO'),
+            'is_main' => true,
+            'status' => RecordStatusEnum::ACTIVE->value,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.branch.edit', $branch->ulid), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseMissing('branches', [
+            'id' => $branch->id,
+            'code' => config('dcslab.KEYWORDS.AUTO'),
+        ]);
+
+        $branch->refresh();
+        $this->assertNotEquals(config('dcslab.KEYWORDS.AUTO'), $branch->code);
+    }
+
+    public function test_branch_api_call_update_is_main_expect_other_branches_reset()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->count(3)->state(['is_main' => false]))
+            )
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+
+        // Make the first branch main initially
+        $branches = $company->branches;
+        $branches[0]->update(['is_main' => true]);
+
+        // Update the second branch to be main
+        $targetBranch = $branches[1];
+
+        $payload = Branch::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $targetBranch->code,
+            'is_main' => true,
+            'status' => RecordStatusEnum::ACTIVE->value,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.branch.edit', $targetBranch->ulid), $payload);
+
+        $api->assertSuccessful();
+
+        // Check target branch is main
+        $this->assertDatabaseHas('branches', [
+            'id' => $targetBranch->id,
+            'is_main' => true,
+        ]);
+
+        // Check previous main branch is not main anymore
+        $this->assertDatabaseHas('branches', [
+            'id' => $branches[0]->id,
+            'is_main' => false,
+        ]);
+    }
 }
diff --git a/api/tests/Feature/API/BranchAPI/BranchAPIReadTest.php b/api/tests/Feature/API/BranchAPI/BranchAPIReadTest.php
index 76dd00e17..9c9d5edf0 100644
--- a/api/tests/Feature/API/BranchAPI/BranchAPIReadTest.php
+++ b/api/tests/Feature/API/BranchAPI/BranchAPIReadTest.php
@@ -2,7 +2,8 @@
 
 namespace Tests\Feature\API\BranchAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\RecordStatusEnum;
+use App\Enums\UserRolesEnum;
 use App\Models\Branch;
 use App\Models\Company;
 use App\Models\Role;
@@ -26,7 +27,7 @@ public function test_branch_api_call_read_any_without_authorization_expect_unaut
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -39,13 +40,15 @@ public function test_branch_api_call_read_any_without_authorization_expect_unaut
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertUnauthorized();
@@ -71,13 +74,15 @@ public function test_branch_api_call_read_any_without_access_right_expect_forbid
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertForbidden();
@@ -89,7 +94,7 @@ public function test_branch_api_call_read_without_authorization_expect_unauthori
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -104,7 +109,7 @@ public function test_branch_api_call_read_without_authorization_expect_unauthori
 
         $ulid = $company->branches()->inRandomOrder()->first()->ulid;
 
-        $api = $this->getJson(route('api.get.db.company.branch.read', $ulid));
+        $api = $this->getJson(route('api.get.branch.read', $ulid));
 
         $api->assertUnauthorized();
     }
@@ -115,7 +120,7 @@ public function test_branch_api_call_read_with_sql_injection_expect_injection_ig
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -135,102 +140,24 @@ public function test_branch_api_call_read_with_sql_injection_expect_injection_ig
             '1 UNION SELECT username, password FROM users',
             '1; DROP TABLE users',
             "' OR '1'='1' --",
-            "' OR \'1\'=\'1",
             '1 OR SLEEP(5)',
-            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
-            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
             "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
-            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
-            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
             "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
-            '1 OR 1=1; DROP TABLE users; --',
-            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
-            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
-            "1; EXEC xp_cmdshell('echo vulnerable'); --",
-            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
-            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
-            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
-            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
-            '1; SELECT pg_sleep(5); --',
-            "1 AND SLEEP(5) AND 'abc'='abc",
-            "1 AND SLEEP(5) AND 'xyz'='xyz",
-            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
-            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
-            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
-            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
-            "1'; WAITFOR DELAY '0:0:5' --",
-            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
-            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
-            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
-            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
-            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
-            '1 AND (SELECT COUNT(*) FROM users) > 10',
-            '1 AND (SELECT COUNT(*) FROM users) > 100',
-            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
-            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
-            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
-            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
-            '1 OR 1=1; SELECT * FROM users;',
-            "1' OR 1=1; SELECT * FROM users;",
-            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
-            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
-            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
-            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
-            "' OR 1=1 --",
             "admin'--",
-            "admin' #",
-            "' OR 'x'='x",
-            "' OR 'a'='a'",
-            "' OR 'a'='a'--",
-            "' OR 1=1",
-            "' OR 1=1--",
-            "' OR 1=1#",
-            "' OR 1=1 /*",
-            "' OR '1'='1'--",
-            "' OR '1'='1'/*",
-            "' OR '1'='1' #",
-            "' OR '1'='1' /*",
-            "' OR '1'='1' or ''='",
-            "' OR '1'='1' or 'a'='a",
-            "' OR '1'='1' or 'a'='a'--",
-            "' OR '1'='1' or 'a'='a'/*",
-            "' OR '1'='1' or 'a'='a' #",
-            "' OR '1'='1' or 'a'='a' /*",
-            '1; SELECT * FROM users WHERE 1=1',
-            '1; SELECT * FROM users WHERE 1=1--',
-            '1; SELECT * FROM users WHERE 1=1/*',
-            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
-            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
-            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
-            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
-            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
-            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
-            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
-            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
-            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
-            "1' OR '1'='1' UNION SELECT username, password FROM users",
-            "1' OR '1'='1' UNION SELECT username, password FROM users--",
-            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
-            "1' OR '1'='1' UNION SELECT username, password FROM users #",
-            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
-            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
-            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
-            "' OR '",
-            "1' OR '1'='1' UNION SELECT NULL",
-            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
-            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
-            "' OR '1'='1' or",
+            "' OR 1=1 --",
         ];
 
-        $testIdx = random_int(0, count($injections));
+        $testIdx = random_int(0, count($injections) - 1);
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => $injections[$testIdx],
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -249,15 +176,16 @@ public function test_branch_api_call_read_with_sql_injection_expect_injection_ig
             ],
         ]);
 
-        $testIdx = random_int(0, count($injections));
+        $testIdx = random_int(0, count($injections) - 1);
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => $injections[$testIdx],
-            'paginate' => false,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -289,7 +217,7 @@ public function test_branch_api_call_read_without_access_right_expect_forbidden_
 
         $ulid = $company->branches()->inRandomOrder()->first()->ulid;
 
-        $api = $this->getJson(route('api.get.db.company.branch.read', $ulid));
+        $api = $this->getJson(route('api.get.branch.read', $ulid));
 
         $api->assertForbidden();
     }
@@ -300,7 +228,7 @@ public function test_branch_api_call_read_any_with_or_without_pagination_expect_
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -315,13 +243,15 @@ public function test_branch_api_call_read_any_with_or_without_pagination_expect_
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -335,13 +265,14 @@ public function test_branch_api_call_read_any_with_or_without_pagination_expect_
             ],
         ]);
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => '',
-            'paginate' => false,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -353,7 +284,7 @@ public function test_branch_api_call_read_any_with_pagination_expect_several_per
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -368,13 +299,15 @@ public function test_branch_api_call_read_any_with_pagination_expect_several_per
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 25,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -403,7 +336,7 @@ public function test_branch_api_call_read_any_with_search_expect_filtered_result
         $testName = Branch::factory()->insertStringInName('testing')->make()->name;
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -420,15 +353,16 @@ public function test_branch_api_call_read_any_with_search_expect_filtered_result
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => 'testing',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
-
         $api->assertSuccessful();
         $api->assertJsonStructure([
             'data',
@@ -451,7 +385,7 @@ public function test_branch_api_call_read_any_without_search_querystring_expect_
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -466,7 +400,8 @@ public function test_branch_api_call_read_any_without_search_querystring_expect_
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
         ]));
 
@@ -479,7 +414,7 @@ public function test_branch_api_call_read_any_with_special_char_in_search_expect
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -494,15 +429,16 @@ public function test_branch_api_call_read_any_with_special_char_in_search_expect
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => " !#$%&'()*+,-./:;<=>?@[\]^_`{|}~",
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
-
         $api->assertSuccessful();
         $api->assertJsonStructure([
             'data',
@@ -521,7 +457,7 @@ public function test_branch_api_call_read_any_with_negative_value_in_parameters_
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -536,25 +472,18 @@ public function test_branch_api_call_read_any_with_negative_value_in_parameters_
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read_any', [
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
             'company_id' => Hashids::encode($company->id),
             'search' => '',
-            'paginate' => true,
-            'page' => -1,
-            'per_page' => -10,
             'refresh' => false,
+            'paginate' => [
+                'page' => -1,
+                'per_page' => -10,
+            ],
         ]));
 
-        $api->assertSuccessful();
-        $api->assertJsonStructure([
-            'data',
-            'links' => [
-                'first', 'last', 'prev', 'next',
-            ],
-            'meta' => [
-                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
-            ],
-        ]);
+        $api->assertStatus(422);
     }
 
     public function test_branch_api_call_read_expect_successful()
@@ -563,7 +492,7 @@ public function test_branch_api_call_read_expect_successful()
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -580,7 +509,7 @@ public function test_branch_api_call_read_expect_successful()
 
         $ulid = $company->branches()->inRandomOrder()->first()->ulid;
 
-        $api = $this->getJson(route('api.get.db.company.branch.read', $ulid));
+        $api = $this->getJson(route('api.get.branch.read', $ulid));
 
         $api->assertSuccessful();
     }
@@ -593,7 +522,7 @@ public function test_branch_api_call_read_without_ulid_expect_exception()
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -606,7 +535,7 @@ public function test_branch_api_call_read_without_ulid_expect_exception()
 
         $this->actingAs($user);
 
-        $this->getJson(route('api.get.db.company.branch.read', null));
+        $this->getJson(route('api.get.branch.read', null));
     }
 
     public function test_branch_api_call_read_with_nonexistance_ulid_expect_not_found()
@@ -615,7 +544,7 @@ public function test_branch_api_call_read_with_nonexistance_ulid_expect_not_foun
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -630,8 +559,113 @@ public function test_branch_api_call_read_with_nonexistance_ulid_expect_not_foun
 
         $ulid = Str::ulid()->generate();
 
-        $api = $this->getJson(route('api.get.db.company.branch.read', $ulid));
+        $api = $this->getJson(route('api.get.branch.read', $ulid));
 
         $api->assertStatus(404);
     }
+
+    public function test_branch_api_call_read_any_with_status_filter_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()
+                ->has(Branch::factory()->setStatusActive()->count(2))
+                ->has(Branch::factory()->setStatusInactive()->count(2))
+            )
+            ->create();
+
+        $this->actingAs($user);
+        $company = $user->companies()->first();
+
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'status' => RecordStatusEnum::ACTIVE->value,
+            'refresh' => true,
+            'get' => ['limit' => 10],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonCount(2, 'data');
+    }
+
+    public function test_branch_api_call_read_any_with_is_main_filter_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()
+                ->has(Branch::factory()->setIsMainBranch(true)->count(1))
+                ->has(Branch::factory()->setIsMainBranch(false)->count(3))
+            )
+            ->create();
+
+        $this->actingAs($user);
+        $company = $user->companies()->first();
+
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'is_main' => true,
+            'refresh' => true,
+            'get' => ['limit' => 10],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonCount(1, 'data');
+        $this->assertTrue($api->json('data.0.is_main'));
+    }
+
+    public function test_branch_api_call_read_any_with_invalid_params_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+        $company = $user->companies()->first();
+
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
+            'company_id' => 'invalid-hashid',
+            'refresh' => true,
+            'get' => ['limit' => 10],
+        ]));
+
+        $api->assertJsonValidationErrors(['company_id']);
+    }
+
+    public function test_branch_api_call_read_any_with_include_id_expect_included_result()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()
+                ->has(Branch::factory()->setStatusActive()->count(15))
+            )
+            ->create();
+
+        $this->actingAs($user);
+        $company = $user->companies()->first();
+
+        // Get a branch that would typically be on the second page (assuming per_page=10)
+        // Since default sort is name asc, and include_id forces it to top
+        $lastBranch = $company->branches()->orderBy('name', 'asc')->get()->last();
+
+        $api = $this->getJson(route('api.get.branch.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'include_id' => Hashids::encode($lastBranch->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        // Check if the included branch is present in the first page
+        $data = $api->json('data');
+        $this->assertTrue(collect($data)->contains('ulid', $lastBranch->ulid));
+    }
 }
diff --git a/api/tests/Feature/API/BrandAPI/BrandAPICreateTest.php b/api/tests/Feature/API/BrandAPI/BrandAPICreateTest.php
new file mode 100644
index 000000000..1fa90e3a3
--- /dev/null
+++ b/api/tests/Feature/API/BrandAPI/BrandAPICreateTest.php
@@ -0,0 +1,214 @@
+<?php
+
+namespace Tests\Feature\API\BrandAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use Illuminate\Support\Facades\Config;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class BrandAPICreateTest extends APITestCase
+{
+    public function test_brand_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.save'), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_brand_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.save'), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_brand_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('brands', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_brand_api_call_store_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => Config::get('dcslab.KEYWORDS.AUTO'),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('brands', [
+            'company_id' => $company->id,
+            'name' => $payload['name'],
+        ]);
+
+        $this->assertDatabaseMissing('brands', [
+            'company_id' => $company->id,
+            'code' => Config::get('dcslab.KEYWORDS.AUTO'),
+        ]);
+    }
+
+    public function test_brand_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_brand_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+        $company_2 = $companies[1];
+
+        Brand::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = Brand::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('brands', [
+            'company_id' => $company_2->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_brand_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = [];
+
+        $api = $this->json('POST', route('api.post.brand.save'), $payload);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+
+    public function test_brand_api_call_store_with_sql_injection_payload_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => "'; DROP TABLE brands; --",
+            'name' => "'; DROP TABLE brands; --",
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.save'), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('brands', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/BrandAPI/BrandAPIDeleteTest.php b/api/tests/Feature/API/BrandAPI/BrandAPIDeleteTest.php
new file mode 100644
index 000000000..d07c11a40
--- /dev/null
+++ b/api/tests/Feature/API/BrandAPI/BrandAPIDeleteTest.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace Tests\Feature\API\BrandAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class BrandAPIDeleteTest extends APITestCase
+{
+    public function test_brand_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $brand = Brand::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.brand.delete', $brand->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_brand_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $brand = Brand::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.brand.delete', $brand->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_brand_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $brand = Brand::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.brand.delete', $brand->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('brands', [
+            'id' => $brand->id,
+        ]);
+    }
+
+    public function test_brand_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.brand.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_brand_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.brand.delete', null));
+    }
+
+    public function test_brand_api_call_delete_with_sql_injection_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+        $injection = $injections[$testIdx];
+
+        $api = $this->json('POST', route('api.post.brand.delete', $injection));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/BrandAPI/BrandAPIEditTest.php b/api/tests/Feature/API/BrandAPI/BrandAPIEditTest.php
new file mode 100644
index 000000000..0f67098c3
--- /dev/null
+++ b/api/tests/Feature/API/BrandAPI/BrandAPIEditTest.php
@@ -0,0 +1,172 @@
+<?php
+
+namespace Tests\Feature\API\BrandAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class BrandAPIEditTest extends APITestCase
+{
+    public function test_brand_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $brand = Brand::factory()->for($company)->create();
+
+        $brandArr = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.edit', $brand->ulid), $brandArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_brand_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $brand = Brand::factory()->for($company)->create();
+
+        $brandArr = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.edit', $brand->ulid), $brandArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_brand_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $brand = Brand::factory()->for($company)->create();
+
+        $brandArr = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.edit', $brand->ulid), $brandArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('brands', [
+            'id' => $brand->id,
+            'company_id' => $company->id,
+            'code' => $brandArr['code'],
+            'name' => $brandArr['name'],
+        ]);
+    }
+
+    public function test_brand_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        Brand::factory()->for($company)->count(2)->create();
+
+        $brands = $company->brands()->inRandomOrder()->take(2)->get();
+        $brand_1 = $brands[0];
+        $brand_2 = $brands[1];
+
+        $brandArr = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $brand_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.edit', $brand_2->ulid), $brandArr);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_brand_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        Brand::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $brand_2 = Brand::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $brandArr = Brand::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.edit', $brand_2->ulid), $brandArr);
+
+        $api->assertSuccessful();
+    }
+
+    public function test_brand_api_call_update_with_sql_injection_payload_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $brand = Brand::factory()->for($company)->create();
+
+        $brandArr = Brand::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => "'; DROP TABLE brands; --",
+            'name' => "'; DROP TABLE brands; --",
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.brand.edit', $brand->ulid), $brandArr);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('brands', [
+            'id' => $brand->id,
+            'company_id' => $company->id,
+            'code' => $brandArr['code'],
+            'name' => $brandArr['name'],
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/BrandAPI/BrandAPIReadTest.php b/api/tests/Feature/API/BrandAPI/BrandAPIReadTest.php
new file mode 100644
index 000000000..d81269254
--- /dev/null
+++ b/api/tests/Feature/API/BrandAPI/BrandAPIReadTest.php
@@ -0,0 +1,422 @@
+<?php
+
+namespace Tests\Feature\API\BrandAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class BrandAPIReadTest extends APITestCase
+{
+    public function test_brand_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_brand_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertForbidden();
+    }
+
+    public function test_brand_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $brand = Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read', $brand->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_brand_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $brand = Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read', $brand->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_brand_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_brand_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+        ]);
+    }
+
+    public function test_brand_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_brand_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->count(2)->create();
+
+        Brand::factory()->for($company)
+            ->create([
+                'name' => 'testing',
+            ]);
+
+        Brand::factory()->for($company)
+            ->create([
+                'code' => 'testing_code',
+            ]);
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 2,
+        ]);
+    }
+
+    public function test_brand_api_call_read_any_without_required_parameters_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertUnprocessable();
+    }
+
+    public function test_brand_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_brand_api_call_read_single_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $brand = Brand::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.brand.read', $brand->ulid));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+        ]);
+    }
+
+    public function test_brand_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.brand.read', null));
+    }
+
+    public function test_brand_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.brand.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/CashAccountAPI/CashAccountAPICreateTest.php b/api/tests/Feature/API/CashAccountAPI/CashAccountAPICreateTest.php
new file mode 100644
index 000000000..9fde1f362
--- /dev/null
+++ b/api/tests/Feature/API/CashAccountAPI/CashAccountAPICreateTest.php
@@ -0,0 +1,278 @@
+<?php
+
+namespace Tests\Feature\API\CashAccountAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use Illuminate\Support\Facades\Config;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CashAccountAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_cash_account_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_cash_account_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_cash_account_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'name' => '<script>alert("xss")</script>',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('cash_accounts', [
+            'company_id' => $company->id,
+            'name' => 'alert("xss")',
+        ]);
+    }
+
+    public function test_cash_account_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'name' => '<script>alert("xss")</script>',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload, ['X-Sanitizer-Mode' => 'encode']);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('cash_accounts', [
+            'company_id' => $company->id,
+            'name' => '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;',
+        ]);
+    }
+
+    public function test_cash_account_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('cash_accounts', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_cash_account_api_call_store_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'code' => Config::get('dcslab.KEYWORDS.AUTO'),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('cash_accounts', [
+            'company_id' => $company->id,
+            'branch_id' => $branch->id,
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_cash_account_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($company->id + 999), // Invalid Branch ID
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertStatus(422);
+        $api->assertJsonValidationErrors(['branch_id']);
+    }
+
+    public function test_cash_account_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        CashAccount::factory()->for($company)->create([
+            'code' => 'test1',
+            'branch_id' => $branch->id,
+        ]);
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_cash_account_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->has(Company::factory()->setStatusActive()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->whereHas('branches')->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        $branch_1 = $company_1->branches()->inRandomOrder()->first();
+
+        CashAccount::factory()->for($company_1)->create([
+            'code' => 'test1',
+            'branch_id' => $branch_1->id,
+        ]);
+
+        $branch_2 = $company_2->branches()->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'branch_id' => Hashids::encode($branch_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('cash_accounts', [
+            'company_id' => $company_2->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_cash_account_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = [];
+
+        $api = $this->json('POST', route('api.post.cash_account.save'), $payload);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name', 'is_bank', 'is_active']);
+    }
+}
diff --git a/api/tests/Feature/API/CashAccountAPI/CashAccountAPIDeleteTest.php b/api/tests/Feature/API/CashAccountAPI/CashAccountAPIDeleteTest.php
new file mode 100644
index 000000000..6271a2273
--- /dev/null
+++ b/api/tests/Feature/API/CashAccountAPI/CashAccountAPIDeleteTest.php
@@ -0,0 +1,106 @@
+<?php
+
+namespace Tests\Feature\API\CashAccountAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class CashAccountAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_cash_account_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $api = $this->json('POST', route('api.post.cash_account.delete', $cashAccount->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_cash_account_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $api = $this->json('POST', route('api.post.cash_account.delete', $cashAccount->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_cash_account_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $api = $this->json('POST', route('api.post.cash_account.delete', $cashAccount->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('cash_accounts', [
+            'id' => $cashAccount->id,
+        ]);
+    }
+
+    public function test_cash_account_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.cash_account.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_cash_account_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $this->json('POST', route('api.post.cash_account.delete', null));
+    }
+}
diff --git a/api/tests/Feature/API/CashAccountAPI/CashAccountAPIEditTest.php b/api/tests/Feature/API/CashAccountAPI/CashAccountAPIEditTest.php
new file mode 100644
index 000000000..533852a7e
--- /dev/null
+++ b/api/tests/Feature/API/CashAccountAPI/CashAccountAPIEditTest.php
@@ -0,0 +1,225 @@
+<?php
+
+namespace Tests\Feature\API\CashAccountAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CashAccountAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_cash_account_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.edit', $cashAccount->ulid), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_cash_account_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.edit', $cashAccount->ulid), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_cash_account_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => '<script>alert("xss")</script>',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.edit', $cashAccount->ulid), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('cash_accounts', [
+            'id' => $cashAccount->id,
+            'company_id' => $company->id,
+            'name' => 'alert("xss")',
+        ]);
+    }
+
+    public function test_cash_account_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => '<script>alert("xss")</script>',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.edit', $cashAccount->ulid), $payload, ['X-Sanitizer-Mode' => 'encode']);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('cash_accounts', [
+            'id' => $cashAccount->id,
+            'company_id' => $company->id,
+            'name' => '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;',
+        ]);
+    }
+
+    public function test_cash_account_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.edit', $cashAccount->ulid), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('cash_accounts', [
+            'id' => $cashAccount->id,
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_cash_account_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        CashAccount::factory()->for($company)->count(2)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $cashAccounts = $company->cashAccounts()->inRandomOrder()->take(2)->get();
+        $cashAccount_1 = $cashAccounts[0];
+        $cashAccount_2 = $cashAccounts[1];
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'code' => $cashAccount_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.edit', $cashAccount_2->ulid), $payload);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_cash_account_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->has(Company::factory()->setStatusActive()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->whereHas('branches')->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        $branch_1 = $company_1->branches()->inRandomOrder()->first();
+        CashAccount::factory()->for($company_1)->create([
+            'code' => 'test1',
+            'branch_id' => $branch_1->id,
+        ]);
+
+        $company_2 = $companies[1];
+        $branch_2 = $company_2->branches()->inRandomOrder()->first();
+        $cashAccount_2 = CashAccount::factory()->for($company_2)->create([
+            'code' => 'test2',
+            'branch_id' => $branch_2->id,
+        ]);
+
+        $payload = CashAccount::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.cash_account.edit', $cashAccount_2->ulid), $payload);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/CashAccountAPI/CashAccountAPIReadTest.php b/api/tests/Feature/API/CashAccountAPI/CashAccountAPIReadTest.php
new file mode 100644
index 000000000..30a8cf6ab
--- /dev/null
+++ b/api/tests/Feature/API/CashAccountAPI/CashAccountAPIReadTest.php
@@ -0,0 +1,381 @@
+<?php
+
+namespace Tests\Feature\API\CashAccountAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CashAccountAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_cash_account_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $api = $this->getJson(route('api.get.cash_account.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_cash_account_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $api = $this->getJson(route('api.get.cash_account.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_cash_account_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $ulid = $cashAccount->ulid;
+
+        $api = $this->getJson(route('api.get.cash_account.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_cash_account_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $ulid = $cashAccount->ulid;
+
+        $api = $this->getJson(route('api.get.cash_account.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_cash_account_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.cash_account.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.cash_account.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_cash_account_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $api = $this->getJson(route('api.get.cash_account.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.cash_account.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+        ]);
+    }
+
+    public function test_cash_account_api_call_read_any_with_search_expect_filtered()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'name' => 'Searchable Name',
+            'branch_id' => $branch->id,
+        ]);
+
+        CashAccount::factory()->for($company)->create([
+            'name' => 'Other Name',
+            'branch_id' => $branch->id,
+        ]);
+
+        $api = $this->getJson(route('api.get.cash_account.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'Searchable',
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonFragment([
+            'name' => 'Searchable Name',
+        ]);
+        $api->assertJsonMissing([
+            'name' => 'Other Name',
+        ]);
+    }
+
+    public function test_cash_account_api_call_read_any_with_branch_filter_expect_filtered()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branches = $company->branches()->inRandomOrder()->take(2)->get();
+
+        if ($branches->count() < 2) {
+            $branch_1 = $branches->first();
+            $branch_2 = Branch::factory()->for($company)->create();
+        } else {
+            $branch_1 = $branches[0];
+            $branch_2 = $branches[1];
+        }
+
+        CashAccount::factory()->for($company)->create([
+            'name' => 'Account Branch 1',
+            'branch_id' => $branch_1->id,
+        ]);
+
+        CashAccount::factory()->for($company)->create([
+            'name' => 'Account Branch 2',
+            'branch_id' => $branch_2->id,
+        ]);
+
+        $api = $this->getJson(route('api.get.cash_account.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch_1->id),
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonFragment([
+            'name' => 'Account Branch 1',
+        ]);
+        $api->assertJsonMissing([
+            'name' => 'Account Branch 2',
+        ]);
+    }
+
+    public function test_cash_account_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $cashAccount = CashAccount::factory()->for($company)->create([
+            'branch_id' => $branch->id,
+        ]);
+
+        $ulid = $cashAccount->ulid;
+
+        $api = $this->getJson(route('api.get.cash_account.read', $ulid));
+
+        $api->assertSuccessful();
+        $api->assertJsonFragment([
+            'name' => $cashAccount->name,
+        ]);
+    }
+
+    public function test_cash_account_api_call_read_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.cash_account.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/CompanyAPI/CompanyAPICreateTest.php b/api/tests/Feature/API/CompanyAPI/CompanyAPICreateTest.php
index a5b481e82..9d371301b 100644
--- a/api/tests/Feature/API/CompanyAPI/CompanyAPICreateTest.php
+++ b/api/tests/Feature/API/CompanyAPI/CompanyAPICreateTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\CompanyAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Company;
 use App\Models\Role;
 use App\Models\User;
@@ -18,13 +18,13 @@ protected function setUp(): void
     public function test_company_api_call_store_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
-        $companyArr = Company::factory()->setStatusActive()->setIsDefault()
+        $payload = Company::factory()->setStatusActive()->setIsDefault()
             ->make()->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.company.save'), $companyArr);
+        $api = $this->json('POST', route('api.post.company.save'), $payload);
 
         $api->assertUnauthorized();
     }
@@ -36,10 +36,10 @@ public function test_company_api_call_store_without_access_right_expect_unauthor
 
         $this->actingAs($user);
 
-        $companyArr = Company::factory()->setStatusActive()->setIsDefault()
+        $payload = Company::factory()->setStatusActive()->setIsDefault()
             ->make()->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.company.save'), $companyArr);
+        $api = $this->json('POST', route('api.post.company.save'), $payload);
 
         $api->assertForbidden();
     }
@@ -57,37 +57,130 @@ public function test_company_api_call_store_with_script_tags_in_payload_expect_e
     public function test_company_api_call_store_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
-        $companyArr = Company::factory()->setStatusActive()->setIsDefault()
+        $payload = Company::factory()->setStatusActive()->setIsDefault()
             ->make()->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.company.save'), $companyArr);
+        $api = $this->json('POST', route('api.post.company.save'), $payload);
 
         $api->assertSuccessful();
         $this->assertDatabaseHas('companies', [
-            'code' => $companyArr['code'],
-            'name' => $companyArr['name'],
-            'address' => $companyArr['address'],
-            'default' => $companyArr['default'],
-            'status' => $companyArr['status'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'address' => $payload['address'],
+            'default' => $payload['default'],
+            'status' => $payload['status'],
+        ]);
+    }
+
+    public function test_company_api_call_store_with_existing_code_in_same_user_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->state([
+                'code' => 'CP001',
+            ]))
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = Company::factory()->setStatusActive()->make([
+            'code' => 'CP001',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.company.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonValidationErrors(['code']);
+    }
+
+    public function test_company_api_call_store_with_existing_name_in_same_user_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->state([
+                'name' => 'Company Sama',
+            ]))
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = Company::factory()->setStatusActive()->make([
+            'name' => 'Company Sama',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.company.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonValidationErrors(['name']);
+    }
+
+    public function test_company_api_call_store_with_existing_code_in_different_user_expect_successful()
+    {
+        User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->state([
+                'code' => 'CP001',
+            ]))
+            ->create();
+
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = Company::factory()->setStatusActive()->make([
+            'code' => 'CP001',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.company.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('companies', [
+            'code' => 'CP001',
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_company_api_call_store_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = Company::factory()->setStatusActive()->make([
+            'code' => config('dcslab.KEYWORDS.AUTO'),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.company.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseMissing('companies', [
+            'code' => config('dcslab.KEYWORDS.AUTO'),
+            'name' => $payload['name'],
+        ]);
+        $this->assertDatabaseHas('companies', [
+            'name' => $payload['name'],
         ]);
     }
 
     public function test_company_api_call_store_with_empty_string_parameters_expect_validation_error()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
-        $companyArr = [];
+        $payload = [];
 
-        $api = $this->json('POST', route('api.post.db.company.company.save'), $companyArr);
+        $api = $this->json('POST', route('api.post.company.save'), $payload);
 
         $api->assertJsonValidationErrors(['code', 'name', 'status']);
     }
diff --git a/api/tests/Feature/API/CompanyAPI/CompanyAPIDeleteTest.php b/api/tests/Feature/API/CompanyAPI/CompanyAPIDeleteTest.php
index 22eb80223..62efdcbb7 100644
--- a/api/tests/Feature/API/CompanyAPI/CompanyAPIDeleteTest.php
+++ b/api/tests/Feature/API/CompanyAPI/CompanyAPIDeleteTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\CompanyAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Company;
 use App\Models\Role;
 use App\Models\User;
@@ -24,7 +24,7 @@ public function test_company_api_call_delete_without_authorization_expect_unauth
         $idxDefaultCompany = random_int(0, $companyCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->count($companyCount)
                 ->state(new Sequence(
                     fn (Sequence $sequence) => [
@@ -36,7 +36,7 @@ public function test_company_api_call_delete_without_authorization_expect_unauth
 
         $company = $user->companies()->where('default', '=', false)->first();
 
-        $api = $this->json('POST', route('api.post.db.company.company.delete', $company->ulid));
+        $api = $this->json('POST', route('api.post.company.delete', $company->ulid));
 
         $api->assertUnauthorized();
     }
@@ -60,7 +60,7 @@ public function test_company_api_call_delete_without_access_right_expect_unautho
 
         $company = $user->companies()->where('default', '=', false)->first();
 
-        $api = $this->json('POST', route('api.post.db.company.company.delete', $company->ulid));
+        $api = $this->json('POST', route('api.post.company.delete', $company->ulid));
 
         $api->assertForbidden();
     }
@@ -71,7 +71,7 @@ public function test_company_api_call_delete_expect_successful()
         $idxDefaultCompany = random_int(0, $companyCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->count($companyCount)
                 ->state(new Sequence(
                     fn (Sequence $sequence) => [
@@ -85,7 +85,7 @@ public function test_company_api_call_delete_expect_successful()
 
         $company = $user->companies()->where('default', '=', false)->first();
 
-        $api = $this->json('POST', route('api.post.db.company.company.delete', $company->ulid));
+        $api = $this->json('POST', route('api.post.company.delete', $company->ulid));
 
         $api->assertSuccessful();
         $this->assertSoftDeleted('companies', [
@@ -101,7 +101,7 @@ public function test_company_api_call_delete_of_nonexistance_ulid_expect_not_fou
 
         $ulid = Str::ulid()->generate();
 
-        $api = $this->json('POST', route('api.post.db.company.company.delete', $ulid));
+        $api = $this->json('POST', route('api.post.company.delete', $ulid));
 
         $api->assertStatus(404);
     }
@@ -112,6 +112,6 @@ public function test_company_api_call_delete_without_parameters_expect_failed()
         $user = User::factory()->create();
 
         $this->actingAs($user);
-        $api = $this->json('POST', route('api.post.db.company.company.delete', null));
+        $api = $this->json('POST', route('api.post.company.delete', null));
     }
 }
diff --git a/api/tests/Feature/API/CompanyAPI/CompanyAPIEditTest.php b/api/tests/Feature/API/CompanyAPI/CompanyAPIEditTest.php
index 6cbd250e8..ca1e409ea 100644
--- a/api/tests/Feature/API/CompanyAPI/CompanyAPIEditTest.php
+++ b/api/tests/Feature/API/CompanyAPI/CompanyAPIEditTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\CompanyAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Company;
 use App\Models\Role;
 use App\Models\User;
@@ -19,15 +19,15 @@ protected function setUp(): void
     public function test_company_api_call_update_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $company = $user->companies->first();
 
-        $companyArr = Company::factory()->setStatusActive()->make()->toArray();
+        $payload = Company::factory()->setStatusActive()->make()->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.company.edit', $company->ulid), $companyArr);
+        $api = $this->json('POST', route('api.post.company.edit', $company->ulid), $payload);
 
         $api->assertUnauthorized();
     }
@@ -42,9 +42,9 @@ public function test_company_api_call_update_without_access_right_expect_unautho
 
         $company = $user->companies->first();
 
-        $companyArr = Company::factory()->setStatusActive()->make()->toArray();
+        $payload = Company::factory()->setStatusActive()->make()->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.company.edit', $company->ulid), $companyArr);
+        $api = $this->json('POST', route('api.post.company.edit', $company->ulid), $payload);
 
         $api->assertForbidden();
     }
@@ -62,7 +62,7 @@ public function test_company_api_call_update_with_script_tags_in_payload_expect_
     public function test_company_api_call_update_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
@@ -70,18 +70,18 @@ public function test_company_api_call_update_expect_successful()
 
         $company = $user->companies->first();
 
-        $companyArr = Company::factory()->setStatusActive()->make()->toArray();
+        $payload = Company::factory()->setStatusActive()->setIsDefault()->make()->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.company.edit', $company->ulid), $companyArr);
+        $api = $this->json('POST', route('api.post.company.edit', $company->ulid), $payload);
 
         $api->assertSuccessful();
         $this->assertDatabaseHas('companies', [
             'id' => $company->id,
-            'code' => $companyArr['code'],
-            'name' => $companyArr['name'],
-            'address' => $companyArr['address'],
-            'default' => $companyArr['default'],
-            'status' => $companyArr['status'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'address' => $payload['address'],
+            'default' => $payload['default'],
+            'status' => $payload['status'],
         ]);
     }
 
@@ -91,7 +91,7 @@ public function test_company_api_call_update_and_use_existing_code_in_same_user_
         $idxDefaultCompany = random_int(0, $companyCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->count($companyCount)
                 ->state(new Sequence(
                     fn (Sequence $sequence) => [
@@ -107,15 +107,101 @@ public function test_company_api_call_update_and_use_existing_code_in_same_user_
         $company_1 = $companies[0];
         $company_2 = $companies[1];
 
-        $companyArr = Company::factory()->make([
+        $payload = Company::factory()->make([
             'code' => $company_2->code,
         ])->toArray();
 
-        $api = $this->json('POST', route('api.post.db.company.company.edit', $company_1->ulid), $companyArr);
+        $api = $this->json('POST', route('api.post.company.edit', $company_1->ulid), $payload);
 
         $api->assertUnprocessable();
         $api->assertJsonStructure([
             'errors',
         ]);
     }
+
+    public function test_company_api_call_update_and_use_existing_name_in_same_user_expect_failed()
+    {
+        $companyCount = 2;
+        $idxDefaultCompany = random_int(0, $companyCount - 1);
+
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->count($companyCount)
+                ->state(new Sequence(
+                    fn (Sequence $sequence) => [
+                        'default' => $sequence->index == $idxDefaultCompany,
+                    ]
+                ))
+            )
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->take(2)->get();
+        $company_1 = $companies[0];
+        $company_2 = $companies[1];
+
+        $payload = Company::factory()->make([
+            'name' => $company_2->name,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.company.edit', $company_1->ulid), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonValidationErrors(['name']);
+    }
+
+    public function test_company_api_call_update_and_use_existing_code_in_different_user_expect_successful()
+    {
+        User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->state([
+                'code' => 'CP001',
+            ]))
+            ->create();
+
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->first();
+        $payload = Company::factory()->setStatusActive()->make([
+            'code' => 'CP001',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.company.edit', $company->ulid), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('companies', [
+            'id' => $company->id,
+            'code' => 'CP001',
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_company_api_call_update_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->first();
+        $payload = Company::factory()->setStatusActive()->make([
+            'code' => config('dcslab.KEYWORDS.AUTO'),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.company.edit', $company->ulid), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseMissing('companies', [
+            'id' => $company->id,
+            'code' => config('dcslab.KEYWORDS.AUTO'),
+        ]);
+    }
 }
diff --git a/api/tests/Feature/API/CompanyAPI/CompanyAPIReadTest.php b/api/tests/Feature/API/CompanyAPI/CompanyAPIReadTest.php
index 9fec9a29a..4cf132242 100644
--- a/api/tests/Feature/API/CompanyAPI/CompanyAPIReadTest.php
+++ b/api/tests/Feature/API/CompanyAPI/CompanyAPIReadTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\CompanyAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Company;
 use App\Models\Role;
 use App\Models\User;
@@ -21,17 +21,18 @@ protected function setUp(): void
     public function test_company_api_call_read_any_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertUnauthorized();
@@ -45,13 +46,14 @@ public function test_company_api_call_read_any_without_access_right_expect_unaut
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertForbidden();
@@ -60,13 +62,13 @@ public function test_company_api_call_read_any_without_access_right_expect_unaut
     public function test_company_api_call_read_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.company.read', $company->ulid));
+        $api = $this->getJson(route('api.get.company.read', $company->ulid));
 
         $api->assertUnauthorized();
     }
@@ -81,7 +83,7 @@ public function test_company_api_call_read_without_access_right_expect_unauthori
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.company.read', $company->ulid));
+        $api = $this->getJson(route('api.get.company.read', $company->ulid));
 
         $api->assertForbidden();
     }
@@ -89,7 +91,7 @@ public function test_company_api_call_read_without_access_right_expect_unauthori
     public function test_company_api_call_read_with_sql_injection_expect_injection_ignored()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
@@ -100,102 +102,25 @@ public function test_company_api_call_read_with_sql_injection_expect_injection_i
             '1 UNION SELECT username, password FROM users',
             '1; DROP TABLE users',
             "' OR '1'='1' --",
-            "' OR \'1\'=\'1",
             '1 OR SLEEP(5)',
-            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
-            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
             "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
-            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
-            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
             "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
-            '1 OR 1=1; DROP TABLE users; --',
-            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
-            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
-            "1; EXEC xp_cmdshell('echo vulnerable'); --",
-            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
-            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
-            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
-            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
-            '1; SELECT pg_sleep(5); --',
-            "1 AND SLEEP(5) AND 'abc'='abc",
-            "1 AND SLEEP(5) AND 'xyz'='xyz",
-            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
-            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
-            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
-            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
-            "1'; WAITFOR DELAY '0:0:5' --",
-            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
-            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
-            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
-            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
-            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
-            '1 AND (SELECT COUNT(*) FROM users) > 10',
-            '1 AND (SELECT COUNT(*) FROM users) > 100',
-            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
-            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
-            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
-            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
-            '1 OR 1=1; SELECT * FROM users;',
-            "1' OR 1=1; SELECT * FROM users;",
-            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
-            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
-            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
-            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
-            "' OR 1=1 --",
             "admin'--",
-            "admin' #",
-            "' OR 'x'='x",
-            "' OR 'a'='a'",
-            "' OR 'a'='a'--",
-            "' OR 1=1",
-            "' OR 1=1--",
-            "' OR 1=1#",
-            "' OR 1=1 /*",
-            "' OR '1'='1'--",
-            "' OR '1'='1'/*",
-            "' OR '1'='1' #",
-            "' OR '1'='1' /*",
-            "' OR '1'='1' or ''='",
-            "' OR '1'='1' or 'a'='a",
-            "' OR '1'='1' or 'a'='a'--",
-            "' OR '1'='1' or 'a'='a'/*",
-            "' OR '1'='1' or 'a'='a' #",
-            "' OR '1'='1' or 'a'='a' /*",
-            '1; SELECT * FROM users WHERE 1=1',
-            '1; SELECT * FROM users WHERE 1=1--',
-            '1; SELECT * FROM users WHERE 1=1/*',
-            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
-            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
-            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
-            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
-            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
-            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
-            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
-            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
-            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
-            "1' OR '1'='1' UNION SELECT username, password FROM users",
-            "1' OR '1'='1' UNION SELECT username, password FROM users--",
-            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
-            "1' OR '1'='1' UNION SELECT username, password FROM users #",
-            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
-            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
-            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
-            "' OR '",
-            "1' OR '1'='1' UNION SELECT NULL",
-            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
-            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
-            "' OR '1'='1' or",
+            "' OR 1=1 --",
         ];
 
-        $testIdx = random_int(0, count($injections));
+        $testIdx = random_int(0, count($injections) - 1);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => $injections[$testIdx],
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
+            'default' => '',
+            'status' => '',
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -214,15 +139,15 @@ public function test_company_api_call_read_with_sql_injection_expect_injection_i
             ],
         ]);
 
-        $testIdx = random_int(0, count($injections));
+        $testIdx = random_int(0, count($injections) - 1);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => $injections[$testIdx],
-            'paginate' => false,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -235,19 +160,20 @@ public function test_company_api_call_read_with_sql_injection_expect_injection_i
     public function test_company_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -261,13 +187,13 @@ public function test_company_api_call_read_any_with_or_without_pagination_expect
             ],
         ]);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => false,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -276,18 +202,20 @@ public function test_company_api_call_read_any_with_or_without_pagination_expect
     public function test_company_api_call_read_any_with_pagination_expect_several_per_page()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 25,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -316,7 +244,7 @@ public function test_company_api_call_read_any_with_search_expect_filtered_resul
         $testName = Company::factory()->insertStringInName('testing')->make()->name;
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->count($companyCount)
                 ->state(new Sequence(
                     fn (Sequence $sequence) => [
@@ -329,13 +257,14 @@ public function test_company_api_call_read_any_with_search_expect_filtered_resul
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => 'testing',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -357,13 +286,15 @@ public function test_company_api_call_read_any_with_search_expect_filtered_resul
     public function test_company_api_call_read_any_without_search_querystring_expect_failed()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', []));
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
+        ]));
 
         $api->assertUnprocessable();
     }
@@ -371,19 +302,20 @@ public function test_company_api_call_read_any_without_search_querystring_expect
     public function test_company_api_call_read_any_with_special_char_in_search_expect_results()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
-            'search' => "!#$%&'()*+,-./:;<=>?@[\]^_`{|}~",
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
             'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -398,40 +330,32 @@ public function test_company_api_call_read_any_with_special_char_in_search_expec
         ]);
     }
 
-    public function test_company_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    public function test_company_api_call_read_any_with_negative_value_in_parameters_expect_failed()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.company.company.read_any', [
-            'userId' => $user->id,
+        $api = $this->getJson(route('api.get.company.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => -1,
-            'per_page' => -10,
             'refresh' => false,
+            'paginate' => [
+                'page' => -1,
+                'per_page' => -10,
+            ],
         ]));
 
-        $api->assertSuccessful();
-        $api->assertJsonStructure([
-            'data',
-            'links' => [
-                'first', 'last', 'prev', 'next',
-            ],
-            'meta' => [
-                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
-            ],
-        ]);
+        $api->assertStatus(422);
     }
 
     public function test_company_api_call_read_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
@@ -439,7 +363,7 @@ public function test_company_api_call_read_expect_successful()
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $api = $this->getJson(route('api.get.db.company.company.read', $company->ulid));
+        $api = $this->getJson(route('api.get.company.read', $company->ulid));
 
         $api->assertSuccessful();
     }
@@ -448,18 +372,18 @@ public function test_company_api_call_read_without_ulid_expect_exception()
     {
         $this->expectException(Exception::class);
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
-        $this->getJson(route('api.get.db.company.company.read', null));
+        $this->getJson(route('api.get.company.read', null));
     }
 
     public function test_company_api_call_read_with_nonexistance_ulid_expect_not_found()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
@@ -467,7 +391,7 @@ public function test_company_api_call_read_with_nonexistance_ulid_expect_not_fou
 
         $ulid = Str::ulid()->generate();
 
-        $api = $this->getJson(route('api.get.db.company.company.read', $ulid));
+        $api = $this->getJson(route('api.get.company.read', $ulid));
 
         $api->assertStatus(404);
     }
diff --git a/api/tests/Feature/API/CustomerAPI/CustomerAPICreateTest.php b/api/tests/Feature/API/CustomerAPI/CustomerAPICreateTest.php
new file mode 100644
index 000000000..91ddfdd3f
--- /dev/null
+++ b/api/tests/Feature/API/CustomerAPI/CustomerAPICreateTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\CustomerAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.save'), $customerArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_customer_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.save'), $customerArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_customer_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_customer_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.save'), $customerArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customers', [
+            'company_id' => $company->id,
+            'code' => $customerArr['code'],
+            'name' => $customerArr['name'],
+        ]);
+    }
+
+    public function test_customer_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.save'), $customerArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_customer_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        Customer::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.save'), $customerArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customers', [
+            'company_id' => $company_2->id,
+            'code' => $customerArr['code'],
+            'name' => $customerArr['name'],
+        ]);
+    }
+
+    public function test_customer_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $customerArr = [];
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.save'), $customerArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/CustomerAPI/CustomerAPIDeleteTest.php b/api/tests/Feature/API/CustomerAPI/CustomerAPIDeleteTest.php
new file mode 100644
index 000000000..eedea9f01
--- /dev/null
+++ b/api/tests/Feature/API/CustomerAPI/CustomerAPIDeleteTest.php
@@ -0,0 +1,94 @@
+<?php
+
+namespace Tests\Feature\API\CustomerAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class CustomerAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customer = Customer::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.delete', $customer->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_customer_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customer = Customer::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.delete', $customer->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_customer_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customer = Customer::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.delete', $customer->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('customers', [
+            'id' => $customer->id,
+        ]);
+    }
+
+    public function test_customer_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_customer_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $this->json('POST', route('api.post.db.customer.customer.delete', null));
+    }
+}
diff --git a/api/tests/Feature/API/CustomerAPI/CustomerAPIEditTest.php b/api/tests/Feature/API/CustomerAPI/CustomerAPIEditTest.php
new file mode 100644
index 000000000..59dc8d2de
--- /dev/null
+++ b/api/tests/Feature/API/CustomerAPI/CustomerAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\CustomerAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customer = Customer::factory()->for($company)->create();
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.edit', $customer->ulid), $customerArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customer = Customer::factory()->for($company)->create();
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.edit', $customer->ulid), $customerArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customer = Customer::factory()->for($company)->create();
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.edit', $customer->ulid), $customerArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customers', [
+            'id' => $customer->id,
+            'company_id' => $company->id,
+            'code' => $customerArr['code'],
+            'name' => $customerArr['name'],
+        ]);
+    }
+
+    public function test_customer_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        Customer::factory()->for($company)->count(2)->create();
+
+        $customers = $company->customers()->inRandomOrder()->take(2)->get();
+        $customer_1 = $customers[0];
+        $customer_2 = $customers[1];
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $customer_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.edit', $customer_2->ulid), $customerArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_customer_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        Customer::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $customer_2 = Customer::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $customerArr = Customer::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer.edit', $customer_2->ulid), $customerArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/CustomerAPI/CustomerAPIReadTest.php b/api/tests/Feature/API/CustomerAPI/CustomerAPIReadTest.php
new file mode 100644
index 000000000..a26570bec
--- /dev/null
+++ b/api/tests/Feature/API/CustomerAPI/CustomerAPIReadTest.php
@@ -0,0 +1,448 @@
+<?php
+
+namespace Tests\Feature\API\CustomerAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customer = Customer::factory()->for($company)->create();
+
+        $ulid = $customer->ulid;
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customer = Customer::factory()->for($company)->create();
+
+        $ulid = $customer->ulid;
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            "' OR '1'='1' --",
+            "' OR 1=1 --",
+            "admin'--",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR SLEEP(5)',
+            '1; SELECT pg_sleep(5); --',
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_customer_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_customer_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_customer_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)
+            ->count(2)->create();
+
+        Customer::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_customer_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_customer_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_customer_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Customer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_customer_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customer = Customer::factory()->for($company)->create();
+
+        $ulid = $customer->ulid;
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_customer_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.db.customer.customer.read', null));
+    }
+
+    public function test_customer_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.db.customer.customer.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPICreateTest.php b/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPICreateTest.php
new file mode 100644
index 000000000..52b05529b
--- /dev/null
+++ b/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPICreateTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\CustomerAddressAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\CustomerAddress;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerAddressAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_address_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.save'), $customerAddressArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_customer_address_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.save'), $customerAddressArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_customer_address_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_address_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_customer_address_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.save'), $customerAddressArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customer_addresses', [
+            'company_id' => $company->id,
+            'code' => $customerAddressArr['code'],
+            'name' => $customerAddressArr['name'],
+        ]);
+    }
+
+    public function test_customer_address_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_address_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.save'), $customerAddressArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_customer_address_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        CustomerAddress::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.save'), $customerAddressArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customer_addresses', [
+            'company_id' => $company_2->id,
+            'code' => $customerAddressArr['code'],
+            'name' => $customerAddressArr['name'],
+        ]);
+    }
+
+    public function test_customer_address_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $customerAddressArr = [];
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.save'), $customerAddressArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIDeleteTest.php b/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIDeleteTest.php
new file mode 100644
index 000000000..85ab021ec
--- /dev/null
+++ b/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\CustomerAddressAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\CustomerAddress;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class CustomerAddressAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_address_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.delete', $customerAddress->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_address_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.delete', $customerAddress->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_address_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.delete', $customerAddress->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('customer_addresses', [
+            'id' => $customerAddress->id,
+        ]);
+    }
+
+    public function test_customer_address_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_customer_address_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIEditTest.php b/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIEditTest.php
new file mode 100644
index 000000000..006131575
--- /dev/null
+++ b/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\CustomerAddressAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\CustomerAddress;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerAddressAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_address_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.edit', $customerAddress->ulid), $customerAddressArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_address_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.edit', $customerAddress->ulid), $customerAddressArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_address_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_address_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_address_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.edit', $customerAddress->ulid), $customerAddressArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customer_addresses', [
+            'id' => $customerAddress->id,
+            'company_id' => $company->id,
+            'code' => $customerAddressArr['code'],
+            'name' => $customerAddressArr['name'],
+        ]);
+    }
+
+    public function test_customer_address_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_address_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        CustomerAddress::factory()->for($company)->count(2)->create();
+
+        $customerAddresses = $company->customerAddresses()->inRandomOrder()->take(2)->get();
+        $customerAddress_1 = $customerAddresses[0];
+        $customerAddress_2 = $customerAddresses[1];
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $customerAddress_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.edit', $customerAddress_2->ulid), $customerAddressArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_customer_address_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        CustomerAddress::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $customerAddress_2 = CustomerAddress::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $customerAddressArr = CustomerAddress::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.customer.customer_address.edit', $customerAddress_2->ulid), $customerAddressArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIReadTest.php b/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIReadTest.php
new file mode 100644
index 000000000..097941a1e
--- /dev/null
+++ b/api/tests/Feature/API/CustomerAddressAPI/CustomerAddressAPIReadTest.php
@@ -0,0 +1,539 @@
+<?php
+
+namespace Tests\Feature\API\CustomerAddressAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\CustomerAddress;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerAddressAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_address_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_address_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_address_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $ulid = $customerAddress->ulid;
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_address_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $ulid = $customerAddress->ulid;
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_address_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            "' OR \'1\'=\'1",
+            '1 OR SLEEP(5)',
+            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
+            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR 1=1; DROP TABLE users; --',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
+            "1; EXEC xp_cmdshell('echo vulnerable'); --",
+            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
+            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
+            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
+            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
+            '1; SELECT pg_sleep(5); --',
+            "1 AND SLEEP(5) AND 'abc'='abc",
+            "1 AND SLEEP(5) AND 'xyz'='xyz",
+            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
+            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
+            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
+            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
+            "1'; WAITFOR DELAY '0:0:5' --",
+            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
+            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
+            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
+            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
+            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
+            '1 AND (SELECT COUNT(*) FROM users) > 10',
+            '1 AND (SELECT COUNT(*) FROM users) > 100',
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
+            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
+            '1 OR 1=1; SELECT * FROM users;',
+            "1' OR 1=1; SELECT * FROM users;",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "' OR 1=1 --",
+            "admin'--",
+            "admin' #",
+            "' OR 'x'='x",
+            "' OR 'a'='a'",
+            "' OR 'a'='a'--",
+            "' OR 1=1",
+            "' OR 1=1--",
+            "' OR 1=1#",
+            "' OR 1=1 /*",
+            "' OR '1'='1'--",
+            "' OR '1'='1'/*",
+            "' OR '1'='1' #",
+            "' OR '1'='1' /*",
+            "' OR '1'='1' or ''='",
+            "' OR '1'='1' or 'a'='a",
+            "' OR '1'='1' or 'a'='a'--",
+            "' OR '1'='1' or 'a'='a'/*",
+            "' OR '1'='1' or 'a'='a' #",
+            "' OR '1'='1' or 'a'='a' /*",
+            '1; SELECT * FROM users WHERE 1=1',
+            '1; SELECT * FROM users WHERE 1=1--',
+            '1; SELECT * FROM users WHERE 1=1/*',
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users",
+            "1' OR '1'='1' UNION SELECT username, password FROM users--",
+            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users #",
+            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
+            "' OR '",
+            "1' OR '1'='1' UNION SELECT NULL",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
+            "' OR '1'='1' or",
+        ];
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_customer_address_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_customer_address_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_customer_address_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)
+            ->count(2)->create();
+
+        CustomerAddress::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_customer_address_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_customer_address_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_customer_address_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerAddress::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_customer_address_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerAddress = CustomerAddress::factory()->for($company)->create();
+
+        $ulid = $customerAddress->ulid;
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_customer_address_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.db.customer.customer_address.read', null));
+    }
+
+    public function test_customer_address_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.db.customer.customer_address.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPICreateTest.php b/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPICreateTest.php
new file mode 100644
index 000000000..0f1783cce
--- /dev/null
+++ b/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPICreateTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\CustomerGroupAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerGroupAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_group_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.save'), $customerGroupArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_customer_group_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.save'), $customerGroupArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_customer_group_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_group_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_customer_group_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.save'), $customerGroupArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customer_groups', [
+            'company_id' => $company->id,
+            'code' => $customerGroupArr['code'],
+            'name' => $customerGroupArr['name'],
+        ]);
+    }
+
+    public function test_customer_group_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_group_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.save'), $customerGroupArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_customer_group_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        CustomerGroup::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.save'), $customerGroupArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customer_groups', [
+            'company_id' => $company_2->id,
+            'code' => $customerGroupArr['code'],
+            'name' => $customerGroupArr['name'],
+        ]);
+    }
+
+    public function test_customer_group_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $customerGroupArr = [];
+
+        $api = $this->json('POST', route('api.post.customer_group.save'), $customerGroupArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIDeleteTest.php b/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIDeleteTest.php
new file mode 100644
index 000000000..72483fcd2
--- /dev/null
+++ b/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\CustomerGroupAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class CustomerGroupAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_group_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.customer_group.delete', $customerGroup->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_group_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.customer_group.delete', $customerGroup->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_group_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.customer_group.delete', $customerGroup->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('customer_groups', [
+            'id' => $customerGroup->id,
+        ]);
+    }
+
+    public function test_customer_group_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.customer_group.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_customer_group_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.customer_group.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIEditTest.php b/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIEditTest.php
new file mode 100644
index 000000000..89177e913
--- /dev/null
+++ b/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\CustomerGroupAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerGroupAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_group_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.edit', $customerGroup->ulid), $customerGroupArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_group_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.edit', $customerGroup->ulid), $customerGroupArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_group_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_group_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_group_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.edit', $customerGroup->ulid), $customerGroupArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('customer_groups', [
+            'id' => $customerGroup->id,
+            'company_id' => $company->id,
+            'code' => $customerGroupArr['code'],
+            'name' => $customerGroupArr['name'],
+        ]);
+    }
+
+    public function test_customer_group_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_customer_group_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        CustomerGroup::factory()->for($company)->count(2)->create();
+
+        $customerGroups = $company->customerGroups()->inRandomOrder()->take(2)->get();
+        $customerGroup_1 = $customerGroups[0];
+        $customerGroup_2 = $customerGroups[1];
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $customerGroup_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.edit', $customerGroup_2->ulid), $customerGroupArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_customer_group_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        CustomerGroup::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $customerGroup_2 = CustomerGroup::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $customerGroupArr = CustomerGroup::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.customer_group.edit', $customerGroup_2->ulid), $customerGroupArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIReadTest.php b/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIReadTest.php
new file mode 100644
index 000000000..a4c04b36b
--- /dev/null
+++ b/api/tests/Feature/API/CustomerGroupAPI/CustomerGroupAPIReadTest.php
@@ -0,0 +1,434 @@
+<?php
+
+namespace Tests\Feature\API\CustomerGroupAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class CustomerGroupAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_customer_group_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_group_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_group_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read', $customerGroup->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_customer_group_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read', $customerGroup->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_customer_group_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1 OR SLEEP(5)',
+            '1; DROP TABLE users',
+            "admin'--",
+            "1' OR '1'='1' UNION SELECT username, password FROM users",
+        ];
+
+        foreach ($injections as $injection) {
+            $api = $this->getJson(route('api.get.customer_group.read_any', [
+                'with_trashed' => false,
+                'company_id' => Hashids::encode($company->id),
+                'search' => $injection,
+                'refresh' => true,
+                'paginate' => [
+                    'page' => 1,
+                    'per_page' => 10,
+                ],
+            ]));
+
+            $api->assertSuccessful();
+
+            $api->assertJsonFragment([
+                'total' => 0,
+            ]);
+
+            $api->assertJsonStructure([
+                'data',
+                'links' => [
+                    'first', 'last', 'prev', 'next',
+                ],
+                'meta' => [
+                    'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+                ],
+            ]);
+
+            $api = $this->getJson(route('api.get.customer_group.read_any', [
+                'with_trashed' => false,
+                'company_id' => Hashids::encode($company->id),
+                'search' => $injection,
+                'refresh' => true,
+                'get' => [
+                    'limit' => 10,
+                ],
+            ]));
+
+            $api->assertSuccessful();
+
+            $api->assertJsonFragment([
+                'data' => [],
+            ]);
+        }
+    }
+
+    public function test_customer_group_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_customer_group_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_customer_group_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)
+            ->count(2)->create();
+
+        CustomerGroup::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_customer_group_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_customer_group_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_customer_group_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => false,
+            'paginate' => [
+                'page' => -1,
+                'per_page' => -25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_customer_group_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customerGroup = CustomerGroup::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.customer_group.read', $customerGroup->ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_customer_group_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.customer_group.read', null));
+    }
+
+    public function test_customer_group_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.customer_group.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/EmployeeAPI/EmployeeAPICreateTest.php b/api/tests/Feature/API/EmployeeAPI/EmployeeAPICreateTest.php
new file mode 100644
index 000000000..f3bd0ab27
--- /dev/null
+++ b/api/tests/Feature/API/EmployeeAPI/EmployeeAPICreateTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\EmployeeAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class EmployeeAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_employee_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.save'), $employeeArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_employee_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.save'), $employeeArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_employee_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_employee_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_employee_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.save'), $employeeArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('employees', [
+            'company_id' => $company->id,
+            'code' => $employeeArr['code'],
+            'name' => $employeeArr['name'],
+        ]);
+    }
+
+    public function test_employee_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_employee_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.save'), $employeeArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_employee_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        Employee::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.save'), $employeeArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('employees', [
+            'company_id' => $company_2->id,
+            'code' => $employeeArr['code'],
+            'name' => $employeeArr['name'],
+        ]);
+    }
+
+    public function test_employee_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $employeeArr = [];
+
+        $api = $this->json('POST', route('api.post.db.company.employee.save'), $employeeArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/EmployeeAPI/EmployeeAPIDeleteTest.php b/api/tests/Feature/API/EmployeeAPI/EmployeeAPIDeleteTest.php
new file mode 100644
index 000000000..d8526b85a
--- /dev/null
+++ b/api/tests/Feature/API/EmployeeAPI/EmployeeAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\EmployeeAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class EmployeeAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_employee_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $employee = Employee::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.delete', $employee->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_employee_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $employee = Employee::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.delete', $employee->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_employee_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $employee = Employee::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.delete', $employee->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('employees', [
+            'id' => $employee->id,
+        ]);
+    }
+
+    public function test_employee_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_employee_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.db.company.employee.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/EmployeeAPI/EmployeeAPIEditTest.php b/api/tests/Feature/API/EmployeeAPI/EmployeeAPIEditTest.php
new file mode 100644
index 000000000..ff080872a
--- /dev/null
+++ b/api/tests/Feature/API/EmployeeAPI/EmployeeAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\EmployeeAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class EmployeeAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_employee_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $employee = Employee::factory()->for($company)->create();
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.edit', $employee->ulid), $employeeArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_employee_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $employee = Employee::factory()->for($company)->create();
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.edit', $employee->ulid), $employeeArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_employee_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_employee_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_employee_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $employee = Employee::factory()->for($company)->create();
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.edit', $employee->ulid), $employeeArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('employees', [
+            'id' => $employee->id,
+            'company_id' => $company->id,
+            'code' => $employeeArr['code'],
+            'name' => $employeeArr['name'],
+        ]);
+    }
+
+    public function test_employee_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_employee_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        Employee::factory()->for($company)->count(2)->create();
+
+        $employees = $company->employees()->inRandomOrder()->take(2)->get();
+        $employee_1 = $employees[0];
+        $employee_2 = $employees[1];
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $employee_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.edit', $employee_2->ulid), $employeeArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_employee_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        Employee::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $employee_2 = Employee::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $employeeArr = Employee::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.company.employee.edit', $employee_2->ulid), $employeeArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/EmployeeAPI/EmployeeAPIReadTest.php b/api/tests/Feature/API/EmployeeAPI/EmployeeAPIReadTest.php
new file mode 100644
index 000000000..60438acab
--- /dev/null
+++ b/api/tests/Feature/API/EmployeeAPI/EmployeeAPIReadTest.php
@@ -0,0 +1,539 @@
+<?php
+
+namespace Tests\Feature\API\EmployeeAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class EmployeeAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_employee_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_employee_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_employee_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $employee = Employee::factory()->for($company)->create();
+
+        $ulid = $employee->ulid;
+
+        $api = $this->getJson(route('api.get.db.company.employee.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_employee_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $employee = Employee::factory()->for($company)->create();
+
+        $ulid = $employee->ulid;
+
+        $api = $this->getJson(route('api.get.db.company.employee.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_employee_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            "' OR \'1\'=\'1",
+            '1 OR SLEEP(5)',
+            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
+            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR 1=1; DROP TABLE users; --',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
+            "1; EXEC xp_cmdshell('echo vulnerable'); --",
+            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
+            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
+            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
+            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
+            '1; SELECT pg_sleep(5); --',
+            "1 AND SLEEP(5) AND 'abc'='abc",
+            "1 AND SLEEP(5) AND 'xyz'='xyz",
+            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
+            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
+            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
+            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
+            "1'; WAITFOR DELAY '0:0:5' --",
+            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
+            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
+            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
+            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
+            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
+            '1 AND (SELECT COUNT(*) FROM users) > 10',
+            '1 AND (SELECT COUNT(*) FROM users) > 100',
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
+            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
+            '1 OR 1=1; SELECT * FROM users;',
+            "1' OR 1=1; SELECT * FROM users;",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "' OR 1=1 --",
+            "admin'--",
+            "admin' #",
+            "' OR 'x'='x",
+            "' OR 'a'='a'",
+            "' OR 'a'='a'--",
+            "' OR 1=1",
+            "' OR 1=1--",
+            "' OR 1=1#",
+            "' OR 1=1 /*",
+            "' OR '1'='1'--",
+            "' OR '1'='1'/*",
+            "' OR '1'='1' #",
+            "' OR '1'='1' /*",
+            "' OR '1'='1' or ''='",
+            "' OR '1'='1' or 'a'='a",
+            "' OR '1'='1' or 'a'='a'--",
+            "' OR '1'='1' or 'a'='a'/*",
+            "' OR '1'='1' or 'a'='a' #",
+            "' OR '1'='1' or 'a'='a' /*",
+            '1; SELECT * FROM users WHERE 1=1',
+            '1; SELECT * FROM users WHERE 1=1--',
+            '1; SELECT * FROM users WHERE 1=1/*',
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users",
+            "1' OR '1'='1' UNION SELECT username, password FROM users--",
+            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users #",
+            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
+            "' OR '",
+            "1' OR '1'='1' UNION SELECT NULL",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
+            "' OR '1'='1' or",
+        ];
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_employee_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_employee_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_employee_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)
+            ->count(2)->create();
+
+        Employee::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_employee_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_employee_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_employee_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Employee::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_employee_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $employee = Employee::factory()->for($company)->create();
+
+        $ulid = $employee->ulid;
+
+        $api = $this->getJson(route('api.get.db.company.employee.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_employee_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.db.company.employee.read', null));
+    }
+
+    public function test_employee_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.db.company.employee.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/InvestorAPI/InvestorAPICreateTest.php b/api/tests/Feature/API/InvestorAPI/InvestorAPICreateTest.php
new file mode 100644
index 000000000..1c52597b9
--- /dev/null
+++ b/api/tests/Feature/API/InvestorAPI/InvestorAPICreateTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\InvestorAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class InvestorAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_investor_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.save'), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_investor_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.save'), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_investor_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_investor_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_investor_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('investors', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_investor_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_investor_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.save'), $payload);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_investor_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        Investor::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('investors', [
+            'company_id' => $company_2->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_investor_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = [];
+
+        $api = $this->json('POST', route('api.post.investor.save'), $payload);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/InvestorAPI/InvestorAPIDeleteTest.php b/api/tests/Feature/API/InvestorAPI/InvestorAPIDeleteTest.php
new file mode 100644
index 000000000..b1d107032
--- /dev/null
+++ b/api/tests/Feature/API/InvestorAPI/InvestorAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\InvestorAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class InvestorAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_investor_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $investor = Investor::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.investor.delete', $investor->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_investor_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $investor = Investor::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.investor.delete', $investor->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_investor_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $investor = Investor::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.investor.delete', $investor->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('investors', [
+            'id' => $investor->id,
+        ]);
+    }
+
+    public function test_investor_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.investor.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_investor_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.investor.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/InvestorAPI/InvestorAPIEditTest.php b/api/tests/Feature/API/InvestorAPI/InvestorAPIEditTest.php
new file mode 100644
index 000000000..0505267f1
--- /dev/null
+++ b/api/tests/Feature/API/InvestorAPI/InvestorAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\InvestorAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class InvestorAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_investor_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $investor = Investor::factory()->for($company)->create();
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.edit', $investor->ulid), $payload);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_investor_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $investor = Investor::factory()->for($company)->create();
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.edit', $investor->ulid), $payload);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_investor_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_investor_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_investor_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $investor = Investor::factory()->for($company)->create();
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.edit', $investor->ulid), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('investors', [
+            'id' => $investor->id,
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_investor_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_investor_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        Investor::factory()->for($company)->count(2)->create();
+
+        $investors = $company->investors()->inRandomOrder()->take(2)->get();
+        $investor_1 = $investors[0];
+        $investor_2 = $investors[1];
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $investor_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.edit', $investor_2->ulid), $payload);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_investor_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        Investor::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $investor_2 = Investor::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $payload = Investor::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.investor.edit', $investor_2->ulid), $payload);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/InvestorAPI/InvestorAPIReadTest.php b/api/tests/Feature/API/InvestorAPI/InvestorAPIReadTest.php
new file mode 100644
index 000000000..7ad02777f
--- /dev/null
+++ b/api/tests/Feature/API/InvestorAPI/InvestorAPIReadTest.php
@@ -0,0 +1,451 @@
+<?php
+
+namespace Tests\Feature\API\InvestorAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class InvestorAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_investor_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_investor_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_investor_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $investor = Investor::factory()->for($company)->create();
+
+        $ulid = $investor->ulid;
+
+        $api = $this->getJson(route('api.get.investor.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_investor_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $investor = Investor::factory()->for($company)->create();
+
+        $ulid = $investor->ulid;
+
+        $api = $this->getJson(route('api.get.investor.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_investor_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            "' OR '1'='1' --",
+            "' OR 1=1 --",
+            "admin'--",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR SLEEP(5)',
+            '1; SELECT pg_sleep(5); --',
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_investor_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_investor_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_investor_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)
+            ->count(2)->create();
+
+        Investor::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_investor_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_investor_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_investor_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Investor::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.investor.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => false,
+            'paginate' => [
+                'page' => -1,
+                'per_page' => -25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_investor_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $investor = Investor::factory()->for($company)->create();
+
+        $ulid = $investor->ulid;
+
+        $api = $this->getJson(route('api.get.investor.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_investor_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.investor.read', null));
+    }
+
+    public function test_investor_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.investor.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/ProductAPI/ProductAPICreateTest.php b/api/tests/Feature/API/ProductAPI/ProductAPICreateTest.php
new file mode 100644
index 000000000..5187db8fa
--- /dev/null
+++ b/api/tests/Feature/API/ProductAPI/ProductAPICreateTest.php
@@ -0,0 +1,253 @@
+<?php
+
+namespace Tests\Feature\API\ProductAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Helpers\HashidsHelper;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\ProductCategory;
+use App\Models\Role;
+use App\Models\User;
+use Database\Seeders\ProductSeeder;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_product_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productCategory = $company->productCategories()->inRandomOrder()->first();
+        $brand = $company->brands()->inRandomOrder()->first();
+
+        $productArr = Product::factory()->make([
+            'product_category_id' => Hashids::encode($productCategory->id),
+            'brand_id' => Hashids::encode($brand->id),
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.save'), $productArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_product_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $productCategory = $company->productCategories()->inRandomOrder()->first();
+        $brand = $company->brands()->inRandomOrder()->first();
+
+        $productArr = Product::factory()->make([
+            'product_category_id' => Hashids::encode($productCategory->id),
+            'brand_id' => Hashids::encode($brand->id),
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.save'), $productArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_product_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_product_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_product_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $productArr = (new ProductSeeder)->makeProductUnits(encode: true)->toArray();
+
+        // $company = $user->companies()->inRandomOrder()->first();
+        // $productCategory = $company->productCategories()->inRandomOrder()->first();
+        // $brand = $company->brands()->inRandomOrder()->first();
+
+        // $productArr = Product::factory()->make([
+        //     'product_category_id' => Hashids::encode($productCategory->id),
+        //     'brand_id' => Hashids::encode($brand->id),
+        //     'company_id' => Hashids::encode($company->id),
+        // ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.save'), $productArr);
+
+        $api->assertSuccessful();
+
+        $productArr['product_unit_id'] = HashidsHelper::decodeId($api['data']['product_unit']['id']);
+
+        $this->assertDatabaseHas('products', [
+            'product_category_id' => Hashids::decode($productArr['product_category_id'])[0],
+            'brand_id' => Hashids::decode($productArr['brand_id'])[0],
+            'company_id' => Hashids::decode($productArr['company_id'])[0],
+            'code' => $productArr['code'],
+            'name' => $productArr['name'],
+            'product_type' => $productArr['product_type'],
+            'taxable_supply' => $productArr['taxable_supply'],
+            'standard_rated_supply' => $productArr['standard_rated_supply'],
+            'price_include_vat' => $productArr['price_include_vat'],
+            'point' => $productArr['point'],
+            'use_serial_number' => $productArr['use_serial_number'],
+            'has_expiry_date' => $productArr['has_expiry_date'],
+            'status' => $productArr['status'],
+            'remarks' => $productArr['remarks'],
+        ]);
+    }
+
+    // public function test_product_api_call_store_expect_successful()
+    // {
+    //     $user = User::factory()
+    //         ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+    //         ->has(Company::factory()->setStatusActive()->setIsDefault()
+    //             ->has(ProductCategory::factory()->count(3))
+    //             ->has(Brand::factory()->count(3)))
+    //         ->create();
+
+    //     $this->actingAs($user);
+
+    //     $productArr = (new ProductSeeder())->make(encode: true)->toArray();
+
+    //     $api = $this->json('POST', route('api.post.db.product.product.save'), $productArr);
+
+    //     $api->assertSuccessful();
+
+    //     $productArr['product_unit_id'] = HashidsHelper::decodeId($api['data']['product_unit']['id']);
+
+    //     $this->assertDatabaseHas('products', [
+    //         'product_category_id' => Hashids::decode($productArr['product_category_id'])[0],
+    //         'brand_id' => Hashids::decode($productArr['brand_id'])[0],
+    //         'company_id' => Hashids::decode($productArr['company_id'])[0],
+    //         'code' => $productArr['code'],
+    //         'name' => $productArr['name'],
+    //         'product_type' => $productArr['product_type'],
+    //         'taxable_supply' => $productArr['taxable_supply'],
+    //         'standard_rated_supply' => $productArr['standard_rated_supply'],
+    //         'price_include_vat' => $productArr['price_include_vat'],
+    //         'point' => $productArr['point'],
+    //         'use_serial_number' => $productArr['use_serial_number'],
+    //         'has_expiry_date' => $productArr['has_expiry_date'],
+    //         'status' => $productArr['status'],
+    //         'remarks' => $productArr['remarks'],
+    //     ]);
+    // }
+
+    public function test_product_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_product_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $productArr = Product::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.save'), $productArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_product_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        Product::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $productArr = Product::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.save'), $productArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('products', [
+            'company_id' => $company_2->id,
+            'code' => $productArr['code'],
+            'name' => $productArr['name'],
+        ]);
+    }
+
+    public function test_product_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $productArr = [];
+
+        $api = $this->json('POST', route('api.post.db.product.product.save'), $productArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/ProductAPI/ProductAPIDeleteTest.php b/api/tests/Feature/API/ProductAPI/ProductAPIDeleteTest.php
new file mode 100644
index 000000000..ade327d9f
--- /dev/null
+++ b/api/tests/Feature/API/ProductAPI/ProductAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\ProductAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class ProductAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_product_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $product = Product::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.product.product.delete', $product->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_product_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $product = Product::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.product.product.delete', $product->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_product_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $product = Product::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.product.product.delete', $product->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('products', [
+            'id' => $product->id,
+        ]);
+    }
+
+    public function test_product_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.db.product.product.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_product_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.db.product.product.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/ProductAPI/ProductAPIEditTest.php b/api/tests/Feature/API/ProductAPI/ProductAPIEditTest.php
new file mode 100644
index 000000000..573ca37db
--- /dev/null
+++ b/api/tests/Feature/API/ProductAPI/ProductAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\ProductAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_product_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $product = Product::factory()->for($company)->create();
+
+        $productArr = Product::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.edit', $product->ulid), $productArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_product_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $product = Product::factory()->for($company)->create();
+
+        $productArr = Product::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.edit', $product->ulid), $productArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_product_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_product_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_product_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $product = Product::factory()->for($company)->create();
+
+        $productArr = Product::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.edit', $product->ulid), $productArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('products', [
+            'id' => $product->id,
+            'company_id' => $company->id,
+            'code' => $productArr['code'],
+            'name' => $productArr['name'],
+        ]);
+    }
+
+    public function test_product_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_product_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        Product::factory()->for($company)->count(2)->create();
+
+        $products = $company->products()->inRandomOrder()->take(2)->get();
+        $product_1 = $products[0];
+        $product_2 = $products[1];
+
+        $productArr = Product::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $product_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.edit', $product_2->ulid), $productArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_product_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        Product::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $product_2 = Product::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $productArr = Product::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.product.product.edit', $product_2->ulid), $productArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/ProductAPI/ProductAPIReadTest.php b/api/tests/Feature/API/ProductAPI/ProductAPIReadTest.php
new file mode 100644
index 000000000..774e78e79
--- /dev/null
+++ b/api/tests/Feature/API/ProductAPI/ProductAPIReadTest.php
@@ -0,0 +1,569 @@
+<?php
+
+namespace Tests\Feature\API\ProductAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\ProductCategory;
+use App\Models\Role;
+use App\Models\User;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_product_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $productCategory = ProductCategory::inRandomOrder()->first();
+        $brand = Brand::inRandomOrder()->first();
+
+        Product::factory()->for($company)->where('product_category_id', '=', $productCategory->id)->where('brand_id', '=', $brand->id)->create();
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_product_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_product_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $product = Product::factory()->for($company)->create();
+
+        $ulid = $product->ulid;
+
+        $api = $this->getJson(route('api.get.db.product.product.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_product_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $product = Product::factory()->for($company)->create();
+
+        $ulid = $product->ulid;
+
+        $api = $this->getJson(route('api.get.db.product.product.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_product_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            "' OR \'1\'=\'1",
+            '1 OR SLEEP(5)',
+            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
+            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR 1=1; DROP TABLE users; --',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
+            "1; EXEC xp_cmdshell('echo vulnerable'); --",
+            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
+            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
+            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
+            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
+            '1; SELECT pg_sleep(5); --',
+            "1 AND SLEEP(5) AND 'abc'='abc",
+            "1 AND SLEEP(5) AND 'xyz'='xyz",
+            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
+            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
+            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
+            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
+            "1'; WAITFOR DELAY '0:0:5' --",
+            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
+            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
+            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
+            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
+            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
+            '1 AND (SELECT COUNT(*) FROM users) > 10',
+            '1 AND (SELECT COUNT(*) FROM users) > 100',
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
+            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
+            '1 OR 1=1; SELECT * FROM users;',
+            "1' OR 1=1; SELECT * FROM users;",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "' OR 1=1 --",
+            "admin'--",
+            "admin' #",
+            "' OR 'x'='x",
+            "' OR 'a'='a'",
+            "' OR 'a'='a'--",
+            "' OR 1=1",
+            "' OR 1=1--",
+            "' OR 1=1#",
+            "' OR 1=1 /*",
+            "' OR '1'='1'--",
+            "' OR '1'='1'/*",
+            "' OR '1'='1' #",
+            "' OR '1'='1' /*",
+            "' OR '1'='1' or ''='",
+            "' OR '1'='1' or 'a'='a",
+            "' OR '1'='1' or 'a'='a'--",
+            "' OR '1'='1' or 'a'='a'/*",
+            "' OR '1'='1' or 'a'='a' #",
+            "' OR '1'='1' or 'a'='a' /*",
+            '1; SELECT * FROM users WHERE 1=1',
+            '1; SELECT * FROM users WHERE 1=1--',
+            '1; SELECT * FROM users WHERE 1=1/*',
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users",
+            "1' OR '1'='1' UNION SELECT username, password FROM users--",
+            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users #",
+            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
+            "' OR '",
+            "1' OR '1'='1' UNION SELECT NULL",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
+            "' OR '1'='1' or",
+        ];
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_product_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_product_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_product_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)
+            ->count(2)->create();
+
+        Product::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_product_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_product_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_product_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Product::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.product.product.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_product_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $product = Product::factory()->for($company)->create();
+
+        $ulid = $product->ulid;
+
+        $api = $this->getJson(route('api.get.db.product.product.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_product_api_call_read_without_ulid_expect_exception()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.db.product.product.read', null));
+    }
+
+    public function test_product_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.db.product.product.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPICreateTest.php b/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPICreateTest.php
new file mode 100644
index 000000000..39cace3e6
--- /dev/null
+++ b/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPICreateTest.php
@@ -0,0 +1,180 @@
+<?php
+
+namespace Tests\Feature\API\ProductCategoryAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Models\Role;
+use App\Models\User;
+use Illuminate\Support\Facades\Config;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductCategoryAPICreateTest extends APITestCase
+{
+    public function test_product_category_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('product_categories', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_product_category_api_call_store_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => Config::get('dcslab.KEYWORDS.AUTO'),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('product_categories', [
+            'company_id' => $company->id,
+            'name' => $payload['name'],
+            'type' => $payload['type'],
+        ]);
+
+        $this->assertDatabaseMissing('product_categories', [
+            'company_id' => $company->id,
+            'code' => Config::get('dcslab.KEYWORDS.AUTO'),
+        ]);
+    }
+
+    public function test_product_category_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_product_category_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+        $company_2 = $companies[1];
+
+        ProductCategory::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('product_categories', [
+            'company_id' => $company_2->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_product_category_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = [];
+
+        $api = $this->json('POST', route('api.post.product_category.save'), $payload);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name', 'type']);
+    }
+
+    public function test_product_category_api_call_store_with_sql_injection_payload_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => "'; DROP TABLE product_categories; --",
+            'name' => "'; DROP TABLE product_categories; --",
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.save'), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('product_categories', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIDeleteTest.php b/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIDeleteTest.php
new file mode 100644
index 000000000..e89c228d5
--- /dev/null
+++ b/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIDeleteTest.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace Tests\Feature\API\ProductCategoryAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Models\Role;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class ProductCategoryAPIDeleteTest extends APITestCase
+{
+    public function test_product_category_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $productCategory = ProductCategory::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.product_category.delete', $productCategory->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_product_category_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $productCategory = ProductCategory::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.product_category.delete', $productCategory->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_product_category_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $productCategory = ProductCategory::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.product_category.delete', $productCategory->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('product_categories', [
+            'id' => $productCategory->id,
+        ]);
+    }
+
+    public function test_product_category_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.product_category.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_product_category_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.product_category.delete', null));
+    }
+
+    public function test_product_category_api_call_delete_with_sql_injection_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+        $injection = $injections[$testIdx];
+
+        $api = $this->json('POST', route('api.post.product_category.delete', $injection));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIEditTest.php b/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIEditTest.php
new file mode 100644
index 000000000..d25916283
--- /dev/null
+++ b/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIEditTest.php
@@ -0,0 +1,142 @@
+<?php
+
+namespace Tests\Feature\API\ProductCategoryAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductCategoryAPIEditTest extends APITestCase
+{
+    public function test_product_category_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productCategory = ProductCategory::factory()->for($company)->create();
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.edit', $productCategory->ulid), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('product_categories', [
+            'id' => $productCategory->id,
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_product_category_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)->count(2)->create();
+
+        $productCategories = $company->productCategories()->inRandomOrder()->take(2)->get();
+        $productCategory_1 = $productCategories[0];
+        $productCategory_2 = $productCategories[1];
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $productCategory_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.edit', $productCategory_2->ulid), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_product_category_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        $company_2 = $companies[1];
+
+        ProductCategory::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $productCategory_2 = ProductCategory::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.edit', $productCategory_2->ulid), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('product_categories', [
+            'id' => $productCategory_2->id,
+            'company_id' => $company_2->id,
+            'code' => 'test1',
+        ]);
+    }
+
+    public function test_product_category_api_call_update_with_sql_injection_payload_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productCategory = ProductCategory::factory()->for($company)->create();
+
+        $payload = ProductCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => "'; DROP TABLE product_categories; --",
+            'name' => "'; DROP TABLE product_categories; --",
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.product_category.edit', $productCategory->ulid), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('product_categories', [
+            'id' => $productCategory->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIReadTest.php b/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIReadTest.php
new file mode 100644
index 000000000..49b74a2a0
--- /dev/null
+++ b/api/tests/Feature/API/ProductCategoryAPI/ProductCategoryAPIReadTest.php
@@ -0,0 +1,364 @@
+<?php
+
+namespace Tests\Feature\API\ProductCategoryAPI;
+
+use App\Enums\ProductCategoryTypeEnum;
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Models\Role;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class ProductCategoryAPIReadTest extends APITestCase
+{
+    public function test_product_category_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'type' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'type' => null,
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_product_category_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'type' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'type' => null,
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+        ]);
+    }
+
+    public function test_product_category_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)->count(30)->create();
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'type' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_product_category_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)->count(2)->create();
+
+        ProductCategory::factory()->for($company)
+            ->create([
+                'name' => 'testing',
+            ]);
+
+        ProductCategory::factory()->for($company)
+            ->create([
+                'code' => 'testing_code',
+            ]);
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'type' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 2,
+        ]);
+    }
+
+    public function test_product_category_api_call_read_any_without_required_parameters_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertUnprocessable();
+    }
+
+    public function test_product_category_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'type' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_product_category_api_call_read_any_with_type_filter_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        ProductCategory::factory()->for($company)
+            ->create([
+                'type' => ProductCategoryTypeEnum::PRODUCT,
+            ]);
+
+        ProductCategory::factory()->for($company)
+            ->create([
+                'type' => ProductCategoryTypeEnum::SERVICE,
+            ]);
+
+        $api = $this->getJson(route('api.get.product_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'type' => ProductCategoryTypeEnum::PRODUCT->value,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 1,
+        ]);
+    }
+
+    public function test_product_category_api_call_read_single_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productCategory = ProductCategory::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.product_category.read', $productCategory->ulid));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/ProfileAPI/ProfileAPITest.php b/api/tests/Feature/API/ProfileAPI/ProfileAPITest.php
index 0ad28c4cb..3661ddfcd 100644
--- a/api/tests/Feature/API/ProfileAPI/ProfileAPITest.php
+++ b/api/tests/Feature/API/ProfileAPI/ProfileAPITest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\ProfileAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Profile;
 use App\Models\Role;
 use App\Models\Setting;
@@ -25,7 +25,7 @@ public function test_profile_api_call_read_profile_expect_result()
     public function test_profile_api_call_update_user_profile_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
@@ -45,7 +45,7 @@ public function test_profile_api_call_update_user_profile_expect_successful()
     public function test_profile_api_call_update_user_profile_other_than_alpha_numeric_expect_unsuccessful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
@@ -69,7 +69,7 @@ public function test_profile_api_call_update_personal_info_expect_successful()
     {
         $user = User::factory()
             ->has(Profile::factory())
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Setting::factory()->createDefaultSetting_PREF_THEME())
             ->has(Setting::factory()->createDefaultSetting_PREF_DATE_FORMAT())
             ->has(Setting::factory()->createDefaultSetting_PREF_TIME_FORMAT())
@@ -100,7 +100,7 @@ public function test_profile_api_call_update_personal_info_expect_successful()
     public function test_profile_api_call_change_password_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
@@ -126,7 +126,7 @@ public function test_profile_api_call_update_account_settings_expect_successful(
         $this->markTestSkipped('Test under construction');
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Setting::factory()->createDefaultSetting_PREF_THEME())
             ->has(Setting::factory()->createDefaultSetting_PREF_DATE_FORMAT())
             ->has(Setting::factory()->createDefaultSetting_PREF_TIME_FORMAT())
@@ -167,7 +167,7 @@ public function test_profile_api_call_update_roles_expect_successful()
         $this->markTestSkipped('Test under construction');
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Role::factory()->count(3))
             ->has(Setting::factory()->createDefaultSetting_PREF_THEME())
             ->has(Setting::factory()->createDefaultSetting_PREF_DATE_FORMAT())
diff --git a/api/tests/Feature/API/RoleAPI/RoleAPIReadTest.php b/api/tests/Feature/API/RoleAPI/RoleAPIReadTest.php
index 7a528cde2..5b0f14867 100644
--- a/api/tests/Feature/API/RoleAPI/RoleAPIReadTest.php
+++ b/api/tests/Feature/API/RoleAPI/RoleAPIReadTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\RoleAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Role;
 use App\Models\User;
 use Tests\APITestCase;
@@ -17,10 +17,12 @@ protected function setUp(): void
     public function test_role_api_call_read_any_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
-        $api = $this->getJson(route('api.get.db.admin.role.read_any', []));
+        $api = $this->getJson(route('api.get.db.admin.role.read_any', [
+            'with_trashed' => false,
+        ]));
 
         $api->assertUnauthorized();
     }
@@ -34,7 +36,9 @@ public function test_role_api_call_read_any_without_access_right_expect_unauthor
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.admin.role.read_any', []));
+        $api = $this->getJson(route('api.get.db.admin.role.read_any', [
+            'with_trashed' => false,
+        ]));
 
         $api->assertForbidden();
     }
@@ -42,12 +46,14 @@ public function test_role_api_call_read_any_without_access_right_expect_unauthor
     public function test_role_api_call_read_any_expect_collection()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.admin.role.read_any', []));
+        $api = $this->getJson(route('api.get.db.admin.role.read_any', [
+            'with_trashed' => false,
+        ]));
 
         $api->assertSuccessful();
     }
diff --git a/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPICreateTest.php b/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPICreateTest.php
new file mode 100644
index 000000000..ff69198ba
--- /dev/null
+++ b/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPICreateTest.php
@@ -0,0 +1,235 @@
+<?php
+
+namespace Tests\Feature\API\StockAdjustmentCategoryAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockAdjustmentCategory;
+use App\Models\User;
+use Illuminate\Support\Facades\Config;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentCategoryAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_adjustment_category_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_stock_adjustment_category_api_call_store_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_stock_adjustment_category_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => '<script>alert("xss")</script>',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_adjustment_categories', [
+            'company_id' => $company->id,
+            'name' => 'alert("xss")',
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => '<script>alert("xss")</script>',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload, ['X-Sanitizer-Mode' => 'encode']);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_adjustment_categories', [
+            'company_id' => $company->id,
+            'name' => '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;',
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_adjustment_categories', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_store_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => Config::get('dcslab.KEYWORDS.AUTO'),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_adjustment_categories', [
+            'company_id' => $company->id,
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockAdjustmentCategory::factory()->for($company)->create([
+            'code' => 'TEST1',
+        ]);
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'TEST1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+        $company_2 = $companies[1];
+
+        StockAdjustmentCategory::factory()->for($company_1)->create([
+            'code' => 'TEST1',
+        ]);
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'TEST1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_adjustment_categories', [
+            'company_id' => $company_2->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = [];
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.save'), $payload);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIDeleteTest.php b/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIDeleteTest.php
new file mode 100644
index 000000000..89c0dd22a
--- /dev/null
+++ b/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIDeleteTest.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace Tests\Feature\API\StockAdjustmentCategoryAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockAdjustmentCategory;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class StockAdjustmentCategoryAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_adjustment_category_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $category = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.delete', $category->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_stock_adjustment_category_api_call_delete_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $category = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.delete', $category->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_stock_adjustment_category_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $category = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.delete', $category->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('stock_adjustment_categories', [
+            'id' => $category->id,
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_stock_adjustment_category_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $this->json('POST', route('api.post.stock_adjustment_category.delete', null));
+    }
+}
diff --git a/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIEditTest.php b/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIEditTest.php
new file mode 100644
index 000000000..79e03d4b9
--- /dev/null
+++ b/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIEditTest.php
@@ -0,0 +1,150 @@
+<?php
+
+namespace Tests\Feature\API\StockAdjustmentCategoryAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockAdjustmentCategory;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentCategoryAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_adjustment_category_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockAdjustmentCategory = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.edit', $stockAdjustmentCategory->ulid), $payload);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_adjustment_category_api_call_update_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockAdjustmentCategory = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.edit', $stockAdjustmentCategory->ulid), $payload);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_adjustment_category_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockAdjustmentCategory = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.edit', $stockAdjustmentCategory->ulid), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_adjustment_categories', [
+            'id' => $stockAdjustmentCategory->id,
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockAdjustmentCategory::factory()->for($company)->count(2)->create();
+
+        $categories = $company->stockAdjustmentCategories()->inRandomOrder()->take(2)->get();
+        $category1 = $categories[0];
+        $category2 = $categories[1];
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $category1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.edit', $category2->ulid), $payload);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company1 = $companies[0];
+        StockAdjustmentCategory::factory()->for($company1)->create([
+            'code' => 'TEST1',
+        ]);
+
+        $company2 = $companies[1];
+        $category2 = StockAdjustmentCategory::factory()->for($company2)->create([
+            'code' => 'TEST2',
+        ]);
+
+        $payload = StockAdjustmentCategory::factory()->make([
+            'company_id' => Hashids::encode($company2->id),
+            'code' => 'TEST1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.stock_adjustment_category.edit', $category2->ulid), $payload);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIReadTest.php b/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIReadTest.php
new file mode 100644
index 000000000..66907efd6
--- /dev/null
+++ b/api/tests/Feature/API/StockAdjustmentCategoryAPI/StockAdjustmentCategoryAPIReadTest.php
@@ -0,0 +1,307 @@
+<?php
+
+namespace Tests\Feature\API\StockAdjustmentCategoryAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockAdjustmentCategory;
+use App\Models\User;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockAdjustmentCategoryAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_adjustment_category_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockAdjustmentCategory::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_adjustment_category_api_call_read_any_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockAdjustmentCategory::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_adjustment_category_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockAdjustmentCategory = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $ulid = $stockAdjustmentCategory->ulid;
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_adjustment_category_api_call_read_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockAdjustmentCategory = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $ulid = $stockAdjustmentCategory->ulid;
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_adjustment_category_api_call_read_any_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockAdjustmentCategory::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockAdjustmentCategory::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_read_any_with_search_expect_filtered()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockAdjustmentCategory::factory()->for($company)->create([
+            'name' => 'Adjustment Category 1',
+        ]);
+
+        StockAdjustmentCategory::factory()->for($company)->create([
+            'name' => 'Another Category',
+        ]);
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'Adjustment Category 1',
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonFragment([
+            'name' => 'Adjustment Category 1',
+        ]);
+        $api->assertJsonMissing([
+            'name' => 'Another Category',
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockAdjustmentCategory = StockAdjustmentCategory::factory()->for($company)->create();
+
+        $ulid = $stockAdjustmentCategory->ulid;
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read', $ulid));
+
+        $api->assertSuccessful();
+        $api->assertJsonFragment([
+            'name' => $stockAdjustmentCategory->name,
+        ]);
+    }
+
+    public function test_stock_adjustment_category_api_call_read_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.stock_adjustment_category.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferAPI/StockTransferAPICreateTest.php b/api/tests/Feature/API/StockTransferAPI/StockTransferAPICreateTest.php
new file mode 100644
index 000000000..2bc575563
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferAPI/StockTransferAPICreateTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.save'), $stockTransferArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_stock_transfer_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.save'), $stockTransferArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_stock_transfer_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_stock_transfer_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.save'), $stockTransferArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfers', [
+            'company_id' => $company->id,
+            'code' => $stockTransferArr['code'],
+            'name' => $stockTransferArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.save'), $stockTransferArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        StockTransfer::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.save'), $stockTransferArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfers', [
+            'company_id' => $company_2->id,
+            'code' => $stockTransferArr['code'],
+            'name' => $stockTransferArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $stockTransferArr = [];
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.save'), $stockTransferArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferAPI/StockTransferAPIDeleteTest.php b/api/tests/Feature/API/StockTransferAPI/StockTransferAPIDeleteTest.php
new file mode 100644
index 000000000..68348b94d
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferAPI/StockTransferAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class StockTransferAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.delete', $stockTransfer->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.delete', $stockTransfer->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.delete', $stockTransfer->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('stock_transfers', [
+            'id' => $stockTransfer->id,
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_stock_transfer_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferAPI/StockTransferAPIEditTest.php b/api/tests/Feature/API/StockTransferAPI/StockTransferAPIEditTest.php
new file mode 100644
index 000000000..2d3f1f160
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferAPI/StockTransferAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.edit', $stockTransfer->ulid), $stockTransferArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.edit', $stockTransfer->ulid), $stockTransferArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.edit', $stockTransfer->ulid), $stockTransferArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfers', [
+            'id' => $stockTransfer->id,
+            'company_id' => $company->id,
+            'code' => $stockTransferArr['code'],
+            'name' => $stockTransferArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        StockTransfer::factory()->for($company)->count(2)->create();
+
+        $stockTransfers = $company->stockTransfers()->inRandomOrder()->take(2)->get();
+        $stockTransfer_1 = $stockTransfers[0];
+        $stockTransfer_2 = $stockTransfers[1];
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $stockTransfer_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.edit', $stockTransfer_2->ulid), $stockTransferArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        StockTransfer::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $stockTransfer_2 = StockTransfer::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $stockTransferArr = StockTransfer::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer.edit', $stockTransfer_2->ulid), $stockTransferArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferAPI/StockTransferAPIReadTest.php b/api/tests/Feature/API/StockTransferAPI/StockTransferAPIReadTest.php
new file mode 100644
index 000000000..0cef1ace3
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferAPI/StockTransferAPIReadTest.php
@@ -0,0 +1,539 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $ulid = $stockTransfer->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $ulid = $stockTransfer->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            "' OR \'1\'=\'1",
+            '1 OR SLEEP(5)',
+            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
+            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR 1=1; DROP TABLE users; --',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
+            "1; EXEC xp_cmdshell('echo vulnerable'); --",
+            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
+            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
+            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
+            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
+            '1; SELECT pg_sleep(5); --',
+            "1 AND SLEEP(5) AND 'abc'='abc",
+            "1 AND SLEEP(5) AND 'xyz'='xyz",
+            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
+            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
+            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
+            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
+            "1'; WAITFOR DELAY '0:0:5' --",
+            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
+            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
+            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
+            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
+            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
+            '1 AND (SELECT COUNT(*) FROM users) > 10',
+            '1 AND (SELECT COUNT(*) FROM users) > 100',
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
+            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
+            '1 OR 1=1; SELECT * FROM users;',
+            "1' OR 1=1; SELECT * FROM users;",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "' OR 1=1 --",
+            "admin'--",
+            "admin' #",
+            "' OR 'x'='x",
+            "' OR 'a'='a'",
+            "' OR 'a'='a'--",
+            "' OR 1=1",
+            "' OR 1=1--",
+            "' OR 1=1#",
+            "' OR 1=1 /*",
+            "' OR '1'='1'--",
+            "' OR '1'='1'/*",
+            "' OR '1'='1' #",
+            "' OR '1'='1' /*",
+            "' OR '1'='1' or ''='",
+            "' OR '1'='1' or 'a'='a",
+            "' OR '1'='1' or 'a'='a'--",
+            "' OR '1'='1' or 'a'='a'/*",
+            "' OR '1'='1' or 'a'='a' #",
+            "' OR '1'='1' or 'a'='a' /*",
+            '1; SELECT * FROM users WHERE 1=1',
+            '1; SELECT * FROM users WHERE 1=1--',
+            '1; SELECT * FROM users WHERE 1=1/*',
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users",
+            "1' OR '1'='1' UNION SELECT username, password FROM users--",
+            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users #",
+            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
+            "' OR '",
+            "1' OR '1'='1' UNION SELECT NULL",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
+            "' OR '1'='1' or",
+        ];
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_stock_transfer_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)
+            ->count(2)->create();
+
+        StockTransfer::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_stock_transfer_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_stock_transfer_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransfer::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_stock_transfer_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransfer = StockTransfer::factory()->for($company)->create();
+
+        $ulid = $stockTransfer->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_stock_transfer_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read', null));
+    }
+
+    public function test_stock_transfer_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPICreateTest.php b/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPICreateTest.php
new file mode 100644
index 000000000..d5e7a7bc0
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPICreateTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferItemAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferItemAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_item_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.save'), $stockTransferItemArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_stock_transfer_item_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.save'), $stockTransferItemArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_stock_transfer_item_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_stock_transfer_item_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.save'), $stockTransferItemArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfer_items', [
+            'company_id' => $company->id,
+            'code' => $stockTransferItemArr['code'],
+            'name' => $stockTransferItemArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.save'), $stockTransferItemArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        StockTransferItem::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.save'), $stockTransferItemArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfer_items', [
+            'company_id' => $company_2->id,
+            'code' => $stockTransferItemArr['code'],
+            'name' => $stockTransferItemArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $stockTransferItemArr = [];
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.save'), $stockTransferItemArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIDeleteTest.php b/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIDeleteTest.php
new file mode 100644
index 000000000..821b78aca
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferItemAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class StockTransferItemAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_item_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.delete', $stockTransferItem->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_item_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.delete', $stockTransferItem->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_item_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.delete', $stockTransferItem->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('stock_transfer_items', [
+            'id' => $stockTransferItem->id,
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_stock_transfer_item_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIEditTest.php b/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIEditTest.php
new file mode 100644
index 000000000..75a7df7bc
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferItemAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferItemAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_item_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.edit', $stockTransferItem->ulid), $stockTransferItemArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_item_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.edit', $stockTransferItem->ulid), $stockTransferItemArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_item_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.edit', $stockTransferItem->ulid), $stockTransferItemArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfer_items', [
+            'id' => $stockTransferItem->id,
+            'company_id' => $company->id,
+            'code' => $stockTransferItemArr['code'],
+            'name' => $stockTransferItemArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        StockTransferItem::factory()->for($company)->count(2)->create();
+
+        $stockTransferItems = $company->stockTransferItems()->inRandomOrder()->take(2)->get();
+        $stockTransferItem_1 = $stockTransferItems[0];
+        $stockTransferItem_2 = $stockTransferItems[1];
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $stockTransferItem_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.edit', $stockTransferItem_2->ulid), $stockTransferItemArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        StockTransferItem::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $stockTransferItem_2 = StockTransferItem::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $stockTransferItemArr = StockTransferItem::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item.edit', $stockTransferItem_2->ulid), $stockTransferItemArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIReadTest.php b/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIReadTest.php
new file mode 100644
index 000000000..38577df94
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferItemAPI/StockTransferItemAPIReadTest.php
@@ -0,0 +1,539 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferItemAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferItemAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_item_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_item_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_item_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $ulid = $stockTransferItem->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_item_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $ulid = $stockTransferItem->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_item_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            "' OR \'1\'=\'1",
+            '1 OR SLEEP(5)',
+            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
+            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR 1=1; DROP TABLE users; --',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
+            "1; EXEC xp_cmdshell('echo vulnerable'); --",
+            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
+            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
+            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
+            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
+            '1; SELECT pg_sleep(5); --',
+            "1 AND SLEEP(5) AND 'abc'='abc",
+            "1 AND SLEEP(5) AND 'xyz'='xyz",
+            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
+            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
+            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
+            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
+            "1'; WAITFOR DELAY '0:0:5' --",
+            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
+            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
+            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
+            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
+            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
+            '1 AND (SELECT COUNT(*) FROM users) > 10',
+            '1 AND (SELECT COUNT(*) FROM users) > 100',
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
+            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
+            '1 OR 1=1; SELECT * FROM users;',
+            "1' OR 1=1; SELECT * FROM users;",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "' OR 1=1 --",
+            "admin'--",
+            "admin' #",
+            "' OR 'x'='x",
+            "' OR 'a'='a'",
+            "' OR 'a'='a'--",
+            "' OR 1=1",
+            "' OR 1=1--",
+            "' OR 1=1#",
+            "' OR 1=1 /*",
+            "' OR '1'='1'--",
+            "' OR '1'='1'/*",
+            "' OR '1'='1' #",
+            "' OR '1'='1' /*",
+            "' OR '1'='1' or ''='",
+            "' OR '1'='1' or 'a'='a",
+            "' OR '1'='1' or 'a'='a'--",
+            "' OR '1'='1' or 'a'='a'/*",
+            "' OR '1'='1' or 'a'='a' #",
+            "' OR '1'='1' or 'a'='a' /*",
+            '1; SELECT * FROM users WHERE 1=1',
+            '1; SELECT * FROM users WHERE 1=1--',
+            '1; SELECT * FROM users WHERE 1=1/*',
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users",
+            "1' OR '1'='1' UNION SELECT username, password FROM users--",
+            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users #",
+            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
+            "' OR '",
+            "1' OR '1'='1' UNION SELECT NULL",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
+            "' OR '1'='1' or",
+        ];
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_stock_transfer_item_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)
+            ->count(2)->create();
+
+        StockTransferItem::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_stock_transfer_item_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_stock_transfer_item_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItem::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_stock_transfer_item_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItem = StockTransferItem::factory()->for($company)->create();
+
+        $ulid = $stockTransferItem->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_stock_transfer_item_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read', null));
+    }
+
+    public function test_stock_transfer_item_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPICreateTest.php b/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPICreateTest.php
new file mode 100644
index 000000000..1095c53e0
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPICreateTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferItemSerialAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferItemSerialAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.save'), $stockTransferItemSerialArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.save'), $stockTransferItemSerialArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.save'), $stockTransferItemSerialArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfer_item_serials', [
+            'company_id' => $company->id,
+            'code' => $stockTransferItemSerialArr['code'],
+            'name' => $stockTransferItemSerialArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.save'), $stockTransferItemSerialArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        StockTransferItemSerial::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.save'), $stockTransferItemSerialArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfer_item_serials', [
+            'company_id' => $company_2->id,
+            'code' => $stockTransferItemSerialArr['code'],
+            'name' => $stockTransferItemSerialArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $stockTransferItemSerialArr = [];
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.save'), $stockTransferItemSerialArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIDeleteTest.php b/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIDeleteTest.php
new file mode 100644
index 000000000..7f6cd93b0
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferItemSerialAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class StockTransferItemSerialAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_item_serial_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.delete', $stockTransferItemSerial->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.delete', $stockTransferItemSerial->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.delete', $stockTransferItemSerial->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('stock_transfer_item_serials', [
+            'id' => $stockTransferItemSerial->id,
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIEditTest.php b/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIEditTest.php
new file mode 100644
index 000000000..42d28b7ea
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIEditTest.php
@@ -0,0 +1,161 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferItemSerialAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferItemSerialAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_item_serial_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.edit', $stockTransferItemSerial->ulid), $stockTransferItemSerialArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.edit', $stockTransferItemSerial->ulid), $stockTransferItemSerialArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_serial_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_serial_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.edit', $stockTransferItemSerial->ulid), $stockTransferItemSerialArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('stock_transfer_item_serials', [
+            'id' => $stockTransferItemSerial->id,
+            'company_id' => $company->id,
+            'code' => $stockTransferItemSerialArr['code'],
+            'name' => $stockTransferItemSerialArr['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $this->markTestIncomplete('Not implemented yet.');
+    }
+
+    public function test_stock_transfer_item_serial_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        StockTransferItemSerial::factory()->for($company)->count(2)->create();
+
+        $stockTransferItemSerials = $company->stockTransferItemSerials()->inRandomOrder()->take(2)->get();
+        $stockTransferItemSerial_1 = $stockTransferItemSerials[0];
+        $stockTransferItemSerial_2 = $stockTransferItemSerials[1];
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $stockTransferItemSerial_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.edit', $stockTransferItemSerial_2->ulid), $stockTransferItemSerialArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        StockTransferItemSerial::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $stockTransferItemSerial_2 = StockTransferItemSerial::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $stockTransferItemSerialArr = StockTransferItemSerial::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.db.stock_transfer.stock_transfer_item_serial.edit', $stockTransferItemSerial_2->ulid), $stockTransferItemSerialArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIReadTest.php b/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIReadTest.php
new file mode 100644
index 000000000..35e2a5fb0
--- /dev/null
+++ b/api/tests/Feature/API/StockTransferItemSerialAPI/StockTransferItemSerialAPIReadTest.php
@@ -0,0 +1,539 @@
+<?php
+
+namespace Tests\Feature\API\StockTransferItemSerialAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class StockTransferItemSerialAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $ulid = $stockTransferItemSerial->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $ulid = $stockTransferItemSerial->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            "' OR \'1\'=\'1",
+            '1 OR SLEEP(5)',
+            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
+            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR 1=1; DROP TABLE users; --',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
+            "1; EXEC xp_cmdshell('echo vulnerable'); --",
+            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
+            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
+            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
+            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
+            '1; SELECT pg_sleep(5); --',
+            "1 AND SLEEP(5) AND 'abc'='abc",
+            "1 AND SLEEP(5) AND 'xyz'='xyz",
+            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
+            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
+            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
+            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
+            "1'; WAITFOR DELAY '0:0:5' --",
+            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
+            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
+            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
+            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
+            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
+            '1 AND (SELECT COUNT(*) FROM users) > 10',
+            '1 AND (SELECT COUNT(*) FROM users) > 100',
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
+            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
+            '1 OR 1=1; SELECT * FROM users;',
+            "1' OR 1=1; SELECT * FROM users;",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "' OR 1=1 --",
+            "admin'--",
+            "admin' #",
+            "' OR 'x'='x",
+            "' OR 'a'='a'",
+            "' OR 'a'='a'--",
+            "' OR 1=1",
+            "' OR 1=1--",
+            "' OR 1=1#",
+            "' OR 1=1 /*",
+            "' OR '1'='1'--",
+            "' OR '1'='1'/*",
+            "' OR '1'='1' #",
+            "' OR '1'='1' /*",
+            "' OR '1'='1' or ''='",
+            "' OR '1'='1' or 'a'='a",
+            "' OR '1'='1' or 'a'='a'--",
+            "' OR '1'='1' or 'a'='a'/*",
+            "' OR '1'='1' or 'a'='a' #",
+            "' OR '1'='1' or 'a'='a' /*",
+            '1; SELECT * FROM users WHERE 1=1',
+            '1; SELECT * FROM users WHERE 1=1--',
+            '1; SELECT * FROM users WHERE 1=1/*',
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users",
+            "1' OR '1'='1' UNION SELECT username, password FROM users--",
+            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users #",
+            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
+            "' OR '",
+            "1' OR '1'='1' UNION SELECT NULL",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
+            "' OR '1'='1' or",
+        ];
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)
+            ->count(2)->create();
+
+        StockTransferItemSerial::factory()->for($company)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        StockTransferItemSerial::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $stockTransferItemSerial = StockTransferItemSerial::factory()->for($company)->create();
+
+        $ulid = $stockTransferItemSerial->ulid;
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read', null));
+    }
+
+    public function test_stock_transfer_item_serial_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.db.stock_transfer.stock_transfer_item_serial.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/SupplierAPI/SupplierAPICreateTest.php b/api/tests/Feature/API/SupplierAPI/SupplierAPICreateTest.php
new file mode 100644
index 000000000..521a21f62
--- /dev/null
+++ b/api/tests/Feature/API/SupplierAPI/SupplierAPICreateTest.php
@@ -0,0 +1,250 @@
+<?php
+
+namespace Tests\Feature\API\SupplierAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\Supplier;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class SupplierAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_supplier_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_supplier_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr);
+
+        $api->assertForbidden();
+    }
+
+    public function test_supplier_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => '<script>alert("xss")</script> Test Name',
+            'address' => '<script>alert("xss")</script> Address',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('suppliers', [
+            'company_id' => $company->id,
+            'name' => 'alert("xss") Test Name',
+            'address' => 'alert("xss") Address',
+        ]);
+    }
+
+    public function test_supplier_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => '<script>alert("xss")</script> Test Name',
+            'address' => '<script>alert("xss")</script> Address',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr, ['X-Sanitizer-Mode' => 'encode']);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('suppliers', [
+            'company_id' => $company->id,
+            'name' => '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt; Test Name',
+            'address' => '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt; Address',
+        ]);
+    }
+
+    public function test_supplier_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('suppliers', [
+            'company_id' => $company->id,
+            'code' => $supplierArr['code'],
+            'name' => $supplierArr['name'],
+            'address' => $supplierArr['address'],
+            'city' => $supplierArr['city'],
+            'payment_term_type' => $supplierArr['payment_term_type'],
+            'payment_term' => $supplierArr['payment_term'],
+            'taxable_enterprise' => $supplierArr['taxable_enterprise'],
+            'tax_id' => $supplierArr['tax_id'],
+            'status' => $supplierArr['status'],
+            'remarks' => $supplierArr['remarks'],
+        ]);
+    }
+
+    public function test_supplier_api_call_store_with_nonexistance_company_id_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode(99999999), // Non-existent company ID
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonValidationErrors(['company_id']);
+    }
+
+    public function test_supplier_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_supplier_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+
+        $company_2 = $companies[1];
+
+        Supplier::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('suppliers', [
+            'company_id' => $company_2->id,
+            'code' => $supplierArr['code'],
+            'name' => $supplierArr['name'],
+            'address' => $supplierArr['address'],
+            'city' => $supplierArr['city'],
+            'payment_term_type' => $supplierArr['payment_term_type'],
+            'payment_term' => $supplierArr['payment_term'],
+            'taxable_enterprise' => $supplierArr['taxable_enterprise'],
+            'tax_id' => $supplierArr['tax_id'],
+            'status' => $supplierArr['status'],
+            'remarks' => $supplierArr['remarks'],
+        ]);
+    }
+
+    public function test_supplier_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $supplierArr = [];
+
+        $api = $this->json('POST', route('api.post.supplier.save'), $supplierArr);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+}
diff --git a/api/tests/Feature/API/SupplierAPI/SupplierAPIDeleteTest.php b/api/tests/Feature/API/SupplierAPI/SupplierAPIDeleteTest.php
new file mode 100644
index 000000000..7f5dba01f
--- /dev/null
+++ b/api/tests/Feature/API/SupplierAPI/SupplierAPIDeleteTest.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Tests\Feature\API\SupplierAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\Supplier;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class SupplierAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_supplier_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.supplier.delete', $supplier->ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_supplier_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.supplier.delete', $supplier->ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_supplier_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.supplier.delete', $supplier->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('suppliers', [
+            'id' => $supplier->id,
+        ]);
+    }
+
+    public function test_supplier_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.supplier.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_supplier_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.supplier.delete', null));
+
+        $api->assertStatus(500);
+    }
+}
diff --git a/api/tests/Feature/API/SupplierAPI/SupplierAPIEditTest.php b/api/tests/Feature/API/SupplierAPI/SupplierAPIEditTest.php
new file mode 100644
index 000000000..ace2949b9
--- /dev/null
+++ b/api/tests/Feature/API/SupplierAPI/SupplierAPIEditTest.php
@@ -0,0 +1,234 @@
+<?php
+
+namespace Tests\Feature\API\SupplierAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\Supplier;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class SupplierAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_supplier_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.edit', $supplier->ulid), $supplierArr);
+
+        $api->assertStatus(401);
+    }
+
+    public function test_supplier_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.edit', $supplier->ulid), $supplierArr);
+
+        $api->assertStatus(403);
+    }
+
+    public function test_supplier_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => '<script>alert("xss")</script> Test Name',
+            'address' => '<script>alert("xss")</script> Address',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.edit', $supplier->ulid), $supplierArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('suppliers', [
+            'id' => $supplier->id,
+            'company_id' => $company->id,
+            'name' => 'alert("xss") Test Name',
+            'address' => 'alert("xss") Address',
+        ]);
+    }
+
+    public function test_supplier_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'name' => '<script>alert("xss")</script> Test Name',
+            'address' => '<script>alert("xss")</script> Address',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.edit', $supplier->ulid), $supplierArr, ['X-Sanitizer-Mode' => 'encode']);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('suppliers', [
+            'id' => $supplier->id,
+            'company_id' => $company->id,
+            'name' => '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt; Test Name',
+            'address' => '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt; Address',
+        ]);
+    }
+
+    public function test_supplier_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.edit', $supplier->ulid), $supplierArr);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('suppliers', [
+            'id' => $supplier->id,
+            'company_id' => $company->id,
+            'code' => $supplierArr['code'],
+            'name' => $supplierArr['name'],
+            'address' => $supplierArr['address'],
+            'city' => $supplierArr['city'],
+            'payment_term_type' => $supplierArr['payment_term_type'],
+            'payment_term' => $supplierArr['payment_term'],
+            'taxable_enterprise' => $supplierArr['taxable_enterprise'],
+            'tax_id' => $supplierArr['tax_id'],
+            'status' => $supplierArr['status'],
+            'remarks' => $supplierArr['remarks'],
+        ]);
+    }
+
+    public function test_supplier_api_call_update_with_nonexistance_company_id_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode(99999999), // Non-existent company ID
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.edit', $supplier->ulid), $supplierArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonValidationErrors(['company_id']);
+    }
+
+    public function test_supplier_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        Supplier::factory()->for($company)->count(2)->create();
+
+        $suppliers = $company->suppliers()->inRandomOrder()->take(2)->get();
+        $supplier_1 = $suppliers[0];
+        $supplier_2 = $suppliers[1];
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $supplier_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.edit', $supplier_2->ulid), $supplierArr);
+
+        $api->assertStatus(422);
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_supplier_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        Supplier::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $supplier_2 = Supplier::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $supplierArr = Supplier::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.supplier.edit', $supplier_2->ulid), $supplierArr);
+
+        $api->assertSuccessful();
+    }
+}
diff --git a/api/tests/Feature/API/SupplierAPI/SupplierAPIReadTest.php b/api/tests/Feature/API/SupplierAPI/SupplierAPIReadTest.php
new file mode 100644
index 000000000..9e2201540
--- /dev/null
+++ b/api/tests/Feature/API/SupplierAPI/SupplierAPIReadTest.php
@@ -0,0 +1,545 @@
+<?php
+
+namespace Tests\Feature\API\SupplierAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\Supplier;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class SupplierAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_supplier_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_supplier_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_supplier_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $ulid = $supplier->ulid;
+
+        $api = $this->getJson(route('api.get.supplier.read', $ulid));
+
+        $api->assertStatus(401);
+    }
+
+    public function test_supplier_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $ulid = $supplier->ulid;
+
+        $api = $this->getJson(route('api.get.supplier.read', $ulid));
+
+        $api->assertStatus(403);
+    }
+
+    public function test_supplier_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            "' OR \'1\'=\'1",
+            '1 OR SLEEP(5)',
+            '1 AND (SELECT COUNT(*) FROM sysobjects) > 1',
+            "1 AND (SELECT * FROM users WHERE username = 'admin' AND SLEEP(5))",
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "SELECT * FROM users; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin' AND password LIKE '%a%')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            '1 OR 1=1; DROP TABLE users; --',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns',
+            '1 AND 1=0 UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = database()',
+            "1; EXEC xp_cmdshell('echo vulnerable'); --",
+            "' OR EXISTS(SELECT * FROM information_schema.tables WHERE table_schema='public' AND table_name='users' LIMIT 1) --",
+            "1'; EXEC sp_addrolemember 'db_owner', 'admin'; --",
+            "1' OR '1'='1'; -- EXEC master..xp_cmdshell 'echo vulnerable' --",
+            "1' UNION ALL SELECT NULL, NULL, NULL, NULL, NULL, NULL, CONCAT(username, ':', password) FROM users --",
+            '1; SELECT pg_sleep(5); --',
+            "1 AND SLEEP(5) AND 'abc'='abc",
+            "1 AND SLEEP(5) AND 'xyz'='xyz",
+            '1 OR 1=1; SELECT COUNT(*) FROM information_schema.tables;',
+            "1' UNION ALL SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = 'public' --",
+            '1 AND (SELECT * FROM (SELECT(SLEEP(5)))hOKz)',
+            "1' AND 1=(SELECT COUNT(*) FROM tabname); --",
+            "1'; WAITFOR DELAY '0:0:5' --",
+            "1 OR 1=1; WAITFOR DELAY '0:0:5' --",
+            "1; DECLARE @v VARCHAR(8000);SET @v = '';SELECT @v = @v + name + ', ' FROM sysobjects WHERE xtype = 'U';SELECT @v --",
+            "1; SELECT COUNT(*), CONCAT(table_name, ':', column_name) FROM information_schema.columns GROUP BY table_name, column_name HAVING COUNT(*) > 1; --",
+            '1; SELECT COUNT(*), table_name FROM information_schema.columns GROUP BY table_name HAVING COUNT(*) > 1; --',
+            "1' OR '1'='1'; SELECT COUNT(*) FROM information_schema.tables; --",
+            '1 AND (SELECT COUNT(*) FROM users) > 10',
+            '1 AND (SELECT COUNT(*) FROM users) > 100',
+            "1 OR EXISTS(SELECT * FROM users WHERE username = 'admin')",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR '1'='1",
+            "1' OR EXISTS(SELECT * FROM users WHERE username = 'admin') OR 'x'='x",
+            '1 AND (SELECT COUNT(*) FROM users) > 1; SELECT * FROM users;',
+            '1 OR 1=1; SELECT * FROM users;',
+            "1' OR 1=1; SELECT * FROM users;",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin'; --",
+            "1 OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "1' OR 1=1; SELECT * FROM users WHERE username = 'admin' --",
+            "' OR 1=1 --",
+            "admin'--",
+            "admin' #",
+            "' OR 'x'='x",
+            "' OR 'a'='a'",
+            "' OR 'a'='a'--",
+            "' OR 1=1",
+            "' OR 1=1--",
+            "' OR 1=1#",
+            "' OR 1=1 /*",
+            "' OR '1'='1'--",
+            "' OR '1'='1'/*",
+            "' OR '1'='1' #",
+            "' OR '1'='1' /*",
+            "' OR '1'='1' or ''='",
+            "' OR '1'='1' or 'a'='a",
+            "' OR '1'='1' or 'a'='a'--",
+            "' OR '1'='1' or 'a'='a'/*",
+            "' OR '1'='1' or 'a'='a' #",
+            "' OR '1'='1' or 'a'='a' /*",
+            '1; SELECT * FROM users WHERE 1=1',
+            '1; SELECT * FROM users WHERE 1=1--',
+            '1; SELECT * FROM users WHERE 1=1/*',
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1--",
+            "1' OR 1=1; SELECT * FROM users WHERE 1=1/*",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1 OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1--",
+            "1' OR '1'='1'; SELECT * FROM users WHERE 1=1/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users",
+            "1' OR '1'='1' UNION SELECT username, password FROM users--",
+            "1' OR '1'='1' UNION SELECT username, password FROM users/*",
+            "1' OR '1'='1' UNION SELECT username, password FROM users #",
+            "1' OR '1'='1' UNION SELECT username, password FROM users /*",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.tables",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema",
+            "' OR '",
+            "1' OR '1'='1' UNION SELECT NULL",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM information_schema.columns",
+            "1' OR '1'='1' UNION SELECT NULL, table_name FROM",
+            "' OR '1'='1' or",
+        ];
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        if ($api->status() === 422) {
+            dump($api->json());
+        }
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections));
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_supplier_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_supplier_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_supplier_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)
+            ->count(2)->create();
+
+        Supplier::factory()->for($company)
+            ->state(function (array $attributes) {
+                return ['name' => 'testing '.$attributes['name']];
+            })
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_supplier_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_supplier_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_supplier_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.supplier.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => -1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertStatus(422);
+    }
+
+    public function test_supplier_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $supplier = Supplier::factory()->for($company)->create();
+
+        $ulid = $supplier->ulid;
+
+        $api = $this->getJson(route('api.get.supplier.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_supplier_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.supplier.read', null));
+    }
+
+    public function test_supplier_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.supplier.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/UnitAPI/UnitAPICreateTest.php b/api/tests/Feature/API/UnitAPI/UnitAPICreateTest.php
new file mode 100644
index 000000000..9a8189a16
--- /dev/null
+++ b/api/tests/Feature/API/UnitAPI/UnitAPICreateTest.php
@@ -0,0 +1,222 @@
+<?php
+
+namespace Tests\Feature\API\UnitAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\Unit;
+use App\Models\User;
+use Illuminate\Support\Facades\Config;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class UnitAPICreateTest extends APITestCase
+{
+    public function test_unit_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.save'), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_unit_api_call_store_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.save'), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_unit_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('units', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'description' => $payload['description'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_unit_api_call_store_with_auto_code_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => Config::get('dcslab.KEYWORDS.AUTO'),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('units', [
+            'company_id' => $company->id,
+            'name' => $payload['name'],
+            'description' => $payload['description'],
+            'type' => $payload['type'],
+        ]);
+
+        $this->assertDatabaseMissing('units', [
+            'company_id' => $company->id,
+            'code' => Config::get('dcslab.KEYWORDS.AUTO'),
+        ]);
+    }
+
+    public function test_unit_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_unit_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+        $company_2 = $companies[1];
+
+        Unit::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('units', [
+            'company_id' => $company_2->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'description' => $payload['description'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_unit_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = [];
+
+        $api = $this->json('POST', route('api.post.unit.save'), $payload);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+
+    public function test_unit_api_call_store_with_sql_injection_payload_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => "'; DROP TABLE units; --",
+            'name' => "'; DROP TABLE units; --",
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.save'), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('units', [
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'description' => $payload['description'],
+            'type' => $payload['type'],
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/UnitAPI/UnitAPIDeleteTest.php b/api/tests/Feature/API/UnitAPI/UnitAPIDeleteTest.php
new file mode 100644
index 000000000..48b28743e
--- /dev/null
+++ b/api/tests/Feature/API/UnitAPI/UnitAPIDeleteTest.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace Tests\Feature\API\UnitAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\Unit;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class UnitAPIDeleteTest extends APITestCase
+{
+    public function test_unit_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $unit = Unit::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.unit.delete', $unit->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_unit_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $unit = Unit::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.unit.delete', $unit->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_unit_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $unit = Unit::factory()->for($company)->create();
+
+        $api = $this->json('POST', route('api.post.unit.delete', $unit->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('units', [
+            'id' => $unit->id,
+        ]);
+    }
+
+    public function test_unit_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.unit.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_unit_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.unit.delete', null));
+    }
+
+    public function test_unit_api_call_delete_with_sql_injection_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+        $injection = $injections[$testIdx];
+
+        $api = $this->json('POST', route('api.post.unit.delete', $injection));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/UnitAPI/UnitAPIEditTest.php b/api/tests/Feature/API/UnitAPI/UnitAPIEditTest.php
new file mode 100644
index 000000000..0ff213d84
--- /dev/null
+++ b/api/tests/Feature/API/UnitAPI/UnitAPIEditTest.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Tests\Feature\API\UnitAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\Unit;
+use App\Models\User;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class UnitAPIEditTest extends APITestCase
+{
+    public function test_unit_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $unit = Unit::factory()->for($company)->create();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.edit', $unit->ulid), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_unit_api_call_update_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $unit = Unit::factory()->for($company)->create();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.edit', $unit->ulid), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_unit_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $unit = Unit::factory()->for($company)->create();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.edit', $unit->ulid), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('units', [
+            'id' => $unit->id,
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'description' => $payload['description'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_unit_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        Unit::factory()->for($company)->count(2)->create();
+
+        $units = $company->units()->inRandomOrder()->take(2)->get();
+        $unit_1 = $units[0];
+        $unit_2 = $units[1];
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => $unit_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.edit', $unit_2->ulid), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_unit_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive())
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        Unit::factory()->for($company_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $unit_2 = Unit::factory()->for($company_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.edit', $unit_2->ulid), $payload);
+
+        $api->assertSuccessful();
+    }
+
+    public function test_unit_api_call_update_with_sql_injection_payload_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $unit = Unit::factory()->for($company)->create();
+
+        $payload = Unit::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'code' => "'; DROP TABLE units; --",
+            'name' => "'; DROP TABLE units; --",
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.unit.edit', $unit->ulid), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('units', [
+            'id' => $unit->id,
+            'company_id' => $company->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'description' => $payload['description'],
+            'type' => $payload['type'],
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/UnitAPI/UnitAPIReadTest.php b/api/tests/Feature/API/UnitAPI/UnitAPIReadTest.php
new file mode 100644
index 000000000..ebb327b9c
--- /dev/null
+++ b/api/tests/Feature/API/UnitAPI/UnitAPIReadTest.php
@@ -0,0 +1,422 @@
+<?php
+
+namespace Tests\Feature\API\UnitAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\Unit;
+use App\Models\User;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class UnitAPIReadTest extends APITestCase
+{
+    public function test_unit_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_unit_api_call_read_any_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertForbidden();
+    }
+
+    public function test_unit_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $unit = Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read', $unit->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_unit_api_call_read_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $unit = Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read', $unit->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_unit_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_unit_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+        ]);
+    }
+
+    public function test_unit_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_unit_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->count(2)->create();
+
+        Unit::factory()->for($company)
+            ->create([
+                'name' => 'testing',
+            ]);
+
+        Unit::factory()->for($company)
+            ->create([
+                'code' => 'testing_code',
+            ]);
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 2,
+        ]);
+    }
+
+    public function test_unit_api_call_read_any_without_required_parameters_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertUnprocessable();
+    }
+
+    public function test_unit_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_unit_api_call_read_single_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $unit = Unit::factory()->for($company)->create();
+
+        $api = $this->getJson(route('api.get.unit.read', $unit->ulid));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+        ]);
+    }
+
+    public function test_unit_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.unit.read', null));
+    }
+
+    public function test_unit_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.unit.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/UserAPI/UserAPICreateTest.php b/api/tests/Feature/API/UserAPI/UserAPICreateTest.php
index 8441ad7cf..52f8db9ec 100644
--- a/api/tests/Feature/API/UserAPI/UserAPICreateTest.php
+++ b/api/tests/Feature/API/UserAPI/UserAPICreateTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\UserAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Profile;
 use App\Models\Role;
 use App\Models\User;
@@ -19,13 +19,13 @@ protected function setUp(): void
     public function test_user_api_call_store_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $userArr = User::factory()->make()->toArray();
         $userArr = array_merge($userArr, Profile::factory()->make()->toArray());
 
-        $role = Role::where('name', '=', UserRoles::DEVELOPER->value)->first();
+        $role = Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first();
         $userArr['roles'][0] = [
             'id' => HashIds::encode($role->id),
             'display_name' => $role->display_name,
@@ -46,7 +46,7 @@ public function test_user_api_call_store_without_access_right_expect_unauthorize
         $userArr = User::factory()->make()->toArray();
         $userArr = array_merge($userArr, Profile::factory()->make()->toArray());
 
-        $role = Role::where('name', '=', UserRoles::DEVELOPER->value)->first();
+        $role = Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first();
         $userArr['roles'][0] = [
             'id' => HashIds::encode($role->id),
             'display_name' => $role->display_name,
@@ -70,7 +70,7 @@ public function test_user_api_call_store_with_script_tags_in_payload_expect_enco
     public function test_user_api_call_store_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
@@ -78,7 +78,7 @@ public function test_user_api_call_store_expect_successful()
         $userArr = User::factory()->make()->toArray();
         $userArr = array_merge($userArr, Profile::factory()->make()->toArray());
 
-        $role = Role::where('name', '=', UserRoles::DEVELOPER->value)->first();
+        $role = Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first();
         $userArr['roles'][0] = [
             'id' => HashIds::encode($role->id),
             'display_name' => $role->display_name,
@@ -92,7 +92,7 @@ public function test_user_api_call_store_expect_successful()
     public function test_user_api_call_store_with_empty_string_parameters_expect_validation_error()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
diff --git a/api/tests/Feature/API/UserAPI/UserAPIEditTest.php b/api/tests/Feature/API/UserAPI/UserAPIEditTest.php
index aee6e465b..06776eb73 100644
--- a/api/tests/Feature/API/UserAPI/UserAPIEditTest.php
+++ b/api/tests/Feature/API/UserAPI/UserAPIEditTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\UserAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Profile;
 use App\Models\Role;
 use App\Models\Setting;
@@ -20,13 +20,13 @@ protected function setUp(): void
     public function test_user_api_call_update_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $user = User::factory()
             ->setCreatedAt()->setUpdatedAt()
             ->has(Profile::factory()->setCreatedAt()->setUpdatedAt())
-            ->hasAttached(Role::where('name', '=', UserRoles::ADMINISTRATOR->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::ADMINISTRATOR->value)->first())
             ->has(Setting::factory()->createDefaultSetting_PREF_THEME())
             ->has(Setting::factory()->createDefaultSetting_PREF_DATE_FORMAT())
             ->has(Setting::factory()->createDefaultSetting_PREF_TIME_FORMAT())
@@ -35,7 +35,7 @@ public function test_user_api_call_update_without_authorization_expect_unauthori
         $userArr = User::factory()->make()->toArray();
         $userArr = array_merge($userArr, Profile::factory()->make()->toArray());
 
-        $role = Role::where('name', '=', UserRoles::DEVELOPER->value)->first();
+        $role = Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first();
         $userArr['roles'][0] = [
             'id' => HashIds::encode($role->id),
             'display_name' => $role->display_name,
@@ -60,7 +60,7 @@ public function test_user_api_call_update_without_access_right_expect_unauthoriz
         $user = User::factory()
             ->setCreatedAt()->setUpdatedAt()
             ->has(Profile::factory()->setCreatedAt()->setUpdatedAt())
-            ->hasAttached(Role::where('name', '=', UserRoles::ADMINISTRATOR->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::ADMINISTRATOR->value)->first())
             ->has(Setting::factory()->createDefaultSetting_PREF_THEME())
             ->has(Setting::factory()->createDefaultSetting_PREF_DATE_FORMAT())
             ->has(Setting::factory()->createDefaultSetting_PREF_TIME_FORMAT())
@@ -69,7 +69,7 @@ public function test_user_api_call_update_without_access_right_expect_unauthoriz
         $userArr = User::factory()->make()->toArray();
         $userArr = array_merge($userArr, Profile::factory()->make()->toArray());
 
-        $role = Role::where('name', '=', UserRoles::DEVELOPER->value)->first();
+        $role = Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first();
         $userArr['roles'][0] = [
             'id' => HashIds::encode($role->id),
             'display_name' => $role->display_name,
@@ -97,7 +97,7 @@ public function test_user_api_call_update_with_script_tags_in_payload_expect_enc
     public function test_user_api_call_update_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
@@ -105,7 +105,7 @@ public function test_user_api_call_update_expect_successful()
         $user = User::factory()
             ->setCreatedAt()->setUpdatedAt()
             ->has(Profile::factory()->setCreatedAt()->setUpdatedAt())
-            ->hasAttached(Role::where('name', '=', UserRoles::ADMINISTRATOR->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::ADMINISTRATOR->value)->first())
             ->has(Setting::factory()->createDefaultSetting_PREF_THEME())
             ->has(Setting::factory()->createDefaultSetting_PREF_DATE_FORMAT())
             ->has(Setting::factory()->createDefaultSetting_PREF_TIME_FORMAT())
@@ -114,7 +114,7 @@ public function test_user_api_call_update_expect_successful()
         $userArr = User::factory()->make()->toArray();
         $userArr = array_merge($userArr, Profile::factory()->make()->toArray());
 
-        $role = Role::where('name', '=', UserRoles::DEVELOPER->value)->first();
+        $role = Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first();
         $userArr['roles'][0] = [
             'id' => HashIds::encode($role->id),
             'display_name' => $role->display_name,
diff --git a/api/tests/Feature/API/UserAPI/UserAPIReadTest.php b/api/tests/Feature/API/UserAPI/UserAPIReadTest.php
index fa11e1d0b..cce695afb 100644
--- a/api/tests/Feature/API/UserAPI/UserAPIReadTest.php
+++ b/api/tests/Feature/API/UserAPI/UserAPIReadTest.php
@@ -2,7 +2,7 @@
 
 namespace Tests\Feature\API\UserAPI;
 
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Role;
 use App\Models\User;
 use Exception;
@@ -19,15 +19,17 @@ protected function setUp(): void
     public function test_user_api_call_read_any_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $api = $this->getJson(route('api.get.db.admin.user.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertUnauthorized();
@@ -41,11 +43,13 @@ public function test_user_api_call_read_any_without_access_right_expect_unauthor
         $this->actingAs($user);
 
         $api = $this->getJson(route('api.get.db.admin.user.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertForbidden();
@@ -59,7 +63,7 @@ public function test_user_api_call_read_with_sql_injection_expect_injection_igno
     public function test_user_api_call_read_without_authorization_expect_unauthorized_message()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $api = $this->getJson(route('api.get.db.admin.user.read', $user->ulid));
@@ -82,17 +86,19 @@ public function test_user_api_call_read_without_access_right_expect_unauthorized
     public function test_user_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
         $api = $this->getJson(route('api.get.db.admin.user.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -107,11 +113,13 @@ public function test_user_api_call_read_any_with_or_without_pagination_expect_pa
         ]);
 
         $api = $this->getJson(route('api.get.db.admin.user.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => false,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -120,17 +128,19 @@ public function test_user_api_call_read_any_with_or_without_pagination_expect_pa
     public function test_user_api_call_read_any_with_pagination_expect_several_per_page()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
         $api = $this->getJson(route('api.get.db.admin.user.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 25,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -153,7 +163,7 @@ public function test_user_api_call_read_any_with_pagination_expect_several_per_p
     public function test_user_api_call_read_any_with_search_expect_filtered_results()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
@@ -162,11 +172,13 @@ public function test_user_api_call_read_any_with_search_expect_filtered_results(
         User::factory()->setName('testing2')->create();
 
         $api = $this->getJson(route('api.get.db.admin.user.read_any', [
+            'with_trashed' => false,
             'search' => 'testing',
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
             'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -184,12 +196,14 @@ public function test_user_api_call_read_any_with_search_expect_filtered_results(
     public function test_user_api_call_read_any_without_search_querystring_expect_failed()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
-        $api = $this->getJson(route('api.get.db.admin.user.read_any', []));
+        $api = $this->getJson(route('api.get.db.admin.user.read_any', [
+            'with_trashed' => false,
+        ]));
 
         $api->assertUnprocessable();
     }
@@ -197,17 +211,19 @@ public function test_user_api_call_read_any_without_search_querystring_expect_fa
     public function test_user_api_call_read_any_with_special_char_in_search_expect_results()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
         $api = $this->getJson(route('api.get.db.admin.user.read_any', [
-            'search' => "!#$%&'()*+,-./:;<=>?@[\]^_`{|}~",
-            'paginate' => true,
-            'page' => 1,
-            'per_page' => 10,
+            'with_trashed' => false,
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
             'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -225,17 +241,19 @@ public function test_user_api_call_read_any_with_special_char_in_search_expect_r
     public function test_user_api_call_read_any_with_negative_value_in_parameters_expect_results()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
 
         $api = $this->getJson(route('api.get.db.admin.user.read_any', [
+            'with_trashed' => false,
             'search' => '',
-            'paginate' => true,
-            'page' => -1,
-            'per_page' => -10,
             'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
         ]));
 
         $api->assertSuccessful();
@@ -253,7 +271,7 @@ public function test_user_api_call_read_any_with_negative_value_in_parameters_ex
     public function test_user_api_call_read_expect_successful()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
@@ -267,7 +285,7 @@ public function test_user_api_call_read_without_ulid_expect_exception()
     {
         $this->expectException(Exception::class);
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
@@ -278,7 +296,7 @@ public function test_user_api_call_read_without_ulid_expect_exception()
     public function test_user_api_call_read_with_nonexistance_ulid_expect_not_found()
     {
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->create();
 
         $this->actingAs($user);
diff --git a/api/tests/Feature/API/WarehouseAPI/WarehouseAPICreateTest.php b/api/tests/Feature/API/WarehouseAPI/WarehouseAPICreateTest.php
new file mode 100644
index 000000000..61c225ca5
--- /dev/null
+++ b/api/tests/Feature/API/WarehouseAPI/WarehouseAPICreateTest.php
@@ -0,0 +1,300 @@
+<?php
+
+namespace Tests\Feature\API\WarehouseAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use App\Models\Warehouse;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class WarehouseAPICreateTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_warehouse_api_call_store_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_warehouse_api_call_store_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_warehouse_api_call_store_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_warehouse_api_call_store_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_warehouse_api_call_store_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('warehouses', [
+            'company_id' => $company->id,
+            'branch_id' => $branch->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'address' => $payload['address'],
+            'city' => $payload['city'],
+            'contact' => $payload['contact'],
+            'remarks' => $payload['remarks'],
+            'status' => $payload['status'],
+        ]);
+    }
+
+    public function test_warehouse_api_call_store_with_nonexistance_branch_id_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+
+        $branchId = Branch::max('id') + 1;
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branchId),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_warehouse_api_call_store_with_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+                    ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_warehouse_api_call_store_with_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->has(Company::factory()->setStatusActive()
+                ->has(Branch::factory()->setStatusActive()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->take(2)->get();
+
+        $company_1 = $companies[0];
+        $branch_1 = $company_1->branches()->inRandomOrder()->first();
+
+        $company_2 = $companies[1];
+        $branch_2 = $company_2->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company_1)->for($branch_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'branch_id' => Hashids::encode($branch_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('warehouses', [
+            'company_id' => $company_2->id,
+            'branch_id' => $branch_2->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'address' => $payload['address'],
+            'city' => $payload['city'],
+            'contact' => $payload['contact'],
+            'remarks' => $payload['remarks'],
+            'status' => $payload['status'],
+        ]);
+    }
+
+    public function test_warehouse_api_call_store_with_existing_name_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(
+                Company::factory()->setStatusActive()->setIsDefault()
+                    ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create([
+            'name' => 'Gudang Sama',
+        ]);
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'name' => 'Gudang Sama',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonValidationErrors(['name']);
+    }
+
+    public function test_warehouse_api_call_store_with_empty_string_parameters_expect_validation_error()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $payload = [];
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        $api->assertJsonValidationErrors(['company_id', 'code', 'name']);
+    }
+
+    public function test_warehouse_api_call_store_with_sql_injection_payload_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'code' => "'; DROP TABLE warehouses; --",
+            'name' => "'; DROP TABLE warehouses; --",
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.save'), $payload);
+
+        // Should succeed because it's just text, but shouldn't execute SQL.
+        // If it was vulnerable, the table might be dropped or error out.
+        // We expect it to be saved as is or handled gracefully.
+        // Here we just check it is successful (saved as text) or validation error if there are rules against special chars.
+        // Assuming no strict regex on code/name, it should be saved.
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('warehouses', [
+            'company_id' => $company->id,
+            'branch_id' => $branch->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/WarehouseAPI/WarehouseAPIDeleteTest.php b/api/tests/Feature/API/WarehouseAPI/WarehouseAPIDeleteTest.php
new file mode 100644
index 000000000..9814eb29c
--- /dev/null
+++ b/api/tests/Feature/API/WarehouseAPI/WarehouseAPIDeleteTest.php
@@ -0,0 +1,130 @@
+<?php
+
+namespace Tests\Feature\API\WarehouseAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use App\Models\Warehouse;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+
+class WarehouseAPIDeleteTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_warehouse_api_call_delete_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->json('POST', route('api.post.warehouse.delete', $warehouse->ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_warehouse_api_call_delete_without_access_right_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->json('POST', route('api.post.warehouse.delete', $warehouse->ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_warehouse_api_call_delete_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->json('POST', route('api.post.warehouse.delete', $warehouse->ulid));
+
+        $api->assertSuccessful();
+        $this->assertSoftDeleted('warehouses', [
+            'id' => $warehouse->id,
+        ]);
+    }
+
+    public function test_warehouse_api_call_delete_of_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->json('POST', route('api.post.warehouse.delete', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_warehouse_api_call_delete_without_parameters_expect_failed()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()->create();
+
+        $this->actingAs($user);
+        $api = $this->json('POST', route('api.post.warehouse.delete', null));
+    }
+
+    public function test_warehouse_api_call_delete_with_sql_injection_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+        $injection = $injections[$testIdx];
+
+        $api = $this->json('POST', route('api.post.warehouse.delete', $injection));
+
+        $api->assertStatus(404);
+    }
+}
diff --git a/api/tests/Feature/API/WarehouseAPI/WarehouseAPIEditTest.php b/api/tests/Feature/API/WarehouseAPI/WarehouseAPIEditTest.php
new file mode 100644
index 000000000..09c055df0
--- /dev/null
+++ b/api/tests/Feature/API/WarehouseAPI/WarehouseAPIEditTest.php
@@ -0,0 +1,270 @@
+<?php
+
+namespace Tests\Feature\API\WarehouseAPI;
+
+use App\Enums\UserRolesEnum;
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use App\Models\Warehouse;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class WarehouseAPIEditTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_warehouse_api_call_update_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.edit', $warehouse->ulid), $payload);
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_warehouse_api_call_update_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.edit', $warehouse->ulid), $payload);
+
+        $api->assertForbidden();
+    }
+
+    public function test_warehouse_api_call_update_with_script_tags_in_payload_expect_stripped()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_warehouse_api_call_update_with_script_tags_in_payload_expect_encoded()
+    {
+        $this->markTestSkipped('Test under construction');
+    }
+
+    public function test_warehouse_api_call_update_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.edit', $warehouse->ulid), $payload);
+
+        $api->assertSuccessful();
+        $this->assertDatabaseHas('warehouses', [
+            'id' => $warehouse->id,
+            'company_id' => $company->id,
+            'branch_id' => $branch->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'address' => $payload['address'],
+            'city' => $payload['city'],
+            'contact' => $payload['contact'],
+            'remarks' => $payload['remarks'],
+            'status' => $payload['status'],
+        ]);
+    }
+
+    public function test_warehouse_api_call_update_with_nonexistance_branch_id_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $newBranchId = Branch::max('id') + 1;
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($newBranchId),
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.edit', $warehouse->ulid), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_warehouse_api_call_update_and_use_existing_code_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        Warehouse::factory()->for($company)->for($branch)->count(2)->create();
+
+        $warehouses = $company->warehouses()->inRandomOrder()->take(2)->get();
+        $warehouse_1 = $warehouses[0];
+        $warehouse_2 = $warehouses[1];
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'code' => $warehouse_1->code,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.edit', $warehouse_2->ulid), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonStructure([
+            'errors',
+        ]);
+    }
+
+    public function test_warehouse_api_call_update_and_use_existing_code_in_different_company_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->has(Company::factory()->setStatusActive()
+                ->has(Branch::factory()->setStatusActive()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $companies = $user->companies()->inRandomOrder()->get();
+
+        $company_1 = $companies[0];
+        $branch_1 = $company_1->branches()->first();
+        Warehouse::factory()->for($company_1)->for($branch_1)->create([
+            'code' => 'test1',
+        ]);
+
+        $company_2 = $companies[1];
+        $branch_2 = $company_2->branches()->first();
+        $warehouse_2 = Warehouse::factory()->for($company_2)->for($branch_2)->create([
+            'code' => 'test2',
+        ]);
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company_2->id),
+            'branch_id' => Hashids::encode($branch_2->id),
+            'code' => 'test1',
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.edit', $warehouse_2->ulid), $payload);
+
+        $api->assertSuccessful();
+    }
+
+    public function test_warehouse_api_call_update_and_use_existing_name_in_same_company_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        Warehouse::factory()->for($company)->for($branch)->count(2)->create();
+
+        $warehouses = $company->warehouses()->inRandomOrder()->take(2)->get();
+        $warehouse_1 = $warehouses[0];
+        $warehouse_2 = $warehouses[1];
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'name' => $warehouse_1->name,
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.edit', $warehouse_2->ulid), $payload);
+
+        $api->assertUnprocessable();
+        $api->assertJsonValidationErrors(['name']);
+    }
+
+    public function test_warehouse_api_call_update_with_sql_injection_payload_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch()))
+            ->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $payload = Warehouse::factory()->make([
+            'company_id' => Hashids::encode($company->id),
+            'branch_id' => Hashids::encode($branch->id),
+            'code' => "'; DROP TABLE warehouses; --",
+            'name' => "'; DROP TABLE warehouses; --",
+        ])->toArray();
+
+        $api = $this->json('POST', route('api.post.warehouse.edit', $warehouse->ulid), $payload);
+
+        $api->assertSuccessful();
+
+        $this->assertDatabaseHas('warehouses', [
+            'id' => $warehouse->id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+}
diff --git a/api/tests/Feature/API/WarehouseAPI/WarehouseAPIReadTest.php b/api/tests/Feature/API/WarehouseAPI/WarehouseAPIReadTest.php
new file mode 100644
index 000000000..f95829fee
--- /dev/null
+++ b/api/tests/Feature/API/WarehouseAPI/WarehouseAPIReadTest.php
@@ -0,0 +1,542 @@
+<?php
+
+namespace Tests\Feature\API\WarehouseAPI;
+
+use App\Enums\RecordStatusEnum;
+use App\Enums\UserRolesEnum;
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\Role;
+use App\Models\User;
+use App\Models\Warehouse;
+use Exception;
+use Illuminate\Support\Str;
+use Tests\APITestCase;
+use Vinkla\Hashids\Facades\Hashids;
+
+class WarehouseAPIReadTest extends APITestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function test_warehouse_api_call_read_any_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_warehouse_api_call_read_any_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertForbidden();
+    }
+
+    public function test_warehouse_api_call_read_without_authorization_expect_unauthorized_message()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $ulid = $warehouse->ulid;
+
+        $api = $this->getJson(route('api.get.warehouse.read', $ulid));
+
+        $api->assertUnauthorized();
+    }
+
+    public function test_warehouse_api_call_read_without_access_right_expect_forbidden_message()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $ulid = $warehouse->ulid;
+
+        $api = $this->getJson(route('api.get.warehouse.read', $ulid));
+
+        $api->assertForbidden();
+    }
+
+    public function test_warehouse_api_call_read_with_sql_injection_expect_injection_ignored()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create();
+
+        $injections = [
+            "' OR '1'='1",
+            '1 UNION SELECT username, password FROM users',
+            '1; DROP TABLE users',
+            "' OR '1'='1' --",
+            '1 OR SLEEP(5)',
+            "1; INSERT INTO logs (message) VALUES ('Injected SQL query')",
+            "1; UPDATE users SET password = 'hacked' WHERE id = 1; --",
+            "admin'--",
+            "' OR 1=1 --",
+        ];
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'branch_id' => Hashids::encode($branch->id),
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'total' => 0,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $testIdx = random_int(0, count($injections) - 1);
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => $injections[$testIdx],
+            'branch_id' => Hashids::encode($branch->id),
+            'status' => null,
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'data' => [],
+        ]);
+    }
+
+    public function test_warehouse_api_call_read_any_with_or_without_pagination_expect_paginator_or_collection()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'branch_id' => null,
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'branch_id' => null,
+            'status' => null,
+            'refresh' => true,
+            'get' => [
+                'limit' => 10,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_warehouse_api_call_read_any_with_pagination_expect_several_per_page()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'branch_id' => null,
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+
+        $api->assertJsonFragment([
+            'per_page' => 25,
+        ]);
+
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_warehouse_api_call_read_any_with_search_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setIsDefault()
+                ->has(Branch::factory())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)
+            ->count(2)->create();
+
+        Warehouse::factory()->for($company)->for($branch)
+            ->insertStringInName('testing')
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => 'testing',
+            'branch_id' => null,
+            'status' => null,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 3,
+        ]);
+    }
+
+    public function test_warehouse_api_call_read_any_without_search_querystring_expect_failed()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+        ]));
+
+        $api->assertUnprocessable();
+    }
+
+    public function test_warehouse_api_call_read_any_with_special_char_in_search_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => " !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
+            'branch_id' => null,
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+    }
+
+    public function test_warehouse_api_call_read_any_with_negative_value_in_parameters_expect_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'branch_id' => null,
+            'status' => null,
+            'refresh' => false,
+            'paginate' => [
+                'page' => -1,
+                'per_page' => -25,
+            ],
+        ]));
+
+        $api->assertUnprocessable();
+    }
+
+    public function test_warehouse_api_call_read_expect_successful()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $ulid = $warehouse->ulid;
+
+        $api = $this->getJson(route('api.get.warehouse.read', $ulid));
+
+        $api->assertSuccessful();
+    }
+
+    public function test_warehouse_api_call_read_without_ulid_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $this->getJson(route('api.get.warehouse.read', null));
+    }
+
+    public function test_warehouse_api_call_read_with_nonexistance_ulid_expect_not_found()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $ulid = Str::ulid()->generate();
+
+        $api = $this->getJson(route('api.get.warehouse.read', $ulid));
+
+        $api->assertStatus(404);
+    }
+
+    public function test_warehouse_api_call_read_any_with_status_filter_expect_filtered_results()
+    {
+        $user = User::factory()
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )->create();
+
+        $this->actingAs($user);
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        Warehouse::factory()->for($company)->for($branch)
+            ->count(2)->create();
+
+        Warehouse::factory()->for($company)->for($branch)
+            ->setStatusInactive()
+            ->count(3)->create();
+
+        $api = $this->getJson(route('api.get.warehouse.read_any', [
+            'with_trashed' => false,
+            'company_id' => Hashids::encode($company->id),
+            'search' => '',
+            'branch_id' => null,
+            'status' => RecordStatusEnum::ACTIVE->value,
+            'refresh' => true,
+            'paginate' => [
+                'page' => 1,
+                'per_page' => 25,
+            ],
+        ]));
+
+        $api->assertSuccessful();
+        $api->assertJsonStructure([
+            'data',
+            'links' => [
+                'first', 'last', 'prev', 'next',
+            ],
+            'meta' => [
+                'current_page', 'from', 'last_page', 'links', 'path', 'per_page', 'to', 'total',
+            ],
+        ]);
+
+        $api->assertJsonFragment([
+            'total' => 2,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/BranchActions/BranchActionsCreateTest.php b/api/tests/Unit/Actions/BranchActions/BranchActionsCreateTest.php
index feef785c0..41a5611b4 100644
--- a/api/tests/Unit/Actions/BranchActions/BranchActionsCreateTest.php
+++ b/api/tests/Unit/Actions/BranchActions/BranchActionsCreateTest.php
@@ -3,10 +3,11 @@
 namespace Tests\Unit\Actions\BranchActions;
 
 use App\Actions\Branch\BranchActions;
+use App\DTOs\BranchCreateDTO;
 use App\Models\Branch;
 use App\Models\Company;
 use App\Models\User;
-use Exception;
+use ArgumentCountError;
 use Tests\ActionsTestCase;
 
 class BranchActionsCreateTest extends ActionsTestCase
@@ -28,23 +29,72 @@ public function test_branch_actions_call_create_expect_db_has_record()
 
         $company = $user->companies()->inRandomOrder()->first();
 
-        $branchArr = Branch::factory()->for($company)
+        $payload = Branch::factory()->for($company)
             ->setStatusActive()->setIsMainBranch()
             ->make()->toArray();
 
-        $result = $this->branchActions->create($branchArr);
+        $dto = new BranchCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            city: $payload['city'],
+            contact: $payload['contact'],
+            isMain: $payload['is_main'],
+            remarks: $payload['remarks'],
+            status: $payload['status']
+        );
 
+        $result = $this->branchActions->create($dto);
         $this->assertDatabaseHas('branches', [
             'id' => $result->id,
-            'company_id' => $branchArr['company_id'],
-            'code' => $branchArr['code'],
-            'name' => $branchArr['name'],
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_branch_actions_call_create_with_is_main_expect_other_branches_reset()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->state(['is_main' => true]))
+            )
+            ->create();
+
+        $company = $user->companies()->first();
+        $previousMainBranch = $company->branches()->first();
+        $payload = Branch::factory()->for($company)
+            ->setStatusActive()
+            ->setIsMainBranch()
+            ->make()
+            ->toArray();
+
+        $dto = new BranchCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            city: $payload['city'],
+            contact: $payload['contact'],
+            isMain: true,
+            remarks: $payload['remarks'],
+            status: $payload['status'],
+        );
+
+        $result = $this->branchActions->create($dto);
+        $this->assertTrue((bool) $result->is_main);
+        $this->assertDatabaseHas('branches', [
+            'id' => $previousMainBranch->id,
+            'is_main' => false,
         ]);
     }
 
     public function test_branch_actions_call_create_with_empty_array_parameters_expect_exception()
     {
-        $this->expectException(Exception::class);
-        $this->branchActions->create([]);
+        $this->expectException(ArgumentCountError::class);
+        $dto = new BranchCreateDTO(...[]);
+
+        $this->branchActions->create($dto);
     }
 }
diff --git a/api/tests/Unit/Actions/BranchActions/BranchActionsEditTest.php b/api/tests/Unit/Actions/BranchActions/BranchActionsEditTest.php
index 26c5bfb6e..43ebe1343 100644
--- a/api/tests/Unit/Actions/BranchActions/BranchActionsEditTest.php
+++ b/api/tests/Unit/Actions/BranchActions/BranchActionsEditTest.php
@@ -3,10 +3,11 @@
 namespace Tests\Unit\Actions\BranchActions;
 
 use App\Actions\Branch\BranchActions;
+use App\DTOs\BranchUpdateDTO;
 use App\Models\Branch;
 use App\Models\Company;
 use App\Models\User;
-use Exception;
+use ArgumentCountError;
 use Tests\ActionsTestCase;
 
 class BranchActionsEditTest extends ActionsTestCase
@@ -30,22 +31,68 @@ public function test_branch_actions_call_update_expect_db_updated()
         $company = $user->companies()->inRandomOrder()->first();
         $branch = $company->branches()->inRandomOrder()->first();
 
-        $branchArr = Branch::factory()->make()->toArray();
+        $payload = Branch::factory()->make()->toArray();
 
-        $result = $this->branchActions->update($branch, $branchArr);
+        $dto = new BranchUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            city: $payload['city'],
+            contact: $payload['contact'],
+            isMain: $payload['is_main'],
+            remarks: $payload['remarks'],
+            status: $payload['status']
+        );
 
+        $result = $this->branchActions->update($branch, $dto);
         $this->assertInstanceOf(Branch::class, $result);
         $this->assertDatabaseHas('branches', [
             'id' => $branch->id,
             'company_id' => $branch->company_id,
-            'code' => $branchArr['code'],
-            'name' => $branchArr['name'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_branch_actions_call_update_with_is_main_expect_other_branches_reset()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->count(2)->state([
+                    'is_main' => false,
+                ]))
+            )
+            ->create();
+
+        $company = $user->companies()->first();
+        $branches = $company->branches()->orderBy('id')->take(2)->get();
+        $previousMainBranch = $branches[0];
+        $previousMainBranch->update(['is_main' => true]);
+        $targetBranch = $branches[1];
+        $payload = Branch::factory()->setStatusActive()->setIsMainBranch()->make()->toArray();
+
+        $dto = new BranchUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            city: $payload['city'],
+            contact: $payload['contact'],
+            isMain: true,
+            remarks: $payload['remarks'],
+            status: $payload['status'],
+        );
+
+        $result = $this->branchActions->update($targetBranch, $dto);
+        $this->assertTrue((bool) $result->is_main);
+        $this->assertDatabaseHas('branches', [
+            'id' => $previousMainBranch->id,
+            'is_main' => false,
         ]);
     }
 
     public function test_branch_actions_call_update_with_empty_array_parameters_expect_exception()
     {
-        $this->expectException(Exception::class);
+        $this->expectException(ArgumentCountError::class);
 
         $user = User::factory()
             ->has(Company::factory()->setStatusActive()->setIsDefault()
@@ -55,8 +102,8 @@ public function test_branch_actions_call_update_with_empty_array_parameters_expe
         $branch = $user->companies()->inRandomOrder()->first()
             ->branches()->inRandomOrder()->first();
 
-        $branchArr = [];
+        $dto = new BranchUpdateDTO(...[]);
 
-        $this->branchActions->update($branch, $branchArr);
+        $this->branchActions->update($branch, $dto);
     }
 }
diff --git a/api/tests/Unit/Actions/BranchActions/BranchActionsReadTest.php b/api/tests/Unit/Actions/BranchActions/BranchActionsReadTest.php
index b0dd5039d..1acfa5149 100644
--- a/api/tests/Unit/Actions/BranchActions/BranchActionsReadTest.php
+++ b/api/tests/Unit/Actions/BranchActions/BranchActionsReadTest.php
@@ -3,7 +3,9 @@
 namespace Tests\Unit\Actions\BranchActions;
 
 use App\Actions\Branch\BranchActions;
-use App\Enums\UserRoles;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Enums\UserRolesEnum;
 use App\Models\Branch;
 use App\Models\Company;
 use App\Models\Role;
@@ -34,11 +36,20 @@ public function test_branch_actions_call_read_any_with_paginate_true_expect_pagi
         $company = $user->companies()->inRandomOrder()->first();
 
         $result = $this->branchActions->readAny(
+            withTrashed: false,
             companyId: $company->id,
             search: '',
-            paginate: true,
-            page: 1,
-            perPage: 10
+            isMain: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10
+                ),
+                get: null
+            )
         );
 
         $this->assertInstanceOf(Paginator::class, $result);
@@ -54,9 +65,17 @@ public function test_branch_actions_call_read_any_with_paginate_false_expect_col
         $company = $user->companies()->inRandomOrder()->first();
 
         $result = $this->branchActions->readAny(
+            withTrashed: false,
             companyId: $company->id,
             search: '',
-            paginate: false
+            isMain: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: null
+            )
         );
 
         $this->assertInstanceOf(Collection::class, $result);
@@ -66,9 +85,17 @@ public function test_branch_actions_call_read_any_with_nonexistance_companyId_ex
     {
         $maxId = Company::max('id') + 1;
         $result = $this->branchActions->readAny(
+            withTrashed: false,
             companyId: $maxId,
             search: '',
-            paginate: false
+            isMain: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: null
+            )
         );
 
         $this->assertInstanceOf(Collection::class, $result);
@@ -99,11 +126,20 @@ public function test_branch_actions_call_read_any_with_search_parameter_expect_f
         $company = $user->companies()->inRandomOrder()->first();
 
         $result = $this->branchActions->readAny(
+            withTrashed: false,
             companyId: $company->id,
             search: 'testing',
-            paginate: true,
-            page: 1,
-            perPage: 10
+            isMain: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10
+                ),
+                get: null
+            )
         );
 
         $this->assertInstanceOf(Paginator::class, $result);
@@ -116,7 +152,7 @@ public function test_branch_actions_call_read_any_with_page_parameter_negative_e
         $idxMainBranch = random_int(0, $branchCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()
                 ->has(Branch::factory()->setStatusActive()->count($branchCount)
                     ->state(new Sequence(
@@ -130,42 +166,20 @@ public function test_branch_actions_call_read_any_with_page_parameter_negative_e
         $company = $user->companies()->inRandomOrder()->first();
 
         $result = $this->branchActions->readAny(
+            withTrashed: false,
             companyId: $company->id,
             search: '',
-            paginate: true,
-            page: -1,
-            perPage: 10
-        );
-
-        $this->assertInstanceOf(Paginator::class, $result);
-        $this->assertTrue($result->total() == 3);
-    }
-
-    public function test_branch_actions_call_read_any_with_perpage_parameter_negative_expect_results()
-    {
-        $branchCount = 3;
-        $idxMainBranch = random_int(0, $branchCount - 1);
-
-        $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
-            ->has(Company::factory()->setStatusActive()
-                ->has(Branch::factory()->setStatusActive()->count($branchCount)
-                    ->state(new Sequence(
-                        fn (Sequence $sequence) => [
-                            'is_main' => $sequence->index == $idxMainBranch ? true : false,
-                        ]
-                    ))
-                ))
-            ->create();
-
-        $company = $user->companies()->inRandomOrder()->first();
-
-        $result = $this->branchActions->readAny(
-            companyId: $company->id,
-            search: '',
-            paginate: true,
-            page: 1,
-            perPage: -10
+            isMain: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: -1,
+                    perPage: 10
+                ),
+                get: null
+            )
         );
 
         $this->assertInstanceOf(Paginator::class, $result);
diff --git a/api/tests/Unit/Actions/BrandActions/BrandActionsCreateTest.php b/api/tests/Unit/Actions/BrandActions/BrandActionsCreateTest.php
new file mode 100644
index 000000000..fa6a7eac9
--- /dev/null
+++ b/api/tests/Unit/Actions/BrandActions/BrandActionsCreateTest.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace Tests\Unit\Actions\BrandActions;
+
+use App\Actions\Brand\BrandActions;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class BrandActionsCreateTest extends ActionsTestCase
+{
+    private BrandActions $brandActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->brandActions = new BrandActions();
+    }
+
+    public function test_brand_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Brand::factory()->for($company)->make()->toArray();
+
+        $dto = new \App\DTOs\BrandCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name']
+        );
+
+        $result = $this->brandActions->create($dto);
+        $this->assertDatabaseHas('brands', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_brand_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\BrandCreateDTO();
+
+        $this->brandActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/BrandActions/BrandActionsDeleteTest.php b/api/tests/Unit/Actions/BrandActions/BrandActionsDeleteTest.php
new file mode 100644
index 000000000..289c6d194
--- /dev/null
+++ b/api/tests/Unit/Actions/BrandActions/BrandActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\BrandActions;
+
+use App\Actions\Brand\BrandActions;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class BrandActionsDeleteTest extends ActionsTestCase
+{
+    private BrandActions $brandActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->brandActions = new BrandActions();
+    }
+
+    public function test_brand_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Brand::factory())
+            )->create();
+
+        $brand = $user->companies()->inRandomOrder()->first()
+            ->brands()->inRandomOrder()->first();
+        $result = $this->brandActions->delete($brand);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('brands', [
+            'id' => $brand->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/BrandActions/BrandActionsEditTest.php b/api/tests/Unit/Actions/BrandActions/BrandActionsEditTest.php
new file mode 100644
index 000000000..d841ee5a2
--- /dev/null
+++ b/api/tests/Unit/Actions/BrandActions/BrandActionsEditTest.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace Tests\Unit\Actions\BrandActions;
+
+use App\Actions\Brand\BrandActions;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class BrandActionsEditTest extends ActionsTestCase
+{
+    private BrandActions $brandActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->brandActions = new BrandActions();
+    }
+
+    public function test_brand_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Brand::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $brand = $company->brands()->inRandomOrder()->first();
+
+        $payload = Brand::factory()->make()->toArray();
+
+        $dto = new \App\DTOs\BrandUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name']
+        );
+
+        $result = $this->brandActions->update($brand, $dto);
+        $this->assertInstanceOf(Brand::class, $result);
+        $this->assertDatabaseHas('brands', [
+            'id' => $brand->id,
+            'company_id' => $brand->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_brand_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Brand::factory())
+            )->create();
+
+        $brand = $user->companies()->inRandomOrder()->first()
+            ->brands()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\BrandUpdateDTO();
+
+        $this->brandActions->update($brand, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/BrandActions/BrandActionsReadTest.php b/api/tests/Unit/Actions/BrandActions/BrandActionsReadTest.php
new file mode 100644
index 000000000..42c9f3b57
--- /dev/null
+++ b/api/tests/Unit/Actions/BrandActions/BrandActionsReadTest.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Tests\Unit\Actions\BrandActions;
+
+use App\Actions\Brand\BrandActions;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class BrandActionsReadTest extends ActionsTestCase
+{
+    private BrandActions $brandActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->brandActions = new BrandActions();
+    }
+
+    public function test_brand_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Brand::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->brandActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_brand_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Brand::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->brandActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_brand_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->brandActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_brand_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $brandCount = 4;
+        $idxTest = random_int(0, $brandCount - 1);
+        $defaultName = Brand::factory()->make()->name;
+        $testname = Brand::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Brand::factory()->count($brandCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->brandActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_brand_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_brand_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_brand_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Brand::factory())
+            )->create();
+
+        $brand = $user->companies()->inRandomOrder()->first()
+            ->brands()->inRandomOrder()->first();
+
+        $result = $this->brandActions->read($brand);
+
+        $this->assertInstanceOf(Brand::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsCreateTest.php b/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsCreateTest.php
new file mode 100644
index 000000000..d807d3485
--- /dev/null
+++ b/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsCreateTest.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace Tests\Unit\Actions\CashAccountActions;
+
+use App\Actions\CashAccount\CashAccountActions;
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CashAccountActionsCreateTest extends ActionsTestCase
+{
+    private CashAccountActions $cashAccountActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->cashAccountActions = new CashAccountActions();
+    }
+
+    public function test_cash_account_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()->has(Branch::factory()))
+            ->create();
+
+        $company = $user->companies()->whereHas('branches')->inRandomOrder()->first();
+        $branch = $company->branches()->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->for($company)
+            ->make()->toArray();
+        $payload['branch_id'] = $branch->id;
+
+        $dto = new \App\DTOs\CashAccountCreateDTO(
+            companyId: $payload['company_id'],
+            branchId: $payload['branch_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            isBank: $payload['is_bank'],
+            isActive: $payload['is_active'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->cashAccountActions->create($dto);
+        $this->assertDatabaseHas('cash_accounts', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_cash_account_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\CashAccountCreateDTO();
+
+        $this->cashAccountActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsDeleteTest.php b/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsDeleteTest.php
new file mode 100644
index 000000000..096e82470
--- /dev/null
+++ b/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsDeleteTest.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace Tests\Unit\Actions\CashAccountActions;
+
+use App\Actions\CashAccount\CashAccountActions;
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CashAccountActionsDeleteTest extends ActionsTestCase
+{
+    private CashAccountActions $cashAccountActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->cashAccountActions = new CashAccountActions();
+    }
+
+    public function test_cash_account_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory())
+                ->has(
+                    CashAccount::factory()->state(function (array $attributes, Company $company) {
+                        return [
+                            'branch_id' => $company->branches()->inRandomOrder()->first()->id,
+                        ];
+                    })
+                )
+            )->create();
+
+        $cashAccount = $user->companies()->inRandomOrder()->first()
+            ->cashAccounts()->inRandomOrder()->first();
+        $result = $this->cashAccountActions->delete($cashAccount);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('cash_accounts', [
+            'id' => $cashAccount->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsEditTest.php b/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsEditTest.php
new file mode 100644
index 000000000..68aa6134a
--- /dev/null
+++ b/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsEditTest.php
@@ -0,0 +1,86 @@
+<?php
+
+namespace Tests\Unit\Actions\CashAccountActions;
+
+use App\Actions\CashAccount\CashAccountActions;
+use App\DTOs\CashAccountUpdateDTO;
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CashAccountActionsEditTest extends ActionsTestCase
+{
+    private CashAccountActions $cashAccountActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->cashAccountActions = new CashAccountActions();
+    }
+
+    public function test_cash_account_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory())
+                ->has(
+                    CashAccount::factory()->state(function (array $attributes, Company $company) {
+                        return [
+                            'branch_id' => $company->branches()->inRandomOrder()->first()->id,
+                        ];
+                    })
+                )
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $cashAccount = $company->cashAccounts()->inRandomOrder()->first();
+
+        $payload = CashAccount::factory()->make()->toArray();
+        $payload['company_id'] = $company->id;
+
+        $dto = new CashAccountUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            isBank: $payload['is_bank'],
+            isActive: $payload['is_active'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->cashAccountActions->update($cashAccount, $dto);
+        $this->assertInstanceOf(CashAccount::class, $result);
+        $this->assertDatabaseHas('cash_accounts', [
+            'id' => $cashAccount->id,
+            'company_id' => $cashAccount->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_cash_account_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(\ArgumentCountError::class);
+        $dtoClass = \App\DTOs\CashAccountUpdateDTO::class;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory())
+                ->has(
+                    CashAccount::factory()->state(function (array $attributes, Company $company) {
+                        return [
+                            'branch_id' => $company->branches()->inRandomOrder()->first()->id,
+                        ];
+                    })
+                )
+            )->create();
+
+        $cashAccount = $user->companies()->inRandomOrder()->first()
+            ->cashAccounts()->inRandomOrder()->first();
+
+        $dto = new $dtoClass(...[]);
+
+        $this->cashAccountActions->update($cashAccount, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsReadTest.php b/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsReadTest.php
new file mode 100644
index 000000000..893aa21e1
--- /dev/null
+++ b/api/tests/Unit/Actions/CashAccountActions/CashAccountActionsReadTest.php
@@ -0,0 +1,211 @@
+<?php
+
+namespace Tests\Unit\Actions\CashAccountActions;
+
+use App\Actions\CashAccount\CashAccountActions;
+use App\Models\Branch;
+use App\Models\CashAccount;
+use App\Models\Company;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class CashAccountActionsReadTest extends ActionsTestCase
+{
+    private CashAccountActions $cashAccountActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->cashAccountActions = new CashAccountActions();
+    }
+
+    public function test_cash_account_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory())
+                ->has(
+                    CashAccount::factory()->state(function (array $attributes, Company $company) {
+                        return [
+                            'branch_id' => $company->branches()->inRandomOrder()->first()->id,
+                        ];
+                    })
+                )
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->cashAccountActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_cash_account_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory())
+                ->has(
+                    CashAccount::factory()->state(function (array $attributes, Company $company) {
+                        return [
+                            'branch_id' => $company->branches()->inRandomOrder()->first()->id,
+                        ];
+                    })
+                )
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->cashAccountActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_cash_account_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->cashAccountActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_cash_account_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $cashAccountCount = 4;
+        $idxTest = random_int(0, $cashAccountCount - 1);
+        $defaultName = CashAccount::factory()->make()->name;
+        $testname = CashAccount::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory())
+                ->has(
+                    CashAccount::factory()->count($cashAccountCount)
+                        ->state(function (array $attributes, Company $company) {
+                            return [
+                                'branch_id' => $company->branches()->inRandomOrder()->first()->id,
+                            ];
+                        })
+                        ->state(new Sequence(
+                            fn (Sequence $sequence) => [
+                                'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                            ]
+                        ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->cashAccountActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_cash_account_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $cashAccountCount = 3;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()
+                ->has(Branch::factory())
+                ->has(CashAccount::factory()->count($cashAccountCount)->state(function (array $attributes, Company $company) {
+                    return [
+                        'branch_id' => $company->branches()->inRandomOrder()->first()->id,
+                    ];
+                }))
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->cashAccountActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: -1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == $cashAccountCount);
+    }
+
+    public function test_cash_account_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory())
+                ->has(
+                    CashAccount::factory()->state(function (array $attributes, Company $company) {
+                        return [
+                            'branch_id' => $company->branches()->inRandomOrder()->first()->id,
+                        ];
+                    })
+                )
+            )->create();
+
+        $cashAccount = $user->companies()->inRandomOrder()->first()
+            ->cashAccounts()->inRandomOrder()->first();
+
+        $result = $this->cashAccountActions->read($cashAccount);
+
+        $this->assertInstanceOf(CashAccount::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/CompanyActions/CompanyActionsCreateTest.php b/api/tests/Unit/Actions/CompanyActions/CompanyActionsCreateTest.php
index 4b530b581..93af8fcf5 100644
--- a/api/tests/Unit/Actions/CompanyActions/CompanyActionsCreateTest.php
+++ b/api/tests/Unit/Actions/CompanyActions/CompanyActionsCreateTest.php
@@ -3,9 +3,9 @@
 namespace Tests\Unit\Actions\CompanyActions;
 
 use App\Actions\Company\CompanyActions;
+use App\DTOs\CompanyCreateDTO;
 use App\Models\Company;
 use App\Models\User;
-use Exception;
 use Tests\ActionsTestCase;
 
 class CompanyActionsCreateTest extends ActionsTestCase
@@ -16,30 +16,72 @@ protected function setUp(): void
     {
         parent::setUp();
 
-        $this->companyActions = new CompanyActions();
+        $this->companyActions = app(CompanyActions::class);
     }
 
     public function test_company_action_call_create_expect_db_has_record()
     {
         $user = User::factory()->create();
 
-        $companyArr = Company::factory()
+        $payload = Company::factory()
             ->setStatusActive()->setIsDefault()->make([
                 'user_id' => $user->id,
             ])->toArray();
 
-        $result = $this->companyActions->create($companyArr);
+        $dto = new CompanyCreateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            default: $payload['default'],
+            status: $payload['status'],
+        );
+
+        $result = $this->companyActions->create($user, $dto);
 
         $this->assertDatabaseHas('companies', [
             'id' => $result->id,
-            'code' => $companyArr['code'],
-            'name' => $companyArr['name'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_company_action_call_create_with_default_true_expect_previous_default_reset()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $previousDefaultCompany = $user->companies()->first();
+        $payload = Company::factory()
+            ->setStatusActive()
+            ->setIsDefault()
+            ->make()
+            ->toArray();
+
+        $dto = new CompanyCreateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            default: true,
+            status: $payload['status'],
+        );
+
+        $result = $this->companyActions->create($user, $dto);
+        $this->assertTrue((bool) $result->default);
+        $this->assertDatabaseHas('companies', [
+            'id' => $previousDefaultCompany->id,
+            'default' => false,
         ]);
     }
 
     public function test_company_service_call_create_with_empty_array_parameters_expect_exception()
     {
-        $this->expectException(Exception::class);
-        $this->companyActions->create([]);
+        $user = User::factory()->create();
+        $dtoClass = CompanyCreateDTO::class;
+
+        $this->expectException(\ArgumentCountError::class);
+        $dto = new $dtoClass(...[]);
+
+        $this->companyActions->create($user, $dto);
     }
 }
diff --git a/api/tests/Unit/Actions/CompanyActions/CompanyActionsDeleteTest.php b/api/tests/Unit/Actions/CompanyActions/CompanyActionsDeleteTest.php
index 54d52823c..6dbb8bcda 100644
--- a/api/tests/Unit/Actions/CompanyActions/CompanyActionsDeleteTest.php
+++ b/api/tests/Unit/Actions/CompanyActions/CompanyActionsDeleteTest.php
@@ -15,7 +15,7 @@ protected function setUp(): void
     {
         parent::setUp();
 
-        $this->companyActions = new CompanyActions();
+        $this->companyActions = app(CompanyActions::class);
     }
 
     public function test_company_actions_call_delete_expect_bool()
diff --git a/api/tests/Unit/Actions/CompanyActions/CompanyActionsEditTest.php b/api/tests/Unit/Actions/CompanyActions/CompanyActionsEditTest.php
index 30d1ad5fb..3f4ed32ae 100644
--- a/api/tests/Unit/Actions/CompanyActions/CompanyActionsEditTest.php
+++ b/api/tests/Unit/Actions/CompanyActions/CompanyActionsEditTest.php
@@ -3,9 +3,9 @@
 namespace Tests\Unit\Actions\CompanyActions;
 
 use App\Actions\Company\CompanyActions;
+use App\DTOs\CompanyUpdateDTO;
 use App\Models\Company;
 use App\Models\User;
-use Exception;
 use Tests\ActionsTestCase;
 
 class CompanyActionsEditTest extends ActionsTestCase
@@ -16,7 +16,7 @@ protected function setUp(): void
     {
         parent::setUp();
 
-        $this->companyActions = new CompanyActions();
+        $this->companyActions = app(CompanyActions::class);
     }
 
     public function test_company_service_call_update_expect_db_updated()
@@ -26,29 +26,66 @@ public function test_company_service_call_update_expect_db_updated()
             ->create();
 
         $company = $user->companies->first();
-        $companyArr = Company::factory()->make()->toArray();
+        $payload = Company::factory()->make()->toArray();
 
-        $result = $this->companyActions->update($company, $companyArr);
+        $dto = new CompanyUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            default: $payload['default'],
+            status: $payload['status'],
+        );
 
+        $result = $this->companyActions->update($user, $company, $dto);
         $this->assertInstanceOf(Company::class, $result);
         $this->assertDatabaseHas('companies', [
             'id' => $company->id,
-            'code' => $companyArr['code'],
-            'name' => $companyArr['name'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_company_service_call_update_with_default_true_expect_other_default_reset()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->has(Company::factory()->setStatusActive()->state(['default' => false]))
+            ->create();
+
+        $companies = $user->companies()->orderBy('id')->take(2)->get();
+        $previousDefaultCompany = $companies[0];
+        $targetCompany = $companies[1];
+        $payload = Company::factory()->setStatusActive()->setIsDefault()->make()->toArray();
+
+        $dto = new CompanyUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            default: true,
+            status: $payload['status'],
+        );
+
+        $result = $this->companyActions->update($user, $targetCompany, $dto);
+        $this->assertTrue((bool) $result->default);
+        $this->assertDatabaseHas('companies', [
+            'id' => $previousDefaultCompany->id,
+            'default' => false,
         ]);
     }
 
     public function test_company_service_call_update_with_empty_array_parameters_expect_exception()
     {
-        $this->expectException(Exception::class);
+        $this->expectException(\ArgumentCountError::class);
+        $dtoClass = CompanyUpdateDTO::class;
 
         $user = User::factory()
             ->has(Company::factory()->setStatusActive()->setIsDefault())
             ->create();
 
         $company = $user->companies->first();
-        $companyArr = [];
 
-        $this->companyActions->update($company, $companyArr);
+        $dto = new $dtoClass(...[]);
+
+        $this->companyActions->update($user, $company, $dto);
     }
 }
diff --git a/api/tests/Unit/Actions/CompanyActions/CompanyActionsReadTest.php b/api/tests/Unit/Actions/CompanyActions/CompanyActionsReadTest.php
index a5c2402b9..b52e9cf5e 100644
--- a/api/tests/Unit/Actions/CompanyActions/CompanyActionsReadTest.php
+++ b/api/tests/Unit/Actions/CompanyActions/CompanyActionsReadTest.php
@@ -3,7 +3,9 @@
 namespace Tests\Unit\Actions\CompanyActions;
 
 use App\Actions\Company\CompanyActions;
-use App\Enums\UserRoles;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Enums\UserRolesEnum;
 use App\Models\Company;
 use App\Models\Role;
 use App\Models\User;
@@ -20,7 +22,7 @@ protected function setUp(): void
     {
         parent::setUp();
 
-        $this->companyActions = new CompanyActions();
+        $this->companyActions = app(CompanyActions::class);
     }
 
     public function test_company_actions_call_read_any_with_paginate_true_expect_paginator_object()
@@ -30,11 +32,20 @@ public function test_company_actions_call_read_any_with_paginate_true_expect_pag
             ->create();
 
         $result = $this->companyActions->readAny(
-            userId: $user->id,
-            search: '',
-            paginate: true,
-            page: 1,
-            perPage: 10
+            user: $user,
+            withTrashed: false,
+            search: null,
+            default: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10,
+                ),
+                get: null,
+            ),
         );
 
         $this->assertInstanceOf(Paginator::class, $result);
@@ -47,9 +58,17 @@ public function test_company_actions_call_read_any_with_paginate_false_expect_co
             ->create();
 
         $result = $this->companyActions->readAny(
-            userId: $user->id,
-            search: '',
-            paginate: false
+            user: $user,
+            withTrashed: false,
+            search: null,
+            default: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: null,
+            ),
         );
 
         $this->assertInstanceOf(Collection::class, $result);
@@ -75,11 +94,20 @@ public function test_company_actions_call_read_any_with_search_parameter_expect_
             ->create();
 
         $result = $this->companyActions->readAny(
-            userId: $user->id,
+            user: $user,
+            withTrashed: false,
             search: 'testing',
-            paginate: true,
-            page: 1,
-            perPage: 10
+            default: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10,
+                ),
+                get: null,
+            ),
         );
 
         $this->assertInstanceOf(Paginator::class, $result);
@@ -92,7 +120,7 @@ public function test_company_actions_call_read_any_with_page_parameter_negative_
         $idxDefaultCompany = random_int(0, $companyCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->count($companyCount)
                 ->state(new Sequence(
                     fn (Sequence $sequence) => [
@@ -103,11 +131,20 @@ public function test_company_actions_call_read_any_with_page_parameter_negative_
             ->create();
 
         $result = $this->companyActions->readAny(
-            userId: $user->id,
+            user: $user,
+            withTrashed: false,
             search: '',
-            paginate: true,
-            page: -1,
-            perPage: 10
+            default: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: -1,
+                    perPage: 10,
+                ),
+                get: null,
+            ),
         );
 
         $this->assertInstanceOf(Paginator::class, $result);
@@ -120,7 +157,7 @@ public function test_company_actions_call_read_any_with_perpage_parameter_negati
         $idxDefaultCompany = random_int(0, $companyCount - 1);
 
         $user = User::factory()
-            ->hasAttached(Role::where('name', '=', UserRoles::DEVELOPER->value)->first())
+            ->hasAttached(Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first())
             ->has(Company::factory()->setStatusActive()->count($companyCount)
                 ->state(new Sequence(
                     fn (Sequence $sequence) => [
@@ -131,11 +168,20 @@ public function test_company_actions_call_read_any_with_perpage_parameter_negati
             ->create();
 
         $result = $this->companyActions->readAny(
-            userId: $user->id,
+            user: $user,
+            withTrashed: false,
             search: '',
-            paginate: true,
-            page: 1,
-            perPage: -10
+            default: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: -10,
+                ),
+                get: null,
+            ),
         );
 
         $this->assertInstanceOf(Paginator::class, $result);
diff --git a/api/tests/Unit/Actions/CustomerActions/CustomerActionsCreateTest.php b/api/tests/Unit/Actions/CustomerActions/CustomerActionsCreateTest.php
new file mode 100644
index 000000000..fef23d519
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerActions/CustomerActionsCreateTest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerActions;
+
+use App\Actions\Customer\CustomerActions;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\CustomerGroup;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CustomerActionsCreateTest extends ActionsTestCase
+{
+    private CustomerActions $customerActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerActions = new CustomerActions();
+    }
+
+    public function test_customer_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $group = CustomerGroup::factory()->for($company)->create();
+
+        $payload = Customer::factory()->for($company)
+            ->make([
+                'group_id' => $group->id,
+            ])->toArray();
+
+        $dto = new \App\DTOs\CustomerCreateDTO(
+            companyId: $payload['company_id'],
+            groupId: $payload['group_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            paymentTermType: $payload['payment_term_type'],
+            paymentTerm: $payload['payment_term'],
+            taxableEnterprise: $payload['taxable_enterprise'],
+            taxId: $payload['tax_id'],
+            isMember: $payload['is_member'],
+            maxOpenInvoice: $payload['max_open_invoice'],
+            maxInvoiceAge: $payload['max_invoice_age'],
+            maxOutstandingInvoice: $payload['max_outstanding_invoice'],
+            zone: $payload['zone'],
+            remarks: $payload['remarks'],
+            status: $payload['status']
+        );
+
+        $result = $this->customerActions->create($dto);
+        $this->assertDatabaseHas('customers', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'is_member' => $payload['is_member'],
+            'name' => $payload['name'],
+            'group_id' => $payload['group_id'],
+            'zone' => $payload['zone'],
+            'max_open_invoice' => $payload['max_open_invoice'],
+            'max_outstanding_invoice' => $payload['max_outstanding_invoice'],
+            'max_invoice_age' => $payload['max_invoice_age'],
+            'payment_term_type' => $payload['payment_term_type'],
+            'payment_term' => $payload['payment_term'],
+            'taxable_enterprise' => $payload['taxable_enterprise'],
+            'tax_id' => $payload['tax_id'],
+            'status' => $payload['status'],
+            'remarks' => $payload['remarks'],
+        ]);
+    }
+
+    public function test_customer_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\CustomerCreateDTO();
+
+        $this->customerActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerActions/CustomerActionsDeleteTest.php b/api/tests/Unit/Actions/CustomerActions/CustomerActionsDeleteTest.php
new file mode 100644
index 000000000..0a3c73532
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerActions/CustomerActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerActions;
+
+use App\Actions\Customer\CustomerActions;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CustomerActionsDeleteTest extends ActionsTestCase
+{
+    private CustomerActions $customerActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerActions = new CustomerActions();
+    }
+
+    public function test_customer_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Customer::factory())
+            )->create();
+
+        $customer = $user->companies()->inRandomOrder()->first()
+            ->customers()->inRandomOrder()->first();
+        $result = $this->customerActions->delete($customer);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('customers', [
+            'id' => $customer->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerActions/CustomerActionsEditTest.php b/api/tests/Unit/Actions/CustomerActions/CustomerActionsEditTest.php
new file mode 100644
index 000000000..635891333
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerActions/CustomerActionsEditTest.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerActions;
+
+use App\Actions\Customer\CustomerActions;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\CustomerGroup;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class CustomerActionsEditTest extends ActionsTestCase
+{
+    private CustomerActions $customerActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerActions = new CustomerActions();
+    }
+
+    public function test_customer_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Customer::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customer = $company->customers()->inRandomOrder()->first();
+
+        $group = CustomerGroup::factory()->for($company)->create();
+
+        $payload = Customer::factory()->for($company)
+            ->make([
+                'group_id' => $group->id,
+            ])->toArray();
+
+        $dto = new \App\DTOs\CustomerUpdateDTO(
+            groupId: $payload['group_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            paymentTermType: $payload['payment_term_type'],
+            paymentTerm: $payload['payment_term'],
+            taxableEnterprise: $payload['taxable_enterprise'],
+            taxId: $payload['tax_id'],
+            isMember: $payload['is_member'],
+            maxOpenInvoice: $payload['max_open_invoice'],
+            maxInvoiceAge: $payload['max_invoice_age'],
+            maxOutstandingInvoice: $payload['max_outstanding_invoice'],
+            zone: $payload['zone'],
+            remarks: $payload['remarks'],
+            status: $payload['status']
+        );
+
+        $result = $this->customerActions->update($customer, $dto);
+        $this->assertInstanceOf(Customer::class, $result);
+        $this->assertDatabaseHas('customers', [
+            'id' => $customer->id,
+            'company_id' => $customer->company_id,
+            'code' => $payload['code'],
+            'is_member' => $payload['is_member'],
+            'name' => $payload['name'],
+            'group_id' => $payload['group_id'],
+            'zone' => $payload['zone'],
+            'max_open_invoice' => $payload['max_open_invoice'],
+            'max_outstanding_invoice' => $payload['max_outstanding_invoice'],
+            'max_invoice_age' => $payload['max_invoice_age'],
+            'payment_term_type' => $payload['payment_term_type'],
+            'payment_term' => $payload['payment_term'],
+            'taxable_enterprise' => $payload['taxable_enterprise'],
+            'tax_id' => $payload['tax_id'],
+            'status' => $payload['status'],
+            'remarks' => $payload['remarks'],
+        ]);
+    }
+
+    public function test_customer_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Customer::factory())
+            )->create();
+
+        $customer = $user->companies()->inRandomOrder()->first()
+            ->customers()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\CustomerUpdateDTO();
+
+        $this->customerActions->update($customer, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerActions/CustomerActionsReadTest.php b/api/tests/Unit/Actions/CustomerActions/CustomerActionsReadTest.php
new file mode 100644
index 000000000..0a6b863f0
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerActions/CustomerActionsReadTest.php
@@ -0,0 +1,211 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerActions;
+
+use App\Actions\Customer\CustomerActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class CustomerActionsReadTest extends ActionsTestCase
+{
+    private CustomerActions $customerActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerActions = new CustomerActions();
+    }
+
+    public function test_customer_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Customer::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerActions->readAny(
+            withTrashed: false,
+            companyId: $company->id,
+            search: '',
+            isMember: null,
+            groupId: null,
+            zone: null,
+            maxOpenInvoice: null,
+            maxOutstandingInvoice: null,
+            maxInvoiceAge: null,
+            paymentTermType: null,
+            paymentTerm: null,
+            taxableEnterprise: null,
+            taxId: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10,
+                ),
+                get: null,
+            )
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_customer_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Customer::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerActions->readAny(
+            withTrashed: false,
+            companyId: $company->id,
+            search: '',
+            isMember: null,
+            groupId: null,
+            zone: null,
+            maxOpenInvoice: null,
+            maxOutstandingInvoice: null,
+            maxInvoiceAge: null,
+            paymentTermType: null,
+            paymentTerm: null,
+            taxableEnterprise: null,
+            taxId: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: new ExecuteGetDTO(
+                    limit: 10,
+                ),
+            )
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_customer_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->customerActions->readAny(
+            withTrashed: false,
+            companyId: $maxId,
+            search: '',
+            isMember: null,
+            groupId: null,
+            zone: null,
+            maxOpenInvoice: null,
+            maxOutstandingInvoice: null,
+            maxInvoiceAge: null,
+            paymentTermType: null,
+            paymentTerm: null,
+            taxableEnterprise: null,
+            taxId: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: new ExecuteGetDTO(
+                    limit: 10,
+                ),
+            )
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_customer_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $customerCount = 4;
+        $idxTest = random_int(0, $customerCount - 1);
+        $defaultName = Customer::factory()->make()->name;
+        $testname = Customer::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Customer::factory()->count($customerCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerActions->readAny(
+            withTrashed: false,
+            companyId: $company->id,
+            search: 'testing',
+            isMember: null,
+            groupId: null,
+            zone: null,
+            maxOpenInvoice: null,
+            maxOutstandingInvoice: null,
+            maxInvoiceAge: null,
+            paymentTermType: null,
+            paymentTerm: null,
+            taxableEnterprise: null,
+            taxId: null,
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10,
+                ),
+                get: null,
+            )
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_customer_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_customer_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_customer_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Customer::factory())
+            )->create();
+
+        $customer = $user->companies()->inRandomOrder()->first()
+            ->customers()->inRandomOrder()->first();
+
+        $result = $this->customerActions->read($customer);
+
+        $this->assertInstanceOf(Customer::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsCreateTest.php b/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsCreateTest.php
new file mode 100644
index 000000000..d03d4356e
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsCreateTest.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerAddressActions;
+
+use App\Actions\CustomerAddress\CustomerAddressActions;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\CustomerAddress;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CustomerAddressActionsCreateTest extends ActionsTestCase
+{
+    private CustomerAddressActions $customerAddressActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerAddressActions = new CustomerAddressActions();
+    }
+
+    public function test_customer_address_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $customer = Customer::factory()->for($company)->create();
+
+        $payload = CustomerAddress::factory()->for($company)
+            ->make([
+                'customer_id' => $customer->id,
+            ])->toArray();
+
+        $dto = new \App\DTOs\CustomerAddressCreateDTO(
+            companyId: $payload['company_id'],
+            customerId: $payload['customer_id'],
+            address: $payload['address'],
+            city: $payload['city'],
+            contact: $payload['contact'],
+            isMain: $payload['is_main'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->customerAddressActions->create($dto);
+        $this->assertDatabaseHas('customer_addresses', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'customer_id' => $payload['customer_id'],
+            'address' => $payload['address'],
+            'city' => $payload['city'],
+            'contact' => $payload['contact'],
+            'is_main' => $payload['is_main'],
+            'remarks' => $payload['remarks'],
+        ]);
+    }
+
+    public function test_customer_address_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\CustomerAddressCreateDTO();
+
+        $this->customerAddressActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsDeleteTest.php b/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsDeleteTest.php
new file mode 100644
index 000000000..2fb71194e
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsDeleteTest.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerAddressActions;
+
+use App\Actions\CustomerAddress\CustomerAddressActions;
+use App\Models\Company;
+use App\Models\Customer;
+use App\Models\CustomerAddress;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CustomerAddressActionsDeleteTest extends ActionsTestCase
+{
+    private CustomerAddressActions $customerAddressActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerAddressActions = new CustomerAddressActions();
+    }
+
+    public function test_customer_address_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Customer::factory(), 'customers'))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customer = $company->customers()->inRandomOrder()->first();
+
+        $customerAddress = CustomerAddress::factory()
+            ->for($customer, 'customer')
+            ->create();
+        $result = $this->customerAddressActions->delete($customerAddress);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('customer_addresses', [
+            'id' => $customerAddress->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsEditTest.php b/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsEditTest.php
new file mode 100644
index 000000000..01ac70c1d
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsEditTest.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerAddressActions;
+
+use App\Actions\CustomerAddress\CustomerAddressActions;
+use App\Models\Company;
+use App\Models\CustomerAddress;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class CustomerAddressActionsEditTest extends ActionsTestCase
+{
+    private CustomerAddressActions $customerAddressActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerAddressActions = new CustomerAddressActions();
+    }
+
+    public function test_customer_address_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerAddress::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerAddress = $company->customerAddresses()->inRandomOrder()->first();
+
+        $payload = CustomerAddress::factory()->make()->toArray();
+
+        $dto = new \App\DTOs\CustomerAddressUpdateDTO(
+            address: $payload['address'],
+            city: $payload['city'],
+            contact: $payload['contact'],
+            isMain: $payload['is_main'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->customerAddressActions->update($customerAddress, $dto);
+        $this->assertInstanceOf(CustomerAddress::class, $result);
+        $this->assertDatabaseHas('customer_addresses', [
+            'id' => $customerAddress->id,
+            'company_id' => $customerAddress->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_customer_address_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerAddress::factory())
+            )->create();
+
+        $customerAddress = $user->companies()->inRandomOrder()->first()
+            ->customerAddresses()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\CustomerAddressUpdateDTO();
+
+        $this->customerAddressActions->update($customerAddress, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsReadTest.php b/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsReadTest.php
new file mode 100644
index 000000000..2b757e055
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerAddressActions/CustomerAddressActionsReadTest.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerAddressActions;
+
+use App\Actions\CustomerAddress\CustomerAddressActions;
+use App\Models\Company;
+use App\Models\CustomerAddress;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class CustomerAddressActionsReadTest extends ActionsTestCase
+{
+    private CustomerAddressActions $customerAddressActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerAddressActions = new CustomerAddressActions();
+    }
+
+    public function test_customer_address_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerAddress::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerAddressActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_customer_address_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerAddress::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerAddressActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_customer_address_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->customerAddressActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_customer_address_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $customerAddressCount = 4;
+        $idxTest = random_int(0, $customerAddressCount - 1);
+        $defaultName = CustomerAddress::factory()->make()->name;
+        $testname = CustomerAddress::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerAddress::factory()->count($customerAddressCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerAddressActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_customer_address_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_customer_address_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_customer_address_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerAddress::factory())
+            )->create();
+
+        $customerAddress = $user->companies()->inRandomOrder()->first()
+            ->customerAddresses()->inRandomOrder()->first();
+
+        $result = $this->customerAddressActions->read($customerAddress);
+
+        $this->assertInstanceOf(CustomerAddress::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsCreateTest.php b/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsCreateTest.php
new file mode 100644
index 000000000..18715ac4b
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsCreateTest.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerGroupActions;
+
+use App\Actions\CustomerGroup\CustomerGroupActions;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CustomerGroupActionsCreateTest extends ActionsTestCase
+{
+    private CustomerGroupActions $customerGroupActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerGroupActions = new CustomerGroupActions();
+    }
+
+    public function test_customer_group_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = CustomerGroup::factory()->for($company)
+            ->make()->toArray();
+
+        $dto = new \App\DTOs\CustomerGroupCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            paymentTermType: $payload['payment_term_type'],
+            paymentTerm: $payload['payment_term'],
+            sellAtCost: $payload['sell_at_cost'],
+            sellingPoint: $payload['selling_point'],
+            sellingPointMultiple: $payload['selling_point_multiple'],
+            priceMarkupPercent: $payload['price_markup_percent'],
+            priceMarkupNominal: $payload['price_markup_nominal'],
+            priceMarkdownPercent: $payload['price_markdown_percent'],
+            priceMarkdownNominal: $payload['price_markdown_nominal'],
+            roundingType: $payload['rounding_type'],
+            roundingDigit: $payload['rounding_digit'],
+            maxOpenInvoice: $payload['max_open_invoice'],
+            maxInvoiceAge: $payload['max_invoice_age'],
+            maxOutstandingInvoice: $payload['max_outstanding_invoice'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->customerGroupActions->create($dto);
+        $this->assertDatabaseHas('customer_groups', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_customer_group_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\CustomerGroupCreateDTO();
+
+        $this->customerGroupActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsDeleteTest.php b/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsDeleteTest.php
new file mode 100644
index 000000000..cea14a8ec
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerGroupActions;
+
+use App\Actions\CustomerGroup\CustomerGroupActions;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class CustomerGroupActionsDeleteTest extends ActionsTestCase
+{
+    private CustomerGroupActions $customerGroupActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerGroupActions = new CustomerGroupActions();
+    }
+
+    public function test_customer_group_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerGroup::factory())
+            )->create();
+
+        $customerGroup = $user->companies()->inRandomOrder()->first()
+            ->customerGroups()->inRandomOrder()->first();
+        $result = $this->customerGroupActions->delete($customerGroup);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('customer_groups', [
+            'id' => $customerGroup->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsEditTest.php b/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsEditTest.php
new file mode 100644
index 000000000..8ec6ae8ef
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsEditTest.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerGroupActions;
+
+use App\Actions\CustomerGroup\CustomerGroupActions;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class CustomerGroupActionsEditTest extends ActionsTestCase
+{
+    private CustomerGroupActions $customerGroupActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerGroupActions = new CustomerGroupActions();
+    }
+
+    public function test_customer_group_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerGroup::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $customerGroup = $company->customerGroups()->inRandomOrder()->first();
+
+        $payload = CustomerGroup::factory()->make()->toArray();
+
+        $dto = new \App\DTOs\CustomerGroupUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            paymentTermType: $payload['payment_term_type'],
+            paymentTerm: $payload['payment_term'],
+            sellAtCost: $payload['sell_at_cost'],
+            sellingPoint: $payload['selling_point'],
+            sellingPointMultiple: $payload['selling_point_multiple'],
+            priceMarkupPercent: $payload['price_markup_percent'],
+            priceMarkupNominal: $payload['price_markup_nominal'],
+            priceMarkdownPercent: $payload['price_markdown_percent'],
+            priceMarkdownNominal: $payload['price_markdown_nominal'],
+            roundingType: $payload['rounding_type'],
+            roundingDigit: $payload['rounding_digit'],
+            maxOpenInvoice: $payload['max_open_invoice'],
+            maxInvoiceAge: $payload['max_invoice_age'],
+            maxOutstandingInvoice: $payload['max_outstanding_invoice'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->customerGroupActions->update($customerGroup, $dto);
+        $this->assertInstanceOf(CustomerGroup::class, $result);
+        $this->assertDatabaseHas('customer_groups', [
+            'id' => $customerGroup->id,
+            'company_id' => $customerGroup->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_customer_group_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerGroup::factory())
+            )->create();
+
+        $customerGroup = $user->companies()->inRandomOrder()->first()
+            ->customerGroups()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\CustomerGroupUpdateDTO();
+
+        $this->customerGroupActions->update($customerGroup, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsReadTest.php b/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsReadTest.php
new file mode 100644
index 000000000..7399e9ff1
--- /dev/null
+++ b/api/tests/Unit/Actions/CustomerGroupActions/CustomerGroupActionsReadTest.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Tests\Unit\Actions\CustomerGroupActions;
+
+use App\Actions\CustomerGroup\CustomerGroupActions;
+use App\Models\Company;
+use App\Models\CustomerGroup;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class CustomerGroupActionsReadTest extends ActionsTestCase
+{
+    private CustomerGroupActions $customerGroupActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->customerGroupActions = new CustomerGroupActions();
+    }
+
+    public function test_customer_group_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerGroup::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerGroupActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_customer_group_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerGroup::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerGroupActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_customer_group_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->customerGroupActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_customer_group_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $customerGroupCount = 4;
+        $idxTest = random_int(0, $customerGroupCount - 1);
+        $defaultName = CustomerGroup::factory()->make()->name;
+        $testname = CustomerGroup::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerGroup::factory()->count($customerGroupCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->customerGroupActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_customer_group_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_customer_group_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_customer_group_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(CustomerGroup::factory())
+            )->create();
+
+        $customerGroup = $user->companies()->inRandomOrder()->first()
+            ->customerGroups()->inRandomOrder()->first();
+
+        $result = $this->customerGroupActions->read($customerGroup);
+
+        $this->assertInstanceOf(CustomerGroup::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsCreateTest.php b/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsCreateTest.php
new file mode 100644
index 000000000..204c7d228
--- /dev/null
+++ b/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsCreateTest.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace Tests\Unit\Actions\EmployeeActions;
+
+use App\Actions\Employee\EmployeeActions;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class EmployeeActionsCreateTest extends ActionsTestCase
+{
+    private EmployeeActions $employeeActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->employeeActions = new EmployeeActions();
+    }
+
+    public function test_employee_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Employee::factory()->for($company)
+            ->make()->toArray();
+
+        $dto = new \App\DTOs\EmployeeCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->employeeActions->create($dto);
+        $this->assertDatabaseHas('employees', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_employee_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\EmployeeCreateDTO();
+
+        $this->employeeActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsDeleteTest.php b/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsDeleteTest.php
new file mode 100644
index 000000000..86e5d6842
--- /dev/null
+++ b/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\EmployeeActions;
+
+use App\Actions\Employee\EmployeeActions;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class EmployeeActionsDeleteTest extends ActionsTestCase
+{
+    private EmployeeActions $employeeActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->employeeActions = new EmployeeActions();
+    }
+
+    public function test_employee_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Employee::factory())
+            )->create();
+
+        $employee = $user->companies()->inRandomOrder()->first()
+            ->employees()->inRandomOrder()->first();
+        $result = $this->employeeActions->delete($employee);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('employees', [
+            'id' => $employee->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsEditTest.php b/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsEditTest.php
new file mode 100644
index 000000000..531df8d88
--- /dev/null
+++ b/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsEditTest.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace Tests\Unit\Actions\EmployeeActions;
+
+use App\Actions\Employee\EmployeeActions;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class EmployeeActionsEditTest extends ActionsTestCase
+{
+    private EmployeeActions $employeeActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->employeeActions = new EmployeeActions();
+    }
+
+    public function test_employee_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Employee::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $employee = $company->employees()->inRandomOrder()->first();
+
+        $payload = Employee::factory()->make()->toArray();
+
+        $dto = new \App\DTOs\EmployeeUpdateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->employeeActions->update($employee, $dto);
+        $this->assertInstanceOf(Employee::class, $result);
+        $this->assertDatabaseHas('employees', [
+            'id' => $employee->id,
+            'company_id' => $employee->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_employee_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Employee::factory())
+            )->create();
+
+        $employee = $user->companies()->inRandomOrder()->first()
+            ->employees()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\EmployeeUpdateDTO();
+
+        $this->employeeActions->update($employee, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsReadTest.php b/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsReadTest.php
new file mode 100644
index 000000000..e35335e13
--- /dev/null
+++ b/api/tests/Unit/Actions/EmployeeActions/EmployeeActionsReadTest.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Tests\Unit\Actions\EmployeeActions;
+
+use App\Actions\Employee\EmployeeActions;
+use App\Models\Company;
+use App\Models\Employee;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class EmployeeActionsReadTest extends ActionsTestCase
+{
+    private EmployeeActions $employeeActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->employeeActions = new EmployeeActions();
+    }
+
+    public function test_employee_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Employee::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->employeeActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_employee_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Employee::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->employeeActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_employee_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->employeeActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_employee_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $employeeCount = 4;
+        $idxTest = random_int(0, $employeeCount - 1);
+        $defaultName = Employee::factory()->make()->name;
+        $testname = Employee::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Employee::factory()->count($employeeCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->employeeActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_employee_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_employee_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_employee_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Employee::factory())
+            )->create();
+
+        $employee = $user->companies()->inRandomOrder()->first()
+            ->employees()->inRandomOrder()->first();
+
+        $result = $this->employeeActions->read($employee);
+
+        $this->assertInstanceOf(Employee::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/InvestorActions/InvestorActionsCreateTest.php b/api/tests/Unit/Actions/InvestorActions/InvestorActionsCreateTest.php
new file mode 100644
index 000000000..5ea6dc8c3
--- /dev/null
+++ b/api/tests/Unit/Actions/InvestorActions/InvestorActionsCreateTest.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace Tests\Unit\Actions\InvestorActions;
+
+use App\Actions\Investor\InvestorActions;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class InvestorActionsCreateTest extends ActionsTestCase
+{
+    private InvestorActions $investorActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->investorActions = new InvestorActions();
+    }
+
+    public function test_investor_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Investor::factory()->for($company)
+            ->make()->toArray();
+
+        $dto = new \App\DTOs\InvestorCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->investorActions->create($dto);
+        $this->assertDatabaseHas('investors', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_investor_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\InvestorCreateDTO();
+
+        $this->investorActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/InvestorActions/InvestorActionsDeleteTest.php b/api/tests/Unit/Actions/InvestorActions/InvestorActionsDeleteTest.php
new file mode 100644
index 000000000..274cbda1a
--- /dev/null
+++ b/api/tests/Unit/Actions/InvestorActions/InvestorActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\InvestorActions;
+
+use App\Actions\Investor\InvestorActions;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class InvestorActionsDeleteTest extends ActionsTestCase
+{
+    private InvestorActions $investorActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->investorActions = new InvestorActions();
+    }
+
+    public function test_investor_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Investor::factory())
+            )->create();
+
+        $investor = $user->companies()->inRandomOrder()->first()
+            ->investors()->inRandomOrder()->first();
+        $result = $this->investorActions->delete($investor);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('investors', [
+            'id' => $investor->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/InvestorActions/InvestorActionsEditTest.php b/api/tests/Unit/Actions/InvestorActions/InvestorActionsEditTest.php
new file mode 100644
index 000000000..5519364f5
--- /dev/null
+++ b/api/tests/Unit/Actions/InvestorActions/InvestorActionsEditTest.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace Tests\Unit\Actions\InvestorActions;
+
+use App\Actions\Investor\InvestorActions;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class InvestorActionsEditTest extends ActionsTestCase
+{
+    private InvestorActions $investorActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->investorActions = new InvestorActions();
+    }
+
+    public function test_investor_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Investor::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $investor = $company->investors()->inRandomOrder()->first();
+
+        $payload = Investor::factory()->make()->toArray();
+
+        $dto = new \App\DTOs\InvestorUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            remarks: $payload['remarks']
+        );
+
+        $result = $this->investorActions->update($investor, $dto);
+        $this->assertInstanceOf(Investor::class, $result);
+        $this->assertDatabaseHas('investors', [
+            'id' => $investor->id,
+            'company_id' => $investor->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_investor_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Investor::factory())
+            )->create();
+
+        $investor = $user->companies()->inRandomOrder()->first()
+            ->investors()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\InvestorUpdateDTO();
+
+        $this->investorActions->update($investor, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/InvestorActions/InvestorActionsReadTest.php b/api/tests/Unit/Actions/InvestorActions/InvestorActionsReadTest.php
new file mode 100644
index 000000000..be8464a2e
--- /dev/null
+++ b/api/tests/Unit/Actions/InvestorActions/InvestorActionsReadTest.php
@@ -0,0 +1,167 @@
+<?php
+
+namespace Tests\Unit\Actions\InvestorActions;
+
+use App\Actions\Investor\InvestorActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Models\Company;
+use App\Models\Investor;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class InvestorActionsReadTest extends ActionsTestCase
+{
+    private InvestorActions $investorActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->investorActions = new InvestorActions();
+    }
+
+    public function test_investor_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Investor::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->investorActions->readAny(
+            withTrashed: false,
+            search: '',
+            companyId: $company->id,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10,
+                ),
+                get: null,
+            )
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_investor_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Investor::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->investorActions->readAny(
+            withTrashed: false,
+            search: '',
+            companyId: $company->id,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: new ExecuteGetDTO(
+                    limit: 10,
+                ),
+            )
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_investor_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->investorActions->readAny(
+            withTrashed: false,
+            search: '',
+            companyId: $maxId,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: new ExecuteGetDTO(
+                    limit: 10,
+                ),
+            )
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_investor_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $investorCount = 4;
+        $idxTest = random_int(0, $investorCount - 1);
+        $defaultName = Investor::factory()->make()->name;
+        $testname = Investor::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Investor::factory()->count($investorCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->investorActions->readAny(
+            withTrashed: false,
+            search: 'testing',
+            companyId: $company->id,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10,
+                ),
+                get: null,
+            )
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_investor_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_investor_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_investor_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Investor::factory())
+            )->create();
+
+        $investor = $user->companies()->inRandomOrder()->first()
+            ->investors()->inRandomOrder()->first();
+
+        $result = $this->investorActions->read($investor);
+
+        $this->assertInstanceOf(Investor::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/ProductActions/ProductActionsCreateTest.php b/api/tests/Unit/Actions/ProductActions/ProductActionsCreateTest.php
new file mode 100644
index 000000000..3163f41f4
--- /dev/null
+++ b/api/tests/Unit/Actions/ProductActions/ProductActionsCreateTest.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace Tests\Unit\Actions\ProductActions;
+
+use App\Actions\Product\ProductActions;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class ProductActionsCreateTest extends ActionsTestCase
+{
+    private ProductActions $productActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->productActions = new ProductActions();
+    }
+
+    public function test_product_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productCategory = $company->productCategories()->inRandomOrder()->first();
+        $brand = $company->brands()->inRandomOrder()->first();
+
+        $payload = Product::factory()
+            ->for($company)
+            ->for($productCategory, 'category')
+            ->for($brand)
+            ->make()->toArray();
+
+        $productUnit = \App\Models\ProductUnit::factory()->make([
+            'company_id' => $company->id,
+            'unit_id' => \App\Models\Unit::factory()->create(['company_id' => $company->id])->id,
+            'point' => 50,
+        ])->toArray();
+        $payload['product_units'] = [$productUnit];
+
+        $result = $this->productActions->create($payload);
+
+        $this->assertDatabaseHas('products', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'category_id' => $payload['category_id'],
+            'brand_id' => $payload['brand_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'type' => $payload['type'],
+            'is_price_include_vat' => $payload['is_price_include_vat'],
+            'is_use_serial_number' => $payload['is_use_serial_number'],
+            'is_expirable' => $payload['is_expirable'],
+            'status' => $payload['status'],
+            'remarks' => $payload['remarks'],
+        ]);
+
+        $this->assertDatabaseHas('product_units', [
+            'product_id' => $result->id,
+            'point' => 50,
+        ]);
+    }
+
+    public function test_product_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $this->productActions->create([]);
+    }
+}
diff --git a/api/tests/Unit/Actions/ProductActions/ProductActionsDeleteTest.php b/api/tests/Unit/Actions/ProductActions/ProductActionsDeleteTest.php
new file mode 100644
index 000000000..e3100c741
--- /dev/null
+++ b/api/tests/Unit/Actions/ProductActions/ProductActionsDeleteTest.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace Tests\Unit\Actions\ProductActions;
+
+use App\Actions\Product\ProductActions;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class ProductActionsDeleteTest extends ActionsTestCase
+{
+    private ProductActions $productActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->productActions = new ProductActions();
+    }
+
+    public function test_product_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productCategory = $company->productCategories()->inRandomOrder()->first();
+
+        $brand = $company->brands()->inRandomOrder()->first();
+
+        $product = Product::factory()
+            ->for($company)
+            ->for($productCategory)
+            ->for($brand);
+
+        $product = $product->create();
+        $result = $this->productActions->delete($product);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('products', [
+            'id' => $product->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/ProductActions/ProductActionsEditTest.php b/api/tests/Unit/Actions/ProductActions/ProductActionsEditTest.php
new file mode 100644
index 000000000..399cb8079
--- /dev/null
+++ b/api/tests/Unit/Actions/ProductActions/ProductActionsEditTest.php
@@ -0,0 +1,103 @@
+<?php
+
+namespace Tests\Unit\Actions\ProductActions;
+
+use App\Actions\Product\ProductActions;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class ProductActionsEditTest extends ActionsTestCase
+{
+    private ProductActions $productActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->productActions = new ProductActions();
+    }
+
+    public function test_product_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productCategory = $company->productCategories()->inRandomOrder()->first();
+
+        $brand = $company->brands()->inRandomOrder()->first();
+
+        $product = Product::factory()
+            ->for($company)
+            ->for($productCategory, 'category')
+            ->for($brand);
+
+        $product = $product->create();
+
+        $productUnit = \App\Models\ProductUnit::factory()->for($product)->create(['point' => 10]);
+
+        $payload = $product->toArray();
+        $payload['product_units'] = [
+            [
+                'id' => $productUnit->id,
+                'code' => $productUnit->code,
+                'unit_id' => $productUnit->unit_id,
+                'is_manufacturer_sku' => $productUnit->is_manufacturer_sku,
+                'is_base' => $productUnit->is_base,
+                'conversion_value' => $productUnit->conversion_value,
+                'is_primary_unit' => $productUnit->is_primary_unit,
+                'point' => 100,
+                'remarks' => $productUnit->remarks,
+            ],
+        ];
+
+        $result = $this->productActions->update($product, $payload);
+
+        $this->assertInstanceOf(Product::class, $result);
+        $this->assertDatabaseHas('products', [
+            'id' => $product->id,
+            'category_id' => $payload['category_id'],
+            'brand_id' => $payload['brand_id'],
+            'company_id' => $product->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'type' => $payload['type'],
+            'is_price_include_vat' => $payload['is_price_include_vat'],
+            'is_use_serial_number' => $payload['is_use_serial_number'],
+            'is_expirable' => $payload['is_expirable'],
+            'status' => $payload['status'],
+            'remarks' => $payload['remarks'],
+        ]);
+
+        $this->assertDatabaseHas('product_units', [
+            'id' => $productUnit->id,
+            'point' => 100,
+        ]);
+    }
+
+    public function test_product_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Product::factory())
+            )->create();
+
+        $product = $user->companies()->inRandomOrder()->first()
+            ->products()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $this->productActions->update($product, $payload);
+    }
+}
diff --git a/api/tests/Unit/Actions/ProductActions/ProductActionsReadTest.php b/api/tests/Unit/Actions/ProductActions/ProductActionsReadTest.php
new file mode 100644
index 000000000..d4964a2b3
--- /dev/null
+++ b/api/tests/Unit/Actions/ProductActions/ProductActionsReadTest.php
@@ -0,0 +1,205 @@
+<?php
+
+namespace Tests\Unit\Actions\ProductActions;
+
+use App\Actions\Product\ProductActions;
+use App\Models\Brand;
+use App\Models\Company;
+use App\Models\Product;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class ProductActionsReadTest extends ActionsTestCase
+{
+    private ProductActions $productActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->productActions = new ProductActions();
+    }
+
+    public function test_product_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productSeedCount = random_int(1, 5);
+        for ($i = 0; $i < $productSeedCount; $i++) {
+            $productCategory = $company->productCategories()->inRandomOrder()->first();
+
+            $brand = $company->brands()->inRandomOrder()->first();
+
+            $product = Product::factory()
+                ->for($company)
+                ->for($productCategory)
+                ->for($brand);
+
+            $product->create();
+        }
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->productActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_product_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productSeedCount = random_int(1, 5);
+        for ($i = 0; $i < $productSeedCount; $i++) {
+            $productCategory = $company->productCategories()->inRandomOrder()->first();
+
+            $brand = $company->brands()->inRandomOrder()->first();
+
+            $product = Product::factory()
+                ->for($company)
+                ->for($productCategory)
+                ->for($brand);
+
+            $product->create();
+        }
+
+        $result = $this->productActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_product_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->productActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_product_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $productCount = 4;
+        $idxTest = random_int(0, $productCount - 1);
+        $defaultName = Product::factory()->make()->name;
+        $testname = Product::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3))
+                ->has(Product::factory()->count($productCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->productActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_product_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_product_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_product_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count(3))
+                ->has(Brand::factory()->count(3)))
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $productCategory = $company->productCategories()->inRandomOrder()->first();
+
+        $brand = $company->brands()->inRandomOrder()->first();
+
+        $product = Product::factory()
+            ->for($company)
+            ->for($productCategory)
+            ->for($brand);
+
+        $product = $product->create();
+
+        $result = $this->productActions->read($product);
+
+        $this->assertInstanceOf(Product::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsCreateTest.php b/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsCreateTest.php
new file mode 100644
index 000000000..a1e75b771
--- /dev/null
+++ b/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsCreateTest.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace Tests\Unit\Actions\ProductCategoryActions;
+
+use App\Actions\ProductCategory\ProductCategoryActions;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class ProductCategoryActionsCreateTest extends ActionsTestCase
+{
+    private ProductCategoryActions $productCategoryActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->productCategoryActions = new ProductCategoryActions();
+    }
+
+    public function test_product_category_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = ProductCategory::factory()->for($company)
+            ->make()->toArray();
+
+        $dto = new \App\DTOs\ProductCategoryCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            type: $payload['type']
+        );
+
+        $result = $this->productCategoryActions->create($dto);
+        $this->assertDatabaseHas('product_categories', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_product_category_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\ProductCategoryCreateDTO();
+
+        $this->productCategoryActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsDeleteTest.php b/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsDeleteTest.php
new file mode 100644
index 000000000..e4b1d2c6b
--- /dev/null
+++ b/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\ProductCategoryActions;
+
+use App\Actions\ProductCategory\ProductCategoryActions;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class ProductCategoryActionsDeleteTest extends ActionsTestCase
+{
+    private ProductCategoryActions $productCategoryActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->productCategoryActions = new ProductCategoryActions();
+    }
+
+    public function test_product_category_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory())
+            )->create();
+
+        $productCategory = $user->companies()->inRandomOrder()->first()
+            ->productCategories()->inRandomOrder()->first();
+        $result = $this->productCategoryActions->delete($productCategory);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('product_categories', [
+            'id' => $productCategory->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsEditTest.php b/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsEditTest.php
new file mode 100644
index 000000000..6f56d26c0
--- /dev/null
+++ b/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsEditTest.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace Tests\Unit\Actions\ProductCategoryActions;
+
+use App\Actions\ProductCategory\ProductCategoryActions;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class ProductCategoryActionsEditTest extends ActionsTestCase
+{
+    private ProductCategoryActions $productCategoryActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->productCategoryActions = new ProductCategoryActions();
+    }
+
+    public function test_product_category_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $productCategory = $company->productCategories()->inRandomOrder()->first();
+
+        $payload = ProductCategory::factory()->make()->toArray();
+
+        $dto = new \App\DTOs\ProductCategoryUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            type: $payload['type']
+        );
+
+        $result = $this->productCategoryActions->update($productCategory, $dto);
+        $this->assertInstanceOf(ProductCategory::class, $result);
+        $this->assertDatabaseHas('product_categories', [
+            'id' => $productCategory->id,
+            'company_id' => $productCategory->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_product_category_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory())
+            )->create();
+
+        $productCategory = $user->companies()->inRandomOrder()->first()
+            ->productCategories()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\ProductCategoryUpdateDTO();
+
+        $this->productCategoryActions->update($productCategory, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsReadTest.php b/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsReadTest.php
new file mode 100644
index 000000000..c9da75802
--- /dev/null
+++ b/api/tests/Unit/Actions/ProductCategoryActions/ProductCategoryActionsReadTest.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Tests\Unit\Actions\ProductCategoryActions;
+
+use App\Actions\ProductCategory\ProductCategoryActions;
+use App\Models\Company;
+use App\Models\ProductCategory;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class ProductCategoryActionsReadTest extends ActionsTestCase
+{
+    private ProductCategoryActions $productCategoryActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->productCategoryActions = new ProductCategoryActions();
+    }
+
+    public function test_product_category_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->productCategoryActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_product_category_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->productCategoryActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_product_category_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->productCategoryActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_product_category_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $productCategoryCount = 4;
+        $idxTest = random_int(0, $productCategoryCount - 1);
+        $defaultName = ProductCategory::factory()->make()->name;
+        $testname = ProductCategory::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory()->count($productCategoryCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->productCategoryActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_product_category_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_product_category_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_product_category_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(ProductCategory::factory())
+            )->create();
+
+        $productCategory = $user->companies()->inRandomOrder()->first()
+            ->productCategories()->inRandomOrder()->first();
+
+        $result = $this->productCategoryActions->read($productCategory);
+
+        $this->assertInstanceOf(ProductCategory::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsCreateTest.php b/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsCreateTest.php
new file mode 100644
index 000000000..28d03ba12
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsCreateTest.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferActions;
+
+use App\Actions\StockTransfer\StockTransferActions;
+use App\Models\Company;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class StockTransferActionsCreateTest extends ActionsTestCase
+{
+    private StockTransferActions $stockTransferActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferActions = new StockTransferActions();
+    }
+
+    public function test_stock_transfer_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockTransfer::factory()->for($company)
+            ->make()->toArray();
+
+        $result = $this->stockTransferActions->create($payload);
+
+        $this->assertDatabaseHas('stock_transfers', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $this->stockTransferActions->create([]);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsDeleteTest.php b/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsDeleteTest.php
new file mode 100644
index 000000000..30a1a58bd
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferActions;
+
+use App\Actions\StockTransfer\StockTransferActions;
+use App\Models\Company;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class StockTransferActionsDeleteTest extends ActionsTestCase
+{
+    private StockTransferActions $stockTransferActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferActions = new StockTransferActions();
+    }
+
+    public function test_stock_transfer_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransfer::factory())
+            )->create();
+
+        $stockTransfer = $user->companies()->inRandomOrder()->first()
+            ->stockTransfers()->inRandomOrder()->first();
+        $result = $this->stockTransferActions->delete($stockTransfer);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('stock_transfers', [
+            'id' => $stockTransfer->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsEditTest.php b/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsEditTest.php
new file mode 100644
index 000000000..891b6e412
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsEditTest.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferActions;
+
+use App\Actions\StockTransfer\StockTransferActions;
+use App\Models\Company;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class StockTransferActionsEditTest extends ActionsTestCase
+{
+    private StockTransferActions $stockTransferActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferActions = new StockTransferActions();
+    }
+
+    public function test_stock_transfer_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransfer::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransfer = $company->stockTransfers()->inRandomOrder()->first();
+
+        $payload = StockTransfer::factory()->make()->toArray();
+
+        $result = $this->stockTransferActions->update($stockTransfer, $payload);
+
+        $this->assertInstanceOf(StockTransfer::class, $result);
+        $this->assertDatabaseHas('stock_transfers', [
+            'id' => $stockTransfer->id,
+            'company_id' => $stockTransfer->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransfer::factory())
+            )->create();
+
+        $stockTransfer = $user->companies()->inRandomOrder()->first()
+            ->stockTransfers()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $this->stockTransferActions->update($stockTransfer, $payload);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsReadTest.php b/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsReadTest.php
new file mode 100644
index 000000000..4c339e29e
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferActions/StockTransferActionsReadTest.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferActions;
+
+use App\Actions\StockTransfer\StockTransferActions;
+use App\Models\Company;
+use App\Models\StockTransfer;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class StockTransferActionsReadTest extends ActionsTestCase
+{
+    private StockTransferActions $stockTransferActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferActions = new StockTransferActions();
+    }
+
+    public function test_stock_transfer_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransfer::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_stock_transfer_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransfer::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_stock_transfer_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->stockTransferActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_stock_transfer_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $stockTransferCount = 4;
+        $idxTest = random_int(0, $stockTransferCount - 1);
+        $defaultName = StockTransfer::factory()->make()->name;
+        $testname = StockTransfer::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransfer::factory()->count($stockTransferCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_stock_transfer_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_stock_transfer_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_stock_transfer_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransfer::factory())
+            )->create();
+
+        $stockTransfer = $user->companies()->inRandomOrder()->first()
+            ->stockTransfers()->inRandomOrder()->first();
+
+        $result = $this->stockTransferActions->read($stockTransfer);
+
+        $this->assertInstanceOf(StockTransfer::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsCreateTest.php b/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsCreateTest.php
new file mode 100644
index 000000000..4cf94ab91
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsCreateTest.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferItemActions;
+
+use App\Actions\StockTransferItem\StockTransferItemActions;
+use App\Models\Company;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class StockTransferItemActionsCreateTest extends ActionsTestCase
+{
+    private StockTransferItemActions $stockTransferItemActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferItemActions = new StockTransferItemActions();
+    }
+
+    public function test_stock_transfer_item_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockTransferItem::factory()->for($company)
+            ->make()->toArray();
+
+        $result = $this->stockTransferItemActions->create($payload);
+
+        $this->assertDatabaseHas('stock_transfer_items', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $this->stockTransferItemActions->create([]);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsDeleteTest.php b/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsDeleteTest.php
new file mode 100644
index 000000000..3e2515518
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferItemActions;
+
+use App\Actions\StockTransferItem\StockTransferItemActions;
+use App\Models\Company;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class StockTransferItemActionsDeleteTest extends ActionsTestCase
+{
+    private StockTransferItemActions $stockTransferItemActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferItemActions = new StockTransferItemActions();
+    }
+
+    public function test_stock_transfer_item_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItem::factory())
+            )->create();
+
+        $stockTransferItem = $user->companies()->inRandomOrder()->first()
+            ->stockTransferItems()->inRandomOrder()->first();
+        $result = $this->stockTransferItemActions->delete($stockTransferItem);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('stock_transfer_items', [
+            'id' => $stockTransferItem->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsEditTest.php b/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsEditTest.php
new file mode 100644
index 000000000..8232fa490
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsEditTest.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferItemActions;
+
+use App\Actions\StockTransferItem\StockTransferItemActions;
+use App\Models\Company;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class StockTransferItemActionsEditTest extends ActionsTestCase
+{
+    private StockTransferItemActions $stockTransferItemActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferItemActions = new StockTransferItemActions();
+    }
+
+    public function test_stock_transfer_item_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItem::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItem = $company->stockTransferItems()->inRandomOrder()->first();
+
+        $payload = StockTransferItem::factory()->make()->toArray();
+
+        $result = $this->stockTransferItemActions->update($stockTransferItem, $payload);
+
+        $this->assertInstanceOf(StockTransferItem::class, $result);
+        $this->assertDatabaseHas('stock_transfer_items', [
+            'id' => $stockTransferItem->id,
+            'company_id' => $stockTransferItem->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItem::factory())
+            )->create();
+
+        $stockTransferItem = $user->companies()->inRandomOrder()->first()
+            ->stockTransferItems()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $this->stockTransferItemActions->update($stockTransferItem, $payload);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsReadTest.php b/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsReadTest.php
new file mode 100644
index 000000000..aedb0058d
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferItemActions/StockTransferItemActionsReadTest.php
@@ -0,0 +1,197 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferItemActions;
+
+use App\Actions\StockTransferItem\StockTransferItemActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecuteGetDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Models\Company;
+use App\Models\StockTransferItem;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class StockTransferItemActionsReadTest extends ActionsTestCase
+{
+    private StockTransferItemActions $stockTransferItemActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferItemActions = app(StockTransferItemActions::class);
+    }
+
+    public function test_stock_transfer_item_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItem::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferItemActions->readAny(
+            withTrashed: false,
+            companyId: $company->id,
+            branchId: null,
+            search: '',
+
+            stockTransferCode: null,
+            stockTransferStartDate: null,
+            stockTransferEndDate: null,
+            stockTransferSourceWarehouseId: null,
+            stockTransferDestinationWarehouseId: null,
+            productUnitCode: null,
+            productUnitProductName: null,
+            productUnitProductCategoryId: null,
+            productUnitProductBrandId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(page: 1, perPage: 10),
+                get: null,
+            )
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_stock_transfer_item_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItem::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferItemActions->readAny(
+            withTrashed: false,
+            companyId: $company->id,
+            branchId: null,
+            search: '',
+
+            stockTransferCode: null,
+            stockTransferStartDate: null,
+            stockTransferEndDate: null,
+            stockTransferSourceWarehouseId: null,
+            stockTransferDestinationWarehouseId: null,
+            productUnitCode: null,
+            productUnitProductName: null,
+            productUnitProductCategoryId: null,
+            productUnitProductBrandId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: new ExecuteGetDTO(limit: 10),
+            )
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_stock_transfer_item_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->stockTransferItemActions->readAny(
+            withTrashed: false,
+            companyId: $maxId,
+            branchId: null,
+            search: '',
+
+            stockTransferCode: null,
+            stockTransferStartDate: null,
+            stockTransferEndDate: null,
+            stockTransferSourceWarehouseId: null,
+            stockTransferDestinationWarehouseId: null,
+            productUnitCode: null,
+            productUnitProductName: null,
+            productUnitProductCategoryId: null,
+            productUnitProductBrandId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: new ExecuteGetDTO(limit: 10),
+            )
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_stock_transfer_item_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $stockTransferItemCount = 4;
+        $idxTest = random_int(0, $stockTransferItemCount - 1);
+        $defaultRemarks = 'default remarks';
+        $testRemarks = 'testing remarks';
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItem::factory()->count($stockTransferItemCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'remarks' => $sequence->index == $idxTest ? $testRemarks : $defaultRemarks,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferItemActions->readAny(
+            withTrashed: false,
+            companyId: $company->id,
+            branchId: null,
+            search: 'testing',
+
+            stockTransferCode: null,
+            stockTransferStartDate: null,
+            stockTransferEndDate: null,
+            stockTransferSourceWarehouseId: null,
+            stockTransferDestinationWarehouseId: null,
+            productUnitCode: null,
+            productUnitProductName: null,
+            productUnitProductCategoryId: null,
+            productUnitProductBrandId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(page: 1, perPage: 10),
+                get: null,
+            )
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_stock_transfer_item_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_stock_transfer_item_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_stock_transfer_item_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItem::factory())
+            )->create();
+
+        $stockTransferItem = $user->companies()->inRandomOrder()->first()
+            ->stockTransferItems()->inRandomOrder()->first();
+
+        $result = $this->stockTransferItemActions->read($stockTransferItem);
+
+        $this->assertInstanceOf(StockTransferItem::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsCreateTest.php b/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsCreateTest.php
new file mode 100644
index 000000000..4276ae75a
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsCreateTest.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferItemSerialActions;
+
+use App\Actions\StockTransferItemSerial\StockTransferItemSerialActions;
+use App\Models\Company;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class StockTransferItemSerialActionsCreateTest extends ActionsTestCase
+{
+    private StockTransferItemSerialActions $stockTransferItemSerialActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferItemSerialActions = new StockTransferItemSerialActions();
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = StockTransferItemSerial::factory()->for($company)
+            ->make()->toArray();
+
+        $result = $this->stockTransferItemSerialActions->create($payload);
+
+        $this->assertDatabaseHas('stock_transfer_item_serials', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $this->stockTransferItemSerialActions->create([]);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsDeleteTest.php b/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsDeleteTest.php
new file mode 100644
index 000000000..d210c6341
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferItemSerialActions;
+
+use App\Actions\StockTransferItemSerial\StockTransferItemSerialActions;
+use App\Models\Company;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class StockTransferItemSerialActionsDeleteTest extends ActionsTestCase
+{
+    private StockTransferItemSerialActions $stockTransferItemSerialActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferItemSerialActions = new StockTransferItemSerialActions();
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItemSerial::factory())
+            )->create();
+
+        $stockTransferItemSerial = $user->companies()->inRandomOrder()->first()
+            ->stockTransferItemSerials()->inRandomOrder()->first();
+        $result = $this->stockTransferItemSerialActions->delete($stockTransferItemSerial);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('stock_transfer_item_serials', [
+            'id' => $stockTransferItemSerial->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsEditTest.php b/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsEditTest.php
new file mode 100644
index 000000000..51ecbf60b
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsEditTest.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferItemSerialActions;
+
+use App\Actions\StockTransferItemSerial\StockTransferItemSerialActions;
+use App\Models\Company;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class StockTransferItemSerialActionsEditTest extends ActionsTestCase
+{
+    private StockTransferItemSerialActions $stockTransferItemSerialActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferItemSerialActions = new StockTransferItemSerialActions();
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItemSerial::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $stockTransferItemSerial = $company->stockTransferItemSerials()->inRandomOrder()->first();
+
+        $payload = StockTransferItemSerial::factory()->make()->toArray();
+
+        $result = $this->stockTransferItemSerialActions->update($stockTransferItemSerial, $payload);
+
+        $this->assertInstanceOf(StockTransferItemSerial::class, $result);
+        $this->assertDatabaseHas('stock_transfer_item_serials', [
+            'id' => $stockTransferItemSerial->id,
+            'company_id' => $stockTransferItemSerial->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItemSerial::factory())
+            )->create();
+
+        $stockTransferItemSerial = $user->companies()->inRandomOrder()->first()
+            ->stockTransferItemSerials()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $this->stockTransferItemSerialActions->update($stockTransferItemSerial, $payload);
+    }
+}
diff --git a/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsReadTest.php b/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsReadTest.php
new file mode 100644
index 000000000..de7e19a70
--- /dev/null
+++ b/api/tests/Unit/Actions/StockTransferItemSerialActions/StockTransferItemSerialActionsReadTest.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Tests\Unit\Actions\StockTransferItemSerialActions;
+
+use App\Actions\StockTransferItemSerial\StockTransferItemSerialActions;
+use App\Models\Company;
+use App\Models\StockTransferItemSerial;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class StockTransferItemSerialActionsReadTest extends ActionsTestCase
+{
+    private StockTransferItemSerialActions $stockTransferItemSerialActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->stockTransferItemSerialActions = new StockTransferItemSerialActions();
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItemSerial::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferItemSerialActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItemSerial::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferItemSerialActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->stockTransferItemSerialActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $stockTransferItemSerialCount = 4;
+        $idxTest = random_int(0, $stockTransferItemSerialCount - 1);
+        $defaultName = StockTransferItemSerial::factory()->make()->name;
+        $testname = StockTransferItemSerial::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItemSerial::factory()->count($stockTransferItemSerialCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->stockTransferItemSerialActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_stock_transfer_item_serial_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(StockTransferItemSerial::factory())
+            )->create();
+
+        $stockTransferItemSerial = $user->companies()->inRandomOrder()->first()
+            ->stockTransferItemSerials()->inRandomOrder()->first();
+
+        $result = $this->stockTransferItemSerialActions->read($stockTransferItemSerial);
+
+        $this->assertInstanceOf(StockTransferItemSerial::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/SupplierActions/SupplierActionsCreateTest.php b/api/tests/Unit/Actions/SupplierActions/SupplierActionsCreateTest.php
new file mode 100644
index 000000000..b9d022190
--- /dev/null
+++ b/api/tests/Unit/Actions/SupplierActions/SupplierActionsCreateTest.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace Tests\Unit\Actions\SupplierActions;
+
+use App\Actions\Supplier\SupplierActions;
+use App\Models\Company;
+use App\Models\Supplier;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class SupplierActionsCreateTest extends ActionsTestCase
+{
+    private SupplierActions $supplierActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->supplierActions = new SupplierActions();
+    }
+
+    public function test_supplier_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Supplier::factory()->for($company)->for($user)
+            ->make()->toArray();
+
+        $dto = new \App\DTOs\SupplierCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            city: $payload['city'],
+            paymentTermType: $payload['payment_term_type'],
+            paymentTerm: $payload['payment_term'],
+            taxableEnterprise: $payload['taxable_enterprise'],
+            taxId: $payload['tax_id'],
+            remarks: $payload['remarks'],
+            status: $payload['status']
+        );
+
+        $result = $this->supplierActions->create($dto);
+        $this->assertDatabaseHas('suppliers', [
+            'id' => $result->id,
+            'user_id' => $payload['user_id'],
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'address' => $payload['address'],
+            'city' => $payload['city'],
+            'payment_term_type' => $payload['payment_term_type'],
+            'payment_term' => $payload['payment_term'],
+            'taxable_enterprise' => $payload['taxable_enterprise'],
+            'tax_id' => $payload['tax_id'],
+            'status' => $payload['status'],
+            'remarks' => $payload['remarks'],
+        ]);
+    }
+
+    public function test_supplier_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\SupplierCreateDTO();
+
+        $this->supplierActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/SupplierActions/SupplierActionsDeleteTest.php b/api/tests/Unit/Actions/SupplierActions/SupplierActionsDeleteTest.php
new file mode 100644
index 000000000..351c8a3aa
--- /dev/null
+++ b/api/tests/Unit/Actions/SupplierActions/SupplierActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\SupplierActions;
+
+use App\Actions\Supplier\SupplierActions;
+use App\Models\Company;
+use App\Models\Supplier;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class SupplierActionsDeleteTest extends ActionsTestCase
+{
+    private SupplierActions $supplierActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->supplierActions = new SupplierActions();
+    }
+
+    public function test_supplier_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Supplier::factory())
+            )->create();
+
+        $supplier = $user->companies()->inRandomOrder()->first()
+            ->suppliers()->inRandomOrder()->first();
+        $result = $this->supplierActions->delete($supplier);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('suppliers', [
+            'id' => $supplier->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/SupplierActions/SupplierActionsEditTest.php b/api/tests/Unit/Actions/SupplierActions/SupplierActionsEditTest.php
new file mode 100644
index 000000000..e01e9e954
--- /dev/null
+++ b/api/tests/Unit/Actions/SupplierActions/SupplierActionsEditTest.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace Tests\Unit\Actions\SupplierActions;
+
+use App\Actions\Supplier\SupplierActions;
+use App\Models\Company;
+use App\Models\Supplier;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class SupplierActionsEditTest extends ActionsTestCase
+{
+    private SupplierActions $supplierActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->supplierActions = new SupplierActions();
+    }
+
+    public function test_supplier_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Supplier::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $supplier = $company->suppliers()->inRandomOrder()->first();
+
+        $payload = Supplier::factory()->make()->toArray();
+
+        $dto = new \App\DTOs\SupplierUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            city: $payload['city'],
+            paymentTermType: $payload['payment_term_type'],
+            paymentTerm: $payload['payment_term'],
+            taxableEnterprise: $payload['taxable_enterprise'],
+            taxId: $payload['tax_id'],
+            remarks: $payload['remarks'],
+            status: $payload['status']
+        );
+
+        $result = $this->supplierActions->update($supplier, $dto);
+        $this->assertInstanceOf(Supplier::class, $result);
+        $this->assertDatabaseHas('suppliers', [
+            'id' => $supplier->id,
+            'company_id' => $supplier->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'address' => $payload['address'],
+            'city' => $payload['city'],
+            'payment_term_type' => $payload['payment_term_type'],
+            'payment_term' => $payload['payment_term'],
+            'taxable_enterprise' => $payload['taxable_enterprise'],
+            'tax_id' => $payload['tax_id'],
+            'status' => $payload['status'],
+            'remarks' => $payload['remarks'],
+        ]);
+    }
+
+    public function test_supplier_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Supplier::factory())
+            )->create();
+
+        $supplier = $user->companies()->inRandomOrder()->first()
+            ->suppliers()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\SupplierUpdateDTO();
+
+        $this->supplierActions->update($supplier, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/SupplierActions/SupplierActionsReadTest.php b/api/tests/Unit/Actions/SupplierActions/SupplierActionsReadTest.php
new file mode 100644
index 000000000..1bd3fd3cb
--- /dev/null
+++ b/api/tests/Unit/Actions/SupplierActions/SupplierActionsReadTest.php
@@ -0,0 +1,164 @@
+<?php
+
+namespace Tests\Unit\Actions\SupplierActions;
+
+use App\Actions\Supplier\SupplierActions;
+use App\Models\Company;
+use App\Models\Supplier;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class SupplierActionsReadTest extends ActionsTestCase
+{
+    private SupplierActions $supplierActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->supplierActions = new SupplierActions();
+    }
+
+    public function test_supplier_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        Supplier::factory()->for($company)->for($user)
+            ->create();
+
+        $result = $this->supplierActions->readAny(
+            user: $user,
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_supplier_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Supplier::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->supplierActions->readAny(
+            user: $user,
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_supplier_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->supplierActions->readAny(
+            user: User::factory()->create(),
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_supplier_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $supplierCount = 4;
+        $idxTest = random_int(0, $supplierCount - 1);
+        $defaultName = Supplier::factory()->make()->name;
+        $testname = Supplier::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Supplier::factory()->count($supplierCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->supplierActions->readAny(
+            user: $user,
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_supplier_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_supplier_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_supplier_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Supplier::factory())
+            )->create();
+
+        $supplier = $user->companies()->inRandomOrder()->first()
+            ->suppliers()->inRandomOrder()->first();
+
+        $result = $this->supplierActions->read($supplier);
+
+        $this->assertInstanceOf(Supplier::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/UnitActions/UnitActionsCreateTest.php b/api/tests/Unit/Actions/UnitActions/UnitActionsCreateTest.php
new file mode 100644
index 000000000..5894985df
--- /dev/null
+++ b/api/tests/Unit/Actions/UnitActions/UnitActionsCreateTest.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace Tests\Unit\Actions\UnitActions;
+
+use App\Actions\Unit\UnitActions;
+use App\Models\Company;
+use App\Models\Unit;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class UnitActionsCreateTest extends ActionsTestCase
+{
+    private UnitActions $unitActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->unitActions = new UnitActions();
+    }
+
+    public function test_unit_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault())
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $payload = Unit::factory()->for($company)
+            ->make()->toArray();
+
+        $dto = new \App\DTOs\UnitCreateDTO(
+            companyId: $payload['company_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            description: $payload['description'],
+            type: $payload['type']
+        );
+
+        $result = $this->unitActions->create($dto);
+        $this->assertDatabaseHas('units', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'description' => $payload['description'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_unit_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+        $dto = new \App\DTOs\UnitCreateDTO();
+
+        $this->unitActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/UnitActions/UnitActionsDeleteTest.php b/api/tests/Unit/Actions/UnitActions/UnitActionsDeleteTest.php
new file mode 100644
index 000000000..c58bd1ced
--- /dev/null
+++ b/api/tests/Unit/Actions/UnitActions/UnitActionsDeleteTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Unit\Actions\UnitActions;
+
+use App\Actions\Unit\UnitActions;
+use App\Models\Company;
+use App\Models\Unit;
+use App\Models\User;
+use Tests\ActionsTestCase;
+
+class UnitActionsDeleteTest extends ActionsTestCase
+{
+    private UnitActions $unitActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->unitActions = new UnitActions();
+    }
+
+    public function test_unit_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Unit::factory())
+            )->create();
+
+        $unit = $user->companies()->inRandomOrder()->first()
+            ->units()->inRandomOrder()->first();
+        $result = $this->unitActions->delete($unit);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('units', [
+            'id' => $unit->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/UnitActions/UnitActionsEditTest.php b/api/tests/Unit/Actions/UnitActions/UnitActionsEditTest.php
new file mode 100644
index 000000000..1bbddc8d2
--- /dev/null
+++ b/api/tests/Unit/Actions/UnitActions/UnitActionsEditTest.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace Tests\Unit\Actions\UnitActions;
+
+use App\Actions\Unit\UnitActions;
+use App\Models\Company;
+use App\Models\Unit;
+use App\Models\User;
+use Exception;
+use Tests\ActionsTestCase;
+
+class UnitActionsEditTest extends ActionsTestCase
+{
+    private UnitActions $unitActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->unitActions = new UnitActions();
+    }
+
+    public function test_unit_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Unit::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+        $unit = $company->units()->inRandomOrder()->first();
+
+        $payload = Unit::factory()->make()->toArray();
+
+        $dto = new \App\DTOs\UnitUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            description: $payload['description'],
+            type: $payload['type']
+        );
+
+        $result = $this->unitActions->update($unit, $dto);
+        $this->assertInstanceOf(Unit::class, $result);
+        $this->assertDatabaseHas('units', [
+            'id' => $unit->id,
+            'company_id' => $unit->company_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+            'description' => $payload['description'],
+            'type' => $payload['type'],
+        ]);
+    }
+
+    public function test_unit_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(Exception::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Unit::factory())
+            )->create();
+
+        $unit = $user->companies()->inRandomOrder()->first()
+            ->units()->inRandomOrder()->first();
+
+        $payload = [];
+
+        $dto = new \App\DTOs\UnitUpdateDTO();
+
+        $this->unitActions->update($unit, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/UnitActions/UnitActionsReadTest.php b/api/tests/Unit/Actions/UnitActions/UnitActionsReadTest.php
new file mode 100644
index 000000000..73feafb3d
--- /dev/null
+++ b/api/tests/Unit/Actions/UnitActions/UnitActionsReadTest.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Tests\Unit\Actions\UnitActions;
+
+use App\Actions\Unit\UnitActions;
+use App\Models\Company;
+use App\Models\Unit;
+use App\Models\User;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Factories\Sequence;
+use Tests\ActionsTestCase;
+
+class UnitActionsReadTest extends ActionsTestCase
+{
+    private UnitActions $unitActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->unitActions = new UnitActions();
+    }
+
+    public function test_unit_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Unit::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->unitActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_unit_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Unit::factory())
+            )->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->unitActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_unit_actions_call_read_any_with_nonexistance_companyId_expect_empty_collection()
+    {
+        $maxId = Company::max('id') + 1;
+
+        $result = $this->unitActions->readAny(
+            companyId: $maxId,
+            useCache: true,
+            withTrashed: false,
+
+            search: '',
+
+            paginate: false,
+            page: null,
+            perPage: null,
+            limit: 10
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+        $this->assertEmpty($result);
+    }
+
+    public function test_unit_actions_call_read_any_with_search_parameter_expect_filtered_results()
+    {
+        $unitCount = 4;
+        $idxTest = random_int(0, $unitCount - 1);
+        $defaultName = Unit::factory()->make()->name;
+        $testname = Unit::factory()->insertStringInName('testing')->make()->name;
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Unit::factory()->count($unitCount)
+                    ->state(new Sequence(
+                        fn (Sequence $sequence) => [
+                            'name' => $sequence->index == $idxTest ? $testname : $defaultName,
+                        ]
+                    ))
+                )
+            )
+            ->create();
+
+        $company = $user->companies()->inRandomOrder()->first();
+
+        $result = $this->unitActions->readAny(
+            companyId: $company->id,
+            useCache: true,
+            withTrashed: false,
+
+            search: 'testing',
+
+            paginate: true,
+            page: 1,
+            perPage: 10,
+            limit: null
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+        $this->assertTrue($result->total() == 1);
+    }
+
+    public function test_unit_actions_call_read_any_with_page_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_unit_actions_call_read_any_with_perpage_parameter_negative_expect_results()
+    {
+        $this->markTestIncomplete('Need to implement test');
+    }
+
+    public function test_unit_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Unit::factory())
+            )->create();
+
+        $unit = $user->companies()->inRandomOrder()->first()
+            ->units()->inRandomOrder()->first();
+
+        $result = $this->unitActions->read($unit);
+
+        $this->assertInstanceOf(Unit::class, $result);
+    }
+}
diff --git a/api/tests/Unit/Actions/UserActions/UserActionsCreateTest.php b/api/tests/Unit/Actions/UserActions/UserActionsCreateTest.php
index e136fd763..0e6630b27 100644
--- a/api/tests/Unit/Actions/UserActions/UserActionsCreateTest.php
+++ b/api/tests/Unit/Actions/UserActions/UserActionsCreateTest.php
@@ -3,7 +3,7 @@
 namespace Tests\Unit\Actions\UserActions;
 
 use App\Actions\User\UserActions;
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Profile;
 use App\Models\Role;
 use App\Models\User;
@@ -31,7 +31,7 @@ public function test_user_actions_call_create_expect_db_has_record()
         $userArr['password'] = 'test123';
 
         $rolesArr = [];
-        array_push($rolesArr, Role::where('name', '=', UserRoles::DEVELOPER->value)->first()->id);
+        array_push($rolesArr, Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first()->id);
 
         $result = $this->userActions->create(
             $userArr,
@@ -69,5 +69,9 @@ public function test_user_actions_call_create_with_empty_array_parameters_expect
             $rolesArr,
             $profileArr
         );
+
+        $userArr = [];
+        $rolesArr = [];
+        $profileArr = [];
     }
 }
diff --git a/api/tests/Unit/Actions/UserActions/UserActionsEditTest.php b/api/tests/Unit/Actions/UserActions/UserActionsEditTest.php
index 908bac235..6eada7aee 100644
--- a/api/tests/Unit/Actions/UserActions/UserActionsEditTest.php
+++ b/api/tests/Unit/Actions/UserActions/UserActionsEditTest.php
@@ -3,7 +3,7 @@
 namespace Tests\Unit\Actions\UserActions;
 
 use App\Actions\User\UserActions;
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Profile;
 use App\Models\Role;
 use App\Models\User;
@@ -31,7 +31,7 @@ public function test_user_actions_call_update_expect_db_updated()
         $userArr['password'] = 'test123';
 
         $rolesArr = [];
-        array_push($rolesArr, Role::where('name', '=', UserRoles::DEVELOPER->value)->first()->id);
+        array_push($rolesArr, Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first()->id);
 
         $user = $this->userActions->create(
             $userArr,
@@ -47,7 +47,7 @@ public function test_user_actions_call_update_expect_db_updated()
         $newUserArr['password'] = 'test123';
 
         $newRolesArr = [];
-        array_push($newRolesArr, Role::where('name', '=', UserRoles::DEVELOPER->value)->first()->id);
+        array_push($newRolesArr, Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first()->id);
 
         $result = $this->userActions->update(
             $user,
@@ -86,7 +86,7 @@ public function test_user_actions_call_update_with_empty_array_parameters_expect
         $userArr['password'] = 'test123';
 
         $rolesArr = [];
-        array_push($rolesArr, Role::where('name', '=', UserRoles::DEVELOPER->value)->first()->id);
+        array_push($rolesArr, Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first()->id);
 
         $user = $this->userActions->create(
             $userArr,
diff --git a/api/tests/Unit/Actions/UserActions/UserActionsReadTest.php b/api/tests/Unit/Actions/UserActions/UserActionsReadTest.php
index 88034cbc0..49b98ee52 100644
--- a/api/tests/Unit/Actions/UserActions/UserActionsReadTest.php
+++ b/api/tests/Unit/Actions/UserActions/UserActionsReadTest.php
@@ -3,7 +3,7 @@
 namespace Tests\Unit\Actions\UserActions;
 
 use App\Actions\User\UserActions;
-use App\Enums\UserRoles;
+use App\Enums\UserRolesEnum;
 use App\Models\Profile;
 use App\Models\Role;
 use App\Models\User;
@@ -69,7 +69,7 @@ public function test_user_actions_call_read_any_with_search_parameter_expect_fil
                 $userArr['password'] = 'test123';
 
                 $rolesArr = [];
-                array_push($rolesArr, Role::where('name', '=', UserRoles::DEVELOPER->value)->first()->id);
+                array_push($rolesArr, Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first()->id);
 
                 $this->userActions->create(
                     $userArr,
@@ -109,7 +109,7 @@ public function test_user_actions_call_read_any_with_page_parameter_negative_exp
             $userArr['password'] = 'test123';
 
             $rolesArr = [];
-            array_push($rolesArr, Role::where('name', '=', UserRoles::DEVELOPER->value)->first()->id);
+            array_push($rolesArr, Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first()->id);
 
             $this->userActions->create(
                 $userArr,
@@ -148,7 +148,7 @@ public function test_user_actions_call_read_any_with_perpage_parameter_negative_
             $userArr['password'] = 'test123';
 
             $rolesArr = [];
-            array_push($rolesArr, Role::where('name', '=', UserRoles::DEVELOPER->value)->first()->id);
+            array_push($rolesArr, Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first()->id);
 
             $this->userActions->create(
                 $userArr,
@@ -178,7 +178,7 @@ public function test_user_actions_call_read_expect_object()
         $userArr['password'] = 'test123';
 
         $rolesArr = [];
-        array_push($rolesArr, Role::where('name', '=', UserRoles::DEVELOPER->value)->first()->id);
+        array_push($rolesArr, Role::where('name', '=', UserRolesEnum::DEVELOPER->value)->first()->id);
 
         $result = $this->userActions->create(
             $userArr,
diff --git a/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsCreateTest.php b/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsCreateTest.php
new file mode 100644
index 000000000..766d2cdb9
--- /dev/null
+++ b/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsCreateTest.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace Tests\Unit\Actions\WarehouseActions;
+
+use App\Actions\Warehouse\WarehouseActions;
+use App\DTOs\WarehouseCreateDTO;
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\User;
+use App\Models\Warehouse;
+use ArgumentCountError;
+use Tests\ActionsTestCase;
+
+class WarehouseActionsCreateTest extends ActionsTestCase
+{
+    private WarehouseActions $warehouseActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->warehouseActions = new WarehouseActions();
+    }
+
+    public function test_warehouse_actions_call_create_expect_db_has_record()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )
+            ->create();
+
+        $company = $user->companies()->first();
+        $branch = $company->branches()->first();
+        $payload = Warehouse::factory()->for($company)->for($branch)->make()->toArray();
+
+        $dto = new WarehouseCreateDTO(
+            companyId: $payload['company_id'],
+            branchId: $payload['branch_id'],
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            city: $payload['city'],
+            contact: $payload['contact'],
+            remarks: $payload['remarks'],
+            status: $payload['status'],
+        );
+
+        $result = $this->warehouseActions->create($dto);
+        $this->assertDatabaseHas('warehouses', [
+            'id' => $result->id,
+            'company_id' => $payload['company_id'],
+            'branch_id' => $payload['branch_id'],
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_warehouse_actions_call_create_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(ArgumentCountError::class);
+        $dto = new WarehouseCreateDTO(...[]);
+
+        $this->warehouseActions->create($dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsDeleteTest.php b/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsDeleteTest.php
new file mode 100644
index 000000000..277cb224b
--- /dev/null
+++ b/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsDeleteTest.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace Tests\Unit\Actions\WarehouseActions;
+
+use App\Actions\Warehouse\WarehouseActions;
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\User;
+use App\Models\Warehouse;
+use Tests\ActionsTestCase;
+
+class WarehouseActionsDeleteTest extends ActionsTestCase
+{
+    private WarehouseActions $warehouseActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->warehouseActions = new WarehouseActions();
+    }
+
+    public function test_warehouse_actions_call_delete_expect_bool()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )
+            ->create();
+
+        $company = $user->companies()->first();
+        $branch = $company->branches()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $result = $this->warehouseActions->delete($warehouse);
+
+        $this->assertIsBool($result);
+        $this->assertTrue($result);
+        $this->assertSoftDeleted('warehouses', [
+            'id' => $warehouse->id,
+        ]);
+    }
+}
diff --git a/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsEditTest.php b/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsEditTest.php
new file mode 100644
index 000000000..3fa7775bd
--- /dev/null
+++ b/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsEditTest.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace Tests\Unit\Actions\WarehouseActions;
+
+use App\Actions\Warehouse\WarehouseActions;
+use App\DTOs\WarehouseUpdateDTO;
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\User;
+use App\Models\Warehouse;
+use ArgumentCountError;
+use Tests\ActionsTestCase;
+
+class WarehouseActionsEditTest extends ActionsTestCase
+{
+    private WarehouseActions $warehouseActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->warehouseActions = new WarehouseActions();
+    }
+
+    public function test_warehouse_actions_call_update_expect_db_updated()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )
+            ->create();
+
+        $company = $user->companies()->first();
+        $branch = $company->branches()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+        $payload = Warehouse::factory()->make()->toArray();
+
+        $dto = new WarehouseUpdateDTO(
+            code: $payload['code'],
+            name: $payload['name'],
+            address: $payload['address'],
+            city: $payload['city'],
+            contact: $payload['contact'],
+            remarks: $payload['remarks'],
+            status: $payload['status'],
+        );
+
+        $result = $this->warehouseActions->update($warehouse, $dto);
+        $this->assertInstanceOf(Warehouse::class, $result);
+        $this->assertDatabaseHas('warehouses', [
+            'id' => $warehouse->id,
+            'company_id' => $warehouse->company_id,
+            'branch_id' => $warehouse->branch_id,
+            'code' => $payload['code'],
+            'name' => $payload['name'],
+        ]);
+    }
+
+    public function test_warehouse_actions_call_update_with_empty_array_parameters_expect_exception()
+    {
+        $this->expectException(ArgumentCountError::class);
+
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )
+            ->create();
+
+        $warehouse = Warehouse::factory()
+            ->for($user->companies()->first())
+            ->for($user->companies()->first()->branches()->first())
+            ->create();
+
+        $dto = new WarehouseUpdateDTO(...[]);
+
+        $this->warehouseActions->update($warehouse, $dto);
+    }
+}
diff --git a/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsReadTest.php b/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsReadTest.php
new file mode 100644
index 000000000..4c869fda7
--- /dev/null
+++ b/api/tests/Unit/Actions/WarehouseActions/WarehouseActionsReadTest.php
@@ -0,0 +1,104 @@
+<?php
+
+namespace Tests\Unit\Actions\WarehouseActions;
+
+use App\Actions\Warehouse\WarehouseActions;
+use App\DTOs\ExecuteDTO;
+use App\DTOs\ExecutePaginationDTO;
+use App\Models\Branch;
+use App\Models\Company;
+use App\Models\User;
+use App\Models\Warehouse;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Collection;
+use Tests\ActionsTestCase;
+
+class WarehouseActionsReadTest extends ActionsTestCase
+{
+    private WarehouseActions $warehouseActions;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->warehouseActions = new WarehouseActions();
+    }
+
+    public function test_warehouse_actions_call_read_any_with_paginate_true_expect_paginator_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )
+            ->create();
+
+        $company = $user->companies()->first();
+        $branch = $company->branches()->first();
+        Warehouse::factory()->count(2)->for($company)->for($branch)->create();
+
+        $result = $this->warehouseActions->readAny(
+            withTrashed: false,
+            companyId: $company->id,
+            branchId: null,
+            search: '',
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: new ExecutePaginationDTO(
+                    page: 1,
+                    perPage: 10,
+                ),
+                get: null,
+            ),
+        );
+
+        $this->assertInstanceOf(Paginator::class, $result);
+    }
+
+    public function test_warehouse_actions_call_read_any_with_paginate_false_expect_collection_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )
+            ->create();
+
+        $company = $user->companies()->first();
+        $branch = $company->branches()->first();
+        Warehouse::factory()->count(2)->for($company)->for($branch)->create();
+
+        $result = $this->warehouseActions->readAny(
+            withTrashed: false,
+            companyId: $company->id,
+            branchId: null,
+            search: '',
+            status: null,
+            includeId: null,
+            execute: new ExecuteDTO(
+                useCache: true,
+                pagination: null,
+                get: null,
+            ),
+        );
+
+        $this->assertInstanceOf(Collection::class, $result);
+    }
+
+    public function test_warehouse_actions_call_read_expect_object()
+    {
+        $user = User::factory()
+            ->has(Company::factory()->setStatusActive()->setIsDefault()
+                ->has(Branch::factory()->setStatusActive()->setIsMainBranch())
+            )
+            ->create();
+
+        $company = $user->companies()->first();
+        $branch = $company->branches()->first();
+        $warehouse = Warehouse::factory()->for($company)->for($branch)->create();
+
+        $result = $this->warehouseActions->read($warehouse);
+
+        $this->assertInstanceOf(Warehouse::class, $result);
+    }
+}
diff --git a/promp-visualization.html b/promp-visualization.html
new file mode 100644
index 000000000..d1519340b
--- /dev/null
+++ b/promp-visualization.html
@@ -0,0 +1,392 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Visualisasi Jurnal</title>
+    <style>
+        :root {
+            color-scheme: dark;
+            --bg: #0f172a;
+            --panel: #172033;
+            --panel-2: #1e293b;
+            --line: #334155;
+            --text: #e2e8f0;
+            --muted: #94a3b8;
+            --accent: #38bdf8;
+            --accent-2: #22c55e;
+            --warn: #f59e0b;
+            --danger: #fb7185;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: Arial, Helvetica, sans-serif;
+            background: linear-gradient(180deg, #0b1220 0%, var(--bg) 100%);
+            color: var(--text);
+        }
+
+        .wrap {
+            max-width: 1180px;
+            margin: 0 auto;
+            padding: 28px;
+        }
+
+        .hero,
+        .card,
+        .table-box,
+        .example,
+        .note {
+            background: rgba(23, 32, 51, 0.92);
+            border: 1px solid var(--line);
+            border-radius: 18px;
+            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
+        }
+
+        .hero {
+            padding: 28px;
+            margin-bottom: 22px;
+        }
+
+        .hero h1 {
+            margin: 0 0 10px;
+            font-size: 34px;
+            line-height: 1.15;
+        }
+
+        .hero p {
+            margin: 0;
+            color: var(--muted);
+            font-size: 18px;
+            line-height: 1.6;
+        }
+
+        .badge-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 18px;
+        }
+
+        .badge {
+            padding: 8px 12px;
+            border-radius: 999px;
+            border: 1px solid var(--line);
+            background: #111827;
+            color: var(--text);
+            font-size: 13px;
+        }
+
+        .grid-2 {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 18px;
+            margin-bottom: 22px;
+        }
+
+        .card {
+            padding: 22px;
+        }
+
+        .card h2 {
+            margin: 0 0 12px;
+            font-size: 24px;
+        }
+
+        .card p,
+        .card li,
+        .note li {
+            color: var(--muted);
+            line-height: 1.6;
+        }
+
+        .pill {
+            display: inline-block;
+            padding: 6px 10px;
+            border-radius: 999px;
+            font-size: 12px;
+            margin-bottom: 10px;
+            border: 1px solid var(--line);
+        }
+
+        .pill.good {
+            color: #86efac;
+            border-color: rgba(34, 197, 94, 0.4);
+            background: rgba(34, 197, 94, 0.1);
+        }
+
+        .pill.warn {
+            color: #fcd34d;
+            border-color: rgba(245, 158, 11, 0.4);
+            background: rgba(245, 158, 11, 0.1);
+        }
+
+        .visual {
+            display: grid;
+            grid-template-columns: 1fr 90px 1fr;
+            gap: 14px;
+            align-items: center;
+            margin-bottom: 22px;
+        }
+
+        .table-box {
+            padding: 18px;
+        }
+
+        .table-title {
+            font-size: 20px;
+            margin: 0 0 12px;
+        }
+
+        .row {
+            border: 1px solid var(--line);
+            border-radius: 12px;
+            padding: 12px 14px;
+            margin-bottom: 10px;
+            background: var(--panel-2);
+        }
+
+        .row strong {
+            display: inline-block;
+            min-width: 120px;
+            color: var(--text);
+        }
+
+        .arrow {
+            text-align: center;
+            color: var(--accent);
+            font-size: 32px;
+            font-weight: bold;
+        }
+
+        .arrow small {
+            display: block;
+            margin-top: 6px;
+            font-size: 12px;
+            color: var(--muted);
+        }
+
+        .example {
+            padding: 22px;
+            margin-bottom: 22px;
+        }
+
+        .example h2 {
+            margin-top: 0;
+        }
+
+        .example-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            overflow: hidden;
+            border-radius: 14px;
+            border: 1px solid var(--line);
+        }
+
+        th,
+        td {
+            border-bottom: 1px solid var(--line);
+            padding: 12px;
+            text-align: left;
+            font-size: 14px;
+        }
+
+        th {
+            background: #0f1a2f;
+            color: #cbd5e1;
+        }
+
+        tr:last-child td {
+            border-bottom: none;
+        }
+
+        .money-in {
+            color: #86efac;
+            font-weight: bold;
+        }
+
+        .money-out {
+            color: #fda4af;
+            font-weight: bold;
+        }
+
+        .note {
+            padding: 22px;
+        }
+
+        .note h2 {
+            margin-top: 0;
+        }
+
+        @media (max-width: 900px) {
+            .grid-2,
+            .visual,
+            .example-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .arrow {
+                transform: rotate(90deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="wrap">
+        <section class="hero">
+            <h1>Kenapa Jurnal Biasanya Pakai 2 Tabel?</h1>
+            <p>
+                Buat programmer baru, ini sering bikin bingung. Di layar, kita merasa sedang bikin
+                <strong>1 jurnal</strong>. Tapi di database, 1 jurnal itu biasanya punya
+                <strong>1 header</strong> dan <strong>banyak baris debit/kredit</strong>.
+            </p>
+            <div class="badge-row">
+                <div class="badge">1 jurnal di UI</div>
+                <div class="badge">1 header di database</div>
+                <div class="badge">bisa punya banyak lines</div>
+                <div class="badge">lebih rapi dan fleksibel</div>
+            </div>
+        </section>
+
+        <section class="grid-2">
+            <div class="card">
+                <div class="pill warn">Yang sering terasa</div>
+                <h2>"Kayaknya cukup 1 tabel aja"</h2>
+                <p>
+                    Perasaan ini wajar, karena user memang input <strong>1 dokumen jurnal</strong>.
+                    Masalahnya, isi jurnal hampir selalu punya lebih dari 1 baris akun.
+                </p>
+                <ul>
+                    <li>Kas debit</li>
+                    <li>Pendapatan kredit</li>
+                    <li>PPN kredit</li>
+                    <li>Piutang debit</li>
+                </ul>
+            </div>
+
+            <div class="card">
+                <div class="pill good">Yang lebih aman</div>
+                <h2>1 header + banyak line</h2>
+                <p>
+                    Header menyimpan data umum jurnal. Line menyimpan tiap akun dan nominalnya.
+                    Jadi data tidak diulang-ulang.
+                </p>
+                <ul>
+                    <li>Header: kode, tanggal, sumber, memo</li>
+                    <li>Line: akun, debit, kredit, urutan</li>
+                </ul>
+            </div>
+        </section>
+
+        <section class="visual">
+            <div class="table-box">
+                <h2 class="table-title">`journal_entries`</h2>
+                <div class="row"><strong>company_id</strong> 1</div>
+                <div class="row"><strong>code</strong> JRN-0001</div>
+                <div class="row"><strong>date</strong> 2026-05-10 10:15</div>
+                <div class="row"><strong>source_type</strong> Sale</div>
+                <div class="row"><strong>source_id</strong> 15</div>
+                <div class="row"><strong>remarks</strong> Jurnal dari penjualan</div>
+            </div>
+
+            <div class="arrow">
+                1:N
+                <small>1 header punya banyak line</small>
+            </div>
+
+            <div class="table-box">
+                <h2 class="table-title">`journal_entry_lines`</h2>
+                <div class="row"><strong>line 1</strong> Kas, debit 150.000</div>
+                <div class="row"><strong>line 2</strong> Penjualan, kredit 135.000</div>
+                <div class="row"><strong>line 3</strong> PPN Keluaran, kredit 15.000</div>
+            </div>
+        </section>
+
+        <section class="example">
+            <h2>Contoh Nyata</h2>
+            <p style="color: var(--muted); margin-top: -2px;">
+                Misalnya ada penjualan tunai Rp150.000. User merasa input <strong>1 transaksi</strong>,
+                tapi jurnalnya punya beberapa baris.
+            </p>
+            <div class="example-grid">
+                <div>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th colspan="2">Header Jurnal</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Kode</td>
+                                <td>JRN-0001</td>
+                            </tr>
+                            <tr>
+                                <td>Tanggal</td>
+                                <td>10 Mei 2026</td>
+                            </tr>
+                            <tr>
+                                <td>Sumber</td>
+                                <td>Penjualan #SALE-0015</td>
+                            </tr>
+                            <tr>
+                                <td>Memo</td>
+                                <td>Posting otomatis dari penjualan</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Akun</th>
+                                <th>Debit</th>
+                                <th>Kredit</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Kas</td>
+                                <td class="money-in">150.000</td>
+                                <td>-</td>
+                            </tr>
+                            <tr>
+                                <td>Pendapatan Penjualan</td>
+                                <td>-</td>
+                                <td class="money-out">135.000</td>
+                            </tr>
+                            <tr>
+                                <td>PPN Keluaran</td>
+                                <td>-</td>
+                                <td class="money-out">15.000</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+
+        <section class="note">
+            <h2>Kenapa 2 Tabel Lebih Enak?</h2>
+            <ul>
+                <li><strong>Tidak duplikat data header</strong>: kode, tanggal, sumber tidak perlu diulang di setiap baris.</li>
+                <li><strong>Lebih fleksibel</strong>: 1 jurnal bisa 2 line, 3 line, 10 line, bebas.</li>
+                <li><strong>Lebih gampang validasi</strong>: total debit dan total kredit tinggal dicek dari line.</li>
+                <li><strong>Lebih nyambung ke transaksi lain</strong>: penjualan, pembelian, expense, semua bisa jadi sumber 1 header jurnal.</li>
+                <li><strong>Lebih aman untuk laporan</strong>: buku besar dan trial balance biasanya memang baca dari detail line.</li>
+            </ul>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/temp.txt b/temp.txt
new file mode 100644
index 000000000..3d691e883
--- /dev/null
+++ b/temp.txt
@@ -0,0 +1,62 @@
+purchase_requisitions
+- id
+- ulid
+- company_id
+- branch_id
+- code
+- date
+- required_date
+- priority
+- requestor_user_id
+- purpose
+- remarks
+- is_closed
+- closed_at
+- created_by
+- updated_by
+- deleted_by
+- created_at
+- updated_at
+- deleted_at
+
+purchase_requisition_product_units
+- id
+- ulid
+- company_id
+- branch_id
+- purchase_requisition_id
+- product_unit_id
+- qty
+- product_unit_conversion_value
+- product_unit_qty_base
+- needed_date
+- remarks
+- created_by
+- updated_by
+- deleted_by
+- created_at
+- updated_at
+- deleted_at
+
+purchase_requisition_approvals
+- id
+- ulid
+- company_id
+- branch_id
+- purchase_requisition_id
+- approval_code
+- approval_level
+- approver_user_id
+- requested_at
+- is_mandatory
+- is_approved
+- approved_at
+- is_rejected
+- rejected_at
+- remarks
+- created_by
+- updated_by
+- deleted_by
+- created_at
+- updated_at
+- deleted_at
diff --git a/web/.gitignore b/web/.gitignore
index 4f7ad094a..55f829e8c 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -9,7 +9,6 @@ lerna-debug.log*
 
 node_modules
 .DS_Store
-dist
 dist-ssr
 coverage
 *.local
@@ -30,4 +29,5 @@ coverage
 *.tsbuildinfo
 
 /.vscode
-.env
\ No newline at end of file
+.env
+/public/config.js
\ No newline at end of file
diff --git a/web/.prettierrc b/web/.prettierrc
new file mode 100644
index 000000000..278a3c3f1
--- /dev/null
+++ b/web/.prettierrc
@@ -0,0 +1,13 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxBracketSameLine": false,
+  "htmlWhitespaceSensitivity": "ignore",
+  "vueIndentScriptAndStyle": true,
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "jsxSingleQuote": true
+}
diff --git a/web/README.md b/web/README.md
index af432704b..0f511d110 100644
--- a/web/README.md
+++ b/web/README.md
@@ -6,10 +6,10 @@ DCSLab - Vue Web
 
 Run the installation scripts
 
->`$ npm install`
+> `$ npm install`
 
 ## Run Dev Server
 
 Use vite for dev Server
 
->`$ npm run dev`
+> `$ npm run dev`
diff --git a/web/dist/.htaccess b/web/dist/.htaccess
new file mode 100644
index 000000000..b0e00a120
--- /dev/null
+++ b/web/dist/.htaccess
@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
\ No newline at end of file
diff --git a/web/dist/assets/accounting_system-DS1yDazM.jpg b/web/dist/assets/accounting_system-DS1yDazM.jpg
new file mode 100644
index 000000000..59d0c3575
Binary files /dev/null and b/web/dist/assets/accounting_system-DS1yDazM.jpg differ
diff --git a/web/dist/assets/def-user-CUyK0U-V.png b/web/dist/assets/def-user-CUyK0U-V.png
new file mode 100644
index 000000000..fcc6d82ec
Binary files /dev/null and b/web/dist/assets/def-user-CUyK0U-V.png differ
diff --git a/web/dist/assets/enigma-VF8rWhPh.png b/web/dist/assets/enigma-VF8rWhPh.png
new file mode 100644
index 000000000..8e0df73f2
Binary files /dev/null and b/web/dist/assets/enigma-VF8rWhPh.png differ
diff --git a/web/dist/assets/google-play-badge-BAXiFmDF.png b/web/dist/assets/google-play-badge-BAXiFmDF.png
new file mode 100644
index 000000000..131f3acaa
Binary files /dev/null and b/web/dist/assets/google-play-badge-BAXiFmDF.png differ
diff --git a/web/dist/assets/icewall-C6bJAm8N.png b/web/dist/assets/icewall-C6bJAm8N.png
new file mode 100644
index 000000000..fecc0e3d1
Binary files /dev/null and b/web/dist/assets/icewall-C6bJAm8N.png differ
diff --git a/web/dist/assets/illustration-DoVs3XZq.svg b/web/dist/assets/illustration-DoVs3XZq.svg
new file mode 100644
index 000000000..a0ae933b9
--- /dev/null
+++ b/web/dist/assets/illustration-DoVs3XZq.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="330.653" height="229.984" viewBox="0 0 330.653 229.984">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="gray" stop-opacity="0.251"/>
+      <stop offset="0.54" stop-color="gray" stop-opacity="0.122"/>
+      <stop offset="1" stop-color="gray" stop-opacity="0.102"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_1" data-name="Group 1" transform="translate(-420 -259)">
+    <circle id="Ellipse_37" data-name="Ellipse 37" cx="3.972" cy="3.972" r="3.972" transform="translate(722.377 259)" fill="#f1f5f9" opacity="0.1"/>
+    <ellipse id="Ellipse_38" data-name="Ellipse 38" cx="27.882" cy="2.78" rx="27.882" ry="2.78" transform="translate(620.471 483.424)" fill="#6c63ff" opacity="0.1"/>
+    <path id="Path_65" data-name="Path 65" d="M136.394,487.31l-.122,6.6-.98,53.523L126.9,567.077l-28.9.331V490.352l30.166-2.39Z" transform="translate(354.436 -100.91)" fill="#5f5d7e"/>
+    <path id="Path_66" data-name="Path 66" d="M136.394,487.31l-.122,6.6-.98,53.523L126.9,567.077l-28.9.331V490.352l30.166-2.39Z" transform="translate(354.436 -100.91)" fill="#334155"/>
+    <path id="Path_67" data-name="Path 67" d="M194.819,487.31l-.122,6.6-.98,53.523-8.387,19.641,2.208-73.038-.007-.046-.94-6.031Z" transform="translate(296.011 -100.91)" fill="#475569"/>
+    <path id="Path_68" data-name="Path 68" d="M128.166,487.962l8.228-.652-.122,6.6-7.166.079L98,494.34v-3.988Z" transform="translate(354.436 -100.91)" opacity="0.1"/>
+    <path id="Path_69" data-name="Path 69" d="M930.981,487.562v76.613h-6.729L897.33,544.538V485.4l24.053-2.261,1.476.679,1.393.642Z" transform="translate(-180.328 -98.121)" fill="#475569"/>
+    <rect id="Rectangle_55" data-name="Rectangle 55" width="6.729" height="80.356" transform="translate(743.924 385.698)" fill="#334155"/>
+    <path id="Path_70" data-name="Path 70" d="M930.981,483.819v4.4l-6.729.076-26.922.3v-3.2l24.053-2.261,1.476.679,1.393.642v-.642Z" transform="translate(-180.328 -98.121)" opacity="0.1"/>
+    <path id="Path_71" data-name="Path 71" d="M330.653,464.929v6.242L0,474.858v-7.944l31.113-6.289,270.745-1.986Z" transform="translate(420 -81.73)" fill="#475569"/>
+    <path id="Path_72" data-name="Path 72" d="M330.653,477.64v6.242L0,487.57v-7.944Z" transform="translate(420 -94.441)" fill="#334155"/>
+    <rect id="Rectangle_56" data-name="Rectangle 56" width="115.818" height="89.925" rx="22.82" transform="translate(540.975 289.64)" fill="#475569"/>
+    <rect id="Rectangle_57" data-name="Rectangle 57" width="97.349" height="73.356" rx="7" transform="translate(550.295 297.752)" fill="#f1f5f9"/>
+    <circle id="Ellipse_39" data-name="Ellipse 39" cx="1.595" cy="1.595" r="1.595" transform="translate(544.9 332.833)" fill="#e6e8ec"/>
+    <circle id="Ellipse_40" data-name="Ellipse 40" cx="2.631" cy="2.631" r="2.631" transform="translate(649.326 331.969)" fill="#e6e8ec"/>
+    <path id="Path_73" data-name="Path 73" d="M620.934,349.638l-12.448-7.566a1.7,1.7,0,0,0-2.525,1.483V358.27a1.7,1.7,0,0,0,2.525,1.483l12.448-7.143a1.7,1.7,0,0,0,0-2.972Zm9.36,1.274a17.542,17.542,0,1,0-17.542,17.542,17.542,17.542,0,0,0,17.542-17.542Zm-31.688,0a14.146,14.146,0,1,1,14.146,14.146,14.146,14.146,0,0,1-14.146-14.146Z" transform="translate(-11.469 -14.925)" fill="#475469"/>
+    <path id="Path_74" data-name="Path 74" d="M736.127,405.782a4.14,4.14,0,0,0-.374-1.165c.251-.857.414-1.384.414-1.384a1.93,1.93,0,0,0-.04-.331,5.081,5.081,0,0,0-5.147-4.263c-1.986.036-5.753.169-9.93.639.238-1.671.523-3.671.821-5.729l.546.06a2.6,2.6,0,0,1,.391.02h.175a1.8,1.8,0,0,0,1.211-.371.715.715,0,0,0-.222-1.172A2.952,2.952,0,0,0,726.565,391a2.317,2.317,0,0,0,0-2.694c-.7-.993-2.178-1.655-2.257-2.823a3.449,3.449,0,0,1,.748-1.844,7.7,7.7,0,0,0-1.215-9.251,18.1,18.1,0,0,0-1.47-1.307c-.728-2.674-1.489-5.064-1.714-5.14a5.783,5.783,0,0,1-1.268-1.264,6.084,6.084,0,0,0-.023-1.367c-.351-2.317-2.648-3.972-3.912-6.017a10.388,10.388,0,0,1-1.168-6.894,49.319,49.319,0,0,1,1.807-6.9,8.782,8.782,0,0,0,.354-5.187,9.428,9.428,0,0,0-2.135-3.217,24.318,24.318,0,0,0-7.586-5.958,15.076,15.076,0,0,0-6.716-1.436h-.023l-.364.02-.258.017-.258.026-.275.026h0c-.281.036-.559.079-.837.136a28.9,28.9,0,0,0-6.14-.688h-.268a3.144,3.144,0,0,0-1.754.414c-.735.513-.828,1.433-1.049,2.234a6.2,6.2,0,0,1-2.383,3.31c-.791.569-1.721.993-2.476,1.589a2.522,2.522,0,0,0-1.142,2.37,2.586,2.586,0,0,0,1.655,1.622c-.1.119-.2.235-.288.357.156.063.331.119.473.165.993.3,2.062.331,3.068.6a6.725,6.725,0,0,1,.814.275,11.624,11.624,0,0,0-1.36,5.468,11.78,11.78,0,0,0,6.163,10.333v.331c.1,3.455-.159,7.659-1.926,8.371s-3.459,1.516-4.5,2.036l-.331.175c-.275-.126-.549-.258-.818-.4,0,0-1.407-.166-1.162.907,0,0-4.253-.662-6.587,1.155a60.664,60.664,0,0,0-6.914,6.6c-.751.99-6.56,3.154-6.56,3.154a7.448,7.448,0,0,0,1.039-5.693s-.874-3.78-.457-5.3,1.5-7.143,1.5-7.143.152-5.938-3.088-8.662-5.494-4.965-4.243-2.317a36.912,36.912,0,0,0,1.834,3.545s-7.748,1.84-5,4.713,3.5,2.876,3.5,2.876-.917,7.093-1.086,8.414-1.655,11.383-1.655,11.383-.083,4.786.751,5.527a3.765,3.765,0,0,0,4,2.979s6.58-.166,8.414-.907,8.162-4.7,8.831-4.455a.38.38,0,0,1,.129.086.943.943,0,0,1,.1.1c-.662,1.466-2.231,6.444-1.562,8.89,0,0-.583,6.927,2.916,9.155,0,0,5.081,8.579,3.164,13.2-.152.374-.288.718-.414,1.053-2.909-2.413-7.348-4.634-14.126-5.862-.692-.126-1.38-.278-2.062-.444-1.926-.467-7.225-.894-9.747,7.484a36.849,36.849,0,0,1-2.237,5.667,18.709,18.709,0,0,0-2.118,7.745c-.056,4,2.012,7.973,9.519,9.43a28.567,28.567,0,0,0,1.443,9.079c2.082,5.2,5.415,13.61,5.415,13.61s4,8.579,4.25,12.041a55.272,55.272,0,0,1,.235,7.282,3.231,3.231,0,0,1-.033.364,8.769,8.769,0,0,1-1.119,1.016c-.583.331-2.5,2.393-2.5,2.886a8.82,8.82,0,0,0,.126,1.41,3.474,3.474,0,0,0-1.4,2.515c0,4.475,12.7,8.1,28.365,8.1s28.362-3.641,28.362-8.1c0-4.084-10.592-7.46-24.354-8.016,2.87-1.145,5.418-2.347,6.474-3.31a1.549,1.549,0,0,0,.5-.682L705.5,473.78s-.208.046-.516.136l-.185-.278c-1.185-1.8-3.465-5.4-3.465-6.375,0-.361-.6-2.668-1.476-5.829V451.289c8.692,1.324,19.892-.477,19.892-.477l.05-.026h.218v-.119c1.506-.834,9.039-5.246,11.273-11.1.662-1.708-.162-4.154-1.8-6.769,1.145-2.843,3.972-10.188,3.69-13.117,0-.156-.02-.331-.02-.5a8.635,8.635,0,0,0,.033-.9c.331-4.3,2.979-12.164,2.979-12.164S736.16,405.981,736.127,405.782ZM679.86,386.665c.6,1.059,1.248,2.413,1.5,2.962h0s-.88-1.622-1.486-2.962Zm.629,92.709-.063.023v-.331a19.7,19.7,0,0,1,.063-2.588,3.032,3.032,0,0,0-.285-1.344,31.773,31.773,0,0,1-2.029-7.987,40.057,40.057,0,0,1-.434-6.835,121.041,121.041,0,0,0,.149-15.113l5.124,1.152,5.958,12.147s3.833,5.931,5.021,10.611V473.8a11.453,11.453,0,0,1-1.791,3.886c-.791,1.082-1.562,2.178-2.277,3.31-.218.351-.46.712-.7,1.049-.079,0-3.995.228-4.66.963a4.449,4.449,0,0,0-1.245,1.887l-.169.026a39.5,39.5,0,0,0-2.645-5.544Z" transform="translate(-50.055 -12.157)" fill="url(#linear-gradient)"/>
+    <path id="Path_75" data-name="Path 75" d="M775.915,767.873l-1.324,4.3-5.627,4.882-8.275,2.376s-3.889-2.128-2.565-2.542a3.266,3.266,0,0,0,1.248-1.086c-.463,1.688,3.22-.487,3.22-.487s9.516-6.785,10.509-7.53a7.484,7.484,0,0,1,2.118-.97C775.634,767.465,775.915,767.873,775.915,767.873Z" transform="translate(-120.277 -304.91)" opacity="0.1"/>
+    <path id="Path_76" data-name="Path 76" d="M757.738,692.923l-1.324,4.3-5.627,4.882-8.275,2.376s-3.889-2.128-2.565-2.542a3.264,3.264,0,0,0,1.248-1.086,16.531,16.531,0,0,0,1.1-1.6c.708-1.139,1.476-2.237,2.261-3.31a11.912,11.912,0,0,0,2.089-5.5c.579-4.551-5.3-13.736-5.3-13.736L730.68,654.79l14.894,1.82s8.026,27.555,8.026,28.878c0,.993,2.264,4.584,3.442,6.4C757.457,692.516,757.738,692.923,757.738,692.923Z" transform="translate(-102.1 -229.96)" fill="#f8d4d4"/>
+    <ellipse id="Ellipse_41" data-name="Ellipse 41" cx="28.173" cy="8.126" rx="28.173" ry="8.126" transform="translate(619.203 472.187)" fill="#1e293b"/>
+    <path id="Path_77" data-name="Path 77" d="M770.57,773.456a1.589,1.589,0,0,1-.5.685c-2.045,1.877-9.7,4.667-14.421,6.183a33.427,33.427,0,0,1-3.783,1.076,11.216,11.216,0,0,1-5.213-1.678c-1.655-1.016-.165-2.459.5-3.2s4.634-.966,4.634-.966c-1.9,3.167,2.81.387,2.81.387s9.516-6.785,10.509-7.53a9.136,9.136,0,0,1,2.813-1.158Z" transform="translate(-112.285 -305.197)" fill="#fff"/>
+    <path id="Path_79" data-name="Path 79" d="M789.781,788.09c-2.045,1.877-9.694,4.667-14.421,6.183C779.643,790.645,786.825,788.749,789.781,788.09Z" transform="translate(-131.992 -319.14)" opacity="0.1"/>
+    <ellipse id="Ellipse_42" data-name="Ellipse 42" cx="5.637" cy="1.625" rx="5.637" ry="1.625" transform="translate(641.74 476.07)" opacity="0.1"/>
+    <rect id="Rectangle_58" data-name="Rectangle 58" width="5.792" height="42.862" transform="translate(644.242 434.833)" fill="#1e293b"/>
+    <path id="Path_80" data-name="Path 80" d="M783.792,687.128v4.965A40.74,40.74,0,0,1,778,689.045V685h1.208Z" transform="translate(-133.758 -250.171)" opacity="0.1"/>
+    <path id="Path_81" data-name="Path 81" d="M754.27,610.208s19.124-4.922,23.884-8.606,23.45,13.65,20.981,20.19-11.459,11.277-11.459,11.277-24.86,4.045-29.094-4.392S754.27,610.208,754.27,610.208Z" transform="translate(-117.882 -194.037)" fill="#94a3b8"/>
+    <path id="Path_82" data-name="Path 82" d="M754.27,610.208s19.124-4.922,23.884-8.606,23.45,13.65,20.981,20.19-11.459,11.277-11.459,11.277-24.86,4.045-29.094-4.392S754.27,610.208,754.27,610.208Z" transform="translate(-117.882 -194.037)" fill="#94a3b8" opacity="0.445"/>
+    <path id="Path_83" data-name="Path 83" d="M749.27,604.208s19.124-4.922,23.884-8.606,23.45,13.65,20.981,20.19-11.459,11.277-11.459,11.277-24.86,4.045-29.094-4.392S749.27,604.208,749.27,604.208Z" transform="translate(-114.537 -190.023)" fill="#334155"/>
+    <path id="Path_84" data-name="Path 84" d="M673.421,423.313l-2.069-.751a7.524,7.524,0,0,0,1.036-5.709s-.87-3.793-.457-5.329,1.489-7.166,1.489-7.166.152-5.958-3.068-8.688-5.455-4.965-4.213-2.317a36.851,36.851,0,0,0,1.82,3.558s-7.7,1.844-4.965,4.73,3.475,2.883,3.475,2.883-.91,7.116-1.076,8.44-1.655,11.419-1.655,11.419-.083,4.8.745,5.544a3.744,3.744,0,0,0,3.972,2.979C669.046,432.9,676.069,425.134,673.421,423.313Z" transform="translate(-56.426 -54.261)" fill="#f8d4d4"/>
+    <path id="Path_85" data-name="Path 85" d="M784.127,413.249v4.634l-4.8,1.566-8.175,6.017-2.168,1.6-9.681-3.889-6.123-6.454s.3-.162.814-.43l.331-.175c1.036-.52,2.668-1.324,4.472-2.042s2.016-4.928,1.913-8.4v-.331c-.083-2.433-.331-4.422-.331-4.422s1.009-.192,2.479-.41c4.074-.606,11.677-1.423,11.009,1.072a5.752,5.752,0,0,0,0,2.578c.02.093.04.189.063.281a21.835,21.835,0,0,0,2.82,6.16l6.62,2.383.185.066Z" transform="translate(-117.153 -59.421)" fill="#f8d4d4"/>
+    <path id="Path_86" data-name="Path 86" d="M838.485,441.541v-1.407a4.636,4.636,0,0,1,1.572,0c.579.166,1.678,1.9,2.175,2.069s3.535,11.5,3.2,12.495-3.459,23.411-3.459,23.411l-6.3,6.951-1.241-19.114,4.055-11.336Z" transform="translate(-171.511 -86.307)" fill="#f8d4d4"/>
+    <path id="Path_87" data-name="Path 87" d="M737.631,601.77s-5.762,1.241-5.031,3.062,3.955,1.9,3.955,1.9Z" transform="translate(-103.342 -194.489)" fill="#fdc2cc"/>
+    <path id="Path_88" data-name="Path 88" d="M710.965,463.909l-4.385,9.45-5.213,3.806-.91-5.882s-1.761-3.889-2.519-4.548a.379.379,0,0,0-.129-.086c-.662-.248-6.951,3.724-8.771,4.468s-8.357.91-8.357.91l2.9-10.343s5.792-2.151,6.537-3.144a60.232,60.232,0,0,1,6.868-6.62c2.317-1.82,6.544-1.158,6.544-1.158l.066.027,1.086.47,3.144,7.7Z" transform="translate(-68.65 -93.384)" fill="#f8d4d4"/>
+    <path id="Path_89" data-name="Path 89" d="M701.066,669.314a19.757,19.757,0,0,0-.063,2.595c.023.923.063,1.708.063,1.708l-1.9,3.972s-6.537,2.151-5.461,1.241a3.6,3.6,0,0,0,.662-2.214,56.131,56.131,0,0,0-.235-7.3c-.248-3.475-4.22-12.081-4.22-12.081s-3.31-8.44-5.378-13.653-1.324-14.646-1.324-14.646.331-7.116,1.82-9.268,7.282-2.9,7.282-2.9l2.717,9.013s2.234,8.44,3.062,9.681.579,16.053.248,17.625a42.152,42.152,0,0,0,.434,6.858,32.207,32.207,0,0,0,2.012,8.01,3.059,3.059,0,0,1,.281,1.359Z" transform="translate(-70.252 -204.524)" fill="#f8d4d4"/>
+    <path id="Path_90" data-name="Path 90" d="M722.3,785.068l-1.9,3.972s-6.537,2.151-5.461,1.241a3.6,3.6,0,0,0,.662-2.214c.235-.235.487-.493.745-.758a16.712,16.712,0,0,1,5.908-3.949h0C722.263,784.283,722.3,785.068,722.3,785.068Z" transform="translate(-91.489 -315.975)" opacity="0.1"/>
+    <path id="Path_91" data-name="Path 91" d="M719.522,791.588a.187.187,0,0,1,0,.046c-.331,1.572-5.792,3.724-5.792,3.724s-3.475.579-5.461,1.076a1.374,1.374,0,0,1-.467.043c-1.532-.116-1.6-3.065-1.6-3.518a9.4,9.4,0,0,1,2.482-2.9,17.738,17.738,0,0,0,1.84-1.764,17.078,17.078,0,0,1,6.031-4.028h0S719.787,789.956,719.522,791.588Z" transform="translate(-85.723 -316.584)" fill="#fff"/>
+    <path id="Path_93" data-name="Path 93" d="M722.76,806.268a.2.2,0,0,1,0,.046c-.331,1.572-5.792,3.724-5.792,3.724s-3.475.579-5.461,1.076a1.375,1.375,0,0,1-.467.043c1.8-1.235,6.166-4.2,6.755-4.263S721.287,805.993,722.76,806.268Z" transform="translate(-88.961 -331.264)" opacity="0.1"/>
+    <path id="Path_94" data-name="Path 94" d="M788.514,404.442c-2.045,1.685-3.925,1.443-6.782,1.443-2.065,0-4.75.725-6.441-.2-.07-2.585-.331-4.76-.331-4.76s14.4-2.731,13.488.662a6.018,6.018,0,0,0,.066,2.86Z" transform="translate(-131.724 -59.422)" opacity="0.1"/>
+    <path id="Path_95" data-name="Path 95" d="M781.1,361.146a11.833,11.833,0,0,1-11.833,11.833,8.247,8.247,0,0,1-.907-.033h0a11.833,11.833,0,1,1,12.743-11.8Z" transform="translate(-120.003 -25.593)" fill="#f8d4d4"/>
+    <path id="Path_96" data-name="Path 96" d="M742.7,459.252l3.144,4.965-4.385,9.45-5.213,3.806-.91-5.9s-1.761-3.889-2.519-4.548c.218-.533.367-.778.367-.583,0,.827,2.036,4.551,2.036,4.551,6.289-2.151,4.336-10.509,4.336-10.509s-.781-7.447-1.086-9.407l1.086.47Z" transform="translate(-103.532 -93.675)" opacity="0.1"/>
+    <path id="Path_97" data-name="Path 97" d="M784.127,439.869V444.5l-4.8,1.566-8.175,6.017-2.168,1.6-9.681-3.889-6.123-6.454s.3-.162.814-.43l.331-.175a40.414,40.414,0,0,0,16.718,3c12.468-1.986,12.839-5,12.528-6.067Z" transform="translate(-117.153 -86.041)" opacity="0.1"/>
+    <path id="Path_98" data-name="Path 98" d="M743.016,514.772a92.777,92.777,0,0,1-9.6,4.055c-5.709,2.069-18.287-.662-19.859-1.076s-13.653-5.213-18.287-7.033-5.792-.331-6.868-.5-1.82-2.234-1.986-2.813,2.979-5.627,4.717-8.192,6.951-2.069,7.7-2.234,5.958,0,5.958,0-.331-1.655,1.572-6.289-3.144-13.239-3.144-13.239c-3.475-2.234-2.9-9.185-2.9-9.185-.827-3.062,1.82-10.1,1.82-9.268s2.036,4.551,2.036,4.551c6.289-2.151,4.336-10.509,4.336-10.509s-.91-8.688-1.152-9.764,1.152-.91,1.152-.91q.4.209.814.4a40.229,40.229,0,0,0,17.059,3.161c15.116-2.439,12.438-6.328,12.339-6.467l.735.261c5.461,3.972,3.806,17.128,3.806,17.128l-2.046,9.82-1.519,7.315s5.378,32.6,5.875,34.257S743.016,514.772,743.016,514.772Z" transform="translate(-72.484 -85.901)" fill="#94a3b8"/>
+    <path id="Path_99" data-name="Path 99" d="M730.994,622c-.331.248-4.055,7.944-1.324,10.095S730.994,622,730.994,622Z" transform="translate(-100.759 -208.023)" opacity="0.1"/>
+    <path id="Path_100" data-name="Path 100" d="M743.68,625.27c.083.248,7.778,12.495,12,13.488Z" transform="translate(-110.798 -210.21)" opacity="0.1"/>
+    <path id="Path_101" data-name="Path 101" d="M797.2,332.386l-1.231.261a8.3,8.3,0,0,1,1.039-.308Z" transform="translate(-145.78 -14.236)" opacity="0.1"/>
+    <path id="Path_102" data-name="Path 102" d="M783.931,396.545l-2.317,9.814A11.986,11.986,0,0,1,778.4,404.2a9.8,9.8,0,0,0-2.35-1.966,10.2,10.2,0,0,0-4.081-.563,19.63,19.63,0,0,1-5.1-.874,3.6,3.6,0,0,1-1.324-.642,3.217,3.217,0,0,1-.662-2.8,42.893,42.893,0,0,0,.05-5.723c-.02-.357-.046-.715-.076-1.072-.132-1.6-.563-3.452-2.2-4.137-.841-.331-1.844-.3-2.648-.7a2.185,2.185,0,0,1-.331-.2c-1.192-.834-1.3-2.506-1.254-3.912q.106-2.9.2-5.8a16.864,16.864,0,0,0-.063-2.863h0a6.352,6.352,0,0,0-.516-1.827c-.718-1.536-2.214-2.817-2.482-4.438a1.8,1.8,0,0,1-.03-.228c-.139-1.45.774-2.8,1.1-4.227.642-2.87-1.516-6.014-4.69-6.838-.993-.258-2.059-.308-3.048-.6a4.887,4.887,0,0,1-.467-.165,13.894,13.894,0,0,1,11.167-5.3c7.391,0,13.385,5.3,13.385,11.833a11.356,11.356,0,0,1-4.945,9.185c.02.093.043.189.07.281a20.819,20.819,0,0,0,3.191,6.16l7.493,2.383.834.265C785.8,383.395,783.931,396.545,783.931,396.545Z" transform="translate(-113.969 -25.596)" opacity="0.1"/>
+    <path id="Path_103" data-name="Path 103" d="M867.572,520.655a1.124,1.124,0,0,1-.212-.03A.439.439,0,0,1,867.572,520.655Z" transform="translate(-193.541 -140.2)" opacity="0.1"/>
+    <path id="Path_104" data-name="Path 104" d="M759.671,330a28.465,28.465,0,0,0-6.315-.738,3.5,3.5,0,0,0-1.986.417c-.732.513-.824,1.44-1.043,2.241a6.216,6.216,0,0,1-2.367,3.31c-.784.573-1.708.993-2.459,1.6a2.566,2.566,0,0,0-1.135,2.376,2.938,2.938,0,0,0,2.171,1.84c.993.281,2.049.331,3.048.6,3.174.824,5.329,3.972,4.687,6.835-.331,1.427-1.235,2.777-1.1,4.227.162,1.731,1.761,3.065,2.512,4.67a10.092,10.092,0,0,1,.586,4.687l-.2,5.8c-.053,1.529.079,3.369,1.589,4.117.808.4,1.814.354,2.648.7,1.635.682,2.065,2.539,2.2,4.134a42.74,42.74,0,0,1,.026,6.8,3.187,3.187,0,0,0,.662,2.8,3.549,3.549,0,0,0,1.324.642,19.634,19.634,0,0,0,5.1.874,10.307,10.307,0,0,1,4.081.563,9.878,9.878,0,0,1,2.35,1.966,12.988,12.988,0,0,0,7.672,3.359,2.285,2.285,0,0,0,1.734-.354c.427-.394.175-1.244-.434-1.195a2.943,2.943,0,0,0,2.787-1.066,2.35,2.35,0,0,0,0-2.7c-.692-.993-2.161-1.655-2.241-2.833a3.5,3.5,0,0,1,.741-1.85,7.781,7.781,0,0,0-1.2-9.268c-1.552-1.605-3.879-2.823-4.422-4.882-.361-1.377.185-2.823-.023-4.223-.331-2.317-2.625-3.972-3.886-6.037a10.5,10.5,0,0,1-1.162-6.914,49.179,49.179,0,0,1,1.8-6.918,8.928,8.928,0,0,0,.351-5.206,9.539,9.539,0,0,0-2.122-3.227,23.9,23.9,0,0,0-7.533-5.958,13.774,13.774,0,0,0-9.837-.907" transform="translate(-111.233 -12.175)" fill="#474157"/>
+    <path id="Path_105" data-name="Path 105" d="M759.671,330a28.465,28.465,0,0,0-6.315-.738,3.5,3.5,0,0,0-1.986.417c-.732.513-.824,1.44-1.043,2.241a6.216,6.216,0,0,1-2.367,3.31c-.784.573-1.708.993-2.459,1.6a2.566,2.566,0,0,0-1.135,2.376,2.938,2.938,0,0,0,2.171,1.84c.993.281,2.049.331,3.048.6,3.174.824,5.329,3.972,4.687,6.835-.331,1.427-1.235,2.777-1.1,4.227.162,1.731,1.761,3.065,2.512,4.67a10.092,10.092,0,0,1,.586,4.687l-.2,5.8c-.053,1.529.079,3.369,1.589,4.117.808.4,1.814.354,2.648.7,1.635.682,2.065,2.539,2.2,4.134a42.74,42.74,0,0,1,.026,6.8,3.187,3.187,0,0,0,.662,2.8,3.549,3.549,0,0,0,1.324.642,19.634,19.634,0,0,0,5.1.874,10.307,10.307,0,0,1,4.081.563,9.878,9.878,0,0,1,2.35,1.966,12.988,12.988,0,0,0,7.672,3.359,2.285,2.285,0,0,0,1.734-.354c.427-.394.175-1.244-.434-1.195a2.943,2.943,0,0,0,2.787-1.066,2.35,2.35,0,0,0,0-2.7c-.692-.993-2.161-1.655-2.241-2.833a3.5,3.5,0,0,1,.741-1.85,7.781,7.781,0,0,0-1.2-9.268c-1.552-1.605-3.879-2.823-4.422-4.882-.361-1.377.185-2.823-.023-4.223-.331-2.317-2.625-3.972-3.886-6.037a10.5,10.5,0,0,1-1.162-6.914,49.179,49.179,0,0,1,1.8-6.918,8.928,8.928,0,0,0,.351-5.206,9.539,9.539,0,0,0-2.122-3.227,23.9,23.9,0,0,0-7.533-5.958,13.774,13.774,0,0,0-9.837-.907" transform="translate(-111.233 -12.175)" fill="#1e293b"/>
+    <path id="Path_106" data-name="Path 106" d="M737.18,548.476s2.813,1.076,5.792-1.9S737.18,548.476,737.18,548.476Z" transform="translate(-106.449 -156.917)" opacity="0.1"/>
+    <g id="Group_116" data-name="Group 116" transform="translate(633.048 317.105)" opacity="0.1">
+      <path id="Path_107" data-name="Path 107" d="M793.1,330.871a11.776,11.776,0,0,1,1.655-.209,12.551,12.551,0,0,0-2.317.073Z" transform="translate(-776.467 -330.203)"/>
+      <path id="Path_108" data-name="Path 108" d="M777.411,390.5a9.9,9.9,0,0,0-2.353-1.966,10.3,10.3,0,0,0-4.081-.563,19.53,19.53,0,0,1-5.1-.874,3.549,3.549,0,0,1-1.324-.642,3.225,3.225,0,0,1-.662-2.8,42.733,42.733,0,0,0-.026-6.8c-.136-1.6-.563-3.452-2.2-4.134-.837-.351-1.84-.308-2.648-.7-1.509-.748-1.655-2.588-1.592-4.117q.1-2.9.2-5.8a10.059,10.059,0,0,0-.586-4.69c-.751-1.605-2.35-2.936-2.512-4.67-.136-1.446.778-2.8,1.1-4.227.642-2.87-1.516-6.011-4.69-6.835-.993-.258-2.059-.311-3.048-.6a2.905,2.905,0,0,1-2.155-1.82,2.52,2.52,0,0,1,1.132-2.38c.751-.606,1.675-1.023,2.463-1.6a6.193,6.193,0,0,0,2.363-3.31,3.713,3.713,0,0,1,1.043-2.241,2.648,2.648,0,0,1,1.357-.4c-.295,0-.589-.017-.88-.017a3.521,3.521,0,0,0-1.986.414c-.732.516-.824,1.44-1.043,2.241a6.216,6.216,0,0,1-2.367,3.31c-.784.573-1.708.993-2.459,1.6a2.568,2.568,0,0,0-1.135,2.38,2.92,2.92,0,0,0,2.158,1.82c.99.295,2.049.331,3.048.6,3.174.824,5.329,3.972,4.687,6.835-.331,1.427-1.235,2.78-1.1,4.227.162,1.734,1.761,3.065,2.512,4.67a10.057,10.057,0,0,1,.586,4.69q-.1,2.9-.2,5.8c-.053,1.529.079,3.369,1.589,4.117.808.4,1.814.354,2.648.7,1.635.682,2.065,2.539,2.2,4.134a42.74,42.74,0,0,1,.026,6.8,3.187,3.187,0,0,0,.662,2.8,3.549,3.549,0,0,0,1.324.642,19.5,19.5,0,0,0,5.1.874,10.308,10.308,0,0,1,4.081.563A9.959,9.959,0,0,1,775.9,390.5a12.968,12.968,0,0,0,7.669,3.36,3.544,3.544,0,0,0,1.109-.043,12.945,12.945,0,0,1-7.267-3.317Z" transform="translate(-744.18 -329.32)"/>
+    </g>
+    <path id="Path_109" data-name="Path 109" d="M684.782,484s-2.648,2.429-2.261,3.422S684.782,484,684.782,484Z" transform="translate(-69.856 -115.699)" opacity="0.1"/>
+    <path id="Path_110" data-name="Path 110" d="M668.535,577.927c-1.91-.467-7.176-.9-9.681,7.507a37.186,37.186,0,0,1-2.221,5.683c-2.4,4.935-5.508,15.083,8.146,17.317l32.767,7.447s17.542,2.151,18.7,1.324a3.207,3.207,0,0,0,.993-2.648s-19.363,0-23.169-5.958-3.972-14.067-3.972-14.067.477-12.521-19.528-16.159C669.908,578.248,669.213,578.092,668.535,577.927Z" transform="translate(-51.152 -178.397)" fill="#474157"/>
+    <path id="Path_111" data-name="Path 111" d="M668.535,578.1c-1.91-.467-7.176-.9-9.681,7.51a37.188,37.188,0,0,1-2.221,5.683c-2.4,4.932-5.508,15.08,8.146,17.314l32.767,7.447s17.542,2.151,18.7,1.324a3.207,3.207,0,0,0,.993-2.648s-19.363,0-23.169-5.958S690.1,594.7,690.1,594.7s.477-12.521-19.528-16.159C669.908,578.418,669.213,578.256,668.535,578.1Z" transform="translate(-51.152 -178.511)" fill="#334155"/>
+    <path id="Path_112" data-name="Path 112" d="M811.958,543.834a5.061,5.061,0,0,0-5.114-4.276c-4.713.086-19.22.715-25.959,5.117,0,0-5.13,3.31-6.62,3.31s-21.68,17.211,8.275,32.6c0,0,16.053,4.568,22.341-6.156,0,0,4.468-11.518,4.137-15.507S812,544.178,812,544.178,811.991,544.049,811.958,543.834Z" transform="translate(-125.886 -152.867)" fill="#475569"/>
+    <path id="Path_113" data-name="Path 113" d="M811.958,553.257a4.963,4.963,0,0,0-5.114-3.949c-4.713.079-19.22.662-25.959,4.723,0,0-5.13,3.055-6.62,3.055s-21.68,15.887,8.275,30.1c0,0,16.053,4.217,22.341-5.683,0,0,4.468-10.635,4.137-14.315S812,553.575,812,553.575,811.991,553.456,811.958,553.257Z" transform="translate(-125.886 -159.39)" fill="#475569" opacity="0.1"/>
+    <rect id="Rectangle_59" data-name="Rectangle 59" width="5.296" height="11.277" transform="translate(664.763 427.716)" fill="#1e293b"/>
+    <ellipse id="Ellipse_43" data-name="Ellipse 43" cx="14.908" cy="0.957" rx="14.908" ry="0.957" transform="translate(461.439 379.949)" opacity="0.1"/>
+    <path id="Path_114" data-name="Path 114" d="M266.794,405.634a5.684,5.684,0,0,0-.755,1.42c-.046.126-.093.265-.139.4a1.22,1.22,0,0,0-.262-.089,3.753,3.753,0,0,0-1.182-.1c0-.152.02-.331.023-.483.05-1.744-.156-4.177-1.82-3.148-1.6.993-.457,2.648.573,3.71l.265.258c-.94.662-1.119,2.228-1.274,3.853s-1.536,3.406-2.453,4.415c-.093.1-.175.2-.258.281a3.346,3.346,0,0,0-2.664-.685c-.036-.142-.079-.291-.122-.45-.741-2.674-2.28-7.311-4.243-8.328l.258-.331c.834-1.092,1.774-2.711.387-3.128s-1.513,1.407-1.436,2.77c0,.172.026.331.04.483a2.042,2.042,0,0,0-1.45.708l-.215-.252c-1.125-1.324-3.187-3.432-3.813-1.84-.583,1.483,1.235,3.406,2.512,4.521l.079.07c-.857,3.485,2.876,6.332,4.9,7.563l.261.159c-2.78,3.277-4.5,9.417-4.5,9.417l7.785,1.39s5.163-4.452,4.5-8.635h.053c5.16-1.033,6.332-6.534,5.527-9.8l.093-.036a5.871,5.871,0,0,0,2.39-1.807C271.3,405.928,268.271,403.664,266.794,405.634Z" transform="translate(222.063 -61.62)" fill="#475569"/>
+    <path id="Path_115" data-name="Path 115" d="M266.794,405.634a5.684,5.684,0,0,0-.755,1.42c-.046.126-.093.265-.139.4a1.22,1.22,0,0,0-.262-.089,3.753,3.753,0,0,0-1.182-.1c0-.152.02-.331.023-.483.05-1.744-.156-4.177-1.82-3.148-1.6.993-.457,2.648.573,3.71l.265.258c-.94.662-1.119,2.228-1.274,3.853s-1.536,3.406-2.453,4.415c-.093.1-.175.2-.258.281a3.346,3.346,0,0,0-2.664-.685c-.036-.142-.079-.291-.122-.45-.741-2.674-2.28-7.311-4.243-8.328l.258-.331c.834-1.092,1.774-2.711.387-3.128s-1.513,1.407-1.436,2.77c0,.172.026.331.04.483a2.042,2.042,0,0,0-1.45.708l-.215-.252c-1.125-1.324-3.187-3.432-3.813-1.84-.583,1.483,1.235,3.406,2.512,4.521l.079.07c-.857,3.485,2.876,6.332,4.9,7.563l.261.159c-2.78,3.277-4.5,9.417-4.5,9.417l7.785,1.39s5.163-4.452,4.5-8.635h.053c5.16-1.033,6.332-6.534,5.527-9.8l.093-.036a5.871,5.871,0,0,0,2.39-1.807C271.3,405.928,268.271,403.664,266.794,405.634Z" transform="translate(222.063 -61.62)" fill="none" opacity="0.1"/>
+    <path id="Path_116" data-name="Path 116" d="M252.281,410.632l-.9,2.664s-.506-.357-1.145-.92c-1.278-1.115-3.1-3.038-2.512-4.521.626-1.592,2.688.51,3.813,1.84C251.98,410.222,252.281,410.632,252.281,410.632Z" transform="translate(221.08 -64.374)" fill="#f1f5f9"/>
+    <path id="Path_117" data-name="Path 117" d="M265.366,406.372a12.878,12.878,0,0,1-.887,1.043,13.984,13.984,0,0,1-.162-1.4c-.076-1.364.069-3.174,1.436-2.77S266.187,405.279,265.366,406.372Z" transform="translate(209.915 -61.633)" fill="#f1f5f9"/>
+    <path id="Path_118" data-name="Path 118" d="M297.718,407.222c-.026.877-.113,1.576-.113,1.576a11.254,11.254,0,0,1-1.135-1.013c-1.029-1.069-2.168-2.717-.573-3.71C297.559,403.045,297.765,405.477,297.718,407.222Z" transform="translate(189.306 -62.063)" fill="#f1f5f9"/>
+    <path id="Path_119" data-name="Path 119" d="M310.61,411.379a5.871,5.871,0,0,1-2.4,1.8,6.681,6.681,0,0,1-.8.288l-1.072-1.506a10.934,10.934,0,0,1,.444-1.463,5.688,5.688,0,0,1,.755-1.42,1.919,1.919,0,0,1,3.073,2.3Z" transform="translate(181.79 -65.072)" fill="#f1f5f9"/>
+    <path id="Path_120" data-name="Path 120" d="M256.831,414.57c.453.526.755.937.755.937l-.9,2.664s-.506-.357-1.145-.92a5.213,5.213,0,0,1,1.026-2.34A3.1,3.1,0,0,1,256.831,414.57Z" transform="translate(215.776 -69.249)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_121" data-name="Path 121" d="M265.4,412.088a12.9,12.9,0,0,1-.887,1.043,13.967,13.967,0,0,1-.162-1.4,1.807,1.807,0,0,1,1.049.357Z" transform="translate(209.882 -67.349)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_122" data-name="Path 122" d="M263.826,423.624l-2.264.993a13.76,13.76,0,0,1-1.2-.682c-2.38-1.466-7.162-5.15-3.955-9.493s5.882,3.449,6.934,7.255C263.671,422.84,263.826,423.624,263.826,423.624Z" transform="translate(215.916 -68.308)" fill="#f1f5f9"/>
+    <path id="Path_123" data-name="Path 123" d="M299.22,414.643a1.844,1.844,0,0,1,1.248-.563c-.026.877-.113,1.575-.113,1.575a11.266,11.266,0,0,1-1.135-1.012Z" transform="translate(186.553 -68.921)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_124" data-name="Path 124" d="M308.213,417.581a6.692,6.692,0,0,1-.8.288l-1.072-1.506a10.935,10.935,0,0,1,.444-1.463,3.83,3.83,0,0,1,1.428,2.681Z" transform="translate(181.79 -69.47)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_125" data-name="Path 125" d="M285.8,427.814l-.381.066c-7.589,1.155-2.5-2.939-2.5-2.939s.331-.314.8-.831c.917-1.009,2.294-2.78,2.453-4.415.238-2.459.513-4.766,3.416-4.088C292.452,416.272,293,426.374,285.8,427.814Z" transform="translate(198.577 -69.862)" fill="#f1f5f9"/>
+    <rect id="Rectangle_60" data-name="Rectangle 60" width="14.5" height="3.813" transform="translate(469.747 376.844)" fill="#474157"/>
+    <rect id="Rectangle_61" data-name="Rectangle 61" width="18.946" height="13.306" transform="translate(467.443 364.452)" fill="#474157"/>
+    <rect id="Rectangle_62" data-name="Rectangle 62" width="14.5" height="3.813" transform="translate(469.608 376.844)" fill="#334155" opacity="0.1"/>
+    <rect id="Rectangle_63" data-name="Rectangle 63" width="18.946" height="13.306" transform="translate(467.384 364.455)" fill="#334155" opacity="0.1"/>
+    <rect id="Rectangle_64" data-name="Rectangle 64" width="14.5" height="3.813" transform="translate(470.7 376.844)" fill="#1e293b"/>
+    <path id="Path_126" data-name="Path 126" d="M273.539,439c.331,1.139.49,1.923.49,1.923l-2.264.993a13.763,13.763,0,0,1-1.2-.682A5.677,5.677,0,0,1,273.539,439Z" transform="translate(205.727 -85.593)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_127" data-name="Path 127" d="M285.8,445.244l-.381.066c-7.589,1.155-2.5-2.939-2.5-2.939s.331-.314.8-.831a5,5,0,0,1,2.081,3.7Z" transform="translate(198.577 -87.292)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_128" data-name="Path 128" d="M257.76,451.555s4.25-15.225,10.211-10.525-2.426,11.915-2.426,11.915Z" transform="translate(214.291 -86.348)" fill="#f1f5f9"/>
+    <circle id="Ellipse_44" data-name="Ellipse 44" cx="0.477" cy="0.477" r="0.477" transform="translate(473.719 348.045)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_45" data-name="Ellipse 45" cx="0.477" cy="0.477" r="0.477" transform="translate(473.679 350.273)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_46" data-name="Ellipse 46" cx="0.477" cy="0.477" r="0.477" transform="translate(487.504 348.482)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_47" data-name="Ellipse 47" cx="0.477" cy="0.477" r="0.477" transform="translate(476.38 359.884)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_48" data-name="Ellipse 48" cx="0.477" cy="0.477" r="0.477" transform="translate(486.511 352.179)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_49" data-name="Ellipse 49" cx="0.477" cy="0.477" r="0.477" transform="translate(481.586 357.104)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_50" data-name="Ellipse 50" cx="0.477" cy="0.477" r="0.477" transform="translate(475.347 348.998)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_51" data-name="Ellipse 51" cx="0.477" cy="0.477" r="0.477" transform="translate(486.194 349.915)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_52" data-name="Ellipse 52" cx="0.477" cy="0.477" r="0.477" transform="translate(484.565 353.609)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_53" data-name="Ellipse 53" cx="0.477" cy="0.477" r="0.477" transform="translate(479.557 359.527)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_54" data-name="Ellipse 54" cx="0.477" cy="0.477" r="0.477" transform="translate(478.525 357.184)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_55" data-name="Ellipse 55" cx="0.477" cy="0.477" r="0.477" transform="translate(476.062 351.901)" fill="#1e293b" opacity="0.1"/>
+    <rect id="Rectangle_65" data-name="Rectangle 65" width="14.5" height="1.393" transform="translate(470.7 376.844)" opacity="0.1"/>
+    <rect id="Rectangle_66" data-name="Rectangle 66" width="18.946" height="13.306" transform="translate(468.397 364.452)" fill="#1e293b"/>
+    <circle id="Ellipse_56" data-name="Ellipse 56" cx="0.477" cy="0.477" r="0.477" transform="translate(480.193 361.672)" fill="#1e293b" opacity="0.1"/>
+    <circle id="Ellipse_57" data-name="Ellipse 57" cx="0.477" cy="0.477" r="0.477" transform="translate(477.333 362.268)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_129" data-name="Path 129" d="M399.263,626s2.36,3.088-1.089,7.748-6.289,8.606-5.15,11.505c0,0,5.21-8.659,9.45-8.778S403.927,631.21,399.263,626Z" transform="translate(123.968 -210.699)" fill="#f1f5f9"/>
+    <path id="Path_130" data-name="Path 130" d="M399.525,626a3.8,3.8,0,0,1,.483.967c4.134,4.859,6.338,9.393,2.363,9.509-3.7.116-8.146,6.736-9.211,8.39.036.129.079.258.126.381,0,0,5.21-8.659,9.45-8.778S404.188,631.21,399.525,626Z" transform="translate(123.706 -210.699)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_131" data-name="Path 131" d="M424.553,636.492c0,1.086-.122,1.966-.271,1.966s-.271-.88-.271-1.966.152-.576.3-.576S424.553,635.4,424.553,636.492Z" transform="translate(103.067 -217.252)" fill="#475569"/>
+    <path id="Path_132" data-name="Path 132" d="M426.437,640.312c-.953.52-1.784.834-1.857.7s.642-.662,1.6-1.182.576-.142.662,0S427.393,639.793,426.437,640.312Z" transform="translate(102.689 -219.775)" fill="#475569"/>
+    <path id="Path_133" data-name="Path 133" d="M363.985,626s-2.36,3.088,1.089,7.748,6.289,8.606,5.147,11.505c0,0-5.206-8.659-9.446-8.778S359.321,631.21,363.985,626Z" transform="translate(146.771 -210.699)" fill="#f1f5f9"/>
+    <path id="Path_134" data-name="Path 134" d="M363.985,626a3.8,3.8,0,0,0-.483.967c-4.134,4.859-6.338,9.393-2.363,9.509,3.7.116,8.146,6.736,9.211,8.39a3.669,3.669,0,0,1-.129.381s-5.206-8.655-9.446-8.768S359.321,631.21,363.985,626Z" transform="translate(146.771 -210.699)" fill="#1e293b" opacity="0.1"/>
+    <path id="Path_135" data-name="Path 135" d="M361.44,636.492c0,1.086.122,1.966.271,1.966s.271-.88.271-1.966-.152-.576-.3-.576S361.44,635.4,361.44,636.492Z" transform="translate(144.927 -217.252)" fill="#475569"/>
+    <path id="Path_136" data-name="Path 136" d="M355.691,640.312c.953.52,1.784.834,1.857.7s-.642-.662-1.6-1.182-.576-.142-.662,0S354.734,639.793,355.691,640.312Z" transform="translate(149.17 -219.775)" fill="#475569"/>
+    <path id="Ellipse_58" data-name="Ellipse 58" d="M24.691,0C38.327,0,49.382,1.7,49.382,3.79S38.327,7.58,24.691,7.58,0,5.883,0,3.79,11.055,0,24.691,0Z" transform="translate(492.3 450.604)" fill="#f1f5f9" opacity="0.077"/>
+    <path id="Path_137" data-name="Path 137" d="M380.556,668.693l-.119.963-.166,1.364-.066.566-.169,1.364-.07.569-.165,1.36-1.873,15.49c-.169,1.383-2.429,2.459-5.153,2.459h-9.837c-2.727,0-4.965-1.076-5.15-2.459l-1.893-15.49-.165-1.36-.069-.569-.169-1.364-.066-.566-.165-1.364-.119-.963c-.1-.781,1.125-1.443,2.671-1.443H377.89C379.427,667.25,380.652,667.912,380.556,668.693Z" transform="translate(149.146 -238.296)" fill="#1e293b"/>
+    <path id="Path_138" data-name="Path 138" d="M280.188,623.15l-.165,1.36H255.176l-.165-1.36Z" transform="translate(249.394 -191.79)" fill="#334155"/>
+    <path id="Path_139" data-name="Path 139" d="M280.425,628.98l-.165,1.364H255.88l-.169-1.364Z" transform="translate(248.926 -195.69)" fill="#334155"/>
+    <path id="Path_140" data-name="Path 140" d="M280.668,634.81l-.165,1.364H256.6l-.165-1.364Z" transform="translate(248.444 -199.59)" fill="#334155"/>
+  </g>
+</svg>
diff --git a/web/dist/assets/index-Dzd_0sNX.js b/web/dist/assets/index-Dzd_0sNX.js
new file mode 100644
index 000000000..57ab705cb
--- /dev/null
+++ b/web/dist/assets/index-Dzd_0sNX.js
@@ -0,0 +1,6953 @@
+var lQ=Object.defineProperty;var cQ=(n,e,a)=>e in n?lQ(n,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[e]=a;var dQ=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports);var mt=(n,e,a)=>(cQ(n,typeof e!="symbol"?e+"":e,a),a);var qot=dQ((ks,bs)=>{(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))s(o);new MutationObserver(o=>{for(const r of o)if(r.type==="childList")for(const i of r.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&s(i)}).observe(document,{childList:!0,subtree:!0});function a(o){const r={};return o.integrity&&(r.integrity=o.integrity),o.referrerPolicy&&(r.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?r.credentials="include":o.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function s(o){if(o.ep)return;o.ep=!0;const r=a(o);fetch(o.href,r)}})();/**
+* @vue/shared v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/function tT(n,e){const a=new Set(n.split(","));return e?s=>a.has(s.toLowerCase()):s=>a.has(s)}const qa={},fc=[],Os=()=>{},uQ=()=>!1,PL=n=>n.charCodeAt(0)===111&&n.charCodeAt(1)===110&&(n.charCodeAt(2)>122||n.charCodeAt(2)<97),aT=n=>n.startsWith("onUpdate:"),Mn=Object.assign,nT=(n,e)=>{const a=n.indexOf(e);a>-1&&n.splice(a,1)},pQ=Object.prototype.hasOwnProperty,ka=(n,e)=>pQ.call(n,e),Tt=Array.isArray,mc=n=>nu(n)==="[object Map]",Pc=n=>nu(n)==="[object Set]",lO=n=>nu(n)==="[object Date]",Yt=n=>typeof n=="function",sn=n=>typeof n=="string",Br=n=>typeof n=="symbol",Pa=n=>n!==null&&typeof n=="object",ZF=n=>(Pa(n)||Yt(n))&&Yt(n.then)&&Yt(n.catch),KF=Object.prototype.toString,nu=n=>KF.call(n),hQ=n=>nu(n).slice(8,-1),XF=n=>nu(n)==="[object Object]",sT=n=>sn(n)&&n!=="NaN"&&n[0]!=="-"&&""+parseInt(n,10)===n,bd=tT(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),DL=n=>{const e=Object.create(null);return a=>e[a]||(e[a]=n(a))},fQ=/-(\w)/g,Io=DL(n=>n.replace(fQ,(e,a)=>a?a.toUpperCase():"")),mQ=/\B([A-Z])/g,Ul=DL(n=>n.replace(mQ,"-$1").toLowerCase()),RL=DL(n=>n.charAt(0).toUpperCase()+n.slice(1)),R$=DL(n=>n?`on${RL(n)}`:""),qr=(n,e)=>!Object.is(n,e),A1=(n,e)=>{for(let a=0;a<n.length;a++)n[a](e)},lL=(n,e,a)=>{Object.defineProperty(n,e,{configurable:!0,enumerable:!1,value:a})},Od=n=>{const e=parseFloat(n);return isNaN(e)?n:e},vQ=n=>{const e=sn(n)?Number(n):NaN;return isNaN(e)?n:e};let cO;const YF=()=>cO||(cO=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function oT(n){if(Tt(n)){const e={};for(let a=0;a<n.length;a++){const s=n[a],o=sn(s)?kQ(s):oT(s);if(o)for(const r in o)e[r]=o[r]}return e}else if(sn(n)||Pa(n))return n}const yQ=/;(?![^(]*\))/g,_Q=/:([^]+)/,gQ=/\/\*[^]*?\*\//g;function kQ(n){const e={};return n.replace(gQ,"").split(yQ).forEach(a=>{if(a){const s=a.split(_Q);s.length>1&&(e[s[0].trim()]=s[1].trim())}}),e}function F(n){let e="";if(sn(n))e=n;else if(Tt(n))for(let a=0;a<n.length;a++){const s=F(n[a]);s&&(e+=s+" ")}else if(Pa(n))for(const a in n)n[a]&&(e+=a+" ");return e.trim()}const bQ="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",wQ=tT(bQ);function QF(n){return!!n||n===""}function xQ(n,e){if(n.length!==e.length)return!1;let a=!0;for(let s=0;a&&s<n.length;s++)a=Rl(n[s],e[s]);return a}function Rl(n,e){if(n===e)return!0;let a=lO(n),s=lO(e);if(a||s)return a&&s?n.getTime()===e.getTime():!1;if(a=Br(n),s=Br(e),a||s)return n===e;if(a=Tt(n),s=Tt(e),a||s)return a&&s?xQ(n,e):!1;if(a=Pa(n),s=Pa(e),a||s){if(!a||!s)return!1;const o=Object.keys(n).length,r=Object.keys(e).length;if(o!==r)return!1;for(const i in n){const u=n.hasOwnProperty(i),h=e.hasOwnProperty(i);if(u&&!h||!u&&h||!Rl(n[i],e[i]))return!1}}return String(n)===String(e)}function rT(n,e){return n.findIndex(a=>Rl(a,e))}const _=n=>sn(n)?n:n==null?"":Tt(n)||Pa(n)&&(n.toString===KF||!Yt(n.toString))?JSON.stringify(n,JF,2):String(n),JF=(n,e)=>e&&e.__v_isRef?JF(n,e.value):mc(e)?{[`Map(${e.size})`]:[...e.entries()].reduce((a,[s,o],r)=>(a[O$(s,r)+" =>"]=o,a),{})}:Pc(e)?{[`Set(${e.size})`]:[...e.values()].map(a=>O$(a))}:Br(e)?O$(e):Pa(e)&&!Tt(e)&&!XF(e)?String(e):e,O$=(n,e="")=>{var a;return Br(n)?`Symbol(${(a=n.description)!=null?a:e})`:n};/**
+* @vue/reactivity v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/let ys;class ej{constructor(e=!1){this.detached=e,this._active=!0,this.effects=[],this.cleanups=[],this.parent=ys,!e&&ys&&(this.index=(ys.scopes||(ys.scopes=[])).push(this)-1)}get active(){return this._active}run(e){if(this._active){const a=ys;try{return ys=this,e()}finally{ys=a}}}on(){ys=this}off(){ys=this.parent}stop(e){if(this._active){let a,s;for(a=0,s=this.effects.length;a<s;a++)this.effects[a].stop();for(a=0,s=this.cleanups.length;a<s;a++)this.cleanups[a]();if(this.scopes)for(a=0,s=this.scopes.length;a<s;a++)this.scopes[a].stop(!0);if(!this.detached&&this.parent&&!e){const o=this.parent.scopes.pop();o&&o!==this&&(this.parent.scopes[this.index]=o,o.index=this.index)}this.parent=void 0,this._active=!1}}}function iT(n){return new ej(n)}function MQ(n,e=ys){e&&e.active&&e.effects.push(n)}function tj(){return ys}function CQ(n){ys&&ys.cleanups.push(n)}let Tl;class lT{constructor(e,a,s,o){this.fn=e,this.trigger=a,this.scheduler=s,this.active=!0,this.deps=[],this._dirtyLevel=4,this._trackId=0,this._runnings=0,this._shouldSchedule=!1,this._depsLength=0,MQ(this,o)}get dirty(){if(this._dirtyLevel===2||this._dirtyLevel===3){this._dirtyLevel=1,Fl();for(let e=0;e<this._depsLength;e++){const a=this.deps[e];if(a.computed&&(SQ(a.computed),this._dirtyLevel>=4))break}this._dirtyLevel===1&&(this._dirtyLevel=0),jl()}return this._dirtyLevel>=4}set dirty(e){this._dirtyLevel=e?4:0}run(){if(this._dirtyLevel=0,!this.active)return this.fn();let e=Hr,a=Tl;try{return Hr=!0,Tl=this,this._runnings++,dO(this),this.fn()}finally{uO(this),this._runnings--,Tl=a,Hr=e}}stop(){var e;this.active&&(dO(this),uO(this),(e=this.onStop)==null||e.call(this),this.active=!1)}}function SQ(n){return n.value}function dO(n){n._trackId++,n._depsLength=0}function uO(n){if(n.deps.length>n._depsLength){for(let e=n._depsLength;e<n.deps.length;e++)aj(n.deps[e],n);n.deps.length=n._depsLength}}function aj(n,e){const a=n.get(e);a!==void 0&&e._trackId!==a&&(n.delete(e),n.size===0&&n.cleanup())}let Hr=!0,OA=0;const nj=[];function Fl(){nj.push(Hr),Hr=!1}function jl(){const n=nj.pop();Hr=n===void 0?!0:n}function cT(){OA++}function dT(){for(OA--;!OA&&VA.length;)VA.shift()()}function sj(n,e,a){if(e.get(n)!==n._trackId){e.set(n,n._trackId);const s=n.deps[n._depsLength];s!==e?(s&&aj(s,n),n.deps[n._depsLength++]=e):n._depsLength++}}const VA=[];function oj(n,e,a){cT();for(const s of n.keys()){let o;s._dirtyLevel<e&&(o??(o=n.get(s)===s._trackId))&&(s._shouldSchedule||(s._shouldSchedule=s._dirtyLevel===0),s._dirtyLevel=e),s._shouldSchedule&&(o??(o=n.get(s)===s._trackId))&&(s.trigger(),(!s._runnings||s.allowRecurse)&&s._dirtyLevel!==2&&(s._shouldSchedule=!1,s.scheduler&&VA.push(s.scheduler)))}dT()}const rj=(n,e)=>{const a=new Map;return a.cleanup=n,a.computed=e,a},cL=new WeakMap,Pl=Symbol(""),UA=Symbol("");function os(n,e,a){if(Hr&&Tl){let s=cL.get(n);s||cL.set(n,s=new Map);let o=s.get(a);o||s.set(a,o=rj(()=>s.delete(a))),sj(Tl,o)}}function er(n,e,a,s,o,r){const i=cL.get(n);if(!i)return;let u=[];if(e==="clear")u=[...i.values()];else if(a==="length"&&Tt(n)){const h=Number(s);i.forEach((m,p)=>{(p==="length"||!Br(p)&&p>=h)&&u.push(m)})}else switch(a!==void 0&&u.push(i.get(a)),e){case"add":Tt(n)?sT(a)&&u.push(i.get("length")):(u.push(i.get(Pl)),mc(n)&&u.push(i.get(UA)));break;case"delete":Tt(n)||(u.push(i.get(Pl)),mc(n)&&u.push(i.get(UA)));break;case"set":mc(n)&&u.push(i.get(Pl));break}cT();for(const h of u)h&&oj(h,4);dT()}function IQ(n,e){var a;return(a=cL.get(n))==null?void 0:a.get(e)}const LQ=tT("__proto__,__v_isRef,__isVue"),ij=new Set(Object.getOwnPropertyNames(Symbol).filter(n=>n!=="arguments"&&n!=="caller").map(n=>Symbol[n]).filter(Br)),pO=$Q();function $Q(){const n={};return["includes","indexOf","lastIndexOf"].forEach(e=>{n[e]=function(...a){const s=pa(this);for(let r=0,i=this.length;r<i;r++)os(s,"get",r+"");const o=s[e](...a);return o===-1||o===!1?s[e](...a.map(pa)):o}}),["push","pop","shift","unshift","splice"].forEach(e=>{n[e]=function(...a){Fl(),cT();const s=pa(this)[e].apply(this,a);return dT(),jl(),s}}),n}function AQ(n){const e=pa(this);return os(e,"has",n),e.hasOwnProperty(n)}class lj{constructor(e=!1,a=!1){this._isReadonly=e,this._isShallow=a}get(e,a,s){const o=this._isReadonly,r=this._isShallow;if(a==="__v_isReactive")return!o;if(a==="__v_isReadonly")return o;if(a==="__v_isShallow")return r;if(a==="__v_raw")return s===(o?r?zQ:pj:r?uj:dj).get(e)||Object.getPrototypeOf(e)===Object.getPrototypeOf(s)?e:void 0;const i=Tt(e);if(!o){if(i&&ka(pO,a))return Reflect.get(pO,a,s);if(a==="hasOwnProperty")return AQ}const u=Reflect.get(e,a,s);return(Br(a)?ij.has(a):LQ(a))||(o||os(e,"get",a),r)?u:on(u)?i&&sT(a)?u:u.value:Pa(u)?o?fj(u):gn(u):u}}class cj extends lj{constructor(e=!1){super(!1,e)}set(e,a,s,o){let r=e[a];if(!this._isShallow){const h=gc(r);if(!dL(s)&&!gc(s)&&(r=pa(r),s=pa(s)),!Tt(e)&&on(r)&&!on(s))return h?!1:(r.value=s,!0)}const i=Tt(e)&&sT(a)?Number(a)<e.length:ka(e,a),u=Reflect.set(e,a,s,o);return e===pa(o)&&(i?qr(s,r)&&er(e,"set",a,s):er(e,"add",a,s)),u}deleteProperty(e,a){const s=ka(e,a);e[a];const o=Reflect.deleteProperty(e,a);return o&&s&&er(e,"delete",a,void 0),o}has(e,a){const s=Reflect.has(e,a);return(!Br(a)||!ij.has(a))&&os(e,"has",a),s}ownKeys(e){return os(e,"iterate",Tt(e)?"length":Pl),Reflect.ownKeys(e)}}class EQ extends lj{constructor(e=!1){super(!0,e)}set(e,a){return!0}deleteProperty(e,a){return!0}}const TQ=new cj,PQ=new EQ,DQ=new cj(!0),uT=n=>n,OL=n=>Reflect.getPrototypeOf(n);function c1(n,e,a=!1,s=!1){n=n.__v_raw;const o=pa(n),r=pa(e);a||(qr(e,r)&&os(o,"get",e),os(o,"get",r));const{has:i}=OL(o),u=s?uT:a?fT:Vd;if(i.call(o,e))return u(n.get(e));if(i.call(o,r))return u(n.get(r));n!==o&&n.get(e)}function d1(n,e=!1){const a=this.__v_raw,s=pa(a),o=pa(n);return e||(qr(n,o)&&os(s,"has",n),os(s,"has",o)),n===o?a.has(n):a.has(n)||a.has(o)}function u1(n,e=!1){return n=n.__v_raw,!e&&os(pa(n),"iterate",Pl),Reflect.get(n,"size",n)}function hO(n){n=pa(n);const e=pa(this);return OL(e).has.call(e,n)||(e.add(n),er(e,"add",n,n)),this}function fO(n,e){e=pa(e);const a=pa(this),{has:s,get:o}=OL(a);let r=s.call(a,n);r||(n=pa(n),r=s.call(a,n));const i=o.call(a,n);return a.set(n,e),r?qr(e,i)&&er(a,"set",n,e):er(a,"add",n,e),this}function mO(n){const e=pa(this),{has:a,get:s}=OL(e);let o=a.call(e,n);o||(n=pa(n),o=a.call(e,n)),s&&s.call(e,n);const r=e.delete(n);return o&&er(e,"delete",n,void 0),r}function vO(){const n=pa(this),e=n.size!==0,a=n.clear();return e&&er(n,"clear",void 0,void 0),a}function p1(n,e){return function(s,o){const r=this,i=r.__v_raw,u=pa(i),h=e?uT:n?fT:Vd;return!n&&os(u,"iterate",Pl),i.forEach((m,p)=>s.call(o,h(m),h(p),r))}}function h1(n,e,a){return function(...s){const o=this.__v_raw,r=pa(o),i=mc(r),u=n==="entries"||n===Symbol.iterator&&i,h=n==="keys"&&i,m=o[n](...s),p=a?uT:e?fT:Vd;return!e&&os(r,"iterate",h?UA:Pl),{next(){const{value:b,done:x}=m.next();return x?{value:b,done:x}:{value:u?[p(b[0]),p(b[1])]:p(b),done:x}},[Symbol.iterator](){return this}}}}function br(n){return function(...e){return n==="delete"?!1:n==="clear"?void 0:this}}function RQ(){const n={get(r){return c1(this,r)},get size(){return u1(this)},has:d1,add:hO,set:fO,delete:mO,clear:vO,forEach:p1(!1,!1)},e={get(r){return c1(this,r,!1,!0)},get size(){return u1(this)},has:d1,add:hO,set:fO,delete:mO,clear:vO,forEach:p1(!1,!0)},a={get(r){return c1(this,r,!0)},get size(){return u1(this,!0)},has(r){return d1.call(this,r,!0)},add:br("add"),set:br("set"),delete:br("delete"),clear:br("clear"),forEach:p1(!0,!1)},s={get(r){return c1(this,r,!0,!0)},get size(){return u1(this,!0)},has(r){return d1.call(this,r,!0)},add:br("add"),set:br("set"),delete:br("delete"),clear:br("clear"),forEach:p1(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(r=>{n[r]=h1(r,!1,!1),a[r]=h1(r,!0,!1),e[r]=h1(r,!1,!0),s[r]=h1(r,!0,!0)}),[n,a,e,s]}const[OQ,VQ,UQ,FQ]=RQ();function pT(n,e){const a=e?n?FQ:UQ:n?VQ:OQ;return(s,o,r)=>o==="__v_isReactive"?!n:o==="__v_isReadonly"?n:o==="__v_raw"?s:Reflect.get(ka(a,o)&&o in s?a:s,o,r)}const jQ={get:pT(!1,!1)},HQ={get:pT(!1,!0)},NQ={get:pT(!0,!1)},dj=new WeakMap,uj=new WeakMap,pj=new WeakMap,zQ=new WeakMap;function BQ(n){switch(n){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function qQ(n){return n.__v_skip||!Object.isExtensible(n)?0:BQ(hQ(n))}function gn(n){return gc(n)?n:hT(n,!1,TQ,jQ,dj)}function hj(n){return hT(n,!1,DQ,HQ,uj)}function fj(n){return hT(n,!0,PQ,NQ,pj)}function hT(n,e,a,s,o){if(!Pa(n)||n.__v_raw&&!(e&&n.__v_isReactive))return n;const r=o.get(n);if(r)return r;const i=qQ(n);if(i===0)return n;const u=new Proxy(n,i===2?s:a);return o.set(n,u),u}function tr(n){return gc(n)?tr(n.__v_raw):!!(n&&n.__v_isReactive)}function gc(n){return!!(n&&n.__v_isReadonly)}function dL(n){return!!(n&&n.__v_isShallow)}function mj(n){return tr(n)||gc(n)}function pa(n){const e=n&&n.__v_raw;return e?pa(e):n}function VL(n){return Object.isExtensible(n)&&lL(n,"__v_skip",!0),n}const Vd=n=>Pa(n)?gn(n):n,fT=n=>Pa(n)?fj(n):n;class vj{constructor(e,a,s,o){this.getter=e,this._setter=a,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this.effect=new lT(()=>e(this._value),()=>E1(this,this.effect._dirtyLevel===2?2:3)),this.effect.computed=this,this.effect.active=this._cacheable=!o,this.__v_isReadonly=s}get value(){const e=pa(this);return(!e._cacheable||e.effect.dirty)&&qr(e._value,e._value=e.effect.run())&&E1(e,4),yj(e),e.effect._dirtyLevel>=2&&E1(e,2),e._value}set value(e){this._setter(e)}get _dirty(){return this.effect.dirty}set _dirty(e){this.effect.dirty=e}}function WQ(n,e,a=!1){let s,o;const r=Yt(n);return r?(s=n,o=Os):(s=n.get,o=n.set),new vj(s,o,r||!o,a)}function yj(n){var e;Hr&&Tl&&(n=pa(n),sj(Tl,(e=n.dep)!=null?e:n.dep=rj(()=>n.dep=void 0,n instanceof vj?n:void 0)))}function E1(n,e=4,a){n=pa(n);const s=n.dep;s&&oj(s,e)}function on(n){return!!(n&&n.__v_isRef===!0)}function O(n){return _j(n,!1)}function UL(n){return _j(n,!0)}function _j(n,e){return on(n)?n:new GQ(n,e)}class GQ{constructor(e,a){this.__v_isShallow=a,this.dep=void 0,this.__v_isRef=!0,this._rawValue=a?e:pa(e),this._value=a?e:Vd(e)}get value(){return yj(this),this._value}set value(e){const a=this.__v_isShallow||dL(e)||gc(e);e=a?e:pa(e),qr(e,this._rawValue)&&(this._rawValue=e,this._value=a?e:Vd(e),E1(this,4))}}function t(n){return on(n)?n.value:n}const ZQ={get:(n,e,a)=>t(Reflect.get(n,e,a)),set:(n,e,a,s)=>{const o=n[e];return on(o)&&!on(a)?(o.value=a,!0):Reflect.set(n,e,a,s)}};function gj(n){return tr(n)?n:new Proxy(n,ZQ)}function KQ(n){const e=Tt(n)?new Array(n.length):{};for(const a in n)e[a]=kj(n,a);return e}class XQ{constructor(e,a,s){this._object=e,this._key=a,this._defaultValue=s,this.__v_isRef=!0}get value(){const e=this._object[this._key];return e===void 0?this._defaultValue:e}set value(e){this._object[this._key]=e}get dep(){return IQ(pa(this._object),this._key)}}class YQ{constructor(e){this._getter=e,this.__v_isRef=!0,this.__v_isReadonly=!0}get value(){return this._getter()}}function An(n,e,a){return on(n)?n:Yt(n)?new YQ(n):Pa(n)&&arguments.length>1?kj(n,e,a):O(n)}function kj(n,e,a){const s=n[e];return on(s)?s:new XQ(n,e,a)}/**
+* @vue/runtime-core v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/function Nr(n,e,a,s){try{return s?n(...s):n()}catch(o){FL(o,e,a)}}function Vs(n,e,a,s){if(Yt(n)){const r=Nr(n,e,a,s);return r&&ZF(r)&&r.catch(i=>{FL(i,e,a)}),r}const o=[];for(let r=0;r<n.length;r++)o.push(Vs(n[r],e,a,s));return o}function FL(n,e,a,s=!0){const o=e?e.vnode:null;if(e){let r=e.parent;const i=e.proxy,u=`https://vuejs.org/error-reference/#runtime-${a}`;for(;r;){const m=r.ec;if(m){for(let p=0;p<m.length;p++)if(m[p](n,i,u)===!1)return}r=r.parent}const h=e.appContext.config.errorHandler;if(h){Nr(h,null,10,[n,i,u]);return}}QQ(n,a,o,s)}function QQ(n,e,a,s=!0){console.error(n)}let Ud=!1,FA=!1;const Hn=[];let wo=0;const vc=[];let Pr=null,xl=0;const bj=Promise.resolve();let mT=null;function En(n){const e=mT||bj;return n?e.then(this?n.bind(this):n):e}function JQ(n){let e=wo+1,a=Hn.length;for(;e<a;){const s=e+a>>>1,o=Hn[s],r=Fd(o);r<n||r===n&&o.pre?e=s+1:a=s}return e}function vT(n){(!Hn.length||!Hn.includes(n,Ud&&n.allowRecurse?wo+1:wo))&&(n.id==null?Hn.push(n):Hn.splice(JQ(n.id),0,n),wj())}function wj(){!Ud&&!FA&&(FA=!0,mT=bj.then(Mj))}function eJ(n){const e=Hn.indexOf(n);e>wo&&Hn.splice(e,1)}function tJ(n){Tt(n)?vc.push(...n):(!Pr||!Pr.includes(n,n.allowRecurse?xl+1:xl))&&vc.push(n),wj()}function yO(n,e,a=Ud?wo+1:0){for(;a<Hn.length;a++){const s=Hn[a];if(s&&s.pre){if(n&&s.id!==n.uid)continue;Hn.splice(a,1),a--,s()}}}function xj(n){if(vc.length){const e=[...new Set(vc)].sort((a,s)=>Fd(a)-Fd(s));if(vc.length=0,Pr){Pr.push(...e);return}for(Pr=e,xl=0;xl<Pr.length;xl++)Pr[xl]();Pr=null,xl=0}}const Fd=n=>n.id==null?1/0:n.id,aJ=(n,e)=>{const a=Fd(n)-Fd(e);if(a===0){if(n.pre&&!e.pre)return-1;if(e.pre&&!n.pre)return 1}return a};function Mj(n){FA=!1,Ud=!0,Hn.sort(aJ);try{for(wo=0;wo<Hn.length;wo++){const e=Hn[wo];e&&e.active!==!1&&Nr(e,null,14)}}finally{wo=0,Hn.length=0,xj(),Ud=!1,mT=null,(Hn.length||vc.length)&&Mj()}}function nJ(n,e,...a){if(n.isUnmounted)return;const s=n.vnode.props||qa;let o=a;const r=e.startsWith("update:"),i=r&&e.slice(7);if(i&&i in s){const p=`${i==="modelValue"?"model":i}Modifiers`,{number:b,trim:x}=s[p]||qa;x&&(o=a.map(w=>sn(w)?w.trim():w)),b&&(o=a.map(Od))}let u,h=s[u=R$(e)]||s[u=R$(Io(e))];!h&&r&&(h=s[u=R$(Ul(e))]),h&&Vs(h,n,6,o);const m=s[u+"Once"];if(m){if(!n.emitted)n.emitted={};else if(n.emitted[u])return;n.emitted[u]=!0,Vs(m,n,6,o)}}function Cj(n,e,a=!1){const s=e.emitsCache,o=s.get(n);if(o!==void 0)return o;const r=n.emits;let i={},u=!1;if(!Yt(n)){const h=m=>{const p=Cj(m,e,!0);p&&(u=!0,Mn(i,p))};!a&&e.mixins.length&&e.mixins.forEach(h),n.extends&&h(n.extends),n.mixins&&n.mixins.forEach(h)}return!r&&!u?(Pa(n)&&s.set(n,null),null):(Tt(r)?r.forEach(h=>i[h]=null):Mn(i,r),Pa(n)&&s.set(n,i),i)}function jL(n,e){return!n||!PL(e)?!1:(e=e.slice(2).replace(/Once$/,""),ka(n,e[0].toLowerCase()+e.slice(1))||ka(n,Ul(e))||ka(n,e))}let vn=null,Sj=null;function uL(n){const e=vn;return vn=n,Sj=n&&n.type.__scopeId||null,e}function f(n,e=vn,a){if(!e||n._n)return n;const s=(...o)=>{s._d&&EO(-1);const r=uL(e);let i;try{i=n(...o)}finally{uL(r),s._d&&EO(1)}return i};return s._n=!0,s._c=!0,s._d=!0,s}function V$(n){const{type:e,vnode:a,proxy:s,withProxy:o,props:r,propsOptions:[i],slots:u,attrs:h,emit:m,render:p,renderCache:b,data:x,setupState:w,ctx:$,inheritAttrs:D}=n;let V,R;const E=uL(n);try{if(a.shapeFlag&4){const S=o||s,C=S;V=ko(p.call(C,S,b,r,w,x,$)),R=h}else{const S=e;V=ko(S.length>1?S(r,{attrs:h,slots:u,emit:m}):S(r,null)),R=e.props?h:sJ(h)}}catch(S){Cd.length=0,FL(S,n,1),V=l(Us)}let P=V;if(R&&D!==!1){const S=Object.keys(R),{shapeFlag:C}=P;S.length&&C&7&&(i&&S.some(aT)&&(R=oJ(R,i)),P=nr(P,R))}return a.dirs&&(P=nr(P),P.dirs=P.dirs?P.dirs.concat(a.dirs):a.dirs),a.transition&&(P.transition=a.transition),V=P,uL(E),V}const sJ=n=>{let e;for(const a in n)(a==="class"||a==="style"||PL(a))&&((e||(e={}))[a]=n[a]);return e},oJ=(n,e)=>{const a={};for(const s in n)(!aT(s)||!(s.slice(9)in e))&&(a[s]=n[s]);return a};function rJ(n,e,a){const{props:s,children:o,component:r}=n,{props:i,children:u,patchFlag:h}=e,m=r.emitsOptions;if(e.dirs||e.transition)return!0;if(a&&h>=0){if(h&1024)return!0;if(h&16)return s?_O(s,i,m):!!i;if(h&8){const p=e.dynamicProps;for(let b=0;b<p.length;b++){const x=p[b];if(i[x]!==s[x]&&!jL(m,x))return!0}}}else return(o||u)&&(!u||!u.$stable)?!0:s===i?!1:s?i?_O(s,i,m):!0:!!i;return!1}function _O(n,e,a){const s=Object.keys(e);if(s.length!==Object.keys(n).length)return!0;for(let o=0;o<s.length;o++){const r=s[o];if(e[r]!==n[r]&&!jL(a,r))return!0}return!1}function iJ({vnode:n,parent:e},a){for(;e;){const s=e.subTree;if(s.suspense&&s.suspense.activeBranch===n&&(s.el=n.el),s===n)(n=e.vnode).el=a,e=e.parent;else break}}const yT="components";function Qt(n,e){return Lj(yT,n,!0,e)||n}const Ij=Symbol.for("v-ndc");function Da(n){return sn(n)?Lj(yT,n,!1)||n:n||Ij}function Lj(n,e,a=!0,s=!1){const o=vn||$n;if(o){const r=o.type;if(n===yT){const u=aee(r,!1);if(u&&(u===e||u===Io(e)||u===RL(Io(e))))return r}const i=gO(o[n]||r[n],e)||gO(o.appContext[n],e);return!i&&s?r:i}}function gO(n,e){return n&&(n[e]||n[Io(e)]||n[RL(Io(e))])}const lJ=n=>n.__isSuspense;function cJ(n,e){e&&e.pendingBranch?Tt(n)?e.effects.push(...n):e.effects.push(n):tJ(n)}const dJ=Symbol.for("v-scx"),uJ=()=>xt(dJ);function yn(n,e){return _T(n,null,e)}const f1={};function dt(n,e,a){return _T(n,e,a)}function _T(n,e,{immediate:a,deep:s,flush:o,once:r,onTrack:i,onTrigger:u}=qa){if(e&&r){const M=e;e=(...g)=>{M(...g),C()}}const h=$n,m=M=>s===!0?M:Ll(M,s===!1?1:void 0);let p,b=!1,x=!1;if(on(n)?(p=()=>n.value,b=dL(n)):tr(n)?(p=()=>m(n),b=!0):Tt(n)?(x=!0,b=n.some(M=>tr(M)||dL(M)),p=()=>n.map(M=>{if(on(M))return M.value;if(tr(M))return m(M);if(Yt(M))return Nr(M,h,2)})):Yt(n)?e?p=()=>Nr(n,h,2):p=()=>(w&&w(),Vs(n,h,3,[$])):p=Os,e&&s){const M=p;p=()=>Ll(M())}let w,$=M=>{w=P.onStop=()=>{Nr(M,h,4),w=P.onStop=void 0}},D;if(BL)if($=Os,e?a&&Vs(e,h,3,[p(),x?[]:void 0,$]):p(),o==="sync"){const M=uJ();D=M.__watcherHandles||(M.__watcherHandles=[])}else return Os;let V=x?new Array(n.length).fill(f1):f1;const R=()=>{if(!(!P.active||!P.dirty))if(e){const M=P.run();(s||b||(x?M.some((g,v)=>qr(g,V[v])):qr(M,V)))&&(w&&w(),Vs(e,h,3,[M,V===f1?void 0:x&&V[0]===f1?[]:V,$]),V=M)}else P.run()};R.allowRecurse=!!e;let E;o==="sync"?E=R:o==="post"?E=()=>as(R,h&&h.suspense):(R.pre=!0,h&&(R.id=h.uid),E=()=>vT(R));const P=new lT(p,Os,E),S=tj(),C=()=>{P.stop(),S&&nT(S.effects,P)};return e?a?R():V=P.run():o==="post"?as(P.run.bind(P),h&&h.suspense):P.run(),D&&D.push(C),C}function pJ(n,e,a){const s=this.proxy,o=sn(n)?n.includes(".")?$j(s,n):()=>s[n]:n.bind(s,s);let r;Yt(e)?r=e:(r=e.handler,a=e);const i=ou(this),u=_T(o,r.bind(s),a);return i(),u}function $j(n,e){const a=e.split(".");return()=>{let s=n;for(let o=0;o<a.length&&s;o++)s=s[a[o]];return s}}function Ll(n,e,a=0,s){if(!Pa(n)||n.__v_skip)return n;if(e&&e>0){if(a>=e)return n;a++}if(s=s||new Set,s.has(n))return n;if(s.add(n),on(n))Ll(n.value,e,a,s);else if(Tt(n))for(let o=0;o<n.length;o++)Ll(n[o],e,a,s);else if(Pc(n)||mc(n))n.forEach(o=>{Ll(o,e,a,s)});else if(XF(n))for(const o in n)Ll(n[o],e,a,s);return n}function rs(n,e){if(vn===null)return n;const a=qL(vn)||vn.proxy,s=n.dirs||(n.dirs=[]);for(let o=0;o<e.length;o++){let[r,i,u,h=qa]=e[o];r&&(Yt(r)&&(r={mounted:r,updated:r}),r.deep&&Ll(i),s.push({dir:r,instance:a,value:i,oldValue:void 0,arg:u,modifiers:h}))}return n}function ui(n,e,a,s){const o=n.dirs,r=e&&e.dirs;for(let i=0;i<o.length;i++){const u=o[i];r&&(u.oldValue=r[i].value);let h=u.dir[s];h&&(Fl(),Vs(h,a,8,[n.el,u,n,e]),jl())}}const Dr=Symbol("_leaveCb"),m1=Symbol("_enterCb");function hJ(){const n={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return at(()=>{n.isMounted=!0}),gT(()=>{n.isUnmounting=!0}),n}const Ts=[Function,Array],Aj={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Ts,onEnter:Ts,onAfterEnter:Ts,onEnterCancelled:Ts,onBeforeLeave:Ts,onLeave:Ts,onAfterLeave:Ts,onLeaveCancelled:Ts,onBeforeAppear:Ts,onAppear:Ts,onAfterAppear:Ts,onAppearCancelled:Ts},fJ={name:"BaseTransition",props:Aj,setup(n,{slots:e}){const a=Wr(),s=hJ();return()=>{const o=e.default&&Tj(e.default(),!0);if(!o||!o.length)return;let r=o[0];if(o.length>1){for(const x of o)if(x.type!==Us){r=x;break}}const i=pa(n),{mode:u}=i;if(s.isLeaving)return U$(r);const h=kO(r);if(!h)return U$(r);const m=jA(h,i,s,a);HA(h,m);const p=a.subTree,b=p&&kO(p);if(b&&b.type!==Us&&!Ml(h,b)){const x=jA(b,i,s,a);if(HA(b,x),u==="out-in")return s.isLeaving=!0,x.afterLeave=()=>{s.isLeaving=!1,a.update.active!==!1&&(a.effect.dirty=!0,a.update())},U$(r);u==="in-out"&&h.type!==Us&&(x.delayLeave=(w,$,D)=>{const V=Ej(s,b);V[String(b.key)]=b,w[Dr]=()=>{$(),w[Dr]=void 0,delete m.delayedLeave},m.delayedLeave=D})}return r}}},mJ=fJ;function Ej(n,e){const{leavingVNodes:a}=n;let s=a.get(e.type);return s||(s=Object.create(null),a.set(e.type,s)),s}function jA(n,e,a,s){const{appear:o,mode:r,persisted:i=!1,onBeforeEnter:u,onEnter:h,onAfterEnter:m,onEnterCancelled:p,onBeforeLeave:b,onLeave:x,onAfterLeave:w,onLeaveCancelled:$,onBeforeAppear:D,onAppear:V,onAfterAppear:R,onAppearCancelled:E}=e,P=String(n.key),S=Ej(a,n),C=(v,T)=>{v&&Vs(v,s,9,T)},M=(v,T)=>{const j=T[1];C(v,T),Tt(v)?v.every(B=>B.length<=1)&&j():v.length<=1&&j()},g={mode:r,persisted:i,beforeEnter(v){let T=u;if(!a.isMounted)if(o)T=D||u;else return;v[Dr]&&v[Dr](!0);const j=S[P];j&&Ml(n,j)&&j.el[Dr]&&j.el[Dr](),C(T,[v])},enter(v){let T=h,j=m,B=p;if(!a.isMounted)if(o)T=V||h,j=R||m,B=E||p;else return;let oe=!1;const be=v[m1]=$e=>{oe||(oe=!0,$e?C(B,[v]):C(j,[v]),g.delayedLeave&&g.delayedLeave(),v[m1]=void 0)};T?M(T,[v,be]):be()},leave(v,T){const j=String(n.key);if(v[m1]&&v[m1](!0),a.isUnmounting)return T();C(b,[v]);let B=!1;const oe=v[Dr]=be=>{B||(B=!0,T(),be?C($,[v]):C(w,[v]),v[Dr]=void 0,S[j]===n&&delete S[j])};S[j]=n,x?M(x,[v,oe]):oe()},clone(v){return jA(v,e,a,s)}};return g}function U$(n){if(HL(n))return n=nr(n),n.children=null,n}function kO(n){return HL(n)?n.children?n.children[0]:void 0:n}function HA(n,e){n.shapeFlag&6&&n.component?HA(n.component.subTree,e):n.shapeFlag&128?(n.ssContent.transition=e.clone(n.ssContent),n.ssFallback.transition=e.clone(n.ssFallback)):n.transition=e}function Tj(n,e=!1,a){let s=[],o=0;for(let r=0;r<n.length;r++){let i=n[r];const u=a==null?i.key:String(a)+String(i.key!=null?i.key:r);i.type===ke?(i.patchFlag&128&&o++,s=s.concat(Tj(i.children,e,u))):(e||i.type!==Us)&&s.push(u!=null?nr(i,{key:u}):i)}if(o>1)for(let r=0;r<s.length;r++)s[r].patchFlag=-2;return s}/*! #__NO_SIDE_EFFECTS__ */function Ce(n,e){return Yt(n)?Mn({name:n.name},e,{setup:n}):n}const wd=n=>!!n.type.__asyncLoader,HL=n=>n.type.__isKeepAlive;function vJ(n,e){Pj(n,"a",e)}function yJ(n,e){Pj(n,"da",e)}function Pj(n,e,a=$n){const s=n.__wdc||(n.__wdc=()=>{let o=a;for(;o;){if(o.isDeactivated)return;o=o.parent}return n()});if(NL(e,s,a),a){let o=a.parent;for(;o&&o.parent;)HL(o.parent.vnode)&&_J(s,e,a,o),o=o.parent}}function _J(n,e,a,s){const o=NL(e,n,s,!0);rn(()=>{nT(s[e],o)},a)}function NL(n,e,a=$n,s=!1){if(a){const o=a[n]||(a[n]=[]),r=e.__weh||(e.__weh=(...i)=>{if(a.isUnmounted)return;Fl();const u=ou(a),h=Vs(e,a,n,i);return u(),jl(),h});return s?o.unshift(r):o.push(r),r}}const or=n=>(e,a=$n)=>(!BL||n==="sp")&&NL(n,(...s)=>e(...s),a),Dj=or("bm"),at=or("m"),gJ=or("bu"),kJ=or("u"),gT=or("bum"),rn=or("um"),bJ=or("sp"),wJ=or("rtg"),xJ=or("rtc");function MJ(n,e=$n){NL("ec",n,e)}function Fe(n,e,a,s){let o;const r=a&&a[s];if(Tt(n)||sn(n)){o=new Array(n.length);for(let i=0,u=n.length;i<u;i++)o[i]=e(n[i],i,void 0,r&&r[i])}else if(typeof n=="number"){o=new Array(n);for(let i=0;i<n;i++)o[i]=e(i+1,i,void 0,r&&r[i])}else if(Pa(n))if(n[Symbol.iterator])o=Array.from(n,(i,u)=>e(i,u,void 0,r&&r[u]));else{const i=Object.keys(n);o=new Array(i.length);for(let u=0,h=i.length;u<h;u++){const m=i[u];o[u]=e(n[m],m,u,r&&r[u])}}else o=[];return a&&(a[s]=o),o}function Lt(n,e,a={},s,o){if(vn.isCE||vn.parent&&wd(vn.parent)&&vn.parent.isCE)return e!=="default"&&(a.name=e),l("slot",a,s&&s());let r=n[e];r&&r._c&&(r._d=!1),L();const i=r&&Rj(r(a)),u=ge(ke,{key:a.key||i&&i.key||`_${e}`},i||(s?s():[]),i&&n._===1?64:-2);return!o&&u.scopeId&&(u.slotScopeIds=[u.scopeId+"-s"]),r&&r._c&&(r._d=!0),u}function Rj(n){return n.some(e=>hL(e)?!(e.type===Us||e.type===ke&&!Rj(e.children)):!0)?n:null}const NA=n=>n?Kj(n)?qL(n)||n.proxy:NA(n.parent):null,xd=Mn(Object.create(null),{$:n=>n,$el:n=>n.vnode.el,$data:n=>n.data,$props:n=>n.props,$attrs:n=>n.attrs,$slots:n=>n.slots,$refs:n=>n.refs,$parent:n=>NA(n.parent),$root:n=>NA(n.root),$emit:n=>n.emit,$options:n=>kT(n),$forceUpdate:n=>n.f||(n.f=()=>{n.effect.dirty=!0,vT(n.update)}),$nextTick:n=>n.n||(n.n=En.bind(n.proxy)),$watch:n=>pJ.bind(n)}),F$=(n,e)=>n!==qa&&!n.__isScriptSetup&&ka(n,e),CJ={get({_:n},e){const{ctx:a,setupState:s,data:o,props:r,accessCache:i,type:u,appContext:h}=n;let m;if(e[0]!=="$"){const w=i[e];if(w!==void 0)switch(w){case 1:return s[e];case 2:return o[e];case 4:return a[e];case 3:return r[e]}else{if(F$(s,e))return i[e]=1,s[e];if(o!==qa&&ka(o,e))return i[e]=2,o[e];if((m=n.propsOptions[0])&&ka(m,e))return i[e]=3,r[e];if(a!==qa&&ka(a,e))return i[e]=4,a[e];zA&&(i[e]=0)}}const p=xd[e];let b,x;if(p)return e==="$attrs"&&os(n,"get",e),p(n);if((b=u.__cssModules)&&(b=b[e]))return b;if(a!==qa&&ka(a,e))return i[e]=4,a[e];if(x=h.config.globalProperties,ka(x,e))return x[e]},set({_:n},e,a){const{data:s,setupState:o,ctx:r}=n;return F$(o,e)?(o[e]=a,!0):s!==qa&&ka(s,e)?(s[e]=a,!0):ka(n.props,e)||e[0]==="$"&&e.slice(1)in n?!1:(r[e]=a,!0)},has({_:{data:n,setupState:e,accessCache:a,ctx:s,appContext:o,propsOptions:r}},i){let u;return!!a[i]||n!==qa&&ka(n,i)||F$(e,i)||(u=r[0])&&ka(u,i)||ka(s,i)||ka(xd,i)||ka(o.config.globalProperties,i)},defineProperty(n,e,a){return a.get!=null?n._.accessCache[e]=0:ka(a,"value")&&this.set(n,e,a.value,null),Reflect.defineProperty(n,e,a)}};function Oj(){return Vj().slots}function Ot(){return Vj().attrs}function Vj(){const n=Wr();return n.setupContext||(n.setupContext=Yj(n))}function bO(n){return Tt(n)?n.reduce((e,a)=>(e[a]=null,e),{}):n}let zA=!0;function SJ(n){const e=kT(n),a=n.proxy,s=n.ctx;zA=!1,e.beforeCreate&&wO(e.beforeCreate,n,"bc");const{data:o,computed:r,methods:i,watch:u,provide:h,inject:m,created:p,beforeMount:b,mounted:x,beforeUpdate:w,updated:$,activated:D,deactivated:V,beforeDestroy:R,beforeUnmount:E,destroyed:P,unmounted:S,render:C,renderTracked:M,renderTriggered:g,errorCaptured:v,serverPrefetch:T,expose:j,inheritAttrs:B,components:oe,directives:be,filters:$e}=e;if(m&&IJ(m,s,null),i)for(const J in i){const G=i[J];Yt(G)&&(s[J]=G.bind(a))}if(o){const J=o.call(a,a);Pa(J)&&(n.data=gn(J))}if(zA=!0,r)for(const J in r){const G=r[J],ce=Yt(G)?G.bind(a,a):Yt(G.get)?G.get.bind(a,a):Os,Ee=!Yt(G)&&Yt(G.set)?G.set.bind(a):Os,He=ee({get:ce,set:Ee});Object.defineProperty(s,J,{enumerable:!0,configurable:!0,get:()=>He.value,set:Ke=>He.value=Ke})}if(u)for(const J in u)Uj(u[J],s,a,J);if(h){const J=Yt(h)?h.call(a):h;Reflect.ownKeys(J).forEach(G=>{St(G,J[G])})}p&&wO(p,n,"c");function de(J,G){Tt(G)?G.forEach(ce=>J(ce.bind(a))):G&&J(G.bind(a))}if(de(Dj,b),de(at,x),de(gJ,w),de(kJ,$),de(vJ,D),de(yJ,V),de(MJ,v),de(xJ,M),de(wJ,g),de(gT,E),de(rn,S),de(bJ,T),Tt(j))if(j.length){const J=n.exposed||(n.exposed={});j.forEach(G=>{Object.defineProperty(J,G,{get:()=>a[G],set:ce=>a[G]=ce})})}else n.exposed||(n.exposed={});C&&n.render===Os&&(n.render=C),B!=null&&(n.inheritAttrs=B),oe&&(n.components=oe),be&&(n.directives=be)}function IJ(n,e,a=Os){Tt(n)&&(n=BA(n));for(const s in n){const o=n[s];let r;Pa(o)?"default"in o?r=xt(o.from||s,o.default,!0):r=xt(o.from||s):r=xt(o),on(r)?Object.defineProperty(e,s,{enumerable:!0,configurable:!0,get:()=>r.value,set:i=>r.value=i}):e[s]=r}}function wO(n,e,a){Vs(Tt(n)?n.map(s=>s.bind(e.proxy)):n.bind(e.proxy),e,a)}function Uj(n,e,a,s){const o=s.includes(".")?$j(a,s):()=>a[s];if(sn(n)){const r=e[n];Yt(r)&&dt(o,r)}else if(Yt(n))dt(o,n.bind(a));else if(Pa(n))if(Tt(n))n.forEach(r=>Uj(r,e,a,s));else{const r=Yt(n.handler)?n.handler.bind(a):e[n.handler];Yt(r)&&dt(o,r,n)}}function kT(n){const e=n.type,{mixins:a,extends:s}=e,{mixins:o,optionsCache:r,config:{optionMergeStrategies:i}}=n.appContext,u=r.get(e);let h;return u?h=u:!o.length&&!a&&!s?h=e:(h={},o.length&&o.forEach(m=>pL(h,m,i,!0)),pL(h,e,i)),Pa(e)&&r.set(e,h),h}function pL(n,e,a,s=!1){const{mixins:o,extends:r}=e;r&&pL(n,r,a,!0),o&&o.forEach(i=>pL(n,i,a,!0));for(const i in e)if(!(s&&i==="expose")){const u=LJ[i]||a&&a[i];n[i]=u?u(n[i],e[i]):e[i]}return n}const LJ={data:xO,props:MO,emits:MO,methods:gd,computed:gd,beforeCreate:Wn,created:Wn,beforeMount:Wn,mounted:Wn,beforeUpdate:Wn,updated:Wn,beforeDestroy:Wn,beforeUnmount:Wn,destroyed:Wn,unmounted:Wn,activated:Wn,deactivated:Wn,errorCaptured:Wn,serverPrefetch:Wn,components:gd,directives:gd,watch:AJ,provide:xO,inject:$J};function xO(n,e){return e?n?function(){return Mn(Yt(n)?n.call(this,this):n,Yt(e)?e.call(this,this):e)}:e:n}function $J(n,e){return gd(BA(n),BA(e))}function BA(n){if(Tt(n)){const e={};for(let a=0;a<n.length;a++)e[n[a]]=n[a];return e}return n}function Wn(n,e){return n?[...new Set([].concat(n,e))]:e}function gd(n,e){return n?Mn(Object.create(null),n,e):e}function MO(n,e){return n?Tt(n)&&Tt(e)?[...new Set([...n,...e])]:Mn(Object.create(null),bO(n),bO(e??{})):e}function AJ(n,e){if(!n)return e;if(!e)return n;const a=Mn(Object.create(null),n);for(const s in e)a[s]=Wn(n[s],e[s]);return a}function Fj(){return{app:null,config:{isNativeTag:uQ,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let EJ=0;function TJ(n,e){return function(s,o=null){Yt(s)||(s=Mn({},s)),o!=null&&!Pa(o)&&(o=null);const r=Fj(),i=new WeakSet;let u=!1;const h=r.app={_uid:EJ++,_component:s,_props:o,_container:null,_context:r,_instance:null,version:see,get config(){return r.config},set config(m){},use(m,...p){return i.has(m)||(m&&Yt(m.install)?(i.add(m),m.install(h,...p)):Yt(m)&&(i.add(m),m(h,...p))),h},mixin(m){return r.mixins.includes(m)||r.mixins.push(m),h},component(m,p){return p?(r.components[m]=p,h):r.components[m]},directive(m,p){return p?(r.directives[m]=p,h):r.directives[m]},mount(m,p,b){if(!u){const x=l(s,o);return x.appContext=r,b===!0?b="svg":b===!1&&(b=void 0),p&&e?e(x,m):n(x,m,b),u=!0,h._container=m,m.__vue_app__=h,qL(x.component)||x.component.proxy}},unmount(){u&&(n(null,h._container),delete h._container.__vue_app__)},provide(m,p){return r.provides[m]=p,h},runWithContext(m){const p=yc;yc=h;try{return m()}finally{yc=p}}};return h}}let yc=null;function St(n,e){if($n){let a=$n.provides;const s=$n.parent&&$n.parent.provides;s===a&&(a=$n.provides=Object.create(s)),a[n]=e}}function xt(n,e,a=!1){const s=$n||vn;if(s||yc){const o=s?s.parent==null?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides:yc._context.provides;if(o&&n in o)return o[n];if(arguments.length>1)return a&&Yt(e)?e.call(s&&s.proxy):e}}function PJ(){return!!($n||vn||yc)}function DJ(n,e,a,s=!1){const o={},r={};lL(r,zL,1),n.propsDefaults=Object.create(null),jj(n,e,o,r);for(const i in n.propsOptions[0])i in o||(o[i]=void 0);a?n.props=s?o:hj(o):n.type.props?n.props=o:n.props=r,n.attrs=r}function RJ(n,e,a,s){const{props:o,attrs:r,vnode:{patchFlag:i}}=n,u=pa(o),[h]=n.propsOptions;let m=!1;if((s||i>0)&&!(i&16)){if(i&8){const p=n.vnode.dynamicProps;for(let b=0;b<p.length;b++){let x=p[b];if(jL(n.emitsOptions,x))continue;const w=e[x];if(h)if(ka(r,x))w!==r[x]&&(r[x]=w,m=!0);else{const $=Io(x);o[$]=qA(h,u,$,w,n,!1)}else w!==r[x]&&(r[x]=w,m=!0)}}}else{jj(n,e,o,r)&&(m=!0);let p;for(const b in u)(!e||!ka(e,b)&&((p=Ul(b))===b||!ka(e,p)))&&(h?a&&(a[b]!==void 0||a[p]!==void 0)&&(o[b]=qA(h,u,b,void 0,n,!0)):delete o[b]);if(r!==u)for(const b in r)(!e||!ka(e,b))&&(delete r[b],m=!0)}m&&er(n,"set","$attrs")}function jj(n,e,a,s){const[o,r]=n.propsOptions;let i=!1,u;if(e)for(let h in e){if(bd(h))continue;const m=e[h];let p;o&&ka(o,p=Io(h))?!r||!r.includes(p)?a[p]=m:(u||(u={}))[p]=m:jL(n.emitsOptions,h)||(!(h in s)||m!==s[h])&&(s[h]=m,i=!0)}if(r){const h=pa(a),m=u||qa;for(let p=0;p<r.length;p++){const b=r[p];a[b]=qA(o,h,b,m[b],n,!ka(m,b))}}return i}function qA(n,e,a,s,o,r){const i=n[a];if(i!=null){const u=ka(i,"default");if(u&&s===void 0){const h=i.default;if(i.type!==Function&&!i.skipFactory&&Yt(h)){const{propsDefaults:m}=o;if(a in m)s=m[a];else{const p=ou(o);s=m[a]=h.call(null,e),p()}}else s=h}i[0]&&(r&&!u?s=!1:i[1]&&(s===""||s===Ul(a))&&(s=!0))}return s}function Hj(n,e,a=!1){const s=e.propsCache,o=s.get(n);if(o)return o;const r=n.props,i={},u=[];let h=!1;if(!Yt(n)){const p=b=>{h=!0;const[x,w]=Hj(b,e,!0);Mn(i,x),w&&u.push(...w)};!a&&e.mixins.length&&e.mixins.forEach(p),n.extends&&p(n.extends),n.mixins&&n.mixins.forEach(p)}if(!r&&!h)return Pa(n)&&s.set(n,fc),fc;if(Tt(r))for(let p=0;p<r.length;p++){const b=Io(r[p]);CO(b)&&(i[b]=qa)}else if(r)for(const p in r){const b=Io(p);if(CO(b)){const x=r[p],w=i[b]=Tt(x)||Yt(x)?{type:x}:Mn({},x);if(w){const $=LO(Boolean,w.type),D=LO(String,w.type);w[0]=$>-1,w[1]=D<0||$<D,($>-1||ka(w,"default"))&&u.push(b)}}}const m=[i,u];return Pa(n)&&s.set(n,m),m}function CO(n){return n[0]!=="$"&&!bd(n)}function SO(n){return n===null?"null":typeof n=="function"?n.name||"":typeof n=="object"&&n.constructor&&n.constructor.name||""}function IO(n,e){return SO(n)===SO(e)}function LO(n,e){return Tt(e)?e.findIndex(a=>IO(a,n)):Yt(e)&&IO(e,n)?0:-1}const Nj=n=>n[0]==="_"||n==="$stable",bT=n=>Tt(n)?n.map(ko):[ko(n)],OJ=(n,e,a)=>{if(e._n)return e;const s=f((...o)=>bT(e(...o)),a);return s._c=!1,s},zj=(n,e,a)=>{const s=n._ctx;for(const o in n){if(Nj(o))continue;const r=n[o];if(Yt(r))e[o]=OJ(o,r,s);else if(r!=null){const i=bT(r);e[o]=()=>i}}},Bj=(n,e)=>{const a=bT(e);n.slots.default=()=>a},VJ=(n,e)=>{if(n.vnode.shapeFlag&32){const a=e._;a?(n.slots=pa(e),lL(e,"_",a)):zj(e,n.slots={})}else n.slots={},e&&Bj(n,e);lL(n.slots,zL,1)},UJ=(n,e,a)=>{const{vnode:s,slots:o}=n;let r=!0,i=qa;if(s.shapeFlag&32){const u=e._;u?a&&u===1?r=!1:(Mn(o,e),!a&&u===1&&delete o._):(r=!e.$stable,zj(e,o)),i=e}else e&&(Bj(n,e),i={default:1});if(r)for(const u in o)!Nj(u)&&i[u]==null&&delete o[u]};function WA(n,e,a,s,o=!1){if(Tt(n)){n.forEach((x,w)=>WA(x,e&&(Tt(e)?e[w]:e),a,s,o));return}if(wd(s)&&!o)return;const r=s.shapeFlag&4?qL(s.component)||s.component.proxy:s.el,i=o?null:r,{i:u,r:h}=n,m=e&&e.r,p=u.refs===qa?u.refs={}:u.refs,b=u.setupState;if(m!=null&&m!==h&&(sn(m)?(p[m]=null,ka(b,m)&&(b[m]=null)):on(m)&&(m.value=null)),Yt(h))Nr(h,u,12,[i,p]);else{const x=sn(h),w=on(h);if(x||w){const $=()=>{if(n.f){const D=x?ka(b,h)?b[h]:p[h]:h.value;o?Tt(D)&&nT(D,r):Tt(D)?D.includes(r)||D.push(r):x?(p[h]=[r],ka(b,h)&&(b[h]=p[h])):(h.value=[r],n.k&&(p[n.k]=h.value))}else x?(p[h]=i,ka(b,h)&&(b[h]=i)):w&&(h.value=i,n.k&&(p[n.k]=i))};i?($.id=-1,as($,a)):$()}}}const as=cJ;function FJ(n){return jJ(n)}function jJ(n,e){const a=YF();a.__VUE__=!0;const{insert:s,remove:o,patchProp:r,createElement:i,createText:u,createComment:h,setText:m,setElementText:p,parentNode:b,nextSibling:x,setScopeId:w=Os,insertStaticContent:$}=n,D=(H,N,Q,he=null,Se=null,Re=null,Ze=void 0,ze=null,qe=!!N.dynamicChildren)=>{if(H===N)return;H&&!Ml(H,N)&&(he=Ae(H),Ke(H,Se,Re,!0),H=null),N.patchFlag===-2&&(qe=!1,N.dynamicChildren=null);const{type:Be,ref:lt,shapeFlag:yt}=N;switch(Be){case su:V(H,N,Q,he);break;case Us:R(H,N,Q,he);break;case T1:H==null&&E(N,Q,he,Ze);break;case ke:oe(H,N,Q,he,Se,Re,Ze,ze,qe);break;default:yt&1?C(H,N,Q,he,Se,Re,Ze,ze,qe):yt&6?be(H,N,Q,he,Se,Re,Ze,ze,qe):(yt&64||yt&128)&&Be.process(H,N,Q,he,Se,Re,Ze,ze,qe,Y)}lt!=null&&Se&&WA(lt,H&&H.ref,Re,N||H,!N)},V=(H,N,Q,he)=>{if(H==null)s(N.el=u(N.children),Q,he);else{const Se=N.el=H.el;N.children!==H.children&&m(Se,N.children)}},R=(H,N,Q,he)=>{H==null?s(N.el=h(N.children||""),Q,he):N.el=H.el},E=(H,N,Q,he)=>{[H.el,H.anchor]=$(H.children,N,Q,he,H.el,H.anchor)},P=({el:H,anchor:N},Q,he)=>{let Se;for(;H&&H!==N;)Se=x(H),s(H,Q,he),H=Se;s(N,Q,he)},S=({el:H,anchor:N})=>{let Q;for(;H&&H!==N;)Q=x(H),o(H),H=Q;o(N)},C=(H,N,Q,he,Se,Re,Ze,ze,qe)=>{N.type==="svg"?Ze="svg":N.type==="math"&&(Ze="mathml"),H==null?M(N,Q,he,Se,Re,Ze,ze,qe):T(H,N,Se,Re,Ze,ze,qe)},M=(H,N,Q,he,Se,Re,Ze,ze)=>{let qe,Be;const{props:lt,shapeFlag:yt,transition:it,dirs:Pe}=H;if(qe=H.el=i(H.type,Re,lt&&lt.is,lt),yt&8?p(qe,H.children):yt&16&&v(H.children,qe,null,he,Se,j$(H,Re),Ze,ze),Pe&&ui(H,null,he,"created"),g(qe,H,H.scopeId,Ze,he),lt){for(const ht in lt)ht!=="value"&&!bd(ht)&&r(qe,ht,null,lt[ht],Re,H.children,he,Se,kt);"value"in lt&&r(qe,"value",null,lt.value,Re),(Be=lt.onVnodeBeforeMount)&&fo(Be,he,H)}Pe&&ui(H,null,he,"beforeMount");const Ue=HJ(Se,it);Ue&&it.beforeEnter(qe),s(qe,N,Q),((Be=lt&&lt.onVnodeMounted)||Ue||Pe)&&as(()=>{Be&&fo(Be,he,H),Ue&&it.enter(qe),Pe&&ui(H,null,he,"mounted")},Se)},g=(H,N,Q,he,Se)=>{if(Q&&w(H,Q),he)for(let Re=0;Re<he.length;Re++)w(H,he[Re]);if(Se){let Re=Se.subTree;if(N===Re){const Ze=Se.vnode;g(H,Ze,Ze.scopeId,Ze.slotScopeIds,Se.parent)}}},v=(H,N,Q,he,Se,Re,Ze,ze,qe=0)=>{for(let Be=qe;Be<H.length;Be++){const lt=H[Be]=ze?Rr(H[Be]):ko(H[Be]);D(null,lt,N,Q,he,Se,Re,Ze,ze)}},T=(H,N,Q,he,Se,Re,Ze)=>{const ze=N.el=H.el;let{patchFlag:qe,dynamicChildren:Be,dirs:lt}=N;qe|=H.patchFlag&16;const yt=H.props||qa,it=N.props||qa;let Pe;if(Q&&pi(Q,!1),(Pe=it.onVnodeBeforeUpdate)&&fo(Pe,Q,N,H),lt&&ui(N,H,Q,"beforeUpdate"),Q&&pi(Q,!0),Be?j(H.dynamicChildren,Be,ze,Q,he,j$(N,Se),Re):Ze||G(H,N,ze,null,Q,he,j$(N,Se),Re,!1),qe>0){if(qe&16)B(ze,N,yt,it,Q,he,Se);else if(qe&2&&yt.class!==it.class&&r(ze,"class",null,it.class,Se),qe&4&&r(ze,"style",yt.style,it.style,Se),qe&8){const Ue=N.dynamicProps;for(let ht=0;ht<Ue.length;ht++){const Mt=Ue[ht],Et=yt[Mt],Jt=it[Mt];(Jt!==Et||Mt==="value")&&r(ze,Mt,Et,Jt,Se,H.children,Q,he,kt)}}qe&1&&H.children!==N.children&&p(ze,N.children)}else!Ze&&Be==null&&B(ze,N,yt,it,Q,he,Se);((Pe=it.onVnodeUpdated)||lt)&&as(()=>{Pe&&fo(Pe,Q,N,H),lt&&ui(N,H,Q,"updated")},he)},j=(H,N,Q,he,Se,Re,Ze)=>{for(let ze=0;ze<N.length;ze++){const qe=H[ze],Be=N[ze],lt=qe.el&&(qe.type===ke||!Ml(qe,Be)||qe.shapeFlag&70)?b(qe.el):Q;D(qe,Be,lt,null,he,Se,Re,Ze,!0)}},B=(H,N,Q,he,Se,Re,Ze)=>{if(Q!==he){if(Q!==qa)for(const ze in Q)!bd(ze)&&!(ze in he)&&r(H,ze,Q[ze],null,Ze,N.children,Se,Re,kt);for(const ze in he){if(bd(ze))continue;const qe=he[ze],Be=Q[ze];qe!==Be&&ze!=="value"&&r(H,ze,Be,qe,Ze,N.children,Se,Re,kt)}"value"in he&&r(H,"value",Q.value,he.value,Ze)}},oe=(H,N,Q,he,Se,Re,Ze,ze,qe)=>{const Be=N.el=H?H.el:u(""),lt=N.anchor=H?H.anchor:u("");let{patchFlag:yt,dynamicChildren:it,slotScopeIds:Pe}=N;Pe&&(ze=ze?ze.concat(Pe):Pe),H==null?(s(Be,Q,he),s(lt,Q,he),v(N.children||[],Q,lt,Se,Re,Ze,ze,qe)):yt>0&&yt&64&&it&&H.dynamicChildren?(j(H.dynamicChildren,it,Q,Se,Re,Ze,ze),(N.key!=null||Se&&N===Se.subTree)&&wT(H,N,!0)):G(H,N,Q,lt,Se,Re,Ze,ze,qe)},be=(H,N,Q,he,Se,Re,Ze,ze,qe)=>{N.slotScopeIds=ze,H==null?N.shapeFlag&512?Se.ctx.activate(N,Q,he,Ze,qe):$e(N,Q,he,Se,Re,Ze,qe):Le(H,N,qe)},$e=(H,N,Q,he,Se,Re,Ze)=>{const ze=H.component=QJ(H,he,Se);if(HL(H)&&(ze.ctx.renderer=Y),JJ(ze),ze.asyncDep){if(Se&&Se.registerDep(ze,de),!H.el){const qe=ze.subTree=l(Us);R(null,qe,N,Q)}}else de(ze,H,N,Q,Se,Re,Ze)},Le=(H,N,Q)=>{const he=N.component=H.component;if(rJ(H,N,Q))if(he.asyncDep&&!he.asyncResolved){J(he,N,Q);return}else he.next=N,eJ(he.update),he.effect.dirty=!0,he.update();else N.el=H.el,he.vnode=N},de=(H,N,Q,he,Se,Re,Ze)=>{const ze=()=>{if(H.isMounted){let{next:lt,bu:yt,u:it,parent:Pe,vnode:Ue}=H;{const ae=qj(H);if(ae){lt&&(lt.el=Ue.el,J(H,lt,Ze)),ae.asyncDep.then(()=>{H.isUnmounted||ze()});return}}let ht=lt,Mt;pi(H,!1),lt?(lt.el=Ue.el,J(H,lt,Ze)):lt=Ue,yt&&A1(yt),(Mt=lt.props&&lt.props.onVnodeBeforeUpdate)&&fo(Mt,Pe,lt,Ue),pi(H,!0);const Et=V$(H),Jt=H.subTree;H.subTree=Et,D(Jt,Et,b(Jt.el),Ae(Jt),H,Se,Re),lt.el=Et.el,ht===null&&iJ(H,Et.el),it&&as(it,Se),(Mt=lt.props&&lt.props.onVnodeUpdated)&&as(()=>fo(Mt,Pe,lt,Ue),Se)}else{let lt;const{el:yt,props:it}=N,{bm:Pe,m:Ue,parent:ht}=H,Mt=wd(N);if(pi(H,!1),Pe&&A1(Pe),!Mt&&(lt=it&&it.onVnodeBeforeMount)&&fo(lt,ht,N),pi(H,!0),yt&&pe){const Et=()=>{H.subTree=V$(H),pe(yt,H.subTree,H,Se,null)};Mt?N.type.__asyncLoader().then(()=>!H.isUnmounted&&Et()):Et()}else{const Et=H.subTree=V$(H);D(null,Et,Q,he,H,Se,Re),N.el=Et.el}if(Ue&&as(Ue,Se),!Mt&&(lt=it&&it.onVnodeMounted)){const Et=N;as(()=>fo(lt,ht,Et),Se)}(N.shapeFlag&256||ht&&wd(ht.vnode)&&ht.vnode.shapeFlag&256)&&H.a&&as(H.a,Se),H.isMounted=!0,N=Q=he=null}},qe=H.effect=new lT(ze,Os,()=>vT(Be),H.scope),Be=H.update=()=>{qe.dirty&&qe.run()};Be.id=H.uid,pi(H,!0),Be()},J=(H,N,Q)=>{N.component=H;const he=H.vnode.props;H.vnode=N,H.next=null,RJ(H,N.props,he,Q),UJ(H,N.children,Q),Fl(),yO(H),jl()},G=(H,N,Q,he,Se,Re,Ze,ze,qe=!1)=>{const Be=H&&H.children,lt=H?H.shapeFlag:0,yt=N.children,{patchFlag:it,shapeFlag:Pe}=N;if(it>0){if(it&128){Ee(Be,yt,Q,he,Se,Re,Ze,ze,qe);return}else if(it&256){ce(Be,yt,Q,he,Se,Re,Ze,ze,qe);return}}Pe&8?(lt&16&&kt(Be,Se,Re),yt!==Be&&p(Q,yt)):lt&16?Pe&16?Ee(Be,yt,Q,he,Se,Re,Ze,ze,qe):kt(Be,Se,Re,!0):(lt&8&&p(Q,""),Pe&16&&v(yt,Q,he,Se,Re,Ze,ze,qe))},ce=(H,N,Q,he,Se,Re,Ze,ze,qe)=>{H=H||fc,N=N||fc;const Be=H.length,lt=N.length,yt=Math.min(Be,lt);let it;for(it=0;it<yt;it++){const Pe=N[it]=qe?Rr(N[it]):ko(N[it]);D(H[it],Pe,Q,null,Se,Re,Ze,ze,qe)}Be>lt?kt(H,Se,Re,!0,!1,yt):v(N,Q,he,Se,Re,Ze,ze,qe,yt)},Ee=(H,N,Q,he,Se,Re,Ze,ze,qe)=>{let Be=0;const lt=N.length;let yt=H.length-1,it=lt-1;for(;Be<=yt&&Be<=it;){const Pe=H[Be],Ue=N[Be]=qe?Rr(N[Be]):ko(N[Be]);if(Ml(Pe,Ue))D(Pe,Ue,Q,null,Se,Re,Ze,ze,qe);else break;Be++}for(;Be<=yt&&Be<=it;){const Pe=H[yt],Ue=N[it]=qe?Rr(N[it]):ko(N[it]);if(Ml(Pe,Ue))D(Pe,Ue,Q,null,Se,Re,Ze,ze,qe);else break;yt--,it--}if(Be>yt){if(Be<=it){const Pe=it+1,Ue=Pe<lt?N[Pe].el:he;for(;Be<=it;)D(null,N[Be]=qe?Rr(N[Be]):ko(N[Be]),Q,Ue,Se,Re,Ze,ze,qe),Be++}}else if(Be>it)for(;Be<=yt;)Ke(H[Be],Se,Re,!0),Be++;else{const Pe=Be,Ue=Be,ht=new Map;for(Be=Ue;Be<=it;Be++){const te=N[Be]=qe?Rr(N[Be]):ko(N[Be]);te.key!=null&&ht.set(te.key,Be)}let Mt,Et=0;const Jt=it-Ue+1;let ae=!1,W=0;const q=new Array(Jt);for(Be=0;Be<Jt;Be++)q[Be]=0;for(Be=Pe;Be<=yt;Be++){const te=H[Be];if(Et>=Jt){Ke(te,Se,Re,!0);continue}let ne;if(te.key!=null)ne=ht.get(te.key);else for(Mt=Ue;Mt<=it;Mt++)if(q[Mt-Ue]===0&&Ml(te,N[Mt])){ne=Mt;break}ne===void 0?Ke(te,Se,Re,!0):(q[ne-Ue]=Be+1,ne>=W?W=ne:ae=!0,D(te,N[ne],Q,null,Se,Re,Ze,ze,qe),Et++)}const ve=ae?NJ(q):fc;for(Mt=ve.length-1,Be=Jt-1;Be>=0;Be--){const te=Ue+Be,ne=N[te],ye=te+1<lt?N[te+1].el:he;q[Be]===0?D(null,ne,Q,ye,Se,Re,Ze,ze,qe):ae&&(Mt<0||Be!==ve[Mt]?He(ne,Q,ye,2):Mt--)}}},He=(H,N,Q,he,Se=null)=>{const{el:Re,type:Ze,transition:ze,children:qe,shapeFlag:Be}=H;if(Be&6){He(H.component.subTree,N,Q,he);return}if(Be&128){H.suspense.move(N,Q,he);return}if(Be&64){Ze.move(H,N,Q,Y);return}if(Ze===ke){s(Re,N,Q);for(let yt=0;yt<qe.length;yt++)He(qe[yt],N,Q,he);s(H.anchor,N,Q);return}if(Ze===T1){P(H,N,Q);return}if(he!==2&&Be&1&&ze)if(he===0)ze.beforeEnter(Re),s(Re,N,Q),as(()=>ze.enter(Re),Se);else{const{leave:yt,delayLeave:it,afterLeave:Pe}=ze,Ue=()=>s(Re,N,Q),ht=()=>{yt(Re,()=>{Ue(),Pe&&Pe()})};it?it(Re,Ue,ht):ht()}else s(Re,N,Q)},Ke=(H,N,Q,he=!1,Se=!1)=>{const{type:Re,props:Ze,ref:ze,children:qe,dynamicChildren:Be,shapeFlag:lt,patchFlag:yt,dirs:it}=H;if(ze!=null&&WA(ze,null,Q,H,!0),lt&256){N.ctx.deactivate(H);return}const Pe=lt&1&&it,Ue=!wd(H);let ht;if(Ue&&(ht=Ze&&Ze.onVnodeBeforeUnmount)&&fo(ht,N,H),lt&6)ft(H.component,Q,he);else{if(lt&128){H.suspense.unmount(Q,he);return}Pe&&ui(H,null,N,"beforeUnmount"),lt&64?H.type.remove(H,N,Q,Se,Y,he):Be&&(Re!==ke||yt>0&&yt&64)?kt(Be,N,Q,!1,!0):(Re===ke&&yt&384||!Se&&lt&16)&&kt(qe,N,Q),he&&pt(H)}(Ue&&(ht=Ze&&Ze.onVnodeUnmounted)||Pe)&&as(()=>{ht&&fo(ht,N,H),Pe&&ui(H,null,N,"unmounted")},Q)},pt=H=>{const{type:N,el:Q,anchor:he,transition:Se}=H;if(N===ke){ut(Q,he);return}if(N===T1){S(H);return}const Re=()=>{o(Q),Se&&!Se.persisted&&Se.afterLeave&&Se.afterLeave()};if(H.shapeFlag&1&&Se&&!Se.persisted){const{leave:Ze,delayLeave:ze}=Se,qe=()=>Ze(Q,Re);ze?ze(H.el,Re,qe):qe()}else Re()},ut=(H,N)=>{let Q;for(;H!==N;)Q=x(H),o(H),H=Q;o(N)},ft=(H,N,Q)=>{const{bum:he,scope:Se,update:Re,subTree:Ze,um:ze}=H;he&&A1(he),Se.stop(),Re&&(Re.active=!1,Ke(Ze,H,N,Q)),ze&&as(ze,N),as(()=>{H.isUnmounted=!0},N),N&&N.pendingBranch&&!N.isUnmounted&&H.asyncDep&&!H.asyncResolved&&H.suspenseId===N.pendingId&&(N.deps--,N.deps===0&&N.resolve())},kt=(H,N,Q,he=!1,Se=!1,Re=0)=>{for(let Ze=Re;Ze<H.length;Ze++)Ke(H[Ze],N,Q,he,Se)},Ae=H=>H.shapeFlag&6?Ae(H.component.subTree):H.shapeFlag&128?H.suspense.next():x(H.anchor||H.el);let Xe=!1;const ie=(H,N,Q)=>{H==null?N._vnode&&Ke(N._vnode,null,null,!0):D(N._vnode||null,H,N,null,null,null,Q),Xe||(Xe=!0,yO(),xj(),Xe=!1),N._vnode=H},Y={p:D,um:Ke,m:He,r:pt,mt:$e,mc:v,pc:G,pbc:j,n:Ae,o:n};let ue,pe;return e&&([ue,pe]=e(Y)),{render:ie,hydrate:ue,createApp:TJ(ie,ue)}}function j$({type:n,props:e},a){return a==="svg"&&n==="foreignObject"||a==="mathml"&&n==="annotation-xml"&&e&&e.encoding&&e.encoding.includes("html")?void 0:a}function pi({effect:n,update:e},a){n.allowRecurse=e.allowRecurse=a}function HJ(n,e){return(!n||n&&!n.pendingBranch)&&e&&!e.persisted}function wT(n,e,a=!1){const s=n.children,o=e.children;if(Tt(s)&&Tt(o))for(let r=0;r<s.length;r++){const i=s[r];let u=o[r];u.shapeFlag&1&&!u.dynamicChildren&&((u.patchFlag<=0||u.patchFlag===32)&&(u=o[r]=Rr(o[r]),u.el=i.el),a||wT(i,u)),u.type===su&&(u.el=i.el)}}function NJ(n){const e=n.slice(),a=[0];let s,o,r,i,u;const h=n.length;for(s=0;s<h;s++){const m=n[s];if(m!==0){if(o=a[a.length-1],n[o]<m){e[s]=o,a.push(s);continue}for(r=0,i=a.length-1;r<i;)u=r+i>>1,n[a[u]]<m?r=u+1:i=u;m<n[a[r]]&&(r>0&&(e[s]=a[r-1]),a[r]=s)}}for(r=a.length,i=a[r-1];r-- >0;)a[r]=i,i=e[i];return a}function qj(n){const e=n.subTree.component;if(e)return e.asyncDep&&!e.asyncResolved?e:qj(e)}const zJ=n=>n.__isTeleport,Md=n=>n&&(n.disabled||n.disabled===""),$O=n=>typeof SVGElement<"u"&&n instanceof SVGElement,AO=n=>typeof MathMLElement=="function"&&n instanceof MathMLElement,GA=(n,e)=>{const a=n&&n.to;return sn(a)?e?e(a):null:a},BJ={name:"Teleport",__isTeleport:!0,process(n,e,a,s,o,r,i,u,h,m){const{mc:p,pc:b,pbc:x,o:{insert:w,querySelector:$,createText:D,createComment:V}}=m,R=Md(e.props);let{shapeFlag:E,children:P,dynamicChildren:S}=e;if(n==null){const C=e.el=D(""),M=e.anchor=D("");w(C,a,s),w(M,a,s);const g=e.target=GA(e.props,$),v=e.targetAnchor=D("");g&&(w(v,g),i==="svg"||$O(g)?i="svg":(i==="mathml"||AO(g))&&(i="mathml"));const T=(j,B)=>{E&16&&p(P,j,B,o,r,i,u,h)};R?T(a,M):g&&T(g,v)}else{e.el=n.el;const C=e.anchor=n.anchor,M=e.target=n.target,g=e.targetAnchor=n.targetAnchor,v=Md(n.props),T=v?a:M,j=v?C:g;if(i==="svg"||$O(M)?i="svg":(i==="mathml"||AO(M))&&(i="mathml"),S?(x(n.dynamicChildren,S,T,o,r,i,u),wT(n,e,!0)):h||b(n,e,T,j,o,r,i,u,!1),R)v?e.props&&n.props&&e.props.to!==n.props.to&&(e.props.to=n.props.to):v1(e,a,C,m,1);else if((e.props&&e.props.to)!==(n.props&&n.props.to)){const B=e.target=GA(e.props,$);B&&v1(e,B,null,m,0)}else v&&v1(e,M,g,m,1)}Wj(e)},remove(n,e,a,s,{um:o,o:{remove:r}},i){const{shapeFlag:u,children:h,anchor:m,targetAnchor:p,target:b,props:x}=n;if(b&&r(p),i&&r(m),u&16){const w=i||!Md(x);for(let $=0;$<h.length;$++){const D=h[$];o(D,e,a,w,!!D.dynamicChildren)}}},move:v1,hydrate:qJ};function v1(n,e,a,{o:{insert:s},m:o},r=2){r===0&&s(n.targetAnchor,e,a);const{el:i,anchor:u,shapeFlag:h,children:m,props:p}=n,b=r===2;if(b&&s(i,e,a),(!b||Md(p))&&h&16)for(let x=0;x<m.length;x++)o(m[x],e,a,2);b&&s(u,e,a)}function qJ(n,e,a,s,o,r,{o:{nextSibling:i,parentNode:u,querySelector:h}},m){const p=e.target=GA(e.props,h);if(p){const b=p._lpa||p.firstChild;if(e.shapeFlag&16)if(Md(e.props))e.anchor=m(i(n),e,u(n),a,s,o,r),e.targetAnchor=b;else{e.anchor=i(n);let x=b;for(;x;)if(x=i(x),x&&x.nodeType===8&&x.data==="teleport anchor"){e.targetAnchor=x,p._lpa=e.targetAnchor&&i(e.targetAnchor);break}m(b,e,p,a,s,o,r)}Wj(e)}return e.anchor&&i(e.anchor)}const WJ=BJ;function Wj(n){const e=n.ctx;if(e&&e.ut){let a=n.children[0].el;for(;a&&a!==n.targetAnchor;)a.nodeType===1&&a.setAttribute("data-v-owner",e.uid),a=a.nextSibling;e.ut()}}const ke=Symbol.for("v-fgt"),su=Symbol.for("v-txt"),Us=Symbol.for("v-cmt"),T1=Symbol.for("v-stc"),Cd=[];let to=null;function L(n=!1){Cd.push(to=n?null:[])}function GJ(){Cd.pop(),to=Cd[Cd.length-1]||null}let jd=1;function EO(n){jd+=n}function Gj(n){return n.dynamicChildren=jd>0?to||fc:null,GJ(),jd>0&&to&&to.push(n),n}function U(n,e,a,s,o,r){return Gj(c(n,e,a,s,o,r,!0))}function ge(n,e,a,s,o){return Gj(l(n,e,a,s,o,!0))}function hL(n){return n?n.__v_isVNode===!0:!1}function Ml(n,e){return n.type===e.type&&n.key===e.key}const zL="__vInternal",Zj=({key:n})=>n??null,P1=({ref:n,ref_key:e,ref_for:a})=>(typeof n=="number"&&(n=""+n),n!=null?sn(n)||on(n)||Yt(n)?{i:vn,r:n,k:e,f:!!a}:n:null);function c(n,e=null,a=null,s=0,o=null,r=n===ke?0:1,i=!1,u=!1){const h={__v_isVNode:!0,__v_skip:!0,type:n,props:e,key:e&&Zj(e),ref:e&&P1(e),scopeId:Sj,slotScopeIds:null,children:a,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:r,patchFlag:s,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:vn};return u?(xT(h,a),r&128&&n.normalize(h)):a&&(h.shapeFlag|=sn(a)?8:16),jd>0&&!i&&to&&(h.patchFlag>0||r&6)&&h.patchFlag!==32&&to.push(h),h}const l=ZJ;function ZJ(n,e=null,a=null,s=0,o=null,r=!1){if((!n||n===Ij)&&(n=Us),hL(n)){const u=nr(n,e,!0);return a&&xT(u,a),jd>0&&!r&&to&&(u.shapeFlag&6?to[to.indexOf(n)]=u:to.push(u)),u.patchFlag|=-2,u}if(nee(n)&&(n=n.__vccOpts),e){e=KJ(e);let{class:u,style:h}=e;u&&!sn(u)&&(e.class=F(u)),Pa(h)&&(mj(h)&&!Tt(h)&&(h=Mn({},h)),e.style=oT(h))}const i=sn(n)?1:lJ(n)?128:zJ(n)?64:Pa(n)?4:Yt(n)?2:0;return c(n,e,a,s,o,i,r,!0)}function KJ(n){return n?mj(n)||zL in n?Mn({},n):n:null}function nr(n,e,a=!1){const{props:s,ref:o,patchFlag:r,children:i}=n,u=e?Ft(s||{},e):s;return{__v_isVNode:!0,__v_skip:!0,type:n.type,props:u,key:u&&Zj(u),ref:e&&e.ref?a&&o?Tt(o)?o.concat(P1(e)):[o,P1(e)]:P1(e):o,scopeId:n.scopeId,slotScopeIds:n.slotScopeIds,children:i,target:n.target,targetAnchor:n.targetAnchor,staticCount:n.staticCount,shapeFlag:n.shapeFlag,patchFlag:e&&n.type!==ke?r===-1?16:r|16:r,dynamicProps:n.dynamicProps,dynamicChildren:n.dynamicChildren,appContext:n.appContext,dirs:n.dirs,transition:n.transition,component:n.component,suspense:n.suspense,ssContent:n.ssContent&&nr(n.ssContent),ssFallback:n.ssFallback&&nr(n.ssFallback),el:n.el,anchor:n.anchor,ctx:n.ctx,ce:n.ce}}function A(n=" ",e=0){return l(su,null,n,e)}function io(n,e){const a=l(T1,null,n);return a.staticCount=e,a}function Me(n="",e=!1){return e?(L(),ge(Us,null,n)):l(Us,null,n)}function ko(n){return n==null||typeof n=="boolean"?l(Us):Tt(n)?l(ke,null,n.slice()):typeof n=="object"?Rr(n):l(su,null,String(n))}function Rr(n){return n.el===null&&n.patchFlag!==-1||n.memo?n:nr(n)}function xT(n,e){let a=0;const{shapeFlag:s}=n;if(e==null)e=null;else if(Tt(e))a=16;else if(typeof e=="object")if(s&65){const o=e.default;o&&(o._c&&(o._d=!1),xT(n,o()),o._c&&(o._d=!0));return}else{a=32;const o=e._;!o&&!(zL in e)?e._ctx=vn:o===3&&vn&&(vn.slots._===1?e._=1:(e._=2,n.patchFlag|=1024))}else Yt(e)?(e={default:e,_ctx:vn},a=32):(e=String(e),s&64?(a=16,e=[A(e)]):a=8);n.children=e,n.shapeFlag|=a}function Ft(...n){const e={};for(let a=0;a<n.length;a++){const s=n[a];for(const o in s)if(o==="class")e.class!==s.class&&(e.class=F([e.class,s.class]));else if(o==="style")e.style=oT([e.style,s.style]);else if(PL(o)){const r=e[o],i=s[o];i&&r!==i&&!(Tt(r)&&r.includes(i))&&(e[o]=r?[].concat(r,i):i)}else o!==""&&(e[o]=s[o])}return e}function fo(n,e,a,s=null){Vs(n,e,7,[a,s])}const XJ=Fj();let YJ=0;function QJ(n,e,a){const s=n.type,o=(e?e.appContext:n.appContext)||XJ,r={uid:YJ++,vnode:n,type:s,parent:e,appContext:o,root:null,next:null,subTree:null,effect:null,update:null,scope:new ej(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:e?e.provides:Object.create(o.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Hj(s,o),emitsOptions:Cj(s,o),emit:null,emitted:null,propsDefaults:qa,inheritAttrs:s.inheritAttrs,ctx:qa,data:qa,props:qa,attrs:qa,slots:qa,refs:qa,setupState:qa,setupContext:null,attrsProxy:null,slotsProxy:null,suspense:a,suspenseId:a?a.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return r.ctx={_:r},r.root=e?e.root:r,r.emit=nJ.bind(null,r),n.ce&&n.ce(r),r}let $n=null;const Wr=()=>$n||vn;let fL,ZA;{const n=YF(),e=(a,s)=>{let o;return(o=n[a])||(o=n[a]=[]),o.push(s),r=>{o.length>1?o.forEach(i=>i(r)):o[0](r)}};fL=e("__VUE_INSTANCE_SETTERS__",a=>$n=a),ZA=e("__VUE_SSR_SETTERS__",a=>BL=a)}const ou=n=>{const e=$n;return fL(n),n.scope.on(),()=>{n.scope.off(),fL(e)}},TO=()=>{$n&&$n.scope.off(),fL(null)};function Kj(n){return n.vnode.shapeFlag&4}let BL=!1;function JJ(n,e=!1){e&&ZA(e);const{props:a,children:s}=n.vnode,o=Kj(n);DJ(n,a,o,e),VJ(n,s);const r=o?eee(n,e):void 0;return e&&ZA(!1),r}function eee(n,e){const a=n.type;n.accessCache=Object.create(null),n.proxy=VL(new Proxy(n.ctx,CJ));const{setup:s}=a;if(s){const o=n.setupContext=s.length>1?Yj(n):null,r=ou(n);Fl();const i=Nr(s,n,0,[n.props,o]);if(jl(),r(),ZF(i)){if(i.then(TO,TO),e)return i.then(u=>{PO(n,u,e)}).catch(u=>{FL(u,n,0)});n.asyncDep=i}else PO(n,i,e)}else Xj(n,e)}function PO(n,e,a){Yt(e)?n.type.__ssrInlineRender?n.ssrRender=e:n.render=e:Pa(e)&&(n.setupState=gj(e)),Xj(n,a)}let DO;function Xj(n,e,a){const s=n.type;if(!n.render){if(!e&&DO&&!s.render){const o=s.template||kT(n).template;if(o){const{isCustomElement:r,compilerOptions:i}=n.appContext.config,{delimiters:u,compilerOptions:h}=s,m=Mn(Mn({isCustomElement:r,delimiters:u},i),h);s.render=DO(o,m)}}n.render=s.render||Os}{const o=ou(n);Fl();try{SJ(n)}finally{jl(),o()}}}function tee(n){return n.attrsProxy||(n.attrsProxy=new Proxy(n.attrs,{get(e,a){return os(n,"get","$attrs"),e[a]}}))}function Yj(n){const e=a=>{n.exposed=a||{}};return{get attrs(){return tee(n)},slots:n.slots,emit:n.emit,expose:e}}function qL(n){if(n.exposed)return n.exposeProxy||(n.exposeProxy=new Proxy(gj(VL(n.exposed)),{get(e,a){if(a in e)return e[a];if(a in xd)return xd[a](n)},has(e,a){return a in e||a in xd}}))}function aee(n,e=!0){return Yt(n)?n.displayName||n.name:n.name||e&&n.__name}function nee(n){return Yt(n)&&"__vccOpts"in n}const ee=(n,e)=>WQ(n,e,BL);function ya(n,e,a){const s=arguments.length;return s===2?Pa(e)&&!Tt(e)?hL(e)?l(n,null,[e]):l(n,e):l(n,null,e):(s>3?a=Array.prototype.slice.call(arguments,2):s===3&&hL(a)&&(a=[a]),l(n,e,a))}const see="3.4.21";/**
+* @vue/runtime-dom v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/const oee="http://www.w3.org/2000/svg",ree="http://www.w3.org/1998/Math/MathML",Or=typeof document<"u"?document:null,RO=Or&&Or.createElement("template"),iee={insert:(n,e,a)=>{e.insertBefore(n,a||null)},remove:n=>{const e=n.parentNode;e&&e.removeChild(n)},createElement:(n,e,a,s)=>{const o=e==="svg"?Or.createElementNS(oee,n):e==="mathml"?Or.createElementNS(ree,n):Or.createElement(n,a?{is:a}:void 0);return n==="select"&&s&&s.multiple!=null&&o.setAttribute("multiple",s.multiple),o},createText:n=>Or.createTextNode(n),createComment:n=>Or.createComment(n),setText:(n,e)=>{n.nodeValue=e},setElementText:(n,e)=>{n.textContent=e},parentNode:n=>n.parentNode,nextSibling:n=>n.nextSibling,querySelector:n=>Or.querySelector(n),setScopeId(n,e){n.setAttribute(e,"")},insertStaticContent(n,e,a,s,o,r){const i=a?a.previousSibling:e.lastChild;if(o&&(o===r||o.nextSibling))for(;e.insertBefore(o.cloneNode(!0),a),!(o===r||!(o=o.nextSibling)););else{RO.innerHTML=s==="svg"?`<svg>${n}</svg>`:s==="mathml"?`<math>${n}</math>`:n;const u=RO.content;if(s==="svg"||s==="mathml"){const h=u.firstChild;for(;h.firstChild;)u.appendChild(h.firstChild);u.removeChild(h)}e.insertBefore(u,a)}return[i?i.nextSibling:e.firstChild,a?a.previousSibling:e.lastChild]}},wr="transition",rd="animation",Hd=Symbol("_vtc"),hn=(n,{slots:e})=>ya(mJ,lee(n),e);hn.displayName="Transition";const Qj={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};hn.props=Mn({},Aj,Qj);const hi=(n,e=[])=>{Tt(n)?n.forEach(a=>a(...e)):n&&n(...e)},OO=n=>n?Tt(n)?n.some(e=>e.length>1):n.length>1:!1;function lee(n){const e={};for(const oe in n)oe in Qj||(e[oe]=n[oe]);if(n.css===!1)return e;const{name:a="v",type:s,duration:o,enterFromClass:r=`${a}-enter-from`,enterActiveClass:i=`${a}-enter-active`,enterToClass:u=`${a}-enter-to`,appearFromClass:h=r,appearActiveClass:m=i,appearToClass:p=u,leaveFromClass:b=`${a}-leave-from`,leaveActiveClass:x=`${a}-leave-active`,leaveToClass:w=`${a}-leave-to`}=n,$=cee(o),D=$&&$[0],V=$&&$[1],{onBeforeEnter:R,onEnter:E,onEnterCancelled:P,onLeave:S,onLeaveCancelled:C,onBeforeAppear:M=R,onAppear:g=E,onAppearCancelled:v=P}=e,T=(oe,be,$e)=>{fi(oe,be?p:u),fi(oe,be?m:i),$e&&$e()},j=(oe,be)=>{oe._isLeaving=!1,fi(oe,b),fi(oe,w),fi(oe,x),be&&be()},B=oe=>(be,$e)=>{const Le=oe?g:E,de=()=>T(be,oe,$e);hi(Le,[be,de]),VO(()=>{fi(be,oe?h:r),xr(be,oe?p:u),OO(Le)||UO(be,s,D,de)})};return Mn(e,{onBeforeEnter(oe){hi(R,[oe]),xr(oe,r),xr(oe,i)},onBeforeAppear(oe){hi(M,[oe]),xr(oe,h),xr(oe,m)},onEnter:B(!1),onAppear:B(!0),onLeave(oe,be){oe._isLeaving=!0;const $e=()=>j(oe,be);xr(oe,b),pee(),xr(oe,x),VO(()=>{oe._isLeaving&&(fi(oe,b),xr(oe,w),OO(S)||UO(oe,s,V,$e))}),hi(S,[oe,$e])},onEnterCancelled(oe){T(oe,!1),hi(P,[oe])},onAppearCancelled(oe){T(oe,!0),hi(v,[oe])},onLeaveCancelled(oe){j(oe),hi(C,[oe])}})}function cee(n){if(n==null)return null;if(Pa(n))return[H$(n.enter),H$(n.leave)];{const e=H$(n);return[e,e]}}function H$(n){return vQ(n)}function xr(n,e){e.split(/\s+/).forEach(a=>a&&n.classList.add(a)),(n[Hd]||(n[Hd]=new Set)).add(e)}function fi(n,e){e.split(/\s+/).forEach(s=>s&&n.classList.remove(s));const a=n[Hd];a&&(a.delete(e),a.size||(n[Hd]=void 0))}function VO(n){requestAnimationFrame(()=>{requestAnimationFrame(n)})}let dee=0;function UO(n,e,a,s){const o=n._endId=++dee,r=()=>{o===n._endId&&s()};if(a)return setTimeout(r,a);const{type:i,timeout:u,propCount:h}=uee(n,e);if(!i)return s();const m=i+"end";let p=0;const b=()=>{n.removeEventListener(m,x),r()},x=w=>{w.target===n&&++p>=h&&b()};setTimeout(()=>{p<h&&b()},u+1),n.addEventListener(m,x)}function uee(n,e){const a=window.getComputedStyle(n),s=$=>(a[$]||"").split(", "),o=s(`${wr}Delay`),r=s(`${wr}Duration`),i=FO(o,r),u=s(`${rd}Delay`),h=s(`${rd}Duration`),m=FO(u,h);let p=null,b=0,x=0;e===wr?i>0&&(p=wr,b=i,x=r.length):e===rd?m>0&&(p=rd,b=m,x=h.length):(b=Math.max(i,m),p=b>0?i>m?wr:rd:null,x=p?p===wr?r.length:h.length:0);const w=p===wr&&/\b(transform|all)(,|$)/.test(s(`${wr}Property`).toString());return{type:p,timeout:b,propCount:x,hasTransform:w}}function FO(n,e){for(;n.length<e.length;)n=n.concat(n);return Math.max(...e.map((a,s)=>jO(a)+jO(n[s])))}function jO(n){return n==="auto"?0:Number(n.slice(0,-1).replace(",","."))*1e3}function pee(){return document.body.offsetHeight}function hee(n,e,a){const s=n[Hd];s&&(e=(e?[e,...s]:[...s]).join(" ")),e==null?n.removeAttribute("class"):a?n.setAttribute("class",e):n.className=e}const HO=Symbol("_vod"),fee=Symbol("_vsh"),mee=Symbol(""),vee=/(^|;)\s*display\s*:/;function yee(n,e,a){const s=n.style,o=sn(a);let r=!1;if(a&&!o){if(e)if(sn(e))for(const i of e.split(";")){const u=i.slice(0,i.indexOf(":")).trim();a[u]==null&&D1(s,u,"")}else for(const i in e)a[i]==null&&D1(s,i,"");for(const i in a)i==="display"&&(r=!0),D1(s,i,a[i])}else if(o){if(e!==a){const i=s[mee];i&&(a+=";"+i),s.cssText=a,r=vee.test(a)}}else e&&n.removeAttribute("style");HO in n&&(n[HO]=r?s.display:"",n[fee]&&(s.display="none"))}const NO=/\s*!important$/;function D1(n,e,a){if(Tt(a))a.forEach(s=>D1(n,e,s));else if(a==null&&(a=""),e.startsWith("--"))n.setProperty(e,a);else{const s=_ee(n,e);NO.test(a)?n.setProperty(Ul(s),a.replace(NO,""),"important"):n[s]=a}}const zO=["Webkit","Moz","ms"],N$={};function _ee(n,e){const a=N$[e];if(a)return a;let s=Io(e);if(s!=="filter"&&s in n)return N$[e]=s;s=RL(s);for(let o=0;o<zO.length;o++){const r=zO[o]+s;if(r in n)return N$[e]=r}return e}const BO="http://www.w3.org/1999/xlink";function gee(n,e,a,s,o){if(s&&e.startsWith("xlink:"))a==null?n.removeAttributeNS(BO,e.slice(6,e.length)):n.setAttributeNS(BO,e,a);else{const r=wQ(e);a==null||r&&!QF(a)?n.removeAttribute(e):n.setAttribute(e,r?"":a)}}function kee(n,e,a,s,o,r,i){if(e==="innerHTML"||e==="textContent"){s&&i(s,o,r),n[e]=a??"";return}const u=n.tagName;if(e==="value"&&u!=="PROGRESS"&&!u.includes("-")){const m=u==="OPTION"?n.getAttribute("value")||"":n.value,p=a??"";(m!==p||!("_value"in n))&&(n.value=p),a==null&&n.removeAttribute(e),n._value=a;return}let h=!1;if(a===""||a==null){const m=typeof n[e];m==="boolean"?a=QF(a):a==null&&m==="string"?(a="",h=!0):m==="number"&&(a=0,h=!0)}try{n[e]=a}catch{}h&&n.removeAttribute(e)}function Xo(n,e,a,s){n.addEventListener(e,a,s)}function bee(n,e,a,s){n.removeEventListener(e,a,s)}const qO=Symbol("_vei");function wee(n,e,a,s,o=null){const r=n[qO]||(n[qO]={}),i=r[e];if(s&&i)i.value=s;else{const[u,h]=xee(e);if(s){const m=r[e]=See(s,o);Xo(n,u,m,h)}else i&&(bee(n,u,i,h),r[e]=void 0)}}const WO=/(?:Once|Passive|Capture)$/;function xee(n){let e;if(WO.test(n)){e={};let s;for(;s=n.match(WO);)n=n.slice(0,n.length-s[0].length),e[s[0].toLowerCase()]=!0}return[n[2]===":"?n.slice(3):Ul(n.slice(2)),e]}let z$=0;const Mee=Promise.resolve(),Cee=()=>z$||(Mee.then(()=>z$=0),z$=Date.now());function See(n,e){const a=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=a.attached)return;Vs(Iee(s,a.value),e,5,[s])};return a.value=n,a.attached=Cee(),a}function Iee(n,e){if(Tt(e)){const a=n.stopImmediatePropagation;return n.stopImmediatePropagation=()=>{a.call(n),n._stopped=!0},e.map(s=>o=>!o._stopped&&s&&s(o))}else return e}const GO=n=>n.charCodeAt(0)===111&&n.charCodeAt(1)===110&&n.charCodeAt(2)>96&&n.charCodeAt(2)<123,Lee=(n,e,a,s,o,r,i,u,h)=>{const m=o==="svg";e==="class"?hee(n,s,m):e==="style"?yee(n,a,s):PL(e)?aT(e)||wee(n,e,a,s,i):(e[0]==="."?(e=e.slice(1),!0):e[0]==="^"?(e=e.slice(1),!1):$ee(n,e,s,m))?kee(n,e,s,r,i,u,h):(e==="true-value"?n._trueValue=s:e==="false-value"&&(n._falseValue=s),gee(n,e,s,m))};function $ee(n,e,a,s){if(s)return!!(e==="innerHTML"||e==="textContent"||e in n&&GO(e)&&Yt(a));if(e==="spellcheck"||e==="draggable"||e==="translate"||e==="form"||e==="list"&&n.tagName==="INPUT"||e==="type"&&n.tagName==="TEXTAREA")return!1;if(e==="width"||e==="height"){const o=n.tagName;if(o==="IMG"||o==="VIDEO"||o==="CANVAS"||o==="SOURCE")return!1}return GO(e)&&sn(a)?!1:e in n}const Gr=n=>{const e=n.props["onUpdate:modelValue"]||!1;return Tt(e)?a=>A1(e,a):e};function Aee(n){n.target.composing=!0}function ZO(n){const e=n.target;e.composing&&(e.composing=!1,e.dispatchEvent(new Event("input")))}const Fs=Symbol("_assign"),Lo={created(n,{modifiers:{lazy:e,trim:a,number:s}},o){n[Fs]=Gr(o);const r=s||o.props&&o.props.type==="number";Xo(n,e?"change":"input",i=>{if(i.target.composing)return;let u=n.value;a&&(u=u.trim()),r&&(u=Od(u)),n[Fs](u)}),a&&Xo(n,"change",()=>{n.value=n.value.trim()}),e||(Xo(n,"compositionstart",Aee),Xo(n,"compositionend",ZO),Xo(n,"change",ZO))},mounted(n,{value:e}){n.value=e??""},beforeUpdate(n,{value:e,modifiers:{lazy:a,trim:s,number:o}},r){if(n[Fs]=Gr(r),n.composing)return;const i=o||n.type==="number"?Od(n.value):n.value,u=e??"";i!==u&&(document.activeElement===n&&n.type!=="range"&&(a||s&&n.value.trim()===u)||(n.value=u))}},Eee={deep:!0,created(n,e,a){n[Fs]=Gr(a),Xo(n,"change",()=>{const s=n._modelValue,o=kc(n),r=n.checked,i=n[Fs];if(Tt(s)){const u=rT(s,o),h=u!==-1;if(r&&!h)i(s.concat(o));else if(!r&&h){const m=[...s];m.splice(u,1),i(m)}}else if(Pc(s)){const u=new Set(s);r?u.add(o):u.delete(o),i(u)}else i(eH(n,r))})},mounted:KO,beforeUpdate(n,e,a){n[Fs]=Gr(a),KO(n,e,a)}};function KO(n,{value:e,oldValue:a},s){n._modelValue=e,Tt(e)?n.checked=rT(e,s.props.value)>-1:Pc(e)?n.checked=e.has(s.props.value):e!==a&&(n.checked=Rl(e,eH(n,!0)))}const Tee={created(n,{value:e},a){n.checked=Rl(e,a.props.value),n[Fs]=Gr(a),Xo(n,"change",()=>{n[Fs](kc(n))})},beforeUpdate(n,{value:e,oldValue:a},s){n[Fs]=Gr(s),e!==a&&(n.checked=Rl(e,s.props.value))}},Jj={deep:!0,created(n,{value:e,modifiers:{number:a}},s){const o=Pc(e);Xo(n,"change",()=>{const r=Array.prototype.filter.call(n.options,i=>i.selected).map(i=>a?Od(kc(i)):kc(i));n[Fs](n.multiple?o?new Set(r):r:r[0]),n._assigning=!0,En(()=>{n._assigning=!1})}),n[Fs]=Gr(s)},mounted(n,{value:e,modifiers:{number:a}}){XO(n,e,a)},beforeUpdate(n,e,a){n[Fs]=Gr(a)},updated(n,{value:e,modifiers:{number:a}}){n._assigning||XO(n,e,a)}};function XO(n,e,a){const s=n.multiple,o=Tt(e);if(!(s&&!o&&!Pc(e))){for(let r=0,i=n.options.length;r<i;r++){const u=n.options[r],h=kc(u);if(s)if(o){const m=typeof h;m==="string"||m==="number"?u.selected=e.includes(a?Od(h):h):u.selected=rT(e,h)>-1}else u.selected=e.has(h);else if(Rl(kc(u),e)){n.selectedIndex!==r&&(n.selectedIndex=r);return}}!s&&n.selectedIndex!==-1&&(n.selectedIndex=-1)}}function kc(n){return"_value"in n?n._value:n.value}function eH(n,e){const a=e?"_trueValue":"_falseValue";return a in n?n[a]:e}const MT={created(n,e,a){y1(n,e,a,null,"created")},mounted(n,e,a){y1(n,e,a,null,"mounted")},beforeUpdate(n,e,a,s){y1(n,e,a,s,"beforeUpdate")},updated(n,e,a,s){y1(n,e,a,s,"updated")}};function Pee(n,e){switch(n){case"SELECT":return Jj;case"TEXTAREA":return Lo;default:switch(e){case"checkbox":return Eee;case"radio":return Tee;default:return Lo}}}function y1(n,e,a,s,o){const i=Pee(n.tagName,a.props&&a.props.type)[o];i&&i(n,e,a,s)}const Dee=["ctrl","shift","alt","meta"],Ree={stop:n=>n.stopPropagation(),prevent:n=>n.preventDefault(),self:n=>n.target!==n.currentTarget,ctrl:n=>!n.ctrlKey,shift:n=>!n.shiftKey,alt:n=>!n.altKey,meta:n=>!n.metaKey,left:n=>"button"in n&&n.button!==0,middle:n=>"button"in n&&n.button!==1,right:n=>"button"in n&&n.button!==2,exact:(n,e)=>Dee.some(a=>n[`${a}Key`]&&!e.includes(a))},Rt=(n,e)=>{const a=n._withMods||(n._withMods={}),s=e.join(".");return a[s]||(a[s]=(o,...r)=>{for(let i=0;i<e.length;i++){const u=Ree[e[i]];if(u&&u(o,e))return}return n(o,...r)})},Oee={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},KA=(n,e)=>{const a=n._withKeys||(n._withKeys={}),s=e.join(".");return a[s]||(a[s]=o=>{if(!("key"in o))return;const r=Ul(o.key);if(e.some(i=>i===r||Oee[i]===r))return n(o)})},Vee=Mn({patchProp:Lee},iee);let YO;function Uee(){return YO||(YO=FJ(Vee))}const Fee=(...n)=>{const e=Uee().createApp(...n),{mount:a}=e;return e.mount=s=>{const o=Hee(s);if(!o)return;const r=e._component;!Yt(r)&&!r.render&&!r.template&&(r.template=o.innerHTML),o.innerHTML="";const i=a(o,!1,jee(o));return o instanceof Element&&(o.removeAttribute("v-cloak"),o.setAttribute("data-v-app","")),i},e};function jee(n){if(n instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&n instanceof MathMLElement)return"mathml"}function Hee(n){return sn(n)?document.querySelector(n):n}var Nee=!1;/*!
+ * pinia v2.1.7
+ * (c) 2023 Eduardo San Martin Morote
+ * @license MIT
+ */let tH;const WL=n=>tH=n,aH=Symbol();function XA(n){return n&&typeof n=="object"&&Object.prototype.toString.call(n)==="[object Object]"&&typeof n.toJSON!="function"}var Sd;(function(n){n.direct="direct",n.patchObject="patch object",n.patchFunction="patch function"})(Sd||(Sd={}));function zee(){const n=iT(!0),e=n.run(()=>O({}));let a=[],s=[];const o=VL({install(r){WL(o),o._a=r,r.provide(aH,o),r.config.globalProperties.$pinia=o,s.forEach(i=>a.push(i)),s=[]},use(r){return!this._a&&!Nee?s.push(r):a.push(r),this},_p:a,_a:null,_e:n,_s:new Map,state:e});return o}const nH=()=>{};function QO(n,e,a,s=nH){n.push(e);const o=()=>{const r=n.indexOf(e);r>-1&&(n.splice(r,1),s())};return!a&&tj()&&CQ(o),o}function rc(n,...e){n.slice().forEach(a=>{a(...e)})}const Bee=n=>n();function YA(n,e){n instanceof Map&&e instanceof Map&&e.forEach((a,s)=>n.set(s,a)),n instanceof Set&&e instanceof Set&&e.forEach(n.add,n);for(const a in e){if(!e.hasOwnProperty(a))continue;const s=e[a],o=n[a];XA(o)&&XA(s)&&n.hasOwnProperty(a)&&!on(s)&&!tr(s)?n[a]=YA(o,s):n[a]=s}return n}const qee=Symbol();function Wee(n){return!XA(n)||!n.hasOwnProperty(qee)}const{assign:Tr}=Object;function Gee(n){return!!(on(n)&&n.effect)}function Zee(n,e,a,s){const{state:o,actions:r,getters:i}=e,u=a.state.value[n];let h;function m(){u||(a.state.value[n]=o?o():{});const p=KQ(a.state.value[n]);return Tr(p,r,Object.keys(i||{}).reduce((b,x)=>(b[x]=VL(ee(()=>{WL(a);const w=a._s.get(n);return i[x].call(w,w)})),b),{}))}return h=sH(n,m,e,a,s,!0),h}function sH(n,e,a={},s,o,r){let i;const u=Tr({actions:{}},a),h={deep:!0};let m,p,b=[],x=[],w;const $=s.state.value[n];!r&&!$&&(s.state.value[n]={}),O({});let D;function V(v){let T;m=p=!1,typeof v=="function"?(v(s.state.value[n]),T={type:Sd.patchFunction,storeId:n,events:w}):(YA(s.state.value[n],v),T={type:Sd.patchObject,payload:v,storeId:n,events:w});const j=D=Symbol();En().then(()=>{D===j&&(m=!0)}),p=!0,rc(b,T,s.state.value[n])}const R=r?function(){const{state:T}=a,j=T?T():{};this.$patch(B=>{Tr(B,j)})}:nH;function E(){i.stop(),b=[],x=[],s._s.delete(n)}function P(v,T){return function(){WL(s);const j=Array.from(arguments),B=[],oe=[];function be(de){B.push(de)}function $e(de){oe.push(de)}rc(x,{args:j,name:v,store:C,after:be,onError:$e});let Le;try{Le=T.apply(this&&this.$id===n?this:C,j)}catch(de){throw rc(oe,de),de}return Le instanceof Promise?Le.then(de=>(rc(B,de),de)).catch(de=>(rc(oe,de),Promise.reject(de))):(rc(B,Le),Le)}}const S={_p:s,$id:n,$onAction:QO.bind(null,x),$patch:V,$reset:R,$subscribe(v,T={}){const j=QO(b,v,T.detached,()=>B()),B=i.run(()=>dt(()=>s.state.value[n],oe=>{(T.flush==="sync"?p:m)&&v({storeId:n,type:Sd.direct,events:w},oe)},Tr({},h,T)));return j},$dispose:E},C=gn(S);s._s.set(n,C);const g=(s._a&&s._a.runWithContext||Bee)(()=>s._e.run(()=>(i=iT()).run(e)));for(const v in g){const T=g[v];if(on(T)&&!Gee(T)||tr(T))r||($&&Wee(T)&&(on(T)?T.value=$[v]:YA(T,$[v])),s.state.value[n][v]=T);else if(typeof T=="function"){const j=P(v,T);g[v]=j,u.actions[v]=T}}return Tr(C,g),Tr(pa(C),g),Object.defineProperty(C,"$state",{get:()=>s.state.value[n],set:v=>{V(T=>{Tr(T,v)})}}),s._p.forEach(v=>{Tr(C,i.run(()=>v({store:C,app:s._a,pinia:s,options:u})))}),$&&r&&a.hydrate&&a.hydrate(C.$state,$),m=!0,p=!0,C}function Qr(n,e,a){let s,o;const r=typeof e=="function";typeof n=="string"?(s=n,o=r?a:e):(o=n,s=n.id);function i(u,h){const m=PJ();return u=u||(m?xt(aH,null):null),u&&WL(u),u=tH,u._s.has(s)||(r?sH(s,e,o,u):Zee(s,o,u)),u._s.get(s)}return i.$id=s,i}function Kee(n){{n=pa(n);const e={};for(const a in n){const s=n[a];(on(s)||tr(s))&&(e[a]=An(n,a))}return e}}const Dc=(n,e)=>{const a=n.__vccOpts||n;for(const[s,o]of e)a[s]=o;return a},Xee={};function Yee(n,e){const a=Qt("RouterView");return L(),ge(a)}const Qee=Dc(Xee,[["render",Yee]]);/*!
+  * vue-router v4.3.0
+  * (c) 2024 Eduardo San Martin Morote
+  * @license MIT
+  */const ic=typeof document<"u";function Jee(n){return n.__esModule||n[Symbol.toStringTag]==="Module"}const $a=Object.assign;function B$(n,e){const a={};for(const s in e){const o=e[s];a[s]=so(o)?o.map(n):n(o)}return a}const Id=()=>{},so=Array.isArray,oH=/#/g,ete=/&/g,tte=/\//g,ate=/=/g,nte=/\?/g,rH=/\+/g,ste=/%5B/g,ote=/%5D/g,iH=/%5E/g,rte=/%60/g,lH=/%7B/g,ite=/%7C/g,cH=/%7D/g,lte=/%20/g;function CT(n){return encodeURI(""+n).replace(ite,"|").replace(ste,"[").replace(ote,"]")}function cte(n){return CT(n).replace(lH,"{").replace(cH,"}").replace(iH,"^")}function QA(n){return CT(n).replace(rH,"%2B").replace(lte,"+").replace(oH,"%23").replace(ete,"%26").replace(rte,"`").replace(lH,"{").replace(cH,"}").replace(iH,"^")}function dte(n){return QA(n).replace(ate,"%3D")}function ute(n){return CT(n).replace(oH,"%23").replace(nte,"%3F")}function pte(n){return n==null?"":ute(n).replace(tte,"%2F")}function Nd(n){try{return decodeURIComponent(""+n)}catch{}return""+n}const hte=/\/$/,fte=n=>n.replace(hte,"");function q$(n,e,a="/"){let s,o={},r="",i="";const u=e.indexOf("#");let h=e.indexOf("?");return u<h&&u>=0&&(h=-1),h>-1&&(s=e.slice(0,h),r=e.slice(h+1,u>-1?u:e.length),o=n(r)),u>-1&&(s=s||e.slice(0,u),i=e.slice(u,e.length)),s=_te(s??e,a),{fullPath:s+(r&&"?")+r+i,path:s,query:o,hash:Nd(i)}}function mte(n,e){const a=e.query?n(e.query):"";return e.path+(a&&"?")+a+(e.hash||"")}function JO(n,e){return!e||!n.toLowerCase().startsWith(e.toLowerCase())?n:n.slice(e.length)||"/"}function vte(n,e,a){const s=e.matched.length-1,o=a.matched.length-1;return s>-1&&s===o&&bc(e.matched[s],a.matched[o])&&dH(e.params,a.params)&&n(e.query)===n(a.query)&&e.hash===a.hash}function bc(n,e){return(n.aliasOf||n)===(e.aliasOf||e)}function dH(n,e){if(Object.keys(n).length!==Object.keys(e).length)return!1;for(const a in n)if(!yte(n[a],e[a]))return!1;return!0}function yte(n,e){return so(n)?eV(n,e):so(e)?eV(e,n):n===e}function eV(n,e){return so(e)?n.length===e.length&&n.every((a,s)=>a===e[s]):n.length===1&&n[0]===e}function _te(n,e){if(n.startsWith("/"))return n;if(!n)return e;const a=e.split("/"),s=n.split("/"),o=s[s.length-1];(o===".."||o===".")&&s.push("");let r=a.length-1,i,u;for(i=0;i<s.length;i++)if(u=s[i],u!==".")if(u==="..")r>1&&r--;else break;return a.slice(0,r).join("/")+"/"+s.slice(i).join("/")}var zd;(function(n){n.pop="pop",n.push="push"})(zd||(zd={}));var Ld;(function(n){n.back="back",n.forward="forward",n.unknown=""})(Ld||(Ld={}));function gte(n){if(!n)if(ic){const e=document.querySelector("base");n=e&&e.getAttribute("href")||"/",n=n.replace(/^\w+:\/\/[^\/]+/,"")}else n="/";return n[0]!=="/"&&n[0]!=="#"&&(n="/"+n),fte(n)}const kte=/^[^#]+#/;function bte(n,e){return n.replace(kte,"#")+e}function wte(n,e){const a=document.documentElement.getBoundingClientRect(),s=n.getBoundingClientRect();return{behavior:e.behavior,left:s.left-a.left-(e.left||0),top:s.top-a.top-(e.top||0)}}const GL=()=>({left:window.scrollX,top:window.scrollY});function xte(n){let e;if("el"in n){const a=n.el,s=typeof a=="string"&&a.startsWith("#"),o=typeof a=="string"?s?document.getElementById(a.slice(1)):document.querySelector(a):a;if(!o)return;e=wte(o,n)}else e=n;"scrollBehavior"in document.documentElement.style?window.scrollTo(e):window.scrollTo(e.left!=null?e.left:window.scrollX,e.top!=null?e.top:window.scrollY)}function tV(n,e){return(history.state?history.state.position-e:-1)+n}const JA=new Map;function Mte(n,e){JA.set(n,e)}function Cte(n){const e=JA.get(n);return JA.delete(n),e}let Ste=()=>location.protocol+"//"+location.host;function uH(n,e){const{pathname:a,search:s,hash:o}=e,r=n.indexOf("#");if(r>-1){let u=o.includes(n.slice(r))?n.slice(r).length:1,h=o.slice(u);return h[0]!=="/"&&(h="/"+h),JO(h,"")}return JO(a,n)+s+o}function Ite(n,e,a,s){let o=[],r=[],i=null;const u=({state:x})=>{const w=uH(n,location),$=a.value,D=e.value;let V=0;if(x){if(a.value=w,e.value=x,i&&i===$){i=null;return}V=D?x.position-D.position:0}else s(w);o.forEach(R=>{R(a.value,$,{delta:V,type:zd.pop,direction:V?V>0?Ld.forward:Ld.back:Ld.unknown})})};function h(){i=a.value}function m(x){o.push(x);const w=()=>{const $=o.indexOf(x);$>-1&&o.splice($,1)};return r.push(w),w}function p(){const{history:x}=window;x.state&&x.replaceState($a({},x.state,{scroll:GL()}),"")}function b(){for(const x of r)x();r=[],window.removeEventListener("popstate",u),window.removeEventListener("beforeunload",p)}return window.addEventListener("popstate",u),window.addEventListener("beforeunload",p,{passive:!0}),{pauseListeners:h,listen:m,destroy:b}}function aV(n,e,a,s=!1,o=!1){return{back:n,current:e,forward:a,replaced:s,position:window.history.length,scroll:o?GL():null}}function Lte(n){const{history:e,location:a}=window,s={value:uH(n,a)},o={value:e.state};o.value||r(s.value,{back:null,current:s.value,forward:null,position:e.length-1,replaced:!0,scroll:null},!0);function r(h,m,p){const b=n.indexOf("#"),x=b>-1?(a.host&&document.querySelector("base")?n:n.slice(b))+h:Ste()+n+h;try{e[p?"replaceState":"pushState"](m,"",x),o.value=m}catch(w){console.error(w),a[p?"replace":"assign"](x)}}function i(h,m){const p=$a({},e.state,aV(o.value.back,h,o.value.forward,!0),m,{position:o.value.position});r(h,p,!0),s.value=h}function u(h,m){const p=$a({},o.value,e.state,{forward:h,scroll:GL()});r(p.current,p,!0);const b=$a({},aV(s.value,h,null),{position:p.position+1},m);r(h,b,!1),s.value=h}return{location:s,state:o,push:u,replace:i}}function $te(n){n=gte(n);const e=Lte(n),a=Ite(n,e.state,e.location,e.replace);function s(r,i=!0){i||a.pauseListeners(),history.go(r)}const o=$a({location:"",base:n,go:s,createHref:bte.bind(null,n)},e,a);return Object.defineProperty(o,"location",{enumerable:!0,get:()=>e.location.value}),Object.defineProperty(o,"state",{enumerable:!0,get:()=>e.state.value}),o}function Ate(n){return typeof n=="string"||n&&typeof n=="object"}function pH(n){return typeof n=="string"||typeof n=="symbol"}const Mr={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},hH=Symbol("");var nV;(function(n){n[n.aborted=4]="aborted",n[n.cancelled=8]="cancelled",n[n.duplicated=16]="duplicated"})(nV||(nV={}));function wc(n,e){return $a(new Error,{type:n,[hH]:!0},e)}function qo(n,e){return n instanceof Error&&hH in n&&(e==null||!!(n.type&e))}const sV="[^/]+?",Ete={sensitive:!1,strict:!1,start:!0,end:!0},Tte=/[.+*?^${}()[\]/\\]/g;function Pte(n,e){const a=$a({},Ete,e),s=[];let o=a.start?"^":"";const r=[];for(const m of n){const p=m.length?[]:[90];a.strict&&!m.length&&(o+="/");for(let b=0;b<m.length;b++){const x=m[b];let w=40+(a.sensitive?.25:0);if(x.type===0)b||(o+="/"),o+=x.value.replace(Tte,"\\$&"),w+=40;else if(x.type===1){const{value:$,repeatable:D,optional:V,regexp:R}=x;r.push({name:$,repeatable:D,optional:V});const E=R||sV;if(E!==sV){w+=10;try{new RegExp(`(${E})`)}catch(S){throw new Error(`Invalid custom RegExp for param "${$}" (${E}): `+S.message)}}let P=D?`((?:${E})(?:/(?:${E}))*)`:`(${E})`;b||(P=V&&m.length<2?`(?:/${P})`:"/"+P),V&&(P+="?"),o+=P,w+=20,V&&(w+=-8),D&&(w+=-20),E===".*"&&(w+=-50)}p.push(w)}s.push(p)}if(a.strict&&a.end){const m=s.length-1;s[m][s[m].length-1]+=.7000000000000001}a.strict||(o+="/?"),a.end?o+="$":a.strict&&(o+="(?:/|$)");const i=new RegExp(o,a.sensitive?"":"i");function u(m){const p=m.match(i),b={};if(!p)return null;for(let x=1;x<p.length;x++){const w=p[x]||"",$=r[x-1];b[$.name]=w&&$.repeatable?w.split("/"):w}return b}function h(m){let p="",b=!1;for(const x of n){(!b||!p.endsWith("/"))&&(p+="/"),b=!1;for(const w of x)if(w.type===0)p+=w.value;else if(w.type===1){const{value:$,repeatable:D,optional:V}=w,R=$ in m?m[$]:"";if(so(R)&&!D)throw new Error(`Provided param "${$}" is an array but it is not repeatable (* or + modifiers)`);const E=so(R)?R.join("/"):R;if(!E)if(V)x.length<2&&(p.endsWith("/")?p=p.slice(0,-1):b=!0);else throw new Error(`Missing required param "${$}"`);p+=E}}return p||"/"}return{re:i,score:s,keys:r,parse:u,stringify:h}}function Dte(n,e){let a=0;for(;a<n.length&&a<e.length;){const s=e[a]-n[a];if(s)return s;a++}return n.length<e.length?n.length===1&&n[0]===80?-1:1:n.length>e.length?e.length===1&&e[0]===80?1:-1:0}function Rte(n,e){let a=0;const s=n.score,o=e.score;for(;a<s.length&&a<o.length;){const r=Dte(s[a],o[a]);if(r)return r;a++}if(Math.abs(o.length-s.length)===1){if(oV(s))return 1;if(oV(o))return-1}return o.length-s.length}function oV(n){const e=n[n.length-1];return n.length>0&&e[e.length-1]<0}const Ote={type:0,value:""},Vte=/[a-zA-Z0-9_]/;function Ute(n){if(!n)return[[]];if(n==="/")return[[Ote]];if(!n.startsWith("/"))throw new Error(`Invalid path "${n}"`);function e(w){throw new Error(`ERR (${a})/"${m}": ${w}`)}let a=0,s=a;const o=[];let r;function i(){r&&o.push(r),r=[]}let u=0,h,m="",p="";function b(){m&&(a===0?r.push({type:0,value:m}):a===1||a===2||a===3?(r.length>1&&(h==="*"||h==="+")&&e(`A repeatable param (${m}) must be alone in its segment. eg: '/:ids+.`),r.push({type:1,value:m,regexp:p,repeatable:h==="*"||h==="+",optional:h==="*"||h==="?"})):e("Invalid state to consume buffer"),m="")}function x(){m+=h}for(;u<n.length;){if(h=n[u++],h==="\\"&&a!==2){s=a,a=4;continue}switch(a){case 0:h==="/"?(m&&b(),i()):h===":"?(b(),a=1):x();break;case 4:x(),a=s;break;case 1:h==="("?a=2:Vte.test(h)?x():(b(),a=0,h!=="*"&&h!=="?"&&h!=="+"&&u--);break;case 2:h===")"?p[p.length-1]=="\\"?p=p.slice(0,-1)+h:a=3:p+=h;break;case 3:b(),a=0,h!=="*"&&h!=="?"&&h!=="+"&&u--,p="";break;default:e("Unknown state");break}}return a===2&&e(`Unfinished custom RegExp for param "${m}"`),b(),i(),o}function Fte(n,e,a){const s=Pte(Ute(n.path),a),o=$a(s,{record:n,parent:e,children:[],alias:[]});return e&&!o.record.aliasOf==!e.record.aliasOf&&e.children.push(o),o}function jte(n,e){const a=[],s=new Map;e=lV({strict:!1,end:!0,sensitive:!1},e);function o(p){return s.get(p)}function r(p,b,x){const w=!x,$=Hte(p);$.aliasOf=x&&x.record;const D=lV(e,p),V=[$];if("alias"in p){const P=typeof p.alias=="string"?[p.alias]:p.alias;for(const S of P)V.push($a({},$,{components:x?x.record.components:$.components,path:S,aliasOf:x?x.record:$}))}let R,E;for(const P of V){const{path:S}=P;if(b&&S[0]!=="/"){const C=b.record.path,M=C[C.length-1]==="/"?"":"/";P.path=b.record.path+(S&&M+S)}if(R=Fte(P,b,D),x?x.alias.push(R):(E=E||R,E!==R&&E.alias.push(R),w&&p.name&&!iV(R)&&i(p.name)),$.children){const C=$.children;for(let M=0;M<C.length;M++)r(C[M],R,x&&x.children[M])}x=x||R,(R.record.components&&Object.keys(R.record.components).length||R.record.name||R.record.redirect)&&h(R)}return E?()=>{i(E)}:Id}function i(p){if(pH(p)){const b=s.get(p);b&&(s.delete(p),a.splice(a.indexOf(b),1),b.children.forEach(i),b.alias.forEach(i))}else{const b=a.indexOf(p);b>-1&&(a.splice(b,1),p.record.name&&s.delete(p.record.name),p.children.forEach(i),p.alias.forEach(i))}}function u(){return a}function h(p){let b=0;for(;b<a.length&&Rte(p,a[b])>=0&&(p.record.path!==a[b].record.path||!fH(p,a[b]));)b++;a.splice(b,0,p),p.record.name&&!iV(p)&&s.set(p.record.name,p)}function m(p,b){let x,w={},$,D;if("name"in p&&p.name){if(x=s.get(p.name),!x)throw wc(1,{location:p});D=x.record.name,w=$a(rV(b.params,x.keys.filter(E=>!E.optional).concat(x.parent?x.parent.keys.filter(E=>E.optional):[]).map(E=>E.name)),p.params&&rV(p.params,x.keys.map(E=>E.name))),$=x.stringify(w)}else if(p.path!=null)$=p.path,x=a.find(E=>E.re.test($)),x&&(w=x.parse($),D=x.record.name);else{if(x=b.name?s.get(b.name):a.find(E=>E.re.test(b.path)),!x)throw wc(1,{location:p,currentLocation:b});D=x.record.name,w=$a({},b.params,p.params),$=x.stringify(w)}const V=[];let R=x;for(;R;)V.unshift(R.record),R=R.parent;return{name:D,path:$,params:w,matched:V,meta:zte(V)}}return n.forEach(p=>r(p)),{addRoute:r,resolve:m,removeRoute:i,getRoutes:u,getRecordMatcher:o}}function rV(n,e){const a={};for(const s of e)s in n&&(a[s]=n[s]);return a}function Hte(n){return{path:n.path,redirect:n.redirect,name:n.name,meta:n.meta||{},aliasOf:void 0,beforeEnter:n.beforeEnter,props:Nte(n),children:n.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in n?n.components||null:n.component&&{default:n.component}}}function Nte(n){const e={},a=n.props||!1;if("component"in n)e.default=a;else for(const s in n.components)e[s]=typeof a=="object"?a[s]:a;return e}function iV(n){for(;n;){if(n.record.aliasOf)return!0;n=n.parent}return!1}function zte(n){return n.reduce((e,a)=>$a(e,a.meta),{})}function lV(n,e){const a={};for(const s in n)a[s]=s in e?e[s]:n[s];return a}function fH(n,e){return e.children.some(a=>a===n||fH(n,a))}function Bte(n){const e={};if(n===""||n==="?")return e;const s=(n[0]==="?"?n.slice(1):n).split("&");for(let o=0;o<s.length;++o){const r=s[o].replace(rH," "),i=r.indexOf("="),u=Nd(i<0?r:r.slice(0,i)),h=i<0?null:Nd(r.slice(i+1));if(u in e){let m=e[u];so(m)||(m=e[u]=[m]),m.push(h)}else e[u]=h}return e}function cV(n){let e="";for(let a in n){const s=n[a];if(a=dte(a),s==null){s!==void 0&&(e+=(e.length?"&":"")+a);continue}(so(s)?s.map(r=>r&&QA(r)):[s&&QA(s)]).forEach(r=>{r!==void 0&&(e+=(e.length?"&":"")+a,r!=null&&(e+="="+r))})}return e}function qte(n){const e={};for(const a in n){const s=n[a];s!==void 0&&(e[a]=so(s)?s.map(o=>o==null?null:""+o):s==null?s:""+s)}return e}const Wte=Symbol(""),dV=Symbol(""),ZL=Symbol(""),ST=Symbol(""),eE=Symbol("");function id(){let n=[];function e(s){return n.push(s),()=>{const o=n.indexOf(s);o>-1&&n.splice(o,1)}}function a(){n=[]}return{add:e,list:()=>n.slice(),reset:a}}function Vr(n,e,a,s,o,r=i=>i()){const i=s&&(s.enterCallbacks[o]=s.enterCallbacks[o]||[]);return()=>new Promise((u,h)=>{const m=x=>{x===!1?h(wc(4,{from:a,to:e})):x instanceof Error?h(x):Ate(x)?h(wc(2,{from:e,to:x})):(i&&s.enterCallbacks[o]===i&&typeof x=="function"&&i.push(x),u())},p=r(()=>n.call(s&&s.instances[o],e,a,m));let b=Promise.resolve(p);n.length<3&&(b=b.then(m)),b.catch(x=>h(x))})}function W$(n,e,a,s,o=r=>r()){const r=[];for(const i of n)for(const u in i.components){let h=i.components[u];if(!(e!=="beforeRouteEnter"&&!i.instances[u]))if(Gte(h)){const p=(h.__vccOpts||h)[e];p&&r.push(Vr(p,a,s,i,u,o))}else{let m=h();r.push(()=>m.then(p=>{if(!p)return Promise.reject(new Error(`Couldn't resolve component "${u}" at "${i.path}"`));const b=Jee(p)?p.default:p;i.components[u]=b;const w=(b.__vccOpts||b)[e];return w&&Vr(w,a,s,i,u,o)()}))}}return r}function Gte(n){return typeof n=="object"||"displayName"in n||"props"in n||"__vccOpts"in n}function uV(n){const e=xt(ZL),a=xt(ST),s=ee(()=>e.resolve(t(n.to))),o=ee(()=>{const{matched:h}=s.value,{length:m}=h,p=h[m-1],b=a.matched;if(!p||!b.length)return-1;const x=b.findIndex(bc.bind(null,p));if(x>-1)return x;const w=pV(h[m-2]);return m>1&&pV(p)===w&&b[b.length-1].path!==w?b.findIndex(bc.bind(null,h[m-2])):x}),r=ee(()=>o.value>-1&&Yte(a.params,s.value.params)),i=ee(()=>o.value>-1&&o.value===a.matched.length-1&&dH(a.params,s.value.params));function u(h={}){return Xte(h)?e[t(n.replace)?"replace":"push"](t(n.to)).catch(Id):Promise.resolve()}return{route:s,href:ee(()=>s.value.href),isActive:r,isExactActive:i,navigate:u}}const Zte=Ce({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:uV,setup(n,{slots:e}){const a=gn(uV(n)),{options:s}=xt(ZL),o=ee(()=>({[hV(n.activeClass,s.linkActiveClass,"router-link-active")]:a.isActive,[hV(n.exactActiveClass,s.linkExactActiveClass,"router-link-exact-active")]:a.isExactActive}));return()=>{const r=e.default&&e.default(a);return n.custom?r:ya("a",{"aria-current":a.isExactActive?n.ariaCurrentValue:null,href:a.href,onClick:a.navigate,class:o.value},r)}}}),Kte=Zte;function Xte(n){if(!(n.metaKey||n.altKey||n.ctrlKey||n.shiftKey)&&!n.defaultPrevented&&!(n.button!==void 0&&n.button!==0)){if(n.currentTarget&&n.currentTarget.getAttribute){const e=n.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(e))return}return n.preventDefault&&n.preventDefault(),!0}}function Yte(n,e){for(const a in e){const s=e[a],o=n[a];if(typeof s=="string"){if(s!==o)return!1}else if(!so(o)||o.length!==s.length||s.some((r,i)=>r!==o[i]))return!1}return!0}function pV(n){return n?n.aliasOf?n.aliasOf.path:n.path:""}const hV=(n,e,a)=>n??e??a,Qte=Ce({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(n,{attrs:e,slots:a}){const s=xt(eE),o=ee(()=>n.route||s.value),r=xt(dV,0),i=ee(()=>{let m=t(r);const{matched:p}=o.value;let b;for(;(b=p[m])&&!b.components;)m++;return m}),u=ee(()=>o.value.matched[i.value]);St(dV,ee(()=>i.value+1)),St(Wte,u),St(eE,o);const h=O();return dt(()=>[h.value,u.value,n.name],([m,p,b],[x,w,$])=>{p&&(p.instances[b]=m,w&&w!==p&&m&&m===x&&(p.leaveGuards.size||(p.leaveGuards=w.leaveGuards),p.updateGuards.size||(p.updateGuards=w.updateGuards))),m&&p&&(!w||!bc(p,w)||!x)&&(p.enterCallbacks[b]||[]).forEach(D=>D(m))},{flush:"post"}),()=>{const m=o.value,p=n.name,b=u.value,x=b&&b.components[p];if(!x)return fV(a.default,{Component:x,route:m});const w=b.props[p],$=w?w===!0?m.params:typeof w=="function"?w(m):w:null,V=ya(x,$a({},$,e,{onVnodeUnmounted:R=>{R.component.isUnmounted&&(b.instances[p]=null)},ref:h}));return fV(a.default,{Component:V,route:m})||V}}});function fV(n,e){if(!n)return null;const a=n(e);return a.length===1?a[0]:a}const Jte=Qte;function eae(n){const e=jte(n.routes,n),a=n.parseQuery||Bte,s=n.stringifyQuery||cV,o=n.history,r=id(),i=id(),u=id(),h=UL(Mr);let m=Mr;ic&&n.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const p=B$.bind(null,Ae=>""+Ae),b=B$.bind(null,pte),x=B$.bind(null,Nd);function w(Ae,Xe){let ie,Y;return pH(Ae)?(ie=e.getRecordMatcher(Ae),Y=Xe):Y=Ae,e.addRoute(Y,ie)}function $(Ae){const Xe=e.getRecordMatcher(Ae);Xe&&e.removeRoute(Xe)}function D(){return e.getRoutes().map(Ae=>Ae.record)}function V(Ae){return!!e.getRecordMatcher(Ae)}function R(Ae,Xe){if(Xe=$a({},Xe||h.value),typeof Ae=="string"){const N=q$(a,Ae,Xe.path),Q=e.resolve({path:N.path},Xe),he=o.createHref(N.fullPath);return $a(N,Q,{params:x(Q.params),hash:Nd(N.hash),redirectedFrom:void 0,href:he})}let ie;if(Ae.path!=null)ie=$a({},Ae,{path:q$(a,Ae.path,Xe.path).path});else{const N=$a({},Ae.params);for(const Q in N)N[Q]==null&&delete N[Q];ie=$a({},Ae,{params:b(N)}),Xe.params=b(Xe.params)}const Y=e.resolve(ie,Xe),ue=Ae.hash||"";Y.params=p(x(Y.params));const pe=mte(s,$a({},Ae,{hash:cte(ue),path:Y.path})),H=o.createHref(pe);return $a({fullPath:pe,hash:ue,query:s===cV?qte(Ae.query):Ae.query||{}},Y,{redirectedFrom:void 0,href:H})}function E(Ae){return typeof Ae=="string"?q$(a,Ae,h.value.path):$a({},Ae)}function P(Ae,Xe){if(m!==Ae)return wc(8,{from:Xe,to:Ae})}function S(Ae){return g(Ae)}function C(Ae){return S($a(E(Ae),{replace:!0}))}function M(Ae){const Xe=Ae.matched[Ae.matched.length-1];if(Xe&&Xe.redirect){const{redirect:ie}=Xe;let Y=typeof ie=="function"?ie(Ae):ie;return typeof Y=="string"&&(Y=Y.includes("?")||Y.includes("#")?Y=E(Y):{path:Y},Y.params={}),$a({query:Ae.query,hash:Ae.hash,params:Y.path!=null?{}:Ae.params},Y)}}function g(Ae,Xe){const ie=m=R(Ae),Y=h.value,ue=Ae.state,pe=Ae.force,H=Ae.replace===!0,N=M(ie);if(N)return g($a(E(N),{state:typeof N=="object"?$a({},ue,N.state):ue,force:pe,replace:H}),Xe||ie);const Q=ie;Q.redirectedFrom=Xe;let he;return!pe&&vte(s,Y,ie)&&(he=wc(16,{to:Q,from:Y}),He(Y,Y,!0,!1)),(he?Promise.resolve(he):j(Q,Y)).catch(Se=>qo(Se)?qo(Se,2)?Se:Ee(Se):G(Se,Q,Y)).then(Se=>{if(Se){if(qo(Se,2))return g($a({replace:H},E(Se.to),{state:typeof Se.to=="object"?$a({},ue,Se.to.state):ue,force:pe}),Xe||Q)}else Se=oe(Q,Y,!0,H,ue);return B(Q,Y,Se),Se})}function v(Ae,Xe){const ie=P(Ae,Xe);return ie?Promise.reject(ie):Promise.resolve()}function T(Ae){const Xe=ut.values().next().value;return Xe&&typeof Xe.runWithContext=="function"?Xe.runWithContext(Ae):Ae()}function j(Ae,Xe){let ie;const[Y,ue,pe]=tae(Ae,Xe);ie=W$(Y.reverse(),"beforeRouteLeave",Ae,Xe);for(const N of Y)N.leaveGuards.forEach(Q=>{ie.push(Vr(Q,Ae,Xe))});const H=v.bind(null,Ae,Xe);return ie.push(H),kt(ie).then(()=>{ie=[];for(const N of r.list())ie.push(Vr(N,Ae,Xe));return ie.push(H),kt(ie)}).then(()=>{ie=W$(ue,"beforeRouteUpdate",Ae,Xe);for(const N of ue)N.updateGuards.forEach(Q=>{ie.push(Vr(Q,Ae,Xe))});return ie.push(H),kt(ie)}).then(()=>{ie=[];for(const N of pe)if(N.beforeEnter)if(so(N.beforeEnter))for(const Q of N.beforeEnter)ie.push(Vr(Q,Ae,Xe));else ie.push(Vr(N.beforeEnter,Ae,Xe));return ie.push(H),kt(ie)}).then(()=>(Ae.matched.forEach(N=>N.enterCallbacks={}),ie=W$(pe,"beforeRouteEnter",Ae,Xe,T),ie.push(H),kt(ie))).then(()=>{ie=[];for(const N of i.list())ie.push(Vr(N,Ae,Xe));return ie.push(H),kt(ie)}).catch(N=>qo(N,8)?N:Promise.reject(N))}function B(Ae,Xe,ie){u.list().forEach(Y=>T(()=>Y(Ae,Xe,ie)))}function oe(Ae,Xe,ie,Y,ue){const pe=P(Ae,Xe);if(pe)return pe;const H=Xe===Mr,N=ic?history.state:{};ie&&(Y||H?o.replace(Ae.fullPath,$a({scroll:H&&N&&N.scroll},ue)):o.push(Ae.fullPath,ue)),h.value=Ae,He(Ae,Xe,ie,H),Ee()}let be;function $e(){be||(be=o.listen((Ae,Xe,ie)=>{if(!ft.listening)return;const Y=R(Ae),ue=M(Y);if(ue){g($a(ue,{replace:!0}),Y).catch(Id);return}m=Y;const pe=h.value;ic&&Mte(tV(pe.fullPath,ie.delta),GL()),j(Y,pe).catch(H=>qo(H,12)?H:qo(H,2)?(g(H.to,Y).then(N=>{qo(N,20)&&!ie.delta&&ie.type===zd.pop&&o.go(-1,!1)}).catch(Id),Promise.reject()):(ie.delta&&o.go(-ie.delta,!1),G(H,Y,pe))).then(H=>{H=H||oe(Y,pe,!1),H&&(ie.delta&&!qo(H,8)?o.go(-ie.delta,!1):ie.type===zd.pop&&qo(H,20)&&o.go(-1,!1)),B(Y,pe,H)}).catch(Id)}))}let Le=id(),de=id(),J;function G(Ae,Xe,ie){Ee(Ae);const Y=de.list();return Y.length?Y.forEach(ue=>ue(Ae,Xe,ie)):console.error(Ae),Promise.reject(Ae)}function ce(){return J&&h.value!==Mr?Promise.resolve():new Promise((Ae,Xe)=>{Le.add([Ae,Xe])})}function Ee(Ae){return J||(J=!Ae,$e(),Le.list().forEach(([Xe,ie])=>Ae?ie(Ae):Xe()),Le.reset()),Ae}function He(Ae,Xe,ie,Y){const{scrollBehavior:ue}=n;if(!ic||!ue)return Promise.resolve();const pe=!ie&&Cte(tV(Ae.fullPath,0))||(Y||!ie)&&history.state&&history.state.scroll||null;return En().then(()=>ue(Ae,Xe,pe)).then(H=>H&&xte(H)).catch(H=>G(H,Ae,Xe))}const Ke=Ae=>o.go(Ae);let pt;const ut=new Set,ft={currentRoute:h,listening:!0,addRoute:w,removeRoute:$,hasRoute:V,getRoutes:D,resolve:R,options:n,push:S,replace:C,go:Ke,back:()=>Ke(-1),forward:()=>Ke(1),beforeEach:r.add,beforeResolve:i.add,afterEach:u.add,onError:de.add,isReady:ce,install(Ae){const Xe=this;Ae.component("RouterLink",Kte),Ae.component("RouterView",Jte),Ae.config.globalProperties.$router=Xe,Object.defineProperty(Ae.config.globalProperties,"$route",{enumerable:!0,get:()=>t(h)}),ic&&!pt&&h.value===Mr&&(pt=!0,S(o.location).catch(ue=>{}));const ie={};for(const ue in Mr)Object.defineProperty(ie,ue,{get:()=>h.value[ue],enumerable:!0});Ae.provide(ZL,Xe),Ae.provide(ST,hj(ie)),Ae.provide(eE,h);const Y=Ae.unmount;ut.add(Ae),Ae.unmount=function(){ut.delete(Ae),ut.size<1&&(m=Mr,be&&be(),be=null,h.value=Mr,pt=!1,J=!1),Y()}}};function kt(Ae){return Ae.reduce((Xe,ie)=>Xe.then(()=>T(ie)),Promise.resolve())}return ft}function tae(n,e){const a=[],s=[],o=[],r=Math.max(e.matched.length,n.matched.length);for(let i=0;i<r;i++){const u=e.matched[i];u&&(n.matched.find(m=>bc(m,u))?s.push(u):a.push(u));const h=n.matched[i];h&&(e.matched.find(m=>bc(m,h))||o.push(h))}return[a,s,o]}function ct(){return xt(ZL)}function Sa(){return xt(ST)}const To="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%20512%20512'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill='%23000000'%20d='M256%2032L20%20400l60%2064%2052.1-75.9L176%20432l50.5-50.5L256%20448l29.5-66.5L336%20432l43.9-43.9L432%20464l60-64L256%2032zm-9%2047v78l-39-13%2039-65zm18%200l39%2065-39%2013V79z'/%3e%3c/svg%3e";var ns="top",Ns="bottom",zs="right",ss="left",IT="auto",ru=[ns,Ns,zs,ss],xc="start",Bd="end",aae="clippingParents",mH="viewport",ld="popper",nae="reference",mV=ru.reduce(function(n,e){return n.concat([e+"-"+xc,e+"-"+Bd])},[]),vH=[].concat(ru,[IT]).reduce(function(n,e){return n.concat([e,e+"-"+xc,e+"-"+Bd])},[]),sae="beforeRead",oae="read",rae="afterRead",iae="beforeMain",lae="main",cae="afterMain",dae="beforeWrite",uae="write",pae="afterWrite",hae=[sae,oae,rae,iae,lae,cae,dae,uae,pae];function $o(n){return n?(n.nodeName||"").toLowerCase():null}function ws(n){if(n==null)return window;if(n.toString()!=="[object Window]"){var e=n.ownerDocument;return e&&e.defaultView||window}return n}function Ol(n){var e=ws(n).Element;return n instanceof e||n instanceof Element}function js(n){var e=ws(n).HTMLElement;return n instanceof e||n instanceof HTMLElement}function LT(n){if(typeof ShadowRoot>"u")return!1;var e=ws(n).ShadowRoot;return n instanceof e||n instanceof ShadowRoot}function fae(n){var e=n.state;Object.keys(e.elements).forEach(function(a){var s=e.styles[a]||{},o=e.attributes[a]||{},r=e.elements[a];!js(r)||!$o(r)||(Object.assign(r.style,s),Object.keys(o).forEach(function(i){var u=o[i];u===!1?r.removeAttribute(i):r.setAttribute(i,u===!0?"":u)}))})}function mae(n){var e=n.state,a={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,a.popper),e.styles=a,e.elements.arrow&&Object.assign(e.elements.arrow.style,a.arrow),function(){Object.keys(e.elements).forEach(function(s){var o=e.elements[s],r=e.attributes[s]||{},i=Object.keys(e.styles.hasOwnProperty(s)?e.styles[s]:a[s]),u=i.reduce(function(h,m){return h[m]="",h},{});!js(o)||!$o(o)||(Object.assign(o.style,u),Object.keys(r).forEach(function(h){o.removeAttribute(h)}))})}}const yH={name:"applyStyles",enabled:!0,phase:"write",fn:fae,effect:mae,requires:["computeStyles"]};function Co(n){return n.split("-")[0]}var Dl=Math.max,mL=Math.min,Mc=Math.round;function tE(){var n=navigator.userAgentData;return n!=null&&n.brands&&Array.isArray(n.brands)?n.brands.map(function(e){return e.brand+"/"+e.version}).join(" "):navigator.userAgent}function _H(){return!/^((?!chrome|android).)*safari/i.test(tE())}function Cc(n,e,a){e===void 0&&(e=!1),a===void 0&&(a=!1);var s=n.getBoundingClientRect(),o=1,r=1;e&&js(n)&&(o=n.offsetWidth>0&&Mc(s.width)/n.offsetWidth||1,r=n.offsetHeight>0&&Mc(s.height)/n.offsetHeight||1);var i=Ol(n)?ws(n):window,u=i.visualViewport,h=!_H()&&a,m=(s.left+(h&&u?u.offsetLeft:0))/o,p=(s.top+(h&&u?u.offsetTop:0))/r,b=s.width/o,x=s.height/r;return{width:b,height:x,top:p,right:m+b,bottom:p+x,left:m,x:m,y:p}}function $T(n){var e=Cc(n),a=n.offsetWidth,s=n.offsetHeight;return Math.abs(e.width-a)<=1&&(a=e.width),Math.abs(e.height-s)<=1&&(s=e.height),{x:n.offsetLeft,y:n.offsetTop,width:a,height:s}}function gH(n,e){var a=e.getRootNode&&e.getRootNode();if(n.contains(e))return!0;if(a&&LT(a)){var s=e;do{if(s&&n.isSameNode(s))return!0;s=s.parentNode||s.host}while(s)}return!1}function sr(n){return ws(n).getComputedStyle(n)}function vae(n){return["table","td","th"].indexOf($o(n))>=0}function Jr(n){return((Ol(n)?n.ownerDocument:n.document)||window.document).documentElement}function KL(n){return $o(n)==="html"?n:n.assignedSlot||n.parentNode||(LT(n)?n.host:null)||Jr(n)}function vV(n){return!js(n)||sr(n).position==="fixed"?null:n.offsetParent}function yae(n){var e=/firefox/i.test(tE()),a=/Trident/i.test(tE());if(a&&js(n)){var s=sr(n);if(s.position==="fixed")return null}var o=KL(n);for(LT(o)&&(o=o.host);js(o)&&["html","body"].indexOf($o(o))<0;){var r=sr(o);if(r.transform!=="none"||r.perspective!=="none"||r.contain==="paint"||["transform","perspective"].indexOf(r.willChange)!==-1||e&&r.willChange==="filter"||e&&r.filter&&r.filter!=="none")return o;o=o.parentNode}return null}function iu(n){for(var e=ws(n),a=vV(n);a&&vae(a)&&sr(a).position==="static";)a=vV(a);return a&&($o(a)==="html"||$o(a)==="body"&&sr(a).position==="static")?e:a||yae(n)||e}function AT(n){return["top","bottom"].indexOf(n)>=0?"x":"y"}function $d(n,e,a){return Dl(n,mL(e,a))}function _ae(n,e,a){var s=$d(n,e,a);return s>a?a:s}function kH(){return{top:0,right:0,bottom:0,left:0}}function bH(n){return Object.assign({},kH(),n)}function wH(n,e){return e.reduce(function(a,s){return a[s]=n,a},{})}var gae=function(e,a){return e=typeof e=="function"?e(Object.assign({},a.rects,{placement:a.placement})):e,bH(typeof e!="number"?e:wH(e,ru))};function kae(n){var e,a=n.state,s=n.name,o=n.options,r=a.elements.arrow,i=a.modifiersData.popperOffsets,u=Co(a.placement),h=AT(u),m=[ss,zs].indexOf(u)>=0,p=m?"height":"width";if(!(!r||!i)){var b=gae(o.padding,a),x=$T(r),w=h==="y"?ns:ss,$=h==="y"?Ns:zs,D=a.rects.reference[p]+a.rects.reference[h]-i[h]-a.rects.popper[p],V=i[h]-a.rects.reference[h],R=iu(r),E=R?h==="y"?R.clientHeight||0:R.clientWidth||0:0,P=D/2-V/2,S=b[w],C=E-x[p]-b[$],M=E/2-x[p]/2+P,g=$d(S,M,C),v=h;a.modifiersData[s]=(e={},e[v]=g,e.centerOffset=g-M,e)}}function bae(n){var e=n.state,a=n.options,s=a.element,o=s===void 0?"[data-popper-arrow]":s;o!=null&&(typeof o=="string"&&(o=e.elements.popper.querySelector(o),!o)||gH(e.elements.popper,o)&&(e.elements.arrow=o))}const wae={name:"arrow",enabled:!0,phase:"main",fn:kae,effect:bae,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function Sc(n){return n.split("-")[1]}var xae={top:"auto",right:"auto",bottom:"auto",left:"auto"};function Mae(n,e){var a=n.x,s=n.y,o=e.devicePixelRatio||1;return{x:Mc(a*o)/o||0,y:Mc(s*o)/o||0}}function yV(n){var e,a=n.popper,s=n.popperRect,o=n.placement,r=n.variation,i=n.offsets,u=n.position,h=n.gpuAcceleration,m=n.adaptive,p=n.roundOffsets,b=n.isFixed,x=i.x,w=x===void 0?0:x,$=i.y,D=$===void 0?0:$,V=typeof p=="function"?p({x:w,y:D}):{x:w,y:D};w=V.x,D=V.y;var R=i.hasOwnProperty("x"),E=i.hasOwnProperty("y"),P=ss,S=ns,C=window;if(m){var M=iu(a),g="clientHeight",v="clientWidth";if(M===ws(a)&&(M=Jr(a),sr(M).position!=="static"&&u==="absolute"&&(g="scrollHeight",v="scrollWidth")),M=M,o===ns||(o===ss||o===zs)&&r===Bd){S=Ns;var T=b&&M===C&&C.visualViewport?C.visualViewport.height:M[g];D-=T-s.height,D*=h?1:-1}if(o===ss||(o===ns||o===Ns)&&r===Bd){P=zs;var j=b&&M===C&&C.visualViewport?C.visualViewport.width:M[v];w-=j-s.width,w*=h?1:-1}}var B=Object.assign({position:u},m&&xae),oe=p===!0?Mae({x:w,y:D},ws(a)):{x:w,y:D};if(w=oe.x,D=oe.y,h){var be;return Object.assign({},B,(be={},be[S]=E?"0":"",be[P]=R?"0":"",be.transform=(C.devicePixelRatio||1)<=1?"translate("+w+"px, "+D+"px)":"translate3d("+w+"px, "+D+"px, 0)",be))}return Object.assign({},B,(e={},e[S]=E?D+"px":"",e[P]=R?w+"px":"",e.transform="",e))}function Cae(n){var e=n.state,a=n.options,s=a.gpuAcceleration,o=s===void 0?!0:s,r=a.adaptive,i=r===void 0?!0:r,u=a.roundOffsets,h=u===void 0?!0:u,m={placement:Co(e.placement),variation:Sc(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:o,isFixed:e.options.strategy==="fixed"};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,yV(Object.assign({},m,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:i,roundOffsets:h})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,yV(Object.assign({},m,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:h})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})}const Sae={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:Cae,data:{}};var _1={passive:!0};function Iae(n){var e=n.state,a=n.instance,s=n.options,o=s.scroll,r=o===void 0?!0:o,i=s.resize,u=i===void 0?!0:i,h=ws(e.elements.popper),m=[].concat(e.scrollParents.reference,e.scrollParents.popper);return r&&m.forEach(function(p){p.addEventListener("scroll",a.update,_1)}),u&&h.addEventListener("resize",a.update,_1),function(){r&&m.forEach(function(p){p.removeEventListener("scroll",a.update,_1)}),u&&h.removeEventListener("resize",a.update,_1)}}const Lae={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:Iae,data:{}};var $ae={left:"right",right:"left",bottom:"top",top:"bottom"};function R1(n){return n.replace(/left|right|bottom|top/g,function(e){return $ae[e]})}var Aae={start:"end",end:"start"};function _V(n){return n.replace(/start|end/g,function(e){return Aae[e]})}function ET(n){var e=ws(n),a=e.pageXOffset,s=e.pageYOffset;return{scrollLeft:a,scrollTop:s}}function TT(n){return Cc(Jr(n)).left+ET(n).scrollLeft}function Eae(n,e){var a=ws(n),s=Jr(n),o=a.visualViewport,r=s.clientWidth,i=s.clientHeight,u=0,h=0;if(o){r=o.width,i=o.height;var m=_H();(m||!m&&e==="fixed")&&(u=o.offsetLeft,h=o.offsetTop)}return{width:r,height:i,x:u+TT(n),y:h}}function Tae(n){var e,a=Jr(n),s=ET(n),o=(e=n.ownerDocument)==null?void 0:e.body,r=Dl(a.scrollWidth,a.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),i=Dl(a.scrollHeight,a.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),u=-s.scrollLeft+TT(n),h=-s.scrollTop;return sr(o||a).direction==="rtl"&&(u+=Dl(a.clientWidth,o?o.clientWidth:0)-r),{width:r,height:i,x:u,y:h}}function PT(n){var e=sr(n),a=e.overflow,s=e.overflowX,o=e.overflowY;return/auto|scroll|overlay|hidden/.test(a+o+s)}function xH(n){return["html","body","#document"].indexOf($o(n))>=0?n.ownerDocument.body:js(n)&&PT(n)?n:xH(KL(n))}function Ad(n,e){var a;e===void 0&&(e=[]);var s=xH(n),o=s===((a=n.ownerDocument)==null?void 0:a.body),r=ws(s),i=o?[r].concat(r.visualViewport||[],PT(s)?s:[]):s,u=e.concat(i);return o?u:u.concat(Ad(KL(i)))}function aE(n){return Object.assign({},n,{left:n.x,top:n.y,right:n.x+n.width,bottom:n.y+n.height})}function Pae(n,e){var a=Cc(n,!1,e==="fixed");return a.top=a.top+n.clientTop,a.left=a.left+n.clientLeft,a.bottom=a.top+n.clientHeight,a.right=a.left+n.clientWidth,a.width=n.clientWidth,a.height=n.clientHeight,a.x=a.left,a.y=a.top,a}function gV(n,e,a){return e===mH?aE(Eae(n,a)):Ol(e)?Pae(e,a):aE(Tae(Jr(n)))}function Dae(n){var e=Ad(KL(n)),a=["absolute","fixed"].indexOf(sr(n).position)>=0,s=a&&js(n)?iu(n):n;return Ol(s)?e.filter(function(o){return Ol(o)&&gH(o,s)&&$o(o)!=="body"}):[]}function Rae(n,e,a,s){var o=e==="clippingParents"?Dae(n):[].concat(e),r=[].concat(o,[a]),i=r[0],u=r.reduce(function(h,m){var p=gV(n,m,s);return h.top=Dl(p.top,h.top),h.right=mL(p.right,h.right),h.bottom=mL(p.bottom,h.bottom),h.left=Dl(p.left,h.left),h},gV(n,i,s));return u.width=u.right-u.left,u.height=u.bottom-u.top,u.x=u.left,u.y=u.top,u}function MH(n){var e=n.reference,a=n.element,s=n.placement,o=s?Co(s):null,r=s?Sc(s):null,i=e.x+e.width/2-a.width/2,u=e.y+e.height/2-a.height/2,h;switch(o){case ns:h={x:i,y:e.y-a.height};break;case Ns:h={x:i,y:e.y+e.height};break;case zs:h={x:e.x+e.width,y:u};break;case ss:h={x:e.x-a.width,y:u};break;default:h={x:e.x,y:e.y}}var m=o?AT(o):null;if(m!=null){var p=m==="y"?"height":"width";switch(r){case xc:h[m]=h[m]-(e[p]/2-a[p]/2);break;case Bd:h[m]=h[m]+(e[p]/2-a[p]/2);break}}return h}function qd(n,e){e===void 0&&(e={});var a=e,s=a.placement,o=s===void 0?n.placement:s,r=a.strategy,i=r===void 0?n.strategy:r,u=a.boundary,h=u===void 0?aae:u,m=a.rootBoundary,p=m===void 0?mH:m,b=a.elementContext,x=b===void 0?ld:b,w=a.altBoundary,$=w===void 0?!1:w,D=a.padding,V=D===void 0?0:D,R=bH(typeof V!="number"?V:wH(V,ru)),E=x===ld?nae:ld,P=n.rects.popper,S=n.elements[$?E:x],C=Rae(Ol(S)?S:S.contextElement||Jr(n.elements.popper),h,p,i),M=Cc(n.elements.reference),g=MH({reference:M,element:P,strategy:"absolute",placement:o}),v=aE(Object.assign({},P,g)),T=x===ld?v:M,j={top:C.top-T.top+R.top,bottom:T.bottom-C.bottom+R.bottom,left:C.left-T.left+R.left,right:T.right-C.right+R.right},B=n.modifiersData.offset;if(x===ld&&B){var oe=B[o];Object.keys(j).forEach(function(be){var $e=[zs,Ns].indexOf(be)>=0?1:-1,Le=[ns,Ns].indexOf(be)>=0?"y":"x";j[be]+=oe[Le]*$e})}return j}function Oae(n,e){e===void 0&&(e={});var a=e,s=a.placement,o=a.boundary,r=a.rootBoundary,i=a.padding,u=a.flipVariations,h=a.allowedAutoPlacements,m=h===void 0?vH:h,p=Sc(s),b=p?u?mV:mV.filter(function($){return Sc($)===p}):ru,x=b.filter(function($){return m.indexOf($)>=0});x.length===0&&(x=b);var w=x.reduce(function($,D){return $[D]=qd(n,{placement:D,boundary:o,rootBoundary:r,padding:i})[Co(D)],$},{});return Object.keys(w).sort(function($,D){return w[$]-w[D]})}function Vae(n){if(Co(n)===IT)return[];var e=R1(n);return[_V(n),e,_V(e)]}function Uae(n){var e=n.state,a=n.options,s=n.name;if(!e.modifiersData[s]._skip){for(var o=a.mainAxis,r=o===void 0?!0:o,i=a.altAxis,u=i===void 0?!0:i,h=a.fallbackPlacements,m=a.padding,p=a.boundary,b=a.rootBoundary,x=a.altBoundary,w=a.flipVariations,$=w===void 0?!0:w,D=a.allowedAutoPlacements,V=e.options.placement,R=Co(V),E=R===V,P=h||(E||!$?[R1(V)]:Vae(V)),S=[V].concat(P).reduce(function(ut,ft){return ut.concat(Co(ft)===IT?Oae(e,{placement:ft,boundary:p,rootBoundary:b,padding:m,flipVariations:$,allowedAutoPlacements:D}):ft)},[]),C=e.rects.reference,M=e.rects.popper,g=new Map,v=!0,T=S[0],j=0;j<S.length;j++){var B=S[j],oe=Co(B),be=Sc(B)===xc,$e=[ns,Ns].indexOf(oe)>=0,Le=$e?"width":"height",de=qd(e,{placement:B,boundary:p,rootBoundary:b,altBoundary:x,padding:m}),J=$e?be?zs:ss:be?Ns:ns;C[Le]>M[Le]&&(J=R1(J));var G=R1(J),ce=[];if(r&&ce.push(de[oe]<=0),u&&ce.push(de[J]<=0,de[G]<=0),ce.every(function(ut){return ut})){T=B,v=!1;break}g.set(B,ce)}if(v)for(var Ee=$?3:1,He=function(ft){var kt=S.find(function(Ae){var Xe=g.get(Ae);if(Xe)return Xe.slice(0,ft).every(function(ie){return ie})});if(kt)return T=kt,"break"},Ke=Ee;Ke>0;Ke--){var pt=He(Ke);if(pt==="break")break}e.placement!==T&&(e.modifiersData[s]._skip=!0,e.placement=T,e.reset=!0)}}const Fae={name:"flip",enabled:!0,phase:"main",fn:Uae,requiresIfExists:["offset"],data:{_skip:!1}};function kV(n,e,a){return a===void 0&&(a={x:0,y:0}),{top:n.top-e.height-a.y,right:n.right-e.width+a.x,bottom:n.bottom-e.height+a.y,left:n.left-e.width-a.x}}function bV(n){return[ns,zs,Ns,ss].some(function(e){return n[e]>=0})}function jae(n){var e=n.state,a=n.name,s=e.rects.reference,o=e.rects.popper,r=e.modifiersData.preventOverflow,i=qd(e,{elementContext:"reference"}),u=qd(e,{altBoundary:!0}),h=kV(i,s),m=kV(u,o,r),p=bV(h),b=bV(m);e.modifiersData[a]={referenceClippingOffsets:h,popperEscapeOffsets:m,isReferenceHidden:p,hasPopperEscaped:b},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":p,"data-popper-escaped":b})}const Hae={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:jae};function Nae(n,e,a){var s=Co(n),o=[ss,ns].indexOf(s)>=0?-1:1,r=typeof a=="function"?a(Object.assign({},e,{placement:n})):a,i=r[0],u=r[1];return i=i||0,u=(u||0)*o,[ss,zs].indexOf(s)>=0?{x:u,y:i}:{x:i,y:u}}function zae(n){var e=n.state,a=n.options,s=n.name,o=a.offset,r=o===void 0?[0,0]:o,i=vH.reduce(function(p,b){return p[b]=Nae(b,e.rects,r),p},{}),u=i[e.placement],h=u.x,m=u.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=h,e.modifiersData.popperOffsets.y+=m),e.modifiersData[s]=i}const Bae={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:zae};function qae(n){var e=n.state,a=n.name;e.modifiersData[a]=MH({reference:e.rects.reference,element:e.rects.popper,strategy:"absolute",placement:e.placement})}const Wae={name:"popperOffsets",enabled:!0,phase:"read",fn:qae,data:{}};function Gae(n){return n==="x"?"y":"x"}function Zae(n){var e=n.state,a=n.options,s=n.name,o=a.mainAxis,r=o===void 0?!0:o,i=a.altAxis,u=i===void 0?!1:i,h=a.boundary,m=a.rootBoundary,p=a.altBoundary,b=a.padding,x=a.tether,w=x===void 0?!0:x,$=a.tetherOffset,D=$===void 0?0:$,V=qd(e,{boundary:h,rootBoundary:m,padding:b,altBoundary:p}),R=Co(e.placement),E=Sc(e.placement),P=!E,S=AT(R),C=Gae(S),M=e.modifiersData.popperOffsets,g=e.rects.reference,v=e.rects.popper,T=typeof D=="function"?D(Object.assign({},e.rects,{placement:e.placement})):D,j=typeof T=="number"?{mainAxis:T,altAxis:T}:Object.assign({mainAxis:0,altAxis:0},T),B=e.modifiersData.offset?e.modifiersData.offset[e.placement]:null,oe={x:0,y:0};if(M){if(r){var be,$e=S==="y"?ns:ss,Le=S==="y"?Ns:zs,de=S==="y"?"height":"width",J=M[S],G=J+V[$e],ce=J-V[Le],Ee=w?-v[de]/2:0,He=E===xc?g[de]:v[de],Ke=E===xc?-v[de]:-g[de],pt=e.elements.arrow,ut=w&&pt?$T(pt):{width:0,height:0},ft=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:kH(),kt=ft[$e],Ae=ft[Le],Xe=$d(0,g[de],ut[de]),ie=P?g[de]/2-Ee-Xe-kt-j.mainAxis:He-Xe-kt-j.mainAxis,Y=P?-g[de]/2+Ee+Xe+Ae+j.mainAxis:Ke+Xe+Ae+j.mainAxis,ue=e.elements.arrow&&iu(e.elements.arrow),pe=ue?S==="y"?ue.clientTop||0:ue.clientLeft||0:0,H=(be=B==null?void 0:B[S])!=null?be:0,N=J+ie-H-pe,Q=J+Y-H,he=$d(w?mL(G,N):G,J,w?Dl(ce,Q):ce);M[S]=he,oe[S]=he-J}if(u){var Se,Re=S==="x"?ns:ss,Ze=S==="x"?Ns:zs,ze=M[C],qe=C==="y"?"height":"width",Be=ze+V[Re],lt=ze-V[Ze],yt=[ns,ss].indexOf(R)!==-1,it=(Se=B==null?void 0:B[C])!=null?Se:0,Pe=yt?Be:ze-g[qe]-v[qe]-it+j.altAxis,Ue=yt?ze+g[qe]+v[qe]-it-j.altAxis:lt,ht=w&&yt?_ae(Pe,ze,Ue):$d(w?Pe:Be,ze,w?Ue:lt);M[C]=ht,oe[C]=ht-ze}e.modifiersData[s]=oe}}const Kae={name:"preventOverflow",enabled:!0,phase:"main",fn:Zae,requiresIfExists:["offset"]};function Xae(n){return{scrollLeft:n.scrollLeft,scrollTop:n.scrollTop}}function Yae(n){return n===ws(n)||!js(n)?ET(n):Xae(n)}function Qae(n){var e=n.getBoundingClientRect(),a=Mc(e.width)/n.offsetWidth||1,s=Mc(e.height)/n.offsetHeight||1;return a!==1||s!==1}function Jae(n,e,a){a===void 0&&(a=!1);var s=js(e),o=js(e)&&Qae(e),r=Jr(e),i=Cc(n,o,a),u={scrollLeft:0,scrollTop:0},h={x:0,y:0};return(s||!s&&!a)&&(($o(e)!=="body"||PT(r))&&(u=Yae(e)),js(e)?(h=Cc(e,!0),h.x+=e.clientLeft,h.y+=e.clientTop):r&&(h.x=TT(r))),{x:i.left+u.scrollLeft-h.x,y:i.top+u.scrollTop-h.y,width:i.width,height:i.height}}function ene(n){var e=new Map,a=new Set,s=[];n.forEach(function(r){e.set(r.name,r)});function o(r){a.add(r.name);var i=[].concat(r.requires||[],r.requiresIfExists||[]);i.forEach(function(u){if(!a.has(u)){var h=e.get(u);h&&o(h)}}),s.push(r)}return n.forEach(function(r){a.has(r.name)||o(r)}),s}function tne(n){var e=ene(n);return hae.reduce(function(a,s){return a.concat(e.filter(function(o){return o.phase===s}))},[])}function ane(n){var e;return function(){return e||(e=new Promise(function(a){Promise.resolve().then(function(){e=void 0,a(n())})})),e}}function nne(n){var e=n.reduce(function(a,s){var o=a[s.name];return a[s.name]=o?Object.assign({},o,s,{options:Object.assign({},o.options,s.options),data:Object.assign({},o.data,s.data)}):s,a},{});return Object.keys(e).map(function(a){return e[a]})}var wV={placement:"bottom",modifiers:[],strategy:"absolute"};function xV(){for(var n=arguments.length,e=new Array(n),a=0;a<n;a++)e[a]=arguments[a];return!e.some(function(s){return!(s&&typeof s.getBoundingClientRect=="function")})}function sne(n){n===void 0&&(n={});var e=n,a=e.defaultModifiers,s=a===void 0?[]:a,o=e.defaultOptions,r=o===void 0?wV:o;return function(u,h,m){m===void 0&&(m=r);var p={placement:"bottom",orderedModifiers:[],options:Object.assign({},wV,r),modifiersData:{},elements:{reference:u,popper:h},attributes:{},styles:{}},b=[],x=!1,w={state:p,setOptions:function(R){var E=typeof R=="function"?R(p.options):R;D(),p.options=Object.assign({},r,p.options,E),p.scrollParents={reference:Ol(u)?Ad(u):u.contextElement?Ad(u.contextElement):[],popper:Ad(h)};var P=tne(nne([].concat(s,p.options.modifiers)));return p.orderedModifiers=P.filter(function(S){return S.enabled}),$(),w.update()},forceUpdate:function(){if(!x){var R=p.elements,E=R.reference,P=R.popper;if(xV(E,P)){p.rects={reference:Jae(E,iu(P),p.options.strategy==="fixed"),popper:$T(P)},p.reset=!1,p.placement=p.options.placement,p.orderedModifiers.forEach(function(j){return p.modifiersData[j.name]=Object.assign({},j.data)});for(var S=0;S<p.orderedModifiers.length;S++){if(p.reset===!0){p.reset=!1,S=-1;continue}var C=p.orderedModifiers[S],M=C.fn,g=C.options,v=g===void 0?{}:g,T=C.name;typeof M=="function"&&(p=M({state:p,options:v,name:T,instance:w})||p)}}}},update:ane(function(){return new Promise(function(V){w.forceUpdate(),V(p)})}),destroy:function(){D(),x=!0}};if(!xV(u,h))return w;w.setOptions(m).then(function(V){!x&&m.onFirstUpdate&&m.onFirstUpdate(V)});function $(){p.orderedModifiers.forEach(function(V){var R=V.name,E=V.options,P=E===void 0?{}:E,S=V.effect;if(typeof S=="function"){var C=S({state:p,name:R,instance:w,options:P}),M=function(){};b.push(C||M)}})}function D(){b.forEach(function(V){return V()}),b=[]}return w}}var one=[Lae,Wae,Sae,yH,Bae,Fae,Kae,wae,Hae],rne=sne({defaultModifiers:one}),ine='<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 6s1.796-.013 4.67-3.615C5.851.9 6.93.006 8 0c1.07-.006 2.148.887 3.343 2.385C14.233 6.005 16 6 16 6H0z"></svg>',lne="tippy-box",CH="tippy-content",SH="tippy-backdrop",IH="tippy-arrow",LH="tippy-svg-arrow",gi={passive:!0,capture:!0},$H=function(){return document.body};function G$(n,e,a){if(Array.isArray(n)){var s=n[e];return s??(Array.isArray(a)?a[e]:a)}return n}function DT(n,e){var a={}.toString.call(n);return a.indexOf("[object")===0&&a.indexOf(e+"]")>-1}function AH(n,e){return typeof n=="function"?n.apply(void 0,e):n}function MV(n,e){if(e===0)return n;var a;return function(s){clearTimeout(a),a=setTimeout(function(){n(s)},e)}}function cne(n){return n.split(/\s+/).filter(Boolean)}function lc(n){return[].concat(n)}function CV(n,e){n.indexOf(e)===-1&&n.push(e)}function dne(n){return n.filter(function(e,a){return n.indexOf(e)===a})}function une(n){return n.split("-")[0]}function vL(n){return[].slice.call(n)}function SV(n){return Object.keys(n).reduce(function(e,a){return n[a]!==void 0&&(e[a]=n[a]),e},{})}function _c(){return document.createElement("div")}function XL(n){return["Element","Fragment"].some(function(e){return DT(n,e)})}function pne(n){return DT(n,"NodeList")}function hne(n){return DT(n,"MouseEvent")}function fne(n){return!!(n&&n._tippy&&n._tippy.reference===n)}function mne(n){return XL(n)?[n]:pne(n)?vL(n):Array.isArray(n)?n:vL(document.querySelectorAll(n))}function Z$(n,e){n.forEach(function(a){a&&(a.style.transitionDuration=e+"ms")})}function Wd(n,e){n.forEach(function(a){a&&a.setAttribute("data-state",e)})}function vne(n){var e,a=lc(n),s=a[0];return s!=null&&(e=s.ownerDocument)!=null&&e.body?s.ownerDocument:document}function yne(n,e){var a=e.clientX,s=e.clientY;return n.every(function(o){var r=o.popperRect,i=o.popperState,u=o.props,h=u.interactiveBorder,m=une(i.placement),p=i.modifiersData.offset;if(!p)return!0;var b=m==="bottom"?p.top.y:0,x=m==="top"?p.bottom.y:0,w=m==="right"?p.left.x:0,$=m==="left"?p.right.x:0,D=r.top-s+b>h,V=s-r.bottom-x>h,R=r.left-a+w>h,E=a-r.right-$>h;return D||V||R||E})}function K$(n,e,a){var s=e+"EventListener";["transitionend","webkitTransitionEnd"].forEach(function(o){n[s](o,a)})}function IV(n,e){for(var a=e;a;){var s;if(n.contains(a))return!0;a=a.getRootNode==null||(s=a.getRootNode())==null?void 0:s.host}return!1}var bo={isTouch:!1},LV=0;function _ne(){bo.isTouch||(bo.isTouch=!0,window.performance&&document.addEventListener("mousemove",EH))}function EH(){var n=performance.now();n-LV<20&&(bo.isTouch=!1,document.removeEventListener("mousemove",EH)),LV=n}function gne(){var n=document.activeElement;if(fne(n)){var e=n._tippy;n.blur&&!e.state.isVisible&&n.blur()}}function kne(){document.addEventListener("touchstart",_ne,gi),window.addEventListener("blur",gne)}var bne=typeof window<"u"&&typeof document<"u",wne=bne?!!window.msCrypto:!1,xne={animateFill:!1,followCursor:!1,inlinePositioning:!1,sticky:!1},Mne={allowHTML:!1,animation:"fade",arrow:!0,content:"",inertia:!1,maxWidth:350,role:"tooltip",theme:"",zIndex:9999},ao=Object.assign({appendTo:$H,aria:{content:"auto",expanded:"auto"},delay:0,duration:[300,250],getReferenceClientRect:null,hideOnClick:!0,ignoreAttributes:!1,interactive:!1,interactiveBorder:2,interactiveDebounce:0,moveTransition:"",offset:[0,10],onAfterUpdate:function(){},onBeforeUpdate:function(){},onCreate:function(){},onDestroy:function(){},onHidden:function(){},onHide:function(){},onMount:function(){},onShow:function(){},onShown:function(){},onTrigger:function(){},onUntrigger:function(){},onClickOutside:function(){},placement:"top",plugins:[],popperOptions:{},render:null,showOnCreate:!1,touch:!0,trigger:"mouseenter focus",triggerTarget:null},xne,Mne),Cne=Object.keys(ao),Sne=function(e){var a=Object.keys(e);a.forEach(function(s){ao[s]=e[s]})};function TH(n){var e=n.plugins||[],a=e.reduce(function(s,o){var r=o.name,i=o.defaultValue;if(r){var u;s[r]=n[r]!==void 0?n[r]:(u=ao[r])!=null?u:i}return s},{});return Object.assign({},n,a)}function Ine(n,e){var a=e?Object.keys(TH(Object.assign({},ao,{plugins:e}))):Cne,s=a.reduce(function(o,r){var i=(n.getAttribute("data-tippy-"+r)||"").trim();if(!i)return o;if(r==="content")o[r]=i;else try{o[r]=JSON.parse(i)}catch{o[r]=i}return o},{});return s}function $V(n,e){var a=Object.assign({},e,{content:AH(e.content,[n])},e.ignoreAttributes?{}:Ine(n,e.plugins));return a.aria=Object.assign({},ao.aria,a.aria),a.aria={expanded:a.aria.expanded==="auto"?e.interactive:a.aria.expanded,content:a.aria.content==="auto"?e.interactive?null:"describedby":a.aria.content},a}var Lne=function(){return"innerHTML"};function nE(n,e){n[Lne()]=e}function AV(n){var e=_c();return n===!0?e.className=IH:(e.className=LH,XL(n)?e.appendChild(n):nE(e,n)),e}function EV(n,e){XL(e.content)?(nE(n,""),n.appendChild(e.content)):typeof e.content!="function"&&(e.allowHTML?nE(n,e.content):n.textContent=e.content)}function yL(n){var e=n.firstElementChild,a=vL(e.children);return{box:e,content:a.find(function(s){return s.classList.contains(CH)}),arrow:a.find(function(s){return s.classList.contains(IH)||s.classList.contains(LH)}),backdrop:a.find(function(s){return s.classList.contains(SH)})}}function PH(n){var e=_c(),a=_c();a.className=lne,a.setAttribute("data-state","hidden"),a.setAttribute("tabindex","-1");var s=_c();s.className=CH,s.setAttribute("data-state","hidden"),EV(s,n.props),e.appendChild(a),a.appendChild(s),o(n.props,n.props);function o(r,i){var u=yL(e),h=u.box,m=u.content,p=u.arrow;i.theme?h.setAttribute("data-theme",i.theme):h.removeAttribute("data-theme"),typeof i.animation=="string"?h.setAttribute("data-animation",i.animation):h.removeAttribute("data-animation"),i.inertia?h.setAttribute("data-inertia",""):h.removeAttribute("data-inertia"),h.style.maxWidth=typeof i.maxWidth=="number"?i.maxWidth+"px":i.maxWidth,i.role?h.setAttribute("role",i.role):h.removeAttribute("role"),(r.content!==i.content||r.allowHTML!==i.allowHTML)&&EV(m,n.props),i.arrow?p?r.arrow!==i.arrow&&(h.removeChild(p),h.appendChild(AV(i.arrow))):h.appendChild(AV(i.arrow)):p&&h.removeChild(p)}return{popper:e,onUpdate:o}}PH.$$tippy=!0;var $ne=1,g1=[],X$=[];function Ane(n,e){var a=$V(n,Object.assign({},ao,TH(SV(e)))),s,o,r,i=!1,u=!1,h=!1,m=!1,p,b,x,w=[],$=MV(N,a.interactiveDebounce),D,V=$ne++,R=null,E=dne(a.plugins),P={isEnabled:!0,isVisible:!1,isDestroyed:!1,isMounted:!1,isShown:!1},S={id:V,reference:n,popper:_c(),popperInstance:R,props:a,state:P,plugins:E,clearDelayTimeouts:Pe,setProps:Ue,setContent:ht,show:Mt,hide:Et,hideWithInteractivity:Jt,enable:yt,disable:it,unmount:ae,destroy:W};if(!a.render)return S;var C=a.render(S),M=C.popper,g=C.onUpdate;M.setAttribute("data-tippy-root",""),M.id="tippy-"+S.id,S.popper=M,n._tippy=S,M._tippy=S;var v=E.map(function(q){return q.fn(S)}),T=n.hasAttribute("aria-expanded");return ue(),Ee(),J(),G("onCreate",[S]),a.showOnCreate&&Be(),M.addEventListener("mouseenter",function(){S.props.interactive&&S.state.isVisible&&S.clearDelayTimeouts()}),M.addEventListener("mouseleave",function(){S.props.interactive&&S.props.trigger.indexOf("mouseenter")>=0&&$e().addEventListener("mousemove",$)}),S;function j(){var q=S.props.touch;return Array.isArray(q)?q:[q,0]}function B(){return j()[0]==="hold"}function oe(){var q;return!!((q=S.props.render)!=null&&q.$$tippy)}function be(){return D||n}function $e(){var q=be().parentNode;return q?vne(q):document}function Le(){return yL(M)}function de(q){return S.state.isMounted&&!S.state.isVisible||bo.isTouch||p&&p.type==="focus"?0:G$(S.props.delay,q?0:1,ao.delay)}function J(q){q===void 0&&(q=!1),M.style.pointerEvents=S.props.interactive&&!q?"":"none",M.style.zIndex=""+S.props.zIndex}function G(q,ve,te){if(te===void 0&&(te=!0),v.forEach(function(ye){ye[q]&&ye[q].apply(ye,ve)}),te){var ne;(ne=S.props)[q].apply(ne,ve)}}function ce(){var q=S.props.aria;if(q.content){var ve="aria-"+q.content,te=M.id,ne=lc(S.props.triggerTarget||n);ne.forEach(function(ye){var Ve=ye.getAttribute(ve);if(S.state.isVisible)ye.setAttribute(ve,Ve?Ve+" "+te:te);else{var We=Ve&&Ve.replace(te,"").trim();We?ye.setAttribute(ve,We):ye.removeAttribute(ve)}})}}function Ee(){if(!(T||!S.props.aria.expanded)){var q=lc(S.props.triggerTarget||n);q.forEach(function(ve){S.props.interactive?ve.setAttribute("aria-expanded",S.state.isVisible&&ve===be()?"true":"false"):ve.removeAttribute("aria-expanded")})}}function He(){$e().removeEventListener("mousemove",$),g1=g1.filter(function(q){return q!==$})}function Ke(q){if(!(bo.isTouch&&(h||q.type==="mousedown"))){var ve=q.composedPath&&q.composedPath()[0]||q.target;if(!(S.props.interactive&&IV(M,ve))){if(lc(S.props.triggerTarget||n).some(function(te){return IV(te,ve)})){if(bo.isTouch||S.state.isVisible&&S.props.trigger.indexOf("click")>=0)return}else G("onClickOutside",[S,q]);S.props.hideOnClick===!0&&(S.clearDelayTimeouts(),S.hide(),u=!0,setTimeout(function(){u=!1}),S.state.isMounted||kt())}}}function pt(){h=!0}function ut(){h=!1}function ft(){var q=$e();q.addEventListener("mousedown",Ke,!0),q.addEventListener("touchend",Ke,gi),q.addEventListener("touchstart",ut,gi),q.addEventListener("touchmove",pt,gi)}function kt(){var q=$e();q.removeEventListener("mousedown",Ke,!0),q.removeEventListener("touchend",Ke,gi),q.removeEventListener("touchstart",ut,gi),q.removeEventListener("touchmove",pt,gi)}function Ae(q,ve){ie(q,function(){!S.state.isVisible&&M.parentNode&&M.parentNode.contains(M)&&ve()})}function Xe(q,ve){ie(q,ve)}function ie(q,ve){var te=Le().box;function ne(ye){ye.target===te&&(K$(te,"remove",ne),ve())}if(q===0)return ve();K$(te,"remove",b),K$(te,"add",ne),b=ne}function Y(q,ve,te){te===void 0&&(te=!1);var ne=lc(S.props.triggerTarget||n);ne.forEach(function(ye){ye.addEventListener(q,ve,te),w.push({node:ye,eventType:q,handler:ve,options:te})})}function ue(){B()&&(Y("touchstart",H,{passive:!0}),Y("touchend",Q,{passive:!0})),cne(S.props.trigger).forEach(function(q){if(q!=="manual")switch(Y(q,H),q){case"mouseenter":Y("mouseleave",Q);break;case"focus":Y(wne?"focusout":"blur",he);break;case"focusin":Y("focusout",he);break}})}function pe(){w.forEach(function(q){var ve=q.node,te=q.eventType,ne=q.handler,ye=q.options;ve.removeEventListener(te,ne,ye)}),w=[]}function H(q){var ve,te=!1;if(!(!S.state.isEnabled||Se(q)||u)){var ne=((ve=p)==null?void 0:ve.type)==="focus";p=q,D=q.currentTarget,Ee(),!S.state.isVisible&&hne(q)&&g1.forEach(function(ye){return ye(q)}),q.type==="click"&&(S.props.trigger.indexOf("mouseenter")<0||i)&&S.props.hideOnClick!==!1&&S.state.isVisible?te=!0:Be(q),q.type==="click"&&(i=!te),te&&!ne&&lt(q)}}function N(q){var ve=q.target,te=be().contains(ve)||M.contains(ve);if(!(q.type==="mousemove"&&te)){var ne=qe().concat(M).map(function(ye){var Ve,We=ye._tippy,ga=(Ve=We.popperInstance)==null?void 0:Ve.state;return ga?{popperRect:ye.getBoundingClientRect(),popperState:ga,props:a}:null}).filter(Boolean);yne(ne,q)&&(He(),lt(q))}}function Q(q){var ve=Se(q)||S.props.trigger.indexOf("click")>=0&&i;if(!ve){if(S.props.interactive){S.hideWithInteractivity(q);return}lt(q)}}function he(q){S.props.trigger.indexOf("focusin")<0&&q.target!==be()||S.props.interactive&&q.relatedTarget&&M.contains(q.relatedTarget)||lt(q)}function Se(q){return bo.isTouch?B()!==q.type.indexOf("touch")>=0:!1}function Re(){Ze();var q=S.props,ve=q.popperOptions,te=q.placement,ne=q.offset,ye=q.getReferenceClientRect,Ve=q.moveTransition,We=oe()?yL(M).arrow:null,ga=ye?{getBoundingClientRect:ye,contextElement:ye.contextElement||be()}:n,_t={name:"$$tippy",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(Oa){var Cn=Oa.state;if(oe()){var ku=Le(),Bc=ku.box;["placement","reference-hidden","escaped"].forEach(function(ql){ql==="placement"?Bc.setAttribute("data-placement",Cn.placement):Cn.attributes.popper["data-popper-"+ql]?Bc.setAttribute("data-"+ql,""):Bc.removeAttribute("data-"+ql)}),Cn.attributes.popper={}}}},Wt=[{name:"offset",options:{offset:ne}},{name:"preventOverflow",options:{padding:{top:2,bottom:2,left:5,right:5}}},{name:"flip",options:{padding:5}},{name:"computeStyles",options:{adaptive:!Ve}},_t];oe()&&We&&Wt.push({name:"arrow",options:{element:We,padding:3}}),Wt.push.apply(Wt,(ve==null?void 0:ve.modifiers)||[]),S.popperInstance=rne(ga,M,Object.assign({},ve,{placement:te,onFirstUpdate:x,modifiers:Wt}))}function Ze(){S.popperInstance&&(S.popperInstance.destroy(),S.popperInstance=null)}function ze(){var q=S.props.appendTo,ve,te=be();S.props.interactive&&q===$H||q==="parent"?ve=te.parentNode:ve=AH(q,[te]),ve.contains(M)||ve.appendChild(M),S.state.isMounted=!0,Re()}function qe(){return vL(M.querySelectorAll("[data-tippy-root]"))}function Be(q){S.clearDelayTimeouts(),q&&G("onTrigger",[S,q]),ft();var ve=de(!0),te=j(),ne=te[0],ye=te[1];bo.isTouch&&ne==="hold"&&ye&&(ve=ye),ve?s=setTimeout(function(){S.show()},ve):S.show()}function lt(q){if(S.clearDelayTimeouts(),G("onUntrigger",[S,q]),!S.state.isVisible){kt();return}if(!(S.props.trigger.indexOf("mouseenter")>=0&&S.props.trigger.indexOf("click")>=0&&["mouseleave","mousemove"].indexOf(q.type)>=0&&i)){var ve=de(!1);ve?o=setTimeout(function(){S.state.isVisible&&S.hide()},ve):r=requestAnimationFrame(function(){S.hide()})}}function yt(){S.state.isEnabled=!0}function it(){S.hide(),S.state.isEnabled=!1}function Pe(){clearTimeout(s),clearTimeout(o),cancelAnimationFrame(r)}function Ue(q){if(!S.state.isDestroyed){G("onBeforeUpdate",[S,q]),pe();var ve=S.props,te=$V(n,Object.assign({},ve,SV(q),{ignoreAttributes:!0}));S.props=te,ue(),ve.interactiveDebounce!==te.interactiveDebounce&&(He(),$=MV(N,te.interactiveDebounce)),ve.triggerTarget&&!te.triggerTarget?lc(ve.triggerTarget).forEach(function(ne){ne.removeAttribute("aria-expanded")}):te.triggerTarget&&n.removeAttribute("aria-expanded"),Ee(),J(),g&&g(ve,te),S.popperInstance&&(Re(),qe().forEach(function(ne){requestAnimationFrame(ne._tippy.popperInstance.forceUpdate)})),G("onAfterUpdate",[S,q])}}function ht(q){S.setProps({content:q})}function Mt(){var q=S.state.isVisible,ve=S.state.isDestroyed,te=!S.state.isEnabled,ne=bo.isTouch&&!S.props.touch,ye=G$(S.props.duration,0,ao.duration);if(!(q||ve||te||ne)&&!be().hasAttribute("disabled")&&(G("onShow",[S],!1),S.props.onShow(S)!==!1)){if(S.state.isVisible=!0,oe()&&(M.style.visibility="visible"),J(),ft(),S.state.isMounted||(M.style.transition="none"),oe()){var Ve=Le(),We=Ve.box,ga=Ve.content;Z$([We,ga],0)}x=function(){var Wt;if(!(!S.state.isVisible||m)){if(m=!0,M.offsetHeight,M.style.transition=S.props.moveTransition,oe()&&S.props.animation){var oa=Le(),Oa=oa.box,Cn=oa.content;Z$([Oa,Cn],ye),Wd([Oa,Cn],"visible")}ce(),Ee(),CV(X$,S),(Wt=S.popperInstance)==null||Wt.forceUpdate(),G("onMount",[S]),S.props.animation&&oe()&&Xe(ye,function(){S.state.isShown=!0,G("onShown",[S])})}},ze()}}function Et(){var q=!S.state.isVisible,ve=S.state.isDestroyed,te=!S.state.isEnabled,ne=G$(S.props.duration,1,ao.duration);if(!(q||ve||te)&&(G("onHide",[S],!1),S.props.onHide(S)!==!1)){if(S.state.isVisible=!1,S.state.isShown=!1,m=!1,i=!1,oe()&&(M.style.visibility="hidden"),He(),kt(),J(!0),oe()){var ye=Le(),Ve=ye.box,We=ye.content;S.props.animation&&(Z$([Ve,We],ne),Wd([Ve,We],"hidden"))}ce(),Ee(),S.props.animation?oe()&&Ae(ne,S.unmount):S.unmount()}}function Jt(q){$e().addEventListener("mousemove",$),CV(g1,$),$(q)}function ae(){S.state.isVisible&&S.hide(),S.state.isMounted&&(Ze(),qe().forEach(function(q){q._tippy.unmount()}),M.parentNode&&M.parentNode.removeChild(M),X$=X$.filter(function(q){return q!==S}),S.state.isMounted=!1,G("onHidden",[S]))}function W(){S.state.isDestroyed||(S.clearDelayTimeouts(),S.unmount(),pe(),delete n._tippy,S.state.isDestroyed=!0,G("onDestroy",[S]))}}function lu(n,e){e===void 0&&(e={});var a=ao.plugins.concat(e.plugins||[]);kne();var s=Object.assign({},e,{plugins:a}),o=mne(n),r=o.reduce(function(i,u){var h=u&&Ane(u,s);return h&&i.push(h),i},[]);return XL(n)?r[0]:r}lu.defaultProps=ao;lu.setDefaultProps=Sne;lu.currentInput=bo;Object.assign({},yH,{effect:function(e){var a=e.state,s={popper:{position:a.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(a.elements.popper.style,s.popper),a.styles=s,a.elements.arrow&&Object.assign(a.elements.arrow.style,s.arrow)}});var Ene={name:"animateFill",defaultValue:!1,fn:function(e){var a;if(!((a=e.props.render)!=null&&a.$$tippy))return{};var s=yL(e.popper),o=s.box,r=s.content,i=e.props.animateFill?Tne():null;return{onCreate:function(){i&&(o.insertBefore(i,o.firstElementChild),o.setAttribute("data-animatefill",""),o.style.overflow="hidden",e.setProps({arrow:!1,animation:"shift-away"}))},onMount:function(){if(i){var h=o.style.transitionDuration,m=Number(h.replace("ms",""));r.style.transitionDelay=Math.round(m/10)+"ms",i.style.transitionDuration=h,Wd([i],"visible")}},onShow:function(){i&&(i.style.transitionDuration="0ms")},onHide:function(){i&&Wd([i],"hidden")}}}};function Tne(){var n=_c();return n.className=SH,Wd([n],"hidden"),n}lu.setDefaultProps({render:PH});const Qa=Ce({__name:"Tippy",props:{refKey:{},content:{},disable:{type:Boolean,default:!1},as:{default:"span"},options:{}},setup(n){const e=n,a=O(),s=(u,h)=>{lu(u,{plugins:[Ene],content:h.content,arrow:ine,popperOptions:{modifiers:[{name:"preventOverflow",options:{rootBoundary:"viewport"}}]},animateFill:!1,animation:"shift-away",...h.options})},o=u=>{if(e.refKey){const h=xt(`bind[${e.refKey}]`,()=>{});h&&h(u)}},r={mounted(u){a.value=u}},i=()=>{a.value&&a.value._tippy!==void 0&&(e.disable?a.value._tippy.disable():a.value._tippy.enable())};return dt(e,()=>{i()}),at(()=>{a.value&&(s(a.value,e),o(a.value),i())}),(u,h)=>rs((L(),ge(Da(u.as),{class:"cursor-pointer"},{default:f(()=>[Lt(u.$slots,"default")]),_:3})),[[r]])}});/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */var k1={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pne=n=>n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),k=(n,e)=>({size:a,strokeWidth:s=2,absoluteStrokeWidth:o,color:r,class:i,...u},{attrs:h,slots:m})=>ya("svg",{...k1,width:a||k1.width,height:a||k1.height,stroke:r||k1.stroke,"stroke-width":o?Number(s)*24/Number(a):s,...h,class:["lucide",`lucide-${Pne(n)}`],...u},[...e.map(p=>ya(...p)),...m.default?[m.default()]:[]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O1=k("AArrowDownIcon",[["path",{d:"M3.5 13h6",key:"p1my2r"}],["path",{d:"m2 16 4.5-9 4.5 9",key:"ndf0b3"}],["path",{d:"M18 7v9",key:"pknjwm"}],["path",{d:"m14 12 4 4 4-4",key:"buelq4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V1=k("AArrowUpIcon",[["path",{d:"M3.5 13h6",key:"p1my2r"}],["path",{d:"m2 16 4.5-9 4.5 9",key:"ndf0b3"}],["path",{d:"M18 16V7",key:"ty0viw"}],["path",{d:"m14 11 4-4 4 4",key:"1pu57t"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U1=k("ALargeSmallIcon",[["path",{d:"M21 14h-5",key:"1vh23k"}],["path",{d:"M16 16v-3.5a2.5 2.5 0 0 1 5 0V16",key:"1wh10o"}],["path",{d:"M4.5 13h6",key:"dfilno"}],["path",{d:"m3 16 4.5-9 4.5 9",key:"2dxa0e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F1=k("AccessibilityIcon",[["circle",{cx:"16",cy:"4",r:"1",key:"1grugj"}],["path",{d:"m18 19 1-7-6 1",key:"r0i19z"}],["path",{d:"m5 8 3-3 5.5 3-2.36 3.5",key:"9ptxx2"}],["path",{d:"M4.24 14.5a5 5 0 0 0 6.88 6",key:"10kmtu"}],["path",{d:"M13.76 17.5a5 5 0 0 0-6.88-6",key:"2qq6rc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j1=k("ActivitySquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M17 12h-2l-2 5-2-10-2 5H7",key:"15hlnc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H1=k("ActivityIcon",[["path",{d:"M22 12h-4l-3 9L9 3l-3 9H2",key:"d5dnw9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N1=k("AirVentIcon",[["path",{d:"M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2",key:"larmp2"}],["path",{d:"M6 8h12",key:"6g4wlu"}],["path",{d:"M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12",key:"1bo8pg"}],["path",{d:"M6.6 15.6A2 2 0 1 0 10 17v-5",key:"t9h90c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z1=k("AirplayIcon",[["path",{d:"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1",key:"ns4c3b"}],["polygon",{points:"12 15 17 21 7 21 12 15",key:"1sy95i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ki=k("AlarmClockCheckIcon",[["circle",{cx:"12",cy:"13",r:"8",key:"3y4lt7"}],["path",{d:"M5 3 2 6",key:"18tl5t"}],["path",{d:"m22 6-3-3",key:"1opdir"}],["path",{d:"M6.38 18.7 4 21",key:"17xu3x"}],["path",{d:"M17.64 18.67 20 21",key:"kv2oe2"}],["path",{d:"m9 13 2 2 4-4",key:"6343dt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bi=k("AlarmClockMinusIcon",[["circle",{cx:"12",cy:"13",r:"8",key:"3y4lt7"}],["path",{d:"M5 3 2 6",key:"18tl5t"}],["path",{d:"m22 6-3-3",key:"1opdir"}],["path",{d:"M6.38 18.7 4 21",key:"17xu3x"}],["path",{d:"M17.64 18.67 20 21",key:"kv2oe2"}],["path",{d:"M9 13h6",key:"1uhe8q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B1=k("AlarmClockOffIcon",[["path",{d:"M6.87 6.87a8 8 0 1 0 11.26 11.26",key:"3on8tj"}],["path",{d:"M19.9 14.25a8 8 0 0 0-9.15-9.15",key:"15ghsc"}],["path",{d:"m22 6-3-3",key:"1opdir"}],["path",{d:"M6.26 18.67 4 21",key:"yzmioq"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M4 4 2 6",key:"1ycko6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wi=k("AlarmClockPlusIcon",[["circle",{cx:"12",cy:"13",r:"8",key:"3y4lt7"}],["path",{d:"M5 3 2 6",key:"18tl5t"}],["path",{d:"m22 6-3-3",key:"1opdir"}],["path",{d:"M6.38 18.7 4 21",key:"17xu3x"}],["path",{d:"M17.64 18.67 20 21",key:"kv2oe2"}],["path",{d:"M12 10v6",key:"1bos4e"}],["path",{d:"M9 13h6",key:"1uhe8q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q1=k("AlarmClockIcon",[["circle",{cx:"12",cy:"13",r:"8",key:"3y4lt7"}],["path",{d:"M12 9v4l2 2",key:"1c63tq"}],["path",{d:"M5 3 2 6",key:"18tl5t"}],["path",{d:"m22 6-3-3",key:"1opdir"}],["path",{d:"M6.38 18.7 4 21",key:"17xu3x"}],["path",{d:"M17.64 18.67 20 21",key:"kv2oe2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W1=k("AlarmSmokeIcon",[["path",{d:"M4 8a2 2 0 0 1-2-2V3h20v3a2 2 0 0 1-2 2Z",key:"2c4fvq"}],["path",{d:"m19 8-.8 3c-.1.6-.6 1-1.2 1H7c-.6 0-1.1-.4-1.2-1L5 8",key:"1vrndv"}],["path",{d:"M16 21c0-2.5 2-2.5 2-5",key:"1o3eny"}],["path",{d:"M11 21c0-2.5 2-2.5 2-5",key:"1sicvv"}],["path",{d:"M6 21c0-2.5 2-2.5 2-5",key:"i3w1gp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G1=k("AlbumIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["polyline",{points:"11 3 11 11 14 8 17 11 17 3",key:"1wcwz3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z1=k("AlertCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"12",x2:"12",y1:"8",y2:"12",key:"1pkeuh"}],["line",{x1:"12",x2:"12.01",y1:"16",y2:"16",key:"4dfq90"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K1=k("AlertOctagonIcon",[["polygon",{points:"7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2",key:"h1p8hx"}],["line",{x1:"12",x2:"12",y1:"8",y2:"12",key:"1pkeuh"}],["line",{x1:"12",x2:"12.01",y1:"16",y2:"16",key:"4dfq90"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X1=k("AlertTriangleIcon",[["path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",key:"c3ski4"}],["path",{d:"M12 9v4",key:"juzpu7"}],["path",{d:"M12 17h.01",key:"p32p05"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y1=k("AlignCenterHorizontalIcon",[["path",{d:"M2 12h20",key:"9i4pu4"}],["path",{d:"M10 16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4",key:"11f1s0"}],["path",{d:"M10 8V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4",key:"t14dx9"}],["path",{d:"M20 16v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-1",key:"1w07xs"}],["path",{d:"M14 8V7c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v1",key:"1apec2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q1=k("AlignCenterVerticalIcon",[["path",{d:"M12 2v20",key:"t6zp3m"}],["path",{d:"M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4",key:"14d6g8"}],["path",{d:"M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4",key:"1e2lrw"}],["path",{d:"M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1",key:"1fkdwx"}],["path",{d:"M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1",key:"1euafb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J1=k("AlignCenterIcon",[["line",{x1:"21",x2:"3",y1:"6",y2:"6",key:"1fp77t"}],["line",{x1:"17",x2:"7",y1:"12",y2:"12",key:"rsh8ii"}],["line",{x1:"19",x2:"5",y1:"18",y2:"18",key:"1t0tuv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ep=k("AlignEndHorizontalIcon",[["rect",{width:"6",height:"16",x:"4",y:"2",rx:"2",key:"z5wdxg"}],["rect",{width:"6",height:"9",x:"14",y:"9",rx:"2",key:"um7a8w"}],["path",{d:"M22 22H2",key:"19qnx5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tp=k("AlignEndVerticalIcon",[["rect",{width:"16",height:"6",x:"2",y:"4",rx:"2",key:"10wcwx"}],["rect",{width:"9",height:"6",x:"9",y:"14",rx:"2",key:"4p5bwg"}],["path",{d:"M22 22V2",key:"12ipfv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ap=k("AlignHorizontalDistributeCenterIcon",[["rect",{width:"6",height:"14",x:"4",y:"5",rx:"2",key:"1wwnby"}],["rect",{width:"6",height:"10",x:"14",y:"7",rx:"2",key:"1fe6j6"}],["path",{d:"M17 22v-5",key:"4b6g73"}],["path",{d:"M17 7V2",key:"hnrr36"}],["path",{d:"M7 22v-3",key:"1r4jpn"}],["path",{d:"M7 5V2",key:"liy1u9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const np=k("AlignHorizontalDistributeEndIcon",[["rect",{width:"6",height:"14",x:"4",y:"5",rx:"2",key:"1wwnby"}],["rect",{width:"6",height:"10",x:"14",y:"7",rx:"2",key:"1fe6j6"}],["path",{d:"M10 2v20",key:"uyc634"}],["path",{d:"M20 2v20",key:"1tx262"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sp=k("AlignHorizontalDistributeStartIcon",[["rect",{width:"6",height:"14",x:"4",y:"5",rx:"2",key:"1wwnby"}],["rect",{width:"6",height:"10",x:"14",y:"7",rx:"2",key:"1fe6j6"}],["path",{d:"M4 2v20",key:"gtpd5x"}],["path",{d:"M14 2v20",key:"tg6bpw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const op=k("AlignHorizontalJustifyCenterIcon",[["rect",{width:"6",height:"14",x:"2",y:"5",rx:"2",key:"dy24zr"}],["rect",{width:"6",height:"10",x:"16",y:"7",rx:"2",key:"13zkjt"}],["path",{d:"M12 2v20",key:"t6zp3m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rp=k("AlignHorizontalJustifyEndIcon",[["rect",{width:"6",height:"14",x:"2",y:"5",rx:"2",key:"dy24zr"}],["rect",{width:"6",height:"10",x:"12",y:"7",rx:"2",key:"1ht384"}],["path",{d:"M22 2v20",key:"40qfg1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ip=k("AlignHorizontalJustifyStartIcon",[["rect",{width:"6",height:"14",x:"6",y:"5",rx:"2",key:"hsirpf"}],["rect",{width:"6",height:"10",x:"16",y:"7",rx:"2",key:"13zkjt"}],["path",{d:"M2 2v20",key:"1ivd8o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lp=k("AlignHorizontalSpaceAroundIcon",[["rect",{width:"6",height:"10",x:"9",y:"7",rx:"2",key:"yn7j0q"}],["path",{d:"M4 22V2",key:"tsjzd3"}],["path",{d:"M20 22V2",key:"1bnhr8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cp=k("AlignHorizontalSpaceBetweenIcon",[["rect",{width:"6",height:"14",x:"3",y:"5",rx:"2",key:"j77dae"}],["rect",{width:"6",height:"10",x:"15",y:"7",rx:"2",key:"bq30hj"}],["path",{d:"M3 2v20",key:"1d2pfg"}],["path",{d:"M21 2v20",key:"p059bm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dp=k("AlignJustifyIcon",[["line",{x1:"3",x2:"21",y1:"6",y2:"6",key:"4m8b97"}],["line",{x1:"3",x2:"21",y1:"12",y2:"12",key:"10d38w"}],["line",{x1:"3",x2:"21",y1:"18",y2:"18",key:"kwyyxn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const up=k("AlignLeftIcon",[["line",{x1:"21",x2:"3",y1:"6",y2:"6",key:"1fp77t"}],["line",{x1:"15",x2:"3",y1:"12",y2:"12",key:"v6grx8"}],["line",{x1:"17",x2:"3",y1:"18",y2:"18",key:"1awlsn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pp=k("AlignRightIcon",[["line",{x1:"21",x2:"3",y1:"6",y2:"6",key:"1fp77t"}],["line",{x1:"21",x2:"9",y1:"12",y2:"12",key:"1uyos4"}],["line",{x1:"21",x2:"7",y1:"18",y2:"18",key:"1g9eri"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hp=k("AlignStartHorizontalIcon",[["rect",{width:"6",height:"16",x:"4",y:"6",rx:"2",key:"1n4dg1"}],["rect",{width:"6",height:"9",x:"14",y:"6",rx:"2",key:"17khns"}],["path",{d:"M22 2H2",key:"fhrpnj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fp=k("AlignStartVerticalIcon",[["rect",{width:"9",height:"6",x:"6",y:"14",rx:"2",key:"lpm2y7"}],["rect",{width:"16",height:"6",x:"6",y:"4",rx:"2",key:"rdj6ps"}],["path",{d:"M2 2v20",key:"1ivd8o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mp=k("AlignVerticalDistributeCenterIcon",[["rect",{width:"14",height:"6",x:"5",y:"14",rx:"2",key:"jmoj9s"}],["rect",{width:"10",height:"6",x:"7",y:"4",rx:"2",key:"aza5on"}],["path",{d:"M22 7h-5",key:"o2endc"}],["path",{d:"M7 7H1",key:"105l6j"}],["path",{d:"M22 17h-3",key:"1lwga1"}],["path",{d:"M5 17H2",key:"1gx9xc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vp=k("AlignVerticalDistributeEndIcon",[["rect",{width:"14",height:"6",x:"5",y:"14",rx:"2",key:"jmoj9s"}],["rect",{width:"10",height:"6",x:"7",y:"4",rx:"2",key:"aza5on"}],["path",{d:"M2 20h20",key:"owomy5"}],["path",{d:"M2 10h20",key:"1ir3d8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yp=k("AlignVerticalDistributeStartIcon",[["rect",{width:"14",height:"6",x:"5",y:"14",rx:"2",key:"jmoj9s"}],["rect",{width:"10",height:"6",x:"7",y:"4",rx:"2",key:"aza5on"}],["path",{d:"M2 14h20",key:"myj16y"}],["path",{d:"M2 4h20",key:"mda7wb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _p=k("AlignVerticalJustifyCenterIcon",[["rect",{width:"14",height:"6",x:"5",y:"16",rx:"2",key:"1i8z2d"}],["rect",{width:"10",height:"6",x:"7",y:"2",rx:"2",key:"ypihtt"}],["path",{d:"M2 12h20",key:"9i4pu4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gp=k("AlignVerticalJustifyEndIcon",[["rect",{width:"14",height:"6",x:"5",y:"12",rx:"2",key:"4l4tp2"}],["rect",{width:"10",height:"6",x:"7",y:"2",rx:"2",key:"ypihtt"}],["path",{d:"M2 22h20",key:"272qi7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kp=k("AlignVerticalJustifyStartIcon",[["rect",{width:"14",height:"6",x:"5",y:"16",rx:"2",key:"1i8z2d"}],["rect",{width:"10",height:"6",x:"7",y:"6",rx:"2",key:"13squh"}],["path",{d:"M2 2h20",key:"1ennik"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bp=k("AlignVerticalSpaceAroundIcon",[["rect",{width:"10",height:"6",x:"7",y:"9",rx:"2",key:"b1zbii"}],["path",{d:"M22 20H2",key:"1p1f7z"}],["path",{d:"M22 4H2",key:"1b7qnq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wp=k("AlignVerticalSpaceBetweenIcon",[["rect",{width:"14",height:"6",x:"5",y:"15",rx:"2",key:"1w91an"}],["rect",{width:"10",height:"6",x:"7",y:"3",rx:"2",key:"17wqzy"}],["path",{d:"M2 21h20",key:"1nyx9w"}],["path",{d:"M2 3h20",key:"91anmk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xp=k("AmpersandIcon",[["path",{d:"M17.5 12c0 4.4-3.6 8-8 8A4.5 4.5 0 0 1 5 15.5c0-6 8-4 8-8.5a3 3 0 1 0-6 0c0 3 2.5 8.5 12 13",key:"1o9ehi"}],["path",{d:"M16 12h3",key:"4uvgyw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mp=k("AmpersandsIcon",[["path",{d:"M10 17c-5-3-7-7-7-9a2 2 0 0 1 4 0c0 2.5-5 2.5-5 6 0 1.7 1.3 3 3 3 2.8 0 5-2.2 5-5",key:"12lh1k"}],["path",{d:"M22 17c-5-3-7-7-7-9a2 2 0 0 1 4 0c0 2.5-5 2.5-5 6 0 1.7 1.3 3 3 3 2.8 0 5-2.2 5-5",key:"173c68"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cp=k("AnchorIcon",[["circle",{cx:"12",cy:"5",r:"3",key:"rqqgnr"}],["line",{x1:"12",x2:"12",y1:"22",y2:"8",key:"abakz7"}],["path",{d:"M5 12H2a10 10 0 0 0 20 0h-3",key:"1hv3nh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sp=k("AngryIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M16 16s-1.5-2-4-2-4 2-4 2",key:"epbg0q"}],["path",{d:"M7.5 8 10 9",key:"olxxln"}],["path",{d:"m14 9 2.5-1",key:"1j6cij"}],["path",{d:"M9 10h0",key:"1vxvly"}],["path",{d:"M15 10h0",key:"1j6oav"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ip=k("AnnoyedIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M8 15h8",key:"45n4r"}],["path",{d:"M8 9h2",key:"1g203m"}],["path",{d:"M14 9h2",key:"116p9w"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lp=k("AntennaIcon",[["path",{d:"M2 12 7 2",key:"117k30"}],["path",{d:"m7 12 5-10",key:"1tvx22"}],["path",{d:"m12 12 5-10",key:"ev1o1a"}],["path",{d:"m17 12 5-10",key:"1e4ti3"}],["path",{d:"M4.5 7h15",key:"vlsxkz"}],["path",{d:"M12 16v6",key:"c8a4gj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $p=k("AnvilIcon",[["path",{d:"M7 10c-2.8 0-5-2.2-5-5h5",key:"1d6adc"}],["path",{d:"M7 4v8h7a8 8 0 0 0 8-8Z",key:"uu98hv"}],["path",{d:"M9 12v5",key:"3anwtq"}],["path",{d:"M15 12v5",key:"5xh3zn"}],["path",{d:"M5 20a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v1H5Z",key:"10a9tj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ap=k("ApertureIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"14.31",x2:"20.05",y1:"8",y2:"17.94",key:"jdes2e"}],["line",{x1:"9.69",x2:"21.17",y1:"8",y2:"8",key:"1gubuk"}],["line",{x1:"7.38",x2:"13.12",y1:"12",y2:"2.06",key:"1m4d1n"}],["line",{x1:"9.69",x2:"3.95",y1:"16",y2:"6.06",key:"1wye2p"}],["line",{x1:"14.31",x2:"2.83",y1:"16",y2:"16",key:"1l9f4x"}],["line",{x1:"16.62",x2:"10.88",y1:"12",y2:"21.94",key:"1jjvfs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ep=k("AppWindowIcon",[["rect",{x:"2",y:"4",width:"20",height:"16",rx:"2",key:"izxlao"}],["path",{d:"M10 4v4",key:"pp8u80"}],["path",{d:"M2 8h20",key:"d11cs7"}],["path",{d:"M6 4v4",key:"1svtjw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tp=k("AppleIcon",[["path",{d:"M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z",key:"3s7exb"}],["path",{d:"M10 2c1 .5 2 2 2 5",key:"fcco2y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pp=k("ArchiveRestoreIcon",[["rect",{width:"20",height:"5",x:"2",y:"3",rx:"1",key:"1wp1u1"}],["path",{d:"M4 8v11a2 2 0 0 0 2 2h2",key:"tvwodi"}],["path",{d:"M20 8v11a2 2 0 0 1-2 2h-2",key:"1gkqxj"}],["path",{d:"m9 15 3-3 3 3",key:"1pd0qc"}],["path",{d:"M12 12v9",key:"192myk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dp=k("ArchiveXIcon",[["rect",{width:"20",height:"5",x:"2",y:"3",rx:"1",key:"1wp1u1"}],["path",{d:"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8",key:"1s80jp"}],["path",{d:"m9.5 17 5-5",key:"nakeu6"}],["path",{d:"m9.5 12 5 5",key:"1hccrj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rp=k("ArchiveIcon",[["rect",{width:"20",height:"5",x:"2",y:"3",rx:"1",key:"1wp1u1"}],["path",{d:"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8",key:"1s80jp"}],["path",{d:"M10 12h4",key:"a56b0p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Op=k("AreaChartIcon",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["path",{d:"M7 12v5h12V8l-5 5-4-4Z",key:"zxz28u"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vp=k("ArmchairIcon",[["path",{d:"M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3",key:"irtipd"}],["path",{d:"M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H7v-2a2 2 0 0 0-4 0Z",key:"1e01m0"}],["path",{d:"M5 18v2",key:"ppbyun"}],["path",{d:"M19 18v2",key:"gy7782"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Up=k("ArrowBigDownDashIcon",[["path",{d:"M15 5H9",key:"1tp3ed"}],["path",{d:"M15 9v3h4l-7 7-7-7h4V9h6z",key:"oscb9h"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fp=k("ArrowBigDownIcon",[["path",{d:"M15 6v6h4l-7 7-7-7h4V6h6z",key:"1thax2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jp=k("ArrowBigLeftDashIcon",[["path",{d:"M19 15V9",key:"1hci5f"}],["path",{d:"M15 15h-3v4l-7-7 7-7v4h3v6z",key:"16tjna"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hp=k("ArrowBigLeftIcon",[["path",{d:"M18 15h-6v4l-7-7 7-7v4h6v6z",key:"lbrdak"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Np=k("ArrowBigRightDashIcon",[["path",{d:"M5 9v6",key:"158jrl"}],["path",{d:"M9 9h3V5l7 7-7 7v-4H9V9z",key:"1sg2xn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zp=k("ArrowBigRightIcon",[["path",{d:"M6 9h6V5l7 7-7 7v-4H6V9z",key:"7fvt9c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bp=k("ArrowBigUpDashIcon",[["path",{d:"M9 19h6",key:"456am0"}],["path",{d:"M9 15v-3H5l7-7 7 7h-4v3H9z",key:"1r2uve"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qp=k("ArrowBigUpIcon",[["path",{d:"M9 18v-6H5l7-7 7 7h-4v6H9z",key:"1x06kx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wp=k("ArrowDown01Icon",[["path",{d:"m3 16 4 4 4-4",key:"1co6wj"}],["path",{d:"M7 20V4",key:"1yoxec"}],["rect",{x:"15",y:"4",width:"4",height:"6",ry:"2",key:"1bwicg"}],["path",{d:"M17 20v-6h-2",key:"1qp1so"}],["path",{d:"M15 20h4",key:"1j968p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gp=k("ArrowDown10Icon",[["path",{d:"m3 16 4 4 4-4",key:"1co6wj"}],["path",{d:"M7 20V4",key:"1yoxec"}],["path",{d:"M17 10V4h-2",key:"zcsr5x"}],["path",{d:"M15 10h4",key:"id2lce"}],["rect",{x:"15",y:"14",width:"4",height:"6",ry:"2",key:"33xykx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xi=k("ArrowDownAZIcon",[["path",{d:"m3 16 4 4 4-4",key:"1co6wj"}],["path",{d:"M7 20V4",key:"1yoxec"}],["path",{d:"M20 8h-5",key:"1vsyxs"}],["path",{d:"M15 10V6.5a2.5 2.5 0 0 1 5 0V10",key:"ag13bf"}],["path",{d:"M15 14h5l-5 6h5",key:"ur5jdg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zp=k("ArrowDownCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 8v8",key:"napkw2"}],["path",{d:"m8 12 4 4 4-4",key:"k98ssh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kp=k("ArrowDownFromLineIcon",[["path",{d:"M19 3H5",key:"1236rx"}],["path",{d:"M12 21V7",key:"gj6g52"}],["path",{d:"m6 15 6 6 6-6",key:"h15q88"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xp=k("ArrowDownLeftFromCircleIcon",[["path",{d:"M2 12a10 10 0 1 1 10 10",key:"1yn6ov"}],["path",{d:"m2 22 10-10",key:"28ilpk"}],["path",{d:"M8 22H2v-6",key:"sulq54"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yp=k("ArrowDownLeftSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m16 8-8 8",key:"166keh"}],["path",{d:"M16 16H8V8",key:"1w2ppm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qp=k("ArrowDownLeftIcon",[["path",{d:"M17 7 7 17",key:"15tmo1"}],["path",{d:"M17 17H7V7",key:"1org7z"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jp=k("ArrowDownNarrowWideIcon",[["path",{d:"m3 16 4 4 4-4",key:"1co6wj"}],["path",{d:"M7 20V4",key:"1yoxec"}],["path",{d:"M11 4h4",key:"6d7r33"}],["path",{d:"M11 8h7",key:"djye34"}],["path",{d:"M11 12h10",key:"1438ji"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const eh=k("ArrowDownRightFromCircleIcon",[["path",{d:"M12 22a10 10 0 1 1 10-10",key:"130bv5"}],["path",{d:"M22 22 12 12",key:"131aw7"}],["path",{d:"M22 16v6h-6",key:"1gvm70"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const th=k("ArrowDownRightSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m8 8 8 8",key:"1imecy"}],["path",{d:"M16 8v8H8",key:"1lbpgo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ah=k("ArrowDownRightIcon",[["path",{d:"m7 7 10 10",key:"1fmybs"}],["path",{d:"M17 7v10H7",key:"6fjiku"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nh=k("ArrowDownSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 8v8",key:"napkw2"}],["path",{d:"m8 12 4 4 4-4",key:"k98ssh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sh=k("ArrowDownToDotIcon",[["path",{d:"M12 2v14",key:"jyx4ut"}],["path",{d:"m19 9-7 7-7-7",key:"1oe3oy"}],["circle",{cx:"12",cy:"21",r:"1",key:"o0uj5v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const oh=k("ArrowDownToLineIcon",[["path",{d:"M12 17V3",key:"1cwfxf"}],["path",{d:"m6 11 6 6 6-6",key:"12ii2o"}],["path",{d:"M19 21H5",key:"150jfl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rh=k("ArrowDownUpIcon",[["path",{d:"m3 16 4 4 4-4",key:"1co6wj"}],["path",{d:"M7 20V4",key:"1yoxec"}],["path",{d:"m21 8-4-4-4 4",key:"1c9v7m"}],["path",{d:"M17 4v16",key:"7dpous"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mi=k("ArrowDownWideNarrowIcon",[["path",{d:"m3 16 4 4 4-4",key:"1co6wj"}],["path",{d:"M7 20V4",key:"1yoxec"}],["path",{d:"M11 4h10",key:"1w87gc"}],["path",{d:"M11 8h7",key:"djye34"}],["path",{d:"M11 12h4",key:"q8tih4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ci=k("ArrowDownZAIcon",[["path",{d:"m3 16 4 4 4-4",key:"1co6wj"}],["path",{d:"M7 4v16",key:"1glfcx"}],["path",{d:"M15 4h5l-5 6h5",key:"8asdl1"}],["path",{d:"M15 20v-3.5a2.5 2.5 0 0 1 5 0V20",key:"r6l5cz"}],["path",{d:"M20 18h-5",key:"18j1r2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ih=k("ArrowDownIcon",[["path",{d:"M12 5v14",key:"s699le"}],["path",{d:"m19 12-7 7-7-7",key:"1idqje"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lh=k("ArrowLeftCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M16 12H8",key:"1fr5h0"}],["path",{d:"m12 8-4 4 4 4",key:"15vm53"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ch=k("ArrowLeftFromLineIcon",[["path",{d:"m9 6-6 6 6 6",key:"7v63n9"}],["path",{d:"M3 12h14",key:"13k4hi"}],["path",{d:"M21 19V5",key:"b4bplr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dh=k("ArrowLeftRightIcon",[["path",{d:"M8 3 4 7l4 4",key:"9rb6wj"}],["path",{d:"M4 7h16",key:"6tx8e3"}],["path",{d:"m16 21 4-4-4-4",key:"siv7j2"}],["path",{d:"M20 17H4",key:"h6l3hr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uh=k("ArrowLeftSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m12 8-4 4 4 4",key:"15vm53"}],["path",{d:"M16 12H8",key:"1fr5h0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ph=k("ArrowLeftToLineIcon",[["path",{d:"M3 19V5",key:"rwsyhb"}],["path",{d:"m13 6-6 6 6 6",key:"1yhaz7"}],["path",{d:"M7 12h14",key:"uoisry"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hh=k("ArrowLeftIcon",[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fh=k("ArrowRightCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"m12 16 4-4-4-4",key:"1i9zcv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mh=k("ArrowRightFromLineIcon",[["path",{d:"M3 5v14",key:"1nt18q"}],["path",{d:"M21 12H7",key:"13ipq5"}],["path",{d:"m15 18 6-6-6-6",key:"6tx3qv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vh=k("ArrowRightLeftIcon",[["path",{d:"m16 3 4 4-4 4",key:"1x1c3m"}],["path",{d:"M20 7H4",key:"zbl0bi"}],["path",{d:"m8 21-4-4 4-4",key:"h9nckh"}],["path",{d:"M4 17h16",key:"g4d7ey"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yh=k("ArrowRightSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"m12 16 4-4-4-4",key:"1i9zcv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _h=k("ArrowRightToLineIcon",[["path",{d:"M17 12H3",key:"8awo09"}],["path",{d:"m11 18 6-6-6-6",key:"8c2y43"}],["path",{d:"M21 5v14",key:"nzette"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gh=k("ArrowRightIcon",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"m12 5 7 7-7 7",key:"xquz4c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kh=k("ArrowUp01Icon",[["path",{d:"m3 8 4-4 4 4",key:"11wl7u"}],["path",{d:"M7 4v16",key:"1glfcx"}],["rect",{x:"15",y:"4",width:"4",height:"6",ry:"2",key:"1bwicg"}],["path",{d:"M17 20v-6h-2",key:"1qp1so"}],["path",{d:"M15 20h4",key:"1j968p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bh=k("ArrowUp10Icon",[["path",{d:"m3 8 4-4 4 4",key:"11wl7u"}],["path",{d:"M7 4v16",key:"1glfcx"}],["path",{d:"M17 10V4h-2",key:"zcsr5x"}],["path",{d:"M15 10h4",key:"id2lce"}],["rect",{x:"15",y:"14",width:"4",height:"6",ry:"2",key:"33xykx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Si=k("ArrowUpAZIcon",[["path",{d:"m3 8 4-4 4 4",key:"11wl7u"}],["path",{d:"M7 4v16",key:"1glfcx"}],["path",{d:"M20 8h-5",key:"1vsyxs"}],["path",{d:"M15 10V6.5a2.5 2.5 0 0 1 5 0V10",key:"ag13bf"}],["path",{d:"M15 14h5l-5 6h5",key:"ur5jdg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wh=k("ArrowUpCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m16 12-4-4-4 4",key:"177agl"}],["path",{d:"M12 16V8",key:"1sbj14"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xh=k("ArrowUpDownIcon",[["path",{d:"m21 16-4 4-4-4",key:"f6ql7i"}],["path",{d:"M17 20V4",key:"1ejh1v"}],["path",{d:"m3 8 4-4 4 4",key:"11wl7u"}],["path",{d:"M7 4v16",key:"1glfcx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mh=k("ArrowUpFromDotIcon",[["path",{d:"m5 9 7-7 7 7",key:"1hw5ic"}],["path",{d:"M12 16V2",key:"ywoabb"}],["circle",{cx:"12",cy:"21",r:"1",key:"o0uj5v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ch=k("ArrowUpFromLineIcon",[["path",{d:"m18 9-6-6-6 6",key:"kcunyi"}],["path",{d:"M12 3v14",key:"7cf3v8"}],["path",{d:"M5 21h14",key:"11awu3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sh=k("ArrowUpLeftFromCircleIcon",[["path",{d:"M2 8V2h6",key:"hiwtdz"}],["path",{d:"m2 2 10 10",key:"1oh8rs"}],["path",{d:"M12 2A10 10 0 1 1 2 12",key:"rrk4fa"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ih=k("ArrowUpLeftSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 16V8h8",key:"19xb1h"}],["path",{d:"M16 16 8 8",key:"1qdy8n"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lh=k("ArrowUpLeftIcon",[["path",{d:"M7 17V7h10",key:"11bw93"}],["path",{d:"M17 17 7 7",key:"2786uv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ii=k("ArrowUpNarrowWideIcon",[["path",{d:"m3 8 4-4 4 4",key:"11wl7u"}],["path",{d:"M7 4v16",key:"1glfcx"}],["path",{d:"M11 12h4",key:"q8tih4"}],["path",{d:"M11 16h7",key:"uosisv"}],["path",{d:"M11 20h10",key:"jvxblo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $h=k("ArrowUpRightFromCircleIcon",[["path",{d:"M22 12A10 10 0 1 1 12 2",key:"1fm58d"}],["path",{d:"M22 2 12 12",key:"yg2myt"}],["path",{d:"M16 2h6v6",key:"zan5cs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ah=k("ArrowUpRightSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 8h8v8",key:"b65dnt"}],["path",{d:"m8 16 8-8",key:"13b9ih"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Eh=k("ArrowUpRightIcon",[["path",{d:"M7 7h10v10",key:"1tivn9"}],["path",{d:"M7 17 17 7",key:"1vkiza"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Th=k("ArrowUpSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m16 12-4-4-4 4",key:"177agl"}],["path",{d:"M12 16V8",key:"1sbj14"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ph=k("ArrowUpToLineIcon",[["path",{d:"M5 3h14",key:"7usisc"}],["path",{d:"m18 13-6-6-6 6",key:"1kf1n9"}],["path",{d:"M12 7v14",key:"1akyts"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dh=k("ArrowUpWideNarrowIcon",[["path",{d:"m3 8 4-4 4 4",key:"11wl7u"}],["path",{d:"M7 4v16",key:"1glfcx"}],["path",{d:"M11 12h10",key:"1438ji"}],["path",{d:"M11 16h7",key:"uosisv"}],["path",{d:"M11 20h4",key:"1krc32"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Li=k("ArrowUpZAIcon",[["path",{d:"m3 8 4-4 4 4",key:"11wl7u"}],["path",{d:"M7 4v16",key:"1glfcx"}],["path",{d:"M15 4h5l-5 6h5",key:"8asdl1"}],["path",{d:"M15 20v-3.5a2.5 2.5 0 0 1 5 0V20",key:"r6l5cz"}],["path",{d:"M20 18h-5",key:"18j1r2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rh=k("ArrowUpIcon",[["path",{d:"m5 12 7-7 7 7",key:"hav0vg"}],["path",{d:"M12 19V5",key:"x0mq9r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Oh=k("ArrowsUpFromLineIcon",[["path",{d:"m4 6 3-3 3 3",key:"9aidw8"}],["path",{d:"M7 17V3",key:"19qxw1"}],["path",{d:"m14 6 3-3 3 3",key:"6iy689"}],["path",{d:"M17 17V3",key:"o0fmgi"}],["path",{d:"M4 21h16",key:"1h09gz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vh=k("AsteriskIcon",[["path",{d:"M12 6v12",key:"1vza4d"}],["path",{d:"M17.196 9 6.804 15",key:"1ah31z"}],["path",{d:"m6.804 9 10.392 6",key:"1b6pxd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Uh=k("AtSignIcon",[["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["path",{d:"M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8",key:"7n84p3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fh=k("AtomIcon",[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["path",{d:"M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z",key:"1l2ple"}],["path",{d:"M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z",key:"1wam0m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jh=k("AudioLinesIcon",[["path",{d:"M2 10v3",key:"1fnikh"}],["path",{d:"M6 6v11",key:"11sgs0"}],["path",{d:"M10 3v18",key:"yhl04a"}],["path",{d:"M14 8v7",key:"3a1oy3"}],["path",{d:"M18 5v13",key:"123xd1"}],["path",{d:"M22 10v3",key:"154ddg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hh=k("AudioWaveformIcon",[["path",{d:"M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2",key:"57tc96"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nh=k("AwardIcon",[["circle",{cx:"12",cy:"8",r:"6",key:"1vp47v"}],["path",{d:"M15.477 12.89 17 22l-5-3-5 3 1.523-9.11",key:"em7aur"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zh=k("AxeIcon",[["path",{d:"m14 12-8.5 8.5a2.12 2.12 0 1 1-3-3L11 9",key:"csbz4o"}],["path",{d:"M15 13 9 7l4-4 6 6h3a8 8 0 0 1-7 7z",key:"113wfo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $i=k("Axis3dIcon",[["path",{d:"M4 4v16h16",key:"1s015l"}],["path",{d:"m4 20 7-7",key:"17qe9y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bh=k("BabyIcon",[["path",{d:"M9 12h.01",key:"157uk2"}],["path",{d:"M15 12h.01",key:"1k8ypt"}],["path",{d:"M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5",key:"1u7htd"}],["path",{d:"M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1",key:"5yv0yz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qh=k("BackpackIcon",[["path",{d:"M4 10a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z",key:"wvr1b5"}],["path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2",key:"donm21"}],["path",{d:"M8 21v-5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5",key:"xk3gvk"}],["path",{d:"M8 10h8",key:"c7uz4u"}],["path",{d:"M8 18h8",key:"1no2b1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wh=k("BadgeAlertIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["line",{x1:"12",x2:"12",y1:"8",y2:"12",key:"1pkeuh"}],["line",{x1:"12",x2:"12.01",y1:"16",y2:"16",key:"4dfq90"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gh=k("BadgeCentIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"M12 7v10",key:"jspqdw"}],["path",{d:"M15.4 10a4 4 0 1 0 0 4",key:"2eqtx8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ai=k("BadgeCheckIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zh=k("BadgeDollarSignIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8",key:"1h4pet"}],["path",{d:"M12 18V6",key:"zqpxq5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kh=k("BadgeEuroIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"M7 12h5",key:"gblrwe"}],["path",{d:"M15 9.4a4 4 0 1 0 0 5.2",key:"1makmb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xh=k("BadgeHelpIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3",key:"1u773s"}],["line",{x1:"12",x2:"12.01",y1:"17",y2:"17",key:"io3f8k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yh=k("BadgeIndianRupeeIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"M8 8h8",key:"1bis0t"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"m13 17-5-1h1a4 4 0 0 0 0-8",key:"nu2bwa"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qh=k("BadgeInfoIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["line",{x1:"12",x2:"12",y1:"16",y2:"12",key:"1y1yb1"}],["line",{x1:"12",x2:"12.01",y1:"8",y2:"8",key:"110wyk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jh=k("BadgeJapaneseYenIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"m9 8 3 3v7",key:"17yadx"}],["path",{d:"m12 11 3-3",key:"p4cfq1"}],["path",{d:"M9 12h6",key:"1c52cq"}],["path",{d:"M9 16h6",key:"8wimt3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ef=k("BadgeMinusIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["line",{x1:"8",x2:"16",y1:"12",y2:"12",key:"1jonct"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tf=k("BadgePercentIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"M9 9h.01",key:"1q5me6"}],["path",{d:"M15 15h.01",key:"lqbp3k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const af=k("BadgePlusIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["line",{x1:"12",x2:"12",y1:"8",y2:"16",key:"10p56q"}],["line",{x1:"8",x2:"16",y1:"12",y2:"12",key:"1jonct"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nf=k("BadgePoundSterlingIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"M8 12h4",key:"qz6y1c"}],["path",{d:"M10 16V9.5a2.5 2.5 0 0 1 5 0",key:"3mlbjk"}],["path",{d:"M8 16h7",key:"sbedsn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sf=k("BadgeRussianRubleIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"M9 16h5",key:"1syiyw"}],["path",{d:"M9 12h5a2 2 0 1 0 0-4h-3v9",key:"1ge9c1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const of=k("BadgeSwissFrancIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["path",{d:"M11 17V8h4",key:"1bfq6y"}],["path",{d:"M11 12h3",key:"2eqnfz"}],["path",{d:"M9 16h4",key:"1skf3a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rf=k("BadgeXIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}],["line",{x1:"15",x2:"9",y1:"9",y2:"15",key:"f7djnv"}],["line",{x1:"9",x2:"15",y1:"9",y2:"15",key:"1shsy8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lf=k("BadgeIcon",[["path",{d:"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",key:"3c2336"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cf=k("BaggageClaimIcon",[["path",{d:"M22 18H6a2 2 0 0 1-2-2V7a2 2 0 0 0-2-2",key:"4irg2o"}],["path",{d:"M17 14V4a2 2 0 0 0-2-2h-1a2 2 0 0 0-2 2v10",key:"14fcyx"}],["rect",{width:"13",height:"8",x:"8",y:"6",rx:"1",key:"o6oiis"}],["circle",{cx:"18",cy:"20",r:"2",key:"t9985n"}],["circle",{cx:"9",cy:"20",r:"2",key:"e5v82j"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const df=k("BanIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m4.9 4.9 14.2 14.2",key:"1m5liu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uf=k("BananaIcon",[["path",{d:"M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5",key:"1cscit"}],["path",{d:"M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z",key:"1y1nbv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pf=k("BanknoteIcon",[["rect",{width:"20",height:"12",x:"2",y:"6",rx:"2",key:"9lu3g6"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}],["path",{d:"M6 12h.01M18 12h.01",key:"113zkx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hf=k("BarChart2Icon",[["line",{x1:"18",x2:"18",y1:"20",y2:"10",key:"1xfpm4"}],["line",{x1:"12",x2:"12",y1:"20",y2:"4",key:"be30l9"}],["line",{x1:"6",x2:"6",y1:"20",y2:"14",key:"1r4le6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ff=k("BarChart3Icon",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["path",{d:"M18 17V9",key:"2bz60n"}],["path",{d:"M13 17V5",key:"1frdt8"}],["path",{d:"M8 17v-3",key:"17ska0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mf=k("BarChart4Icon",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["path",{d:"M13 17V9",key:"1fwyjl"}],["path",{d:"M18 17V5",key:"sfb6ij"}],["path",{d:"M8 17v-3",key:"17ska0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vf=k("BarChartBigIcon",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["rect",{width:"4",height:"7",x:"7",y:"10",rx:"1",key:"14u6mf"}],["rect",{width:"4",height:"12",x:"15",y:"5",rx:"1",key:"b3pek6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yf=k("BarChartHorizontalBigIcon",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["rect",{width:"12",height:"4",x:"7",y:"5",rx:"1",key:"936jl1"}],["rect",{width:"7",height:"4",x:"7",y:"13",rx:"1",key:"jqfkpy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _f=k("BarChartHorizontalIcon",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["path",{d:"M7 16h8",key:"srdodz"}],["path",{d:"M7 11h12",key:"127s9w"}],["path",{d:"M7 6h3",key:"w9rmul"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gf=k("BarChartIcon",[["line",{x1:"12",x2:"12",y1:"20",y2:"10",key:"1vz5eb"}],["line",{x1:"18",x2:"18",y1:"20",y2:"4",key:"cun8e5"}],["line",{x1:"6",x2:"6",y1:"20",y2:"16",key:"hq0ia6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kf=k("BarcodeIcon",[["path",{d:"M3 5v14",key:"1nt18q"}],["path",{d:"M8 5v14",key:"1ybrkv"}],["path",{d:"M12 5v14",key:"s699le"}],["path",{d:"M17 5v14",key:"ycjyhj"}],["path",{d:"M21 5v14",key:"nzette"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bf=k("BaselineIcon",[["path",{d:"M4 20h16",key:"14thso"}],["path",{d:"m6 16 6-12 6 12",key:"1b4byz"}],["path",{d:"M8 12h8",key:"1wcyev"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wf=k("BathIcon",[["path",{d:"M9 6 6.5 3.5a1.5 1.5 0 0 0-1-.5C4.683 3 4 3.683 4 4.5V17a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5",key:"1r8yf5"}],["line",{x1:"10",x2:"8",y1:"5",y2:"7",key:"h5g8z4"}],["line",{x1:"2",x2:"22",y1:"12",y2:"12",key:"1dnqot"}],["line",{x1:"7",x2:"7",y1:"19",y2:"21",key:"16jp00"}],["line",{x1:"17",x2:"17",y1:"19",y2:"21",key:"1pxrnk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xf=k("BatteryChargingIcon",[["path",{d:"M15 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2",key:"1sdynx"}],["path",{d:"M6 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1",key:"1gkd3k"}],["path",{d:"m11 7-3 5h4l-3 5",key:"b4a64w"}],["line",{x1:"22",x2:"22",y1:"11",y2:"13",key:"4dh1rd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mf=k("BatteryFullIcon",[["rect",{width:"16",height:"10",x:"2",y:"7",rx:"2",ry:"2",key:"1w10f2"}],["line",{x1:"22",x2:"22",y1:"11",y2:"13",key:"4dh1rd"}],["line",{x1:"6",x2:"6",y1:"11",y2:"13",key:"1wd6dw"}],["line",{x1:"10",x2:"10",y1:"11",y2:"13",key:"haxvl5"}],["line",{x1:"14",x2:"14",y1:"11",y2:"13",key:"c6fn6x"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cf=k("BatteryLowIcon",[["rect",{width:"16",height:"10",x:"2",y:"7",rx:"2",ry:"2",key:"1w10f2"}],["line",{x1:"22",x2:"22",y1:"11",y2:"13",key:"4dh1rd"}],["line",{x1:"6",x2:"6",y1:"11",y2:"13",key:"1wd6dw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sf=k("BatteryMediumIcon",[["rect",{width:"16",height:"10",x:"2",y:"7",rx:"2",ry:"2",key:"1w10f2"}],["line",{x1:"22",x2:"22",y1:"11",y2:"13",key:"4dh1rd"}],["line",{x1:"6",x2:"6",y1:"11",y2:"13",key:"1wd6dw"}],["line",{x1:"10",x2:"10",y1:"11",y2:"13",key:"haxvl5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const If=k("BatteryWarningIcon",[["path",{d:"M14 7h2a2 2 0 0 1 2 2v6c0 1-1 2-2 2h-2",key:"1if82c"}],["path",{d:"M6 7H4a2 2 0 0 0-2 2v6c0 1 1 2 2 2h2",key:"2pdlyl"}],["line",{x1:"22",x2:"22",y1:"11",y2:"13",key:"4dh1rd"}],["line",{x1:"10",x2:"10",y1:"7",y2:"13",key:"1uzyus"}],["line",{x1:"10",x2:"10",y1:"17",y2:"17.01",key:"1y8k4g"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lf=k("BatteryIcon",[["rect",{width:"16",height:"10",x:"2",y:"7",rx:"2",ry:"2",key:"1w10f2"}],["line",{x1:"22",x2:"22",y1:"11",y2:"13",key:"4dh1rd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $f=k("BeakerIcon",[["path",{d:"M4.5 3h15",key:"c7n0jr"}],["path",{d:"M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3",key:"m1uhx7"}],["path",{d:"M6 14h12",key:"4cwo0f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Af=k("BeanOffIcon",[["path",{d:"M9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22a13.96 13.96 0 0 0 9.9-4.1",key:"bq3udt"}],["path",{d:"M10.75 5.093A6 6 0 0 1 22 8c0 2.411-.61 4.68-1.683 6.66",key:"17ccse"}],["path",{d:"M5.341 10.62a4 4 0 0 0 6.487 1.208M10.62 5.341a4.015 4.015 0 0 1 2.039 2.04",key:"18zqgq"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ef=k("BeanIcon",[["path",{d:"M10.165 6.598C9.954 7.478 9.64 8.36 9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22c7.732 0 14-6.268 14-14a6 6 0 0 0-11.835-1.402Z",key:"1tvzk7"}],["path",{d:"M5.341 10.62a4 4 0 1 0 5.279-5.28",key:"2cyri2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tf=k("BedDoubleIcon",[["path",{d:"M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8",key:"1k78r4"}],["path",{d:"M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4",key:"fb3tl2"}],["path",{d:"M12 4v6",key:"1dcgq2"}],["path",{d:"M2 18h20",key:"ajqnye"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pf=k("BedSingleIcon",[["path",{d:"M3 20v-8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8",key:"1wm6mi"}],["path",{d:"M5 10V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4",key:"4k93s5"}],["path",{d:"M3 18h18",key:"1h113x"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Df=k("BedIcon",[["path",{d:"M2 4v16",key:"vw9hq8"}],["path",{d:"M2 8h18a2 2 0 0 1 2 2v10",key:"1dgv2r"}],["path",{d:"M2 17h20",key:"18nfp3"}],["path",{d:"M6 8v9",key:"1yriud"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rf=k("BeefIcon",[["circle",{cx:"12.5",cy:"8.5",r:"2.5",key:"9738u8"}],["path",{d:"M12.5 2a6.5 6.5 0 0 0-6.22 4.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3A6.5 6.5 0 0 0 12.5 2Z",key:"o0f6za"}],["path",{d:"m18.5 6 2.19 4.5a6.48 6.48 0 0 1 .31 2 6.49 6.49 0 0 1-2.6 5.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5",key:"k7p6i0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Of=k("BeerIcon",[["path",{d:"M17 11h1a3 3 0 0 1 0 6h-1",key:"1yp76v"}],["path",{d:"M9 12v6",key:"1u1cab"}],["path",{d:"M13 12v6",key:"1sugkk"}],["path",{d:"M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z",key:"1510fo"}],["path",{d:"M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8",key:"19jb7n"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vf=k("BellDotIcon",[["path",{d:"M19.4 14.9C20.2 16.4 21 17 21 17H3s3-2 3-9c0-3.3 2.7-6 6-6 .7 0 1.3.1 1.9.3",key:"xcehk"}],["path",{d:"M10.3 21a1.94 1.94 0 0 0 3.4 0",key:"qgo35s"}],["circle",{cx:"18",cy:"8",r:"3",key:"1g0gzu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Uf=k("BellElectricIcon",[["path",{d:"M18.8 4A6.3 8.7 0 0 1 20 9",key:"xve1fh"}],["path",{d:"M9 9h.01",key:"1q5me6"}],["circle",{cx:"9",cy:"9",r:"7",key:"p2h5vp"}],["rect",{width:"10",height:"6",x:"4",y:"16",rx:"2",key:"17f3te"}],["path",{d:"M14 19c3 0 4.6-1.6 4.6-1.6",key:"n7odp6"}],["circle",{cx:"20",cy:"16",r:"2",key:"1v9bxh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ff=k("BellMinusIcon",[["path",{d:"M18.4 12c.8 3.8 2.6 5 2.6 5H3s3-2 3-9c0-3.3 2.7-6 6-6 1.8 0 3.4.8 4.5 2",key:"eck70s"}],["path",{d:"M10.3 21a1.94 1.94 0 0 0 3.4 0",key:"qgo35s"}],["path",{d:"M15 8h6",key:"8ybuxh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jf=k("BellOffIcon",[["path",{d:"M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5",key:"o7mx20"}],["path",{d:"M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7",key:"16f1lm"}],["path",{d:"M10.3 21a1.94 1.94 0 0 0 3.4 0",key:"qgo35s"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hf=k("BellPlusIcon",[["path",{d:"M19.3 14.8C20.1 16.4 21 17 21 17H3s3-2 3-9c0-3.3 2.7-6 6-6 1 0 1.9.2 2.8.7",key:"guizqy"}],["path",{d:"M10.3 21a1.94 1.94 0 0 0 3.4 0",key:"qgo35s"}],["path",{d:"M15 8h6",key:"8ybuxh"}],["path",{d:"M18 5v6",key:"g5ayrv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nf=k("BellRingIcon",[["path",{d:"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9",key:"1qo2s2"}],["path",{d:"M10.3 21a1.94 1.94 0 0 0 3.4 0",key:"qgo35s"}],["path",{d:"M4 2C2.8 3.7 2 5.7 2 8",key:"tap9e0"}],["path",{d:"M22 8c0-2.3-.8-4.3-2-6",key:"5bb3ad"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zf=k("BellIcon",[["path",{d:"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9",key:"1qo2s2"}],["path",{d:"M10.3 21a1.94 1.94 0 0 0 3.4 0",key:"qgo35s"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bf=k("BikeIcon",[["circle",{cx:"18.5",cy:"17.5",r:"3.5",key:"15x4ox"}],["circle",{cx:"5.5",cy:"17.5",r:"3.5",key:"1noe27"}],["circle",{cx:"15",cy:"5",r:"1",key:"19l28e"}],["path",{d:"M12 17.5V14l-3-3 4-3 2 3h2",key:"1npguv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qf=k("BinaryIcon",[["rect",{x:"14",y:"14",width:"4",height:"6",rx:"2",key:"p02svl"}],["rect",{x:"6",y:"4",width:"4",height:"6",rx:"2",key:"xm4xkj"}],["path",{d:"M6 20h4",key:"1i6q5t"}],["path",{d:"M14 10h4",key:"ru81e7"}],["path",{d:"M6 14h2v6",key:"16z9wg"}],["path",{d:"M14 4h2v6",key:"1idq9u"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wf=k("BiohazardIcon",[["circle",{cx:"12",cy:"11.9",r:"2",key:"e8h31w"}],["path",{d:"M6.7 3.4c-.9 2.5 0 5.2 2.2 6.7C6.5 9 3.7 9.6 2 11.6",key:"17bolr"}],["path",{d:"m8.9 10.1 1.4.8",key:"15ezny"}],["path",{d:"M17.3 3.4c.9 2.5 0 5.2-2.2 6.7 2.4-1.2 5.2-.6 6.9 1.5",key:"wtwa5u"}],["path",{d:"m15.1 10.1-1.4.8",key:"1r0b28"}],["path",{d:"M16.7 20.8c-2.6-.4-4.6-2.6-4.7-5.3-.2 2.6-2.1 4.8-4.7 5.2",key:"m7qszh"}],["path",{d:"M12 13.9v1.6",key:"zfyyim"}],["path",{d:"M13.5 5.4c-1-.2-2-.2-3 0",key:"1bi9q0"}],["path",{d:"M17 16.4c.7-.7 1.2-1.6 1.5-2.5",key:"1rhjqw"}],["path",{d:"M5.5 13.9c.3.9.8 1.8 1.5 2.5",key:"8gsud3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gf=k("BirdIcon",[["path",{d:"M16 7h.01",key:"1kdx03"}],["path",{d:"M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20",key:"oj1oa8"}],["path",{d:"m20 7 2 .5-2 .5",key:"12nv4d"}],["path",{d:"M10 18v3",key:"1yea0a"}],["path",{d:"M14 17.75V21",key:"1pymcb"}],["path",{d:"M7 18a6 6 0 0 0 3.84-10.61",key:"1npnn0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zf=k("BitcoinIcon",[["path",{d:"M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727",key:"yr8idg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kf=k("BlindsIcon",[["path",{d:"M3 3h18",key:"o7r712"}],["path",{d:"M20 7H8",key:"gd2fo2"}],["path",{d:"M20 11H8",key:"1ynp89"}],["path",{d:"M10 19h10",key:"19hjk5"}],["path",{d:"M8 15h12",key:"1yqzne"}],["path",{d:"M4 3v14",key:"fggqzn"}],["circle",{cx:"4",cy:"19",r:"2",key:"p3m9r0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xf=k("BlocksIcon",[["rect",{width:"7",height:"7",x:"14",y:"3",rx:"1",key:"6d4xhi"}],["path",{d:"M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3",key:"1fpvtg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yf=k("BluetoothConnectedIcon",[["path",{d:"m7 7 10 10-5 5V2l5 5L7 17",key:"1q5490"}],["line",{x1:"18",x2:"21",y1:"12",y2:"12",key:"1rsjjs"}],["line",{x1:"3",x2:"6",y1:"12",y2:"12",key:"11yl8c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qf=k("BluetoothOffIcon",[["path",{d:"m17 17-5 5V12l-5 5",key:"v5aci6"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M14.5 9.5 17 7l-5-5v4.5",key:"1kddfz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jf=k("BluetoothSearchingIcon",[["path",{d:"m7 7 10 10-5 5V2l5 5L7 17",key:"1q5490"}],["path",{d:"M20.83 14.83a4 4 0 0 0 0-5.66",key:"k8tn1j"}],["path",{d:"M18 12h.01",key:"yjnet6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const em=k("BluetoothIcon",[["path",{d:"m7 7 10 10-5 5V2l5 5L7 17",key:"1q5490"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tm=k("BoldIcon",[["path",{d:"M14 12a4 4 0 0 0 0-8H6v8",key:"v2sylx"}],["path",{d:"M15 20a4 4 0 0 0 0-8H6v8Z",key:"1ef5ya"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const am=k("BoltIcon",[["path",{d:"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z",key:"yt0hxn"}],["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nm=k("BombIcon",[["circle",{cx:"11",cy:"13",r:"9",key:"hd149"}],["path",{d:"M14.35 4.65 16.3 2.7a2.41 2.41 0 0 1 3.4 0l1.6 1.6a2.4 2.4 0 0 1 0 3.4l-1.95 1.95",key:"jp4j1b"}],["path",{d:"m22 2-1.5 1.5",key:"ay92ug"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sm=k("BoneIcon",[["path",{d:"M17 10c.7-.7 1.69 0 2.5 0a2.5 2.5 0 1 0 0-5 .5.5 0 0 1-.5-.5 2.5 2.5 0 1 0-5 0c0 .81.7 1.8 0 2.5l-7 7c-.7.7-1.69 0-2.5 0a2.5 2.5 0 0 0 0 5c.28 0 .5.22.5.5a2.5 2.5 0 1 0 5 0c0-.81-.7-1.8 0-2.5Z",key:"w610uw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const om=k("BookAIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"m8 13 4-7 4 7",key:"4rari8"}],["path",{d:"M9.1 11h5.7",key:"1gkovt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rm=k("BookAudioIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"M8 8v3",key:"1qzp49"}],["path",{d:"M12 6v7",key:"1f6ttz"}],["path",{d:"M16 8v3",key:"gejaml"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const im=k("BookCheckIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"m9 9.5 2 2 4-4",key:"1dth82"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lm=k("BookCopyIcon",[["path",{d:"M2 16V4a2 2 0 0 1 2-2h11",key:"spzkk5"}],["path",{d:"M5 14H4a2 2 0 1 0 0 4h1",key:"16gqf9"}],["path",{d:"M22 18H11a2 2 0 1 0 0 4h11V6H11a2 2 0 0 0-2 2v12",key:"1owzki"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ei=k("BookDashedIcon",[["path",{d:"M20 22h-2",key:"1rpnb6"}],["path",{d:"M20 15v2h-2",key:"fph276"}],["path",{d:"M4 19.5V15",key:"6gr39e"}],["path",{d:"M20 8v3",key:"deu0bs"}],["path",{d:"M18 2h2v2",key:"180o53"}],["path",{d:"M4 11V9",key:"v3xsx8"}],["path",{d:"M12 2h2",key:"cvn524"}],["path",{d:"M12 22h2",key:"kn7ki6"}],["path",{d:"M12 17h2",key:"13u4lk"}],["path",{d:"M8 22H6.5a2.5 2.5 0 0 1 0-5H8",key:"fiseg2"}],["path",{d:"M4 5v-.5A2.5 2.5 0 0 1 6.5 2H8",key:"wywhs9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cm=k("BookDownIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"M12 13V7",key:"h0r20n"}],["path",{d:"m9 10 3 3 3-3",key:"zt5b4y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dm=k("BookHeadphonesIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["circle",{cx:"9",cy:"12",r:"1",key:"1vctgf"}],["path",{d:"M8 12v-2a4 4 0 0 1 8 0v2",key:"1vsqkj"}],["circle",{cx:"15",cy:"12",r:"1",key:"1tmaij"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const um=k("BookHeartIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"M16 8.2C16 7 15 6 13.8 6c-.8 0-1.4.3-1.8.9-.4-.6-1-.9-1.8-.9C9 6 8 7 8 8.2c0 .6.3 1.2.7 1.6h0C10 11.1 12 13 12 13s2-1.9 3.3-3.1h0c.4-.4.7-1 .7-1.7z",key:"1dlbw1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pm=k("BookImageIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["circle",{cx:"10",cy:"8",r:"2",key:"2qkj4p"}],["path",{d:"m20 13.7-2.1-2.1c-.8-.8-2-.8-2.8 0L9.7 17",key:"160say"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hm=k("BookKeyIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H14",key:"1gfsgw"}],["path",{d:"M20 8v14H6.5a2.5 2.5 0 0 1 0-5H20",key:"zb0ngp"}],["circle",{cx:"14",cy:"8",r:"2",key:"u49eql"}],["path",{d:"m20 2-4.5 4.5",key:"1sppr8"}],["path",{d:"m19 3 1 1",key:"ze14oc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fm=k("BookLockIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H10",key:"18wgow"}],["path",{d:"M20 15v7H6.5a2.5 2.5 0 0 1 0-5H20",key:"dpch1j"}],["rect",{width:"8",height:"5",x:"12",y:"6",rx:"1",key:"9nqwug"}],["path",{d:"M18 6V4a2 2 0 1 0-4 0v2",key:"1aquzs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mm=k("BookMarkedIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["polyline",{points:"10 2 10 10 13 7 16 10 16 2",key:"13o6vz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vm=k("BookMinusIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"M9 10h6",key:"9gxzsh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ym=k("BookOpenCheckIcon",[["path",{d:"M8 3H2v15h7c1.7 0 3 1.3 3 3V7c0-2.2-1.8-4-4-4Z",key:"1i8u0n"}],["path",{d:"m16 12 2 2 4-4",key:"mdajum"}],["path",{d:"M22 6V3h-6c-2.2 0-4 1.8-4 4v14c0-1.7 1.3-3 3-3h7v-2.3",key:"jb5l51"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _m=k("BookOpenTextIcon",[["path",{d:"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z",key:"vv98re"}],["path",{d:"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z",key:"1cyq3y"}],["path",{d:"M6 8h2",key:"30oboj"}],["path",{d:"M6 12h2",key:"32wvfc"}],["path",{d:"M16 8h2",key:"msurwy"}],["path",{d:"M16 12h2",key:"7q9ll5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gm=k("BookOpenIcon",[["path",{d:"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z",key:"vv98re"}],["path",{d:"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z",key:"1cyq3y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const km=k("BookPlusIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"M9 10h6",key:"9gxzsh"}],["path",{d:"M12 7v6",key:"lw1j43"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bm=k("BookTextIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"M8 7h6",key:"1f0q6e"}],["path",{d:"M8 11h8",key:"vwpz6n"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wm=k("BookTypeIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"M16 8V6H8v2",key:"x8j6u4"}],["path",{d:"M12 6v7",key:"1f6ttz"}],["path",{d:"M10 13h4",key:"ytezjc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xm=k("BookUp2Icon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2",key:"1lorq7"}],["path",{d:"M18 2h2v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"1nfm9i"}],["path",{d:"M12 13V7",key:"h0r20n"}],["path",{d:"m9 10 3-3 3 3",key:"11gsxs"}],["path",{d:"m9 5 3-3 3 3",key:"l8vdw6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mm=k("BookUpIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"M12 13V7",key:"h0r20n"}],["path",{d:"m9 10 3-3 3 3",key:"11gsxs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cm=k("BookUserIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["circle",{cx:"12",cy:"8",r:"2",key:"1822b1"}],["path",{d:"M15 13a3 3 0 1 0-6 0",key:"10j68g"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sm=k("BookXIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}],["path",{d:"m14.5 7-5 5",key:"dy991v"}],["path",{d:"m9.5 7 5 5",key:"s45iea"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Im=k("BookIcon",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lm=k("BookmarkCheckIcon",[["path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z",key:"169p4p"}],["path",{d:"m9 10 2 2 4-4",key:"1gnqz4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $m=k("BookmarkMinusIcon",[["path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z",key:"1fy3hk"}],["line",{x1:"15",x2:"9",y1:"10",y2:"10",key:"1gty7f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Am=k("BookmarkPlusIcon",[["path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z",key:"1fy3hk"}],["line",{x1:"12",x2:"12",y1:"7",y2:"13",key:"1cppfj"}],["line",{x1:"15",x2:"9",y1:"10",y2:"10",key:"1gty7f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Em=k("BookmarkXIcon",[["path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z",key:"169p4p"}],["path",{d:"m14.5 7.5-5 5",key:"3lb6iw"}],["path",{d:"m9.5 7.5 5 5",key:"ko136h"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tm=k("BookmarkIcon",[["path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z",key:"1fy3hk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pm=k("BoomBoxIcon",[["path",{d:"M4 9V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4",key:"vvzvr1"}],["path",{d:"M8 8v1",key:"xcqmfk"}],["path",{d:"M12 8v1",key:"1rj8u4"}],["path",{d:"M16 8v1",key:"1q12zr"}],["rect",{width:"20",height:"12",x:"2",y:"9",rx:"2",key:"igpb89"}],["circle",{cx:"8",cy:"15",r:"2",key:"fa4a8s"}],["circle",{cx:"16",cy:"15",r:"2",key:"14c3ya"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dm=k("BotIcon",[["path",{d:"M12 8V4H8",key:"hb8ula"}],["rect",{width:"16",height:"12",x:"4",y:"8",rx:"2",key:"enze0r"}],["path",{d:"M2 14h2",key:"vft8re"}],["path",{d:"M20 14h2",key:"4cs60a"}],["path",{d:"M15 13v2",key:"1xurst"}],["path",{d:"M9 13v2",key:"rq6x2g"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rm=k("BoxSelectIcon",[["path",{d:"M5 3a2 2 0 0 0-2 2",key:"y57alp"}],["path",{d:"M19 3a2 2 0 0 1 2 2",key:"18rm91"}],["path",{d:"M21 19a2 2 0 0 1-2 2",key:"1j7049"}],["path",{d:"M5 21a2 2 0 0 1-2-2",key:"sbafld"}],["path",{d:"M9 3h1",key:"1yesri"}],["path",{d:"M9 21h1",key:"15o7lz"}],["path",{d:"M14 3h1",key:"1ec4yj"}],["path",{d:"M14 21h1",key:"v9vybs"}],["path",{d:"M3 9v1",key:"1r0deq"}],["path",{d:"M21 9v1",key:"mxsmne"}],["path",{d:"M3 14v1",key:"vnatye"}],["path",{d:"M21 14v1",key:"169vum"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Om=k("BoxIcon",[["path",{d:"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z",key:"hh9hay"}],["path",{d:"m3.3 7 8.7 5 8.7-5",key:"g66t2b"}],["path",{d:"M12 22V12",key:"d0xqtd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vm=k("BoxesIcon",[["path",{d:"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z",key:"lc1i9w"}],["path",{d:"m7 16.5-4.74-2.85",key:"1o9zyk"}],["path",{d:"m7 16.5 5-3",key:"va8pkn"}],["path",{d:"M7 16.5v5.17",key:"jnp8gn"}],["path",{d:"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z",key:"8zsnat"}],["path",{d:"m17 16.5-5-3",key:"8arw3v"}],["path",{d:"m17 16.5 4.74-2.85",key:"8rfmw"}],["path",{d:"M17 16.5v5.17",key:"k6z78m"}],["path",{d:"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z",key:"1xygjf"}],["path",{d:"M12 8 7.26 5.15",key:"1vbdud"}],["path",{d:"m12 8 4.74-2.85",key:"3rx089"}],["path",{d:"M12 13.5V8",key:"1io7kd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ti=k("BracesIcon",[["path",{d:"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1",key:"ezmyqa"}],["path",{d:"M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1",key:"e1hn23"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Um=k("BracketsIcon",[["path",{d:"M16 3h3v18h-3",key:"1yor1f"}],["path",{d:"M8 21H5V3h3",key:"1qrfwo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fm=k("BrainCircuitIcon",[["path",{d:"M12 4.5a2.5 2.5 0 0 0-4.96-.46 2.5 2.5 0 0 0-1.98 3 2.5 2.5 0 0 0-1.32 4.24 3 3 0 0 0 .34 5.58 2.5 2.5 0 0 0 2.96 3.08 2.5 2.5 0 0 0 4.91.05L12 20V4.5Z",key:"ixwj2a"}],["path",{d:"M16 8V5c0-1.1.9-2 2-2",key:"13dx7u"}],["path",{d:"M12 13h4",key:"1ku699"}],["path",{d:"M12 18h6a2 2 0 0 1 2 2v1",key:"105ag5"}],["path",{d:"M12 8h8",key:"1lhi5i"}],["path",{d:"M20.5 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z",key:"1s25gz"}],["path",{d:"M16.5 13a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z",key:"127460"}],["path",{d:"M20.5 21a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z",key:"fys062"}],["path",{d:"M18.5 3a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z",key:"1vib61"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jm=k("BrainCogIcon",[["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["path",{d:"M12 4.5a2.5 2.5 0 0 0-4.96-.46 2.5 2.5 0 0 0-1.98 3 2.5 2.5 0 0 0-1.32 4.24 3 3 0 0 0 .34 5.58 2.5 2.5 0 0 0 2.96 3.08A2.5 2.5 0 0 0 12 19.5a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 12 4.5",key:"1f4le0"}],["path",{d:"m15.7 10.4-.9.4",key:"ayzo6p"}],["path",{d:"m9.2 13.2-.9.4",key:"1uzb3g"}],["path",{d:"m13.6 15.7-.4-.9",key:"11ifqf"}],["path",{d:"m10.8 9.2-.4-.9",key:"1pmk2v"}],["path",{d:"m15.7 13.5-.9-.4",key:"7ng02m"}],["path",{d:"m9.2 10.9-.9-.4",key:"1x66zd"}],["path",{d:"m10.5 15.7.4-.9",key:"3js94g"}],["path",{d:"m13.1 9.2.4-.9",key:"18n7mc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hm=k("BrainIcon",[["path",{d:"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z",key:"1mhkh5"}],["path",{d:"M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z",key:"1d6s00"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nm=k("BrickWallIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 9v6",key:"199k2o"}],["path",{d:"M16 15v6",key:"8rj2es"}],["path",{d:"M16 3v6",key:"1j6rpj"}],["path",{d:"M3 15h18",key:"5xshup"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"M8 15v6",key:"1stoo3"}],["path",{d:"M8 3v6",key:"vlvjmk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zm=k("BriefcaseIcon",[["rect",{width:"20",height:"14",x:"2",y:"7",rx:"2",ry:"2",key:"eto64e"}],["path",{d:"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16",key:"zwj3tp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bm=k("BringToFrontIcon",[["rect",{x:"8",y:"8",width:"8",height:"8",rx:"2",key:"yj20xf"}],["path",{d:"M4 10a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2",key:"1ltk23"}],["path",{d:"M14 20a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2",key:"1q24h9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qm=k("BrushIcon",[["path",{d:"m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08",key:"1styjt"}],["path",{d:"M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z",key:"z0l1mu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wm=k("BugOffIcon",[["path",{d:"M15 7.13V6a3 3 0 0 0-5.14-2.1L8 2",key:"vl8zik"}],["path",{d:"M14.12 3.88 16 2",key:"qol33r"}],["path",{d:"M22 13h-4v-2a4 4 0 0 0-4-4h-1.3",key:"1ou0bd"}],["path",{d:"M20.97 5c0 2.1-1.6 3.8-3.5 4",key:"18gb23"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M7.7 7.7A4 4 0 0 0 6 11v3a6 6 0 0 0 11.13 3.13",key:"1njkjs"}],["path",{d:"M12 20v-8",key:"i3yub9"}],["path",{d:"M6 13H2",key:"82j7cp"}],["path",{d:"M3 21c0-2.1 1.7-3.9 3.8-4",key:"4p0ekp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gm=k("BugPlayIcon",[["path",{d:"m8 2 1.88 1.88",key:"fmnt4t"}],["path",{d:"M14.12 3.88 16 2",key:"qol33r"}],["path",{d:"M9 7.13v-1a3.003 3.003 0 1 1 6 0v1",key:"d7y7pr"}],["path",{d:"M18 11a4 4 0 0 0-4-4h-4a4 4 0 0 0-4 4v3a6.1 6.1 0 0 0 2 4.5",key:"1tjixy"}],["path",{d:"M6.53 9C4.6 8.8 3 7.1 3 5",key:"32zzws"}],["path",{d:"M6 13H2",key:"82j7cp"}],["path",{d:"M3 21c0-2.1 1.7-3.9 3.8-4",key:"4p0ekp"}],["path",{d:"M20.97 5c0 2.1-1.6 3.8-3.5 4",key:"18gb23"}],["path",{d:"m12 12 8 5-8 5Z",key:"1ydf81"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zm=k("BugIcon",[["path",{d:"m8 2 1.88 1.88",key:"fmnt4t"}],["path",{d:"M14.12 3.88 16 2",key:"qol33r"}],["path",{d:"M9 7.13v-1a3.003 3.003 0 1 1 6 0v1",key:"d7y7pr"}],["path",{d:"M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6",key:"xs1cw7"}],["path",{d:"M12 20v-9",key:"1qisl0"}],["path",{d:"M6.53 9C4.6 8.8 3 7.1 3 5",key:"32zzws"}],["path",{d:"M6 13H2",key:"82j7cp"}],["path",{d:"M3 21c0-2.1 1.7-3.9 3.8-4",key:"4p0ekp"}],["path",{d:"M20.97 5c0 2.1-1.6 3.8-3.5 4",key:"18gb23"}],["path",{d:"M22 13h-4",key:"1jl80f"}],["path",{d:"M17.2 17c2.1.1 3.8 1.9 3.8 4",key:"k3fwyw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Km=k("Building2Icon",[["path",{d:"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z",key:"1b4qmf"}],["path",{d:"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2",key:"i71pzd"}],["path",{d:"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2",key:"10jefs"}],["path",{d:"M10 6h4",key:"1itunk"}],["path",{d:"M10 10h4",key:"tcdvrf"}],["path",{d:"M10 14h4",key:"kelpxr"}],["path",{d:"M10 18h4",key:"1ulq68"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xm=k("BuildingIcon",[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2",key:"76otgf"}],["path",{d:"M9 22v-4h6v4",key:"r93iot"}],["path",{d:"M8 6h.01",key:"1dz90k"}],["path",{d:"M16 6h.01",key:"1x0f13"}],["path",{d:"M12 6h.01",key:"1vi96p"}],["path",{d:"M12 10h.01",key:"1nrarc"}],["path",{d:"M12 14h.01",key:"1etili"}],["path",{d:"M16 10h.01",key:"1m94wz"}],["path",{d:"M16 14h.01",key:"1gbofw"}],["path",{d:"M8 10h.01",key:"19clt8"}],["path",{d:"M8 14h.01",key:"6423bh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ym=k("BusFrontIcon",[["path",{d:"M4 6 2 7",key:"1mqr15"}],["path",{d:"M10 6h4",key:"1itunk"}],["path",{d:"m22 7-2-1",key:"1umjhc"}],["rect",{width:"16",height:"16",x:"4",y:"3",rx:"2",key:"1wxw4b"}],["path",{d:"M4 11h16",key:"mpoxn0"}],["path",{d:"M8 15h.01",key:"a7atzg"}],["path",{d:"M16 15h.01",key:"rnfrdf"}],["path",{d:"M6 19v2",key:"1loha6"}],["path",{d:"M18 21v-2",key:"sqyl04"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qm=k("BusIcon",[["path",{d:"M8 6v6",key:"18i7km"}],["path",{d:"M15 6v6",key:"1sg6z9"}],["path",{d:"M2 12h19.6",key:"de5uta"}],["path",{d:"M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3",key:"1wwztk"}],["circle",{cx:"7",cy:"18",r:"2",key:"19iecd"}],["path",{d:"M9 18h5",key:"lrx6i"}],["circle",{cx:"16",cy:"18",r:"2",key:"1v4tcr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jm=k("CableCarIcon",[["path",{d:"M10 3h.01",key:"lbucoy"}],["path",{d:"M14 2h.01",key:"1k8aa1"}],["path",{d:"m2 9 20-5",key:"1kz0j5"}],["path",{d:"M12 12V6.5",key:"1vbrij"}],["rect",{width:"16",height:"10",x:"4",y:"12",rx:"3",key:"if91er"}],["path",{d:"M9 12v5",key:"3anwtq"}],["path",{d:"M15 12v5",key:"5xh3zn"}],["path",{d:"M4 17h16",key:"g4d7ey"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e2=k("CableIcon",[["path",{d:"M4 9a2 2 0 0 1-2-2V5h6v2a2 2 0 0 1-2 2Z",key:"1s6oa5"}],["path",{d:"M3 5V3",key:"1k5hjh"}],["path",{d:"M7 5V3",key:"1t1388"}],["path",{d:"M19 15V6.5a3.5 3.5 0 0 0-7 0v11a3.5 3.5 0 0 1-7 0V9",key:"1ytv72"}],["path",{d:"M17 21v-2",key:"ds4u3f"}],["path",{d:"M21 21v-2",key:"eo0ou"}],["path",{d:"M22 19h-6v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2Z",key:"sdz6o8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t2=k("CakeSliceIcon",[["circle",{cx:"9",cy:"7",r:"2",key:"1305pl"}],["path",{d:"M7.2 7.9 3 11v9c0 .6.4 1 1 1h16c.6 0 1-.4 1-1v-9c0-2-3-6-7-8l-3.6 2.6",key:"xle13f"}],["path",{d:"M16 13H3",key:"1wpj08"}],["path",{d:"M16 17H3",key:"3lvfcd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a2=k("CakeIcon",[["path",{d:"M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8",key:"1w3rig"}],["path",{d:"M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1",key:"n2jgmb"}],["path",{d:"M2 21h20",key:"1nyx9w"}],["path",{d:"M7 8v3",key:"1qtyvj"}],["path",{d:"M12 8v3",key:"hwp4zt"}],["path",{d:"M17 8v3",key:"1i6e5u"}],["path",{d:"M7 4h0.01",key:"hsw7lv"}],["path",{d:"M12 4h0.01",key:"1e3d8f"}],["path",{d:"M17 4h0.01",key:"p7cxgy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n2=k("CalculatorIcon",[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",key:"1nb95v"}],["line",{x1:"8",x2:"16",y1:"6",y2:"6",key:"x4nwl0"}],["line",{x1:"16",x2:"16",y1:"14",y2:"18",key:"wjye3r"}],["path",{d:"M16 10h.01",key:"1m94wz"}],["path",{d:"M12 10h.01",key:"1nrarc"}],["path",{d:"M8 10h.01",key:"19clt8"}],["path",{d:"M12 14h.01",key:"1etili"}],["path",{d:"M8 14h.01",key:"6423bh"}],["path",{d:"M12 18h.01",key:"mhygvu"}],["path",{d:"M8 18h.01",key:"lrp35t"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s2=k("CalendarCheck2Icon",[["path",{d:"M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",key:"bce9hv"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}],["path",{d:"m16 20 2 2 4-4",key:"13tcca"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o2=k("CalendarCheckIcon",[["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",ry:"2",key:"eu3xkr"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}],["path",{d:"m9 16 2 2 4-4",key:"19s6y9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r2=k("CalendarClockIcon",[["path",{d:"M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5",key:"1osxxc"}],["path",{d:"M16 2v4",key:"4m81vk"}],["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M3 10h5",key:"r794hk"}],["path",{d:"M17.5 17.5 16 16.25V14",key:"re2vv1"}],["path",{d:"M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z",key:"ame013"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i2=k("CalendarDaysIcon",[["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",ry:"2",key:"eu3xkr"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}],["path",{d:"M8 14h.01",key:"6423bh"}],["path",{d:"M12 14h.01",key:"1etili"}],["path",{d:"M16 14h.01",key:"1gbofw"}],["path",{d:"M8 18h.01",key:"lrp35t"}],["path",{d:"M12 18h.01",key:"mhygvu"}],["path",{d:"M16 18h.01",key:"kzsmim"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l2=k("CalendarHeartIcon",[["path",{d:"M21 10V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h7",key:"1sfrvf"}],["path",{d:"M16 2v4",key:"4m81vk"}],["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M3 10h18",key:"8toen8"}],["path",{d:"M21.29 14.7a2.43 2.43 0 0 0-2.65-.52c-.3.12-.57.3-.8.53l-.34.34-.35-.34a2.43 2.43 0 0 0-2.65-.53c-.3.12-.56.3-.79.53-.95.94-1 2.53.2 3.74L17.5 22l3.6-3.55c1.2-1.21 1.14-2.8.19-3.74Z",key:"1t7hil"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c2=k("CalendarMinusIcon",[["path",{d:"M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",key:"3spt84"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}],["line",{x1:"16",x2:"22",y1:"19",y2:"19",key:"1g9955"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d2=k("CalendarOffIcon",[["path",{d:"M4.18 4.18A2 2 0 0 0 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 1.82-1.18",key:"1feomx"}],["path",{d:"M21 15.5V6a2 2 0 0 0-2-2H9.5",key:"yhw86o"}],["path",{d:"M16 2v4",key:"4m81vk"}],["path",{d:"M3 10h7",key:"1wap6i"}],["path",{d:"M21 10h-5.5",key:"quycpq"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u2=k("CalendarPlusIcon",[["path",{d:"M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",key:"3spt84"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}],["line",{x1:"19",x2:"19",y1:"16",y2:"22",key:"1ttwzi"}],["line",{x1:"16",x2:"22",y1:"19",y2:"19",key:"1g9955"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p2=k("CalendarRangeIcon",[["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",ry:"2",key:"eu3xkr"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}],["path",{d:"M17 14h-6",key:"bkmgh3"}],["path",{d:"M13 18H7",key:"bb0bb7"}],["path",{d:"M7 14h.01",key:"1qa3f1"}],["path",{d:"M17 18h.01",key:"1bdyru"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h2=k("CalendarSearchIcon",[["path",{d:"M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h7.5",key:"18ncp8"}],["path",{d:"M16 2v4",key:"4m81vk"}],["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M3 10h18",key:"8toen8"}],["path",{d:"M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6v0Z",key:"mgbru4"}],["path",{d:"m22 22-1.5-1.5",key:"1x83k4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f2=k("CalendarX2Icon",[["path",{d:"M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",key:"3spt84"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}],["line",{x1:"17",x2:"22",y1:"17",y2:"22",key:"xa9o8b"}],["line",{x1:"17",x2:"22",y1:"22",y2:"17",key:"18nitg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m2=k("CalendarXIcon",[["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",ry:"2",key:"eu3xkr"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}],["line",{x1:"10",x2:"14",y1:"14",y2:"18",key:"1g3qc0"}],["line",{x1:"14",x2:"10",y1:"14",y2:"18",key:"1az83m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v2=k("CalendarIcon",[["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",ry:"2",key:"eu3xkr"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y2=k("CameraOffIcon",[["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}],["path",{d:"M7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16",key:"qmtpty"}],["path",{d:"M9.5 4h5L17 7h3a2 2 0 0 1 2 2v7.5",key:"1ufyfc"}],["path",{d:"M14.121 15.121A3 3 0 1 1 9.88 10.88",key:"11zox6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _2=k("CameraIcon",[["path",{d:"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z",key:"1tc9qg"}],["circle",{cx:"12",cy:"13",r:"3",key:"1vg3eu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g2=k("CandlestickChartIcon",[["path",{d:"M9 5v4",key:"14uxtq"}],["rect",{width:"4",height:"6",x:"7",y:"9",rx:"1",key:"f4fvz0"}],["path",{d:"M9 15v2",key:"r5rk32"}],["path",{d:"M17 3v2",key:"1l2re6"}],["rect",{width:"4",height:"8",x:"15",y:"5",rx:"1",key:"z38je5"}],["path",{d:"M17 13v3",key:"5l0wba"}],["path",{d:"M3 3v18h18",key:"1s2lah"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k2=k("CandyCaneIcon",[["path",{d:"M5.7 21a2 2 0 0 1-3.5-2l8.6-14a6 6 0 0 1 10.4 6 2 2 0 1 1-3.464-2 2 2 0 1 0-3.464-2Z",key:"isaq8g"}],["path",{d:"M17.75 7 15 2.1",key:"12x7e8"}],["path",{d:"M10.9 4.8 13 9",key:"100a87"}],["path",{d:"m7.9 9.7 2 4.4",key:"ntfhaj"}],["path",{d:"M4.9 14.7 7 18.9",key:"1x43jy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b2=k("CandyOffIcon",[["path",{d:"m8.5 8.5-1 1a4.95 4.95 0 0 0 7 7l1-1",key:"1ff4ui"}],["path",{d:"M11.843 6.187A4.947 4.947 0 0 1 16.5 7.5a4.947 4.947 0 0 1 1.313 4.657",key:"1sbrv4"}],["path",{d:"M14 16.5V14",key:"1maf8j"}],["path",{d:"M14 6.5v1.843",key:"1a6u6t"}],["path",{d:"M10 10v7.5",key:"80pj65"}],["path",{d:"m16 7 1-5 1.367.683A3 3 0 0 0 19.708 3H21v1.292a3 3 0 0 0 .317 1.341L22 7l-5 1",key:"11a9mt"}],["path",{d:"m8 17-1 5-1.367-.683A3 3 0 0 0 4.292 21H3v-1.292a3 3 0 0 0-.317-1.341L2 17l5-1",key:"3mjmon"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w2=k("CandyIcon",[["path",{d:"m9.5 7.5-2 2a4.95 4.95 0 1 0 7 7l2-2a4.95 4.95 0 1 0-7-7Z",key:"ue6khb"}],["path",{d:"M14 6.5v10",key:"5xnk7c"}],["path",{d:"M10 7.5v10",key:"1uew51"}],["path",{d:"m16 7 1-5 1.37.68A3 3 0 0 0 19.7 3H21v1.3c0 .46.1.92.32 1.33L22 7l-5 1",key:"b9cp6k"}],["path",{d:"m8 17-1 5-1.37-.68A3 3 0 0 0 4.3 21H3v-1.3a3 3 0 0 0-.32-1.33L2 17l5-1",key:"5lney8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x2=k("CarFrontIcon",[["path",{d:"m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8",key:"1imjwt"}],["path",{d:"M7 14h.01",key:"1qa3f1"}],["path",{d:"M17 14h.01",key:"7oqj8z"}],["rect",{width:"18",height:"8",x:"3",y:"10",rx:"2",key:"a7itu8"}],["path",{d:"M5 18v2",key:"ppbyun"}],["path",{d:"M19 18v2",key:"gy7782"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M2=k("CarTaxiFrontIcon",[["path",{d:"M10 2h4",key:"n1abiw"}],["path",{d:"m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8",key:"1imjwt"}],["path",{d:"M7 14h.01",key:"1qa3f1"}],["path",{d:"M17 14h.01",key:"7oqj8z"}],["rect",{width:"18",height:"8",x:"3",y:"10",rx:"2",key:"a7itu8"}],["path",{d:"M5 18v2",key:"ppbyun"}],["path",{d:"M19 18v2",key:"gy7782"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C2=k("CarIcon",[["path",{d:"M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2",key:"5owen"}],["circle",{cx:"7",cy:"17",r:"2",key:"u2ysq9"}],["path",{d:"M9 17h6",key:"r8uit2"}],["circle",{cx:"17",cy:"17",r:"2",key:"axvx0g"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S2=k("CaravanIcon",[["rect",{width:"4",height:"4",x:"2",y:"9",key:"1vcvhd"}],["rect",{width:"4",height:"10",x:"10",y:"9",key:"1b7ev2"}],["path",{d:"M18 19V9a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v8a2 2 0 0 0 2 2h2",key:"19jm3t"}],["circle",{cx:"8",cy:"19",r:"2",key:"t8fc5s"}],["path",{d:"M10 19h12v-2",key:"1yu2qx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I2=k("CarrotIcon",[["path",{d:"M2.27 21.7s9.87-3.5 12.73-6.36a4.5 4.5 0 0 0-6.36-6.37C5.77 11.84 2.27 21.7 2.27 21.7zM8.64 14l-2.05-2.04M15.34 15l-2.46-2.46",key:"rfqxbe"}],["path",{d:"M22 9s-1.33-2-3.5-2C16.86 7 15 9 15 9s1.33 2 3.5 2S22 9 22 9z",key:"6b25w4"}],["path",{d:"M15 2s-2 1.33-2 3.5S15 9 15 9s2-1.84 2-3.5C17 3.33 15 2 15 2z",key:"fn65lo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L2=k("CaseLowerIcon",[["circle",{cx:"7",cy:"12",r:"3",key:"12clwm"}],["path",{d:"M10 9v6",key:"17i7lo"}],["circle",{cx:"17",cy:"12",r:"3",key:"gl7c2s"}],["path",{d:"M14 7v8",key:"dl84cr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $2=k("CaseSensitiveIcon",[["path",{d:"m3 15 4-8 4 8",key:"1vwr6u"}],["path",{d:"M4 13h6",key:"1r9ots"}],["circle",{cx:"18",cy:"12",r:"3",key:"1kchzo"}],["path",{d:"M21 9v6",key:"anns31"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A2=k("CaseUpperIcon",[["path",{d:"m3 15 4-8 4 8",key:"1vwr6u"}],["path",{d:"M4 13h6",key:"1r9ots"}],["path",{d:"M15 11h4.5a2 2 0 0 1 0 4H15V7h4a2 2 0 0 1 0 4",key:"1sqfas"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E2=k("CassetteTapeIcon",[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",key:"18n3k1"}],["circle",{cx:"8",cy:"10",r:"2",key:"1xl4ub"}],["path",{d:"M8 12h8",key:"1wcyev"}],["circle",{cx:"16",cy:"10",r:"2",key:"r14t7q"}],["path",{d:"m6 20 .7-2.9A1.4 1.4 0 0 1 8.1 16h7.8a1.4 1.4 0 0 1 1.4 1l.7 3",key:"l01ucn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T2=k("CastIcon",[["path",{d:"M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6",key:"3zrzxg"}],["path",{d:"M2 12a9 9 0 0 1 8 8",key:"g6cvee"}],["path",{d:"M2 16a5 5 0 0 1 4 4",key:"1y1dii"}],["line",{x1:"2",x2:"2.01",y1:"20",y2:"20",key:"xu2jvo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P2=k("CastleIcon",[["path",{d:"M22 20v-9H2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2Z",key:"109fe4"}],["path",{d:"M18 11V4H6v7",key:"mon5oj"}],["path",{d:"M15 22v-4a3 3 0 0 0-3-3v0a3 3 0 0 0-3 3v4",key:"jdggr9"}],["path",{d:"M22 11V9",key:"3zbp94"}],["path",{d:"M2 11V9",key:"1x5rnq"}],["path",{d:"M6 4V2",key:"1rsq15"}],["path",{d:"M18 4V2",key:"1jsdo1"}],["path",{d:"M10 4V2",key:"75d9ly"}],["path",{d:"M14 4V2",key:"8nj3z6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D2=k("CatIcon",[["path",{d:"M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z",key:"x6xyqk"}],["path",{d:"M8 14v.5",key:"1nzgdb"}],["path",{d:"M16 14v.5",key:"1lajdz"}],["path",{d:"M11.25 16.25h1.5L12 17l-.75-.75Z",key:"12kq1m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R2=k("CctvIcon",[["path",{d:"M7 9h.01",key:"19b3jx"}],["path",{d:"M16.75 12H22l-3.5 7-3.09-4.32",key:"1h9vqe"}],["path",{d:"M18 9.5l-4 8-10.39-5.2a2.92 2.92 0 0 1-1.3-3.91L3.69 5.6a2.92 2.92 0 0 1 3.92-1.3Z",key:"q5d122"}],["path",{d:"M2 19h3.76a2 2 0 0 0 1.8-1.1L9 15",key:"19bib8"}],["path",{d:"M2 21v-4",key:"l40lih"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O2=k("CheckCheckIcon",[["path",{d:"M18 6 7 17l-5-5",key:"116fxf"}],["path",{d:"m22 10-7.5 7.5L13 16",key:"ke71qq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V2=k("CheckCircle2Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U2=k("CheckCircleIcon",[["path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14",key:"g774vq"}],["path",{d:"m9 11 3 3L22 4",key:"1pflzl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F2=k("CheckSquare2Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j2=k("CheckSquareIcon",[["path",{d:"m9 11 3 3L22 4",key:"1pflzl"}],["path",{d:"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",key:"1jnkn4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H2=k("CheckIcon",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N2=k("ChefHatIcon",[["path",{d:"M6 13.87A4 4 0 0 1 7.41 6a5.11 5.11 0 0 1 1.05-1.54 5 5 0 0 1 7.08 0A5.11 5.11 0 0 1 16.59 6 4 4 0 0 1 18 13.87V21H6Z",key:"z3ra2g"}],["line",{x1:"6",x2:"18",y1:"17",y2:"17",key:"12q60k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z2=k("CherryIcon",[["path",{d:"M2 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z",key:"cvxqlc"}],["path",{d:"M12 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z",key:"1ostrc"}],["path",{d:"M7 14c3.22-2.91 4.29-8.75 5-12 1.66 2.38 4.94 9 5 12",key:"hqx58h"}],["path",{d:"M22 9c-4.29 0-7.14-2.33-10-7 5.71 0 10 4.67 10 7Z",key:"eykp1o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B2=k("ChevronDownCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m16 10-4 4-4-4",key:"894hmk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q2=k("ChevronDownSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m16 10-4 4-4-4",key:"894hmk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W2=k("ChevronDownIcon",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G2=k("ChevronFirstIcon",[["path",{d:"m17 18-6-6 6-6",key:"1yerx2"}],["path",{d:"M7 6v12",key:"1p53r6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z2=k("ChevronLastIcon",[["path",{d:"m7 18 6-6-6-6",key:"lwmzdw"}],["path",{d:"M17 6v12",key:"1o0aio"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K2=k("ChevronLeftCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m14 16-4-4 4-4",key:"ojs7w8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X2=k("ChevronLeftSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m14 16-4-4 4-4",key:"ojs7w8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y2=k("ChevronLeftIcon",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q2=k("ChevronRightCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m10 8 4 4-4 4",key:"1wy4r4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J2=k("ChevronRightSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m10 8 4 4-4 4",key:"1wy4r4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e0=k("ChevronRightIcon",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t0=k("ChevronUpCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m8 14 4-4 4 4",key:"fy2ptz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a0=k("ChevronUpSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m8 14 4-4 4 4",key:"fy2ptz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n0=k("ChevronUpIcon",[["path",{d:"m18 15-6-6-6 6",key:"153udz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s0=k("ChevronsDownUpIcon",[["path",{d:"m7 20 5-5 5 5",key:"13a0gw"}],["path",{d:"m7 4 5 5 5-5",key:"1kwcof"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o0=k("ChevronsDownIcon",[["path",{d:"m7 6 5 5 5-5",key:"1lc07p"}],["path",{d:"m7 13 5 5 5-5",key:"1d48rs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r0=k("ChevronsLeftRightIcon",[["path",{d:"m9 7-5 5 5 5",key:"j5w590"}],["path",{d:"m15 7 5 5-5 5",key:"1bl6da"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i0=k("ChevronsLeftIcon",[["path",{d:"m11 17-5-5 5-5",key:"13zhaf"}],["path",{d:"m18 17-5-5 5-5",key:"h8a8et"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l0=k("ChevronsRightLeftIcon",[["path",{d:"m20 17-5-5 5-5",key:"30x0n2"}],["path",{d:"m4 17 5-5-5-5",key:"16spf4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c0=k("ChevronsRightIcon",[["path",{d:"m6 17 5-5-5-5",key:"xnjwq"}],["path",{d:"m13 17 5-5-5-5",key:"17xmmf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d0=k("ChevronsUpDownIcon",[["path",{d:"m7 15 5 5 5-5",key:"1hf1tw"}],["path",{d:"m7 9 5-5 5 5",key:"sgt6xg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u0=k("ChevronsUpIcon",[["path",{d:"m17 11-5-5-5 5",key:"e8nh98"}],["path",{d:"m17 18-5-5-5 5",key:"2avn1x"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p0=k("ChromeIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["line",{x1:"21.17",x2:"12",y1:"8",y2:"8",key:"a0cw5f"}],["line",{x1:"3.95",x2:"8.54",y1:"6.06",y2:"14",key:"1kftof"}],["line",{x1:"10.88",x2:"15.46",y1:"21.94",y2:"14",key:"1ymyh8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h0=k("ChurchIcon",[["path",{d:"m18 7 4 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9l4-2",key:"gy5gyo"}],["path",{d:"M14 22v-4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4",key:"cpkuc4"}],["path",{d:"M18 22V5l-6-3-6 3v17",key:"1hsnhq"}],["path",{d:"M12 7v5",key:"ma6bk"}],["path",{d:"M10 9h4",key:"u4k05v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f0=k("CigaretteOffIcon",[["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}],["path",{d:"M12 12H2v4h14",key:"91gsaq"}],["path",{d:"M22 12v4",key:"142cbu"}],["path",{d:"M18 12h-.5",key:"12ymji"}],["path",{d:"M7 12v4",key:"jqww69"}],["path",{d:"M18 8c0-2.5-2-2.5-2-5",key:"1il607"}],["path",{d:"M22 8c0-2.5-2-2.5-2-5",key:"1gah44"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m0=k("CigaretteIcon",[["path",{d:"M18 12H2v4h16",key:"2rt1hm"}],["path",{d:"M22 12v4",key:"142cbu"}],["path",{d:"M7 12v4",key:"jqww69"}],["path",{d:"M18 8c0-2.5-2-2.5-2-5",key:"1il607"}],["path",{d:"M22 8c0-2.5-2-2.5-2-5",key:"1gah44"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v0=k("CircleDashedIcon",[["path",{d:"M10.1 2.18a9.93 9.93 0 0 1 3.8 0",key:"1qdqn0"}],["path",{d:"M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7",key:"1bq7p6"}],["path",{d:"M21.82 10.1a9.93 9.93 0 0 1 0 3.8",key:"1rlaqf"}],["path",{d:"M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69",key:"1xk03u"}],["path",{d:"M13.9 21.82a9.94 9.94 0 0 1-3.8 0",key:"l7re25"}],["path",{d:"M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7",key:"1v18p6"}],["path",{d:"M2.18 13.9a9.93 9.93 0 0 1 0-3.8",key:"xdo6bj"}],["path",{d:"M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69",key:"1jjmaz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y0=k("CircleDollarSignIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8",key:"1h4pet"}],["path",{d:"M12 18V6",key:"zqpxq5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _0=k("CircleDotDashedIcon",[["path",{d:"M10.1 2.18a9.93 9.93 0 0 1 3.8 0",key:"1qdqn0"}],["path",{d:"M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7",key:"1bq7p6"}],["path",{d:"M21.82 10.1a9.93 9.93 0 0 1 0 3.8",key:"1rlaqf"}],["path",{d:"M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69",key:"1xk03u"}],["path",{d:"M13.9 21.82a9.94 9.94 0 0 1-3.8 0",key:"l7re25"}],["path",{d:"M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7",key:"1v18p6"}],["path",{d:"M2.18 13.9a9.93 9.93 0 0 1 0-3.8",key:"xdo6bj"}],["path",{d:"M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69",key:"1jjmaz"}],["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g0=k("CircleDotIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k0=k("CircleEllipsisIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M17 12h.01",key:"1m0b6t"}],["path",{d:"M12 12h.01",key:"1mp3jc"}],["path",{d:"M7 12h.01",key:"eqddd0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b0=k("CircleEqualIcon",[["path",{d:"M7 10h10",key:"1101jm"}],["path",{d:"M7 14h10",key:"1mhdw3"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w0=k("CircleOffIcon",[["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M8.35 2.69A10 10 0 0 1 21.3 15.65",key:"1pfsoa"}],["path",{d:"M19.08 19.08A10 10 0 1 1 4.92 4.92",key:"1ablyi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pi=k("CircleSlash2Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M22 2 2 22",key:"y4kqgn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x0=k("CircleSlashIcon",[["line",{x1:"9",x2:"15",y1:"15",y2:"9",key:"1dfufj"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Di=k("CircleUserRoundIcon",[["path",{d:"M18 20a6 6 0 0 0-12 0",key:"1qehca"}],["circle",{cx:"12",cy:"10",r:"4",key:"1h16sb"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ri=k("CircleUserIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["circle",{cx:"12",cy:"10",r:"3",key:"ilqhr7"}],["path",{d:"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662",key:"154egf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M0=k("CircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C0=k("CircuitBoardIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M11 9h4a2 2 0 0 0 2-2V3",key:"1ve2rv"}],["circle",{cx:"9",cy:"9",r:"2",key:"af1f0g"}],["path",{d:"M7 21v-4a2 2 0 0 1 2-2h4",key:"1fwkro"}],["circle",{cx:"15",cy:"15",r:"2",key:"3i40o0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S0=k("CitrusIcon",[["path",{d:"M21.66 17.67a1.08 1.08 0 0 1-.04 1.6A12 12 0 0 1 4.73 2.38a1.1 1.1 0 0 1 1.61-.04z",key:"4ite01"}],["path",{d:"M19.65 15.66A8 8 0 0 1 8.35 4.34",key:"1gxipu"}],["path",{d:"m14 10-5.5 5.5",key:"92pfem"}],["path",{d:"M14 17.85V10H6.15",key:"xqmtsk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I0=k("ClapperboardIcon",[["path",{d:"M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z",key:"1tn4o7"}],["path",{d:"m6.2 5.3 3.1 3.9",key:"iuk76l"}],["path",{d:"m12.4 3.4 3.1 4",key:"6hsd6n"}],["path",{d:"M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z",key:"ltgou9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L0=k("ClipboardCheckIcon",[["rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1",key:"tgr4d6"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",key:"116196"}],["path",{d:"m9 14 2 2 4-4",key:"df797q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $0=k("ClipboardCopyIcon",[["rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1",key:"tgr4d6"}],["path",{d:"M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2",key:"4jdomd"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v4",key:"3hqy98"}],["path",{d:"M21 14H11",key:"1bme5i"}],["path",{d:"m15 10-4 4 4 4",key:"5dvupr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A0=k("ClipboardEditIcon",[["rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1",key:"tgr4d6"}],["path",{d:"M10.42 12.61a2.1 2.1 0 1 1 2.97 2.97L7.95 21 4 22l.99-3.95 5.43-5.44Z",key:"1rgxu8"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5.5",key:"cereej"}],["path",{d:"M4 13.5V6a2 2 0 0 1 2-2h2",key:"5ua5vh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E0=k("ClipboardListIcon",[["rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1",key:"tgr4d6"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",key:"116196"}],["path",{d:"M12 11h4",key:"1jrz19"}],["path",{d:"M12 16h4",key:"n85exb"}],["path",{d:"M8 11h.01",key:"1dfujw"}],["path",{d:"M8 16h.01",key:"18s6g9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T0=k("ClipboardPasteIcon",[["path",{d:"M15 2H9a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h6c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1Z",key:"1pp7kr"}],["path",{d:"M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2M16 4h2a2 2 0 0 1 2 2v2M11 14h10",key:"2ik1ml"}],["path",{d:"m17 10 4 4-4 4",key:"vp2hj1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P0=k("ClipboardSignatureIcon",[["rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1",key:"tgr4d6"}],["path",{d:"M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-.5",key:"1but9f"}],["path",{d:"M16 4h2a2 2 0 0 1 1.73 1",key:"1p8n7l"}],["path",{d:"M18.42 9.61a2.1 2.1 0 1 1 2.97 2.97L16.95 17 13 18l.99-3.95 4.43-4.44Z",key:"johvi5"}],["path",{d:"M8 18h1",key:"13wk12"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D0=k("ClipboardTypeIcon",[["rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1",key:"tgr4d6"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",key:"116196"}],["path",{d:"M9 12v-1h6v1",key:"iehl6m"}],["path",{d:"M11 17h2",key:"12w5me"}],["path",{d:"M12 11v6",key:"1bwqyc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R0=k("ClipboardXIcon",[["rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1",key:"tgr4d6"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",key:"116196"}],["path",{d:"m15 11-6 6",key:"1toa9n"}],["path",{d:"m9 11 6 6",key:"wlibny"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O0=k("ClipboardIcon",[["rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1",key:"tgr4d6"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",key:"116196"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V0=k("Clock1Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 14.5 8",key:"12zbmj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U0=k("Clock10Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 8 10",key:"atfzqc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F0=k("Clock11Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 9.5 8",key:"l5bg6f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j0=k("Clock12Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12",key:"1fub01"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H0=k("Clock2Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16 10",key:"1g230d"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N0=k("Clock3Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16.5 12",key:"1aq6pp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z0=k("Clock4Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16 14",key:"68esgv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B0=k("Clock5Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 14.5 16",key:"1pcbox"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q0=k("Clock6Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 12 16.5",key:"hb2qv6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W0=k("Clock7Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 9.5 16",key:"ka3394"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G0=k("Clock8Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 8 14",key:"tmc9b4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z0=k("Clock9Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 7.5 12",key:"1k60p0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K0=k("ClockIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16 14",key:"68esgv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X0=k("CloudCogIcon",[["circle",{cx:"12",cy:"17",r:"3",key:"1spfwm"}],["path",{d:"M4.2 15.1A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.2",key:"zaobp"}],["path",{d:"m15.7 18.4-.9-.3",key:"4qxpbn"}],["path",{d:"m9.2 15.9-.9-.3",key:"17q7o2"}],["path",{d:"m10.6 20.7.3-.9",key:"1pf4s2"}],["path",{d:"m13.1 14.2.3-.9",key:"1mnuqm"}],["path",{d:"m13.6 20.7-.4-1",key:"1jpd1m"}],["path",{d:"m10.8 14.3-.4-1",key:"17ugyy"}],["path",{d:"m8.3 18.6 1-.4",key:"s42vdx"}],["path",{d:"m14.7 15.8 1-.4",key:"2wizun"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y0=k("CloudDrizzleIcon",[["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"M8 19v1",key:"1dk2by"}],["path",{d:"M8 14v1",key:"84yxot"}],["path",{d:"M16 19v1",key:"v220m7"}],["path",{d:"M16 14v1",key:"g12gj6"}],["path",{d:"M12 21v1",key:"q8vafk"}],["path",{d:"M12 16v1",key:"1mx6rx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q0=k("CloudFogIcon",[["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"M16 17H7",key:"pygtm1"}],["path",{d:"M17 21H9",key:"1u2q02"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J0=k("CloudHailIcon",[["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"M16 14v2",key:"a1is7l"}],["path",{d:"M8 14v2",key:"1e9m6t"}],["path",{d:"M16 20h.01",key:"xwek51"}],["path",{d:"M8 20h.01",key:"1vjney"}],["path",{d:"M12 16v2",key:"z66u1j"}],["path",{d:"M12 22h.01",key:"1urd7a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ev=k("CloudLightningIcon",[["path",{d:"M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973",key:"1cez44"}],["path",{d:"m13 12-3 5h4l-3 5",key:"1t22er"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tv=k("CloudMoonRainIcon",[["path",{d:"M10.083 9A6.002 6.002 0 0 1 16 4a4.243 4.243 0 0 0 6 6c0 2.22-1.206 4.16-3 5.197",key:"u82z8m"}],["path",{d:"M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24",key:"1qmrp3"}],["path",{d:"M11 20v2",key:"174qtz"}],["path",{d:"M7 19v2",key:"12npes"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const av=k("CloudMoonIcon",[["path",{d:"M13 16a3 3 0 1 1 0 6H7a5 5 0 1 1 4.9-6Z",key:"p44pc9"}],["path",{d:"M10.1 9A6 6 0 0 1 16 4a4.24 4.24 0 0 0 6 6 6 6 0 0 1-3 5.197",key:"16nha0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nv=k("CloudOffIcon",[["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M5.782 5.782A7 7 0 0 0 9 19h8.5a4.5 4.5 0 0 0 1.307-.193",key:"yfwify"}],["path",{d:"M21.532 16.5A4.5 4.5 0 0 0 17.5 10h-1.79A7.008 7.008 0 0 0 10 5.07",key:"jlfiyv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sv=k("CloudRainWindIcon",[["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"m9.2 22 3-7",key:"sb5f6j"}],["path",{d:"m9 13-3 7",key:"500co5"}],["path",{d:"m17 13-3 7",key:"8t2fiy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ov=k("CloudRainIcon",[["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"M16 14v6",key:"1j4efv"}],["path",{d:"M8 14v6",key:"17c4r9"}],["path",{d:"M12 16v6",key:"c8a4gj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rv=k("CloudSnowIcon",[["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"M8 15h.01",key:"a7atzg"}],["path",{d:"M8 19h.01",key:"puxtts"}],["path",{d:"M12 17h.01",key:"p32p05"}],["path",{d:"M12 21h.01",key:"h35vbk"}],["path",{d:"M16 15h.01",key:"rnfrdf"}],["path",{d:"M16 19h.01",key:"1vcnzz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const iv=k("CloudSunRainIcon",[["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"m4.93 4.93 1.41 1.41",key:"149t6j"}],["path",{d:"M20 12h2",key:"1q8mjw"}],["path",{d:"m19.07 4.93-1.41 1.41",key:"1shlcs"}],["path",{d:"M15.947 12.65a4 4 0 0 0-5.925-4.128",key:"dpwdj0"}],["path",{d:"M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24",key:"1qmrp3"}],["path",{d:"M11 20v2",key:"174qtz"}],["path",{d:"M7 19v2",key:"12npes"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lv=k("CloudSunIcon",[["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"m4.93 4.93 1.41 1.41",key:"149t6j"}],["path",{d:"M20 12h2",key:"1q8mjw"}],["path",{d:"m19.07 4.93-1.41 1.41",key:"1shlcs"}],["path",{d:"M15.947 12.65a4 4 0 0 0-5.925-4.128",key:"dpwdj0"}],["path",{d:"M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z",key:"s09mg5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cv=k("CloudIcon",[["path",{d:"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z",key:"p7xjir"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dv=k("CloudyIcon",[["path",{d:"M17.5 21H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z",key:"gqqjvc"}],["path",{d:"M22 10a3 3 0 0 0-3-3h-2.207a5.502 5.502 0 0 0-10.702.5",key:"1p2s76"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uv=k("CloverIcon",[["path",{d:"M16.2 3.8a2.7 2.7 0 0 0-3.81 0l-.4.38-.4-.4a2.7 2.7 0 0 0-3.82 0C6.73 4.85 6.67 6.64 8 8l4 4 4-4c1.33-1.36 1.27-3.15.2-4.2z",key:"1gxwox"}],["path",{d:"M8 8c-1.36-1.33-3.15-1.27-4.2-.2a2.7 2.7 0 0 0 0 3.81l.38.4-.4.4a2.7 2.7 0 0 0 0 3.82C4.85 17.27 6.64 17.33 8 16",key:"il7z7z"}],["path",{d:"M16 16c1.36 1.33 3.15 1.27 4.2.2a2.7 2.7 0 0 0 0-3.81l-.38-.4.4-.4a2.7 2.7 0 0 0 0-3.82C19.15 6.73 17.36 6.67 16 8",key:"15bpx2"}],["path",{d:"M7.8 20.2a2.7 2.7 0 0 0 3.81 0l.4-.38.4.4a2.7 2.7 0 0 0 3.82 0c1.06-1.06 1.12-2.85-.21-4.21l-4-4-4 4c-1.33 1.36-1.27 3.15-.2 4.2z",key:"v9mug8"}],["path",{d:"m7 17-5 5",key:"1py3mz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pv=k("ClubIcon",[["path",{d:"M17.28 9.05a5.5 5.5 0 1 0-10.56 0A5.5 5.5 0 1 0 12 17.66a5.5 5.5 0 1 0 5.28-8.6Z",key:"27yuqz"}],["path",{d:"M12 17.66L12 22",key:"ogfahf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hv=k("Code2Icon",[["path",{d:"m18 16 4-4-4-4",key:"1inbqp"}],["path",{d:"m6 8-4 4 4 4",key:"15zrgr"}],["path",{d:"m14.5 4-5 16",key:"e7oirm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fv=k("CodeIcon",[["polyline",{points:"16 18 22 12 16 6",key:"z7tu5w"}],["polyline",{points:"8 6 2 12 8 18",key:"1eg1df"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mv=k("CodepenIcon",[["polygon",{points:"12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2",key:"srzb37"}],["line",{x1:"12",x2:"12",y1:"22",y2:"15.5",key:"1t73f2"}],["polyline",{points:"22 8.5 12 15.5 2 8.5",key:"ajlxae"}],["polyline",{points:"2 15.5 12 8.5 22 15.5",key:"susrui"}],["line",{x1:"12",x2:"12",y1:"2",y2:"8.5",key:"2cldga"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vv=k("CodesandboxIcon",[["path",{d:"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z",key:"yt0hxn"}],["polyline",{points:"7.5 4.21 12 6.81 16.5 4.21",key:"fabo96"}],["polyline",{points:"7.5 19.79 7.5 14.6 3 12",key:"z377f1"}],["polyline",{points:"21 12 16.5 14.6 16.5 19.79",key:"9nrev1"}],["polyline",{points:"3.27 6.96 12 12.01 20.73 6.96",key:"1180pa"}],["line",{x1:"12",x2:"12",y1:"22.08",y2:"12",key:"3z3uq6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yv=k("CoffeeIcon",[["path",{d:"M17 8h1a4 4 0 1 1 0 8h-1",key:"jx4kbh"}],["path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z",key:"1bxrl0"}],["line",{x1:"6",x2:"6",y1:"2",y2:"4",key:"1cr9l3"}],["line",{x1:"10",x2:"10",y1:"2",y2:"4",key:"170wym"}],["line",{x1:"14",x2:"14",y1:"2",y2:"4",key:"1c5f70"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _v=k("CogIcon",[["path",{d:"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z",key:"sobvz5"}],["path",{d:"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",key:"11i496"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 22v-2",key:"1osdcq"}],["path",{d:"m17 20.66-1-1.73",key:"eq3orb"}],["path",{d:"M11 10.27 7 3.34",key:"16pf9h"}],["path",{d:"m20.66 17-1.73-1",key:"sg0v6f"}],["path",{d:"m3.34 7 1.73 1",key:"1ulond"}],["path",{d:"M14 12h8",key:"4f43i9"}],["path",{d:"M2 12h2",key:"1t8f8n"}],["path",{d:"m20.66 7-1.73 1",key:"1ow05n"}],["path",{d:"m3.34 17 1.73-1",key:"nuk764"}],["path",{d:"m17 3.34-1 1.73",key:"2wel8s"}],["path",{d:"m11 13.73-4 6.93",key:"794ttg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gv=k("CoinsIcon",[["circle",{cx:"8",cy:"8",r:"6",key:"3yglwk"}],["path",{d:"M18.09 10.37A6 6 0 1 1 10.34 18",key:"t5s6rm"}],["path",{d:"M7 6h1v4",key:"1obek4"}],["path",{d:"m16.71 13.88.7.71-2.82 2.82",key:"1rbuyh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Oi=k("Columns2Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 3v18",key:"108xh3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vi=k("Columns3Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"M15 3v18",key:"14nvp0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kv=k("Columns4Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M7.5 3v18",key:"w0wo6v"}],["path",{d:"M12 3v18",key:"108xh3"}],["path",{d:"M16.5 3v18",key:"10tjh1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bv=k("CombineIcon",[["rect",{width:"8",height:"8",x:"2",y:"2",rx:"2",key:"z1hh3n"}],["path",{d:"M14 2c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2",key:"83orz6"}],["path",{d:"M20 2c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2",key:"k86dmt"}],["path",{d:"M10 18H5c-1.7 0-3-1.3-3-3v-1",key:"6vokjl"}],["polyline",{points:"7 21 10 18 7 15",key:"1k02g0"}],["rect",{width:"8",height:"8",x:"14",y:"14",rx:"2",key:"1fa9i4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wv=k("CommandIcon",[["path",{d:"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3",key:"11bfej"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xv=k("CompassIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polygon",{points:"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76",key:"m9r19z"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mv=k("ComponentIcon",[["path",{d:"M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5Z",key:"1kciei"}],["path",{d:"m12 2 3.5 3.5L12 9 8.5 5.5 12 2Z",key:"1ome0g"}],["path",{d:"M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5Z",key:"vbupec"}],["path",{d:"m12 15 3.5 3.5L12 22l-3.5-3.5L12 15Z",key:"16csic"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cv=k("ComputerIcon",[["rect",{width:"14",height:"8",x:"5",y:"2",rx:"2",key:"wc9tft"}],["rect",{width:"20",height:"8",x:"2",y:"14",rx:"2",key:"w68u3i"}],["path",{d:"M6 18h2",key:"rwmk9e"}],["path",{d:"M12 18h6",key:"aqd8w3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sv=k("ConciergeBellIcon",[["path",{d:"M2 18a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2H2v-2Z",key:"1co3i8"}],["path",{d:"M20 16a8 8 0 1 0-16 0",key:"1pa543"}],["path",{d:"M12 4v4",key:"1bq03y"}],["path",{d:"M10 4h4",key:"1xpv9s"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Iv=k("ConeIcon",[["path",{d:"m20.9 18.55-8-15.98a1 1 0 0 0-1.8 0l-8 15.98",key:"53pte7"}],["ellipse",{cx:"12",cy:"19",rx:"9",ry:"3",key:"1ji25f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lv=k("ConstructionIcon",[["rect",{x:"2",y:"6",width:"20",height:"8",rx:"1",key:"1estib"}],["path",{d:"M17 14v7",key:"7m2elx"}],["path",{d:"M7 14v7",key:"1cm7wv"}],["path",{d:"M17 3v3",key:"1v4jwn"}],["path",{d:"M7 3v3",key:"7o6guu"}],["path",{d:"M10 14 2.3 6.3",key:"1023jk"}],["path",{d:"m14 6 7.7 7.7",key:"1s8pl2"}],["path",{d:"m8 6 8 8",key:"hl96qh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $v=k("Contact2Icon",[["path",{d:"M16 18a4 4 0 0 0-8 0",key:"1lzouq"}],["circle",{cx:"12",cy:"11",r:"3",key:"itu57m"}],["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",key:"1hopcy"}],["line",{x1:"8",x2:"8",y1:"2",y2:"4",key:"1ff9gb"}],["line",{x1:"16",x2:"16",y1:"2",y2:"4",key:"1ufoma"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Av=k("ContactIcon",[["path",{d:"M17 18a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2",key:"1mghuy"}],["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",key:"1hopcy"}],["circle",{cx:"12",cy:"10",r:"2",key:"1yojzk"}],["line",{x1:"8",x2:"8",y1:"2",y2:"4",key:"1ff9gb"}],["line",{x1:"16",x2:"16",y1:"2",y2:"4",key:"1ufoma"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ev=k("ContainerIcon",[["path",{d:"M22 7.7c0-.6-.4-1.2-.8-1.5l-6.3-3.9a1.72 1.72 0 0 0-1.7 0l-10.3 6c-.5.2-.9.8-.9 1.4v6.6c0 .5.4 1.2.8 1.5l6.3 3.9a1.72 1.72 0 0 0 1.7 0l10.3-6c.5-.3.9-1 .9-1.5Z",key:"1t2lqe"}],["path",{d:"M10 21.9V14L2.1 9.1",key:"o7czzq"}],["path",{d:"m10 14 11.9-6.9",key:"zm5e20"}],["path",{d:"M14 19.8v-8.1",key:"159ecu"}],["path",{d:"M18 17.5V9.4",key:"11uown"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tv=k("ContrastIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 18a6 6 0 0 0 0-12v12z",key:"j4l70d"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pv=k("CookieIcon",[["path",{d:"M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5",key:"laymnq"}],["path",{d:"M8.5 8.5v.01",key:"ue8clq"}],["path",{d:"M16 15.5v.01",key:"14dtrp"}],["path",{d:"M12 12v.01",key:"u5ubse"}],["path",{d:"M11 17v.01",key:"1hyl5a"}],["path",{d:"M7 14v.01",key:"uct60s"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dv=k("CookingPotIcon",[["path",{d:"M2 12h20",key:"9i4pu4"}],["path",{d:"M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8",key:"u0tga0"}],["path",{d:"m4 8 16-4",key:"16g0ng"}],["path",{d:"m8.86 6.78-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8",key:"12cejc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rv=k("CopyCheckIcon",[["path",{d:"m12 15 2 2 4-4",key:"2c609p"}],["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ov=k("CopyMinusIcon",[["line",{x1:"12",x2:"18",y1:"15",y2:"15",key:"1nscbv"}],["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vv=k("CopyPlusIcon",[["line",{x1:"15",x2:"15",y1:"12",y2:"18",key:"1p7wdc"}],["line",{x1:"12",x2:"18",y1:"15",y2:"15",key:"1nscbv"}],["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Uv=k("CopySlashIcon",[["line",{x1:"12",x2:"18",y1:"18",y2:"12",key:"ebkxgr"}],["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fv=k("CopyXIcon",[["line",{x1:"12",x2:"18",y1:"12",y2:"18",key:"1rg63v"}],["line",{x1:"12",x2:"18",y1:"18",y2:"12",key:"ebkxgr"}],["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jv=k("CopyIcon",[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hv=k("CopyleftIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M9.17 14.83a4 4 0 1 0 0-5.66",key:"1sveal"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nv=k("CopyrightIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M14.83 14.83a4 4 0 1 1 0-5.66",key:"1i56pz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zv=k("CornerDownLeftIcon",[["polyline",{points:"9 10 4 15 9 20",key:"r3jprv"}],["path",{d:"M20 4v7a4 4 0 0 1-4 4H4",key:"6o5b7l"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bv=k("CornerDownRightIcon",[["polyline",{points:"15 10 20 15 15 20",key:"1q7qjw"}],["path",{d:"M4 4v7a4 4 0 0 0 4 4h12",key:"z08zvw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qv=k("CornerLeftDownIcon",[["polyline",{points:"14 15 9 20 4 15",key:"nkc4i"}],["path",{d:"M20 4h-7a4 4 0 0 0-4 4v12",key:"nbpdq2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wv=k("CornerLeftUpIcon",[["polyline",{points:"14 9 9 4 4 9",key:"m9oyvo"}],["path",{d:"M20 20h-7a4 4 0 0 1-4-4V4",key:"1blwi3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gv=k("CornerRightDownIcon",[["polyline",{points:"10 15 15 20 20 15",key:"axus6l"}],["path",{d:"M4 4h7a4 4 0 0 1 4 4v12",key:"wcbgct"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zv=k("CornerRightUpIcon",[["polyline",{points:"10 9 15 4 20 9",key:"1lr6px"}],["path",{d:"M4 20h7a4 4 0 0 0 4-4V4",key:"1plgdj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kv=k("CornerUpLeftIcon",[["polyline",{points:"9 14 4 9 9 4",key:"881910"}],["path",{d:"M20 20v-7a4 4 0 0 0-4-4H4",key:"1nkjon"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xv=k("CornerUpRightIcon",[["polyline",{points:"15 14 20 9 15 4",key:"1tbx3s"}],["path",{d:"M4 20v-7a4 4 0 0 1 4-4h12",key:"1lu4f8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yv=k("CpuIcon",[["rect",{x:"4",y:"4",width:"16",height:"16",rx:"2",key:"1vbyd7"}],["rect",{x:"9",y:"9",width:"6",height:"6",key:"o3kz5p"}],["path",{d:"M15 2v2",key:"13l42r"}],["path",{d:"M15 20v2",key:"15mkzm"}],["path",{d:"M2 15h2",key:"1gxd5l"}],["path",{d:"M2 9h2",key:"1bbxkp"}],["path",{d:"M20 15h2",key:"19e6y8"}],["path",{d:"M20 9h2",key:"19tzq7"}],["path",{d:"M9 2v2",key:"165o2o"}],["path",{d:"M9 20v2",key:"i2bqo8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qv=k("CreativeCommonsIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M10 9.3a2.8 2.8 0 0 0-3.5 1 3.1 3.1 0 0 0 0 3.4 2.7 2.7 0 0 0 3.5 1",key:"1ss3eq"}],["path",{d:"M17 9.3a2.8 2.8 0 0 0-3.5 1 3.1 3.1 0 0 0 0 3.4 2.7 2.7 0 0 0 3.5 1",key:"1od56t"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jv=k("CreditCardIcon",[["rect",{width:"20",height:"14",x:"2",y:"5",rx:"2",key:"ynyp8z"}],["line",{x1:"2",x2:"22",y1:"10",y2:"10",key:"1b3vmo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ey=k("CroissantIcon",[["path",{d:"m4.6 13.11 5.79-3.21c1.89-1.05 4.79 1.78 3.71 3.71l-3.22 5.81C8.8 23.16.79 15.23 4.6 13.11Z",key:"1ozxlb"}],["path",{d:"m10.5 9.5-1-2.29C9.2 6.48 8.8 6 8 6H4.5C2.79 6 2 6.5 2 8.5a7.71 7.71 0 0 0 2 4.83",key:"ffuyb5"}],["path",{d:"M8 6c0-1.55.24-4-2-4-2 0-2.5 2.17-2.5 4",key:"osnpzi"}],["path",{d:"m14.5 13.5 2.29 1c.73.3 1.21.7 1.21 1.5v3.5c0 1.71-.5 2.5-2.5 2.5a7.71 7.71 0 0 1-4.83-2",key:"1vubaw"}],["path",{d:"M18 16c1.55 0 4-.24 4 2 0 2-2.17 2.5-4 2.5",key:"wxr772"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ty=k("CropIcon",[["path",{d:"M6 2v14a2 2 0 0 0 2 2h14",key:"ron5a4"}],["path",{d:"M18 22V8a2 2 0 0 0-2-2H2",key:"7s9ehn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ay=k("CrossIcon",[["path",{d:"M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2h-2z",key:"1t5g7j"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ny=k("CrosshairIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"22",x2:"18",y1:"12",y2:"12",key:"l9bcsi"}],["line",{x1:"6",x2:"2",y1:"12",y2:"12",key:"13hhkx"}],["line",{x1:"12",x2:"12",y1:"6",y2:"2",key:"10w3f3"}],["line",{x1:"12",x2:"12",y1:"22",y2:"18",key:"15g9kq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sy=k("CrownIcon",[["path",{d:"m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14",key:"zkxr6b"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const oy=k("CuboidIcon",[["path",{d:"m21.12 6.4-6.05-4.06a2 2 0 0 0-2.17-.05L2.95 8.41a2 2 0 0 0-.95 1.7v5.82a2 2 0 0 0 .88 1.66l6.05 4.07a2 2 0 0 0 2.17.05l9.95-6.12a2 2 0 0 0 .95-1.7V8.06a2 2 0 0 0-.88-1.66Z",key:"1u2ovd"}],["path",{d:"M10 22v-8L2.25 9.15",key:"11pn4q"}],["path",{d:"m10 14 11.77-6.87",key:"1kt1wh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ry=k("CupSodaIcon",[["path",{d:"m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8",key:"8166m8"}],["path",{d:"M5 8h14",key:"pcz4l3"}],["path",{d:"M7 15a6.47 6.47 0 0 1 5 0 6.47 6.47 0 0 0 5 0",key:"yjz344"}],["path",{d:"m12 8 1-6h2",key:"3ybfa4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const iy=k("CurrencyIcon",[["circle",{cx:"12",cy:"12",r:"8",key:"46899m"}],["line",{x1:"3",x2:"6",y1:"3",y2:"6",key:"1jkytn"}],["line",{x1:"21",x2:"18",y1:"3",y2:"6",key:"14zfjt"}],["line",{x1:"3",x2:"6",y1:"21",y2:"18",key:"iusuec"}],["line",{x1:"21",x2:"18",y1:"21",y2:"18",key:"yj2dd7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ly=k("CylinderIcon",[["ellipse",{cx:"12",cy:"5",rx:"9",ry:"3",key:"msslwz"}],["path",{d:"M3 5v14a9 3 0 0 0 18 0V5",key:"aqi0yr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cy=k("DatabaseBackupIcon",[["ellipse",{cx:"12",cy:"5",rx:"9",ry:"3",key:"msslwz"}],["path",{d:"M3 12a9 3 0 0 0 5 2.69",key:"1ui2ym"}],["path",{d:"M21 9.3V5",key:"6k6cib"}],["path",{d:"M3 5v14a9 3 0 0 0 6.47 2.88",key:"i62tjy"}],["path",{d:"M12 12v4h4",key:"1bxaet"}],["path",{d:"M13 20a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L12 16",key:"1f4ei9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dy=k("DatabaseZapIcon",[["ellipse",{cx:"12",cy:"5",rx:"9",ry:"3",key:"msslwz"}],["path",{d:"M3 5V19A9 3 0 0 0 15 21.84",key:"14ibmq"}],["path",{d:"M21 5V8",key:"1marbg"}],["path",{d:"M21 12L18 17H22L19 22",key:"zafso"}],["path",{d:"M3 12A9 3 0 0 0 14.59 14.87",key:"1y4wr8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uy=k("DatabaseIcon",[["ellipse",{cx:"12",cy:"5",rx:"9",ry:"3",key:"msslwz"}],["path",{d:"M3 5V19A9 3 0 0 0 21 19V5",key:"1wlel7"}],["path",{d:"M3 12A9 3 0 0 0 21 12",key:"mv7ke4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const py=k("DeleteIcon",[["path",{d:"M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z",key:"1oy587"}],["line",{x1:"18",x2:"12",y1:"9",y2:"15",key:"1olkx5"}],["line",{x1:"12",x2:"18",y1:"9",y2:"15",key:"1n50pc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hy=k("DessertIcon",[["circle",{cx:"12",cy:"4",r:"2",key:"muu5ef"}],["path",{d:"M10.2 3.2C5.5 4 2 8.1 2 13a2 2 0 0 0 4 0v-1a2 2 0 0 1 4 0v4a2 2 0 0 0 4 0v-4a2 2 0 0 1 4 0v1a2 2 0 0 0 4 0c0-4.9-3.5-9-8.2-9.8",key:"lfo06j"}],["path",{d:"M3.2 14.8a9 9 0 0 0 17.6 0",key:"12xarc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fy=k("DiameterIcon",[["circle",{cx:"19",cy:"19",r:"2",key:"17f5cg"}],["circle",{cx:"5",cy:"5",r:"2",key:"1gwv83"}],["path",{d:"M6.48 3.66a10 10 0 0 1 13.86 13.86",key:"xr8kdq"}],["path",{d:"m6.41 6.41 11.18 11.18",key:"uhpjw7"}],["path",{d:"M3.66 6.48a10 10 0 0 0 13.86 13.86",key:"cldpwv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const my=k("DiamondIcon",[["path",{d:"M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z",key:"1f1r0c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vy=k("Dice1Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["path",{d:"M12 12h.01",key:"1mp3jc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yy=k("Dice2Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["path",{d:"M15 9h.01",key:"x1ddxp"}],["path",{d:"M9 15h.01",key:"fzyn71"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _y=k("Dice3Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["path",{d:"M16 8h.01",key:"cr5u4v"}],["path",{d:"M12 12h.01",key:"1mp3jc"}],["path",{d:"M8 16h.01",key:"18s6g9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gy=k("Dice4Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["path",{d:"M16 8h.01",key:"cr5u4v"}],["path",{d:"M8 8h.01",key:"1e4136"}],["path",{d:"M8 16h.01",key:"18s6g9"}],["path",{d:"M16 16h.01",key:"1f9h7w"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ky=k("Dice5Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["path",{d:"M16 8h.01",key:"cr5u4v"}],["path",{d:"M8 8h.01",key:"1e4136"}],["path",{d:"M8 16h.01",key:"18s6g9"}],["path",{d:"M16 16h.01",key:"1f9h7w"}],["path",{d:"M12 12h.01",key:"1mp3jc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const by=k("Dice6Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["path",{d:"M16 8h.01",key:"cr5u4v"}],["path",{d:"M16 12h.01",key:"1l6xoz"}],["path",{d:"M16 16h.01",key:"1f9h7w"}],["path",{d:"M8 8h.01",key:"1e4136"}],["path",{d:"M8 12h.01",key:"czm47f"}],["path",{d:"M8 16h.01",key:"18s6g9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wy=k("DicesIcon",[["rect",{width:"12",height:"12",x:"2",y:"10",rx:"2",ry:"2",key:"6agr2n"}],["path",{d:"m17.92 14 3.5-3.5a2.24 2.24 0 0 0 0-3l-5-4.92a2.24 2.24 0 0 0-3 0L10 6",key:"1o487t"}],["path",{d:"M6 18h.01",key:"uhywen"}],["path",{d:"M10 14h.01",key:"ssrbsk"}],["path",{d:"M15 6h.01",key:"cblpky"}],["path",{d:"M18 9h.01",key:"2061c0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xy=k("DiffIcon",[["path",{d:"M12 3v14",key:"7cf3v8"}],["path",{d:"M5 10h14",key:"elsbfy"}],["path",{d:"M5 21h14",key:"11awu3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const My=k("Disc2Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["path",{d:"M12 12h.01",key:"1mp3jc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cy=k("Disc3Icon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M6 12c0-1.7.7-3.2 1.8-4.2",key:"oqkarx"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}],["path",{d:"M18 12c0 1.7-.7 3.2-1.8 4.2",key:"1eah9h"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sy=k("DiscAlbumIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["circle",{cx:"12",cy:"12",r:"5",key:"nd82uf"}],["path",{d:"M12 12h.01",key:"1mp3jc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Iy=k("DiscIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ly=k("DivideCircleIcon",[["line",{x1:"8",x2:"16",y1:"12",y2:"12",key:"1jonct"}],["line",{x1:"12",x2:"12",y1:"16",y2:"16",key:"aqc6ln"}],["line",{x1:"12",x2:"12",y1:"8",y2:"8",key:"1mkcni"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $y=k("DivideSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["line",{x1:"8",x2:"16",y1:"12",y2:"12",key:"1jonct"}],["line",{x1:"12",x2:"12",y1:"16",y2:"16",key:"aqc6ln"}],["line",{x1:"12",x2:"12",y1:"8",y2:"8",key:"1mkcni"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ay=k("DivideIcon",[["circle",{cx:"12",cy:"6",r:"1",key:"1bh7o1"}],["line",{x1:"5",x2:"19",y1:"12",y2:"12",key:"13b5wn"}],["circle",{cx:"12",cy:"18",r:"1",key:"lqb9t5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ey=k("DnaOffIcon",[["path",{d:"M15 2c-1.35 1.5-2.092 3-2.5 4.5M9 22c1.35-1.5 2.092-3 2.5-4.5",key:"sxiaad"}],["path",{d:"M2 15c3.333-3 6.667-3 10-3m10-3c-1.5 1.35-3 2.092-4.5 2.5",key:"yn4bs1"}],["path",{d:"m17 6-2.5-2.5",key:"5cdfhj"}],["path",{d:"m14 8-1.5-1.5",key:"1ohn8i"}],["path",{d:"m7 18 2.5 2.5",key:"16tu1a"}],["path",{d:"m3.5 14.5.5.5",key:"hapbhd"}],["path",{d:"m20 9 .5.5",key:"1n7z02"}],["path",{d:"m6.5 12.5 1 1",key:"cs35ky"}],["path",{d:"m16.5 10.5 1 1",key:"696xn5"}],["path",{d:"m10 16 1.5 1.5",key:"11lckj"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ty=k("DnaIcon",[["path",{d:"M2 15c6.667-6 13.333 0 20-6",key:"1pyr53"}],["path",{d:"M9 22c1.798-1.998 2.518-3.995 2.807-5.993",key:"q3hbxp"}],["path",{d:"M15 2c-1.798 1.998-2.518 3.995-2.807 5.993",key:"80uv8i"}],["path",{d:"m17 6-2.5-2.5",key:"5cdfhj"}],["path",{d:"m14 8-1-1",key:"15nbz5"}],["path",{d:"m7 18 2.5 2.5",key:"16tu1a"}],["path",{d:"m3.5 14.5.5.5",key:"hapbhd"}],["path",{d:"m20 9 .5.5",key:"1n7z02"}],["path",{d:"m6.5 12.5 1 1",key:"cs35ky"}],["path",{d:"m16.5 10.5 1 1",key:"696xn5"}],["path",{d:"m10 16 1.5 1.5",key:"11lckj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Py=k("DogIcon",[["path",{d:"M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .08.703 1.725 1.722 3.656 1 1.261-.472 1.96-1.45 2.344-2.5",key:"19br0u"}],["path",{d:"M14.267 5.172c0-1.39 1.577-2.493 3.5-2.172 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5",key:"11n1an"}],["path",{d:"M8 14v.5",key:"1nzgdb"}],["path",{d:"M16 14v.5",key:"1lajdz"}],["path",{d:"M11.25 16.25h1.5L12 17l-.75-.75Z",key:"12kq1m"}],["path",{d:"M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444c0-1.061-.162-2.2-.493-3.309m-9.243-6.082A8.801 8.801 0 0 1 12 5c.78 0 1.5.108 2.161.306",key:"wsu29d"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dy=k("DollarSignIcon",[["line",{x1:"12",x2:"12",y1:"2",y2:"22",key:"7eqyqh"}],["path",{d:"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6",key:"1b0p4s"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ry=k("DonutIcon",[["path",{d:"M20.5 10a2.5 2.5 0 0 1-2.4-3H18a2.95 2.95 0 0 1-2.6-4.4 10 10 0 1 0 6.3 7.1c-.3.2-.8.3-1.2.3",key:"19sr3x"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Oy=k("DoorClosedIcon",[["path",{d:"M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14",key:"36qu9e"}],["path",{d:"M2 20h20",key:"owomy5"}],["path",{d:"M14 12v.01",key:"xfcn54"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vy=k("DoorOpenIcon",[["path",{d:"M13 4h3a2 2 0 0 1 2 2v14",key:"hrm0s9"}],["path",{d:"M2 20h3",key:"1gaodv"}],["path",{d:"M13 20h9",key:"s90cdi"}],["path",{d:"M10 12v.01",key:"vx6srw"}],["path",{d:"M13 4.562v16.157a1 1 0 0 1-1.242.97L5 20V5.562a2 2 0 0 1 1.515-1.94l4-1A2 2 0 0 1 13 4.561Z",key:"199qr4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Uy=k("DotIcon",[["circle",{cx:"12.1",cy:"12.1",r:"1",key:"18d7e5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fy=k("DownloadCloudIcon",[["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"M12 12v9",key:"192myk"}],["path",{d:"m8 17 4 4 4-4",key:"1ul180"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jy=k("DownloadIcon",[["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",key:"ih7n3h"}],["polyline",{points:"7 10 12 15 17 10",key:"2ggqvy"}],["line",{x1:"12",x2:"12",y1:"15",y2:"3",key:"1vk2je"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hy=k("DraftingCompassIcon",[["circle",{cx:"12",cy:"5",r:"2",key:"f1ur92"}],["path",{d:"m3 21 8.02-14.26",key:"1ssaw4"}],["path",{d:"m12.99 6.74 1.93 3.44",key:"iwagvd"}],["path",{d:"M19 12c-3.87 4-10.13 4-14 0",key:"1tsu18"}],["path",{d:"m21 21-2.16-3.84",key:"vylbct"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ny=k("DramaIcon",[["path",{d:"M10 11h.01",key:"d2at3l"}],["path",{d:"M14 6h.01",key:"k028ub"}],["path",{d:"M18 6h.01",key:"1v4wsw"}],["path",{d:"M6.5 13.1h.01",key:"1748ia"}],["path",{d:"M22 5c0 9-4 12-6 12s-6-3-6-12c0-2 2-3 6-3s6 1 6 3",key:"172yzv"}],["path",{d:"M17.4 9.9c-.8.8-2 .8-2.8 0",key:"1obv0w"}],["path",{d:"M10.1 7.1C9 7.2 7.7 7.7 6 8.6c-3.5 2-4.7 3.9-3.7 5.6 4.5 7.8 9.5 8.4 11.2 7.4.9-.5 1.9-2.1 1.9-4.7",key:"rqjl8i"}],["path",{d:"M9.1 16.5c.3-1.1 1.4-1.7 2.4-1.4",key:"1mr6wy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zy=k("DribbbleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94",key:"hpej1"}],["path",{d:"M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32",key:"1tr44o"}],["path",{d:"M8.56 2.75c4.37 6 6 9.42 8 17.72",key:"kbh691"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const By=k("DrillIcon",[["path",{d:"M14 9c0 .6-.4 1-1 1H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9c.6 0 1 .4 1 1Z",key:"b6nnkj"}],["path",{d:"M18 6h4",key:"66u95g"}],["path",{d:"M14 4h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-3",key:"105ega"}],["path",{d:"m5 10-2 8",key:"xt2lic"}],["path",{d:"M12 10v3c0 .6-.4 1-1 1H8",key:"mwpjnk"}],["path",{d:"m7 18 2-8",key:"1bzku2"}],["path",{d:"M5 22c-1.7 0-3-1.3-3-3 0-.6.4-1 1-1h7c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1Z",key:"117add"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qy=k("DropletIcon",[["path",{d:"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z",key:"c7niix"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wy=k("DropletsIcon",[["path",{d:"M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z",key:"1ptgy4"}],["path",{d:"M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97",key:"1sl1rz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gy=k("DrumIcon",[["path",{d:"m2 2 8 8",key:"1v6059"}],["path",{d:"m22 2-8 8",key:"173r8a"}],["ellipse",{cx:"12",cy:"9",rx:"10",ry:"5",key:"liohsx"}],["path",{d:"M7 13.4v7.9",key:"1yi6u9"}],["path",{d:"M12 14v8",key:"1tn2tj"}],["path",{d:"M17 13.4v7.9",key:"eqz2v3"}],["path",{d:"M2 9v8a10 5 0 0 0 20 0V9",key:"1750ul"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zy=k("DrumstickIcon",[["path",{d:"M15.45 15.4c-2.13.65-4.3.32-5.7-1.1-2.29-2.27-1.76-6.5 1.17-9.42 2.93-2.93 7.15-3.46 9.43-1.18 1.41 1.41 1.74 3.57 1.1 5.71-1.4-.51-3.26-.02-4.64 1.36-1.38 1.38-1.87 3.23-1.36 4.63z",key:"1o96s0"}],["path",{d:"m11.25 15.6-2.16 2.16a2.5 2.5 0 1 1-4.56 1.73 2.49 2.49 0 0 1-1.41-4.24 2.5 2.5 0 0 1 3.14-.32l2.16-2.16",key:"14vv5h"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ky=k("DumbbellIcon",[["path",{d:"m6.5 6.5 11 11",key:"f7oqzb"}],["path",{d:"m21 21-1-1",key:"cpc6if"}],["path",{d:"m3 3 1 1",key:"d3rpuf"}],["path",{d:"m18 22 4-4",key:"1e32o6"}],["path",{d:"m2 6 4-4",key:"189tqz"}],["path",{d:"m3 10 7-7",key:"1bxui2"}],["path",{d:"m14 21 7-7",key:"16x78n"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xy=k("EarOffIcon",[["path",{d:"M6 18.5a3.5 3.5 0 1 0 7 0c0-1.57.92-2.52 2.04-3.46",key:"1qngmn"}],["path",{d:"M6 8.5c0-.75.13-1.47.36-2.14",key:"b06bma"}],["path",{d:"M8.8 3.15A6.5 6.5 0 0 1 19 8.5c0 1.63-.44 2.81-1.09 3.76",key:"g10hsz"}],["path",{d:"M12.5 6A2.5 2.5 0 0 1 15 8.5M10 13a2 2 0 0 0 1.82-1.18",key:"ygzou7"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yy=k("EarIcon",[["path",{d:"M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0",key:"1dfaln"}],["path",{d:"M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4",key:"1qnva7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qy=k("EggFriedIcon",[["circle",{cx:"11.5",cy:"12.5",r:"3.5",key:"1cl1mi"}],["path",{d:"M3 8c0-3.5 2.5-6 6.5-6 5 0 4.83 3 7.5 5s5 2 5 6c0 4.5-2.5 6.5-7 6.5-2.5 0-2.5 2.5-6 2.5s-7-2-7-5.5c0-3 1.5-3 1.5-5C3.5 10 3 9 3 8Z",key:"165ef9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jy=k("EggOffIcon",[["path",{d:"M6.399 6.399C5.362 8.157 4.65 10.189 4.5 12c-.37 4.43 1.27 9.95 7.5 10 3.256-.026 5.259-1.547 6.375-3.625",key:"6et380"}],["path",{d:"M19.532 13.875A14.07 14.07 0 0 0 19.5 12c-.36-4.34-3.95-9.96-7.5-10-1.04.012-2.082.502-3.046 1.297",key:"gcdc3f"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e_=k("EggIcon",[["path",{d:"M12 22c6.23-.05 7.87-5.57 7.5-10-.36-4.34-3.95-9.96-7.5-10-3.55.04-7.14 5.66-7.5 10-.37 4.43 1.27 9.95 7.5 10z",key:"1c39pg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t_=k("EqualNotIcon",[["line",{x1:"5",x2:"19",y1:"9",y2:"9",key:"1nwqeh"}],["line",{x1:"5",x2:"19",y1:"15",y2:"15",key:"g8yjpy"}],["line",{x1:"19",x2:"5",y1:"5",y2:"19",key:"1x9vlm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a_=k("EqualIcon",[["line",{x1:"5",x2:"19",y1:"9",y2:"9",key:"1nwqeh"}],["line",{x1:"5",x2:"19",y1:"15",y2:"15",key:"g8yjpy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n_=k("EraserIcon",[["path",{d:"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21",key:"182aya"}],["path",{d:"M22 21H7",key:"t4ddhn"}],["path",{d:"m5 11 9 9",key:"1mo9qw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s_=k("EuroIcon",[["path",{d:"M4 10h12",key:"1y6xl8"}],["path",{d:"M4 14h9",key:"1loblj"}],["path",{d:"M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2",key:"1j6lzo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o_=k("ExpandIcon",[["path",{d:"m21 21-6-6m6 6v-4.8m0 4.8h-4.8",key:"1c15vz"}],["path",{d:"M3 16.2V21m0 0h4.8M3 21l6-6",key:"1fsnz2"}],["path",{d:"M21 7.8V3m0 0h-4.8M21 3l-6 6",key:"hawz9i"}],["path",{d:"M3 7.8V3m0 0h4.8M3 3l6 6",key:"u9ee12"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r_=k("ExternalLinkIcon",[["path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6",key:"a6xqqp"}],["polyline",{points:"15 3 21 3 21 9",key:"mznyad"}],["line",{x1:"10",x2:"21",y1:"14",y2:"3",key:"18c3s4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i_=k("EyeOffIcon",[["path",{d:"M9.88 9.88a3 3 0 1 0 4.24 4.24",key:"1jxqfv"}],["path",{d:"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68",key:"9wicm4"}],["path",{d:"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61",key:"1jreej"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l_=k("EyeIcon",[["path",{d:"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z",key:"rwhkz3"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c_=k("FacebookIcon",[["path",{d:"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z",key:"1jg4f8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d_=k("FactoryIcon",[["path",{d:"M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",key:"159hny"}],["path",{d:"M17 18h1",key:"uldtlt"}],["path",{d:"M12 18h1",key:"s9uhes"}],["path",{d:"M7 18h1",key:"1neino"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u_=k("FanIcon",[["path",{d:"M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z",key:"484a7f"}],["path",{d:"M12 12v.01",key:"u5ubse"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p_=k("FastForwardIcon",[["polygon",{points:"13 19 22 12 13 5 13 19",key:"587y9g"}],["polygon",{points:"2 19 11 12 2 5 2 19",key:"3pweh0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h_=k("FeatherIcon",[["path",{d:"M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z",key:"u4sw5n"}],["line",{x1:"16",x2:"2",y1:"8",y2:"22",key:"1c47m2"}],["line",{x1:"17.5",x2:"9",y1:"15",y2:"15",key:"2fj3pr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f_=k("FenceIcon",[["path",{d:"M4 3 2 5v15c0 .6.4 1 1 1h2c.6 0 1-.4 1-1V5Z",key:"1n2rgs"}],["path",{d:"M6 8h4",key:"utf9t1"}],["path",{d:"M6 18h4",key:"12yh4b"}],["path",{d:"m12 3-2 2v15c0 .6.4 1 1 1h2c.6 0 1-.4 1-1V5Z",key:"3ha7mj"}],["path",{d:"M14 8h4",key:"1r8wg2"}],["path",{d:"M14 18h4",key:"1t3kbu"}],["path",{d:"m20 3-2 2v15c0 .6.4 1 1 1h2c.6 0 1-.4 1-1V5Z",key:"dfd4e2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m_=k("FerrisWheelIcon",[["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}],["path",{d:"M12 2v4",key:"3427ic"}],["path",{d:"m6.8 15-3.5 2",key:"hjy98k"}],["path",{d:"m20.7 7-3.5 2",key:"f08gto"}],["path",{d:"M6.8 9 3.3 7",key:"1aevh4"}],["path",{d:"m20.7 17-3.5-2",key:"1liqo3"}],["path",{d:"m9 22 3-8 3 8",key:"wees03"}],["path",{d:"M8 22h8",key:"rmew8v"}],["path",{d:"M18 18.7a9 9 0 1 0-12 0",key:"dhzg4g"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v_=k("FigmaIcon",[["path",{d:"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z",key:"1340ok"}],["path",{d:"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z",key:"1hz3m3"}],["path",{d:"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z",key:"1oz8n2"}],["path",{d:"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z",key:"1ff65i"}],["path",{d:"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z",key:"pdip6e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y_=k("FileArchiveIcon",[["path",{d:"M4 22V4c0-.5.2-1 .6-1.4C5 2.2 5.5 2 6 2h8.5L20 7.5V20c0 .5-.2 1-.6 1.4-.4.4-.9.6-1.4.6h-2",key:"1u864v"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["circle",{cx:"10",cy:"20",r:"2",key:"1xzdoj"}],["path",{d:"M10 7V6",key:"dljcrl"}],["path",{d:"M10 12v-1",key:"v7bkov"}],["path",{d:"M10 18v-2",key:"1cjy8d"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const __=k("FileAudio2Icon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v2",key:"fkyf72"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M2 17v-3a4 4 0 0 1 8 0v3",key:"1ggdre"}],["circle",{cx:"9",cy:"17",r:"1",key:"bc1fq4"}],["circle",{cx:"3",cy:"17",r:"1",key:"vo6nti"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g_=k("FileAudioIcon",[["path",{d:"M17.5 22h.5c.5 0 1-.2 1.4-.6.4-.4.6-.9.6-1.4V7.5L14.5 2H6c-.5 0-1 .2-1.4.6C4.2 3 4 3.5 4 4v3",key:"1013sb"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M10 20v-1a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0Z",key:"gqt63y"}],["path",{d:"M6 20v-1a2 2 0 1 0-4 0v1a2 2 0 1 0 4 0Z",key:"cf7lqx"}],["path",{d:"M2 19v-3a6 6 0 0 1 12 0v3",key:"1acxgf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ui=k("FileAxis3dIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M8 10v8h8",key:"tlaukw"}],["path",{d:"m8 18 4-4",key:"12zab0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k_=k("FileBadge2Icon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["path",{d:"M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z",key:"13rien"}],["path",{d:"m14 12.5 1 5.5-3-1-3 1 1-5.5",key:"14xlky"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b_=k("FileBadgeIcon",[["path",{d:"M4 7V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2h-6",key:"qtddq0"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z",key:"u0c8gj"}],["path",{d:"M7 16.5 8 22l-3-1-3 1 1-5.5",key:"5gm2nr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w_=k("FileBarChart2Icon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M12 18v-6",key:"17g6i2"}],["path",{d:"M8 18v-1",key:"zg0ygc"}],["path",{d:"M16 18v-3",key:"j5jt4h"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x_=k("FileBarChartIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M12 18v-4",key:"q1q25u"}],["path",{d:"M8 18v-2",key:"qcmpov"}],["path",{d:"M16 18v-6",key:"15y0np"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M_=k("FileBoxIcon",[["path",{d:"M14.5 22H18a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"h7jej2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M2.97 13.12c-.6.36-.97 1.02-.97 1.74v3.28c0 .72.37 1.38.97 1.74l3 1.83c.63.39 1.43.39 2.06 0l3-1.83c.6-.36.97-1.02.97-1.74v-3.28c0-.72-.37-1.38-.97-1.74l-3-1.83a1.97 1.97 0 0 0-2.06 0l-3 1.83Z",key:"f4a3oc"}],["path",{d:"m7 17-4.74-2.85",key:"etm6su"}],["path",{d:"m7 17 4.74-2.85",key:"5xuooz"}],["path",{d:"M7 17v5",key:"1yj1jh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C_=k("FileCheck2Icon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m3 15 2 2 4-4",key:"1lhrkk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S_=k("FileCheckIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m9 15 2 2 4-4",key:"1grp1n"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I_=k("FileClockIcon",[["path",{d:"M16 22h2c.5 0 1-.2 1.4-.6.4-.4.6-.9.6-1.4V7.5L14.5 2H6c-.5 0-1 .2-1.4.6C4.2 3 4 3.5 4 4v3",key:"9lo3o3"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["circle",{cx:"8",cy:"16",r:"6",key:"10v15b"}],["path",{d:"M9.5 17.5 8 16.25V14",key:"1o80t2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L_=k("FileCode2Icon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m9 18 3-3-3-3",key:"112psh"}],["path",{d:"m5 12-3 3 3 3",key:"oke12k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $_=k("FileCodeIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m10 13-2 2 2 2",key:"17smn8"}],["path",{d:"m14 17 2-2-2-2",key:"14mezr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fi=k("FileCogIcon",[["circle",{cx:"6",cy:"13",r:"3",key:"1z65bp"}],["path",{d:"m9.7 14.4-.9-.3",key:"o1luaq"}],["path",{d:"m3.2 11.9-.9-.3",key:"qm3zk5"}],["path",{d:"m4.6 16.7.3-.9",key:"1o0ect"}],["path",{d:"m7.6 16.7-.4-1",key:"1ym8d1"}],["path",{d:"m4.8 10.3-.4-1",key:"18q26g"}],["path",{d:"m2.3 14.6 1-.4",key:"121m88"}],["path",{d:"m8.7 11.8 1-.4",key:"9meqp2"}],["path",{d:"m7.4 9.3-.3.9",key:"136qqn"}],["path",{d:"M14 2v6h6",key:"1kof46"}],["path",{d:"M4 5.5V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-1.5",key:"xwe04"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A_=k("FileDiffIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["path",{d:"M12 13V7",key:"h0r20n"}],["path",{d:"M9 10h6",key:"9gxzsh"}],["path",{d:"M9 17h6",key:"r8uit2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E_=k("FileDigitIcon",[["rect",{width:"4",height:"6",x:"2",y:"12",rx:"2",key:"jm304g"}],["path",{d:"M14 2v6h6",key:"1kof46"}],["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["path",{d:"M10 12h2v6",key:"12zw74"}],["path",{d:"M10 18h4",key:"1ulq68"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T_=k("FileDownIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M12 18v-6",key:"17g6i2"}],["path",{d:"m9 15 3 3 3-3",key:"1npd3o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P_=k("FileEditIcon",[["path",{d:"M4 13.5V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2h-5.5",key:"1bg6eb"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M10.42 12.61a2.1 2.1 0 1 1 2.97 2.97L7.95 21 4 22l.99-3.95 5.43-5.44Z",key:"1rgxu8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D_=k("FileHeartIcon",[["path",{d:"M4 6V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H4",key:"dba9qu"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M10.29 10.7a2.43 2.43 0 0 0-2.66-.52c-.29.12-.56.3-.78.53l-.35.34-.35-.34a2.43 2.43 0 0 0-2.65-.53c-.3.12-.56.3-.79.53-.95.94-1 2.53.2 3.74L6.5 18l3.6-3.55c1.2-1.21 1.14-2.8.19-3.74Z",key:"1c1fso"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R_=k("FileImageIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["circle",{cx:"10",cy:"13",r:"2",key:"6v46hv"}],["path",{d:"m20 17-1.09-1.09a2 2 0 0 0-2.82 0L10 22",key:"17vly1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O_=k("FileInputIcon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M2 15h10",key:"jfw4w8"}],["path",{d:"m9 18 3-3-3-3",key:"112psh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V_=k("FileJson2Icon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M4 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1",key:"fq0c9t"}],["path",{d:"M8 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1",key:"4gibmv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U_=k("FileJsonIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1",key:"1oajmo"}],["path",{d:"M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1",key:"mpwhp6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F_=k("FileKey2Icon",[["path",{d:"M4 10V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H4",key:"1nw5t3"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["circle",{cx:"4",cy:"16",r:"2",key:"1ehqvc"}],["path",{d:"m10 10-4.5 4.5",key:"7fwrp6"}],["path",{d:"m9 11 1 1",key:"wa6s5q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j_=k("FileKeyIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["circle",{cx:"10",cy:"16",r:"2",key:"4ckbqe"}],["path",{d:"m16 10-4.5 4.5",key:"7p3ebg"}],["path",{d:"m15 11 1 1",key:"1bsyx3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H_=k("FileLineChartIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m16 13-3.5 3.5-2-2L8 17",key:"zz7yod"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N_=k("FileLock2Icon",[["path",{d:"M4 5V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H4",key:"gwd2r9"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["rect",{width:"8",height:"5",x:"2",y:"13",rx:"1",key:"10y5wo"}],["path",{d:"M8 13v-2a2 2 0 1 0-4 0v2",key:"1pdxzg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z_=k("FileLockIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["rect",{width:"8",height:"6",x:"8",y:"12",rx:"1",key:"3yr8at"}],["path",{d:"M15 12v-2a3 3 0 1 0-6 0v2",key:"1nqnhw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B_=k("FileMinus2Icon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M3 15h6",key:"4e2qda"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q_=k("FileMinusIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["line",{x1:"9",x2:"15",y1:"15",y2:"15",key:"110plj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W_=k("FileMusicIcon",[["circle",{cx:"14",cy:"16",r:"2",key:"1bzzi3"}],["circle",{cx:"6",cy:"18",r:"2",key:"1fncim"}],["path",{d:"M4 12.4V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2h-7.5",key:"skc018"}],["path",{d:"M8 18v-7.7L16 9v7",key:"1oie6o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G_=k("FileOutputIcon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M2 15h10",key:"jfw4w8"}],["path",{d:"m5 12-3 3 3 3",key:"oke12k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z_=k("FilePieChartIcon",[["path",{d:"M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3",key:"zhyrez"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M4.04 11.71a5.84 5.84 0 1 0 8.2 8.29",key:"f1t5jc"}],["path",{d:"M13.83 16A5.83 5.83 0 0 0 8 10.17V16h5.83Z",key:"7q54ec"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K_=k("FilePlus2Icon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M3 15h6",key:"4e2qda"}],["path",{d:"M6 12v6",key:"1u72j0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X_=k("FilePlusIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["line",{x1:"12",x2:"12",y1:"18",y2:"12",key:"1tsf04"}],["line",{x1:"9",x2:"15",y1:"15",y2:"15",key:"110plj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y_=k("FileQuestionIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["path",{d:"M10 10.3c.2-.4.5-.8.9-1a2.1 2.1 0 0 1 2.6.4c.3.4.5.8.5 1.3 0 1.3-2 2-2 2",key:"1umxtm"}],["path",{d:"M12 17h.01",key:"p32p05"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q_=k("FileScanIcon",[["path",{d:"M20 10V7.5L14.5 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h4.5",key:"uvikde"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M16 22a2 2 0 0 1-2-2",key:"1wqh5n"}],["path",{d:"M20 22a2 2 0 0 0 2-2",key:"1l9q4k"}],["path",{d:"M20 14a2 2 0 0 1 2 2",key:"1ny6zw"}],["path",{d:"M16 14a2 2 0 0 0-2 2",key:"ceaadl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J_=k("FileSearch2Icon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["circle",{cx:"11.5",cy:"14.5",r:"2.5",key:"1bq0ko"}],["path",{d:"M13.25 16.25 15 18",key:"9eh8bj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const eg=k("FileSearchIcon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3",key:"am10z3"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",key:"ychnub"}],["path",{d:"m9 18-1.5-1.5",key:"1j6qii"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tg=k("FileSignatureIcon",[["path",{d:"M20 19.5v.5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8.5L18 5.5",key:"kd5d3"}],["path",{d:"M8 18h1",key:"13wk12"}],["path",{d:"M18.42 9.61a2.1 2.1 0 1 1 2.97 2.97L16.95 17 13 18l.99-3.95 4.43-4.44Z",key:"johvi5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ag=k("FileSpreadsheetIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M8 13h2",key:"yr2amv"}],["path",{d:"M8 17h2",key:"2yhykz"}],["path",{d:"M14 13h2",key:"un5t4a"}],["path",{d:"M14 17h2",key:"10kma7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ng=k("FileStackIcon",[["path",{d:"M16 2v5h5",key:"kt2in0"}],["path",{d:"M21 6v6.5c0 .8-.7 1.5-1.5 1.5h-7c-.8 0-1.5-.7-1.5-1.5v-9c0-.8.7-1.5 1.5-1.5H17l4 4z",key:"1km23n"}],["path",{d:"M7 8v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H15",key:"16874u"}],["path",{d:"M3 12v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H11",key:"k2ox98"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sg=k("FileSymlinkIcon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v7",key:"138uzh"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m10 18 3-3-3-3",key:"18f6ys"}],["path",{d:"M4 18v-1a2 2 0 0 1 2-2h6",key:"5uz2rn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const og=k("FileTerminalIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m8 16 2-2-2-2",key:"10vzyd"}],["path",{d:"M12 18h4",key:"1wd2n7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rg=k("FileTextIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["line",{x1:"16",x2:"8",y1:"13",y2:"13",key:"14keom"}],["line",{x1:"16",x2:"8",y1:"17",y2:"17",key:"17nazh"}],["line",{x1:"10",x2:"8",y1:"9",y2:"9",key:"1a5vjj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ig=k("FileType2Icon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M2 13v-1h6v1",key:"1dh9dg"}],["path",{d:"M4 18h2",key:"1xrofg"}],["path",{d:"M5 12v6",key:"150t9c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lg=k("FileTypeIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M9 13v-1h6v1",key:"1bb014"}],["path",{d:"M11 18h2",key:"12mj7e"}],["path",{d:"M12 12v6",key:"3ahymv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cg=k("FileUpIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M12 12v6",key:"3ahymv"}],["path",{d:"m15 15-3-3-3 3",key:"15xj92"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dg=k("FileVideo2Icon",[["path",{d:"M4 8V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H4",key:"1nti49"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m10 15.5 4 2.5v-6l-4 2.5",key:"t7cp39"}],["rect",{width:"8",height:"6",x:"2",y:"12",rx:"1",key:"1a6c1e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ug=k("FileVideoIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m10 11 5 3-5 3v-6Z",key:"7ntvm4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pg=k("FileVolume2Icon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"M11.5 13.5c.32.4.5.94.5 1.5s-.18 1.1-.5 1.5",key:"joawwx"}],["path",{d:"M15 12c.64.8 1 1.87 1 3s-.36 2.2-1 3",key:"1f2wyw"}],["path",{d:"M8 15h.01",key:"a7atzg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hg=k("FileVolumeIcon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3",key:"am10z3"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["path",{d:"m7 10-3 2H2v4h2l3 2v-8Z",key:"tazg57"}],["path",{d:"M11 11c.64.8 1 1.87 1 3s-.36 2.2-1 3",key:"1yej3m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fg=k("FileWarningIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["path",{d:"M12 9v4",key:"juzpu7"}],["path",{d:"M12 17h.01",key:"p32p05"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mg=k("FileX2Icon",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4",key:"702lig"}],["path",{d:"M14 2v6h6",key:"1kof46"}],["path",{d:"m3 12.5 5 5",key:"1qls4r"}],["path",{d:"m8 12.5-5 5",key:"b853mi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vg=k("FileXIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}],["line",{x1:"9.5",x2:"14.5",y1:"12.5",y2:"17.5",key:"izs6du"}],["line",{x1:"14.5",x2:"9.5",y1:"12.5",y2:"17.5",key:"1lehlj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yg=k("FileIcon",[["path",{d:"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",key:"1nnpy2"}],["polyline",{points:"14 2 14 8 20 8",key:"1ew0cm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _g=k("FilesIcon",[["path",{d:"M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z",key:"cennsq"}],["path",{d:"M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8",key:"ms809a"}],["path",{d:"M15 2v5h5",key:"qq6kwv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gg=k("FilmIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M7 3v18",key:"bbkbws"}],["path",{d:"M3 7.5h4",key:"zfgn84"}],["path",{d:"M3 12h18",key:"1i2n21"}],["path",{d:"M3 16.5h4",key:"1230mu"}],["path",{d:"M17 3v18",key:"in4fa5"}],["path",{d:"M17 7.5h4",key:"myr1c1"}],["path",{d:"M17 16.5h4",key:"go4c1d"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kg=k("FilterXIcon",[["path",{d:"M13.013 3H2l8 9.46V19l4 2v-8.54l.9-1.055",key:"1fi1da"}],["path",{d:"m22 3-5 5",key:"12jva0"}],["path",{d:"m17 3 5 5",key:"k36vhe"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bg=k("FilterIcon",[["polygon",{points:"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3",key:"1yg77f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wg=k("FingerprintIcon",[["path",{d:"M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4",key:"1jc9o5"}],["path",{d:"M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2",key:"1mxgy1"}],["path",{d:"M17.29 21.02c.12-.6.43-2.3.5-3.02",key:"ptglia"}],["path",{d:"M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4",key:"1nerag"}],["path",{d:"M8.65 22c.21-.66.45-1.32.57-2",key:"13wd9y"}],["path",{d:"M14 13.12c0 2.38 0 6.38-1 8.88",key:"o46ks0"}],["path",{d:"M2 16h.01",key:"1gqxmh"}],["path",{d:"M21.8 16c.2-2 .131-5.354 0-6",key:"drycrb"}],["path",{d:"M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2",key:"1fgabc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xg=k("FireExtinguisherIcon",[["path",{d:"M15 6.5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3.5",key:"sqyvz"}],["path",{d:"M9 18h8",key:"i7pszb"}],["path",{d:"M18 3h-3",key:"7idoqj"}],["path",{d:"M11 3a6 6 0 0 0-6 6v11",key:"1v5je3"}],["path",{d:"M5 13h4",key:"svpcxo"}],["path",{d:"M17 10a4 4 0 0 0-8 0v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2Z",key:"vsjego"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mg=k("FishOffIcon",[["path",{d:"M18 12.47v.03m0-.5v.47m-.475 5.056A6.744 6.744 0 0 1 15 18c-3.56 0-7.56-2.53-8.5-6 .348-1.28 1.114-2.433 2.121-3.38m3.444-2.088A8.802 8.802 0 0 1 15 6c3.56 0 6.06 2.54 7 6-.309 1.14-.786 2.177-1.413 3.058",key:"1j1hse"}],["path",{d:"M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33m7.48-4.372A9.77 9.77 0 0 1 16 6.07m0 11.86a9.77 9.77 0 0 1-1.728-3.618",key:"1q46z8"}],["path",{d:"m16.01 17.93-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98M8.53 3h5.27a2 2 0 0 1 1.98 1.67l.23 1.4M2 2l20 20",key:"1407gh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cg=k("FishSymbolIcon",[["path",{d:"M2 16s9-15 20-4C11 23 2 8 2 8",key:"h4oh4o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sg=k("FishIcon",[["path",{d:"M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6Z",key:"15baut"}],["path",{d:"M18 12v.5",key:"18hhni"}],["path",{d:"M16 17.93a9.77 9.77 0 0 1 0-11.86",key:"16dt7o"}],["path",{d:"M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33",key:"l9di03"}],["path",{d:"M10.46 7.26C10.2 5.88 9.17 4.24 8 3h5.8a2 2 0 0 1 1.98 1.67l.23 1.4",key:"1kjonw"}],["path",{d:"m16.01 17.93-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98",key:"1zlm23"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ig=k("FlagOffIcon",[["path",{d:"M8 2c3 0 5 2 8 2s4-1 4-1v11",key:"9rwyz9"}],["path",{d:"M4 22V4",key:"1plyxx"}],["path",{d:"M4 15s1-1 4-1 5 2 8 2",key:"1myooe"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lg=k("FlagTriangleLeftIcon",[["path",{d:"M17 22V2L7 7l10 5",key:"1rmf0r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $g=k("FlagTriangleRightIcon",[["path",{d:"M7 22V2l10 5-10 5",key:"17n18y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ag=k("FlagIcon",[["path",{d:"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z",key:"i9b6wo"}],["line",{x1:"4",x2:"4",y1:"22",y2:"15",key:"1cm3nv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Eg=k("FlameKindlingIcon",[["path",{d:"M12 2c1 3 2.5 3.5 3.5 4.5A5 5 0 0 1 17 10a5 5 0 1 1-10 0c0-.3 0-.6.1-.9a2 2 0 1 0 3.3-2C8 4.5 11 2 12 2Z",key:"1ir223"}],["path",{d:"m5 22 14-4",key:"1brv4h"}],["path",{d:"m5 18 14 4",key:"lgyyje"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tg=k("FlameIcon",[["path",{d:"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z",key:"96xj49"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pg=k("FlashlightOffIcon",[["path",{d:"M16 16v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4",key:"1r120k"}],["path",{d:"M7 2h11v4c0 2-2 2-2 4v1",key:"dz1920"}],["line",{x1:"11",x2:"18",y1:"6",y2:"6",key:"bi1vpe"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dg=k("FlashlightIcon",[["path",{d:"M18 6c0 2-2 2-2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4V2h12z",key:"1orkel"}],["line",{x1:"6",x2:"18",y1:"6",y2:"6",key:"1z11jq"}],["line",{x1:"12",x2:"12",y1:"12",y2:"12",key:"1f4yc1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rg=k("FlaskConicalOffIcon",[["path",{d:"M10 10 4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-1.272-2.542",key:"59ek9y"}],["path",{d:"M10 2v2.343",key:"15t272"}],["path",{d:"M14 2v6.343",key:"sxr80q"}],["path",{d:"M8.5 2h7",key:"csnxdl"}],["path",{d:"M7 16h9",key:"t5njau"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Og=k("FlaskConicalIcon",[["path",{d:"M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2",key:"pzvekw"}],["path",{d:"M8.5 2h7",key:"csnxdl"}],["path",{d:"M7 16h10",key:"wp8him"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vg=k("FlaskRoundIcon",[["path",{d:"M10 2v7.31",key:"5d1hyh"}],["path",{d:"M14 9.3V1.99",key:"14k4l0"}],["path",{d:"M8.5 2h7",key:"csnxdl"}],["path",{d:"M14 9.3a6.5 6.5 0 1 1-4 0",key:"1r8fvy"}],["path",{d:"M5.52 16h12.96",key:"46hh1i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ug=k("FlipHorizontal2Icon",[["path",{d:"m3 7 5 5-5 5V7",key:"couhi7"}],["path",{d:"m21 7-5 5 5 5V7",key:"6ouia7"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"M12 14v2",key:"8jcxud"}],["path",{d:"M12 8v2",key:"1woqiv"}],["path",{d:"M12 2v2",key:"tus03m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fg=k("FlipHorizontalIcon",[["path",{d:"M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3",key:"1i73f7"}],["path",{d:"M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3",key:"saxlbk"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"M12 14v2",key:"8jcxud"}],["path",{d:"M12 8v2",key:"1woqiv"}],["path",{d:"M12 2v2",key:"tus03m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jg=k("FlipVertical2Icon",[["path",{d:"m17 3-5 5-5-5h10",key:"1ftt6x"}],["path",{d:"m17 21-5-5-5 5h10",key:"1m0wmu"}],["path",{d:"M4 12H2",key:"rhcxmi"}],["path",{d:"M10 12H8",key:"s88cx1"}],["path",{d:"M16 12h-2",key:"10asgb"}],["path",{d:"M22 12h-2",key:"14jgyd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hg=k("FlipVerticalIcon",[["path",{d:"M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3",key:"14bfxa"}],["path",{d:"M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3",key:"14rx03"}],["path",{d:"M4 12H2",key:"rhcxmi"}],["path",{d:"M10 12H8",key:"s88cx1"}],["path",{d:"M16 12h-2",key:"10asgb"}],["path",{d:"M22 12h-2",key:"14jgyd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ng=k("Flower2Icon",[["path",{d:"M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1",key:"3pnvol"}],["circle",{cx:"12",cy:"8",r:"2",key:"1822b1"}],["path",{d:"M12 10v12",key:"6ubwww"}],["path",{d:"M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z",key:"9hd38g"}],["path",{d:"M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z",key:"ufn41s"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zg=k("FlowerIcon",[["path",{d:"M12 7.5a4.5 4.5 0 1 1 4.5 4.5M12 7.5A4.5 4.5 0 1 0 7.5 12M12 7.5V9m-4.5 3a4.5 4.5 0 1 0 4.5 4.5M7.5 12H9m7.5 0a4.5 4.5 0 1 1-4.5 4.5m4.5-4.5H15m-3 4.5V15",key:"51z86h"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["path",{d:"m8 16 1.5-1.5",key:"ce6zph"}],["path",{d:"M14.5 9.5 16 8",key:"1kzrzb"}],["path",{d:"m8 8 1.5 1.5",key:"1yv88w"}],["path",{d:"M14.5 14.5 16 16",key:"12xhjh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bg=k("FocusIcon",[["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qg=k("FoldHorizontalIcon",[["path",{d:"M2 12h6",key:"1wqiqv"}],["path",{d:"M22 12h-6",key:"1eg9hc"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 8v2",key:"1woqiv"}],["path",{d:"M12 14v2",key:"8jcxud"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m19 9-3 3 3 3",key:"12ol22"}],["path",{d:"m5 15 3-3-3-3",key:"1kdhjc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wg=k("FoldVerticalIcon",[["path",{d:"M12 22v-6",key:"6o8u61"}],["path",{d:"M12 8V2",key:"1wkif3"}],["path",{d:"M4 12H2",key:"rhcxmi"}],["path",{d:"M10 12H8",key:"s88cx1"}],["path",{d:"M16 12h-2",key:"10asgb"}],["path",{d:"M22 12h-2",key:"14jgyd"}],["path",{d:"m15 19-3-3-3 3",key:"e37ymu"}],["path",{d:"m15 5-3 3-3-3",key:"19d6lf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gg=k("FolderArchiveIcon",[["circle",{cx:"15",cy:"19",r:"2",key:"u2pros"}],["path",{d:"M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1",key:"1jj40k"}],["path",{d:"M15 11v-1",key:"cntcp"}],["path",{d:"M15 17v-2",key:"1279jj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zg=k("FolderCheckIcon",[["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}],["path",{d:"m9 13 2 2 4-4",key:"6343dt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kg=k("FolderClockIcon",[["circle",{cx:"16",cy:"16",r:"6",key:"qoo3c4"}],["path",{d:"M7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2",key:"1urifu"}],["path",{d:"M16 14v2l1 1",key:"xth2jh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xg=k("FolderClosedIcon",[["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}],["path",{d:"M2 10h20",key:"1ir3d8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ji=k("FolderCogIcon",[["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}],["path",{d:"M10.3 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v3.3",key:"1k8050"}],["path",{d:"m21.7 19.4-.9-.3",key:"1qgwi9"}],["path",{d:"m15.2 16.9-.9-.3",key:"1t7mvx"}],["path",{d:"m16.6 21.7.3-.9",key:"1j67ps"}],["path",{d:"m19.1 15.2.3-.9",key:"18r7jp"}],["path",{d:"m19.6 21.7-.4-1",key:"z2vh2"}],["path",{d:"m16.8 15.3-.4-1",key:"1ei7r6"}],["path",{d:"m14.3 19.6 1-.4",key:"11sv9r"}],["path",{d:"m20.7 16.8 1-.4",key:"19m87a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yg=k("FolderDotIcon",[["path",{d:"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z",key:"1fr9dc"}],["circle",{cx:"12",cy:"13",r:"1",key:"49l61u"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qg=k("FolderDownIcon",[["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}],["path",{d:"M12 10v6",key:"1bos4e"}],["path",{d:"m15 13-3 3-3-3",key:"6j2sf0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jg=k("FolderEditIcon",[["path",{d:"M8.4 10.6a2.1 2.1 0 1 1 2.99 2.98L6 19l-4 1 1-3.9Z",key:"10ocjb"}],["path",{d:"M2 11.5V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-9.5",key:"1h3cz8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ek=k("FolderGit2Icon",[["path",{d:"M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5",key:"1w6njk"}],["circle",{cx:"13",cy:"12",r:"2",key:"1j92g6"}],["path",{d:"M18 19c-2.8 0-5-2.2-5-5v8",key:"pkpw2h"}],["circle",{cx:"20",cy:"19",r:"2",key:"1obnsp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tk=k("FolderGitIcon",[["circle",{cx:"12",cy:"13",r:"2",key:"1c1ljs"}],["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}],["path",{d:"M14 13h3",key:"1dgedf"}],["path",{d:"M7 13h3",key:"1pygq7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ak=k("FolderHeartIcon",[["path",{d:"M11 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v1.5",key:"6hud8k"}],["path",{d:"M13.9 17.45c-1.2-1.2-1.14-2.8-.2-3.73a2.43 2.43 0 0 1 3.44 0l.36.34.34-.34a2.43 2.43 0 0 1 3.45-.01v0c.95.95 1 2.53-.2 3.74L17.5 21Z",key:"vgq86i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nk=k("FolderInputIcon",[["path",{d:"M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1",key:"fm4g5t"}],["path",{d:"M2 13h10",key:"pgb2dq"}],["path",{d:"m9 16 3-3-3-3",key:"6m91ic"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sk=k("FolderKanbanIcon",[["path",{d:"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z",key:"1fr9dc"}],["path",{d:"M8 10v4",key:"tgpxqk"}],["path",{d:"M12 10v2",key:"hh53o1"}],["path",{d:"M16 10v6",key:"1d6xys"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ok=k("FolderKeyIcon",[["circle",{cx:"16",cy:"20",r:"2",key:"1vifvg"}],["path",{d:"M10 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v2",key:"3hgo9p"}],["path",{d:"m22 14-4.5 4.5",key:"1ef6z8"}],["path",{d:"m21 15 1 1",key:"1ejcpy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rk=k("FolderLockIcon",[["rect",{width:"8",height:"5",x:"14",y:"17",rx:"1",key:"19aais"}],["path",{d:"M10 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v2.5",key:"1w6v7t"}],["path",{d:"M20 17v-2a2 2 0 1 0-4 0v2",key:"pwaxnr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ik=k("FolderMinusIcon",[["path",{d:"M9 13h6",key:"1uhe8q"}],["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lk=k("FolderOpenDotIcon",[["path",{d:"m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2",key:"1nmvlm"}],["circle",{cx:"14",cy:"15",r:"1",key:"1gm4qj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ck=k("FolderOpenIcon",[["path",{d:"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",key:"usdka0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dk=k("FolderOutputIcon",[["path",{d:"M2 7.5V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2",key:"jm8npq"}],["path",{d:"M2 13h10",key:"pgb2dq"}],["path",{d:"m5 10-3 3 3 3",key:"1r8ie0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uk=k("FolderPlusIcon",[["path",{d:"M12 10v6",key:"1bos4e"}],["path",{d:"M9 13h6",key:"1uhe8q"}],["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pk=k("FolderRootIcon",[["path",{d:"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z",key:"1fr9dc"}],["circle",{cx:"12",cy:"13",r:"2",key:"1c1ljs"}],["path",{d:"M12 15v5",key:"11xva1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hk=k("FolderSearch2Icon",[["circle",{cx:"11.5",cy:"12.5",r:"2.5",key:"1ea5ju"}],["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}],["path",{d:"M13.3 14.3 15 16",key:"1y4v1n"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fk=k("FolderSearchIcon",[["circle",{cx:"17",cy:"17",r:"3",key:"18b49y"}],["path",{d:"M10.7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4.1",key:"1bw5m7"}],["path",{d:"m21 21-1.5-1.5",key:"3sg1j"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mk=k("FolderSymlinkIcon",[["path",{d:"M2 9V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2",key:"1or2t8"}],["path",{d:"m8 16 3-3-3-3",key:"rlqrt1"}],["path",{d:"M2 16v-1a2 2 0 0 1 2-2h6",key:"pgw8ln"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vk=k("FolderSyncIcon",[["path",{d:"M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v1",key:"1rkwto"}],["path",{d:"M12 10v4h4",key:"1czhmt"}],["path",{d:"m12 14 1.5-1.5c.9-.9 2.2-1.5 3.5-1.5s2.6.6 3.5 1.5c.4.4.8 1 1 1.5",key:"25wejs"}],["path",{d:"M22 22v-4h-4",key:"1ewp4q"}],["path",{d:"m22 18-1.5 1.5c-.9.9-2.1 1.5-3.5 1.5s-2.6-.6-3.5-1.5c-.4-.4-.8-1-1-1.5",key:"vlp1j8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yk=k("FolderTreeIcon",[["path",{d:"M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z",key:"hod4my"}],["path",{d:"M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z",key:"w4yl2u"}],["path",{d:"M3 5a2 2 0 0 0 2 2h3",key:"f2jnh7"}],["path",{d:"M3 3v13a2 2 0 0 0 2 2h3",key:"k8epm1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _k=k("FolderUpIcon",[["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}],["path",{d:"M12 10v6",key:"1bos4e"}],["path",{d:"m9 13 3-3 3 3",key:"1pxg3c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gk=k("FolderXIcon",[["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}],["path",{d:"m9.5 10.5 5 5",key:"ra9qjz"}],["path",{d:"m14.5 10.5-5 5",key:"l2rkpq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kk=k("FolderIcon",[["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",key:"1kt360"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bk=k("FoldersIcon",[["path",{d:"M20 17a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3.9a2 2 0 0 1-1.69-.9l-.81-1.2a2 2 0 0 0-1.67-.9H8a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2Z",key:"4u7rpt"}],["path",{d:"M2 8v11a2 2 0 0 0 2 2h14",key:"1eicx1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wk=k("FootprintsIcon",[["path",{d:"M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z",key:"1dudjm"}],["path",{d:"M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z",key:"l2t8xc"}],["path",{d:"M16 17h4",key:"1dejxt"}],["path",{d:"M4 13h4",key:"1bwh8b"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xk=k("ForkliftIcon",[["path",{d:"M12 12H5a2 2 0 0 0-2 2v5",key:"7zsz91"}],["circle",{cx:"13",cy:"19",r:"2",key:"wjnkru"}],["circle",{cx:"5",cy:"19",r:"2",key:"v8kfzx"}],["path",{d:"M8 19h3m5-17v17h6M6 12V7c0-1.1.9-2 2-2h3l5 5",key:"13bk1p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mk=k("FormInputIcon",[["rect",{width:"20",height:"12",x:"2",y:"6",rx:"2",key:"9lu3g6"}],["path",{d:"M12 12h.01",key:"1mp3jc"}],["path",{d:"M17 12h.01",key:"1m0b6t"}],["path",{d:"M7 12h.01",key:"eqddd0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ck=k("ForwardIcon",[["polyline",{points:"15 17 20 12 15 7",key:"1w3sku"}],["path",{d:"M4 18v-2a4 4 0 0 1 4-4h12",key:"jmiej9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sk=k("FrameIcon",[["line",{x1:"22",x2:"2",y1:"6",y2:"6",key:"15w7dq"}],["line",{x1:"22",x2:"2",y1:"18",y2:"18",key:"1ip48p"}],["line",{x1:"6",x2:"6",y1:"2",y2:"22",key:"a2lnyx"}],["line",{x1:"18",x2:"18",y1:"2",y2:"22",key:"8vb6jd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ik=k("FramerIcon",[["path",{d:"M5 16V9h14V2H5l14 14h-7m-7 0 7 7v-7m-7 0h7",key:"1a2nng"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lk=k("FrownIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M16 16s-1.5-2-4-2-4 2-4 2",key:"epbg0q"}],["line",{x1:"9",x2:"9.01",y1:"9",y2:"9",key:"yxxnd0"}],["line",{x1:"15",x2:"15.01",y1:"9",y2:"9",key:"1p4y9e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $k=k("FuelIcon",[["line",{x1:"3",x2:"15",y1:"22",y2:"22",key:"xegly4"}],["line",{x1:"4",x2:"14",y1:"9",y2:"9",key:"xcnuvu"}],["path",{d:"M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18",key:"16j0yd"}],["path",{d:"M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5",key:"8ur5zv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ak=k("FullscreenIcon",[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}],["rect",{width:"10",height:"8",x:"7",y:"8",rx:"1",key:"vys8me"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ek=k("FunctionSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["path",{d:"M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3",key:"m1af9g"}],["path",{d:"M9 11.2h5.7",key:"3zgcl2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tk=k("GalleryHorizontalEndIcon",[["path",{d:"M2 7v10",key:"a2pl2d"}],["path",{d:"M6 5v14",key:"1kq3d7"}],["rect",{width:"12",height:"18",x:"10",y:"3",rx:"2",key:"13i7bc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pk=k("GalleryHorizontalIcon",[["path",{d:"M2 3v18",key:"pzttux"}],["rect",{width:"12",height:"18",x:"6",y:"3",rx:"2",key:"btr8bg"}],["path",{d:"M22 3v18",key:"6jf3v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dk=k("GalleryThumbnailsIcon",[["rect",{width:"18",height:"14",x:"3",y:"3",rx:"2",key:"74y24f"}],["path",{d:"M4 21h1",key:"16zlid"}],["path",{d:"M9 21h1",key:"15o7lz"}],["path",{d:"M14 21h1",key:"v9vybs"}],["path",{d:"M19 21h1",key:"edywat"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rk=k("GalleryVerticalEndIcon",[["path",{d:"M7 2h10",key:"nczekb"}],["path",{d:"M5 6h14",key:"u2x4p"}],["rect",{width:"18",height:"12",x:"3",y:"10",rx:"2",key:"l0tzu3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ok=k("GalleryVerticalIcon",[["path",{d:"M3 2h18",key:"15qxfx"}],["rect",{width:"18",height:"12",x:"3",y:"6",rx:"2",key:"1439r6"}],["path",{d:"M3 22h18",key:"8prr45"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vk=k("Gamepad2Icon",[["line",{x1:"6",x2:"10",y1:"11",y2:"11",key:"1gktln"}],["line",{x1:"8",x2:"8",y1:"9",y2:"13",key:"qnk9ow"}],["line",{x1:"15",x2:"15.01",y1:"12",y2:"12",key:"krot7o"}],["line",{x1:"18",x2:"18.01",y1:"10",y2:"10",key:"1lcuu1"}],["path",{d:"M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z",key:"mfqc10"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Uk=k("GamepadIcon",[["line",{x1:"6",x2:"10",y1:"12",y2:"12",key:"161bw2"}],["line",{x1:"8",x2:"8",y1:"10",y2:"14",key:"1i6ji0"}],["line",{x1:"15",x2:"15.01",y1:"13",y2:"13",key:"dqpgro"}],["line",{x1:"18",x2:"18.01",y1:"11",y2:"11",key:"meh2c"}],["rect",{width:"20",height:"12",x:"2",y:"6",rx:"2",key:"9lu3g6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hi=k("GanttChartSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 8h7",key:"kbo1nt"}],["path",{d:"M8 12h6",key:"ikassy"}],["path",{d:"M11 16h5",key:"oq65wt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fk=k("GanttChartIcon",[["path",{d:"M8 6h10",key:"9lnwnk"}],["path",{d:"M6 12h9",key:"1g9pqf"}],["path",{d:"M11 18h7",key:"c8dzvl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jk=k("GaugeCircleIcon",[["path",{d:"M15.6 2.7a10 10 0 1 0 5.7 5.7",key:"1e0p6d"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}],["path",{d:"M13.4 10.6 19 5",key:"1kr7tw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hk=k("GaugeIcon",[["path",{d:"m12 14 4-4",key:"9kzdfg"}],["path",{d:"M3.34 19a10 10 0 1 1 17.32 0",key:"19p75a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nk=k("GavelIcon",[["path",{d:"m14.5 12.5-8 8a2.119 2.119 0 1 1-3-3l8-8",key:"15492f"}],["path",{d:"m16 16 6-6",key:"vzrcl6"}],["path",{d:"m8 8 6-6",key:"18bi4p"}],["path",{d:"m9 7 8 8",key:"5jnvq1"}],["path",{d:"m21 11-8-8",key:"z4y7zo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zk=k("GemIcon",[["path",{d:"M6 3h12l4 6-10 13L2 9Z",key:"1pcd5k"}],["path",{d:"M11 3 8 9l4 13 4-13-3-6",key:"1fcu3u"}],["path",{d:"M2 9h20",key:"16fsjt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bk=k("GhostIcon",[["path",{d:"M9 10h.01",key:"qbtxuw"}],["path",{d:"M15 10h.01",key:"1qmjsl"}],["path",{d:"M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z",key:"uwwb07"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qk=k("GiftIcon",[["rect",{x:"3",y:"8",width:"18",height:"4",rx:"1",key:"bkv52"}],["path",{d:"M12 8v13",key:"1c76mn"}],["path",{d:"M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7",key:"6wjy6b"}],["path",{d:"M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5",key:"1ihvrl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wk=k("GitBranchPlusIcon",[["path",{d:"M6 3v12",key:"qpgusn"}],["path",{d:"M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",key:"1d02ji"}],["path",{d:"M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",key:"chk6ph"}],["path",{d:"M15 6a9 9 0 0 0-9 9",key:"or332x"}],["path",{d:"M18 15v6",key:"9wciyi"}],["path",{d:"M21 18h-6",key:"139f0c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gk=k("GitBranchIcon",[["line",{x1:"6",x2:"6",y1:"3",y2:"15",key:"17qcm7"}],["circle",{cx:"18",cy:"6",r:"3",key:"1h7g24"}],["circle",{cx:"6",cy:"18",r:"3",key:"fqmcym"}],["path",{d:"M18 9a9 9 0 0 1-9 9",key:"n2h4wq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ni=k("GitCommitHorizontalIcon",[["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["line",{x1:"3",x2:"9",y1:"12",y2:"12",key:"1dyftd"}],["line",{x1:"15",x2:"21",y1:"12",y2:"12",key:"oup4p8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zk=k("GitCommitVerticalIcon",[["path",{d:"M12 3v6",key:"1holv5"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["path",{d:"M12 15v6",key:"a9ows0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kk=k("GitCompareArrowsIcon",[["circle",{cx:"5",cy:"6",r:"3",key:"1qnov2"}],["path",{d:"M12 6h5a2 2 0 0 1 2 2v7",key:"1yj91y"}],["path",{d:"m15 9-3-3 3-3",key:"1lwv8l"}],["circle",{cx:"19",cy:"18",r:"3",key:"1qljk2"}],["path",{d:"M12 18H7a2 2 0 0 1-2-2V9",key:"16sdep"}],["path",{d:"m9 15 3 3-3 3",key:"1m3kbl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xk=k("GitCompareIcon",[["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}],["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["path",{d:"M13 6h3a2 2 0 0 1 2 2v7",key:"1yeb86"}],["path",{d:"M11 18H8a2 2 0 0 1-2-2V9",key:"19pyzm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yk=k("GitForkIcon",[["circle",{cx:"12",cy:"18",r:"3",key:"1mpf1b"}],["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["circle",{cx:"18",cy:"6",r:"3",key:"1h7g24"}],["path",{d:"M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9",key:"1uq4wg"}],["path",{d:"M12 12v3",key:"158kv8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qk=k("GitGraphIcon",[["circle",{cx:"5",cy:"6",r:"3",key:"1qnov2"}],["path",{d:"M5 9v6",key:"158jrl"}],["circle",{cx:"5",cy:"18",r:"3",key:"104gr9"}],["path",{d:"M12 3v18",key:"108xh3"}],["circle",{cx:"19",cy:"6",r:"3",key:"108a5v"}],["path",{d:"M16 15.7A9 9 0 0 0 19 9",key:"1e3vqb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jk=k("GitMergeIcon",[["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}],["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["path",{d:"M6 21V9a9 9 0 0 0 9 9",key:"7kw0sc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const eb=k("GitPullRequestArrowIcon",[["circle",{cx:"5",cy:"6",r:"3",key:"1qnov2"}],["path",{d:"M5 9v12",key:"ih889a"}],["circle",{cx:"19",cy:"18",r:"3",key:"1qljk2"}],["path",{d:"m15 9-3-3 3-3",key:"1lwv8l"}],["path",{d:"M12 6h5a2 2 0 0 1 2 2v7",key:"1yj91y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tb=k("GitPullRequestClosedIcon",[["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["path",{d:"M6 9v12",key:"1sc30k"}],["path",{d:"m21 3-6 6",key:"16nqsk"}],["path",{d:"m21 9-6-6",key:"9j17rh"}],["path",{d:"M18 11.5V15",key:"65xf6f"}],["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ab=k("GitPullRequestCreateArrowIcon",[["circle",{cx:"5",cy:"6",r:"3",key:"1qnov2"}],["path",{d:"M5 9v12",key:"ih889a"}],["path",{d:"m15 9-3-3 3-3",key:"1lwv8l"}],["path",{d:"M12 6h5a2 2 0 0 1 2 2v3",key:"1rbwk6"}],["path",{d:"M19 15v6",key:"10aioa"}],["path",{d:"M22 18h-6",key:"1d5gi5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nb=k("GitPullRequestCreateIcon",[["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["path",{d:"M6 9v12",key:"1sc30k"}],["path",{d:"M13 6h3a2 2 0 0 1 2 2v3",key:"1jb6z3"}],["path",{d:"M18 15v6",key:"9wciyi"}],["path",{d:"M21 18h-6",key:"139f0c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sb=k("GitPullRequestDraftIcon",[["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}],["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["path",{d:"M18 6V5",key:"1oao2s"}],["path",{d:"M18 11v-1",key:"11c8tz"}],["line",{x1:"6",x2:"6",y1:"9",y2:"21",key:"rroup"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ob=k("GitPullRequestIcon",[["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}],["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["path",{d:"M13 6h3a2 2 0 0 1 2 2v7",key:"1yeb86"}],["line",{x1:"6",x2:"6",y1:"9",y2:"21",key:"rroup"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rb=k("GithubIcon",[["path",{d:"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4",key:"tonef"}],["path",{d:"M9 18c-4.51 2-5-2-7-2",key:"9comsn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ib=k("GitlabIcon",[["path",{d:"m22 13.29-3.33-10a.42.42 0 0 0-.14-.18.38.38 0 0 0-.22-.11.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18l-2.26 6.67H8.32L6.1 3.26a.42.42 0 0 0-.1-.18.38.38 0 0 0-.26-.08.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18L2 13.29a.74.74 0 0 0 .27.83L12 21l9.69-6.88a.71.71 0 0 0 .31-.83Z",key:"148pdi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lb=k("GlassWaterIcon",[["path",{d:"M15.2 22H8.8a2 2 0 0 1-2-1.79L5 3h14l-1.81 17.21A2 2 0 0 1 15.2 22Z",key:"48rfw3"}],["path",{d:"M6 12a5 5 0 0 1 6 0 5 5 0 0 0 6 0",key:"mjntcy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cb=k("GlassesIcon",[["circle",{cx:"6",cy:"15",r:"4",key:"vux9w4"}],["circle",{cx:"18",cy:"15",r:"4",key:"18o8ve"}],["path",{d:"M14 15a2 2 0 0 0-2-2 2 2 0 0 0-2 2",key:"1ag4bs"}],["path",{d:"M2.5 13 5 7c.7-1.3 1.4-2 3-2",key:"1hm1gs"}],["path",{d:"M21.5 13 19 7c-.7-1.3-1.5-2-3-2",key:"1r31ai"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const db=k("Globe2Icon",[["path",{d:"M21.54 15H17a2 2 0 0 0-2 2v4.54",key:"1djwo0"}],["path",{d:"M7 3.34V5a3 3 0 0 0 3 3v0a2 2 0 0 1 2 2v0c0 1.1.9 2 2 2v0a2 2 0 0 0 2-2v0c0-1.1.9-2 2-2h3.17",key:"1fi5u6"}],["path",{d:"M11 21.95V18a2 2 0 0 0-2-2v0a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05",key:"xsiumc"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ub=k("GlobeIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20",key:"13o1zl"}],["path",{d:"M2 12h20",key:"9i4pu4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pb=k("GoalIcon",[["path",{d:"M12 13V2l8 4-8 4",key:"5wlwwj"}],["path",{d:"M20.55 10.23A9 9 0 1 1 8 4.94",key:"5988i3"}],["path",{d:"M8 10a5 5 0 1 0 8.9 2.02",key:"1hq7ot"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hb=k("GrabIcon",[["path",{d:"M18 11.5V9a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v1.4",key:"n5nng"}],["path",{d:"M14 10V8a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2",key:"185i9d"}],["path",{d:"M10 9.9V9a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v5",key:"11pz95"}],["path",{d:"M6 14v0a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0",key:"16yk7l"}],["path",{d:"M18 11v0a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8 2 2 0 1 1 4 0",key:"nzvb1c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fb=k("GraduationCapIcon",[["path",{d:"M22 10v6M2 10l10-5 10 5-10 5z",key:"1ef52a"}],["path",{d:"M6 12v5c3 3 9 3 12 0v-5",key:"1f75yj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mb=k("GrapeIcon",[["path",{d:"M22 5V2l-5.89 5.89",key:"1eenpo"}],["circle",{cx:"16.6",cy:"15.89",r:"3",key:"xjtalx"}],["circle",{cx:"8.11",cy:"7.4",r:"3",key:"u2fv6i"}],["circle",{cx:"12.35",cy:"11.65",r:"3",key:"i6i8g7"}],["circle",{cx:"13.91",cy:"5.85",r:"3",key:"6ye0dv"}],["circle",{cx:"18.15",cy:"10.09",r:"3",key:"snx9no"}],["circle",{cx:"6.56",cy:"13.2",r:"3",key:"17x4xg"}],["circle",{cx:"10.8",cy:"17.44",r:"3",key:"1hogw9"}],["circle",{cx:"5",cy:"19",r:"3",key:"1sn6vo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zi=k("Grid2x2Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 12h18",key:"1i2n21"}],["path",{d:"M12 3v18",key:"108xh3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yo=k("Grid3x3Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"M3 15h18",key:"5xshup"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"M15 3v18",key:"14nvp0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vb=k("GripHorizontalIcon",[["circle",{cx:"12",cy:"9",r:"1",key:"124mty"}],["circle",{cx:"19",cy:"9",r:"1",key:"1ruzo2"}],["circle",{cx:"5",cy:"9",r:"1",key:"1a8b28"}],["circle",{cx:"12",cy:"15",r:"1",key:"1e56xg"}],["circle",{cx:"19",cy:"15",r:"1",key:"1a92ep"}],["circle",{cx:"5",cy:"15",r:"1",key:"5r1jwy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yb=k("GripVerticalIcon",[["circle",{cx:"9",cy:"12",r:"1",key:"1vctgf"}],["circle",{cx:"9",cy:"5",r:"1",key:"hp0tcf"}],["circle",{cx:"9",cy:"19",r:"1",key:"fkjjf6"}],["circle",{cx:"15",cy:"12",r:"1",key:"1tmaij"}],["circle",{cx:"15",cy:"5",r:"1",key:"19l28e"}],["circle",{cx:"15",cy:"19",r:"1",key:"f4zoj3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _b=k("GripIcon",[["circle",{cx:"12",cy:"5",r:"1",key:"gxeob9"}],["circle",{cx:"19",cy:"5",r:"1",key:"w8mnmm"}],["circle",{cx:"5",cy:"5",r:"1",key:"lttvr7"}],["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}],["circle",{cx:"12",cy:"19",r:"1",key:"lyex9k"}],["circle",{cx:"19",cy:"19",r:"1",key:"shf9b7"}],["circle",{cx:"5",cy:"19",r:"1",key:"bfqh0e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gb=k("GroupIcon",[["path",{d:"M3 7V5c0-1.1.9-2 2-2h2",key:"adw53z"}],["path",{d:"M17 3h2c1.1 0 2 .9 2 2v2",key:"an4l38"}],["path",{d:"M21 17v2c0 1.1-.9 2-2 2h-2",key:"144t0e"}],["path",{d:"M7 21H5c-1.1 0-2-.9-2-2v-2",key:"rtnfgi"}],["rect",{width:"7",height:"5",x:"7",y:"7",rx:"1",key:"1eyiv7"}],["rect",{width:"7",height:"5",x:"10",y:"12",rx:"1",key:"1qlmkx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kb=k("GuitarIcon",[["path",{d:"m20 7 1.7-1.7a1 1 0 0 0 0-1.4l-1.6-1.6a1 1 0 0 0-1.4 0L17 4v3Z",key:"15ixgv"}],["path",{d:"m17 7-5.1 5.1",key:"l9guh7"}],["circle",{cx:"11.5",cy:"12.5",r:".5",key:"1evg0a"}],["path",{d:"M6 12a2 2 0 0 0 1.8-1.2l.4-.9C8.7 8.8 9.8 8 11 8c2.8 0 5 2.2 5 5 0 1.2-.8 2.3-1.9 2.8l-.9.4A2 2 0 0 0 12 18a4 4 0 0 1-4 4c-3.3 0-6-2.7-6-6a4 4 0 0 1 4-4",key:"x9fguj"}],["path",{d:"m6 16 2 2",key:"16qmzd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bb=k("HammerIcon",[["path",{d:"m15 12-8.5 8.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L12 9",key:"1afvon"}],["path",{d:"M17.64 15 22 10.64",key:"zsji6s"}],["path",{d:"m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25v-.86L16.01 4.6a5.56 5.56 0 0 0-3.94-1.64H9l.92.82A6.18 6.18 0 0 1 12 8.4v1.56l2 2h2.47l2.26 1.91",key:"lehyy1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wb=k("HandMetalIcon",[["path",{d:"M18 12.5V10a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v1.4",key:"7eki13"}],["path",{d:"M14 11V9a2 2 0 1 0-4 0v2",key:"94qvcw"}],["path",{d:"M10 10.5V5a2 2 0 1 0-4 0v9",key:"m1ah89"}],["path",{d:"m7 15-1.76-1.76a2 2 0 0 0-2.83 2.82l3.6 3.6C7.5 21.14 9.2 22 12 22h2a8 8 0 0 0 8-8V7a2 2 0 1 0-4 0v5",key:"t1skq1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xb=k("HandIcon",[["path",{d:"M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0",key:"aigmz7"}],["path",{d:"M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2",key:"1n6bmn"}],["path",{d:"M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8",key:"a9iiix"}],["path",{d:"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15",key:"1s1gnw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mb=k("HardDriveDownloadIcon",[["path",{d:"M12 2v8",key:"1q4o3n"}],["path",{d:"m16 6-4 4-4-4",key:"6wukr"}],["rect",{width:"20",height:"8",x:"2",y:"14",rx:"2",key:"w68u3i"}],["path",{d:"M6 18h.01",key:"uhywen"}],["path",{d:"M10 18h.01",key:"h775k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cb=k("HardDriveUploadIcon",[["path",{d:"m16 6-4-4-4 4",key:"13yo43"}],["path",{d:"M12 2v8",key:"1q4o3n"}],["rect",{width:"20",height:"8",x:"2",y:"14",rx:"2",key:"w68u3i"}],["path",{d:"M6 18h.01",key:"uhywen"}],["path",{d:"M10 18h.01",key:"h775k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sb=k("HardDriveIcon",[["line",{x1:"22",x2:"2",y1:"12",y2:"12",key:"1y58io"}],["path",{d:"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",key:"oot6mr"}],["line",{x1:"6",x2:"6.01",y1:"16",y2:"16",key:"sgf278"}],["line",{x1:"10",x2:"10.01",y1:"16",y2:"16",key:"1l4acy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ib=k("HardHatIcon",[["path",{d:"M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v2z",key:"1dej2m"}],["path",{d:"M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5",key:"1p9q5i"}],["path",{d:"M4 15v-3a6 6 0 0 1 6-6h0",key:"1uc279"}],["path",{d:"M14 6h0a6 6 0 0 1 6 6v3",key:"1j9mnm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lb=k("HashIcon",[["line",{x1:"4",x2:"20",y1:"9",y2:"9",key:"4lhtct"}],["line",{x1:"4",x2:"20",y1:"15",y2:"15",key:"vyu0kd"}],["line",{x1:"10",x2:"8",y1:"3",y2:"21",key:"1ggp8o"}],["line",{x1:"16",x2:"14",y1:"3",y2:"21",key:"weycgp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $b=k("HazeIcon",[["path",{d:"m5.2 6.2 1.4 1.4",key:"17imol"}],["path",{d:"M2 13h2",key:"13gyu8"}],["path",{d:"M20 13h2",key:"16rner"}],["path",{d:"m17.4 7.6 1.4-1.4",key:"t4xlah"}],["path",{d:"M22 17H2",key:"1gtaj3"}],["path",{d:"M22 21H2",key:"1gy6en"}],["path",{d:"M16 13a4 4 0 0 0-8 0",key:"1dyczq"}],["path",{d:"M12 5V2.5",key:"1vytko"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ab=k("HdmiPortIcon",[["path",{d:"M22 9a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h1l2 2h12l2-2h1a1 1 0 0 0 1-1Z",key:"2128wb"}],["path",{d:"M7.5 12h9",key:"1t0ckc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Eb=k("Heading1Icon",[["path",{d:"M4 12h8",key:"17cfdx"}],["path",{d:"M4 18V6",key:"1rz3zl"}],["path",{d:"M12 18V6",key:"zqpxq5"}],["path",{d:"m17 12 3-2v8",key:"1hhhft"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tb=k("Heading2Icon",[["path",{d:"M4 12h8",key:"17cfdx"}],["path",{d:"M4 18V6",key:"1rz3zl"}],["path",{d:"M12 18V6",key:"zqpxq5"}],["path",{d:"M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1",key:"9jr5yi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pb=k("Heading3Icon",[["path",{d:"M4 12h8",key:"17cfdx"}],["path",{d:"M4 18V6",key:"1rz3zl"}],["path",{d:"M12 18V6",key:"zqpxq5"}],["path",{d:"M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2",key:"68ncm8"}],["path",{d:"M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2",key:"1ejuhz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Db=k("Heading4Icon",[["path",{d:"M4 12h8",key:"17cfdx"}],["path",{d:"M4 18V6",key:"1rz3zl"}],["path",{d:"M12 18V6",key:"zqpxq5"}],["path",{d:"M17 10v4h4",key:"13sv97"}],["path",{d:"M21 10v8",key:"1kdml4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rb=k("Heading5Icon",[["path",{d:"M4 12h8",key:"17cfdx"}],["path",{d:"M4 18V6",key:"1rz3zl"}],["path",{d:"M12 18V6",key:"zqpxq5"}],["path",{d:"M17 13v-3h4",key:"1nvgqp"}],["path",{d:"M17 17.7c.4.2.8.3 1.3.3 1.5 0 2.7-1.1 2.7-2.5S19.8 13 18.3 13H17",key:"2nebdn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ob=k("Heading6Icon",[["path",{d:"M4 12h8",key:"17cfdx"}],["path",{d:"M4 18V6",key:"1rz3zl"}],["path",{d:"M12 18V6",key:"zqpxq5"}],["circle",{cx:"19",cy:"16",r:"2",key:"15mx69"}],["path",{d:"M20 10c-2 2-3 3.5-3 6",key:"f35dl0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vb=k("HeadingIcon",[["path",{d:"M6 12h12",key:"8npq4p"}],["path",{d:"M6 20V4",key:"1w1bmo"}],["path",{d:"M18 20V4",key:"o2hl4u"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ub=k("HeadphonesIcon",[["path",{d:"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3",key:"1xhozi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fb=k("HeartCrackIcon",[["path",{d:"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z",key:"c3ymky"}],["path",{d:"m12 13-1-1 2-2-3-3 2-2",key:"xjdxli"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jb=k("HeartHandshakeIcon",[["path",{d:"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z",key:"c3ymky"}],["path",{d:"M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08v0c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66",key:"12sd6o"}],["path",{d:"m18 15-2-2",key:"60u0ii"}],["path",{d:"m15 18-2-2",key:"6p76be"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hb=k("HeartOffIcon",[["line",{x1:"2",y1:"2",x2:"22",y2:"22",key:"1w4vcy"}],["path",{d:"M16.5 16.5 12 21l-7-7c-1.5-1.45-3-3.2-3-5.5a5.5 5.5 0 0 1 2.14-4.35",key:"3mpagl"}],["path",{d:"M8.76 3.1c1.15.22 2.13.78 3.24 1.9 1.5-1.5 2.74-2 4.5-2A5.5 5.5 0 0 1 22 8.5c0 2.12-1.3 3.78-2.67 5.17",key:"1gh3v3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nb=k("HeartPulseIcon",[["path",{d:"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z",key:"c3ymky"}],["path",{d:"M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27",key:"1uw2ng"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zb=k("HeartIcon",[["path",{d:"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z",key:"c3ymky"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bb=k("HelpCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3",key:"1u773s"}],["path",{d:"M12 17h.01",key:"p32p05"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qb=k("HelpingHandIcon",[["path",{d:"m3 15 5.12-5.12A3 3 0 0 1 10.24 9H13a2 2 0 1 1 0 4h-2.5m4-.68 4.17-4.89a1.88 1.88 0 0 1 2.92 2.36l-4.2 5.94A3 3 0 0 1 14.96 17H9.83a2 2 0 0 0-1.42.59L7 19",key:"nitrv7"}],["path",{d:"m2 14 6 6",key:"g6j1uo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wb=k("HexagonIcon",[["path",{d:"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z",key:"yt0hxn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gb=k("HighlighterIcon",[["path",{d:"m9 11-6 6v3h9l3-3",key:"1a3l36"}],["path",{d:"m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4",key:"14a9rk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zb=k("HistoryIcon",[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}],["path",{d:"M12 7v5l4 2",key:"1fdv2h"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kb=k("HomeIcon",[["path",{d:"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",key:"y5dka4"}],["polyline",{points:"9 22 9 12 15 12 15 22",key:"e2us08"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xb=k("HopOffIcon",[["path",{d:"M17.5 5.5C19 7 20.5 9 21 11c-1.323.265-2.646.39-4.118.226",key:"10j95a"}],["path",{d:"M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5",key:"1mqyjd"}],["path",{d:"M17.5 17.5c-2.5 0-4 0-6-1",key:"11elt5"}],["path",{d:"M20 11.5c1 1.5 2 3.5 2 4.5",key:"13ezvz"}],["path",{d:"M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5",key:"1ufrz1"}],["path",{d:"M22 22c-2 0-3.5-.5-5.5-1.5",key:"1n8vbj"}],["path",{d:"M4.783 4.782C1.073 8.492 1 14.5 5 18c1-1 2-4.5 1.5-6.5 1.5 1 4 1 5.5.5M8.227 2.57C11.578 1.335 15.453 2.089 18 5c-.88.88-3.7 1.761-5.726 1.618",key:"1h85u8"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yb=k("HopIcon",[["path",{d:"M17.5 5.5C19 7 20.5 9 21 11c-2.5.5-5 .5-8.5-1",key:"l0z2za"}],["path",{d:"M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5",key:"1mqyjd"}],["path",{d:"M16.5 11.5c1 2 1 3.5 1 6-2.5 0-4 0-6-1",key:"10xoad"}],["path",{d:"M20 11.5c1 1.5 2 3.5 2 4.5-1.5.5-3 0-4.5-.5",key:"1a4gpx"}],["path",{d:"M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5",key:"1ufrz1"}],["path",{d:"M20.5 16.5c1 2 1.5 3.5 1.5 5.5-2 0-3.5-.5-5.5-1.5",key:"1ok5d2"}],["path",{d:"M4.783 4.782C8.493 1.072 14.5 1 18 5c-1 1-4.5 2-6.5 1.5 1 1.5 1 4 .5 5.5-1.5.5-4 .5-5.5-.5C7 13.5 6 17 5 18c-4-3.5-3.927-9.508-.217-13.218Z",key:"8hlroy"}],["path",{d:"M4.5 4.5 3 3c-.184-.185-.184-.816 0-1",key:"q3aj97"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qb=k("HotelIcon",[["path",{d:"M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z",key:"p9z69c"}],["path",{d:"m9 16 .348-.24c1.465-1.013 3.84-1.013 5.304 0L15 16",key:"1bvcvh"}],["path",{d:"M8 7h.01",key:"1vti4s"}],["path",{d:"M16 7h.01",key:"1kdx03"}],["path",{d:"M12 7h.01",key:"1ivr5q"}],["path",{d:"M12 11h.01",key:"z322tv"}],["path",{d:"M16 11h.01",key:"xkw8gn"}],["path",{d:"M8 11h.01",key:"1dfujw"}],["path",{d:"M10 22v-6.5m4 0V22",key:"16gs4s"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jb=k("HourglassIcon",[["path",{d:"M5 22h14",key:"ehvnwv"}],["path",{d:"M5 2h14",key:"pdyrp9"}],["path",{d:"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22",key:"1d314k"}],["path",{d:"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2",key:"1vvvr6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ew=k("IceCream2Icon",[["path",{d:"M12 17c5 0 8-2.69 8-6H4c0 3.31 3 6 8 6Zm-4 4h8m-4-3v3M5.14 11a3.5 3.5 0 1 1 6.71 0",key:"g86ewz"}],["path",{d:"M12.14 11a3.5 3.5 0 1 1 6.71 0",key:"4k3m1s"}],["path",{d:"M15.5 6.5a3.5 3.5 0 1 0-7 0",key:"zmuahr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tw=k("IceCreamIcon",[["path",{d:"m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11",key:"1v6356"}],["path",{d:"M17 7A5 5 0 0 0 7 7",key:"151p3v"}],["path",{d:"M17 7a2 2 0 0 1 0 4H7a2 2 0 0 1 0-4",key:"1sdaij"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const aw=k("ImageDownIcon",[["circle",{cx:"9",cy:"9",r:"2",key:"af1f0g"}],["path",{d:"M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10.8",key:"sqts6f"}],["path",{d:"m21 15-3.1-3.1a2 2 0 0 0-2.814.014L6 21",key:"1h47z9"}],["path",{d:"m14 19.5 3 3v-6",key:"1x9jmo"}],["path",{d:"m17 22.5 3-3",key:"xzuz0n"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nw=k("ImageMinusIcon",[["path",{d:"M21 9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7",key:"m87ecr"}],["line",{x1:"16",x2:"22",y1:"5",y2:"5",key:"ez7e4s"}],["circle",{cx:"9",cy:"9",r:"2",key:"af1f0g"}],["path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",key:"1xmnt7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sw=k("ImageOffIcon",[["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}],["path",{d:"M10.41 10.41a2 2 0 1 1-2.83-2.83",key:"1bzlo9"}],["line",{x1:"13.5",x2:"6",y1:"13.5",y2:"21",key:"1q0aeu"}],["line",{x1:"18",x2:"21",y1:"12",y2:"15",key:"5mozeu"}],["path",{d:"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59",key:"mmje98"}],["path",{d:"M21 15V5a2 2 0 0 0-2-2H9",key:"43el77"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ow=k("ImagePlusIcon",[["path",{d:"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7",key:"31hg93"}],["line",{x1:"16",x2:"22",y1:"5",y2:"5",key:"ez7e4s"}],["line",{x1:"19",x2:"19",y1:"2",y2:"8",key:"1gkr8c"}],["circle",{cx:"9",cy:"9",r:"2",key:"af1f0g"}],["path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",key:"1xmnt7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rw=k("ImageIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["circle",{cx:"9",cy:"9",r:"2",key:"af1f0g"}],["path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",key:"1xmnt7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const iw=k("ImportIcon",[["path",{d:"M12 3v12",key:"1x0j5s"}],["path",{d:"m8 11 4 4 4-4",key:"1dohi6"}],["path",{d:"M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4",key:"1ywtjm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lw=k("InboxIcon",[["polyline",{points:"22 12 16 12 14 15 10 15 8 12 2 12",key:"o97t9d"}],["path",{d:"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",key:"oot6mr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cw=k("IndentIcon",[["polyline",{points:"3 8 7 12 3 16",key:"f3rxhf"}],["line",{x1:"21",x2:"11",y1:"12",y2:"12",key:"1fxxak"}],["line",{x1:"21",x2:"11",y1:"6",y2:"6",key:"asgu94"}],["line",{x1:"21",x2:"11",y1:"18",y2:"18",key:"13dsj7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dw=k("IndianRupeeIcon",[["path",{d:"M6 3h12",key:"ggurg9"}],["path",{d:"M6 8h12",key:"6g4wlu"}],["path",{d:"m6 13 8.5 8",key:"u1kupk"}],["path",{d:"M6 13h3",key:"wdp6ag"}],["path",{d:"M9 13c6.667 0 6.667-10 0-10",key:"1nkvk2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uw=k("InfinityIcon",[["path",{d:"M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.33-6 4Z",key:"1z0uae"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pw=k("InfoIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 16v-4",key:"1dtifu"}],["path",{d:"M12 8h.01",key:"e9boi3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hw=k("InspectionPanelIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M7 7h.01",key:"7u93v4"}],["path",{d:"M17 7h.01",key:"14a9sn"}],["path",{d:"M7 17h.01",key:"19xn7k"}],["path",{d:"M17 17h.01",key:"1sd3ek"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fw=k("InstagramIcon",[["rect",{width:"20",height:"20",x:"2",y:"2",rx:"5",ry:"5",key:"2e1cvw"}],["path",{d:"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z",key:"9exkf1"}],["line",{x1:"17.5",x2:"17.51",y1:"6.5",y2:"6.5",key:"r4j83e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mw=k("ItalicIcon",[["line",{x1:"19",x2:"10",y1:"4",y2:"4",key:"15jd3p"}],["line",{x1:"14",x2:"5",y1:"20",y2:"20",key:"bu0au3"}],["line",{x1:"15",x2:"9",y1:"4",y2:"20",key:"uljnxc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vw=k("IterationCcwIcon",[["path",{d:"M20 10c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8h8",key:"4znkd0"}],["polyline",{points:"16 14 20 18 16 22",key:"11njsm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yw=k("IterationCwIcon",[["path",{d:"M4 10c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8H4",key:"tuf4su"}],["polyline",{points:"8 22 4 18 8 14",key:"evkj9s"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _w=k("JapaneseYenIcon",[["path",{d:"M12 9.5V21m0-11.5L6 3m6 6.5L18 3",key:"2ej80x"}],["path",{d:"M6 15h12",key:"1hwgt5"}],["path",{d:"M6 11h12",key:"wf4gp6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gw=k("JoystickIcon",[["path",{d:"M21 17a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2Z",key:"jg2n2t"}],["path",{d:"M6 15v-2",key:"gd6mvg"}],["path",{d:"M12 15V9",key:"8c7uyn"}],["circle",{cx:"12",cy:"6",r:"3",key:"1gm2ql"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bi=k("KanbanSquareDashedIcon",[["path",{d:"M8 7v7",key:"1x2jlm"}],["path",{d:"M12 7v4",key:"xawao1"}],["path",{d:"M16 7v9",key:"1hp2iy"}],["path",{d:"M5 3a2 2 0 0 0-2 2",key:"y57alp"}],["path",{d:"M9 3h1",key:"1yesri"}],["path",{d:"M14 3h1",key:"1ec4yj"}],["path",{d:"M19 3a2 2 0 0 1 2 2",key:"18rm91"}],["path",{d:"M21 9v1",key:"mxsmne"}],["path",{d:"M21 14v1",key:"169vum"}],["path",{d:"M21 19a2 2 0 0 1-2 2",key:"1j7049"}],["path",{d:"M14 21h1",key:"v9vybs"}],["path",{d:"M9 21h1",key:"15o7lz"}],["path",{d:"M5 21a2 2 0 0 1-2-2",key:"sbafld"}],["path",{d:"M3 14v1",key:"vnatye"}],["path",{d:"M3 9v1",key:"1r0deq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qi=k("KanbanSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 7v7",key:"1x2jlm"}],["path",{d:"M12 7v4",key:"xawao1"}],["path",{d:"M16 7v9",key:"1hp2iy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kw=k("KanbanIcon",[["path",{d:"M6 5v11",key:"mdvv1e"}],["path",{d:"M12 5v6",key:"14ar3b"}],["path",{d:"M18 5v14",key:"7ji314"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bw=k("KeyRoundIcon",[["path",{d:"M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z",key:"167ctg"}],["circle",{cx:"16.5",cy:"7.5",r:".5",key:"1kog09"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ww=k("KeySquareIcon",[["path",{d:"M12.4 2.7c.9-.9 2.5-.9 3.4 0l5.5 5.5c.9.9.9 2.5 0 3.4l-3.7 3.7c-.9.9-2.5.9-3.4 0L8.7 9.8c-.9-.9-.9-2.5 0-3.4Z",key:"9li5bk"}],["path",{d:"m14 7 3 3",key:"1r5n42"}],["path",{d:"M9.4 10.6 2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4",key:"1ym3zm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xw=k("KeyIcon",[["circle",{cx:"7.5",cy:"15.5",r:"5.5",key:"yqb3hr"}],["path",{d:"m21 2-9.6 9.6",key:"1j0ho8"}],["path",{d:"m15.5 7.5 3 3L22 7l-3-3",key:"1rn1fs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mw=k("KeyboardMusicIcon",[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",key:"18n3k1"}],["path",{d:"M6 8h4",key:"utf9t1"}],["path",{d:"M14 8h.01",key:"1primd"}],["path",{d:"M18 8h.01",key:"emo2bl"}],["path",{d:"M2 12h20",key:"9i4pu4"}],["path",{d:"M6 12v4",key:"dy92yo"}],["path",{d:"M10 12v4",key:"1fxnav"}],["path",{d:"M14 12v4",key:"1hft58"}],["path",{d:"M18 12v4",key:"tjjnbz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cw=k("KeyboardIcon",[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",ry:"2",key:"15u882"}],["path",{d:"M6 8h.001",key:"1ej0i3"}],["path",{d:"M10 8h.001",key:"1x2st2"}],["path",{d:"M14 8h.001",key:"1vkmyp"}],["path",{d:"M18 8h.001",key:"kfsenl"}],["path",{d:"M8 12h.001",key:"1sjpby"}],["path",{d:"M12 12h.001",key:"al75ts"}],["path",{d:"M16 12h.001",key:"931bgk"}],["path",{d:"M7 16h10",key:"wp8him"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sw=k("LampCeilingIcon",[["path",{d:"M12 2v5",key:"nd4vlx"}],["path",{d:"M6 7h12l4 9H2l4-9Z",key:"123d64"}],["path",{d:"M9.17 16a3 3 0 1 0 5.66 0",key:"1061mw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Iw=k("LampDeskIcon",[["path",{d:"m14 5-3 3 2 7 8-8-7-2Z",key:"1b0msb"}],["path",{d:"m14 5-3 3-3-3 3-3 3 3Z",key:"1uemms"}],["path",{d:"M9.5 6.5 4 12l3 6",key:"1bx08v"}],["path",{d:"M3 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H3Z",key:"wap775"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lw=k("LampFloorIcon",[["path",{d:"M9 2h6l3 7H6l3-7Z",key:"wcx6mj"}],["path",{d:"M12 9v13",key:"3n1su1"}],["path",{d:"M9 22h6",key:"1rlq3v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $w=k("LampWallDownIcon",[["path",{d:"M11 13h6l3 7H8l3-7Z",key:"9n3qlo"}],["path",{d:"M14 13V8a2 2 0 0 0-2-2H8",key:"1hu4hb"}],["path",{d:"M4 9h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4v6Z",key:"s053bc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Aw=k("LampWallUpIcon",[["path",{d:"M11 4h6l3 7H8l3-7Z",key:"11x1ee"}],["path",{d:"M14 11v5a2 2 0 0 1-2 2H8",key:"eutp5o"}],["path",{d:"M4 15h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4v-6Z",key:"1iuthr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ew=k("LampIcon",[["path",{d:"M8 2h8l4 10H4L8 2Z",key:"9dma5w"}],["path",{d:"M12 12v6",key:"3ahymv"}],["path",{d:"M8 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H8Z",key:"mwf4oh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tw=k("LandPlotIcon",[["path",{d:"m12 8 6-3-6-3v10",key:"mvpnpy"}],["path",{d:"m8 11.99-5.5 3.14a1 1 0 0 0 0 1.74l8.5 4.86a2 2 0 0 0 2 0l8.5-4.86a1 1 0 0 0 0-1.74L16 12",key:"ek95tt"}],["path",{d:"m6.49 12.85 11.02 6.3",key:"1kt42w"}],["path",{d:"M17.51 12.85 6.5 19.15",key:"v55bdg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Pw=k("LandmarkIcon",[["line",{x1:"3",x2:"21",y1:"22",y2:"22",key:"j8o0r"}],["line",{x1:"6",x2:"6",y1:"18",y2:"11",key:"10tf0k"}],["line",{x1:"10",x2:"10",y1:"18",y2:"11",key:"54lgf6"}],["line",{x1:"14",x2:"14",y1:"18",y2:"11",key:"380y"}],["line",{x1:"18",x2:"18",y1:"18",y2:"11",key:"1kevvc"}],["polygon",{points:"12 2 20 7 4 7",key:"jkujk7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dw=k("LanguagesIcon",[["path",{d:"m5 8 6 6",key:"1wu5hv"}],["path",{d:"m4 14 6-6 2-3",key:"1k1g8d"}],["path",{d:"M2 5h12",key:"or177f"}],["path",{d:"M7 2h1",key:"1t2jsx"}],["path",{d:"m22 22-5-10-5 10",key:"don7ne"}],["path",{d:"M14 18h6",key:"1m8k6r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rw=k("Laptop2Icon",[["rect",{width:"18",height:"12",x:"3",y:"4",rx:"2",ry:"2",key:"1qhy41"}],["line",{x1:"2",x2:"22",y1:"20",y2:"20",key:"ni3hll"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ow=k("LaptopIcon",[["path",{d:"M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16",key:"tarvll"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vw=k("LassoSelectIcon",[["path",{d:"M7 22a5 5 0 0 1-2-4",key:"umushi"}],["path",{d:"M7 16.93c.96.43 1.96.74 2.99.91",key:"ybbtv3"}],["path",{d:"M3.34 14A6.8 6.8 0 0 1 2 10c0-4.42 4.48-8 10-8s10 3.58 10 8a7.19 7.19 0 0 1-.33 2",key:"gt5e1w"}],["path",{d:"M5 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",key:"bq3ynw"}],["path",{d:"M14.33 22h-.09a.35.35 0 0 1-.24-.32v-10a.34.34 0 0 1 .33-.34c.08 0 .15.03.21.08l7.34 6a.33.33 0 0 1-.21.59h-4.49l-2.57 3.85a.35.35 0 0 1-.28.14v0z",key:"1bawls"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Uw=k("LassoIcon",[["path",{d:"M7 22a5 5 0 0 1-2-4",key:"umushi"}],["path",{d:"M3.3 14A6.8 6.8 0 0 1 2 10c0-4.4 4.5-8 10-8s10 3.6 10 8-4.5 8-10 8a12 12 0 0 1-5-1",key:"146dds"}],["path",{d:"M5 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",key:"bq3ynw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fw=k("LaughIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M18 13a6 6 0 0 1-6 5 6 6 0 0 1-6-5h12Z",key:"b2q4dd"}],["line",{x1:"9",x2:"9.01",y1:"9",y2:"9",key:"yxxnd0"}],["line",{x1:"15",x2:"15.01",y1:"9",y2:"9",key:"1p4y9e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jw=k("Layers2Icon",[["path",{d:"m16.02 12 5.48 3.13a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74L7.98 12",key:"1cuww1"}],["path",{d:"M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74Z",key:"pdlvxu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hw=k("Layers3Icon",[["path",{d:"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z",key:"8b97xw"}],["path",{d:"m6.08 9.5-3.5 1.6a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59",key:"1e5n1m"}],["path",{d:"m6.08 14.5-3.5 1.6a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59",key:"1iwflc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nw=k("LayersIcon",[["path",{d:"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z",key:"8b97xw"}],["path",{d:"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65",key:"dd6zsq"}],["path",{d:"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65",key:"ep9fru"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zw=k("LayoutDashboardIcon",[["rect",{width:"7",height:"9",x:"3",y:"3",rx:"1",key:"10lvy0"}],["rect",{width:"7",height:"5",x:"14",y:"3",rx:"1",key:"16une8"}],["rect",{width:"7",height:"9",x:"14",y:"12",rx:"1",key:"1hutg5"}],["rect",{width:"7",height:"5",x:"3",y:"16",rx:"1",key:"ldoo1y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bw=k("LayoutGridIcon",[["rect",{width:"7",height:"7",x:"3",y:"3",rx:"1",key:"1g98yp"}],["rect",{width:"7",height:"7",x:"14",y:"3",rx:"1",key:"6d4xhi"}],["rect",{width:"7",height:"7",x:"14",y:"14",rx:"1",key:"nxv5o0"}],["rect",{width:"7",height:"7",x:"3",y:"14",rx:"1",key:"1bb6yr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qw=k("LayoutListIcon",[["rect",{width:"7",height:"7",x:"3",y:"3",rx:"1",key:"1g98yp"}],["rect",{width:"7",height:"7",x:"3",y:"14",rx:"1",key:"1bb6yr"}],["path",{d:"M14 4h7",key:"3xa0d5"}],["path",{d:"M14 9h7",key:"1icrd9"}],["path",{d:"M14 15h7",key:"1mj8o2"}],["path",{d:"M14 20h7",key:"11slyb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ww=k("LayoutPanelLeftIcon",[["rect",{width:"7",height:"18",x:"3",y:"3",rx:"1",key:"2obqm"}],["rect",{width:"7",height:"7",x:"14",y:"3",rx:"1",key:"6d4xhi"}],["rect",{width:"7",height:"7",x:"14",y:"14",rx:"1",key:"nxv5o0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gw=k("LayoutPanelTopIcon",[["rect",{width:"18",height:"7",x:"3",y:"3",rx:"1",key:"f1a2em"}],["rect",{width:"7",height:"7",x:"3",y:"14",rx:"1",key:"1bb6yr"}],["rect",{width:"7",height:"7",x:"14",y:"14",rx:"1",key:"nxv5o0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zw=k("LayoutTemplateIcon",[["rect",{width:"18",height:"7",x:"3",y:"3",rx:"1",key:"f1a2em"}],["rect",{width:"9",height:"7",x:"3",y:"14",rx:"1",key:"jqznyg"}],["rect",{width:"5",height:"7",x:"16",y:"14",rx:"1",key:"q5h2i8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kw=k("LeafIcon",[["path",{d:"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z",key:"nnexq3"}],["path",{d:"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12",key:"mt58a7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xw=k("LeafyGreenIcon",[["path",{d:"M2 22c1.25-.987 2.27-1.975 3.9-2.2a5.56 5.56 0 0 1 3.8 1.5 4 4 0 0 0 6.187-2.353 3.5 3.5 0 0 0 3.69-5.116A3.5 3.5 0 0 0 20.95 8 3.5 3.5 0 1 0 16 3.05a3.5 3.5 0 0 0-5.831 1.373 3.5 3.5 0 0 0-5.116 3.69 4 4 0 0 0-2.348 6.155C3.499 15.42 4.409 16.712 4.2 18.1 3.926 19.743 3.014 20.732 2 22",key:"1134nt"}],["path",{d:"M2 22 17 7",key:"1q7jp2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yw=k("LibraryBigIcon",[["rect",{width:"8",height:"18",x:"3",y:"3",rx:"1",key:"oynpb5"}],["path",{d:"M7 3v18",key:"bbkbws"}],["path",{d:"M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z",key:"1qboyk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qw=k("LibrarySquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M7 7v10",key:"d5nglc"}],["path",{d:"M11 7v10",key:"pptsnr"}],["path",{d:"m15 7 2 10",key:"1m7qm5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jw=k("LibraryIcon",[["path",{d:"m16 6 4 14",key:"ji33uf"}],["path",{d:"M12 6v14",key:"1n7gus"}],["path",{d:"M8 8v12",key:"1gg7y9"}],["path",{d:"M4 4v16",key:"6qkkli"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e4=k("LifeBuoyIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m4.93 4.93 4.24 4.24",key:"1ymg45"}],["path",{d:"m14.83 9.17 4.24-4.24",key:"1cb5xl"}],["path",{d:"m14.83 14.83 4.24 4.24",key:"q42g0n"}],["path",{d:"m9.17 14.83-4.24 4.24",key:"bqpfvv"}],["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t4=k("LigatureIcon",[["path",{d:"M8 20V8c0-2.2 1.8-4 4-4 1.5 0 2.8.8 3.5 2",key:"1rtphz"}],["path",{d:"M6 12h4",key:"a4o3ry"}],["path",{d:"M14 12h2v8",key:"c1fccl"}],["path",{d:"M6 20h4",key:"1i6q5t"}],["path",{d:"M14 20h4",key:"lzx1xo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a4=k("LightbulbOffIcon",[["path",{d:"M16.8 11.2c.8-.9 1.2-2 1.2-3.2a6 6 0 0 0-9.3-5",key:"1fkcox"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M6.3 6.3a4.67 4.67 0 0 0 1.2 5.2c.7.7 1.3 1.5 1.5 2.5",key:"10m8kw"}],["path",{d:"M9 18h6",key:"x1upvd"}],["path",{d:"M10 22h4",key:"ceow96"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n4=k("LightbulbIcon",[["path",{d:"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",key:"1gvzjb"}],["path",{d:"M9 18h6",key:"x1upvd"}],["path",{d:"M10 22h4",key:"ceow96"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s4=k("LineChartIcon",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["path",{d:"m19 9-5 5-4-4-3 3",key:"2osh9i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o4=k("Link2OffIcon",[["path",{d:"M9 17H7A5 5 0 0 1 7 7",key:"10o201"}],["path",{d:"M15 7h2a5 5 0 0 1 4 8",key:"1d3206"}],["line",{x1:"8",x2:"12",y1:"12",y2:"12",key:"rvw6j4"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r4=k("Link2Icon",[["path",{d:"M9 17H7A5 5 0 0 1 7 7h2",key:"8i5ue5"}],["path",{d:"M15 7h2a5 5 0 1 1 0 10h-2",key:"1b9ql8"}],["line",{x1:"8",x2:"16",y1:"12",y2:"12",key:"1jonct"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i4=k("LinkIcon",[["path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",key:"1cjeqo"}],["path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",key:"19qd67"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l4=k("LinkedinIcon",[["path",{d:"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z",key:"c2jq9f"}],["rect",{width:"4",height:"12",x:"2",y:"9",key:"mk3on5"}],["circle",{cx:"4",cy:"4",r:"2",key:"bt5ra8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c4=k("ListChecksIcon",[["path",{d:"m3 17 2 2 4-4",key:"1jhpwq"}],["path",{d:"m3 7 2 2 4-4",key:"1obspn"}],["path",{d:"M13 6h8",key:"15sg57"}],["path",{d:"M13 12h8",key:"h98zly"}],["path",{d:"M13 18h8",key:"oe0vm4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d4=k("ListEndIcon",[["path",{d:"M16 12H3",key:"1a2rj7"}],["path",{d:"M16 6H3",key:"1wxfjs"}],["path",{d:"M10 18H3",key:"13769t"}],["path",{d:"M21 6v10a2 2 0 0 1-2 2h-5",key:"ilrcs8"}],["path",{d:"m16 16-2 2 2 2",key:"kkc6pm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u4=k("ListFilterIcon",[["path",{d:"M3 6h18",key:"d0wm0j"}],["path",{d:"M7 12h10",key:"b7w52i"}],["path",{d:"M10 18h4",key:"1ulq68"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p4=k("ListMinusIcon",[["path",{d:"M11 12H3",key:"51ecnj"}],["path",{d:"M16 6H3",key:"1wxfjs"}],["path",{d:"M16 18H3",key:"12xzn7"}],["path",{d:"M21 12h-6",key:"bt1uis"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h4=k("ListMusicIcon",[["path",{d:"M21 15V6",key:"h1cx4g"}],["path",{d:"M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",key:"8saifv"}],["path",{d:"M12 12H3",key:"18klou"}],["path",{d:"M16 6H3",key:"1wxfjs"}],["path",{d:"M12 18H3",key:"11ftsu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f4=k("ListOrderedIcon",[["line",{x1:"10",x2:"21",y1:"6",y2:"6",key:"76qw6h"}],["line",{x1:"10",x2:"21",y1:"12",y2:"12",key:"16nom4"}],["line",{x1:"10",x2:"21",y1:"18",y2:"18",key:"u3jurt"}],["path",{d:"M4 6h1v4",key:"cnovpq"}],["path",{d:"M4 10h2",key:"16xx2s"}],["path",{d:"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1",key:"m9a95d"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m4=k("ListPlusIcon",[["path",{d:"M11 12H3",key:"51ecnj"}],["path",{d:"M16 6H3",key:"1wxfjs"}],["path",{d:"M16 18H3",key:"12xzn7"}],["path",{d:"M18 9v6",key:"1twb98"}],["path",{d:"M21 12h-6",key:"bt1uis"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v4=k("ListRestartIcon",[["path",{d:"M21 6H3",key:"1jwq7v"}],["path",{d:"M7 12H3",key:"13ou7f"}],["path",{d:"M7 18H3",key:"1sijw9"}],["path",{d:"M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14",key:"qth677"}],["path",{d:"M11 10v4h4",key:"172dkj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y4=k("ListStartIcon",[["path",{d:"M16 12H3",key:"1a2rj7"}],["path",{d:"M16 18H3",key:"12xzn7"}],["path",{d:"M10 6H3",key:"lf8lx7"}],["path",{d:"M21 18V8a2 2 0 0 0-2-2h-5",key:"1hghli"}],["path",{d:"m16 8-2-2 2-2",key:"160uvd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _4=k("ListTodoIcon",[["rect",{x:"3",y:"5",width:"6",height:"6",rx:"1",key:"1defrl"}],["path",{d:"m3 17 2 2 4-4",key:"1jhpwq"}],["path",{d:"M13 6h8",key:"15sg57"}],["path",{d:"M13 12h8",key:"h98zly"}],["path",{d:"M13 18h8",key:"oe0vm4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g4=k("ListTreeIcon",[["path",{d:"M21 12h-8",key:"1bmf0i"}],["path",{d:"M21 6H8",key:"1pqkrb"}],["path",{d:"M21 18h-8",key:"1tm79t"}],["path",{d:"M3 6v4c0 1.1.9 2 2 2h3",key:"1ywdgy"}],["path",{d:"M3 10v6c0 1.1.9 2 2 2h3",key:"2wc746"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k4=k("ListVideoIcon",[["path",{d:"M12 12H3",key:"18klou"}],["path",{d:"M16 6H3",key:"1wxfjs"}],["path",{d:"M12 18H3",key:"11ftsu"}],["path",{d:"m16 12 5 3-5 3v-6Z",key:"zpskkp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b4=k("ListXIcon",[["path",{d:"M11 12H3",key:"51ecnj"}],["path",{d:"M16 6H3",key:"1wxfjs"}],["path",{d:"M16 18H3",key:"12xzn7"}],["path",{d:"m19 10-4 4",key:"1tz659"}],["path",{d:"m15 10 4 4",key:"1n7nei"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w4=k("ListIcon",[["line",{x1:"8",x2:"21",y1:"6",y2:"6",key:"7ey8pc"}],["line",{x1:"8",x2:"21",y1:"12",y2:"12",key:"rjfblc"}],["line",{x1:"8",x2:"21",y1:"18",y2:"18",key:"c3b1m8"}],["line",{x1:"3",x2:"3.01",y1:"6",y2:"6",key:"1g7gq3"}],["line",{x1:"3",x2:"3.01",y1:"12",y2:"12",key:"1pjlvk"}],["line",{x1:"3",x2:"3.01",y1:"18",y2:"18",key:"28t2mc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x4=k("Loader2Icon",[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M4=k("LoaderIcon",[["line",{x1:"12",x2:"12",y1:"2",y2:"6",key:"gza1u7"}],["line",{x1:"12",x2:"12",y1:"18",y2:"22",key:"1qhbu9"}],["line",{x1:"4.93",x2:"7.76",y1:"4.93",y2:"7.76",key:"xae44r"}],["line",{x1:"16.24",x2:"19.07",y1:"16.24",y2:"19.07",key:"bxnmvf"}],["line",{x1:"2",x2:"6",y1:"12",y2:"12",key:"89khin"}],["line",{x1:"18",x2:"22",y1:"12",y2:"12",key:"pb8tfm"}],["line",{x1:"4.93",x2:"7.76",y1:"19.07",y2:"16.24",key:"1uxjnu"}],["line",{x1:"16.24",x2:"19.07",y1:"7.76",y2:"4.93",key:"6duxfx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C4=k("LocateFixedIcon",[["line",{x1:"2",x2:"5",y1:"12",y2:"12",key:"bvdh0s"}],["line",{x1:"19",x2:"22",y1:"12",y2:"12",key:"1tbv5k"}],["line",{x1:"12",x2:"12",y1:"2",y2:"5",key:"11lu5j"}],["line",{x1:"12",x2:"12",y1:"19",y2:"22",key:"x3vr5v"}],["circle",{cx:"12",cy:"12",r:"7",key:"fim9np"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S4=k("LocateOffIcon",[["line",{x1:"2",x2:"5",y1:"12",y2:"12",key:"bvdh0s"}],["line",{x1:"19",x2:"22",y1:"12",y2:"12",key:"1tbv5k"}],["line",{x1:"12",x2:"12",y1:"2",y2:"5",key:"11lu5j"}],["line",{x1:"12",x2:"12",y1:"19",y2:"22",key:"x3vr5v"}],["path",{d:"M7.11 7.11C5.83 8.39 5 10.1 5 12c0 3.87 3.13 7 7 7 1.9 0 3.61-.83 4.89-2.11",key:"1oh7ia"}],["path",{d:"M18.71 13.96c.19-.63.29-1.29.29-1.96 0-3.87-3.13-7-7-7-.67 0-1.33.1-1.96.29",key:"3qdecy"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I4=k("LocateIcon",[["line",{x1:"2",x2:"5",y1:"12",y2:"12",key:"bvdh0s"}],["line",{x1:"19",x2:"22",y1:"12",y2:"12",key:"1tbv5k"}],["line",{x1:"12",x2:"12",y1:"2",y2:"5",key:"11lu5j"}],["line",{x1:"12",x2:"12",y1:"19",y2:"22",key:"x3vr5v"}],["circle",{cx:"12",cy:"12",r:"7",key:"fim9np"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L4=k("LockKeyholeIcon",[["circle",{cx:"12",cy:"16",r:"1",key:"1au0dj"}],["rect",{x:"3",y:"10",width:"18",height:"12",rx:"2",key:"6s8ecr"}],["path",{d:"M7 10V7a5 5 0 0 1 10 0v3",key:"1pqi11"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $4=k("LockIcon",[["rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2",key:"1w4ew1"}],["path",{d:"M7 11V7a5 5 0 0 1 10 0v4",key:"fwvmzm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A4=k("LogInIcon",[["path",{d:"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4",key:"u53s6r"}],["polyline",{points:"10 17 15 12 10 7",key:"1ail0h"}],["line",{x1:"15",x2:"3",y1:"12",y2:"12",key:"v6grx8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E4=k("LogOutIcon",[["path",{d:"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4",key:"1uf3rs"}],["polyline",{points:"16 17 21 12 16 7",key:"1gabdz"}],["line",{x1:"21",x2:"9",y1:"12",y2:"12",key:"1uyos4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T4=k("LollipopIcon",[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}],["path",{d:"M11 11a2 2 0 0 0 4 0 4 4 0 0 0-8 0 6 6 0 0 0 12 0",key:"107gwy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P4=k("LuggageIcon",[["path",{d:"M6 20h0a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h0",key:"1h5fkc"}],["path",{d:"M8 18V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14",key:"1l99gc"}],["path",{d:"M10 20h4",key:"ni2waw"}],["circle",{cx:"16",cy:"20",r:"2",key:"1vifvg"}],["circle",{cx:"8",cy:"20",r:"2",key:"ckkr5m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D4=k("MSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 16V8l4 4 4-4v8",key:"141u4e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R4=k("MagnetIcon",[["path",{d:"m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3L6 15",key:"1i3lhw"}],["path",{d:"m5 8 4 4",key:"j6kj7e"}],["path",{d:"m12 15 4 4",key:"lnac28"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O4=k("MailCheckIcon",[["path",{d:"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8",key:"12jkf8"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}],["path",{d:"m16 19 2 2 4-4",key:"1b14m6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V4=k("MailMinusIcon",[["path",{d:"M22 15V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8",key:"fuxbkv"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}],["path",{d:"M16 19h6",key:"xwg31i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U4=k("MailOpenIcon",[["path",{d:"M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z",key:"1jhwl8"}],["path",{d:"m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10",key:"1qfld7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F4=k("MailPlusIcon",[["path",{d:"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8",key:"12jkf8"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}],["path",{d:"M19 16v6",key:"tddt3s"}],["path",{d:"M16 19h6",key:"xwg31i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j4=k("MailQuestionIcon",[["path",{d:"M22 10.5V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12.5",key:"e61zoh"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}],["path",{d:"M18 15.28c.2-.4.5-.8.9-1a2.1 2.1 0 0 1 2.6.4c.3.4.5.8.5 1.3 0 1.3-2 2-2 2",key:"7z9rxb"}],["path",{d:"M20 22v.01",key:"12bgn6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H4=k("MailSearchIcon",[["path",{d:"M22 12.5V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h7.5",key:"w80f2v"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}],["path",{d:"M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6v0Z",key:"mgbru4"}],["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}],["path",{d:"m22 22-1.5-1.5",key:"1x83k4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N4=k("MailWarningIcon",[["path",{d:"M22 10.5V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12.5",key:"e61zoh"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}],["path",{d:"M20 14v4",key:"1hm744"}],["path",{d:"M20 22v.01",key:"12bgn6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z4=k("MailXIcon",[["path",{d:"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h9",key:"1j9vog"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}],["path",{d:"m17 17 4 4",key:"1b3523"}],["path",{d:"m21 17-4 4",key:"uinynz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B4=k("MailIcon",[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",key:"18n3k1"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q4=k("MailboxIcon",[["path",{d:"M22 17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9.5C2 7 4 5 6.5 5H18c2.2 0 4 1.8 4 4v8Z",key:"1lbycx"}],["polyline",{points:"15,9 18,9 18,11",key:"1pm9c0"}],["path",{d:"M6.5 5C9 5 11 7 11 9.5V17a2 2 0 0 1-2 2v0",key:"n6nfvi"}],["line",{x1:"6",x2:"7",y1:"10",y2:"10",key:"1e2scm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W4=k("MailsIcon",[["rect",{width:"16",height:"13",x:"6",y:"4",rx:"2",key:"1drq3f"}],["path",{d:"m22 7-7.1 3.78c-.57.3-1.23.3-1.8 0L6 7",key:"xn252p"}],["path",{d:"M2 8v11c0 1.1.9 2 2 2h14",key:"n13cji"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G4=k("MapPinOffIcon",[["path",{d:"M5.43 5.43A8.06 8.06 0 0 0 4 10c0 6 8 12 8 12a29.94 29.94 0 0 0 5-5",key:"12a8pk"}],["path",{d:"M19.18 13.52A8.66 8.66 0 0 0 20 10a8 8 0 0 0-8-8 7.88 7.88 0 0 0-3.52.82",key:"1r9f6y"}],["path",{d:"M9.13 9.13A2.78 2.78 0 0 0 9 10a3 3 0 0 0 3 3 2.78 2.78 0 0 0 .87-.13",key:"erynq7"}],["path",{d:"M14.9 9.25a3 3 0 0 0-2.15-2.16",key:"1hwwmx"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z4=k("MapPinIcon",[["path",{d:"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z",key:"2oe9fu"}],["circle",{cx:"12",cy:"10",r:"3",key:"ilqhr7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K4=k("MapPinnedIcon",[["path",{d:"M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0",key:"yrbn30"}],["circle",{cx:"12",cy:"8",r:"2",key:"1822b1"}],["path",{d:"M8.835 14H5a1 1 0 0 0-.9.7l-2 6c-.1.1-.1.2-.1.3 0 .6.4 1 1 1h18c.6 0 1-.4 1-1 0-.1 0-.2-.1-.3l-2-6a1 1 0 0 0-.9-.7h-3.835",key:"112zkj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X4=k("MapIcon",[["polygon",{points:"3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21",key:"ok2ie8"}],["line",{x1:"9",x2:"9",y1:"3",y2:"18",key:"w34qz5"}],["line",{x1:"15",x2:"15",y1:"6",y2:"21",key:"volv9a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y4=k("MartiniIcon",[["path",{d:"M8 22h8",key:"rmew8v"}],["path",{d:"M12 11v11",key:"ur9y6a"}],["path",{d:"m19 3-7 8-7-8Z",key:"1sgpiw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q4=k("Maximize2Icon",[["polyline",{points:"15 3 21 3 21 9",key:"mznyad"}],["polyline",{points:"9 21 3 21 3 15",key:"1avn1i"}],["line",{x1:"21",x2:"14",y1:"3",y2:"10",key:"ota7mn"}],["line",{x1:"3",x2:"10",y1:"21",y2:"14",key:"1atl0r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J4=k("MaximizeIcon",[["path",{d:"M8 3H5a2 2 0 0 0-2 2v3",key:"1dcmit"}],["path",{d:"M21 8V5a2 2 0 0 0-2-2h-3",key:"1e4gt3"}],["path",{d:"M3 16v3a2 2 0 0 0 2 2h3",key:"wsl5sc"}],["path",{d:"M16 21h3a2 2 0 0 0 2-2v-3",key:"18trek"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e5=k("MedalIcon",[["path",{d:"M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15",key:"143lza"}],["path",{d:"M11 12 5.12 2.2",key:"qhuxz6"}],["path",{d:"m13 12 5.88-9.8",key:"hbye0f"}],["path",{d:"M8 7h8",key:"i86dvs"}],["circle",{cx:"12",cy:"17",r:"5",key:"qbz8iq"}],["path",{d:"M12 18v-2h-.5",key:"fawc4q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t5=k("MegaphoneOffIcon",[["path",{d:"M9.26 9.26 3 11v3l14.14 3.14",key:"3429n"}],["path",{d:"M21 15.34V6l-7.31 2.03",key:"4o1dh8"}],["path",{d:"M11.6 16.8a3 3 0 1 1-5.8-1.6",key:"1yl0tm"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a5=k("MegaphoneIcon",[["path",{d:"m3 11 18-5v12L3 14v-3z",key:"n962bs"}],["path",{d:"M11.6 16.8a3 3 0 1 1-5.8-1.6",key:"1yl0tm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n5=k("MehIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"8",x2:"16",y1:"15",y2:"15",key:"1xb1d9"}],["line",{x1:"9",x2:"9.01",y1:"9",y2:"9",key:"yxxnd0"}],["line",{x1:"15",x2:"15.01",y1:"9",y2:"9",key:"1p4y9e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s5=k("MemoryStickIcon",[["path",{d:"M6 19v-3",key:"1nvgqn"}],["path",{d:"M10 19v-3",key:"iu8nkm"}],["path",{d:"M14 19v-3",key:"kcehxu"}],["path",{d:"M18 19v-3",key:"1vh91z"}],["path",{d:"M8 11V9",key:"63erz4"}],["path",{d:"M16 11V9",key:"fru6f3"}],["path",{d:"M12 11V9",key:"ha00sb"}],["path",{d:"M2 15h20",key:"16ne18"}],["path",{d:"M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z",key:"lhddv3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o5=k("MenuSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M7 8h10",key:"1jw688"}],["path",{d:"M7 12h10",key:"b7w52i"}],["path",{d:"M7 16h10",key:"wp8him"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r5=k("MenuIcon",[["line",{x1:"4",x2:"20",y1:"12",y2:"12",key:"1e0a9i"}],["line",{x1:"4",x2:"20",y1:"6",y2:"6",key:"1owob3"}],["line",{x1:"4",x2:"20",y1:"18",y2:"18",key:"yk5zj1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i5=k("MergeIcon",[["path",{d:"m8 6 4-4 4 4",key:"ybng9g"}],["path",{d:"M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22",key:"1hyw0i"}],["path",{d:"m20 22-5-5",key:"1m27yz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l5=k("MessageCircleCodeIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}],["path",{d:"m10 10-2 2 2 2",key:"p6et6i"}],["path",{d:"m14 10 2 2-2 2",key:"1kkmpt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c5=k("MessageCircleDashedIcon",[["path",{d:"M13.5 3.1c-.5 0-1-.1-1.5-.1s-1 .1-1.5.1",key:"16ll65"}],["path",{d:"M19.3 6.8a10.45 10.45 0 0 0-2.1-2.1",key:"1nq77a"}],["path",{d:"M20.9 13.5c.1-.5.1-1 .1-1.5s-.1-1-.1-1.5",key:"1sf7wn"}],["path",{d:"M17.2 19.3a10.45 10.45 0 0 0 2.1-2.1",key:"x1hs5g"}],["path",{d:"M10.5 20.9c.5.1 1 .1 1.5.1s1-.1 1.5-.1",key:"19m18z"}],["path",{d:"M3.5 17.5 2 22l4.5-1.5",key:"1f36qi"}],["path",{d:"M3.1 10.5c0 .5-.1 1-.1 1.5s.1 1 .1 1.5",key:"1vz3ju"}],["path",{d:"M6.8 4.7a10.45 10.45 0 0 0-2.1 2.1",key:"19f9do"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d5=k("MessageCircleHeartIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}],["path",{d:"M15.8 9.2a2.5 2.5 0 0 0-3.5 0l-.3.4-.35-.3a2.42 2.42 0 1 0-3.2 3.6l3.6 3.5 3.6-3.5c1.2-1.2 1.1-2.7.2-3.7",key:"43lnbm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u5=k("MessageCircleMoreIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}],["path",{d:"M8 12h.01",key:"czm47f"}],["path",{d:"M12 12h.01",key:"1mp3jc"}],["path",{d:"M16 12h.01",key:"1l6xoz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p5=k("MessageCircleOffIcon",[["path",{d:"M20.5 14.9A9 9 0 0 0 9.1 3.5",key:"1iebmn"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M5.6 5.6C3 8.3 2.2 12.5 4 16l-2 6 6-2c3.4 1.8 7.6 1.1 10.3-1.7",key:"1ov8ce"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h5=k("MessageCirclePlusIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"M12 8v8",key:"napkw2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f5=k("MessageCircleQuestionIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}],["path",{d:"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3",key:"1u773s"}],["path",{d:"M12 17h.01",key:"p32p05"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m5=k("MessageCircleReplyIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}],["path",{d:"m10 15-3-3 3-3",key:"1pgupc"}],["path",{d:"M7 12h7a2 2 0 0 1 2 2v1",key:"1gheu4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v5=k("MessageCircleWarningIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}],["path",{d:"M12 8v4",key:"1got3b"}],["path",{d:"M12 16h.01",key:"1drbdi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y5=k("MessageCircleXIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"m9 9 6 6",key:"z0biqf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _5=k("MessageCircleIcon",[["path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z",key:"vv11sd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g5=k("MessageSquareCodeIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"m10 8-2 2 2 2",key:"19bv1o"}],["path",{d:"m14 8 2 2-2 2",key:"1whylv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k5=k("MessageSquareDashedIcon",[["path",{d:"M3 6V5c0-1.1.9-2 2-2h2",key:"9usibi"}],["path",{d:"M11 3h3",key:"1c3ji7"}],["path",{d:"M18 3h1c1.1 0 2 .9 2 2",key:"19esxn"}],["path",{d:"M21 9v2",key:"p14lih"}],["path",{d:"M21 15c0 1.1-.9 2-2 2h-1",key:"1fo1j8"}],["path",{d:"M14 17h-3",key:"1w4p2m"}],["path",{d:"m7 17-4 4v-5",key:"ph9x1h"}],["path",{d:"M3 12v-2",key:"856n1q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b5=k("MessageSquareDiffIcon",[["path",{d:"m5 19-2 2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2",key:"1xuzuj"}],["path",{d:"M9 10h6",key:"9gxzsh"}],["path",{d:"M12 7v6",key:"lw1j43"}],["path",{d:"M9 17h6",key:"r8uit2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w5=k("MessageSquareDotIcon",[["path",{d:"M11.7 3H5a2 2 0 0 0-2 2v16l4-4h12a2 2 0 0 0 2-2v-2.7",key:"uodpkb"}],["circle",{cx:"18",cy:"6",r:"3",key:"1h7g24"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x5=k("MessageSquareHeartIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"M14.8 7.5a1.84 1.84 0 0 0-2.6 0l-.2.3-.3-.3a1.84 1.84 0 1 0-2.4 2.8L12 13l2.7-2.7c.9-.9.8-2.1.1-2.8",key:"1blaws"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M5=k("MessageSquareMoreIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"M8 10h.01",key:"19clt8"}],["path",{d:"M12 10h.01",key:"1nrarc"}],["path",{d:"M16 10h.01",key:"1m94wz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C5=k("MessageSquareOffIcon",[["path",{d:"M21 15V5a2 2 0 0 0-2-2H9",key:"43el77"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M3.6 3.6c-.4.3-.6.8-.6 1.4v16l4-4h10",key:"pwpm4a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S5=k("MessageSquarePlusIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"M12 7v6",key:"lw1j43"}],["path",{d:"M9 10h6",key:"9gxzsh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I5=k("MessageSquareQuoteIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"M8 12a2 2 0 0 0 2-2V8H8",key:"1jfesj"}],["path",{d:"M14 12a2 2 0 0 0 2-2V8h-2",key:"1dq9mh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L5=k("MessageSquareReplyIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"m10 7-3 3 3 3",key:"1eugdv"}],["path",{d:"M17 13v-1a2 2 0 0 0-2-2H7",key:"ernfh3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $5=k("MessageSquareShareIcon",[["path",{d:"M21 12v3a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h7",key:"tqtdkg"}],["path",{d:"M16 3h5v5",key:"1806ms"}],["path",{d:"m16 8 5-5",key:"15mbrl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A5=k("MessageSquareTextIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"M13 8H7",key:"14i4kc"}],["path",{d:"M17 12H7",key:"16if0g"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E5=k("MessageSquareWarningIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"M12 7v2",key:"stiyo7"}],["path",{d:"M12 13h.01",key:"y0uutt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T5=k("MessageSquareXIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}],["path",{d:"m14.5 7.5-5 5",key:"3lb6iw"}],["path",{d:"m9.5 7.5 5 5",key:"ko136h"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P5=k("MessageSquareIcon",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D5=k("MessagesSquareIcon",[["path",{d:"M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z",key:"16vlm8"}],["path",{d:"M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1",key:"1cx29u"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R5=k("Mic2Icon",[["path",{d:"m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12",key:"zoua8r"}],["circle",{cx:"17",cy:"7",r:"5",key:"1fomce"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O5=k("MicOffIcon",[["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}],["path",{d:"M18.89 13.23A7.12 7.12 0 0 0 19 12v-2",key:"80xlxr"}],["path",{d:"M5 10v2a7 7 0 0 0 12 5",key:"p2k8kg"}],["path",{d:"M15 9.34V5a3 3 0 0 0-5.68-1.33",key:"1gzdoj"}],["path",{d:"M9 9v3a3 3 0 0 0 5.12 2.12",key:"r2i35w"}],["line",{x1:"12",x2:"12",y1:"19",y2:"22",key:"x3vr5v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V5=k("MicIcon",[["path",{d:"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z",key:"131961"}],["path",{d:"M19 10v2a7 7 0 0 1-14 0v-2",key:"1vc78b"}],["line",{x1:"12",x2:"12",y1:"19",y2:"22",key:"x3vr5v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U5=k("MicroscopeIcon",[["path",{d:"M6 18h8",key:"1borvv"}],["path",{d:"M3 22h18",key:"8prr45"}],["path",{d:"M14 22a7 7 0 1 0 0-14h-1",key:"1jwaiy"}],["path",{d:"M9 14h2",key:"197e7h"}],["path",{d:"M9 12a2 2 0 0 1-2-2V6h6v4a2 2 0 0 1-2 2Z",key:"1bmzmy"}],["path",{d:"M12 6V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3",key:"1drr47"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F5=k("MicrowaveIcon",[["rect",{width:"20",height:"15",x:"2",y:"4",rx:"2",key:"2no95f"}],["rect",{width:"8",height:"7",x:"6",y:"8",rx:"1",key:"zh9wx"}],["path",{d:"M18 8v7",key:"o5zi4n"}],["path",{d:"M6 19v2",key:"1loha6"}],["path",{d:"M18 19v2",key:"1dawf0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j5=k("MilestoneIcon",[["path",{d:"M18 6H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13l4-3.5L18 6Z",key:"1mp5s7"}],["path",{d:"M12 13v8",key:"1l5pq0"}],["path",{d:"M12 3v3",key:"1n5kay"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H5=k("MilkOffIcon",[["path",{d:"M8 2h8",key:"1ssgc1"}],["path",{d:"M9 2v1.343M15 2v2.789a4 4 0 0 0 .672 2.219l.656.984a4 4 0 0 1 .672 2.22v1.131M7.8 7.8l-.128.192A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3",key:"y0ejgx"}],["path",{d:"M7 15a6.47 6.47 0 0 1 5 0 6.472 6.472 0 0 0 3.435.435",key:"iaxqsy"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N5=k("MilkIcon",[["path",{d:"M8 2h8",key:"1ssgc1"}],["path",{d:"M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2",key:"qtp12x"}],["path",{d:"M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0",key:"ygeh44"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z5=k("Minimize2Icon",[["polyline",{points:"4 14 10 14 10 20",key:"11kfnr"}],["polyline",{points:"20 10 14 10 14 4",key:"rlmsce"}],["line",{x1:"14",x2:"21",y1:"10",y2:"3",key:"o5lafz"}],["line",{x1:"3",x2:"10",y1:"21",y2:"14",key:"1atl0r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B5=k("MinimizeIcon",[["path",{d:"M8 3v3a2 2 0 0 1-2 2H3",key:"hohbtr"}],["path",{d:"M21 8h-3a2 2 0 0 1-2-2V3",key:"5jw1f3"}],["path",{d:"M3 16h3a2 2 0 0 1 2 2v3",key:"198tvr"}],["path",{d:"M16 21v-3a2 2 0 0 1 2-2h3",key:"ph8mxp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q5=k("MinusCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M8 12h8",key:"1wcyev"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W5=k("MinusSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 12h8",key:"1wcyev"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G5=k("MinusIcon",[["path",{d:"M5 12h14",key:"1ays0h"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z5=k("MonitorCheckIcon",[["path",{d:"m9 10 2 2 4-4",key:"1gnqz4"}],["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"M8 21h8",key:"1ev6f3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K5=k("MonitorDotIcon",[["circle",{cx:"19",cy:"6",r:"3",key:"108a5v"}],["path",{d:"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9",key:"1fet9y"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"M8 21h8",key:"1ev6f3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X5=k("MonitorDownIcon",[["path",{d:"M12 13V7",key:"h0r20n"}],["path",{d:"m15 10-3 3-3-3",key:"lzhmyn"}],["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"M8 21h8",key:"1ev6f3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y5=k("MonitorOffIcon",[["path",{d:"M17 17H4a2 2 0 0 1-2-2V5c0-1.5 1-2 1-2",key:"k0q8oc"}],["path",{d:"M22 15V5a2 2 0 0 0-2-2H9",key:"cp1ac0"}],["path",{d:"M8 21h8",key:"1ev6f3"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q5=k("MonitorPauseIcon",[["path",{d:"M10 13V7",key:"1u13u9"}],["path",{d:"M14 13V7",key:"1vj9om"}],["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"M8 21h8",key:"1ev6f3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J5=k("MonitorPlayIcon",[["path",{d:"m10 7 5 3-5 3Z",key:"29ljg6"}],["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"M8 21h8",key:"1ev6f3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e3=k("MonitorSmartphoneIcon",[["path",{d:"M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8",key:"10dyio"}],["path",{d:"M10 19v-3.96 3.15",key:"1irgej"}],["path",{d:"M7 19h5",key:"qswx4l"}],["rect",{width:"6",height:"10",x:"16",y:"12",rx:"2",key:"1egngj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t3=k("MonitorSpeakerIcon",[["path",{d:"M5.5 20H8",key:"1k40s5"}],["path",{d:"M17 9h.01",key:"1j24nn"}],["rect",{width:"10",height:"16",x:"12",y:"4",rx:"2",key:"ixliua"}],["path",{d:"M8 6H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4",key:"1mp6e1"}],["circle",{cx:"17",cy:"15",r:"1",key:"tqvash"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a3=k("MonitorStopIcon",[["rect",{x:"9",y:"7",width:"6",height:"6",key:"4xvc6r"}],["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"M8 21h8",key:"1ev6f3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n3=k("MonitorUpIcon",[["path",{d:"m9 10 3-3 3 3",key:"11gsxs"}],["path",{d:"M12 13V7",key:"h0r20n"}],["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"M8 21h8",key:"1ev6f3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s3=k("MonitorXIcon",[["path",{d:"m14.5 12.5-5-5",key:"1jahn5"}],["path",{d:"m9.5 12.5 5-5",key:"1k2t7b"}],["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"M8 21h8",key:"1ev6f3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o3=k("MonitorIcon",[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21",key:"1svkeh"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21",key:"vw1qmm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r3=k("MoonStarIcon",[["path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z",key:"a7tn18"}],["path",{d:"M19 3v4",key:"vgv24u"}],["path",{d:"M21 5h-4",key:"1wcg1f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i3=k("MoonIcon",[["path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z",key:"a7tn18"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l3=k("MoreHorizontalIcon",[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c3=k("MoreVerticalIcon",[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"12",cy:"5",r:"1",key:"gxeob9"}],["circle",{cx:"12",cy:"19",r:"1",key:"lyex9k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d3=k("MountainSnowIcon",[["path",{d:"m8 3 4 8 5-5 5 15H2L8 3z",key:"otkl63"}],["path",{d:"M4.14 15.08c2.62-1.57 5.24-1.43 7.86.42 2.74 1.94 5.49 2 8.23.19",key:"1pvmmp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u3=k("MountainIcon",[["path",{d:"m8 3 4 8 5-5 5 15H2L8 3z",key:"otkl63"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p3=k("MousePointer2Icon",[["path",{d:"m4 4 7.07 17 2.51-7.39L21 11.07z",key:"1vqm48"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h3=k("MousePointerClickIcon",[["path",{d:"m9 9 5 12 1.8-5.2L21 14Z",key:"1b76lo"}],["path",{d:"M7.2 2.2 8 5.1",key:"1cfko1"}],["path",{d:"m5.1 8-2.9-.8",key:"1go3kf"}],["path",{d:"M14 4.1 12 6",key:"ita8i4"}],["path",{d:"m6 12-1.9 2",key:"mnht97"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f3=k("MousePointerSquareDashedIcon",[["path",{d:"M5 3a2 2 0 0 0-2 2",key:"y57alp"}],["path",{d:"M19 3a2 2 0 0 1 2 2",key:"18rm91"}],["path",{d:"m12 12 4 10 1.7-4.3L22 16Z",key:"64ilsv"}],["path",{d:"M5 21a2 2 0 0 1-2-2",key:"sbafld"}],["path",{d:"M9 3h1",key:"1yesri"}],["path",{d:"M9 21h2",key:"1qve2z"}],["path",{d:"M14 3h1",key:"1ec4yj"}],["path",{d:"M3 9v1",key:"1r0deq"}],["path",{d:"M21 9v2",key:"p14lih"}],["path",{d:"M3 14v1",key:"vnatye"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wi=k("MousePointerSquareIcon",[["path",{d:"M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6",key:"14rsvq"}],["path",{d:"m12 12 4 10 1.7-4.3L22 16Z",key:"64ilsv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m3=k("MousePointerIcon",[["path",{d:"m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z",key:"y2ucgo"}],["path",{d:"m13 13 6 6",key:"1nhxnf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v3=k("MouseIcon",[["rect",{x:"5",y:"2",width:"14",height:"20",rx:"7",key:"11ol66"}],["path",{d:"M12 6v4",key:"16clxf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gi=k("Move3dIcon",[["path",{d:"M5 3v16h16",key:"1mqmf9"}],["path",{d:"m5 19 6-6",key:"jh6hbb"}],["path",{d:"m2 6 3-3 3 3",key:"tkyvxa"}],["path",{d:"m18 16 3 3-3 3",key:"1d4glt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y3=k("MoveDiagonal2Icon",[["polyline",{points:"5 11 5 5 11 5",key:"ncfzxk"}],["polyline",{points:"19 13 19 19 13 19",key:"1mk7hk"}],["line",{x1:"5",x2:"19",y1:"5",y2:"19",key:"mcyte3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _3=k("MoveDiagonalIcon",[["polyline",{points:"13 5 19 5 19 11",key:"11219e"}],["polyline",{points:"11 19 5 19 5 13",key:"sfq3wq"}],["line",{x1:"19",x2:"5",y1:"5",y2:"19",key:"1x9vlm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g3=k("MoveDownLeftIcon",[["path",{d:"M11 19H5V13",key:"1akmht"}],["path",{d:"M19 5L5 19",key:"72u4yj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k3=k("MoveDownRightIcon",[["path",{d:"M19 13V19H13",key:"10vkzq"}],["path",{d:"M5 5L19 19",key:"5zm2fv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b3=k("MoveDownIcon",[["path",{d:"M8 18L12 22L16 18",key:"cskvfv"}],["path",{d:"M12 2V22",key:"r89rzk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w3=k("MoveHorizontalIcon",[["polyline",{points:"18 8 22 12 18 16",key:"1hqrds"}],["polyline",{points:"6 8 2 12 6 16",key:"f0ernq"}],["line",{x1:"2",x2:"22",y1:"12",y2:"12",key:"1dnqot"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x3=k("MoveLeftIcon",[["path",{d:"M6 8L2 12L6 16",key:"kyvwex"}],["path",{d:"M2 12H22",key:"1m8cig"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M3=k("MoveRightIcon",[["path",{d:"M18 8L22 12L18 16",key:"1r0oui"}],["path",{d:"M2 12H22",key:"1m8cig"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C3=k("MoveUpLeftIcon",[["path",{d:"M5 11V5H11",key:"3q78g9"}],["path",{d:"M5 5L19 19",key:"5zm2fv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S3=k("MoveUpRightIcon",[["path",{d:"M13 5H19V11",key:"1n1gyv"}],["path",{d:"M19 5L5 19",key:"72u4yj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I3=k("MoveUpIcon",[["path",{d:"M8 6L12 2L16 6",key:"1yvkyx"}],["path",{d:"M12 2V22",key:"r89rzk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L3=k("MoveVerticalIcon",[["polyline",{points:"8 18 12 22 16 18",key:"1uutw3"}],["polyline",{points:"8 6 12 2 16 6",key:"d60sxy"}],["line",{x1:"12",x2:"12",y1:"2",y2:"22",key:"7eqyqh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $3=k("MoveIcon",[["polyline",{points:"5 9 2 12 5 15",key:"1r5uj5"}],["polyline",{points:"9 5 12 2 15 5",key:"5v383o"}],["polyline",{points:"15 19 12 22 9 19",key:"g7qi8m"}],["polyline",{points:"19 9 22 12 19 15",key:"tpp73q"}],["line",{x1:"2",x2:"22",y1:"12",y2:"12",key:"1dnqot"}],["line",{x1:"12",x2:"12",y1:"2",y2:"22",key:"7eqyqh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A3=k("Music2Icon",[["circle",{cx:"8",cy:"18",r:"4",key:"1fc0mg"}],["path",{d:"M12 18V2l7 4",key:"g04rme"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E3=k("Music3Icon",[["circle",{cx:"12",cy:"18",r:"4",key:"m3r9ws"}],["path",{d:"M16 18V2",key:"40x2m5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T3=k("Music4Icon",[["path",{d:"M9 18V5l12-2v13",key:"1jmyc2"}],["path",{d:"m9 9 12-2",key:"1e64n2"}],["circle",{cx:"6",cy:"18",r:"3",key:"fqmcym"}],["circle",{cx:"18",cy:"16",r:"3",key:"1hluhg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P3=k("MusicIcon",[["path",{d:"M9 18V5l12-2v13",key:"1jmyc2"}],["circle",{cx:"6",cy:"18",r:"3",key:"fqmcym"}],["circle",{cx:"18",cy:"16",r:"3",key:"1hluhg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D3=k("Navigation2OffIcon",[["path",{d:"M9.31 9.31 5 21l7-4 7 4-1.17-3.17",key:"qoq2o2"}],["path",{d:"M14.53 8.88 12 2l-1.17 3.17",key:"k3sjzy"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R3=k("Navigation2Icon",[["polygon",{points:"12 2 19 21 12 17 5 21 12 2",key:"x8c0qg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O3=k("NavigationOffIcon",[["path",{d:"M8.43 8.43 3 11l8 2 2 8 2.57-5.43",key:"1vdtb7"}],["path",{d:"M17.39 11.73 22 2l-9.73 4.61",key:"tya3r6"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V3=k("NavigationIcon",[["polygon",{points:"3 11 22 2 13 21 11 13 3 11",key:"1ltx0t"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U3=k("NetworkIcon",[["rect",{x:"16",y:"16",width:"6",height:"6",rx:"1",key:"4q2zg0"}],["rect",{x:"2",y:"16",width:"6",height:"6",rx:"1",key:"8cvhb9"}],["rect",{x:"9",y:"2",width:"6",height:"6",rx:"1",key:"1egb70"}],["path",{d:"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3",key:"1jsf9p"}],["path",{d:"M12 12V8",key:"2874zd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F3=k("NewspaperIcon",[["path",{d:"M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2",key:"7pis2x"}],["path",{d:"M18 14h-8",key:"sponae"}],["path",{d:"M15 18h-5",key:"95g1m2"}],["path",{d:"M10 6h8v4h-8V6Z",key:"smlsk5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j3=k("NfcIcon",[["path",{d:"M6 8.32a7.43 7.43 0 0 1 0 7.36",key:"9iaqei"}],["path",{d:"M9.46 6.21a11.76 11.76 0 0 1 0 11.58",key:"1yha7l"}],["path",{d:"M12.91 4.1a15.91 15.91 0 0 1 .01 15.8",key:"4iu2gk"}],["path",{d:"M16.37 2a20.16 20.16 0 0 1 0 20",key:"sap9u2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H3=k("NutOffIcon",[["path",{d:"M12 4V2",key:"1k5q1u"}],["path",{d:"M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592a7.01 7.01 0 0 0 4.125-2.939",key:"1xcvy9"}],["path",{d:"M19 10v3.343",key:"163tfc"}],["path",{d:"M12 12c-1.349-.573-1.905-1.005-2.5-2-.546.902-1.048 1.353-2.5 2-1.018-.644-1.46-1.08-2-2-1.028.71-1.69.918-3 1 1.081-1.048 1.757-2.03 2-3 .194-.776.84-1.551 1.79-2.21m11.654 5.997c.887-.457 1.28-.891 1.556-1.787 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4-.74 0-1.461.068-2.15.192",key:"17914v"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N3=k("NutIcon",[["path",{d:"M12 4V2",key:"1k5q1u"}],["path",{d:"M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592A7.003 7.003 0 0 0 19 14v-4",key:"1tgyif"}],["path",{d:"M12 4C8 4 4.5 6 4 8c-.243.97-.919 1.952-2 3 1.31-.082 1.972-.29 3-1 .54.92.982 1.356 2 2 1.452-.647 1.954-1.098 2.5-2 .595.995 1.151 1.427 2.5 2 1.31-.621 1.862-1.058 2.5-2 .629.977 1.162 1.423 2.5 2 1.209-.548 1.68-.967 2-2 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4Z",key:"tnsqj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z3=k("OctagonIcon",[["polygon",{points:"7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2",key:"h1p8hx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B3=k("OptionIcon",[["path",{d:"M3 3h6l6 18h6",key:"ph9rgk"}],["path",{d:"M14 3h7",key:"16f0ms"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q3=k("OrbitIcon",[["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["circle",{cx:"19",cy:"5",r:"2",key:"mhkx31"}],["circle",{cx:"5",cy:"19",r:"2",key:"v8kfzx"}],["path",{d:"M10.4 21.9a10 10 0 0 0 9.941-15.416",key:"eohfx2"}],["path",{d:"M13.5 2.1a10 10 0 0 0-9.841 15.416",key:"19pvbm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W3=k("OutdentIcon",[["polyline",{points:"7 8 3 12 7 16",key:"2j60jr"}],["line",{x1:"21",x2:"11",y1:"12",y2:"12",key:"1fxxak"}],["line",{x1:"21",x2:"11",y1:"6",y2:"6",key:"asgu94"}],["line",{x1:"21",x2:"11",y1:"18",y2:"18",key:"13dsj7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G3=k("Package2Icon",[["path",{d:"M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z",key:"1ront0"}],["path",{d:"m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9",key:"19h2x1"}],["path",{d:"M12 3v6",key:"1holv5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z3=k("PackageCheckIcon",[["path",{d:"m16 16 2 2 4-4",key:"gfu2re"}],["path",{d:"M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14",key:"e7tb2h"}],["path",{d:"m7.5 4.27 9 5.15",key:"1c824w"}],["polyline",{points:"3.29 7 12 12 20.71 7",key:"ousv84"}],["line",{x1:"12",x2:"12",y1:"22",y2:"12",key:"a4e8g8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K3=k("PackageMinusIcon",[["path",{d:"M16 16h6",key:"100bgy"}],["path",{d:"M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14",key:"e7tb2h"}],["path",{d:"m7.5 4.27 9 5.15",key:"1c824w"}],["polyline",{points:"3.29 7 12 12 20.71 7",key:"ousv84"}],["line",{x1:"12",x2:"12",y1:"22",y2:"12",key:"a4e8g8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X3=k("PackageOpenIcon",[["path",{d:"M20.91 8.84 8.56 2.23a1.93 1.93 0 0 0-1.81 0L3.1 4.13a2.12 2.12 0 0 0-.05 3.69l12.22 6.93a2 2 0 0 0 1.94 0L21 12.51a2.12 2.12 0 0 0-.09-3.67Z",key:"1vy178"}],["path",{d:"m3.09 8.84 12.35-6.61a1.93 1.93 0 0 1 1.81 0l3.65 1.9a2.12 2.12 0 0 1 .1 3.69L8.73 14.75a2 2 0 0 1-1.94 0L3 12.51a2.12 2.12 0 0 1 .09-3.67Z",key:"s3bv25"}],["line",{x1:"12",x2:"12",y1:"22",y2:"13",key:"1o4xyi"}],["path",{d:"M20 13.5v3.37a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13.5",key:"1na2nq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y3=k("PackagePlusIcon",[["path",{d:"M16 16h6",key:"100bgy"}],["path",{d:"M19 13v6",key:"85cyf1"}],["path",{d:"M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14",key:"e7tb2h"}],["path",{d:"m7.5 4.27 9 5.15",key:"1c824w"}],["polyline",{points:"3.29 7 12 12 20.71 7",key:"ousv84"}],["line",{x1:"12",x2:"12",y1:"22",y2:"12",key:"a4e8g8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q3=k("PackageSearchIcon",[["path",{d:"M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14",key:"e7tb2h"}],["path",{d:"m7.5 4.27 9 5.15",key:"1c824w"}],["polyline",{points:"3.29 7 12 12 20.71 7",key:"ousv84"}],["line",{x1:"12",x2:"12",y1:"22",y2:"12",key:"a4e8g8"}],["circle",{cx:"18.5",cy:"15.5",r:"2.5",key:"b5zd12"}],["path",{d:"M20.27 17.27 22 19",key:"1l4muz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J3=k("PackageXIcon",[["path",{d:"M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14",key:"e7tb2h"}],["path",{d:"m7.5 4.27 9 5.15",key:"1c824w"}],["polyline",{points:"3.29 7 12 12 20.71 7",key:"ousv84"}],["line",{x1:"12",x2:"12",y1:"22",y2:"12",key:"a4e8g8"}],["path",{d:"m17 13 5 5m-5 0 5-5",key:"im3w4b"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ex=k("PackageIcon",[["path",{d:"m7.5 4.27 9 5.15",key:"1c824w"}],["path",{d:"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z",key:"hh9hay"}],["path",{d:"m3.3 7 8.7 5 8.7-5",key:"g66t2b"}],["path",{d:"M12 22V12",key:"d0xqtd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tx=k("PaintBucketIcon",[["path",{d:"m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z",key:"irua1i"}],["path",{d:"m5 2 5 5",key:"1lls2c"}],["path",{d:"M2 13h15",key:"1hkzvu"}],["path",{d:"M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z",key:"xk76lq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ax=k("Paintbrush2Icon",[["path",{d:"M14 19.9V16h3a2 2 0 0 0 2-2v-2H5v2c0 1.1.9 2 2 2h3v3.9a2 2 0 1 0 4 0Z",key:"1c8kta"}],["path",{d:"M6 12V2h12v10",key:"1esbnf"}],["path",{d:"M14 2v4",key:"qmzblu"}],["path",{d:"M10 2v2",key:"7u0qdc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nx=k("PaintbrushIcon",[["path",{d:"M18.37 2.63 14 7l-1.59-1.59a2 2 0 0 0-2.82 0L8 7l9 9 1.59-1.59a2 2 0 0 0 0-2.82L17 10l4.37-4.37a2.12 2.12 0 1 0-3-3Z",key:"m6k5sh"}],["path",{d:"M9 8c-2 3-4 3.5-7 4l8 10c2-1 6-5 6-7",key:"arzq70"}],["path",{d:"M14.5 17.5 4.5 15",key:"s7fvrz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sx=k("PaletteIcon",[["circle",{cx:"13.5",cy:"6.5",r:".5",key:"1xcu5"}],["circle",{cx:"17.5",cy:"10.5",r:".5",key:"736e4u"}],["circle",{cx:"8.5",cy:"7.5",r:".5",key:"clrty"}],["circle",{cx:"6.5",cy:"12.5",r:".5",key:"1s4xz9"}],["path",{d:"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z",key:"12rzf8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ox=k("PalmtreeIcon",[["path",{d:"M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4",key:"foxbe7"}],["path",{d:"M13 7.14A5.82 5.82 0 0 1 16.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-3",key:"18arnh"}],["path",{d:"M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35z",key:"epoumf"}],["path",{d:"M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14",key:"ft0feo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rx=k("PanelBottomCloseIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 15h18",key:"5xshup"}],["path",{d:"m15 8-3 3-3-3",key:"1oxy1z"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zi=k("PanelBottomDashedIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M14 15h1",key:"171nev"}],["path",{d:"M19 15h2",key:"1vnucp"}],["path",{d:"M3 15h2",key:"8bym0q"}],["path",{d:"M9 15h1",key:"1tg3ks"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ix=k("PanelBottomOpenIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 15h18",key:"5xshup"}],["path",{d:"m9 10 3-3 3 3",key:"11gsxs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lx=k("PanelBottomIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 15h18",key:"5xshup"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ki=k("PanelLeftCloseIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"m16 15-3-3 3-3",key:"14y99z"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xi=k("PanelLeftDashedIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 14v1",key:"askpd8"}],["path",{d:"M9 19v2",key:"16tejx"}],["path",{d:"M9 3v2",key:"1noubl"}],["path",{d:"M9 9v1",key:"19ebxg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yi=k("PanelLeftOpenIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"m14 9 3 3-3 3",key:"8010ee"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qi=k("PanelLeftIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cx=k("PanelRightCloseIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M15 3v18",key:"14nvp0"}],["path",{d:"m8 9 3 3-3 3",key:"12hl5m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ji=k("PanelRightDashedIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M15 14v1",key:"ilsfch"}],["path",{d:"M15 19v2",key:"1fst2f"}],["path",{d:"M15 3v2",key:"z204g4"}],["path",{d:"M15 9v1",key:"z2a8b1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dx=k("PanelRightOpenIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M15 3v18",key:"14nvp0"}],["path",{d:"m10 15-3-3 3-3",key:"1pgupc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ux=k("PanelRightIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M15 3v18",key:"14nvp0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const px=k("PanelTopCloseIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"m9 16 3-3 3 3",key:"1idcnm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const el=k("PanelTopDashedIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M14 9h1",key:"l0svgy"}],["path",{d:"M19 9h2",key:"te2zfg"}],["path",{d:"M3 9h2",key:"1h4ldw"}],["path",{d:"M9 9h1",key:"15jzuz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hx=k("PanelTopOpenIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"m15 14-3 3-3-3",key:"g215vf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fx=k("PanelTopIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mx=k("PanelsLeftBottomIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"M9 15h12",key:"5ijen5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vx=k("PanelsRightBottomIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 15h12",key:"1wkqb3"}],["path",{d:"M15 3v18",key:"14nvp0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tl=k("PanelsTopLeftIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"M9 21V9",key:"1oto5p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yx=k("PaperclipIcon",[["path",{d:"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48",key:"1u3ebp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _x=k("ParenthesesIcon",[["path",{d:"M8 21s-4-3-4-9 4-9 4-9",key:"uto9ud"}],["path",{d:"M16 3s4 3 4 9-4 9-4 9",key:"4w2vsq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gx=k("ParkingCircleOffIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m5 5 14 14",key:"11anup"}],["path",{d:"M13 13a3 3 0 1 0 0-6H9v2",key:"uoagbd"}],["path",{d:"M9 17v-2.34",key:"a9qo08"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kx=k("ParkingCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M9 17V7h4a3 3 0 0 1 0 6H9",key:"1dfk2c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bx=k("ParkingMeterIcon",[["path",{d:"M9 9a3 3 0 1 1 6 0",key:"jdoeu8"}],["path",{d:"M12 12v3",key:"158kv8"}],["path",{d:"M11 15h2",key:"199qp6"}],["path",{d:"M19 9a7 7 0 1 0-13.6 2.3C6.4 14.4 8 19 8 19h8s1.6-4.6 2.6-7.7c.3-.8.4-1.5.4-2.3",key:"1l50wn"}],["path",{d:"M12 19v3",key:"npa21l"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wx=k("ParkingSquareOffIcon",[["path",{d:"M3.6 3.6A2 2 0 0 1 5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-.59 1.41",key:"9l1ft6"}],["path",{d:"M3 8.7V19a2 2 0 0 0 2 2h10.3",key:"17knke"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M13 13a3 3 0 1 0 0-6H9v2",key:"uoagbd"}],["path",{d:"M9 17v-2.3",key:"1jxgo2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xx=k("ParkingSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 17V7h4a3 3 0 0 1 0 6H9",key:"1dfk2c"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Mx=k("PartyPopperIcon",[["path",{d:"M5.8 11.3 2 22l10.7-3.79",key:"gwxi1d"}],["path",{d:"M4 3h.01",key:"1vcuye"}],["path",{d:"M22 8h.01",key:"1mrtc2"}],["path",{d:"M15 2h.01",key:"1cjtqr"}],["path",{d:"M22 20h.01",key:"1mrys2"}],["path",{d:"m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10",key:"bpx1uq"}],["path",{d:"m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11v0c-.11.7-.72 1.22-1.43 1.22H17",key:"1pd0s7"}],["path",{d:"m11 2 .33.82c.34.86-.2 1.82-1.11 1.98v0C9.52 4.9 9 5.52 9 6.23V7",key:"zq5xbz"}],["path",{d:"M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z",key:"4kbmks"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Cx=k("PauseCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"10",x2:"10",y1:"15",y2:"9",key:"c1nkhi"}],["line",{x1:"14",x2:"14",y1:"15",y2:"9",key:"h65svq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Sx=k("PauseOctagonIcon",[["path",{d:"M10 15V9",key:"1lckn7"}],["path",{d:"M14 15V9",key:"1muqhk"}],["path",{d:"M7.714 2h8.572L22 7.714v8.572L16.286 22H7.714L2 16.286V7.714L7.714 2z",key:"1m7qra"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ix=k("PauseIcon",[["rect",{width:"4",height:"16",x:"6",y:"4",key:"iffhe4"}],["rect",{width:"4",height:"16",x:"14",y:"4",key:"sjin7j"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Lx=k("PawPrintIcon",[["circle",{cx:"11",cy:"4",r:"2",key:"vol9p0"}],["circle",{cx:"18",cy:"8",r:"2",key:"17gozi"}],["circle",{cx:"20",cy:"16",r:"2",key:"1v9bxh"}],["path",{d:"M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z",key:"1ydw1z"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $x=k("PcCaseIcon",[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",key:"1uq1d7"}],["path",{d:"M15 14h.01",key:"1kp3bh"}],["path",{d:"M9 6h6",key:"dgm16u"}],["path",{d:"M9 10h6",key:"9gxzsh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const al=k("PenLineIcon",[["path",{d:"M12 20h9",key:"t2du7b"}],["path",{d:"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z",key:"ymcmye"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _o=k("PenSquareIcon",[["path",{d:"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7",key:"1qinfi"}],["path",{d:"M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z",key:"w2jsv5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ax=k("PenToolIcon",[["path",{d:"m12 19 7-7 3 3-7 7-3-3z",key:"rklqx2"}],["path",{d:"m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z",key:"1et58u"}],["path",{d:"m2 2 7.586 7.586",key:"etlp93"}],["circle",{cx:"11",cy:"11",r:"2",key:"xmgehs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nl=k("PenIcon",[["path",{d:"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z",key:"5qss01"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ex=k("PencilLineIcon",[["path",{d:"M12 20h9",key:"t2du7b"}],["path",{d:"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z",key:"ymcmye"}],["path",{d:"m15 5 3 3",key:"1w25hb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Tx=k("PencilRulerIcon",[["path",{d:"m15 5 4 4",key:"1mk7zo"}],["path",{d:"M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13",key:"orapub"}],["path",{d:"m8 6 2-2",key:"115y1s"}],["path",{d:"m2 22 5.5-1.5L21.17 6.83a2.82 2.82 0 0 0-4-4L3.5 16.5Z",key:"hes763"}],["path",{d:"m18 16 2-2",key:"ee94s4"}],["path",{d:"m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17",key:"cfq27r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Px=k("PencilIcon",[["path",{d:"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z",key:"5qss01"}],["path",{d:"m15 5 4 4",key:"1mk7zo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dx=k("PentagonIcon",[["path",{d:"M3.5 8.7c-.7.5-1 1.4-.7 2.2l2.8 8.7c.3.8 1 1.4 1.9 1.4h9.1c.9 0 1.6-.6 1.9-1.4l2.8-8.7c.3-.8 0-1.7-.7-2.2l-7.4-5.3a2.1 2.1 0 0 0-2.4 0Z",key:"hsj90r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rx=k("PercentCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"M9 9h.01",key:"1q5me6"}],["path",{d:"M15 15h.01",key:"lqbp3k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ox=k("PercentDiamondIcon",[["path",{d:"M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0Z",key:"1tpxz2"}],["path",{d:"M9.2 9.2h.01",key:"1b7bvt"}],["path",{d:"m14.5 9.5-5 5",key:"17q4r4"}],["path",{d:"M14.7 14.8h.01",key:"17nsh4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Vx=k("PercentSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"M9 9h.01",key:"1q5me6"}],["path",{d:"M15 15h.01",key:"lqbp3k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Ux=k("PercentIcon",[["line",{x1:"19",x2:"5",y1:"5",y2:"19",key:"1x9vlm"}],["circle",{cx:"6.5",cy:"6.5",r:"2.5",key:"4mh3h7"}],["circle",{cx:"17.5",cy:"17.5",r:"2.5",key:"1mdrzq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Fx=k("PersonStandingIcon",[["circle",{cx:"12",cy:"5",r:"1",key:"gxeob9"}],["path",{d:"m9 20 3-6 3 6",key:"se2kox"}],["path",{d:"m6 8 6 2 6-2",key:"4o3us4"}],["path",{d:"M12 10v4",key:"1kjpxc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jx=k("PhoneCallIcon",[["path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z",key:"foiqr5"}],["path",{d:"M14.05 2a9 9 0 0 1 8 7.94",key:"vmijpz"}],["path",{d:"M14.05 6A5 5 0 0 1 18 10",key:"13nbpp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Hx=k("PhoneForwardedIcon",[["polyline",{points:"18 2 22 6 18 10",key:"6vjanh"}],["line",{x1:"14",x2:"22",y1:"6",y2:"6",key:"1jsywh"}],["path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z",key:"foiqr5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Nx=k("PhoneIncomingIcon",[["polyline",{points:"16 2 16 8 22 8",key:"1ygljm"}],["line",{x1:"22",x2:"16",y1:"2",y2:"8",key:"1xzwqn"}],["path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z",key:"foiqr5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zx=k("PhoneMissedIcon",[["line",{x1:"22",x2:"16",y1:"2",y2:"8",key:"1xzwqn"}],["line",{x1:"16",x2:"22",y1:"2",y2:"8",key:"13zxdn"}],["path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z",key:"foiqr5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Bx=k("PhoneOffIcon",[["path",{d:"M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91",key:"z86iuo"}],["line",{x1:"22",x2:"2",y1:"2",y2:"22",key:"11kh81"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qx=k("PhoneOutgoingIcon",[["polyline",{points:"22 8 22 2 16 2",key:"1g204g"}],["line",{x1:"16",x2:"22",y1:"8",y2:"2",key:"1ggias"}],["path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z",key:"foiqr5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Wx=k("PhoneIcon",[["path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z",key:"foiqr5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Gx=k("PiSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M7 7h10",key:"udp07y"}],["path",{d:"M10 7v10",key:"i1d9ee"}],["path",{d:"M16 17a2 2 0 0 1-2-2V7",key:"ftwdc7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Zx=k("PiIcon",[["line",{x1:"9",x2:"9",y1:"4",y2:"20",key:"ovs5a5"}],["path",{d:"M4 7c0-1.7 1.3-3 3-3h13",key:"10pag4"}],["path",{d:"M18 20c-1.7 0-3-1.3-3-3V4",key:"1gaosr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Kx=k("PianoIcon",[["path",{d:"M18.5 8c-1.4 0-2.6-.8-3.2-2A6.87 6.87 0 0 0 2 9v11a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-8.5C22 9.6 20.4 8 18.5 8",key:"lag0yf"}],["path",{d:"M2 14h20",key:"myj16y"}],["path",{d:"M6 14v4",key:"9ng0ue"}],["path",{d:"M10 14v4",key:"1v8uk5"}],["path",{d:"M14 14v4",key:"1tqops"}],["path",{d:"M18 14v4",key:"18uqwm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Xx=k("PictureInPicture2Icon",[["path",{d:"M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4",key:"daa4of"}],["rect",{width:"10",height:"7",x:"12",y:"13",rx:"2",key:"1nb8gs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Yx=k("PictureInPictureIcon",[["path",{d:"M8 4.5v5H3m-1-6 6 6m13 0v-3c0-1.16-.84-2-2-2h-7m-9 9v2c0 1.05.95 2 2 2h3",key:"bcd8fb"}],["rect",{width:"10",height:"7",x:"12",y:"13.5",ry:"2",key:"136fx3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Qx=k("PieChartIcon",[["path",{d:"M21.21 15.89A10 10 0 1 1 8 2.83",key:"k2fpak"}],["path",{d:"M22 12A10 10 0 0 0 12 2v10z",key:"1rfc4y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Jx=k("PiggyBankIcon",[["path",{d:"M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2h0V5z",key:"uf6l00"}],["path",{d:"M2 9v1c0 1.1.9 2 2 2h1",key:"nm575m"}],["path",{d:"M16 11h0",key:"k2aug8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e8=k("PilcrowSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 12H9.5a2.5 2.5 0 0 1 0-5H17",key:"1l9586"}],["path",{d:"M12 7v10",key:"jspqdw"}],["path",{d:"M16 7v10",key:"lavkr4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t8=k("PilcrowIcon",[["path",{d:"M13 4v16",key:"8vvj80"}],["path",{d:"M17 4v16",key:"7dpous"}],["path",{d:"M19 4H9.5a4.5 4.5 0 0 0 0 9H13",key:"sh4n9v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a8=k("PillIcon",[["path",{d:"m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z",key:"wa1lgi"}],["path",{d:"m8.5 8.5 7 7",key:"rvfmvr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n8=k("PinOffIcon",[["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}],["line",{x1:"12",x2:"12",y1:"17",y2:"22",key:"1jrz49"}],["path",{d:"M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h12",key:"13x2n8"}],["path",{d:"M15 9.34V6h1a2 2 0 0 0 0-4H7.89",key:"reo3ki"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s8=k("PinIcon",[["line",{x1:"12",x2:"12",y1:"17",y2:"22",key:"1jrz49"}],["path",{d:"M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z",key:"13yl11"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o8=k("PipetteIcon",[["path",{d:"m2 22 1-1h3l9-9",key:"1sre89"}],["path",{d:"M3 21v-3l9-9",key:"hpe2y6"}],["path",{d:"m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z",key:"196du1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r8=k("PizzaIcon",[["path",{d:"M15 11h.01",key:"rns66s"}],["path",{d:"M11 15h.01",key:"k85uqc"}],["path",{d:"M16 16h.01",key:"1f9h7w"}],["path",{d:"m2 16 20 6-6-20A20 20 0 0 0 2 16",key:"e4slt2"}],["path",{d:"M5.71 17.11a17.04 17.04 0 0 1 11.4-11.4",key:"rerf8f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i8=k("PlaneLandingIcon",[["path",{d:"M2 22h20",key:"272qi7"}],["path",{d:"M3.77 10.77 2 9l2-4.5 1.1.55c.55.28.9.84.9 1.45s.35 1.17.9 1.45L8 8.5l3-6 1.05.53a2 2 0 0 1 1.09 1.52l.72 5.4a2 2 0 0 0 1.09 1.52l4.4 2.2c.42.22.78.55 1.01.96l.6 1.03c.49.88-.06 1.98-1.06 2.1l-1.18.15c-.47.06-.95-.02-1.37-.24L4.29 11.15a2 2 0 0 1-.52-.38Z",key:"1ma21e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l8=k("PlaneTakeoffIcon",[["path",{d:"M2 22h20",key:"272qi7"}],["path",{d:"M6.36 17.4 4 17l-2-4 1.1-.55a2 2 0 0 1 1.8 0l.17.1a2 2 0 0 0 1.8 0L8 12 5 6l.9-.45a2 2 0 0 1 2.09.2l4.02 3a2 2 0 0 0 2.1.2l4.19-2.06a2.41 2.41 0 0 1 1.73-.17L21 7a1.4 1.4 0 0 1 .87 1.99l-.38.76c-.23.46-.6.84-1.07 1.08L7.58 17.2a2 2 0 0 1-1.22.18Z",key:"fkigj9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c8=k("PlaneIcon",[["path",{d:"M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z",key:"1v9wt8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d8=k("PlayCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polygon",{points:"10 8 16 12 10 16 10 8",key:"1cimsy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u8=k("PlaySquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m9 8 6 4-6 4Z",key:"f1r3lt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p8=k("PlayIcon",[["polygon",{points:"5 3 19 12 5 21 5 3",key:"191637"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h8=k("Plug2Icon",[["path",{d:"M9 2v6",key:"17ngun"}],["path",{d:"M15 2v6",key:"s7yy2p"}],["path",{d:"M12 17v5",key:"bb1du9"}],["path",{d:"M5 8h14",key:"pcz4l3"}],["path",{d:"M6 11V8h12v3a6 6 0 1 1-12 0v0Z",key:"nd4hoy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f8=k("PlugZap2Icon",[["path",{d:"m13 2-2 2.5h3L12 7",key:"1me98u"}],["path",{d:"M10 14v-3",key:"1mllf3"}],["path",{d:"M14 14v-3",key:"1l3fkq"}],["path",{d:"M11 19c-1.7 0-3-1.3-3-3v-2h8v2c0 1.7-1.3 3-3 3Z",key:"jd5pat"}],["path",{d:"M12 22v-3",key:"kmzjlo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m8=k("PlugZapIcon",[["path",{d:"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z",key:"goz73y"}],["path",{d:"m2 22 3-3",key:"19mgm9"}],["path",{d:"M7.5 13.5 10 11",key:"7xgeeb"}],["path",{d:"M10.5 16.5 13 14",key:"10btkg"}],["path",{d:"m18 3-4 4h6l-4 4",key:"16psg9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v8=k("PlugIcon",[["path",{d:"M12 22v-5",key:"1ega77"}],["path",{d:"M9 8V2",key:"14iosj"}],["path",{d:"M15 8V2",key:"18g5xt"}],["path",{d:"M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z",key:"osxo6l"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y8=k("PlusCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"M12 8v8",key:"napkw2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _8=k("PlusSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"M12 8v8",key:"napkw2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g8=k("PlusIcon",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k8=k("PocketKnifeIcon",[["path",{d:"M3 2v1c0 1 2 1 2 2S3 6 3 7s2 1 2 2-2 1-2 2 2 1 2 2",key:"19w3oe"}],["path",{d:"M18 6h.01",key:"1v4wsw"}],["path",{d:"M6 18h.01",key:"uhywen"}],["path",{d:"M20.83 8.83a4 4 0 0 0-5.66-5.66l-12 12a4 4 0 1 0 5.66 5.66Z",key:"6fykxj"}],["path",{d:"M18 11.66V22a4 4 0 0 0 4-4V6",key:"1utzek"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b8=k("PocketIcon",[["path",{d:"M4 3h16a2 2 0 0 1 2 2v6a10 10 0 0 1-10 10A10 10 0 0 1 2 11V5a2 2 0 0 1 2-2z",key:"1mz881"}],["polyline",{points:"8 10 12 14 16 10",key:"w4mbv5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w8=k("PodcastIcon",[["circle",{cx:"12",cy:"11",r:"1",key:"1gvufo"}],["path",{d:"M11 17a1 1 0 0 1 2 0c0 .5-.34 3-.5 4.5a.5.5 0 0 1-1 0c-.16-1.5-.5-4-.5-4.5Z",key:"1n5fvv"}],["path",{d:"M8 14a5 5 0 1 1 8 0",key:"fc81rn"}],["path",{d:"M17 18.5a9 9 0 1 0-10 0",key:"jqtxkf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x8=k("PointerOffIcon",[["path",{d:"M10 4.5V4a2 2 0 0 0-2.41-1.957",key:"jsi14n"}],["path",{d:"M13.9 8.4a2 2 0 0 0-1.26-1.295",key:"hirc7f"}],["path",{d:"M21.7 16.2A8 8 0 0 0 22 14v-3a2 2 0 1 0-4 0v-1a2 2 0 0 0-3.63-1.158",key:"1jxb2e"}],["path",{d:"m7 15-1.8-1.8a2 2 0 0 0-2.79 2.86L6 19.7a7.74 7.74 0 0 0 6 2.3h2a8 8 0 0 0 5.657-2.343",key:"10r7hm"}],["path",{d:"M6 6v8",key:"tv5xkp"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M8=k("PointerIcon",[["path",{d:"M22 14a8 8 0 0 1-8 8",key:"56vcr3"}],["path",{d:"M18 11v-1a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0",key:"1pp0yd"}],["path",{d:"M14 10V9a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v1",key:"u654g"}],["path",{d:"M10 9.5V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v10",key:"1e2dtv"}],["path",{d:"M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15",key:"g6ys72"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C8=k("PopcornIcon",[["path",{d:"M18 8a2 2 0 0 0 0-4 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0 0 4",key:"10td1f"}],["path",{d:"M10 22 9 8",key:"yjptiv"}],["path",{d:"m14 22 1-14",key:"8jwc8b"}],["path",{d:"M20 8c.5 0 .9.4.8 1l-2.6 12c-.1.5-.7 1-1.2 1H7c-.6 0-1.1-.4-1.2-1L3.2 9c-.1-.6.3-1 .8-1Z",key:"1qo33t"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S8=k("PopsicleIcon",[["path",{d:"M18.6 14.4c.8-.8.8-2 0-2.8l-8.1-8.1a4.95 4.95 0 1 0-7.1 7.1l8.1 8.1c.9.7 2.1.7 2.9-.1Z",key:"1o68ps"}],["path",{d:"m22 22-5.5-5.5",key:"17o70y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I8=k("PoundSterlingIcon",[["path",{d:"M18 7c0-5.333-8-5.333-8 0",key:"1prm2n"}],["path",{d:"M10 7v14",key:"18tmcs"}],["path",{d:"M6 21h12",key:"4dkmi1"}],["path",{d:"M6 13h10",key:"ybwr4a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L8=k("PowerCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 12V6",key:"30zewn"}],["path",{d:"M8 7.5A6.1 6.1 0 0 0 12 18a6 6 0 0 0 4-10.5",key:"1r0tk2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $8=k("PowerOffIcon",[["path",{d:"M18.36 6.64A9 9 0 0 1 20.77 15",key:"dxknvb"}],["path",{d:"M6.16 6.16a9 9 0 1 0 12.68 12.68",key:"1x7qb5"}],["path",{d:"M12 2v4",key:"3427ic"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A8=k("PowerSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 7v5",key:"ma6bk"}],["path",{d:"M8 9a5.14 5.14 0 0 0 4 8 4.95 4.95 0 0 0 4-8",key:"15eubv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E8=k("PowerIcon",[["path",{d:"M12 2v10",key:"mnfbl"}],["path",{d:"M18.4 6.6a9 9 0 1 1-12.77.04",key:"obofu9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T8=k("PresentationIcon",[["path",{d:"M2 3h20",key:"91anmk"}],["path",{d:"M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3",key:"2k9sn8"}],["path",{d:"m7 21 5-5 5 5",key:"bip4we"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P8=k("PrinterIcon",[["polyline",{points:"6 9 6 2 18 2 18 9",key:"1306q4"}],["path",{d:"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2",key:"143wyd"}],["rect",{width:"12",height:"8",x:"6",y:"14",key:"5ipwut"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D8=k("ProjectorIcon",[["path",{d:"M5 7 3 5",key:"1yys58"}],["path",{d:"M9 6V3",key:"1ptz9u"}],["path",{d:"m13 7 2-2",key:"1w3vmq"}],["circle",{cx:"9",cy:"13",r:"3",key:"1mma13"}],["path",{d:"M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17",key:"2frwzc"}],["path",{d:"M16 16h2",key:"dnq2od"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R8=k("PuzzleIcon",[["path",{d:"M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z",key:"i0oyt7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O8=k("PyramidIcon",[["path",{d:"M2.5 16.88a1 1 0 0 1-.32-1.43l9-13.02a1 1 0 0 1 1.64 0l9 13.01a1 1 0 0 1-.32 1.44l-8.51 4.86a2 2 0 0 1-1.98 0Z",key:"aenxs0"}],["path",{d:"M12 2v20",key:"t6zp3m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V8=k("QrCodeIcon",[["rect",{width:"5",height:"5",x:"3",y:"3",rx:"1",key:"1tu5fj"}],["rect",{width:"5",height:"5",x:"16",y:"3",rx:"1",key:"1v8r4q"}],["rect",{width:"5",height:"5",x:"3",y:"16",rx:"1",key:"1x03jg"}],["path",{d:"M21 16h-3a2 2 0 0 0-2 2v3",key:"177gqh"}],["path",{d:"M21 21v.01",key:"ents32"}],["path",{d:"M12 7v3a2 2 0 0 1-2 2H7",key:"8crl2c"}],["path",{d:"M3 12h.01",key:"nlz23k"}],["path",{d:"M12 3h.01",key:"n36tog"}],["path",{d:"M12 16v.01",key:"133mhm"}],["path",{d:"M16 12h1",key:"1slzba"}],["path",{d:"M21 12v.01",key:"1lwtk9"}],["path",{d:"M12 21v-1",key:"1880an"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U8=k("QuoteIcon",[["path",{d:"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z",key:"4rm80e"}],["path",{d:"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z",key:"10za9r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F8=k("RabbitIcon",[["path",{d:"M13 16a3 3 0 0 1 2.24 5",key:"1epib5"}],["path",{d:"M18 12h.01",key:"yjnet6"}],["path",{d:"M18 21h-8a4 4 0 0 1-4-4 7 7 0 0 1 7-7h.2L9.6 6.4a1 1 0 1 1 2.8-2.8L15.8 7h.2c3.3 0 6 2.7 6 6v1a2 2 0 0 1-2 2h-1a3 3 0 0 0-3 3",key:"ue9ozu"}],["path",{d:"M20 8.54V4a2 2 0 1 0-4 0v3",key:"49iql8"}],["path",{d:"M7.612 12.524a3 3 0 1 0-1.6 4.3",key:"1e33i0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j8=k("RadarIcon",[["path",{d:"M19.07 4.93A10 10 0 0 0 6.99 3.34",key:"z3du51"}],["path",{d:"M4 6h.01",key:"oypzma"}],["path",{d:"M2.29 9.62A10 10 0 1 0 21.31 8.35",key:"qzzz0"}],["path",{d:"M16.24 7.76A6 6 0 1 0 8.23 16.67",key:"1yjesh"}],["path",{d:"M12 18h.01",key:"mhygvu"}],["path",{d:"M17.99 11.66A6 6 0 0 1 15.77 16.67",key:"1u2y91"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}],["path",{d:"m13.41 10.59 5.66-5.66",key:"mhq4k0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H8=k("RadiationIcon",[["path",{d:"M12 12h0.01",key:"6ztbls"}],["path",{d:"M7.5 4.2c-.3-.5-.9-.7-1.3-.4C3.9 5.5 2.3 8.1 2 11c-.1.5.4 1 1 1h5c0-1.5.8-2.8 2-3.4-1.1-1.9-2-3.5-2.5-4.4z",key:"wy49g3"}],["path",{d:"M21 12c.6 0 1-.4 1-1-.3-2.9-1.8-5.5-4.1-7.1-.4-.3-1.1-.2-1.3.3-.6.9-1.5 2.5-2.6 4.3 1.2.7 2 2 2 3.5h5z",key:"vklnvr"}],["path",{d:"M7.5 19.8c-.3.5-.1 1.1.4 1.3 2.6 1.2 5.6 1.2 8.2 0 .5-.2.7-.8.4-1.3-.5-.9-1.4-2.5-2.5-4.3-1.2.7-2.8.7-4 0-1.1 1.8-2 3.4-2.5 4.3z",key:"wkdf1o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N8=k("RadioReceiverIcon",[["path",{d:"M5 16v2",key:"g5qcv5"}],["path",{d:"M19 16v2",key:"1gbaio"}],["rect",{width:"20",height:"8",x:"2",y:"8",rx:"2",key:"vjsjur"}],["path",{d:"M18 12h0",key:"1ucjzd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z8=k("RadioTowerIcon",[["path",{d:"M4.9 16.1C1 12.2 1 5.8 4.9 1.9",key:"s0qx1y"}],["path",{d:"M7.8 4.7a6.14 6.14 0 0 0-.8 7.5",key:"1idnkw"}],["circle",{cx:"12",cy:"9",r:"2",key:"1092wv"}],["path",{d:"M16.2 4.8c2 2 2.26 5.11.8 7.47",key:"ojru2q"}],["path",{d:"M19.1 1.9a9.96 9.96 0 0 1 0 14.1",key:"rhi7fg"}],["path",{d:"M9.5 18h5",key:"mfy3pd"}],["path",{d:"m8 22 4-11 4 11",key:"25yftu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B8=k("RadioIcon",[["path",{d:"M4.9 19.1C1 15.2 1 8.8 4.9 4.9",key:"1vaf9d"}],["path",{d:"M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5",key:"u1ii0m"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}],["path",{d:"M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5",key:"1j5fej"}],["path",{d:"M19.1 4.9C23 8.8 23 15.1 19.1 19",key:"10b0cb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q8=k("RadiusIcon",[["path",{d:"M20.34 17.52a10 10 0 1 0-2.82 2.82",key:"fydyku"}],["circle",{cx:"19",cy:"19",r:"2",key:"17f5cg"}],["path",{d:"m13.41 13.41 4.18 4.18",key:"1gqbwc"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W8=k("RailSymbolIcon",[["path",{d:"M5 15h14",key:"m0yey3"}],["path",{d:"M5 9h14",key:"7tsvo6"}],["path",{d:"m14 20-5-5 6-6-5-5",key:"1jo42i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G8=k("RainbowIcon",[["path",{d:"M22 17a10 10 0 0 0-20 0",key:"ozegv"}],["path",{d:"M6 17a6 6 0 0 1 12 0",key:"5giftw"}],["path",{d:"M10 17a2 2 0 0 1 4 0",key:"gnsikk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z8=k("RatIcon",[["path",{d:"M17 5c0-1.7-1.3-3-3-3s-3 1.3-3 3c0 .8.3 1.5.8 2H11c-3.9 0-7 3.1-7 7v0c0 2.2 1.8 4 4 4",key:"16aj0u"}],["path",{d:"M16.8 3.9c.3-.3.6-.5 1-.7 1.5-.6 3.3.1 3.9 1.6.6 1.5-.1 3.3-1.6 3.9l1.6 2.8c.2.3.2.7.2 1-.2.8-.9 1.2-1.7 1.1 0 0-1.6-.3-2.7-.6H17c-1.7 0-3 1.3-3 3",key:"1crdmb"}],["path",{d:"M13.2 18a3 3 0 0 0-2.2-5",key:"1ol3lk"}],["path",{d:"M13 22H4a2 2 0 0 1 0-4h12",key:"bt3f23"}],["path",{d:"M16 9h.01",key:"1bdo4e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K8=k("RatioIcon",[["rect",{width:"12",height:"20",x:"6",y:"2",rx:"2",key:"1oxtiu"}],["rect",{width:"20",height:"12",x:"2",y:"6",rx:"2",key:"9lu3g6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X8=k("ReceiptIcon",[["path",{d:"M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1-2-1Z",key:"wqdwcb"}],["path",{d:"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8",key:"1h4pet"}],["path",{d:"M12 17V7",key:"pyj7ub"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y8=k("RectangleHorizontalIcon",[["rect",{width:"20",height:"12",x:"2",y:"6",rx:"2",key:"9lu3g6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q8=k("RectangleVerticalIcon",[["rect",{width:"12",height:"20",x:"6",y:"2",rx:"2",key:"1oxtiu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J8=k("RecycleIcon",[["path",{d:"M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5",key:"x6z5xu"}],["path",{d:"M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12",key:"1x4zh5"}],["path",{d:"m14 16-3 3 3 3",key:"f6jyew"}],["path",{d:"M8.293 13.596 7.196 9.5 3.1 10.598",key:"wf1obh"}],["path",{d:"m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843",key:"9tzpgr"}],["path",{d:"m13.378 9.633 4.096 1.098 1.097-4.096",key:"1oe83g"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e6=k("Redo2Icon",[["path",{d:"m15 14 5-5-5-5",key:"12vg1m"}],["path",{d:"M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13",key:"19mnr4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t6=k("RedoDotIcon",[["circle",{cx:"12",cy:"17",r:"1",key:"1ixnty"}],["path",{d:"M21 7v6h-6",key:"3ptur4"}],["path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7",key:"1kgawr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a6=k("RedoIcon",[["path",{d:"M21 7v6h-6",key:"3ptur4"}],["path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7",key:"1kgawr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n6=k("RefreshCcwDotIcon",[["path",{d:"M3 2v6h6",key:"18ldww"}],["path",{d:"M21 12A9 9 0 0 0 6 5.3L3 8",key:"1pbrqz"}],["path",{d:"M21 22v-6h-6",key:"usdfbe"}],["path",{d:"M3 12a9 9 0 0 0 15 6.7l3-2.7",key:"1hosoe"}],["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s6=k("RefreshCcwIcon",[["path",{d:"M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"14sxne"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}],["path",{d:"M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16",key:"1hlbsb"}],["path",{d:"M16 16h5v5",key:"ccwih5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o6=k("RefreshCwOffIcon",[["path",{d:"M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47",key:"1krf6h"}],["path",{d:"M8 16H3v5",key:"1cv678"}],["path",{d:"M3 12C3 9.51 4 7.26 5.64 5.64",key:"ruvoct"}],["path",{d:"m3 16 2.26 2.26A9.75 9.75 0 0 0 12 21c2.49 0 4.74-1 6.36-2.64",key:"19q130"}],["path",{d:"M21 12c0 1-.16 1.97-.47 2.87",key:"4w8emr"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}],["path",{d:"M22 22 2 2",key:"1r8tn9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r6=k("RefreshCwIcon",[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",key:"v9h5vc"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",key:"3uifl3"}],["path",{d:"M8 16H3v5",key:"1cv678"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i6=k("RefrigeratorIcon",[["path",{d:"M5 6a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6Z",key:"fpq118"}],["path",{d:"M5 10h14",key:"elsbfy"}],["path",{d:"M15 7v6",key:"1nx30x"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l6=k("RegexIcon",[["path",{d:"M17 3v10",key:"15fgeh"}],["path",{d:"m12.67 5.5 8.66 5",key:"1gpheq"}],["path",{d:"m12.67 10.5 8.66-5",key:"1dkfa6"}],["path",{d:"M9 17a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2z",key:"swwfx4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c6=k("RemoveFormattingIcon",[["path",{d:"M4 7V4h16v3",key:"9msm58"}],["path",{d:"M5 20h6",key:"1h6pxn"}],["path",{d:"M13 4 8 20",key:"kqq6aj"}],["path",{d:"m15 15 5 5",key:"me55sn"}],["path",{d:"m20 15-5 5",key:"11p7ol"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d6=k("Repeat1Icon",[["path",{d:"m17 2 4 4-4 4",key:"nntrym"}],["path",{d:"M3 11v-1a4 4 0 0 1 4-4h14",key:"84bu3i"}],["path",{d:"m7 22-4-4 4-4",key:"1wqhfi"}],["path",{d:"M21 13v1a4 4 0 0 1-4 4H3",key:"1rx37r"}],["path",{d:"M11 10h1v4",key:"70cz1p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u6=k("Repeat2Icon",[["path",{d:"m2 9 3-3 3 3",key:"1ltn5i"}],["path",{d:"M13 18H7a2 2 0 0 1-2-2V6",key:"1r6tfw"}],["path",{d:"m22 15-3 3-3-3",key:"4rnwn2"}],["path",{d:"M11 6h6a2 2 0 0 1 2 2v10",key:"2f72bc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p6=k("RepeatIcon",[["path",{d:"m17 2 4 4-4 4",key:"nntrym"}],["path",{d:"M3 11v-1a4 4 0 0 1 4-4h14",key:"84bu3i"}],["path",{d:"m7 22-4-4 4-4",key:"1wqhfi"}],["path",{d:"M21 13v1a4 4 0 0 1-4 4H3",key:"1rx37r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h6=k("ReplaceAllIcon",[["path",{d:"M14 4c0-1.1.9-2 2-2",key:"1mvvbw"}],["path",{d:"M20 2c1.1 0 2 .9 2 2",key:"1mj6oe"}],["path",{d:"M22 8c0 1.1-.9 2-2 2",key:"v1wql3"}],["path",{d:"M16 10c-1.1 0-2-.9-2-2",key:"821ux0"}],["path",{d:"m3 7 3 3 3-3",key:"x25e72"}],["path",{d:"M6 10V5c0-1.7 1.3-3 3-3h1",key:"13af7h"}],["rect",{width:"8",height:"8",x:"2",y:"14",rx:"2",key:"17ihk4"}],["path",{d:"M14 14c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2",key:"1w9p8c"}],["path",{d:"M20 14c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2",key:"m45eaa"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f6=k("ReplaceIcon",[["path",{d:"M14 4c0-1.1.9-2 2-2",key:"1mvvbw"}],["path",{d:"M20 2c1.1 0 2 .9 2 2",key:"1mj6oe"}],["path",{d:"M22 8c0 1.1-.9 2-2 2",key:"v1wql3"}],["path",{d:"M16 10c-1.1 0-2-.9-2-2",key:"821ux0"}],["path",{d:"m3 7 3 3 3-3",key:"x25e72"}],["path",{d:"M6 10V5c0-1.7 1.3-3 3-3h1",key:"13af7h"}],["rect",{width:"8",height:"8",x:"2",y:"14",rx:"2",key:"17ihk4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m6=k("ReplyAllIcon",[["polyline",{points:"7 17 2 12 7 7",key:"t83bqg"}],["polyline",{points:"12 17 7 12 12 7",key:"1g4ajm"}],["path",{d:"M22 18v-2a4 4 0 0 0-4-4H7",key:"1fcyog"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v6=k("ReplyIcon",[["polyline",{points:"9 17 4 12 9 7",key:"hvgpf2"}],["path",{d:"M20 18v-2a4 4 0 0 0-4-4H4",key:"5vmcpk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y6=k("RewindIcon",[["polygon",{points:"11 19 2 12 11 5 11 19",key:"14yba5"}],["polygon",{points:"22 19 13 12 22 5 22 19",key:"1pi1cj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _6=k("RibbonIcon",[["path",{d:"M17.75 9.01c-.52 2.08-1.83 3.64-3.18 5.49l-2.6 3.54-2.97 4-3.5-2.54 3.85-4.97c-1.86-2.61-2.8-3.77-3.16-5.44",key:"1njedg"}],["path",{d:"M17.75 9.01A7 7 0 0 0 6.2 9.1C6.06 8.5 6 7.82 6 7c0-3.5 2.83-5 5.98-5C15.24 2 18 3.5 18 7c0 .73-.09 1.4-.25 2.01Z",key:"10len7"}],["path",{d:"m9.35 14.53 2.64-3.31",key:"1wfi09"}],["path",{d:"m11.97 18.04 2.99 4 3.54-2.54-3.93-5",key:"1ezyge"}],["path",{d:"M14 8c0 1-1 2-2.01 3.22C11 10 10 9 10 8a2 2 0 1 1 4 0",key:"aw0zq5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g6=k("RocketIcon",[["path",{d:"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",key:"m3kijz"}],["path",{d:"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z",key:"1fmvmk"}],["path",{d:"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0",key:"1f8sc4"}],["path",{d:"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5",key:"qeys4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k6=k("RockingChairIcon",[["polyline",{points:"3.5 2 6.5 12.5 18 12.5",key:"y3iy52"}],["line",{x1:"9.5",x2:"5.5",y1:"12.5",y2:"20",key:"19vg5i"}],["line",{x1:"15",x2:"18.5",y1:"12.5",y2:"20",key:"1inpmv"}],["path",{d:"M2.75 18a13 13 0 0 0 18.5 0",key:"1nquas"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b6=k("RollerCoasterIcon",[["path",{d:"M6 19V5",key:"1r845m"}],["path",{d:"M10 19V6.8",key:"9j2tfs"}],["path",{d:"M14 19v-7.8",key:"10s8qv"}],["path",{d:"M18 5v4",key:"1tajlv"}],["path",{d:"M18 19v-6",key:"ielfq3"}],["path",{d:"M22 19V9",key:"158nzp"}],["path",{d:"M2 19V9a4 4 0 0 1 4-4c2 0 4 1.33 6 4s4 4 6 4a4 4 0 1 0-3-6.65",key:"1930oh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sl=k("Rotate3dIcon",[["path",{d:"M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2",key:"10n0gc"}],["path",{d:"m15.194 13.707 3.814 1.86-1.86 3.814",key:"16shm9"}],["path",{d:"M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4",key:"1lxi77"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w6=k("RotateCcwIcon",[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x6=k("RotateCwIcon",[["path",{d:"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8",key:"1p45f6"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M6=k("RouteOffIcon",[["circle",{cx:"6",cy:"19",r:"3",key:"1kj8tv"}],["path",{d:"M9 19h8.5c.4 0 .9-.1 1.3-.2",key:"1effex"}],["path",{d:"M5.2 5.2A3.5 3.53 0 0 0 6.5 12H12",key:"k9y2ds"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M21 15.3a3.5 3.5 0 0 0-3.3-3.3",key:"11nlu2"}],["path",{d:"M15 5h-4.3",key:"6537je"}],["circle",{cx:"18",cy:"5",r:"3",key:"gq8acd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C6=k("RouteIcon",[["circle",{cx:"6",cy:"19",r:"3",key:"1kj8tv"}],["path",{d:"M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15",key:"1d8sl"}],["circle",{cx:"18",cy:"5",r:"3",key:"gq8acd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S6=k("RouterIcon",[["rect",{width:"20",height:"8",x:"2",y:"14",rx:"2",key:"w68u3i"}],["path",{d:"M6.01 18H6",key:"19vcac"}],["path",{d:"M10.01 18H10",key:"uamcmx"}],["path",{d:"M15 10v4",key:"qjz1xs"}],["path",{d:"M17.84 7.17a4 4 0 0 0-5.66 0",key:"1rif40"}],["path",{d:"M20.66 4.34a8 8 0 0 0-11.31 0",key:"6a5xfq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ol=k("Rows2Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 12h18",key:"1i2n21"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rl=k("Rows3Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M21 9H3",key:"1338ky"}],["path",{d:"M21 15H3",key:"9uk58r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I6=k("Rows4Icon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M21 7.5H3",key:"1hm9pq"}],["path",{d:"M21 12H3",key:"2avoz0"}],["path",{d:"M21 16.5H3",key:"n7jzkj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L6=k("RssIcon",[["path",{d:"M4 11a9 9 0 0 1 9 9",key:"pv89mb"}],["path",{d:"M4 4a16 16 0 0 1 16 16",key:"k0647b"}],["circle",{cx:"5",cy:"19",r:"1",key:"bfqh0e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $6=k("RulerIcon",[["path",{d:"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z",key:"icamh8"}],["path",{d:"m14.5 12.5 2-2",key:"inckbg"}],["path",{d:"m11.5 9.5 2-2",key:"fmmyf7"}],["path",{d:"m8.5 6.5 2-2",key:"vc6u1g"}],["path",{d:"m17.5 15.5 2-2",key:"wo5hmg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A6=k("RussianRubleIcon",[["path",{d:"M6 11h8a4 4 0 0 0 0-8H9v18",key:"18ai8t"}],["path",{d:"M6 15h8",key:"1y8f6l"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E6=k("SailboatIcon",[["path",{d:"M22 18H2a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4Z",key:"1404fh"}],["path",{d:"M21 14 10 2 3 14h18Z",key:"1nzg7v"}],["path",{d:"M10 2v16",key:"1labyt"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T6=k("SaladIcon",[["path",{d:"M7 21h10",key:"1b0cd5"}],["path",{d:"M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z",key:"4rw317"}],["path",{d:"M11.38 12a2.4 2.4 0 0 1-.4-4.77 2.4 2.4 0 0 1 3.2-2.77 2.4 2.4 0 0 1 3.47-.63 2.4 2.4 0 0 1 3.37 3.37 2.4 2.4 0 0 1-1.1 3.7 2.51 2.51 0 0 1 .03 1.1",key:"10xrj0"}],["path",{d:"m13 12 4-4",key:"1hckqy"}],["path",{d:"M10.9 7.25A3.99 3.99 0 0 0 4 10c0 .73.2 1.41.54 2",key:"1p4srx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P6=k("SandwichIcon",[["path",{d:"M3 11v3a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-3",key:"34v9d7"}],["path",{d:"M12 19H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-3.83",key:"1k5vfb"}],["path",{d:"m3 11 7.77-6.04a2 2 0 0 1 2.46 0L21 11H3Z",key:"1oe7l6"}],["path",{d:"M12.97 19.77 7 15h12.5l-3.75 4.5a2 2 0 0 1-2.78.27Z",key:"1ts2ri"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D6=k("SatelliteDishIcon",[["path",{d:"M4 10a7.31 7.31 0 0 0 10 10Z",key:"1fzpp3"}],["path",{d:"m9 15 3-3",key:"88sc13"}],["path",{d:"M17 13a6 6 0 0 0-6-6",key:"15cc6u"}],["path",{d:"M21 13A10 10 0 0 0 11 3",key:"11nf8s"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R6=k("SatelliteIcon",[["path",{d:"M13 7 9 3 5 7l4 4",key:"vyckw6"}],["path",{d:"m17 11 4 4-4 4-4-4",key:"rchckc"}],["path",{d:"m8 12 4 4 6-6-4-4Z",key:"1sshf7"}],["path",{d:"m16 8 3-3",key:"x428zp"}],["path",{d:"M9 21a6 6 0 0 0-6-6",key:"1iajcf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O6=k("SaveAllIcon",[["path",{d:"M6 4a2 2 0 0 1 2-2h10l4 4v10.2a2 2 0 0 1-2 1.8H8a2 2 0 0 1-2-2Z",key:"1unput"}],["path",{d:"M10 2v4h6",key:"1p5sg6"}],["path",{d:"M18 18v-7h-8v7",key:"1oniuk"}],["path",{d:"M18 22H4a2 2 0 0 1-2-2V6",key:"pblm9e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V6=k("SaveIcon",[["path",{d:"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z",key:"1owoqh"}],["polyline",{points:"17 21 17 13 7 13 7 21",key:"1md35c"}],["polyline",{points:"7 3 7 8 15 8",key:"8nz8an"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const il=k("Scale3dIcon",[["circle",{cx:"19",cy:"19",r:"2",key:"17f5cg"}],["circle",{cx:"5",cy:"5",r:"2",key:"1gwv83"}],["path",{d:"M5 7v12h12",key:"vtaa4r"}],["path",{d:"m5 19 6-6",key:"jh6hbb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U6=k("ScaleIcon",[["path",{d:"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z",key:"7g6ntu"}],["path",{d:"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z",key:"ijws7r"}],["path",{d:"M7 21h10",key:"1b0cd5"}],["path",{d:"M12 3v18",key:"108xh3"}],["path",{d:"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2",key:"3gwbw2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F6=k("ScalingIcon",[["path",{d:"M21 3 9 15",key:"15kdhq"}],["path",{d:"M12 3H3v18h18v-9",key:"8suug0"}],["path",{d:"M16 3h5v5",key:"1806ms"}],["path",{d:"M14 15H9v-5",key:"pi4jk9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j6=k("ScanBarcodeIcon",[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}],["path",{d:"M8 7v10",key:"23sfjj"}],["path",{d:"M12 7v10",key:"jspqdw"}],["path",{d:"M17 7v10",key:"578dap"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H6=k("ScanEyeIcon",[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}],["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["path",{d:"M5 12s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5",key:"nhuolu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N6=k("ScanFaceIcon",[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}],["path",{d:"M8 14s1.5 2 4 2 4-2 4-2",key:"1y1vjs"}],["path",{d:"M9 9h.01",key:"1q5me6"}],["path",{d:"M15 9h.01",key:"x1ddxp"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z6=k("ScanLineIcon",[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}],["path",{d:"M7 12h10",key:"b7w52i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B6=k("ScanSearchIcon",[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["path",{d:"m16 16-1.9-1.9",key:"1dq9hf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q6=k("ScanTextIcon",[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}],["path",{d:"M7 8h8",key:"1jbsf9"}],["path",{d:"M7 12h10",key:"b7w52i"}],["path",{d:"M7 16h6",key:"1vyc9m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W6=k("ScanIcon",[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2",key:"aa7l1z"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2",key:"4qcy5o"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2",key:"6vwrx8"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2",key:"ioqczr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G6=k("ScatterChartIcon",[["circle",{cx:"7.5",cy:"7.5",r:".5",key:"1x97lo"}],["circle",{cx:"18.5",cy:"5.5",r:".5",key:"56iowl"}],["circle",{cx:"11.5",cy:"11.5",r:".5",key:"m9xkw9"}],["circle",{cx:"7.5",cy:"16.5",r:".5",key:"14ln9z"}],["circle",{cx:"17.5",cy:"14.5",r:".5",key:"14qxqt"}],["path",{d:"M3 3v18h18",key:"1s2lah"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z6=k("School2Icon",[["circle",{cx:"12",cy:"10",r:"1",key:"1gnqs8"}],["path",{d:"M22 20V8h-4l-6-4-6 4H2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2Z",key:"8z0lq4"}],["path",{d:"M6 17v.01",key:"roodi6"}],["path",{d:"M6 13v.01",key:"67c122"}],["path",{d:"M18 17v.01",key:"12ktxm"}],["path",{d:"M18 13v.01",key:"tn1rt1"}],["path",{d:"M14 22v-5a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v5",key:"jfgdp0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K6=k("SchoolIcon",[["path",{d:"m4 6 8-4 8 4",key:"1q0ilc"}],["path",{d:"m18 10 4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2",key:"1vwozw"}],["path",{d:"M14 22v-4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4",key:"cpkuc4"}],["path",{d:"M18 5v17",key:"1sw6gf"}],["path",{d:"M6 5v17",key:"1xfsm0"}],["circle",{cx:"12",cy:"9",r:"2",key:"1092wv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X6=k("ScissorsLineDashedIcon",[["path",{d:"M5.42 9.42 8 12",key:"12pkuq"}],["circle",{cx:"4",cy:"8",r:"2",key:"107mxr"}],["path",{d:"m14 6-8.58 8.58",key:"gvzu5l"}],["circle",{cx:"4",cy:"16",r:"2",key:"1ehqvc"}],["path",{d:"M10.8 14.8 14 18",key:"ax7m9r"}],["path",{d:"M16 12h-2",key:"10asgb"}],["path",{d:"M22 12h-2",key:"14jgyd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y6=k("ScissorsSquareDashedBottomIcon",[["path",{d:"M4 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2",key:"1vzg26"}],["path",{d:"M10 22H8",key:"euku7a"}],["path",{d:"M16 22h-2",key:"18d249"}],["circle",{cx:"8",cy:"8",r:"2",key:"14cg06"}],["path",{d:"M9.414 9.414 12 12",key:"qz4lzr"}],["path",{d:"M14.8 14.8 18 18",key:"11flf1"}],["circle",{cx:"8",cy:"16",r:"2",key:"1acxsx"}],["path",{d:"m18 6-8.586 8.586",key:"11kzk1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q6=k("ScissorsSquareIcon",[["rect",{width:"20",height:"20",x:"2",y:"2",rx:"2",key:"1btzen"}],["circle",{cx:"8",cy:"8",r:"2",key:"14cg06"}],["path",{d:"M9.414 9.414 12 12",key:"qz4lzr"}],["path",{d:"M14.8 14.8 18 18",key:"11flf1"}],["circle",{cx:"8",cy:"16",r:"2",key:"1acxsx"}],["path",{d:"m18 6-8.586 8.586",key:"11kzk1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J6=k("ScissorsIcon",[["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["path",{d:"M8.12 8.12 12 12",key:"1alkpv"}],["path",{d:"M20 4 8.12 15.88",key:"xgtan2"}],["circle",{cx:"6",cy:"18",r:"3",key:"fqmcym"}],["path",{d:"M14.8 14.8 20 20",key:"ptml3r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const eM=k("ScreenShareOffIcon",[["path",{d:"M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3",key:"i8wdob"}],["path",{d:"M8 21h8",key:"1ev6f3"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"m22 3-5 5",key:"12jva0"}],["path",{d:"m17 3 5 5",key:"k36vhe"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tM=k("ScreenShareIcon",[["path",{d:"M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3",key:"i8wdob"}],["path",{d:"M8 21h8",key:"1ev6f3"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"m17 8 5-5",key:"fqif7o"}],["path",{d:"M17 3h5v5",key:"1o3tu8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const aM=k("ScrollTextIcon",[["path",{d:"M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4",key:"13a6an"}],["path",{d:"M19 17V5a2 2 0 0 0-2-2H4",key:"zz82l3"}],["path",{d:"M15 8h-5",key:"1khuty"}],["path",{d:"M15 12h-5",key:"r7krc0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nM=k("ScrollIcon",[["path",{d:"M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4",key:"13a6an"}],["path",{d:"M19 17V5a2 2 0 0 0-2-2H4",key:"zz82l3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sM=k("SearchCheckIcon",[["path",{d:"m8 11 2 2 4-4",key:"1sed1v"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const oM=k("SearchCodeIcon",[["path",{d:"m9 9-2 2 2 2",key:"17gsfh"}],["path",{d:"m13 13 2-2-2-2",key:"186z8k"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rM=k("SearchSlashIcon",[["path",{d:"m13.5 8.5-5 5",key:"1cs55j"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const iM=k("SearchXIcon",[["path",{d:"m13.5 8.5-5 5",key:"1cs55j"}],["path",{d:"m8.5 8.5 5 5",key:"a8mexj"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lM=k("SearchIcon",[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ll=k("SendHorizontalIcon",[["path",{d:"m3 3 3 9-3 9 19-9Z",key:"1aobqy"}],["path",{d:"M6 12h16",key:"s4cdu5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cM=k("SendToBackIcon",[["rect",{x:"14",y:"14",width:"8",height:"8",rx:"2",key:"1b0bso"}],["rect",{x:"2",y:"2",width:"8",height:"8",rx:"2",key:"1x09vl"}],["path",{d:"M7 14v1a2 2 0 0 0 2 2h1",key:"pao6x6"}],["path",{d:"M14 7h1a2 2 0 0 1 2 2v1",key:"19tdru"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dM=k("SendIcon",[["path",{d:"m22 2-7 20-4-9-9-4Z",key:"1q3vgg"}],["path",{d:"M22 2 11 13",key:"nzbqef"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uM=k("SeparatorHorizontalIcon",[["line",{x1:"3",x2:"21",y1:"12",y2:"12",key:"10d38w"}],["polyline",{points:"8 8 12 4 16 8",key:"zo8t4w"}],["polyline",{points:"16 16 12 20 8 16",key:"1oyrid"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pM=k("SeparatorVerticalIcon",[["line",{x1:"12",x2:"12",y1:"3",y2:"21",key:"1efggb"}],["polyline",{points:"8 8 4 12 8 16",key:"bnfmv4"}],["polyline",{points:"16 16 20 12 16 8",key:"u90052"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hM=k("ServerCogIcon",[["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["path",{d:"M4.5 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-.5",key:"tn8das"}],["path",{d:"M4.5 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-.5",key:"1g2pve"}],["path",{d:"M6 6h.01",key:"1utrut"}],["path",{d:"M6 18h.01",key:"uhywen"}],["path",{d:"m15.7 13.4-.9-.3",key:"1jwmzr"}],["path",{d:"m9.2 10.9-.9-.3",key:"qapnim"}],["path",{d:"m10.6 15.7.3-.9",key:"quwk0k"}],["path",{d:"m13.6 15.7-.4-1",key:"cb9xp7"}],["path",{d:"m10.8 9.3-.4-1",key:"1uaiz5"}],["path",{d:"m8.3 13.6 1-.4",key:"s6srou"}],["path",{d:"m14.7 10.8 1-.4",key:"4d31cq"}],["path",{d:"m13.4 8.3-.3.9",key:"1bm987"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fM=k("ServerCrashIcon",[["path",{d:"M6 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2",key:"4b9dqc"}],["path",{d:"M6 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2",key:"22nnkd"}],["path",{d:"M6 6h.01",key:"1utrut"}],["path",{d:"M6 18h.01",key:"uhywen"}],["path",{d:"m13 6-4 6h6l-4 6",key:"14hqih"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mM=k("ServerOffIcon",[["path",{d:"M7 2h13a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-5",key:"bt2siv"}],["path",{d:"M10 10 2.5 2.5C2 2 2 2.5 2 5v3a2 2 0 0 0 2 2h6z",key:"1hjrv1"}],["path",{d:"M22 17v-1a2 2 0 0 0-2-2h-1",key:"1iynyr"}],["path",{d:"M4 14a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16.5l1-.5.5.5-8-8H4z",key:"161ggg"}],["path",{d:"M6 18h.01",key:"uhywen"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vM=k("ServerIcon",[["rect",{width:"20",height:"8",x:"2",y:"2",rx:"2",ry:"2",key:"ngkwjq"}],["rect",{width:"20",height:"8",x:"2",y:"14",rx:"2",ry:"2",key:"iecqi9"}],["line",{x1:"6",x2:"6.01",y1:"6",y2:"6",key:"16zg32"}],["line",{x1:"6",x2:"6.01",y1:"18",y2:"18",key:"nzw8ys"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yM=k("Settings2Icon",[["path",{d:"M20 7h-9",key:"3s1dr2"}],["path",{d:"M14 17H5",key:"gfn3mx"}],["circle",{cx:"17",cy:"17",r:"3",key:"18b49y"}],["circle",{cx:"7",cy:"7",r:"3",key:"dfmy0x"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _M=k("SettingsIcon",[["path",{d:"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",key:"1qme2f"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gM=k("ShapesIcon",[["path",{d:"M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z",key:"1bo67w"}],["rect",{x:"3",y:"14",width:"7",height:"7",rx:"1",key:"1bkyp8"}],["circle",{cx:"17.5",cy:"17.5",r:"3.5",key:"w3z12y"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kM=k("Share2Icon",[["circle",{cx:"18",cy:"5",r:"3",key:"gq8acd"}],["circle",{cx:"6",cy:"12",r:"3",key:"w7nqdw"}],["circle",{cx:"18",cy:"19",r:"3",key:"1xt0gg"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49",key:"47mynk"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49",key:"1n3mei"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bM=k("ShareIcon",[["path",{d:"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8",key:"1b2hhj"}],["polyline",{points:"16 6 12 2 8 6",key:"m901s6"}],["line",{x1:"12",x2:"12",y1:"2",y2:"15",key:"1p0rca"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wM=k("SheetIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["line",{x1:"3",x2:"21",y1:"9",y2:"9",key:"1vqk6q"}],["line",{x1:"3",x2:"21",y1:"15",y2:"15",key:"o2sbyz"}],["line",{x1:"9",x2:"9",y1:"9",y2:"21",key:"1ib60c"}],["line",{x1:"15",x2:"15",y1:"9",y2:"21",key:"1n26ft"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xM=k("ShellIcon",[["path",{d:"M14 11a2 2 0 1 1-4 0 4 4 0 0 1 8 0 6 6 0 0 1-12 0 8 8 0 0 1 16 0 10 10 0 1 1-20 0 11.93 11.93 0 0 1 2.42-7.22 2 2 0 1 1 3.16 2.44",key:"1cn552"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const MM=k("ShieldAlertIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"M12 8v4",key:"1got3b"}],["path",{d:"M12 16h.01",key:"1drbdi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const CM=k("ShieldBanIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"m4 5 14 12",key:"1ta6nf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const SM=k("ShieldCheckIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const IM=k("ShieldEllipsisIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"M8 11h.01",key:"1dfujw"}],["path",{d:"M12 11h.01",key:"z322tv"}],["path",{d:"M16 11h.01",key:"xkw8gn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const LM=k("ShieldHalfIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"M12 22V2",key:"zs6s6o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $M=k("ShieldMinusIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"M8 11h8",key:"vwpz6n"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const AM=k("ShieldOffIcon",[["path",{d:"M19.7 14a6.9 6.9 0 0 0 .3-2V5l-8-3-3.2 1.2",key:"342pvf"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M4.7 4.7 4 5v7c0 6 8 10 8 10a20.3 20.3 0 0 0 5.62-4.38",key:"p0ycf4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const EM=k("ShieldPlusIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"M8 11h8",key:"vwpz6n"}],["path",{d:"M12 15V7",key:"1ycneb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const TM=k("ShieldQuestionIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3",key:"mhlwft"}],["path",{d:"M12 17h.01",key:"p32p05"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cl=k("ShieldXIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}],["path",{d:"m14.5 9-5 5",key:"1m49dw"}],["path",{d:"m9.5 9 5 5",key:"wyx7zg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const PM=k("ShieldIcon",[["path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",key:"1irkt0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const DM=k("ShipWheelIcon",[["circle",{cx:"12",cy:"12",r:"8",key:"46899m"}],["path",{d:"M12 2v7.5",key:"1e5rl5"}],["path",{d:"m19 5-5.23 5.23",key:"1ezxxf"}],["path",{d:"M22 12h-7.5",key:"le1719"}],["path",{d:"m19 19-5.23-5.23",key:"p3fmgn"}],["path",{d:"M12 14.5V22",key:"dgcmos"}],["path",{d:"M10.23 13.77 5 19",key:"qwopd4"}],["path",{d:"M9.5 12H2",key:"r7bup8"}],["path",{d:"M10.23 10.23 5 5",key:"k2y7lj"}],["circle",{cx:"12",cy:"12",r:"2.5",key:"ix0uyj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const RM=k("ShipIcon",[["path",{d:"M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1 .6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"iegodh"}],["path",{d:"M19.38 20A11.6 11.6 0 0 0 21 14l-9-4-9 4c0 2.9.94 5.34 2.81 7.76",key:"fp8vka"}],["path",{d:"M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6",key:"qpkstq"}],["path",{d:"M12 10v4",key:"1kjpxc"}],["path",{d:"M12 2v3",key:"qbqxhf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const OM=k("ShirtIcon",[["path",{d:"M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z",key:"1wgbhj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const VM=k("ShoppingBagIcon",[["path",{d:"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z",key:"hou9p0"}],["path",{d:"M3 6h18",key:"d0wm0j"}],["path",{d:"M16 10a4 4 0 0 1-8 0",key:"1ltviw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const UM=k("ShoppingBasketIcon",[["path",{d:"m5 11 4-7",key:"116ra9"}],["path",{d:"m19 11-4-7",key:"cnml18"}],["path",{d:"M2 11h20",key:"3eubbj"}],["path",{d:"m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8c.9 0 1.8-.7 2-1.6l1.7-7.4",key:"1x2lvw"}],["path",{d:"m9 11 1 9",key:"1ojof7"}],["path",{d:"M4.5 15.5h15",key:"13mye1"}],["path",{d:"m15 11-1 9",key:"5wnq3a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const FM=k("ShoppingCartIcon",[["circle",{cx:"8",cy:"21",r:"1",key:"jimo8o"}],["circle",{cx:"19",cy:"21",r:"1",key:"13723u"}],["path",{d:"M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12",key:"9zh506"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jM=k("ShovelIcon",[["path",{d:"M2 22v-5l5-5 5 5-5 5z",key:"1fh25c"}],["path",{d:"M9.5 14.5 16 8",key:"1smz5x"}],["path",{d:"m17 2 5 5-.5.5a3.53 3.53 0 0 1-5 0s0 0 0 0a3.53 3.53 0 0 1 0-5L17 2",key:"1q8uv5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const HM=k("ShowerHeadIcon",[["path",{d:"m4 4 2.5 2.5",key:"uv2vmf"}],["path",{d:"M13.5 6.5a4.95 4.95 0 0 0-7 7",key:"frdkwv"}],["path",{d:"M15 5 5 15",key:"1ag8rq"}],["path",{d:"M14 17v.01",key:"eokfpp"}],["path",{d:"M10 16v.01",key:"14uyyl"}],["path",{d:"M13 13v.01",key:"1v1k97"}],["path",{d:"M16 10v.01",key:"5169yg"}],["path",{d:"M11 20v.01",key:"cj92p8"}],["path",{d:"M17 14v.01",key:"11cswd"}],["path",{d:"M20 11v.01",key:"19e0od"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const NM=k("ShrinkIcon",[["path",{d:"m15 15 6 6m-6-6v4.8m0-4.8h4.8",key:"17vawe"}],["path",{d:"M9 19.8V15m0 0H4.2M9 15l-6 6",key:"chjx8e"}],["path",{d:"M15 4.2V9m0 0h4.8M15 9l6-6",key:"lav6yq"}],["path",{d:"M9 4.2V9m0 0H4.2M9 9 3 3",key:"1pxi2q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zM=k("ShrubIcon",[["path",{d:"M12 22v-7l-2-2",key:"eqv9mc"}],["path",{d:"M17 8v.8A6 6 0 0 1 13.8 20v0H10v0A6.5 6.5 0 0 1 7 8h0a5 5 0 0 1 10 0Z",key:"12jcau"}],["path",{d:"m14 14-2 2",key:"847xa2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const BM=k("ShuffleIcon",[["path",{d:"M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22",key:"1wmou1"}],["path",{d:"m18 2 4 4-4 4",key:"pucp1d"}],["path",{d:"M2 6h1.9c1.5 0 2.9.9 3.6 2.2",key:"10bdb2"}],["path",{d:"M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8",key:"vgxac0"}],["path",{d:"m18 14 4 4-4 4",key:"10pe0f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qM=k("SigmaSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M16 8.9V7H8l4 5-4 5h8v-1.9",key:"9nih0i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const WM=k("SigmaIcon",[["path",{d:"M18 7V4H6l6 8-6 8h12v-3",key:"zis8ev"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const GM=k("SignalHighIcon",[["path",{d:"M2 20h.01",key:"4haj6o"}],["path",{d:"M7 20v-4",key:"j294jx"}],["path",{d:"M12 20v-8",key:"i3yub9"}],["path",{d:"M17 20V8",key:"1tkaf5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ZM=k("SignalLowIcon",[["path",{d:"M2 20h.01",key:"4haj6o"}],["path",{d:"M7 20v-4",key:"j294jx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const KM=k("SignalMediumIcon",[["path",{d:"M2 20h.01",key:"4haj6o"}],["path",{d:"M7 20v-4",key:"j294jx"}],["path",{d:"M12 20v-8",key:"i3yub9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const XM=k("SignalZeroIcon",[["path",{d:"M2 20h.01",key:"4haj6o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const YM=k("SignalIcon",[["path",{d:"M2 20h.01",key:"4haj6o"}],["path",{d:"M7 20v-4",key:"j294jx"}],["path",{d:"M12 20v-8",key:"i3yub9"}],["path",{d:"M17 20V8",key:"1tkaf5"}],["path",{d:"M22 4v16",key:"sih9yq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const QM=k("SignpostBigIcon",[["path",{d:"M10 9H4L2 7l2-2h6",key:"1hq7x2"}],["path",{d:"M14 5h6l2 2-2 2h-6",key:"bv62ej"}],["path",{d:"M10 22V4a2 2 0 1 1 4 0v18",key:"eqpcf2"}],["path",{d:"M8 22h8",key:"rmew8v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const JM=k("SignpostIcon",[["path",{d:"M12 3v3",key:"1n5kay"}],["path",{d:"M18.5 13h-13L2 9.5 5.5 6h13L22 9.5Z",key:"27os56"}],["path",{d:"M12 13v8",key:"1l5pq0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e7=k("SirenIcon",[["path",{d:"M7 12a5 5 0 0 1 5-5v0a5 5 0 0 1 5 5v6H7v-6Z",key:"rmc51c"}],["path",{d:"M5 20a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2H5v-2Z",key:"yyvmjy"}],["path",{d:"M21 12h1",key:"jtio3y"}],["path",{d:"M18.5 4.5 18 5",key:"g5sp9y"}],["path",{d:"M2 12h1",key:"1uaihz"}],["path",{d:"M12 2v1",key:"11qlp1"}],["path",{d:"m4.929 4.929.707.707",key:"1i51kw"}],["path",{d:"M12 12v6",key:"3ahymv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t7=k("SkipBackIcon",[["polygon",{points:"19 20 9 12 19 4 19 20",key:"o2sva"}],["line",{x1:"5",x2:"5",y1:"19",y2:"5",key:"1ocqjk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const a7=k("SkipForwardIcon",[["polygon",{points:"5 4 15 12 5 20 5 4",key:"16p6eg"}],["line",{x1:"19",x2:"19",y1:"5",y2:"19",key:"futhcm"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n7=k("SkullIcon",[["circle",{cx:"9",cy:"12",r:"1",key:"1vctgf"}],["circle",{cx:"15",cy:"12",r:"1",key:"1tmaij"}],["path",{d:"M8 20v2h8v-2",key:"ded4og"}],["path",{d:"m12.5 17-.5-1-.5 1h1z",key:"3me087"}],["path",{d:"M16 20a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20",key:"xq9p5u"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const s7=k("SlackIcon",[["rect",{width:"3",height:"8",x:"13",y:"2",rx:"1.5",key:"diqz80"}],["path",{d:"M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5",key:"183iwg"}],["rect",{width:"3",height:"8",x:"8",y:"14",rx:"1.5",key:"hqg7r1"}],["path",{d:"M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5",key:"76g71w"}],["rect",{width:"8",height:"3",x:"14",y:"13",rx:"1.5",key:"1kmz0a"}],["path",{d:"M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5",key:"jc4sz0"}],["rect",{width:"8",height:"3",x:"2",y:"8",rx:"1.5",key:"1omvl4"}],["path",{d:"M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5",key:"16f3cl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const o7=k("SlashIcon",[["path",{d:"M22 2 2 22",key:"y4kqgn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const r7=k("SliceIcon",[["path",{d:"m8 14-6 6h9v-3",key:"zo3j9a"}],["path",{d:"M18.37 3.63 8 14l3 3L21.37 6.63a2.12 2.12 0 1 0-3-3Z",key:"1dzx0j"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const i7=k("SlidersHorizontalIcon",[["line",{x1:"21",x2:"14",y1:"4",y2:"4",key:"obuewd"}],["line",{x1:"10",x2:"3",y1:"4",y2:"4",key:"1q6298"}],["line",{x1:"21",x2:"12",y1:"12",y2:"12",key:"1iu8h1"}],["line",{x1:"8",x2:"3",y1:"12",y2:"12",key:"ntss68"}],["line",{x1:"21",x2:"16",y1:"20",y2:"20",key:"14d8ph"}],["line",{x1:"12",x2:"3",y1:"20",y2:"20",key:"m0wm8r"}],["line",{x1:"14",x2:"14",y1:"2",y2:"6",key:"14e1ph"}],["line",{x1:"8",x2:"8",y1:"10",y2:"14",key:"1i6ji0"}],["line",{x1:"16",x2:"16",y1:"18",y2:"22",key:"1lctlv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const l7=k("SlidersIcon",[["line",{x1:"4",x2:"4",y1:"21",y2:"14",key:"1p332r"}],["line",{x1:"4",x2:"4",y1:"10",y2:"3",key:"gb41h5"}],["line",{x1:"12",x2:"12",y1:"21",y2:"12",key:"hf2csr"}],["line",{x1:"12",x2:"12",y1:"8",y2:"3",key:"1kfi7u"}],["line",{x1:"20",x2:"20",y1:"21",y2:"16",key:"1lhrwl"}],["line",{x1:"20",x2:"20",y1:"12",y2:"3",key:"16vvfq"}],["line",{x1:"2",x2:"6",y1:"14",y2:"14",key:"1uebub"}],["line",{x1:"10",x2:"14",y1:"8",y2:"8",key:"1yglbp"}],["line",{x1:"18",x2:"22",y1:"16",y2:"16",key:"1jxqpz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const c7=k("SmartphoneChargingIcon",[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2",key:"1yt0o3"}],["path",{d:"M12.667 8 10 12h4l-2.667 4",key:"h9lk2d"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const d7=k("SmartphoneNfcIcon",[["rect",{width:"7",height:"12",x:"2",y:"6",rx:"1",key:"5nje8w"}],["path",{d:"M13 8.32a7.43 7.43 0 0 1 0 7.36",key:"1g306n"}],["path",{d:"M16.46 6.21a11.76 11.76 0 0 1 0 11.58",key:"uqvjvo"}],["path",{d:"M19.91 4.1a15.91 15.91 0 0 1 .01 15.8",key:"ujntz3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const u7=k("SmartphoneIcon",[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2",key:"1yt0o3"}],["path",{d:"M12 18h.01",key:"mhygvu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const p7=k("SmilePlusIcon",[["path",{d:"M22 11v1a10 10 0 1 1-9-10",key:"ew0xw9"}],["path",{d:"M8 14s1.5 2 4 2 4-2 4-2",key:"1y1vjs"}],["line",{x1:"9",x2:"9.01",y1:"9",y2:"9",key:"yxxnd0"}],["line",{x1:"15",x2:"15.01",y1:"9",y2:"9",key:"1p4y9e"}],["path",{d:"M16 5h6",key:"1vod17"}],["path",{d:"M19 2v6",key:"4bpg5p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const h7=k("SmileIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M8 14s1.5 2 4 2 4-2 4-2",key:"1y1vjs"}],["line",{x1:"9",x2:"9.01",y1:"9",y2:"9",key:"yxxnd0"}],["line",{x1:"15",x2:"15.01",y1:"9",y2:"9",key:"1p4y9e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const f7=k("SnailIcon",[["path",{d:"M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0",key:"hneq2s"}],["circle",{cx:"10",cy:"13",r:"8",key:"194lz3"}],["path",{d:"M2 21h12c4.4 0 8-3.6 8-8V7a2 2 0 1 0-4 0v6",key:"ixqyt7"}],["path",{d:"M18 3 19.1 5.2",key:"9tjm43"}],["path",{d:"M22 3 20.9 5.2",key:"j3odrs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const m7=k("SnowflakeIcon",[["line",{x1:"2",x2:"22",y1:"12",y2:"12",key:"1dnqot"}],["line",{x1:"12",x2:"12",y1:"2",y2:"22",key:"7eqyqh"}],["path",{d:"m20 16-4-4 4-4",key:"rquw4f"}],["path",{d:"m4 8 4 4-4 4",key:"12s3z9"}],["path",{d:"m16 4-4 4-4-4",key:"1tumq1"}],["path",{d:"m8 20 4-4 4 4",key:"9p200w"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v7=k("SofaIcon",[["path",{d:"M20 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3",key:"1dgpiv"}],["path",{d:"M2 11v5a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H6v-2a2 2 0 0 0-4 0Z",key:"u5qfb7"}],["path",{d:"M4 18v2",key:"jwo5n2"}],["path",{d:"M20 18v2",key:"1ar1qi"}],["path",{d:"M12 4v9",key:"oqhhn3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const y7=k("SoupIcon",[["path",{d:"M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z",key:"4rw317"}],["path",{d:"M7 21h10",key:"1b0cd5"}],["path",{d:"M19.5 12 22 6",key:"shfsr5"}],["path",{d:"M16.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.73 1.62",key:"rpc6vp"}],["path",{d:"M11.25 3c.27.1.8.53.74 1.36-.05.83-.93 1.2-.98 2.02-.06.78.33 1.24.72 1.62",key:"1lf63m"}],["path",{d:"M6.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.74 1.62",key:"97tijn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _7=k("SpaceIcon",[["path",{d:"M22 17v1c0 .5-.5 1-1 1H3c-.5 0-1-.5-1-1v-1",key:"lt2kga"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g7=k("SpadeIcon",[["path",{d:"M5 9c-1.5 1.5-3 3.2-3 5.5A5.5 5.5 0 0 0 7.5 20c1.8 0 3-.5 4.5-2 1.5 1.5 2.7 2 4.5 2a5.5 5.5 0 0 0 5.5-5.5c0-2.3-1.5-4-3-5.5l-7-7-7 7Z",key:"40bo9n"}],["path",{d:"M12 18v4",key:"jadmvz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const k7=k("SparkleIcon",[["path",{d:"m12 3-1.9 5.8a2 2 0 0 1-1.287 1.288L3 12l5.8 1.9a2 2 0 0 1 1.288 1.287L12 21l1.9-5.8a2 2 0 0 1 1.287-1.288L21 12l-5.8-1.9a2 2 0 0 1-1.288-1.287Z",key:"nraa5p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dl=k("SparklesIcon",[["path",{d:"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z",key:"17u4zn"}],["path",{d:"M5 3v4",key:"bklmnn"}],["path",{d:"M19 17v4",key:"iiml17"}],["path",{d:"M3 5h4",key:"nem4j1"}],["path",{d:"M17 19h4",key:"lbex7p"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b7=k("SpeakerIcon",[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",key:"1nb95v"}],["path",{d:"M12 6h.01",key:"1vi96p"}],["circle",{cx:"12",cy:"14",r:"4",key:"1jruaj"}],["path",{d:"M12 14h.01",key:"1etili"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w7=k("SpeechIcon",[["path",{d:"M8.8 20v-4.1l1.9.2a2.3 2.3 0 0 0 2.164-2.1V8.3A5.37 5.37 0 0 0 2 8.25c0 2.8.656 3.054 1 4.55a5.77 5.77 0 0 1 .029 2.758L2 20",key:"11atix"}],["path",{d:"M19.8 17.8a7.5 7.5 0 0 0 .003-10.603",key:"yol142"}],["path",{d:"M17 15a3.5 3.5 0 0 0-.025-4.975",key:"ssbmkc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const x7=k("SpellCheck2Icon",[["path",{d:"m6 16 6-12 6 12",key:"1b4byz"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"M4 21c1.1 0 1.1-1 2.3-1s1.1 1 2.3 1c1.1 0 1.1-1 2.3-1 1.1 0 1.1 1 2.3 1 1.1 0 1.1-1 2.3-1 1.1 0 1.1 1 2.3 1 1.1 0 1.1-1 2.3-1",key:"8mdmtu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M7=k("SpellCheckIcon",[["path",{d:"m6 16 6-12 6 12",key:"1b4byz"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"m16 20 2 2 4-4",key:"13tcca"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C7=k("SplineIcon",[["circle",{cx:"19",cy:"5",r:"2",key:"mhkx31"}],["circle",{cx:"5",cy:"19",r:"2",key:"v8kfzx"}],["path",{d:"M5 17A12 12 0 0 1 17 5",key:"1okkup"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const S7=k("SplitSquareHorizontalIcon",[["path",{d:"M8 19H5c-1 0-2-1-2-2V7c0-1 1-2 2-2h3",key:"lubmu8"}],["path",{d:"M16 5h3c1 0 2 1 2 2v10c0 1-1 2-2 2h-3",key:"1ag34g"}],["line",{x1:"12",x2:"12",y1:"4",y2:"20",key:"1tx1rr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const I7=k("SplitSquareVerticalIcon",[["path",{d:"M5 8V5c0-1 1-2 2-2h10c1 0 2 1 2 2v3",key:"1pi83i"}],["path",{d:"M19 16v3c0 1-1 2-2 2H7c-1 0-2-1-2-2v-3",key:"ido5k7"}],["line",{x1:"4",x2:"20",y1:"12",y2:"12",key:"1e0a9i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L7=k("SplitIcon",[["path",{d:"M16 3h5v5",key:"1806ms"}],["path",{d:"M8 3H3v5",key:"15dfkv"}],["path",{d:"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3",key:"1qrqzj"}],["path",{d:"m15 9 6-6",key:"ko1vev"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $7=k("SprayCanIcon",[["path",{d:"M3 3h.01",key:"159qn6"}],["path",{d:"M7 5h.01",key:"1hq22a"}],["path",{d:"M11 7h.01",key:"1osv80"}],["path",{d:"M3 7h.01",key:"1xzrh3"}],["path",{d:"M7 9h.01",key:"19b3jx"}],["path",{d:"M3 11h.01",key:"1eifu7"}],["rect",{width:"4",height:"4",x:"15",y:"5",key:"mri9e4"}],["path",{d:"m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2",key:"aib6hk"}],["path",{d:"m13 14 8-2",key:"1d7bmk"}],["path",{d:"m13 19 8-2",key:"1y2vml"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const A7=k("SproutIcon",[["path",{d:"M7 20h10",key:"e6iznv"}],["path",{d:"M10 20c5.5-2.5.8-6.4 3-10",key:"161w41"}],["path",{d:"M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z",key:"9gtqwd"}],["path",{d:"M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z",key:"bkxnd2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const E7=k("SquareAsteriskIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 8v8",key:"napkw2"}],["path",{d:"m8.5 14 7-4",key:"12hpby"}],["path",{d:"m8.5 10 7 4",key:"wwy2dy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const T7=k("SquareCodeIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"m10 10-2 2 2 2",key:"p6et6i"}],["path",{d:"m14 14 2-2-2-2",key:"m075q2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const P7=k("SquareDashedBottomCodeIcon",[["path",{d:"m10 10-2 2 2 2",key:"p6et6i"}],["path",{d:"m14 14 2-2-2-2",key:"m075q2"}],["path",{d:"M5 21a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2",key:"as5y1o"}],["path",{d:"M9 21h1",key:"15o7lz"}],["path",{d:"M14 21h1",key:"v9vybs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const D7=k("SquareDashedBottomIcon",[["path",{d:"M5 21a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2",key:"as5y1o"}],["path",{d:"M9 21h1",key:"15o7lz"}],["path",{d:"M14 21h1",key:"v9vybs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const R7=k("SquareDotIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const O7=k("SquareEqualIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M7 10h10",key:"1101jm"}],["path",{d:"M7 14h10",key:"1mhdw3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const V7=k("SquareSlashIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["line",{x1:"9",x2:"15",y1:"15",y2:"9",key:"1dfufj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const U7=k("SquareStackIcon",[["path",{d:"M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2",key:"4i38lg"}],["path",{d:"M10 16c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2",key:"mlte4a"}],["rect",{width:"8",height:"8",x:"14",y:"14",rx:"2",key:"1fa9i4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ul=k("SquareUserRoundIcon",[["path",{d:"M18 21a6 6 0 0 0-12 0",key:"kaz2du"}],["circle",{cx:"12",cy:"11",r:"4",key:"1gt34v"}],["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pl=k("SquareUserIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["circle",{cx:"12",cy:"10",r:"3",key:"ilqhr7"}],["path",{d:"M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2",key:"1m6ac2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const F7=k("SquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const j7=k("SquircleIcon",[["path",{d:"M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9",key:"garfkc"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const H7=k("SquirrelIcon",[["path",{d:"M15.236 22a3 3 0 0 0-2.2-5",key:"21bitc"}],["path",{d:"M16 20a3 3 0 0 1 3-3h1a2 2 0 0 0 2-2v-2a4 4 0 0 0-4-4V4",key:"oh0fg0"}],["path",{d:"M18 13h.01",key:"9veqaj"}],["path",{d:"M18 6a4 4 0 0 0-4 4 7 7 0 0 0-7 7c0-5 4-5 4-10.5a4.5 4.5 0 1 0-9 0 2.5 2.5 0 0 0 5 0C7 10 3 11 3 17c0 2.8 2.2 5 5 5h10",key:"980v8a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const N7=k("StampIcon",[["path",{d:"M5 22h14",key:"ehvnwv"}],["path",{d:"M19.27 13.73A2.5 2.5 0 0 0 17.5 13h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1.5c0-.66-.26-1.3-.73-1.77Z",key:"1sy9ra"}],["path",{d:"M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-3-3c-1.66 0-3 1-3 3s1 2 1 3.5V13",key:"cnxgux"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z7=k("StarHalfIcon",[["path",{d:"M12 17.8 5.8 21 7 14.1 2 9.3l7-1L12 2",key:"nare05"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B7=k("StarOffIcon",[["path",{d:"M8.34 8.34 2 9.27l5 4.87L5.82 21 12 17.77 18.18 21l-.59-3.43",key:"16m0ql"}],["path",{d:"M18.42 12.76 22 9.27l-6.91-1L12 2l-1.44 2.91",key:"1vt8nq"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const q7=k("StarIcon",[["polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2",key:"8f66p6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const W7=k("StepBackIcon",[["line",{x1:"18",x2:"18",y1:"20",y2:"4",key:"cun8e5"}],["polygon",{points:"14,20 4,12 14,4",key:"ypakod"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const G7=k("StepForwardIcon",[["line",{x1:"6",x2:"6",y1:"4",y2:"20",key:"fy8qot"}],["polygon",{points:"10,4 20,12 10,20",key:"1mc1pf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Z7=k("StethoscopeIcon",[["path",{d:"M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .3.3",key:"1jd90r"}],["path",{d:"M8 15v1a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6v-4",key:"126ukv"}],["circle",{cx:"20",cy:"10",r:"2",key:"ts1r5v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K7=k("StickerIcon",[["path",{d:"M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z",key:"1wis1t"}],["path",{d:"M15 3v6h6",key:"edgan2"}],["path",{d:"M10 16s.8 1 2 1c1.3 0 2-1 2-1",key:"1vvgv3"}],["path",{d:"M8 13h0",key:"jdup5h"}],["path",{d:"M16 13h0",key:"l4i2ga"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const X7=k("StickyNoteIcon",[["path",{d:"M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z",key:"1wis1t"}],["path",{d:"M15 3v6h6",key:"edgan2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Y7=k("StopCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["rect",{width:"6",height:"6",x:"9",y:"9",key:"1wrtvo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Q7=k("StoreIcon",[["path",{d:"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7",key:"ztvudi"}],["path",{d:"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8",key:"1b2hhj"}],["path",{d:"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4",key:"2ebpfo"}],["path",{d:"M2 7h20",key:"1fcdvo"}],["path",{d:"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7",key:"jon5kx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const J7=k("StretchHorizontalIcon",[["rect",{width:"20",height:"6",x:"2",y:"4",rx:"2",key:"qdearl"}],["rect",{width:"20",height:"6",x:"2",y:"14",rx:"2",key:"1xrn6j"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const eC=k("StretchVerticalIcon",[["rect",{width:"6",height:"20",x:"4",y:"2",rx:"2",key:"19qu7m"}],["rect",{width:"6",height:"20",x:"14",y:"2",rx:"2",key:"24v0nk"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tC=k("StrikethroughIcon",[["path",{d:"M16 4H9a3 3 0 0 0-2.83 4",key:"43sutm"}],["path",{d:"M14 12a4 4 0 0 1 0 8H6",key:"nlfj13"}],["line",{x1:"4",x2:"20",y1:"12",y2:"12",key:"1e0a9i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const aC=k("SubscriptIcon",[["path",{d:"m4 5 8 8",key:"1eunvl"}],["path",{d:"m12 5-8 8",key:"1ah0jp"}],["path",{d:"M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07",key:"e8ta8j"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nC=k("SubtitlesIcon",[["path",{d:"M7 13h4",key:"1m1xj0"}],["path",{d:"M15 13h2",key:"vgjay3"}],["path",{d:"M7 9h2",key:"1q072n"}],["path",{d:"M13 9h4",key:"o7fxw0"}],["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z",key:"5somay"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sC=k("SunDimIcon",[["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["path",{d:"M12 4h.01",key:"1ujb9j"}],["path",{d:"M20 12h.01",key:"1ykeid"}],["path",{d:"M12 20h.01",key:"zekei9"}],["path",{d:"M4 12h.01",key:"158zrr"}],["path",{d:"M17.657 6.343h.01",key:"31pqzk"}],["path",{d:"M17.657 17.657h.01",key:"jehnf4"}],["path",{d:"M6.343 17.657h.01",key:"gdk6ow"}],["path",{d:"M6.343 6.343h.01",key:"1uurf0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const oC=k("SunMediumIcon",[["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["path",{d:"M12 3v1",key:"1asbbs"}],["path",{d:"M12 20v1",key:"1wcdkc"}],["path",{d:"M3 12h1",key:"lp3yf2"}],["path",{d:"M20 12h1",key:"1vloll"}],["path",{d:"m18.364 5.636-.707.707",key:"1hakh0"}],["path",{d:"m6.343 17.657-.707.707",key:"18m9nf"}],["path",{d:"m5.636 5.636.707.707",key:"1xv1c5"}],["path",{d:"m17.657 17.657.707.707",key:"vl76zb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rC=k("SunMoonIcon",[["path",{d:"M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4",key:"1fu5g2"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m4.9 4.9 1.4 1.4",key:"b9915j"}],["path",{d:"m17.7 17.7 1.4 1.4",key:"qc3ed3"}],["path",{d:"M2 12h2",key:"1t8f8n"}],["path",{d:"M20 12h2",key:"1q8mjw"}],["path",{d:"m6.3 17.7-1.4 1.4",key:"5gca6"}],["path",{d:"m19.1 4.9-1.4 1.4",key:"wpu9u6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const iC=k("SunSnowIcon",[["path",{d:"M10 9a3 3 0 1 0 0 6",key:"6zmtdl"}],["path",{d:"M2 12h1",key:"1uaihz"}],["path",{d:"M14 21V3",key:"1llu3z"}],["path",{d:"M10 4V3",key:"pkzwkn"}],["path",{d:"M10 21v-1",key:"1u8rkd"}],["path",{d:"m3.64 18.36.7-.7",key:"105rm9"}],["path",{d:"m4.34 6.34-.7-.7",key:"d3unjp"}],["path",{d:"M14 12h8",key:"4f43i9"}],["path",{d:"m17 4-3 3",key:"15jcng"}],["path",{d:"m14 17 3 3",key:"6tlq38"}],["path",{d:"m21 15-3-3 3-3",key:"1nlnje"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lC=k("SunIcon",[["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m4.93 4.93 1.41 1.41",key:"149t6j"}],["path",{d:"m17.66 17.66 1.41 1.41",key:"ptbguv"}],["path",{d:"M2 12h2",key:"1t8f8n"}],["path",{d:"M20 12h2",key:"1q8mjw"}],["path",{d:"m6.34 17.66-1.41 1.41",key:"1m8zz5"}],["path",{d:"m19.07 4.93-1.41 1.41",key:"1shlcs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cC=k("SunriseIcon",[["path",{d:"M12 2v8",key:"1q4o3n"}],["path",{d:"m4.93 10.93 1.41 1.41",key:"2a7f42"}],["path",{d:"M2 18h2",key:"j10viu"}],["path",{d:"M20 18h2",key:"wocana"}],["path",{d:"m19.07 10.93-1.41 1.41",key:"15zs5n"}],["path",{d:"M22 22H2",key:"19qnx5"}],["path",{d:"m8 6 4-4 4 4",key:"ybng9g"}],["path",{d:"M16 18a4 4 0 0 0-8 0",key:"1lzouq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dC=k("SunsetIcon",[["path",{d:"M12 10V2",key:"16sf7g"}],["path",{d:"m4.93 10.93 1.41 1.41",key:"2a7f42"}],["path",{d:"M2 18h2",key:"j10viu"}],["path",{d:"M20 18h2",key:"wocana"}],["path",{d:"m19.07 10.93-1.41 1.41",key:"15zs5n"}],["path",{d:"M22 22H2",key:"19qnx5"}],["path",{d:"m16 6-4 4-4-4",key:"6wukr"}],["path",{d:"M16 18a4 4 0 0 0-8 0",key:"1lzouq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uC=k("SuperscriptIcon",[["path",{d:"m4 19 8-8",key:"hr47gm"}],["path",{d:"m12 19-8-8",key:"1dhhmo"}],["path",{d:"M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06",key:"1dfcux"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pC=k("SwissFrancIcon",[["path",{d:"M10 21V3h8",key:"br2l0g"}],["path",{d:"M6 16h9",key:"2py0wn"}],["path",{d:"M10 9.5h7",key:"13dmhz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hC=k("SwitchCameraIcon",[["path",{d:"M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5",key:"mtk2lu"}],["path",{d:"M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5",key:"120jsl"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}],["path",{d:"m18 22-3-3 3-3",key:"kgdoj7"}],["path",{d:"m6 2 3 3-3 3",key:"1fnbkv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fC=k("SwordIcon",[["polyline",{points:"14.5 17.5 3 6 3 3 6 3 17.5 14.5",key:"1hfsw2"}],["line",{x1:"13",x2:"19",y1:"19",y2:"13",key:"1vrmhu"}],["line",{x1:"16",x2:"20",y1:"16",y2:"20",key:"1bron3"}],["line",{x1:"19",x2:"21",y1:"21",y2:"19",key:"13pww6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mC=k("SwordsIcon",[["polyline",{points:"14.5 17.5 3 6 3 3 6 3 17.5 14.5",key:"1hfsw2"}],["line",{x1:"13",x2:"19",y1:"19",y2:"13",key:"1vrmhu"}],["line",{x1:"16",x2:"20",y1:"16",y2:"20",key:"1bron3"}],["line",{x1:"19",x2:"21",y1:"21",y2:"19",key:"13pww6"}],["polyline",{points:"14.5 6.5 18 3 21 3 21 6 17.5 9.5",key:"hbey2j"}],["line",{x1:"5",x2:"9",y1:"14",y2:"18",key:"1hf58s"}],["line",{x1:"7",x2:"4",y1:"17",y2:"20",key:"pidxm4"}],["line",{x1:"3",x2:"5",y1:"19",y2:"21",key:"1pehsh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vC=k("SyringeIcon",[["path",{d:"m18 2 4 4",key:"22kx64"}],["path",{d:"m17 7 3-3",key:"1w1zoj"}],["path",{d:"M19 9 8.7 19.3c-1 1-2.5 1-3.4 0l-.6-.6c-1-1-1-2.5 0-3.4L15 5",key:"1exhtz"}],["path",{d:"m9 11 4 4",key:"rovt3i"}],["path",{d:"m5 19-3 3",key:"59f2uf"}],["path",{d:"m14 4 6 6",key:"yqp9t2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yC=k("Table2Icon",[["path",{d:"M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18",key:"gugj83"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _C=k("TablePropertiesIcon",[["path",{d:"M15 3v18",key:"14nvp0"}],["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M21 9H3",key:"1338ky"}],["path",{d:"M21 15H3",key:"9uk58r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gC=k("TableIcon",[["path",{d:"M12 3v18",key:"108xh3"}],["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"M3 15h18",key:"5xshup"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kC=k("TabletSmartphoneIcon",[["rect",{width:"10",height:"14",x:"3",y:"8",rx:"2",key:"1vrsiq"}],["path",{d:"M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4",key:"1j4zmg"}],["path",{d:"M8 18h.01",key:"lrp35t"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bC=k("TabletIcon",[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2",key:"76otgf"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18",key:"1dp563"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wC=k("TabletsIcon",[["circle",{cx:"7",cy:"7",r:"5",key:"x29byf"}],["circle",{cx:"17",cy:"17",r:"5",key:"1op1d2"}],["path",{d:"M12 17h10",key:"ls21zv"}],["path",{d:"m3.46 10.54 7.08-7.08",key:"1rehiu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xC=k("TagIcon",[["path",{d:"M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z",key:"14b2ls"}],["path",{d:"M7 7h.01",key:"7u93v4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const MC=k("TagsIcon",[["path",{d:"M9 5H2v7l6.29 6.29c.94.94 2.48.94 3.42 0l3.58-3.58c.94-.94.94-2.48 0-3.42L9 5Z",key:"gt587u"}],["path",{d:"M6 9.01V9",key:"1flxpt"}],["path",{d:"m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19",key:"1cbfv1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const CC=k("Tally1Icon",[["path",{d:"M4 4v16",key:"6qkkli"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const SC=k("Tally2Icon",[["path",{d:"M4 4v16",key:"6qkkli"}],["path",{d:"M9 4v16",key:"81ygyz"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const IC=k("Tally3Icon",[["path",{d:"M4 4v16",key:"6qkkli"}],["path",{d:"M9 4v16",key:"81ygyz"}],["path",{d:"M14 4v16",key:"12vmem"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const LC=k("Tally4Icon",[["path",{d:"M4 4v16",key:"6qkkli"}],["path",{d:"M9 4v16",key:"81ygyz"}],["path",{d:"M14 4v16",key:"12vmem"}],["path",{d:"M19 4v16",key:"8ij5ei"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $C=k("Tally5Icon",[["path",{d:"M4 4v16",key:"6qkkli"}],["path",{d:"M9 4v16",key:"81ygyz"}],["path",{d:"M14 4v16",key:"12vmem"}],["path",{d:"M19 4v16",key:"8ij5ei"}],["path",{d:"M22 6 2 18",key:"h9moai"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const AC=k("TangentIcon",[["circle",{cx:"17",cy:"4",r:"2",key:"y5j2s2"}],["path",{d:"M15.59 5.41 5.41 15.59",key:"l0vprr"}],["circle",{cx:"4",cy:"17",r:"2",key:"9p4efm"}],["path",{d:"M12 22s-4-9-1.5-11.5S22 12 22 12",key:"1twk4o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const EC=k("TargetIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["circle",{cx:"12",cy:"12",r:"6",key:"1vlfrh"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const TC=k("TentTreeIcon",[["circle",{cx:"4",cy:"4",r:"2",key:"bt5ra8"}],["path",{d:"m14 5 3-3 3 3",key:"1sorif"}],["path",{d:"m14 10 3-3 3 3",key:"1jyi9h"}],["path",{d:"M17 14V2",key:"8ymqnk"}],["path",{d:"M17 14H7l-5 8h20Z",key:"13ar7p"}],["path",{d:"M8 14v8",key:"1ghmqk"}],["path",{d:"m9 14 5 8",key:"13pgi6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const PC=k("TentIcon",[["path",{d:"M3.5 21 14 3",key:"1szst5"}],["path",{d:"M20.5 21 10 3",key:"1310c3"}],["path",{d:"M15.5 21 12 15l-3.5 6",key:"1ddtfw"}],["path",{d:"M2 21h20",key:"1nyx9w"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const DC=k("TerminalSquareIcon",[["path",{d:"m7 11 2-2-2-2",key:"1lz0vl"}],["path",{d:"M11 13h4",key:"1p7l4v"}],["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const RC=k("TerminalIcon",[["polyline",{points:"4 17 10 11 4 5",key:"akl6gq"}],["line",{x1:"12",x2:"20",y1:"19",y2:"19",key:"q2wloq"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const OC=k("TestTube2Icon",[["path",{d:"M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01v0a2.83 2.83 0 0 1 0-4L17 3",key:"dg8b2p"}],["path",{d:"m16 2 6 6",key:"1gw87d"}],["path",{d:"M12 16H4",key:"1cjfip"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const VC=k("TestTubeIcon",[["path",{d:"M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5h0c-1.4 0-2.5-1.1-2.5-2.5V2",key:"187lwq"}],["path",{d:"M8.5 2h7",key:"csnxdl"}],["path",{d:"M14.5 16h-5",key:"1ox875"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const UC=k("TestTubesIcon",[["path",{d:"M9 2v17.5A2.5 2.5 0 0 1 6.5 22v0A2.5 2.5 0 0 1 4 19.5V2",key:"12z67u"}],["path",{d:"M20 2v17.5a2.5 2.5 0 0 1-2.5 2.5v0a2.5 2.5 0 0 1-2.5-2.5V2",key:"1q2nfy"}],["path",{d:"M3 2h7",key:"7s29d5"}],["path",{d:"M14 2h7",key:"7sicin"}],["path",{d:"M9 16H4",key:"1bfye3"}],["path",{d:"M20 16h-5",key:"ddnjpe"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const FC=k("TextCursorInputIcon",[["path",{d:"M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1",key:"18xjzo"}],["path",{d:"M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5",key:"fj48gi"}],["path",{d:"M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1",key:"1n9rhb"}],["path",{d:"M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7",key:"13ksps"}],["path",{d:"M9 7v10",key:"1vc8ob"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jC=k("TextCursorIcon",[["path",{d:"M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1",key:"uvaxm9"}],["path",{d:"M7 22h1a4 4 0 0 0 4-4v-1",key:"11xy8d"}],["path",{d:"M7 2h1a4 4 0 0 1 4 4v1",key:"1uw06m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const HC=k("TextQuoteIcon",[["path",{d:"M17 6H3",key:"16j9eg"}],["path",{d:"M21 12H8",key:"scolzb"}],["path",{d:"M21 18H8",key:"1wfozv"}],["path",{d:"M3 12v6",key:"fv4c87"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hl=k("TextSelectIcon",[["path",{d:"M5 3a2 2 0 0 0-2 2",key:"y57alp"}],["path",{d:"M19 3a2 2 0 0 1 2 2",key:"18rm91"}],["path",{d:"M21 19a2 2 0 0 1-2 2",key:"1j7049"}],["path",{d:"M5 21a2 2 0 0 1-2-2",key:"sbafld"}],["path",{d:"M9 3h1",key:"1yesri"}],["path",{d:"M9 21h1",key:"15o7lz"}],["path",{d:"M14 3h1",key:"1ec4yj"}],["path",{d:"M14 21h1",key:"v9vybs"}],["path",{d:"M3 9v1",key:"1r0deq"}],["path",{d:"M21 9v1",key:"mxsmne"}],["path",{d:"M3 14v1",key:"vnatye"}],["path",{d:"M21 14v1",key:"169vum"}],["line",{x1:"7",x2:"15",y1:"8",y2:"8",key:"1758g8"}],["line",{x1:"7",x2:"17",y1:"12",y2:"12",key:"197423"}],["line",{x1:"7",x2:"13",y1:"16",y2:"16",key:"37cgm6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const NC=k("TextIcon",[["path",{d:"M17 6.1H3",key:"wptmhv"}],["path",{d:"M21 12.1H3",key:"1j38uz"}],["path",{d:"M15.1 18H3",key:"1nb16a"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zC=k("TheaterIcon",[["path",{d:"M2 10s3-3 3-8",key:"3xiif0"}],["path",{d:"M22 10s-3-3-3-8",key:"ioaa5q"}],["path",{d:"M10 2c0 4.4-3.6 8-8 8",key:"16fkpi"}],["path",{d:"M14 2c0 4.4 3.6 8 8 8",key:"b9eulq"}],["path",{d:"M2 10s2 2 2 5",key:"1au1lb"}],["path",{d:"M22 10s-2 2-2 5",key:"qi2y5e"}],["path",{d:"M8 15h8",key:"45n4r"}],["path",{d:"M2 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1",key:"1vsc2m"}],["path",{d:"M14 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1",key:"hrha4u"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const BC=k("ThermometerSnowflakeIcon",[["path",{d:"M2 12h10",key:"19562f"}],["path",{d:"M9 4v16",key:"81ygyz"}],["path",{d:"m3 9 3 3-3 3",key:"1sas0l"}],["path",{d:"M12 6 9 9 6 6",key:"pfrgxu"}],["path",{d:"m6 18 3-3 1.5 1.5",key:"1e277p"}],["path",{d:"M20 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z",key:"iof6y5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qC=k("ThermometerSunIcon",[["path",{d:"M12 9a4 4 0 0 0-2 7.5",key:"1jvsq6"}],["path",{d:"M12 3v2",key:"1w22ol"}],["path",{d:"m6.6 18.4-1.4 1.4",key:"w2yidj"}],["path",{d:"M20 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z",key:"iof6y5"}],["path",{d:"M4 13H2",key:"118le4"}],["path",{d:"M6.34 7.34 4.93 5.93",key:"1brd51"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const WC=k("ThermometerIcon",[["path",{d:"M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z",key:"17jzev"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const GC=k("ThumbsDownIcon",[["path",{d:"M17 14V2",key:"8ymqnk"}],["path",{d:"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z",key:"s6e0r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ZC=k("ThumbsUpIcon",[["path",{d:"M7 10v12",key:"1qc93n"}],["path",{d:"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z",key:"y3tblf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const KC=k("TicketIcon",[["path",{d:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",key:"qn84l0"}],["path",{d:"M13 5v2",key:"dyzc3o"}],["path",{d:"M13 17v2",key:"1ont0d"}],["path",{d:"M13 11v2",key:"1wjjxi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const XC=k("TimerOffIcon",[["path",{d:"M10 2h4",key:"n1abiw"}],["path",{d:"M4.6 11a8 8 0 0 0 1.7 8.7 8 8 0 0 0 8.7 1.7",key:"10he05"}],["path",{d:"M7.4 7.4a8 8 0 0 1 10.3 1 8 8 0 0 1 .9 10.2",key:"15f7sh"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M12 12v-2",key:"fwoke6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const YC=k("TimerResetIcon",[["path",{d:"M10 2h4",key:"n1abiw"}],["path",{d:"M12 14v-4",key:"1evpnu"}],["path",{d:"M4 13a8 8 0 0 1 8-7 8 8 0 1 1-5.3 14L4 17.6",key:"1ts96g"}],["path",{d:"M9 17H4v5",key:"8t5av"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const QC=k("TimerIcon",[["line",{x1:"10",x2:"14",y1:"2",y2:"2",key:"14vaq8"}],["line",{x1:"12",x2:"15",y1:"14",y2:"11",key:"17fdiu"}],["circle",{cx:"12",cy:"14",r:"8",key:"1e1u0o"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const JC=k("ToggleLeftIcon",[["rect",{width:"20",height:"12",x:"2",y:"6",rx:"6",ry:"6",key:"f2vt7d"}],["circle",{cx:"8",cy:"12",r:"2",key:"1nvbw3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const eS=k("ToggleRightIcon",[["rect",{width:"20",height:"12",x:"2",y:"6",rx:"6",ry:"6",key:"f2vt7d"}],["circle",{cx:"16",cy:"12",r:"2",key:"4ma0v8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tS=k("TornadoIcon",[["path",{d:"M21 4H3",key:"1hwok0"}],["path",{d:"M18 8H6",key:"41n648"}],["path",{d:"M19 12H9",key:"1g4lpz"}],["path",{d:"M16 16h-6",key:"1j5d54"}],["path",{d:"M11 20H9",key:"39obr8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const aS=k("TorusIcon",[["ellipse",{cx:"12",cy:"11",rx:"3",ry:"2",key:"1b2qxu"}],["ellipse",{cx:"12",cy:"12.5",rx:"10",ry:"8.5",key:"h8emeu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nS=k("TouchpadOffIcon",[["path",{d:"M4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16",key:"lnt0bk"}],["path",{d:"M2 14h12",key:"d8icqz"}],["path",{d:"M22 14h-2",key:"jrx26d"}],["path",{d:"M12 20v-6",key:"1rm09r"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M22 16V6a2 2 0 0 0-2-2H10",key:"11y8e4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sS=k("TouchpadIcon",[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",key:"18n3k1"}],["path",{d:"M2 14h20",key:"myj16y"}],["path",{d:"M12 20v-6",key:"1rm09r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const oS=k("TowerControlIcon",[["path",{d:"M18.2 12.27 20 6H4l1.8 6.27a1 1 0 0 0 .95.73h10.5a1 1 0 0 0 .96-.73Z",key:"1pledb"}],["path",{d:"M8 13v9",key:"hmv0ci"}],["path",{d:"M16 22v-9",key:"ylnf1u"}],["path",{d:"m9 6 1 7",key:"dpdgam"}],["path",{d:"m15 6-1 7",key:"ls7zgu"}],["path",{d:"M12 6V2",key:"1pj48d"}],["path",{d:"M13 2h-2",key:"mj6ths"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rS=k("ToyBrickIcon",[["rect",{width:"18",height:"12",x:"3",y:"8",rx:"1",key:"158fvp"}],["path",{d:"M10 8V5c0-.6-.4-1-1-1H6a1 1 0 0 0-1 1v3",key:"s0042v"}],["path",{d:"M19 8V5c0-.6-.4-1-1-1h-3a1 1 0 0 0-1 1v3",key:"9wmeh2"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const iS=k("TractorIcon",[["path",{d:"M3 4h9l1 7",key:"1ftpo8"}],["path",{d:"M4 11V4",key:"9ft8pt"}],["path",{d:"M8 10V4",key:"1y5f7n"}],["path",{d:"M18 5c-.6 0-1 .4-1 1v5.6",key:"10zbvr"}],["path",{d:"m10 11 11 .9c.6 0 .9.5.8 1.1l-.8 5h-1",key:"2w242w"}],["circle",{cx:"7",cy:"15",r:".5",key:"fbsjqy"}],["circle",{cx:"7",cy:"15",r:"5",key:"ddtuc"}],["path",{d:"M16 18h-5",key:"bq60fd"}],["circle",{cx:"18",cy:"18",r:"2",key:"1emm8v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lS=k("TrafficConeIcon",[["path",{d:"M9.3 6.2a4.55 4.55 0 0 0 5.4 0",key:"flyxqv"}],["path",{d:"M7.9 10.7c.9.8 2.4 1.3 4.1 1.3s3.2-.5 4.1-1.3",key:"1nlxxg"}],["path",{d:"M13.9 3.5a1.93 1.93 0 0 0-3.8-.1l-3 10c-.1.2-.1.4-.1.6 0 1.7 2.2 3 5 3s5-1.3 5-3c0-.2 0-.4-.1-.5Z",key:"vz7x1l"}],["path",{d:"m7.5 12.2-4.7 2.7c-.5.3-.8.7-.8 1.1s.3.8.8 1.1l7.6 4.5c.9.5 2.1.5 3 0l7.6-4.5c.7-.3 1-.7 1-1.1s-.3-.8-.8-1.1l-4.7-2.8",key:"1xfzlw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cS=k("TrainFrontTunnelIcon",[["path",{d:"M2 22V12a10 10 0 1 1 20 0v10",key:"o0fyp0"}],["path",{d:"M15 6.8v1.4a3 2.8 0 1 1-6 0V6.8",key:"m8q3n9"}],["path",{d:"M10 15h.01",key:"44in9x"}],["path",{d:"M14 15h.01",key:"5mohn5"}],["path",{d:"M10 19a4 4 0 0 1-4-4v-3a6 6 0 1 1 12 0v3a4 4 0 0 1-4 4Z",key:"hckbmu"}],["path",{d:"m9 19-2 3",key:"iij7hm"}],["path",{d:"m15 19 2 3",key:"npx8sa"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dS=k("TrainFrontIcon",[["path",{d:"M8 3.1V7a4 4 0 0 0 8 0V3.1",key:"1v71zp"}],["path",{d:"m9 15-1-1",key:"1yrq24"}],["path",{d:"m15 15 1-1",key:"1t0d6s"}],["path",{d:"M9 19c-2.8 0-5-2.2-5-5v-4a8 8 0 0 1 16 0v4c0 2.8-2.2 5-5 5Z",key:"1p0hjs"}],["path",{d:"m8 19-2 3",key:"13i0xs"}],["path",{d:"m16 19 2 3",key:"xo31yx"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uS=k("TrainTrackIcon",[["path",{d:"M2 17 17 2",key:"18b09t"}],["path",{d:"m2 14 8 8",key:"1gv9hu"}],["path",{d:"m5 11 8 8",key:"189pqp"}],["path",{d:"m8 8 8 8",key:"1imecy"}],["path",{d:"m11 5 8 8",key:"ummqn6"}],["path",{d:"m14 2 8 8",key:"1vk7dn"}],["path",{d:"M7 22 22 7",key:"15mb1i"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fl=k("TramFrontIcon",[["rect",{width:"16",height:"16",x:"4",y:"3",rx:"2",key:"1wxw4b"}],["path",{d:"M4 11h16",key:"mpoxn0"}],["path",{d:"M12 3v8",key:"1h2ygw"}],["path",{d:"m8 19-2 3",key:"13i0xs"}],["path",{d:"m18 22-2-3",key:"1p0ohu"}],["path",{d:"M8 15h0",key:"q9eq1f"}],["path",{d:"M16 15h0",key:"pzrbjg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pS=k("Trash2Icon",[["path",{d:"M3 6h18",key:"d0wm0j"}],["path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",key:"4alrt4"}],["path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",key:"v07s0e"}],["line",{x1:"10",x2:"10",y1:"11",y2:"17",key:"1uufr5"}],["line",{x1:"14",x2:"14",y1:"11",y2:"17",key:"xtxkd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hS=k("TrashIcon",[["path",{d:"M3 6h18",key:"d0wm0j"}],["path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",key:"4alrt4"}],["path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",key:"v07s0e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fS=k("TreeDeciduousIcon",[["path",{d:"M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z",key:"oadzkq"}],["path",{d:"M12 19v3",key:"npa21l"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mS=k("TreePineIcon",[["path",{d:"m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z",key:"cpyugq"}],["path",{d:"M12 22v-3",key:"kmzjlo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vS=k("TreesIcon",[["path",{d:"M10 10v.2A3 3 0 0 1 8.9 16v0H5v0h0a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z",key:"yh07w9"}],["path",{d:"M7 16v6",key:"1a82de"}],["path",{d:"M13 19v3",key:"13sx9i"}],["path",{d:"M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5",key:"1sj9kv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yS=k("TrelloIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["rect",{width:"3",height:"9",x:"7",y:"7",key:"14n3xi"}],["rect",{width:"3",height:"5",x:"14",y:"7",key:"s4azjd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _S=k("TrendingDownIcon",[["polyline",{points:"22 17 13.5 8.5 8.5 13.5 2 7",key:"1r2t7k"}],["polyline",{points:"16 17 22 17 22 11",key:"11uiuu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gS=k("TrendingUpIcon",[["polyline",{points:"22 7 13.5 15.5 8.5 10.5 2 17",key:"126l90"}],["polyline",{points:"16 7 22 7 22 13",key:"kwv8wd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kS=k("TriangleRightIcon",[["path",{d:"M22 18a2 2 0 0 1-2 2H3c-1.1 0-1.3-.6-.4-1.3L20.4 4.3c.9-.7 1.6-.4 1.6.7Z",key:"183wce"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bS=k("TriangleIcon",[["path",{d:"M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",key:"14u9p9"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wS=k("TrophyIcon",[["path",{d:"M6 9H4.5a2.5 2.5 0 0 1 0-5H6",key:"17hqa7"}],["path",{d:"M18 9h1.5a2.5 2.5 0 0 0 0-5H18",key:"lmptdp"}],["path",{d:"M4 22h16",key:"57wxv0"}],["path",{d:"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22",key:"1nw9bq"}],["path",{d:"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22",key:"1np0yb"}],["path",{d:"M18 2H6v7a6 6 0 0 0 12 0V2Z",key:"u46fv3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xS=k("TruckIcon",[["path",{d:"M5 18H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h10c.6 0 1 .4 1 1v11",key:"hs4xqm"}],["path",{d:"M14 9h4l4 4v4c0 .6-.4 1-1 1h-2",key:"11fp61"}],["circle",{cx:"7",cy:"18",r:"2",key:"19iecd"}],["path",{d:"M15 18H9",key:"1lyqi6"}],["circle",{cx:"17",cy:"18",r:"2",key:"332jqn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const MS=k("TurtleIcon",[["path",{d:"m12 10 2 4v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a8 8 0 1 0-16 0v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3l2-4h4Z",key:"1lbbv7"}],["path",{d:"M4.82 7.9 8 10",key:"m9wose"}],["path",{d:"M15.18 7.9 12 10",key:"p8dp2u"}],["path",{d:"M16.93 10H20a2 2 0 0 1 0 4H2",key:"12nsm7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const CS=k("Tv2Icon",[["path",{d:"M7 21h10",key:"1b0cd5"}],["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const SS=k("TvIcon",[["rect",{width:"20",height:"15",x:"2",y:"7",rx:"2",ry:"2",key:"10ag99"}],["polyline",{points:"17 2 12 7 7 2",key:"11pgbg"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const IS=k("TwitchIcon",[["path",{d:"M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7",key:"c0yzno"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const LS=k("TwitterIcon",[["path",{d:"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z",key:"pff0z6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $S=k("TypeIcon",[["polyline",{points:"4 7 4 4 20 4 20 7",key:"1nosan"}],["line",{x1:"9",x2:"15",y1:"20",y2:"20",key:"swin9y"}],["line",{x1:"12",x2:"12",y1:"4",y2:"20",key:"1tx1rr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const AS=k("UmbrellaOffIcon",[["path",{d:"M12 2v1",key:"11qlp1"}],["path",{d:"M15.5 21a1.85 1.85 0 0 1-3.5-1v-8H2a10 10 0 0 1 3.428-6.575",key:"eki10q"}],["path",{d:"M17.5 12H22A10 10 0 0 0 9.004 3.455",key:"n2ayka"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ES=k("UmbrellaIcon",[["path",{d:"M22 12a10.06 10.06 1 0 0-20 0Z",key:"1teyop"}],["path",{d:"M12 12v8a2 2 0 0 0 4 0",key:"ulpmoc"}],["path",{d:"M12 2v1",key:"11qlp1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const TS=k("UnderlineIcon",[["path",{d:"M6 4v6a6 6 0 0 0 12 0V4",key:"9kb039"}],["line",{x1:"4",x2:"20",y1:"20",y2:"20",key:"nun2al"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const PS=k("Undo2Icon",[["path",{d:"M9 14 4 9l5-5",key:"102s5s"}],["path",{d:"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11",key:"llx8ln"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const DS=k("UndoDotIcon",[["circle",{cx:"12",cy:"17",r:"1",key:"1ixnty"}],["path",{d:"M3 7v6h6",key:"1v2h90"}],["path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13",key:"1r6uu6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const RS=k("UndoIcon",[["path",{d:"M3 7v6h6",key:"1v2h90"}],["path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13",key:"1r6uu6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const OS=k("UnfoldHorizontalIcon",[["path",{d:"M16 12h6",key:"15xry1"}],["path",{d:"M8 12H2",key:"1jqql6"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 8v2",key:"1woqiv"}],["path",{d:"M12 14v2",key:"8jcxud"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m19 15 3-3-3-3",key:"wjy7rq"}],["path",{d:"m5 9-3 3 3 3",key:"j64kie"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const VS=k("UnfoldVerticalIcon",[["path",{d:"M12 22v-6",key:"6o8u61"}],["path",{d:"M12 8V2",key:"1wkif3"}],["path",{d:"M4 12H2",key:"rhcxmi"}],["path",{d:"M10 12H8",key:"s88cx1"}],["path",{d:"M16 12h-2",key:"10asgb"}],["path",{d:"M22 12h-2",key:"14jgyd"}],["path",{d:"m15 19-3 3-3-3",key:"11eu04"}],["path",{d:"m15 5-3-3-3 3",key:"itvq4r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const US=k("UngroupIcon",[["rect",{width:"8",height:"6",x:"5",y:"4",rx:"1",key:"nzclkv"}],["rect",{width:"8",height:"6",x:"11",y:"14",rx:"1",key:"4tytwb"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const FS=k("Unlink2Icon",[["path",{d:"M15 7h2a5 5 0 0 1 0 10h-2m-6 0H7A5 5 0 0 1 7 7h2",key:"1re2ne"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jS=k("UnlinkIcon",[["path",{d:"m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71",key:"yqzxt4"}],["path",{d:"m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71",key:"4qinb0"}],["line",{x1:"8",x2:"8",y1:"2",y2:"5",key:"1041cp"}],["line",{x1:"2",x2:"5",y1:"8",y2:"8",key:"14m1p5"}],["line",{x1:"16",x2:"16",y1:"19",y2:"22",key:"rzdirn"}],["line",{x1:"19",x2:"22",y1:"16",y2:"16",key:"ox905f"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const HS=k("UnlockKeyholeIcon",[["circle",{cx:"12",cy:"16",r:"1",key:"1au0dj"}],["rect",{x:"3",y:"10",width:"18",height:"12",rx:"2",key:"6s8ecr"}],["path",{d:"M7 10V7a5 5 0 0 1 9.33-2.5",key:"car5b7"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const NS=k("UnlockIcon",[["rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2",key:"1w4ew1"}],["path",{d:"M7 11V7a5 5 0 0 1 9.9-1",key:"1mm8w8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zS=k("UnplugIcon",[["path",{d:"m19 5 3-3",key:"yk6iyv"}],["path",{d:"m2 22 3-3",key:"19mgm9"}],["path",{d:"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z",key:"goz73y"}],["path",{d:"M7.5 13.5 10 11",key:"7xgeeb"}],["path",{d:"M10.5 16.5 13 14",key:"10btkg"}],["path",{d:"m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z",key:"1snsnr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const BS=k("UploadCloudIcon",[["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"M12 12v9",key:"192myk"}],["path",{d:"m16 16-4-4-4 4",key:"119tzi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qS=k("UploadIcon",[["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",key:"ih7n3h"}],["polyline",{points:"17 8 12 3 7 8",key:"t8dd8p"}],["line",{x1:"12",x2:"12",y1:"3",y2:"15",key:"widbto"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const WS=k("UsbIcon",[["circle",{cx:"10",cy:"7",r:"1",key:"dypaad"}],["circle",{cx:"4",cy:"20",r:"1",key:"22iqad"}],["path",{d:"M4.7 19.3 19 5",key:"1enqfc"}],["path",{d:"m21 3-3 1 2 2Z",key:"d3ov82"}],["path",{d:"M9.26 7.68 5 12l2 5",key:"1esawj"}],["path",{d:"m10 14 5 2 3.5-3.5",key:"v8oal5"}],["path",{d:"m18 12 1-1 1 1-1 1Z",key:"1bh22v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const GS=k("UserCheckIcon",[["path",{d:"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",key:"1yyitq"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}],["polyline",{points:"16 11 18 13 22 9",key:"1pwet4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ZS=k("UserCogIcon",[["circle",{cx:"18",cy:"15",r:"3",key:"gjjjvw"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}],["path",{d:"M10 15H6a4 4 0 0 0-4 4v2",key:"1nfge6"}],["path",{d:"m21.7 16.4-.9-.3",key:"12j9ji"}],["path",{d:"m15.2 13.9-.9-.3",key:"1fdjdi"}],["path",{d:"m16.6 18.7.3-.9",key:"heedtr"}],["path",{d:"m19.1 12.2.3-.9",key:"1af3ki"}],["path",{d:"m19.6 18.7-.4-1",key:"1x9vze"}],["path",{d:"m16.8 12.3-.4-1",key:"vqeiwj"}],["path",{d:"m14.3 16.6 1-.4",key:"1qlj63"}],["path",{d:"m20.7 13.8 1-.4",key:"1v5t8k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const KS=k("UserMinusIcon",[["path",{d:"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",key:"1yyitq"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}],["line",{x1:"22",x2:"16",y1:"11",y2:"11",key:"1shjgl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const XS=k("UserPlusIcon",[["path",{d:"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",key:"1yyitq"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}],["line",{x1:"19",x2:"19",y1:"8",y2:"14",key:"1bvyxn"}],["line",{x1:"22",x2:"16",y1:"11",y2:"11",key:"1shjgl"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ml=k("UserRoundCheckIcon",[["path",{d:"M2 21a8 8 0 0 1 13.292-6",key:"bjp14o"}],["circle",{cx:"10",cy:"8",r:"5",key:"o932ke"}],["path",{d:"m16 19 2 2 4-4",key:"1b14m6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vl=k("UserRoundCogIcon",[["path",{d:"M2 21a8 8 0 0 1 10.434-7.62",key:"1yezr2"}],["circle",{cx:"10",cy:"8",r:"5",key:"o932ke"}],["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}],["path",{d:"m19.5 14.3-.4.9",key:"1eb35c"}],["path",{d:"m16.9 20.8-.4.9",key:"dfjc4z"}],["path",{d:"m21.7 19.5-.9-.4",key:"q4dx6b"}],["path",{d:"m15.2 16.9-.9-.4",key:"1r0w5f"}],["path",{d:"m21.7 16.5-.9.4",key:"1knoei"}],["path",{d:"m15.2 19.1-.9.4",key:"j188fs"}],["path",{d:"m19.5 21.7-.4-.9",key:"1tonu5"}],["path",{d:"m16.9 15.2-.4-.9",key:"699xu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yl=k("UserRoundMinusIcon",[["path",{d:"M2 21a8 8 0 0 1 13.292-6",key:"bjp14o"}],["circle",{cx:"10",cy:"8",r:"5",key:"o932ke"}],["path",{d:"M22 19h-6",key:"vcuq98"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _l=k("UserRoundPlusIcon",[["path",{d:"M2 21a8 8 0 0 1 13.292-6",key:"bjp14o"}],["circle",{cx:"10",cy:"8",r:"5",key:"o932ke"}],["path",{d:"M19 16v6",key:"tddt3s"}],["path",{d:"M22 19h-6",key:"vcuq98"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const YS=k("UserRoundSearchIcon",[["circle",{cx:"10",cy:"8",r:"5",key:"o932ke"}],["path",{d:"M2 21a8 8 0 0 1 10.434-7.62",key:"1yezr2"}],["circle",{cx:"18",cy:"18",r:"3",key:"1xkwt0"}],["path",{d:"m22 22-1.9-1.9",key:"1e5ubv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gl=k("UserRoundXIcon",[["path",{d:"M2 21a8 8 0 0 1 11.873-7",key:"74fkxq"}],["circle",{cx:"10",cy:"8",r:"5",key:"o932ke"}],["path",{d:"m17 17 5 5",key:"p7ous7"}],["path",{d:"m22 17-5 5",key:"gqnmv0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kl=k("UserRoundIcon",[["circle",{cx:"12",cy:"8",r:"5",key:"1hypcn"}],["path",{d:"M20 21a8 8 0 0 0-16 0",key:"rfgkzh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const QS=k("UserSearchIcon",[["circle",{cx:"10",cy:"7",r:"4",key:"e45bow"}],["path",{d:"M10.3 15H7a4 4 0 0 0-4 4v2",key:"3bnktk"}],["circle",{cx:"17",cy:"17",r:"3",key:"18b49y"}],["path",{d:"m21 21-1.9-1.9",key:"1g2n9r"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const JS=k("UserXIcon",[["path",{d:"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",key:"1yyitq"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}],["line",{x1:"17",x2:"22",y1:"8",y2:"13",key:"3nzzx3"}],["line",{x1:"22",x2:"17",y1:"8",y2:"13",key:"1swrse"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const eI=k("UserIcon",[["path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",key:"975kel"}],["circle",{cx:"12",cy:"7",r:"4",key:"17ys0d"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bl=k("UsersRoundIcon",[["path",{d:"M18 21a8 8 0 0 0-16 0",key:"3ypg7q"}],["circle",{cx:"10",cy:"8",r:"5",key:"o932ke"}],["path",{d:"M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3",key:"10s06x"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const tI=k("UsersIcon",[["path",{d:"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",key:"1yyitq"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}],["path",{d:"M22 21v-2a4 4 0 0 0-3-3.87",key:"kshegd"}],["path",{d:"M16 3.13a4 4 0 0 1 0 7.75",key:"1da9ce"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const aI=k("UtensilsCrossedIcon",[["path",{d:"m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8",key:"n7qcjb"}],["path",{d:"M15 15 3.3 3.3a4.2 4.2 0 0 0 0 6l7.3 7.3c.7.7 2 .7 2.8 0L15 15Zm0 0 7 7",key:"d0u48b"}],["path",{d:"m2.1 21.8 6.4-6.3",key:"yn04lh"}],["path",{d:"m19 5-7 7",key:"194lzd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const nI=k("UtensilsIcon",[["path",{d:"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2",key:"cjf0a3"}],["path",{d:"M7 2v20",key:"1473qp"}],["path",{d:"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7",key:"1ogz0v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const sI=k("UtilityPoleIcon",[["path",{d:"M12 2v20",key:"t6zp3m"}],["path",{d:"M2 5h20",key:"1fs1ex"}],["path",{d:"M3 3v2",key:"9imdir"}],["path",{d:"M7 3v2",key:"n0os7"}],["path",{d:"M17 3v2",key:"1l2re6"}],["path",{d:"M21 3v2",key:"1duuac"}],["path",{d:"m19 5-7 7-7-7",key:"133zxf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const oI=k("VariableIcon",[["path",{d:"M8 21s-4-3-4-9 4-9 4-9",key:"uto9ud"}],["path",{d:"M16 3s4 3 4 9-4 9-4 9",key:"4w2vsq"}],["line",{x1:"15",x2:"9",y1:"9",y2:"15",key:"f7djnv"}],["line",{x1:"9",x2:"15",y1:"9",y2:"15",key:"1shsy8"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const rI=k("VeganIcon",[["path",{d:"M2 2a26.6 26.6 0 0 1 10 20c.9-6.82 1.5-9.5 4-14",key:"qiv7li"}],["path",{d:"M16 8c4 0 6-2 6-6-4 0-6 2-6 6",key:"n7eohy"}],["path",{d:"M17.41 3.6a10 10 0 1 0 3 3",key:"1dion0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const iI=k("VenetianMaskIcon",[["path",{d:"M2 12a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V7h-5a8 8 0 0 0-5 2 8 8 0 0 0-5-2H2Z",key:"1g6z3j"}],["path",{d:"M6 11c1.5 0 3 .5 3 2-2 0-3 0-3-2Z",key:"c2lwnf"}],["path",{d:"M18 11c-1.5 0-3 .5-3 2 2 0 3 0 3-2Z",key:"njd9zo"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const lI=k("VibrateOffIcon",[["path",{d:"m2 8 2 2-2 2 2 2-2 2",key:"sv1b1"}],["path",{d:"m22 8-2 2 2 2-2 2 2 2",key:"101i4y"}],["path",{d:"M8 8v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2",key:"1hbad5"}],["path",{d:"M16 10.34V6c0-.55-.45-1-1-1h-4.34",key:"1x5tf0"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const cI=k("VibrateIcon",[["path",{d:"m2 8 2 2-2 2 2 2-2 2",key:"sv1b1"}],["path",{d:"m22 8-2 2 2 2-2 2 2 2",key:"101i4y"}],["rect",{width:"8",height:"14",x:"8",y:"5",rx:"1",key:"1oyrl4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const dI=k("VideoOffIcon",[["path",{d:"M10.66 6H14a2 2 0 0 1 2 2v2.34l1 1L22 8v8",key:"ubwiq0"}],["path",{d:"M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2l10 10Z",key:"1l10zd"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const uI=k("VideoIcon",[["path",{d:"m22 8-6 4 6 4V8Z",key:"50v9me"}],["rect",{width:"14",height:"12",x:"2",y:"6",rx:"2",ry:"2",key:"1rqjg6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const pI=k("VideotapeIcon",[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",key:"18n3k1"}],["path",{d:"M2 8h20",key:"d11cs7"}],["circle",{cx:"8",cy:"14",r:"2",key:"1k2qr5"}],["path",{d:"M8 12h8",key:"1wcyev"}],["circle",{cx:"16",cy:"14",r:"2",key:"14k7lr"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const hI=k("ViewIcon",[["path",{d:"M5 12s2.545-5 7-5c4.454 0 7 5 7 5s-2.546 5-7 5c-4.455 0-7-5-7-5z",key:"vptub8"}],["path",{d:"M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z",key:"10lhjs"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2",key:"mrq65r"}],["path",{d:"M21 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2",key:"be3xqs"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const fI=k("VoicemailIcon",[["circle",{cx:"6",cy:"12",r:"4",key:"1ehtga"}],["circle",{cx:"18",cy:"12",r:"4",key:"4vafl8"}],["line",{x1:"6",x2:"18",y1:"16",y2:"16",key:"pmt8us"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const mI=k("Volume1Icon",[["polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5",key:"16drj5"}],["path",{d:"M15.54 8.46a5 5 0 0 1 0 7.07",key:"ltjumu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const vI=k("Volume2Icon",[["polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5",key:"16drj5"}],["path",{d:"M15.54 8.46a5 5 0 0 1 0 7.07",key:"ltjumu"}],["path",{d:"M19.07 4.93a10 10 0 0 1 0 14.14",key:"1kegas"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const yI=k("VolumeXIcon",[["polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5",key:"16drj5"}],["line",{x1:"22",x2:"16",y1:"9",y2:"15",key:"1ewh16"}],["line",{x1:"16",x2:"22",y1:"9",y2:"15",key:"5ykzw1"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const _I=k("VolumeIcon",[["polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5",key:"16drj5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const gI=k("VoteIcon",[["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}],["path",{d:"M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7Z",key:"1ezoue"}],["path",{d:"M22 19H2",key:"nuriw5"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const kI=k("Wallet2Icon",[["path",{d:"M17 14h.01",key:"7oqj8z"}],["path",{d:"M7 7h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14",key:"u1rqew"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const bI=k("WalletCardsIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2",key:"4125el"}],["path",{d:"M3 11h3c.8 0 1.6.3 2.1.9l1.1.9c1.6 1.6 4.1 1.6 5.7 0l1.1-.9c.5-.5 1.3-.9 2.1-.9H21",key:"1dpki6"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const wI=k("WalletIcon",[["path",{d:"M21 12V7H5a2 2 0 0 1 0-4h14v4",key:"195gfw"}],["path",{d:"M3 5v14a2 2 0 0 0 2 2h16v-5",key:"195n9w"}],["path",{d:"M18 12a2 2 0 0 0 0 4h4v-4Z",key:"vllfpd"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const xI=k("WallpaperIcon",[["circle",{cx:"8",cy:"9",r:"2",key:"gjzl9d"}],["path",{d:"m9 17 6.1-6.1a2 2 0 0 1 2.81.01L22 15V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2",key:"69xh40"}],["path",{d:"M8 21h8",key:"1ev6f3"}],["path",{d:"M12 17v4",key:"1riwvh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const MI=k("Wand2Icon",[["path",{d:"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z",key:"1bcowg"}],["path",{d:"m14 7 3 3",key:"1r5n42"}],["path",{d:"M5 6v4",key:"ilb8ba"}],["path",{d:"M19 14v4",key:"blhpug"}],["path",{d:"M10 2v2",key:"7u0qdc"}],["path",{d:"M7 8H3",key:"zfb6yr"}],["path",{d:"M21 16h-4",key:"1cnmox"}],["path",{d:"M11 3H9",key:"1obp7u"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const CI=k("WandIcon",[["path",{d:"M15 4V2",key:"z1p9b7"}],["path",{d:"M15 16v-2",key:"px0unx"}],["path",{d:"M8 9h2",key:"1g203m"}],["path",{d:"M20 9h2",key:"19tzq7"}],["path",{d:"M17.8 11.8 19 13",key:"yihg8r"}],["path",{d:"M15 9h0",key:"kg5t1u"}],["path",{d:"M17.8 6.2 19 5",key:"fd4us0"}],["path",{d:"m3 21 9-9",key:"1jfql5"}],["path",{d:"M12.2 6.2 11 5",key:"i3da3b"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const SI=k("WarehouseIcon",[["path",{d:"M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z",key:"gksnxg"}],["path",{d:"M6 18h12",key:"9pbo8z"}],["path",{d:"M6 14h12",key:"4cwo0f"}],["rect",{width:"12",height:"12",x:"6",y:"10",key:"apd30q"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const II=k("WatchIcon",[["circle",{cx:"12",cy:"12",r:"6",key:"1vlfrh"}],["polyline",{points:"12 10 12 12 13 13",key:"19dquz"}],["path",{d:"m16.13 7.66-.81-4.05a2 2 0 0 0-2-1.61h-2.68a2 2 0 0 0-2 1.61l-.78 4.05",key:"18k57s"}],["path",{d:"m7.88 16.36.8 4a2 2 0 0 0 2 1.61h2.72a2 2 0 0 0 2-1.61l.81-4.05",key:"16ny36"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const LI=k("WavesIcon",[["path",{d:"M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"knzxuh"}],["path",{d:"M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"2jd2cc"}],["path",{d:"M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"rd2r6e"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const $I=k("WaypointsIcon",[["circle",{cx:"12",cy:"4.5",r:"2.5",key:"r5ysbb"}],["path",{d:"m10.2 6.3-3.9 3.9",key:"1nzqf6"}],["circle",{cx:"4.5",cy:"12",r:"2.5",key:"jydg6v"}],["path",{d:"M7 12h10",key:"b7w52i"}],["circle",{cx:"19.5",cy:"12",r:"2.5",key:"1piiel"}],["path",{d:"m13.8 17.7 3.9-3.9",key:"1wyg1y"}],["circle",{cx:"12",cy:"19.5",r:"2.5",key:"13o1pw"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const AI=k("WebcamIcon",[["circle",{cx:"12",cy:"10",r:"8",key:"1gshiw"}],["circle",{cx:"12",cy:"10",r:"3",key:"ilqhr7"}],["path",{d:"M7 22h10",key:"10w4w3"}],["path",{d:"M12 22v-4",key:"1utk9m"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const EI=k("WebhookIcon",[["path",{d:"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2",key:"q3hayz"}],["path",{d:"m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06",key:"1go1hn"}],["path",{d:"m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8",key:"qlwsc0"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const TI=k("WeightIcon",[["circle",{cx:"12",cy:"5",r:"3",key:"rqqgnr"}],["path",{d:"M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z",key:"56o5sh"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const PI=k("WheatOffIcon",[["path",{d:"m2 22 10-10",key:"28ilpk"}],["path",{d:"m16 8-1.17 1.17",key:"1qqm82"}],["path",{d:"M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z",key:"1rdhi6"}],["path",{d:"m8 8-.53.53a3.5 3.5 0 0 0 0 4.94L9 15l1.53-1.53c.55-.55.88-1.25.98-1.97",key:"4wz8re"}],["path",{d:"M10.91 5.26c.15-.26.34-.51.56-.73L13 3l1.53 1.53a3.5 3.5 0 0 1 .28 4.62",key:"rves66"}],["path",{d:"M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z",key:"19rau1"}],["path",{d:"M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z",key:"tc8ph9"}],["path",{d:"m16 16-.53.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.49 3.49 0 0 1 1.97-.98",key:"ak46r"}],["path",{d:"M18.74 13.09c.26-.15.51-.34.73-.56L21 11l-1.53-1.53a3.5 3.5 0 0 0-4.62-.28",key:"1tw520"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const DI=k("WheatIcon",[["path",{d:"M2 22 16 8",key:"60hf96"}],["path",{d:"M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z",key:"1rdhi6"}],["path",{d:"M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z",key:"1sdzmb"}],["path",{d:"M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z",key:"eoatbi"}],["path",{d:"M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z",key:"19rau1"}],["path",{d:"M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z",key:"tc8ph9"}],["path",{d:"M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z",key:"2m8kc5"}],["path",{d:"M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z",key:"vex3ng"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const RI=k("WholeWordIcon",[["circle",{cx:"7",cy:"12",r:"3",key:"12clwm"}],["path",{d:"M10 9v6",key:"17i7lo"}],["circle",{cx:"17",cy:"12",r:"3",key:"gl7c2s"}],["path",{d:"M14 7v8",key:"dl84cr"}],["path",{d:"M22 17v1c0 .5-.5 1-1 1H3c-.5 0-1-.5-1-1v-1",key:"lt2kga"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const OI=k("WifiOffIcon",[["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}],["path",{d:"M8.5 16.5a5 5 0 0 1 7 0",key:"sej527"}],["path",{d:"M2 8.82a15 15 0 0 1 4.17-2.65",key:"11utq1"}],["path",{d:"M10.66 5c4.01-.36 8.14.9 11.34 3.76",key:"hxefdu"}],["path",{d:"M16.85 11.25a10 10 0 0 1 2.22 1.68",key:"q734kn"}],["path",{d:"M5 13a10 10 0 0 1 5.24-2.76",key:"piq4yl"}],["line",{x1:"12",x2:"12.01",y1:"20",y2:"20",key:"of4bc4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const VI=k("WifiIcon",[["path",{d:"M5 13a10 10 0 0 1 14 0",key:"6v8j51"}],["path",{d:"M8.5 16.5a5 5 0 0 1 7 0",key:"sej527"}],["path",{d:"M2 8.82a15 15 0 0 1 20 0",key:"dnpr2z"}],["line",{x1:"12",x2:"12.01",y1:"20",y2:"20",key:"of4bc4"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const UI=k("WindIcon",[["path",{d:"M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2",key:"1k4u03"}],["path",{d:"M9.6 4.6A2 2 0 1 1 11 8H2",key:"b7d0fd"}],["path",{d:"M12.6 19.4A2 2 0 1 0 14 16H2",key:"1p5cb3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const FI=k("WineOffIcon",[["path",{d:"M8 22h8",key:"rmew8v"}],["path",{d:"M7 10h3m7 0h-1.343",key:"v48bem"}],["path",{d:"M12 15v7",key:"t2xh3l"}],["path",{d:"M7.307 7.307A12.33 12.33 0 0 0 7 10a5 5 0 0 0 7.391 4.391M8.638 2.981C8.75 2.668 8.872 2.34 9 2h6c1.5 4 2 6 2 8 0 .407-.05.809-.145 1.198",key:"1ymjlu"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const jI=k("WineIcon",[["path",{d:"M8 22h8",key:"rmew8v"}],["path",{d:"M7 10h10",key:"1101jm"}],["path",{d:"M12 15v7",key:"t2xh3l"}],["path",{d:"M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z",key:"10ffi3"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const HI=k("WorkflowIcon",[["rect",{width:"8",height:"8",x:"3",y:"3",rx:"2",key:"by2w9f"}],["path",{d:"M7 11v4a2 2 0 0 0 2 2h4",key:"xkn7yn"}],["rect",{width:"8",height:"8",x:"13",y:"13",rx:"2",key:"1cgmvn"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const NI=k("WrapTextIcon",[["line",{x1:"3",x2:"21",y1:"6",y2:"6",key:"4m8b97"}],["path",{d:"M3 12h15a3 3 0 1 1 0 6h-4",key:"1cl7v7"}],["polyline",{points:"16 16 14 18 16 20",key:"1jznyi"}],["line",{x1:"3",x2:"10",y1:"18",y2:"18",key:"1h33wv"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const zI=k("WrenchIcon",[["path",{d:"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z",key:"cbrjhi"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const BI=k("XCircleIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"m9 9 6 6",key:"z0biqf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const qI=k("XOctagonIcon",[["polygon",{points:"7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2",key:"h1p8hx"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"m9 9 6 6",key:"z0biqf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const WI=k("XSquareIcon",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"m9 9 6 6",key:"z0biqf"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const GI=k("XIcon",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ZI=k("YoutubeIcon",[["path",{d:"M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17",key:"1q2vi4"}],["path",{d:"m10 15 5-3-5-3z",key:"1jp15x"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const KI=k("ZapOffIcon",[["polyline",{points:"12.41 6.75 13 2 10.57 4.92",key:"122m05"}],["polyline",{points:"18.57 12.91 21 10 15.66 10",key:"16r43o"}],["polyline",{points:"8 8 3 14 12 14 11 22 16 16",key:"tmh4bc"}],["line",{x1:"2",x2:"22",y1:"2",y2:"22",key:"a6p6uj"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const XI=k("ZapIcon",[["polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2",key:"45s27k"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const YI=k("ZoomInIcon",[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["line",{x1:"21",x2:"16.65",y1:"21",y2:"16.65",key:"13gj7c"}],["line",{x1:"11",x2:"11",y1:"8",y2:"14",key:"1vmskp"}],["line",{x1:"8",x2:"14",y1:"11",y2:"11",key:"durymu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const QI=k("ZoomOutIcon",[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["line",{x1:"21",x2:"16.65",y1:"21",y2:"16.65",key:"13gj7c"}],["line",{x1:"8",x2:"14",y1:"11",y2:"11",key:"durymu"}]]);/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Dne=Object.freeze(Object.defineProperty({__proto__:null,AArrowDown:O1,AArrowUp:V1,ALargeSmall:U1,Accessibility:F1,Activity:H1,ActivitySquare:j1,AirVent:N1,Airplay:z1,AlarmClock:q1,AlarmClockCheck:ki,AlarmClockMinus:bi,AlarmClockOff:B1,AlarmClockPlus:wi,AlarmSmoke:W1,Album:G1,AlertCircle:Z1,AlertOctagon:K1,AlertTriangle:X1,AlignCenter:J1,AlignCenterHorizontal:Y1,AlignCenterVertical:Q1,AlignEndHorizontal:ep,AlignEndVertical:tp,AlignHorizontalDistributeCenter:ap,AlignHorizontalDistributeEnd:np,AlignHorizontalDistributeStart:sp,AlignHorizontalJustifyCenter:op,AlignHorizontalJustifyEnd:rp,AlignHorizontalJustifyStart:ip,AlignHorizontalSpaceAround:lp,AlignHorizontalSpaceBetween:cp,AlignJustify:dp,AlignLeft:up,AlignRight:pp,AlignStartHorizontal:hp,AlignStartVertical:fp,AlignVerticalDistributeCenter:mp,AlignVerticalDistributeEnd:vp,AlignVerticalDistributeStart:yp,AlignVerticalJustifyCenter:_p,AlignVerticalJustifyEnd:gp,AlignVerticalJustifyStart:kp,AlignVerticalSpaceAround:bp,AlignVerticalSpaceBetween:wp,Ampersand:xp,Ampersands:Mp,Anchor:Cp,Angry:Sp,Annoyed:Ip,Antenna:Lp,Anvil:$p,Aperture:Ap,AppWindow:Ep,Apple:Tp,Archive:Rp,ArchiveRestore:Pp,ArchiveX:Dp,AreaChart:Op,Armchair:Vp,ArrowBigDown:Fp,ArrowBigDownDash:Up,ArrowBigLeft:Hp,ArrowBigLeftDash:jp,ArrowBigRight:zp,ArrowBigRightDash:Np,ArrowBigUp:qp,ArrowBigUpDash:Bp,ArrowDown:ih,ArrowDown01:Wp,ArrowDown10:Gp,ArrowDownAZ:xi,ArrowDownCircle:Zp,ArrowDownFromLine:Kp,ArrowDownLeft:Qp,ArrowDownLeftFromCircle:Xp,ArrowDownLeftSquare:Yp,ArrowDownNarrowWide:Jp,ArrowDownRight:ah,ArrowDownRightFromCircle:eh,ArrowDownRightSquare:th,ArrowDownSquare:nh,ArrowDownToDot:sh,ArrowDownToLine:oh,ArrowDownUp:rh,ArrowDownWideNarrow:Mi,ArrowDownZA:Ci,ArrowLeft:hh,ArrowLeftCircle:lh,ArrowLeftFromLine:ch,ArrowLeftRight:dh,ArrowLeftSquare:uh,ArrowLeftToLine:ph,ArrowRight:gh,ArrowRightCircle:fh,ArrowRightFromLine:mh,ArrowRightLeft:vh,ArrowRightSquare:yh,ArrowRightToLine:_h,ArrowUp:Rh,ArrowUp01:kh,ArrowUp10:bh,ArrowUpAZ:Si,ArrowUpCircle:wh,ArrowUpDown:xh,ArrowUpFromDot:Mh,ArrowUpFromLine:Ch,ArrowUpLeft:Lh,ArrowUpLeftFromCircle:Sh,ArrowUpLeftSquare:Ih,ArrowUpNarrowWide:Ii,ArrowUpRight:Eh,ArrowUpRightFromCircle:$h,ArrowUpRightSquare:Ah,ArrowUpSquare:Th,ArrowUpToLine:Ph,ArrowUpWideNarrow:Dh,ArrowUpZA:Li,ArrowsUpFromLine:Oh,Asterisk:Vh,AtSign:Uh,Atom:Fh,AudioLines:jh,AudioWaveform:Hh,Award:Nh,Axe:zh,Axis3d:$i,Baby:Bh,Backpack:qh,Badge:lf,BadgeAlert:Wh,BadgeCent:Gh,BadgeCheck:Ai,BadgeDollarSign:Zh,BadgeEuro:Kh,BadgeHelp:Xh,BadgeIndianRupee:Yh,BadgeInfo:Qh,BadgeJapaneseYen:Jh,BadgeMinus:ef,BadgePercent:tf,BadgePlus:af,BadgePoundSterling:nf,BadgeRussianRuble:sf,BadgeSwissFranc:of,BadgeX:rf,BaggageClaim:cf,Ban:df,Banana:uf,Banknote:pf,BarChart:gf,BarChart2:hf,BarChart3:ff,BarChart4:mf,BarChartBig:vf,BarChartHorizontal:_f,BarChartHorizontalBig:yf,Barcode:kf,Baseline:bf,Bath:wf,Battery:Lf,BatteryCharging:xf,BatteryFull:Mf,BatteryLow:Cf,BatteryMedium:Sf,BatteryWarning:If,Beaker:$f,Bean:Ef,BeanOff:Af,Bed:Df,BedDouble:Tf,BedSingle:Pf,Beef:Rf,Beer:Of,Bell:zf,BellDot:Vf,BellElectric:Uf,BellMinus:Ff,BellOff:jf,BellPlus:Hf,BellRing:Nf,Bike:Bf,Binary:qf,Biohazard:Wf,Bird:Gf,Bitcoin:Zf,Blinds:Kf,Blocks:Xf,Bluetooth:em,BluetoothConnected:Yf,BluetoothOff:Qf,BluetoothSearching:Jf,Bold:tm,Bolt:am,Bomb:nm,Bone:sm,Book:Im,BookA:om,BookAudio:rm,BookCheck:im,BookCopy:lm,BookDashed:Ei,BookDown:cm,BookHeadphones:dm,BookHeart:um,BookImage:pm,BookKey:hm,BookLock:fm,BookMarked:mm,BookMinus:vm,BookOpen:gm,BookOpenCheck:ym,BookOpenText:_m,BookPlus:km,BookText:bm,BookType:wm,BookUp:Mm,BookUp2:xm,BookUser:Cm,BookX:Sm,Bookmark:Tm,BookmarkCheck:Lm,BookmarkMinus:$m,BookmarkPlus:Am,BookmarkX:Em,BoomBox:Pm,Bot:Dm,Box:Om,BoxSelect:Rm,Boxes:Vm,Braces:Ti,Brackets:Um,Brain:Hm,BrainCircuit:Fm,BrainCog:jm,BrickWall:Nm,Briefcase:zm,BringToFront:Bm,Brush:qm,Bug:Zm,BugOff:Wm,BugPlay:Gm,Building:Xm,Building2:Km,Bus:Qm,BusFront:Ym,Cable:e2,CableCar:Jm,Cake:a2,CakeSlice:t2,Calculator:n2,Calendar:v2,CalendarCheck:o2,CalendarCheck2:s2,CalendarClock:r2,CalendarDays:i2,CalendarHeart:l2,CalendarMinus:c2,CalendarOff:d2,CalendarPlus:u2,CalendarRange:p2,CalendarSearch:h2,CalendarX:m2,CalendarX2:f2,Camera:_2,CameraOff:y2,CandlestickChart:g2,Candy:w2,CandyCane:k2,CandyOff:b2,Car:C2,CarFront:x2,CarTaxiFront:M2,Caravan:S2,Carrot:I2,CaseLower:L2,CaseSensitive:$2,CaseUpper:A2,CassetteTape:E2,Cast:T2,Castle:P2,Cat:D2,Cctv:R2,Check:H2,CheckCheck:O2,CheckCircle:U2,CheckCircle2:V2,CheckSquare:j2,CheckSquare2:F2,ChefHat:N2,Cherry:z2,ChevronDown:W2,ChevronDownCircle:B2,ChevronDownSquare:q2,ChevronFirst:G2,ChevronLast:Z2,ChevronLeft:Y2,ChevronLeftCircle:K2,ChevronLeftSquare:X2,ChevronRight:e0,ChevronRightCircle:Q2,ChevronRightSquare:J2,ChevronUp:n0,ChevronUpCircle:t0,ChevronUpSquare:a0,ChevronsDown:o0,ChevronsDownUp:s0,ChevronsLeft:i0,ChevronsLeftRight:r0,ChevronsRight:c0,ChevronsRightLeft:l0,ChevronsUp:u0,ChevronsUpDown:d0,Chrome:p0,Church:h0,Cigarette:m0,CigaretteOff:f0,Circle:M0,CircleDashed:v0,CircleDollarSign:y0,CircleDot:g0,CircleDotDashed:_0,CircleEllipsis:k0,CircleEqual:b0,CircleOff:w0,CircleSlash:x0,CircleSlash2:Pi,CircleUser:Ri,CircleUserRound:Di,CircuitBoard:C0,Citrus:S0,Clapperboard:I0,Clipboard:O0,ClipboardCheck:L0,ClipboardCopy:$0,ClipboardEdit:A0,ClipboardList:E0,ClipboardPaste:T0,ClipboardSignature:P0,ClipboardType:D0,ClipboardX:R0,Clock:K0,Clock1:V0,Clock10:U0,Clock11:F0,Clock12:j0,Clock2:H0,Clock3:N0,Clock4:z0,Clock5:B0,Clock6:q0,Clock7:W0,Clock8:G0,Clock9:Z0,Cloud:cv,CloudCog:X0,CloudDrizzle:Y0,CloudFog:Q0,CloudHail:J0,CloudLightning:ev,CloudMoon:av,CloudMoonRain:tv,CloudOff:nv,CloudRain:ov,CloudRainWind:sv,CloudSnow:rv,CloudSun:lv,CloudSunRain:iv,Cloudy:dv,Clover:uv,Club:pv,Code:fv,Code2:hv,Codepen:mv,Codesandbox:vv,Coffee:yv,Cog:_v,Coins:gv,Columns2:Oi,Columns3:Vi,Columns4:kv,Combine:bv,Command:wv,Compass:xv,Component:Mv,Computer:Cv,ConciergeBell:Sv,Cone:Iv,Construction:Lv,Contact:Av,Contact2:$v,Container:Ev,Contrast:Tv,Cookie:Pv,CookingPot:Dv,Copy:jv,CopyCheck:Rv,CopyMinus:Ov,CopyPlus:Vv,CopySlash:Uv,CopyX:Fv,Copyleft:Hv,Copyright:Nv,CornerDownLeft:zv,CornerDownRight:Bv,CornerLeftDown:qv,CornerLeftUp:Wv,CornerRightDown:Gv,CornerRightUp:Zv,CornerUpLeft:Kv,CornerUpRight:Xv,Cpu:Yv,CreativeCommons:Qv,CreditCard:Jv,Croissant:ey,Crop:ty,Cross:ay,Crosshair:ny,Crown:sy,Cuboid:oy,CupSoda:ry,Currency:iy,Cylinder:ly,Database:uy,DatabaseBackup:cy,DatabaseZap:dy,Delete:py,Dessert:hy,Diameter:fy,Diamond:my,Dice1:vy,Dice2:yy,Dice3:_y,Dice4:gy,Dice5:ky,Dice6:by,Dices:wy,Diff:xy,Disc:Iy,Disc2:My,Disc3:Cy,DiscAlbum:Sy,Divide:Ay,DivideCircle:Ly,DivideSquare:$y,Dna:Ty,DnaOff:Ey,Dog:Py,DollarSign:Dy,Donut:Ry,DoorClosed:Oy,DoorOpen:Vy,Dot:Uy,Download:jy,DownloadCloud:Fy,DraftingCompass:Hy,Drama:Ny,Dribbble:zy,Drill:By,Droplet:qy,Droplets:Wy,Drum:Gy,Drumstick:Zy,Dumbbell:Ky,Ear:Yy,EarOff:Xy,Egg:e_,EggFried:Qy,EggOff:Jy,Equal:a_,EqualNot:t_,Eraser:n_,Euro:s_,Expand:o_,ExternalLink:r_,Eye:l_,EyeOff:i_,Facebook:c_,Factory:d_,Fan:u_,FastForward:p_,Feather:h_,Fence:f_,FerrisWheel:m_,Figma:v_,File:yg,FileArchive:y_,FileAudio:g_,FileAudio2:__,FileAxis3d:Ui,FileBadge:b_,FileBadge2:k_,FileBarChart:x_,FileBarChart2:w_,FileBox:M_,FileCheck:S_,FileCheck2:C_,FileClock:I_,FileCode:$_,FileCode2:L_,FileCog:Fi,FileDiff:A_,FileDigit:E_,FileDown:T_,FileEdit:P_,FileHeart:D_,FileImage:R_,FileInput:O_,FileJson:U_,FileJson2:V_,FileKey:j_,FileKey2:F_,FileLineChart:H_,FileLock:z_,FileLock2:N_,FileMinus:q_,FileMinus2:B_,FileMusic:W_,FileOutput:G_,FilePieChart:Z_,FilePlus:X_,FilePlus2:K_,FileQuestion:Y_,FileScan:Q_,FileSearch:eg,FileSearch2:J_,FileSignature:tg,FileSpreadsheet:ag,FileStack:ng,FileSymlink:sg,FileTerminal:og,FileText:rg,FileType:lg,FileType2:ig,FileUp:cg,FileVideo:ug,FileVideo2:dg,FileVolume:hg,FileVolume2:pg,FileWarning:fg,FileX:vg,FileX2:mg,Files:_g,Film:gg,Filter:bg,FilterX:kg,Fingerprint:wg,FireExtinguisher:xg,Fish:Sg,FishOff:Mg,FishSymbol:Cg,Flag:Ag,FlagOff:Ig,FlagTriangleLeft:Lg,FlagTriangleRight:$g,Flame:Tg,FlameKindling:Eg,Flashlight:Dg,FlashlightOff:Pg,FlaskConical:Og,FlaskConicalOff:Rg,FlaskRound:Vg,FlipHorizontal:Fg,FlipHorizontal2:Ug,FlipVertical:Hg,FlipVertical2:jg,Flower:zg,Flower2:Ng,Focus:Bg,FoldHorizontal:qg,FoldVertical:Wg,Folder:kk,FolderArchive:Gg,FolderCheck:Zg,FolderClock:Kg,FolderClosed:Xg,FolderCog:ji,FolderDot:Yg,FolderDown:Qg,FolderEdit:Jg,FolderGit:tk,FolderGit2:ek,FolderHeart:ak,FolderInput:nk,FolderKanban:sk,FolderKey:ok,FolderLock:rk,FolderMinus:ik,FolderOpen:ck,FolderOpenDot:lk,FolderOutput:dk,FolderPlus:uk,FolderRoot:pk,FolderSearch:fk,FolderSearch2:hk,FolderSymlink:mk,FolderSync:vk,FolderTree:yk,FolderUp:_k,FolderX:gk,Folders:bk,Footprints:wk,Forklift:xk,FormInput:Mk,Forward:Ck,Frame:Sk,Framer:Ik,Frown:Lk,Fuel:$k,Fullscreen:Ak,FunctionSquare:Ek,GalleryHorizontal:Pk,GalleryHorizontalEnd:Tk,GalleryThumbnails:Dk,GalleryVertical:Ok,GalleryVerticalEnd:Rk,Gamepad:Uk,Gamepad2:Vk,GanttChart:Fk,GanttChartSquare:Hi,Gauge:Hk,GaugeCircle:jk,Gavel:Nk,Gem:zk,Ghost:Bk,Gift:qk,GitBranch:Gk,GitBranchPlus:Wk,GitCommitHorizontal:Ni,GitCommitVertical:Zk,GitCompare:Xk,GitCompareArrows:Kk,GitFork:Yk,GitGraph:Qk,GitMerge:Jk,GitPullRequest:ob,GitPullRequestArrow:eb,GitPullRequestClosed:tb,GitPullRequestCreate:nb,GitPullRequestCreateArrow:ab,GitPullRequestDraft:sb,Github:rb,Gitlab:ib,GlassWater:lb,Glasses:cb,Globe:ub,Globe2:db,Goal:pb,Grab:hb,GraduationCap:fb,Grape:mb,Grid2x2:zi,Grid3x3:yo,Grip:_b,GripHorizontal:vb,GripVertical:yb,Group:gb,Guitar:kb,Hammer:bb,Hand:xb,HandMetal:wb,HardDrive:Sb,HardDriveDownload:Mb,HardDriveUpload:Cb,HardHat:Ib,Hash:Lb,Haze:$b,HdmiPort:Ab,Heading:Vb,Heading1:Eb,Heading2:Tb,Heading3:Pb,Heading4:Db,Heading5:Rb,Heading6:Ob,Headphones:Ub,Heart:zb,HeartCrack:Fb,HeartHandshake:jb,HeartOff:Hb,HeartPulse:Nb,HelpCircle:Bb,HelpingHand:qb,Hexagon:Wb,Highlighter:Gb,History:Zb,Home:Kb,Hop:Yb,HopOff:Xb,Hotel:Qb,Hourglass:Jb,IceCream:tw,IceCream2:ew,Image:rw,ImageDown:aw,ImageMinus:nw,ImageOff:sw,ImagePlus:ow,Import:iw,Inbox:lw,Indent:cw,IndianRupee:dw,Infinity:uw,Info:pw,InspectionPanel:hw,Instagram:fw,Italic:mw,IterationCcw:vw,IterationCw:yw,JapaneseYen:_w,Joystick:gw,Kanban:kw,KanbanSquare:qi,KanbanSquareDashed:Bi,Key:xw,KeyRound:bw,KeySquare:ww,Keyboard:Cw,KeyboardMusic:Mw,Lamp:Ew,LampCeiling:Sw,LampDesk:Iw,LampFloor:Lw,LampWallDown:$w,LampWallUp:Aw,LandPlot:Tw,Landmark:Pw,Languages:Dw,Laptop:Ow,Laptop2:Rw,Lasso:Uw,LassoSelect:Vw,Laugh:Fw,Layers:Nw,Layers2:jw,Layers3:Hw,LayoutDashboard:zw,LayoutGrid:Bw,LayoutList:qw,LayoutPanelLeft:Ww,LayoutPanelTop:Gw,LayoutTemplate:Zw,Leaf:Kw,LeafyGreen:Xw,Library:Jw,LibraryBig:Yw,LibrarySquare:Qw,LifeBuoy:e4,Ligature:t4,Lightbulb:n4,LightbulbOff:a4,LineChart:s4,Link:i4,Link2:r4,Link2Off:o4,Linkedin:l4,List:w4,ListChecks:c4,ListEnd:d4,ListFilter:u4,ListMinus:p4,ListMusic:h4,ListOrdered:f4,ListPlus:m4,ListRestart:v4,ListStart:y4,ListTodo:_4,ListTree:g4,ListVideo:k4,ListX:b4,Loader:M4,Loader2:x4,Locate:I4,LocateFixed:C4,LocateOff:S4,Lock:$4,LockKeyhole:L4,LogIn:A4,LogOut:E4,Lollipop:T4,Luggage:P4,MSquare:D4,Magnet:R4,Mail:B4,MailCheck:O4,MailMinus:V4,MailOpen:U4,MailPlus:F4,MailQuestion:j4,MailSearch:H4,MailWarning:N4,MailX:z4,Mailbox:q4,Mails:W4,Map:X4,MapPin:Z4,MapPinOff:G4,MapPinned:K4,Martini:Y4,Maximize:J4,Maximize2:Q4,Medal:e5,Megaphone:a5,MegaphoneOff:t5,Meh:n5,MemoryStick:s5,Menu:r5,MenuSquare:o5,Merge:i5,MessageCircle:_5,MessageCircleCode:l5,MessageCircleDashed:c5,MessageCircleHeart:d5,MessageCircleMore:u5,MessageCircleOff:p5,MessageCirclePlus:h5,MessageCircleQuestion:f5,MessageCircleReply:m5,MessageCircleWarning:v5,MessageCircleX:y5,MessageSquare:P5,MessageSquareCode:g5,MessageSquareDashed:k5,MessageSquareDiff:b5,MessageSquareDot:w5,MessageSquareHeart:x5,MessageSquareMore:M5,MessageSquareOff:C5,MessageSquarePlus:S5,MessageSquareQuote:I5,MessageSquareReply:L5,MessageSquareShare:$5,MessageSquareText:A5,MessageSquareWarning:E5,MessageSquareX:T5,MessagesSquare:D5,Mic:V5,Mic2:R5,MicOff:O5,Microscope:U5,Microwave:F5,Milestone:j5,Milk:N5,MilkOff:H5,Minimize:B5,Minimize2:z5,Minus:G5,MinusCircle:q5,MinusSquare:W5,Monitor:o3,MonitorCheck:Z5,MonitorDot:K5,MonitorDown:X5,MonitorOff:Y5,MonitorPause:Q5,MonitorPlay:J5,MonitorSmartphone:e3,MonitorSpeaker:t3,MonitorStop:a3,MonitorUp:n3,MonitorX:s3,Moon:i3,MoonStar:r3,MoreHorizontal:l3,MoreVertical:c3,Mountain:u3,MountainSnow:d3,Mouse:v3,MousePointer:m3,MousePointer2:p3,MousePointerClick:h3,MousePointerSquare:Wi,MousePointerSquareDashed:f3,Move:$3,Move3d:Gi,MoveDiagonal:_3,MoveDiagonal2:y3,MoveDown:b3,MoveDownLeft:g3,MoveDownRight:k3,MoveHorizontal:w3,MoveLeft:x3,MoveRight:M3,MoveUp:I3,MoveUpLeft:C3,MoveUpRight:S3,MoveVertical:L3,Music:P3,Music2:A3,Music3:E3,Music4:T3,Navigation:V3,Navigation2:R3,Navigation2Off:D3,NavigationOff:O3,Network:U3,Newspaper:F3,Nfc:j3,Nut:N3,NutOff:H3,Octagon:z3,Option:B3,Orbit:q3,Outdent:W3,Package:ex,Package2:G3,PackageCheck:Z3,PackageMinus:K3,PackageOpen:X3,PackagePlus:Y3,PackageSearch:Q3,PackageX:J3,PaintBucket:tx,Paintbrush:nx,Paintbrush2:ax,Palette:sx,Palmtree:ox,PanelBottom:lx,PanelBottomClose:rx,PanelBottomDashed:Zi,PanelBottomOpen:ix,PanelLeft:Qi,PanelLeftClose:Ki,PanelLeftDashed:Xi,PanelLeftOpen:Yi,PanelRight:ux,PanelRightClose:cx,PanelRightDashed:Ji,PanelRightOpen:dx,PanelTop:fx,PanelTopClose:px,PanelTopDashed:el,PanelTopOpen:hx,PanelsLeftBottom:mx,PanelsRightBottom:vx,PanelsTopLeft:tl,Paperclip:yx,Parentheses:_x,ParkingCircle:kx,ParkingCircleOff:gx,ParkingMeter:bx,ParkingSquare:xx,ParkingSquareOff:wx,PartyPopper:Mx,Pause:Ix,PauseCircle:Cx,PauseOctagon:Sx,PawPrint:Lx,PcCase:$x,Pen:nl,PenLine:al,PenSquare:_o,PenTool:Ax,Pencil:Px,PencilLine:Ex,PencilRuler:Tx,Pentagon:Dx,Percent:Ux,PercentCircle:Rx,PercentDiamond:Ox,PercentSquare:Vx,PersonStanding:Fx,Phone:Wx,PhoneCall:jx,PhoneForwarded:Hx,PhoneIncoming:Nx,PhoneMissed:zx,PhoneOff:Bx,PhoneOutgoing:qx,Pi:Zx,PiSquare:Gx,Piano:Kx,PictureInPicture:Yx,PictureInPicture2:Xx,PieChart:Qx,PiggyBank:Jx,Pilcrow:t8,PilcrowSquare:e8,Pill:a8,Pin:s8,PinOff:n8,Pipette:o8,Pizza:r8,Plane:c8,PlaneLanding:i8,PlaneTakeoff:l8,Play:p8,PlayCircle:d8,PlaySquare:u8,Plug:v8,Plug2:h8,PlugZap:m8,PlugZap2:f8,Plus:g8,PlusCircle:y8,PlusSquare:_8,Pocket:b8,PocketKnife:k8,Podcast:w8,Pointer:M8,PointerOff:x8,Popcorn:C8,Popsicle:S8,PoundSterling:I8,Power:E8,PowerCircle:L8,PowerOff:$8,PowerSquare:A8,Presentation:T8,Printer:P8,Projector:D8,Puzzle:R8,Pyramid:O8,QrCode:V8,Quote:U8,Rabbit:F8,Radar:j8,Radiation:H8,Radio:B8,RadioReceiver:N8,RadioTower:z8,Radius:q8,RailSymbol:W8,Rainbow:G8,Rat:Z8,Ratio:K8,Receipt:X8,RectangleHorizontal:Y8,RectangleVertical:Q8,Recycle:J8,Redo:a6,Redo2:e6,RedoDot:t6,RefreshCcw:s6,RefreshCcwDot:n6,RefreshCw:r6,RefreshCwOff:o6,Refrigerator:i6,Regex:l6,RemoveFormatting:c6,Repeat:p6,Repeat1:d6,Repeat2:u6,Replace:f6,ReplaceAll:h6,Reply:v6,ReplyAll:m6,Rewind:y6,Ribbon:_6,Rocket:g6,RockingChair:k6,RollerCoaster:b6,Rotate3d:sl,RotateCcw:w6,RotateCw:x6,Route:C6,RouteOff:M6,Router:S6,Rows2:ol,Rows3:rl,Rows4:I6,Rss:L6,Ruler:$6,RussianRuble:A6,Sailboat:E6,Salad:T6,Sandwich:P6,Satellite:R6,SatelliteDish:D6,Save:V6,SaveAll:O6,Scale:U6,Scale3d:il,Scaling:F6,Scan:W6,ScanBarcode:j6,ScanEye:H6,ScanFace:N6,ScanLine:z6,ScanSearch:B6,ScanText:q6,ScatterChart:G6,School:K6,School2:Z6,Scissors:J6,ScissorsLineDashed:X6,ScissorsSquare:Q6,ScissorsSquareDashedBottom:Y6,ScreenShare:tM,ScreenShareOff:eM,Scroll:nM,ScrollText:aM,Search:lM,SearchCheck:sM,SearchCode:oM,SearchSlash:rM,SearchX:iM,Send:dM,SendHorizontal:ll,SendToBack:cM,SeparatorHorizontal:uM,SeparatorVertical:pM,Server:vM,ServerCog:hM,ServerCrash:fM,ServerOff:mM,Settings:_M,Settings2:yM,Shapes:gM,Share:bM,Share2:kM,Sheet:wM,Shell:xM,Shield:PM,ShieldAlert:MM,ShieldBan:CM,ShieldCheck:SM,ShieldEllipsis:IM,ShieldHalf:LM,ShieldMinus:$M,ShieldOff:AM,ShieldPlus:EM,ShieldQuestion:TM,ShieldX:cl,Ship:RM,ShipWheel:DM,Shirt:OM,ShoppingBag:VM,ShoppingBasket:UM,ShoppingCart:FM,Shovel:jM,ShowerHead:HM,Shrink:NM,Shrub:zM,Shuffle:BM,Sigma:WM,SigmaSquare:qM,Signal:YM,SignalHigh:GM,SignalLow:ZM,SignalMedium:KM,SignalZero:XM,Signpost:JM,SignpostBig:QM,Siren:e7,SkipBack:t7,SkipForward:a7,Skull:n7,Slack:s7,Slash:o7,Slice:r7,Sliders:l7,SlidersHorizontal:i7,Smartphone:u7,SmartphoneCharging:c7,SmartphoneNfc:d7,Smile:h7,SmilePlus:p7,Snail:f7,Snowflake:m7,Sofa:v7,Soup:y7,Space:_7,Spade:g7,Sparkle:k7,Sparkles:dl,Speaker:b7,Speech:w7,SpellCheck:M7,SpellCheck2:x7,Spline:C7,Split:L7,SplitSquareHorizontal:S7,SplitSquareVertical:I7,SprayCan:$7,Sprout:A7,Square:F7,SquareAsterisk:E7,SquareCode:T7,SquareDashedBottom:D7,SquareDashedBottomCode:P7,SquareDot:R7,SquareEqual:O7,SquareSlash:V7,SquareStack:U7,SquareUser:pl,SquareUserRound:ul,Squircle:j7,Squirrel:H7,Stamp:N7,Star:q7,StarHalf:z7,StarOff:B7,StepBack:W7,StepForward:G7,Stethoscope:Z7,Sticker:K7,StickyNote:X7,StopCircle:Y7,Store:Q7,StretchHorizontal:J7,StretchVertical:eC,Strikethrough:tC,Subscript:aC,Subtitles:nC,Sun:lC,SunDim:sC,SunMedium:oC,SunMoon:rC,SunSnow:iC,Sunrise:cC,Sunset:dC,Superscript:uC,SwissFranc:pC,SwitchCamera:hC,Sword:fC,Swords:mC,Syringe:vC,Table:gC,Table2:yC,TableProperties:_C,Tablet:bC,TabletSmartphone:kC,Tablets:wC,Tag:xC,Tags:MC,Tally1:CC,Tally2:SC,Tally3:IC,Tally4:LC,Tally5:$C,Tangent:AC,Target:EC,Tent:PC,TentTree:TC,Terminal:RC,TerminalSquare:DC,TestTube:VC,TestTube2:OC,TestTubes:UC,Text:NC,TextCursor:jC,TextCursorInput:FC,TextQuote:HC,TextSelect:hl,Theater:zC,Thermometer:WC,ThermometerSnowflake:BC,ThermometerSun:qC,ThumbsDown:GC,ThumbsUp:ZC,Ticket:KC,Timer:QC,TimerOff:XC,TimerReset:YC,ToggleLeft:JC,ToggleRight:eS,Tornado:tS,Torus:aS,Touchpad:sS,TouchpadOff:nS,TowerControl:oS,ToyBrick:rS,Tractor:iS,TrafficCone:lS,TrainFront:dS,TrainFrontTunnel:cS,TrainTrack:uS,TramFront:fl,Trash:hS,Trash2:pS,TreeDeciduous:fS,TreePine:mS,Trees:vS,Trello:yS,TrendingDown:_S,TrendingUp:gS,Triangle:bS,TriangleRight:kS,Trophy:wS,Truck:xS,Turtle:MS,Tv:SS,Tv2:CS,Twitch:IS,Twitter:LS,Type:$S,Umbrella:ES,UmbrellaOff:AS,Underline:TS,Undo:RS,Undo2:PS,UndoDot:DS,UnfoldHorizontal:OS,UnfoldVertical:VS,Ungroup:US,Unlink:jS,Unlink2:FS,Unlock:NS,UnlockKeyhole:HS,Unplug:zS,Upload:qS,UploadCloud:BS,Usb:WS,User:eI,UserCheck:GS,UserCog:ZS,UserMinus:KS,UserPlus:XS,UserRound:kl,UserRoundCheck:ml,UserRoundCog:vl,UserRoundMinus:yl,UserRoundPlus:_l,UserRoundSearch:YS,UserRoundX:gl,UserSearch:QS,UserX:JS,Users:tI,UsersRound:bl,Utensils:nI,UtensilsCrossed:aI,UtilityPole:sI,Variable:oI,Vegan:rI,VenetianMask:iI,Vibrate:cI,VibrateOff:lI,Video:uI,VideoOff:dI,Videotape:pI,View:hI,Voicemail:fI,Volume:_I,Volume1:mI,Volume2:vI,VolumeX:yI,Vote:gI,Wallet:wI,Wallet2:kI,WalletCards:bI,Wallpaper:xI,Wand:CI,Wand2:MI,Warehouse:SI,Watch:II,Waves:LI,Waypoints:$I,Webcam:AI,Webhook:EI,Weight:TI,Wheat:DI,WheatOff:PI,WholeWord:RI,Wifi:VI,WifiOff:OI,Wind:UI,Wine:jI,WineOff:FI,Workflow:HI,WrapText:NI,Wrench:zI,X:GI,XCircle:BI,XOctagon:qI,XSquare:WI,Youtube:ZI,Zap:XI,ZapOff:KI,ZoomIn:YI,ZoomOut:QI},Symbol.toStringTag,{value:"Module"}));/**
+ * @license lucide-vue-next v0.304.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const Rne=Object.freeze(Object.defineProperty({__proto__:null,AArrowDown:O1,AArrowDownIcon:O1,AArrowUp:V1,AArrowUpIcon:V1,ALargeSmall:U1,ALargeSmallIcon:U1,Accessibility:F1,AccessibilityIcon:F1,Activity:H1,ActivityIcon:H1,ActivitySquare:j1,ActivitySquareIcon:j1,AirVent:N1,AirVentIcon:N1,Airplay:z1,AirplayIcon:z1,AlarmCheck:ki,AlarmCheckIcon:ki,AlarmClock:q1,AlarmClockCheck:ki,AlarmClockCheckIcon:ki,AlarmClockIcon:q1,AlarmClockMinus:bi,AlarmClockMinusIcon:bi,AlarmClockOff:B1,AlarmClockOffIcon:B1,AlarmClockPlus:wi,AlarmClockPlusIcon:wi,AlarmMinus:bi,AlarmMinusIcon:bi,AlarmPlus:wi,AlarmPlusIcon:wi,AlarmSmoke:W1,AlarmSmokeIcon:W1,Album:G1,AlbumIcon:G1,AlertCircle:Z1,AlertCircleIcon:Z1,AlertOctagon:K1,AlertOctagonIcon:K1,AlertTriangle:X1,AlertTriangleIcon:X1,AlignCenter:J1,AlignCenterHorizontal:Y1,AlignCenterHorizontalIcon:Y1,AlignCenterIcon:J1,AlignCenterVertical:Q1,AlignCenterVerticalIcon:Q1,AlignEndHorizontal:ep,AlignEndHorizontalIcon:ep,AlignEndVertical:tp,AlignEndVerticalIcon:tp,AlignHorizontalDistributeCenter:ap,AlignHorizontalDistributeCenterIcon:ap,AlignHorizontalDistributeEnd:np,AlignHorizontalDistributeEndIcon:np,AlignHorizontalDistributeStart:sp,AlignHorizontalDistributeStartIcon:sp,AlignHorizontalJustifyCenter:op,AlignHorizontalJustifyCenterIcon:op,AlignHorizontalJustifyEnd:rp,AlignHorizontalJustifyEndIcon:rp,AlignHorizontalJustifyStart:ip,AlignHorizontalJustifyStartIcon:ip,AlignHorizontalSpaceAround:lp,AlignHorizontalSpaceAroundIcon:lp,AlignHorizontalSpaceBetween:cp,AlignHorizontalSpaceBetweenIcon:cp,AlignJustify:dp,AlignJustifyIcon:dp,AlignLeft:up,AlignLeftIcon:up,AlignRight:pp,AlignRightIcon:pp,AlignStartHorizontal:hp,AlignStartHorizontalIcon:hp,AlignStartVertical:fp,AlignStartVerticalIcon:fp,AlignVerticalDistributeCenter:mp,AlignVerticalDistributeCenterIcon:mp,AlignVerticalDistributeEnd:vp,AlignVerticalDistributeEndIcon:vp,AlignVerticalDistributeStart:yp,AlignVerticalDistributeStartIcon:yp,AlignVerticalJustifyCenter:_p,AlignVerticalJustifyCenterIcon:_p,AlignVerticalJustifyEnd:gp,AlignVerticalJustifyEndIcon:gp,AlignVerticalJustifyStart:kp,AlignVerticalJustifyStartIcon:kp,AlignVerticalSpaceAround:bp,AlignVerticalSpaceAroundIcon:bp,AlignVerticalSpaceBetween:wp,AlignVerticalSpaceBetweenIcon:wp,Ampersand:xp,AmpersandIcon:xp,Ampersands:Mp,AmpersandsIcon:Mp,Anchor:Cp,AnchorIcon:Cp,Angry:Sp,AngryIcon:Sp,Annoyed:Ip,AnnoyedIcon:Ip,Antenna:Lp,AntennaIcon:Lp,Anvil:$p,AnvilIcon:$p,Aperture:Ap,ApertureIcon:Ap,AppWindow:Ep,AppWindowIcon:Ep,Apple:Tp,AppleIcon:Tp,Archive:Rp,ArchiveIcon:Rp,ArchiveRestore:Pp,ArchiveRestoreIcon:Pp,ArchiveX:Dp,ArchiveXIcon:Dp,AreaChart:Op,AreaChartIcon:Op,Armchair:Vp,ArmchairIcon:Vp,ArrowBigDown:Fp,ArrowBigDownDash:Up,ArrowBigDownDashIcon:Up,ArrowBigDownIcon:Fp,ArrowBigLeft:Hp,ArrowBigLeftDash:jp,ArrowBigLeftDashIcon:jp,ArrowBigLeftIcon:Hp,ArrowBigRight:zp,ArrowBigRightDash:Np,ArrowBigRightDashIcon:Np,ArrowBigRightIcon:zp,ArrowBigUp:qp,ArrowBigUpDash:Bp,ArrowBigUpDashIcon:Bp,ArrowBigUpIcon:qp,ArrowDown:ih,ArrowDown01:Wp,ArrowDown01Icon:Wp,ArrowDown10:Gp,ArrowDown10Icon:Gp,ArrowDownAZ:xi,ArrowDownAZIcon:xi,ArrowDownAz:xi,ArrowDownAzIcon:xi,ArrowDownCircle:Zp,ArrowDownCircleIcon:Zp,ArrowDownFromLine:Kp,ArrowDownFromLineIcon:Kp,ArrowDownIcon:ih,ArrowDownLeft:Qp,ArrowDownLeftFromCircle:Xp,ArrowDownLeftFromCircleIcon:Xp,ArrowDownLeftIcon:Qp,ArrowDownLeftSquare:Yp,ArrowDownLeftSquareIcon:Yp,ArrowDownNarrowWide:Jp,ArrowDownNarrowWideIcon:Jp,ArrowDownRight:ah,ArrowDownRightFromCircle:eh,ArrowDownRightFromCircleIcon:eh,ArrowDownRightIcon:ah,ArrowDownRightSquare:th,ArrowDownRightSquareIcon:th,ArrowDownSquare:nh,ArrowDownSquareIcon:nh,ArrowDownToDot:sh,ArrowDownToDotIcon:sh,ArrowDownToLine:oh,ArrowDownToLineIcon:oh,ArrowDownUp:rh,ArrowDownUpIcon:rh,ArrowDownWideNarrow:Mi,ArrowDownWideNarrowIcon:Mi,ArrowDownZA:Ci,ArrowDownZAIcon:Ci,ArrowDownZa:Ci,ArrowDownZaIcon:Ci,ArrowLeft:hh,ArrowLeftCircle:lh,ArrowLeftCircleIcon:lh,ArrowLeftFromLine:ch,ArrowLeftFromLineIcon:ch,ArrowLeftIcon:hh,ArrowLeftRight:dh,ArrowLeftRightIcon:dh,ArrowLeftSquare:uh,ArrowLeftSquareIcon:uh,ArrowLeftToLine:ph,ArrowLeftToLineIcon:ph,ArrowRight:gh,ArrowRightCircle:fh,ArrowRightCircleIcon:fh,ArrowRightFromLine:mh,ArrowRightFromLineIcon:mh,ArrowRightIcon:gh,ArrowRightLeft:vh,ArrowRightLeftIcon:vh,ArrowRightSquare:yh,ArrowRightSquareIcon:yh,ArrowRightToLine:_h,ArrowRightToLineIcon:_h,ArrowUp:Rh,ArrowUp01:kh,ArrowUp01Icon:kh,ArrowUp10:bh,ArrowUp10Icon:bh,ArrowUpAZ:Si,ArrowUpAZIcon:Si,ArrowUpAz:Si,ArrowUpAzIcon:Si,ArrowUpCircle:wh,ArrowUpCircleIcon:wh,ArrowUpDown:xh,ArrowUpDownIcon:xh,ArrowUpFromDot:Mh,ArrowUpFromDotIcon:Mh,ArrowUpFromLine:Ch,ArrowUpFromLineIcon:Ch,ArrowUpIcon:Rh,ArrowUpLeft:Lh,ArrowUpLeftFromCircle:Sh,ArrowUpLeftFromCircleIcon:Sh,ArrowUpLeftIcon:Lh,ArrowUpLeftSquare:Ih,ArrowUpLeftSquareIcon:Ih,ArrowUpNarrowWide:Ii,ArrowUpNarrowWideIcon:Ii,ArrowUpRight:Eh,ArrowUpRightFromCircle:$h,ArrowUpRightFromCircleIcon:$h,ArrowUpRightIcon:Eh,ArrowUpRightSquare:Ah,ArrowUpRightSquareIcon:Ah,ArrowUpSquare:Th,ArrowUpSquareIcon:Th,ArrowUpToLine:Ph,ArrowUpToLineIcon:Ph,ArrowUpWideNarrow:Dh,ArrowUpWideNarrowIcon:Dh,ArrowUpZA:Li,ArrowUpZAIcon:Li,ArrowUpZa:Li,ArrowUpZaIcon:Li,ArrowsUpFromLine:Oh,ArrowsUpFromLineIcon:Oh,Asterisk:Vh,AsteriskIcon:Vh,AtSign:Uh,AtSignIcon:Uh,Atom:Fh,AtomIcon:Fh,AudioLines:jh,AudioLinesIcon:jh,AudioWaveform:Hh,AudioWaveformIcon:Hh,Award:Nh,AwardIcon:Nh,Axe:zh,AxeIcon:zh,Axis3D:$i,Axis3DIcon:$i,Axis3d:$i,Axis3dIcon:$i,Baby:Bh,BabyIcon:Bh,Backpack:qh,BackpackIcon:qh,Badge:lf,BadgeAlert:Wh,BadgeAlertIcon:Wh,BadgeCent:Gh,BadgeCentIcon:Gh,BadgeCheck:Ai,BadgeCheckIcon:Ai,BadgeDollarSign:Zh,BadgeDollarSignIcon:Zh,BadgeEuro:Kh,BadgeEuroIcon:Kh,BadgeHelp:Xh,BadgeHelpIcon:Xh,BadgeIcon:lf,BadgeIndianRupee:Yh,BadgeIndianRupeeIcon:Yh,BadgeInfo:Qh,BadgeInfoIcon:Qh,BadgeJapaneseYen:Jh,BadgeJapaneseYenIcon:Jh,BadgeMinus:ef,BadgeMinusIcon:ef,BadgePercent:tf,BadgePercentIcon:tf,BadgePlus:af,BadgePlusIcon:af,BadgePoundSterling:nf,BadgePoundSterlingIcon:nf,BadgeRussianRuble:sf,BadgeRussianRubleIcon:sf,BadgeSwissFranc:of,BadgeSwissFrancIcon:of,BadgeX:rf,BadgeXIcon:rf,BaggageClaim:cf,BaggageClaimIcon:cf,Ban:df,BanIcon:df,Banana:uf,BananaIcon:uf,Banknote:pf,BanknoteIcon:pf,BarChart:gf,BarChart2:hf,BarChart2Icon:hf,BarChart3:ff,BarChart3Icon:ff,BarChart4:mf,BarChart4Icon:mf,BarChartBig:vf,BarChartBigIcon:vf,BarChartHorizontal:_f,BarChartHorizontalBig:yf,BarChartHorizontalBigIcon:yf,BarChartHorizontalIcon:_f,BarChartIcon:gf,Barcode:kf,BarcodeIcon:kf,Baseline:bf,BaselineIcon:bf,Bath:wf,BathIcon:wf,Battery:Lf,BatteryCharging:xf,BatteryChargingIcon:xf,BatteryFull:Mf,BatteryFullIcon:Mf,BatteryIcon:Lf,BatteryLow:Cf,BatteryLowIcon:Cf,BatteryMedium:Sf,BatteryMediumIcon:Sf,BatteryWarning:If,BatteryWarningIcon:If,Beaker:$f,BeakerIcon:$f,Bean:Ef,BeanIcon:Ef,BeanOff:Af,BeanOffIcon:Af,Bed:Df,BedDouble:Tf,BedDoubleIcon:Tf,BedIcon:Df,BedSingle:Pf,BedSingleIcon:Pf,Beef:Rf,BeefIcon:Rf,Beer:Of,BeerIcon:Of,Bell:zf,BellDot:Vf,BellDotIcon:Vf,BellElectric:Uf,BellElectricIcon:Uf,BellIcon:zf,BellMinus:Ff,BellMinusIcon:Ff,BellOff:jf,BellOffIcon:jf,BellPlus:Hf,BellPlusIcon:Hf,BellRing:Nf,BellRingIcon:Nf,Bike:Bf,BikeIcon:Bf,Binary:qf,BinaryIcon:qf,Biohazard:Wf,BiohazardIcon:Wf,Bird:Gf,BirdIcon:Gf,Bitcoin:Zf,BitcoinIcon:Zf,Blinds:Kf,BlindsIcon:Kf,Blocks:Xf,BlocksIcon:Xf,Bluetooth:em,BluetoothConnected:Yf,BluetoothConnectedIcon:Yf,BluetoothIcon:em,BluetoothOff:Qf,BluetoothOffIcon:Qf,BluetoothSearching:Jf,BluetoothSearchingIcon:Jf,Bold:tm,BoldIcon:tm,Bolt:am,BoltIcon:am,Bomb:nm,BombIcon:nm,Bone:sm,BoneIcon:sm,Book:Im,BookA:om,BookAIcon:om,BookAudio:rm,BookAudioIcon:rm,BookCheck:im,BookCheckIcon:im,BookCopy:lm,BookCopyIcon:lm,BookDashed:Ei,BookDashedIcon:Ei,BookDown:cm,BookDownIcon:cm,BookHeadphones:dm,BookHeadphonesIcon:dm,BookHeart:um,BookHeartIcon:um,BookIcon:Im,BookImage:pm,BookImageIcon:pm,BookKey:hm,BookKeyIcon:hm,BookLock:fm,BookLockIcon:fm,BookMarked:mm,BookMarkedIcon:mm,BookMinus:vm,BookMinusIcon:vm,BookOpen:gm,BookOpenCheck:ym,BookOpenCheckIcon:ym,BookOpenIcon:gm,BookOpenText:_m,BookOpenTextIcon:_m,BookPlus:km,BookPlusIcon:km,BookTemplate:Ei,BookTemplateIcon:Ei,BookText:bm,BookTextIcon:bm,BookType:wm,BookTypeIcon:wm,BookUp:Mm,BookUp2:xm,BookUp2Icon:xm,BookUpIcon:Mm,BookUser:Cm,BookUserIcon:Cm,BookX:Sm,BookXIcon:Sm,Bookmark:Tm,BookmarkCheck:Lm,BookmarkCheckIcon:Lm,BookmarkIcon:Tm,BookmarkMinus:$m,BookmarkMinusIcon:$m,BookmarkPlus:Am,BookmarkPlusIcon:Am,BookmarkX:Em,BookmarkXIcon:Em,BoomBox:Pm,BoomBoxIcon:Pm,Bot:Dm,BotIcon:Dm,Box:Om,BoxIcon:Om,BoxSelect:Rm,BoxSelectIcon:Rm,Boxes:Vm,BoxesIcon:Vm,Braces:Ti,BracesIcon:Ti,Brackets:Um,BracketsIcon:Um,Brain:Hm,BrainCircuit:Fm,BrainCircuitIcon:Fm,BrainCog:jm,BrainCogIcon:jm,BrainIcon:Hm,BrickWall:Nm,BrickWallIcon:Nm,Briefcase:zm,BriefcaseIcon:zm,BringToFront:Bm,BringToFrontIcon:Bm,Brush:qm,BrushIcon:qm,Bug:Zm,BugIcon:Zm,BugOff:Wm,BugOffIcon:Wm,BugPlay:Gm,BugPlayIcon:Gm,Building:Xm,Building2:Km,Building2Icon:Km,BuildingIcon:Xm,Bus:Qm,BusFront:Ym,BusFrontIcon:Ym,BusIcon:Qm,Cable:e2,CableCar:Jm,CableCarIcon:Jm,CableIcon:e2,Cake:a2,CakeIcon:a2,CakeSlice:t2,CakeSliceIcon:t2,Calculator:n2,CalculatorIcon:n2,Calendar:v2,CalendarCheck:o2,CalendarCheck2:s2,CalendarCheck2Icon:s2,CalendarCheckIcon:o2,CalendarClock:r2,CalendarClockIcon:r2,CalendarDays:i2,CalendarDaysIcon:i2,CalendarHeart:l2,CalendarHeartIcon:l2,CalendarIcon:v2,CalendarMinus:c2,CalendarMinusIcon:c2,CalendarOff:d2,CalendarOffIcon:d2,CalendarPlus:u2,CalendarPlusIcon:u2,CalendarRange:p2,CalendarRangeIcon:p2,CalendarSearch:h2,CalendarSearchIcon:h2,CalendarX:m2,CalendarX2:f2,CalendarX2Icon:f2,CalendarXIcon:m2,Camera:_2,CameraIcon:_2,CameraOff:y2,CameraOffIcon:y2,CandlestickChart:g2,CandlestickChartIcon:g2,Candy:w2,CandyCane:k2,CandyCaneIcon:k2,CandyIcon:w2,CandyOff:b2,CandyOffIcon:b2,Car:C2,CarFront:x2,CarFrontIcon:x2,CarIcon:C2,CarTaxiFront:M2,CarTaxiFrontIcon:M2,Caravan:S2,CaravanIcon:S2,Carrot:I2,CarrotIcon:I2,CaseLower:L2,CaseLowerIcon:L2,CaseSensitive:$2,CaseSensitiveIcon:$2,CaseUpper:A2,CaseUpperIcon:A2,CassetteTape:E2,CassetteTapeIcon:E2,Cast:T2,CastIcon:T2,Castle:P2,CastleIcon:P2,Cat:D2,CatIcon:D2,Cctv:R2,CctvIcon:R2,Check:H2,CheckCheck:O2,CheckCheckIcon:O2,CheckCircle:U2,CheckCircle2:V2,CheckCircle2Icon:V2,CheckCircleIcon:U2,CheckIcon:H2,CheckSquare:j2,CheckSquare2:F2,CheckSquare2Icon:F2,CheckSquareIcon:j2,ChefHat:N2,ChefHatIcon:N2,Cherry:z2,CherryIcon:z2,ChevronDown:W2,ChevronDownCircle:B2,ChevronDownCircleIcon:B2,ChevronDownIcon:W2,ChevronDownSquare:q2,ChevronDownSquareIcon:q2,ChevronFirst:G2,ChevronFirstIcon:G2,ChevronLast:Z2,ChevronLastIcon:Z2,ChevronLeft:Y2,ChevronLeftCircle:K2,ChevronLeftCircleIcon:K2,ChevronLeftIcon:Y2,ChevronLeftSquare:X2,ChevronLeftSquareIcon:X2,ChevronRight:e0,ChevronRightCircle:Q2,ChevronRightCircleIcon:Q2,ChevronRightIcon:e0,ChevronRightSquare:J2,ChevronRightSquareIcon:J2,ChevronUp:n0,ChevronUpCircle:t0,ChevronUpCircleIcon:t0,ChevronUpIcon:n0,ChevronUpSquare:a0,ChevronUpSquareIcon:a0,ChevronsDown:o0,ChevronsDownIcon:o0,ChevronsDownUp:s0,ChevronsDownUpIcon:s0,ChevronsLeft:i0,ChevronsLeftIcon:i0,ChevronsLeftRight:r0,ChevronsLeftRightIcon:r0,ChevronsRight:c0,ChevronsRightIcon:c0,ChevronsRightLeft:l0,ChevronsRightLeftIcon:l0,ChevronsUp:u0,ChevronsUpDown:d0,ChevronsUpDownIcon:d0,ChevronsUpIcon:u0,Chrome:p0,ChromeIcon:p0,Church:h0,ChurchIcon:h0,Cigarette:m0,CigaretteIcon:m0,CigaretteOff:f0,CigaretteOffIcon:f0,Circle:M0,CircleDashed:v0,CircleDashedIcon:v0,CircleDollarSign:y0,CircleDollarSignIcon:y0,CircleDot:g0,CircleDotDashed:_0,CircleDotDashedIcon:_0,CircleDotIcon:g0,CircleEllipsis:k0,CircleEllipsisIcon:k0,CircleEqual:b0,CircleEqualIcon:b0,CircleIcon:M0,CircleOff:w0,CircleOffIcon:w0,CircleSlash:x0,CircleSlash2:Pi,CircleSlash2Icon:Pi,CircleSlashIcon:x0,CircleSlashed:Pi,CircleSlashedIcon:Pi,CircleUser:Ri,CircleUserIcon:Ri,CircleUserRound:Di,CircleUserRoundIcon:Di,CircuitBoard:C0,CircuitBoardIcon:C0,Citrus:S0,CitrusIcon:S0,Clapperboard:I0,ClapperboardIcon:I0,Clipboard:O0,ClipboardCheck:L0,ClipboardCheckIcon:L0,ClipboardCopy:$0,ClipboardCopyIcon:$0,ClipboardEdit:A0,ClipboardEditIcon:A0,ClipboardIcon:O0,ClipboardList:E0,ClipboardListIcon:E0,ClipboardPaste:T0,ClipboardPasteIcon:T0,ClipboardSignature:P0,ClipboardSignatureIcon:P0,ClipboardType:D0,ClipboardTypeIcon:D0,ClipboardX:R0,ClipboardXIcon:R0,Clock:K0,Clock1:V0,Clock10:U0,Clock10Icon:U0,Clock11:F0,Clock11Icon:F0,Clock12:j0,Clock12Icon:j0,Clock1Icon:V0,Clock2:H0,Clock2Icon:H0,Clock3:N0,Clock3Icon:N0,Clock4:z0,Clock4Icon:z0,Clock5:B0,Clock5Icon:B0,Clock6:q0,Clock6Icon:q0,Clock7:W0,Clock7Icon:W0,Clock8:G0,Clock8Icon:G0,Clock9:Z0,Clock9Icon:Z0,ClockIcon:K0,Cloud:cv,CloudCog:X0,CloudCogIcon:X0,CloudDrizzle:Y0,CloudDrizzleIcon:Y0,CloudFog:Q0,CloudFogIcon:Q0,CloudHail:J0,CloudHailIcon:J0,CloudIcon:cv,CloudLightning:ev,CloudLightningIcon:ev,CloudMoon:av,CloudMoonIcon:av,CloudMoonRain:tv,CloudMoonRainIcon:tv,CloudOff:nv,CloudOffIcon:nv,CloudRain:ov,CloudRainIcon:ov,CloudRainWind:sv,CloudRainWindIcon:sv,CloudSnow:rv,CloudSnowIcon:rv,CloudSun:lv,CloudSunIcon:lv,CloudSunRain:iv,CloudSunRainIcon:iv,Cloudy:dv,CloudyIcon:dv,Clover:uv,CloverIcon:uv,Club:pv,ClubIcon:pv,Code:fv,Code2:hv,Code2Icon:hv,CodeIcon:fv,Codepen:mv,CodepenIcon:mv,Codesandbox:vv,CodesandboxIcon:vv,Coffee:yv,CoffeeIcon:yv,Cog:_v,CogIcon:_v,Coins:gv,CoinsIcon:gv,Columns:Oi,Columns2:Oi,Columns2Icon:Oi,Columns3:Vi,Columns3Icon:Vi,Columns4:kv,Columns4Icon:kv,ColumnsIcon:Oi,Combine:bv,CombineIcon:bv,Command:wv,CommandIcon:wv,Compass:xv,CompassIcon:xv,Component:Mv,ComponentIcon:Mv,Computer:Cv,ComputerIcon:Cv,ConciergeBell:Sv,ConciergeBellIcon:Sv,Cone:Iv,ConeIcon:Iv,Construction:Lv,ConstructionIcon:Lv,Contact:Av,Contact2:$v,Contact2Icon:$v,ContactIcon:Av,Container:Ev,ContainerIcon:Ev,Contrast:Tv,ContrastIcon:Tv,Cookie:Pv,CookieIcon:Pv,CookingPot:Dv,CookingPotIcon:Dv,Copy:jv,CopyCheck:Rv,CopyCheckIcon:Rv,CopyIcon:jv,CopyMinus:Ov,CopyMinusIcon:Ov,CopyPlus:Vv,CopyPlusIcon:Vv,CopySlash:Uv,CopySlashIcon:Uv,CopyX:Fv,CopyXIcon:Fv,Copyleft:Hv,CopyleftIcon:Hv,Copyright:Nv,CopyrightIcon:Nv,CornerDownLeft:zv,CornerDownLeftIcon:zv,CornerDownRight:Bv,CornerDownRightIcon:Bv,CornerLeftDown:qv,CornerLeftDownIcon:qv,CornerLeftUp:Wv,CornerLeftUpIcon:Wv,CornerRightDown:Gv,CornerRightDownIcon:Gv,CornerRightUp:Zv,CornerRightUpIcon:Zv,CornerUpLeft:Kv,CornerUpLeftIcon:Kv,CornerUpRight:Xv,CornerUpRightIcon:Xv,Cpu:Yv,CpuIcon:Yv,CreativeCommons:Qv,CreativeCommonsIcon:Qv,CreditCard:Jv,CreditCardIcon:Jv,Croissant:ey,CroissantIcon:ey,Crop:ty,CropIcon:ty,Cross:ay,CrossIcon:ay,Crosshair:ny,CrosshairIcon:ny,Crown:sy,CrownIcon:sy,Cuboid:oy,CuboidIcon:oy,CupSoda:ry,CupSodaIcon:ry,CurlyBraces:Ti,CurlyBracesIcon:Ti,Currency:iy,CurrencyIcon:iy,Cylinder:ly,CylinderIcon:ly,Database:uy,DatabaseBackup:cy,DatabaseBackupIcon:cy,DatabaseIcon:uy,DatabaseZap:dy,DatabaseZapIcon:dy,Delete:py,DeleteIcon:py,Dessert:hy,DessertIcon:hy,Diameter:fy,DiameterIcon:fy,Diamond:my,DiamondIcon:my,Dice1:vy,Dice1Icon:vy,Dice2:yy,Dice2Icon:yy,Dice3:_y,Dice3Icon:_y,Dice4:gy,Dice4Icon:gy,Dice5:ky,Dice5Icon:ky,Dice6:by,Dice6Icon:by,Dices:wy,DicesIcon:wy,Diff:xy,DiffIcon:xy,Disc:Iy,Disc2:My,Disc2Icon:My,Disc3:Cy,Disc3Icon:Cy,DiscAlbum:Sy,DiscAlbumIcon:Sy,DiscIcon:Iy,Divide:Ay,DivideCircle:Ly,DivideCircleIcon:Ly,DivideIcon:Ay,DivideSquare:$y,DivideSquareIcon:$y,Dna:Ty,DnaIcon:Ty,DnaOff:Ey,DnaOffIcon:Ey,Dog:Py,DogIcon:Py,DollarSign:Dy,DollarSignIcon:Dy,Donut:Ry,DonutIcon:Ry,DoorClosed:Oy,DoorClosedIcon:Oy,DoorOpen:Vy,DoorOpenIcon:Vy,Dot:Uy,DotIcon:Uy,Download:jy,DownloadCloud:Fy,DownloadCloudIcon:Fy,DownloadIcon:jy,DraftingCompass:Hy,DraftingCompassIcon:Hy,Drama:Ny,DramaIcon:Ny,Dribbble:zy,DribbbleIcon:zy,Drill:By,DrillIcon:By,Droplet:qy,DropletIcon:qy,Droplets:Wy,DropletsIcon:Wy,Drum:Gy,DrumIcon:Gy,Drumstick:Zy,DrumstickIcon:Zy,Dumbbell:Ky,DumbbellIcon:Ky,Ear:Yy,EarIcon:Yy,EarOff:Xy,EarOffIcon:Xy,Edit:_o,Edit2:nl,Edit2Icon:nl,Edit3:al,Edit3Icon:al,EditIcon:_o,Egg:e_,EggFried:Qy,EggFriedIcon:Qy,EggIcon:e_,EggOff:Jy,EggOffIcon:Jy,Equal:a_,EqualIcon:a_,EqualNot:t_,EqualNotIcon:t_,Eraser:n_,EraserIcon:n_,Euro:s_,EuroIcon:s_,Expand:o_,ExpandIcon:o_,ExternalLink:r_,ExternalLinkIcon:r_,Eye:l_,EyeIcon:l_,EyeOff:i_,EyeOffIcon:i_,Facebook:c_,FacebookIcon:c_,Factory:d_,FactoryIcon:d_,Fan:u_,FanIcon:u_,FastForward:p_,FastForwardIcon:p_,Feather:h_,FeatherIcon:h_,Fence:f_,FenceIcon:f_,FerrisWheel:m_,FerrisWheelIcon:m_,Figma:v_,FigmaIcon:v_,File:yg,FileArchive:y_,FileArchiveIcon:y_,FileAudio:g_,FileAudio2:__,FileAudio2Icon:__,FileAudioIcon:g_,FileAxis3D:Ui,FileAxis3DIcon:Ui,FileAxis3d:Ui,FileAxis3dIcon:Ui,FileBadge:b_,FileBadge2:k_,FileBadge2Icon:k_,FileBadgeIcon:b_,FileBarChart:x_,FileBarChart2:w_,FileBarChart2Icon:w_,FileBarChartIcon:x_,FileBox:M_,FileBoxIcon:M_,FileCheck:S_,FileCheck2:C_,FileCheck2Icon:C_,FileCheckIcon:S_,FileClock:I_,FileClockIcon:I_,FileCode:$_,FileCode2:L_,FileCode2Icon:L_,FileCodeIcon:$_,FileCog:Fi,FileCog2:Fi,FileCog2Icon:Fi,FileCogIcon:Fi,FileDiff:A_,FileDiffIcon:A_,FileDigit:E_,FileDigitIcon:E_,FileDown:T_,FileDownIcon:T_,FileEdit:P_,FileEditIcon:P_,FileHeart:D_,FileHeartIcon:D_,FileIcon:yg,FileImage:R_,FileImageIcon:R_,FileInput:O_,FileInputIcon:O_,FileJson:U_,FileJson2:V_,FileJson2Icon:V_,FileJsonIcon:U_,FileKey:j_,FileKey2:F_,FileKey2Icon:F_,FileKeyIcon:j_,FileLineChart:H_,FileLineChartIcon:H_,FileLock:z_,FileLock2:N_,FileLock2Icon:N_,FileLockIcon:z_,FileMinus:q_,FileMinus2:B_,FileMinus2Icon:B_,FileMinusIcon:q_,FileMusic:W_,FileMusicIcon:W_,FileOutput:G_,FileOutputIcon:G_,FilePieChart:Z_,FilePieChartIcon:Z_,FilePlus:X_,FilePlus2:K_,FilePlus2Icon:K_,FilePlusIcon:X_,FileQuestion:Y_,FileQuestionIcon:Y_,FileScan:Q_,FileScanIcon:Q_,FileSearch:eg,FileSearch2:J_,FileSearch2Icon:J_,FileSearchIcon:eg,FileSignature:tg,FileSignatureIcon:tg,FileSpreadsheet:ag,FileSpreadsheetIcon:ag,FileStack:ng,FileStackIcon:ng,FileSymlink:sg,FileSymlinkIcon:sg,FileTerminal:og,FileTerminalIcon:og,FileText:rg,FileTextIcon:rg,FileType:lg,FileType2:ig,FileType2Icon:ig,FileTypeIcon:lg,FileUp:cg,FileUpIcon:cg,FileVideo:ug,FileVideo2:dg,FileVideo2Icon:dg,FileVideoIcon:ug,FileVolume:hg,FileVolume2:pg,FileVolume2Icon:pg,FileVolumeIcon:hg,FileWarning:fg,FileWarningIcon:fg,FileX:vg,FileX2:mg,FileX2Icon:mg,FileXIcon:vg,Files:_g,FilesIcon:_g,Film:gg,FilmIcon:gg,Filter:bg,FilterIcon:bg,FilterX:kg,FilterXIcon:kg,Fingerprint:wg,FingerprintIcon:wg,FireExtinguisher:xg,FireExtinguisherIcon:xg,Fish:Sg,FishIcon:Sg,FishOff:Mg,FishOffIcon:Mg,FishSymbol:Cg,FishSymbolIcon:Cg,Flag:Ag,FlagIcon:Ag,FlagOff:Ig,FlagOffIcon:Ig,FlagTriangleLeft:Lg,FlagTriangleLeftIcon:Lg,FlagTriangleRight:$g,FlagTriangleRightIcon:$g,Flame:Tg,FlameIcon:Tg,FlameKindling:Eg,FlameKindlingIcon:Eg,Flashlight:Dg,FlashlightIcon:Dg,FlashlightOff:Pg,FlashlightOffIcon:Pg,FlaskConical:Og,FlaskConicalIcon:Og,FlaskConicalOff:Rg,FlaskConicalOffIcon:Rg,FlaskRound:Vg,FlaskRoundIcon:Vg,FlipHorizontal:Fg,FlipHorizontal2:Ug,FlipHorizontal2Icon:Ug,FlipHorizontalIcon:Fg,FlipVertical:Hg,FlipVertical2:jg,FlipVertical2Icon:jg,FlipVerticalIcon:Hg,Flower:zg,Flower2:Ng,Flower2Icon:Ng,FlowerIcon:zg,Focus:Bg,FocusIcon:Bg,FoldHorizontal:qg,FoldHorizontalIcon:qg,FoldVertical:Wg,FoldVerticalIcon:Wg,Folder:kk,FolderArchive:Gg,FolderArchiveIcon:Gg,FolderCheck:Zg,FolderCheckIcon:Zg,FolderClock:Kg,FolderClockIcon:Kg,FolderClosed:Xg,FolderClosedIcon:Xg,FolderCog:ji,FolderCog2:ji,FolderCog2Icon:ji,FolderCogIcon:ji,FolderDot:Yg,FolderDotIcon:Yg,FolderDown:Qg,FolderDownIcon:Qg,FolderEdit:Jg,FolderEditIcon:Jg,FolderGit:tk,FolderGit2:ek,FolderGit2Icon:ek,FolderGitIcon:tk,FolderHeart:ak,FolderHeartIcon:ak,FolderIcon:kk,FolderInput:nk,FolderInputIcon:nk,FolderKanban:sk,FolderKanbanIcon:sk,FolderKey:ok,FolderKeyIcon:ok,FolderLock:rk,FolderLockIcon:rk,FolderMinus:ik,FolderMinusIcon:ik,FolderOpen:ck,FolderOpenDot:lk,FolderOpenDotIcon:lk,FolderOpenIcon:ck,FolderOutput:dk,FolderOutputIcon:dk,FolderPlus:uk,FolderPlusIcon:uk,FolderRoot:pk,FolderRootIcon:pk,FolderSearch:fk,FolderSearch2:hk,FolderSearch2Icon:hk,FolderSearchIcon:fk,FolderSymlink:mk,FolderSymlinkIcon:mk,FolderSync:vk,FolderSyncIcon:vk,FolderTree:yk,FolderTreeIcon:yk,FolderUp:_k,FolderUpIcon:_k,FolderX:gk,FolderXIcon:gk,Folders:bk,FoldersIcon:bk,Footprints:wk,FootprintsIcon:wk,Forklift:xk,ForkliftIcon:xk,FormInput:Mk,FormInputIcon:Mk,Forward:Ck,ForwardIcon:Ck,Frame:Sk,FrameIcon:Sk,Framer:Ik,FramerIcon:Ik,Frown:Lk,FrownIcon:Lk,Fuel:$k,FuelIcon:$k,Fullscreen:Ak,FullscreenIcon:Ak,FunctionSquare:Ek,FunctionSquareIcon:Ek,GalleryHorizontal:Pk,GalleryHorizontalEnd:Tk,GalleryHorizontalEndIcon:Tk,GalleryHorizontalIcon:Pk,GalleryThumbnails:Dk,GalleryThumbnailsIcon:Dk,GalleryVertical:Ok,GalleryVerticalEnd:Rk,GalleryVerticalEndIcon:Rk,GalleryVerticalIcon:Ok,Gamepad:Uk,Gamepad2:Vk,Gamepad2Icon:Vk,GamepadIcon:Uk,GanttChart:Fk,GanttChartIcon:Fk,GanttChartSquare:Hi,GanttChartSquareIcon:Hi,Gauge:Hk,GaugeCircle:jk,GaugeCircleIcon:jk,GaugeIcon:Hk,Gavel:Nk,GavelIcon:Nk,Gem:zk,GemIcon:zk,Ghost:Bk,GhostIcon:Bk,Gift:qk,GiftIcon:qk,GitBranch:Gk,GitBranchIcon:Gk,GitBranchPlus:Wk,GitBranchPlusIcon:Wk,GitCommit:Ni,GitCommitHorizontal:Ni,GitCommitHorizontalIcon:Ni,GitCommitIcon:Ni,GitCommitVertical:Zk,GitCommitVerticalIcon:Zk,GitCompare:Xk,GitCompareArrows:Kk,GitCompareArrowsIcon:Kk,GitCompareIcon:Xk,GitFork:Yk,GitForkIcon:Yk,GitGraph:Qk,GitGraphIcon:Qk,GitMerge:Jk,GitMergeIcon:Jk,GitPullRequest:ob,GitPullRequestArrow:eb,GitPullRequestArrowIcon:eb,GitPullRequestClosed:tb,GitPullRequestClosedIcon:tb,GitPullRequestCreate:nb,GitPullRequestCreateArrow:ab,GitPullRequestCreateArrowIcon:ab,GitPullRequestCreateIcon:nb,GitPullRequestDraft:sb,GitPullRequestDraftIcon:sb,GitPullRequestIcon:ob,Github:rb,GithubIcon:rb,Gitlab:ib,GitlabIcon:ib,GlassWater:lb,GlassWaterIcon:lb,Glasses:cb,GlassesIcon:cb,Globe:ub,Globe2:db,Globe2Icon:db,GlobeIcon:ub,Goal:pb,GoalIcon:pb,Grab:hb,GrabIcon:hb,GraduationCap:fb,GraduationCapIcon:fb,Grape:mb,GrapeIcon:mb,Grid:yo,Grid2X2:zi,Grid2X2Icon:zi,Grid2x2:zi,Grid2x2Icon:zi,Grid3X3:yo,Grid3X3Icon:yo,Grid3x3:yo,Grid3x3Icon:yo,GridIcon:yo,Grip:_b,GripHorizontal:vb,GripHorizontalIcon:vb,GripIcon:_b,GripVertical:yb,GripVerticalIcon:yb,Group:gb,GroupIcon:gb,Guitar:kb,GuitarIcon:kb,Hammer:bb,HammerIcon:bb,Hand:xb,HandIcon:xb,HandMetal:wb,HandMetalIcon:wb,HardDrive:Sb,HardDriveDownload:Mb,HardDriveDownloadIcon:Mb,HardDriveIcon:Sb,HardDriveUpload:Cb,HardDriveUploadIcon:Cb,HardHat:Ib,HardHatIcon:Ib,Hash:Lb,HashIcon:Lb,Haze:$b,HazeIcon:$b,HdmiPort:Ab,HdmiPortIcon:Ab,Heading:Vb,Heading1:Eb,Heading1Icon:Eb,Heading2:Tb,Heading2Icon:Tb,Heading3:Pb,Heading3Icon:Pb,Heading4:Db,Heading4Icon:Db,Heading5:Rb,Heading5Icon:Rb,Heading6:Ob,Heading6Icon:Ob,HeadingIcon:Vb,Headphones:Ub,HeadphonesIcon:Ub,Heart:zb,HeartCrack:Fb,HeartCrackIcon:Fb,HeartHandshake:jb,HeartHandshakeIcon:jb,HeartIcon:zb,HeartOff:Hb,HeartOffIcon:Hb,HeartPulse:Nb,HeartPulseIcon:Nb,HelpCircle:Bb,HelpCircleIcon:Bb,HelpingHand:qb,HelpingHandIcon:qb,Hexagon:Wb,HexagonIcon:Wb,Highlighter:Gb,HighlighterIcon:Gb,History:Zb,HistoryIcon:Zb,Home:Kb,HomeIcon:Kb,Hop:Yb,HopIcon:Yb,HopOff:Xb,HopOffIcon:Xb,Hotel:Qb,HotelIcon:Qb,Hourglass:Jb,HourglassIcon:Jb,IceCream:tw,IceCream2:ew,IceCream2Icon:ew,IceCreamIcon:tw,Image:rw,ImageDown:aw,ImageDownIcon:aw,ImageIcon:rw,ImageMinus:nw,ImageMinusIcon:nw,ImageOff:sw,ImageOffIcon:sw,ImagePlus:ow,ImagePlusIcon:ow,Import:iw,ImportIcon:iw,Inbox:lw,InboxIcon:lw,Indent:cw,IndentIcon:cw,IndianRupee:dw,IndianRupeeIcon:dw,Infinity:uw,InfinityIcon:uw,Info:pw,InfoIcon:pw,Inspect:Wi,InspectIcon:Wi,InspectionPanel:hw,InspectionPanelIcon:hw,Instagram:fw,InstagramIcon:fw,Italic:mw,ItalicIcon:mw,IterationCcw:vw,IterationCcwIcon:vw,IterationCw:yw,IterationCwIcon:yw,JapaneseYen:_w,JapaneseYenIcon:_w,Joystick:gw,JoystickIcon:gw,Kanban:kw,KanbanIcon:kw,KanbanSquare:qi,KanbanSquareDashed:Bi,KanbanSquareDashedIcon:Bi,KanbanSquareIcon:qi,Key:xw,KeyIcon:xw,KeyRound:bw,KeyRoundIcon:bw,KeySquare:ww,KeySquareIcon:ww,Keyboard:Cw,KeyboardIcon:Cw,KeyboardMusic:Mw,KeyboardMusicIcon:Mw,Lamp:Ew,LampCeiling:Sw,LampCeilingIcon:Sw,LampDesk:Iw,LampDeskIcon:Iw,LampFloor:Lw,LampFloorIcon:Lw,LampIcon:Ew,LampWallDown:$w,LampWallDownIcon:$w,LampWallUp:Aw,LampWallUpIcon:Aw,LandPlot:Tw,LandPlotIcon:Tw,Landmark:Pw,LandmarkIcon:Pw,Languages:Dw,LanguagesIcon:Dw,Laptop:Ow,Laptop2:Rw,Laptop2Icon:Rw,LaptopIcon:Ow,Lasso:Uw,LassoIcon:Uw,LassoSelect:Vw,LassoSelectIcon:Vw,Laugh:Fw,LaughIcon:Fw,Layers:Nw,Layers2:jw,Layers2Icon:jw,Layers3:Hw,Layers3Icon:Hw,LayersIcon:Nw,Layout:tl,LayoutDashboard:zw,LayoutDashboardIcon:zw,LayoutGrid:Bw,LayoutGridIcon:Bw,LayoutIcon:tl,LayoutList:qw,LayoutListIcon:qw,LayoutPanelLeft:Ww,LayoutPanelLeftIcon:Ww,LayoutPanelTop:Gw,LayoutPanelTopIcon:Gw,LayoutTemplate:Zw,LayoutTemplateIcon:Zw,Leaf:Kw,LeafIcon:Kw,LeafyGreen:Xw,LeafyGreenIcon:Xw,Library:Jw,LibraryBig:Yw,LibraryBigIcon:Yw,LibraryIcon:Jw,LibrarySquare:Qw,LibrarySquareIcon:Qw,LifeBuoy:e4,LifeBuoyIcon:e4,Ligature:t4,LigatureIcon:t4,Lightbulb:n4,LightbulbIcon:n4,LightbulbOff:a4,LightbulbOffIcon:a4,LineChart:s4,LineChartIcon:s4,Link:i4,Link2:r4,Link2Icon:r4,Link2Off:o4,Link2OffIcon:o4,LinkIcon:i4,Linkedin:l4,LinkedinIcon:l4,List:w4,ListChecks:c4,ListChecksIcon:c4,ListEnd:d4,ListEndIcon:d4,ListFilter:u4,ListFilterIcon:u4,ListIcon:w4,ListMinus:p4,ListMinusIcon:p4,ListMusic:h4,ListMusicIcon:h4,ListOrdered:f4,ListOrderedIcon:f4,ListPlus:m4,ListPlusIcon:m4,ListRestart:v4,ListRestartIcon:v4,ListStart:y4,ListStartIcon:y4,ListTodo:_4,ListTodoIcon:_4,ListTree:g4,ListTreeIcon:g4,ListVideo:k4,ListVideoIcon:k4,ListX:b4,ListXIcon:b4,Loader:M4,Loader2:x4,Loader2Icon:x4,LoaderIcon:M4,Locate:I4,LocateFixed:C4,LocateFixedIcon:C4,LocateIcon:I4,LocateOff:S4,LocateOffIcon:S4,Lock:$4,LockIcon:$4,LockKeyhole:L4,LockKeyholeIcon:L4,LogIn:A4,LogInIcon:A4,LogOut:E4,LogOutIcon:E4,Lollipop:T4,LollipopIcon:T4,LucideAArrowDown:O1,LucideAArrowUp:V1,LucideALargeSmall:U1,LucideAccessibility:F1,LucideActivity:H1,LucideActivitySquare:j1,LucideAirVent:N1,LucideAirplay:z1,LucideAlarmCheck:ki,LucideAlarmClock:q1,LucideAlarmClockCheck:ki,LucideAlarmClockMinus:bi,LucideAlarmClockOff:B1,LucideAlarmClockPlus:wi,LucideAlarmMinus:bi,LucideAlarmPlus:wi,LucideAlarmSmoke:W1,LucideAlbum:G1,LucideAlertCircle:Z1,LucideAlertOctagon:K1,LucideAlertTriangle:X1,LucideAlignCenter:J1,LucideAlignCenterHorizontal:Y1,LucideAlignCenterVertical:Q1,LucideAlignEndHorizontal:ep,LucideAlignEndVertical:tp,LucideAlignHorizontalDistributeCenter:ap,LucideAlignHorizontalDistributeEnd:np,LucideAlignHorizontalDistributeStart:sp,LucideAlignHorizontalJustifyCenter:op,LucideAlignHorizontalJustifyEnd:rp,LucideAlignHorizontalJustifyStart:ip,LucideAlignHorizontalSpaceAround:lp,LucideAlignHorizontalSpaceBetween:cp,LucideAlignJustify:dp,LucideAlignLeft:up,LucideAlignRight:pp,LucideAlignStartHorizontal:hp,LucideAlignStartVertical:fp,LucideAlignVerticalDistributeCenter:mp,LucideAlignVerticalDistributeEnd:vp,LucideAlignVerticalDistributeStart:yp,LucideAlignVerticalJustifyCenter:_p,LucideAlignVerticalJustifyEnd:gp,LucideAlignVerticalJustifyStart:kp,LucideAlignVerticalSpaceAround:bp,LucideAlignVerticalSpaceBetween:wp,LucideAmpersand:xp,LucideAmpersands:Mp,LucideAnchor:Cp,LucideAngry:Sp,LucideAnnoyed:Ip,LucideAntenna:Lp,LucideAnvil:$p,LucideAperture:Ap,LucideAppWindow:Ep,LucideApple:Tp,LucideArchive:Rp,LucideArchiveRestore:Pp,LucideArchiveX:Dp,LucideAreaChart:Op,LucideArmchair:Vp,LucideArrowBigDown:Fp,LucideArrowBigDownDash:Up,LucideArrowBigLeft:Hp,LucideArrowBigLeftDash:jp,LucideArrowBigRight:zp,LucideArrowBigRightDash:Np,LucideArrowBigUp:qp,LucideArrowBigUpDash:Bp,LucideArrowDown:ih,LucideArrowDown01:Wp,LucideArrowDown10:Gp,LucideArrowDownAZ:xi,LucideArrowDownAz:xi,LucideArrowDownCircle:Zp,LucideArrowDownFromLine:Kp,LucideArrowDownLeft:Qp,LucideArrowDownLeftFromCircle:Xp,LucideArrowDownLeftSquare:Yp,LucideArrowDownNarrowWide:Jp,LucideArrowDownRight:ah,LucideArrowDownRightFromCircle:eh,LucideArrowDownRightSquare:th,LucideArrowDownSquare:nh,LucideArrowDownToDot:sh,LucideArrowDownToLine:oh,LucideArrowDownUp:rh,LucideArrowDownWideNarrow:Mi,LucideArrowDownZA:Ci,LucideArrowDownZa:Ci,LucideArrowLeft:hh,LucideArrowLeftCircle:lh,LucideArrowLeftFromLine:ch,LucideArrowLeftRight:dh,LucideArrowLeftSquare:uh,LucideArrowLeftToLine:ph,LucideArrowRight:gh,LucideArrowRightCircle:fh,LucideArrowRightFromLine:mh,LucideArrowRightLeft:vh,LucideArrowRightSquare:yh,LucideArrowRightToLine:_h,LucideArrowUp:Rh,LucideArrowUp01:kh,LucideArrowUp10:bh,LucideArrowUpAZ:Si,LucideArrowUpAz:Si,LucideArrowUpCircle:wh,LucideArrowUpDown:xh,LucideArrowUpFromDot:Mh,LucideArrowUpFromLine:Ch,LucideArrowUpLeft:Lh,LucideArrowUpLeftFromCircle:Sh,LucideArrowUpLeftSquare:Ih,LucideArrowUpNarrowWide:Ii,LucideArrowUpRight:Eh,LucideArrowUpRightFromCircle:$h,LucideArrowUpRightSquare:Ah,LucideArrowUpSquare:Th,LucideArrowUpToLine:Ph,LucideArrowUpWideNarrow:Dh,LucideArrowUpZA:Li,LucideArrowUpZa:Li,LucideArrowsUpFromLine:Oh,LucideAsterisk:Vh,LucideAtSign:Uh,LucideAtom:Fh,LucideAudioLines:jh,LucideAudioWaveform:Hh,LucideAward:Nh,LucideAxe:zh,LucideAxis3D:$i,LucideAxis3d:$i,LucideBaby:Bh,LucideBackpack:qh,LucideBadge:lf,LucideBadgeAlert:Wh,LucideBadgeCent:Gh,LucideBadgeCheck:Ai,LucideBadgeDollarSign:Zh,LucideBadgeEuro:Kh,LucideBadgeHelp:Xh,LucideBadgeIndianRupee:Yh,LucideBadgeInfo:Qh,LucideBadgeJapaneseYen:Jh,LucideBadgeMinus:ef,LucideBadgePercent:tf,LucideBadgePlus:af,LucideBadgePoundSterling:nf,LucideBadgeRussianRuble:sf,LucideBadgeSwissFranc:of,LucideBadgeX:rf,LucideBaggageClaim:cf,LucideBan:df,LucideBanana:uf,LucideBanknote:pf,LucideBarChart:gf,LucideBarChart2:hf,LucideBarChart3:ff,LucideBarChart4:mf,LucideBarChartBig:vf,LucideBarChartHorizontal:_f,LucideBarChartHorizontalBig:yf,LucideBarcode:kf,LucideBaseline:bf,LucideBath:wf,LucideBattery:Lf,LucideBatteryCharging:xf,LucideBatteryFull:Mf,LucideBatteryLow:Cf,LucideBatteryMedium:Sf,LucideBatteryWarning:If,LucideBeaker:$f,LucideBean:Ef,LucideBeanOff:Af,LucideBed:Df,LucideBedDouble:Tf,LucideBedSingle:Pf,LucideBeef:Rf,LucideBeer:Of,LucideBell:zf,LucideBellDot:Vf,LucideBellElectric:Uf,LucideBellMinus:Ff,LucideBellOff:jf,LucideBellPlus:Hf,LucideBellRing:Nf,LucideBike:Bf,LucideBinary:qf,LucideBiohazard:Wf,LucideBird:Gf,LucideBitcoin:Zf,LucideBlinds:Kf,LucideBlocks:Xf,LucideBluetooth:em,LucideBluetoothConnected:Yf,LucideBluetoothOff:Qf,LucideBluetoothSearching:Jf,LucideBold:tm,LucideBolt:am,LucideBomb:nm,LucideBone:sm,LucideBook:Im,LucideBookA:om,LucideBookAudio:rm,LucideBookCheck:im,LucideBookCopy:lm,LucideBookDashed:Ei,LucideBookDown:cm,LucideBookHeadphones:dm,LucideBookHeart:um,LucideBookImage:pm,LucideBookKey:hm,LucideBookLock:fm,LucideBookMarked:mm,LucideBookMinus:vm,LucideBookOpen:gm,LucideBookOpenCheck:ym,LucideBookOpenText:_m,LucideBookPlus:km,LucideBookTemplate:Ei,LucideBookText:bm,LucideBookType:wm,LucideBookUp:Mm,LucideBookUp2:xm,LucideBookUser:Cm,LucideBookX:Sm,LucideBookmark:Tm,LucideBookmarkCheck:Lm,LucideBookmarkMinus:$m,LucideBookmarkPlus:Am,LucideBookmarkX:Em,LucideBoomBox:Pm,LucideBot:Dm,LucideBox:Om,LucideBoxSelect:Rm,LucideBoxes:Vm,LucideBraces:Ti,LucideBrackets:Um,LucideBrain:Hm,LucideBrainCircuit:Fm,LucideBrainCog:jm,LucideBrickWall:Nm,LucideBriefcase:zm,LucideBringToFront:Bm,LucideBrush:qm,LucideBug:Zm,LucideBugOff:Wm,LucideBugPlay:Gm,LucideBuilding:Xm,LucideBuilding2:Km,LucideBus:Qm,LucideBusFront:Ym,LucideCable:e2,LucideCableCar:Jm,LucideCake:a2,LucideCakeSlice:t2,LucideCalculator:n2,LucideCalendar:v2,LucideCalendarCheck:o2,LucideCalendarCheck2:s2,LucideCalendarClock:r2,LucideCalendarDays:i2,LucideCalendarHeart:l2,LucideCalendarMinus:c2,LucideCalendarOff:d2,LucideCalendarPlus:u2,LucideCalendarRange:p2,LucideCalendarSearch:h2,LucideCalendarX:m2,LucideCalendarX2:f2,LucideCamera:_2,LucideCameraOff:y2,LucideCandlestickChart:g2,LucideCandy:w2,LucideCandyCane:k2,LucideCandyOff:b2,LucideCar:C2,LucideCarFront:x2,LucideCarTaxiFront:M2,LucideCaravan:S2,LucideCarrot:I2,LucideCaseLower:L2,LucideCaseSensitive:$2,LucideCaseUpper:A2,LucideCassetteTape:E2,LucideCast:T2,LucideCastle:P2,LucideCat:D2,LucideCctv:R2,LucideCheck:H2,LucideCheckCheck:O2,LucideCheckCircle:U2,LucideCheckCircle2:V2,LucideCheckSquare:j2,LucideCheckSquare2:F2,LucideChefHat:N2,LucideCherry:z2,LucideChevronDown:W2,LucideChevronDownCircle:B2,LucideChevronDownSquare:q2,LucideChevronFirst:G2,LucideChevronLast:Z2,LucideChevronLeft:Y2,LucideChevronLeftCircle:K2,LucideChevronLeftSquare:X2,LucideChevronRight:e0,LucideChevronRightCircle:Q2,LucideChevronRightSquare:J2,LucideChevronUp:n0,LucideChevronUpCircle:t0,LucideChevronUpSquare:a0,LucideChevronsDown:o0,LucideChevronsDownUp:s0,LucideChevronsLeft:i0,LucideChevronsLeftRight:r0,LucideChevronsRight:c0,LucideChevronsRightLeft:l0,LucideChevronsUp:u0,LucideChevronsUpDown:d0,LucideChrome:p0,LucideChurch:h0,LucideCigarette:m0,LucideCigaretteOff:f0,LucideCircle:M0,LucideCircleDashed:v0,LucideCircleDollarSign:y0,LucideCircleDot:g0,LucideCircleDotDashed:_0,LucideCircleEllipsis:k0,LucideCircleEqual:b0,LucideCircleOff:w0,LucideCircleSlash:x0,LucideCircleSlash2:Pi,LucideCircleSlashed:Pi,LucideCircleUser:Ri,LucideCircleUserRound:Di,LucideCircuitBoard:C0,LucideCitrus:S0,LucideClapperboard:I0,LucideClipboard:O0,LucideClipboardCheck:L0,LucideClipboardCopy:$0,LucideClipboardEdit:A0,LucideClipboardList:E0,LucideClipboardPaste:T0,LucideClipboardSignature:P0,LucideClipboardType:D0,LucideClipboardX:R0,LucideClock:K0,LucideClock1:V0,LucideClock10:U0,LucideClock11:F0,LucideClock12:j0,LucideClock2:H0,LucideClock3:N0,LucideClock4:z0,LucideClock5:B0,LucideClock6:q0,LucideClock7:W0,LucideClock8:G0,LucideClock9:Z0,LucideCloud:cv,LucideCloudCog:X0,LucideCloudDrizzle:Y0,LucideCloudFog:Q0,LucideCloudHail:J0,LucideCloudLightning:ev,LucideCloudMoon:av,LucideCloudMoonRain:tv,LucideCloudOff:nv,LucideCloudRain:ov,LucideCloudRainWind:sv,LucideCloudSnow:rv,LucideCloudSun:lv,LucideCloudSunRain:iv,LucideCloudy:dv,LucideClover:uv,LucideClub:pv,LucideCode:fv,LucideCode2:hv,LucideCodepen:mv,LucideCodesandbox:vv,LucideCoffee:yv,LucideCog:_v,LucideCoins:gv,LucideColumns:Oi,LucideColumns2:Oi,LucideColumns3:Vi,LucideColumns4:kv,LucideCombine:bv,LucideCommand:wv,LucideCompass:xv,LucideComponent:Mv,LucideComputer:Cv,LucideConciergeBell:Sv,LucideCone:Iv,LucideConstruction:Lv,LucideContact:Av,LucideContact2:$v,LucideContainer:Ev,LucideContrast:Tv,LucideCookie:Pv,LucideCookingPot:Dv,LucideCopy:jv,LucideCopyCheck:Rv,LucideCopyMinus:Ov,LucideCopyPlus:Vv,LucideCopySlash:Uv,LucideCopyX:Fv,LucideCopyleft:Hv,LucideCopyright:Nv,LucideCornerDownLeft:zv,LucideCornerDownRight:Bv,LucideCornerLeftDown:qv,LucideCornerLeftUp:Wv,LucideCornerRightDown:Gv,LucideCornerRightUp:Zv,LucideCornerUpLeft:Kv,LucideCornerUpRight:Xv,LucideCpu:Yv,LucideCreativeCommons:Qv,LucideCreditCard:Jv,LucideCroissant:ey,LucideCrop:ty,LucideCross:ay,LucideCrosshair:ny,LucideCrown:sy,LucideCuboid:oy,LucideCupSoda:ry,LucideCurlyBraces:Ti,LucideCurrency:iy,LucideCylinder:ly,LucideDatabase:uy,LucideDatabaseBackup:cy,LucideDatabaseZap:dy,LucideDelete:py,LucideDessert:hy,LucideDiameter:fy,LucideDiamond:my,LucideDice1:vy,LucideDice2:yy,LucideDice3:_y,LucideDice4:gy,LucideDice5:ky,LucideDice6:by,LucideDices:wy,LucideDiff:xy,LucideDisc:Iy,LucideDisc2:My,LucideDisc3:Cy,LucideDiscAlbum:Sy,LucideDivide:Ay,LucideDivideCircle:Ly,LucideDivideSquare:$y,LucideDna:Ty,LucideDnaOff:Ey,LucideDog:Py,LucideDollarSign:Dy,LucideDonut:Ry,LucideDoorClosed:Oy,LucideDoorOpen:Vy,LucideDot:Uy,LucideDownload:jy,LucideDownloadCloud:Fy,LucideDraftingCompass:Hy,LucideDrama:Ny,LucideDribbble:zy,LucideDrill:By,LucideDroplet:qy,LucideDroplets:Wy,LucideDrum:Gy,LucideDrumstick:Zy,LucideDumbbell:Ky,LucideEar:Yy,LucideEarOff:Xy,LucideEdit:_o,LucideEdit2:nl,LucideEdit3:al,LucideEgg:e_,LucideEggFried:Qy,LucideEggOff:Jy,LucideEqual:a_,LucideEqualNot:t_,LucideEraser:n_,LucideEuro:s_,LucideExpand:o_,LucideExternalLink:r_,LucideEye:l_,LucideEyeOff:i_,LucideFacebook:c_,LucideFactory:d_,LucideFan:u_,LucideFastForward:p_,LucideFeather:h_,LucideFence:f_,LucideFerrisWheel:m_,LucideFigma:v_,LucideFile:yg,LucideFileArchive:y_,LucideFileAudio:g_,LucideFileAudio2:__,LucideFileAxis3D:Ui,LucideFileAxis3d:Ui,LucideFileBadge:b_,LucideFileBadge2:k_,LucideFileBarChart:x_,LucideFileBarChart2:w_,LucideFileBox:M_,LucideFileCheck:S_,LucideFileCheck2:C_,LucideFileClock:I_,LucideFileCode:$_,LucideFileCode2:L_,LucideFileCog:Fi,LucideFileCog2:Fi,LucideFileDiff:A_,LucideFileDigit:E_,LucideFileDown:T_,LucideFileEdit:P_,LucideFileHeart:D_,LucideFileImage:R_,LucideFileInput:O_,LucideFileJson:U_,LucideFileJson2:V_,LucideFileKey:j_,LucideFileKey2:F_,LucideFileLineChart:H_,LucideFileLock:z_,LucideFileLock2:N_,LucideFileMinus:q_,LucideFileMinus2:B_,LucideFileMusic:W_,LucideFileOutput:G_,LucideFilePieChart:Z_,LucideFilePlus:X_,LucideFilePlus2:K_,LucideFileQuestion:Y_,LucideFileScan:Q_,LucideFileSearch:eg,LucideFileSearch2:J_,LucideFileSignature:tg,LucideFileSpreadsheet:ag,LucideFileStack:ng,LucideFileSymlink:sg,LucideFileTerminal:og,LucideFileText:rg,LucideFileType:lg,LucideFileType2:ig,LucideFileUp:cg,LucideFileVideo:ug,LucideFileVideo2:dg,LucideFileVolume:hg,LucideFileVolume2:pg,LucideFileWarning:fg,LucideFileX:vg,LucideFileX2:mg,LucideFiles:_g,LucideFilm:gg,LucideFilter:bg,LucideFilterX:kg,LucideFingerprint:wg,LucideFireExtinguisher:xg,LucideFish:Sg,LucideFishOff:Mg,LucideFishSymbol:Cg,LucideFlag:Ag,LucideFlagOff:Ig,LucideFlagTriangleLeft:Lg,LucideFlagTriangleRight:$g,LucideFlame:Tg,LucideFlameKindling:Eg,LucideFlashlight:Dg,LucideFlashlightOff:Pg,LucideFlaskConical:Og,LucideFlaskConicalOff:Rg,LucideFlaskRound:Vg,LucideFlipHorizontal:Fg,LucideFlipHorizontal2:Ug,LucideFlipVertical:Hg,LucideFlipVertical2:jg,LucideFlower:zg,LucideFlower2:Ng,LucideFocus:Bg,LucideFoldHorizontal:qg,LucideFoldVertical:Wg,LucideFolder:kk,LucideFolderArchive:Gg,LucideFolderCheck:Zg,LucideFolderClock:Kg,LucideFolderClosed:Xg,LucideFolderCog:ji,LucideFolderCog2:ji,LucideFolderDot:Yg,LucideFolderDown:Qg,LucideFolderEdit:Jg,LucideFolderGit:tk,LucideFolderGit2:ek,LucideFolderHeart:ak,LucideFolderInput:nk,LucideFolderKanban:sk,LucideFolderKey:ok,LucideFolderLock:rk,LucideFolderMinus:ik,LucideFolderOpen:ck,LucideFolderOpenDot:lk,LucideFolderOutput:dk,LucideFolderPlus:uk,LucideFolderRoot:pk,LucideFolderSearch:fk,LucideFolderSearch2:hk,LucideFolderSymlink:mk,LucideFolderSync:vk,LucideFolderTree:yk,LucideFolderUp:_k,LucideFolderX:gk,LucideFolders:bk,LucideFootprints:wk,LucideForklift:xk,LucideFormInput:Mk,LucideForward:Ck,LucideFrame:Sk,LucideFramer:Ik,LucideFrown:Lk,LucideFuel:$k,LucideFullscreen:Ak,LucideFunctionSquare:Ek,LucideGalleryHorizontal:Pk,LucideGalleryHorizontalEnd:Tk,LucideGalleryThumbnails:Dk,LucideGalleryVertical:Ok,LucideGalleryVerticalEnd:Rk,LucideGamepad:Uk,LucideGamepad2:Vk,LucideGanttChart:Fk,LucideGanttChartSquare:Hi,LucideGauge:Hk,LucideGaugeCircle:jk,LucideGavel:Nk,LucideGem:zk,LucideGhost:Bk,LucideGift:qk,LucideGitBranch:Gk,LucideGitBranchPlus:Wk,LucideGitCommit:Ni,LucideGitCommitHorizontal:Ni,LucideGitCommitVertical:Zk,LucideGitCompare:Xk,LucideGitCompareArrows:Kk,LucideGitFork:Yk,LucideGitGraph:Qk,LucideGitMerge:Jk,LucideGitPullRequest:ob,LucideGitPullRequestArrow:eb,LucideGitPullRequestClosed:tb,LucideGitPullRequestCreate:nb,LucideGitPullRequestCreateArrow:ab,LucideGitPullRequestDraft:sb,LucideGithub:rb,LucideGitlab:ib,LucideGlassWater:lb,LucideGlasses:cb,LucideGlobe:ub,LucideGlobe2:db,LucideGoal:pb,LucideGrab:hb,LucideGraduationCap:fb,LucideGrape:mb,LucideGrid:yo,LucideGrid2X2:zi,LucideGrid2x2:zi,LucideGrid3X3:yo,LucideGrid3x3:yo,LucideGrip:_b,LucideGripHorizontal:vb,LucideGripVertical:yb,LucideGroup:gb,LucideGuitar:kb,LucideHammer:bb,LucideHand:xb,LucideHandMetal:wb,LucideHardDrive:Sb,LucideHardDriveDownload:Mb,LucideHardDriveUpload:Cb,LucideHardHat:Ib,LucideHash:Lb,LucideHaze:$b,LucideHdmiPort:Ab,LucideHeading:Vb,LucideHeading1:Eb,LucideHeading2:Tb,LucideHeading3:Pb,LucideHeading4:Db,LucideHeading5:Rb,LucideHeading6:Ob,LucideHeadphones:Ub,LucideHeart:zb,LucideHeartCrack:Fb,LucideHeartHandshake:jb,LucideHeartOff:Hb,LucideHeartPulse:Nb,LucideHelpCircle:Bb,LucideHelpingHand:qb,LucideHexagon:Wb,LucideHighlighter:Gb,LucideHistory:Zb,LucideHome:Kb,LucideHop:Yb,LucideHopOff:Xb,LucideHotel:Qb,LucideHourglass:Jb,LucideIceCream:tw,LucideIceCream2:ew,LucideImage:rw,LucideImageDown:aw,LucideImageMinus:nw,LucideImageOff:sw,LucideImagePlus:ow,LucideImport:iw,LucideInbox:lw,LucideIndent:cw,LucideIndianRupee:dw,LucideInfinity:uw,LucideInfo:pw,LucideInspect:Wi,LucideInspectionPanel:hw,LucideInstagram:fw,LucideItalic:mw,LucideIterationCcw:vw,LucideIterationCw:yw,LucideJapaneseYen:_w,LucideJoystick:gw,LucideKanban:kw,LucideKanbanSquare:qi,LucideKanbanSquareDashed:Bi,LucideKey:xw,LucideKeyRound:bw,LucideKeySquare:ww,LucideKeyboard:Cw,LucideKeyboardMusic:Mw,LucideLamp:Ew,LucideLampCeiling:Sw,LucideLampDesk:Iw,LucideLampFloor:Lw,LucideLampWallDown:$w,LucideLampWallUp:Aw,LucideLandPlot:Tw,LucideLandmark:Pw,LucideLanguages:Dw,LucideLaptop:Ow,LucideLaptop2:Rw,LucideLasso:Uw,LucideLassoSelect:Vw,LucideLaugh:Fw,LucideLayers:Nw,LucideLayers2:jw,LucideLayers3:Hw,LucideLayout:tl,LucideLayoutDashboard:zw,LucideLayoutGrid:Bw,LucideLayoutList:qw,LucideLayoutPanelLeft:Ww,LucideLayoutPanelTop:Gw,LucideLayoutTemplate:Zw,LucideLeaf:Kw,LucideLeafyGreen:Xw,LucideLibrary:Jw,LucideLibraryBig:Yw,LucideLibrarySquare:Qw,LucideLifeBuoy:e4,LucideLigature:t4,LucideLightbulb:n4,LucideLightbulbOff:a4,LucideLineChart:s4,LucideLink:i4,LucideLink2:r4,LucideLink2Off:o4,LucideLinkedin:l4,LucideList:w4,LucideListChecks:c4,LucideListEnd:d4,LucideListFilter:u4,LucideListMinus:p4,LucideListMusic:h4,LucideListOrdered:f4,LucideListPlus:m4,LucideListRestart:v4,LucideListStart:y4,LucideListTodo:_4,LucideListTree:g4,LucideListVideo:k4,LucideListX:b4,LucideLoader:M4,LucideLoader2:x4,LucideLocate:I4,LucideLocateFixed:C4,LucideLocateOff:S4,LucideLock:$4,LucideLockKeyhole:L4,LucideLogIn:A4,LucideLogOut:E4,LucideLollipop:T4,LucideLuggage:P4,LucideMSquare:D4,LucideMagnet:R4,LucideMail:B4,LucideMailCheck:O4,LucideMailMinus:V4,LucideMailOpen:U4,LucideMailPlus:F4,LucideMailQuestion:j4,LucideMailSearch:H4,LucideMailWarning:N4,LucideMailX:z4,LucideMailbox:q4,LucideMails:W4,LucideMap:X4,LucideMapPin:Z4,LucideMapPinOff:G4,LucideMapPinned:K4,LucideMartini:Y4,LucideMaximize:J4,LucideMaximize2:Q4,LucideMedal:e5,LucideMegaphone:a5,LucideMegaphoneOff:t5,LucideMeh:n5,LucideMemoryStick:s5,LucideMenu:r5,LucideMenuSquare:o5,LucideMerge:i5,LucideMessageCircle:_5,LucideMessageCircleCode:l5,LucideMessageCircleDashed:c5,LucideMessageCircleHeart:d5,LucideMessageCircleMore:u5,LucideMessageCircleOff:p5,LucideMessageCirclePlus:h5,LucideMessageCircleQuestion:f5,LucideMessageCircleReply:m5,LucideMessageCircleWarning:v5,LucideMessageCircleX:y5,LucideMessageSquare:P5,LucideMessageSquareCode:g5,LucideMessageSquareDashed:k5,LucideMessageSquareDiff:b5,LucideMessageSquareDot:w5,LucideMessageSquareHeart:x5,LucideMessageSquareMore:M5,LucideMessageSquareOff:C5,LucideMessageSquarePlus:S5,LucideMessageSquareQuote:I5,LucideMessageSquareReply:L5,LucideMessageSquareShare:$5,LucideMessageSquareText:A5,LucideMessageSquareWarning:E5,LucideMessageSquareX:T5,LucideMessagesSquare:D5,LucideMic:V5,LucideMic2:R5,LucideMicOff:O5,LucideMicroscope:U5,LucideMicrowave:F5,LucideMilestone:j5,LucideMilk:N5,LucideMilkOff:H5,LucideMinimize:B5,LucideMinimize2:z5,LucideMinus:G5,LucideMinusCircle:q5,LucideMinusSquare:W5,LucideMonitor:o3,LucideMonitorCheck:Z5,LucideMonitorDot:K5,LucideMonitorDown:X5,LucideMonitorOff:Y5,LucideMonitorPause:Q5,LucideMonitorPlay:J5,LucideMonitorSmartphone:e3,LucideMonitorSpeaker:t3,LucideMonitorStop:a3,LucideMonitorUp:n3,LucideMonitorX:s3,LucideMoon:i3,LucideMoonStar:r3,LucideMoreHorizontal:l3,LucideMoreVertical:c3,LucideMountain:u3,LucideMountainSnow:d3,LucideMouse:v3,LucideMousePointer:m3,LucideMousePointer2:p3,LucideMousePointerClick:h3,LucideMousePointerSquare:Wi,LucideMousePointerSquareDashed:f3,LucideMove:$3,LucideMove3D:Gi,LucideMove3d:Gi,LucideMoveDiagonal:_3,LucideMoveDiagonal2:y3,LucideMoveDown:b3,LucideMoveDownLeft:g3,LucideMoveDownRight:k3,LucideMoveHorizontal:w3,LucideMoveLeft:x3,LucideMoveRight:M3,LucideMoveUp:I3,LucideMoveUpLeft:C3,LucideMoveUpRight:S3,LucideMoveVertical:L3,LucideMusic:P3,LucideMusic2:A3,LucideMusic3:E3,LucideMusic4:T3,LucideNavigation:V3,LucideNavigation2:R3,LucideNavigation2Off:D3,LucideNavigationOff:O3,LucideNetwork:U3,LucideNewspaper:F3,LucideNfc:j3,LucideNut:N3,LucideNutOff:H3,LucideOctagon:z3,LucideOption:B3,LucideOrbit:q3,LucideOutdent:W3,LucidePackage:ex,LucidePackage2:G3,LucidePackageCheck:Z3,LucidePackageMinus:K3,LucidePackageOpen:X3,LucidePackagePlus:Y3,LucidePackageSearch:Q3,LucidePackageX:J3,LucidePaintBucket:tx,LucidePaintbrush:nx,LucidePaintbrush2:ax,LucidePalette:sx,LucidePalmtree:ox,LucidePanelBottom:lx,LucidePanelBottomClose:rx,LucidePanelBottomDashed:Zi,LucidePanelBottomInactive:Zi,LucidePanelBottomOpen:ix,LucidePanelLeft:Qi,LucidePanelLeftClose:Ki,LucidePanelLeftDashed:Xi,LucidePanelLeftInactive:Xi,LucidePanelLeftOpen:Yi,LucidePanelRight:ux,LucidePanelRightClose:cx,LucidePanelRightDashed:Ji,LucidePanelRightInactive:Ji,LucidePanelRightOpen:dx,LucidePanelTop:fx,LucidePanelTopClose:px,LucidePanelTopDashed:el,LucidePanelTopInactive:el,LucidePanelTopOpen:hx,LucidePanelsLeftBottom:mx,LucidePanelsLeftRight:Vi,LucidePanelsRightBottom:vx,LucidePanelsTopBottom:rl,LucidePanelsTopLeft:tl,LucidePaperclip:yx,LucideParentheses:_x,LucideParkingCircle:kx,LucideParkingCircleOff:gx,LucideParkingMeter:bx,LucideParkingSquare:xx,LucideParkingSquareOff:wx,LucidePartyPopper:Mx,LucidePause:Ix,LucidePauseCircle:Cx,LucidePauseOctagon:Sx,LucidePawPrint:Lx,LucidePcCase:$x,LucidePen:nl,LucidePenBox:_o,LucidePenLine:al,LucidePenSquare:_o,LucidePenTool:Ax,LucidePencil:Px,LucidePencilLine:Ex,LucidePencilRuler:Tx,LucidePentagon:Dx,LucidePercent:Ux,LucidePercentCircle:Rx,LucidePercentDiamond:Ox,LucidePercentSquare:Vx,LucidePersonStanding:Fx,LucidePhone:Wx,LucidePhoneCall:jx,LucidePhoneForwarded:Hx,LucidePhoneIncoming:Nx,LucidePhoneMissed:zx,LucidePhoneOff:Bx,LucidePhoneOutgoing:qx,LucidePi:Zx,LucidePiSquare:Gx,LucidePiano:Kx,LucidePictureInPicture:Yx,LucidePictureInPicture2:Xx,LucidePieChart:Qx,LucidePiggyBank:Jx,LucidePilcrow:t8,LucidePilcrowSquare:e8,LucidePill:a8,LucidePin:s8,LucidePinOff:n8,LucidePipette:o8,LucidePizza:r8,LucidePlane:c8,LucidePlaneLanding:i8,LucidePlaneTakeoff:l8,LucidePlay:p8,LucidePlayCircle:d8,LucidePlaySquare:u8,LucidePlug:v8,LucidePlug2:h8,LucidePlugZap:m8,LucidePlugZap2:f8,LucidePlus:g8,LucidePlusCircle:y8,LucidePlusSquare:_8,LucidePocket:b8,LucidePocketKnife:k8,LucidePodcast:w8,LucidePointer:M8,LucidePointerOff:x8,LucidePopcorn:C8,LucidePopsicle:S8,LucidePoundSterling:I8,LucidePower:E8,LucidePowerCircle:L8,LucidePowerOff:$8,LucidePowerSquare:A8,LucidePresentation:T8,LucidePrinter:P8,LucideProjector:D8,LucidePuzzle:R8,LucidePyramid:O8,LucideQrCode:V8,LucideQuote:U8,LucideRabbit:F8,LucideRadar:j8,LucideRadiation:H8,LucideRadio:B8,LucideRadioReceiver:N8,LucideRadioTower:z8,LucideRadius:q8,LucideRailSymbol:W8,LucideRainbow:G8,LucideRat:Z8,LucideRatio:K8,LucideReceipt:X8,LucideRectangleHorizontal:Y8,LucideRectangleVertical:Q8,LucideRecycle:J8,LucideRedo:a6,LucideRedo2:e6,LucideRedoDot:t6,LucideRefreshCcw:s6,LucideRefreshCcwDot:n6,LucideRefreshCw:r6,LucideRefreshCwOff:o6,LucideRefrigerator:i6,LucideRegex:l6,LucideRemoveFormatting:c6,LucideRepeat:p6,LucideRepeat1:d6,LucideRepeat2:u6,LucideReplace:f6,LucideReplaceAll:h6,LucideReply:v6,LucideReplyAll:m6,LucideRewind:y6,LucideRibbon:_6,LucideRocket:g6,LucideRockingChair:k6,LucideRollerCoaster:b6,LucideRotate3D:sl,LucideRotate3d:sl,LucideRotateCcw:w6,LucideRotateCw:x6,LucideRoute:C6,LucideRouteOff:M6,LucideRouter:S6,LucideRows:ol,LucideRows2:ol,LucideRows3:rl,LucideRows4:I6,LucideRss:L6,LucideRuler:$6,LucideRussianRuble:A6,LucideSailboat:E6,LucideSalad:T6,LucideSandwich:P6,LucideSatellite:R6,LucideSatelliteDish:D6,LucideSave:V6,LucideSaveAll:O6,LucideScale:U6,LucideScale3D:il,LucideScale3d:il,LucideScaling:F6,LucideScan:W6,LucideScanBarcode:j6,LucideScanEye:H6,LucideScanFace:N6,LucideScanLine:z6,LucideScanSearch:B6,LucideScanText:q6,LucideScatterChart:G6,LucideSchool:K6,LucideSchool2:Z6,LucideScissors:J6,LucideScissorsLineDashed:X6,LucideScissorsSquare:Q6,LucideScissorsSquareDashedBottom:Y6,LucideScreenShare:tM,LucideScreenShareOff:eM,LucideScroll:nM,LucideScrollText:aM,LucideSearch:lM,LucideSearchCheck:sM,LucideSearchCode:oM,LucideSearchSlash:rM,LucideSearchX:iM,LucideSend:dM,LucideSendHorizonal:ll,LucideSendHorizontal:ll,LucideSendToBack:cM,LucideSeparatorHorizontal:uM,LucideSeparatorVertical:pM,LucideServer:vM,LucideServerCog:hM,LucideServerCrash:fM,LucideServerOff:mM,LucideSettings:_M,LucideSettings2:yM,LucideShapes:gM,LucideShare:bM,LucideShare2:kM,LucideSheet:wM,LucideShell:xM,LucideShield:PM,LucideShieldAlert:MM,LucideShieldBan:CM,LucideShieldCheck:SM,LucideShieldClose:cl,LucideShieldEllipsis:IM,LucideShieldHalf:LM,LucideShieldMinus:$M,LucideShieldOff:AM,LucideShieldPlus:EM,LucideShieldQuestion:TM,LucideShieldX:cl,LucideShip:RM,LucideShipWheel:DM,LucideShirt:OM,LucideShoppingBag:VM,LucideShoppingBasket:UM,LucideShoppingCart:FM,LucideShovel:jM,LucideShowerHead:HM,LucideShrink:NM,LucideShrub:zM,LucideShuffle:BM,LucideSidebar:Qi,LucideSidebarClose:Ki,LucideSidebarOpen:Yi,LucideSigma:WM,LucideSigmaSquare:qM,LucideSignal:YM,LucideSignalHigh:GM,LucideSignalLow:ZM,LucideSignalMedium:KM,LucideSignalZero:XM,LucideSignpost:JM,LucideSignpostBig:QM,LucideSiren:e7,LucideSkipBack:t7,LucideSkipForward:a7,LucideSkull:n7,LucideSlack:s7,LucideSlash:o7,LucideSlice:r7,LucideSliders:l7,LucideSlidersHorizontal:i7,LucideSmartphone:u7,LucideSmartphoneCharging:c7,LucideSmartphoneNfc:d7,LucideSmile:h7,LucideSmilePlus:p7,LucideSnail:f7,LucideSnowflake:m7,LucideSofa:v7,LucideSortAsc:Ii,LucideSortDesc:Mi,LucideSoup:y7,LucideSpace:_7,LucideSpade:g7,LucideSparkle:k7,LucideSparkles:dl,LucideSpeaker:b7,LucideSpeech:w7,LucideSpellCheck:M7,LucideSpellCheck2:x7,LucideSpline:C7,LucideSplit:L7,LucideSplitSquareHorizontal:S7,LucideSplitSquareVertical:I7,LucideSprayCan:$7,LucideSprout:A7,LucideSquare:F7,LucideSquareAsterisk:E7,LucideSquareCode:T7,LucideSquareDashedBottom:D7,LucideSquareDashedBottomCode:P7,LucideSquareDot:R7,LucideSquareEqual:O7,LucideSquareGantt:Hi,LucideSquareKanban:qi,LucideSquareKanbanDashed:Bi,LucideSquareSlash:V7,LucideSquareStack:U7,LucideSquareUser:pl,LucideSquareUserRound:ul,LucideSquircle:j7,LucideSquirrel:H7,LucideStamp:N7,LucideStar:q7,LucideStarHalf:z7,LucideStarOff:B7,LucideStars:dl,LucideStepBack:W7,LucideStepForward:G7,LucideStethoscope:Z7,LucideSticker:K7,LucideStickyNote:X7,LucideStopCircle:Y7,LucideStore:Q7,LucideStretchHorizontal:J7,LucideStretchVertical:eC,LucideStrikethrough:tC,LucideSubscript:aC,LucideSubtitles:nC,LucideSun:lC,LucideSunDim:sC,LucideSunMedium:oC,LucideSunMoon:rC,LucideSunSnow:iC,LucideSunrise:cC,LucideSunset:dC,LucideSuperscript:uC,LucideSwissFranc:pC,LucideSwitchCamera:hC,LucideSword:fC,LucideSwords:mC,LucideSyringe:vC,LucideTable:gC,LucideTable2:yC,LucideTableProperties:_C,LucideTablet:bC,LucideTabletSmartphone:kC,LucideTablets:wC,LucideTag:xC,LucideTags:MC,LucideTally1:CC,LucideTally2:SC,LucideTally3:IC,LucideTally4:LC,LucideTally5:$C,LucideTangent:AC,LucideTarget:EC,LucideTent:PC,LucideTentTree:TC,LucideTerminal:RC,LucideTerminalSquare:DC,LucideTestTube:VC,LucideTestTube2:OC,LucideTestTubes:UC,LucideText:NC,LucideTextCursor:jC,LucideTextCursorInput:FC,LucideTextQuote:HC,LucideTextSelect:hl,LucideTextSelection:hl,LucideTheater:zC,LucideThermometer:WC,LucideThermometerSnowflake:BC,LucideThermometerSun:qC,LucideThumbsDown:GC,LucideThumbsUp:ZC,LucideTicket:KC,LucideTimer:QC,LucideTimerOff:XC,LucideTimerReset:YC,LucideToggleLeft:JC,LucideToggleRight:eS,LucideTornado:tS,LucideTorus:aS,LucideTouchpad:sS,LucideTouchpadOff:nS,LucideTowerControl:oS,LucideToyBrick:rS,LucideTractor:iS,LucideTrafficCone:lS,LucideTrain:fl,LucideTrainFront:dS,LucideTrainFrontTunnel:cS,LucideTrainTrack:uS,LucideTramFront:fl,LucideTrash:hS,LucideTrash2:pS,LucideTreeDeciduous:fS,LucideTreePine:mS,LucideTrees:vS,LucideTrello:yS,LucideTrendingDown:_S,LucideTrendingUp:gS,LucideTriangle:bS,LucideTriangleRight:kS,LucideTrophy:wS,LucideTruck:xS,LucideTurtle:MS,LucideTv:SS,LucideTv2:CS,LucideTwitch:IS,LucideTwitter:LS,LucideType:$S,LucideUmbrella:ES,LucideUmbrellaOff:AS,LucideUnderline:TS,LucideUndo:RS,LucideUndo2:PS,LucideUndoDot:DS,LucideUnfoldHorizontal:OS,LucideUnfoldVertical:VS,LucideUngroup:US,LucideUnlink:jS,LucideUnlink2:FS,LucideUnlock:NS,LucideUnlockKeyhole:HS,LucideUnplug:zS,LucideUpload:qS,LucideUploadCloud:BS,LucideUsb:WS,LucideUser:eI,LucideUser2:kl,LucideUserCheck:GS,LucideUserCheck2:ml,LucideUserCircle:Ri,LucideUserCircle2:Di,LucideUserCog:ZS,LucideUserCog2:vl,LucideUserMinus:KS,LucideUserMinus2:yl,LucideUserPlus:XS,LucideUserPlus2:_l,LucideUserRound:kl,LucideUserRoundCheck:ml,LucideUserRoundCog:vl,LucideUserRoundMinus:yl,LucideUserRoundPlus:_l,LucideUserRoundSearch:YS,LucideUserRoundX:gl,LucideUserSearch:QS,LucideUserSquare:pl,LucideUserSquare2:ul,LucideUserX:JS,LucideUserX2:gl,LucideUsers:tI,LucideUsers2:bl,LucideUsersRound:bl,LucideUtensils:nI,LucideUtensilsCrossed:aI,LucideUtilityPole:sI,LucideVariable:oI,LucideVegan:rI,LucideVenetianMask:iI,LucideVerified:Ai,LucideVibrate:cI,LucideVibrateOff:lI,LucideVideo:uI,LucideVideoOff:dI,LucideVideotape:pI,LucideView:hI,LucideVoicemail:fI,LucideVolume:_I,LucideVolume1:mI,LucideVolume2:vI,LucideVolumeX:yI,LucideVote:gI,LucideWallet:wI,LucideWallet2:kI,LucideWalletCards:bI,LucideWallpaper:xI,LucideWand:CI,LucideWand2:MI,LucideWarehouse:SI,LucideWatch:II,LucideWaves:LI,LucideWaypoints:$I,LucideWebcam:AI,LucideWebhook:EI,LucideWeight:TI,LucideWheat:DI,LucideWheatOff:PI,LucideWholeWord:RI,LucideWifi:VI,LucideWifiOff:OI,LucideWind:UI,LucideWine:jI,LucideWineOff:FI,LucideWorkflow:HI,LucideWrapText:NI,LucideWrench:zI,LucideX:GI,LucideXCircle:BI,LucideXOctagon:qI,LucideXSquare:WI,LucideYoutube:ZI,LucideZap:XI,LucideZapOff:KI,LucideZoomIn:YI,LucideZoomOut:QI,Luggage:P4,LuggageIcon:P4,MSquare:D4,MSquareIcon:D4,Magnet:R4,MagnetIcon:R4,Mail:B4,MailCheck:O4,MailCheckIcon:O4,MailIcon:B4,MailMinus:V4,MailMinusIcon:V4,MailOpen:U4,MailOpenIcon:U4,MailPlus:F4,MailPlusIcon:F4,MailQuestion:j4,MailQuestionIcon:j4,MailSearch:H4,MailSearchIcon:H4,MailWarning:N4,MailWarningIcon:N4,MailX:z4,MailXIcon:z4,Mailbox:q4,MailboxIcon:q4,Mails:W4,MailsIcon:W4,Map:X4,MapIcon:X4,MapPin:Z4,MapPinIcon:Z4,MapPinOff:G4,MapPinOffIcon:G4,MapPinned:K4,MapPinnedIcon:K4,Martini:Y4,MartiniIcon:Y4,Maximize:J4,Maximize2:Q4,Maximize2Icon:Q4,MaximizeIcon:J4,Medal:e5,MedalIcon:e5,Megaphone:a5,MegaphoneIcon:a5,MegaphoneOff:t5,MegaphoneOffIcon:t5,Meh:n5,MehIcon:n5,MemoryStick:s5,MemoryStickIcon:s5,Menu:r5,MenuIcon:r5,MenuSquare:o5,MenuSquareIcon:o5,Merge:i5,MergeIcon:i5,MessageCircle:_5,MessageCircleCode:l5,MessageCircleCodeIcon:l5,MessageCircleDashed:c5,MessageCircleDashedIcon:c5,MessageCircleHeart:d5,MessageCircleHeartIcon:d5,MessageCircleIcon:_5,MessageCircleMore:u5,MessageCircleMoreIcon:u5,MessageCircleOff:p5,MessageCircleOffIcon:p5,MessageCirclePlus:h5,MessageCirclePlusIcon:h5,MessageCircleQuestion:f5,MessageCircleQuestionIcon:f5,MessageCircleReply:m5,MessageCircleReplyIcon:m5,MessageCircleWarning:v5,MessageCircleWarningIcon:v5,MessageCircleX:y5,MessageCircleXIcon:y5,MessageSquare:P5,MessageSquareCode:g5,MessageSquareCodeIcon:g5,MessageSquareDashed:k5,MessageSquareDashedIcon:k5,MessageSquareDiff:b5,MessageSquareDiffIcon:b5,MessageSquareDot:w5,MessageSquareDotIcon:w5,MessageSquareHeart:x5,MessageSquareHeartIcon:x5,MessageSquareIcon:P5,MessageSquareMore:M5,MessageSquareMoreIcon:M5,MessageSquareOff:C5,MessageSquareOffIcon:C5,MessageSquarePlus:S5,MessageSquarePlusIcon:S5,MessageSquareQuote:I5,MessageSquareQuoteIcon:I5,MessageSquareReply:L5,MessageSquareReplyIcon:L5,MessageSquareShare:$5,MessageSquareShareIcon:$5,MessageSquareText:A5,MessageSquareTextIcon:A5,MessageSquareWarning:E5,MessageSquareWarningIcon:E5,MessageSquareX:T5,MessageSquareXIcon:T5,MessagesSquare:D5,MessagesSquareIcon:D5,Mic:V5,Mic2:R5,Mic2Icon:R5,MicIcon:V5,MicOff:O5,MicOffIcon:O5,Microscope:U5,MicroscopeIcon:U5,Microwave:F5,MicrowaveIcon:F5,Milestone:j5,MilestoneIcon:j5,Milk:N5,MilkIcon:N5,MilkOff:H5,MilkOffIcon:H5,Minimize:B5,Minimize2:z5,Minimize2Icon:z5,MinimizeIcon:B5,Minus:G5,MinusCircle:q5,MinusCircleIcon:q5,MinusIcon:G5,MinusSquare:W5,MinusSquareIcon:W5,Monitor:o3,MonitorCheck:Z5,MonitorCheckIcon:Z5,MonitorDot:K5,MonitorDotIcon:K5,MonitorDown:X5,MonitorDownIcon:X5,MonitorIcon:o3,MonitorOff:Y5,MonitorOffIcon:Y5,MonitorPause:Q5,MonitorPauseIcon:Q5,MonitorPlay:J5,MonitorPlayIcon:J5,MonitorSmartphone:e3,MonitorSmartphoneIcon:e3,MonitorSpeaker:t3,MonitorSpeakerIcon:t3,MonitorStop:a3,MonitorStopIcon:a3,MonitorUp:n3,MonitorUpIcon:n3,MonitorX:s3,MonitorXIcon:s3,Moon:i3,MoonIcon:i3,MoonStar:r3,MoonStarIcon:r3,MoreHorizontal:l3,MoreHorizontalIcon:l3,MoreVertical:c3,MoreVerticalIcon:c3,Mountain:u3,MountainIcon:u3,MountainSnow:d3,MountainSnowIcon:d3,Mouse:v3,MouseIcon:v3,MousePointer:m3,MousePointer2:p3,MousePointer2Icon:p3,MousePointerClick:h3,MousePointerClickIcon:h3,MousePointerIcon:m3,MousePointerSquare:Wi,MousePointerSquareDashed:f3,MousePointerSquareDashedIcon:f3,MousePointerSquareIcon:Wi,Move:$3,Move3D:Gi,Move3DIcon:Gi,Move3d:Gi,Move3dIcon:Gi,MoveDiagonal:_3,MoveDiagonal2:y3,MoveDiagonal2Icon:y3,MoveDiagonalIcon:_3,MoveDown:b3,MoveDownIcon:b3,MoveDownLeft:g3,MoveDownLeftIcon:g3,MoveDownRight:k3,MoveDownRightIcon:k3,MoveHorizontal:w3,MoveHorizontalIcon:w3,MoveIcon:$3,MoveLeft:x3,MoveLeftIcon:x3,MoveRight:M3,MoveRightIcon:M3,MoveUp:I3,MoveUpIcon:I3,MoveUpLeft:C3,MoveUpLeftIcon:C3,MoveUpRight:S3,MoveUpRightIcon:S3,MoveVertical:L3,MoveVerticalIcon:L3,Music:P3,Music2:A3,Music2Icon:A3,Music3:E3,Music3Icon:E3,Music4:T3,Music4Icon:T3,MusicIcon:P3,Navigation:V3,Navigation2:R3,Navigation2Icon:R3,Navigation2Off:D3,Navigation2OffIcon:D3,NavigationIcon:V3,NavigationOff:O3,NavigationOffIcon:O3,Network:U3,NetworkIcon:U3,Newspaper:F3,NewspaperIcon:F3,Nfc:j3,NfcIcon:j3,Nut:N3,NutIcon:N3,NutOff:H3,NutOffIcon:H3,Octagon:z3,OctagonIcon:z3,Option:B3,OptionIcon:B3,Orbit:q3,OrbitIcon:q3,Outdent:W3,OutdentIcon:W3,Package:ex,Package2:G3,Package2Icon:G3,PackageCheck:Z3,PackageCheckIcon:Z3,PackageIcon:ex,PackageMinus:K3,PackageMinusIcon:K3,PackageOpen:X3,PackageOpenIcon:X3,PackagePlus:Y3,PackagePlusIcon:Y3,PackageSearch:Q3,PackageSearchIcon:Q3,PackageX:J3,PackageXIcon:J3,PaintBucket:tx,PaintBucketIcon:tx,Paintbrush:nx,Paintbrush2:ax,Paintbrush2Icon:ax,PaintbrushIcon:nx,Palette:sx,PaletteIcon:sx,Palmtree:ox,PalmtreeIcon:ox,PanelBottom:lx,PanelBottomClose:rx,PanelBottomCloseIcon:rx,PanelBottomDashed:Zi,PanelBottomDashedIcon:Zi,PanelBottomIcon:lx,PanelBottomInactive:Zi,PanelBottomInactiveIcon:Zi,PanelBottomOpen:ix,PanelBottomOpenIcon:ix,PanelLeft:Qi,PanelLeftClose:Ki,PanelLeftCloseIcon:Ki,PanelLeftDashed:Xi,PanelLeftDashedIcon:Xi,PanelLeftIcon:Qi,PanelLeftInactive:Xi,PanelLeftInactiveIcon:Xi,PanelLeftOpen:Yi,PanelLeftOpenIcon:Yi,PanelRight:ux,PanelRightClose:cx,PanelRightCloseIcon:cx,PanelRightDashed:Ji,PanelRightDashedIcon:Ji,PanelRightIcon:ux,PanelRightInactive:Ji,PanelRightInactiveIcon:Ji,PanelRightOpen:dx,PanelRightOpenIcon:dx,PanelTop:fx,PanelTopClose:px,PanelTopCloseIcon:px,PanelTopDashed:el,PanelTopDashedIcon:el,PanelTopIcon:fx,PanelTopInactive:el,PanelTopInactiveIcon:el,PanelTopOpen:hx,PanelTopOpenIcon:hx,PanelsLeftBottom:mx,PanelsLeftBottomIcon:mx,PanelsLeftRight:Vi,PanelsLeftRightIcon:Vi,PanelsRightBottom:vx,PanelsRightBottomIcon:vx,PanelsTopBottom:rl,PanelsTopBottomIcon:rl,PanelsTopLeft:tl,PanelsTopLeftIcon:tl,Paperclip:yx,PaperclipIcon:yx,Parentheses:_x,ParenthesesIcon:_x,ParkingCircle:kx,ParkingCircleIcon:kx,ParkingCircleOff:gx,ParkingCircleOffIcon:gx,ParkingMeter:bx,ParkingMeterIcon:bx,ParkingSquare:xx,ParkingSquareIcon:xx,ParkingSquareOff:wx,ParkingSquareOffIcon:wx,PartyPopper:Mx,PartyPopperIcon:Mx,Pause:Ix,PauseCircle:Cx,PauseCircleIcon:Cx,PauseIcon:Ix,PauseOctagon:Sx,PauseOctagonIcon:Sx,PawPrint:Lx,PawPrintIcon:Lx,PcCase:$x,PcCaseIcon:$x,Pen:nl,PenBox:_o,PenBoxIcon:_o,PenIcon:nl,PenLine:al,PenLineIcon:al,PenSquare:_o,PenSquareIcon:_o,PenTool:Ax,PenToolIcon:Ax,Pencil:Px,PencilIcon:Px,PencilLine:Ex,PencilLineIcon:Ex,PencilRuler:Tx,PencilRulerIcon:Tx,Pentagon:Dx,PentagonIcon:Dx,Percent:Ux,PercentCircle:Rx,PercentCircleIcon:Rx,PercentDiamond:Ox,PercentDiamondIcon:Ox,PercentIcon:Ux,PercentSquare:Vx,PercentSquareIcon:Vx,PersonStanding:Fx,PersonStandingIcon:Fx,Phone:Wx,PhoneCall:jx,PhoneCallIcon:jx,PhoneForwarded:Hx,PhoneForwardedIcon:Hx,PhoneIcon:Wx,PhoneIncoming:Nx,PhoneIncomingIcon:Nx,PhoneMissed:zx,PhoneMissedIcon:zx,PhoneOff:Bx,PhoneOffIcon:Bx,PhoneOutgoing:qx,PhoneOutgoingIcon:qx,Pi:Zx,PiIcon:Zx,PiSquare:Gx,PiSquareIcon:Gx,Piano:Kx,PianoIcon:Kx,PictureInPicture:Yx,PictureInPicture2:Xx,PictureInPicture2Icon:Xx,PictureInPictureIcon:Yx,PieChart:Qx,PieChartIcon:Qx,PiggyBank:Jx,PiggyBankIcon:Jx,Pilcrow:t8,PilcrowIcon:t8,PilcrowSquare:e8,PilcrowSquareIcon:e8,Pill:a8,PillIcon:a8,Pin:s8,PinIcon:s8,PinOff:n8,PinOffIcon:n8,Pipette:o8,PipetteIcon:o8,Pizza:r8,PizzaIcon:r8,Plane:c8,PlaneIcon:c8,PlaneLanding:i8,PlaneLandingIcon:i8,PlaneTakeoff:l8,PlaneTakeoffIcon:l8,Play:p8,PlayCircle:d8,PlayCircleIcon:d8,PlayIcon:p8,PlaySquare:u8,PlaySquareIcon:u8,Plug:v8,Plug2:h8,Plug2Icon:h8,PlugIcon:v8,PlugZap:m8,PlugZap2:f8,PlugZap2Icon:f8,PlugZapIcon:m8,Plus:g8,PlusCircle:y8,PlusCircleIcon:y8,PlusIcon:g8,PlusSquare:_8,PlusSquareIcon:_8,Pocket:b8,PocketIcon:b8,PocketKnife:k8,PocketKnifeIcon:k8,Podcast:w8,PodcastIcon:w8,Pointer:M8,PointerIcon:M8,PointerOff:x8,PointerOffIcon:x8,Popcorn:C8,PopcornIcon:C8,Popsicle:S8,PopsicleIcon:S8,PoundSterling:I8,PoundSterlingIcon:I8,Power:E8,PowerCircle:L8,PowerCircleIcon:L8,PowerIcon:E8,PowerOff:$8,PowerOffIcon:$8,PowerSquare:A8,PowerSquareIcon:A8,Presentation:T8,PresentationIcon:T8,Printer:P8,PrinterIcon:P8,Projector:D8,ProjectorIcon:D8,Puzzle:R8,PuzzleIcon:R8,Pyramid:O8,PyramidIcon:O8,QrCode:V8,QrCodeIcon:V8,Quote:U8,QuoteIcon:U8,Rabbit:F8,RabbitIcon:F8,Radar:j8,RadarIcon:j8,Radiation:H8,RadiationIcon:H8,Radio:B8,RadioIcon:B8,RadioReceiver:N8,RadioReceiverIcon:N8,RadioTower:z8,RadioTowerIcon:z8,Radius:q8,RadiusIcon:q8,RailSymbol:W8,RailSymbolIcon:W8,Rainbow:G8,RainbowIcon:G8,Rat:Z8,RatIcon:Z8,Ratio:K8,RatioIcon:K8,Receipt:X8,ReceiptIcon:X8,RectangleHorizontal:Y8,RectangleHorizontalIcon:Y8,RectangleVertical:Q8,RectangleVerticalIcon:Q8,Recycle:J8,RecycleIcon:J8,Redo:a6,Redo2:e6,Redo2Icon:e6,RedoDot:t6,RedoDotIcon:t6,RedoIcon:a6,RefreshCcw:s6,RefreshCcwDot:n6,RefreshCcwDotIcon:n6,RefreshCcwIcon:s6,RefreshCw:r6,RefreshCwIcon:r6,RefreshCwOff:o6,RefreshCwOffIcon:o6,Refrigerator:i6,RefrigeratorIcon:i6,Regex:l6,RegexIcon:l6,RemoveFormatting:c6,RemoveFormattingIcon:c6,Repeat:p6,Repeat1:d6,Repeat1Icon:d6,Repeat2:u6,Repeat2Icon:u6,RepeatIcon:p6,Replace:f6,ReplaceAll:h6,ReplaceAllIcon:h6,ReplaceIcon:f6,Reply:v6,ReplyAll:m6,ReplyAllIcon:m6,ReplyIcon:v6,Rewind:y6,RewindIcon:y6,Ribbon:_6,RibbonIcon:_6,Rocket:g6,RocketIcon:g6,RockingChair:k6,RockingChairIcon:k6,RollerCoaster:b6,RollerCoasterIcon:b6,Rotate3D:sl,Rotate3DIcon:sl,Rotate3d:sl,Rotate3dIcon:sl,RotateCcw:w6,RotateCcwIcon:w6,RotateCw:x6,RotateCwIcon:x6,Route:C6,RouteIcon:C6,RouteOff:M6,RouteOffIcon:M6,Router:S6,RouterIcon:S6,Rows:ol,Rows2:ol,Rows2Icon:ol,Rows3:rl,Rows3Icon:rl,Rows4:I6,Rows4Icon:I6,RowsIcon:ol,Rss:L6,RssIcon:L6,Ruler:$6,RulerIcon:$6,RussianRuble:A6,RussianRubleIcon:A6,Sailboat:E6,SailboatIcon:E6,Salad:T6,SaladIcon:T6,Sandwich:P6,SandwichIcon:P6,Satellite:R6,SatelliteDish:D6,SatelliteDishIcon:D6,SatelliteIcon:R6,Save:V6,SaveAll:O6,SaveAllIcon:O6,SaveIcon:V6,Scale:U6,Scale3D:il,Scale3DIcon:il,Scale3d:il,Scale3dIcon:il,ScaleIcon:U6,Scaling:F6,ScalingIcon:F6,Scan:W6,ScanBarcode:j6,ScanBarcodeIcon:j6,ScanEye:H6,ScanEyeIcon:H6,ScanFace:N6,ScanFaceIcon:N6,ScanIcon:W6,ScanLine:z6,ScanLineIcon:z6,ScanSearch:B6,ScanSearchIcon:B6,ScanText:q6,ScanTextIcon:q6,ScatterChart:G6,ScatterChartIcon:G6,School:K6,School2:Z6,School2Icon:Z6,SchoolIcon:K6,Scissors:J6,ScissorsIcon:J6,ScissorsLineDashed:X6,ScissorsLineDashedIcon:X6,ScissorsSquare:Q6,ScissorsSquareDashedBottom:Y6,ScissorsSquareDashedBottomIcon:Y6,ScissorsSquareIcon:Q6,ScreenShare:tM,ScreenShareIcon:tM,ScreenShareOff:eM,ScreenShareOffIcon:eM,Scroll:nM,ScrollIcon:nM,ScrollText:aM,ScrollTextIcon:aM,Search:lM,SearchCheck:sM,SearchCheckIcon:sM,SearchCode:oM,SearchCodeIcon:oM,SearchIcon:lM,SearchSlash:rM,SearchSlashIcon:rM,SearchX:iM,SearchXIcon:iM,Send:dM,SendHorizonal:ll,SendHorizonalIcon:ll,SendHorizontal:ll,SendHorizontalIcon:ll,SendIcon:dM,SendToBack:cM,SendToBackIcon:cM,SeparatorHorizontal:uM,SeparatorHorizontalIcon:uM,SeparatorVertical:pM,SeparatorVerticalIcon:pM,Server:vM,ServerCog:hM,ServerCogIcon:hM,ServerCrash:fM,ServerCrashIcon:fM,ServerIcon:vM,ServerOff:mM,ServerOffIcon:mM,Settings:_M,Settings2:yM,Settings2Icon:yM,SettingsIcon:_M,Shapes:gM,ShapesIcon:gM,Share:bM,Share2:kM,Share2Icon:kM,ShareIcon:bM,Sheet:wM,SheetIcon:wM,Shell:xM,ShellIcon:xM,Shield:PM,ShieldAlert:MM,ShieldAlertIcon:MM,ShieldBan:CM,ShieldBanIcon:CM,ShieldCheck:SM,ShieldCheckIcon:SM,ShieldClose:cl,ShieldCloseIcon:cl,ShieldEllipsis:IM,ShieldEllipsisIcon:IM,ShieldHalf:LM,ShieldHalfIcon:LM,ShieldIcon:PM,ShieldMinus:$M,ShieldMinusIcon:$M,ShieldOff:AM,ShieldOffIcon:AM,ShieldPlus:EM,ShieldPlusIcon:EM,ShieldQuestion:TM,ShieldQuestionIcon:TM,ShieldX:cl,ShieldXIcon:cl,Ship:RM,ShipIcon:RM,ShipWheel:DM,ShipWheelIcon:DM,Shirt:OM,ShirtIcon:OM,ShoppingBag:VM,ShoppingBagIcon:VM,ShoppingBasket:UM,ShoppingBasketIcon:UM,ShoppingCart:FM,ShoppingCartIcon:FM,Shovel:jM,ShovelIcon:jM,ShowerHead:HM,ShowerHeadIcon:HM,Shrink:NM,ShrinkIcon:NM,Shrub:zM,ShrubIcon:zM,Shuffle:BM,ShuffleIcon:BM,Sidebar:Qi,SidebarClose:Ki,SidebarCloseIcon:Ki,SidebarIcon:Qi,SidebarOpen:Yi,SidebarOpenIcon:Yi,Sigma:WM,SigmaIcon:WM,SigmaSquare:qM,SigmaSquareIcon:qM,Signal:YM,SignalHigh:GM,SignalHighIcon:GM,SignalIcon:YM,SignalLow:ZM,SignalLowIcon:ZM,SignalMedium:KM,SignalMediumIcon:KM,SignalZero:XM,SignalZeroIcon:XM,Signpost:JM,SignpostBig:QM,SignpostBigIcon:QM,SignpostIcon:JM,Siren:e7,SirenIcon:e7,SkipBack:t7,SkipBackIcon:t7,SkipForward:a7,SkipForwardIcon:a7,Skull:n7,SkullIcon:n7,Slack:s7,SlackIcon:s7,Slash:o7,SlashIcon:o7,Slice:r7,SliceIcon:r7,Sliders:l7,SlidersHorizontal:i7,SlidersHorizontalIcon:i7,SlidersIcon:l7,Smartphone:u7,SmartphoneCharging:c7,SmartphoneChargingIcon:c7,SmartphoneIcon:u7,SmartphoneNfc:d7,SmartphoneNfcIcon:d7,Smile:h7,SmileIcon:h7,SmilePlus:p7,SmilePlusIcon:p7,Snail:f7,SnailIcon:f7,Snowflake:m7,SnowflakeIcon:m7,Sofa:v7,SofaIcon:v7,SortAsc:Ii,SortAscIcon:Ii,SortDesc:Mi,SortDescIcon:Mi,Soup:y7,SoupIcon:y7,Space:_7,SpaceIcon:_7,Spade:g7,SpadeIcon:g7,Sparkle:k7,SparkleIcon:k7,Sparkles:dl,SparklesIcon:dl,Speaker:b7,SpeakerIcon:b7,Speech:w7,SpeechIcon:w7,SpellCheck:M7,SpellCheck2:x7,SpellCheck2Icon:x7,SpellCheckIcon:M7,Spline:C7,SplineIcon:C7,Split:L7,SplitIcon:L7,SplitSquareHorizontal:S7,SplitSquareHorizontalIcon:S7,SplitSquareVertical:I7,SplitSquareVerticalIcon:I7,SprayCan:$7,SprayCanIcon:$7,Sprout:A7,SproutIcon:A7,Square:F7,SquareAsterisk:E7,SquareAsteriskIcon:E7,SquareCode:T7,SquareCodeIcon:T7,SquareDashedBottom:D7,SquareDashedBottomCode:P7,SquareDashedBottomCodeIcon:P7,SquareDashedBottomIcon:D7,SquareDot:R7,SquareDotIcon:R7,SquareEqual:O7,SquareEqualIcon:O7,SquareGantt:Hi,SquareGanttIcon:Hi,SquareIcon:F7,SquareKanban:qi,SquareKanbanDashed:Bi,SquareKanbanDashedIcon:Bi,SquareKanbanIcon:qi,SquareSlash:V7,SquareSlashIcon:V7,SquareStack:U7,SquareStackIcon:U7,SquareUser:pl,SquareUserIcon:pl,SquareUserRound:ul,SquareUserRoundIcon:ul,Squircle:j7,SquircleIcon:j7,Squirrel:H7,SquirrelIcon:H7,Stamp:N7,StampIcon:N7,Star:q7,StarHalf:z7,StarHalfIcon:z7,StarIcon:q7,StarOff:B7,StarOffIcon:B7,Stars:dl,StarsIcon:dl,StepBack:W7,StepBackIcon:W7,StepForward:G7,StepForwardIcon:G7,Stethoscope:Z7,StethoscopeIcon:Z7,Sticker:K7,StickerIcon:K7,StickyNote:X7,StickyNoteIcon:X7,StopCircle:Y7,StopCircleIcon:Y7,Store:Q7,StoreIcon:Q7,StretchHorizontal:J7,StretchHorizontalIcon:J7,StretchVertical:eC,StretchVerticalIcon:eC,Strikethrough:tC,StrikethroughIcon:tC,Subscript:aC,SubscriptIcon:aC,Subtitles:nC,SubtitlesIcon:nC,Sun:lC,SunDim:sC,SunDimIcon:sC,SunIcon:lC,SunMedium:oC,SunMediumIcon:oC,SunMoon:rC,SunMoonIcon:rC,SunSnow:iC,SunSnowIcon:iC,Sunrise:cC,SunriseIcon:cC,Sunset:dC,SunsetIcon:dC,Superscript:uC,SuperscriptIcon:uC,SwissFranc:pC,SwissFrancIcon:pC,SwitchCamera:hC,SwitchCameraIcon:hC,Sword:fC,SwordIcon:fC,Swords:mC,SwordsIcon:mC,Syringe:vC,SyringeIcon:vC,Table:gC,Table2:yC,Table2Icon:yC,TableIcon:gC,TableProperties:_C,TablePropertiesIcon:_C,Tablet:bC,TabletIcon:bC,TabletSmartphone:kC,TabletSmartphoneIcon:kC,Tablets:wC,TabletsIcon:wC,Tag:xC,TagIcon:xC,Tags:MC,TagsIcon:MC,Tally1:CC,Tally1Icon:CC,Tally2:SC,Tally2Icon:SC,Tally3:IC,Tally3Icon:IC,Tally4:LC,Tally4Icon:LC,Tally5:$C,Tally5Icon:$C,Tangent:AC,TangentIcon:AC,Target:EC,TargetIcon:EC,Tent:PC,TentIcon:PC,TentTree:TC,TentTreeIcon:TC,Terminal:RC,TerminalIcon:RC,TerminalSquare:DC,TerminalSquareIcon:DC,TestTube:VC,TestTube2:OC,TestTube2Icon:OC,TestTubeIcon:VC,TestTubes:UC,TestTubesIcon:UC,Text:NC,TextCursor:jC,TextCursorIcon:jC,TextCursorInput:FC,TextCursorInputIcon:FC,TextIcon:NC,TextQuote:HC,TextQuoteIcon:HC,TextSelect:hl,TextSelectIcon:hl,TextSelection:hl,TextSelectionIcon:hl,Theater:zC,TheaterIcon:zC,Thermometer:WC,ThermometerIcon:WC,ThermometerSnowflake:BC,ThermometerSnowflakeIcon:BC,ThermometerSun:qC,ThermometerSunIcon:qC,ThumbsDown:GC,ThumbsDownIcon:GC,ThumbsUp:ZC,ThumbsUpIcon:ZC,Ticket:KC,TicketIcon:KC,Timer:QC,TimerIcon:QC,TimerOff:XC,TimerOffIcon:XC,TimerReset:YC,TimerResetIcon:YC,ToggleLeft:JC,ToggleLeftIcon:JC,ToggleRight:eS,ToggleRightIcon:eS,Tornado:tS,TornadoIcon:tS,Torus:aS,TorusIcon:aS,Touchpad:sS,TouchpadIcon:sS,TouchpadOff:nS,TouchpadOffIcon:nS,TowerControl:oS,TowerControlIcon:oS,ToyBrick:rS,ToyBrickIcon:rS,Tractor:iS,TractorIcon:iS,TrafficCone:lS,TrafficConeIcon:lS,Train:fl,TrainFront:dS,TrainFrontIcon:dS,TrainFrontTunnel:cS,TrainFrontTunnelIcon:cS,TrainIcon:fl,TrainTrack:uS,TrainTrackIcon:uS,TramFront:fl,TramFrontIcon:fl,Trash:hS,Trash2:pS,Trash2Icon:pS,TrashIcon:hS,TreeDeciduous:fS,TreeDeciduousIcon:fS,TreePine:mS,TreePineIcon:mS,Trees:vS,TreesIcon:vS,Trello:yS,TrelloIcon:yS,TrendingDown:_S,TrendingDownIcon:_S,TrendingUp:gS,TrendingUpIcon:gS,Triangle:bS,TriangleIcon:bS,TriangleRight:kS,TriangleRightIcon:kS,Trophy:wS,TrophyIcon:wS,Truck:xS,TruckIcon:xS,Turtle:MS,TurtleIcon:MS,Tv:SS,Tv2:CS,Tv2Icon:CS,TvIcon:SS,Twitch:IS,TwitchIcon:IS,Twitter:LS,TwitterIcon:LS,Type:$S,TypeIcon:$S,Umbrella:ES,UmbrellaIcon:ES,UmbrellaOff:AS,UmbrellaOffIcon:AS,Underline:TS,UnderlineIcon:TS,Undo:RS,Undo2:PS,Undo2Icon:PS,UndoDot:DS,UndoDotIcon:DS,UndoIcon:RS,UnfoldHorizontal:OS,UnfoldHorizontalIcon:OS,UnfoldVertical:VS,UnfoldVerticalIcon:VS,Ungroup:US,UngroupIcon:US,Unlink:jS,Unlink2:FS,Unlink2Icon:FS,UnlinkIcon:jS,Unlock:NS,UnlockIcon:NS,UnlockKeyhole:HS,UnlockKeyholeIcon:HS,Unplug:zS,UnplugIcon:zS,Upload:qS,UploadCloud:BS,UploadCloudIcon:BS,UploadIcon:qS,Usb:WS,UsbIcon:WS,User:eI,User2:kl,User2Icon:kl,UserCheck:GS,UserCheck2:ml,UserCheck2Icon:ml,UserCheckIcon:GS,UserCircle:Ri,UserCircle2:Di,UserCircle2Icon:Di,UserCircleIcon:Ri,UserCog:ZS,UserCog2:vl,UserCog2Icon:vl,UserCogIcon:ZS,UserIcon:eI,UserMinus:KS,UserMinus2:yl,UserMinus2Icon:yl,UserMinusIcon:KS,UserPlus:XS,UserPlus2:_l,UserPlus2Icon:_l,UserPlusIcon:XS,UserRound:kl,UserRoundCheck:ml,UserRoundCheckIcon:ml,UserRoundCog:vl,UserRoundCogIcon:vl,UserRoundIcon:kl,UserRoundMinus:yl,UserRoundMinusIcon:yl,UserRoundPlus:_l,UserRoundPlusIcon:_l,UserRoundSearch:YS,UserRoundSearchIcon:YS,UserRoundX:gl,UserRoundXIcon:gl,UserSearch:QS,UserSearchIcon:QS,UserSquare:pl,UserSquare2:ul,UserSquare2Icon:ul,UserSquareIcon:pl,UserX:JS,UserX2:gl,UserX2Icon:gl,UserXIcon:JS,Users:tI,Users2:bl,Users2Icon:bl,UsersIcon:tI,UsersRound:bl,UsersRoundIcon:bl,Utensils:nI,UtensilsCrossed:aI,UtensilsCrossedIcon:aI,UtensilsIcon:nI,UtilityPole:sI,UtilityPoleIcon:sI,Variable:oI,VariableIcon:oI,Vegan:rI,VeganIcon:rI,VenetianMask:iI,VenetianMaskIcon:iI,Verified:Ai,VerifiedIcon:Ai,Vibrate:cI,VibrateIcon:cI,VibrateOff:lI,VibrateOffIcon:lI,Video:uI,VideoIcon:uI,VideoOff:dI,VideoOffIcon:dI,Videotape:pI,VideotapeIcon:pI,View:hI,ViewIcon:hI,Voicemail:fI,VoicemailIcon:fI,Volume:_I,Volume1:mI,Volume1Icon:mI,Volume2:vI,Volume2Icon:vI,VolumeIcon:_I,VolumeX:yI,VolumeXIcon:yI,Vote:gI,VoteIcon:gI,Wallet:wI,Wallet2:kI,Wallet2Icon:kI,WalletCards:bI,WalletCardsIcon:bI,WalletIcon:wI,Wallpaper:xI,WallpaperIcon:xI,Wand:CI,Wand2:MI,Wand2Icon:MI,WandIcon:CI,Warehouse:SI,WarehouseIcon:SI,Watch:II,WatchIcon:II,Waves:LI,WavesIcon:LI,Waypoints:$I,WaypointsIcon:$I,Webcam:AI,WebcamIcon:AI,Webhook:EI,WebhookIcon:EI,Weight:TI,WeightIcon:TI,Wheat:DI,WheatIcon:DI,WheatOff:PI,WheatOffIcon:PI,WholeWord:RI,WholeWordIcon:RI,Wifi:VI,WifiIcon:VI,WifiOff:OI,WifiOffIcon:OI,Wind:UI,WindIcon:UI,Wine:jI,WineIcon:jI,WineOff:FI,WineOffIcon:FI,Workflow:HI,WorkflowIcon:HI,WrapText:NI,WrapTextIcon:NI,Wrench:zI,WrenchIcon:zI,X:GI,XCircle:BI,XCircleIcon:BI,XIcon:GI,XOctagon:qI,XOctagonIcon:qI,XSquare:WI,XSquareIcon:WI,Youtube:ZI,YoutubeIcon:ZI,Zap:XI,ZapIcon:XI,ZapOff:KI,ZapOffIcon:KI,ZoomIn:YI,ZoomInIcon:YI,ZoomOut:QI,ZoomOutIcon:QI,icons:Dne},Symbol.toStringTag,{value:"Module"})),RT="-";function One(n){const e=Une(n),{conflictingClassGroups:a,conflictingClassGroupModifiers:s}=n;function o(i){const u=i.split(RT);return u[0]===""&&u.length!==1&&u.shift(),DH(u,e)||Vne(i)}function r(i,u){const h=a[i]||[];return u&&s[i]?[...h,...s[i]]:h}return{getClassGroupId:o,getConflictingClassGroupIds:r}}function DH(n,e){var i;if(n.length===0)return e.classGroupId;const a=n[0],s=e.nextPart.get(a),o=s?DH(n.slice(1),s):void 0;if(o)return o;if(e.validators.length===0)return;const r=n.join(RT);return(i=e.validators.find(({validator:u})=>u(r)))==null?void 0:i.classGroupId}const TV=/^\[(.+)\]$/;function Vne(n){if(TV.test(n)){const e=TV.exec(n)[1],a=e==null?void 0:e.substring(0,e.indexOf(":"));if(a)return"arbitrary.."+a}}function Une(n){const{theme:e,prefix:a}=n,s={nextPart:new Map,validators:[]};return jne(Object.entries(n.classGroups),a).forEach(([r,i])=>{sE(i,s,r,e)}),s}function sE(n,e,a,s){n.forEach(o=>{if(typeof o=="string"){const r=o===""?e:PV(e,o);r.classGroupId=a;return}if(typeof o=="function"){if(Fne(o)){sE(o(s),e,a,s);return}e.validators.push({validator:o,classGroupId:a});return}Object.entries(o).forEach(([r,i])=>{sE(i,PV(e,r),a,s)})})}function PV(n,e){let a=n;return e.split(RT).forEach(s=>{a.nextPart.has(s)||a.nextPart.set(s,{nextPart:new Map,validators:[]}),a=a.nextPart.get(s)}),a}function Fne(n){return n.isThemeGetter}function jne(n,e){return e?n.map(([a,s])=>{const o=s.map(r=>typeof r=="string"?e+r:typeof r=="object"?Object.fromEntries(Object.entries(r).map(([i,u])=>[e+i,u])):r);return[a,o]}):n}function Hne(n){if(n<1)return{get:()=>{},set:()=>{}};let e=0,a=new Map,s=new Map;function o(r,i){a.set(r,i),e++,e>n&&(e=0,s=a,a=new Map)}return{get(r){let i=a.get(r);if(i!==void 0)return i;if((i=s.get(r))!==void 0)return o(r,i),i},set(r,i){a.has(r)?a.set(r,i):o(r,i)}}}const RH="!";function Nne(n){const e=n.separator,a=e.length===1,s=e[0],o=e.length;return function(i){const u=[];let h=0,m=0,p;for(let D=0;D<i.length;D++){let V=i[D];if(h===0){if(V===s&&(a||i.slice(D,D+o)===e)){u.push(i.slice(m,D)),m=D+o;continue}if(V==="/"){p=D;continue}}V==="["?h++:V==="]"&&h--}const b=u.length===0?i:i.substring(m),x=b.startsWith(RH),w=x?b.substring(1):b,$=p&&p>m?p-m:void 0;return{modifiers:u,hasImportantModifier:x,baseClassName:w,maybePostfixModifierPosition:$}}}function zne(n){if(n.length<=1)return n;const e=[];let a=[];return n.forEach(s=>{s[0]==="["?(e.push(...a.sort(),s),a=[]):a.push(s)}),e.push(...a.sort()),e}function Bne(n){return{cache:Hne(n.cacheSize),splitModifiers:Nne(n),...One(n)}}const qne=/\s+/;function Wne(n,e){const{splitModifiers:a,getClassGroupId:s,getConflictingClassGroupIds:o}=e,r=new Set;return n.trim().split(qne).map(i=>{const{modifiers:u,hasImportantModifier:h,baseClassName:m,maybePostfixModifierPosition:p}=a(i);let b=s(p?m.substring(0,p):m),x=!!p;if(!b){if(!p)return{isTailwindClass:!1,originalClassName:i};if(b=s(m),!b)return{isTailwindClass:!1,originalClassName:i};x=!1}const w=zne(u).join(":");return{isTailwindClass:!0,modifierId:h?w+RH:w,classGroupId:b,originalClassName:i,hasPostfixModifier:x}}).reverse().filter(i=>{if(!i.isTailwindClass)return!0;const{modifierId:u,classGroupId:h,hasPostfixModifier:m}=i,p=u+h;return r.has(p)?!1:(r.add(p),o(h,m).forEach(b=>r.add(u+b)),!0)}).reverse().map(i=>i.originalClassName).join(" ")}function Gne(){let n=0,e,a,s="";for(;n<arguments.length;)(e=arguments[n++])&&(a=OH(e))&&(s&&(s+=" "),s+=a);return s}function OH(n){if(typeof n=="string")return n;let e,a="";for(let s=0;s<n.length;s++)n[s]&&(e=OH(n[s]))&&(a&&(a+=" "),a+=e);return a}function Zne(n,...e){let a,s,o,r=i;function i(h){const m=e.reduce((p,b)=>b(p),n());return a=Bne(m),s=a.cache.get,o=a.cache.set,r=u,u(h)}function u(h){const m=s(h);if(m)return m;const p=Wne(h,a);return o(h,p),p}return function(){return r(Gne.apply(null,arguments))}}function Na(n){const e=a=>a[n]||[];return e.isThemeGetter=!0,e}const VH=/^\[(?:([a-z-]+):)?(.+)\]$/i,Kne=/^\d+\/\d+$/,Xne=new Set(["px","full","screen"]),Yne=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,Qne=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,Jne=/^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/,ese=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,tse=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;function Wo(n){return $l(n)||Xne.has(n)||Kne.test(n)}function Cr(n){return Rc(n,"length",cse)}function $l(n){return!!n&&!Number.isNaN(Number(n))}function b1(n){return Rc(n,"number",$l)}function cd(n){return!!n&&Number.isInteger(Number(n))}function ase(n){return n.endsWith("%")&&$l(n.slice(0,-1))}function ta(n){return VH.test(n)}function Sr(n){return Yne.test(n)}const nse=new Set(["length","size","percentage"]);function sse(n){return Rc(n,nse,UH)}function ose(n){return Rc(n,"position",UH)}const rse=new Set(["image","url"]);function ise(n){return Rc(n,rse,use)}function lse(n){return Rc(n,"",dse)}function dd(){return!0}function Rc(n,e,a){const s=VH.exec(n);return s?s[1]?typeof e=="string"?s[1]===e:e.has(s[1]):a(s[2]):!1}function cse(n){return Qne.test(n)&&!Jne.test(n)}function UH(){return!1}function dse(n){return ese.test(n)}function use(n){return tse.test(n)}function pse(){const n=Na("colors"),e=Na("spacing"),a=Na("blur"),s=Na("brightness"),o=Na("borderColor"),r=Na("borderRadius"),i=Na("borderSpacing"),u=Na("borderWidth"),h=Na("contrast"),m=Na("grayscale"),p=Na("hueRotate"),b=Na("invert"),x=Na("gap"),w=Na("gradientColorStops"),$=Na("gradientColorStopPositions"),D=Na("inset"),V=Na("margin"),R=Na("opacity"),E=Na("padding"),P=Na("saturate"),S=Na("scale"),C=Na("sepia"),M=Na("skew"),g=Na("space"),v=Na("translate"),T=()=>["auto","contain","none"],j=()=>["auto","hidden","clip","visible","scroll"],B=()=>["auto",ta,e],oe=()=>[ta,e],be=()=>["",Wo,Cr],$e=()=>["auto",$l,ta],Le=()=>["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],de=()=>["solid","dashed","dotted","double","none"],J=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter"],G=()=>["start","end","center","between","around","evenly","stretch"],ce=()=>["","0",ta],Ee=()=>["auto","avoid","all","avoid-page","page","left","right","column"],He=()=>[$l,b1],Ke=()=>[$l,ta];return{cacheSize:500,separator:":",theme:{colors:[dd],spacing:[Wo,Cr],blur:["none","",Sr,ta],brightness:He(),borderColor:[n],borderRadius:["none","","full",Sr,ta],borderSpacing:oe(),borderWidth:be(),contrast:He(),grayscale:ce(),hueRotate:Ke(),invert:ce(),gap:oe(),gradientColorStops:[n],gradientColorStopPositions:[ase,Cr],inset:B(),margin:B(),opacity:He(),padding:oe(),saturate:He(),scale:He(),sepia:ce(),skew:Ke(),space:oe(),translate:oe()},classGroups:{aspect:[{aspect:["auto","square","video",ta]}],container:["container"],columns:[{columns:[Sr]}],"break-after":[{"break-after":Ee()}],"break-before":[{"break-before":Ee()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[...Le(),ta]}],overflow:[{overflow:j()}],"overflow-x":[{"overflow-x":j()}],"overflow-y":[{"overflow-y":j()}],overscroll:[{overscroll:T()}],"overscroll-x":[{"overscroll-x":T()}],"overscroll-y":[{"overscroll-y":T()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[D]}],"inset-x":[{"inset-x":[D]}],"inset-y":[{"inset-y":[D]}],start:[{start:[D]}],end:[{end:[D]}],top:[{top:[D]}],right:[{right:[D]}],bottom:[{bottom:[D]}],left:[{left:[D]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",cd,ta]}],basis:[{basis:B()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",ta]}],grow:[{grow:ce()}],shrink:[{shrink:ce()}],order:[{order:["first","last","none",cd,ta]}],"grid-cols":[{"grid-cols":[dd]}],"col-start-end":[{col:["auto",{span:["full",cd,ta]},ta]}],"col-start":[{"col-start":$e()}],"col-end":[{"col-end":$e()}],"grid-rows":[{"grid-rows":[dd]}],"row-start-end":[{row:["auto",{span:[cd,ta]},ta]}],"row-start":[{"row-start":$e()}],"row-end":[{"row-end":$e()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",ta]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",ta]}],gap:[{gap:[x]}],"gap-x":[{"gap-x":[x]}],"gap-y":[{"gap-y":[x]}],"justify-content":[{justify:["normal",...G()]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal",...G(),"baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[...G(),"baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[E]}],px:[{px:[E]}],py:[{py:[E]}],ps:[{ps:[E]}],pe:[{pe:[E]}],pt:[{pt:[E]}],pr:[{pr:[E]}],pb:[{pb:[E]}],pl:[{pl:[E]}],m:[{m:[V]}],mx:[{mx:[V]}],my:[{my:[V]}],ms:[{ms:[V]}],me:[{me:[V]}],mt:[{mt:[V]}],mr:[{mr:[V]}],mb:[{mb:[V]}],ml:[{ml:[V]}],"space-x":[{"space-x":[g]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[g]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",ta,e]}],"min-w":[{"min-w":[ta,e,"min","max","fit"]}],"max-w":[{"max-w":[ta,e,"none","full","min","max","fit","prose",{screen:[Sr]},Sr]}],h:[{h:[ta,e,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[ta,e,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[ta,e,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[ta,e,"auto","min","max","fit"]}],"font-size":[{text:["base",Sr,Cr]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",b1]}],"font-family":[{font:[dd]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractons"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",ta]}],"line-clamp":[{"line-clamp":["none",$l,b1]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",Wo,ta]}],"list-image":[{"list-image":["none",ta]}],"list-style-type":[{list:["none","disc","decimal",ta]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[n]}],"placeholder-opacity":[{"placeholder-opacity":[R]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[n]}],"text-opacity":[{"text-opacity":[R]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...de(),"wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",Wo,Cr]}],"underline-offset":[{"underline-offset":["auto",Wo,ta]}],"text-decoration-color":[{decoration:[n]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:oe()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",ta]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",ta]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[R]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[...Le(),ose]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",sse]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},ise]}],"bg-color":[{bg:[n]}],"gradient-from-pos":[{from:[$]}],"gradient-via-pos":[{via:[$]}],"gradient-to-pos":[{to:[$]}],"gradient-from":[{from:[w]}],"gradient-via":[{via:[w]}],"gradient-to":[{to:[w]}],rounded:[{rounded:[r]}],"rounded-s":[{"rounded-s":[r]}],"rounded-e":[{"rounded-e":[r]}],"rounded-t":[{"rounded-t":[r]}],"rounded-r":[{"rounded-r":[r]}],"rounded-b":[{"rounded-b":[r]}],"rounded-l":[{"rounded-l":[r]}],"rounded-ss":[{"rounded-ss":[r]}],"rounded-se":[{"rounded-se":[r]}],"rounded-ee":[{"rounded-ee":[r]}],"rounded-es":[{"rounded-es":[r]}],"rounded-tl":[{"rounded-tl":[r]}],"rounded-tr":[{"rounded-tr":[r]}],"rounded-br":[{"rounded-br":[r]}],"rounded-bl":[{"rounded-bl":[r]}],"border-w":[{border:[u]}],"border-w-x":[{"border-x":[u]}],"border-w-y":[{"border-y":[u]}],"border-w-s":[{"border-s":[u]}],"border-w-e":[{"border-e":[u]}],"border-w-t":[{"border-t":[u]}],"border-w-r":[{"border-r":[u]}],"border-w-b":[{"border-b":[u]}],"border-w-l":[{"border-l":[u]}],"border-opacity":[{"border-opacity":[R]}],"border-style":[{border:[...de(),"hidden"]}],"divide-x":[{"divide-x":[u]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[u]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[R]}],"divide-style":[{divide:de()}],"border-color":[{border:[o]}],"border-color-x":[{"border-x":[o]}],"border-color-y":[{"border-y":[o]}],"border-color-t":[{"border-t":[o]}],"border-color-r":[{"border-r":[o]}],"border-color-b":[{"border-b":[o]}],"border-color-l":[{"border-l":[o]}],"divide-color":[{divide:[o]}],"outline-style":[{outline:["",...de()]}],"outline-offset":[{"outline-offset":[Wo,ta]}],"outline-w":[{outline:[Wo,Cr]}],"outline-color":[{outline:[n]}],"ring-w":[{ring:be()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[n]}],"ring-opacity":[{"ring-opacity":[R]}],"ring-offset-w":[{"ring-offset":[Wo,Cr]}],"ring-offset-color":[{"ring-offset":[n]}],shadow:[{shadow:["","inner","none",Sr,lse]}],"shadow-color":[{shadow:[dd]}],opacity:[{opacity:[R]}],"mix-blend":[{"mix-blend":J()}],"bg-blend":[{"bg-blend":J()}],filter:[{filter:["","none"]}],blur:[{blur:[a]}],brightness:[{brightness:[s]}],contrast:[{contrast:[h]}],"drop-shadow":[{"drop-shadow":["","none",Sr,ta]}],grayscale:[{grayscale:[m]}],"hue-rotate":[{"hue-rotate":[p]}],invert:[{invert:[b]}],saturate:[{saturate:[P]}],sepia:[{sepia:[C]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[a]}],"backdrop-brightness":[{"backdrop-brightness":[s]}],"backdrop-contrast":[{"backdrop-contrast":[h]}],"backdrop-grayscale":[{"backdrop-grayscale":[m]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[p]}],"backdrop-invert":[{"backdrop-invert":[b]}],"backdrop-opacity":[{"backdrop-opacity":[R]}],"backdrop-saturate":[{"backdrop-saturate":[P]}],"backdrop-sepia":[{"backdrop-sepia":[C]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[i]}],"border-spacing-x":[{"border-spacing-x":[i]}],"border-spacing-y":[{"border-spacing-y":[i]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",ta]}],duration:[{duration:Ke()}],ease:[{ease:["linear","in","out","in-out",ta]}],delay:[{delay:Ke()}],animate:[{animate:["none","spin","ping","pulse","bounce",ta]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[S]}],"scale-x":[{"scale-x":[S]}],"scale-y":[{"scale-y":[S]}],rotate:[{rotate:[cd,ta]}],"translate-x":[{"translate-x":[v]}],"translate-y":[{"translate-y":[v]}],"skew-x":[{"skew-x":[M]}],"skew-y":[{"skew-y":[M]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",ta]}],accent:[{accent:["auto",n]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",ta]}],"caret-color":[{caret:[n]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":oe()}],"scroll-mx":[{"scroll-mx":oe()}],"scroll-my":[{"scroll-my":oe()}],"scroll-ms":[{"scroll-ms":oe()}],"scroll-me":[{"scroll-me":oe()}],"scroll-mt":[{"scroll-mt":oe()}],"scroll-mr":[{"scroll-mr":oe()}],"scroll-mb":[{"scroll-mb":oe()}],"scroll-ml":[{"scroll-ml":oe()}],"scroll-p":[{"scroll-p":oe()}],"scroll-px":[{"scroll-px":oe()}],"scroll-py":[{"scroll-py":oe()}],"scroll-ps":[{"scroll-ps":oe()}],"scroll-pe":[{"scroll-pe":oe()}],"scroll-pt":[{"scroll-pt":oe()}],"scroll-pr":[{"scroll-pr":oe()}],"scroll-pb":[{"scroll-pb":oe()}],"scroll-pl":[{"scroll-pl":oe()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",ta]}],fill:[{fill:[n,"none"]}],"stroke-w":[{stroke:[Wo,Cr,b1]}],stroke:[{stroke:[n,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}}const At=Zne(pse),re=Ce({__name:"Lucide",props:{icon:{},title:{}},setup(n){const e=n,a=Ot(),s=ee(()=>At(["stroke-1.5 w-5 h-5",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(Da(Rne[e.icon]),{class:F(s.value)},null,8,["class"]))}}),hse={class:"flex","aria-label":"breadcrumb"},fse=Ce({__name:"Breadcrumb",props:{light:{type:Boolean}},setup(n){const e=Oj(),{light:a}=n;return St("breadcrumb",{light:a}),(s,o)=>(L(),U("nav",hse,[c("ol",{class:F(["flex items-center text-primary dark:text-slate-300",{"text-white/90":s.light}])},[(L(!0),U(ke,null,Fe(t(e).default&&t(e).default(),(r,i)=>(L(),ge(Da(r),{index:i},null,8,["index"]))),256))],2)]))}}),mse=Ce({__name:"Link",props:{to:{default:""},active:{type:Boolean,default:!1},index:{default:0}},setup(n){const{to:e,active:a,index:s}=n,o=xt("breadcrumb"),r=ee(()=>[s>0&&"relative ml-5 pl-0.5",o&&!o.light&&s>0&&"before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-black before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",o&&o.light&&s>0&&"before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-white before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",s>0&&"dark:before:bg-chevron-white",o&&!o.light&&a&&"text-slate-800 cursor-text dark:text-slate-400",o&&o.light&&a&&"text-white/70"]);return(i,u)=>{const h=Qt("RouterLink");return L(),U("li",{class:F(r.value)},[l(h,{to:e},{default:f(()=>[Lt(i.$slots,"default")]),_:3})],2)}}}),vse=Ce({__name:"Text",props:{active:{type:Boolean,default:!1},index:{default:0}},setup(n){const{active:e,index:a}=n,s=xt("breadcrumb"),o=ee(()=>[a>0&&"relative ml-5 pl-0.5",s&&!s.light&&a>0&&"before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-black before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",s&&s.light&&a>0&&"before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-white before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",a>0&&"dark:before:bg-chevron-white",s&&!s.light&&e&&"text-slate-800 cursor-text dark:text-slate-400",s&&s.light&&e&&"text-white/70"]);return(r,i)=>(L(),U("li",{class:F(o.value)},[Lt(r.$slots,"default")],2))}}),Y$=Object.assign({},fse,{Link:mse,Text:vse});var Ur=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function cu(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var _L={exports:{}};/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */_L.exports;(function(n,e){(function(){var a,s="4.17.21",o=200,r="Unsupported core-js use. Try https://npms.io/search?q=ponyfill.",i="Expected a function",u="Invalid `variable` option passed into `_.template`",h="__lodash_hash_undefined__",m=500,p="__lodash_placeholder__",b=1,x=2,w=4,$=1,D=2,V=1,R=2,E=4,P=8,S=16,C=32,M=64,g=128,v=256,T=512,j=30,B="...",oe=800,be=16,$e=1,Le=2,de=3,J=1/0,G=9007199254740991,ce=17976931348623157e292,Ee=NaN,He=4294967295,Ke=He-1,pt=He>>>1,ut=[["ary",g],["bind",V],["bindKey",R],["curry",P],["curryRight",S],["flip",T],["partial",C],["partialRight",M],["rearg",v]],ft="[object Arguments]",kt="[object Array]",Ae="[object AsyncFunction]",Xe="[object Boolean]",ie="[object Date]",Y="[object DOMException]",ue="[object Error]",pe="[object Function]",H="[object GeneratorFunction]",N="[object Map]",Q="[object Number]",he="[object Null]",Se="[object Object]",Re="[object Promise]",Ze="[object Proxy]",ze="[object RegExp]",qe="[object Set]",Be="[object String]",lt="[object Symbol]",yt="[object Undefined]",it="[object WeakMap]",Pe="[object WeakSet]",Ue="[object ArrayBuffer]",ht="[object DataView]",Mt="[object Float32Array]",Et="[object Float64Array]",Jt="[object Int8Array]",ae="[object Int16Array]",W="[object Int32Array]",q="[object Uint8Array]",ve="[object Uint8ClampedArray]",te="[object Uint16Array]",ne="[object Uint32Array]",ye=/\b__p \+= '';/g,Ve=/\b(__p \+=) '' \+/g,We=/(__e\(.*?\)|\b__t\)) \+\n'';/g,ga=/&(?:amp|lt|gt|quot|#39);/g,_t=/[&<>"']/g,Wt=RegExp(ga.source),oa=RegExp(_t.source),Oa=/<%-([\s\S]+?)%>/g,Cn=/<%([\s\S]+?)%>/g,ku=/<%=([\s\S]+?)%>/g,Bc=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,ql=/^\w*$/,UB=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,x9=/[\\^$.*+?()[\]{}|]/g,FB=RegExp(x9.source),M9=/^\s+/,jB=/\s/,HB=/\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/,NB=/\{\n\/\* \[wrapped with (.+)\] \*/,zB=/,? & /,BB=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g,qB=/[()=,{}\[\]\/\s]/,WB=/\\(\\)?/g,GB=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,OP=/\w*$/,ZB=/^[-+]0x[0-9a-f]+$/i,KB=/^0b[01]+$/i,XB=/^\[object .+?Constructor\]$/,YB=/^0o[0-7]+$/i,QB=/^(?:0|[1-9]\d*)$/,JB=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,bu=/($^)/,eq=/['\n\r\u2028\u2029\\]/g,wu="\\ud800-\\udfff",tq="\\u0300-\\u036f",aq="\\ufe20-\\ufe2f",nq="\\u20d0-\\u20ff",VP=tq+aq+nq,UP="\\u2700-\\u27bf",FP="a-z\\xdf-\\xf6\\xf8-\\xff",sq="\\xac\\xb1\\xd7\\xf7",oq="\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf",rq="\\u2000-\\u206f",iq=" \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",jP="A-Z\\xc0-\\xd6\\xd8-\\xde",HP="\\ufe0e\\ufe0f",NP=sq+oq+rq+iq,C9="['’]",lq="["+wu+"]",zP="["+NP+"]",xu="["+VP+"]",BP="\\d+",cq="["+UP+"]",qP="["+FP+"]",WP="[^"+wu+NP+BP+UP+FP+jP+"]",S9="\\ud83c[\\udffb-\\udfff]",dq="(?:"+xu+"|"+S9+")",GP="[^"+wu+"]",I9="(?:\\ud83c[\\udde6-\\uddff]){2}",L9="[\\ud800-\\udbff][\\udc00-\\udfff]",Wl="["+jP+"]",ZP="\\u200d",KP="(?:"+qP+"|"+WP+")",uq="(?:"+Wl+"|"+WP+")",XP="(?:"+C9+"(?:d|ll|m|re|s|t|ve))?",YP="(?:"+C9+"(?:D|LL|M|RE|S|T|VE))?",QP=dq+"?",JP="["+HP+"]?",pq="(?:"+ZP+"(?:"+[GP,I9,L9].join("|")+")"+JP+QP+")*",hq="\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",fq="\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])",eD=JP+QP+pq,mq="(?:"+[cq,I9,L9].join("|")+")"+eD,vq="(?:"+[GP+xu+"?",xu,I9,L9,lq].join("|")+")",yq=RegExp(C9,"g"),_q=RegExp(xu,"g"),$9=RegExp(S9+"(?="+S9+")|"+vq+eD,"g"),gq=RegExp([Wl+"?"+qP+"+"+XP+"(?="+[zP,Wl,"$"].join("|")+")",uq+"+"+YP+"(?="+[zP,Wl+KP,"$"].join("|")+")",Wl+"?"+KP+"+"+XP,Wl+"+"+YP,fq,hq,BP,mq].join("|"),"g"),kq=RegExp("["+ZP+wu+VP+HP+"]"),bq=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/,wq=["Array","Buffer","DataView","Date","Error","Float32Array","Float64Array","Function","Int8Array","Int16Array","Int32Array","Map","Math","Object","Promise","RegExp","Set","String","Symbol","TypeError","Uint8Array","Uint8ClampedArray","Uint16Array","Uint32Array","WeakMap","_","clearTimeout","isFinite","parseInt","setTimeout"],xq=-1,Ha={};Ha[Mt]=Ha[Et]=Ha[Jt]=Ha[ae]=Ha[W]=Ha[q]=Ha[ve]=Ha[te]=Ha[ne]=!0,Ha[ft]=Ha[kt]=Ha[Ue]=Ha[Xe]=Ha[ht]=Ha[ie]=Ha[ue]=Ha[pe]=Ha[N]=Ha[Q]=Ha[Se]=Ha[ze]=Ha[qe]=Ha[Be]=Ha[it]=!1;var Va={};Va[ft]=Va[kt]=Va[Ue]=Va[ht]=Va[Xe]=Va[ie]=Va[Mt]=Va[Et]=Va[Jt]=Va[ae]=Va[W]=Va[N]=Va[Q]=Va[Se]=Va[ze]=Va[qe]=Va[Be]=Va[lt]=Va[q]=Va[ve]=Va[te]=Va[ne]=!0,Va[ue]=Va[pe]=Va[it]=!1;var Mq={À:"A",Á:"A",Â:"A",Ã:"A",Ä:"A",Å:"A",à:"a",á:"a",â:"a",ã:"a",ä:"a",å:"a",Ç:"C",ç:"c",Ð:"D",ð:"d",È:"E",É:"E",Ê:"E",Ë:"E",è:"e",é:"e",ê:"e",ë:"e",Ì:"I",Í:"I",Î:"I",Ï:"I",ì:"i",í:"i",î:"i",ï:"i",Ñ:"N",ñ:"n",Ò:"O",Ó:"O",Ô:"O",Õ:"O",Ö:"O",Ø:"O",ò:"o",ó:"o",ô:"o",õ:"o",ö:"o",ø:"o",Ù:"U",Ú:"U",Û:"U",Ü:"U",ù:"u",ú:"u",û:"u",ü:"u",Ý:"Y",ý:"y",ÿ:"y",Æ:"Ae",æ:"ae",Þ:"Th",þ:"th",ß:"ss",Ā:"A",Ă:"A",Ą:"A",ā:"a",ă:"a",ą:"a",Ć:"C",Ĉ:"C",Ċ:"C",Č:"C",ć:"c",ĉ:"c",ċ:"c",č:"c",Ď:"D",Đ:"D",ď:"d",đ:"d",Ē:"E",Ĕ:"E",Ė:"E",Ę:"E",Ě:"E",ē:"e",ĕ:"e",ė:"e",ę:"e",ě:"e",Ĝ:"G",Ğ:"G",Ġ:"G",Ģ:"G",ĝ:"g",ğ:"g",ġ:"g",ģ:"g",Ĥ:"H",Ħ:"H",ĥ:"h",ħ:"h",Ĩ:"I",Ī:"I",Ĭ:"I",Į:"I",İ:"I",ĩ:"i",ī:"i",ĭ:"i",į:"i",ı:"i",Ĵ:"J",ĵ:"j",Ķ:"K",ķ:"k",ĸ:"k",Ĺ:"L",Ļ:"L",Ľ:"L",Ŀ:"L",Ł:"L",ĺ:"l",ļ:"l",ľ:"l",ŀ:"l",ł:"l",Ń:"N",Ņ:"N",Ň:"N",Ŋ:"N",ń:"n",ņ:"n",ň:"n",ŋ:"n",Ō:"O",Ŏ:"O",Ő:"O",ō:"o",ŏ:"o",ő:"o",Ŕ:"R",Ŗ:"R",Ř:"R",ŕ:"r",ŗ:"r",ř:"r",Ś:"S",Ŝ:"S",Ş:"S",Š:"S",ś:"s",ŝ:"s",ş:"s",š:"s",Ţ:"T",Ť:"T",Ŧ:"T",ţ:"t",ť:"t",ŧ:"t",Ũ:"U",Ū:"U",Ŭ:"U",Ů:"U",Ű:"U",Ų:"U",ũ:"u",ū:"u",ŭ:"u",ů:"u",ű:"u",ų:"u",Ŵ:"W",ŵ:"w",Ŷ:"Y",ŷ:"y",Ÿ:"Y",Ź:"Z",Ż:"Z",Ž:"Z",ź:"z",ż:"z",ž:"z",IJ:"IJ",ij:"ij",Œ:"Oe",œ:"oe",ʼn:"'n",ſ:"s"},Cq={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},Sq={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#39;":"'"},Iq={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},Lq=parseFloat,$q=parseInt,tD=typeof Ur=="object"&&Ur&&Ur.Object===Object&&Ur,Aq=typeof self=="object"&&self&&self.Object===Object&&self,Pn=tD||Aq||Function("return this")(),A9=e&&!e.nodeType&&e,ai=A9&&!0&&n&&!n.nodeType&&n,aD=ai&&ai.exports===A9,E9=aD&&tD.process,Ms=function(){try{var Te=ai&&ai.require&&ai.require("util").types;return Te||E9&&E9.binding&&E9.binding("util")}catch{}}(),nD=Ms&&Ms.isArrayBuffer,sD=Ms&&Ms.isDate,oD=Ms&&Ms.isMap,rD=Ms&&Ms.isRegExp,iD=Ms&&Ms.isSet,lD=Ms&&Ms.isTypedArray;function ds(Te,Ge,Ne){switch(Ne.length){case 0:return Te.call(Ge);case 1:return Te.call(Ge,Ne[0]);case 2:return Te.call(Ge,Ne[0],Ne[1]);case 3:return Te.call(Ge,Ne[0],Ne[1],Ne[2])}return Te.apply(Ge,Ne)}function Eq(Te,Ge,Ne,Ct){for(var Kt=-1,xa=Te==null?0:Te.length;++Kt<xa;){var kn=Te[Kt];Ge(Ct,kn,Ne(kn),Te)}return Ct}function Cs(Te,Ge){for(var Ne=-1,Ct=Te==null?0:Te.length;++Ne<Ct&&Ge(Te[Ne],Ne,Te)!==!1;);return Te}function Tq(Te,Ge){for(var Ne=Te==null?0:Te.length;Ne--&&Ge(Te[Ne],Ne,Te)!==!1;);return Te}function cD(Te,Ge){for(var Ne=-1,Ct=Te==null?0:Te.length;++Ne<Ct;)if(!Ge(Te[Ne],Ne,Te))return!1;return!0}function pr(Te,Ge){for(var Ne=-1,Ct=Te==null?0:Te.length,Kt=0,xa=[];++Ne<Ct;){var kn=Te[Ne];Ge(kn,Ne,Te)&&(xa[Kt++]=kn)}return xa}function Mu(Te,Ge){var Ne=Te==null?0:Te.length;return!!Ne&&Gl(Te,Ge,0)>-1}function T9(Te,Ge,Ne){for(var Ct=-1,Kt=Te==null?0:Te.length;++Ct<Kt;)if(Ne(Ge,Te[Ct]))return!0;return!1}function Ka(Te,Ge){for(var Ne=-1,Ct=Te==null?0:Te.length,Kt=Array(Ct);++Ne<Ct;)Kt[Ne]=Ge(Te[Ne],Ne,Te);return Kt}function hr(Te,Ge){for(var Ne=-1,Ct=Ge.length,Kt=Te.length;++Ne<Ct;)Te[Kt+Ne]=Ge[Ne];return Te}function P9(Te,Ge,Ne,Ct){var Kt=-1,xa=Te==null?0:Te.length;for(Ct&&xa&&(Ne=Te[++Kt]);++Kt<xa;)Ne=Ge(Ne,Te[Kt],Kt,Te);return Ne}function Pq(Te,Ge,Ne,Ct){var Kt=Te==null?0:Te.length;for(Ct&&Kt&&(Ne=Te[--Kt]);Kt--;)Ne=Ge(Ne,Te[Kt],Kt,Te);return Ne}function D9(Te,Ge){for(var Ne=-1,Ct=Te==null?0:Te.length;++Ne<Ct;)if(Ge(Te[Ne],Ne,Te))return!0;return!1}var Dq=R9("length");function Rq(Te){return Te.split("")}function Oq(Te){return Te.match(BB)||[]}function dD(Te,Ge,Ne){var Ct;return Ne(Te,function(Kt,xa,kn){if(Ge(Kt,xa,kn))return Ct=xa,!1}),Ct}function Cu(Te,Ge,Ne,Ct){for(var Kt=Te.length,xa=Ne+(Ct?1:-1);Ct?xa--:++xa<Kt;)if(Ge(Te[xa],xa,Te))return xa;return-1}function Gl(Te,Ge,Ne){return Ge===Ge?Zq(Te,Ge,Ne):Cu(Te,uD,Ne)}function Vq(Te,Ge,Ne,Ct){for(var Kt=Ne-1,xa=Te.length;++Kt<xa;)if(Ct(Te[Kt],Ge))return Kt;return-1}function uD(Te){return Te!==Te}function pD(Te,Ge){var Ne=Te==null?0:Te.length;return Ne?V9(Te,Ge)/Ne:Ee}function R9(Te){return function(Ge){return Ge==null?a:Ge[Te]}}function O9(Te){return function(Ge){return Te==null?a:Te[Ge]}}function hD(Te,Ge,Ne,Ct,Kt){return Kt(Te,function(xa,kn,Ra){Ne=Ct?(Ct=!1,xa):Ge(Ne,xa,kn,Ra)}),Ne}function Uq(Te,Ge){var Ne=Te.length;for(Te.sort(Ge);Ne--;)Te[Ne]=Te[Ne].value;return Te}function V9(Te,Ge){for(var Ne,Ct=-1,Kt=Te.length;++Ct<Kt;){var xa=Ge(Te[Ct]);xa!==a&&(Ne=Ne===a?xa:Ne+xa)}return Ne}function U9(Te,Ge){for(var Ne=-1,Ct=Array(Te);++Ne<Te;)Ct[Ne]=Ge(Ne);return Ct}function Fq(Te,Ge){return Ka(Ge,function(Ne){return[Ne,Te[Ne]]})}function fD(Te){return Te&&Te.slice(0,_D(Te)+1).replace(M9,"")}function us(Te){return function(Ge){return Te(Ge)}}function F9(Te,Ge){return Ka(Ge,function(Ne){return Te[Ne]})}function qc(Te,Ge){return Te.has(Ge)}function mD(Te,Ge){for(var Ne=-1,Ct=Te.length;++Ne<Ct&&Gl(Ge,Te[Ne],0)>-1;);return Ne}function vD(Te,Ge){for(var Ne=Te.length;Ne--&&Gl(Ge,Te[Ne],0)>-1;);return Ne}function jq(Te,Ge){for(var Ne=Te.length,Ct=0;Ne--;)Te[Ne]===Ge&&++Ct;return Ct}var Hq=O9(Mq),Nq=O9(Cq);function zq(Te){return"\\"+Iq[Te]}function Bq(Te,Ge){return Te==null?a:Te[Ge]}function Zl(Te){return kq.test(Te)}function qq(Te){return bq.test(Te)}function Wq(Te){for(var Ge,Ne=[];!(Ge=Te.next()).done;)Ne.push(Ge.value);return Ne}function j9(Te){var Ge=-1,Ne=Array(Te.size);return Te.forEach(function(Ct,Kt){Ne[++Ge]=[Kt,Ct]}),Ne}function yD(Te,Ge){return function(Ne){return Te(Ge(Ne))}}function fr(Te,Ge){for(var Ne=-1,Ct=Te.length,Kt=0,xa=[];++Ne<Ct;){var kn=Te[Ne];(kn===Ge||kn===p)&&(Te[Ne]=p,xa[Kt++]=Ne)}return xa}function Su(Te){var Ge=-1,Ne=Array(Te.size);return Te.forEach(function(Ct){Ne[++Ge]=Ct}),Ne}function Gq(Te){var Ge=-1,Ne=Array(Te.size);return Te.forEach(function(Ct){Ne[++Ge]=[Ct,Ct]}),Ne}function Zq(Te,Ge,Ne){for(var Ct=Ne-1,Kt=Te.length;++Ct<Kt;)if(Te[Ct]===Ge)return Ct;return-1}function Kq(Te,Ge,Ne){for(var Ct=Ne+1;Ct--;)if(Te[Ct]===Ge)return Ct;return Ct}function Kl(Te){return Zl(Te)?Yq(Te):Dq(Te)}function Ys(Te){return Zl(Te)?Qq(Te):Rq(Te)}function _D(Te){for(var Ge=Te.length;Ge--&&jB.test(Te.charAt(Ge)););return Ge}var Xq=O9(Sq);function Yq(Te){for(var Ge=$9.lastIndex=0;$9.test(Te);)++Ge;return Ge}function Qq(Te){return Te.match($9)||[]}function Jq(Te){return Te.match(gq)||[]}var eW=function Te(Ge){Ge=Ge==null?Pn:Xl.defaults(Pn.Object(),Ge,Xl.pick(Pn,wq));var Ne=Ge.Array,Ct=Ge.Date,Kt=Ge.Error,xa=Ge.Function,kn=Ge.Math,Ra=Ge.Object,H9=Ge.RegExp,tW=Ge.String,Ss=Ge.TypeError,Iu=Ne.prototype,aW=xa.prototype,Yl=Ra.prototype,Lu=Ge["__core-js_shared__"],$u=aW.toString,Ia=Yl.hasOwnProperty,nW=0,gD=function(){var d=/[^.]+$/.exec(Lu&&Lu.keys&&Lu.keys.IE_PROTO||"");return d?"Symbol(src)_1."+d:""}(),Au=Yl.toString,sW=$u.call(Ra),oW=Pn._,rW=H9("^"+$u.call(Ia).replace(x9,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),Eu=aD?Ge.Buffer:a,mr=Ge.Symbol,Tu=Ge.Uint8Array,kD=Eu?Eu.allocUnsafe:a,Pu=yD(Ra.getPrototypeOf,Ra),bD=Ra.create,wD=Yl.propertyIsEnumerable,Du=Iu.splice,xD=mr?mr.isConcatSpreadable:a,Wc=mr?mr.iterator:a,ni=mr?mr.toStringTag:a,Ru=function(){try{var d=li(Ra,"defineProperty");return d({},"",{}),d}catch{}}(),iW=Ge.clearTimeout!==Pn.clearTimeout&&Ge.clearTimeout,lW=Ct&&Ct.now!==Pn.Date.now&&Ct.now,cW=Ge.setTimeout!==Pn.setTimeout&&Ge.setTimeout,Ou=kn.ceil,Vu=kn.floor,N9=Ra.getOwnPropertySymbols,dW=Eu?Eu.isBuffer:a,MD=Ge.isFinite,uW=Iu.join,pW=yD(Ra.keys,Ra),bn=kn.max,Fn=kn.min,hW=Ct.now,fW=Ge.parseInt,CD=kn.random,mW=Iu.reverse,z9=li(Ge,"DataView"),Gc=li(Ge,"Map"),B9=li(Ge,"Promise"),Ql=li(Ge,"Set"),Zc=li(Ge,"WeakMap"),Kc=li(Ra,"create"),Uu=Zc&&new Zc,Jl={},vW=ci(z9),yW=ci(Gc),_W=ci(B9),gW=ci(Ql),kW=ci(Zc),Fu=mr?mr.prototype:a,Xc=Fu?Fu.valueOf:a,SD=Fu?Fu.toString:a;function se(d){if(nn(d)&&!Xt(d)&&!(d instanceof ua)){if(d instanceof Is)return d;if(Ia.call(d,"__wrapped__"))return IR(d)}return new Is(d)}var ec=function(){function d(){}return function(y){if(!Ja(y))return{};if(bD)return bD(y);d.prototype=y;var I=new d;return d.prototype=a,I}}();function ju(){}function Is(d,y){this.__wrapped__=d,this.__actions__=[],this.__chain__=!!y,this.__index__=0,this.__values__=a}se.templateSettings={escape:Oa,evaluate:Cn,interpolate:ku,variable:"",imports:{_:se}},se.prototype=ju.prototype,se.prototype.constructor=se,Is.prototype=ec(ju.prototype),Is.prototype.constructor=Is;function ua(d){this.__wrapped__=d,this.__actions__=[],this.__dir__=1,this.__filtered__=!1,this.__iteratees__=[],this.__takeCount__=He,this.__views__=[]}function bW(){var d=new ua(this.__wrapped__);return d.__actions__=Xn(this.__actions__),d.__dir__=this.__dir__,d.__filtered__=this.__filtered__,d.__iteratees__=Xn(this.__iteratees__),d.__takeCount__=this.__takeCount__,d.__views__=Xn(this.__views__),d}function wW(){if(this.__filtered__){var d=new ua(this);d.__dir__=-1,d.__filtered__=!0}else d=this.clone(),d.__dir__*=-1;return d}function xW(){var d=this.__wrapped__.value(),y=this.__dir__,I=Xt(d),z=y<0,Z=I?d.length:0,le=RG(0,Z,this.__views__),we=le.start,Ie=le.end,De=Ie-we,Ye=z?Ie:we-1,Qe=this.__iteratees__,st=Qe.length,gt=0,It=Fn(De,this.__takeCount__);if(!I||!z&&Z==De&&It==De)return XD(d,this.__actions__);var jt=[];e:for(;De--&&gt<It;){Ye+=y;for(var na=-1,Ht=d[Ye];++na<st;){var ca=Qe[na],fa=ca.iteratee,fs=ca.type,qn=fa(Ht);if(fs==Le)Ht=qn;else if(!qn){if(fs==$e)continue e;break e}}jt[gt++]=Ht}return jt}ua.prototype=ec(ju.prototype),ua.prototype.constructor=ua;function si(d){var y=-1,I=d==null?0:d.length;for(this.clear();++y<I;){var z=d[y];this.set(z[0],z[1])}}function MW(){this.__data__=Kc?Kc(null):{},this.size=0}function CW(d){var y=this.has(d)&&delete this.__data__[d];return this.size-=y?1:0,y}function SW(d){var y=this.__data__;if(Kc){var I=y[d];return I===h?a:I}return Ia.call(y,d)?y[d]:a}function IW(d){var y=this.__data__;return Kc?y[d]!==a:Ia.call(y,d)}function LW(d,y){var I=this.__data__;return this.size+=this.has(d)?0:1,I[d]=Kc&&y===a?h:y,this}si.prototype.clear=MW,si.prototype.delete=CW,si.prototype.get=SW,si.prototype.has=IW,si.prototype.set=LW;function Oo(d){var y=-1,I=d==null?0:d.length;for(this.clear();++y<I;){var z=d[y];this.set(z[0],z[1])}}function $W(){this.__data__=[],this.size=0}function AW(d){var y=this.__data__,I=Hu(y,d);if(I<0)return!1;var z=y.length-1;return I==z?y.pop():Du.call(y,I,1),--this.size,!0}function EW(d){var y=this.__data__,I=Hu(y,d);return I<0?a:y[I][1]}function TW(d){return Hu(this.__data__,d)>-1}function PW(d,y){var I=this.__data__,z=Hu(I,d);return z<0?(++this.size,I.push([d,y])):I[z][1]=y,this}Oo.prototype.clear=$W,Oo.prototype.delete=AW,Oo.prototype.get=EW,Oo.prototype.has=TW,Oo.prototype.set=PW;function Vo(d){var y=-1,I=d==null?0:d.length;for(this.clear();++y<I;){var z=d[y];this.set(z[0],z[1])}}function DW(){this.size=0,this.__data__={hash:new si,map:new(Gc||Oo),string:new si}}function RW(d){var y=Ju(this,d).delete(d);return this.size-=y?1:0,y}function OW(d){return Ju(this,d).get(d)}function VW(d){return Ju(this,d).has(d)}function UW(d,y){var I=Ju(this,d),z=I.size;return I.set(d,y),this.size+=I.size==z?0:1,this}Vo.prototype.clear=DW,Vo.prototype.delete=RW,Vo.prototype.get=OW,Vo.prototype.has=VW,Vo.prototype.set=UW;function oi(d){var y=-1,I=d==null?0:d.length;for(this.__data__=new Vo;++y<I;)this.add(d[y])}function FW(d){return this.__data__.set(d,h),this}function jW(d){return this.__data__.has(d)}oi.prototype.add=oi.prototype.push=FW,oi.prototype.has=jW;function Qs(d){var y=this.__data__=new Oo(d);this.size=y.size}function HW(){this.__data__=new Oo,this.size=0}function NW(d){var y=this.__data__,I=y.delete(d);return this.size=y.size,I}function zW(d){return this.__data__.get(d)}function BW(d){return this.__data__.has(d)}function qW(d,y){var I=this.__data__;if(I instanceof Oo){var z=I.__data__;if(!Gc||z.length<o-1)return z.push([d,y]),this.size=++I.size,this;I=this.__data__=new Vo(z)}return I.set(d,y),this.size=I.size,this}Qs.prototype.clear=HW,Qs.prototype.delete=NW,Qs.prototype.get=zW,Qs.prototype.has=BW,Qs.prototype.set=qW;function ID(d,y){var I=Xt(d),z=!I&&di(d),Z=!I&&!z&&kr(d),le=!I&&!z&&!Z&&sc(d),we=I||z||Z||le,Ie=we?U9(d.length,tW):[],De=Ie.length;for(var Ye in d)(y||Ia.call(d,Ye))&&!(we&&(Ye=="length"||Z&&(Ye=="offset"||Ye=="parent")||le&&(Ye=="buffer"||Ye=="byteLength"||Ye=="byteOffset")||Ho(Ye,De)))&&Ie.push(Ye);return Ie}function LD(d){var y=d.length;return y?d[t$(0,y-1)]:a}function WW(d,y){return e1(Xn(d),ri(y,0,d.length))}function GW(d){return e1(Xn(d))}function q9(d,y,I){(I!==a&&!Js(d[y],I)||I===a&&!(y in d))&&Uo(d,y,I)}function Yc(d,y,I){var z=d[y];(!(Ia.call(d,y)&&Js(z,I))||I===a&&!(y in d))&&Uo(d,y,I)}function Hu(d,y){for(var I=d.length;I--;)if(Js(d[I][0],y))return I;return-1}function ZW(d,y,I,z){return vr(d,function(Z,le,we){y(z,Z,I(Z),we)}),z}function $D(d,y){return d&&po(y,Sn(y),d)}function KW(d,y){return d&&po(y,Qn(y),d)}function Uo(d,y,I){y=="__proto__"&&Ru?Ru(d,y,{configurable:!0,enumerable:!0,value:I,writable:!0}):d[y]=I}function W9(d,y){for(var I=-1,z=y.length,Z=Ne(z),le=d==null;++I<z;)Z[I]=le?a:S$(d,y[I]);return Z}function ri(d,y,I){return d===d&&(I!==a&&(d=d<=I?d:I),y!==a&&(d=d>=y?d:y)),d}function Ls(d,y,I,z,Z,le){var we,Ie=y&b,De=y&x,Ye=y&w;if(I&&(we=Z?I(d,z,Z,le):I(d)),we!==a)return we;if(!Ja(d))return d;var Qe=Xt(d);if(Qe){if(we=VG(d),!Ie)return Xn(d,we)}else{var st=jn(d),gt=st==pe||st==H;if(kr(d))return JD(d,Ie);if(st==Se||st==ft||gt&&!Z){if(we=De||gt?{}:_R(d),!Ie)return De?SG(d,KW(we,d)):CG(d,$D(we,d))}else{if(!Va[st])return Z?d:{};we=UG(d,st,Ie)}}le||(le=new Qs);var It=le.get(d);if(It)return It;le.set(d,we),GR(d)?d.forEach(function(Ht){we.add(Ls(Ht,y,I,Ht,d,le))}):qR(d)&&d.forEach(function(Ht,ca){we.set(ca,Ls(Ht,y,I,ca,d,le))});var jt=Ye?De?p$:u$:De?Qn:Sn,na=Qe?a:jt(d);return Cs(na||d,function(Ht,ca){na&&(ca=Ht,Ht=d[ca]),Yc(we,ca,Ls(Ht,y,I,ca,d,le))}),we}function XW(d){var y=Sn(d);return function(I){return AD(I,d,y)}}function AD(d,y,I){var z=I.length;if(d==null)return!z;for(d=Ra(d);z--;){var Z=I[z],le=y[Z],we=d[Z];if(we===a&&!(Z in d)||!le(we))return!1}return!0}function ED(d,y,I){if(typeof d!="function")throw new Ss(i);return sd(function(){d.apply(a,I)},y)}function Qc(d,y,I,z){var Z=-1,le=Mu,we=!0,Ie=d.length,De=[],Ye=y.length;if(!Ie)return De;I&&(y=Ka(y,us(I))),z?(le=T9,we=!1):y.length>=o&&(le=qc,we=!1,y=new oi(y));e:for(;++Z<Ie;){var Qe=d[Z],st=I==null?Qe:I(Qe);if(Qe=z||Qe!==0?Qe:0,we&&st===st){for(var gt=Ye;gt--;)if(y[gt]===st)continue e;De.push(Qe)}else le(y,st,z)||De.push(Qe)}return De}var vr=sR(uo),TD=sR(Z9,!0);function YW(d,y){var I=!0;return vr(d,function(z,Z,le){return I=!!y(z,Z,le),I}),I}function Nu(d,y,I){for(var z=-1,Z=d.length;++z<Z;){var le=d[z],we=y(le);if(we!=null&&(Ie===a?we===we&&!hs(we):I(we,Ie)))var Ie=we,De=le}return De}function QW(d,y,I,z){var Z=d.length;for(I=ea(I),I<0&&(I=-I>Z?0:Z+I),z=z===a||z>Z?Z:ea(z),z<0&&(z+=Z),z=I>z?0:KR(z);I<z;)d[I++]=y;return d}function PD(d,y){var I=[];return vr(d,function(z,Z,le){y(z,Z,le)&&I.push(z)}),I}function Dn(d,y,I,z,Z){var le=-1,we=d.length;for(I||(I=jG),Z||(Z=[]);++le<we;){var Ie=d[le];y>0&&I(Ie)?y>1?Dn(Ie,y-1,I,z,Z):hr(Z,Ie):z||(Z[Z.length]=Ie)}return Z}var G9=oR(),DD=oR(!0);function uo(d,y){return d&&G9(d,y,Sn)}function Z9(d,y){return d&&DD(d,y,Sn)}function zu(d,y){return pr(y,function(I){return No(d[I])})}function ii(d,y){y=_r(y,d);for(var I=0,z=y.length;d!=null&&I<z;)d=d[ho(y[I++])];return I&&I==z?d:a}function RD(d,y,I){var z=y(d);return Xt(d)?z:hr(z,I(d))}function zn(d){return d==null?d===a?yt:he:ni&&ni in Ra(d)?DG(d):GG(d)}function K9(d,y){return d>y}function JW(d,y){return d!=null&&Ia.call(d,y)}function eG(d,y){return d!=null&&y in Ra(d)}function tG(d,y,I){return d>=Fn(y,I)&&d<bn(y,I)}function X9(d,y,I){for(var z=I?T9:Mu,Z=d[0].length,le=d.length,we=le,Ie=Ne(le),De=1/0,Ye=[];we--;){var Qe=d[we];we&&y&&(Qe=Ka(Qe,us(y))),De=Fn(Qe.length,De),Ie[we]=!I&&(y||Z>=120&&Qe.length>=120)?new oi(we&&Qe):a}Qe=d[0];var st=-1,gt=Ie[0];e:for(;++st<Z&&Ye.length<De;){var It=Qe[st],jt=y?y(It):It;if(It=I||It!==0?It:0,!(gt?qc(gt,jt):z(Ye,jt,I))){for(we=le;--we;){var na=Ie[we];if(!(na?qc(na,jt):z(d[we],jt,I)))continue e}gt&&gt.push(jt),Ye.push(It)}}return Ye}function aG(d,y,I,z){return uo(d,function(Z,le,we){y(z,I(Z),le,we)}),z}function Jc(d,y,I){y=_r(y,d),d=wR(d,y);var z=d==null?d:d[ho(As(y))];return z==null?a:ds(z,d,I)}function OD(d){return nn(d)&&zn(d)==ft}function nG(d){return nn(d)&&zn(d)==Ue}function sG(d){return nn(d)&&zn(d)==ie}function ed(d,y,I,z,Z){return d===y?!0:d==null||y==null||!nn(d)&&!nn(y)?d!==d&&y!==y:oG(d,y,I,z,ed,Z)}function oG(d,y,I,z,Z,le){var we=Xt(d),Ie=Xt(y),De=we?kt:jn(d),Ye=Ie?kt:jn(y);De=De==ft?Se:De,Ye=Ye==ft?Se:Ye;var Qe=De==Se,st=Ye==Se,gt=De==Ye;if(gt&&kr(d)){if(!kr(y))return!1;we=!0,Qe=!1}if(gt&&!Qe)return le||(le=new Qs),we||sc(d)?mR(d,y,I,z,Z,le):TG(d,y,De,I,z,Z,le);if(!(I&$)){var It=Qe&&Ia.call(d,"__wrapped__"),jt=st&&Ia.call(y,"__wrapped__");if(It||jt){var na=It?d.value():d,Ht=jt?y.value():y;return le||(le=new Qs),Z(na,Ht,I,z,le)}}return gt?(le||(le=new Qs),PG(d,y,I,z,Z,le)):!1}function rG(d){return nn(d)&&jn(d)==N}function Y9(d,y,I,z){var Z=I.length,le=Z,we=!z;if(d==null)return!le;for(d=Ra(d);Z--;){var Ie=I[Z];if(we&&Ie[2]?Ie[1]!==d[Ie[0]]:!(Ie[0]in d))return!1}for(;++Z<le;){Ie=I[Z];var De=Ie[0],Ye=d[De],Qe=Ie[1];if(we&&Ie[2]){if(Ye===a&&!(De in d))return!1}else{var st=new Qs;if(z)var gt=z(Ye,Qe,De,d,y,st);if(!(gt===a?ed(Qe,Ye,$|D,z,st):gt))return!1}}return!0}function VD(d){if(!Ja(d)||NG(d))return!1;var y=No(d)?rW:XB;return y.test(ci(d))}function iG(d){return nn(d)&&zn(d)==ze}function lG(d){return nn(d)&&jn(d)==qe}function cG(d){return nn(d)&&r1(d.length)&&!!Ha[zn(d)]}function UD(d){return typeof d=="function"?d:d==null?Jn:typeof d=="object"?Xt(d)?HD(d[0],d[1]):jD(d):rO(d)}function Q9(d){if(!nd(d))return pW(d);var y=[];for(var I in Ra(d))Ia.call(d,I)&&I!="constructor"&&y.push(I);return y}function dG(d){if(!Ja(d))return WG(d);var y=nd(d),I=[];for(var z in d)z=="constructor"&&(y||!Ia.call(d,z))||I.push(z);return I}function J9(d,y){return d<y}function FD(d,y){var I=-1,z=Yn(d)?Ne(d.length):[];return vr(d,function(Z,le,we){z[++I]=y(Z,le,we)}),z}function jD(d){var y=f$(d);return y.length==1&&y[0][2]?kR(y[0][0],y[0][1]):function(I){return I===d||Y9(I,d,y)}}function HD(d,y){return v$(d)&&gR(y)?kR(ho(d),y):function(I){var z=S$(I,d);return z===a&&z===y?I$(I,d):ed(y,z,$|D)}}function Bu(d,y,I,z,Z){d!==y&&G9(y,function(le,we){if(Z||(Z=new Qs),Ja(le))uG(d,y,we,I,Bu,z,Z);else{var Ie=z?z(_$(d,we),le,we+"",d,y,Z):a;Ie===a&&(Ie=le),q9(d,we,Ie)}},Qn)}function uG(d,y,I,z,Z,le,we){var Ie=_$(d,I),De=_$(y,I),Ye=we.get(De);if(Ye){q9(d,I,Ye);return}var Qe=le?le(Ie,De,I+"",d,y,we):a,st=Qe===a;if(st){var gt=Xt(De),It=!gt&&kr(De),jt=!gt&&!It&&sc(De);Qe=De,gt||It||jt?Xt(Ie)?Qe=Ie:un(Ie)?Qe=Xn(Ie):It?(st=!1,Qe=JD(De,!0)):jt?(st=!1,Qe=eR(De,!0)):Qe=[]:od(De)||di(De)?(Qe=Ie,di(Ie)?Qe=XR(Ie):(!Ja(Ie)||No(Ie))&&(Qe=_R(De))):st=!1}st&&(we.set(De,Qe),Z(Qe,De,z,le,we),we.delete(De)),q9(d,I,Qe)}function ND(d,y){var I=d.length;if(I)return y+=y<0?I:0,Ho(y,I)?d[y]:a}function zD(d,y,I){y.length?y=Ka(y,function(le){return Xt(le)?function(we){return ii(we,le.length===1?le[0]:le)}:le}):y=[Jn];var z=-1;y=Ka(y,us(Vt()));var Z=FD(d,function(le,we,Ie){var De=Ka(y,function(Ye){return Ye(le)});return{criteria:De,index:++z,value:le}});return Uq(Z,function(le,we){return MG(le,we,I)})}function pG(d,y){return BD(d,y,function(I,z){return I$(d,z)})}function BD(d,y,I){for(var z=-1,Z=y.length,le={};++z<Z;){var we=y[z],Ie=ii(d,we);I(Ie,we)&&td(le,_r(we,d),Ie)}return le}function hG(d){return function(y){return ii(y,d)}}function e$(d,y,I,z){var Z=z?Vq:Gl,le=-1,we=y.length,Ie=d;for(d===y&&(y=Xn(y)),I&&(Ie=Ka(d,us(I)));++le<we;)for(var De=0,Ye=y[le],Qe=I?I(Ye):Ye;(De=Z(Ie,Qe,De,z))>-1;)Ie!==d&&Du.call(Ie,De,1),Du.call(d,De,1);return d}function qD(d,y){for(var I=d?y.length:0,z=I-1;I--;){var Z=y[I];if(I==z||Z!==le){var le=Z;Ho(Z)?Du.call(d,Z,1):s$(d,Z)}}return d}function t$(d,y){return d+Vu(CD()*(y-d+1))}function fG(d,y,I,z){for(var Z=-1,le=bn(Ou((y-d)/(I||1)),0),we=Ne(le);le--;)we[z?le:++Z]=d,d+=I;return we}function a$(d,y){var I="";if(!d||y<1||y>G)return I;do y%2&&(I+=d),y=Vu(y/2),y&&(d+=d);while(y);return I}function ra(d,y){return g$(bR(d,y,Jn),d+"")}function mG(d){return LD(oc(d))}function vG(d,y){var I=oc(d);return e1(I,ri(y,0,I.length))}function td(d,y,I,z){if(!Ja(d))return d;y=_r(y,d);for(var Z=-1,le=y.length,we=le-1,Ie=d;Ie!=null&&++Z<le;){var De=ho(y[Z]),Ye=I;if(De==="__proto__"||De==="constructor"||De==="prototype")return d;if(Z!=we){var Qe=Ie[De];Ye=z?z(Qe,De,Ie):a,Ye===a&&(Ye=Ja(Qe)?Qe:Ho(y[Z+1])?[]:{})}Yc(Ie,De,Ye),Ie=Ie[De]}return d}var WD=Uu?function(d,y){return Uu.set(d,y),d}:Jn,yG=Ru?function(d,y){return Ru(d,"toString",{configurable:!0,enumerable:!1,value:$$(y),writable:!0})}:Jn;function _G(d){return e1(oc(d))}function $s(d,y,I){var z=-1,Z=d.length;y<0&&(y=-y>Z?0:Z+y),I=I>Z?Z:I,I<0&&(I+=Z),Z=y>I?0:I-y>>>0,y>>>=0;for(var le=Ne(Z);++z<Z;)le[z]=d[z+y];return le}function gG(d,y){var I;return vr(d,function(z,Z,le){return I=y(z,Z,le),!I}),!!I}function qu(d,y,I){var z=0,Z=d==null?z:d.length;if(typeof y=="number"&&y===y&&Z<=pt){for(;z<Z;){var le=z+Z>>>1,we=d[le];we!==null&&!hs(we)&&(I?we<=y:we<y)?z=le+1:Z=le}return Z}return n$(d,y,Jn,I)}function n$(d,y,I,z){var Z=0,le=d==null?0:d.length;if(le===0)return 0;y=I(y);for(var we=y!==y,Ie=y===null,De=hs(y),Ye=y===a;Z<le;){var Qe=Vu((Z+le)/2),st=I(d[Qe]),gt=st!==a,It=st===null,jt=st===st,na=hs(st);if(we)var Ht=z||jt;else Ye?Ht=jt&&(z||gt):Ie?Ht=jt&&gt&&(z||!It):De?Ht=jt&&gt&&!It&&(z||!na):It||na?Ht=!1:Ht=z?st<=y:st<y;Ht?Z=Qe+1:le=Qe}return Fn(le,Ke)}function GD(d,y){for(var I=-1,z=d.length,Z=0,le=[];++I<z;){var we=d[I],Ie=y?y(we):we;if(!I||!Js(Ie,De)){var De=Ie;le[Z++]=we===0?0:we}}return le}function ZD(d){return typeof d=="number"?d:hs(d)?Ee:+d}function ps(d){if(typeof d=="string")return d;if(Xt(d))return Ka(d,ps)+"";if(hs(d))return SD?SD.call(d):"";var y=d+"";return y=="0"&&1/d==-J?"-0":y}function yr(d,y,I){var z=-1,Z=Mu,le=d.length,we=!0,Ie=[],De=Ie;if(I)we=!1,Z=T9;else if(le>=o){var Ye=y?null:AG(d);if(Ye)return Su(Ye);we=!1,Z=qc,De=new oi}else De=y?[]:Ie;e:for(;++z<le;){var Qe=d[z],st=y?y(Qe):Qe;if(Qe=I||Qe!==0?Qe:0,we&&st===st){for(var gt=De.length;gt--;)if(De[gt]===st)continue e;y&&De.push(st),Ie.push(Qe)}else Z(De,st,I)||(De!==Ie&&De.push(st),Ie.push(Qe))}return Ie}function s$(d,y){return y=_r(y,d),d=wR(d,y),d==null||delete d[ho(As(y))]}function KD(d,y,I,z){return td(d,y,I(ii(d,y)),z)}function Wu(d,y,I,z){for(var Z=d.length,le=z?Z:-1;(z?le--:++le<Z)&&y(d[le],le,d););return I?$s(d,z?0:le,z?le+1:Z):$s(d,z?le+1:0,z?Z:le)}function XD(d,y){var I=d;return I instanceof ua&&(I=I.value()),P9(y,function(z,Z){return Z.func.apply(Z.thisArg,hr([z],Z.args))},I)}function o$(d,y,I){var z=d.length;if(z<2)return z?yr(d[0]):[];for(var Z=-1,le=Ne(z);++Z<z;)for(var we=d[Z],Ie=-1;++Ie<z;)Ie!=Z&&(le[Z]=Qc(le[Z]||we,d[Ie],y,I));return yr(Dn(le,1),y,I)}function YD(d,y,I){for(var z=-1,Z=d.length,le=y.length,we={};++z<Z;){var Ie=z<le?y[z]:a;I(we,d[z],Ie)}return we}function r$(d){return un(d)?d:[]}function i$(d){return typeof d=="function"?d:Jn}function _r(d,y){return Xt(d)?d:v$(d,y)?[d]:SR(Ma(d))}var kG=ra;function gr(d,y,I){var z=d.length;return I=I===a?z:I,!y&&I>=z?d:$s(d,y,I)}var QD=iW||function(d){return Pn.clearTimeout(d)};function JD(d,y){if(y)return d.slice();var I=d.length,z=kD?kD(I):new d.constructor(I);return d.copy(z),z}function l$(d){var y=new d.constructor(d.byteLength);return new Tu(y).set(new Tu(d)),y}function bG(d,y){var I=y?l$(d.buffer):d.buffer;return new d.constructor(I,d.byteOffset,d.byteLength)}function wG(d){var y=new d.constructor(d.source,OP.exec(d));return y.lastIndex=d.lastIndex,y}function xG(d){return Xc?Ra(Xc.call(d)):{}}function eR(d,y){var I=y?l$(d.buffer):d.buffer;return new d.constructor(I,d.byteOffset,d.length)}function tR(d,y){if(d!==y){var I=d!==a,z=d===null,Z=d===d,le=hs(d),we=y!==a,Ie=y===null,De=y===y,Ye=hs(y);if(!Ie&&!Ye&&!le&&d>y||le&&we&&De&&!Ie&&!Ye||z&&we&&De||!I&&De||!Z)return 1;if(!z&&!le&&!Ye&&d<y||Ye&&I&&Z&&!z&&!le||Ie&&I&&Z||!we&&Z||!De)return-1}return 0}function MG(d,y,I){for(var z=-1,Z=d.criteria,le=y.criteria,we=Z.length,Ie=I.length;++z<we;){var De=tR(Z[z],le[z]);if(De){if(z>=Ie)return De;var Ye=I[z];return De*(Ye=="desc"?-1:1)}}return d.index-y.index}function aR(d,y,I,z){for(var Z=-1,le=d.length,we=I.length,Ie=-1,De=y.length,Ye=bn(le-we,0),Qe=Ne(De+Ye),st=!z;++Ie<De;)Qe[Ie]=y[Ie];for(;++Z<we;)(st||Z<le)&&(Qe[I[Z]]=d[Z]);for(;Ye--;)Qe[Ie++]=d[Z++];return Qe}function nR(d,y,I,z){for(var Z=-1,le=d.length,we=-1,Ie=I.length,De=-1,Ye=y.length,Qe=bn(le-Ie,0),st=Ne(Qe+Ye),gt=!z;++Z<Qe;)st[Z]=d[Z];for(var It=Z;++De<Ye;)st[It+De]=y[De];for(;++we<Ie;)(gt||Z<le)&&(st[It+I[we]]=d[Z++]);return st}function Xn(d,y){var I=-1,z=d.length;for(y||(y=Ne(z));++I<z;)y[I]=d[I];return y}function po(d,y,I,z){var Z=!I;I||(I={});for(var le=-1,we=y.length;++le<we;){var Ie=y[le],De=z?z(I[Ie],d[Ie],Ie,I,d):a;De===a&&(De=d[Ie]),Z?Uo(I,Ie,De):Yc(I,Ie,De)}return I}function CG(d,y){return po(d,m$(d),y)}function SG(d,y){return po(d,vR(d),y)}function Gu(d,y){return function(I,z){var Z=Xt(I)?Eq:ZW,le=y?y():{};return Z(I,d,Vt(z,2),le)}}function tc(d){return ra(function(y,I){var z=-1,Z=I.length,le=Z>1?I[Z-1]:a,we=Z>2?I[2]:a;for(le=d.length>3&&typeof le=="function"?(Z--,le):a,we&&Bn(I[0],I[1],we)&&(le=Z<3?a:le,Z=1),y=Ra(y);++z<Z;){var Ie=I[z];Ie&&d(y,Ie,z,le)}return y})}function sR(d,y){return function(I,z){if(I==null)return I;if(!Yn(I))return d(I,z);for(var Z=I.length,le=y?Z:-1,we=Ra(I);(y?le--:++le<Z)&&z(we[le],le,we)!==!1;);return I}}function oR(d){return function(y,I,z){for(var Z=-1,le=Ra(y),we=z(y),Ie=we.length;Ie--;){var De=we[d?Ie:++Z];if(I(le[De],De,le)===!1)break}return y}}function IG(d,y,I){var z=y&V,Z=ad(d);function le(){var we=this&&this!==Pn&&this instanceof le?Z:d;return we.apply(z?I:this,arguments)}return le}function rR(d){return function(y){y=Ma(y);var I=Zl(y)?Ys(y):a,z=I?I[0]:y.charAt(0),Z=I?gr(I,1).join(""):y.slice(1);return z[d]()+Z}}function ac(d){return function(y){return P9(sO(nO(y).replace(yq,"")),d,"")}}function ad(d){return function(){var y=arguments;switch(y.length){case 0:return new d;case 1:return new d(y[0]);case 2:return new d(y[0],y[1]);case 3:return new d(y[0],y[1],y[2]);case 4:return new d(y[0],y[1],y[2],y[3]);case 5:return new d(y[0],y[1],y[2],y[3],y[4]);case 6:return new d(y[0],y[1],y[2],y[3],y[4],y[5]);case 7:return new d(y[0],y[1],y[2],y[3],y[4],y[5],y[6])}var I=ec(d.prototype),z=d.apply(I,y);return Ja(z)?z:I}}function LG(d,y,I){var z=ad(d);function Z(){for(var le=arguments.length,we=Ne(le),Ie=le,De=nc(Z);Ie--;)we[Ie]=arguments[Ie];var Ye=le<3&&we[0]!==De&&we[le-1]!==De?[]:fr(we,De);if(le-=Ye.length,le<I)return uR(d,y,Zu,Z.placeholder,a,we,Ye,a,a,I-le);var Qe=this&&this!==Pn&&this instanceof Z?z:d;return ds(Qe,this,we)}return Z}function iR(d){return function(y,I,z){var Z=Ra(y);if(!Yn(y)){var le=Vt(I,3);y=Sn(y),I=function(Ie){return le(Z[Ie],Ie,Z)}}var we=d(y,I,z);return we>-1?Z[le?y[we]:we]:a}}function lR(d){return jo(function(y){var I=y.length,z=I,Z=Is.prototype.thru;for(d&&y.reverse();z--;){var le=y[z];if(typeof le!="function")throw new Ss(i);if(Z&&!we&&Qu(le)=="wrapper")var we=new Is([],!0)}for(z=we?z:I;++z<I;){le=y[z];var Ie=Qu(le),De=Ie=="wrapper"?h$(le):a;De&&y$(De[0])&&De[1]==(g|P|C|v)&&!De[4].length&&De[9]==1?we=we[Qu(De[0])].apply(we,De[3]):we=le.length==1&&y$(le)?we[Ie]():we.thru(le)}return function(){var Ye=arguments,Qe=Ye[0];if(we&&Ye.length==1&&Xt(Qe))return we.plant(Qe).value();for(var st=0,gt=I?y[st].apply(this,Ye):Qe;++st<I;)gt=y[st].call(this,gt);return gt}})}function Zu(d,y,I,z,Z,le,we,Ie,De,Ye){var Qe=y&g,st=y&V,gt=y&R,It=y&(P|S),jt=y&T,na=gt?a:ad(d);function Ht(){for(var ca=arguments.length,fa=Ne(ca),fs=ca;fs--;)fa[fs]=arguments[fs];if(It)var qn=nc(Ht),ms=jq(fa,qn);if(z&&(fa=aR(fa,z,Z,It)),le&&(fa=nR(fa,le,we,It)),ca-=ms,It&&ca<Ye){var pn=fr(fa,qn);return uR(d,y,Zu,Ht.placeholder,I,fa,pn,Ie,De,Ye-ca)}var eo=st?I:this,Bo=gt?eo[d]:d;return ca=fa.length,Ie?fa=ZG(fa,Ie):jt&&ca>1&&fa.reverse(),Qe&&De<ca&&(fa.length=De),this&&this!==Pn&&this instanceof Ht&&(Bo=na||ad(Bo)),Bo.apply(eo,fa)}return Ht}function cR(d,y){return function(I,z){return aG(I,d,y(z),{})}}function Ku(d,y){return function(I,z){var Z;if(I===a&&z===a)return y;if(I!==a&&(Z=I),z!==a){if(Z===a)return z;typeof I=="string"||typeof z=="string"?(I=ps(I),z=ps(z)):(I=ZD(I),z=ZD(z)),Z=d(I,z)}return Z}}function c$(d){return jo(function(y){return y=Ka(y,us(Vt())),ra(function(I){var z=this;return d(y,function(Z){return ds(Z,z,I)})})})}function Xu(d,y){y=y===a?" ":ps(y);var I=y.length;if(I<2)return I?a$(y,d):y;var z=a$(y,Ou(d/Kl(y)));return Zl(y)?gr(Ys(z),0,d).join(""):z.slice(0,d)}function $G(d,y,I,z){var Z=y&V,le=ad(d);function we(){for(var Ie=-1,De=arguments.length,Ye=-1,Qe=z.length,st=Ne(Qe+De),gt=this&&this!==Pn&&this instanceof we?le:d;++Ye<Qe;)st[Ye]=z[Ye];for(;De--;)st[Ye++]=arguments[++Ie];return ds(gt,Z?I:this,st)}return we}function dR(d){return function(y,I,z){return z&&typeof z!="number"&&Bn(y,I,z)&&(I=z=a),y=zo(y),I===a?(I=y,y=0):I=zo(I),z=z===a?y<I?1:-1:zo(z),fG(y,I,z,d)}}function Yu(d){return function(y,I){return typeof y=="string"&&typeof I=="string"||(y=Es(y),I=Es(I)),d(y,I)}}function uR(d,y,I,z,Z,le,we,Ie,De,Ye){var Qe=y&P,st=Qe?we:a,gt=Qe?a:we,It=Qe?le:a,jt=Qe?a:le;y|=Qe?C:M,y&=~(Qe?M:C),y&E||(y&=~(V|R));var na=[d,y,Z,It,st,jt,gt,Ie,De,Ye],Ht=I.apply(a,na);return y$(d)&&xR(Ht,na),Ht.placeholder=z,MR(Ht,d,y)}function d$(d){var y=kn[d];return function(I,z){if(I=Es(I),z=z==null?0:Fn(ea(z),292),z&&MD(I)){var Z=(Ma(I)+"e").split("e"),le=y(Z[0]+"e"+(+Z[1]+z));return Z=(Ma(le)+"e").split("e"),+(Z[0]+"e"+(+Z[1]-z))}return y(I)}}var AG=Ql&&1/Su(new Ql([,-0]))[1]==J?function(d){return new Ql(d)}:T$;function pR(d){return function(y){var I=jn(y);return I==N?j9(y):I==qe?Gq(y):Fq(y,d(y))}}function Fo(d,y,I,z,Z,le,we,Ie){var De=y&R;if(!De&&typeof d!="function")throw new Ss(i);var Ye=z?z.length:0;if(Ye||(y&=~(C|M),z=Z=a),we=we===a?we:bn(ea(we),0),Ie=Ie===a?Ie:ea(Ie),Ye-=Z?Z.length:0,y&M){var Qe=z,st=Z;z=Z=a}var gt=De?a:h$(d),It=[d,y,I,z,Z,Qe,st,le,we,Ie];if(gt&&qG(It,gt),d=It[0],y=It[1],I=It[2],z=It[3],Z=It[4],Ie=It[9]=It[9]===a?De?0:d.length:bn(It[9]-Ye,0),!Ie&&y&(P|S)&&(y&=~(P|S)),!y||y==V)var jt=IG(d,y,I);else y==P||y==S?jt=LG(d,y,Ie):(y==C||y==(V|C))&&!Z.length?jt=$G(d,y,I,z):jt=Zu.apply(a,It);var na=gt?WD:xR;return MR(na(jt,It),d,y)}function hR(d,y,I,z){return d===a||Js(d,Yl[I])&&!Ia.call(z,I)?y:d}function fR(d,y,I,z,Z,le){return Ja(d)&&Ja(y)&&(le.set(y,d),Bu(d,y,a,fR,le),le.delete(y)),d}function EG(d){return od(d)?a:d}function mR(d,y,I,z,Z,le){var we=I&$,Ie=d.length,De=y.length;if(Ie!=De&&!(we&&De>Ie))return!1;var Ye=le.get(d),Qe=le.get(y);if(Ye&&Qe)return Ye==y&&Qe==d;var st=-1,gt=!0,It=I&D?new oi:a;for(le.set(d,y),le.set(y,d);++st<Ie;){var jt=d[st],na=y[st];if(z)var Ht=we?z(na,jt,st,y,d,le):z(jt,na,st,d,y,le);if(Ht!==a){if(Ht)continue;gt=!1;break}if(It){if(!D9(y,function(ca,fa){if(!qc(It,fa)&&(jt===ca||Z(jt,ca,I,z,le)))return It.push(fa)})){gt=!1;break}}else if(!(jt===na||Z(jt,na,I,z,le))){gt=!1;break}}return le.delete(d),le.delete(y),gt}function TG(d,y,I,z,Z,le,we){switch(I){case ht:if(d.byteLength!=y.byteLength||d.byteOffset!=y.byteOffset)return!1;d=d.buffer,y=y.buffer;case Ue:return!(d.byteLength!=y.byteLength||!le(new Tu(d),new Tu(y)));case Xe:case ie:case Q:return Js(+d,+y);case ue:return d.name==y.name&&d.message==y.message;case ze:case Be:return d==y+"";case N:var Ie=j9;case qe:var De=z&$;if(Ie||(Ie=Su),d.size!=y.size&&!De)return!1;var Ye=we.get(d);if(Ye)return Ye==y;z|=D,we.set(d,y);var Qe=mR(Ie(d),Ie(y),z,Z,le,we);return we.delete(d),Qe;case lt:if(Xc)return Xc.call(d)==Xc.call(y)}return!1}function PG(d,y,I,z,Z,le){var we=I&$,Ie=u$(d),De=Ie.length,Ye=u$(y),Qe=Ye.length;if(De!=Qe&&!we)return!1;for(var st=De;st--;){var gt=Ie[st];if(!(we?gt in y:Ia.call(y,gt)))return!1}var It=le.get(d),jt=le.get(y);if(It&&jt)return It==y&&jt==d;var na=!0;le.set(d,y),le.set(y,d);for(var Ht=we;++st<De;){gt=Ie[st];var ca=d[gt],fa=y[gt];if(z)var fs=we?z(fa,ca,gt,y,d,le):z(ca,fa,gt,d,y,le);if(!(fs===a?ca===fa||Z(ca,fa,I,z,le):fs)){na=!1;break}Ht||(Ht=gt=="constructor")}if(na&&!Ht){var qn=d.constructor,ms=y.constructor;qn!=ms&&"constructor"in d&&"constructor"in y&&!(typeof qn=="function"&&qn instanceof qn&&typeof ms=="function"&&ms instanceof ms)&&(na=!1)}return le.delete(d),le.delete(y),na}function jo(d){return g$(bR(d,a,AR),d+"")}function u$(d){return RD(d,Sn,m$)}function p$(d){return RD(d,Qn,vR)}var h$=Uu?function(d){return Uu.get(d)}:T$;function Qu(d){for(var y=d.name+"",I=Jl[y],z=Ia.call(Jl,y)?I.length:0;z--;){var Z=I[z],le=Z.func;if(le==null||le==d)return Z.name}return y}function nc(d){var y=Ia.call(se,"placeholder")?se:d;return y.placeholder}function Vt(){var d=se.iteratee||A$;return d=d===A$?UD:d,arguments.length?d(arguments[0],arguments[1]):d}function Ju(d,y){var I=d.__data__;return HG(y)?I[typeof y=="string"?"string":"hash"]:I.map}function f$(d){for(var y=Sn(d),I=y.length;I--;){var z=y[I],Z=d[z];y[I]=[z,Z,gR(Z)]}return y}function li(d,y){var I=Bq(d,y);return VD(I)?I:a}function DG(d){var y=Ia.call(d,ni),I=d[ni];try{d[ni]=a;var z=!0}catch{}var Z=Au.call(d);return z&&(y?d[ni]=I:delete d[ni]),Z}var m$=N9?function(d){return d==null?[]:(d=Ra(d),pr(N9(d),function(y){return wD.call(d,y)}))}:P$,vR=N9?function(d){for(var y=[];d;)hr(y,m$(d)),d=Pu(d);return y}:P$,jn=zn;(z9&&jn(new z9(new ArrayBuffer(1)))!=ht||Gc&&jn(new Gc)!=N||B9&&jn(B9.resolve())!=Re||Ql&&jn(new Ql)!=qe||Zc&&jn(new Zc)!=it)&&(jn=function(d){var y=zn(d),I=y==Se?d.constructor:a,z=I?ci(I):"";if(z)switch(z){case vW:return ht;case yW:return N;case _W:return Re;case gW:return qe;case kW:return it}return y});function RG(d,y,I){for(var z=-1,Z=I.length;++z<Z;){var le=I[z],we=le.size;switch(le.type){case"drop":d+=we;break;case"dropRight":y-=we;break;case"take":y=Fn(y,d+we);break;case"takeRight":d=bn(d,y-we);break}}return{start:d,end:y}}function OG(d){var y=d.match(NB);return y?y[1].split(zB):[]}function yR(d,y,I){y=_r(y,d);for(var z=-1,Z=y.length,le=!1;++z<Z;){var we=ho(y[z]);if(!(le=d!=null&&I(d,we)))break;d=d[we]}return le||++z!=Z?le:(Z=d==null?0:d.length,!!Z&&r1(Z)&&Ho(we,Z)&&(Xt(d)||di(d)))}function VG(d){var y=d.length,I=new d.constructor(y);return y&&typeof d[0]=="string"&&Ia.call(d,"index")&&(I.index=d.index,I.input=d.input),I}function _R(d){return typeof d.constructor=="function"&&!nd(d)?ec(Pu(d)):{}}function UG(d,y,I){var z=d.constructor;switch(y){case Ue:return l$(d);case Xe:case ie:return new z(+d);case ht:return bG(d,I);case Mt:case Et:case Jt:case ae:case W:case q:case ve:case te:case ne:return eR(d,I);case N:return new z;case Q:case Be:return new z(d);case ze:return wG(d);case qe:return new z;case lt:return xG(d)}}function FG(d,y){var I=y.length;if(!I)return d;var z=I-1;return y[z]=(I>1?"& ":"")+y[z],y=y.join(I>2?", ":" "),d.replace(HB,`{
+/* [wrapped with `+y+`] */
+`)}function jG(d){return Xt(d)||di(d)||!!(xD&&d&&d[xD])}function Ho(d,y){var I=typeof d;return y=y??G,!!y&&(I=="number"||I!="symbol"&&QB.test(d))&&d>-1&&d%1==0&&d<y}function Bn(d,y,I){if(!Ja(I))return!1;var z=typeof y;return(z=="number"?Yn(I)&&Ho(y,I.length):z=="string"&&y in I)?Js(I[y],d):!1}function v$(d,y){if(Xt(d))return!1;var I=typeof d;return I=="number"||I=="symbol"||I=="boolean"||d==null||hs(d)?!0:ql.test(d)||!Bc.test(d)||y!=null&&d in Ra(y)}function HG(d){var y=typeof d;return y=="string"||y=="number"||y=="symbol"||y=="boolean"?d!=="__proto__":d===null}function y$(d){var y=Qu(d),I=se[y];if(typeof I!="function"||!(y in ua.prototype))return!1;if(d===I)return!0;var z=h$(I);return!!z&&d===z[0]}function NG(d){return!!gD&&gD in d}var zG=Lu?No:D$;function nd(d){var y=d&&d.constructor,I=typeof y=="function"&&y.prototype||Yl;return d===I}function gR(d){return d===d&&!Ja(d)}function kR(d,y){return function(I){return I==null?!1:I[d]===y&&(y!==a||d in Ra(I))}}function BG(d){var y=s1(d,function(z){return I.size===m&&I.clear(),z}),I=y.cache;return y}function qG(d,y){var I=d[1],z=y[1],Z=I|z,le=Z<(V|R|g),we=z==g&&I==P||z==g&&I==v&&d[7].length<=y[8]||z==(g|v)&&y[7].length<=y[8]&&I==P;if(!(le||we))return d;z&V&&(d[2]=y[2],Z|=I&V?0:E);var Ie=y[3];if(Ie){var De=d[3];d[3]=De?aR(De,Ie,y[4]):Ie,d[4]=De?fr(d[3],p):y[4]}return Ie=y[5],Ie&&(De=d[5],d[5]=De?nR(De,Ie,y[6]):Ie,d[6]=De?fr(d[5],p):y[6]),Ie=y[7],Ie&&(d[7]=Ie),z&g&&(d[8]=d[8]==null?y[8]:Fn(d[8],y[8])),d[9]==null&&(d[9]=y[9]),d[0]=y[0],d[1]=Z,d}function WG(d){var y=[];if(d!=null)for(var I in Ra(d))y.push(I);return y}function GG(d){return Au.call(d)}function bR(d,y,I){return y=bn(y===a?d.length-1:y,0),function(){for(var z=arguments,Z=-1,le=bn(z.length-y,0),we=Ne(le);++Z<le;)we[Z]=z[y+Z];Z=-1;for(var Ie=Ne(y+1);++Z<y;)Ie[Z]=z[Z];return Ie[y]=I(we),ds(d,this,Ie)}}function wR(d,y){return y.length<2?d:ii(d,$s(y,0,-1))}function ZG(d,y){for(var I=d.length,z=Fn(y.length,I),Z=Xn(d);z--;){var le=y[z];d[z]=Ho(le,I)?Z[le]:a}return d}function _$(d,y){if(!(y==="constructor"&&typeof d[y]=="function")&&y!="__proto__")return d[y]}var xR=CR(WD),sd=cW||function(d,y){return Pn.setTimeout(d,y)},g$=CR(yG);function MR(d,y,I){var z=y+"";return g$(d,FG(z,KG(OG(z),I)))}function CR(d){var y=0,I=0;return function(){var z=hW(),Z=be-(z-I);if(I=z,Z>0){if(++y>=oe)return arguments[0]}else y=0;return d.apply(a,arguments)}}function e1(d,y){var I=-1,z=d.length,Z=z-1;for(y=y===a?z:y;++I<y;){var le=t$(I,Z),we=d[le];d[le]=d[I],d[I]=we}return d.length=y,d}var SR=BG(function(d){var y=[];return d.charCodeAt(0)===46&&y.push(""),d.replace(UB,function(I,z,Z,le){y.push(Z?le.replace(WB,"$1"):z||I)}),y});function ho(d){if(typeof d=="string"||hs(d))return d;var y=d+"";return y=="0"&&1/d==-J?"-0":y}function ci(d){if(d!=null){try{return $u.call(d)}catch{}try{return d+""}catch{}}return""}function KG(d,y){return Cs(ut,function(I){var z="_."+I[0];y&I[1]&&!Mu(d,z)&&d.push(z)}),d.sort()}function IR(d){if(d instanceof ua)return d.clone();var y=new Is(d.__wrapped__,d.__chain__);return y.__actions__=Xn(d.__actions__),y.__index__=d.__index__,y.__values__=d.__values__,y}function XG(d,y,I){(I?Bn(d,y,I):y===a)?y=1:y=bn(ea(y),0);var z=d==null?0:d.length;if(!z||y<1)return[];for(var Z=0,le=0,we=Ne(Ou(z/y));Z<z;)we[le++]=$s(d,Z,Z+=y);return we}function YG(d){for(var y=-1,I=d==null?0:d.length,z=0,Z=[];++y<I;){var le=d[y];le&&(Z[z++]=le)}return Z}function QG(){var d=arguments.length;if(!d)return[];for(var y=Ne(d-1),I=arguments[0],z=d;z--;)y[z-1]=arguments[z];return hr(Xt(I)?Xn(I):[I],Dn(y,1))}var JG=ra(function(d,y){return un(d)?Qc(d,Dn(y,1,un,!0)):[]}),eZ=ra(function(d,y){var I=As(y);return un(I)&&(I=a),un(d)?Qc(d,Dn(y,1,un,!0),Vt(I,2)):[]}),tZ=ra(function(d,y){var I=As(y);return un(I)&&(I=a),un(d)?Qc(d,Dn(y,1,un,!0),a,I):[]});function aZ(d,y,I){var z=d==null?0:d.length;return z?(y=I||y===a?1:ea(y),$s(d,y<0?0:y,z)):[]}function nZ(d,y,I){var z=d==null?0:d.length;return z?(y=I||y===a?1:ea(y),y=z-y,$s(d,0,y<0?0:y)):[]}function sZ(d,y){return d&&d.length?Wu(d,Vt(y,3),!0,!0):[]}function oZ(d,y){return d&&d.length?Wu(d,Vt(y,3),!0):[]}function rZ(d,y,I,z){var Z=d==null?0:d.length;return Z?(I&&typeof I!="number"&&Bn(d,y,I)&&(I=0,z=Z),QW(d,y,I,z)):[]}function LR(d,y,I){var z=d==null?0:d.length;if(!z)return-1;var Z=I==null?0:ea(I);return Z<0&&(Z=bn(z+Z,0)),Cu(d,Vt(y,3),Z)}function $R(d,y,I){var z=d==null?0:d.length;if(!z)return-1;var Z=z-1;return I!==a&&(Z=ea(I),Z=I<0?bn(z+Z,0):Fn(Z,z-1)),Cu(d,Vt(y,3),Z,!0)}function AR(d){var y=d==null?0:d.length;return y?Dn(d,1):[]}function iZ(d){var y=d==null?0:d.length;return y?Dn(d,J):[]}function lZ(d,y){var I=d==null?0:d.length;return I?(y=y===a?1:ea(y),Dn(d,y)):[]}function cZ(d){for(var y=-1,I=d==null?0:d.length,z={};++y<I;){var Z=d[y];z[Z[0]]=Z[1]}return z}function ER(d){return d&&d.length?d[0]:a}function dZ(d,y,I){var z=d==null?0:d.length;if(!z)return-1;var Z=I==null?0:ea(I);return Z<0&&(Z=bn(z+Z,0)),Gl(d,y,Z)}function uZ(d){var y=d==null?0:d.length;return y?$s(d,0,-1):[]}var pZ=ra(function(d){var y=Ka(d,r$);return y.length&&y[0]===d[0]?X9(y):[]}),hZ=ra(function(d){var y=As(d),I=Ka(d,r$);return y===As(I)?y=a:I.pop(),I.length&&I[0]===d[0]?X9(I,Vt(y,2)):[]}),fZ=ra(function(d){var y=As(d),I=Ka(d,r$);return y=typeof y=="function"?y:a,y&&I.pop(),I.length&&I[0]===d[0]?X9(I,a,y):[]});function mZ(d,y){return d==null?"":uW.call(d,y)}function As(d){var y=d==null?0:d.length;return y?d[y-1]:a}function vZ(d,y,I){var z=d==null?0:d.length;if(!z)return-1;var Z=z;return I!==a&&(Z=ea(I),Z=Z<0?bn(z+Z,0):Fn(Z,z-1)),y===y?Kq(d,y,Z):Cu(d,uD,Z,!0)}function yZ(d,y){return d&&d.length?ND(d,ea(y)):a}var _Z=ra(TR);function TR(d,y){return d&&d.length&&y&&y.length?e$(d,y):d}function gZ(d,y,I){return d&&d.length&&y&&y.length?e$(d,y,Vt(I,2)):d}function kZ(d,y,I){return d&&d.length&&y&&y.length?e$(d,y,a,I):d}var bZ=jo(function(d,y){var I=d==null?0:d.length,z=W9(d,y);return qD(d,Ka(y,function(Z){return Ho(Z,I)?+Z:Z}).sort(tR)),z});function wZ(d,y){var I=[];if(!(d&&d.length))return I;var z=-1,Z=[],le=d.length;for(y=Vt(y,3);++z<le;){var we=d[z];y(we,z,d)&&(I.push(we),Z.push(z))}return qD(d,Z),I}function k$(d){return d==null?d:mW.call(d)}function xZ(d,y,I){var z=d==null?0:d.length;return z?(I&&typeof I!="number"&&Bn(d,y,I)?(y=0,I=z):(y=y==null?0:ea(y),I=I===a?z:ea(I)),$s(d,y,I)):[]}function MZ(d,y){return qu(d,y)}function CZ(d,y,I){return n$(d,y,Vt(I,2))}function SZ(d,y){var I=d==null?0:d.length;if(I){var z=qu(d,y);if(z<I&&Js(d[z],y))return z}return-1}function IZ(d,y){return qu(d,y,!0)}function LZ(d,y,I){return n$(d,y,Vt(I,2),!0)}function $Z(d,y){var I=d==null?0:d.length;if(I){var z=qu(d,y,!0)-1;if(Js(d[z],y))return z}return-1}function AZ(d){return d&&d.length?GD(d):[]}function EZ(d,y){return d&&d.length?GD(d,Vt(y,2)):[]}function TZ(d){var y=d==null?0:d.length;return y?$s(d,1,y):[]}function PZ(d,y,I){return d&&d.length?(y=I||y===a?1:ea(y),$s(d,0,y<0?0:y)):[]}function DZ(d,y,I){var z=d==null?0:d.length;return z?(y=I||y===a?1:ea(y),y=z-y,$s(d,y<0?0:y,z)):[]}function RZ(d,y){return d&&d.length?Wu(d,Vt(y,3),!1,!0):[]}function OZ(d,y){return d&&d.length?Wu(d,Vt(y,3)):[]}var VZ=ra(function(d){return yr(Dn(d,1,un,!0))}),UZ=ra(function(d){var y=As(d);return un(y)&&(y=a),yr(Dn(d,1,un,!0),Vt(y,2))}),FZ=ra(function(d){var y=As(d);return y=typeof y=="function"?y:a,yr(Dn(d,1,un,!0),a,y)});function jZ(d){return d&&d.length?yr(d):[]}function HZ(d,y){return d&&d.length?yr(d,Vt(y,2)):[]}function NZ(d,y){return y=typeof y=="function"?y:a,d&&d.length?yr(d,a,y):[]}function b$(d){if(!(d&&d.length))return[];var y=0;return d=pr(d,function(I){if(un(I))return y=bn(I.length,y),!0}),U9(y,function(I){return Ka(d,R9(I))})}function PR(d,y){if(!(d&&d.length))return[];var I=b$(d);return y==null?I:Ka(I,function(z){return ds(y,a,z)})}var zZ=ra(function(d,y){return un(d)?Qc(d,y):[]}),BZ=ra(function(d){return o$(pr(d,un))}),qZ=ra(function(d){var y=As(d);return un(y)&&(y=a),o$(pr(d,un),Vt(y,2))}),WZ=ra(function(d){var y=As(d);return y=typeof y=="function"?y:a,o$(pr(d,un),a,y)}),GZ=ra(b$);function ZZ(d,y){return YD(d||[],y||[],Yc)}function KZ(d,y){return YD(d||[],y||[],td)}var XZ=ra(function(d){var y=d.length,I=y>1?d[y-1]:a;return I=typeof I=="function"?(d.pop(),I):a,PR(d,I)});function DR(d){var y=se(d);return y.__chain__=!0,y}function YZ(d,y){return y(d),d}function t1(d,y){return y(d)}var QZ=jo(function(d){var y=d.length,I=y?d[0]:0,z=this.__wrapped__,Z=function(le){return W9(le,d)};return y>1||this.__actions__.length||!(z instanceof ua)||!Ho(I)?this.thru(Z):(z=z.slice(I,+I+(y?1:0)),z.__actions__.push({func:t1,args:[Z],thisArg:a}),new Is(z,this.__chain__).thru(function(le){return y&&!le.length&&le.push(a),le}))});function JZ(){return DR(this)}function eK(){return new Is(this.value(),this.__chain__)}function tK(){this.__values__===a&&(this.__values__=ZR(this.value()));var d=this.__index__>=this.__values__.length,y=d?a:this.__values__[this.__index__++];return{done:d,value:y}}function aK(){return this}function nK(d){for(var y,I=this;I instanceof ju;){var z=IR(I);z.__index__=0,z.__values__=a,y?Z.__wrapped__=z:y=z;var Z=z;I=I.__wrapped__}return Z.__wrapped__=d,y}function sK(){var d=this.__wrapped__;if(d instanceof ua){var y=d;return this.__actions__.length&&(y=new ua(this)),y=y.reverse(),y.__actions__.push({func:t1,args:[k$],thisArg:a}),new Is(y,this.__chain__)}return this.thru(k$)}function oK(){return XD(this.__wrapped__,this.__actions__)}var rK=Gu(function(d,y,I){Ia.call(d,I)?++d[I]:Uo(d,I,1)});function iK(d,y,I){var z=Xt(d)?cD:YW;return I&&Bn(d,y,I)&&(y=a),z(d,Vt(y,3))}function lK(d,y){var I=Xt(d)?pr:PD;return I(d,Vt(y,3))}var cK=iR(LR),dK=iR($R);function uK(d,y){return Dn(a1(d,y),1)}function pK(d,y){return Dn(a1(d,y),J)}function hK(d,y,I){return I=I===a?1:ea(I),Dn(a1(d,y),I)}function RR(d,y){var I=Xt(d)?Cs:vr;return I(d,Vt(y,3))}function OR(d,y){var I=Xt(d)?Tq:TD;return I(d,Vt(y,3))}var fK=Gu(function(d,y,I){Ia.call(d,I)?d[I].push(y):Uo(d,I,[y])});function mK(d,y,I,z){d=Yn(d)?d:oc(d),I=I&&!z?ea(I):0;var Z=d.length;return I<0&&(I=bn(Z+I,0)),i1(d)?I<=Z&&d.indexOf(y,I)>-1:!!Z&&Gl(d,y,I)>-1}var vK=ra(function(d,y,I){var z=-1,Z=typeof y=="function",le=Yn(d)?Ne(d.length):[];return vr(d,function(we){le[++z]=Z?ds(y,we,I):Jc(we,y,I)}),le}),yK=Gu(function(d,y,I){Uo(d,I,y)});function a1(d,y){var I=Xt(d)?Ka:FD;return I(d,Vt(y,3))}function _K(d,y,I,z){return d==null?[]:(Xt(y)||(y=y==null?[]:[y]),I=z?a:I,Xt(I)||(I=I==null?[]:[I]),zD(d,y,I))}var gK=Gu(function(d,y,I){d[I?0:1].push(y)},function(){return[[],[]]});function kK(d,y,I){var z=Xt(d)?P9:hD,Z=arguments.length<3;return z(d,Vt(y,4),I,Z,vr)}function bK(d,y,I){var z=Xt(d)?Pq:hD,Z=arguments.length<3;return z(d,Vt(y,4),I,Z,TD)}function wK(d,y){var I=Xt(d)?pr:PD;return I(d,o1(Vt(y,3)))}function xK(d){var y=Xt(d)?LD:mG;return y(d)}function MK(d,y,I){(I?Bn(d,y,I):y===a)?y=1:y=ea(y);var z=Xt(d)?WW:vG;return z(d,y)}function CK(d){var y=Xt(d)?GW:_G;return y(d)}function SK(d){if(d==null)return 0;if(Yn(d))return i1(d)?Kl(d):d.length;var y=jn(d);return y==N||y==qe?d.size:Q9(d).length}function IK(d,y,I){var z=Xt(d)?D9:gG;return I&&Bn(d,y,I)&&(y=a),z(d,Vt(y,3))}var LK=ra(function(d,y){if(d==null)return[];var I=y.length;return I>1&&Bn(d,y[0],y[1])?y=[]:I>2&&Bn(y[0],y[1],y[2])&&(y=[y[0]]),zD(d,Dn(y,1),[])}),n1=lW||function(){return Pn.Date.now()};function $K(d,y){if(typeof y!="function")throw new Ss(i);return d=ea(d),function(){if(--d<1)return y.apply(this,arguments)}}function VR(d,y,I){return y=I?a:y,y=d&&y==null?d.length:y,Fo(d,g,a,a,a,a,y)}function UR(d,y){var I;if(typeof y!="function")throw new Ss(i);return d=ea(d),function(){return--d>0&&(I=y.apply(this,arguments)),d<=1&&(y=a),I}}var w$=ra(function(d,y,I){var z=V;if(I.length){var Z=fr(I,nc(w$));z|=C}return Fo(d,z,y,I,Z)}),FR=ra(function(d,y,I){var z=V|R;if(I.length){var Z=fr(I,nc(FR));z|=C}return Fo(y,z,d,I,Z)});function jR(d,y,I){y=I?a:y;var z=Fo(d,P,a,a,a,a,a,y);return z.placeholder=jR.placeholder,z}function HR(d,y,I){y=I?a:y;var z=Fo(d,S,a,a,a,a,a,y);return z.placeholder=HR.placeholder,z}function NR(d,y,I){var z,Z,le,we,Ie,De,Ye=0,Qe=!1,st=!1,gt=!0;if(typeof d!="function")throw new Ss(i);y=Es(y)||0,Ja(I)&&(Qe=!!I.leading,st="maxWait"in I,le=st?bn(Es(I.maxWait)||0,y):le,gt="trailing"in I?!!I.trailing:gt);function It(pn){var eo=z,Bo=Z;return z=Z=a,Ye=pn,we=d.apply(Bo,eo),we}function jt(pn){return Ye=pn,Ie=sd(ca,y),Qe?It(pn):we}function na(pn){var eo=pn-De,Bo=pn-Ye,iO=y-eo;return st?Fn(iO,le-Bo):iO}function Ht(pn){var eo=pn-De,Bo=pn-Ye;return De===a||eo>=y||eo<0||st&&Bo>=le}function ca(){var pn=n1();if(Ht(pn))return fa(pn);Ie=sd(ca,na(pn))}function fa(pn){return Ie=a,gt&&z?It(pn):(z=Z=a,we)}function fs(){Ie!==a&&QD(Ie),Ye=0,z=De=Z=Ie=a}function qn(){return Ie===a?we:fa(n1())}function ms(){var pn=n1(),eo=Ht(pn);if(z=arguments,Z=this,De=pn,eo){if(Ie===a)return jt(De);if(st)return QD(Ie),Ie=sd(ca,y),It(De)}return Ie===a&&(Ie=sd(ca,y)),we}return ms.cancel=fs,ms.flush=qn,ms}var AK=ra(function(d,y){return ED(d,1,y)}),EK=ra(function(d,y,I){return ED(d,Es(y)||0,I)});function TK(d){return Fo(d,T)}function s1(d,y){if(typeof d!="function"||y!=null&&typeof y!="function")throw new Ss(i);var I=function(){var z=arguments,Z=y?y.apply(this,z):z[0],le=I.cache;if(le.has(Z))return le.get(Z);var we=d.apply(this,z);return I.cache=le.set(Z,we)||le,we};return I.cache=new(s1.Cache||Vo),I}s1.Cache=Vo;function o1(d){if(typeof d!="function")throw new Ss(i);return function(){var y=arguments;switch(y.length){case 0:return!d.call(this);case 1:return!d.call(this,y[0]);case 2:return!d.call(this,y[0],y[1]);case 3:return!d.call(this,y[0],y[1],y[2])}return!d.apply(this,y)}}function PK(d){return UR(2,d)}var DK=kG(function(d,y){y=y.length==1&&Xt(y[0])?Ka(y[0],us(Vt())):Ka(Dn(y,1),us(Vt()));var I=y.length;return ra(function(z){for(var Z=-1,le=Fn(z.length,I);++Z<le;)z[Z]=y[Z].call(this,z[Z]);return ds(d,this,z)})}),x$=ra(function(d,y){var I=fr(y,nc(x$));return Fo(d,C,a,y,I)}),zR=ra(function(d,y){var I=fr(y,nc(zR));return Fo(d,M,a,y,I)}),RK=jo(function(d,y){return Fo(d,v,a,a,a,y)});function OK(d,y){if(typeof d!="function")throw new Ss(i);return y=y===a?y:ea(y),ra(d,y)}function VK(d,y){if(typeof d!="function")throw new Ss(i);return y=y==null?0:bn(ea(y),0),ra(function(I){var z=I[y],Z=gr(I,0,y);return z&&hr(Z,z),ds(d,this,Z)})}function UK(d,y,I){var z=!0,Z=!0;if(typeof d!="function")throw new Ss(i);return Ja(I)&&(z="leading"in I?!!I.leading:z,Z="trailing"in I?!!I.trailing:Z),NR(d,y,{leading:z,maxWait:y,trailing:Z})}function FK(d){return VR(d,1)}function jK(d,y){return x$(i$(y),d)}function HK(){if(!arguments.length)return[];var d=arguments[0];return Xt(d)?d:[d]}function NK(d){return Ls(d,w)}function zK(d,y){return y=typeof y=="function"?y:a,Ls(d,w,y)}function BK(d){return Ls(d,b|w)}function qK(d,y){return y=typeof y=="function"?y:a,Ls(d,b|w,y)}function WK(d,y){return y==null||AD(d,y,Sn(y))}function Js(d,y){return d===y||d!==d&&y!==y}var GK=Yu(K9),ZK=Yu(function(d,y){return d>=y}),di=OD(function(){return arguments}())?OD:function(d){return nn(d)&&Ia.call(d,"callee")&&!wD.call(d,"callee")},Xt=Ne.isArray,KK=nD?us(nD):nG;function Yn(d){return d!=null&&r1(d.length)&&!No(d)}function un(d){return nn(d)&&Yn(d)}function XK(d){return d===!0||d===!1||nn(d)&&zn(d)==Xe}var kr=dW||D$,YK=sD?us(sD):sG;function QK(d){return nn(d)&&d.nodeType===1&&!od(d)}function JK(d){if(d==null)return!0;if(Yn(d)&&(Xt(d)||typeof d=="string"||typeof d.splice=="function"||kr(d)||sc(d)||di(d)))return!d.length;var y=jn(d);if(y==N||y==qe)return!d.size;if(nd(d))return!Q9(d).length;for(var I in d)if(Ia.call(d,I))return!1;return!0}function eX(d,y){return ed(d,y)}function tX(d,y,I){I=typeof I=="function"?I:a;var z=I?I(d,y):a;return z===a?ed(d,y,a,I):!!z}function M$(d){if(!nn(d))return!1;var y=zn(d);return y==ue||y==Y||typeof d.message=="string"&&typeof d.name=="string"&&!od(d)}function aX(d){return typeof d=="number"&&MD(d)}function No(d){if(!Ja(d))return!1;var y=zn(d);return y==pe||y==H||y==Ae||y==Ze}function BR(d){return typeof d=="number"&&d==ea(d)}function r1(d){return typeof d=="number"&&d>-1&&d%1==0&&d<=G}function Ja(d){var y=typeof d;return d!=null&&(y=="object"||y=="function")}function nn(d){return d!=null&&typeof d=="object"}var qR=oD?us(oD):rG;function nX(d,y){return d===y||Y9(d,y,f$(y))}function sX(d,y,I){return I=typeof I=="function"?I:a,Y9(d,y,f$(y),I)}function oX(d){return WR(d)&&d!=+d}function rX(d){if(zG(d))throw new Kt(r);return VD(d)}function iX(d){return d===null}function lX(d){return d==null}function WR(d){return typeof d=="number"||nn(d)&&zn(d)==Q}function od(d){if(!nn(d)||zn(d)!=Se)return!1;var y=Pu(d);if(y===null)return!0;var I=Ia.call(y,"constructor")&&y.constructor;return typeof I=="function"&&I instanceof I&&$u.call(I)==sW}var C$=rD?us(rD):iG;function cX(d){return BR(d)&&d>=-G&&d<=G}var GR=iD?us(iD):lG;function i1(d){return typeof d=="string"||!Xt(d)&&nn(d)&&zn(d)==Be}function hs(d){return typeof d=="symbol"||nn(d)&&zn(d)==lt}var sc=lD?us(lD):cG;function dX(d){return d===a}function uX(d){return nn(d)&&jn(d)==it}function pX(d){return nn(d)&&zn(d)==Pe}var hX=Yu(J9),fX=Yu(function(d,y){return d<=y});function ZR(d){if(!d)return[];if(Yn(d))return i1(d)?Ys(d):Xn(d);if(Wc&&d[Wc])return Wq(d[Wc]());var y=jn(d),I=y==N?j9:y==qe?Su:oc;return I(d)}function zo(d){if(!d)return d===0?d:0;if(d=Es(d),d===J||d===-J){var y=d<0?-1:1;return y*ce}return d===d?d:0}function ea(d){var y=zo(d),I=y%1;return y===y?I?y-I:y:0}function KR(d){return d?ri(ea(d),0,He):0}function Es(d){if(typeof d=="number")return d;if(hs(d))return Ee;if(Ja(d)){var y=typeof d.valueOf=="function"?d.valueOf():d;d=Ja(y)?y+"":y}if(typeof d!="string")return d===0?d:+d;d=fD(d);var I=KB.test(d);return I||YB.test(d)?$q(d.slice(2),I?2:8):ZB.test(d)?Ee:+d}function XR(d){return po(d,Qn(d))}function mX(d){return d?ri(ea(d),-G,G):d===0?d:0}function Ma(d){return d==null?"":ps(d)}var vX=tc(function(d,y){if(nd(y)||Yn(y)){po(y,Sn(y),d);return}for(var I in y)Ia.call(y,I)&&Yc(d,I,y[I])}),YR=tc(function(d,y){po(y,Qn(y),d)}),l1=tc(function(d,y,I,z){po(y,Qn(y),d,z)}),yX=tc(function(d,y,I,z){po(y,Sn(y),d,z)}),_X=jo(W9);function gX(d,y){var I=ec(d);return y==null?I:$D(I,y)}var kX=ra(function(d,y){d=Ra(d);var I=-1,z=y.length,Z=z>2?y[2]:a;for(Z&&Bn(y[0],y[1],Z)&&(z=1);++I<z;)for(var le=y[I],we=Qn(le),Ie=-1,De=we.length;++Ie<De;){var Ye=we[Ie],Qe=d[Ye];(Qe===a||Js(Qe,Yl[Ye])&&!Ia.call(d,Ye))&&(d[Ye]=le[Ye])}return d}),bX=ra(function(d){return d.push(a,fR),ds(QR,a,d)});function wX(d,y){return dD(d,Vt(y,3),uo)}function xX(d,y){return dD(d,Vt(y,3),Z9)}function MX(d,y){return d==null?d:G9(d,Vt(y,3),Qn)}function CX(d,y){return d==null?d:DD(d,Vt(y,3),Qn)}function SX(d,y){return d&&uo(d,Vt(y,3))}function IX(d,y){return d&&Z9(d,Vt(y,3))}function LX(d){return d==null?[]:zu(d,Sn(d))}function $X(d){return d==null?[]:zu(d,Qn(d))}function S$(d,y,I){var z=d==null?a:ii(d,y);return z===a?I:z}function AX(d,y){return d!=null&&yR(d,y,JW)}function I$(d,y){return d!=null&&yR(d,y,eG)}var EX=cR(function(d,y,I){y!=null&&typeof y.toString!="function"&&(y=Au.call(y)),d[y]=I},$$(Jn)),TX=cR(function(d,y,I){y!=null&&typeof y.toString!="function"&&(y=Au.call(y)),Ia.call(d,y)?d[y].push(I):d[y]=[I]},Vt),PX=ra(Jc);function Sn(d){return Yn(d)?ID(d):Q9(d)}function Qn(d){return Yn(d)?ID(d,!0):dG(d)}function DX(d,y){var I={};return y=Vt(y,3),uo(d,function(z,Z,le){Uo(I,y(z,Z,le),z)}),I}function RX(d,y){var I={};return y=Vt(y,3),uo(d,function(z,Z,le){Uo(I,Z,y(z,Z,le))}),I}var OX=tc(function(d,y,I){Bu(d,y,I)}),QR=tc(function(d,y,I,z){Bu(d,y,I,z)}),VX=jo(function(d,y){var I={};if(d==null)return I;var z=!1;y=Ka(y,function(le){return le=_r(le,d),z||(z=le.length>1),le}),po(d,p$(d),I),z&&(I=Ls(I,b|x|w,EG));for(var Z=y.length;Z--;)s$(I,y[Z]);return I});function UX(d,y){return JR(d,o1(Vt(y)))}var FX=jo(function(d,y){return d==null?{}:pG(d,y)});function JR(d,y){if(d==null)return{};var I=Ka(p$(d),function(z){return[z]});return y=Vt(y),BD(d,I,function(z,Z){return y(z,Z[0])})}function jX(d,y,I){y=_r(y,d);var z=-1,Z=y.length;for(Z||(Z=1,d=a);++z<Z;){var le=d==null?a:d[ho(y[z])];le===a&&(z=Z,le=I),d=No(le)?le.call(d):le}return d}function HX(d,y,I){return d==null?d:td(d,y,I)}function NX(d,y,I,z){return z=typeof z=="function"?z:a,d==null?d:td(d,y,I,z)}var eO=pR(Sn),tO=pR(Qn);function zX(d,y,I){var z=Xt(d),Z=z||kr(d)||sc(d);if(y=Vt(y,4),I==null){var le=d&&d.constructor;Z?I=z?new le:[]:Ja(d)?I=No(le)?ec(Pu(d)):{}:I={}}return(Z?Cs:uo)(d,function(we,Ie,De){return y(I,we,Ie,De)}),I}function BX(d,y){return d==null?!0:s$(d,y)}function qX(d,y,I){return d==null?d:KD(d,y,i$(I))}function WX(d,y,I,z){return z=typeof z=="function"?z:a,d==null?d:KD(d,y,i$(I),z)}function oc(d){return d==null?[]:F9(d,Sn(d))}function GX(d){return d==null?[]:F9(d,Qn(d))}function ZX(d,y,I){return I===a&&(I=y,y=a),I!==a&&(I=Es(I),I=I===I?I:0),y!==a&&(y=Es(y),y=y===y?y:0),ri(Es(d),y,I)}function KX(d,y,I){return y=zo(y),I===a?(I=y,y=0):I=zo(I),d=Es(d),tG(d,y,I)}function XX(d,y,I){if(I&&typeof I!="boolean"&&Bn(d,y,I)&&(y=I=a),I===a&&(typeof y=="boolean"?(I=y,y=a):typeof d=="boolean"&&(I=d,d=a)),d===a&&y===a?(d=0,y=1):(d=zo(d),y===a?(y=d,d=0):y=zo(y)),d>y){var z=d;d=y,y=z}if(I||d%1||y%1){var Z=CD();return Fn(d+Z*(y-d+Lq("1e-"+((Z+"").length-1))),y)}return t$(d,y)}var YX=ac(function(d,y,I){return y=y.toLowerCase(),d+(I?aO(y):y)});function aO(d){return L$(Ma(d).toLowerCase())}function nO(d){return d=Ma(d),d&&d.replace(JB,Hq).replace(_q,"")}function QX(d,y,I){d=Ma(d),y=ps(y);var z=d.length;I=I===a?z:ri(ea(I),0,z);var Z=I;return I-=y.length,I>=0&&d.slice(I,Z)==y}function JX(d){return d=Ma(d),d&&oa.test(d)?d.replace(_t,Nq):d}function eY(d){return d=Ma(d),d&&FB.test(d)?d.replace(x9,"\\$&"):d}var tY=ac(function(d,y,I){return d+(I?"-":"")+y.toLowerCase()}),aY=ac(function(d,y,I){return d+(I?" ":"")+y.toLowerCase()}),nY=rR("toLowerCase");function sY(d,y,I){d=Ma(d),y=ea(y);var z=y?Kl(d):0;if(!y||z>=y)return d;var Z=(y-z)/2;return Xu(Vu(Z),I)+d+Xu(Ou(Z),I)}function oY(d,y,I){d=Ma(d),y=ea(y);var z=y?Kl(d):0;return y&&z<y?d+Xu(y-z,I):d}function rY(d,y,I){d=Ma(d),y=ea(y);var z=y?Kl(d):0;return y&&z<y?Xu(y-z,I)+d:d}function iY(d,y,I){return I||y==null?y=0:y&&(y=+y),fW(Ma(d).replace(M9,""),y||0)}function lY(d,y,I){return(I?Bn(d,y,I):y===a)?y=1:y=ea(y),a$(Ma(d),y)}function cY(){var d=arguments,y=Ma(d[0]);return d.length<3?y:y.replace(d[1],d[2])}var dY=ac(function(d,y,I){return d+(I?"_":"")+y.toLowerCase()});function uY(d,y,I){return I&&typeof I!="number"&&Bn(d,y,I)&&(y=I=a),I=I===a?He:I>>>0,I?(d=Ma(d),d&&(typeof y=="string"||y!=null&&!C$(y))&&(y=ps(y),!y&&Zl(d))?gr(Ys(d),0,I):d.split(y,I)):[]}var pY=ac(function(d,y,I){return d+(I?" ":"")+L$(y)});function hY(d,y,I){return d=Ma(d),I=I==null?0:ri(ea(I),0,d.length),y=ps(y),d.slice(I,I+y.length)==y}function fY(d,y,I){var z=se.templateSettings;I&&Bn(d,y,I)&&(y=a),d=Ma(d),y=l1({},y,z,hR);var Z=l1({},y.imports,z.imports,hR),le=Sn(Z),we=F9(Z,le),Ie,De,Ye=0,Qe=y.interpolate||bu,st="__p += '",gt=H9((y.escape||bu).source+"|"+Qe.source+"|"+(Qe===ku?GB:bu).source+"|"+(y.evaluate||bu).source+"|$","g"),It="//# sourceURL="+(Ia.call(y,"sourceURL")?(y.sourceURL+"").replace(/\s/g," "):"lodash.templateSources["+ ++xq+"]")+`
+`;d.replace(gt,function(Ht,ca,fa,fs,qn,ms){return fa||(fa=fs),st+=d.slice(Ye,ms).replace(eq,zq),ca&&(Ie=!0,st+=`' +
+__e(`+ca+`) +
+'`),qn&&(De=!0,st+=`';
+`+qn+`;
+__p += '`),fa&&(st+=`' +
+((__t = (`+fa+`)) == null ? '' : __t) +
+'`),Ye=ms+Ht.length,Ht}),st+=`';
+`;var jt=Ia.call(y,"variable")&&y.variable;if(!jt)st=`with (obj) {
+`+st+`
+}
+`;else if(qB.test(jt))throw new Kt(u);st=(De?st.replace(ye,""):st).replace(Ve,"$1").replace(We,"$1;"),st="function("+(jt||"obj")+`) {
+`+(jt?"":`obj || (obj = {});
+`)+"var __t, __p = ''"+(Ie?", __e = _.escape":"")+(De?`, __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+`:`;
+`)+st+`return __p
+}`;var na=oO(function(){return xa(le,It+"return "+st).apply(a,we)});if(na.source=st,M$(na))throw na;return na}function mY(d){return Ma(d).toLowerCase()}function vY(d){return Ma(d).toUpperCase()}function yY(d,y,I){if(d=Ma(d),d&&(I||y===a))return fD(d);if(!d||!(y=ps(y)))return d;var z=Ys(d),Z=Ys(y),le=mD(z,Z),we=vD(z,Z)+1;return gr(z,le,we).join("")}function _Y(d,y,I){if(d=Ma(d),d&&(I||y===a))return d.slice(0,_D(d)+1);if(!d||!(y=ps(y)))return d;var z=Ys(d),Z=vD(z,Ys(y))+1;return gr(z,0,Z).join("")}function gY(d,y,I){if(d=Ma(d),d&&(I||y===a))return d.replace(M9,"");if(!d||!(y=ps(y)))return d;var z=Ys(d),Z=mD(z,Ys(y));return gr(z,Z).join("")}function kY(d,y){var I=j,z=B;if(Ja(y)){var Z="separator"in y?y.separator:Z;I="length"in y?ea(y.length):I,z="omission"in y?ps(y.omission):z}d=Ma(d);var le=d.length;if(Zl(d)){var we=Ys(d);le=we.length}if(I>=le)return d;var Ie=I-Kl(z);if(Ie<1)return z;var De=we?gr(we,0,Ie).join(""):d.slice(0,Ie);if(Z===a)return De+z;if(we&&(Ie+=De.length-Ie),C$(Z)){if(d.slice(Ie).search(Z)){var Ye,Qe=De;for(Z.global||(Z=H9(Z.source,Ma(OP.exec(Z))+"g")),Z.lastIndex=0;Ye=Z.exec(Qe);)var st=Ye.index;De=De.slice(0,st===a?Ie:st)}}else if(d.indexOf(ps(Z),Ie)!=Ie){var gt=De.lastIndexOf(Z);gt>-1&&(De=De.slice(0,gt))}return De+z}function bY(d){return d=Ma(d),d&&Wt.test(d)?d.replace(ga,Xq):d}var wY=ac(function(d,y,I){return d+(I?" ":"")+y.toUpperCase()}),L$=rR("toUpperCase");function sO(d,y,I){return d=Ma(d),y=I?a:y,y===a?qq(d)?Jq(d):Oq(d):d.match(y)||[]}var oO=ra(function(d,y){try{return ds(d,a,y)}catch(I){return M$(I)?I:new Kt(I)}}),xY=jo(function(d,y){return Cs(y,function(I){I=ho(I),Uo(d,I,w$(d[I],d))}),d});function MY(d){var y=d==null?0:d.length,I=Vt();return d=y?Ka(d,function(z){if(typeof z[1]!="function")throw new Ss(i);return[I(z[0]),z[1]]}):[],ra(function(z){for(var Z=-1;++Z<y;){var le=d[Z];if(ds(le[0],this,z))return ds(le[1],this,z)}})}function CY(d){return XW(Ls(d,b))}function $$(d){return function(){return d}}function SY(d,y){return d==null||d!==d?y:d}var IY=lR(),LY=lR(!0);function Jn(d){return d}function A$(d){return UD(typeof d=="function"?d:Ls(d,b))}function $Y(d){return jD(Ls(d,b))}function AY(d,y){return HD(d,Ls(y,b))}var EY=ra(function(d,y){return function(I){return Jc(I,d,y)}}),TY=ra(function(d,y){return function(I){return Jc(d,I,y)}});function E$(d,y,I){var z=Sn(y),Z=zu(y,z);I==null&&!(Ja(y)&&(Z.length||!z.length))&&(I=y,y=d,d=this,Z=zu(y,Sn(y)));var le=!(Ja(I)&&"chain"in I)||!!I.chain,we=No(d);return Cs(Z,function(Ie){var De=y[Ie];d[Ie]=De,we&&(d.prototype[Ie]=function(){var Ye=this.__chain__;if(le||Ye){var Qe=d(this.__wrapped__),st=Qe.__actions__=Xn(this.__actions__);return st.push({func:De,args:arguments,thisArg:d}),Qe.__chain__=Ye,Qe}return De.apply(d,hr([this.value()],arguments))})}),d}function PY(){return Pn._===this&&(Pn._=oW),this}function T$(){}function DY(d){return d=ea(d),ra(function(y){return ND(y,d)})}var RY=c$(Ka),OY=c$(cD),VY=c$(D9);function rO(d){return v$(d)?R9(ho(d)):hG(d)}function UY(d){return function(y){return d==null?a:ii(d,y)}}var FY=dR(),jY=dR(!0);function P$(){return[]}function D$(){return!1}function HY(){return{}}function NY(){return""}function zY(){return!0}function BY(d,y){if(d=ea(d),d<1||d>G)return[];var I=He,z=Fn(d,He);y=Vt(y),d-=He;for(var Z=U9(z,y);++I<d;)y(I);return Z}function qY(d){return Xt(d)?Ka(d,ho):hs(d)?[d]:Xn(SR(Ma(d)))}function WY(d){var y=++nW;return Ma(d)+y}var GY=Ku(function(d,y){return d+y},0),ZY=d$("ceil"),KY=Ku(function(d,y){return d/y},1),XY=d$("floor");function YY(d){return d&&d.length?Nu(d,Jn,K9):a}function QY(d,y){return d&&d.length?Nu(d,Vt(y,2),K9):a}function JY(d){return pD(d,Jn)}function eQ(d,y){return pD(d,Vt(y,2))}function tQ(d){return d&&d.length?Nu(d,Jn,J9):a}function aQ(d,y){return d&&d.length?Nu(d,Vt(y,2),J9):a}var nQ=Ku(function(d,y){return d*y},1),sQ=d$("round"),oQ=Ku(function(d,y){return d-y},0);function rQ(d){return d&&d.length?V9(d,Jn):0}function iQ(d,y){return d&&d.length?V9(d,Vt(y,2)):0}return se.after=$K,se.ary=VR,se.assign=vX,se.assignIn=YR,se.assignInWith=l1,se.assignWith=yX,se.at=_X,se.before=UR,se.bind=w$,se.bindAll=xY,se.bindKey=FR,se.castArray=HK,se.chain=DR,se.chunk=XG,se.compact=YG,se.concat=QG,se.cond=MY,se.conforms=CY,se.constant=$$,se.countBy=rK,se.create=gX,se.curry=jR,se.curryRight=HR,se.debounce=NR,se.defaults=kX,se.defaultsDeep=bX,se.defer=AK,se.delay=EK,se.difference=JG,se.differenceBy=eZ,se.differenceWith=tZ,se.drop=aZ,se.dropRight=nZ,se.dropRightWhile=sZ,se.dropWhile=oZ,se.fill=rZ,se.filter=lK,se.flatMap=uK,se.flatMapDeep=pK,se.flatMapDepth=hK,se.flatten=AR,se.flattenDeep=iZ,se.flattenDepth=lZ,se.flip=TK,se.flow=IY,se.flowRight=LY,se.fromPairs=cZ,se.functions=LX,se.functionsIn=$X,se.groupBy=fK,se.initial=uZ,se.intersection=pZ,se.intersectionBy=hZ,se.intersectionWith=fZ,se.invert=EX,se.invertBy=TX,se.invokeMap=vK,se.iteratee=A$,se.keyBy=yK,se.keys=Sn,se.keysIn=Qn,se.map=a1,se.mapKeys=DX,se.mapValues=RX,se.matches=$Y,se.matchesProperty=AY,se.memoize=s1,se.merge=OX,se.mergeWith=QR,se.method=EY,se.methodOf=TY,se.mixin=E$,se.negate=o1,se.nthArg=DY,se.omit=VX,se.omitBy=UX,se.once=PK,se.orderBy=_K,se.over=RY,se.overArgs=DK,se.overEvery=OY,se.overSome=VY,se.partial=x$,se.partialRight=zR,se.partition=gK,se.pick=FX,se.pickBy=JR,se.property=rO,se.propertyOf=UY,se.pull=_Z,se.pullAll=TR,se.pullAllBy=gZ,se.pullAllWith=kZ,se.pullAt=bZ,se.range=FY,se.rangeRight=jY,se.rearg=RK,se.reject=wK,se.remove=wZ,se.rest=OK,se.reverse=k$,se.sampleSize=MK,se.set=HX,se.setWith=NX,se.shuffle=CK,se.slice=xZ,se.sortBy=LK,se.sortedUniq=AZ,se.sortedUniqBy=EZ,se.split=uY,se.spread=VK,se.tail=TZ,se.take=PZ,se.takeRight=DZ,se.takeRightWhile=RZ,se.takeWhile=OZ,se.tap=YZ,se.throttle=UK,se.thru=t1,se.toArray=ZR,se.toPairs=eO,se.toPairsIn=tO,se.toPath=qY,se.toPlainObject=XR,se.transform=zX,se.unary=FK,se.union=VZ,se.unionBy=UZ,se.unionWith=FZ,se.uniq=jZ,se.uniqBy=HZ,se.uniqWith=NZ,se.unset=BX,se.unzip=b$,se.unzipWith=PR,se.update=qX,se.updateWith=WX,se.values=oc,se.valuesIn=GX,se.without=zZ,se.words=sO,se.wrap=jK,se.xor=BZ,se.xorBy=qZ,se.xorWith=WZ,se.zip=GZ,se.zipObject=ZZ,se.zipObjectDeep=KZ,se.zipWith=XZ,se.entries=eO,se.entriesIn=tO,se.extend=YR,se.extendWith=l1,E$(se,se),se.add=GY,se.attempt=oO,se.camelCase=YX,se.capitalize=aO,se.ceil=ZY,se.clamp=ZX,se.clone=NK,se.cloneDeep=BK,se.cloneDeepWith=qK,se.cloneWith=zK,se.conformsTo=WK,se.deburr=nO,se.defaultTo=SY,se.divide=KY,se.endsWith=QX,se.eq=Js,se.escape=JX,se.escapeRegExp=eY,se.every=iK,se.find=cK,se.findIndex=LR,se.findKey=wX,se.findLast=dK,se.findLastIndex=$R,se.findLastKey=xX,se.floor=XY,se.forEach=RR,se.forEachRight=OR,se.forIn=MX,se.forInRight=CX,se.forOwn=SX,se.forOwnRight=IX,se.get=S$,se.gt=GK,se.gte=ZK,se.has=AX,se.hasIn=I$,se.head=ER,se.identity=Jn,se.includes=mK,se.indexOf=dZ,se.inRange=KX,se.invoke=PX,se.isArguments=di,se.isArray=Xt,se.isArrayBuffer=KK,se.isArrayLike=Yn,se.isArrayLikeObject=un,se.isBoolean=XK,se.isBuffer=kr,se.isDate=YK,se.isElement=QK,se.isEmpty=JK,se.isEqual=eX,se.isEqualWith=tX,se.isError=M$,se.isFinite=aX,se.isFunction=No,se.isInteger=BR,se.isLength=r1,se.isMap=qR,se.isMatch=nX,se.isMatchWith=sX,se.isNaN=oX,se.isNative=rX,se.isNil=lX,se.isNull=iX,se.isNumber=WR,se.isObject=Ja,se.isObjectLike=nn,se.isPlainObject=od,se.isRegExp=C$,se.isSafeInteger=cX,se.isSet=GR,se.isString=i1,se.isSymbol=hs,se.isTypedArray=sc,se.isUndefined=dX,se.isWeakMap=uX,se.isWeakSet=pX,se.join=mZ,se.kebabCase=tY,se.last=As,se.lastIndexOf=vZ,se.lowerCase=aY,se.lowerFirst=nY,se.lt=hX,se.lte=fX,se.max=YY,se.maxBy=QY,se.mean=JY,se.meanBy=eQ,se.min=tQ,se.minBy=aQ,se.stubArray=P$,se.stubFalse=D$,se.stubObject=HY,se.stubString=NY,se.stubTrue=zY,se.multiply=nQ,se.nth=yZ,se.noConflict=PY,se.noop=T$,se.now=n1,se.pad=sY,se.padEnd=oY,se.padStart=rY,se.parseInt=iY,se.random=XX,se.reduce=kK,se.reduceRight=bK,se.repeat=lY,se.replace=cY,se.result=jX,se.round=sQ,se.runInContext=Te,se.sample=xK,se.size=SK,se.snakeCase=dY,se.some=IK,se.sortedIndex=MZ,se.sortedIndexBy=CZ,se.sortedIndexOf=SZ,se.sortedLastIndex=IZ,se.sortedLastIndexBy=LZ,se.sortedLastIndexOf=$Z,se.startCase=pY,se.startsWith=hY,se.subtract=oQ,se.sum=rQ,se.sumBy=iQ,se.template=fY,se.times=BY,se.toFinite=zo,se.toInteger=ea,se.toLength=KR,se.toLower=mY,se.toNumber=Es,se.toSafeInteger=mX,se.toString=Ma,se.toUpper=vY,se.trim=yY,se.trimEnd=_Y,se.trimStart=gY,se.truncate=kY,se.unescape=bY,se.uniqueId=WY,se.upperCase=wY,se.upperFirst=L$,se.each=RR,se.eachRight=OR,se.first=ER,E$(se,function(){var d={};return uo(se,function(y,I){Ia.call(se.prototype,I)||(d[I]=y)}),d}(),{chain:!1}),se.VERSION=s,Cs(["bind","bindKey","curry","curryRight","partial","partialRight"],function(d){se[d].placeholder=se}),Cs(["drop","take"],function(d,y){ua.prototype[d]=function(I){I=I===a?1:bn(ea(I),0);var z=this.__filtered__&&!y?new ua(this):this.clone();return z.__filtered__?z.__takeCount__=Fn(I,z.__takeCount__):z.__views__.push({size:Fn(I,He),type:d+(z.__dir__<0?"Right":"")}),z},ua.prototype[d+"Right"]=function(I){return this.reverse()[d](I).reverse()}}),Cs(["filter","map","takeWhile"],function(d,y){var I=y+1,z=I==$e||I==de;ua.prototype[d]=function(Z){var le=this.clone();return le.__iteratees__.push({iteratee:Vt(Z,3),type:I}),le.__filtered__=le.__filtered__||z,le}}),Cs(["head","last"],function(d,y){var I="take"+(y?"Right":"");ua.prototype[d]=function(){return this[I](1).value()[0]}}),Cs(["initial","tail"],function(d,y){var I="drop"+(y?"":"Right");ua.prototype[d]=function(){return this.__filtered__?new ua(this):this[I](1)}}),ua.prototype.compact=function(){return this.filter(Jn)},ua.prototype.find=function(d){return this.filter(d).head()},ua.prototype.findLast=function(d){return this.reverse().find(d)},ua.prototype.invokeMap=ra(function(d,y){return typeof d=="function"?new ua(this):this.map(function(I){return Jc(I,d,y)})}),ua.prototype.reject=function(d){return this.filter(o1(Vt(d)))},ua.prototype.slice=function(d,y){d=ea(d);var I=this;return I.__filtered__&&(d>0||y<0)?new ua(I):(d<0?I=I.takeRight(-d):d&&(I=I.drop(d)),y!==a&&(y=ea(y),I=y<0?I.dropRight(-y):I.take(y-d)),I)},ua.prototype.takeRightWhile=function(d){return this.reverse().takeWhile(d).reverse()},ua.prototype.toArray=function(){return this.take(He)},uo(ua.prototype,function(d,y){var I=/^(?:filter|find|map|reject)|While$/.test(y),z=/^(?:head|last)$/.test(y),Z=se[z?"take"+(y=="last"?"Right":""):y],le=z||/^find/.test(y);Z&&(se.prototype[y]=function(){var we=this.__wrapped__,Ie=z?[1]:arguments,De=we instanceof ua,Ye=Ie[0],Qe=De||Xt(we),st=function(ca){var fa=Z.apply(se,hr([ca],Ie));return z&&gt?fa[0]:fa};Qe&&I&&typeof Ye=="function"&&Ye.length!=1&&(De=Qe=!1);var gt=this.__chain__,It=!!this.__actions__.length,jt=le&&!gt,na=De&&!It;if(!le&&Qe){we=na?we:new ua(this);var Ht=d.apply(we,Ie);return Ht.__actions__.push({func:t1,args:[st],thisArg:a}),new Is(Ht,gt)}return jt&&na?d.apply(this,Ie):(Ht=this.thru(st),jt?z?Ht.value()[0]:Ht.value():Ht)})}),Cs(["pop","push","shift","sort","splice","unshift"],function(d){var y=Iu[d],I=/^(?:push|sort|unshift)$/.test(d)?"tap":"thru",z=/^(?:pop|shift)$/.test(d);se.prototype[d]=function(){var Z=arguments;if(z&&!this.__chain__){var le=this.value();return y.apply(Xt(le)?le:[],Z)}return this[I](function(we){return y.apply(Xt(we)?we:[],Z)})}}),uo(ua.prototype,function(d,y){var I=se[y];if(I){var z=I.name+"";Ia.call(Jl,z)||(Jl[z]=[]),Jl[z].push({name:y,func:I})}}),Jl[Zu(a,R).name]=[{name:"wrapper",func:a}],ua.prototype.clone=bW,ua.prototype.reverse=wW,ua.prototype.value=xW,se.prototype.at=QZ,se.prototype.chain=JZ,se.prototype.commit=eK,se.prototype.next=tK,se.prototype.plant=nK,se.prototype.reverse=sK,se.prototype.toJSON=se.prototype.valueOf=se.prototype.value=oK,se.prototype.first=se.prototype.head,Wc&&(se.prototype[Wc]=aK),se},Xl=eW();ai?((ai.exports=Xl)._=Xl,A9._=Xl):Pn._=Xl}).call(Ur)})(_L,_L.exports);var ma=_L.exports;const Pt=cu(ma);let yse=Symbol("headlessui.useid"),_se=0;function Vn(){return xt(yse,()=>`${++_se}`)()}function rt(n){var e;if(n==null||n.value==null)return null;let a=(e=n.value.$el)!=null?e:n.value;return a instanceof Node?a:null}function en(n,e,...a){if(n in e){let o=e[n];return typeof o=="function"?o(...a):o}let s=new Error(`Tried to handle "${n}" but there is no handler defined. Only defined handlers are: ${Object.keys(e).map(o=>`"${o}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(s,en),s}var gse=Object.defineProperty,kse=(n,e,a)=>e in n?gse(n,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[e]=a,DV=(n,e,a)=>(kse(n,typeof e!="symbol"?e+"":e,a),a);let bse=class{constructor(){DV(this,"current",this.detect()),DV(this,"currentId",0)}set(e){this.current!==e&&(this.currentId=0,this.current=e)}reset(){this.set(this.detect())}nextId(){return++this.currentId}get isServer(){return this.current==="server"}get isClient(){return this.current==="client"}detect(){return typeof window>"u"||typeof document>"u"?"server":"client"}},du=new bse;function Ws(n){if(du.isServer)return null;if(n instanceof Node)return n.ownerDocument;if(n!=null&&n.hasOwnProperty("value")){let e=rt(n);if(e)return e.ownerDocument}return document}let oE=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(n=>`${n}:not([tabindex='-1'])`).join(",");var Ea=(n=>(n[n.First=1]="First",n[n.Previous=2]="Previous",n[n.Next=4]="Next",n[n.Last=8]="Last",n[n.WrapAround=16]="WrapAround",n[n.NoScroll=32]="NoScroll",n))(Ea||{}),Jo=(n=>(n[n.Error=0]="Error",n[n.Overflow=1]="Overflow",n[n.Success=2]="Success",n[n.Underflow=3]="Underflow",n))(Jo||{}),wse=(n=>(n[n.Previous=-1]="Previous",n[n.Next=1]="Next",n))(wse||{});function uu(n=document.body){return n==null?[]:Array.from(n.querySelectorAll(oE)).sort((e,a)=>Math.sign((e.tabIndex||Number.MAX_SAFE_INTEGER)-(a.tabIndex||Number.MAX_SAFE_INTEGER)))}var YL=(n=>(n[n.Strict=0]="Strict",n[n.Loose=1]="Loose",n))(YL||{});function QL(n,e=0){var a;return n===((a=Ws(n))==null?void 0:a.body)?!1:en(e,{0(){return n.matches(oE)},1(){let s=n;for(;s!==null;){if(s.matches(oE))return!0;s=s.parentElement}return!1}})}function FH(n){let e=Ws(n);En(()=>{e&&!QL(e.activeElement,0)&&zr(n)})}var xse=(n=>(n[n.Keyboard=0]="Keyboard",n[n.Mouse=1]="Mouse",n))(xse||{});typeof window<"u"&&typeof document<"u"&&(document.addEventListener("keydown",n=>{n.metaKey||n.altKey||n.ctrlKey||(document.documentElement.dataset.headlessuiFocusVisible="")},!0),document.addEventListener("click",n=>{n.detail===1?delete document.documentElement.dataset.headlessuiFocusVisible:n.detail===0&&(document.documentElement.dataset.headlessuiFocusVisible="")},!0));function zr(n){n==null||n.focus({preventScroll:!0})}let Mse=["textarea","input"].join(",");function Cse(n){var e,a;return(a=(e=n==null?void 0:n.matches)==null?void 0:e.call(n,Mse))!=null?a:!1}function Cl(n,e=a=>a){return n.slice().sort((a,s)=>{let o=e(a),r=e(s);if(o===null||r===null)return 0;let i=o.compareDocumentPosition(r);return i&Node.DOCUMENT_POSITION_FOLLOWING?-1:i&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function Sse(n,e){return Ln(uu(),e,{relativeTo:n})}function Ln(n,e,{sorted:a=!0,relativeTo:s=null,skipElements:o=[]}={}){var r;let i=(r=Array.isArray(n)?n.length>0?n[0].ownerDocument:document:n==null?void 0:n.ownerDocument)!=null?r:document,u=Array.isArray(n)?a?Cl(n):n:uu(n);o.length>0&&u.length>1&&(u=u.filter($=>!o.includes($))),s=s??i.activeElement;let h=(()=>{if(e&5)return 1;if(e&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),m=(()=>{if(e&1)return 0;if(e&2)return Math.max(0,u.indexOf(s))-1;if(e&4)return Math.max(0,u.indexOf(s))+1;if(e&8)return u.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),p=e&32?{preventScroll:!0}:{},b=0,x=u.length,w;do{if(b>=x||b+x<=0)return 0;let $=m+b;if(e&16)$=($+x)%x;else{if($<0)return 3;if($>=x)return 1}w=u[$],w==null||w.focus(p),b+=h}while(w!==i.activeElement);return e&6&&Cse(w)&&w.select(),2}function jH(){return/iPhone/gi.test(window.navigator.platform)||/Mac/gi.test(window.navigator.platform)&&window.navigator.maxTouchPoints>0}function Ise(){return/Android/gi.test(window.navigator.userAgent)}function Lse(){return jH()||Ise()}function w1(n,e,a){du.isServer||yn(s=>{document.addEventListener(n,e,a),s(()=>document.removeEventListener(n,e,a))})}function HH(n,e,a){du.isServer||yn(s=>{window.addEventListener(n,e,a),s(()=>window.removeEventListener(n,e,a))})}function OT(n,e,a=ee(()=>!0)){function s(r,i){if(!a.value||r.defaultPrevented)return;let u=i(r);if(u===null||!u.getRootNode().contains(u))return;let h=function m(p){return typeof p=="function"?m(p()):Array.isArray(p)||p instanceof Set?p:[p]}(n);for(let m of h){if(m===null)continue;let p=m instanceof HTMLElement?m:rt(m);if(p!=null&&p.contains(u)||r.composed&&r.composedPath().includes(p))return}return!QL(u,YL.Loose)&&u.tabIndex!==-1&&r.preventDefault(),e(r,u)}let o=O(null);w1("pointerdown",r=>{var i,u;a.value&&(o.value=((u=(i=r.composedPath)==null?void 0:i.call(r))==null?void 0:u[0])||r.target)},!0),w1("mousedown",r=>{var i,u;a.value&&(o.value=((u=(i=r.composedPath)==null?void 0:i.call(r))==null?void 0:u[0])||r.target)},!0),w1("click",r=>{Lse()||o.value&&(s(r,()=>o.value),o.value=null)},!0),w1("touchend",r=>s(r,()=>r.target instanceof HTMLElement?r.target:null),!0),HH("blur",r=>s(r,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}function RV(n,e){if(n)return n;let a=e??"button";if(typeof a=="string"&&a.toLowerCase()==="button")return"button"}function JL(n,e){let a=O(RV(n.value.type,n.value.as));return at(()=>{a.value=RV(n.value.type,n.value.as)}),yn(()=>{var s;a.value||rt(e)&&rt(e)instanceof HTMLButtonElement&&!((s=rt(e))!=null&&s.hasAttribute("type"))&&(a.value="button")}),a}function OV(n){return[n.screenX,n.screenY]}function $se(){let n=O([-1,-1]);return{wasMoved(e){let a=OV(e);return n.value[0]===a[0]&&n.value[1]===a[1]?!1:(n.value=a,!0)},update(e){n.value=OV(e)}}}function Ase({container:n,accept:e,walk:a,enabled:s}){yn(()=>{let o=n.value;if(!o||s!==void 0&&!s.value)return;let r=Ws(n);if(!r)return;let i=Object.assign(h=>e(h),{acceptNode:e}),u=r.createTreeWalker(o,NodeFilter.SHOW_ELEMENT,i,!1);for(;u.nextNode();)a(u.currentNode)})}var Bs=(n=>(n[n.None=0]="None",n[n.RenderStrategy=1]="RenderStrategy",n[n.Static=2]="Static",n))(Bs||{}),jr=(n=>(n[n.Unmount=0]="Unmount",n[n.Hidden=1]="Hidden",n))(jr||{});function ja({visible:n=!0,features:e=0,ourProps:a,theirProps:s,...o}){var r;let i=zH(s,a),u=Object.assign(o,{props:i});if(n||e&2&&i.static)return Q$(u);if(e&1){let h=(r=i.unmount)==null||r?0:1;return en(h,{0(){return null},1(){return Q$({...o,props:{...i,hidden:!0,style:{display:"none"}}})}})}return Q$(u)}function Q$({props:n,attrs:e,slots:a,slot:s,name:o}){var r,i;let{as:u,...h}=VT(n,["unmount","static"]),m=(r=a.default)==null?void 0:r.call(a,s),p={};if(s){let b=!1,x=[];for(let[w,$]of Object.entries(s))typeof $=="boolean"&&(b=!0),$===!0&&x.push(w);b&&(p["data-headlessui-state"]=x.join(" "))}if(u==="template"){if(m=NH(m??[]),Object.keys(h).length>0||Object.keys(e).length>0){let[b,...x]=m??[];if(!Ese(b)||x.length>0)throw new Error(['Passing props on "template"!',"",`The current component <${o} /> is rendering a "template".`,"However we need to passthrough the following props:",Object.keys(h).concat(Object.keys(e)).map(D=>D.trim()).filter((D,V,R)=>R.indexOf(D)===V).sort((D,V)=>D.localeCompare(V)).map(D=>`  - ${D}`).join(`
+`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "template".',"Render a single element as the child so that we can forward the props onto that element."].map(D=>`  - ${D}`).join(`
+`)].join(`
+`));let w=zH((i=b.props)!=null?i:{},h,p),$=nr(b,w,!0);for(let D in w)D.startsWith("on")&&($.props||($.props={}),$.props[D]=w[D]);return $}return Array.isArray(m)&&m.length===1?m[0]:m}return ya(u,Object.assign({},h,p),{default:()=>m})}function NH(n){return n.flatMap(e=>e.type===ke?NH(e.children):[e])}function zH(...n){if(n.length===0)return{};if(n.length===1)return n[0];let e={},a={};for(let s of n)for(let o in s)o.startsWith("on")&&typeof s[o]=="function"?(a[o]!=null||(a[o]=[]),a[o].push(s[o])):e[o]=s[o];if(e.disabled||e["aria-disabled"])return Object.assign(e,Object.fromEntries(Object.keys(a).map(s=>[s,void 0])));for(let s in a)Object.assign(e,{[s](o,...r){let i=a[s];for(let u of i){if(o instanceof Event&&o.defaultPrevented)return;u(o,...r)}}});return e}function VT(n,e=[]){let a=Object.assign({},n);for(let s of e)s in a&&delete a[s];return a}function Ese(n){return n==null?!1:typeof n.type=="string"||typeof n.type=="object"||typeof n.type=="function"}var Zr=(n=>(n[n.None=1]="None",n[n.Focusable=2]="Focusable",n[n.Hidden=4]="Hidden",n))(Zr||{});let Kr=Ce({name:"Hidden",props:{as:{type:[Object,String],default:"div"},features:{type:Number,default:1}},setup(n,{slots:e,attrs:a}){return()=>{var s;let{features:o,...r}=n,i={"aria-hidden":(o&2)===2?!0:(s=r["aria-hidden"])!=null?s:void 0,style:{position:"fixed",top:1,left:1,width:1,height:0,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0",...(o&4)===4&&(o&2)!==2&&{display:"none"}}};return ja({ourProps:i,theirProps:r,slot:{},attrs:a,slots:e,name:"Hidden"})}}}),BH=Symbol("Context");var Wa=(n=>(n[n.Open=1]="Open",n[n.Closed=2]="Closed",n[n.Closing=4]="Closing",n[n.Opening=8]="Opening",n))(Wa||{});function Tse(){return Oc()!==null}function Oc(){return xt(BH,null)}function e9(n){St(BH,n)}var sa=(n=>(n.Space=" ",n.Enter="Enter",n.Escape="Escape",n.Backspace="Backspace",n.Delete="Delete",n.ArrowLeft="ArrowLeft",n.ArrowUp="ArrowUp",n.ArrowRight="ArrowRight",n.ArrowDown="ArrowDown",n.Home="Home",n.End="End",n.PageUp="PageUp",n.PageDown="PageDown",n.Tab="Tab",n))(sa||{});function Pse(n){function e(){document.readyState!=="loading"&&(n(),document.removeEventListener("DOMContentLoaded",e))}typeof window<"u"&&typeof document<"u"&&(document.addEventListener("DOMContentLoaded",e),e())}let Sl=[];Pse(()=>{function n(e){e.target instanceof HTMLElement&&e.target!==document.body&&Sl[0]!==e.target&&(Sl.unshift(e.target),Sl=Sl.filter(a=>a!=null&&a.isConnected),Sl.splice(10))}window.addEventListener("click",n,{capture:!0}),window.addEventListener("mousedown",n,{capture:!0}),window.addEventListener("focus",n,{capture:!0}),document.body.addEventListener("click",n,{capture:!0}),document.body.addEventListener("mousedown",n,{capture:!0}),document.body.addEventListener("focus",n,{capture:!0})});function Dse(n){throw new Error("Unexpected object: "+n)}var _s=(n=>(n[n.First=0]="First",n[n.Previous=1]="Previous",n[n.Next=2]="Next",n[n.Last=3]="Last",n[n.Specific=4]="Specific",n[n.Nothing=5]="Nothing",n))(_s||{});function Rse(n,e){let a=e.resolveItems();if(a.length<=0)return null;let s=e.resolveActiveIndex(),o=s??-1;switch(n.focus){case 0:{for(let r=0;r<a.length;++r)if(!e.resolveDisabled(a[r],r,a))return r;return s}case 1:{o===-1&&(o=a.length);for(let r=o-1;r>=0;--r)if(!e.resolveDisabled(a[r],r,a))return r;return s}case 2:{for(let r=o+1;r<a.length;++r)if(!e.resolveDisabled(a[r],r,a))return r;return s}case 3:{for(let r=a.length-1;r>=0;--r)if(!e.resolveDisabled(a[r],r,a))return r;return s}case 4:{for(let r=0;r<a.length;++r)if(e.resolveId(a[r],r,a)===n.id)return r;return s}case 5:return null;default:Dse(n)}}function t9(n){typeof queueMicrotask=="function"?queueMicrotask(n):Promise.resolve().then(n).catch(e=>setTimeout(()=>{throw e}))}function pu(){let n=[],e={addEventListener(a,s,o,r){return a.addEventListener(s,o,r),e.add(()=>a.removeEventListener(s,o,r))},requestAnimationFrame(...a){let s=requestAnimationFrame(...a);e.add(()=>cancelAnimationFrame(s))},nextFrame(...a){e.requestAnimationFrame(()=>{e.requestAnimationFrame(...a)})},setTimeout(...a){let s=setTimeout(...a);e.add(()=>clearTimeout(s))},microTask(...a){let s={current:!0};return t9(()=>{s.current&&a[0]()}),e.add(()=>{s.current=!1})},style(a,s,o){let r=a.style.getPropertyValue(s);return Object.assign(a.style,{[s]:o}),this.add(()=>{Object.assign(a.style,{[s]:r})})},group(a){let s=pu();return a(s),this.add(()=>s.dispose())},add(a){return n.push(a),()=>{let s=n.indexOf(a);if(s>=0)for(let o of n.splice(s,1))o()}},dispose(){for(let a of n.splice(0))a()}};return e}function UT(n,e,a,s){du.isServer||yn(o=>{n=n??window,n.addEventListener(e,a,s),o(()=>n.removeEventListener(e,a,s))})}var gs=(n=>(n[n.Forwards=0]="Forwards",n[n.Backwards=1]="Backwards",n))(gs||{});function FT(){let n=O(0);return HH("keydown",e=>{e.key==="Tab"&&(n.value=e.shiftKey?1:0)}),n}function qH(n){if(!n)return new Set;if(typeof n=="function")return new Set(n());let e=new Set;for(let a of n.value){let s=rt(a);s instanceof HTMLElement&&e.add(s)}return e}var WH=(n=>(n[n.None=1]="None",n[n.InitialFocus=2]="InitialFocus",n[n.TabLock=4]="TabLock",n[n.FocusLock=8]="FocusLock",n[n.RestoreFocus=16]="RestoreFocus",n[n.All=30]="All",n))(WH||{});let ud=Object.assign(Ce({name:"FocusTrap",props:{as:{type:[Object,String],default:"div"},initialFocus:{type:Object,default:null},features:{type:Number,default:30},containers:{type:[Object,Function],default:O(new Set)}},inheritAttrs:!1,setup(n,{attrs:e,slots:a,expose:s}){let o=O(null);s({el:o,$el:o});let r=ee(()=>Ws(o)),i=O(!1);at(()=>i.value=!0),rn(()=>i.value=!1),Vse({ownerDocument:r},ee(()=>i.value&&!!(n.features&16)));let u=Use({ownerDocument:r,container:o,initialFocus:ee(()=>n.initialFocus)},ee(()=>i.value&&!!(n.features&2)));Fse({ownerDocument:r,container:o,containers:n.containers,previousActiveElement:u},ee(()=>i.value&&!!(n.features&8)));let h=FT();function m(w){let $=rt(o);$&&(D=>D())(()=>{en(h.value,{[gs.Forwards]:()=>{Ln($,Ea.First,{skipElements:[w.relatedTarget]})},[gs.Backwards]:()=>{Ln($,Ea.Last,{skipElements:[w.relatedTarget]})}})})}let p=O(!1);function b(w){w.key==="Tab"&&(p.value=!0,requestAnimationFrame(()=>{p.value=!1}))}function x(w){if(!i.value)return;let $=qH(n.containers);rt(o)instanceof HTMLElement&&$.add(rt(o));let D=w.relatedTarget;D instanceof HTMLElement&&D.dataset.headlessuiFocusGuard!=="true"&&(GH($,D)||(p.value?Ln(rt(o),en(h.value,{[gs.Forwards]:()=>Ea.Next,[gs.Backwards]:()=>Ea.Previous})|Ea.WrapAround,{relativeTo:w.target}):w.target instanceof HTMLElement&&zr(w.target)))}return()=>{let w={},$={ref:o,onKeydown:b,onFocusout:x},{features:D,initialFocus:V,containers:R,...E}=n;return ya(ke,[!!(D&4)&&ya(Kr,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:m,features:Zr.Focusable}),ja({ourProps:$,theirProps:{...e,...E},slot:w,attrs:e,slots:a,name:"FocusTrap"}),!!(D&4)&&ya(Kr,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:m,features:Zr.Focusable})])}}}),{features:WH});function Ose(n){let e=O(Sl.slice());return dt([n],([a],[s])=>{s===!0&&a===!1?t9(()=>{e.value.splice(0)}):s===!1&&a===!0&&(e.value=Sl.slice())},{flush:"post"}),()=>{var a;return(a=e.value.find(s=>s!=null&&s.isConnected))!=null?a:null}}function Vse({ownerDocument:n},e){let a=Ose(e);at(()=>{yn(()=>{var s,o;e.value||((s=n.value)==null?void 0:s.activeElement)===((o=n.value)==null?void 0:o.body)&&zr(a())},{flush:"post"})}),rn(()=>{e.value&&zr(a())})}function Use({ownerDocument:n,container:e,initialFocus:a},s){let o=O(null),r=O(!1);return at(()=>r.value=!0),rn(()=>r.value=!1),at(()=>{dt([e,a,s],(i,u)=>{if(i.every((m,p)=>(u==null?void 0:u[p])===m)||!s.value)return;let h=rt(e);h&&t9(()=>{var m,p;if(!r.value)return;let b=rt(a),x=(m=n.value)==null?void 0:m.activeElement;if(b){if(b===x){o.value=x;return}}else if(h.contains(x)){o.value=x;return}b?zr(b):Ln(h,Ea.First|Ea.NoScroll)===Jo.Error&&console.warn("There are no focusable elements inside the <FocusTrap />"),o.value=(p=n.value)==null?void 0:p.activeElement})},{immediate:!0,flush:"post"})}),o}function Fse({ownerDocument:n,container:e,containers:a,previousActiveElement:s},o){var r;UT((r=n.value)==null?void 0:r.defaultView,"focus",i=>{if(!o.value)return;let u=qH(a);rt(e)instanceof HTMLElement&&u.add(rt(e));let h=s.value;if(!h)return;let m=i.target;m&&m instanceof HTMLElement?GH(u,m)?(s.value=m,zr(m)):(i.preventDefault(),i.stopPropagation(),zr(h)):zr(s.value)},!0)}function GH(n,e){for(let a of n)if(a.contains(e))return!0;return!1}function jse(n){let e=UL(n.getSnapshot());return rn(n.subscribe(()=>{e.value=n.getSnapshot()})),e}function Hse(n,e){let a=n(),s=new Set;return{getSnapshot(){return a},subscribe(o){return s.add(o),()=>s.delete(o)},dispatch(o,...r){let i=e[o].call(a,...r);i&&(a=i,s.forEach(u=>u()))}}}function Nse(){let n;return{before({doc:e}){var a;let s=e.documentElement;n=((a=e.defaultView)!=null?a:window).innerWidth-s.clientWidth},after({doc:e,d:a}){let s=e.documentElement,o=s.clientWidth-s.offsetWidth,r=n-o;a.style(s,"paddingRight",`${r}px`)}}}function zse(){return jH()?{before({doc:n,d:e,meta:a}){function s(o){return a.containers.flatMap(r=>r()).some(r=>r.contains(o))}e.microTask(()=>{var o;if(window.getComputedStyle(n.documentElement).scrollBehavior!=="auto"){let u=pu();u.style(n.documentElement,"scrollBehavior","auto"),e.add(()=>e.microTask(()=>u.dispose()))}let r=(o=window.scrollY)!=null?o:window.pageYOffset,i=null;e.addEventListener(n,"click",u=>{if(u.target instanceof HTMLElement)try{let h=u.target.closest("a");if(!h)return;let{hash:m}=new URL(h.href),p=n.querySelector(m);p&&!s(p)&&(i=p)}catch{}},!0),e.addEventListener(n,"touchstart",u=>{if(u.target instanceof HTMLElement)if(s(u.target)){let h=u.target;for(;h.parentElement&&s(h.parentElement);)h=h.parentElement;e.style(h,"overscrollBehavior","contain")}else e.style(u.target,"touchAction","none")}),e.addEventListener(n,"touchmove",u=>{if(u.target instanceof HTMLElement)if(s(u.target)){let h=u.target;for(;h.parentElement&&h.dataset.headlessuiPortal!==""&&!(h.scrollHeight>h.clientHeight||h.scrollWidth>h.clientWidth);)h=h.parentElement;h.dataset.headlessuiPortal===""&&u.preventDefault()}else u.preventDefault()},{passive:!1}),e.add(()=>{var u;let h=(u=window.scrollY)!=null?u:window.pageYOffset;r!==h&&window.scrollTo(0,r),i&&i.isConnected&&(i.scrollIntoView({block:"nearest"}),i=null)})})}}:{}}function Bse(){return{before({doc:n,d:e}){e.style(n.documentElement,"overflow","hidden")}}}function qse(n){let e={};for(let a of n)Object.assign(e,a(e));return e}let Al=Hse(()=>new Map,{PUSH(n,e){var a;let s=(a=this.get(n))!=null?a:{doc:n,count:0,d:pu(),meta:new Set};return s.count++,s.meta.add(e),this.set(n,s),this},POP(n,e){let a=this.get(n);return a&&(a.count--,a.meta.delete(e)),this},SCROLL_PREVENT({doc:n,d:e,meta:a}){let s={doc:n,d:e,meta:qse(a)},o=[zse(),Nse(),Bse()];o.forEach(({before:r})=>r==null?void 0:r(s)),o.forEach(({after:r})=>r==null?void 0:r(s))},SCROLL_ALLOW({d:n}){n.dispose()},TEARDOWN({doc:n}){this.delete(n)}});Al.subscribe(()=>{let n=Al.getSnapshot(),e=new Map;for(let[a]of n)e.set(a,a.documentElement.style.overflow);for(let a of n.values()){let s=e.get(a.doc)==="hidden",o=a.count!==0;(o&&!s||!o&&s)&&Al.dispatch(a.count>0?"SCROLL_PREVENT":"SCROLL_ALLOW",a),a.count===0&&Al.dispatch("TEARDOWN",a)}});function Wse(n,e,a){let s=jse(Al),o=ee(()=>{let r=n.value?s.value.get(n.value):void 0;return r?r.count>0:!1});return dt([n,e],([r,i],[u],h)=>{if(!r||!i)return;Al.dispatch("PUSH",r,a);let m=!1;h(()=>{m||(Al.dispatch("POP",u??r,a),m=!0)})},{immediate:!0}),o}let J$=new Map,pd=new Map;function VV(n,e=O(!0)){yn(a=>{var s;if(!e.value)return;let o=rt(n);if(!o)return;a(function(){var i;if(!o)return;let u=(i=pd.get(o))!=null?i:1;if(u===1?pd.delete(o):pd.set(o,u-1),u!==1)return;let h=J$.get(o);h&&(h["aria-hidden"]===null?o.removeAttribute("aria-hidden"):o.setAttribute("aria-hidden",h["aria-hidden"]),o.inert=h.inert,J$.delete(o))});let r=(s=pd.get(o))!=null?s:0;pd.set(o,r+1),r===0&&(J$.set(o,{"aria-hidden":o.getAttribute("aria-hidden"),inert:o.inert}),o.setAttribute("aria-hidden","true"),o.inert=!0)})}function ZH({defaultContainers:n=[],portals:e,mainTreeNodeRef:a}={}){let s=O(null),o=Ws(s);function r(){var i,u,h;let m=[];for(let p of n)p!==null&&(p instanceof HTMLElement?m.push(p):"value"in p&&p.value instanceof HTMLElement&&m.push(p.value));if(e!=null&&e.value)for(let p of e.value)m.push(p);for(let p of(i=o==null?void 0:o.querySelectorAll("html > *, body > *"))!=null?i:[])p!==document.body&&p!==document.head&&p instanceof HTMLElement&&p.id!=="headlessui-portal-root"&&(p.contains(rt(s))||p.contains((h=(u=rt(s))==null?void 0:u.getRootNode())==null?void 0:h.host)||m.some(b=>p.contains(b))||m.push(p));return m}return{resolveContainers:r,contains(i){return r().some(u=>u.contains(i))},mainTreeNodeRef:s,MainTreeNode(){return a!=null?null:ya(Kr,{features:Zr.Hidden,ref:s})}}}let KH=Symbol("ForcePortalRootContext");function Gse(){return xt(KH,!1)}let UV=Ce({name:"ForcePortalRoot",props:{as:{type:[Object,String],default:"template"},force:{type:Boolean,default:!1}},setup(n,{slots:e,attrs:a}){return St(KH,n.force),()=>{let{force:s,...o}=n;return ja({theirProps:o,ourProps:{},slot:{},slots:e,attrs:a,name:"ForcePortalRoot"})}}}),XH=Symbol("StackContext");var rE=(n=>(n[n.Add=0]="Add",n[n.Remove=1]="Remove",n))(rE||{});function Zse(){return xt(XH,()=>{})}function Kse({type:n,enabled:e,element:a,onUpdate:s}){let o=Zse();function r(...i){s==null||s(...i),o(...i)}at(()=>{dt(e,(i,u)=>{i?r(0,n,a):u===!0&&r(1,n,a)},{immediate:!0,flush:"sync"})}),rn(()=>{e.value&&r(1,n,a)}),St(XH,r)}let YH=Symbol("DescriptionContext");function Xse(){let n=xt(YH,null);if(n===null)throw new Error("Missing parent");return n}function Yse({slot:n=O({}),name:e="Description",props:a={}}={}){let s=O([]);function o(r){return s.value.push(r),()=>{let i=s.value.indexOf(r);i!==-1&&s.value.splice(i,1)}}return St(YH,{register:o,slot:n,name:e,props:a}),ee(()=>s.value.length>0?s.value.join(" "):void 0)}let Qse=Ce({name:"Description",props:{as:{type:[Object,String],default:"p"},id:{type:String,default:null}},setup(n,{attrs:e,slots:a}){var s;let o=(s=n.id)!=null?s:`headlessui-description-${Vn()}`,r=Xse();return at(()=>rn(r.register(o))),()=>{let{name:i="Description",slot:u=O({}),props:h={}}=r,{...m}=n,p={...Object.entries(h).reduce((b,[x,w])=>Object.assign(b,{[x]:t(w)}),{}),id:o};return ja({ourProps:p,theirProps:m,slot:u.value,attrs:e,slots:a,name:i})}}});function Jse(n){let e=Ws(n);if(!e){if(n===null)return null;throw new Error(`[Headless UI]: Cannot find ownerDocument for contextElement: ${n}`)}let a=e.getElementById("headlessui-portal-root");if(a)return a;let s=e.createElement("div");return s.setAttribute("id","headlessui-portal-root"),e.body.appendChild(s)}let eoe=Ce({name:"Portal",props:{as:{type:[Object,String],default:"div"}},setup(n,{slots:e,attrs:a}){let s=O(null),o=ee(()=>Ws(s)),r=Gse(),i=xt(JH,null),u=O(r===!0||i==null?Jse(s.value):i.resolveTarget()),h=O(!1);at(()=>{h.value=!0}),yn(()=>{r||i!=null&&(u.value=i.resolveTarget())});let m=xt(iE,null),p=!1,b=Wr();return dt(s,()=>{if(p||!m)return;let x=rt(s);x&&(rn(m.register(x),b),p=!0)}),rn(()=>{var x,w;let $=(x=o.value)==null?void 0:x.getElementById("headlessui-portal-root");$&&u.value===$&&u.value.children.length<=0&&((w=u.value.parentElement)==null||w.removeChild(u.value))}),()=>{if(!h.value||u.value===null)return null;let x={ref:s,"data-headlessui-portal":""};return ya(WJ,{to:u.value},ja({ourProps:x,theirProps:n,slot:{},attrs:a,slots:e,name:"Portal"}))}}}),iE=Symbol("PortalParentContext");function QH(){let n=xt(iE,null),e=O([]);function a(r){return e.value.push(r),n&&n.register(r),()=>s(r)}function s(r){let i=e.value.indexOf(r);i!==-1&&e.value.splice(i,1),n&&n.unregister(r)}let o={register:a,unregister:s,portals:e};return[e,Ce({name:"PortalWrapper",setup(r,{slots:i}){return St(iE,o),()=>{var u;return(u=i.default)==null?void 0:u.call(i)}}})]}let JH=Symbol("PortalGroupContext"),toe=Ce({name:"PortalGroup",props:{as:{type:[Object,String],default:"template"},target:{type:Object,default:null}},setup(n,{attrs:e,slots:a}){let s=gn({resolveTarget(){return n.target}});return St(JH,s),()=>{let{target:o,...r}=n;return ja({theirProps:r,ourProps:{},slot:{},attrs:e,slots:a,name:"PortalGroup"})}}});var aoe=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(aoe||{});let lE=Symbol("DialogContext");function jT(n){let e=xt(lE,null);if(e===null){let a=new Error(`<${n} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(a,jT),a}return e}let x1="DC8F892D-2EBD-447C-A4C8-A03058436FF4",eN=Ce({name:"Dialog",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},open:{type:[Boolean,String],default:x1},initialFocus:{type:Object,default:null},id:{type:String,default:null},role:{type:String,default:"dialog"}},emits:{close:n=>!0},setup(n,{emit:e,attrs:a,slots:s,expose:o}){var r,i;let u=(r=n.id)!=null?r:`headlessui-dialog-${Vn()}`,h=O(!1);at(()=>{h.value=!0});let m=!1,p=ee(()=>n.role==="dialog"||n.role==="alertdialog"?n.role:(m||(m=!0,console.warn(`Invalid role [${p}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`)),"dialog")),b=O(0),x=Oc(),w=ee(()=>n.open===x1&&x!==null?(x.value&Wa.Open)===Wa.Open:n.open),$=O(null),D=ee(()=>Ws($));if(o({el:$,$el:$}),!(n.open!==x1||x!==null))throw new Error("You forgot to provide an `open` prop to the `Dialog`.");if(typeof w.value!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${w.value===x1?void 0:n.open}`);let V=ee(()=>h.value&&w.value?0:1),R=ee(()=>V.value===0),E=ee(()=>b.value>1),P=xt(lE,null)!==null,[S,C]=QH(),{resolveContainers:M,mainTreeNodeRef:g,MainTreeNode:v}=ZH({portals:S,defaultContainers:[ee(()=>{var He;return(He=J.panelRef.value)!=null?He:$.value})]}),T=ee(()=>E.value?"parent":"leaf"),j=ee(()=>x!==null?(x.value&Wa.Closing)===Wa.Closing:!1),B=ee(()=>P||j.value?!1:R.value),oe=ee(()=>{var He,Ke,pt;return(pt=Array.from((Ke=(He=D.value)==null?void 0:He.querySelectorAll("body > *"))!=null?Ke:[]).find(ut=>ut.id==="headlessui-portal-root"?!1:ut.contains(rt(g))&&ut instanceof HTMLElement))!=null?pt:null});VV(oe,B);let be=ee(()=>E.value?!0:R.value),$e=ee(()=>{var He,Ke,pt;return(pt=Array.from((Ke=(He=D.value)==null?void 0:He.querySelectorAll("[data-headlessui-portal]"))!=null?Ke:[]).find(ut=>ut.contains(rt(g))&&ut instanceof HTMLElement))!=null?pt:null});VV($e,be),Kse({type:"Dialog",enabled:ee(()=>V.value===0),element:$,onUpdate:(He,Ke)=>{if(Ke==="Dialog")return en(He,{[rE.Add]:()=>b.value+=1,[rE.Remove]:()=>b.value-=1})}});let Le=Yse({name:"DialogDescription",slot:ee(()=>({open:w.value}))}),de=O(null),J={titleId:de,panelRef:O(null),dialogState:V,setTitleId(He){de.value!==He&&(de.value=He)},close(){e("close",!1)}};St(lE,J);let G=ee(()=>!(!R.value||E.value));OT(M,(He,Ke)=>{J.close(),En(()=>Ke==null?void 0:Ke.focus())},G);let ce=ee(()=>!(E.value||V.value!==0));UT((i=D.value)==null?void 0:i.defaultView,"keydown",He=>{ce.value&&(He.defaultPrevented||He.key===sa.Escape&&(He.preventDefault(),He.stopPropagation(),J.close()))});let Ee=ee(()=>!(j.value||V.value!==0||P));return Wse(D,Ee,He=>{var Ke;return{containers:[...(Ke=He.containers)!=null?Ke:[],M]}}),yn(He=>{if(V.value!==0)return;let Ke=rt($);if(!Ke)return;let pt=new ResizeObserver(ut=>{for(let ft of ut){let kt=ft.target.getBoundingClientRect();kt.x===0&&kt.y===0&&kt.width===0&&kt.height===0&&J.close()}});pt.observe(Ke),He(()=>pt.disconnect())}),()=>{let{open:He,initialFocus:Ke,...pt}=n,ut={...a,ref:$,id:u,role:p.value,"aria-modal":V.value===0?!0:void 0,"aria-labelledby":de.value,"aria-describedby":Le.value},ft={open:V.value===0};return ya(UV,{force:!0},()=>[ya(eoe,()=>ya(toe,{target:$.value},()=>ya(UV,{force:!1},()=>ya(ud,{initialFocus:Ke,containers:M,features:R.value?en(T.value,{parent:ud.features.RestoreFocus,leaf:ud.features.All&~ud.features.FocusLock}):ud.features.None},()=>ya(C,{},()=>ja({ourProps:ut,theirProps:{...pt,...a},slot:ft,attrs:a,slots:s,visible:V.value===0,features:Bs.RenderStrategy|Bs.Static,name:"Dialog"})))))),ya(v)])}}}),tN=Ce({name:"DialogPanel",props:{as:{type:[Object,String],default:"div"},id:{type:String,default:null}},setup(n,{attrs:e,slots:a,expose:s}){var o;let r=(o=n.id)!=null?o:`headlessui-dialog-panel-${Vn()}`,i=jT("DialogPanel");s({el:i.panelRef,$el:i.panelRef});function u(h){h.stopPropagation()}return()=>{let{...h}=n,m={id:r,ref:i.panelRef,onClick:u};return ja({ourProps:m,theirProps:h,slot:{open:i.dialogState.value===0},attrs:e,slots:a,name:"DialogPanel"})}}}),aN=Ce({name:"DialogTitle",props:{as:{type:[Object,String],default:"h2"},id:{type:String,default:null}},setup(n,{attrs:e,slots:a}){var s;let o=(s=n.id)!=null?s:`headlessui-dialog-title-${Vn()}`,r=jT("DialogTitle");return at(()=>{r.setTitleId(o),rn(()=>r.setTitleId(null))}),()=>{let{...i}=n;return ja({ourProps:{id:o},theirProps:i,slot:{open:r.dialogState.value===0},attrs:e,slots:a,name:"DialogTitle"})}}}),nN=Qse;var noe=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(noe||{});let sN=Symbol("DisclosureContext");function HT(n){let e=xt(sN,null);if(e===null){let a=new Error(`<${n} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(a,HT),a}return e}let oN=Symbol("DisclosurePanelContext");function soe(){return xt(oN,null)}let ooe=Ce({name:"Disclosure",props:{as:{type:[Object,String],default:"template"},defaultOpen:{type:[Boolean],default:!1}},setup(n,{slots:e,attrs:a}){let s=O(n.defaultOpen?0:1),o=O(null),r=O(null),i={buttonId:O(`headlessui-disclosure-button-${Vn()}`),panelId:O(`headlessui-disclosure-panel-${Vn()}`),disclosureState:s,panel:o,button:r,toggleDisclosure(){s.value=en(s.value,{0:1,1:0})},closeDisclosure(){s.value!==1&&(s.value=1)},close(u){i.closeDisclosure();let h=u?u instanceof HTMLElement?u:u.value instanceof HTMLElement?rt(u):rt(i.button):rt(i.button);h==null||h.focus()}};return St(sN,i),e9(ee(()=>en(s.value,{0:Wa.Open,1:Wa.Closed}))),()=>{let{defaultOpen:u,...h}=n,m={open:s.value===0,close:i.close};return ja({theirProps:h,ourProps:{},slot:m,slots:e,attrs:a,name:"Disclosure"})}}}),roe=Ce({name:"DisclosureButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1},id:{type:String,default:null}},setup(n,{attrs:e,slots:a,expose:s}){let o=HT("DisclosureButton"),r=soe(),i=ee(()=>r===null?!1:r.value===o.panelId.value);at(()=>{i.value||n.id!==null&&(o.buttonId.value=n.id)}),rn(()=>{i.value||(o.buttonId.value=null)});let u=O(null);s({el:u,$el:u}),i.value||yn(()=>{o.button.value=u.value});let h=JL(ee(()=>({as:n.as,type:e.type})),u);function m(){var x;n.disabled||(i.value?(o.toggleDisclosure(),(x=rt(o.button))==null||x.focus()):o.toggleDisclosure())}function p(x){var w;if(!n.disabled)if(i.value)switch(x.key){case sa.Space:case sa.Enter:x.preventDefault(),x.stopPropagation(),o.toggleDisclosure(),(w=rt(o.button))==null||w.focus();break}else switch(x.key){case sa.Space:case sa.Enter:x.preventDefault(),x.stopPropagation(),o.toggleDisclosure();break}}function b(x){switch(x.key){case sa.Space:x.preventDefault();break}}return()=>{var x;let w={open:o.disclosureState.value===0},{id:$,...D}=n,V=i.value?{ref:u,type:h.value,onClick:m,onKeydown:p}:{id:(x=o.buttonId.value)!=null?x:$,ref:u,type:h.value,"aria-expanded":o.disclosureState.value===0,"aria-controls":o.disclosureState.value===0||rt(o.panel)?o.panelId.value:void 0,disabled:n.disabled?!0:void 0,onClick:m,onKeydown:p,onKeyup:b};return ja({ourProps:V,theirProps:D,slot:w,attrs:e,slots:a,name:"DisclosureButton"})}}}),ioe=Ce({name:"DisclosurePanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},id:{type:String,default:null}},setup(n,{attrs:e,slots:a,expose:s}){let o=HT("DisclosurePanel");at(()=>{n.id!==null&&(o.panelId.value=n.id)}),rn(()=>{o.panelId.value=null}),s({el:o.panel,$el:o.panel}),St(oN,o.panelId);let r=Oc(),i=ee(()=>r!==null?(r.value&Wa.Open)===Wa.Open:o.disclosureState.value===0);return()=>{var u;let h={open:o.disclosureState.value===0,close:o.close},{id:m,...p}=n,b={id:(u=o.panelId.value)!=null?u:m,ref:o.panel};return ja({ourProps:b,theirProps:p,slot:h,attrs:e,slots:a,features:Bs.RenderStrategy|Bs.Static,visible:i.value,name:"DisclosurePanel"})}}}),FV=/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g;function jV(n){var e,a;let s=(e=n.innerText)!=null?e:"",o=n.cloneNode(!0);if(!(o instanceof HTMLElement))return s;let r=!1;for(let u of o.querySelectorAll('[hidden],[aria-hidden],[role="img"]'))u.remove(),r=!0;let i=r?(a=o.innerText)!=null?a:"":s;return FV.test(i)&&(i=i.replace(FV,"")),i}function loe(n){let e=n.getAttribute("aria-label");if(typeof e=="string")return e.trim();let a=n.getAttribute("aria-labelledby");if(a){let s=a.split(" ").map(o=>{let r=document.getElementById(o);if(r){let i=r.getAttribute("aria-label");return typeof i=="string"?i.trim():jV(r).trim()}return null}).filter(Boolean);if(s.length>0)return s.join(", ")}return jV(n).trim()}function coe(n){let e=O(""),a=O("");return()=>{let s=rt(n);if(!s)return"";let o=s.innerText;if(e.value===o)return a.value;let r=loe(s).trim().toLowerCase();return e.value=o,a.value=r,r}}var doe=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(doe||{}),uoe=(n=>(n[n.Pointer=0]="Pointer",n[n.Other=1]="Other",n))(uoe||{});function poe(n){requestAnimationFrame(()=>requestAnimationFrame(n))}let rN=Symbol("MenuContext");function a9(n){let e=xt(rN,null);if(e===null){let a=new Error(`<${n} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(a,a9),a}return e}let hoe=Ce({name:"Menu",props:{as:{type:[Object,String],default:"template"}},setup(n,{slots:e,attrs:a}){let s=O(1),o=O(null),r=O(null),i=O([]),u=O(""),h=O(null),m=O(1);function p(x=w=>w){let w=h.value!==null?i.value[h.value]:null,$=Cl(x(i.value.slice()),V=>rt(V.dataRef.domRef)),D=w?$.indexOf(w):null;return D===-1&&(D=null),{items:$,activeItemIndex:D}}let b={menuState:s,buttonRef:o,itemsRef:r,items:i,searchQuery:u,activeItemIndex:h,activationTrigger:m,closeMenu:()=>{s.value=1,h.value=null},openMenu:()=>s.value=0,goToItem(x,w,$){let D=p(),V=Rse(x===_s.Specific?{focus:_s.Specific,id:w}:{focus:x},{resolveItems:()=>D.items,resolveActiveIndex:()=>D.activeItemIndex,resolveId:R=>R.id,resolveDisabled:R=>R.dataRef.disabled});u.value="",h.value=V,m.value=$??1,i.value=D.items},search(x){let w=u.value!==""?0:1;u.value+=x.toLowerCase();let $=(h.value!==null?i.value.slice(h.value+w).concat(i.value.slice(0,h.value+w)):i.value).find(V=>V.dataRef.textValue.startsWith(u.value)&&!V.dataRef.disabled),D=$?i.value.indexOf($):-1;D===-1||D===h.value||(h.value=D,m.value=1)},clearSearch(){u.value=""},registerItem(x,w){let $=p(D=>[...D,{id:x,dataRef:w}]);i.value=$.items,h.value=$.activeItemIndex,m.value=1},unregisterItem(x){let w=p($=>{let D=$.findIndex(V=>V.id===x);return D!==-1&&$.splice(D,1),$});i.value=w.items,h.value=w.activeItemIndex,m.value=1}};return OT([o,r],(x,w)=>{var $;b.closeMenu(),QL(w,YL.Loose)||(x.preventDefault(),($=rt(o))==null||$.focus())},ee(()=>s.value===0)),St(rN,b),e9(ee(()=>en(s.value,{0:Wa.Open,1:Wa.Closed}))),()=>{let x={open:s.value===0,close:b.closeMenu};return ja({ourProps:{},theirProps:n,slot:x,slots:e,attrs:a,name:"Menu"})}}}),foe=Ce({name:"MenuButton",props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"},id:{type:String,default:null}},setup(n,{attrs:e,slots:a,expose:s}){var o;let r=(o=n.id)!=null?o:`headlessui-menu-button-${Vn()}`,i=a9("MenuButton");s({el:i.buttonRef,$el:i.buttonRef});function u(b){switch(b.key){case sa.Space:case sa.Enter:case sa.ArrowDown:b.preventDefault(),b.stopPropagation(),i.openMenu(),En(()=>{var x;(x=rt(i.itemsRef))==null||x.focus({preventScroll:!0}),i.goToItem(_s.First)});break;case sa.ArrowUp:b.preventDefault(),b.stopPropagation(),i.openMenu(),En(()=>{var x;(x=rt(i.itemsRef))==null||x.focus({preventScroll:!0}),i.goToItem(_s.Last)});break}}function h(b){switch(b.key){case sa.Space:b.preventDefault();break}}function m(b){n.disabled||(i.menuState.value===0?(i.closeMenu(),En(()=>{var x;return(x=rt(i.buttonRef))==null?void 0:x.focus({preventScroll:!0})})):(b.preventDefault(),i.openMenu(),poe(()=>{var x;return(x=rt(i.itemsRef))==null?void 0:x.focus({preventScroll:!0})})))}let p=JL(ee(()=>({as:n.as,type:e.type})),i.buttonRef);return()=>{var b;let x={open:i.menuState.value===0},{...w}=n,$={ref:i.buttonRef,id:r,type:p.value,"aria-haspopup":"menu","aria-controls":(b=rt(i.itemsRef))==null?void 0:b.id,"aria-expanded":i.menuState.value===0,onKeydown:u,onKeyup:h,onClick:m};return ja({ourProps:$,theirProps:w,slot:x,attrs:e,slots:a,name:"MenuButton"})}}}),moe=Ce({name:"MenuItems",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},id:{type:String,default:null}},setup(n,{attrs:e,slots:a,expose:s}){var o;let r=(o=n.id)!=null?o:`headlessui-menu-items-${Vn()}`,i=a9("MenuItems"),u=O(null);s({el:i.itemsRef,$el:i.itemsRef}),Ase({container:ee(()=>rt(i.itemsRef)),enabled:ee(()=>i.menuState.value===0),accept(x){return x.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:x.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(x){x.setAttribute("role","none")}});function h(x){var w;switch(u.value&&clearTimeout(u.value),x.key){case sa.Space:if(i.searchQuery.value!=="")return x.preventDefault(),x.stopPropagation(),i.search(x.key);case sa.Enter:if(x.preventDefault(),x.stopPropagation(),i.activeItemIndex.value!==null){let $=i.items.value[i.activeItemIndex.value];(w=rt($.dataRef.domRef))==null||w.click()}i.closeMenu(),FH(rt(i.buttonRef));break;case sa.ArrowDown:return x.preventDefault(),x.stopPropagation(),i.goToItem(_s.Next);case sa.ArrowUp:return x.preventDefault(),x.stopPropagation(),i.goToItem(_s.Previous);case sa.Home:case sa.PageUp:return x.preventDefault(),x.stopPropagation(),i.goToItem(_s.First);case sa.End:case sa.PageDown:return x.preventDefault(),x.stopPropagation(),i.goToItem(_s.Last);case sa.Escape:x.preventDefault(),x.stopPropagation(),i.closeMenu(),En(()=>{var $;return($=rt(i.buttonRef))==null?void 0:$.focus({preventScroll:!0})});break;case sa.Tab:x.preventDefault(),x.stopPropagation(),i.closeMenu(),En(()=>Sse(rt(i.buttonRef),x.shiftKey?Ea.Previous:Ea.Next));break;default:x.key.length===1&&(i.search(x.key),u.value=setTimeout(()=>i.clearSearch(),350));break}}function m(x){switch(x.key){case sa.Space:x.preventDefault();break}}let p=Oc(),b=ee(()=>p!==null?(p.value&Wa.Open)===Wa.Open:i.menuState.value===0);return()=>{var x,w;let $={open:i.menuState.value===0},{...D}=n,V={"aria-activedescendant":i.activeItemIndex.value===null||(x=i.items.value[i.activeItemIndex.value])==null?void 0:x.id,"aria-labelledby":(w=rt(i.buttonRef))==null?void 0:w.id,id:r,onKeydown:h,onKeyup:m,role:"menu",tabIndex:0,ref:i.itemsRef};return ja({ourProps:V,theirProps:D,slot:$,attrs:e,slots:a,features:Bs.RenderStrategy|Bs.Static,visible:b.value,name:"MenuItems"})}}}),voe=Ce({name:"MenuItem",inheritAttrs:!1,props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},id:{type:String,default:null}},setup(n,{slots:e,attrs:a,expose:s}){var o;let r=(o=n.id)!=null?o:`headlessui-menu-item-${Vn()}`,i=a9("MenuItem"),u=O(null);s({el:u,$el:u});let h=ee(()=>i.activeItemIndex.value!==null?i.items.value[i.activeItemIndex.value].id===r:!1),m=coe(u),p=ee(()=>({disabled:n.disabled,get textValue(){return m()},domRef:u}));at(()=>i.registerItem(r,p)),rn(()=>i.unregisterItem(r)),yn(()=>{i.menuState.value===0&&h.value&&i.activationTrigger.value!==0&&En(()=>{var R,E;return(E=(R=rt(u))==null?void 0:R.scrollIntoView)==null?void 0:E.call(R,{block:"nearest"})})});function b(R){if(n.disabled)return R.preventDefault();i.closeMenu(),FH(rt(i.buttonRef))}function x(){if(n.disabled)return i.goToItem(_s.Nothing);i.goToItem(_s.Specific,r)}let w=$se();function $(R){w.update(R)}function D(R){w.wasMoved(R)&&(n.disabled||h.value||i.goToItem(_s.Specific,r,0))}function V(R){w.wasMoved(R)&&(n.disabled||h.value&&i.goToItem(_s.Nothing))}return()=>{let{disabled:R}=n,E={active:h.value,disabled:R,close:i.closeMenu},{...P}=n;return ja({ourProps:{id:r,ref:u,role:"menuitem",tabIndex:R===!0?void 0:-1,"aria-disabled":R===!0?!0:void 0,disabled:void 0,onClick:b,onFocus:x,onPointerenter:$,onMouseenter:$,onPointermove:D,onMousemove:D,onPointerleave:V,onMouseleave:V},theirProps:{...a,...P},slot:E,attrs:a,slots:e,name:"MenuItem"})}}});var yoe=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(yoe||{});let iN=Symbol("PopoverContext");function NT(n){let e=xt(iN,null);if(e===null){let a=new Error(`<${n} /> is missing a parent <${dN.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(a,NT),a}return e}let _oe=Symbol("PopoverGroupContext");function lN(){return xt(_oe,null)}let cN=Symbol("PopoverPanelContext");function goe(){return xt(cN,null)}let dN=Ce({name:"Popover",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"}},setup(n,{slots:e,attrs:a,expose:s}){var o;let r=O(null);s({el:r,$el:r});let i=O(1),u=O(null),h=O(null),m=O(null),p=O(null),b=ee(()=>Ws(r)),x=ee(()=>{var C,M;if(!rt(u)||!rt(p))return!1;for(let be of document.querySelectorAll("body > *"))if(Number(be==null?void 0:be.contains(rt(u)))^Number(be==null?void 0:be.contains(rt(p))))return!0;let g=uu(),v=g.indexOf(rt(u)),T=(v+g.length-1)%g.length,j=(v+1)%g.length,B=g[T],oe=g[j];return!((C=rt(p))!=null&&C.contains(B))&&!((M=rt(p))!=null&&M.contains(oe))}),w={popoverState:i,buttonId:O(null),panelId:O(null),panel:p,button:u,isPortalled:x,beforePanelSentinel:h,afterPanelSentinel:m,togglePopover(){i.value=en(i.value,{0:1,1:0})},closePopover(){i.value!==1&&(i.value=1)},close(C){w.closePopover();let M=C?C instanceof HTMLElement?C:C.value instanceof HTMLElement?rt(C):rt(w.button):rt(w.button);M==null||M.focus()}};St(iN,w),e9(ee(()=>en(i.value,{0:Wa.Open,1:Wa.Closed})));let $={buttonId:w.buttonId,panelId:w.panelId,close(){w.closePopover()}},D=lN(),V=D==null?void 0:D.registerPopover,[R,E]=QH(),P=ZH({mainTreeNodeRef:D==null?void 0:D.mainTreeNodeRef,portals:R,defaultContainers:[u,p]});function S(){var C,M,g,v;return(v=D==null?void 0:D.isFocusWithinPopoverGroup())!=null?v:((C=b.value)==null?void 0:C.activeElement)&&(((M=rt(u))==null?void 0:M.contains(b.value.activeElement))||((g=rt(p))==null?void 0:g.contains(b.value.activeElement)))}return yn(()=>V==null?void 0:V($)),UT((o=b.value)==null?void 0:o.defaultView,"focus",C=>{var M,g;C.target!==window&&C.target instanceof HTMLElement&&i.value===0&&(S()||u&&p&&(P.contains(C.target)||(M=rt(w.beforePanelSentinel))!=null&&M.contains(C.target)||(g=rt(w.afterPanelSentinel))!=null&&g.contains(C.target)||w.closePopover()))},!0),OT(P.resolveContainers,(C,M)=>{var g;w.closePopover(),QL(M,YL.Loose)||(C.preventDefault(),(g=rt(u))==null||g.focus())},ee(()=>i.value===0)),()=>{let C={open:i.value===0,close:w.close};return ya(ke,[ya(E,{},()=>ja({theirProps:{...n,...a},ourProps:{ref:r},slot:C,slots:e,attrs:a,name:"Popover"})),ya(P.MainTreeNode)])}}}),koe=Ce({name:"PopoverButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1},id:{type:String,default:null}},inheritAttrs:!1,setup(n,{attrs:e,slots:a,expose:s}){var o;let r=(o=n.id)!=null?o:`headlessui-popover-button-${Vn()}`,i=NT("PopoverButton"),u=ee(()=>Ws(i.button));s({el:i.button,$el:i.button}),at(()=>{i.buttonId.value=r}),rn(()=>{i.buttonId.value=null});let h=lN(),m=h==null?void 0:h.closeOthers,p=goe(),b=ee(()=>p===null?!1:p.value===i.panelId.value),x=O(null),w=`headlessui-focus-sentinel-${Vn()}`;b.value||yn(()=>{i.button.value=rt(x)});let $=JL(ee(()=>({as:n.as,type:e.type})),x);function D(C){var M,g,v,T,j;if(b.value){if(i.popoverState.value===1)return;switch(C.key){case sa.Space:case sa.Enter:C.preventDefault(),(g=(M=C.target).click)==null||g.call(M),i.closePopover(),(v=rt(i.button))==null||v.focus();break}}else switch(C.key){case sa.Space:case sa.Enter:C.preventDefault(),C.stopPropagation(),i.popoverState.value===1&&(m==null||m(i.buttonId.value)),i.togglePopover();break;case sa.Escape:if(i.popoverState.value!==0)return m==null?void 0:m(i.buttonId.value);if(!rt(i.button)||(T=u.value)!=null&&T.activeElement&&!((j=rt(i.button))!=null&&j.contains(u.value.activeElement)))return;C.preventDefault(),C.stopPropagation(),i.closePopover();break}}function V(C){b.value||C.key===sa.Space&&C.preventDefault()}function R(C){var M,g;n.disabled||(b.value?(i.closePopover(),(M=rt(i.button))==null||M.focus()):(C.preventDefault(),C.stopPropagation(),i.popoverState.value===1&&(m==null||m(i.buttonId.value)),i.togglePopover(),(g=rt(i.button))==null||g.focus()))}function E(C){C.preventDefault(),C.stopPropagation()}let P=FT();function S(){let C=rt(i.panel);if(!C)return;function M(){en(P.value,{[gs.Forwards]:()=>Ln(C,Ea.First),[gs.Backwards]:()=>Ln(C,Ea.Last)})===Jo.Error&&Ln(uu().filter(g=>g.dataset.headlessuiFocusGuard!=="true"),en(P.value,{[gs.Forwards]:Ea.Next,[gs.Backwards]:Ea.Previous}),{relativeTo:rt(i.button)})}M()}return()=>{let C=i.popoverState.value===0,M={open:C},{...g}=n,v=b.value?{ref:x,type:$.value,onKeydown:D,onClick:R}:{ref:x,id:r,type:$.value,"aria-expanded":i.popoverState.value===0,"aria-controls":rt(i.panel)?i.panelId.value:void 0,disabled:n.disabled?!0:void 0,onKeydown:D,onKeyup:V,onClick:R,onMousedown:E};return ya(ke,[ja({ourProps:v,theirProps:{...e,...g},slot:M,attrs:e,slots:a,name:"PopoverButton"}),C&&!b.value&&i.isPortalled.value&&ya(Kr,{id:w,features:Zr.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:S})])}}}),boe=Ce({name:"PopoverPanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},focus:{type:Boolean,default:!1},id:{type:String,default:null}},inheritAttrs:!1,setup(n,{attrs:e,slots:a,expose:s}){var o;let r=(o=n.id)!=null?o:`headlessui-popover-panel-${Vn()}`,{focus:i}=n,u=NT("PopoverPanel"),h=ee(()=>Ws(u.panel)),m=`headlessui-focus-sentinel-before-${Vn()}`,p=`headlessui-focus-sentinel-after-${Vn()}`;s({el:u.panel,$el:u.panel}),at(()=>{u.panelId.value=r}),rn(()=>{u.panelId.value=null}),St(cN,u.panelId),yn(()=>{var E,P;if(!i||u.popoverState.value!==0||!u.panel)return;let S=(E=h.value)==null?void 0:E.activeElement;(P=rt(u.panel))!=null&&P.contains(S)||Ln(rt(u.panel),Ea.First)});let b=Oc(),x=ee(()=>b!==null?(b.value&Wa.Open)===Wa.Open:u.popoverState.value===0);function w(E){var P,S;switch(E.key){case sa.Escape:if(u.popoverState.value!==0||!rt(u.panel)||h.value&&!((P=rt(u.panel))!=null&&P.contains(h.value.activeElement)))return;E.preventDefault(),E.stopPropagation(),u.closePopover(),(S=rt(u.button))==null||S.focus();break}}function $(E){var P,S,C,M,g;let v=E.relatedTarget;v&&rt(u.panel)&&((P=rt(u.panel))!=null&&P.contains(v)||(u.closePopover(),((C=(S=rt(u.beforePanelSentinel))==null?void 0:S.contains)!=null&&C.call(S,v)||(g=(M=rt(u.afterPanelSentinel))==null?void 0:M.contains)!=null&&g.call(M,v))&&v.focus({preventScroll:!0})))}let D=FT();function V(){let E=rt(u.panel);if(!E)return;function P(){en(D.value,{[gs.Forwards]:()=>{var S;Ln(E,Ea.First)===Jo.Error&&((S=rt(u.afterPanelSentinel))==null||S.focus())},[gs.Backwards]:()=>{var S;(S=rt(u.button))==null||S.focus({preventScroll:!0})}})}P()}function R(){let E=rt(u.panel);if(!E)return;function P(){en(D.value,{[gs.Forwards]:()=>{let S=rt(u.button),C=rt(u.panel);if(!S)return;let M=uu(),g=M.indexOf(S),v=M.slice(0,g+1),T=[...M.slice(g+1),...v];for(let j of T.slice())if(j.dataset.headlessuiFocusGuard==="true"||C!=null&&C.contains(j)){let B=T.indexOf(j);B!==-1&&T.splice(B,1)}Ln(T,Ea.First,{sorted:!1})},[gs.Backwards]:()=>{var S;Ln(E,Ea.Previous)===Jo.Error&&((S=rt(u.button))==null||S.focus())}})}P()}return()=>{let E={open:u.popoverState.value===0,close:u.close},{focus:P,...S}=n,C={ref:u.panel,id:r,onKeydown:w,onFocusout:i&&u.popoverState.value===0?$:void 0,tabIndex:-1};return ja({ourProps:C,theirProps:{...e,...S},attrs:e,slot:E,slots:{...a,default:(...M)=>{var g;return[ya(ke,[x.value&&u.isPortalled.value&&ya(Kr,{id:m,ref:u.beforePanelSentinel,features:Zr.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:V}),(g=a.default)==null?void 0:g.call(a,...M),x.value&&u.isPortalled.value&&ya(Kr,{id:p,ref:u.afterPanelSentinel,features:Zr.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:R})])]}},features:Bs.RenderStrategy|Bs.Static,visible:x.value,name:"PopoverPanel"})}}}),woe=Ce({props:{onFocus:{type:Function,required:!0}},setup(n){let e=O(!0);return()=>e.value?ya(Kr,{as:"button",type:"button",features:Zr.Focusable,onFocus(a){a.preventDefault();let s,o=50;function r(){var i;if(o--<=0){s&&cancelAnimationFrame(s);return}if((i=n.onFocus)!=null&&i.call(n)){e.value=!1,cancelAnimationFrame(s);return}s=requestAnimationFrame(r)}s=requestAnimationFrame(r)}}):null}});var xoe=(n=>(n[n.Forwards=0]="Forwards",n[n.Backwards=1]="Backwards",n))(xoe||{}),Moe=(n=>(n[n.Less=-1]="Less",n[n.Equal=0]="Equal",n[n.Greater=1]="Greater",n))(Moe||{});let uN=Symbol("TabsContext");function hu(n){let e=xt(uN,null);if(e===null){let a=new Error(`<${n} /> is missing a parent <TabGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(a,hu),a}return e}let zT=Symbol("TabsSSRContext"),Coe=Ce({name:"TabGroup",emits:{change:n=>!0},props:{as:{type:[Object,String],default:"template"},selectedIndex:{type:[Number],default:null},defaultIndex:{type:[Number],default:0},vertical:{type:[Boolean],default:!1},manual:{type:[Boolean],default:!1}},inheritAttrs:!1,setup(n,{slots:e,attrs:a,emit:s}){var o;let r=O((o=n.selectedIndex)!=null?o:n.defaultIndex),i=O([]),u=O([]),h=ee(()=>n.selectedIndex!==null),m=ee(()=>h.value?n.selectedIndex:r.value);function p(D){var V;let R=Cl(b.tabs.value,rt),E=Cl(b.panels.value,rt),P=R.filter(S=>{var C;return!((C=rt(S))!=null&&C.hasAttribute("disabled"))});if(D<0||D>R.length-1){let S=en(r.value===null?0:Math.sign(D-r.value),{[-1]:()=>1,0:()=>en(Math.sign(D),{[-1]:()=>0,0:()=>0,1:()=>1}),1:()=>0}),C=en(S,{0:()=>R.indexOf(P[0]),1:()=>R.indexOf(P[P.length-1])});C!==-1&&(r.value=C),b.tabs.value=R,b.panels.value=E}else{let S=R.slice(0,D),C=[...R.slice(D),...S].find(g=>P.includes(g));if(!C)return;let M=(V=R.indexOf(C))!=null?V:b.selectedIndex.value;M===-1&&(M=b.selectedIndex.value),r.value=M,b.tabs.value=R,b.panels.value=E}}let b={selectedIndex:ee(()=>{var D,V;return(V=(D=r.value)!=null?D:n.defaultIndex)!=null?V:null}),orientation:ee(()=>n.vertical?"vertical":"horizontal"),activation:ee(()=>n.manual?"manual":"auto"),tabs:i,panels:u,setSelectedIndex(D){m.value!==D&&s("change",D),h.value||p(D)},registerTab(D){var V;if(i.value.includes(D))return;let R=i.value[r.value];i.value.push(D),i.value=Cl(i.value,rt);let E=(V=i.value.indexOf(R))!=null?V:r.value;E!==-1&&(r.value=E)},unregisterTab(D){let V=i.value.indexOf(D);V!==-1&&i.value.splice(V,1)},registerPanel(D){u.value.includes(D)||(u.value.push(D),u.value=Cl(u.value,rt))},unregisterPanel(D){let V=u.value.indexOf(D);V!==-1&&u.value.splice(V,1)}};St(uN,b);let x=O({tabs:[],panels:[]}),w=O(!1);at(()=>{w.value=!0}),St(zT,ee(()=>w.value?null:x.value));let $=ee(()=>n.selectedIndex);return at(()=>{dt([$],()=>{var D;return p((D=n.selectedIndex)!=null?D:n.defaultIndex)},{immediate:!0})}),yn(()=>{if(!h.value||m.value==null||b.tabs.value.length<=0)return;let D=Cl(b.tabs.value,rt);D.some((V,R)=>rt(b.tabs.value[R])!==rt(V))&&b.setSelectedIndex(D.findIndex(V=>rt(V)===rt(b.tabs.value[m.value])))}),()=>{let D={selectedIndex:r.value};return ya(ke,[i.value.length<=0&&ya(woe,{onFocus:()=>{for(let V of i.value){let R=rt(V);if((R==null?void 0:R.tabIndex)===0)return R.focus(),!0}return!1}}),ja({theirProps:{...a,...VT(n,["selectedIndex","defaultIndex","manual","vertical","onChange"])},ourProps:{},slot:D,slots:e,attrs:a,name:"TabGroup"})])}}}),Soe=Ce({name:"TabList",props:{as:{type:[Object,String],default:"div"}},setup(n,{attrs:e,slots:a}){let s=hu("TabList");return()=>{let o={selectedIndex:s.selectedIndex.value},r={role:"tablist","aria-orientation":s.orientation.value};return ja({ourProps:r,theirProps:n,slot:o,attrs:e,slots:a,name:"TabList"})}}}),Ioe=Ce({name:"Tab",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1},id:{type:String,default:null}},setup(n,{attrs:e,slots:a,expose:s}){var o;let r=(o=n.id)!=null?o:`headlessui-tabs-tab-${Vn()}`,i=hu("Tab"),u=O(null);s({el:u,$el:u}),at(()=>i.registerTab(u)),rn(()=>i.unregisterTab(u));let h=xt(zT),m=ee(()=>{if(h.value){let E=h.value.tabs.indexOf(r);return E===-1?h.value.tabs.push(r)-1:E}return-1}),p=ee(()=>{let E=i.tabs.value.indexOf(u);return E===-1?m.value:E}),b=ee(()=>p.value===i.selectedIndex.value);function x(E){var P;let S=E();if(S===Jo.Success&&i.activation.value==="auto"){let C=(P=Ws(u))==null?void 0:P.activeElement,M=i.tabs.value.findIndex(g=>rt(g)===C);M!==-1&&i.setSelectedIndex(M)}return S}function w(E){let P=i.tabs.value.map(S=>rt(S)).filter(Boolean);if(E.key===sa.Space||E.key===sa.Enter){E.preventDefault(),E.stopPropagation(),i.setSelectedIndex(p.value);return}switch(E.key){case sa.Home:case sa.PageUp:return E.preventDefault(),E.stopPropagation(),x(()=>Ln(P,Ea.First));case sa.End:case sa.PageDown:return E.preventDefault(),E.stopPropagation(),x(()=>Ln(P,Ea.Last))}if(x(()=>en(i.orientation.value,{vertical(){return E.key===sa.ArrowUp?Ln(P,Ea.Previous|Ea.WrapAround):E.key===sa.ArrowDown?Ln(P,Ea.Next|Ea.WrapAround):Jo.Error},horizontal(){return E.key===sa.ArrowLeft?Ln(P,Ea.Previous|Ea.WrapAround):E.key===sa.ArrowRight?Ln(P,Ea.Next|Ea.WrapAround):Jo.Error}}))===Jo.Success)return E.preventDefault()}let $=O(!1);function D(){var E;$.value||($.value=!0,!n.disabled&&((E=rt(u))==null||E.focus({preventScroll:!0}),i.setSelectedIndex(p.value),t9(()=>{$.value=!1})))}function V(E){E.preventDefault()}let R=JL(ee(()=>({as:n.as,type:e.type})),u);return()=>{var E;let P={selected:b.value},{...S}=n,C={ref:u,onKeydown:w,onMousedown:V,onClick:D,id:r,role:"tab",type:R.value,"aria-controls":(E=rt(i.panels.value[p.value]))==null?void 0:E.id,"aria-selected":b.value,tabIndex:b.value?0:-1,disabled:n.disabled?!0:void 0};return ja({ourProps:C,theirProps:S,slot:P,attrs:e,slots:a,name:"Tab"})}}}),Loe=Ce({name:"TabPanels",props:{as:{type:[Object,String],default:"div"}},setup(n,{slots:e,attrs:a}){let s=hu("TabPanels");return()=>{let o={selectedIndex:s.selectedIndex.value};return ja({theirProps:n,ourProps:{},slot:o,attrs:a,slots:e,name:"TabPanels"})}}}),$oe=Ce({name:"TabPanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},id:{type:String,default:null},tabIndex:{type:Number,default:0}},setup(n,{attrs:e,slots:a,expose:s}){var o;let r=(o=n.id)!=null?o:`headlessui-tabs-panel-${Vn()}`,i=hu("TabPanel"),u=O(null);s({el:u,$el:u}),at(()=>i.registerPanel(u)),rn(()=>i.unregisterPanel(u));let h=xt(zT),m=ee(()=>{if(h.value){let x=h.value.panels.indexOf(r);return x===-1?h.value.panels.push(r)-1:x}return-1}),p=ee(()=>{let x=i.panels.value.indexOf(u);return x===-1?m.value:x}),b=ee(()=>p.value===i.selectedIndex.value);return()=>{var x;let w={selected:b.value},{tabIndex:$,...D}=n,V={ref:u,id:r,role:"tabpanel","aria-labelledby":(x=rt(i.tabs.value[p.value]))==null?void 0:x.id,tabIndex:b.value?$:-1};return!b.value&&n.unmount&&!n.static?ya(Kr,{as:"span","aria-hidden":!0,...V}):ja({ourProps:V,theirProps:D,slot:w,attrs:e,slots:a,features:Bs.Static|Bs.RenderStrategy,visible:b.value,name:"TabPanel"})}}});function Aoe(n){let e={called:!1};return(...a)=>{if(!e.called)return e.called=!0,n(...a)}}function eA(n,...e){n&&e.length>0&&n.classList.add(...e)}function M1(n,...e){n&&e.length>0&&n.classList.remove(...e)}var cE=(n=>(n.Finished="finished",n.Cancelled="cancelled",n))(cE||{});function Eoe(n,e){let a=pu();if(!n)return a.dispose;let{transitionDuration:s,transitionDelay:o}=getComputedStyle(n),[r,i]=[s,o].map(u=>{let[h=0]=u.split(",").filter(Boolean).map(m=>m.includes("ms")?parseFloat(m):parseFloat(m)*1e3).sort((m,p)=>p-m);return h});return r!==0?a.setTimeout(()=>e("finished"),r+i):e("finished"),a.add(()=>e("cancelled")),a.dispose}function HV(n,e,a,s,o,r){let i=pu(),u=r!==void 0?Aoe(r):()=>{};return M1(n,...o),eA(n,...e,...a),i.nextFrame(()=>{M1(n,...a),eA(n,...s),i.add(Eoe(n,h=>(M1(n,...s,...e),eA(n,...o),u(h))))}),i.add(()=>M1(n,...e,...a,...s,...o)),i.add(()=>u("cancelled")),i.dispose}function mi(n=""){return n.split(/\s+/).filter(e=>e.length>1)}let BT=Symbol("TransitionContext");var Toe=(n=>(n.Visible="visible",n.Hidden="hidden",n))(Toe||{});function Poe(){return xt(BT,null)!==null}function Doe(){let n=xt(BT,null);if(n===null)throw new Error("A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.");return n}function Roe(){let n=xt(qT,null);if(n===null)throw new Error("A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.");return n}let qT=Symbol("NestingContext");function n9(n){return"children"in n?n9(n.children):n.value.filter(({state:e})=>e==="visible").length>0}function pN(n){let e=O([]),a=O(!1);at(()=>a.value=!0),rn(()=>a.value=!1);function s(r,i=jr.Hidden){let u=e.value.findIndex(({id:h})=>h===r);u!==-1&&(en(i,{[jr.Unmount](){e.value.splice(u,1)},[jr.Hidden](){e.value[u].state="hidden"}}),!n9(e)&&a.value&&(n==null||n()))}function o(r){let i=e.value.find(({id:u})=>u===r);return i?i.state!=="visible"&&(i.state="visible"):e.value.push({id:r,state:"visible"}),()=>s(r,jr.Unmount)}return{children:e,register:o,unregister:s}}let hN=Bs.RenderStrategy,Gd=Ce({props:{as:{type:[Object,String],default:"div"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:""},enterFrom:{type:[String],default:""},enterTo:{type:[String],default:""},entered:{type:[String],default:""},leave:{type:[String],default:""},leaveFrom:{type:[String],default:""},leaveTo:{type:[String],default:""}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(n,{emit:e,attrs:a,slots:s,expose:o}){let r=O(0);function i(){r.value|=Wa.Opening,e("beforeEnter")}function u(){r.value&=~Wa.Opening,e("afterEnter")}function h(){r.value|=Wa.Closing,e("beforeLeave")}function m(){r.value&=~Wa.Closing,e("afterLeave")}if(!Poe()&&Tse())return()=>ya(rr,{...n,onBeforeEnter:i,onAfterEnter:u,onBeforeLeave:h,onAfterLeave:m},s);let p=O(null),b=ee(()=>n.unmount?jr.Unmount:jr.Hidden);o({el:p,$el:p});let{show:x,appear:w}=Doe(),{register:$,unregister:D}=Roe(),V=O(x.value?"visible":"hidden"),R={value:!0},E=Vn(),P={value:!1},S=pN(()=>{!P.value&&V.value!=="hidden"&&(V.value="hidden",D(E),m())});at(()=>{let be=$(E);rn(be)}),yn(()=>{if(b.value===jr.Hidden&&E){if(x.value&&V.value!=="visible"){V.value="visible";return}en(V.value,{hidden:()=>D(E),visible:()=>$(E)})}});let C=mi(n.enter),M=mi(n.enterFrom),g=mi(n.enterTo),v=mi(n.entered),T=mi(n.leave),j=mi(n.leaveFrom),B=mi(n.leaveTo);at(()=>{yn(()=>{if(V.value==="visible"){let be=rt(p);if(be instanceof Comment&&be.data==="")throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}})});function oe(be){let $e=R.value&&!w.value,Le=rt(p);!Le||!(Le instanceof HTMLElement)||$e||(P.value=!0,x.value&&i(),x.value||h(),be(x.value?HV(Le,C,M,g,v,de=>{P.value=!1,de===cE.Finished&&u()}):HV(Le,T,j,B,v,de=>{P.value=!1,de===cE.Finished&&(n9(S)||(V.value="hidden",D(E),m()))})))}return at(()=>{dt([x],(be,$e,Le)=>{oe(Le),R.value=!1},{immediate:!0})}),St(qT,S),e9(ee(()=>en(V.value,{visible:Wa.Open,hidden:Wa.Closed})|r.value)),()=>{let{appear:be,show:$e,enter:Le,enterFrom:de,enterTo:J,entered:G,leave:ce,leaveFrom:Ee,leaveTo:He,...Ke}=n,pt={ref:p},ut={...Ke,...w.value&&x.value&&du.isServer?{class:F([a.class,Ke.class,...C,...M])}:{}};return ja({theirProps:ut,ourProps:pt,slot:{},slots:s,attrs:a,features:hN,visible:V.value==="visible",name:"TransitionChild"})}}}),Ooe=Gd,rr=Ce({inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:""},enterFrom:{type:[String],default:""},enterTo:{type:[String],default:""},entered:{type:[String],default:""},leave:{type:[String],default:""},leaveFrom:{type:[String],default:""},leaveTo:{type:[String],default:""}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(n,{emit:e,attrs:a,slots:s}){let o=Oc(),r=ee(()=>n.show===null&&o!==null?(o.value&Wa.Open)===Wa.Open:n.show);yn(()=>{if(![!0,!1].includes(r.value))throw new Error('A <Transition /> is used but it is missing a `:show="true | false"` prop.')});let i=O(r.value?"visible":"hidden"),u=pN(()=>{i.value="hidden"}),h=O(!0),m={show:r,appear:ee(()=>n.appear||!h.value)};return at(()=>{yn(()=>{h.value=!1,r.value?i.value="visible":n9(u)||(i.value="hidden")})}),St(qT,u),St(BT,m),()=>{let p=VT(n,["show","appear","unmount","onBeforeEnter","onBeforeLeave","onAfterEnter","onAfterLeave"]),b={unmount:n.unmount};return ja({ourProps:{...b,as:"template"},theirProps:{},slot:{},slots:{...s,default:()=>[ya(Ooe,{onBeforeEnter:()=>e("beforeEnter"),onAfterEnter:()=>e("afterEnter"),onBeforeLeave:()=>e("beforeLeave"),onAfterLeave:()=>e("afterLeave"),...a,...b,...p},s.default)]},attrs:{},features:hN,visible:i.value==="visible",name:"Transition"})}}});const Voe={inheritAttrs:!1},Uoe=Ce({...Voe,__name:"Menu",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["relative",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(hoe),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),Foe={inheritAttrs:!1},joe=Ce({...Foe,__name:"Button",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["cursor-pointer",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(foe),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),Hoe={inheritAttrs:!1},Noe=Ce({...Hoe,__name:"Items",props:{as:{default:"div"},placement:{default:"bottom-end"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["p-2 shadow-[0px_3px_10px_#00000017] bg-white border-transparent rounded-md dark:bg-darkmode-600 dark:border-transparent",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(rr),{as:"template",enter:"transition-all ease-linear duration-150",enterFrom:"mt-5 invisible opacity-0 translate-y-1",enterTo:"mt-1 visible opacity-100 translate-y-0",entered:"mt-1",leave:"transition-all ease-linear duration-150",leaveFrom:"mt-1 visible opacity-100 translate-y-0",leaveTo:"mt-5 invisible opacity-0 translate-y-1"},{default:f(()=>[c("div",{class:F(["absolute z-30",{"left-0 bottom-[100%]":o.placement=="top-start"},{"left-[50%] translate-x-[-50%] bottom-[100%]":o.placement=="top"},{"right-0 bottom-[100%]":o.placement=="top-end"},{"left-[100%] translate-y-[-50%]":o.placement=="right-start"},{"left-[100%] top-[50%] translate-y-[-50%]":o.placement=="right"},{"left-[100%] bottom-0":o.placement=="right-end"},{"top-[100%] right-0":o.placement=="bottom-end"},{"top-[100%] left-[50%] translate-x-[-50%]":o.placement=="bottom"},{"top-[100%] left-0":o.placement=="bottom-start"},{"right-[100%] translate-y-[-50%]":o.placement=="left-start"},{"right-[100%] top-[50%] translate-y-[-50%]":o.placement=="left"},{"right-[100%] bottom-0":o.placement=="left-end"}])},[l(t(moe),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3})],2)]),_:3}))}}),zoe={inheritAttrs:!1},Boe=Ce({...zoe,__name:"Item",props:{as:{default:"a"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(voe),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),qoe={inheritAttrs:!1},Woe=Ce({...qoe,__name:"Divider",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))}}),Goe={inheritAttrs:!1},Zoe=Ce({...Goe,__name:"Header",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["p-2 font-medium",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))}}),Koe={inheritAttrs:!1},Xoe=Ce({...Koe,__name:"Footer",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["flex p-1",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))}}),Xa=Object.assign({},Uoe,{Button:joe,Items:Noe,Item:Boe,Divider:Woe,Header:Zoe,Footer:Xoe}),Yoe={inheritAttrs:!1},Qoe=Ce({...Yoe,__name:"Popover",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["relative",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(dN),{as:"template"},{default:f(({close:i})=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default",{close:i})]),_:2},1040,["class"]))]),_:3}))}}),Joe={inheritAttrs:!1},ere=Ce({...Joe,__name:"Button",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["cursor-pointer",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(koe),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),tre={inheritAttrs:!1},are=Ce({...tre,__name:"Panel",props:{as:{default:"div"},placement:{default:"bottom-end"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["p-2 shadow-[0px_3px_20px_#0000000b] bg-white border-transparent rounded-md dark:bg-darkmode-600 dark:border-transparent",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(rr),{as:"template",enter:"transition-all ease-linear duration-150",enterFrom:"mt-5 invisible opacity-0 translate-y-1",enterTo:"mt-1 visible opacity-100 translate-y-0",entered:"mt-1",leave:"transition-all ease-linear duration-150",leaveFrom:"mt-1 visible opacity-100 translate-y-0",leaveTo:"mt-5 invisible opacity-0 translate-y-1"},{default:f(()=>[c("div",{class:F(["absolute z-30",{"left-0 bottom-[100%]":o.placement=="top-start"},{"left-[50%] translate-x-[-50%] bottom-[100%]":o.placement=="top"},{"right-0 bottom-[100%]":o.placement=="top-end"},{"left-[100%] translate-y-[-50%]":o.placement=="right-start"},{"left-[100%] top-[50%] translate-y-[-50%]":o.placement=="right"},{"left-[100%] bottom-0":o.placement=="right-end"},{"top-[100%] right-0":o.placement=="bottom-end"},{"top-[100%] left-[50%] translate-x-[-50%]":o.placement=="bottom"},{"top-[100%] left-0":o.placement=="bottom-start"},{"right-[100%] translate-y-[-50%]":o.placement=="left-start"},{"right-[100%] top-[50%] translate-y-[-50%]":o.placement=="left"},{"right-[100%] bottom-0":o.placement=="left-end"}])},[l(t(boe),Ft({as:e,class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"])],2)]),_:3}))}});Object.assign({},Qoe,{Button:ere,Panel:are});const nre=Ce({__name:"Provider",props:{selected:{type:Boolean,default:!1}},setup(n){const e=n;return St("tab",{selected:ee(()=>e.selected)}),(a,s)=>Lt(a.$slots,"default")}}),sre=Ce({__name:"Tab",props:{fullWidth:{type:Boolean,default:!0}},setup(n){const{fullWidth:e}=n,a=xt("list");return(s,o)=>(L(),ge(t(Ioe),{as:"template"},{default:f(({selected:r})=>[c("li",{class:F(["focus-visible:outline-none",{"flex-1":e},{"-mb-px":t(a)&&t(a).variant=="tabs"}])},[l(nre,{selected:r},{default:f(()=>[Lt(s.$slots,"default",{selected:r})]),_:2},1032,["selected"])],2)]),_:3}))}}),ore={inheritAttrs:!1},rre=Ce({...ore,__name:"Button",props:{as:{default:"a"}},setup(n){const{as:e}=n,a=Ot(),s=xt("tab"),o=xt("list"),r=ee(()=>At(["cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400",(s==null?void 0:s.selected.value)&&"text-slate-800 dark:text-white",(o==null?void 0:o.variant)=="tabs"&&"block border-transparent rounded-t-md dark:border-transparent",(o==null?void 0:o.variant)=="tabs"&&(s==null?void 0:s.selected.value)&&"bg-white border-slate-200 border-b-transparent font-medium dark:bg-transparent dark:border-t-darkmode-400 dark:border-b-darkmode-600 dark:border-x-darkmode-400",(o==null?void 0:o.variant)=="tabs"&&!(s!=null&&s.selected.value)&&"hover:bg-slate-100 dark:hover:bg-darkmode-400 dark:hover:border-transparent",(o==null?void 0:o.variant)=="pills"&&"rounded-md border-0",(o==null?void 0:o.variant)=="pills"&&(s==null?void 0:s.selected.value)&&"bg-primary text-white font-medium",(o==null?void 0:o.variant)=="boxed-tabs"&&"shadow-[0px_3px_20px_#0000000b] rounded-md",(o==null?void 0:o.variant)=="boxed-tabs"&&(s==null?void 0:s.selected.value)&&"bg-primary text-white font-medium",(o==null?void 0:o.variant)=="link-tabs"&&"border-b-2 border-transparent dark:border-transparent",(o==null?void 0:o.variant)=="link-tabs"&&(s==null?void 0:s.selected.value)&&"border-b-primary font-medium dark:border-b-primary",typeof a.class=="string"&&a.class]));return(i,u)=>(L(),ge(Da(e),Ft({class:r.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(i.$slots,"default")]),_:3},16,["class"]))}}),ire=Ce({__name:"Group",setup(n){return(e,a)=>(L(),ge(t(Coe),{as:"div"},{default:f(()=>[Lt(e.$slots,"default")]),_:3}))}}),lre={inheritAttrs:!1},cre=Ce({...lre,__name:"List",props:{variant:{default:"tabs"}},setup(n){const{variant:e}=n,a=Ot(),s=ee(()=>At([e=="tabs"&&"border-b border-slate-200 dark:border-darkmode-400","w-full flex",typeof a.class=="string"&&a.class]));return St("list",{variant:e}),(o,r)=>(L(),ge(t(Soe),Ft({as:"ul",class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))}}),dre=Ce({__name:"Panels",setup(n){return(e,a)=>(L(),ge(t(Loe),{as:"div"},{default:f(()=>[Lt(e.$slots,"default")]),_:3}))}}),ure=Ce({__name:"Panel",setup(n){return(e,a)=>(L(),ge(t($oe),{as:"template"},{default:f(({selected:s})=>[l(t(rr),{appear:"",as:"div",show:s,enter:"transition-opacity duration-300",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"transition-opacity duration-300",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{default:f(()=>[Lt(e.$slots,"default",{selected:s})]),_:2},1032,["show"])]),_:3}))}});Object.assign({},sre,{Button:rre,Group:ire,List:cre,Panels:dre,Panel:ure});const pre={inheritAttrs:!1},hre=Ce({...pre,__name:"Dialog",props:{size:{default:"md"},open:{type:Boolean,default:!1},staticBackdrop:{type:Boolean}},emits:["close","after-leave"],setup(n,{emit:e}){const a=n,{as:s,onClose:o,staticBackdrop:r,size:i}=a,u=ee(()=>a.open),h=Ot(),m=ee(()=>At(["relative z-[60]",typeof h.class=="string"&&h.class])),p=O(!1),b=e,x=()=>{b("after-leave")},w=$=>{r?(p.value=!0,setTimeout(()=>{p.value=!1},300)):(o&&o($),b("close",$))};return St("dialog",{open:u.value,zoom:p,size:i}),($,D)=>(L(),ge(t(rr),{appear:"",as:"template",show:u.value,onAfterLeave:x},{default:f(()=>[l(t(eN),Ft({as:t(s),onClose:D[0]||(D[0]=V=>{w(V)}),class:m.value},t(Pt).omit(t(h),"class","onClose")),{default:f(()=>[Lt($.$slots,"default")]),_:3},16,["as","class"])]),_:3},8,["show"]))}}),fre={inheritAttrs:!1},mre=Ce({...fre,__name:"Description",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["p-5",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(nN),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),vre={inheritAttrs:!1},yre=Ce({...vre,__name:"Footer",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))}}),_re={inheritAttrs:!1},gre=Ce({..._re,__name:"Panel",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=xt("dialog"),s=Ot(),o=ee(()=>At(["w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-transform dark:bg-darkmode-600",(a==null?void 0:a.size)=="md"&&"sm:w-[460px]",(a==null?void 0:a.size)=="sm"&&"sm:w-[300px]",(a==null?void 0:a.size)=="lg"&&"sm:w-[600px]",(a==null?void 0:a.size)=="xl"&&"sm:w-[600px] lg:w-[900px] xl:w-[1100px]",(a==null?void 0:a.zoom.value)&&"scale-105",typeof s.class=="string"&&s.class]));return(r,i)=>(L(),U(ke,null,[l(t(Gd),{as:"div",enter:"ease-in-out duration-500",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"ease-in-out duration-[400ms]",leaveFrom:"opacity-100",leaveTo:"opacity-0",class:"fixed inset-0 bg-black/60","aria-hidden":"true"}),l(t(Gd),{as:"div",enter:"ease-in-out duration-500",enterFrom:"opacity-0 -mt-16",enterTo:"opacity-100 mt-16",entered:"opacity-100 mt-16",leave:"ease-in-out duration-[400ms]",leaveFrom:"opacity-100 mt-16",leaveTo:"opacity-0 -mt-16",class:"fixed inset-0"},{default:f(()=>[l(t(tN),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:o.value},t(Pt).omit(t(s),"class")),{default:f(()=>[Lt(r.$slots,"default")]),_:3},16,["class"]))]),_:3})]),_:3})],64))}}),kre={inheritAttrs:!1},bre=Ce({...kre,__name:"Title",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(aN),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),$t=Object.assign({},hre,{Description:mre,Footer:yre,Panel:gre,Title:bre}),wre=Ce({__name:"Provider",props:{open:{type:Boolean,default:!1},close:{type:Function,default:()=>{}},index:{default:0}},setup(n){const e=n;return St("disclosure",ee(()=>({open:e.open,close:e.close,index:e.index}))),(a,s)=>Lt(a.$slots,"default")}}),xre={inheritAttrs:!1},Mre=Ce({...xre,__name:"Disclosure",props:{index:{default:0}},setup(n){const{index:e}=n,a=xt("group"),s=Ot(),o=ee(()=>At(["py-4 first:-mt-4 last:-mb-4","[&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400",(a==null?void 0:a.value.variant)=="boxed"&&"p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400",typeof s.class=="string"&&s.class]));return(r,i)=>{var u;return L(),ge(t(ooe),Ft({as:"div",defaultOpen:((u=t(a))==null?void 0:u.selectedIndex)===e,class:o.value},t(Pt).omit(t(s),"class")),{default:f(({open:h,close:m})=>[l(wre,{open:h,close:m,index:e},{default:f(()=>[Lt(r.$slots,"default",{open:h,close:m})]),_:2},1032,["open","close"])]),_:3},16,["defaultOpen","class"])}}}),Cre=Ce({__name:"Group",props:{as:{default:"div"},selectedIndex:{default:0},variant:{default:"default"}},setup(n){const e=Oj(),{as:a,selectedIndex:s,variant:o}=n,r=O(s),i=u=>{r.value=u};return St("group",ee(()=>({selectedIndex:r.value,setSelectedIndex:i,variant:o}))),(u,h)=>(L(),ge(Da(a),null,{default:f(()=>[(L(!0),U(ke,null,Fe(t(e).default&&t(e).default(),(m,p)=>(L(),ge(Da(m),{index:p},null,8,["index"]))),256))]),_:1}))}}),Sre={inheritAttrs:!1},Ire=Ce({...Sre,__name:"Button",props:{as:{default:"button"}},setup(n){const{as:e}=n,a=xt("disclosure"),s=xt("group");s&&dt(s,()=>{s.value.selectedIndex!==(a==null?void 0:a.value.index)&&(a==null||a.value.close())});const o=Ot(),r=ee(()=>At(["outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400",(a==null?void 0:a.value.open)&&"text-primary dark:text-slate-300",typeof o.class=="string"&&o.class]));return(i,u)=>(L(),ge(t(roe),{as:"template",onClick:u[0]||(u[0]=()=>{var h;t(a)&&((h=t(s))==null||h.setSelectedIndex(t(a).index))})},{default:f(()=>[(L(),ge(Da(e),Ft({class:r.value},t(Pt).omit(t(o),"class")),{default:f(()=>[Lt(i.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),Lre={inheritAttrs:!1},$re=Ce({...Lre,__name:"Panel",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["mt-3 text-slate-700 leading-relaxed dark:text-slate-400",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(rr),{as:"template",enter:"overflow-hidden transition-all linear duration-[400ms]",enterFrom:"mt-0 max-h-0 invisible opacity-0",enterTo:"mt-3 max-h-[2000px] visible opacity-100",entered:"mt-3",leave:"overflow-hidden transition-all linear duration-500",leaveFrom:"mt-3 max-h-[2000px] visible opacity-100",leaveTo:"mt-0 max-h-0 invisible opacity-0"},{default:f(()=>[l(t(ioe),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3})]),_:3}))}});Object.assign({},Mre,{Group:Cre,Button:Ire,Panel:$re});const Are={inheritAttrs:!1},Ere=Ce({...Are,__name:"Slideover",props:{size:{default:"md"},open:{type:Boolean,default:!1},staticBackdrop:{type:Boolean}},emits:["close"],setup(n,{emit:e}){const a=n,{as:s,onClose:o,staticBackdrop:r,size:i}=a,u=ee(()=>a.open),h=Ot(),m=ee(()=>At(["relative z-[60]",typeof h.class=="string"&&h.class])),p=O(!1),b=e,x=w=>{r?(p.value=!0,setTimeout(()=>{p.value=!1},300)):(o&&o(w),b("close",w))};return St("slideover",{open:u.value,zoom:p,size:i}),(w,$)=>(L(),ge(t(rr),{appear:"",as:"template",show:u.value},{default:f(()=>[l(t(eN),Ft({as:t(s),onClose:$[0]||($[0]=D=>{x(D)}),class:m.value},t(Pt).omit(t(h),"class","onClose")),{default:f(()=>[Lt(w.$slots,"default")]),_:3},16,["as","class"])]),_:3},8,["show"]))}}),Tre={inheritAttrs:!1},Pre=Ce({...Tre,__name:"Description",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["p-5 overflow-y-auto flex-1",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(nN),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),Dre={inheritAttrs:!1},Rre=Ce({...Dre,__name:"Footer",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))}}),Ore={inheritAttrs:!1},Vre=Ce({...Ore,__name:"Panel",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=xt("slideover"),s=Ot(),o=ee(()=>At(["w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-transform dark:bg-darkmode-600",(a==null?void 0:a.size)=="md"&&"sm:w-[460px]",(a==null?void 0:a.size)=="sm"&&"sm:w-[300px]",(a==null?void 0:a.size)=="lg"&&"sm:w-[600px]",(a==null?void 0:a.size)=="xl"&&"sm:w-[600px] lg:w-[900px]",(a==null?void 0:a.zoom.value)&&"scale-105",typeof s.class=="string"&&s.class]));return(r,i)=>(L(),U(ke,null,[l(t(Gd),{as:"div",enter:"ease-in-out duration-500",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"ease-in-out duration-[400ms]",leaveFrom:"opacity-100",leaveTo:"opacity-0",class:"fixed inset-0 bg-black/60","aria-hidden":"true"}),l(t(Gd),{as:"div",enter:"ease-in-out duration-500",enterFrom:"opacity-0 -mr-[100%]",enterTo:"opacity-100 mr-0",leave:"ease-in-out duration-[400ms]",leaveFrom:"opacity-100 mr-0",leaveTo:"opacity-0 -mr-[100%]",class:"fixed inset-y-0 right-0"},{default:f(()=>[l(t(tN),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:o.value},t(Pt).omit(t(s),"class")),{default:f(()=>[Lt(r.$slots,"default")]),_:3},16,["class"]))]),_:3})]),_:3})],64))}}),Ure={inheritAttrs:!1},Fre=Ce({...Ure,__name:"Title",props:{as:{default:"div"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(t(aN),{as:"template"},{default:f(()=>[(L(),ge(Da(e),Ft({class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))]),_:3}))}}),Fr=Object.assign({},Ere,{Description:Pre,Footer:Rre,Panel:Vre,Title:Fre}),Za=Qr("userContext",{state:()=>({isLoaded:!1,isAuthenticated:!1,userContext:{id:"",ulid:"",name:"",email:"",email_verified:!1,profile:{first_name:"",last_name:"",address:"",city:"",postal_code:"",country:"",status:"",tax_id:0,ic_num:0,img_path:"",remarks:""},roles:[],companies:[],settings:{theme:"",date_format:"",time_format:""},two_factor:!1,personal_access_tokens:0}}),getters:{getIsLoaded:n=>n.isLoaded,getIsAuthenticated:n=>n.isAuthenticated,getUserContext:n=>n.userContext},actions:{setUserContext(n){this.userContext=n,this.isLoaded=!0,this.isAuthenticated=!0}}}),zt=Qr("selectedUserLocation",{state:()=>({isUserLocationSelected:!1,selectedUserLocation:{company:{id:"",ulid:"",code:"",name:""},branch:{id:"",ulid:"",code:"",name:""}}}),getters:{getSelectedUserLocation:n=>{const e=sessionStorage.getItem("selectedUserLocation");if(e){const a=JSON.parse(e);n.selectedUserLocation=a,n.isUserLocationSelected=!0}return n.selectedUserLocation},getSelectedUserCompany:n=>{const e=sessionStorage.getItem("selectedUserLocation");if(e){const a=JSON.parse(e);n.selectedUserLocation=a,n.isUserLocationSelected=!0}return n.selectedUserLocation.company},getSelectedUserBranch:n=>{const e=sessionStorage.getItem("selectedUserLocation");if(e){const a=JSON.parse(e);n.selectedUserLocation=a,n.isUserLocationSelected=!0}return n.selectedUserLocation.branch}},actions:{clearSelectedUserLocation(){this.selectedUserLocation.company={id:"",ulid:"",code:"",name:""},this.selectedUserLocation.branch={id:"",ulid:"",code:"",name:""},this.isUserLocationSelected=!1},setSelectedUserLocation(n,e,a,s,o,r,i,u){this.clearSelectedUserLocation(),this.selectedUserLocation.company.id=n,this.selectedUserLocation.company.ulid=e,this.selectedUserLocation.company.code=a,this.selectedUserLocation.company.name=s,o&&(this.selectedUserLocation.branch.id=o),r&&(this.selectedUserLocation.branch.ulid=r),i&&(this.selectedUserLocation.branch.code=i),u&&(this.selectedUserLocation.branch.name=u),sessionStorage.setItem("selectedUserLocation",JSON.stringify(this.selectedUserLocation)),this.isUserLocationSelected=!0,window.location.reload()}}});/*!
+  * shared v9.11.0
+  * (c) 2024 kazuya kawaguchi
+  * Released under the MIT License.
+  */const gL=typeof window<"u",ei=(n,e=!1)=>e?Symbol.for(n):Symbol(n),jre=(n,e,a)=>Hre({l:n,k:e,s:a}),Hre=n=>JSON.stringify(n).replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029").replace(/\u0027/g,"\\u0027"),wn=n=>typeof n=="number"&&isFinite(n),Nre=n=>mN(n)==="[object Date]",Xr=n=>mN(n)==="[object RegExp]",s9=n=>Gt(n)&&Object.keys(n).length===0,Un=Object.assign;let NV;const Yo=()=>NV||(NV=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function zV(n){return n.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")}const zre=Object.prototype.hasOwnProperty;function kL(n,e){return zre.call(n,e)}const Ga=Array.isArray,Fa=n=>typeof n=="function",bt=n=>typeof n=="string",ia=n=>typeof n=="boolean",Ca=n=>n!==null&&typeof n=="object",Bre=n=>Ca(n)&&Fa(n.then)&&Fa(n.catch),fN=Object.prototype.toString,mN=n=>fN.call(n),Gt=n=>{if(!Ca(n))return!1;const e=Object.getPrototypeOf(n);return e===null||e.constructor===Object},qre=n=>n==null?"":Ga(n)||Gt(n)&&n.toString===fN?JSON.stringify(n,null,2):String(n);function Wre(n,e=""){return n.reduce((a,s,o)=>o===0?a+s:a+e+s,"")}function WT(n){let e=n;return()=>++e}function Gre(n,e){typeof console<"u"&&(console.warn("[intlify] "+n),e&&console.warn(e.stack))}const C1=n=>!Ca(n)||Ga(n);function JI(n,e){if(C1(n)||C1(e))throw new Error("Invalid value");const a=[{src:n,des:e}];for(;a.length;){const{src:s,des:o}=a.pop();Object.keys(s).forEach(r=>{C1(s[r])||C1(o[r])?o[r]=s[r]:a.push({src:s[r],des:o[r]})})}}/*!
+  * message-compiler v9.11.0
+  * (c) 2024 kazuya kawaguchi
+  * Released under the MIT License.
+  */function Zre(n,e,a){return{line:n,column:e,offset:a}}function dE(n,e,a){const s={start:n,end:e};return a!=null&&(s.source=a),s}const Kre=/\{([0-9a-zA-Z]+)\}/g;function Xre(n,...e){return e.length===1&&Yre(e[0])&&(e=e[0]),(!e||!e.hasOwnProperty)&&(e={}),n.replace(Kre,(a,s)=>e.hasOwnProperty(s)?e[s]:"")}const vN=Object.assign,BV=n=>typeof n=="string",Yre=n=>n!==null&&typeof n=="object";function yN(n,e=""){return n.reduce((a,s,o)=>o===0?a+s:a+e+s,"")}const Nt={EXPECTED_TOKEN:1,INVALID_TOKEN_IN_PLACEHOLDER:2,UNTERMINATED_SINGLE_QUOTE_IN_PLACEHOLDER:3,UNKNOWN_ESCAPE_SEQUENCE:4,INVALID_UNICODE_ESCAPE_SEQUENCE:5,UNBALANCED_CLOSING_BRACE:6,UNTERMINATED_CLOSING_BRACE:7,EMPTY_PLACEHOLDER:8,NOT_ALLOW_NEST_PLACEHOLDER:9,INVALID_LINKED_FORMAT:10,MUST_HAVE_MESSAGES_IN_PLURAL:11,UNEXPECTED_EMPTY_LINKED_MODIFIER:12,UNEXPECTED_EMPTY_LINKED_KEY:13,UNEXPECTED_LEXICAL_ANALYSIS:14,UNHANDLED_CODEGEN_NODE_TYPE:15,UNHANDLED_MINIFIER_NODE_TYPE:16,__EXTEND_POINT__:17},Qre={[Nt.EXPECTED_TOKEN]:"Expected token: '{0}'",[Nt.INVALID_TOKEN_IN_PLACEHOLDER]:"Invalid token in placeholder: '{0}'",[Nt.UNTERMINATED_SINGLE_QUOTE_IN_PLACEHOLDER]:"Unterminated single quote in placeholder",[Nt.UNKNOWN_ESCAPE_SEQUENCE]:"Unknown escape sequence: \\{0}",[Nt.INVALID_UNICODE_ESCAPE_SEQUENCE]:"Invalid unicode escape sequence: {0}",[Nt.UNBALANCED_CLOSING_BRACE]:"Unbalanced closing brace",[Nt.UNTERMINATED_CLOSING_BRACE]:"Unterminated closing brace",[Nt.EMPTY_PLACEHOLDER]:"Empty placeholder",[Nt.NOT_ALLOW_NEST_PLACEHOLDER]:"Not allowed nest placeholder",[Nt.INVALID_LINKED_FORMAT]:"Invalid linked format",[Nt.MUST_HAVE_MESSAGES_IN_PLURAL]:"Plural must have messages",[Nt.UNEXPECTED_EMPTY_LINKED_MODIFIER]:"Unexpected empty linked modifier",[Nt.UNEXPECTED_EMPTY_LINKED_KEY]:"Unexpected empty linked key",[Nt.UNEXPECTED_LEXICAL_ANALYSIS]:"Unexpected lexical analysis in token: '{0}'",[Nt.UNHANDLED_CODEGEN_NODE_TYPE]:"unhandled codegen node type: '{0}'",[Nt.UNHANDLED_MINIFIER_NODE_TYPE]:"unhandled mimifier node type: '{0}'"};function Vc(n,e,a={}){const{domain:s,messages:o,args:r}=a,i=Xre((o||Qre)[n]||"",...r||[]),u=new SyntaxError(String(i));return u.code=n,e&&(u.location=e),u.domain=s,u}function Jre(n){throw n}const Go=" ",eie="\r",Zn=`
+`,tie="\u2028",aie="\u2029";function nie(n){const e=n;let a=0,s=1,o=1,r=0;const i=g=>e[g]===eie&&e[g+1]===Zn,u=g=>e[g]===Zn,h=g=>e[g]===aie,m=g=>e[g]===tie,p=g=>i(g)||u(g)||h(g)||m(g),b=()=>a,x=()=>s,w=()=>o,$=()=>r,D=g=>i(g)||h(g)||m(g)?Zn:e[g],V=()=>D(a),R=()=>D(a+r);function E(){return r=0,p(a)&&(s++,o=0),i(a)&&a++,a++,o++,e[a]}function P(){return i(a+r)&&r++,r++,e[a+r]}function S(){a=0,s=1,o=1,r=0}function C(g=0){r=g}function M(){const g=a+r;for(;g!==a;)E();r=0}return{index:b,line:x,column:w,peekOffset:$,charAt:D,currentChar:V,currentPeek:R,next:E,peek:P,reset:S,resetPeek:C,skipToPeek:M}}const Ir=void 0,sie=".",qV="'",oie="tokenizer";function rie(n,e={}){const a=e.location!==!1,s=nie(n),o=()=>s.index(),r=()=>Zre(s.line(),s.column(),s.index()),i=r(),u=o(),h={currentType:14,offset:u,startLoc:i,endLoc:i,lastType:14,lastOffset:u,lastStartLoc:i,lastEndLoc:i,braceNest:0,inLinked:!1,text:""},m=()=>h,{onError:p}=e;function b(H,N,Q,...he){const Se=m();if(N.column+=Q,N.offset+=Q,p){const Re=a?dE(Se.startLoc,N):null,Ze=Vc(H,Re,{domain:oie,args:he});p(Ze)}}function x(H,N,Q){H.endLoc=r(),H.currentType=N;const he={type:N};return a&&(he.loc=dE(H.startLoc,H.endLoc)),Q!=null&&(he.value=Q),he}const w=H=>x(H,14);function $(H,N){return H.currentChar()===N?(H.next(),N):(b(Nt.EXPECTED_TOKEN,r(),0,N),"")}function D(H){let N="";for(;H.currentPeek()===Go||H.currentPeek()===Zn;)N+=H.currentPeek(),H.peek();return N}function V(H){const N=D(H);return H.skipToPeek(),N}function R(H){if(H===Ir)return!1;const N=H.charCodeAt(0);return N>=97&&N<=122||N>=65&&N<=90||N===95}function E(H){if(H===Ir)return!1;const N=H.charCodeAt(0);return N>=48&&N<=57}function P(H,N){const{currentType:Q}=N;if(Q!==2)return!1;D(H);const he=R(H.currentPeek());return H.resetPeek(),he}function S(H,N){const{currentType:Q}=N;if(Q!==2)return!1;D(H);const he=H.currentPeek()==="-"?H.peek():H.currentPeek(),Se=E(he);return H.resetPeek(),Se}function C(H,N){const{currentType:Q}=N;if(Q!==2)return!1;D(H);const he=H.currentPeek()===qV;return H.resetPeek(),he}function M(H,N){const{currentType:Q}=N;if(Q!==8)return!1;D(H);const he=H.currentPeek()===".";return H.resetPeek(),he}function g(H,N){const{currentType:Q}=N;if(Q!==9)return!1;D(H);const he=R(H.currentPeek());return H.resetPeek(),he}function v(H,N){const{currentType:Q}=N;if(!(Q===8||Q===12))return!1;D(H);const he=H.currentPeek()===":";return H.resetPeek(),he}function T(H,N){const{currentType:Q}=N;if(Q!==10)return!1;const he=()=>{const Re=H.currentPeek();return Re==="{"?R(H.peek()):Re==="@"||Re==="%"||Re==="|"||Re===":"||Re==="."||Re===Go||!Re?!1:Re===Zn?(H.peek(),he()):R(Re)},Se=he();return H.resetPeek(),Se}function j(H){D(H);const N=H.currentPeek()==="|";return H.resetPeek(),N}function B(H){const N=D(H),Q=H.currentPeek()==="%"&&H.peek()==="{";return H.resetPeek(),{isModulo:Q,hasSpace:N.length>0}}function oe(H,N=!0){const Q=(Se=!1,Re="",Ze=!1)=>{const ze=H.currentPeek();return ze==="{"?Re==="%"?!1:Se:ze==="@"||!ze?Re==="%"?!0:Se:ze==="%"?(H.peek(),Q(Se,"%",!0)):ze==="|"?Re==="%"||Ze?!0:!(Re===Go||Re===Zn):ze===Go?(H.peek(),Q(!0,Go,Ze)):ze===Zn?(H.peek(),Q(!0,Zn,Ze)):!0},he=Q();return N&&H.resetPeek(),he}function be(H,N){const Q=H.currentChar();return Q===Ir?Ir:N(Q)?(H.next(),Q):null}function $e(H){return be(H,Q=>{const he=Q.charCodeAt(0);return he>=97&&he<=122||he>=65&&he<=90||he>=48&&he<=57||he===95||he===36})}function Le(H){return be(H,Q=>{const he=Q.charCodeAt(0);return he>=48&&he<=57})}function de(H){return be(H,Q=>{const he=Q.charCodeAt(0);return he>=48&&he<=57||he>=65&&he<=70||he>=97&&he<=102})}function J(H){let N="",Q="";for(;N=Le(H);)Q+=N;return Q}function G(H){V(H);const N=H.currentChar();return N!=="%"&&b(Nt.EXPECTED_TOKEN,r(),0,N),H.next(),"%"}function ce(H){let N="";for(;;){const Q=H.currentChar();if(Q==="{"||Q==="}"||Q==="@"||Q==="|"||!Q)break;if(Q==="%")if(oe(H))N+=Q,H.next();else break;else if(Q===Go||Q===Zn)if(oe(H))N+=Q,H.next();else{if(j(H))break;N+=Q,H.next()}else N+=Q,H.next()}return N}function Ee(H){V(H);let N="",Q="";for(;N=$e(H);)Q+=N;return H.currentChar()===Ir&&b(Nt.UNTERMINATED_CLOSING_BRACE,r(),0),Q}function He(H){V(H);let N="";return H.currentChar()==="-"?(H.next(),N+=`-${J(H)}`):N+=J(H),H.currentChar()===Ir&&b(Nt.UNTERMINATED_CLOSING_BRACE,r(),0),N}function Ke(H){V(H),$(H,"'");let N="",Q="";const he=Re=>Re!==qV&&Re!==Zn;for(;N=be(H,he);)N==="\\"?Q+=pt(H):Q+=N;const Se=H.currentChar();return Se===Zn||Se===Ir?(b(Nt.UNTERMINATED_SINGLE_QUOTE_IN_PLACEHOLDER,r(),0),Se===Zn&&(H.next(),$(H,"'")),Q):($(H,"'"),Q)}function pt(H){const N=H.currentChar();switch(N){case"\\":case"'":return H.next(),`\\${N}`;case"u":return ut(H,N,4);case"U":return ut(H,N,6);default:return b(Nt.UNKNOWN_ESCAPE_SEQUENCE,r(),0,N),""}}function ut(H,N,Q){$(H,N);let he="";for(let Se=0;Se<Q;Se++){const Re=de(H);if(!Re){b(Nt.INVALID_UNICODE_ESCAPE_SEQUENCE,r(),0,`\\${N}${he}${H.currentChar()}`);break}he+=Re}return`\\${N}${he}`}function ft(H){V(H);let N="",Q="";const he=Se=>Se!=="{"&&Se!=="}"&&Se!==Go&&Se!==Zn;for(;N=be(H,he);)Q+=N;return Q}function kt(H){let N="",Q="";for(;N=$e(H);)Q+=N;return Q}function Ae(H){const N=(Q=!1,he)=>{const Se=H.currentChar();return Se==="{"||Se==="%"||Se==="@"||Se==="|"||Se==="("||Se===")"||!Se||Se===Go?he:Se===Zn||Se===sie?(he+=Se,H.next(),N(Q,he)):(he+=Se,H.next(),N(!0,he))};return N(!1,"")}function Xe(H){V(H);const N=$(H,"|");return V(H),N}function ie(H,N){let Q=null;switch(H.currentChar()){case"{":return N.braceNest>=1&&b(Nt.NOT_ALLOW_NEST_PLACEHOLDER,r(),0),H.next(),Q=x(N,2,"{"),V(H),N.braceNest++,Q;case"}":return N.braceNest>0&&N.currentType===2&&b(Nt.EMPTY_PLACEHOLDER,r(),0),H.next(),Q=x(N,3,"}"),N.braceNest--,N.braceNest>0&&V(H),N.inLinked&&N.braceNest===0&&(N.inLinked=!1),Q;case"@":return N.braceNest>0&&b(Nt.UNTERMINATED_CLOSING_BRACE,r(),0),Q=Y(H,N)||w(N),N.braceNest=0,Q;default:{let Se=!0,Re=!0,Ze=!0;if(j(H))return N.braceNest>0&&b(Nt.UNTERMINATED_CLOSING_BRACE,r(),0),Q=x(N,1,Xe(H)),N.braceNest=0,N.inLinked=!1,Q;if(N.braceNest>0&&(N.currentType===5||N.currentType===6||N.currentType===7))return b(Nt.UNTERMINATED_CLOSING_BRACE,r(),0),N.braceNest=0,ue(H,N);if(Se=P(H,N))return Q=x(N,5,Ee(H)),V(H),Q;if(Re=S(H,N))return Q=x(N,6,He(H)),V(H),Q;if(Ze=C(H,N))return Q=x(N,7,Ke(H)),V(H),Q;if(!Se&&!Re&&!Ze)return Q=x(N,13,ft(H)),b(Nt.INVALID_TOKEN_IN_PLACEHOLDER,r(),0,Q.value),V(H),Q;break}}return Q}function Y(H,N){const{currentType:Q}=N;let he=null;const Se=H.currentChar();switch((Q===8||Q===9||Q===12||Q===10)&&(Se===Zn||Se===Go)&&b(Nt.INVALID_LINKED_FORMAT,r(),0),Se){case"@":return H.next(),he=x(N,8,"@"),N.inLinked=!0,he;case".":return V(H),H.next(),x(N,9,".");case":":return V(H),H.next(),x(N,10,":");default:return j(H)?(he=x(N,1,Xe(H)),N.braceNest=0,N.inLinked=!1,he):M(H,N)||v(H,N)?(V(H),Y(H,N)):g(H,N)?(V(H),x(N,12,kt(H))):T(H,N)?(V(H),Se==="{"?ie(H,N)||he:x(N,11,Ae(H))):(Q===8&&b(Nt.INVALID_LINKED_FORMAT,r(),0),N.braceNest=0,N.inLinked=!1,ue(H,N))}}function ue(H,N){let Q={type:14};if(N.braceNest>0)return ie(H,N)||w(N);if(N.inLinked)return Y(H,N)||w(N);switch(H.currentChar()){case"{":return ie(H,N)||w(N);case"}":return b(Nt.UNBALANCED_CLOSING_BRACE,r(),0),H.next(),x(N,3,"}");case"@":return Y(H,N)||w(N);default:{if(j(H))return Q=x(N,1,Xe(H)),N.braceNest=0,N.inLinked=!1,Q;const{isModulo:Se,hasSpace:Re}=B(H);if(Se)return Re?x(N,0,ce(H)):x(N,4,G(H));if(oe(H))return x(N,0,ce(H));break}}return Q}function pe(){const{currentType:H,offset:N,startLoc:Q,endLoc:he}=h;return h.lastType=H,h.lastOffset=N,h.lastStartLoc=Q,h.lastEndLoc=he,h.offset=o(),h.startLoc=r(),s.currentChar()===Ir?x(h,14):ue(s,h)}return{nextToken:pe,currentOffset:o,currentPosition:r,context:m}}const iie="parser",lie=/(?:\\\\|\\'|\\u([0-9a-fA-F]{4})|\\U([0-9a-fA-F]{6}))/g;function cie(n,e,a){switch(n){case"\\\\":return"\\";case"\\'":return"'";default:{const s=parseInt(e||a,16);return s<=55295||s>=57344?String.fromCodePoint(s):"�"}}}function die(n={}){const e=n.location!==!1,{onError:a}=n;function s(R,E,P,S,...C){const M=R.currentPosition();if(M.offset+=S,M.column+=S,a){const g=e?dE(P,M):null,v=Vc(E,g,{domain:iie,args:C});a(v)}}function o(R,E,P){const S={type:R};return e&&(S.start=E,S.end=E,S.loc={start:P,end:P}),S}function r(R,E,P,S){S&&(R.type=S),e&&(R.end=E,R.loc&&(R.loc.end=P))}function i(R,E){const P=R.context(),S=o(3,P.offset,P.startLoc);return S.value=E,r(S,R.currentOffset(),R.currentPosition()),S}function u(R,E){const P=R.context(),{lastOffset:S,lastStartLoc:C}=P,M=o(5,S,C);return M.index=parseInt(E,10),R.nextToken(),r(M,R.currentOffset(),R.currentPosition()),M}function h(R,E){const P=R.context(),{lastOffset:S,lastStartLoc:C}=P,M=o(4,S,C);return M.key=E,R.nextToken(),r(M,R.currentOffset(),R.currentPosition()),M}function m(R,E){const P=R.context(),{lastOffset:S,lastStartLoc:C}=P,M=o(9,S,C);return M.value=E.replace(lie,cie),R.nextToken(),r(M,R.currentOffset(),R.currentPosition()),M}function p(R){const E=R.nextToken(),P=R.context(),{lastOffset:S,lastStartLoc:C}=P,M=o(8,S,C);return E.type!==12?(s(R,Nt.UNEXPECTED_EMPTY_LINKED_MODIFIER,P.lastStartLoc,0),M.value="",r(M,S,C),{nextConsumeToken:E,node:M}):(E.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,P.lastStartLoc,0,mo(E)),M.value=E.value||"",r(M,R.currentOffset(),R.currentPosition()),{node:M})}function b(R,E){const P=R.context(),S=o(7,P.offset,P.startLoc);return S.value=E,r(S,R.currentOffset(),R.currentPosition()),S}function x(R){const E=R.context(),P=o(6,E.offset,E.startLoc);let S=R.nextToken();if(S.type===9){const C=p(R);P.modifier=C.node,S=C.nextConsumeToken||R.nextToken()}switch(S.type!==10&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(S)),S=R.nextToken(),S.type===2&&(S=R.nextToken()),S.type){case 11:S.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(S)),P.key=b(R,S.value||"");break;case 5:S.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(S)),P.key=h(R,S.value||"");break;case 6:S.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(S)),P.key=u(R,S.value||"");break;case 7:S.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(S)),P.key=m(R,S.value||"");break;default:{s(R,Nt.UNEXPECTED_EMPTY_LINKED_KEY,E.lastStartLoc,0);const C=R.context(),M=o(7,C.offset,C.startLoc);return M.value="",r(M,C.offset,C.startLoc),P.key=M,r(P,C.offset,C.startLoc),{nextConsumeToken:S,node:P}}}return r(P,R.currentOffset(),R.currentPosition()),{node:P}}function w(R){const E=R.context(),P=E.currentType===1?R.currentOffset():E.offset,S=E.currentType===1?E.endLoc:E.startLoc,C=o(2,P,S);C.items=[];let M=null;do{const T=M||R.nextToken();switch(M=null,T.type){case 0:T.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(T)),C.items.push(i(R,T.value||""));break;case 6:T.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(T)),C.items.push(u(R,T.value||""));break;case 5:T.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(T)),C.items.push(h(R,T.value||""));break;case 7:T.value==null&&s(R,Nt.UNEXPECTED_LEXICAL_ANALYSIS,E.lastStartLoc,0,mo(T)),C.items.push(m(R,T.value||""));break;case 8:{const j=x(R);C.items.push(j.node),M=j.nextConsumeToken||null;break}}}while(E.currentType!==14&&E.currentType!==1);const g=E.currentType===1?E.lastOffset:R.currentOffset(),v=E.currentType===1?E.lastEndLoc:R.currentPosition();return r(C,g,v),C}function $(R,E,P,S){const C=R.context();let M=S.items.length===0;const g=o(1,E,P);g.cases=[],g.cases.push(S);do{const v=w(R);M||(M=v.items.length===0),g.cases.push(v)}while(C.currentType!==14);return M&&s(R,Nt.MUST_HAVE_MESSAGES_IN_PLURAL,P,0),r(g,R.currentOffset(),R.currentPosition()),g}function D(R){const E=R.context(),{offset:P,startLoc:S}=E,C=w(R);return E.currentType===14?C:$(R,P,S,C)}function V(R){const E=rie(R,vN({},n)),P=E.context(),S=o(0,P.offset,P.startLoc);return e&&S.loc&&(S.loc.source=R),S.body=D(E),n.onCacheKey&&(S.cacheKey=n.onCacheKey(R)),P.currentType!==14&&s(E,Nt.UNEXPECTED_LEXICAL_ANALYSIS,P.lastStartLoc,0,R[P.offset]||""),r(S,E.currentOffset(),E.currentPosition()),S}return{parse:V}}function mo(n){if(n.type===14)return"EOF";const e=(n.value||"").replace(/\r?\n/gu,"\\n");return e.length>10?e.slice(0,9)+"…":e}function uie(n,e={}){const a={ast:n,helpers:new Set};return{context:()=>a,helper:r=>(a.helpers.add(r),r)}}function WV(n,e){for(let a=0;a<n.length;a++)GT(n[a],e)}function GT(n,e){switch(n.type){case 1:WV(n.cases,e),e.helper("plural");break;case 2:WV(n.items,e);break;case 6:{GT(n.key,e),e.helper("linked"),e.helper("type");break}case 5:e.helper("interpolate"),e.helper("list");break;case 4:e.helper("interpolate"),e.helper("named");break}}function pie(n,e={}){const a=uie(n);a.helper("normalize"),n.body&&GT(n.body,a);const s=a.context();n.helpers=Array.from(s.helpers)}function hie(n){const e=n.body;return e.type===2?GV(e):e.cases.forEach(a=>GV(a)),n}function GV(n){if(n.items.length===1){const e=n.items[0];(e.type===3||e.type===9)&&(n.static=e.value,delete e.value)}else{const e=[];for(let a=0;a<n.items.length;a++){const s=n.items[a];if(!(s.type===3||s.type===9)||s.value==null)break;e.push(s.value)}if(e.length===n.items.length){n.static=yN(e);for(let a=0;a<n.items.length;a++){const s=n.items[a];(s.type===3||s.type===9)&&delete s.value}}}}const fie="minifier";function cc(n){switch(n.t=n.type,n.type){case 0:{const e=n;cc(e.body),e.b=e.body,delete e.body;break}case 1:{const e=n,a=e.cases;for(let s=0;s<a.length;s++)cc(a[s]);e.c=a,delete e.cases;break}case 2:{const e=n,a=e.items;for(let s=0;s<a.length;s++)cc(a[s]);e.i=a,delete e.items,e.static&&(e.s=e.static,delete e.static);break}case 3:case 9:case 8:case 7:{const e=n;e.value&&(e.v=e.value,delete e.value);break}case 6:{const e=n;cc(e.key),e.k=e.key,delete e.key,e.modifier&&(cc(e.modifier),e.m=e.modifier,delete e.modifier);break}case 5:{const e=n;e.i=e.index,delete e.index;break}case 4:{const e=n;e.k=e.key,delete e.key;break}default:throw Vc(Nt.UNHANDLED_MINIFIER_NODE_TYPE,null,{domain:fie,args:[n.type]})}delete n.type}const mie="parser";function vie(n,e){const{sourceMap:a,filename:s,breakLineCode:o,needIndent:r}=e,i=e.location!==!1,u={filename:s,code:"",column:1,line:1,offset:0,map:void 0,breakLineCode:o,needIndent:r,indentLevel:0};i&&n.loc&&(u.source=n.loc.source);const h=()=>u;function m(V,R){u.code+=V}function p(V,R=!0){const E=R?o:"";m(r?E+"  ".repeat(V):E)}function b(V=!0){const R=++u.indentLevel;V&&p(R)}function x(V=!0){const R=--u.indentLevel;V&&p(R)}function w(){p(u.indentLevel)}return{context:h,push:m,indent:b,deindent:x,newline:w,helper:V=>`_${V}`,needIndent:()=>u.needIndent}}function yie(n,e){const{helper:a}=n;n.push(`${a("linked")}(`),Ic(n,e.key),e.modifier?(n.push(", "),Ic(n,e.modifier),n.push(", _type")):n.push(", undefined, _type"),n.push(")")}function _ie(n,e){const{helper:a,needIndent:s}=n;n.push(`${a("normalize")}([`),n.indent(s());const o=e.items.length;for(let r=0;r<o&&(Ic(n,e.items[r]),r!==o-1);r++)n.push(", ");n.deindent(s()),n.push("])")}function gie(n,e){const{helper:a,needIndent:s}=n;if(e.cases.length>1){n.push(`${a("plural")}([`),n.indent(s());const o=e.cases.length;for(let r=0;r<o&&(Ic(n,e.cases[r]),r!==o-1);r++)n.push(", ");n.deindent(s()),n.push("])")}}function kie(n,e){e.body?Ic(n,e.body):n.push("null")}function Ic(n,e){const{helper:a}=n;switch(e.type){case 0:kie(n,e);break;case 1:gie(n,e);break;case 2:_ie(n,e);break;case 6:yie(n,e);break;case 8:n.push(JSON.stringify(e.value),e);break;case 7:n.push(JSON.stringify(e.value),e);break;case 5:n.push(`${a("interpolate")}(${a("list")}(${e.index}))`,e);break;case 4:n.push(`${a("interpolate")}(${a("named")}(${JSON.stringify(e.key)}))`,e);break;case 9:n.push(JSON.stringify(e.value),e);break;case 3:n.push(JSON.stringify(e.value),e);break;default:throw Vc(Nt.UNHANDLED_CODEGEN_NODE_TYPE,null,{domain:mie,args:[e.type]})}}const bie=(n,e={})=>{const a=BV(e.mode)?e.mode:"normal",s=BV(e.filename)?e.filename:"message.intl",o=!!e.sourceMap,r=e.breakLineCode!=null?e.breakLineCode:a==="arrow"?";":`
+`,i=e.needIndent?e.needIndent:a!=="arrow",u=n.helpers||[],h=vie(n,{mode:a,filename:s,sourceMap:o,breakLineCode:r,needIndent:i});h.push(a==="normal"?"function __msg__ (ctx) {":"(ctx) => {"),h.indent(i),u.length>0&&(h.push(`const { ${yN(u.map(b=>`${b}: _${b}`),", ")} } = ctx`),h.newline()),h.push("return "),Ic(h,n),h.deindent(i),h.push("}"),delete n.helpers;const{code:m,map:p}=h.context();return{ast:n,code:m,map:p?p.toJSON():void 0}};function wie(n,e={}){const a=vN({},e),s=!!a.jit,o=!!a.minify,r=a.optimize==null?!0:a.optimize,u=die(a).parse(n);return s?(r&&hie(u),o&&cc(u),{ast:u,code:""}):(pie(u,a),bie(u,a))}/*!
+  * core-base v9.11.0
+  * (c) 2024 kazuya kawaguchi
+  * Released under the MIT License.
+  */function xie(){typeof __INTLIFY_PROD_DEVTOOLS__!="boolean"&&(Yo().__INTLIFY_PROD_DEVTOOLS__=!1),typeof __INTLIFY_JIT_COMPILATION__!="boolean"&&(Yo().__INTLIFY_JIT_COMPILATION__=!1),typeof __INTLIFY_DROP_MESSAGE_COMPILER__!="boolean"&&(Yo().__INTLIFY_DROP_MESSAGE_COMPILER__=!1)}const ti=[];ti[0]={w:[0],i:[3,0],"[":[4],o:[7]};ti[1]={w:[1],".":[2],"[":[4],o:[7]};ti[2]={w:[2],i:[3,0],0:[3,0]};ti[3]={i:[3,0],0:[3,0],w:[1,1],".":[2,1],"[":[4,1],o:[7,1]};ti[4]={"'":[5,0],'"':[6,0],"[":[4,2],"]":[1,3],o:8,l:[4,0]};ti[5]={"'":[4,0],o:8,l:[5,0]};ti[6]={'"':[4,0],o:8,l:[6,0]};const Mie=/^\s?(?:true|false|-?[\d.]+|'[^']*'|"[^"]*")\s?$/;function Cie(n){return Mie.test(n)}function Sie(n){const e=n.charCodeAt(0),a=n.charCodeAt(n.length-1);return e===a&&(e===34||e===39)?n.slice(1,-1):n}function Iie(n){if(n==null)return"o";switch(n.charCodeAt(0)){case 91:case 93:case 46:case 34:case 39:return n;case 95:case 36:case 45:return"i";case 9:case 10:case 13:case 160:case 65279:case 8232:case 8233:return"w"}return"i"}function Lie(n){const e=n.trim();return n.charAt(0)==="0"&&isNaN(parseInt(n))?!1:Cie(e)?Sie(e):"*"+e}function $ie(n){const e=[];let a=-1,s=0,o=0,r,i,u,h,m,p,b;const x=[];x[0]=()=>{i===void 0?i=u:i+=u},x[1]=()=>{i!==void 0&&(e.push(i),i=void 0)},x[2]=()=>{x[0](),o++},x[3]=()=>{if(o>0)o--,s=4,x[0]();else{if(o=0,i===void 0||(i=Lie(i),i===!1))return!1;x[1]()}};function w(){const $=n[a+1];if(s===5&&$==="'"||s===6&&$==='"')return a++,u="\\"+$,x[0](),!0}for(;s!==null;)if(a++,r=n[a],!(r==="\\"&&w())){if(h=Iie(r),b=ti[s],m=b[h]||b.l||8,m===8||(s=m[0],m[1]!==void 0&&(p=x[m[1]],p&&(u=r,p()===!1))))return;if(s===7)return e}}const ZV=new Map;function Aie(n,e){return Ca(n)?n[e]:null}function Eie(n,e){if(!Ca(n))return null;let a=ZV.get(e);if(a||(a=$ie(e),a&&ZV.set(e,a)),!a)return null;const s=a.length;let o=n,r=0;for(;r<s;){const i=o[a[r]];if(i===void 0||Fa(o))return null;o=i,r++}return o}const Tie=n=>n,Pie=n=>"",Die="text",Rie=n=>n.length===0?"":Wre(n),Oie=qre;function KV(n,e){return n=Math.abs(n),e===2?n?n>1?1:0:1:n?Math.min(n,2):0}function Vie(n){const e=wn(n.pluralIndex)?n.pluralIndex:-1;return n.named&&(wn(n.named.count)||wn(n.named.n))?wn(n.named.count)?n.named.count:wn(n.named.n)?n.named.n:e:e}function Uie(n,e){e.count||(e.count=n),e.n||(e.n=n)}function Fie(n={}){const e=n.locale,a=Vie(n),s=Ca(n.pluralRules)&&bt(e)&&Fa(n.pluralRules[e])?n.pluralRules[e]:KV,o=Ca(n.pluralRules)&&bt(e)&&Fa(n.pluralRules[e])?KV:void 0,r=R=>R[s(a,R.length,o)],i=n.list||[],u=R=>i[R],h=n.named||{};wn(n.pluralIndex)&&Uie(a,h);const m=R=>h[R];function p(R){const E=Fa(n.messages)?n.messages(R):Ca(n.messages)?n.messages[R]:!1;return E||(n.parent?n.parent.message(R):Pie)}const b=R=>n.modifiers?n.modifiers[R]:Tie,x=Gt(n.processor)&&Fa(n.processor.normalize)?n.processor.normalize:Rie,w=Gt(n.processor)&&Fa(n.processor.interpolate)?n.processor.interpolate:Oie,$=Gt(n.processor)&&bt(n.processor.type)?n.processor.type:Die,V={list:u,named:m,plural:r,linked:(R,...E)=>{const[P,S]=E;let C="text",M="";E.length===1?Ca(P)?(M=P.modifier||M,C=P.type||C):bt(P)&&(M=P||M):E.length===2&&(bt(P)&&(M=P||M),bt(S)&&(C=S||C));const g=p(R)(V),v=C==="vnode"&&Ga(g)&&M?g[0]:g;return M?b(M)(v,C):v},message:p,type:$,interpolate:w,normalize:x,values:Un({},i,h)};return V}let Zd=null;function jie(n){Zd=n}function Hie(n,e,a){Zd&&Zd.emit("i18n:init",{timestamp:Date.now(),i18n:n,version:e,meta:a})}const Nie=zie("function:translate");function zie(n){return e=>Zd&&Zd.emit(n,e)}const Bie={NOT_FOUND_KEY:1,FALLBACK_TO_TRANSLATE:2,CANNOT_FORMAT_NUMBER:3,FALLBACK_TO_NUMBER_FORMAT:4,CANNOT_FORMAT_DATE:5,FALLBACK_TO_DATE_FORMAT:6,EXPERIMENTAL_CUSTOM_MESSAGE_COMPILER:7,__EXTEND_POINT__:8},_N=Nt.__EXTEND_POINT__,vi=WT(_N),no={INVALID_ARGUMENT:_N,INVALID_DATE_ARGUMENT:vi(),INVALID_ISO_DATE_ARGUMENT:vi(),NOT_SUPPORT_NON_STRING_MESSAGE:vi(),NOT_SUPPORT_LOCALE_PROMISE_VALUE:vi(),NOT_SUPPORT_LOCALE_ASYNC_FUNCTION:vi(),NOT_SUPPORT_LOCALE_TYPE:vi(),__EXTEND_POINT__:vi()};function xo(n){return Vc(n,null,void 0)}function ZT(n,e){return e.locale!=null?XV(e.locale):XV(n.locale)}let tA;function XV(n){if(bt(n))return n;if(Fa(n)){if(n.resolvedOnce&&tA!=null)return tA;if(n.constructor.name==="Function"){const e=n();if(Bre(e))throw xo(no.NOT_SUPPORT_LOCALE_PROMISE_VALUE);return tA=e}else throw xo(no.NOT_SUPPORT_LOCALE_ASYNC_FUNCTION)}else throw xo(no.NOT_SUPPORT_LOCALE_TYPE)}function qie(n,e,a){return[...new Set([a,...Ga(e)?e:Ca(e)?Object.keys(e):bt(e)?[e]:[a]])]}function gN(n,e,a){const s=bt(a)?a:Lc,o=n;o.__localeChainCache||(o.__localeChainCache=new Map);let r=o.__localeChainCache.get(s);if(!r){r=[];let i=[a];for(;Ga(i);)i=YV(r,i,e);const u=Ga(e)||!Gt(e)?e:e.default?e.default:null;i=bt(u)?[u]:u,Ga(i)&&YV(r,i,!1),o.__localeChainCache.set(s,r)}return r}function YV(n,e,a){let s=!0;for(let o=0;o<e.length&&ia(s);o++){const r=e[o];bt(r)&&(s=Wie(n,e[o],a))}return s}function Wie(n,e,a){let s;const o=e.split("-");do{const r=o.join("-");s=Gie(n,r,a),o.splice(-1,1)}while(o.length&&s===!0);return s}function Gie(n,e,a){let s=!1;if(!n.includes(e)&&(s=!0,e)){s=e[e.length-1]!=="!";const o=e.replace(/!/g,"");n.push(o),(Ga(a)||Gt(a))&&a[o]&&(s=a[o])}return s}const Zie="9.11.0",o9=-1,Lc="en-US",QV="",JV=n=>`${n.charAt(0).toLocaleUpperCase()}${n.substr(1)}`;function Kie(){return{upper:(n,e)=>e==="text"&&bt(n)?n.toUpperCase():e==="vnode"&&Ca(n)&&"__v_isVNode"in n?n.children.toUpperCase():n,lower:(n,e)=>e==="text"&&bt(n)?n.toLowerCase():e==="vnode"&&Ca(n)&&"__v_isVNode"in n?n.children.toLowerCase():n,capitalize:(n,e)=>e==="text"&&bt(n)?JV(n):e==="vnode"&&Ca(n)&&"__v_isVNode"in n?JV(n.children):n}}let kN;function eU(n){kN=n}let bN;function Xie(n){bN=n}let wN;function Yie(n){wN=n}let xN=null;const Qie=n=>{xN=n},Jie=()=>xN;let MN=null;const tU=n=>{MN=n},ele=()=>MN;let aU=0;function tle(n={}){const e=Fa(n.onWarn)?n.onWarn:Gre,a=bt(n.version)?n.version:Zie,s=bt(n.locale)||Fa(n.locale)?n.locale:Lc,o=Fa(s)?Lc:s,r=Ga(n.fallbackLocale)||Gt(n.fallbackLocale)||bt(n.fallbackLocale)||n.fallbackLocale===!1?n.fallbackLocale:o,i=Gt(n.messages)?n.messages:{[o]:{}},u=Gt(n.datetimeFormats)?n.datetimeFormats:{[o]:{}},h=Gt(n.numberFormats)?n.numberFormats:{[o]:{}},m=Un({},n.modifiers||{},Kie()),p=n.pluralRules||{},b=Fa(n.missing)?n.missing:null,x=ia(n.missingWarn)||Xr(n.missingWarn)?n.missingWarn:!0,w=ia(n.fallbackWarn)||Xr(n.fallbackWarn)?n.fallbackWarn:!0,$=!!n.fallbackFormat,D=!!n.unresolving,V=Fa(n.postTranslation)?n.postTranslation:null,R=Gt(n.processor)?n.processor:null,E=ia(n.warnHtmlMessage)?n.warnHtmlMessage:!0,P=!!n.escapeParameter,S=Fa(n.messageCompiler)?n.messageCompiler:kN,C=Fa(n.messageResolver)?n.messageResolver:bN||Aie,M=Fa(n.localeFallbacker)?n.localeFallbacker:wN||qie,g=Ca(n.fallbackContext)?n.fallbackContext:void 0,v=n,T=Ca(v.__datetimeFormatters)?v.__datetimeFormatters:new Map,j=Ca(v.__numberFormatters)?v.__numberFormatters:new Map,B=Ca(v.__meta)?v.__meta:{};aU++;const oe={version:a,cid:aU,locale:s,fallbackLocale:r,messages:i,modifiers:m,pluralRules:p,missing:b,missingWarn:x,fallbackWarn:w,fallbackFormat:$,unresolving:D,postTranslation:V,processor:R,warnHtmlMessage:E,escapeParameter:P,messageCompiler:S,messageResolver:C,localeFallbacker:M,fallbackContext:g,onWarn:e,__meta:B};return oe.datetimeFormats=u,oe.numberFormats=h,oe.__datetimeFormatters=T,oe.__numberFormatters=j,__INTLIFY_PROD_DEVTOOLS__&&Hie(oe,a,B),oe}function KT(n,e,a,s,o){const{missing:r,onWarn:i}=n;if(r!==null){const u=r(n,a,e,o);return bt(u)?u:e}else return e}function hd(n,e,a){const s=n;s.__localeChainCache=new Map,n.localeFallbacker(n,a,e)}function aA(n){return a=>ale(a,n)}function ale(n,e){const a=e.b||e.body;if((a.t||a.type)===1){const s=a,o=s.c||s.cases;return n.plural(o.reduce((r,i)=>[...r,nU(n,i)],[]))}else return nU(n,a)}function nU(n,e){const a=e.s||e.static;if(a)return n.type==="text"?a:n.normalize([a]);{const s=(e.i||e.items).reduce((o,r)=>[...o,uE(n,r)],[]);return n.normalize(s)}}function uE(n,e){const a=e.t||e.type;switch(a){case 3:{const s=e;return s.v||s.value}case 9:{const s=e;return s.v||s.value}case 4:{const s=e;return n.interpolate(n.named(s.k||s.key))}case 5:{const s=e;return n.interpolate(n.list(s.i!=null?s.i:s.index))}case 6:{const s=e,o=s.m||s.modifier;return n.linked(uE(n,s.k||s.key),o?uE(n,o):void 0,n.type)}case 7:{const s=e;return s.v||s.value}case 8:{const s=e;return s.v||s.value}default:throw new Error(`unhandled node type on format message part: ${a}`)}}const CN=n=>n;let uc=Object.create(null);const $c=n=>Ca(n)&&(n.t===0||n.type===0)&&("b"in n||"body"in n);function SN(n,e={}){let a=!1;const s=e.onError||Jre;return e.onError=o=>{a=!0,s(o)},{...wie(n,e),detectError:a}}const nle=(n,e)=>{if(!bt(n))throw xo(no.NOT_SUPPORT_NON_STRING_MESSAGE);{ia(e.warnHtmlMessage)&&e.warnHtmlMessage;const s=(e.onCacheKey||CN)(n),o=uc[s];if(o)return o;const{code:r,detectError:i}=SN(n,e),u=new Function(`return ${r}`)();return i?u:uc[s]=u}};function sle(n,e){if(__INTLIFY_JIT_COMPILATION__&&!__INTLIFY_DROP_MESSAGE_COMPILER__&&bt(n)){ia(e.warnHtmlMessage)&&e.warnHtmlMessage;const s=(e.onCacheKey||CN)(n),o=uc[s];if(o)return o;const{ast:r,detectError:i}=SN(n,{...e,location:!1,jit:!0}),u=aA(r);return i?u:uc[s]=u}else{const a=n.cacheKey;if(a){const s=uc[a];return s||(uc[a]=aA(n))}else return aA(n)}}const sU=()=>"",Rs=n=>Fa(n);function oU(n,...e){const{fallbackFormat:a,postTranslation:s,unresolving:o,messageCompiler:r,fallbackLocale:i,messages:u}=n,[h,m]=pE(...e),p=ia(m.missingWarn)?m.missingWarn:n.missingWarn,b=ia(m.fallbackWarn)?m.fallbackWarn:n.fallbackWarn,x=ia(m.escapeParameter)?m.escapeParameter:n.escapeParameter,w=!!m.resolvedMessage,$=bt(m.default)||ia(m.default)?ia(m.default)?r?h:()=>h:m.default:a?r?h:()=>h:"",D=a||$!=="",V=ZT(n,m);x&&ole(m);let[R,E,P]=w?[h,V,u[V]||{}]:IN(n,h,V,i,b,p),S=R,C=h;if(!w&&!(bt(S)||$c(S)||Rs(S))&&D&&(S=$,C=S),!w&&(!(bt(S)||$c(S)||Rs(S))||!bt(E)))return o?o9:h;let M=!1;const g=()=>{M=!0},v=Rs(S)?S:LN(n,h,E,S,C,g);if(M)return S;const T=lle(n,E,P,m),j=Fie(T),B=rle(n,v,j),oe=s?s(B,h):B;if(__INTLIFY_PROD_DEVTOOLS__){const be={timestamp:Date.now(),key:bt(h)?h:Rs(S)?S.key:"",locale:E||(Rs(S)?S.locale:""),format:bt(S)?S:Rs(S)?S.source:"",message:oe};be.meta=Un({},n.__meta,Jie()||{}),Nie(be)}return oe}function ole(n){Ga(n.list)?n.list=n.list.map(e=>bt(e)?zV(e):e):Ca(n.named)&&Object.keys(n.named).forEach(e=>{bt(n.named[e])&&(n.named[e]=zV(n.named[e]))})}function IN(n,e,a,s,o,r){const{messages:i,onWarn:u,messageResolver:h,localeFallbacker:m}=n,p=m(n,s,a);let b={},x,w=null;const $="translate";for(let D=0;D<p.length&&(x=p[D],b=i[x]||{},(w=h(b,e))===null&&(w=b[e]),!(bt(w)||$c(w)||Rs(w)));D++){const V=KT(n,e,x,r,$);V!==e&&(w=V)}return[w,x,b]}function LN(n,e,a,s,o,r){const{messageCompiler:i,warnHtmlMessage:u}=n;if(Rs(s)){const m=s;return m.locale=m.locale||a,m.key=m.key||e,m}if(i==null){const m=()=>s;return m.locale=a,m.key=e,m}const h=i(s,ile(n,a,o,s,u,r));return h.locale=a,h.key=e,h.source=s,h}function rle(n,e,a){return e(a)}function pE(...n){const[e,a,s]=n,o={};if(!bt(e)&&!wn(e)&&!Rs(e)&&!$c(e))throw xo(no.INVALID_ARGUMENT);const r=wn(e)?String(e):(Rs(e),e);return wn(a)?o.plural=a:bt(a)?o.default=a:Gt(a)&&!s9(a)?o.named=a:Ga(a)&&(o.list=a),wn(s)?o.plural=s:bt(s)?o.default=s:Gt(s)&&Un(o,s),[r,o]}function ile(n,e,a,s,o,r){return{locale:e,key:a,warnHtmlMessage:o,onError:i=>{throw r&&r(i),i},onCacheKey:i=>jre(e,a,i)}}function lle(n,e,a,s){const{modifiers:o,pluralRules:r,messageResolver:i,fallbackLocale:u,fallbackWarn:h,missingWarn:m,fallbackContext:p}=n,x={locale:e,modifiers:o,pluralRules:r,messages:w=>{let $=i(a,w);if($==null&&p){const[,,D]=IN(p,w,e,u,h,m);$=i(D,w)}if(bt($)||$c($)){let D=!1;const R=LN(n,w,e,$,w,()=>{D=!0});return D?sU:R}else return Rs($)?$:sU}};return n.processor&&(x.processor=n.processor),s.list&&(x.list=s.list),s.named&&(x.named=s.named),wn(s.plural)&&(x.pluralIndex=s.plural),x}function rU(n,...e){const{datetimeFormats:a,unresolving:s,fallbackLocale:o,onWarn:r,localeFallbacker:i}=n,{__datetimeFormatters:u}=n,[h,m,p,b]=hE(...e),x=ia(p.missingWarn)?p.missingWarn:n.missingWarn;ia(p.fallbackWarn)?p.fallbackWarn:n.fallbackWarn;const w=!!p.part,$=ZT(n,p),D=i(n,o,$);if(!bt(h)||h==="")return new Intl.DateTimeFormat($,b).format(m);let V={},R,E=null;const P="datetime format";for(let M=0;M<D.length&&(R=D[M],V=a[R]||{},E=V[h],!Gt(E));M++)KT(n,h,R,x,P);if(!Gt(E)||!bt(R))return s?o9:h;let S=`${R}__${h}`;s9(b)||(S=`${S}__${JSON.stringify(b)}`);let C=u.get(S);return C||(C=new Intl.DateTimeFormat(R,Un({},E,b)),u.set(S,C)),w?C.formatToParts(m):C.format(m)}const $N=["localeMatcher","weekday","era","year","month","day","hour","minute","second","timeZoneName","formatMatcher","hour12","timeZone","dateStyle","timeStyle","calendar","dayPeriod","numberingSystem","hourCycle","fractionalSecondDigits"];function hE(...n){const[e,a,s,o]=n,r={};let i={},u;if(bt(e)){const h=e.match(/(\d{4}-\d{2}-\d{2})(T|\s)?(.*)/);if(!h)throw xo(no.INVALID_ISO_DATE_ARGUMENT);const m=h[3]?h[3].trim().startsWith("T")?`${h[1].trim()}${h[3].trim()}`:`${h[1].trim()}T${h[3].trim()}`:h[1].trim();u=new Date(m);try{u.toISOString()}catch{throw xo(no.INVALID_ISO_DATE_ARGUMENT)}}else if(Nre(e)){if(isNaN(e.getTime()))throw xo(no.INVALID_DATE_ARGUMENT);u=e}else if(wn(e))u=e;else throw xo(no.INVALID_ARGUMENT);return bt(a)?r.key=a:Gt(a)&&Object.keys(a).forEach(h=>{$N.includes(h)?i[h]=a[h]:r[h]=a[h]}),bt(s)?r.locale=s:Gt(s)&&(i=s),Gt(o)&&(i=o),[r.key||"",u,r,i]}function iU(n,e,a){const s=n;for(const o in a){const r=`${e}__${o}`;s.__datetimeFormatters.has(r)&&s.__datetimeFormatters.delete(r)}}function lU(n,...e){const{numberFormats:a,unresolving:s,fallbackLocale:o,onWarn:r,localeFallbacker:i}=n,{__numberFormatters:u}=n,[h,m,p,b]=fE(...e),x=ia(p.missingWarn)?p.missingWarn:n.missingWarn;ia(p.fallbackWarn)?p.fallbackWarn:n.fallbackWarn;const w=!!p.part,$=ZT(n,p),D=i(n,o,$);if(!bt(h)||h==="")return new Intl.NumberFormat($,b).format(m);let V={},R,E=null;const P="number format";for(let M=0;M<D.length&&(R=D[M],V=a[R]||{},E=V[h],!Gt(E));M++)KT(n,h,R,x,P);if(!Gt(E)||!bt(R))return s?o9:h;let S=`${R}__${h}`;s9(b)||(S=`${S}__${JSON.stringify(b)}`);let C=u.get(S);return C||(C=new Intl.NumberFormat(R,Un({},E,b)),u.set(S,C)),w?C.formatToParts(m):C.format(m)}const AN=["localeMatcher","style","currency","currencyDisplay","currencySign","useGrouping","minimumIntegerDigits","minimumFractionDigits","maximumFractionDigits","minimumSignificantDigits","maximumSignificantDigits","compactDisplay","notation","signDisplay","unit","unitDisplay","roundingMode","roundingPriority","roundingIncrement","trailingZeroDisplay"];function fE(...n){const[e,a,s,o]=n,r={};let i={};if(!wn(e))throw xo(no.INVALID_ARGUMENT);const u=e;return bt(a)?r.key=a:Gt(a)&&Object.keys(a).forEach(h=>{AN.includes(h)?i[h]=a[h]:r[h]=a[h]}),bt(s)?r.locale=s:Gt(s)&&(i=s),Gt(o)&&(i=o),[r.key||"",u,r,i]}function cU(n,e,a){const s=n;for(const o in a){const r=`${e}__${o}`;s.__numberFormatters.has(r)&&s.__numberFormatters.delete(r)}}xie();/*!
+  * vue-i18n v9.11.0
+  * (c) 2024 kazuya kawaguchi
+  * Released under the MIT License.
+  */const cle="9.11.0";function dle(){typeof __VUE_I18N_FULL_INSTALL__!="boolean"&&(Yo().__VUE_I18N_FULL_INSTALL__=!0),typeof __VUE_I18N_LEGACY_API__!="boolean"&&(Yo().__VUE_I18N_LEGACY_API__=!0),typeof __INTLIFY_JIT_COMPILATION__!="boolean"&&(Yo().__INTLIFY_JIT_COMPILATION__=!1),typeof __INTLIFY_DROP_MESSAGE_COMPILER__!="boolean"&&(Yo().__INTLIFY_DROP_MESSAGE_COMPILER__=!1),typeof __INTLIFY_PROD_DEVTOOLS__!="boolean"&&(Yo().__INTLIFY_PROD_DEVTOOLS__=!1)}const EN=Bie.__EXTEND_POINT__,Zo=WT(EN);Zo(),Zo(),Zo(),Zo(),Zo(),Zo(),Zo(),Zo(),Zo();const TN=no.__EXTEND_POINT__,es=WT(TN),xn={UNEXPECTED_RETURN_TYPE:TN,INVALID_ARGUMENT:es(),MUST_BE_CALL_SETUP_TOP:es(),NOT_INSTALLED:es(),NOT_AVAILABLE_IN_LEGACY_MODE:es(),REQUIRED_VALUE:es(),INVALID_VALUE:es(),CANNOT_SETUP_VUE_DEVTOOLS_PLUGIN:es(),NOT_INSTALLED_WITH_PROVIDE:es(),UNEXPECTED_ERROR:es(),NOT_COMPATIBLE_LEGACY_VUE_I18N:es(),BRIDGE_SUPPORT_VUE_2_ONLY:es(),MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION:es(),NOT_AVAILABLE_COMPOSITION_IN_LEGACY:es(),__EXTEND_POINT__:es()};function Tn(n,...e){return Vc(n,null,void 0)}const mE=ei("__translateVNode"),vE=ei("__datetimeParts"),yE=ei("__numberParts"),PN=ei("__setPluralRules"),DN=ei("__injectWithOption"),_E=ei("__dispose");function Kd(n){if(!Ca(n))return n;for(const e in n)if(kL(n,e))if(!e.includes("."))Ca(n[e])&&Kd(n[e]);else{const a=e.split("."),s=a.length-1;let o=n,r=!1;for(let i=0;i<s;i++){if(a[i]in o||(o[a[i]]={}),!Ca(o[a[i]])){r=!0;break}o=o[a[i]]}r||(o[a[s]]=n[e],delete n[e]),Ca(o[a[s]])&&Kd(o[a[s]])}return n}function r9(n,e){const{messages:a,__i18n:s,messageResolver:o,flatJson:r}=e,i=Gt(a)?a:Ga(s)?{}:{[n]:{}};if(Ga(s)&&s.forEach(u=>{if("locale"in u&&"resource"in u){const{locale:h,resource:m}=u;h?(i[h]=i[h]||{},JI(m,i[h])):JI(m,i)}else bt(u)&&JI(JSON.parse(u),i)}),o==null&&r)for(const u in i)kL(i,u)&&Kd(i[u]);return i}function RN(n){return n.type}function ON(n,e,a){let s=Ca(e.messages)?e.messages:{};"__i18nGlobal"in a&&(s=r9(n.locale.value,{messages:s,__i18n:a.__i18nGlobal}));const o=Object.keys(s);o.length&&o.forEach(r=>{n.mergeLocaleMessage(r,s[r])});{if(Ca(e.datetimeFormats)){const r=Object.keys(e.datetimeFormats);r.length&&r.forEach(i=>{n.mergeDateTimeFormat(i,e.datetimeFormats[i])})}if(Ca(e.numberFormats)){const r=Object.keys(e.numberFormats);r.length&&r.forEach(i=>{n.mergeNumberFormat(i,e.numberFormats[i])})}}}function dU(n){return l(su,null,n,0)}const uU="__INTLIFY_META__",pU=()=>[],ule=()=>!1;let hU=0;function fU(n){return(e,a,s,o)=>n(a,s,Wr()||void 0,o)}const ple=()=>{const n=Wr();let e=null;return n&&(e=RN(n)[uU])?{[uU]:e}:null};function XT(n={},e){const{__root:a,__injectWithOption:s}=n,o=a===void 0,r=n.flatJson,i=gL?O:UL,u=!!n.translateExistCompatible;let h=ia(n.inheritLocale)?n.inheritLocale:!0;const m=i(a&&h?a.locale.value:bt(n.locale)?n.locale:Lc),p=i(a&&h?a.fallbackLocale.value:bt(n.fallbackLocale)||Ga(n.fallbackLocale)||Gt(n.fallbackLocale)||n.fallbackLocale===!1?n.fallbackLocale:m.value),b=i(r9(m.value,n)),x=i(Gt(n.datetimeFormats)?n.datetimeFormats:{[m.value]:{}}),w=i(Gt(n.numberFormats)?n.numberFormats:{[m.value]:{}});let $=a?a.missingWarn:ia(n.missingWarn)||Xr(n.missingWarn)?n.missingWarn:!0,D=a?a.fallbackWarn:ia(n.fallbackWarn)||Xr(n.fallbackWarn)?n.fallbackWarn:!0,V=a?a.fallbackRoot:ia(n.fallbackRoot)?n.fallbackRoot:!0,R=!!n.fallbackFormat,E=Fa(n.missing)?n.missing:null,P=Fa(n.missing)?fU(n.missing):null,S=Fa(n.postTranslation)?n.postTranslation:null,C=a?a.warnHtmlMessage:ia(n.warnHtmlMessage)?n.warnHtmlMessage:!0,M=!!n.escapeParameter;const g=a?a.modifiers:Gt(n.modifiers)?n.modifiers:{};let v=n.pluralRules||a&&a.pluralRules,T;T=(()=>{o&&tU(null);const Pe={version:cle,locale:m.value,fallbackLocale:p.value,messages:b.value,modifiers:g,pluralRules:v,missing:P===null?void 0:P,missingWarn:$,fallbackWarn:D,fallbackFormat:R,unresolving:!0,postTranslation:S===null?void 0:S,warnHtmlMessage:C,escapeParameter:M,messageResolver:n.messageResolver,messageCompiler:n.messageCompiler,__meta:{framework:"vue"}};Pe.datetimeFormats=x.value,Pe.numberFormats=w.value,Pe.__datetimeFormatters=Gt(T)?T.__datetimeFormatters:void 0,Pe.__numberFormatters=Gt(T)?T.__numberFormatters:void 0;const Ue=tle(Pe);return o&&tU(Ue),Ue})(),hd(T,m.value,p.value);function B(){return[m.value,p.value,b.value,x.value,w.value]}const oe=ee({get:()=>m.value,set:Pe=>{m.value=Pe,T.locale=m.value}}),be=ee({get:()=>p.value,set:Pe=>{p.value=Pe,T.fallbackLocale=p.value,hd(T,m.value,Pe)}}),$e=ee(()=>b.value),Le=ee(()=>x.value),de=ee(()=>w.value);function J(){return Fa(S)?S:null}function G(Pe){S=Pe,T.postTranslation=Pe}function ce(){return E}function Ee(Pe){Pe!==null&&(P=fU(Pe)),E=Pe,T.missing=P}const He=(Pe,Ue,ht,Mt,Et,Jt)=>{B();let ae;try{__INTLIFY_PROD_DEVTOOLS__,o||(T.fallbackContext=a?ele():void 0),ae=Pe(T)}finally{__INTLIFY_PROD_DEVTOOLS__,o||(T.fallbackContext=void 0)}if(ht!=="translate exists"&&wn(ae)&&ae===o9||ht==="translate exists"&&!ae){const[W,q]=Ue();return a&&V?Mt(a):Et(W)}else{if(Jt(ae))return ae;throw Tn(xn.UNEXPECTED_RETURN_TYPE)}};function Ke(...Pe){return He(Ue=>Reflect.apply(oU,null,[Ue,...Pe]),()=>pE(...Pe),"translate",Ue=>Reflect.apply(Ue.t,Ue,[...Pe]),Ue=>Ue,Ue=>bt(Ue))}function pt(...Pe){const[Ue,ht,Mt]=Pe;if(Mt&&!Ca(Mt))throw Tn(xn.INVALID_ARGUMENT);return Ke(Ue,ht,Un({resolvedMessage:!0},Mt||{}))}function ut(...Pe){return He(Ue=>Reflect.apply(rU,null,[Ue,...Pe]),()=>hE(...Pe),"datetime format",Ue=>Reflect.apply(Ue.d,Ue,[...Pe]),()=>QV,Ue=>bt(Ue))}function ft(...Pe){return He(Ue=>Reflect.apply(lU,null,[Ue,...Pe]),()=>fE(...Pe),"number format",Ue=>Reflect.apply(Ue.n,Ue,[...Pe]),()=>QV,Ue=>bt(Ue))}function kt(Pe){return Pe.map(Ue=>bt(Ue)||wn(Ue)||ia(Ue)?dU(String(Ue)):Ue)}const Xe={normalize:kt,interpolate:Pe=>Pe,type:"vnode"};function ie(...Pe){return He(Ue=>{let ht;const Mt=Ue;try{Mt.processor=Xe,ht=Reflect.apply(oU,null,[Mt,...Pe])}finally{Mt.processor=null}return ht},()=>pE(...Pe),"translate",Ue=>Ue[mE](...Pe),Ue=>[dU(Ue)],Ue=>Ga(Ue))}function Y(...Pe){return He(Ue=>Reflect.apply(lU,null,[Ue,...Pe]),()=>fE(...Pe),"number format",Ue=>Ue[yE](...Pe),pU,Ue=>bt(Ue)||Ga(Ue))}function ue(...Pe){return He(Ue=>Reflect.apply(rU,null,[Ue,...Pe]),()=>hE(...Pe),"datetime format",Ue=>Ue[vE](...Pe),pU,Ue=>bt(Ue)||Ga(Ue))}function pe(Pe){v=Pe,T.pluralRules=v}function H(Pe,Ue){return He(()=>{if(!Pe)return!1;const ht=bt(Ue)?Ue:m.value,Mt=he(ht),Et=T.messageResolver(Mt,Pe);return u?Et!=null:$c(Et)||Rs(Et)||bt(Et)},()=>[Pe],"translate exists",ht=>Reflect.apply(ht.te,ht,[Pe,Ue]),ule,ht=>ia(ht))}function N(Pe){let Ue=null;const ht=gN(T,p.value,m.value);for(let Mt=0;Mt<ht.length;Mt++){const Et=b.value[ht[Mt]]||{},Jt=T.messageResolver(Et,Pe);if(Jt!=null){Ue=Jt;break}}return Ue}function Q(Pe){const Ue=N(Pe);return Ue??(a?a.tm(Pe)||{}:{})}function he(Pe){return b.value[Pe]||{}}function Se(Pe,Ue){if(r){const ht={[Pe]:Ue};for(const Mt in ht)kL(ht,Mt)&&Kd(ht[Mt]);Ue=ht[Pe]}b.value[Pe]=Ue,T.messages=b.value}function Re(Pe,Ue){b.value[Pe]=b.value[Pe]||{};const ht={[Pe]:Ue};if(r)for(const Mt in ht)kL(ht,Mt)&&Kd(ht[Mt]);Ue=ht[Pe],JI(Ue,b.value[Pe]),T.messages=b.value}function Ze(Pe){return x.value[Pe]||{}}function ze(Pe,Ue){x.value[Pe]=Ue,T.datetimeFormats=x.value,iU(T,Pe,Ue)}function qe(Pe,Ue){x.value[Pe]=Un(x.value[Pe]||{},Ue),T.datetimeFormats=x.value,iU(T,Pe,Ue)}function Be(Pe){return w.value[Pe]||{}}function lt(Pe,Ue){w.value[Pe]=Ue,T.numberFormats=w.value,cU(T,Pe,Ue)}function yt(Pe,Ue){w.value[Pe]=Un(w.value[Pe]||{},Ue),T.numberFormats=w.value,cU(T,Pe,Ue)}hU++,a&&gL&&(dt(a.locale,Pe=>{h&&(m.value=Pe,T.locale=Pe,hd(T,m.value,p.value))}),dt(a.fallbackLocale,Pe=>{h&&(p.value=Pe,T.fallbackLocale=Pe,hd(T,m.value,p.value))}));const it={id:hU,locale:oe,fallbackLocale:be,get inheritLocale(){return h},set inheritLocale(Pe){h=Pe,Pe&&a&&(m.value=a.locale.value,p.value=a.fallbackLocale.value,hd(T,m.value,p.value))},get availableLocales(){return Object.keys(b.value).sort()},messages:$e,get modifiers(){return g},get pluralRules(){return v||{}},get isGlobal(){return o},get missingWarn(){return $},set missingWarn(Pe){$=Pe,T.missingWarn=$},get fallbackWarn(){return D},set fallbackWarn(Pe){D=Pe,T.fallbackWarn=D},get fallbackRoot(){return V},set fallbackRoot(Pe){V=Pe},get fallbackFormat(){return R},set fallbackFormat(Pe){R=Pe,T.fallbackFormat=R},get warnHtmlMessage(){return C},set warnHtmlMessage(Pe){C=Pe,T.warnHtmlMessage=Pe},get escapeParameter(){return M},set escapeParameter(Pe){M=Pe,T.escapeParameter=Pe},t:Ke,getLocaleMessage:he,setLocaleMessage:Se,mergeLocaleMessage:Re,getPostTranslationHandler:J,setPostTranslationHandler:G,getMissingHandler:ce,setMissingHandler:Ee,[PN]:pe};return it.datetimeFormats=Le,it.numberFormats=de,it.rt=pt,it.te=H,it.tm=Q,it.d=ut,it.n=ft,it.getDateTimeFormat=Ze,it.setDateTimeFormat=ze,it.mergeDateTimeFormat=qe,it.getNumberFormat=Be,it.setNumberFormat=lt,it.mergeNumberFormat=yt,it[DN]=s,it[mE]=ie,it[vE]=ue,it[yE]=Y,it}function hle(n){const e=bt(n.locale)?n.locale:Lc,a=bt(n.fallbackLocale)||Ga(n.fallbackLocale)||Gt(n.fallbackLocale)||n.fallbackLocale===!1?n.fallbackLocale:e,s=Fa(n.missing)?n.missing:void 0,o=ia(n.silentTranslationWarn)||Xr(n.silentTranslationWarn)?!n.silentTranslationWarn:!0,r=ia(n.silentFallbackWarn)||Xr(n.silentFallbackWarn)?!n.silentFallbackWarn:!0,i=ia(n.fallbackRoot)?n.fallbackRoot:!0,u=!!n.formatFallbackMessages,h=Gt(n.modifiers)?n.modifiers:{},m=n.pluralizationRules,p=Fa(n.postTranslation)?n.postTranslation:void 0,b=bt(n.warnHtmlInMessage)?n.warnHtmlInMessage!=="off":!0,x=!!n.escapeParameterHtml,w=ia(n.sync)?n.sync:!0;let $=n.messages;if(Gt(n.sharedMessages)){const M=n.sharedMessages;$=Object.keys(M).reduce((v,T)=>{const j=v[T]||(v[T]={});return Un(j,M[T]),v},$||{})}const{__i18n:D,__root:V,__injectWithOption:R}=n,E=n.datetimeFormats,P=n.numberFormats,S=n.flatJson,C=n.translateExistCompatible;return{locale:e,fallbackLocale:a,messages:$,flatJson:S,datetimeFormats:E,numberFormats:P,missing:s,missingWarn:o,fallbackWarn:r,fallbackRoot:i,fallbackFormat:u,modifiers:h,pluralRules:m,postTranslation:p,warnHtmlMessage:b,escapeParameter:x,messageResolver:n.messageResolver,inheritLocale:w,translateExistCompatible:C,__i18n:D,__root:V,__injectWithOption:R}}function gE(n={},e){{const a=XT(hle(n)),{__extender:s}=n,o={id:a.id,get locale(){return a.locale.value},set locale(r){a.locale.value=r},get fallbackLocale(){return a.fallbackLocale.value},set fallbackLocale(r){a.fallbackLocale.value=r},get messages(){return a.messages.value},get datetimeFormats(){return a.datetimeFormats.value},get numberFormats(){return a.numberFormats.value},get availableLocales(){return a.availableLocales},get formatter(){return{interpolate(){return[]}}},set formatter(r){},get missing(){return a.getMissingHandler()},set missing(r){a.setMissingHandler(r)},get silentTranslationWarn(){return ia(a.missingWarn)?!a.missingWarn:a.missingWarn},set silentTranslationWarn(r){a.missingWarn=ia(r)?!r:r},get silentFallbackWarn(){return ia(a.fallbackWarn)?!a.fallbackWarn:a.fallbackWarn},set silentFallbackWarn(r){a.fallbackWarn=ia(r)?!r:r},get modifiers(){return a.modifiers},get formatFallbackMessages(){return a.fallbackFormat},set formatFallbackMessages(r){a.fallbackFormat=r},get postTranslation(){return a.getPostTranslationHandler()},set postTranslation(r){a.setPostTranslationHandler(r)},get sync(){return a.inheritLocale},set sync(r){a.inheritLocale=r},get warnHtmlInMessage(){return a.warnHtmlMessage?"warn":"off"},set warnHtmlInMessage(r){a.warnHtmlMessage=r!=="off"},get escapeParameterHtml(){return a.escapeParameter},set escapeParameterHtml(r){a.escapeParameter=r},get preserveDirectiveContent(){return!0},set preserveDirectiveContent(r){},get pluralizationRules(){return a.pluralRules||{}},__composer:a,t(...r){const[i,u,h]=r,m={};let p=null,b=null;if(!bt(i))throw Tn(xn.INVALID_ARGUMENT);const x=i;return bt(u)?m.locale=u:Ga(u)?p=u:Gt(u)&&(b=u),Ga(h)?p=h:Gt(h)&&(b=h),Reflect.apply(a.t,a,[x,p||b||{},m])},rt(...r){return Reflect.apply(a.rt,a,[...r])},tc(...r){const[i,u,h]=r,m={plural:1};let p=null,b=null;if(!bt(i))throw Tn(xn.INVALID_ARGUMENT);const x=i;return bt(u)?m.locale=u:wn(u)?m.plural=u:Ga(u)?p=u:Gt(u)&&(b=u),bt(h)?m.locale=h:Ga(h)?p=h:Gt(h)&&(b=h),Reflect.apply(a.t,a,[x,p||b||{},m])},te(r,i){return a.te(r,i)},tm(r){return a.tm(r)},getLocaleMessage(r){return a.getLocaleMessage(r)},setLocaleMessage(r,i){a.setLocaleMessage(r,i)},mergeLocaleMessage(r,i){a.mergeLocaleMessage(r,i)},d(...r){return Reflect.apply(a.d,a,[...r])},getDateTimeFormat(r){return a.getDateTimeFormat(r)},setDateTimeFormat(r,i){a.setDateTimeFormat(r,i)},mergeDateTimeFormat(r,i){a.mergeDateTimeFormat(r,i)},n(...r){return Reflect.apply(a.n,a,[...r])},getNumberFormat(r){return a.getNumberFormat(r)},setNumberFormat(r,i){a.setNumberFormat(r,i)},mergeNumberFormat(r,i){a.mergeNumberFormat(r,i)},getChoiceIndex(r,i){return-1}};return o.__extender=s,o}}const YT={tag:{type:[String,Object]},locale:{type:String},scope:{type:String,validator:n=>n==="parent"||n==="global",default:"parent"},i18n:{type:Object}};function fle({slots:n},e){return e.length===1&&e[0]==="default"?(n.default?n.default():[]).reduce((s,o)=>[...s,...o.type===ke?o.children:[o]],[]):e.reduce((a,s)=>{const o=n[s];return o&&(a[s]=o()),a},{})}function VN(n){return ke}const mle=Ce({name:"i18n-t",props:Un({keypath:{type:String,required:!0},plural:{type:[Number,String],validator:n=>wn(n)||!isNaN(n)}},YT),setup(n,e){const{slots:a,attrs:s}=e,o=n.i18n||tt({useScope:n.scope,__useComponent:!0});return()=>{const r=Object.keys(a).filter(b=>b!=="_"),i={};n.locale&&(i.locale=n.locale),n.plural!==void 0&&(i.plural=bt(n.plural)?+n.plural:n.plural);const u=fle(e,r),h=o[mE](n.keypath,u,i),m=Un({},s),p=bt(n.tag)||Ca(n.tag)?n.tag:VN();return ya(p,m,h)}}}),mU=mle;function vle(n){return Ga(n)&&!bt(n[0])}function UN(n,e,a,s){const{slots:o,attrs:r}=e;return()=>{const i={part:!0};let u={};n.locale&&(i.locale=n.locale),bt(n.format)?i.key=n.format:Ca(n.format)&&(bt(n.format.key)&&(i.key=n.format.key),u=Object.keys(n.format).reduce((x,w)=>a.includes(w)?Un({},x,{[w]:n.format[w]}):x,{}));const h=s(n.value,i,u);let m=[i.key];Ga(h)?m=h.map((x,w)=>{const $=o[x.type],D=$?$({[x.type]:x.value,index:w,parts:h}):[x.value];return vle(D)&&(D[0].key=`${x.type}-${w}`),D}):bt(h)&&(m=[h]);const p=Un({},r),b=bt(n.tag)||Ca(n.tag)?n.tag:VN();return ya(b,p,m)}}const yle=Ce({name:"i18n-n",props:Un({value:{type:Number,required:!0},format:{type:[String,Object]}},YT),setup(n,e){const a=n.i18n||tt({useScope:n.scope,__useComponent:!0});return UN(n,e,AN,(...s)=>a[yE](...s))}}),vU=yle,_le=Ce({name:"i18n-d",props:Un({value:{type:[Number,Date],required:!0},format:{type:[String,Object]}},YT),setup(n,e){const a=n.i18n||tt({useScope:n.scope,__useComponent:!0});return UN(n,e,$N,(...s)=>a[vE](...s))}}),yU=_le;function gle(n,e){const a=n;if(n.mode==="composition")return a.__getInstance(e)||n.global;{const s=a.__getInstance(e);return s!=null?s.__composer:n.global.__composer}}function kle(n){const e=i=>{const{instance:u,modifiers:h,value:m}=i;if(!u||!u.$)throw Tn(xn.UNEXPECTED_ERROR);const p=gle(n,u.$),b=_U(m);return[Reflect.apply(p.t,p,[...gU(b)]),p]};return{created:(i,u)=>{const[h,m]=e(u);gL&&n.global===m&&(i.__i18nWatcher=dt(m.locale,()=>{u.instance&&u.instance.$forceUpdate()})),i.__composer=m,i.textContent=h},unmounted:i=>{gL&&i.__i18nWatcher&&(i.__i18nWatcher(),i.__i18nWatcher=void 0,delete i.__i18nWatcher),i.__composer&&(i.__composer=void 0,delete i.__composer)},beforeUpdate:(i,{value:u})=>{if(i.__composer){const h=i.__composer,m=_U(u);i.textContent=Reflect.apply(h.t,h,[...gU(m)])}},getSSRProps:i=>{const[u]=e(i);return{textContent:u}}}}function _U(n){if(bt(n))return{path:n};if(Gt(n)){if(!("path"in n))throw Tn(xn.REQUIRED_VALUE,"path");return n}else throw Tn(xn.INVALID_VALUE)}function gU(n){const{path:e,locale:a,args:s,choice:o,plural:r}=n,i={},u=s||{};return bt(a)&&(i.locale=a),wn(o)&&(i.plural=o),wn(r)&&(i.plural=r),[e,u,i]}function ble(n,e,...a){const s=Gt(a[0])?a[0]:{},o=!!s.useI18nComponentName;(ia(s.globalInstall)?s.globalInstall:!0)&&([o?"i18n":mU.name,"I18nT"].forEach(i=>n.component(i,mU)),[vU.name,"I18nN"].forEach(i=>n.component(i,vU)),[yU.name,"I18nD"].forEach(i=>n.component(i,yU))),n.directive("t",kle(e))}function wle(n,e,a){return{beforeCreate(){const s=Wr();if(!s)throw Tn(xn.UNEXPECTED_ERROR);const o=this.$options;if(o.i18n){const r=o.i18n;if(o.__i18n&&(r.__i18n=o.__i18n),r.__root=e,this===this.$root)this.$i18n=kU(n,r);else{r.__injectWithOption=!0,r.__extender=a.__vueI18nExtend,this.$i18n=gE(r);const i=this.$i18n;i.__extender&&(i.__disposer=i.__extender(this.$i18n))}}else if(o.__i18n)if(this===this.$root)this.$i18n=kU(n,o);else{this.$i18n=gE({__i18n:o.__i18n,__injectWithOption:!0,__extender:a.__vueI18nExtend,__root:e});const r=this.$i18n;r.__extender&&(r.__disposer=r.__extender(this.$i18n))}else this.$i18n=n;o.__i18nGlobal&&ON(e,o,o),this.$t=(...r)=>this.$i18n.t(...r),this.$rt=(...r)=>this.$i18n.rt(...r),this.$tc=(...r)=>this.$i18n.tc(...r),this.$te=(r,i)=>this.$i18n.te(r,i),this.$d=(...r)=>this.$i18n.d(...r),this.$n=(...r)=>this.$i18n.n(...r),this.$tm=r=>this.$i18n.tm(r),a.__setInstance(s,this.$i18n)},mounted(){},unmounted(){const s=Wr();if(!s)throw Tn(xn.UNEXPECTED_ERROR);const o=this.$i18n;delete this.$t,delete this.$rt,delete this.$tc,delete this.$te,delete this.$d,delete this.$n,delete this.$tm,o.__disposer&&(o.__disposer(),delete o.__disposer,delete o.__extender),a.__deleteInstance(s),delete this.$i18n}}}function kU(n,e){n.locale=e.locale||n.locale,n.fallbackLocale=e.fallbackLocale||n.fallbackLocale,n.missing=e.missing||n.missing,n.silentTranslationWarn=e.silentTranslationWarn||n.silentFallbackWarn,n.silentFallbackWarn=e.silentFallbackWarn||n.silentFallbackWarn,n.formatFallbackMessages=e.formatFallbackMessages||n.formatFallbackMessages,n.postTranslation=e.postTranslation||n.postTranslation,n.warnHtmlInMessage=e.warnHtmlInMessage||n.warnHtmlInMessage,n.escapeParameterHtml=e.escapeParameterHtml||n.escapeParameterHtml,n.sync=e.sync||n.sync,n.__composer[PN](e.pluralizationRules||n.pluralizationRules);const a=r9(n.locale,{messages:e.messages,__i18n:e.__i18n});return Object.keys(a).forEach(s=>n.mergeLocaleMessage(s,a[s])),e.datetimeFormats&&Object.keys(e.datetimeFormats).forEach(s=>n.mergeDateTimeFormat(s,e.datetimeFormats[s])),e.numberFormats&&Object.keys(e.numberFormats).forEach(s=>n.mergeNumberFormat(s,e.numberFormats[s])),n}const xle=ei("global-vue-i18n");function Mle(n={},e){const a=__VUE_I18N_LEGACY_API__&&ia(n.legacy)?n.legacy:__VUE_I18N_LEGACY_API__,s=ia(n.globalInjection)?n.globalInjection:!0,o=__VUE_I18N_LEGACY_API__&&a?!!n.allowComposition:!0,r=new Map,[i,u]=Cle(n,a),h=ei("");function m(x){return r.get(x)||null}function p(x,w){r.set(x,w)}function b(x){r.delete(x)}{const x={get mode(){return __VUE_I18N_LEGACY_API__&&a?"legacy":"composition"},get allowComposition(){return o},async install(w,...$){if(w.__VUE_I18N_SYMBOL__=h,w.provide(w.__VUE_I18N_SYMBOL__,x),Gt($[0])){const R=$[0];x.__composerExtend=R.__composerExtend,x.__vueI18nExtend=R.__vueI18nExtend}let D=null;!a&&s&&(D=Dle(w,x.global)),__VUE_I18N_FULL_INSTALL__&&ble(w,x,...$),__VUE_I18N_LEGACY_API__&&a&&w.mixin(wle(u,u.__composer,x));const V=w.unmount;w.unmount=()=>{D&&D(),x.dispose(),V()}},get global(){return u},dispose(){i.stop()},__instances:r,__getInstance:m,__setInstance:p,__deleteInstance:b};return x}}function tt(n={}){const e=Wr();if(e==null)throw Tn(xn.MUST_BE_CALL_SETUP_TOP);if(!e.isCE&&e.appContext.app!=null&&!e.appContext.app.__VUE_I18N_SYMBOL__)throw Tn(xn.NOT_INSTALLED);const a=Sle(e),s=Lle(a),o=RN(e),r=Ile(n,o);if(__VUE_I18N_LEGACY_API__&&a.mode==="legacy"&&!n.__useComponent){if(!a.allowComposition)throw Tn(xn.NOT_AVAILABLE_IN_LEGACY_MODE);return Tle(e,r,s,n)}if(r==="global")return ON(s,n,o),s;if(r==="parent"){let h=$le(a,e,n.__useComponent);return h==null&&(h=s),h}const i=a;let u=i.__getInstance(e);if(u==null){const h=Un({},n);"__i18n"in o&&(h.__i18n=o.__i18n),s&&(h.__root=s),u=XT(h),i.__composerExtend&&(u[_E]=i.__composerExtend(u)),Ele(i,e,u),i.__setInstance(e,u)}return u}function Cle(n,e,a){const s=iT();{const o=__VUE_I18N_LEGACY_API__&&e?s.run(()=>gE(n)):s.run(()=>XT(n));if(o==null)throw Tn(xn.UNEXPECTED_ERROR);return[s,o]}}function Sle(n){{const e=xt(n.isCE?xle:n.appContext.app.__VUE_I18N_SYMBOL__);if(!e)throw Tn(n.isCE?xn.NOT_INSTALLED_WITH_PROVIDE:xn.UNEXPECTED_ERROR);return e}}function Ile(n,e){return s9(n)?"__i18n"in e?"local":"global":n.useScope?n.useScope:"local"}function Lle(n){return n.mode==="composition"?n.global:n.global.__composer}function $le(n,e,a=!1){let s=null;const o=e.root;let r=Ale(e,a);for(;r!=null;){const i=n;if(n.mode==="composition")s=i.__getInstance(r);else if(__VUE_I18N_LEGACY_API__){const u=i.__getInstance(r);u!=null&&(s=u.__composer,a&&s&&!s[DN]&&(s=null))}if(s!=null||o===r)break;r=r.parent}return s}function Ale(n,e=!1){return n==null?null:e&&n.vnode.ctx||n.parent}function Ele(n,e,a){at(()=>{},e),rn(()=>{const s=a;n.__deleteInstance(e);const o=s[_E];o&&(o(),delete s[_E])},e)}function Tle(n,e,a,s={}){const o=e==="local",r=UL(null);if(o&&n.proxy&&!(n.proxy.$options.i18n||n.proxy.$options.__i18n))throw Tn(xn.MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION);const i=ia(s.inheritLocale)?s.inheritLocale:!bt(s.locale),u=O(!o||i?a.locale.value:bt(s.locale)?s.locale:Lc),h=O(!o||i?a.fallbackLocale.value:bt(s.fallbackLocale)||Ga(s.fallbackLocale)||Gt(s.fallbackLocale)||s.fallbackLocale===!1?s.fallbackLocale:u.value),m=O(r9(u.value,s)),p=O(Gt(s.datetimeFormats)?s.datetimeFormats:{[u.value]:{}}),b=O(Gt(s.numberFormats)?s.numberFormats:{[u.value]:{}}),x=o?a.missingWarn:ia(s.missingWarn)||Xr(s.missingWarn)?s.missingWarn:!0,w=o?a.fallbackWarn:ia(s.fallbackWarn)||Xr(s.fallbackWarn)?s.fallbackWarn:!0,$=o?a.fallbackRoot:ia(s.fallbackRoot)?s.fallbackRoot:!0,D=!!s.fallbackFormat,V=Fa(s.missing)?s.missing:null,R=Fa(s.postTranslation)?s.postTranslation:null,E=o?a.warnHtmlMessage:ia(s.warnHtmlMessage)?s.warnHtmlMessage:!0,P=!!s.escapeParameter,S=o?a.modifiers:Gt(s.modifiers)?s.modifiers:{},C=s.pluralRules||o&&a.pluralRules;function M(){return[u.value,h.value,m.value,p.value,b.value]}const g=ee({get:()=>r.value?r.value.locale.value:u.value,set:N=>{r.value&&(r.value.locale.value=N),u.value=N}}),v=ee({get:()=>r.value?r.value.fallbackLocale.value:h.value,set:N=>{r.value&&(r.value.fallbackLocale.value=N),h.value=N}}),T=ee(()=>r.value?r.value.messages.value:m.value),j=ee(()=>p.value),B=ee(()=>b.value);function oe(){return r.value?r.value.getPostTranslationHandler():R}function be(N){r.value&&r.value.setPostTranslationHandler(N)}function $e(){return r.value?r.value.getMissingHandler():V}function Le(N){r.value&&r.value.setMissingHandler(N)}function de(N){return M(),N()}function J(...N){return r.value?de(()=>Reflect.apply(r.value.t,null,[...N])):de(()=>"")}function G(...N){return r.value?Reflect.apply(r.value.rt,null,[...N]):""}function ce(...N){return r.value?de(()=>Reflect.apply(r.value.d,null,[...N])):de(()=>"")}function Ee(...N){return r.value?de(()=>Reflect.apply(r.value.n,null,[...N])):de(()=>"")}function He(N){return r.value?r.value.tm(N):{}}function Ke(N,Q){return r.value?r.value.te(N,Q):!1}function pt(N){return r.value?r.value.getLocaleMessage(N):{}}function ut(N,Q){r.value&&(r.value.setLocaleMessage(N,Q),m.value[N]=Q)}function ft(N,Q){r.value&&r.value.mergeLocaleMessage(N,Q)}function kt(N){return r.value?r.value.getDateTimeFormat(N):{}}function Ae(N,Q){r.value&&(r.value.setDateTimeFormat(N,Q),p.value[N]=Q)}function Xe(N,Q){r.value&&r.value.mergeDateTimeFormat(N,Q)}function ie(N){return r.value?r.value.getNumberFormat(N):{}}function Y(N,Q){r.value&&(r.value.setNumberFormat(N,Q),b.value[N]=Q)}function ue(N,Q){r.value&&r.value.mergeNumberFormat(N,Q)}const pe={get id(){return r.value?r.value.id:-1},locale:g,fallbackLocale:v,messages:T,datetimeFormats:j,numberFormats:B,get inheritLocale(){return r.value?r.value.inheritLocale:i},set inheritLocale(N){r.value&&(r.value.inheritLocale=N)},get availableLocales(){return r.value?r.value.availableLocales:Object.keys(m.value)},get modifiers(){return r.value?r.value.modifiers:S},get pluralRules(){return r.value?r.value.pluralRules:C},get isGlobal(){return r.value?r.value.isGlobal:!1},get missingWarn(){return r.value?r.value.missingWarn:x},set missingWarn(N){r.value&&(r.value.missingWarn=N)},get fallbackWarn(){return r.value?r.value.fallbackWarn:w},set fallbackWarn(N){r.value&&(r.value.missingWarn=N)},get fallbackRoot(){return r.value?r.value.fallbackRoot:$},set fallbackRoot(N){r.value&&(r.value.fallbackRoot=N)},get fallbackFormat(){return r.value?r.value.fallbackFormat:D},set fallbackFormat(N){r.value&&(r.value.fallbackFormat=N)},get warnHtmlMessage(){return r.value?r.value.warnHtmlMessage:E},set warnHtmlMessage(N){r.value&&(r.value.warnHtmlMessage=N)},get escapeParameter(){return r.value?r.value.escapeParameter:P},set escapeParameter(N){r.value&&(r.value.escapeParameter=N)},t:J,getPostTranslationHandler:oe,setPostTranslationHandler:be,getMissingHandler:$e,setMissingHandler:Le,rt:G,d:ce,n:Ee,tm:He,te:Ke,getLocaleMessage:pt,setLocaleMessage:ut,mergeLocaleMessage:ft,getDateTimeFormat:kt,setDateTimeFormat:Ae,mergeDateTimeFormat:Xe,getNumberFormat:ie,setNumberFormat:Y,mergeNumberFormat:ue};function H(N){N.locale.value=u.value,N.fallbackLocale.value=h.value,Object.keys(m.value).forEach(Q=>{N.mergeLocaleMessage(Q,m.value[Q])}),Object.keys(p.value).forEach(Q=>{N.mergeDateTimeFormat(Q,p.value[Q])}),Object.keys(b.value).forEach(Q=>{N.mergeNumberFormat(Q,b.value[Q])}),N.escapeParameter=P,N.fallbackFormat=D,N.fallbackRoot=$,N.fallbackWarn=w,N.missingWarn=x,N.warnHtmlMessage=E}return Dj(()=>{if(n.proxy==null||n.proxy.$i18n==null)throw Tn(xn.NOT_AVAILABLE_COMPOSITION_IN_LEGACY);const N=r.value=n.proxy.$i18n.__composer;e==="global"?(u.value=N.locale.value,h.value=N.fallbackLocale.value,m.value=N.messages.value,p.value=N.datetimeFormats.value,b.value=N.numberFormats.value):o&&H(N)}),pe}const Ple=["locale","fallbackLocale","availableLocales"],bU=["t","rt","d","n","tm","te"];function Dle(n,e){const a=Object.create(null);return Ple.forEach(o=>{const r=Object.getOwnPropertyDescriptor(e,o);if(!r)throw Tn(xn.UNEXPECTED_ERROR);const i=on(r.value)?{get(){return r.value.value},set(u){r.value.value=u}}:{get(){return r.get&&r.get()}};Object.defineProperty(a,o,i)}),n.config.globalProperties.$i18n=a,bU.forEach(o=>{const r=Object.getOwnPropertyDescriptor(e,o);if(!r||!r.value)throw Tn(xn.UNEXPECTED_ERROR);Object.defineProperty(n.config.globalProperties,`$${o}`,r)}),()=>{delete n.config.globalProperties.$i18n,bU.forEach(o=>{delete n.config.globalProperties[`$${o}`]})}}dle();__INTLIFY_JIT_COMPILATION__?eU(sle):eU(nle);Xie(Eie);Yie(gN);if(__INTLIFY_PROD_DEVTOOLS__){const n=Yo();n.__INTLIFY__=!0,jie(n.__INTLIFY_DEVTOOLS_GLOBAL_HOOK__)}const Rle=c("div",{class:"absolute left-3 top-0 h-full w-px bg-gray-200"},null,-1),Ole=c("div",{class:"absolute left-3 top-1/2 h-px w-3 bg-gray-200"},null,-1),Vle={class:"text-primary"},Uc=Ce({__name:"UserLocation",props:{visible:{type:Boolean,default:!0},theme:{default:"rubick"},layout:{default:"side-menu"}},setup(n){const e=n;An(e,"visible");const a=An(e,"theme"),s=An(e,"layout"),{t:o}=tt(),r=Za(),i=zt(),u=ee(()=>r.userContext),h=ee(()=>i.selectedUserLocation),m=ee(()=>{let $="";return h.value.company.name!=""&&($=h.value.company.name),h.value.branch.name!=""&&($+=" - "+h.value.branch.name),$}),p=ee(()=>{let $=0;return u.value.companies.forEach(D=>{$+=1,D.branches&&($+=D.branches.length)}),$}),b=ee(()=>At([a.value=="rubick"&&(s.value=="side-menu"||s.value=="simple-menu")&&"hidden mr-auto -intro-x sm:flex",a.value=="rubick"&&s.value=="top-menu"&&"h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x",a.value=="icewall"&&"h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x",a.value=="enigma"&&"h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x",a.value=="tinker"&&(s.value=="side-menu"||s.value=="simple-menu")&&"hidden mr-auto -intro-x sm:flex",a.value=="tinker"&&s.value=="top-menu"&&"h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x"])),x=ee(()=>{switch(!0){case(a.value=="rubick"&&(s.value=="side-menu"||s.value=="simple-menu")):return!1;case(a.value=="rubick"&&s.value=="top-menu"):return!0;case a.value=="icewall":return!0;case a.value=="enigma":return!0;case(a.value=="tinker"&&(s.value=="side-menu"||s.value=="simple-menu")):return!1;case(a.value=="tinker"&&s.value=="top-menu"):return!0;default:return!1}});at(()=>{i.getSelectedUserLocation});const w=($,D)=>{let V=Pt.find(u.value.companies,{id:$});if(!V)return;let R=D==""?Pt.find(V.branches,{is_main:!0}):Pt.find(V.branches,{id:D});R?(i.clearSelectedUserLocation(),i.setSelectedUserLocation(V.id,V.ulid,V.code,V.name,R.id,R.ulid,R.code,R.name)):(i.clearSelectedUserLocation(),i.setSelectedUserLocation(V.id,V.ulid,V.code,V.name))};return($,D)=>(L(),ge(t(Y$),{light:x.value,class:F(b.value)},{default:f(()=>[l(t(Y$).Text,null,{default:f(()=>[l(t(Xa),null,{default:f(()=>[l(t(Xa).Button,{variant:"primary"},{default:f(()=>[l(t(re),{icon:"Umbrella"})]),_:1}),l(t(Xa).Items,{class:F({"w-96 h-12":p.value==0,"w-96 h-48":p.value>=1&&p.value<=10,"w-96 h-96":p.value&&p.value>10,"overflow-y-auto":!0}),placement:"bottom-start"},{default:f(()=>[u.value.companies&&u.value.companies.length!=0?(L(!0),U(ke,{key:0},Fe(u.value.companies,(V,R)=>(L(),U(ke,{key:R},[l(t(Xa).Item,{onClick:E=>w(V.id,""),class:"relative"},{default:f(()=>[c("span",{class:F({"text-primary font-bold":!0,underline:V.default})},_(V.name),3)]),_:2},1032,["onClick"]),(L(!0),U(ke,null,Fe(V.branches,(E,P)=>(L(),ge(t(Xa).Item,{key:P,onClick:S=>w(V.id,E==null?"":E.id),class:"pl-6 relative"},{default:f(()=>[Rle,Ole,E!=null?(L(),U("span",{key:0,class:F(["pl-1",{"text-primary":!0,underline:E.is_main}])},_(E.name),3)):Me("",!0)]),_:2},1032,["onClick"]))),128)),u.value.companies.length-1!=R?(L(),ge(t(Xa).Divider,{key:0})):Me("",!0)],64))),128)):(L(),ge(t(Xa).Item,{key:1},{default:f(()=>[c("span",Vle,_(t(o)("components.user-location.data_not_found")),1)]),_:1}))]),_:1},8,["class"])]),_:1})]),_:1}),m.value!=""?(L(),ge(t(Y$).Text,{key:0},{default:f(()=>[A(_(m.value),1)]),_:1})):Me("",!0)]),_:1},8,["light","class"]))}}),Ule={inheritAttrs:!1},Fle=Ce({...Ule,__name:"FormCheck",setup(n){const e=Ot(),a=ee(()=>At(["flex items-center",typeof e.class=="string"&&e.class]));return(s,o)=>(L(),U("div",Ft({class:a.value},t(Pt).omit(t(e),"class")),[Lt(s.$slots,"default")],16))}}),jle=["type"],Hle={inheritAttrs:!1},Nle=Ce({...Hle,__name:"Input",props:{modelValue:{},type:{}},emits:["update:modelValue"],setup(n,{emit:e}){const a=n,s=Ot(),o=ee(()=>At(["transition-all duration-100 ease-in-out",a.type=="radio"&&"shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50",a.type=="checkbox"&&"shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50","[&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10","[&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10","[&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50","[&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50",typeof s.class=="string"&&s.class])),r=e,i=ee({get(){return a.modelValue},set(u){r("update:modelValue",u)}});return(u,h)=>rs((L(),U("input",Ft({class:o.value,type:a.type},t(Pt).omit(t(s),"class"),{"onUpdate:modelValue":h[0]||(h[0]=m=>i.value=m)}),null,16,jle)),[[MT,i.value]])}}),zle={inheritAttrs:!1},Ble=Ce({...zle,__name:"Label",setup(n){const e=Ot(),a=ee(()=>At(["cursor-pointer ml-2",typeof e.class=="string"&&e.class]));return(s,o)=>(L(),U("label",Ft({class:a.value},t(Pt).omit(t(e),"class")),[Lt(s.$slots,"default")],16))}}),Nn=Object.assign({},Fle,{Input:Nle,Label:Ble}),qle=["type"],Wle={inheritAttrs:!1},Oe=Ce({...Wle,__name:"FormInput",props:{value:{},modelValue:{},formInputSize:{},rounded:{type:Boolean}},emits:["update:modelValue"],setup(n,{emit:e}){const a=n,s=Ot(),o=xt("formInline",!1),r=xt("inputGroup",!1),i=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",a.formInputSize=="sm"&&"text-xs py-1.5 px-2",a.formInputSize=="lg"&&"text-lg py-1.5 px-4",a.rounded&&"rounded-full",o&&"flex-1",r&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",typeof s.class=="string"&&s.class])),u=e,h=ee({get(){return a.modelValue===void 0?a.value:a.modelValue},set(m){u("update:modelValue",m)}});return(m,p)=>rs((L(),U("input",Ft({class:i.value,type:a.type},t(Pt).omit(t(s),"class"),{"onUpdate:modelValue":p[0]||(p[0]=b=>h.value=b)}),null,16,qle)),[[MT,h.value]])}}),Gle=["type"],Zle={inheritAttrs:!1},la=Ce({...Zle,__name:"FormTextarea",props:{value:{},modelValue:{},formTextareaSize:{},rounded:{type:Boolean}},emits:["update:modelValue"],setup(n,{emit:e}){const a=n,s=Ot(),o=xt("formInline",!1),r=xt("inputGroup",!1),i=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",a.formTextareaSize=="sm"&&"text-xs py-1.5 px-2",a.formTextareaSize=="lg"&&"text-lg py-1.5 px-4",a.rounded&&"rounded-full",o&&"flex-1",r&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",typeof s.class=="string"&&s.class])),u=e,h=ee({get(){return a.modelValue===void 0?a.value:a.modelValue},set(m){u("update:modelValue",m)}});return(m,p)=>rs((L(),U("textarea",Ft({type:a.type,class:i.value},t(Pt).omit(t(s),"class"),{"onUpdate:modelValue":p[0]||(p[0]=b=>h.value=b)}),null,16,Gle)),[[Lo,h.value]])}}),Kle={inheritAttrs:!1},K=Ce({...Kle,__name:"FormLabel",setup(n){const e=Ot(),a=xt("formInline",!1),s=ee(()=>At(["inline-block mb-2",a&&"mb-2 sm:mb-0 sm:mr-5 sm:text-right",typeof e.class=="string"&&e.class]));return(o,r)=>(L(),U("label",Ft({class:s.value},t(Pt).omit(t(e),"class")),[Lt(o.$slots,"default")],16))}}),Xle={inheritAttrs:!1},Zt=Ce({...Xle,__name:"FormSelect",props:{value:{},modelValue:{},formSelectSize:{}},emits:["update:modelValue"],setup(n,{emit:e}){const a=O(),s=n,o=Ot(),r=xt("formInline",!1),i=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50",s.formSelectSize=="sm"&&"text-xs py-1.5 pl-2 pr-8",s.formSelectSize=="lg"&&"text-lg py-1.5 pl-4 pr-8",r&&"flex-1",typeof o.class=="string"&&o.class])),u=e,h=ee({get(){var m;if(s.modelValue===void 0&&s.value===void 0){const p=(m=a.value)==null?void 0:m.querySelectorAll("option")[0];return p!==void 0&&(p.getAttribute("value")!==null?p.getAttribute("value"):p.text)}return s.modelValue===void 0?s.value:s.modelValue},set(m){u("update:modelValue",m)}});return(m,p)=>rs((L(),U("select",Ft({ref_key:"selectRef",ref:a,class:i.value},t(Pt).omit(t(o),"class"),{"onUpdate:modelValue":p[0]||(p[0]=b=>h.value=b)}),[Lt(m.$slots,"default")],16)),[[Jj,h.value]])}}),Yle={class:"relative"},Qle=["readonly"],Jle={key:1,class:"absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-slate-200 bg-white text-sm shadow-lg dark:border-slate-600 dark:bg-darkmode-800"},ece=["onMousedown"],tce={inheritAttrs:!1},Bt=Ce({...tce,__name:"FormSelectSearch",props:{modelValue:{},options:{},formInputSize:{},rounded:{type:Boolean}},emits:["update:modelValue","change","update:search","search","clear"],setup(n,{emit:e}){const a=n,s=e,o=Ot(),r=xt("formInline",!1),i=xt("inputGroup",!1),u=O(null),h=O(!1),m=O(!1),p=O(""),b=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",a.formInputSize=="sm"&&"text-xs py-1.5 px-2",a.formInputSize=="lg"&&"text-lg py-1.5 px-4",a.rounded&&"rounded-full",r&&"flex-1",i&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10","pr-8",typeof o.class=="string"&&o.class])),x=ee(()=>!a.options||a.modelValue===void 0||a.modelValue===null?null:a.options.find(M=>M.value===a.modelValue)??null),w=ee(()=>a.options??[]),$=ee(()=>x.value!==null),D=ee(()=>a.modelValue!==void 0&&a.modelValue!==null&&a.modelValue!=="");dt(()=>[a.modelValue,a.options],()=>{h.value||(p.value=x.value?x.value.label:"")},{immediate:!0});const V=Pt.debounce(M=>{s("update:search",M),s("search",M)},300),R=M=>{if($.value)return;const v=M.target.value;p.value=v,m.value=!0,V(v)},E=()=>{$.value||(h.value=!0,m.value=!0)},P=()=>{h.value=!1,m.value=!1,p.value=x.value?x.value.label:p.value},S=M=>{s("update:modelValue",M.value),s("change",M.value),p.value=M.label,m.value=!1,h.value=!1},C=()=>{s("update:modelValue",null),s("change",null),p.value="",m.value=!1,h.value=!1,s("update:search",""),s("search",""),s("clear")};return(M,g)=>(L(),U("div",Yle,[rs(c("input",Ft({ref_key:"inputRef",ref:u,class:b.value,type:"text"},t(Pt).omit(t(o),"class"),{"onUpdate:modelValue":g[0]||(g[0]=v=>p.value=v),readonly:$.value,onFocus:E,onBlur:P,onInput:R}),null,16,Qle),[[Lo,p.value]]),D.value?(L(),U("button",{key:0,type:"button",class:"absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-danger",onMousedown:Rt(C,["prevent","stop"])},[l(t(re),{icon:"X",class:"w-4 h-4"})],32)):Me("",!0),m.value&&w.value.length>0?(L(),U("ul",Jle,[(L(!0),U(ke,null,Fe(w.value,v=>(L(),U("li",{key:v.value,class:"cursor-pointer px-3 py-2 hover:bg-slate-100 dark:hover:bg-darkmode-700",onMousedown:Rt(T=>S(v),["prevent"])},_(v.label),41,ece))),128))])):Me("",!0)]))}}),ace=Ce({__name:"FormSwitch",setup(n){return(e,a)=>(L(),ge(t(Nn),null,{default:f(()=>[Lt(e.$slots,"default")]),_:3}))}}),nce={inheritAttrs:!1},sce=Ce({...nce,__name:"Input",props:{modelValue:{},type:{}},emits:["update:modelValue"],setup(n,{emit:e}){const a=n,s=Ot(),o=ee(()=>At(["w-[38px] h-[24px] p-px rounded-full relative","before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600","checked:bg-primary checked:border-primary checked:bg-none","before:checked:ml-[14px] before:checked:bg-white",typeof s.class=="string"&&s.class])),r=e,i=ee({get(){return a.modelValue},set(u){r("update:modelValue",u)}});return(u,h)=>(L(),ge(t(Nn).Input,Ft({type:a.type,class:o.value},t(Pt).omit(t(s),"class"),{modelValue:i.value,"onUpdate:modelValue":h[0]||(h[0]=m=>i.value=m)}),null,16,["type","class","modelValue"]))}}),oce=Ce({__name:"Label",setup(n){return(e,a)=>(L(),ge(t(Nn).Label,null,{default:f(()=>[Lt(e.$slots,"default")]),_:3}))}}),wt=Object.assign({},ace,{Input:sce,Label:oce}),rce={inheritAttrs:!1},ice=Ce({...rce,__name:"InputGroup",setup(n){const e=Ot(),a=ee(()=>At(["flex",typeof e.class=="string"&&e.class]));return St("inputGroup",!0),(s,o)=>(L(),U("div",Ft({class:a.value},t(Pt).omit(t(e),"class")),[Lt(s.$slots,"default")],16))}}),lce={inheritAttrs:!1},cce=Ce({...lce,__name:"Text",setup(n){const e=Ot(),a=xt("inputGroup"),s=ee(()=>At(["py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400",a&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r",typeof e.class=="string"&&e.class]));return(o,r)=>(L(),U("div",Ft({class:s.value},t(Pt).omit(t(e),"class")),[Lt(o.$slots,"default")],16))}});Object.assign({},ice,{Text:cce});function FN(n,e){return function(){return n.apply(e,arguments)}}const{toString:dce}=Object.prototype,{getPrototypeOf:QT}=Object,i9=(n=>e=>{const a=dce.call(e);return n[a]||(n[a]=a.slice(8,-1).toLowerCase())})(Object.create(null)),Po=n=>(n=n.toLowerCase(),e=>i9(e)===n),l9=n=>e=>typeof e===n,{isArray:Fc}=Array,Xd=l9("undefined");function uce(n){return n!==null&&!Xd(n)&&n.constructor!==null&&!Xd(n.constructor)&&Hs(n.constructor.isBuffer)&&n.constructor.isBuffer(n)}const jN=Po("ArrayBuffer");function pce(n){let e;return typeof ArrayBuffer<"u"&&ArrayBuffer.isView?e=ArrayBuffer.isView(n):e=n&&n.buffer&&jN(n.buffer),e}const hce=l9("string"),Hs=l9("function"),HN=l9("number"),c9=n=>n!==null&&typeof n=="object",fce=n=>n===!0||n===!1,eL=n=>{if(i9(n)!=="object")return!1;const e=QT(n);return(e===null||e===Object.prototype||Object.getPrototypeOf(e)===null)&&!(Symbol.toStringTag in n)&&!(Symbol.iterator in n)},mce=Po("Date"),vce=Po("File"),yce=Po("Blob"),_ce=Po("FileList"),gce=n=>c9(n)&&Hs(n.pipe),kce=n=>{let e;return n&&(typeof FormData=="function"&&n instanceof FormData||Hs(n.append)&&((e=i9(n))==="formdata"||e==="object"&&Hs(n.toString)&&n.toString()==="[object FormData]"))},bce=Po("URLSearchParams"),wce=n=>n.trim?n.trim():n.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"");function fu(n,e,{allOwnKeys:a=!1}={}){if(n===null||typeof n>"u")return;let s,o;if(typeof n!="object"&&(n=[n]),Fc(n))for(s=0,o=n.length;s<o;s++)e.call(null,n[s],s,n);else{const r=a?Object.getOwnPropertyNames(n):Object.keys(n),i=r.length;let u;for(s=0;s<i;s++)u=r[s],e.call(null,n[u],u,n)}}function NN(n,e){e=e.toLowerCase();const a=Object.keys(n);let s=a.length,o;for(;s-- >0;)if(o=a[s],e===o.toLowerCase())return o;return null}const zN=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:global,BN=n=>!Xd(n)&&n!==zN;function kE(){const{caseless:n}=BN(this)&&this||{},e={},a=(s,o)=>{const r=n&&NN(e,o)||o;eL(e[r])&&eL(s)?e[r]=kE(e[r],s):eL(s)?e[r]=kE({},s):Fc(s)?e[r]=s.slice():e[r]=s};for(let s=0,o=arguments.length;s<o;s++)arguments[s]&&fu(arguments[s],a);return e}const xce=(n,e,a,{allOwnKeys:s}={})=>(fu(e,(o,r)=>{a&&Hs(o)?n[r]=FN(o,a):n[r]=o},{allOwnKeys:s}),n),Mce=n=>(n.charCodeAt(0)===65279&&(n=n.slice(1)),n),Cce=(n,e,a,s)=>{n.prototype=Object.create(e.prototype,s),n.prototype.constructor=n,Object.defineProperty(n,"super",{value:e.prototype}),a&&Object.assign(n.prototype,a)},Sce=(n,e,a,s)=>{let o,r,i;const u={};if(e=e||{},n==null)return e;do{for(o=Object.getOwnPropertyNames(n),r=o.length;r-- >0;)i=o[r],(!s||s(i,n,e))&&!u[i]&&(e[i]=n[i],u[i]=!0);n=a!==!1&&QT(n)}while(n&&(!a||a(n,e))&&n!==Object.prototype);return e},Ice=(n,e,a)=>{n=String(n),(a===void 0||a>n.length)&&(a=n.length),a-=e.length;const s=n.indexOf(e,a);return s!==-1&&s===a},Lce=n=>{if(!n)return null;if(Fc(n))return n;let e=n.length;if(!HN(e))return null;const a=new Array(e);for(;e-- >0;)a[e]=n[e];return a},$ce=(n=>e=>n&&e instanceof n)(typeof Uint8Array<"u"&&QT(Uint8Array)),Ace=(n,e)=>{const s=(n&&n[Symbol.iterator]).call(n);let o;for(;(o=s.next())&&!o.done;){const r=o.value;e.call(n,r[0],r[1])}},Ece=(n,e)=>{let a;const s=[];for(;(a=n.exec(e))!==null;)s.push(a);return s},Tce=Po("HTMLFormElement"),Pce=n=>n.toLowerCase().replace(/[-_\s]([a-z\d])(\w*)/g,function(a,s,o){return s.toUpperCase()+o}),wU=(({hasOwnProperty:n})=>(e,a)=>n.call(e,a))(Object.prototype),Dce=Po("RegExp"),qN=(n,e)=>{const a=Object.getOwnPropertyDescriptors(n),s={};fu(a,(o,r)=>{let i;(i=e(o,r,n))!==!1&&(s[r]=i||o)}),Object.defineProperties(n,s)},Rce=n=>{qN(n,(e,a)=>{if(Hs(n)&&["arguments","caller","callee"].indexOf(a)!==-1)return!1;const s=n[a];if(Hs(s)){if(e.enumerable=!1,"writable"in e){e.writable=!1;return}e.set||(e.set=()=>{throw Error("Can not rewrite read-only method '"+a+"'")})}})},Oce=(n,e)=>{const a={},s=o=>{o.forEach(r=>{a[r]=!0})};return Fc(n)?s(n):s(String(n).split(e)),a},Vce=()=>{},Uce=(n,e)=>(n=+n,Number.isFinite(n)?n:e),nA="abcdefghijklmnopqrstuvwxyz",xU="0123456789",WN={DIGIT:xU,ALPHA:nA,ALPHA_DIGIT:nA+nA.toUpperCase()+xU},Fce=(n=16,e=WN.ALPHA_DIGIT)=>{let a="";const{length:s}=e;for(;n--;)a+=e[Math.random()*s|0];return a};function jce(n){return!!(n&&Hs(n.append)&&n[Symbol.toStringTag]==="FormData"&&n[Symbol.iterator])}const Hce=n=>{const e=new Array(10),a=(s,o)=>{if(c9(s)){if(e.indexOf(s)>=0)return;if(!("toJSON"in s)){e[o]=s;const r=Fc(s)?[]:{};return fu(s,(i,u)=>{const h=a(i,o+1);!Xd(h)&&(r[u]=h)}),e[o]=void 0,r}}return s};return a(n,0)},Nce=Po("AsyncFunction"),zce=n=>n&&(c9(n)||Hs(n))&&Hs(n.then)&&Hs(n.catch),Je={isArray:Fc,isArrayBuffer:jN,isBuffer:uce,isFormData:kce,isArrayBufferView:pce,isString:hce,isNumber:HN,isBoolean:fce,isObject:c9,isPlainObject:eL,isUndefined:Xd,isDate:mce,isFile:vce,isBlob:yce,isRegExp:Dce,isFunction:Hs,isStream:gce,isURLSearchParams:bce,isTypedArray:$ce,isFileList:_ce,forEach:fu,merge:kE,extend:xce,trim:wce,stripBOM:Mce,inherits:Cce,toFlatObject:Sce,kindOf:i9,kindOfTest:Po,endsWith:Ice,toArray:Lce,forEachEntry:Ace,matchAll:Ece,isHTMLForm:Tce,hasOwnProperty:wU,hasOwnProp:wU,reduceDescriptors:qN,freezeMethods:Rce,toObjectSet:Oce,toCamelCase:Pce,noop:Vce,toFiniteNumber:Uce,findKey:NN,global:zN,isContextDefined:BN,ALPHABET:WN,generateString:Fce,isSpecCompliantForm:jce,toJSONObject:Hce,isAsyncFn:Nce,isThenable:zce};function va(n,e,a,s,o){Error.call(this),Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):this.stack=new Error().stack,this.message=n,this.name="AxiosError",e&&(this.code=e),a&&(this.config=a),s&&(this.request=s),o&&(this.response=o)}Je.inherits(va,Error,{toJSON:function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:Je.toJSONObject(this.config),code:this.code,status:this.response&&this.response.status?this.response.status:null}}});const GN=va.prototype,ZN={};["ERR_BAD_OPTION_VALUE","ERR_BAD_OPTION","ECONNABORTED","ETIMEDOUT","ERR_NETWORK","ERR_FR_TOO_MANY_REDIRECTS","ERR_DEPRECATED","ERR_BAD_RESPONSE","ERR_BAD_REQUEST","ERR_CANCELED","ERR_NOT_SUPPORT","ERR_INVALID_URL"].forEach(n=>{ZN[n]={value:n}});Object.defineProperties(va,ZN);Object.defineProperty(GN,"isAxiosError",{value:!0});va.from=(n,e,a,s,o,r)=>{const i=Object.create(GN);return Je.toFlatObject(n,i,function(h){return h!==Error.prototype},u=>u!=="isAxiosError"),va.call(i,n.message,e,a,s,o),i.cause=n,i.name=n.name,r&&Object.assign(i,r),i};const Bce=null;function bE(n){return Je.isPlainObject(n)||Je.isArray(n)}function KN(n){return Je.endsWith(n,"[]")?n.slice(0,-2):n}function MU(n,e,a){return n?n.concat(e).map(function(o,r){return o=KN(o),!a&&r?"["+o+"]":o}).join(a?".":""):e}function qce(n){return Je.isArray(n)&&!n.some(bE)}const Wce=Je.toFlatObject(Je,{},null,function(e){return/^is[A-Z]/.test(e)});function d9(n,e,a){if(!Je.isObject(n))throw new TypeError("target must be an object");e=e||new FormData,a=Je.toFlatObject(a,{metaTokens:!0,dots:!1,indexes:!1},!1,function(D,V){return!Je.isUndefined(V[D])});const s=a.metaTokens,o=a.visitor||p,r=a.dots,i=a.indexes,h=(a.Blob||typeof Blob<"u"&&Blob)&&Je.isSpecCompliantForm(e);if(!Je.isFunction(o))throw new TypeError("visitor must be a function");function m($){if($===null)return"";if(Je.isDate($))return $.toISOString();if(!h&&Je.isBlob($))throw new va("Blob is not supported. Use a Buffer instead.");return Je.isArrayBuffer($)||Je.isTypedArray($)?h&&typeof Blob=="function"?new Blob([$]):Buffer.from($):$}function p($,D,V){let R=$;if($&&!V&&typeof $=="object"){if(Je.endsWith(D,"{}"))D=s?D:D.slice(0,-2),$=JSON.stringify($);else if(Je.isArray($)&&qce($)||(Je.isFileList($)||Je.endsWith(D,"[]"))&&(R=Je.toArray($)))return D=KN(D),R.forEach(function(P,S){!(Je.isUndefined(P)||P===null)&&e.append(i===!0?MU([D],S,r):i===null?D:D+"[]",m(P))}),!1}return bE($)?!0:(e.append(MU(V,D,r),m($)),!1)}const b=[],x=Object.assign(Wce,{defaultVisitor:p,convertValue:m,isVisitable:bE});function w($,D){if(!Je.isUndefined($)){if(b.indexOf($)!==-1)throw Error("Circular reference detected in "+D.join("."));b.push($),Je.forEach($,function(R,E){(!(Je.isUndefined(R)||R===null)&&o.call(e,R,Je.isString(E)?E.trim():E,D,x))===!0&&w(R,D?D.concat(E):[E])}),b.pop()}}if(!Je.isObject(n))throw new TypeError("data must be an object");return w(n),e}function CU(n){const e={"!":"%21","'":"%27","(":"%28",")":"%29","~":"%7E","%20":"+","%00":"\0"};return encodeURIComponent(n).replace(/[!'()~]|%20|%00/g,function(s){return e[s]})}function JT(n,e){this._pairs=[],n&&d9(n,this,e)}const XN=JT.prototype;XN.append=function(e,a){this._pairs.push([e,a])};XN.toString=function(e){const a=e?function(s){return e.call(this,s,CU)}:CU;return this._pairs.map(function(o){return a(o[0])+"="+a(o[1])},"").join("&")};function Gce(n){return encodeURIComponent(n).replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"+").replace(/%5B/gi,"[").replace(/%5D/gi,"]")}function YN(n,e,a){if(!e)return n;const s=a&&a.encode||Gce,o=a&&a.serialize;let r;if(o?r=o(e,a):r=Je.isURLSearchParams(e)?e.toString():new JT(e,a).toString(s),r){const i=n.indexOf("#");i!==-1&&(n=n.slice(0,i)),n+=(n.indexOf("?")===-1?"?":"&")+r}return n}class SU{constructor(){this.handlers=[]}use(e,a,s){return this.handlers.push({fulfilled:e,rejected:a,synchronous:s?s.synchronous:!1,runWhen:s?s.runWhen:null}),this.handlers.length-1}eject(e){this.handlers[e]&&(this.handlers[e]=null)}clear(){this.handlers&&(this.handlers=[])}forEach(e){Je.forEach(this.handlers,function(s){s!==null&&e(s)})}}const QN={silentJSONParsing:!0,forcedJSONParsing:!0,clarifyTimeoutError:!1},Zce=typeof URLSearchParams<"u"?URLSearchParams:JT,Kce=typeof FormData<"u"?FormData:null,Xce=typeof Blob<"u"?Blob:null,Yce={isBrowser:!0,classes:{URLSearchParams:Zce,FormData:Kce,Blob:Xce},protocols:["http","https","file","blob","url","data"]},JN=typeof window<"u"&&typeof document<"u",Qce=(n=>JN&&["ReactNative","NativeScript","NS"].indexOf(n)<0)(typeof navigator<"u"&&navigator.product),Jce=typeof WorkerGlobalScope<"u"&&self instanceof WorkerGlobalScope&&typeof self.importScripts=="function",ede=Object.freeze(Object.defineProperty({__proto__:null,hasBrowserEnv:JN,hasStandardBrowserEnv:Qce,hasStandardBrowserWebWorkerEnv:Jce},Symbol.toStringTag,{value:"Module"})),Mo={...ede,...Yce};function tde(n,e){return d9(n,new Mo.classes.URLSearchParams,Object.assign({visitor:function(a,s,o,r){return Mo.isNode&&Je.isBuffer(a)?(this.append(s,a.toString("base64")),!1):r.defaultVisitor.apply(this,arguments)}},e))}function ade(n){return Je.matchAll(/\w+|\[(\w*)]/g,n).map(e=>e[0]==="[]"?"":e[1]||e[0])}function nde(n){const e={},a=Object.keys(n);let s;const o=a.length;let r;for(s=0;s<o;s++)r=a[s],e[r]=n[r];return e}function ez(n){function e(a,s,o,r){let i=a[r++];if(i==="__proto__")return!0;const u=Number.isFinite(+i),h=r>=a.length;return i=!i&&Je.isArray(o)?o.length:i,h?(Je.hasOwnProp(o,i)?o[i]=[o[i],s]:o[i]=s,!u):((!o[i]||!Je.isObject(o[i]))&&(o[i]=[]),e(a,s,o[i],r)&&Je.isArray(o[i])&&(o[i]=nde(o[i])),!u)}if(Je.isFormData(n)&&Je.isFunction(n.entries)){const a={};return Je.forEachEntry(n,(s,o)=>{e(ade(s),o,a,0)}),a}return null}function sde(n,e,a){if(Je.isString(n))try{return(e||JSON.parse)(n),Je.trim(n)}catch(s){if(s.name!=="SyntaxError")throw s}return(a||JSON.stringify)(n)}const eP={transitional:QN,adapter:["xhr","http"],transformRequest:[function(e,a){const s=a.getContentType()||"",o=s.indexOf("application/json")>-1,r=Je.isObject(e);if(r&&Je.isHTMLForm(e)&&(e=new FormData(e)),Je.isFormData(e))return o?JSON.stringify(ez(e)):e;if(Je.isArrayBuffer(e)||Je.isBuffer(e)||Je.isStream(e)||Je.isFile(e)||Je.isBlob(e))return e;if(Je.isArrayBufferView(e))return e.buffer;if(Je.isURLSearchParams(e))return a.setContentType("application/x-www-form-urlencoded;charset=utf-8",!1),e.toString();let u;if(r){if(s.indexOf("application/x-www-form-urlencoded")>-1)return tde(e,this.formSerializer).toString();if((u=Je.isFileList(e))||s.indexOf("multipart/form-data")>-1){const h=this.env&&this.env.FormData;return d9(u?{"files[]":e}:e,h&&new h,this.formSerializer)}}return r||o?(a.setContentType("application/json",!1),sde(e)):e}],transformResponse:[function(e){const a=this.transitional||eP.transitional,s=a&&a.forcedJSONParsing,o=this.responseType==="json";if(e&&Je.isString(e)&&(s&&!this.responseType||o)){const i=!(a&&a.silentJSONParsing)&&o;try{return JSON.parse(e)}catch(u){if(i)throw u.name==="SyntaxError"?va.from(u,va.ERR_BAD_RESPONSE,this,null,this.response):u}}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,maxBodyLength:-1,env:{FormData:Mo.classes.FormData,Blob:Mo.classes.Blob},validateStatus:function(e){return e>=200&&e<300},headers:{common:{Accept:"application/json, text/plain, */*","Content-Type":void 0}}};Je.forEach(["delete","get","head","post","put","patch"],n=>{eP.headers[n]={}});const tP=eP,ode=Je.toObjectSet(["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"]),rde=n=>{const e={};let a,s,o;return n&&n.split(`
+`).forEach(function(i){o=i.indexOf(":"),a=i.substring(0,o).trim().toLowerCase(),s=i.substring(o+1).trim(),!(!a||e[a]&&ode[a])&&(a==="set-cookie"?e[a]?e[a].push(s):e[a]=[s]:e[a]=e[a]?e[a]+", "+s:s)}),e},IU=Symbol("internals");function fd(n){return n&&String(n).trim().toLowerCase()}function tL(n){return n===!1||n==null?n:Je.isArray(n)?n.map(tL):String(n)}function ide(n){const e=Object.create(null),a=/([^\s,;=]+)\s*(?:=\s*([^,;]+))?/g;let s;for(;s=a.exec(n);)e[s[1]]=s[2];return e}const lde=n=>/^[-_a-zA-Z0-9^`|~,!#$%&'*+.]+$/.test(n.trim());function sA(n,e,a,s,o){if(Je.isFunction(s))return s.call(this,e,a);if(o&&(e=a),!!Je.isString(e)){if(Je.isString(s))return e.indexOf(s)!==-1;if(Je.isRegExp(s))return s.test(e)}}function cde(n){return n.trim().toLowerCase().replace(/([a-z\d])(\w*)/g,(e,a,s)=>a.toUpperCase()+s)}function dde(n,e){const a=Je.toCamelCase(" "+e);["get","set","has"].forEach(s=>{Object.defineProperty(n,s+a,{value:function(o,r,i){return this[s].call(this,e,o,r,i)},configurable:!0})})}let u9=class{constructor(e){e&&this.set(e)}set(e,a,s){const o=this;function r(u,h,m){const p=fd(h);if(!p)throw new Error("header name must be a non-empty string");const b=Je.findKey(o,p);(!b||o[b]===void 0||m===!0||m===void 0&&o[b]!==!1)&&(o[b||h]=tL(u))}const i=(u,h)=>Je.forEach(u,(m,p)=>r(m,p,h));return Je.isPlainObject(e)||e instanceof this.constructor?i(e,a):Je.isString(e)&&(e=e.trim())&&!lde(e)?i(rde(e),a):e!=null&&r(a,e,s),this}get(e,a){if(e=fd(e),e){const s=Je.findKey(this,e);if(s){const o=this[s];if(!a)return o;if(a===!0)return ide(o);if(Je.isFunction(a))return a.call(this,o,s);if(Je.isRegExp(a))return a.exec(o);throw new TypeError("parser must be boolean|regexp|function")}}}has(e,a){if(e=fd(e),e){const s=Je.findKey(this,e);return!!(s&&this[s]!==void 0&&(!a||sA(this,this[s],s,a)))}return!1}delete(e,a){const s=this;let o=!1;function r(i){if(i=fd(i),i){const u=Je.findKey(s,i);u&&(!a||sA(s,s[u],u,a))&&(delete s[u],o=!0)}}return Je.isArray(e)?e.forEach(r):r(e),o}clear(e){const a=Object.keys(this);let s=a.length,o=!1;for(;s--;){const r=a[s];(!e||sA(this,this[r],r,e,!0))&&(delete this[r],o=!0)}return o}normalize(e){const a=this,s={};return Je.forEach(this,(o,r)=>{const i=Je.findKey(s,r);if(i){a[i]=tL(o),delete a[r];return}const u=e?cde(r):String(r).trim();u!==r&&delete a[r],a[u]=tL(o),s[u]=!0}),this}concat(...e){return this.constructor.concat(this,...e)}toJSON(e){const a=Object.create(null);return Je.forEach(this,(s,o)=>{s!=null&&s!==!1&&(a[o]=e&&Je.isArray(s)?s.join(", "):s)}),a}[Symbol.iterator](){return Object.entries(this.toJSON())[Symbol.iterator]()}toString(){return Object.entries(this.toJSON()).map(([e,a])=>e+": "+a).join(`
+`)}get[Symbol.toStringTag](){return"AxiosHeaders"}static from(e){return e instanceof this?e:new this(e)}static concat(e,...a){const s=new this(e);return a.forEach(o=>s.set(o)),s}static accessor(e){const s=(this[IU]=this[IU]={accessors:{}}).accessors,o=this.prototype;function r(i){const u=fd(i);s[u]||(dde(o,i),s[u]=!0)}return Je.isArray(e)?e.forEach(r):r(e),this}};u9.accessor(["Content-Type","Content-Length","Accept","Accept-Encoding","User-Agent","Authorization"]);Je.reduceDescriptors(u9.prototype,({value:n},e)=>{let a=e[0].toUpperCase()+e.slice(1);return{get:()=>n,set(s){this[a]=s}}});Je.freezeMethods(u9);const ar=u9;function oA(n,e){const a=this||tP,s=e||a,o=ar.from(s.headers);let r=s.data;return Je.forEach(n,function(u){r=u.call(a,r,o.normalize(),e?e.status:void 0)}),o.normalize(),r}function tz(n){return!!(n&&n.__CANCEL__)}function mu(n,e,a){va.call(this,n??"canceled",va.ERR_CANCELED,e,a),this.name="CanceledError"}Je.inherits(mu,va,{__CANCEL__:!0});function ude(n,e,a){const s=a.config.validateStatus;!a.status||!s||s(a.status)?n(a):e(new va("Request failed with status code "+a.status,[va.ERR_BAD_REQUEST,va.ERR_BAD_RESPONSE][Math.floor(a.status/100)-4],a.config,a.request,a))}const pde=Mo.hasStandardBrowserEnv?{write(n,e,a,s,o,r){const i=[n+"="+encodeURIComponent(e)];Je.isNumber(a)&&i.push("expires="+new Date(a).toGMTString()),Je.isString(s)&&i.push("path="+s),Je.isString(o)&&i.push("domain="+o),r===!0&&i.push("secure"),document.cookie=i.join("; ")},read(n){const e=document.cookie.match(new RegExp("(^|;\\s*)("+n+")=([^;]*)"));return e?decodeURIComponent(e[3]):null},remove(n){this.write(n,"",Date.now()-864e5)}}:{write(){},read(){return null},remove(){}};function hde(n){return/^([a-z][a-z\d+\-.]*:)?\/\//i.test(n)}function fde(n,e){return e?n.replace(/\/?\/$/,"")+"/"+e.replace(/^\/+/,""):n}function az(n,e){return n&&!hde(e)?fde(n,e):e}const mde=Mo.hasStandardBrowserEnv?function(){const e=/(msie|trident)/i.test(navigator.userAgent),a=document.createElement("a");let s;function o(r){let i=r;return e&&(a.setAttribute("href",i),i=a.href),a.setAttribute("href",i),{href:a.href,protocol:a.protocol?a.protocol.replace(/:$/,""):"",host:a.host,search:a.search?a.search.replace(/^\?/,""):"",hash:a.hash?a.hash.replace(/^#/,""):"",hostname:a.hostname,port:a.port,pathname:a.pathname.charAt(0)==="/"?a.pathname:"/"+a.pathname}}return s=o(window.location.href),function(i){const u=Je.isString(i)?o(i):i;return u.protocol===s.protocol&&u.host===s.host}}():function(){return function(){return!0}}();function vde(n){const e=/^([-+\w]{1,25})(:?\/\/|:)/.exec(n);return e&&e[1]||""}function yde(n,e){n=n||10;const a=new Array(n),s=new Array(n);let o=0,r=0,i;return e=e!==void 0?e:1e3,function(h){const m=Date.now(),p=s[r];i||(i=m),a[o]=h,s[o]=m;let b=r,x=0;for(;b!==o;)x+=a[b++],b=b%n;if(o=(o+1)%n,o===r&&(r=(r+1)%n),m-i<e)return;const w=p&&m-p;return w?Math.round(x*1e3/w):void 0}}function LU(n,e){let a=0;const s=yde(50,250);return o=>{const r=o.loaded,i=o.lengthComputable?o.total:void 0,u=r-a,h=s(u),m=r<=i;a=r;const p={loaded:r,total:i,progress:i?r/i:void 0,bytes:u,rate:h||void 0,estimated:h&&i&&m?(i-r)/h:void 0,event:o};p[e?"download":"upload"]=!0,n(p)}}const _de=typeof XMLHttpRequest<"u",gde=_de&&function(n){return new Promise(function(a,s){let o=n.data;const r=ar.from(n.headers).normalize();let{responseType:i,withXSRFToken:u}=n,h;function m(){n.cancelToken&&n.cancelToken.unsubscribe(h),n.signal&&n.signal.removeEventListener("abort",h)}let p;if(Je.isFormData(o)){if(Mo.hasStandardBrowserEnv||Mo.hasStandardBrowserWebWorkerEnv)r.setContentType(!1);else if((p=r.getContentType())!==!1){const[D,...V]=p?p.split(";").map(R=>R.trim()).filter(Boolean):[];r.setContentType([D||"multipart/form-data",...V].join("; "))}}let b=new XMLHttpRequest;if(n.auth){const D=n.auth.username||"",V=n.auth.password?unescape(encodeURIComponent(n.auth.password)):"";r.set("Authorization","Basic "+btoa(D+":"+V))}const x=az(n.baseURL,n.url);b.open(n.method.toUpperCase(),YN(x,n.params,n.paramsSerializer),!0),b.timeout=n.timeout;function w(){if(!b)return;const D=ar.from("getAllResponseHeaders"in b&&b.getAllResponseHeaders()),R={data:!i||i==="text"||i==="json"?b.responseText:b.response,status:b.status,statusText:b.statusText,headers:D,config:n,request:b};ude(function(P){a(P),m()},function(P){s(P),m()},R),b=null}if("onloadend"in b?b.onloadend=w:b.onreadystatechange=function(){!b||b.readyState!==4||b.status===0&&!(b.responseURL&&b.responseURL.indexOf("file:")===0)||setTimeout(w)},b.onabort=function(){b&&(s(new va("Request aborted",va.ECONNABORTED,n,b)),b=null)},b.onerror=function(){s(new va("Network Error",va.ERR_NETWORK,n,b)),b=null},b.ontimeout=function(){let V=n.timeout?"timeout of "+n.timeout+"ms exceeded":"timeout exceeded";const R=n.transitional||QN;n.timeoutErrorMessage&&(V=n.timeoutErrorMessage),s(new va(V,R.clarifyTimeoutError?va.ETIMEDOUT:va.ECONNABORTED,n,b)),b=null},Mo.hasStandardBrowserEnv&&(u&&Je.isFunction(u)&&(u=u(n)),u||u!==!1&&mde(x))){const D=n.xsrfHeaderName&&n.xsrfCookieName&&pde.read(n.xsrfCookieName);D&&r.set(n.xsrfHeaderName,D)}o===void 0&&r.setContentType(null),"setRequestHeader"in b&&Je.forEach(r.toJSON(),function(V,R){b.setRequestHeader(R,V)}),Je.isUndefined(n.withCredentials)||(b.withCredentials=!!n.withCredentials),i&&i!=="json"&&(b.responseType=n.responseType),typeof n.onDownloadProgress=="function"&&b.addEventListener("progress",LU(n.onDownloadProgress,!0)),typeof n.onUploadProgress=="function"&&b.upload&&b.upload.addEventListener("progress",LU(n.onUploadProgress)),(n.cancelToken||n.signal)&&(h=D=>{b&&(s(!D||D.type?new mu(null,n,b):D),b.abort(),b=null)},n.cancelToken&&n.cancelToken.subscribe(h),n.signal&&(n.signal.aborted?h():n.signal.addEventListener("abort",h)));const $=vde(x);if($&&Mo.protocols.indexOf($)===-1){s(new va("Unsupported protocol "+$+":",va.ERR_BAD_REQUEST,n));return}b.send(o||null)})},wE={http:Bce,xhr:gde};Je.forEach(wE,(n,e)=>{if(n){try{Object.defineProperty(n,"name",{value:e})}catch{}Object.defineProperty(n,"adapterName",{value:e})}});const $U=n=>`- ${n}`,kde=n=>Je.isFunction(n)||n===null||n===!1,nz={getAdapter:n=>{n=Je.isArray(n)?n:[n];const{length:e}=n;let a,s;const o={};for(let r=0;r<e;r++){a=n[r];let i;if(s=a,!kde(a)&&(s=wE[(i=String(a)).toLowerCase()],s===void 0))throw new va(`Unknown adapter '${i}'`);if(s)break;o[i||"#"+r]=s}if(!s){const r=Object.entries(o).map(([u,h])=>`adapter ${u} `+(h===!1?"is not supported by the environment":"is not available in the build"));let i=e?r.length>1?`since :
+`+r.map($U).join(`
+`):" "+$U(r[0]):"as no adapter specified";throw new va("There is no suitable adapter to dispatch the request "+i,"ERR_NOT_SUPPORT")}return s},adapters:wE};function rA(n){if(n.cancelToken&&n.cancelToken.throwIfRequested(),n.signal&&n.signal.aborted)throw new mu(null,n)}function AU(n){return rA(n),n.headers=ar.from(n.headers),n.data=oA.call(n,n.transformRequest),["post","put","patch"].indexOf(n.method)!==-1&&n.headers.setContentType("application/x-www-form-urlencoded",!1),nz.getAdapter(n.adapter||tP.adapter)(n).then(function(s){return rA(n),s.data=oA.call(n,n.transformResponse,s),s.headers=ar.from(s.headers),s},function(s){return tz(s)||(rA(n),s&&s.response&&(s.response.data=oA.call(n,n.transformResponse,s.response),s.response.headers=ar.from(s.response.headers))),Promise.reject(s)})}const EU=n=>n instanceof ar?{...n}:n;function Ac(n,e){e=e||{};const a={};function s(m,p,b){return Je.isPlainObject(m)&&Je.isPlainObject(p)?Je.merge.call({caseless:b},m,p):Je.isPlainObject(p)?Je.merge({},p):Je.isArray(p)?p.slice():p}function o(m,p,b){if(Je.isUndefined(p)){if(!Je.isUndefined(m))return s(void 0,m,b)}else return s(m,p,b)}function r(m,p){if(!Je.isUndefined(p))return s(void 0,p)}function i(m,p){if(Je.isUndefined(p)){if(!Je.isUndefined(m))return s(void 0,m)}else return s(void 0,p)}function u(m,p,b){if(b in e)return s(m,p);if(b in n)return s(void 0,m)}const h={url:r,method:r,data:r,baseURL:i,transformRequest:i,transformResponse:i,paramsSerializer:i,timeout:i,timeoutMessage:i,withCredentials:i,withXSRFToken:i,adapter:i,responseType:i,xsrfCookieName:i,xsrfHeaderName:i,onUploadProgress:i,onDownloadProgress:i,decompress:i,maxContentLength:i,maxBodyLength:i,beforeRedirect:i,transport:i,httpAgent:i,httpsAgent:i,cancelToken:i,socketPath:i,responseEncoding:i,validateStatus:u,headers:(m,p)=>o(EU(m),EU(p),!0)};return Je.forEach(Object.keys(Object.assign({},n,e)),function(p){const b=h[p]||o,x=b(n[p],e[p],p);Je.isUndefined(x)&&b!==u||(a[p]=x)}),a}const sz="1.6.8",aP={};["object","boolean","number","function","string","symbol"].forEach((n,e)=>{aP[n]=function(s){return typeof s===n||"a"+(e<1?"n ":" ")+n}});const TU={};aP.transitional=function(e,a,s){function o(r,i){return"[Axios v"+sz+"] Transitional option '"+r+"'"+i+(s?". "+s:"")}return(r,i,u)=>{if(e===!1)throw new va(o(i," has been removed"+(a?" in "+a:"")),va.ERR_DEPRECATED);return a&&!TU[i]&&(TU[i]=!0,console.warn(o(i," has been deprecated since v"+a+" and will be removed in the near future"))),e?e(r,i,u):!0}};function bde(n,e,a){if(typeof n!="object")throw new va("options must be an object",va.ERR_BAD_OPTION_VALUE);const s=Object.keys(n);let o=s.length;for(;o-- >0;){const r=s[o],i=e[r];if(i){const u=n[r],h=u===void 0||i(u,r,n);if(h!==!0)throw new va("option "+r+" must be "+h,va.ERR_BAD_OPTION_VALUE);continue}if(a!==!0)throw new va("Unknown option "+r,va.ERR_BAD_OPTION)}}const xE={assertOptions:bde,validators:aP},Lr=xE.validators;let bL=class{constructor(e){this.defaults=e,this.interceptors={request:new SU,response:new SU}}async request(e,a){try{return await this._request(e,a)}catch(s){if(s instanceof Error){let o;Error.captureStackTrace?Error.captureStackTrace(o={}):o=new Error;const r=o.stack?o.stack.replace(/^.+\n/,""):"";s.stack?r&&!String(s.stack).endsWith(r.replace(/^.+\n.+\n/,""))&&(s.stack+=`
+`+r):s.stack=r}throw s}}_request(e,a){typeof e=="string"?(a=a||{},a.url=e):a=e||{},a=Ac(this.defaults,a);const{transitional:s,paramsSerializer:o,headers:r}=a;s!==void 0&&xE.assertOptions(s,{silentJSONParsing:Lr.transitional(Lr.boolean),forcedJSONParsing:Lr.transitional(Lr.boolean),clarifyTimeoutError:Lr.transitional(Lr.boolean)},!1),o!=null&&(Je.isFunction(o)?a.paramsSerializer={serialize:o}:xE.assertOptions(o,{encode:Lr.function,serialize:Lr.function},!0)),a.method=(a.method||this.defaults.method||"get").toLowerCase();let i=r&&Je.merge(r.common,r[a.method]);r&&Je.forEach(["delete","get","head","post","put","patch","common"],$=>{delete r[$]}),a.headers=ar.concat(i,r);const u=[];let h=!0;this.interceptors.request.forEach(function(D){typeof D.runWhen=="function"&&D.runWhen(a)===!1||(h=h&&D.synchronous,u.unshift(D.fulfilled,D.rejected))});const m=[];this.interceptors.response.forEach(function(D){m.push(D.fulfilled,D.rejected)});let p,b=0,x;if(!h){const $=[AU.bind(this),void 0];for($.unshift.apply($,u),$.push.apply($,m),x=$.length,p=Promise.resolve(a);b<x;)p=p.then($[b++],$[b++]);return p}x=u.length;let w=a;for(b=0;b<x;){const $=u[b++],D=u[b++];try{w=$(w)}catch(V){D.call(this,V);break}}try{p=AU.call(this,w)}catch($){return Promise.reject($)}for(b=0,x=m.length;b<x;)p=p.then(m[b++],m[b++]);return p}getUri(e){e=Ac(this.defaults,e);const a=az(e.baseURL,e.url);return YN(a,e.params,e.paramsSerializer)}};Je.forEach(["delete","get","head","options"],function(e){bL.prototype[e]=function(a,s){return this.request(Ac(s||{},{method:e,url:a,data:(s||{}).data}))}});Je.forEach(["post","put","patch"],function(e){function a(s){return function(r,i,u){return this.request(Ac(u||{},{method:e,headers:s?{"Content-Type":"multipart/form-data"}:{},url:r,data:i}))}}bL.prototype[e]=a(),bL.prototype[e+"Form"]=a(!0)});const aL=bL;let wde=class oz{constructor(e){if(typeof e!="function")throw new TypeError("executor must be a function.");let a;this.promise=new Promise(function(r){a=r});const s=this;this.promise.then(o=>{if(!s._listeners)return;let r=s._listeners.length;for(;r-- >0;)s._listeners[r](o);s._listeners=null}),this.promise.then=o=>{let r;const i=new Promise(u=>{s.subscribe(u),r=u}).then(o);return i.cancel=function(){s.unsubscribe(r)},i},e(function(r,i,u){s.reason||(s.reason=new mu(r,i,u),a(s.reason))})}throwIfRequested(){if(this.reason)throw this.reason}subscribe(e){if(this.reason){e(this.reason);return}this._listeners?this._listeners.push(e):this._listeners=[e]}unsubscribe(e){if(!this._listeners)return;const a=this._listeners.indexOf(e);a!==-1&&this._listeners.splice(a,1)}static source(){let e;return{token:new oz(function(o){e=o}),cancel:e}}};const xde=wde;function Mde(n){return function(a){return n.apply(null,a)}}function Cde(n){return Je.isObject(n)&&n.isAxiosError===!0}const ME={Continue:100,SwitchingProtocols:101,Processing:102,EarlyHints:103,Ok:200,Created:201,Accepted:202,NonAuthoritativeInformation:203,NoContent:204,ResetContent:205,PartialContent:206,MultiStatus:207,AlreadyReported:208,ImUsed:226,MultipleChoices:300,MovedPermanently:301,Found:302,SeeOther:303,NotModified:304,UseProxy:305,Unused:306,TemporaryRedirect:307,PermanentRedirect:308,BadRequest:400,Unauthorized:401,PaymentRequired:402,Forbidden:403,NotFound:404,MethodNotAllowed:405,NotAcceptable:406,ProxyAuthenticationRequired:407,RequestTimeout:408,Conflict:409,Gone:410,LengthRequired:411,PreconditionFailed:412,PayloadTooLarge:413,UriTooLong:414,UnsupportedMediaType:415,RangeNotSatisfiable:416,ExpectationFailed:417,ImATeapot:418,MisdirectedRequest:421,UnprocessableEntity:422,Locked:423,FailedDependency:424,TooEarly:425,UpgradeRequired:426,PreconditionRequired:428,TooManyRequests:429,RequestHeaderFieldsTooLarge:431,UnavailableForLegalReasons:451,InternalServerError:500,NotImplemented:501,BadGateway:502,ServiceUnavailable:503,GatewayTimeout:504,HttpVersionNotSupported:505,VariantAlsoNegotiates:506,InsufficientStorage:507,LoopDetected:508,NotExtended:510,NetworkAuthenticationRequired:511};Object.entries(ME).forEach(([n,e])=>{ME[e]=n});const Sde=ME;function rz(n){const e=new aL(n),a=FN(aL.prototype.request,e);return Je.extend(a,aL.prototype,e,{allOwnKeys:!0}),Je.extend(a,e,null,{allOwnKeys:!0}),a.create=function(o){return rz(Ac(n,o))},a}const _n=rz(tP);_n.Axios=aL;_n.CanceledError=mu;_n.CancelToken=xde;_n.isCancel=tz;_n.VERSION=sz;_n.toFormData=d9;_n.AxiosError=va;_n.Cancel=_n.CanceledError;_n.all=function(e){return Promise.all(e)};_n.spread=Mde;_n.isAxiosError=Cde;_n.mergeConfig=Ac;_n.AxiosHeaders=ar;_n.formToJSON=n=>ez(Je.isHTMLForm(n)?new FormData(n):n);_n.getAdapter=nz.getAdapter;_n.HttpStatusCode=Sde;_n.default=_n;const vu=_n,{Axios:Xot,AxiosError:Yot,CanceledError:Qot,isCancel:Ide,CancelToken:Jot,VERSION:ert,all:trt,Cancel:art,isAxiosError:ot,spread:nrt,toFormData:srt,AxiosHeaders:ort,HttpStatusCode:rrt,formToJSON:irt,getAdapter:lrt,mergeConfig:crt}=vu,Qo=()=>typeof window<"u"&&window.APP_CONFIG&&window.APP_CONFIG.VITE_BACKEND_URL?window.APP_CONFIG.VITE_BACKEND_URL:"http://localhost:8000",nt=vu.create({baseURL:Qo(),headers:{"X-Requested-With":"XMLHttpRequest",Accept:"application/json","X-LogRequestResponse":"false","X-Sanitizer-Mode":""}});nt.defaults.withCredentials=!0;nt.defaults.withXSRFToken=!0;nt.interceptors.request.use(function(n){return n.headers["X-Localization"]=localStorage.getItem("DCSLAB_LANG")==null?document.documentElement.lang:localStorage.getItem("DCSLAB_LANG"),n.headers["X-Timezone"]=Intl.DateTimeFormat().resolvedOptions().timeZone,n});nt.interceptors.response.use(n=>n,n=>{if(n.response==null||n.response.status==null)return Promise.reject(n);switch(n.response.status){case 401:window.location.replace("/auth/login");break}return Promise.reject(n)});const nP=vu.create({baseURL:Qo(),headers:{"X-Requested-With":"XMLHttpRequest",Accept:"application/json"}});nP.defaults.withCredentials=!0;nP.interceptors.request.use(function(n){return n.headers["X-Timezone"]=Intl.DateTimeFormat().resolvedOptions().timeZone,n});vu.create();const Lde=()=>{const n=new URL(Qo());return n?n.hostname:"localhost"},$de=()=>{const n=new URL(Qo());return n?Number(n.port):8e3},ha=Qr("ziggyRoute",{state:()=>({ziggyRoute:{url:Lde(),port:$de(),defaults:{},routes:{"api.get.db.module.profile.read":{uri:"api/get/dashboard/module/profile/read",methods:["GET","HEAD"]},"api.get.db.core.user.menu":{uri:"api/get/dashboard/core/user/menu",methods:["GET","HEAD"]},"api.get.db.core.user.api":{uri:"api/get/dashboard/core/user/api",methods:["GET","HEAD"]}}}}),getters:{getZiggy(n){const e=sessionStorage.getItem("ziggyRoute");if(e){const a=JSON.parse(e);this.ziggyRoute=a}return n.ziggyRoute}},actions:{setZiggy(n){n!=null&&(sessionStorage.setItem("ziggyRoute",JSON.stringify(n)),this.ziggyRoute=n)}}});var Ade=String.prototype.replace,Ede=/%20/g,iA={RFC1738:"RFC1738",RFC3986:"RFC3986"},sP={default:iA.RFC3986,formatters:{RFC1738:function(n){return Ade.call(n,Ede,"+")},RFC3986:function(n){return String(n)}},RFC1738:iA.RFC1738,RFC3986:iA.RFC3986},Tde=sP,lA=Object.prototype.hasOwnProperty,Il=Array.isArray,vo=function(){for(var n=[],e=0;e<256;++e)n.push("%"+((e<16?"0":"")+e.toString(16)).toUpperCase());return n}(),Pde=function(e){for(;e.length>1;){var a=e.pop(),s=a.obj[a.prop];if(Il(s)){for(var o=[],r=0;r<s.length;++r)typeof s[r]<"u"&&o.push(s[r]);a.obj[a.prop]=o}}},iz=function(e,a){for(var s=a&&a.plainObjects?Object.create(null):{},o=0;o<e.length;++o)typeof e[o]<"u"&&(s[o]=e[o]);return s},Dde=function n(e,a,s){if(!a)return e;if(typeof a!="object"){if(Il(e))e.push(a);else if(e&&typeof e=="object")(s&&(s.plainObjects||s.allowPrototypes)||!lA.call(Object.prototype,a))&&(e[a]=!0);else return[e,a];return e}if(!e||typeof e!="object")return[e].concat(a);var o=e;return Il(e)&&!Il(a)&&(o=iz(e,s)),Il(e)&&Il(a)?(a.forEach(function(r,i){if(lA.call(e,i)){var u=e[i];u&&typeof u=="object"&&r&&typeof r=="object"?e[i]=n(u,r,s):e.push(r)}else e[i]=r}),e):Object.keys(a).reduce(function(r,i){var u=a[i];return lA.call(r,i)?r[i]=n(r[i],u,s):r[i]=u,r},o)},Rde=function(e,a){return Object.keys(a).reduce(function(s,o){return s[o]=a[o],s},e)},Ode=function(n,e,a){var s=n.replace(/\+/g," ");if(a==="iso-8859-1")return s.replace(/%[0-9a-f]{2}/gi,unescape);try{return decodeURIComponent(s)}catch{return s}},Vde=function(e,a,s,o,r){if(e.length===0)return e;var i=e;if(typeof e=="symbol"?i=Symbol.prototype.toString.call(e):typeof e!="string"&&(i=String(e)),s==="iso-8859-1")return escape(i).replace(/%u[0-9a-f]{4}/gi,function(p){return"%26%23"+parseInt(p.slice(2),16)+"%3B"});for(var u="",h=0;h<i.length;++h){var m=i.charCodeAt(h);if(m===45||m===46||m===95||m===126||m>=48&&m<=57||m>=65&&m<=90||m>=97&&m<=122||r===Tde.RFC1738&&(m===40||m===41)){u+=i.charAt(h);continue}if(m<128){u=u+vo[m];continue}if(m<2048){u=u+(vo[192|m>>6]+vo[128|m&63]);continue}if(m<55296||m>=57344){u=u+(vo[224|m>>12]+vo[128|m>>6&63]+vo[128|m&63]);continue}h+=1,m=65536+((m&1023)<<10|i.charCodeAt(h)&1023),u+=vo[240|m>>18]+vo[128|m>>12&63]+vo[128|m>>6&63]+vo[128|m&63]}return u},Ude=function(e){for(var a=[{obj:{o:e},prop:"o"}],s=[],o=0;o<a.length;++o)for(var r=a[o],i=r.obj[r.prop],u=Object.keys(i),h=0;h<u.length;++h){var m=u[h],p=i[m];typeof p=="object"&&p!==null&&s.indexOf(p)===-1&&(a.push({obj:i,prop:m}),s.push(p))}return Pde(a),e},Fde=function(e){return Object.prototype.toString.call(e)==="[object RegExp]"},jde=function(e){return!e||typeof e!="object"?!1:!!(e.constructor&&e.constructor.isBuffer&&e.constructor.isBuffer(e))},Hde=function(e,a){return[].concat(e,a)},Nde=function(e,a){if(Il(e)){for(var s=[],o=0;o<e.length;o+=1)s.push(a(e[o]));return s}return a(e)},lz={arrayToObject:iz,assign:Rde,combine:Hde,compact:Ude,decode:Ode,encode:Vde,isBuffer:jde,isRegExp:Fde,maybeMap:Nde,merge:Dde},CE=lz,Ed=sP,zde=Object.prototype.hasOwnProperty,PU={brackets:function(e){return e+"[]"},comma:"comma",indices:function(e,a){return e+"["+a+"]"},repeat:function(e){return e}},El=Array.isArray,Bde=String.prototype.split,qde=Array.prototype.push,cz=function(n,e){qde.apply(n,El(e)?e:[e])},Wde=Date.prototype.toISOString,DU=Ed.default,On={addQueryPrefix:!1,allowDots:!1,charset:"utf-8",charsetSentinel:!1,delimiter:"&",encode:!0,encoder:CE.encode,encodeValuesOnly:!1,format:DU,formatter:Ed.formatters[DU],indices:!1,serializeDate:function(e){return Wde.call(e)},skipNulls:!1,strictNullHandling:!1},Gde=function(e){return typeof e=="string"||typeof e=="number"||typeof e=="boolean"||typeof e=="symbol"||typeof e=="bigint"},Zde=function n(e,a,s,o,r,i,u,h,m,p,b,x,w,$){var D=e;if(typeof u=="function"?D=u(a,D):D instanceof Date?D=p(D):s==="comma"&&El(D)&&(D=CE.maybeMap(D,function(B){return B instanceof Date?p(B):B})),D===null){if(o)return i&&!w?i(a,On.encoder,$,"key",b):a;D=""}if(Gde(D)||CE.isBuffer(D)){if(i){var V=w?a:i(a,On.encoder,$,"key",b);if(s==="comma"&&w){for(var R=Bde.call(String(D),","),E="",P=0;P<R.length;++P)E+=(P===0?"":",")+x(i(R[P],On.encoder,$,"value",b));return[x(V)+"="+E]}return[x(V)+"="+x(i(D,On.encoder,$,"value",b))]}return[x(a)+"="+x(String(D))]}var S=[];if(typeof D>"u")return S;var C;if(s==="comma"&&El(D))C=[{value:D.length>0?D.join(",")||null:void 0}];else if(El(u))C=u;else{var M=Object.keys(D);C=h?M.sort(h):M}for(var g=0;g<C.length;++g){var v=C[g],T=typeof v=="object"&&typeof v.value<"u"?v.value:D[v];if(!(r&&T===null)){var j=El(D)?typeof s=="function"?s(a,v):a:a+(m?"."+v:"["+v+"]");cz(S,n(T,j,s,o,r,i,u,h,m,p,b,x,w,$))}}return S},Kde=function(e){if(!e)return On;if(e.encoder!==null&&typeof e.encoder<"u"&&typeof e.encoder!="function")throw new TypeError("Encoder has to be a function.");var a=e.charset||On.charset;if(typeof e.charset<"u"&&e.charset!=="utf-8"&&e.charset!=="iso-8859-1")throw new TypeError("The charset option must be either utf-8, iso-8859-1, or undefined");var s=Ed.default;if(typeof e.format<"u"){if(!zde.call(Ed.formatters,e.format))throw new TypeError("Unknown format option provided.");s=e.format}var o=Ed.formatters[s],r=On.filter;return(typeof e.filter=="function"||El(e.filter))&&(r=e.filter),{addQueryPrefix:typeof e.addQueryPrefix=="boolean"?e.addQueryPrefix:On.addQueryPrefix,allowDots:typeof e.allowDots>"u"?On.allowDots:!!e.allowDots,charset:a,charsetSentinel:typeof e.charsetSentinel=="boolean"?e.charsetSentinel:On.charsetSentinel,delimiter:typeof e.delimiter>"u"?On.delimiter:e.delimiter,encode:typeof e.encode=="boolean"?e.encode:On.encode,encoder:typeof e.encoder=="function"?e.encoder:On.encoder,encodeValuesOnly:typeof e.encodeValuesOnly=="boolean"?e.encodeValuesOnly:On.encodeValuesOnly,filter:r,format:s,formatter:o,serializeDate:typeof e.serializeDate=="function"?e.serializeDate:On.serializeDate,skipNulls:typeof e.skipNulls=="boolean"?e.skipNulls:On.skipNulls,sort:typeof e.sort=="function"?e.sort:null,strictNullHandling:typeof e.strictNullHandling=="boolean"?e.strictNullHandling:On.strictNullHandling}},Xde=function(n,e){var a=n,s=Kde(e),o,r;typeof s.filter=="function"?(r=s.filter,a=r("",a)):El(s.filter)&&(r=s.filter,o=r);var i=[];if(typeof a!="object"||a===null)return"";var u;e&&e.arrayFormat in PU?u=e.arrayFormat:e&&"indices"in e?u=e.indices?"indices":"repeat":u="indices";var h=PU[u];o||(o=Object.keys(a)),s.sort&&o.sort(s.sort);for(var m=0;m<o.length;++m){var p=o[m];s.skipNulls&&a[p]===null||cz(i,Zde(a[p],p,h,s.strictNullHandling,s.skipNulls,s.encode?s.encoder:null,s.filter,s.sort,s.allowDots,s.serializeDate,s.format,s.formatter,s.encodeValuesOnly,s.charset))}var b=i.join(s.delimiter),x=s.addQueryPrefix===!0?"?":"";return s.charsetSentinel&&(s.charset==="iso-8859-1"?x+="utf8=%26%2310003%3B&":x+="utf8=%E2%9C%93&"),b.length>0?x+b:""},Ec=lz,SE=Object.prototype.hasOwnProperty,Yde=Array.isArray,Rn={allowDots:!1,allowPrototypes:!1,arrayLimit:20,charset:"utf-8",charsetSentinel:!1,comma:!1,decoder:Ec.decode,delimiter:"&",depth:5,ignoreQueryPrefix:!1,interpretNumericEntities:!1,parameterLimit:1e3,parseArrays:!0,plainObjects:!1,strictNullHandling:!1},Qde=function(n){return n.replace(/&#(\d+);/g,function(e,a){return String.fromCharCode(parseInt(a,10))})},dz=function(n,e){return n&&typeof n=="string"&&e.comma&&n.indexOf(",")>-1?n.split(","):n},Jde="utf8=%26%2310003%3B",eue="utf8=%E2%9C%93",tue=function(e,a){var s={},o=a.ignoreQueryPrefix?e.replace(/^\?/,""):e,r=a.parameterLimit===1/0?void 0:a.parameterLimit,i=o.split(a.delimiter,r),u=-1,h,m=a.charset;if(a.charsetSentinel)for(h=0;h<i.length;++h)i[h].indexOf("utf8=")===0&&(i[h]===eue?m="utf-8":i[h]===Jde&&(m="iso-8859-1"),u=h,h=i.length);for(h=0;h<i.length;++h)if(h!==u){var p=i[h],b=p.indexOf("]="),x=b===-1?p.indexOf("="):b+1,w,$;x===-1?(w=a.decoder(p,Rn.decoder,m,"key"),$=a.strictNullHandling?null:""):(w=a.decoder(p.slice(0,x),Rn.decoder,m,"key"),$=Ec.maybeMap(dz(p.slice(x+1),a),function(D){return a.decoder(D,Rn.decoder,m,"value")})),$&&a.interpretNumericEntities&&m==="iso-8859-1"&&($=Qde($)),p.indexOf("[]=")>-1&&($=Yde($)?[$]:$),SE.call(s,w)?s[w]=Ec.combine(s[w],$):s[w]=$}return s},aue=function(n,e,a,s){for(var o=s?e:dz(e,a),r=n.length-1;r>=0;--r){var i,u=n[r];if(u==="[]"&&a.parseArrays)i=[].concat(o);else{i=a.plainObjects?Object.create(null):{};var h=u.charAt(0)==="["&&u.charAt(u.length-1)==="]"?u.slice(1,-1):u,m=parseInt(h,10);!a.parseArrays&&h===""?i={0:o}:!isNaN(m)&&u!==h&&String(m)===h&&m>=0&&a.parseArrays&&m<=a.arrayLimit?(i=[],i[m]=o):h!=="__proto__"&&(i[h]=o)}o=i}return o},nue=function(e,a,s,o){if(e){var r=s.allowDots?e.replace(/\.([^.[]+)/g,"[$1]"):e,i=/(\[[^[\]]*])/,u=/(\[[^[\]]*])/g,h=s.depth>0&&i.exec(r),m=h?r.slice(0,h.index):r,p=[];if(m){if(!s.plainObjects&&SE.call(Object.prototype,m)&&!s.allowPrototypes)return;p.push(m)}for(var b=0;s.depth>0&&(h=u.exec(r))!==null&&b<s.depth;){if(b+=1,!s.plainObjects&&SE.call(Object.prototype,h[1].slice(1,-1))&&!s.allowPrototypes)return;p.push(h[1])}return h&&p.push("["+r.slice(h.index)+"]"),aue(p,a,s,o)}},sue=function(e){if(!e)return Rn;if(e.decoder!==null&&e.decoder!==void 0&&typeof e.decoder!="function")throw new TypeError("Decoder has to be a function.");if(typeof e.charset<"u"&&e.charset!=="utf-8"&&e.charset!=="iso-8859-1")throw new TypeError("The charset option must be either utf-8, iso-8859-1, or undefined");var a=typeof e.charset>"u"?Rn.charset:e.charset;return{allowDots:typeof e.allowDots>"u"?Rn.allowDots:!!e.allowDots,allowPrototypes:typeof e.allowPrototypes=="boolean"?e.allowPrototypes:Rn.allowPrototypes,arrayLimit:typeof e.arrayLimit=="number"?e.arrayLimit:Rn.arrayLimit,charset:a,charsetSentinel:typeof e.charsetSentinel=="boolean"?e.charsetSentinel:Rn.charsetSentinel,comma:typeof e.comma=="boolean"?e.comma:Rn.comma,decoder:typeof e.decoder=="function"?e.decoder:Rn.decoder,delimiter:typeof e.delimiter=="string"||Ec.isRegExp(e.delimiter)?e.delimiter:Rn.delimiter,depth:typeof e.depth=="number"||e.depth===!1?+e.depth:Rn.depth,ignoreQueryPrefix:e.ignoreQueryPrefix===!0,interpretNumericEntities:typeof e.interpretNumericEntities=="boolean"?e.interpretNumericEntities:Rn.interpretNumericEntities,parameterLimit:typeof e.parameterLimit=="number"?e.parameterLimit:Rn.parameterLimit,parseArrays:e.parseArrays!==!1,plainObjects:typeof e.plainObjects=="boolean"?e.plainObjects:Rn.plainObjects,strictNullHandling:typeof e.strictNullHandling=="boolean"?e.strictNullHandling:Rn.strictNullHandling}},oue=function(n,e){var a=sue(e);if(n===""||n===null||typeof n>"u")return a.plainObjects?Object.create(null):{};for(var s=typeof n=="string"?tue(n,a):n,o=a.plainObjects?Object.create(null):{},r=Object.keys(s),i=0;i<r.length;++i){var u=r[i],h=nue(u,s[u],a,typeof n=="string");o=Ec.merge(o,h,a)}return Ec.compact(o)},rue=Xde,iue=oue,lue=sP,uz={formats:lue,parse:iue,stringify:rue};function vs(){return vs=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var a=arguments[e];for(var s in a)Object.prototype.hasOwnProperty.call(a,s)&&(n[s]=a[s])}return n},vs.apply(this,arguments)}class cA{constructor(e,a,s){var o,r;this.name=e,this.definition=a,this.bindings=(o=a.bindings)!=null?o:{},this.wheres=(r=a.wheres)!=null?r:{},this.config=s}get template(){const e=`${this.origin}/${this.definition.uri}`.replace(/\/+$/,"");return e===""?"/":e}get origin(){return this.config.absolute?this.definition.domain?`${this.config.url.match(/^\w+:\/\//)[0]}${this.definition.domain}${this.config.port?`:${this.config.port}`:""}`:this.config.url:""}get parameterSegments(){var e,a;return(e=(a=this.template.match(/{[^}?]+\??}/g))==null?void 0:a.map(s=>({name:s.replace(/{|\??}/g,""),required:!/\?}$/.test(s)})))!=null?e:[]}matchesUrl(e){if(!this.definition.methods.includes("GET"))return!1;const a=this.template.replace(/(\/?){([^}?]*)(\??)}/g,(i,u,h,m)=>{var p;const b=`(?<${h}>${((p=this.wheres[h])==null?void 0:p.replace(/(^\^)|(\$$)/g,""))||"[^/?]+"})`;return m?`(${u}${b})?`:`${u}${b}`}).replace(/^\w+:\/\//,""),[s,o]=e.replace(/^\w+:\/\//,"").split("?"),r=new RegExp(`^${a}/?$`).exec(decodeURI(s));if(r){for(const i in r.groups)r.groups[i]=typeof r.groups[i]=="string"?decodeURIComponent(r.groups[i]):r.groups[i];return{params:r.groups,query:uz.parse(o)}}return!1}compile(e){return this.parameterSegments.length?this.template.replace(/{([^}?]+)(\??)}/g,(a,s,o)=>{var r,i;if(!o&&[null,void 0].includes(e[s]))throw new Error(`Ziggy error: '${s}' parameter is required for route '${this.name}'.`);if(this.wheres[s]&&!new RegExp(`^${o?`(${this.wheres[s]})?`:this.wheres[s]}$`).test((i=e[s])!=null?i:""))throw new Error(`Ziggy error: '${s}' parameter does not match required format '${this.wheres[s]}' for route '${this.name}'.`);return encodeURI((r=e[s])!=null?r:"").replace(/%7C/g,"|").replace(/%25/g,"%").replace(/\$/g,"%24")}).replace(`${this.origin}//`,`${this.origin}/`).replace(/\/+$/,""):this.template}}class cue extends String{constructor(e,a,s=!0,o){if(super(),this.t=o??(typeof Ziggy<"u"?Ziggy:globalThis==null?void 0:globalThis.Ziggy),this.t=vs({},this.t,{absolute:s}),e){if(!this.t.routes[e])throw new Error(`Ziggy error: route '${e}' is not in the route list.`);this.i=new cA(e,this.t.routes[e],this.t),this.o=this.h(a)}}toString(){const e=Object.keys(this.o).filter(a=>!this.i.parameterSegments.some(({name:s})=>s===a)).filter(a=>a!=="_query").reduce((a,s)=>vs({},a,{[s]:this.o[s]}),{});return this.i.compile(this.o)+uz.stringify(vs({},e,this.o._query),{addQueryPrefix:!0,arrayFormat:"indices",encodeValuesOnly:!0,skipNulls:!0,encoder:(a,s)=>typeof a=="boolean"?Number(a):s(a)})}u(e){e?this.t.absolute&&e.startsWith("/")&&(e=this.l().host+e):e=this.m();let a={};const[s,o]=Object.entries(this.t.routes).find(([r,i])=>a=new cA(r,i,this.t).matchesUrl(e))||[void 0,void 0];return vs({name:s},a,{route:o})}m(){const{host:e,pathname:a,search:s}=this.l();return(this.t.absolute?e+a:a.replace(this.t.url.replace(/^\w*:\/\/[^/]+/,""),"").replace(/^\/+/,"/"))+s}current(e,a){const{name:s,params:o,query:r,route:i}=this.u();if(!e)return s;const u=new RegExp(`^${e.replace(/\./g,"\\.").replace(/\*/g,".*")}$`).test(s);if([null,void 0].includes(a)||!u)return u;const h=new cA(s,i,this.t);a=this.h(a,h);const m=vs({},o,r);if(Object.values(a).every(b=>!b)&&!Object.values(m).some(b=>b!==void 0))return!0;const p=(b,x)=>Object.entries(b).every(([w,$])=>Array.isArray($)&&Array.isArray(x[w])?$.every(D=>x[w].includes(D)):typeof $=="object"&&typeof x[w]=="object"&&$!==null&&x[w]!==null?p($,x[w]):x[w]==$);return p(a,m)}l(){var e,a,s,o,r,i;const{host:u="",pathname:h="",search:m=""}=typeof window<"u"?window.location:{};return{host:(e=(a=this.t.location)==null?void 0:a.host)!=null?e:u,pathname:(s=(o=this.t.location)==null?void 0:o.pathname)!=null?s:h,search:(r=(i=this.t.location)==null?void 0:i.search)!=null?r:m}}get params(){const{params:e,query:a}=this.u();return vs({},e,a)}has(e){return Object.keys(this.t.routes).includes(e)}h(e={},a=this.i){e!=null||(e={}),e=["string","number"].includes(typeof e)?[e]:e;const s=a.parameterSegments.filter(({name:o})=>!this.t.defaults[o]);return Array.isArray(e)?e=e.reduce((o,r,i)=>vs({},o,s[i]?{[s[i].name]:r}:typeof r=="object"?r:{[r]:""}),{}):s.length!==1||e[s[0].name]||!e.hasOwnProperty(Object.values(a.bindings)[0])&&!e.hasOwnProperty("id")||(e={[s[0].name]:e}),vs({},this.p(a),this.$(e,a))}p(e){return e.parameterSegments.filter(({name:a})=>this.t.defaults[a]).reduce((a,{name:s},o)=>vs({},a,{[s]:this.t.defaults[s]}),{})}$(e,{bindings:a,parameterSegments:s}){return Object.entries(e).reduce((o,[r,i])=>{if(!i||typeof i!="object"||Array.isArray(i)||!s.some(({name:u})=>u===r))return vs({},o,{[r]:i});if(!i.hasOwnProperty(a[r])){if(!i.hasOwnProperty("id"))throw new Error(`Ziggy error: object passed as '${r}' parameter is missing route model binding key '${a[r]}'.`);a[r]="id"}return vs({},o,{[r]:i[a[r]]})},{})}valueOf(){return this.toString()}}function je(n,e,a,s){const o=new cue(n,e,a,s);return n?o.toString():o}class Dt{constructor(){mt(this,"debugMode",!1);mt(this,"DCSLAB_SYSTEM_KEY","DCSLAB_SYSTEM");mt(this,"DCSLAB_LAST_ENTITY_KEY","DCSLAB_LAST_ENTITY");this.debugMode="true"}getCachedDDL(e){const a=sessionStorage.getItem(this.DCSLAB_SYSTEM_KEY);if(a==null)return null;const s=this.debugMode?JSON.parse(a):JSON.parse(atob(a));return Object.hasOwnProperty.call(s,e)?s[e]:null}setCachedDDL(e,a){if(a==null)return;let s=sessionStorage.getItem(this.DCSLAB_SYSTEM_KEY);s==null&&(s=JSON.stringify(new Object));const o=this.debugMode?JSON.parse(s):JSON.parse(atob(s));o[e]=a,this.debugMode?sessionStorage.setItem(this.DCSLAB_SYSTEM_KEY,JSON.stringify(o)):sessionStorage.setItem(this.DCSLAB_SYSTEM_KEY,btoa(JSON.stringify(o)))}getLastEntity(e){const a=sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);if(a==null)return null;const s=this.debugMode?JSON.parse(a):JSON.parse(atob(a));return s==null||(e=e.toUpperCase(),!Object.hasOwnProperty.call(s,e))?null:s[e]}setLastEntity(e,a){if(e=e.toUpperCase(),a==null)return;const s={};s[e]=a,this.debugMode?sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY,JSON.stringify(s)):sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY,btoa(JSON.stringify(s)))}removeLastEntity(e){const a=sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);if(a==null)return;const s=this.debugMode?JSON.parse(a):JSON.parse(atob(a));if(s==null||(e=e.toUpperCase(),!Object.hasOwnProperty.call(s,e)))return;let r={};r=ma.omit(s,[e]),this.debugMode?sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY,JSON.stringify(r)):sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY,btoa(JSON.stringify(r)))}isLastEntity(e){const a=sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);if(a==null)return!1;const s=this.debugMode?JSON.parse(a):JSON.parse(atob(a));return s==null?!1:(e=e.toUpperCase(),e in s)}}class tn{generateZiggyUrlErrorServiceResponse(e){return{success:!1,errors:{ziggy:[e||"Ziggy error: unknown"]}}}generateAxiosValidationErrorServiceResponse(e){const a={success:!1},s=e.response,o=Object.keys(s.data.errors);for(const r of o)a.errors==null&&(a.errors={}),a.errors[r]=s.data.errors[r];return a}generateAxiosErrorServiceResponse(e){const a=e.response;return{success:!1,errors:{axios:[a.data.message+" ("+a.status+":"+a.statusText+")"]}}}}class aa{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"cacheService");mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.cacheService=new Dt,this.errorHandlerService=new tn}async readUserMenu(){const e={success:!1};try{const a=je("api.get.db.core.user.menu",void 0,!1,this.ziggyRoute),s=await nt.get(a);return e.success=!0,e.data=s.data,e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}async readUserApi(){const e={success:!1};try{const a=je("api.get.db.core.user.api",void 0,!1,this.ziggyRoute),s=await nt.get(a);return e.success=!0,e.data=s.data,e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}async getStatusDDL(e=!0){const a=e?"statusDDL_with_deleted":"statusDDL_no_deleted";let s=[];try{if(this.cacheService.getCachedDDL(a)==null){const r=je("api.get.db.common.ddl.list.statuses",{show_deleted:e},!1,this.ziggyRoute),i=await nt.get(r);this.cacheService.setCachedDDL(a,i.data)}const o=this.cacheService.getCachedDDL(a);return o!=null&&(s=o),s}catch{return s}}async getCountriesDDL(){const e="countriesDDL";let a=[];try{if(this.cacheService.getCachedDDL(e)==null){const o=je("api.get.db.common.ddl.list.countries",void 0,!1,this.ziggyRoute),r=await nt.get(o);this.cacheService.setCachedDDL(e,r.data)}const s=this.cacheService.getCachedDDL(e);return s!=null&&(a=s),a}catch{return a}}async getPaymentTermTypesDDL(){const e="paymentTermTypesDDL";let a=[];try{if(this.cacheService.getCachedDDL(e)==null){const o=je("api.get.db.common.ddl.list.payment_term_types",void 0,!1,this.ziggyRoute),r=await nt.get(o);this.cacheService.setCachedDDL(e,r.data)}const s=this.cacheService.getCachedDDL(e);return s!=null&&(a=s),a}catch{return a}}async getRoundingTypesDDL(){const e="roundingTypesDDL";let a=[];try{if(this.cacheService.getCachedDDL(e)==null){const o=je("api.get.db.common.ddl.list.rounding_types",void 0,!1,this.ziggyRoute),r=await nt.get(o);this.cacheService.setCachedDDL(e,r.data)}const s=this.cacheService.getCachedDDL(e);return s!=null&&(a=s),a}catch{return a}}async uploadFile(e){const a={success:!1};try{const s=new FormData;s.append("file",e);const o=je("api.post.db.core.user.upload",void 0,!1,this.ziggyRoute);nt.defaults.headers.common["Content-Type"]="multipart/form-data";const r=await nt.post(o,s);return a.success=!0,a.data=r.data.data,a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const due="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAAC/CAMAAAA1kLK0AAAAVFBMVEX////MzMyZmZn39/fHx8fExMTJycmRkZGOjo7Pz8/n5+fT09Pq6url5eX8/PyUlJTw8PDa2tqJiYm+vr7X19eurq6oqKjf39+FhYW4uLienp5+fn553DI2AAAJJElEQVR4nO2d14KrOAyGQ+i9hEySnfd/z6XIxrgQmMgEdvVfnZNMDHzIklwQl8oldaou7oXUySUQowgEiECACASIQIAIBIhAgAgEiECACASIQIAIBIhAgAgEiECACASIQIAIBIhAgAgEiECACASIQIAIBIhAgAgEiECACASIQIC+DaIo2Lp8UXz1RL4GonCrvG5TJ+By0rbOK/dLPL4CoqgerRN4/cXP1H3gBU77qL4AY38Qbt4GnichmOHovm3z3U9rXxBFki5CEGCkya52sSuIqvW89xCYPK+t9ju3HUEkjr/CFmZ24TvJXme3G4jcYAy9g+ykOE5uFvk+57cTiETF0F9/EKf1I0865Y86jYePVBS7WMUuICrHUyDEdaJGyaJK6liB4Tk7+IodQLitJ1Fw6mzhqG5WOxILr7V/ltZBJLPe31FYkS91GdecRRDY7h+2QRSpN8OQZiuzgyJLZyi81G5aYRlEJZpDENSbDubW3uzXVj2FXRC5L1rDNgy95ih8m5HUKohW4OD/zd+58zawz1A4kD0QRTzdTe/vdl0Fk5cJYmuOwh4IV3APnxm10MGCwNrp2gLhTvfRiz88hhsLjdk6X0sgqunU/cfnzT0mo/DsBA9LIER7yDAazGzbhB0QAgcHqX3B5VghYQVEESDbw9DoFIQCC7HDCohUzILQSFw4iSBFa5PLBoh6NtpEJMEBezVam0wWQCS+49gm4aMPRvFBVBIHO73Dxw6i6CAKfv2Tm8cjUTi8UWSHiQ6i5h6tmPoI3rSjy5tHdhPYIHhG2SeA0yABL4rODoAoZBDF3AYmEni9Y7Iz1M6BDIJ1jABmDmyQaNkxUDsHLgieWnvsbuUeOgmet6Km2rggWJwXgpsFEixAoyaYqCD4GYpTahZItCrvj4UKgl/xzI1Z8BOcLVJ7F1wQzCDkrEEggZRPJB66SWCCiE33SSFRDQu/Jq3YLcMOFaOdPCIIbhDqbcqlHPPxGy2oub8/FrpJIIIAF6b15bJN5NF1QdF7XwLxKUBb6cADwXIIfeore8xFEuV6k0DLJfBAsDBp6LabSKwwCfASaBtq0EAU7MxMgUEh0XxkEixwYK19oYFgtmqeWJVJJAskmrdOkCXaWINQNBAP8F4LqzkKied4+/tIUW42iRUH3CIsEGz8rXFej9ft9hp7gxQ7kiZsyh8/bdvU/ymbUCAR3mZ6qZfLB3g4fQMLhGt2lU5TluVo64kcRW+CV6yCUugs5UyNJpmOjej/dAFIICBm6Jx4HE69XiYhqb4aYkmoAbxwyD8ICwQkOLrbM4KAkPiGxMWfe9DOe4QmEGCESINxJBB8skTzHYBYSSIvJ79ZXuMsf0UGEGywi7MAiAQCgqd29oyBuIajh5RiR/G6//zcbykLg9WVkSj/GT5LIwMImBfECaBIIPJAuDRJHASQkKPoo3emYRTeobNzEhGEip9SDyIbGwpQnAQSiNrsIgQQ11COomJmVTb38ecZeMwSWktDPQh3wQw3CwkEhLJA+52QH0RaEtkTrrwZLaoFjwmn1hpAXAJjyN4uHBDMV2oduAji2ugzKyBx/R3N/D50jghs/m7oGpcU0VvigGBGqk13ZyCAhBw7MhY1n4Pnq5rRWQ6/b03OkmXZKCkVDggIGvqR5xzE9aklkbBMqhxu76scw2ddZTdj+GQbq1DCBg6IBIKG9owkENdmOKKJROT3/6vAQthwTA8CJgdRdu7jgAAb9bVtySCu48fKuAP+LBwakX6iB+H6Cz1yo3BAsOip9VoSiNCHzw0koiE79cIVIArE+IkDAuZtPe2XEoiG5z9yjjn2jvKn/7c0f6UHAQs9KDO4qCC0aYQCoj+gO9BQouhIYviDVSAQp7JxQLDFX+2XctfoP8ue2nxiiKJj0rWma8CwC2X8uT+IwVc+IiXHHEk82RBjjbP8D4CoQ3NmFQ6+738C4hFpMqvBb2TR/8UiRh/Ru0XFJkYSzxP7iO1RYxxVyTM1Yyw5cdTYnkf8CCQyzezdSfOITZnlgMsZhxbhQEUzj+mfM7PcPtZw2cjCQEL6yVnGGttGn8Nf+Wy0KfuJ4f+SizjN6JPNR2hX82UQ5av/tGBz1XoSbPZuEURyuPmIDTNU3CQqdqlv5qwWQBxvhmr9nOVgEuNSd/4L/39qo+iMxFnmLFfPYoMNjPEua6B7jClUpuSY70AcbxZ77boGE2wNcu+AopHziZFEuAziiOsa61a6ps5xBf+W38Mo7Jf9B+8ik0jCRRBHXOlatfapI3Gp0lu/9vka+rmcY3ISp1n7XLMaPidRau+jEjuiBRAOoq/ccX+E4jF99U+NJE6zP+L9jhlV0VXXkWQS4wrHeXbMLOyhMoHojKIUC41kN+24YyChA3HMPVQLu+rMILoLnO2qa7SZVU9CA+Kgu+oWtj0ugRj85rTP8qnNJ6pIB+Kg+ywXdt6+AzHrLIbMKlJAHHbnrXkvtvNcejhD0u/gQBUSjZK8H3Yvtnl3fhanG+TImdXoQRW8h92d/+Z5ja2SScg68PMai0/wbJccOyQd+AmepWe6/iLmBLQkDv1MF/ajd0s24eAe6rLPc59/lZnEwZ/75PdJv9CzXSaPWfDPkQ502ePZ8E80kZiFycM/G66rFvCZtCSOXy1gGgih1Q7TkCh4kYrj1o9QKop8LtVPnKGiyFRjBq9ilpJt8/ziyDVmbBQFymaZ1UmqDol1qNAaFnLMhM8SH70O1dQ5AjzTnXqHUEf36JXJplp1AV7+O5HgtnH4WnVCZowY52USZ6heKNSztEbiHPUshbKTlnrHWSqcCjVvEUubC3WQT1PzVqiCjFba3BU6xmmqIFNd7ElUKZ03TLXzWcv0NgUQvV+Di964wkTv4GGav5VpIwq3nr/T6cRvZaL3dAmiN7fxQ9C7/Jjo7Y5c9L5PLnoDLBe9E5iL3hLNRe8NF45Ib5Ln6vKltrtexUH2jjNw2hUZF76+AqJX4VZ53ab9xYOctK3zyv0ChF5fAwEqChdUfIkA6NsgDiMCASIQIAIBIhAgAgEiECACASIQIAIBIhAgAgEiECACASIQIAIBIhAgAgEiECACASIQIAIBIhAgAgEiECACASIQIAIBIhAgAgFyL5VL6lT9C86bdxzAdoHwAAAAAElFTkSuQmCC",uue=["src"],pue={class:"flex gap-2 mt-4"},hue=["type"],fue={class:"border-slate-200 border w-[15%] rounded bg-slate-100 cursor-pointer flex justify-center items-center",for:"upload"},mue={inheritAttrs:!1},pz=Ce({...mue,__name:"FormFileUpload",props:{value:{},modelValue:{},formInputSize:{},rounded:{type:Boolean}},emits:["update:modelValue"],setup(n,{emit:e}){const{t:a}=tt(),s=n,o=Ot(),r=xt("formInline",!1),i=xt("inputGroup",!1),u=O(""),h=new aa,m=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",s.formInputSize=="sm"&&"text-xs py-1.5 px-2",s.formInputSize=="lg"&&"text-lg py-1.5 px-4",s.rounded&&"rounded-full",r&&"flex-1",i&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",typeof o.class=="string"&&o.class])),p=e,b=ee({get(){return s.modelValue===void 0?s.value:s.modelValue},set(w){p("update:modelValue",w)}}),x=async w=>{const D=w.target.files,V=new FileReader;if(D){let R=D[0].name;V.readAsDataURL(D[0]),b.value=R;let E=await h.uploadFile(D[0]);E&&E.data&&(u.value=E.data.url)}};return at(()=>{u.value||(u.value=due)}),(w,$)=>(L(),U(ke,null,[u.value?(L(),U("div",{key:0,class:F(["flex","justify-center","mt-2","w-full","align-center",{"bg-slate-100":u.value},"rounded","p-4"])},[c("img",{class:"rounded aspect-auto",src:u.value?u.value:"",alt:"Image Preview"},null,8,uue)],2)):Me("",!0),c("div",pue,[c("input",Ft({disabled:"",class:m.value,type:s.type},t(Pt).omit(t(o),"class")),null,16,hue),c("input",{id:"upload",type:"file",hidden:"",onChange:$[0]||($[0]=D=>x(D))},null,32),c("label",fue,_(t(a)("components.file-upload.browse")),1)])],64))}});class vue{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}async upload(e){const a={success:!1};try{const s=new FormData;s.append("image",e);const o=je("api.post.product.image.upload",void 0,!1,this.ziggyRoute);nt.defaults.headers.common["Content-Type"]="multipart/form-data";const r=await nt.post(o,s);return a.success=!0,a.data=r.data.data,a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const yue={inheritAttrs:!1},me=Ce({...yue,__name:"Button",props:{as:{default:"button"},variant:{},elevated:{type:Boolean},size:{},rounded:{type:Boolean}},setup(n){const{as:e,size:a,variant:s,elevated:o,rounded:r}=n,i=Ot(),u=["transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer","focus:ring-4 focus:ring-primary focus:ring-opacity-20","focus-visible:outline-none","dark:focus:ring-slate-700 dark:focus:ring-opacity-50","[&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90","[&:not(button)]:text-center","disabled:opacity-70 disabled:cursor-not-allowed"],h=["text-xs py-1.5 px-2"],m=["text-lg py-1.5 px-4"],p=["bg-primary border-primary text-white dark:border-primary"],b=["bg-secondary/70 border-secondary/70 text-slate-500","dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300","[&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100","[&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80"],x=["bg-success border-success text-slate-900","dark:border-success"],w=["bg-warning border-warning text-slate-900","dark:border-warning"],$=["bg-pending border-pending text-white","dark:border-pending"],D=["bg-danger border-danger text-white","dark:border-danger"],V=["bg-dark border-dark text-white","dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300","[&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70"],R=["bg-[#3b5998] border-[#3b5998] text-white dark:border-[#3b5998]"],E=["bg-[#4ab3f4] border-[#4ab3f4] text-white dark:border-[#4ab3f4]"],P=["bg-[#517fa4] border-[#517fa4] text-white dark:border-[#517fa4]"],S=["bg-[#0077b5] border-[#0077b5] text-white dark:border-[#0077b5]"],C=["border-primary text-primary","dark:border-primary","[&:hover:not(:disabled)]:bg-primary/10"],M=["border-secondary text-slate-500","dark:border-darkmode-100/40 dark:text-slate-300","[&:hover:not(:disabled)]:bg-secondary/20","[&:hover:not(:disabled)]:dark:bg-darkmode-100/10"],g=["border-success text-success","dark:border-success","[&:hover:not(:disabled)]:bg-success/10"],v=["border-warning text-warning","dark:border-warning","[&:hover:not(:disabled)]:bg-warning/10"],T=["border-pending text-pending","dark:border-pending","[&:hover:not(:disabled)]:bg-pending/10"],j=["border-danger text-danger","dark:border-danger","[&:hover:not(:disabled)]:bg-danger/10"],B=["border-dark text-dark","dark:border-darkmode-800 dark:text-slate-300","[&:hover:not(:disabled)]:bg-darkmode-800/30","[&:hover:not(:disabled)]:dark:bg-opacity-30"],oe=["bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary","dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary","[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10","[&:hover:not(:disabled)]:dark:border-opacity-60"],be=["bg-slate-300 border-secondary bg-opacity-20 text-slate-500","dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300","[&:hover:not(:disabled)]:bg-opacity-10","[&:hover:not(:disabled)]:dark:bg-darkmode-100/10 [&:hover:not(:disabled)]:dark:border-darkmode-100/20"],$e=["bg-success border-success bg-opacity-20 border-opacity-5 text-success","dark:border-success dark:border-opacity-20","[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10"],Le=["bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning","dark:border-warning dark:border-opacity-20","[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10"],de=["bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending","dark:border-pending dark:border-opacity-20","[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10"],J=["bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger","dark:border-danger dark:border-opacity-20","[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10"],G=["bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark","dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300","[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10","[&:hover:not(:disabled)]:dark:bg-darkmode-800/50 [&:hover:not(:disabled)]:dark:border-darkmode-800"],ce=ee(()=>At([u,a=="sm"&&h,a=="lg"&&m,s=="primary"&&p,s=="secondary"&&b,s=="success"&&x,s=="warning"&&w,s=="pending"&&$,s=="danger"&&D,s=="dark"&&V,s=="outline-primary"&&C,s=="outline-secondary"&&M,s=="outline-success"&&g,s=="outline-warning"&&v,s=="outline-pending"&&T,s=="outline-danger"&&j,s=="outline-dark"&&B,s=="soft-primary"&&oe,s=="soft-secondary"&&be,s=="soft-success"&&$e,s=="soft-warning"&&Le,s=="soft-pending"&&de,s=="soft-danger"&&J,s=="soft-dark"&&G,s=="facebook"&&R,s=="twitter"&&E,s=="instagram"&&P,s=="linkedin"&&S,r&&"rounded-full",o&&"shadow-md",typeof i.class=="string"&&i.class]));return(Ee,He)=>(L(),ge(Da(e),Ft({class:ce.value},t(Pt).omit(t(i),"class")),{default:f(()=>[Lt(Ee.$slots,"default")]),_:3},16,["class"]))}}),_ue={class:"flex flex-col gap-4"},gue={class:"text-slate-500 text-center"},kue={class:"font-medium text-primary"},bue=c("div",{class:"text-slate-400 text-xs mt-1"}," JPG, PNG ",-1),wue={class:"flex gap-2"},xue={key:0,class:"flex justify-center p-2"},Mue={class:"mr-auto text-base font-medium"},Cue={class:"relative w-full aspect-video bg-black rounded overflow-hidden"},Sue={inheritAttrs:!1},Iue=Ce({...Sue,__name:"FormImageUpload",props:{value:{},modelValue:{},formInputSize:{},rounded:{type:Boolean}},emits:["uploaded"],setup(n,{emit:e}){const{t:a}=tt(),s=n,o=Ot(),r=xt("formInline",!1),i=xt("inputGroup",!1),u=new vue,h=O(!1),m=O(null),p=O(!1),b=O(null),x=O(null),w=O(null);ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",s.formInputSize=="sm"&&"text-xs py-1.5 px-2",s.formInputSize=="lg"&&"text-lg py-1.5 px-4",s.rounded&&"rounded-full",r&&"flex-1",i&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",typeof o.class=="string"&&o.class]));const $=e,D=async M=>{h.value=!0;try{let g=await u.upload(M);g.success&&g.data&&$("uploaded",g.data)}finally{h.value=!1}},V=M=>{const v=M.target.files;v&&v.length>0&&D(v[0])},R=M=>{var v;const g=(v=M.dataTransfer)==null?void 0:v.files;g&&g.length>0&&D(g[0])},E=()=>{var M;(M=m.value)==null||M.click()},P=async()=>{p.value=!0;try{w.value=await navigator.mediaDevices.getUserMedia({video:!0}),b.value&&(b.value.srcObject=w.value)}catch(M){console.error("Error accessing camera:",M)}},S=()=>{w.value&&(w.value.getTracks().forEach(M=>M.stop()),w.value=null),p.value=!1},C=()=>{if(b.value&&x.value){const M=b.value,g=x.value;g.width=M.videoWidth,g.height=M.videoHeight;const v=g.getContext("2d");v&&(v.drawImage(M,0,0,g.width,g.height),g.toBlob(T=>{if(T){const j=new File([T],`camera_${Date.now()}.jpg`,{type:"image/jpeg"});D(j),S()}},"image/jpeg"))}};return rn(()=>{S()}),(M,g)=>(L(),U("div",_ue,[c("div",{class:"border-2 border-dashed border-slate-300 dark:border-darkmode-400 rounded-md p-6 flex flex-col justify-center items-center cursor-pointer hover:bg-slate-50 dark:hover:bg-darkmode-600/50 transition-colors",onDragover:g[0]||(g[0]=Rt(()=>{},["prevent"])),onDrop:Rt(R,["prevent"]),onClick:E},[l(t(re),{icon:"UploadCloud",class:"w-10 h-10 text-slate-400 mb-2"}),c("div",gue,[c("span",kue,_(t(a)("components.file-upload.browse")),1),A(" "+_(t(a)("components.file-upload.or_drag_drop")),1)]),bue,c("input",{ref_key:"fileInput",ref:m,type:"file",accept:"image/*",class:"hidden",onChange:V},null,544)],32),c("div",wue,[l(t(me),{type:"button",variant:"outline-primary",class:"w-full",onClick:P},{default:f(()=>[l(t(re),{icon:"Camera",class:"w-4 h-4 mr-2"}),A(" "+_(t(a)("components.file-upload.camera")),1)]),_:1})]),h.value?(L(),U("div",xue,[l(t(re),{icon:"Loader2",class:"w-6 h-6 animate-spin text-primary"})])):Me("",!0),l(t($t),{open:p.value,onClose:S},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[l(t($t).Title,null,{default:f(()=>[c("h2",Mue,_(t(a)("components.file-upload.camera")),1)]),_:1}),l(t($t).Description,null,{default:f(()=>[c("div",Cue,[c("video",{ref_key:"videoRef",ref:b,autoplay:"",playsinline:"",class:"w-full h-full object-cover"},null,512),c("canvas",{ref_key:"canvasRef",ref:x,class:"hidden"},null,512)])]),_:1}),l(t($t).Footer,null,{default:f(()=>[l(t(me),{type:"button",variant:"outline-secondary",onClick:S,class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"primary",onClick:C,class:"w-24"},{default:f(()=>[A(_(t(a)("components.file-upload.capture")),1)]),_:1})]),_:1})]),_:1})]),_:1},8,["open"])]))}}),Lue={class:"flex items-center gap-2"},$ue={class:"flex-1"},Aue=["disabled","type"],Eue={inheritAttrs:!1},wa=Ce({...Eue,__name:"FormInputCode",props:{value:{},modelValue:{},formInputSize:{},rounded:{type:Boolean}},emits:["setAuto","update:modelValue"],setup(n,{emit:e}){const a=n,s=Ot(),o=xt("formInline",!1),r=xt("inputGroup",!1),i=e,u=ee(()=>a.modelValue=="_AUTO_"),h=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",a.formInputSize=="sm"&&"text-xs py-1.5 px-2",a.formInputSize=="lg"&&"text-lg py-1.5 px-4",a.rounded&&"rounded-full",o&&"flex-1",r&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",typeof s.class=="string"&&s.class])),m=ee({get(){return a.modelValue===void 0?a.value:a.modelValue},set(b){i("update:modelValue",b)}}),p=()=>{i("setAuto")};return(b,x)=>(L(),U("div",Lue,[c("div",$ue,[rs(c("input",Ft({disabled:u.value,class:h.value,type:a.type},t(Pt).omit(t(s),"class"),{"onUpdate:modelValue":x[0]||(x[0]=w=>m.value=w)}),null,16,Aue),[[MT,m.value]])]),c("button",{type:"button",class:"px-3 py-2.5 text-xs font-medium border border-slate-200 rounded-md bg-slate-100 text-slate-600 hover:bg-slate-200 whitespace-nowrap",onClick:p}," Auto ")]))}});var hz={exports:{}};(function(n,e){(function(a,s){n.exports=s()})(Ur,function(){var a=1e3,s=6e4,o=36e5,r="millisecond",i="second",u="minute",h="hour",m="day",p="week",b="month",x="quarter",w="year",$="date",D="Invalid Date",V=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,R=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,E={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function($e){var Le=["th","st","nd","rd"],de=$e%100;return"["+$e+(Le[(de-20)%10]||Le[de]||Le[0])+"]"}},P=function($e,Le,de){var J=String($e);return!J||J.length>=Le?$e:""+Array(Le+1-J.length).join(de)+$e},S={s:P,z:function($e){var Le=-$e.utcOffset(),de=Math.abs(Le),J=Math.floor(de/60),G=de%60;return(Le<=0?"+":"-")+P(J,2,"0")+":"+P(G,2,"0")},m:function $e(Le,de){if(Le.date()<de.date())return-$e(de,Le);var J=12*(de.year()-Le.year())+(de.month()-Le.month()),G=Le.clone().add(J,b),ce=de-G<0,Ee=Le.clone().add(J+(ce?-1:1),b);return+(-(J+(de-G)/(ce?G-Ee:Ee-G))||0)},a:function($e){return $e<0?Math.ceil($e)||0:Math.floor($e)},p:function($e){return{M:b,y:w,w:p,d:m,D:$,h,m:u,s:i,ms:r,Q:x}[$e]||String($e||"").toLowerCase().replace(/s$/,"")},u:function($e){return $e===void 0}},C="en",M={};M[C]=E;var g="$isDayjsObject",v=function($e){return $e instanceof oe||!(!$e||!$e[g])},T=function $e(Le,de,J){var G;if(!Le)return C;if(typeof Le=="string"){var ce=Le.toLowerCase();M[ce]&&(G=ce),de&&(M[ce]=de,G=ce);var Ee=Le.split("-");if(!G&&Ee.length>1)return $e(Ee[0])}else{var He=Le.name;M[He]=Le,G=He}return!J&&G&&(C=G),G||!J&&C},j=function($e,Le){if(v($e))return $e.clone();var de=typeof Le=="object"?Le:{};return de.date=$e,de.args=arguments,new oe(de)},B=S;B.l=T,B.i=v,B.w=function($e,Le){return j($e,{locale:Le.$L,utc:Le.$u,x:Le.$x,$offset:Le.$offset})};var oe=function(){function $e(de){this.$L=T(de.locale,null,!0),this.parse(de),this.$x=this.$x||de.x||{},this[g]=!0}var Le=$e.prototype;return Le.parse=function(de){this.$d=function(J){var G=J.date,ce=J.utc;if(G===null)return new Date(NaN);if(B.u(G))return new Date;if(G instanceof Date)return new Date(G);if(typeof G=="string"&&!/Z$/i.test(G)){var Ee=G.match(V);if(Ee){var He=Ee[2]-1||0,Ke=(Ee[7]||"0").substring(0,3);return ce?new Date(Date.UTC(Ee[1],He,Ee[3]||1,Ee[4]||0,Ee[5]||0,Ee[6]||0,Ke)):new Date(Ee[1],He,Ee[3]||1,Ee[4]||0,Ee[5]||0,Ee[6]||0,Ke)}}return new Date(G)}(de),this.init()},Le.init=function(){var de=this.$d;this.$y=de.getFullYear(),this.$M=de.getMonth(),this.$D=de.getDate(),this.$W=de.getDay(),this.$H=de.getHours(),this.$m=de.getMinutes(),this.$s=de.getSeconds(),this.$ms=de.getMilliseconds()},Le.$utils=function(){return B},Le.isValid=function(){return this.$d.toString()!==D},Le.isSame=function(de,J){var G=j(de);return this.startOf(J)<=G&&G<=this.endOf(J)},Le.isAfter=function(de,J){return j(de)<this.startOf(J)},Le.isBefore=function(de,J){return this.endOf(J)<j(de)},Le.$g=function(de,J,G){return B.u(de)?this[J]:this.set(G,de)},Le.unix=function(){return Math.floor(this.valueOf()/1e3)},Le.valueOf=function(){return this.$d.getTime()},Le.startOf=function(de,J){var G=this,ce=!!B.u(J)||J,Ee=B.p(de),He=function(ie,Y){var ue=B.w(G.$u?Date.UTC(G.$y,Y,ie):new Date(G.$y,Y,ie),G);return ce?ue:ue.endOf(m)},Ke=function(ie,Y){return B.w(G.toDate()[ie].apply(G.toDate("s"),(ce?[0,0,0,0]:[23,59,59,999]).slice(Y)),G)},pt=this.$W,ut=this.$M,ft=this.$D,kt="set"+(this.$u?"UTC":"");switch(Ee){case w:return ce?He(1,0):He(31,11);case b:return ce?He(1,ut):He(0,ut+1);case p:var Ae=this.$locale().weekStart||0,Xe=(pt<Ae?pt+7:pt)-Ae;return He(ce?ft-Xe:ft+(6-Xe),ut);case m:case $:return Ke(kt+"Hours",0);case h:return Ke(kt+"Minutes",1);case u:return Ke(kt+"Seconds",2);case i:return Ke(kt+"Milliseconds",3);default:return this.clone()}},Le.endOf=function(de){return this.startOf(de,!1)},Le.$set=function(de,J){var G,ce=B.p(de),Ee="set"+(this.$u?"UTC":""),He=(G={},G[m]=Ee+"Date",G[$]=Ee+"Date",G[b]=Ee+"Month",G[w]=Ee+"FullYear",G[h]=Ee+"Hours",G[u]=Ee+"Minutes",G[i]=Ee+"Seconds",G[r]=Ee+"Milliseconds",G)[ce],Ke=ce===m?this.$D+(J-this.$W):J;if(ce===b||ce===w){var pt=this.clone().set($,1);pt.$d[He](Ke),pt.init(),this.$d=pt.set($,Math.min(this.$D,pt.daysInMonth())).$d}else He&&this.$d[He](Ke);return this.init(),this},Le.set=function(de,J){return this.clone().$set(de,J)},Le.get=function(de){return this[B.p(de)]()},Le.add=function(de,J){var G,ce=this;de=Number(de);var Ee=B.p(J),He=function(ut){var ft=j(ce);return B.w(ft.date(ft.date()+Math.round(ut*de)),ce)};if(Ee===b)return this.set(b,this.$M+de);if(Ee===w)return this.set(w,this.$y+de);if(Ee===m)return He(1);if(Ee===p)return He(7);var Ke=(G={},G[u]=s,G[h]=o,G[i]=a,G)[Ee]||1,pt=this.$d.getTime()+de*Ke;return B.w(pt,this)},Le.subtract=function(de,J){return this.add(-1*de,J)},Le.format=function(de){var J=this,G=this.$locale();if(!this.isValid())return G.invalidDate||D;var ce=de||"YYYY-MM-DDTHH:mm:ssZ",Ee=B.z(this),He=this.$H,Ke=this.$m,pt=this.$M,ut=G.weekdays,ft=G.months,kt=G.meridiem,Ae=function(Y,ue,pe,H){return Y&&(Y[ue]||Y(J,ce))||pe[ue].slice(0,H)},Xe=function(Y){return B.s(He%12||12,Y,"0")},ie=kt||function(Y,ue,pe){var H=Y<12?"AM":"PM";return pe?H.toLowerCase():H};return ce.replace(R,function(Y,ue){return ue||function(pe){switch(pe){case"YY":return String(J.$y).slice(-2);case"YYYY":return B.s(J.$y,4,"0");case"M":return pt+1;case"MM":return B.s(pt+1,2,"0");case"MMM":return Ae(G.monthsShort,pt,ft,3);case"MMMM":return Ae(ft,pt);case"D":return J.$D;case"DD":return B.s(J.$D,2,"0");case"d":return String(J.$W);case"dd":return Ae(G.weekdaysMin,J.$W,ut,2);case"ddd":return Ae(G.weekdaysShort,J.$W,ut,3);case"dddd":return ut[J.$W];case"H":return String(He);case"HH":return B.s(He,2,"0");case"h":return Xe(1);case"hh":return Xe(2);case"a":return ie(He,Ke,!0);case"A":return ie(He,Ke,!1);case"m":return String(Ke);case"mm":return B.s(Ke,2,"0");case"s":return String(J.$s);case"ss":return B.s(J.$s,2,"0");case"SSS":return B.s(J.$ms,3,"0");case"Z":return Ee}return null}(Y)||Ee.replace(":","")})},Le.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},Le.diff=function(de,J,G){var ce,Ee=this,He=B.p(J),Ke=j(de),pt=(Ke.utcOffset()-this.utcOffset())*s,ut=this-Ke,ft=function(){return B.m(Ee,Ke)};switch(He){case w:ce=ft()/12;break;case b:ce=ft();break;case x:ce=ft()/3;break;case p:ce=(ut-pt)/6048e5;break;case m:ce=(ut-pt)/864e5;break;case h:ce=ut/o;break;case u:ce=ut/s;break;case i:ce=ut/a;break;default:ce=ut}return G?ce:B.a(ce)},Le.daysInMonth=function(){return this.endOf(b).$D},Le.$locale=function(){return M[this.$L]},Le.locale=function(de,J){if(!de)return this.$L;var G=this.clone(),ce=T(de,J,!0);return ce&&(G.$L=ce),G},Le.clone=function(){return B.w(this.$d,this)},Le.toDate=function(){return new Date(this.valueOf())},Le.toJSON=function(){return this.isValid()?this.toISOString():null},Le.toISOString=function(){return this.$d.toISOString()},Le.toString=function(){return this.$d.toUTCString()},$e}(),be=oe.prototype;return j.prototype=be,[["$ms",r],["$s",i],["$m",u],["$H",h],["$W",m],["$M",b],["$y",w],["$D",$]].forEach(function($e){be[$e[1]]=function(Le){return this.$g(Le,$e[0],$e[1])}}),j.extend=function($e,Le){return $e.$i||($e(Le,oe,j),$e.$i=!0),j},j.locale=T,j.isDayjs=v,j.unix=function($e){return j(1e3*$e)},j.en=M[C],j.Ls=M,j.p={},j})})(hz);var Tue=hz.exports;const fz=cu(Tue);var mz={exports:{}};(function(n,e){(function(a,s){n.exports=s()})(Ur,function(){var a,s,o=1e3,r=6e4,i=36e5,u=864e5,h=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,m=31536e6,p=2628e6,b=/^(-|\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/,x={years:m,months:p,days:u,hours:i,minutes:r,seconds:o,milliseconds:1,weeks:6048e5},w=function(M){return M instanceof S},$=function(M,g,v){return new S(M,v,g.$l)},D=function(M){return s.p(M)+"s"},V=function(M){return M<0},R=function(M){return V(M)?Math.ceil(M):Math.floor(M)},E=function(M){return Math.abs(M)},P=function(M,g){return M?V(M)?{negative:!0,format:""+E(M)+g}:{negative:!1,format:""+M+g}:{negative:!1,format:""}},S=function(){function M(v,T,j){var B=this;if(this.$d={},this.$l=j,v===void 0&&(this.$ms=0,this.parseFromMilliseconds()),T)return $(v*x[D(T)],this);if(typeof v=="number")return this.$ms=v,this.parseFromMilliseconds(),this;if(typeof v=="object")return Object.keys(v).forEach(function($e){B.$d[D($e)]=v[$e]}),this.calMilliseconds(),this;if(typeof v=="string"){var oe=v.match(b);if(oe){var be=oe.slice(2).map(function($e){return $e!=null?Number($e):0});return this.$d.years=be[0],this.$d.months=be[1],this.$d.weeks=be[2],this.$d.days=be[3],this.$d.hours=be[4],this.$d.minutes=be[5],this.$d.seconds=be[6],this.calMilliseconds(),this}}return this}var g=M.prototype;return g.calMilliseconds=function(){var v=this;this.$ms=Object.keys(this.$d).reduce(function(T,j){return T+(v.$d[j]||0)*x[j]},0)},g.parseFromMilliseconds=function(){var v=this.$ms;this.$d.years=R(v/m),v%=m,this.$d.months=R(v/p),v%=p,this.$d.days=R(v/u),v%=u,this.$d.hours=R(v/i),v%=i,this.$d.minutes=R(v/r),v%=r,this.$d.seconds=R(v/o),v%=o,this.$d.milliseconds=v},g.toISOString=function(){var v=P(this.$d.years,"Y"),T=P(this.$d.months,"M"),j=+this.$d.days||0;this.$d.weeks&&(j+=7*this.$d.weeks);var B=P(j,"D"),oe=P(this.$d.hours,"H"),be=P(this.$d.minutes,"M"),$e=this.$d.seconds||0;this.$d.milliseconds&&($e+=this.$d.milliseconds/1e3,$e=Math.round(1e3*$e)/1e3);var Le=P($e,"S"),de=v.negative||T.negative||B.negative||oe.negative||be.negative||Le.negative,J=oe.format||be.format||Le.format?"T":"",G=(de?"-":"")+"P"+v.format+T.format+B.format+J+oe.format+be.format+Le.format;return G==="P"||G==="-P"?"P0D":G},g.toJSON=function(){return this.toISOString()},g.format=function(v){var T=v||"YYYY-MM-DDTHH:mm:ss",j={Y:this.$d.years,YY:s.s(this.$d.years,2,"0"),YYYY:s.s(this.$d.years,4,"0"),M:this.$d.months,MM:s.s(this.$d.months,2,"0"),D:this.$d.days,DD:s.s(this.$d.days,2,"0"),H:this.$d.hours,HH:s.s(this.$d.hours,2,"0"),m:this.$d.minutes,mm:s.s(this.$d.minutes,2,"0"),s:this.$d.seconds,ss:s.s(this.$d.seconds,2,"0"),SSS:s.s(this.$d.milliseconds,3,"0")};return T.replace(h,function(B,oe){return oe||String(j[B])})},g.as=function(v){return this.$ms/x[D(v)]},g.get=function(v){var T=this.$ms,j=D(v);return j==="milliseconds"?T%=1e3:T=j==="weeks"?R(T/x[j]):this.$d[j],T||0},g.add=function(v,T,j){var B;return B=T?v*x[D(T)]:w(v)?v.$ms:$(v,this).$ms,$(this.$ms+B*(j?-1:1),this)},g.subtract=function(v,T){return this.add(v,T,!0)},g.locale=function(v){var T=this.clone();return T.$l=v,T},g.clone=function(){return $(this.$ms,this)},g.humanize=function(v){return a().add(this.$ms,"ms").locale(this.$l).fromNow(!v)},g.valueOf=function(){return this.asMilliseconds()},g.milliseconds=function(){return this.get("milliseconds")},g.asMilliseconds=function(){return this.as("milliseconds")},g.seconds=function(){return this.get("seconds")},g.asSeconds=function(){return this.as("seconds")},g.minutes=function(){return this.get("minutes")},g.asMinutes=function(){return this.as("minutes")},g.hours=function(){return this.get("hours")},g.asHours=function(){return this.as("hours")},g.days=function(){return this.get("days")},g.asDays=function(){return this.as("days")},g.weeks=function(){return this.get("weeks")},g.asWeeks=function(){return this.as("weeks")},g.months=function(){return this.get("months")},g.asMonths=function(){return this.as("months")},g.years=function(){return this.get("years")},g.asYears=function(){return this.as("years")},M}(),C=function(M,g,v){return M.add(g.years()*v,"y").add(g.months()*v,"M").add(g.days()*v,"d").add(g.hours()*v,"h").add(g.minutes()*v,"m").add(g.seconds()*v,"s").add(g.milliseconds()*v,"ms")};return function(M,g,v){a=v,s=v().$utils(),v.duration=function(B,oe){var be=v.locale();return $(B,{$l:be},oe)},v.isDuration=w;var T=g.prototype.add,j=g.prototype.subtract;g.prototype.add=function(B,oe){return w(B)?C(this,B,1):T.bind(this)(B,oe)},g.prototype.subtract=function(B,oe){return w(B)?C(this,B,-1):j.bind(this)(B,oe)}}})})(mz);var Pue=mz.exports;const Due=cu(Pue);var Rue={},vz={};(function(n){Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return e}});const e={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}})(vz);(function(n){Object.defineProperty(n,"__esModule",{value:!0});function e($,D){for(var V in D)Object.defineProperty($,V,{enumerable:!0,get:D[V]})}e(n,{parseColor:function(){return x},formatColor:function(){return w}});const a=s(vz);function s($){return $&&$.__esModule?$:{default:$}}let o=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i,r=/^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i,i=/(?:\d+|\d*\.\d+)%?/,u=/(?:\s*,\s*|\s+)/,h=/\s*[,/]\s*/,m=/var\(--(?:[^ )]*?)(?:,(?:[^ )]*?|var\(--[^ )]*?\)))?\)/,p=new RegExp(`^(rgba?)\\(\\s*(${i.source}|${m.source})(?:${u.source}(${i.source}|${m.source}))?(?:${u.source}(${i.source}|${m.source}))?(?:${h.source}(${i.source}|${m.source}))?\\s*\\)$`),b=new RegExp(`^(hsla?)\\(\\s*((?:${i.source})(?:deg|rad|grad|turn)?|${m.source})(?:${u.source}(${i.source}|${m.source}))?(?:${u.source}(${i.source}|${m.source}))?(?:${h.source}(${i.source}|${m.source}))?\\s*\\)$`);function x($,{loose:D=!1}={}){var V,R;if(typeof $!="string")return null;if($=$.trim(),$==="transparent")return{mode:"rgb",color:["0","0","0"],alpha:"0"};if($ in a.default)return{mode:"rgb",color:a.default[$].map(M=>M.toString())};let E=$.replace(r,(M,g,v,T,j)=>["#",g,g,v,v,T,T,j?j+j:""].join("")).match(o);if(E!==null)return{mode:"rgb",color:[parseInt(E[1],16),parseInt(E[2],16),parseInt(E[3],16)].map(M=>M.toString()),alpha:E[4]?(parseInt(E[4],16)/255).toString():void 0};var P;let S=(P=$.match(p))!==null&&P!==void 0?P:$.match(b);if(S===null)return null;let C=[S[2],S[3],S[4]].filter(Boolean).map(M=>M.toString());return C.length===2&&C[0].startsWith("var(")?{mode:S[1],color:[C[0]],alpha:C[1]}:!D&&C.length!==3||C.length<3&&!C.some(M=>/^var\(.*?\)$/.test(M))?null:{mode:S[1],color:C,alpha:(V=S[5])===null||V===void 0||(R=V.toString)===null||R===void 0?void 0:R.call(V)}}function w({mode:$,color:D,alpha:V}){let R=V!==void 0;return $==="rgba"||$==="hsla"?`${$}(${D.join(", ")}${R?`, ${V}`:""})`:`${$}(${D.join(" ")}${R?` / ${V}`:""})`}})(Rue);fz.extend(Due);const Ya=(n,e)=>fz(n).format(e),_a=n=>{if(n!=null&&n!==""){let e=n.toString(),[a,s]=e.split(".");a=a.replace(/\D/g,"");const o=a.length%3;let r=a.substr(0,o);const i=a.substr(o).match(/\d{3}/g);let u;return i&&(u=o?".":"",r+=u+i.join(".")),s&&(s=s.replace(/0+$/,""),s.length>0&&(r+=","+s)),r}else return""},ir=(n,e=300,a=s=>{})=>{n.style.transitionProperty="height, margin, padding",n.style.transitionDuration=e+"ms",n.style.height=n.offsetHeight+"px",n.offsetHeight,n.style.overflow="hidden",n.style.height="0",n.style.paddingTop="0",n.style.paddingBottom="0",n.style.marginTop="0",n.style.marginBottom="0",window.setTimeout(()=>{n.style.display="none",n.style.removeProperty("height"),n.style.removeProperty("padding-top"),n.style.removeProperty("padding-bottom"),n.style.removeProperty("margin-top"),n.style.removeProperty("margin-bottom"),n.style.removeProperty("overflow"),n.style.removeProperty("transition-duration"),n.style.removeProperty("transition-property"),a(n)},e)},lr=(n,e=300,a=s=>{})=>{n.style.removeProperty("display");let s=window.getComputedStyle(n).display;s==="none"&&(s="block"),n.style.display=s;let o=n.offsetHeight;n.style.overflow="hidden",n.style.height="0",n.style.paddingTop="0",n.style.paddingBottom="0",n.style.marginTop="0",n.style.marginBottom="0",n.offsetHeight,n.style.transitionProperty="height, margin, padding",n.style.transitionDuration=e+"ms",n.style.height=o+"px",n.style.removeProperty("padding-top"),n.style.removeProperty("padding-bottom"),n.style.removeProperty("margin-top"),n.style.removeProperty("margin-bottom"),window.setTimeout(()=>{n.style.removeProperty("height"),n.style.removeProperty("overflow"),n.style.removeProperty("transition-duration"),n.style.removeProperty("transition-property"),a(n)},e)},ln=n=>{const e={},a=n,s=ot(n)?n.response:a==null?void 0:a.response;if(s&&s.data){const o=s.data;if(o.errors&&typeof o.errors=="object"){for(const r of Object.keys(o.errors)){const i=o.errors[r];Array.isArray(i)?e[r]=i:i!=null&&(e[r]=[String(i)])}return e}if(o.message)return e.error=[String(o.message)],e}return n instanceof Error&&n.message?e.error=[n.message]:a!=null&&a.message?e.error=[String(a.message)]:e.error=["Unknown error"],e},Ta=Ce({__name:"FormInputCurrency",props:{modelValue:{},formInputSize:{},rounded:{type:Boolean}},emits:["update:modelValue","change"],setup(n,{emit:e}){const a=n,s=e,o=Ot(),r=xt("formInline",!1),i=xt("inputGroup",!1),u=O(null),h=O(!1),m=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",a.formInputSize=="sm"&&"text-xs py-1.5 px-2",a.formInputSize=="lg"&&"text-lg py-1.5 px-4",a.rounded&&"rounded-full",r&&"flex-1",i&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",typeof o.class=="string"&&o.class,"text-right"])),p=O("");dt(()=>a.modelValue,$=>{h.value||(p.value=_a($??""))},{immediate:!0});const b=$=>{let V=$.target.value;const R=V.replace(/\./g,"").replace(",","."),E=parseFloat(R);isNaN(E)?(V===""||V==="-")&&s("update:modelValue",0):s("update:modelValue",E)},x=()=>{h.value=!0,a.modelValue!==void 0&&a.modelValue!==null&&(p.value=a.modelValue.toString().replace(".",","))},w=()=>{h.value=!1,p.value=_a(a.modelValue??"");const $=p.value.replace(/\./g,"").replace(",","."),D=parseFloat($);isNaN(D)||s("change",D)};return($,D)=>rs((L(),U("input",Ft({ref_key:"inputRef",ref:u,class:m.value,type:"text"},t(Pt).omit(t(o),"class"),{"onUpdate:modelValue":D[0]||(D[0]=V=>p.value=V),onInput:b,onFocus:x,onBlur:w}),null,16)),[[Lo,p.value]])}}),oo=Ce({__name:"FormInputDateTime",props:{modelValue:{},formInputSize:{},rounded:{type:Boolean}},emits:["update:modelValue","change"],setup(n,{emit:e}){const a=n,s=e,o=Ot(),r=xt("formInline",!1),i=xt("inputGroup",!1),u=O(null),h=O(!1),m=O(""),p=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",a.formInputSize=="sm"&&"text-xs py-1.5 px-2",a.formInputSize=="lg"&&"text-lg py-1.5 px-4",a.rounded&&"rounded-full",r&&"flex-1",i&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",typeof o.class=="string"&&o.class]));dt(()=>a.modelValue,D=>{if(!h.value){if(!D){m.value="";return}m.value=Ya(D,"YYYY-MM-DDTHH:mm:ss")}},{immediate:!0});const b=D=>{const V=D.target;m.value=V.value},x=D=>{const R=D.target.value;if(!R){s("update:modelValue",null),s("change",null);return}const[E,P]=R.split("T");let S=P??"";S&&S.split(":").length===2&&(S=`${S}:00`);const C=`${E} ${S}`;s("update:modelValue",C),s("change",C)},w=()=>{h.value=!0},$=()=>{h.value=!1};return(D,V)=>rs((L(),U("input",Ft({ref_key:"inputRef",ref:u,class:p.value,type:"datetime-local",step:"1"},t(Pt).omit(t(o),"class"),{"onUpdate:modelValue":V[0]||(V[0]=R=>m.value=R),onInput:b,onChange:x,onFocus:w,onBlur:$}),null,16)),[[Lo,m.value]])}}),Oue={class:"flex items-center gap-2"},Vue={class:"flex-1"},Uue=["disabled"],md="_AUTO_",yz=Ce({__name:"FormInputDateTimeAuto",props:{modelValue:{},formInputSize:{},rounded:{type:Boolean}},emits:["update:modelValue","change"],setup(n,{emit:e}){const a=n,s=e,o=Ot(),r=xt("formInline",!1),i=xt("inputGroup",!1),u=O(null),h=O(!1),m=O(""),p=ee(()=>a.modelValue===md),b=ee(()=>At(["disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent","[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent","transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",a.formInputSize=="sm"&&"text-xs py-1.5 px-2",a.formInputSize=="lg"&&"text-lg py-1.5 px-4",a.rounded&&"rounded-full",r&&"flex-1",i&&"rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",typeof o.class=="string"&&o.class])),x=ee(()=>!!o.disabled||p.value);dt(()=>a.modelValue,C=>{if(!h.value){if(!C||C===md){m.value="";return}m.value=Ya(C,"YYYY-MM-DDTHH:mm:ss")}},{immediate:!0});let w=null;const $=()=>{w!==null&&(window.clearInterval(w),w=null)},D=()=>{$(),w=window.setInterval(()=>{if(!p.value)return;const C=new Date().toString();m.value=Ya(C,"YYYY-MM-DDTHH:mm:ss")},1e3)};dt(p,C=>{if(C)D();else{$();const M=a.modelValue;!M||M===md?m.value="":m.value=Ya(M,"YYYY-MM-DDTHH:mm:ss")}},{immediate:!0});const V=C=>{const M=C.target;m.value=M.value},R=C=>{const g=C.target.value;if(!g){s("update:modelValue",null),s("change",null);return}const[v,T]=g.split("T");let j=T??"";j&&j.split(":").length===2&&(j=`${j}:00`);const B=`${v} ${j}`;s("update:modelValue",B),s("change",B)},E=()=>{p.value?(s("update:modelValue",null),s("change",null)):(s("update:modelValue",md),s("change",md))};gT(()=>{$()});const P=()=>{h.value=!0},S=()=>{h.value=!1};return(C,M)=>(L(),U("div",Oue,[c("div",Vue,[rs(c("input",Ft({ref_key:"inputRef",ref:u,class:b.value,type:"datetime-local",step:"1"},t(Pt).omit(t(o),"class"),{"onUpdate:modelValue":M[0]||(M[0]=g=>m.value=g),disabled:x.value,onInput:V,onChange:R,onFocus:P,onBlur:S}),null,16,Uue),[[Lo,m.value]])]),c("button",{type:"button",class:"px-3 py-2.5 text-xs font-medium border border-slate-200 rounded-md bg-slate-100 text-slate-600 hover:bg-slate-200 whitespace-nowrap",onClick:E}," Auto ")]))}}),Fue={key:0,class:"mt-1 text-danger"},_e=Ce({__name:"FormErrorMessages",props:{messages:{default:""}},setup(n){const a=An(n,"messages"),s=ee(()=>a.value.length!=0);return(o,r)=>s.value?(L(),U("span",Fue,_(a.value),1)):Me("",!0)}});function dA(n,e){n.split(/\s+/).forEach(a=>{e(a)})}class jue{constructor(){this._events=void 0,this._events={}}on(e,a){dA(e,s=>{const o=this._events[s]||[];o.push(a),this._events[s]=o})}off(e,a){var s=arguments.length;if(s===0){this._events={};return}dA(e,o=>{if(s===1){delete this._events[o];return}const r=this._events[o];r!==void 0&&(r.splice(r.indexOf(a),1),this._events[o]=r)})}trigger(e,...a){var s=this;dA(e,o=>{const r=s._events[o];r!==void 0&&r.forEach(i=>{i.apply(s,a)})})}}function Hue(n){return n.plugins={},class extends n{constructor(...e){super(...e),this.plugins={names:[],settings:{},requested:{},loaded:{}}}static define(e,a){n.plugins[e]={name:e,fn:a}}initializePlugins(e){var a,s;const o=this,r=[];if(Array.isArray(e))e.forEach(i=>{typeof i=="string"?r.push(i):(o.plugins.settings[i.name]=i.options,r.push(i.name))});else if(e)for(a in e)e.hasOwnProperty(a)&&(o.plugins.settings[a]=e[a],r.push(a));for(;s=r.shift();)o.require(s)}loadPlugin(e){var a=this,s=a.plugins,o=n.plugins[e];if(!n.plugins.hasOwnProperty(e))throw new Error('Unable to find "'+e+'" plugin');s.requested[e]=!0,s.loaded[e]=o.fn.apply(a,[a.plugins.settings[e]||{}]),s.names.push(e)}require(e){var a=this,s=a.plugins;if(!a.plugins.loaded.hasOwnProperty(e)){if(s.requested[e])throw new Error('Plugin has circular dependency ("'+e+'")');a.loadPlugin(e)}return s.loaded[e]}}}/*! @orchidjs/unicode-variants | https://github.com/orchidjs/unicode-variants | Apache License (v2) */const p9=n=>(n=n.filter(Boolean),n.length<2?n[0]||"":zue(n)==1?"["+n.join("")+"]":"(?:"+n.join("|")+")"),_z=n=>{if(!Nue(n))return n.join("");let e="",a=0;const s=()=>{a>1&&(e+="{"+a+"}")};return n.forEach((o,r)=>{if(o===n[r-1]){a++;return}s(),e+=o,a=1}),s(),e},gz=n=>{let e=oP(n);return p9(e)},Nue=n=>new Set(n).size!==n.length,Yd=n=>(n+"").replace(/([\$\(\)\*\+\.\?\[\]\^\{\|\}\\])/gu,"\\$1"),zue=n=>n.reduce((e,a)=>Math.max(e,Bue(a)),0),Bue=n=>oP(n).length,oP=n=>Array.from(n);/*! @orchidjs/unicode-variants | https://github.com/orchidjs/unicode-variants | Apache License (v2) */const kz=n=>{if(n.length===1)return[[n]];let e=[];const a=n.substring(1);return kz(a).forEach(function(o){let r=o.slice(0);r[0]=n.charAt(0)+r[0],e.push(r),r=o.slice(0),r.unshift(n.charAt(0)),e.push(r)}),e};/*! @orchidjs/unicode-variants | https://github.com/orchidjs/unicode-variants | Apache License (v2) */const que=[[0,65535]],Wue="[̀-ͯ·ʾʼ]";let wL,bz;const Gue=3,rP={},RU={"/":"⁄∕",0:"߀",a:"ⱥɐɑ",aa:"ꜳ",ae:"æǽǣ",ao:"ꜵ",au:"ꜷ",av:"ꜹꜻ",ay:"ꜽ",b:"ƀɓƃ",c:"ꜿƈȼↄ",d:"đɗɖᴅƌꮷԁɦ",e:"ɛǝᴇɇ",f:"ꝼƒ",g:"ǥɠꞡᵹꝿɢ",h:"ħⱨⱶɥ",i:"ɨı",j:"ɉȷ",k:"ƙⱪꝁꝃꝅꞣ",l:"łƚɫⱡꝉꝇꞁɭ",m:"ɱɯϻ",n:"ꞥƞɲꞑᴎлԉ",o:"øǿɔɵꝋꝍᴑ",oe:"œ",oi:"ƣ",oo:"ꝏ",ou:"ȣ",p:"ƥᵽꝑꝓꝕρ",q:"ꝗꝙɋ",r:"ɍɽꝛꞧꞃ",s:"ßȿꞩꞅʂ",t:"ŧƭʈⱦꞇ",th:"þ",tz:"ꜩ",u:"ʉ",v:"ʋꝟʌ",vy:"ꝡ",w:"ⱳ",y:"ƴɏỿ",z:"ƶȥɀⱬꝣ",hv:"ƕ"};for(let n in RU){let e=RU[n]||"";for(let a=0;a<e.length;a++){let s=e.substring(a,a+1);rP[s]=n}}const Zue=new RegExp(Object.keys(rP).join("|")+"|"+Wue,"gu"),Kue=n=>{wL===void 0&&(wL=Jue(n||que))},OU=(n,e="NFKD")=>n.normalize(e),xL=n=>oP(n).reduce((e,a)=>e+Xue(a),""),Xue=n=>(n=OU(n).toLowerCase().replace(Zue,e=>rP[e]||""),OU(n,"NFC"));function*Yue(n){for(const[e,a]of n)for(let s=e;s<=a;s++){let o=String.fromCharCode(s),r=xL(o);r!=o.toLowerCase()&&(r.length>Gue||r.length!=0&&(yield{folded:r,composed:o,code_point:s}))}}const Que=n=>{const e={},a=(s,o)=>{const r=e[s]||new Set,i=new RegExp("^"+gz(r)+"$","iu");o.match(i)||(r.add(Yd(o)),e[s]=r)};for(let s of Yue(n))a(s.folded,s.folded),a(s.folded,s.composed);return e},Jue=n=>{const e=Que(n),a={};let s=[];for(let r in e){let i=e[r];i&&(a[r]=gz(i)),r.length>1&&s.push(Yd(r))}s.sort((r,i)=>i.length-r.length);const o=p9(s);return bz=new RegExp("^"+o,"u"),a},e1e=(n,e=1)=>{let a=0;return n=n.map(s=>(wL[s]&&(a+=s.length),wL[s]||s)),a>=e?_z(n):""},t1e=(n,e=1)=>(e=Math.max(e,n.length-1),p9(kz(n).map(a=>e1e(a,e)))),VU=(n,e=!0)=>{let a=n.length>1?1:0;return p9(n.map(s=>{let o=[];const r=e?s.length():s.length()-1;for(let i=0;i<r;i++)o.push(t1e(s.substrs[i]||"",a));return _z(o)}))},a1e=(n,e)=>{for(const a of e){if(a.start!=n.start||a.end!=n.end||a.substrs.join("")!==n.substrs.join(""))continue;let s=n.parts;const o=i=>{for(const u of s){if(u.start===i.start&&u.substr===i.substr)return!1;if(!(i.length==1||u.length==1)&&(i.start<u.start&&i.end>u.start||u.start<i.start&&u.end>i.start))return!0}return!1};if(!(a.parts.filter(o).length>0))return!0}return!1};class ML{constructor(){this.parts=[],this.substrs=[],this.start=0,this.end=0}add(e){e&&(this.parts.push(e),this.substrs.push(e.substr),this.start=Math.min(e.start,this.start),this.end=Math.max(e.end,this.end))}last(){return this.parts[this.parts.length-1]}length(){return this.parts.length}clone(e,a){let s=new ML,o=JSON.parse(JSON.stringify(this.parts)),r=o.pop();for(const h of o)s.add(h);let i=a.substr.substring(0,e-r.start),u=i.length;return s.add({start:r.start,end:r.start+u,length:u,substr:i}),s}}const n1e=n=>{Kue(),n=xL(n);let e="",a=[new ML];for(let s=0;s<n.length;s++){let r=n.substring(s).match(bz);const i=n.substring(s,s+1),u=r?r[0]:null;let h=[],m=new Set;for(const p of a){const b=p.last();if(!b||b.length==1||b.end<=s)if(u){const x=u.length;p.add({start:s,end:s+x,length:x,substr:u}),m.add("1")}else p.add({start:s,end:s+1,length:1,substr:i}),m.add("2");else if(u){let x=p.clone(s,b);const w=u.length;x.add({start:s,end:s+w,length:w,substr:u}),h.push(x)}else m.add("3")}if(h.length>0){h=h.sort((p,b)=>p.length()-b.length());for(let p of h)a1e(p,a)||a.push(p);continue}if(s>0&&m.size==1&&!m.has("3")){e+=VU(a,!1);let p=new ML;const b=a[0];b&&p.add(b.last()),a=[p]}}return e+=VU(a,!0),e};/*! sifter.js | https://github.com/orchidjs/sifter.js | Apache License (v2) */const s1e=(n,e)=>{if(n)return n[e]},o1e=(n,e)=>{if(n){for(var a,s=e.split(".");(a=s.shift())&&(n=n[a]););return n}},uA=(n,e,a)=>{var s,o;return!n||(n=n+"",e.regex==null)||(o=n.search(e.regex),o===-1)?0:(s=e.string.length/n.length,o===0&&(s+=.5),s*a)},pA=(n,e)=>{var a=n[e];if(typeof a=="function")return a;a&&!Array.isArray(a)&&(n[e]=[a])},Kn=(n,e)=>{if(Array.isArray(n))n.forEach(e);else for(var a in n)n.hasOwnProperty(a)&&e(n[a],a)},r1e=(n,e)=>typeof n=="number"&&typeof e=="number"?n>e?1:n<e?-1:0:(n=xL(n+"").toLowerCase(),e=xL(e+"").toLowerCase(),n>e?1:e>n?-1:0);/*! sifter.js | https://github.com/orchidjs/sifter.js | Apache License (v2) */class i1e{constructor(e,a){this.items=void 0,this.settings=void 0,this.items=e,this.settings=a||{diacritics:!0}}tokenize(e,a,s){if(!e||!e.length)return[];const o=[],r=e.split(/\s+/);var i;return s&&(i=new RegExp("^("+Object.keys(s).map(Yd).join("|")+"):(.*)$")),r.forEach(u=>{let h,m=null,p=null;i&&(h=u.match(i))&&(m=h[1],u=h[2]),u.length>0&&(this.settings.diacritics?p=n1e(u)||null:p=Yd(u),p&&a&&(p="\\b"+p)),o.push({string:u,regex:p?new RegExp(p,"iu"):null,field:m})}),o}getScoreFunction(e,a){var s=this.prepareSearch(e,a);return this._getScoreFunction(s)}_getScoreFunction(e){const a=e.tokens,s=a.length;if(!s)return function(){return 0};const o=e.options.fields,r=e.weights,i=o.length,u=e.getAttrFn;if(!i)return function(){return 1};const h=function(){return i===1?function(m,p){const b=o[0].field;return uA(u(p,b),m,r[b]||1)}:function(m,p){var b=0;if(m.field){const x=u(p,m.field);!m.regex&&x?b+=1/i:b+=uA(x,m,1)}else Kn(r,(x,w)=>{b+=uA(u(p,w),m,x)});return b/i}}();return s===1?function(m){return h(a[0],m)}:e.options.conjunction==="and"?function(m){var p,b=0;for(let x of a){if(p=h(x,m),p<=0)return 0;b+=p}return b/s}:function(m){var p=0;return Kn(a,b=>{p+=h(b,m)}),p/s}}getSortFunction(e,a){var s=this.prepareSearch(e,a);return this._getSortFunction(s)}_getSortFunction(e){var a,s=[];const o=this,r=e.options,i=!e.query&&r.sort_empty?r.sort_empty:r.sort;if(typeof i=="function")return i.bind(this);const u=function(p,b){return p==="$score"?b.score:e.getAttrFn(o.items[b.id],p)};if(i)for(let m of i)(e.query||m.field!=="$score")&&s.push(m);if(e.query){a=!0;for(let m of s)if(m.field==="$score"){a=!1;break}a&&s.unshift({field:"$score",direction:"desc"})}else s=s.filter(m=>m.field!=="$score");return s.length?function(m,p){var b,x;for(let w of s)if(x=w.field,b=(w.direction==="desc"?-1:1)*r1e(u(x,m),u(x,p)),b)return b;return 0}:null}prepareSearch(e,a){const s={};var o=Object.assign({},a);if(pA(o,"sort"),pA(o,"sort_empty"),o.fields){pA(o,"fields");const r=[];o.fields.forEach(i=>{typeof i=="string"&&(i={field:i,weight:1}),r.push(i),s[i.field]="weight"in i?i.weight:1}),o.fields=r}return{options:o,query:e.toLowerCase().trim(),tokens:this.tokenize(e,o.respect_word_boundaries,s),total:0,items:[],weights:s,getAttrFn:o.nesting?o1e:s1e}}search(e,a){var s=this,o,r;r=this.prepareSearch(e,a),a=r.options,e=r.query;const i=a.score||s._getScoreFunction(r);e.length?Kn(s.items,(h,m)=>{o=i(h),(a.filter===!1||o>0)&&r.items.push({score:o,id:m})}):Kn(s.items,(h,m)=>{r.items.push({score:1,id:m})});const u=s._getSortFunction(r);return u&&r.items.sort(u),r.total=r.items.length,typeof a.limit=="number"&&(r.items=r.items.slice(0,a.limit)),r}}const pc=(n,e)=>{if(Array.isArray(n))n.forEach(e);else for(var a in n)n.hasOwnProperty(a)&&e(n[a],a)},In=n=>{if(n.jquery)return n[0];if(n instanceof HTMLElement)return n;if(wz(n)){var e=document.createElement("template");return e.innerHTML=n.trim(),e.content.firstChild}return document.querySelector(n)},wz=n=>typeof n=="string"&&n.indexOf("<")>-1,l1e=n=>n.replace(/['"\\]/g,"\\$&"),hA=(n,e)=>{var a=document.createEvent("HTMLEvents");a.initEvent(e,!0,!1),n.dispatchEvent(a)},S1=(n,e)=>{Object.assign(n.style,e)},Gn=(n,...e)=>{var a=xz(e);n=Mz(n),n.map(s=>{a.map(o=>{s.classList.add(o)})})},Ko=(n,...e)=>{var a=xz(e);n=Mz(n),n.map(s=>{a.map(o=>{s.classList.remove(o)})})},xz=n=>{var e=[];return pc(n,a=>{typeof a=="string"&&(a=a.trim().split(/[\11\12\14\15\40]/)),Array.isArray(a)&&(e=e.concat(a))}),e.filter(Boolean)},Mz=n=>(Array.isArray(n)||(n=[n]),n),nL=(n,e,a)=>{if(!(a&&!a.contains(n)))for(;n&&n.matches;){if(n.matches(e))return n;n=n.parentNode}},UU=(n,e=0)=>e>0?n[n.length-1]:n[0],c1e=n=>Object.keys(n).length===0,CL=(n,e)=>{if(!n)return-1;e=e||n.nodeName;for(var a=0;n=n.previousElementSibling;)n.matches(e)&&a++;return a},za=(n,e)=>{pc(e,(a,s)=>{a==null?n.removeAttribute(s):n.setAttribute(s,""+a)})},IE=(n,e)=>{n.parentNode&&n.parentNode.replaceChild(e,n)},d1e=(n,e)=>{if(e===null)return;if(typeof e=="string"){if(!e.length)return;e=new RegExp(e,"i")}const a=r=>{var i=r.data.match(e);if(i&&r.data.length>0){var u=document.createElement("span");u.className="highlight";var h=r.splitText(i.index);h.splitText(i[0].length);var m=h.cloneNode(!0);return u.appendChild(m),IE(h,u),1}return 0},s=r=>{r.nodeType===1&&r.childNodes&&!/(script|style)/i.test(r.tagName)&&(r.className!=="highlight"||r.tagName!=="SPAN")&&Array.from(r.childNodes).forEach(i=>{o(i)})},o=r=>r.nodeType===3?a(r):(s(r),0);o(n)},u1e=n=>{var e=n.querySelectorAll("span.highlight");Array.prototype.forEach.call(e,function(a){var s=a.parentNode;s.replaceChild(a.firstChild,a),s.normalize()})},p1e=65,h1e=13,Cz=27,LE=37,f1e=38,Sz=39,m1e=40,FU=8,v1e=46,$E=9,y1e=typeof navigator>"u"?!1:/Mac/.test(navigator.userAgent),I1=y1e?"metaKey":"ctrlKey";var jU={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,refreshThrottle:300,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,shouldLoad:function(n){return n.length>0},render:{}};const Ds=n=>typeof n>"u"||n===null?null:sL(n),sL=n=>typeof n=="boolean"?n?"1":"0":n+"",oL=n=>(n+"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),_1e=(n,e)=>e>0?setTimeout(n,e):(n.call(null),null),g1e=(n,e)=>{var a;return function(s,o){var r=this;a&&(r.loading=Math.max(r.loading-1,0),clearTimeout(a)),a=setTimeout(function(){a=null,r.loadedSearches[s]=!0,n.call(r,s,o)},e)}},HU=(n,e,a)=>{var s,o=n.trigger,r={};n.trigger=function(){var i=arguments[0];if(e.indexOf(i)!==-1)r[i]=arguments;else return o.apply(n,arguments)},a.apply(n,[]),n.trigger=o;for(s of e)s in r&&o.apply(n,r[s])},k1e=n=>({start:n.selectionStart||0,length:(n.selectionEnd||0)-(n.selectionStart||0)}),La=(n,e=!1)=>{n&&(n.preventDefault(),e&&n.stopPropagation())},Aa=(n,e,a,s)=>{n.addEventListener(e,a,s)},yi=(n,e)=>{if(!e||!e[n])return!1;var a=(e.altKey?1:0)+(e.ctrlKey?1:0)+(e.shiftKey?1:0)+(e.metaKey?1:0);return a===1},fA=(n,e)=>{const a=n.getAttribute("id");return a||(n.setAttribute("id",e),e)},NU=n=>n.replace(/[\\"']/g,"\\$&"),_i=(n,e)=>{e&&n.append(e)};function zU(n,e){var a=Object.assign({},jU,e),s=a.dataAttr,o=a.labelField,r=a.valueField,i=a.disabledField,u=a.optgroupField,h=a.optgroupLabelField,m=a.optgroupValueField,p=n.tagName.toLowerCase(),b=n.getAttribute("placeholder")||n.getAttribute("data-placeholder");if(!b&&!a.allowEmptyOption){let D=n.querySelector('option[value=""]');D&&(b=D.textContent)}var x={placeholder:b,options:[],optgroups:[],items:[],maxItems:null},w=()=>{var D,V=x.options,R={},E=1;let P=0;var S=g=>{var v=Object.assign({},g.dataset),T=s&&v[s];return typeof T=="string"&&T.length&&(v=Object.assign(v,JSON.parse(T))),v},C=(g,v)=>{var T=Ds(g.value);if(T!=null&&!(!T&&!a.allowEmptyOption)){if(R.hasOwnProperty(T)){if(v){var j=R[T][u];j?Array.isArray(j)?j.push(v):R[T][u]=[j,v]:R[T][u]=v}}else{var B=S(g);B[o]=B[o]||g.textContent,B[r]=B[r]||T,B[i]=B[i]||g.disabled,B[u]=B[u]||v,B.$option=g,B.$order=B.$order||++P,R[T]=B,V.push(B)}g.selected&&x.items.push(T)}},M=g=>{var v,T;T=S(g),T[h]=T[h]||g.getAttribute("label")||"",T[m]=T[m]||E++,T[i]=T[i]||g.disabled,T.$order=T.$order||++P,x.optgroups.push(T),v=T[m],pc(g.children,j=>{C(j,v)})};x.maxItems=n.hasAttribute("multiple")?null:1,pc(n.children,g=>{D=g.tagName.toLowerCase(),D==="optgroup"?M(g):D==="option"&&C(g)})},$=()=>{const D=n.getAttribute(s);if(D)x.options=JSON.parse(D),pc(x.options,R=>{x.items.push(R[r])});else{var V=n.value.trim()||"";if(!a.allowEmptyOption&&!V.length)return;const R=V.split(a.delimiter);pc(R,E=>{const P={};P[o]=E,P[r]=E,x.options.push(P)}),x.items=R}};return p==="select"?w():$(),Object.assign({},jU,x,e)}var BU=0;class ls extends Hue(jue){constructor(e,a){super(),this.control_input=void 0,this.wrapper=void 0,this.dropdown=void 0,this.control=void 0,this.dropdown_content=void 0,this.focus_node=void 0,this.order=0,this.settings=void 0,this.input=void 0,this.tabIndex=void 0,this.is_select_tag=void 0,this.rtl=void 0,this.inputId=void 0,this._destroy=void 0,this.sifter=void 0,this.isOpen=!1,this.isDisabled=!1,this.isReadOnly=!1,this.isRequired=void 0,this.isInvalid=!1,this.isValid=!0,this.isLocked=!1,this.isFocused=!1,this.isInputHidden=!1,this.isSetup=!1,this.ignoreFocus=!1,this.ignoreHover=!1,this.hasOptions=!1,this.currentResults=void 0,this.lastValue="",this.caretPos=0,this.loading=0,this.loadedSearches={},this.activeOption=null,this.activeItems=[],this.optgroups={},this.options={},this.userOptions={},this.items=[],this.refreshTimeout=null,BU++;var s,o=In(e);if(o.tomselect)throw new Error("Tom Select already initialized on this element");o.tomselect=this;var r=window.getComputedStyle&&window.getComputedStyle(o,null);s=r.getPropertyValue("direction");const i=zU(o,a);this.settings=i,this.input=o,this.tabIndex=o.tabIndex||0,this.is_select_tag=o.tagName.toLowerCase()==="select",this.rtl=/rtl/i.test(s),this.inputId=fA(o,"tomselect-"+BU),this.isRequired=o.required,this.sifter=new i1e(this.options,{diacritics:i.diacritics}),i.mode=i.mode||(i.maxItems===1?"single":"multi"),typeof i.hideSelected!="boolean"&&(i.hideSelected=i.mode==="multi"),typeof i.hidePlaceholder!="boolean"&&(i.hidePlaceholder=i.mode!=="multi");var u=i.createFilter;typeof u!="function"&&(typeof u=="string"&&(u=new RegExp(u)),u instanceof RegExp?i.createFilter=V=>u.test(V):i.createFilter=V=>this.settings.duplicates||!this.options[V]),this.initializePlugins(i.plugins),this.setupCallbacks(),this.setupTemplates();const h=In("<div>"),m=In("<div>"),p=this._render("dropdown"),b=In('<div role="listbox" tabindex="-1">'),x=this.input.getAttribute("class")||"",w=i.mode;var $;if(Gn(h,i.wrapperClass,x,w),Gn(m,i.controlClass),_i(h,m),Gn(p,i.dropdownClass,w),i.copyClassesToDropdown&&Gn(p,x),Gn(b,i.dropdownContentClass),_i(p,b),In(i.dropdownParent||h).appendChild(p),wz(i.controlInput)){$=In(i.controlInput);var D=["autocorrect","autocapitalize","autocomplete","spellcheck"];Kn(D,V=>{o.getAttribute(V)&&za($,{[V]:o.getAttribute(V)})}),$.tabIndex=-1,m.appendChild($),this.focus_node=$}else i.controlInput?($=In(i.controlInput),this.focus_node=$):($=In("<input/>"),this.focus_node=m);this.wrapper=h,this.dropdown=p,this.dropdown_content=b,this.control=m,this.control_input=$,this.setup()}setup(){const e=this,a=e.settings,s=e.control_input,o=e.dropdown,r=e.dropdown_content,i=e.wrapper,u=e.control,h=e.input,m=e.focus_node,p={passive:!0},b=e.inputId+"-ts-dropdown";za(r,{id:b}),za(m,{role:"combobox","aria-haspopup":"listbox","aria-expanded":"false","aria-controls":b});const x=fA(m,e.inputId+"-ts-control"),w="label[for='"+l1e(e.inputId)+"']",$=document.querySelector(w),D=e.focus.bind(e);if($){Aa($,"click",D),za($,{for:x});const E=fA($,e.inputId+"-ts-label");za(m,{"aria-labelledby":E}),za(r,{"aria-labelledby":E})}if(i.style.width=h.style.width,e.plugins.names.length){const E="plugin-"+e.plugins.names.join(" plugin-");Gn([i,o],E)}(a.maxItems===null||a.maxItems>1)&&e.is_select_tag&&za(h,{multiple:"multiple"}),a.placeholder&&za(s,{placeholder:a.placeholder}),!a.splitOn&&a.delimiter&&(a.splitOn=new RegExp("\\s*"+Yd(a.delimiter)+"+\\s*")),a.load&&a.loadThrottle&&(a.load=g1e(a.load,a.loadThrottle)),Aa(o,"mousemove",()=>{e.ignoreHover=!1}),Aa(o,"mouseenter",E=>{var P=nL(E.target,"[data-selectable]",o);P&&e.onOptionHover(E,P)},{capture:!0}),Aa(o,"click",E=>{const P=nL(E.target,"[data-selectable]");P&&(e.onOptionSelect(E,P),La(E,!0))}),Aa(u,"click",E=>{var P=nL(E.target,"[data-ts-item]",u);if(P&&e.onItemSelect(E,P)){La(E,!0);return}s.value==""&&(e.onClick(),La(E,!0))}),Aa(m,"keydown",E=>e.onKeyDown(E)),Aa(s,"keypress",E=>e.onKeyPress(E)),Aa(s,"input",E=>e.onInput(E)),Aa(m,"blur",E=>e.onBlur(E)),Aa(m,"focus",E=>e.onFocus(E)),Aa(s,"paste",E=>e.onPaste(E));const V=E=>{const P=E.composedPath()[0];if(!i.contains(P)&&!o.contains(P)){e.isFocused&&e.blur(),e.inputState();return}P==s&&e.isOpen?E.stopPropagation():La(E,!0)},R=()=>{e.isOpen&&e.positionDropdown()};Aa(document,"mousedown",V),Aa(window,"scroll",R,p),Aa(window,"resize",R,p),this._destroy=()=>{document.removeEventListener("mousedown",V),window.removeEventListener("scroll",R),window.removeEventListener("resize",R),$&&$.removeEventListener("click",D)},this.revertSettings={innerHTML:h.innerHTML,tabIndex:h.tabIndex},h.tabIndex=-1,h.insertAdjacentElement("afterend",e.wrapper),e.sync(!1),a.items=[],delete a.optgroups,delete a.options,Aa(h,"invalid",()=>{e.isValid&&(e.isValid=!1,e.isInvalid=!0,e.refreshState())}),e.updateOriginalInput(),e.refreshItems(),e.close(!1),e.inputState(),e.isSetup=!0,h.disabled?e.disable():h.readOnly?e.setReadOnly(!0):e.enable(),e.on("change",this.onChange),Gn(h,"tomselected","ts-hidden-accessible"),e.trigger("initialize"),a.preload===!0&&e.preload()}setupOptions(e=[],a=[]){this.addOptions(e),Kn(a,s=>{this.registerOptionGroup(s)})}setupTemplates(){var e=this,a=e.settings.labelField,s=e.settings.optgroupLabelField,o={optgroup:r=>{let i=document.createElement("div");return i.className="optgroup",i.appendChild(r.options),i},optgroup_header:(r,i)=>'<div class="optgroup-header">'+i(r[s])+"</div>",option:(r,i)=>"<div>"+i(r[a])+"</div>",item:(r,i)=>"<div>"+i(r[a])+"</div>",option_create:(r,i)=>'<div class="create">Add <strong>'+i(r.input)+"</strong>&hellip;</div>",no_results:()=>'<div class="no-results">No results found</div>',loading:()=>'<div class="spinner"></div>',not_loading:()=>{},dropdown:()=>"<div></div>"};e.settings.render=Object.assign({},o,e.settings.render)}setupCallbacks(){var e,a,s={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",item_select:"onItemSelect",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur"};for(e in s)a=this.settings[s[e]],a&&this.on(e,a)}sync(e=!0){const a=this,s=e?zU(a.input,{delimiter:a.settings.delimiter}):a.settings;a.setupOptions(s.options,s.optgroups),a.setValue(s.items||[],!0),a.lastQuery=null}onClick(){var e=this;if(e.activeItems.length>0){e.clearActiveItems(),e.focus();return}e.isFocused&&e.isOpen?e.blur():e.focus()}onMouseDown(){}onChange(){hA(this.input,"input"),hA(this.input,"change")}onPaste(e){var a=this;if(a.isInputHidden||a.isLocked){La(e);return}a.settings.splitOn&&setTimeout(()=>{var s=a.inputValue();if(s.match(a.settings.splitOn)){var o=s.trim().split(a.settings.splitOn);Kn(o,r=>{Ds(r)&&(this.options[r]?a.addItem(r):a.createItem(r))})}},0)}onKeyPress(e){var a=this;if(a.isLocked){La(e);return}var s=String.fromCharCode(e.keyCode||e.which);if(a.settings.create&&a.settings.mode==="multi"&&s===a.settings.delimiter){a.createItem(),La(e);return}}onKeyDown(e){var a=this;if(a.ignoreHover=!0,a.isLocked){e.keyCode!==$E&&La(e);return}switch(e.keyCode){case p1e:if(yi(I1,e)&&a.control_input.value==""){La(e),a.selectAll();return}break;case Cz:a.isOpen&&(La(e,!0),a.close()),a.clearActiveItems();return;case m1e:if(!a.isOpen&&a.hasOptions)a.open();else if(a.activeOption){let s=a.getAdjacent(a.activeOption,1);s&&a.setActiveOption(s)}La(e);return;case f1e:if(a.activeOption){let s=a.getAdjacent(a.activeOption,-1);s&&a.setActiveOption(s)}La(e);return;case h1e:a.canSelect(a.activeOption)?(a.onOptionSelect(e,a.activeOption),La(e)):(a.settings.create&&a.createItem()||document.activeElement==a.control_input&&a.isOpen)&&La(e);return;case LE:a.advanceSelection(-1,e);return;case Sz:a.advanceSelection(1,e);return;case $E:a.settings.selectOnTab&&(a.canSelect(a.activeOption)&&(a.onOptionSelect(e,a.activeOption),La(e)),a.settings.create&&a.createItem()&&La(e));return;case FU:case v1e:a.deleteSelection(e);return}a.isInputHidden&&!yi(I1,e)&&La(e)}onInput(e){if(this.isLocked)return;const a=this.inputValue();if(this.lastValue!==a){if(this.lastValue=a,a==""){this._onInput();return}this.refreshTimeout&&clearTimeout(this.refreshTimeout),this.refreshTimeout=_1e(()=>{this.refreshTimeout=null,this._onInput()},this.settings.refreshThrottle)}}_onInput(){const e=this.lastValue;this.settings.shouldLoad.call(this,e)&&this.load(e),this.refreshOptions(),this.trigger("type",e)}onOptionHover(e,a){this.ignoreHover||this.setActiveOption(a,!1)}onFocus(e){var a=this,s=a.isFocused;if(a.isDisabled||a.isReadOnly){a.blur(),La(e);return}a.ignoreFocus||(a.isFocused=!0,a.settings.preload==="focus"&&a.preload(),s||a.trigger("focus"),a.activeItems.length||(a.inputState(),a.refreshOptions(!!a.settings.openOnFocus)),a.refreshState())}onBlur(e){if(document.hasFocus()!==!1){var a=this;if(a.isFocused){a.isFocused=!1,a.ignoreFocus=!1;var s=()=>{a.close(),a.setActiveItem(),a.setCaret(a.items.length),a.trigger("blur")};a.settings.create&&a.settings.createOnBlur?a.createItem(null,s):s()}}}onOptionSelect(e,a){var s,o=this;a.parentElement&&a.parentElement.matches("[data-disabled]")||(a.classList.contains("create")?o.createItem(null,()=>{o.settings.closeAfterSelect&&o.close()}):(s=a.dataset.value,typeof s<"u"&&(o.lastQuery=null,o.addItem(s),o.settings.closeAfterSelect&&o.close(),!o.settings.hideSelected&&e.type&&/click/.test(e.type)&&o.setActiveOption(a))))}canSelect(e){return!!(this.isOpen&&e&&this.dropdown_content.contains(e))}onItemSelect(e,a){var s=this;return!s.isLocked&&s.settings.mode==="multi"?(La(e),s.setActiveItem(a,e),!0):!1}canLoad(e){return!(!this.settings.load||this.loadedSearches.hasOwnProperty(e))}load(e){const a=this;if(!a.canLoad(e))return;Gn(a.wrapper,a.settings.loadingClass),a.loading++;const s=a.loadCallback.bind(a);a.settings.load.call(a,e,s)}loadCallback(e,a){const s=this;s.loading=Math.max(s.loading-1,0),s.lastQuery=null,s.clearActiveOption(),s.setupOptions(e,a),s.refreshOptions(s.isFocused&&!s.isInputHidden),s.loading||Ko(s.wrapper,s.settings.loadingClass),s.trigger("load",e,a)}preload(){var e=this.wrapper.classList;e.contains("preloaded")||(e.add("preloaded"),this.load(""))}setTextboxValue(e=""){var a=this.control_input,s=a.value!==e;s&&(a.value=e,hA(a,"update"),this.lastValue=e)}getValue(){return this.is_select_tag&&this.input.hasAttribute("multiple")?this.items:this.items.join(this.settings.delimiter)}setValue(e,a){var s=a?[]:["change"];HU(this,s,()=>{this.clear(a),this.addItems(e,a)})}setMaxItems(e){e===0&&(e=null),this.settings.maxItems=e,this.refreshState()}setActiveItem(e,a){var s=this,o,r,i,u,h,m;if(s.settings.mode!=="single"){if(!e){s.clearActiveItems(),s.isFocused&&s.inputState();return}if(o=a&&a.type.toLowerCase(),o==="click"&&yi("shiftKey",a)&&s.activeItems.length){for(m=s.getLastActive(),i=Array.prototype.indexOf.call(s.control.children,m),u=Array.prototype.indexOf.call(s.control.children,e),i>u&&(h=i,i=u,u=h),r=i;r<=u;r++)e=s.control.children[r],s.activeItems.indexOf(e)===-1&&s.setActiveItemClass(e);La(a)}else o==="click"&&yi(I1,a)||o==="keydown"&&yi("shiftKey",a)?e.classList.contains("active")?s.removeActiveItem(e):s.setActiveItemClass(e):(s.clearActiveItems(),s.setActiveItemClass(e));s.inputState(),s.isFocused||s.focus()}}setActiveItemClass(e){const a=this,s=a.control.querySelector(".last-active");s&&Ko(s,"last-active"),Gn(e,"active last-active"),a.trigger("item_select",e),a.activeItems.indexOf(e)==-1&&a.activeItems.push(e)}removeActiveItem(e){var a=this.activeItems.indexOf(e);this.activeItems.splice(a,1),Ko(e,"active")}clearActiveItems(){Ko(this.activeItems,"active"),this.activeItems=[]}setActiveOption(e,a=!0){e!==this.activeOption&&(this.clearActiveOption(),e&&(this.activeOption=e,za(this.focus_node,{"aria-activedescendant":e.getAttribute("id")}),za(e,{"aria-selected":"true"}),Gn(e,"active"),a&&this.scrollToOption(e)))}scrollToOption(e,a){if(!e)return;const s=this.dropdown_content,o=s.clientHeight,r=s.scrollTop||0,i=e.offsetHeight,u=e.getBoundingClientRect().top-s.getBoundingClientRect().top+r;u+i>o+r?this.scroll(u-o+i,a):u<r&&this.scroll(u,a)}scroll(e,a){const s=this.dropdown_content;a&&(s.style.scrollBehavior=a),s.scrollTop=e,s.style.scrollBehavior=""}clearActiveOption(){this.activeOption&&(Ko(this.activeOption,"active"),za(this.activeOption,{"aria-selected":null})),this.activeOption=null,za(this.focus_node,{"aria-activedescendant":null})}selectAll(){const e=this;if(e.settings.mode==="single")return;const a=e.controlChildren();a.length&&(e.inputState(),e.close(),e.activeItems=a,Kn(a,s=>{e.setActiveItemClass(s)}))}inputState(){var e=this;e.control.contains(e.control_input)&&(za(e.control_input,{placeholder:e.settings.placeholder}),e.activeItems.length>0||!e.isFocused&&e.settings.hidePlaceholder&&e.items.length>0?(e.setTextboxValue(),e.isInputHidden=!0):(e.settings.hidePlaceholder&&e.items.length>0&&za(e.control_input,{placeholder:""}),e.isInputHidden=!1),e.wrapper.classList.toggle("input-hidden",e.isInputHidden))}inputValue(){return this.control_input.value.trim()}focus(){var e=this;e.isDisabled||e.isReadOnly||(e.ignoreFocus=!0,e.control_input.offsetWidth?e.control_input.focus():e.focus_node.focus(),setTimeout(()=>{e.ignoreFocus=!1,e.onFocus()},0))}blur(){this.focus_node.blur(),this.onBlur()}getScoreFunction(e){return this.sifter.getScoreFunction(e,this.getSearchOptions())}getSearchOptions(){var e=this.settings,a=e.sortField;return typeof e.sortField=="string"&&(a=[{field:e.sortField}]),{fields:e.searchField,conjunction:e.searchConjunction,sort:a,nesting:e.nesting}}search(e){var a,s,o=this,r=this.getSearchOptions();if(o.settings.score&&(s=o.settings.score.call(o,e),typeof s!="function"))throw new Error('Tom Select "score" setting must be a function that returns a function');return e!==o.lastQuery?(o.lastQuery=e,a=o.sifter.search(e,Object.assign(r,{score:s})),o.currentResults=a):a=Object.assign({},o.currentResults),o.settings.hideSelected&&(a.items=a.items.filter(i=>{let u=Ds(i.id);return!(u&&o.items.indexOf(u)!==-1)})),a}refreshOptions(e=!0){var a,s,o,r,i,u,h,m,p,b;const x={},w=[];var $=this,D=$.inputValue();const V=D===$.lastQuery||D==""&&$.lastQuery==null;var R=$.search(D),E=null,P=$.settings.shouldOpen||!1,S=$.dropdown_content;V&&(E=$.activeOption,E&&(p=E.closest("[data-group]"))),r=R.items.length,typeof $.settings.maxOptions=="number"&&(r=Math.min(r,$.settings.maxOptions)),r>0&&(P=!0);const C=(g,v)=>{let T=x[g];if(T!==void 0){let B=w[T];if(B!==void 0)return[T,B.fragment]}let j=document.createDocumentFragment();return T=w.length,w.push({fragment:j,order:v,optgroup:g}),[T,j]};for(a=0;a<r;a++){let g=R.items[a];if(!g)continue;let v=g.id,T=$.options[v];if(T===void 0)continue;let j=sL(v),B=$.getOption(j,!0);for($.settings.hideSelected||B.classList.toggle("selected",$.items.includes(j)),i=T[$.settings.optgroupField]||"",u=Array.isArray(i)?i:[i],s=0,o=u&&u.length;s<o;s++){i=u[s];let oe=T.$order,be=$.optgroups[i];be===void 0?i="":oe=be.$order;const[$e,Le]=C(i,oe);s>0&&(B=B.cloneNode(!0),za(B,{id:T.$id+"-clone-"+s,"aria-selected":null}),B.classList.add("ts-cloned"),Ko(B,"active"),$.activeOption&&$.activeOption.dataset.value==v&&p&&p.dataset.group===i.toString()&&(E=B)),Le.appendChild(B),i!=""&&(x[i]=$e)}}$.settings.lockOptgroupOrder&&w.sort((g,v)=>g.order-v.order),h=document.createDocumentFragment(),Kn(w,g=>{let v=g.fragment,T=g.optgroup;if(!v||!v.children.length)return;let j=$.optgroups[T];if(j!==void 0){let B=document.createDocumentFragment(),oe=$.render("optgroup_header",j);_i(B,oe),_i(B,v);let be=$.render("optgroup",{group:j,options:B});_i(h,be)}else _i(h,v)}),S.innerHTML="",_i(S,h),$.settings.highlight&&(u1e(S),R.query.length&&R.tokens.length&&Kn(R.tokens,g=>{d1e(S,g.regex)}));var M=g=>{let v=$.render(g,{input:D});return v&&(P=!0,S.insertBefore(v,S.firstChild)),v};if($.loading?M("loading"):$.settings.shouldLoad.call($,D)?R.items.length===0&&M("no_results"):M("not_loading"),m=$.canCreate(D),m&&(b=M("option_create")),$.hasOptions=R.items.length>0||m,P){if(R.items.length>0){if(!E&&$.settings.mode==="single"&&$.items[0]!=null&&(E=$.getOption($.items[0])),!S.contains(E)){let g=0;b&&!$.settings.addPrecedence&&(g=1),E=$.selectable()[g]}}else b&&(E=b);e&&!$.isOpen&&($.open(),$.scrollToOption(E,"auto")),$.setActiveOption(E)}else $.clearActiveOption(),e&&$.isOpen&&$.close(!1)}selectable(){return this.dropdown_content.querySelectorAll("[data-selectable]")}addOption(e,a=!1){const s=this;if(Array.isArray(e))return s.addOptions(e,a),!1;const o=Ds(e[s.settings.valueField]);return o===null||s.options.hasOwnProperty(o)?!1:(e.$order=e.$order||++s.order,e.$id=s.inputId+"-opt-"+e.$order,s.options[o]=e,s.lastQuery=null,a&&(s.userOptions[o]=a,s.trigger("option_add",o,e)),o)}addOptions(e,a=!1){Kn(e,s=>{this.addOption(s,a)})}registerOption(e){return this.addOption(e)}registerOptionGroup(e){var a=Ds(e[this.settings.optgroupValueField]);return a===null?!1:(e.$order=e.$order||++this.order,this.optgroups[a]=e,a)}addOptionGroup(e,a){var s;a[this.settings.optgroupValueField]=e,(s=this.registerOptionGroup(a))&&this.trigger("optgroup_add",s,a)}removeOptionGroup(e){this.optgroups.hasOwnProperty(e)&&(delete this.optgroups[e],this.clearCache(),this.trigger("optgroup_remove",e))}clearOptionGroups(){this.optgroups={},this.clearCache(),this.trigger("optgroup_clear")}updateOption(e,a){const s=this;var o,r;const i=Ds(e),u=Ds(a[s.settings.valueField]);if(i===null)return;const h=s.options[i];if(h==null)return;if(typeof u!="string")throw new Error("Value must be set in option data");const m=s.getOption(i),p=s.getItem(i);if(a.$order=a.$order||h.$order,delete s.options[i],s.uncacheValue(u),s.options[u]=a,m){if(s.dropdown_content.contains(m)){const b=s._render("option",a);IE(m,b),s.activeOption===m&&s.setActiveOption(b)}m.remove()}p&&(r=s.items.indexOf(i),r!==-1&&s.items.splice(r,1,u),o=s._render("item",a),p.classList.contains("active")&&Gn(o,"active"),IE(p,o)),s.lastQuery=null}removeOption(e,a){const s=this;e=sL(e),s.uncacheValue(e),delete s.userOptions[e],delete s.options[e],s.lastQuery=null,s.trigger("option_remove",e),s.removeItem(e,a)}clearOptions(e){const a=(e||this.clearFilter).bind(this);this.loadedSearches={},this.userOptions={},this.clearCache();const s={};Kn(this.options,(o,r)=>{a(o,r)&&(s[r]=o)}),this.options=this.sifter.items=s,this.lastQuery=null,this.trigger("option_clear")}clearFilter(e,a){return this.items.indexOf(a)>=0}getOption(e,a=!1){const s=Ds(e);if(s===null)return null;const o=this.options[s];if(o!=null){if(o.$div)return o.$div;if(a)return this._render("option",o)}return null}getAdjacent(e,a,s="option"){var o=this,r;if(!e)return null;s=="item"?r=o.controlChildren():r=o.dropdown_content.querySelectorAll("[data-selectable]");for(let i=0;i<r.length;i++)if(r[i]==e)return a>0?r[i+1]:r[i-1];return null}getItem(e){if(typeof e=="object")return e;var a=Ds(e);return a!==null?this.control.querySelector(`[data-value="${NU(a)}"]`):null}addItems(e,a){var s=this,o=Array.isArray(e)?e:[e];o=o.filter(i=>s.items.indexOf(i)===-1);const r=o[o.length-1];o.forEach(i=>{s.isPending=i!==r,s.addItem(i,a)})}addItem(e,a){var s=a?[]:["change","dropdown_close"];HU(this,s,()=>{var o,r;const i=this,u=i.settings.mode,h=Ds(e);if(!(h&&i.items.indexOf(h)!==-1&&(u==="single"&&i.close(),u==="single"||!i.settings.duplicates))&&!(h===null||!i.options.hasOwnProperty(h))&&(u==="single"&&i.clear(a),!(u==="multi"&&i.isFull()))){if(o=i._render("item",i.options[h]),i.control.contains(o)&&(o=o.cloneNode(!0)),r=i.isFull(),i.items.splice(i.caretPos,0,h),i.insertAtCaret(o),i.isSetup){if(!i.isPending&&i.settings.hideSelected){let m=i.getOption(h),p=i.getAdjacent(m,1);p&&i.setActiveOption(p)}!i.isPending&&!i.settings.closeAfterSelect&&i.refreshOptions(i.isFocused&&u!=="single"),i.settings.closeAfterSelect!=!1&&i.isFull()?i.close():i.isPending||i.positionDropdown(),i.trigger("item_add",h,o),i.isPending||i.updateOriginalInput({silent:a})}(!i.isPending||!r&&i.isFull())&&(i.inputState(),i.refreshState())}})}removeItem(e=null,a){const s=this;if(e=s.getItem(e),!e)return;var o,r;const i=e.dataset.value;o=CL(e),e.remove(),e.classList.contains("active")&&(r=s.activeItems.indexOf(e),s.activeItems.splice(r,1),Ko(e,"active")),s.items.splice(o,1),s.lastQuery=null,!s.settings.persist&&s.userOptions.hasOwnProperty(i)&&s.removeOption(i,a),o<s.caretPos&&s.setCaret(s.caretPos-1),s.updateOriginalInput({silent:a}),s.refreshState(),s.positionDropdown(),s.trigger("item_remove",i,e)}createItem(e=null,a=()=>{}){arguments.length===3&&(a=arguments[2]),typeof a!="function"&&(a=()=>{});var s=this,o=s.caretPos,r;if(e=e||s.inputValue(),!s.canCreate(e))return a(),!1;s.lock();var i=!1,u=h=>{if(s.unlock(),!h||typeof h!="object")return a();var m=Ds(h[s.settings.valueField]);if(typeof m!="string")return a();s.setTextboxValue(),s.addOption(h,!0),s.setCaret(o),s.addItem(m),a(h),i=!0};return typeof s.settings.create=="function"?r=s.settings.create.call(this,e,u):r={[s.settings.labelField]:e,[s.settings.valueField]:e},i||u(r),!0}refreshItems(){var e=this;e.lastQuery=null,e.isSetup&&e.addItems(e.items),e.updateOriginalInput(),e.refreshState()}refreshState(){const e=this;e.refreshValidityState();const a=e.isFull(),s=e.isLocked;e.wrapper.classList.toggle("rtl",e.rtl);const o=e.wrapper.classList;o.toggle("focus",e.isFocused),o.toggle("disabled",e.isDisabled),o.toggle("readonly",e.isReadOnly),o.toggle("required",e.isRequired),o.toggle("invalid",!e.isValid),o.toggle("locked",s),o.toggle("full",a),o.toggle("input-active",e.isFocused&&!e.isInputHidden),o.toggle("dropdown-active",e.isOpen),o.toggle("has-options",c1e(e.options)),o.toggle("has-items",e.items.length>0)}refreshValidityState(){var e=this;e.input.validity&&(e.isValid=e.input.validity.valid,e.isInvalid=!e.isValid)}isFull(){return this.settings.maxItems!==null&&this.items.length>=this.settings.maxItems}updateOriginalInput(e={}){const a=this;var s,o;const r=a.input.querySelector('option[value=""]');if(a.is_select_tag){let m=function(p,b,x){return p||(p=In('<option value="'+oL(b)+'">'+oL(x)+"</option>")),p!=r&&a.input.append(p),u.push(p),(p!=r||h>0)&&(p.selected=!0),p};var i=m;const u=[],h=a.input.querySelectorAll("option:checked").length;a.input.querySelectorAll("option:checked").forEach(p=>{p.selected=!1}),a.items.length==0&&a.settings.mode=="single"?m(r,"",""):a.items.forEach(p=>{if(s=a.options[p],o=s[a.settings.labelField]||"",u.includes(s.$option)){const b=a.input.querySelector(`option[value="${NU(p)}"]:not(:checked)`);m(b,p,o)}else s.$option=m(s.$option,p,o)})}else a.input.value=a.getValue();a.isSetup&&(e.silent||a.trigger("change",a.getValue()))}open(){var e=this;e.isLocked||e.isOpen||e.settings.mode==="multi"&&e.isFull()||(e.isOpen=!0,za(e.focus_node,{"aria-expanded":"true"}),e.refreshState(),S1(e.dropdown,{visibility:"hidden",display:"block"}),e.positionDropdown(),S1(e.dropdown,{visibility:"visible",display:"block"}),e.focus(),e.trigger("dropdown_open",e.dropdown))}close(e=!0){var a=this,s=a.isOpen;e&&(a.setTextboxValue(),a.settings.mode==="single"&&a.items.length&&a.inputState()),a.isOpen=!1,za(a.focus_node,{"aria-expanded":"false"}),S1(a.dropdown,{display:"none"}),a.settings.hideSelected&&a.clearActiveOption(),a.refreshState(),s&&a.trigger("dropdown_close",a.dropdown)}positionDropdown(){if(this.settings.dropdownParent==="body"){var e=this.control,a=e.getBoundingClientRect(),s=e.offsetHeight+a.top+window.scrollY,o=a.left+window.scrollX;S1(this.dropdown,{width:a.width+"px",top:s+"px",left:o+"px"})}}clear(e){var a=this;if(a.items.length){var s=a.controlChildren();Kn(s,o=>{a.removeItem(o,!0)}),a.inputState(),e||a.updateOriginalInput(),a.trigger("clear")}}insertAtCaret(e){const a=this,s=a.caretPos,o=a.control;o.insertBefore(e,o.children[s]||null),a.setCaret(s+1)}deleteSelection(e){var a,s,o,r,i=this;a=e&&e.keyCode===FU?-1:1,s=k1e(i.control_input);const u=[];if(i.activeItems.length)r=UU(i.activeItems,a),o=CL(r),a>0&&o++,Kn(i.activeItems,h=>u.push(h));else if((i.isFocused||i.settings.mode==="single")&&i.items.length){const h=i.controlChildren();let m;a<0&&s.start===0&&s.length===0?m=h[i.caretPos-1]:a>0&&s.start===i.inputValue().length&&(m=h[i.caretPos]),m!==void 0&&u.push(m)}if(!i.shouldDelete(u,e))return!1;for(La(e,!0),typeof o<"u"&&i.setCaret(o);u.length;)i.removeItem(u.pop());return i.inputState(),i.positionDropdown(),i.refreshOptions(!1),!0}shouldDelete(e,a){const s=e.map(o=>o.dataset.value);return!(!s.length||typeof this.settings.onDelete=="function"&&this.settings.onDelete(s,a)===!1)}advanceSelection(e,a){var s,o,r=this;r.rtl&&(e*=-1),!r.inputValue().length&&(yi(I1,a)||yi("shiftKey",a)?(s=r.getLastActive(e),s?s.classList.contains("active")?o=r.getAdjacent(s,e,"item"):o=s:e>0?o=r.control_input.nextElementSibling:o=r.control_input.previousElementSibling,o&&(o.classList.contains("active")&&r.removeActiveItem(s),r.setActiveItemClass(o))):r.moveCaret(e))}moveCaret(e){}getLastActive(e){let a=this.control.querySelector(".last-active");if(a)return a;var s=this.control.querySelectorAll(".active");if(s)return UU(s,e)}setCaret(e){this.caretPos=this.items.length}controlChildren(){return Array.from(this.control.querySelectorAll("[data-ts-item]"))}lock(){this.setLocked(!0)}unlock(){this.setLocked(!1)}setLocked(e=this.isReadOnly||this.isDisabled){this.isLocked=e,this.refreshState()}disable(){this.setDisabled(!0),this.close()}enable(){this.setDisabled(!1)}setDisabled(e){this.focus_node.tabIndex=e?-1:this.tabIndex,this.isDisabled=e,this.input.disabled=e,this.control_input.disabled=e,this.setLocked()}setReadOnly(e){this.isReadOnly=e,this.input.readOnly=e,this.control_input.readOnly=e,this.setLocked()}destroy(){var e=this,a=e.revertSettings;e.trigger("destroy"),e.off(),e.wrapper.remove(),e.dropdown.remove(),e.input.innerHTML=a.innerHTML,e.input.tabIndex=a.tabIndex,Ko(e.input,"tomselected","ts-hidden-accessible"),e._destroy(),delete e.input.tomselect}render(e,a){var s,o;const r=this;if(typeof this.settings.render[e]!="function"||(o=r.settings.render[e].call(this,a,oL),!o))return null;if(o=In(o),e==="option"||e==="option_create"?a[r.settings.disabledField]?za(o,{"aria-disabled":"true"}):za(o,{"data-selectable":""}):e==="optgroup"&&(s=a.group[r.settings.optgroupValueField],za(o,{"data-group":s}),a.group[r.settings.disabledField]&&za(o,{"data-disabled":""})),e==="option"||e==="item"){const i=sL(a[r.settings.valueField]);za(o,{"data-value":i}),e==="item"?(Gn(o,r.settings.itemClass),za(o,{"data-ts-item":""})):(Gn(o,r.settings.optionClass),za(o,{role:"option",id:a.$id}),a.$div=o,r.options[i]=a)}return o}_render(e,a){const s=this.render(e,a);if(s==null)throw"HTMLElement expected";return s}clearCache(){Kn(this.options,e=>{e.$div&&(e.$div.remove(),delete e.$div)})}uncacheValue(e){const a=this.getOption(e);a&&a.remove()}canCreate(e){return this.settings.create&&e.length>0&&this.settings.createFilter.call(this,e)}hook(e,a,s){var o=this,r=o[a];o[a]=function(){var i,u;return e==="after"&&(i=r.apply(o,arguments)),u=s.apply(o,arguments),e==="instead"?u:(e==="before"&&(i=r.apply(o,arguments)),i)}}}function b1e(){Aa(this.input,"change",()=>{this.sync()})}function w1e(n){var e=this,a=e.onOptionSelect;e.settings.hideSelected=!1;const s=Object.assign({className:"tomselect-checkbox",checkedClassNames:void 0,uncheckedClassNames:void 0},n);var o=function(u,h){h?(u.checked=!0,s.uncheckedClassNames&&u.classList.remove(...s.uncheckedClassNames),s.checkedClassNames&&u.classList.add(...s.checkedClassNames)):(u.checked=!1,s.checkedClassNames&&u.classList.remove(...s.checkedClassNames),s.uncheckedClassNames&&u.classList.add(...s.uncheckedClassNames))},r=function(u){setTimeout(()=>{var h=u.querySelector("input."+s.className);h instanceof HTMLInputElement&&o(h,u.classList.contains("selected"))},1)};e.hook("after","setupTemplates",()=>{var i=e.settings.render.option;e.settings.render.option=(u,h)=>{var m=In(i.call(e,u,h)),p=document.createElement("input");s.className&&p.classList.add(s.className),p.addEventListener("click",function(x){La(x)}),p.type="checkbox";const b=Ds(u[e.settings.valueField]);return o(p,!!(b&&e.items.indexOf(b)>-1)),m.prepend(p),m}}),e.on("item_remove",i=>{var u=e.getOption(i);u&&(u.classList.remove("selected"),r(u))}),e.on("item_add",i=>{var u=e.getOption(i);u&&r(u)}),e.hook("instead","onOptionSelect",(i,u)=>{if(u.classList.contains("selected")){u.classList.remove("selected"),e.removeItem(u.dataset.value),e.refreshOptions(),La(i,!0);return}a.call(e,i,u),r(u)})}function x1e(n){const e=this,a=Object.assign({className:"clear-button",title:"Clear All",html:s=>`<div class="${s.className}" title="${s.title}">&#10799;</div>`},n);e.on("initialize",()=>{var s=In(a.html(a));s.addEventListener("click",o=>{e.isLocked||(e.clear(),e.settings.mode==="single"&&e.settings.allowEmptyOption&&e.addItem(""),o.preventDefault(),o.stopPropagation())}),e.control.appendChild(s)})}const M1e=(n,e)=>{var a;(a=n.parentNode)==null||a.insertBefore(e,n.nextSibling)},C1e=(n,e)=>{var a;(a=n.parentNode)==null||a.insertBefore(e,n)},S1e=(n,e)=>{do{var a;if(e=(a=e)==null?void 0:a.previousElementSibling,n==e)return!0}while(e&&e.previousElementSibling);return!1};function I1e(){var n=this;if(n.settings.mode!=="multi")return;var e=n.lock,a=n.unlock;let s=!0,o;n.hook("after","setupTemplates",()=>{var r=n.settings.render.item;n.settings.render.item=(i,u)=>{const h=In(r.call(n,i,u));za(h,{draggable:"true"});const m=D=>{s||La(D),D.stopPropagation()},p=D=>{o=h,setTimeout(()=>{h.classList.add("ts-dragging")},0)},b=D=>{D.preventDefault(),h.classList.add("ts-drag-over"),w(h,o)},x=()=>{h.classList.remove("ts-drag-over")},w=(D,V)=>{V!==void 0&&(S1e(V,h)?M1e(D,V):C1e(D,V))},$=()=>{var D;document.querySelectorAll(".ts-drag-over").forEach(R=>R.classList.remove("ts-drag-over")),(D=o)==null||D.classList.remove("ts-dragging"),o=void 0;var V=[];n.control.querySelectorAll("[data-value]").forEach(R=>{if(R.dataset.value){let E=R.dataset.value;E&&V.push(E)}}),n.setValue(V)};return Aa(h,"mousedown",m),Aa(h,"dragstart",p),Aa(h,"dragenter",b),Aa(h,"dragover",b),Aa(h,"dragleave",x),Aa(h,"dragend",$),h}}),n.hook("instead","lock",()=>(s=!1,e.call(n))),n.hook("instead","unlock",()=>(s=!0,a.call(n)))}function L1e(n){const e=this,a=Object.assign({title:"Untitled",headerClass:"dropdown-header",titleRowClass:"dropdown-header-title",labelClass:"dropdown-header-label",closeClass:"dropdown-header-close",html:s=>'<div class="'+s.headerClass+'"><div class="'+s.titleRowClass+'"><span class="'+s.labelClass+'">'+s.title+'</span><a class="'+s.closeClass+'">&times;</a></div></div>'},n);e.on("initialize",()=>{var s=In(a.html(a)),o=s.querySelector("."+a.closeClass);o&&o.addEventListener("click",r=>{La(r,!0),e.close()}),e.dropdown.insertBefore(s,e.dropdown.firstChild)})}function $1e(){var n=this;n.hook("instead","setCaret",e=>{n.settings.mode==="single"||!n.control.contains(n.control_input)?e=n.items.length:(e=Math.max(0,Math.min(n.items.length,e)),e!=n.caretPos&&!n.isPending&&n.controlChildren().forEach((a,s)=>{s<e?n.control_input.insertAdjacentElement("beforebegin",a):n.control.appendChild(a)})),n.caretPos=e}),n.hook("instead","moveCaret",e=>{if(!n.isFocused)return;const a=n.getLastActive(e);if(a){const s=CL(a);n.setCaret(e>0?s+1:s),n.setActiveItem(),Ko(a,"last-active")}else n.setCaret(n.caretPos+e)})}function A1e(){const n=this;n.settings.shouldOpen=!0,n.hook("before","setup",()=>{n.focus_node=n.control,Gn(n.control_input,"dropdown-input");const e=In('<div class="dropdown-input-wrap">');e.append(n.control_input),n.dropdown.insertBefore(e,n.dropdown.firstChild);const a=In('<input class="items-placeholder" tabindex="-1" />');a.placeholder=n.settings.placeholder||"",n.control.append(a)}),n.on("initialize",()=>{n.control_input.addEventListener("keydown",a=>{switch(a.keyCode){case Cz:n.isOpen&&(La(a,!0),n.close()),n.clearActiveItems();return;case $E:n.focus_node.tabIndex=-1;break}return n.onKeyDown.call(n,a)}),n.on("blur",()=>{n.focus_node.tabIndex=n.isDisabled?-1:n.tabIndex}),n.on("dropdown_open",()=>{n.control_input.focus()});const e=n.onBlur;n.hook("instead","onBlur",a=>{if(!(a&&a.relatedTarget==n.control_input))return e.call(n)}),Aa(n.control_input,"blur",()=>n.onBlur()),n.hook("before","close",()=>{n.isOpen&&n.focus_node.focus({preventScroll:!0})})})}function E1e(){var n=this;n.on("initialize",()=>{var e=document.createElement("span"),a=n.control_input;e.style.cssText="position:absolute; top:-99999px; left:-99999px; width:auto; padding:0; white-space:pre; ",n.wrapper.appendChild(e);var s=["letterSpacing","fontSize","fontFamily","fontWeight","textTransform"];for(const r of s)e.style[r]=a.style[r];var o=()=>{e.textContent=a.value,a.style.width=e.clientWidth+"px"};o(),n.on("update item_add item_remove",o),Aa(a,"input",o),Aa(a,"keyup",o),Aa(a,"blur",o),Aa(a,"update",o)})}function T1e(){var n=this,e=n.deleteSelection;this.hook("instead","deleteSelection",a=>n.activeItems.length?e.call(n,a):!1)}function P1e(){this.hook("instead","setActiveItem",()=>{}),this.hook("instead","selectAll",()=>{})}function D1e(){var n=this,e=n.onKeyDown;n.hook("instead","onKeyDown",a=>{var s,o,r,i;if(!n.isOpen||!(a.keyCode===LE||a.keyCode===Sz))return e.call(n,a);n.ignoreHover=!0,i=nL(n.activeOption,"[data-group]"),s=CL(n.activeOption,"[data-selectable]"),i&&(a.keyCode===LE?i=i.previousSibling:i=i.nextSibling,i&&(r=i.querySelectorAll("[data-selectable]"),o=r[Math.min(r.length-1,s)],o&&n.setActiveOption(o)))})}function R1e(n){const e=Object.assign({label:"&times;",title:"Remove",className:"remove",append:!0},n);var a=this;if(e.append){var s='<a href="javascript:void(0)" class="'+e.className+'" tabindex="-1" title="'+oL(e.title)+'">'+e.label+"</a>";a.hook("after","setupTemplates",()=>{var o=a.settings.render.item;a.settings.render.item=(r,i)=>{var u=In(o.call(a,r,i)),h=In(s);return u.appendChild(h),Aa(h,"mousedown",m=>{La(m,!0)}),Aa(h,"click",m=>{a.isLocked||(La(m,!0),!a.isLocked&&a.shouldDelete([u],m)&&(a.removeItem(u),a.refreshOptions(!1),a.inputState()))}),u}})}}function O1e(n){const e=this,a=Object.assign({text:s=>s[e.settings.labelField]},n);e.on("item_remove",function(s){if(e.isFocused&&e.control_input.value.trim()===""){var o=e.options[s];o&&e.setTextboxValue(a.text.call(e,o))}})}function V1e(){const n=this,e=n.canLoad,a=n.clearActiveOption,s=n.loadCallback;var o={},r,i=!1,u,h=[];if(n.settings.shouldLoadMore||(n.settings.shouldLoadMore=()=>{if(r.clientHeight/(r.scrollHeight-r.scrollTop)>.9)return!0;if(n.activeOption){var x=n.selectable(),w=Array.from(x).indexOf(n.activeOption);if(w>=x.length-2)return!0}return!1}),!n.settings.firstUrl)throw"virtual_scroll plugin requires a firstUrl() method";n.settings.sortField=[{field:"$order"},{field:"$score"}];const m=b=>typeof n.settings.maxOptions=="number"&&r.children.length>=n.settings.maxOptions?!1:!!(b in o&&o[b]),p=(b,x)=>n.items.indexOf(x)>=0||h.indexOf(x)>=0;n.setNextUrl=(b,x)=>{o[b]=x},n.getUrl=b=>{if(b in o){const x=o[b];return o[b]=!1,x}return n.clearPagination(),n.settings.firstUrl.call(n,b)},n.clearPagination=()=>{o={}},n.hook("instead","clearActiveOption",()=>{if(!i)return a.call(n)}),n.hook("instead","canLoad",b=>b in o?m(b):e.call(n,b)),n.hook("instead","loadCallback",(b,x)=>{if(!i)n.clearOptions(p);else if(u){const w=b[0];w!==void 0&&(u.dataset.value=w[n.settings.valueField])}s.call(n,b,x),i=!1}),n.hook("after","refreshOptions",()=>{const b=n.lastValue;var x;m(b)?(x=n.render("loading_more",{query:b}),x&&(x.setAttribute("data-selectable",""),u=x)):b in o&&!r.querySelector(".no-results")&&(x=n.render("no_more_results",{query:b})),x&&(Gn(x,n.settings.optionClass),r.append(x))}),n.on("initialize",()=>{h=Object.keys(n.options),r=n.dropdown_content,n.settings.render=Object.assign({},{loading_more:()=>'<div class="loading-more-results">Loading more results ... </div>',no_more_results:()=>'<div class="no-more-results">No more results</div>'},n.settings.render),r.addEventListener("scroll",()=>{n.settings.shouldLoadMore.call(n)&&m(n.lastValue)&&(i||(i=!0,n.load.call(n,n.lastValue)))})})}ls.define("change_listener",b1e);ls.define("checkbox_options",w1e);ls.define("clear_button",x1e);ls.define("drag_drop",I1e);ls.define("dropdown_header",L1e);ls.define("caret_position",$1e);ls.define("dropdown_input",A1e);ls.define("input_autogrow",E1e);ls.define("no_backspace_delete",T1e);ls.define("no_active_items",P1e);ls.define("optgroup_columns",D1e);ls.define("remove_button",R1e);ls.define("restore_on_backspace",O1e);ls.define("virtual_scroll",V1e);const kd=Qr("darkMode",{state:()=>({darkModeValue:localStorage.getItem("darkMode")==="true"}),getters:{darkMode(n){return localStorage.getItem("darkMode")===null&&localStorage.setItem("darkMode","false"),n.darkModeValue}},actions:{setDarkMode(n){localStorage.setItem("darkMode",n.toString()),this.darkModeValue=n}}}),U1e=["fill"],F1e=io('<g transform="matrix(1 0 0 -1 0 80)"><rect width="10" height="20" rx="3"><animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="15" width="10" height="80" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" width="10" height="50" rx="3"><animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="45" width="10" height="30" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"></animate></rect></g>',1),j1e=[F1e],H1e={key:1,width:"20",viewBox:"0 0 57 57",xmlns:"http://www.w3.org/2000/svg",class:"w-full h-full"},N1e={fill:"none","fill-rule":"evenodd"},z1e={transform:"translate(1 1)"},B1e=["fill"],q1e=c("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;5;50;50",calcMode:"linear",repeatCount:"indefinite"},null,-1),W1e=c("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",values:"5;27;49;5",calcMode:"linear",repeatCount:"indefinite"},null,-1),G1e=[q1e,W1e],Z1e=["fill"],K1e=c("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",from:"5",to:"5",values:"5;50;50;5",calcMode:"linear",repeatCount:"indefinite"},null,-1),X1e=c("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",from:"27",to:"27",values:"27;49;5;27",calcMode:"linear",repeatCount:"indefinite"},null,-1),Y1e=[K1e,X1e],Q1e=["fill"],J1e=c("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;50;5;50",calcMode:"linear",repeatCount:"indefinite"},null,-1),epe=c("animate",{attributeName:"cx",from:"49",to:"49",begin:"0s",dur:"2.2s",values:"49;5;27;49",calcMode:"linear",repeatCount:"indefinite"},null,-1),tpe=[J1e,epe],ape=["fill"],npe=io('<rect y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="60" width="15" height="140" rx="6"><animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="90" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="120" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect>',5),spe=[npe],ope=["fill"],rpe=c("path",{d:"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"},[c("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"-360 67 67",dur:"2.5s",repeatCount:"indefinite"})],-1),ipe=c("path",{d:"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"},[c("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"360 67 67",dur:"8s",repeatCount:"indefinite"})],-1),lpe=[rpe,ipe],cpe=["fill"],dpe=io('<circle cx="12.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5"><animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="12.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle>',9),upe=[dpe],ppe=["fill"],hpe=io('<path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"></animate></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"></animate></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"></path>',3),fpe=[hpe],mpe=["stroke"],vpe=io('<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="4"><circle stroke-opacity=".5" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"></animateTransform></path></g></g>',1),ype=[vpe],_pe=["stroke"],gpe=io('<g fill="none" fill-rule="evenodd" stroke-width="4"><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"></animate></circle></g>',1),kpe=[gpe],bpe=["stroke"],wpe=io('<g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="3"><circle cx="22" cy="22" r="6" stroke-opacity="0"><animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="1.5s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="1.5s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="6" stroke-opacity="0"><animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="3s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="3s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="8"><animate attributeName="r" begin="0s" dur="1.5s" values="6;1;2;3;4;5;6" calcMode="linear" repeatCount="indefinite"></animate></circle></g>',1),xpe=[wpe],Mpe={key:9,width:"20",viewBox:"0 0 58 58",xmlns:"http://www.w3.org/2000/svg",class:"w-full h-full"},Cpe={fill:"none","fill-rule":"evenodd"},Spe=["stroke"],Ipe=["fill"],Lpe=c("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"1;0;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"},null,-1),$pe=[Lpe],Ape=["fill"],Epe=c("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;1;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"},null,-1),Tpe=[Epe],Ppe=["fill"],Dpe=c("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;1;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"},null,-1),Rpe=[Dpe],Ope=["fill"],Vpe=c("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;1;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"},null,-1),Upe=[Vpe],Fpe=["fill"],jpe=c("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;1;0;0;0",calcMode:"linear",repeatCount:"indefinite"},null,-1),Hpe=[jpe],Npe=["fill"],zpe=c("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;1;0;0",calcMode:"linear",repeatCount:"indefinite"},null,-1),Bpe=[zpe],qpe=["fill"],Wpe=c("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;1;0",calcMode:"linear",repeatCount:"indefinite"},null,-1),Gpe=[Wpe],Zpe=["fill"],Kpe=c("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;0;1",calcMode:"linear",repeatCount:"indefinite"},null,-1),Xpe=[Kpe],Ype={key:10,width:"20",viewBox:"0 0 38 38",xmlns:"http://www.w3.org/2000/svg",class:"w-full h-full"},Qpe={id:"a",x1:"8.042%",y1:"0%",x2:"65.682%",y2:"23.865%"},Jpe=["stop-color"],ehe=["stop-color"],the=["stop-color"],ahe={fill:"none","fill-rule":"evenodd"},nhe={transform:"translate(1 1)"},she=c("path",{id:"Oval-2",d:"M36 18c0-9.94-8.06-18-18-18",stroke:"url(#a)","stroke-width":"3"},[c("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})],-1),ohe=["fill"],rhe=c("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"},null,-1),ihe=[rhe],lhe=["fill"],che=io('<circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle>',3),dhe=[che],mA=Ce({__name:"LoadingIcon",props:{icon:{},color:{default:"#2d3748"}},setup(n){const e=n,a=ee(()=>kd().darkMode),s=ee(()=>a.value?"#ffffff":e.color),{icon:o}=e;return(r,i)=>(L(),U("span",null,[t(o)=="audio"?(L(),U("svg",{key:0,width:"15",viewBox:"0 0 55 80",xmlns:"http://www.w3.org/2000/svg",fill:s.value,class:"w-full h-full"},j1e,8,U1e)):t(o)=="ball-triangle"?(L(),U("svg",H1e,[c("g",N1e,[c("g",z1e,[c("circle",{cx:"5",cy:"50",r:"5",fill:s.value},G1e,8,B1e),c("circle",{cx:"27",cy:"5",r:"5",fill:s.value},Y1e,8,Z1e),c("circle",{cx:"49",cy:"50",r:"5",fill:s.value},tpe,8,Q1e)])])])):t(o)=="bars"?(L(),U("svg",{key:2,width:"20",viewBox:"0 0 135 140",xmlns:"http://www.w3.org/2000/svg",fill:s.value,class:"w-full h-full"},spe,8,ape)):t(o)=="circles"?(L(),U("svg",{key:3,width:"20",viewBox:"0 0 135 135",xmlns:"http://www.w3.org/2000/svg",fill:s.value,class:"w-full h-full"},lpe,8,ope)):t(o)=="grid"?(L(),U("svg",{key:4,width:"20",viewBox:"0 0 105 105",xmlns:"http://www.w3.org/2000/svg",fill:s.value,class:"w-full h-full"},upe,8,cpe)):t(o)=="hearts"?(L(),U("svg",{key:5,width:"30",viewBox:"0 0 140 64",xmlns:"http://www.w3.org/2000/svg",fill:s.value,class:"w-full h-full"},fpe,8,ppe)):t(o)=="oval"?(L(),U("svg",{key:6,width:"25",viewBox:"-2 -2 42 42",xmlns:"http://www.w3.org/2000/svg",stroke:s.value,class:"w-full h-full"},ype,8,mpe)):t(o)=="puff"?(L(),U("svg",{key:7,width:"25",viewBox:"0 0 44 44",xmlns:"http://www.w3.org/2000/svg",stroke:s.value,class:"w-full h-full"},kpe,8,_pe)):t(o)=="rings"?(L(),U("svg",{key:8,width:"30",viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:s.value,class:"w-full h-full"},xpe,8,bpe)):t(o)=="spinning-circles"?(L(),U("svg",Mpe,[c("g",Cpe,[c("g",{transform:"translate(2 1)",stroke:s.value,"stroke-width":"1.5"},[c("circle",{cx:"42.601",cy:"11.462",r:"5","fill-opacity":"1",fill:s.value},$pe,8,Ipe),c("circle",{cx:"49.063",cy:"27.063",r:"5","fill-opacity":"0",fill:s.value},Tpe,8,Ape),c("circle",{cx:"42.601",cy:"42.663",r:"5","fill-opacity":"0",fill:s.value},Rpe,8,Ppe),c("circle",{cx:"27",cy:"49.125",r:"5","fill-opacity":"0",fill:s.value},Upe,8,Ope),c("circle",{cx:"11.399",cy:"42.663",r:"5","fill-opacity":"0",fill:s.value},Hpe,8,Fpe),c("circle",{cx:"4.938",cy:"27.063",r:"5","fill-opacity":"0",fill:s.value},Bpe,8,Npe),c("circle",{cx:"11.399",cy:"11.462",r:"5","fill-opacity":"0",fill:s.value},Gpe,8,qpe),c("circle",{cx:"27",cy:"5",r:"5","fill-opacity":"0",fill:s.value},Xpe,8,Zpe)],8,Spe)])])):t(o)=="tail-spin"?(L(),U("svg",Ype,[c("defs",null,[c("linearGradient",Qpe,[c("stop",{"stop-color":s.value,"stop-opacity":"0",offset:"0%"},null,8,Jpe),c("stop",{"stop-color":s.value,offset:"100%"},null,8,ehe),c("stop",{"stop-color":s.value,"stop-opacity":".631",offset:"63.146%"},null,8,the)])]),c("g",ahe,[c("g",nhe,[she,c("circle",{fill:s.value,cx:"36",cy:"18",r:"1"},ihe,8,ohe)])])])):t(o)=="three-dots"?(L(),U("svg",{key:11,width:"25",viewBox:"0 0 120 30",xmlns:"http://www.w3.org/2000/svg",fill:s.value,class:"w-full h-full"},dhe,8,lhe)):Me("",!0)]))}}),uhe={key:0,class:"relative mr-3 intro-x sm:mr-6"},phe={class:"relative hidden sm:block"},hhe={class:"relative text-white/70 sm:hidden",href:""},fhe={class:"absolute right-0 z-10 mt-[3px]"},mhe={class:"w-[450px] p-5 box"},vhe={class:"mb-2 font-medium"},yhe={class:"mb-5"},_he={class:"flex items-center mt-2"},ghe={class:"ml-3"},khe={class:"mb-2 font-medium"},bhe={class:"mb-5"},whe={class:"flex items-center mt-2"},xhe={class:"ml-3"},Mhe={class:"mb-2 font-medium"},Che={class:"mb-5"},She={class:"flex items-center mt-2"},Ihe={class:"ml-3"},iP=Ce({__name:"SearchBox",props:{theme:{default:"rubick"},layout:{default:"side-menu"},visible:{type:Boolean,default:!0}},setup(n){const{t:e}=tt(),a=n,s=O(!1),o=()=>{s.value=!0},r=()=>{s.value=!1};return(i,u)=>a.visible?(L(),U("div",uhe,[c("div",phe,[l(t(Oe),{type:"text",class:"border-transparent w-56 shadow-none rounded-full bg-slate-200 pr-8 transition-[width] duration-300 ease-in-out focus:border-transparent focus:w-72 dark:bg-darkmode-400",placeholder:"Search...",onFocus:o,onBlur:r}),l(t(re),{icon:"Search",class:"absolute inset-y-0 right-0 w-5 h-5 my-auto mr-3 text-slate-600 dark:text-slate-500"})]),c("a",hhe,[l(t(re),{icon:"Search",class:"w-5 h-5 dark:text-slate-500"})]),l(t(rr),{as:"template",show:s.value,enter:"transition-all ease-linear duration-150",enterFrom:"mt-5 invisible opacity-0 translate-y-1",enterTo:"mt-[3px] visible opacity-100 translate-y-0",entered:"mt-[3px]",leave:"transition-all ease-linear duration-150",leaveFrom:"mt-[3px] visible opacity-100 translate-y-0",leaveTo:"mt-5 invisible opacity-0 translate-y-1"},{default:f(()=>[c("div",fhe,[c("div",mhe,[c("div",vhe,_(t(e)("components.search-box.search_group.user")),1),c("div",yhe,[c("div",_he,[c("div",ghe,[l(t(mA),{icon:"puff"})])])]),c("div",khe,_(t(e)("components.search-box.search_group.company")),1),c("div",bhe,[c("div",whe,[c("div",xhe,[l(t(mA),{icon:"puff"})])])]),c("div",Mhe,_(t(e)("components.search-box.search_group.branch")),1),c("div",Che,[c("div",She,[c("div",Ihe,[l(t(mA),{icon:"puff"})])])])])])]),_:1},8,["show"])])):Me("",!0)}}),Lhe=c("h2",{class:"mr-auto text-base font-medium"}," ",-1),$he={href:"https://www.github.com/GitzJoey"},Ahe={href:"https://github.com/GitzJoey/DCSLab/graphs/contributors"},Ehe=c("br",null,null,-1),jc=Ce({__name:"SidebarPop",props:{visible:{type:Boolean,default:!0},theme:{default:"rubick"},layout:{default:"side-menu"}},setup(n){const{t:e}=tt(),a=n,s=O(!1),o=i=>{s.value=i},r=ee(()=>At([a.theme=="rubick"&&a.layout=="side-menu"&&"",a.theme=="enigma"&&"text-white",a.theme=="tinker"&&"text-white",a.theme=="icewall"&&"text-white"]));return(i,u)=>(L(),U(ke,null,[l(t(Xa),{class:"mr-4 intro-x sm:mr-6"},{default:f(()=>[l(t(Xa).Button,{variant:"primary",onClick:u[0]||(u[0]=h=>{h.preventDefault(),o(!0)})},{default:f(()=>[l(t(re),{icon:"Archive",class:F(r.value)},null,8,["class"])]),_:1})]),_:1}),l(t(Fr),{open:s.value,onClose:u[1]||(u[1]=()=>{o(!1)})},{default:f(()=>[l(t(Fr).Panel,null,{default:f(()=>[l(t(Fr).Title,{class:"p-5"},{default:f(()=>[Lhe]),_:1}),l(t(Fr).Description,null,{default:f(()=>[A(" ")]),_:1}),l(t(Fr).Footer,null,{default:f(()=>[c("strong",null,[A(_(t(e)("components.sidebar-pop.slide_over.footer.copyright"))+" © "+_(new Date().getFullYear())+" ",1),c("a",$he,_(t(e)("components.sidebar-pop.slide_over.footer.copyright_name")),1),A("  &  "),c("a",Ahe,_(t(e)("components.sidebar-pop.slide_over.footer.contributors")),1),A(" . ")]),A(" "+_(t(e)("components.sidebar-pop.slide_over.footer.rights"))+" ",1),Ehe,A(" "+_(t(e)("components.sidebar-pop.slide_over.footer.powered_by")),1)]),_:1})]),_:1})]),_:1},8,["open"])],64))}}),The="Dashboard",Phe="Company",Dhe="Branch",Rhe="Employee",Ohe="Warehouse",Vhe="Investor",Uhe="Customer",Fhe="Brand",jhe="Unit",Hhe="Product",Nhe="Service",zhe="Supplier",Bhe="Finance Management",qhe="Transaction",Whe="Report",Ghe="Administrator",Zhe="Dev Tool",Khe={dashboard:The,"main-dashboard":"Main Dashboard","main-demo":"Demo","company-management":"Company Management",company:Phe,branch:Dhe,employee:Rhe,warehouse:Ohe,investor:Vhe,"cash-account":"Cash Account","customer-management":"Customer Management","customer-group":"Customer Group",customer:Uhe,"product-management":"Product Management","product-category":"Product Category",brand:Fhe,unit:jhe,product:Hhe,"product-service":"Service",service:Nhe,supplier:zhe,finance:Bhe,transaction:qhe,"stock-adjustment":"Stock Adjustment","stock-adjustment-in-product":"Stock Adjustment In Product","stock-adjustment-in-product-serial":"Stock Adjustment In Product Serial","stock-adjustment-out-product":"Stock Adjustment Out Product","stock-adjustment-out-product-serial":"Stock Adjustment Out Product Serial","stock-adjustment-category":"Stock Adjustment Category","purchase-management":"Purchase Management","purchase-order":"Purchase Order","master-data":"Master Data",report:Whe,"product-with-remaining-stock":"Products With Remaining Stock",administrator:Ghe,"administrator-user":"User",devtool:Zhe,"devtool-devtool":"Dev Tool","devtool-playground":"Playground","devtool-playground-p1":"Playground 1","devtool-playground-p2":"Playground 2"},Xhe="Save",Yhe="Update",Qhe="Cancel",Jhe="Back",efe="Reset",tfe="Compose",afe="Revoke",nfe="Activate",sfe="Submit",ofe="Send Verification Email",rfe="Auto",ife="New Order",lfe="Login",cfe="Register",dfe="Create New",ufe="Create",pfe="Retry",hfe="Reload",ffe="Search",mfe="Select",vfe={save:Xhe,update:Yhe,cancel:Qhe,delete:"Delete",back:Jhe,reset:efe,compose:tfe,revoke:afe,activate:nfe,submit:sfe,send_verification_email:ofe,auto:rfe,new_order:ife,login:lfe,register:cfe,create_new:dfe,create:ufe,retry:pfe,reload:hfe,search:ffe,select:mfe},yfe="An unexpected error occurred.",_fe={message:"Email is not verified. Please verify your email to complete the registration process."},gfe={default_title:yfe,email_verification:_fe},kfe="Please Select",bfe={switch:{on:"Yes",off:"No"},statusDDL:{active:"Active",inactive:"Inactive",deleted:"Deleted"},paymentTermTypeDDL:{pia:"Payment In Advance",net:"Payment In X Days After Invoice Date",eom:"End Of Month",cod:"Cash On Delivery",cnd:"Cash Next Delivery",cbs:"Cash Before Shipment"},roundingTypeDDL:{up:"Round Up",down:"Round Down"},productCategoryDDL:{product:"Product",service:"Service"},unitCategoryDDL:{product:"Product",service:"Service"},productTypeDDL:{raw:"Raw Material",wip:"Work In Progress",fg:"Finished Good",svc:"Service"}},wfe={placeholder:kfe,values:bfe},xfe={profile:"Profile",inbox:"Inbox",activity:"Activity",logout:"Logout"},Mfe={profile_ddl:xfe},Cfe={indonesia:"Indonesia",english:"English"},Sfe={language:Cfe},Ife={search:"Search..."},Lfe={user:"Users",company:"Companies",branch:"Branches"},$fe={placeholder:Ife,search_group:Lfe},Afe={footer:{copyright:"Copyright",copyright_name:"GitzJoey",contributors:"Contributors",rights:"All rights reserved.",powered_by:"Powered By Coffee & Curiosity."}},Efe={slide_over:Afe},Tfe="Print",Pfe="Export To Excel",Dfe="Export To PDF",Rfe="Data Not Found",Ofe="Showing",Vfe="to",Ufe="of",Ffe="entries",jfe={print:Tfe,export_to_excel:Pfe,export_to_pdf:Dfe,data_not_found:Rfe,showing:Ofe,to:Vfe,of:Ufe,entries:Ffe},Hfe="Data Not Found",Nfe={data_not_found:Hfe},zfe="Confirmation",Bfe="Do you really want to delete these records?",qfe="This process cannot be undone.",Wfe={title:zfe,desc_1:Bfe,desc_2:qfe},Gfe="Browse",Zfe="or drag and drop",Kfe="Camera",Xfe="Capture",Yfe={browse:Gfe,or_drag_drop:Zfe,camera:Kfe,capture:Xfe},Qfe="Login",Jfe={email:"Email",password:"Password",remember_me:"Remember Me",forgot_pass:"Forgot Password",terms_and_cond:"Terms & Condition",privacy_policy:"Privacy Policy","2fa":{label:"Two Factor Challenge",label_description:"",code:"Code",recovery_code:"Recovery Code",use_recovery_codes:"Use Recovery Codes"}},eme={title:Qfe,fields:Jfe},tme="Register",ame={name:"Name",email:"Email",password:"Password",password_confirmation:"Password Confirmation",terms:"Terms",agree_1:"I agree to terms ",agree_2:"& conditions",already_member:"I already have a membership",terms_and_cond:"Terms & Condition"},nme={title:tme,fields:ame},sme="Reset Password",ome="Reset Password",rme="Please enter your email",ime={email:"Email"},lme={successfully_send_link:"We have emailed your password reset link."},cme={title:sme,page_title:ome,page_title_desc:rme,fields:ime,alert:lme},dme="Reset Password",ume="Reset Password",pme="Please enter your new password",hme={email:"Email",password:"Password",password_confirmation:"Confirm password"},fme={successfully_reset_password:"Password changed."},mme={title:dme,page_title:ume,page_title_desc:pme,fields:hme,alert:fme},vme="Profile",yme={user_profile:"User Profile",email_verification:"Email Verification",personal_information:"Personal Information",account_settings:"Account Settings",roles:"Roles",change_password:"Change Password",api_token:"API Token",two_factor_authentication:"Two Factor Authentication"},_me={name:"Name",first_name:"First Name",last_name:"Last Name",address:"Address",city:"City",postal_code:"Postal Code",country:"Country",tax_id:"Tax ID",remarks:"Remarks",email:"Email",ic_num:"IC No.",settings:{theme:"Themes",date_format:"Date Format",time_format:"Time Format"},change_password:{current_password:"Current Password",password:"New Password",password_confirmation:"Confirm Password"},api_token:{total_token_generated:"Total Token Generated",reset:"Reset Token"},"2fa":{status:"2FA Authentication Status","qr-code":"QR Code","qr-code_description_1":"Please Scan This QR Code In Your Google Authenticator App","qr-code_description_2":"Download Google Authenticator In Google Play","qr-code_description_3":"","qr-code_description_4":"","recovery-codes":"Recovery Codes","recovery-codes_description_1":"Write Down And Save These Recovery Codes In A Safe Place.","recovery-codes_description_2":"This Codes Will Not Be Accessable Once You Close This Page.","secret-key":"Secret Key","secret-key_description_1":"Write Down And Save These Secret Key In A Safe Place.","secret-key_description_2":"This Secret Key Will Not Be Accessable Once You Close This Page.",confirm_password:"Confirm Password",confirm_password_error:"The Provided Password Was Incorrect.",confirm_2fa_auth_description_1:"Your Two Factor Authentication Also Need To Be Activated.",confirm_2fa_auth_description_2:"Please Input The Code Displayed In Google Authenticator App",confirm_2fa_auth:"Code From Google Authenticator",confirm_2fa_auth_error:"The Provided Code Was Incorrect."}},gme={email_verified:"Email Verified"},kme={verification_email_sent:{title:"Email Verification",content:"Verification Email Sent"}},bme={title:vme,field_groups:yme,fields:_me,tooltip:gme,alert:kme},wme="Users",xme={title:"User Lists",cols:{name:"Name",email:"Email",roles:"Roles",status:"Status"}},Mme={create:"Create User",edit:"Edit User",show:"Show User"},Cme={user_info:"User Information",user_profile:"User Profile",roles:"Roles",settings:"Settings",tokens_management:"Tokens Management",password_management:"Password Management",two_factor_auth:"Two Factor Authentication"},Sme={name:"Name",email:"Email",roles:"Roles",picture:"Picture",first_name:"First Name",last_name:"Last Name",address:"Address",ic_num:"IC Number",country:"Country",remarks:"Remarks",status:"Status",tax_id:"Tax ID",postal_code:"Postal Code",city:"City",settings:{settings:"Settings",theme:"Themes",date_format:"Date Format",time_format:"Time Format",api_token:"API Token"},tokens:{tokens:"Tokens",count:"Total Tokens",reset:"Reset Tokens"},reset_password:"Reset Password",email_reset_password:"Send Email",reset_2fa:"Reset Two Factor Authentication"},Ime={page_title:wme,table:xme,actions:Mme,field_groups:Cme,fields:Sme},Lme="Company",$me={title:"Company List",cols:{code:"Code",name:"Name",address:"Address",default:"Default",status:"Status"}},Ame={create:"Create Company",edit:"Edit Company",show:"Show Company",delete:"Delete Company"},Eme={company_data:"Company Data"},Tme={code:"Code",name:"Name",address:"Address",default:"Default",status:"Status"},Pme={delete_company:{title:"Delete Company",content:"Company Deleted Successfully"}},Dme={page_title:Lme,table:$me,actions:Ame,field_groups:Eme,fields:Tme,alert:Pme},Rme="Branch",Ome={title:"Branch List",cols:{code:"Code",name:"Name",address:"Address",city:"City",contact:"Contact",is_main:"Main Branch",remarks:"Remarks",status:"Status"}},Vme={create:"Create Branch",edit:"Edit Branch",show:"Show Branch",delete:"Delete Branch"},Ume={company_info:"Company Information",branch_data:"Branch Data"},Fme={company_id:"Company",code:"Code",name:"Name",address:"Address",city:"City",contact:"Contact",is_main:"Main Branch",remarks:"Remarks",status:"Status"},jme={delete_branch:{title:"Delete Branch",content:"Branch Deleted Successfully"}},Hme={page_title:Rme,table:Ome,actions:Vme,field_groups:Ume,fields:Fme,alert:jme},Nme="Warehouse",zme={title:"Warehouse List",cols:{code:"Code",name:"Name",address:"Address",city:"City",contact:"Contact",is_main:"Main Warehouse",remarks:"Remarks",status:"Status"}},Bme={create:"Create Warehouse",edit:"Edit Warehouse",show:"Show Warehouse",delete:"Delete Warehouse"},qme={company_info:"Company Information",warehouse_data:"Warehouse Data"},Wme={company_id:"Company",code:"Code",name:"Name",address:"Address",city:"City",contact:"Contact",is_main:"Main Warehouse",remarks:"Remarks",status:"Status"},Gme={delete_warehouse:{title:"Delete Warehouse",content:"Warehouse Deleted Successfully"}},Zme={page_title:Nme,table:zme,actions:Bme,field_groups:qme,fields:Wme,alert:Gme},Kme="Product Category",Xme={title:"Product Category List",cols:{code:"Code",name:"Name",type:"Type"}},Yme={create:"Create Product Category",edit:"Edit Product Category",show:"Show Product Category",delete:"Delete Product Category"},Qme={company_info:"Company Information",product_category_data:"Product Category Data"},Jme={company_id:"Company",code:"Code",name:"Name",type:"Type"},e2e={product:"Product",service:"Service"},t2e={delete_product_category:{title:"Delete Product Category",content:"Product Category Deleted Successfully"}},a2e={page_title:Kme,table:Xme,actions:Yme,field_groups:Qme,fields:Jme,type:e2e,alert:t2e},n2e="Brand",s2e={title:"Brand List",cols:{code:"Code",name:"Name"}},o2e={create:"Create Brand",edit:"Edit Brand",show:"Show Brand",delete:"Delete Brand"},r2e={company_info:"Company Info",brand_data:"Brand Data"},i2e={company_id:"Company",code:"Code",name:"Name"},l2e={delete_brand:{title:"Delete Brand",content:"Brand Successfully Deleted"}},c2e={page_title:n2e,table:s2e,actions:o2e,field_groups:r2e,fields:i2e,alert:l2e},d2e="Unit",u2e={title:"Unit List",cols:{code:"Code",name:"Name",description:"Description",type:"Type"}},p2e={create:"Create Unit",edit:"Edit Unit",show:"Show Unit",delete:"Delete Unit"},h2e={company_info:"Company Info",unit_data:"Unit Data"},f2e={company_id:"Company",code:"Code",name:"Name",description:"Description",type:"Type"},m2e={unit_type:{product:"Product",service:"Service"}},v2e={delete_unit:{title:"Delete Unit",content:"Unit Successfully Deleted"}},y2e={page_title:d2e,table:u2e,actions:p2e,field_groups:h2e,fields:f2e,enums:m2e,alert:v2e},_2e="Customer Group",g2e={title:"Customer Group List",cols:{code:"Code",name:"Name",max_open_invoice:"Max Open Invoice",max_outstanding_invoice:"Max Outstanding Invoice",max_invoice_age:"Max Invoice Age",payment_term_type:"Payment Term Type",payment_term:"Payment Term",selling_point:"Selling Point",selling_point_multiple:"Selling Point Multiple",sell_at_cost:"Sell at Cost",price_markup_percent:"Price Markup (%)",price_markup_nominal:"Price Markup (Nominal)",price_markdown_percent:"Price Markdown (%)",price_markdown_nominal:"Price Markdown (Nominal)",round_on:"Round On",rounding_type:"Rounding Type",rounding_digit:"Rounding Digit",remarks:"Remarks",status:"Status"}},k2e={create:"Create Customer Group",edit:"Edit Customer Group",show:"Show Customer Group",delete:"Delete Customer Group"},b2e={general_information:"General Information",credit_limit:"Credit Limit",pricing_and_points:"Pricing and Points",rounding_rules:"Rounding Rules"},w2e={code:"Code",name:"Name",max_open_invoice:"Max Open Invoice",max_outstanding_invoice:"Max Outstanding Invoice",max_invoice_age:"Max Invoice Age",payment_term_type:"Payment Term Type",payment_term:"Payment Term",selling_point:"Selling Point",selling_point_multiple:"Selling Point Multiple",sell_at_cost:"Sell at Cost",price_markup_percent:"Price Markup (%)",price_markup_nominal:"Price Markup (Nominal)",price_markdown_percent:"Price Markdown (%)",price_markdown_nominal:"Price Markdown (Nominal)",round_on:"Round On",rounding_type:"Rounding Type",rounding_digit:"Rounding Digit",remarks:"Remarks",status:"Status"},x2e={delete_customer_group:{title:"Delete Customer Group",content:"Customer Group Deleted Successfully"}},M2e={page_title:_2e,table:g2e,actions:k2e,field_groups:b2e,fields:w2e,alert:x2e},C2e="Customer",S2e={title:"Customer List",cols:{code:"Code",name:"Name",is_member:"Member",group:"Group",zone:"Zone",max_open_invoice:"Max Open Invoice",max_outstanding_invoice:"Max Outstanding Invoice",max_invoice_age:"Max Invoice Age",payment_term_type:"Payment Term Type",payment_term:"Payment Term",taxable_enterprise:"Taxable Enterprise",tax_id:"Tax ID",remarks:"Remarks",status:"Status"}},I2e={create:"Create Customer",edit:"Edit Customer",show:"Show Customer",delete:"Delete Customer"},L2e={general_information:"General Information",credit_limit:"Credit Limit",tax_information:"Tax Information"},$2e={code:"Code",name:"Name",is_member:"Member",group:"Group",zone:"Zone",max_open_invoice:"Max Open Invoice",max_outstanding_invoice:"Max Outstanding Invoice",max_invoice_age:"Max Invoice Age",payment_term_type:"Payment Term Type",payment_term:"Payment Term",taxable_enterprise:"Taxable Enterprise",tax_id:"Tax ID",remarks:"Remarks",status:"Status"},A2e={delete:{title:"Delete Customer",message:"Customer Deleted Successfully"}},E2e={page_title:C2e,table:S2e,actions:I2e,field_groups:L2e,fields:$2e,alert:A2e},T2e="Investor",P2e={title:"Investor List",cols:{code:"Code",company:"Company",name:"Name",remarks:"Remarks"}},D2e={create:"Create Investor",edit:"Edit Investor",show:"Show Investor",delete:"Delete Investor"},R2e={company_info:"Company Information",investor_data:"Investor Data"},O2e={code:"Code",company:"Company",name:"Name",remarks:"Remarks"},V2e={delete_investor:{title:"Delete Investor",content:"Investor Deleted Successfully"}},U2e={page_title:T2e,table:P2e,actions:D2e,field_groups:R2e,fields:O2e,alert:V2e},F2e="Cash Account",j2e={title:"Cash Account List",cols:{code:"Code",company:"Company",name:"Name",is_bank:"Bank",is_active:"Is Active",remarks:"Remarks"}},H2e={create:"Create Cash Account",edit:"Edit Cash Account",show:"Show Cash Account",delete:"Delete Cash Account"},N2e={code:"Code",company:"Company",name:"Name",is_bank:"Bank",is_active:"Is Active",remarks:"Remarks"},z2e={company_info:"Company Info",cash_account_data:"Cash Account Data"},B2e={delete_cash_account:{title:"Delete Cash Account",content:"Cash Account Deleted Successfully"}},q2e={page_title:F2e,table:j2e,actions:H2e,fields:N2e,field_groups:z2e,alert:B2e},W2e="Product Service",G2e={title:"Product Service List",cols:{code:"Code",name:"Name",category:"Category",unit:"Unit",price:"Price",point:"Point",status:"Status"}},Z2e={create:"Create Product Service",edit:"Edit Product Service",show:"Show Product Service",delete:"Delete Product Service"},K2e={company_info:"Company Info",product_data:"Product Data",price_tax_settings:"Price & Tax Settings",other_settings:"Other Settings"},X2e={company_id:"Company",code:"Code",name:"Name",category_id:"Category",unit_id:"Unit",price:"Price",point:"Point",is_taxable:"Taxable",vat_rate:"VAT Rate",is_price_include_vat:"Price Include VAT",status:"Status",remarks:"Remarks"},Y2e={active:"Active",inactive:"Inactive"},Q2e={create:{title:"Create Product Service",message:"Product Service Created Successfully"},update:{title:"Update Product Service",message:"Product Service Updated Successfully"},delete:{title:"Delete Product Service",message:"Product Service Deleted Successfully"}},J2e={page_title:W2e,table:G2e,actions:Z2e,field_groups:K2e,fields:X2e,status:Y2e,alert:Q2e},e0e="Product",t0e="Products With Remaining Stock",a0e="With Remaining Stock",n0e={title:"Product List",cols:{code:"Code",name:"Name",category:"Category",brand:"Brand",unit:"Unit",price:"Price",point:"Point",status:"Status",image:"Image"}},s0e={create:"Create Product",edit:"Edit Product",show:"Show Product",delete:"Delete Product",add_unit:"Add Unit"},o0e={company_info:"Company Info",product_data:"Product Data",price_tax_settings:"Price & Tax Settings",unit_settings:"Unit Settings",other_settings:"Other Settings"},r0e={info_title:"Product Information",settings_title:"Settings & Tax",units_title:"Product Units"},i0e={company_id:"Company",code:"Code",name:"Name",category_id:"Category",brand_id:"Brand",unit_id:"Unit",base_unit:"Base Unit",base_unit_price:"Price per Base Unit",other_unit:"Other Unit",images:"Images",conversion_value:"C. Value",is_base:"Is Base Unit",is_primary_unit:"Is Primary Unit",unit_code:"Unit Code",is_manufacturer_sku:"Is Manufacture SKU",price:"Price",point:"Point",is_taxable:"Taxable",vat_rate:"VAT Rate",is_price_include_vat:"Price Include VAT",is_use_serial_number:"Use Serial Number",serial_number:"Serial Number",is_expirable:"Expirable",status:"Status",remarks:"Remarks",with_remaining_stock_end_date:"Stock as of date"},l0e={active:"Active",inactive:"Inactive"},c0e={create:{title:"Create Product",message:"Product Created Successfully"},update:{title:"Update Product",message:"Product Updated Successfully"},delete:{title:"Delete Product",message:"Product Deleted Successfully"}},d0e={page_title:e0e,page_title_with_remaining_stock:t0e,with_remaining_stock_suffix:a0e,table:n0e,actions:s0e,field_groups:o0e,detail:r0e,fields:i0e,status:l0e,alert:c0e},u0e="Supplier",p0e={title:"Supplier List",cols:{code:"Code",name:"Name",address:"Address",city:"City",payment_term_type:"Term Type",payment_term:"Term",taxable_enterprise:"Taxable",tax_id:"Tax ID",status:"Status",remarks:"Remarks"}},h0e={create:"Create Supplier",edit:"Edit Supplier",show:"Show Supplier",delete:"Delete Supplier"},f0e={general:"General Information",finance:"Finance Information"},m0e={company_id:"Company",code:"Code",name:"Name",address:"Address",city:"City",payment_term_type:"Payment Term Type",payment_term:"Payment Term",taxable_enterprise:"Taxable Enterprise",tax_id:"Tax ID",status:"Status",remarks:"Remarks"},v0e={delete:{title:"Delete Supplier",message:"Supplier Successfully Deleted"}},y0e={page_title:u0e,table:p0e,actions:h0e,field_groups:f0e,fields:m0e,alert:v0e},_0e="Stock Adjustment Category",g0e={title:"Stock Adjustment Category List",cols:{code:"Code",name:"Name"}},k0e={create:"Create Stock Adjustment Category",edit:"Edit Stock Adjustment Category",show:"Show Stock Adjustment Category",delete:"Delete Stock Adjustment Category"},b0e={company_info:"Company Information",stock_adjustment_category_data:"Stock Adjustment Category Data"},w0e={company_id:"Company",code:"Code",name:"Name"},x0e={delete_stock_adjustment_category:{title:"Delete Stock Adjustment Category",content:"Stock Adjustment Category Deleted Successfully"}},M0e={page_title:_0e,table:g0e,actions:k0e,field_groups:b0e,fields:w0e,alert:x0e},C0e="Stock Adjustment",S0e={title:"Stock Adjustment List",cols:{code:"Code",date:"Date",category:"Category",in_warehouse:"In Warehouse",out_warehouse:"Out Warehouse",is_posted:"Posted",remarks:"Remarks"}},I0e={create:"Create Stock Adjustment",edit:"Edit Stock Adjustment",show:"Show Stock Adjustment",delete:"Delete Stock Adjustment"},L0e={company_info:"Company Information",stock_adjustment_data:"Stock Adjustment Data",in_products:"In Products",out_products:"Out Products"},$0e={company_id:"Company",branch_id:"Branch",code:"Code",date:"Date",start_date:"Start Date",end_date:"End Date",stock_adjustment_code:"Stock Adjustment Code",product_name:"Product Name",product_unit_code:"Product Code",category_id:"Category",in_warehouse_id:"In Warehouse",out_warehouse_id:"Out Warehouse",remarks:"Remarks",is_posted:"Posted",in_products:"In Products",out_products:"Out Products"},A0e={create:{title:"Create Stock Adjustment",message:"Stock Adjustment Created Successfully"},update:{title:"Update Stock Adjustment",message:"Stock Adjustment Updated Successfully"},delete:{title:"Delete Stock Adjustment",message:"Stock Adjustment Deleted Successfully"}},E0e={page_title:C0e,table:S0e,actions:I0e,field_groups:L0e,fields:$0e,alert:A0e},T0e="Stock Adjustment (In Products)",P0e={title:"Stock Adjustment In Products",cols:{product:"Product",qty:"Qty",product_unit:"Product Unit",remaining_stock:"Remaining Stock",product_unit_conversion_value:"C. Val",product_unit_cogs:"Unit COGS",product_unit_total_cogs:"Total COGS",remarks:"Remarks"}},D0e={create:"Add In Product",edit:"Edit In Product",show:"Show In Product",delete:"Delete In Product"},R0e={company_id:"Company",branch_id:"Branch",stock_adjustment_id:"Stock Adjustment",qty:"Qty",product_unit_id:"Product Unit",product_unit_conversion_value:"C. Val",product_unit_cogs:"Unit COGS",product_unit_total_cogs:"Total COGS",remarks:"Remarks"},O0e={page_title:T0e,table:P0e,actions:D0e,fields:R0e},V0e="Stock Adjustment In Product Serials",U0e={title:"Stock Adjustment In Product Serials",cols:{stock_adjustment_code:"Code",product_name:"Product",serial:"Serial"}},F0e={create:"Add Serial",edit:"Edit Serial",show:"Show Serial",delete:"Delete Serial"},j0e={stock_adjustment_id:"Stock Adjustment",stock_adjustment_in_product_id:"In Product",serial:"Serial"},H0e={page_title:V0e,table:U0e,actions:F0e,fields:j0e},N0e="Stock Adjustment (Out Products)",z0e={title:"Stock Adjustment Out Products",cols:{product:"Product",qty:"Qty",product_unit:"Product Unit",remaining_stock:"Remaining Stock",product_unit_conversion_value:"C. Value",product_unit_cogs:"Unit COGS",remarks:"Remarks"}},B0e={create:"Add Out Product",edit:"Edit Out Product",show:"Show Out Product",delete:"Delete Out Product"},q0e={company_id:"Company",branch_id:"Branch",stock_adjustment_id:"Stock Adjustment",qty:"Qty",product_id:"Product",product_unit_id:"Product Unit",product_unit_conversion_value:"C. Value",remarks:"Remarks"},W0e={page_title:N0e,table:z0e,actions:B0e,fields:q0e},G0e="Stock Adjustment Out Product Serials",Z0e={title:"Stock Adjustment Out Product Serials",cols:{stock_adjustment_code:"Code",product_name:"Product",serial:"Serial"}},K0e={create:"Add Serial",edit:"Edit Serial",show:"Show Serial",delete:"Delete Serial"},X0e={stock_adjustment_id:"Stock Adjustment",stock_adjustment_out_product_id:"Out Product",serial:"Serial"},Y0e={page_title:G0e,table:Z0e,actions:K0e,fields:X0e},Q0e="Error",J0e={401:"Unauthenticated",403:"Forbidden",500:"Internal Error",1e4:"Please Choose User Location"},eve={title:Q0e,code:J0e},tve={components:{menu:Khe,"alert-placeholder":gfe,buttons:vfe,dropdown:wfe,"data-list":jfe,"user-location":Nfe,"delete-modal":Wfe,"file-upload":Yfe,"profile-menu":Mfe,"language-switcher":Sfe,"search-box":$fe,"sidebar-pop":Efe},views:{login:eme,register:nme,forgot_password:cme,reset_password:mme,profile:bme,user:Ime,company:Dme,branch:Hme,warehouse:Zme,product_category:a2e,brand:c2e,unit:y2e,product_service:J2e,product:d0e,supplier:y0e,customer_group:M2e,customer:E2e,investor:U2e,cash_account:q2e,stock_adjustment_category:M0e,stock_adjustment:E0e,stock_adjustment_in_product:O0e,stock_adjustment_in_product_serial:H0e,stock_adjustment_out_product:W0e,stock_adjustment_out_product_serial:Y0e,error:eve}},ave="Dashboard",nve="Perusahaan",sve="Cabang",ove="Karyawan",rve="Gudang",ive="Investor",lve="Pelanggan",cve="Merk",dve="Satuan",uve="Produk",pve="Layanan",hve="Pemasok",fve="Manajemen Keuangan",mve="Transaksi",vve="Laporan",yve="Administrator",_ve="Dev Tool",gve={dashboard:ave,"main-dashboard":"Dashboard Utama","main-demo":"Demonstrasi","company-management":"Manajement Perusahaan",company:nve,branch:sve,employee:ove,warehouse:rve,investor:ive,"cash-account":"Akun Kas","customer-management":"Manajement Pelanggan","customer-group":"Grup Pelanggan",customer:lve,"product-management":"Manajement Produk","product-category":"Kategori Produk",brand:cve,unit:dve,product:uve,"product-service":"Produk Jasa",service:pve,supplier:hve,finance:fve,transaction:mve,"stock-adjustment":"Penyesuaian Stok","stock-adjustment-in-product":"Penyesuaian Stok Masuk per Produk","stock-adjustment-in-product-serial":"Penyesuaian Stok Masuk per Serial","stock-adjustment-out-product":"Penyesuaian Stok Keluar per Produk","stock-adjustment-out-product-serial":"Penyesuaian Stok Keluar per Serial","stock-adjustment-category":"Kategori Penyesuaian Stok","purchase-management":"Manajement Pembelian","purchase-order":"Pesanan Pembelian","master-data":"Master Data",report:vve,"product-with-remaining-stock":"Produk dengan Stok Tersisa",administrator:yve,"administrator-user":"Pengguna",devtool:_ve,"devtool-devtool":"Dev Tool","devtool-playground":"Playground","devtool-playground-p1":"Playground 1","devtool-playground-p2":"Playground 2"},kve="Simpan",bve="Update",wve="Batal",xve="Kembali",Mve="Reset",Cve="Pesan Baru",Sve="Revoke",Ive="Aktifkan",Lve="Kirim",$ve="Kirim Email Verifikasi",Ave="Auto",Eve="Order Baru",Tve="Login",Pve="Register",Dve="Tambah Baru",Rve="Tambah",Ove="Coba Kembali",Vve="Memuat Ulang",Uve="Cari",Fve="Pilih",jve={save:kve,update:bve,cancel:wve,delete:"Hapus",back:xve,reset:Mve,compose:Cve,revoke:Sve,activate:Ive,submit:Lve,send_verification_email:$ve,auto:Ave,new_order:Eve,login:Tve,register:Pve,create_new:Dve,create:Rve,retry:Ove,reload:Vve,search:Uve,select:Fve},Hve="Terjadi kesalahan.",Nve={message:"Email tidak terverifikasi. Harap verifikasi email Anda untuk menyelesaikan proses pendaftaran."},zve={default_title:Hve,email_verification:Nve},Bve="Silahkan Pilih",qve={switch:{on:"Ya",off:"Tidak"},statusDDL:{active:"Aktif",inactive:"Tidak Aktif",deleted:"Dihapus"},paymentTermTypeDDL:{pia:"Pembayaran Dimuka",net:"Pembayaran X Hari Setelah Tgl Invoice",eom:"Akhir Bulan",cod:"Cash On Delivery",cnd:"Cash Di Pengiriman Selanjutnya",cbs:"Cash Sebelum Pengiriman"},roundingTypeDDL:{up:"Keatas",down:"Kebawah"},productCategoryDDL:{product:"Produk",service:"Jasa"},unitCategoryDDL:{product:"Produk",service:"Jasa"},productTypeDDL:{raw:"Bahan Baku",wip:"Barang Setengah Jadi",fg:"Barang Jadi",svc:"Jasa"}},Wve={placeholder:Bve,values:qve},Gve={profile:"Profile",inbox:"Inbox",activity:"Activity",logout:"Logout"},Zve={profile_ddl:Gve},Kve={indonesia:"Indonesia",english:"Inggris"},Xve={language:Kve},Yve={search:"Cari..."},Qve={user:"Penguna",company:"Perusahaan",branch:"Cabang"},Jve={placeholder:Yve,search_group:Qve},eye={footer:{copyright:"Hak Cipta",copyright_name:"GitzJoey",contributors:"Kontributor",rights:"Seluruh hak cipta dilindungi.",powered_by:"Powered By Coffee & Curiosity."}},tye={slide_over:eye},aye="Print",nye="Export To Excel",sye="Export To PDF",oye="Data Tidak Ditemukan",rye="Menampilkan",iye="hingga",lye="dari",cye="data",dye={print:aye,export_to_excel:nye,export_to_pdf:sye,data_not_found:oye,showing:rye,to:iye,of:lye,entries:cye},uye="Data Tidak Ditemukan",pye={data_not_found:uye},hye="Konfirmasi",fye="Apakah Anda benar-benar ingin menghapus data ini?",mye="Proses ini tidak dapat dibatalkan.",vye={title:hye,desc_1:fye,desc_2:mye},yye="Pilih",_ye="atau seret dan lepas",gye="Kamera",kye="Ambil Foto",bye={browse:yye,or_drag_drop:_ye,camera:gye,capture:kye},wye="Login",xye={email:"Email",password:"Password",remember_me:"Ingat Aku",forgot_pass:"Lupa Password","2fa":{label:"Tantangan Dua Faktor",label_description:"",code:"Kode",recovery_code:"Kode Pemulihan",use_recovery_codes:"Menggunakan Recovery Codes"}},Mye={title:wye,fields:xye},Cye="Daftar Baru",Sye="Nama",Iye="Email",Lye="Password",$ye="Konfirmasi Password",Aye="Terms",Eye="I agree to the ",Tye="terms",Pye="I already have a membership",Dye="Terms & Condition",Rye={title:Cye,name:Sye,email:Iye,password:Lye,password_confirmation:$ye,terms:Aye,agree_1:Eye,agree_2:Tye,already_member:Pye,terms_and_cond:Dye},Oye="Reset Password",Vye="Reset Password",Uye="Silahkan masukan Email",Fye={email:"Email"},jye={successfully_send_link:"Kami telah mengirimkan email tautan setel ulang kata sandi Anda."},Hye={title:Oye,page_title:Vye,page_title_desc:Uye,fields:Fye,alert:jye},Nye="Reset Password",zye="Reset Password",Bye="Silahkan masukan password baru",qye={email:"Email",password:"Password",password_confirmation:"Confirm password"},Wye={successfully_reset_password:"Password berhasil dirubah."},Gye={title:Nye,page_title:zye,page_title_desc:Bye,fields:qye,alert:Wye},Zye="Profil",Kye={user_profile:"Profil Pengguna",email_verification:"Verifikasi Email",personal_information:"Informasi Pribadi",account_settings:"Pengaturan Akun",roles:"Peran",change_password:"Ubah Password",api_token:"API Token",two_factor_authentication:"Verifikasi Dua Langkah"},Xye={name:"Nama",first_name:"Nama Depan",last_name:"Nama Keluarga",address:"Alamat",city:"Kota",postal_code:"Kode Pos",country:"Negara",tax_id:"NPWP",remarks:"Keterangan",email:"Email",ic_num:"KTP",settings:{theme:"Tema",date_format:"Format Tanggal",time_format:"Format Waktu"},change_password:{current_password:"Password Sekarang",password:"Password Baru",password_confirmation:"Konfirmasi Password Baru"},api_token:{total_token_generated:"Jumlah Token Yang Dimiliki",reset:"Reset Token"},"2fa":{status:"Status Verifikasi Dua Langkah","qr-code":"QR Code","qr-code_description_1":"Silakan Pindai Kode QR Ini Di Aplikasi Google Authenticator Anda","qr-code_description_2":"Unduh Google Authenticator di Google Play","qr-code_description_3":"","qr-code_description_4":"","recovery-codes":"Recovery Codes","recovery-codes_description_1":"Catat Dan Simpan Recovery Codes Ini Di Tempat Yang Aman.","recovery-codes_description_2":"Kode Ini Tidak Akan Dapat Diakses Setelah Anda Menutup Halaman Ini.","secret-key":"Kunci Rahasia","secret-key_description_1":"Catat Dan Simpan Secret Key Ini Di Tempat Yang Aman.","secret-key_description_2":"Secret Key Ini Tidak Akan Dapat Diakses Setelah Anda Menutup Halaman Ini.",confirm_password:"Konfirmasi Password",confirm_password_error:"Kata Sandi Yang Diberikan Salah.",confirm_2fa_auth_description_1:"Otentikasi Dua Faktor Anda Juga Perlu Diaktifkan.",confirm_2fa_auth_description_2:"Silakan Masukkan Kode Yang Ditampilkan Di Aplikasi Google Authenticator",confirm_2fa_auth:"Kode Dari Google Authenticator",confirm_2fa_auth_error:"Kode Yang Diberikan Salah."}},Yye={email_verified:"Email terverifikasi"},Qye={verification_email_sent:{title:"Email Verifikasi",content:"Email verifikasi terkirim"}},Jye={title:Zye,field_groups:Kye,fields:Xye,tooltip:Yye,alert:Qye},e_e="Pengguna",t_e={title:"Daftar Pengguna",cols:{name:"Nama",email:"Email",roles:"Peran",status:"Status"}},a_e={create:"Tambah Pengguna",edit:"Ubah Pengguna",show:"Tampilkan Pengguna"},n_e={user_info:"Informasi Pengguna",user_profile:"Profil Pengguna",roles:"Roles",settings:"Settings",tokens_management:"Tokens Management",password_management:"Password Management",two_factor_auth:"Verifikasi Dua Langkah"},s_e={name:"Nama",email:"Email",roles:"Peran",picture:"Foto",first_name:"Nama Depan",last_name:"Nama Belakang",address:"Alamat",ic_num:"Nomor KTP",country:"Negara",remarks:"Deskripsi",status:"Status",tax_id:"No NPWP",postal_code:"Kode Pos",city:"Kota",settings:{settings:"Pengaturan",theme:"Tema",date_format:"Format Tanggal",time_format:"Format Waktu"},tokens:{tokens:"Tokens",count:"Jumlah Tokens",reset:"Reset"},reset_password:"Reset Password",email_reset_password:"Kirim Email",reset_2fa:"Reset Verifikasi Dua Langkah"},o_e={page_title:e_e,table:t_e,actions:a_e,field_groups:n_e,fields:s_e},r_e="Perusahaan",i_e={title:"Daftar Perusahaan",cols:{code:"Kode",name:"Nama",address:"Alamat",default:"Default",status:"Status"}},l_e={create:"Tambah Perusahaan",edit:"Ubah Perusahaan",show:"Tampilkan Perusahaan",delete:"Hapus Perusahaan"},c_e={company_data:"Data Perusahaan"},d_e={code:"Kode",name:"Nama",address:"Alamat",default:"Default",status:"Status"},u_e={delete_company:{title:"Hapus Perusahaan",content:"Perusahaan Berhasil Dihapus"}},p_e={page_title:r_e,table:i_e,actions:l_e,field_groups:c_e,fields:d_e,alert:u_e},h_e="Cabang",f_e={title:"Daftar Cabang",cols:{code:"Kode",name:"Nama",address:"Alamat",city:"Kota",contact:"Kontak",is_main:"Cabang Utama",remarks:"Keterangan",status:"Status"}},m_e={create:"Tambah Cabang",edit:"Ubah Cabang",show:"Tampilkan Cabang",delete:"Hapus Cabang"},v_e={company_info:"Informasi Perusahaan",branch_data:"Data Cabang"},y_e={company_id:"Perusahaan",code:"Kode",name:"Nama",address:"Alamat",city:"Kota",contact:"Kontak",is_main:"Cabang Utama",remarks:"Keterangan",status:"Status"},__e={delete_branch:{title:"Hapus Cabang",content:"Cabang Berhasil Dihapus"}},g_e={page_title:h_e,table:f_e,actions:m_e,field_groups:v_e,fields:y_e,alert:__e},k_e="Gudang",b_e={title:"Daftar Gudang",cols:{code:"Kode",name:"Nama",address:"Alamat",city:"Kota",contact:"Kontak",is_main:"Gudang Utama",remarks:"Keterangan",status:"Status"}},w_e={create:"Tambah Gudang",edit:"Ubah Gudang",show:"Tampilkan Gudang",delete:"Hapus Gudang"},x_e={company_info:"Informasi Perusahaan",warehouse_data:"Data Gudang"},M_e={company_id:"Perusahaan",code:"Kode",name:"Nama",address:"Alamat",city:"Kota",contact:"Kontak",is_main:"Gudang Utama",remarks:"Keterangan",status:"Status"},C_e={delete_warehouse:{title:"Hapus Gudang",content:"Gudang Berhasil Dihapus"}},S_e={page_title:k_e,table:b_e,actions:w_e,field_groups:x_e,fields:M_e,alert:C_e},I_e="Kategori Produk",L_e={title:"Daftar Kategori Produk",cols:{code:"Kode",name:"Nama",type:"Tipe"}},$_e={create:"Tambah Kategori Produk",edit:"Ubah Kategori Produk",show:"Tampilkan Kategori Produk",delete:"Hapus Kategori Produk"},A_e={company_info:"Informasi Perusahaan",product_category_data:"Data Kategori Produk"},E_e={company_id:"Perusahaan",code:"Kode",name:"Nama",type:"Tipe"},T_e={product:"Produk",service:"Jasa"},P_e={delete_product_category:{title:"Hapus Kategori Produk",content:"Kategori Produk Berhasil Dihapus"}},D_e={page_title:I_e,table:L_e,actions:$_e,field_groups:A_e,fields:E_e,type:T_e,alert:P_e},R_e="Brand",O_e={title:"Daftar Brand",cols:{code:"Kode",name:"Nama"}},V_e={create:"Tambah Brand",edit:"Ubah Brand",show:"Tampilkan Brand",delete:"Hapus Brand"},U_e={company_info:"Informasi Perusahaan",brand_data:"Data Brand"},F_e={company_id:"Perusahaan",code:"Kode",name:"Nama"},j_e={delete_brand:{title:"Hapus Brand",content:"Brand Berhasil Dihapus"}},H_e={page_title:R_e,table:O_e,actions:V_e,field_groups:U_e,fields:F_e,alert:j_e},N_e="Satuan",z_e={title:"Daftar Satuan",cols:{code:"Kode",name:"Nama",description:"Deskripsi",type:"Tipe"}},B_e={create:"Buat Satuan",edit:"Ubah Satuan",show:"Lihat Satuan",delete:"Hapus Satuan"},q_e={company_info:"Info Perusahaan",unit_data:"Data Satuan"},W_e={company_id:"Perusahaan",code:"Kode",name:"Nama",description:"Deskripsi",type:"Tipe"},G_e={unit_type:{product:"Produk",service:"Jasa"}},Z_e={delete_unit:{title:"Hapus Satuan",content:"Satuan Berhasil Dihapus"}},K_e={page_title:N_e,table:z_e,actions:B_e,field_groups:q_e,fields:W_e,enums:G_e,alert:Z_e},X_e="Grup Pelanggan",Y_e={title:"Daftar Grup Pelanggan",cols:{code:"Kode",name:"Nama",max_open_invoice:"Maks. Faktur Terbuka",max_outstanding_invoice:"Maks. Faktur Belum Lunas",max_invoice_age:"Maks. Umur Faktur",payment_term_type:"Jenis Termin Pembayaran",payment_term:"Termin Pembayaran",selling_point:"Poin Penjualan",selling_point_multiple:"Kelipatan Poin Penjualan",sell_at_cost:"Jual Sesuai Modal",price_markup_percent:"Markup Harga (%)",price_markup_nominal:"Markup Harga (Nominal)",price_markdown_percent:"Markdown Harga (%)",price_markdown_nominal:"Markdown Harga (Nominal)",round_on:"Pembulatan Pada",round_digit:"Digit Pembulatan",remarks:"Catatan",status:"Status"}},Q_e={create:"Buat Grup Pelanggan",edit:"Ubah Grup Pelanggan",show:"Tampilkan Grup Pelanggan",delete:"Hapus Grup Pelanggan"},J_e={general_information:"Informasi Umum",credit_limit:"Batas Kredit",pricing_and_points:"Harga dan Poin",rounding_rules:"Aturan Pembulatan"},ege={code:"Kode",name:"Nama",max_open_invoice:"Maks. Faktur Terbuka",max_outstanding_invoice:"Maks. Faktur Belum Lunas",max_invoice_age:"Maks. Umur Faktur",payment_term_type:"Jenis Termin Pembayaran",payment_term:"Termin Pembayaran",selling_point:"Poin Penjualan",selling_point_multiple:"Kelipatan Poin Penjualan",sell_at_cost:"Jual Sesuai Modal",price_markup_percent:"Markup Harga (%)",price_markup_nominal:"Markup Harga (Nominal)",price_markdown_percent:"Markdown Harga (%)",price_markdown_nominal:"Markdown Harga (Nominal)",rounding_type:"Tipe Pembulatan",rounding_digit:"Digit Pembulatan",round_on:"Pembulatan Pada",round_digit:"Digit Pembulatan",remarks:"Catatan",status:"Status"},tge={delete_customer_group:{title:"Hapus Grup Pelanggan",content:"Grup Pelanggan Berhasil Dihapus"}},age={page_title:X_e,table:Y_e,actions:Q_e,field_groups:J_e,fields:ege,alert:tge},nge="Pelanggan",sge={title:"Daftar Pelanggan",cols:{code:"Kode",name:"Nama",is_member:"Anggota",group:"Grup",zone:"Zona",max_open_invoice:"Maks Faktur Terbuka",max_outstanding_invoice:"Maks Faktur Belum Lunas",max_invoice_age:"Maks Umur Faktur",payment_term_type:"Tipe Syarat Pembayaran",payment_term:"Syarat Pembayaran",taxable_enterprise:"Pengusaha Kena Pajak",tax_id:"NPWP",remarks:"Catatan",status:"Status"}},oge={create:"Buat Pelanggan",edit:"Ubah Pelanggan",show:"Lihat Pelanggan",delete:"Hapus Pelanggan"},rge={general_information:"Informasi Umum",credit_limit:"Batas Kredit",tax_information:"Informasi Pajak"},ige={code:"Kode",name:"Nama",is_member:"Anggota",group:"Grup",zone:"Zona",max_open_invoice:"Maks Faktur Terbuka",max_outstanding_invoice:"Maks Faktur Belum Lunas",max_invoice_age:"Maks Umur Faktur",payment_term_type:"Tipe Syarat Pembayaran",payment_term:"Syarat Pembayaran",taxable_enterprise:"Pengusaha Kena Pajak",tax_id:"NPWP",remarks:"Catatan",status:"Status"},lge={delete:{title:"Hapus Pelanggan",message:"Pelanggan Berhasil Dihapus"}},cge={page_title:nge,table:sge,actions:oge,field_groups:rge,fields:ige,alert:lge},dge="Investor",uge={title:"Daftar Investor",cols:{code:"Kode",company:"Perusahaan",name:"Nama",remarks:"Keterangan"}},pge={create:"Buat Investor",edit:"Edit Investor",show:"Lihat Investor",delete:"Hapus Investor"},hge={company_info:"Informasi Perusahaan",investor_data:"Data Investor"},fge={code:"Kode",company:"Perusahaan",name:"Nama",remarks:"Keterangan"},mge={delete_investor:{title:"Hapus Investor",content:"Investor berhasil dihapus"}},vge={page_title:dge,table:uge,actions:pge,field_groups:hge,fields:fge,alert:mge},yge="Akun Kas",_ge={title:"Daftar Akun Kas",cols:{code:"Kode",company:"Perusahaan",name:"Nama",is_bank:"Bank",is_active:"Aktif",remarks:"Keterangan"}},gge={create:"Buat Akun Kas",edit:"Ubah Akun Kas",show:"Lihat Akun Kas",delete:"Hapus Akun Kas"},kge={code:"Kode",company:"Perusahaan",name:"Nama",is_bank:"Bank",is_active:"Aktif",remarks:"Keterangan"},bge={company_info:"Info Perusahaan",cash_account_data:"Data Akun Kas"},wge={delete_cash_account:{title:"Hapus Akun Kas",content:"Akun Kas Berhasil Dihapus"}},xge={page_title:yge,table:_ge,actions:gge,fields:kge,field_groups:bge,alert:wge},Mge="Produk Jasa",Cge={title:"Daftar Produk Jasa",cols:{code:"Kode",name:"Nama",category:"Kategori",unit:"Satuan",price:"Harga",point:"Poin",status:"Status"}},Sge={create:"Buat Produk Jasa",edit:"Ubah Produk Jasa",show:"Lihat Produk Jasa",delete:"Hapus Produk Jasa"},Ige={company_info:"Info Perusahaan",product_data:"Data Produk",price_tax_settings:"Pengaturan Harga & Pajak",other_settings:"Pengaturan Lainnya"},Lge={company_id:"Perusahaan",code:"Kode",name:"Nama",category_id:"Kategori",unit_id:"Satuan",price:"Harga",point:"Poin",is_taxable:"Kena Pajak",vat_rate:"Tarif PPN",is_price_include_vat:"Harga Termasuk PPN",status:"Status",remarks:"Keterangan"},$ge={active:"Aktif",inactive:"Tidak Aktif"},Age={create:{title:"Buat Produk Jasa",message:"Produk Jasa Berhasil Dibuat"},update:{title:"Ubah Produk Jasa",message:"Produk Jasa Berhasil Diubah"},delete:{title:"Hapus Produk Jasa",message:"Produk Jasa Berhasil Dihapus"}},Ege={page_title:Mge,table:Cge,actions:Sge,field_groups:Ige,fields:Lge,status:$ge,alert:Age},Tge="Produk",Pge="Produk dengan Sisa Stok",Dge="Dengan Sisa Stok",Rge={title:"Daftar Produk",cols:{code:"Kode",name:"Nama",category:"Kategori",brand:"Merek",unit:"Satuan",price:"Harga",point:"Poin",status:"Status",image:"Gambar"}},Oge={create:"Buat Produk",edit:"Ubah Produk",show:"Lihat Produk",delete:"Hapus Produk"},Vge={company_info:"Info Perusahaan",product_data:"Data Produk",price_tax_settings:"Pengaturan Harga & Pajak",unit_settings:"Pengaturan Satuan",other_settings:"Pengaturan Lainnya"},Uge={info_title:"Informasi Produk",settings_title:"Pengaturan & Pajak",units_title:"Satuan Produk"},Fge={company_id:"Perusahaan",code:"Kode",name:"Nama",category_id:"Kategori",brand_id:"Merek",unit_id:"Satuan",base_unit:"Satuan Dasar",base_unit_price:"Harga per Satuan Dasar",other_unit:"Satuan Lain",images:"Gambar",conversion_value:"Isi",unit_code:"Kode Satuan",is_primary_unit:"Satuan Utama",is_manufacturer_sku:"SKU Pabrik",price:"Harga",point:"Poin",is_taxable:"Kena Pajak",vat_rate:"Tarif PPN",is_price_include_vat:"Harga Termasuk PPN",is_use_serial_number:"Gunakan Nomor Seri",serial_number:"Nomor Seri",is_expirable:"Dapat Kedaluwarsa",status:"Status",remarks:"Keterangan",with_remaining_stock_end_date:"s/d Tanggal"},jge={active:"Aktif",inactive:"Tidak Aktif"},Hge={create:{title:"Buat Produk",message:"Produk Berhasil Dibuat"},update:{title:"Ubah Produk",message:"Produk Berhasil Diubah"},delete:{title:"Hapus Produk",message:"Produk Berhasil Dihapus"}},Nge={page_title:Tge,page_title_with_remaining_stock:Pge,with_remaining_stock_suffix:Dge,table:Rge,actions:Oge,field_groups:Vge,detail:Uge,fields:Fge,status:jge,alert:Hge},zge="Pemasok",Bge={title:"Daftar Pemasok",cols:{code:"Kode",name:"Nama",address:"Alamat",city:"Kota",payment_term_type:"Tipe Termin",payment_term:"Termin",taxable_enterprise:"PKP",tax_id:"NPWP",status:"Status",remarks:"Keterangan"}},qge={create:"Buat Pemasok",edit:"Ubah Pemasok",show:"Lihat Pemasok",delete:"Hapus Pemasok"},Wge={general:"Informasi Umum",finance:"Informasi Keuangan"},Gge={company_id:"Perusahaan",code:"Kode",name:"Nama",address:"Alamat",city:"Kota",payment_term_type:"Tipe Termin Pembayaran",payment_term:"Termin Pembayaran",taxable_enterprise:"Pengusaha Kena Pajak",tax_id:"NPWP",status:"Status",remarks:"Keterangan"},Zge={delete:{title:"Hapus Pemasok",message:"Pemasok Berhasil Dihapus"}},Kge={page_title:zge,table:Bge,actions:qge,field_groups:Wge,fields:Gge,alert:Zge},Xge="Kategori Penyesuaian Stok",Yge={title:"Daftar Kategori Penyesuaian Stok",cols:{code:"Kode",name:"Nama"}},Qge={create:"Tambah Kategori Penyesuaian Stok",edit:"Ubah Kategori Penyesuaian Stok",show:"Tampilkan Kategori Penyesuaian Stok",delete:"Hapus Kategori Penyesuaian Stok"},Jge={company_info:"Informasi Perusahaan",stock_adjustment_category_data:"Data Kategori Penyesuaian Stok"},eke={company_id:"Perusahaan",code:"Kode",name:"Nama"},tke={delete_stock_adjustment_category:{title:"Hapus Kategori Penyesuaian Stok",content:"Kategori Penyesuaian Stok Berhasil Dihapus"}},ake={page_title:Xge,table:Yge,actions:Qge,field_groups:Jge,fields:eke,alert:tke},nke="Penyesuaian Stok",ske={title:"Daftar Penyesuaian Stok",cols:{code:"Kode",date:"Tanggal",category:"Kategori",in_warehouse:"Gudang Masuk",out_warehouse:"Gudang Keluar",is_posted:"Diposting",remarks:"Catatan"}},oke={create:"Tambah Penyesuaian Stok",edit:"Ubah Penyesuaian Stok",show:"Tampilkan Penyesuaian Stok",delete:"Hapus Penyesuaian Stok"},rke={company_info:"Informasi Perusahaan",stock_adjustment_data:"Data Penyesuaian Stok",in_products:"Produk Masuk",out_products:"Produk Keluar"},ike={company_id:"Perusahaan",branch_id:"Cabang",code:"Kode",date:"Tanggal",start_date:"Tanggal Awal",end_date:"Tanggal Akhir",stock_adjustment_code:"Kode Penyesuaian Stok",product_name:"Nama Produk",product_unit_code:"Kode Produk",category_id:"Kategori",in_warehouse_id:"Gudang Masuk",out_warehouse_id:"Gudang Keluar",remarks:"Catatan",is_posted:"Diposting",in_products:"Produk Masuk",out_products:"Produk Keluar"},lke={create:{title:"Tambah Penyesuaian Stok",message:"Penyesuaian Stok Berhasil Ditambahkan"},update:{title:"Ubah Penyesuaian Stok",message:"Penyesuaian Stok Berhasil Diperbarui"},delete:{title:"Hapus Penyesuaian Stok",message:"Penyesuaian Stok Berhasil Dihapus"}},cke={page_title:nke,table:ske,actions:oke,field_groups:rke,fields:ike,alert:lke},dke="Penyesuaian Stok (Produk Masuk)",uke={title:"Daftar Produk Masuk Penyesuaian Stok",cols:{product:"Produk",qty:"Qty",product_unit:"Satuan Produk",remaining_stock:"Sisa Stok",product_unit_conversion_value:"Isi",product_unit_cogs:"HPP Satuan",product_unit_total_cogs:"Total HPP",remarks:"Catatan"}},pke={create:"Tambah Produk Masuk",edit:"Ubah Produk Masuk",show:"Detail Produk Masuk",delete:"Hapus Produk Masuk"},hke={company_id:"Perusahaan",branch_id:"Cabang",stock_adjustment_id:"Penyesuaian Stok",qty:"Qty",product_unit_id:"Satuan Produk",product_unit_conversion_value:"Isi",product_unit_cogs:"HPP Satuan",product_unit_total_cogs:"Total HPP",remarks:"Catatan"},fke={page_title:dke,table:uke,actions:pke,fields:hke},mke="Serial Produk Masuk Penyesuaian Stok",vke={title:"Serial Produk Masuk Penyesuaian Stok",cols:{stock_adjustment_code:"Kode",product_name:"Produk",serial:"Serial"}},yke={create:"Tambah Serial",edit:"Ubah Serial",show:"Lihat Serial",delete:"Hapus Serial"},_ke={stock_adjustment_id:"Penyesuaian Stok",stock_adjustment_in_product_id:"Produk Masuk",serial:"Serial"},gke={page_title:mke,table:vke,actions:yke,fields:_ke},kke="Penyesuaian Stok (Produk Keluar)",bke={title:"Daftar Produk Keluar Penyesuaian Stok",cols:{product:"Produk",qty:"Qty",product_unit:"Satuan Produk",remaining_stock:"Sisa Stok",product_unit_conversion_value:"Nilai Konversi",product_unit_cogs:"HPP Satuan",remarks:"Catatan"}},wke={create:"Tambah Produk Keluar",edit:"Ubah Produk Keluar",show:"Detail Produk Keluar",delete:"Hapus Produk Keluar"},xke={company_id:"Perusahaan",branch_id:"Cabang",stock_adjustment_id:"Penyesuaian Stok",qty:"Qty",product_id:"Produk",product_unit_id:"Satuan Produk",product_unit_conversion_value:"Nilai Konversi",remarks:"Catatan"},Mke={page_title:kke,table:bke,actions:wke,fields:xke},Cke="Serial Produk Keluar Penyesuaian Stok",Ske={title:"Serial Produk Keluar Penyesuaian Stok",cols:{stock_adjustment_code:"Kode",product_name:"Produk",serial:"Serial"}},Ike={create:"Tambah Serial",edit:"Ubah Serial",show:"Lihat Serial",delete:"Hapus Serial"},Lke={stock_adjustment_id:"Penyesuaian Stok",stock_adjustment_out_product_id:"Produk Keluar",serial:"Serial"},$ke={page_title:Cke,table:Ske,actions:Ike,fields:Lke},Ake="Error",Eke={401:"Unauthenticated",403:"Forbidden",500:"Internal Error",1e4:"Please Choose User Location"},Tke={title:Ake,code:Eke},Pke={components:{menu:gve,"alert-placeholder":zve,buttons:jve,dropdown:Wve,"data-list":dye,"user-location":pye,"delete-modal":vye,"file-upload":bye,"profile-menu":Zve,"language-switcher":Xve,"search-box":Jve,"sidebar-pop":tye},views:{login:Mye,register:Rye,forgot_password:Hye,reset_password:Gye,profile:Jye,user:o_e,company:p_e,branch:g_e,warehouse:S_e,product_category:D_e,brand:H_e,unit:K_e,product_service:Ege,product:Nge,supplier:Kge,customer_group:age,customer:cge,investor:vge,cash_account:xge,stock_adjustment_category:ake,stock_adjustment:cke,stock_adjustment_in_product:fke,stock_adjustment_in_product_serial:gke,stock_adjustment_out_product:Mke,stock_adjustment_out_product_serial:$ke,error:Tke}},Dke=document.documentElement.lang,Iz=Mle({legacy:!1,locale:Dke,fallbackLocale:"en",messages:{en:tve,id:Pke},missingWarn:!1,fallbackWarn:!1});function Rke(n){Iz.global.locale.value=n,document.documentElement.setAttribute("lang",n),localStorage.setItem("DCSLAB_LANG",n)}const Oke={class:"text-primary"},Vke={class:"text-primary"},Hc=Ce({__name:"LanguageSwitcher",props:{visible:{type:Boolean,default:!0},theme:{default:"rubick"},layout:{default:"side-menu"}},setup(n){const{t:e}=tt(),a=n,s=r=>{Rke(r)},o=ee(()=>At([a.theme=="rubick"&&a.layout=="side-menu"&&"",a.theme=="enigma"&&"text-white",a.theme=="tinker"&&"text-white",a.theme=="icewall"&&"text-white","hover:animate-spin"]));return(r,i)=>(L(),ge(t(Xa),{class:"mr-4 intro-x sm:mr-6"},{default:f(()=>[l(t(Xa).Button,{variant:"primary"},{default:f(()=>[l(t(re),{icon:"Globe",class:F(o.value)},null,8,["class"])]),_:1}),l(t(Xa).Items,{class:"w-48 h-24 overflow-y-auto",placement:"bottom-end"},{default:f(()=>[l(t(Xa).Item,{onClick:i[0]||(i[0]=u=>s("en"))},{default:f(()=>[c("span",Oke,_(t(e)("components.language-switcher.language.english")),1)]),_:1}),l(t(Xa).Item,{onClick:i[1]||(i[1]=u=>s("id"))},{default:f(()=>[c("span",Vke,_(t(e)("components.language-switcher.language.indonesia")),1)]),_:1})]),_:1})]),_:1}))}}),Uke="/assets/def-user-CUyK0U-V.png";var Lz=typeof global=="object"&&global&&global.Object===Object&&global,Fke=typeof self=="object"&&self&&self.Object===Object&&self,lo=Lz||Fke||Function("return this")(),qs=lo.Symbol,$z=Object.prototype,jke=$z.hasOwnProperty,Hke=$z.toString,vd=qs?qs.toStringTag:void 0;function Nke(n){var e=jke.call(n,vd),a=n[vd];try{n[vd]=void 0;var s=!0}catch{}var o=Hke.call(n);return s&&(e?n[vd]=a:delete n[vd]),o}var zke=Object.prototype,Bke=zke.toString;function qke(n){return Bke.call(n)}var Wke="[object Null]",Gke="[object Undefined]",qU=qs?qs.toStringTag:void 0;function Hl(n){return n==null?n===void 0?Gke:Wke:qU&&qU in Object(n)?Nke(n):qke(n)}function Ao(n){return n!=null&&typeof n=="object"}var Zke="[object Symbol]";function h9(n){return typeof n=="symbol"||Ao(n)&&Hl(n)==Zke}function Az(n,e){for(var a=-1,s=n==null?0:n.length,o=Array(s);++a<s;)o[a]=e(n[a],a,n);return o}var ro=Array.isArray,Kke=1/0,WU=qs?qs.prototype:void 0,GU=WU?WU.toString:void 0;function Ez(n){if(typeof n=="string")return n;if(ro(n))return Az(n,Ez)+"";if(h9(n))return GU?GU.call(n):"";var e=n+"";return e=="0"&&1/n==-Kke?"-0":e}var Xke=/\s/;function Yke(n){for(var e=n.length;e--&&Xke.test(n.charAt(e)););return e}var Qke=/^\s+/;function Jke(n){return n&&n.slice(0,Yke(n)+1).replace(Qke,"")}function is(n){var e=typeof n;return n!=null&&(e=="object"||e=="function")}var ZU=NaN,ebe=/^[-+]0x[0-9a-f]+$/i,tbe=/^0b[01]+$/i,abe=/^0o[0-7]+$/i,nbe=parseInt;function KU(n){if(typeof n=="number")return n;if(h9(n))return ZU;if(is(n)){var e=typeof n.valueOf=="function"?n.valueOf():n;n=is(e)?e+"":e}if(typeof n!="string")return n===0?n:+n;n=Jke(n);var a=tbe.test(n);return a||abe.test(n)?nbe(n.slice(2),a?2:8):ebe.test(n)?ZU:+n}function Tz(n){return n}var sbe="[object AsyncFunction]",obe="[object Function]",rbe="[object GeneratorFunction]",ibe="[object Proxy]";function lP(n){if(!is(n))return!1;var e=Hl(n);return e==obe||e==rbe||e==sbe||e==ibe}var vA=lo["__core-js_shared__"],XU=function(){var n=/[^.]+$/.exec(vA&&vA.keys&&vA.keys.IE_PROTO||"");return n?"Symbol(src)_1."+n:""}();function lbe(n){return!!XU&&XU in n}var cbe=Function.prototype,dbe=cbe.toString;function Nl(n){if(n!=null){try{return dbe.call(n)}catch{}try{return n+""}catch{}}return""}var ube=/[\\^$.*+?()[\]{}|]/g,pbe=/^\[object .+?Constructor\]$/,hbe=Function.prototype,fbe=Object.prototype,mbe=hbe.toString,vbe=fbe.hasOwnProperty,ybe=RegExp("^"+mbe.call(vbe).replace(ube,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function _be(n){if(!is(n)||lbe(n))return!1;var e=lP(n)?ybe:pbe;return e.test(Nl(n))}function gbe(n,e){return n==null?void 0:n[e]}function zl(n,e){var a=gbe(n,e);return _be(a)?a:void 0}var AE=zl(lo,"WeakMap"),YU=Object.create,kbe=function(){function n(){}return function(e){if(!is(e))return{};if(YU)return YU(e);n.prototype=e;var a=new n;return n.prototype=void 0,a}}();function bbe(n,e,a){switch(a.length){case 0:return n.call(e);case 1:return n.call(e,a[0]);case 2:return n.call(e,a[0],a[1]);case 3:return n.call(e,a[0],a[1],a[2])}return n.apply(e,a)}function Pz(n,e){var a=-1,s=n.length;for(e||(e=Array(s));++a<s;)e[a]=n[a];return e}var wbe=800,xbe=16,Mbe=Date.now;function Cbe(n){var e=0,a=0;return function(){var s=Mbe(),o=xbe-(s-a);if(a=s,o>0){if(++e>=wbe)return arguments[0]}else e=0;return n.apply(void 0,arguments)}}function Sbe(n){return function(){return n}}var SL=function(){try{var n=zl(Object,"defineProperty");return n({},"",{}),n}catch{}}(),Ibe=SL?function(n,e){return SL(n,"toString",{configurable:!0,enumerable:!1,value:Sbe(e),writable:!0})}:Tz;const Lbe=Ibe;var Dz=Cbe(Lbe);function $be(n,e){for(var a=-1,s=n==null?0:n.length;++a<s&&e(n[a],a,n)!==!1;);return n}var Abe=9007199254740991,Ebe=/^(?:0|[1-9]\d*)$/;function cP(n,e){var a=typeof n;return e=e??Abe,!!e&&(a=="number"||a!="symbol"&&Ebe.test(n))&&n>-1&&n%1==0&&n<e}function dP(n,e,a){e=="__proto__"&&SL?SL(n,e,{configurable:!0,enumerable:!0,value:a,writable:!0}):n[e]=a}function yu(n,e){return n===e||n!==n&&e!==e}var Tbe=Object.prototype,Pbe=Tbe.hasOwnProperty;function uP(n,e,a){var s=n[e];(!(Pbe.call(n,e)&&yu(s,a))||a===void 0&&!(e in n))&&dP(n,e,a)}function Nc(n,e,a,s){var o=!a;a||(a={});for(var r=-1,i=e.length;++r<i;){var u=e[r],h=s?s(a[u],n[u],u,a,n):void 0;h===void 0&&(h=n[u]),o?dP(a,u,h):uP(a,u,h)}return a}var QU=Math.max;function Rz(n,e,a){return e=QU(e===void 0?n.length-1:e,0),function(){for(var s=arguments,o=-1,r=QU(s.length-e,0),i=Array(r);++o<r;)i[o]=s[e+o];o=-1;for(var u=Array(e+1);++o<e;)u[o]=s[o];return u[e]=a(i),bbe(n,this,u)}}function Dbe(n,e){return Dz(Rz(n,e,Tz),n+"")}var Rbe=9007199254740991;function Oz(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=Rbe}function f9(n){return n!=null&&Oz(n.length)&&!lP(n)}function Obe(n,e,a){if(!is(a))return!1;var s=typeof e;return(s=="number"?f9(a)&&cP(e,a.length):s=="string"&&e in a)?yu(a[e],n):!1}function Vbe(n){return Dbe(function(e,a){var s=-1,o=a.length,r=o>1?a[o-1]:void 0,i=o>2?a[2]:void 0;for(r=n.length>3&&typeof r=="function"?(o--,r):void 0,i&&Obe(a[0],a[1],i)&&(r=o<3?void 0:r,o=1),e=Object(e);++s<o;){var u=a[s];u&&n(e,u,s,r)}return e})}var Ube=Object.prototype;function pP(n){var e=n&&n.constructor,a=typeof e=="function"&&e.prototype||Ube;return n===a}function Fbe(n,e){for(var a=-1,s=Array(n);++a<n;)s[a]=e(a);return s}var jbe="[object Arguments]";function JU(n){return Ao(n)&&Hl(n)==jbe}var Vz=Object.prototype,Hbe=Vz.hasOwnProperty,Nbe=Vz.propertyIsEnumerable,IL=JU(function(){return arguments}())?JU:function(n){return Ao(n)&&Hbe.call(n,"callee")&&!Nbe.call(n,"callee")};function zbe(){return!1}var Uz=typeof ks=="object"&&ks&&!ks.nodeType&&ks,eF=Uz&&typeof bs=="object"&&bs&&!bs.nodeType&&bs,Bbe=eF&&eF.exports===Uz,tF=Bbe?lo.Buffer:void 0,qbe=tF?tF.isBuffer:void 0,Qd=qbe||zbe,Wbe="[object Arguments]",Gbe="[object Array]",Zbe="[object Boolean]",Kbe="[object Date]",Xbe="[object Error]",Ybe="[object Function]",Qbe="[object Map]",Jbe="[object Number]",ewe="[object Object]",twe="[object RegExp]",awe="[object Set]",nwe="[object String]",swe="[object WeakMap]",owe="[object ArrayBuffer]",rwe="[object DataView]",iwe="[object Float32Array]",lwe="[object Float64Array]",cwe="[object Int8Array]",dwe="[object Int16Array]",uwe="[object Int32Array]",pwe="[object Uint8Array]",hwe="[object Uint8ClampedArray]",fwe="[object Uint16Array]",mwe="[object Uint32Array]",Ba={};Ba[iwe]=Ba[lwe]=Ba[cwe]=Ba[dwe]=Ba[uwe]=Ba[pwe]=Ba[hwe]=Ba[fwe]=Ba[mwe]=!0;Ba[Wbe]=Ba[Gbe]=Ba[owe]=Ba[Zbe]=Ba[rwe]=Ba[Kbe]=Ba[Xbe]=Ba[Ybe]=Ba[Qbe]=Ba[Jbe]=Ba[ewe]=Ba[twe]=Ba[awe]=Ba[nwe]=Ba[swe]=!1;function vwe(n){return Ao(n)&&Oz(n.length)&&!!Ba[Hl(n)]}function hP(n){return function(e){return n(e)}}var Fz=typeof ks=="object"&&ks&&!ks.nodeType&&ks,Td=Fz&&typeof bs=="object"&&bs&&!bs.nodeType&&bs,ywe=Td&&Td.exports===Fz,yA=ywe&&Lz.process,Tc=function(){try{var n=Td&&Td.require&&Td.require("util").types;return n||yA&&yA.binding&&yA.binding("util")}catch{}}(),aF=Tc&&Tc.isTypedArray,fP=aF?hP(aF):vwe,_we=Object.prototype,gwe=_we.hasOwnProperty;function jz(n,e){var a=ro(n),s=!a&&IL(n),o=!a&&!s&&Qd(n),r=!a&&!s&&!o&&fP(n),i=a||s||o||r,u=i?Fbe(n.length,String):[],h=u.length;for(var m in n)(e||gwe.call(n,m))&&!(i&&(m=="length"||o&&(m=="offset"||m=="parent")||r&&(m=="buffer"||m=="byteLength"||m=="byteOffset")||cP(m,h)))&&u.push(m);return u}function Hz(n,e){return function(a){return n(e(a))}}var kwe=Hz(Object.keys,Object),bwe=Object.prototype,wwe=bwe.hasOwnProperty;function xwe(n){if(!pP(n))return kwe(n);var e=[];for(var a in Object(n))wwe.call(n,a)&&a!="constructor"&&e.push(a);return e}function mP(n){return f9(n)?jz(n):xwe(n)}function Mwe(n){var e=[];if(n!=null)for(var a in Object(n))e.push(a);return e}var Cwe=Object.prototype,Swe=Cwe.hasOwnProperty;function Iwe(n){if(!is(n))return Mwe(n);var e=pP(n),a=[];for(var s in n)s=="constructor"&&(e||!Swe.call(n,s))||a.push(s);return a}function _u(n){return f9(n)?jz(n,!0):Iwe(n)}var Lwe=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,$we=/^\w*$/;function Awe(n,e){if(ro(n))return!1;var a=typeof n;return a=="number"||a=="symbol"||a=="boolean"||n==null||h9(n)?!0:$we.test(n)||!Lwe.test(n)||e!=null&&n in Object(e)}var Jd=zl(Object,"create");function Ewe(){this.__data__=Jd?Jd(null):{},this.size=0}function Twe(n){var e=this.has(n)&&delete this.__data__[n];return this.size-=e?1:0,e}var Pwe="__lodash_hash_undefined__",Dwe=Object.prototype,Rwe=Dwe.hasOwnProperty;function Owe(n){var e=this.__data__;if(Jd){var a=e[n];return a===Pwe?void 0:a}return Rwe.call(e,n)?e[n]:void 0}var Vwe=Object.prototype,Uwe=Vwe.hasOwnProperty;function Fwe(n){var e=this.__data__;return Jd?e[n]!==void 0:Uwe.call(e,n)}var jwe="__lodash_hash_undefined__";function Hwe(n,e){var a=this.__data__;return this.size+=this.has(n)?0:1,a[n]=Jd&&e===void 0?jwe:e,this}function Vl(n){var e=-1,a=n==null?0:n.length;for(this.clear();++e<a;){var s=n[e];this.set(s[0],s[1])}}Vl.prototype.clear=Ewe;Vl.prototype.delete=Twe;Vl.prototype.get=Owe;Vl.prototype.has=Fwe;Vl.prototype.set=Hwe;function Nwe(){this.__data__=[],this.size=0}function m9(n,e){for(var a=n.length;a--;)if(yu(n[a][0],e))return a;return-1}var zwe=Array.prototype,Bwe=zwe.splice;function qwe(n){var e=this.__data__,a=m9(e,n);if(a<0)return!1;var s=e.length-1;return a==s?e.pop():Bwe.call(e,a,1),--this.size,!0}function Wwe(n){var e=this.__data__,a=m9(e,n);return a<0?void 0:e[a][1]}function Gwe(n){return m9(this.__data__,n)>-1}function Zwe(n,e){var a=this.__data__,s=m9(a,n);return s<0?(++this.size,a.push([n,e])):a[s][1]=e,this}function cr(n){var e=-1,a=n==null?0:n.length;for(this.clear();++e<a;){var s=n[e];this.set(s[0],s[1])}}cr.prototype.clear=Nwe;cr.prototype.delete=qwe;cr.prototype.get=Wwe;cr.prototype.has=Gwe;cr.prototype.set=Zwe;var eu=zl(lo,"Map");function Kwe(){this.size=0,this.__data__={hash:new Vl,map:new(eu||cr),string:new Vl}}function Xwe(n){var e=typeof n;return e=="string"||e=="number"||e=="symbol"||e=="boolean"?n!=="__proto__":n===null}function v9(n,e){var a=n.__data__;return Xwe(e)?a[typeof e=="string"?"string":"hash"]:a.map}function Ywe(n){var e=v9(this,n).delete(n);return this.size-=e?1:0,e}function Qwe(n){return v9(this,n).get(n)}function Jwe(n){return v9(this,n).has(n)}function e4e(n,e){var a=v9(this,n),s=a.size;return a.set(n,e),this.size+=a.size==s?0:1,this}function dr(n){var e=-1,a=n==null?0:n.length;for(this.clear();++e<a;){var s=n[e];this.set(s[0],s[1])}}dr.prototype.clear=Kwe;dr.prototype.delete=Ywe;dr.prototype.get=Qwe;dr.prototype.has=Jwe;dr.prototype.set=e4e;var t4e="Expected a function";function vP(n,e){if(typeof n!="function"||e!=null&&typeof e!="function")throw new TypeError(t4e);var a=function(){var s=arguments,o=e?e.apply(this,s):s[0],r=a.cache;if(r.has(o))return r.get(o);var i=n.apply(this,s);return a.cache=r.set(o,i)||r,i};return a.cache=new(vP.Cache||dr),a}vP.Cache=dr;var a4e=500;function n4e(n){var e=vP(n,function(s){return a.size===a4e&&a.clear(),s}),a=e.cache;return e}var s4e=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,o4e=/\\(\\)?/g,r4e=n4e(function(n){var e=[];return n.charCodeAt(0)===46&&e.push(""),n.replace(s4e,function(a,s,o,r){e.push(o?r.replace(o4e,"$1"):s||a)}),e});function i4e(n){return n==null?"":Ez(n)}function y9(n,e){return ro(n)?n:Awe(n,e)?[n]:r4e(i4e(n))}var l4e=1/0;function yP(n){if(typeof n=="string"||h9(n))return n;var e=n+"";return e=="0"&&1/n==-l4e?"-0":e}function Nz(n,e){e=y9(e,n);for(var a=0,s=e.length;n!=null&&a<s;)n=n[yP(e[a++])];return a&&a==s?n:void 0}function LL(n,e,a){var s=n==null?void 0:Nz(n,e);return s===void 0?a:s}function _P(n,e){for(var a=-1,s=e.length,o=n.length;++a<s;)n[o+a]=e[a];return n}var nF=qs?qs.isConcatSpreadable:void 0;function c4e(n){return ro(n)||IL(n)||!!(nF&&n&&n[nF])}function zz(n,e,a,s,o){var r=-1,i=n.length;for(a||(a=c4e),o||(o=[]);++r<i;){var u=n[r];e>0&&a(u)?e>1?zz(u,e-1,a,s,o):_P(o,u):s||(o[o.length]=u)}return o}function d4e(n){var e=n==null?0:n.length;return e?zz(n,1):[]}function u4e(n){return Dz(Rz(n,void 0,d4e),n+"")}var p4e=Hz(Object.getPrototypeOf,Object);const gP=p4e;var h4e="[object Object]",f4e=Function.prototype,m4e=Object.prototype,Bz=f4e.toString,v4e=m4e.hasOwnProperty,y4e=Bz.call(Object);function qz(n){if(!Ao(n)||Hl(n)!=h4e)return!1;var e=gP(n);if(e===null)return!0;var a=v4e.call(e,"constructor")&&e.constructor;return typeof a=="function"&&a instanceof a&&Bz.call(a)==y4e}function _4e(n,e,a){var s=-1,o=n.length;e<0&&(e=-e>o?0:o+e),a=a>o?o:a,a<0&&(a+=o),o=e>a?0:a-e>>>0,e>>>=0;for(var r=Array(o);++s<o;)r[s]=n[s+e];return r}function g4e(){this.__data__=new cr,this.size=0}function k4e(n){var e=this.__data__,a=e.delete(n);return this.size=e.size,a}function b4e(n){return this.__data__.get(n)}function w4e(n){return this.__data__.has(n)}var x4e=200;function M4e(n,e){var a=this.__data__;if(a instanceof cr){var s=a.__data__;if(!eu||s.length<x4e-1)return s.push([n,e]),this.size=++a.size,this;a=this.__data__=new dr(s)}return a.set(n,e),this.size=a.size,this}function So(n){var e=this.__data__=new cr(n);this.size=e.size}So.prototype.clear=g4e;So.prototype.delete=k4e;So.prototype.get=b4e;So.prototype.has=w4e;So.prototype.set=M4e;function C4e(n,e){return n&&Nc(e,mP(e),n)}function S4e(n,e){return n&&Nc(e,_u(e),n)}var Wz=typeof ks=="object"&&ks&&!ks.nodeType&&ks,sF=Wz&&typeof bs=="object"&&bs&&!bs.nodeType&&bs,I4e=sF&&sF.exports===Wz,oF=I4e?lo.Buffer:void 0,rF=oF?oF.allocUnsafe:void 0;function Gz(n,e){if(e)return n.slice();var a=n.length,s=rF?rF(a):new n.constructor(a);return n.copy(s),s}function L4e(n,e){for(var a=-1,s=n==null?0:n.length,o=0,r=[];++a<s;){var i=n[a];e(i,a,n)&&(r[o++]=i)}return r}function Zz(){return[]}var $4e=Object.prototype,A4e=$4e.propertyIsEnumerable,iF=Object.getOwnPropertySymbols,kP=iF?function(n){return n==null?[]:(n=Object(n),L4e(iF(n),function(e){return A4e.call(n,e)}))}:Zz;function E4e(n,e){return Nc(n,kP(n),e)}var T4e=Object.getOwnPropertySymbols,Kz=T4e?function(n){for(var e=[];n;)_P(e,kP(n)),n=gP(n);return e}:Zz;function P4e(n,e){return Nc(n,Kz(n),e)}function Xz(n,e,a){var s=e(n);return ro(n)?s:_P(s,a(n))}function EE(n){return Xz(n,mP,kP)}function Yz(n){return Xz(n,_u,Kz)}var TE=zl(lo,"DataView"),PE=zl(lo,"Promise"),DE=zl(lo,"Set"),lF="[object Map]",D4e="[object Object]",cF="[object Promise]",dF="[object Set]",uF="[object WeakMap]",pF="[object DataView]",R4e=Nl(TE),O4e=Nl(eu),V4e=Nl(PE),U4e=Nl(DE),F4e=Nl(AE),wl=Hl;(TE&&wl(new TE(new ArrayBuffer(1)))!=pF||eu&&wl(new eu)!=lF||PE&&wl(PE.resolve())!=cF||DE&&wl(new DE)!=dF||AE&&wl(new AE)!=uF)&&(wl=function(n){var e=Hl(n),a=e==D4e?n.constructor:void 0,s=a?Nl(a):"";if(s)switch(s){case R4e:return pF;case O4e:return lF;case V4e:return cF;case U4e:return dF;case F4e:return uF}return e});const tu=wl;var j4e=Object.prototype,H4e=j4e.hasOwnProperty;function N4e(n){var e=n.length,a=new n.constructor(e);return e&&typeof n[0]=="string"&&H4e.call(n,"index")&&(a.index=n.index,a.input=n.input),a}var $L=lo.Uint8Array;function bP(n){var e=new n.constructor(n.byteLength);return new $L(e).set(new $L(n)),e}function z4e(n,e){var a=e?bP(n.buffer):n.buffer;return new n.constructor(a,n.byteOffset,n.byteLength)}var B4e=/\w*$/;function q4e(n){var e=new n.constructor(n.source,B4e.exec(n));return e.lastIndex=n.lastIndex,e}var hF=qs?qs.prototype:void 0,fF=hF?hF.valueOf:void 0;function W4e(n){return fF?Object(fF.call(n)):{}}function Qz(n,e){var a=e?bP(n.buffer):n.buffer;return new n.constructor(a,n.byteOffset,n.length)}var G4e="[object Boolean]",Z4e="[object Date]",K4e="[object Map]",X4e="[object Number]",Y4e="[object RegExp]",Q4e="[object Set]",J4e="[object String]",e5e="[object Symbol]",t5e="[object ArrayBuffer]",a5e="[object DataView]",n5e="[object Float32Array]",s5e="[object Float64Array]",o5e="[object Int8Array]",r5e="[object Int16Array]",i5e="[object Int32Array]",l5e="[object Uint8Array]",c5e="[object Uint8ClampedArray]",d5e="[object Uint16Array]",u5e="[object Uint32Array]";function p5e(n,e,a){var s=n.constructor;switch(e){case t5e:return bP(n);case G4e:case Z4e:return new s(+n);case a5e:return z4e(n,a);case n5e:case s5e:case o5e:case r5e:case i5e:case l5e:case c5e:case d5e:case u5e:return Qz(n,a);case K4e:return new s;case X4e:case J4e:return new s(n);case Y4e:return q4e(n);case Q4e:return new s;case e5e:return W4e(n)}}function Jz(n){return typeof n.constructor=="function"&&!pP(n)?kbe(gP(n)):{}}var h5e="[object Map]";function f5e(n){return Ao(n)&&tu(n)==h5e}var mF=Tc&&Tc.isMap,m5e=mF?hP(mF):f5e,v5e="[object Set]";function y5e(n){return Ao(n)&&tu(n)==v5e}var vF=Tc&&Tc.isSet,_5e=vF?hP(vF):y5e,g5e=1,k5e=2,b5e=4,eB="[object Arguments]",w5e="[object Array]",x5e="[object Boolean]",M5e="[object Date]",C5e="[object Error]",tB="[object Function]",S5e="[object GeneratorFunction]",I5e="[object Map]",L5e="[object Number]",aB="[object Object]",$5e="[object RegExp]",A5e="[object Set]",E5e="[object String]",T5e="[object Symbol]",P5e="[object WeakMap]",D5e="[object ArrayBuffer]",R5e="[object DataView]",O5e="[object Float32Array]",V5e="[object Float64Array]",U5e="[object Int8Array]",F5e="[object Int16Array]",j5e="[object Int32Array]",H5e="[object Uint8Array]",N5e="[object Uint8ClampedArray]",z5e="[object Uint16Array]",B5e="[object Uint32Array]",Ua={};Ua[eB]=Ua[w5e]=Ua[D5e]=Ua[R5e]=Ua[x5e]=Ua[M5e]=Ua[O5e]=Ua[V5e]=Ua[U5e]=Ua[F5e]=Ua[j5e]=Ua[I5e]=Ua[L5e]=Ua[aB]=Ua[$5e]=Ua[A5e]=Ua[E5e]=Ua[T5e]=Ua[H5e]=Ua[N5e]=Ua[z5e]=Ua[B5e]=!0;Ua[C5e]=Ua[tB]=Ua[P5e]=!1;function Pd(n,e,a,s,o,r){var i,u=e&g5e,h=e&k5e,m=e&b5e;if(a&&(i=o?a(n,s,o,r):a(n)),i!==void 0)return i;if(!is(n))return n;var p=ro(n);if(p){if(i=N4e(n),!u)return Pz(n,i)}else{var b=tu(n),x=b==tB||b==S5e;if(Qd(n))return Gz(n,u);if(b==aB||b==eB||x&&!o){if(i=h||x?{}:Jz(n),!u)return h?P4e(n,S4e(i,n)):E4e(n,C4e(i,n))}else{if(!Ua[b])return o?n:{};i=p5e(n,b,u)}}r||(r=new So);var w=r.get(n);if(w)return w;r.set(n,i),_5e(n)?n.forEach(function(V){i.add(Pd(V,e,a,V,n,r))}):m5e(n)&&n.forEach(function(V,R){i.set(R,Pd(V,e,a,R,n,r))});var $=m?h?Yz:EE:h?_u:mP,D=p?void 0:$(n);return $be(D||n,function(V,R){D&&(R=V,V=n[R]),uP(i,R,Pd(V,e,a,R,n,r))}),i}var q5e=1,W5e=4;function L1(n){return Pd(n,q5e|W5e)}var G5e="__lodash_hash_undefined__";function Z5e(n){return this.__data__.set(n,G5e),this}function K5e(n){return this.__data__.has(n)}function AL(n){var e=-1,a=n==null?0:n.length;for(this.__data__=new dr;++e<a;)this.add(n[e])}AL.prototype.add=AL.prototype.push=Z5e;AL.prototype.has=K5e;function X5e(n,e){for(var a=-1,s=n==null?0:n.length;++a<s;)if(e(n[a],a,n))return!0;return!1}function Y5e(n,e){return n.has(e)}var Q5e=1,J5e=2;function nB(n,e,a,s,o,r){var i=a&Q5e,u=n.length,h=e.length;if(u!=h&&!(i&&h>u))return!1;var m=r.get(n),p=r.get(e);if(m&&p)return m==e&&p==n;var b=-1,x=!0,w=a&J5e?new AL:void 0;for(r.set(n,e),r.set(e,n);++b<u;){var $=n[b],D=e[b];if(s)var V=i?s(D,$,b,e,n,r):s($,D,b,n,e,r);if(V!==void 0){if(V)continue;x=!1;break}if(w){if(!X5e(e,function(R,E){if(!Y5e(w,E)&&($===R||o($,R,a,s,r)))return w.push(E)})){x=!1;break}}else if(!($===D||o($,D,a,s,r))){x=!1;break}}return r.delete(n),r.delete(e),x}function e3e(n){var e=-1,a=Array(n.size);return n.forEach(function(s,o){a[++e]=[o,s]}),a}function t3e(n){var e=-1,a=Array(n.size);return n.forEach(function(s){a[++e]=s}),a}var a3e=1,n3e=2,s3e="[object Boolean]",o3e="[object Date]",r3e="[object Error]",i3e="[object Map]",l3e="[object Number]",c3e="[object RegExp]",d3e="[object Set]",u3e="[object String]",p3e="[object Symbol]",h3e="[object ArrayBuffer]",f3e="[object DataView]",yF=qs?qs.prototype:void 0,_A=yF?yF.valueOf:void 0;function m3e(n,e,a,s,o,r,i){switch(a){case f3e:if(n.byteLength!=e.byteLength||n.byteOffset!=e.byteOffset)return!1;n=n.buffer,e=e.buffer;case h3e:return!(n.byteLength!=e.byteLength||!r(new $L(n),new $L(e)));case s3e:case o3e:case l3e:return yu(+n,+e);case r3e:return n.name==e.name&&n.message==e.message;case c3e:case u3e:return n==e+"";case i3e:var u=e3e;case d3e:var h=s&a3e;if(u||(u=t3e),n.size!=e.size&&!h)return!1;var m=i.get(n);if(m)return m==e;s|=n3e,i.set(n,e);var p=nB(u(n),u(e),s,o,r,i);return i.delete(n),p;case p3e:if(_A)return _A.call(n)==_A.call(e)}return!1}var v3e=1,y3e=Object.prototype,_3e=y3e.hasOwnProperty;function g3e(n,e,a,s,o,r){var i=a&v3e,u=EE(n),h=u.length,m=EE(e),p=m.length;if(h!=p&&!i)return!1;for(var b=h;b--;){var x=u[b];if(!(i?x in e:_3e.call(e,x)))return!1}var w=r.get(n),$=r.get(e);if(w&&$)return w==e&&$==n;var D=!0;r.set(n,e),r.set(e,n);for(var V=i;++b<h;){x=u[b];var R=n[x],E=e[x];if(s)var P=i?s(E,R,x,e,n,r):s(R,E,x,n,e,r);if(!(P===void 0?R===E||o(R,E,a,s,r):P)){D=!1;break}V||(V=x=="constructor")}if(D&&!V){var S=n.constructor,C=e.constructor;S!=C&&"constructor"in n&&"constructor"in e&&!(typeof S=="function"&&S instanceof S&&typeof C=="function"&&C instanceof C)&&(D=!1)}return r.delete(n),r.delete(e),D}var k3e=1,_F="[object Arguments]",gF="[object Array]",$1="[object Object]",b3e=Object.prototype,kF=b3e.hasOwnProperty;function w3e(n,e,a,s,o,r){var i=ro(n),u=ro(e),h=i?gF:tu(n),m=u?gF:tu(e);h=h==_F?$1:h,m=m==_F?$1:m;var p=h==$1,b=m==$1,x=h==m;if(x&&Qd(n)){if(!Qd(e))return!1;i=!0,p=!1}if(x&&!p)return r||(r=new So),i||fP(n)?nB(n,e,a,s,o,r):m3e(n,e,h,a,s,o,r);if(!(a&k3e)){var w=p&&kF.call(n,"__wrapped__"),$=b&&kF.call(e,"__wrapped__");if(w||$){var D=w?n.value():n,V=$?e.value():e;return r||(r=new So),o(D,V,a,s,r)}}return x?(r||(r=new So),g3e(n,e,a,s,o,r)):!1}function sB(n,e,a,s,o){return n===e?!0:n==null||e==null||!Ao(n)&&!Ao(e)?n!==n&&e!==e:w3e(n,e,a,s,sB,o)}function x3e(n){return function(e,a,s){for(var o=-1,r=Object(e),i=s(e),u=i.length;u--;){var h=i[n?u:++o];if(a(r[h],h,r)===!1)break}return e}}var M3e=x3e(),gA=function(){return lo.Date.now()},C3e="Expected a function",S3e=Math.max,I3e=Math.min;function Dd(n,e,a){var s,o,r,i,u,h,m=0,p=!1,b=!1,x=!0;if(typeof n!="function")throw new TypeError(C3e);e=KU(e)||0,is(a)&&(p=!!a.leading,b="maxWait"in a,r=b?S3e(KU(a.maxWait)||0,e):r,x="trailing"in a?!!a.trailing:x);function w(M){var g=s,v=o;return s=o=void 0,m=M,i=n.apply(v,g),i}function $(M){return m=M,u=setTimeout(R,e),p?w(M):i}function D(M){var g=M-h,v=M-m,T=e-g;return b?I3e(T,r-v):T}function V(M){var g=M-h,v=M-m;return h===void 0||g>=e||g<0||b&&v>=r}function R(){var M=gA();if(V(M))return E(M);u=setTimeout(R,D(M))}function E(M){return u=void 0,x&&s?w(M):(s=o=void 0,i)}function P(){u!==void 0&&clearTimeout(u),m=0,s=h=o=u=void 0}function S(){return u===void 0?i:E(gA())}function C(){var M=gA(),g=V(M);if(s=arguments,o=this,h=M,g){if(u===void 0)return $(h);if(b)return clearTimeout(u),u=setTimeout(R,e),w(h)}return u===void 0&&(u=setTimeout(R,e)),i}return C.cancel=P,C.flush=S,C}function RE(n,e,a){(a!==void 0&&!yu(n[e],a)||a===void 0&&!(e in n))&&dP(n,e,a)}function L3e(n){return Ao(n)&&f9(n)}function OE(n,e){if(!(e==="constructor"&&typeof n[e]=="function")&&e!="__proto__")return n[e]}function $3e(n){return Nc(n,_u(n))}function A3e(n,e,a,s,o,r,i){var u=OE(n,a),h=OE(e,a),m=i.get(h);if(m){RE(n,a,m);return}var p=r?r(u,h,a+"",n,e,i):void 0,b=p===void 0;if(b){var x=ro(h),w=!x&&Qd(h),$=!x&&!w&&fP(h);p=h,x||w||$?ro(u)?p=u:L3e(u)?p=Pz(u):w?(b=!1,p=Gz(h,!0)):$?(b=!1,p=Qz(h,!0)):p=[]:qz(h)||IL(h)?(p=u,IL(u)?p=$3e(u):(!is(u)||lP(u))&&(p=Jz(h))):b=!1}b&&(i.set(h,p),o(p,h,s,r,i),i.delete(h)),RE(n,a,p)}function oB(n,e,a,s,o){n!==e&&M3e(e,function(r,i){if(o||(o=new So),is(r))A3e(n,e,i,a,oB,s,o);else{var u=s?s(OE(n,i),r,i+"",n,e,o):void 0;u===void 0&&(u=r),RE(n,i,u)}},_u)}function E3e(n){var e=n==null?0:n.length;return e?n[e-1]:void 0}function T3e(n,e){return e.length<2?n:Nz(n,_4e(e,0,-1))}function bF(n,e){return sB(n,e)}var VE=Vbe(function(n,e,a){oB(n,e,a)});function P3e(n,e){return e=y9(e,n),n=T3e(n,e),n==null||delete n[yP(E3e(e))]}function D3e(n){return qz(n)?void 0:n}var R3e=1,O3e=2,V3e=4,wF=u4e(function(n,e){var a={};if(n==null)return a;var s=!1;e=Az(e,function(r){return r=y9(r,n),s||(s=r.length>1),r}),Nc(n,Yz(n),a),s&&(a=Pd(a,R3e|O3e|V3e,D3e));for(var o=e.length;o--;)P3e(a,e[o]);return a});function U3e(n,e,a,s){if(!is(n))return n;e=y9(e,n);for(var o=-1,r=e.length,i=r-1,u=n;u!=null&&++o<r;){var h=yP(e[o]),m=a;if(h==="__proto__"||h==="constructor"||h==="prototype")return n;if(o!=i){var p=u[h];m=s?s(p,h,u):void 0,m===void 0&&(m=is(p)?p:cP(e[o+1])?[]:{})}uP(u,h,m),u=u[h]}return n}function rB(n,e,a){return n==null?n:U3e(n,e,a)}var F3e="Expected a function";function j3e(n,e,a){var s=!0,o=!0;if(typeof n!="function")throw new TypeError(F3e);return is(a)&&(s="leading"in a?!!a.leading:s,o="trailing"in a?!!a.trailing:o),Dd(n,e,{leading:s,maxWait:e,trailing:o})}let au=vu.create(),iB=(n,e)=>`${n.method}:${n.baseURL??e.defaults.baseURL??""}${n.url}`,lB=n=>n.status===204&&n.headers["precognition-success"]==="true";const EL={},et={get:(n,e={},a={})=>_d(yd("get",n,e,a)),post:(n,e={},a={})=>_d(yd("post",n,e,a)),patch:(n,e={},a={})=>_d(yd("patch",n,e,a)),put:(n,e={},a={})=>_d(yd("put",n,e,a)),delete:(n,e={},a={})=>_d(yd("delete",n,e,a)),use(n){return au=n,et},axios(){return au},fingerprintRequestsUsing(n){return iB=n===null?()=>null:n,et},determineSuccessUsing(n){return lB=n,et}},yd=(n,e,a,s)=>({url:e,method:n,...s,...["get","delete"].includes(n)?{params:VE({},a,s==null?void 0:s.params)}:{data:VE({},a,s==null?void 0:s.data)}}),_d=(n={})=>{const e=[H3e,z3e,B3e].reduce((a,s)=>s(a),n);return(e.onBefore??(()=>!0))()===!1?Promise.resolve(null):((e.onStart??(()=>null))(),au.request(e).then(async a=>{e.precognitive&&xF(a);const s=a.status;let o=a;return e.precognitive&&e.onPrecognitionSuccess&&lB(o)&&(o=await Promise.resolve(e.onPrecognitionSuccess(o)??o)),e.onSuccess&&N3e(s)&&(o=await Promise.resolve(e.onSuccess(o)??o)),(MF(e,s)??(i=>i))(o)??o},a=>q3e(a)?Promise.reject(a):(e.precognitive&&xF(a.response),(MF(e,a.response.status)??((o,r)=>Promise.reject(r)))(a.response,a))).finally(e.onFinish??(()=>null)))},H3e=n=>({...n,timeout:n.timeout??au.defaults.timeout??3e4,precognitive:n.precognitive!==!1,fingerprint:typeof n.fingerprint>"u"?iB(n,au):n.fingerprint,headers:{...n.headers,"Content-Type":W3e(n),...n.precognitive!==!1?{Precognition:!0}:{},...n.validate?{"Precognition-Validate-Only":Array.from(n.validate).join()}:{}}}),N3e=n=>n>=200&&n<300,z3e=n=>{var e;return typeof n.fingerprint!="string"||((e=EL[n.fingerprint])==null||e.abort(),delete EL[n.fingerprint]),n},B3e=n=>typeof n.fingerprint!="string"||n.signal||n.cancelToken?n:(EL[n.fingerprint]=new AbortController,{...n,signal:EL[n.fingerprint].signal}),xF=n=>{var e;if(((e=n.headers)==null?void 0:e.precognition)!=="true")throw Error("Did not receive a Precognition response. Ensure you have the Precognition middleware in place for the route.")},q3e=n=>{var e;return!ot(n)||typeof((e=n.response)==null?void 0:e.status)!="number"||Ide(n)},MF=(n,e)=>({401:n.onUnauthorized,403:n.onForbidden,404:n.onNotFound,409:n.onConflict,422:n.onValidationError,423:n.onLocked})[e],W3e=n=>{var e,a,s;return((e=n.headers)==null?void 0:e["Content-Type"])??((a=n.headers)==null?void 0:a["Content-type"])??((s=n.headers)==null?void 0:s["content-type"])??(cB(n.data)?"multipart/form-data":"application/json")},cB=n=>TL(n)||typeof n=="object"&&n!==null&&Object.values(n).some(e=>cB(e)),TL=n=>typeof File<"u"&&n instanceof File||n instanceof Blob||typeof FileList<"u"&&n instanceof FileList&&n.length>0,CF=n=>typeof n=="string"?n:n(),SF=n=>typeof n=="string"?n.toLowerCase():n(),G3e=(n,e={})=>{const a={errorsChanged:[],touchedChanged:[],validatingChanged:[],validatedChanged:[]};let s=!1,o=!1;const r=B=>B!==o?(o=B,a.validatingChanged):[];let i=[];const u=B=>{const oe=[...new Set(B)];return i.length!==oe.length||!oe.every(be=>i.includes(be))?(i=oe,a.validatedChanged):[]},h=()=>i.filter(B=>typeof b[B]>"u");let m=[];const p=B=>{const oe=[...new Set(B)];return m.length!==oe.length||!oe.every(be=>m.includes(be))?(m=oe,a.touchedChanged):[]};let b={};const x=B=>{const oe=K3e(B);return bF(b,oe)?[]:(b=oe,a.errorsChanged)},w=B=>{const oe={...b};return delete oe[rL(B)],x(oe)},$=()=>Object.keys(b).length>0;let D=1500;const V=B=>{D=B,M.cancel(),M=C()};let R=e,E=null,P=[],S=null;const C=()=>Dd(()=>{n({get:(B,oe={},be={})=>et.get(B,T(oe),g(be,oe)),post:(B,oe={},be={})=>et.post(B,T(oe),g(be,oe)),patch:(B,oe={},be={})=>et.patch(B,T(oe),g(be,oe)),put:(B,oe={},be={})=>et.put(B,T(oe),g(be,oe)),delete:(B,oe={},be={})=>et.delete(B,T(oe),g(be,oe))}).catch(B=>ot(B)?null:Promise.reject(B))},D,{leading:!0,trailing:!0});let M=C();const g=(B,oe={})=>{const be=Array.from(B.validate??m);return{...B,validate:be,timeout:B.timeout??5e3,onValidationError:($e,Le)=>([...u([...i,...be]),...x(VE(wF({...b},be),$e.data.errors))].forEach(de=>de()),B.onValidationError?B.onValidationError($e,Le):Promise.reject(Le)),onSuccess:()=>{u([...i,...be]).forEach($e=>$e())},onPrecognitionSuccess:$e=>([...u([...i,...be]),...x(wF({...b},be))].forEach(Le=>Le()),B.onPrecognitionSuccess?B.onPrecognitionSuccess($e):$e),onBefore:()=>(B.onBeforeValidation??((de,J)=>!bF(de,J)))({data:oe,touched:m},{data:R,touched:P})===!1||(B.onBefore||(()=>!0))()===!1?!1:(S=m,E=oe,!0),onStart:()=>{r(!0).forEach($e=>$e()),(B.onStart??(()=>null))()},onFinish:()=>{r(!1).forEach($e=>$e()),P=S,R=E,S=E=null,(B.onFinish??(()=>null))()}}},v=(B,oe)=>{if(typeof B>"u"){M();return}if(TL(oe)&&!s){console.warn('Precognition file validation is not active. Call the "validateFiles" function on your form to enable it.');return}B=rL(B),LL(R,B)!==oe&&p([B,...m]).forEach(be=>be()),m.length!==0&&M()},T=B=>s===!1?dB(B):B,j={touched:()=>m,validate(B,oe){return v(B,oe),j},touch(B){const oe=Array.isArray(B)?B:[rL(B)];return p([...m,...oe]).forEach(be=>be()),j},validating:()=>o,valid:h,errors:()=>b,hasErrors:$,setErrors(B){return x(B).forEach(oe=>oe()),j},forgetError(B){return w(B).forEach(oe=>oe()),j},reset(...B){if(B.length===0)p([]).forEach(oe=>oe());else{const oe=[...m];B.forEach(be=>{oe.includes(be)&&oe.splice(oe.indexOf(be),1),rB(R,be,LL(e,be))}),p(oe).forEach(be=>be())}return j},setTimeout(B){return V(B),j},on(B,oe){return a[B].push(oe),j},validateFiles(){return s=!0,j}};return j},Z3e=n=>Object.keys(n).reduce((e,a)=>({...e,[a]:Array.isArray(n[a])?n[a][0]:n[a]}),{}),K3e=n=>Object.keys(n).reduce((e,a)=>({...e,[a]:typeof n[a]=="string"?[n[a]]:n[a]}),{}),rL=n=>typeof n!="string"?n.target.name:n,dB=n=>{const e={...n};return Object.keys(e).forEach(a=>{const s=e[a];if(s!==null){if(TL(s)){delete e[a];return}if(Array.isArray(s)){e[a]=s.filter(o=>!TL(o));return}if(typeof s=="object"){e[a]=dB(e[a]);return}}}),e},Ut=(n,e,a,s={})=>{const o=L1(a),r=Object.keys(o),i=O([]),u=O([]),h=G3e(b=>b[SF(n)](CF(e),p.data(),s),o).on("validatingChanged",()=>{p.validating=h.validating()}).on("validatedChanged",()=>{i.value=h.valid()}).on("touchedChanged",()=>{u.value=h.touched()}).on("errorsChanged",()=>{p.hasErrors=h.hasErrors(),p.errors=Z3e(h.errors()),i.value=h.valid()}),m=b=>({...b,precognitive:!1,onStart:()=>{p.processing=!0,(b.onStart??(()=>null))()},onFinish:()=>{p.processing=!1,(b.onFinish??(()=>null))()},onValidationError:(x,w)=>(h.setErrors(x.data.errors),b.onValidationError?b.onValidationError(x):Promise.reject(w))});let p={...L1(o),data(){const b=L1(pa(p));return r.reduce((x,w)=>({...x,[w]:b[w]}),{})},setData(b){return Object.keys(b).forEach(x=>{p[x]=b[x]}),p},touched(b){return u.value.includes(b)},touch(b){return h.touch(b),p},validate(b){return typeof b>"u"?h.validate():(b=rL(b),h.validate(b,LL(p.data(),b))),p},validating:!1,valid(b){return i.value.includes(b)},invalid(b){return typeof p.errors[b]<"u"},errors:{},hasErrors:!1,setErrors(b){return h.setErrors(b),p},forgetError(b){return h.forgetError(b),p},reset(...b){const x=L1(o);return b.length===0?r.forEach(w=>p[w]=x[w]):b.forEach(w=>rB(p,w,LL(x,w))),h.reset(...b),p},setValidationTimeout(b){return h.setTimeout(b),p},processing:!1,async submit(b={}){return et[SF(n)](CF(e),p.data(),m(b))},validateFiles(){return h.validateFiles(),p},validator(){return h}};return p=gn(p),p};var vt=(n=>(n[n.OK=200]="OK",n[n.Created=201]="Created",n[n.BadRequest=400]="BadRequest",n[n.UnprocessableEntity=422]="UnprocessableEntity",n[n.Locked=423]="Locked",n[n.Unauthorized=424]="Unauthorized",n[n.PaymentRequired=425]="PaymentRequired",n[n.Forbidden=426]="Forbidden",n[n.NotFound=427]="NotFound",n))(vt||{});class cn{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}async readProfile(){const e={success:!1};try{const a=je("api.get.db.module.profile.read",void 0,!1,this.ziggyRoute),s=await nt.get(a);return e.success=!0,e.data=s.data.data,e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}useUpdateUserProfileForm(){const e=je("api.post.db.module.profile.update.user_profile",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{name:""})}useUpdatePersonalInfoForm(){const e=je("api.post.db.module.profile.update.personal_info",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{first_name:"",last_name:"",address:"",city:"",postal_code:"",country:"",img_path:"",tax_id:0,ic_num:0,status:"",remarks:""})}async sendEmailVerification(){const e={success:!1};try{const a=je("api.post.db.module.profile.send.email_verification",void 0,!1,this.ziggyRoute);return(await nt.post(a)).status==vt.OK&&(e.success=!0),e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}useUpdateAccountSettingsForm(){const e=je("api.post.db.module.profile.update.account_settings",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{theme:"side-menu-light-full",date_format:"dd_MMM_yyyy",time_format:"hh_mm_ss"})}useUpdateUserRolesForm(){const e=je("api.post.db.module.profile.update.roles",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{roles:""})}useUpdatePasswordForm(){const e=je("api.post.db.module.profile.update.password",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{current_password:"",password:"",password_confirmation:""})}useUpdateTokenForm(){const e=je("api.post.db.module.profile.update.tokens",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{reset_tokens:!0})}async enableTwoFactor(){const e={success:!1};try{const a=je("two-factor.enable",void 0,!1,this.ziggyRoute),s=await nt.post(a);return s.status==vt.OK?(e.success=!0,e.data=s.data):(e.success=!1,e.data=s.data),e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}async disableTwoFactor(){const e={success:!1};try{const a=je("two-factor.disable",void 0,!1,this.ziggyRoute),s=await nt.delete(a);return s.status==vt.OK?(e.success=!0,e.data=s.data):(e.success=!1,e.data=s.data),e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}async confirmPassword(e){const a={success:!1};try{const s=je("password.confirm",void 0,!1,this.ziggyRoute),o=await nt.post(s,{password:e});return o.status==vt.OK||o.status==vt.Created?a.success=!0:(a.success=!1,a.data=o.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async confirmPasswordStatus(){const e={success:!1};try{const a=je("password.confirmation",void 0,!1,this.ziggyRoute),s=await nt.get(a);return e.success=!0,e.data=s.data,e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}async TwoFactorAuthenticationConfirmed(e){const a={success:!1};try{const s=je("two-factor.confirm",void 0,!1,this.ziggyRoute),o=await nt.post(s,{code:e});return a.success=!0,a.data=o.data,a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async twoFactorQR(){const e={success:!1};try{const a=je("two-factor.qr-code",void 0,!1,this.ziggyRoute),s=await nt.get(a);return e.success=!0,e.data=s.data,e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}async twoFactorRecoveryCodes(){const e={success:!1};try{const a=je("two-factor.recovery-codes",void 0,!1,this.ziggyRoute),s=await nt.get(a);return e.success=!0,e.data=s.data,e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}async twoFactorSecretKey(){const e={success:!1};try{const a=je("two-factor.secret-key",void 0,!1,this.ziggyRoute),s=await nt.get(a);return e.success=!0,e.data=s.data,e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}}const xs=Qr("dashboardStore",{state:()=>({screenMaskValue:!1,layoutValue:"side-menu"}),getters:{getScreenMaskValue:n=>n.screenMaskValue,getLayoutValue:n=>n.layoutValue},actions:{setScreenMaskValue(n){this.screenMaskValue=n},toggleLayoutValue(){this.layoutValue=="side-menu"?this.layoutValue="simple-menu":this.layoutValue="side-menu"},toggleScreenMaskValue(){this.screenMaskValue=!this.screenMaskValue}}}),X3e=["alt","src"],Y3e={class:"font-medium"},Q3e={class:"text-xs text-white/70 mt-0.5 dark:text-slate-500"},zc=Ce({__name:"ProfileMenu",props:{visible:{type:Boolean,default:!0},theme:{default:"rubick"},layout:{default:"side-menu"}},setup(n){const{t:e}=tt(),a=ct(),s=n,o=new cn,r=An(s,"visible"),i=Za(),u=xs(),h=ee(()=>i.userContext),m=ee(()=>Uke),p=ee(()=>"DCSLab");at(async()=>{let x=await o.readProfile();x.success&&i.setUserContext(x.data)});const b=()=>{u.toggleScreenMaskValue(),nt.post("/logout").then(()=>{sessionStorage.clear(),window.location.href="/"})};return(x,w)=>r.value?(L(),ge(t(Xa),{key:0},{default:f(()=>[l(t(Xa).Button,{class:"block w-8 h-8 overflow-hidden rounded-full shadow-lg image-fit zoom-in intro-x"},{default:f(()=>[c("img",{alt:p.value,src:m.value},null,8,X3e)]),_:1}),l(t(Xa).Items,{class:"w-56 mt-px relative bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white"},{default:f(()=>[l(t(Xa).Header,{class:"font-normal"},{default:f(()=>[c("div",Y3e,_(h.value.name),1),c("div",Q3e,_(h.value.email),1)]),_:1}),l(t(Xa).Divider,{class:"bg-white/[0.08]"}),l(t(Xa).Item,{class:"hover:bg-white/5",onClick:w[0]||(w[0]=$=>t(a).push({name:"side-menu-dashboard-profile"}))},{default:f(()=>[l(t(re),{icon:"User",class:"w-4 h-4 mr-2"}),A(" "+_(t(e)("components.profile-menu.profile_ddl.profile")),1)]),_:1}),l(t(Xa).Item,{class:"hover:bg-white/5"},{default:f(()=>[l(t(re),{icon:"Mail",class:"w-4 h-4 mr-2"}),A(" "+_(t(e)("components.profile-menu.profile_ddl.inbox")),1)]),_:1}),l(t(Xa).Item,{class:"hover:bg-white/5"},{default:f(()=>[l(t(re),{icon:"Activity",class:"w-4 h-4 mr-2"}),A(" "+_(t(e)("components.profile-menu.profile_ddl.activity")),1)]),_:1}),l(t(Xa).Divider,{class:"bg-white/[0.08]"}),l(t(Xa).Item,{class:"hover:bg-white/5",onClick:b},{default:f(()=>[l(t(re),{icon:"ToggleRight",class:"w-4 h-4 mr-2"}),A(" "+_(t(e)("components.profile-menu.profile_ddl.logout")),1)]),_:1})]),_:1})]),_:1})):Me("",!0)}}),J3e={class:"relative z-[51] flex h-[67px] items-center border-b border-slate-200"},wP=Ce({__name:"TopBar",setup(n){return(e,a)=>(L(),U("div",J3e,[l(Uc,{theme:"rubick"}),l(iP,{theme:"rubick"}),l(jc,{theme:"rubick"}),l(Hc,{theme:"rubick"}),l(zc,{theme:"rubick"})]))}}),cs=Qr("menu",{state:()=>({menuValue:[{icon:"Home",pageName:"side-menu-dashboard-maindashboard",title:"Dashboard"}]}),getters:{menu:n=>e=>(e=="top-menu"||e=="simple-menu",n.menuValue)},actions:{setMenu(n){this.menuValue=n}}}),UE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=UE(s.subMenu,e))}),a},uB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&UE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=UE(o.subMenu,e);const r=[];uB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},kA=(n,e,a)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&(a(!1),e.push({name:n.pageName}))},IF=n=>{lr(n,300)},LF=n=>{ir(n,300)};var exe=!!(typeof window<"u"&&window.document&&window.document.createElement),txe=exe;const xP=cu(txe);var hc=function(){return hc=Object.assign||function(e){for(var a,s=1,o=arguments.length;s<o;s++){a=arguments[s];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},hc.apply(this,arguments)},dc=null,$F=null;xP&&window.addEventListener("resize",function(){$F!==window.devicePixelRatio&&($F=window.devicePixelRatio,dc=null)});function AF(){if(dc===null){if(typeof document>"u")return dc=0,dc;var n=document.body,e=document.createElement("div");e.classList.add("simplebar-hide-scrollbar"),n.appendChild(e);var a=e.getBoundingClientRect().right;n.removeChild(e),dc=a}return dc}function pB(n){return!n||!n.ownerDocument||!n.ownerDocument.defaultView?window:n.ownerDocument.defaultView}function hB(n){return!n||!n.ownerDocument?document:n.ownerDocument}var fB=function(n){var e={},a=Array.prototype.reduce.call(n,function(s,o){var r=o.name.match(/data-simplebar-(.+)/);if(r){var i=r[1].replace(/\W+(.)/g,function(u,h){return h.toUpperCase()});switch(o.value){case"true":s[i]=!0;break;case"false":s[i]=!1;break;case void 0:s[i]=!0;break;default:s[i]=o.value}}return s},e);return a};function mB(n,e){var a;n&&(a=n.classList).add.apply(a,e.split(" "))}function vB(n,e){n&&e.split(" ").forEach(function(a){n.classList.remove(a)})}function yB(n){return".".concat(n.split(" ").join("."))}var axe=Object.freeze({__proto__:null,getElementWindow:pB,getElementDocument:hB,getOptions:fB,addClasses:mB,removeClasses:vB,classNamesToQuery:yB}),$r=pB,bA=hB,nxe=fB,Ar=mB,Er=vB,ts=yB,iL=function(){function n(e,a){a===void 0&&(a={});var s=this;if(this.removePreventClickId=null,this.minScrollbarWidth=20,this.stopScrollDelay=175,this.isScrolling=!1,this.isMouseEntering=!1,this.scrollXTicking=!1,this.scrollYTicking=!1,this.wrapperEl=null,this.contentWrapperEl=null,this.contentEl=null,this.offsetEl=null,this.maskEl=null,this.placeholderEl=null,this.heightAutoObserverWrapperEl=null,this.heightAutoObserverEl=null,this.rtlHelpers=null,this.scrollbarWidth=0,this.resizeObserver=null,this.mutationObserver=null,this.elStyles=null,this.isRtl=null,this.mouseX=0,this.mouseY=0,this.onMouseMove=function(){},this.onWindowResize=function(){},this.onStopScrolling=function(){},this.onMouseEntered=function(){},this.onScroll=function(){var o=$r(s.el);s.scrollXTicking||(o.requestAnimationFrame(s.scrollX),s.scrollXTicking=!0),s.scrollYTicking||(o.requestAnimationFrame(s.scrollY),s.scrollYTicking=!0),s.isScrolling||(s.isScrolling=!0,Ar(s.el,s.classNames.scrolling)),s.showScrollbar("x"),s.showScrollbar("y"),s.onStopScrolling()},this.scrollX=function(){s.axis.x.isOverflowing&&s.positionScrollbar("x"),s.scrollXTicking=!1},this.scrollY=function(){s.axis.y.isOverflowing&&s.positionScrollbar("y"),s.scrollYTicking=!1},this._onStopScrolling=function(){Er(s.el,s.classNames.scrolling),s.options.autoHide&&(s.hideScrollbar("x"),s.hideScrollbar("y")),s.isScrolling=!1},this.onMouseEnter=function(){s.isMouseEntering||(Ar(s.el,s.classNames.mouseEntered),s.showScrollbar("x"),s.showScrollbar("y"),s.isMouseEntering=!0),s.onMouseEntered()},this._onMouseEntered=function(){Er(s.el,s.classNames.mouseEntered),s.options.autoHide&&(s.hideScrollbar("x"),s.hideScrollbar("y")),s.isMouseEntering=!1},this._onMouseMove=function(o){s.mouseX=o.clientX,s.mouseY=o.clientY,(s.axis.x.isOverflowing||s.axis.x.forceVisible)&&s.onMouseMoveForAxis("x"),(s.axis.y.isOverflowing||s.axis.y.forceVisible)&&s.onMouseMoveForAxis("y")},this.onMouseLeave=function(){s.onMouseMove.cancel(),(s.axis.x.isOverflowing||s.axis.x.forceVisible)&&s.onMouseLeaveForAxis("x"),(s.axis.y.isOverflowing||s.axis.y.forceVisible)&&s.onMouseLeaveForAxis("y"),s.mouseX=-1,s.mouseY=-1},this._onWindowResize=function(){s.scrollbarWidth=s.getScrollbarWidth(),s.hideNativeScrollbar()},this.onPointerEvent=function(o){if(!(!s.axis.x.track.el||!s.axis.y.track.el||!s.axis.x.scrollbar.el||!s.axis.y.scrollbar.el)){var r,i;s.axis.x.track.rect=s.axis.x.track.el.getBoundingClientRect(),s.axis.y.track.rect=s.axis.y.track.el.getBoundingClientRect(),(s.axis.x.isOverflowing||s.axis.x.forceVisible)&&(r=s.isWithinBounds(s.axis.x.track.rect)),(s.axis.y.isOverflowing||s.axis.y.forceVisible)&&(i=s.isWithinBounds(s.axis.y.track.rect)),(r||i)&&(o.stopPropagation(),o.type==="pointerdown"&&o.pointerType!=="touch"&&(r&&(s.axis.x.scrollbar.rect=s.axis.x.scrollbar.el.getBoundingClientRect(),s.isWithinBounds(s.axis.x.scrollbar.rect)?s.onDragStart(o,"x"):s.onTrackClick(o,"x")),i&&(s.axis.y.scrollbar.rect=s.axis.y.scrollbar.el.getBoundingClientRect(),s.isWithinBounds(s.axis.y.scrollbar.rect)?s.onDragStart(o,"y"):s.onTrackClick(o,"y"))))}},this.drag=function(o){var r,i,u,h,m,p,b,x,w,$,D;if(!(!s.draggedAxis||!s.contentWrapperEl)){var V,R=s.axis[s.draggedAxis].track,E=(i=(r=R.rect)===null||r===void 0?void 0:r[s.axis[s.draggedAxis].sizeAttr])!==null&&i!==void 0?i:0,P=s.axis[s.draggedAxis].scrollbar,S=(h=(u=s.contentWrapperEl)===null||u===void 0?void 0:u[s.axis[s.draggedAxis].scrollSizeAttr])!==null&&h!==void 0?h:0,C=parseInt((p=(m=s.elStyles)===null||m===void 0?void 0:m[s.axis[s.draggedAxis].sizeAttr])!==null&&p!==void 0?p:"0px",10);o.preventDefault(),o.stopPropagation(),s.draggedAxis==="y"?V=o.pageY:V=o.pageX;var M=V-((x=(b=R.rect)===null||b===void 0?void 0:b[s.axis[s.draggedAxis].offsetAttr])!==null&&x!==void 0?x:0)-s.axis[s.draggedAxis].dragOffset;M=s.draggedAxis==="x"&&s.isRtl?(($=(w=R.rect)===null||w===void 0?void 0:w[s.axis[s.draggedAxis].sizeAttr])!==null&&$!==void 0?$:0)-P.size-M:M;var g=M/(E-P.size),v=g*(S-C);s.draggedAxis==="x"&&s.isRtl&&(v=!((D=n.getRtlHelpers())===null||D===void 0)&&D.isScrollingToNegative?-v:v),s.contentWrapperEl[s.axis[s.draggedAxis].scrollOffsetAttr]=v}},this.onEndDrag=function(o){var r=bA(s.el),i=$r(s.el);o.preventDefault(),o.stopPropagation(),Er(s.el,s.classNames.dragging),r.removeEventListener("mousemove",s.drag,!0),r.removeEventListener("mouseup",s.onEndDrag,!0),s.removePreventClickId=i.setTimeout(function(){r.removeEventListener("click",s.preventClick,!0),r.removeEventListener("dblclick",s.preventClick,!0),s.removePreventClickId=null})},this.preventClick=function(o){o.preventDefault(),o.stopPropagation()},this.el=e,this.options=hc(hc({},n.defaultOptions),a),this.classNames=hc(hc({},n.defaultOptions.classNames),a.classNames),this.axis={x:{scrollOffsetAttr:"scrollLeft",sizeAttr:"width",scrollSizeAttr:"scrollWidth",offsetSizeAttr:"offsetWidth",offsetAttr:"left",overflowAttr:"overflowX",dragOffset:0,isOverflowing:!0,forceVisible:!1,track:{size:null,el:null,rect:null,isVisible:!1},scrollbar:{size:null,el:null,rect:null,isVisible:!1}},y:{scrollOffsetAttr:"scrollTop",sizeAttr:"height",scrollSizeAttr:"scrollHeight",offsetSizeAttr:"offsetHeight",offsetAttr:"top",overflowAttr:"overflowY",dragOffset:0,isOverflowing:!0,forceVisible:!1,track:{size:null,el:null,rect:null,isVisible:!1},scrollbar:{size:null,el:null,rect:null,isVisible:!1}}},typeof this.el!="object"||!this.el.nodeName)throw new Error("Argument passed to SimpleBar must be an HTML element instead of ".concat(this.el));this.onMouseMove=j3e(this._onMouseMove,64),this.onWindowResize=Dd(this._onWindowResize,64,{leading:!0}),this.onStopScrolling=Dd(this._onStopScrolling,this.stopScrollDelay),this.onMouseEntered=Dd(this._onMouseEntered,this.stopScrollDelay),this.init()}return n.getRtlHelpers=function(){if(n.rtlHelpers)return n.rtlHelpers;var e=document.createElement("div");e.innerHTML='<div class="simplebar-dummy-scrollbar-size"><div></div></div>';var a=e.firstElementChild,s=a==null?void 0:a.firstElementChild;if(!s)return null;document.body.appendChild(a),a.scrollLeft=0;var o=n.getOffset(a),r=n.getOffset(s);a.scrollLeft=-999;var i=n.getOffset(s);return document.body.removeChild(a),n.rtlHelpers={isScrollOriginAtZero:o.left!==r.left,isScrollingToNegative:r.left!==i.left},n.rtlHelpers},n.prototype.getScrollbarWidth=function(){try{return this.contentWrapperEl&&getComputedStyle(this.contentWrapperEl,"::-webkit-scrollbar").display==="none"||"scrollbarWidth"in document.documentElement.style||"-ms-overflow-style"in document.documentElement.style?0:AF()}catch{return AF()}},n.getOffset=function(e){var a=e.getBoundingClientRect(),s=bA(e),o=$r(e);return{top:a.top+(o.pageYOffset||s.documentElement.scrollTop),left:a.left+(o.pageXOffset||s.documentElement.scrollLeft)}},n.prototype.init=function(){xP&&(this.initDOM(),this.rtlHelpers=n.getRtlHelpers(),this.scrollbarWidth=this.getScrollbarWidth(),this.recalculate(),this.initListeners())},n.prototype.initDOM=function(){var e,a;this.wrapperEl=this.el.querySelector(ts(this.classNames.wrapper)),this.contentWrapperEl=this.options.scrollableNode||this.el.querySelector(ts(this.classNames.contentWrapper)),this.contentEl=this.options.contentNode||this.el.querySelector(ts(this.classNames.contentEl)),this.offsetEl=this.el.querySelector(ts(this.classNames.offset)),this.maskEl=this.el.querySelector(ts(this.classNames.mask)),this.placeholderEl=this.findChild(this.wrapperEl,ts(this.classNames.placeholder)),this.heightAutoObserverWrapperEl=this.el.querySelector(ts(this.classNames.heightAutoObserverWrapperEl)),this.heightAutoObserverEl=this.el.querySelector(ts(this.classNames.heightAutoObserverEl)),this.axis.x.track.el=this.findChild(this.el,"".concat(ts(this.classNames.track)).concat(ts(this.classNames.horizontal))),this.axis.y.track.el=this.findChild(this.el,"".concat(ts(this.classNames.track)).concat(ts(this.classNames.vertical))),this.axis.x.scrollbar.el=((e=this.axis.x.track.el)===null||e===void 0?void 0:e.querySelector(ts(this.classNames.scrollbar)))||null,this.axis.y.scrollbar.el=((a=this.axis.y.track.el)===null||a===void 0?void 0:a.querySelector(ts(this.classNames.scrollbar)))||null,this.options.autoHide||(Ar(this.axis.x.scrollbar.el,this.classNames.visible),Ar(this.axis.y.scrollbar.el,this.classNames.visible))},n.prototype.initListeners=function(){var e=this,a,s=$r(this.el);if(this.el.addEventListener("mouseenter",this.onMouseEnter),this.el.addEventListener("pointerdown",this.onPointerEvent,!0),this.el.addEventListener("mousemove",this.onMouseMove),this.el.addEventListener("mouseleave",this.onMouseLeave),(a=this.contentWrapperEl)===null||a===void 0||a.addEventListener("scroll",this.onScroll),s.addEventListener("resize",this.onWindowResize),!!this.contentEl){if(window.ResizeObserver){var o=!1,r=s.ResizeObserver||ResizeObserver;this.resizeObserver=new r(function(){o&&s.requestAnimationFrame(function(){e.recalculate()})}),this.resizeObserver.observe(this.el),this.resizeObserver.observe(this.contentEl),s.requestAnimationFrame(function(){o=!0})}this.mutationObserver=new s.MutationObserver(function(){s.requestAnimationFrame(function(){e.recalculate()})}),this.mutationObserver.observe(this.contentEl,{childList:!0,subtree:!0,characterData:!0})}},n.prototype.recalculate=function(){if(!(!this.heightAutoObserverEl||!this.contentEl||!this.contentWrapperEl||!this.wrapperEl||!this.placeholderEl)){var e=$r(this.el);this.elStyles=e.getComputedStyle(this.el),this.isRtl=this.elStyles.direction==="rtl";var a=this.contentEl.offsetWidth,s=this.heightAutoObserverEl.offsetHeight<=1,o=this.heightAutoObserverEl.offsetWidth<=1||a>0,r=this.contentWrapperEl.offsetWidth,i=this.elStyles.overflowX,u=this.elStyles.overflowY;this.contentEl.style.padding="".concat(this.elStyles.paddingTop," ").concat(this.elStyles.paddingRight," ").concat(this.elStyles.paddingBottom," ").concat(this.elStyles.paddingLeft),this.wrapperEl.style.margin="-".concat(this.elStyles.paddingTop," -").concat(this.elStyles.paddingRight," -").concat(this.elStyles.paddingBottom," -").concat(this.elStyles.paddingLeft);var h=this.contentEl.scrollHeight,m=this.contentEl.scrollWidth;this.contentWrapperEl.style.height=s?"auto":"100%",this.placeholderEl.style.width=o?"".concat(a||m,"px"):"auto",this.placeholderEl.style.height="".concat(h,"px");var p=this.contentWrapperEl.offsetHeight;this.axis.x.isOverflowing=a!==0&&m>a,this.axis.y.isOverflowing=h>p,this.axis.x.isOverflowing=i==="hidden"?!1:this.axis.x.isOverflowing,this.axis.y.isOverflowing=u==="hidden"?!1:this.axis.y.isOverflowing,this.axis.x.forceVisible=this.options.forceVisible==="x"||this.options.forceVisible===!0,this.axis.y.forceVisible=this.options.forceVisible==="y"||this.options.forceVisible===!0,this.hideNativeScrollbar();var b=this.axis.x.isOverflowing?this.scrollbarWidth:0,x=this.axis.y.isOverflowing?this.scrollbarWidth:0;this.axis.x.isOverflowing=this.axis.x.isOverflowing&&m>r-x,this.axis.y.isOverflowing=this.axis.y.isOverflowing&&h>p-b,this.axis.x.scrollbar.size=this.getScrollbarSize("x"),this.axis.y.scrollbar.size=this.getScrollbarSize("y"),this.axis.x.scrollbar.el&&(this.axis.x.scrollbar.el.style.width="".concat(this.axis.x.scrollbar.size,"px")),this.axis.y.scrollbar.el&&(this.axis.y.scrollbar.el.style.height="".concat(this.axis.y.scrollbar.size,"px")),this.positionScrollbar("x"),this.positionScrollbar("y"),this.toggleTrackVisibility("x"),this.toggleTrackVisibility("y")}},n.prototype.getScrollbarSize=function(e){var a,s;if(e===void 0&&(e="y"),!this.axis[e].isOverflowing||!this.contentEl)return 0;var o=this.contentEl[this.axis[e].scrollSizeAttr],r=(s=(a=this.axis[e].track.el)===null||a===void 0?void 0:a[this.axis[e].offsetSizeAttr])!==null&&s!==void 0?s:0,i=r/o,u;return u=Math.max(~~(i*r),this.options.scrollbarMinSize),this.options.scrollbarMaxSize&&(u=Math.min(u,this.options.scrollbarMaxSize)),u},n.prototype.positionScrollbar=function(e){var a,s,o;e===void 0&&(e="y");var r=this.axis[e].scrollbar;if(!(!this.axis[e].isOverflowing||!this.contentWrapperEl||!r.el||!this.elStyles)){var i=this.contentWrapperEl[this.axis[e].scrollSizeAttr],u=((a=this.axis[e].track.el)===null||a===void 0?void 0:a[this.axis[e].offsetSizeAttr])||0,h=parseInt(this.elStyles[this.axis[e].sizeAttr],10),m=this.contentWrapperEl[this.axis[e].scrollOffsetAttr];m=e==="x"&&this.isRtl&&(!((s=n.getRtlHelpers())===null||s===void 0)&&s.isScrollOriginAtZero)?-m:m,e==="x"&&this.isRtl&&(m=!((o=n.getRtlHelpers())===null||o===void 0)&&o.isScrollingToNegative?m:-m);var p=m/(i-h),b=~~((u-r.size)*p);b=e==="x"&&this.isRtl?-b+(u-r.size):b,r.el.style.transform=e==="x"?"translate3d(".concat(b,"px, 0, 0)"):"translate3d(0, ".concat(b,"px, 0)")}},n.prototype.toggleTrackVisibility=function(e){e===void 0&&(e="y");var a=this.axis[e].track.el,s=this.axis[e].scrollbar.el;!a||!s||!this.contentWrapperEl||(this.axis[e].isOverflowing||this.axis[e].forceVisible?(a.style.visibility="visible",this.contentWrapperEl.style[this.axis[e].overflowAttr]="scroll",this.el.classList.add("".concat(this.classNames.scrollable,"-").concat(e))):(a.style.visibility="hidden",this.contentWrapperEl.style[this.axis[e].overflowAttr]="hidden",this.el.classList.remove("".concat(this.classNames.scrollable,"-").concat(e))),this.axis[e].isOverflowing?s.style.display="block":s.style.display="none")},n.prototype.showScrollbar=function(e){e===void 0&&(e="y"),this.axis[e].isOverflowing&&!this.axis[e].scrollbar.isVisible&&(Ar(this.axis[e].scrollbar.el,this.classNames.visible),this.axis[e].scrollbar.isVisible=!0)},n.prototype.hideScrollbar=function(e){e===void 0&&(e="y"),this.axis[e].isOverflowing&&this.axis[e].scrollbar.isVisible&&(Er(this.axis[e].scrollbar.el,this.classNames.visible),this.axis[e].scrollbar.isVisible=!1)},n.prototype.hideNativeScrollbar=function(){this.offsetEl&&(this.offsetEl.style[this.isRtl?"left":"right"]=this.axis.y.isOverflowing||this.axis.y.forceVisible?"-".concat(this.scrollbarWidth,"px"):"0px",this.offsetEl.style.bottom=this.axis.x.isOverflowing||this.axis.x.forceVisible?"-".concat(this.scrollbarWidth,"px"):"0px")},n.prototype.onMouseMoveForAxis=function(e){e===void 0&&(e="y");var a=this.axis[e];!a.track.el||!a.scrollbar.el||(a.track.rect=a.track.el.getBoundingClientRect(),a.scrollbar.rect=a.scrollbar.el.getBoundingClientRect(),this.isWithinBounds(a.track.rect)?(this.showScrollbar(e),Ar(a.track.el,this.classNames.hover),this.isWithinBounds(a.scrollbar.rect)?Ar(a.scrollbar.el,this.classNames.hover):Er(a.scrollbar.el,this.classNames.hover)):(Er(a.track.el,this.classNames.hover),this.options.autoHide&&this.hideScrollbar(e)))},n.prototype.onMouseLeaveForAxis=function(e){e===void 0&&(e="y"),Er(this.axis[e].track.el,this.classNames.hover),Er(this.axis[e].scrollbar.el,this.classNames.hover),this.options.autoHide&&this.hideScrollbar(e)},n.prototype.onDragStart=function(e,a){var s;a===void 0&&(a="y");var o=bA(this.el),r=$r(this.el),i=this.axis[a].scrollbar,u=a==="y"?e.pageY:e.pageX;this.axis[a].dragOffset=u-(((s=i.rect)===null||s===void 0?void 0:s[this.axis[a].offsetAttr])||0),this.draggedAxis=a,Ar(this.el,this.classNames.dragging),o.addEventListener("mousemove",this.drag,!0),o.addEventListener("mouseup",this.onEndDrag,!0),this.removePreventClickId===null?(o.addEventListener("click",this.preventClick,!0),o.addEventListener("dblclick",this.preventClick,!0)):(r.clearTimeout(this.removePreventClickId),this.removePreventClickId=null)},n.prototype.onTrackClick=function(e,a){var s=this,o,r,i,u;a===void 0&&(a="y");var h=this.axis[a];if(!(!this.options.clickOnTrack||!h.scrollbar.el||!this.contentWrapperEl)){e.preventDefault();var m=$r(this.el);this.axis[a].scrollbar.rect=h.scrollbar.el.getBoundingClientRect();var p=this.axis[a].scrollbar,b=(r=(o=p.rect)===null||o===void 0?void 0:o[this.axis[a].offsetAttr])!==null&&r!==void 0?r:0,x=parseInt((u=(i=this.elStyles)===null||i===void 0?void 0:i[this.axis[a].sizeAttr])!==null&&u!==void 0?u:"0px",10),w=this.contentWrapperEl[this.axis[a].scrollOffsetAttr],$=a==="y"?this.mouseY-b:this.mouseX-b,D=$<0?-1:1,V=D===-1?w-x:w+x,R=40,E=function(){s.contentWrapperEl&&(D===-1?w>V&&(w-=R,s.contentWrapperEl[s.axis[a].scrollOffsetAttr]=w,m.requestAnimationFrame(E)):w<V&&(w+=R,s.contentWrapperEl[s.axis[a].scrollOffsetAttr]=w,m.requestAnimationFrame(E)))};E()}},n.prototype.getContentElement=function(){return this.contentEl},n.prototype.getScrollElement=function(){return this.contentWrapperEl},n.prototype.removeListeners=function(){var e=$r(this.el);this.el.removeEventListener("mouseenter",this.onMouseEnter),this.el.removeEventListener("pointerdown",this.onPointerEvent,!0),this.el.removeEventListener("mousemove",this.onMouseMove),this.el.removeEventListener("mouseleave",this.onMouseLeave),this.contentWrapperEl&&this.contentWrapperEl.removeEventListener("scroll",this.onScroll),e.removeEventListener("resize",this.onWindowResize),this.mutationObserver&&this.mutationObserver.disconnect(),this.resizeObserver&&this.resizeObserver.disconnect(),this.onMouseMove.cancel(),this.onWindowResize.cancel(),this.onStopScrolling.cancel(),this.onMouseEntered.cancel()},n.prototype.unMount=function(){this.removeListeners()},n.prototype.isWithinBounds=function(e){return this.mouseX>=e.left&&this.mouseX<=e.left+e.width&&this.mouseY>=e.top&&this.mouseY<=e.top+e.height},n.prototype.findChild=function(e,a){var s=e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector;return Array.prototype.filter.call(e.children,function(o){return s.call(o,a)})[0]},n.rtlHelpers=null,n.defaultOptions={forceVisible:!1,clickOnTrack:!0,scrollbarMinSize:25,scrollbarMaxSize:0,ariaLabel:"scrollable content",classNames:{contentEl:"simplebar-content",contentWrapper:"simplebar-content-wrapper",offset:"simplebar-offset",mask:"simplebar-mask",wrapper:"simplebar-wrapper",placeholder:"simplebar-placeholder",scrollbar:"simplebar-scrollbar",track:"simplebar-track",heightAutoObserverWrapperEl:"simplebar-height-auto-observer-wrapper",heightAutoObserverEl:"simplebar-height-auto-observer",visible:"simplebar-visible",horizontal:"simplebar-horizontal",vertical:"simplebar-vertical",hover:"simplebar-hover",dragging:"simplebar-dragging",scrolling:"simplebar-scrolling",scrollable:"simplebar-scrollable",mouseEntered:"simplebar-mouse-entered"},scrollableNode:null,contentNode:null,autoHide:!0},n.getOptions=nxe,n.helpers=axe,n}(),FE=function(n,e){return FE=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(a,s){a.__proto__=s}||function(a,s){for(var o in s)Object.prototype.hasOwnProperty.call(s,o)&&(a[o]=s[o])},FE(n,e)};function sxe(n,e){if(typeof e!="function"&&e!==null)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");FE(n,e);function a(){this.constructor=n}n.prototype=e===null?Object.create(e):(a.prototype=e.prototype,new a)}var _B=iL.helpers,wA=_B.getOptions,Ps=_B.addClasses,gB=function(n){sxe(e,n);function e(){for(var a=[],s=0;s<arguments.length;s++)a[s]=arguments[s];var o=n.apply(this,a)||this;return e.instances.set(a[0],o),o}return e.initDOMLoadedElements=function(){document.removeEventListener("DOMContentLoaded",this.initDOMLoadedElements),window.removeEventListener("load",this.initDOMLoadedElements),Array.prototype.forEach.call(document.querySelectorAll("[data-simplebar]"),function(a){a.getAttribute("data-simplebar")!=="init"&&!e.instances.has(a)&&new e(a,wA(a.attributes))})},e.removeObserver=function(){var a;(a=e.globalObserver)===null||a===void 0||a.disconnect()},e.prototype.initDOM=function(){var a=this,s,o,r;if(!Array.prototype.filter.call(this.el.children,function(h){return h.classList.contains(a.classNames.wrapper)}).length){for(this.wrapperEl=document.createElement("div"),this.contentWrapperEl=document.createElement("div"),this.offsetEl=document.createElement("div"),this.maskEl=document.createElement("div"),this.contentEl=document.createElement("div"),this.placeholderEl=document.createElement("div"),this.heightAutoObserverWrapperEl=document.createElement("div"),this.heightAutoObserverEl=document.createElement("div"),Ps(this.wrapperEl,this.classNames.wrapper),Ps(this.contentWrapperEl,this.classNames.contentWrapper),Ps(this.offsetEl,this.classNames.offset),Ps(this.maskEl,this.classNames.mask),Ps(this.contentEl,this.classNames.contentEl),Ps(this.placeholderEl,this.classNames.placeholder),Ps(this.heightAutoObserverWrapperEl,this.classNames.heightAutoObserverWrapperEl),Ps(this.heightAutoObserverEl,this.classNames.heightAutoObserverEl);this.el.firstChild;)this.contentEl.appendChild(this.el.firstChild);this.contentWrapperEl.appendChild(this.contentEl),this.offsetEl.appendChild(this.contentWrapperEl),this.maskEl.appendChild(this.offsetEl),this.heightAutoObserverWrapperEl.appendChild(this.heightAutoObserverEl),this.wrapperEl.appendChild(this.heightAutoObserverWrapperEl),this.wrapperEl.appendChild(this.maskEl),this.wrapperEl.appendChild(this.placeholderEl),this.el.appendChild(this.wrapperEl),(s=this.contentWrapperEl)===null||s===void 0||s.setAttribute("tabindex","0"),(o=this.contentWrapperEl)===null||o===void 0||o.setAttribute("role","region"),(r=this.contentWrapperEl)===null||r===void 0||r.setAttribute("aria-label",this.options.ariaLabel)}if(!this.axis.x.track.el||!this.axis.y.track.el){var i=document.createElement("div"),u=document.createElement("div");Ps(i,this.classNames.track),Ps(u,this.classNames.scrollbar),i.appendChild(u),this.axis.x.track.el=i.cloneNode(!0),Ps(this.axis.x.track.el,this.classNames.horizontal),this.axis.y.track.el=i.cloneNode(!0),Ps(this.axis.y.track.el,this.classNames.vertical),this.el.appendChild(this.axis.x.track.el),this.el.appendChild(this.axis.y.track.el)}iL.prototype.initDOM.call(this),this.el.setAttribute("data-simplebar","init")},e.prototype.unMount=function(){iL.prototype.unMount.call(this),e.instances.delete(this.el)},e.initHtmlApi=function(){this.initDOMLoadedElements=this.initDOMLoadedElements.bind(this),typeof MutationObserver<"u"&&(this.globalObserver=new MutationObserver(e.handleMutations),this.globalObserver.observe(document,{childList:!0,subtree:!0})),document.readyState==="complete"||document.readyState!=="loading"&&!document.documentElement.doScroll?window.setTimeout(this.initDOMLoadedElements):(document.addEventListener("DOMContentLoaded",this.initDOMLoadedElements),window.addEventListener("load",this.initDOMLoadedElements))},e.handleMutations=function(a){a.forEach(function(s){s.addedNodes.forEach(function(o){o.nodeType===1&&(o.hasAttribute("data-simplebar")?!e.instances.has(o)&&document.documentElement.contains(o)&&new e(o,wA(o.attributes)):o.querySelectorAll("[data-simplebar]").forEach(function(r){r.getAttribute("data-simplebar")!=="init"&&!e.instances.has(r)&&document.documentElement.contains(r)&&new e(r,wA(r.attributes))}))}),s.removedNodes.forEach(function(o){o.nodeType===1&&(o.getAttribute("data-simplebar")==="init"?e.instances.has(o)&&!document.documentElement.contains(o)&&e.instances.get(o).unMount():Array.prototype.forEach.call(o.querySelectorAll('[data-simplebar="init"]'),function(r){e.instances.has(r)&&!document.documentElement.contains(r)&&e.instances.get(r).unMount()}))})})},e.instances=new WeakMap,e}(iL);xP&&gB.initHtmlApi();const oxe={class:"h-[70px] px-3 sm:px-8 flex items-center"},rxe={href:"",class:"flex mr-auto"},ixe=["src"],lxe={class:"py-2"},cxe={key:0,class:"my-6 menu__divider"},dxe={key:1},uxe=["href","onClick"],pxe={class:"menu__icon"},hxe={class:"menu__title"},fxe=["href","onClick"],mxe={class:"menu__icon"},vxe={class:"menu__title"},yxe=["href","onClick"],_xe={class:"menu__icon"},gxe={class:"menu__title"},Gs=Ce({__name:"MobileMenu",setup(n){const{t:e}=tt(),a=Sa(),s=ct();let o=gn([]);const r=x=>{Object.assign(o,x)},i=Rd(),u=cs(),h=ee(()=>uB(u.menu(i.theme.layout),a)),m=O(!1),p=x=>{m.value=x},b=O();return dt(h,()=>{r(h.value)}),at(()=>{b.value&&new gB(b.value),r(h.value)}),(x,w)=>(L(),U("div",{class:F(["mobile-menu group top-0 inset-x-0 fixed bg-theme-1/90 z-[60] border-b border-white/[0.08] dark:bg-darkmode-800/90 md:hidden","before:content-[''] before:w-full before:h-screen before:z-10 before:fixed before:inset-x-0 before:bg-black/90 before:transition-opacity before:duration-200 before:ease-in-out","before:invisible before:opacity-0","[&.mobile-menu--active]:before:visible [&.mobile-menu--active]:before:opacity-100",m.value&&"mobile-menu--active"])},[c("div",oxe,[c("a",rxe,[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,ixe)]),c("a",{href:"#",onClick:w[1]||(w[1]=$=>$.preventDefault())},[l(t(re),{icon:"BarChart2",class:"w-8 h-8 text-white transform -rotate-90",onClick:w[0]||(w[0]=()=>{p(!m.value)})})])]),c("div",{ref_key:"scrollableRef",ref:b,class:F(t(At)(["h-screen z-20 top-0 left-0 w-[270px] -ml-[100%] bg-primary transition-all duration-300 ease-in-out dark:bg-darkmode-800","[&[data-simplebar]]:fixed [&_.simplebar-scrollbar]:before:bg-black/50","group-[.mobile-menu--active]:ml-0"]))},[c("a",{href:"#",onClick:w[3]||(w[3]=$=>$.preventDefault()),class:F(["fixed top-0 right-0 mt-4 mr-4 transition-opacity duration-200 ease-in-out","invisible opacity-0","group-[.mobile-menu--active]:visible group-[.mobile-menu--active]:opacity-100"])},[l(t(re),{icon:"XCircle",class:"w-8 h-8 text-white transform -rotate-90",onClick:w[2]||(w[2]=()=>{p(!m.value)})})],2),c("ul",lxe,[(L(!0),U(ke,null,Fe(t(o),($,D)=>(L(),U(ke,null,[$=="divider"?(L(),U("li",cxe)):(L(),U("li",dxe,[c("a",{href:$.subMenu?"#":(V=>{try{return t(s).resolve({name:V}).fullPath}catch{return""}})($.pageName),onClick:V=>{V.preventDefault(),t(kA)($,t(s),p),r([...t(o)])},class:F([$.active?"menu menu--active":"menu"])},[c("div",pxe,[l(t(re),{icon:$.icon},null,8,["icon"])]),c("div",hxe,[A(_(t(e)($.title))+" ",1),$.subMenu?(L(),U("div",{key:0,class:F(["menu__sub-icon",$.activeDropdown&&"transform rotate-180"])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])],10,uxe),l(hn,{onEnter:t(IF),onLeave:t(LF)},{default:f(()=>[$.subMenu&&$.activeDropdown?(L(),U("ul",{key:0,class:F({"menu__sub-open":$.activeDropdown})},[(L(!0),U(ke,null,Fe($.subMenu,(V,R)=>(L(),U("li",{key:R},[c("a",{href:V.subMenu?"#":(E=>{try{return t(s).resolve({name:E}).fullPath}catch{return""}})(V.pageName),onClick:E=>{E.preventDefault(),t(kA)(V,t(s),p),r([...t(o)])},class:F([V.active?"menu menu--active":"menu"])},[c("div",mxe,[l(t(re),{icon:V.icon},null,8,["icon"])]),c("div",vxe,[A(_(t(e)(V.title))+" ",1),V.subMenu?(L(),U("div",{key:0,class:F(["menu__sub-icon",V.activeDropdown&&"transform rotate-180"])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])],10,fxe),l(hn,{onEnter:t(IF),onLeave:t(LF)},{default:f(()=>[V.subMenu&&V.activeDropdown?(L(),U("ul",{key:0,class:F({"menu__sub-open":V.activeDropdown})},[(L(!0),U(ke,null,Fe(V.subMenu,(E,P)=>(L(),U("li",{key:P},[c("a",{href:E.subMenu?"#":(S=>{try{return t(s).resolve({name:S}).fullPath}catch{return""}})(E.pageName),onClick:S=>{S.preventDefault(),t(kA)(E,t(s),p),r([...t(o)])},class:F([E.active?"menu menu--active":"menu"])},[c("div",_xe,[l(t(re),{icon:E.icon},null,8,["icon"])]),c("div",gxe,_(t(e)(E.title)),1)],10,yxe)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])],2)],2))}}),kxe=(n,e)=>{n.forceActiveMenu=e},jE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=jE(s.subMenu,e))}),a},kB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&jE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=jE(o.subMenu,e);const r=[];kB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},xA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},EF=n=>{lr(n,300)},TF=n=>{ir(n,300)},Zs=Ce({__name:"ScrollToTop",props:{visible:{type:Boolean,default:!0}},setup(n){const e=n,a=()=>{window.scrollTo({top:0,behavior:"smooth"})};return(s,o)=>e.visible?(L(),U("div",{key:0,class:"fixed bottom-0 right-0 z-50 flex items-center justify-center w-auto h-auto mb-5 mr-20 p-2 border rounded-full shadow-md cursor-pointer box",onClick:a},[l(t(re),{icon:"ArrowUp",class:"w-5 h-5 hover:animate-bounce"})])):Me("",!0)}}),bxe="/assets/spinner-big-D0QEvRVc.gif",wxe=["src"],da=Ce({__name:"LoadingOverlay",props:{visible:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1}},setup(n){const e=n,a=An(e,"visible"),s=An(e,"transparent");return(o,r)=>(L(),U("div",{class:F({"loading-container":a.value})},[Lt(o.$slots,"default"),a.value?(L(),U("div",{key:0,class:F({"loading-overlay":!0,"loading-overlay-gray":!s.value})},[c("img",{src:t(bxe),class:"spinner",alt:"DCSLab"},null,8,wxe)],2)):Me("",!0)],2))}}),xxe={inheritAttrs:!1},Mxe=Ce({...xxe,__name:"Alert",props:{as:{default:"div"},dismissible:{type:Boolean},variant:{},onShow:{},onShown:{},onHide:{},onHidden:{}},setup(n){const{as:e,dismissible:a,variant:s,...o}=n,r=Ot(),i=O(!0),u=["bg-primary border-primary text-white","dark:border-primary"],h=["bg-secondary/70 border-secondary/70 text-slate-500","dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300"],m=["bg-success border-success text-slate-900","dark:border-success"],p=["bg-warning border-warning text-slate-900","dark:border-warning"],b=["bg-pending border-pending text-white","dark:border-pending"],x=["bg-danger border-danger text-white","dark:border-danger"],w=["bg-dark border-dark text-white","dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300"],$=["border-primary text-primary","dark:border-primary"],D=["border-secondary text-slate-500","dark:border-darkmode-100/40 dark:text-slate-300"],V=["border-success text-success dark:border-success","dark:border-success"],R=["border-warning text-warning","dark:border-warning"],E=["border-pending text-pending","dark:border-pending"],P=["border-danger text-danger","dark:border-danger"],S=["border-dark text-dark","dark:border-darkmode-800 dark:text-slate-300"],C=["bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary","dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary"],M=["bg-slate-300 border-secondary bg-opacity-10 text-slate-500","dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300"],g=["bg-success border-success bg-opacity-20 border-opacity-5 text-success","dark:border-success dark:border-opacity-20"],v=["bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning","dark:border-warning dark:border-opacity-20"],T=["bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending","dark:border-pending dark:border-opacity-20"],j=["bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger","dark:border-danger dark:border-opacity-20"],B=["bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark","dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300"],oe=ee(()=>At(["relative border rounded-md px-5 py-4",s=="primary"&&u,s=="secondary"&&h,s=="success"&&m,s=="warning"&&p,s=="pending"&&b,s=="danger"&&x,s=="dark"&&w,s=="outline-primary"&&$,s=="outline-secondary"&&D,s=="outline-success"&&V,s=="outline-warning"&&R,s=="outline-pending"&&E,s=="outline-danger"&&P,s=="outline-dark"&&S,s=="soft-primary"&&C,s=="soft-secondary"&&M,s=="soft-success"&&g,s=="soft-warning"&&v,s=="soft-pending"&&T,s=="soft-danger"&&j,s=="soft-dark"&&B,a&&"pl-5 pr-16",typeof r.class=="string"&&r.class]));return(be,$e)=>(L(),ge(t(rr),{as:"template",show:i.value,enter:"transition-all ease-linear duration-150",enterFrom:"invisible opacity-0 translate-y-1",enterTo:"visible opacity-100 translate-y-0",leave:"transition-all ease-linear duration-150",leaveFrom:"visible opacity-100 translate-y-0",leaveTo:"invisible opacity-0 translate-y-1"},{default:f(()=>[(L(),ge(Da(e),Ft({role:"alert",class:oe.value},t(Pt).omit(t(r),"class")),{default:f(()=>[Lt(be.$slots,"default",{dismiss:()=>{i.value=!1}})]),_:3},16,["class"]))]),_:3},8,["show"]))}}),Cxe={inheritAttrs:!1},Sxe=Ce({...Cxe,__name:"DismissButton",props:{as:{default:"button"}},setup(n){const{as:e}=n,a=Ot(),s=ee(()=>At(["text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),ge(Da(e),Ft({type:"button","aria-label":"Close",class:s.value},t(Pt).omit(t(a),"class")),{default:f(()=>[Lt(o.$slots,"default")]),_:3},16,["class"]))}}),Yr=Object.assign({},Mxe,{DismissButton:Sxe}),Ixe={key:0,class:"mt-4"},Lxe={class:"flex flex-col"},$xe={class:"flex items-center"},Axe={class:"mt-3 ml-12"},Exe={class:"list-disc"},Txe={key:0},dn=Ce({__name:"AlertPlaceholder",props:{alertType:{default:"hidden"},alertList:{default:null},title:{default:""}},emits:["dismiss"],setup(n,{emit:e}){const{t:a}=tt(),s=n,o=e,r=An(s,"alertType"),i=An(s,"alertList"),u=An(s,"title"),h=ee(()=>r.value=="danger"?"soft-danger":r.value=="success"?"soft-success":r.value=="warning"?"soft-warning":r.value=="pending"?"soft-pending":r.value=="dark"?"soft-dark":"soft-danger"),m=()=>{o("dismiss")};return(p,b)=>r.value!="hidden"?(L(),U("div",Ixe,[l(t(Yr),{variant:h.value,class:"flex items-center mb-2"},{default:f(()=>[c("div",Lxe,[c("div",$xe,[l(t(re),{icon:"AlertCircle",class:"w-6 h-6 mr-2"}),A(" "+_(u.value!=""?u.value:t(a)("components.alert-placeholder.default_title"))+" ",1),l(t(Yr).DismissButton,{type:"button",class:"text-white","aria-label":"Close",onClick:m},{default:f(()=>[l(t(re),{icon:"X",class:"w-4 h-4"})]),_:1})]),c("div",Axe,[c("ul",Exe,[(L(!0),U(ke,null,Fe(i.value,(x,w)=>(L(),U(ke,{key:w},[typeof x=="string"?(L(),U("li",Txe,_(x),1)):typeof x=="object"&&Array.isArray(x)?(L(!0),U(ke,{key:1},Fe(x,($,D)=>(L(),U("li",{key:D,class:"ml-5"},_($),1))),128)):Me("",!0)],64))),128))])])])]),_:1},8,["variant"])])):Me("",!0)}}),Pxe={key:0,class:"mt-8"},Ks=Ce({__name:"EmailVerificationAlert",setup(n){const{t:e}=tt(),a=Za(),s=ee(()=>a.getUserContext),o=ee(()=>a.getIsAuthenticated),r=ee(()=>a.getIsLoaded);return(i,u)=>r.value&&o.value&&s.value.email_verified==!1?(L(),U("div",Pxe,[l(t(Yr),{variant:"secondary",class:"flex items-center mb-2"},{default:f(({dismiss:h})=>[A(_(t(e)("components.alert-placeholder.email_verification.message"))+" ",1),l(t(Yr).DismissButton,{type:"button",class:"text-white","aria-label":"Close",onClick:h},{default:f(()=>[l(t(re),{icon:"X",class:"text-black w-4 h-4"})]),_:2},1032,["onClick"])]),_:1})])):Me("",!0)}}),Dxe={class:F(["rubick px-5 sm:px-8 py-5","before:content-[''] before:bg-gradient-to-b before:from-theme-1 before:to-theme-2 dark:before:from-darkmode-800 dark:before:to-darkmode-800 before:fixed before:inset-0 before:z-[-1]"])},Rxe={class:"mt-[4.7rem] flex md:mt-0"},Oxe={class:"side-nav hidden w-[80px] overflow-x-hidden pb-16 pr-5 md:block xl:w-[230px]"},Vxe=["src"],Uxe={class:"hidden ml-3 text-lg text-white xl:block"},Fxe=c("div",{class:"my-6 side-nav__divider"},null,-1),jxe={class:"side-menu__icon"},Hxe={class:"side-menu__title"},Nxe={class:"side-menu__icon"},zxe={class:"side-menu__title"},Bxe={class:"side-menu__icon"},qxe={class:"side-menu__title"},Wxe={class:"md:max-w-auto min-h-screen min-w-0 max-w-full flex-1 rounded-[30px] bg-slate-100 px-4 pb-10 before:block before:h-px before:w-full before:content-[''] dark:bg-darkmode-700 md:px-[22px]"},Gxe=Ce({__name:"SideMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=R=>{Object.assign(r,R)},u=cs(),h=ee(()=>kB(u.menu("side-menu"),s)),m=O(window.innerWidth),p=xs(),b=ee(()=>p.screenMaskValue),x=ha(),w=O(!1),$=()=>{window.scrollY>100?w.value=!0:w.value=!1};window.addEventListener("scroll",$),St("forceActiveMenu",R=>{kxe(s,R),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await V(),i(h.value),window.addEventListener("resize",()=>{m.value=window.innerWidth})});const D="DCSLab",V=async()=>{let R=await a.readUserMenu();u.setMenu(R.data);let E=await a.readUserApi();x.setZiggy(E.data)};return(R,E)=>{const P=Qt("RouterLink"),S=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:b.value,transparent:!1},{default:f(()=>[c("div",Dxe,[l(t(Gs)),c("div",Rxe,[c("nav",Oxe,[l(P,{to:{name:"side-menu-dashboard-maindashboard"},class:"flex items-center pt-4 pl-5 intro-x"},{default:f(()=>[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,Vxe),c("span",Uxe,_(t(D)),1)]),_:1}),Fxe,c("ul",null,[(L(!0),U(ke,null,Fe(t(r),(C,M)=>(L(),U(ke,null,[C=="divider"?(L(),U("li",{type:"li",class:"my-6 side-nav__divider",key:"divider-"+M})):(L(),U("li",{key:M},[l(t(Qa),{as:"a",content:t(e)(C.title),options:{placement:"right"},disable:m.value>1260,href:C.subMenu?"#":(g=>{try{return t(o).resolve({name:g}).fullPath}catch{return""}})(C.pageName),onClick:g=>{g.preventDefault(),t(xA)(C,t(o)),i([...t(r)])},class:F([C.active?"side-menu side-menu--active":"side-menu"])},{default:f(()=>[c("div",jxe,[l(t(re),{icon:C.icon},null,8,["icon"])]),c("div",Hxe,[A(_(t(e)(C.title))+" ",1),C.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":C.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","disable","href","onClick","class"]),l(hn,{onEnter:t(EF),onLeave:t(TF)},{default:f(()=>[C.subMenu&&C.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":C.activeDropdown})},[(L(!0),U(ke,null,Fe(C.subMenu,(g,v)=>(L(),U("li",{key:v},[l(t(Qa),{as:"a",content:t(e)(g.title),options:{placement:"right"},disable:m.value>1260,href:g.subMenu?"#":(T=>{try{return t(o).resolve({name:T}).fullPath}catch{return""}})(g.pageName),class:F([g.active?"side-menu side-menu--active":"side-menu"]),onClick:T=>{T.preventDefault(),t(xA)(g,t(o)),i([...t(r)])}},{default:f(()=>[c("div",Nxe,[l(t(re),{icon:g.icon},null,8,["icon"])]),c("div",zxe,[A(_(t(e)(g.title))+" ",1),g.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":g.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","disable","href","class","onClick"]),g.subMenu?(L(),ge(hn,{key:0,onEnter:t(EF),onLeave:t(TF)},{default:f(()=>[g.subMenu&&g.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":g.activeDropdown})},[(L(!0),U(ke,null,Fe(g.subMenu,(T,j)=>(L(),U("li",{key:j},[l(t(Qa),{as:"a",content:t(e)(T.title),options:{placement:"right"},disable:m.value>1260,href:T.subMenu?"#":(B=>{try{return t(o).resolve({name:B}).fullPath}catch{return""}})(T.pageName),class:F([T.active?"side-menu side-menu--active":"side-menu"]),onClick:B=>{B.preventDefault(),t(xA)(T,t(o)),i([...t(r)])}},{default:f(()=>[c("div",Bxe,[l(t(re),{icon:T.icon},null,8,["icon"])]),c("div",qxe,_(t(e)(T.title)),1)]),_:2},1032,["content","disable","href","class","onClick"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])):Me("",!0)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])]),c("div",Wxe,[l(t(wP)),l(t(Ks)),l(S,{onUpdateMenu:V}),(L(),U(ke,null,Fe(3,C=>c("br",{key:C})),64)),l(t(Zs),{visible:w.value},null,8,["visible"])])])])]),_:1},8,["visible"])])}}}),Zxe=(n,e)=>{n.forceActiveMenu=e},HE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=HE(s.subMenu,e))}),a},bB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&HE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=HE(o.subMenu,e);const r=[];bB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},MA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},PF=n=>{lr(n,300)},DF=n=>{ir(n,300)},Kxe={class:F(["rubick px-5 sm:px-8 py-5","before:content-[''] before:bg-gradient-to-b before:from-theme-1 before:to-theme-2 dark:before:from-darkmode-800 dark:before:to-darkmode-800 before:fixed before:inset-0 before:z-[-1]"])},Xxe={class:"flex mt-[4.7rem] md:mt-0"},Yxe={class:"side-nav side-nav--simple pr-5 pb-16 overflow-x-hidden hidden md:block w-[80px]"},Qxe=["src"],Jxe=c("div",{class:"my-6 side-nav__divider"},null,-1),e8e={class:"side-menu__icon"},t8e={class:"side-menu__title"},a8e={class:"side-menu__icon"},n8e={class:"side-menu__title"},s8e={class:"side-menu__icon"},o8e={class:"side-menu__title"},r8e={class:"rounded-[30px] min-w-0 min-h-screen flex-1 pb-10 bg-slate-100 dark:bg-darkmode-700 px-4 md:px-[22px] max-w-full md:max-w-auto before:content-[''] before:w-full before:h-px before:block"},i8e=Ce({__name:"SimpleMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=D=>{Object.assign(r,D)},u=cs(),h=ee(()=>bB(u.menu("simple-menu"),s)),m=xs(),p=ee(()=>m.screenMaskValue),b=ha(),x=O(!1),w=()=>{window.scrollY>100?x.value=!0:x.value=!1};window.addEventListener("scroll",w),St("forceActiveMenu",D=>{Zxe(s,D),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await $(),i(h.value)});const $=async()=>{let D=await a.readUserMenu();u.setMenu(D.data);let V=await a.readUserApi();b.setZiggy(V.data)};return(D,V)=>{const R=Qt("RouterLink"),E=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:p.value,transparent:!1},{default:f(()=>[c("div",Kxe,[l(t(Gs)),c("div",Xxe,[c("nav",Yxe,[l(R,{to:{name:"side-menu-dashboard-maindashboard"},class:"flex items-center pt-4 pl-5 intro-x"},{default:f(()=>[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,Qxe)]),_:1}),Jxe,c("ul",null,[(L(!0),U(ke,null,Fe(t(r),(P,S)=>(L(),U(ke,null,[P=="divider"?(L(),U("li",{type:"li",class:"my-6 side-nav__divider",key:"divider-"+S})):(L(),U("li",{key:S},[l(t(Qa),{as:"a",content:t(e)(P.title),options:{placement:"right"},href:P.subMenu?"#":(C=>{try{return t(o).resolve({name:C}).fullPath}catch{return""}})(P.pageName),onClick:C=>{C.preventDefault(),t(MA)(P,t(o)),i([...t(r)])},class:F([P.active?"side-menu side-menu--active":"side-menu"])},{default:f(()=>[c("div",e8e,[l(t(re),{icon:P.icon},null,8,["icon"])]),c("div",t8e,[A(_(t(e)(P.title))+" ",1),P.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":P.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","href","onClick","class"]),l(hn,{onEnter:t(PF),onLeave:t(DF)},{default:f(()=>[P.subMenu&&P.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":P.activeDropdown})},[(L(!0),U(ke,null,Fe(P.subMenu,(C,M)=>(L(),U("li",{key:M},[l(t(Qa),{as:"a",content:t(e)(C.title),options:{placement:"right"},href:C.subMenu?"#":(g=>{try{return t(o).resolve({name:g}).fullPath}catch{return""}})(C.pageName),class:F([C.active?"side-menu side-menu--active":"side-menu"]),onClick:g=>{g.preventDefault(),t(MA)(C,t(o)),i([...t(r)])}},{default:f(()=>[c("div",a8e,[l(t(re),{icon:C.icon},null,8,["icon"])]),c("div",n8e,[A(_(t(e)(C.title))+" ",1),C.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":C.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","href","class","onClick"]),C.subMenu?(L(),ge(hn,{key:0,onEnter:t(PF),onLeave:t(DF)},{default:f(()=>[C.subMenu&&C.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":C.activeDropdown})},[(L(!0),U(ke,null,Fe(C.subMenu,(g,v)=>(L(),U("li",{key:v},[l(t(Qa),{as:"a",content:t(e)(g.title),options:{placement:"right"},href:g.subMenu?"#":(T=>{try{return t(o).resolve({name:T}).fullPath}catch{return""}})(g.pageName),class:F([g.active?"side-menu side-menu--active":"side-menu"]),onClick:T=>{T.preventDefault(),t(MA)(g,t(o)),i([...t(r)])}},{default:f(()=>[c("div",s8e,[l(t(re),{icon:g.icon},null,8,["icon"])]),c("div",o8e,_(t(e)(g.title)),1)]),_:2},1032,["content","href","class","onClick"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])):Me("",!0)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])]),c("div",r8e,[l(t(wP)),l(t(Ks)),l(E,{onUpdateMenu:$}),(L(),U(ke,null,Fe(3,P=>c("br",{key:P})),64)),l(t(Zs),{visible:x.value},null,8,["visible"])])])])]),_:1},8,["visible"])])}}}),l8e=(n,e)=>{n.forceActiveMenu=e},NE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=NE(s.subMenu,e))}),a},wB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&NE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=NE(o.subMenu,e);const r=[];wB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},CA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},c8e=["src"],_9=Ce({__name:"HomeLogo",props:{visible:{type:Boolean,default:!0},theme:{default:"rubick"},layout:{default:"side-menu"}},setup(n){const e=n,a="DCSLab",s=O("side-menu-dashboard-maindashboard");return(o,r)=>{const i=Qt("RouterLink");return L(),ge(i,{to:{name:s.value},class:F(["-intro-x hidden md:flex",e.layout=="side-menu"&&"xl:w-[180px]",e.layout=="simple-menu"&&"xl:w-auto",e.layout=="top-menu"&&"w-auto"])},{default:f(()=>[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,c8e),c("span",{class:F(["ml-3 text-lg text-white",e.layout=="side-menu"&&"hidden xl:block",e.layout=="simple-menu"&&"hidden"])},_(t(a)),3)]),_:1},8,["to","class"])}}}),d8e={class:F(["rubick px-5 sm:px-8 py-5","before:content-[''] before:bg-gradient-to-b before:from-theme-1 before:to-theme-2 dark:before:from-darkmode-800 dark:before:to-darkmode-800 before:fixed before:inset-0 before:z-[-1]"])},u8e={class:"border-b border-white/[0.08] mt-[2.2rem] md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 pt-3 md:pt-0 mb-10"},p8e={class:"flex items-center h-[70px] z-[51] relative"},h8e={class:"relative z-50 hidden top-nav md:block"},f8e={class:"pb-3 xl:pb-0 xl:px-[50px] flex flex-wrap"},m8e=["href","onClick"],v8e={class:"top-menu__icon"},y8e={class:"top-menu__title"},_8e=["href","onClick"],g8e={class:"top-menu__icon"},k8e={class:"top-menu__title"},b8e=["href","onClick"],w8e={class:"top-menu__icon"},x8e={class:"top-menu__title"},M8e={class:"rounded-[30px] min-w-0 min-h-screen flex-1 pb-10 bg-slate-100 dark:bg-darkmode-700 px-4 md:px-[22px] max-w-full md:max-w-auto before:content-[''] before:w-full before:h-px before:block"},C8e=Ce({__name:"TopMenu",setup(n){const{t:e}=tt(),a=new aa;O(!1);const s=Sa(),o=ct();let r=gn([]);const i=D=>{Object.assign(r,D)},u=cs(),h=ee(()=>wB(u.menu("top-menu"),s)),m=xs(),p=ee(()=>m.screenMaskValue),b=ha(),x=O(!1),w=()=>{window.scrollY>100?x.value=!0:x.value=!1};window.addEventListener("scroll",w),St("forceActiveMenu",D=>{l8e(s,D),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await $(),i(h.value)});const $=async()=>{let D=await a.readUserMenu();u.setMenu(D.data);let V=await a.readUserApi();b.setZiggy(V.data)};return(D,V)=>{const R=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:p.value,transparent:!1},{default:f(()=>[c("div",d8e,[l(t(Gs)),c("div",u8e,[c("div",p8e,[l(_9,{layout:"top-menu"}),l(Uc,{theme:"rubick",layout:"top-menu"}),l(jc),l(Hc),l(zc,{theme:"rubick",layout:"top-menu"})])]),c("nav",h8e,[c("ul",f8e,[(L(!0),U(ke,null,Fe(t(r),(E,P)=>(L(),U("li",{key:P},[E!="divider"?(L(),U(ke,{key:0},[c("a",{href:E.subMenu?"#":(S=>{try{return t(o).resolve({name:S}).fullPath}catch{return""}})(E.pageName),class:F([E.active?"top-menu top-menu--active":"top-menu"]),onClick:S=>{S.preventDefault(),t(CA)(E,t(o))}},[c("div",v8e,[l(t(re),{icon:E.icon},null,8,["icon"])]),c("div",y8e,[A(_(t(e)(E.title))+" ",1),E.subMenu?(L(),ge(t(re),{key:0,class:"top-menu__sub-icon",icon:"ChevronDown"})):Me("",!0)])],10,m8e),E.subMenu?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":E.activeDropdown})},[(L(!0),U(ke,null,Fe(E.subMenu,(S,C)=>(L(),U("li",{key:C},[c("a",{href:S.subMenu?"#":(M=>{try{return t(o).resolve({name:M}).fullPath}catch{return""}})(S.pageName),class:"top-menu",onClick:M=>{M.preventDefault(),t(CA)(S,t(o))}},[c("div",g8e,[l(t(re),{icon:S.icon},null,8,["icon"])]),c("div",k8e,[A(_(t(e)(S.title))+" ",1),S.subMenu?(L(),ge(t(re),{key:0,class:"top-menu__sub-icon",icon:"ChevronDown"})):Me("",!0)])],8,_8e),S.subMenu?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":S.activeDropdown})},[(L(!0),U(ke,null,Fe(S.subMenu,(M,g)=>(L(),U("li",{key:g},[c("a",{href:M.subMenu?"#":(v=>{try{return t(o).resolve({name:v}).fullPath}catch{return""}})(M.pageName),class:"top-menu",onClick:v=>{v.preventDefault(),t(CA)(M,t(o))}},[c("div",w8e,[l(t(re),{icon:M.icon},null,8,["icon"])]),c("div",x8e,_(t(e)(M.title)),1)],8,b8e)]))),128))],2)):Me("",!0)]))),128))],2)):Me("",!0)],64)):Me("",!0)]))),128))])]),c("div",M8e,[l(t(Ks)),l(R,{onUpdateMenu:$}),(L(),U(ke,null,Fe(3,E=>c("br",{key:E})),64)),l(t(Zs),{visible:x.value},null,8,["visible"])])])]),_:1},8,["visible"])])}}}),S8e={class:"top-bar-boxed relative z-[51] -mx-5 mb-12 mt-12 h-[70px] border-b border-white/[0.08] px-3 sm:-mx-8 sm:px-8 md:-mt-5 md:pt-0"},I8e={class:"flex h-full items-center"},MP=Ce({__name:"TopBar",setup(n){return(e,a)=>(L(),U("div",S8e,[c("div",I8e,[l(_9,{theme:"icewall"}),l(Uc,{theme:"icewall"}),l(jc,{theme:"icewall"}),l(Hc,{theme:"icewall"}),l(zc,{theme:"icewall"})])]))}}),L8e=(n,e)=>{n.forceActiveMenu=e},zE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=zE(s.subMenu,e))}),a},xB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&zE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=zE(o.subMenu,e);const r=[];xB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},SA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},RF=n=>{lr(n,300)},OF=n=>{ir(n,300)},$8e={class:F(["icewall px-5 sm:px-8 py-5 relative","after:content-[''] after:bg-gradient-to-b after:from-theme-1 after:to-theme-2 dark:after:from-darkmode-800 dark:after:to-darkmode-800 after:fixed after:inset-0 after:z-[-2]"])},A8e={class:F(["wrapper relative","before:content-[''] before:z-[-1] before:translate-y-[35px] before:opacity-0 before:w-[95%] before:rounded-[1.3rem] before:bg-white/10 before:h-full before:-mt-4 before:absolute before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/50"])},E8e={class:F(["wrapper-box bg-gradient-to-b from-theme-1 to-theme-2 flex rounded-[1.3rem] -mt-[7px] md:mt-0 dark:from-darkmode-400 dark:to-darkmode-400 translate-y-[35px]","before:block before:absolute before:inset-0 before:bg-black/[0.15] before:rounded-[1.3rem] before:z-[-1]"])},T8e={class:"side-nav hidden md:block w-[100px] xl:w-[250px] px-5 pt-8 pb-16 overflow-x-hidden"},P8e={class:"side-menu__icon"},D8e={class:"side-menu__title"},R8e={class:"side-menu__icon"},O8e={class:"side-menu__title"},V8e={class:"side-menu__icon"},U8e={class:"side-menu__title"},F8e={class:"md:max-w-auto min-h-screen min-w-0 max-w-full flex-1 rounded-[1.3rem] bg-slate-100 px-4 pb-10 shadow-sm before:block before:h-px before:w-full before:content-[''] dark:bg-darkmode-700 md:px-[22px]"},j8e=Ce({__name:"SideMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=V=>{Object.assign(r,V)},u=cs(),h=ee(()=>xB(u.menu("side-menu"),s)),m=O(window.innerWidth),p=xs(),b=ee(()=>p.screenMaskValue),x=ha(),w=O(!1),$=()=>{window.scrollY>100?w.value=!0:w.value=!1};window.addEventListener("scroll",$),St("forceActiveMenu",V=>{L8e(s,V),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await D(),i(h.value),window.addEventListener("resize",()=>{m.value=window.innerWidth})});const D=async()=>{let V=await a.readUserMenu();u.setMenu(V.data);let R=await a.readUserApi();x.setZiggy(R.data)};return(V,R)=>{const E=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:b.value,transparent:!1},{default:f(()=>[c("div",$8e,[l(t(Gs)),l(t(MP)),c("div",A8e,[c("div",E8e,[c("nav",T8e,[c("ul",null,[(L(!0),U(ke,null,Fe(t(r),(P,S)=>(L(),U(ke,null,[P=="divider"?(L(),U("li",{type:"li",class:"my-6 side-nav__divider",key:"divider-"+S})):(L(),U("li",{key:S},[l(t(Qa),{as:"a",content:t(e)(P.title),options:{placement:"right"},disable:m.value>1260,href:P.subMenu?"#":(C=>{try{return t(o).resolve({name:C}).fullPath}catch{return""}})(P.pageName),onClick:C=>{C.preventDefault(),t(SA)(P,t(o)),i([...t(r)])},class:F([P.active?"side-menu side-menu--active":"side-menu"])},{default:f(()=>[c("div",P8e,[l(t(re),{icon:P.icon},null,8,["icon"])]),c("div",D8e,[A(_(t(e)(P.title))+" ",1),P.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":P.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","disable","href","onClick","class"]),l(hn,{onEnter:t(RF),onLeave:t(OF)},{default:f(()=>[P.subMenu&&P.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":P.activeDropdown})},[(L(!0),U(ke,null,Fe(P.subMenu,(C,M)=>(L(),U("li",{key:M},[l(t(Qa),{as:"a",content:t(e)(C.title),options:{placement:"right"},disable:m.value>1260,href:C.subMenu?"#":(g=>{try{return t(o).resolve({name:g}).fullPath}catch{return""}})(C.pageName),class:F([C.active?"side-menu side-menu--active":"side-menu"]),onClick:g=>{g.preventDefault(),t(SA)(C,t(o)),i([...t(r)])}},{default:f(()=>[c("div",R8e,[l(t(re),{icon:C.icon},null,8,["icon"])]),c("div",O8e,[A(_(t(e)(C.title))+" ",1),C.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":C.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","disable","href","class","onClick"]),C.subMenu?(L(),ge(hn,{key:0,onEnter:t(RF),onLeave:t(OF)},{default:f(()=>[C.subMenu&&C.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":C.activeDropdown})},[(L(!0),U(ke,null,Fe(C.subMenu,(g,v)=>(L(),U("li",{key:v},[l(t(Qa),{as:"a",content:t(e)(g.title),options:{placement:"right"},disable:m.value>1260,href:g.subMenu?"#":(T=>{try{return t(o).resolve({name:T}).fullPath}catch{return""}})(g.pageName),class:F([g.active?"side-menu side-menu--active":"side-menu"]),onClick:T=>{T.preventDefault(),t(SA)(g,t(o)),i([...t(r)])}},{default:f(()=>[c("div",V8e,[l(t(re),{icon:g.icon},null,8,["icon"])]),c("div",U8e,_(t(e)(g.title)),1)]),_:2},1032,["content","disable","href","class","onClick"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])):Me("",!0)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])]),c("div",F8e,[l(t(Ks)),l(E,{onUpdateMenu:D}),(L(),U(ke,null,Fe(3,P=>c("br",{key:P})),64)),l(t(Zs),{visible:w.value},null,8,["visible"])])])])])]),_:1},8,["visible"])])}}}),H8e=(n,e)=>{n.forceActiveMenu=e},BE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=BE(s.subMenu,e))}),a},MB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&BE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=BE(o.subMenu,e);const r=[];MB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},IA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},VF=n=>{lr(n,300)},UF=n=>{ir(n,300)},N8e={class:F(["icewall px-5 sm:px-8 py-5 relative","after:content-[''] after:bg-gradient-to-b after:from-theme-1 after:to-theme-2 dark:after:from-darkmode-800 dark:after:to-darkmode-800 after:fixed after:inset-0 after:z-[-2]"])},z8e={class:F(["wrapper relative","before:content-[''] before:z-[-1] before:translate-y-[35px] before:opacity-0 before:w-[95%] before:rounded-[1.3rem] before:bg-white/10 before:h-full before:-mt-4 before:absolute before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/50"])},B8e={class:F(["wrapper-box bg-gradient-to-b from-theme-1 to-theme-2 flex rounded-[1.3rem] -mt-[7px] md:mt-0 dark:from-darkmode-400 dark:to-darkmode-400 translate-y-[35px]","before:block before:absolute before:inset-0 before:bg-black/[0.15] before:rounded-[1.3rem] before:z-[-1]"])},q8e={class:"side-nav side-nav--simple hidden md:block w-[100px] px-5 pt-8 pb-16 overflow-x-hidden"},W8e={class:"side-menu__icon"},G8e={class:"side-menu__title"},Z8e={class:"side-menu__icon"},K8e={class:"side-menu__title"},X8e={class:"side-menu__icon"},Y8e={class:"side-menu__title"},Q8e={class:"md:max-w-auto min-h-screen min-w-0 max-w-full flex-1 rounded-[1.3rem] bg-slate-100 px-4 pb-10 shadow-sm before:block before:h-px before:w-full before:content-[''] dark:bg-darkmode-700 md:px-[22px]"},J8e=Ce({__name:"SimpleMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=D=>{Object.assign(r,D)},u=cs(),h=ee(()=>MB(u.menu("simple-menu"),s)),m=xs(),p=ee(()=>m.screenMaskValue),b=ha(),x=O(!1),w=()=>{window.scrollY>100?x.value=!0:x.value=!1};window.addEventListener("scroll",w),St("forceActiveMenu",D=>{H8e(s,D),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await $(),i(h.value)});const $=async()=>{let D=await a.readUserMenu();u.setMenu(D.data);let V=await a.readUserApi();b.setZiggy(V.data)};return(D,V)=>{const R=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:p.value,transparent:!1},{default:f(()=>[c("div",N8e,[l(t(Gs)),l(t(MP)),c("div",z8e,[c("div",B8e,[c("nav",q8e,[c("ul",null,[(L(!0),U(ke,null,Fe(t(r),(E,P)=>(L(),U(ke,null,[E=="divider"?(L(),U("li",{type:"li",class:"my-6 side-nav__divider",key:"divider-"+P})):(L(),U("li",{key:P},[l(t(Qa),{as:"a",content:t(e)(E.title),options:{placement:"right"},href:E.subMenu?"#":(S=>{try{return t(o).resolve({name:S}).fullPath}catch{return""}})(E.pageName),onClick:S=>{S.preventDefault(),t(IA)(E,t(o)),i([...t(r)])},class:F([E.active?"side-menu side-menu--active":"side-menu"])},{default:f(()=>[c("div",W8e,[l(t(re),{icon:E.icon},null,8,["icon"])]),c("div",G8e,[A(_(t(e)(E.title))+" ",1),E.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":E.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","href","onClick","class"]),l(hn,{onEnter:t(VF),onLeave:t(UF)},{default:f(()=>[E.subMenu&&E.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":E.activeDropdown})},[(L(!0),U(ke,null,Fe(E.subMenu,(S,C)=>(L(),U("li",{key:C},[l(t(Qa),{as:"a",content:t(e)(S.title),options:{placement:"right"},href:S.subMenu?"#":(M=>{try{return t(o).resolve({name:M}).fullPath}catch{return""}})(S.pageName),class:F([S.active?"side-menu side-menu--active":"side-menu"]),onClick:M=>{M.preventDefault(),t(IA)(S,t(o)),i([...t(r)])}},{default:f(()=>[c("div",Z8e,[l(t(re),{icon:S.icon},null,8,["icon"])]),c("div",K8e,[A(_(t(e)(S.title))+" ",1),S.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":S.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","href","class","onClick"]),S.subMenu?(L(),ge(hn,{key:0,onEnter:t(VF),onLeave:t(UF)},{default:f(()=>[S.subMenu&&S.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":S.activeDropdown})},[(L(!0),U(ke,null,Fe(S.subMenu,(M,g)=>(L(),U("li",{key:g},[l(t(Qa),{as:"a",content:t(e)(M.title),options:{placement:"right"},href:M.subMenu?"#":(v=>{try{return t(o).resolve({name:v}).fullPath}catch{return""}})(M.pageName),class:F([M.active?"side-menu side-menu--active":"side-menu"]),onClick:v=>{v.preventDefault(),t(IA)(M,t(o)),i([...t(r)])}},{default:f(()=>[c("div",X8e,[l(t(re),{icon:M.icon},null,8,["icon"])]),c("div",Y8e,_(t(e)(M.title)),1)]),_:2},1032,["content","href","class","onClick"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])):Me("",!0)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])]),c("div",Q8e,[l(t(Ks)),l(R,{onUpdateMenu:$}),(L(),U(ke,null,Fe(3,E=>c("br",{key:E})),64)),l(t(Zs),{visible:x.value},null,8,["visible"])])])])])]),_:1},8,["visible"])])}}}),e6e=(n,e)=>{n.forceActiveMenu=e},qE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=qE(s.subMenu,e))}),a},CB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&qE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=qE(o.subMenu,e);const r=[];CB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},LA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},t6e={class:F(["icewall px-5 sm:px-8 py-5 relative","after:content-[''] after:bg-gradient-to-b after:from-theme-1 after:to-theme-2 dark:after:from-darkmode-800 dark:after:to-darkmode-800 after:fixed after:inset-0 after:z-[-2]"])},a6e={class:"top-nav relative z-50 -mt-2 hidden translate-y-[35px] opacity-0 md:block xl:-mt-[3px] xl:px-6 xl:pt-[12px]"},n6e={class:"h-[50px] flex flex-wrap"},s6e=["href","onClick"],o6e={class:"top-menu__icon"},r6e={class:"top-menu__title"},i6e=["href","onClick"],l6e={class:"top-menu__icon"},c6e={class:"top-menu__title"},d6e=["href","onClick"],u6e={class:"top-menu__icon"},p6e={class:"top-menu__title"},h6e={class:F(["wrapper relative","before:content-[''] before:z-[-1] before:translate-y-[35px] before:opacity-0 before:w-[95%] before:rounded-[1.3rem] before:bg-transparent xl:before:bg-white/10 before:h-full before:-mt-4 before:absolute before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/50"])},f6e={class:F(["wrapper-box bg-transparent xl:bg-theme-1 flex rounded-[1.3rem] md:pt-[80px] -mt-[7px] md:-mt-[67px] xl:-mt-[62px] dark:bg-transparent xl:dark:bg-darkmode-400 translate-y-[35px]","before:hidden xl:before:block before:absolute before:inset-0 before:bg-black/[0.15] before:rounded-[1.3rem] before:z-[-1]"])},m6e={class:"md:max-w-auto min-h-screen min-w-0 max-w-full flex-1 rounded-[1.3rem] bg-slate-100 px-4 pb-10 shadow-sm before:block before:h-px before:w-full before:content-[''] dark:bg-darkmode-700 md:px-[22px]"},v6e=Ce({__name:"TopMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=D=>{Object.assign(r,D)},u=cs(),h=ee(()=>CB(u.menu("top-menu"),s)),m=xs(),p=ee(()=>m.screenMaskValue),b=ha(),x=O(!1),w=()=>{window.scrollY>100?x.value=!0:x.value=!1};window.addEventListener("scroll",w),St("forceActiveMenu",D=>{e6e(s,D),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await $(),i(h.value)});const $=async()=>{let D=await a.readUserMenu();u.setMenu(D.data);let V=await a.readUserApi();b.setZiggy(V.data)};return(D,V)=>{const R=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:p.value,transparent:!1},{default:f(()=>[c("div",t6e,[l(t(Gs)),l(t(MP)),c("nav",a6e,[c("ul",n6e,[(L(!0),U(ke,null,Fe(t(r),(E,P)=>(L(),U("li",{key:P},[E!="divider"?(L(),U(ke,{key:0},[c("a",{href:E.subMenu?"#":(S=>{try{return t(o).resolve({name:S}).fullPath}catch{return""}})(E.pageName),class:F([E.active?"top-menu top-menu--active":"top-menu"]),onClick:S=>{S.preventDefault(),t(LA)(E,t(o))}},[c("div",o6e,[l(t(re),{icon:E.icon},null,8,["icon"])]),c("div",r6e,[A(_(t(e)(E.title))+" ",1),E.subMenu?(L(),ge(t(re),{key:0,class:"top-menu__sub-icon",icon:"ChevronDown"})):Me("",!0)])],10,s6e),E.subMenu?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":E.activeDropdown})},[(L(!0),U(ke,null,Fe(E.subMenu,(S,C)=>(L(),U("li",{key:C},[c("a",{href:S.subMenu?"#":(M=>{try{return t(o).resolve({name:M}).fullPath}catch{return""}})(S.pageName),class:"top-menu",onClick:M=>{M.preventDefault(),t(LA)(S,t(o))}},[c("div",l6e,[l(t(re),{icon:S.icon},null,8,["icon"])]),c("div",c6e,[A(_(t(e)(S.title))+" ",1),S.subMenu?(L(),ge(t(re),{key:0,class:"top-menu__sub-icon",icon:"ChevronDown"})):Me("",!0)])],8,i6e),S.subMenu?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":S.activeDropdown})},[(L(!0),U(ke,null,Fe(S.subMenu,(M,g)=>(L(),U("li",{key:g},[c("a",{href:M.subMenu?"#":(v=>{try{return t(o).resolve({name:v}).fullPath}catch{return""}})(M.pageName),class:"top-menu",onClick:v=>{v.preventDefault(),t(LA)(M,t(o))}},[c("div",u6e,[l(t(re),{icon:M.icon},null,8,["icon"])]),c("div",p6e,_(t(e)(M.title)),1)],8,d6e)]))),128))],2)):Me("",!0)]))),128))],2)):Me("",!0)],64)):Me("",!0)]))),128))])]),c("div",h6e,[c("div",f6e,[c("div",m6e,[l(t(Ks)),l(R,{onUpdateMenu:$}),(L(),U(ke,null,Fe(3,E=>c("br",{key:E})),64)),l(t(Zs),{visible:x.value},null,8,["visible"])])])])])]),_:1},8,["visible"])])}}}),y6e={class:"relative z-[51] flex h-[67px] items-center border-b border-slate-200"},_6e=Ce({__name:"TopBar",setup(n){return(e,a)=>(L(),U("div",y6e,[l(Uc,{theme:"tinker"}),l(iP,{theme:"tinker"}),l(jc,{theme:"tinker"}),l(Hc,{theme:"tinker"}),l(zc,{theme:"tinker"})]))}}),g6e=(n,e)=>{n.forceActiveMenu=e},WE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=WE(s.subMenu,e))}),a},SB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&WE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=WE(o.subMenu,e);const r=[];SB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},$A=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},FF=n=>{lr(n,300)},jF=n=>{ir(n,300)},k6e={class:F(["tinker md:bg-black/[0.15] dark:bg-transparent relative py-5 px-5 md:py-0 sm:px-8 md:px-0","after:content-[''] after:bg-gradient-to-b after:from-theme-1 after:to-theme-2 dark:after:from-darkmode-800 dark:after:to-darkmode-800 after:fixed after:inset-0 after:z-[-2]"])},b6e={class:"flex mt-[4.7rem] md:mt-0 overflow-hidden"},w6e={class:"side-nav hidden md:block md:w-[100px] xl:w-[250px] px-5 pb-16 overflow-x-hidden z-10"},x6e=["src"],M6e={class:"hidden ml-3 text-lg text-white xl:block"},C6e=c("div",{class:"my-6 side-nav__divider"},null,-1),S6e={class:"side-menu__icon"},I6e={class:"side-menu__title"},L6e={class:"side-menu__icon"},$6e={class:"side-menu__title"},A6e={class:"side-menu__icon"},E6e={class:"side-menu__title"},T6e={class:F(["rounded-[30px] md:rounded-[35px/50px_0px_0px_0px] min-w-0 min-h-screen max-w-full md:max-w-none bg-slate-100 flex-1 pb-10 px-4 md:px-6 relative md:ml-4 dark:bg-darkmode-700","before:content-[''] before:w-full before:h-px before:block","after:content-[''] after:z-[-1] after:rounded-[40px_0px_0px_0px] after:w-full after:inset-y-0 after:absolute after:left-0 after:bg-white/10 after:mt-8 after:-ml-4 after:dark:bg-darkmode-400/50 after:hidden md:after:block"])},P6e=Ce({__name:"SideMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=R=>{Object.assign(r,R)},u=cs(),h=ee(()=>SB(u.menu("side-menu"),s)),m=O(window.innerWidth),p=xs(),b=ee(()=>p.screenMaskValue),x=ha(),w=O(!1),$=()=>{window.scrollY>100?w.value=!0:w.value=!1};window.addEventListener("scroll",$),St("forceActiveMenu",R=>{g6e(s,R),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await V(),i(h.value),window.addEventListener("resize",()=>{m.value=window.innerWidth})});const D="DCSLab",V=async()=>{let R=await a.readUserMenu();u.setMenu(R.data);let E=await a.readUserApi();x.setZiggy(E.data)};return(R,E)=>{const P=Qt("RouterLink"),S=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:b.value,transparent:!1},{default:f(()=>[c("div",k6e,[l(t(Gs)),c("div",b6e,[c("nav",w6e,[l(P,{to:{name:"side-menu-dashboard-maindashboard"},class:"flex items-center pt-4 pl-5 mt-3 intro-x"},{default:f(()=>[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,x6e),c("span",M6e,_(t(D)),1)]),_:1}),C6e,c("ul",null,[(L(!0),U(ke,null,Fe(t(r),(C,M)=>(L(),U(ke,null,[C=="divider"?(L(),U("li",{type:"li",class:"my-6 side-nav__divider",key:"divider-"+M})):(L(),U("li",{key:M},[l(t(Qa),{as:"a",content:t(e)(C.title),options:{placement:"right"},disable:m.value>1260,href:C.subMenu?"#":(g=>{try{return t(o).resolve({name:g}).fullPath}catch{return""}})(C.pageName),onClick:g=>{g.preventDefault(),t($A)(C,t(o)),i([...t(r)])},class:F([C.active?"side-menu side-menu--active":"side-menu"])},{default:f(()=>[c("div",S6e,[l(t(re),{icon:C.icon},null,8,["icon"])]),c("div",I6e,[A(_(t(e)(C.title))+" ",1),C.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":C.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","disable","href","onClick","class"]),l(hn,{onEnter:t(FF),onLeave:t(jF)},{default:f(()=>[C.subMenu&&C.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":C.activeDropdown})},[(L(!0),U(ke,null,Fe(C.subMenu,(g,v)=>(L(),U("li",{key:v},[l(t(Qa),{as:"a",content:t(e)(g.title),options:{placement:"right"},disable:m.value>1260,href:g.subMenu?"#":(T=>{try{return t(o).resolve({name:T}).fullPath}catch{return""}})(g.pageName),class:F([g.active?"side-menu side-menu--active":"side-menu"]),onClick:T=>{T.preventDefault(),t($A)(g,t(o)),i([...t(r)])}},{default:f(()=>[c("div",L6e,[l(t(re),{icon:g.icon},null,8,["icon"])]),c("div",$6e,[A(_(t(e)(g.title))+" ",1),g.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":g.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","disable","href","class","onClick"]),g.subMenu?(L(),ge(hn,{key:0,onEnter:t(FF),onLeave:t(jF)},{default:f(()=>[g.subMenu&&g.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":g.activeDropdown})},[(L(!0),U(ke,null,Fe(g.subMenu,(T,j)=>(L(),U("li",{key:j},[l(t(Qa),{as:"a",content:t(e)(T.title),options:{placement:"right"},disable:m.value>1260,href:T.subMenu?"#":(B=>{try{return t(o).resolve({name:B}).fullPath}catch{return""}})(T.pageName),class:F([T.active?"side-menu side-menu--active":"side-menu"]),onClick:B=>{B.preventDefault(),t($A)(T,t(o)),i([...t(r)])}},{default:f(()=>[c("div",A6e,[l(t(re),{icon:T.icon},null,8,["icon"])]),c("div",E6e,_(t(e)(T.title)),1)]),_:2},1032,["content","disable","href","class","onClick"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])):Me("",!0)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])]),c("div",T6e,[l(t(_6e)),l(t(Ks)),l(S,{onUpdateMenu:V}),(L(),U(ke,null,Fe(3,C=>c("br",{key:C})),64)),l(t(Zs),{visible:w.value},null,8,["visible"])])])])]),_:1},8,["visible"])])}}}),D6e=(n,e)=>{n.forceActiveMenu=e},GE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=GE(s.subMenu,e))}),a},IB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&GE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=GE(o.subMenu,e);const r=[];IB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},AA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},HF=n=>{lr(n,300)},NF=n=>{ir(n,300)},R6e={class:F(["tinker md:bg-black/[0.15] dark:bg-transparent relative py-5 px-5 md:py-0 sm:px-8 md:px-0","after:content-[''] after:bg-gradient-to-b after:from-theme-1 after:to-theme-2 dark:after:from-darkmode-800 dark:after:to-darkmode-800 after:fixed after:inset-0 after:z-[-2]"])},O6e={class:"flex mt-[4.7rem] md:mt-0 overflow-hidden"},V6e={class:"side-nav side-nav--simple hidden md:block md:w-[100px] xl:w-[100px] px-5 pb-16 overflow-x-hidden z-10"},U6e=["src"],F6e=c("div",{class:"my-6 side-nav__divider"},null,-1),j6e={class:"side-menu__icon"},H6e={class:"side-menu__title"},N6e={class:"side-menu__icon"},z6e={class:"side-menu__title"},B6e={class:"side-menu__icon"},q6e={class:"side-menu__title"},W6e={class:F(["rounded-[30px] md:rounded-[35px/50px_0px_0px_0px] min-w-0 min-h-screen max-w-full md:max-w-none bg-slate-100 flex-1 pb-10 px-4 md:px-6 relative md:ml-4 dark:bg-darkmode-700","before:content-[''] before:w-full before:h-px before:block","after:content-[''] after:z-[-1] after:rounded-[40px_0px_0px_0px] after:w-full after:inset-y-0 after:absolute after:left-0 after:bg-white/10 after:mt-8 after:-ml-4 after:dark:bg-darkmode-400/50 after:hidden md:after:block"])},G6e=Ce({__name:"SimpleMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=D=>{Object.assign(r,D)},u=cs(),h=ee(()=>IB(u.menu("simple-menu"),s)),m=xs(),p=ee(()=>m.screenMaskValue),b=ha(),x=O(!1),w=()=>{window.scrollY>100?x.value=!0:x.value=!1};window.addEventListener("scroll",w),St("forceActiveMenu",D=>{D6e(s,D),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await $(),i(h.value)});const $=async()=>{let D=await a.readUserMenu();u.setMenu(D.data);let V=await a.readUserApi();b.setZiggy(V.data)};return(D,V)=>{const R=Qt("RouterLink"),E=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:p.value,transparent:!1},{default:f(()=>[c("div",R6e,[l(t(Gs)),c("div",O6e,[c("nav",V6e,[l(R,{to:{name:"side-menu-dashboard-maindashboard"},class:"flex items-center pt-4 pl-5 mt-3 intro-x"},{default:f(()=>[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,U6e)]),_:1}),F6e,c("ul",null,[(L(!0),U(ke,null,Fe(t(r),(P,S)=>(L(),U(ke,null,[P=="divider"?(L(),U("li",{type:"li",class:"my-6 side-nav__divider",key:"divider-"+S})):(L(),U("li",{key:S},[l(t(Qa),{as:"a",content:t(e)(P.title),options:{placement:"right"},href:P.subMenu?"#":(C=>{try{return t(o).resolve({name:C}).fullPath}catch{return""}})(P.pageName),onClick:C=>{C.preventDefault(),t(AA)(P,t(o)),i([...t(r)])},class:F([P.active?"side-menu side-menu--active":"side-menu"])},{default:f(()=>[c("div",j6e,[l(t(re),{icon:P.icon},null,8,["icon"])]),c("div",H6e,[A(_(t(e)(P.title))+" ",1),P.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":P.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","href","onClick","class"]),l(hn,{onEnter:t(HF),onLeave:t(NF)},{default:f(()=>[P.subMenu&&P.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":P.activeDropdown})},[(L(!0),U(ke,null,Fe(P.subMenu,(C,M)=>(L(),U("li",{key:M},[l(t(Qa),{as:"a",content:t(e)(C.title),options:{placement:"right"},href:C.subMenu?"#":(g=>{try{return t(o).resolve({name:g}).fullPath}catch{return""}})(C.pageName),class:F([C.active?"side-menu side-menu--active":"side-menu"]),onClick:g=>{g.preventDefault(),t(AA)(C,t(o)),i([...t(r)])}},{default:f(()=>[c("div",N6e,[l(t(re),{icon:C.icon},null,8,["icon"])]),c("div",z6e,[A(_(t(e)(C.title))+" ",1),C.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":C.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","href","class","onClick"]),C.subMenu?(L(),ge(hn,{key:0,onEnter:t(HF),onLeave:t(NF)},{default:f(()=>[C.subMenu&&C.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":C.activeDropdown})},[(L(!0),U(ke,null,Fe(C.subMenu,(g,v)=>(L(),U("li",{key:v},[l(t(Qa),{as:"a",content:t(e)(g.title),options:{placement:"right"},href:g.subMenu?"#":(T=>{try{return t(o).resolve({name:T}).fullPath}catch{return""}})(g.pageName),class:F([g.active?"side-menu side-menu--active":"side-menu"]),onClick:T=>{T.preventDefault(),t(AA)(g,t(o)),i([...t(r)])}},{default:f(()=>[c("div",B6e,[l(t(re),{icon:g.icon},null,8,["icon"])]),c("div",q6e,_(t(e)(g.title)),1)]),_:2},1032,["content","href","class","onClick"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])):Me("",!0)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])]),c("div",W6e,[l(t(wP)),l(t(Ks)),l(E,{onUpdateMenu:$}),(L(),U(ke,null,Fe(3,P=>c("br",{key:P})),64)),l(t(Zs),{visible:x.value},null,8,["visible"])])])])]),_:1},8,["visible"])])}}}),Z6e=(n,e)=>{n.forceActiveMenu=e},ZE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=ZE(s.subMenu,e))}),a},LB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&ZE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=ZE(o.subMenu,e);const r=[];LB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},EA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},K6e={class:F(["tinker md:bg-black/[0.15] dark:bg-transparent relative py-5 px-5 md:py-0 sm:px-8 md:px-0","after:content-[''] after:bg-gradient-to-b after:from-theme-1 after:to-theme-2 dark:after:from-darkmode-800 dark:after:to-darkmode-800 after:fixed after:inset-0 after:z-[-2]"])},X6e={class:"h-[70px] z-[51] relative border-b border-white/[0.08] mt-12 md:mt-0 -mx-3 sm:-mx-8 md:mx-0 px-4 sm:px-8 md:px-6 mb-10 md:mb-8"},Y6e={class:"flex items-center h-full"},Q6e={class:"top-nav relative z-50 -mt-[3px] hidden translate-y-[50px] opacity-0 md:block"},J6e={class:"flex flex-wrap h-[58px] px-6 xl:px-[50px]"},eMe=["href","onClick"],tMe={class:"top-menu__icon"},aMe={class:"top-menu__title"},nMe=["href","onClick"],sMe={class:"top-menu__icon"},oMe={class:"top-menu__title"},rMe=["href","onClick"],iMe={class:"top-menu__icon"},lMe={class:"top-menu__title"},cMe={class:F(["rounded-[30px] md:rounded-[35px_35px_0px_0px] min-w-0 min-h-screen max-w-full md:max-w-none bg-slate-100 flex-1 pb-10 px-4 md:px-6 relative mt-8 dark:bg-darkmode-700","before:content-[''] before:w-full before:h-px before:block","after:content-[''] after:z-[-1] after:rounded-[40px_40px_0px_0px] after:w-[97%] after:inset-y-0 after:absolute after:left-0 after:right-0 after:bg-white/10 after:-mt-4 after:mx-auto after:dark:bg-darkmode-400/50"])},dMe=Ce({__name:"TopMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=D=>{Object.assign(r,D)},u=cs(),h=ee(()=>LB(u.menu("top-menu"),s)),m=xs(),p=ee(()=>m.screenMaskValue),b=ha(),x=O(!1),w=()=>{window.scrollY>100?x.value=!0:x.value=!1};window.addEventListener("scroll",w),St("forceActiveMenu",D=>{Z6e(s,D),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await $(),i(h.value)});const $=async()=>{let D=await a.readUserMenu();u.setMenu(D.data);let V=await a.readUserApi();b.setZiggy(V.data)};return(D,V)=>{const R=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:p.value,transparent:!1},{default:f(()=>[c("div",K6e,[l(t(Gs)),c("div",X6e,[c("div",Y6e,[l(_9,{theme:"tinker",layout:"top-menu"}),l(Uc,{theme:"tinker",layout:"top-menu"}),l(iP),l(jc,{theme:"tinker",layout:"top-menu"}),l(Hc,{theme:"tinker",layout:"top-menu"}),l(zc,{theme:"tinker",layout:"top-menu"})])]),c("nav",Q6e,[c("ul",J6e,[(L(!0),U(ke,null,Fe(t(r),(E,P)=>(L(),U("li",{key:P},[E!="divider"?(L(),U(ke,{key:0},[c("a",{href:E.subMenu?"#":(S=>{try{return t(o).resolve({name:S}).fullPath}catch{return""}})(E.pageName),class:F([E.active?"top-menu top-menu--active":"top-menu"]),onClick:S=>{S.preventDefault(),t(EA)(E,t(o))}},[c("div",tMe,[l(t(re),{icon:E.icon},null,8,["icon"])]),c("div",aMe,[A(_(t(e)(E.title))+" ",1),E.subMenu?(L(),ge(t(re),{key:0,class:"top-menu__sub-icon",icon:"ChevronDown"})):Me("",!0)])],10,eMe),E.subMenu?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":E.activeDropdown})},[(L(!0),U(ke,null,Fe(E.subMenu,(S,C)=>(L(),U("li",{key:C},[c("a",{href:S.subMenu?"#":(M=>{try{return t(o).resolve({name:M}).fullPath}catch{return""}})(S.pageName),class:"top-menu",onClick:M=>{M.preventDefault(),t(EA)(S,t(o))}},[c("div",sMe,[l(t(re),{icon:S.icon},null,8,["icon"])]),c("div",oMe,[A(_(t(e)(S.title))+" ",1),S.subMenu?(L(),ge(t(re),{key:0,class:"top-menu__sub-icon",icon:"ChevronDown"})):Me("",!0)])],8,nMe),S.subMenu?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":S.activeDropdown})},[(L(!0),U(ke,null,Fe(S.subMenu,(M,g)=>(L(),U("li",{key:g},[c("a",{href:M.subMenu?"#":(v=>{try{return t(o).resolve({name:v}).fullPath}catch{return""}})(M.pageName),class:"top-menu",onClick:v=>{v.preventDefault(),t(EA)(M,t(o))}},[c("div",iMe,[l(t(re),{icon:M.icon},null,8,["icon"])]),c("div",lMe,_(t(e)(M.title)),1)],8,rMe)]))),128))],2)):Me("",!0)]))),128))],2)):Me("",!0)],64)):Me("",!0)]))),128))])]),c("div",cMe,[l(t(Ks)),l(R,{onUpdateMenu:$}),(L(),U(ke,null,Fe(3,E=>c("br",{key:E})),64)),l(t(Zs),{visible:x.value},null,8,["visible"])])])]),_:1},8,["visible"])])}}}),uMe={class:"flex items-center h-full"},CP=Ce({__name:"TopBar",props:{layout:{}},setup(n){const e=n;return(a,s)=>(L(),U("div",{class:F(["h-[70px] md:h-[65px] z-[51] border-b border-white/[0.08] mt-12 md:mt-0 -mx-3 sm:-mx-8 md:-mx-0 px-3 md:border-b-0 relative md:fixed md:inset-x-0 md:top-0 sm:px-8 md:px-10 md:pt-10 md:bg-gradient-to-b md:from-slate-100 md:to-transparent dark:md:from-darkmode-700",e.layout=="top-menu"&&"dark:md:from-darkmode-800","before:content-[''] before:absolute before:h-[65px] before:inset-0 before:top-0 before:mx-7 before:bg-primary/30 before:mt-3 before:rounded-xl before:hidden before:md:block before:dark:bg-darkmode-600/30","after:content-[''] after:absolute after:inset-0 after:h-[65px] after:mx-3 after:bg-primary after:mt-5 after:rounded-xl after:shadow-md after:hidden after:md:block after:dark:bg-darkmode-600"])},[c("div",uMe,[l(_9,{theme:"enigma",layout:e.layout},null,8,["layout"]),l(Uc,{theme:"enigma",layout:e.layout},null,8,["layout"]),l(jc,{theme:"enigma",layout:e.layout},null,8,["layout"]),l(Hc,{theme:"enigma",layout:e.layout},null,8,["layout"]),l(zc,{theme:"enigma",layout:e.layout},null,8,["layout"])])],2))}}),pMe=(n,e)=>{n.forceActiveMenu=e},KE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=KE(s.subMenu,e))}),a},$B=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&KE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=KE(o.subMenu,e);const r=[];$B(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},TA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},zF=n=>{lr(n,300)},BF=n=>{ir(n,300)},hMe={class:F(["enigma py-5 px-5 md:py-0 sm:px-8 md:px-0","before:content-[''] before:bg-gradient-to-b before:from-theme-1 before:to-theme-2 dark:before:from-darkmode-800 dark:before:to-darkmode-800 md:before:bg-none md:bg-slate-200 md:dark:bg-darkmode-800 before:fixed before:inset-0 before:z-[-1]"])},fMe={class:"flex overflow-hidden"},mMe={class:"side-nav w-[100px] xl:w-[260px] px-5 pb-16 overflow-x-hidden z-50 pt-32 -mt-4 hidden md:block"},vMe={class:"side-menu__icon"},yMe={class:"side-menu__title"},_Me={class:"side-menu__icon"},gMe={class:"side-menu__title"},kMe={class:"side-menu__icon"},bMe={class:"side-menu__title"},wMe={class:F(["max-w-full md:max-w-none rounded-[30px] md:rounded-none px-4 md:px-[22px] min-w-0 min-h-screen bg-slate-100 flex-1 md:pt-20 pb-10 mt-5 md:mt-1 relative dark:bg-darkmode-700","before:content-[''] before:w-full before:h-px before:block"])},xMe=Ce({__name:"SideMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=V=>{Object.assign(r,V)},u=cs(),h=ee(()=>$B(u.menu("side-menu"),s)),m=O(window.innerWidth),p=xs(),b=ee(()=>p.screenMaskValue),x=ha(),w=O(!1),$=()=>{window.scrollY>100?w.value=!0:w.value=!1};window.addEventListener("scroll",$),St("forceActiveMenu",V=>{pMe(s,V),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await D(),i(h.value),window.addEventListener("resize",()=>{m.value=window.innerWidth})});const D=async()=>{let V=await a.readUserMenu();u.setMenu(V.data);let R=await a.readUserApi();x.setZiggy(R.data)};return(V,R)=>{const E=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:b.value,transparent:!1},{default:f(()=>[c("div",hMe,[l(t(Gs)),l(t(CP),{layout:"side-menu"}),c("div",fMe,[c("nav",mMe,[c("ul",null,[(L(!0),U(ke,null,Fe(t(r),(P,S)=>(L(),U(ke,null,[P=="divider"?(L(),U("li",{type:"li",class:"my-6 side-nav__divider",key:"divider-"+S})):(L(),U("li",{key:S},[l(t(Qa),{as:"a",content:t(e)(P.title),options:{placement:"right"},disable:m.value>1260,href:P.subMenu?"#":(C=>{try{return t(o).resolve({name:C}).fullPath}catch{return""}})(P.pageName),onClick:C=>{C.preventDefault(),t(TA)(P,t(o)),i([...t(r)])},class:F([P.active?"side-menu side-menu--active":"side-menu"])},{default:f(()=>[c("div",vMe,[l(t(re),{icon:P.icon},null,8,["icon"])]),c("div",yMe,[A(_(t(e)(P.title))+" ",1),P.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":P.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","disable","href","onClick","class"]),l(hn,{onEnter:t(zF),onLeave:t(BF)},{default:f(()=>[P.subMenu&&P.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":P.activeDropdown})},[(L(!0),U(ke,null,Fe(P.subMenu,(C,M)=>(L(),U("li",{key:M},[l(t(Qa),{as:"a",content:t(e)(C.title),options:{placement:"right"},disable:m.value>1260,href:C.subMenu?"#":(g=>{try{return t(o).resolve({name:g}).fullPath}catch{return""}})(C.pageName),class:F([C.active?"side-menu side-menu--active":"side-menu"]),onClick:g=>{g.preventDefault(),t(TA)(C,t(o)),i([...t(r)])}},{default:f(()=>[c("div",_Me,[l(t(re),{icon:C.icon},null,8,["icon"])]),c("div",gMe,[A(_(t(e)(C.title))+" ",1),C.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":C.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","disable","href","class","onClick"]),C.subMenu?(L(),ge(hn,{key:0,onEnter:t(zF),onLeave:t(BF)},{default:f(()=>[C.subMenu&&C.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":C.activeDropdown})},[(L(!0),U(ke,null,Fe(C.subMenu,(g,v)=>(L(),U("li",{key:v},[l(t(Qa),{as:"a",content:t(e)(g.title),options:{placement:"right"},disable:m.value>1260,href:g.subMenu?"#":(T=>{try{return t(o).resolve({name:T}).fullPath}catch{return""}})(g.pageName),class:F([g.active?"side-menu side-menu--active":"side-menu"]),onClick:T=>{T.preventDefault(),t(TA)(g,t(o)),i([...t(r)])}},{default:f(()=>[c("div",kMe,[l(t(re),{icon:g.icon},null,8,["icon"])]),c("div",bMe,_(t(e)(g.title)),1)]),_:2},1032,["content","disable","href","class","onClick"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])):Me("",!0)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])]),c("div",wMe,[l(t(Ks)),l(E,{onUpdateMenu:D}),(L(),U(ke,null,Fe(3,P=>c("br",{key:P})),64)),l(t(Zs),{visible:w.value},null,8,["visible"])])])])]),_:1},8,["visible"])])}}}),MMe=(n,e)=>{n.forceActiveMenu=e},XE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=XE(s.subMenu,e))}),a},AB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&XE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=XE(o.subMenu,e);const r=[];AB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},PA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},qF=n=>{lr(n,300)},WF=n=>{ir(n,300)},CMe={class:F(["enigma py-5 px-5 md:py-0 sm:px-8 md:px-0","before:content-[''] before:bg-gradient-to-b before:from-theme-1 before:to-theme-2 dark:before:from-darkmode-800 dark:before:to-darkmode-800 md:before:bg-none md:bg-slate-200 md:dark:bg-darkmode-800 before:fixed before:inset-0 before:z-[-1]"])},SMe={class:"flex overflow-hidden"},IMe={class:"side-nav side-nav--simple w-[100px] px-5 pb-16 overflow-x-hidden z-50 pt-32 -mt-4 hidden md:block"},LMe={class:"side-menu__icon"},$Me={class:"side-menu__title"},AMe={class:"side-menu__icon"},EMe={class:"side-menu__title"},TMe={class:"side-menu__icon"},PMe={class:"side-menu__title"},DMe={class:F(["max-w-full md:max-w-none rounded-[30px] md:rounded-none px-4 md:px-[22px] min-w-0 min-h-screen bg-slate-100 flex-1 md:pt-20 pb-10 mt-5 md:mt-1 relative dark:bg-darkmode-700","before:content-[''] before:w-full before:h-px before:block"])},RMe=Ce({__name:"SimpleMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=D=>{Object.assign(r,D)},u=cs(),h=ee(()=>AB(u.menu("simple-menu"),s)),m=xs(),p=ee(()=>m.screenMaskValue),b=ha(),x=O(!1),w=()=>{window.scrollY>100?x.value=!0:x.value=!1};window.addEventListener("scroll",w),St("forceActiveMenu",D=>{MMe(s,D),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await $(),i(h.value)});const $=async()=>{let D=await a.readUserMenu();u.setMenu(D.data);let V=await a.readUserApi();b.setZiggy(V.data)};return(D,V)=>{const R=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:p.value,transparent:!1},{default:f(()=>[c("div",CMe,[l(t(Gs)),l(t(CP),{layout:"simple-menu"}),c("div",SMe,[c("nav",IMe,[c("ul",null,[(L(!0),U(ke,null,Fe(t(r),(E,P)=>(L(),U(ke,null,[E=="divider"?(L(),U("li",{type:"li",class:F(["side-nav__divider my-6",`opacity-0 animate-[0.4s_ease-in-out_0.1s_intro-divider] animate-fill-mode-forwards animate-delay-${(P+1)*10}`]),key:"divider-"+P},null,2)):(L(),U("li",{key:P},[l(t(Qa),{as:"a",content:t(e)(E.title),options:{placement:"right"},href:E.subMenu?"#":(S=>{try{return t(o).resolve({name:S}).fullPath}catch{return""}})(E.pageName),onClick:S=>{S.preventDefault(),t(PA)(E,t(o)),i([...t(r)])},class:F([E.active?"side-menu side-menu--active":"side-menu",{[`opacity-0 translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-${(P+1)*10}`]:!E.active}])},{default:f(()=>[c("div",LMe,[l(t(re),{icon:E.icon},null,8,["icon"])]),c("div",$Me,[A(_(t(e)(E.title))+" ",1),E.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":E.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","href","onClick","class"]),l(hn,{onEnter:t(qF),onLeave:t(WF)},{default:f(()=>[E.subMenu&&E.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":E.activeDropdown})},[(L(!0),U(ke,null,Fe(E.subMenu,(S,C)=>(L(),U("li",{key:C},[l(t(Qa),{as:"a",content:t(e)(S.title),options:{placement:"right"},href:S.subMenu?"#":(M=>{try{return t(o).resolve({name:M}).fullPath}catch{return""}})(S.pageName),class:F([S.active?"side-menu side-menu--active":"side-menu",{[`opacity-0 translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-${(C+1)*10}`]:!S.active}]),onClick:M=>{M.preventDefault(),t(PA)(S,t(o)),i([...t(r)])}},{default:f(()=>[c("div",AMe,[l(t(re),{icon:S.icon},null,8,["icon"])]),c("div",EMe,[A(_(t(e)(S.title))+" ",1),S.subMenu?(L(),U("div",{key:0,class:F(["side-menu__sub-icon",{"transform rotate-180":S.activeDropdown}])},[l(t(re),{icon:"ChevronDown"})],2)):Me("",!0)])]),_:2},1032,["content","href","class","onClick"]),S.subMenu?(L(),ge(hn,{key:0,onEnter:t(qF),onLeave:t(WF)},{default:f(()=>[S.subMenu&&S.activeDropdown?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":S.activeDropdown})},[(L(!0),U(ke,null,Fe(S.subMenu,(M,g)=>(L(),U("li",{key:g},[l(t(Qa),{as:"a",content:t(e)(M.title),options:{placement:"right"},href:M.subMenu?"#":(v=>{try{return t(o).resolve({name:v}).fullPath}catch{return""}})(M.pageName),class:F([M.active?"side-menu side-menu--active":"side-menu",{[`opacity-0 translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-${(g+1)*10}`]:!M.active}]),onClick:v=>{v.preventDefault(),t(PA)(M,t(o)),i([...t(r)])}},{default:f(()=>[c("div",TMe,[l(t(re),{icon:M.icon},null,8,["icon"])]),c("div",PMe,_(t(e)(M.title)),1)]),_:2},1032,["content","href","class","onClick"])]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])):Me("",!0)]))),128))],2)):Me("",!0)]),_:2},1032,["onEnter","onLeave"])]))],64))),256))])]),c("div",DMe,[l(t(Ks)),l(R,{onUpdateMenu:$}),(L(),U(ke,null,Fe(3,E=>c("br",{key:E})),64)),l(t(Zs),{visible:x.value},null,8,["visible"])])])])]),_:1},8,["visible"])])}}}),OMe=(n,e)=>{n.forceActiveMenu=e},YE=(n,e)=>{let a=!1;return n.forEach(s=>{(e.forceActiveMenu!==void 0&&s.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&s.pageName===e.name)&&!s.ignore?a=!0:!a&&s.subMenu&&(a=YE(s.subMenu,e))}),a},EB=(n,e)=>{const a=[];return n.forEach(s=>{if(typeof s!="string"){const o={icon:s.icon,title:s.title,pageName:s.pageName,subMenu:s.subMenu,ignore:s.ignore};if(o.active=(e.forceActiveMenu!==void 0&&o.pageName===e.forceActiveMenu||e.forceActiveMenu===void 0&&o.pageName===e.name||o.subMenu&&YE(o.subMenu,e))&&!o.ignore,o.subMenu){o.activeDropdown=YE(o.subMenu,e);const r=[];EB(o.subMenu,e).map(i=>typeof i!="string"&&r.push(i)),o.subMenu=r}a.push(o)}else a.push(s)}),a},DA=(n,e)=>{n.subMenu?n.activeDropdown=!n.activeDropdown:n.pageName!==void 0&&e.push({name:n.pageName})},VMe={class:F(["enigma py-5 px-5 md:py-0 sm:px-8 md:px-0","before:content-[''] before:bg-gradient-to-b before:from-theme-1 before:to-theme-2 dark:before:from-darkmode-800 dark:before:to-darkmode-800 md:before:bg-none md:bg-slate-200 md:dark:bg-darkmode-800 before:fixed before:inset-0 before:z-[-1]"])},UMe={class:F(["top-nav relative z-50 hidden pt-32 -mt-4 md:block","opacity-0 animate-[0.4s_ease-in-out_0.2s_intro-top-menu] animate-fill-mode-forwards"])},FMe={class:"flex flex-wrap px-6 xl:px-[50px]"},jMe=["href","onClick"],HMe={class:"top-menu__icon"},NMe={class:"top-menu__title"},zMe=["href","onClick"],BMe={class:"top-menu__icon"},qMe={class:"top-menu__title"},WMe=["href","onClick"],GMe={class:"top-menu__icon"},ZMe={class:"top-menu__title"},KMe={class:F(["max-w-full md:max-w-none rounded-[30px] md:rounded-[35px_35px_0_0] px-4 md:px-[22px] min-w-0 min-h-screen bg-slate-100 flex-1 pb-10 mt-5 relative dark:bg-darkmode-700","before:content-[''] before:w-full before:h-px before:block"])},XMe=Ce({__name:"TopMenu",setup(n){const{t:e}=tt(),a=new aa,s=Sa(),o=ct();let r=gn([]);const i=D=>{Object.assign(r,D)},u=cs(),h=ee(()=>EB(u.menu("top-menu"),s)),m=xs(),p=ee(()=>m.screenMaskValue),b=ha(),x=O(!1),w=()=>{window.scrollY>100?x.value=!0:x.value=!1};window.addEventListener("scroll",w),St("forceActiveMenu",D=>{OMe(s,D),i(h.value)}),dt(h,()=>{i(h.value)}),dt(ee(()=>s.path),()=>{delete s.forceActiveMenu}),at(async()=>{await $(),i(h.value)});const $=async()=>{let D=await a.readUserMenu();u.setMenu(D.data);let V=await a.readUserApi();b.setZiggy(V.data)};return(D,V)=>{const R=Qt("RouterView");return L(),U("div",null,[l(t(da),{visible:p.value,transparent:!1},{default:f(()=>[c("div",VMe,[l(t(Gs)),l(t(CP),{layout:"top-menu"}),c("nav",UMe,[c("ul",FMe,[(L(!0),U(ke,null,Fe(t(r),(E,P)=>(L(),U("li",{key:P},[E!="divider"?(L(),U(ke,{key:0},[c("a",{href:E.subMenu?"#":(S=>{try{return t(o).resolve({name:S}).fullPath}catch{return""}})(E.pageName),class:F([E.active?"top-menu top-menu--active":"top-menu"]),onClick:S=>{S.preventDefault(),t(DA)(E,t(o))}},[c("div",HMe,[l(t(re),{icon:E.icon},null,8,["icon"])]),c("div",NMe,[A(_(t(e)(E.title))+" ",1),E.subMenu?(L(),ge(t(re),{key:0,class:"top-menu__sub-icon",icon:"ChevronDown"})):Me("",!0)])],10,jMe),E.subMenu?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":E.activeDropdown})},[(L(!0),U(ke,null,Fe(E.subMenu,(S,C)=>(L(),U("li",{key:C},[c("a",{href:S.subMenu?"#":(M=>{try{return t(o).resolve({name:M}).fullPath}catch{return""}})(S.pageName),class:"top-menu",onClick:M=>{M.preventDefault(),t(DA)(S,t(o))}},[c("div",BMe,[l(t(re),{icon:S.icon},null,8,["icon"])]),c("div",qMe,[A(_(t(e)(S.title))+" ",1),S.subMenu?(L(),ge(t(re),{key:0,class:"top-menu__sub-icon",icon:"ChevronDown"})):Me("",!0)])],8,zMe),S.subMenu?(L(),U("ul",{key:0,class:F({"side-menu__sub-open":S.activeDropdown})},[(L(!0),U(ke,null,Fe(S.subMenu,(M,g)=>(L(),U("li",{key:g},[c("a",{href:M.subMenu?"#":(v=>{try{return t(o).resolve({name:v}).fullPath}catch{return""}})(M.pageName),class:"top-menu",onClick:v=>{v.preventDefault(),t(DA)(M,t(o))}},[c("div",GMe,[l(t(re),{icon:M.icon},null,8,["icon"])]),c("div",ZMe,_(t(e)(M.title)),1)],8,WMe)]))),128))],2)):Me("",!0)]))),128))],2)):Me("",!0)],64)):Me("",!0)]))),128))])]),c("div",KMe,[l(t(Ks)),l(R,{onUpdateMenu:$}),(L(),U(ke,null,Fe(3,E=>c("br",{key:E})),64)),l(t(Zs),{visible:x.value},null,8,["visible"])])])]),_:1},8,["visible"])])}}}),QE=[{name:"rubick",layout:"side-menu",component:Gxe},{name:"rubick",layout:"simple-menu",component:i8e},{name:"rubick",layout:"top-menu",component:C8e},{name:"icewall",layout:"side-menu",component:j8e},{name:"icewall",layout:"simple-menu",component:J8e},{name:"icewall",layout:"top-menu",component:v6e},{name:"tinker",layout:"side-menu",component:P6e},{name:"tinker",layout:"simple-menu",component:G6e},{name:"tinker",layout:"top-menu",component:dMe},{name:"enigma",layout:"side-menu",component:xMe},{name:"enigma",layout:"simple-menu",component:RMe},{name:"enigma",layout:"top-menu",component:XMe}],JE=n=>{const e=n===void 0?{name:localStorage.getItem("theme"),layout:localStorage.getItem("layout")}:n;return QE.filter((a,s)=>a.name===e.name&&a.layout===e.layout)[0]},Rd=Qr("theme",{state:()=>({themeValue:{name:localStorage.getItem("theme")===null?QE[0].name:JE().name,layout:localStorage.getItem("layout")===null?QE[0].layout:JE().layout}}),getters:{theme(n){return localStorage.getItem("theme")===null&&localStorage.setItem("theme","rubick"),localStorage.getItem("layout")===null&&localStorage.setItem("layout","side-menu"),n.themeValue}},actions:{setTheme(n){this.themeValue={name:n,layout:this.themeValue.layout},localStorage.setItem("theme",n)},setLayout(n){this.themeValue={name:this.themeValue.name,layout:n},localStorage.setItem("layout",n)}}}),YMe="/assets/enigma-VF8rWhPh.png",QMe=Object.freeze(Object.defineProperty({__proto__:null,default:YMe},Symbol.toStringTag,{value:"Module"})),JMe="/assets/icewall-C6bJAm8N.png",e7e=Object.freeze(Object.defineProperty({__proto__:null,default:JMe},Symbol.toStringTag,{value:"Module"})),t7e="/assets/rubick-BsAbhWbo.png",a7e=Object.freeze(Object.defineProperty({__proto__:null,default:t7e},Symbol.toStringTag,{value:"Module"})),n7e="/assets/tinker-DvKz0VXE.png",s7e=Object.freeze(Object.defineProperty({__proto__:null,default:n7e},Symbol.toStringTag,{value:"Module"})),o7e="/assets/side-menu-koX86Dqj.png",r7e=Object.freeze(Object.defineProperty({__proto__:null,default:o7e},Symbol.toStringTag,{value:"Module"})),i7e="/assets/simple-menu-DyDDc8y3.png",l7e=Object.freeze(Object.defineProperty({__proto__:null,default:i7e},Symbol.toStringTag,{value:"Module"})),c7e="/assets/top-menu-DTdMe4W1.png",d7e=Object.freeze(Object.defineProperty({__proto__:null,default:c7e},Symbol.toStringTag,{value:"Module"})),u7e=["default","theme-1","theme-2","theme-3","theme-4"],p7e=()=>{const n=localStorage.getItem("colorScheme");return u7e.filter((e,a)=>e===n)[0]},RA=Qr("colorScheme",{state:()=>({colorSchemeValue:localStorage.getItem("colorScheme")===null?"default":p7e()}),getters:{colorScheme(n){return localStorage.getItem("colorScheme")===null&&localStorage.setItem("colorScheme","default"),n.colorSchemeValue}},actions:{setColorScheme(n){localStorage.setItem("colorScheme",n),this.colorSchemeValue=n}}}),h7e={class:"flex flex-col"},f7e={class:"px-8 pt-6 pb-8"},m7e=c("div",{class:"text-base font-medium"},"Themes",-1),v7e=c("div",{class:"mt-0.5 text-slate-500"},"Choose your theme",-1),y7e={class:"mt-5 grid grid-cols-2 gap-x-5 gap-y-3.5"},_7e=["onClick"],g7e={class:"w-full h-full overflow-hidden rounded-md image-fit"},k7e=["src"],b7e={class:"mt-2.5 text-center text-xs capitalize"},w7e=c("div",{class:"border-b border-dashed"},null,-1),x7e={class:"px-8 pt-6 pb-8"},M7e=c("div",{class:"text-base font-medium"},"Layouts",-1),C7e=c("div",{class:"mt-0.5 text-slate-500"},"Choose your layout",-1),S7e={class:"mt-5 grid grid-cols-3 gap-x-5 gap-y-3.5"},I7e=["onClick"],L7e={class:"w-full h-full overflow-hidden rounded-md"},$7e=["src"],A7e={class:"mt-2.5 text-center text-xs capitalize"},E7e=c("div",{class:"border-b border-dashed"},null,-1),T7e={class:"px-8 pt-6 pb-8"},P7e=c("div",{class:"text-base font-medium"},"Accent Colors",-1),D7e=c("div",{class:"mt-0.5 text-slate-500"},"Choose your accent color",-1),R7e={class:"mt-5 grid grid-cols-2 gap-3.5"},O7e=["onClick"],V7e={class:"h-full overflow-hidden rounded-md"},U7e={class:"flex items-center h-full gap-1 -mx-2"},F7e=c("div",{class:"border-b border-dashed"},null,-1),j7e={class:"px-8 pt-6 pb-8"},H7e=c("div",{class:"text-base font-medium"},"Appearance",-1),N7e=c("div",{class:"mt-0.5 text-slate-500"},"Choose your appearance",-1),z7e={class:"mt-5 grid grid-cols-2 gap-3.5"},B7e=c("div",{class:"h-full overflow-hidden rounded-md bg-slate-200"},null,-1),q7e=[B7e],W7e=c("div",{class:"mt-2.5 text-center text-xs capitalize"},"Light",-1),G7e=c("div",{class:"h-full overflow-hidden rounded-md bg-slate-900"},null,-1),Z7e=[G7e],K7e=c("div",{class:"mt-2.5 text-center text-xs capitalize"},"Dark",-1),SP=Ce({__name:"ThemeSwitcher",setup(n){const e=O(!1),a=R=>{e.value=R},s=Rd(),o=R=>{Rd().setTheme(R)},r=R=>{Rd().setLayout(R)},i=()=>{const R=document.querySelectorAll("html")[0];R.setAttribute("class",RA().colorSchemeValue),kd().darkModeValue&&R.classList.add("dark")},u=RA(),h=R=>{RA().setColorScheme(R),i()};i();const m=()=>{const R=document.querySelectorAll("html")[0];kd().darkModeValue?R.classList.add("dark"):R.classList.remove("dark")},p=kd(),b=R=>{kd().setDarkMode(R),m()};m();const x=["rubick","icewall","tinker","enigma"],w=["side-menu","simple-menu","top-menu"],$=["default","theme-1","theme-2","theme-3","theme-4"],D=Object.assign({"/src/assets/images/themes/enigma.png":QMe,"/src/assets/images/themes/icewall.png":e7e,"/src/assets/images/themes/rubick.png":a7e,"/src/assets/images/themes/tinker.png":s7e}),V=Object.assign({"/src/assets/images/layouts/side-menu.png":r7e,"/src/assets/images/layouts/simple-menu.png":l7e,"/src/assets/images/layouts/top-menu.png":d7e});return(R,E)=>(L(),U("div",null,[l(t(Fr),{open:e.value,onClose:E[3]||(E[3]=()=>{a(!1)})},{default:f(()=>[l(t(Fr).Panel,null,{default:f(()=>[c("a",{class:"absolute inset-y-0 left-0 right-auto my-auto -ml-[60px] flex h-8 w-8 items-center justify-center rounded-full border border-white/90 bg-white/5 text-white/90 transition-all hover:rotate-180 hover:scale-105 hover:bg-white/10 focus:outline-none sm:-ml-[105px] sm:h-14 sm:w-14",onClick:E[0]||(E[0]=P=>{P.preventDefault(),a(!1)})},[l(t(re),{class:"h-3 w-3 stroke-[1] sm:h-8 sm:w-8",icon:"X"})]),l(t(Fr).Description,{class:"p-0"},{default:f(()=>[c("div",h7e,[c("div",f7e,[m7e,v7e,c("div",y7e,[(L(),U(ke,null,Fe(x,P=>c("div",null,[c("a",{onClick:S=>{S.preventDefault(),o(P)},class:F(["h-28 cursor-pointer bg-slate-50 box p-1 block",t(s).theme.name==P?"border-2 border-theme-1/60":""])},[c("div",g7e,[c("img",{class:"w-full h-full",src:t(D)["/src/assets/images/themes/"+P+".png"].default,alt:"DCSLab"},null,8,k7e)])],10,_7e),c("div",b7e,_(P),1)])),64))])]),w7e,c("div",x7e,[M7e,C7e,c("div",S7e,[(L(),U(ke,null,Fe(w,P=>c("div",null,[c("a",{onClick:S=>{S.preventDefault(),r(P)},class:F(["h-24 cursor-pointer bg-slate-50 box p-1 block",t(s).theme.layout==P?"border-2 border-theme-1/60":""])},[c("div",L7e,[c("img",{class:"w-full h-full",src:t(V)["/src/assets/images/layouts/"+P+".png"].default,alt:"DCSLab"},null,8,$7e)])],10,I7e),c("div",A7e,_(P.replace("-"," ")),1)])),64))])]),E7e,c("div",T7e,[P7e,D7e,c("div",R7e,[(L(),U(ke,null,Fe($,P=>c("div",null,[c("a",{onClick:S=>{S.preventDefault(),h(P)},class:F(["h-14 cursor-pointer bg-slate-50 box p-1 border-slate-300/80 block","[&.active]:border-2 [&.active]:border-theme-1/60",t(u).colorSchemeValue==P?"active":""])},[c("div",V7e,[c("div",U7e,[c("div",{class:F(["w-1/2 h-[200%] bg-theme-1 rotate-12",P])},null,2),c("div",{class:F(["w-1/2 h-[200%] bg-theme-2 rotate-12",P])},null,2)])])],10,O7e)])),64))])]),F7e,c("div",j7e,[H7e,N7e,c("div",z7e,[c("div",null,[c("a",{onClick:E[1]||(E[1]=P=>{P.preventDefault(),b(!1)}),class:F(["h-12 cursor-pointer bg-slate-50 box p-1 border-slate-300/80 block","[&.active]:border-2 [&.active]:border-theme-1/60",t(p).darkModeValue?"":"active"])},q7e,2),W7e]),c("div",null,[c("a",{onClick:E[2]||(E[2]=P=>{P.preventDefault(),b(!0)}),class:F(["h-12 cursor-pointer bg-slate-50 box p-1 border-slate-300/80 block","[&.active]:border-2 [&.active]:border-theme-1/60",t(p).darkModeValue?"active":""])},Z7e,2),K7e])])])])]),_:1})]),_:1})]),_:1},8,["open"]),c("div",{class:"fixed bottom-0 right-0 z-50 flex items-center justify-center mb-5 mr-5 text-white rounded-full shadow-lg cursor-pointer h-14 w-14 bg-theme-1",onClick:E[4]||(E[4]=P=>{P.preventDefault(),a(!0)})},[l(t(re),{class:"w-5 h-5 hover:animate-spin",icon:"Settings"})])]))}}),X7e=Ce({__name:"Layout",setup(n){const e=Rd(),a=ee(()=>JE(e.theme).component);return(s,o)=>(L(),U("div",null,[l(t(SP)),l(t(a))]))}}),g9="/assets/illustration-DoVs3XZq.svg";class k9{constructor(){mt(this,"checkCookieExists",e=>new Promise(a=>{const s=document.cookie.split("; ");for(const o of s){const[r]=o.split("=");if(r===e){a(!0);return}}a(!1)}))}async ensureCSRF(){await this.checkCookieExists("XSRF-TOKEN")||await this.generateCSRF()}async generateCSRF(){await nP.get("/sanctum/csrf-cookie")}useLoginForm(){return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,et.axios().defaults.headers.common["X-Timezone"]=Intl.DateTimeFormat().resolvedOptions().timeZone,Ut("post",Qo()+"/login",{email:"",password:"",remember:!1})}useTwoFactorLoginForm(){return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",Qo()+"/two-factor-challenge",{code:"",recovery_code:""})}useRegisterForm(){return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",Qo()+"/register",{name:"",email:"",password:"",password_confirmation:"",terms:!1})}useRequestResetPasswordForm(){return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",Qo()+"/forgot-password",{email:""})}useResetPasswordForm(){return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",Qo()+"/reset-password",{email:"",token:"",password:"",password_confirmation:""})}}const Y7e={class:F(["-m-3 sm:-mx-8 p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600","before:hidden before:xl:block before:content-[''] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400","after:hidden after:xl:block after:content-[''] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700"])},Q7e={class:"container relative z-10 sm:px-10"},J7e={class:"block grid-cols-2 gap-4 xl:grid"},eCe={class:"flex-col hidden min-h-screen xl:flex"},tCe={href:"",class:"flex items-center pt-5 -intro-x"},aCe=["src"],nCe={class:"ml-3 text-lg text-white"},sCe={class:"my-auto"},oCe=["src"],rCe=c("div",{class:"mt-10 text-4xl font-medium leading-tight text-white -intro-x"},[c("br")],-1),iCe=c("div",{class:"mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400"},null,-1),lCe={class:"flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0"},cCe={class:"w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto"},dCe={class:"text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left"},uCe=c("div",{class:"mt-2 text-center intro-x text-slate-400 xl:hidden"}," ",-1),pCe={class:"mt-8 intro-x"},hCe={class:"flex mt-4 text-xs intro-x text-slate-600 dark:text-slate-500 sm:text-sm"},fCe={class:"flex items-center mr-auto"},mCe={class:"cursor-pointer select-none",htmlFor:"remember-me"},vCe={class:"mt-5 text-center intro-x xl:mt-8 xl:text-left"},yCe={key:0,class:"mt-8 intro-x"},_Ce={key:1,class:"mt-8 intro-x"},gCe={class:"flex mt-4 text-xs intro-x text-slate-600 dark:text-slate-500 sm:text-sm"},kCe={class:"flex items-center mr-auto"},bCe={class:"mt-5 text-center intro-x xl:mt-8 xl:text-left"},wCe=c("div",{class:"mt-10 text-center intro-x xl:mt-24 text-slate-600 dark:text-slate-500 xl:text-left"},[A(" By signin up, you agree to our "),c("a",{class:"text-primary dark:text-slate-200",href:""},"Terms and Conditions"),A(" & "),c("a",{class:"text-primary dark:text-slate-200",href:""},"Privacy Policy")],-1),xCe=Ce({__name:"LoginPage",setup(n){const{t:e}=tt(),a=ct(),s=new k9,o="DCSLab",r=O(!1),i=O("onLoad"),u=O(""),h=O(!1),m=O(!1),p=s.useLoginForm(),b=s.useTwoFactorLoginForm();at(async()=>{s.ensureCSRF()});const x=async()=>{r.value=!0,p.submit().then($=>{$.data.two_factor?h.value=!0:a.push({name:"side-menu-dashboard-maindashboard"})}).catch($=>{i.value="error",u.value=$.response.data.message}).finally(()=>{r.value=!1})},w=async()=>{r.value=!0,b.submit().then(()=>{a.push({name:"side-menu-dashboard-maindashboard"})}).catch($=>{i.value="error",u.value=$.response.data.message}).finally(()=>{r.value=!1})};return($,D)=>{const V=Qt("RouterLink"),R=Qt("FormLabel"),E=Qt("LoadingOverlay");return L(),U("div",Y7e,[l(t(SP)),c("div",Q7e,[c("div",J7e,[c("div",eCe,[c("a",tCe,[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,aCe),c("span",nCe,_(t(o)),1)]),c("div",sCe,[c("img",{alt:"DCSLab",class:"w-1/2 -mt-16 -intro-x",src:t(g9)},null,8,oCe),rCe,iCe])]),c("div",lCe,[c("div",cCe,[l(E,{visible:r.value,transparent:!0},{default:f(()=>[c("h2",dCe,_(t(e)("views.login.title")),1),uCe,i.value!="onLoad"?(L(),ge(t(Yr),{key:0,variant:i.value=="success"?"success":"danger",class:"mt-2"},{default:f(()=>[A(_(u.value),1)]),_:1},8,["variant"])):Me("",!0),h.value?(L(),U("form",{key:2,id:"twoFactorLoginForm",onSubmit:Rt(w,["prevent"])},[m.value?(L(),U("div",yCe,[l(R,null,{default:f(()=>[A(_(t(e)("views.login.fields.2fa.recovery_code")),1)]),_:1}),l(t(Oe),{modelValue:t(b).recovery_code,"onUpdate:modelValue":D[6]||(D[6]=P=>t(b).recovery_code=P),type:"text",class:F(["block px-4 py-3 intro-x min-w-full xl:min-w-[350px]",{"border-danger":t(b).invalid("recovery_code")}]),placeholder:t(e)("views.login.fields.2fa.recovery_code"),onFocus:D[7]||(D[7]=P=>t(b).forgetError("recovery_code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.recovery_code},null,8,["messages"])])):(L(),U("div",_Ce,[l(R,null,{default:f(()=>[A(_(t(e)("views.login.fields.2fa.label")),1)]),_:1}),l(t(Oe),{modelValue:t(b).code,"onUpdate:modelValue":D[8]||(D[8]=P=>t(b).code=P),type:"text",class:F(["block px-4 py-3 intro-x min-w-full xl:min-w-[350px]",{"border-danger":t(b).invalid("code")}]),placeholder:t(e)("views.login.fields.2fa.code"),onFocus:D[9]||(D[9]=P=>t(b).forgetError("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.code},null,8,["messages"])])),c("div",gCe,[c("div",kCe,[l(t(Nn),null,{default:f(()=>[l(t(Nn).Input,{modelValue:m.value,"onUpdate:modelValue":D[10]||(D[10]=P=>m.value=P),type:"checkbox"},null,8,["modelValue"]),l(t(Nn).Label,null,{default:f(()=>[A(_(t(e)("views.login.fields.2fa.use_recovery_codes")),1)]),_:1})]),_:1})])]),c("div",bCe,[l(t(me),{variant:"primary",class:"w-full px-4 py-3 align-top xl:w-32 xl:mr-3"},{default:f(()=>[A(_(t(e)("components.buttons.login")),1)]),_:1})])],32)):(L(),U("form",{key:1,id:"loginForm",onSubmit:Rt(x,["prevent"])},[c("div",pCe,[l(t(Oe),{modelValue:t(p).email,"onUpdate:modelValue":D[0]||(D[0]=P=>t(p).email=P),type:"text",class:F(["block px-4 py-3 intro-x login__input min-w-full xl:min-w-[350px]",{"border-danger":t(p).invalid("email")}]),placeholder:t(e)("views.login.fields.email"),onFocus:D[1]||(D[1]=P=>t(p).forgetError("email"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.email},null,8,["messages"]),l(t(Oe),{modelValue:t(p).password,"onUpdate:modelValue":D[2]||(D[2]=P=>t(p).password=P),type:"password",class:F(["block px-4 py-3 mt-4 intro-x login__input min-w-full xl:min-w-[350px]",{"border-danger":t(p).invalid("password")}]),placeholder:t(e)("views.login.fields.password"),onFocus:D[3]||(D[3]=P=>t(p).forgetError("password"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.password},null,8,["messages"])]),c("div",hCe,[c("div",fCe,[l(t(Nn).Input,{modelValue:t(p).remember,"onUpdate:modelValue":D[4]||(D[4]=P=>t(p).remember=P),type:"checkbox",class:"mr-2 border"},null,8,["modelValue"]),c("label",mCe,_(t(e)("views.login.fields.remember_me")),1)]),l(V,{to:"/auth/forgot-password"},{default:f(()=>[A(_(t(e)("views.login.fields.forgot_pass")),1)]),_:1})]),c("div",vCe,[l(t(me),{variant:"primary",class:"w-full px-4 py-3 align-top xl:w-32 xl:mr-3"},{default:f(()=>[A(_(t(e)("components.buttons.login")),1)]),_:1}),l(t(me),{variant:"outline-secondary",class:"w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0",onClick:D[5]||(D[5]=P=>t(a).push({name:"register"}))},{default:f(()=>[A(_(t(e)("components.buttons.register")),1)]),_:1})])],32)),wCe]),_:1},8,["visible"])])])])])])}}}),MCe={class:F(["p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600","before:hidden before:xl:block before:content-[''] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400","after:hidden after:xl:block after:content-[''] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700"])},CCe={class:"container relative z-10 sm:px-10"},SCe={class:"block grid-cols-2 gap-4 xl:grid"},ICe={class:"flex-col hidden min-h-screen xl:flex"},LCe={href:"",class:"flex items-center pt-5 -intro-x"},$Ce=["src"],ACe={class:"ml-3 text-lg text-white"},ECe={class:"my-auto"},TCe=["src"],PCe=io('<div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x"><span class="hidden"> </span><br><span class="hidden"> </span></div><div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400"><span class="hidden"> </span></div>',2),DCe={class:"flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0"},RCe={class:"w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto"},OCe={class:"text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left"},VCe=c("div",{class:"mt-2 text-center intro-x text-slate-400 dark:text-slate-400 xl:hidden"}," ",-1),UCe={class:"mt-8 intro-x"},FCe={class:"ml-1 text-danger"},jCe={class:"ml-1 text-danger"},HCe={class:"ml-1 text-danger"},NCe={class:"ml-1 text-danger"},zCe={class:"flex flex-col items-start mt-4 text-xs intro-x text-slate-600 dark:text-slate-500 sm:text-sm"},BCe={class:"ml-1 text-danger"},qCe={class:"mt-5 text-center intro-x xl:mt-8 xl:text-left"},WCe=Ce({__name:"RegisterPage",setup(n){const{t:e}=tt(),a=ct(),s=new k9,o=O("onLoad"),r=O(""),i=O(!1),u=s.useRegisterForm();at(async()=>{s.ensureCSRF()});const h=async()=>{i.value=!0,u.submit().then(()=>{a.push({name:"side-menu-dashboard-maindashboard"})}).catch(m=>{o.value="error",r.value=m.response.data.message}).finally(()=>{i.value=!1})};return(m,p)=>(L(),U("div",MCe,[l(t(SP)),c("div",CCe,[c("div",SCe,[c("div",ICe,[c("a",LCe,[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,$Ce),c("span",ACe,_(t(e)("views.login.fields.email")),1)]),c("div",ECe,[c("img",{alt:"DCSLab",class:"w-1/2 -mt-16 -intro-x",src:t(g9)},null,8,TCe),PCe])]),c("div",DCe,[c("div",RCe,[l(t(da),{visible:i.value,transparent:!0},{default:f(()=>[c("h2",OCe,_(t(e)("views.register.title")),1),VCe,c("form",{id:"registerForm",onSubmit:Rt(h,["prevent"])},[o.value!="onLoad"?(L(),ge(t(Yr),{key:0,variant:o.value=="success"?"success":"danger",class:"mt-2"},{default:f(()=>[A(_(r.value),1)]),_:1},8,["variant"])):Me("",!0),c("div",UCe,[l(t(Oe),{modelValue:t(u).name,"onUpdate:modelValue":p[0]||(p[0]=b=>t(u).name=b),type:"text",class:F({"block px-4 py-3 intro-x min-w-full xl:min-w-[350px]":!0,"border-danger":t(u).invalid("name")}),placeholder:t(e)("views.register.fields.name"),onFocus:p[1]||(p[1]=b=>t(u).forgetError("name"))},null,8,["modelValue","class","placeholder"]),c("span",FCe,_(t(u).errors.name),1),l(t(Oe),{modelValue:t(u).email,"onUpdate:modelValue":p[2]||(p[2]=b=>t(u).email=b),type:"text",class:F({"block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]":!0,"border-danger":t(u).invalid("email")}),placeholder:t(e)("views.register.fields.email"),onFocus:p[3]||(p[3]=b=>t(u).forgetError("email"))},null,8,["modelValue","class","placeholder"]),c("span",jCe,_(t(u).errors.email),1),l(t(Oe),{modelValue:t(u).password,"onUpdate:modelValue":p[4]||(p[4]=b=>t(u).password=b),type:"password",class:F({"block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]":!0,"border-danger":t(u).invalid("password")}),placeholder:t(e)("views.register.fields.password"),onFocus:p[5]||(p[5]=b=>t(u).forgetError("password"))},null,8,["modelValue","class","placeholder"]),c("span",HCe,_(t(u).errors.password),1),l(t(Oe),{modelValue:t(u).password_confirmation,"onUpdate:modelValue":p[6]||(p[6]=b=>t(u).password_confirmation=b),type:"password",class:F({"block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]":!0,"border-danger":t(u).invalid("password")}),placeholder:t(e)("views.register.fields.password_confirmation"),onFocus:p[7]||(p[7]=b=>t(u).forgetError("password_confirmation"))},null,8,["modelValue","class","placeholder"]),c("span",NCe,_(t(u).errors.password),1)]),c("div",zCe,[l(t(Nn),null,{default:f(()=>[l(t(Nn).Input,{modelValue:t(u).terms,"onUpdate:modelValue":p[8]||(p[8]=b=>t(u).terms=b),type:"checkbox",class:F({"border-danger":t(u).errors.terms}),onFocus:p[9]||(p[9]=b=>t(u).forgetError("terms"))},null,8,["modelValue","class"]),l(t(Nn).Label,{class:"cursor-pointer select-none"},{default:f(()=>[A(" I agree to the "+_(t(e)("views.register.fields.terms_and_cond")),1)]),_:1})]),_:1}),c("span",BCe,_(t(u).errors.terms),1)]),c("div",qCe,[l(t(me),{variant:"primary",class:"w-full px-4 py-3 align-top xl:w-32 xl:mr-3"},{default:f(()=>[A(_(t(e)("components.buttons.register")),1)]),_:1}),l(t(me),{variant:"outline-secondary",class:"w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0",onClick:p[10]||(p[10]=b=>t(a).push({name:"login"}))},{default:f(()=>[A(_(t(e)("components.buttons.login")),1)]),_:1})])],32)]),_:1},8,["visible"])])])])])]))}}),GCe={class:F(["p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600","before:hidden before:xl:block before:content-[''] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400","after:hidden after:xl:block after:content-[''] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700"])},ZCe={class:"container relative z-10 sm:px-10"},KCe={class:"block grid-cols-2 gap-4 xl:grid"},XCe={class:"flex-col hidden min-h-screen xl:flex"},YCe={href:"",class:"flex items-center pt-5 -intro-x"},QCe=["src"],JCe={class:"ml-3 text-lg text-white"},eSe={class:"my-auto"},tSe=["src"],aSe=io('<div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x"><span class="hidden"> </span><br><span class="hidden"> </span></div><div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400"><span class="hidden"> </span></div>',2),nSe={class:"flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0"},sSe={class:"w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto"},oSe={class:"text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left"},rSe=c("div",{class:"mt-2 text-center intro-x text-slate-400 xl:hidden"}," ",-1),iSe={class:"mt-8 intro-x"},lSe={class:"mt-5 text-center intro-x xl:mt-8 xl:text-left"},cSe=Ce({__name:"ForgotPasswordPage",setup(n){const{t:e}=tt(),a=ct(),s=new k9,o="DCSLab",r=O(!1),i=O("onLoad"),u=O(""),h=s.useRequestResetPasswordForm();at(async()=>{s.ensureCSRF()});const m=async()=>{r.value=!0,h.submit().then(()=>{i.value="success",u.value=e("views.forgot_password.alert.successfully_send_link")}).catch(p=>{i.value="error",u.value=p.response.data.message}).finally(()=>{r.value=!1})};return(p,b)=>(L(),U("div",GCe,[c("div",ZCe,[c("div",KCe,[c("div",XCe,[c("a",YCe,[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,QCe),c("span",JCe,_(t(o)),1)]),c("div",eSe,[c("img",{alt:"DCSLab",class:"w-1/2 -mt-16 -intro-x",src:t(g9)},null,8,tSe),aSe])]),c("div",nSe,[c("div",sSe,[l(t(da),{visible:r.value,transparent:!0},{default:f(()=>[c("h2",oSe,_(t(e)("views.forgot_password.title")),1),rSe,c("form",{id:"forgotPasswordForm",onSubmit:Rt(m,["prevent"])},[i.value!="onLoad"?(L(),ge(t(Yr),{key:0,variant:i.value=="success"?"success":"danger",class:"mt-2"},{default:f(()=>[A(_(u.value),1)]),_:1},8,["variant"])):Me("",!0),c("div",iSe,[l(t(Oe),{modelValue:t(h).email,"onUpdate:modelValue":b[0]||(b[0]=x=>t(h).email=x),type:"text",class:F(["block px-4 py-3 intro-x min-w-full xl:min-w-[350px]",{"border-danger":t(h).invalid("email")}]),placeholder:t(e)("views.forgot_password.fields.email"),onFocus:b[1]||(b[1]=x=>t(h).forgetError("email"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(h).errors.email},null,8,["messages"])]),c("div",lSe,[i.value=="onLoad"?(L(),ge(t(me),{key:0,type:"submit",variant:"primary",class:"w-full px-4 py-3 align-top xl:w-32 xl:mr-3"},{default:f(()=>[A(_(t(e)("components.buttons.submit")),1)]),_:1})):Me("",!0),l(t(me),{type:"button",variant:"outline-secondary",class:"w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0",onClick:b[2]||(b[2]=x=>{t(h).forgetError("email"),t(a).push({name:"login"})})},{default:f(()=>[A(_(t(e)("components.buttons.login")),1)]),_:1})])],32)]),_:1},8,["visible"])])])])])]))}}),dSe={class:F(["p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600","before:hidden before:xl:block before:content-[''] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400","after:hidden after:xl:block after:content-[''] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700"])},uSe={class:"container relative z-10 sm:px-10"},pSe={class:"block grid-cols-2 gap-4 xl:grid"},hSe={class:"flex-col hidden min-h-screen xl:flex"},fSe={href:"",class:"flex items-center pt-5 -intro-x"},mSe=["src"],vSe={class:"ml-3 text-lg text-white"},ySe={class:"my-auto"},_Se=["src"],gSe=io('<div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x"><span class="hidden"> </span><br><span class="hidden"> </span></div><div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400"><span class="hidden"> </span></div>',2),kSe={class:"flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0"},bSe={class:"w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto"},wSe={class:"text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left"},xSe=c("div",{class:"mt-2 text-center intro-x text-slate-400 xl:hidden"}," ",-1),MSe={key:1,class:"mt-8 intro-x"},CSe={class:"mt-5 text-center intro-x xl:mt-8 xl:text-left"},SSe=Ce({__name:"ResetPasswordPage",setup(n){const{t:e}=tt(),a=ct(),s=new k9,o="DCSLab",r=O(!1),i=O("onLoad"),u=O(""),h=s.useResetPasswordForm();at(async()=>{s.ensureCSRF();const b=new URLSearchParams(window.location.search);h.setData({token:b.get("token"),email:b.get("email")})});const m=async()=>{r.value=!0,h.submit().then(()=>{i.value="finishResetting",u.value=e("views.reset_password.alert.successfully_reset_password")}).catch(b=>{i.value="resettingError",u.value=b.response.data.message}).finally(()=>{r.value=!1})},p=()=>{const b=new URLSearchParams(window.location.search);h.reset(),h.setData({token:b.get("token"),email:b.get("email")})};return(b,x)=>(L(),U("div",dSe,[c("div",uSe,[c("div",pSe,[c("div",hSe,[c("a",fSe,[c("img",{alt:"DCSLab",class:"w-6",src:t(To)},null,8,mSe),c("span",vSe,_(t(o)),1)]),c("div",ySe,[c("img",{alt:"DCSLab",class:"w-1/2 -mt-16 -intro-x",src:t(g9)},null,8,_Se),gSe])]),c("div",kSe,[c("div",bSe,[l(t(da),{visible:r.value,transparent:!0},{default:f(()=>[c("h2",wSe,_(t(e)("views.reset_password.title")),1),xSe,c("form",{id:"forgotPasswordForm",onSubmit:Rt(m,["prevent"])},[i.value!="onLoad"?(L(),ge(t(Yr),{key:0,variant:i.value=="finishResetting"?"success":"danger",class:"mt-2"},{default:f(()=>[A(_(u.value),1)]),_:1},8,["variant"])):Me("",!0),i.value=="onLoad"?(L(),U("div",MSe,[rs(c("input",{type:"hidden","onUpdate:modelValue":x[0]||(x[0]=w=>t(h).token=w)},null,512),[[Lo,t(h).token]]),rs(c("input",{type:"hidden","onUpdate:modelValue":x[1]||(x[1]=w=>t(h).email=w)},null,512),[[Lo,t(h).email]]),l(t(Oe),{modelValue:t(h).password,"onUpdate:modelValue":x[2]||(x[2]=w=>t(h).password=w),type:"password",class:F(["block px-4 py-3 intro-x login__input min-w-full xl:min-w-[350px]",{"border-danger":t(h).invalid("password")}]),placeholder:t(e)("views.reset_password.fields.password"),onFocus:x[3]||(x[3]=w=>t(h).forgetError("password"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(h).errors.email},null,8,["messages"]),l(t(_e),{messages:t(h).errors.password},null,8,["messages"]),l(t(Oe),{modelValue:t(h).password_confirmation,"onUpdate:modelValue":x[4]||(x[4]=w=>t(h).password_confirmation=w),type:"password",class:F(["block px-4 py-3 mt-4 intro-x login__input min-w-full xl:min-w-[350px]",{"border-danger":t(h).invalid("password")}]),placeholder:t(e)("views.reset_password.fields.password_confirmation"),onFocus:x[5]||(x[5]=w=>t(h).forgetError("password"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(h).errors.password},null,8,["messages"])])):Me("",!0),c("div",CSe,[i.value!="finishResetting"?(L(),U(ke,{key:0},[l(t(me),{type:"submit",variant:"primary",class:"w-full px-4 py-3 align-top xl:w-32 xl:mr-3"},{default:f(()=>[A(_(t(e)("components.buttons.submit")),1)]),_:1}),l(t(me),{type:"button",variant:"outline-secondary",class:"w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0",onClick:p},{default:f(()=>[A(_(t(e)("components.buttons.reset")),1)]),_:1})],64)):(L(),ge(t(me),{key:1,type:"button",variant:"outline-secondary",class:"w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0",onClick:x[6]||(x[6]=w=>t(a).push({name:"login"}))},{default:f(()=>[A(_(t(e)("components.buttons.login")),1)]),_:1}))])],32)]),_:1},8,["visible"])])])])])]))}}),ISe={class:"col-span-12 mt-8"},LSe={class:"flex items-center h-10 intro-y"},$Se={class:"mr-5 text-lg font-medium truncate"},ASe={href:"",class:"flex items-center ml-auto text-primary"},ESe={class:"grid grid-cols-12 gap-6 mt-5"},TSe={class:"col-span-12 sm:col-span-6 xl:col-span-3 intro-y"},PSe={class:F(["relative zoom-in","before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']"])},DSe={class:"p-5 box"},RSe={class:"flex"},OSe={class:"ml-auto"},VSe=c("div",{class:"mt-6 text-3xl font-medium leading-8"},null,-1),USe=c("div",{class:"mt-1 text-base text-slate-500"},null,-1),FSe={class:"col-span-12 sm:col-span-6 xl:col-span-3 intro-y"},jSe={class:F(["relative zoom-in","before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']"])},HSe={class:"p-5 box"},NSe={class:"flex"},zSe={class:"ml-auto"},BSe=c("div",{class:"mt-6 text-3xl font-medium leading-8"},null,-1),qSe=c("div",{class:"mt-1 text-base text-slate-500"},null,-1),WSe={class:"col-span-12 sm:col-span-6 xl:col-span-3 intro-y"},GSe={class:F(["relative zoom-in","before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']"])},ZSe={class:"p-5 box"},KSe={class:"flex"},XSe={class:"ml-auto"},YSe=c("div",{class:"mt-6 text-3xl font-medium leading-8"},null,-1),QSe=c("div",{class:"mt-1 text-base text-slate-500"},null,-1),JSe={class:"col-span-12 sm:col-span-6 xl:col-span-3 intro-y"},eIe={class:F(["relative zoom-in","before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']"])},tIe={class:"p-5 box"},aIe={class:"flex"},nIe={class:"ml-auto"},sIe=c("div",{class:"mt-6 text-3xl font-medium leading-8"},null,-1),oIe=c("div",{class:"mt-1 text-base text-slate-500"},null,-1),rIe=Ce({__name:"MainDashboard",setup(n){const e=Za(),a=ee(()=>e.userContext),s=ee(()=>a.value.profile.first_name);return(o,r)=>{const i=Qt("Lucide"),u=Qt("Tippy");return L(),U("div",ISe,[c("div",LSe,[c("h2",$Se,"Welcome, "+_(s.value),1),c("a",ASe,[l(i,{icon:"RefreshCcw",class:"w-4 h-4 mr-3"})])]),c("div",ESe,[c("div",TSe,[c("div",PSe,[c("div",DSe,[c("div",RSe,[l(i,{icon:"ShoppingCart",class:"w-[28px] h-[28px] text-primary"}),c("div",OSe,[l(u,{as:"div",class:"cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium",content:""},{default:f(()=>[A("   "),l(i,{icon:"ChevronUp",class:"w-4 h-4 ml-0.5"})]),_:1})])]),VSe,USe])])]),c("div",FSe,[c("div",jSe,[c("div",HSe,[c("div",NSe,[l(i,{icon:"CreditCard",class:"w-[28px] h-[28px] text-pending"}),c("div",zSe,[l(u,{as:"div",class:"cursor-pointer bg-danger py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium",content:""},{default:f(()=>[A("   "),l(i,{icon:"ChevronDown",class:"w-4 h-4 ml-0.5"})]),_:1})])]),BSe,qSe])])]),c("div",WSe,[c("div",GSe,[c("div",ZSe,[c("div",KSe,[l(i,{icon:"Monitor",class:"w-[28px] h-[28px] text-warning"}),c("div",XSe,[l(u,{as:"div",class:"cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium",content:""},{default:f(()=>[A("   "),l(i,{icon:"ChevronUp",class:"w-4 h-4 ml-0.5"})]),_:1})])]),YSe,QSe])])]),c("div",JSe,[c("div",eIe,[c("div",tIe,[c("div",aIe,[l(i,{icon:"User",class:"w-[28px] h-[28px] text-success"}),c("div",nIe,[l(u,{as:"div",class:"cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium",content:""},{default:f(()=>[A("   "),l(i,{icon:"ChevronUp",class:"w-4 h-4 ml-0.5"})]),_:1})])]),sIe,oIe])])])])])}}});var fe=(n=>(n.Collapsed="COLLAPSED",n.Hidden="HIDDEN",n.Expanded="EXPANDED",n))(fe||{});const iIe={class:"grid grid-cols-12 gap-6 mt-5"},lIe={key:0,class:"col-span-12 lg:col-span-4 2xl:col-span-4 flex lg:block flex-col-reverse transition ease-in duration-100"},cIe={class:"intro-y box mt-5 lg:mt-0"},dIe={class:"relative flex items-center p-5"},uIe={class:"ml-4 mr-auto flex items-center justify-between w-full"},pIe={class:"font-medium text-base"},hIe={class:"p-5 border-t border-slate-200/60 dark:border-darkmode-400"},fIe=["href"],mIe=["onClick"],vIe={key:1},yIe={class:"mt-1 grid grid-cols-12 gap-6 box p-4"},_Ie=["id","onClick"],gIe={class:"w-1/2 flex justify-start"},kIe={class:"font-medium text-base mr-auto"},bIe={key:0,class:"w-1/2 flex justify-end"},ba=Ce({__name:"TwoColumnsLayout",props:{cards:{default:()=>[]},showSideTab:{type:Boolean,default:!1},usingSideTab:{type:Boolean,default:!1}},emits:["handleExpandCard"],setup(n,{emit:e}){const{t:a}=tt(),s=n,o=An(s,"showSideTab"),r=An(s,"usingSideTab"),i=O(!1),u=e;at(()=>{i.value=o.value});const h=b=>{u("handleExpandCard",b)},m=b=>{u("handleExpandCard",b)},p=b=>{b!=null?i.value=b:i.value=!i.value};return(b,x)=>(L(),U("div",iIe,[i.value&&r.value?(L(),U("div",lIe,[c("div",cIe,[c("div",dIe,[c("div",uIe,[c("div",pIe,[Lt(b.$slots,"side-menu-title")]),c("div",{class:"transition ease-in duration-100 ml-auto mr-5 xl:block lg:block cursor-pointer",onClick:x[0]||(x[0]=w=>p(!1))},[l(t(re),{class:"w-4 h-4",icon:"ChevronsLeft"})])])]),c("div",hIe,[(L(!0),U(ke,null,Fe(b.cards,(w,$)=>(L(),U("a",{key:$,class:"flex items-center mt-5",href:`#${$}`},[l(t(re),{icon:"CircleDot",class:"w-4 h-4 mr-2"}),A(" "+_(t(a)(w.title))+" ",1),c("div",{class:F({"transition ease-in duration-100 ml-auto mr-5 hidden xl:block":!0,"transform rotate-180":w.state}),onClick:D=>h($)},[w.state==="EXPANDED"?(L(),ge(t(re),{key:0,class:"w-4 h-4",icon:"Minus"})):w.state?(L(),ge(t(re),{key:1,class:"w-4 h-4",icon:"Plus"})):Me("",!0)],10,mIe)],8,fIe))),128))])])])):r.value?(L(),U("div",vIe,[c("div",{class:"transition ease-in duration-100 ml-auto mr-5 xl:block lg:block cursor-pointer",onClick:x[1]||(x[1]=w=>p(!0))},[l(t(re),{class:"w-4 h-4",icon:"ChevronsRight"})])])):Me("",!0),c("div",{class:F([`${i.value&&r.value&&"col-span-12 lg:col-span-8 xl:col-span-8"}`,`${!r.value&&"col-span-12"}`,`${r.value&&!i.value&&"col-span-11"}`])},[l(hn,null,{default:f(()=>[c("div",yIe,[(L(!0),U(ke,null,Fe(b.cards,(w,$)=>(L(),U("div",{key:$,class:F(["intro-y",{border:w.state===t(fe).Expanded},"rounded","col-span-12","2xl:col-span-12"])},[w.title?(L(),U("div",{key:0,id:`${$}`,class:F(["cursor-pointer","flex","px-5","py-5","sm:py-3","border-b",{border:w.state!==t(fe).Expanded},{rounded:w.state!==t(fe).Expanded},"border-slate-200/60","dark:border-darkmode-400"]),onClick:D=>m($)},[c("div",gIe,[c("h2",kIe,_(t(a)(w.title)),1)]),w.state!==t(fe).Hidden?(L(),U("div",bIe,[c("div",{class:F({"transition ease-in duration-100 ml-auto hidden xl:block cursor-pointer":!0,"transform rotate-180":w.state===t(fe).Expanded})},[l(t(re),{class:"w-6 h-6",icon:"ChevronDown"})],2)])):Me("",!0)],10,_Ie)):Me("",!0),c("div",{class:F([{block:w.state===t(fe).Expanded},{hidden:w.state===t(fe).Collapsed}])},[Lt(b.$slots,`card-items-${w.id?w.id:$}`,{card:w,index:$})],2)],2))),128))])]),_:3})],2)]))}}),wIe={},xIe={class:"flex flex-col items-center intro-y sm:flex-row"},MIe={class:"mr-auto text-lg font-medium"},CIe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"};function SIe(n,e){return L(),U("div",xIe,[c("h2",MIe,[Lt(n.$slots,"title")]),c("div",CIe,[Lt(n.$slots,"optional")])])}const an=Dc(wIe,[["render",SIe]]),IIe="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACvNJREFUeNrsnf1x2zYYh+Fc/48ygdnLAFUmsDyB7QksTZB4AlsTRJlA6gRWJjA9QegBcqUnKDtBC7hwqiokRUD4Ivk8dzrlHJGCgPfH933xKQQAAAAAAAAAAAAAAAAAAAD8xwlVEI/3p9mdfLuWr2yEP38rX8vvz2WBQGBfGBP5di9fM2pDLKRINqkW7g3tE4VbxPGDtXxgTBEIvHoPFU59oiZ+emAgEHjhkiroT50gkPBMqIL+gEAAEAgAAgFAIAAIBCARfqEKkmcjX889LPeZGMBgKAJJn9+/P5d53wqt55n1XiCEWAAIBACBACAQAAQCgEAAEAgAAgFAIAAIBAB2YapJ+nx+f5pVPSx3hkAgBFOqgBALAIEAIBAABAKAQAAQCFUQnIIq+IkSgcAruXxVVMP/+B2BwAvfn0sljhtq4n/eY5Vq4TgfJBLvT7O5fFsTbr6cD1IgEKgTSSbfPgr/o+WZMJv6kXsuj/KiX1M+OAeBjEuId8LgDA5puNgFOQgAAgFAIAAIBACBACAQAAQCgEAABg5r0jXvT7NZwK+rUp5eAQhkVxRqhHkW4bvVdAs1D2mLGRJipSaMTL4e5D8fRLxTkCbytZblmGCGCCQlcVzKt28ijePBlDjY1geBJCOOz/LtXhsmADnIjjjU2ot5YsUq+nhAJwIZpzhU0uyiZ2na0UNtBCsLEUgC4ph3EMdSvlZ6Oeyx+c39gY8pj6F6r0rMD4HEFodKxNcHvMa5izEJ+V1TcXgJ7Y38rhVmh0BSEMfkgMEWWhyudhhZt4RW6juuyDcQiC9j7xrX73ItmtdhOxWHXtI6PRDChR6t3+XUwvP6phezCU4SFoUShOqWvRRuu2WdhVU74v3Gs9a6LbY69KwQiJnRPQg/4xVXLqd36BH5GbaezkPLJakOFPoazNs6FscccThhIg73/iGQHaPLPD2lFo7veYttOyPTbY9ADnDh6b5Ll3GuRyGPmYvUCpRUDqIT8z893LqU4vjVcVlVYs5EQ/e8SylhT82D+Irnl47FMUMcvbOBQQjEh4t97Up0yTV2PI4wawweZOM491Bh4Bw7xoOEzj8yT0mv68NZLrFhr2TaFhBIAMMrPQw+XWDDvbQFK1Kai3Vm+HmVVzzt5ARZw2dCNd5Gvp6x7Vp+MzR6ZQsrBHJc7Ll89Q7SJX9s+MxXx2FgWyMnO58ogfB5aiiQZPKQNwlVoMnUknJHHE3XVh6mlzd5uS3iaEa3VWlwyUS3KwKxfGLkHa4tApbzKzIwarPeeJFUBGKafzzuxbeHPuPCy7Vt0ZNj/0Zt5sMm8CANBpkFMtppS7hXYv94kJTyj7JDRZaBRIz36JaHlH3MQ1LwINbeo21AycNTvSmUe8L8h+tFUhDIMflHqPCq7bvYpX3AeUgK4yCmbnTX+Nt2EQlVziACsdy4IgZFS5d37tk2hiUQi/lX+/nHNETY07YDe4jxj0S3TW2ikuVVg6aburBX/l9p0OYv87JidoLEDrGO8R4plDMPII5Pol+zh192o2l5qBSebWTUAtn3DG+bPM2A4vazHpa5bczoEYH4a/y8Y+W5FsjMUWPbGtuQKPr0gOiVB+Fcv/5jMT8uqgeJlqRb9MrkmNdPT+IUJkja9K7lovsYxyRmoh6zFyvz7JqHzk0Km2Fb7ixZGF4zjZVXxgyxjk3QQ/IWr+aUJ8+2MgiBmCZfRY/EDANJ1HvjQSIn6IR3bhP13oyFRBGIHkRykaA/OspvDvFXw99nmLs1JuHpJNZ58rE8iOkTwfSJk2F/gwuzpmMSiOmTl91ChsezZ5vptUBODT9fGLrpUEndW+w8mAc5jVHIWOMgRiGQRX//JFBjxuzdUhMCUxkotEnUc1n+5MPmWAIxcZelRSW7NtwqkBCTj8kdUxoY/jhCLIveiNLm/x2vZy4GbKSxBeLTdnqZg5ga1WNs421bFBVgY4FywAJJfup7HwRyyECeAiXqeaRGe+yh4Xfd1bJEIMfH7aWl4bqOWYtAQtz3XhuRyEbOBu117sk7Bg+xYiTpTudgtSTqaj3z1OEUladYyaP8DTfy7UYf/Za0OAynpSc/JyuGQCaGxtGlK1Mdc1C3e/i1cDePqslTuRZi68NgSAmIalvDrl6S9I5GuU/T5tGXDhuzbBEbZxa6f/CMLwexOFqr60DYtuXpPg/QmPNYk+kGQGVoQ5PBCkSYj4Z2Wlijw7Amkdw6LP+XFtc/x9ad5nZJeJHUBVI6MN5M7y3lO8y6xYvYJfaebahXSbpTgeiQ7XIneasaEjmXxts27eRefk/duMX22CReH/82PVCubVMvUk1d1aG2Dd0eUQab35q0QE4C5yCmW2j+2tLgqrHWoj/7Rq10d61pnanf92AQWiz2t/3UdXXf8Xpl3Of7vYeGmzMs6rYebRHuH77rcZAh1oE+9c+iX5uqfbI8/3tuGHd/rvnb2jDGn+8Z8VyYjfesu3psi+18Bp2DGB2Uk5KrjRRiKs4c1LHpg+TCQbmnDts6GqEF4rLS+niqrE2Znxx8h+n3Fg7KXXr67GzIAnFpTDc9E8fGMlFfCbPZADdH1pWq9+V+2Q3LsDIMnZJ92AVL0vW08G8GlyxlJd8duOdM9GNnkbJr0tqSqM87hEp503SUjnVVaSFXDWW47BBu5aZTYuS9VTubjFd9CLUNVMhuXucJtW6IXAwcbbCrmHWly7BJpEqCdc68SfhHsVnbeCgQiHn3XIXdjIbKsy2NMkmH8QpEDFEgRvsacVjOeLBo67dDFEiGKUCkcN2aXxKtAMKrHfRcqo8dk91lzTwqldSqGc1dRuW/1E1Y1N30tx0S5FL8e7hPZdHmyU0dSrWbl/DqP8Ocie4TDWfaU1/t/V3Nz5p3vYf8zvPdsQw9h+zBoA3V588Nf6rJqVP0YsEPLgw/X7fMeG54j+ua602McuZ5vzB6sSD809Lxdw5i8ViqAnlEFz/4ahGq7JMf+Z2m15cWO7A8jlYglusgQLx0gaqEednx48ooFzV/vzIw8tX+vDFt7AvRrfOkrMmBemtToZJ0BHKcSO7k290R11cWSfP+PZRoNglVSyYCrCNJNcSimxfIQQzjaBg2OQIBwIPUMqOqwTHTIQkEwDUTBAJADvIzQ9vmHzpRIBCA5odihUAACLEAEIgpZ1Q1OOY3PAhAM0G6eb3urKiXiirvMTf8QTntP0pmBp993cjuse1MkyQFotdA3wtG0CEM6oF65aMn7MSTOEwOfAFwQe3BPynmIJ8QB0Rgqm0veQ/ypxjIemToHZX0IO+SFYjFeXMArnnnMsxyHWJltA8kEGolnYMADAYEAoBAABAIAAIBCEns4w8OnmQL48biBFw8CAACAUAgAAgEgCQdjJPPmei+XiZnKyQEMhZhZPJtLcwWk93K65RAFlIoJbVIiDVUcbwuJptZXK6uedD3AAQySNRps9kR12f6HoBABsk8kXsAAkkyKU/uXoBAABBIDygTvRcgkPjo7tncwa1yunoRyFBZJnIPQCBJehHlQRZH3GLBiDoCGbpINvLtg/h3X9ku29O87kH7QV8LAWGqSRyRFNqTLKgNPAgAAgFAIAAIBABSSdLP9K4VAI02MmaBzASnUAEhFgACAUAgAAgEALwIpKJKITJObdDHIZ5/00YQi+/PpVOb9hFi5TQTRMK57fkQCAt6IBbL5AXiYFEQgA1eFpOd+Cqt3prmo3xd0nbgka18fWGlJQAAAAAAAAAAAAAAAAAAQAj+EWAAnnBGDvqPRCsAAAAASUVORK5CYII=",LIe="/assets/warehouse_system-BWJ8kGCd.png",$Ie="/assets/accounting_system-DS1yDazM.jpg",AIe="/assets/google-play-badge-BAXiFmDF.png",EIe={class:"mt-8"},TIe={class:"p-5"},PIe={class:"pb-4"},DIe={class:"pb-4"},RIe={class:"p-5"},OIe={key:0,class:"pb-4"},VIe={key:1},UIe={class:"ml-4 mr-4"},FIe={class:"font-medium"},jIe={class:"mt-1 text-slate-500"},HIe={class:"p-5"},NIe={class:"pb-4"},zIe={class:"pb-4"},BIe={class:"pb-4"},qIe={class:"flex gap-2"},WIe={class:"pb-4 w-full"},GIe={class:"pb-4"},ZIe={class:"pb-4"},KIe=c("option",null,"Singapore",-1),XIe=c("option",null,"Indonesia",-1),YIe={class:"pb-4"},QIe={class:"pb-4"},JIe={class:"pb-4"},eLe={class:"p-5"},tLe={class:"pb-4"},aLe=c("option",{value:"side-menu-light-full"},"Menu Light",-1),nLe=c("option",{value:"side-menu-light-mini"},"Mini Menu Light",-1),sLe=c("option",{value:"side-menu-dark-full"},"Menu Dark",-1),oLe=c("option",{value:"side-menu-dark-mini"},"Mini Menu Dark",-1),rLe={class:"pb-4"},iLe={value:"yyyy_MM_dd"},lLe={value:"dd_MMM_yyyy"},cLe={class:"pb-4"},dLe={value:"hh_mm_ss"},uLe={value:"h_m_A"},pLe={class:"p-5"},hLe={class:"pb-4"},fLe={class:"grid grid-cols-3 gap-2 place-items center"},mLe=["onClick"],vLe=["src"],yLe={key:0,class:"grid grid-cols-1 place-items-center"},_Le={key:2},gLe={class:"p-5"},kLe={class:"pb-4"},bLe={class:"pb-4"},wLe={class:"pb-4"},xLe={class:"p-5"},MLe={class:"pb-4"},CLe={class:"p-5"},SLe={class:"pb-4"},ILe={key:0,class:"pb-4"},LLe=["innerHTML"],$Le=c("br",null,null,-1),ALe=c("br",null,null,-1),ELe=c("br",null,null,-1),TLe=["src"],PLe=c("br",null,null,-1),DLe=c("br",null,null,-1),RLe=c("br",null,null,-1),OLe=c("br",null,null,-1),VLe=c("br",null,null,-1),ULe={key:1,class:"pb-4"},FLe=c("br",null,null,-1),jLe=c("br",null,null,-1),HLe=c("br",null,null,-1),NLe={class:"italic"},zLe=c("br",null,null,-1),BLe={key:2,class:"pb-4"},qLe=c("br",null,null,-1),WLe=c("br",null,null,-1),GLe=c("br",null,null,-1),ZLe={class:"italic"},KLe={class:"text-center"},XLe={class:"mb-5"},YLe={class:"flex gap-2 justify-center items-center"},QLe=Ce({__name:"ProfileView",setup(n){const{t:e}=tt(),a=new aa,s=new cn,o=Za(),r=cs(),i=ha(),u=O(!1),h=O([{title:"views.profile.field_groups.user_profile",state:fe.Expanded},{title:"views.profile.field_groups.email_verification",state:fe.Expanded},{title:"views.profile.field_groups.personal_information",state:fe.Expanded},{title:"views.profile.field_groups.account_settings",state:fe.Expanded},{title:"views.profile.field_groups.roles",state:fe.Expanded},{title:"views.profile.field_groups.change_password",state:fe.Expanded},{title:"views.profile.field_groups.api_token",state:fe.Expanded},{title:"views.profile.field_groups.two_factor_authentication",state:fe.Expanded}]),m=O();St("bind[sendVerificationEmailNotification]",ae=>{m.value=ae});const p=O([{images:IIe,state:"disabled",rolekey:"pos"},{images:LIe,state:"disabled",rolekey:"wh"},{images:$Ie,state:"disabled",rolekey:"wh"}]),b=O(!1),x=O(!1),w=O(!1),$=O(!1),D=O({svg:"",url:""}),V=O(""),R=O(""),E=O([]),P=O(""),S=O({confirmed:!1}),C=O(!1),M=O(""),g=O(""),v=O(""),T=s.useUpdateUserProfileForm(),j=s.useUpdatePersonalInfoForm(),B=s.useUpdateAccountSettingsForm(),oe=s.useUpdateUserRolesForm(),be=s.useUpdatePasswordForm(),$e=s.useUpdateTokenForm(),Le=O("hidden"),de=O(""),J=O(null),G=ee(()=>o.getIsLoaded),ce=ee(()=>o.getUserContext);at(async()=>{u.value=!0,G.value&&(Ee(),u.value=!1)});const Ee=()=>{T.setData({name:ce.value.name}),j.setData({first_name:ce.value.profile.first_name,last_name:ce.value.profile.last_name,address:ce.value.profile.address,city:ce.value.profile.city,postal_code:ce.value.profile.postal_code,country:ce.value.profile.country,img_path:ce.value.profile.img_path,tax_id:ce.value.profile.tax_id,ic_num:ce.value.profile.ic_num,status:ce.value.profile.status,remarks:ce.value.profile.remarks}),B.setData({theme:ce.value.settings.theme,date_format:ce.value.settings.date_format,time_format:ce.value.settings.time_format}),p.value.forEach(ae=>{ae.rolekey=="pos"&&pt()||ae.rolekey=="wh"&&ut()||ae.rolekey=="acc"&&ft()?ae.state="checked":ae.state="selectable"})},He=ae=>{h.value[ae].state===fe.Collapsed?h.value[ae].state=fe.Expanded:h.value[ae].state===fe.Expanded&&(h.value[ae].state=fe.Collapsed)},Ke=ae=>{let W=p.value[ae].rolekey;oe.setData({roles:W})},pt=()=>{let ae=!1;for(const W of ce.value.roles)W.display_name=="POS-owner"&&(ae=!0);return ae},ut=()=>{let ae=!1;for(const W of ce.value.roles)W.display_name=="WH-owner"&&(ae=!0);return ae},ft=()=>{let ae=!1;for(const W of ce.value.roles)W.display_name=="ACC-owner"&&(ae=!0);return ae},kt=async()=>{b.value=ce.value.two_factor},Ae=async ae=>{let W=ae.target.checked;b.value=W,await he(),S.value.confirmed?await ie():(M.value="2FA",await Xe())},Xe=async()=>{g.value="",v.value="",C.value=!0},ie=async()=>{b.value?(await s.enableTwoFactor(),await ue()):(await s.disableTwoFactor(),await Ze())},Y=async()=>{let ae=V.value;(await s.TwoFactorAuthenticationConfirmed(ae)).success?(x.value=!1,await Ze(),await N(),await Q()):R.value=e("views.profile.fields.2fa.confirm_2fa_auth_error")},ue=async()=>{await he(),S.value.confirmed?await pe():(M.value="QRCODE",await H())},pe=async()=>{let ae=await s.twoFactorQR();ae.success&&ae.data&&(D.value=ae.data,x.value=!0)},H=async()=>{g.value="",v.value="",C.value=!0},N=async()=>{let ae=await s.twoFactorRecoveryCodes();ae.success&&ae.data&&(E.value=ae.data,w.value=!0)},Q=async()=>{let ae=await s.twoFactorSecretKey();ae.success&&ae.data&&(P.value=ae.data.secretKey,$.value=!0)},he=async()=>{let ae=await s.confirmPasswordStatus();ae.success&&ae.data&&(S.value=ae.data)},Se=async()=>{if((await s.confirmPassword(g.value)).success){switch(M.value){case"2FA":await ie();break;case"QRCODE":await pe();break}await Re()}else v.value=e("views.profile.fields.2fa.confirm_password_error")},Re=async()=>{C.value=!1,g.value="",v.value="",M.value="",await Ze()},Ze=async()=>{let ae=await s.readProfile();o.setUserContext(ae.data)},ze=async()=>{u.value=!0,(await s.sendEmailVerification()).success&&m.value&&m.value.showToast(),u.value=!1},qe=async()=>{let ae=await s.readProfile();ae.success&&o.setUserContext(ae.data)},Be=async()=>{let ae=await a.readUserMenu();r.setMenu(ae.data);let W=await a.readUserApi();i.setZiggy(W.data)},lt=async()=>{u.value=!0,await T.submit().then(async()=>{await qe()}).catch(ae=>{let W=Jt(ae);Mt("danger","",W)}).finally(()=>{u.value=!1})},yt=async()=>{u.value=!0,await j.submit().then(async()=>{await qe()}).catch(ae=>{let W=Jt(ae);Mt("danger","",W)}).finally(()=>{u.value=!1})},it=async()=>{u.value=!0,await B.submit().then(async()=>{await qe()}).catch(ae=>{let W=Jt(ae);Mt("danger","",W)}).finally(()=>{u.value=!1})},Pe=async()=>{u.value=!0,await oe.submit().then(async()=>{await qe(),await Be()}).catch(ae=>{let W=Jt(ae);Mt("danger","",W)}).finally(()=>{u.value=!1})},Ue=async()=>{u.value=!0,await be.submit().then(async()=>{await qe(),be.reset()}).catch(ae=>{let W=Jt(ae);Mt("danger","",W)}).finally(()=>{u.value=!1})},ht=async()=>{u.value=!0,await $e.submit().then(async()=>{await qe(),$e.reset()}).catch(ae=>{let W=Jt(ae);Mt("danger","",W)}).finally(()=>{u.value=!1})},Mt=(ae,W,q)=>{Le.value=ae,de.value=W,J.value=q},Et=()=>{de.value="",J.value=null,Le.value="hidden"},Jt=ae=>{const W={};return W.error=[ae.message],W};return yn(async()=>{G.value&&(Ee(),await kt(),u.value=!1)}),(ae,W)=>{const q=Qt("Notification");return L(),U("div",EIe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)("views.profile.title")),1)]),_:1}),l(dn,{"alert-type":Le.value,title:de.value,"alert-list":J.value,onDismiss:Et},null,8,["alert-type","title","alert-list"]),l(t(ba),{cards:h.value,"show-side-tab":!0,"using-side-tab":!0,onHandleExpandCard:He},{"side-menu-title":f(()=>[A(_(ce.value.name),1)]),"card-items-0":f(()=>[c("div",TIe,[c("form",{id:"updateUserProfileForm",onSubmit:Rt(lt,["prevent"])},[c("div",PIe,[l(t(K),{class:F({"text-danger":t(T).invalid("name")})},{default:f(()=>[A(_(t(e)("views.profile.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(T).name,"onUpdate:modelValue":W[0]||(W[0]=ve=>t(T).name=ve),type:"text",class:F({"border-danger":t(T).invalid("name")}),placeholder:t(e)("views.profile.fields.name"),onChange:W[1]||(W[1]=ve=>t(T).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(T).errors.name},null,8,["messages"])]),c("div",DIe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.email")),1)]),_:1}),l(t(Oe),{modelValue:ce.value.email,"onUpdate:modelValue":W[2]||(W[2]=ve=>ce.value.email=ve),type:"text",placeholder:t(e)("views.profile.fields.email"),disabled:""},null,8,["modelValue","placeholder"])]),c("div",null,[l(t(me),{type:"submit",size:"sm",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(T).validating||t(T).hasErrors},{default:f(()=>[t(T).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(e)("components.buttons.update")),1)],64))]),_:1},8,["disabled"])])],32)])]),"card-items-1":f(()=>[c("div",RIe,[ce.value.email_verified?(L(),U("div",OIe,[c("span",null,_(t(e)("views.profile.tooltip.email_verified")),1)])):(L(),U("div",VIe,[l(t(me),{type:"button",size:"sm",href:"#",variant:"primary",class:"w-42 shadow-md",onClick:ze},{default:f(()=>[A(_(t(e)("components.buttons.send_verification_email")),1)]),_:1})])),l(q,{"ref-key":"sendVerificationEmailNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",UIe,[c("div",FIe,_(t(e)("views.profile.alert.verification_email_sent.title")),1),c("div",jIe,_(t(e)("views.profile.alert.verification_email_sent.content")),1)])]),_:1})])]),"card-items-2":f(()=>[c("div",HIe,[c("form",{id:"updatePersonalInfoForm",onSubmit:Rt(yt,["prevent"])},[c("div",NIe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.first_name")),1)]),_:1}),l(t(Oe),{modelValue:t(j).first_name,"onUpdate:modelValue":W[3]||(W[3]=ve=>t(j).first_name=ve),type:"text",placeholder:t(e)("views.profile.fields.first_name")},null,8,["modelValue","placeholder"])]),c("div",zIe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.last_name")),1)]),_:1}),l(t(Oe),{modelValue:t(j).last_name,"onUpdate:modelValue":W[4]||(W[4]=ve=>t(j).last_name=ve),type:"text",placeholder:t(e)("views.profile.fields.last_name")},null,8,["modelValue","placeholder"])]),c("div",BIe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.address")),1)]),_:1}),l(t(la),{modelValue:t(j).address,"onUpdate:modelValue":W[5]||(W[5]=ve=>t(j).address=ve),rows:"5",placeholder:t(e)("views.profile.fields.address")},null,8,["modelValue","placeholder"])]),c("div",qIe,[c("div",WIe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.city")),1)]),_:1}),l(t(Oe),{modelValue:t(j).city,"onUpdate:modelValue":W[6]||(W[6]=ve=>t(j).city=ve),type:"text",class:"w-full",placeholder:t(e)("views.profile.fields.city")},null,8,["modelValue","placeholder"])]),c("div",GIe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.postal_code")),1)]),_:1}),l(t(Oe),{modelValue:t(j).postal_code,"onUpdate:modelValue":W[7]||(W[7]=ve=>t(j).postal_code=ve),type:"number",placeholder:t(e)("views.profile.fields.postal_code")},null,8,["modelValue","placeholder"])])]),c("div",ZIe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.country")),1)]),_:1}),l(t(Zt),{modelValue:t(j).country,"onUpdate:modelValue":W[8]||(W[8]=ve=>t(j).country=ve),class:F({"border-danger":t(j).invalid("country")}),placeholder:t(e)("views.profile.fields.country"),onChange:W[9]||(W[9]=ve=>{t(j).validate("country"),t(j).submit()})},{default:f(()=>[KIe,XIe]),_:1},8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(j).errors.country},null,8,["messages"])]),c("div",YIe,[l(t(K),{class:F({"text-danger":t(j).invalid("tax_id")})},{default:f(()=>[A(_(t(e)("views.profile.fields.tax_id")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(j).tax_id,"onUpdate:modelValue":W[10]||(W[10]=ve=>t(j).tax_id=ve),type:"text",class:F({"border-danger":t(j).invalid("tax_id")}),placeholder:t(e)("views.profile.fields.tax_id"),onChange:W[11]||(W[11]=ve=>{t(j).validate("tax_id"),t(j).submit()})},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(j).errors.tax_id},null,8,["messages"])]),c("div",QIe,[l(t(K),{class:F({"text-danger":t(j).invalid("ic_num")})},{default:f(()=>[A(_(t(e)("views.profile.fields.ic_num")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(j).ic_num,"onUpdate:modelValue":W[12]||(W[12]=ve=>t(j).ic_num=ve),type:"text",class:F({"border-danger":t(j).invalid("ic_num")}),placeholder:t(e)("views.profile.fields.ic_num"),onChange:W[13]||(W[13]=ve=>t(j).validate("ic_num"))},null,8,["modelValue","class","placeholder"])]),c("div",JIe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(j).remarks,"onUpdate:modelValue":W[14]||(W[14]=ve=>t(j).remarks=ve),rows:"5",placeholder:t(e)("views.profile.fields.remarks")},null,8,["modelValue","placeholder"])]),c("div",null,[l(t(me),{type:"submit",size:"sm",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(T).validating||t(T).hasErrors},{default:f(()=>[t(T).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(e)("components.buttons.update")),1)],64))]),_:1},8,["disabled"])])],32)])]),"card-items-3":f(()=>[c("div",eLe,[c("form",{id:"updateAccountSettingsForm",onSubmit:Rt(it,["prevent"])},[c("div",tLe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.settings.theme")),1)]),_:1}),l(t(Zt),{modelValue:t(B).theme,"onUpdate:modelValue":W[15]||(W[15]=ve=>t(B).theme=ve)},{default:f(()=>[aLe,nLe,sLe,oLe]),_:1},8,["modelValue"])]),c("div",rLe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.settings.date_format")),1)]),_:1}),l(t(Zt),{modelValue:t(B).date_format,"onUpdate:modelValue":W[16]||(W[16]=ve=>t(B).date_format=ve)},{default:f(()=>[c("option",iLe,_(t(Ya)(new Date().toString(),"YYYY-MM-DD")),1),c("option",lLe,_(t(Ya)(new Date().toString(),"DD-MMM-YYYY")),1)]),_:1},8,["modelValue"])]),c("div",cLe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.settings.time_format")),1)]),_:1}),l(t(Zt),{modelValue:t(B).time_format,"onUpdate:modelValue":W[17]||(W[17]=ve=>t(B).time_format=ve)},{default:f(()=>[c("option",dLe,_(t(Ya)(new Date().toString(),"HH:mm:ss")),1),c("option",uLe,_(t(Ya)(new Date().toString(),"H:m A")),1)]),_:1},8,["modelValue"])]),c("div",null,[l(t(me),{type:"submit",size:"sm",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(T).validating||t(T).hasErrors},{default:f(()=>[t(T).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(e)("components.buttons.update")),1)],64))]),_:1},8,["disabled"])])],32)])]),"card-items-4":f(()=>[c("div",pLe,[c("form",{id:"updateUserRolesForm",onSubmit:Rt(Pe,["prevent"])},[c("div",hLe,[c("div",fLe,[(L(!0),U(ke,null,Fe(p.value,(ve,te)=>(L(),U("div",{key:te,class:"flex flex-col items-center"},[c("div",{class:F({"cursor-pointer":ve.state=="selectable","flex flex-col items-center justify-center":!0}),onClick:ne=>Ke(te)},[c("img",{alt:"",src:ve.images,width:"100",height:"100"},null,8,vLe),ve.state=="checked"?(L(),U("div",yLe,[l(t(re),{icon:"Check",class:"text-success"})])):ve.state=="selectable"?(L(),ge(t(me),{key:1,type:"submit",variant:"primary",size:"sm",class:"w-28 shadow-md"},{default:f(()=>[A(_(t(e)("components.buttons.activate")),1)]),_:1})):(L(),U("span",_Le," "))],10,mLe)]))),128))])])],32)])]),"card-items-5":f(()=>[c("div",gLe,[c("form",{id:"updatePasswordForm",onSubmit:Rt(Ue,["prevent"])},[c("div",kLe,[l(t(K),{class:F({"text-danger":t(be).invalid("current_password")})},{default:f(()=>[A(_(t(e)("views.profile.fields.change_password.current_password")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(be).current_password,"onUpdate:modelValue":W[18]||(W[18]=ve=>t(be).current_password=ve),type:"password",class:F({"border-danger":t(be).invalid("current_password")}),placeholder:t(e)("views.profile.fields.change_password.current_password"),onChange:W[19]||(W[19]=ve=>t(be).validate("current_password"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(be).errors.current_password},null,8,["messages"])]),c("div",bLe,[l(t(K),{class:F({"text-danger":t(be).invalid("password")})},{default:f(()=>[A(_(t(e)("views.profile.fields.change_password.password")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(be).password,"onUpdate:modelValue":W[20]||(W[20]=ve=>t(be).password=ve),type:"password",class:F({"border-danger":t(be).invalid("password")}),placeholder:t(e)("views.profile.fields.change_password.password")},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(be).errors.password},null,8,["messages"])]),c("div",wLe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.change_password.password_confirmation")),1)]),_:1}),l(t(Oe),{modelValue:t(be).password_confirmation,"onUpdate:modelValue":W[21]||(W[21]=ve=>t(be).password_confirmation=ve),type:"password",placeholder:t(e)("views.profile.fields.change_password.password_confirmation")},null,8,["modelValue","placeholder"])]),c("div",null,[l(t(me),{type:"submit",size:"sm",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(T).validating||t(T).hasErrors},{default:f(()=>[t(T).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(e)("components.buttons.update")),1)],64))]),_:1},8,["disabled"])])],32)])]),"card-items-6":f(()=>[c("div",xLe,[c("form",{id:"updateTokenForm",onSubmit:Rt(ht,["prevent"])},[c("div",MLe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.api_token.total_token_generated"))+" : "+_(ce.value.personal_access_tokens),1)]),_:1})]),rs(c("input",{id:"resetToken",type:"hidden","onUpdate:modelValue":W[22]||(W[22]=ve=>t($e).reset_tokens=ve)},null,512),[[Lo,t($e).reset_tokens]]),c("div",null,[l(t(me),{type:"submit",size:"sm",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t($e).validating||t($e).hasErrors},{default:f(()=>[t($e).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(e)("components.buttons.reset")),1)],64))]),_:1},8,["disabled"])])],32)])]),"card-items-7":f(()=>[c("div",CLe,[c("div",SLe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.2fa.status")),1)]),_:1}),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{type:"checkbox",onChange:Ae,modelValue:b.value,"onUpdate:modelValue":W[23]||(W[23]=ve=>b.value=ve)},null,8,["modelValue"])]),_:1})]),x.value?(L(),U("div",ILe,[c("img",{innerHTML:D.value.svg,alt:"QR Code"},null,8,LLe),$Le,A(" "+_(t(e)("views.profile.fields.2fa.qr-code_description_1"))+" ",1),ALe,A(" "+_(t(e)("views.profile.fields.2fa.qr-code_description_2"))+" ",1),ELe,c("img",{src:t(AIe),alt:"Google Play",width:"120",height:"120"},null,8,TLe),PLe,A(" "+_(t(e)("views.profile.fields.2fa.confirm_2fa_auth_description_1"))+" ",1),DLe,A(" "+_(t(e)("views.profile.fields.2fa.confirm_2fa_auth_description_2"))+" ",1),RLe,OLe,l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.2fa.confirm_2fa_auth")),1)]),_:1}),l(t(Oe),{modelValue:V.value,"onUpdate:modelValue":W[24]||(W[24]=ve=>V.value=ve)},null,8,["modelValue"]),R.value!=""?(L(),ge(t(_e),{key:0,messages:R.value},null,8,["messages"])):Me("",!0),VLe,l(t(me),{type:"button",variant:"primary",onClick:W[25]||(W[25]=()=>{Y()}),class:"mt-2 w-24"},{default:f(()=>[A(_(t(e)("components.buttons.submit")),1)]),_:1})])):Me("",!0),w.value?(L(),U("div",ULe,[A(_(t(e)("views.profile.fields.2fa.recovery-codes_description_1"))+" ",1),FLe,A(" "+_(t(e)("views.profile.fields.2fa.recovery-codes_description_2"))+" ",1),jLe,HLe,l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.2fa.recovery-codes")),1)]),_:1}),c("div",null,[(L(!0),U(ke,null,Fe(E.value,(ve,te)=>(L(),U(ke,null,[c("span",NLe,_(te+1)+". "+_(ve),1),zLe],64))),256))])])):Me("",!0),$.value?(L(),U("div",BLe,[A(_(t(e)("views.profile.fields.2fa.secret-key_description_1"))+" ",1),qLe,A(" "+_(t(e)("views.profile.fields.2fa.secret-key_description_2"))+" ",1),WLe,GLe,l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.2fa.secret-key")),1)]),_:1}),c("div",ZLe,_(P.value),1)])):Me("",!0),l(t($t),{staticBackdrop:"",open:C.value,onClose:W[29]||(W[29]=()=>{Re()})},{default:f(()=>[l(t($t).Panel,{class:"px-5 py-10"},{default:f(()=>[c("div",KLe,[c("div",XLe,[l(t(K),null,{default:f(()=>[A(_(t(e)("views.profile.fields.2fa.confirm_password")),1)]),_:1}),l(t(Oe),{modelValue:g.value,"onUpdate:modelValue":W[26]||(W[26]=ve=>g.value=ve),type:"password",placeholder:t(e)("views.profile.fields.2fa.confirm_password")},null,8,["modelValue","placeholder"]),v.value!=""?(L(),ge(t(_e),{key:0,messages:v.value},null,8,["messages"])):Me("",!0)]),c("div",YLe,[l(t(me),{type:"button",variant:"primary",onClick:W[27]||(W[27]=()=>{Se()}),class:"w-24"},{default:f(()=>[A(_(t(e)("components.buttons.submit")),1)]),_:1}),l(t(me),{type:"button",variant:"primary",onClick:W[28]||(W[28]=()=>{Re()}),class:"w-24"},{default:f(()=>[A(_(t(e)("components.buttons.cancel")),1)]),_:1})])])]),_:1})]),_:1},8,["open"])])]),_:1},8,["cards"])]),_:1},8,["visible"])])}}}),JLe=Ce({__name:"DevTool",setup(n){return(e,a)=>(L(),U("div"))}}),e9e={},t9e={class:"flex w-full mr-0 sm:w-auto sm:mr-auto"};function a9e(n,e){return L(),U("nav",null,[c("ul",t9e,[Lt(n.$slots,"default")])])}const n9e=Dc(e9e,[["render",a9e]]),s9e={class:"flex-1 sm:flex-initial"},o9e={inheritAttrs:!1},r9e=Ce({...o9e,__name:"Link",props:{as:{default:"a"},active:{type:Boolean,default:!1}},setup(n){const e=n,a=An(e,"active"),s=Ot(),o=ee(()=>At(["min-w-0 sm:min-w-[40px] shadow-none font-normal flex items-center justify-center border-transparent text-slate-800 sm:mr-2 dark:text-slate-300 px-1 sm:px-3",a.value&&"!box font-medium dark:bg-darkmode-400",typeof s.class=="string"&&s.class]));return(r,i)=>(L(),U("li",s9e,[l(t(me),Ft({as:e.as,class:o.value},t(Pt).omit(t(s),"class")),{default:f(()=>[Lt(r.$slots,"default")]),_:3},16,["as","class"])]))}}),go=Object.assign({},n9e,{Link:r9e}),i9e=c("p",null,"Pagination Test",-1),l9e=c("br",null,null,-1),c9e=c("p",null,"FormInput Test",-1),d9e=c("br",null,null,-1),u9e=Ce({__name:"PlayOne",setup(n){const e=O(!1),a=O(!0),s=O(1),o=()=>{console.log("changeInputTriggered"+Date())};return(r,i)=>(L(),U("div",null,[c("div",null,[i9e,l(t(go),null,{default:f(()=>[l(t(go).Link,{active:e.value,onClick:i[0]||(i[0]=u=>e.value=!e.value)},{default:f(()=>[A("test 1")]),_:1},8,["active"]),l(t(go).Link,{active:a.value,onClick:i[1]||(i[1]=u=>a.value=!a.value)},{default:f(()=>[A("test 2")]),_:1},8,["active"])]),_:1}),l(t(me),{variant:"primary",onClick:i[2]||(i[2]=u=>e.value=!0)},{default:f(()=>[A("Set Test 1 as Active")]),_:1})]),l9e,c("div",null,[c9e,l(t(Oe),{modelValue:s.value,"onUpdate:modelValue":i[3]||(i[3]=u=>s.value=u),type:"text",onChange:o},null,8,["modelValue"]),l(t(me),{variant:"primary",onClick:i[4]||(i[4]=u=>s.value=2)},{default:f(()=>[A("Change Input Value To 2")]),_:1})]),d9e]))}}),p9e={};function h9e(n,e){return null}const f9e=Dc(p9e,[["render",h9e]]),m9e={class:"mt-8"},v9e={key:0},y9e={key:1},_9e={key:2},g9e={key:3},k9e={key:4},b9e={key:5},w9e=c("br",null,null,-1),x9e=c("br",null,null,-1),M9e=Ce({__name:"ErrorView",setup(n){const{t:e}=tt(),a=Sa(),s=O(0);at(()=>{s.value=parseInt(a.params.code)});const o=()=>{window.history.go(-1)};return(r,i)=>(L(),U("div",m9e,[l(t(an),null,{title:f(()=>[A(_(t(e)("views.error.title")),1)]),_:1}),s.value==401?(L(),U("div",v9e,_(t(e)("views.error.code.401")),1)):s.value==403?(L(),U("div",y9e,_(t(e)("views.error.code.403")),1)):s.value==500?(L(),U("div",_9e,_(t(e)("views.error.code.500")),1)):s.value==500?(L(),U("div",g9e,_(t(e)("views.error.code.500")),1)):s.value==1e4?(L(),U("div",k9e,_(t(e)("views.error.code.10000")),1)):(L(),U("div",b9e)),w9e,x9e,l(t(me),{variant:"soft-primary",size:"sm",onClick:o},{default:f(()=>[A(_(t(e)("components.buttons.back")),1)]),_:1})]))}}),C9e={};function S9e(n,e){return L(),U("div")}const GF=Dc(C9e,[["render",S9e]]);var xe=(n=>(n.INDEX="INDEX",n.LIST="LIST",n.FORM_CREATE="FORM_CREATE",n.FORM_EDIT="FORM_EDIT",n))(xe||{}),TB={exports:{}};/*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * Copyright (C) 2018 Varun A P
+ */(function(n){(function(e,a){n.exports?n.exports=a():e.Toastify=a()})(Ur,function(e){var a=function(i){return new a.lib.init(i)},s="1.12.0";a.defaults={oldestFirst:!0,text:"Toastify is awesome!",node:void 0,duration:3e3,selector:void 0,callback:function(){},destination:void 0,newWindow:!1,close:!1,gravity:"toastify-top",positionLeft:!1,position:"",backgroundColor:"",avatar:"",className:"",stopOnFocus:!0,onClick:function(){},offset:{x:0,y:0},escapeMarkup:!0,ariaLive:"polite",style:{background:""}},a.lib=a.prototype={toastify:s,constructor:a,init:function(i){return i||(i={}),this.options={},this.toastElement=null,this.options.text=i.text||a.defaults.text,this.options.node=i.node||a.defaults.node,this.options.duration=i.duration===0?0:i.duration||a.defaults.duration,this.options.selector=i.selector||a.defaults.selector,this.options.callback=i.callback||a.defaults.callback,this.options.destination=i.destination||a.defaults.destination,this.options.newWindow=i.newWindow||a.defaults.newWindow,this.options.close=i.close||a.defaults.close,this.options.gravity=i.gravity==="bottom"?"toastify-bottom":a.defaults.gravity,this.options.positionLeft=i.positionLeft||a.defaults.positionLeft,this.options.position=i.position||a.defaults.position,this.options.backgroundColor=i.backgroundColor||a.defaults.backgroundColor,this.options.avatar=i.avatar||a.defaults.avatar,this.options.className=i.className||a.defaults.className,this.options.stopOnFocus=i.stopOnFocus===void 0?a.defaults.stopOnFocus:i.stopOnFocus,this.options.onClick=i.onClick||a.defaults.onClick,this.options.offset=i.offset||a.defaults.offset,this.options.escapeMarkup=i.escapeMarkup!==void 0?i.escapeMarkup:a.defaults.escapeMarkup,this.options.ariaLive=i.ariaLive||a.defaults.ariaLive,this.options.style=i.style||a.defaults.style,i.backgroundColor&&(this.options.style.background=i.backgroundColor),this},buildToast:function(){if(!this.options)throw"Toastify is not initialized";var i=document.createElement("div");i.className="toastify on "+this.options.className,this.options.position?i.className+=" toastify-"+this.options.position:this.options.positionLeft===!0?(i.className+=" toastify-left",console.warn("Property `positionLeft` will be depreciated in further versions. Please use `position` instead.")):i.className+=" toastify-right",i.className+=" "+this.options.gravity,this.options.backgroundColor&&console.warn('DEPRECATION NOTICE: "backgroundColor" is being deprecated. Please use the "style.background" property.');for(var u in this.options.style)i.style[u]=this.options.style[u];if(this.options.ariaLive&&i.setAttribute("aria-live",this.options.ariaLive),this.options.node&&this.options.node.nodeType===Node.ELEMENT_NODE)i.appendChild(this.options.node);else if(this.options.escapeMarkup?i.innerText=this.options.text:i.innerHTML=this.options.text,this.options.avatar!==""){var h=document.createElement("img");h.src=this.options.avatar,h.className="toastify-avatar",this.options.position=="left"||this.options.positionLeft===!0?i.appendChild(h):i.insertAdjacentElement("afterbegin",h)}if(this.options.close===!0){var m=document.createElement("button");m.type="button",m.setAttribute("aria-label","Close"),m.className="toast-close",m.innerHTML="&#10006;",m.addEventListener("click",(function(V){V.stopPropagation(),this.removeElement(this.toastElement),window.clearTimeout(this.toastElement.timeOutValue)}).bind(this));var p=window.innerWidth>0?window.innerWidth:screen.width;(this.options.position=="left"||this.options.positionLeft===!0)&&p>360?i.insertAdjacentElement("afterbegin",m):i.appendChild(m)}if(this.options.stopOnFocus&&this.options.duration>0){var b=this;i.addEventListener("mouseover",function(V){window.clearTimeout(i.timeOutValue)}),i.addEventListener("mouseleave",function(){i.timeOutValue=window.setTimeout(function(){b.removeElement(i)},b.options.duration)})}if(typeof this.options.destination<"u"&&i.addEventListener("click",(function(V){V.stopPropagation(),this.options.newWindow===!0?window.open(this.options.destination,"_blank"):window.location=this.options.destination}).bind(this)),typeof this.options.onClick=="function"&&typeof this.options.destination>"u"&&i.addEventListener("click",(function(V){V.stopPropagation(),this.options.onClick()}).bind(this)),typeof this.options.offset=="object"){var x=o("x",this.options),w=o("y",this.options),$=this.options.position=="left"?x:"-"+x,D=this.options.gravity=="toastify-top"?w:"-"+w;i.style.transform="translate("+$+","+D+")"}return i},showToast:function(){this.toastElement=this.buildToast();var i;if(typeof this.options.selector=="string"?i=document.getElementById(this.options.selector):this.options.selector instanceof HTMLElement||typeof ShadowRoot<"u"&&this.options.selector instanceof ShadowRoot?i=this.options.selector:i=document.body,!i)throw"Root element is not defined";var u=a.defaults.oldestFirst?i.firstChild:i.lastChild;return i.insertBefore(this.toastElement,u),a.reposition(),this.options.duration>0&&(this.toastElement.timeOutValue=window.setTimeout((function(){this.removeElement(this.toastElement)}).bind(this),this.options.duration)),this},hideToast:function(){this.toastElement.timeOutValue&&clearTimeout(this.toastElement.timeOutValue),this.removeElement(this.toastElement)},removeElement:function(i){i.className=i.className.replace(" on",""),window.setTimeout((function(){this.options.node&&this.options.node.parentNode&&this.options.node.parentNode.removeChild(this.options.node),i.parentNode&&i.parentNode.removeChild(i),this.options.callback.call(i),a.reposition()}).bind(this),400)}},a.reposition=function(){for(var i={top:15,bottom:15},u={top:15,bottom:15},h={top:15,bottom:15},m=document.getElementsByClassName("toastify"),p,b=0;b<m.length;b++){r(m[b],"toastify-top")===!0?p="toastify-top":p="toastify-bottom";var x=m[b].offsetHeight;p=p.substr(9,p.length-1);var w=15,$=window.innerWidth>0?window.innerWidth:screen.width;$<=360?(m[b].style[p]=h[p]+"px",h[p]+=x+w):r(m[b],"toastify-left")===!0?(m[b].style[p]=i[p]+"px",i[p]+=x+w):(m[b].style[p]=u[p]+"px",u[p]+=x+w)}return this};function o(i,u){return u.offset[i]?isNaN(u.offset[i])?u.offset[i]:u.offset[i]+"px":"0px"}function r(i,u){return!i||typeof u!="string"?!1:!!(i.className&&i.className.trim().split(/\s+/gi).indexOf(u)>-1)}return a.lib.init.prototype=a.lib,a})})(TB);var I9e=TB.exports;const L9e=cu(I9e),eT="_"+Math.random().toString(36).substr(2,9),$9e=(n,e)=>{n.showToast=()=>{const a=n.cloneNode(!0);a.classList.remove("hidden"),a.classList.add(eT),a.toastify=L9e({duration:-1,newWindow:!0,close:!0,gravity:"top",position:"right",stopOnFocus:!0,...e.options,node:a}),a.toastify.showToast(),a.querySelectorAll("[data-dismiss='notification']").forEach(function(s){s.addEventListener("click",function(){a.toastify.hideToast()})}),n.hideToast=()=>{document.querySelectorAll(`.${eT}`).forEach(function(s){s.toastify.hideToast()})}}},A9e=n=>{const e=document.querySelectorAll(`.${eT}`)[0];e&&(e.innerHTML=n.innerHTML)},fn=Ce({__name:"Notification",props:{options:{},refKey:{}},setup(n){const e=n,a=O(),s=r=>{if(e.refKey){const i=xt(`bind[${e.refKey}]`);i&&i(r)}},o={mounted(r){$9e(r,e)},updated(r){A9e(r)}};return at(()=>{a.value&&s(a.value)}),(r,i)=>rs((L(),U("div",{class:"hidden py-5 pl-5 bg-white border rounded-lg shadow-xl pr-14 border-slate-200/60 dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600",ref_key:"toastifyRef",ref:a},[Lt(r.$slots,"default")])),[[o]])}}),E9e={class:"mt-8"},T9e={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},P9e={class:"ml-4 mr-4"},D9e={class:"font-medium"},R9e={class:"mt-1 text-slate-500"},O9e=Ce({__name:"UserIndex",setup(n){const{t:e}=tt(),a=ct(),s=new Dt,o=O(xe.INDEX),r=O(!1),i=O("views.user.page_title"),u=O("hidden"),h=O(""),m=O(null),p=O(),b=O(""),x=O("");St("bind[userNotification]",C=>{p.value=C});const w=()=>{S(),o.value=xe.FORM_CREATE,a.push({name:"side-menu-administrator-user-create"})},$=async()=>{S(),R(o.value),o.value=xe.LIST,a.push({name:"side-menu-administrator-user-list"})},D=C=>{r.value=C},V=C=>{switch(o.value=C,C){case xe.FORM_CREATE:i.value="views.user.actions.create";break;case xe.FORM_EDIT:i.value="views.user.actions.edit";break;case xe.INDEX:case xe.LIST:default:i.value="views.user.page_title";break}},R=C=>{switch(C){case xe.FORM_CREATE:s.removeLastEntity("USER_CREATE");break;case xe.FORM_EDIT:s.removeLastEntity("USER_EDIT");break}},E=C=>{u.value=C.alertType,h.value=C.title,m.value=C.alertList},P=C=>{b.value=C.title,x.value=C.content,p.value&&p.value.showToast()},S=()=>{h.value="",m.value=null,u.value="hidden"};return(C,M)=>{const g=Qt("RouterView");return L(),U("div",E9e,[l(t(da),{visible:r.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(i.value)),1)]),optional:f(()=>[c("div",T9e,[o.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:w},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:$},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":u.value,title:h.value,"alert-list":m.value,onDismiss:S},null,8,["alert-type","title","alert-list"]),l(g,{onLoadingState:D,onModeState:V,onShowAlertplaceholder:E,onShowNotification:P})]),_:1},8,["visible"]),l(fn,{"ref-key":"userNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",P9e,[c("div",D9e,_(b.value),1),c("div",R9e,_(x.value),1)])]),_:1})])}}}),V9e={key:0,class:"intro-y box p-5 mt-5"},U9e={class:"grid justify-items-end"},F9e={class:"flex flex-row gap-2"},j9e={key:0,class:"relative w-56 text-slate-500"},H9e={key:0,class:"mt-2 grid justify-items-end"},N9e={class:"flex gap-2"},z9e={class:"overflow-x-auto mb-4"},B9e={class:"flex flex-wrap justify-center intro-y sm:flex-row sm:flex-nowrap"},q9e={key:0,class:"pb-1 border-b"},W9e={key:1,class:"flex"},G9e={class:"w-1/2 flex items-center justify-start"},Z9e={class:"w-1/2 flex justify-end"},K9e=c("option",{value:"10"},"10",-1),X9e=c("option",{value:"25"},"25",-1),Y9e=c("option",{value:"50"},"50",-1),Q9e=c("option",{value:"100"},"100",-1),mn=Ce({__name:"DataList",props:{visible:{type:Boolean,default:!0},canPrint:{type:Boolean,default:!1},canExport:{type:Boolean,default:!1},enableSearch:{type:Boolean,default:!1},pagination:{default:()=>({current_page:0,from:null,last_page:0,path:"",per_page:10,to:null,total:0})}},emits:["dataListChanged","print","export"],setup(n,{emit:e}){const{t:a}=tt(),s=n,o=e,r=An(s,"visible"),i=An(s,"canPrint"),u=An(s,"canExport"),h=An(s,"enableSearch"),m=O(!1),p=O(""),b=O(10),x=ee(()=>s.pagination==null||s.pagination.from==null||s.pagination.to==null||s.pagination.total==null?"":a("components.data-list.showing")+" "+s.pagination.from.toString()+" "+a("components.data-list.to")+" "+s.pagination.to.toString()+" "+a("components.data-list.of")+" "+s.pagination.total.toString()+" "+a("components.data-list.entries")),w=ee(()=>s.pagination==null?[]:$(s.pagination.current_page,s.pagination.total,s.pagination.per_page)),$=(j,B,oe,be=7)=>{if(j===0||B===0||oe===0)return[];const $e=Math.ceil(B/oe),Le=[];if($e<=be)for(let de=1;de<=$e;de++)Le.push(de);else if(j<=Math.floor(be/2)+1){for(let de=1;de<=be-2;de++)Le.push(de);Le.push(-1),Le.push($e)}else if(j>=$e-Math.floor(be/2)){Le.push(1),Le.push(-1);for(let de=$e-(be-2);de<=$e;de++)Le.push(de)}else{Le.push(1),Le.push(-1);const de=j-Math.floor(be/2)+1,J=j+Math.floor(be/2)-1;for(let G=de;G<=J;G++)Le.push(G);Le.push(-1),Le.push($e)}return Le},D=(j,B,oe)=>({search:{text:j},pagination:{page:B,per_page:oe}}),V=()=>{s.pagination!=null&&o("dataListChanged",D(p.value,1,s.pagination.per_page))},R=()=>{s.pagination!=null&&o("dataListChanged",D(p.value,s.pagination.current_page,s.pagination.per_page))},E=()=>{o("print")},P=j=>{if(j.length==0){m.value=!m.value;return}o("export",j)},S=()=>{s.pagination!=null&&o("dataListChanged",D(p.value,1,s.pagination.per_page))},C=()=>{s.pagination!=null&&s.pagination.current_page>1&&o("dataListChanged",D(p.value,s.pagination.current_page-1,s.pagination.per_page))},M=j=>{s.pagination!=null&&o("dataListChanged",D(p.value,j,s.pagination.per_page))},g=()=>{s.pagination!=null&&s.pagination.current_page!=s.pagination.last_page&&o("dataListChanged",D(p.value,s.pagination.current_page+1,s.pagination.per_page))},v=()=>{s.pagination!=null&&o("dataListChanged",D(p.value,s.pagination.last_page,s.pagination.per_page))},T=()=>{s.pagination!=null&&o("dataListChanged",D(p.value,1,b.value))};return dt(p,ma.debounce(()=>{V()},500)),dt(b,(j,B)=>{j!=B&&T()}),(j,B)=>r.value?(L(),U("div",V9e,[c("div",U9e,[c("div",F9e,[h.value?(L(),U("div",j9e,[l(t(Oe),{modelValue:p.value,"onUpdate:modelValue":B[0]||(B[0]=oe=>p.value=oe),type:"text",class:"w-56 pr-10",placeholder:"Search..."},null,8,["modelValue"]),l(t(re),{icon:"Search",class:"absolute inset-y-0 right-0 w-4 h-4 my-auto mr-3"})])):Me("",!0),l(t(me),{onClick:R},{default:f(()=>[l(t(re),{icon:"RefreshCw",class:"w-4 h-4"})]),_:1}),i.value?(L(),ge(t(me),{key:1,onClick:E},{default:f(()=>[l(t(re),{icon:"Printer",class:"w-4 h-4"})]),_:1})):Me("",!0),u.value?(L(),ge(t(me),{key:2,onClick:B[1]||(B[1]=oe=>P(""))},{default:f(()=>[l(t(re),{icon:"FileText",class:"w-4 h-4"})]),_:1})):Me("",!0)])]),m.value?(L(),U("div",H9e,[c("div",N9e,[l(t(me),{size:"sm",onClick:B[2]||(B[2]=oe=>P("PDF"))},{default:f(()=>[A(_(t(a)("components.data-list.export_to_pdf")),1)]),_:1}),l(t(me),{size:"sm",onClick:B[3]||(B[3]=oe=>P("XLS"))},{default:f(()=>[A(_(t(a)("components.data-list.export_to_excel")),1)]),_:1})])])):Me("",!0),c("div",z9e,[Lt(j.$slots,"content")]),c("div",B9e,[w.value.length>0?(L(),U("div",q9e,[l(t(go),{class:"w-full sm:w-auto sm:mr-auto"},{default:f(()=>[l(t(go).Link,{onClick:S},{default:f(()=>[l(t(re),{icon:"ChevronsLeft",class:"w-4 h-4"})]),_:1}),l(t(go).Link,{onClick:C},{default:f(()=>[l(t(re),{icon:"ChevronLeft",class:"w-4 h-4"})]),_:1}),(L(!0),U(ke,null,Fe(w.value,oe=>(L(),U(ke,{key:oe},[oe>0?(L(),ge(t(go).Link,{key:0,active:j.pagination?oe==j.pagination.current_page:!1,onClick:be=>M(oe)},{default:f(()=>[A(_(oe),1)]),_:2},1032,["active","onClick"])):(L(),ge(t(go).Text,{key:1},{default:f(()=>[A(_("..."),1)]),_:1}))],64))),128)),l(t(go).Link,{onClick:g},{default:f(()=>[l(t(re),{icon:"ChevronRight",class:"w-4 h-4"})]),_:1}),l(t(go).Link,{onClick:v},{default:f(()=>[l(t(re),{icon:"ChevronsRight",class:"w-4 h-4"})]),_:1})]),_:1})])):Me("",!0)]),w.value.length>0?(L(),U("div",W9e,[c("div",G9e,_(x.value),1),c("div",Z9e,[l(t(Zt),{modelValue:b.value,"onUpdate:modelValue":B[4]||(B[4]=oe=>b.value=oe),class:"w-20 mt-3 sm:mt-0"},{default:f(()=>[K9e,X9e,Y9e,Q9e]),_:1},8,["modelValue"])])])):Me("",!0)])):Me("",!0)}}),J9e={inheritAttrs:!1},e$e=Ce({...J9e,__name:"Table",props:{dark:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1},hover:{type:Boolean,default:!1},striped:{type:Boolean,default:!1},sm:{type:Boolean,default:!1}},setup(n){const{dark:e,bordered:a,hover:s,striped:o,sm:r}=n,i=Ot(),u=ee(()=>At(["w-full text-left",e&&"bg-dark text-white dark:bg-black/30",typeof i.class=="string"&&i.class]));return St("table",{dark:e,bordered:a,hover:s,striped:o,sm:r}),(h,m)=>(L(),U("table",Ft({class:u.value},t(Pt).omit(t(i),"class")),[Lt(h.$slots,"default")],16))}}),t$e={inheritAttrs:!1},a$e=Ce({...t$e,__name:"Thead",props:{variant:{default:"default"}},setup(n){const e=n,a=Ot(),s=ee(()=>At([e.variant==="light"&&"bg-slate-200/60 dark:bg-slate-200",e.variant==="dark"&&"bg-dark text-white dark:bg-black/30",typeof a.class=="string"&&a.class]));return St("thead",{variant:e.variant}),(o,r)=>(L(),U("thead",Ft({class:s.value},t(Pt).omit(t(a),"class")),[Lt(o.$slots,"default")],16))}}),n$e={};function s$e(n,e){return L(),U("tbody",null,[Lt(n.$slots,"default")])}const o$e=Dc(n$e,[["render",s$e]]),r$e={inheritAttrs:!1},i$e=Ce({...r$e,__name:"Tr",setup(n){const e=xt("table",{dark:!1,bordered:!1,hover:!1,striped:!1,sm:!1}),a=Ot(),s=ee(()=>At([(e==null?void 0:e.hover)&&"[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50",(e==null?void 0:e.striped)&&"[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),U("tr",Ft({class:s.value},t(Pt).omit(t(a),"class")),[Lt(o.$slots,"default")],16))}}),l$e={inheritAttrs:!1},c$e=Ce({...l$e,__name:"Th",setup(n){const e=xt("table",{dark:!1,bordered:!1,hover:!1,striped:!1,sm:!1}),a=xt("thead",{variant:"default"}),s=Ot(),o=ee(()=>At(["font-medium px-5 py-3 border-b-2 dark:border-darkmode-300",(a==null?void 0:a.variant)==="light"&&"border-b-0 text-slate-700",(a==null?void 0:a.variant)==="dark"&&"border-b-0",(e==null?void 0:e.dark)&&"border-slate-600 dark:border-darkmode-300",(e==null?void 0:e.bordered)&&"border-l border-r border-t",(e==null?void 0:e.sm)&&"px-4 py-2",typeof s.class=="string"&&s.class]));return(r,i)=>(L(),U("th",Ft({class:o.value},t(Pt).omit(t(s),"class")),[Lt(r.$slots,"default")],16))}}),d$e={inheritAttrs:!1},u$e=Ce({...d$e,__name:"Td",setup(n){const e=xt("table",{dark:!1,bordered:!1,hover:!1,striped:!1,sm:!1}),a=Ot(),s=ee(()=>At(["px-5 py-3 border-b dark:border-darkmode-300",(e==null?void 0:e.dark)&&"border-slate-600 dark:border-darkmode-300",(e==null?void 0:e.bordered)&&"border-l border-r border-t",(e==null?void 0:e.sm)&&"px-4 py-2",typeof a.class=="string"&&a.class]));return(o,r)=>(L(),U("td",Ft({class:s.value},t(Pt).omit(t(a),"class")),[Lt(o.$slots,"default")],16))}}),X=Object.assign({},e$e,{Thead:a$e,Tbody:o$e,Tr:i$e,Th:c$e,Td:u$e});class IP{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useUserCreateForm(){const e=je("api.post.db.admin.user.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{name:"",email:"",first_name:"",last_name:"",address:"",city:"",postal_code:"",country:"",img_path:"",tax_id:0,ic_num:0,status:"",remarks:"",roles:[],theme:"side-menu-light-full",date_format:"dd_MMM_yyyy",time_format:"hh_mm_ss"})}async readAny(e){const a={success:!1};try{const s={};e.search&&(s.search=e.search),s.refresh=e.refresh,s.paginate=e.paginate,e.page&&(s.page=e.page),e.per_page&&(s.per_page=e.per_page);const o=je("api.get.db.admin.user.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r!=null&&(a.success=!0,a.data=r.data),a}catch(s){if(s instanceof Error&&s.message.includes("Ziggy error"))return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message);if(ot(s))if(s.response)switch(s.response.status){case vt.UnprocessableEntity:return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(s);default:return this.errorHandlerService.generateAxiosErrorServiceResponse(s)}else return a;else return a}}async read(e){const a={success:!1};try{const s=je("api.get.db.admin.user.read",{user:e},!1,this.ziggyRoute),o=await nt.get(s);return a.success=!0,a.data=o.data.data,a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useUserEditForm(e){const a=je("api.post.db.admin.user.edit",e,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{name:"",email:"",first_name:"",last_name:"",address:"",city:"",postal_code:"",country:"",img_path:"",tax_id:0,ic_num:0,status:"",remarks:"",roles:[],theme:"side-menu-light-full",date_format:"dd_MMM_yyyy",time_format:"hh_mm_ss",tokens_reset:!1,reset_password:!1,reset_2fa:!1})}async getTokensCount(e){const a={success:!1};try{const s=je("api.get.db.admin.user.read.tokens.count",{user:e},!1,this.ziggyRoute),o=await nt.get(s);return a.success=!0,a.data=o.data.data,a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const p$e={class:"flex justify-center italic"},h$e=["onClick"],f$e={class:"flex justify-end gap-1"},m$e={class:"flex flex-row"},v$e={class:"ml-5 w-48 text-right pr-5"},y$e={class:"flex-1"},_$e={class:"flex flex-row"},g$e={class:"ml-5 w-48 text-right pr-5"},k$e={class:"flex-1"},b$e={class:"flex flex-row"},w$e={class:"ml-5 w-48 text-right pr-5"},x$e={class:"flex-1"},M$e={class:"flex flex-row"},C$e={class:"ml-5 w-48 text-right pr-5"},S$e={class:"flex-1"},I$e={class:"flex flex-row"},L$e={class:"ml-5 w-48 text-right pr-5"},$$e={class:"flex-1"},A$e={class:"flex flex-row"},E$e={class:"ml-5 w-48 text-right pr-5"},T$e={class:"flex-1"},P$e={class:"flex flex-row"},D$e={class:"ml-5 w-48 text-right pr-5"},R$e={class:"flex-1"},O$e={class:"flex flex-row"},V$e={class:"ml-5 w-48 text-right pr-5"},U$e={class:"flex-1"},F$e={class:"flex flex-row"},j$e={class:"ml-5 w-48 text-right pr-5"},H$e={class:"flex-1"},N$e={class:"flex flex-row"},z$e={class:"ml-5 w-48 text-right pr-5"},B$e={class:"flex-1"},q$e={class:"flex flex-row"},W$e={class:"ml-5 w-48 text-right pr-5"},G$e={class:"flex-1"},Z$e={class:"flex flex-row"},K$e={class:"ml-5 w-48 text-right pr-5"},X$e={class:"flex-1"},Y$e={class:"flex flex-row"},Q$e={class:"ml-5 w-48 text-right pr-5"},J$e={class:"flex-1"},eAe={key:0},tAe={key:1},aAe={class:"flex flex-row"},nAe={class:"ml-5 w-48 text-right pr-5"},sAe={class:"flex-1"},oAe=Ce({__name:"UserList",emits:["mode-state","loading-state","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new IP,r=e,i=O(null),u=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}});at(async()=>{r("mode-state",xe.LIST),await h("",!0,!0,1,10)});const h=async($,D,V,R,E)=>{r("loading-state",!0);const P={search:$,refresh:D,paginate:V,page:R,per_page:E};let S=await o.readAny(P);S.success&&S.data?u.value=S.data:w("danger","",S.errors),r("loading-state",!1)},m=async $=>{await h($.search.text,!1,!0,$.pagination.page,$.pagination.per_page)},p=$=>{i.value===$?i.value=null:i.value=$},b=$=>{if(!u.value)return;let D=u.value.data[$].ulid;s.push({name:"side-menu-administrator-user-edit",params:{ulid:D}})},x=$=>$.length==0?"":$.map(D=>D.display_name).join(", "),w=($,D,V)=>{r("show-alertplaceholder",{alertType:$,title:D,alertList:V})};return($,D)=>(L(),ge(t(mn),{title:t(a)("views.user.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:u.value?u.value.meta:null,onDataListChanged:m},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.user.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.user.table.cols.email")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.user.table.cols.roles")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.user.table.cols.status")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),u.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[u.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",p$e,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(u.value.data,(V,R)=>(L(),U(ke,{key:V.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(V.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("a",{href:"",class:"hover:animate-pulse",onClick:Rt(E=>p(R),["prevent"])},_(V.email),9,h$e)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[(L(!0),U(ke,null,Fe(V.roles,E=>(L(),U("span",{key:E.id},_(E.display_name),1))),128))]),_:2},1024),l(t(X).Td,null,{default:f(()=>[V.profile.status==="ACTIVE"?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),V.profile.status==="INACTIVE"?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",f$e,[l(t(me),{variant:"outline-secondary",onClick:E=>p(R)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:E=>b(R)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":i.value!==R})},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",m$e,[c("div",v$e,_(t(a)("views.user.fields.name")),1),c("div",y$e,_(V.name),1)]),c("div",_$e,[c("div",g$e,_(t(a)("views.user.fields.email")),1),c("div",k$e,_(V.email),1)]),c("div",b$e,[c("div",w$e,_(t(a)("views.user.fields.first_name")),1),c("div",x$e,_(V.profile.first_name),1)]),c("div",M$e,[c("div",C$e,_(t(a)("views.user.fields.last_name")),1),c("div",S$e,_(V.profile.last_name),1)]),c("div",I$e,[c("div",L$e,_(t(a)("views.user.fields.address")),1),c("div",$$e,_(V.profile.address),1)]),c("div",A$e,[c("div",E$e,_(t(a)("views.user.fields.city")),1),c("div",T$e,_(V.profile.city),1)]),c("div",P$e,[c("div",D$e,_(t(a)("views.user.fields.postal_code")),1),c("div",R$e,_(V.profile.postal_code),1)]),c("div",O$e,[c("div",V$e,_(t(a)("views.user.fields.country")),1),c("div",U$e,_(V.profile.country),1)]),c("div",F$e,[c("div",j$e,_(t(a)("views.user.fields.picture")),1),c("div",H$e,_(V.profile.img_path),1)]),c("div",N$e,[c("div",z$e,_(t(a)("views.user.fields.tax_id")),1),c("div",B$e,_(V.profile.tax_id),1)]),c("div",q$e,[c("div",W$e,_(t(a)("views.user.fields.ic_num")),1),c("div",G$e,_(V.profile.ic_num),1)]),c("div",Z$e,[c("div",K$e,_(t(a)("views.user.fields.remarks")),1),c("div",X$e,_(V.profile.remarks),1)]),c("div",Y$e,[c("div",Q$e,_(t(a)("views.user.fields.status")),1),c("div",J$e,[V.profile.status==="ACTIVE"?(L(),U("span",eAe,_(t(a)("components.dropdown.values.statusDDL.active")),1)):Me("",!0),V.profile.status==="INACTIVE"?(L(),U("span",tAe,_(t(a)("components.dropdown.values.statusDDL.inactive")),1)):Me("",!0)])]),c("div",aAe,[c("div",nAe,_(t(a)("views.user.fields.roles")),1),c("div",sAe,_(x(V.roles)),1)])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","pagination"]))}});class PB{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}async readAny(){const e={success:!1};try{const a=je("api.get.db.admin.role.read_any",void 0,!1,this.ziggyRoute),s=await nt.get(a);return e.success=!0,e.data=s.data,e}catch(a){return a instanceof Error&&a.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(a.message):ot(a)?this.errorHandlerService.generateAxiosErrorServiceResponse(a):e}}async update(e){const a={success:!1};try{const s=je("api.post.db.module.profile.update.roles",void 0,!1,this.ziggyRoute),o=await nt.post(s,{roles:e});return a.success=!0,a.data=o.data,a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const rAe={class:"p-5"},iAe={class:"pb-4"},lAe={class:"pb-4"},cAe={class:"p-5"},dAe={class:"pb-4"},uAe={class:"pb-4"},pAe={class:"pb-4"},hAe={class:"pb-4"},fAe={class:"pb-4"},mAe={class:"pb-4"},vAe={value:""},yAe=["value"],_Ae={class:"pb-4"},gAe={class:"pb-4"},kAe={class:"pb-4"},bAe={class:"pb-4"},wAe={value:""},xAe=["value"],MAe={class:"pb-4"},CAe={class:"p-5"},SAe={class:"pb-4"},IAe=["value"],LAe={class:"p-5"},$Ae={class:"pb-4"},AAe=c("option",{value:"side-menu-light-full"},"Menu Light",-1),EAe=c("option",{value:"side-menu-light-mini"},"Mini Menu Light",-1),TAe=c("option",{value:"side-menu-dark-full"},"Menu Dark",-1),PAe=c("option",{value:"side-menu-dark-mini"},"Mini Menu Dark",-1),DAe={class:"pb-4"},RAe=c("option",{value:"yyyy_MM_dd"},_("YYYY-MM-DD"),-1),OAe=c("option",{value:"dd_MMM_yyyy"},_("DD-MMM-YYYY"),-1),VAe={class:"pb-4"},UAe=c("option",{value:"hh_mm_ss"},_("HH:mm:ss"),-1),FAe=c("option",{value:"h_m_A"},_("H:m A"),-1),jAe={class:"flex gap-4"},HAe=Ce({__name:"UserCreate",emits:["mode-state","loading-state","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new IP,r=new PB,i=new aa,u=new Dt,h=e,m=O([{title:"views.user.field_groups.user_info",state:fe.Expanded},{title:"views.user.field_groups.user_profile",state:fe.Expanded},{title:"views.user.field_groups.roles",state:fe.Expanded},{title:"views.user.field_groups.settings",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=O(null),b=O(null),x=O(null),w=o.useUserCreateForm();at(async()=>{h("mode-state",xe.FORM_CREATE),D(),$()});const $=()=>{let C=u.getLastEntity("USER_CREATE");C&&w.setData(C)},D=async()=>{try{const[C,M,g]=await Promise.all([r.readAny(),i.getCountriesDDL(),i.getStatusDDL()]);C.success&&C.data&&(p.value=C.data.data),x.value=M,b.value=g}catch(C){console.error(C)}},V=C=>{m.value[C].state===fe.Collapsed?m.value[C].state=fe.Expanded:m.value[C].state===fe.Expanded&&(m.value[C].state=fe.Collapsed)},R=C=>{let M=document.getElementById(C);M&&M.scrollIntoView({behavior:"smooth",block:"center"})},E=async()=>{w.hasErrors&&R(Object.keys(w.errors)[0]),h("loading-state",!0),await w.submit().then(()=>{P(),s.push({name:"side-menu-administrator-user-list"})}).catch(C=>{let M=convertErrorTypeToAlertListType(C);S("danger","",M)}).finally(()=>{h("loading-state",!1)})},P=()=>{w.reset(),w.setErrors({})},S=(C,M,g)=>{h("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return dt(w,ma.debounce(C=>{u.setLastEntity("USER_CREATE",C.data())},500),{deep:!0}),(C,M)=>(L(),U("form",{id:"userForm",onSubmit:Rt(E,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:V},{"card-items-0":f(()=>[c("div",rAe,[c("div",iAe,[l(t(K),{class:F({"text-danger":t(w).invalid("name")})},{default:f(()=>[A(_(t(a)("views.user.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).name,"onUpdate:modelValue":M[0]||(M[0]=g=>t(w).name=g),type:"text",class:F({"border-danger":t(w).invalid("name")}),placeholder:t(a)("views.user.fields.name"),onChange:M[1]||(M[1]=g=>t(w).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.name},null,8,["messages"])]),c("div",lAe,[l(t(K),{class:F({"text-danger":t(w).invalid("email")})},{default:f(()=>[A(_(t(a)("views.user.fields.email")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).email,"onUpdate:modelValue":M[2]||(M[2]=g=>t(w).email=g),type:"text",class:F({"border-danger":t(w).invalid("email")}),placeholder:t(a)("views.user.fields.email"),onChange:M[3]||(M[3]=g=>t(w).validate("email"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.email},null,8,["messages"])])])]),"card-items-1":f(()=>[c("div",cAe,[c("div",dAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.first_name")),1)]),_:1}),l(t(Oe),{modelValue:t(w).first_name,"onUpdate:modelValue":M[4]||(M[4]=g=>t(w).first_name=g),type:"text",placeholder:t(a)("views.user.fields.name")},null,8,["modelValue","placeholder"])]),c("div",uAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.last_name")),1)]),_:1}),l(t(Oe),{modelValue:t(w).last_name,"onUpdate:modelValue":M[5]||(M[5]=g=>t(w).last_name=g),type:"text",placeholder:t(a)("views.user.fields.last_name")},null,8,["modelValue","placeholder"])]),c("div",pAe,[l(t(K),{class:"form-label"},{default:f(()=>[A(_(t(a)("views.user.fields.address")),1)]),_:1}),l(t(Oe),{modelValue:t(w).address,"onUpdate:modelValue":M[6]||(M[6]=g=>t(w).address=g),type:"text",placeholder:t(a)("views.user.fields.address")},null,8,["modelValue","placeholder"])]),c("div",hAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.city")),1)]),_:1}),l(t(Oe),{modelValue:t(w).city,"onUpdate:modelValue":M[7]||(M[7]=g=>t(w).city=g),type:"text",class:"form-control",placeholder:t(a)("views.user.fields.city")},null,8,["modelValue","placeholder"])]),c("div",fAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.postal_code")),1)]),_:1}),l(t(Oe),{modelValue:t(w).postal_code,"onUpdate:modelValue":M[8]||(M[8]=g=>t(w).postal_code=g),type:"text",placeholder:t(a)("views.user.fields.postal_code")},null,8,["modelValue","placeholder"])]),c("div",mAe,[l(t(K),{class:F({"text-danger":t(w).invalid("country")})},{default:f(()=>[A(_(t(a)("views.user.fields.country")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(w).country,"onUpdate:modelValue":M[9]||(M[9]=g=>t(w).country=g),class:F({"border-danger":t(w).invalid("country")}),placeholder:t(a)("views.user.fields.country"),onChange:M[10]||(M[10]=g=>t(w).validate("country"))},{default:f(()=>[c("option",vAe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(x.value,g=>(L(),U("option",{key:g.name,value:g.name},_(g.name),9,yAe))),128))]),_:1},8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.country},null,8,["messages"])]),c("div",_Ae,[l(t(K),{class:F({"text-danger":!1})},{default:f(()=>[A(_(t(a)("views.user.fields.picture")),1)]),_:1}),l(t(pz),{modelValue:t(w).img_path,"onUpdate:modelValue":M[11]||(M[11]=g=>t(w).img_path=g),class:F({"border-danger":!1}),placeholder:t(a)("views.user.fields.picture")},null,8,["modelValue","placeholder"])]),c("div",gAe,[l(t(K),{class:F({"text-danger":t(w).invalid("tax_id")})},{default:f(()=>[A(_(t(a)("views.user.fields.tax_id")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).tax_id,"onUpdate:modelValue":M[12]||(M[12]=g=>t(w).tax_id=g),type:"text",class:F({"border-danger":t(w).invalid("tax_id")}),onChange:M[13]||(M[13]=g=>t(w).validate("tax_id"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.tax_id},null,8,["messages"])]),c("div",kAe,[l(t(K),{class:F({"text-danger":t(w).invalid("ic_num")})},{default:f(()=>[A(_(t(a)("views.user.fields.ic_num")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).ic_num,"onUpdate:modelValue":M[14]||(M[14]=g=>t(w).ic_num=g),type:"text",class:F({"border-danger":!1}),onChange:M[15]||(M[15]=g=>t(w).validate("ic_num"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.ic_num},null,8,["messages"])]),c("div",bAe,[l(t(K),{class:F({"text-danger":t(w).invalid("status")})},{default:f(()=>[A(_(t(a)("views.user.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(w).status,"onUpdate:modelValue":M[16]||(M[16]=g=>t(w).status=g),class:F({"border-danger":!1}),onChange:M[17]||(M[17]=g=>t(w).validate("status"))},{default:f(()=>[c("option",wAe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(b.value,g=>(L(),U("option",{key:g.code,value:g.code},_(t(a)(g.name)),9,xAe))),128))]),_:1},8,["modelValue"]),l(t(_e),{messages:t(w).errors.status},null,8,["messages"])]),c("div",MAe,[l(t(K),{class:F({"text-danger":!1})},{default:f(()=>[A(_(t(a)("views.user.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(w).remarks,"onUpdate:modelValue":M[18]||(M[18]=g=>t(w).remarks=g),type:"text",placeholder:t(a)("views.user.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])])])]),"card-items-2":f(()=>[c("div",CAe,[c("div",SAe,[l(t(K),{class:F({"text-danger":t(w).invalid("roles")})},{default:f(()=>[A(_(t(a)("views.user.fields.roles")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(w).roles,"onUpdate:modelValue":M[19]||(M[19]=g=>t(w).roles=g),multiple:"",size:"6",class:F({"border-danger":t(w).invalid("roles")}),onChange:M[20]||(M[20]=g=>t(w).validate("roles"))},{default:f(()=>[(L(!0),U(ke,null,Fe(p.value,g=>(L(),U("option",{key:g.id,value:g},_(g.display_name),9,IAe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.roles},null,8,["messages"])])])]),"card-items-3":f(()=>[c("div",LAe,[c("div",$Ae,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.settings.theme")),1)]),_:1}),l(t(Zt),{modelValue:t(w).theme,"onUpdate:modelValue":M[21]||(M[21]=g=>t(w).theme=g)},{default:f(()=>[AAe,EAe,TAe,PAe]),_:1},8,["modelValue"])]),c("div",DAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.settings.date_format")),1)]),_:1}),l(t(Zt),{modelValue:t(w).date_format,"onUpdate:modelValue":M[22]||(M[22]=g=>t(w).date_format=g)},{default:f(()=>[RAe,OAe]),_:1},8,["modelValue"])]),c("div",VAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.settings.time_format")),1)]),_:1}),l(t(Zt),{modelValue:t(w).time_format,"onUpdate:modelValue":M[23]||(M[23]=g=>t(w).time_format=g)},{default:f(()=>[UAe,FAe]),_:1},8,["modelValue"])])])]),"card-items-button":f(()=>[c("div",jAe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(w).validating||t(w).hasErrors},{default:f(()=>[t(w).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:P},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),NAe={class:"p-5"},zAe={class:"pb-4"},BAe={class:"pb-4"},qAe={class:"p-5"},WAe={class:"pb-4"},GAe={class:"pb-4"},ZAe={class:"pb-4"},KAe={class:"pb-4"},XAe={class:"pb-4"},YAe={class:"pb-4"},QAe={value:""},JAe=["value"],eEe={class:"pb-4"},tEe={class:"pb-4"},aEe={class:"pb-4"},nEe={class:"pb-4"},sEe={value:""},oEe=["value"],rEe={class:"pb-4"},iEe={class:"p-5"},lEe={class:"pb-4"},cEe=["value"],dEe={class:"p-5"},uEe={class:"pb-4"},pEe=c("option",{value:"side-menu-light-full"},"Menu Light",-1),hEe=c("option",{value:"side-menu-light-mini"},"Mini Menu Light",-1),fEe=c("option",{value:"side-menu-dark-full"},"Menu Dark",-1),mEe=c("option",{value:"side-menu-dark-mini"},"Mini Menu Dark",-1),vEe={class:"pb-4"},yEe=c("option",{value:"yyyy_MM_dd"},_("YYYY-MM-DD"),-1),_Ee=c("option",{value:"dd_MMM_yyyy"},_("DD-MMM-YYYY"),-1),gEe={class:"pb-4"},kEe=c("option",{value:"hh_mm_ss"},_("HH:mm:ss"),-1),bEe=c("option",{value:"h_m_A"},_("H:m A"),-1),wEe={class:"p-5"},xEe={class:"pb-4"},MEe={class:"p-5"},CEe={class:"pb-4"},SEe={class:"p-5"},IEe={class:"pb-4"},LEe={class:"flex gap-4"},$Ee=Ce({__name:"UserEdit",emits:["mode-state","loading-state","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=Sa(),r=new IP,i=new PB,u=new aa,h=new Dt,m=e,p=O([{title:"views.user.field_groups.user_info",state:fe.Expanded},{title:"views.user.field_groups.user_profile",state:fe.Expanded},{title:"views.user.field_groups.roles",state:fe.Expanded},{title:"views.user.field_groups.settings",state:fe.Expanded},{title:"views.user.field_groups.tokens_management",state:fe.Expanded},{title:"views.user.field_groups.password_management",state:fe.Expanded},{title:"views.user.field_groups.two_factor_auth",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),b=O(null),x=O(null),w=O(null),$=r.useUserEditForm(o.params.ulid);at(async()=>{m("mode-state",xe.FORM_EDIT),await V(),await D(o.params.ulid)});const D=async M=>{m("loading-state",!0);let g=await r.read(M);if(g&&g.data){let v=[];g.data.roles.forEach(T=>{v.push({id:T.id,display_name:T.display_name})}),$.setData({name:g.data.name,email:g.data.email,first_name:g.data.profile.first_name,last_name:g.data.profile.last_name,address:g.data.profile.address,city:g.data.profile.city,postal_code:g.data.profile.postal_code,country:g.data.profile.country,img_path:g.data.profile.img_path,tax_id:g.data.profile.tax_id,ic_num:g.data.profile.ic_num,status:g.data.profile.status,remarks:g.data.profile.remarks,roles:v,theme:g.data.settings.theme,date_format:g.data.settings.date_format,time_format:g.data.settings.time_format,tokens_reset:!1,reset_password:!1,reset_2fa:!1})}m("loading-state",!1)},V=async()=>{const[M,g,v]=await Promise.all([i.readAny(),u.getCountriesDDL(),u.getStatusDDL()]);M.success&&M.data&&(b.value=M.data.data),w.value=g,x.value=v},R=M=>{p.value[M].state===fe.Collapsed?p.value[M].state=fe.Expanded:p.value[M].state===fe.Expanded&&(p.value[M].state=fe.Collapsed)},E=M=>{let g=document.getElementById(M);g&&g.scrollIntoView({behavior:"smooth",block:"center"})},P=async()=>{$.hasErrors&&E(Object.keys($.errors)[0]),m("loading-state",!0),await $.submit().then(()=>{s.push({name:"side-menu-administrator-user-list"})}).catch(M=>{let g=ln(M);C("danger","",g)}).finally(()=>{m("loading-state",!1)})},S=async()=>{$.reset(),$.setErrors({}),await D(o.params.ulid)},C=(M,g,v)=>{m("show-alertplaceholder",{alertType:M,title:g,alertList:v})};return dt($,ma.debounce(M=>{h.setLastEntity("USER_EDIT",M.data())},500),{deep:!0}),(M,g)=>(L(),U("form",{id:"userForm",onSubmit:Rt(P,["prevent"])},[l(t(ba),{cards:p.value,"using-side-tab":!1,onHandleExpandCard:R},{"card-items-0":f(()=>[c("div",NAe,[c("div",zAe,[l(t(K),{class:F({"text-danger":t($).invalid("name")})},{default:f(()=>[A(_(t(a)("views.user.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t($).name,"onUpdate:modelValue":g[0]||(g[0]=v=>t($).name=v),type:"text",class:F({"border-danger":t($).invalid("name")}),placeholder:t(a)("views.user.fields.name"),onChange:g[1]||(g[1]=v=>t($).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t($).errors.name},null,8,["messages"])]),c("div",BAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.email")),1)]),_:1}),l(t(Oe),{modelValue:t($).email,"onUpdate:modelValue":g[2]||(g[2]=v=>t($).email=v),type:"text",disabled:""},null,8,["modelValue"])])])]),"card-items-1":f(()=>[c("div",qAe,[c("div",WAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.first_name")),1)]),_:1}),l(t(Oe),{modelValue:t($).first_name,"onUpdate:modelValue":g[3]||(g[3]=v=>t($).first_name=v),type:"text",class:F({"border-danger":!1}),placeholder:t(a)("views.user.fields.name")},null,8,["modelValue","placeholder"])]),c("div",GAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.last_name")),1)]),_:1}),l(t(Oe),{modelValue:t($).last_name,"onUpdate:modelValue":g[4]||(g[4]=v=>t($).last_name=v),type:"text",placeholder:t(a)("views.user.fields.last_name")},null,8,["modelValue","placeholder"])]),c("div",ZAe,[l(t(K),{class:"form-label"},{default:f(()=>[A(_(t(a)("views.user.fields.address")),1)]),_:1}),l(t(Oe),{modelValue:t($).address,"onUpdate:modelValue":g[5]||(g[5]=v=>t($).address=v),type:"text",placeholder:t(a)("views.user.fields.address")},null,8,["modelValue","placeholder"])]),c("div",KAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.city")),1)]),_:1}),l(t(Oe),{modelValue:t($).city,"onUpdate:modelValue":g[6]||(g[6]=v=>t($).city=v),type:"text",class:"form-control",placeholder:t(a)("views.user.fields.city")},null,8,["modelValue","placeholder"])]),c("div",XAe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.postal_code")),1)]),_:1}),l(t(Oe),{modelValue:t($).postal_code,"onUpdate:modelValue":g[7]||(g[7]=v=>t($).postal_code=v),type:"text",placeholder:t(a)("views.user.fields.postal_code")},null,8,["modelValue","placeholder"])]),c("div",YAe,[l(t(K),{class:F({"text-danger":t($).invalid("country")})},{default:f(()=>[A(_(t(a)("views.user.fields.country")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t($).country,"onUpdate:modelValue":g[8]||(g[8]=v=>t($).country=v),class:F({"border-danger":t($).invalid("country")}),placeholder:t(a)("views.user.fields.country"),onChange:g[9]||(g[9]=v=>t($).validate("country"))},{default:f(()=>[c("option",QAe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(w.value,v=>(L(),U("option",{key:v.name,value:v.name},_(v.name),9,JAe))),128))]),_:1},8,["modelValue","class","placeholder"]),l(t(_e),{messages:t($).errors.country},null,8,["messages"])]),c("div",eEe,[l(t(K),{class:F({"text-danger":!1})},{default:f(()=>[A(_(t(a)("views.user.fields.picture")),1)]),_:1}),l(t(pz),{modelValue:t($).img_path,"onUpdate:modelValue":g[10]||(g[10]=v=>t($).img_path=v),class:F({"border-danger":!1}),placeholder:t(a)("views.user.fields.picture")},null,8,["modelValue","placeholder"])]),c("div",tEe,[l(t(K),{class:F({"text-danger":t($).invalid("tax_id")})},{default:f(()=>[A(_(t(a)("views.user.fields.tax_id")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t($).tax_id,"onUpdate:modelValue":g[11]||(g[11]=v=>t($).tax_id=v),type:"text",class:F({"border-danger":t($).invalid("tax_id")}),onChange:g[12]||(g[12]=v=>t($).validate("tax_id"))},null,8,["modelValue","class"]),l(t(_e),{messages:t($).errors.tax_id},null,8,["messages"])]),c("div",aEe,[l(t(K),{class:F({"text-danger":t($).invalid("ic_num")})},{default:f(()=>[A(_(t(a)("views.user.fields.ic_num")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t($).ic_num,"onUpdate:modelValue":g[13]||(g[13]=v=>t($).ic_num=v),type:"text",class:F({"border-danger":t($).invalid("ic_num")}),onChange:g[14]||(g[14]=v=>t($).validate("ic_num"))},null,8,["modelValue","class"]),l(t(_e),{messages:t($).errors.ic_num},null,8,["messages"])]),c("div",nEe,[l(t(K),{class:F({"text-danger":t($).invalid("status")})},{default:f(()=>[A(_(t(a)("views.user.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t($).status,"onUpdate:modelValue":g[15]||(g[15]=v=>t($).status=v),class:F({"border-danger":t($).invalid("status")}),onChange:g[16]||(g[16]=v=>t($).validate("status"))},{default:f(()=>[c("option",sEe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(x.value,v=>(L(),U("option",{key:v.code,value:v.code},_(t(a)(v.name)),9,oEe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t($).errors.status},null,8,["messages"])]),c("div",rEe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t($).remarks,"onUpdate:modelValue":g[17]||(g[17]=v=>t($).remarks=v),type:"text",placeholder:t(a)("views.user.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])])])]),"card-items-2":f(()=>[c("div",iEe,[c("div",lEe,[l(t(K),{class:F({"text-danger":t($).invalid("roles")})},{default:f(()=>[A(_(t(a)("views.user.fields.roles")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t($).roles,"onUpdate:modelValue":g[18]||(g[18]=v=>t($).roles=v),multiple:"",size:"6",class:F({"border-danger":t($).invalid("roles")}),onChange:g[19]||(g[19]=v=>t($).validate("roles"))},{default:f(()=>[(L(!0),U(ke,null,Fe(b.value,v=>(L(),U("option",{key:v.id,value:v},_(v.display_name),9,cEe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t($).errors.roles},null,8,["messages"])])])]),"card-items-3":f(()=>[c("div",dEe,[c("div",uEe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.settings.theme")),1)]),_:1}),l(t(Zt),{modelValue:t($).theme,"onUpdate:modelValue":g[20]||(g[20]=v=>t($).theme=v)},{default:f(()=>[pEe,hEe,fEe,mEe]),_:1},8,["modelValue"])]),c("div",vEe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.settings.date_format")),1)]),_:1}),l(t(Zt),{modelValue:t($).date_format,"onUpdate:modelValue":g[21]||(g[21]=v=>t($).date_format=v)},{default:f(()=>[yEe,_Ee]),_:1},8,["modelValue"])]),c("div",gEe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.settings.time_format")),1)]),_:1}),l(t(Zt),{modelValue:t($).time_format,"onUpdate:modelValue":g[22]||(g[22]=v=>t($).time_format=v)},{default:f(()=>[kEe,bEe]),_:1},8,["modelValue"])])])]),"card-items-4":f(()=>[c("div",wEe,[c("div",xEe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.tokens.reset")),1)]),_:1}),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{type:"checkbox",modelValue:t($).tokens_reset,"onUpdate:modelValue":g[23]||(g[23]=v=>t($).tokens_reset=v)},null,8,["modelValue"])]),_:1})])])]),"card-items-5":f(()=>[c("div",MEe,[c("div",CEe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.reset_password")),1)]),_:1}),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{type:"checkbox",modelValue:t($).reset_password,"onUpdate:modelValue":g[24]||(g[24]=v=>t($).reset_password=v)},null,8,["modelValue"])]),_:1})])])]),"card-items-6":f(()=>[c("div",SEe,[c("div",IEe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.user.fields.reset_2fa")),1)]),_:1}),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{type:"checkbox",modelValue:t($).reset_2fa,"onUpdate:modelValue":g[25]||(g[25]=v=>t($).reset_2fa=v)},null,8,["modelValue"])]),_:1})])])]),"card-items-button":f(()=>[c("div",LEe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t($).validating||t($).hasErrors},{default:f(()=>[t($).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:S},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),AEe={class:"mt-8"},EEe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},TEe={class:"ml-4 mr-4"},PEe={class:"font-medium"},DEe={class:"mt-1 text-slate-500"},REe=Ce({__name:"CompanyIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.company.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[companyNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-company-company-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-company-company-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.company.actions.create";break;case xe.FORM_EDIT:h.value="views.company.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.company.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("COMPANY_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("COMPANY_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",AEe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",EEe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"companyNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",TEe,[c("div",PEe,_(w.value),1),c("div",DEe,_($.value),1)])]),_:1})])}}});class LP{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useCompanyCreateForm(){const e=je("api.post.company.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{code:"_AUTO_",name:"",address:null,default:!1,status:"ACTIVE"})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.search&&(s.search=e.search),e.status&&(s.status=e.status),e.default!==void 0&&(s.default=e.default),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.company.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.search&&(s.search=e.search),e.status&&(s.status=e.status),e.default!==void 0&&(s.default=e.default),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.company.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.company.read",{company:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useCompanyEditForm(e){const a=je("api.post.company.edit",e,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{code:"_AUTO_",name:"",address:null,default:!1,status:"ACTIVE"})}async delete(e){const a={success:!1};try{const s=je("api.post.company.delete",{company:e},!1,this.ziggyRoute),o=await nt.post(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const OEe={class:"flex justify-center italic"},VEe={class:"flex justify-end gap-1"},UEe={class:"flex flex-row"},FEe={class:"ml-5 w-48 text-right pr-5"},jEe={class:"flex-1"},HEe={class:"flex flex-row"},NEe={class:"ml-5 w-48 text-right pr-5"},zEe={class:"flex-1"},BEe={class:"flex flex-row"},qEe={class:"ml-5 w-48 text-right pr-5"},WEe={class:"flex-1"},GEe={class:"flex flex-row"},ZEe={class:"ml-5 w-48 text-right pr-5"},KEe={class:"flex-1"},XEe={key:0},YEe={key:1},QEe={class:"flex flex-row"},JEe={class:"ml-5 w-48 text-right pr-5"},eTe={class:"flex-1"},tTe={key:0},aTe={key:1},nTe={class:"p-5 text-center"},sTe={class:"mt-5 text-3xl"},oTe={class:"mt-2 text-slate-500"},rTe=c("br",null,null,-1),iTe={class:"px-5 pb-8 text-center"},lTe=Ce({__name:"CompanyList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new LP,r=e,i=O(""),u=O(!1),h=O(null),m=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}});at(async()=>{r("mode-state",xe.LIST),await p("",!0,1,10)});const p=async(E,P,S,C)=>{r("loading-state",!0);const M={with_trashed:!1,search:E,default:void 0,status:void 0,include_id:void 0,refresh:P,page:S,per_page:C};let g=await o.readAnyPaginate(M);g.success&&g.data?m.value=g.data:R("danger","",g.errors),r("loading-state",!1)},b=async E=>{await p(E.search.text,!1,E.pagination.page,E.pagination.per_page)},x=E=>{h.value===E?h.value=null:h.value=E},w=E=>{if(!m.value)return;let P=m.value.data[E].ulid;s.push({name:"side-menu-company-company-edit",params:{ulid:P}})},$=E=>{if(!m.value)return;let P=m.value.data[E].ulid;i.value=P,u.value=!0},D=async()=>{u.value=!1,r("loading-state",!0);let E=await o.delete(i.value);E.success?(r("update-profile"),await p("",!0,1,10),V(a("views.company.alert.delete_company.title"),a("views.company.alert.delete_company.content"))):R("danger","",E.errors),r("loading-state",!1)},V=(E,P)=>{r("show-notification",{title:E,content:P})},R=(E,P,S)=>{r("show-alertplaceholder",{alertType:E,title:P,alertList:S})};return(E,P)=>(L(),ge(t(mn),{title:t(a)("views.company.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:m.value?m.value.meta:null,onDataListChanged:b},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.company.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.company.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.company.table.cols.default")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.company.table.cols.status")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),m.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[m.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",OEe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(m.value.data,(S,C)=>(L(),U(ke,{key:S.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(S.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(S.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[S.default===!0?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),S.default===!1?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[S.status==="ACTIVE"?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),S.status==="INACTIVE"?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",VEe,[l(t(me),{variant:"outline-secondary",onClick:M=>x(C)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:M=>w(C)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:M=>$(C)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":h.value!==C})},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",UEe,[c("div",FEe,_(t(a)("views.company.fields.code")),1),c("div",jEe,_(S.code),1)]),c("div",HEe,[c("div",NEe,_(t(a)("views.company.fields.name")),1),c("div",zEe,_(S.name),1)]),c("div",BEe,[c("div",qEe,_(t(a)("views.company.fields.address")),1),c("div",WEe,_(S.address),1)]),c("div",GEe,[c("div",ZEe,_(t(a)("views.company.fields.default")),1),c("div",KEe,[S.default?(L(),U("span",XEe,_(t(a)("components.dropdown.values.switch.on")),1)):(L(),U("span",YEe,_(t(a)("components.dropdown.values.switch.off")),1))])]),c("div",QEe,[c("div",JEe,_(t(a)("views.company.fields.status")),1),c("div",eTe,[S.status==="ACTIVE"?(L(),U("span",tTe,_(t(a)("components.dropdown.values.statusDDL.active")),1)):Me("",!0),S.status==="INACTIVE"?(L(),U("span",aTe,_(t(a)("components.dropdown.values.statusDDL.inactive")),1)):Me("",!0)])])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:u.value,onClose:P[1]||(P[1]=()=>{u.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",nTe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",sTe,_(t(a)("components.delete-modal.title")),1),c("div",oTe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),rTe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",iTe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:P[0]||(P[0]=()=>{u.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:D},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),cTe={class:"p-5"},dTe={class:"pb-4"},uTe={class:"pb-4"},pTe={class:"pb-4"},hTe={class:"pb-4"},fTe={class:"pb-4"},mTe={value:""},vTe=["value"],yTe={class:"flex gap-4"},_Te=Ce({__name:"CompanyCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new LP,r=new aa,i=new Dt,u=e,h=O([{title:"views.company.field_groups.company_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),m=O(null),p=o.useCompanyCreateForm();at(async()=>{u("mode-state",xe.FORM_CREATE),await Promise.all([x()]),b()});const b=()=>{let S=i.getLastEntity("COMPANY_CREATE");S&&p.setData(S)},x=async()=>{const S=await r.getStatusDDL();S&&(m.value=S)},w=S=>{h.value[S].state===fe.Collapsed?h.value[S].state=fe.Expanded:h.value[S].state===fe.Expanded&&(h.value[S].state=fe.Collapsed)},$=S=>{let C=document.getElementById(S);C&&C.scrollIntoView({behavior:"smooth",block:"center"})},D=async()=>{p.hasErrors&&$(Object.keys(p.errors)[0]),u("loading-state",!0),await p.submit().then(()=>{V(),u("update-profile"),s.push({name:"side-menu-company-company-list"})}).catch(S=>{let C=P(S);E("danger","",C)}).finally(()=>{u("loading-state",!1)})},V=()=>{p.reset(),p.setErrors({})},R=()=>{p.forgetError("code"),p.code=="_AUTO_"?p.setData({code:""}):p.setData({code:"_AUTO_"})},E=(S,C,M)=>{u("show-alertplaceholder",{alertType:S,title:C,alertList:M})},P=S=>{const C={},M=S,g=ot(S)?S.response:M==null?void 0:M.response;if(g&&g.data){const v=g.data;if(v.errors&&typeof v.errors=="object"){for(const T of Object.keys(v.errors)){const j=v.errors[T];Array.isArray(j)?C[T]=j:j!=null&&(C[T]=[String(j)])}return C}if(v.message)return C.error=[String(v.message)],C}return S instanceof Error&&S.message?C.error=[S.message]:C.error=["Unknown error"],C};return dt(p,ma.debounce(S=>{i.setLastEntity("COMPANY_CREATE",S.data()),p.hasErrors},500),{deep:!0}),(S,C)=>(L(),U("form",{id:"companyForm",onSubmit:Rt(D,["prevent"])},[l(t(ba),{cards:h.value,"using-side-tab":!1,onHandleExpandCard:w},{"card-items-0":f(()=>[c("div",cTe,[c("div",dTe,[l(t(K),{class:F({"text-danger":t(p).invalid("code")})},{default:f(()=>[A(_(t(a)("views.company.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(p).code,"onUpdate:modelValue":C[0]||(C[0]=M=>t(p).code=M),class:F({"border-danger":t(p).invalid("code")}),placeholder:t(a)("views.company.fields.code"),onSetAuto:R,onChange:C[1]||(C[1]=M=>t(p).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.code},null,8,["messages"])]),c("div",uTe,[l(t(K),{class:F({"text-danger":t(p).invalid("name")})},{default:f(()=>[A(_(t(a)("views.company.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(p).name,"onUpdate:modelValue":C[2]||(C[2]=M=>t(p).name=M),type:"text",class:F({"border-danger":t(p).invalid("name")}),placeholder:t(a)("views.company.fields.name"),onChange:C[3]||(C[3]=M=>t(p).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.name},null,8,["messages"])]),c("div",pTe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.company.fields.address")),1)]),_:1}),l(t(la),{modelValue:t(p).address,"onUpdate:modelValue":C[4]||(C[4]=M=>t(p).address=M),type:"text",placeholder:t(a)("views.company.fields.address")},null,8,["modelValue","placeholder"])]),c("div",hTe,[l(t(K),{class:F({"text-danger":t(p).invalid("default")})},{default:f(()=>[A(_(t(a)("views.company.fields.default")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(p).default,"onUpdate:modelValue":C[5]||(C[5]=M=>t(p).default=M),type:"checkbox",class:F({"border-danger":t(p).invalid("default")}),placeholder:t(a)("views.company.fields.default")},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(p).errors.default},null,8,["messages"])]),c("div",fTe,[l(t(K),{class:F({"text-danger":t(p).invalid("status")})},{default:f(()=>[A(_(t(a)("views.company.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(p).status,"onUpdate:modelValue":C[6]||(C[6]=M=>t(p).status=M),class:F({"border-danger":t(p).invalid("status")}),onChange:C[7]||(C[7]=M=>t(p).validate("status"))},{default:f(()=>[c("option",mTe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(m.value,M=>(L(),U("option",{key:M.code,value:M.code},_(t(a)(M.name)),9,vTe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(p).errors.status},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",yTe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(p).validating||t(p).hasErrors},{default:f(()=>[t(p).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:V},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),gTe={class:"p-5"},kTe={class:"pb-4"},bTe={class:"pb-4"},wTe={class:"pb-4"},xTe={class:"pb-4"},MTe={class:"pb-4"},CTe={value:""},STe=["value"],ITe={class:"flex gap-4"},LTe=Ce({__name:"CompanyEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=Sa(),o=ct(),r=new LP,i=new aa,u=new Dt,h=e,m=O([{title:"views.company.field_groups.company_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=O(null),b=r.useCompanyEditForm(s.params.ulid);at(async()=>{h("mode-state",xe.FORM_EDIT),w(),await x(s.params.ulid)});const x=async S=>{h("loading-state",!0);let C=await r.read(S);C.success&&C.data?b.setData({code:C.data.code,name:C.data.name,address:C.data.address,default:C.data.default,status:C.data.status}):o.push({name:"side-menu-company-company-list"}),h("loading-state",!1)},w=async()=>{p.value=await i.getStatusDDL()},$=S=>{m.value[S].state===fe.Collapsed?m.value[S].state=fe.Expanded:m.value[S].state===fe.Expanded&&(m.value[S].state=fe.Collapsed)},D=S=>{let C=document.getElementById(S);C&&C.scrollIntoView({behavior:"smooth",block:"center"})},V=async()=>{b.hasErrors&&D(Object.keys(b.errors)[0]),h("loading-state",!0),await b.submit().then(()=>{h("update-profile"),o.push({name:"side-menu-company-company-list"})}).catch(S=>{const C=ln(S);P("danger","",C)}).finally(()=>{h("loading-state",!1)})},R=async()=>{b.reset(),b.setErrors({}),await x(s.params.ulid)},E=()=>{b.forgetError("code"),b.code=="_AUTO_"?b.setData({code:""}):b.setData({code:"_AUTO_"})},P=(S,C,M)=>{h("show-alertplaceholder",{alertType:S,title:C,alertList:M})};return dt(b,ma.debounce(S=>{u.setLastEntity("COMPANY_EDIT",S.data())},500),{deep:!0}),(S,C)=>(L(),U("form",{id:"companyForm",onSubmit:Rt(V,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:$},{"card-items-0":f(()=>[c("div",gTe,[c("div",kTe,[l(t(K),{class:F({"text-danger":t(b).invalid("code")})},{default:f(()=>[A(_(t(a)("views.company.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(b).code,"onUpdate:modelValue":C[0]||(C[0]=M=>t(b).code=M),class:F({"border-danger":t(b).invalid("code")}),placeholder:t(a)("views.company.fields.code"),onSetAuto:E,onChange:C[1]||(C[1]=M=>t(b).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.code},null,8,["messages"])]),c("div",bTe,[l(t(K),{class:F({"text-danger":t(b).invalid("name")})},{default:f(()=>[A(_(t(a)("views.company.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(b).name,"onUpdate:modelValue":C[2]||(C[2]=M=>t(b).name=M),type:"text",class:F({"border-danger":t(b).invalid("name")}),placeholder:t(a)("views.company.fields.name"),onChange:C[3]||(C[3]=M=>t(b).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.name},null,8,["messages"])]),c("div",wTe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.company.fields.address")),1)]),_:1}),l(t(la),{modelValue:t(b).address,"onUpdate:modelValue":C[4]||(C[4]=M=>t(b).address=M),type:"text",placeholder:t(a)("views.company.fields.address")},null,8,["modelValue","placeholder"])]),c("div",xTe,[l(t(K),{class:F({"text-danger":t(b).invalid("default")})},{default:f(()=>[A(_(t(a)("views.company.fields.default")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(b).default,"onUpdate:modelValue":C[5]||(C[5]=M=>t(b).default=M),type:"checkbox",class:F({"border-danger":t(b).invalid("default")}),placeholder:t(a)("views.company.fields.default")},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(b).errors.default},null,8,["messages"])]),c("div",MTe,[l(t(K),{class:F({"text-danger":t(b).invalid("status")})},{default:f(()=>[A(_(t(a)("views.company.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(b).status,"onUpdate:modelValue":C[6]||(C[6]=M=>t(b).status=M),class:F({"border-danger":t(b).invalid("status")}),onChange:C[7]||(C[7]=M=>t(b).validate("status"))},{default:f(()=>[c("option",CTe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(p.value,M=>(L(),U("option",{key:M.code,value:M.code},_(t(a)(M.name)),9,STe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(b).errors.status},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",ITe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(b).validating||t(b).hasErrors},{default:f(()=>[t(b).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:R},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),$Te={class:"mt-8"},ATe={key:0,class:"flex w-full mt-4 sm:w-auto sm:mt-0"},ETe={class:"ml-4 mr-4"},TTe={class:"font-medium"},PTe={class:"mt-1 text-slate-500"},DTe=Ce({__name:"BranchIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.branch.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[branchNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-company-branch-create"})},V=async()=>{g(),P(i.value),i.value=xe.LIST,a.push({name:"side-menu-company-branch-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.branch.actions.create";break;case xe.FORM_EDIT:h.value="views.branch.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.branch.page_title";break}},P=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("BRANCH_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("BRANCH_EDIT");break}},S=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},C=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},M=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",$Te,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[i.value!=t(xe).INDEX?(L(),U("div",ATe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])):Me("",!0)]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:S,onShowAlertplaceholder:C,onShowNotification:M})]),_:1},8,["visible"]),l(fn,{"ref-key":"branchNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",ETe,[c("div",TTe,_(w.value),1),c("div",PTe,_($.value),1)])]),_:1})])}}});class $P{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useBranchCreateForm(){const e=je("api.post.branch.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",name:"",address:null,city:null,contact:null,is_main:!1,remarks:null,status:"ACTIVE"})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.is_main!==void 0&&(s.is_main=e.is_main),e.status&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.branch.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.is_main!==void 0&&(s.is_main=e.is_main),e.status&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.branch.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.branch.read",{branch:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useBranchEditForm(e){const a=je("api.post.branch.edit",e,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:"",address:null,city:null,contact:null,is_main:!1,remarks:null,status:"ACTIVE"})}async delete(e){const a={success:!1};try{const s=je("api.post.branch.delete",e,!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}var qt=(n=>(n[n.USERLOCATION_REQUIRED=1e4]="USERLOCATION_REQUIRED",n))(qt||{});const RTe={class:"flex justify-center italic"},OTe={class:"flex justify-end gap-1"},VTe={class:"flex flex-row"},UTe={class:"ml-5 w-48 text-right pr-5"},FTe={class:"flex-1"},jTe={class:"flex flex-row"},HTe={class:"ml-5 w-48 text-right pr-5"},NTe={class:"flex-1"},zTe={class:"flex flex-row"},BTe={class:"ml-5 w-48 text-right pr-5"},qTe={class:"flex-1"},WTe={class:"flex flex-row"},GTe={class:"ml-5 w-48 text-right pr-5"},ZTe={class:"flex-1"},KTe={class:"flex flex-row"},XTe={class:"ml-5 w-48 text-right pr-5"},YTe={class:"flex-1"},QTe={class:"flex flex-row"},JTe={class:"ml-5 w-48 text-right pr-5"},ePe={class:"flex-1"},tPe={key:0},aPe={key:1},nPe={class:"flex flex-row"},sPe={class:"ml-5 w-48 text-right pr-5"},oPe={class:"flex-1"},rPe={class:"flex flex-row"},iPe={class:"ml-5 w-48 text-right pr-5"},lPe={class:"flex-1"},cPe={key:0},dPe={key:1},uPe={class:"p-5 text-center"},pPe={class:"mt-5 text-3xl"},hPe={class:"mt-2 text-slate-500"},fPe=c("br",null,null,-1),mPe={class:"px-5 pb-8 text-center"},vPe=Ce({__name:"BranchList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new $P,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(C,M,g,v)=>{i("loading-state",!0);const j={with_trashed:!1,company_id:x.value.company.id,search:C,is_main:void 0,status:void 0,include_id:void 0,refresh:M,page:g,per_page:v};let B=await o.readAnyPaginate(j);B.success&&B.data?p.value=B.data:S("danger","",B.errors),i("loading-state",!1)},$=async C=>{await w(C.search.text,!0,C.pagination.page,C.pagination.per_page)},D=C=>{m.value===C?m.value=null:m.value=C},V=C=>{if(!p.value)return;let M=p.value.data[C].ulid;s.push({name:"side-menu-company-branch-edit",params:{ulid:M}})},R=C=>{if(!p.value)return;let M=p.value.data[C].ulid;u.value=M,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let C=await o.delete(u.value);C.success?(i("update-profile"),await w("",!0,1,10),P(a("views.branch.alert.delete_branch.title"),a("views.branch.alert.delete_branch.content"))):S("danger","",C.errors),i("loading-state",!1)},P=(C,M)=>{i("show-notification",{title:C,content:M})},S=(C,M,g)=>{i("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return(C,M)=>(L(),ge(t(mn),{title:t(a)("views.branch.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.branch.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.branch.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.branch.table.cols.is_main")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.branch.table.cols.status")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",RTe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(g,v)=>(L(),U(ke,{key:g.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(g.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[g.is_main===!0?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),g.is_main===!1?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[g.status==="ACTIVE"?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),g.status==="INACTIVE"?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",OTe,[l(t(me),{variant:"outline-secondary",onClick:T=>D(v)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>V(v)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>R(v)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==v})},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",VTe,[c("div",UTe,_(t(a)("views.branch.fields.code")),1),c("div",FTe,_(g.code),1)]),c("div",jTe,[c("div",HTe,_(t(a)("views.branch.fields.name")),1),c("div",NTe,_(g.name),1)]),c("div",zTe,[c("div",BTe,_(t(a)("views.branch.fields.address")),1),c("div",qTe,_(g.address),1)]),c("div",WTe,[c("div",GTe,_(t(a)("views.branch.fields.city")),1),c("div",ZTe,_(g.city),1)]),c("div",KTe,[c("div",XTe,_(t(a)("views.branch.fields.contact")),1),c("div",YTe,_(g.contact),1)]),c("div",QTe,[c("div",JTe,_(t(a)("views.branch.fields.is_main")),1),c("div",ePe,[g.is_main?(L(),U("span",tPe,_(t(a)("components.dropdown.values.switch.on")),1)):(L(),U("span",aPe,_(t(a)("components.dropdown.values.switch.off")),1))])]),c("div",nPe,[c("div",sPe,_(t(a)("views.branch.fields.remarks")),1),c("div",oPe,_(g.remarks),1)]),c("div",rPe,[c("div",iPe,_(t(a)("views.branch.fields.status")),1),c("div",lPe,[g.status==="ACTIVE"?(L(),U("span",cPe,_(t(a)("components.dropdown.values.statusDDL.active")),1)):Me("",!0),g.status==="INACTIVE"?(L(),U("span",dPe,_(t(a)("components.dropdown.values.statusDDL.inactive")),1)):Me("",!0)])])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:M[1]||(M[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",uPe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",pPe,_(t(a)("components.delete-modal.title")),1),c("div",hPe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),fPe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",mPe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:M[0]||(M[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),yPe={class:"p-5"},_Pe=c("br",null,null,-1),gPe={class:"p-5"},kPe={class:"pb-4"},bPe={class:"pb-4"},wPe={class:"pb-4"},xPe={class:"pb-4"},MPe={class:"pb-4"},CPe={class:"pb-4"},SPe={class:"pb-4"},IPe={class:"pb-4"},LPe={value:""},$Pe=["value"],APe={class:"flex gap-4"},EPe=Ce({__name:"BranchCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new $P,r=new aa,i=new Dt,u=zt(),h=e,m=O([{title:"views.branch.field_groups.company_info",state:fe.Expanded},{title:"views.branch.field_groups.branch_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=O(null),b=o.useBranchCreateForm(),x=ee(()=>u.isUserLocationSelected),w=ee(()=>u.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_CREATE),x.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([V()]),D(),$()});const $=()=>{b.setData({company_id:w.value.company.id})},D=()=>{let v=i.getLastEntity("BRANCH_CREATE");v&&b.setData(v)},V=async()=>{const v=await r.getStatusDDL();v&&(p.value=v)},R=v=>{m.value[v].state===fe.Collapsed?m.value[v].state=fe.Expanded:m.value[v].state===fe.Expanded&&(m.value[v].state=fe.Collapsed)},E=v=>{let T=document.getElementById(v);T&&T.scrollIntoView({behavior:"smooth",block:"center"})},P=async()=>{b.hasErrors&&E(Object.keys(b.errors)[0]),h("loading-state",!0),await b.submit().then(()=>{S(),h("update-profile"),s.push({name:"side-menu-company-branch-list"})}).catch(v=>{let T=g(v);M("danger","",T)}).finally(()=>{h("loading-state",!1)})},S=()=>{b.reset(),b.setErrors({})},C=()=>{b.forgetError("code"),b.code=="_AUTO_"?b.setData({code:""}):b.setData({code:"_AUTO_"})},M=(v,T,j)=>{h("show-alertplaceholder",{alertType:v,title:T,alertList:j})},g=v=>{const T={},j=v,B=ot(v)?v.response:j==null?void 0:j.response;if(B&&B.data){const oe=B.data;if(oe.errors&&typeof oe.errors=="object"){for(const be of Object.keys(oe.errors)){const $e=oe.errors[be];Array.isArray($e)?T[be]=$e:$e!=null&&(T[be]=[String($e)])}return T}if(oe.message)return T.error=[String(oe.message)],T}return v instanceof Error&&v.message?T.error=[v.message]:T.error=["Unknown error"],T};return dt(b,ma.debounce(v=>{i.setLastEntity("BRANCH_CREATE",v.data())},500),{deep:!0}),(v,T)=>(L(),U("form",{id:"branchForm",onSubmit:Rt(P,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:R},{"card-items-0":f(()=>[c("div",yPe,[l(t(K),null,{default:f(()=>[A(_(w.value.company.code)+" ",1),_Pe,A(" "+_(w.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(b).company_id,"onUpdate:modelValue":T[0]||(T[0]=j=>t(b).company_id=j)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",gPe,[c("div",kPe,[l(t(K),{class:F({"text-danger":t(b).invalid("code")})},{default:f(()=>[A(_(t(a)("views.branch.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(b).code,"onUpdate:modelValue":T[1]||(T[1]=j=>t(b).code=j),type:"text",class:F({"border-danger":t(b).invalid("code")}),placeholder:t(a)("views.branch.fields.code"),onSetAuto:C,onChange:T[2]||(T[2]=j=>t(b).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.code},null,8,["messages"])]),c("div",bPe,[l(t(K),{class:F({"text-danger":t(b).invalid("name")})},{default:f(()=>[A(_(t(a)("views.branch.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(b).name,"onUpdate:modelValue":T[3]||(T[3]=j=>t(b).name=j),type:"text",class:F({"border-danger":t(b).invalid("name")}),placeholder:t(a)("views.branch.fields.name"),onChange:T[4]||(T[4]=j=>t(b).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.name},null,8,["messages"])]),c("div",wPe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.branch.fields.address")),1)]),_:1}),l(t(la),{modelValue:t(b).address,"onUpdate:modelValue":T[5]||(T[5]=j=>t(b).address=j),type:"text",placeholder:t(a)("views.branch.fields.address")},null,8,["modelValue","placeholder"])]),c("div",xPe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.branch.fields.city")),1)]),_:1}),l(t(Oe),{modelValue:t(b).city,"onUpdate:modelValue":T[6]||(T[6]=j=>t(b).city=j),type:"text",placeholder:t(a)("views.branch.fields.city")},null,8,["modelValue","placeholder"])]),c("div",MPe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.branch.fields.contact")),1)]),_:1}),l(t(Oe),{modelValue:t(b).contact,"onUpdate:modelValue":T[7]||(T[7]=j=>t(b).contact=j),type:"text",placeholder:t(a)("views.branch.fields.contact")},null,8,["modelValue","placeholder"])]),c("div",CPe,[l(t(K),{class:F([{"text-danger":t(b).invalid("is_main")},"pr-5"])},{default:f(()=>[A(_(t(a)("views.branch.fields.is_main")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(b).is_main,"onUpdate:modelValue":T[8]||(T[8]=j=>t(b).is_main=j),type:"checkbox",class:F({"border-danger":t(b).invalid("is_main")}),placeholder:t(a)("views.branch.fields.is_main"),onChange:T[9]||(T[9]=j=>t(b).validate("is_main"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(b).errors.is_main},null,8,["messages"])]),c("div",SPe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.branch.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(b).remarks,"onUpdate:modelValue":T[10]||(T[10]=j=>t(b).remarks=j),type:"text",placeholder:t(a)("views.branch.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])]),c("div",IPe,[l(t(K),{class:F({"text-danger":t(b).invalid("status")})},{default:f(()=>[A(_(t(a)("views.branch.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(b).status,"onUpdate:modelValue":T[11]||(T[11]=j=>t(b).status=j),class:F({"border-danger":t(b).invalid("status")}),onChange:T[12]||(T[12]=j=>t(b).validate("status"))},{default:f(()=>[c("option",LPe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(p.value,j=>(L(),U("option",{key:j.code,value:j.code},_(t(a)(j.name)),9,$Pe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(b).errors.status},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",APe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(b).validating||t(b).hasErrors},{default:f(()=>[t(b).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:S},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),TPe={class:"p-5"},PPe=c("br",null,null,-1),DPe={class:"p-5"},RPe={class:"pb-4"},OPe={class:"pb-4"},VPe={class:"pb-4"},UPe={class:"pb-4"},FPe={class:"pb-4"},jPe={class:"pb-4"},HPe={class:"pb-4"},NPe={class:"pb-4"},zPe={value:""},BPe=["value"],qPe={class:"flex gap-4"},WPe=Ce({__name:"BranchEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=Sa(),r=new $P,i=new aa,u=new Dt,h=zt(),m=e,p=O([{title:"views.branch.field_groups.company_info",state:fe.Expanded},{title:"views.branch.field_groups.branch_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),b=O(null),x=r.useBranchEditForm(o.params.ulid),w=ee(()=>h.isUserLocationSelected),$=ee(()=>h.selectedUserLocation);at(async()=>{m("mode-state",xe.FORM_EDIT),w.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([V(),D(o.params.ulid)])});const D=async g=>{m("loading-state",!0);const v=await r.read(g);v.success&&v.data?x.setData({company_id:v.data.company.id,code:v.data.code,name:v.data.name,address:v.data.address,city:v.data.city,contact:v.data.contact,is_main:v.data.is_main,remarks:v.data.remarks,status:v.data.status}):s.push({name:"side-menu-company-branch-list"}),m("loading-state",!1)},V=async()=>{b.value=await i.getStatusDDL()},R=g=>{p.value[g].state===fe.Collapsed?p.value[g].state=fe.Expanded:p.value[g].state===fe.Expanded&&(p.value[g].state=fe.Collapsed)},E=g=>{let v=document.getElementById(g);v&&v.scrollIntoView({behavior:"smooth",block:"center"})},P=async()=>{x.hasErrors&&E(Object.keys(x.errors)[0]),m("loading-state",!0),await x.submit().then(()=>{m("update-profile"),s.push({name:"side-menu-company-branch-list"})}).catch(g=>{const v=ln(g);M("danger","",v)}).finally(()=>{m("loading-state",!1)})},S=async()=>{x.reset(),x.setErrors({}),await D(o.params.ulid)},C=()=>{x.forgetError("code"),x.code=="_AUTO_"?x.setData({code:""}):x.setData({code:"_AUTO_"})},M=(g,v,T)=>{m("show-alertplaceholder",{alertType:g,title:v,alertList:T})};return dt(x,ma.debounce(g=>{u.setLastEntity("BRANCH_EDIT",g.data())},500),{deep:!0}),(g,v)=>(L(),U("form",{id:"branchForm",onSubmit:Rt(P,["prevent"])},[l(t(ba),{cards:p.value,"using-side-tab":!1,onHandleExpandCard:R},{"card-items-0":f(()=>[c("div",TPe,[l(t(K),null,{default:f(()=>[A(_($.value.company.code)+" ",1),PPe,A(" "+_($.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(x).company_id,"onUpdate:modelValue":v[0]||(v[0]=T=>t(x).company_id=T)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",DPe,[c("div",RPe,[l(t(K),{class:F({"text-danger":t(x).invalid("code")})},{default:f(()=>[A(_(t(a)("views.branch.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(x).code,"onUpdate:modelValue":v[1]||(v[1]=T=>t(x).code=T),type:"text",class:F({"border-danger":t(x).invalid("code")}),placeholder:t(a)("views.branch.fields.code"),onSetAuto:C,onChange:v[2]||(v[2]=T=>t(x).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(x).errors.code},null,8,["messages"])]),c("div",OPe,[l(t(K),{class:F({"text-danger":t(x).invalid("name")})},{default:f(()=>[A(_(t(a)("views.branch.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(x).name,"onUpdate:modelValue":v[3]||(v[3]=T=>t(x).name=T),type:"text",class:F({"border-danger":t(x).invalid("name")}),placeholder:t(a)("views.branch.fields.name"),onChange:v[4]||(v[4]=T=>t(x).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(x).errors.name},null,8,["messages"])]),c("div",VPe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.branch.fields.address")),1)]),_:1}),l(t(la),{modelValue:t(x).address,"onUpdate:modelValue":v[5]||(v[5]=T=>t(x).address=T),type:"text",placeholder:t(a)("views.branch.fields.address")},null,8,["modelValue","placeholder"])]),c("div",UPe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.branch.fields.city")),1)]),_:1}),l(t(Oe),{modelValue:t(x).city,"onUpdate:modelValue":v[6]||(v[6]=T=>t(x).city=T),type:"text",placeholder:t(a)("views.branch.fields.city")},null,8,["modelValue","placeholder"])]),c("div",FPe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.branch.fields.contact")),1)]),_:1}),l(t(Oe),{modelValue:t(x).contact,"onUpdate:modelValue":v[7]||(v[7]=T=>t(x).contact=T),type:"text",placeholder:t(a)("views.branch.fields.contact")},null,8,["modelValue","placeholder"])]),c("div",jPe,[l(t(K),{class:F([{"text-danger":t(x).invalid("is_main")},"pr-5"])},{default:f(()=>[A(_(t(a)("views.branch.fields.is_main")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(x).is_main,"onUpdate:modelValue":v[8]||(v[8]=T=>t(x).is_main=T),type:"checkbox",class:F({"border-danger":t(x).invalid("is_main")}),placeholder:t(a)("views.branch.fields.is_main"),onChange:v[9]||(v[9]=T=>t(x).validate("is_main"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(x).errors.is_main},null,8,["messages"])]),c("div",HPe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.branch.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(x).remarks,"onUpdate:modelValue":v[10]||(v[10]=T=>t(x).remarks=T),type:"text",placeholder:t(a)("views.branch.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])]),c("div",NPe,[l(t(K),{class:F({"text-danger":t(x).invalid("status")})},{default:f(()=>[A(_(t(a)("views.branch.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(x).status,"onUpdate:modelValue":v[11]||(v[11]=T=>t(x).status=T),class:F({"border-danger":t(x).invalid("status")}),onChange:v[12]||(v[12]=T=>t(x).validate("status"))},{default:f(()=>[c("option",zPe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(b.value,T=>(L(),U("option",{key:T.code,value:T.code},_(t(a)(T.name)),9,BPe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(x).errors.status},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",qPe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(x).validating||t(x).hasErrors},{default:f(()=>[t(x).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:S},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),GPe={class:"mt-8"},ZPe={key:0,class:"flex w-full mt-4 sm:w-auto sm:mt-0"},KPe={class:"ml-4 mr-4"},XPe={class:"font-medium"},YPe={class:"mt-1 text-slate-500"},QPe=Ce({__name:"WarehouseIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.warehouse.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[warehouseNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-company-warehouse-create"})},V=async()=>{g(),P(i.value),i.value=xe.LIST,a.push({name:"side-menu-company-warehouse-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.warehouse.actions.create";break;case xe.FORM_EDIT:h.value="views.warehouse.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.warehouse.page_title";break}},P=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("WAREHOUSE_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("WAREHOUSE_EDIT");break}},S=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},C=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},M=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",GPe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[i.value!=t(xe).INDEX?(L(),U("div",ZPe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])):Me("",!0)]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:S,onShowAlertplaceholder:C,onShowNotification:M})]),_:1},8,["visible"]),l(fn,{"ref-key":"warehouseNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",KPe,[c("div",XPe,_(w.value),1),c("div",YPe,_($.value),1)])]),_:1})])}}});class co{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useWarehouseCreateForm(){const e=je("api.post.warehouse.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",branch_id:"",code:"_AUTO_",name:"",address:null,city:null,contact:null,remarks:null,status:"ACTIVE"})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.status&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.warehouse.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.status&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.warehouse.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.warehouse.read",{warehouse:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useWarehouseEditForm(e){const a=je("api.post.warehouse.edit",e,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",branch_id:"",code:"_AUTO_",name:"",address:null,city:null,contact:null,remarks:null,status:"ACTIVE"})}async delete(e){const a={success:!1};try{const s=je("api.post.warehouse.delete",e,!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const JPe={class:"flex justify-center italic"},eDe={class:"flex justify-end gap-1"},tDe={class:"flex flex-row"},aDe={class:"ml-5 w-48 text-right pr-5"},nDe={class:"flex-1"},sDe={class:"flex flex-row"},oDe={class:"ml-5 w-48 text-right pr-5"},rDe={class:"flex-1"},iDe={class:"flex flex-row"},lDe={class:"ml-5 w-48 text-right pr-5"},cDe={class:"flex-1"},dDe={class:"flex flex-row"},uDe={class:"ml-5 w-48 text-right pr-5"},pDe={class:"flex-1"},hDe={class:"flex flex-row"},fDe={class:"ml-5 w-48 text-right pr-5"},mDe={class:"flex-1"},vDe={class:"flex flex-row"},yDe={class:"ml-5 w-48 text-right pr-5"},_De={class:"flex-1"},gDe={class:"flex flex-row"},kDe={class:"ml-5 w-48 text-right pr-5"},bDe={class:"flex-1"},wDe={key:0},xDe={key:1},MDe={class:"p-5 text-center"},CDe={class:"mt-5 text-3xl"},SDe={class:"mt-2 text-slate-500"},IDe=c("br",null,null,-1),LDe={class:"px-5 pb-8 text-center"},$De=Ce({__name:"WarehouseList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new co,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(C,M,g,v)=>{i("loading-state",!0);let T=x.value.company.id,j=x.value.branch.id;const B={with_trashed:!1,company_id:T,branch_id:j,search:C,status:void 0,refresh:M,page:g,per_page:v};let oe=await o.readAnyPaginate(B);oe.success&&oe.data?p.value=oe.data:S("danger","",oe.errors),i("loading-state",!1)},$=async C=>{await w(C.search.text,!0,C.pagination.page,C.pagination.per_page)},D=C=>{m.value===C?m.value=null:m.value=C},V=C=>{if(!p.value)return;let M=p.value.data[C].ulid;s.push({name:"side-menu-company-warehouse-edit",params:{ulid:M}})},R=C=>{if(!p.value)return;let M=p.value.data[C].ulid;u.value=M,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let C=await o.delete(u.value);C.success?(i("update-profile"),await w("",!0,1,10),P(a("views.warehouse.alert.delete_warehouse.title"),a("views.warehouse.alert.delete_warehouse.content"))):S("danger","",C.errors),i("loading-state",!1)},P=(C,M)=>{i("show-notification",{title:C,content:M})},S=(C,M,g)=>{i("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return(C,M)=>(L(),ge(t(mn),{title:t(a)("views.warehouse.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.warehouse.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.warehouse.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.warehouse.table.cols.status")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",JPe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(g,v)=>(L(),U(ke,{key:g.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(g.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[g.status==="ACTIVE"?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),g.status==="INACTIVE"?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",eDe,[l(t(me),{variant:"outline-secondary",onClick:T=>D(v)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>V(v)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>R(v)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==v})},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",tDe,[c("div",aDe,_(t(a)("views.warehouse.fields.code")),1),c("div",nDe,_(g.code),1)]),c("div",sDe,[c("div",oDe,_(t(a)("views.warehouse.fields.name")),1),c("div",rDe,_(g.name),1)]),c("div",iDe,[c("div",lDe,_(t(a)("views.warehouse.fields.address")),1),c("div",cDe,_(g.address),1)]),c("div",dDe,[c("div",uDe,_(t(a)("views.warehouse.fields.city")),1),c("div",pDe,_(g.city),1)]),c("div",hDe,[c("div",fDe,_(t(a)("views.warehouse.fields.contact")),1),c("div",mDe,_(g.contact),1)]),c("div",vDe,[c("div",yDe,_(t(a)("views.warehouse.fields.remarks")),1),c("div",_De,_(g.remarks),1)]),c("div",gDe,[c("div",kDe,_(t(a)("views.warehouse.fields.status")),1),c("div",bDe,[g.status==="ACTIVE"?(L(),U("span",wDe,_(t(a)("components.dropdown.values.statusDDL.active")),1)):Me("",!0),g.status==="INACTIVE"?(L(),U("span",xDe,_(t(a)("components.dropdown.values.statusDDL.inactive")),1)):Me("",!0)])])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:M[1]||(M[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",MDe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",CDe,_(t(a)("components.delete-modal.title")),1),c("div",SDe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),IDe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",LDe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:M[0]||(M[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),ADe={class:"p-5"},EDe=c("br",null,null,-1),TDe={class:"p-5"},PDe={class:"pb-4"},DDe={class:"pb-4"},RDe={class:"pb-4"},ODe={class:"pb-4"},VDe={class:"pb-4"},UDe={class:"pb-4"},FDe={class:"pb-4"},jDe={value:""},HDe=["value"],NDe={class:"flex gap-4"},zDe=Ce({__name:"WarehouseCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new co,r=new aa,i=new Dt,u=zt(),h=e,m=O([{title:"views.warehouse.field_groups.company_info",state:fe.Expanded},{title:"views.warehouse.field_groups.warehouse_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=O(null),b=o.useWarehouseCreateForm(),x=ee(()=>u.isUserLocationSelected),w=ee(()=>u.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_CREATE),x.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([V()]),D(),$()});const $=()=>{b.setData({company_id:w.value.company.id,branch_id:w.value.branch.id})},D=()=>{let g=i.getLastEntity("WAREHOUSE_CREATE");g&&b.setData(g)},V=async()=>{const g=await r.getStatusDDL();g&&(p.value=g)},R=g=>{m.value[g].state===fe.Collapsed?m.value[g].state=fe.Expanded:m.value[g].state===fe.Expanded&&(m.value[g].state=fe.Collapsed)},E=g=>{let v=document.getElementById(g);v&&v.scrollIntoView({behavior:"smooth",block:"center"})},P=async()=>{b.hasErrors&&E(Object.keys(b.errors)[0]),h("loading-state",!0),await b.submit().then(()=>{S(),h("update-profile"),s.push({name:"side-menu-company-warehouse-list"})}).catch(g=>{let v=ln(g);M("danger","",v)}).finally(()=>{h("loading-state",!1)})},S=()=>{b.reset(),b.setErrors({})},C=()=>{b.forgetError("code"),b.code=="_AUTO_"?b.setData({code:""}):b.setData({code:"_AUTO_"})},M=(g,v,T)=>{h("show-alertplaceholder",{alertType:g,title:v,alertList:T})};return dt(b,ma.debounce(g=>{i.setLastEntity("WAREHOUSE_CREATE",g.data())},500),{deep:!0}),(g,v)=>(L(),U("form",{id:"warehouseForm",onSubmit:Rt(P,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:R},{"card-items-0":f(()=>[c("div",ADe,[l(t(K),null,{default:f(()=>[A(_(w.value.company.code)+" ",1),EDe,A(" "+_(w.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(b).company_id,"onUpdate:modelValue":v[0]||(v[0]=T=>t(b).company_id=T)},null,8,["modelValue"]),l(t(Oe),{type:"hidden",modelValue:t(b).branch_id,"onUpdate:modelValue":v[1]||(v[1]=T=>t(b).branch_id=T)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",TDe,[c("div",PDe,[l(t(K),{class:F({"text-danger":t(b).invalid("code")})},{default:f(()=>[A(_(t(a)("views.warehouse.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(b).code,"onUpdate:modelValue":v[2]||(v[2]=T=>t(b).code=T),type:"text",class:F({"border-danger":t(b).invalid("code")}),placeholder:t(a)("views.warehouse.fields.code"),onSetAuto:C,onChange:v[3]||(v[3]=T=>t(b).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.code},null,8,["messages"])]),c("div",DDe,[l(t(K),{class:F({"text-danger":t(b).invalid("name")})},{default:f(()=>[A(_(t(a)("views.warehouse.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(b).name,"onUpdate:modelValue":v[4]||(v[4]=T=>t(b).name=T),type:"text",class:F({"border-danger":t(b).invalid("name")}),placeholder:t(a)("views.warehouse.fields.name"),onChange:v[5]||(v[5]=T=>t(b).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.name},null,8,["messages"])]),c("div",RDe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.fields.address")),1)]),_:1}),l(t(la),{modelValue:t(b).address,"onUpdate:modelValue":v[6]||(v[6]=T=>t(b).address=T),type:"text",placeholder:t(a)("views.warehouse.fields.address")},null,8,["modelValue","placeholder"])]),c("div",ODe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.fields.city")),1)]),_:1}),l(t(Oe),{modelValue:t(b).city,"onUpdate:modelValue":v[7]||(v[7]=T=>t(b).city=T),type:"text",placeholder:t(a)("views.warehouse.fields.city")},null,8,["modelValue","placeholder"])]),c("div",VDe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.fields.contact")),1)]),_:1}),l(t(Oe),{modelValue:t(b).contact,"onUpdate:modelValue":v[8]||(v[8]=T=>t(b).contact=T),type:"text",placeholder:t(a)("views.warehouse.fields.contact")},null,8,["modelValue","placeholder"])]),c("div",UDe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(b).remarks,"onUpdate:modelValue":v[9]||(v[9]=T=>t(b).remarks=T),type:"text",placeholder:t(a)("views.warehouse.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])]),c("div",FDe,[l(t(K),{class:F({"text-danger":t(b).invalid("status")})},{default:f(()=>[A(_(t(a)("views.warehouse.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(b).status,"onUpdate:modelValue":v[10]||(v[10]=T=>t(b).status=T),class:F({"border-danger":t(b).invalid("status")}),onChange:v[11]||(v[11]=T=>t(b).validate("status"))},{default:f(()=>[c("option",jDe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(p.value,T=>(L(),U("option",{key:T.code,value:T.code},_(t(a)(T.name)),9,HDe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(b).errors.status},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",NDe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(b).validating||t(b).hasErrors},{default:f(()=>[t(b).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:S},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),BDe={class:"p-5"},qDe=c("br",null,null,-1),WDe={class:"p-5"},GDe={class:"pb-4"},ZDe={class:"pb-4"},KDe={class:"pb-4"},XDe={class:"pb-4"},YDe={class:"pb-4"},QDe={class:"pb-4"},JDe={class:"pb-4"},eRe={value:""},tRe=["value"],aRe={class:"flex gap-4"},nRe=Ce({__name:"WarehouseEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=Sa(),o=ct(),r=new co,i=new aa,u=new Dt,h=zt(),m=e,p=O([{title:"views.warehouse.field_groups.company_info",state:fe.Expanded},{title:"views.warehouse.field_groups.warehouse_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),b=O(null),x=r.useWarehouseEditForm(s.params.ulid),w=ee(()=>h.isUserLocationSelected),$=ee(()=>h.selectedUserLocation);at(async()=>{m("mode-state",xe.FORM_EDIT),w.value||o.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([V(),D(s.params.ulid)])});const D=async g=>{m("loading-state",!0);const v=await r.read(g);v.success&&v.data?x.setData({company_id:v.data.company.id,branch_id:v.data.branch.id,code:v.data.code,name:v.data.name,address:v.data.address,city:v.data.city,contact:v.data.contact,remarks:v.data.remarks,status:v.data.status}):o.push({name:"side-menu-company-warehouse-list"}),m("loading-state",!1)},V=async()=>{b.value=await i.getStatusDDL()},R=g=>{p.value[g].state===fe.Collapsed?p.value[g].state=fe.Expanded:p.value[g].state===fe.Expanded&&(p.value[g].state=fe.Collapsed)},E=g=>{let v=document.getElementById(g);v&&v.scrollIntoView({behavior:"smooth",block:"center"})},P=async()=>{x.hasErrors&&E(Object.keys(x.errors)[0]),m("loading-state",!0),await x.submit().then(()=>{m("update-profile"),o.push({name:"side-menu-company-warehouse-list"})}).catch(g=>{const v=ln(g);M("danger","",v)}).finally(()=>{m("loading-state",!1)})},S=async()=>{x.reset(),x.setErrors({}),await D(s.params.ulid)},C=()=>{x.forgetError("code"),x.code=="_AUTO_"?x.setData({code:""}):x.setData({code:"_AUTO_"})},M=(g,v,T)=>{m("show-alertplaceholder",{alertType:g,title:v,alertList:T})};return dt(x,ma.debounce(g=>{u.setLastEntity("WAREHOUSE_EDIT",g.data())},500),{deep:!0}),(g,v)=>(L(),U("form",{id:"warehouseForm",onSubmit:Rt(P,["prevent"])},[l(t(ba),{cards:p.value,"using-side-tab":!1,onHandleExpandCard:R},{"card-items-0":f(()=>[c("div",BDe,[l(t(K),null,{default:f(()=>[A(_($.value.company.code)+" ",1),qDe,A(" "+_($.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(x).company_id,"onUpdate:modelValue":v[0]||(v[0]=T=>t(x).company_id=T)},null,8,["modelValue"]),l(t(Oe),{type:"hidden",modelValue:t(x).branch_id,"onUpdate:modelValue":v[1]||(v[1]=T=>t(x).branch_id=T)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",WDe,[c("div",GDe,[l(t(K),{class:F({"text-danger":t(x).invalid("code")})},{default:f(()=>[A(_(t(a)("views.warehouse.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(x).code,"onUpdate:modelValue":v[2]||(v[2]=T=>t(x).code=T),type:"text",class:F({"border-danger":t(x).invalid("code")}),placeholder:t(a)("views.warehouse.fields.code"),onSetAuto:C,onChange:v[3]||(v[3]=T=>t(x).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(x).errors.code},null,8,["messages"])]),c("div",ZDe,[l(t(K),{class:F({"text-danger":t(x).invalid("name")})},{default:f(()=>[A(_(t(a)("views.warehouse.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(x).name,"onUpdate:modelValue":v[4]||(v[4]=T=>t(x).name=T),type:"text",class:F({"border-danger":t(x).invalid("name")}),placeholder:t(a)("views.warehouse.fields.name"),onChange:v[5]||(v[5]=T=>t(x).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(x).errors.name},null,8,["messages"])]),c("div",KDe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.fields.address")),1)]),_:1}),l(t(la),{modelValue:t(x).address,"onUpdate:modelValue":v[6]||(v[6]=T=>t(x).address=T),type:"text",placeholder:t(a)("views.warehouse.fields.address")},null,8,["modelValue","placeholder"])]),c("div",XDe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.fields.city")),1)]),_:1}),l(t(Oe),{modelValue:t(x).city,"onUpdate:modelValue":v[7]||(v[7]=T=>t(x).city=T),type:"text",placeholder:t(a)("views.warehouse.fields.city")},null,8,["modelValue","placeholder"])]),c("div",YDe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.fields.contact")),1)]),_:1}),l(t(Oe),{modelValue:t(x).contact,"onUpdate:modelValue":v[8]||(v[8]=T=>t(x).contact=T),type:"text",placeholder:t(a)("views.warehouse.fields.contact")},null,8,["modelValue","placeholder"])]),c("div",QDe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(x).remarks,"onUpdate:modelValue":v[9]||(v[9]=T=>t(x).remarks=T),type:"text",placeholder:t(a)("views.warehouse.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])]),c("div",JDe,[l(t(K),{class:F({"text-danger":t(x).invalid("status")})},{default:f(()=>[A(_(t(a)("views.warehouse.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(x).status,"onUpdate:modelValue":v[10]||(v[10]=T=>t(x).status=T),class:F({"border-danger":t(x).invalid("status")}),onChange:v[11]||(v[11]=T=>t(x).validate("status"))},{default:f(()=>[c("option",eRe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(b.value,T=>(L(),U("option",{key:T.code,value:T.code},_(t(a)(T.name)),9,tRe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(x).errors.status},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",aRe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(x).validating||t(x).hasErrors},{default:f(()=>[t(x).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:S},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),sRe={class:"mt-8"},oRe={key:0,class:"flex w-full mt-4 sm:w-auto sm:mt-0"},rRe={class:"ml-4 mr-4"},iRe={class:"font-medium"},lRe={class:"mt-1 text-slate-500"},cRe=Ce({__name:"InvestorIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.investor.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[investorNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-company-investor-create"})},V=async()=>{g(),P(i.value),i.value=xe.LIST,a.push({name:"side-menu-company-investor-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.investor.actions.create";break;case xe.FORM_EDIT:h.value="views.investor.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.investor.page_title";break}},P=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("INVESTOR_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("INVESTOR_EDIT");break}},S=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},C=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},M=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",sRe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[i.value!=t(xe).INDEX?(L(),U("div",oRe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])):Me("",!0)]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:S,onShowAlertplaceholder:C,onShowNotification:M})]),_:1},8,["visible"]),l(fn,{"ref-key":"investorNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",rRe,[c("div",iRe,_(w.value),1),c("div",lRe,_($.value),1)])]),_:1})])}}});class AP{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useInvestorCreateForm(){const e=je("api.post.investor.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",name:"",remarks:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.investor.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.investor.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.investor.read",{investor:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useInvestorEditForm(e){const a=je("api.post.investor.edit",{investor:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:"",remarks:""})}async delete(e){const a={success:!1};try{const s=je("api.post.investor.delete",{investor:e},!1,this.ziggyRoute),o=await nt.post(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const dRe={class:"flex justify-center italic"},uRe={class:"flex justify-end gap-1"},pRe={class:"flex flex-row"},hRe={class:"ml-5 w-48 text-right pr-5"},fRe={class:"flex-1"},mRe={class:"flex flex-row"},vRe={class:"ml-5 w-48 text-right pr-5"},yRe={class:"flex-1"},_Re={class:"flex flex-row"},gRe={class:"ml-5 w-48 text-right pr-5"},kRe={class:"flex-1"},bRe={class:"p-5 text-center"},wRe={class:"mt-5 text-3xl"},xRe={class:"mt-2 text-slate-500"},MRe=c("br",null,null,-1),CRe={class:"px-5 pb-8 text-center"},SRe=Ce({__name:"InvestorList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new AP,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(C,M,g,v)=>{i("loading-state",!0);const j={with_trashed:!1,company_id:x.value.company.id,search:C,include_id:void 0,refresh:M,page:g,per_page:v},B=await o.readAnyPaginate(j);B.success&&B.data?p.value=B.data:S("danger","",B.errors),i("loading-state",!1)},$=async C=>{await w(C.search.text,!1,C.pagination.page,C.pagination.per_page)},D=C=>{m.value===C?m.value=null:m.value=C},V=C=>{if(!p.value)return;let M=p.value.data[C].ulid;s.push({name:"side-menu-company-investor-edit",params:{ulid:M}})},R=C=>{if(!p.value)return;let M=p.value.data[C].ulid;u.value=M,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let C=await o.delete(u.value);C.success?(i("update-profile"),await w("",!0,1,10),P(a("views.investor.alert.delete_investor.title"),a("views.investor.alert.delete_investor.content"))):S("danger","",C.errors),i("loading-state",!1)},P=(C,M)=>{i("show-notification",{title:C,content:M})},S=(C,M,g)=>{i("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return(C,M)=>(L(),ge(t(mn),{title:t(a)("views.investor.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.investor.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.investor.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.investor.table.cols.remarks")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",dRe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(g,v)=>(L(),U(ke,{key:g.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(g.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.remarks),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",uRe,[l(t(me),{variant:"outline-secondary",onClick:T=>D(v)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>V(v)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>R(v)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==v})},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",pRe,[c("div",hRe,_(t(a)("views.investor.fields.code")),1),c("div",fRe,_(g.code),1)]),c("div",mRe,[c("div",vRe,_(t(a)("views.investor.fields.name")),1),c("div",yRe,_(g.name),1)]),c("div",_Re,[c("div",gRe,_(t(a)("views.investor.fields.remarks")),1),c("div",kRe,_(g.remarks),1)])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:M[1]||(M[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",bRe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",wRe,_(t(a)("components.delete-modal.title")),1),c("div",xRe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),MRe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",CRe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:M[0]||(M[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),IRe={class:"p-5"},LRe=c("br",null,null,-1),$Re={class:"p-5"},ARe={class:"pb-4"},ERe={class:"pb-4"},TRe={class:"pb-4"},PRe={class:"flex gap-4"},DRe=Ce({__name:"InvestorCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new AP,r=new aa,i=new Dt,u=zt(),h=e,m=O([{title:"views.investor.field_groups.company_info",state:fe.Expanded},{title:"views.investor.field_groups.investor_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=O(null),b=o.useInvestorCreateForm(),x=ee(()=>u.isUserLocationSelected),w=ee(()=>u.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_CREATE),x.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([V()]),D(),$()});const $=()=>{b.setData({company_id:w.value.company.id})},D=()=>{let v=i.getLastEntity("INVESTOR_CREATE");v&&b.setData(v)},V=async()=>{const v=await r.getStatusDDL();v&&(p.value=v)},R=v=>{m.value[v].state===fe.Collapsed?m.value[v].state=fe.Expanded:m.value[v].state===fe.Expanded&&(m.value[v].state=fe.Collapsed)},E=v=>{let T=document.getElementById(v);T&&T.scrollIntoView({behavior:"smooth",block:"center"})},P=async()=>{b.hasErrors&&E(Object.keys(b.errors)[0]),h("loading-state",!0),await b.submit().then(()=>{S(),h("update-profile"),s.push({name:"side-menu-company-investor-list"})}).catch(v=>{let T=g(v);M("danger","",T)}).finally(()=>{h("loading-state",!1)})},S=()=>{b.reset(),b.setErrors({})},C=()=>{b.forgetError("code"),b.code=="_AUTO_"?b.setData({code:""}):b.setData({code:"_AUTO_"})},M=(v,T,j)=>{h("show-alertplaceholder",{alertType:v,title:T,alertList:j})},g=v=>{const T={},j=v,B=ot(v)?v.response:j==null?void 0:j.response;if(B&&B.data){const oe=B.data;if(oe.errors&&typeof oe.errors=="object"){for(const be of Object.keys(oe.errors)){const $e=oe.errors[be];Array.isArray($e)?T[be]=$e:$e!=null&&(T[be]=[String($e)])}return T}if(oe.message)return T.error=[String(oe.message)],T}return v instanceof Error&&v.message?T.error=[v.message]:T.error=["Unknown error"],T};return dt(b,ma.debounce(v=>{i.setLastEntity("INVESTOR_CREATE",v.data())},500),{deep:!0}),(v,T)=>(L(),U("form",{id:"investorForm",onSubmit:Rt(P,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:R},{"card-items-0":f(()=>[c("div",IRe,[l(t(K),null,{default:f(()=>[A(_(w.value.company.code)+" ",1),LRe,A(" "+_(w.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(b).company_id,"onUpdate:modelValue":T[0]||(T[0]=j=>t(b).company_id=j)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",$Re,[c("div",ARe,[l(t(K),{class:F({"text-danger":t(b).invalid("code")})},{default:f(()=>[A(_(t(a)("views.investor.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(b).code,"onUpdate:modelValue":T[1]||(T[1]=j=>t(b).code=j),type:"text",class:F({"border-danger":t(b).invalid("code")}),placeholder:t(a)("views.investor.fields.code"),onSetAuto:C,onChange:T[2]||(T[2]=j=>t(b).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.code},null,8,["messages"])]),c("div",ERe,[l(t(K),{class:F({"text-danger":t(b).invalid("name")})},{default:f(()=>[A(_(t(a)("views.investor.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(b).name,"onUpdate:modelValue":T[3]||(T[3]=j=>t(b).name=j),type:"text",class:F({"border-danger":t(b).invalid("name")}),placeholder:t(a)("views.investor.fields.name"),onChange:T[4]||(T[4]=j=>t(b).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.name},null,8,["messages"])]),c("div",TRe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.investor.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(b).remarks,"onUpdate:modelValue":T[5]||(T[5]=j=>t(b).remarks=j),type:"text",placeholder:t(a)("views.investor.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])])])]),"card-items-button":f(()=>[c("div",PRe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(b).validating||t(b).hasErrors},{default:f(()=>[t(b).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:S},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),RRe={class:"p-5"},ORe=c("br",null,null,-1),VRe={class:"p-5"},URe={class:"pb-4"},FRe={class:"pb-4"},jRe={class:"pb-4"},HRe={class:"flex gap-4"},NRe=Ce({__name:"InvestorEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=Sa(),r=new AP,i=new aa,u=new Dt,h=zt(),m=e,p=O([{title:"views.investor.field_groups.company_info",state:fe.Expanded},{title:"views.investor.field_groups.investor_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),b=O(null),x=r.useInvestorEditForm(o.params.ulid),w=ee(()=>h.isUserLocationSelected),$=ee(()=>h.selectedUserLocation);at(async()=>{m("mode-state",xe.FORM_EDIT),w.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([V(),D(o.params.ulid)])});const D=async g=>{m("loading-state",!0);const v=await r.read(g);v.success&&v.data?x.setData({company_id:v.data.company.id,code:v.data.code,name:v.data.name,remarks:v.data.remarks}):s.push({name:"side-menu-company-investor-list"}),m("loading-state",!1)},V=async()=>{b.value=await i.getStatusDDL()},R=g=>{p.value[g].state===fe.Collapsed?p.value[g].state=fe.Expanded:p.value[g].state===fe.Expanded&&(p.value[g].state=fe.Collapsed)},E=g=>{let v=document.getElementById(g);v&&v.scrollIntoView({behavior:"smooth",block:"center"})},P=async()=>{x.hasErrors&&E(Object.keys(x.errors)[0]),m("loading-state",!0),await x.submit().then(()=>{m("update-profile"),s.push({name:"side-menu-company-investor-list"})}).catch(g=>{const v=ln(g);M("danger","",v)}).finally(()=>{m("loading-state",!1)})},S=async()=>{x.reset(),x.setErrors({}),await D(o.params.ulid)},C=()=>{x.forgetError("code"),x.code=="_AUTO_"?x.setData({code:""}):x.setData({code:"_AUTO_"})},M=(g,v,T)=>{m("show-alertplaceholder",{alertType:g,title:v,alertList:T})};return dt(x,ma.debounce(g=>{u.setLastEntity("INVESTOR_EDIT",g.data())},500),{deep:!0}),(g,v)=>(L(),U("form",{id:"investorForm",onSubmit:Rt(P,["prevent"])},[l(t(ba),{cards:p.value,"using-side-tab":!1,onHandleExpandCard:R},{"card-items-0":f(()=>[c("div",RRe,[l(t(K),null,{default:f(()=>[A(_($.value.company.code)+" ",1),ORe,A(" "+_($.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(x).company_id,"onUpdate:modelValue":v[0]||(v[0]=T=>t(x).company_id=T)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",VRe,[c("div",URe,[l(t(K),{class:F({"text-danger":t(x).invalid("code")})},{default:f(()=>[A(_(t(a)("views.investor.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(x).code,"onUpdate:modelValue":v[1]||(v[1]=T=>t(x).code=T),type:"text",class:F({"border-danger":t(x).invalid("code")}),placeholder:t(a)("views.investor.fields.code"),onSetAuto:C,onChange:v[2]||(v[2]=T=>t(x).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(x).errors.code},null,8,["messages"])]),c("div",FRe,[l(t(K),{class:F({"text-danger":t(x).invalid("name")})},{default:f(()=>[A(_(t(a)("views.investor.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(x).name,"onUpdate:modelValue":v[3]||(v[3]=T=>t(x).name=T),type:"text",class:F({"border-danger":t(x).invalid("name")}),placeholder:t(a)("views.investor.fields.name"),onChange:v[4]||(v[4]=T=>t(x).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(x).errors.name},null,8,["messages"])]),c("div",jRe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.investor.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(x).remarks,"onUpdate:modelValue":v[5]||(v[5]=T=>t(x).remarks=T),type:"text",placeholder:t(a)("views.investor.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])])])]),"card-items-button":f(()=>[c("div",HRe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(x).validating||t(x).hasErrors},{default:f(()=>[t(x).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:S},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),zRe={class:"mt-8"},BRe={key:0,class:"flex w-full mt-4 sm:w-auto sm:mt-0"},qRe={class:"ml-4 mr-4"},WRe={class:"font-medium"},GRe={class:"mt-1 text-slate-500"},ZRe=Ce({__name:"CashAccountIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.cash_account.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[cashAccountNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-finance-cash-account-create"})},V=async()=>{g(),P(i.value),i.value=xe.LIST,a.push({name:"side-menu-finance-cash-account-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.cash_account.actions.create";break;case xe.FORM_EDIT:h.value="views.cash_account.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.cash_account.page_title";break}},P=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("CASH_ACCOUNT_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("CASH_ACCOUNT_EDIT");break}},S=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},C=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},M=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",zRe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[i.value!=t(xe).INDEX?(L(),U("div",BRe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])):Me("",!0)]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:S,onShowAlertplaceholder:C,onShowNotification:M})]),_:1},8,["visible"]),l(fn,{"ref-key":"cashAccountNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",qRe,[c("div",WRe,_(w.value),1),c("div",GRe,_($.value),1)])]),_:1})])}}});class EP{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");mt(this,"cacheService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn,this.cacheService=new Dt}useCashAccountCreateForm(){const e=je("api.post.cash_account.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",branch_id:"",code:"_AUTO_",name:"",is_bank:!1,is_active:!0,remarks:null})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.cash_account.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.cash_account.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.cash_account.read",{cash_account:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useCashAccountEditForm(e){const a=je("api.post.cash_account.edit",{cash_account:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:"",is_bank:!1,is_active:!0,remarks:null})}async delete(e){const a={success:!1};try{const s=je("api.post.cash_account.delete",{cash_account:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const KRe={class:"flex justify-center italic"},XRe={class:"flex justify-end gap-1"},YRe={class:"flex flex-row"},QRe={class:"ml-5 w-48 text-right pr-5"},JRe={class:"flex-1"},eOe={class:"flex flex-row"},tOe={class:"ml-5 w-48 text-right pr-5"},aOe={class:"flex-1"},nOe={class:"flex flex-row"},sOe={class:"ml-5 w-48 text-right pr-5"},oOe={class:"flex-1"},rOe={key:0},iOe={key:1},lOe={class:"flex flex-row"},cOe={class:"ml-5 w-48 text-right pr-5"},dOe={class:"flex-1"},uOe={key:0},pOe={key:1},hOe={class:"flex flex-row"},fOe={class:"ml-5 w-48 text-right pr-5"},mOe={class:"flex-1"},vOe={class:"p-5 text-center"},yOe={class:"mt-5 text-3xl"},_Oe={class:"mt-2 text-slate-500"},gOe=c("br",null,null,-1),kOe={class:"px-5 pb-8 text-center"},bOe=Ce({__name:"CashAccountList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new EP,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(C,M,g,v)=>{i("loading-state",!0);const j={with_trashed:!1,company_id:x.value.company.id,search:C,refresh:M,page:g,per_page:v};let B=await o.readAnyPaginate(j);B.success&&B.data?p.value=B.data:S("danger","",B.errors),i("loading-state",!1)},$=async C=>{await w(C.search.text,!0,C.pagination.page,C.pagination.per_page)},D=C=>{m.value===C?m.value=null:m.value=C},V=C=>{if(!p.value)return;let M=p.value.data[C].ulid;s.push({name:"side-menu-finance-cash-account-edit",params:{ulid:M}})},R=C=>{if(!p.value)return;let M=p.value.data[C].ulid;u.value=M,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let C=await o.delete(u.value);C.success?(i("update-profile"),await w("",!0,1,10),P(a("views.cash_account.alert.delete_cash_account.title"),a("views.cash_account.alert.delete_cash_account.content"))):S("danger","",C.errors),i("loading-state",!1)},P=(C,M)=>{i("show-notification",{title:C,content:M})},S=(C,M,g)=>{i("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return(C,M)=>(L(),ge(t(mn),{title:t(a)("views.cash_account.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.cash_account.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.cash_account.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.cash_account.table.cols.is_bank")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.cash_account.table.cols.is_active")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",KRe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(g,v)=>(L(),U(ke,{key:g.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(g.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[g.is_bank===!0?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),g.is_bank===!1?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[g.is_active===!0?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),g.is_active===!1?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",XRe,[l(t(me),{variant:"outline-secondary",onClick:T=>D(v)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>V(v)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>R(v)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==v})},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",YRe,[c("div",QRe,_(t(a)("views.cash_account.fields.code")),1),c("div",JRe,_(g.code),1)]),c("div",eOe,[c("div",tOe,_(t(a)("views.cash_account.fields.name")),1),c("div",aOe,_(g.name),1)]),c("div",nOe,[c("div",sOe,_(t(a)("views.cash_account.fields.is_bank")),1),c("div",oOe,[g.is_bank?(L(),U("span",rOe,_(t(a)("components.dropdown.values.switch.on")),1)):(L(),U("span",iOe,_(t(a)("components.dropdown.values.switch.off")),1))])]),c("div",lOe,[c("div",cOe,_(t(a)("views.cash_account.fields.is_active")),1),c("div",dOe,[g.is_active?(L(),U("span",uOe,_(t(a)("components.dropdown.values.switch.on")),1)):(L(),U("span",pOe,_(t(a)("components.dropdown.values.switch.off")),1))])]),c("div",hOe,[c("div",fOe,_(t(a)("views.cash_account.fields.remarks")),1),c("div",mOe,_(g.remarks),1)])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:M[1]||(M[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",vOe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",yOe,_(t(a)("components.delete-modal.title")),1),c("div",_Oe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),gOe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",kOe,[l(t(me),{type:"button",variant:"outline-secondary",onClick:M[0]||(M[0]=()=>{h.value=!1}),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),wOe={class:"p-5"},xOe=c("br",null,null,-1),MOe=c("br",null,null,-1),COe={class:"p-5"},SOe={class:"pb-4"},IOe={class:"pb-4"},LOe={class:"pb-4"},$Oe={class:"pb-4"},AOe={class:"pb-4"},EOe={class:"flex gap-4"},TOe=Ce({__name:"CashAccountCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new EP;new aa;const r=new Dt,i=zt(),u=e,h=O([{title:"views.cash_account.field_groups.company_info",state:fe.Expanded},{title:"views.cash_account.field_groups.cash_account_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),m=o.useCashAccountCreateForm(),p=ee(()=>i.isUserLocationSelected),b=ee(()=>i.selectedUserLocation);at(async()=>{u("mode-state",xe.FORM_CREATE),p.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),w(),x()});const x=()=>{m.setData({company_id:b.value.company.id,branch_id:b.value.branch.id})},w=()=>{let C=r.getLastEntity("CASH_ACCOUNT_CREATE");C&&m.setData(C)},$=C=>{h.value[C].state===fe.Collapsed?h.value[C].state=fe.Expanded:h.value[C].state===fe.Expanded&&(h.value[C].state=fe.Collapsed)},D=C=>{let M=document.getElementById(C);M&&M.scrollIntoView({behavior:"smooth",block:"center"})},V=async()=>{m.hasErrors&&D(Object.keys(m.errors)[0]),u("loading-state",!0),await m.submit().then(()=>{R(),u("update-profile"),s.push({name:"side-menu-finance-cash-account-list"})}).catch(C=>{let M=S(C);P("danger","",M)}).finally(()=>{u("loading-state",!1)})},R=()=>{m.reset(),m.setErrors({})},E=()=>{m.forgetError("code"),m.code=="_AUTO_"?m.setData({code:""}):m.setData({code:"_AUTO_"})},P=(C,M,g)=>{u("show-alertplaceholder",{alertType:C,title:M,alertList:g})},S=C=>{const M={},g=C,v=ot(C)?C.response:g==null?void 0:g.response;if(v&&v.data){const T=v.data;if(T.errors&&typeof T.errors=="object"){for(const j of Object.keys(T.errors)){const B=T.errors[j];Array.isArray(B)?M[j]=B:B!=null&&(M[j]=[String(B)])}return M}if(T.message)return M.error=[String(T.message)],M}return C instanceof Error&&C.message?M.error=[C.message]:M.error=["Unknown error"],M};return dt(m,ma.debounce(C=>{r.setLastEntity("CASH_ACCOUNT_CREATE",C.data())},500),{deep:!0}),(C,M)=>(L(),U("form",{id:"cashAccountForm",onSubmit:Rt(V,["prevent"])},[l(t(ba),{cards:h.value,title:t(a)("views.cash_account.page_title"),onHandleExpandCard:$},{"card-items-0":f(()=>[c("div",wOe,[l(t(K),null,{default:f(()=>[A(_(b.value.company.code)+" ",1),xOe,A(" "+_(b.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(m).company_id,"onUpdate:modelValue":M[0]||(M[0]=g=>t(m).company_id=g)},null,8,["modelValue"]),l(t(K),{class:"mt-5"},{default:f(()=>[A(_(b.value.branch.code)+" ",1),MOe,A(" "+_(b.value.branch.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(m).branch_id,"onUpdate:modelValue":M[1]||(M[1]=g=>t(m).branch_id=g)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",COe,[c("div",SOe,[l(t(K),{class:F({"text-danger":t(m).invalid("code")})},{default:f(()=>[A(_(t(a)("views.cash_account.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(m).code,"onUpdate:modelValue":M[2]||(M[2]=g=>t(m).code=g),type:"text",class:F({"border-danger":t(m).invalid("code")}),placeholder:t(a)("views.cash_account.fields.code"),onSetAuto:E,onChange:M[3]||(M[3]=g=>t(m).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.code},null,8,["messages"])]),c("div",IOe,[l(t(K),{class:F({"text-danger":t(m).invalid("name")})},{default:f(()=>[A(_(t(a)("views.cash_account.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(m).name,"onUpdate:modelValue":M[4]||(M[4]=g=>t(m).name=g),type:"text",class:F({"border-danger":t(m).invalid("name")}),placeholder:t(a)("views.cash_account.fields.name"),onChange:M[5]||(M[5]=g=>t(m).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.name},null,8,["messages"])]),c("div",LOe,[l(t(K),{class:F([{"text-danger":t(m).invalid("is_bank")},"pr-5"])},{default:f(()=>[A(_(t(a)("views.cash_account.fields.is_bank")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(m).is_bank,"onUpdate:modelValue":M[6]||(M[6]=g=>t(m).is_bank=g),type:"checkbox",class:F({"border-danger":t(m).invalid("is_bank")}),placeholder:t(a)("views.cash_account.fields.is_bank"),onChange:M[7]||(M[7]=g=>t(m).validate("is_bank"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(m).errors.is_bank},null,8,["messages"])]),c("div",$Oe,[l(t(K),{class:F([{"text-danger":t(m).invalid("is_active")},"pr-5"])},{default:f(()=>[A(_(t(a)("views.cash_account.fields.is_active")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(m).is_active,"onUpdate:modelValue":M[8]||(M[8]=g=>t(m).is_active=g),type:"checkbox",class:F({"border-danger":t(m).invalid("is_active")}),placeholder:t(a)("views.cash_account.fields.is_active"),onChange:M[9]||(M[9]=g=>t(m).validate("is_active"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(m).errors.is_active},null,8,["messages"])]),c("div",AOe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.cash_account.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(m).remarks,"onUpdate:modelValue":M[10]||(M[10]=g=>t(m).remarks=g),type:"text",placeholder:t(a)("views.cash_account.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])])])]),"card-items-button":f(()=>[c("div",EOe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(m).validating||t(m).hasErrors},{default:f(()=>[t(m).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:R},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards","title"])],32))}}),POe={class:"p-5"},DOe=c("br",null,null,-1),ROe={class:"p-5"},OOe={class:"pb-4"},VOe={class:"pb-4"},UOe={class:"pb-4"},FOe={class:"pb-4"},jOe={class:"pb-4"},HOe={class:"flex gap-4"},NOe=Ce({__name:"CashAccountEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=Sa(),r=new EP;new aa;const i=new Dt,u=zt(),h=e,m=O([{title:"views.cash_account.field_groups.company_info",state:fe.Expanded},{title:"views.cash_account.field_groups.cash_account_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=r.useCashAccountEditForm(o.params.ulid),b=ee(()=>u.isUserLocationSelected),x=ee(()=>u.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_EDIT),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w(o.params.ulid)});const w=async S=>{h("loading-state",!0);let C=await r.read(S);C.success&&C.data?p.setData({company_id:C.data.company.id,code:C.data.code,name:C.data.name,is_bank:C.data.is_bank,is_active:C.data.is_active,remarks:C.data.remarks}):s.push({name:"side-menu-finance-cash-account-list"}),h("loading-state",!1)},$=S=>{m.value[S].state===fe.Collapsed?m.value[S].state=fe.Expanded:m.value[S].state===fe.Expanded&&(m.value[S].state=fe.Collapsed)},D=S=>{let C=document.getElementById(S);C&&C.scrollIntoView({behavior:"smooth",block:"center"})},V=async()=>{p.hasErrors&&D(Object.keys(p.errors)[0]),h("loading-state",!0),await p.submit().then(()=>{h("update-profile"),s.push({name:"side-menu-finance-cash-account-list"})}).catch(S=>{const C=ln(S);P("danger","",C)}).finally(()=>{h("loading-state",!1)})},R=async()=>{p.reset(),p.setErrors({}),await w(o.params.ulid)},E=()=>{p.forgetError("code"),p.code=="_AUTO_"?p.setData({code:""}):p.setData({code:"_AUTO_"})},P=(S,C,M)=>{h("show-alertplaceholder",{alertType:S,title:C,alertList:M})};return dt(p,ma.debounce(S=>{i.setLastEntity("CASH_ACCOUNT_EDIT",S.data())},500),{deep:!0}),(S,C)=>(L(),U("form",{id:"cashAccountForm",onSubmit:Rt(V,["prevent"])},[l(t(ba),{cards:m.value,title:t(a)("views.cash_account.page_title"),"using-side-tab":!1,onHandleExpandCard:$},{"card-items-0":f(()=>[c("div",POe,[l(t(K),null,{default:f(()=>[A(_(x.value.company.code)+" ",1),DOe,A(" "+_(x.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(p).company_id,"onUpdate:modelValue":C[0]||(C[0]=M=>t(p).company_id=M)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",ROe,[c("div",OOe,[l(t(K),{class:F({"text-danger":t(p).invalid("code")})},{default:f(()=>[A(_(t(a)("views.cash_account.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(p).code,"onUpdate:modelValue":C[1]||(C[1]=M=>t(p).code=M),type:"text",class:F({"border-danger":t(p).invalid("code")}),placeholder:t(a)("views.cash_account.fields.code"),onSetAuto:E,onChange:C[2]||(C[2]=M=>t(p).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.code},null,8,["messages"])]),c("div",VOe,[l(t(K),{class:F({"text-danger":t(p).invalid("name")})},{default:f(()=>[A(_(t(a)("views.cash_account.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(p).name,"onUpdate:modelValue":C[3]||(C[3]=M=>t(p).name=M),type:"text",class:F({"border-danger":t(p).invalid("name")}),placeholder:t(a)("views.cash_account.fields.name"),onChange:C[4]||(C[4]=M=>t(p).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.name},null,8,["messages"])]),c("div",UOe,[l(t(K),{class:F([{"text-danger":t(p).invalid("is_bank")},"pr-5"])},{default:f(()=>[A(_(t(a)("views.cash_account.fields.is_bank")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(p).is_bank,"onUpdate:modelValue":C[5]||(C[5]=M=>t(p).is_bank=M),type:"checkbox",class:F({"border-danger":t(p).invalid("is_bank")}),placeholder:t(a)("views.cash_account.fields.is_bank"),onChange:C[6]||(C[6]=M=>t(p).validate("is_bank"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(p).errors.is_bank},null,8,["messages"])]),c("div",FOe,[l(t(K),{class:F([{"text-danger":t(p).invalid("is_active")},"pr-5"])},{default:f(()=>[A(_(t(a)("views.cash_account.fields.is_active")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(p).is_active,"onUpdate:modelValue":C[7]||(C[7]=M=>t(p).is_active=M),type:"checkbox",class:F({"border-danger":t(p).invalid("is_active")}),placeholder:t(a)("views.cash_account.fields.is_active"),onChange:C[8]||(C[8]=M=>t(p).validate("is_active"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(p).errors.is_active},null,8,["messages"])]),c("div",jOe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.cash_account.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(p).remarks,"onUpdate:modelValue":C[9]||(C[9]=M=>t(p).remarks=M),type:"text",placeholder:t(a)("views.cash_account.fields.remarks"),rows:"3"},null,8,["modelValue","placeholder"])])])]),"card-items-button":f(()=>[c("div",HOe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(p).validating||t(p).hasErrors},{default:f(()=>[t(p).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:R},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards","title"])],32))}}),zOe={class:"mt-8"},BOe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},qOe={class:"ml-4 mr-4"},WOe={class:"font-medium"},GOe={class:"mt-1 text-slate-500"},ZOe=Ce({__name:"ProductCategoryIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.product_category.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[productCategoryNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-product-product-category-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-product-product-category-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.product_category.actions.create";break;case xe.FORM_EDIT:h.value="views.product_category.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.product_category.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("PRODUCT_CATEGORY_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("PRODUCT_CATEGORY_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",zOe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",BOe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"productCategoryNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",qOe,[c("div",WOe,_(w.value),1),c("div",GOe,_($.value),1)])]),_:1})])}}});class Xs{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");mt(this,"cacheService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn,this.cacheService=new Dt}useProductCategoryCreateForm(){const e=je("api.post.product_category.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",name:"",type:1})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),s.company_id=e.company_id,e.search&&(s.search=e.search),e.type&&(s.type=e.type),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.product_category.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),s.company_id=e.company_id,e.search&&(s.search=e.search),e.type&&(s.type=e.type),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.product_category.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.product_category.read",{product_category:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useProductCategoryEditForm(e){const a=je("api.post.product_category.edit",{product_category:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:"",type:1})}async delete(e){const a={success:!1};try{const s=je("api.post.product_category.delete",{product_category:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async getTypes(){const e="productCategoryTypesDDL";let a=[];try{if(this.cacheService.getCachedDDL(e)==null){const o=je("api.get.product_category.read_types",void 0,!1,this.ziggyRoute),r=await nt.get(o);this.cacheService.setCachedDDL(e,r.data)}const s=this.cacheService.getCachedDDL(e);return s!=null&&(a=s),a}catch{return a}}}const KOe={class:"flex justify-center italic"},XOe={class:"flex justify-end gap-1"},YOe={class:"flex flex-row"},QOe={class:"ml-5 w-48 text-right pr-5 font-medium"},JOe={class:"flex-1"},eVe={class:"flex flex-row mt-1"},tVe={class:"ml-5 w-48 text-right pr-5 font-medium"},aVe={class:"flex-1"},nVe={class:"flex flex-row mt-1"},sVe={class:"ml-5 w-48 text-right pr-5 font-medium"},oVe={class:"flex-1"},rVe={class:"p-5 text-center"},iVe={class:"mt-5 text-3xl"},lVe={class:"mt-2 text-slate-500"},cVe=c("br",null,null,-1),dVe={class:"px-5 pb-8 text-center"},uVe=Ce({__name:"ProductCategoryList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new Xs,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(M,g,v,T)=>{i("loading-state",!0);const B={with_trashed:!1,company_id:x.value.company.id,search:M,type:void 0,include_id:void 0,refresh:g,page:v,per_page:T};let oe=await o.readAnyPaginate(B);oe.success&&oe.data?p.value=oe.data:S("danger","",oe.errors),i("loading-state",!1)},$=async M=>{await w(M.search.text,!1,M.pagination.page,M.pagination.per_page)},D=M=>{m.value===M?m.value=null:m.value=M},V=M=>{if(!p.value)return;let g=p.value.data[M].ulid;s.push({name:"side-menu-product-product-category-edit",params:{ulid:g}})},R=M=>{if(!p.value)return;let g=p.value.data[M].ulid;u.value=g,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let M=await o.delete(u.value);M.success?(i("update-profile"),await w("",!0,1,10),P(a("views.product_category.alert.delete_product_category.title"),a("views.product_category.alert.delete_product_category.content"))):S("danger","",M.errors),i("loading-state",!1)},P=(M,g)=>{i("show-notification",{title:M,content:g})},S=(M,g,v)=>{i("show-alertplaceholder",{alertType:M,title:g,alertList:v})},C=M=>a(M===1?"views.product_category.type.product":"views.product_category.type.service");return(M,g)=>(L(),ge(t(mn),{title:t(a)("views.product_category.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product_category.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product_category.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product_category.table.cols.type")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"4"},{default:f(()=>[c("div",KOe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(v,T)=>(L(),U(ke,{key:v.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(v.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(v.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(C(v.type)),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",XOe,[l(t(me),{variant:"outline-secondary",onClick:j=>D(T)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:j=>V(T)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:j=>R(T)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==T})},{default:f(()=>[l(t(X).Td,{colspan:"4"},{default:f(()=>[c("div",YOe,[c("div",QOe,_(t(a)("views.product_category.fields.code")),1),c("div",JOe,_(v.code),1)]),c("div",eVe,[c("div",tVe,_(t(a)("views.product_category.fields.name")),1),c("div",aVe,_(v.name),1)]),c("div",nVe,[c("div",sVe,_(t(a)("views.product_category.fields.type")),1),c("div",oVe,_(C(v.type)),1)])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:g[1]||(g[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",rVe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",iVe,_(t(a)("components.delete-modal.title")),1),c("div",lVe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),cVe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",dVe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:g[0]||(g[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),pVe={class:"p-5"},hVe=c("br",null,null,-1),fVe={class:"p-5"},mVe={class:"pb-4"},vVe={class:"pb-4"},yVe={class:"pb-4"},_Ve={value:""},gVe=["value"],kVe={class:"flex gap-4"},bVe=Ce({__name:"ProductCategoryCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new Xs;new aa;const i=new Dt,u=e,h=O([{title:"views.product_category.field_groups.company_info",state:fe.Expanded},{title:"views.product_category.field_groups.product_category_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),m=O(null),p=r.useProductCategoryCreateForm(),b=ee(()=>o.isUserLocationSelected),x=ee(()=>o.selectedUserLocation);at(async()=>{u("mode-state",xe.FORM_CREATE),D(),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),w(),$()});const w=async()=>{const M=await r.getTypes();M&&(m.value=M)},$=()=>{p.setData({company_id:x.value.company.id})},D=()=>{let M=i.getLastEntity("PRODUCT_CATEGORY_CREATE");M&&p.setData(M)},V=M=>{h.value[M].state===fe.Collapsed?h.value[M].state=fe.Expanded:h.value[M].state===fe.Expanded&&(h.value[M].state=fe.Collapsed)},R=M=>{let g=document.getElementById(M);g&&g.scrollIntoView({behavior:"smooth",block:"center"})},E=async()=>{p.hasErrors&&R(Object.keys(p.errors)[0]),u("loading-state",!0),await p.submit().then(()=>{P(),u("update-profile"),s.push({name:"side-menu-product-product-category-list"})}).catch(M=>{let g=ln(M);C("danger","",g)}).finally(()=>{u("loading-state",!1)})},P=()=>{p.reset(),p.setErrors({})},S=()=>{p.forgetError("code"),p.code=="_AUTO_"?p.setData({code:""}):p.setData({code:"_AUTO_"})},C=(M,g,v)=>{u("show-alertplaceholder",{alertType:M,title:g,alertList:v})};return dt(p,ma.debounce(M=>{i.setLastEntity("PRODUCT_CATEGORY_CREATE",M.data()),p.hasErrors},500),{deep:!0}),(M,g)=>(L(),U("form",{id:"productCategoryForm",onSubmit:Rt(E,["prevent"])},[l(t(ba),{cards:h.value,"using-side-tab":!1,onHandleExpandCard:V},{"card-items-0":f(()=>[c("div",pVe,[l(t(K),null,{default:f(()=>[A(_(x.value.company.code)+" ",1),hVe,A(" "+_(x.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(p).company_id,"onUpdate:modelValue":g[0]||(g[0]=v=>t(p).company_id=v)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",fVe,[c("div",mVe,[l(t(K),{class:F({"text-danger":t(p).invalid("code")})},{default:f(()=>[A(_(t(a)("views.product_category.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(p).code,"onUpdate:modelValue":g[1]||(g[1]=v=>t(p).code=v),class:F({"border-danger":t(p).invalid("code")}),placeholder:t(a)("views.product_category.fields.code"),onSetAuto:S,onChange:g[2]||(g[2]=v=>t(p).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.code},null,8,["messages"])]),c("div",vVe,[l(t(K),{class:F({"text-danger":t(p).invalid("name")})},{default:f(()=>[A(_(t(a)("views.product_category.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(p).name,"onUpdate:modelValue":g[3]||(g[3]=v=>t(p).name=v),type:"text",class:F({"border-danger":t(p).invalid("name")}),placeholder:t(a)("views.product_category.fields.name"),onChange:g[4]||(g[4]=v=>t(p).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.name},null,8,["messages"])]),c("div",yVe,[l(t(K),{class:F({"text-danger":t(p).invalid("type")})},{default:f(()=>[A(_(t(a)("views.product_category.fields.type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(p).type,"onUpdate:modelValue":g[5]||(g[5]=v=>t(p).type=v),class:F({"border-danger":t(p).invalid("type")}),onChange:g[6]||(g[6]=v=>t(p).validate("type"))},{default:f(()=>[c("option",_Ve,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(m.value,v=>(L(),U("option",{key:v.code,value:v.code},_(t(a)(v.name)),9,gVe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(p).errors.type},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",kVe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(p).validating||t(p).hasErrors},{default:f(()=>[t(p).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:P},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),wVe={class:"p-5"},xVe=c("br",null,null,-1),MVe={class:"p-5"},CVe={class:"pb-4"},SVe={class:"pb-4"},IVe={class:"pb-4"},LVe={value:""},$Ve=["value"],AVe={class:"flex gap-4"},EVe=Ce({__name:"ProductCategoryEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=Sa(),o=ct(),r=zt(),i=new Xs;new aa;const u=new Dt,h=e,m=O([{title:"views.product_category.field_groups.company_info",state:fe.Expanded},{title:"views.product_category.field_groups.product_category_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=O(null),b=i.useProductCategoryEditForm(s.params.ulid),x=ee(()=>r.isUserLocationSelected),w=ee(()=>r.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_EDIT),x.value||o.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([$(),D(s.params.ulid)])});const $=async()=>{p.value=await i.getTypes()},D=async M=>{h("loading-state",!0);const g=await i.read(M);g&&g.data&&b.setData({company_id:g.data.company.id,code:g.data.code,name:g.data.name,type:g.data.type}),h("loading-state",!1)},V=M=>{m.value[M].state===fe.Collapsed?m.value[M].state=fe.Expanded:m.value[M].state===fe.Expanded&&(m.value[M].state=fe.Collapsed)},R=M=>{let g=document.getElementById(M);g&&g.scrollIntoView({behavior:"smooth",block:"center"})},E=async()=>{b.hasErrors&&R(Object.keys(b.errors)[0]),h("loading-state",!0),await b.submit().then(()=>{h("update-profile"),o.push({name:"side-menu-product-product-category-list"})}).catch(M=>{const g=ln(M);C("danger","",g)}).finally(()=>{h("loading-state",!1)})},P=async()=>{b.reset(),b.setErrors({}),await D(s.params.ulid)},S=()=>{b.forgetError("code"),b.code=="_AUTO_"?b.setData({code:""}):b.setData({code:"_AUTO_"})},C=(M,g,v)=>{h("show-alertplaceholder",{alertType:M,title:g,alertList:v})};return dt(b,ma.debounce(M=>{u.setLastEntity("PRODUCT_CATEGORY_EDIT",M.data())},500),{deep:!0}),(M,g)=>(L(),U("form",{id:"productCategoryForm",onSubmit:Rt(E,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:V},{"card-items-0":f(()=>[c("div",wVe,[l(t(K),null,{default:f(()=>[A(_(w.value.company.code)+" ",1),xVe,A(" "+_(w.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(b).company_id,"onUpdate:modelValue":g[0]||(g[0]=v=>t(b).company_id=v)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",MVe,[c("div",CVe,[l(t(K),{class:F({"text-danger":t(b).invalid("code")})},{default:f(()=>[A(_(t(a)("views.product_category.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(b).code,"onUpdate:modelValue":g[1]||(g[1]=v=>t(b).code=v),class:F({"border-danger":t(b).invalid("code")}),placeholder:t(a)("views.product_category.fields.code"),onSetAuto:S,onChange:g[2]||(g[2]=v=>t(b).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.code},null,8,["messages"])]),c("div",SVe,[l(t(K),{class:F({"text-danger":t(b).invalid("name")})},{default:f(()=>[A(_(t(a)("views.product_category.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(b).name,"onUpdate:modelValue":g[3]||(g[3]=v=>t(b).name=v),type:"text",class:F({"border-danger":t(b).invalid("name")}),placeholder:t(a)("views.product_category.fields.name"),onChange:g[4]||(g[4]=v=>t(b).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(b).errors.name},null,8,["messages"])]),c("div",IVe,[l(t(K),{class:F({"text-danger":t(b).invalid("type")})},{default:f(()=>[A(_(t(a)("views.product_category.fields.type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(b).type,"onUpdate:modelValue":g[5]||(g[5]=v=>t(b).type=v),class:F({"border-danger":t(b).invalid("type")}),onChange:g[6]||(g[6]=v=>t(b).validate("type"))},{default:f(()=>[c("option",LVe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(p.value,v=>(L(),U("option",{key:v.code,value:v.code},_(t(a)(v.name)),9,$Ve))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(b).errors.type},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",AVe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(b).validating||t(b).hasErrors},{default:f(()=>[t(b).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:P},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),TVe={class:"mt-8"},PVe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},DVe={class:"ml-4 mr-4"},RVe={class:"font-medium"},OVe={class:"mt-1 text-slate-500"},VVe=Ce({__name:"BrandIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.brand.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[brandNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-product-brand-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-product-brand-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.brand.actions.create";break;case xe.FORM_EDIT:h.value="views.brand.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.brand.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("BRAND_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("BRAND_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",TVe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",PVe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"brandNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",DVe,[c("div",RVe,_(w.value),1),c("div",OVe,_($.value),1)])]),_:1})])}}});class Do{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useBrandCreateForm(){const e=je("api.post.brand.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",name:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.brand.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.brand.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.brand.read",{brand:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useBrandEditForm(e){const a=je("api.post.brand.edit",{brand:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:""})}async delete(e){const a={success:!1};try{const s=je("api.post.brand.delete",{brand:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const UVe={class:"flex justify-center italic"},FVe={class:"flex justify-end gap-1"},jVe={class:"flex flex-row"},HVe={class:"ml-5 w-48 text-right pr-5 font-medium"},NVe={class:"flex-1"},zVe={class:"flex flex-row mt-1"},BVe={class:"ml-5 w-48 text-right pr-5 font-medium"},qVe={class:"flex-1"},WVe={class:"p-5 text-center"},GVe={class:"mt-5 text-3xl"},ZVe={class:"mt-2 text-slate-500"},KVe=c("br",null,null,-1),XVe={class:"px-5 pb-8 text-center"},YVe=Ce({__name:"BrandList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new Do,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(C,M,g,v)=>{i("loading-state",!0);const j={with_trashed:!1,company_id:x.value.company.id,search:C,include_id:void 0,refresh:M,page:g,per_page:v};let B=await o.readAnyPaginate(j);B.success&&B.data?p.value=B.data:S("danger","",B.errors),i("loading-state",!1)},$=async C=>{await w(C.search.text,!1,C.pagination.page,C.pagination.per_page)},D=C=>{m.value===C?m.value=null:m.value=C},V=C=>{if(!p.value)return;let M=p.value.data[C].ulid;s.push({name:"side-menu-product-brand-edit",params:{ulid:M}})},R=C=>{if(!p.value)return;let M=p.value.data[C].ulid;u.value=M,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let C=await o.delete(u.value);C.success?(i("update-profile"),await w("",!0,1,10),P(a("views.brand.alert.delete_brand.title"),a("views.brand.alert.delete_brand.content"))):S("danger",a("components.alert_placeholder.title.danger"),C.errors),i("loading-state",!1)},P=(C,M)=>{i("show-notification",{title:C,content:M})},S=(C,M,g)=>{i("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return(C,M)=>(L(),ge(t(mn),{title:t(a)("views.brand.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.brand.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.brand.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"3"},{default:f(()=>[c("div",UVe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(g,v)=>(L(),U(ke,{key:g.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(g.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",FVe,[l(t(me),{variant:"outline-secondary",onClick:T=>D(v)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>V(v)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>R(v)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==v})},{default:f(()=>[l(t(X).Td,{colspan:"3"},{default:f(()=>[c("div",jVe,[c("div",HVe,_(t(a)("views.brand.fields.code")),1),c("div",NVe,_(g.code),1)]),c("div",zVe,[c("div",BVe,_(t(a)("views.brand.fields.name")),1),c("div",qVe,_(g.name),1)])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:M[1]||(M[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",WVe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",GVe,_(t(a)("components.delete-modal.title")),1),c("div",ZVe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),KVe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",XVe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:M[0]||(M[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),QVe={class:"p-5"},JVe=c("br",null,null,-1),eUe={class:"p-5"},tUe={class:"pb-4"},aUe={class:"pb-4"},nUe={class:"flex gap-4"},sUe=Ce({__name:"BrandCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new Do,i=new Dt,u=e,h=O([{title:"views.brand.field_groups.company_info",state:fe.Expanded},{title:"views.brand.field_groups.brand_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),m=r.useBrandCreateForm(),p=ee(()=>o.isUserLocationSelected),b=ee(()=>o.selectedUserLocation);at(async()=>{u("mode-state",xe.FORM_CREATE),S(),p.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),x()});const x=()=>{m.setData({company_id:b.value.company.id})},w=C=>{h.value[C].state===fe.Collapsed?h.value[C].state=fe.Expanded:h.value[C].state===fe.Expanded&&(h.value[C].state=fe.Collapsed)},$=C=>{let M=document.getElementById(C);M&&M.scrollIntoView({behavior:"smooth",block:"center"})},D=async()=>{m.hasErrors&&$(Object.keys(m.errors)[0]),u("loading-state",!0),await m.submit().then(C=>{V(),u("update-profile"),s.push({name:"side-menu-product-brand-list"})}).catch(C=>{console.error(C);let M=P(C);E("danger","",M)}).finally(()=>{u("loading-state",!1)})},V=()=>{m.reset(),m.setErrors({})},R=()=>{m.forgetError("code"),m.code=="_AUTO_"?m.setData({code:""}):m.setData({code:"_AUTO_"})},E=(C,M,g)=>{u("show-alertplaceholder",{alertType:C,title:M,alertList:g})},P=C=>{const M={},g=C,v=ot(C)?C.response:g==null?void 0:g.response;if(v&&v.data){const T=v.data;if(T.errors&&typeof T.errors=="object"){for(const j of Object.keys(T.errors)){const B=T.errors[j];Array.isArray(B)?M[j]=B:B!=null&&(M[j]=[String(B)])}return M}if(T.message)return M.error=[String(T.message)],M}return C instanceof Error&&C.message?M.error=[C.message]:M.error=["Unknown error"],M},S=()=>{const C=i.getLastEntity("BRAND_CREATE");C&&m.setData(C)};return dt(m,ma.debounce(C=>{i.setLastEntity("BRAND_CREATE",C.data()),m.hasErrors},500),{deep:!0}),(C,M)=>(L(),U("form",{id:"brandForm",onSubmit:Rt(D,["prevent"])},[l(t(ba),{cards:h.value,"using-side-tab":!1,onHandleExpandCard:w},{"card-items-0":f(()=>[c("div",QVe,[l(t(K),null,{default:f(()=>[A(_(b.value.company.code)+" ",1),JVe,A(" "+_(b.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(m).company_id,"onUpdate:modelValue":M[0]||(M[0]=g=>t(m).company_id=g)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",eUe,[c("div",tUe,[l(t(K),{class:F({"text-danger":t(m).invalid("code")})},{default:f(()=>[A(_(t(a)("views.brand.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(m).code,"onUpdate:modelValue":M[1]||(M[1]=g=>t(m).code=g),class:F({"border-danger":t(m).invalid("code")}),placeholder:t(a)("views.brand.fields.code"),onSetAuto:R,onChange:M[2]||(M[2]=g=>t(m).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.code},null,8,["messages"])]),c("div",aUe,[l(t(K),{class:F({"text-danger":t(m).invalid("name")})},{default:f(()=>[A(_(t(a)("views.brand.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(m).name,"onUpdate:modelValue":M[3]||(M[3]=g=>t(m).name=g),type:"text",class:F({"border-danger":t(m).invalid("name")}),placeholder:t(a)("views.brand.fields.name"),onChange:M[4]||(M[4]=g=>t(m).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.name},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",nUe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(m).validating},{default:f(()=>[t(m).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:V},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),oUe={class:"p-5"},rUe=c("br",null,null,-1),iUe={class:"p-5"},lUe={class:"pb-4"},cUe={class:"pb-4"},dUe={class:"flex gap-4"},uUe=Ce({__name:"BrandEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=Sa(),o=ct(),r=zt(),i=new Do,u=new Dt,h=e,m=O([{title:"views.brand.field_groups.company_info",state:fe.Expanded},{title:"views.brand.field_groups.brand_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=i.useBrandEditForm(s.params.ulid),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_EDIT),b.value||o.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w(s.params.ulid)});const w=async S=>{h("loading-state",!0);const C=await i.read(S);C.success&&C.data?p.setData({company_id:C.data.company.id,code:C.data.code,name:C.data.name}):o.push({name:"side-menu-product-brand-list"}),h("loading-state",!1)},$=S=>{m.value[S].state===fe.Collapsed?m.value[S].state=fe.Expanded:m.value[S].state===fe.Expanded&&(m.value[S].state=fe.Collapsed)},D=S=>{let C=document.getElementById(S);C&&C.scrollIntoView({behavior:"smooth",block:"center"})},V=async()=>{p.hasErrors&&D(Object.keys(p.errors)[0]),h("loading-state",!0),await p.submit().then(()=>{h("update-profile"),o.push({name:"side-menu-product-brand-list"})}).catch(S=>{const C=ln(S);P("danger","",C)}).finally(()=>{h("loading-state",!1)})},R=async()=>{p.reset(),p.setErrors({}),await w(s.params.ulid)},E=()=>{p.forgetError("code"),p.code=="_AUTO_"?p.setData({code:""}):p.setData({code:"_AUTO_"})},P=(S,C,M)=>{h("show-alertplaceholder",{alertType:S,title:C,alertList:M})};return dt(p,ma.debounce(S=>{u.setLastEntity("BRAND_EDIT",S.data())},500),{deep:!0}),(S,C)=>(L(),U("form",{id:"brandForm",onSubmit:Rt(V,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:$},{"card-items-0":f(()=>[c("div",oUe,[l(t(K),null,{default:f(()=>[A(_(x.value.company.code)+" ",1),rUe,A(" "+_(x.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(p).company_id,"onUpdate:modelValue":C[0]||(C[0]=M=>t(p).company_id=M)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",iUe,[c("div",lUe,[l(t(K),{class:F({"text-danger":t(p).invalid("code")})},{default:f(()=>[A(_(t(a)("views.brand.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(p).code,"onUpdate:modelValue":C[1]||(C[1]=M=>t(p).code=M),class:F({"border-danger":t(p).invalid("code")}),placeholder:t(a)("views.brand.fields.code"),onSetAuto:E,onChange:C[2]||(C[2]=M=>t(p).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.code},null,8,["messages"])]),c("div",cUe,[l(t(K),{class:F({"text-danger":t(p).invalid("name")})},{default:f(()=>[A(_(t(a)("views.brand.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(p).name,"onUpdate:modelValue":C[3]||(C[3]=M=>t(p).name=M),type:"text",class:F({"border-danger":t(p).invalid("name")}),placeholder:t(a)("views.brand.fields.name"),onChange:C[4]||(C[4]=M=>t(p).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.name},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",dUe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(p).validating||t(p).hasErrors},{default:f(()=>[t(p).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:R},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),pUe={class:"mt-8"},hUe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},fUe={class:"ml-4 mr-4"},mUe={class:"font-medium"},vUe={class:"mt-1 text-slate-500"},yUe=Ce({__name:"UnitIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.unit.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[unitNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-product-unit-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-product-unit-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.unit.actions.create";break;case xe.FORM_EDIT:h.value="views.unit.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.unit.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("UNIT_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("UNIT_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",pUe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",hUe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"unitNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",fUe,[c("div",mUe,_(w.value),1),c("div",vUe,_($.value),1)])]),_:1})])}}});class Bl{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");mt(this,"cacheService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn,this.cacheService=new Dt}useUnitCreateForm(){const e=je("api.post.unit.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",name:"",description:"",type:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.unit.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed?1:0,s.company_id=e.company_id,s.search=e.search?e.search:"",e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.unit.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.unit.read",{unit:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useUnitEditForm(e){const a=je("api.post.unit.edit",{unit:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:"",description:"",type:""})}async delete(e){const a={success:!1};try{const s=je("api.post.unit.delete",{unit:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async getTypes(){const e="unitTypesDDL";let a=[];try{if(this.cacheService.getCachedDDL(e)==null){const o=je("api.get.unit.read_types",void 0,!1,this.ziggyRoute),r=await nt.get(o);this.cacheService.setCachedDDL(e,r.data)}const s=this.cacheService.getCachedDDL(e);return s!=null&&(a=s),a}catch{return a}}}const _Ue={class:"flex justify-center italic"},gUe={class:"flex justify-end gap-1"},kUe={class:"flex flex-row"},bUe={class:"ml-5 w-48 text-right pr-5 font-medium"},wUe={class:"flex-1"},xUe={class:"flex flex-row mt-1"},MUe={class:"ml-5 w-48 text-right pr-5 font-medium"},CUe={class:"flex-1"},SUe={class:"flex flex-row mt-1"},IUe={class:"ml-5 w-48 text-right pr-5 font-medium"},LUe={class:"flex-1"},$Ue={class:"flex flex-row mt-1"},AUe={class:"ml-5 w-48 text-right pr-5 font-medium"},EUe={class:"flex-1"},TUe={class:"p-5 text-center"},PUe={class:"mt-5 text-3xl"},DUe={class:"mt-2 text-slate-500"},RUe=c("br",null,null,-1),OUe={class:"px-5 pb-8 text-center"},VUe=Ce({__name:"UnitList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new Bl;new aa;const r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=O([]),x=ee(()=>r.isUserLocationSelected),w=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),x.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await $(),await V("",!0,1,10)});const $=async()=>{b.value=await o.getTypes()},D=v=>{if(!b.value)return v;const T=b.value.find(j=>j.code==v);return T?a(T.name):v},V=async(v,T,j,B)=>{i("loading-state",!0);const be={with_trashed:!1,company_id:w.value.company.id,search:v,include_id:void 0,refresh:T,page:j,per_page:B};let $e=await o.readAnyPaginate(be);$e.success&&$e.data?p.value=$e.data:g("danger","",$e.errors),i("loading-state",!1)},R=async v=>{await V(v.search.text,!1,v.pagination.page,v.pagination.per_page)},E=v=>{m.value===v?m.value=null:m.value=v},P=v=>{if(!p.value)return;let T=p.value.data[v].ulid;s.push({name:"side-menu-product-unit-edit",params:{ulid:T}})},S=v=>{if(!p.value)return;let T=p.value.data[v].ulid;u.value=T,h.value=!0},C=async()=>{h.value=!1,i("loading-state",!0);let v=await o.delete(u.value);v.success?(i("update-profile"),await V("",!0,1,10),M(a("views.unit.alert.delete_unit.title"),a("views.unit.alert.delete_unit.content"))):g("danger",a("components.alert_placeholder.title.danger"),v.errors),i("loading-state",!1)},M=(v,T)=>{i("show-notification",{title:v,content:T})},g=(v,T,j)=>{i("show-alertplaceholder",{alertType:v,title:T,alertList:j})};return(v,T)=>(L(),ge(t(mn),{title:t(a)("views.unit.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:R},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.unit.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.unit.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.unit.table.cols.type")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"4"},{default:f(()=>[c("div",_Ue,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(j,B)=>(L(),U(ke,{key:j.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(j.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(j.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(D(j.type)),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",gUe,[l(t(me),{variant:"outline-secondary",onClick:oe=>E(B)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:oe=>P(B)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:oe=>S(B)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==B})},{default:f(()=>[l(t(X).Td,{colspan:"4"},{default:f(()=>[c("div",kUe,[c("div",bUe,_(t(a)("views.unit.fields.code")),1),c("div",wUe,_(j.code),1)]),c("div",xUe,[c("div",MUe,_(t(a)("views.unit.fields.name")),1),c("div",CUe,_(j.name),1)]),c("div",SUe,[c("div",IUe,_(t(a)("views.unit.fields.type")),1),c("div",LUe,_(D(j.type)),1)]),c("div",$Ue,[c("div",AUe,_(t(a)("views.unit.fields.description")),1),c("div",EUe,_(j.description),1)])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:T[1]||(T[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",TUe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",PUe,_(t(a)("components.delete-modal.title")),1),c("div",DUe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),RUe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",OUe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:T[0]||(T[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:C},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),UUe={class:"p-5"},FUe=c("br",null,null,-1),jUe={class:"p-5"},HUe={class:"pb-4"},NUe={class:"pb-4"},zUe={class:"pb-4"},BUe={class:"pb-4"},qUe={value:"",disabled:"",selected:""},WUe=["value"],GUe={class:"flex gap-4"},ZUe=Ce({__name:"UnitCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new Bl,i=new Dt;new aa;const u=e,h=O([{title:"views.unit.field_groups.company_info",state:fe.Expanded},{title:"views.unit.field_groups.unit_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),m=r.useUnitCreateForm(),p=O([]),b=ee(()=>o.isUserLocationSelected),x=ee(()=>o.selectedUserLocation);at(async()=>{u("mode-state",xe.FORM_CREATE),await w(),C(),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),$()});const w=async()=>{await Promise.all([r.getTypes().then(M=>{p.value=M})])},$=()=>{m.setData({company_id:x.value.company.id})},D=M=>{h.value[M].state===fe.Collapsed?h.value[M].state=fe.Expanded:h.value[M].state===fe.Expanded&&(h.value[M].state=fe.Collapsed)},V=M=>{let g=document.getElementById(M);g&&g.scrollIntoView({behavior:"smooth",block:"center"})},R=async()=>{m.hasErrors&&V(Object.keys(m.errors)[0]),u("loading-state",!0),await m.submit().then(M=>{E(),u("update-profile"),s.push({name:"side-menu-product-unit-list"})}).catch(M=>{console.error(M);let g=ln(M);S("danger","",g)}).finally(()=>{u("loading-state",!1)})},E=()=>{m.reset(),m.setErrors({})},P=()=>{m.forgetError("code"),m.code=="_AUTO_"?m.setData({code:""}):m.setData({code:"_AUTO_"})},S=(M,g,v)=>{u("show-alertplaceholder",{alertType:M,title:g,alertList:v})},C=()=>{const M=i.getLastEntity("UNIT_CREATE");M&&m.setData(M)};return dt(m,ma.debounce(M=>{i.setLastEntity("UNIT_CREATE",M.data()),m.hasErrors},500),{deep:!0}),(M,g)=>(L(),U("form",{id:"unitForm",onSubmit:Rt(R,["prevent"])},[l(t(ba),{cards:h.value,"using-side-tab":!1,onHandleExpandCard:D},{"card-items-0":f(()=>[c("div",UUe,[l(t(K),null,{default:f(()=>[A(_(x.value.company.code)+" ",1),FUe,A(" "+_(x.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(m).company_id,"onUpdate:modelValue":g[0]||(g[0]=v=>t(m).company_id=v)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",jUe,[c("div",HUe,[l(t(K),{class:F({"text-danger":t(m).invalid("code")})},{default:f(()=>[A(_(t(a)("views.unit.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(m).code,"onUpdate:modelValue":g[1]||(g[1]=v=>t(m).code=v),class:F({"border-danger":t(m).invalid("code")}),placeholder:t(a)("views.unit.fields.code"),onSetAuto:P,onChange:g[2]||(g[2]=v=>t(m).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.code},null,8,["messages"])]),c("div",NUe,[l(t(K),{class:F({"text-danger":t(m).invalid("name")})},{default:f(()=>[A(_(t(a)("views.unit.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(m).name,"onUpdate:modelValue":g[3]||(g[3]=v=>t(m).name=v),type:"text",class:F({"border-danger":t(m).invalid("name")}),placeholder:t(a)("views.unit.fields.name"),onChange:g[4]||(g[4]=v=>t(m).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.name},null,8,["messages"])]),c("div",zUe,[l(t(K),{class:F({"text-danger":t(m).invalid("description")})},{default:f(()=>[A(_(t(a)("views.unit.fields.description")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(m).description,"onUpdate:modelValue":g[5]||(g[5]=v=>t(m).description=v),class:F({"border-danger":t(m).invalid("description")}),placeholder:t(a)("views.unit.fields.description"),onChange:g[6]||(g[6]=v=>t(m).validate("description"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.description},null,8,["messages"])]),c("div",BUe,[l(t(K),{class:F({"text-danger":t(m).invalid("type")})},{default:f(()=>[A(_(t(a)("views.unit.fields.type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(m).type,"onUpdate:modelValue":g[7]||(g[7]=v=>t(m).type=v),class:F({"border-danger":t(m).invalid("type")}),onChange:g[8]||(g[8]=v=>t(m).validate("type"))},{default:f(()=>[c("option",qUe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(p.value,v=>(L(),U("option",{key:v.code,value:v.code},_(t(a)(v.name)),9,WUe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(m).errors.type},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",GUe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(m).validating},{default:f(()=>[t(m).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),KUe={class:"p-5"},XUe=c("br",null,null,-1),YUe={class:"p-5"},QUe={class:"pb-4"},JUe={class:"pb-4"},eFe={class:"pb-4"},tFe={class:"pb-4"},aFe={value:"",disabled:"",selected:""},nFe=["value"],sFe={class:"flex gap-4"},oFe=Ce({__name:"UnitEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=Sa(),o=ct(),r=zt(),i=new Bl,u=new Dt;new aa;const h=e,m=O([{title:"views.unit.field_groups.company_info",state:fe.Expanded},{title:"views.unit.field_groups.unit_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=i.useUnitEditForm(s.params.ulid),b=O([]),x=ee(()=>r.isUserLocationSelected),w=ee(()=>r.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_EDIT),x.value||o.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await $(),await D(s.params.ulid)});const $=async()=>{b.value=await i.getTypes()},D=async M=>{h("loading-state",!0);const g=await i.read(M);g.success&&g.data?p.setData({company_id:g.data.company.id,code:g.data.code,name:g.data.name,description:g.data.description,type:g.data.type}):o.push({name:"side-menu-product-unit-list"}),h("loading-state",!1)},V=M=>{m.value[M].state===fe.Collapsed?m.value[M].state=fe.Expanded:m.value[M].state===fe.Expanded&&(m.value[M].state=fe.Collapsed)},R=M=>{let g=document.getElementById(M);g&&g.scrollIntoView({behavior:"smooth",block:"center"})},E=async()=>{p.hasErrors&&R(Object.keys(p.errors)[0]),h("loading-state",!0),await p.submit().then(()=>{h("update-profile"),o.push({name:"side-menu-product-unit-list"})}).catch(M=>{const g=ln(M);C("danger","",g)}).finally(()=>{h("loading-state",!1)})},P=async()=>{p.reset(),p.setErrors({}),await D(s.params.ulid)},S=()=>{p.forgetError("code"),p.code=="_AUTO_"?p.setData({code:""}):p.setData({code:"_AUTO_"})},C=(M,g,v)=>{h("show-alertplaceholder",{alertType:M,title:g,alertList:v})};return dt(p,ma.debounce(M=>{u.setLastEntity("UNIT_EDIT",M.data())},500),{deep:!0}),(M,g)=>(L(),U("form",{id:"unitForm",onSubmit:Rt(E,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:V},{"card-items-0":f(()=>[c("div",KUe,[l(t(K),null,{default:f(()=>[A(_(w.value.company.code)+" ",1),XUe,A(" "+_(w.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(p).company_id,"onUpdate:modelValue":g[0]||(g[0]=v=>t(p).company_id=v)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",YUe,[c("div",QUe,[l(t(K),{class:F({"text-danger":t(p).invalid("code")})},{default:f(()=>[A(_(t(a)("views.unit.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{id:"code",modelValue:t(p).code,"onUpdate:modelValue":g[1]||(g[1]=v=>t(p).code=v),class:F({"border-danger":t(p).invalid("code")}),onChange:g[2]||(g[2]=v=>t(p).validate("code")),onSetAuto:S},null,8,["modelValue","class"]),l(t(_e),{messages:t(p).errors.code},null,8,["messages"])]),c("div",JUe,[l(t(K),{class:F({"text-danger":t(p).invalid("name")})},{default:f(()=>[A(_(t(a)("views.unit.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{id:"name",type:"text",modelValue:t(p).name,"onUpdate:modelValue":g[3]||(g[3]=v=>t(p).name=v),class:F({"border-danger":t(p).invalid("name")}),placeholder:t(a)("views.unit.fields.name"),onChange:g[4]||(g[4]=v=>t(p).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.name},null,8,["messages"])]),c("div",eFe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.unit.fields.description")),1)]),_:1}),l(t(la),{id:"description",modelValue:t(p).description,"onUpdate:modelValue":g[5]||(g[5]=v=>t(p).description=v),class:F({"border-danger":t(p).invalid("description")}),placeholder:t(a)("views.unit.fields.description"),onChange:g[6]||(g[6]=v=>t(p).validate("description"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.description},null,8,["messages"])]),c("div",tFe,[l(t(K),{class:F({"text-danger":t(p).invalid("type")})},{default:f(()=>[A(_(t(a)("views.unit.fields.type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(p).type,"onUpdate:modelValue":g[7]||(g[7]=v=>t(p).type=v),class:F({"border-danger":t(p).invalid("type")}),onChange:g[8]||(g[8]=v=>t(p).validate("type"))},{default:f(()=>[c("option",aFe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(b.value,v=>(L(),U("option",{key:v.code,value:v.code},_(t(a)(v.name)),9,nFe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(p).errors.type},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",sFe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(p).validating||t(p).hasErrors},{default:f(()=>[t(p).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:P},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),rFe={class:"mt-8"},iFe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},lFe={class:"ml-4 mr-4"},cFe={class:"font-medium"},dFe={class:"mt-1 text-slate-500"},uFe=Ce({__name:"ProductIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.product.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[productNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-product-product-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-product-product-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.product.actions.create";break;case xe.FORM_EDIT:h.value="views.product.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.product.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("PRODUCT_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("PRODUCT_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",rFe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",iFe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"productNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",lFe,[c("div",cFe,_(w.value),1),c("div",dFe,_($.value),1)])]),_:1})])}}});class ur{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");mt(this,"cacheService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn,this.cacheService=new Dt}async readAnyPaginate(e){const a={success:!1};try{const s={};if(e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.category_id&&(s.category_id=e.category_id),e.brand_id&&(s.brand_id=e.brand_id),e.is_taxable!==void 0&&e.is_taxable!==null&&(s.is_taxable=e.is_taxable),e.vat_rate!==void 0&&e.vat_rate!==null&&(s.vat_rate=e.vat_rate),e.is_price_include_vat!==void 0&&e.is_price_include_vat!==null&&(s.is_price_include_vat=e.is_price_include_vat),e.is_use_serial_number!==void 0&&e.is_use_serial_number!==null&&(s.is_use_serial_number=e.is_use_serial_number),e.is_expirable!==void 0&&e.is_expirable!==null&&(s.is_expirable=e.is_expirable),e.type&&(s.type=e.type),e.status&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),e.with_remaining_stock){const i=e.with_remaining_stock,u={};i.end_date!==void 0&&i.end_date!==null&&(u.end_date=i.end_date),i.warehouse_id&&(u.warehouse_id=i.warehouse_id),i.stock_filter&&(u.stock_filter=i.stock_filter),i.less_than!==void 0&&i.less_than!==null&&(u.less_than=i.less_than),i.greater_than!==void 0&&i.greater_than!==null&&(u.greater_than=i.greater_than),i.include_service_products!==void 0&&i.include_service_products!==null&&(u.include_service_products=i.include_service_products),i.sort_by_remaining_stock&&(u.sort_by_remaining_stock=i.sort_by_remaining_stock),Object.keys(u).length>0&&(s.with_remaining_stock=u)}s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.product.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};if(s.with_trashed=e.with_trashed?1:0,s.company_id=e.company_id,s.search=e.search?e.search:"",e.category_id&&(s.category_id=e.category_id),e.brand_id&&(s.brand_id=e.brand_id),e.is_taxable!==void 0&&e.is_taxable!==null&&(s.is_taxable=e.is_taxable?1:0),e.vat_rate!==void 0&&e.vat_rate!==null&&(s.vat_rate=e.vat_rate),e.is_price_include_vat!==void 0&&e.is_price_include_vat!==null&&(s.is_price_include_vat=e.is_price_include_vat?1:0),e.is_use_serial_number!==void 0&&e.is_use_serial_number!==null&&(s.is_use_serial_number=e.is_use_serial_number?1:0),e.is_expirable!==void 0&&e.is_expirable!==null&&(s.is_expirable=e.is_expirable?1:0),e.type&&(s.type=e.type),e.status&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),e.with_remaining_stock){const i=e.with_remaining_stock,u={};i.end_date!==void 0&&i.end_date!==null&&(u.end_date=i.end_date),i.warehouse_id&&(u.warehouse_id=i.warehouse_id),i.stock_filter&&(u.stock_filter=i.stock_filter),i.less_than!==void 0&&i.less_than!==null&&(u.less_than=i.less_than),i.greater_than!==void 0&&i.greater_than!==null&&(u.greater_than=i.greater_than),i.include_service_products!==void 0&&i.include_service_products!==null&&(u.include_service_products=i.include_service_products?1:0),i.sort_by_remaining_stock&&(u.sort_by_remaining_stock=i.sort_by_remaining_stock),Object.keys(u).length>0&&(s.with_remaining_stock=u)}s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.product.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.product.read",{product:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useProductPhysicalStoreForm(){const e=je("api.post.product.save.physical",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",category_id:"",brand_id:null,name:"",is_taxable:!1,vat_rate:0,is_price_include_vat:!1,is_use_serial_number:!1,is_expirable:!1,remarks:null,type:1,status:1,product_units:[],image_hashes:[]})}useProductPhysicalUpdateForm(e){const a=je("api.post.product.edit.physical",{product:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"",category_id:"",brand_id:null,name:"",is_taxable:!1,vat_rate:0,is_price_include_vat:!1,is_use_serial_number:!1,is_expirable:!1,remarks:null,type:1,status:1,delete_product_unit_ids:[],product_units:[],delete_image_ids:[],image_hashes:[]})}useProductServiceStoreForm(){const e=je("api.post.product.save.service",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",category_id:"",name:"",is_taxable:!1,vat_rate:0,is_price_include_vat:!1,remarks:null,status:"",unit_id:"",price:0,point:0,image_hashes:[]})}useProductServiceUpdateForm(e){const a=je("api.post.product.edit.service",{product:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"",category_id:"",name:"",is_taxable:!1,vat_rate:0,is_price_include_vat:!1,remarks:null,status:"",unit_id:"",price:0,point:0,product_units:[],delete_image_ids:[],image_hashes:[]})}async delete(e){const a={success:!1};try{const s=je("api.post.product.delete",{product:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const pFe=["src"],hFe={class:"flex items-center justify-between w-full"},fFe={class:"font-medium"},mFe=["src"],Eo=Ce({__name:"ProductImagePreview",props:{imageUrl:{default:null},wrapperClass:{default:"w-14 h-14 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"},imageClass:{default:"w-full h-full object-cover"},iconClass:{default:"w-6 h-6 text-slate-400"},previewTitle:{default:""}},setup(n){const e=n,{t:a}=tt(),s=O(!1),o=ee(()=>!!e.imageUrl),r=ee(()=>e.previewTitle||a("views.product.fields.images")),i=()=>{o.value&&(s.value=!0)},u=()=>{s.value=!1};return(h,m)=>(L(),U(ke,null,[c("div",{class:F(h.wrapperClass),onClick:i},[o.value?(L(),U("img",{key:0,src:h.imageUrl||"",class:F(h.imageClass)},null,10,pFe)):(L(),ge(t(re),{key:1,icon:"ImageOff",class:F(h.iconClass)},null,8,["class"]))],2),l(t($t),{open:s.value,size:"lg",onClose:u},{default:f(()=>[l(t($t).Panel,{class:"flex flex-col"},{default:f(()=>[l(t($t).Title,null,{default:f(()=>[c("div",hFe,[c("div",fFe,_(r.value),1),l(t(me),{type:"button",variant:"outline-secondary",size:"sm",onClick:u},{default:f(()=>[l(t(re),{icon:"X",class:"w-4 h-4"})]),_:1})])]),_:1}),l(t($t).Description,{class:"bg-slate-900 flex items-center justify-center"},{default:f(()=>[o.value?(L(),U("img",{key:0,src:h.imageUrl||"",class:"max-h-[80vh] max-w-full object-contain"},null,8,mFe)):Me("",!0)]),_:1})]),_:1})]),_:1},8,["open"])],64))}}),vFe={class:"grid grid-cols-12 gap-6 mt-5"},yFe={class:"col-span-12 intro-y lg:col-span-12"},_Fe={class:"flex justify-center italic"},gFe={class:"font-medium whitespace-nowrap"},kFe={class:"mt-0.5 flex items-center flex-wrap"},bFe={class:"font-medium"},wFe={class:"mt-1"},xFe={key:0,class:"flex items-center text-success text-xs"},MFe={key:1,class:"flex items-center text-danger text-xs"},CFe={class:"font-medium"},SFe={class:"flex flex-col gap-0"},IFe={class:"flex flex-col gap-0 items-end"},LFe={class:"flex justify-end gap-1"},$Fe={class:"grid grid-cols-12 gap-6"},AFe={class:"col-span-12 lg:col-span-6"},EFe={class:"font-medium text-base mb-3 border-b pb-2"},TFe={class:"grid grid-cols-1 gap-y-2"},PFe={class:"flex flex-row"},DFe={class:"w-48 text-slate-500"},RFe={class:"flex-1 font-medium"},OFe={class:"flex flex-row"},VFe={class:"w-48 text-slate-500"},UFe={class:"flex-1 font-medium"},FFe={class:"flex flex-row"},jFe={class:"w-48 text-slate-500"},HFe={class:"flex-1 font-medium"},NFe={class:"flex flex-row"},zFe={class:"w-48 text-slate-500"},BFe={class:"flex-1 font-medium"},qFe={class:"flex flex-row"},WFe={class:"w-48 text-slate-500"},GFe={class:"flex-1 font-medium"},ZFe={class:"flex flex-row"},KFe={class:"w-48 text-slate-500"},XFe={class:"flex-1 font-medium"},YFe={class:"col-span-12 lg:col-span-6"},QFe={class:"font-medium text-base mb-3 border-b pb-2"},JFe={class:"grid grid-cols-1 gap-y-2"},eje={class:"flex flex-row"},tje={class:"w-48 text-slate-500"},aje={class:"flex-1 font-medium"},nje={class:"flex flex-row"},sje={class:"w-48 text-slate-500"},oje={class:"flex-1 font-medium"},rje={class:"flex flex-row"},ije={class:"w-48 text-slate-500"},lje={class:"flex-1 font-medium"},cje={class:"flex flex-row"},dje={class:"w-48 text-slate-500"},uje={class:"flex-1 font-medium"},pje={class:"flex flex-row"},hje={class:"w-48 text-slate-500"},fje={class:"flex-1 font-medium"},mje={class:"col-span-12"},vje={class:"font-medium text-base mb-3 border-b pb-2"},yje={class:"flex flex-col"},_je={key:0,class:"text-xs text-slate-500"},gje={key:1,class:"text-xs text-slate-500"},kje={class:"flex flex-col"},bje={key:0,class:"text-xs text-slate-500 whitespace-nowrap"},wje={class:"p-5 text-center"},xje={class:"mt-5 text-3xl"},Mje={class:"mt-2 text-slate-500"},Cje=c("br",null,null,-1),Sje={class:"px-5 pb-8 text-center"},Ije=Ce({__name:"ProductList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new ur,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(M,g,v,T)=>{i("loading-state",!0);const B={with_trashed:!1,company_id:x.value.company.id,search:M,type:1,include_id:void 0,refresh:g,page:v,per_page:T};let oe=await o.readAnyPaginate(B);oe.success&&oe.data?(p.value=oe.data,S("hidden","",null)):S("danger","",oe.errors),i("loading-state",!1)},$=async M=>{await w(M.search.text,!1,M.pagination.page,M.pagination.per_page)},D=M=>{m.value===M?m.value=null:m.value=M},V=M=>{if(!p.value)return;let g=p.value.data[M].ulid;i("mode-state",xe.FORM_EDIT),s.push({name:"side-menu-product-product-edit",params:{ulid:g}})},R=M=>{if(!p.value)return;let g=p.value.data[M].ulid;u.value=g,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let M=await o.delete(u.value);i("loading-state",!1),M.success?(await w("",!0,1,10),S("hidden","",null),P(a("views.product.alert.delete.title"),a("views.product.alert.delete.message"))):S("danger","",M.errors)},P=(M,g)=>{i("show-notification",{title:M,content:g})},S=(M,g,v)=>{i("show-alertplaceholder",{alertType:M,title:g,alertList:v})},C=M=>{if(!M.product_images||M.product_images.length===0)return null;const g=M.product_images.find(T=>T.is_main);if(g!=null&&g.url)return g.url;const v=M.product_images[0];return(v==null?void 0:v.url)??null};return(M,g)=>(L(),U(ke,null,[c("div",vFe,[c("div",yFe,[l(t(mn),{title:t(a)("views.product.table.title"),data:p.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.image")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.detail.info_title")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.unit")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.product.table.cols.price")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"6"},{default:f(()=>[c("div",_Fe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(v,T)=>(L(),U(ke,{key:v.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[l(Eo,{"image-url":C(v)},null,8,["image-url"])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",gFe,_(v.code),1),c("div",kFe,[c("span",bFe,_(v.category.name),1),v.brand?(L(),U(ke,{key:0},[l(t(re),{icon:"ChevronRight",class:"w-3 h-3 text-slate-400 mx-1"}),c("span",null,_(v.brand.name),1)],64)):Me("",!0)]),c("div",wFe,[v.status=="ACTIVE"?(L(),U("div",xFe,[l(t(re),{icon:"CheckCircle",class:"w-3 h-3 mr-1"}),A(" "+_(t(a)("views.product.status.active")),1)])):(L(),U("div",MFe,[l(t(re),{icon:"X",class:"w-3 h-3 mr-1"}),A(" "+_(t(a)("views.product.status.inactive")),1)]))])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",CFe,_(v.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",SFe,[(L(!0),U(ke,null,Fe(v.product_units,j=>(L(),U("div",{key:j.ulid,class:"h-6 flex items-center whitespace-nowrap"},_(j.unit.name)+_(j.conversion_value>1?": "+t(_a)(j.conversion_value)+" "+v.product_units[0].unit.name:""),1))),128))])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",IFe,[(L(!0),U(ke,null,Fe(v.product_units,j=>(L(),U("div",{key:j.ulid,class:"h-6 flex items-center whitespace-nowrap"},_(t(_a)(j.price)),1))),128))])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",LFe,[l(t(me),{variant:"outline-secondary",onClick:j=>D(T)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:j=>V(T)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:j=>R(T)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==T})},{default:f(()=>[l(t(X).Td,{colspan:"6",class:"p-5"},{default:f(()=>[c("div",$Fe,[c("div",AFe,[c("div",EFe,_(t(a)("views.product.detail.info_title")),1),c("div",TFe,[c("div",PFe,[c("div",DFe,_(t(a)("views.product.fields.code")),1),c("div",RFe,_(v.code),1)]),c("div",OFe,[c("div",VFe,_(t(a)("views.product.fields.category_id")),1),c("div",UFe,_(v.category.name),1)]),c("div",FFe,[c("div",jFe,_(t(a)("views.product.fields.brand_id")),1),c("div",HFe,_(v.brand?v.brand.name:"-"),1)]),c("div",NFe,[c("div",zFe,_(t(a)("views.product.fields.name")),1),c("div",BFe,_(v.name),1)]),c("div",qFe,[c("div",WFe,_(t(a)("views.product.fields.status")),1),c("div",GFe,_(v.status=="ACTIVE"?t(a)("views.product.status.active"):t(a)("views.product.status.inactive")),1)]),c("div",ZFe,[c("div",KFe,_(t(a)("views.product.fields.remarks")),1),c("div",XFe,_(v.remarks||"-"),1)])])]),c("div",YFe,[c("div",QFe,_(t(a)("views.product.detail.settings_title")),1),c("div",JFe,[c("div",eje,[c("div",tje,_(t(a)("views.product.fields.is_taxable")),1),c("div",aje,_(v.is_taxable?t(a)("components.dropdown.values.switch.on"):t(a)("components.dropdown.values.switch.off")),1)]),c("div",nje,[c("div",sje,_(t(a)("views.product.fields.vat_rate")),1),c("div",oje,_(t(_a)(v.vat_rate))+"%",1)]),c("div",rje,[c("div",ije,_(t(a)("views.product.fields.is_price_include_vat")),1),c("div",lje,_(v.is_price_include_vat?t(a)("components.dropdown.values.switch.on"):t(a)("components.dropdown.values.switch.off")),1)]),c("div",cje,[c("div",dje,_(t(a)("views.product.fields.is_use_serial_number")),1),c("div",uje,_(v.is_use_serial_number?t(a)("components.dropdown.values.switch.on"):t(a)("components.dropdown.values.switch.off")),1)]),c("div",pje,[c("div",hje,_(t(a)("views.product.fields.is_expirable")),1),c("div",fje,_(v.is_expirable?t(a)("components.dropdown.values.switch.on"):t(a)("components.dropdown.values.switch.off")),1)])])]),c("div",mje,[c("div",vje,_(t(a)("views.product.detail.units_title")),1),l(t(X),{class:"border"},{default:f(()=>[l(t(X).Thead,null,{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,null,{default:f(()=>[A(_(t(a)("views.product.fields.code")),1)]),_:1}),l(t(X).Th,null,{default:f(()=>[A(_(t(a)("views.product.fields.unit_id")),1)]),_:1}),l(t(X).Th,null,{default:f(()=>[A(_(t(a)("views.product.fields.conversion_value")),1)]),_:1}),l(t(X).Th,{class:"text-right"},{default:f(()=>[A(_(t(a)("views.product.fields.price")),1)]),_:1}),l(t(X).Th,{class:"text-right"},{default:f(()=>[A(_(t(a)("views.product.fields.point")),1)]),_:1}),l(t(X).Th,{class:"text-center"},{default:f(()=>[A(_(t(a)("views.product.fields.is_manufacturer_sku")),1)]),_:1})]),_:1})]),_:1}),l(t(X).Tbody,null,{default:f(()=>[(L(!0),U(ke,null,Fe(v.product_units,j=>(L(),ge(t(X).Tr,{key:j.ulid},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(j.code),1)]),_:2},1024),l(t(X).Td,{class:"font-medium"},{default:f(()=>[A(_(j.unit.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",yje,[c("span",null,_(t(_a)(j.conversion_value)),1),j.conversion_value>1?(L(),U("span",_je," 1 "+_(j.unit.name)+" = "+_(t(_a)(j.conversion_value))+" "+_(v.product_units[0].unit.name),1)):(L(),U("span",gje,_(t(a)("views.product.fields.base_unit")),1))])]),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[c("div",kje,[c("span",null,_(t(_a)(j.price)),1),j.conversion_value>1&&j.price>0?(L(),U("span",bje,_(t(a)("views.product.fields.base_unit_price"))+": "+_(t(_a)((j.price/j.conversion_value).toFixed(2))),1)):Me("",!0)])]),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[A(_(j.point),1)]),_:2},1024),l(t(X).Td,{class:"text-center"},{default:f(()=>[j.is_manufacturer_sku?(L(),ge(t(re),{key:0,icon:"CheckCircle",class:"text-success w-4 h-4 mx-auto"})):(L(),ge(t(re),{key:1,icon:"X",class:"text-danger w-4 h-4 mx-auto"}))]),_:2},1024)]),_:2},1024))),128))]),_:2},1024)]),_:2},1024)])])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]),l(t($t),{open:h.value,onClose:g[1]||(g[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",wje,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",xje,_(t(a)("components.delete-modal.title")),1),c("div",Mje,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),Cje,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",Sje,[l(t(me),{type:"button",variant:"outline-secondary",onClick:g[0]||(g[0]=()=>{h.value=!1}),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])],64))}}),Lje={class:"grid grid-cols-12 gap-4"},$je={class:"col-span-12 sm:col-span-4 lg:col-span-3"},Aje={class:"col-span-12 sm:col-span-8 lg:col-span-9"},Eje={key:0,class:"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"},Tje=["onClick"],Pje=["src"],Dje={class:"absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"},Rje={key:0,class:"absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"},Oje=["onClick"],Vje=["src"],Uje={class:"absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"},Fje={key:0,class:"absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"},jje={key:1,class:"h-full flex items-center justify-center text-slate-400 border-2 border-dashed rounded-md bg-slate-50 dark:bg-darkmode-600/20 min-h-[150px]"},Hje={class:"flex items-center justify-between w-full"},Nje={class:"font-medium"},zje=["src"],b9=Ce({__name:"ProductImagesField",props:{modelValue:{default:()=>[]},existingImages:{default:()=>[]},deleteImageIds:{default:()=>[]}},emits:["update:modelValue","update:existingImages","update:deleteImageIds"],setup(n,{emit:e}){const a=n,s=e,{t:o}=tt(),r=ee({get:()=>a.modelValue,set:E=>s("update:modelValue",E)}),i=ee({get:()=>a.existingImages??[],set:E=>s("update:existingImages",E)}),u=ee({get:()=>a.deleteImageIds??[],set:E=>s("update:deleteImageIds",E)}),h=O([]),m=O(null),p=O(!1),b=E=>{const P=r.value.find(S=>S.hash===E.hash);return P?P.is_main:!1},x=E=>{h.value.push(E);const P=[...r.value];P.push({hash:E.hash,is_main:P.length===0}),r.value=P},w=E=>{E&&(m.value=E,p.value=!0)},$=()=>{p.value=!1,m.value=null},D=E=>{const P=[...i.value],S=P[E];if(S){const C=[...u.value];C.includes(S.id)||C.push(S.id),u.value=C,P.splice(E,1),i.value=P;const M=[...r.value],g=M.findIndex(v=>v.hash===S.hash);g!==-1&&M.splice(g,1),M.length>0&&!M.some(v=>v.is_main)&&(M[0].is_main=!0),r.value=M}},V=E=>{const P=[...h.value],S=P[E];if(S){P.splice(E,1),h.value=P;const C=[...r.value],M=C.findIndex(g=>g.hash===S.hash);M!==-1&&C.splice(M,1),C.length>0&&!C.some(g=>g.is_main)&&(C[0].is_main=!0),r.value=C}},R=E=>{const P=r.value.map(M=>({hash:M.hash,is_main:M.hash===E.hash}));r.value=P;const S=i.value.map(M=>({...M,is_main:M.hash===E.hash}));i.value=S;const C=h.value.map(M=>({...M,is_main:M.hash===E.hash}));h.value=C};return(E,P)=>(L(),U(ke,null,[c("div",Lje,[c("div",$je,[l(Iue,{onUploaded:x})]),c("div",Aje,[i.value.length+h.value.length>0?(L(),U("div",Eje,[(L(!0),U(ke,null,Fe(i.value,(S,C)=>(L(),U("div",{key:`existing-${S.id}`,class:"relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in",onClick:M=>w(S.url)},[c("img",{src:S.url,class:"w-full h-full object-cover"},null,8,Pje),c("div",Dje,[l(t(me),{type:"button",variant:"danger",size:"sm",class:"w-8 h-8 rounded-full p-0",onClick:Rt(M=>D(C),["stop"])},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{type:"button",variant:b(S)?"primary":"secondary",size:"sm",class:"text-xs px-2 py-1",onClick:Rt(M=>R(S),["stop"])},{default:f(()=>[A(_(b(S)?"Main":"Set Main"),1)]),_:2},1032,["variant","onClick"])]),b(S)?(L(),U("div",Rje," Main ")):Me("",!0)],8,Tje))),128)),(L(!0),U(ke,null,Fe(h.value,(S,C)=>(L(),U("div",{key:`new-${S.hash}`,class:"relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in",onClick:M=>w(S.url)},[c("img",{src:S.url,class:"w-full h-full object-cover"},null,8,Vje),c("div",Uje,[l(t(me),{type:"button",variant:"danger",size:"sm",class:"w-8 h-8 rounded-full p-0",onClick:Rt(M=>V(C),["stop"])},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{type:"button",variant:b(S)?"primary":"secondary",size:"sm",class:"text-xs px-2 py-1",onClick:Rt(M=>R(S),["stop"])},{default:f(()=>[A(_(b(S)?"Main":"Set Main"),1)]),_:2},1032,["variant","onClick"])]),b(S)?(L(),U("div",Fje," Main ")):Me("",!0)],8,Oje))),128))])):(L(),U("div",jje,_(t(o)("components.data-list.data_not_found")),1))])]),l(t($t),{open:p.value,size:"lg",onClose:$},{default:f(()=>[l(t($t).Panel,{class:"flex flex-col"},{default:f(()=>[l(t($t).Title,null,{default:f(()=>[c("div",Hje,[c("div",Nje,_(t(o)("views.product.fields.images")),1),l(t(me),{type:"button",variant:"outline-secondary",size:"sm",onClick:$},{default:f(()=>[l(t(re),{icon:"X",class:"w-4 h-4"})]),_:1})])]),_:1}),l(t($t).Description,{class:"bg-slate-900 flex items-center justify-center"},{default:f(()=>[m.value?(L(),U("img",{key:0,src:m.value,class:"max-h-[80vh] max-w-full object-contain"},null,8,zje)):Me("",!0)]),_:1})]),_:1})]),_:1},8,["open"])],64))}}),Bje={class:"p-5"},qje=c("br",null,null,-1),Wje={class:"p-5"},Gje={class:"grid grid-cols-12 gap-4 gap-y-3"},Zje={class:"col-span-12 lg:col-span-2"},Kje={class:"col-span-12 lg:col-span-2"},Xje={class:"col-span-12 lg:col-span-2"},Yje={class:"col-span-12 lg:col-span-6"},Qje={class:"col-span-12 lg:col-span-2"},Jje={key:0,class:"col-span-12 sm:col-span-2"},eHe={key:1,class:"col-span-12 sm:col-span-2"},tHe={class:"col-span-12 sm:col-span-2"},aHe={class:"col-span-12 sm:col-span-2"},nHe={class:"col-span-12"},sHe={class:"col-span-12 sm:col-span-2"},oHe={value:""},rHe=["value"],iHe={class:"p-5"},lHe={key:0,class:"text-slate-500 text-sm"},cHe={key:1,class:"space-y-5"},dHe={class:"flex items-center justify-between mb-3"},uHe={class:"font-medium text-sm"},pHe={class:"grid grid-cols-12 gap-4 gap-y-3"},hHe={class:"col-span-12 lg:col-span-4"},fHe={class:"grid grid-cols-12 items-center gap-4"},mHe={class:"col-span-7"},vHe={class:"col-span-5"},yHe={class:"grid grid-cols-12 items-center gap-4 mt-1"},_He={class:"col-span-7"},gHe={class:"col-span-5"},kHe={class:"flex items-center"},bHe={key:0,class:"col-span-12 lg:col-span-3"},wHe={class:"flex items-center gap-2"},xHe={class:"flex-1"},MHe={key:1,class:"col-span-12 lg:col-span-2"},CHe={class:"flex items-center gap-2"},SHe={class:"flex-1"},IHe={key:2,class:"col-span-12 lg:col-span-1"},LHe={class:"flex justify-end"},$He={key:3,class:"col-span-12 lg:col-span-2"},AHe={key:4,class:"col-span-12 lg:col-span-2"},EHe={key:0,class:"text-xs text-slate-500 mt-1 text-right"},THe={key:5,class:"col-span-12 lg:col-span-1"},PHe={key:6,class:"col-span-12 sm:col-span-1"},DHe={class:"col-span-12 lg:col-span-2"},RHe={class:"flex items-center justify-between mt-4"},OHe={class:"p-5"},VHe={class:"flex gap-4"},UHe=Ce({__name:"ProductCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new ur,i=new Xs,u=new Do,h=new Bl,m=new aa,p=new Dt,b=e,x=O([{title:"views.product.field_groups.company_info",state:fe.Expanded},{title:"views.product.field_groups.product_data",state:fe.Expanded},{title:"views.product.field_groups.unit_settings",state:fe.Expanded},{title:"views.product.fields.images",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),w=O(null),$=O(""),D=ee(()=>(w.value??[]).map(ie=>({value:ie.code,label:ie.name}))),V=O(null),R=O(""),E=ee(()=>(V.value??[]).map(ie=>({value:ie.code,label:ie.name}))),P=O({}),S=O([]),C=ie=>(P.value[ie]??[]).map(Y=>({value:Y.code,label:Y.name})),M=O(null),g=r.useProductPhysicalStoreForm(),v=ee(()=>o.isUserLocationSelected),T=ee(()=>o.selectedUserLocation);at(async()=>{b("mode-state",xe.FORM_CREATE),v.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),Le(),g.product_units.length===0&&g.product_units.push({code:"_AUTO_",is_manufacturer_sku:!1,unit_id:"",unit_name:"",price:0,is_base:!0,conversion_value:1,is_primary_unit:!0,point:0,remarks:""}),await Promise.all([B(),oe(),$e()]),g.product_units.length>0&&await be(0,""),j()});const j=()=>{g.setData({company_id:T.value.company.id})},B=async(ie="")=>{const Y=await i.readAnyGet({with_trashed:!1,search:ie,company_id:T.value.company.id,type:1,refresh:!1,limit:10});Y.success&&Y.data&&(w.value=Y.data.data.map(ue=>({code:ue.id,name:ue.name})))},oe=async(ie="")=>{const Y=await u.readAnyGet({with_trashed:!1,search:ie,company_id:T.value.company.id,refresh:!1,limit:10});Y.success&&Y.data&&(V.value=Y.data.data.map(ue=>({code:ue.id,name:ue.name})))},be=async(ie,Y="")=>{const ue=await h.readAnyGet({with_trashed:!1,search:Y,company_id:T.value.company.id,refresh:!1,limit:10});if(ue.success&&ue.data){const pe=ue.data.data.map(N=>({code:N.id,name:N.name})),H=g.product_units[ie];if(H!=null&&H.unit_id&&!pe.some(N=>N.code===H.unit_id)&&pe.push({code:H.unit_id,name:H.unit_name||""}),P.value[ie]=pe,H!=null&&H.unit_id&&!H.unit_name){const N=pe.find(Q=>Q.code===H.unit_id);N&&(H.unit_name=N.name)}}else P.value[ie]=[]},$e=async()=>{const ie=await m.getStatusDDL(!1);ie&&(M.value=ie)},Le=()=>{let ie=p.getLastEntity("PRODUCT_CREATE");ie&&(ie.code||(ie.code="_AUTO_"),g.setData(ie))},de=ie=>{x.value[ie].state===fe.Collapsed?x.value[ie].state=fe.Expanded:x.value[ie].state===fe.Expanded&&(x.value[ie].state=fe.Collapsed)},J=ie=>{let Y=document.getElementById(ie);Y&&Y.scrollIntoView({behavior:"smooth",block:"center"})},G=async()=>{g.hasErrors&&J(Object.keys(g.errors)[0]),b("loading-state",!0),await g.submit().then(()=>{ce(),Ae("hidden","",null),b("update-profile"),s.push({name:"side-menu-product-product-list"})}).catch(ie=>{const Y=Xe(ie);Ae("danger","",Y)}).finally(()=>{b("loading-state",!1)})},ce=()=>{g.reset(),g.setErrors({}),g.setData({product_units:[{code:"_AUTO_",is_manufacturer_sku:!1,unit_id:"",unit_name:"",price:0,is_base:!0,conversion_value:1,is_primary_unit:!0,point:0,remarks:""}]})},Ee=()=>{g.forgetError("code"),g.code=="_AUTO_"?g.setData({code:""}):g.setData({code:"_AUTO_"})},He=ie=>{g.product_units[ie].code=="_AUTO_"?g.product_units[ie].code="":g.product_units[ie].code="_AUTO_"},Ke=ie=>{g.product_units.forEach((Y,ue)=>{Y.is_primary_unit=ue===ie}),g.validate("product_units.is_primary_unit")},pt=()=>{g.product_units.push({code:"_AUTO_",is_manufacturer_sku:!1,unit_id:"",unit_name:"",price:0,is_base:!1,conversion_value:"",is_primary_unit:!1,point:0,remarks:""}),Object.keys(g.errors).forEach(ie=>{ie.startsWith("product_units.")&&g.forgetError(ie)})},ut=(ie,Y)=>{const ue=Y??g.product_units[ie].unit_id;if(!ue){g.product_units[ie].unit_name="";return}const H=(P.value[ie]??[]).find(N=>N.code===ue);H&&(g.product_units[ie].unit_name=H.name,g.forgetError(`product_units.${ie}.unit_id`))},ft=ie=>{g.product_units[ie].unit_id="",g.product_units[ie].unit_name="",g.forgetError(`product_units.${ie}.unit_id`)},kt=ie=>{const Y=g.product_units[ie].is_primary_unit;g.product_units.splice(ie,1),Y&&g.product_units.length>0&&(g.product_units[0].is_primary_unit=!0),Object.keys(g.errors).forEach(ue=>{ue.startsWith("product_units.")&&g.forgetError(ue)})};dt(()=>g.errors,()=>{},{deep:!0});const Ae=(ie,Y,ue)=>{b("show-alertplaceholder",{alertType:ie,title:Y,alertList:ue})},Xe=ie=>{const Y={},ue=ie,pe=ot(ie)?ie.response:ue==null?void 0:ue.response;if(pe&&pe.data){const H=pe.data;if(H.errors&&typeof H.errors=="object"){for(const N of Object.keys(H.errors)){const Q=H.errors[N];Array.isArray(Q)?Y[N]=Q:Q!=null&&(Y[N]=[String(Q)])}return Y}if(H.message)return Y.error=[String(H.message)],Y}return ie instanceof Error&&ie.message?Y.error=[ie.message]:Y.error=["Unknown error"],Y};return dt(g,ma.debounce(()=>{p.setLastEntity("PRODUCT_CREATE",g.data())},500),{deep:!0}),(ie,Y)=>(L(),U("form",{id:"productForm",onSubmit:Rt(G,["prevent"])},[l(t(ba),{cards:x.value,"using-side-tab":!1,onHandleExpandCard:de},{"card-items-0":f(()=>[c("div",Bje,[l(t(K),null,{default:f(()=>[A(_(T.value.company.code)+" ",1),qje,A(" "+_(T.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(g).company_id,"onUpdate:modelValue":Y[0]||(Y[0]=ue=>t(g).company_id=ue)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",Wje,[c("div",Gje,[c("div",Zje,[l(t(K),{class:F({"text-danger":t(g).invalid("code")})},{default:f(()=>[A(_(t(a)("views.product.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(g).code,"onUpdate:modelValue":Y[1]||(Y[1]=ue=>t(g).code=ue),class:F({"border-danger":t(g).invalid("code")}),placeholder:t(a)("views.product.fields.code"),onSetAuto:Ee,onChange:Y[2]||(Y[2]=ue=>t(g).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(g).errors.code},null,8,["messages"])]),c("div",Kje,[l(t(K),{class:F({"text-danger":t(g).invalid("category_id")})},{default:f(()=>[A(_(t(a)("views.product.fields.category_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(g).category_id,"onUpdate:modelValue":Y[3]||(Y[3]=ue=>t(g).category_id=ue),search:$.value,"onUpdate:search":Y[4]||(Y[4]=ue=>$.value=ue),options:D.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(g).invalid("category_id")}),onChange:Y[5]||(Y[5]=ue=>t(g).validate("category_id")),onSearch:B},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(g).errors.category_id},null,8,["messages"])]),c("div",Xje,[l(t(K),{class:F({"text-danger":t(g).invalid("brand_id")})},{default:f(()=>[A(_(t(a)("views.product.fields.brand_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(g).brand_id,"onUpdate:modelValue":Y[6]||(Y[6]=ue=>t(g).brand_id=ue),search:R.value,"onUpdate:search":Y[7]||(Y[7]=ue=>R.value=ue),options:E.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(g).invalid("brand_id")}),onChange:Y[8]||(Y[8]=ue=>t(g).validate("brand_id")),onSearch:oe},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(g).errors.brand_id},null,8,["messages"])]),c("div",Yje,[l(t(K),{class:F({"text-danger":t(g).invalid("name")})},{default:f(()=>[A(_(t(a)("views.product.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(g).name,"onUpdate:modelValue":Y[9]||(Y[9]=ue=>t(g).name=ue),type:"text",class:F({"border-danger":t(g).invalid("name")}),placeholder:t(a)("views.product.fields.name"),onChange:Y[10]||(Y[10]=ue=>t(g).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(g).errors.name},null,8,["messages"])]),c("div",Qje,[l(t(K),{class:F({"text-danger":t(g).invalid("is_taxable")})},{default:f(()=>[A(_(t(a)("views.product.fields.is_taxable")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(g).is_taxable,"onUpdate:modelValue":Y[11]||(Y[11]=ue=>t(g).is_taxable=ue),type:"checkbox",class:F({"border-danger":t(g).invalid("is_taxable")}),onChange:Y[12]||(Y[12]=ue=>t(g).validate("is_taxable"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(g).errors.is_taxable},null,8,["messages"])]),t(g).is_taxable?(L(),U("div",Jje,[l(t(K),{class:F({"text-danger":t(g).invalid("vat_rate")})},{default:f(()=>[A(_(t(a)("views.product.fields.vat_rate")),1)]),_:1},8,["class"]),l(t(Ta),{modelValue:t(g).vat_rate,"onUpdate:modelValue":Y[13]||(Y[13]=ue=>t(g).vat_rate=ue),class:F({"border-danger":t(g).invalid("vat_rate")}),placeholder:t(a)("views.product.fields.vat_rate"),onChange:Y[14]||(Y[14]=ue=>t(g).validate("vat_rate"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(g).errors.vat_rate},null,8,["messages"])])):Me("",!0),t(g).is_taxable?(L(),U("div",eHe,[l(t(K),{class:F({"text-danger":t(g).invalid("is_price_include_vat")})},{default:f(()=>[A(_(t(a)("views.product.fields.is_price_include_vat")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(g).is_price_include_vat,"onUpdate:modelValue":Y[15]||(Y[15]=ue=>t(g).is_price_include_vat=ue),type:"checkbox",class:F({"border-danger":t(g).invalid("is_price_include_vat")}),onChange:Y[16]||(Y[16]=ue=>t(g).validate("is_price_include_vat"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(g).errors.is_price_include_vat},null,8,["messages"])])):Me("",!0),c("div",tHe,[l(t(K),{class:F({"text-danger":t(g).invalid("is_use_serial_number")})},{default:f(()=>[A(_(t(a)("views.product.fields.is_use_serial_number")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(g).is_use_serial_number,"onUpdate:modelValue":Y[17]||(Y[17]=ue=>t(g).is_use_serial_number=ue),type:"checkbox",class:F({"border-danger":t(g).invalid("is_use_serial_number")}),onChange:Y[18]||(Y[18]=ue=>t(g).validate("is_use_serial_number"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(g).errors.is_use_serial_number},null,8,["messages"])]),c("div",aHe,[l(t(K),{class:F({"text-danger":t(g).invalid("is_expirable")})},{default:f(()=>[A(_(t(a)("views.product.fields.is_expirable")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(g).is_expirable,"onUpdate:modelValue":Y[19]||(Y[19]=ue=>t(g).is_expirable=ue),type:"checkbox",class:F({"border-danger":t(g).invalid("is_expirable")}),onChange:Y[20]||(Y[20]=ue=>t(g).validate("is_expirable"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(g).errors.is_expirable},null,8,["messages"])]),c("div",nHe,[l(t(K),{class:F({"text-danger":t(g).invalid("remarks")})},{default:f(()=>[A(_(t(a)("views.product.fields.remarks")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(g).remarks,"onUpdate:modelValue":Y[21]||(Y[21]=ue=>t(g).remarks=ue),class:F({"border-danger":t(g).invalid("remarks")}),placeholder:t(a)("views.product.fields.remarks"),onChange:Y[22]||(Y[22]=ue=>t(g).validate("remarks"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(g).errors.remarks},null,8,["messages"])]),c("div",sHe,[l(t(K),{class:F({"text-danger":t(g).invalid("status")})},{default:f(()=>[A(_(t(a)("views.product.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(g).status,"onUpdate:modelValue":Y[23]||(Y[23]=ue=>t(g).status=ue),class:F({"border-danger":t(g).invalid("status")}),onChange:Y[24]||(Y[24]=ue=>t(g).validate("status"))},{default:f(()=>[c("option",oHe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(M.value,ue=>(L(),U("option",{key:ue.code,value:ue.code},_(t(a)(ue.name)),9,rHe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(g).errors.status},null,8,["messages"])])])])]),"card-items-2":f(()=>[c("div",iHe,[t(g).product_units.length===0?(L(),U("div",lHe,_(t(a)("components.data-list.data_not_found")),1)):(L(),U("div",cHe,[(L(!0),U(ke,null,Fe(t(g).product_units,(ue,pe)=>(L(),U("div",{key:pe,class:"border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"},[c("div",dHe,[c("div",uHe,_(pe===0?t(a)("views.product.fields.base_unit"):t(a)("views.product.fields.other_unit")+" #"+pe),1),pe>0?(L(),ge(t(me),{key:0,type:"button",variant:"outline-secondary",onClick:H=>kt(pe)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])):Me("",!0)]),c("div",pHe,[c("div",hHe,[c("div",fHe,[c("div",mHe,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.code`)})},{default:f(()=>[A(_(t(a)("views.product.fields.unit_code")),1)]),_:2},1032,["class"])]),c("div",vHe,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.is_manufacturer_sku`)})},{default:f(()=>[A(_(t(a)("views.product.fields.is_manufacturer_sku")),1)]),_:2},1032,["class"])])]),c("div",yHe,[c("div",_He,[l(t(wa),{modelValue:t(g).product_units[pe].code,"onUpdate:modelValue":H=>t(g).product_units[pe].code=H,class:F({"border-danger":t(g).invalid(`product_units.${pe}.code`)}),placeholder:t(a)("views.product.fields.unit_code"),onSetAuto:H=>He(pe),onChange:H=>t(g).validate(`product_units.${pe}.code`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onSetAuto","onChange"]),l(t(_e),{messages:t(g).errors[`product_units.${pe}.code`]},null,8,["messages"])]),c("div",gHe,[c("div",kHe,[l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(g).product_units[pe].is_manufacturer_sku,"onUpdate:modelValue":H=>t(g).product_units[pe].is_manufacturer_sku=H,type:"checkbox",class:F({"border-danger":t(g).invalid(`product_units.${pe}.is_manufacturer_sku`)}),onChange:H=>t(g).validate(`product_units.${pe}.is_manufacturer_sku`)},null,8,["modelValue","onUpdate:modelValue","class","onChange"])]),_:2},1024)])])]),l(t(_e),{messages:t(g).errors[`product_units.${pe}.is_manufacturer_sku`]},null,8,["messages"])]),pe===0?(L(),U("div",bHe,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.unit_id`)})},{default:f(()=>[A(_(t(a)("views.product.fields.unit_id")),1)]),_:2},1032,["class"]),c("div",wHe,[c("div",xHe,[l(t(Bt),{modelValue:t(g).product_units[pe].unit_id,"onUpdate:modelValue":H=>t(g).product_units[pe].unit_id=H,search:S.value[pe],"onUpdate:search":H=>S.value[pe]=H,options:C(pe),placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(g).invalid(`product_units.${pe}.unit_id`)}),onChange:()=>{ut(pe),t(g).validate(`product_units.${pe}.unit_id`)},onSearch:H=>be(pe,H),onClear:H=>ft(pe)},null,8,["modelValue","onUpdate:modelValue","search","onUpdate:search","options","placeholder","class","onChange","onSearch","onClear"])])]),l(t(_e),{messages:t(g).errors[`product_units.${pe}.unit_id`]},null,8,["messages"])])):(L(),U("div",MHe,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.unit_id`)})},{default:f(()=>[A(_(t(a)("views.product.fields.unit_id")),1)]),_:2},1032,["class"]),c("div",CHe,[c("div",SHe,[l(t(Bt),{modelValue:t(g).product_units[pe].unit_id,"onUpdate:modelValue":H=>t(g).product_units[pe].unit_id=H,search:S.value[pe],"onUpdate:search":H=>S.value[pe]=H,options:C(pe),placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(g).invalid(`product_units.${pe}.unit_id`)}),onChange:()=>{ut(pe),t(g).validate(`product_units.${pe}.unit_id`)},onSearch:H=>be(pe,H),onClear:H=>ft(pe)},null,8,["modelValue","onUpdate:modelValue","search","onUpdate:search","options","placeholder","class","onChange","onSearch","onClear"])])]),l(t(_e),{messages:t(g).errors[`product_units.${pe}.unit_id`]},null,8,["messages"])])),pe>0?(L(),U("div",IHe,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.conversion_value`)})},{default:f(()=>[A(_(t(a)("views.product.fields.conversion_value")),1)]),_:2},1032,["class"]),l(t(_e),{messages:t(g).errors["product_units.is_primary_unit"]},null,8,["messages"]),l(t(Ta),{modelValue:t(g).product_units[pe].conversion_value,"onUpdate:modelValue":H=>t(g).product_units[pe].conversion_value=H,class:F({"border-danger":t(g).invalid(`product_units.${pe}.conversion_value`)}),placeholder:t(a)("views.product.fields.conversion_value"),onChange:H=>t(g).validate(`product_units.${pe}.conversion_value`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),c("div",LHe,[l(t(K),{class:"text-xs font-bold mt-1 text-slate-500 text-right"},{default:f(()=>[A(_(t(g).product_units[0].unit_name),1)]),_:1})]),l(t(_e),{messages:t(g).errors[`product_units.${pe}.conversion_value`]},null,8,["messages"])])):(L(),U("div",$He,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.price`)})},{default:f(()=>[A(_(t(a)("views.product.fields.base_unit_price")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:t(g).product_units[pe].price,"onUpdate:modelValue":H=>t(g).product_units[pe].price=H,class:F({"border-danger":t(g).invalid(`product_units.${pe}.price`)}),placeholder:t(a)("views.product.fields.base_unit_price"),onChange:H=>t(g).validate(`product_units.${pe}.price`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),l(t(_e),{messages:t(g).errors[`product_units.${pe}.price`]},null,8,["messages"])])),pe>0?(L(),U("div",AHe,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.price`)})},{default:f(()=>[A(_(t(a)("views.product.fields.price")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:t(g).product_units[pe].price,"onUpdate:modelValue":H=>t(g).product_units[pe].price=H,class:F({"border-danger":t(g).invalid(`product_units.${pe}.price`)}),placeholder:t(a)("views.product.fields.price"),onChange:H=>t(g).validate(`product_units.${pe}.price`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),!t(g).product_units[pe].is_base&&t(g).product_units[pe].conversion_value>0&&t(g).product_units[pe].price>0?(L(),U("div",EHe,_(t(a)("views.product.fields.base_unit_price"))+": "+_(t(_a)((t(g).product_units[pe].price/t(g).product_units[pe].conversion_value).toFixed(2))),1)):Me("",!0),l(t(_e),{messages:t(g).errors[`product_units.${pe}.price`]},null,8,["messages"])])):Me("",!0),pe===0?(L(),U("div",THe,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.point`)})},{default:f(()=>[A(_(t(a)("views.product.fields.point")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:t(g).product_units[pe].point,"onUpdate:modelValue":H=>t(g).product_units[pe].point=H,class:F({"border-danger":t(g).invalid(`product_units.${pe}.point`)}),placeholder:t(a)("views.product.fields.point"),onChange:H=>t(g).validate(`product_units.${pe}.point`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),l(t(_e),{messages:t(g).errors[`product_units.${pe}.point`]},null,8,["messages"])])):Me("",!0),pe>0?(L(),U("div",PHe,[l(t(K),{class:F({"text-danger":t(g).invalid(`product_units.${pe}.point`)})},{default:f(()=>[A(_(t(a)("views.product.fields.point")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:t(g).product_units[pe].point,"onUpdate:modelValue":H=>t(g).product_units[pe].point=H,class:F({"border-danger":t(g).invalid(`product_units.${pe}.point`)}),placeholder:t(a)("views.product.fields.point"),onChange:H=>t(g).validate(`product_units.${pe}.point`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),l(t(_e),{messages:t(g).errors[`product_units.${pe}.point`]},null,8,["messages"])])):Me("",!0),c("div",DHe,[l(t(Nn),{class:"mt-9"},{default:f(()=>[l(t(Nn).Input,{type:"radio",name:"primary_unit",class:F(["mr-2 border-slate-300",{"border-danger":t(g).errors["product_units.is_primary_unit"]}]),checked:t(g).product_units[pe].is_primary_unit,onChange:H=>Ke(pe)},null,8,["class","checked","onChange"]),l(t(Nn).Label,{class:F(["text-sm",{"text-danger":t(g).errors["product_units.is_primary_unit"],"":!t(g).errors["product_units.is_primary_unit"]}])},{default:f(()=>[A(_(t(a)("views.product.fields.is_primary_unit")),1)]),_:1},8,["class"])]),_:2},1024),l(t(_e),{messages:t(g).errors["product_units.is_primary_unit"]},null,8,["messages"])])])]))),128))])),c("div",RHe,[l(t(K)),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:pt},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4 mr-2"}),A(" "+_(t(a)("views.product.actions.add_unit")),1)]),_:1})])])]),"card-items-3":f(()=>[c("div",OHe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.images")),1)]),_:1}),l(b9,{modelValue:t(g).image_hashes,"onUpdate:modelValue":Y[25]||(Y[25]=ue=>t(g).image_hashes=ue)},null,8,["modelValue"])])]),"card-items-button":f(()=>[c("div",VHe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(g).validating||t(g).hasErrors},{default:f(()=>[t(g).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:ce},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),FHe={class:"p-5"},jHe=c("br",null,null,-1),HHe={class:"p-5"},NHe={class:"grid grid-cols-12 gap-4 gap-y-3"},zHe={class:"col-span-12 lg:col-span-2"},BHe={class:"col-span-12 lg:col-span-2"},qHe={class:"col-span-12 lg:col-span-2"},WHe={class:"col-span-12 lg:col-span-6"},GHe={class:"col-span-12 lg:col-span-2"},ZHe={key:0,class:"col-span-12 sm:col-span-2"},KHe={key:1,class:"col-span-12 sm:col-span-2"},XHe={class:"col-span-12 sm:col-span-2"},YHe={class:"col-span-12 sm:col-span-2"},QHe={class:"col-span-12"},JHe={class:"col-span-12 sm:col-span-2"},eNe={value:""},tNe=["value"],aNe={class:"p-5"},nNe={key:0,class:"text-slate-500 text-sm"},sNe={key:1,class:"space-y-5"},oNe={class:"flex items-center justify-between mb-3"},rNe={class:"font-medium text-sm"},iNe={class:"grid grid-cols-12 gap-4 gap-y-3"},lNe={class:"col-span-12 lg:col-span-4"},cNe={class:"grid grid-cols-12 items-center gap-4"},dNe={class:"col-span-7"},uNe={class:"col-span-5"},pNe={class:"grid grid-cols-12 items-center gap-4 mt-1"},hNe={class:"col-span-7"},fNe={class:"col-span-5"},mNe={class:"flex items-center"},vNe={key:0,class:"col-span-12 lg:col-span-3"},yNe={class:"flex items-center gap-2"},_Ne={class:"flex-1"},gNe={key:1,class:"col-span-12 lg:col-span-2"},kNe={class:"flex items-center gap-2"},bNe={class:"flex-1"},wNe={key:2,class:"col-span-12 lg:col-span-1"},xNe={class:"flex justify-end"},MNe={key:3,class:"col-span-12 lg:col-span-2"},CNe={key:4,class:"col-span-12 lg:col-span-2"},SNe={key:0,class:"text-xs text-slate-500 mt-1 text-right"},INe={key:5,class:"col-span-12 lg:col-span-1"},LNe={key:6,class:"col-span-12 sm:col-span-1"},$Ne={class:"col-span-12 lg:col-span-2"},ANe={class:"flex items-center justify-between mt-4"},ENe={class:"p-5"},TNe={class:"flex gap-4"},PNe=Ce({__name:"ProductEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=Sa(),r=zt(),i=new ur,u=new Xs,h=new Do,m=new Bl,p=new aa,b=new Dt,x=e,w=O([{title:"views.product.field_groups.company_info",state:fe.Expanded},{title:"views.product.field_groups.product_data",state:fe.Expanded},{title:"views.product.field_groups.unit_settings",state:fe.Expanded},{title:"views.product.fields.images",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),$=O(null),D=O(""),V=ee(()=>($.value??[]).map(ie=>({value:ie.code,label:ie.name}))),R=O(null),E=O(""),P=ee(()=>(R.value??[]).map(ie=>({value:ie.code,label:ie.name}))),S=O({}),C=O([]),M=ie=>(S.value[ie]??[]).map(Y=>({value:Y.code,label:Y.name})),g=O(null),v=i.useProductPhysicalUpdateForm(o.params.ulid.toString()),T=O([]),j=ee(()=>r.isUserLocationSelected),B=ee(()=>r.selectedUserLocation);at(async()=>{x("mode-state",xe.FORM_EDIT),j.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([be(),$e(),de()]),await oe(),await Promise.all(v.product_units.map((ie,Y)=>Le(Y,"")))});const oe=async()=>{var Y,ue,pe;x("loading-state",!0);const ie=await i.read(o.params.ulid.toString());if(x("loading-state",!1),ie.success&&ie.data){if(v.setData({company_id:((Y=ie.data.company)==null?void 0:Y.id)??"",code:ie.data.code,category_id:((ue=ie.data.category)==null?void 0:ue.id)??"",brand_id:((pe=ie.data.brand)==null?void 0:pe.id)??"",name:ie.data.name,is_taxable:ie.data.is_taxable,vat_rate:ie.data.vat_rate,is_price_include_vat:ie.data.is_price_include_vat,is_use_serial_number:ie.data.is_use_serial_number,is_expirable:ie.data.is_expirable,remarks:ie.data.remarks,status:ie.data.status,product_units:ie.data.product_units.map(H=>{var N,Q;return{id:H.id,code:H.code,is_manufacturer_sku:!1,unit_id:((N=H.unit)==null?void 0:N.id)??"",unit_name:((Q=H.unit)==null?void 0:Q.name)??"",price:H.price,is_base:H.is_base,conversion_value:H.conversion_value,is_primary_unit:H.is_primary_unit,point:H.point,remarks:H.remarks}})}),ie.data.product_images){const H=ie.data.product_images.map(N=>({id:N.id,product_id:N.product_id,path:N.path,url:N.url,hash:N.hash,is_main:N.is_main}));T.value=H,v.image_hashes=H.map(N=>({hash:N.hash,is_main:N.is_main}))}v.product_units.length===0&&v.product_units.push({code:"_AUTO_",is_manufacturer_sku:!1,unit_id:"",unit_name:"",price:0,is_base:!0,conversion_value:1,is_primary_unit:!0,point:0,remarks:""})}else s.push({name:"side-menu-product-product-list"})},be=async(ie="")=>{const Y=await u.readAnyGet({with_trashed:!1,search:ie,company_id:B.value.company.id,type:1,refresh:!1,limit:10});Y.success&&Y.data&&($.value=Y.data.data.map(ue=>({code:ue.id,name:ue.name})))},$e=async(ie="")=>{const Y=await h.readAnyGet({with_trashed:!1,search:ie,company_id:B.value.company.id,refresh:!1,limit:10});Y.success&&Y.data&&(R.value=Y.data.data.map(ue=>({code:ue.id,name:ue.name})))},Le=async(ie,Y="")=>{const ue=await m.readAnyGet({with_trashed:!1,search:Y,company_id:B.value.company.id,refresh:!1,limit:10});if(ue.success&&ue.data){const pe=ue.data.data.map(N=>({code:N.id,name:N.name})),H=v.product_units[ie];if(H!=null&&H.unit_id&&!pe.some(N=>N.code===H.unit_id)&&pe.push({code:H.unit_id,name:H.unit_name||""}),S.value[ie]=pe,H!=null&&H.unit_id&&!H.unit_name){const N=pe.find(Q=>Q.code===H.unit_id);N&&(H.unit_name=N.name)}}else S.value[ie]=[]},de=async()=>{const ie=await p.getStatusDDL(!1);ie&&(g.value=ie)},J=ie=>{w.value[ie].state===fe.Collapsed?w.value[ie].state=fe.Expanded:w.value[ie].state===fe.Expanded&&(w.value[ie].state=fe.Collapsed)},G=ie=>{let Y=document.getElementById(ie);Y&&Y.scrollIntoView({behavior:"smooth",block:"center"})},ce=async()=>{v.hasErrors&&G(Object.keys(v.errors)[0]),x("loading-state",!0),await v.submit().then(()=>{Xe("hidden","",null),x("update-profile"),s.push({name:"side-menu-product-product-list"})}).catch(ie=>{const Y=ln(ie);Xe("danger","",Y)}).finally(()=>{x("loading-state",!1)})},Ee=async()=>{v.reset(),v.setErrors({}),await oe()},He=()=>{v.forgetError("code"),v.code=="_AUTO_"?v.setData({code:""}):v.setData({code:"_AUTO_"})},Ke=ie=>{v.product_units[ie].code=="_AUTO_"?v.product_units[ie].code="":v.product_units[ie].code="_AUTO_"},pt=ie=>{v.product_units.forEach((Y,ue)=>{Y.is_primary_unit=ue===ie}),v.validate("product_units.is_primary_unit")},ut=()=>{v.product_units.push({code:"_AUTO_",is_manufacturer_sku:!1,unit_id:"",unit_name:"",price:0,is_base:!1,conversion_value:"",is_primary_unit:!1,point:0,remarks:""}),Object.keys(v.errors).forEach(ie=>{ie.startsWith("product_units.")&&v.forgetError(ie)})},ft=(ie,Y)=>{const ue=Y??v.product_units[ie].unit_id;if(!ue){v.product_units[ie].unit_name="";return}const H=(S.value[ie]??[]).find(N=>N.code===ue);H&&(v.product_units[ie].unit_name=H.name,v.forgetError(`product_units.${ie}.unit_id`))},kt=ie=>{v.product_units[ie].unit_id="",v.product_units[ie].unit_name=""},Ae=ie=>{const Y=v.product_units[ie];Y.id&&(v.delete_product_unit_ids||(v.delete_product_unit_ids=[]),v.delete_product_unit_ids.push(Y.id));const ue=v.product_units[ie].is_primary_unit;v.product_units.splice(ie,1),ue&&v.product_units.length>0&&(v.product_units[0].is_primary_unit=!0),Object.keys(v.errors).forEach(pe=>{pe.startsWith("product_units.")&&v.forgetError(pe)})},Xe=(ie,Y,ue)=>{x("show-alertplaceholder",{alertType:ie,title:Y,alertList:ue})};return dt(v,ma.debounce(ie=>{b.setLastEntity("PRODUCT_EDIT",ie.data())},500),{deep:!0}),(ie,Y)=>(L(),U("form",{id:"productForm",onSubmit:Rt(ce,["prevent"])},[l(t(ba),{cards:w.value,"using-side-tab":!1,onHandleExpandCard:J},{"card-items-0":f(()=>[c("div",FHe,[l(t(K),null,{default:f(()=>[A(_(B.value.company.code)+" ",1),jHe,A(" "+_(B.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(v).company_id,"onUpdate:modelValue":Y[0]||(Y[0]=ue=>t(v).company_id=ue)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",HHe,[c("div",NHe,[c("div",zHe,[l(t(K),{class:F({"text-danger":t(v).invalid("code")})},{default:f(()=>[A(_(t(a)("views.product.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(v).code,"onUpdate:modelValue":Y[1]||(Y[1]=ue=>t(v).code=ue),class:F({"border-danger":t(v).invalid("code")}),placeholder:t(a)("views.product.fields.code"),onSetAuto:He,onChange:Y[2]||(Y[2]=ue=>t(v).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(v).errors.code},null,8,["messages"])]),c("div",BHe,[l(t(K),{class:F({"text-danger":t(v).invalid("category_id")})},{default:f(()=>[A(_(t(a)("views.product.fields.category_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(v).category_id,"onUpdate:modelValue":Y[3]||(Y[3]=ue=>t(v).category_id=ue),search:D.value,"onUpdate:search":Y[4]||(Y[4]=ue=>D.value=ue),options:V.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(v).invalid("category_id")}),onChange:Y[5]||(Y[5]=ue=>t(v).validate("category_id")),onSearch:be},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(v).errors.category_id},null,8,["messages"])]),c("div",qHe,[l(t(K),{class:F({"text-danger":t(v).invalid("brand_id")})},{default:f(()=>[A(_(t(a)("views.product.fields.brand_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(v).brand_id,"onUpdate:modelValue":Y[6]||(Y[6]=ue=>t(v).brand_id=ue),search:E.value,"onUpdate:search":Y[7]||(Y[7]=ue=>E.value=ue),options:P.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(v).invalid("brand_id")}),onChange:Y[8]||(Y[8]=ue=>t(v).validate("brand_id")),onSearch:$e},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(v).errors.brand_id},null,8,["messages"])]),c("div",WHe,[l(t(K),{class:F({"text-danger":t(v).invalid("name")})},{default:f(()=>[A(_(t(a)("views.product.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(v).name,"onUpdate:modelValue":Y[9]||(Y[9]=ue=>t(v).name=ue),type:"text",class:F({"border-danger":t(v).invalid("name")}),placeholder:t(a)("views.product.fields.name"),onChange:Y[10]||(Y[10]=ue=>t(v).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(v).errors.name},null,8,["messages"])]),c("div",GHe,[l(t(K),{class:F({"text-danger":t(v).invalid("is_taxable")})},{default:f(()=>[A(_(t(a)("views.product.fields.is_taxable")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(v).is_taxable,"onUpdate:modelValue":Y[11]||(Y[11]=ue=>t(v).is_taxable=ue),type:"checkbox",class:F({"border-danger":t(v).invalid("is_taxable")}),onChange:Y[12]||(Y[12]=ue=>t(v).validate("is_taxable"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(v).errors.is_taxable},null,8,["messages"])]),t(v).is_taxable?(L(),U("div",ZHe,[l(t(K),{class:F({"text-danger":t(v).invalid("vat_rate")})},{default:f(()=>[A(_(t(a)("views.product.fields.vat_rate")),1)]),_:1},8,["class"]),l(t(Ta),{modelValue:t(v).vat_rate,"onUpdate:modelValue":Y[13]||(Y[13]=ue=>t(v).vat_rate=ue),class:F({"border-danger":t(v).invalid("vat_rate")}),placeholder:t(a)("views.product.fields.vat_rate"),onChange:Y[14]||(Y[14]=ue=>t(v).validate("vat_rate"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(v).errors.vat_rate},null,8,["messages"])])):Me("",!0),t(v).is_taxable?(L(),U("div",KHe,[l(t(K),{class:F({"text-danger":t(v).invalid("is_price_include_vat")})},{default:f(()=>[A(_(t(a)("views.product.fields.is_price_include_vat")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(v).is_price_include_vat,"onUpdate:modelValue":Y[15]||(Y[15]=ue=>t(v).is_price_include_vat=ue),type:"checkbox",class:F({"border-danger":t(v).invalid("is_price_include_vat")}),onChange:Y[16]||(Y[16]=ue=>t(v).validate("is_price_include_vat"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(v).errors.is_price_include_vat},null,8,["messages"])])):Me("",!0),c("div",XHe,[l(t(K),{class:F({"text-danger":t(v).invalid("is_use_serial_number")})},{default:f(()=>[A(_(t(a)("views.product.fields.is_use_serial_number")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(v).is_use_serial_number,"onUpdate:modelValue":Y[17]||(Y[17]=ue=>t(v).is_use_serial_number=ue),type:"checkbox",class:F({"border-danger":t(v).invalid("is_use_serial_number")}),onChange:Y[18]||(Y[18]=ue=>t(v).validate("is_use_serial_number"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(v).errors.is_use_serial_number},null,8,["messages"])]),c("div",YHe,[l(t(K),{class:F({"text-danger":t(v).invalid("is_expirable")})},{default:f(()=>[A(_(t(a)("views.product.fields.is_expirable")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(v).is_expirable,"onUpdate:modelValue":Y[19]||(Y[19]=ue=>t(v).is_expirable=ue),type:"checkbox",class:F({"border-danger":t(v).invalid("is_expirable")}),onChange:Y[20]||(Y[20]=ue=>t(v).validate("is_expirable"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(v).errors.is_expirable},null,8,["messages"])]),c("div",QHe,[l(t(K),{class:F({"text-danger":t(v).invalid("remarks")})},{default:f(()=>[A(_(t(a)("views.product.fields.remarks")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(v).remarks,"onUpdate:modelValue":Y[21]||(Y[21]=ue=>t(v).remarks=ue),class:F({"border-danger":t(v).invalid("remarks")}),placeholder:t(a)("views.product.fields.remarks"),onChange:Y[22]||(Y[22]=ue=>t(v).validate("remarks"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(v).errors.remarks},null,8,["messages"])]),c("div",JHe,[l(t(K),{class:F({"text-danger":t(v).invalid("status")})},{default:f(()=>[A(_(t(a)("views.product.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(v).status,"onUpdate:modelValue":Y[23]||(Y[23]=ue=>t(v).status=ue),class:F({"border-danger":t(v).invalid("status")}),onChange:Y[24]||(Y[24]=ue=>t(v).validate("status"))},{default:f(()=>[c("option",eNe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(g.value,ue=>(L(),U("option",{key:ue.code,value:ue.code},_(t(a)(ue.name)),9,tNe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(v).errors.status},null,8,["messages"])])])])]),"card-items-2":f(()=>[c("div",aNe,[t(v).product_units.length===0?(L(),U("div",nNe,_(t(a)("components.data-list.data_not_found")),1)):(L(),U("div",sNe,[(L(!0),U(ke,null,Fe(t(v).product_units,(ue,pe)=>(L(),U("div",{key:pe,class:"border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"},[c("div",oNe,[c("div",rNe,_(pe===0?t(a)("views.product.fields.base_unit"):t(a)("views.product.fields.other_unit")+" #"+pe),1),pe>0?(L(),ge(t(me),{key:0,type:"button",variant:"outline-secondary",onClick:H=>Ae(pe)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])):Me("",!0)]),c("div",iNe,[c("div",lNe,[c("div",cNe,[c("div",dNe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.code`)})},{default:f(()=>[A(_(t(a)("views.product.fields.unit_code")),1)]),_:2},1032,["class"])]),c("div",uNe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.is_manufacturer_sku`)})},{default:f(()=>[A(_(t(a)("views.product.fields.is_manufacturer_sku")),1)]),_:2},1032,["class"])])]),c("div",pNe,[c("div",hNe,[l(t(wa),{modelValue:t(v).product_units[pe].code,"onUpdate:modelValue":H=>t(v).product_units[pe].code=H,class:F({"border-danger":t(v).invalid(`product_units.${pe}.code`)}),placeholder:t(a)("views.product.fields.unit_code"),onSetAuto:H=>Ke(pe),onChange:H=>t(v).validate(`product_units.${pe}.code`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onSetAuto","onChange"]),l(t(_e),{messages:t(v).errors[`product_units.${pe}.code`]},null,8,["messages"])]),c("div",fNe,[c("div",mNe,[l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(v).product_units[pe].is_manufacturer_sku,"onUpdate:modelValue":H=>t(v).product_units[pe].is_manufacturer_sku=H,type:"checkbox",class:F({"border-danger":t(v).invalid(`product_units.${pe}.is_manufacturer_sku`)}),onChange:H=>t(v).validate(`product_units.${pe}.is_manufacturer_sku`)},null,8,["modelValue","onUpdate:modelValue","class","onChange"])]),_:2},1024)])])]),l(t(_e),{messages:t(v).errors[`product_units.${pe}.is_manufacturer_sku`]},null,8,["messages"])]),pe===0?(L(),U("div",vNe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.unit_id`)})},{default:f(()=>[A(_(t(a)("views.product.fields.unit_id")),1)]),_:2},1032,["class"]),c("div",yNe,[c("div",_Ne,[l(t(Bt),{modelValue:t(v).product_units[pe].unit_id,"onUpdate:modelValue":H=>t(v).product_units[pe].unit_id=H,search:C.value[pe],"onUpdate:search":H=>C.value[pe]=H,options:M(pe),placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(v).invalid(`product_units.${pe}.unit_id`)}),onChange:()=>{ft(pe),t(v).validate(`product_units.${pe}.unit_id`)},onSearch:H=>Le(pe,H),onClear:H=>kt(pe)},null,8,["modelValue","onUpdate:modelValue","search","onUpdate:search","options","placeholder","class","onChange","onSearch","onClear"])])]),l(t(_e),{messages:t(v).errors[`product_units.${pe}.unit_id`]},null,8,["messages"])])):(L(),U("div",gNe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.unit_id`)})},{default:f(()=>[A(_(t(a)("views.product.fields.unit_id")),1)]),_:2},1032,["class"]),c("div",kNe,[c("div",bNe,[l(t(Bt),{modelValue:t(v).product_units[pe].unit_id,"onUpdate:modelValue":H=>t(v).product_units[pe].unit_id=H,search:C.value[pe],"onUpdate:search":H=>C.value[pe]=H,options:M(pe),placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(v).invalid(`product_units.${pe}.unit_id`)}),onChange:()=>{ft(pe),t(v).validate(`product_units.${pe}.unit_id`)},onSearch:H=>Le(pe,H),onClear:H=>kt(pe)},null,8,["modelValue","onUpdate:modelValue","search","onUpdate:search","options","placeholder","class","onChange","onSearch","onClear"])])]),l(t(_e),{messages:t(v).errors[`product_units.${pe}.unit_id`]},null,8,["messages"])])),pe>0?(L(),U("div",wNe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.conversion_value`)})},{default:f(()=>[A(_(t(a)("views.product.fields.conversion_value")),1)]),_:2},1032,["class"]),l(t(_e),{messages:t(v).errors["product_units.is_primary_unit"]},null,8,["messages"]),l(t(Ta),{modelValue:t(v).product_units[pe].conversion_value,"onUpdate:modelValue":H=>t(v).product_units[pe].conversion_value=H,class:F({"border-danger":t(v).invalid(`product_units.${pe}.conversion_value`)}),placeholder:t(a)("views.product.fields.conversion_value"),onChange:H=>t(v).validate(`product_units.${pe}.conversion_value`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),c("div",xNe,[l(t(K),{class:"text-xs font-bold mt-1 text-slate-500 text-right"},{default:f(()=>[A(_(t(v).product_units[0].unit_name),1)]),_:1})]),l(t(_e),{messages:t(v).errors[`product_units.${pe}.conversion_value`]},null,8,["messages"])])):(L(),U("div",MNe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.price`)})},{default:f(()=>[A(_(t(a)("views.product.fields.base_unit_price")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:t(v).product_units[pe].price,"onUpdate:modelValue":H=>t(v).product_units[pe].price=H,class:F({"border-danger":t(v).invalid(`product_units.${pe}.price`)}),placeholder:t(a)("views.product.fields.base_unit_price"),onChange:H=>t(v).validate(`product_units.${pe}.price`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),l(t(_e),{messages:t(v).errors[`product_units.${pe}.price`]},null,8,["messages"])])),pe>0?(L(),U("div",CNe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.price`)})},{default:f(()=>[A(_(t(a)("views.product.fields.price")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:t(v).product_units[pe].price,"onUpdate:modelValue":H=>t(v).product_units[pe].price=H,class:F({"border-danger":t(v).invalid(`product_units.${pe}.price`)}),placeholder:t(a)("views.product.fields.price"),onChange:H=>t(v).validate(`product_units.${pe}.price`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),!t(v).product_units[pe].is_base&&t(v).product_units[pe].conversion_value>0&&t(v).product_units[pe].price>0?(L(),U("div",SNe,_(t(a)("views.product.fields.base_unit_price"))+": "+_(t(_a)((t(v).product_units[pe].price/t(v).product_units[pe].conversion_value).toFixed(2))),1)):Me("",!0),l(t(_e),{messages:t(v).errors[`product_units.${pe}.price`]},null,8,["messages"])])):Me("",!0),pe===0?(L(),U("div",INe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.point`)})},{default:f(()=>[A(_(t(a)("views.product.fields.point")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:t(v).product_units[pe].point,"onUpdate:modelValue":H=>t(v).product_units[pe].point=H,class:F({"border-danger":t(v).invalid(`product_units.${pe}.point`)}),placeholder:t(a)("views.product.fields.point"),onChange:H=>t(v).validate(`product_units.${pe}.point`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),l(t(_e),{messages:t(v).errors[`product_units.${pe}.point`]},null,8,["messages"])])):Me("",!0),pe>0?(L(),U("div",LNe,[l(t(K),{class:F({"text-danger":t(v).invalid(`product_units.${pe}.point`)})},{default:f(()=>[A(_(t(a)("views.product.fields.point")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:t(v).product_units[pe].point,"onUpdate:modelValue":H=>t(v).product_units[pe].point=H,class:F({"border-danger":t(v).invalid(`product_units.${pe}.point`)}),placeholder:t(a)("views.product.fields.point"),onChange:H=>t(v).validate(`product_units.${pe}.point`)},null,8,["modelValue","onUpdate:modelValue","class","placeholder","onChange"]),l(t(_e),{messages:t(v).errors[`product_units.${pe}.point`]},null,8,["messages"])])):Me("",!0),c("div",$Ne,[l(t(Nn),{class:"mt-9"},{default:f(()=>[l(t(Nn).Input,{type:"radio",name:"primary_unit",class:F(["mr-2 border-slate-300",{"border-danger":t(v).errors["product_units.is_primary_unit"]}]),checked:t(v).product_units[pe].is_primary_unit,onChange:H=>pt(pe)},null,8,["class","checked","onChange"]),l(t(Nn).Label,{class:F(["text-sm",{"text-danger":t(v).errors["product_units.is_primary_unit"],"":!t(v).errors["product_units.is_primary_unit"]}])},{default:f(()=>[A(_(t(a)("views.product.fields.is_primary_unit")),1)]),_:1},8,["class"])]),_:2},1024),l(t(_e),{messages:t(v).errors["product_units.is_primary_unit"]},null,8,["messages"])])])]))),128))])),c("div",ANe,[l(t(K)),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:ut},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4 mr-2"}),A(" "+_(t(a)("views.product.actions.add_unit")),1)]),_:1})])])]),"card-items-3":f(()=>[c("div",ENe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.images")),1)]),_:1}),l(b9,{modelValue:t(v).image_hashes,"onUpdate:modelValue":Y[25]||(Y[25]=ue=>t(v).image_hashes=ue),"existing-images":T.value,"onUpdate:existingImages":Y[26]||(Y[26]=ue=>T.value=ue),"delete-image-ids":t(v).delete_image_ids,"onUpdate:deleteImageIds":Y[27]||(Y[27]=ue=>t(v).delete_image_ids=ue)},null,8,["modelValue","existing-images","delete-image-ids"])])]),"card-items-button":f(()=>[c("div",TNe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(v).validating},{default:f(()=>[t(v).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:Ee},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),DNe={class:"mt-8"},RNe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},ONe={class:"ml-4 mr-4"},VNe={class:"font-medium"},UNe={class:"mt-1 text-slate-500"},FNe=Ce({__name:"ProductServiceIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.product_service.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[productServiceNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-product-product-service-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-product-product-service-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.product_service.actions.create";break;case xe.FORM_EDIT:h.value="views.product_service.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.product_service.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("PRODUCT_SERVICE_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("PRODUCT_SERVICE_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",DNe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",RNe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"productServiceNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",ONe,[c("div",VNe,_(w.value),1),c("div",UNe,_($.value),1)])]),_:1})])}}}),jNe={class:"grid grid-cols-12 gap-6 mt-5"},HNe={class:"col-span-12 intro-y lg:col-span-12"},NNe={class:"flex justify-center italic"},zNe={class:"font-medium whitespace-nowrap"},BNe={class:"mt-0.5 flex items-center flex-wrap"},qNe={class:"font-medium"},WNe={class:"mt-1"},GNe={key:0,class:"flex items-center text-success text-xs"},ZNe={key:1,class:"flex items-center text-danger text-xs"},KNe={class:"font-medium"},XNe={class:"flex flex-col gap-0"},YNe={class:"flex flex-col gap-0 items-end"},QNe={class:"flex justify-end gap-1"},JNe={class:"grid grid-cols-12 gap-6"},eze={class:"col-span-12 lg:col-span-6"},tze={class:"font-medium text-base mb-3 border-b pb-2"},aze={class:"grid grid-cols-1 gap-y-2"},nze={class:"flex flex-row"},sze={class:"w-48 text-slate-500"},oze={class:"flex-1 font-medium"},rze={class:"flex flex-row"},ize={class:"w-48 text-slate-500"},lze={class:"flex-1 font-medium"},cze={class:"flex flex-row"},dze={class:"w-48 text-slate-500"},uze={class:"flex-1 font-medium"},pze={class:"flex flex-row"},hze={class:"w-48 text-slate-500"},fze={class:"flex-1 font-medium"},mze={class:"flex flex-row"},vze={class:"w-48 text-slate-500"},yze={class:"flex-1 font-medium"},_ze={class:"col-span-12 lg:col-span-6"},gze={class:"font-medium text-base mb-3 border-b pb-2"},kze={class:"grid grid-cols-1 gap-y-2"},bze={class:"flex flex-row"},wze={class:"w-48 text-slate-500"},xze={class:"flex-1 font-medium"},Mze={class:"flex flex-row"},Cze={class:"w-48 text-slate-500"},Sze={class:"flex-1 font-medium"},Ize={class:"flex flex-row"},Lze={class:"w-48 text-slate-500"},$ze={class:"flex-1 font-medium"},Aze={class:"flex flex-row"},Eze={class:"w-48 text-slate-500"},Tze={class:"flex-1 font-medium"},Pze={class:"flex flex-row"},Dze={class:"w-48 text-slate-500"},Rze={class:"flex-1 font-medium"},Oze={class:"flex flex-row"},Vze={class:"w-48 text-slate-500"},Uze={class:"flex-1 font-medium"},Fze={class:"p-5 text-center"},jze={class:"mt-5 text-3xl"},Hze={class:"mt-2 text-slate-500"},Nze=c("br",null,null,-1),zze={class:"px-5 pb-8 text-center"},Bze=Ce({__name:"ProductServiceList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new ur,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(M,g,v,T)=>{i("loading-state",!0);const B={with_trashed:!1,company_id:x.value.company.id,search:M,type:4,include_id:void 0,refresh:g,page:v,per_page:T};let oe=await o.readAnyPaginate(B);oe.success&&oe.data?p.value=oe.data:S("danger","",oe.errors),i("loading-state",!1)},$=async M=>{await w(M.search.text,!1,M.pagination.page,M.pagination.per_page)},D=M=>{m.value===M?m.value=null:m.value=M},V=M=>{if(!p.value)return;let g=p.value.data[M].ulid;i("mode-state",xe.FORM_EDIT),s.push({name:"side-menu-product-product-service-edit",params:{ulid:g}})},R=M=>{if(!p.value)return;let g=p.value.data[M].ulid;u.value=g,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let M=await o.delete(u.value);i("loading-state",!1),M.success?(await w("",!0,1,10),P(a("views.product_service.alert.delete.title"),a("views.product_service.alert.delete.message"))):S("danger","",M.errors)},P=(M,g)=>{i("show-notification",{title:M,content:g})},S=(M,g,v)=>{i("show-alertplaceholder",{alertType:M,title:g,alertList:v})},C=M=>{if(!M.product_images||M.product_images.length===0)return null;const g=M.product_images.find(T=>T.is_main);if(g!=null&&g.url)return g.url;const v=M.product_images[0];return(v==null?void 0:v.url)??null};return(M,g)=>(L(),U(ke,null,[c("div",jNe,[c("div",HNe,[l(t(mn),{title:t(a)("views.product_service.table.title"),data:p.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.image")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.detail.info_title")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.product.table.cols.unit")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.price")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"7"},{default:f(()=>[c("div",NNe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(v,T)=>(L(),U(ke,{key:v.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[l(Eo,{"image-url":C(v)},null,8,["image-url"])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",zNe,_(v.code),1),c("div",BNe,[c("span",qNe,_(v.category.name),1)]),c("div",WNe,[v.status=="ACTIVE"?(L(),U("div",GNe,[l(t(re),{icon:"CheckCircle",class:"w-3 h-3 mr-1"}),A(" "+_(t(a)("views.product_service.status.active")),1)])):(L(),U("div",ZNe,[l(t(re),{icon:"X",class:"w-3 h-3 mr-1"}),A(" "+_(t(a)("views.product_service.status.inactive")),1)]))])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",KNe,_(v.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",XNe,[(L(!0),U(ke,null,Fe(v.product_units,j=>(L(),U("div",{key:j.ulid,class:"h-6 flex items-center whitespace-nowrap"},_(j.unit.name)+_(j.conversion_value>1?": "+t(_a)(j.conversion_value)+" "+v.product_units[0].unit.name:""),1))),128))])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",YNe,[(L(!0),U(ke,null,Fe(v.product_units,j=>(L(),U("div",{key:j.ulid,class:"h-6 flex items-center whitespace-nowrap"},_(t(_a)(j.price)),1))),128))])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",QNe,[l(t(me),{variant:"outline-secondary",onClick:j=>D(T)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:j=>V(T)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:j=>R(T)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==T})},{default:f(()=>[l(t(X).Td,{colspan:"5",class:"p-5"},{default:f(()=>[c("div",JNe,[c("div",eze,[c("div",tze,_(t(a)("views.product.detail.info_title")),1),c("div",aze,[c("div",nze,[c("div",sze,_(t(a)("views.product_service.fields.code")),1),c("div",oze,_(v.code),1)]),c("div",rze,[c("div",ize,_(t(a)("views.product_service.fields.category_id")),1),c("div",lze,_(v.category.name),1)]),c("div",cze,[c("div",dze,_(t(a)("views.product_service.fields.name")),1),c("div",uze,_(v.name),1)]),c("div",pze,[c("div",hze,_(t(a)("views.product_service.fields.status")),1),c("div",fze,_(v.status=="ACTIVE"?t(a)("views.product_service.status.active"):t(a)("views.product_service.status.inactive")),1)]),c("div",mze,[c("div",vze,_(t(a)("views.product_service.fields.remarks")),1),c("div",yze,_(v.remarks||"-"),1)])])]),c("div",_ze,[c("div",gze,_(t(a)("views.product.detail.settings_title")),1),c("div",kze,[c("div",bze,[c("div",wze,_(t(a)("views.product_service.fields.is_taxable")),1),c("div",xze,_(v.is_taxable?t(a)("components.dropdown.values.switch.on"):t(a)("components.dropdown.values.switch.off")),1)]),c("div",Mze,[c("div",Cze,_(t(a)("views.product_service.fields.vat_rate")),1),c("div",Sze,_(t(_a)(v.vat_rate))+"%",1)]),c("div",Ize,[c("div",Lze,_(t(a)("views.product_service.fields.is_price_include_vat")),1),c("div",$ze,_(v.is_price_include_vat?t(a)("components.dropdown.values.switch.on"):t(a)("components.dropdown.values.switch.off")),1)]),c("div",Aze,[c("div",Eze,_(t(a)("views.product_service.fields.unit_id")),1),c("div",Tze,_(v.product_units&&v.product_units.length>0?v.product_units[0].unit.name:"-"),1)]),c("div",Pze,[c("div",Dze,_(t(a)("views.product_service.fields.price")),1),c("div",Rze,_(v.product_units&&v.product_units.length>0?t(_a)(v.product_units[0].price):"-"),1)]),c("div",Oze,[c("div",Vze,_(t(a)("views.product_service.fields.point")),1),c("div",Uze,_(v.product_units&&v.product_units.length>0?v.product_units[0].point:"-"),1)])])])])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]),l(t($t),{open:h.value,onClose:g[1]||(g[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",Fze,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",jze,_(t(a)("components.delete-modal.title")),1),c("div",Hze,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),Nze,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",zze,[l(t(me),{type:"button",variant:"outline-secondary",onClick:g[0]||(g[0]=()=>{h.value=!1}),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])],64))}}),qze={class:"p-5"},Wze=c("br",null,null,-1),Gze={class:"p-5"},Zze={class:"grid grid-cols-12 gap-4 gap-y-3"},Kze={class:"col-span-12 lg:col-span-2"},Xze={class:"col-span-12 lg:col-span-2"},Yze={class:"col-span-12 lg:col-span-2"},Qze={class:"col-span-12 lg:col-span-6"},Jze={class:"col-span-12 lg:col-span-2"},eBe={class:"col-span-12 lg:col-span-2"},tBe={class:"col-span-12 lg:col-span-2"},aBe={key:0,class:"col-span-12 lg:col-span-2"},nBe={key:1,class:"col-span-12 lg:col-span-2"},sBe={class:"col-span-12"},oBe={class:"col-span-12 lg:col-span-2"},rBe={value:""},iBe=["value"],lBe={class:"col-span-12"},cBe={class:"flex gap-4"},dBe=Ce({__name:"ProductServiceCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new ur,i=new Xs,u=new Bl,h=new aa,m=new Dt,p=e,b=O([{title:"views.product_service.field_groups.company_info",state:fe.Expanded},{title:"views.product_service.field_groups.product_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),x=O(null),w=O(""),$=ee(()=>(x.value??[]).map(J=>({value:J.code,label:J.name}))),D=O(null),V=O(""),R=ee(()=>(D.value??[]).map(J=>({value:J.code,label:J.name}))),E=O(null),P=r.useProductServiceStoreForm(),S=ee(()=>o.isUserLocationSelected),C=ee(()=>o.selectedUserLocation);at(async()=>{p("mode-state",xe.FORM_CREATE),S.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([g(),v(),T()]),j(),M()});const M=()=>{P.setData({company_id:C.value.company.id})},g=async(J="")=>{const G=await i.readAnyGet({with_trashed:!1,search:J,company_id:C.value.company.id,type:2,refresh:!1,limit:10});G.success&&G.data&&(x.value=G.data.data.map(ce=>({code:ce.id,name:ce.name})))},v=async(J="")=>{const G=await u.readAnyGet({with_trashed:!1,search:J,company_id:C.value.company.id,refresh:!1,limit:10});G.success&&G.data&&(D.value=G.data.data.map(ce=>({code:ce.id,name:ce.name})))},T=async()=>{const J=await h.getStatusDDL(!1);J&&(E.value=J)},j=()=>{let J=m.getLastEntity("PRODUCT_SERVICE_CREATE");J&&P.setData(J)},B=J=>{b.value[J].state===fe.Collapsed?b.value[J].state=fe.Expanded:b.value[J].state===fe.Expanded&&(b.value[J].state=fe.Collapsed)},oe=J=>{let G=document.getElementById(J);G&&G.scrollIntoView({behavior:"smooth",block:"center"})},be=async()=>{P.hasErrors&&oe(Object.keys(P.errors)[0]),p("loading-state",!0),await P.submit().then(()=>{$e(),p("update-profile"),s.push({name:"side-menu-product-product-service-list"})}).catch(J=>{let G=ln(J);de("danger","",G)}).finally(()=>{p("loading-state",!1)})},$e=()=>{P.reset(),P.setErrors({})},Le=()=>{P.forgetError("code"),P.code=="_AUTO_"?P.setData({code:""}):P.setData({code:"_AUTO_"})},de=(J,G,ce)=>{p("show-alertplaceholder",{alertType:J,title:G,alertList:ce})};return dt(P,ma.debounce(J=>{m.setLastEntity("PRODUCT_SERVICE_CREATE",J.data()),P.hasErrors},500),{deep:!0}),(J,G)=>(L(),U("form",{id:"productServiceForm",onSubmit:Rt(be,["prevent"])},[l(t(ba),{cards:b.value,"using-side-tab":!1,onHandleExpandCard:B},{"card-items-0":f(()=>[c("div",qze,[l(t(K),null,{default:f(()=>[A(_(C.value.company.code)+" ",1),Wze,A(" "+_(C.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(P).company_id,"onUpdate:modelValue":G[0]||(G[0]=ce=>t(P).company_id=ce)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",Gze,[c("div",Zze,[c("div",Kze,[l(t(K),{class:F({"text-danger":t(P).invalid("code")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(P).code,"onUpdate:modelValue":G[1]||(G[1]=ce=>t(P).code=ce),class:F({"border-danger":t(P).invalid("code")}),placeholder:t(a)("views.product_service.fields.code"),onSetAuto:Le,onChange:G[2]||(G[2]=ce=>t(P).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(P).errors.code},null,8,["messages"])]),c("div",Xze,[l(t(K),{class:F({"text-danger":t(P).invalid("category_id")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.category_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(P).category_id,"onUpdate:modelValue":G[3]||(G[3]=ce=>t(P).category_id=ce),search:w.value,"onUpdate:search":G[4]||(G[4]=ce=>w.value=ce),options:$.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(P).invalid("category_id")}),onChange:G[5]||(G[5]=ce=>t(P).validate("category_id")),onSearch:g},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(P).errors.category_id},null,8,["messages"])]),c("div",Yze,[l(t(K),{class:F({"text-danger":t(P).invalid("unit_id")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.unit_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(P).unit_id,"onUpdate:modelValue":G[6]||(G[6]=ce=>t(P).unit_id=ce),search:V.value,"onUpdate:search":G[7]||(G[7]=ce=>V.value=ce),options:R.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(P).invalid("unit_id")}),onChange:G[8]||(G[8]=ce=>t(P).validate("unit_id")),onSearch:v},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(P).errors.unit_id},null,8,["messages"])]),c("div",Qze,[l(t(K),{class:F({"text-danger":t(P).invalid("name")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(P).name,"onUpdate:modelValue":G[9]||(G[9]=ce=>t(P).name=ce),type:"text",class:F({"border-danger":t(P).invalid("name")}),placeholder:t(a)("views.product_service.fields.name"),onChange:G[10]||(G[10]=ce=>t(P).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(P).errors.name},null,8,["messages"])]),c("div",Jze,[l(t(K),{class:F({"text-danger":t(P).invalid("price")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.price")),1)]),_:1},8,["class"]),l(t(Ta),{modelValue:t(P).price,"onUpdate:modelValue":G[11]||(G[11]=ce=>t(P).price=ce),class:F({"border-danger":t(P).invalid("price")}),placeholder:t(a)("views.product_service.fields.price"),onChange:G[12]||(G[12]=ce=>t(P).validate("price"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(P).errors.price},null,8,["messages"])]),c("div",eBe,[l(t(K),{class:F({"text-danger":t(P).invalid("point")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.point")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(P).point,"onUpdate:modelValue":G[13]||(G[13]=ce=>t(P).point=ce),type:"number",class:F({"border-danger":t(P).invalid("point")}),placeholder:t(a)("views.product_service.fields.point"),onChange:G[14]||(G[14]=ce=>t(P).validate("point"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(P).errors.point},null,8,["messages"])]),c("div",tBe,[l(t(K),{class:F({"text-danger":t(P).invalid("is_taxable")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.is_taxable")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(P).is_taxable,"onUpdate:modelValue":G[15]||(G[15]=ce=>t(P).is_taxable=ce),type:"checkbox",class:F({"border-danger":t(P).invalid("is_taxable")}),onChange:G[16]||(G[16]=ce=>t(P).validate("is_taxable"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(P).errors.is_taxable},null,8,["messages"])]),t(P).is_taxable?(L(),U("div",aBe,[l(t(K),{class:F({"text-danger":t(P).invalid("vat_rate")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.vat_rate")),1)]),_:1},8,["class"]),l(t(Ta),{modelValue:t(P).vat_rate,"onUpdate:modelValue":G[17]||(G[17]=ce=>t(P).vat_rate=ce),class:F({"border-danger":t(P).invalid("vat_rate")}),placeholder:t(a)("views.product_service.fields.vat_rate"),onChange:G[18]||(G[18]=ce=>t(P).validate("vat_rate"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(P).errors.vat_rate},null,8,["messages"])])):Me("",!0),t(P).is_taxable?(L(),U("div",nBe,[l(t(K),{class:F({"text-danger":t(P).invalid("is_price_include_vat")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.is_price_include_vat")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(P).is_price_include_vat,"onUpdate:modelValue":G[19]||(G[19]=ce=>t(P).is_price_include_vat=ce),type:"checkbox",class:F({"border-danger":t(P).invalid("is_price_include_vat")}),onChange:G[20]||(G[20]=ce=>t(P).validate("is_price_include_vat"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(P).errors.is_price_include_vat},null,8,["messages"])])):Me("",!0),c("div",sBe,[l(t(K),{class:F({"text-danger":t(P).invalid("remarks")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.remarks")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(P).remarks,"onUpdate:modelValue":G[21]||(G[21]=ce=>t(P).remarks=ce),class:F({"border-danger":t(P).invalid("remarks")}),placeholder:t(a)("views.product_service.fields.remarks"),onChange:G[22]||(G[22]=ce=>t(P).validate("remarks"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(P).errors.remarks},null,8,["messages"])]),c("div",oBe,[l(t(K),{class:F({"text-danger":t(P).invalid("status")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(P).status,"onUpdate:modelValue":G[23]||(G[23]=ce=>t(P).status=ce),class:F({"border-danger":t(P).invalid("status")}),onChange:G[24]||(G[24]=ce=>t(P).validate("status"))},{default:f(()=>[c("option",rBe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(E.value,ce=>(L(),U("option",{key:ce.code,value:ce.code},_(t(a)(ce.name)),9,iBe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(P).errors.status},null,8,["messages"])]),c("div",lBe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.images")),1)]),_:1}),l(b9,{modelValue:t(P).image_hashes,"onUpdate:modelValue":G[25]||(G[25]=ce=>t(P).image_hashes=ce)},null,8,["modelValue"])])])])]),"card-items-button":f(()=>[c("div",cBe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(P).validating||t(P).hasErrors},{default:f(()=>[t(P).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:$e},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),uBe={class:"p-5"},pBe=c("br",null,null,-1),hBe={class:"p-5"},fBe={class:"grid grid-cols-12 gap-4 gap-y-3"},mBe={class:"col-span-12 lg:col-span-2"},vBe={class:"col-span-12 lg:col-span-2"},yBe={class:"col-span-12 lg:col-span-2"},_Be={class:"col-span-12 lg:col-span-6"},gBe={class:"col-span-12 lg:col-span-2"},kBe={class:"col-span-12 lg:col-span-2"},bBe={class:"col-span-12 lg:col-span-2"},wBe={key:0,class:"col-span-12 lg:col-span-2"},xBe={key:1,class:"col-span-12 lg:col-span-2"},MBe={class:"col-span-12"},CBe={class:"col-span-12 lg:col-span-2"},SBe={value:""},IBe=["value"],LBe={class:"col-span-12"},$Be={class:"flex gap-4"},ABe=Ce({__name:"ProductServiceEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=Sa(),r=zt(),i=new ur,u=new Xs,h=new Bl,m=new aa,p=new Dt,b=e,x=O([{title:"views.product_service.field_groups.company_info",state:fe.Expanded},{title:"views.product_service.field_groups.product_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),w=O(null),$=O(""),D=ee(()=>(w.value??[]).map(G=>({value:G.code,label:G.name}))),V=O(null),R=O(""),E=ee(()=>(V.value??[]).map(G=>({value:G.code,label:G.name}))),P=O(null),S=i.useProductServiceUpdateForm(o.params.ulid.toString()),C=O([]),M=ee(()=>r.isUserLocationSelected),g=ee(()=>r.selectedUserLocation);at(async()=>{b("mode-state",xe.FORM_EDIT),M.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([T(),j(),B()]),await v()});const v=async()=>{b("loading-state",!0);const G=await i.read(o.params.ulid.toString());if(b("loading-state",!1),G.success&&G.data){if(S.setData({company_id:G.data.company.id,code:G.data.code,category_id:G.data.category.id,name:G.data.name,is_taxable:G.data.is_taxable,vat_rate:G.data.vat_rate,is_price_include_vat:G.data.is_price_include_vat,remarks:G.data.remarks,status:G.data.status,unit_id:G.data.product_units[0].unit.id,price:G.data.product_units[0].price,point:G.data.product_units[0].point,product_units:G.data.product_units}),G.data.product_images){const ce=G.data.product_images.map(Ee=>({id:Ee.id,product_id:Ee.product_id,path:Ee.path,url:Ee.url,hash:Ee.hash,is_main:Ee.is_main}));C.value=ce,S.image_hashes=ce.map(Ee=>({hash:Ee.hash,is_main:Ee.is_main}))}}else s.push({name:"side-menu-product-product-service-list"})},T=async(G="")=>{const ce=await u.readAnyGet({with_trashed:!1,search:G,company_id:g.value.company.id,type:2,refresh:!1,limit:10});ce.success&&ce.data&&(w.value=ce.data.data.map(Ee=>({code:Ee.id,name:Ee.name})))},j=async(G="")=>{const ce=await h.readAnyGet({with_trashed:!1,search:G,company_id:g.value.company.id,refresh:!1,limit:10});ce.success&&ce.data&&(V.value=ce.data.data.map(Ee=>({code:Ee.id,name:Ee.name})))},B=async()=>{const G=await m.getStatusDDL(!1);G&&(P.value=G)},oe=G=>{x.value[G].state===fe.Collapsed?x.value[G].state=fe.Expanded:x.value[G].state===fe.Expanded&&(x.value[G].state=fe.Collapsed)},be=G=>{let ce=document.getElementById(G);ce&&ce.scrollIntoView({behavior:"smooth",block:"center"})},$e=async()=>{S.hasErrors&&be(Object.keys(S.errors)[0]),b("loading-state",!0),await S.submit().then(()=>{b("update-profile"),s.push({name:"side-menu-product-product-service-list"})}).catch(G=>{const ce=ln(G);J("danger","",ce)}).finally(()=>{b("loading-state",!1)})},Le=async()=>{S.reset(),S.setErrors({}),await v()},de=()=>{S.forgetError("code"),S.code=="_AUTO_"?S.setData({code:""}):S.setData({code:"_AUTO_"})},J=(G,ce,Ee)=>{b("show-alertplaceholder",{alertType:G,title:ce,alertList:Ee})};return dt(S,ma.debounce(G=>{p.setLastEntity("PRODUCT_SERVICE_EDIT",G.data())},500),{deep:!0}),(G,ce)=>(L(),U("form",{id:"productServiceForm",onSubmit:Rt($e,["prevent"])},[l(t(ba),{cards:x.value,"using-side-tab":!1,onHandleExpandCard:oe},{"card-items-0":f(()=>[c("div",uBe,[l(t(K),null,{default:f(()=>[A(_(g.value.company.code)+" ",1),pBe,A(" "+_(g.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(S).company_id,"onUpdate:modelValue":ce[0]||(ce[0]=Ee=>t(S).company_id=Ee)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",hBe,[c("div",fBe,[c("div",mBe,[l(t(K),{class:F({"text-danger":t(S).invalid("code")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(S).code,"onUpdate:modelValue":ce[1]||(ce[1]=Ee=>t(S).code=Ee),class:F({"border-danger":t(S).invalid("code")}),placeholder:t(a)("views.product_service.fields.code"),onSetAuto:de,onChange:ce[2]||(ce[2]=Ee=>t(S).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(S).errors.code},null,8,["messages"])]),c("div",vBe,[l(t(K),{class:F({"text-danger":t(S).invalid("category_id")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.category_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(S).category_id,"onUpdate:modelValue":ce[3]||(ce[3]=Ee=>t(S).category_id=Ee),search:$.value,"onUpdate:search":ce[4]||(ce[4]=Ee=>$.value=Ee),options:D.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(S).invalid("category_id")}),onChange:ce[5]||(ce[5]=Ee=>t(S).validate("category_id")),onSearch:T},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(S).errors.category_id},null,8,["messages"])]),c("div",yBe,[l(t(K),{class:F({"text-danger":t(S).invalid("unit_id")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.unit_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(S).unit_id,"onUpdate:modelValue":ce[6]||(ce[6]=Ee=>t(S).unit_id=Ee),search:R.value,"onUpdate:search":ce[7]||(ce[7]=Ee=>R.value=Ee),options:E.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(S).invalid("unit_id")}),onChange:ce[8]||(ce[8]=Ee=>t(S).validate("unit_id")),onSearch:j},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(S).errors.unit_id},null,8,["messages"])]),c("div",_Be,[l(t(K),{class:F({"text-danger":t(S).invalid("name")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(S).name,"onUpdate:modelValue":ce[9]||(ce[9]=Ee=>t(S).name=Ee),type:"text",class:F({"border-danger":t(S).invalid("name")}),placeholder:t(a)("views.product_service.fields.name"),onChange:ce[10]||(ce[10]=Ee=>t(S).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(S).errors.name},null,8,["messages"])]),c("div",gBe,[l(t(K),{class:F({"text-danger":t(S).invalid("price")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.price")),1)]),_:1},8,["class"]),l(t(Ta),{modelValue:t(S).price,"onUpdate:modelValue":ce[11]||(ce[11]=Ee=>t(S).price=Ee),class:F({"border-danger":t(S).invalid("price")}),placeholder:t(a)("views.product_service.fields.price"),onChange:ce[12]||(ce[12]=Ee=>t(S).validate("price"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(S).errors.price},null,8,["messages"])]),c("div",kBe,[l(t(K),{class:F({"text-danger":t(S).invalid("point")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.point")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(S).point,"onUpdate:modelValue":ce[13]||(ce[13]=Ee=>t(S).point=Ee),type:"number",class:F({"border-danger":t(S).invalid("point")}),placeholder:t(a)("views.product_service.fields.point"),onChange:ce[14]||(ce[14]=Ee=>t(S).validate("point"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(S).errors.point},null,8,["messages"])]),c("div",bBe,[l(t(K),{class:F({"text-danger":t(S).invalid("is_taxable")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.is_taxable")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(S).is_taxable,"onUpdate:modelValue":ce[15]||(ce[15]=Ee=>t(S).is_taxable=Ee),type:"checkbox",class:F({"border-danger":t(S).invalid("is_taxable")}),onChange:ce[16]||(ce[16]=Ee=>t(S).validate("is_taxable"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(S).errors.is_taxable},null,8,["messages"])]),t(S).is_taxable?(L(),U("div",wBe,[l(t(K),{class:F({"text-danger":t(S).invalid("vat_rate")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.vat_rate")),1)]),_:1},8,["class"]),l(t(Ta),{modelValue:t(S).vat_rate,"onUpdate:modelValue":ce[17]||(ce[17]=Ee=>t(S).vat_rate=Ee),class:F({"border-danger":t(S).invalid("vat_rate")}),placeholder:t(a)("views.product_service.fields.vat_rate"),onChange:ce[18]||(ce[18]=Ee=>t(S).validate("vat_rate"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(S).errors.vat_rate},null,8,["messages"])])):Me("",!0),t(S).is_taxable?(L(),U("div",xBe,[l(t(K),{class:F({"text-danger":t(S).invalid("is_price_include_vat")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.is_price_include_vat")),1)]),_:1},8,["class"]),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(S).is_price_include_vat,"onUpdate:modelValue":ce[19]||(ce[19]=Ee=>t(S).is_price_include_vat=Ee),type:"checkbox",class:F({"border-danger":t(S).invalid("is_price_include_vat")}),onChange:ce[20]||(ce[20]=Ee=>t(S).validate("is_price_include_vat"))},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(S).errors.is_price_include_vat},null,8,["messages"])])):Me("",!0),c("div",MBe,[l(t(K),{class:F({"text-danger":t(S).invalid("remarks")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.remarks")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(S).remarks,"onUpdate:modelValue":ce[21]||(ce[21]=Ee=>t(S).remarks=Ee),class:F({"border-danger":t(S).invalid("remarks")}),placeholder:t(a)("views.product_service.fields.remarks"),onChange:ce[22]||(ce[22]=Ee=>t(S).validate("remarks"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(S).errors.remarks},null,8,["messages"])]),c("div",CBe,[l(t(K),{class:F({"text-danger":t(S).invalid("status")})},{default:f(()=>[A(_(t(a)("views.product_service.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(S).status,"onUpdate:modelValue":ce[23]||(ce[23]=Ee=>t(S).status=Ee),class:F({"border-danger":t(S).invalid("status")}),onChange:ce[24]||(ce[24]=Ee=>t(S).validate("status"))},{default:f(()=>[c("option",SBe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(P.value,Ee=>(L(),U("option",{key:Ee.code,value:Ee.code},_(t(a)(Ee.name)),9,IBe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(S).errors.status},null,8,["messages"])]),c("div",LBe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.images")),1)]),_:1}),l(b9,{modelValue:t(S).image_hashes,"onUpdate:modelValue":ce[25]||(ce[25]=Ee=>t(S).image_hashes=Ee),"existing-images":C.value,"onUpdate:existingImages":ce[26]||(ce[26]=Ee=>C.value=Ee),"delete-image-ids":t(S).delete_image_ids,"onUpdate:deleteImageIds":ce[27]||(ce[27]=Ee=>t(S).delete_image_ids=Ee)},null,8,["modelValue","existing-images","delete-image-ids"])])])])]),"card-items-button":f(()=>[c("div",$Be,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(S).validating||t(S).hasErrors},{default:f(()=>[t(S).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:Le},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),EBe={class:"mt-8"},TBe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},PBe={class:"ml-4 mr-4"},DBe={class:"font-medium"},RBe={class:"mt-1 text-slate-500"},OBe=Ce({__name:"SupplierIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.supplier.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[supplierNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-supplier-supplier-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-supplier-supplier-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.supplier.actions.create";break;case xe.FORM_EDIT:h.value="views.supplier.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.supplier.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("SUPPLIER_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("SUPPLIER_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",EBe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",TBe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertPlaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"supplierNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",PBe,[c("div",DBe,_(w.value),1),c("div",RBe,_($.value),1)])]),_:1})])}}});class TP{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useSupplierCreateForm(){const e=je("api.post.supplier.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",name:"",address:"",city:"",payment_term_type:"",payment_term:0,taxable_enterprise:!1,tax_id:"",status:"",remarks:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed?1:0,s.company_id=e.company_id,s.search=e.search?e.search:"",e.status!==void 0&&e.status!==null&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.supplier.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.status!==void 0&&e.status!==null&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.supplier.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.supplier.read",{supplier:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useSupplierEditForm(e){const a=je("api.post.supplier.edit",e,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:"",address:"",city:"",payment_term_type:"",payment_term:0,taxable_enterprise:!1,tax_id:"",status:"",remarks:""})}async delete(e){const a={success:!1};try{const s=je("api.post.supplier.delete",{supplier:e},!1,this.ziggyRoute),o=await nt.post(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const VBe={class:"flex justify-end gap-1"},UBe={class:"flex flex-row"},FBe={class:"ml-5 w-48 text-right pr-5"},jBe={class:"flex-1"},HBe={class:"flex flex-row"},NBe={class:"ml-5 w-48 text-right pr-5"},zBe={class:"flex-1"},BBe={class:"flex flex-row"},qBe={class:"ml-5 w-48 text-right pr-5"},WBe={class:"flex-1"},GBe={class:"flex flex-row"},ZBe={class:"ml-5 w-48 text-right pr-5"},KBe={class:"flex-1"},XBe={class:"flex flex-row"},YBe={class:"ml-5 w-48 text-right pr-5"},QBe={class:"flex-1"},JBe={key:0},eqe={key:1},tqe={class:"flex flex-row"},aqe={class:"ml-5 w-48 text-right pr-5"},nqe={class:"flex-1"},sqe={class:"p-5 text-center"},oqe={class:"mt-5 text-3xl"},rqe={class:"mt-2 text-slate-500"},iqe=c("br",null,null,-1),lqe={class:"px-5 pb-8 text-center"},cqe=Ce({__name:"SupplierList",emits:["mode-state","loading-state","update-profile","show-alert-placeholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new TP,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation),w=async(P,S,C,M)=>{i("loading-state",!0);const g={with_trashed:!1,company_id:x.value.company.id,search:P,refresh:S,page:C,per_page:M};let v=await o.readAnyPaginate(g);v.success&&v.data?(p.value=v.data,i("show-alert-placeholder",{alertType:"hidden",title:"",alertList:null})):i("show-alert-placeholder",{alertType:"danger",title:"",alertList:v.errors}),i("loading-state",!1)},$=async P=>{await w(P.search.text,!1,P.pagination.page,P.pagination.per_page)},D=P=>{m.value===P?m.value=null:m.value=P},V=P=>{if(!p.value)return;const S=p.value.data[P].ulid;s.push({name:"side-menu-supplier-supplier-edit",params:{ulid:S}})},R=P=>{p.value&&(u.value=p.value.data[P].ulid,h.value=!0)},E=async()=>{h.value=!1,i("loading-state",!0);const P=await o.delete(u.value);P.success?(i("update-profile"),await w("",!0,1,10),i("show-notification",{title:a("views.supplier.alert.delete.title"),content:a("views.supplier.alert.delete.message")})):i("show-alert-placeholder",{alertType:"danger",title:"",alertList:P.errors}),i("loading-state",!1)};return at(async()=>{if(i("mode-state",xe.LIST),!b.value){s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}await w("",!0,1,10)}),(P,S)=>(L(),ge(t(mn),{title:t(a)("views.supplier.table.title"),data:p.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.supplier.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.supplier.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.supplier.table.cols.status")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length===0?(L(),ge(t(X).Tr,{key:0},{default:f(()=>[l(t(X).Td,{colspan:"4",class:"text-center italic"},{default:f(()=>[A(_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(C,M)=>(L(),U(ke,{key:C.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(C.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(C.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[C.status==="ACTIVE"?(L(),ge(t(re),{key:0,icon:"CheckCircle"})):Me("",!0),C.status==="INACTIVE"?(L(),ge(t(re),{key:1,icon:"X"})):Me("",!0)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",VBe,[l(t(me),{variant:"outline-secondary",onClick:g=>D(M)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:g=>V(M)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:g=>R(M)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==M})},{default:f(()=>[l(t(X).Td,{colspan:"4"},{default:f(()=>[c("div",UBe,[c("div",FBe,_(t(a)("views.supplier.fields.code")),1),c("div",jBe,_(C.code),1)]),c("div",HBe,[c("div",NBe,_(t(a)("views.supplier.fields.name")),1),c("div",zBe,_(C.name),1)]),c("div",BBe,[c("div",qBe,_(t(a)("views.supplier.fields.address")),1),c("div",WBe,_(C.address),1)]),c("div",GBe,[c("div",ZBe,_(t(a)("views.supplier.fields.tax_id")),1),c("div",KBe,_(C.tax_id),1)]),c("div",XBe,[c("div",YBe,_(t(a)("views.supplier.fields.status")),1),c("div",QBe,[C.status==="ACTIVE"?(L(),U("span",JBe,_(t(a)("components.dropdown.values.statusDDL.active")),1)):Me("",!0),C.status==="INACTIVE"?(L(),U("span",eqe,_(t(a)("components.dropdown.values.statusDDL.inactive")),1)):Me("",!0)])]),c("div",tqe,[c("div",aqe,_(t(a)("views.supplier.fields.remarks")),1),c("div",nqe,_(C.remarks),1)])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:S[1]||(S[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",sqe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",oqe,_(t(a)("components.delete-modal.title")),1),c("div",rqe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),iqe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",lqe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:S[0]||(S[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","data","pagination"]))}}),dqe={class:"p-5"},uqe={class:"mt-3"},pqe=c("span",{class:"text-danger"},"*",-1),hqe={class:"mt-3"},fqe=c("span",{class:"text-danger"},"*",-1),mqe={class:"mt-3"},vqe={class:"mt-3"},yqe={class:"mt-3"},_qe=c("span",{class:"text-danger"},"*",-1),gqe={value:""},kqe=["value"],bqe={class:"mt-3"},wqe={class:"p-5"},xqe={class:"mt-3"},Mqe={value:""},Cqe=["value"],Sqe={class:"mt-3"},Iqe={class:"mt-3"},Lqe={class:"mt-3"},$qe={class:"flex gap-4"},Aqe=Ce({__name:"SupplierCreate",emits:["mode-state","loading-state","update-profile","show-alert-placeholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new TP,i=new aa,u=new Dt,h=r.useSupplierCreateForm(),m=O(null),p=O(null),b=O(!1),x=O([{title:"views.supplier.field_groups.general",state:fe.Expanded,id:"general"},{title:"views.supplier.field_groups.finance",state:fe.Expanded,id:"finance"},{title:"",state:fe.Hidden,id:"button"}]),w=ee(()=>o.isUserLocationSelected),$=ee(()=>o.selectedUserLocation),D=e,V=()=>{h.forgetError("code"),h.code=="_AUTO_"?h.setData({code:""}):h.setData({code:"_AUTO_"})},R=async()=>{b.value=!0;try{await Promise.all([(async()=>{const T=await i.getStatusDDL(!1);m.value=T})(),(async()=>{const T=await i.getPaymentTermTypesDDL();p.value=T})()])}catch(T){console.error("Error loading DDLs:",T)}finally{b.value=!1}},E=()=>{let T=u.getLastEntity("SUPPLIER_CREATE");T&&h.setData(T)},P=T=>{x.value[T].state===fe.Collapsed?x.value[T].state=fe.Expanded:x.value[T].state===fe.Expanded&&(x.value[T].state=fe.Collapsed)},S=T=>{let j=document.getElementById(T);j&&j.scrollIntoView({behavior:"smooth",block:"center"})},C=async()=>{h.hasErrors&&S(Object.keys(h.errors)[0]),D("loading-state",!0),await h.submit().then(()=>{M(),D("update-profile"),s.push({name:"side-menu-supplier"})}).catch(T=>{let j=v(T);g("danger","",j)}).finally(()=>{D("loading-state",!1)})},M=()=>{h.reset(),h.setErrors({}),u.removeLastEntity("SUPPLIER_CREATE"),window.scrollTo({top:0,behavior:"smooth"})},g=(T,j,B)=>{D("show-alert-placeholder",{alertType:T,title:j,alertList:B})},v=T=>{const j={},B=T,oe=ot(T)?T.response:B==null?void 0:B.response;if(oe&&oe.data){const be=oe.data;if(be.errors&&typeof be.errors=="object"){for(const $e of Object.keys(be.errors)){const Le=be.errors[$e];Array.isArray(Le)?j[$e]=Le:Le!=null&&(j[$e]=[String(Le)])}return j}if(be.message)return j.error=[String(be.message)],j}return T instanceof Error&&T.message?j.error=[T.message]:j.error=["Unknown error"],j};return at(async()=>{D("mode-state",xe.FORM_CREATE),E(),w.value&&h.setData({company_id:$.value.company.id}),await R()}),dt(h,ma.debounce(T=>{u.setLastEntity("SUPPLIER_CREATE",T.data())},500),{deep:!0}),(T,j)=>(L(),U("form",{onSubmit:Rt(C,["prevent"])},[l(t(ba),{cards:x.value,"using-side-tab":!1,onHandleExpandCard:P},{"card-items-general":f(()=>[c("div",dqe,[c("div",uqe,[l(t(K),{htmlFor:"code"},{default:f(()=>[A(_(t(a)("views.supplier.fields.code"))+" ",1),pqe]),_:1}),l(t(wa),{id:"code",modelValue:t(h).code,"onUpdate:modelValue":j[0]||(j[0]=B=>t(h).code=B),placeholder:t(a)("views.supplier.fields.code"),class:F({"border-danger":t(h).invalid("code")}),onSetAuto:V,onChange:j[1]||(j[1]=B=>t(h).validate("code"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(h).errors.code},null,8,["messages"])]),c("div",hqe,[l(t(K),{htmlFor:"name"},{default:f(()=>[A(_(t(a)("views.supplier.fields.name"))+" ",1),fqe]),_:1}),l(t(Oe),{id:"name",modelValue:t(h).name,"onUpdate:modelValue":j[2]||(j[2]=B=>t(h).name=B),type:"text",placeholder:t(a)("views.supplier.fields.name"),class:F({"border-danger":t(h).invalid("name")}),onChange:j[3]||(j[3]=B=>t(h).validate("name"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(h).errors.name},null,8,["messages"])]),c("div",mqe,[l(t(K),{htmlFor:"address"},{default:f(()=>[A(_(t(a)("views.supplier.fields.address")),1)]),_:1}),l(t(la),{id:"address",modelValue:t(h).address,"onUpdate:modelValue":j[4]||(j[4]=B=>t(h).address=B),placeholder:t(a)("views.supplier.fields.address"),class:F({"border-danger":t(h).invalid("address")}),onChange:j[5]||(j[5]=B=>t(h).validate("address"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(h).errors.address},null,8,["messages"])]),c("div",vqe,[l(t(K),{htmlFor:"city"},{default:f(()=>[A(_(t(a)("views.supplier.fields.city")),1)]),_:1}),l(t(Oe),{id:"city",modelValue:t(h).city,"onUpdate:modelValue":j[6]||(j[6]=B=>t(h).city=B),type:"text",placeholder:t(a)("views.supplier.fields.city"),class:F({"border-danger":t(h).invalid("city")}),onChange:j[7]||(j[7]=B=>t(h).validate("city"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(h).errors.city},null,8,["messages"])]),c("div",yqe,[l(t(K),{htmlFor:"status"},{default:f(()=>[A(_(t(a)("views.supplier.fields.status"))+" ",1),_qe]),_:1}),l(t(Zt),{id:"status",modelValue:t(h).status,"onUpdate:modelValue":j[8]||(j[8]=B=>t(h).status=B),class:F({"border-danger":t(h).invalid("status")}),onChange:j[9]||(j[9]=B=>t(h).validate("status"))},{default:f(()=>[c("option",gqe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(m.value,B=>(L(),U("option",{key:B.code,value:B.code},_(t(a)(B.name)),9,kqe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(h).errors.status},null,8,["messages"])]),c("div",bqe,[l(t(K),{htmlFor:"remarks"},{default:f(()=>[A(_(t(a)("views.supplier.fields.remarks")),1)]),_:1}),l(t(la),{id:"remarks",modelValue:t(h).remarks,"onUpdate:modelValue":j[10]||(j[10]=B=>t(h).remarks=B),placeholder:t(a)("views.supplier.fields.remarks"),class:F({"border-danger":t(h).invalid("remarks")}),onChange:j[11]||(j[11]=B=>t(h).validate("remarks"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(h).errors.remarks},null,8,["messages"])])])]),"card-items-finance":f(()=>[c("div",wqe,[c("div",xqe,[l(t(K),{htmlFor:"payment_term_type"},{default:f(()=>[A(_(t(a)("views.supplier.fields.payment_term_type")),1)]),_:1}),l(t(Zt),{id:"payment_term_type",modelValue:t(h).payment_term_type,"onUpdate:modelValue":j[12]||(j[12]=B=>t(h).payment_term_type=B),class:F({"border-danger":t(h).invalid("payment_term_type")}),onChange:j[13]||(j[13]=B=>t(h).validate("payment_term_type"))},{default:f(()=>[c("option",Mqe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(p.value,B=>(L(),U("option",{key:B.code,value:B.code},_(t(a)(B.name)),9,Cqe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(h).errors.payment_term_type},null,8,["messages"])]),c("div",Sqe,[l(t(K),{htmlFor:"payment_term"},{default:f(()=>[A(_(t(a)("views.supplier.fields.payment_term")),1)]),_:1}),l(t(Oe),{id:"payment_term",modelValue:t(h).payment_term,"onUpdate:modelValue":j[14]||(j[14]=B=>t(h).payment_term=B),type:"number",placeholder:t(a)("views.supplier.fields.payment_term"),class:F({"border-danger":t(h).invalid("payment_term")}),onChange:j[15]||(j[15]=B=>t(h).validate("payment_term"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(h).errors.payment_term},null,8,["messages"])]),c("div",Iqe,[l(t(K),{htmlFor:"taxable_enterprise"},{default:f(()=>[A(_(t(a)("views.supplier.fields.taxable_enterprise")),1)]),_:1}),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{id:"taxable_enterprise",modelValue:t(h).taxable_enterprise,"onUpdate:modelValue":j[16]||(j[16]=B=>t(h).taxable_enterprise=B),type:"checkbox",class:F({"border-danger":t(h).invalid("taxable_enterprise")})},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(h).errors.taxable_enterprise},null,8,["messages"])]),c("div",Lqe,[l(t(K),{htmlFor:"tax_id"},{default:f(()=>[A(_(t(a)("views.supplier.fields.tax_id")),1)]),_:1}),l(t(Oe),{id:"tax_id",modelValue:t(h).tax_id,"onUpdate:modelValue":j[17]||(j[17]=B=>t(h).tax_id=B),type:"text",placeholder:t(a)("views.supplier.fields.tax_id"),class:F({"border-danger":t(h).invalid("tax_id")}),onChange:j[18]||(j[18]=B=>t(h).validate("tax_id"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(h).errors.tax_id},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",$qe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(h).validating||t(h).hasErrors},{default:f(()=>[t(h).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:M},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),Eqe={class:"p-5"},Tqe={class:"mt-3"},Pqe=c("span",{class:"text-danger"},"*",-1),Dqe={class:"mt-3"},Rqe=c("span",{class:"text-danger"},"*",-1),Oqe={class:"mt-3"},Vqe={class:"mt-3"},Uqe={class:"mt-3"},Fqe=c("span",{class:"text-danger"},"*",-1),jqe={value:""},Hqe=["value"],Nqe={class:"mt-3"},zqe={class:"p-5"},Bqe={class:"mt-3"},qqe={value:""},Wqe=["value"],Gqe={class:"mt-3"},Zqe={class:"mt-3"},Kqe={class:"mt-3"},Xqe={class:"flex gap-4"},Yqe=Ce({__name:"SupplierEdit",emits:["mode-state","loading-state","update-profile","show-alert-placeholder"],setup(n,{emit:e}){const{t:a}=tt(),s=Sa(),o=ct(),r=new TP,i=new aa,u=new Dt,h=zt(),{isUserLocationSelected:m}=Kee(h),p=r.useSupplierEditForm(s.params.ulid),b=e,x=O([{title:"views.supplier.field_groups.general",state:fe.Expanded,id:"general"},{title:"views.supplier.field_groups.finance",state:fe.Expanded,id:"finance"},{title:"",state:fe.Hidden,id:"button"}]),w=O(null),$=O(null),D=O(!1),V=async v=>{b("loading-state",!0);let T=await r.read(v);T.success&&T.data?p.setData({company_id:T.data.company.id,code:T.data.code,name:T.data.name,address:T.data.address,city:T.data.city,payment_term_type:T.data.payment_term_type,payment_term:T.data.payment_term,taxable_enterprise:T.data.taxable_enterprise,tax_id:T.data.tax_id,status:T.data.status,remarks:T.data.remarks}):o.push({name:"side-menu-supplier"}),b("loading-state",!1)},R=async()=>{D.value=!0;try{await Promise.all([(async()=>{const v=await i.getStatusDDL(!1);w.value=v})(),(async()=>{const v=await i.getPaymentTermTypesDDL();$.value=v})()])}catch(v){console.error("Error loading DDLs:",v)}finally{D.value=!1}},E=v=>{x.value[v].state===fe.Collapsed?x.value[v].state=fe.Expanded:x.value[v].state===fe.Expanded&&(x.value[v].state=fe.Collapsed)},P=v=>{let T=document.getElementById(v);T&&T.scrollIntoView({behavior:"smooth",block:"center"})},S=async()=>{p.hasErrors&&P(Object.keys(p.errors)[0]),b("loading-state",!0),await p.submit().then(()=>{g("hidden","",null),b("update-profile"),o.push({name:"side-menu-supplier"})}).catch(v=>{let T=ln(v);g("danger","",T)}).finally(()=>{b("loading-state",!1)})},C=async()=>{p.reset(),p.setErrors({}),await V(s.params.ulid)},M=()=>{p.forgetError("code"),p.code=="_AUTO_"?p.setData({code:""}):p.setData({code:"_AUTO_"})},g=(v,T,j)=>{b("show-alert-placeholder",{alertType:v,title:T,alertList:j})};return at(async()=>{if(!m.value){o.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}b("mode-state",xe.FORM_EDIT),await R(),await V(s.params.ulid)}),dt(p,ma.debounce(v=>{u.setLastEntity("SUPPLIER_EDIT",v.data())},500),{deep:!0}),(v,T)=>(L(),U("form",{id:"supplierForm",onSubmit:Rt(S,["prevent"])},[l(t(ba),{cards:x.value,"using-side-tab":!1,onHandleExpandCard:E},{"card-items-general":f(()=>[c("div",Eqe,[c("div",Tqe,[l(t(K),{htmlFor:"code"},{default:f(()=>[A(_(t(a)("views.supplier.fields.code"))+" ",1),Pqe]),_:1}),l(t(wa),{id:"code",modelValue:t(p).code,"onUpdate:modelValue":T[0]||(T[0]=j=>t(p).code=j),placeholder:t(a)("views.supplier.fields.code"),class:F({"border-danger":t(p).invalid("code")}),onSetAuto:M,onChange:T[1]||(T[1]=j=>t(p).validate("code"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(p).errors.code},null,8,["messages"])]),c("div",Dqe,[l(t(K),{htmlFor:"name"},{default:f(()=>[A(_(t(a)("views.supplier.fields.name"))+" ",1),Rqe]),_:1}),l(t(Oe),{id:"name",modelValue:t(p).name,"onUpdate:modelValue":T[2]||(T[2]=j=>t(p).name=j),type:"text",placeholder:t(a)("views.supplier.fields.name"),class:F({"border-danger":t(p).invalid("name")}),onChange:T[3]||(T[3]=j=>t(p).validate("name"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(p).errors.name},null,8,["messages"])]),c("div",Oqe,[l(t(K),{htmlFor:"address"},{default:f(()=>[A(_(t(a)("views.supplier.fields.address")),1)]),_:1}),l(t(la),{id:"address",modelValue:t(p).address,"onUpdate:modelValue":T[4]||(T[4]=j=>t(p).address=j),placeholder:t(a)("views.supplier.fields.address"),class:F({"border-danger":t(p).invalid("address")}),onChange:T[5]||(T[5]=j=>t(p).validate("address"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(p).errors.address},null,8,["messages"])]),c("div",Vqe,[l(t(K),{htmlFor:"city"},{default:f(()=>[A(_(t(a)("views.supplier.fields.city")),1)]),_:1}),l(t(Oe),{id:"city",modelValue:t(p).city,"onUpdate:modelValue":T[6]||(T[6]=j=>t(p).city=j),type:"text",placeholder:t(a)("views.supplier.fields.city"),class:F({"border-danger":t(p).invalid("city")}),onChange:T[7]||(T[7]=j=>t(p).validate("city"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(p).errors.city},null,8,["messages"])]),c("div",Uqe,[l(t(K),{htmlFor:"status"},{default:f(()=>[A(_(t(a)("views.supplier.fields.status"))+" ",1),Fqe]),_:1}),l(t(Zt),{id:"status",modelValue:t(p).status,"onUpdate:modelValue":T[8]||(T[8]=j=>t(p).status=j),class:F({"border-danger":t(p).invalid("status")}),onChange:T[9]||(T[9]=j=>t(p).validate("status"))},{default:f(()=>[c("option",jqe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(w.value,j=>(L(),U("option",{key:j.code,value:j.code},_(t(a)(j.name)),9,Hqe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(p).errors.status},null,8,["messages"])]),c("div",Nqe,[l(t(K),{htmlFor:"remarks"},{default:f(()=>[A(_(t(a)("views.supplier.fields.remarks")),1)]),_:1}),l(t(la),{id:"remarks",modelValue:t(p).remarks,"onUpdate:modelValue":T[10]||(T[10]=j=>t(p).remarks=j),placeholder:t(a)("views.supplier.fields.remarks"),class:F({"border-danger":t(p).invalid("remarks")}),onChange:T[11]||(T[11]=j=>t(p).validate("remarks"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(p).errors.remarks},null,8,["messages"])])])]),"card-items-finance":f(()=>[c("div",zqe,[c("div",Bqe,[l(t(K),{htmlFor:"payment_term_type"},{default:f(()=>[A(_(t(a)("views.supplier.fields.payment_term_type")),1)]),_:1}),l(t(Zt),{id:"payment_term_type",modelValue:t(p).payment_term_type,"onUpdate:modelValue":T[12]||(T[12]=j=>t(p).payment_term_type=j),class:F({"border-danger":t(p).invalid("payment_term_type")}),onChange:T[13]||(T[13]=j=>t(p).validate("payment_term_type"))},{default:f(()=>[c("option",qqe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe($.value,j=>(L(),U("option",{key:j.code,value:j.code},_(t(a)(j.name)),9,Wqe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(p).errors.payment_term_type},null,8,["messages"])]),c("div",Gqe,[l(t(K),{htmlFor:"payment_term"},{default:f(()=>[A(_(t(a)("views.supplier.fields.payment_term")),1)]),_:1}),l(t(Oe),{id:"payment_term",modelValue:t(p).payment_term,"onUpdate:modelValue":T[14]||(T[14]=j=>t(p).payment_term=j),type:"number",placeholder:t(a)("views.supplier.fields.payment_term"),class:F({"border-danger":t(p).invalid("payment_term")}),onChange:T[15]||(T[15]=j=>t(p).validate("payment_term"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(p).errors.payment_term},null,8,["messages"])]),c("div",Zqe,[l(t(K),{htmlFor:"taxable_enterprise"},{default:f(()=>[A(_(t(a)("views.supplier.fields.taxable_enterprise")),1)]),_:1}),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{id:"taxable_enterprise",modelValue:t(p).taxable_enterprise,"onUpdate:modelValue":T[16]||(T[16]=j=>t(p).taxable_enterprise=j),type:"checkbox",class:F({"border-danger":t(p).invalid("taxable_enterprise")})},null,8,["modelValue","class"])]),_:1}),l(t(_e),{messages:t(p).errors.taxable_enterprise},null,8,["messages"])]),c("div",Kqe,[l(t(K),{htmlFor:"tax_id"},{default:f(()=>[A(_(t(a)("views.supplier.fields.tax_id")),1)]),_:1}),l(t(Oe),{id:"tax_id",modelValue:t(p).tax_id,"onUpdate:modelValue":T[17]||(T[17]=j=>t(p).tax_id=j),type:"text",placeholder:t(a)("views.supplier.fields.tax_id"),class:F({"border-danger":t(p).invalid("tax_id")}),onChange:T[18]||(T[18]=j=>t(p).validate("tax_id"))},null,8,["modelValue","placeholder","class"]),l(t(_e),{messages:t(p).errors.tax_id},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",Xqe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(p).validating||t(p).hasErrors},{default:f(()=>[t(p).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:C},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),Qqe={class:"mt-8"},Jqe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},eWe={class:"ml-4 mr-4"},tWe={class:"font-medium"},aWe={class:"mt-1 text-slate-500"},nWe=Ce({__name:"CustomerGroupIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.customer_group.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[customerGroupNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-customer-group-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-customer-group-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.customer_group.actions.create";break;case xe.FORM_EDIT:h.value="views.customer_group.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.customer_group.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("CUSTOMER_GROUP_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("CUSTOMER_GROUP_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",Qqe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",Jqe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"customerGroupNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",eWe,[c("div",tWe,_(w.value),1),c("div",aWe,_($.value),1)])]),_:1})])}}});class gu{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");mt(this,"cacheService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn,this.cacheService=new Dt}useCustomerGroupCreateForm(){const e=je("api.post.customer_group.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",name:"",max_open_invoice:0,max_outstanding_invoice:0,max_invoice_age:0,payment_term_type:"PIA",payment_term:0,selling_point:0,selling_point_multiple:0,sell_at_cost:!1,price_markup_percent:0,price_markup_nominal:0,price_markdown_percent:0,price_markdown_nominal:0,rounding_type:1,rounding_digit:0,remarks:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.customer_group.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.customer_group.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.customer_group.read",{customer_group:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useCustomerGroupEditForm(e){const a=je("api.post.customer_group.edit",{customer_group:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:"",max_open_invoice:0,max_outstanding_invoice:0,max_invoice_age:0,payment_term_type:"PIA",payment_term:0,selling_point:0,selling_point_multiple:0,sell_at_cost:!1,price_markup_percent:0,price_markup_nominal:0,price_markdown_percent:0,price_markdown_nominal:0,rounding_type:1,rounding_digit:0,remarks:""})}async delete(e){const a={success:!1};try{const s=je("api.post.customer_group.delete",{customer_group:e},!1,this.ziggyRoute),o=await nt.post(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const sWe={class:"flex justify-center italic"},oWe={class:"flex justify-end gap-1"},rWe={class:"flex flex-row"},iWe={class:"ml-5 w-48 text-right pr-5 font-medium"},lWe={class:"flex-1"},cWe={class:"flex flex-row mt-1"},dWe={class:"ml-5 w-48 text-right pr-5 font-medium"},uWe={class:"flex-1"},pWe={class:"flex flex-row mt-1"},hWe={class:"ml-5 w-48 text-right pr-5 font-medium"},fWe={class:"flex-1"},mWe=c("div",{class:"w-full border-b my-3"},null,-1),vWe={class:"flex flex-row mt-1"},yWe={class:"ml-5 w-48 text-right pr-5 font-medium"},_We={class:"flex-1"},gWe={class:"flex flex-row mt-1"},kWe={class:"ml-5 w-48 text-right pr-5 font-medium"},bWe={class:"flex-1"},wWe={class:"flex flex-row mt-1"},xWe={class:"ml-5 w-48 text-right pr-5 font-medium"},MWe={class:"flex-1"},CWe={class:"flex flex-row mt-1"},SWe={class:"ml-5 w-48 text-right pr-5 font-medium"},IWe={class:"flex-1"},LWe={class:"flex flex-row mt-1"},$We={class:"ml-5 w-48 text-right pr-5 font-medium"},AWe={class:"flex-1"},EWe=c("div",{class:"w-full border-b my-3"},null,-1),TWe={class:"flex flex-row mt-1"},PWe={class:"ml-5 w-48 text-right pr-5 font-medium"},DWe={class:"flex-1"},RWe={key:0},OWe={key:1},VWe={class:"flex flex-row mt-1"},UWe={class:"ml-5 w-48 text-right pr-5 font-medium"},FWe={class:"flex-1"},jWe={class:"flex flex-row mt-1"},HWe={class:"ml-5 w-48 text-right pr-5 font-medium"},NWe={class:"flex-1"},zWe={class:"flex flex-row mt-1"},BWe={class:"ml-5 w-48 text-right pr-5 font-medium"},qWe={class:"flex-1"},WWe={class:"flex flex-row mt-1"},GWe={class:"ml-5 w-48 text-right pr-5 font-medium"},ZWe={class:"flex-1"},KWe={class:"flex flex-row mt-1"},XWe={class:"ml-5 w-48 text-right pr-5 font-medium"},YWe={class:"flex-1"},QWe={class:"flex flex-row mt-1"},JWe={class:"ml-5 w-48 text-right pr-5 font-medium"},eGe={class:"flex-1"},tGe=c("div",{class:"w-full border-b my-3"},null,-1),aGe={class:"flex flex-row mt-1"},nGe={class:"ml-5 w-48 text-right pr-5 font-medium"},sGe={class:"flex-1"},oGe={class:"flex flex-row mt-1"},rGe={class:"ml-5 w-48 text-right pr-5 font-medium"},iGe={class:"flex-1"},lGe={class:"p-5 text-center"},cGe={class:"mt-5 text-3xl"},dGe={class:"mt-2 text-slate-500"},uGe=c("br",null,null,-1),pGe={class:"px-5 pb-8 text-center"},hGe=Ce({__name:"CustomerGroupList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new gu,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,!0,1,10)});const w=async(C,M,g,v,T)=>{i("loading-state",!0);const B={with_trashed:!1,company_id:x.value.company.id,search:C,include_id:void 0,refresh:M,page:v,per_page:T};let oe=await o.readAnyPaginate(B);oe.success&&oe.data?p.value=oe.data:S("danger","",oe.errors),i("loading-state",!1)},$=async C=>{await w(C.search.text,!1,!0,C.pagination.page,C.pagination.per_page)},D=C=>{m.value===C?m.value=null:m.value=C},V=C=>{if(!p.value)return;let M=p.value.data[C].ulid;s.push({name:"side-menu-customer-group-edit",params:{ulid:M}})},R=C=>{if(!p.value)return;let M=p.value.data[C].ulid;u.value=M,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let C=await o.delete(u.value);C.success?(i("update-profile"),await w("",!0,!0,1,10),P(a("views.customer_group.alert.delete_customer_group.title"),a("views.customer_group.alert.delete_customer_group.content"))):S("danger","",C.errors),i("loading-state",!1)},P=(C,M)=>{i("show-notification",{title:C,content:M})},S=(C,M,g)=>{i("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return(C,M)=>(L(),ge(t(mn),{title:t(a)("views.customer_group.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.customer_group.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.customer_group.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",sWe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(g,v)=>(L(),U(ke,{key:g.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(g.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",oWe,[l(t(me),{variant:"outline-secondary",onClick:T=>D(v)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>V(v)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>R(v)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==v})},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",rWe,[c("div",iWe,_(t(a)("views.customer_group.fields.code")),1),c("div",lWe,_(g.code),1)]),c("div",cWe,[c("div",dWe,_(t(a)("views.customer_group.fields.name")),1),c("div",uWe,_(g.name),1)]),c("div",pWe,[c("div",hWe,_(t(a)("views.customer_group.fields.remarks")),1),c("div",fWe,_(g.remarks||"-"),1)]),mWe,c("div",vWe,[c("div",yWe,_(t(a)("views.customer_group.fields.max_open_invoice")),1),c("div",_We,_(g.max_open_invoice),1)]),c("div",gWe,[c("div",kWe,_(t(a)("views.customer_group.fields.max_outstanding_invoice")),1),c("div",bWe,_(g.max_outstanding_invoice),1)]),c("div",wWe,[c("div",xWe,_(t(a)("views.customer_group.fields.max_invoice_age")),1),c("div",MWe,_(g.max_invoice_age),1)]),c("div",CWe,[c("div",SWe,_(t(a)("views.customer_group.fields.payment_term_type")),1),c("div",IWe,_(g.payment_term_type),1)]),c("div",LWe,[c("div",$We,_(t(a)("views.customer_group.fields.payment_term")),1),c("div",AWe,_(g.payment_term),1)]),EWe,c("div",TWe,[c("div",PWe,_(t(a)("views.customer_group.fields.sell_at_cost")),1),c("div",DWe,[g.sell_at_cost?(L(),U("span",RWe,_(t(a)("components.dropdown.values.switch.on")),1)):(L(),U("span",OWe,_(t(a)("components.dropdown.values.switch.off")),1))])]),c("div",VWe,[c("div",UWe,_(t(a)("views.customer_group.fields.selling_point")),1),c("div",FWe,_(g.selling_point),1)]),c("div",jWe,[c("div",HWe,_(t(a)("views.customer_group.fields.selling_point_multiple")),1),c("div",NWe,_(g.selling_point_multiple),1)]),c("div",zWe,[c("div",BWe,_(t(a)("views.customer_group.fields.price_markup_percent")),1),c("div",qWe,_(g.price_markup_percent)+"%",1)]),c("div",WWe,[c("div",GWe,_(t(a)("views.customer_group.fields.price_markup_nominal")),1),c("div",ZWe,_(g.price_markup_nominal),1)]),c("div",KWe,[c("div",XWe,_(t(a)("views.customer_group.fields.price_markdown_percent")),1),c("div",YWe,_(g.price_markdown_percent)+"%",1)]),c("div",QWe,[c("div",JWe,_(t(a)("views.customer_group.fields.price_markdown_nominal")),1),c("div",eGe,_(g.price_markdown_nominal),1)]),tGe,c("div",aGe,[c("div",nGe,_(t(a)("views.customer_group.fields.rounding_type")),1),c("div",sGe,_(g.rounding_type),1)]),c("div",oGe,[c("div",rGe,_(t(a)("views.customer_group.fields.rounding_digit")),1),c("div",iGe,_(g.rounding_digit),1)])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:M[1]||(M[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",lGe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",cGe,_(t(a)("components.delete-modal.title")),1),c("div",dGe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),uGe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",pGe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:M[0]||(M[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),fGe={class:"p-5"},mGe={class:"pb-4"},vGe={class:"pb-4"},yGe={class:"pb-4"},_Ge={class:"p-5 grid grid-cols-1 md:grid-cols-2 gap-4"},gGe={class:"pb-4"},kGe={class:"pb-4"},bGe={class:"pb-4"},wGe={class:"pb-4"},xGe={value:""},MGe=["value"],CGe={class:"pb-4 col-span-1 md:col-span-2"},SGe={class:"p-5"},IGe={class:"pb-4 grid grid-cols-1 md:grid-cols-2 gap-4"},LGe={class:"pb-4"},$Ge={class:"pb-4 grid grid-cols-1 md:grid-cols-2 gap-4"},AGe={class:"p-5 grid grid-cols-1 md:grid-cols-2 gap-4"},EGe={class:"pb-4"},TGe={value:""},PGe=["value"],DGe={class:"pb-4"},RGe={class:"flex gap-4"},OGe=Ce({__name:"CustomerGroupCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new gu,i=new aa,u=new Dt,h=e,m=O([{title:"views.customer_group.field_groups.general_information",state:fe.Expanded},{title:"views.customer_group.field_groups.credit_limit",state:fe.Expanded},{title:"views.customer_group.field_groups.pricing_and_points",state:fe.Expanded},{title:"views.customer_group.field_groups.rounding_rules",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=O(null),b=O(null),x=O(null),w=r.useCustomerGroupCreateForm(),$=ee(()=>o.isUserLocationSelected),D=ee(()=>o.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_CREATE),await E(),R(),$.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),V()});const V=()=>{w.setData({company_id:D.value.company.id})},R=()=>{let T=u.getLastEntity("CUSTOMER_GROUP_CREATE");T&&w.setData(T)},E=async()=>{try{const[T,j,B]=await Promise.all([i.getStatusDDL(),i.getPaymentTermTypesDDL(),i.getRoundingTypesDDL()]);p.value=T,b.value=j,x.value=B}catch(T){console.error(T)}},P=T=>{m.value[T].state===fe.Collapsed?m.value[T].state=fe.Expanded:m.value[T].state===fe.Expanded&&(m.value[T].state=fe.Collapsed)},S=T=>{let j=document.getElementById(T);j&&j.scrollIntoView({behavior:"smooth",block:"center"})},C=async()=>{w.hasErrors&&S(Object.keys(w.errors)[0]),h("loading-state",!0),await w.submit().then(()=>{M(),h("update-profile"),s.push({name:"side-menu-customer-group-list"})}).catch(T=>{let j=convertErrorTypeToAlertListType(T);v("danger","",j)}).finally(()=>{h("loading-state",!1)})},M=()=>{w.reset(),w.setErrors({})},g=()=>{w.forgetError("code"),w.code=="_AUTO_"?w.setData({code:""}):w.setData({code:"_AUTO_"})},v=(T,j,B)=>{h("show-alertplaceholder",{alertType:T,title:j,alertList:B})};return dt(w,ma.debounce(T=>{u.setLastEntity("CUSTOMER_GROUP_CREATE",T.data()),w.hasErrors},500),{deep:!0}),(T,j)=>(L(),U("form",{id:"customerGroupForm",onSubmit:Rt(C,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:P},{"card-items-0":f(()=>[c("div",fGe,[c("div",mGe,[l(t(K),{class:F({"text-danger":t(w).invalid("code")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(w).code,"onUpdate:modelValue":j[0]||(j[0]=B=>t(w).code=B),class:F({"border-danger":t(w).invalid("code")}),placeholder:t(a)("views.customer_group.fields.code"),onSetAuto:g,onChange:j[1]||(j[1]=B=>t(w).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.code},null,8,["messages"])]),c("div",vGe,[l(t(K),{class:F({"text-danger":t(w).invalid("name")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).name,"onUpdate:modelValue":j[2]||(j[2]=B=>t(w).name=B),type:"text",class:F({"border-danger":t(w).invalid("name")}),placeholder:t(a)("views.customer_group.fields.name"),onChange:j[3]||(j[3]=B=>t(w).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.name},null,8,["messages"])]),c("div",yGe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.customer_group.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(w).remarks,"onUpdate:modelValue":j[4]||(j[4]=B=>t(w).remarks=B),placeholder:t(a)("views.customer_group.fields.remarks"),onChange:j[5]||(j[5]=B=>t(w).validate("remarks"))},null,8,["modelValue","placeholder"]),l(t(_e),{messages:t(w).errors.remarks},null,8,["messages"])])])]),"card-items-1":f(()=>[c("div",_Ge,[c("div",gGe,[l(t(K),{class:F({"text-danger":t(w).invalid("max_open_invoice")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.max_open_invoice")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).max_open_invoice,"onUpdate:modelValue":j[6]||(j[6]=B=>t(w).max_open_invoice=B),type:"number",class:F({"border-danger":t(w).invalid("max_open_invoice")}),onChange:j[7]||(j[7]=B=>t(w).validate("max_open_invoice"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.max_open_invoice},null,8,["messages"])]),c("div",kGe,[l(t(K),{class:F({"text-danger":t(w).invalid("max_outstanding_invoice")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.max_outstanding_invoice")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).max_outstanding_invoice,"onUpdate:modelValue":j[8]||(j[8]=B=>t(w).max_outstanding_invoice=B),type:"number",class:F({"border-danger":t(w).invalid("max_outstanding_invoice")}),onChange:j[9]||(j[9]=B=>t(w).validate("max_outstanding_invoice"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.max_outstanding_invoice},null,8,["messages"])]),c("div",bGe,[l(t(K),{class:F({"text-danger":t(w).invalid("max_invoice_age")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.max_invoice_age")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).max_invoice_age,"onUpdate:modelValue":j[10]||(j[10]=B=>t(w).max_invoice_age=B),type:"number",class:F({"border-danger":t(w).invalid("max_invoice_age")}),onChange:j[11]||(j[11]=B=>t(w).validate("max_invoice_age"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.max_invoice_age},null,8,["messages"])]),c("div",wGe,[l(t(K),{class:F({"text-danger":t(w).invalid("payment_term_type")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.payment_term_type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(w).payment_term_type,"onUpdate:modelValue":j[12]||(j[12]=B=>t(w).payment_term_type=B),class:F({"border-danger":t(w).invalid("payment_term_type")}),onChange:j[13]||(j[13]=B=>t(w).validate("payment_term_type"))},{default:f(()=>[c("option",xGe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(b.value,B=>(L(),U("option",{key:B.code,value:B.code},_(t(a)(B.name)),9,MGe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.payment_term_type},null,8,["messages"])]),c("div",CGe,[l(t(K),{class:F({"text-danger":t(w).invalid("payment_term")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.payment_term")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).payment_term,"onUpdate:modelValue":j[14]||(j[14]=B=>t(w).payment_term=B),type:"number",class:F({"border-danger":t(w).invalid("payment_term")}),onChange:j[15]||(j[15]=B=>t(w).validate("payment_term"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.payment_term},null,8,["messages"])])])]),"card-items-2":f(()=>[c("div",SGe,[c("div",IGe,[c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("selling_point")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.selling_point")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).selling_point,"onUpdate:modelValue":j[16]||(j[16]=B=>t(w).selling_point=B),type:"number",class:F({"border-danger":t(w).invalid("selling_point")}),onChange:j[17]||(j[17]=B=>t(w).validate("selling_point"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.selling_point},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("selling_point_multiple")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.selling_point_multiple")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).selling_point_multiple,"onUpdate:modelValue":j[18]||(j[18]=B=>t(w).selling_point_multiple=B),type:"number",class:F({"border-danger":t(w).invalid("selling_point_multiple")}),onChange:j[19]||(j[19]=B=>t(w).validate("selling_point_multiple"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.selling_point_multiple},null,8,["messages"])])]),c("div",LGe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.customer_group.fields.sell_at_cost")),1)]),_:1}),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(w).sell_at_cost,"onUpdate:modelValue":j[20]||(j[20]=B=>t(w).sell_at_cost=B),type:"checkbox"},null,8,["modelValue"])]),_:1})]),c("div",$Ge,[c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("price_markup_percent")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.price_markup_percent")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).price_markup_percent,"onUpdate:modelValue":j[21]||(j[21]=B=>t(w).price_markup_percent=B),type:"number",class:F({"border-danger":t(w).invalid("price_markup_percent")}),onChange:j[22]||(j[22]=B=>t(w).validate("price_markup_percent"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.price_markup_percent},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("price_markup_nominal")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.price_markup_nominal")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).price_markup_nominal,"onUpdate:modelValue":j[23]||(j[23]=B=>t(w).price_markup_nominal=B),type:"number",class:F({"border-danger":t(w).invalid("price_markup_nominal")}),onChange:j[24]||(j[24]=B=>t(w).validate("price_markup_nominal"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.price_markup_nominal},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("price_markdown_percent")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.price_markdown_percent")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).price_markdown_percent,"onUpdate:modelValue":j[25]||(j[25]=B=>t(w).price_markdown_percent=B),type:"number",class:F({"border-danger":t(w).invalid("price_markdown_percent")}),onChange:j[26]||(j[26]=B=>t(w).validate("price_markdown_percent"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.price_markdown_percent},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("price_markdown_nominal")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.price_markdown_nominal")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).price_markdown_nominal,"onUpdate:modelValue":j[27]||(j[27]=B=>t(w).price_markdown_nominal=B),type:"number",class:F({"border-danger":t(w).invalid("price_markdown_nominal")}),onChange:j[28]||(j[28]=B=>t(w).validate("price_markdown_nominal"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.price_markdown_nominal},null,8,["messages"])])])])]),"card-items-3":f(()=>[c("div",AGe,[c("div",EGe,[l(t(K),{class:F({"text-danger":t(w).invalid("rounding_type")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.rounding_type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(w).rounding_type,"onUpdate:modelValue":j[29]||(j[29]=B=>t(w).rounding_type=B),class:F({"border-danger":t(w).invalid("rounding_type")}),onChange:j[30]||(j[30]=B=>t(w).validate("rounding_type"))},{default:f(()=>[c("option",TGe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(x.value,B=>(L(),U("option",{key:B.code,value:B.code},_(t(a)(B.name)),9,PGe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.rounding_type},null,8,["messages"])]),c("div",DGe,[l(t(K),{class:F({"text-danger":t(w).invalid("rounding_digit")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.rounding_digit")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).rounding_digit,"onUpdate:modelValue":j[31]||(j[31]=B=>t(w).rounding_digit=B),type:"number",class:F({"border-danger":t(w).invalid("rounding_digit")}),onChange:j[32]||(j[32]=B=>t(w).validate("rounding_digit"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.rounding_digit},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",RGe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(w).validating||t(w).hasErrors},{default:f(()=>[t(w).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:M},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),VGe={class:"p-5"},UGe={class:"pb-4"},FGe={class:"pb-4"},jGe={class:"pb-4"},HGe={class:"p-5 grid grid-cols-1 md:grid-cols-2 gap-4"},NGe={value:""},zGe=["value"],BGe={class:"col-span-1 md:col-span-2"},qGe={class:"p-5"},WGe={class:"pb-4"},GGe={class:"grid grid-cols-1 md:grid-cols-2 gap-4"},ZGe={class:"p-5 grid grid-cols-1 md:grid-cols-2 gap-4"},KGe={value:""},XGe=["value"],YGe={class:"flex gap-4"},QGe=Ce({__name:"CustomerGroupEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=Sa(),o=ct(),r=new gu,i=new aa,u=new Dt,h=e,m=O([{title:"views.customer_group.field_groups.general_information",state:fe.Expanded},{title:"views.customer_group.field_groups.credit_limit",state:fe.Expanded},{title:"views.customer_group.field_groups.pricing_and_points",state:fe.Expanded},{title:"views.customer_group.field_groups.rounding_rules",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=O(null),b=O(null),x=O(null),w=r.useCustomerGroupEditForm(s.params.ulid);at(async()=>{h("mode-state",xe.FORM_EDIT),await Promise.all([D(),$(s.params.ulid)])});const $=async M=>{h("loading-state",!0);const g=await r.read(M);g&&g.data&&w.setData({company_id:g.data.company.id,code:g.data.code,name:g.data.name,remarks:g.data.remarks,max_open_invoice:g.data.max_open_invoice,max_outstanding_invoice:g.data.max_outstanding_invoice,max_invoice_age:g.data.max_invoice_age,payment_term_type:g.data.payment_term_type,payment_term:g.data.payment_term,selling_point:g.data.selling_point,selling_point_multiple:g.data.selling_point_multiple,sell_at_cost:g.data.sell_at_cost,price_markup_percent:g.data.price_markup_percent,price_markup_nominal:g.data.price_markup_nominal,price_markdown_percent:g.data.price_markdown_percent,price_markdown_nominal:g.data.price_markdown_nominal,rounding_type:g.data.rounding_type,rounding_digit:g.data.rounding_digit}),h("loading-state",!1)},D=async()=>{const[M,g,v]=await Promise.all([i.getStatusDDL(),i.getPaymentTermTypesDDL(),i.getRoundingTypesDDL()]);p.value=M,b.value=g,x.value=v},V=M=>{m.value[M].state===fe.Collapsed?m.value[M].state=fe.Expanded:m.value[M].state===fe.Expanded&&(m.value[M].state=fe.Collapsed)},R=M=>{let g=document.getElementById(M);g&&g.scrollIntoView({behavior:"smooth",block:"center"})},E=async()=>{w.hasErrors&&R(Object.keys(w.errors)[0]),h("loading-state",!0),await w.submit().then(()=>{h("update-profile"),o.push({name:"side-menu-customer-group-list"})}).catch(M=>{const g=ln(M);C("danger","",g)}).finally(()=>{h("loading-state",!1)})},P=async()=>{w.reset(),w.setErrors({}),await $(s.params.ulid)},S=()=>{w.forgetError("code"),w.code=="_AUTO_"?w.setData({code:""}):w.setData({code:"_AUTO_"})},C=(M,g,v)=>{h("show-alertplaceholder",{alertType:M,title:g,alertList:v})};return dt(w,ma.debounce(M=>{u.setLastEntity("CUSTOMER_GROUP_EDIT",M.data())},500),{deep:!0}),(M,g)=>(L(),U("form",{id:"customerGroupForm",onSubmit:Rt(E,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:V},{"card-items-0":f(()=>[c("div",VGe,[c("div",UGe,[l(t(K),{class:F({"text-danger":t(w).invalid("code")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(w).code,"onUpdate:modelValue":g[0]||(g[0]=v=>t(w).code=v),class:F({"border-danger":t(w).invalid("code")}),placeholder:t(a)("views.customer_group.fields.code"),onSetAuto:S,onChange:g[1]||(g[1]=v=>t(w).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.code},null,8,["messages"])]),c("div",FGe,[l(t(K),{class:F({"text-danger":t(w).invalid("name")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).name,"onUpdate:modelValue":g[2]||(g[2]=v=>t(w).name=v),type:"text",class:F({"border-danger":t(w).invalid("name")}),placeholder:t(a)("views.customer_group.fields.name"),onChange:g[3]||(g[3]=v=>t(w).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.name},null,8,["messages"])]),c("div",jGe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.customer_group.fields.remarks")),1)]),_:1}),l(t(la),{modelValue:t(w).remarks,"onUpdate:modelValue":g[4]||(g[4]=v=>t(w).remarks=v),placeholder:t(a)("views.customer_group.fields.remarks"),onChange:g[5]||(g[5]=v=>t(w).validate("remarks"))},null,8,["modelValue","placeholder"]),l(t(_e),{messages:t(w).errors.remarks},null,8,["messages"])])])]),"card-items-1":f(()=>[c("div",HGe,[c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("max_open_invoice")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.max_open_invoice")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).max_open_invoice,"onUpdate:modelValue":g[6]||(g[6]=v=>t(w).max_open_invoice=v),type:"number",onChange:g[7]||(g[7]=v=>t(w).validate("max_open_invoice"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.max_open_invoice},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("max_outstanding_invoice")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.max_outstanding_invoice")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).max_outstanding_invoice,"onUpdate:modelValue":g[8]||(g[8]=v=>t(w).max_outstanding_invoice=v),type:"number",onChange:g[9]||(g[9]=v=>t(w).validate("max_outstanding_invoice"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.max_outstanding_invoice},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("max_invoice_age")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.max_invoice_age")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).max_invoice_age,"onUpdate:modelValue":g[10]||(g[10]=v=>t(w).max_invoice_age=v),type:"number",onChange:g[11]||(g[11]=v=>t(w).validate("max_invoice_age"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.max_invoice_age},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("payment_term_type")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.payment_term_type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(w).payment_term_type,"onUpdate:modelValue":g[12]||(g[12]=v=>t(w).payment_term_type=v),onChange:g[13]||(g[13]=v=>t(w).validate("payment_term_type"))},{default:f(()=>[c("option",NGe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(b.value,v=>(L(),U("option",{key:v.code,value:v.code},_(t(a)(v.name)),9,zGe))),128))]),_:1},8,["modelValue"]),l(t(_e),{messages:t(w).errors.payment_term_type},null,8,["messages"])]),c("div",BGe,[l(t(K),{class:F({"text-danger":t(w).invalid("payment_term")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.payment_term")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).payment_term,"onUpdate:modelValue":g[14]||(g[14]=v=>t(w).payment_term=v),type:"number",onChange:g[15]||(g[15]=v=>t(w).validate("payment_term"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.payment_term},null,8,["messages"])])])]),"card-items-2":f(()=>[c("div",qGe,[c("div",WGe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.customer_group.fields.sell_at_cost")),1)]),_:1}),l(t(wt),{class:"mt-2"},{default:f(()=>[l(t(wt).Input,{modelValue:t(w).sell_at_cost,"onUpdate:modelValue":g[16]||(g[16]=v=>t(w).sell_at_cost=v),type:"checkbox"},null,8,["modelValue"])]),_:1})]),c("div",GGe,[c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("price_markup_percent")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.price_markup_percent")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).price_markup_percent,"onUpdate:modelValue":g[17]||(g[17]=v=>t(w).price_markup_percent=v),type:"number",onChange:g[18]||(g[18]=v=>t(w).validate("price_markup_percent"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.price_markup_percent},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("price_markup_nominal")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.price_markup_nominal")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).price_markup_nominal,"onUpdate:modelValue":g[19]||(g[19]=v=>t(w).price_markup_nominal=v),type:"number",onChange:g[20]||(g[20]=v=>t(w).validate("price_markup_nominal"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.price_markup_nominal},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("price_markdown_percent")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.price_markdown_percent")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).price_markdown_percent,"onUpdate:modelValue":g[21]||(g[21]=v=>t(w).price_markdown_percent=v),type:"number",onChange:g[22]||(g[22]=v=>t(w).validate("price_markdown_percent"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.price_markdown_percent},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("price_markdown_nominal")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.price_markdown_nominal")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).price_markdown_nominal,"onUpdate:modelValue":g[23]||(g[23]=v=>t(w).price_markdown_nominal=v),type:"number",onChange:g[24]||(g[24]=v=>t(w).validate("price_markdown_nominal"))},null,8,["modelValue"]),l(t(_e),{messages:t(w).errors.price_markdown_nominal},null,8,["messages"])])])])]),"card-items-3":f(()=>[c("div",ZGe,[c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("rounding_type")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.rounding_type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(w).rounding_type,"onUpdate:modelValue":g[25]||(g[25]=v=>t(w).rounding_type=v),onChange:g[26]||(g[26]=v=>t(w).validate("rounding_type"))},{default:f(()=>[c("option",KGe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(x.value,v=>(L(),U("option",{key:v.code,value:v.code},_(t(a)(v.name)),9,XGe))),128))]),_:1},8,["modelValue"]),l(t(_e),{messages:t(w).errors.rounding_type},null,8,["messages"])]),c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid("rounding_digit")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.rounding_digit")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(w).rounding_digit,"onUpdate:modelValue":g[27]||(g[27]=v=>t(w).rounding_digit=v),type:"number",class:F({"border-danger":t(w).invalid("rounding_digit")}),onChange:g[28]||(g[28]=v=>t(w).validate("rounding_digit"))},null,8,["modelValue","class"]),l(t(_e),{messages:t(w).errors.rounding_digit},null,8,["messages"])])])]),"card-items-button":f(()=>[c("div",YGe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(w).validating||t(w).hasErrors},{default:f(()=>[t(w).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:P},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),JGe={class:"mt-8"},eZe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},tZe={class:"ml-4 mr-4"},aZe={class:"font-medium"},nZe={class:"mt-1 text-slate-500"},sZe=Ce({__name:"CustomerIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.customer.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[customerNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-customer-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-customer-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.customer.actions.create";break;case xe.FORM_EDIT:h.value="views.customer.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.customer.page_title";break}},P=async()=>{let v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("CUSTOMER_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("CUSTOMER_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",JGe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",eZe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"customerNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",tZe,[c("div",aZe,_(w.value),1),c("div",nZe,_($.value),1)])]),_:1})])}}});class PP{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useCustomerCreateForm(){const e=je("api.post.db.customer.customer.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",group_id:"",code:"_AUTO_",name:"",zone:"",max_open_invoice:0,max_outstanding_invoice:0,max_invoice_age:0,payment_term_type:"",payment_term:0,is_member:!1,taxable_enterprise:!1,tax_id:"",status:"",remarks:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed?1:0,s.company_id=e.company_id,s.search=e.search?e.search:"",e.status!==void 0&&e.status!==null&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.db.customer.customer.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),e.company_id&&(s.company_id=e.company_id),e.search&&(s.search=e.search),e.status!==void 0&&e.status!==null&&(s.status=e.status),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.db.customer.customer.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.db.customer.customer.read",{customer:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useCustomerEditForm(e){const a=je("api.post.db.customer.customer.edit",e,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",group_id:"",code:"_AUTO_",name:"",zone:"",max_open_invoice:0,max_outstanding_invoice:0,max_invoice_age:0,payment_term_type:"",payment_term:0,is_member:!1,taxable_enterprise:!1,tax_id:"",status:"",remarks:""})}async delete(e){const a={success:!1};try{const s=je("api.post.db.customer.customer.delete",{customer:e},!1,this.ziggyRoute),o=await nt.post(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const oZe={class:"flex justify-center italic"},rZe={class:"flex justify-end gap-1"},iZe={class:"grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-4"},lZe={class:"flex flex-row mt-1"},cZe={class:"w-48 text-left md:text-right pr-5 font-medium"},dZe={class:"flex-1"},uZe={class:"flex flex-row mt-1"},pZe={class:"w-48 text-left md:text-right pr-5 font-medium"},hZe={class:"flex-1"},fZe={class:"flex flex-row mt-1"},mZe={class:"w-48 text-left md:text-right pr-5 font-medium"},vZe={class:"flex-1"},yZe={class:"flex flex-row mt-1"},_Ze={class:"w-48 text-left md:text-right pr-5 font-medium"},gZe={class:"flex-1"},kZe={class:"flex flex-row mt-1"},bZe={class:"w-48 text-left md:text-right pr-5 font-medium"},wZe={class:"flex-1"},xZe={class:"flex flex-row mt-1"},MZe={class:"w-48 text-left md:text-right pr-5 font-medium"},CZe={class:"flex-1"},SZe={class:"flex flex-row mt-1"},IZe={class:"w-48 text-left md:text-right pr-5 font-medium"},LZe={class:"flex-1"},$Ze={key:0},AZe={key:1},EZe={class:"flex flex-row mt-1"},TZe={class:"w-48 text-left md:text-right pr-5 font-medium"},PZe={class:"flex-1"},DZe={class:"flex flex-row mt-1 md:col-span-2"},RZe={class:"w-48 text-left md:text-right pr-5 font-medium"},OZe={class:"flex-1"},VZe={class:"p-5 text-center"},UZe={class:"mt-5 text-3xl"},FZe={class:"mt-2 text-slate-500"},jZe=c("br",null,null,-1),HZe={class:"px-5 pb-8 text-center"},NZe=Ce({__name:"CustomerList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new PP,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(C,M,g,v)=>{i("loading-state",!0);const j={with_trashed:!1,company_id:x.value.company.id,search:C,status:null,include_id:void 0,refresh:M,page:g,per_page:v},B=await o.readAnyPaginate(j);B.success&&B.data?p.value=B.data:S("danger","",B.errors),i("loading-state",!1)},$=async C=>{await w(C.search.text,!1,C.pagination.page,C.pagination.per_page)},D=C=>{m.value===C?m.value=null:m.value=C},V=C=>{if(!p.value)return;let M=p.value.data[C].ulid;s.push({name:"side-menu-customer-edit",params:{ulid:M}})},R=C=>{if(!p.value)return;let M=p.value.data[C].ulid;u.value=M,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);let C=await o.delete(u.value);C.success?(i("update-profile"),await w("",!0,1,10),P(a("views.customer.alert.delete.title"),a("views.customer.alert.delete.message"))):S("danger","",C.errors),i("loading-state",!1)},P=(C,M)=>{i("show-notification",{title:C,content:M})},S=(C,M,g)=>{i("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return(C,M)=>(L(),ge(t(mn),{title:t(a)("views.customer.table.title"),"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.customer.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.customer.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.customer.table.cols.group")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.customer.table.cols.zone")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length==0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",oZe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(g,v)=>(L(),U(ke,{key:g.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[A(_(g.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.group?g.group.name:"-"),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[A(_(g.zone||"-"),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",rZe,[l(t(me),{variant:"outline-secondary",onClick:T=>D(v)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>V(v)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>R(v)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==v})},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",iZe,[c("div",lZe,[c("div",cZe,_(t(a)("views.customer.fields.code")),1),c("div",dZe,_(g.code),1)]),c("div",uZe,[c("div",pZe,_(t(a)("views.customer.fields.name")),1),c("div",hZe,_(g.name),1)]),c("div",fZe,[c("div",mZe,_(t(a)("views.customer.fields.group")),1),c("div",vZe,_(g.group?g.group.name:"-"),1)]),c("div",yZe,[c("div",_Ze,_(t(a)("views.customer.fields.zone")),1),c("div",gZe,_(g.zone||"-"),1)]),c("div",kZe,[c("div",bZe,_(t(a)("views.customer.fields.zone")),1),c("div",wZe,_(g.zone||"-"),1)]),c("div",xZe,[c("div",MZe,_(t(a)("views.customer.fields.zone")),1),c("div",CZe,_(g.zone||"-"),1)]),c("div",SZe,[c("div",IZe,_(t(a)("views.customer.fields.taxable_enterprise")),1),c("div",LZe,[g.taxable_enterprise?(L(),U("span",$Ze,_(t(a)("components.dropdown.values.switch.on")),1)):(L(),U("span",AZe,_(t(a)("components.dropdown.values.switch.off")),1))])]),c("div",EZe,[c("div",TZe,_(t(a)("views.customer.fields.tax_id")),1),c("div",PZe,_(g.tax_id||"-"),1)]),c("div",DZe,[c("div",RZe,_(t(a)("views.customer.fields.remarks")),1),c("div",OZe,_(g.remarks||"-"),1)])])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1}),l(t($t),{open:h.value,onClose:M[1]||(M[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",VZe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",UZe,_(t(a)("components.delete-modal.title")),1),c("div",FZe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),jZe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",HZe,[l(t(me),{type:"button",variant:"outline-secondary",class:"w-24 mr-1",onClick:M[0]||(M[0]=()=>{h.value=!1})},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])]),_:1},8,["title","pagination"]))}}),zZe={class:"p-5"},BZe={class:"grid grid-cols-1 md:grid-cols-2 gap-x-4"},qZe={class:"pb-4"},WZe={class:"pb-4"},GZe={class:"pb-4"},ZZe={class:"pb-4"},KZe={class:"pb-4"},XZe={class:"pb-4"},YZe={value:"0",disabled:""},QZe=["value"],JZe={class:"p-5"},eKe={class:"grid grid-cols-1 md:grid-cols-2 gap-x-4"},tKe={class:"pb-4"},aKe={class:"pb-4"},nKe={class:"pb-4"},sKe={class:"pb-4"},oKe={value:"0",disabled:""},rKe=["value"],iKe={class:"pb-4"},lKe={class:"p-5"},cKe={class:"grid grid-cols-1 md:grid-cols-2 gap-x-4"},dKe={class:"pb-4"},uKe={class:"pb-4"},pKe={class:"pb-4"},hKe={class:"flex gap-4"},fKe=Ce({__name:"CustomerCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new PP,i=new gu,u=new Dt,h=new aa,m=e,p=O([{title:"views.customer.field_groups.general_information",state:fe.Expanded},{title:"views.customer.field_groups.credit_limit",state:fe.Expanded},{title:"views.customer.field_groups.tax_information",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),b=O(null),x=O(""),w=ee(()=>(b.value??[]).map(de=>({value:de.code,label:de.name}))),$=O(null),D=O(null),V=O(!1),R=r.useCustomerCreateForm(),E=ee(()=>o.isUserLocationSelected),P=ee(()=>o.selectedUserLocation);at(async()=>{m("mode-state",xe.FORM_CREATE),g(),C(),E.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),S()});const S=()=>{R.setData({company_id:P.value.company.id})},C=()=>{let de=u.getLastEntity("CUSTOMER_CREATE");de&&R.setData(de)},M=async(de="")=>{const J=await i.readAnyGet({with_trashed:!1,company_id:P.value.company.id,search:de,include_id:void 0,refresh:!1,limit:10});if(J.success&&J.data){const G=J.data;b.value=G.data.map(ce=>({code:ce.id,name:ce.name}))}},g=async()=>{V.value=!0;try{await Promise.all([(async()=>{const de=await h.getStatusDDL();D.value=de})(),(async()=>{const de=await h.getPaymentTermTypesDDL();$.value=de})(),M()])}catch(de){console.error("Error loading DDLs:",de)}finally{V.value=!1}},v=()=>{R.setData({group_id:""}),M(""),R.forgetError("group_id"),R.validate("group_id")},T=de=>{p.value[de].state===fe.Collapsed?p.value[de].state=fe.Expanded:p.value[de].state===fe.Expanded&&(p.value[de].state=fe.Collapsed)},j=de=>{let J=document.getElementById(de);J&&J.scrollIntoView({behavior:"smooth",block:"center"})},B=async()=>{R.hasErrors&&j(Object.keys(R.errors)[0]),m("loading-state",!0),await R.submit().then(()=>{oe(),m("update-profile"),s.push({name:"side-menu-customer-list"})}).catch(de=>{const J=Le(de);$e("danger","",J)}).finally(()=>{m("loading-state",!1)})},oe=()=>{R.reset(),R.setErrors({})},be=()=>{R.forgetError("code"),R.code=="_AUTO_"?R.setData({code:""}):R.setData({code:"_AUTO_"})},$e=(de,J,G)=>{m("show-alertplaceholder",{alertType:de,title:J,alertList:G})},Le=de=>{const J={},G=de,ce=ot(de)?de.response:G==null?void 0:G.response;if(ce&&ce.data){const Ee=ce.data;if(Ee.errors&&typeof Ee.errors=="object"){for(const He of Object.keys(Ee.errors)){const Ke=Ee.errors[He];Array.isArray(Ke)?J[He]=Ke:Ke!=null&&(J[He]=[String(Ke)])}return J}if(Ee.message)return J.error=[String(Ee.message)],J}return de instanceof Error&&de.message?J.error=[de.message]:J.error=["Unknown error"],J};return dt(R,ma.debounce(de=>{u.setLastEntity("CUSTOMER_CREATE",de.data())},500),{deep:!0}),(de,J)=>(L(),U("form",{id:"customerForm",onSubmit:Rt(B,["prevent"])},[l(t(ba),{cards:p.value,"using-side-tab":!1,onHandleExpandCard:T},{"card-items-0":f(()=>[c("div",zZe,[c("div",BZe,[c("div",qZe,[l(t(K),{class:F({"text-danger":t(R).invalid("code")})},{default:f(()=>[A(_(t(a)("views.customer.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(R).code,"onUpdate:modelValue":J[0]||(J[0]=G=>t(R).code=G),class:F({"border-danger":t(R).invalid("code")}),placeholder:t(a)("views.customer.fields.code"),onSetAuto:be,onChange:J[1]||(J[1]=G=>t(R).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.code},null,8,["messages"])]),c("div",WZe,[l(t(K),{class:F({"text-danger":t(R).invalid("name")})},{default:f(()=>[A(_(t(a)("views.customer.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(R).name,"onUpdate:modelValue":J[2]||(J[2]=G=>t(R).name=G),type:"text",class:F({"border-danger":t(R).invalid("name")}),placeholder:t(a)("views.customer.fields.name"),onChange:J[3]||(J[3]=G=>t(R).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.name},null,8,["messages"])]),c("div",GZe,[l(t(K),{class:F({"text-danger":t(R).invalid("group_id")})},{default:f(()=>[A(_(t(a)("views.customer.fields.group")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(R).group_id,"onUpdate:modelValue":J[4]||(J[4]=G=>t(R).group_id=G),search:x.value,"onUpdate:search":J[5]||(J[5]=G=>x.value=G),options:w.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(R).invalid("group_id")}),onChange:J[6]||(J[6]=G=>t(R).validate("group_id")),onSearch:M,onClear:v},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(R).errors.group_id},null,8,["messages"])]),c("div",ZZe,[l(t(K),{class:F({"text-danger":t(R).invalid("is_member")})},{default:f(()=>[A(_(t(a)("views.customer.fields.is_member")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(R).is_member,"onUpdate:modelValue":J[7]||(J[7]=G=>t(R).is_member=G),type:"checkbox",class:F({"border-danger":t(R).invalid("is_member")}),placeholder:t(a)("views.customer.fields.is_member"),onChange:J[8]||(J[8]=G=>t(R).validate("is_member"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(R).errors.is_member},null,8,["messages"])]),c("div",KZe,[l(t(K),{class:F({"text-danger":t(R).invalid("zone")})},{default:f(()=>[A(_(t(a)("views.customer.fields.zone")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(R).zone,"onUpdate:modelValue":J[9]||(J[9]=G=>t(R).zone=G),type:"text",class:F({"border-danger":t(R).invalid("zone")}),placeholder:t(a)("views.customer.fields.zone"),onChange:J[10]||(J[10]=G=>t(R).validate("zone"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.zone},null,8,["messages"])]),c("div",XZe,[l(t(K),{class:F({"text-danger":t(R).invalid("status")})},{default:f(()=>[A(_(t(a)("views.customer.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(R).status,"onUpdate:modelValue":J[11]||(J[11]=G=>t(R).status=G),class:F({"border-danger":t(R).invalid("status")}),onChange:J[12]||(J[12]=G=>t(R).validate("status"))},{default:f(()=>[c("option",YZe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(D.value,G=>(L(),U("option",{key:G.code,value:G.code},_(t(a)(G.name)),9,QZe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(R).errors.status},null,8,["messages"])])])])]),"card-items-1":f(()=>[c("div",JZe,[c("div",eKe,[c("div",tKe,[l(t(K),{class:F({"text-danger":t(R).invalid("max_open_invoice")})},{default:f(()=>[A(_(t(a)("views.customer.fields.max_open_invoice")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(R).max_open_invoice,"onUpdate:modelValue":J[13]||(J[13]=G=>t(R).max_open_invoice=G),type:"number",class:F({"border-danger":t(R).invalid("max_open_invoice")}),placeholder:t(a)("views.customer.fields.max_open_invoice"),onChange:J[14]||(J[14]=G=>t(R).validate("max_open_invoice"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.max_open_invoice},null,8,["messages"])]),c("div",aKe,[l(t(K),{class:F({"text-danger":t(R).invalid("max_outstanding_invoice")})},{default:f(()=>[A(_(t(a)("views.customer.fields.max_outstanding_invoice")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(R).max_outstanding_invoice,"onUpdate:modelValue":J[15]||(J[15]=G=>t(R).max_outstanding_invoice=G),type:"number",class:F({"border-danger":t(R).invalid("max_outstanding_invoice")}),placeholder:t(a)("views.customer.fields.max_outstanding_invoice"),onChange:J[16]||(J[16]=G=>t(R).validate("max_outstanding_invoice"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.max_outstanding_invoice},null,8,["messages"])]),c("div",nKe,[l(t(K),{class:F({"text-danger":t(R).invalid("max_invoice_age")})},{default:f(()=>[A(_(t(a)("views.customer.fields.max_invoice_age")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(R).max_invoice_age,"onUpdate:modelValue":J[17]||(J[17]=G=>t(R).max_invoice_age=G),type:"number",class:F({"border-danger":t(R).invalid("max_invoice_age")}),placeholder:t(a)("views.customer.fields.max_invoice_age"),onChange:J[18]||(J[18]=G=>t(R).validate("max_invoice_age"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.max_invoice_age},null,8,["messages"])]),c("div",sKe,[l(t(K),{class:F({"text-danger":t(R).invalid("payment_term_type")})},{default:f(()=>[A(_(t(a)("views.customer.fields.payment_term_type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(R).payment_term_type,"onUpdate:modelValue":J[19]||(J[19]=G=>t(R).payment_term_type=G),class:F({"border-danger":t(R).invalid("payment_term_type")}),placeholder:t(a)("views.customer.fields.payment_term_type"),onChange:J[20]||(J[20]=G=>t(R).validate("payment_term_type"))},{default:f(()=>[c("option",oKe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe($.value,G=>(L(),U("option",{key:G.code,value:G.code},_(t(a)(G.name)),9,rKe))),128))]),_:1},8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.payment_term_type},null,8,["messages"])]),c("div",iKe,[l(t(K),{class:F({"text-danger":t(R).invalid("payment_term")})},{default:f(()=>[A(_(t(a)("views.customer.fields.payment_term")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(R).payment_term,"onUpdate:modelValue":J[21]||(J[21]=G=>t(R).payment_term=G),type:"number",class:F({"border-danger":t(R).invalid("payment_term")}),placeholder:t(a)("views.customer.fields.payment_term"),onChange:J[22]||(J[22]=G=>t(R).validate("payment_term"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.payment_term},null,8,["messages"])])])])]),"card-items-2":f(()=>[c("div",lKe,[c("div",cKe,[c("div",dKe,[l(t(K),{class:F({"text-danger":t(R).invalid("taxable_enterprise")})},{default:f(()=>[A(_(t(a)("views.customer.fields.taxable_enterprise")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(R).taxable_enterprise,"onUpdate:modelValue":J[23]||(J[23]=G=>t(R).taxable_enterprise=G),type:"checkbox",class:F({"border-danger":t(R).invalid("taxable_enterprise")}),placeholder:t(a)("views.customer.fields.taxable_enterprise"),onChange:J[24]||(J[24]=G=>t(R).validate("taxable_enterprise"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(R).errors.taxable_enterprise},null,8,["messages"])]),c("div",uKe,[l(t(K),{class:F({"text-danger":t(R).invalid("tax_id")})},{default:f(()=>[A(_(t(a)("views.customer.fields.tax_id")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(R).tax_id,"onUpdate:modelValue":J[25]||(J[25]=G=>t(R).tax_id=G),type:"text",class:F({"border-danger":t(R).invalid("tax_id")}),placeholder:t(a)("views.customer.fields.tax_id"),onChange:J[26]||(J[26]=G=>t(R).validate("tax_id"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.tax_id},null,8,["messages"])]),c("div",pKe,[l(t(K),{class:F({"text-danger":t(R).invalid("remarks")})},{default:f(()=>[A(_(t(a)("views.customer.fields.remarks")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(R).remarks,"onUpdate:modelValue":J[27]||(J[27]=G=>t(R).remarks=G),class:F({"border-danger":t(R).invalid("remarks")}),placeholder:t(a)("views.customer.fields.remarks"),onChange:J[28]||(J[28]=G=>t(R).validate("remarks"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(R).errors.remarks},null,8,["messages"])])])])]),"card-items-button":f(()=>[c("div",hKe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(R).validating||t(R).hasErrors},{default:f(()=>[t(R).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:oe},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),mKe={class:"p-5"},vKe={class:"grid grid-cols-1 md:grid-cols-2 gap-x-4"},yKe={class:"pb-4"},_Ke={class:"pb-4"},gKe={class:"pb-4"},kKe={class:"pb-4"},bKe={class:"pb-4"},wKe={class:"pb-4"},xKe={value:"0",disabled:""},MKe=["value"],CKe={class:"p-5"},SKe={class:"grid grid-cols-1 md:grid-cols-2 gap-x-4"},IKe={class:"pb-4"},LKe={class:"pb-4"},$Ke={class:"pb-4"},AKe={class:"pb-4"},EKe={value:""},TKe=["value"],PKe={class:"pb-4"},DKe={class:"p-5"},RKe={class:"grid grid-cols-1 md:grid-cols-2 gap-x-4"},OKe={class:"pb-4"},VKe={class:"pb-4"},UKe={class:"pb-4"},FKe={class:"flex gap-4"},jKe=Ce({__name:"CustomerEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=Sa(),o=ct(),r=zt(),i=new PP,u=new gu,h=new aa,m=new Dt,p=e,b=O([{title:"views.customer.field_groups.general_information",state:fe.Expanded},{title:"views.customer.field_groups.credit_limit",state:fe.Expanded},{title:"views.customer.field_groups.tax_information",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),x=O(null),w=O(""),$=ee(()=>(x.value??[]).map(de=>({value:de.code,label:de.name}))),D=O(null),V=O(null),R=O(!1),E=i.useCustomerEditForm(s.params.ulid),P=ee(()=>r.isUserLocationSelected),S=ee(()=>r.selectedUserLocation);at(async()=>{p("mode-state",xe.FORM_EDIT),P.value||o.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await Promise.all([v(),M(s.params.ulid)]),C()});const C=()=>{S.value&&E.setData({company_id:S.value.company.id})},M=async de=>{var G,ce;p("loading-state",!0);const J=await i.read(de);J&&J.data&&E.setData({company_id:J.data.company.id,user_id:((G=J.data.user)==null?void 0:G.id)??"",group_id:((ce=J.data.group)==null?void 0:ce.id)??"",code:J.data.code,name:J.data.name,zone:J.data.zone,max_open_invoice:J.data.max_open_invoice,max_outstanding_invoice:J.data.max_outstanding_invoice,max_invoice_age:J.data.max_invoice_age,payment_term_type:J.data.payment_term_type,payment_term:J.data.payment_term,is_member:J.data.is_member,taxable_enterprise:J.data.taxable_enterprise,tax_id:J.data.tax_id,status:J.data.status,remarks:J.data.remarks}),p("loading-state",!1)},g=async(de="")=>{var G;const J=await u.readAnyGet({with_trashed:!1,company_id:(G=S.value)==null?void 0:G.company.id,search:de,include_id:void 0,refresh:!1,limit:10});if(J.success&&J.data){const ce=J.data;x.value=ce.data.map(Ee=>({code:Ee.id,name:Ee.name}))}},v=async()=>{R.value=!0;try{await Promise.all([(async()=>{const de=await h.getStatusDDL();V.value=de})(),(async()=>{const de=await h.getPaymentTermTypesDDL();D.value=de})(),g()])}catch{}finally{R.value=!1}},T=()=>{E.setData({group_id:""}),g(""),E.forgetError("group_id"),E.validate("group_id")},j=de=>{b.value[de].state===fe.Collapsed?b.value[de].state=fe.Expanded:b.value[de].state===fe.Expanded&&(b.value[de].state=fe.Collapsed)},B=de=>{const J=document.getElementById(de);J&&J.scrollIntoView({behavior:"smooth",block:"center"})},oe=async()=>{E.hasErrors&&B(Object.keys(E.errors)[0]),p("loading-state",!0),await E.submit().then(()=>{p("update-profile"),o.push({name:"side-menu-customer-list"})}).catch(de=>{const J=ln(de);Le("danger","",J)}).finally(()=>{p("loading-state",!1)})},be=async()=>{E.reset(),E.setErrors({}),await M(s.params.ulid)},$e=()=>{E.forgetError("code"),E.code=="_AUTO_"?E.setData({code:""}):E.setData({code:"_AUTO_"})},Le=(de,J,G)=>{p("show-alertplaceholder",{alertType:de,title:J,alertList:G})};return dt(E,ma.debounce(de=>{m.setLastEntity("CUSTOMER_EDIT",de.data())},500),{deep:!0}),(de,J)=>(L(),U("form",{id:"customerForm",onSubmit:Rt(oe,["prevent"])},[l(t(ba),{cards:b.value,"using-side-tab":!1,onHandleExpandCard:j},{"card-items-0":f(()=>[c("div",mKe,[c("div",vKe,[c("div",yKe,[l(t(K),{class:F({"text-danger":t(E).invalid("code")})},{default:f(()=>[A(_(t(a)("views.customer.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(E).code,"onUpdate:modelValue":J[0]||(J[0]=G=>t(E).code=G),class:F({"border-danger":t(E).invalid("code")}),placeholder:t(a)("views.customer.fields.code"),onSetAuto:$e,onChange:J[1]||(J[1]=G=>t(E).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.code},null,8,["messages"])]),c("div",_Ke,[l(t(K),{class:F({"text-danger":t(E).invalid("name")})},{default:f(()=>[A(_(t(a)("views.customer.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(E).name,"onUpdate:modelValue":J[2]||(J[2]=G=>t(E).name=G),type:"text",class:F({"border-danger":t(E).invalid("name")}),placeholder:t(a)("views.customer.fields.name"),onChange:J[3]||(J[3]=G=>t(E).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.name},null,8,["messages"])]),c("div",gKe,[l(t(K),{class:F({"text-danger":t(E).invalid("group_id")})},{default:f(()=>[A(_(t(a)("views.customer.fields.group")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(E).group_id,"onUpdate:modelValue":J[4]||(J[4]=G=>t(E).group_id=G),search:w.value,"onUpdate:search":J[5]||(J[5]=G=>w.value=G),options:$.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(E).invalid("group_id")}),onChange:J[6]||(J[6]=G=>t(E).validate("group_id")),onSearch:g,onClear:T},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(E).errors.group_id},null,8,["messages"])]),c("div",kKe,[l(t(K),{class:F({"text-danger":t(E).invalid("is_member")})},{default:f(()=>[A(_(t(a)("views.customer.fields.is_member")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(E).is_member,"onUpdate:modelValue":J[7]||(J[7]=G=>t(E).is_member=G),type:"checkbox",class:F({"border-danger":t(E).invalid("is_member")}),placeholder:t(a)("views.customer.fields.is_member"),onChange:J[8]||(J[8]=G=>t(E).validate("is_member"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(E).errors.is_member},null,8,["messages"])]),c("div",bKe,[l(t(K),{class:F({"text-danger":t(E).invalid("zone")})},{default:f(()=>[A(_(t(a)("views.customer.fields.zone")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(E).zone,"onUpdate:modelValue":J[9]||(J[9]=G=>t(E).zone=G),type:"text",class:F({"border-danger":t(E).invalid("zone")}),placeholder:t(a)("views.customer.fields.zone"),onChange:J[10]||(J[10]=G=>t(E).validate("zone"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.zone},null,8,["messages"])]),c("div",wKe,[l(t(K),{class:F({"text-danger":t(E).invalid("status")})},{default:f(()=>[A(_(t(a)("views.customer.fields.status")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(E).status,"onUpdate:modelValue":J[11]||(J[11]=G=>t(E).status=G),class:F({"border-danger":t(E).invalid("status")}),onChange:J[12]||(J[12]=G=>t(E).validate("status"))},{default:f(()=>[c("option",xKe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(V.value,G=>(L(),U("option",{key:G.code,value:G.code},_(t(a)(G.name)),9,MKe))),128))]),_:1},8,["modelValue","class"]),l(t(_e),{messages:t(E).errors.status},null,8,["messages"])])])])]),"card-items-1":f(()=>[c("div",CKe,[c("div",SKe,[c("div",IKe,[l(t(K),{class:F({"text-danger":t(E).invalid("max_open_invoice")})},{default:f(()=>[A(_(t(a)("views.customer.fields.max_open_invoice")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(E).max_open_invoice,"onUpdate:modelValue":J[13]||(J[13]=G=>t(E).max_open_invoice=G),type:"number",class:F({"border-danger":t(E).invalid("max_open_invoice")}),placeholder:t(a)("views.customer.fields.max_open_invoice"),onChange:J[14]||(J[14]=G=>t(E).validate("max_open_invoice"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.max_open_invoice},null,8,["messages"])]),c("div",LKe,[l(t(K),{class:F({"text-danger":t(E).invalid("max_outstanding_invoice")})},{default:f(()=>[A(_(t(a)("views.customer.fields.max_outstanding_invoice")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(E).max_outstanding_invoice,"onUpdate:modelValue":J[15]||(J[15]=G=>t(E).max_outstanding_invoice=G),type:"number",class:F({"border-danger":t(E).invalid("max_outstanding_invoice")}),placeholder:t(a)("views.customer.fields.max_outstanding_invoice"),onChange:J[16]||(J[16]=G=>t(E).validate("max_outstanding_invoice"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.max_outstanding_invoice},null,8,["messages"])]),c("div",$Ke,[l(t(K),{class:F({"text-danger":t(E).invalid("max_invoice_age")})},{default:f(()=>[A(_(t(a)("views.customer.fields.max_invoice_age")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(E).max_invoice_age,"onUpdate:modelValue":J[17]||(J[17]=G=>t(E).max_invoice_age=G),type:"number",class:F({"border-danger":t(E).invalid("max_invoice_age")}),placeholder:t(a)("views.customer.fields.max_invoice_age"),onChange:J[18]||(J[18]=G=>t(E).validate("max_invoice_age"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.max_invoice_age},null,8,["messages"])]),c("div",AKe,[l(t(K),{class:F({"text-danger":t(E).invalid("payment_term_type")})},{default:f(()=>[A(_(t(a)("views.customer_group.fields.payment_term_type")),1)]),_:1},8,["class"]),l(t(Zt),{modelValue:t(E).payment_term_type,"onUpdate:modelValue":J[19]||(J[19]=G=>t(E).payment_term_type=G),onChange:J[20]||(J[20]=G=>t(E).validate("payment_term_type"))},{default:f(()=>[c("option",EKe,_(t(a)("components.dropdown.placeholder")),1),(L(!0),U(ke,null,Fe(D.value,G=>(L(),U("option",{key:G.code,value:G.code},_(t(a)(G.name)),9,TKe))),128))]),_:1},8,["modelValue"]),l(t(_e),{messages:t(E).errors.payment_term_type},null,8,["messages"])]),c("div",PKe,[l(t(K),{class:F({"text-danger":t(E).invalid("payment_term")})},{default:f(()=>[A(_(t(a)("views.customer.fields.payment_term")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(E).payment_term,"onUpdate:modelValue":J[21]||(J[21]=G=>t(E).payment_term=G),type:"number",class:F({"border-danger":t(E).invalid("payment_term")}),placeholder:t(a)("views.customer.fields.payment_term"),onChange:J[22]||(J[22]=G=>t(E).validate("payment_term"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.payment_term},null,8,["messages"])])])])]),"card-items-2":f(()=>[c("div",DKe,[c("div",RKe,[c("div",OKe,[l(t(K),{class:F({"text-danger":t(E).invalid("taxable_enterprise")})},{default:f(()=>[A(_(t(a)("views.customer.fields.taxable_enterprise")),1)]),_:1},8,["class"]),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(E).taxable_enterprise,"onUpdate:modelValue":J[23]||(J[23]=G=>t(E).taxable_enterprise=G),type:"checkbox",class:F({"border-danger":t(E).invalid("taxable_enterprise")}),placeholder:t(a)("views.customer.fields.taxable_enterprise"),onChange:J[24]||(J[24]=G=>t(E).validate("taxable_enterprise"))},null,8,["modelValue","class","placeholder"])]),_:1}),l(t(_e),{messages:t(E).errors.taxable_enterprise},null,8,["messages"])]),c("div",VKe,[l(t(K),{class:F({"text-danger":t(E).invalid("tax_id")})},{default:f(()=>[A(_(t(a)("views.customer.fields.tax_id")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(E).tax_id,"onUpdate:modelValue":J[25]||(J[25]=G=>t(E).tax_id=G),type:"text",class:F({"border-danger":t(E).invalid("tax_id")}),placeholder:t(a)("views.customer.fields.tax_id"),onChange:J[26]||(J[26]=G=>t(E).validate("tax_id"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.tax_id},null,8,["messages"])]),c("div",UKe,[l(t(K),{class:F({"text-danger":t(E).invalid("remarks")})},{default:f(()=>[A(_(t(a)("views.customer.fields.remarks")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(E).remarks,"onUpdate:modelValue":J[27]||(J[27]=G=>t(E).remarks=G),class:F({"border-danger":t(E).invalid("remarks")}),placeholder:t(a)("views.customer.fields.remarks"),onChange:J[28]||(J[28]=G=>t(E).validate("remarks"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(E).errors.remarks},null,8,["messages"])])])])]),"card-items-button":f(()=>[c("div",FKe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(E).validating},{default:f(()=>[t(E).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:be},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),HKe={class:"mt-8"},NKe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},zKe={class:"ml-4 mr-4"},BKe={class:"font-medium"},qKe={class:"mt-1 text-slate-500"},WKe=Ce({__name:"StockAdjustmentCategoryIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.stock_adjustment_category.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[stockAdjustmentCategoryNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-stock-adjustment-category-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-stock-adjustment-category-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.stock_adjustment_category.actions.create";break;case xe.FORM_EDIT:h.value="views.stock_adjustment_category.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.stock_adjustment_category.page_title";break}},P=async()=>{const v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("STOCK_ADJUSTMENT_CATEGORY_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("STOCK_ADJUSTMENT_CATEGORY_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",HKe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",NKe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"stockAdjustmentCategoryNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",zKe,[c("div",BKe,_(w.value),1),c("div",qKe,_($.value),1)])]),_:1})])}}});class Ro{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useStockAdjustmentCategoryCreateForm(){const e=je("api.post.stock_adjustment_category.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",code:"_AUTO_",name:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),s.company_id=e.company_id,e.search&&(s.search=e.search),e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.stock_adjustment_category.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed?1:0,s.company_id=e.company_id,s.search=e.search?e.search:"",e.include_id&&(s.include_id=e.include_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.stock_adjustment_category.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.stock_adjustment_category.read",{stock_adjustment_category:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useStockAdjustmentCategoryEditForm(e){const a=je("api.post.stock_adjustment_category.edit",{stock_adjustment_category:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",code:"_AUTO_",name:""})}async delete(e){const a={success:!1};try{const s=je("api.post.stock_adjustment_category.delete",{stock_adjustment_category:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const GKe={class:"grid grid-cols-12 gap-6 mt-5"},ZKe={class:"col-span-12 intro-y lg:col-span-12"},KKe={class:"flex justify-center italic"},XKe={class:"font-medium whitespace-nowrap"},YKe={class:"font-medium"},QKe={class:"flex justify-end gap-1"},JKe={class:"grid grid-cols-12 gap-6"},eXe={class:"col-span-12"},tXe={class:"font-medium text-base mb-3 border-b pb-2"},aXe={class:"grid grid-cols-1 gap-y-2"},nXe={class:"flex flex-row"},sXe={class:"w-48 text-slate-500"},oXe={class:"flex-1 font-medium"},rXe={class:"flex flex-row"},iXe={class:"w-48 text-slate-500"},lXe={class:"flex-1 font-medium"},cXe={class:"p-5 text-center"},dXe={class:"mt-5 text-3xl"},uXe={class:"mt-2 text-slate-500"},pXe=c("br",null,null,-1),hXe={class:"px-5 pb-8 text-center"},fXe=Ce({__name:"StockAdjustmentCategoryList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new Ro,r=zt(),i=e,u=O(""),h=O(!1),m=O(null),p=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{i("mode-state",xe.LIST),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w("",!0,1,10)});const w=async(C,M,g,v)=>{i("loading-state",!0);const j={with_trashed:!1,company_id:x.value.company.id,search:C,include_id:void 0,refresh:M,page:g,per_page:v},B=await o.readAnyPaginate(j);B.success&&B.data?(p.value=B.data,S("hidden","",null)):S("danger","",B.errors),i("loading-state",!1)},$=async C=>{await w(C.search.text,!1,C.pagination.page,C.pagination.per_page)},D=C=>{m.value===C?m.value=null:m.value=C},V=C=>{if(!p.value)return;const M=p.value.data[C].ulid;i("mode-state",xe.FORM_EDIT),s.push({name:"side-menu-stock-adjustment-category-edit",params:{ulid:M}})},R=C=>{if(!p.value)return;const M=p.value.data[C].ulid;u.value=M,h.value=!0},E=async()=>{h.value=!1,i("loading-state",!0);const C=await o.delete(u.value);i("loading-state",!1),C.success?(i("update-profile"),await w("",!0,1,10),P(a("views.stock_adjustment_category.alert.delete_stock_adjustment_category.title"),a("views.stock_adjustment_category.alert.delete_stock_adjustment_category.content"))):S("danger","",C.errors)},P=(C,M)=>{i("show-notification",{title:C,content:M})},S=(C,M,g)=>{i("show-alertplaceholder",{alertType:C,title:M,alertList:g})};return(C,M)=>(L(),U(ke,null,[c("div",GKe,[c("div",ZKe,[l(t(mn),{title:t(a)("views.stock_adjustment_category.table.title"),data:p.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:p.value?p.value.meta:null,onDataListChanged:$},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_category.fields.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_category.fields.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),p.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[p.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"3"},{default:f(()=>[c("div",KKe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(p.value.data,(g,v)=>(L(),U(ke,{key:g.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[c("div",XKe,_(g.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",YKe,_(g.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",QKe,[l(t(me),{variant:"outline-secondary",onClick:T=>D(v)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>V(v)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:T=>R(v)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":m.value!==v})},{default:f(()=>[l(t(X).Td,{colspan:"3",class:"p-5"},{default:f(()=>[c("div",JKe,[c("div",eXe,[c("div",tXe,_(t(a)("views.stock_adjustment_category.page_title")),1),c("div",aXe,[c("div",nXe,[c("div",sXe,_(t(a)("views.stock_adjustment_category.fields.code")),1),c("div",oXe,_(g.code),1)]),c("div",rXe,[c("div",iXe,_(t(a)("views.stock_adjustment_category.fields.name")),1),c("div",lXe,_(g.name),1)])])])])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]),l(t($t),{open:h.value,onClose:M[1]||(M[1]=()=>{h.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",cXe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",dXe,_(t(a)("components.delete-modal.title")),1),c("div",uXe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),pXe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",hXe,[l(t(me),{type:"button",variant:"outline-secondary",onClick:M[0]||(M[0]=()=>{h.value=!1}),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:E},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])],64))}}),mXe={class:"p-5"},vXe=c("br",null,null,-1),yXe={class:"p-5"},_Xe={class:"grid grid-cols-12 gap-4 gap-y-3"},gXe={class:"col-span-12 sm:col-span-6"},kXe={class:"col-span-12 sm:col-span-6"},bXe={class:"flex gap-4"},wXe=Ce({__name:"StockAdjustmentCategoryCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=new Ro,i=new Dt,u=e,h=O([{title:"views.stock_adjustment_category.field_groups.company_info",state:fe.Expanded},{title:"views.stock_adjustment_category.field_groups.stock_adjustment_category_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),m=r.useStockAdjustmentCategoryCreateForm(),p=ee(()=>o.isUserLocationSelected),b=ee(()=>o.selectedUserLocation);at(async()=>{u("mode-state",xe.FORM_CREATE),w(),p.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),x()});const x=()=>{m.setData({company_id:b.value.company.id})},w=()=>{const S=i.getLastEntity("STOCK_ADJUSTMENT_CATEGORY_CREATE");S&&m.setData(S)},$=S=>{h.value[S].state===fe.Collapsed?h.value[S].state=fe.Expanded:h.value[S].state===fe.Expanded&&(h.value[S].state=fe.Collapsed)},D=S=>{const C=document.getElementById(S);C&&C.scrollIntoView({behavior:"smooth",block:"center"})},V=async()=>{m.hasErrors&&D(Object.keys(m.errors)[0]),u("loading-state",!0),await m.submit().then(()=>{R(),P("hidden","",null),u("update-profile"),s.push({name:"side-menu-stock-adjustment-category-list"})}).catch(S=>{const C=ln(S);P("danger","",C)}).finally(()=>{u("loading-state",!1)})},R=()=>{m.reset(),m.setErrors({})},E=()=>{m.forgetError("code"),m.code=="_AUTO_"?m.setData({code:""}):m.setData({code:"_AUTO_"})},P=(S,C,M)=>{u("show-alertplaceholder",{alertType:S,title:C,alertList:M})};return dt(m,ma.debounce(S=>{i.setLastEntity("STOCK_ADJUSTMENT_CATEGORY_CREATE",S.data())},500),{deep:!0}),(S,C)=>(L(),U("form",{id:"stockAdjustmentCategoryForm",onSubmit:Rt(V,["prevent"])},[l(t(ba),{cards:h.value,"using-side-tab":!1,onHandleExpandCard:$},{"card-items-0":f(()=>[c("div",mXe,[l(t(K),null,{default:f(()=>[A(_(b.value.company.code)+" ",1),vXe,A(" "+_(b.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(m).company_id,"onUpdate:modelValue":C[0]||(C[0]=M=>t(m).company_id=M)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",yXe,[c("div",_Xe,[c("div",gXe,[l(t(K),{class:F({"text-danger":t(m).invalid("code")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_category.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(m).code,"onUpdate:modelValue":C[1]||(C[1]=M=>t(m).code=M),class:F({"border-danger":t(m).invalid("code")}),placeholder:t(a)("views.stock_adjustment_category.fields.code"),onSetAuto:E,onChange:C[2]||(C[2]=M=>t(m).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.code},null,8,["messages"])]),c("div",kXe,[l(t(K),{class:F({"text-danger":t(m).invalid("name")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_category.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(m).name,"onUpdate:modelValue":C[3]||(C[3]=M=>t(m).name=M),type:"text",class:F({"border-danger":t(m).invalid("name")}),placeholder:t(a)("views.stock_adjustment_category.fields.name"),onChange:C[4]||(C[4]=M=>t(m).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.name},null,8,["messages"])])])])]),"card-items-button":f(()=>[c("div",bXe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(m).validating||t(m).hasErrors},{default:f(()=>[t(m).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:R},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),xXe={class:"p-5"},MXe=c("br",null,null,-1),CXe={class:"p-5"},SXe={class:"grid grid-cols-12 gap-4 gap-y-3"},IXe={class:"col-span-12 sm:col-span-6"},LXe={class:"col-span-12 sm:col-span-6"},$Xe={class:"flex gap-4"},AXe=Ce({__name:"StockAdjustmentCategoryEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=Sa(),r=zt(),i=new Ro,u=new Dt,h=e,m=O([{title:"views.stock_adjustment_category.field_groups.company_info",state:fe.Expanded},{title:"views.stock_adjustment_category.field_groups.stock_adjustment_category_data",state:fe.Expanded},{title:"",state:fe.Hidden,id:"button"}]),p=i.useStockAdjustmentCategoryEditForm(o.params.ulid.toString()),b=ee(()=>r.isUserLocationSelected),x=ee(()=>r.selectedUserLocation);at(async()=>{h("mode-state",xe.FORM_EDIT),b.value||s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}}),await w()});const w=async()=>{var C;h("loading-state",!0);const S=await i.read(o.params.ulid.toString());h("loading-state",!1),S.success&&S.data?p.setData({company_id:((C=S.data.company)==null?void 0:C.id)??"",code:S.data.code,name:S.data.name}):s.push({name:"side-menu-stock-adjustment-category-list"})},$=S=>{m.value[S].state===fe.Collapsed?m.value[S].state=fe.Expanded:m.value[S].state===fe.Expanded&&(m.value[S].state=fe.Collapsed)},D=S=>{const C=document.getElementById(S);C&&C.scrollIntoView({behavior:"smooth",block:"center"})},V=async()=>{p.hasErrors&&D(Object.keys(p.errors)[0]),h("loading-state",!0),await p.submit().then(()=>{P("hidden","",null),h("update-profile"),s.push({name:"side-menu-stock-adjustment-category-list"})}).catch(S=>{const C=ln(S);P("danger","",C)}).finally(()=>{h("loading-state",!1)})},R=async()=>{p.reset(),p.setErrors({}),await w()},E=()=>{p.forgetError("code"),p.code=="_AUTO_"?p.setData({code:""}):p.setData({code:"_AUTO_"})},P=(S,C,M)=>{h("show-alertplaceholder",{alertType:S,title:C,alertList:M})};return dt(p,ma.debounce(S=>{u.setLastEntity("STOCK_ADJUSTMENT_CATEGORY_EDIT",S.data())},500),{deep:!0}),(S,C)=>(L(),U("form",{id:"stockAdjustmentCategoryForm",onSubmit:Rt(V,["prevent"])},[l(t(ba),{cards:m.value,"using-side-tab":!1,onHandleExpandCard:$},{"card-items-0":f(()=>[c("div",xXe,[l(t(K),null,{default:f(()=>[A(_(x.value.company.code)+" ",1),MXe,A(" "+_(x.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(p).company_id,"onUpdate:modelValue":C[0]||(C[0]=M=>t(p).company_id=M)},null,8,["modelValue"])])]),"card-items-1":f(()=>[c("div",CXe,[c("div",SXe,[c("div",IXe,[l(t(K),{class:F({"text-danger":t(p).invalid("code")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_category.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(p).code,"onUpdate:modelValue":C[1]||(C[1]=M=>t(p).code=M),class:F({"border-danger":t(p).invalid("code")}),placeholder:t(a)("views.stock_adjustment_category.fields.code"),onSetAuto:E,onChange:C[2]||(C[2]=M=>t(p).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.code},null,8,["messages"])]),c("div",LXe,[l(t(K),{class:F({"text-danger":t(p).invalid("name")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_category.fields.name")),1)]),_:1},8,["class"]),l(t(Oe),{modelValue:t(p).name,"onUpdate:modelValue":C[3]||(C[3]=M=>t(p).name=M),type:"text",class:F({"border-danger":t(p).invalid("name")}),placeholder:t(a)("views.stock_adjustment_category.fields.name"),onChange:C[4]||(C[4]=M=>t(p).validate("name"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(p).errors.name},null,8,["messages"])])])])]),"card-items-button":f(()=>[c("div",$Xe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(p).validating||t(p).hasErrors},{default:f(()=>[t(p).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:R},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"])],32))}}),EXe={class:"mt-8"},TXe={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},PXe={class:"ml-4 mr-4"},DXe={class:"font-medium"},RXe={class:"mt-1 text-slate-500"},OXe=Ce({__name:"StockAdjustmentIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new Dt,r=new cn,i=O(xe.INDEX),u=O(!1),h=O("views.stock_adjustment.page_title"),m=O("hidden"),p=O(""),b=O(null),x=O(),w=O(""),$=O("");St("bind[stockAdjustmentNotification]",v=>{x.value=v});const D=()=>{g(),i.value=xe.FORM_CREATE,a.push({name:"side-menu-stock-adjustment-create"})},V=async()=>{g(),M(i.value),i.value=xe.LIST,a.push({name:"side-menu-stock-adjustment-list"})},R=v=>{u.value=v},E=v=>{switch(i.value=v,v){case xe.FORM_CREATE:h.value="views.stock_adjustment.actions.create";break;case xe.FORM_EDIT:h.value="views.stock_adjustment.actions.edit";break;case xe.INDEX:case xe.LIST:default:h.value="views.stock_adjustment.page_title";break}},P=async()=>{const v=await r.readProfile();v.success&&s.setUserContext(v.data)},S=v=>{m.value=v.alertType,p.value=v.title,b.value=v.alertList},C=v=>{w.value=v.title,$.value=v.content,x.value&&x.value.showToast()},M=v=>{switch(v){case xe.FORM_CREATE:o.removeLastEntity("STOCK_ADJUSTMENT_CREATE");break;case xe.FORM_EDIT:o.removeLastEntity("STOCK_ADJUSTMENT_EDIT");break}},g=()=>{p.value="",b.value=null,m.value="hidden"};return(v,T)=>{const j=Qt("RouterView");return L(),U("div",EXe,[l(t(da),{visible:u.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(h.value)),1)]),optional:f(()=>[c("div",TXe,[i.value==t(xe).LIST?(L(),ge(t(me),{key:0,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:D},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.create_new")),1)]),_:1})):(L(),ge(t(me),{key:1,as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:V},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1}))])]),_:1}),l(dn,{"alert-type":m.value,title:p.value,"alert-list":b.value,onDismiss:g},null,8,["alert-type","title","alert-list"]),l(j,{onLoadingState:R,onModeState:E,onUpdateProfile:P,onShowAlertplaceholder:S,onShowNotification:C})]),_:1},8,["visible"]),l(fn,{"ref-key":"stockAdjustmentNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",PXe,[c("div",DXe,_(w.value),1),c("div",RXe,_($.value),1)])]),_:1})])}}});class DP{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useStockAdjustmentCreateForm(){const e=je("api.post.stock_adjustment.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",branch_id:"",code:"_AUTO_",date:"_AUTO_",category_id:"",in_warehouse_id:"",out_warehouse_id:"",remarks:"",is_posted:!0,in_products:[],out_products:[]})}useStockAdjustmentEditForm(e){const a=je("api.post.stock_adjustment.edit",{stock_adjustment:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",branch_id:"",code:"_AUTO_",date:"",category_id:"",in_warehouse_id:"",out_warehouse_id:"",remarks:"",is_posted:!1,delete_in_product_ids:[],in_products:[],delete_out_product_ids:[],out_products:[]})}async readAnyPaginate(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed,s.company_id=e.company_id,s.branch_id=e.branch_id,s.search=e.search,s.start_date=e.start_date,s.end_date=e.end_date,s.category_id=e.category_id,s.in_warehouse_id=e.in_warehouse_id,s.out_warehouse_id=e.out_warehouse_id,s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.stock_adjustment.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed,s.company_id=e.company_id,s.branch_id=e.branch_id,s.search=e.search,s.start_date=e.start_date,s.end_date=e.end_date,s.category_id=e.category_id,s.in_warehouse_id=e.in_warehouse_id,s.out_warehouse_id=e.out_warehouse_id,s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.stock_adjustment.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.stock_adjustment.read",{stock_adjustment:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async delete(e){const a={success:!1};try{const s=je("api.post.stock_adjustment.delete",{stock_adjustment:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const VXe={class:"grid grid-cols-12 gap-6 mt-5"},UXe={class:"col-span-12 intro-y lg:col-span-12"},FXe={class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},jXe={class:"col-span-12 lg:col-span-3"},HXe={class:"col-span-12 lg:col-span-3"},NXe={class:"col-span-12 md:col-span-12 lg:col-span-1 flex items-end"},zXe={key:0,class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},BXe={class:"col-span-12 md:col-span-4 lg:col-span-2"},qXe={class:"flex items-center gap-2"},WXe={class:"flex-1 relative z-30"},GXe={class:"col-span-12 md:col-span-4 lg:col-span-2"},ZXe={class:"flex items-center gap-2"},KXe={class:"flex-1 relative z-30"},XXe={class:"col-span-12 md:col-span-4 lg:col-span-2"},YXe={class:"flex items-center gap-2"},QXe={class:"flex-1 relative z-30"},JXe={class:"flex justify-center italic"},eYe={class:"font-medium whitespace-nowrap"},tYe={class:"whitespace-nowrap"},aYe={class:"whitespace-nowrap"},nYe={class:"whitespace-nowrap"},sYe={class:"whitespace-nowrap"},oYe={class:"flex items-center"},rYe={class:"truncate max-w-xs"},iYe={class:"flex justify-end gap-1"},lYe={class:"grid grid-cols-12 gap-6"},cYe={class:"col-span-12"},dYe={class:"font-medium text-base mb-3 border-b pb-2"},uYe={class:"grid grid-cols-1 gap-y-2"},pYe={class:"flex flex-row"},hYe={class:"w-48 text-slate-500"},fYe={class:"flex-1 font-medium"},mYe={class:"flex flex-row"},vYe={class:"w-48 text-slate-500"},yYe={class:"flex-1 font-medium"},_Ye={class:"flex flex-row"},gYe={class:"w-48 text-slate-500"},kYe={class:"flex-1 font-medium"},bYe={class:"flex flex-row"},wYe={class:"w-48 text-slate-500"},xYe={class:"flex-1 font-medium"},MYe={class:"flex flex-row"},CYe={class:"w-48 text-slate-500"},SYe={class:"flex-1 font-medium"},IYe={class:"flex flex-row"},LYe={class:"w-48 text-slate-500"},$Ye={class:"flex-1 font-medium"},AYe={class:"flex items-center"},EYe={class:"flex flex-row"},TYe={class:"w-48 text-slate-500"},PYe={class:"flex-1 font-medium"},DYe={class:"mt-4"},RYe={class:"font-medium text-sm mb-2"},OYe={key:0,class:"text-slate-500 text-sm"},VYe={key:1,class:"space-y-2 text-xs sm:text-sm"},UYe={class:"w-6 text-right text-slate-500"},FYe={class:"flex-1"},jYe={class:"font-medium truncate"},HYe={class:"mt-0.5 text-slate-500"},NYe={class:"font-medium"},zYe={key:0,class:"mt-1"},BYe={class:"text-xs text-slate-500"},qYe={key:0,class:"flex flex-wrap gap-1 mt-0.5"},WYe={key:1,class:"text-slate-500 text-xs italic mt-0.5"},GYe={class:"mt-4"},ZYe={class:"font-medium text-sm mb-2"},KYe={key:0,class:"text-slate-500 text-sm"},XYe={key:1,class:"space-y-2 text-xs sm:text-sm"},YYe={class:"w-6 text-right text-slate-500"},QYe={class:"flex-1"},JYe={class:"font-medium truncate"},eQe={class:"mt-0.5 text-slate-500"},tQe={class:"font-medium"},aQe={key:0,class:"mt-1"},nQe={class:"text-xs text-slate-500"},sQe={key:0,class:"flex flex-wrap gap-1 mt-0.5"},oQe={key:1,class:"text-slate-500 text-xs italic mt-0.5"},rQe={class:"p-5 text-center"},iQe={class:"mt-5 text-3xl"},lQe={class:"mt-2 text-slate-500"},cQe=c("br",null,null,-1),dQe={class:"px-5 pb-8 text-center"},uQe=Ce({__name:"StockAdjustmentList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new DP,r=new Ro,i=new co,u=zt(),h=e,m=O(""),p=O(!1),b=O(null),x=O(null),w=O(null),$=O(""),D=O(!1),V=O(null),R=O(null),E=O(null),P=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),S=ee(()=>u.isUserLocationSelected),C=ee(()=>u.selectedUserLocation),M=O(null),g=O(""),v=ee(()=>(M.value??[]).map(N=>({value:N.code,label:N.name}))),T=O(null),j=O(""),B=ee(()=>(T.value??[]).map(N=>({value:N.code,label:N.name}))),oe=O(null),be=O(""),$e=ee(()=>(oe.value??[]).map(N=>({value:N.code,label:N.name})));at(async()=>{if(h("mode-state",xe.LIST),!S.value){s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}const N=new Date,Q=new Date(N.getFullYear(),N.getMonth(),1,0,0,0),he=new Date(N.getFullYear(),N.getMonth()+1,0,23,59,59);x.value=Ya(Q.toString(),"YYYY-MM-DD HH:mm:ss"),w.value=Ya(he.toString(),"YYYY-MM-DD HH:mm:ss"),await Le("",!0,1,10)});const Le=async(N,Q,he,Se)=>{h("loading-state",!0),$.value=N;const Re={with_trashed:!1,company_id:C.value.company.id,branch_id:C.value.branch.id,search:N,start_date:x.value||null,end_date:w.value||null,category_id:V.value,in_warehouse_id:R.value,out_warehouse_id:E.value,refresh:Q,page:he,per_page:Se},Ze=await o.readAnyPaginate(Re);Ze.success&&Ze.data?(P.value=Ze.data,H("hidden","",null)):H("danger","",Ze.errors),h("loading-state",!1)},de=async N=>{await Le(N.search.text,!0,N.pagination.page,N.pagination.per_page)},J=async()=>{var Q;const N=((Q=P.value)==null?void 0:Q.meta.per_page)||10;await Le($.value,!0,1,N)},G=async()=>{var Q;const N=((Q=P.value)==null?void 0:Q.meta.per_page)||10;await Le($.value,!0,1,N)},ce=async()=>{var Q;const N=((Q=P.value)==null?void 0:Q.meta.per_page)||10;await Le($.value,!0,1,N)},Ee=async()=>{var Q;const N=((Q=P.value)==null?void 0:Q.meta.per_page)||10;await Le($.value,!0,1,N)},He=async(N="")=>{if(!C.value)return;const Q=await i.readAnyGet({with_trashed:!1,company_id:C.value.company.id,branch_id:C.value.branch.id,search:N,status:void 0,refresh:!1,limit:20});Q.success&&Q.data&&(T.value=Q.data.data.map(he=>({code:he.id,name:he.name})))},Ke=async(N="")=>{if(!C.value)return;const Q=await i.readAnyGet({with_trashed:!1,company_id:C.value.company.id,branch_id:C.value.branch.id,search:N,status:void 0,refresh:!1,limit:20});Q.success&&Q.data&&(oe.value=Q.data.data.map(he=>({code:he.id,name:he.name})))},pt=async(N="")=>{if(!C.value)return;const Q=await r.readAnyGet({with_trashed:!1,company_id:C.value.company.id,search:N,include_id:void 0,refresh:!1,limit:20});Q.success&&Q.data&&(M.value=Q.data.data.map(he=>({code:he.id,name:he.name})))},ut=async()=>{V.value=null,await pt(""),await G()},ft=async()=>{R.value=null,await He(""),await ce()},kt=async()=>{E.value=null,await Ke(""),await Ee()},Ae=async()=>{D.value=!D.value,D.value&&await Promise.all([pt(g.value),He(j.value),Ke(be.value)])},Xe=N=>{b.value===N?b.value=null:b.value=N},ie=N=>{if(!P.value)return;const Q=P.value.data[N].ulid;h("mode-state",xe.FORM_EDIT),s.push({name:"side-menu-stock-adjustment-edit",params:{ulid:Q}})},Y=N=>{if(!P.value)return;const Q=P.value.data[N].ulid;m.value=Q,p.value=!0},ue=async()=>{p.value=!1,h("loading-state",!0);const N=await o.delete(m.value);h("loading-state",!1),N.success?(h("update-profile"),await Le("",!0,1,10),pe(a("views.stock_adjustment.alert.delete.title"),a("views.stock_adjustment.alert.delete.message"))):H("danger","",N.errors)},pe=(N,Q)=>{h("show-notification",{title:N,content:Q})},H=(N,Q,he)=>{h("show-alertplaceholder",{alertType:N,title:Q,alertList:he})};return(N,Q)=>(L(),U(ke,null,[c("div",VXe,[c("div",UXe,[c("div",FXe,[c("div",jXe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.start_date")),1)]),_:1}),l(t(oo),{modelValue:x.value,"onUpdate:modelValue":Q[0]||(Q[0]=he=>x.value=he),onChange:J},null,8,["modelValue"])]),c("div",HXe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.end_date")),1)]),_:1}),l(t(oo),{modelValue:w.value,"onUpdate:modelValue":Q[1]||(Q[1]=he=>w.value=he),onChange:J},null,8,["modelValue"])]),c("div",NXe,[l(t(me),{variant:"soft-secondary",class:"shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300",onClick:Ae},{default:f(()=>[l(t(re),{icon:"Filter",class:"w-4 h-5"})]),_:1})])]),D.value?(L(),U("div",zXe,[c("div",BXe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.category_id")),1)]),_:1}),c("div",qXe,[c("div",WXe,[l(t(Bt),{modelValue:V.value,"onUpdate:modelValue":Q[2]||(Q[2]=he=>V.value=he),search:g.value,"onUpdate:search":Q[3]||(Q[3]=he=>g.value=he),options:v.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:G,onSearch:pt,onClear:ut},null,8,["modelValue","search","options","placeholder"])])])]),c("div",GXe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.in_warehouse_id")),1)]),_:1}),c("div",ZXe,[c("div",KXe,[l(t(Bt),{modelValue:R.value,"onUpdate:modelValue":Q[4]||(Q[4]=he=>R.value=he),search:j.value,"onUpdate:search":Q[5]||(Q[5]=he=>j.value=he),options:B.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:ce,onSearch:He,onClear:ft},null,8,["modelValue","search","options","placeholder"])])])]),c("div",XXe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.out_warehouse_id")),1)]),_:1}),c("div",YXe,[c("div",QXe,[l(t(Bt),{modelValue:E.value,"onUpdate:modelValue":Q[6]||(Q[6]=he=>E.value=he),search:be.value,"onUpdate:search":Q[7]||(Q[7]=he=>be.value=he),options:$e.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:Ee,onSearch:Ke,onClear:kt},null,8,["modelValue","search","options","placeholder"])])])])])):Me("",!0),l(t(mn),{title:t(a)("views.stock_adjustment.table.title"),data:P.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:P.value?P.value.meta:null,onDataListChanged:de},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment.table.cols.date")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment.table.cols.category")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment.table.cols.in_warehouse")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment.table.cols.out_warehouse")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment.table.cols.is_posted")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment.table.cols.remarks")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),P.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[P.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"8"},{default:f(()=>[c("div",JXe,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(P.value.data,(he,Se)=>(L(),U(ke,{key:he.ulid},[l(t(X).Tr,{class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[c("div",eYe,_(he.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",tYe,_(t(Ya)(he.date,"DD-MMM-YYYY HH:mm:ss")),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",aYe,_(he.category.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",nYe,_(he.in_warehouse?he.in_warehouse.name:"-"),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",sYe,_(he.out_warehouse?he.out_warehouse.name:"-"),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",oYe,[he.is_posted?(L(),ge(t(re),{key:0,icon:"CheckCircle",class:"w-4 h-4 text-success"})):(L(),ge(t(re),{key:1,icon:"X",class:"w-4 h-4 text-danger"}))])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",rYe,_(he.remarks),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",iYe,[l(t(me),{variant:"outline-secondary",onClick:Re=>Xe(Se)},{default:f(()=>[l(t(re),{icon:"Info",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:Re=>ie(Se)},{default:f(()=>[l(t(re),{icon:"Pen",class:"w-4 h-4"})]),_:2},1032,["onClick"]),l(t(me),{variant:"outline-secondary",onClick:Re=>Y(Se)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024),l(t(X).Tr,{class:F({"intro-x":!0,"hidden transition-all":b.value!==Se})},{default:f(()=>[l(t(X).Td,{colspan:"8",class:"p-5"},{default:f(()=>[c("div",lYe,[c("div",cYe,[c("div",dYe,_(t(a)("views.stock_adjustment.page_title")),1),c("div",uYe,[c("div",pYe,[c("div",hYe,_(t(a)("views.stock_adjustment.fields.code")),1),c("div",fYe,_(he.code),1)]),c("div",mYe,[c("div",vYe,_(t(a)("views.stock_adjustment.fields.date")),1),c("div",yYe,_(t(Ya)(he.date,"DD-MMM-YYYY HH:mm:ss")),1)]),c("div",_Ye,[c("div",gYe,_(t(a)("views.stock_adjustment.fields.category_id")),1),c("div",kYe,_(he.category.name),1)]),c("div",bYe,[c("div",wYe,_(t(a)("views.stock_adjustment.fields.in_warehouse_id")),1),c("div",xYe,_(he.in_warehouse?he.in_warehouse.name:"-"),1)]),c("div",MYe,[c("div",CYe,_(t(a)("views.stock_adjustment.fields.out_warehouse_id")),1),c("div",SYe,_(he.out_warehouse?he.out_warehouse.name:"-"),1)]),c("div",IYe,[c("div",LYe,_(t(a)("views.stock_adjustment.fields.is_posted")),1),c("div",$Ye,[c("div",AYe,[he.is_posted?(L(),ge(t(re),{key:0,icon:"CheckCircle",class:"w-4 h-4 text-success"})):(L(),ge(t(re),{key:1,icon:"X",class:"w-4 h-4 text-danger"}))])])]),c("div",EYe,[c("div",TYe,_(t(a)("views.stock_adjustment.fields.remarks")),1),c("div",PYe,_(he.remarks),1)]),c("div",DYe,[c("div",RYe,_(t(a)("views.stock_adjustment.field_groups.in_products")),1),he.in_products.length===0?(L(),U("div",OYe,_(t(a)("components.data-list.data_not_found")),1)):(L(),U("div",VYe,[(L(!0),U(ke,null,Fe(he.in_products,(Re,Ze)=>{var ze,qe;return L(),U("div",{key:Re.ulid,class:"flex gap-3"},[c("div",UYe,_(Ze+1)+".",1),c("div",FYe,[c("div",jYe," ["+_(Re.product_unit.code)+"] "+_(Re.product_unit.product.name),1),c("div",HYe,[A(_(t(a)("views.stock_adjustment_in_product.fields.qty"))+": ",1),c("span",NYe,_(t(_a)(Re.qty))+" "+_(Re.product_unit.unit.name),1)]),(qe=(ze=Re.product_unit)==null?void 0:ze.product)!=null&&qe.is_use_serial_number?(L(),U("div",zYe,[c("div",BYe,_(t(a)("views.product.fields.serial_number"))+": ",1),Re.serials&&Re.serials.length>0?(L(),U("div",qYe,[(L(!0),U(ke,null,Fe(Re.serials,Be=>(L(),U("span",{key:Be.id,class:"px-1.5 py-0.5 bg-slate-100 dark:bg-darkmode-600 rounded text-xs border border-slate-200 dark:border-darkmode-400"},_(Be.serial),1))),128))])):(L(),U("div",WYe,_(t(a)("components.data-list.data_not_found")),1))])):Me("",!0)])])}),128))]))]),c("div",GYe,[c("div",ZYe,_(t(a)("views.stock_adjustment.field_groups.out_products")),1),he.out_products.length===0?(L(),U("div",KYe,_(t(a)("components.data-list.data_not_found")),1)):(L(),U("div",XYe,[(L(!0),U(ke,null,Fe(he.out_products,(Re,Ze)=>{var ze,qe;return L(),U("div",{key:Re.ulid,class:"flex gap-3"},[c("div",YYe,_(Ze+1)+".",1),c("div",QYe,[c("div",JYe," ["+_(Re.product_unit.code)+"] "+_(Re.product_unit.product.name),1),c("div",eQe,[A(_(t(a)("views.stock_adjustment_in_product.fields.qty"))+": ",1),c("span",tQe,_(t(_a)(Re.qty))+" "+_(Re.product_unit.unit.name),1)]),(qe=(ze=Re.product_unit)==null?void 0:ze.product)!=null&&qe.is_use_serial_number?(L(),U("div",aQe,[c("div",nQe,_(t(a)("views.product.fields.serial_number"))+": ",1),Re.serials&&Re.serials.length>0?(L(),U("div",sQe,[(L(!0),U(ke,null,Fe(Re.serials,Be=>(L(),U("span",{key:Be.id,class:"px-1.5 py-0.5 bg-slate-100 dark:bg-darkmode-600 rounded text-xs border border-slate-200 dark:border-darkmode-400"},_(Be.serial),1))),128))])):(L(),U("div",oQe,_(t(a)("components.data-list.data_not_found")),1))])):Me("",!0)])])}),128))]))])])])])]),_:2},1024)]),_:2},1032,["class"])],64))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]),l(t($t),{open:p.value,onClose:Q[9]||(Q[9]=()=>{p.value=!1})},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",rQe,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",iQe,_(t(a)("components.delete-modal.title")),1),c("div",lQe,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),cQe,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",dQe,[l(t(me),{type:"button",variant:"outline-secondary",onClick:Q[8]||(Q[8]=()=>{p.value=!1}),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:ue},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])],64))}}),pQe={class:"p-5"},hQe={class:"grid grid-cols-12 gap-4 gap-y-3"},fQe={class:"col-span-12 lg:col-span-4 md:col-span-6"},mQe=c("br",null,null,-1),vQe={class:"col-span-12 lg:col-span-4 md:col-span-6"},yQe=c("br",null,null,-1),_Qe={class:"p-5"},gQe={class:"grid grid-cols-12 gap-4 gap-y-3"},kQe={class:"col-span-12 lg:col-span-4 md:col-span-6"},bQe={class:"col-span-12 lg:col-span-4 md:col-span-6"},wQe={class:"col-span-12 lg:col-span-4"},xQe={class:"col-span-12 lg:col-span-6"},MQe={class:"col-span-12 lg:col-span-6"},CQe={class:"col-span-12"},SQe={class:"col-span-12"},IQe={class:"p-5"},LQe={key:0,class:"text-slate-500 text-sm"},$Qe={key:1,class:"space-y-5"},AQe={class:"flex items-center justify-between mb-3"},EQe={class:"font-medium text-sm"},TQe={class:"flex items-center gap-2"},PQe={class:"grid grid-cols-12 gap-4 gap-y-3"},DQe={class:"col-span-12 lg:col-span-2"},RQe={class:"text-sm text-slate-500 text-right font-bold mt-1"},OQe={class:"col-span-12 lg:col-span-5"},VQe={class:"flex items-center gap-2"},UQe={class:"flex-1"},FQe={class:"form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"},jQe={class:"text-sm text-slate-500 font-bold mt-1"},HQe={class:"col-span-12 lg:col-span-1"},NQe={class:"text-sm text-slate-500 text-right font-bold mt-1"},zQe={class:"col-span-12 lg:col-span-2"},BQe={key:0,class:"text-sm text-slate-500 text-right font-bold mt-1"},qQe={class:"col-span-12 lg:col-span-2"},WQe={key:0,class:"col-span-12"},GQe={class:"flex items-center justify-between mb-2"},ZQe={key:0,class:"text-slate-500 text-xs italic"},KQe={key:1,class:"grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3"},XQe={key:1,class:"col-span-12 space-y-3"},YQe={class:"flex items-center justify-between mt-4"},QQe={class:"p-5"},JQe={key:0,class:"text-slate-500 text-sm"},eJe={key:1,class:"space-y-5"},tJe={class:"flex items-center justify-between mb-3"},aJe={class:"font-medium text-sm"},nJe={class:"flex items-center gap-2"},sJe={class:"grid grid-cols-12 gap-4 gap-y-3"},oJe={class:"col-span-12 lg:col-span-2"},rJe={class:"text-sm text-slate-500 text-right font-bold mt-1"},iJe={class:"col-span-12 lg:col-span-8"},lJe={class:"flex items-center gap-2"},cJe={class:"flex-1"},dJe={class:"form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"},uJe={class:"text-sm text-slate-500 font-bold mt-1"},pJe={class:"col-span-12 lg:col-span-2"},hJe={class:"text-sm text-slate-500 text-right font-bold mt-1"},fJe={key:0,class:"col-span-12"},mJe={class:"flex items-center justify-between mb-2"},vJe={key:0,class:"text-slate-500 text-xs italic"},yJe={key:1,class:"grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3"},_Je={key:1,class:"col-span-12 space-y-3"},gJe={class:"flex items-center justify-between mt-4"},kJe={class:"flex gap-4 p-5"},bJe={class:"p-5"},wJe={class:"flex items-center justify-between mb-4"},xJe={class:"flex items-center gap-2 mb-4"},MJe={class:"max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md"},CJe={class:"min-w-full text-sm"},SJe={class:"bg-slate-100 dark:bg-darkmode-600"},IJe={class:"px-3 py-2 text-left"},LJe={class:"px-3 py-2 text-left"},$Je={class:"px-3 py-2 text-right"},AJe={class:"px-3 py-2 text-left"},EJe={class:"px-3 py-2 text-right"},TJe={class:"px-3 py-2 text-right"},PJe=c("th",{class:"px-3 py-2"},null,-1),DJe={key:0},RJe={colspan:"7",class:"px-3 py-4 text-center text-slate-500"},OJe={class:"px-3 py-2"},VJe={class:"px-3 py-2"},UJe={class:"px-3 py-2 text-right"},FJe={class:"px-3 py-2"},jJe={class:"px-3 py-2 text-right"},HJe={class:"px-3 py-2 text-right"},NJe={class:"px-3 py-2 text-right"},zJe={class:"p-5"},BJe={class:"flex items-center justify-between mb-4"},qJe={class:"flex items-center gap-2 mb-4"},WJe={class:"max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md"},GJe={class:"min-w-full text-sm"},ZJe={class:"bg-slate-100 dark:bg-darkmode-600"},KJe={class:"px-3 py-2 text-left"},XJe={class:"px-3 py-2 text-left"},YJe={class:"px-3 py-2 text-right"},QJe={class:"px-3 py-2 text-left"},JJe={class:"px-3 py-2 text-right"},eet={class:"px-3 py-2 text-right"},tet=c("th",{class:"px-3 py-2"},null,-1),aet={key:0},net={colspan:"7",class:"px-3 py-4 text-center text-slate-500"},set={class:"px-3 py-2"},oet={class:"px-3 py-2"},ret={class:"px-3 py-2 text-right"},iet={class:"px-3 py-2"},cet={class:"px-3 py-2 text-right"},det={class:"px-3 py-2 text-right"},uet={class:"px-3 py-2 text-right"},pet=Ce({__name:"StockAdjustmentCreate",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=zt(),r=e,i=ee(()=>o.isUserLocationSelected),u=ee(()=>o.selectedUserLocation),m=new DP().useStockAdjustmentCreateForm(),p=new Ro,b=new co,x=new ur,w=new Dt,$=O(null),D=O(""),V=ee(()=>($.value??[]).map(te=>({value:te.code,label:te.name}))),R=O(null),E=O(""),P=ee(()=>(R.value??[]).map(te=>({value:te.code,label:te.name}))),S=O(null),C=O(""),M=ee(()=>(S.value??[]).map(te=>({value:te.code,label:te.name}))),g=O(!1),v=O(""),T=O(!1),j=O([]),B=O(null),oe=O(null),be=O([]),$e=ee(()=>m.in_products),Le=O(!1),de=O(""),J=O(!1),G=O([]),ce=O(null),Ee=O(null),He=O([]),Ke=ee(()=>m.out_products),pt=O([{title:"views.stock_adjustment.field_groups.company_info",state:fe.Expanded},{title:"views.stock_adjustment.field_groups.stock_adjustment_data",state:fe.Expanded},{title:"views.stock_adjustment.field_groups.in_products",state:fe.Collapsed},{title:"views.stock_adjustment.field_groups.out_products",state:fe.Collapsed},{title:"",state:fe.Hidden,id:"button"}]),ut=te=>{var Ve;const ne=(te==null?void 0:te.product_images)??[];if(ne.length===0)return null;const ye=ne.find(We=>We==null?void 0:We.is_main);return ye!=null&&ye.url?ye.url:((Ve=ne[0])==null?void 0:Ve.url)??null},ft=te=>{pt.value[te].state===fe.Collapsed?pt.value[te].state=fe.Expanded:pt.value[te].state===fe.Expanded&&(pt.value[te].state=fe.Collapsed)};dt(()=>m.in_products,te=>{te&&te.forEach(ne=>{const ye=Number(ne.qty??0),Ve=Number(ne.product_unit_cogs??0);ne.product_unit_total_cogs=ye*Ve})},{deep:!0}),dt(g,te=>{te&&En(()=>{const ne=document.getElementById("product-unit-search-input");ne==null||ne.focus()})}),dt(Le,te=>{te&&En(()=>{const ne=document.getElementById("product-unit-search-input");ne==null||ne.focus()})}),dt(m,ma.debounce(te=>{w.setLastEntity("STOCK_ADJUSTMENT_CREATE",te.data())},500),{deep:!0}),at(()=>{if(r("mode-state",xe.FORM_CREATE),!i.value){s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}H(),m.setData({company_id:u.value.company.id,branch_id:u.value.branch.id}),ie(),Ae(),Xe()});const kt=()=>{m.forgetError("code"),m.code==="_AUTO_"?m.setData({code:""}):m.setData({code:"_AUTO_"})},Ae=async(te="")=>{if(!u.value)return;const ne=await b.readAnyGet({with_trashed:!1,company_id:u.value.company.id,branch_id:u.value.branch.id,search:te,status:void 0,refresh:!1,limit:20});ne.success&&ne.data&&(R.value=ne.data.data.map(ye=>({code:ye.id,name:ye.name})))},Xe=async(te="")=>{if(!u.value)return;const ne=await b.readAnyGet({with_trashed:!1,company_id:u.value.company.id,branch_id:u.value.branch.id,search:te,status:void 0,refresh:!1,limit:20});ne.success&&ne.data&&(S.value=ne.data.data.map(ye=>({code:ye.id,name:ye.name})))},ie=async(te="")=>{if(!u.value)return;const ne=await p.readAnyGet({with_trashed:!1,company_id:u.value.company.id,search:te,include_id:void 0,refresh:!1,limit:20});ne.success&&ne.data&&($.value=ne.data.data.map(ye=>({code:ye.id,name:ye.name})))},Y=()=>{m.setData({in_warehouse_id:""}),Ae(""),m.forgetError("in_warehouse_id"),m.validate("in_warehouse_id")},ue=()=>{m.setData({out_warehouse_id:""}),Xe(""),m.forgetError("out_warehouse_id"),m.validate("out_warehouse_id")},pe=()=>{m.setData({category_id:""}),ie(""),m.forgetError("category_id"),m.validate("category_id")},H=()=>{const te=w.getLastEntity("STOCK_ADJUSTMENT_CREATE");te&&m.setData(te)},N=()=>{v.value="",j.value=[],T.value=!1,B.value=null,g.value=!0},Q=te=>{v.value="",j.value=[],T.value=!1,B.value=te,g.value=!0},he=async()=>{if(!u.value)return;if(!m.in_warehouse_id){m.validate("in_warehouse_id");return}if(!m.date){m.validate("date");return}T.value=!0;let te;m.date==="_AUTO_"?te=Ya(new Date().toString(),"YYYY-MM-DD HH:mm:ss"):te=m.date;const ne=await x.readAnyGet({with_trashed:!1,company_id:u.value.company.id,search:v.value,category_id:void 0,brand_id:void 0,is_taxable:void 0,vat_rate:void 0,is_price_include_vat:void 0,is_use_serial_number:void 0,is_expirable:void 0,type:void 0,status:void 0,include_id:void 0,with_remaining_stock:{end_date:te,warehouse_id:m.in_warehouse_id,include_service_products:!1},refresh:!0,limit:20});if(T.value=!1,ne.success&&ne.data){const ye=ne.data.data;j.value=ye.flatMap(Ve=>{const We=Ve.product_units||[],ga=Number(Ve.remaining_stock_base_unit??0);let _t=We.find(oa=>oa.is_base);_t||(_t=We.find(oa=>Number(oa.conversion_value)===1)),_t||(_t=We.find(oa=>oa.is_primary_unit)),!_t&&We.length>0&&(_t=We[0]);const Wt=_t&&_t.unit?_t.unit.name:"";return We.map(oa=>{const Oa=Number(oa.conversion_value)||1,Cn=ga/Oa;return{product_id:Ve.id,product_code:Ve.code,product_name:Ve.name,product_image_url:ut(Ve),product_unit_id:oa.id,product_unit_code:oa.code,unit_name:oa.unit?oa.unit.name:"",base_unit_name:Wt,conversion_value:Oa,cogs:Number(oa.price),remaining_stock:Cn,is_use_serial_number:Ve.is_use_serial_number}})})}else j.value=[]},Se=te=>{const ne={product_unit_id:te.product_unit_id,product_unit_product_code:te.product_unit_code,product_unit_product_name:te.product_name,product_unit_unit_name:te.unit_name,product_unit_base_unit_name:te.conversion_value!=1?te.base_unit_name:"",product_unit_conversion_value:te.conversion_value,product_unit_cogs:te.cogs,is_use_serial_number:te.is_use_serial_number,serials:[]};let ye;if(B.value===null){const Ve={qty:0,remarks:"",...ne};m.in_products.push(Ve),be.value.push(!1),ye=m.in_products.length-1}else{const Ve=B.value,We=m.in_products[Ve];m.in_products[Ve]={...We,...ne},ye=Ve}g.value=!1,B.value=null,oe.value=ye},Re=te=>{const ne=be.value[te]??!1;be.value[te]=!ne},Ze=()=>{const te=oe.value;oe.value=null,te!==null&&En(()=>{const ne=document.getElementById(`in-product-qty-${te}`);ne==null||ne.scrollIntoView({behavior:"smooth",block:"center"}),ne==null||ne.focus(),ne==null||ne.select()})},ze=te=>{const ye=m.in_products[te];ye&&ye.serials.push({serial:""})},qe=(te,ne)=>{const Ve=m.in_products[te];Ve&&Ve.serials.splice(ne,1)},Be=te=>{m.in_products.splice(te,1),be.value.splice(te,1)},lt=()=>{de.value="",G.value=[],J.value=!1,ce.value=null,Le.value=!0},yt=te=>{de.value="",G.value=[],J.value=!1,ce.value=te,Le.value=!0},it=async()=>{if(!u.value)return;if(!m.out_warehouse_id){m.validate("out_warehouse_id");return}if(!m.date){m.validate("date");return}J.value=!0;let te;m.date==="_AUTO_"?te=Ya(new Date().toString(),"YYYY-MM-DD HH:mm:ss"):te=m.date;const ne=await x.readAnyGet({with_trashed:!1,company_id:u.value.company.id,search:de.value,category_id:void 0,brand_id:void 0,is_taxable:void 0,vat_rate:void 0,is_price_include_vat:void 0,is_use_serial_number:void 0,is_expirable:void 0,type:void 0,status:void 0,include_id:void 0,with_remaining_stock:{end_date:te,warehouse_id:m.out_warehouse_id,stock_filter:"has_stock",include_service_products:!1},refresh:!0,limit:20});if(J.value=!1,ne.success&&ne.data){const ye=ne.data.data;G.value=ye.flatMap(Ve=>{const We=Ve.product_units||[],ga=Number(Ve.remaining_stock_base_unit??0);let _t=We.find(oa=>oa.is_base);_t||(_t=We.find(oa=>Number(oa.conversion_value)===1)),_t||(_t=We.find(oa=>oa.is_primary_unit)),!_t&&We.length>0&&(_t=We[0]);const Wt=_t&&_t.unit?_t.unit.name:"";return We.map(oa=>{const Oa=Number(oa.conversion_value)||1,Cn=ga/Oa;return{product_id:Ve.id,product_code:Ve.code,product_name:Ve.name,product_image_url:ut(Ve),product_unit_id:oa.id,product_unit_code:oa.code,unit_name:oa.unit?oa.unit.name:"",base_unit_name:Wt,conversion_value:Oa,cogs:Number(oa.price),remaining_stock:Cn,is_use_serial_number:Ve.is_use_serial_number}})})}else G.value=[]},Pe=te=>{const ne={product_unit_id:te.product_unit_id,product_unit_product_code:te.product_unit_code,product_unit_product_name:te.product_name,product_unit_unit_name:te.unit_name,product_unit_base_unit_name:te.conversion_value!=1?te.base_unit_name:"",product_unit_conversion_value:te.conversion_value,is_use_serial_number:te.is_use_serial_number,serials:[]};let ye;if(ce.value===null){const Ve={qty:0,remarks:"",...ne};m.out_products.push(Ve),He.value.push(!1),ye=m.out_products.length-1}else{const Ve=ce.value,We=m.out_products[Ve];m.out_products[Ve]={...We,...ne},ye=Ve}Le.value=!1,ce.value=null,Ee.value=ye},Ue=te=>{const ne=He.value[te]??!1;He.value=[...He.value.slice(0,te),!ne,...He.value.slice(te+1)]},ht=()=>{const te=Ee.value;Ee.value=null,te!==null&&En(()=>{const ne=document.getElementById(`out-product-qty-${te}`);ne==null||ne.scrollIntoView({behavior:"smooth",block:"center"}),ne==null||ne.focus(),ne==null||ne.select()})},Mt=te=>{const ye=m.out_products[te];ye&&ye.serials.push({serial:""})},Et=(te,ne)=>{const Ve=m.out_products[te];Ve&&Ve.serials.splice(ne,1)},Jt=te=>{m.out_products.splice(te,1),He.value.splice(te,1)},ae=te=>{const ne=document.getElementById(te);ne&&ne.scrollIntoView({behavior:"smooth",block:"center"})},W=(te,ne,ye)=>{r("show-alertplaceholder",{alertType:te,title:ne,alertList:ye})},q=()=>{m.reset(),m.setErrors({}),be.value=[],He.value=[]},ve=async()=>{if(m.hasErrors){const _t=Object.keys(m.errors)[0];_t&&ae(_t);return}const te=m.in_products,ne=te.map(_t=>({qty:_t.qty,product_unit_id:_t.product_unit_id,product_unit_conversion_value:_t.product_unit_conversion_value,product_unit_cogs:_t.product_unit_cogs,remarks:_t.remarks,serials:_t.serials.map(Wt=>({serial:Wt.serial}))})),ye=m.out_products,Ve=ye.map(_t=>({qty:_t.qty,product_unit_id:_t.product_unit_id,product_unit_conversion_value:_t.product_unit_conversion_value,remarks:_t.remarks,serials:_t.serials.map(Wt=>({serial:Wt.serial}))})),We=[...te],ga=[...ye];m.in_products=ne,m.out_products=Ve,r("loading-state",!0);try{await m.submit(),q(),W("hidden","",null),r("update-profile"),s.push({name:"side-menu-stock-adjustment-list"})}catch(_t){m.in_products=We,m.out_products=ga;const Wt=ln(_t);W("danger","",Wt)}finally{r("loading-state",!1)}};return(te,ne)=>(L(),U("form",{id:"stockAdjustmentForm",onSubmit:Rt(ve,["prevent"])},[l(t(ba),{cards:pt.value,"using-side-tab":!1,onHandleExpandCard:ft},{"card-items-0":f(()=>[c("div",pQe,[c("div",hQe,[c("div",fQe,[l(t(K),null,{default:f(()=>[A(_(u.value.company.code)+" ",1),mQe,A(" "+_(u.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(m).company_id,"onUpdate:modelValue":ne[0]||(ne[0]=ye=>t(m).company_id=ye)},null,8,["modelValue"])]),c("div",vQe,[l(t(K),null,{default:f(()=>[A(_(u.value.branch.code)+" ",1),yQe,A(" "+_(u.value.branch.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(m).branch_id,"onUpdate:modelValue":ne[1]||(ne[1]=ye=>t(m).branch_id=ye)},null,8,["modelValue"])])])])]),"card-items-1":f(()=>[c("div",_Qe,[c("div",gQe,[c("div",kQe,[l(t(K),{class:F({"text-danger":t(m).invalid("code")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(m).code,"onUpdate:modelValue":ne[2]||(ne[2]=ye=>t(m).code=ye),class:F({"border-danger":t(m).invalid("code")}),placeholder:t(a)("views.stock_adjustment.fields.code"),onSetAuto:kt,onChange:ne[3]||(ne[3]=ye=>t(m).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.code},null,8,["messages"])]),c("div",bQe,[l(t(K),{class:F({"text-danger":t(m).invalid("date")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.date")),1)]),_:1},8,["class"]),l(t(yz),{modelValue:t(m).date,"onUpdate:modelValue":ne[4]||(ne[4]=ye=>t(m).date=ye),class:F({"border-danger":t(m).invalid("date")}),placeholder:t(a)("views.stock_adjustment.fields.date"),onChange:ne[5]||(ne[5]=ye=>t(m).validate("date"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.date},null,8,["messages"])]),c("div",wQe,[l(t(K),{class:F({"text-danger":t(m).invalid("category_id")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.category_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(m).category_id,"onUpdate:modelValue":ne[6]||(ne[6]=ye=>t(m).category_id=ye),search:D.value,"onUpdate:search":ne[7]||(ne[7]=ye=>D.value=ye),options:V.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(m).invalid("category_id")}),onChange:ne[8]||(ne[8]=ye=>t(m).validate("category_id")),onSearch:ie,onClear:pe},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(m).errors.category_id},null,8,["messages"])]),c("div",xQe,[l(t(K),{class:F({"text-danger":t(m).invalid("in_warehouse_id")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.in_warehouse_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(m).in_warehouse_id,"onUpdate:modelValue":ne[9]||(ne[9]=ye=>t(m).in_warehouse_id=ye),search:E.value,"onUpdate:search":ne[10]||(ne[10]=ye=>E.value=ye),options:P.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(m).invalid("in_warehouse_id")}),onChange:ne[11]||(ne[11]=ye=>t(m).validate("in_warehouse_id")),onSearch:Ae,onClear:Y},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(m).errors.in_warehouse_id},null,8,["messages"])]),c("div",MQe,[l(t(K),{class:F({"text-danger":t(m).invalid("out_warehouse_id")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.out_warehouse_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(m).out_warehouse_id,"onUpdate:modelValue":ne[12]||(ne[12]=ye=>t(m).out_warehouse_id=ye),search:C.value,"onUpdate:search":ne[13]||(ne[13]=ye=>C.value=ye),options:M.value,placeholder:t(a)("components.dropdown.placeholder"),class:F({"border-danger":t(m).invalid("out_warehouse_id")}),onChange:ne[14]||(ne[14]=ye=>t(m).validate("out_warehouse_id")),onSearch:Xe,onClear:ue},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(m).errors.out_warehouse_id},null,8,["messages"])]),c("div",CQe,[l(t(K),{class:F({"text-danger":t(m).invalid("remarks")})},{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.remarks")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(m).remarks,"onUpdate:modelValue":ne[15]||(ne[15]=ye=>t(m).remarks=ye),rows:"3",class:F({"border-danger":t(m).invalid("remarks")}),placeholder:t(a)("views.stock_adjustment.fields.remarks"),onChange:ne[16]||(ne[16]=ye=>t(m).validate("remarks"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(m).errors.remarks},null,8,["messages"])]),c("div",SQe,[l(t(K),{class:"pr-5"},{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.is_posted")),1)]),_:1}),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(m).is_posted,"onUpdate:modelValue":ne[17]||(ne[17]=ye=>t(m).is_posted=ye),type:"checkbox"},null,8,["modelValue"])]),_:1})])])])]),"card-items-2":f(()=>[c("div",IQe,[t(m).in_products.length===0?(L(),U("div",LQe,_(t(a)("components.data-list.data_not_found")),1)):(L(),U("div",$Qe,[(L(!0),U(ke,null,Fe($e.value,(ye,Ve)=>(L(),U("div",{key:Ve,class:"border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"},[c("div",AQe,[c("div",EQe,_(t(a)("views.stock_adjustment_in_product.page_title"))+" #"+_(Ve+1),1),c("div",TQe,[l(t(me),{type:"button",class:"text-xs text-slate-500 hover:text-primary",onClick:We=>Re(Ve)},{default:f(()=>[A(_(be.value[Ve]?"▲":"▼"),1)]),_:2},1032,["onClick"]),l(t(me),{type:"button",variant:"outline-secondary",onClick:We=>Be(Ve)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),c("div",PQe,[c("div",DQe,[l(t(K),{class:F({"text-danger":t(m).invalid(`in_products.${Ve}.qty`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.fields.qty")),1)]),_:2},1032,["class"]),l(t(Ta),{id:`in-product-qty-${Ve}`,modelValue:ye.qty,"onUpdate:modelValue":We=>ye.qty=We,onChange:We=>t(m).validate(`in_products.${Ve}.qty`),class:F(["text-right",{"border-danger":t(m).invalid(`in_products.${Ve}.qty`)}])},null,8,["id","modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(m).errors[`in_products.${Ve}.qty`]},null,8,["messages"]),c("div",RQe,_(ye.product_unit_unit_name),1)]),c("div",OQe,[l(t(K),{class:F({"text-danger":t(m).invalid(`in_products.${Ve}.product_unit_id`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.product")),1)]),_:2},1032,["class"]),c("div",VQe,[c("div",UQe,[c("div",FQe,_(ye.product_unit_product_name||"-"),1)]),l(t(me),{type:"button",variant:"outline-secondary",tabindex:"-1",class:"flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary",onClick:We=>Q(Ve)},{default:f(()=>[l(t(re),{icon:"Search",class:"w-4 h-4"})]),_:2},1032,["onClick"])]),l(t(_e),{messages:t(m).errors[`in_products.${Ve}.product_unit_id`]},null,8,["messages"]),c("div",jQe,_(ye.product_unit_product_code),1)]),c("div",HQe,[l(t(K),{class:F({"text-danger":t(m).invalid(`in_products.${Ve}.product_unit_conversion_value`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.fields.product_unit_conversion_value")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:ye.product_unit_conversion_value,"onUpdate:modelValue":We=>ye.product_unit_conversion_value=We,tabindex:"-1",onChange:We=>t(m).validate(`in_products.${Ve}.product_unit_conversion_value`),class:F(["text-right",{"border-danger":t(m).invalid(`in_products.${Ve}.product_unit_conversion_value`)}])},null,8,["modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(m).errors[`in_products.${Ve}.product_unit_conversion_value`]},null,8,["messages"]),c("div",NQe,_(ye.product_unit_base_unit_name),1)]),c("div",zQe,[l(t(K),{class:F({"text-danger":t(m).invalid(`in_products.${Ve}.product_unit_cogs`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.fields.product_unit_cogs")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:ye.product_unit_cogs,"onUpdate:modelValue":We=>ye.product_unit_cogs=We,onChange:We=>t(m).validate(`in_products.${Ve}.product_unit_cogs`),class:F(["text-right",{"border-danger":t(m).invalid(`in_products.${Ve}.product_unit_cogs`)}])},null,8,["modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(m).errors[`in_products.${Ve}.product_unit_cogs`]},null,8,["messages"]),ye.product_unit_conversion_value>1&&ye.product_unit_cogs&&ye.product_unit_base_unit_name?(L(),U("div",BQe,_(t(_a)((ye.product_unit_cogs/ye.product_unit_conversion_value).toFixed(2)))+" / "+_(ye.product_unit_base_unit_name),1)):Me("",!0)]),c("div",qQe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.fields.product_unit_total_cogs")),1)]),_:1}),l(t(Ta),{"model-value":ye.product_unit_total_cogs??0,readonly:"",tabindex:"-1",class:"text-right"},null,8,["model-value"])]),ye.is_use_serial_number?(L(),U("div",WQe,[c("div",GQe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.serial_number")),1)]),_:1}),l(t(me),{type:"button",size:"sm",variant:"outline-primary",onClick:We=>ze(Ve)},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-3 h-3 mr-1"}),A(" "+_(t(a)("components.buttons.create")),1)]),_:2},1032,["onClick"])]),ye.serials.length===0?(L(),U("div",ZQe,_(t(a)("components.data-list.data_not_found")),1)):(L(),U("div",KQe,[(L(!0),U(ke,null,Fe(ye.serials,(We,ga)=>(L(),U("div",{key:ga,class:"flex gap-2"},[l(t(Oe),{modelValue:We.serial,"onUpdate:modelValue":_t=>We.serial=_t,placeholder:t(a)("views.product.fields.serial_number")},null,8,["modelValue","onUpdate:modelValue","placeholder"]),l(t(me),{type:"button",variant:"outline-danger",onClick:_t=>qe(Ve,ga)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4"})]),_:2},1032,["onClick"])]))),128))]))])):Me("",!0),be.value[Ve]?(L(),U("div",XQe,[c("div",null,[l(t(K),{class:F({"text-danger":t(m).invalid(`in_products.${Ve}.remarks`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.fields.remarks")),1)]),_:2},1032,["class"]),l(t(la),{rows:"2",modelValue:t(m).in_products[Ve].remarks,"onUpdate:modelValue":We=>t(m).in_products[Ve].remarks=We,class:F({"border-danger":t(m).invalid(`in_products.${Ve}.remarks`)}),onChange:We=>t(m).validate(`in_products.${Ve}.remarks`)},null,8,["modelValue","onUpdate:modelValue","class","onChange"]),l(t(_e),{messages:t(m).errors[`in_products.${Ve}.remarks`]},null,8,["messages"])])])):Me("",!0)])]))),128))])),c("div",YQe,[l(t(K)),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:N},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.actions.create")),1)]),_:1})])])]),"card-items-3":f(()=>[c("div",QQe,[t(m).out_products.length===0?(L(),U("div",JQe,_(t(a)("components.data-list.data_not_found")),1)):(L(),U("div",eJe,[(L(!0),U(ke,null,Fe(Ke.value,(ye,Ve)=>(L(),U("div",{key:Ve,class:"border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"},[c("div",tJe,[c("div",aJe,_(t(a)("views.stock_adjustment_out_product.page_title"))+" #"+_(Ve+1),1),c("div",nJe,[l(t(me),{type:"button",class:"text-xs text-slate-500 hover:text-primary",onClick:We=>Ue(Ve)},{default:f(()=>[A(_(He.value[Ve]?"▲":"▼"),1)]),_:2},1032,["onClick"]),l(t(me),{type:"button",variant:"outline-secondary",onClick:We=>Jt(Ve)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),c("div",sJe,[c("div",oJe,[l(t(K),{class:F({"text-danger":t(m).invalid(`out_products.${Ve}.qty`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.fields.qty")),1)]),_:2},1032,["class"]),l(t(Ta),{id:`out-product-qty-${Ve}`,modelValue:ye.qty,"onUpdate:modelValue":We=>ye.qty=We,onChange:We=>t(m).validate(`out_products.${Ve}.qty`),class:F(["text-right",{"border-danger":t(m).invalid(`out_products.${Ve}.qty`)}])},null,8,["id","modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(m).errors[`out_products.${Ve}.qty`]},null,8,["messages"]),c("div",rJe,_(ye.product_unit_unit_name),1)]),c("div",iJe,[l(t(K),{class:F({"text-danger":t(m).invalid(`out_products.${Ve}.product_unit_id`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.table.cols.product")),1)]),_:2},1032,["class"]),c("div",lJe,[c("div",cJe,[c("div",dJe,_(ye.product_unit_product_name||"-"),1)]),l(t(me),{type:"button",variant:"outline-secondary",tabindex:"-1",class:"flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary",onClick:We=>yt(Ve)},{default:f(()=>[l(t(re),{icon:"Search",class:"w-4 h-4"})]),_:2},1032,["onClick"])]),l(t(_e),{messages:t(m).errors[`out_products.${Ve}.product_unit_id`]},null,8,["messages"]),c("div",uJe,_(ye.product_unit_product_code),1)]),c("div",pJe,[l(t(K),{class:F({"text-danger":t(m).invalid(`out_products.${Ve}.product_unit_conversion_value`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.fields.product_unit_conversion_value")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:ye.product_unit_conversion_value,"onUpdate:modelValue":We=>ye.product_unit_conversion_value=We,tabindex:"-1",onChange:We=>t(m).validate(`out_products.${Ve}.product_unit_conversion_value`),class:F(["text-right",{"border-danger":t(m).invalid(`out_products.${Ve}.product_unit_conversion_value`)}])},null,8,["modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(m).errors[`out_products.${Ve}.product_unit_conversion_value`]},null,8,["messages"]),c("div",hJe,_(ye.product_unit_base_unit_name),1)]),ye.is_use_serial_number?(L(),U("div",fJe,[c("div",mJe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.serial_number")),1)]),_:1}),l(t(me),{type:"button",size:"sm",variant:"outline-primary",onClick:We=>Mt(Ve)},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-3 h-3 mr-1"}),A(" "+_(t(a)("components.buttons.create")),1)]),_:2},1032,["onClick"])]),ye.serials.length===0?(L(),U("div",vJe,_(t(a)("components.data-list.data_not_found")),1)):(L(),U("div",yJe,[(L(!0),U(ke,null,Fe(ye.serials,(We,ga)=>(L(),U("div",{key:ga,class:"flex gap-2"},[l(t(Oe),{modelValue:We.serial,"onUpdate:modelValue":_t=>We.serial=_t,placeholder:t(a)("views.product.fields.serial_number")},null,8,["modelValue","onUpdate:modelValue","placeholder"]),l(t(me),{type:"button",variant:"outline-danger",onClick:_t=>Et(Ve,ga)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4"})]),_:2},1032,["onClick"])]))),128))]))])):Me("",!0),He.value[Ve]?(L(),U("div",_Je,[c("div",null,[l(t(K),{class:F({"text-danger":t(m).invalid(`out_products.${Ve}.remarks`)})},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.fields.remarks")),1)]),_:2},1032,["class"]),l(t(la),{rows:"2",modelValue:t(m).out_products[Ve].remarks,"onUpdate:modelValue":We=>t(m).out_products[Ve].remarks=We,class:F({"border-danger":t(m).invalid(`out_products.${Ve}.remarks`)}),onChange:We=>t(m).validate(`out_products.${Ve}.remarks`)},null,8,["modelValue","onUpdate:modelValue","class","onChange"]),l(t(_e),{messages:t(m).errors[`out_products.${Ve}.remarks`]},null,8,["messages"])])])):Me("",!0)])]))),128))])),c("div",gJe,[l(t(K)),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:lt},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.actions.create")),1)]),_:1})])])]),"card-items-button":f(()=>[c("div",kJe,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(m).validating||t(m).hasErrors},{default:f(()=>[t(m).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:q},{default:f(()=>[A(_(t(a)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"]),l(t($t),{size:"xl",open:g.value,onClose:ne[20]||(ne[20]=()=>{g.value=!1}),onAfterLeave:Ze},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",bJe,[c("div",wJe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.title")),1)]),_:1}),c("button",{type:"button",class:"text-slate-500 hover:text-danger",onClick:ne[18]||(ne[18]=ye=>g.value=!1)},[l(t(re),{icon:"X",class:"w-4 h-4"})])]),c("div",xJe,[l(t(Oe),{id:"product-unit-search-input",modelValue:v.value,"onUpdate:modelValue":ne[19]||(ne[19]=ye=>v.value=ye),type:"text",placeholder:t(a)("components.search-box.placeholder.search"),onKeyup:KA(he,["enter"])},null,8,["modelValue","placeholder"]),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:he,tabindex:"-1",disabled:T.value||!t(m).in_warehouse_id},{default:f(()=>[T.value?(L(),ge(t(re),{key:0,icon:"Loader",class:"w-4 h-4 animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.search")),1)],64))]),_:1},8,["disabled"])]),c("div",MJe,[c("table",CJe,[c("thead",SJe,[c("tr",null,[c("th",IJe,_(t(a)("views.product.table.cols.image")),1),c("th",LJe,_(t(a)("views.stock_adjustment_in_product.table.cols.product")),1),c("th",$Je,_(t(a)("views.stock_adjustment_in_product.table.cols.remaining_stock")),1),c("th",AJe,_(t(a)("views.product.table.cols.unit")),1),c("th",EJe,_(t(a)("views.product.fields.conversion_value")),1),c("th",TJe,_(t(a)("views.stock_adjustment_in_product.table.cols.product_unit_cogs")),1),PJe])]),c("tbody",null,[j.value.length===0?(L(),U("tr",DJe,[c("td",RJe,_(t(a)("components.data-list.data_not_found")),1)])):Me("",!0),(L(!0),U(ke,null,Fe(j.value,(ye,Ve)=>(L(),U("tr",{key:Ve,class:"border-t border-slate-200/60 dark:border-darkmode-400"},[c("td",OJe,[l(Eo,{"image-url":ye.product_image_url,"wrapper-class":"w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in","icon-class":"w-4 h-4 text-slate-400"},null,8,["image-url"])]),c("td",VJe,"["+_(ye.product_unit_code)+"] "+_(ye.product_name),1),c("td",UJe,_(t(_a)(ye.remaining_stock)),1),c("td",FJe,_(ye.unit_name),1),c("td",jJe,_(t(_a)(ye.conversion_value)),1),c("td",HJe,_(t(_a)(ye.cogs)),1),c("td",NJe,[l(t(me),{type:"button",variant:"primary",size:"sm",onClick:We=>Se(ye)},{default:f(()=>[A(_(t(a)("components.buttons.select")),1)]),_:2},1032,["onClick"])])]))),128))])])])])]),_:1})]),_:1},8,["open"]),l(t($t),{size:"xl",open:Le.value,onClose:ne[23]||(ne[23]=()=>{Le.value=!1}),onAfterLeave:ht},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",zJe,[c("div",BJe,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.table.title")),1)]),_:1}),c("button",{type:"button",class:"text-slate-500 hover:text-danger",onClick:ne[21]||(ne[21]=ye=>Le.value=!1)},[l(t(re),{icon:"X",class:"w-4 h-4"})])]),c("div",qJe,[l(t(Oe),{id:"product-unit-search-input",modelValue:de.value,"onUpdate:modelValue":ne[22]||(ne[22]=ye=>de.value=ye),type:"text",placeholder:t(a)("components.search-box.placeholder.search"),onKeyup:KA(it,["enter"])},null,8,["modelValue","placeholder"]),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:it,tabindex:"-1",disabled:J.value||!t(m).out_warehouse_id},{default:f(()=>[J.value?(L(),ge(t(re),{key:0,icon:"Loader",class:"w-4 h-4 animate-spin"})):(L(),U(ke,{key:1},[A(_(t(a)("components.buttons.search")),1)],64))]),_:1},8,["disabled"])]),c("div",WJe,[c("table",GJe,[c("thead",ZJe,[c("tr",null,[c("th",KJe,_(t(a)("views.product.table.cols.image")),1),c("th",XJe,_(t(a)("views.stock_adjustment_out_product.table.cols.product")),1),c("th",YJe,_(t(a)("views.stock_adjustment_out_product.table.cols.remaining_stock")),1),c("th",QJe,_(t(a)("views.product.table.cols.unit")),1),c("th",JJe,_(t(a)("views.product.fields.conversion_value")),1),c("th",eet,_(t(a)("views.stock_adjustment_out_product.table.cols.product_unit_cogs")),1),tet])]),c("tbody",null,[G.value.length===0?(L(),U("tr",aet,[c("td",net,_(t(a)("components.data-list.data_not_found")),1)])):Me("",!0),(L(!0),U(ke,null,Fe(G.value,(ye,Ve)=>(L(),U("tr",{key:Ve,class:"border-t border-slate-200/60 dark:border-darkmode-400"},[c("td",set,[l(Eo,{"image-url":ye.product_image_url,"wrapper-class":"w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in","icon-class":"w-4 h-4 text-slate-400"},null,8,["image-url"])]),c("td",oet,"["+_(ye.product_unit_code)+"] "+_(ye.product_name),1),c("td",ret,_(t(_a)(ye.remaining_stock)),1),c("td",iet,_(ye.unit_name),1),c("td",cet,_(t(_a)(ye.conversion_value)),1),c("td",det,_(t(_a)(ye.cogs)),1),c("td",uet,[l(t(me),{type:"button",variant:"primary",size:"sm",onClick:We=>Pe(ye)},{default:f(()=>[A(_(t(a)("components.buttons.select")),1)]),_:2},1032,["onClick"])])]))),128))])])])])]),_:1})]),_:1},8,["open"])],32))}}),het={class:"p-5"},fet={class:"grid grid-cols-12 gap-4 gap-y-3"},met={class:"col-span-12 lg:col-span-4 md:col-span-6"},vet=c("br",null,null,-1),yet={class:"col-span-12 lg:col-span-4 md:col-span-6"},_et=c("br",null,null,-1),get={class:"p-5"},ket={class:"grid grid-cols-12 gap-4 gap-y-3"},bet={class:"col-span-12 lg:col-span-4 md:col-span-6"},wet={class:"col-span-12 lg:col-span-4 md:col-span-6"},xet={class:"col-span-12 lg:col-span-4"},Met={class:"col-span-12 lg:col-span-6"},Cet={class:"col-span-12 lg:col-span-6"},Iet={class:"col-span-12"},Let={class:"col-span-12"},$et={class:"p-5"},Aet={key:0,class:"text-slate-500 text-sm"},Eet={key:1,class:"space-y-5"},Tet={class:"flex items-center justify-between mb-3"},Pet={class:"font-medium text-sm"},Det={class:"flex items-center gap-2"},Ret={class:"grid grid-cols-12 gap-4 gap-y-3"},Oet={class:"col-span-12 lg:col-span-2"},Vet={class:"text-sm text-slate-500 text-right font-bold mt-1"},Uet={class:"col-span-12 lg:col-span-5"},Fet={class:"flex items-center gap-2"},jet={class:"flex-1"},Het={class:"form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"},Net={class:"text-sm text-slate-500 font-bold mt-1"},zet={class:"col-span-12 lg:col-span-1"},Bet={class:"text-sm text-slate-500 text-right font-bold mt-1"},qet={class:"col-span-12 lg:col-span-2"},Wet={key:0,class:"text-sm text-slate-500 text-right font-bold mt-1"},Get={class:"col-span-12 lg:col-span-2"},Zet={key:0,class:"col-span-12"},Ket={class:"flex items-center justify-between mb-2"},Xet={key:0,class:"text-slate-500 text-xs italic"},Yet={key:1,class:"grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3"},Qet={key:1,class:"col-span-12 space-y-3"},Jet={class:"flex items-center justify-between mt-4"},ett={class:"p-5"},ttt={key:0,class:"text-slate-500 text-sm"},att={key:1,class:"space-y-5"},ntt={class:"flex items-center justify-between mb-3"},stt={class:"font-medium text-sm"},ott={class:"flex items-center gap-2"},rtt={class:"grid grid-cols-12 gap-4 gap-y-3"},itt={class:"col-span-12 lg:col-span-2"},ltt={class:"text-sm text-slate-500 text-right font-bold mt-1"},ctt={class:"col-span-12 lg:col-span-5"},dtt={class:"flex items-center gap-2"},utt={class:"flex-1"},ptt={class:"form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"},htt={class:"text-sm text-slate-500 font-bold mt-1"},ftt={class:"col-span-12 lg:col-span-3"},mtt={class:"text-sm text-slate-500 text-right font-bold mt-1"},vtt={key:0,class:"col-span-12"},ytt={class:"flex items-center justify-between mb-2"},_tt={key:0,class:"text-slate-500 text-xs italic"},gtt={key:1,class:"grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3"},ktt={key:1,class:"col-span-12 space-y-3"},btt={class:"flex items-center justify-between mt-4"},wtt={class:"flex gap-4 p-5"},xtt={class:"p-5"},Mtt={class:"flex items-center justify-between mb-4"},Ctt={class:"flex items-center gap-2 mb-4"},Stt={class:"max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md"},Itt={class:"min-w-full text-sm"},Ltt={class:"bg-slate-100 dark:bg-darkmode-600"},$tt={class:"px-3 py-2 text-left"},Att={class:"px-3 py-2 text-left"},Ett={class:"px-3 py-2 text-left"},Ttt={class:"px-3 py-2 text-right"},Ptt={class:"px-3 py-2 text-right"},Dtt=c("th",{class:"px-3 py-2"},null,-1),Rtt={key:0},Ott={colspan:"6",class:"px-3 py-4 text-center text-slate-500"},Vtt={class:"px-3 py-2"},Utt={class:"px-3 py-2"},Ftt={class:"px-3 py-2"},jtt={class:"px-3 py-2 text-right"},Htt={class:"px-3 py-2 text-right"},Ntt={class:"px-3 py-2 text-right"},ztt=Ce({__name:"StockAdjustmentEdit",emits:["mode-state","loading-state","update-profile","show-alertplaceholder"],setup(n,{emit:e}){const a=O(null),s=O([]),o=O([]),{t:r}=tt(),i=ct(),u=Sa(),h=zt(),m=e,p=ee(()=>h.isUserLocationSelected),b=ee(()=>h.selectedUserLocation),x=new DP,w=x.useStockAdjustmentEditForm(u.params.ulid),$=new Ro,D=new co,V=new ur,R=new Dt,E=O(null),P=O(""),S=ee(()=>(E.value??[]).map(q=>({value:q.code,label:q.name}))),C=O(null),M=O(""),g=ee(()=>(C.value??[]).map(q=>({value:q.code,label:q.name}))),v=O(null),T=O(""),j=ee(()=>(v.value??[]).map(q=>({value:q.code,label:q.name}))),B=O(!1),oe=O(""),be=O(!1),$e=O([]),Le=O(null),de=O(null),J=O(null),G=O(null),ce=O("in"),Ee=O([{title:"views.stock_adjustment.field_groups.company_info",state:fe.Expanded},{title:"views.stock_adjustment.field_groups.stock_adjustment_data",state:fe.Expanded},{title:"views.stock_adjustment.field_groups.in_products",state:fe.Collapsed},{title:"views.stock_adjustment.field_groups.out_products",state:fe.Collapsed},{title:"",state:fe.Hidden,id:"button"}]),He=ee(()=>w.in_products),Ke=ee(()=>w.out_products),pt=q=>{var ne;const ve=(q==null?void 0:q.product_images)??[];if(ve.length===0)return null;const te=ve.find(ye=>ye==null?void 0:ye.is_main);return te!=null&&te.url?te.url:((ne=ve[0])==null?void 0:ne.url)??null},ut=q=>{Ee.value[q].state===fe.Collapsed?Ee.value[q].state=fe.Expanded:Ee.value[q].state===fe.Expanded&&(Ee.value[q].state=fe.Collapsed)};dt(()=>w.in_products,q=>{q&&q.forEach(ve=>{const te=Number(ve.qty??0),ne=Number(ve.product_unit_cogs??0);ve.product_unit_total_cogs=te*ne})},{deep:!0}),dt(B,q=>{q&&En(()=>{const ve=document.getElementById("product-unit-search-input");ve==null||ve.focus()})}),dt(w,ma.debounce(q=>{R.setLastEntity("STOCK_ADJUSTMENT_EDIT",q.data())},500),{deep:!0}),at(async()=>{if(m("mode-state",xe.FORM_EDIT),!p.value){i.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}m("loading-state",!0);try{await ft(),await Promise.all([Ae(),ie(),ue()])}finally{m("loading-state",!1)}});const ft=async()=>{var te,ne,ye;const q=u.params.ulid;if(!q)return;const ve=await x.read(q);if(ve.success&&ve.data){const Ve=ve.data;a.value=Ve;const We=(Ve.in_products||[]).map(_t=>{const Wt=_t.product_unit,oa=Wt==null?void 0:Wt.unit,Oa=Wt==null?void 0:Wt.product;return{id:_t.id??null,qty:_t.qty,product_unit_id:(Wt==null?void 0:Wt.id)??"",product_unit_product_code:(Wt==null?void 0:Wt.code)??"",product_unit_product_name:(Oa==null?void 0:Oa.name)??"",product_unit_unit_name:(oa==null?void 0:oa.name)??"",product_unit_base_unit_name:"",product_unit_conversion_value:_t.product_unit_conversion_value,product_unit_cogs:_t.product_unit_cogs,product_unit_total_cogs:_t.product_unit_total_cogs,remarks:_t.remarks??"",is_use_serial_number:(Oa==null?void 0:Oa.is_use_serial_number)??!1,serials:_t.serials?_t.serials.map(Cn=>({id:Cn.id??null,serial:Cn.serial})):[],delete_serial_ids:[]}}),ga=(Ve.out_products||[]).map(_t=>{const Wt=_t.product_unit,oa=Wt==null?void 0:Wt.unit,Oa=Wt==null?void 0:Wt.product;return{id:_t.id??null,qty:_t.qty,product_unit_id:(Wt==null?void 0:Wt.id)??"",product_unit_product_code:(Wt==null?void 0:Wt.code)??"",product_unit_product_name:(Oa==null?void 0:Oa.name)??"",product_unit_unit_name:(oa==null?void 0:oa.name)??"",product_unit_base_unit_name:"",product_unit_conversion_value:_t.product_unit_conversion_value,remarks:_t.remarks??"",is_use_serial_number:(Oa==null?void 0:Oa.is_use_serial_number)??!1,serials:_t.serials?_t.serials.map(Cn=>({id:Cn.id??null,serial:Cn.serial})):[],delete_serial_ids:[]}});w.setData({company_id:Ve.company.id,branch_id:Ve.branch.id,code:Ve.code,date:Ya(Ve.date,"YYYY-MM-DD HH:mm:ss"),category_id:((te=Ve.category)==null?void 0:te.id)??"",in_warehouse_id:((ne=Ve.in_warehouse)==null?void 0:ne.id)??"",out_warehouse_id:((ye=Ve.out_warehouse)==null?void 0:ye.id)??"",remarks:Ve.remarks??"",is_posted:Ve.is_posted,delete_in_product_ids:[],in_products:We,delete_out_product_ids:[],out_products:ga}),s.value=We.map(()=>!1),o.value=ga.map(()=>!1),We.length>0&&(Ee.value=Ee.value.map(_t=>_t.title==="views.stock_adjustment.field_groups.in_products"?{..._t,state:fe.Expanded}:_t)),ga.length>0&&(Ee.value=Ee.value.map(_t=>_t.title==="views.stock_adjustment.field_groups.out_products"?{..._t,state:fe.Expanded}:_t))}},kt=()=>{w.forgetError("code"),w.code==="_AUTO_"?w.setData({code:""}):w.setData({code:"_AUTO_"})},Ae=async(q="")=>{var te,ne;if(!b.value)return;const ve=await $.readAnyGet({with_trashed:!1,company_id:b.value.company.id,search:q,include_id:(ne=(te=a.value)==null?void 0:te.category)==null?void 0:ne.id,refresh:!1,limit:20});ve.success&&ve.data&&(E.value=ve.data.data.map(ye=>({code:ye.id,name:ye.name})))},Xe=()=>{w.setData({category_id:""}),Ae(""),w.forgetError("category_id"),w.validate("category_id")},ie=async(q="")=>{var te,ne;if(!b.value)return;const ve=await D.readAnyGet({with_trashed:!1,company_id:b.value.company.id,branch_id:b.value.branch.id,search:q,include_id:(ne=(te=a.value)==null?void 0:te.in_warehouse)==null?void 0:ne.id,status:void 0,refresh:!1,limit:20});ve.success&&ve.data&&(C.value=ve.data.data.map(ye=>({code:ye.id,name:ye.name})))},Y=()=>{w.setData({in_warehouse_id:""}),ie(""),w.forgetError("in_warehouse_id"),w.validate("in_warehouse_id")},ue=async(q="")=>{var te,ne;if(!b.value)return;const ve=await D.readAnyGet({with_trashed:!1,company_id:b.value.company.id,branch_id:b.value.branch.id,search:q,include_id:(ne=(te=a.value)==null?void 0:te.out_warehouse)==null?void 0:ne.id,status:void 0,refresh:!1,limit:20});ve.success&&ve.data&&(v.value=ve.data.data.map(ye=>({code:ye.id,name:ye.name})))},pe=()=>{w.setData({out_warehouse_id:""}),ue(""),w.forgetError("out_warehouse_id"),w.validate("out_warehouse_id")},H=q=>{const ve={product_unit_id:q.product_unit_id,product_unit_product_code:q.product_unit_code,product_unit_product_name:q.product_name,product_unit_unit_name:q.unit_name,product_unit_base_unit_name:q.conversion_value!=1?q.base_unit_name:"",product_unit_conversion_value:q.conversion_value,product_unit_cogs:q.cogs,is_use_serial_number:q.is_use_serial_number,serials:[]};let te;if(Le.value===null){const ne={id:null,qty:0,remarks:"",delete_serial_ids:[],...ve};w.in_products.push(ne),s.value.push(!1),te=w.in_products.length-1}else{const ne=Le.value,ye=w.in_products[ne];w.in_products[ne]={...ye,...ve},te=ne}B.value=!1,Le.value=null,de.value=te,Object.keys(w.errors).forEach(ne=>{ne.startsWith("in_products.")&&w.forgetError(ne)})},N=q=>{const ve={product_unit_id:q.product_unit_id,product_unit_product_code:q.product_unit_code,product_unit_product_name:q.product_name,product_unit_unit_name:q.unit_name,product_unit_base_unit_name:q.conversion_value!=1?q.base_unit_name:"",product_unit_conversion_value:q.conversion_value,is_use_serial_number:q.is_use_serial_number,serials:[]};let te;if(J.value===null){const ne={id:null,qty:0,remarks:"",delete_serial_ids:[],...ve};w.out_products.push(ne),o.value.push(!1),te=w.out_products.length-1}else{const ne=J.value,ye=w.out_products[ne];w.out_products[ne]={...ye,...ve},te=ne}B.value=!1,J.value=null,G.value=te,Object.keys(w.errors).forEach(ne=>{ne.startsWith("out_products.")&&w.forgetError(ne)})},Q=q=>ce.value==="out"?N(q):H(q),he=()=>{const q=de.value,ve=G.value;de.value=null,G.value=null,!(q===null&&ve===null)&&En(()=>{let te=null;q!==null?te=document.getElementById(`in-product-qty-${q}`):ve!==null&&(te=document.getElementById(`out-product-qty-${ve}`)),te==null||te.scrollIntoView({behavior:"smooth",block:"center"}),te==null||te.focus(),te==null||te.select()})},Se=async()=>{if(!b.value)return;be.value=!0;const q=await V.readAnyGet({with_trashed:!1,company_id:b.value.company.id,search:oe.value,category_id:void 0,brand_id:void 0,is_taxable:void 0,vat_rate:void 0,is_price_include_vat:void 0,is_use_serial_number:void 0,is_expirable:void 0,type:void 0,status:void 0,include_id:void 0,refresh:!1,limit:20});if(be.value=!1,q.success&&q.data){const ve=q.data.data;$e.value=ve.flatMap(te=>{const ne=te.product_units||[];let ye=ne.find(We=>We.is_base);ye||(ye=ne.find(We=>Number(We.conversion_value)===1)),ye||(ye=ne.find(We=>We.is_primary_unit)),!ye&&ne.length>0&&(ye=ne[0]);const Ve=ye&&ye.unit?ye.unit.name:"";return ne.map(We=>({product_id:te.id,product_code:te.code,product_name:te.name,product_image_url:pt(te),product_unit_id:We.id,product_unit_code:We.code,unit_name:We.unit?We.unit.name:"",base_unit_name:Ve,conversion_value:Number(We.conversion_value),cogs:Number(We.price),is_use_serial_number:te.is_use_serial_number}))})}else $e.value=[]},Re=()=>{oe.value="",$e.value=[],be.value=!1,ce.value="in",Le.value=null,B.value=!0},Ze=q=>{oe.value="",$e.value=[],be.value=!1,ce.value="in",Le.value=q,B.value=!0},ze=q=>{const ve=s.value[q]??!1;s.value[q]=!ve},qe=q=>{const te=w.in_products[q];te&&te.serials.push({id:null,serial:""})},Be=(q,ve)=>{const ne=w.in_products[q];if(!ne)return;const ye=ne.serials[ve];ye.id&&ne.delete_serial_ids.push(ye.id),ne.serials.splice(ve,1)},lt=q=>{const ve=w.in_products,te=ve[q];te&&te.id&&w.delete_in_product_ids.push(te.id),ve.splice(q,1),s.value.splice(q,1),Object.keys(w.errors).forEach(ne=>{ne.startsWith("in_products.")&&w.forgetError(ne)})},yt=()=>{oe.value="",$e.value=[],be.value=!1,ce.value="out",J.value=null,B.value=!0},it=q=>{oe.value="",$e.value=[],be.value=!1,ce.value="out",J.value=q,B.value=!0},Pe=q=>{const ve=o.value[q]??!1;o.value=[...o.value.slice(0,q),!ve,...o.value.slice(q+1)]},Ue=q=>{const te=w.out_products[q];te&&te.serials.push({id:null,serial:""})},ht=(q,ve)=>{const ne=w.out_products[q];if(!ne)return;const ye=ne.serials[ve];ye.id&&ne.delete_serial_ids.push(ye.id),ne.serials.splice(ve,1)},Mt=q=>{const ve=w.out_products,te=ve[q];te&&te.id&&w.delete_out_product_ids.push(te.id),ve.splice(q,1),o.value.splice(q,1),Object.keys(w.errors).forEach(ne=>{ne.startsWith("out_products.")&&w.forgetError(ne)})},Et=q=>{const ve=document.getElementById(q);ve&&ve.scrollIntoView({behavior:"smooth",block:"center"})},Jt=async()=>{w.reset(),w.setErrors({}),s.value=[],o.value=[],await ft()},ae=(q,ve,te)=>{m("show-alertplaceholder",{alertType:q,title:ve,alertList:te})},W=async()=>{if(w.hasErrors){const We=Object.keys(w.errors)[0];We&&Et(We);return}const q=w.in_products,ve=q.map(We=>({id:We.id,qty:We.qty,product_unit_id:We.product_unit_id,product_unit_conversion_value:We.product_unit_conversion_value,product_unit_cogs:We.product_unit_cogs,remarks:We.remarks,delete_serial_ids:We.delete_serial_ids,serials:We.serials.map(ga=>({id:ga.id,serial:ga.serial}))})),te=w.out_products,ne=te.map(We=>({id:We.id,qty:We.qty,product_unit_id:We.product_unit_id,product_unit_conversion_value:We.product_unit_conversion_value,remarks:We.remarks,delete_serial_ids:We.delete_serial_ids,serials:We.serials.map(ga=>({id:ga.id,serial:ga.serial}))})),ye=[...q],Ve=[...te];w.in_products=ve,w.out_products=ne,m("loading-state",!0);try{await w.submit(),ae("hidden","",null),m("update-profile"),i.push({name:"side-menu-stock-adjustment-list"})}catch(We){w.in_products=ye,w.out_products=Ve;const ga=ln(We);ae("danger","",ga)}finally{m("loading-state",!1)}};return(q,ve)=>(L(),U("form",{id:"stockAdjustmentForm",onSubmit:Rt(W,["prevent"])},[l(t(ba),{cards:Ee.value,"using-side-tab":!1,onHandleExpandCard:ut},{"card-items-0":f(()=>[c("div",het,[c("div",fet,[c("div",met,[l(t(K),null,{default:f(()=>[A(_(b.value.company.code)+" ",1),vet,A(" "+_(b.value.company.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(w).company_id,"onUpdate:modelValue":ve[0]||(ve[0]=te=>t(w).company_id=te)},null,8,["modelValue"])]),c("div",yet,[l(t(K),null,{default:f(()=>[A(_(b.value.branch.code)+" ",1),_et,A(" "+_(b.value.branch.name),1)]),_:1}),l(t(Oe),{type:"hidden",modelValue:t(w).branch_id,"onUpdate:modelValue":ve[1]||(ve[1]=te=>t(w).branch_id=te)},null,8,["modelValue"])])])])]),"card-items-1":f(()=>[c("div",get,[c("div",ket,[c("div",bet,[l(t(K),{class:F({"text-danger":t(w).invalid("code")})},{default:f(()=>[A(_(t(r)("views.stock_adjustment.fields.code")),1)]),_:1},8,["class"]),l(t(wa),{modelValue:t(w).code,"onUpdate:modelValue":ve[2]||(ve[2]=te=>t(w).code=te),class:F({"border-danger":t(w).invalid("code")}),placeholder:t(r)("views.stock_adjustment.fields.code"),onSetAuto:kt,onChange:ve[3]||(ve[3]=te=>t(w).validate("code"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.code},null,8,["messages"])]),c("div",wet,[l(t(K),{class:F({"text-danger":t(w).invalid("date")})},{default:f(()=>[A(_(t(r)("views.stock_adjustment.fields.date")),1)]),_:1},8,["class"]),l(t(yz),{modelValue:t(w).date,"onUpdate:modelValue":ve[4]||(ve[4]=te=>t(w).date=te),class:F({"border-danger":t(w).invalid("date")}),placeholder:t(r)("views.stock_adjustment.fields.date"),onChange:ve[5]||(ve[5]=te=>t(w).validate("date"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.date},null,8,["messages"])]),c("div",xet,[l(t(K),{class:F({"text-danger":t(w).invalid("category_id")})},{default:f(()=>[A(_(t(r)("views.stock_adjustment.fields.category_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(w).category_id,"onUpdate:modelValue":ve[6]||(ve[6]=te=>t(w).category_id=te),search:P.value,"onUpdate:search":ve[7]||(ve[7]=te=>P.value=te),options:S.value,placeholder:t(r)("components.dropdown.placeholder"),class:F({"border-danger":t(w).invalid("category_id")}),onChange:ve[8]||(ve[8]=te=>t(w).validate("category_id")),onSearch:Ae,onClear:Xe},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(w).errors.category_id},null,8,["messages"])]),c("div",Met,[l(t(K),{class:F({"text-danger":t(w).invalid("in_warehouse_id")})},{default:f(()=>[A(_(t(r)("views.stock_adjustment.fields.in_warehouse_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(w).in_warehouse_id,"onUpdate:modelValue":ve[9]||(ve[9]=te=>t(w).in_warehouse_id=te),search:M.value,"onUpdate:search":ve[10]||(ve[10]=te=>M.value=te),options:g.value,placeholder:t(r)("components.dropdown.placeholder"),class:F({"border-danger":t(w).invalid("in_warehouse_id")}),onChange:ve[11]||(ve[11]=te=>t(w).validate("in_warehouse_id")),onSearch:ie,onClear:Y},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(w).errors.in_warehouse_id},null,8,["messages"])]),c("div",Cet,[l(t(K),{class:F({"text-danger":t(w).invalid("out_warehouse_id")})},{default:f(()=>[A(_(t(r)("views.stock_adjustment.fields.out_warehouse_id")),1)]),_:1},8,["class"]),l(t(Bt),{modelValue:t(w).out_warehouse_id,"onUpdate:modelValue":ve[12]||(ve[12]=te=>t(w).out_warehouse_id=te),search:T.value,"onUpdate:search":ve[13]||(ve[13]=te=>T.value=te),options:j.value,placeholder:t(r)("components.dropdown.placeholder"),class:F({"border-danger":t(w).invalid("out_warehouse_id")}),onChange:ve[14]||(ve[14]=te=>t(w).validate("out_warehouse_id")),onSearch:ue,onClear:pe},null,8,["modelValue","search","options","placeholder","class"]),l(t(_e),{messages:t(w).errors.out_warehouse_id},null,8,["messages"])]),c("div",Iet,[l(t(K),{class:F({"text-danger":t(w).invalid("remarks")})},{default:f(()=>[A(_(t(r)("views.stock_adjustment.fields.remarks")),1)]),_:1},8,["class"]),l(t(la),{modelValue:t(w).remarks,"onUpdate:modelValue":ve[15]||(ve[15]=te=>t(w).remarks=te),rows:"3",class:F({"border-danger":t(w).invalid("remarks")}),placeholder:t(r)("views.stock_adjustment.fields.remarks"),onChange:ve[16]||(ve[16]=te=>t(w).validate("remarks"))},null,8,["modelValue","class","placeholder"]),l(t(_e),{messages:t(w).errors.remarks},null,8,["messages"])]),c("div",Let,[l(t(K),{class:"pr-5"},{default:f(()=>[A(_(t(r)("views.stock_adjustment.fields.is_posted")),1)]),_:1}),l(t(wt),null,{default:f(()=>[l(t(wt).Input,{modelValue:t(w).is_posted,"onUpdate:modelValue":ve[17]||(ve[17]=te=>t(w).is_posted=te),type:"checkbox"},null,8,["modelValue"])]),_:1})])])])]),"card-items-2":f(()=>[c("div",$et,[t(w).in_products.length===0?(L(),U("div",Aet,_(t(r)("components.data-list.data_not_found")),1)):(L(),U("div",Eet,[(L(!0),U(ke,null,Fe(He.value,(te,ne)=>(L(),U("div",{key:ne,class:"border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"},[c("div",Tet,[c("div",Pet,_(t(r)("views.stock_adjustment_in_product.page_title"))+" #"+_(ne+1),1),c("div",Det,[l(t(me),{type:"button",class:"text-xs text-slate-500 hover:text-primary",onClick:ye=>ze(ne)},{default:f(()=>[A(_(s.value[ne]?"▲":"▼"),1)]),_:2},1032,["onClick"]),l(t(me),{type:"button",variant:"outline-secondary",onClick:ye=>lt(ne)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),c("div",Ret,[c("div",Oet,[l(t(K),{class:F({"text-danger":t(w).invalid(`in_products.${ne}.qty`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_in_product.fields.qty")),1)]),_:2},1032,["class"]),l(t(Ta),{id:`in-product-qty-${ne}`,modelValue:te.qty,"onUpdate:modelValue":ye=>te.qty=ye,onChange:ye=>t(w).validate(`in_products.${ne}.qty`),class:F(["text-right",{"border-danger":t(w).invalid(`in_products.${ne}.qty`)}])},null,8,["id","modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(w).errors[`in_products.${ne}.qty`]},null,8,["messages"]),c("div",Vet,_(te.product_unit_unit_name),1)]),c("div",Uet,[l(t(K),{class:F({"text-danger":t(w).invalid(`in_products.${ne}.product_unit_id`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_in_product.table.cols.product")),1)]),_:2},1032,["class"]),c("div",Fet,[c("div",jet,[c("div",Het,_(te.product_unit_product_name||"-"),1)]),l(t(me),{type:"button",variant:"outline-secondary",tabindex:"-1",class:"flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary",onClick:ye=>Ze(ne)},{default:f(()=>[l(t(re),{icon:"Search",class:"w-4 h-4"})]),_:2},1032,["onClick"])]),l(t(_e),{messages:t(w).errors[`in_products.${ne}.product_unit_id`]},null,8,["messages"]),c("div",Net,_(te.product_unit_product_code),1)]),c("div",zet,[l(t(K),{class:F({"text-danger":t(w).invalid(`in_products.${ne}.product_unit_conversion_value`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_in_product.fields.product_unit_conversion_value")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:te.product_unit_conversion_value,"onUpdate:modelValue":ye=>te.product_unit_conversion_value=ye,tabindex:"-1",onChange:ye=>t(w).validate(`in_products.${ne}.product_unit_conversion_value`),class:F(["text-right",{"border-danger":t(w).invalid(`in_products.${ne}.product_unit_conversion_value`)}])},null,8,["modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(w).errors[`in_products.${ne}.product_unit_conversion_value`]},null,8,["messages"]),c("div",Bet,_(te.product_unit_base_unit_name),1)]),c("div",qet,[l(t(K),{class:F({"text-danger":t(w).invalid(`in_products.${ne}.product_unit_cogs`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_in_product.fields.product_unit_cogs")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:te.product_unit_cogs,"onUpdate:modelValue":ye=>te.product_unit_cogs=ye,onChange:ye=>t(w).validate(`in_products.${ne}.product_unit_cogs`),class:F(["text-right",{"border-danger":t(w).invalid(`in_products.${ne}.product_unit_cogs`)}])},null,8,["modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(w).errors[`in_products.${ne}.product_unit_cogs`]},null,8,["messages"]),te.product_unit_conversion_value>1&&te.product_unit_cogs&&te.product_unit_base_unit_name?(L(),U("div",Wet,_(t(_a)((te.product_unit_cogs/te.product_unit_conversion_value).toFixed(2)))+" / "+_(te.product_unit_base_unit_name),1)):Me("",!0)]),c("div",Get,[l(t(K),null,{default:f(()=>[A(_(t(r)("views.stock_adjustment_in_product.fields.product_unit_total_cogs")),1)]),_:1}),l(t(Ta),{"model-value":te.product_unit_total_cogs??0,readonly:"",tabindex:"-1",class:"text-right"},null,8,["model-value"])]),te.is_use_serial_number?(L(),U("div",Zet,[c("div",Ket,[l(t(K),null,{default:f(()=>[A(_(t(r)("views.product.fields.serial_number")),1)]),_:1}),l(t(me),{type:"button",size:"sm",variant:"outline-primary",onClick:ye=>qe(ne)},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-3 h-3 mr-1"}),A(" "+_(t(r)("components.buttons.create")),1)]),_:2},1032,["onClick"])]),te.serials.length===0?(L(),U("div",Xet,_(t(r)("components.data-list.data_not_found")),1)):(L(),U("div",Yet,[(L(!0),U(ke,null,Fe(te.serials,(ye,Ve)=>(L(),U("div",{key:Ve,class:"flex gap-2"},[l(t(Oe),{modelValue:ye.serial,"onUpdate:modelValue":We=>ye.serial=We,placeholder:t(r)("views.product.fields.serial_number")},null,8,["modelValue","onUpdate:modelValue","placeholder"]),l(t(me),{type:"button",variant:"outline-danger",onClick:We=>Be(ne,Ve)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4"})]),_:2},1032,["onClick"])]))),128))]))])):Me("",!0),s.value[ne]?(L(),U("div",Qet,[c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid(`in_products.${ne}.remarks`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_in_product.fields.remarks")),1)]),_:2},1032,["class"]),l(t(la),{rows:"2",modelValue:t(w).in_products[ne].remarks,"onUpdate:modelValue":ye=>t(w).in_products[ne].remarks=ye,class:F({"border-danger":t(w).invalid(`in_products.${ne}.remarks`)}),onChange:ye=>t(w).validate(`in_products.${ne}.remarks`)},null,8,["modelValue","onUpdate:modelValue","class","onChange"]),l(t(_e),{messages:t(w).errors[`in_products.${ne}.remarks`]},null,8,["messages"])])])):Me("",!0)])]))),128))])),c("div",Jet,[l(t(K)),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:Re},{default:f(()=>[A(_(t(r)("views.stock_adjustment_in_product.actions.create")),1)]),_:1})])])]),"card-items-3":f(()=>[c("div",ett,[t(w).out_products.length===0?(L(),U("div",ttt,_(t(r)("components.data-list.data_not_found")),1)):(L(),U("div",att,[(L(!0),U(ke,null,Fe(Ke.value,(te,ne)=>(L(),U("div",{key:ne,class:"border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"},[c("div",ntt,[c("div",stt,_(t(r)("views.stock_adjustment_out_product.page_title"))+" #"+_(ne+1),1),c("div",ott,[l(t(me),{type:"button",class:"text-xs text-slate-500 hover:text-primary",onClick:ye=>Pe(ne)},{default:f(()=>[A(_(o.value[ne]?"▲":"▼"),1)]),_:2},1032,["onClick"]),l(t(me),{type:"button",variant:"outline-secondary",onClick:ye=>Mt(ne)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),c("div",rtt,[c("div",itt,[l(t(K),{class:F({"text-danger":t(w).invalid(`out_products.${ne}.qty`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_out_product.fields.qty")),1)]),_:2},1032,["class"]),l(t(Ta),{id:`out-product-qty-${ne}`,modelValue:te.qty,"onUpdate:modelValue":ye=>te.qty=ye,onChange:ye=>t(w).validate(`out_products.${ne}.qty`),class:F(["text-right",{"border-danger":t(w).invalid(`out_products.${ne}.qty`)}])},null,8,["id","modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(w).errors[`out_products.${ne}.qty`]},null,8,["messages"]),c("div",ltt,_(te.product_unit_unit_name),1)]),c("div",ctt,[l(t(K),{class:F({"text-danger":t(w).invalid(`out_products.${ne}.product_unit_id`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_out_product.table.cols.product")),1)]),_:2},1032,["class"]),c("div",dtt,[c("div",utt,[c("div",ptt,_(te.product_unit_product_name||"-"),1)]),l(t(me),{type:"button",variant:"outline-secondary",tabindex:"-1",class:"flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary",onClick:ye=>it(ne)},{default:f(()=>[l(t(re),{icon:"Search",class:"w-4 h-4"})]),_:2},1032,["onClick"])]),l(t(_e),{messages:t(w).errors[`out_products.${ne}.product_unit_id`]},null,8,["messages"]),c("div",htt,_(te.product_unit_product_code),1)]),c("div",ftt,[l(t(K),{class:F({"text-danger":t(w).invalid(`out_products.${ne}.product_unit_conversion_value`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_out_product.fields.product_unit_conversion_value")),1)]),_:2},1032,["class"]),l(t(Ta),{modelValue:te.product_unit_conversion_value,"onUpdate:modelValue":ye=>te.product_unit_conversion_value=ye,tabindex:"-1",onChange:ye=>t(w).validate(`out_products.${ne}.product_unit_conversion_value`),class:F(["text-right",{"border-danger":t(w).invalid(`out_products.${ne}.product_unit_conversion_value`)}])},null,8,["modelValue","onUpdate:modelValue","onChange","class"]),l(t(_e),{messages:t(w).errors[`out_products.${ne}.product_unit_conversion_value`]},null,8,["messages"]),c("div",mtt,_(te.product_unit_base_unit_name),1)]),te.is_use_serial_number?(L(),U("div",vtt,[c("div",ytt,[l(t(K),null,{default:f(()=>[A(_(t(r)("views.product.fields.serial_number")),1)]),_:1}),l(t(me),{type:"button",size:"sm",variant:"outline-primary",onClick:ye=>Ue(ne)},{default:f(()=>[l(t(re),{icon:"Plus",class:"w-3 h-3 mr-1"}),A(" "+_(t(r)("components.buttons.create")),1)]),_:2},1032,["onClick"])]),te.serials.length===0?(L(),U("div",_tt,_(t(r)("components.data-list.data_not_found")),1)):(L(),U("div",gtt,[(L(!0),U(ke,null,Fe(te.serials,(ye,Ve)=>(L(),U("div",{key:Ve,class:"flex gap-2"},[l(t(Oe),{modelValue:ye.serial,"onUpdate:modelValue":We=>ye.serial=We,placeholder:t(r)("views.product.fields.serial_number")},null,8,["modelValue","onUpdate:modelValue","placeholder"]),l(t(me),{type:"button",variant:"outline-danger",onClick:We=>ht(ne,Ve)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4"})]),_:2},1032,["onClick"])]))),128))]))])):Me("",!0),o.value[ne]?(L(),U("div",ktt,[c("div",null,[l(t(K),{class:F({"text-danger":t(w).invalid(`out_products.${ne}.remarks`)})},{default:f(()=>[A(_(t(r)("views.stock_adjustment_out_product.fields.remarks")),1)]),_:2},1032,["class"]),l(t(la),{rows:"2",modelValue:t(w).out_products[ne].remarks,"onUpdate:modelValue":ye=>t(w).out_products[ne].remarks=ye,class:F({"border-danger":t(w).invalid(`out_products.${ne}.remarks`)}),onChange:ye=>t(w).validate(`out_products.${ne}.remarks`)},null,8,["modelValue","onUpdate:modelValue","class","onChange"]),l(t(_e),{messages:t(w).errors[`out_products.${ne}.remarks`]},null,8,["messages"])])])):Me("",!0)])]))),128))])),c("div",btt,[l(t(K)),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:yt},{default:f(()=>[A(_(t(r)("views.stock_adjustment_out_product.actions.create")),1)]),_:1})])])]),"card-items-button":f(()=>[c("div",wtt,[l(t(me),{type:"submit",href:"#",variant:"primary",class:"w-28 shadow-md",disabled:t(w).validating||t(w).hasErrors},{default:f(()=>[t(w).validating?(L(),ge(t(re),{key:0,icon:"Loader",class:"animate-spin"})):(L(),U(ke,{key:1},[A(_(t(r)("components.buttons.submit")),1)],64))]),_:1},8,["disabled"]),l(t(me),{type:"button",href:"#",variant:"soft-secondary",class:"w-28 shadow-md",onClick:Jt},{default:f(()=>[A(_(t(r)("components.buttons.reset")),1)]),_:1})])]),_:1},8,["cards"]),l(t($t),{size:"xl",open:B.value,onClose:ve[20]||(ve[20]=()=>{B.value=!1}),onAfterLeave:he},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",xtt,[c("div",Mtt,[l(t(K),null,{default:f(()=>[A(_(t(r)("views.stock_adjustment_in_product.table.title")),1)]),_:1}),c("button",{type:"button",class:"text-slate-500 hover:text-danger",onClick:ve[18]||(ve[18]=te=>B.value=!1)},[l(t(re),{icon:"X",class:"w-4 h-4"})])]),c("div",Ctt,[l(t(Oe),{id:"product-unit-search-input",modelValue:oe.value,"onUpdate:modelValue":ve[19]||(ve[19]=te=>oe.value=te),type:"text",placeholder:t(r)("components.search-box.placeholder.search"),onKeyup:KA(Se,["enter"])},null,8,["modelValue","placeholder"]),l(t(me),{type:"button",variant:"primary",class:"shadow-md",onClick:Se,tabindex:"-1",disabled:be.value},{default:f(()=>[be.value?(L(),ge(t(re),{key:0,icon:"Loader",class:"w-4 h-4 animate-spin"})):(L(),U(ke,{key:1},[A(_(t(r)("components.buttons.search")),1)],64))]),_:1},8,["disabled"])]),c("div",Stt,[c("table",Itt,[c("thead",Ltt,[c("tr",null,[c("th",$tt,_(t(r)("views.product.table.cols.image")),1),c("th",Att,_(t(r)("views.stock_adjustment_in_product.table.cols.product")),1),c("th",Ett,_(t(r)("views.product.table.cols.unit")),1),c("th",Ttt,_(t(r)("views.product.fields.conversion_value")),1),c("th",Ptt,_(t(r)("views.stock_adjustment_in_product.table.cols.product_unit_cogs")),1),Dtt])]),c("tbody",null,[$e.value.length===0?(L(),U("tr",Rtt,[c("td",Ott,_(t(r)("components.data-list.data_not_found")),1)])):Me("",!0),(L(!0),U(ke,null,Fe($e.value,(te,ne)=>(L(),U("tr",{key:ne,class:"border-t border-slate-200/60 dark:border-darkmode-400"},[c("td",Vtt,[l(Eo,{"image-url":te.product_image_url,"wrapper-class":"w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in","icon-class":"w-4 h-4 text-slate-400"},null,8,["image-url"])]),c("td",Utt,"["+_(te.product_code)+"] "+_(te.product_name),1),c("td",Ftt,_(te.unit_name),1),c("td",jtt,_(t(_a)(te.conversion_value)),1),c("td",Htt,_(t(_a)(te.cogs)),1),c("td",Ntt,[l(t(me),{type:"button",variant:"primary",size:"sm",onClick:ye=>Q(te)},{default:f(()=>[A(_(t(r)("components.buttons.select")),1)]),_:2},1032,["onClick"])])]))),128))])])])])]),_:1})]),_:1},8,["open"])],32))}});class Btt{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),s.company_id=e.company_id,e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.stock_adjustment_code&&(s.stock_adjustment_code=e.stock_adjustment_code),e.stock_adjustment_start_date&&(s.stock_adjustment_start_date=e.stock_adjustment_start_date),e.stock_adjustment_end_date&&(s.stock_adjustment_end_date=e.stock_adjustment_end_date),e.stock_adjustment_category_id&&(s.stock_adjustment_category_id=e.stock_adjustment_category_id),e.stock_adjustment_in_warehouse_id&&(s.stock_adjustment_in_warehouse_id=e.stock_adjustment_in_warehouse_id),e.stock_adjustment_out_warehouse_id&&(s.stock_adjustment_out_warehouse_id=e.stock_adjustment_out_warehouse_id),e.product_unit_code&&(s.product_unit_code=e.product_unit_code),e.product_unit_product_name&&(s.product_unit_product_name=e.product_unit_product_name),e.product_unit_product_category_id&&(s.product_unit_product_category_id=e.product_unit_product_category_id),e.product_unit_product_brand_id&&(s.product_unit_product_brand_id=e.product_unit_product_brand_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.stock_adjustment_in_product.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed,s.company_id=e.company_id,e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.stock_adjustment_code&&(s.stock_adjustment_code=e.stock_adjustment_code),e.stock_adjustment_start_date&&(s.stock_adjustment_start_date=e.stock_adjustment_start_date),e.stock_adjustment_end_date&&(s.stock_adjustment_end_date=e.stock_adjustment_end_date),e.stock_adjustment_category_id&&(s.stock_adjustment_category_id=e.stock_adjustment_category_id),e.stock_adjustment_in_warehouse_id&&(s.stock_adjustment_in_warehouse_id=e.stock_adjustment_in_warehouse_id),e.stock_adjustment_out_warehouse_id&&(s.stock_adjustment_out_warehouse_id=e.stock_adjustment_out_warehouse_id),e.product_unit_code&&(s.product_unit_code=e.product_unit_code),e.product_unit_product_name&&(s.product_unit_product_name=e.product_unit_product_name),e.product_unit_product_category_id&&(s.product_unit_product_category_id=e.product_unit_product_category_id),e.product_unit_product_brand_id&&(s.product_unit_product_brand_id=e.product_unit_product_brand_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.stock_adjustment_in_product.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.stock_adjustment_in_product.read",{stock_adjustment_in_product:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useStockAdjustmentInProductCreateForm(){const e=je("api.post.stock_adjustment_in_product.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",branch_id:"",stock_adjustment_id:"",qty:0,product_unit_id:"",product_unit_conversion_value:1,product_unit_cogs:0,remarks:""})}useStockAdjustmentInProductEditForm(e){const a=je("api.post.stock_adjustment_in_product.edit",{stock_adjustment_in_product:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",branch_id:"",stock_adjustment_id:"",qty:0,product_unit_id:"",product_unit_conversion_value:1,product_unit_cogs:0,remarks:""})}async delete(e){const a={success:!1};try{const s=je("api.post.stock_adjustment_in_product.delete",{stock_adjustment_in_product:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const qtt={class:"grid grid-cols-12 gap-6 mt-5"},Wtt={class:"col-span-12 intro-y lg:col-span-12"},Gtt={class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},Ztt={class:"col-span-12 lg:col-span-3"},Ktt={class:"col-span-12 lg:col-span-3"},Xtt={class:"col-span-12 md:col-span-12 lg:col-span-2 flex items-end"},Ytt={key:0,class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},Qtt={class:"col-span-12 md:col-span-6 lg:col-span-2"},Jtt={class:"col-span-12 md:col-span-6 lg:col-span-2"},eat={class:"flex items-center gap-2"},tat={class:"flex-1 relative z-30"},aat={class:"col-span-12 md:col-span-6 lg:col-span-2"},nat={class:"flex items-center gap-2"},sat={class:"flex-1 relative z-30"},oat={class:"col-span-12 md:col-span-6 lg:col-span-2"},rat={class:"flex items-center gap-2"},iat={class:"flex-1 relative z-30"},lat={class:"col-span-12 md:col-span-6 lg:col-span-2"},cat={class:"col-span-12 md:col-span-6 lg:col-span-2"},dat={class:"col-span-12 md:col-span-6 lg:col-span-2"},uat={class:"flex items-center gap-2"},pat={class:"flex-1 relative z-30"},hat={class:"col-span-12 md:col-span-6 lg:col-span-2"},fat={class:"flex items-center gap-2"},mat={class:"flex-1 relative z-30"},vat={class:"flex justify-center italic"},yat={class:"font-medium whitespace-nowrap"},_at={class:"text-slate-500 text-xs whitespace-nowrap"},gat={class:"whitespace-nowrap"},kat={class:"whitespace-nowrap"},bat={class:"whitespace-nowrap"},wat={class:"whitespace-nowrap"},xat={class:"whitespace-nowrap"},Mat={class:"whitespace-nowrap"},Cat={class:"flex justify-end gap-1"},Sat={class:"p-5 text-center"},Iat={class:"mt-5 text-3xl"},Lat={class:"mt-2 text-slate-500"},$at=c("br",null,null,-1),Aat={class:"px-5 pb-8 text-center"},DB=Ce({__name:"StockAdjustmentInProductList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new Btt,r=new Ro,i=new Xs,u=new Do,h=new co,m=zt(),p=e,b=O(""),x=O(!1);O(null);const w=O(null),$=O(null),D=O(""),V=O(!1),R=O(""),E=O(""),P=O(""),S=O(null),C=O(null),M=O(null),g=O(null),v=O(null),T=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),j=ee(()=>m.isUserLocationSelected),B=ee(()=>m.selectedUserLocation),oe=O(null),be=O(""),$e=ee(()=>(oe.value??[]).map(ae=>({value:ae.code,label:ae.name}))),Le=O(null),de=O(""),J=ee(()=>(Le.value??[]).map(ae=>({value:ae.code,label:ae.name}))),G=O(null),ce=O(""),Ee=ee(()=>(G.value??[]).map(ae=>({value:ae.code,label:ae.name}))),He=O(null),Ke=O(""),pt=ee(()=>(He.value??[]).map(ae=>({value:ae.code,label:ae.name}))),ut=O(null),ft=O(""),kt=ee(()=>(ut.value??[]).map(ae=>({value:ae.code,label:ae.name})));at(async()=>{if(p("mode-state",xe.LIST),!j.value){s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}const ae=new Date,W=new Date(ae.getFullYear(),ae.getMonth(),1,0,0,0),q=new Date(ae.getFullYear(),ae.getMonth()+1,0,23,59,59);w.value=Ya(W.toString(),"YYYY-MM-DD HH:mm:ss"),$.value=Ya(q.toString(),"YYYY-MM-DD HH:mm:ss"),await Ae("",!0,1,10)});const Ae=async(ae,W,q,ve)=>{p("loading-state",!0),D.value=ae;const te={with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,stock_adjustment_code:R.value||null,stock_adjustment_start_date:w.value||null,stock_adjustment_end_date:$.value||null,stock_adjustment_category_id:S.value,stock_adjustment_in_warehouse_id:C.value,stock_adjustment_out_warehouse_id:M.value,product_unit_code:E.value||null,product_unit_product_name:P.value||null,product_unit_product_category_id:g.value,product_unit_product_brand_id:v.value,refresh:W,page:q,per_page:ve},ne=await o.readAnyPaginate(te);ne.success&&ne.data?(T.value=ne.data,Et("hidden","",null)):Et("danger","",ne.errors),p("loading-state",!1)},Xe=async ae=>{await Ae(ae.search.text,!0,ae.pagination.page,ae.pagination.per_page)},ie=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},Y=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},ue=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},pe=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},H=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},N=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},Q=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},he=async(ae="")=>{if(!B.value)return;const W=await h.readAnyGet({with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,status:void 0,refresh:!1,limit:20});W.success&&W.data&&(Le.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Se=async(ae="")=>{if(!B.value)return;const W=await h.readAnyGet({with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,status:void 0,refresh:!1,limit:20});W.success&&W.data&&(G.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Re=async(ae="")=>{if(!B.value)return;const W=await r.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,include_id:void 0,refresh:!1,limit:20});W.success&&W.data&&(oe.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Ze=async(ae="")=>{if(!B.value)return;const W=await i.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,type:1,refresh:!1,limit:20});W.success&&W.data&&(He.value=W.data.data.map(q=>({code:q.id,name:q.name})))},ze=async(ae="")=>{if(!B.value)return;const W=await u.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,refresh:!1,limit:20});W.success&&W.data&&(ut.value=W.data.data.map(q=>({code:q.id,name:q.name})))},qe=async()=>{S.value=null,await Re(""),await ue()},Be=async()=>{C.value=null,await he(""),await pe()},lt=async()=>{M.value=null,await Se(""),await H()},yt=async()=>{g.value=null,await Ze(""),await N()},it=async()=>{v.value=null,await ze(""),await Q()},Pe=async()=>{V.value=!V.value,V.value&&await Promise.all([Re(be.value),he(de.value),Se(ce.value),Ze(Ke.value),ze(ft.value)])},Ue=ae=>{if(!T.value)return;const W=T.value.data[ae].ulid;b.value=W,x.value=!0},ht=async()=>{x.value=!1,p("loading-state",!0);const ae=await o.delete(b.value);p("loading-state",!1),ae.success?(p("update-profile"),await Ae("",!0,1,10),Mt(a("components.delete-modal.title"),a("components.delete-modal.message"))):Et("danger","",ae.errors)},Mt=(ae,W)=>{p("show-notification",{title:ae,content:W})},Et=(ae,W,q)=>{p("show-alertplaceholder",{alertType:ae,title:W,alertList:q})},Jt=ae=>{var ve,te,ne;const W=((te=(ve=ae.product_unit)==null?void 0:ve.product)==null?void 0:te.product_images)??[];if(W.length===0)return null;const q=W.find(ye=>ye.is_main);return q!=null&&q.url?q.url:((ne=W[0])==null?void 0:ne.url)??null};return(ae,W)=>(L(),U(ke,null,[c("div",qtt,[c("div",Wtt,[c("div",Gtt,[c("div",Ztt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.start_date")),1)]),_:1}),l(t(oo),{modelValue:w.value,"onUpdate:modelValue":W[0]||(W[0]=q=>w.value=q),onChange:ie},null,8,["modelValue"])]),c("div",Ktt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.end_date")),1)]),_:1}),l(t(oo),{modelValue:$.value,"onUpdate:modelValue":W[1]||(W[1]=q=>$.value=q),onChange:ie},null,8,["modelValue"])]),c("div",Xtt,[l(t(me),{variant:"soft-secondary",class:"shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300",onClick:Pe},{default:f(()=>[l(t(re),{icon:"Filter",class:"w-4 h-5"})]),_:1})])]),V.value?(L(),U("div",Ytt,[c("div",Qtt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.stock_adjustment_code")),1)]),_:1}),l(t(Oe),{modelValue:R.value,"onUpdate:modelValue":W[2]||(W[2]=q=>R.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",Jtt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.category_id")),1)]),_:1}),c("div",eat,[c("div",tat,[l(t(Bt),{modelValue:S.value,"onUpdate:modelValue":W[3]||(W[3]=q=>S.value=q),search:be.value,"onUpdate:search":W[4]||(W[4]=q=>be.value=q),options:$e.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:ue,onSearch:Re,onClear:qe},null,8,["modelValue","search","options","placeholder"])])])]),c("div",aat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.in_warehouse_id")),1)]),_:1}),c("div",nat,[c("div",sat,[l(t(Bt),{modelValue:C.value,"onUpdate:modelValue":W[5]||(W[5]=q=>C.value=q),search:de.value,"onUpdate:search":W[6]||(W[6]=q=>de.value=q),options:J.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:pe,onSearch:he,onClear:Be},null,8,["modelValue","search","options","placeholder"])])])]),c("div",oat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.out_warehouse_id")),1)]),_:1}),c("div",rat,[c("div",iat,[l(t(Bt),{modelValue:M.value,"onUpdate:modelValue":W[7]||(W[7]=q=>M.value=q),search:ce.value,"onUpdate:search":W[8]||(W[8]=q=>ce.value=q),options:Ee.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:H,onSearch:Se,onClear:lt},null,8,["modelValue","search","options","placeholder"])])])]),c("div",lat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.product_unit_code")),1)]),_:1}),l(t(Oe),{modelValue:E.value,"onUpdate:modelValue":W[9]||(W[9]=q=>E.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",cat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.product_name")),1)]),_:1}),l(t(Oe),{modelValue:P.value,"onUpdate:modelValue":W[10]||(W[10]=q=>P.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",dat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.category_id")),1)]),_:1}),c("div",uat,[c("div",pat,[l(t(Bt),{modelValue:g.value,"onUpdate:modelValue":W[11]||(W[11]=q=>g.value=q),search:Ke.value,"onUpdate:search":W[12]||(W[12]=q=>Ke.value=q),options:pt.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:N,onSearch:Ze,onClear:yt},null,8,["modelValue","search","options","placeholder"])])])]),c("div",hat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.brand_id")),1)]),_:1}),c("div",fat,[c("div",mat,[l(t(Bt),{modelValue:v.value,"onUpdate:modelValue":W[13]||(W[13]=q=>v.value=q),search:ft.value,"onUpdate:search":W[14]||(W[14]=q=>ft.value=q),options:kt.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:Q,onSearch:ze,onClear:it},null,8,["modelValue","search","options","placeholder"])])])])])):Me("",!0),l(t(mn),{title:t(a)("views.stock_adjustment_in_product.table.title"),data:T.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:T.value?T.value.meta:null,onDataListChanged:Xe},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.image")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.product")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.qty")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.product_unit")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.product_unit_conversion_value")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.product_unit_cogs")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.product_unit_total_cogs")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.remarks")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),T.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[T.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"9"},{default:f(()=>[c("div",vat,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(T.value.data,(q,ve)=>(L(),ge(t(X).Tr,{key:q.ulid,class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[l(Eo,{"image-url":Jt(q),"wrapper-class":"w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in","icon-class":"w-4 h-4 text-slate-400"},null,8,["image-url"])]),_:2},1024),l(t(X).Td,null,{default:f(()=>{var te,ne,ye;return[c("div",yat,_(((ne=(te=q.product_unit)==null?void 0:te.product)==null?void 0:ne.name)??"-"),1),c("div",_at," ["+_(((ye=q.product_unit)==null?void 0:ye.code)??"-")+"] ",1)]}),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[c("div",gat,_(t(_a)(q.qty)),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>{var te,ne;return[c("div",kat,_(((ne=(te=q.product_unit)==null?void 0:te.unit)==null?void 0:ne.name)??"-"),1)]}),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[c("div",bat,_(t(_a)(q.product_unit_conversion_value)),1)]),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[c("div",wat,_(t(_a)(q.product_unit_cogs)),1)]),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[c("div",xat,_(t(_a)(q.product_unit_total_cogs)),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",Mat,_(q.remarks??"-"),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",Cat,[l(t(me),{variant:"outline-secondary",onClick:te=>Ue(ve)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]),l(t($t),{open:x.value,onClose:W[16]||(W[16]=q=>x.value=!1)},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",Sat,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",Iat,_(t(a)("components.delete-modal.title")),1),c("div",Lat,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),$at,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",Aat,[l(t(me),{type:"button",variant:"outline-secondary",onClick:W[15]||(W[15]=q=>x.value=!1),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:ht},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])],64))}}),Eat={class:"mt-8"},Tat={class:"ml-4 mr-4"},Pat={class:"font-medium"},Dat={class:"mt-1 text-slate-500"},Rat=Ce({__name:"StockAdjustmentInProductIndex",setup(n){const{t:e}=tt();ct();const a=Za(),s=new cn,o=O(xe.LIST),r=O(!1),i=O("views.stock_adjustment_in_product.page_title"),u=O("hidden"),h=O(""),m=O(null),p=O(),b=O(""),x=O("");St("bind[stockAdjustmentInProductNotification]",P=>{p.value=P});const w=P=>{r.value=P},$=P=>{switch(o.value=P,P){case xe.LIST:default:i.value="views.stock_adjustment_in_product.page_title";break}},D=async()=>{const P=await s.readProfile();P.success&&a.setUserContext(P.data)},V=P=>{u.value=P.alertType,h.value=P.title,m.value=P.alertList},R=P=>{b.value=P.title,x.value=P.content,p.value&&p.value.showToast()},E=()=>{h.value="",m.value=null,u.value="hidden"};return(P,S)=>(L(),U("div",Eat,[l(t(da),{visible:r.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(i.value)),1)]),optional:f(()=>[]),_:1}),l(dn,{"alert-type":u.value,title:h.value,"alert-list":m.value,onDismiss:E},null,8,["alert-type","title","alert-list"]),l(DB,{onLoadingState:w,onModeState:$,onUpdateProfile:D,onShowAlertplaceholder:V,onShowNotification:R})]),_:1},8,["visible"]),l(fn,{"ref-key":"stockAdjustmentInProductNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",Tat,[c("div",Pat,_(b.value),1),c("div",Dat,_(x.value),1)])]),_:1})]))}});class Oat{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),s.company_id=e.company_id,e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.stock_adjustment_code&&(s.stock_adjustment_code=e.stock_adjustment_code),e.stock_adjustment_start_date&&(s.stock_adjustment_start_date=e.stock_adjustment_start_date),e.stock_adjustment_end_date&&(s.stock_adjustment_end_date=e.stock_adjustment_end_date),e.stock_adjustment_category_id&&(s.stock_adjustment_category_id=e.stock_adjustment_category_id),e.stock_adjustment_in_warehouse_id&&(s.stock_adjustment_in_warehouse_id=e.stock_adjustment_in_warehouse_id),e.stock_adjustment_out_warehouse_id&&(s.stock_adjustment_out_warehouse_id=e.stock_adjustment_out_warehouse_id),e.product_unit_code&&(s.product_unit_code=e.product_unit_code),e.product_unit_product_name&&(s.product_unit_product_name=e.product_unit_product_name),e.product_unit_product_category_id&&(s.product_unit_product_category_id=e.product_unit_product_category_id),e.product_unit_product_brand_id&&(s.product_unit_product_brand_id=e.product_unit_product_brand_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.stock_adjustment_out_product.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed,s.company_id=e.company_id,e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.stock_adjustment_code&&(s.stock_adjustment_code=e.stock_adjustment_code),e.stock_adjustment_start_date&&(s.stock_adjustment_start_date=e.stock_adjustment_start_date),e.stock_adjustment_end_date&&(s.stock_adjustment_end_date=e.stock_adjustment_end_date),e.stock_adjustment_category_id&&(s.stock_adjustment_category_id=e.stock_adjustment_category_id),e.stock_adjustment_in_warehouse_id&&(s.stock_adjustment_in_warehouse_id=e.stock_adjustment_in_warehouse_id),e.stock_adjustment_out_warehouse_id&&(s.stock_adjustment_out_warehouse_id=e.stock_adjustment_out_warehouse_id),e.product_unit_code&&(s.product_unit_code=e.product_unit_code),e.product_unit_product_name&&(s.product_unit_product_name=e.product_unit_product_name),e.product_unit_product_category_id&&(s.product_unit_product_category_id=e.product_unit_product_category_id),e.product_unit_product_brand_id&&(s.product_unit_product_brand_id=e.product_unit_product_brand_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.stock_adjustment_out_product.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}useStockAdjustmentOutProductCreateForm(){const e=je("api.post.stock_adjustment_out_product.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",branch_id:"",stock_adjustment_id:"",qty:0,product_unit_id:"",product_unit_conversion_value:1,remarks:""})}useStockAdjustmentOutProductEditForm(e){const a=je("api.post.stock_adjustment_out_product.edit",{stock_adjustment_out_product:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{company_id:"",branch_id:"",stock_adjustment_id:"",qty:0,product_unit_id:"",product_unit_conversion_value:1,remarks:""})}async read(e){const a={success:!1};try{const s=je("api.get.stock_adjustment_out_product.read",{stock_adjustment_out_product:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async delete(e){const a={success:!1};try{const s=je("api.post.stock_adjustment_out_product.delete",{stock_adjustment_out_product:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const Vat={class:"grid grid-cols-12 gap-6 mt-5"},Uat={class:"col-span-12 intro-y lg:col-span-12"},Fat={class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},jat={class:"col-span-12 lg:col-span-3"},Hat={class:"col-span-12 lg:col-span-3"},Nat={class:"col-span-12 md:col-span-12 lg:col-span-2 flex items-end"},zat={key:0,class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},Bat={class:"col-span-12 md:col-span-6 lg:col-span-2"},qat={class:"col-span-12 md:col-span-6 lg:col-span-2"},Wat={class:"flex items-center gap-2"},Gat={class:"flex-1 relative z-30"},Zat={class:"col-span-12 md:col-span-6 lg:col-span-2"},Kat={class:"flex items-center gap-2"},Xat={class:"flex-1 relative z-30"},Yat={class:"col-span-12 md:col-span-6 lg:col-span-2"},Qat={class:"flex items-center gap-2"},Jat={class:"flex-1 relative z-30"},ent={class:"col-span-12 md:col-span-6 lg:col-span-2"},tnt={class:"col-span-12 md:col-span-6 lg:col-span-2"},ant={class:"col-span-12 md:col-span-6 lg:col-span-2"},nnt={class:"flex items-center gap-2"},snt={class:"flex-1 relative z-30"},ont={class:"col-span-12 md:col-span-6 lg:col-span-2"},rnt={class:"flex items-center gap-2"},int={class:"flex-1 relative z-30"},lnt={class:"flex justify-center italic"},cnt={class:"font-medium whitespace-nowrap"},dnt={class:"text-slate-500 text-xs whitespace-nowrap"},unt={class:"whitespace-nowrap"},pnt={class:"whitespace-nowrap"},hnt={class:"whitespace-nowrap"},fnt={class:"whitespace-nowrap"},mnt={class:"flex justify-end gap-1"},vnt={class:"p-5 text-center"},ynt={class:"mt-5 text-3xl"},_nt={class:"mt-2 text-slate-500"},gnt=c("br",null,null,-1),knt={class:"px-5 pb-8 text-center"},RB=Ce({__name:"StockAdjustmentOutProductList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new Oat,r=new Ro,i=new Xs,u=new Do,h=new co,m=zt(),p=e,b=O(""),x=O(!1);O(null);const w=O(null),$=O(null),D=O(""),V=O(!1),R=O(""),E=O(""),P=O(""),S=O(null),C=O(null),M=O(null),g=O(null),v=O(null),T=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),j=ee(()=>m.isUserLocationSelected),B=ee(()=>m.selectedUserLocation),oe=O(null),be=O(""),$e=ee(()=>(oe.value??[]).map(ae=>({value:ae.code,label:ae.name}))),Le=O(null),de=O(""),J=ee(()=>(Le.value??[]).map(ae=>({value:ae.code,label:ae.name}))),G=O(null),ce=O(""),Ee=ee(()=>(G.value??[]).map(ae=>({value:ae.code,label:ae.name}))),He=O(null),Ke=O(""),pt=ee(()=>(He.value??[]).map(ae=>({value:ae.code,label:ae.name}))),ut=O(null),ft=O(""),kt=ee(()=>(ut.value??[]).map(ae=>({value:ae.code,label:ae.name})));at(async()=>{if(p("mode-state",xe.LIST),!j.value){s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}const ae=new Date,W=new Date(ae.getFullYear(),ae.getMonth(),1,0,0,0),q=new Date(ae.getFullYear(),ae.getMonth()+1,0,23,59,59);w.value=Ya(W.toString(),"YYYY-MM-DD HH:mm:ss"),$.value=Ya(q.toString(),"YYYY-MM-DD HH:mm:ss"),await Ae("",!0,1,10)});const Ae=async(ae,W,q,ve)=>{p("loading-state",!0),D.value=ae;const te={with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,stock_adjustment_code:R.value||null,stock_adjustment_start_date:w.value||null,stock_adjustment_end_date:$.value||null,stock_adjustment_category_id:S.value,stock_adjustment_in_warehouse_id:C.value,stock_adjustment_out_warehouse_id:M.value,product_unit_code:E.value||null,product_unit_product_name:P.value||null,product_unit_product_category_id:g.value,product_unit_product_brand_id:v.value,refresh:W,page:q,per_page:ve},ne=await o.readAnyPaginate(te);ne.success&&ne.data?(T.value=ne.data,Et("hidden","",null)):Et("danger","",ne.errors),p("loading-state",!1)},Xe=async ae=>{await Ae(ae.search.text,!0,ae.pagination.page,ae.pagination.per_page)},ie=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},Y=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},ue=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},pe=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},H=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},N=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},Q=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},he=async(ae="")=>{if(!B.value)return;const W=await h.readAnyGet({with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,status:void 0,refresh:!1,limit:20});W.success&&W.data&&(Le.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Se=async(ae="")=>{if(!B.value)return;const W=await h.readAnyGet({with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,status:void 0,refresh:!1,limit:20});W.success&&W.data&&(G.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Re=async(ae="")=>{if(!B.value)return;const W=await r.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,include_id:void 0,refresh:!1,limit:20});W.success&&W.data&&(oe.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Ze=async(ae="")=>{if(!B.value)return;const W=await i.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,type:1,refresh:!1,limit:20});W.success&&W.data&&(He.value=W.data.data.map(q=>({code:q.id,name:q.name})))},ze=async(ae="")=>{if(!B.value)return;const W=await u.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,refresh:!1,limit:20});W.success&&W.data&&(ut.value=W.data.data.map(q=>({code:q.id,name:q.name})))},qe=async()=>{S.value=null,await Re(""),await ue()},Be=async()=>{C.value=null,await he(""),await pe()},lt=async()=>{M.value=null,await Se(""),await H()},yt=async()=>{g.value=null,await Ze(""),await N()},it=async()=>{v.value=null,await ze(""),await Q()},Pe=async()=>{V.value=!V.value,V.value&&await Promise.all([Re(be.value),he(de.value),Se(ce.value),Ze(Ke.value),ze(ft.value)])},Ue=ae=>{if(!T.value)return;const W=T.value.data[ae].ulid;b.value=W,x.value=!0},ht=async()=>{x.value=!1,p("loading-state",!0);const ae=await o.delete(b.value);p("loading-state",!1),ae.success?(p("update-profile"),await Ae("",!0,1,10),Mt(a("components.delete-modal.title"),a("components.delete-modal.message"))):Et("danger","",ae.errors)},Mt=(ae,W)=>{p("show-notification",{title:ae,content:W})},Et=(ae,W,q)=>{p("show-alertplaceholder",{alertType:ae,title:W,alertList:q})},Jt=ae=>{var ve,te,ne;const W=((te=(ve=ae.product_unit)==null?void 0:ve.product)==null?void 0:te.product_images)??[];if(W.length===0)return null;const q=W.find(ye=>ye.is_main);return q!=null&&q.url?q.url:((ne=W[0])==null?void 0:ne.url)??null};return(ae,W)=>(L(),U(ke,null,[c("div",Vat,[c("div",Uat,[c("div",Fat,[c("div",jat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.start_date")),1)]),_:1}),l(t(oo),{modelValue:w.value,"onUpdate:modelValue":W[0]||(W[0]=q=>w.value=q),onChange:ie},null,8,["modelValue"])]),c("div",Hat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.end_date")),1)]),_:1}),l(t(oo),{modelValue:$.value,"onUpdate:modelValue":W[1]||(W[1]=q=>$.value=q),onChange:ie},null,8,["modelValue"])]),c("div",Nat,[l(t(me),{variant:"soft-secondary",class:"shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300",onClick:Pe},{default:f(()=>[l(t(re),{icon:"Filter",class:"w-4 h-5"})]),_:1})])]),V.value?(L(),U("div",zat,[c("div",Bat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.stock_adjustment_code")),1)]),_:1}),l(t(Oe),{modelValue:R.value,"onUpdate:modelValue":W[2]||(W[2]=q=>R.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",qat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.category_id")),1)]),_:1}),c("div",Wat,[c("div",Gat,[l(t(Bt),{modelValue:S.value,"onUpdate:modelValue":W[3]||(W[3]=q=>S.value=q),search:be.value,"onUpdate:search":W[4]||(W[4]=q=>be.value=q),options:$e.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:ue,onSearch:Re,onClear:qe},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Zat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.in_warehouse_id")),1)]),_:1}),c("div",Kat,[c("div",Xat,[l(t(Bt),{modelValue:C.value,"onUpdate:modelValue":W[5]||(W[5]=q=>C.value=q),search:de.value,"onUpdate:search":W[6]||(W[6]=q=>de.value=q),options:J.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:pe,onSearch:he,onClear:Be},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Yat,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.out_warehouse_id")),1)]),_:1}),c("div",Qat,[c("div",Jat,[l(t(Bt),{modelValue:M.value,"onUpdate:modelValue":W[7]||(W[7]=q=>M.value=q),search:ce.value,"onUpdate:search":W[8]||(W[8]=q=>ce.value=q),options:Ee.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:H,onSearch:Se,onClear:lt},null,8,["modelValue","search","options","placeholder"])])])]),c("div",ent,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.product_unit_code")),1)]),_:1}),l(t(Oe),{modelValue:E.value,"onUpdate:modelValue":W[9]||(W[9]=q=>E.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",tnt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.product_name")),1)]),_:1}),l(t(Oe),{modelValue:P.value,"onUpdate:modelValue":W[10]||(W[10]=q=>P.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",ant,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.category_id")),1)]),_:1}),c("div",nnt,[c("div",snt,[l(t(Bt),{modelValue:g.value,"onUpdate:modelValue":W[11]||(W[11]=q=>g.value=q),search:Ke.value,"onUpdate:search":W[12]||(W[12]=q=>Ke.value=q),options:pt.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:N,onSearch:Ze,onClear:yt},null,8,["modelValue","search","options","placeholder"])])])]),c("div",ont,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.brand_id")),1)]),_:1}),c("div",rnt,[c("div",int,[l(t(Bt),{modelValue:v.value,"onUpdate:modelValue":W[13]||(W[13]=q=>v.value=q),search:ft.value,"onUpdate:search":W[14]||(W[14]=q=>ft.value=q),options:kt.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:Q,onSearch:ze,onClear:it},null,8,["modelValue","search","options","placeholder"])])])])])):Me("",!0),l(t(mn),{title:t(a)("views.stock_adjustment_out_product.table.title"),data:T.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:T.value?T.value.meta:null,onDataListChanged:Xe},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.image")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.table.cols.product")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.table.cols.qty")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.table.cols.product_unit")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.table.cols.product_unit_conversion_value")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product.table.cols.remarks")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),T.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[T.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"7"},{default:f(()=>[c("div",lnt,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(T.value.data,(q,ve)=>(L(),ge(t(X).Tr,{key:q.ulid,class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[l(Eo,{"image-url":Jt(q),"wrapper-class":"w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in","icon-class":"w-4 h-4 text-slate-400"},null,8,["image-url"])]),_:2},1024),l(t(X).Td,null,{default:f(()=>{var te,ne,ye;return[c("div",cnt,_(((ne=(te=q.product_unit)==null?void 0:te.product)==null?void 0:ne.name)??"-"),1),c("div",dnt," ["+_(((ye=q.product_unit)==null?void 0:ye.code)??"-")+"] ",1)]}),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[c("div",unt,_(t(_a)(q.qty)),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>{var te,ne;return[c("div",pnt,_(((ne=(te=q.product_unit)==null?void 0:te.unit)==null?void 0:ne.name)??"-"),1)]}),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[c("div",hnt,_(t(_a)(q.product_unit_conversion_value)),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",fnt,_(q.remarks??"-"),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",mnt,[l(t(me),{variant:"outline-secondary",onClick:te=>Ue(ve)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]),l(t($t),{open:x.value,onClose:W[16]||(W[16]=q=>x.value=!1)},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",vnt,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",ynt,_(t(a)("components.delete-modal.title")),1),c("div",_nt,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),gnt,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",knt,[l(t(me),{type:"button",variant:"outline-secondary",onClick:W[15]||(W[15]=q=>x.value=!1),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:ht},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])],64))}}),bnt={class:"mt-8"},wnt={class:"ml-4 mr-4"},xnt={class:"font-medium"},Mnt={class:"mt-1 text-slate-500"},Cnt=Ce({__name:"StockAdjustmentOutProductIndex",setup(n){const{t:e}=tt();ct();const a=Za(),s=new cn,o=O(xe.LIST),r=O(!1),i=O("views.stock_adjustment_out_product.page_title"),u=O("hidden"),h=O(""),m=O(null),p=O(),b=O(""),x=O("");St("bind[stockAdjustmentOutProductNotification]",P=>{p.value=P});const w=P=>{r.value=P},$=P=>{switch(o.value=P,P){case xe.LIST:default:i.value="views.stock_adjustment_out_product.page_title";break}},D=async()=>{const P=await s.readProfile();P.success&&a.setUserContext(P.data)},V=P=>{u.value=P.alertType,h.value=P.title,m.value=P.alertList},R=P=>{b.value=P.title,x.value=P.content,p.value&&p.value.showToast()},E=()=>{h.value="",m.value=null,u.value="hidden"};return(P,S)=>(L(),U("div",bnt,[l(t(da),{visible:r.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(i.value)),1)]),optional:f(()=>[]),_:1}),l(dn,{"alert-type":u.value,title:h.value,"alert-list":m.value,onDismiss:E},null,8,["alert-type","title","alert-list"]),l(RB,{onLoadingState:w,onModeState:$,onUpdateProfile:D,onShowAlertplaceholder:V,onShowNotification:R})]),_:1},8,["visible"]),l(fn,{"ref-key":"stockAdjustmentOutProductNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",wnt,[c("div",xnt,_(b.value),1),c("div",Mnt,_(x.value),1)])]),_:1})]))}});class Snt{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useStockAdjustmentInProductSerialCreateForm(){const e=je("api.post.stock_adjustment_in_product_serial.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",branch_id:"",stock_adjustment_id:"",stock_adjustment_in_product_id:"",serial:""})}useStockAdjustmentInProductSerialEditForm(e){const a=je("api.post.stock_adjustment_in_product_serial.edit",{stock_adjustment_in_product_serial:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{serial:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),s.company_id=e.company_id,e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.stock_adjustment_code&&(s.stock_adjustment_code=e.stock_adjustment_code),e.stock_adjustment_start_date&&(s.stock_adjustment_start_date=e.stock_adjustment_start_date),e.stock_adjustment_end_date&&(s.stock_adjustment_end_date=e.stock_adjustment_end_date),e.stock_adjustment_category_id&&(s.stock_adjustment_category_id=e.stock_adjustment_category_id),e.stock_adjustment_in_warehouse_id&&(s.stock_adjustment_in_warehouse_id=e.stock_adjustment_in_warehouse_id),e.stock_adjustment_out_warehouse_id&&(s.stock_adjustment_out_warehouse_id=e.stock_adjustment_out_warehouse_id),e.product_unit_code&&(s.product_unit_code=e.product_unit_code),e.product_unit_product_name&&(s.product_unit_product_name=e.product_unit_product_name),e.product_unit_product_category_id&&(s.product_unit_product_category_id=e.product_unit_product_category_id),e.product_unit_product_brand_id&&(s.product_unit_product_brand_id=e.product_unit_product_brand_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.stock_adjustment_in_product_serial.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed,s.company_id=e.company_id,e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.stock_adjustment_code&&(s.stock_adjustment_code=e.stock_adjustment_code),e.stock_adjustment_start_date&&(s.stock_adjustment_start_date=e.stock_adjustment_start_date),e.stock_adjustment_end_date&&(s.stock_adjustment_end_date=e.stock_adjustment_end_date),e.stock_adjustment_category_id&&(s.stock_adjustment_category_id=e.stock_adjustment_category_id),e.stock_adjustment_in_warehouse_id&&(s.stock_adjustment_in_warehouse_id=e.stock_adjustment_in_warehouse_id),e.stock_adjustment_out_warehouse_id&&(s.stock_adjustment_out_warehouse_id=e.stock_adjustment_out_warehouse_id),e.product_unit_code&&(s.product_unit_code=e.product_unit_code),e.product_unit_product_name&&(s.product_unit_product_name=e.product_unit_product_name),e.product_unit_product_category_id&&(s.product_unit_product_category_id=e.product_unit_product_category_id),e.product_unit_product_brand_id&&(s.product_unit_product_brand_id=e.product_unit_product_brand_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.stock_adjustment_in_product_serial.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.stock_adjustment_in_product_serial.read",{stock_adjustment_in_product_serial:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async delete(e){const a={success:!1};try{const s=je("api.post.stock_adjustment_in_product_serial.delete",{stock_adjustment_in_product_serial:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const Int={class:"grid grid-cols-12 gap-6 mt-5"},Lnt={class:"col-span-12 intro-y lg:col-span-12"},$nt={class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},Ant={class:"col-span-12 lg:col-span-3"},Ent={class:"col-span-12 lg:col-span-3"},Tnt={class:"col-span-12 md:col-span-12 lg:col-span-2 flex items-end"},Pnt={key:0,class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},Dnt={class:"col-span-12 md:col-span-6 lg:col-span-2"},Rnt={class:"col-span-12 md:col-span-6 lg:col-span-2"},Ont={class:"flex items-center gap-2"},Vnt={class:"flex-1 relative z-30"},Unt={class:"col-span-12 md:col-span-6 lg:col-span-2"},Fnt={class:"flex items-center gap-2"},jnt={class:"flex-1 relative z-30"},Hnt={class:"col-span-12 md:col-span-6 lg:col-span-2"},Nnt={class:"flex items-center gap-2"},znt={class:"flex-1 relative z-30"},Bnt={class:"col-span-12 md:col-span-6 lg:col-span-2"},qnt={class:"col-span-12 md:col-span-6 lg:col-span-2"},Wnt={class:"col-span-12 md:col-span-6 lg:col-span-2"},Gnt={class:"flex items-center gap-2"},Znt={class:"flex-1 relative z-30"},Knt={class:"col-span-12 md:col-span-6 lg:col-span-2"},Xnt={class:"flex items-center gap-2"},Ynt={class:"flex-1 relative z-30"},Qnt={class:"flex justify-center italic"},Jnt={class:"font-medium whitespace-nowrap"},est={class:"whitespace-nowrap"},tst={class:"text-slate-500 text-xs whitespace-nowrap"},ast={class:"whitespace-nowrap"},nst={class:"flex justify-end gap-1"},sst={class:"p-5 text-center"},ost={class:"mt-5 text-3xl"},rst={class:"mt-2 text-slate-500"},ist=c("br",null,null,-1),lst={class:"px-5 pb-8 text-center"},OB=Ce({__name:"StockAdjustmentInProductSerialList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new Snt,r=new Ro,i=new Xs,u=new Do,h=new co,m=zt(),p=e,b=O(""),x=O(!1);O(null);const w=O(null),$=O(null),D=O(""),V=O(!1),R=O(""),E=O(""),P=O(""),S=O(null),C=O(null),M=O(null),g=O(null),v=O(null),T=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),j=ee(()=>m.isUserLocationSelected),B=ee(()=>m.selectedUserLocation),oe=O(null),be=O(""),$e=ee(()=>(oe.value??[]).map(ae=>({value:ae.code,label:ae.name}))),Le=O(null),de=O(""),J=ee(()=>(Le.value??[]).map(ae=>({value:ae.code,label:ae.name}))),G=O(null),ce=O(""),Ee=ee(()=>(G.value??[]).map(ae=>({value:ae.code,label:ae.name}))),He=O(null),Ke=O(""),pt=ee(()=>(He.value??[]).map(ae=>({value:ae.code,label:ae.name}))),ut=O(null),ft=O(""),kt=ee(()=>(ut.value??[]).map(ae=>({value:ae.code,label:ae.name})));at(async()=>{if(p("mode-state",xe.LIST),!j.value){s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}const ae=new Date,W=new Date(ae.getFullYear(),ae.getMonth(),1,0,0,0),q=new Date(ae.getFullYear(),ae.getMonth()+1,0,23,59,59);w.value=Ya(W.toString(),"YYYY-MM-DD HH:mm:ss"),$.value=Ya(q.toString(),"YYYY-MM-DD HH:mm:ss"),await Ae("",!0,1,10)});const Ae=async(ae,W,q,ve)=>{p("loading-state",!0),D.value=ae;const te={with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,stock_adjustment_code:R.value||null,stock_adjustment_start_date:w.value||null,stock_adjustment_end_date:$.value||null,stock_adjustment_category_id:S.value,stock_adjustment_in_warehouse_id:C.value,stock_adjustment_out_warehouse_id:M.value,product_unit_code:E.value||null,product_unit_product_name:P.value||null,product_unit_product_category_id:g.value,product_unit_product_brand_id:v.value,refresh:W,page:q,per_page:ve},ne=await o.readAnyPaginate(te);ne.success&&ne.data?(T.value=ne.data,Et("hidden","",null)):Et("danger","",ne.errors),p("loading-state",!1)},Xe=async ae=>{await Ae(ae.search.text,!0,ae.pagination.page,ae.pagination.per_page)},ie=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},Y=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},ue=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},pe=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},H=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},N=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},Q=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},he=async(ae="")=>{if(!B.value)return;const W=await h.readAnyGet({with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,status:void 0,refresh:!1,limit:20});W.success&&W.data&&(Le.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Se=async(ae="")=>{if(!B.value)return;const W=await h.readAnyGet({with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,status:void 0,refresh:!1,limit:20});W.success&&W.data&&(G.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Re=async(ae="")=>{if(!B.value)return;const W=await r.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,include_id:void 0,refresh:!1,limit:20});W.success&&W.data&&(oe.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Ze=async(ae="")=>{if(!B.value)return;const W=await i.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,type:1,refresh:!1,limit:20});W.success&&W.data&&(He.value=W.data.data.map(q=>({code:q.id,name:q.name})))},ze=async(ae="")=>{if(!B.value)return;const W=await u.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,refresh:!1,limit:20});W.success&&W.data&&(ut.value=W.data.data.map(q=>({code:q.id,name:q.name})))},qe=async()=>{S.value=null,await Re(""),await ue()},Be=async()=>{C.value=null,await he(""),await pe()},lt=async()=>{M.value=null,await Se(""),await H()},yt=async()=>{g.value=null,await Ze(""),await N()},it=async()=>{v.value=null,await ze(""),await Q()},Pe=async()=>{V.value=!V.value,V.value&&await Promise.all([Re(be.value),he(de.value),Se(ce.value),Ze(Ke.value),ze(ft.value)])},Ue=ae=>{if(!T.value)return;const W=T.value.data[ae].ulid;b.value=W,x.value=!0},ht=async()=>{x.value=!1,p("loading-state",!0);const ae=await o.delete(b.value);p("loading-state",!1),ae.success?(p("update-profile"),await Ae("",!0,1,10),Mt(a("components.delete-modal.title"),a("components.delete-modal.message"))):Et("danger","",ae.errors)},Mt=(ae,W)=>{p("show-notification",{title:ae,content:W})},Et=(ae,W,q)=>{p("show-alertplaceholder",{alertType:ae,title:W,alertList:q})},Jt=ae=>{var ve,te,ne,ye;const W=((ne=(te=(ve=ae.stock_adjustment_in_product)==null?void 0:ve.product_unit)==null?void 0:te.product)==null?void 0:ne.product_images)??[];if(W.length===0)return null;const q=W.find(Ve=>Ve.is_main);return q!=null&&q.url?q.url:((ye=W[0])==null?void 0:ye.url)??null};return(ae,W)=>(L(),U(ke,null,[c("div",Int,[c("div",Lnt,[c("div",$nt,[c("div",Ant,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.start_date")),1)]),_:1}),l(t(oo),{modelValue:w.value,"onUpdate:modelValue":W[0]||(W[0]=q=>w.value=q),onChange:ie},null,8,["modelValue"])]),c("div",Ent,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.end_date")),1)]),_:1}),l(t(oo),{modelValue:$.value,"onUpdate:modelValue":W[1]||(W[1]=q=>$.value=q),onChange:ie},null,8,["modelValue"])]),c("div",Tnt,[l(t(me),{variant:"soft-secondary",class:"shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300",onClick:Pe},{default:f(()=>[l(t(re),{icon:"Filter",class:"w-4 h-5"})]),_:1})])]),V.value?(L(),U("div",Pnt,[c("div",Dnt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.stock_adjustment_code")),1)]),_:1}),l(t(Oe),{modelValue:R.value,"onUpdate:modelValue":W[2]||(W[2]=q=>R.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",Rnt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.category_id")),1)]),_:1}),c("div",Ont,[c("div",Vnt,[l(t(Bt),{modelValue:S.value,"onUpdate:modelValue":W[3]||(W[3]=q=>S.value=q),search:be.value,"onUpdate:search":W[4]||(W[4]=q=>be.value=q),options:$e.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:ue,onSearch:Re,onClear:qe},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Unt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.in_warehouse_id")),1)]),_:1}),c("div",Fnt,[c("div",jnt,[l(t(Bt),{modelValue:C.value,"onUpdate:modelValue":W[5]||(W[5]=q=>C.value=q),search:de.value,"onUpdate:search":W[6]||(W[6]=q=>de.value=q),options:J.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:pe,onSearch:he,onClear:Be},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Hnt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.out_warehouse_id")),1)]),_:1}),c("div",Nnt,[c("div",znt,[l(t(Bt),{modelValue:M.value,"onUpdate:modelValue":W[7]||(W[7]=q=>M.value=q),search:ce.value,"onUpdate:search":W[8]||(W[8]=q=>ce.value=q),options:Ee.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:H,onSearch:Se,onClear:lt},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Bnt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.product_unit_code")),1)]),_:1}),l(t(Oe),{modelValue:E.value,"onUpdate:modelValue":W[9]||(W[9]=q=>E.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",qnt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.product_name")),1)]),_:1}),l(t(Oe),{modelValue:P.value,"onUpdate:modelValue":W[10]||(W[10]=q=>P.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",Wnt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.category_id")),1)]),_:1}),c("div",Gnt,[c("div",Znt,[l(t(Bt),{modelValue:g.value,"onUpdate:modelValue":W[11]||(W[11]=q=>g.value=q),search:Ke.value,"onUpdate:search":W[12]||(W[12]=q=>Ke.value=q),options:pt.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:N,onSearch:Ze,onClear:yt},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Knt,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.brand_id")),1)]),_:1}),c("div",Xnt,[c("div",Ynt,[l(t(Bt),{modelValue:v.value,"onUpdate:modelValue":W[13]||(W[13]=q=>v.value=q),search:ft.value,"onUpdate:search":W[14]||(W[14]=q=>ft.value=q),options:kt.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:Q,onSearch:ze,onClear:it},null,8,["modelValue","search","options","placeholder"])])])])])):Me("",!0),l(t(mn),{title:t(a)("views.stock_adjustment_in_product_serial.table.title"),data:T.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:T.value?T.value.meta:null,onDataListChanged:Xe},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.image")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product_serial.table.cols.stock_adjustment_code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product_serial.table.cols.product_name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product_serial.table.cols.serial")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),T.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[T.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",Qnt,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(T.value.data,(q,ve)=>(L(),ge(t(X).Tr,{key:q.ulid,class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[l(Eo,{"image-url":Jt(q),"wrapper-class":"w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in","icon-class":"w-4 h-4 text-slate-400"},null,8,["image-url"])]),_:2},1024),l(t(X).Td,null,{default:f(()=>{var te;return[c("div",Jnt,_((te=q.stock_adjustment)==null?void 0:te.code),1)]}),_:2},1024),l(t(X).Td,null,{default:f(()=>{var te,ne,ye,Ve,We;return[c("div",est,_(((ye=(ne=(te=q.stock_adjustment_in_product)==null?void 0:te.product_unit)==null?void 0:ne.product)==null?void 0:ye.name)??"-"),1),c("div",tst," ["+_(((We=(Ve=q.stock_adjustment_in_product)==null?void 0:Ve.product_unit)==null?void 0:We.code)??"-")+"] ",1)]}),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",ast,_(q.serial),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",nst,[l(t(me),{variant:"outline-secondary",onClick:te=>Ue(ve)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]),l(t($t),{open:x.value,onClose:W[16]||(W[16]=q=>x.value=!1)},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",sst,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",ost,_(t(a)("components.delete-modal.title")),1),c("div",rst,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),ist,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",lst,[l(t(me),{type:"button",variant:"outline-secondary",onClick:W[15]||(W[15]=q=>x.value=!1),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:ht},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])],64))}}),cst={class:"mt-8"},dst={class:"ml-4 mr-4"},ust={class:"font-medium"},pst={class:"mt-1 text-slate-500"},hst=Ce({__name:"StockAdjustmentInProductSerialIndex",setup(n){const{t:e}=tt();ct();const a=Za(),s=new cn,o=O(xe.LIST),r=O(!1),i=O("views.stock_adjustment_in_product_serial.page_title"),u=O("hidden"),h=O(""),m=O(null),p=O(),b=O(""),x=O("");St("bind[stockAdjustmentInProductSerialNotification]",P=>{p.value=P});const w=P=>{r.value=P},$=P=>{switch(o.value=P,P){case xe.LIST:default:i.value="views.stock_adjustment_in_product_serial.page_title";break}},D=async()=>{const P=await s.readProfile();P.success&&a.setUserContext(P.data)},V=P=>{u.value=P.alertType,h.value=P.title,m.value=P.alertList},R=P=>{b.value=P.title,x.value=P.content,p.value&&p.value.showToast()},E=()=>{h.value="",m.value=null,u.value="hidden"};return(P,S)=>(L(),U("div",cst,[l(t(da),{visible:r.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(i.value)),1)]),optional:f(()=>[]),_:1}),l(dn,{"alert-type":u.value,title:h.value,"alert-list":m.value,onDismiss:E},null,8,["alert-type","title","alert-list"]),l(OB,{onLoadingState:w,onModeState:$,onUpdateProfile:D,onShowAlertplaceholder:V,onShowNotification:R})]),_:1},8,["visible"]),l(fn,{"ref-key":"stockAdjustmentInProductSerialNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",dst,[c("div",ust,_(b.value),1),c("div",pst,_(x.value),1)])]),_:1})]))}});class fst{constructor(){mt(this,"ziggyRoute");mt(this,"ziggyRouteStore",ha());mt(this,"errorHandlerService");this.ziggyRoute=this.ziggyRouteStore.getZiggy,this.errorHandlerService=new tn}useStockAdjustmentOutProductSerialCreateForm(){const e=je("api.post.stock_adjustment_out_product_serial.save",void 0,!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",e,{company_id:"",branch_id:"",stock_adjustment_id:"",stock_adjustment_out_product_id:"",serial:""})}useStockAdjustmentOutProductSerialEditForm(e){const a=je("api.post.stock_adjustment_out_product_serial.edit",{stock_adjustment_out_product_serial:e},!0,this.ziggyRoute);return et.axios().defaults.withCredentials=!0,et.axios().defaults.withXSRFToken=!0,Ut("post",a,{serial:""})}async readAnyPaginate(e){const a={success:!1};try{const s={};e.with_trashed!==void 0&&(s.with_trashed=e.with_trashed),s.company_id=e.company_id,e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.stock_adjustment_code&&(s.stock_adjustment_code=e.stock_adjustment_code),e.stock_adjustment_start_date&&(s.stock_adjustment_start_date=e.stock_adjustment_start_date),e.stock_adjustment_end_date&&(s.stock_adjustment_end_date=e.stock_adjustment_end_date),e.stock_adjustment_category_id&&(s.stock_adjustment_category_id=e.stock_adjustment_category_id),e.stock_adjustment_in_warehouse_id&&(s.stock_adjustment_in_warehouse_id=e.stock_adjustment_in_warehouse_id),e.stock_adjustment_out_warehouse_id&&(s.stock_adjustment_out_warehouse_id=e.stock_adjustment_out_warehouse_id),e.product_unit_code&&(s.product_unit_code=e.product_unit_code),e.product_unit_product_name&&(s.product_unit_product_name=e.product_unit_product_name),e.product_unit_product_category_id&&(s.product_unit_product_category_id=e.product_unit_product_category_id),e.product_unit_product_brand_id&&(s.product_unit_product_brand_id=e.product_unit_product_brand_id),s.refresh=e.refresh,s.paginate={page:e.page,per_page:e.per_page};const o=je("api.get.stock_adjustment_out_product_serial.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async readAnyGet(e){const a={success:!1};try{const s={};s.with_trashed=e.with_trashed,s.company_id=e.company_id,e.branch_id&&(s.branch_id=e.branch_id),e.search&&(s.search=e.search),e.stock_adjustment_code&&(s.stock_adjustment_code=e.stock_adjustment_code),e.stock_adjustment_start_date&&(s.stock_adjustment_start_date=e.stock_adjustment_start_date),e.stock_adjustment_end_date&&(s.stock_adjustment_end_date=e.stock_adjustment_end_date),e.stock_adjustment_category_id&&(s.stock_adjustment_category_id=e.stock_adjustment_category_id),e.stock_adjustment_in_warehouse_id&&(s.stock_adjustment_in_warehouse_id=e.stock_adjustment_in_warehouse_id),e.stock_adjustment_out_warehouse_id&&(s.stock_adjustment_out_warehouse_id=e.stock_adjustment_out_warehouse_id),e.product_unit_code&&(s.product_unit_code=e.product_unit_code),e.product_unit_product_name&&(s.product_unit_product_name=e.product_unit_product_name),e.product_unit_product_category_id&&(s.product_unit_product_category_id=e.product_unit_product_category_id),e.product_unit_product_brand_id&&(s.product_unit_product_brand_id=e.product_unit_product_brand_id),s.refresh=e.refresh,s.get={limit:e.limit};const o=je("api.get.stock_adjustment_out_product_serial.read_any",{_query:s},!1,this.ziggyRoute),r=await nt.get(o);return r.status==vt.OK&&(a.success=!0,a.data=r.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async read(e){const a={success:!1};try{const s=je("api.get.stock_adjustment_out_product_serial.read",{stock_adjustment_out_product_serial:e},!1,this.ziggyRoute),o=await nt.get(s);return o.status==vt.OK&&(a.success=!0,a.data=o.data.data),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}async delete(e){const a={success:!1};try{const s=je("api.post.stock_adjustment_out_product_serial.delete",{stock_adjustment_out_product_serial:e},!1,this.ziggyRoute);return(await nt.post(s)).status==vt.OK&&(a.success=!0),a}catch(s){return s instanceof Error&&s.message.includes("Ziggy error")?this.errorHandlerService.generateZiggyUrlErrorServiceResponse(s.message):ot(s)?this.errorHandlerService.generateAxiosErrorServiceResponse(s):a}}}const mst={class:"grid grid-cols-12 gap-6 mt-5"},vst={class:"col-span-12 intro-y lg:col-span-12"},yst={class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},_st={class:"col-span-12 lg:col-span-3"},gst={class:"col-span-12 lg:col-span-3"},kst={class:"col-span-12 md:col-span-12 lg:col-span-2 flex items-end"},bst={key:0,class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},wst={class:"col-span-12 md:col-span-6 lg:col-span-2"},xst={class:"col-span-12 md:col-span-6 lg:col-span-2"},Mst={class:"flex items-center gap-2"},Cst={class:"flex-1 relative z-30"},Sst={class:"col-span-12 md:col-span-6 lg:col-span-2"},Ist={class:"flex items-center gap-2"},Lst={class:"flex-1 relative z-30"},$st={class:"col-span-12 md:col-span-6 lg:col-span-2"},Ast={class:"flex items-center gap-2"},Est={class:"flex-1 relative z-30"},Tst={class:"col-span-12 md:col-span-6 lg:col-span-2"},Pst={class:"col-span-12 md:col-span-6 lg:col-span-2"},Dst={class:"col-span-12 md:col-span-6 lg:col-span-2"},Rst={class:"flex items-center gap-2"},Ost={class:"flex-1 relative z-30"},Vst={class:"col-span-12 md:col-span-6 lg:col-span-2"},Ust={class:"flex items-center gap-2"},Fst={class:"flex-1 relative z-30"},jst={class:"flex justify-center italic"},Hst={class:"font-medium whitespace-nowrap"},Nst={class:"whitespace-nowrap"},zst={class:"text-slate-500 text-xs whitespace-nowrap"},Bst={class:"whitespace-nowrap"},qst={class:"flex justify-end gap-1"},Wst={class:"p-5 text-center"},Gst={class:"mt-5 text-3xl"},Zst={class:"mt-2 text-slate-500"},Kst=c("br",null,null,-1),Xst={class:"px-5 pb-8 text-center"},VB=Ce({__name:"StockAdjustmentOutProductSerialList",emits:["mode-state","loading-state","update-profile","show-alertplaceholder","show-notification"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new fst,r=new Ro,i=new Xs,u=new Do,h=new co,m=zt(),p=e,b=O(""),x=O(!1);O(null);const w=O(null),$=O(null),D=O(""),V=O(!1),R=O(""),E=O(""),P=O(""),S=O(null),C=O(null),M=O(null),g=O(null),v=O(null),T=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),j=ee(()=>m.isUserLocationSelected),B=ee(()=>m.selectedUserLocation),oe=O(null),be=O(""),$e=ee(()=>(oe.value??[]).map(ae=>({value:ae.code,label:ae.name}))),Le=O(null),de=O(""),J=ee(()=>(Le.value??[]).map(ae=>({value:ae.code,label:ae.name}))),G=O(null),ce=O(""),Ee=ee(()=>(G.value??[]).map(ae=>({value:ae.code,label:ae.name}))),He=O(null),Ke=O(""),pt=ee(()=>(He.value??[]).map(ae=>({value:ae.code,label:ae.name}))),ut=O(null),ft=O(""),kt=ee(()=>(ut.value??[]).map(ae=>({value:ae.code,label:ae.name})));at(async()=>{if(p("mode-state",xe.LIST),!j.value){s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}const ae=new Date,W=new Date(ae.getFullYear(),ae.getMonth(),1,0,0,0),q=new Date(ae.getFullYear(),ae.getMonth()+1,0,23,59,59);w.value=Ya(W.toString(),"YYYY-MM-DD HH:mm:ss"),$.value=Ya(q.toString(),"YYYY-MM-DD HH:mm:ss"),await Ae("",!0,1,10)});const Ae=async(ae,W,q,ve)=>{p("loading-state",!0),D.value=ae;const te={with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,stock_adjustment_code:R.value||null,stock_adjustment_start_date:w.value||null,stock_adjustment_end_date:$.value||null,stock_adjustment_category_id:S.value,stock_adjustment_in_warehouse_id:C.value,stock_adjustment_out_warehouse_id:M.value,product_unit_code:E.value||null,product_unit_product_name:P.value||null,product_unit_product_category_id:g.value,product_unit_product_brand_id:v.value,refresh:W,page:q,per_page:ve},ne=await o.readAnyPaginate(te);ne.success&&ne.data?(T.value=ne.data,Et("hidden","",null)):Et("danger","",ne.errors),p("loading-state",!1)},Xe=async ae=>{await Ae(ae.search.text,!0,ae.pagination.page,ae.pagination.per_page)},ie=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},Y=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},ue=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},pe=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},H=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},N=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},Q=async()=>{var W;const ae=((W=T.value)==null?void 0:W.meta.per_page)||10;await Ae(D.value,!0,1,ae)},he=async(ae="")=>{if(!B.value)return;const W=await h.readAnyGet({with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,status:void 0,refresh:!1,limit:20});W.success&&W.data&&(Le.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Se=async(ae="")=>{if(!B.value)return;const W=await h.readAnyGet({with_trashed:!1,company_id:B.value.company.id,branch_id:B.value.branch.id,search:ae,status:void 0,refresh:!1,limit:20});W.success&&W.data&&(G.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Re=async(ae="")=>{if(!B.value)return;const W=await r.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,include_id:void 0,refresh:!1,limit:20});W.success&&W.data&&(oe.value=W.data.data.map(q=>({code:q.id,name:q.name})))},Ze=async(ae="")=>{if(!B.value)return;const W=await i.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,type:1,refresh:!1,limit:20});W.success&&W.data&&(He.value=W.data.data.map(q=>({code:q.id,name:q.name})))},ze=async(ae="")=>{if(!B.value)return;const W=await u.readAnyGet({with_trashed:!1,company_id:B.value.company.id,search:ae,refresh:!1,limit:20});W.success&&W.data&&(ut.value=W.data.data.map(q=>({code:q.id,name:q.name})))},qe=async()=>{S.value=null,await Re(""),await ue()},Be=async()=>{C.value=null,await he(""),await pe()},lt=async()=>{M.value=null,await Se(""),await H()},yt=async()=>{g.value=null,await Ze(""),await N()},it=async()=>{v.value=null,await ze(""),await Q()},Pe=async()=>{V.value=!V.value,V.value&&await Promise.all([Re(be.value),he(de.value),Se(ce.value),Ze(Ke.value),ze(ft.value)])},Ue=ae=>{if(!T.value)return;const W=T.value.data[ae].ulid;b.value=W,x.value=!0},ht=async()=>{x.value=!1,p("loading-state",!0);const ae=await o.delete(b.value);p("loading-state",!1),ae.success?(p("update-profile"),await Ae("",!0,1,10),Mt(a("components.delete-modal.title"),a("components.delete-modal.message"))):Et("danger","",ae.errors)},Mt=(ae,W)=>{p("show-notification",{title:ae,content:W})},Et=(ae,W,q)=>{p("show-alertplaceholder",{alertType:ae,title:W,alertList:q})},Jt=ae=>{var ve,te,ne,ye;const W=((ne=(te=(ve=ae.stock_adjustment_out_product)==null?void 0:ve.product_unit)==null?void 0:te.product)==null?void 0:ne.product_images)??[];if(W.length===0)return null;const q=W.find(Ve=>Ve.is_main);return q!=null&&q.url?q.url:((ye=W[0])==null?void 0:ye.url)??null};return(ae,W)=>(L(),U(ke,null,[c("div",mst,[c("div",vst,[c("div",yst,[c("div",_st,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.start_date")),1)]),_:1}),l(t(oo),{modelValue:w.value,"onUpdate:modelValue":W[0]||(W[0]=q=>w.value=q),onChange:ie},null,8,["modelValue"])]),c("div",gst,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.end_date")),1)]),_:1}),l(t(oo),{modelValue:$.value,"onUpdate:modelValue":W[1]||(W[1]=q=>$.value=q),onChange:ie},null,8,["modelValue"])]),c("div",kst,[l(t(me),{variant:"soft-secondary",class:"shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300",onClick:Pe},{default:f(()=>[l(t(re),{icon:"Filter",class:"w-4 h-5"})]),_:1})])]),V.value?(L(),U("div",bst,[c("div",wst,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.stock_adjustment_code")),1)]),_:1}),l(t(Oe),{modelValue:R.value,"onUpdate:modelValue":W[2]||(W[2]=q=>R.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",xst,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.category_id")),1)]),_:1}),c("div",Mst,[c("div",Cst,[l(t(Bt),{modelValue:S.value,"onUpdate:modelValue":W[3]||(W[3]=q=>S.value=q),search:be.value,"onUpdate:search":W[4]||(W[4]=q=>be.value=q),options:$e.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:ue,onSearch:Re,onClear:qe},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Sst,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.in_warehouse_id")),1)]),_:1}),c("div",Ist,[c("div",Lst,[l(t(Bt),{modelValue:C.value,"onUpdate:modelValue":W[5]||(W[5]=q=>C.value=q),search:de.value,"onUpdate:search":W[6]||(W[6]=q=>de.value=q),options:J.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:pe,onSearch:he,onClear:Be},null,8,["modelValue","search","options","placeholder"])])])]),c("div",$st,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.out_warehouse_id")),1)]),_:1}),c("div",Ast,[c("div",Est,[l(t(Bt),{modelValue:M.value,"onUpdate:modelValue":W[7]||(W[7]=q=>M.value=q),search:ce.value,"onUpdate:search":W[8]||(W[8]=q=>ce.value=q),options:Ee.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:H,onSearch:Se,onClear:lt},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Tst,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.product_unit_code")),1)]),_:1}),l(t(Oe),{modelValue:E.value,"onUpdate:modelValue":W[9]||(W[9]=q=>E.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",Pst,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.stock_adjustment.fields.product_name")),1)]),_:1}),l(t(Oe),{modelValue:P.value,"onUpdate:modelValue":W[10]||(W[10]=q=>P.value=q),type:"text",onChange:Y},null,8,["modelValue"])]),c("div",Dst,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.category_id")),1)]),_:1}),c("div",Rst,[c("div",Ost,[l(t(Bt),{modelValue:g.value,"onUpdate:modelValue":W[11]||(W[11]=q=>g.value=q),search:Ke.value,"onUpdate:search":W[12]||(W[12]=q=>Ke.value=q),options:pt.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:N,onSearch:Ze,onClear:yt},null,8,["modelValue","search","options","placeholder"])])])]),c("div",Vst,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.brand_id")),1)]),_:1}),c("div",Ust,[c("div",Fst,[l(t(Bt),{modelValue:v.value,"onUpdate:modelValue":W[13]||(W[13]=q=>v.value=q),search:ft.value,"onUpdate:search":W[14]||(W[14]=q=>ft.value=q),options:kt.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:Q,onSearch:ze,onClear:it},null,8,["modelValue","search","options","placeholder"])])])])])):Me("",!0),l(t(mn),{title:t(a)("views.stock_adjustment_out_product_serial.table.title"),data:T.value,"enable-search":!0,"can-print":!0,"can-export":!0,pagination:T.value?T.value.meta:null,onDataListChanged:Xe},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.image")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product_serial.table.cols.stock_adjustment_code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product_serial.table.cols.product_name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_out_product_serial.table.cols.serial")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"})]),_:1})]),_:1}),T.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[T.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"5"},{default:f(()=>[c("div",jst,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(T.value.data,(q,ve)=>(L(),ge(t(X).Tr,{key:q.ulid,class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[l(Eo,{"image-url":Jt(q),"wrapper-class":"w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in","icon-class":"w-4 h-4 text-slate-400"},null,8,["image-url"])]),_:2},1024),l(t(X).Td,null,{default:f(()=>{var te;return[c("div",Hst,_((te=q.stock_adjustment)==null?void 0:te.code),1)]}),_:2},1024),l(t(X).Td,null,{default:f(()=>{var te,ne,ye,Ve,We;return[c("div",Nst,_(((ye=(ne=(te=q.stock_adjustment_out_product)==null?void 0:te.product_unit)==null?void 0:ne.product)==null?void 0:ye.name)??"-"),1),c("div",zst," ["+_(((We=(Ve=q.stock_adjustment_out_product)==null?void 0:Ve.product_unit)==null?void 0:We.code)??"-")+"] ",1)]}),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",Bst,_(q.serial),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",qst,[l(t(me),{variant:"outline-secondary",onClick:te=>Ue(ve)},{default:f(()=>[l(t(re),{icon:"Trash2",class:"w-4 h-4 text-danger"})]),_:2},1032,["onClick"])])]),_:2},1024)]),_:2},1024))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]),l(t($t),{open:x.value,onClose:W[16]||(W[16]=q=>x.value=!1)},{default:f(()=>[l(t($t).Panel,null,{default:f(()=>[c("div",Wst,[l(t(re),{icon:"XCircle",class:"w-16 h-16 mx-auto mt-3 text-danger"}),c("div",Gst,_(t(a)("components.delete-modal.title")),1),c("div",Zst,[A(_(t(a)("components.delete-modal.desc_1"))+" ",1),Kst,A(" "+_(t(a)("components.delete-modal.desc_2")),1)])]),c("div",Xst,[l(t(me),{type:"button",variant:"outline-secondary",onClick:W[15]||(W[15]=q=>x.value=!1),class:"w-24 mr-1"},{default:f(()=>[A(_(t(a)("components.buttons.cancel")),1)]),_:1}),l(t(me),{type:"button",variant:"danger",class:"w-24",onClick:ht},{default:f(()=>[A(_(t(a)("components.buttons.delete")),1)]),_:1})])]),_:1})]),_:1},8,["open"])],64))}}),Yst={class:"mt-8"},Qst={class:"ml-4 mr-4"},Jst={class:"font-medium"},eot={class:"mt-1 text-slate-500"},tot=Ce({__name:"StockAdjustmentOutProductSerialIndex",setup(n){const{t:e}=tt();ct();const a=Za(),s=new cn,o=O(xe.LIST),r=O(!1),i=O("views.stock_adjustment_out_product_serial.page_title"),u=O("hidden"),h=O(""),m=O(null),p=O(),b=O(""),x=O("");St("bind[stockAdjustmentOutProductSerialNotification]",P=>{p.value=P});const w=P=>{r.value=P},$=P=>{switch(o.value=P,P){case xe.LIST:default:i.value="views.stock_adjustment_out_product_serial.page_title";break}},D=async()=>{const P=await s.readProfile();P.success&&a.setUserContext(P.data)},V=P=>{u.value=P.alertType,h.value=P.title,m.value=P.alertList},R=P=>{b.value=P.title,x.value=P.content,p.value&&p.value.showToast()},E=()=>{h.value="",m.value=null,u.value="hidden"};return(P,S)=>(L(),U("div",Yst,[l(t(da),{visible:r.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(i.value)),1)]),optional:f(()=>[]),_:1}),l(dn,{"alert-type":u.value,title:h.value,"alert-list":m.value,onDismiss:E},null,8,["alert-type","title","alert-list"]),l(VB,{onLoadingState:w,onModeState:$,onUpdateProfile:D,onShowAlertplaceholder:V,onShowNotification:R})]),_:1},8,["visible"]),l(fn,{"ref-key":"stockAdjustmentOutProductSerialNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",Qst,[c("div",Jst,_(b.value),1),c("div",eot,_(x.value),1)])]),_:1})]))}}),aot={class:"mt-8"},not={class:"flex w-full mt-4 sm:w-auto sm:mt-0"},sot={class:"ml-4 mr-4"},oot={class:"font-medium"},rot={class:"mt-1 text-slate-500"},iot=Ce({__name:"ProductWithRemainingStockIndex",setup(n){const{t:e}=tt(),a=ct(),s=Za(),o=new cn,r=O(xe.LIST),i=O(!1),u=O("views.product.page_title_with_remaining_stock"),h=O("hidden"),m=O(""),p=O(null),b=O(),x=O(""),w=O(""),$=async()=>{C(),S(r.value),r.value=xe.LIST,a.push({name:"side-menu-product-product-list"})},D=M=>{i.value=M},V=M=>{r.value=M},R=async()=>{const M=await o.readProfile();M.success&&s.setUserContext(M.data)},E=M=>{h.value=M.alertType,m.value=M.title,p.value=M.alertList},P=M=>{x.value=M.title,w.value=M.content,b.value&&b.value.showToast()},S=M=>{},C=()=>{m.value="",p.value=null,h.value="hidden"};return(M,g)=>{const v=Qt("RouterView");return L(),U("div",aot,[l(t(da),{visible:i.value},{default:f(()=>[l(t(an),null,{title:f(()=>[A(_(t(e)(u.value)),1)]),optional:f(()=>[c("div",not,[l(t(me),{as:"a",href:"#",variant:"primary",class:"shadow-md",onClick:$},{default:f(()=>[l(t(re),{icon:"ArrowLeft",class:"w-4 h-4"}),A("  "+_(t(e)("components.buttons.back")),1)]),_:1})])]),_:1}),l(dn,{"alert-type":h.value,title:m.value,"alert-list":p.value,onDismiss:C},null,8,["alert-type","title","alert-list"]),l(v,{onLoadingState:D,onModeState:V,onUpdateProfile:R,onShowAlertplaceholder:E,onShowNotification:P})]),_:1},8,["visible"]),l(fn,{"ref-key":"productNotification",options:{duration:3e3},class:"flex"},{default:f(()=>[l(t(re),{icon:"CheckCircle",class:"text-success"}),c("div",sot,[c("div",oot,_(x.value),1),c("div",rot,_(w.value),1)])]),_:1})])}}}),lot={class:"grid grid-cols-12 gap-6 mt-5"},cot={class:"col-span-12 intro-y lg:col-span-12"},dot={class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},uot={class:"col-span-12 lg:col-span-2 md:col-span-6"},pot={class:"flex items-center gap-2"},hot={class:"flex-1 relative z-30"},fot={class:"col-span-12 lg:col-span-2 md:col-span-6"},mot={class:"flex items-center gap-2"},vot={class:"flex-1 relative z-30"},yot={class:"col-span-12 lg:col-span-3 md:col-span-6"},_ot={class:"col-span-12 lg:col-span-3 md:col-span-6"},got={class:"flex items-center gap-2"},kot={class:"flex-1 relative z-30"},bot={class:"col-span-12 md:col-span-12 lg:col-span-2 flex items-end"},wot={key:0,class:"grid grid-cols-12 gap-4 gap-y-3 mb-3 relative z-50"},xot={class:"col-span-12 lg:col-span-2 md:col-span-6"},Mot=c("option",{value:null},null,-1),Cot=c("option",{value:"has_stock"},"Punya Stok",-1),Sot=c("option",{value:"empty"},"Stok Kosong",-1),Iot=c("option",{value:"valid"},"Stok Valid",-1),Lot=c("option",{value:"invalid"},"Stok Invalid",-1),$ot={class:"col-span-12 lg:col-span-2 md:col-span-6"},Aot={class:"col-span-12 lg:col-span-2 md:col-span-6"},Eot={class:"col-span-12 lg:col-span-2 md:col-span-6"},Tot=c("option",{value:null},null,-1),Pot=c("option",{value:"desc"},"Tertinggi ke Terendah",-1),Dot=c("option",{value:"asc"},"Terendah ke Tertinggi",-1),Rot={class:"flex justify-center italic"},Oot={class:"font-medium whitespace-nowrap"},Vot={class:"font-medium whitespace-nowrap"},Uot={class:"font-medium whitespace-nowrap"},Fot={class:"font-medium"},jot={key:0},Hot={key:1},Not=Ce({__name:"ProductWithRemainingStockList",emits:["mode-state","loading-state","show-alertplaceholder"],setup(n,{emit:e}){const{t:a}=tt(),s=ct(),o=new ur,r=new Xs,i=new Do,u=new co,h=zt(),m=e,p=O({search:"",endDate:null,warehouse_id:null,less_than:null,greater_than:null,category_id:null,brand_id:null,stock_filter:null,sort_by_remaining_stock:null}),b=O({data:[],meta:{current_page:0,from:null,last_page:0,path:"",per_page:0,to:null,total:0},links:{first:"",last:"",prev:null,next:null}}),x=ee(()=>h.isUserLocationSelected),w=ee(()=>h.selectedUserLocation),$=O(null),D=O(""),V=ee(()=>($.value??[]).map(ie=>({value:ie.code,label:ie.name}))),R=O(null),E=O(""),P=ee(()=>(R.value??[]).map(ie=>({value:ie.code,label:ie.name}))),S=O(null),C=O(""),M=ee(()=>(S.value??[]).map(ie=>({value:ie.code,label:ie.name}))),g=O(!1);at(async()=>{if(m("mode-state",xe.LIST),!x.value){s.push({name:"side-menu-error-code",params:{code:qt.USERLOCATION_REQUIRED}});return}p.value.search="";const ie=new Date,Y=new Date(ie.getFullYear(),ie.getMonth()+1,0,23,59,59);p.value.endDate=Ya(Y.toString(),"YYYY-MM-DD HH:mm:ss"),await Promise.all([pt(),ut(),ft()]),await v("",!0,1,10)});const v=async(ie,Y,ue,pe)=>{m("loading-state",!0);const H={with_trashed:!1,company_id:w.value.company.id,search:ie,category_id:p.value.category_id||void 0,brand_id:p.value.brand_id||void 0,type:1,with_remaining_stock:{end_date:p.value.endDate,warehouse_id:p.value.warehouse_id,stock_filter:p.value.stock_filter,less_than:kt(p.value.less_than),greater_than:kt(p.value.greater_than),sort_by_remaining_stock:p.value.sort_by_remaining_stock},refresh:Y,page:ue,per_page:pe},N=await o.readAnyPaginate(H);N.success&&N.data?(b.value=N.data,Ae("hidden","",null)):Ae("danger","",N.errors),m("loading-state",!1)},T=async ie=>{p.value.search=ie.search.text,await v(p.value.search,!1,ie.pagination.page,ie.pagination.per_page)},j=async()=>{var Y;const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},B=async()=>{var Y;const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},oe=async()=>{var Y;const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},be=async()=>{var Y;const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},$e=async()=>{var Y;const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},Le=async()=>{var Y;const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},de=async()=>{var Y;const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},J=async()=>{var Y;p.value.category_id=null,D.value="";const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},G=async()=>{var Y;p.value.brand_id=null,E.value="";const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},ce=async()=>{var Y;p.value.warehouse_id=null,C.value="";const ie=((Y=b.value)==null?void 0:Y.meta.per_page)||10;await v(p.value.search,!0,1,ie)},Ee=ie=>ie.product_units.find(Y=>Y.is_primary_unit)??null,He=ie=>{var pe;const Y=(ie==null?void 0:ie.product_images)??[];if(Y.length===0)return null;const ue=Y.find(H=>H.is_main);return ue!=null&&ue.url?ue.url:((pe=Y[0])==null?void 0:pe.url)??null},Ke=ie=>{if(ie.remaining_stock_base_unit===void 0||ie.remaining_stock_base_unit===null)return null;const Y=Ee(ie);return!Y||!Y.conversion_value?null:ie.remaining_stock_base_unit/Y.conversion_value},pt=async(ie="")=>{const Y=await r.readAnyGet({with_trashed:!1,search:ie,company_id:w.value.company.id,type:1,refresh:!1,limit:10});Y.success&&Y.data&&($.value=Y.data.data.map(ue=>({code:ue.id,name:ue.name})))},ut=async(ie="")=>{const Y=await i.readAnyGet({with_trashed:!1,search:ie,company_id:w.value.company.id,refresh:!1,limit:10});Y.success&&Y.data&&(R.value=Y.data.data.map(ue=>({code:ue.id,name:ue.name})))},ft=async(ie="")=>{const Y=await u.readAnyGet({with_trashed:!1,company_id:w.value.company.id,branch_id:w.value.branch.id,search:ie,status:void 0,refresh:!1,limit:20});Y.success&&Y.data&&(S.value=Y.data.data.map(ue=>({code:ue.id,name:ue.name})))},kt=ie=>ie===null||Number.isNaN(ie)?null:ie,Ae=(ie,Y,ue)=>{m("show-alertplaceholder",{alertType:ie,title:Y,alertList:ue})},Xe=()=>{g.value=!g.value};return(ie,Y)=>(L(),U("div",lot,[c("div",cot,[c("div",dot,[c("div",uot,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.category_id")),1)]),_:1}),c("div",pot,[c("div",hot,[l(t(Bt),{modelValue:p.value.category_id,"onUpdate:modelValue":Y[0]||(Y[0]=ue=>p.value.category_id=ue),search:D.value,"onUpdate:search":Y[1]||(Y[1]=ue=>D.value=ue),options:V.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:B,onSearch:pt,onClear:J},null,8,["modelValue","search","options","placeholder"])])])]),c("div",fot,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.brand_id")),1)]),_:1}),c("div",mot,[c("div",vot,[l(t(Bt),{modelValue:p.value.brand_id,"onUpdate:modelValue":Y[2]||(Y[2]=ue=>p.value.brand_id=ue),search:E.value,"onUpdate:search":Y[3]||(Y[3]=ue=>E.value=ue),options:P.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:oe,onSearch:ut,onClear:G},null,8,["modelValue","search","options","placeholder"])])])]),c("div",yot,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.product.fields.with_remaining_stock_end_date")),1)]),_:1}),l(t(oo),{modelValue:p.value.endDate,"onUpdate:modelValue":Y[4]||(Y[4]=ue=>p.value.endDate=ue),placeholder:t(a)("views.product.fields.with_remaining_stock_end_date"),onChange:j},null,8,["modelValue","placeholder"])]),c("div",_ot,[l(t(K),null,{default:f(()=>[A(_(t(a)("views.warehouse.page_title")),1)]),_:1}),c("div",got,[c("div",kot,[l(t(Bt),{modelValue:p.value.warehouse_id,"onUpdate:modelValue":Y[5]||(Y[5]=ue=>p.value.warehouse_id=ue),search:C.value,"onUpdate:search":Y[6]||(Y[6]=ue=>C.value=ue),options:M.value,placeholder:t(a)("components.dropdown.placeholder"),onChange:be,onSearch:ft,onClear:ce},null,8,["modelValue","search","options","placeholder"])])])]),c("div",bot,[l(t(me),{variant:"soft-secondary",class:"shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300",onClick:Xe},{default:f(()=>[l(t(re),{icon:"Filter",class:"w-4 h-5"})]),_:1})])]),g.value?(L(),U("div",wot,[c("div",xot,[l(t(K),null,{default:f(()=>[A(" Filter Stok ")]),_:1}),l(t(Zt),{modelValue:p.value.stock_filter,"onUpdate:modelValue":Y[7]||(Y[7]=ue=>p.value.stock_filter=ue),onChange:Le},{default:f(()=>[Mot,Cot,Sot,Iot,Lot]),_:1},8,["modelValue"])]),c("div",$ot,[l(t(K),null,{default:f(()=>[A(" Stok > Dari ")]),_:1}),l(t(Oe),{modelValue:p.value.greater_than,"onUpdate:modelValue":Y[8]||(Y[8]=ue=>p.value.greater_than=ue),modelModifiers:{number:!0},type:"number",onChange:$e},null,8,["modelValue"])]),c("div",Aot,[l(t(K),null,{default:f(()=>[A(" Stok < Dari ")]),_:1}),l(t(Oe),{modelValue:p.value.less_than,"onUpdate:modelValue":Y[9]||(Y[9]=ue=>p.value.less_than=ue),modelModifiers:{number:!0},type:"number",onChange:$e},null,8,["modelValue"])]),c("div",Eot,[l(t(K),null,{default:f(()=>[A(" Urutkan Stok ")]),_:1}),l(t(Zt),{modelValue:p.value.sort_by_remaining_stock,"onUpdate:modelValue":Y[10]||(Y[10]=ue=>p.value.sort_by_remaining_stock=ue),onChange:de},{default:f(()=>[Tot,Pot,Dot]),_:1},8,["modelValue"])])])):Me("",!0),l(t(mn),{title:t(a)("views.product.table.title")+" - "+t(a)("views.product.with_remaining_stock_suffix"),data:b.value,"enable-search":!0,"can-print":!1,"can-export":!1,pagination:b.value?b.value.meta:null,onDataListChanged:T},{content:f(()=>[l(t(X),{class:"mt-5",hover:!0},{default:f(()=>[l(t(X).Thead,{variant:"light"},{default:f(()=>[l(t(X).Tr,null,{default:f(()=>[l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.image")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.code")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.category")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.brand")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.product.table.cols.name")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap text-right"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.remaining_stock")),1)]),_:1}),l(t(X).Th,{class:"whitespace-nowrap"},{default:f(()=>[A(_(t(a)("views.stock_adjustment_in_product.table.cols.product_unit")),1)]),_:1})]),_:1})]),_:1}),b.value!==null?(L(),ge(t(X).Tbody,{key:0},{default:f(()=>[b.value.data.length===0?(L(),ge(t(X).Tr,{key:0,class:"intro-x"},{default:f(()=>[l(t(X).Td,{colspan:"7"},{default:f(()=>[c("div",Rot,_(t(a)("components.data-list.data_not_found")),1)]),_:1})]),_:1})):Me("",!0),(L(!0),U(ke,null,Fe(b.value.data,ue=>(L(),ge(t(X).Tr,{key:ue.ulid,class:"intro-x"},{default:f(()=>[l(t(X).Td,null,{default:f(()=>[l(Eo,{"image-url":He(ue)},null,8,["image-url"])]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",Oot,_(ue.code),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",Vot,_(ue.category.name),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>{var pe;return[c("div",Uot,_(((pe=ue.brand)==null?void 0:pe.name)??"-"),1)]}),_:2},1024),l(t(X).Td,null,{default:f(()=>[c("div",Fot,_(ue.name),1)]),_:2},1024),l(t(X).Td,{class:"text-right"},{default:f(()=>[A(_(t(_a)(Ke(ue)??0)),1)]),_:2},1024),l(t(X).Td,null,{default:f(()=>{var pe;return[Ee(ue)?(L(),U("span",jot,_((pe=Ee(ue))==null?void 0:pe.unit.name),1)):(L(),U("span",Hot,"-"))]}),_:2},1024)]),_:2},1024))),128))]),_:1})):Me("",!0)]),_:1})]),_:1},8,["title","data","pagination"])])]))}}),zot=[{path:"/",redirect:"/auth/login"},{path:"/home",redirect:"/dashboard/main"},{path:"/auth",children:[{path:"/auth/login",name:"login",component:xCe},{path:"/auth/register",name:"register",component:WCe},{path:"/auth/forgot-password",name:"forgot-password",component:cSe},{path:"/auth/reset-password",name:"reset-password",component:SSe}]},{path:"/dashboard",component:X7e,children:[{path:"/dashboard/main",name:"side-menu-dashboard-maindashboard",component:rIe,meta:{remember:!0}},{path:"/dashboard/profile",name:"side-menu-dashboard-profile",component:QLe,meta:{remember:!0}},{path:"/dashboard/company",children:[{path:"/dashboard/company/company",name:"side-menu-company-company",redirect:"/dashboard/company/company/list",component:REe,children:[{path:"/dashboard/company/company/list",name:"side-menu-company-company-list",component:lTe,meta:{remember:!0}},{path:"/dashboard/company/company/create",name:"side-menu-company-company-create",component:_Te,meta:{remember:!0}},{path:"/dashboard/company/company/edit/:ulid",name:"side-menu-company-company-edit",component:LTe,meta:{remember:!0}}]},{path:"/dashboard/company/branch",name:"side-menu-company-branch",redirect:"/dashboard/company/branch/list",component:DTe,children:[{path:"/dashboard/company/branch/list",name:"side-menu-company-branch-list",component:vPe,meta:{remember:!0}},{path:"/dashboard/company/branch/create",name:"side-menu-company-branch-create",component:EPe,meta:{remember:!0}},{path:"/dashboard/company/branch/edit/:ulid",name:"side-menu-company-branch-edit",component:WPe,meta:{remember:!0}}]},{path:"/dashboard/company/warehouse",name:"side-menu-company-warehouse",redirect:"/dashboard/company/warehouse/list",component:QPe,children:[{path:"/dashboard/company/warehouse/list",name:"side-menu-company-warehouse-list",component:$De,meta:{remember:!0}},{path:"/dashboard/company/warehouse/create",name:"side-menu-company-warehouse-create",component:zDe,meta:{remember:!0}},{path:"/dashboard/company/warehouse/edit/:ulid",name:"side-menu-company-warehouse-edit",component:nRe,meta:{remember:!0}}]}]},{path:"/dashboard/finance",children:[{path:"/dashboard/finance/investor",name:"side-menu-company-investor",redirect:"/dashboard/finance/investor/list",component:cRe,children:[{path:"/dashboard/finance/investor/list",name:"side-menu-company-investor-list",component:SRe,meta:{remember:!0}},{path:"/dashboard/finance/investor/create",name:"side-menu-company-investor-create",component:DRe,meta:{remember:!0}},{path:"/dashboard/finance/investor/edit/:ulid",name:"side-menu-company-investor-edit",component:NRe,meta:{remember:!0}}]},{path:"/dashboard/finance/cash-account",name:"side-menu-finance-cash-account",redirect:"/dashboard/finance/cash-account/list",component:ZRe,children:[{path:"/dashboard/finance/cash-account/list",name:"side-menu-finance-cash-account-list",component:bOe,meta:{remember:!0}},{path:"/dashboard/finance/cash-account/create",name:"side-menu-finance-cash-account-create",component:TOe,meta:{remember:!0}},{path:"/dashboard/finance/cash-account/edit/:ulid",name:"side-menu-finance-cash-account-edit",component:NOe,meta:{remember:!0}}]}]},{path:"/dashboard/product",children:[{path:"/dashboard/product/product-category",name:"side-menu-product-product-category",redirect:"/dashboard/product/product-category/list",component:ZOe,children:[{path:"/dashboard/product/product-category/list",name:"side-menu-product-product-category-list",component:uVe,meta:{remember:!0}},{path:"/dashboard/product/product-category/create",name:"side-menu-product-product-category-create",component:bVe,meta:{remember:!0}},{path:"/dashboard/product/product-category/edit/:ulid",name:"side-menu-product-product-category-edit",component:EVe,meta:{remember:!0}}]},{path:"/dashboard/product/brand",name:"side-menu-product-brand",redirect:"/dashboard/product/brand/list",component:VVe,children:[{path:"/dashboard/product/brand/list",name:"side-menu-product-brand-list",component:YVe,meta:{remember:!0}},{path:"/dashboard/product/brand/create",name:"side-menu-product-brand-create",component:sUe,meta:{remember:!0}},{path:"/dashboard/product/brand/edit/:ulid",name:"side-menu-product-brand-edit",component:uUe,meta:{remember:!0}}]},{path:"/dashboard/product/unit",name:"side-menu-product-unit",redirect:"/dashboard/product/unit/list",component:yUe,children:[{path:"/dashboard/product/unit/list",name:"side-menu-product-unit-list",component:VUe,meta:{remember:!0}},{path:"/dashboard/product/unit/create",name:"side-menu-product-unit-create",component:ZUe,meta:{remember:!0}},{path:"/dashboard/product/unit/edit/:ulid",name:"side-menu-product-unit-edit",component:oFe,meta:{remember:!0}}]},{path:"/dashboard/product/product",name:"side-menu-product-product",redirect:"/dashboard/product/product/list",component:uFe,children:[{path:"/dashboard/product/product/list",name:"side-menu-product-product-list",component:Ije,meta:{remember:!0}},{path:"/dashboard/product/product/create",name:"side-menu-product-product-create",component:UHe,meta:{remember:!0}},{path:"/dashboard/product/product/edit/:ulid",name:"side-menu-product-product-edit",component:PNe,meta:{remember:!0}}]},{path:"/dashboard/product/product-service",name:"side-menu-product-product-service",redirect:"/dashboard/product/product-service/list",component:FNe,children:[{path:"/dashboard/product/product-service/list",name:"side-menu-product-product-service-list",component:Bze,meta:{remember:!0}},{path:"/dashboard/product/product-service/create",name:"side-menu-product-product-service-create",component:dBe,meta:{remember:!0}},{path:"/dashboard/product/product-service/edit/:ulid",name:"side-menu-product-product-service-edit",component:ABe,meta:{remember:!0}}]}]},{path:"/dashboard/supplier",children:[{path:"/dashboard/supplier/supplier",name:"side-menu-supplier",redirect:"/dashboard/supplier/supplier/list",component:OBe,children:[{path:"/dashboard/supplier/supplier/list",name:"side-menu-supplier-supplier-list",component:cqe,meta:{remember:!0}},{path:"/dashboard/supplier/supplier/create",name:"side-menu-supplier-supplier-create",component:Aqe,meta:{remember:!0}},{path:"/dashboard/supplier/supplier/edit/:ulid",name:"side-menu-supplier-supplier-edit",component:Yqe,meta:{remember:!0}}]}]},{path:"/dashboard/customer",children:[{path:"/dashboard/customer/customer-group",name:"side-menu-customer-group",redirect:"/dashboard/customer/customer-group/list",component:nWe,children:[{path:"/dashboard/customer/customer-group/list",name:"side-menu-customer-group-list",component:hGe,meta:{remember:!0}},{path:"/dashboard/customer/customer-group/create",name:"side-menu-customer-group-create",component:OGe,meta:{remember:!0}},{path:"/dashboard/customer/customer-group/edit/:ulid",name:"side-menu-customer-group-edit",component:QGe,meta:{remember:!0}}]},{path:"/dashboard/customer/customer",name:"side-menu-customer",redirect:"/dashboard/customer/customer/list",component:sZe,children:[{path:"/dashboard/customer/customer/list",name:"side-menu-customer-list",component:NZe,meta:{remember:!0}},{path:"/dashboard/customer/customer/create",name:"side-menu-customer-create",component:fKe,meta:{remember:!0}},{path:"/dashboard/customer/customer/edit/:ulid",name:"side-menu-customer-edit",component:jKe,meta:{remember:!0}}]}]},{path:"/dashboard/stock-adjustment-category",children:[{path:"/dashboard/stock-adjustment-category",name:"side-menu-stock-adjustment-category",redirect:"/dashboard/stock-adjustment-category/list",component:WKe,children:[{path:"/dashboard/stock-adjustment-category/list",name:"side-menu-stock-adjustment-category-list",component:fXe,meta:{remember:!0}},{path:"/dashboard/stock-adjustment-category/create",name:"side-menu-stock-adjustment-category-create",component:wXe,meta:{remember:!0}},{path:"/dashboard/stock-adjustment-category/edit/:ulid",name:"side-menu-stock-adjustment-category-edit",component:AXe,meta:{remember:!0}}]}]},{path:"/dashboard/stock-adjustment",name:"side-menu-stock-adjustment",redirect:"/dashboard/stock-adjustment/list",component:OXe,children:[{path:"/dashboard/stock-adjustment/list",name:"side-menu-stock-adjustment-list",component:uQe,meta:{remember:!0}},{path:"/dashboard/stock-adjustment/create",name:"side-menu-stock-adjustment-create",component:pet,meta:{remember:!0}},{path:"/dashboard/stock-adjustment/edit/:ulid",name:"side-menu-stock-adjustment-edit",component:ztt,meta:{remember:!0}}]},{path:"/dashboard/product/product-with-remaining-stock",name:"side-menu-product-with-remaining-stock",redirect:"/dashboard/product/product-with-remaining-stock/list",component:iot,children:[{path:"/dashboard/product/product-with-remaining-stock/list",name:"side-menu-product-with-remaining-stock-list",component:Not,meta:{remember:!0}}]},{path:"/dashboard/stock-adjustment-in-product",name:"side-menu-stock-adjustment-in-product",redirect:"/dashboard/stock-adjustment-in-product/list",component:Rat,children:[{path:"/dashboard/stock-adjustment-in-product/list",name:"side-menu-stock-adjustment-in-product-list",component:DB,meta:{remember:!0}}]},{path:"/dashboard/stock-adjustment-in-product-serial",name:"side-menu-stock-adjustment-in-product-serial",redirect:"/dashboard/stock-adjustment-in-product-serial/list",component:hst,children:[{path:"/dashboard/stock-adjustment-in-product-serial/list",name:"side-menu-stock-adjustment-in-product-serial-list",component:OB,meta:{remember:!0}}]},{path:"/dashboard/stock-adjustment-out-product",name:"side-menu-stock-adjustment-out-product",redirect:"/dashboard/stock-adjustment-out-product/list",component:Cnt,children:[{path:"/dashboard/stock-adjustment-out-product/list",name:"side-menu-stock-adjustment-out-product-list",component:RB,meta:{remember:!0}}]},{path:"/dashboard/stock-adjustment-out-product-serial",name:"side-menu-stock-adjustment-out-product-serial",redirect:"/dashboard/stock-adjustment-out-product-serial/list",component:tot,children:[{path:"/dashboard/stock-adjustment-out-product-serial/list",name:"side-menu-stock-adjustment-out-product-serial-list",component:VB,meta:{remember:!0}}]},{path:"/dashboard/administrator",name:"side-menu-administrator",children:[{path:"/dashboard/administrator/user",name:"side-menu-administrator-user",redirect:"/dashboard/administrator/user/list",component:O9e,children:[{path:"/dashboard/administrator/user/list",name:"side-menu-administrator-user-list",component:oAe,meta:{remember:!0}},{path:"/dashboard/administrator/user/create",name:"side-menu-administrator-user-create",component:HAe,meta:{remember:!0}},{path:"/dashboard/administrator/user/edit/:ulid",name:"side-menu-administrator-user-edit",component:$Ee,meta:{remember:!0}}]}]},{path:"/dashboard/devtool",name:"side-menu-devtool",children:[{path:"/dashboard/devtool/devtool",name:"side-menu-devtool-devtool",component:JLe,meta:{remember:!1}},{path:"/dashboard/devtool/playground",name:"side-menu-devtool-playground",children:[{path:"/dashboard/devtool/playground/p1",name:"side-menu-devtool-playground-p1",component:u9e,meta:{remember:!0}},{path:"/dashboard/devtool/playground/p2",name:"side-menu-devtool-playground-p2",component:f9e,meta:{remember:!0}}]}]},{path:"/dashboard/error/:code",name:"side-menu-error-code",component:M9e,meta:{remember:!1}}]},{path:"/:pathMatch(.*)*",component:GF,meta:{remember:!1}},{path:"/error-page",name:"error-page",component:GF,meta:{remember:!1}}],Bot=zot,RP=eae({history:$te(),routes:Bot});RP.beforeEach(async(n,e,a)=>{a()});RP.afterEach((n,e)=>{n.matched.some(a=>a.meta.remember)&&sessionStorage.setItem("DCSLAB_LAST_ROUTE",n.name)});const w9=Fee(Qee);w9.use(zee());w9.use(RP);w9.use(Iz);w9.mount("#app")});export default qot();
diff --git a/web/dist/assets/index-tvyvYmsK.css b/web/dist/assets/index-tvyvYmsK.css
new file mode 100644
index 000000000..e1d81b9e1
--- /dev/null
+++ b/web/dist/assets/index-tvyvYmsK.css
@@ -0,0 +1,7 @@
+.rubick .side-nav{width:230px;padding-right:1.25rem;padding-bottom:4rem;overflow-x:hidden}@media (max-width: 1279px){.rubick .side-nav{width:85px}}@media (max-width: 767px){.rubick .side-nav{display:none}}.rubick .side-nav.side-nav--simple{width:85px}.rubick .side-nav.side-nav--simple .side-menu .side-menu__title,.rubick .side-nav.side-nav--simple .side-menu .side-menu__title .side-menu__sub-icon{display:none}.rubick .side-nav.side-nav--simple .side-menu:not(.side-menu--active) .side-menu__icon:before{display:none}.rubick .side-nav .side-nav__divider{width:100%;height:1px;background:#ffffff14;z-index:10;position:relative}.rubick .side-nav .side-menu{height:50px;display:flex;align-items:center;padding-left:1.25rem;color:#fff;margin-bottom:.25rem;position:relative;border-radius:9999px}.rubick .side-nav .side-menu .side-menu__title{width:100%;margin-left:.75rem;display:flex;align-items:center}.rubick .side-nav .side-menu .side-menu__title .side-menu__sub-icon{margin-left:auto;margin-right:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s}.rubick .side-nav .side-menu .side-menu__title .side-menu__sub-icon svg{width:1rem;height:1rem}@media (max-width: 1279px){.rubick .side-nav .side-menu .side-menu__title .side-menu__sub-icon,.rubick .side-nav .side-menu .side-menu__title{display:none}}.rubick .side-nav>ul>li:nth-child(1).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.rubick .side-nav>ul>li:nth-child(1)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.rubick .side-nav>ul>li:nth-child(1)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(2).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.rubick .side-nav>ul>li:nth-child(2)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.rubick .side-nav>ul>li:nth-child(2)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(3).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.rubick .side-nav>ul>li:nth-child(3)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.rubick .side-nav>ul>li:nth-child(3)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(4).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.rubick .side-nav>ul>li:nth-child(4)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.rubick .side-nav>ul>li:nth-child(4)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(5).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.rubick .side-nav>ul>li:nth-child(5)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.rubick .side-nav>ul>li:nth-child(5)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(6).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.rubick .side-nav>ul>li:nth-child(6)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.rubick .side-nav>ul>li:nth-child(6)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(7).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.rubick .side-nav>ul>li:nth-child(7)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.rubick .side-nav>ul>li:nth-child(7)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(8).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.rubick .side-nav>ul>li:nth-child(8)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.rubick .side-nav>ul>li:nth-child(8)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(9).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.rubick .side-nav>ul>li:nth-child(9)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.rubick .side-nav>ul>li:nth-child(9)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(10).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.rubick .side-nav>ul>li:nth-child(10)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.rubick .side-nav>ul>li:nth-child(10)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(11).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.rubick .side-nav>ul>li:nth-child(11)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.rubick .side-nav>ul>li:nth-child(11)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(12).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.rubick .side-nav>ul>li:nth-child(12)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.rubick .side-nav>ul>li:nth-child(12)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(13).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.rubick .side-nav>ul>li:nth-child(13)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.rubick .side-nav>ul>li:nth-child(13)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(14).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.rubick .side-nav>ul>li:nth-child(14)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.rubick .side-nav>ul>li:nth-child(14)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(15).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.rubick .side-nav>ul>li:nth-child(15)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.rubick .side-nav>ul>li:nth-child(15)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(16).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.rubick .side-nav>ul>li:nth-child(16)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.rubick .side-nav>ul>li:nth-child(16)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(17).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.rubick .side-nav>ul>li:nth-child(17)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.rubick .side-nav>ul>li:nth-child(17)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(18).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.rubick .side-nav>ul>li:nth-child(18)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.rubick .side-nav>ul>li:nth-child(18)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(19).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.rubick .side-nav>ul>li:nth-child(19)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.rubick .side-nav>ul>li:nth-child(19)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(20).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.rubick .side-nav>ul>li:nth-child(20)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.rubick .side-nav>ul>li:nth-child(20)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(21).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.rubick .side-nav>ul>li:nth-child(21)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.rubick .side-nav>ul>li:nth-child(21)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(22).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.rubick .side-nav>ul>li:nth-child(22)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.rubick .side-nav>ul>li:nth-child(22)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(23).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.rubick .side-nav>ul>li:nth-child(23)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.rubick .side-nav>ul>li:nth-child(23)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(24).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.rubick .side-nav>ul>li:nth-child(24)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.rubick .side-nav>ul>li:nth-child(24)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(25).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.rubick .side-nav>ul>li:nth-child(25)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.rubick .side-nav>ul>li:nth-child(25)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(26).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.rubick .side-nav>ul>li:nth-child(26)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.rubick .side-nav>ul>li:nth-child(26)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(27).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.rubick .side-nav>ul>li:nth-child(27)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.rubick .side-nav>ul>li:nth-child(27)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(28).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.rubick .side-nav>ul>li:nth-child(28)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.rubick .side-nav>ul>li:nth-child(28)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(29).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.rubick .side-nav>ul>li:nth-child(29)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.rubick .side-nav>ul>li:nth-child(29)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(30).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.rubick .side-nav>ul>li:nth-child(30)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.rubick .side-nav>ul>li:nth-child(30)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(31).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.rubick .side-nav>ul>li:nth-child(31)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.rubick .side-nav>ul>li:nth-child(31)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(32).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.rubick .side-nav>ul>li:nth-child(32)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.rubick .side-nav>ul>li:nth-child(32)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(33).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.rubick .side-nav>ul>li:nth-child(33)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.rubick .side-nav>ul>li:nth-child(33)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(34).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.rubick .side-nav>ul>li:nth-child(34)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.rubick .side-nav>ul>li:nth-child(34)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(35).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.rubick .side-nav>ul>li:nth-child(35)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.rubick .side-nav>ul>li:nth-child(35)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(36).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.rubick .side-nav>ul>li:nth-child(36)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.rubick .side-nav>ul>li:nth-child(36)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(37).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.rubick .side-nav>ul>li:nth-child(37)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.rubick .side-nav>ul>li:nth-child(37)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(38).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.rubick .side-nav>ul>li:nth-child(38)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.rubick .side-nav>ul>li:nth-child(38)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(39).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.rubick .side-nav>ul>li:nth-child(39)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.rubick .side-nav>ul>li:nth-child(39)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(40).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.rubick .side-nav>ul>li:nth-child(40)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.rubick .side-nav>ul>li:nth-child(40)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(41).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.rubick .side-nav>ul>li:nth-child(41)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.rubick .side-nav>ul>li:nth-child(41)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(42).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.rubick .side-nav>ul>li:nth-child(42)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.rubick .side-nav>ul>li:nth-child(42)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(43).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.rubick .side-nav>ul>li:nth-child(43)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.rubick .side-nav>ul>li:nth-child(43)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(44).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.rubick .side-nav>ul>li:nth-child(44)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.rubick .side-nav>ul>li:nth-child(44)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(45).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.rubick .side-nav>ul>li:nth-child(45)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.rubick .side-nav>ul>li:nth-child(45)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(46).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.rubick .side-nav>ul>li:nth-child(46)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.rubick .side-nav>ul>li:nth-child(46)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(47).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.rubick .side-nav>ul>li:nth-child(47)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.rubick .side-nav>ul>li:nth-child(47)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(48).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.rubick .side-nav>ul>li:nth-child(48)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.rubick .side-nav>ul>li:nth-child(48)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(49).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.rubick .side-nav>ul>li:nth-child(49)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.rubick .side-nav>ul>li:nth-child(49)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul>li:nth-child(50).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.rubick .side-nav>ul>li:nth-child(50)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.rubick .side-nav>ul>li:nth-child(50)>a.side-menu--active{animation:.4s intro-active-menu-animation ease-in-out .33333s;animation-fill-mode:forwards}.rubick .side-nav>ul ul li:nth-child(1)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.rubick .side-nav>ul ul li:nth-child(2)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.rubick .side-nav>ul ul li:nth-child(3)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.rubick .side-nav>ul ul li:nth-child(4)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.rubick .side-nav>ul ul li:nth-child(5)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.rubick .side-nav>ul ul li:nth-child(6)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.rubick .side-nav>ul ul li:nth-child(7)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.rubick .side-nav>ul ul li:nth-child(8)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.rubick .side-nav>ul ul li:nth-child(9)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.rubick .side-nav>ul ul li:nth-child(10)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.rubick .side-nav>ul ul li:nth-child(11)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.rubick .side-nav>ul ul li:nth-child(12)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.rubick .side-nav>ul ul li:nth-child(13)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.rubick .side-nav>ul ul li:nth-child(14)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.rubick .side-nav>ul ul li:nth-child(15)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.rubick .side-nav>ul ul li:nth-child(16)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.rubick .side-nav>ul ul li:nth-child(17)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.rubick .side-nav>ul ul li:nth-child(18)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.rubick .side-nav>ul ul li:nth-child(19)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.rubick .side-nav>ul ul li:nth-child(20)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.rubick .side-nav>ul ul li:nth-child(21)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.rubick .side-nav>ul ul li:nth-child(22)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.rubick .side-nav>ul ul li:nth-child(23)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.rubick .side-nav>ul ul li:nth-child(24)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.rubick .side-nav>ul ul li:nth-child(25)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.rubick .side-nav>ul ul li:nth-child(26)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.rubick .side-nav>ul ul li:nth-child(27)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.rubick .side-nav>ul ul li:nth-child(28)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.rubick .side-nav>ul ul li:nth-child(29)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.rubick .side-nav>ul ul li:nth-child(30)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.rubick .side-nav>ul ul li:nth-child(31)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.rubick .side-nav>ul ul li:nth-child(32)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.rubick .side-nav>ul ul li:nth-child(33)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.rubick .side-nav>ul ul li:nth-child(34)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.rubick .side-nav>ul ul li:nth-child(35)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.rubick .side-nav>ul ul li:nth-child(36)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.rubick .side-nav>ul ul li:nth-child(37)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.rubick .side-nav>ul ul li:nth-child(38)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.rubick .side-nav>ul ul li:nth-child(39)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.rubick .side-nav>ul ul li:nth-child(40)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.rubick .side-nav>ul ul li:nth-child(41)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.rubick .side-nav>ul ul li:nth-child(42)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.rubick .side-nav>ul ul li:nth-child(43)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.rubick .side-nav>ul ul li:nth-child(44)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.rubick .side-nav>ul ul li:nth-child(45)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.rubick .side-nav>ul ul li:nth-child(46)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.rubick .side-nav>ul ul li:nth-child(47)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.rubick .side-nav>ul ul li:nth-child(48)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.rubick .side-nav>ul ul li:nth-child(49)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.rubick .side-nav>ul ul li:nth-child(50)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.rubick .side-nav>ul ul{display:none;background-color:#0000001a;border-radius:.5rem}.rubick .side-nav>ul ul.side-menu__sub-open{display:block}.rubick .side-nav>ul ul .side-menu__icon:before{display:none}.rubick .side-nav>ul ul li a:not(.side-menu--active){color:#ffffffb3}.rubick .side-nav>ul ul li a.side-menu--active .side-menu__title{font-weight:500}.rubick .side-nav>ul ul ul{display:none;background:#0000001a;border-radius:.5rem}.rubick .side-nav>ul>li>ul>li>ul>li>.side-menu{padding-left:2.5rem}.rubick .side-nav>ul>li>.side-menu.side-menu--active{background-color:#f1f5f9}.rubick .side-nav>ul>li>.side-menu.side-menu--active:before{content:"";width:30px;height:30px;margin-top:-30px;transform:rotate(90deg) scale(1.04);background-size:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");position:absolute;top:0;right:0;margin-right:-1.25rem}.rubick .side-nav>ul>li>.side-menu.side-menu--active:after{content:"";width:30px;height:30px;margin-top:50px;transform:scale(1.04);background-size:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");position:absolute;top:0;right:0;margin-right:-1.25rem}.rubick .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon{color:rgb(var(--color-theme-1) / 1)}.rubick .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon:before{content:"";z-index:-1;position:absolute;top:0;right:0;margin-right:-1.25rem;width:3rem;height:100%;background-color:#f1f5f9}.rubick .side-nav>ul>li>.side-menu.side-menu--active .side-menu__title{color:#1e293b;font-weight:500}.rubick .side-nav>ul>li>.side-menu:not(.side-menu--active) .side-menu__icon:before{content:"";z-index:-1;width:230px;position:absolute;top:0;left:0;height:100%;border-top-left-radius:9999px;border-bottom-left-radius:9999px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s}@media (max-width: 1279px){.rubick .side-nav>ul>li>.side-menu:not(.side-menu--active) .side-menu__icon:before{display:none}}.rubick .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open) .side-menu__icon:before{background-color:#ffffff0d}@keyframes intro-active-menu-animation{to{z-index:10}}.dark .rubick .side-nav .side-nav__divider{background-color:#ffffff12}.dark .rubick .side-nav .side-menu{color:#cbd5e1}.dark .rubick .side-nav>ul ul{background-color:rgb(var(--color-darkmode-900) / 30%)}.dark .rubick .side-nav>ul ul li a:not(.side-menu--active){color:#94a3b8}.dark .rubick .side-nav>ul ul ul{background:rgb(var(--color-darkmode-900) / 30%)}.dark .rubick .side-nav>ul>li>.side-menu.side-menu--active{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .rubick .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon{color:#cbd5e1}.dark .rubick .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon:before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .rubick .side-nav>ul>li>.side-menu.side-menu--active .side-menu__title{color:#cbd5e1}.dark .rubick .side-nav>ul>li>.side-menu .side-menu__icon{color:#94a3b8}.dark .rubick .side-nav>ul>li>.side-menu .side-menu__title{color:#94a3b8}.dark .rubick .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open) .side-menu__icon:before{background-color:rgb(var(--color-darkmode-500) / 70%)}.dark .rubick .side-nav>ul>li>.side-menu.side-menu--active:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A")}.dark .rubick .side-nav>ul>li>.side-menu.side-menu--active:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A")}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{transform:translateY(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{transform:translateY(-10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{transform:translate(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{transform:translate(-10px)}.tooltip-content{left:10000px;position:fixed}.tippy-box{border-radius:.375rem}.tippy-box .tippy-content{padding:.375rem .75rem}.tippy-popper[x-placement=left] .tippy-roundarrow,.tippy-popper[x-placement=left] .tippy-arrow,.tippy-popper[x-placement=right] .tippy-roundarrow,.tippy-popper[x-placement=right] .tippy-arrow,.tippy-popper[x-placement=left-start] .tippy-roundarrow,.tippy-popper[x-placement=left-start] .tippy-arrow,.tippy-popper[x-placement=left-end] .tippy-roundarrow,.tippy-popper[x-placement=left-end] .tippy-arrow,.tippy-popper[x-placement=right-start] .tippy-roundarrow,.tippy-popper[x-placement=right-start] .tippy-arrow,.tippy-popper[x-placement=right-end] .tippy-roundarrow,.tippy-popper[x-placement=right-end] .tippy-arrow{top:0;bottom:0;margin-top:auto;margin-bottom:auto}.tippy-popper[x-placement=top] .tippy-roundarrow,.tippy-popper[x-placement=top] .tippy-arrow,.tippy-popper[x-placement=bottom] .tippy-roundarrow,.tippy-popper[x-placement=bottom] .tippy-arrow,.tippy-popper[x-placement=top-start] .tippy-roundarrow,.tippy-popper[x-placement=top-start] .tippy-arrow,.tippy-popper[x-placement=top-end] .tippy-roundarrow,.tippy-popper[x-placement=top-end] .tippy-arrow,.tippy-popper[x-placement=bottom-start] .tippy-roundarrow,.tippy-popper[x-placement=bottom-start] .tippy-arrow,.tippy-popper[x-placement=bottom-end] .tippy-roundarrow,.tippy-popper[x-placement=bottom-end] .tippy-arrow{left:0;right:0;margin-left:auto;margin-right:auto}.dark .tippy-box{box-shadow:0 0 20px 4px #00000026,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;color:#cbd5e1;background-color:rgb(var(--color-darkmode-300) / 1)}.dark .tippy-box>.tippy-svg-arrow{fill:rgb(var(--color-darkmode-300) / 1)}.ts-control{border:1px solid #d0d0d0;padding:8px;width:100%;overflow:hidden;position:relative;z-index:1;box-sizing:border-box;box-shadow:none;border-radius:3px;display:flex;flex-wrap:wrap}.ts-wrapper.multi.has-items .ts-control{padding:calc(6px + -0) 8px calc(3px + -0)}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:none}.ts-control>*{vertical-align:baseline;display:inline-block}.ts-wrapper.multi .ts-control>div{cursor:pointer;margin:0 3px 3px 0;padding:2px 6px;background:#f2f2f2;color:#303030;border:0 solid #d0d0d0}.ts-wrapper.multi .ts-control>div.active{background:#e8e8e8;color:#303030;border:0 solid #cacaca}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{color:#7d7d7d;background:#fff;border:0 solid white}.ts-control>input{flex:1 1 auto;min-width:7rem;display:inline-block!important;padding:0!important;min-height:0!important;max-height:none!important;max-width:100%!important;margin:0!important;text-indent:0!important;border:0 none!important;background:none!important;line-height:inherit!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important;box-shadow:none!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:15px;right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{opacity:.5;background-color:#fafafa}.input-hidden .ts-control>input{opacity:0;position:absolute;left:-10000px}.ts-dropdown{position:absolute;top:100%;left:0;width:100%;z-index:10;border:1px solid #d0d0d0;background:#fff;margin:.25rem 0 0;border-top:0 none;box-sizing:border-box;box-shadow:0 1px 3px #0000001a;border-radius:0 0 3px 3px}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:#7da8d033;border-radius:1px}.ts-dropdown .option,.ts-dropdown .optgroup-header,.ts-dropdown .no-results,.ts-dropdown .create{padding:5px 8px}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{opacity:1;cursor:pointer}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0 none}.ts-dropdown .optgroup-header{color:#303030;background:#fff;cursor:default}.ts-dropdown .active{background-color:#f5fafd;color:#495c68}.ts-dropdown .active.create{color:#495c68}.ts-dropdown .create{color:#30303080}.ts-dropdown .spinner{display:inline-block;width:30px;height:30px;margin:5px 8px}.ts-dropdown .spinner:after{content:" ";display:block;width:24px;height:24px;margin:3px;border-radius:50%;border:5px solid #d0d0d0;border-color:#d0d0d0 transparent #d0d0d0 transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ts-dropdown-content{overflow:hidden auto;max-height:200px;scroll-behavior:smooth}.ts-wrapper.plugin-drag_drop .ts-dragging{color:transparent!important}.ts-wrapper.plugin-drag_drop .ts-dragging>*{visibility:hidden!important}.plugin-checkbox_options:not(.rtl) .option input{margin-right:.5rem}.plugin-checkbox_options.rtl .option input{margin-left:.5rem}.plugin-clear_button{--ts-pr-clear-button: 1em}.plugin-clear_button .clear-button{opacity:0;position:absolute;top:50%;transform:translateY(-50%);right:2px;margin-right:0!important;background:transparent!important;transition:opacity .5s;cursor:pointer}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),8px)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{position:relative;padding:10px 8px;border-bottom:1px solid #d0d0d0;background:color-mix(#fff,#d0d0d0,85%);border-radius:3px 3px 0 0}.ts-wrapper .dropdown-header-close{position:absolute;right:8px;top:50%;color:#303030;opacity:.4;margin-top:-12px;line-height:20px;font-size:20px!important}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{box-shadow:none;border:1px solid #d0d0d0}.plugin-dropdown_input .dropdown-input{border:1px solid #d0d0d0;border-width:0 0 1px;display:block;padding:8px;box-shadow:none;width:100%;background:transparent}.plugin-dropdown_input .items-placeholder{border:0 none!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.has-items .items-placeholder,.plugin-dropdown_input.dropdown-active .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-moz-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0 none;flex-grow:1;flex-basis:0;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0 none}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0 none}.ts-wrapper.plugin-remove_button .item{display:inline-flex;align-items:center}.ts-wrapper.plugin-remove_button .item .remove{color:inherit;text-decoration:none;vertical-align:middle;display:inline-block;padding:0 6px;border-radius:0 2px 2px 0;box-sizing:border-box}.ts-wrapper.plugin-remove_button .item .remove:hover{background:#0000000d}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{position:absolute;right:0;top:0;font-size:23px}.ts-wrapper.plugin-remove_button:not(.rtl) .item{padding-right:0!important}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #d0d0d0;margin-left:6px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#cacaca}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#fff}.ts-wrapper.plugin-remove_button.rtl .item{padding-left:0!important}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #d0d0d0;margin-right:6px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#cacaca}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#fff}:root{--ts-pr-clear-button: 0;--ts-pr-caret: 0;--ts-pr-min: .75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control:not(.rtl){padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-control.rtl{padding-left:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper{position:relative}.ts-dropdown,.ts-control,.ts-control input{color:#303030;font-family:inherit;font-size:13px;line-height:18px}.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff;cursor:text}.ts-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.tom-select.ts-wrapper,.tom-select.plugin-dropdown_input.focus.dropdown-active{border-width:1px;border-style:solid;box-shadow:0 1px 2px #0000000d;border-radius:.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-size:18px;background-position:center right .6rem;background-repeat:no-repeat}.tom-select.ts-wrapper .ts-control,.tom-select.plugin-dropdown_input.focus.dropdown-active .ts-control{border:0;display:flex;outline:none;min-height:36px;align-items:center;background-color:transparent;font-size:inherit;padding:.5rem .75rem}.tom-select.ts-wrapper .ts-control input,.tom-select.plugin-dropdown_input.focus.dropdown-active .ts-control input{font-size:inherit}.tom-select.ts-wrapper.disabled{background-color:#f1f5f9}.tom-select.ts-wrapper.single.input-active .ts-control{background-color:transparent}.tom-select.ts-wrapper.multi.has-items .ts-control{-moz-column-gap:.625rem;column-gap:.625rem;row-gap:.25rem;padding:.25rem .625rem}.tom-select.ts-wrapper.multi .ts-control>div{padding:0 .5rem;margin:0 0 0 -.375rem;border-radius:.25rem;background-color:#e2e8f0}.tom-select.ts-wrapper.plugin-remove_button .item .remove{display:flex;align-items:center;justify-content:center;border-color:#cbd5e1;padding:.25rem .5rem}.tom-select.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{margin-left:.5rem}.tom-select.ts-wrapper .dropdown-header{border-color:#e2e8f0;background-color:#f1f5f9;padding:.625rem;font-weight:500}.tom-select.plugin-dropdown_input.focus.dropdown-active{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}.tom-select.plugin-dropdown_input .dropdown-input-wrap .dropdown-input{outline:none}.tom-select .ts-dropdown{left:-1px;right:-1px;width:auto;z-index:50;margin-top:1px;font-size:inherit;box-shadow:0 1px 2px #0000000d;border-radius:.25rem;border:1px solid #e2e8f0}.tom-select .ts-dropdown .dropdown-input-wrap{padding:.5rem}.tom-select .ts-dropdown .dropdown-input-wrap .dropdown-input{border-radius:.25rem;border:1px solid #e2e8f0}.tom-select .ts-dropdown .optgroup-header{padding:.625rem .75rem;font-weight:500;background-color:#f1f5f9}.tom-select .ts-dropdown .option{padding:.625rem .75rem}.tom-select .ts-dropdown .option[data-selectable].active:not(.selected){color:inherit;background-color:transparent;background-color:#f1f5f9}.tom-select .ts-dropdown .option[data-selectable]:hover:not(.selected){color:inherit;background-color:#f1f5f9}.tom-select .ts-dropdown .selected{color:#fff;background-color:rgb(var(--color-primary) / 1)}.tom-select .ts-dropdown [data-selectable] .highlight{color:#fff;background-color:rgb(var(--color-danger) / 1)}.dark .tom-select.ts-wrapper,.dark .tom-select.plugin-dropdown_input.focus.dropdown-active{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}.dark .tom-select.ts-wrapper .ts-control,.dark .tom-select.plugin-dropdown_input.focus.dropdown-active .ts-control{color:#cbd5e1}.dark .tom-select.ts-wrapper.disabled{border-color:transparent;background-color:rgb(var(--color-darkmode-800) / 50%)}.dark .tom-select.ts-wrapper.multi .ts-control>div{color:#cbd5e1;background-color:rgb(var(--color-darkmode-600) / 1)}.dark .tom-select.ts-wrapper.plugin-remove_button .item .remove{border-color:rgb(var(--color-darkmode-400) / 1)}.dark .tom-select.ts-wrapper .dropdown-header{border-color:rgb(var(--color-darkmode-800) / 1);background-color:rgb(var(--color-darkmode-800) / 1)}.dark .tom-select.plugin-dropdown_input.focus.dropdown-active{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}.dark .tom-select .ts-dropdown{color:#cbd5e1;border-color:rgb(var(--color-darkmode-800) / 1);background-color:rgb(var(--color-darkmode-700) / 1)}.dark .tom-select .ts-dropdown .dropdown-input-wrap .dropdown-input{border-color:rgb(var(--color-darkmode-800) / 1);background-color:rgb(var(--color-darkmode-600) / 1)}.dark .tom-select .ts-dropdown .optgroup-header{color:#cbd5e1;background-color:rgb(var(--color-darkmode-800) / 1)}.dark .tom-select .ts-dropdown .option[data-selectable].active:not(.selected){background-color:rgb(var(--color-darkmode-600) / 1)}.dark .tom-select .ts-dropdown .option[data-selectable]:hover:not(.selected){background-color:rgb(var(--color-darkmode-600) / 1)}.dark .ts-wrapper{border-color:rgb(var(--color-darkmode-800) / 1);background-color:rgb(var(--color-darkmode-800) / 1)}[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:before,.simplebar-content:after{content:" ";display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging,[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:"";background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.mobile-menu .menu__divider{width:100%;height:1px;background-color:#ffffff14;position:relative}.mobile-menu .menu{height:50px;display:flex;align-items:center;color:#fff}.mobile-menu .menu .menu__title{display:flex;align-items:center;width:100%;margin-left:.75rem}.mobile-menu .menu .menu__title .menu__sub-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s;margin-left:auto}.mobile-menu .menu .menu__title .menu__sub-icon svg{width:1.25rem;height:1.25rem}.mobile-menu ul>li>.menu{padding-left:1.5rem;padding-right:1.5rem}.mobile-menu ul>li>ul{background:#0000001a;border-radius:.5rem;margin:.25rem 1rem}.mobile-menu ul>li>ul:not(.menu__sub-open){display:none}.mobile-menu ul>li>ul>li>.menu{padding-left:1rem;padding-right:1rem}.mobile-menu ul>li>ul>li>ul{background:#0000001a;border-radius:.5rem;margin:.25rem auto}.mobile-menu ul>li>ul>li>ul:not(.menu__sub-open){display:none}.mobile-menu ul>li>ul>li>ul>li>.menu{padding-left:1rem;padding-right:1rem}.dark .mobile-menu ul>li>ul{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .mobile-menu ul>li>ul>li>ul{background-color:rgb(var(--color-darkmode-600) / 1)}.rubick .top-nav .top-menu{height:55px;border-radius:9999px;display:flex;align-items:center;color:#fff;position:relative}@media (min-width: 1280px){.rubick .top-nav .top-menu{border-top-left-radius:1rem;border-top-right-radius:1rem;border-bottom-left-radius:0;border-bottom-right-radius:0}}.rubick .top-nav .top-menu:not(.top-menu--active) .top-menu__icon:before{content:"";z-index:-1;position:absolute;width:100%;height:100%;top:0;left:0;border-radius:9999px}@media (min-width: 1280px){.rubick .top-nav .top-menu:not(.top-menu--active) .top-menu__icon:before{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:1rem;border-top-right-radius:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s}}.rubick .top-nav .top-menu .top-menu__title{margin-left:.75rem;display:flex;align-items:center;white-space:nowrap}.rubick .top-nav .top-menu .top-menu__title .top-menu__sub-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s;width:1rem;height:1rem;display:none}@media (min-width: 1280px){.rubick .top-nav .top-menu .top-menu__title .top-menu__sub-icon{display:block}}.rubick .top-nav>ul>li:nth-child(1)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.rubick .top-nav>ul>li:nth-child(2)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.rubick .top-nav>ul>li:nth-child(3)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.rubick .top-nav>ul>li:nth-child(4)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.rubick .top-nav>ul>li:nth-child(5)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.rubick .top-nav>ul>li:nth-child(6)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.rubick .top-nav>ul>li:nth-child(7)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.rubick .top-nav>ul>li:nth-child(8)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.rubick .top-nav>ul>li:nth-child(9)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.rubick .top-nav>ul>li:nth-child(10)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.rubick .top-nav>ul>li:nth-child(11)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.rubick .top-nav>ul>li:nth-child(12)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.rubick .top-nav>ul>li:nth-child(13)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.rubick .top-nav>ul>li:nth-child(14)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.rubick .top-nav>ul>li:nth-child(15)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.rubick .top-nav>ul>li:nth-child(16)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.rubick .top-nav>ul>li:nth-child(17)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.rubick .top-nav>ul>li:nth-child(18)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.rubick .top-nav>ul>li:nth-child(19)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.rubick .top-nav>ul>li:nth-child(20)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.rubick .top-nav>ul>li:nth-child(21)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.rubick .top-nav>ul>li:nth-child(22)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.rubick .top-nav>ul>li:nth-child(23)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.rubick .top-nav>ul>li:nth-child(24)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.rubick .top-nav>ul>li:nth-child(25)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.rubick .top-nav>ul>li:nth-child(26)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.rubick .top-nav>ul>li:nth-child(27)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.rubick .top-nav>ul>li:nth-child(28)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.rubick .top-nav>ul>li:nth-child(29)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.rubick .top-nav>ul>li:nth-child(30)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.rubick .top-nav>ul>li:nth-child(31)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.rubick .top-nav>ul>li:nth-child(32)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.rubick .top-nav>ul>li:nth-child(33)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.rubick .top-nav>ul>li:nth-child(34)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.rubick .top-nav>ul>li:nth-child(35)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.rubick .top-nav>ul>li:nth-child(36)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.rubick .top-nav>ul>li:nth-child(37)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.rubick .top-nav>ul>li:nth-child(38)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.rubick .top-nav>ul>li:nth-child(39)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.rubick .top-nav>ul>li:nth-child(40)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.rubick .top-nav>ul>li:nth-child(41)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.rubick .top-nav>ul>li:nth-child(42)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.rubick .top-nav>ul>li:nth-child(43)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.rubick .top-nav>ul>li:nth-child(44)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.rubick .top-nav>ul>li:nth-child(45)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.rubick .top-nav>ul>li:nth-child(46)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.rubick .top-nav>ul>li:nth-child(47)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.rubick .top-nav>ul>li:nth-child(48)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.rubick .top-nav>ul>li:nth-child(49)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.rubick .top-nav>ul>li:nth-child(50)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.rubick .top-nav>ul>li:hover{position:relative}.rubick .top-nav>ul>li:hover>.top-menu .top-menu__title .top-menu__sub-icon{transform:rotate(-90deg)}.rubick .top-nav>ul>li:hover>.top-menu:not(.top-menu--active) .top-menu__icon:before{background:#ffffff0d}.rubick .top-nav>ul>li:hover>ul{display:block}.rubick .top-nav>ul>li>.top-menu{padding-left:1.25rem;padding-right:1.25rem;margin-right:.25rem}.rubick .top-nav>ul>li>.top-menu.top-menu--active{z-index:10;background-color:#f1f5f9}.rubick .top-nav>ul>li>.top-menu.top-menu--active:before{content:"";width:20px;height:20px;margin-left:-20px;transform:rotate(90deg) scale(1.04);background-size:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");position:absolute;bottom:0;left:0;display:none}@media (min-width: 1280px){.rubick .top-nav>ul>li>.top-menu.top-menu--active:before{display:block}}.rubick .top-nav>ul>li>.top-menu.top-menu--active:after{content:"";width:20px;height:20px;margin-right:-20px;transform:rotate(180deg) scale(1.04);background-size:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");position:absolute;bottom:0;right:0;display:none}@media (min-width: 1280px){.rubick .top-nav>ul>li>.top-menu.top-menu--active:after{display:block}}.rubick .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:rgb(var(--color-theme-1) / 1)}.rubick .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{color:#000;font-weight:500}.rubick .top-nav>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:.5rem}.rubick .top-nav>ul>li>ul{box-shadow:0 3px 20px #0000000b;background-color:rgb(var(--color-theme-1) / 1);display:none;width:14rem;position:absolute;border-radius:.375rem;z-index:20;padding-left:0;padding-right:0;top:0;margin-top:3.5rem}.rubick .top-nav>ul>li>ul:before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#0000001a;top:0;left:0;right:0;bottom:0;border-radius:.375rem;z-index:-1}@media (min-width: 1280px){.rubick .top-nav>ul>li>ul{left:100%;margin-left:-4px;margin-top:-1.25rem}}.rubick .top-nav>ul>li>ul>li{padding-left:1.25rem;padding-right:1.25rem;position:relative}.rubick .top-nav>ul>li>ul>li:hover{position:relative}.rubick .top-nav>ul>li>ul>li:hover>.top-menu .top-menu__title .top-menu__sub-icon{transform:rotate(-90deg)}.rubick .top-nav>ul>li>ul>li:hover>ul{display:block}.rubick .top-nav>ul>li>ul>li>.top-menu .top-menu__title{width:100%}.rubick .top-nav>ul>li>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:auto}.rubick .top-nav>ul>li>ul>li>ul{left:100%;margin-left:0;box-shadow:0 3px 20px #0000000b;background-color:rgb(var(--color-theme-1) / 1);display:none;width:14rem;position:absolute;border-radius:.375rem;z-index:20;padding-left:0;padding-right:0;top:0;margin-top:0}.rubick .top-nav>ul>li>ul>li>ul:before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#0000001a;top:0;left:0;right:0;bottom:0;border-radius:.375rem;z-index:-1}.rubick .top-nav>ul>li>ul>li>ul>li{padding-left:1.25rem;padding-right:1.25rem}.rubick .top-nav>ul>li>ul>li>ul>li>.top-menu .top-menu__title{width:100%}.rubick .top-nav>ul>li>ul>li>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:auto}.dark .rubick .top-nav .top-menu .top-menu__title,.dark .rubick .top-nav .top-menu .top-menu__icon{color:#94a3b8}.dark .rubick .top-nav>ul>li:hover>.top-menu:not(.top-menu--active) .top-menu__icon:before{background:rgb(var(--color-darkmode-500) / 70%)}.dark .rubick .top-nav>ul>li>.top-menu.top-menu--active{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .rubick .top-nav>ul>li>.top-menu.top-menu--active:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A")}.dark .rubick .top-nav>ul>li>.top-menu.top-menu--active:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A")}.dark .rubick .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:#fff}.dark .rubick .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{color:#fff}.dark .rubick .top-nav>ul>li>ul{background-color:rgb(var(--color-darkmode-600) / 1);box-shadow:0 3px 7px #0000001c}.dark .rubick .top-nav>ul>li>ul>li>ul{background-color:rgb(var(--color-darkmode-600) / 1);box-shadow:0 3px 7px #0000001c}.icewall:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-attachment:fixed;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E%0A")}.icewall .side-nav.side-nav--simple .side-menu .side-menu__title,.icewall .side-nav.side-nav--simple .side-menu .side-menu__title .side-menu__sub-icon{display:none}.icewall .side-nav .side-nav__divider{width:100%;height:1px;background-color:#ffffff14;z-index:10;position:relative}.icewall .side-nav .side-menu{height:50px;display:flex;align-items:center;padding-left:1.25rem;color:#fff;margin-bottom:.25rem;position:relative;border-radius:.5rem}.icewall .side-nav .side-menu .side-menu__title{display:none;align-items:center;width:100%;margin-left:.75rem}@media (min-width: 1280px){.icewall .side-nav .side-menu .side-menu__title{display:flex}}.icewall .side-nav .side-menu .side-menu__title .side-menu__sub-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s;margin-left:auto;margin-right:1.25rem;display:none}@media (min-width: 1280px){.icewall .side-nav .side-menu .side-menu__title .side-menu__sub-icon{display:block}}.icewall .side-nav .side-menu .side-menu__title .side-menu__sub-icon svg{width:1rem;height:1rem}.icewall .side-nav>ul>li:nth-child(1).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.icewall .side-nav>ul>li:nth-child(1)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.icewall .side-nav>ul>li:nth-child(2).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.icewall .side-nav>ul>li:nth-child(2)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.icewall .side-nav>ul>li:nth-child(3).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.icewall .side-nav>ul>li:nth-child(3)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.icewall .side-nav>ul>li:nth-child(4).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.icewall .side-nav>ul>li:nth-child(4)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.icewall .side-nav>ul>li:nth-child(5).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.icewall .side-nav>ul>li:nth-child(5)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.icewall .side-nav>ul>li:nth-child(6).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.icewall .side-nav>ul>li:nth-child(6)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.icewall .side-nav>ul>li:nth-child(7).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.icewall .side-nav>ul>li:nth-child(7)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.icewall .side-nav>ul>li:nth-child(8).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.icewall .side-nav>ul>li:nth-child(8)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.icewall .side-nav>ul>li:nth-child(9).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.icewall .side-nav>ul>li:nth-child(9)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.icewall .side-nav>ul>li:nth-child(10).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.icewall .side-nav>ul>li:nth-child(10)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.icewall .side-nav>ul>li:nth-child(11).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.icewall .side-nav>ul>li:nth-child(11)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.icewall .side-nav>ul>li:nth-child(12).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.icewall .side-nav>ul>li:nth-child(12)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.icewall .side-nav>ul>li:nth-child(13).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.icewall .side-nav>ul>li:nth-child(13)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.icewall .side-nav>ul>li:nth-child(14).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.icewall .side-nav>ul>li:nth-child(14)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.icewall .side-nav>ul>li:nth-child(15).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.icewall .side-nav>ul>li:nth-child(15)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.icewall .side-nav>ul>li:nth-child(16).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.icewall .side-nav>ul>li:nth-child(16)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.icewall .side-nav>ul>li:nth-child(17).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.icewall .side-nav>ul>li:nth-child(17)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.icewall .side-nav>ul>li:nth-child(18).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.icewall .side-nav>ul>li:nth-child(18)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.icewall .side-nav>ul>li:nth-child(19).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.icewall .side-nav>ul>li:nth-child(19)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.icewall .side-nav>ul>li:nth-child(20).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.icewall .side-nav>ul>li:nth-child(20)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.icewall .side-nav>ul>li:nth-child(21).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.icewall .side-nav>ul>li:nth-child(21)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.icewall .side-nav>ul>li:nth-child(22).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.icewall .side-nav>ul>li:nth-child(22)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.icewall .side-nav>ul>li:nth-child(23).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.icewall .side-nav>ul>li:nth-child(23)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.icewall .side-nav>ul>li:nth-child(24).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.icewall .side-nav>ul>li:nth-child(24)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.icewall .side-nav>ul>li:nth-child(25).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.icewall .side-nav>ul>li:nth-child(25)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.icewall .side-nav>ul>li:nth-child(26).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.icewall .side-nav>ul>li:nth-child(26)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.icewall .side-nav>ul>li:nth-child(27).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.icewall .side-nav>ul>li:nth-child(27)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.icewall .side-nav>ul>li:nth-child(28).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.icewall .side-nav>ul>li:nth-child(28)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.icewall .side-nav>ul>li:nth-child(29).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.icewall .side-nav>ul>li:nth-child(29)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.icewall .side-nav>ul>li:nth-child(30).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.icewall .side-nav>ul>li:nth-child(30)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.icewall .side-nav>ul>li:nth-child(31).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.icewall .side-nav>ul>li:nth-child(31)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.icewall .side-nav>ul>li:nth-child(32).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.icewall .side-nav>ul>li:nth-child(32)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.icewall .side-nav>ul>li:nth-child(33).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.icewall .side-nav>ul>li:nth-child(33)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.icewall .side-nav>ul>li:nth-child(34).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.icewall .side-nav>ul>li:nth-child(34)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.icewall .side-nav>ul>li:nth-child(35).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.icewall .side-nav>ul>li:nth-child(35)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.icewall .side-nav>ul>li:nth-child(36).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.icewall .side-nav>ul>li:nth-child(36)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.icewall .side-nav>ul>li:nth-child(37).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.icewall .side-nav>ul>li:nth-child(37)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.icewall .side-nav>ul>li:nth-child(38).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.icewall .side-nav>ul>li:nth-child(38)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.icewall .side-nav>ul>li:nth-child(39).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.icewall .side-nav>ul>li:nth-child(39)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.icewall .side-nav>ul>li:nth-child(40).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.icewall .side-nav>ul>li:nth-child(40)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.icewall .side-nav>ul>li:nth-child(41).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.icewall .side-nav>ul>li:nth-child(41)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.icewall .side-nav>ul>li:nth-child(42).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.icewall .side-nav>ul>li:nth-child(42)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.icewall .side-nav>ul>li:nth-child(43).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.icewall .side-nav>ul>li:nth-child(43)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.icewall .side-nav>ul>li:nth-child(44).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.icewall .side-nav>ul>li:nth-child(44)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.icewall .side-nav>ul>li:nth-child(45).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.icewall .side-nav>ul>li:nth-child(45)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.icewall .side-nav>ul>li:nth-child(46).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.icewall .side-nav>ul>li:nth-child(46)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.icewall .side-nav>ul>li:nth-child(47).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.icewall .side-nav>ul>li:nth-child(47)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.icewall .side-nav>ul>li:nth-child(48).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.icewall .side-nav>ul>li:nth-child(48)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.icewall .side-nav>ul>li:nth-child(49).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.icewall .side-nav>ul>li:nth-child(49)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.icewall .side-nav>ul>li:nth-child(50).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.icewall .side-nav>ul>li:nth-child(50)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.icewall .side-nav>ul ul li:nth-child(1)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.icewall .side-nav>ul ul li:nth-child(2)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.icewall .side-nav>ul ul li:nth-child(3)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.icewall .side-nav>ul ul li:nth-child(4)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.icewall .side-nav>ul ul li:nth-child(5)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.icewall .side-nav>ul ul li:nth-child(6)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.icewall .side-nav>ul ul li:nth-child(7)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.icewall .side-nav>ul ul li:nth-child(8)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.icewall .side-nav>ul ul li:nth-child(9)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.icewall .side-nav>ul ul li:nth-child(10)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.icewall .side-nav>ul ul li:nth-child(11)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.icewall .side-nav>ul ul li:nth-child(12)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.icewall .side-nav>ul ul li:nth-child(13)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.icewall .side-nav>ul ul li:nth-child(14)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.icewall .side-nav>ul ul li:nth-child(15)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.icewall .side-nav>ul ul li:nth-child(16)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.icewall .side-nav>ul ul li:nth-child(17)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.icewall .side-nav>ul ul li:nth-child(18)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.icewall .side-nav>ul ul li:nth-child(19)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.icewall .side-nav>ul ul li:nth-child(20)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.icewall .side-nav>ul ul li:nth-child(21)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.icewall .side-nav>ul ul li:nth-child(22)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.icewall .side-nav>ul ul li:nth-child(23)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.icewall .side-nav>ul ul li:nth-child(24)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.icewall .side-nav>ul ul li:nth-child(25)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.icewall .side-nav>ul ul li:nth-child(26)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.icewall .side-nav>ul ul li:nth-child(27)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.icewall .side-nav>ul ul li:nth-child(28)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.icewall .side-nav>ul ul li:nth-child(29)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.icewall .side-nav>ul ul li:nth-child(30)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.icewall .side-nav>ul ul li:nth-child(31)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.icewall .side-nav>ul ul li:nth-child(32)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.icewall .side-nav>ul ul li:nth-child(33)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.icewall .side-nav>ul ul li:nth-child(34)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.icewall .side-nav>ul ul li:nth-child(35)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.icewall .side-nav>ul ul li:nth-child(36)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.icewall .side-nav>ul ul li:nth-child(37)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.icewall .side-nav>ul ul li:nth-child(38)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.icewall .side-nav>ul ul li:nth-child(39)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.icewall .side-nav>ul ul li:nth-child(40)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.icewall .side-nav>ul ul li:nth-child(41)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.icewall .side-nav>ul ul li:nth-child(42)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.icewall .side-nav>ul ul li:nth-child(43)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.icewall .side-nav>ul ul li:nth-child(44)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.icewall .side-nav>ul ul li:nth-child(45)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.icewall .side-nav>ul ul li:nth-child(46)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.icewall .side-nav>ul ul li:nth-child(47)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.icewall .side-nav>ul ul li:nth-child(48)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.icewall .side-nav>ul ul li:nth-child(49)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.icewall .side-nav>ul ul li:nth-child(50)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.icewall .side-nav>ul>li>.side-menu.side-menu--active{background-color:rgb(var(--color-theme-1) / 1);z-index:10}.icewall .side-nav>ul>li>.side-menu.side-menu--active:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:#ffffff14;border-radius:.5rem;position:absolute;border-bottom:3px solid rgb(0 0 0 / 10%)}.icewall .side-nav>ul>li>.side-menu.side-menu--active:after{content:"";width:20px;height:80px;background-repeat:no-repeat;background-size:cover;position:absolute;top:0;bottom:0;right:0;margin-top:auto;margin-bottom:auto;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");margin-right:-47px;opacity:0;animation:.3s ease-in-out 1s active-side-menu-chevron;animation-fill-mode:forwards}.icewall .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon{z-index:10}.icewall .side-nav>ul>li>.side-menu.side-menu--active .side-menu__title{font-weight:500;z-index:10}.icewall .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open){background-color:rgb(var(--color-theme-1) / 60%)}.icewall .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open):before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:#ffffff0a;border-radius:.5rem;position:absolute;z-index:-1}.icewall .side-nav>ul>li>ul{background-color:#ffffff0a;border-radius:.5rem;position:relative}.icewall .side-nav>ul>li>ul:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:rgb(var(--color-theme-1) / 60%);border-radius:.5rem;position:absolute;z-index:-1}.icewall .side-nav>ul>li>ul:not(.side-menu__sub-open){display:none}.icewall .side-nav>ul>li>ul>li>.side-menu.side-menu--active .side-menu__title{font-weight:500}.icewall .side-nav>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#ffffffb3}.icewall .side-nav>ul>li>ul>li>ul{background-color:#ffffff0a;border-radius:.5rem;position:relative}.icewall .side-nav>ul>li>ul>li>ul:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:rgb(var(--color-theme-1) / 60%);border-radius:.5rem;position:absolute;z-index:-1}.icewall .side-nav>ul>li>ul>li>ul:not(.side-menu__sub-open){display:none}.icewall .side-nav>ul>li>ul>li>ul>li>.side-menu{padding-left:2.5rem}.icewall .side-nav>ul>li>ul>li>ul>li>.side-menu.side-menu--active .side-menu__title{font-weight:500}.icewall .side-nav>ul>li>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#ffffffb3}.dark .icewall:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(0,0,0,0.06)'/%3E%3C/svg%3E%0A")}.dark .icewall .side-nav .side-nav__divider{background-color:#ffffff12}.dark .icewall .side-nav>ul>li>.side-menu.side-menu--active{background-color:transparent}.dark .icewall .side-nav>ul>li>.side-menu.side-menu--active:before{border-color:#0000001a;background-color:rgb(var(--color-darkmode-700) / 1)}.dark .icewall .side-nav>ul>li>.side-menu.side-menu--active:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E")}.dark .icewall .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon{color:#cbd5e1}.dark .icewall .side-nav>ul>li>.side-menu.side-menu--active .side-menu__title{color:#cbd5e1}.dark .icewall .side-nav>ul>li>.side-menu:not(.side-menu--active) .side-menu__icon{color:#94a3b8}.dark .icewall .side-nav>ul>li>.side-menu:not(.side-menu--active) .side-menu__title{color:#94a3b8}.dark .icewall .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open):before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .icewall .side-nav>ul>li>ul{background-color:transparent}.dark .icewall .side-nav>ul>li>ul:before{background-color:rgb(var(--color-darkmode-900) / 30%)}.dark .icewall .side-nav>ul>li>ul>li>.side-menu.side-menu--active{color:#cbd5e1}.dark .icewall .side-nav>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#94a3b8}.dark .icewall .side-nav>ul>li>ul>li>ul{background-color:transparent}.dark .icewall .side-nav>ul>li>ul>li>ul:before{background-color:rgb(var(--color-darkmode-900) / 30%)}.dark .icewall .side-nav>ul>li>ul>li>ul>li>.side-menu.side-menu--active{color:#cbd5e1}.dark .icewall .side-nav>ul>li>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#94a3b8}.icewall:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-attachment:fixed;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E%0A")}.icewall .wrapper:before{animation:.4s intro-wrapper ease-in-out .1s;animation-fill-mode:forwards}.icewall .wrapper .wrapper-box{animation:.4s intro-wrapper ease-in-out .2s;animation-fill-mode:forwards}.icewall .top-nav{animation:.4s intro-top-menu ease-in-out .3s;animation-fill-mode:forwards}.icewall .top-nav .top-menu{height:55px;display:flex;align-items:center;padding-left:1.25rem;padding-right:1.25rem;margin-right:.25rem;color:#fff;position:relative;border-radius:9999px}@media (min-width: 1280px){.icewall .top-nav .top-menu{height:47px;border-radius:.5rem}}.icewall .top-nav .top-menu .top-menu__icon{z-index:10}.icewall .top-nav .top-menu .top-menu__title{width:100%;margin-left:.75rem;display:flex;align-items:center;white-space:nowrap;z-index:10}.icewall .top-nav .top-menu .top-menu__title .top-menu__sub-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s;width:1rem;height:1rem;display:none}@media (min-width: 1280px){.icewall .top-nav .top-menu .top-menu__title .top-menu__sub-icon{display:block}}.icewall .top-nav>ul>li:nth-child(1)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.icewall .top-nav>ul>li:nth-child(2)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.icewall .top-nav>ul>li:nth-child(3)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.icewall .top-nav>ul>li:nth-child(4)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.icewall .top-nav>ul>li:nth-child(5)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.icewall .top-nav>ul>li:nth-child(6)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.icewall .top-nav>ul>li:nth-child(7)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.icewall .top-nav>ul>li:nth-child(8)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.icewall .top-nav>ul>li:nth-child(9)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.icewall .top-nav>ul>li:nth-child(10)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.icewall .top-nav>ul>li:nth-child(11)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.icewall .top-nav>ul>li:nth-child(12)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.icewall .top-nav>ul>li:nth-child(13)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.icewall .top-nav>ul>li:nth-child(14)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.icewall .top-nav>ul>li:nth-child(15)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.icewall .top-nav>ul>li:nth-child(16)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.icewall .top-nav>ul>li:nth-child(17)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.icewall .top-nav>ul>li:nth-child(18)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.icewall .top-nav>ul>li:nth-child(19)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.icewall .top-nav>ul>li:nth-child(20)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.icewall .top-nav>ul>li:nth-child(21)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.icewall .top-nav>ul>li:nth-child(22)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.icewall .top-nav>ul>li:nth-child(23)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.icewall .top-nav>ul>li:nth-child(24)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.icewall .top-nav>ul>li:nth-child(25)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.icewall .top-nav>ul>li:nth-child(26)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.icewall .top-nav>ul>li:nth-child(27)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.icewall .top-nav>ul>li:nth-child(28)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.icewall .top-nav>ul>li:nth-child(29)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.icewall .top-nav>ul>li:nth-child(30)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.icewall .top-nav>ul>li:nth-child(31)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.icewall .top-nav>ul>li:nth-child(32)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.icewall .top-nav>ul>li:nth-child(33)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.icewall .top-nav>ul>li:nth-child(34)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.icewall .top-nav>ul>li:nth-child(35)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.icewall .top-nav>ul>li:nth-child(36)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.icewall .top-nav>ul>li:nth-child(37)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.icewall .top-nav>ul>li:nth-child(38)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.icewall .top-nav>ul>li:nth-child(39)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.icewall .top-nav>ul>li:nth-child(40)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.icewall .top-nav>ul>li:nth-child(41)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.icewall .top-nav>ul>li:nth-child(42)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.icewall .top-nav>ul>li:nth-child(43)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.icewall .top-nav>ul>li:nth-child(44)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.icewall .top-nav>ul>li:nth-child(45)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.icewall .top-nav>ul>li:nth-child(46)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.icewall .top-nav>ul>li:nth-child(47)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.icewall .top-nav>ul>li:nth-child(48)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.icewall .top-nav>ul>li:nth-child(49)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.icewall .top-nav>ul>li:nth-child(50)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.icewall .top-nav>ul>li:hover{position:relative}.icewall .top-nav>ul>li:hover>.top-menu{background:rgb(var(--color-theme-1) / 60%)}.icewall .top-nav>ul>li:hover>.top-menu:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:#ffffff0a;border-radius:9999px;position:absolute;z-index:-1}@media (min-width: 1280px){.icewall .top-nav>ul>li:hover>.top-menu:before{background-color:#ffffff1a;border-radius:.5rem}}.icewall .top-nav>ul>li:hover>.top-menu .top-menu__title .top-menu__sub-icon{transform:rotate(180deg)}.icewall .top-nav>ul>li:hover>ul{display:block}.icewall .top-nav>ul>li>.top-menu{margin-top:3px}.icewall .top-nav>ul>li>.top-menu.top-menu--active{background-color:#f1f5f9}@media (min-width: 1280px){.icewall .top-nav>ul>li>.top-menu.top-menu--active{background-color:rgb(var(--color-theme-1) / 1)}}.icewall .top-nav>ul>li>.top-menu.top-menu--active:before{content:"";display:none;top:0;left:0;right:0;bottom:0;background-color:#ffffff14;border-radius:.5rem;position:absolute;border-bottom:3px solid rgb(0 0 0 / 10%)}@media (min-width: 1280px){.icewall .top-nav>ul>li>.top-menu.top-menu--active:before{display:block}}.icewall .top-nav>ul>li>.top-menu.top-menu--active:after{content:"";animation:.3s ease-in-out 1s active-top-menu-chevron;animation-fill-mode:forwards;display:none;width:20px;height:80px;margin-bottom:-74px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:cover;position:absolute;left:0;right:0;bottom:0;margin-left:auto;margin-right:auto;transform:rotate(90deg);opacity:0}@media (min-width: 1280px){.icewall .top-nav>ul>li>.top-menu.top-menu--active:after{display:block}}.icewall .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:rgb(var(--color-theme-1) / 1)}@media (min-width: 1280px){.icewall .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:#fff}}.icewall .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{font-weight:500;color:#1e293b}@media (min-width: 1280px){.icewall .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{color:#fff}}.icewall .top-nav>ul>li>.top-menu .top-menu__icon{margin-top:-3px}.icewall .top-nav>ul>li>.top-menu .top-menu__title{margin-top:-3px}.icewall .top-nav>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:.5rem}.icewall .top-nav>ul>li>ul{box-shadow:0 3px 20px #0000000b;background-color:rgb(var(--color-theme-1) / 1);display:none;width:14rem;position:absolute;border-radius:.375rem;z-index:20;padding-left:0;padding-right:0;margin-top:.25rem}.icewall .top-nav>ul>li>ul:before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#ffffff0a;top:0;left:0;right:0;bottom:0;border-radius:.375rem;z-index:-1}.icewall .top-nav>ul>li>ul:after{content:"";width:100%;height:.25rem;position:absolute;top:0;left:0;margin-top:-.25rem;cursor:pointer}.icewall .top-nav>ul>li>ul>li{padding-left:1.25rem;padding-right:1.25rem;position:relative}.icewall .top-nav>ul>li>ul>li:hover{position:relative}.icewall .top-nav>ul>li>ul>li:hover>.top-menu .top-menu__title .top-menu__sub-icon{transform:rotate(-90deg)}.icewall .top-nav>ul>li>ul>li:hover>ul{display:block}.icewall .top-nav>ul>li>ul>li>.top-menu{padding-left:0;padding-right:0;margin-right:0}.icewall .top-nav>ul>li>ul>li>.top-menu .top-menu__title{width:100%}.icewall .top-nav>ul>li>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:auto}.icewall .top-nav>ul>li>ul>li>ul{box-shadow:0 3px 20px #0000000b;left:100%;background-color:rgb(var(--color-theme-1) / 1);display:none;border-radius:.375rem;margin-top:0;margin-left:0;top:0;width:14rem;position:absolute;z-index:20;padding-left:0;padding-right:0}.icewall .top-nav>ul>li>ul>li>ul:before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#ffffff0a;top:0;left:0;right:0;bottom:0;border-radius:.375rem;z-index:-1}.icewall .top-nav>ul>li>ul>li>ul>li{padding-left:1.25rem;padding-right:1.25rem}.icewall .top-nav>ul>li>ul>li>ul>li>.top-menu{padding-left:0;padding-right:0;margin-right:0}.icewall .top-nav>ul>li>ul>li>ul>li>.top-menu .top-menu__title{width:100%}.icewall .top-nav>ul>li>ul>li>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:auto}@keyframes active-top-menu-chevron{to{opacity:1;margin-bottom:-54px}}@keyframes intro-wrapper{to{opacity:1;transform:translate(0)}}.dark .icewall:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(0,0,0,0.06)'/%3E%3C/svg%3E%0A")}.dark .icewall .top-nav .top-menu .top-menu__icon,.dark .icewall .top-nav .top-menu .top-menu__title{color:#94a3b8}.dark .icewall .top-nav>ul>li:hover>.top-menu:not(.top-menu--active){background-color:transparent}.dark .icewall .top-nav>ul>li:hover>.top-menu:not(.top-menu--active):before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .icewall .top-nav>ul>li>.top-menu.top-menu--active{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .icewall .top-nav>ul>li>.top-menu.top-menu--active:before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .icewall .top-nav>ul>li>.top-menu.top-menu--active:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E")}.dark .icewall .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:#fff}.dark .icewall .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{color:#fff}.dark .icewall .top-nav>ul>li>ul{background-color:rgb(var(--color-darkmode-600) / 1);box-shadow:0 3px 7px #0000001c}.dark .icewall .top-nav>ul>li>ul:before{background-color:#0000001a}.dark .icewall .top-nav>ul>li>ul>li>ul{background-color:rgb(var(--color-darkmode-600) / 1);box-shadow:0 3px 7px #0000001c}.dark .icewall .top-nav>ul>li>ul>li>ul:before{background-color:#0000001a}.tinker .side-nav.side-nav--simple .side-menu .side-menu__title,.tinker .side-nav.side-nav--simple .side-menu .side-menu__title .side-menu__sub-icon{display:none}.tinker .side-nav .side-nav__divider{width:100%;height:1px;background-color:#ffffff14;z-index:10;position:relative}.tinker .side-nav .side-menu{height:50px;display:flex;align-items:center;padding-left:1.25rem;color:#fff;margin-bottom:.25rem;position:relative;border-radius:.5rem}.tinker .side-nav .side-menu .side-menu__title{display:none;align-items:center;width:100%;margin-left:.75rem}@media (min-width: 1280px){.tinker .side-nav .side-menu .side-menu__title{display:flex}}.tinker .side-nav .side-menu .side-menu__title .side-menu__sub-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s;margin-left:auto;margin-right:1.25rem;display:none}@media (min-width: 1280px){.tinker .side-nav .side-menu .side-menu__title .side-menu__sub-icon{display:block}}.tinker .side-nav .side-menu .side-menu__title .side-menu__sub-icon svg{width:1rem;height:1rem}.tinker .side-nav>ul>li:nth-child(1).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.tinker .side-nav>ul>li:nth-child(1)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.tinker .side-nav>ul>li:nth-child(2).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.tinker .side-nav>ul>li:nth-child(2)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.tinker .side-nav>ul>li:nth-child(3).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.tinker .side-nav>ul>li:nth-child(3)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.tinker .side-nav>ul>li:nth-child(4).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.tinker .side-nav>ul>li:nth-child(4)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.tinker .side-nav>ul>li:nth-child(5).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.tinker .side-nav>ul>li:nth-child(5)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.tinker .side-nav>ul>li:nth-child(6).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.tinker .side-nav>ul>li:nth-child(6)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.tinker .side-nav>ul>li:nth-child(7).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.tinker .side-nav>ul>li:nth-child(7)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.tinker .side-nav>ul>li:nth-child(8).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.tinker .side-nav>ul>li:nth-child(8)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.tinker .side-nav>ul>li:nth-child(9).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.tinker .side-nav>ul>li:nth-child(9)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.tinker .side-nav>ul>li:nth-child(10).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.tinker .side-nav>ul>li:nth-child(10)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.tinker .side-nav>ul>li:nth-child(11).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.tinker .side-nav>ul>li:nth-child(11)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.tinker .side-nav>ul>li:nth-child(12).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.tinker .side-nav>ul>li:nth-child(12)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.tinker .side-nav>ul>li:nth-child(13).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.tinker .side-nav>ul>li:nth-child(13)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.tinker .side-nav>ul>li:nth-child(14).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.tinker .side-nav>ul>li:nth-child(14)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.tinker .side-nav>ul>li:nth-child(15).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.tinker .side-nav>ul>li:nth-child(15)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.tinker .side-nav>ul>li:nth-child(16).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.tinker .side-nav>ul>li:nth-child(16)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.tinker .side-nav>ul>li:nth-child(17).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.tinker .side-nav>ul>li:nth-child(17)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.tinker .side-nav>ul>li:nth-child(18).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.tinker .side-nav>ul>li:nth-child(18)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.tinker .side-nav>ul>li:nth-child(19).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.tinker .side-nav>ul>li:nth-child(19)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.tinker .side-nav>ul>li:nth-child(20).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.tinker .side-nav>ul>li:nth-child(20)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.tinker .side-nav>ul>li:nth-child(21).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.tinker .side-nav>ul>li:nth-child(21)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.tinker .side-nav>ul>li:nth-child(22).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.tinker .side-nav>ul>li:nth-child(22)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.tinker .side-nav>ul>li:nth-child(23).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.tinker .side-nav>ul>li:nth-child(23)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.tinker .side-nav>ul>li:nth-child(24).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.tinker .side-nav>ul>li:nth-child(24)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.tinker .side-nav>ul>li:nth-child(25).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.tinker .side-nav>ul>li:nth-child(25)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.tinker .side-nav>ul>li:nth-child(26).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.tinker .side-nav>ul>li:nth-child(26)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.tinker .side-nav>ul>li:nth-child(27).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.tinker .side-nav>ul>li:nth-child(27)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.tinker .side-nav>ul>li:nth-child(28).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.tinker .side-nav>ul>li:nth-child(28)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.tinker .side-nav>ul>li:nth-child(29).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.tinker .side-nav>ul>li:nth-child(29)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.tinker .side-nav>ul>li:nth-child(30).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.tinker .side-nav>ul>li:nth-child(30)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.tinker .side-nav>ul>li:nth-child(31).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.tinker .side-nav>ul>li:nth-child(31)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.tinker .side-nav>ul>li:nth-child(32).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.tinker .side-nav>ul>li:nth-child(32)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.tinker .side-nav>ul>li:nth-child(33).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.tinker .side-nav>ul>li:nth-child(33)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.tinker .side-nav>ul>li:nth-child(34).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.tinker .side-nav>ul>li:nth-child(34)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.tinker .side-nav>ul>li:nth-child(35).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.tinker .side-nav>ul>li:nth-child(35)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.tinker .side-nav>ul>li:nth-child(36).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.tinker .side-nav>ul>li:nth-child(36)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.tinker .side-nav>ul>li:nth-child(37).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.tinker .side-nav>ul>li:nth-child(37)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.tinker .side-nav>ul>li:nth-child(38).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.tinker .side-nav>ul>li:nth-child(38)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.tinker .side-nav>ul>li:nth-child(39).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.tinker .side-nav>ul>li:nth-child(39)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.tinker .side-nav>ul>li:nth-child(40).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.tinker .side-nav>ul>li:nth-child(40)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.tinker .side-nav>ul>li:nth-child(41).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.tinker .side-nav>ul>li:nth-child(41)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.tinker .side-nav>ul>li:nth-child(42).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.tinker .side-nav>ul>li:nth-child(42)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.tinker .side-nav>ul>li:nth-child(43).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.tinker .side-nav>ul>li:nth-child(43)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.tinker .side-nav>ul>li:nth-child(44).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.tinker .side-nav>ul>li:nth-child(44)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.tinker .side-nav>ul>li:nth-child(45).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.tinker .side-nav>ul>li:nth-child(45)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.tinker .side-nav>ul>li:nth-child(46).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.tinker .side-nav>ul>li:nth-child(46)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.tinker .side-nav>ul>li:nth-child(47).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.tinker .side-nav>ul>li:nth-child(47)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.tinker .side-nav>ul>li:nth-child(48).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.tinker .side-nav>ul>li:nth-child(48)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.tinker .side-nav>ul>li:nth-child(49).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.tinker .side-nav>ul>li:nth-child(49)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.tinker .side-nav>ul>li:nth-child(50).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.tinker .side-nav>ul>li:nth-child(50)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.tinker .side-nav>ul ul li:nth-child(1)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.tinker .side-nav>ul ul li:nth-child(2)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.tinker .side-nav>ul ul li:nth-child(3)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.tinker .side-nav>ul ul li:nth-child(4)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.tinker .side-nav>ul ul li:nth-child(5)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.tinker .side-nav>ul ul li:nth-child(6)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.tinker .side-nav>ul ul li:nth-child(7)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.tinker .side-nav>ul ul li:nth-child(8)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.tinker .side-nav>ul ul li:nth-child(9)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.tinker .side-nav>ul ul li:nth-child(10)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.tinker .side-nav>ul ul li:nth-child(11)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.tinker .side-nav>ul ul li:nth-child(12)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.tinker .side-nav>ul ul li:nth-child(13)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.tinker .side-nav>ul ul li:nth-child(14)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.tinker .side-nav>ul ul li:nth-child(15)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.tinker .side-nav>ul ul li:nth-child(16)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.tinker .side-nav>ul ul li:nth-child(17)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.tinker .side-nav>ul ul li:nth-child(18)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.tinker .side-nav>ul ul li:nth-child(19)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.tinker .side-nav>ul ul li:nth-child(20)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.tinker .side-nav>ul ul li:nth-child(21)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.tinker .side-nav>ul ul li:nth-child(22)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.tinker .side-nav>ul ul li:nth-child(23)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.tinker .side-nav>ul ul li:nth-child(24)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.tinker .side-nav>ul ul li:nth-child(25)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.tinker .side-nav>ul ul li:nth-child(26)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.tinker .side-nav>ul ul li:nth-child(27)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.tinker .side-nav>ul ul li:nth-child(28)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.tinker .side-nav>ul ul li:nth-child(29)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.tinker .side-nav>ul ul li:nth-child(30)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.tinker .side-nav>ul ul li:nth-child(31)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.tinker .side-nav>ul ul li:nth-child(32)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.tinker .side-nav>ul ul li:nth-child(33)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.tinker .side-nav>ul ul li:nth-child(34)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.tinker .side-nav>ul ul li:nth-child(35)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.tinker .side-nav>ul ul li:nth-child(36)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.tinker .side-nav>ul ul li:nth-child(37)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.tinker .side-nav>ul ul li:nth-child(38)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.tinker .side-nav>ul ul li:nth-child(39)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.tinker .side-nav>ul ul li:nth-child(40)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.tinker .side-nav>ul ul li:nth-child(41)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.tinker .side-nav>ul ul li:nth-child(42)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.tinker .side-nav>ul ul li:nth-child(43)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.tinker .side-nav>ul ul li:nth-child(44)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.tinker .side-nav>ul ul li:nth-child(45)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.tinker .side-nav>ul ul li:nth-child(46)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.tinker .side-nav>ul ul li:nth-child(47)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.tinker .side-nav>ul ul li:nth-child(48)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.tinker .side-nav>ul ul li:nth-child(49)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.tinker .side-nav>ul ul li:nth-child(50)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.tinker .side-nav>ul>li>.side-menu.side-menu--active{background-color:rgb(var(--color-theme-1) / 1);z-index:10}.tinker .side-nav>ul>li>.side-menu.side-menu--active:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:#ffffff14;border-radius:.5rem;position:absolute;border-bottom:3px solid rgb(0 0 0 / 10%)}.tinker .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon{z-index:10}.tinker .side-nav>ul>li>.side-menu.side-menu--active .side-menu__title{font-weight:500;z-index:10}.tinker .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open){background-color:rgb(var(--color-theme-1) / 60%)}.tinker .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open):before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:#ffffff0a;border-radius:.75rem;position:absolute;z-index:-1}.tinker .side-nav>ul>li>ul{background-color:#ffffff0a;border-radius:.75rem;position:relative}.tinker .side-nav>ul>li>ul:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:rgb(var(--color-theme-1) / 60%);border-radius:.75rem;position:absolute;z-index:-1}.tinker .side-nav>ul>li>ul:not(.side-menu__sub-open){display:none}.tinker .side-nav>ul>li>ul>li>.side-menu.side-menu--active .side-menu__title{font-weight:500}.tinker .side-nav>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#ffffffb3}.tinker .side-nav>ul>li>ul>li>ul{background-color:#ffffff0a;border-radius:.75rem;position:relative}.tinker .side-nav>ul>li>ul>li>ul:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:rgb(var(--color-theme-1) / 60%);border-radius:.75rem;position:absolute;z-index:-1}.tinker .side-nav>ul>li>ul>li>ul:not(.side-menu__sub-open){display:none}.tinker .side-nav>ul>li>ul>li>ul>li>.side-menu{padding-left:2.5rem}.tinker .side-nav>ul>li>ul>li>ul>li>.side-menu.side-menu--active .side-menu__title{font-weight:500}.tinker .side-nav>ul>li>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#ffffffb3}.dark .tinker .side-nav .side-nav__divider{background-color:#ffffff12}.dark .tinker .side-nav>ul>li>.side-menu.side-menu--active{background-color:transparent}.dark .tinker .side-nav>ul>li>.side-menu.side-menu--active:before{border-color:#0000001a;background-color:rgb(var(--color-darkmode-700) / 1)}.dark .tinker .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon{color:#cbd5e1}.dark .tinker .side-nav>ul>li>.side-menu.side-menu--active .side-menu__title{color:#cbd5e1}.dark .tinker .side-nav>ul>li>.side-menu:not(.side-menu--active) .side-menu__icon{color:#94a3b8}.dark .tinker .side-nav>ul>li>.side-menu:not(.side-menu--active) .side-menu__title{color:#94a3b8}.dark .tinker .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open):before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .tinker .side-nav>ul>li>ul{background-color:transparent}.dark .tinker .side-nav>ul>li>ul:before{background-color:rgb(var(--color-darkmode-900) / 30%)}.dark .tinker .side-nav>ul>li>ul>li>.side-menu.side-menu--active{color:#cbd5e1}.dark .tinker .side-nav>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#94a3b8}.dark .tinker .side-nav>ul>li>ul>li>ul{background-color:transparent}.dark .tinker .side-nav>ul>li>ul>li>ul:before{background-color:rgb(var(--color-darkmode-900) / 30%)}.dark .tinker .side-nav>ul>li>ul>li>ul>li>.side-menu.side-menu--active{color:#cbd5e1}.dark .tinker .side-nav>ul>li>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#94a3b8}.tinker .top-nav{animation:.4s intro-top-menu ease-in-out .2s;animation-fill-mode:forwards}.tinker .top-nav .top-menu{height:55px;display:flex;align-items:center;padding-left:1.25rem;padding-right:1.25rem;margin-right:.25rem;color:#fff;position:relative;border-radius:9999px}@media (min-width: 1280px){.tinker .top-nav .top-menu{border-radius:.75rem}}.tinker .top-nav .top-menu .top-menu__icon{z-index:10}.tinker .top-nav .top-menu .top-menu__title{width:100%;margin-left:.75rem;display:flex;align-items:center;white-space:nowrap;z-index:10}.tinker .top-nav .top-menu .top-menu__title .top-menu__sub-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s;width:1rem;height:1rem;display:none}@media (min-width: 1280px){.tinker .top-nav .top-menu .top-menu__title .top-menu__sub-icon{display:block}}.tinker .top-nav>ul>li:nth-child(1)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.tinker .top-nav>ul>li:nth-child(2)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.tinker .top-nav>ul>li:nth-child(3)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.tinker .top-nav>ul>li:nth-child(4)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.tinker .top-nav>ul>li:nth-child(5)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.tinker .top-nav>ul>li:nth-child(6)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.tinker .top-nav>ul>li:nth-child(7)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.tinker .top-nav>ul>li:nth-child(8)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.tinker .top-nav>ul>li:nth-child(9)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.tinker .top-nav>ul>li:nth-child(10)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.tinker .top-nav>ul>li:nth-child(11)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.tinker .top-nav>ul>li:nth-child(12)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.tinker .top-nav>ul>li:nth-child(13)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.tinker .top-nav>ul>li:nth-child(14)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.tinker .top-nav>ul>li:nth-child(15)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.tinker .top-nav>ul>li:nth-child(16)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.tinker .top-nav>ul>li:nth-child(17)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.tinker .top-nav>ul>li:nth-child(18)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.tinker .top-nav>ul>li:nth-child(19)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.tinker .top-nav>ul>li:nth-child(20)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.tinker .top-nav>ul>li:nth-child(21)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.tinker .top-nav>ul>li:nth-child(22)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.tinker .top-nav>ul>li:nth-child(23)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.tinker .top-nav>ul>li:nth-child(24)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.tinker .top-nav>ul>li:nth-child(25)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.tinker .top-nav>ul>li:nth-child(26)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.tinker .top-nav>ul>li:nth-child(27)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.tinker .top-nav>ul>li:nth-child(28)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.tinker .top-nav>ul>li:nth-child(29)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.tinker .top-nav>ul>li:nth-child(30)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.tinker .top-nav>ul>li:nth-child(31)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.tinker .top-nav>ul>li:nth-child(32)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.tinker .top-nav>ul>li:nth-child(33)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.tinker .top-nav>ul>li:nth-child(34)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.tinker .top-nav>ul>li:nth-child(35)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.tinker .top-nav>ul>li:nth-child(36)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.tinker .top-nav>ul>li:nth-child(37)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.tinker .top-nav>ul>li:nth-child(38)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.tinker .top-nav>ul>li:nth-child(39)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.tinker .top-nav>ul>li:nth-child(40)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.tinker .top-nav>ul>li:nth-child(41)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.tinker .top-nav>ul>li:nth-child(42)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.tinker .top-nav>ul>li:nth-child(43)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.tinker .top-nav>ul>li:nth-child(44)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.tinker .top-nav>ul>li:nth-child(45)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.tinker .top-nav>ul>li:nth-child(46)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.tinker .top-nav>ul>li:nth-child(47)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.tinker .top-nav>ul>li:nth-child(48)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.tinker .top-nav>ul>li:nth-child(49)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.tinker .top-nav>ul>li:nth-child(50)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.tinker .top-nav>ul>li:hover{position:relative}.tinker .top-nav>ul>li:hover>.top-menu{background:rgb(var(--color-theme-1) / 60%)}.tinker .top-nav>ul>li:hover>.top-menu:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:#ffffff0a;border-radius:9999px;position:absolute;z-index:-1}@media (min-width: 1280px){.tinker .top-nav>ul>li:hover>.top-menu:before{background-color:#ffffff1a;border-radius:.75rem}}.tinker .top-nav>ul>li:hover>.top-menu .top-menu__title .top-menu__sub-icon{transform:rotate(180deg)}.tinker .top-nav>ul>li:hover>ul{display:block}.tinker .top-nav>ul>li>.top-menu{margin-top:3px}.tinker .top-nav>ul>li>.top-menu.top-menu--active{background-color:#f1f5f9}@media (min-width: 1280px){.tinker .top-nav>ul>li>.top-menu.top-menu--active{background-color:rgb(var(--color-theme-1) / 1)}}.tinker .top-nav>ul>li>.top-menu.top-menu--active:before{content:"";display:none;top:0;left:0;right:0;bottom:0;background-color:#ffffff14;border-radius:.75rem;position:absolute;border-bottom:3px solid rgb(0 0 0 / 10%)}@media (min-width: 1280px){.tinker .top-nav>ul>li>.top-menu.top-menu--active:before{display:block}}.tinker .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:rgb(var(--color-theme-1) / 1)}@media (min-width: 1280px){.tinker .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:#fff}}.tinker .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{font-weight:500;color:#1e293b}@media (min-width: 1280px){.tinker .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{color:#fff}}.tinker .top-nav>ul>li>.top-menu .top-menu__icon{margin-top:-3px}.tinker .top-nav>ul>li>.top-menu .top-menu__title{margin-top:-3px}.tinker .top-nav>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:.5rem}.tinker .top-nav>ul>li>ul{box-shadow:0 3px 20px #0000000b;background-color:rgb(var(--color-theme-1) / 1);display:none;width:14rem;position:absolute;border-radius:.375rem;z-index:20;padding-left:0;padding-right:0;margin-top:.25rem}.tinker .top-nav>ul>li>ul:before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#ffffff0a;top:0;left:0;right:0;bottom:0;border-radius:.375rem;z-index:-1}.tinker .top-nav>ul>li>ul:after{content:"";width:100%;height:.25rem;position:absolute;top:0;left:0;margin-top:-.25rem;cursor:pointer}.tinker .top-nav>ul>li>ul>li{padding-left:1.25rem;padding-right:1.25rem;position:relative}.tinker .top-nav>ul>li>ul>li:hover{position:relative}.tinker .top-nav>ul>li>ul>li:hover>.top-menu .top-menu__title .top-menu__sub-icon{transform:rotate(-90deg)}.tinker .top-nav>ul>li>ul>li:hover>ul{display:block}.tinker .top-nav>ul>li>ul>li>.top-menu{padding-left:0;padding-right:0;margin-right:0}.tinker .top-nav>ul>li>ul>li>.top-menu .top-menu__title{width:100%}.tinker .top-nav>ul>li>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:auto}.tinker .top-nav>ul>li>ul>li>ul{box-shadow:0 3px 20px #0000000b;left:100%;background-color:rgb(var(--color-theme-1) / 1);display:none;border-radius:.375rem;margin-top:0;margin-left:0;top:0;width:14rem;position:absolute;z-index:20;padding-left:0;padding-right:0}.tinker .top-nav>ul>li>ul>li>ul:before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#ffffff0a;top:0;left:0;right:0;bottom:0;border-radius:.375rem;z-index:-1}.tinker .top-nav>ul>li>ul>li>ul>li{padding-left:1.25rem;padding-right:1.25rem}.tinker .top-nav>ul>li>ul>li>ul>li>.top-menu{padding-left:0;padding-right:0;margin-right:0}.tinker .top-nav>ul>li>ul>li>ul>li>.top-menu .top-menu__title{width:100%}.tinker .top-nav>ul>li>ul>li>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:auto}.dark .tinker .top-nav .top-menu .top-menu__icon,.dark .tinker .top-nav .top-menu .top-menu__title{color:#94a3b8}.dark .tinker .top-nav>ul>li:hover>.top-menu:not(.top-menu--active){background-color:transparent}.dark .tinker .top-nav>ul>li:hover>.top-menu:not(.top-menu--active):before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .tinker .top-nav>ul>li>.top-menu.top-menu--active{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .tinker .top-nav>ul>li>.top-menu.top-menu--active:before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .tinker .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:#fff}.dark .tinker .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{color:#fff}.dark .tinker .top-nav>ul>li>ul{background-color:rgb(var(--color-darkmode-600) / 1);box-shadow:0 3px 7px #0000001c}.dark .tinker .top-nav>ul>li>ul:before{background-color:#0000001a}.dark .tinker .top-nav>ul>li>ul>li>ul{background-color:rgb(var(--color-darkmode-600) / 1);box-shadow:0 3px 7px #0000001c}.dark .tinker .top-nav>ul>li>ul>li>ul:before{background-color:#0000001a}.enigma .side-nav.side-nav--simple .side-menu .side-menu__title,.enigma .side-nav.side-nav--simple .side-menu .side-menu__title .side-menu__sub-icon{display:none}.enigma .side-nav .side-nav__divider{width:100%;height:1px;background-color:#0000000f;z-index:10;position:relative}.enigma .side-nav .side-menu{height:50px;display:flex;align-items:center;padding-left:1.25rem;color:#475569;margin-bottom:.25rem;position:relative;border-radius:.75rem}.enigma .side-nav .side-menu .side-menu__title{display:none;align-items:center;width:100%;margin-left:.75rem}@media (min-width: 1280px){.enigma .side-nav .side-menu .side-menu__title{display:flex}}.enigma .side-nav .side-menu .side-menu__title .side-menu__sub-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s;margin-left:auto;margin-right:1.25rem;display:none}@media (min-width: 1280px){.enigma .side-nav .side-menu .side-menu__title .side-menu__sub-icon{display:block}}.enigma .side-nav .side-menu .side-menu__title .side-menu__sub-icon svg{width:1rem;height:1rem}.enigma .side-nav>ul>li:nth-child(1).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.enigma .side-nav>ul>li:nth-child(1)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.enigma .side-nav>ul>li:nth-child(2).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.enigma .side-nav>ul>li:nth-child(2)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.enigma .side-nav>ul>li:nth-child(3).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.enigma .side-nav>ul>li:nth-child(3)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.enigma .side-nav>ul>li:nth-child(4).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.enigma .side-nav>ul>li:nth-child(4)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.enigma .side-nav>ul>li:nth-child(5).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.enigma .side-nav>ul>li:nth-child(5)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.enigma .side-nav>ul>li:nth-child(6).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.enigma .side-nav>ul>li:nth-child(6)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.enigma .side-nav>ul>li:nth-child(7).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.enigma .side-nav>ul>li:nth-child(7)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.enigma .side-nav>ul>li:nth-child(8).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.enigma .side-nav>ul>li:nth-child(8)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.enigma .side-nav>ul>li:nth-child(9).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.enigma .side-nav>ul>li:nth-child(9)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.enigma .side-nav>ul>li:nth-child(10).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.enigma .side-nav>ul>li:nth-child(10)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.enigma .side-nav>ul>li:nth-child(11).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.enigma .side-nav>ul>li:nth-child(11)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.enigma .side-nav>ul>li:nth-child(12).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.enigma .side-nav>ul>li:nth-child(12)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.enigma .side-nav>ul>li:nth-child(13).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.enigma .side-nav>ul>li:nth-child(13)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.enigma .side-nav>ul>li:nth-child(14).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.enigma .side-nav>ul>li:nth-child(14)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.enigma .side-nav>ul>li:nth-child(15).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.enigma .side-nav>ul>li:nth-child(15)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.enigma .side-nav>ul>li:nth-child(16).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.enigma .side-nav>ul>li:nth-child(16)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.enigma .side-nav>ul>li:nth-child(17).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.enigma .side-nav>ul>li:nth-child(17)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.enigma .side-nav>ul>li:nth-child(18).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.enigma .side-nav>ul>li:nth-child(18)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.enigma .side-nav>ul>li:nth-child(19).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.enigma .side-nav>ul>li:nth-child(19)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.enigma .side-nav>ul>li:nth-child(20).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.enigma .side-nav>ul>li:nth-child(20)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.enigma .side-nav>ul>li:nth-child(21).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.enigma .side-nav>ul>li:nth-child(21)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.enigma .side-nav>ul>li:nth-child(22).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.enigma .side-nav>ul>li:nth-child(22)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.enigma .side-nav>ul>li:nth-child(23).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.enigma .side-nav>ul>li:nth-child(23)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.enigma .side-nav>ul>li:nth-child(24).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.enigma .side-nav>ul>li:nth-child(24)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.enigma .side-nav>ul>li:nth-child(25).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.enigma .side-nav>ul>li:nth-child(25)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.enigma .side-nav>ul>li:nth-child(26).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.enigma .side-nav>ul>li:nth-child(26)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.enigma .side-nav>ul>li:nth-child(27).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.enigma .side-nav>ul>li:nth-child(27)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.enigma .side-nav>ul>li:nth-child(28).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.enigma .side-nav>ul>li:nth-child(28)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.enigma .side-nav>ul>li:nth-child(29).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.enigma .side-nav>ul>li:nth-child(29)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.enigma .side-nav>ul>li:nth-child(30).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.enigma .side-nav>ul>li:nth-child(30)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.enigma .side-nav>ul>li:nth-child(31).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.enigma .side-nav>ul>li:nth-child(31)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.enigma .side-nav>ul>li:nth-child(32).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.enigma .side-nav>ul>li:nth-child(32)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.enigma .side-nav>ul>li:nth-child(33).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.enigma .side-nav>ul>li:nth-child(33)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.enigma .side-nav>ul>li:nth-child(34).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.enigma .side-nav>ul>li:nth-child(34)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.enigma .side-nav>ul>li:nth-child(35).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.enigma .side-nav>ul>li:nth-child(35)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.enigma .side-nav>ul>li:nth-child(36).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.enigma .side-nav>ul>li:nth-child(36)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.enigma .side-nav>ul>li:nth-child(37).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.enigma .side-nav>ul>li:nth-child(37)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.enigma .side-nav>ul>li:nth-child(38).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.enigma .side-nav>ul>li:nth-child(38)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.enigma .side-nav>ul>li:nth-child(39).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.enigma .side-nav>ul>li:nth-child(39)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.enigma .side-nav>ul>li:nth-child(40).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.enigma .side-nav>ul>li:nth-child(40)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.enigma .side-nav>ul>li:nth-child(41).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.enigma .side-nav>ul>li:nth-child(41)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.enigma .side-nav>ul>li:nth-child(42).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.enigma .side-nav>ul>li:nth-child(42)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.enigma .side-nav>ul>li:nth-child(43).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.enigma .side-nav>ul>li:nth-child(43)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.enigma .side-nav>ul>li:nth-child(44).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.enigma .side-nav>ul>li:nth-child(44)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.enigma .side-nav>ul>li:nth-child(45).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.enigma .side-nav>ul>li:nth-child(45)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.enigma .side-nav>ul>li:nth-child(46).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.enigma .side-nav>ul>li:nth-child(46)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.enigma .side-nav>ul>li:nth-child(47).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.enigma .side-nav>ul>li:nth-child(47)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.enigma .side-nav>ul>li:nth-child(48).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.enigma .side-nav>ul>li:nth-child(48)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.enigma .side-nav>ul>li:nth-child(49).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.enigma .side-nav>ul>li:nth-child(49)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.enigma .side-nav>ul>li:nth-child(50).side-nav__divider{opacity:0;animation:.4s intro-divider-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.enigma .side-nav>ul>li:nth-child(50)>a:not(.side-menu--active){opacity:0;transform:translate(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.enigma .side-nav>ul ul li:nth-child(1)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.enigma .side-nav>ul ul li:nth-child(2)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.enigma .side-nav>ul ul li:nth-child(3)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.enigma .side-nav>ul ul li:nth-child(4)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.enigma .side-nav>ul ul li:nth-child(5)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.enigma .side-nav>ul ul li:nth-child(6)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.enigma .side-nav>ul ul li:nth-child(7)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.enigma .side-nav>ul ul li:nth-child(8)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.enigma .side-nav>ul ul li:nth-child(9)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.enigma .side-nav>ul ul li:nth-child(10)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.enigma .side-nav>ul ul li:nth-child(11)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.enigma .side-nav>ul ul li:nth-child(12)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.enigma .side-nav>ul ul li:nth-child(13)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.enigma .side-nav>ul ul li:nth-child(14)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.enigma .side-nav>ul ul li:nth-child(15)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.enigma .side-nav>ul ul li:nth-child(16)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.enigma .side-nav>ul ul li:nth-child(17)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.enigma .side-nav>ul ul li:nth-child(18)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.enigma .side-nav>ul ul li:nth-child(19)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.enigma .side-nav>ul ul li:nth-child(20)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.enigma .side-nav>ul ul li:nth-child(21)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.enigma .side-nav>ul ul li:nth-child(22)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.enigma .side-nav>ul ul li:nth-child(23)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.enigma .side-nav>ul ul li:nth-child(24)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.enigma .side-nav>ul ul li:nth-child(25)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.enigma .side-nav>ul ul li:nth-child(26)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.enigma .side-nav>ul ul li:nth-child(27)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.enigma .side-nav>ul ul li:nth-child(28)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.enigma .side-nav>ul ul li:nth-child(29)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.enigma .side-nav>ul ul li:nth-child(30)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.enigma .side-nav>ul ul li:nth-child(31)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.enigma .side-nav>ul ul li:nth-child(32)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.enigma .side-nav>ul ul li:nth-child(33)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.enigma .side-nav>ul ul li:nth-child(34)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.enigma .side-nav>ul ul li:nth-child(35)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.enigma .side-nav>ul ul li:nth-child(36)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.enigma .side-nav>ul ul li:nth-child(37)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.enigma .side-nav>ul ul li:nth-child(38)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.enigma .side-nav>ul ul li:nth-child(39)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.enigma .side-nav>ul ul li:nth-child(40)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.enigma .side-nav>ul ul li:nth-child(41)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.enigma .side-nav>ul ul li:nth-child(42)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.enigma .side-nav>ul ul li:nth-child(43)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.enigma .side-nav>ul ul li:nth-child(44)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.enigma .side-nav>ul ul li:nth-child(45)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.enigma .side-nav>ul ul li:nth-child(46)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.enigma .side-nav>ul ul li:nth-child(47)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.enigma .side-nav>ul ul li:nth-child(48)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.enigma .side-nav>ul ul li:nth-child(49)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.enigma .side-nav>ul ul li:nth-child(50)>a{opacity:0;transform:translate(50px);animation:.2s intro-submenu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.enigma .side-nav>ul>li>.side-menu.side-menu--active{background-color:#f1f5f9;z-index:10}.enigma .side-nav>ul>li>.side-menu.side-menu--active:before{content:"";display:block;top:0;left:0;right:0;bottom:0;border-radius:.75rem;position:absolute;border-bottom:3px solid rgb(0 0 0 / 8%)}.enigma .side-nav>ul>li>.side-menu.side-menu--active:after{content:"";width:20px;height:80px;background-repeat:no-repeat;background-size:cover;position:absolute;top:0;bottom:0;right:0;margin-top:auto;margin-bottom:auto;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");margin-right:-47px;opacity:0;animation:.3s ease-in-out 1s active-side-menu-chevron;animation-fill-mode:forwards}.enigma .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon{color:rgb(var(--color-theme-1) / 1);z-index:10}.enigma .side-nav>ul>li>.side-menu.side-menu--active .side-menu__title{color:rgb(var(--color-theme-1) / 1);font-weight:500;z-index:10}.enigma .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open){background-color:#f1f5f9}.enigma .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open):before{content:"";display:block;top:0;left:0;right:0;bottom:0;border-radius:.75rem;position:absolute;z-index:-1;border-bottom:3px solid rgb(0 0 0 / 8%)}.enigma .side-nav>ul>li>ul{background-color:#ffffff0a;border-radius:.75rem;position:relative}.enigma .side-nav>ul>li>ul:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:#ffffff4d;border-radius:.75rem;position:absolute;z-index:-1}.enigma .side-nav>ul>li>ul:not(.side-menu__sub-open){display:none}.enigma .side-nav>ul>li>ul>li>.side-menu.side-menu--active .side-menu__icon{color:#334155}.enigma .side-nav>ul>li>ul>li>.side-menu.side-menu--active .side-menu__title{color:#334155;font-weight:500}.enigma .side-nav>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#475569}.enigma .side-nav>ul>li>ul>li>ul{background-color:#ffffff0a;border-radius:.75rem;position:relative}.enigma .side-nav>ul>li>ul>li>ul:before{content:"";display:block;top:0;left:0;right:0;bottom:0;background-color:#ffffff4d;border-radius:.75rem;position:absolute;z-index:-1}.enigma .side-nav>ul>li>ul>li>ul:not(.side-menu__sub-open){display:none}.enigma .side-nav>ul>li>ul>li>ul>li>.side-menu{padding-left:2.5rem}.enigma .side-nav>ul>li>ul>li>ul>li>.side-menu.side-menu--active .side-menu__icon{color:#334155}.enigma .side-nav>ul>li>ul>li>ul>li>.side-menu.side-menu--active .side-menu__title{color:#334155;font-weight:500}.enigma .side-nav>ul>li>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#475569}@keyframes intro-divider-animation{to{opacity:1}}@keyframes intro-menu-animation{to{opacity:1;transform:translate(0)}}@keyframes intro-submenu-animation{to{opacity:1;transform:translate(0)}}@keyframes active-side-menu-chevron{to{opacity:1;margin-right:-27px}}.dark .enigma .side-nav .side-nav__divider{background-color:#ffffff12}.dark .enigma .side-nav .side-menu{color:#cbd5e1}.dark .enigma .side-nav>ul>li>.side-menu.side-menu--active{background-color:transparent}.dark .enigma .side-nav>ul>li>.side-menu.side-menu--active:before{border-color:#00000014;background-color:rgb(var(--color-darkmode-700) / 1)}.dark .enigma .side-nav>ul>li>.side-menu.side-menu--active:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E")}.dark .enigma .side-nav>ul>li>.side-menu.side-menu--active .side-menu__icon{color:#cbd5e1}.dark .enigma .side-nav>ul>li>.side-menu.side-menu--active .side-menu__title{color:#cbd5e1}.dark .enigma .side-nav>ul>li>.side-menu:not(.side-menu--active) .side-menu__icon{color:#94a3b8}.dark .enigma .side-nav>ul>li>.side-menu:not(.side-menu--active) .side-menu__title{color:#94a3b8}.dark .enigma .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open){background-color:transparent}.dark .enigma .side-nav>ul>li>.side-menu:hover:not(.side-menu--active):not(.side-menu--open):before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .enigma .side-nav>ul>li>ul{background-color:transparent}.dark .enigma .side-nav>ul>li>ul:before{background-color:rgb(var(--color-darkmode-900) / 30%)}.dark .enigma .side-nav>ul>li>ul>li>.side-menu.side-menu--active .side-menu__icon{color:#cbd5e1}.dark .enigma .side-nav>ul>li>ul>li>.side-menu.side-menu--active .side-menu__title{color:#cbd5e1}.dark .enigma .side-nav>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#94a3b8}.dark .enigma .side-nav>ul>li>ul>li>.side-menu:not(.side-menu--active) .side-menu__icon{color:#94a3b8}.dark .enigma .side-nav>ul>li>ul>li>ul{background-color:transparent}.dark .enigma .side-nav>ul>li>ul>li>ul:before{background-color:rgb(var(--color-darkmode-900) / 30%)}.dark .enigma .side-nav>ul>li>ul>li>ul>li>.side-menu.side-menu--active .side-menu__icon{color:#cbd5e1}.dark .enigma .side-nav>ul>li>ul>li>ul>li>.side-menu.side-menu--active .side-menu__title{color:#cbd5e1}.dark .enigma .side-nav>ul>li>ul>li>ul>li>.side-menu:not(.side-menu--active){color:#94a3b8}.dark .enigma .side-nav>ul>li>ul>li>ul>li>.side-menu:not(.side-menu--active) .side-menu__icon{color:#94a3b8}.enigma .top-nav{animation:.4s intro-top-menu ease-in-out .2s;animation-fill-mode:forwards}.enigma .top-nav .top-menu{height:55px;display:flex;align-items:center;padding-left:1.25rem;padding-right:1.25rem;margin-right:.25rem;color:#475569;position:relative;border-radius:9999px}@media (min-width: 1280px){.enigma .top-nav .top-menu{border-radius:.75rem}}.enigma .top-nav .top-menu .top-menu__icon{z-index:10}.enigma .top-nav .top-menu .top-menu__title{margin-left:.75rem;display:flex;align-items:center;white-space:nowrap;z-index:10}.enigma .top-nav .top-menu .top-menu__title .top-menu__sub-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.1s;width:1rem;height:1rem;display:none}@media (min-width: 1280px){.enigma .top-nav .top-menu .top-menu__title .top-menu__sub-icon{display:block}}.enigma .top-nav>ul>li:nth-child(1)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}.enigma .top-nav>ul>li:nth-child(2)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}.enigma .top-nav>ul>li:nth-child(3)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}.enigma .top-nav>ul>li:nth-child(4)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}.enigma .top-nav>ul>li:nth-child(5)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}.enigma .top-nav>ul>li:nth-child(6)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}.enigma .top-nav>ul>li:nth-child(7)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}.enigma .top-nav>ul>li:nth-child(8)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}.enigma .top-nav>ul>li:nth-child(9)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}.enigma .top-nav>ul>li:nth-child(10)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}.enigma .top-nav>ul>li:nth-child(11)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}.enigma .top-nav>ul>li:nth-child(12)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}.enigma .top-nav>ul>li:nth-child(13)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}.enigma .top-nav>ul>li:nth-child(14)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}.enigma .top-nav>ul>li:nth-child(15)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}.enigma .top-nav>ul>li:nth-child(16)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}.enigma .top-nav>ul>li:nth-child(17)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}.enigma .top-nav>ul>li:nth-child(18)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}.enigma .top-nav>ul>li:nth-child(19)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}.enigma .top-nav>ul>li:nth-child(20)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}.enigma .top-nav>ul>li:nth-child(21)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}.enigma .top-nav>ul>li:nth-child(22)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}.enigma .top-nav>ul>li:nth-child(23)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}.enigma .top-nav>ul>li:nth-child(24)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}.enigma .top-nav>ul>li:nth-child(25)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}.enigma .top-nav>ul>li:nth-child(26)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}.enigma .top-nav>ul>li:nth-child(27)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}.enigma .top-nav>ul>li:nth-child(28)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}.enigma .top-nav>ul>li:nth-child(29)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}.enigma .top-nav>ul>li:nth-child(30)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}.enigma .top-nav>ul>li:nth-child(31)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}.enigma .top-nav>ul>li:nth-child(32)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}.enigma .top-nav>ul>li:nth-child(33)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}.enigma .top-nav>ul>li:nth-child(34)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}.enigma .top-nav>ul>li:nth-child(35)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}.enigma .top-nav>ul>li:nth-child(36)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}.enigma .top-nav>ul>li:nth-child(37)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}.enigma .top-nav>ul>li:nth-child(38)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}.enigma .top-nav>ul>li:nth-child(39)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}.enigma .top-nav>ul>li:nth-child(40)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}.enigma .top-nav>ul>li:nth-child(41)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}.enigma .top-nav>ul>li:nth-child(42)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}.enigma .top-nav>ul>li:nth-child(43)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}.enigma .top-nav>ul>li:nth-child(44)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}.enigma .top-nav>ul>li:nth-child(45)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}.enigma .top-nav>ul>li:nth-child(46)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}.enigma .top-nav>ul>li:nth-child(47)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}.enigma .top-nav>ul>li:nth-child(48)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}.enigma .top-nav>ul>li:nth-child(49)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}.enigma .top-nav>ul>li:nth-child(50)>a:not(.top-menu--active){opacity:0;transform:translateY(50px);animation:.4s intro-menu-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}.enigma .top-nav>ul>li:hover>.top-menu:not(.top-menu--active){background-color:#f1f5f9}.enigma .top-nav>ul>li:hover>.top-menu:not(.top-menu--active):before{content:"";display:block;top:0;left:0;right:0;bottom:0;border-radius:9999px;position:absolute;z-index:-1;border-bottom:3px solid rgb(0 0 0 / 8%)}@media (min-width: 1280px){.enigma .top-nav>ul>li:hover>.top-menu:not(.top-menu--active):before{border-radius:.75rem}}.enigma .top-nav>ul>li:hover>.top-menu .top-menu__title .top-menu__sub-icon{transform:rotate(180deg)}.enigma .top-nav>ul>li:hover>ul{display:block}.enigma .top-nav>ul>li>.top-menu{margin-top:3px}.enigma .top-nav>ul>li>.top-menu.top-menu--active{color:rgb(var(--color-theme-1) / 1);background-color:#f1f5f9}.enigma .top-nav>ul>li>.top-menu.top-menu--active:before{content:"";display:none;top:0;left:0;right:0;bottom:0;border-radius:.75rem;position:absolute;border-bottom:3px solid rgb(0 0 0 / 8%)}@media (min-width: 1280px){.enigma .top-nav>ul>li>.top-menu.top-menu--active:before{display:block}}.enigma .top-nav>ul>li>.top-menu.top-menu--active:after{content:"";width:20px;height:80px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:cover;position:absolute;left:0;right:0;bottom:0;margin-left:auto;margin-right:auto;transform:rotate(90deg);display:none;animation:.3s ease-in-out 1s active-top-menu-chevron;animation-fill-mode:forwards;margin-bottom:-74px;opacity:0}@media (min-width: 1280px){.enigma .top-nav>ul>li>.top-menu.top-menu--active:after{display:block}}.enigma .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:rgb(var(--color-theme-1) / 1)}.enigma .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{font-weight:500;color:#1e293b}@media (min-width: 1280px){.enigma .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{color:rgb(var(--color-theme-1) / 1)}}.enigma .top-nav>ul>li>.top-menu .top-menu__icon{margin-top:-3px}.enigma .top-nav>ul>li>.top-menu .top-menu__title{margin-top:-3px}.enigma .top-nav>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:.5rem}.enigma .top-nav>ul>li>ul{box-shadow:0 3px 20px #00000014;background-color:#f1f5f9;display:none;width:14rem;position:absolute;border-radius:.375rem;z-index:20;padding-left:0;padding-right:0;margin-top:.25rem}.enigma .top-nav>ul>li>ul:before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#ffffff0a;top:0;left:0;right:0;bottom:0;border-radius:.375rem;z-index:-1}.enigma .top-nav>ul>li>ul:after{content:"";width:100%;height:.25rem;position:absolute;top:0;left:0;margin-top:-.25rem;cursor:pointer}.enigma .top-nav>ul>li>ul>li{padding-left:1.25rem;padding-right:1.25rem;position:relative}.enigma .top-nav>ul>li>ul>li:hover{position:relative}.enigma .top-nav>ul>li>ul>li:hover>.top-menu .top-menu__title .top-menu__sub-icon{transform:rotate(-90deg)}.enigma .top-nav>ul>li>ul>li:hover>ul{display:block}.enigma .top-nav>ul>li>ul>li>.top-menu{padding-left:0;padding-right:0;margin-right:0}.enigma .top-nav>ul>li>ul>li>.top-menu .top-menu__title{width:100%}.enigma .top-nav>ul>li>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:auto}.enigma .top-nav>ul>li>ul>li>ul{box-shadow:0 3px 20px #00000014;left:100%;background-color:#f1f5f9;display:none;width:14rem;position:absolute;border-radius:.375rem;margin-top:0;margin-left:0;top:0;z-index:20;padding-left:0;padding-right:0}.enigma .top-nav>ul>li>ul>li>ul:before{content:"";display:block;position:absolute;width:100%;height:100%;background-color:#ffffff0a;top:0;left:0;right:0;bottom:0;border-radius:.375rem;z-index:-1}.enigma .top-nav>ul>li>ul>li>ul:after{content:"";width:100%;height:.25rem;position:absolute;top:0;left:0;margin-top:-.25rem;cursor:pointer}.enigma .top-nav>ul>li>ul>li>ul>li{padding-left:1.25rem;padding-right:1.25rem}.enigma .top-nav>ul>li>ul>li>ul>li>.top-menu{padding-left:0;padding-right:0;margin-right:0}.enigma .top-nav>ul>li>ul>li>ul>li>.top-menu .top-menu__title{width:100%}.enigma .top-nav>ul>li>ul>li>ul>li>.top-menu .top-menu__title .top-menu__sub-icon{margin-left:auto}@keyframes active-top-menu-chevron{to{opacity:1;margin-bottom:-56px}}@keyframes intro-top-menu{to{opacity:1;transform:translateY(0)}}@keyframes intro-menu-animation{to{opacity:1;transform:translateY(0)}}.dark .enigma .top-nav .top-menu .top-menu__icon,.dark .enigma .top-nav .top-menu .top-menu__title{color:#94a3b8}.dark .enigma .top-nav>ul>li:hover>.top-menu:not(.top-menu--active){background-color:transparent}.dark .enigma .top-nav>ul>li:hover>.top-menu:not(.top-menu--active):before{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .enigma .top-nav>ul>li>.top-menu.top-menu--active{background-color:rgb(var(--color-darkmode-700) / 1)}.dark .enigma .top-nav>ul>li>.top-menu.top-menu--active:before{border-color:#00000014;background-color:rgb(var(--color-darkmode-700) / 1)}.dark .enigma .top-nav>ul>li>.top-menu.top-menu--active:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E")}.dark .enigma .top-nav>ul>li>.top-menu.top-menu--active .top-menu__icon{color:#fff}.dark .enigma .top-nav>ul>li>.top-menu.top-menu--active .top-menu__title{color:#fff}.dark .enigma .top-nav>ul>li>ul{box-shadow:0 3px 7px #0000001c;background-color:rgb(var(--color-darkmode-600) / 1)}.dark .enigma .top-nav>ul>li>ul:before{background-color:#0000001a}.dark .enigma .top-nav>ul>li>ul>li>ul{box-shadow:0 3px 7px #0000001c;background-color:rgb(var(--color-darkmode-600) / 1)}.dark .enigma .top-nav>ul>li>ul>li>ul:before{background-color:#0000001a}/*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * Copyright (C) 2018 Varun A P
+ */.toastify{padding:12px 20px;color:#fff;display:inline-block;box-shadow:0 3px 6px -1px #0000001f,0 10px 36px -4px #4d60e84d;background:linear-gradient(135deg,#73a5ff,#5477f5);position:fixed;opacity:0;transition:all .4s cubic-bezier(.215,.61,.355,1);border-radius:2px;cursor:pointer;text-decoration:none;max-width:calc(50% - 20px);z-index:2147483647}.toastify.on{opacity:1}.toast-close{background:transparent;border:0;color:#fff;cursor:pointer;font-family:inherit;font-size:1em;opacity:.4;padding:0 5px}.toastify-right{right:15px}.toastify-left{left:15px}.toastify-top{top:-150px}.toastify-bottom{bottom:-150px}.toastify-rounded{border-radius:25px}.toastify-avatar{width:1.5em;height:1.5em;margin:-7px 5px;border-radius:2px}.toastify-center{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content;max-width:-moz-fit-content}@media only screen and (max-width: 360px){.toastify-right,.toastify-left{margin-left:auto;margin-right:auto;left:0;right:0;max-width:-moz-fit-content;max-width:fit-content}}.toastify{background:none;box-shadow:none;padding:0;color:#334155;max-width:calc(100% - 30px)}@media (min-width: 768px){.toastify{max-width:none}}.toastify .toast-close{color:transparent;position:absolute;opacity:1;top:0;bottom:0;right:0;padding-right:.75rem;display:flex;align-items:center}.toastify .toast-close:before{content:"×";display:block;color:#64748b;font-size:1.875rem;margin-top:-.375rem;font-weight:300}@font-face{font-family:Roboto;font-style:italic;font-weight:100;font-display:swap;src:local("Roboto Thin Italic"),local("Roboto-ThinItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:italic;font-weight:100;font-display:swap;src:local("Roboto Thin Italic"),local("Roboto-ThinItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzQdL-vwnYh2eg.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:italic;font-weight:100;font-display:swap;src:local("Roboto Thin Italic"),local("Roboto-ThinItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzwdL-vwnYh2eg.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:italic;font-weight:100;font-display:swap;src:local("Roboto Thin Italic"),local("Roboto-ThinItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzMdL-vwnYh2eg.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:italic;font-weight:100;font-display:swap;src:local("Roboto Thin Italic"),local("Roboto-ThinItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz8dL-vwnYh2eg.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:italic;font-weight:100;font-display:swap;src:local("Roboto Thin Italic"),local("Roboto-ThinItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz4dL-vwnYh2eg.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:italic;font-weight:100;font-display:swap;src:local("Roboto Thin Italic"),local("Roboto-ThinItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzAdL-vwnYg.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc3CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc-CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc2CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc5CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc1CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc0CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:italic;font-weight:300;font-display:swap;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc6CsTYl4BO.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Italic"),local("Roboto-Italic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Italic"),local("Roboto-Italic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Italic"),local("Roboto-Italic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Italic"),local("Roboto-Italic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Italic"),local("Roboto-Italic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Italic"),local("Roboto-Italic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:local("Roboto Italic"),local("Roboto-Italic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:italic;font-weight:500;font-display:swap;src:local("Roboto Medium Italic"),local("Roboto-MediumItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc3CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:italic;font-weight:500;font-display:swap;src:local("Roboto Medium Italic"),local("Roboto-MediumItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc-CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:italic;font-weight:500;font-display:swap;src:local("Roboto Medium Italic"),local("Roboto-MediumItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc2CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:italic;font-weight:500;font-display:swap;src:local("Roboto Medium Italic"),local("Roboto-MediumItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc5CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:italic;font-weight:500;font-display:swap;src:local("Roboto Medium Italic"),local("Roboto-MediumItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc1CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:italic;font-weight:500;font-display:swap;src:local("Roboto Medium Italic"),local("Roboto-MediumItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc0CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:italic;font-weight:500;font-display:swap;src:local("Roboto Medium Italic"),local("Roboto-MediumItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc6CsTYl4BO.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:swap;src:local("Roboto Bold Italic"),local("Roboto-BoldItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:swap;src:local("Roboto Bold Italic"),local("Roboto-BoldItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:swap;src:local("Roboto Bold Italic"),local("Roboto-BoldItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:swap;src:local("Roboto Bold Italic"),local("Roboto-BoldItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:swap;src:local("Roboto Bold Italic"),local("Roboto-BoldItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:swap;src:local("Roboto Bold Italic"),local("Roboto-BoldItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:swap;src:local("Roboto Bold Italic"),local("Roboto-BoldItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:italic;font-weight:900;font-display:swap;src:local("Roboto Black Italic"),local("Roboto-BlackItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc3CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:italic;font-weight:900;font-display:swap;src:local("Roboto Black Italic"),local("Roboto-BlackItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc-CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:italic;font-weight:900;font-display:swap;src:local("Roboto Black Italic"),local("Roboto-BlackItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc2CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:italic;font-weight:900;font-display:swap;src:local("Roboto Black Italic"),local("Roboto-BlackItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc5CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:italic;font-weight:900;font-display:swap;src:local("Roboto Black Italic"),local("Roboto-BlackItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc1CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:italic;font-weight:900;font-display:swap;src:local("Roboto Black Italic"),local("Roboto-BlackItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc0CsTYl4BOQ3o.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:italic;font-weight:900;font-display:swap;src:local("Roboto Black Italic"),local("Roboto-BlackItalic"),url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc6CsTYl4BO.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:swap;src:local("Roboto Thin"),local("Roboto-Thin"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:swap;src:local("Roboto Thin"),local("Roboto-Thin"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:swap;src:local("Roboto Thin"),local("Roboto-Thin"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxEIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:swap;src:local("Roboto Thin"),local("Roboto-Thin"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxLIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:swap;src:local("Roboto Thin"),local("Roboto-Thin"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxHIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:swap;src:local("Roboto Thin"),local("Roboto-Thin"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:swap;src:local("Roboto Thin"),local("Roboto-Thin"),url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:local("Roboto Black"),local("Roboto-Black"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCRc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:local("Roboto Black"),local("Roboto-Black"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfABc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:local("Roboto Black"),local("Roboto-Black"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCBc4AMP6lbBP.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:local("Roboto Black"),local("Roboto-Black"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBxc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:local("Roboto Black"),local("Roboto-Black"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCxc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:local("Roboto Black"),local("Roboto-Black"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfChc4AMP6lbBP.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:local("Roboto Black"),local("Roboto-Black"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}html.dark body{color:#cbd5e1}html.dark body *,html.dark body :before,html.dark body :after{border-color:#ffffff0d}html body{letter-spacing:.025em;font-size:.875rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto;color:#475569;line-height:1.25rem}input[type=number].no-spinner::-webkit-outer-spin-button,input[type=number].no-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number].no-spinner{-moz-appearance:textfield}*>.intro-x:nth-child(1){z-index:49;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}*>.-intro-x:nth-child(1){z-index:49;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}*>.intro-y:nth-child(1){z-index:49;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}*>.-intro-y:nth-child(1){z-index:49;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.1s}*>.intro-x:nth-child(2){z-index:48;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}*>.-intro-x:nth-child(2){z-index:48;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}*>.intro-y:nth-child(2){z-index:48;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}*>.-intro-y:nth-child(2){z-index:48;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.2s}*>.intro-x:nth-child(3){z-index:47;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}*>.-intro-x:nth-child(3){z-index:47;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}*>.intro-y:nth-child(3){z-index:47;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}*>.-intro-y:nth-child(3){z-index:47;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(3 * .1s)}*>.intro-x:nth-child(4){z-index:46;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}*>.-intro-x:nth-child(4){z-index:46;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}*>.intro-y:nth-child(4){z-index:46;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}*>.-intro-y:nth-child(4){z-index:46;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.4s}*>.intro-x:nth-child(5){z-index:45;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}*>.-intro-x:nth-child(5){z-index:45;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}*>.intro-y:nth-child(5){z-index:45;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}*>.-intro-y:nth-child(5){z-index:45;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.5s}*>.intro-x:nth-child(6){z-index:44;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}*>.-intro-x:nth-child(6){z-index:44;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}*>.intro-y:nth-child(6){z-index:44;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}*>.-intro-y:nth-child(6){z-index:44;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(6 * .1s)}*>.intro-x:nth-child(7){z-index:43;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}*>.-intro-x:nth-child(7){z-index:43;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}*>.intro-y:nth-child(7){z-index:43;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}*>.-intro-y:nth-child(7){z-index:43;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(7 * .1s)}*>.intro-x:nth-child(8){z-index:42;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}*>.-intro-x:nth-child(8){z-index:42;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}*>.intro-y:nth-child(8){z-index:42;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}*>.-intro-y:nth-child(8){z-index:42;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.8s}*>.intro-x:nth-child(9){z-index:41;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}*>.-intro-x:nth-child(9){z-index:41;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}*>.intro-y:nth-child(9){z-index:41;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}*>.-intro-y:nth-child(9){z-index:41;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:.9s}*>.intro-x:nth-child(10){z-index:40;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}*>.-intro-x:nth-child(10){z-index:40;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}*>.intro-y:nth-child(10){z-index:40;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}*>.-intro-y:nth-child(10){z-index:40;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1s}*>.intro-x:nth-child(11){z-index:39;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}*>.-intro-x:nth-child(11){z-index:39;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}*>.intro-y:nth-child(11){z-index:39;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}*>.-intro-y:nth-child(11){z-index:39;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.1s}*>.intro-x:nth-child(12){z-index:38;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}*>.-intro-x:nth-child(12){z-index:38;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}*>.intro-y:nth-child(12){z-index:38;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}*>.-intro-y:nth-child(12){z-index:38;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(12 * .1s)}*>.intro-x:nth-child(13){z-index:37;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}*>.-intro-x:nth-child(13){z-index:37;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}*>.intro-y:nth-child(13){z-index:37;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}*>.-intro-y:nth-child(13){z-index:37;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.3s}*>.intro-x:nth-child(14){z-index:36;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}*>.-intro-x:nth-child(14){z-index:36;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}*>.intro-y:nth-child(14){z-index:36;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}*>.-intro-y:nth-child(14){z-index:36;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(14 * .1s)}*>.intro-x:nth-child(15){z-index:35;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}*>.-intro-x:nth-child(15){z-index:35;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}*>.intro-y:nth-child(15){z-index:35;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}*>.-intro-y:nth-child(15){z-index:35;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.5s}*>.intro-x:nth-child(16){z-index:34;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}*>.-intro-x:nth-child(16){z-index:34;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}*>.intro-y:nth-child(16){z-index:34;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}*>.-intro-y:nth-child(16){z-index:34;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.6s}*>.intro-x:nth-child(17){z-index:33;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}*>.-intro-x:nth-child(17){z-index:33;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}*>.intro-y:nth-child(17){z-index:33;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}*>.-intro-y:nth-child(17){z-index:33;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(17 * .1s)}*>.intro-x:nth-child(18){z-index:32;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}*>.-intro-x:nth-child(18){z-index:32;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}*>.intro-y:nth-child(18){z-index:32;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}*>.-intro-y:nth-child(18){z-index:32;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:1.8s}*>.intro-x:nth-child(19){z-index:31;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}*>.-intro-x:nth-child(19){z-index:31;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}*>.intro-y:nth-child(19){z-index:31;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}*>.-intro-y:nth-child(19){z-index:31;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(19 * .1s)}*>.intro-x:nth-child(20){z-index:30;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}*>.-intro-x:nth-child(20){z-index:30;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}*>.intro-y:nth-child(20){z-index:30;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}*>.-intro-y:nth-child(20){z-index:30;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2s}*>.intro-x:nth-child(21){z-index:29;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}*>.-intro-x:nth-child(21){z-index:29;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}*>.intro-y:nth-child(21){z-index:29;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}*>.-intro-y:nth-child(21){z-index:29;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.1s}*>.intro-x:nth-child(22){z-index:28;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}*>.-intro-x:nth-child(22){z-index:28;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}*>.intro-y:nth-child(22){z-index:28;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}*>.-intro-y:nth-child(22){z-index:28;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.2s}*>.intro-x:nth-child(23){z-index:27;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}*>.-intro-x:nth-child(23){z-index:27;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}*>.intro-y:nth-child(23){z-index:27;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}*>.-intro-y:nth-child(23){z-index:27;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(23 * .1s)}*>.intro-x:nth-child(24){z-index:26;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}*>.-intro-x:nth-child(24){z-index:26;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}*>.intro-y:nth-child(24){z-index:26;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}*>.-intro-y:nth-child(24){z-index:26;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(24 * .1s)}*>.intro-x:nth-child(25){z-index:25;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}*>.-intro-x:nth-child(25){z-index:25;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}*>.intro-y:nth-child(25){z-index:25;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}*>.-intro-y:nth-child(25){z-index:25;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.5s}*>.intro-x:nth-child(26){z-index:24;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}*>.-intro-x:nth-child(26){z-index:24;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}*>.intro-y:nth-child(26){z-index:24;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}*>.-intro-y:nth-child(26){z-index:24;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.6s}*>.intro-x:nth-child(27){z-index:23;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}*>.-intro-x:nth-child(27){z-index:23;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}*>.intro-y:nth-child(27){z-index:23;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}*>.-intro-y:nth-child(27){z-index:23;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:2.7s}*>.intro-x:nth-child(28){z-index:22;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}*>.-intro-x:nth-child(28){z-index:22;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}*>.intro-y:nth-child(28){z-index:22;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}*>.-intro-y:nth-child(28){z-index:22;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(28 * .1s)}*>.intro-x:nth-child(29){z-index:21;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}*>.-intro-x:nth-child(29){z-index:21;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}*>.intro-y:nth-child(29){z-index:21;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}*>.-intro-y:nth-child(29){z-index:21;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(29 * .1s)}*>.intro-x:nth-child(30){z-index:20;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}*>.-intro-x:nth-child(30){z-index:20;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}*>.intro-y:nth-child(30){z-index:20;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}*>.-intro-y:nth-child(30){z-index:20;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3s}*>.intro-x:nth-child(31){z-index:19;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}*>.-intro-x:nth-child(31){z-index:19;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}*>.intro-y:nth-child(31){z-index:19;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}*>.-intro-y:nth-child(31){z-index:19;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.1s}*>.intro-x:nth-child(32){z-index:18;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}*>.-intro-x:nth-child(32){z-index:18;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}*>.intro-y:nth-child(32){z-index:18;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}*>.-intro-y:nth-child(32){z-index:18;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.2s}*>.intro-x:nth-child(33){z-index:17;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}*>.-intro-x:nth-child(33){z-index:17;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}*>.intro-y:nth-child(33){z-index:17;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}*>.-intro-y:nth-child(33){z-index:17;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(33 * .1s)}*>.intro-x:nth-child(34){z-index:16;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}*>.-intro-x:nth-child(34){z-index:16;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}*>.intro-y:nth-child(34){z-index:16;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}*>.-intro-y:nth-child(34){z-index:16;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(34 * .1s)}*>.intro-x:nth-child(35){z-index:15;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}*>.-intro-x:nth-child(35){z-index:15;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}*>.intro-y:nth-child(35){z-index:15;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}*>.-intro-y:nth-child(35){z-index:15;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.5s}*>.intro-x:nth-child(36){z-index:14;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}*>.-intro-x:nth-child(36){z-index:14;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}*>.intro-y:nth-child(36){z-index:14;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}*>.-intro-y:nth-child(36){z-index:14;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.6s}*>.intro-x:nth-child(37){z-index:13;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}*>.-intro-x:nth-child(37){z-index:13;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}*>.intro-y:nth-child(37){z-index:13;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}*>.-intro-y:nth-child(37){z-index:13;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:3.7s}*>.intro-x:nth-child(38){z-index:12;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}*>.-intro-x:nth-child(38){z-index:12;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}*>.intro-y:nth-child(38){z-index:12;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}*>.-intro-y:nth-child(38){z-index:12;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(38 * .1s)}*>.intro-x:nth-child(39){z-index:11;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}*>.-intro-x:nth-child(39){z-index:11;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}*>.intro-y:nth-child(39){z-index:11;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}*>.-intro-y:nth-child(39){z-index:11;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(39 * .1s)}*>.intro-x:nth-child(40){z-index:10;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}*>.-intro-x:nth-child(40){z-index:10;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}*>.intro-y:nth-child(40){z-index:10;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}*>.-intro-y:nth-child(40){z-index:10;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4s}*>.intro-x:nth-child(41){z-index:9;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}*>.-intro-x:nth-child(41){z-index:9;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}*>.intro-y:nth-child(41){z-index:9;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}*>.-intro-y:nth-child(41){z-index:9;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(41 * .1s)}*>.intro-x:nth-child(42){z-index:8;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}*>.-intro-x:nth-child(42){z-index:8;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}*>.intro-y:nth-child(42){z-index:8;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}*>.-intro-y:nth-child(42){z-index:8;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.2s}*>.intro-x:nth-child(43){z-index:7;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}*>.-intro-x:nth-child(43){z-index:7;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}*>.intro-y:nth-child(43){z-index:7;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}*>.-intro-y:nth-child(43){z-index:7;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.3s}*>.intro-x:nth-child(44){z-index:6;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}*>.-intro-x:nth-child(44){z-index:6;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}*>.intro-y:nth-child(44){z-index:6;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}*>.-intro-y:nth-child(44){z-index:6;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.4s}*>.intro-x:nth-child(45){z-index:5;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}*>.-intro-x:nth-child(45){z-index:5;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}*>.intro-y:nth-child(45){z-index:5;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}*>.-intro-y:nth-child(45){z-index:5;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.5s}*>.intro-x:nth-child(46){z-index:4;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}*>.-intro-x:nth-child(46){z-index:4;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}*>.intro-y:nth-child(46){z-index:4;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}*>.-intro-y:nth-child(46){z-index:4;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(46 * .1s)}*>.intro-x:nth-child(47){z-index:3;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}*>.-intro-x:nth-child(47){z-index:3;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}*>.intro-y:nth-child(47){z-index:3;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}*>.-intro-y:nth-child(47){z-index:3;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.7s}*>.intro-x:nth-child(48){z-index:2;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}*>.-intro-x:nth-child(48){z-index:2;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}*>.intro-y:nth-child(48){z-index:2;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}*>.-intro-y:nth-child(48){z-index:2;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:calc(48 * .1s)}*>.intro-x:nth-child(49){z-index:1;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}*>.-intro-x:nth-child(49){z-index:1;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}*>.intro-y:nth-child(49){z-index:1;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}*>.-intro-y:nth-child(49){z-index:1;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:4.9s}*>.intro-x:nth-child(50){z-index:0;opacity:0;position:relative;transform:translate(50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}*>.-intro-x:nth-child(50){z-index:0;opacity:0;position:relative;transform:translate(-50px);animation:.4s intro-x-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}*>.intro-y:nth-child(50){z-index:0;opacity:0;position:relative;transform:translateY(50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}*>.-intro-y:nth-child(50){z-index:0;opacity:0;position:relative;transform:translateY(-50px);animation:.4s intro-y-animation ease-in-out .33333s;animation-fill-mode:forwards;animation-delay:5s}@keyframes intro-x-animation{to{opacity:1;transform:translate(0)}}@keyframes intro-y-animation{to{opacity:1;transform:translateY(0)}}.loading-container{position:relative;z-index:0;padding:.5rem;border-radius:.5rem}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:150;background-position:center;background-repeat:no-repeat;opacity:.5}.spinner{position:absolute;top:25%;left:50%;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));z-index:151}.loading-overlay-gray{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.loading-line{width:100%;height:2px;background-color:#3498db;position:relative;overflow:hidden}.loading-line:after{content:"";display:block;position:absolute;width:100%;height:100%;background:linear-gradient(to right,#fff0,#fffc,#fff0);animation:loading-animation 1.5s linear infinite}@keyframes loading-animation{0%{left:-100%}to{left:100%}}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media (forced-colors: active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}:root{--color-theme-1: 30 64 175;--color-theme-2: 30 58 138;--color-primary: 30 58 138;--color-secondary: 226 232 240;--color-success: 132 204 22;--color-info: 6 182 212;--color-warning: 250 204 21;--color-pending: 249 115 22;--color-danger: 220 38 38;--color-light: 241 245 249;--color-dark: 30 41 59}.dark{--color-primary: 29 78 216;--color-darkmode-50: 87 103 132;--color-darkmode-100: 74 90 121;--color-darkmode-200: 65 81 114;--color-darkmode-300: 53 69 103;--color-darkmode-400: 48 61 93;--color-darkmode-500: 41 53 82;--color-darkmode-600: 40 51 78;--color-darkmode-700: 35 45 69;--color-darkmode-800: 27 37 59;--color-darkmode-900: 15 23 42}.theme-1{--color-theme-1: 6 95 70;--color-theme-2: 6 78 59;--color-primary: 6 78 59;--color-secondary: 226 232 240;--color-success: 5 150 105;--color-info: 6 182 212;--color-warning: 250 204 21;--color-pending: 245 158 11;--color-danger: 225 29 72;--color-light: 241 245 249;--color-dark: 30 41 59}.theme-1.dark{--color-primary: 6 95 70}.theme-2{--color-theme-1: 30 58 138;--color-theme-2: 23 37 84;--color-primary: 23 37 84;--color-secondary: 226 232 240;--color-success: 13 148 136;--color-info: 6 182 212;--color-warning: 245 158 11;--color-pending: 249 115 22;--color-danger: 185 28 28;--color-light: 241 245 249;--color-dark: 30 41 59}.theme-2.dark{--color-primary: 30 64 175}.theme-3{--color-theme-1: 21 94 117;--color-theme-2: 22 78 99;--color-primary: 22 78 99;--color-secondary: 226 232 240;--color-success: 13 148 136;--color-info: 6 182 212;--color-warning: 245 158 11;--color-pending: 217 119 6;--color-danger: 185 28 28;--color-light: 241 245 249;--color-dark: 30 41 59}.theme-3.dark{--color-primary: 21 94 117}.theme-4{--color-theme-1: 55 48 163;--color-theme-2: 49 46 129;--color-primary: 49 46 129;--color-secondary: 226 232 240;--color-success: 5 150 105;--color-info: 6 182 212;--color-warning: 234 179 8;--color-pending: 234 88 12;--color-danger: 185 28 28;--color-light: 241 245 249;--color-dark: 30 41 59}.theme-4.dark{--color-primary: 67 56 202}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.\!box{box-shadow:0 3px 5px #0000000b!important;background-color:#fff!important;border:1px solid #e2e8f0!important;border-radius:.6rem!important;position:relative!important}.box{box-shadow:0 3px 5px #0000000b;background-color:#fff;border:1px solid #e2e8f0;border-radius:.6rem;position:relative}.dark .box{background-color:rgb(var(--color-darkmode-600) / 1);border-color:rgb(var(--color-darkmode-500) / 1)}.dark .\!box{background-color:rgb(var(--color-darkmode-600) / 1)!important;border-color:rgb(var(--color-darkmode-500) / 1)!important}.dark .box--stacked:before{background-color:rgb(var(--color-darkmode-600) / 70%);border-color:#64748b99}.image-fit{position:relative}.image-fit>img{position:absolute;-o-object-fit:cover;object-fit:cover;top:0;width:100%;height:100%}@keyframes type-animation{50%{opacity:1}}.zoom-in{transition-property:transform,box-shadow;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);cursor:pointer}.zoom-in:hover{transform:scale(1.05);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.bottom-0{bottom:0}.bottom-\[100\%\]{bottom:100%}.left-0{left:0}.left-2{left:.5rem}.left-3{left:.75rem}.left-\[100\%\]{left:100%}.left-\[50\%\]{left:50%}.right-0{right:0}.right-\[100\%\]{right:100%}.right-auto{right:auto}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:.5rem}.top-\[100\%\]{top:100%}.top-\[50\%\]{top:50%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-\[51\]{z-index:51}.z-\[60\]{z-index:60}.col-span-1{grid-column:span 1 / span 1}.col-span-11{grid-column:span 11 / span 11}.col-span-12{grid-column:span 12 / span 12}.col-span-5{grid-column:span 5 / span 5}.col-span-7{grid-column:span 7 / span 7}.-m-3{margin:-.75rem}.m-auto{margin:auto}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-3{margin-left:-.75rem;margin-right:-.75rem}.-mx-5{margin-left:-1.25rem;margin-right:-1.25rem}.-my-4{margin-top:-1rem;margin-bottom:-1rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-auto{margin-top:auto;margin-bottom:auto}.-mb-px{margin-bottom:-1px}.-ml-\[100\%\]{margin-left:-100%}.-ml-\[60px\]{margin-left:-60px}.-mr-\[100\%\]{margin-right:-100%}.-mt-16{margin-top:-4rem}.-mt-2{margin-top:-.5rem}.-mt-4{margin-top:-1rem}.-mt-\[3px\]{margin-top:-3px}.-mt-\[7px\]{margin-top:-7px}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-0{margin-left:0}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-12{margin-left:3rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-5{margin-left:1.25rem}.ml-auto{margin-left:auto}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-20{margin-right:5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mr-5{margin-right:1.25rem}.mr-auto{margin-right:auto}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.mt-\[2\.2rem\]{margin-top:2.2rem}.mt-\[3px\]{margin-top:3px}.mt-\[4\.7rem\]{margin-top:4.7rem}.mt-px{margin-top:1px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-auto{aspect-ratio:auto}.aspect-square{aspect-ratio:1 / 1}.aspect-video{aspect-ratio:16 / 9}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-96{height:24rem}.h-\[200\%\]{height:200%}.h-\[24px\]{height:24px}.h-\[28px\]{height:28px}.h-\[50px\]{height:50px}.h-\[58px\]{height:58px}.h-\[67px\]{height:67px}.h-\[70px\]{height:70px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-0{max-height:0px}.max-h-60{max-height:15rem}.max-h-80{max-height:20rem}.max-h-\[2000px\]{max-height:2000px}.max-h-\[80vh\]{max-height:80vh}.min-h-\[150px\]{min-height:150px}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\[100px\]{width:100px}.w-\[15\%\]{width:15%}.w-\[270px\]{width:270px}.w-\[28px\]{width:28px}.w-\[38px\]{width:38px}.w-\[450px\]{width:450px}.w-\[80px\]{width:80px}.w-\[90\%\]{width:90%}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0px}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.translate-x-\[-50\%\]{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-\[50px\]{--tw-translate-x: 50px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-1{--tw-translate-y: .25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[35px\]{--tw-translate-y: 35px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[50px\]{--tw-translate-y: 50px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-12{--tw-rotate: 12deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-105{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[0\.4s_ease-in-out_0\.1s_intro-divider\]{animation:.4s ease-in-out .1s intro-divider}.animate-\[0\.4s_ease-in-out_0\.1s_intro-menu\]{animation:.4s ease-in-out .1s intro-menu}.animate-\[0\.4s_ease-in-out_0\.2s_intro-top-menu\]{animation:.4s ease-in-out .2s intro-top-menu}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.cursor-zoom-in{cursor:zoom-in}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-end{justify-items:end}.gap-0{gap:0px}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-3\.5{row-gap:.875rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[1\.3rem\]{border-radius:1.3rem}.rounded-\[30px\]{border-radius:30px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[\#0077b5\]{--tw-border-opacity: 1;border-color:rgb(0 119 181 / var(--tw-border-opacity))}.border-\[\#3b5998\]{--tw-border-opacity: 1;border-color:rgb(59 89 152 / var(--tw-border-opacity))}.border-\[\#4ab3f4\]{--tw-border-opacity: 1;border-color:rgb(74 179 244 / var(--tw-border-opacity))}.border-\[\#517fa4\]{--tw-border-opacity: 1;border-color:rgb(81 127 164 / var(--tw-border-opacity))}.border-danger{--tw-border-opacity: 1;border-color:rgb(var(--color-danger) / var(--tw-border-opacity))}.border-dark{--tw-border-opacity: 1;border-color:rgb(var(--color-dark) / var(--tw-border-opacity))}.border-pending{--tw-border-opacity: 1;border-color:rgb(var(--color-pending) / var(--tw-border-opacity))}.border-primary{--tw-border-opacity: 1;border-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.border-secondary{--tw-border-opacity: 1;border-color:rgb(var(--color-secondary) / var(--tw-border-opacity))}.border-secondary\/70{border-color:rgb(var(--color-secondary) / .7)}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity))}.border-slate-200\/60{border-color:#e2e8f099}.border-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.border-slate-300\/80{border-color:#cbd5e1cc}.border-slate-500{--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity))}.border-slate-600{--tw-border-opacity: 1;border-color:rgb(71 85 105 / var(--tw-border-opacity))}.border-success{--tw-border-opacity: 1;border-color:rgb(var(--color-success) / var(--tw-border-opacity))}.border-theme-1\/60{border-color:rgb(var(--color-theme-1) / .6)}.border-transparent{border-color:transparent}.border-warning{--tw-border-opacity: 1;border-color:rgb(var(--color-warning) / var(--tw-border-opacity))}.border-white\/90{border-color:#ffffffe6}.border-white\/\[0\.08\]{border-color:#ffffff14}.border-b-primary{--tw-border-opacity: 1;border-bottom-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.border-b-transparent{border-bottom-color:transparent}.border-opacity-5{--tw-border-opacity: .05}.bg-\[\#0077b5\]{--tw-bg-opacity: 1;background-color:rgb(0 119 181 / var(--tw-bg-opacity))}.bg-\[\#3b5998\]{--tw-bg-opacity: 1;background-color:rgb(59 89 152 / var(--tw-bg-opacity))}.bg-\[\#4ab3f4\]{--tw-bg-opacity: 1;background-color:rgb(74 179 244 / var(--tw-bg-opacity))}.bg-\[\#517fa4\]{--tw-bg-opacity: 1;background-color:rgb(81 127 164 / var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-black\/50{background-color:#00000080}.bg-black\/60{background-color:#0009}.bg-danger{--tw-bg-opacity: 1;background-color:rgb(var(--color-danger) / var(--tw-bg-opacity))}.bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-pending{--tw-bg-opacity: 1;background-color:rgb(var(--color-pending) / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.bg-primary\/80{background-color:rgb(var(--color-primary) / .8)}.bg-secondary\/70{background-color:rgb(var(--color-secondary) / .7)}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.bg-slate-100\/80{background-color:#f1f5f9cc}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.bg-slate-200\/60{background-color:#e2e8f099}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity: 1;background-color:rgb(var(--color-success) / var(--tw-bg-opacity))}.bg-theme-1{--tw-bg-opacity: 1;background-color:rgb(var(--color-theme-1) / var(--tw-bg-opacity))}.bg-theme-1\/90{background-color:rgb(var(--color-theme-1) / .9)}.bg-theme-2{--tw-bg-opacity: 1;background-color:rgb(var(--color-theme-2) / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-warning{--tw-bg-opacity: 1;background-color:rgb(var(--color-warning) / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-white\/5{background-color:#ffffff0d}.bg-white\/\[0\.08\]{background-color:#ffffff14}.bg-opacity-10{--tw-bg-opacity: .1}.bg-opacity-20{--tw-bg-opacity: .2}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-theme-1{--tw-gradient-from: rgb(var(--color-theme-1) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-theme-1) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-theme-2{--tw-gradient-to: rgb(var(--color-theme-2) / 1) var(--tw-gradient-to-position)}.bg-contain{background-size:contain}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.stroke-1{stroke-width:1}.stroke-1\.5{stroke-width:1.5}.stroke-\[1\]{stroke-width:1}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-px{padding:1px}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-\[3px\]{padding-top:3px;padding-bottom:3px}.pb-1{padding-bottom:.25rem}.pb-10{padding-bottom:2.5rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pl-0{padding-left:0}.pl-0\.5{padding-left:.125rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pr-1{padding-right:.25rem}.pr-10{padding-right:2.5rem}.pr-14{padding-right:3.5rem}.pr-16{padding-right:4rem}.pr-3{padding-right:.75rem}.pr-5{padding-right:1.25rem}.pr-8{padding-right:2rem}.pt-3{padding-top:.75rem}.pt-32{padding-top:8rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-8{line-height:2rem}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-danger{--tw-text-opacity: 1;color:rgb(var(--color-danger) / var(--tw-text-opacity))}.text-dark{--tw-text-opacity: 1;color:rgb(var(--color-dark) / var(--tw-text-opacity))}.text-pending{--tw-text-opacity: 1;color:rgb(var(--color-pending) / var(--tw-text-opacity))}.text-primary{--tw-text-opacity: 1;color:rgb(var(--color-primary) / var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.text-success{--tw-text-opacity: 1;color:rgb(var(--color-success) / var(--tw-text-opacity))}.text-warning{--tw-text-opacity: 1;color:rgb(var(--color-warning) / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-white\/70{color:#ffffffb3}.text-white\/90{color:#ffffffe6}.text-opacity-70{--tw-text-opacity: .7}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[0px_3px_10px_\#00000017\]{--tw-shadow: 0px 3px 10px #00000017;--tw-shadow-colored: 0px 3px 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0px_3px_20px_\#0000000b\]{--tw-shadow: 0px 3px 20px #0000000b;--tw-shadow-colored: 0px 3px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline-danger{outline-color:rgb(var(--color-danger) / 1)}.outline-dark{outline-color:rgb(var(--color-dark) / 1)}.outline-pending{outline-color:rgb(var(--color-pending) / 1)}.outline-primary{outline-color:rgb(var(--color-primary) / 1)}.outline-secondary{outline-color:rgb(var(--color-secondary) / 1)}.outline-success{outline-color:rgb(var(--color-success) / 1)}.outline-warning{outline-color:rgb(var(--color-warning) / 1)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-\[400ms\]{transition-duration:.4s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}.before\:box:before{content:var(--tw-content);box-shadow:0 3px 5px #0000000b;background-color:#fff;border:1px solid #e2e8f0;border-radius:.6rem;position:relative}.dark .before\:box:before{content:var(--tw-content);background-color:rgb(var(--color-darkmode-600) / 1);border-color:rgb(var(--color-darkmode-500) / 1)}.placeholder\:text-slate-400\/90::-moz-placeholder{color:#94a3b8e6}.placeholder\:text-slate-400\/90::placeholder{color:#94a3b8e6}.before\:invisible:before{content:var(--tw-content);visibility:hidden}.before\:fixed:before{content:var(--tw-content);position:fixed}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-0:before{content:var(--tw-content);top:0;right:0;bottom:0;left:0}.before\:inset-x-0:before{content:var(--tw-content);left:0;right:0}.before\:inset-x-3:before{content:var(--tw-content);left:.75rem;right:.75rem}.before\:inset-y-0:before{content:var(--tw-content);top:0;bottom:0}.before\:left-0:before{content:var(--tw-content);left:0}.before\:top-0:before{content:var(--tw-content);top:0}.before\:z-10:before{content:var(--tw-content);z-index:10}.before\:z-\[-1\]:before{content:var(--tw-content);z-index:-1}.before\:mx-7:before{content:var(--tw-content);margin-left:1.75rem;margin-right:1.75rem}.before\:mx-auto:before{content:var(--tw-content);margin-left:auto;margin-right:auto}.before\:my-auto:before{content:var(--tw-content);margin-top:auto;margin-bottom:auto}.before\:-mb-\[16\%\]:before{content:var(--tw-content);margin-bottom:-16%}.before\:-ml-\[1\.125rem\]:before{content:var(--tw-content);margin-left:-1.125rem}.before\:-ml-\[13\%\]:before{content:var(--tw-content);margin-left:-13%}.before\:-mt-4:before{content:var(--tw-content);margin-top:-1rem}.before\:-mt-\[28\%\]:before{content:var(--tw-content);margin-top:-28%}.before\:mt-3:before{content:var(--tw-content);margin-top:.75rem}.before\:block:before{content:var(--tw-content);display:block}.before\:hidden:before{content:var(--tw-content);display:none}.before\:h-\[14px\]:before{content:var(--tw-content);height:14px}.before\:h-\[20px\]:before{content:var(--tw-content);height:20px}.before\:h-\[65px\]:before{content:var(--tw-content);height:65px}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:h-px:before{content:var(--tw-content);height:1px}.before\:h-screen:before{content:var(--tw-content);height:100vh}.before\:w-\[14px\]:before{content:var(--tw-content);width:14px}.before\:w-\[20px\]:before{content:var(--tw-content);width:20px}.before\:w-\[57\%\]:before{content:var(--tw-content);width:57%}.before\:w-\[95\%\]:before{content:var(--tw-content);width:95%}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:translate-y-\[35px\]:before{content:var(--tw-content);--tw-translate-y: 35px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:rotate-\[-4\.5deg\]:before{content:var(--tw-content);--tw-rotate: -4.5deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:rotate-\[-90deg\]:before{content:var(--tw-content);--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:transform:before{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:rounded-\[1\.3rem\]:before{content:var(--tw-content);border-radius:1.3rem}.before\:rounded-\[100\%\]:before{content:var(--tw-content);border-radius:100%}.before\:rounded-full:before{content:var(--tw-content);border-radius:9999px}.before\:rounded-md:before{content:var(--tw-content);border-radius:.375rem}.before\:rounded-xl:before{content:var(--tw-content);border-radius:.75rem}.before\:bg-black:before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.before\:bg-black\/90:before{content:var(--tw-content);background-color:#000000e6}.before\:bg-black\/\[0\.15\]:before{content:var(--tw-content);background-color:#00000026}.before\:bg-primary\/20:before{content:var(--tw-content);background-color:rgb(var(--color-primary) / .2)}.before\:bg-primary\/30:before{content:var(--tw-content);background-color:rgb(var(--color-primary) / .3)}.before\:bg-slate-50:before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.before\:bg-transparent:before{content:var(--tw-content);background-color:transparent}.before\:bg-white\/10:before{content:var(--tw-content);background-color:#ffffff1a}.before\:bg-chevron-black:before{content:var(--tw-content);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300000095' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.before\:bg-chevron-white:before{content:var(--tw-content);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff95' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.before\:bg-gradient-to-b:before{content:var(--tw-content);background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.before\:from-theme-1:before{content:var(--tw-content);--tw-gradient-from: rgb(var(--color-theme-1) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-theme-1) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.before\:to-theme-2:before{content:var(--tw-content);--tw-gradient-to: rgb(var(--color-theme-2) / 1) var(--tw-gradient-to-position)}.before\:bg-\[length\:100\%\]:before{content:var(--tw-content);background-size:100%}.before\:pt-\[100\%\]:before{content:var(--tw-content);padding-top:100%}.before\:opacity-0:before{content:var(--tw-content);opacity:0}.before\:shadow-\[1px_1px_3px_rgba\(0\,0\,0\,0\.25\)\]:before{content:var(--tw-content);--tw-shadow: 1px 1px 3px rgba(0,0,0,.25);--tw-shadow-colored: 1px 1px 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.before\:transition-\[margin-left\]:before{content:var(--tw-content);transition-property:margin-left;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:transition-opacity:before{content:var(--tw-content);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:duration-200:before{content:var(--tw-content);transition-duration:.2s}.before\:ease-in-out:before{content:var(--tw-content);transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\:content-\[\'\'\]:before{--tw-content: "";content:var(--tw-content)}.before\:content-\[\\\'\\\'\]:before{--tw-content: \'\';content:var(--tw-content)}.after\:fixed:after{content:var(--tw-content);position:fixed}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-0:after{content:var(--tw-content);top:0;right:0;bottom:0;left:0}.after\:inset-y-0:after{content:var(--tw-content);top:0;bottom:0}.after\:left-0:after{content:var(--tw-content);left:0}.after\:right-0:after{content:var(--tw-content);right:0}.after\:z-\[-1\]:after{content:var(--tw-content);z-index:-1}.after\:z-\[-2\]:after{content:var(--tw-content);z-index:-2}.after\:mx-3:after{content:var(--tw-content);margin-left:.75rem;margin-right:.75rem}.after\:mx-auto:after{content:var(--tw-content);margin-left:auto;margin-right:auto}.after\:-mb-\[13\%\]:after{content:var(--tw-content);margin-bottom:-13%}.after\:-ml-4:after{content:var(--tw-content);margin-left:-1rem}.after\:-ml-\[13\%\]:after{content:var(--tw-content);margin-left:-13%}.after\:-mt-4:after{content:var(--tw-content);margin-top:-1rem}.after\:-mt-\[20\%\]:after{content:var(--tw-content);margin-top:-20%}.after\:mt-5:after{content:var(--tw-content);margin-top:1.25rem}.after\:mt-8:after{content:var(--tw-content);margin-top:2rem}.after\:hidden:after{content:var(--tw-content);display:none}.after\:h-\[65px\]:after{content:var(--tw-content);height:65px}.after\:w-\[57\%\]:after{content:var(--tw-content);width:57%}.after\:w-\[97\%\]:after{content:var(--tw-content);width:97%}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:rotate-\[-4\.5deg\]:after{content:var(--tw-content);--tw-rotate: -4.5deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\:transform:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\:rounded-\[100\%\]:after{content:var(--tw-content);border-radius:100%}.after\:rounded-\[40px_0px_0px_0px\]:after{content:var(--tw-content);border-radius:40px 0 0}.after\:rounded-\[40px_40px_0px_0px\]:after{content:var(--tw-content);border-radius:40px 40px 0 0}.after\:rounded-xl:after{content:var(--tw-content);border-radius:.75rem}.after\:bg-primary:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.after\:bg-white\/10:after{content:var(--tw-content);background-color:#ffffff1a}.after\:bg-gradient-to-b:after{content:var(--tw-content);background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.after\:from-theme-1:after{content:var(--tw-content);--tw-gradient-from: rgb(var(--color-theme-1) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-theme-1) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.after\:to-theme-2:after{content:var(--tw-content);--tw-gradient-to: rgb(var(--color-theme-2) / 1) var(--tw-gradient-to-position)}.after\:shadow-md:after{content:var(--tw-content);--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.after\:content-\[\\\'\\\'\]:after{--tw-content: \'\';content:var(--tw-content)}.first\:-mt-4:first-child{margin-top:-1rem}.first\:mt-0:first-child{margin-top:0}.first\:rounded-l:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.last\:-mb-4:last-child{margin-bottom:-1rem}.last\:mb-0:last-child{margin-bottom:0}.last\:rounded-r:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.checked\:border-primary:checked{--tw-border-opacity: 1;border-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.checked\:bg-primary:checked{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.checked\:bg-none:checked{background-image:none}.before\:checked\:ml-\[14px\]:checked:before{content:var(--tw-content);margin-left:14px}.before\:checked\:bg-white:checked:before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\:rotate-180:hover{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.hover\:animate-bounce:hover{animation:bounce 1s infinite}@keyframes pulse{50%{opacity:.5}}.hover\:animate-pulse:hover{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.hover\:animate-spin:hover{animation:spin 1s linear infinite}.hover\:border-primary:hover{--tw-border-opacity: 1;border-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.hover\:border-slate-400:hover{--tw-border-opacity: 1;border-color:rgb(148 163 184 / var(--tw-border-opacity))}.hover\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.hover\:bg-slate-200:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.hover\:bg-slate-200\/60:hover{background-color:#e2e8f099}.hover\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.hover\:bg-white\/10:hover{background-color:#ffffff1a}.hover\:bg-white\/5:hover{background-color:#ffffff0d}.hover\:text-danger:hover{--tw-text-opacity: 1;color:rgb(var(--color-danger) / var(--tw-text-opacity))}.hover\:text-primary:hover{--tw-text-opacity: 1;color:rgb(var(--color-primary) / var(--tw-text-opacity))}.focus\:w-72:focus{width:18rem}.focus\:border-primary:focus{--tw-border-opacity: 1;border-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.focus\:border-transparent:focus{border-color:transparent}.focus\:border-opacity-40:focus{--tw-border-opacity: .4}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-4:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity))}.focus\:ring-opacity-20:focus{--tw-ring-opacity: .2}.focus\:ring-offset-0:focus{--tw-ring-offset-width: 0px}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-slate-100:disabled{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.disabled\:opacity-70:disabled{opacity:.7}.group:hover .group-hover\:opacity-100{opacity:1}.group.mobile-menu--active .group-\[\.mobile-menu--active\]\:visible{visibility:visible}.group.mobile-menu--active .group-\[\.mobile-menu--active\]\:ml-0{margin-left:0}.group.mobile-menu--active .group-\[\.mobile-menu--active\]\:opacity-100{opacity:1}.dark\:border-\[\#0077b5\]:is(.dark *){--tw-border-opacity: 1;border-color:rgb(0 119 181 / var(--tw-border-opacity))}.dark\:border-\[\#3b5998\]:is(.dark *){--tw-border-opacity: 1;border-color:rgb(59 89 152 / var(--tw-border-opacity))}.dark\:border-\[\#4ab3f4\]:is(.dark *){--tw-border-opacity: 1;border-color:rgb(74 179 244 / var(--tw-border-opacity))}.dark\:border-\[\#517fa4\]:is(.dark *){--tw-border-opacity: 1;border-color:rgb(81 127 164 / var(--tw-border-opacity))}.dark\:border-danger:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-danger) / var(--tw-border-opacity))}.dark\:border-darkmode-100\/30:is(.dark *){border-color:rgb(var(--color-darkmode-100) / .3)}.dark\:border-darkmode-100\/40:is(.dark *){border-color:rgb(var(--color-darkmode-100) / .4)}.dark\:border-darkmode-300:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-darkmode-300) / var(--tw-border-opacity))}.dark\:border-darkmode-400:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-darkmode-400) / var(--tw-border-opacity))}.dark\:border-darkmode-600:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-darkmode-600) / var(--tw-border-opacity))}.dark\:border-darkmode-800:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-darkmode-800) / var(--tw-border-opacity))}.dark\:border-darkmode-800\/60:is(.dark *){border-color:rgb(var(--color-darkmode-800) / .6)}.dark\:border-darkmode-900\/20:is(.dark *){border-color:rgb(var(--color-darkmode-900) / .2)}.dark\:border-pending:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-pending) / var(--tw-border-opacity))}.dark\:border-primary:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.dark\:border-slate-600:is(.dark *){--tw-border-opacity: 1;border-color:rgb(71 85 105 / var(--tw-border-opacity))}.dark\:border-success:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-success) / var(--tw-border-opacity))}.dark\:border-transparent:is(.dark *){border-color:transparent}.dark\:border-warning:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--color-warning) / var(--tw-border-opacity))}.dark\:border-x-darkmode-400:is(.dark *){--tw-border-opacity: 1;border-left-color:rgb(var(--color-darkmode-400) / var(--tw-border-opacity));border-right-color:rgb(var(--color-darkmode-400) / var(--tw-border-opacity))}.dark\:border-b-darkmode-600:is(.dark *){--tw-border-opacity: 1;border-bottom-color:rgb(var(--color-darkmode-600) / var(--tw-border-opacity))}.dark\:border-b-primary:is(.dark *){--tw-border-opacity: 1;border-bottom-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.dark\:border-t-darkmode-400:is(.dark *){--tw-border-opacity: 1;border-top-color:rgb(var(--color-darkmode-400) / var(--tw-border-opacity))}.dark\:border-opacity-100:is(.dark *){--tw-border-opacity: 1}.dark\:border-opacity-20:is(.dark *){--tw-border-opacity: .2}.dark\:bg-black\/20:is(.dark *){background-color:#0003}.dark\:bg-black\/30:is(.dark *){background-color:#0000004d}.dark\:bg-darkmode-100\/20:is(.dark *){background-color:rgb(var(--color-darkmode-100) / .2)}.dark\:bg-darkmode-300\/40:is(.dark *){background-color:rgb(var(--color-darkmode-300) / .4)}.dark\:bg-darkmode-400:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-400) / var(--tw-bg-opacity))}.dark\:bg-darkmode-600:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-600) / var(--tw-bg-opacity))}.dark\:bg-darkmode-600\/20:is(.dark *){background-color:rgb(var(--color-darkmode-600) / .2)}.dark\:bg-darkmode-700:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-700) / var(--tw-bg-opacity))}.dark\:bg-darkmode-800:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-800) / var(--tw-bg-opacity))}.dark\:bg-darkmode-800\/30:is(.dark *){background-color:rgb(var(--color-darkmode-800) / .3)}.dark\:bg-darkmode-800\/90:is(.dark *){background-color:rgb(var(--color-darkmode-800) / .9)}.dark\:bg-darkmode-900\/20:is(.dark *){background-color:rgb(var(--color-darkmode-900) / .2)}.dark\:bg-slate-200:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.dark\:bg-transparent:is(.dark *){background-color:transparent}.dark\:bg-opacity-20:is(.dark *){--tw-bg-opacity: .2}.dark\:from-darkmode-400:is(.dark *){--tw-gradient-from: rgb(var(--color-darkmode-400) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-darkmode-400) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.dark\:to-darkmode-400:is(.dark *){--tw-gradient-to: rgb(var(--color-darkmode-400) / 1) var(--tw-gradient-to-position)}.dark\:text-slate-200:is(.dark *){--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity))}.dark\:text-slate-300:is(.dark *){--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity))}.dark\:text-slate-400:is(.dark *){--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}.dark\:text-slate-500:is(.dark *){--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity))}.dark\:text-white:is(.dark *){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:placeholder\:text-slate-500\/80:is(.dark *)::-moz-placeholder{color:#64748bcc}.dark\:placeholder\:text-slate-500\/80:is(.dark *)::placeholder{color:#64748bcc}.before\:dark\:bg-darkmode-400:is(.dark *):before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-400) / var(--tw-bg-opacity))}.before\:dark\:bg-darkmode-400\/50:is(.dark *):before{content:var(--tw-content);background-color:rgb(var(--color-darkmode-400) / .5)}.before\:dark\:bg-darkmode-600:is(.dark *):before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-600) / var(--tw-bg-opacity))}.before\:dark\:bg-darkmode-600\/30:is(.dark *):before{content:var(--tw-content);background-color:rgb(var(--color-darkmode-600) / .3)}.dark\:before\:bg-chevron-white:is(.dark *):before{content:var(--tw-content);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff95' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.dark\:before\:from-darkmode-800:is(.dark *):before{content:var(--tw-content);--tw-gradient-from: rgb(var(--color-darkmode-800) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-darkmode-800) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.dark\:before\:to-darkmode-800:is(.dark *):before{content:var(--tw-content);--tw-gradient-to: rgb(var(--color-darkmode-800) / 1) var(--tw-gradient-to-position)}.after\:dark\:bg-darkmode-400\/50:is(.dark *):after{content:var(--tw-content);background-color:rgb(var(--color-darkmode-400) / .5)}.after\:dark\:bg-darkmode-600:is(.dark *):after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-600) / var(--tw-bg-opacity))}.after\:dark\:bg-darkmode-700:is(.dark *):after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-700) / var(--tw-bg-opacity))}.dark\:after\:from-darkmode-800:is(.dark *):after{content:var(--tw-content);--tw-gradient-from: rgb(var(--color-darkmode-800) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-darkmode-800) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.dark\:after\:to-darkmode-800:is(.dark *):after{content:var(--tw-content);--tw-gradient-to: rgb(var(--color-darkmode-800) / 1) var(--tw-gradient-to-position)}.dark\:hover\:border-transparent:hover:is(.dark *){border-color:transparent}.dark\:hover\:bg-darkmode-300:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-300) / var(--tw-bg-opacity))}.dark\:hover\:bg-darkmode-400:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-400) / var(--tw-bg-opacity))}.dark\:hover\:bg-darkmode-600\/50:hover:is(.dark *){background-color:rgb(var(--color-darkmode-600) / .5)}.dark\:hover\:bg-darkmode-700:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-700) / var(--tw-bg-opacity))}.dark\:focus\:ring-slate-700:focus:is(.dark *){--tw-ring-opacity: 1;--tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity))}.dark\:focus\:ring-opacity-50:focus:is(.dark *){--tw-ring-opacity: .5}.dark\:disabled\:border-transparent:disabled:is(.dark *){border-color:transparent}.dark\:disabled\:bg-darkmode-800\/50:disabled:is(.dark *){background-color:rgb(var(--color-darkmode-800) / .5)}.disabled\:dark\:bg-darkmode-800\/50:is(.dark *):disabled{background-color:rgb(var(--color-darkmode-800) / .5)}@media (min-width: 640px){.sm\:col-span-1{grid-column:span 1 / span 1}.sm\:col-span-2{grid-column:span 2 / span 2}.sm\:col-span-4{grid-column:span 4 / span 4}.sm\:col-span-6{grid-column:span 6 / span 6}.sm\:col-span-8{grid-column:span 8 / span 8}.sm\:-mx-8{margin-left:-2rem;margin-right:-2rem}.sm\:-ml-\[105px\]{margin-left:-105px}.sm\:mb-0{margin-bottom:0}.sm\:mr-2{margin-right:.5rem}.sm\:mr-5{margin-right:1.25rem}.sm\:mr-6{margin-right:1.5rem}.sm\:mr-auto{margin-right:auto}.sm\:mt-0{margin-top:0}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:h-14{height:3.5rem}.sm\:h-8{height:2rem}.sm\:w-14{width:3.5rem}.sm\:w-3\/4{width:75%}.sm\:w-8{width:2rem}.sm\:w-\[300px\]{width:300px}.sm\:w-\[460px\]{width:460px}.sm\:w-\[600px\]{width:600px}.sm\:w-auto{width:auto}.sm\:min-w-\[40px\]{min-width:40px}.sm\:flex-initial{flex:0 1 auto}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-nowrap{flex-wrap:nowrap}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:px-3{padding-left:.75rem;padding-right:.75rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-3{padding-top:.75rem;padding-bottom:.75rem}.sm\:text-right{text-align:right}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width: 768px){.md\:fixed{position:fixed}.md\:inset-x-0{left:0;right:0}.md\:top-0{top:0}.md\:col-span-12{grid-column:span 12 / span 12}.md\:col-span-2{grid-column:span 2 / span 2}.md\:col-span-4{grid-column:span 4 / span 4}.md\:col-span-6{grid-column:span 6 / span 6}.md\:-mx-0{margin-left:-0px;margin-right:-0px}.md\:mx-0{margin-left:0;margin-right:0}.md\:-mt-5{margin-top:-1.25rem}.md\:-mt-\[67px\]{margin-top:-67px}.md\:mb-8{margin-bottom:2rem}.md\:ml-10{margin-left:2.5rem}.md\:ml-4{margin-left:1rem}.md\:mt-0{margin-top:0}.md\:mt-1{margin-top:.25rem}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-\[65px\]{height:65px}.md\:w-\[100px\]{width:100px}.md\:max-w-none{max-width:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:rounded-\[35px\/50px_0px_0px_0px\]{border-radius:35px/50px 0 0}.md\:rounded-\[35px_35px_0_0\],.md\:rounded-\[35px_35px_0px_0px\]{border-radius:35px 35px 0 0}.md\:rounded-none{border-radius:0}.md\:border-b-0{border-bottom-width:0px}.md\:border-l{border-left-width:1px}.md\:bg-black\/\[0\.15\]{background-color:#00000026}.md\:bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.md\:bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.md\:from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.md\:to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.md\:px-0{padding-left:0;padding-right:0}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-\[22px\]{padding-left:22px;padding-right:22px}.md\:py-0{padding-top:0;padding-bottom:0}.md\:pl-10{padding-left:2.5rem}.md\:pt-0{padding-top:0}.md\:pt-10{padding-top:2.5rem}.md\:pt-20{padding-top:5rem}.md\:pt-\[80px\]{padding-top:80px}.md\:text-right{text-align:right}.before\:md\:block:before{content:var(--tw-content);display:block}.md\:before\:bg-none:before{content:var(--tw-content);background-image:none}.after\:md\:block:after{content:var(--tw-content);display:block}.md\:after\:block:after{content:var(--tw-content);display:block}.md\:dark\:bg-darkmode-800:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-800) / var(--tw-bg-opacity))}.dark\:md\:from-darkmode-700:is(.dark *){--tw-gradient-from: rgb(var(--color-darkmode-700) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-darkmode-700) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.dark\:md\:from-darkmode-800:is(.dark *){--tw-gradient-from: rgb(var(--color-darkmode-800) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-darkmode-800) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}}@media (min-width: 1024px){.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:col-span-12{grid-column:span 12 / span 12}.lg\:col-span-2{grid-column:span 2 / span 2}.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:col-span-4{grid-column:span 4 / span 4}.lg\:col-span-5{grid-column:span 5 / span 5}.lg\:col-span-6{grid-column:span 6 / span 6}.lg\:col-span-8{grid-column:span 8 / span 8}.lg\:col-span-9{grid-column:span 9 / span 9}.lg\:mt-0{margin-top:0}.lg\:block{display:block}.lg\:w-2\/4{width:50%}.lg\:w-\[900px\]{width:900px}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:overflow-hidden{overflow:hidden}}@media (min-width: 1280px){.xl\:col-span-3{grid-column:span 3 / span 3}.xl\:col-span-8{grid-column:span 8 / span 8}.xl\:my-0{margin-top:0;margin-bottom:0}.xl\:-mt-\[3px\]{margin-top:-3px}.xl\:-mt-\[62px\]{margin-top:-62px}.xl\:ml-20{margin-left:5rem}.xl\:mr-3{margin-right:.75rem}.xl\:mt-0{margin-top:0}.xl\:mt-24{margin-top:6rem}.xl\:mt-8{margin-top:2rem}.xl\:block{display:block}.xl\:flex{display:flex}.xl\:grid{display:grid}.xl\:hidden{display:none}.xl\:h-auto{height:auto}.xl\:w-32{width:8rem}.xl\:w-\[100px\]{width:100px}.xl\:w-\[1100px\]{width:1100px}.xl\:w-\[180px\]{width:180px}.xl\:w-\[230px\]{width:230px}.xl\:w-\[250px\]{width:250px}.xl\:w-\[260px\]{width:260px}.xl\:w-auto{width:auto}.xl\:min-w-\[350px\]{min-width:350px}.xl\:bg-theme-1{--tw-bg-opacity: 1;background-color:rgb(var(--color-theme-1) / var(--tw-bg-opacity))}.xl\:bg-transparent{background-color:transparent}.xl\:bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.xl\:p-0{padding:0}.xl\:px-6{padding-left:1.5rem;padding-right:1.5rem}.xl\:px-\[50px\]{padding-left:50px;padding-right:50px}.xl\:py-0{padding-top:0;padding-bottom:0}.xl\:pb-0{padding-bottom:0}.xl\:pt-\[12px\]{padding-top:12px}.xl\:text-left{text-align:left}.xl\:text-3xl{font-size:1.875rem;line-height:2.25rem}.xl\:shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.before\:xl\:block:before{content:var(--tw-content);display:block}.xl\:before\:block:before{content:var(--tw-content);display:block}.xl\:before\:bg-white\/10:before{content:var(--tw-content);background-color:#ffffff1a}.after\:xl\:block:after{content:var(--tw-content);display:block}.xl\:dark\:bg-darkmode-400:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-400) / var(--tw-bg-opacity))}.xl\:dark\:bg-darkmode-600:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-600) / var(--tw-bg-opacity))}}@media (min-width: 1536px){.\32xl\:col-span-12{grid-column:span 12 / span 12}.\32xl\:col-span-4{grid-column:span 4 / span 4}}.\[\&\.active\]\:border-2.active{border-width:2px}.\[\&\.active\]\:border-theme-1\/60.active{border-color:rgb(var(--color-theme-1) / .6)}.\[\&\.mobile-menu--active\]\:before\:visible.mobile-menu--active:before{content:var(--tw-content);visibility:visible}.\[\&\.mobile-menu--active\]\:before\:opacity-100.mobile-menu--active:before{content:var(--tw-content);opacity:1}.\[\&\:disabled\:checked\]\:cursor-not-allowed:disabled:checked{cursor:not-allowed}.\[\&\:disabled\:checked\]\:opacity-70:disabled:checked{opacity:.7}.\[\&\:disabled\:checked\]\:dark\:bg-darkmode-800\/50:is(.dark *):disabled:checked{background-color:rgb(var(--color-darkmode-800) / .5)}.\[\&\:disabled\:not\(\:checked\)\]\:cursor-not-allowed:disabled:not(:checked){cursor:not-allowed}.\[\&\:disabled\:not\(\:checked\)\]\:bg-slate-100:disabled:not(:checked){--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.\[\&\:disabled\:not\(\:checked\)\]\:dark\:bg-darkmode-800\/50:is(.dark *):disabled:not(:checked){background-color:rgb(var(--color-darkmode-800) / .5)}.\[\&\:hover\:not\(\:disabled\)\]\:border-slate-100:hover:not(:disabled){--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity))}.\[\&\:hover\:not\(\:disabled\)\]\:border-opacity-10:hover:not(:disabled){--tw-border-opacity: .1}.\[\&\:hover\:not\(\:disabled\)\]\:border-opacity-90:hover:not(:disabled){--tw-border-opacity: .9}.\[\&\:hover\:not\(\:disabled\)\]\:bg-danger\/10:hover:not(:disabled){background-color:rgb(var(--color-danger) / .1)}.\[\&\:hover\:not\(\:disabled\)\]\:bg-darkmode-800\/30:hover:not(:disabled){background-color:rgb(var(--color-darkmode-800) / .3)}.\[\&\:hover\:not\(\:disabled\)\]\:bg-pending\/10:hover:not(:disabled){background-color:rgb(var(--color-pending) / .1)}.\[\&\:hover\:not\(\:disabled\)\]\:bg-primary\/10:hover:not(:disabled){background-color:rgb(var(--color-primary) / .1)}.\[\&\:hover\:not\(\:disabled\)\]\:bg-secondary\/20:hover:not(:disabled){background-color:rgb(var(--color-secondary) / .2)}.\[\&\:hover\:not\(\:disabled\)\]\:bg-slate-100:hover:not(:disabled){--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.\[\&\:hover\:not\(\:disabled\)\]\:bg-success\/10:hover:not(:disabled){background-color:rgb(var(--color-success) / .1)}.\[\&\:hover\:not\(\:disabled\)\]\:bg-warning\/10:hover:not(:disabled){background-color:rgb(var(--color-warning) / .1)}.\[\&\:hover\:not\(\:disabled\)\]\:bg-opacity-10:hover:not(:disabled){--tw-bg-opacity: .1}.\[\&\:hover\:not\(\:disabled\)\]\:bg-opacity-90:hover:not(:disabled){--tw-bg-opacity: .9}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:border-darkmode-100\/20:is(.dark *):hover:not(:disabled){border-color:rgb(var(--color-darkmode-100) / .2)}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:border-darkmode-300\/80:is(.dark *):hover:not(:disabled){border-color:rgb(var(--color-darkmode-300) / .8)}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:border-darkmode-800:is(.dark *):hover:not(:disabled){--tw-border-opacity: 1;border-color:rgb(var(--color-darkmode-800) / var(--tw-border-opacity))}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:border-opacity-60:is(.dark *):hover:not(:disabled){--tw-border-opacity: .6}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:bg-darkmode-100\/10:is(.dark *):hover:not(:disabled){background-color:rgb(var(--color-darkmode-100) / .1)}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:bg-darkmode-300\/80:is(.dark *):hover:not(:disabled){background-color:rgb(var(--color-darkmode-300) / .8)}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:bg-darkmode-800\/50:is(.dark *):hover:not(:disabled){background-color:rgb(var(--color-darkmode-800) / .5)}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:dark\:bg-darkmode-800\/70:is(.dark *):is(.dark *):hover:not(:disabled){background-color:rgb(var(--color-darkmode-800) / .7)}.\[\&\:hover\:not\(\:disabled\)\]\:dark\:bg-opacity-30:is(.dark *):hover:not(:disabled){--tw-bg-opacity: .3}.\[\&\:hover_td\]\:bg-slate-100:hover td{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.\[\&\:hover_td\]\:dark\:bg-darkmode-300:is(.dark *):hover td{--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-300) / var(--tw-bg-opacity))}.\[\&\:hover_td\]\:dark\:bg-opacity-50:is(.dark *):hover td{--tw-bg-opacity: .5}.\[\&\:not\(\:first-child\)\]\:border-l-transparent:not(:first-child){border-left-color:transparent}.\[\&\:not\(\:last-child\)\]\:border-b:not(:last-child){border-bottom-width:1px}.\[\&\:not\(\:last-child\)\]\:border-slate-200\/60:not(:last-child){border-color:#e2e8f099}.\[\&\:not\(\:last-child\)\]\:dark\:border-darkmode-400:is(.dark *):not(:last-child){--tw-border-opacity: 1;border-color:rgb(var(--color-darkmode-400) / var(--tw-border-opacity))}.\[\&\:not\(button\)\]\:text-center:not(button){text-align:center}.\[\&\:nth-of-type\(odd\)_td\]\:bg-slate-100:nth-of-type(odd) td{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.\[\&\:nth-of-type\(odd\)_td\]\:dark\:bg-darkmode-300:is(.dark *):nth-of-type(odd) td{--tw-bg-opacity: 1;background-color:rgb(var(--color-darkmode-300) / var(--tw-bg-opacity))}.\[\&\:nth-of-type\(odd\)_td\]\:dark\:bg-opacity-50:is(.dark *):nth-of-type(odd) td{--tw-bg-opacity: .5}.\[\&\[data-simplebar\]\]\:fixed[data-simplebar]{position:fixed}.\[\&\[readonly\]\]\:cursor-not-allowed[readonly]{cursor:not-allowed}.\[\&\[readonly\]\]\:bg-slate-100[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.\[\&\[readonly\]\]\:dark\:border-transparent:is(.dark *)[readonly]{border-color:transparent}.\[\&\[readonly\]\]\:dark\:bg-darkmode-800\/50:is(.dark *)[readonly]{background-color:rgb(var(--color-darkmode-800) / .5)}.\[\&\[type\=\'checkbox\'\]\]\:checked\:border-primary:checked[type=checkbox]{--tw-border-opacity: 1;border-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.\[\&\[type\=\'checkbox\'\]\]\:checked\:border-opacity-10:checked[type=checkbox]{--tw-border-opacity: .1}.\[\&\[type\=\'checkbox\'\]\]\:checked\:bg-primary:checked[type=checkbox]{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.\[\&\[type\=\'radio\'\]\]\:checked\:border-primary:checked[type=radio]{--tw-border-opacity: 1;border-color:rgb(var(--color-primary) / var(--tw-border-opacity))}.\[\&\[type\=\'radio\'\]\]\:checked\:border-opacity-10:checked[type=radio]{--tw-border-opacity: .1}.\[\&\[type\=\'radio\'\]\]\:checked\:bg-primary:checked[type=radio]{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.\[\&_\.simplebar-scrollbar\]\:before\:bg-black\/50 .simplebar-scrollbar:before{content:var(--tw-content);background-color:#00000080}
diff --git a/web/dist/assets/rubick-BsAbhWbo.png b/web/dist/assets/rubick-BsAbhWbo.png
new file mode 100644
index 000000000..a8499ab0e
Binary files /dev/null and b/web/dist/assets/rubick-BsAbhWbo.png differ
diff --git a/web/dist/assets/side-menu-koX86Dqj.png b/web/dist/assets/side-menu-koX86Dqj.png
new file mode 100644
index 000000000..b2c67b186
Binary files /dev/null and b/web/dist/assets/side-menu-koX86Dqj.png differ
diff --git a/web/dist/assets/simple-menu-DyDDc8y3.png b/web/dist/assets/simple-menu-DyDDc8y3.png
new file mode 100644
index 000000000..ebdce09e0
Binary files /dev/null and b/web/dist/assets/simple-menu-DyDDc8y3.png differ
diff --git a/web/dist/assets/spinner-big-D0QEvRVc.gif b/web/dist/assets/spinner-big-D0QEvRVc.gif
new file mode 100644
index 000000000..aba29ddad
Binary files /dev/null and b/web/dist/assets/spinner-big-D0QEvRVc.gif differ
diff --git a/web/dist/assets/tinker-DvKz0VXE.png b/web/dist/assets/tinker-DvKz0VXE.png
new file mode 100644
index 000000000..c45e4a42e
Binary files /dev/null and b/web/dist/assets/tinker-DvKz0VXE.png differ
diff --git a/web/dist/assets/top-menu-DTdMe4W1.png b/web/dist/assets/top-menu-DTdMe4W1.png
new file mode 100644
index 000000000..623fabce0
Binary files /dev/null and b/web/dist/assets/top-menu-DTdMe4W1.png differ
diff --git a/web/dist/assets/warehouse_system-BWJ8kGCd.png b/web/dist/assets/warehouse_system-BWJ8kGCd.png
new file mode 100644
index 000000000..bf7e33533
Binary files /dev/null and b/web/dist/assets/warehouse_system-BWJ8kGCd.png differ
diff --git a/web/dist/config.js.example b/web/dist/config.js.example
new file mode 100644
index 000000000..65d9843c8
--- /dev/null
+++ b/web/dist/config.js.example
@@ -0,0 +1,4 @@
+window.APP_CONFIG = {
+  // Uncomment and set this to override the build-time configuration
+  // VITE_BACKEND_URL: "http://your-backend-url.com"
+};
diff --git a/web/dist/favicon.ico b/web/dist/favicon.ico
new file mode 100644
index 000000000..1db421d60
Binary files /dev/null and b/web/dist/favicon.ico differ
diff --git a/web/dist/index.html b/web/dist/index.html
new file mode 100644
index 000000000..39a7e53f1
--- /dev/null
+++ b/web/dist/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/config.js"></script>
+    <title>DCSLab</title>
+    <script type="module" crossorigin src="/assets/index-Dzd_0sNX.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-tvyvYmsK.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/web/index.html b/web/index.html
index 2064acec1..4269126e3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/config.js"></script>
     <title>DCSLab</title>
   </head>
   <body>
diff --git a/web/package-lock.json b/web/package-lock.json
index f089db482..9a4355c21 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -47,6 +47,8 @@
         "postcss-advanced-variables": "^3.0.1",
         "postcss-import": "^16.0.0",
         "postcss-nesting": "^12.0.2",
+        "prettier": "^3.8.1",
+        "prettier-plugin-vue": "^1.1.6",
         "tailwind-merge": "^2.2.0",
         "tailwindcss": "^3.4.0",
         "typescript": "~5.3.0",
@@ -979,6 +981,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz",
       "integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -1331,6 +1334,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001587",
         "electron-to-chromium": "^1.4.668",
@@ -2351,6 +2355,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
@@ -2530,6 +2535,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
       "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -2544,6 +2550,48 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-vue": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-vue/-/prettier-plugin-vue-1.1.6.tgz",
+      "integrity": "sha512-trQ/oY+6hSsGe2zPIFThXMIM0TbxMEbk2VOrKjwHWuSz7OEo0rnumbz9a47OxVPCaAnGY9vZG8qDTiTmk9bq0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier": "^2.8.1"
+      }
+    },
+    "node_modules/prettier-plugin-vue/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -2963,6 +3011,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
       "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -3085,6 +3134,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
       "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "devOptional": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3140,6 +3190,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
       "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
@@ -3194,6 +3245,7 @@
       "version": "3.4.21",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
       "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.4.21",
         "@vue/compiler-sfc": "3.4.21",
diff --git a/web/package.json b/web/package.json
index af38160c4..7b461688f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,7 +9,8 @@
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build --force"
+    "type-check": "vue-tsc --build --force",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.16",
@@ -51,6 +52,8 @@
     "postcss-advanced-variables": "^3.0.1",
     "postcss-import": "^16.0.0",
     "postcss-nesting": "^12.0.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-vue": "^1.1.6",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.0",
     "typescript": "~5.3.0",
diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs
index d85ca9fcb..e2ed36212 100644
--- a/web/postcss.config.cjs
+++ b/web/postcss.config.cjs
@@ -1,8 +1,8 @@
 module.exports = {
   plugins: {
-    "postcss-import": {},
-    "postcss-advanced-variables": {},
-    "tailwindcss/nesting": {},
+    'postcss-import': {},
+    'postcss-advanced-variables': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/web/public/.htaccess b/web/public/.htaccess
new file mode 100644
index 000000000..b0e00a120
--- /dev/null
+++ b/web/public/.htaccess
@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
\ No newline at end of file
diff --git a/web/public/config.js.example b/web/public/config.js.example
new file mode 100644
index 000000000..65d9843c8
--- /dev/null
+++ b/web/public/config.js.example
@@ -0,0 +1,4 @@
+window.APP_CONFIG = {
+  // Uncomment and set this to override the build-time configuration
+  // VITE_BACKEND_URL: "http://your-backend-url.com"
+};
diff --git a/web/src/assets/css/app.css b/web/src/assets/css/app.css
index 66b619a53..5b5797981 100644
--- a/web/src/assets/css/app.css
+++ b/web/src/assets/css/app.css
@@ -10,7 +10,7 @@
  | https://tailwindcss.com/docs/theme
  |
  */
-@import "./fonts/_roboto.css";
+@import './fonts/_roboto.css';
 
 /*
  |--------------------------------------------------------------------------
@@ -20,16 +20,16 @@
  | Import CSS components.
  |
  */
-@import "./components/base/_box.css";
-@import "./components/base/_global.css";
-@import "./components/base/_image-fit.css";
-@import "./components/base/_scrollbar-hidden.css";
-@import "./components/base/_typing-dots.css";
-@import "./components/base/_zoom-in.css";
-@import "./components/base/_intro.css";
+@import './components/base/_box.css';
+@import './components/base/_global.css';
+@import './components/base/_image-fit.css';
+@import './components/base/_scrollbar-hidden.css';
+@import './components/base/_typing-dots.css';
+@import './components/base/_zoom-in.css';
+@import './components/base/_intro.css';
 
-@import "./customs/_loading-overlay.css";
-@import "./customs/_loading-line.css";
+@import './customs/_loading-overlay.css';
+@import './customs/_loading-line.css';
 
 /*
  |--------------------------------------------------------------------------
@@ -46,4 +46,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
diff --git a/web/src/assets/css/components/base/_box.css b/web/src/assets/css/components/base/_box.css
index 900c7c1d9..8f8339b08 100644
--- a/web/src/assets/css/components/base/_box.css
+++ b/web/src/assets/css/components/base/_box.css
@@ -2,32 +2,32 @@
   .box {
     box-shadow: 0px 3px 5px #0000000b;
     background-color: white;
-    border: 1px solid theme("colors.slate.200");
+    border: 1px solid theme('colors.slate.200');
     border-radius: 0.6rem;
     position: relative;
     &--stacked:before {
-      content: "";
+      content: '';
       z-index: -1;
-      box-shadow: theme("boxShadow.sm");
+      box-shadow: theme('boxShadow.sm');
       height: 100%;
-      background-color: theme("colors.slate.50");
-      border: 1px solid theme("colors.slate.200");
+      background-color: theme('colors.slate.50');
+      border: 1px solid theme('colors.slate.200');
       position: absolute;
-      border-radius: theme("borderRadius.lg");
-      left: theme("spacing[3.5]");
-      right: theme("spacing[3.5]");
+      border-radius: theme('borderRadius.lg');
+      left: theme('spacing[3.5]');
+      right: theme('spacing[3.5]');
       top: 0;
-      margin-top: theme("spacing.3");
+      margin-top: theme('spacing.3');
     }
   }
 
   .dark {
     .box {
-      background-color: theme("backgroundColor.darkmode.600");
-      border-color: theme("colors.darkmode.500");
+      background-color: theme('backgroundColor.darkmode.600');
+      border-color: theme('colors.darkmode.500');
       &--stacked:before {
-        background-color: theme("colors.darkmode.600" / 70%);
-        border-color: theme("colors.slate.500" / 60%);
+        background-color: theme('colors.darkmode.600' / 70%);
+        border-color: theme('colors.slate.500' / 60%);
       }
     }
   }
diff --git a/web/src/assets/css/components/base/_global.css b/web/src/assets/css/components/base/_global.css
index 7192ced2d..3ee35fc5b 100644
--- a/web/src/assets/css/components/base/_global.css
+++ b/web/src/assets/css/components/base/_global.css
@@ -1,21 +1,33 @@
 html {
-    &.dark {
-        body {
-            color: theme("colors.slate.300");
-            *,
-            ::before,
-            ::after {
-                border-color: theme("colors.white" / 5%);
-            }
-        }
-    }
+  &.dark {
     body {
-        letter-spacing: theme("letterSpacing.wide");
-        font-size: theme("fontSize.sm");
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        font-family: theme("fontFamily.roboto");
-        color: theme("colors.slate.600");
-        line-height: theme("lineHeight.5");
+      color: theme('colors.slate.300');
+
+      *,
+      ::before,
+      ::after {
+        border-color: theme('colors.white' / 5%);
+      }
     }
+  }
+
+  body {
+    letter-spacing: theme('letterSpacing.wide');
+    font-size: theme('fontSize.sm');
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: theme('fontFamily.roboto');
+    color: theme('colors.slate.600');
+    line-height: theme('lineHeight.5');
+  }
+}
+
+input[type='number'].no-spinner::-webkit-outer-spin-button,
+input[type='number'].no-spinner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'].no-spinner {
+  -moz-appearance: textfield;
 }
diff --git a/web/src/assets/css/components/base/_intro.css b/web/src/assets/css/components/base/_intro.css
index 0190f981d..db675a09d 100644
--- a/web/src/assets/css/components/base/_intro.css
+++ b/web/src/assets/css/components/base/_intro.css
@@ -1,53 +1,53 @@
 * {
-    @for $i from 1 to 50 {
-        > .intro-x:nth-child($i) {
-            z-index: calc(50 - $i);
-            opacity: 0;
-            position: relative;
-            transform: translateX(50px);
-            animation: 0.4s intro-x-animation ease-in-out 0.33333s;
-            animation-fill-mode: forwards;
-            animation-delay: calc($i * 0.1s);
-        }
-        > .-intro-x:nth-child($i) {
-            z-index: calc(50 - $i);
-            opacity: 0;
-            position: relative;
-            transform: translateX(-50px);
-            animation: 0.4s intro-x-animation ease-in-out 0.33333s;
-            animation-fill-mode: forwards;
-            animation-delay: calc($i * 0.1s);
-        }
-        > .intro-y:nth-child($i) {
-            z-index: calc(50 - $i);
-            opacity: 0;
-            position: relative;
-            transform: translateY(50px);
-            animation: 0.4s intro-y-animation ease-in-out 0.33333s;
-            animation-fill-mode: forwards;
-            animation-delay: calc($i * 0.1s);
-        }
-        > .-intro-y:nth-child($i) {
-            z-index: calc(50 - $i);
-            opacity: 0;
-            position: relative;
-            transform: translateY(-50px);
-            animation: 0.4s intro-y-animation ease-in-out 0.33333s;
-            animation-fill-mode: forwards;
-            animation-delay: calc($i * 0.1s);
-        }
+  @for $i from 1 to 50 {
+    > .intro-x:nth-child($i) {
+      z-index: calc(50 - $i);
+      opacity: 0;
+      position: relative;
+      transform: translateX(50px);
+      animation: 0.4s intro-x-animation ease-in-out 0.33333s;
+      animation-fill-mode: forwards;
+      animation-delay: calc($i * 0.1s);
     }
+    > .-intro-x:nth-child($i) {
+      z-index: calc(50 - $i);
+      opacity: 0;
+      position: relative;
+      transform: translateX(-50px);
+      animation: 0.4s intro-x-animation ease-in-out 0.33333s;
+      animation-fill-mode: forwards;
+      animation-delay: calc($i * 0.1s);
+    }
+    > .intro-y:nth-child($i) {
+      z-index: calc(50 - $i);
+      opacity: 0;
+      position: relative;
+      transform: translateY(50px);
+      animation: 0.4s intro-y-animation ease-in-out 0.33333s;
+      animation-fill-mode: forwards;
+      animation-delay: calc($i * 0.1s);
+    }
+    > .-intro-y:nth-child($i) {
+      z-index: calc(50 - $i);
+      opacity: 0;
+      position: relative;
+      transform: translateY(-50px);
+      animation: 0.4s intro-y-animation ease-in-out 0.33333s;
+      animation-fill-mode: forwards;
+      animation-delay: calc($i * 0.1s);
+    }
+  }
 }
 
 @keyframes intro-x-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 @keyframes intro-y-animation {
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
diff --git a/web/src/assets/css/components/base/_zoom-in.css b/web/src/assets/css/components/base/_zoom-in.css
index f9df27704..b4b347bc8 100644
--- a/web/src/assets/css/components/base/_zoom-in.css
+++ b/web/src/assets/css/components/base/_zoom-in.css
@@ -7,8 +7,8 @@
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     &:hover {
-      transform: scale(theme("scale.105"));
-      box-shadow: theme("boxShadow.xl");
+      transform: scale(theme('scale.105'));
+      box-shadow: theme('boxShadow.xl');
     }
   }
 }
diff --git a/web/src/assets/css/components/mobile-menu.css b/web/src/assets/css/components/mobile-menu.css
index 63a923fa9..135202575 100644
--- a/web/src/assets/css/components/mobile-menu.css
+++ b/web/src/assets/css/components/mobile-menu.css
@@ -1,90 +1,88 @@
 .mobile-menu {
-    .menu__divider {
-        width: 100%;
-        height: 1px;
-        background-color: theme("colors.white" / 8%);
-        position: relative;
-    }
-    .menu {
-        height: 50px;
-        display: flex;
-        align-items: center;
-        color: white;
-        .menu__title {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            margin-left: theme("spacing.3");
-            .menu__sub-icon {
-                transition-property: theme("transitionProperty.DEFAULT");
-                transition-timing-function: theme(
-                    "transitionTimingFunction.in"
-                );
-                transition-duration: theme("transitionDuration.100");
-                margin-left: auto;
-                svg {
-                    width: theme("spacing.5");
-                    height: theme("spacing.5");
-                }
-            }
+  .menu__divider {
+    width: 100%;
+    height: 1px;
+    background-color: theme('colors.white' / 8%);
+    position: relative;
+  }
+  .menu {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    color: white;
+    .menu__title {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin-left: theme('spacing.3');
+      .menu__sub-icon {
+        transition-property: theme('transitionProperty.DEFAULT');
+        transition-timing-function: theme('transitionTimingFunction.in');
+        transition-duration: theme('transitionDuration.100');
+        margin-left: auto;
+        svg {
+          width: theme('spacing.5');
+          height: theme('spacing.5');
         }
+      }
     }
-    ul {
+  }
+  ul {
+    & > li {
+      /* First level */
+      & > .menu {
+        padding-left: theme('spacing.6');
+        padding-right: theme('spacing.6');
+      }
+      & > ul {
+        background: theme('colors.black' / 10%);
+        border-radius: theme('borderRadius.lg');
+        margin: theme('spacing.1') theme('spacing.4');
+        &:not(.menu__sub-open) {
+          display: none;
+        }
         & > li {
-            /* First level */
-            & > .menu {
-                padding-left: theme("spacing.6");
-                padding-right: theme("spacing.6");
+          /* Second level */
+          & > .menu {
+            padding-left: theme('spacing.4');
+            padding-right: theme('spacing.4');
+          }
+          & > ul {
+            background: theme('colors.black' / 10%);
+            border-radius: theme('borderRadius.lg');
+            margin: theme('spacing.1') auto;
+            &:not(.menu__sub-open) {
+              display: none;
             }
-            & > ul {
-                background: theme("colors.black" / 10%);
-                border-radius: theme("borderRadius.lg");
-                margin: theme("spacing.1") theme("spacing.4");
-                &:not(.menu__sub-open) {
-                    display: none;
-                }
-                & > li {
-                    /* Second level */
-                    & > .menu {
-                        padding-left: theme("spacing.4");
-                        padding-right: theme("spacing.4");
-                    }
-                    & > ul {
-                        background: theme("colors.black" / 10%);
-                        border-radius: theme("borderRadius.lg");
-                        margin: theme("spacing.1") auto;
-                        &:not(.menu__sub-open) {
-                            display: none;
-                        }
-                        & > li {
-                            /* Third level */
-                            & > .menu {
-                                padding-left: theme("spacing.4");
-                                padding-right: theme("spacing.4");
-                            }
-                        }
-                    }
-                }
+            & > li {
+              /* Third level */
+              & > .menu {
+                padding-left: theme('spacing.4');
+                padding-right: theme('spacing.4');
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
 .dark {
-    .mobile-menu {
-        ul {
-            & > li {
-                /* First level */
-                & > ul {
-                    background-color: theme("colors.darkmode.700");
-                    & > li {
-                        /* Second level */
-                        & > ul {
-                            background-color: theme("colors.darkmode.600");
-                        }
-                    }
-                }
+  .mobile-menu {
+    ul {
+      & > li {
+        /* First level */
+        & > ul {
+          background-color: theme('colors.darkmode.700');
+          & > li {
+            /* Second level */
+            & > ul {
+              background-color: theme('colors.darkmode.600');
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/customs/_loading-line.css b/web/src/assets/css/customs/_loading-line.css
index 0cfd99f70..0c7030d50 100644
--- a/web/src/assets/css/customs/_loading-line.css
+++ b/web/src/assets/css/customs/_loading-line.css
@@ -1,31 +1,36 @@
-.loading-line {
-    width: 100%;
-    /* Full length */
-    height: 2px;
-    /* Line thickness */
-    background-color: #3498db;
-    /* Line color */
-    position: relative;
-    overflow: hidden;
-}
-
-.loading-line::after {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
-    animation: loading-animation 1.5s linear infinite;
-    /* Adjust animation speed here */
-}
-
-@keyframes loading-animation {
-    0% {
-        left: -100%;
-    }
-
-    100% {
-        left: 100%;
-    }
-}
\ No newline at end of file
+.loading-line {
+  width: 100%;
+  /* Full length */
+  height: 2px;
+  /* Line thickness */
+  background-color: #3498db;
+  /* Line color */
+  position: relative;
+  overflow: hidden;
+}
+
+.loading-line::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.8) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: loading-animation 1.5s linear infinite;
+  /* Adjust animation speed here */
+}
+
+@keyframes loading-animation {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
diff --git a/web/src/assets/css/customs/_loading-overlay.css b/web/src/assets/css/customs/_loading-overlay.css
index a12b51e54..8cfe1a4c4 100644
--- a/web/src/assets/css/customs/_loading-overlay.css
+++ b/web/src/assets/css/customs/_loading-overlay.css
@@ -1,21 +1,21 @@
-.loading-container {
-  @apply relative;
-  @apply z-0;
-  @apply p-2;
-  @apply rounded-lg;
-}
-
-.loading-overlay {
-  @apply absolute inset-0;
-  @apply flex items-center justify-center;
-  @apply bg-no-repeat bg-center z-[150] opacity-50;
-}
-
-.spinner {
-  @apply absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2;
-  @apply z-[151];
-}
-
-.loading-overlay-gray {
-  @apply bg-gray-200;
-}
\ No newline at end of file
+.loading-container {
+  @apply relative;
+  @apply z-0;
+  @apply p-2;
+  @apply rounded-lg;
+}
+
+.loading-overlay {
+  @apply absolute inset-0;
+  @apply flex items-center justify-center;
+  @apply bg-no-repeat bg-center z-[150] opacity-50;
+}
+
+.spinner {
+  @apply absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2;
+  @apply z-[151];
+}
+
+.loading-overlay-gray {
+  @apply bg-gray-200;
+}
diff --git a/web/src/assets/css/fonts/_roboto.css b/web/src/assets/css/fonts/_roboto.css
index 8d8321ffe..6771c1932 100644
--- a/web/src/assets/css/fonts/_roboto.css
+++ b/web/src/assets/css/fonts/_roboto.css
@@ -1,972 +1,1032 @@
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin Italic'),
+    local('Roboto-ThinItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzQdL-vwnYh2eg.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin Italic'),
+    local('Roboto-ThinItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzQdL-vwnYh2eg.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzwdL-vwnYh2eg.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin Italic'),
+    local('Roboto-ThinItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzwdL-vwnYh2eg.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzMdL-vwnYh2eg.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin Italic'),
+    local('Roboto-ThinItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzMdL-vwnYh2eg.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz8dL-vwnYh2eg.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin Italic'),
+    local('Roboto-ThinItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz8dL-vwnYh2eg.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz4dL-vwnYh2eg.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin Italic'),
+    local('Roboto-ThinItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEz4dL-vwnYh2eg.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzAdL-vwnYg.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin Italic'),
+    local('Roboto-ThinItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrEzAdL-vwnYg.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc3CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light Italic'),
+    local('Roboto-LightItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc3CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc-CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light Italic'),
+    local('Roboto-LightItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc-CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc2CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light Italic'),
+    local('Roboto-LightItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc2CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc5CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light Italic'),
+    local('Roboto-LightItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc5CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc1CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light Italic'),
+    local('Roboto-LightItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc1CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc0CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light Italic'),
+    local('Roboto-LightItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc0CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc6CsTYl4BO.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light Italic'),
+    local('Roboto-LightItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjASc6CsTYl4BO.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto Italic"), local("Roboto-Italic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto Italic'),
+    local('Roboto-Italic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto Italic"), local("Roboto-Italic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto Italic'),
+    local('Roboto-Italic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto Italic"), local("Roboto-Italic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto Italic'),
+    local('Roboto-Italic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto Italic"), local("Roboto-Italic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto Italic'),
+    local('Roboto-Italic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto Italic"), local("Roboto-Italic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto Italic'),
+    local('Roboto-Italic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto Italic"), local("Roboto-Italic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto Italic'),
+    local('Roboto-Italic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto Italic"), local("Roboto-Italic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto Italic'),
+    local('Roboto-Italic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc3CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium Italic'),
+    local('Roboto-MediumItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc3CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc-CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium Italic'),
+    local('Roboto-MediumItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc-CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc2CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium Italic'),
+    local('Roboto-MediumItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc2CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc5CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium Italic'),
+    local('Roboto-MediumItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc5CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc1CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium Italic'),
+    local('Roboto-MediumItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc1CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc0CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium Italic'),
+    local('Roboto-MediumItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc0CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc6CsTYl4BO.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium Italic'),
+    local('Roboto-MediumItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc6CsTYl4BO.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold Italic'),
+    local('Roboto-BoldItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold Italic'),
+    local('Roboto-BoldItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold Italic'),
+    local('Roboto-BoldItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold Italic'),
+    local('Roboto-BoldItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold Italic'),
+    local('Roboto-BoldItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold Italic'),
+    local('Roboto-BoldItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold Italic'),
+    local('Roboto-BoldItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black Italic"), local("Roboto-BlackItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc3CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black Italic'),
+    local('Roboto-BlackItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc3CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black Italic"), local("Roboto-BlackItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc-CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black Italic'),
+    local('Roboto-BlackItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc-CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black Italic"), local("Roboto-BlackItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc2CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black Italic'),
+    local('Roboto-BlackItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc2CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black Italic"), local("Roboto-BlackItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc5CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black Italic'),
+    local('Roboto-BlackItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc5CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black Italic"), local("Roboto-BlackItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc1CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black Italic'),
+    local('Roboto-BlackItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc1CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black Italic"), local("Roboto-BlackItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc0CsTYl4BOQ3o.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black Italic'),
+    local('Roboto-BlackItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc0CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black Italic"), local("Roboto-BlackItalic"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc6CsTYl4BO.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black Italic'),
+    local('Roboto-BlackItalic'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBCc6CsTYl4BO.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin"), local("Roboto-Thin"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin'),
+    local('Roboto-Thin'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin"), local("Roboto-Thin"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin'),
+    local('Roboto-Thin'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin"), local("Roboto-Thin"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxEIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin'),
+    local('Roboto-Thin'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxEIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin"), local("Roboto-Thin"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxLIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin'),
+    local('Roboto-Thin'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxLIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin"), local("Roboto-Thin"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxHIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin'),
+    local('Roboto-Thin'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxHIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin"), local("Roboto-Thin"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin'),
+    local('Roboto-Thin'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local("Roboto Thin"), local("Roboto-Thin"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src:
+    local('Roboto Thin'),
+    local('Roboto-Thin'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light"), local("Roboto-Light"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light"), local("Roboto-Light"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light"), local("Roboto-Light"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light"), local("Roboto-Light"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light"), local("Roboto-Light"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light"), local("Roboto-Light"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local("Roboto Light"), local("Roboto-Light"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto"), local("Roboto-Regular"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto"), local("Roboto-Regular"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto"), local("Roboto-Regular"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto"), local("Roboto-Regular"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto"), local("Roboto-Regular"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto"), local("Roboto-Regular"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Roboto"), local("Roboto-Regular"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium"), local("Roboto-Medium"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium"), local("Roboto-Medium"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium"), local("Roboto-Medium"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium"), local("Roboto-Medium"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium"), local("Roboto-Medium"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium"), local("Roboto-Medium"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: local("Roboto Medium"), local("Roboto-Medium"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold"), local("Roboto-Bold"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold"), local("Roboto-Bold"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold"), local("Roboto-Bold"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold"), local("Roboto-Bold"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold"), local("Roboto-Bold"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold"), local("Roboto-Bold"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Roboto Bold"), local("Roboto-Bold"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black"), local("Roboto-Black"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCRc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-        U+FE2E-FE2F;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black'),
+    local('Roboto-Black'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCRc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black"), local("Roboto-Black"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfABc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black'),
+    local('Roboto-Black'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfABc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black"), local("Roboto-Black"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCBc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+1F00-1FFF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black'),
+    local('Roboto-Black'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCBc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black"), local("Roboto-Black"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBxc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0370-03FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black'),
+    local('Roboto-Black'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black"), local("Roboto-Black"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCxc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black'),
+    local('Roboto-Black'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black"), local("Roboto-Black"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfChc4AMP6lbBP.woff2)
-            format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black'),
+    local('Roboto-Black'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfChc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: local("Roboto Black"), local("Roboto-Black"),
-        url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2)
-            format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
-        U+2215, U+FEFF, U+FFFD;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Roboto Black'),
+    local('Roboto-Black'),
+    url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/web/src/assets/css/themes/enigma/side-nav.css b/web/src/assets/css/themes/enigma/side-nav.css
index 0b05d21b2..23c766f3e 100644
--- a/web/src/assets/css/themes/enigma/side-nav.css
+++ b/web/src/assets/css/themes/enigma/side-nav.css
@@ -1,401 +1,375 @@
-@import "@left4code/tw-starter/dist/css/mixins/_media.css";
+@import '@left4code/tw-starter/dist/css/mixins/_media.css';
 
 .enigma {
-    .side-nav {
-        &.side-nav--simple {
-            .side-menu {
-                .side-menu__title {
-                    display: none;
-                    .side-menu__sub-icon {
-                        display: none;
-                    }
-                }
+  .side-nav {
+    &.side-nav--simple {
+      .side-menu {
+        .side-menu__title {
+          display: none;
+          .side-menu__sub-icon {
+            display: none;
+          }
+        }
+      }
+    }
+    .side-nav__divider {
+      width: 100%;
+      height: 1px;
+      background-color: theme('colors.black' / 6%);
+      z-index: 10;
+      position: relative;
+    }
+    .side-menu {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      padding-left: theme('spacing.5');
+      color: theme('colors.slate.600');
+      margin-bottom: theme('spacing.1');
+      position: relative;
+      border-radius: theme('borderRadius.xl');
+      .side-menu__title {
+        display: none;
+        align-items: center;
+        width: 100%;
+        margin-left: theme('spacing.3');
+        @media screen(xl) {
+          display: flex;
+        }
+        .side-menu__sub-icon {
+          transition-property: theme('transitionProperty.DEFAULT');
+          transition-timing-function: theme('transitionTimingFunction.in');
+          transition-duration: theme('transitionDuration.100');
+          margin-left: auto;
+          margin-right: theme('spacing.5');
+          display: none;
+          @media screen(xl) {
+            display: block;
+          }
+          svg {
+            width: theme('spacing.4');
+            height: theme('spacing.4');
+          }
+        }
+      }
+    }
+    & > ul {
+      @for $i from 1 through 50 {
+        > li:nth-child($i) {
+          &.side-nav__divider {
+            opacity: 0;
+            animation: 0.4s intro-divider-animation ease-in-out 0.33333s;
+            animation-fill-mode: forwards;
+            animation-delay: calc($i * 0.1s);
+          }
+          & > a {
+            &:not(.side-menu--active) {
+              opacity: 0;
+              transform: translateX(50px);
+              animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
             }
+          }
         }
-        .side-nav__divider {
-            width: 100%;
-            height: 1px;
-            background-color: theme("colors.black" / 6%);
-            z-index: 10;
-            position: relative;
+      }
+      ul {
+        @for $i from 1 through 50 {
+          li:nth-child($i) {
+            & > a {
+              opacity: 0;
+              transform: translateX(50px);
+              animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
+            }
+          }
         }
-        .side-menu {
-            height: 50px;
-            display: flex;
-            align-items: center;
-            padding-left: theme("spacing.5");
-            color: theme("colors.slate.600");
-            margin-bottom: theme("spacing.1");
-            position: relative;
-            border-radius: theme("borderRadius.xl");
+      }
+      & > li {
+        /* First level */
+        & > .side-menu {
+          &.side-menu--active {
+            background-color: theme('colors.slate.100');
+            z-index: 10;
+            &:before {
+              content: '';
+              display: block;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              border-radius: theme('borderRadius.xl');
+              position: absolute;
+              border-bottom: 3px solid theme('colors.black' / 8%);
+            }
+            &:after {
+              content: '';
+              width: 20px;
+              height: 80px;
+              background-repeat: no-repeat;
+              background-size: cover;
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              right: 0;
+              margin-top: auto;
+              margin-bottom: auto;
+              background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
+              margin-right: -47px;
+              opacity: 0;
+              animation: 0.3s ease-in-out 1s active-side-menu-chevron;
+              animation-fill-mode: forwards;
+            }
+            .side-menu__icon {
+              color: theme('colors.theme.1');
+              z-index: 10;
+            }
             .side-menu__title {
-                display: none;
-                align-items: center;
-                width: 100%;
-                margin-left: theme("spacing.3");
-                @media screen(xl) {
-                    display: flex;
-                }
-                .side-menu__sub-icon {
-                    transition-property: theme("transitionProperty.DEFAULT");
-                    transition-timing-function: theme(
-                        "transitionTimingFunction.in"
-                    );
-                    transition-duration: theme("transitionDuration.100");
-                    margin-left: auto;
-                    margin-right: theme("spacing.5");
-                    display: none;
-                    @media screen(xl) {
-                        display: block;
-                    }
-                    svg {
-                        width: theme("spacing.4");
-                        height: theme("spacing.4");
-                    }
-                }
+              color: theme('colors.theme.1');
+              font-weight: theme('fontWeight.medium');
+              z-index: 10;
             }
+          }
+          &:hover {
+            &:not(.side-menu--active):not(.side-menu--open) {
+              background-color: theme('colors.slate.100');
+              &:before {
+                content: '';
+                display: block;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: theme('borderRadius.xl');
+                position: absolute;
+                z-index: -1;
+                border-bottom: 3px solid theme('colors.black' / 8%);
+              }
+            }
+          }
         }
         & > ul {
-            @for $i from 1 through 50 {
-                > li:nth-child($i) {
-                    &.side-nav__divider {
-                        opacity: 0;
-                        animation: 0.4s
-                            intro-divider-animation
-                            ease-in-out
-                            0.33333s;
-                        animation-fill-mode: forwards;
-                        animation-delay: calc($i * 0.1s);
-                    }
-                    & > a {
-                        &:not(.side-menu--active) {
-                            opacity: 0;
-                            transform: translateX(50px);
-                            animation: 0.4s
-                                intro-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
+          background-color: theme('colors.white' / 4%);
+          border-radius: theme('borderRadius.xl');
+          position: relative;
+          &:before {
+            content: '';
+            display: block;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: theme('colors.white' / 30%);
+            border-radius: theme('borderRadius.xl');
+            position: absolute;
+            z-index: -1;
+          }
+          &:not(.side-menu__sub-open) {
+            display: none;
+          }
+          & > li {
+            /* Second level */
+            & > .side-menu {
+              &.side-menu--active {
+                .side-menu__icon {
+                  color: theme('colors.slate.700');
                 }
-            }
-            ul {
-                @for $i from 1 through 50 {
-                    li:nth-child($i) {
-                        & > a {
-                            opacity: 0;
-                            transform: translateX(50px);
-                            animation: 0.2s
-                                intro-submenu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
+                .side-menu__title {
+                  color: theme('colors.slate.700');
+                  font-weight: theme('fontWeight.medium');
                 }
+              }
+              &:not(.side-menu--active) {
+                color: theme('colors.slate.600');
+              }
+              &:hover {
+              }
+              .side-menu__icon {
+              }
             }
-            & > li {
-                /* First level */
+            & > ul {
+              background-color: theme('colors.white' / 4%);
+              border-radius: theme('borderRadius.xl');
+              position: relative;
+              &:before {
+                content: '';
+                display: block;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: theme('colors.white' / 30%);
+                border-radius: theme('borderRadius.xl');
+                position: absolute;
+                z-index: -1;
+              }
+              &:not(.side-menu__sub-open) {
+                display: none;
+              }
+              & > li {
+                /* Third level */
                 & > .side-menu {
-                    &.side-menu--active {
-                        background-color: theme("colors.slate.100");
-                        z-index: 10;
-                        &:before {
-                            content: "";
-                            display: block;
-                            top: 0;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            border-radius: theme("borderRadius.xl");
-                            position: absolute;
-                            border-bottom: 3px solid theme("colors.black" / 8%);
-                        }
-                        &:after {
-                            content: "";
-                            width: 20px;
-                            height: 80px;
-                            background-repeat: no-repeat;
-                            background-size: cover;
-                            position: absolute;
-                            top: 0;
-                            bottom: 0;
-                            right: 0;
-                            margin-top: auto;
-                            margin-bottom: auto;
-                            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
-                            margin-right: -47px;
-                            opacity: 0;
-                            animation: 0.3s ease-in-out 1s
-                                active-side-menu-chevron;
-                            animation-fill-mode: forwards;
-                        }
-                        .side-menu__icon {
-                            color: theme("colors.theme.1");
-                            z-index: 10;
-                        }
-                        .side-menu__title {
-                            color: theme("colors.theme.1");
-                            font-weight: theme("fontWeight.medium");
-                            z-index: 10;
-                        }
-                    }
-                    &:hover {
-                        &:not(.side-menu--active):not(.side-menu--open) {
-                            background-color: theme("colors.slate.100");
-                            &:before {
-                                content: "";
-                                display: block;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                border-radius: theme("borderRadius.xl");
-                                position: absolute;
-                                z-index: -1;
-                                border-bottom: 3px solid
-                                    theme("colors.black" / 8%);
-                            }
-                        }
-                    }
-                }
-                & > ul {
-                    background-color: theme("colors.white" / 4%);
-                    border-radius: theme("borderRadius.xl");
-                    position: relative;
-                    &:before {
-                        content: "";
-                        display: block;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        background-color: theme("colors.white" / 30%);
-                        border-radius: theme("borderRadius.xl");
-                        position: absolute;
-                        z-index: -1;
+                  padding-left: theme('spacing.10');
+                  &.side-menu--active {
+                    .side-menu__icon {
+                      color: theme('colors.slate.700');
                     }
-                    &:not(.side-menu__sub-open) {
-                        display: none;
-                    }
-                    & > li {
-                        /* Second level */
-                        & > .side-menu {
-                            &.side-menu--active {
-                                .side-menu__icon {
-                                    color: theme("colors.slate.700");
-                                }
-                                .side-menu__title {
-                                    color: theme("colors.slate.700");
-                                    font-weight: theme("fontWeight.medium");
-                                }
-                            }
-                            &:not(.side-menu--active) {
-                                color: theme("colors.slate.600");
-                            }
-                            &:hover {
-                            }
-                            .side-menu__icon {
-                            }
-                        }
-                        & > ul {
-                            background-color: theme("colors.white" / 4%);
-                            border-radius: theme("borderRadius.xl");
-                            position: relative;
-                            &:before {
-                                content: "";
-                                display: block;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                background-color: theme("colors.white" / 30%);
-                                border-radius: theme("borderRadius.xl");
-                                position: absolute;
-                                z-index: -1;
-                            }
-                            &:not(.side-menu__sub-open) {
-                                display: none;
-                            }
-                            & > li {
-                                /* Third level */
-                                & > .side-menu {
-                                    &.side-menu--active {
-                                        .side-menu__icon {
-                                            color: theme("colors.slate.700");
-                                        }
-                                        .side-menu__title {
-                                            color: theme("colors.slate.700");
-                                            font-weight: theme(
-                                                "fontWeight.medium"
-                                            );
-                                        }
-                                    }
-                                    &:not(.side-menu--active) {
-                                        color: theme("colors.slate.600");
-                                    }
-                                    &:hover {
-                                    }
-                                    .side-menu__icon {
-                                    }
-                                }
-                            }
-                        }
+                    .side-menu__title {
+                      color: theme('colors.slate.700');
+                      font-weight: theme('fontWeight.medium');
                     }
+                  }
+                  &:not(.side-menu--active) {
+                    color: theme('colors.slate.600');
+                  }
+                  &:hover {
+                  }
+                  .side-menu__icon {
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
 @keyframes intro-divider-animation {
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes intro-menu-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 @keyframes intro-submenu-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 @keyframes active-side-menu-chevron {
-    100% {
-        opacity: 1;
-        margin-right: -27px;
-    }
+  100% {
+    opacity: 1;
+    margin-right: -27px;
+  }
 }
 
 .dark {
-    .enigma {
-        .side-nav {
-            .side-nav__divider {
-                background-color: theme("colors.white" / 7%);
+  .enigma {
+    .side-nav {
+      .side-nav__divider {
+        background-color: theme('colors.white' / 7%);
+      }
+      .side-menu {
+        color: theme('colors.slate.300');
+      }
+      & > ul {
+        & > li {
+          /* First level */
+          & > .side-menu {
+            &.side-menu--active {
+              background-color: transparent;
+              &:before {
+                border-color: theme('colors.black' / 8%);
+                background-color: theme('colors.darkmode.700');
+              }
+              &:after {
+                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E");
+              }
+              .side-menu__icon {
+                color: theme('colors.slate.300');
+              }
+              .side-menu__title {
+                color: theme('colors.slate.300');
+              }
             }
-            .side-menu {
-                color: theme("colors.slate.300");
+            &:not(.side-menu--active) {
+              .side-menu__icon {
+                color: theme('colors.slate.400');
+              }
+              .side-menu__title {
+                color: theme('colors.slate.400');
+              }
             }
-            & > ul {
+            &:hover {
+              &:not(.side-menu--active):not(.side-menu--open) {
+                background-color: transparent;
+                &:before {
+                  background-color: theme('colors.darkmode.700');
+                }
+              }
+            }
+          }
+          & > ul {
+            background-color: transparent;
+            &:before {
+              background-color: theme('colors.darkmode.900' / 30%);
+            }
+            & > li {
+              /* Second level */
+              & > .side-menu {
+                &.side-menu--active {
+                  .side-menu__icon {
+                    color: theme('colors.slate.300');
+                  }
+                  .side-menu__title {
+                    color: theme('colors.slate.300');
+                  }
+                }
+                &:not(.side-menu--active) {
+                  color: theme('colors.slate.400');
+                  .side-menu__icon {
+                    color: theme('colors.slate.400');
+                  }
+                }
+                &:hover {
+                }
+                .side-menu__icon {
+                }
+              }
+              & > ul {
+                background-color: transparent;
+                &:before {
+                  background-color: theme('colors.darkmode.900' / 30%);
+                }
                 & > li {
-                    /* First level */
-                    & > .side-menu {
-                        &.side-menu--active {
-                            background-color: transparent;
-                            &:before {
-                                border-color: theme("colors.black" / 8%);
-                                background-color: theme("colors.darkmode.700");
-                            }
-                            &:after {
-                                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E");
-                            }
-                            .side-menu__icon {
-                                color: theme("colors.slate.300");
-                            }
-                            .side-menu__title {
-                                color: theme("colors.slate.300");
-                            }
-                        }
-                        &:not(.side-menu--active) {
-                            .side-menu__icon {
-                                color: theme("colors.slate.400");
-                            }
-                            .side-menu__title {
-                                color: theme("colors.slate.400");
-                            }
-                        }
-                        &:hover {
-                            &:not(.side-menu--active):not(.side-menu--open) {
-                                background-color: transparent;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.700"
-                                    );
-                                }
-                            }
-                        }
+                  /* Third level */
+                  & > .side-menu {
+                    &.side-menu--active {
+                      .side-menu__icon {
+                        color: theme('colors.slate.300');
+                      }
+                      .side-menu__title {
+                        color: theme('colors.slate.300');
+                      }
+                    }
+                    &:not(.side-menu--active) {
+                      color: theme('colors.slate.400');
+                      .side-menu__icon {
+                        color: theme('colors.slate.400');
+                      }
+                    }
+                    &:hover {
                     }
-                    & > ul {
-                        background-color: transparent;
-                        &:before {
-                            background-color: theme(
-                                "colors.darkmode.900" / 30%
-                            );
-                        }
-                        & > li {
-                            /* Second level */
-                            & > .side-menu {
-                                &.side-menu--active {
-                                    .side-menu__icon {
-                                        color: theme("colors.slate.300");
-                                    }
-                                    .side-menu__title {
-                                        color: theme("colors.slate.300");
-                                    }
-                                }
-                                &:not(.side-menu--active) {
-                                    color: theme("colors.slate.400");
-                                    .side-menu__icon {
-                                        color: theme("colors.slate.400");
-                                    }
-                                }
-                                &:hover {
-                                }
-                                .side-menu__icon {
-                                }
-                            }
-                            & > ul {
-                                background-color: transparent;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.900" / 30%
-                                    );
-                                }
-                                & > li {
-                                    /* Third level */
-                                    & > .side-menu {
-                                        &.side-menu--active {
-                                            .side-menu__icon {
-                                                color: theme(
-                                                    "colors.slate.300"
-                                                );
-                                            }
-                                            .side-menu__title {
-                                                color: theme(
-                                                    "colors.slate.300"
-                                                );
-                                            }
-                                        }
-                                        &:not(.side-menu--active) {
-                                            color: theme("colors.slate.400");
-                                            .side-menu__icon {
-                                                color: theme(
-                                                    "colors.slate.400"
-                                                );
-                                            }
-                                        }
-                                        &:hover {
-                                        }
-                                        .side-menu__icon {
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                    .side-menu__icon {
                     }
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/themes/enigma/top-nav.css b/web/src/assets/css/themes/enigma/top-nav.css
index d976a4de8..aee284fbe 100644
--- a/web/src/assets/css/themes/enigma/top-nav.css
+++ b/web/src/assets/css/themes/enigma/top-nav.css
@@ -1,381 +1,386 @@
-@import "@left4code/tw-starter/dist/css/mixins/_media.css";
+@import '@left4code/tw-starter/dist/css/mixins/_media.css';
 
 .enigma {
-    .top-nav {
-        animation: 0.4s intro-top-menu ease-in-out 0.2s;
-        animation-fill-mode: forwards;
-        .top-menu {
-            height: 55px;
-            display: flex;
-            align-items: center;
-            padding-left: theme("spacing.5");
-            padding-right: theme("spacing.5");
-            margin-right: theme("spacing.1");
-            color: theme("colors.slate.600");
-            position: relative;
-            border-radius: theme("borderRadius.full");
-            @media screen(xl) {
-                border-radius: theme("borderRadius.xl");
+  .top-nav {
+    animation: 0.4s intro-top-menu ease-in-out 0.2s;
+    animation-fill-mode: forwards;
+    .top-menu {
+      min-height: 55px;
+      height: auto;
+      display: flex;
+      align-items: center;
+      padding-left: theme('spacing.5');
+      padding-right: theme('spacing.5');
+      padding-top: theme('spacing.3');
+      padding-bottom: theme('spacing.3');
+      margin-right: theme('spacing.1');
+      color: theme('colors.slate.600');
+      position: relative;
+      border-radius: theme('borderRadius.full');
+      @media screen(xl) {
+        border-radius: theme('borderRadius.xl');
+      }
+      .top-menu__icon {
+        z-index: 10;
+      }
+      .top-menu__title {
+        min-width: 0;
+        margin-left: theme('spacing.3');
+        display: flex;
+        align-items: flex-start;
+        z-index: 10;
+        .top-menu__title-text {
+          flex: 1 1 auto;
+          min-width: 0;
+          white-space: normal;
+          line-height: theme('lineHeight.5');
+          word-break: break-word;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .top-menu__sub-icon {
+          transition-property: theme('transitionProperty.DEFAULT');
+          transition-timing-function: theme('transitionTimingFunction.in');
+          transition-duration: theme('transitionDuration.100');
+          flex-shrink: 0;
+          width: theme('spacing.4');
+          height: theme('spacing.4');
+          display: none;
+          @media screen(xl) {
+            display: block;
+          }
+        }
+      }
+    }
+    & > ul {
+      @for $i from 1 through 50 {
+        > li:nth-child($i) {
+          & > a {
+            &:not(.top-menu--active) {
+              opacity: 0;
+              transform: translateY(50px);
+              animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
+            }
+          }
+        }
+      }
+      & > li {
+        /* First level */
+        &:hover {
+          & > .top-menu {
+            &:not(.top-menu--active) {
+              background-color: theme('colors.slate.100');
+              &:before {
+                content: '';
+                display: block;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: theme('borderRadius.full');
+                position: absolute;
+                z-index: -1;
+                border-bottom: 3px solid theme('colors.black' / 8%);
+                @media screen(xl) {
+                  border-radius: theme('borderRadius.xl');
+                }
+              }
+            }
+            .top-menu__title {
+              .top-menu__sub-icon {
+                transform: rotate(180deg);
+              }
+            }
+          }
+          & > ul {
+            display: block;
+          }
+        }
+        & > .top-menu {
+          margin-top: 3px;
+          max-width: theme('spacing.48');
+          &.top-menu--active {
+            color: theme('colors.theme.1');
+            background-color: theme('colors.slate.100');
+            &:before {
+              content: '';
+              display: none;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              border-radius: theme('borderRadius.xl');
+              position: absolute;
+              border-bottom: 3px solid theme('colors.black' / 8%);
+              @media screen(xl) {
+                display: block;
+              }
+            }
+            &:after {
+              content: '';
+              width: 20px;
+              height: 80px;
+              background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
+              background-repeat: no-repeat;
+              background-size: cover;
+              position: absolute;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              margin-left: auto;
+              margin-right: auto;
+              transform: rotate(90deg);
+              display: none;
+              animation: 0.3s ease-in-out 1s active-top-menu-chevron;
+              animation-fill-mode: forwards;
+              margin-bottom: -74px;
+              opacity: 0;
+              @media screen(xl) {
+                display: block;
+              }
             }
             .top-menu__icon {
-                z-index: 10;
+              color: theme('colors.theme.1');
             }
             .top-menu__title {
-                margin-left: theme("spacing.3");
-                display: flex;
-                align-items: center;
-                white-space: nowrap;
-                z-index: 10;
-                .top-menu__sub-icon {
-                    transition-property: theme("transitionProperty.DEFAULT");
-                    transition-timing-function: theme(
-                        "transitionTimingFunction.in"
-                    );
-                    transition-duration: theme("transitionDuration.100");
-                    width: theme("spacing.4");
-                    height: theme("spacing.4");
-                    display: none;
-                    @media screen(xl) {
-                        display: block;
-                    }
-                }
+              font-weight: theme('fontWeight.medium');
+              color: theme('colors.slate.800');
+              @media screen(xl) {
+                color: theme('colors.theme.1');
+              }
             }
+          }
+          .top-menu__icon {
+            margin-top: -3px;
+          }
+          .top-menu__title {
+            margin-top: -3px;
+            .top-menu__sub-icon {
+              margin-left: theme('spacing.3');
+            }
+          }
         }
         & > ul {
-            @for $i from 1 through 50 {
-                > li:nth-child($i) {
-                    & > a {
-                        &:not(.top-menu--active) {
-                            opacity: 0;
-                            transform: translateY(50px);
-                            animation: 0.4s
-                                intro-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
+          box-shadow: 0px 3px 20px #00000014;
+          background-color: theme('colors.slate.100');
+          display: none;
+          width: theme('spacing.56');
+          position: absolute;
+          border-radius: theme('borderRadius.md');
+          z-index: 20;
+          padding-left: 0;
+          padding-right: 0;
+          margin-top: theme('spacing.1');
+          &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: theme('colors.white' / 4%);
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: theme('borderRadius.md');
+            z-index: -1;
+          }
+          &:after {
+            content: '';
+            width: 100%;
+            height: theme('spacing.1');
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin-top: calc(theme('spacing.1') * -1);
+            cursor: pointer;
+          }
+          & > li {
+            /* Second level */
+            padding-left: theme('spacing.5');
+            padding-right: theme('spacing.5');
+            position: relative;
+            &:hover {
+              position: relative;
+              & > .top-menu {
+                .top-menu__title {
+                  .top-menu__sub-icon {
+                    transform: rotate(-90deg);
+                  }
                 }
+              }
+              & > ul {
+                display: block;
+              }
             }
-            & > li {
-                /* First level */
-                &:hover {
-                    & > .top-menu {
-                        &:not(.top-menu--active) {
-                            background-color: theme("colors.slate.100");
-                            &:before {
-                                content: "";
-                                display: block;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                border-radius: theme("borderRadius.full");
-                                position: absolute;
-                                z-index: -1;
-                                border-bottom: 3px solid
-                                    theme("colors.black" / 8%);
-                                @media screen(xl) {
-                                    border-radius: theme("borderRadius.xl");
-                                }
-                            }
-                        }
-                        .top-menu__title {
-                            .top-menu__sub-icon {
-                                transform: rotate(180deg);
-                            }
-                        }
-                    }
-                    & > ul {
-                        display: block;
-                    }
+            & > .top-menu {
+              padding-left: 0;
+              padding-right: 0;
+              margin-right: 0;
+              .top-menu__title {
+                width: 100%;
+                .top-menu__sub-icon {
+                  margin-left: auto;
                 }
+              }
+            }
+            & > ul {
+              box-shadow: 0px 3px 20px #00000014;
+              left: 100%;
+              background-color: theme('colors.slate.100');
+              display: none;
+              width: theme('spacing.56');
+              position: absolute;
+              border-radius: theme('borderRadius.md');
+              margin-top: 0;
+              margin-left: 0;
+              top: 0;
+              z-index: 20;
+              padding-left: 0;
+              padding-right: 0;
+              &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background-color: theme('colors.white' / 4%);
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: theme('borderRadius.md');
+                z-index: -1;
+              }
+              &:after {
+                content: '';
+                width: 100%;
+                height: theme('spacing.1');
+                position: absolute;
+                top: 0;
+                left: 0;
+                margin-top: calc(theme('spacing.1') * -1);
+                cursor: pointer;
+              }
+              & > li {
+                /* Third level */
+                padding-left: theme('spacing.5');
+                padding-right: theme('spacing.5');
                 & > .top-menu {
-                    margin-top: 3px;
-                    &.top-menu--active {
-                        color: theme("colors.theme.1");
-                        background-color: theme("colors.slate.100");
-                        &:before {
-                            content: "";
-                            display: none;
-                            top: 0;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            border-radius: theme("borderRadius.xl");
-                            position: absolute;
-                            border-bottom: 3px solid theme("colors.black" / 8%);
-                            @media screen(xl) {
-                                display: block;
-                            }
-                        }
-                        &:after {
-                            content: "";
-                            width: 20px;
-                            height: 80px;
-                            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
-                            background-repeat: no-repeat;
-                            background-size: cover;
-                            position: absolute;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            margin-left: auto;
-                            margin-right: auto;
-                            transform: rotate(90deg);
-                            display: none;
-                            animation: 0.3s ease-in-out 1s
-                                active-top-menu-chevron;
-                            animation-fill-mode: forwards;
-                            margin-bottom: -74px;
-                            opacity: 0;
-                            @media screen(xl) {
-                                display: block;
-                            }
-                        }
-                        .top-menu__icon {
-                            color: theme("colors.theme.1");
-                        }
-                        .top-menu__title {
-                            font-weight: theme("fontWeight.medium");
-                            color: theme("colors.slate.800");
-                            @media screen(xl) {
-                                color: theme("colors.theme.1");
-                            }
-                        }
-                    }
-                    .top-menu__icon {
-                        margin-top: -3px;
-                    }
-                    .top-menu__title {
-                        margin-top: -3px;
-                        .top-menu__sub-icon {
-                            margin-left: theme("spacing.2");
-                        }
-                    }
-                }
-                & > ul {
-                    box-shadow: 0px 3px 20px #00000014;
-                    background-color: theme("colors.slate.100");
-                    display: none;
-                    width: theme("spacing.56");
-                    position: absolute;
-                    border-radius: theme("borderRadius.md");
-                    z-index: 20;
-                    padding-left: 0;
-                    padding-right: 0;
-                    margin-top: theme("spacing.1");
-                    &:before {
-                        content: "";
-                        display: block;
-                        position: absolute;
-                        width: 100%;
-                        height: 100%;
-                        background-color: theme("colors.white" / 4%);
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        border-radius: theme("borderRadius.md");
-                        z-index: -1;
-                    }
-                    &:after {
-                        content: "";
-                        width: 100%;
-                        height: theme("spacing.1");
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        margin-top: calc(theme("spacing.1") * -1);
-                        cursor: pointer;
-                    }
-                    & > li {
-                        /* Second level */
-                        padding-left: theme("spacing.5");
-                        padding-right: theme("spacing.5");
-                        position: relative;
-                        &:hover {
-                            position: relative;
-                            & > .top-menu {
-                                .top-menu__title {
-                                    .top-menu__sub-icon {
-                                        transform: rotate(-90deg);
-                                    }
-                                }
-                            }
-                            & > ul {
-                                display: block;
-                            }
-                        }
-                        & > .top-menu {
-                            padding-left: 0;
-                            padding-right: 0;
-                            margin-right: 0;
-                            .top-menu__title {
-                                width: 100%;
-                                .top-menu__sub-icon {
-                                    margin-left: auto;
-                                }
-                            }
-                        }
-                        & > ul {
-                            box-shadow: 0px 3px 20px #00000014;
-                            left: 100%;
-                            background-color: theme("colors.slate.100");
-                            display: none;
-                            width: theme("spacing.56");
-                            position: absolute;
-                            border-radius: theme("borderRadius.md");
-                            margin-top: 0;
-                            margin-left: 0;
-                            top: 0;
-                            z-index: 20;
-                            padding-left: 0;
-                            padding-right: 0;
-                            &:before {
-                                content: "";
-                                display: block;
-                                position: absolute;
-                                width: 100%;
-                                height: 100%;
-                                background-color: theme("colors.white" / 4%);
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                border-radius: theme("borderRadius.md");
-                                z-index: -1;
-                            }
-                            &:after {
-                                content: "";
-                                width: 100%;
-                                height: theme("spacing.1");
-                                position: absolute;
-                                top: 0;
-                                left: 0;
-                                margin-top: calc(theme("spacing.1") * -1);
-                                cursor: pointer;
-                            }
-                            & > li {
-                                /* Third level */
-                                padding-left: theme("spacing.5");
-                                padding-right: theme("spacing.5");
-                                & > .top-menu {
-                                    padding-left: 0;
-                                    padding-right: 0;
-                                    margin-right: 0;
-                                    .top-menu__title {
-                                        width: 100%;
-                                        .top-menu__sub-icon {
-                                            margin-left: auto;
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                  padding-left: 0;
+                  padding-right: 0;
+                  margin-right: 0;
+                  .top-menu__title {
+                    width: 100%;
+                    .top-menu__sub-icon {
+                      margin-left: auto;
                     }
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
 @keyframes active-top-menu-chevron {
-    100% {
-        opacity: 1;
-        margin-bottom: -56px;
-    }
+  100% {
+    opacity: 1;
+    margin-bottom: -56px;
+  }
 }
 
 @keyframes intro-top-menu {
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
 
 @keyframes intro-menu-animation {
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
 
 .dark {
-    .enigma {
-        .top-nav {
-            .top-menu {
-                .top-menu__icon {
-                    color: theme("colors.slate.400");
-                }
-                .top-menu__title {
-                    color: theme("colors.slate.400");
+  .enigma {
+    .top-nav {
+      .top-menu {
+        .top-menu__icon {
+          color: theme('colors.slate.400');
+        }
+        .top-menu__title {
+          color: theme('colors.slate.400');
+        }
+      }
+      & > ul {
+        & > li {
+          /* First level */
+          &:hover {
+            & > .top-menu {
+              &:not(.top-menu--active) {
+                background-color: transparent;
+                &:before {
+                  background-color: theme('colors.darkmode.700');
                 }
+              }
             }
-            & > ul {
+          }
+          & > .top-menu {
+            &.top-menu--active {
+              background-color: theme('colors.darkmode.700');
+              &:before {
+                border-color: theme('colors.black'/ 8%);
+                background-color: theme('colors.darkmode.700');
+              }
+              &:after {
+                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E");
+              }
+              .top-menu__icon {
+                color: white;
+              }
+              .top-menu__title {
+                color: white;
+              }
+            }
+          }
+          & > ul {
+            box-shadow: 0px 3px 7px #0000001c;
+            background-color: theme('colors.darkmode.600');
+            &:before {
+              background-color: theme('colors.black' / 10%);
+            }
+            & > li {
+              /* Second level */
+              & > ul {
+                box-shadow: 0px 3px 7px #0000001c;
+                background-color: theme('colors.darkmode.600');
+                &:before {
+                  background-color: theme('colors.black' / 10%);
+                }
                 & > li {
-                    /* First level */
-                    &:hover {
-                        & > .top-menu {
-                            &:not(.top-menu--active) {
-                                background-color: transparent;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.700"
-                                    );
-                                }
-                            }
-                        }
-                    }
-                    & > .top-menu {
-                        &.top-menu--active {
-                            background-color: theme("colors.darkmode.700");
-                            &:before {
-                                border-color: theme("colors.black"/ 8%);
-                                background-color: theme("colors.darkmode.700");
-                            }
-                            &:after {
-                                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E");
-                            }
-                            .top-menu__icon {
-                                color: white;
-                            }
-                            .top-menu__title {
-                                color: white;
-                            }
-                        }
-                    }
-                    & > ul {
-                        box-shadow: 0px 3px 7px #0000001c;
-                        background-color: theme("colors.darkmode.600");
-                        &:before {
-                            background-color: theme("colors.black" / 10%);
-                        }
-                        & > li {
-                            /* Second level */
-                            & > ul {
-                                box-shadow: 0px 3px 7px #0000001c;
-                                background-color: theme("colors.darkmode.600");
-                                &:before {
-                                    background-color: theme(
-                                        "colors.black" / 10%
-                                    );
-                                }
-                                & > li {
-                                    /* Third level */
-                                    & > .top-menu {
-                                        .top-menu__title {
-                                            .top-menu__sub-icon {
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                  /* Third level */
+                  & > .top-menu {
+                    .top-menu__title {
+                      .top-menu__sub-icon {
+                      }
                     }
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/themes/icewall/side-nav.css b/web/src/assets/css/themes/icewall/side-nav.css
index 5a03b3781..679672896 100644
--- a/web/src/assets/css/themes/icewall/side-nav.css
+++ b/web/src/assets/css/themes/icewall/side-nav.css
@@ -1,396 +1,377 @@
-@import "@left4code/tw-starter/dist/css/mixins/_media.css";
+@import '@left4code/tw-starter/dist/css/mixins/_media.css';
 
 .icewall {
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E%0A");
+  }
+  .wrapper {
     &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-attachment: fixed;
-        background-repeat: no-repeat;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E%0A");
+      animation: 0.4s intro-wrapper ease-in-out 0.1s;
+      animation-fill-mode: forwards;
     }
-    .wrapper {
-        &:before {
-            animation: 0.4s intro-wrapper ease-in-out 0.1s;
-            animation-fill-mode: forwards;
+    .wrapper-box {
+      animation: 0.4s intro-wrapper ease-in-out 0.2s;
+      animation-fill-mode: forwards;
+    }
+  }
+  .side-nav {
+    &.side-nav--simple {
+      .side-menu {
+        .side-menu__title {
+          display: none;
+          .side-menu__sub-icon {
+            display: none;
+          }
         }
-        .wrapper-box {
-            animation: 0.4s intro-wrapper ease-in-out 0.2s;
-            animation-fill-mode: forwards;
+      }
+    }
+    .side-nav__divider {
+      width: 100%;
+      height: 1px;
+      background-color: theme('colors.white' / 8%);
+      z-index: 10;
+      position: relative;
+    }
+    .side-menu {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      padding-left: theme('spacing.5');
+      color: white;
+      margin-bottom: theme('spacing.1');
+      position: relative;
+      border-radius: theme('borderRadius.lg');
+      .side-menu__title {
+        display: none;
+        align-items: center;
+        width: 100%;
+        margin-left: theme('spacing.3');
+        @media screen(xl) {
+          display: flex;
+        }
+        .side-menu__sub-icon {
+          transition-property: theme('transitionProperty.DEFAULT');
+          transition-timing-function: theme('transitionTimingFunction.in');
+          transition-duration: theme('transitionDuration.100');
+          margin-left: auto;
+          margin-right: theme('spacing.5');
+          display: none;
+          @media screen(xl) {
+            display: block;
+          }
+          svg {
+            width: theme('spacing.4');
+            height: theme('spacing.4');
+          }
         }
+      }
     }
-    .side-nav {
-        &.side-nav--simple {
-            .side-menu {
-                .side-menu__title {
-                    display: none;
-                    .side-menu__sub-icon {
-                        display: none;
-                    }
-                }
+    & > ul {
+      @for $i from 1 through 50 {
+        > li:nth-child($i) {
+          &.side-nav__divider {
+            opacity: 0;
+            animation: 0.4s intro-divider-animation ease-in-out 0.33333s;
+            animation-fill-mode: forwards;
+            animation-delay: calc($i * 0.1s);
+          }
+          & > a {
+            &:not(.side-menu--active) {
+              opacity: 0;
+              transform: translateX(50px);
+              animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
             }
+          }
         }
-        .side-nav__divider {
-            width: 100%;
-            height: 1px;
-            background-color: theme("colors.white" / 8%);
-            z-index: 10;
-            position: relative;
+      }
+      ul {
+        @for $i from 1 through 50 {
+          li:nth-child($i) {
+            & > a {
+              opacity: 0;
+              transform: translateX(50px);
+              animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
+            }
+          }
         }
-        .side-menu {
-            height: 50px;
-            display: flex;
-            align-items: center;
-            padding-left: theme("spacing.5");
-            color: white;
-            margin-bottom: theme("spacing.1");
-            position: relative;
-            border-radius: theme("borderRadius.lg");
+      }
+      & > li {
+        /* First level */
+        & > .side-menu {
+          &.side-menu--active {
+            background-color: theme('colors.theme.1');
+            z-index: 10;
+            &:before {
+              content: '';
+              display: block;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              background-color: theme('colors.white' / 8%);
+              border-radius: theme('borderRadius.lg');
+              position: absolute;
+              border-bottom: 3px solid theme('colors.black' / 10%);
+            }
+            &:after {
+              content: '';
+              width: 20px;
+              height: 80px;
+              background-repeat: no-repeat;
+              background-size: cover;
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              right: 0;
+              margin-top: auto;
+              margin-bottom: auto;
+              background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
+              margin-right: -47px;
+              opacity: 0;
+              animation: 0.3s ease-in-out 1s active-side-menu-chevron;
+              animation-fill-mode: forwards;
+            }
+            .side-menu__icon {
+              z-index: 10;
+            }
             .side-menu__title {
-                display: none;
-                align-items: center;
-                width: 100%;
-                margin-left: theme("spacing.3");
-                @media screen(xl) {
-                    display: flex;
-                }
-                .side-menu__sub-icon {
-                    transition-property: theme("transitionProperty.DEFAULT");
-                    transition-timing-function: theme(
-                        "transitionTimingFunction.in"
-                    );
-                    transition-duration: theme("transitionDuration.100");
-                    margin-left: auto;
-                    margin-right: theme("spacing.5");
-                    display: none;
-                    @media screen(xl) {
-                        display: block;
-                    }
-                    svg {
-                        width: theme("spacing.4");
-                        height: theme("spacing.4");
-                    }
-                }
+              font-weight: theme('fontWeight.medium');
+              z-index: 10;
             }
+          }
+          &:hover {
+            &:not(.side-menu--active):not(.side-menu--open) {
+              background-color: theme('colors.theme.1' / 60%);
+              &:before {
+                content: '';
+                display: block;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: theme('colors.white' / 4%);
+                border-radius: theme('borderRadius.lg');
+                position: absolute;
+                z-index: -1;
+              }
+            }
+          }
         }
         & > ul {
-            @for $i from 1 through 50 {
-                > li:nth-child($i) {
-                    &.side-nav__divider {
-                        opacity: 0;
-                        animation: 0.4s
-                            intro-divider-animation
-                            ease-in-out
-                            0.33333s;
-                        animation-fill-mode: forwards;
-                        animation-delay: calc($i * 0.1s);
-                    }
-                    & > a {
-                        &:not(.side-menu--active) {
-                            opacity: 0;
-                            transform: translateX(50px);
-                            animation: 0.4s
-                                intro-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
-                }
-            }
-            ul {
-                @for $i from 1 through 50 {
-                    li:nth-child($i) {
-                        & > a {
-                            opacity: 0;
-                            transform: translateX(50px);
-                            animation: 0.2s
-                                intro-submenu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
+          background-color: theme('colors.white' / 4%);
+          border-radius: theme('borderRadius.lg');
+          position: relative;
+          &:before {
+            content: '';
+            display: block;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: theme('colors.theme.1' / 60%);
+            border-radius: theme('borderRadius.lg');
+            position: absolute;
+            z-index: -1;
+          }
+          &:not(.side-menu__sub-open) {
+            display: none;
+          }
+          & > li {
+            /* Second level */
+            & > .side-menu {
+              &.side-menu--active {
+                .side-menu__title {
+                  font-weight: theme('fontWeight.medium');
                 }
+              }
+              &:not(.side-menu--active) {
+                color: theme('colors.white' / 70%);
+              }
+              &:hover {
+              }
+              .side-menu__icon {
+              }
             }
-            & > li {
-                /* First level */
+            & > ul {
+              background-color: theme('colors.white' / 4%);
+              border-radius: theme('borderRadius.lg');
+              position: relative;
+              &:before {
+                content: '';
+                display: block;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: theme('colors.theme.1' / 60%);
+                border-radius: theme('borderRadius.lg');
+                position: absolute;
+                z-index: -1;
+              }
+              &:not(.side-menu__sub-open) {
+                display: none;
+              }
+              & > li {
+                /* Third level */
                 & > .side-menu {
-                    &.side-menu--active {
-                        background-color: theme("colors.theme.1");
-                        z-index: 10;
-                        &:before {
-                            content: "";
-                            display: block;
-                            top: 0;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            background-color: theme("colors.white" / 8%);
-                            border-radius: theme("borderRadius.lg");
-                            position: absolute;
-                            border-bottom: 3px solid theme("colors.black" / 10%);
-                        }
-                        &:after {
-                            content: "";
-                            width: 20px;
-                            height: 80px;
-                            background-repeat: no-repeat;
-                            background-size: cover;
-                            position: absolute;
-                            top: 0;
-                            bottom: 0;
-                            right: 0;
-                            margin-top: auto;
-                            margin-bottom: auto;
-                            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
-                            margin-right: -47px;
-                            opacity: 0;
-                            animation: 0.3s ease-in-out 1s
-                                active-side-menu-chevron;
-                            animation-fill-mode: forwards;
-                        }
-                        .side-menu__icon {
-                            z-index: 10;
-                        }
-                        .side-menu__title {
-                            font-weight: theme("fontWeight.medium");
-                            z-index: 10;
-                        }
-                    }
-                    &:hover {
-                        &:not(.side-menu--active):not(.side-menu--open) {
-                            background-color: theme("colors.theme.1" / 60%);
-                            &:before {
-                                content: "";
-                                display: block;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                background-color: theme("colors.white" / 4%);
-                                border-radius: theme("borderRadius.lg");
-                                position: absolute;
-                                z-index: -1;
-                            }
-                        }
-                    }
-                }
-                & > ul {
-                    background-color: theme("colors.white" / 4%);
-                    border-radius: theme("borderRadius.lg");
-                    position: relative;
-                    &:before {
-                        content: "";
-                        display: block;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        background-color: theme("colors.theme.1" / 60%);
-                        border-radius: theme("borderRadius.lg");
-                        position: absolute;
-                        z-index: -1;
-                    }
-                    &:not(.side-menu__sub-open) {
-                        display: none;
-                    }
-                    & > li {
-                        /* Second level */
-                        & > .side-menu {
-                            &.side-menu--active {
-                                .side-menu__title {
-                                    font-weight: theme("fontWeight.medium");
-                                }
-                            }
-                            &:not(.side-menu--active) {
-                                color: theme("colors.white" / 70%);
-                            }
-                            &:hover {
-                            }
-                            .side-menu__icon {
-                            }
-                        }
-                        & > ul {
-                            background-color: theme("colors.white" / 4%);
-                            border-radius: theme("borderRadius.lg");
-                            position: relative;
-                            &:before {
-                                content: "";
-                                display: block;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                background-color: theme("colors.theme.1" / 60%);
-                                border-radius: theme("borderRadius.lg");
-                                position: absolute;
-                                z-index: -1;
-                            }
-                            &:not(.side-menu__sub-open) {
-                                display: none;
-                            }
-                            & > li {
-                                /* Third level */
-                                & > .side-menu {
-                                    &.side-menu--active {
-                                        .side-menu__title {
-                                            font-weight: theme(
-                                                "fontWeight.medium"
-                                            );
-                                        }
-                                    }
-                                    &:not(.side-menu--active) {
-                                        color: theme("colors.white" / 70%);
-                                    }
-                                    &:hover {
-                                    }
-                                    .side-menu__icon {
-                                    }
-                                }
-                            }
-                        }
+                  padding-left: theme('spacing.10');
+                  &.side-menu--active {
+                    .side-menu__title {
+                      font-weight: theme('fontWeight.medium');
                     }
+                  }
+                  &:not(.side-menu--active) {
+                    color: theme('colors.white' / 70%);
+                  }
+                  &:hover {
+                  }
+                  .side-menu__icon {
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
 @keyframes intro-divider-animation {
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes intro-menu-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 @keyframes intro-submenu-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 @keyframes active-side-menu-chevron {
-    100% {
-        opacity: 1;
-        margin-right: -27px;
-    }
+  100% {
+    opacity: 1;
+    margin-right: -27px;
+  }
 }
 
 @keyframes intro-wrapper {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 .dark {
-    .icewall {
-        &:before {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(0,0,0,0.06)'/%3E%3C/svg%3E%0A");
-        }
-        .side-nav {
-            .side-nav__divider {
-                background-color: theme("colors.white" / 7%);
+  .icewall {
+    &:before {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(0,0,0,0.06)'/%3E%3C/svg%3E%0A");
+    }
+    .side-nav {
+      .side-nav__divider {
+        background-color: theme('colors.white' / 7%);
+      }
+      & > ul {
+        & > li {
+          /* First level */
+          & > .side-menu {
+            &.side-menu--active {
+              background-color: transparent;
+              &:before {
+                border-color: theme('colors.black' / 10%);
+                background-color: theme('colors.darkmode.700');
+              }
+              &:after {
+                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E");
+              }
+              .side-menu__icon {
+                color: theme('colors.slate.300');
+              }
+              .side-menu__title {
+                color: theme('colors.slate.300');
+              }
             }
-            & > ul {
+            &:not(.side-menu--active) {
+              .side-menu__icon {
+                color: theme('colors.slate.400');
+              }
+              .side-menu__title {
+                color: theme('colors.slate.400');
+              }
+            }
+            &:hover {
+              &:not(.side-menu--active):not(.side-menu--open) {
+                &:before {
+                  background-color: theme('colors.darkmode.700');
+                }
+              }
+            }
+          }
+          & > ul {
+            background-color: transparent;
+            &:before {
+              background-color: theme('colors.darkmode.900' / 30%);
+            }
+            & > li {
+              /* Second level */
+              & > .side-menu {
+                &.side-menu--active {
+                  color: theme('colors.slate.300');
+                }
+                &:not(.side-menu--active) {
+                  color: theme('colors.slate.400');
+                }
+                &:hover {
+                }
+                .side-menu__icon {
+                }
+              }
+              & > ul {
+                background-color: transparent;
+                &:before {
+                  background-color: theme('colors.darkmode.900' / 30%);
+                }
                 & > li {
-                    /* First level */
-                    & > .side-menu {
-                        &.side-menu--active {
-                            background-color: transparent;
-                            &:before {
-                                border-color: theme("colors.black" / 10%);
-                                background-color: theme("colors.darkmode.700");
-                            }
-                            &:after {
-                                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E");
-                            }
-                            .side-menu__icon {
-                                color: theme("colors.slate.300");
-                            }
-                            .side-menu__title {
-                                color: theme("colors.slate.300");
-                            }
-                        }
-                        &:not(.side-menu--active) {
-                            .side-menu__icon {
-                                color: theme("colors.slate.400");
-                            }
-                            .side-menu__title {
-                                color: theme("colors.slate.400");
-                            }
-                        }
-                        &:hover {
-                            &:not(.side-menu--active):not(.side-menu--open) {
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.700"
-                                    );
-                                }
-                            }
-                        }
+                  /* Third level */
+                  & > .side-menu {
+                    &.side-menu--active {
+                      color: theme('colors.slate.300');
+                    }
+                    &:not(.side-menu--active) {
+                      color: theme('colors.slate.400');
+                    }
+                    &:hover {
                     }
-                    & > ul {
-                        background-color: transparent;
-                        &:before {
-                            background-color: theme(
-                                "colors.darkmode.900" / 30%
-                            );
-                        }
-                        & > li {
-                            /* Second level */
-                            & > .side-menu {
-                                &.side-menu--active {
-                                    color: theme("colors.slate.300");
-                                }
-                                &:not(.side-menu--active) {
-                                    color: theme("colors.slate.400");
-                                }
-                                &:hover {
-                                }
-                                .side-menu__icon {
-                                }
-                            }
-                            & > ul {
-                                background-color: transparent;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.900" / 30%
-                                    );
-                                }
-                                & > li {
-                                    /* Third level */
-                                    & > .side-menu {
-                                        &.side-menu--active {
-                                            color: theme("colors.slate.300");
-                                        }
-                                        &:not(.side-menu--active) {
-                                            color: theme("colors.slate.400");
-                                        }
-                                        &:hover {
-                                        }
-                                        .side-menu__icon {
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                    .side-menu__icon {
                     }
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/themes/icewall/top-nav.css b/web/src/assets/css/themes/icewall/top-nav.css
index ede67a311..624f70384 100644
--- a/web/src/assets/css/themes/icewall/top-nav.css
+++ b/web/src/assets/css/themes/icewall/top-nav.css
@@ -1,399 +1,405 @@
-@import "@left4code/tw-starter/dist/css/mixins/_media.css";
+@import '@left4code/tw-starter/dist/css/mixins/_media.css';
 
 .icewall {
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E%0A");
+  }
+  .wrapper {
     &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-attachment: fixed;
-        background-repeat: no-repeat;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E%0A");
+      animation: 0.4s intro-wrapper ease-in-out 0.1s;
+      animation-fill-mode: forwards;
     }
-    .wrapper {
-        &:before {
-            animation: 0.4s intro-wrapper ease-in-out 0.1s;
-            animation-fill-mode: forwards;
+    .wrapper-box {
+      animation: 0.4s intro-wrapper ease-in-out 0.2s;
+      animation-fill-mode: forwards;
+    }
+  }
+  .top-nav {
+    animation: 0.4s intro-top-menu ease-in-out 0.3s;
+    animation-fill-mode: forwards;
+    .top-menu {
+      min-height: 55px;
+      height: auto;
+      display: flex;
+      align-items: center;
+      padding-left: theme('spacing.5');
+      padding-right: theme('spacing.5');
+      padding-top: theme('spacing.3');
+      padding-bottom: theme('spacing.3');
+      margin-right: theme('spacing.1');
+      color: white;
+      position: relative;
+      border-radius: theme('borderRadius.full');
+      @media screen(xl) {
+        height: 47px;
+        border-radius: theme('borderRadius.lg');
+      }
+      .top-menu__icon {
+        z-index: 10;
+      }
+      .top-menu__title {
+        width: 100%;
+        min-width: 0;
+        margin-left: theme('spacing.3');
+        display: flex;
+        align-items: flex-start;
+        z-index: 10;
+        .top-menu__title-text {
+          flex: 1 1 auto;
+          min-width: 0;
+          white-space: normal;
+          line-height: theme('lineHeight.5');
+          word-break: break-word;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
-        .wrapper-box {
-            animation: 0.4s intro-wrapper ease-in-out 0.2s;
-            animation-fill-mode: forwards;
+        .top-menu__sub-icon {
+          transition-property: theme('transitionProperty.DEFAULT');
+          transition-timing-function: theme('transitionTimingFunction.in');
+          transition-duration: theme('transitionDuration.100');
+          flex-shrink: 0;
+          width: theme('spacing.4');
+          height: theme('spacing.4');
+          display: none;
+          @media screen(xl) {
+            display: block;
+          }
         }
+      }
     }
-    .top-nav {
-        animation: 0.4s intro-top-menu ease-in-out 0.3s;
-        animation-fill-mode: forwards;
-        .top-menu {
-            height: 55px;
-            display: flex;
-            align-items: center;
-            padding-left: theme("spacing.5");
-            padding-right: theme("spacing.5");
-            margin-right: theme("spacing.1");
-            color: white;
-            position: relative;
-            border-radius: theme("borderRadius.full");
+    & > ul {
+      @for $i from 1 through 50 {
+        > li:nth-child($i) {
+          & > a {
+            &:not(.top-menu--active) {
+              opacity: 0;
+              transform: translateY(50px);
+              animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
+            }
+          }
+        }
+      }
+      & > li {
+        /* First level */
+        &:hover {
+          position: relative;
+          & > .top-menu {
+            background: theme('colors.theme.1'/ 60%);
+            &:before {
+              content: '';
+              display: block;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              background-color: theme('colors.white' / 4%);
+              border-radius: theme('borderRadius.full');
+              position: absolute;
+              z-index: -1;
+              @media screen(xl) {
+                background-color: theme('colors.white' / 10%);
+                border-radius: theme('borderRadius.lg');
+              }
+            }
+            .top-menu__title {
+              .top-menu__sub-icon {
+                transform: rotate(180deg);
+              }
+            }
+          }
+          & > ul {
+            display: block;
+          }
+        }
+        & > .top-menu {
+          margin-top: 3px;
+          max-width: theme('spacing.48');
+          &.top-menu--active {
+            background-color: theme('colors.slate.100');
             @media screen(xl) {
-                height: 47px;
-                border-radius: theme("borderRadius.lg");
+              background-color: theme('colors.theme.1');
+            }
+            &:before {
+              content: '';
+              display: none;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              background-color: theme('colors.white' / 8%);
+              border-radius: theme('borderRadius.lg');
+              position: absolute;
+              border-bottom: 3px solid theme('colors.black' / 10%);
+              @media screen(xl) {
+                display: block;
+              }
+            }
+            &:after {
+              content: '';
+              animation: 0.3s ease-in-out 1s active-top-menu-chevron;
+              animation-fill-mode: forwards;
+              display: none;
+              width: 20px;
+              height: 80px;
+              margin-bottom: -74px;
+              background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
+              background-repeat: no-repeat;
+              background-size: cover;
+              position: absolute;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              margin-left: auto;
+              margin-right: auto;
+              transform: rotate(90deg);
+              opacity: 0;
+              @media screen(xl) {
+                display: block;
+              }
             }
             .top-menu__icon {
-                z-index: 10;
+              color: theme('colors.theme.1');
+              @media screen(xl) {
+                color: white;
+              }
             }
             .top-menu__title {
-                width: 100%;
-                margin-left: theme("spacing.3");
-                display: flex;
-                align-items: center;
-                white-space: nowrap;
-                z-index: 10;
-                .top-menu__sub-icon {
-                    transition-property: theme("transitionProperty.DEFAULT");
-                    transition-timing-function: theme(
-                        "transitionTimingFunction.in"
-                    );
-                    transition-duration: theme("transitionDuration.100");
-                    width: theme("spacing.4");
-                    height: theme("spacing.4");
-                    display: none;
-                    @media screen(xl) {
-                        display: block;
-                    }
-                }
+              font-weight: theme('fontWeight.medium');
+              color: theme('colors.slate.800');
+              @media screen(xl) {
+                color: white;
+              }
+            }
+          }
+          .top-menu__icon {
+            margin-top: -3px;
+          }
+          .top-menu__title {
+            margin-top: -3px;
+            .top-menu__sub-icon {
+              margin-left: theme('spacing.3');
             }
+          }
         }
         & > ul {
-            @for $i from 1 through 50 {
-                > li:nth-child($i) {
-                    & > a {
-                        &:not(.top-menu--active) {
-                            opacity: 0;
-                            transform: translateY(50px);
-                            animation: 0.4s
-                                intro-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
+          box-shadow: 0px 3px 20px #0000000b;
+          background-color: theme('colors.theme.1');
+          display: none;
+          width: theme('spacing.56');
+          position: absolute;
+          border-radius: theme('borderRadius.md');
+          z-index: 20;
+          padding-left: 0;
+          padding-right: 0;
+          margin-top: theme('spacing.1');
+          &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: theme('colors.white' / 4%);
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: theme('borderRadius.md');
+            z-index: -1;
+          }
+          &:after {
+            content: '';
+            width: 100%;
+            height: theme('spacing.1');
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin-top: calc(theme('spacing.1') * -1);
+            cursor: pointer;
+          }
+          & > li {
+            /* Second level */
+            padding-left: theme('spacing.5');
+            padding-right: theme('spacing.5');
+            position: relative;
+            &:hover {
+              position: relative;
+              & > .top-menu {
+                .top-menu__title {
+                  .top-menu__sub-icon {
+                    transform: rotate(-90deg);
+                  }
                 }
+              }
+              & > ul {
+                display: block;
+              }
             }
-            & > li {
-                /* First level */
-                &:hover {
-                    position: relative;
-                    & > .top-menu {
-                        background: theme("colors.theme.1"/ 60%);
-                        &:before {
-                            content: "";
-                            display: block;
-                            top: 0;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            background-color: theme("colors.white" / 4%);
-                            border-radius: theme("borderRadius.full");
-                            position: absolute;
-                            z-index: -1;
-                            @media screen(xl) {
-                                background-color: theme("colors.white" / 10%);
-                                border-radius: theme("borderRadius.lg");
-                            }
-                        }
-                        .top-menu__title {
-                            .top-menu__sub-icon {
-                                transform: rotate(180deg);
-                            }
-                        }
-                    }
-                    & > ul {
-                        display: block;
-                    }
+            & > .top-menu {
+              padding-left: 0;
+              padding-right: 0;
+              margin-right: 0;
+              .top-menu__title {
+                width: 100%;
+                .top-menu__sub-icon {
+                  margin-left: auto;
                 }
+              }
+            }
+            & > ul {
+              box-shadow: 0px 3px 20px #0000000b;
+              left: 100%;
+              background-color: theme('colors.theme.1');
+              display: none;
+              border-radius: theme('borderRadius.md');
+              margin-top: 0;
+              margin-left: 0;
+              top: 0;
+              width: theme('spacing.56');
+              position: absolute;
+              z-index: 20;
+              padding-left: 0;
+              padding-right: 0;
+              &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background-color: theme('colors.white' / 4%);
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: theme('borderRadius.md');
+                z-index: -1;
+              }
+              & > li {
+                /* Third level */
+                padding-left: theme('spacing.5');
+                padding-right: theme('spacing.5');
                 & > .top-menu {
-                    margin-top: 3px;
-                    &.top-menu--active {
-                        background-color: theme("colors.slate.100");
-                        @media screen(xl) {
-                            background-color: theme("colors.theme.1");
-                        }
-                        &:before {
-                            content: "";
-                            display: none;
-                            top: 0;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            background-color: theme("colors.white" / 8%);
-                            border-radius: theme("borderRadius.lg");
-                            position: absolute;
-                            border-bottom: 3px solid theme("colors.black" / 10%);
-                            @media screen(xl) {
-                                display: block;
-                            }
-                        }
-                        &:after {
-                            content: "";
-                            animation: 0.3s ease-in-out 1s
-                                active-top-menu-chevron;
-                            animation-fill-mode: forwards;
-                            display: none;
-                            width: 20px;
-                            height: 80px;
-                            margin-bottom: -74px;
-                            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
-                            background-repeat: no-repeat;
-                            background-size: cover;
-                            position: absolute;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            margin-left: auto;
-                            margin-right: auto;
-                            transform: rotate(90deg);
-                            opacity: 0;
-                            @media screen(xl) {
-                                display: block;
-                            }
-                        }
-                        .top-menu__icon {
-                            color: theme("colors.theme.1");
-                            @media screen(xl) {
-                                color: white;
-                            }
-                        }
-                        .top-menu__title {
-                            font-weight: theme("fontWeight.medium");
-                            color: theme("colors.slate.800");
-                            @media screen(xl) {
-                                color: white;
-                            }
-                        }
-                    }
-                    .top-menu__icon {
-                        margin-top: -3px;
-                    }
-                    .top-menu__title {
-                        margin-top: -3px;
-                        .top-menu__sub-icon {
-                            margin-left: theme("spacing.2");
-                        }
-                    }
-                }
-                & > ul {
-                    box-shadow: 0px 3px 20px #0000000b;
-                    background-color: theme("colors.theme.1");
-                    display: none;
-                    width: theme("spacing.56");
-                    position: absolute;
-                    border-radius: theme("borderRadius.md");
-                    z-index: 20;
-                    padding-left: 0;
-                    padding-right: 0;
-                    margin-top: theme("spacing.1");
-                    &:before {
-                        content: "";
-                        display: block;
-                        position: absolute;
-                        width: 100%;
-                        height: 100%;
-                        background-color: theme("colors.white" / 4%);
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        border-radius: theme("borderRadius.md");
-                        z-index: -1;
-                    }
-                    &:after {
-                        content: "";
-                        width: 100%;
-                        height: theme("spacing.1");
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        margin-top: calc(theme("spacing.1") * -1);
-                        cursor: pointer;
-                    }
-                    & > li {
-                        /* Second level */
-                        padding-left: theme("spacing.5");
-                        padding-right: theme("spacing.5");
-                        position: relative;
-                        &:hover {
-                            position: relative;
-                            & > .top-menu {
-                                .top-menu__title {
-                                    .top-menu__sub-icon {
-                                        transform: rotate(-90deg);
-                                    }
-                                }
-                            }
-                            & > ul {
-                                display: block;
-                            }
-                        }
-                        & > .top-menu {
-                            padding-left: 0;
-                            padding-right: 0;
-                            margin-right: 0;
-                            .top-menu__title {
-                                width: 100%;
-                                .top-menu__sub-icon {
-                                    margin-left: auto;
-                                }
-                            }
-                        }
-                        & > ul {
-                            box-shadow: 0px 3px 20px #0000000b;
-                            left: 100%;
-                            background-color: theme("colors.theme.1");
-                            display: none;
-                            border-radius: theme("borderRadius.md");
-                            margin-top: 0;
-                            margin-left: 0;
-                            top: 0;
-                            width: theme("spacing.56");
-                            position: absolute;
-                            z-index: 20;
-                            padding-left: 0;
-                            padding-right: 0;
-                            &:before {
-                                content: "";
-                                display: block;
-                                position: absolute;
-                                width: 100%;
-                                height: 100%;
-                                background-color: theme("colors.white" / 4%);
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                border-radius: theme("borderRadius.md");
-                                z-index: -1;
-                            }
-                            & > li {
-                                /* Third level */
-                                padding-left: theme("spacing.5");
-                                padding-right: theme("spacing.5");
-                                & > .top-menu {
-                                    padding-left: 0;
-                                    padding-right: 0;
-                                    margin-right: 0;
-                                    .top-menu__title {
-                                        width: 100%;
-                                        .top-menu__sub-icon {
-                                            margin-left: auto;
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                  padding-left: 0;
+                  padding-right: 0;
+                  margin-right: 0;
+                  .top-menu__title {
+                    width: 100%;
+                    .top-menu__sub-icon {
+                      margin-left: auto;
                     }
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
 @keyframes active-top-menu-chevron {
-    100% {
-        opacity: 1;
-        margin-bottom: -54px;
-    }
+  100% {
+    opacity: 1;
+    margin-bottom: -54px;
+  }
 }
 
 @keyframes intro-wrapper {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 @keyframes intro-top-menu {
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
 
 @keyframes intro-menu-animation {
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
 
 .dark {
-    .icewall {
-        &:before {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(0,0,0,0.06)'/%3E%3C/svg%3E%0A");
+  .icewall {
+    &:before {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920.004' height='1193.001' viewBox='0 0 1920.004 1193.001'%3E%3Cpath id='Intersection_13' data-name='Intersection 13' d='M1183.231,1554.011,2050,361.011h346.311V1440.1l-82.762,113.912Zm-706.924-1193H918.725L476.308,969.945Z' transform='translate(-476.307 -361.011)' fill='rgba(0,0,0,0.06)'/%3E%3C/svg%3E%0A");
+    }
+    .top-nav {
+      .top-menu {
+        .top-menu__icon {
+          color: theme('colors.slate.400');
         }
-        .top-nav {
-            .top-menu {
-                .top-menu__icon {
-                    color: theme("colors.slate.400");
-                }
-                .top-menu__title {
-                    color: theme("colors.slate.400");
+        .top-menu__title {
+          color: theme('colors.slate.400');
+        }
+      }
+      & > ul {
+        & > li {
+          /* First level */
+          &:hover {
+            & > .top-menu {
+              &:not(.top-menu--active) {
+                background-color: transparent;
+                &:before {
+                  background-color: theme('colors.darkmode.700');
                 }
+              }
             }
-            & > ul {
-                & > li {
-                    /* First level */
-                    &:hover {
-                        & > .top-menu {
-                            &:not(.top-menu--active) {
-                                background-color: transparent;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.700"
-                                    );
-                                }
-                            }
-                        }
-                    }
-                    & > .top-menu {
-                        &.top-menu--active {
-                            background-color: theme("colors.darkmode.700");
-                            &:before {
-                                background-color: theme("colors.darkmode.700");
-                            }
-                            &:after {
-                                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E");
-                            }
-                            .top-menu__icon {
-                                color: theme("colors.white");
-                            }
-                            .top-menu__title {
-                                color: theme("colors.white");
-                            }
-                        }
-                    }
-                    & > ul {
-                        background-color: theme("colors.darkmode.600");
-                        box-shadow: 0px 3px 7px #0000001c;
-                        &:before {
-                            background-color: theme("colors.black" / 10%);
-                        }
-                        & > li {
-                            /* Second level */
-                            & > ul {
-                                background-color: theme("colors.darkmode.600");
-                                box-shadow: 0px 3px 7px #0000001c;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.black" / 10%
-                                    );
-                                }
-                            }
-                        }
-                    }
+          }
+          & > .top-menu {
+            &.top-menu--active {
+              background-color: theme('colors.darkmode.700');
+              &:before {
+                background-color: theme('colors.darkmode.700');
+              }
+              &:after {
+                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23232e45'/%3E%3C/svg%3E");
+              }
+              .top-menu__icon {
+                color: theme('colors.white');
+              }
+              .top-menu__title {
+                color: theme('colors.white');
+              }
+            }
+          }
+          & > ul {
+            background-color: theme('colors.darkmode.600');
+            box-shadow: 0px 3px 7px #0000001c;
+            &:before {
+              background-color: theme('colors.black' / 10%);
+            }
+            & > li {
+              /* Second level */
+              & > ul {
+                background-color: theme('colors.darkmode.600');
+                box-shadow: 0px 3px 7px #0000001c;
+                &:before {
+                  background-color: theme('colors.black' / 10%);
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/themes/rubick/side-nav.css b/web/src/assets/css/themes/rubick/side-nav.css
index 6be8e2876..450096039 100644
--- a/web/src/assets/css/themes/rubick/side-nav.css
+++ b/web/src/assets/css/themes/rubick/side-nav.css
@@ -1,316 +1,303 @@
-@import "@left4code/tw-starter/dist/css/mixins/_media.css";
+@import '@left4code/tw-starter/dist/css/mixins/_media.css';
 
 .rubick {
-    .side-nav {
-        width: 230px;
-        padding-right: theme("spacing.5");
-        padding-bottom: theme("spacing.16");
-        overflow-x: hidden;
-        @include media-breakpoint-down(xl) {
-            width: 85px;
+  .side-nav {
+    width: 230px;
+    padding-right: theme('spacing.5');
+    padding-bottom: theme('spacing.16');
+    overflow-x: hidden;
+    @include media-breakpoint-down(xl) {
+      width: 85px;
+    }
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+    &.side-nav--simple {
+      width: 85px;
+      .side-menu {
+        .side-menu__title {
+          display: none;
+          .side-menu__sub-icon {
+            display: none;
+          }
+        }
+        &:not(.side-menu--active) .side-menu__icon:before {
+          display: none;
         }
-        @include media-breakpoint-down(md) {
+      }
+    }
+    .side-nav__divider {
+      width: 100%;
+      height: 1px;
+      background: theme('colors.white' / 8%);
+      z-index: 10;
+      position: relative;
+    }
+    .side-menu {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      padding-left: theme('spacing.5');
+      color: white;
+      margin-bottom: theme('spacing.1');
+      position: relative;
+      border-radius: theme('borderRadius.full');
+      .side-menu__title {
+        width: 100%;
+        margin-left: theme('spacing.3');
+        display: flex;
+        align-items: center;
+        .side-menu__sub-icon {
+          margin-left: auto;
+          margin-right: theme('spacing.5');
+          transition-property: theme('transitionProperty.DEFAULT');
+          transition-timing-function: theme('transitionTimingFunction.in');
+          transition-duration: theme('transitionDelay.100');
+          svg {
+            width: theme('spacing.4');
+            height: theme('spacing.4');
+          }
+          @include media-breakpoint-down(xl) {
             display: none;
+          }
         }
-        &.side-nav--simple {
-            width: 85px;
-            .side-menu {
-                .side-menu__title {
-                    display: none;
-                    .side-menu__sub-icon {
-                        display: none;
-                    }
-                }
-                &:not(.side-menu--active) .side-menu__icon:before {
-                    display: none;
-                }
+        @include media-breakpoint-down(xl) {
+          display: none;
+        }
+      }
+    }
+    > ul {
+      @for $i from 1 through 50 {
+        > li:nth-child($i) {
+          &.side-nav__divider {
+            opacity: 0;
+            animation: 0.4s intro-divider-animation ease-in-out 0.33333s;
+            animation-fill-mode: forwards;
+            animation-delay: calc($i * 0.1s);
+          }
+          & > a {
+            &:not(.side-menu--active) {
+              opacity: 0;
+              transform: translateX(50px);
+              animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
+            }
+            &.side-menu--active {
+              animation: 0.4s intro-active-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+            }
+          }
+        }
+      }
+      ul {
+        @for $i from 1 through 50 {
+          li:nth-child($i) {
+            & > a {
+              opacity: 0;
+              transform: translateX(50px);
+              animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
             }
+          }
         }
-        .side-nav__divider {
-            width: 100%;
-            height: 1px;
-            background: theme("colors.white" / 8%);
-            z-index: 10;
-            position: relative;
+        display: none;
+        background-color: theme('colors.black' / 10%);
+        border-radius: theme('borderRadius.lg');
+        &.side-menu__sub-open {
+          display: block;
         }
-        .side-menu {
-            height: 50px;
-            display: flex;
-            align-items: center;
-            padding-left: theme("spacing.5");
-            color: white;
-            margin-bottom: theme("spacing.1");
-            position: relative;
-            border-radius: theme("borderRadius.full");
-            .side-menu__title {
-                width: 100%;
-                margin-left: theme("spacing.3");
-                display: flex;
-                align-items: center;
-                .side-menu__sub-icon {
-                    margin-left: auto;
-                    margin-right: theme("spacing.5");
-                    transition-property: theme("transitionProperty.DEFAULT");
-                    transition-timing-function: theme(
-                        "transitionTimingFunction.in"
-                    );
-                    transition-duration: theme("transitionDelay.100");
-                    svg {
-                        width: theme("spacing.4");
-                        height: theme("spacing.4");
-                    }
-                    @include media-breakpoint-down(xl) {
-                        display: none;
-                    }
-                }
-                @include media-breakpoint-down(xl) {
-                    display: none;
+        .side-menu__icon:before {
+          display: none;
+        }
+        li a {
+          &:not(.side-menu--active) {
+            color: theme('colors.white' / 70%);
+          }
+          &.side-menu--active .side-menu__title {
+            font-weight: theme('fontWeight.medium');
+          }
+        }
+        ul {
+          display: none;
+          background: theme('colors.black' / 10%);
+          border-radius: theme('borderRadius.lg');
+        }
+      }
+      & > li {
+        & > ul {
+          & > li {
+            & > ul {
+              & > li {
+                & > .side-menu {
+                  padding-left: theme('spacing.10');
                 }
+              }
             }
+          }
         }
-        > ul {
-            @for $i from 1 through 50 {
-                > li:nth-child($i) {
-                    &.side-nav__divider {
-                        opacity: 0;
-                        animation: 0.4s
-                            intro-divider-animation
-                            ease-in-out
-                            0.33333s;
-                        animation-fill-mode: forwards;
-                        animation-delay: calc($i * 0.1s);
-                    }
-                    & > a {
-                        &:not(.side-menu--active) {
-                            opacity: 0;
-                            transform: translateX(50px);
-                            animation: 0.4s
-                                intro-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                        &.side-menu--active {
-                            animation: 0.4s
-                                intro-active-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                        }
-                    }
-                }
+        & > .side-menu {
+          &.side-menu--active {
+            background-color: theme('colors.slate.100');
+            &:before {
+              content: '';
+              width: 30px;
+              height: 30px;
+              margin-top: -30px;
+              transform: rotate(90deg) scale(1.04);
+              background-size: 100%;
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");
+              position: absolute;
+              top: 0;
+              right: 0;
+              margin-right: calc(theme('spacing.5') * -1);
             }
-            ul {
-                @for $i from 1 through 50 {
-                    li:nth-child($i) {
-                        & > a {
-                            opacity: 0;
-                            transform: translateX(50px);
-                            animation: 0.2s
-                                intro-submenu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
-                }
-                display: none;
-                background-color: theme("colors.black" / 10%);
-                border-radius: theme("borderRadius.lg");
-                &.side-menu__sub-open {
-                    display: block;
-                }
-                .side-menu__icon:before {
-                    display: none;
-                }
-                li a {
-                    &:not(.side-menu--active) {
-                        color: theme("colors.white" / 70%);
-                    }
-                    &.side-menu--active .side-menu__title {
-                        font-weight: theme("fontWeight.medium");
-                    }
-                }
-                ul {
-                    display: none;
-                    background: theme("colors.black" / 10%);
-                    border-radius: theme("borderRadius.lg");
-                }
+            &:after {
+              content: '';
+              width: 30px;
+              height: 30px;
+              margin-top: 50px;
+              transform: scale(1.04);
+              background-size: 100%;
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");
+              position: absolute;
+              top: 0;
+              right: 0;
+              margin-right: calc(theme('spacing.5') * -1);
             }
-            & > li {
-                & > .side-menu {
-                    &.side-menu--active {
-                        background-color: theme("colors.slate.100");
-                        &:before {
-                            content: "";
-                            width: 30px;
-                            height: 30px;
-                            margin-top: -30px;
-                            transform: rotate(90deg) scale(1.04);
-                            background-size: 100%;
-                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");
-                            position: absolute;
-                            top: 0;
-                            right: 0;
-                            margin-right: calc(theme("spacing.5") * -1);
-                        }
-                        &:after {
-                            content: "";
-                            width: 30px;
-                            height: 30px;
-                            margin-top: 50px;
-                            transform: scale(1.04);
-                            background-size: 100%;
-                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");
-                            position: absolute;
-                            top: 0;
-                            right: 0;
-                            margin-right: calc(theme("spacing.5") * -1);
-                        }
-                        .side-menu__icon {
-                            color: theme("colors.theme.1");
-                            &:before {
-                                content: "";
-                                z-index: -1;
-                                position: absolute;
-                                top: 0;
-                                right: 0;
-                                margin-right: calc(theme("spacing.5") * -1);
-                                width: theme("spacing.12");
-                                height: 100%;
-                                background-color: theme("colors.slate.100");
-                            }
-                        }
-                        .side-menu__title {
-                            color: theme("colors.slate.800");
-                            font-weight: theme("fontWeight.medium");
-                        }
-                    }
-                    &:not(.side-menu--active) .side-menu__icon:before {
-                        content: "";
-                        z-index: -1;
-                        width: 230px;
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        height: 100%;
-                        border-top-left-radius: theme("borderRadius.full");
-                        border-bottom-left-radius: theme("borderRadius.full");
-                        transition-property: theme(
-                            "transitionProperty.DEFAULT"
-                        );
-                        transition-timing-function: theme(
-                            "transitionTimingFunction.in"
-                        );
-                        transition-duration: theme("transitionDelay.100");
-                        @include media-breakpoint-down(xl) {
-                            display: none;
-                        }
-                    }
-                    &:hover:not(.side-menu--active):not(.side-menu--open)
-                        .side-menu__icon:before {
-                        background-color: theme("colors.white" / 5%);
-                    }
-                }
+            .side-menu__icon {
+              color: theme('colors.theme.1');
+              &:before {
+                content: '';
+                z-index: -1;
+                position: absolute;
+                top: 0;
+                right: 0;
+                margin-right: calc(theme('spacing.5') * -1);
+                width: theme('spacing.12');
+                height: 100%;
+                background-color: theme('colors.slate.100');
+              }
             }
+            .side-menu__title {
+              color: theme('colors.slate.800');
+              font-weight: theme('fontWeight.medium');
+            }
+          }
+          &:not(.side-menu--active) .side-menu__icon:before {
+            content: '';
+            z-index: -1;
+            width: 230px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            border-top-left-radius: theme('borderRadius.full');
+            border-bottom-left-radius: theme('borderRadius.full');
+            transition-property: theme('transitionProperty.DEFAULT');
+            transition-timing-function: theme('transitionTimingFunction.in');
+            transition-duration: theme('transitionDelay.100');
+            @include media-breakpoint-down(xl) {
+              display: none;
+            }
+          }
+          &:hover:not(.side-menu--active):not(.side-menu--open) .side-menu__icon:before {
+            background-color: theme('colors.white' / 5%);
+          }
         }
+      }
     }
+  }
 }
 
 @keyframes intro-divider-animation {
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes intro-menu-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 @keyframes intro-submenu-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 @keyframes intro-active-menu-animation {
-    100% {
-        z-index: 10;
-    }
+  100% {
+    z-index: 10;
+  }
 }
 
 .dark {
-    .rubick {
-        .side-nav {
-            .side-nav__divider {
-                background-color: theme("colors.white" / 7%);
-            }
-            .side-menu {
-                color: theme("colors.slate.300");
+  .rubick {
+    .side-nav {
+      .side-nav__divider {
+        background-color: theme('colors.white' / 7%);
+      }
+      .side-menu {
+        color: theme('colors.slate.300');
+      }
+      > ul {
+        ul {
+          background-color: theme('colors.darkmode.900' / 30%);
+          li a {
+            &:not(.side-menu--active) {
+              color: theme('colors.slate.400');
             }
-            > ul {
-                ul {
-                    background-color: theme("colors.darkmode.900" / 30%);
-                    li a {
-                        &:not(.side-menu--active) {
-                            color: theme("colors.slate.400");
-                        }
-                    }
-                    ul {
-                        background: theme("colors.darkmode.900" / 30%);
-                    }
-                }
-                & > li {
-                    & > .side-menu {
-                        &.side-menu--active {
-                            background-color: theme("colors.darkmode.700");
-                            .side-menu__icon {
-                                color: theme("colors.slate.300");
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.700"
-                                    );
-                                }
-                            }
-                            .side-menu__title {
-                                color: theme("colors.slate.300");
-                            }
-                        }
-                        .side-menu__icon {
-                            color: theme("colors.slate.400");
-                        }
-                        .side-menu__title {
-                            color: theme("colors.slate.400");
-                        }
-                        &:hover:not(.side-menu--active):not(.side-menu--open)
-                            .side-menu__icon:before {
-                            background-color: theme(
-                                "colors.darkmode.500" / 70%
-                            );
-                        }
-                    }
+          }
+          ul {
+            background: theme('colors.darkmode.900' / 30%);
+          }
+        }
+        & > li {
+          & > .side-menu {
+            &.side-menu--active {
+              background-color: theme('colors.darkmode.700');
+              .side-menu__icon {
+                color: theme('colors.slate.300');
+                &:before {
+                  background-color: theme('colors.darkmode.700');
                 }
+              }
+              .side-menu__title {
+                color: theme('colors.slate.300');
+              }
             }
-            > ul {
-                & > li {
-                    & > .side-menu {
-                        &.side-menu--active {
-                            &:before {
-                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A");
-                            }
-                            &:after {
-                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A");
-                            }
-                        }
-                    }
-                }
+            .side-menu__icon {
+              color: theme('colors.slate.400');
+            }
+            .side-menu__title {
+              color: theme('colors.slate.400');
+            }
+            &:hover:not(.side-menu--active):not(.side-menu--open) .side-menu__icon:before {
+              background-color: theme('colors.darkmode.500' / 70%);
+            }
+          }
+        }
+      }
+      > ul {
+        & > li {
+          & > .side-menu {
+            &.side-menu--active {
+              &:before {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A");
+              }
+              &:after {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A");
+              }
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/themes/rubick/top-nav.css b/web/src/assets/css/themes/rubick/top-nav.css
index 98e5bfc1c..74f049895 100644
--- a/web/src/assets/css/themes/rubick/top-nav.css
+++ b/web/src/assets/css/themes/rubick/top-nav.css
@@ -1,330 +1,345 @@
-@import "@left4code/tw-starter/dist/css/mixins/_media.css";
+@import '@left4code/tw-starter/dist/css/mixins/_media.css';
 
 .rubick {
-    .top-nav {
-        .top-menu {
-            height: 55px;
-            border-radius: theme("borderRadius.full");
-            display: flex;
-            align-items: center;
-            color: white;
-            position: relative;
+  .top-nav {
+    .top-menu {
+      min-height: 55px;
+      height: auto;
+      border-radius: theme('borderRadius.full');
+      display: flex;
+      align-items: center;
+      padding-top: theme('spacing.3');
+      padding-bottom: theme('spacing.3');
+      color: white;
+      position: relative;
+      @media screen(xl) {
+        border-top-left-radius: theme('borderRadius.2xl');
+        border-top-right-radius: theme('borderRadius.2xl');
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:not(.top-menu--active) {
+        .top-menu__icon {
+          &:before {
+            content: '';
+            z-index: -1;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            border-radius: theme('borderRadius.full');
             @media screen(xl) {
-                border-top-left-radius: theme("borderRadius.2xl");
-                border-top-right-radius: theme("borderRadius.2xl");
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
+              border-bottom-left-radius: 0;
+              border-bottom-right-radius: 0;
+              border-top-left-radius: theme('borderRadius.2xl');
+              border-top-right-radius: theme('borderRadius.2xl');
+              transition-property: theme('transitionProperty.DEFAULT');
+              transition-timing-function: theme('transitionTimingFunction.in');
+              transition-duration: theme('transitionDuration.100');
             }
+          }
+        }
+      }
+      .top-menu__title {
+        min-width: 0;
+        margin-left: theme('spacing.3');
+        display: flex;
+        align-items: flex-start;
+        .top-menu__title-text {
+          flex: 1 1 auto;
+          min-width: 0;
+          white-space: normal;
+          line-height: theme('lineHeight.5');
+          word-break: break-word;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .top-menu__sub-icon {
+          transition-property: theme('transitionProperty.DEFAULT');
+          transition-timing-function: theme('transitionTimingFunction.in');
+          transition-duration: theme('transitionDuration.100');
+          flex-shrink: 0;
+          width: theme('spacing.4');
+          height: theme('spacing.4');
+          display: none;
+          @media screen(xl) {
+            display: block;
+          }
+        }
+      }
+    }
+    & > ul {
+      @for $i from 1 through 50 {
+        > li:nth-child($i) {
+          & > a {
             &:not(.top-menu--active) {
-                .top-menu__icon {
-                    &:before {
-                        content: "";
-                        z-index: -1;
-                        position: absolute;
-                        width: 100%;
-                        height: 100%;
-                        top: 0;
-                        left: 0;
-                        border-radius: theme("borderRadius.full");
-                        @media screen(xl) {
-                            border-bottom-left-radius: 0;
-                            border-bottom-right-radius: 0;
-                            border-top-left-radius: theme("borderRadius.2xl");
-                            border-top-right-radius: theme("borderRadius.2xl");
-                            transition-property: theme(
-                                "transitionProperty.DEFAULT"
-                            );
-                            transition-timing-function: theme(
-                                "transitionTimingFunction.in"
-                            );
-                            transition-duration: theme(
-                                "transitionDuration.100"
-                            );
-                        }
-                    }
-                }
+              opacity: 0;
+              transform: translateY(50px);
+              animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
             }
+          }
+        }
+      }
+      & > li {
+        /* First level */
+        &:hover {
+          position: relative;
+          & > .top-menu {
             .top-menu__title {
-                margin-left: theme("spacing.3");
-                display: flex;
-                align-items: center;
-                white-space: nowrap;
-                .top-menu__sub-icon {
-                    transition-property: theme("transitionProperty.DEFAULT");
-                    transition-timing-function: theme(
-                        "transitionTimingFunction.in"
-                    );
-                    transition-duration: theme("transitionDuration.100");
-                    width: theme("spacing.4");
-                    height: theme("spacing.4");
-                    display: none;
-                    @media screen(xl) {
-                        display: block;
-                    }
+              .top-menu__sub-icon {
+                transform: rotate(-90deg);
+              }
+            }
+            &:not(.top-menu--active) {
+              .top-menu__icon {
+                &:before {
+                  background: theme('colors.white'/ 5%);
                 }
+              }
+            }
+          }
+          & > ul {
+            display: block;
+          }
+        }
+        & > .top-menu {
+          padding-left: theme('spacing.5');
+          padding-right: theme('spacing.5');
+          margin-right: theme('spacing.1');
+          max-width: theme('spacing.48');
+          &.top-menu--active {
+            z-index: 10;
+            background-color: theme('colors.slate.100');
+            &:before {
+              content: '';
+              width: 20px;
+              height: 20px;
+              margin-left: -20px;
+              transform: rotate(90deg) scale(1.04);
+              background-size: 100%;
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              display: none;
+              @media screen(xl) {
+                display: block;
+              }
+            }
+            &:after {
+              content: '';
+              width: 20px;
+              height: 20px;
+              margin-right: -20px;
+              transform: rotate(180deg) scale(1.04);
+              background-size: 100%;
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              display: none;
+              @media screen(xl) {
+                display: block;
+              }
+            }
+            .top-menu__icon {
+              color: theme('colors.theme.1');
             }
+            .top-menu__title {
+              color: black;
+              font-weight: theme('fontWeight.medium');
+            }
+          }
+          .top-menu__title {
+            .top-menu__sub-icon {
+              margin-left: theme('spacing.3');
+            }
+          }
         }
         & > ul {
-            @for $i from 1 through 50 {
-                > li:nth-child($i) {
-                    & > a {
-                        &:not(.top-menu--active) {
-                            opacity: 0;
-                            transform: translateY(50px);
-                            animation: 0.4s
-                                intro-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
+          box-shadow: 0px 3px 20px #0000000b;
+          background-color: theme('colors.theme.1');
+          display: none;
+          width: max-content;
+          min-width: theme('spacing.56');
+          max-width: min(24rem, calc(100vw - theme('spacing.8')));
+          position: absolute;
+          border-radius: theme('borderRadius.md');
+          z-index: 20;
+          padding-left: 0;
+          padding-right: 0;
+          top: 0;
+          margin-top: theme('spacing.14');
+          &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: theme('colors.black' / 10%);
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: theme('borderRadius.md');
+            z-index: -1;
+          }
+          @media screen(xl) {
+            left: 100%;
+            margin-left: -4px;
+            margin-top: calc(theme('spacing.5') * -1);
+          }
+          & > li {
+            /* Second level */
+            padding-left: theme('spacing.5');
+            padding-right: theme('spacing.5');
+            position: relative;
+            &:hover {
+              position: relative;
+              & > .top-menu {
+                .top-menu__title {
+                  .top-menu__sub-icon {
+                    transform: rotate(-90deg);
+                  }
                 }
+              }
+              & > ul {
+                display: block;
+              }
             }
-            & > li {
-                /* First level */
-                &:hover {
-                    position: relative;
-                    & > .top-menu {
-                        .top-menu__title {
-                            .top-menu__sub-icon {
-                                transform: rotate(-90deg);
-                            }
-                        }
-                        &:not(.top-menu--active) {
-                            .top-menu__icon {
-                                &:before {
-                                    background: theme("colors.white"/ 5%);
-                                }
-                            }
-                        }
-                    }
-                    & > ul {
-                        display: block;
-                    }
+            & > .top-menu {
+              .top-menu__title {
+                width: 100%;
+                min-width: 0;
+                white-space: normal;
+                line-height: theme('lineHeight.5');
+                .top-menu__sub-icon {
+                  margin-left: auto;
+                  flex-shrink: 0;
                 }
+              }
+            }
+            & > ul {
+              left: 100%;
+              margin-left: 0;
+              box-shadow: 0px 3px 20px #0000000b;
+              background-color: theme('colors.theme.1');
+              display: none;
+              width: max-content;
+              min-width: theme('spacing.56');
+              max-width: min(24rem, calc(100vw - theme('spacing.8')));
+              position: absolute;
+              border-radius: theme('borderRadius.md');
+              z-index: 20;
+              padding-left: 0;
+              padding-right: 0;
+              top: 0;
+              margin-top: 0;
+              &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background-color: theme('colors.black' / 10%);
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: theme('borderRadius.md');
+                z-index: -1;
+              }
+              & > li {
+                /* Third level */
+                padding-left: theme('spacing.5');
+                padding-right: theme('spacing.5');
                 & > .top-menu {
-                    padding-left: theme("spacing.5");
-                    padding-right: theme("spacing.5");
-                    margin-right: theme("spacing.1");
-                    &.top-menu--active {
-                        z-index: 10;
-                        background-color: theme("colors.slate.100");
-                        &:before {
-                            content: "";
-                            width: 20px;
-                            height: 20px;
-                            margin-left: -20px;
-                            transform: rotate(90deg) scale(1.04);
-                            background-size: 100%;
-                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            display: none;
-                            @media screen(xl) {
-                                display: block;
-                            }
-                        }
-                        &:after {
-                            content: "";
-                            width: 20px;
-                            height: 20px;
-                            margin-right: -20px;
-                            transform: rotate(180deg) scale(1.04);
-                            background-size: 100%;
-                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23f1f5f8'/%3E%3C/svg%3E%0A");
-                            position: absolute;
-                            bottom: 0;
-                            right: 0;
-                            display: none;
-                            @media screen(xl) {
-                                display: block;
-                            }
-                        }
-                        .top-menu__icon {
-                            color: theme("colors.theme.1");
-                        }
-                        .top-menu__title {
-                            color: black;
-                            font-weight: theme("fontWeight.medium");
-                        }
-                    }
-                    .top-menu__title {
-                        .top-menu__sub-icon {
-                            margin-left: theme("spacing.2");
-                        }
-                    }
-                }
-                & > ul {
-                    box-shadow: 0px 3px 20px #0000000b;
-                    background-color: theme("colors.theme.1");
-                    display: none;
-                    width: theme("spacing.56");
-                    position: absolute;
-                    border-radius: theme("borderRadius.md");
-                    z-index: 20;
-                    padding-left: 0;
-                    padding-right: 0;
-                    top: 0;
-                    margin-top: theme("spacing.14");
-                    &:before {
-                        content: "";
-                        display: block;
-                        position: absolute;
-                        width: 100%;
-                        height: 100%;
-                        background-color: theme("colors.black" / 10%);
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        border-radius: theme("borderRadius.md");
-                        z-index: -1;
-                    }
-                    @media screen(xl) {
-                        left: 100%;
-                        margin-left: -4px;
-                        margin-top: calc(theme("spacing.5") * -1);
-                    }
-                    & > li {
-                        /* Second level */
-                        padding-left: theme("spacing.5");
-                        padding-right: theme("spacing.5");
-                        position: relative;
-                        &:hover {
-                            position: relative;
-                            & > .top-menu {
-                                .top-menu__title {
-                                    .top-menu__sub-icon {
-                                        transform: rotate(-90deg);
-                                    }
-                                }
-                            }
-                            & > ul {
-                                display: block;
-                            }
-                        }
-                        & > .top-menu {
-                            .top-menu__title {
-                                width: 100%;
-                                .top-menu__sub-icon {
-                                    margin-left: auto;
-                                }
-                            }
-                        }
-                        & > ul {
-                            left: 100%;
-                            margin-left: 0;
-                            box-shadow: 0px 3px 20px #0000000b;
-                            background-color: theme("colors.theme.1");
-                            display: none;
-                            width: theme("spacing.56");
-                            position: absolute;
-                            border-radius: theme("borderRadius.md");
-                            z-index: 20;
-                            padding-left: 0;
-                            padding-right: 0;
-                            top: 0;
-                            margin-top: 0;
-                            &:before {
-                                content: "";
-                                display: block;
-                                position: absolute;
-                                width: 100%;
-                                height: 100%;
-                                background-color: theme("colors.black" / 10%);
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                border-radius: theme("borderRadius.md");
-                                z-index: -1;
-                            }
-                            & > li {
-                                /* Third level */
-                                padding-left: theme("spacing.5");
-                                padding-right: theme("spacing.5");
-                                & > .top-menu {
-                                    .top-menu__title {
-                                        width: 100%;
-                                        .top-menu__sub-icon {
-                                            margin-left: auto;
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                  .top-menu__title {
+                    width: 100%;
+                    min-width: 0;
+                    white-space: normal;
+                    line-height: theme('lineHeight.5');
+                    .top-menu__sub-icon {
+                      margin-left: auto;
+                      flex-shrink: 0;
                     }
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
 @keyframes intro-menu-animation {
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
 
 .dark {
-    .rubick {
-        .top-nav {
-            .top-menu {
-                .top-menu__title {
-                    color: theme("colors.slate.400");
-                }
+  .rubick {
+    .top-nav {
+      .top-menu {
+        .top-menu__title {
+          color: theme('colors.slate.400');
+        }
+        .top-menu__icon {
+          color: theme('colors.slate.400');
+        }
+      }
+      & > ul {
+        & > li {
+          /* First level */
+          &:hover {
+            & > .top-menu {
+              &:not(.top-menu--active) {
                 .top-menu__icon {
-                    color: theme("colors.slate.400");
+                  &:before {
+                    background: theme('colors.darkmode.500'/ 70%);
+                  }
                 }
+              }
             }
-            & > ul {
-                & > li {
-                    /* First level */
-                    &:hover {
-                        & > .top-menu {
-                            &:not(.top-menu--active) {
-                                .top-menu__icon {
-                                    &:before {
-                                        background: theme(
-                                            "colors.darkmode.500"/ 70%
-                                        );
-                                    }
-                                }
-                            }
-                        }
-                    }
-                    & > .top-menu {
-                        &.top-menu--active {
-                            background-color: theme("colors.darkmode.700");
-                            &:before {
-                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A");
-                            }
-                            &:after {
-                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A");
-                            }
-                            .top-menu__icon {
-                                color: white;
-                            }
-                            .top-menu__title {
-                                color: white;
-                            }
-                        }
-                    }
-                    & > ul {
-                        background-color: theme("colors.darkmode.600");
-                        box-shadow: 0px 3px 7px #0000001c;
-                        & > li {
-                            & > ul {
-                                background-color: theme("colors.darkmode.600");
-                                box-shadow: 0px 3px 7px #0000001c;
-                            }
-                        }
-                    }
-                }
+          }
+          & > .top-menu {
+            &.top-menu--active {
+              background-color: theme('colors.darkmode.700');
+              &:before {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A");
+              }
+              &:after {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52' viewBox='0 0 259.51 259.52'%3E%3Cpath id='Path_143' data-name='Path 143' d='M8659.507,423.965c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828-2.394-2.974-4.937-5.936-7.292-8.589-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3a115.051,115.051,0,0,0-12.526-.227h259.51Z' transform='translate(-8399.997 -164.445)' fill='%23232e45'/%3E%3C/svg%3E%0A");
+              }
+              .top-menu__icon {
+                color: white;
+              }
+              .top-menu__title {
+                color: white;
+              }
+            }
+          }
+          & > ul {
+            background-color: theme('colors.darkmode.600');
+            box-shadow: 0px 3px 7px #0000001c;
+            & > li {
+              & > ul {
+                background-color: theme('colors.darkmode.600');
+                box-shadow: 0px 3px 7px #0000001c;
+              }
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/themes/tinker/side-nav.css b/web/src/assets/css/themes/tinker/side-nav.css
index 4c252929c..af0c62c7c 100644
--- a/web/src/assets/css/themes/tinker/side-nav.css
+++ b/web/src/assets/css/themes/tinker/side-nav.css
@@ -1,336 +1,318 @@
-@import "@left4code/tw-starter/dist/css/mixins/_media.css";
+@import '@left4code/tw-starter/dist/css/mixins/_media.css';
 
 .tinker {
-    .side-nav {
-        &.side-nav--simple {
-            .side-menu {
-                .side-menu__title {
-                    display: none;
-                    .side-menu__sub-icon {
-                        display: none;
-                    }
-                }
+  .side-nav {
+    &.side-nav--simple {
+      .side-menu {
+        .side-menu__title {
+          display: none;
+          .side-menu__sub-icon {
+            display: none;
+          }
+        }
+      }
+    }
+    .side-nav__divider {
+      width: 100%;
+      height: 1px;
+      background-color: theme('colors.white' / 8%);
+      z-index: 10;
+      position: relative;
+    }
+    .side-menu {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      padding-left: theme('spacing.5');
+      color: white;
+      margin-bottom: theme('spacing.1');
+      position: relative;
+      border-radius: theme('borderRadius.lg');
+      .side-menu__title {
+        display: none;
+        align-items: center;
+        width: 100%;
+        margin-left: theme('spacing.3');
+        @media screen(xl) {
+          display: flex;
+        }
+        .side-menu__sub-icon {
+          transition-property: theme('transitionProperty.DEFAULT');
+          transition-timing-function: theme('transitionTimingFunction.in');
+          transition-duration: theme('transitionDuration.100');
+          margin-left: auto;
+          margin-right: theme('spacing.5');
+          display: none;
+          @media screen(xl) {
+            display: block;
+          }
+          svg {
+            width: theme('spacing.4');
+            height: theme('spacing.4');
+          }
+        }
+      }
+    }
+    & > ul {
+      @for $i from 1 through 50 {
+        > li:nth-child($i) {
+          &.side-nav__divider {
+            opacity: 0;
+            animation: 0.4s intro-divider-animation ease-in-out 0.33333s;
+            animation-fill-mode: forwards;
+            animation-delay: calc($i * 0.1s);
+          }
+          & > a {
+            &:not(.side-menu--active) {
+              opacity: 0;
+              transform: translateX(50px);
+              animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
             }
+          }
         }
-        .side-nav__divider {
-            width: 100%;
-            height: 1px;
-            background-color: theme("colors.white" / 8%);
-            z-index: 10;
-            position: relative;
+      }
+      ul {
+        @for $i from 1 through 50 {
+          li:nth-child($i) {
+            & > a {
+              opacity: 0;
+              transform: translateX(50px);
+              animation: 0.2s intro-submenu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
+            }
+          }
         }
-        .side-menu {
-            height: 50px;
-            display: flex;
-            align-items: center;
-            padding-left: theme("spacing.5");
-            color: white;
-            margin-bottom: theme("spacing.1");
-            position: relative;
-            border-radius: theme("borderRadius.lg");
+      }
+      & > li {
+        /* First level */
+        & > .side-menu {
+          &.side-menu--active {
+            background-color: theme('colors.theme.1');
+            z-index: 10;
+            &:before {
+              content: '';
+              display: block;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              background-color: theme('colors.white' / 8%);
+              border-radius: theme('borderRadius.lg');
+              position: absolute;
+              border-bottom: 3px solid theme('colors.black' / 10%);
+            }
+            .side-menu__icon {
+              z-index: 10;
+            }
             .side-menu__title {
-                display: none;
-                align-items: center;
-                width: 100%;
-                margin-left: theme("spacing.3");
-                @media screen(xl) {
-                    display: flex;
-                }
-                .side-menu__sub-icon {
-                    transition-property: theme("transitionProperty.DEFAULT");
-                    transition-timing-function: theme(
-                        "transitionTimingFunction.in"
-                    );
-                    transition-duration: theme("transitionDuration.100");
-                    margin-left: auto;
-                    margin-right: theme("spacing.5");
-                    display: none;
-                    @media screen(xl) {
-                        display: block;
-                    }
-                    svg {
-                        width: theme("spacing.4");
-                        height: theme("spacing.4");
-                    }
-                }
+              font-weight: theme('fontWeight.medium');
+              z-index: 10;
+            }
+          }
+          &:hover {
+            &:not(.side-menu--active):not(.side-menu--open) {
+              background-color: theme('colors.theme.1' / 60%);
+              &:before {
+                content: '';
+                display: block;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: theme('colors.white' / 4%);
+                border-radius: theme('borderRadius.xl');
+                position: absolute;
+                z-index: -1;
+              }
             }
+          }
         }
         & > ul {
-            @for $i from 1 through 50 {
-                > li:nth-child($i) {
-                    &.side-nav__divider {
-                        opacity: 0;
-                        animation: 0.4s
-                            intro-divider-animation
-                            ease-in-out
-                            0.33333s;
-                        animation-fill-mode: forwards;
-                        animation-delay: calc($i * 0.1s);
-                    }
-                    & > a {
-                        &:not(.side-menu--active) {
-                            opacity: 0;
-                            transform: translateX(50px);
-                            animation: 0.4s
-                                intro-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
-                }
-            }
-            ul {
-                @for $i from 1 through 50 {
-                    li:nth-child($i) {
-                        & > a {
-                            opacity: 0;
-                            transform: translateX(50px);
-                            animation: 0.2s
-                                intro-submenu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
+          background-color: theme('colors.white' / 4%);
+          border-radius: theme('borderRadius.xl');
+          position: relative;
+          &:before {
+            content: '';
+            display: block;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: theme('colors.theme.1' / 60%);
+            border-radius: theme('borderRadius.xl');
+            position: absolute;
+            z-index: -1;
+          }
+          &:not(.side-menu__sub-open) {
+            display: none;
+          }
+          & > li {
+            /* Second level */
+            & > .side-menu {
+              &.side-menu--active {
+                .side-menu__title {
+                  font-weight: theme('fontWeight.medium');
                 }
+              }
+              &:not(.side-menu--active) {
+                color: theme('colors.white' / 70%);
+              }
+              &:hover {
+              }
+              .side-menu__icon {
+              }
             }
-            & > li {
-                /* First level */
+            & > ul {
+              background-color: theme('colors.white' / 4%);
+              border-radius: theme('borderRadius.xl');
+              position: relative;
+              &:before {
+                content: '';
+                display: block;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: theme('colors.theme.1' / 60%);
+                border-radius: theme('borderRadius.xl');
+                position: absolute;
+                z-index: -1;
+              }
+              &:not(.side-menu__sub-open) {
+                display: none;
+              }
+              & > li {
+                /* Third level */
                 & > .side-menu {
-                    &.side-menu--active {
-                        background-color: theme("colors.theme.1");
-                        z-index: 10;
-                        &:before {
-                            content: "";
-                            display: block;
-                            top: 0;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            background-color: theme("colors.white" / 8%);
-                            border-radius: theme("borderRadius.lg");
-                            position: absolute;
-                            border-bottom: 3px solid theme("colors.black" / 10%);
-                        }
-                        .side-menu__icon {
-                            z-index: 10;
-                        }
-                        .side-menu__title {
-                            font-weight: theme("fontWeight.medium");
-                            z-index: 10;
-                        }
-                    }
-                    &:hover {
-                        &:not(.side-menu--active):not(.side-menu--open) {
-                            background-color: theme("colors.theme.1" / 60%);
-                            &:before {
-                                content: "";
-                                display: block;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                background-color: theme("colors.white" / 4%);
-                                border-radius: theme("borderRadius.xl");
-                                position: absolute;
-                                z-index: -1;
-                            }
-                        }
-                    }
-                }
-                & > ul {
-                    background-color: theme("colors.white" / 4%);
-                    border-radius: theme("borderRadius.xl");
-                    position: relative;
-                    &:before {
-                        content: "";
-                        display: block;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        background-color: theme("colors.theme.1" / 60%);
-                        border-radius: theme("borderRadius.xl");
-                        position: absolute;
-                        z-index: -1;
-                    }
-                    &:not(.side-menu__sub-open) {
-                        display: none;
-                    }
-                    & > li {
-                        /* Second level */
-                        & > .side-menu {
-                            &.side-menu--active {
-                                .side-menu__title {
-                                    font-weight: theme("fontWeight.medium");
-                                }
-                            }
-                            &:not(.side-menu--active) {
-                                color: theme("colors.white" / 70%);
-                            }
-                            &:hover {
-                            }
-                            .side-menu__icon {
-                            }
-                        }
-                        & > ul {
-                            background-color: theme("colors.white" / 4%);
-                            border-radius: theme("borderRadius.xl");
-                            position: relative;
-                            &:before {
-                                content: "";
-                                display: block;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                background-color: theme("colors.theme.1" / 60%);
-                                border-radius: theme("borderRadius.xl");
-                                position: absolute;
-                                z-index: -1;
-                            }
-                            &:not(.side-menu__sub-open) {
-                                display: none;
-                            }
-                            & > li {
-                                /* Third level */
-                                & > .side-menu {
-                                    &.side-menu--active {
-                                        .side-menu__title {
-                                            font-weight: theme(
-                                                "fontWeight.medium"
-                                            );
-                                        }
-                                    }
-                                    &:not(.side-menu--active) {
-                                        color: theme("colors.white" / 70%);
-                                    }
-                                    &:hover {
-                                    }
-                                    .side-menu__icon {
-                                    }
-                                }
-                            }
-                        }
+                  padding-left: theme('spacing.10');
+                  &.side-menu--active {
+                    .side-menu__title {
+                      font-weight: theme('fontWeight.medium');
                     }
+                  }
+                  &:not(.side-menu--active) {
+                    color: theme('colors.white' / 70%);
+                  }
+                  &:hover {
+                  }
+                  .side-menu__icon {
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
 @keyframes intro-divider-animation {
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes intro-menu-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 @keyframes intro-submenu-animation {
-    100% {
-        opacity: 1;
-        transform: translateX(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 .dark {
-    .tinker {
-        .side-nav {
-            .side-nav__divider {
-                background-color: theme("colors.white" / 7%);
+  .tinker {
+    .side-nav {
+      .side-nav__divider {
+        background-color: theme('colors.white' / 7%);
+      }
+      & > ul {
+        & > li {
+          /* First level */
+          & > .side-menu {
+            &.side-menu--active {
+              background-color: transparent;
+              &:before {
+                border-color: theme('colors.black' / 10%);
+                background-color: theme('colors.darkmode.700');
+              }
+              .side-menu__icon {
+                color: theme('colors.slate.300');
+              }
+              .side-menu__title {
+                color: theme('colors.slate.300');
+              }
             }
-            & > ul {
+            &:not(.side-menu--active) {
+              .side-menu__icon {
+                color: theme('colors.slate.400');
+              }
+              .side-menu__title {
+                color: theme('colors.slate.400');
+              }
+            }
+            &:hover {
+              &:not(.side-menu--active):not(.side-menu--open) {
+                &:before {
+                  background-color: theme('colors.darkmode.700');
+                }
+              }
+            }
+          }
+          & > ul {
+            background-color: transparent;
+            &:before {
+              background-color: theme('colors.darkmode.900' / 30%);
+            }
+            & > li {
+              /* Second level */
+              & > .side-menu {
+                &.side-menu--active {
+                  color: theme('colors.slate.300');
+                }
+                &:not(.side-menu--active) {
+                  color: theme('colors.slate.400');
+                }
+                &:hover {
+                }
+                .side-menu__icon {
+                }
+              }
+              & > ul {
+                background-color: transparent;
+                &:before {
+                  background-color: theme('colors.darkmode.900' / 30%);
+                }
                 & > li {
-                    /* First level */
-                    & > .side-menu {
-                        &.side-menu--active {
-                            background-color: transparent;
-                            &:before {
-                                border-color: theme("colors.black" / 10%);
-                                background-color: theme("colors.darkmode.700");
-                            }
-                            .side-menu__icon {
-                                color: theme("colors.slate.300");
-                            }
-                            .side-menu__title {
-                                color: theme("colors.slate.300");
-                            }
-                        }
-                        &:not(.side-menu--active) {
-                            .side-menu__icon {
-                                color: theme("colors.slate.400");
-                            }
-                            .side-menu__title {
-                                color: theme("colors.slate.400");
-                            }
-                        }
-                        &:hover {
-                            &:not(.side-menu--active):not(.side-menu--open) {
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.700"
-                                    );
-                                }
-                            }
-                        }
+                  /* Third level */
+                  & > .side-menu {
+                    &.side-menu--active {
+                      color: theme('colors.slate.300');
+                    }
+                    &:not(.side-menu--active) {
+                      color: theme('colors.slate.400');
+                    }
+                    &:hover {
                     }
-                    & > ul {
-                        background-color: transparent;
-                        &:before {
-                            background-color: theme(
-                                "colors.darkmode.900" / 30%
-                            );
-                        }
-                        & > li {
-                            /* Second level */
-                            & > .side-menu {
-                                &.side-menu--active {
-                                    color: theme("colors.slate.300");
-                                }
-                                &:not(.side-menu--active) {
-                                    color: theme("colors.slate.400");
-                                }
-                                &:hover {
-                                }
-                                .side-menu__icon {
-                                }
-                            }
-                            & > ul {
-                                background-color: transparent;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.900" / 30%
-                                    );
-                                }
-                                & > li {
-                                    /* Third level */
-                                    & > .side-menu {
-                                        &.side-menu--active {
-                                            color: theme("colors.slate.300");
-                                        }
-                                        &:not(.side-menu--active) {
-                                            color: theme("colors.slate.400");
-                                        }
-                                        &:hover {
-                                        }
-                                        .side-menu__icon {
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                    .side-menu__icon {
                     }
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/themes/tinker/top-nav.css b/web/src/assets/css/themes/tinker/top-nav.css
index c7ffda5b5..fae6709d4 100644
--- a/web/src/assets/css/themes/tinker/top-nav.css
+++ b/web/src/assets/css/themes/tinker/top-nav.css
@@ -1,333 +1,340 @@
-@import "@left4code/tw-starter/dist/css/mixins/_media.css";
+@import '@left4code/tw-starter/dist/css/mixins/_media.css';
 
 .tinker {
-    .top-nav {
-        animation: 0.4s intro-top-menu ease-in-out 0.2s;
-        animation-fill-mode: forwards;
-        .top-menu {
-            height: 55px;
-            display: flex;
-            align-items: center;
-            padding-left: theme("spacing.5");
-            padding-right: theme("spacing.5");
-            margin-right: theme("spacing.1");
-            color: white;
-            position: relative;
-            border-radius: theme("borderRadius.full");
+  .top-nav {
+    animation: 0.4s intro-top-menu ease-in-out 0.2s;
+    animation-fill-mode: forwards;
+    .top-menu {
+      min-height: 55px;
+      height: auto;
+      display: flex;
+      align-items: center;
+      padding-left: theme('spacing.5');
+      padding-right: theme('spacing.5');
+      padding-top: theme('spacing.3');
+      padding-bottom: theme('spacing.3');
+      margin-right: theme('spacing.1');
+      color: white;
+      position: relative;
+      border-radius: theme('borderRadius.full');
+      @media screen(xl) {
+        border-radius: theme('borderRadius.xl');
+      }
+      .top-menu__icon {
+        z-index: 10;
+      }
+      .top-menu__title {
+        width: 100%;
+        min-width: 0;
+        margin-left: theme('spacing.3');
+        display: flex;
+        align-items: flex-start;
+        z-index: 10;
+        .top-menu__title-text {
+          flex: 1 1 auto;
+          min-width: 0;
+          white-space: normal;
+          line-height: theme('lineHeight.5');
+          word-break: break-word;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .top-menu__sub-icon {
+          transition-property: theme('transitionProperty.DEFAULT');
+          transition-timing-function: theme('transitionTimingFunction.in');
+          transition-duration: theme('transitionDuration.100');
+          flex-shrink: 0;
+          width: theme('spacing.4');
+          height: theme('spacing.4');
+          display: none;
+          @media screen(xl) {
+            display: block;
+          }
+        }
+      }
+    }
+    & > ul {
+      @for $i from 1 through 50 {
+        > li:nth-child($i) {
+          & > a {
+            &:not(.top-menu--active) {
+              opacity: 0;
+              transform: translateY(50px);
+              animation: 0.4s intro-menu-animation ease-in-out 0.33333s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i * 0.1s);
+            }
+          }
+        }
+      }
+      & > li {
+        /* First level */
+        &:hover {
+          position: relative;
+          & > .top-menu {
+            background: theme('colors.theme.1'/ 60%);
+            &:before {
+              content: '';
+              display: block;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              background-color: theme('colors.white' / 4%);
+              border-radius: theme('borderRadius.full');
+              position: absolute;
+              z-index: -1;
+              @media screen(xl) {
+                background-color: theme('colors.white' / 10%);
+                border-radius: theme('borderRadius.xl');
+              }
+            }
+            .top-menu__title {
+              .top-menu__sub-icon {
+                transform: rotate(180deg);
+              }
+            }
+          }
+          & > ul {
+            display: block;
+          }
+        }
+        & > .top-menu {
+          margin-top: 3px;
+          max-width: theme('spacing.48');
+          &.top-menu--active {
+            background-color: theme('colors.slate.100');
             @media screen(xl) {
-                border-radius: theme("borderRadius.xl");
+              background-color: theme('colors.theme.1');
+            }
+            &:before {
+              content: '';
+              display: none;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              background-color: theme('colors.white' / 8%);
+              border-radius: theme('borderRadius.xl');
+              position: absolute;
+              border-bottom: 3px solid theme('colors.black' / 10%);
+              @media screen(xl) {
+                display: block;
+              }
             }
             .top-menu__icon {
-                z-index: 10;
+              color: theme('colors.theme.1');
+              @media screen(xl) {
+                color: white;
+              }
             }
             .top-menu__title {
-                width: 100%;
-                margin-left: theme("spacing.3");
-                display: flex;
-                align-items: center;
-                white-space: nowrap;
-                z-index: 10;
-                .top-menu__sub-icon {
-                    transition-property: theme("transitionProperty.DEFAULT");
-                    transition-timing-function: theme(
-                        "transitionTimingFunction.in"
-                    );
-                    transition-duration: theme("transitionDuration.100");
-                    width: theme("spacing.4");
-                    height: theme("spacing.4");
-                    display: none;
-                    @media screen(xl) {
-                        display: block;
-                    }
-                }
+              font-weight: theme('fontWeight.medium');
+              color: theme('colors.slate.800');
+              @media screen(xl) {
+                color: white;
+              }
+            }
+          }
+          .top-menu__icon {
+            margin-top: -3px;
+          }
+          .top-menu__title {
+            margin-top: -3px;
+            .top-menu__sub-icon {
+              margin-left: theme('spacing.3');
             }
+          }
         }
         & > ul {
-            @for $i from 1 through 50 {
-                > li:nth-child($i) {
-                    & > a {
-                        &:not(.top-menu--active) {
-                            opacity: 0;
-                            transform: translateY(50px);
-                            animation: 0.4s
-                                intro-menu-animation
-                                ease-in-out
-                                0.33333s;
-                            animation-fill-mode: forwards;
-                            animation-delay: calc($i * 0.1s);
-                        }
-                    }
+          box-shadow: 0px 3px 20px #0000000b;
+          background-color: theme('colors.theme.1');
+          display: none;
+          width: theme('spacing.56');
+          position: absolute;
+          border-radius: theme('borderRadius.md');
+          z-index: 20;
+          padding-left: 0;
+          padding-right: 0;
+          margin-top: theme('spacing.1');
+          &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: theme('colors.white' / 4%);
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: theme('borderRadius.md');
+            z-index: -1;
+          }
+          &:after {
+            content: '';
+            width: 100%;
+            height: theme('spacing.1');
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin-top: calc(theme('spacing.1') * -1);
+            cursor: pointer;
+          }
+          & > li {
+            /* Second level */
+            padding-left: theme('spacing.5');
+            padding-right: theme('spacing.5');
+            position: relative;
+            &:hover {
+              position: relative;
+              & > .top-menu {
+                .top-menu__title {
+                  .top-menu__sub-icon {
+                    transform: rotate(-90deg);
+                  }
                 }
+              }
+              & > ul {
+                display: block;
+              }
             }
-            & > li {
-                /* First level */
-                &:hover {
-                    position: relative;
-                    & > .top-menu {
-                        background: theme("colors.theme.1"/ 60%);
-                        &:before {
-                            content: "";
-                            display: block;
-                            top: 0;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            background-color: theme("colors.white" / 4%);
-                            border-radius: theme("borderRadius.full");
-                            position: absolute;
-                            z-index: -1;
-                            @media screen(xl) {
-                                background-color: theme("colors.white" / 10%);
-                                border-radius: theme("borderRadius.xl");
-                            }
-                        }
-                        .top-menu__title {
-                            .top-menu__sub-icon {
-                                transform: rotate(180deg);
-                            }
-                        }
-                    }
-                    & > ul {
-                        display: block;
-                    }
+            & > .top-menu {
+              padding-left: 0;
+              padding-right: 0;
+              margin-right: 0;
+              .top-menu__title {
+                width: 100%;
+                .top-menu__sub-icon {
+                  margin-left: auto;
                 }
+              }
+            }
+            & > ul {
+              box-shadow: 0px 3px 20px #0000000b;
+              left: 100%;
+              background-color: theme('colors.theme.1');
+              display: none;
+              border-radius: theme('borderRadius.md');
+              margin-top: 0;
+              margin-left: 0;
+              top: 0;
+              width: theme('spacing.56');
+              position: absolute;
+              z-index: 20;
+              padding-left: 0;
+              padding-right: 0;
+              &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background-color: theme('colors.white' / 4%);
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: theme('borderRadius.md');
+                z-index: -1;
+              }
+              & > li {
+                /* Third level */
+                padding-left: theme('spacing.5');
+                padding-right: theme('spacing.5');
                 & > .top-menu {
-                    margin-top: 3px;
-                    &.top-menu--active {
-                        background-color: theme("colors.slate.100");
-                        @media screen(xl) {
-                            background-color: theme("colors.theme.1");
-                        }
-                        &:before {
-                            content: "";
-                            display: none;
-                            top: 0;
-                            left: 0;
-                            right: 0;
-                            bottom: 0;
-                            background-color: theme("colors.white" / 8%);
-                            border-radius: theme("borderRadius.xl");
-                            position: absolute;
-                            border-bottom: 3px solid theme("colors.black" / 10%);
-                            @media screen(xl) {
-                                display: block;
-                            }
-                        }
-                        .top-menu__icon {
-                            color: theme("colors.theme.1");
-                            @media screen(xl) {
-                                color: white;
-                            }
-                        }
-                        .top-menu__title {
-                            font-weight: theme("fontWeight.medium");
-                            color: theme("colors.slate.800");
-                            @media screen(xl) {
-                                color: white;
-                            }
-                        }
-                    }
-                    .top-menu__icon {
-                        margin-top: -3px;
-                    }
-                    .top-menu__title {
-                        margin-top: -3px;
-                        .top-menu__sub-icon {
-                            margin-left: theme("spacing.2");
-                        }
-                    }
-                }
-                & > ul {
-                    box-shadow: 0px 3px 20px #0000000b;
-                    background-color: theme("colors.theme.1");
-                    display: none;
-                    width: theme("spacing.56");
-                    position: absolute;
-                    border-radius: theme("borderRadius.md");
-                    z-index: 20;
-                    padding-left: 0;
-                    padding-right: 0;
-                    margin-top: theme("spacing.1");
-                    &:before {
-                        content: "";
-                        display: block;
-                        position: absolute;
-                        width: 100%;
-                        height: 100%;
-                        background-color: theme("colors.white" / 4%);
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        border-radius: theme("borderRadius.md");
-                        z-index: -1;
-                    }
-                    &:after {
-                        content: "";
-                        width: 100%;
-                        height: theme("spacing.1");
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        margin-top: calc(theme("spacing.1") * -1);
-                        cursor: pointer;
-                    }
-                    & > li {
-                        /* Second level */
-                        padding-left: theme("spacing.5");
-                        padding-right: theme("spacing.5");
-                        position: relative;
-                        &:hover {
-                            position: relative;
-                            & > .top-menu {
-                                .top-menu__title {
-                                    .top-menu__sub-icon {
-                                        transform: rotate(-90deg);
-                                    }
-                                }
-                            }
-                            & > ul {
-                                display: block;
-                            }
-                        }
-                        & > .top-menu {
-                            padding-left: 0;
-                            padding-right: 0;
-                            margin-right: 0;
-                            .top-menu__title {
-                                width: 100%;
-                                .top-menu__sub-icon {
-                                    margin-left: auto;
-                                }
-                            }
-                        }
-                        & > ul {
-                            box-shadow: 0px 3px 20px #0000000b;
-                            left: 100%;
-                            background-color: theme("colors.theme.1");
-                            display: none;
-                            border-radius: theme("borderRadius.md");
-                            margin-top: 0;
-                            margin-left: 0;
-                            top: 0;
-                            width: theme("spacing.56");
-                            position: absolute;
-                            z-index: 20;
-                            padding-left: 0;
-                            padding-right: 0;
-                            &:before {
-                                content: "";
-                                display: block;
-                                position: absolute;
-                                width: 100%;
-                                height: 100%;
-                                background-color: theme("colors.white" / 4%);
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                border-radius: theme("borderRadius.md");
-                                z-index: -1;
-                            }
-                            & > li {
-                                /* Third level */
-                                padding-left: theme("spacing.5");
-                                padding-right: theme("spacing.5");
-                                & > .top-menu {
-                                    padding-left: 0;
-                                    padding-right: 0;
-                                    margin-right: 0;
-                                    .top-menu__title {
-                                        width: 100%;
-                                        .top-menu__sub-icon {
-                                            margin-left: auto;
-                                        }
-                                    }
-                                }
-                            }
-                        }
+                  padding-left: 0;
+                  padding-right: 0;
+                  margin-right: 0;
+                  .top-menu__title {
+                    width: 100%;
+                    .top-menu__sub-icon {
+                      margin-left: auto;
                     }
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
 @keyframes intro-top-menu {
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
 
 @keyframes intro-menu-animation {
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }
 
 .dark {
-    .tinker {
-        .top-nav {
-            .top-menu {
-                .top-menu__icon {
-                    color: theme("colors.slate.400");
-                }
-                .top-menu__title {
-                    color: theme("colors.slate.400");
+  .tinker {
+    .top-nav {
+      .top-menu {
+        .top-menu__icon {
+          color: theme('colors.slate.400');
+        }
+        .top-menu__title {
+          color: theme('colors.slate.400');
+        }
+      }
+      & > ul {
+        & > li {
+          /* First level */
+          &:hover {
+            & > .top-menu {
+              &:not(.top-menu--active) {
+                background-color: transparent;
+                &:before {
+                  background-color: theme('colors.darkmode.700');
                 }
+              }
             }
-            & > ul {
-                & > li {
-                    /* First level */
-                    &:hover {
-                        & > .top-menu {
-                            &:not(.top-menu--active) {
-                                background-color: transparent;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.darkmode.700"
-                                    );
-                                }
-                            }
-                        }
-                    }
-                    & > .top-menu {
-                        &.top-menu--active {
-                            background-color: theme("colors.darkmode.700");
-                            &:before {
-                                background-color: theme("colors.darkmode.700");
-                            }
-                            .top-menu__icon {
-                                color: theme("colors.white");
-                            }
-                            .top-menu__title {
-                                color: theme("colors.white");
-                            }
-                        }
-                    }
-                    & > ul {
-                        background-color: theme("colors.darkmode.600");
-                        box-shadow: 0px 3px 7px #0000001c;
-                        &:before {
-                            background-color: theme("colors.black" / 10%);
-                        }
-                        & > li {
-                            /* Second level */
-                            & > ul {
-                                background-color: theme("colors.darkmode.600");
-                                box-shadow: 0px 3px 7px #0000001c;
-                                &:before {
-                                    background-color: theme(
-                                        "colors.black" / 10%
-                                    );
-                                }
-                            }
-                        }
-                    }
+          }
+          & > .top-menu {
+            &.top-menu--active {
+              background-color: theme('colors.darkmode.700');
+              &:before {
+                background-color: theme('colors.darkmode.700');
+              }
+              .top-menu__icon {
+                color: theme('colors.white');
+              }
+              .top-menu__title {
+                color: theme('colors.white');
+              }
+            }
+          }
+          & > ul {
+            background-color: theme('colors.darkmode.600');
+            box-shadow: 0px 3px 7px #0000001c;
+            &:before {
+              background-color: theme('colors.black' / 10%);
+            }
+            & > li {
+              /* Second level */
+              & > ul {
+                background-color: theme('colors.darkmode.600');
+                box-shadow: 0px 3px 7px #0000001c;
+                &:before {
+                  background-color: theme('colors.black' / 10%);
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/vendors/litepicker.css b/web/src/assets/css/vendors/litepicker.css
index 8ca10105b..b08b2d090 100644
--- a/web/src/assets/css/vendors/litepicker.css
+++ b/web/src/assets/css/vendors/litepicker.css
@@ -1,262 +1,262 @@
 .litepicker {
-    background-color: white;
-    border-radius: theme("borderRadius.lg");
-    font-size: theme("fontSize.sm");
-    z-index: 999999 !important;
-    margin-top: 7px;
-    box-shadow: 0px 3px 20px #00000014;
-    border: 1px solid theme("colors.slate.200");
-    @media (max-width: calc(theme("screens.lg") - 1px)) {
-        width: 310px;
+  background-color: white;
+  border-radius: theme('borderRadius.lg');
+  font-size: theme('fontSize.sm');
+  z-index: 999999 !important;
+  margin-top: 7px;
+  box-shadow: 0px 3px 20px #00000014;
+  border: 1px solid theme('colors.slate.200');
+  @media (max-width: calc(theme('screens.lg') - 1px)) {
+    width: 310px;
+  }
+  @media (max-width: calc(theme('screens.sm') - 1px)) {
+    left: 0px !important;
+    right: 0px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .container__months,
+  .container__footer {
+    box-shadow: none;
+    background-color: transparent;
+    padding-top: 0;
+  }
+  .container__footer {
+    border-top: 1px solid theme('colors.slate.200' / 60%);
+    margin: 0;
+    padding: theme('spacing.3');
+    @media (max-width: calc(theme('screens.lg') - 1px)) {
+      display: flex;
+      flex-direction: column-reverse;
+      text-align: center;
     }
-    @media (max-width: calc(theme("screens.sm") - 1px)) {
-        left: 0px !important;
-        right: 0px;
-        margin-left: auto;
-        margin-right: auto;
+    .preview-date-range {
+      @media (max-width: calc(theme('screens.lg') - 1px)) {
+        width: 100%;
+        display: block;
+        order: 1;
+        margin-bottom: theme('spacing.[1.5]');
+      }
     }
-    .container__months,
-    .container__footer {
-        box-shadow: none;
-        background-color: transparent;
-        padding-top: 0;
+    .button-cancel {
+      @media (max-width: calc(theme('screens.lg') - 1px)) {
+        width: 100% !important;
+        margin-left: 0px !important;
+        padding-top: 0.375rem !important;
+        padding-bottom: 0.375rem !important;
+      }
     }
-    .container__footer {
-        border-top: 1px solid theme("colors.slate.200" / 60%);
-        margin: 0;
-        padding: theme("spacing.3");
-        @media (max-width: calc(theme("screens.lg") - 1px)) {
-            display: flex;
-            flex-direction: column-reverse;
-            text-align: center;
-        }
-        .preview-date-range {
-            @media (max-width: calc(theme("screens.lg") - 1px)) {
-                width: 100%;
-                display: block;
-                order: 1;
-                margin-bottom: theme("spacing.[1.5]");
-            }
-        }
-        .button-cancel {
-            @media (max-width: calc(theme("screens.lg") - 1px)) {
-                width: 100% !important;
-                margin-left: 0px !important;
-                padding-top: 0.375rem !important;
-                padding-bottom: 0.375rem !important;
-            }
+    .button-apply {
+      @media (max-width: calc(theme('screens.lg') - 1px)) {
+        width: 100% !important;
+        margin-left: 0px !important;
+        padding-top: 0.375rem !important;
+        padding-bottom: 0.375rem !important;
+        margin-bottom: theme('spacing.[1.5]');
+      }
+    }
+    .button-apply,
+    .button-cancel {
+      width: theme('spacing.20');
+      padding: theme('spacing.1') theme('spacing.2');
+      border-radius: theme('borderRadius.md');
+      font-weight: theme('fontWeight.medium');
+      margin-left: theme('spacing.1');
+      margin-right: 0;
+    }
+    .button-apply {
+      background-color: theme('colors.slate.700');
+      color: white;
+    }
+    .button-cancel {
+      background-color: theme('colors.slate.200' / 70%);
+      color: theme('colors.slate.500');
+    }
+  }
+  .container__months {
+    padding-left: theme('spacing.1');
+    padding-right: theme('spacing.1');
+    .month-item-weekdays-row {
+      color: theme('colors.slate.400');
+      margin-top: theme('spacing.3');
+    }
+    .month-item-header {
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: 0;
+      padding-top: theme('spacing.2');
+      .button-previous-month {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: theme('spacing.8');
+        height: theme('spacing.8');
+        &:hover {
+          background-color: theme('colors.slate.100');
         }
-        .button-apply {
-            @media (max-width: calc(theme("screens.lg") - 1px)) {
-                width: 100% !important;
-                margin-left: 0px !important;
-                padding-top: 0.375rem !important;
-                padding-bottom: 0.375rem !important;
-                margin-bottom: theme("spacing.[1.5]");
-            }
+        svg {
+          transform: rotate(135deg);
+          margin-right: calc(theme('spacing.1') * -1);
         }
-        .button-apply,
-        .button-cancel {
-            width: theme("spacing.20");
-            padding: theme("spacing.1") theme("spacing.2");
-            border-radius: theme("borderRadius.md");
-            font-weight: theme("fontWeight.medium");
-            margin-left: theme("spacing.1");
-            margin-right: 0;
+      }
+      .button-next-month {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: theme('spacing.8');
+        height: theme('spacing.8');
+        &:hover {
+          background-color: theme('colors.slate.100');
         }
-        .button-apply {
-            background-color: theme("colors.slate.700");
-            color: white;
+        svg {
+          transform: rotate(-45deg);
+          margin-left: calc(theme('spacing.1') * -1);
         }
-        .button-cancel {
-            background-color: theme("colors.slate.200" / 70%);
-            color: theme("colors.slate.500");
+      }
+      .button-previous-month:hover svg,
+      .button-previous-month svg,
+      .button-next-month:hover svg,
+      .button-next-month svg {
+        fill: transparent;
+        border: solid black;
+        border-width: 0 2px 2px 0;
+        border-radius: 0;
+        display: inline-block;
+        border-color: #4a5568;
+        width: theme('spacing.2');
+        height: theme('spacing.2');
+        display: block;
+      }
+      div > .month-item-name,
+      div > .month-item-year {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74, 85, 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+        background-size: 15px;
+        background-position: center right 0.6rem;
+        background-color: transparent;
+        font-size: theme('fontSize.sm');
+        border-width: 1px;
+        border-style: solid;
+        background-repeat: no-repeat;
+        padding-top: theme('spacing.1');
+        padding-bottom: theme('spacing.1');
+        padding-left: theme('spacing.2');
+        padding-right: theme('spacing.8');
+        border-radius: theme('borderRadius.md');
+        border-color: theme('colors.slate.200');
+        font-weight: theme('fontWeight.normal');
+        &:focus {
+          outline: none;
+          border-color: theme('colors.slate.200');
+          --tw-ring-color: transparent;
         }
+      }
     }
-    .container__months {
-        padding-left: theme("spacing.1");
-        padding-right: theme("spacing.1");
-        .month-item-weekdays-row {
-            color: theme("colors.slate.400");
-            margin-top: theme("spacing.3");
-        }
-        .month-item-header {
-            padding-left: 0;
-            padding-right: 0;
-            padding-bottom: 0;
-            padding-top: theme("spacing.2");
-            .button-previous-month {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: theme("spacing.8");
-                height: theme("spacing.8");
-                &:hover {
-                    background-color: theme("colors.slate.100");
-                }
-                svg {
-                    transform: rotate(135deg);
-                    margin-right: calc(theme("spacing.1") * -1);
-                }
-            }
-            .button-next-month {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: theme("spacing.8");
-                height: theme("spacing.8");
-                &:hover {
-                    background-color: theme("colors.slate.100");
-                }
-                svg {
-                    transform: rotate(-45deg);
-                    margin-left: calc(theme("spacing.1") * -1);
-                }
-            }
-            .button-previous-month:hover svg,
-            .button-previous-month svg,
-            .button-next-month:hover svg,
-            .button-next-month svg {
-                fill: transparent;
-                border: solid black;
-                border-width: 0 2px 2px 0;
-                border-radius: 0;
-                display: inline-block;
-                border-color: #4a5568;
-                width: theme("spacing.2");
-                height: theme("spacing.2");
-                display: block;
-            }
-            div > .month-item-name,
-            div > .month-item-year {
-                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74, 85, 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-                background-size: 15px;
-                background-position: center right 0.6rem;
-                background-color: transparent;
-                font-size: theme("fontSize.sm");
-                border-width: 1px;
-                border-style: solid;
-                background-repeat: no-repeat;
-                padding-top: theme("spacing.1");
-                padding-bottom: theme("spacing.1");
-                padding-left: theme("spacing.2");
-                padding-right: theme("spacing.8");
-                border-radius: theme("borderRadius.md");
-                border-color: theme("colors.slate.200");
-                font-weight: theme("fontWeight.normal");
-                &:focus {
-                    outline: none;
-                    border-color: theme("colors.slate.200");
-                    --tw-ring-color: transparent;
-                }
-            }
-        }
+  }
+  .container__days {
+    .day-item {
+      color: theme('colors.slate.800');
+      &:hover {
+        box-shadow: none;
+        background-color: theme('colors.slate.100');
+        color: theme('colors.slate.800');
+      }
+      &.is-today,
+      &.is-today:hover {
+        font-weight: theme('fontWeight.medium');
+        color: theme('colors.slate.700');
+      }
+      &.is-start-date,
+      &.is-start-date:hover,
+      &.is-end-date,
+      &.is-end-date:hover {
+        background-color: theme('colors.slate.700');
+        color: white;
+      }
+      &.is-in-range,
+      &.is-in-range:hover {
+        background-color: theme('colors.slate.100');
+      }
     }
-    .container__days {
-        .day-item {
-            color: theme("colors.slate.800");
-            &:hover {
-                box-shadow: none;
-                background-color: theme("colors.slate.100");
-                color: theme("colors.slate.800");
-            }
-            &.is-today,
-            &.is-today:hover {
-                font-weight: theme("fontWeight.medium");
-                color: theme("colors.slate.700");
-            }
-            &.is-start-date,
-            &.is-start-date:hover,
-            &.is-end-date,
-            &.is-end-date:hover {
-                background-color: theme("colors.slate.700");
-                color: white;
-            }
-            &.is-in-range,
-            &.is-in-range:hover {
-                background-color: theme("colors.slate.100");
-            }
-        }
-        .week-number {
-            color: theme("colors.slate.400");
-        }
+    .week-number {
+      color: theme('colors.slate.400');
     }
+  }
 }
-@media (max-width: calc(theme("screens.lg") - 1px)) {
-    :root {
-        --litepicker-day-width: 35px;
-    }
+@media (max-width: calc(theme('screens.lg') - 1px)) {
+  :root {
+    --litepicker-day-width: 35px;
+  }
 }
 
 .dark {
-    .litepicker {
-        background-color: theme("colors.darkmode.600");
-        &:before,
-        &:after {
-            border-right-color: transparent;
-            border-left-color: transparent;
-            border-bottom-color: theme("colors.darkmode.600");
+  .litepicker {
+    background-color: theme('colors.darkmode.600');
+    &:before,
+    &:after {
+      border-right-color: transparent;
+      border-left-color: transparent;
+      border-bottom-color: theme('colors.darkmode.600');
+    }
+    .container__months {
+      .button-previous-month:hover {
+        background-color: theme('colors.darkmode.400');
+      }
+      .button-next-month:hover {
+        background-color: theme('colors.darkmode.400');
+      }
+      .month-item-header {
+        .button-previous-month:hover svg,
+        .button-previous-month svg,
+        .button-next-month:hover svg,
+        .button-next-month svg {
+          border-color: theme('colors.slate.200');
         }
-        .container__months {
-            .button-previous-month:hover {
-                background-color: theme("colors.darkmode.400");
-            }
-            .button-next-month:hover {
-                background-color: theme("colors.darkmode.400");
-            }
-            .month-item-header {
-                .button-previous-month:hover svg,
-                .button-previous-month svg,
-                .button-next-month:hover svg,
-                .button-next-month svg {
-                    border-color: theme("colors.slate.200");
-                }
-                div > .month-item-name,
-                div > .month-item-year {
-                    color: theme("colors.slate.200");
-                }
-                div > .month-item-name,
-                div > .month-item-year {
-                    border-color: theme("colors.darkmode.400");
-                }
-            }
+        div > .month-item-name,
+        div > .month-item-year {
+          color: theme('colors.slate.200');
         }
-        .container__days {
-            .day-item {
-                color: theme("colors.slate.200");
-                &:hover {
-                    background-color: theme("colors.darkmode.400");
-                }
-                &.is-start-date,
-                &.is-start-date:hover,
-                &.is-end-date,
-                &.is-end-date:hover {
-                    background-color: theme("colors.slate.700");
-                    color: theme("colors.slate.200");
-                }
-                &.is-in-range,
-                &.is-in-range:hover {
-                    background-color: theme("colors.darkmode.400");
-                }
-                &.is-today,
-                &.is-today:hover {
-                    color: theme("colors.slate.200");
-                }
-            }
+        div > .month-item-name,
+        div > .month-item-year {
+          border-color: theme('colors.darkmode.400');
         }
-        .container__footer {
-            border-color: theme("colors.darkmode.400");
-            .button-cancel {
-                background-color: theme("colors.darkmode.400");
-                color: theme("colors.slate.300");
-            }
+      }
+    }
+    .container__days {
+      .day-item {
+        color: theme('colors.slate.200');
+        &:hover {
+          background-color: theme('colors.darkmode.400');
+        }
+        &.is-start-date,
+        &.is-start-date:hover,
+        &.is-end-date,
+        &.is-end-date:hover {
+          background-color: theme('colors.slate.700');
+          color: theme('colors.slate.200');
+        }
+        &.is-in-range,
+        &.is-in-range:hover {
+          background-color: theme('colors.darkmode.400');
         }
-        .container__tooltip {
-            background-color: theme("colors.darkmode.400");
-            &:before,
-            &:after {
-                border-top-color: theme("colors.darkmode.600");
-            }
+        &.is-today,
+        &.is-today:hover {
+          color: theme('colors.slate.200');
         }
+      }
+    }
+    .container__footer {
+      border-color: theme('colors.darkmode.400');
+      .button-cancel {
+        background-color: theme('colors.darkmode.400');
+        color: theme('colors.slate.300');
+      }
+    }
+    .container__tooltip {
+      background-color: theme('colors.darkmode.400');
+      &:before,
+      &:after {
+        border-top-color: theme('colors.darkmode.600');
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/vendors/simplebar.css b/web/src/assets/css/vendors/simplebar.css
index e9e051213..296c46747 100644
--- a/web/src/assets/css/vendors/simplebar.css
+++ b/web/src/assets/css/vendors/simplebar.css
@@ -1 +1 @@
-@import "simplebar/dist/simplebar.css";
+@import 'simplebar/dist/simplebar.css';
diff --git a/web/src/assets/css/vendors/tabulator.css b/web/src/assets/css/vendors/tabulator.css
index 7f7efdd82..4f61e8e9b 100644
--- a/web/src/assets/css/vendors/tabulator.css
+++ b/web/src/assets/css/vendors/tabulator.css
@@ -1,318 +1,316 @@
-@import "tabulator-tables/dist/css/tabulator.css";
+@import 'tabulator-tables/dist/css/tabulator.css';
 
 .tabulator-print-fullscreen-hide:before {
-    content: "";
-    position: fixed;
-    background-color: white;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
+  content: '';
+  position: fixed;
+  background-color: white;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
 }
 .tabulator {
-    overflow: hidden;
-    border: 0;
-    background-color: transparent;
-    .tabulator-header {
-        font-weight: theme("fontWeight.medium");
-        color: theme("colors.slate.500");
-        border-top: 1px solid theme("colors.slate.200" / 60%);
-        border-bottom: 1px solid theme("colors.slate.200" / 60%);
-        background-color: theme("colors.slate.50");
-        .tabulator-headers {
-            .tabulator-col {
-                background-color: transparent;
-                border-right-width: 0;
-                &.tabulator-sortable.tabulator-col-sorter-element:hover {
-                    background-color: theme("colors.slate.100" / 80%);
-                }
-                .tabulator-col-content {
-                    padding: theme("spacing.4") theme("spacing.5");
-                    .tabulator-col-title {
-                        padding-right: 0;
-                    }
-                    .tabulator-arrow {
-                        top: -3px;
-                        border-left-width: 5px;
-                        border-right-width: 5px;
-                        bottom: 0;
-                        margin-top: auto;
-                        margin-bottom: auto;
-                    }
-                }
-                &.tabulator-sortable[aria-sort="none"]
-                    .tabulator-col-content
-                    .tabulator-arrow {
-                    border-bottom-color: #cbd5e0;
-                }
-            }
+  overflow: hidden;
+  border: 0;
+  background-color: transparent;
+  .tabulator-header {
+    font-weight: theme('fontWeight.medium');
+    color: theme('colors.slate.500');
+    border-top: 1px solid theme('colors.slate.200' / 60%);
+    border-bottom: 1px solid theme('colors.slate.200' / 60%);
+    background-color: theme('colors.slate.50');
+    .tabulator-headers {
+      .tabulator-col {
+        background-color: transparent;
+        border-right-width: 0;
+        &.tabulator-sortable.tabulator-col-sorter-element:hover {
+          background-color: theme('colors.slate.100' / 80%);
+        }
+        .tabulator-col-content {
+          padding: theme('spacing.4') theme('spacing.5');
+          .tabulator-col-title {
+            padding-right: 0;
+          }
+          .tabulator-arrow {
+            top: -3px;
+            border-left-width: 5px;
+            border-right-width: 5px;
+            bottom: 0;
+            margin-top: auto;
+            margin-bottom: auto;
+          }
+        }
+        &.tabulator-sortable[aria-sort='none'] .tabulator-col-content .tabulator-arrow {
+          border-bottom-color: #cbd5e0;
         }
+      }
     }
-    .tabulator-row {
-        border-bottom: 1px dashed theme("colors.slate.200");
-        &:hover,
-        &.tabulator-row-even:hover {
-            background-color: theme("colors.slate.100" / 80%);
+  }
+  .tabulator-row {
+    border-bottom: 1px dashed theme('colors.slate.200');
+    &:hover,
+    &.tabulator-row-even:hover {
+      background-color: theme('colors.slate.100' / 80%);
+    }
+    &.tabulator-row-even {
+      background-color: theme('colors.slate.50');
+    }
+    .tabulator-cell {
+      border-right: 0;
+      padding: theme('spacing.4') theme('spacing.5');
+      &.tabulator-row-handle {
+        padding-left: 0;
+        padding-right: 0;
+      }
+      .tabulator-responsive-collapse-toggle {
+        width: theme('spacing.4');
+        height: theme('spacing.4');
+        margin-right: calc(theme('spacing.5') * -1);
+        background-color: theme('colors.slate.400');
+        border-radius: theme('borderRadius.full');
+      }
+    }
+    .tabulator-responsive-collapse {
+      padding: theme('spacing.3');
+      border-color: theme('colors.slate.200');
+      border-bottom: 0;
+      td {
+        padding: theme('spacing.2');
+        strong {
+          font-weight: theme('fontWeight.medium');
         }
-        &.tabulator-row-even {
-            background-color: theme("colors.slate.50");
+      }
+    }
+  }
+  .tabulator-footer {
+    background-color: transparent;
+    border-top: 0;
+    padding: 0 theme('spacing.5');
+    margin-top: theme('spacing.[2.5]');
+    @media (max-width: calc(theme('screens.md') - 1px)) {
+      white-space: normal;
+    }
+    .tabulator-footer-contents {
+      padding: 0;
+      .tabulator-paginator {
+        display: flex;
+        gap: theme('spacing.2');
+        align-items: center;
+        flex-direction: row-reverse;
+        @media (max-width: calc(theme('screens.md') - 1px)) {
+          display: block;
+          text-align: left;
         }
-        .tabulator-cell {
-            border-right: 0;
-            padding: theme("spacing.4") theme("spacing.5");
-            &.tabulator-row-handle {
-                padding-left: 0;
-                padding-right: 0;
-            }
-            .tabulator-responsive-collapse-toggle {
-                width: theme("spacing.4");
-                height: theme("spacing.4");
-                margin-right: calc(theme("spacing.5") * -1);
-                background-color: theme("colors.slate.400");
-                border-radius: theme("borderRadius.full");
-            }
+        > label {
+          display: none;
         }
-        .tabulator-responsive-collapse {
-            padding: theme("spacing.3");
-            border-color: theme("colors.slate.200");
-            border-bottom: 0;
-            td {
-                padding: theme("spacing.2");
-                strong {
-                    font-weight: theme("fontWeight.medium");
-                }
-            }
+        .tabulator-page-size {
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74, 85, 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+          background-size: 20px auto;
+          width: theme('spacing.20');
+          background-position: center right 0.6rem;
+          padding-top: theme('spacing.2');
+          padding-bottom: theme('spacing.2');
+          padding-left: theme('spacing.3');
+          padding-right: theme('spacing.8');
+          margin-left: auto;
+          margin-right: 0;
+          margin-bottom: 0;
+          border-radius: 0.5rem;
+          box-shadow: theme('boxShadow.sm');
+          appearance: none;
+          line-height: theme('lineHeight.5');
+          font-size: theme('fontSize.sm');
+          font-weight: theme('fontWeight.normal');
+          background-color: white;
+          border-color: theme('colors.slate.200');
+          background-repeat: no-repeat;
+          @media (max-width: calc(theme('screens.md') - 1px)) {
+            width: 100%;
+            margin-bottom: theme('spacing.3');
+          }
         }
-    }
-    .tabulator-footer {
-        background-color: transparent;
-        border-top: 0;
-        padding: 0 theme("spacing.5");
-        margin-top: theme("spacing.[2.5]");
-        @media (max-width: calc(theme("screens.md") - 1px)) {
-            white-space: normal;
+        .tabulator-pages {
+          margin: 0 theme('spacing.1');
+          gap: theme('spacing.[2.5]');
         }
-        .tabulator-footer-contents {
-            padding: 0;
-            .tabulator-paginator {
-                display: flex;
-                gap: theme("spacing.2");
-                align-items: center;
-                flex-direction: row-reverse;
-                @media (max-width: calc(theme("screens.md") - 1px)) {
-                    display: block;
-                    text-align: left;
-                }
-                > label {
-                    display: none;
-                }
-                .tabulator-page-size {
-                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74, 85, 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-                    background-size: 20px auto;
-                    width: theme("spacing.20");
-                    background-position: center right 0.6rem;
-                    padding-top: theme("spacing.2");
-                    padding-bottom: theme("spacing.2");
-                    padding-left: theme("spacing.3");
-                    padding-right: theme("spacing.8");
-                    margin-left: auto;
-                    margin-right: 0;
-                    margin-bottom: 0;
-                    border-radius: 0.5rem;
-                    box-shadow: theme("boxShadow.sm");
-                    appearance: none;
-                    line-height: theme("lineHeight.5");
-                    font-size: theme("fontSize.sm");
-                    font-weight: theme("fontWeight.normal");
-                    background-color: white;
-                    border-color: theme("colors.slate.200");
-                    background-repeat: no-repeat;
-                    @media (max-width: calc(theme("screens.md") - 1px)) {
-                        width: 100%;
-                        margin-bottom: theme("spacing.3");
-                    }
-                }
-                .tabulator-pages {
-                    margin: 0 theme("spacing.1");
-                    gap: theme("spacing.[2.5]");
-                }
-                .tabulator-page {
-                    min-width: 40px;
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    border-color: transparent;
-                    color: theme("colors.slate.700");
-                    transition-property: color, background-color, border-color,
-                        text-decoration-color, fill, stroke, opacity, box-shadow,
-                        transform, filter, backdrop-filter;
-                    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-                    transition-duration: 200ms;
-                    border-width: 1px;
-                    align-items: center;
-                    margin: 0;
-                    justify-content: center;
-                    padding: theme("spacing.2") theme("spacing.3");
-                    border-radius: 0.5rem;
-                    font-weight: theme("fontWeight.normal");
-                    cursor: pointer;
-                    &:focus {
-                        box-shadow: theme("ringWidth.4");
-                        --tw-ring-color: theme("colors.primary");
-                        --tw-text-opacity: 0.2;
-                    }
-                    &:hover:not(:disabled) {
-                        --tw-background-opacity: 0.9;
-                        --tw-border-opacity: 0.9;
-                    }
-                    &:not(button) {
-                        text-align: center;
-                    }
-                    &:disabled {
-                        opacity: 0.7;
-                        cursor: not-allowed;
-                    }
-                    @media (max-width: calc(theme("screens.sm") - 1px)) {
-                        margin-right: 0;
-                        padding-left: theme("spacing.1");
-                        padding-right: theme("spacing.1");
-                    }
-                    &:hover {
-                        border-color: theme("colors.slate.200");
-                        background-color: theme("colors.slate.50");
-                        color: theme("colors.slate.700");
-                    }
-                    &.active {
-                        border-color: theme("colors.slate.200");
-                        font-weight: theme("fontWeight.medium");
-                        box-shadow: theme("boxShadow.sm");
-                        &:hover {
-                            background-color: theme("colors.slate.100");
-                        }
-                    }
-                    &[data-page="first"],
-                    &[data-page="prev"],
-                    &[data-page="next"],
-                    &[data-page="last"] {
-                        width: theme("spacing.5");
-                        color: transparent;
-                    }
-                    &[data-page="first"] {
-                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='11 17 6 12 11 7'%3E%3C/polyline%3E%3Cpolyline points='18 17 13 12 18 7'%3E%3C/polyline%3E%3C/svg%3E");
-                        background-size: 50%;
-                        background-position: center;
-                        background-repeat: no-repeat;
-                    }
-                    &[data-page="prev"] {
-                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
-                        background-size: 45%;
-                        background-position: center;
-                        background-repeat: no-repeat;
-                    }
-                    &[data-page="next"] {
-                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
-                        background-size: 45%;
-                        background-position: center;
-                        background-repeat: no-repeat;
-                    }
-                    &[data-page="last"] {
-                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='13 17 18 12 13 7'%3E%3C/polyline%3E%3Cpolyline points='6 17 11 12 6 7'%3E%3C/polyline%3E%3C/svg%3E");
-                        background-size: 50%;
-                        background-position: center;
-                        background-repeat: no-repeat;
-                    }
-                }
+        .tabulator-page {
+          min-width: 40px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          border-color: transparent;
+          color: theme('colors.slate.700');
+          transition-property:
+            color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+            filter, backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 200ms;
+          border-width: 1px;
+          align-items: center;
+          margin: 0;
+          justify-content: center;
+          padding: theme('spacing.2') theme('spacing.3');
+          border-radius: 0.5rem;
+          font-weight: theme('fontWeight.normal');
+          cursor: pointer;
+          &:focus {
+            box-shadow: theme('ringWidth.4');
+            --tw-ring-color: theme('colors.primary');
+            --tw-text-opacity: 0.2;
+          }
+          &:hover:not(:disabled) {
+            --tw-background-opacity: 0.9;
+            --tw-border-opacity: 0.9;
+          }
+          &:not(button) {
+            text-align: center;
+          }
+          &:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+          }
+          @media (max-width: calc(theme('screens.sm') - 1px)) {
+            margin-right: 0;
+            padding-left: theme('spacing.1');
+            padding-right: theme('spacing.1');
+          }
+          &:hover {
+            border-color: theme('colors.slate.200');
+            background-color: theme('colors.slate.50');
+            color: theme('colors.slate.700');
+          }
+          &.active {
+            border-color: theme('colors.slate.200');
+            font-weight: theme('fontWeight.medium');
+            box-shadow: theme('boxShadow.sm');
+            &:hover {
+              background-color: theme('colors.slate.100');
             }
+          }
+          &[data-page='first'],
+          &[data-page='prev'],
+          &[data-page='next'],
+          &[data-page='last'] {
+            width: theme('spacing.5');
+            color: transparent;
+          }
+          &[data-page='first'] {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='11 17 6 12 11 7'%3E%3C/polyline%3E%3Cpolyline points='18 17 13 12 18 7'%3E%3C/polyline%3E%3C/svg%3E");
+            background-size: 50%;
+            background-position: center;
+            background-repeat: no-repeat;
+          }
+          &[data-page='prev'] {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
+            background-size: 45%;
+            background-position: center;
+            background-repeat: no-repeat;
+          }
+          &[data-page='next'] {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
+            background-size: 45%;
+            background-position: center;
+            background-repeat: no-repeat;
+          }
+          &[data-page='last'] {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='13 17 18 12 13 7'%3E%3C/polyline%3E%3Cpolyline points='6 17 11 12 6 7'%3E%3C/polyline%3E%3C/svg%3E");
+            background-size: 50%;
+            background-position: center;
+            background-repeat: no-repeat;
+          }
         }
+      }
     }
-    .tabulator-tableholder {
-        overflow-x: auto;
-        overflow-y: hidden;
-        .tabulator-placeholder {
-            margin-top: theme("spacing.2");
-            .tabulator-placeholder-contents {
-                color: theme("colors.slate.500");
-                font-weight: theme("fontWeight.normal");
-                font-size: theme("fontSize.sm");
-            }
-        }
+  }
+  .tabulator-tableholder {
+    overflow-x: auto;
+    overflow-y: hidden;
+    .tabulator-placeholder {
+      margin-top: theme('spacing.2');
+      .tabulator-placeholder-contents {
+        color: theme('colors.slate.500');
+        font-weight: theme('fontWeight.normal');
+        font-size: theme('fontSize.sm');
+      }
     }
-    .tabulator-alert {
-        background: #ffffffbd;
-        .tabulator-alert-msg {
-            font-weight: theme("fontWeight.normal");
-            font-size: theme("fontSize.base");
-            background-color: transparent;
-            &.tabulator-alert-state-msg {
-                border-width: 0;
-                color: theme("colors.slate.700");
-            }
-            &.tabulator-alert-state-error {
-                border-width: 0;
-                color: theme("colors.danger");
-            }
-        }
+  }
+  .tabulator-alert {
+    background: #ffffffbd;
+    .tabulator-alert-msg {
+      font-weight: theme('fontWeight.normal');
+      font-size: theme('fontSize.base');
+      background-color: transparent;
+      &.tabulator-alert-state-msg {
+        border-width: 0;
+        color: theme('colors.slate.700');
+      }
+      &.tabulator-alert-state-error {
+        border-width: 0;
+        color: theme('colors.danger');
+      }
     }
+  }
 }
 
 .dark {
-    .tabulator {
-        .tabulator-header {
-            color: theme("colors.slate.300");
-            border-color: theme("colors.darkmode.400");
-            .tabulator-headers .tabulator-col:hover {
-                background-color: theme("colors.darkmode.300");
-            }
+  .tabulator {
+    .tabulator-header {
+      color: theme('colors.slate.300');
+      border-color: theme('colors.darkmode.400');
+      .tabulator-headers .tabulator-col:hover {
+        background-color: theme('colors.darkmode.300');
+      }
+    }
+    .tabulator-table {
+      background-color: transparent;
+      color: theme('colors.slate.200');
+      .tabulator-row {
+        background-color: transparent;
+        border-color: transparent;
+        &:hover,
+        &.tabulator-row-even:hover {
+          background-color: theme('colors.darkmode.700');
         }
-        .tabulator-table {
-            background-color: transparent;
-            color: theme("colors.slate.200");
-            .tabulator-row {
-                background-color: transparent;
-                border-color: transparent;
-                &:hover,
-                &.tabulator-row-even:hover {
-                    background-color: theme("colors.darkmode.700");
-                }
-                &.tabulator-row-even {
-                    background-color: theme("colors.darkmode.400");
-                }
-            }
+        &.tabulator-row-even {
+          background-color: theme('colors.darkmode.400');
         }
-        .tabulator-footer {
-            .tabulator-paginator {
-                > label {
-                    color: theme("colors.slate.200");
-                }
-                .tabulator-page-size {
-                    background-color: theme("colors.darkmode.300");
-                    border-color: theme("colors.darkmode.600");
-                    color: theme("colors.slate.200");
-                }
-                .tabulator-page {
-                    background: transparent;
-                    color: theme("colors.slate.200");
-                    &:focus {
-                        --tw-ring-color: theme("colors.slate.700");
-                        --tw-ring-opacity: 0.5;
-                        transition: none;
-                    }
-                    &:hover {
-                        background-color: theme("colors.darkmode.700");
-                        color: theme("colors.slate.300");
-                    }
-                    &.active,
-                    &.active:hover {
-                        background-color: theme("colors.darkmode.300");
-                    }
-                }
-            }
+      }
+    }
+    .tabulator-footer {
+      .tabulator-paginator {
+        > label {
+          color: theme('colors.slate.200');
         }
-        .tabulator-alert {
-            background-color: theme("colors.black"/ 30%);
-            .tabulator-alert-msg.tabulator-alert-state-msg {
-                color: theme("colors.slate.200");
-            }
+        .tabulator-page-size {
+          background-color: theme('colors.darkmode.300');
+          border-color: theme('colors.darkmode.600');
+          color: theme('colors.slate.200');
+        }
+        .tabulator-page {
+          background: transparent;
+          color: theme('colors.slate.200');
+          &:focus {
+            --tw-ring-color: theme('colors.slate.700');
+            --tw-ring-opacity: 0.5;
+            transition: none;
+          }
+          &:hover {
+            background-color: theme('colors.darkmode.700');
+            color: theme('colors.slate.300');
+          }
+          &.active,
+          &.active:hover {
+            background-color: theme('colors.darkmode.300');
+          }
         }
+      }
+    }
+    .tabulator-alert {
+      background-color: theme('colors.black'/ 30%);
+      .tabulator-alert-msg.tabulator-alert-state-msg {
+        color: theme('colors.slate.200');
+      }
     }
+  }
 }
diff --git a/web/src/assets/css/vendors/tippy.css b/web/src/assets/css/vendors/tippy.css
index 197990649..37a92a41e 100644
--- a/web/src/assets/css/vendors/tippy.css
+++ b/web/src/assets/css/vendors/tippy.css
@@ -1,57 +1,59 @@
-@import "tippy.js/dist/tippy.css";
-@import "tippy.js/themes/light.css";
-@import "tippy.js/dist/svg-arrow.css";
-@import "tippy.js/animations/shift-away.css";
+@import 'tippy.js/dist/tippy.css';
+@import 'tippy.js/themes/light.css';
+@import 'tippy.js/dist/svg-arrow.css';
+@import 'tippy.js/animations/shift-away.css';
 
 .tooltip-content {
-    left: 10000px;
-    position: fixed;
+  left: 10000px;
+  position: fixed;
 }
 .tippy-box {
-    border-radius: theme("borderRadius.md");
-    .tippy-content {
-        padding: theme("spacing.[1.5]") theme("spacing.3");
-    }
+  border-radius: theme('borderRadius.md');
+  .tippy-content {
+    padding: theme('spacing.[1.5]') theme('spacing.3');
+  }
 }
 .tippy-popper {
-    &[x-placement="left"],
-    &[x-placement="right"],
-    &[x-placement="left-start"],
-    &[x-placement="left-end"],
-    &[x-placement="right-start"],
-    &[x-placement="right-end"] {
-        .tippy-roundarrow,
-        .tippy-arrow {
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-        }
+  &[x-placement='left'],
+  &[x-placement='right'],
+  &[x-placement='left-start'],
+  &[x-placement='left-end'],
+  &[x-placement='right-start'],
+  &[x-placement='right-end'] {
+    .tippy-roundarrow,
+    .tippy-arrow {
+      top: 0;
+      bottom: 0;
+      margin-top: auto;
+      margin-bottom: auto;
     }
-    &[x-placement="top"],
-    &[x-placement="bottom"],
-    &[x-placement="top-start"],
-    &[x-placement="top-end"],
-    &[x-placement="bottom-start"],
-    &[x-placement="bottom-end"] {
-        .tippy-roundarrow,
-        .tippy-arrow {
-            left: 0;
-            right: 0;
-            margin-left: auto;
-            margin-right: auto;
-        }
+  }
+  &[x-placement='top'],
+  &[x-placement='bottom'],
+  &[x-placement='top-start'],
+  &[x-placement='top-end'],
+  &[x-placement='bottom-start'],
+  &[x-placement='bottom-end'] {
+    .tippy-roundarrow,
+    .tippy-arrow {
+      left: 0;
+      right: 0;
+      margin-left: auto;
+      margin-right: auto;
     }
+  }
 }
 
 .dark {
-    .tippy-box {
-        box-shadow: 0 0 20px 4px #00000026, 0 4px 80px -8px #24282f40,
-            0 4px 4px -2px #5b5e6926;
-        color: theme("colors.slate.300");
-        background-color: theme("colors.darkmode.300");
-        & > .tippy-svg-arrow {
-            fill: theme("colors.darkmode.300");
-        }
+  .tippy-box {
+    box-shadow:
+      0 0 20px 4px #00000026,
+      0 4px 80px -8px #24282f40,
+      0 4px 4px -2px #5b5e6926;
+    color: theme('colors.slate.300');
+    background-color: theme('colors.darkmode.300');
+    & > .tippy-svg-arrow {
+      fill: theme('colors.darkmode.300');
     }
+  }
 }
diff --git a/web/src/assets/css/vendors/toastify.css b/web/src/assets/css/vendors/toastify.css
index 96e585692..77e7c1fb8 100644
--- a/web/src/assets/css/vendors/toastify.css
+++ b/web/src/assets/css/vendors/toastify.css
@@ -1,31 +1,31 @@
-@import "toastify-js/src/toastify.css";
+@import 'toastify-js/src/toastify.css';
 
 .toastify {
-    background: none;
-    box-shadow: none;
-    padding: 0;
-    color: theme("colors.slate.700");
-    max-width: calc(100% - 30px);
-    @media screen(md) {
-        max-width: none;
-    }
-    .toast-close {
-        color: transparent;
-        position: absolute;
-        opacity: 1;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        padding-right: theme("spacing.3");
-        display: flex;
-        align-items: center;
-        &:before {
-            content: "×";
-            display: block;
-            color: theme("colors.slate.500");
-            font-size: theme("fontSize.3xl");
-            margin-top: calc(theme("spacing.[1.5]") * -1);
-            font-weight: theme("fontWeight.light");
-        }
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  color: theme('colors.slate.700');
+  max-width: calc(100% - 30px);
+  @media screen(md) {
+    max-width: none;
+  }
+  .toast-close {
+    color: transparent;
+    position: absolute;
+    opacity: 1;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding-right: theme('spacing.3');
+    display: flex;
+    align-items: center;
+    &:before {
+      content: '×';
+      display: block;
+      color: theme('colors.slate.500');
+      font-size: theme('fontSize.3xl');
+      margin-top: calc(theme('spacing.[1.5]') * -1);
+      font-weight: theme('fontWeight.light');
     }
+  }
 }
diff --git a/web/src/assets/css/vendors/tom-select.css b/web/src/assets/css/vendors/tom-select.css
index b67298f47..9160ea027 100644
--- a/web/src/assets/css/vendors/tom-select.css
+++ b/web/src/assets/css/vendors/tom-select.css
@@ -1,175 +1,175 @@
-@import "tom-select/dist/css/tom-select.css";
+@import 'tom-select/dist/css/tom-select.css';
 
 .tom-select {
+  &.ts-wrapper,
+  &.plugin-dropdown_input.focus.dropdown-active {
+    border-width: 1px;
+    border-style: solid;
+    box-shadow: theme('boxShadow.sm');
+    border-radius: theme('borderRadius.DEFAULT');
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-size: 18px;
+    background-position: center right 0.6rem;
+    background-repeat: no-repeat;
+    .ts-control {
+      border: 0;
+      display: flex;
+      outline: none;
+      min-height: 36px;
+      align-items: center;
+      background-color: transparent;
+      font-size: inherit;
+      padding: theme('spacing.2') theme('spacing.3');
+      input {
+        font-size: inherit;
+      }
+    }
+  }
+  &.ts-wrapper.disabled {
+    background-color: theme('colors.slate.100');
+  }
+  &.ts-wrapper.single.input-active .ts-control {
+    background-color: transparent;
+  }
+  &.ts-wrapper.multi {
+    &.has-items .ts-control {
+      column-gap: theme('spacing.[2.5]');
+      row-gap: theme('spacing.1');
+      padding: theme('spacing.1') theme('spacing.[2.5]');
+    }
+    .ts-control > div {
+      padding: 0 theme('spacing.2');
+      margin: 0 0 0 calc(theme('spacing.[1.5]') * -1);
+      border-radius: theme('borderRadius.DEFAULT');
+      background-color: theme('colors.slate.200');
+    }
+  }
+  &.ts-wrapper.plugin-remove_button .item .remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-color: theme('colors.slate.300');
+    padding: theme('spacing.1') theme('spacing.2');
+  }
+  &.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
+    margin-left: theme('spacing.2');
+  }
+  &.ts-wrapper .dropdown-header {
+    border-color: theme('colors.slate.200');
+    background-color: theme('colors.slate.100');
+    padding: theme('spacing.[2.5]');
+    font-weight: theme('fontWeight.medium');
+  }
+  &.plugin-dropdown_input.focus.dropdown-active {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  }
+  &.plugin-dropdown_input .dropdown-input-wrap .dropdown-input {
+    outline: none;
+  }
+  .ts-dropdown {
+    left: -1px;
+    right: -1px;
+    width: auto;
+    z-index: 50;
+    margin-top: 1px;
+    font-size: inherit;
+    box-shadow: theme('boxShadow.sm');
+    border-radius: theme('borderRadius.DEFAULT');
+    border: 1px solid theme('colors.slate.200');
+    .dropdown-input-wrap {
+      padding: theme('spacing.2');
+      .dropdown-input {
+        border-radius: theme('borderRadius.DEFAULT');
+        border: 1px solid theme('colors.slate.200');
+      }
+    }
+    .optgroup-header {
+      padding: theme('spacing.[2.5]') theme('spacing.3');
+      font-weight: theme('fontWeight.medium');
+      background-color: theme('colors.slate.100');
+    }
+    .option {
+      padding: theme('spacing.[2.5]') theme('spacing.3');
+      &[data-selectable] {
+        &.active:not(.selected) {
+          color: inherit;
+          background-color: transparent;
+          background-color: theme('colors.slate.100');
+        }
+        &:hover:not(.selected) {
+          color: inherit;
+          background-color: theme('colors.slate.100');
+        }
+      }
+    }
+    .selected {
+      color: white;
+      background-color: theme('colors.primary');
+    }
+    [data-selectable] .highlight {
+      color: white;
+      background-color: theme('colors.danger');
+    }
+  }
+}
+
+.dark {
+  .tom-select {
     &.ts-wrapper,
     &.plugin-dropdown_input.focus.dropdown-active {
-        border-width: 1px;
-        border-style: solid;
-        box-shadow: theme("boxShadow.sm");
-        border-radius: theme("borderRadius.DEFAULT");
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-        background-size: 18px;
-        background-position: center right 0.6rem;
-        background-repeat: no-repeat;
-        .ts-control {
-            border: 0;
-            display: flex;
-            outline: none;
-            min-height: 36px;
-            align-items: center;
-            background-color: transparent;
-            font-size: inherit;
-            padding: theme("spacing.2") theme("spacing.3");
-            input {
-                font-size: inherit;
-            }
-        }
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+      .ts-control {
+        color: theme('colors.slate.300');
+      }
     }
     &.ts-wrapper.disabled {
-        background-color: theme("colors.slate.100");
-    }
-    &.ts-wrapper.single.input-active .ts-control {
-        background-color: transparent;
+      border-color: transparent;
+      background-color: theme('colors.darkmode.800' / 50%);
     }
     &.ts-wrapper.multi {
-        &.has-items .ts-control {
-            column-gap: theme("spacing.[2.5]");
-            row-gap: theme("spacing.1");
-            padding: theme("spacing.1") theme("spacing.[2.5]");
-        }
-        .ts-control > div {
-            padding: 0 theme("spacing.2");
-            margin: 0 0 0 calc(theme("spacing.[1.5]") * -1);
-            border-radius: theme("borderRadius.DEFAULT");
-            background-color: theme("colors.slate.200");
-        }
+      .ts-control > div {
+        color: theme('colors.slate.300');
+        background-color: theme('colors.darkmode.600');
+      }
     }
     &.ts-wrapper.plugin-remove_button .item .remove {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-color: theme("colors.slate.300");
-        padding: theme("spacing.1") theme("spacing.2");
-    }
-    &.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
-        margin-left: theme("spacing.2");
+      border-color: theme('colors.darkmode.400');
     }
     &.ts-wrapper .dropdown-header {
-        border-color: theme("colors.slate.200");
-        background-color: theme("colors.slate.100");
-        padding: theme("spacing.[2.5]");
-        font-weight: theme("fontWeight.medium");
+      border-color: theme('colors.darkmode.800');
+      background-color: theme('colors.darkmode.800');
     }
     &.plugin-dropdown_input.focus.dropdown-active {
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-    }
-    &.plugin-dropdown_input .dropdown-input-wrap .dropdown-input {
-        outline: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
     }
     .ts-dropdown {
-        left: -1px;
-        right: -1px;
-        width: auto;
-        z-index: 50;
-        margin-top: 1px;
-        font-size: inherit;
-        box-shadow: theme("boxShadow.sm");
-        border-radius: theme("borderRadius.DEFAULT");
-        border: 1px solid theme("colors.slate.200");
-        .dropdown-input-wrap {
-            padding: theme("spacing.2");
-            .dropdown-input {
-                border-radius: theme("borderRadius.DEFAULT");
-                border: 1px solid theme("colors.slate.200");
-            }
-        }
-        .optgroup-header {
-            padding: theme("spacing.[2.5]") theme("spacing.3");
-            font-weight: theme("fontWeight.medium");
-            background-color: theme("colors.slate.100");
-        }
-        .option {
-            padding: theme("spacing.[2.5]") theme("spacing.3");
-            &[data-selectable] {
-                &.active:not(.selected) {
-                    color: inherit;
-                    background-color: transparent;
-                    background-color: theme("colors.slate.100");
-                }
-                &:hover:not(.selected) {
-                    color: inherit;
-                    background-color: theme("colors.slate.100");
-                }
-            }
-        }
-        .selected {
-            color: white;
-            background-color: theme("colors.primary");
-        }
-        [data-selectable] .highlight {
-            color: white;
-            background-color: theme("colors.danger");
-        }
-    }
-}
-
-.dark {
-    .tom-select {
-        &.ts-wrapper,
-        &.plugin-dropdown_input.focus.dropdown-active {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-            .ts-control {
-                color: theme("colors.slate.300");
-            }
-        }
-        &.ts-wrapper.disabled {
-            border-color: transparent;
-            background-color: theme("colors.darkmode.800" / 50%);
-        }
-        &.ts-wrapper.multi {
-            .ts-control > div {
-                color: theme("colors.slate.300");
-                background-color: theme("colors.darkmode.600");
-            }
+      color: theme('colors.slate.300');
+      border-color: theme('colors.darkmode.800');
+      background-color: theme('colors.darkmode.700');
+      .dropdown-input-wrap {
+        .dropdown-input {
+          border-color: theme('colors.darkmode.800');
+          background-color: theme('colors.darkmode.600');
         }
-        &.ts-wrapper.plugin-remove_button .item .remove {
-            border-color: theme("colors.darkmode.400");
+      }
+      .optgroup-header {
+        color: theme('colors.slate.300');
+        background-color: theme('colors.darkmode.800');
+      }
+      .option {
+        &[data-selectable] {
+          &.active:not(.selected) {
+            background-color: theme('colors.darkmode.600');
+          }
+          &:hover:not(.selected) {
+            background-color: theme('colors.darkmode.600');
+          }
         }
-        &.ts-wrapper .dropdown-header {
-            border-color: theme("colors.darkmode.800");
-            background-color: theme("colors.darkmode.800");
-        }
-        &.plugin-dropdown_input.focus.dropdown-active {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-        }
-        .ts-dropdown {
-            color: theme("colors.slate.300");
-            border-color: theme("colors.darkmode.800");
-            background-color: theme("colors.darkmode.700");
-            .dropdown-input-wrap {
-                .dropdown-input {
-                    border-color: theme("colors.darkmode.800");
-                    background-color: theme("colors.darkmode.600");
-                }
-            }
-            .optgroup-header {
-                color: theme("colors.slate.300");
-                background-color: theme("colors.darkmode.800");
-            }
-            .option {
-                &[data-selectable] {
-                    &.active:not(.selected) {
-                        background-color: theme("colors.darkmode.600");
-                    }
-                    &:hover:not(.selected) {
-                        background-color: theme("colors.darkmode.600");
-                    }
-                }
-            }
-        }
-    }
-    .ts-wrapper {
-        border-color: theme("colors.darkmode.800");
-        background-color: theme("colors.darkmode.800");
+      }
     }
+  }
+  .ts-wrapper {
+    border-color: theme('colors.darkmode.800');
+    background-color: theme('colors.darkmode.800');
+  }
 }
diff --git a/web/src/axios/index.ts b/web/src/axios/index.ts
index 3636b961f..21a89c7e0 100644
--- a/web/src/axios/index.ts
+++ b/web/src/axios/index.ts
@@ -1,51 +1,62 @@
-import axios from "axios";
-
-const defaultAxiosInstance = axios.create({
-    baseURL: import.meta.env.VITE_BACKEND_URL,
-    headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Accept': 'application/json',
-        'X-LogRequestResponse': 'false',
-        'X-Sanitizer-Mode': ''
-    }
-});
-
-defaultAxiosInstance.defaults.withCredentials = true;
-defaultAxiosInstance.defaults.withXSRFToken = true;
-
-defaultAxiosInstance.interceptors.request.use(function (config) {
-    config.headers['X-Localization'] = localStorage.getItem('DCSLAB_LANG') == null ? document.documentElement.lang : localStorage.getItem('DCSLAB_LANG');
-    return config;
-});
-
-defaultAxiosInstance.interceptors.response.use(response => {
-    return response;
-}, error => {
-    if (error.response == undefined || error.response.status == undefined) return Promise.reject(error);
-    switch (error.response.status) {
-        case 401:
-            window.location.replace('/auth/login');
-            break;
-        case 403:
-            break;
-        case 500:
-            break;
-        default:
-            break;
-    }
-    return Promise.reject(error);
-});
-
-const authAxiosInstance = axios.create({
-    baseURL: import.meta.env.VITE_BACKEND_URL,
-    headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Accept': 'application/json'
-    }
-});
-
-authAxiosInstance.defaults.withCredentials = true;
-
-const axiosInstance = axios.create();
-
-export { defaultAxiosInstance as default, authAxiosInstance, axiosInstance }
\ No newline at end of file
+import axios from 'axios';
+import { getBackendUrl } from '@/utils/config';
+
+const defaultAxiosInstance = axios.create({
+  baseURL: getBackendUrl(),
+  headers: {
+    'X-Requested-With': 'XMLHttpRequest',
+    Accept: 'application/json',
+    'X-LogRequestResponse': 'false',
+    'X-Sanitizer-Mode': '',
+  },
+});
+
+defaultAxiosInstance.defaults.withCredentials = true;
+defaultAxiosInstance.defaults.withXSRFToken = true;
+
+defaultAxiosInstance.interceptors.request.use(function (config) {
+  config.headers['X-Localization'] =
+    localStorage.getItem('DCSLAB_LANG') == null ? document.documentElement.lang : localStorage.getItem('DCSLAB_LANG');
+  config.headers['X-Timezone'] = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  return config;
+});
+
+defaultAxiosInstance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (error.response == undefined || error.response.status == undefined) return Promise.reject(error);
+    switch (error.response.status) {
+      case 401:
+        window.location.replace('/auth/login');
+        break;
+      case 403:
+        break;
+      case 500:
+        break;
+      default:
+        break;
+    }
+    return Promise.reject(error);
+  },
+);
+
+const authAxiosInstance = axios.create({
+  baseURL: getBackendUrl(),
+  headers: {
+    'X-Requested-With': 'XMLHttpRequest',
+    Accept: 'application/json',
+  },
+});
+
+authAxiosInstance.defaults.withCredentials = true;
+
+authAxiosInstance.interceptors.request.use(function (config) {
+  config.headers['X-Timezone'] = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  return config;
+});
+
+const axiosInstance = axios.create();
+
+export { defaultAxiosInstance as default, authAxiosInstance, axiosInstance };
diff --git a/web/src/components/AlertPlaceholder/AlertPlaceholder.vue b/web/src/components/AlertPlaceholder/AlertPlaceholder.vue
index ca835f035..04658fe6c 100644
--- a/web/src/components/AlertPlaceholder/AlertPlaceholder.vue
+++ b/web/src/components/AlertPlaceholder/AlertPlaceholder.vue
@@ -1,65 +1,71 @@
-<script setup lang="ts">
-import { toRef, computed } from "vue";
-import Alert from "@/components/Base/Alert";
-import Lucide from "@/components/Base/Lucide";
-import { useI18n } from "vue-i18n";
-
-export interface AlertPlaceholderProps {
-    alertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
-    alertList: Record<string, Array<string>> | null,
-    title: string,
-}
-
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<AlertPlaceholderProps>(), {
-    alertType: 'hidden',
-    alertList: null,
-    title: '',
-});
-
-const emits = defineEmits(['dismiss']);
-
-const alertType = toRef(props, 'alertType');
-const alertList = toRef(props, 'alertList');
-const title = toRef(props, 'title');
-
-const computedVariant = computed(() => {
-    if (alertType.value == 'danger') return 'soft-danger';
-    if (alertType.value == 'success') return 'soft-success';
-    if (alertType.value == 'warning') return 'soft-warning';
-    if (alertType.value == 'pending') return 'soft-pending';
-    if (alertType.value == 'dark') return 'soft-dark';
-    
-    return 'soft-danger';
-});
-
-const dismiss = () => {
-    emits('dismiss');
-}
-</script>
-
-<template>
-    <div v-if="alertType != 'hidden'" class="mt-4">
-        <Alert :variant="computedVariant" class="flex items-center mb-2">
-            <div class="flex flex-col">
-                <div class="flex items-center">
-                    <Lucide icon="AlertCircle" class="w-6 h-6 mr-2" />
-                    {{ title != '' ? title : t('components.alert-placeholder.default_title') }}
-                    <Alert.DismissButton type="button" class="text-white" aria-label="Close" @click="dismiss">
-                        <Lucide icon="X" class="w-4 h-4" />
-                    </Alert.DismissButton>
-                </div>
-                <div class="mt-3 ml-12">
-                    <ul class="list-disc">
-                        <template v-for="(e, eIdx) in alertList" :key="eIdx">
-                            <li v-if="(typeof e === 'string')">{{ e }}</li>
-                            <li v-for="(ee, eeIdx) in e" v-else-if="(typeof e === 'object' && Array.isArray(e))"
-                                :key="eeIdx" class="ml-5">{{ ee }}</li>
-                        </template>
-                    </ul>
-                </div>
-            </div>
-        </Alert>
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { toRef, computed } from 'vue';
+  import Alert from '@/components/Base/Alert';
+  import Lucide from '@/components/Base/Lucide';
+  import { useI18n } from 'vue-i18n';
+
+  export interface AlertPlaceholderProps {
+    alertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark';
+    alertList: Record<string, Array<string>> | null;
+    title: string;
+  }
+
+  const { t } = useI18n();
+
+  const props = withDefaults(defineProps<AlertPlaceholderProps>(), {
+    alertType: 'hidden',
+    alertList: null,
+    title: '',
+  });
+
+  const emits = defineEmits(['dismiss']);
+
+  const alertType = toRef(props, 'alertType');
+  const alertList = toRef(props, 'alertList');
+  const title = toRef(props, 'title');
+
+  const computedVariant = computed(() => {
+    if (alertType.value == 'danger') return 'soft-danger';
+    if (alertType.value == 'success') return 'soft-success';
+    if (alertType.value == 'warning') return 'soft-warning';
+    if (alertType.value == 'pending') return 'soft-pending';
+    if (alertType.value == 'dark') return 'soft-dark';
+
+    return 'soft-danger';
+  });
+
+  const dismiss = () => {
+    emits('dismiss');
+  };
+</script>
+
+<template>
+  <div v-if="alertType != 'hidden'" class="mt-4">
+    <Alert :variant="computedVariant" class="flex items-center mb-2">
+      <div class="flex flex-col">
+        <div class="flex items-center">
+          <Lucide icon="AlertCircle" class="w-6 h-6 mr-2" />
+          {{ title != '' ? title : t('components.alert-placeholder.default_title') }}
+          <Alert.DismissButton type="button" class="text-white" aria-label="Close" @click="dismiss">
+            <Lucide icon="X" class="w-4 h-4" />
+          </Alert.DismissButton>
+        </div>
+        <div class="mt-3 ml-12">
+          <ul class="list-disc">
+            <template v-for="(e, eIdx) in alertList" :key="eIdx">
+              <li v-if="typeof e === 'string'">{{ e }}</li>
+              <li
+                v-for="(ee, eeIdx) in e"
+                v-else-if="typeof e === 'object' && Array.isArray(e)"
+                :key="eeIdx"
+                class="ml-5"
+              >
+                {{ ee }}
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </Alert>
+  </div>
+</template>
diff --git a/web/src/components/AlertPlaceholder/EmailVerificationAlert.vue b/web/src/components/AlertPlaceholder/EmailVerificationAlert.vue
index 1a379aa9c..140a8445c 100644
--- a/web/src/components/AlertPlaceholder/EmailVerificationAlert.vue
+++ b/web/src/components/AlertPlaceholder/EmailVerificationAlert.vue
@@ -1,25 +1,25 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import Alert from "@/components/Base/Alert";
-import Lucide from "@/components/Base/Lucide";
-import { useI18n } from "vue-i18n";
-import { useUserContextStore } from "@/stores/user-context";
-
-const { t } = useI18n();
-const userContextStore = useUserContextStore();
-
-const userContext = computed(() => userContextStore.getUserContext);
-const userContextIsAuth = computed(() => userContextStore.getIsAuthenticated);
-const userContextIsLoaded = computed(() => userContextStore.getIsLoaded);
-</script>
-
-<template>
-    <div v-if="userContextIsLoaded && userContextIsAuth && userContext.email_verified == false" class="mt-8">
-        <Alert variant="secondary" class="flex items-center mb-2" v-slot="{ dismiss }">
-            {{ t('components.alert-placeholder.email_verification.message') }}
-            <Alert.DismissButton type="button" class="text-white" aria-label="Close" @click="dismiss">
-                <Lucide icon="X" class="text-black w-4 h-4" />
-            </Alert.DismissButton>
-        </Alert>
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import Alert from '@/components/Base/Alert';
+  import Lucide from '@/components/Base/Lucide';
+  import { useI18n } from 'vue-i18n';
+  import { useUserContextStore } from '@/stores/user-context';
+
+  const { t } = useI18n();
+  const userContextStore = useUserContextStore();
+
+  const userContext = computed(() => userContextStore.getUserContext);
+  const userContextIsAuth = computed(() => userContextStore.getIsAuthenticated);
+  const userContextIsLoaded = computed(() => userContextStore.getIsLoaded);
+</script>
+
+<template>
+  <div v-if="userContextIsLoaded && userContextIsAuth && userContext.email_verified == false" class="mt-8">
+    <Alert variant="secondary" class="flex items-center mb-2" v-slot="{ dismiss }">
+      {{ t('components.alert-placeholder.email_verification.message') }}
+      <Alert.DismissButton type="button" class="text-white" aria-label="Close" @click="dismiss">
+        <Lucide icon="X" class="text-black w-4 h-4" />
+      </Alert.DismissButton>
+    </Alert>
+  </div>
+</template>
diff --git a/web/src/components/AlertPlaceholder/index.ts b/web/src/components/AlertPlaceholder/index.ts
index 139de2509..2ed505261 100644
--- a/web/src/components/AlertPlaceholder/index.ts
+++ b/web/src/components/AlertPlaceholder/index.ts
@@ -1,7 +1,4 @@
-import AlertPlaceholder from "./AlertPlaceholder.vue";
-import EmailVerificationAlert from "./EmailVerificationAlert.vue";
-
-export {
-    AlertPlaceholder as default,
-    EmailVerificationAlert,
-};
\ No newline at end of file
+import AlertPlaceholder from './AlertPlaceholder.vue';
+import EmailVerificationAlert from './EmailVerificationAlert.vue';
+
+export { AlertPlaceholder as default, EmailVerificationAlert };
diff --git a/web/src/components/Base/Alert/Alert.vue b/web/src/components/Base/Alert/Alert.vue
index 3bd3990cf..43a52703c 100644
--- a/web/src/components/Base/Alert/Alert.vue
+++ b/web/src/components/Base/Alert/Alert.vue
@@ -1,176 +1,173 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { TransitionRoot } from "@headlessui/vue";
-import { computed, ref, type HTMLAttributes, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { TransitionRoot } from '@headlessui/vue';
+  import { computed, ref, type HTMLAttributes, useAttrs } from 'vue';
 
-type Variant =
-  | "primary"
-  | "secondary"
-  | "success"
-  | "warning"
-  | "pending"
-  | "danger"
-  | "dark"
-  | "outline-primary"
-  | "outline-secondary"
-  | "outline-success"
-  | "outline-warning"
-  | "outline-pending"
-  | "outline-danger"
-  | "outline-dark"
-  | "soft-primary"
-  | "soft-secondary"
-  | "soft-success"
-  | "soft-warning"
-  | "soft-pending"
-  | "soft-danger"
-  | "soft-dark";
+  type Variant =
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'pending'
+    | 'danger'
+    | 'dark'
+    | 'outline-primary'
+    | 'outline-secondary'
+    | 'outline-success'
+    | 'outline-warning'
+    | 'outline-pending'
+    | 'outline-danger'
+    | 'outline-dark'
+    | 'soft-primary'
+    | 'soft-secondary'
+    | 'soft-success'
+    | 'soft-warning'
+    | 'soft-pending'
+    | 'soft-danger'
+    | 'soft-dark';
 
-interface AlertProps extends /* @vue-ignore */ HTMLAttributes {
-  as?: string | object;
-  dismissible?: boolean;
-  variant?: Variant;
-  onShow?: () => {};
-  onShown?: () => {};
-  onHide?: () => {};
-  onHidden?: () => {};
-}
-
-const { as, dismissible, variant, ...props } = withDefaults(
-  defineProps<AlertProps>(),
-  {
-    as: "div",
+  interface AlertProps extends /* @vue-ignore */ HTMLAttributes {
+    as?: string | object;
+    dismissible?: boolean;
+    variant?: Variant;
+    onShow?: () => {};
+    onShown?: () => {};
+    onHide?: () => {};
+    onHidden?: () => {};
   }
-);
 
-const attrs = useAttrs();
-const show = ref<boolean>(true);
+  const { as, dismissible, variant, ...props } = withDefaults(defineProps<AlertProps>(), {
+    as: 'div',
+  });
+
+  const attrs = useAttrs();
+  const show = ref<boolean>(true);
 
-// Main Colors
-const primary = [
-  "bg-primary border-primary text-white", // Default
-  "dark:border-primary", // Dark
-];
-const secondary = [
-  "bg-secondary/70 border-secondary/70 text-slate-500", // Default
-  "dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300", // Dark mode
-];
-const success = [
-  "bg-success border-success text-slate-900", // Default
-  "dark:border-success", // Dark mode
-];
-const warning = [
-  "bg-warning border-warning text-slate-900", // Default
-  "dark:border-warning", // Dark mode
-];
-const pending = [
-  "bg-pending border-pending text-white", // Default
-  "dark:border-pending", // Dark mode
-];
-const danger = [
-  "bg-danger border-danger text-white", // Default
-  "dark:border-danger", // Dark mode
-];
-const dark = [
-  "bg-dark border-dark text-white", // Default
-  "dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300", // Dark mode
-];
+  // Main Colors
+  const primary = [
+    'bg-primary border-primary text-white', // Default
+    'dark:border-primary', // Dark
+  ];
+  const secondary = [
+    'bg-secondary/70 border-secondary/70 text-slate-500', // Default
+    'dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300', // Dark mode
+  ];
+  const success = [
+    'bg-success border-success text-slate-900', // Default
+    'dark:border-success', // Dark mode
+  ];
+  const warning = [
+    'bg-warning border-warning text-slate-900', // Default
+    'dark:border-warning', // Dark mode
+  ];
+  const pending = [
+    'bg-pending border-pending text-white', // Default
+    'dark:border-pending', // Dark mode
+  ];
+  const danger = [
+    'bg-danger border-danger text-white', // Default
+    'dark:border-danger', // Dark mode
+  ];
+  const dark = [
+    'bg-dark border-dark text-white', // Default
+    'dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300', // Dark mode
+  ];
 
-// Outline
-const outlinePrimary = [
-  "border-primary text-primary", // Default
-  "dark:border-primary", // Dark mode
-];
-const outlineSecondary = [
-  "border-secondary text-slate-500", // Default
-  "dark:border-darkmode-100/40 dark:text-slate-300", // Dark mode
-];
-const outlineSuccess = [
-  "border-success text-success dark:border-success", // Default
-  "dark:border-success", // Dark mode
-];
-const outlineWarning = [
-  "border-warning text-warning", // Default
-  "dark:border-warning", // Dark mode
-];
-const outlinePending = [
-  "border-pending text-pending", // Default
-  "dark:border-pending", // Dark mode
-];
-const outlineDanger = [
-  "border-danger text-danger", // Default
-  "dark:border-danger", // Dark mode
-];
-const outlineDark = [
-  "border-dark text-dark", // Default
-  "dark:border-darkmode-800 dark:text-slate-300", // Dark mode
-];
+  // Outline
+  const outlinePrimary = [
+    'border-primary text-primary', // Default
+    'dark:border-primary', // Dark mode
+  ];
+  const outlineSecondary = [
+    'border-secondary text-slate-500', // Default
+    'dark:border-darkmode-100/40 dark:text-slate-300', // Dark mode
+  ];
+  const outlineSuccess = [
+    'border-success text-success dark:border-success', // Default
+    'dark:border-success', // Dark mode
+  ];
+  const outlineWarning = [
+    'border-warning text-warning', // Default
+    'dark:border-warning', // Dark mode
+  ];
+  const outlinePending = [
+    'border-pending text-pending', // Default
+    'dark:border-pending', // Dark mode
+  ];
+  const outlineDanger = [
+    'border-danger text-danger', // Default
+    'dark:border-danger', // Dark mode
+  ];
+  const outlineDark = [
+    'border-dark text-dark', // Default
+    'dark:border-darkmode-800 dark:text-slate-300', // Dark mode
+  ];
 
-// Soft Color
-const softPrimary = [
-  "bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary", // Default
-  "dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary", // Dark mode
-];
-const softSecondary = [
-  "bg-slate-300 border-secondary bg-opacity-10 text-slate-500", // Default
-  "dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300", // Dark mode
-];
-const softSuccess = [
-  "bg-success border-success bg-opacity-20 border-opacity-5 text-success", // Default
-  "dark:border-success dark:border-opacity-20", // Dark mode
-];
-const softWarning = [
-  "bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning", // Default
-  "dark:border-warning dark:border-opacity-20", // Dark mode
-];
-const softPending = [
-  "bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending", // Default
-  "dark:border-pending dark:border-opacity-20", // Dark mode
-];
-const softDanger = [
-  "bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger", // Default
-  "dark:border-danger dark:border-opacity-20", // Dark mode
-];
-const softDark = [
-  "bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark", // Default
-  "dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300", // Dark mode
-];
+  // Soft Color
+  const softPrimary = [
+    'bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary', // Default
+    'dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary', // Dark mode
+  ];
+  const softSecondary = [
+    'bg-slate-300 border-secondary bg-opacity-10 text-slate-500', // Default
+    'dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300', // Dark mode
+  ];
+  const softSuccess = [
+    'bg-success border-success bg-opacity-20 border-opacity-5 text-success', // Default
+    'dark:border-success dark:border-opacity-20', // Dark mode
+  ];
+  const softWarning = [
+    'bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning', // Default
+    'dark:border-warning dark:border-opacity-20', // Dark mode
+  ];
+  const softPending = [
+    'bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending', // Default
+    'dark:border-pending dark:border-opacity-20', // Dark mode
+  ];
+  const softDanger = [
+    'bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger', // Default
+    'dark:border-danger dark:border-opacity-20', // Dark mode
+  ];
+  const softDark = [
+    'bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark', // Default
+    'dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300', // Dark mode
+  ];
 
-const computedClass = computed(() =>
-  twMerge([
-    "relative border rounded-md px-5 py-4",
-    variant == "primary" && primary,
-    variant == "secondary" && secondary,
-    variant == "success" && success,
-    variant == "warning" && warning,
-    variant == "pending" && pending,
-    variant == "danger" && danger,
-    variant == "dark" && dark,
-    variant == "outline-primary" && outlinePrimary,
-    variant == "outline-secondary" && outlineSecondary,
-    variant == "outline-success" && outlineSuccess,
-    variant == "outline-warning" && outlineWarning,
-    variant == "outline-pending" && outlinePending,
-    variant == "outline-danger" && outlineDanger,
-    variant == "outline-dark" && outlineDark,
-    variant == "soft-primary" && softPrimary,
-    variant == "soft-secondary" && softSecondary,
-    variant == "soft-success" && softSuccess,
-    variant == "soft-warning" && softWarning,
-    variant == "soft-pending" && softPending,
-    variant == "soft-danger" && softDanger,
-    variant == "soft-dark" && softDark,
-    dismissible && "pl-5 pr-16",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'relative border rounded-md px-5 py-4',
+      variant == 'primary' && primary,
+      variant == 'secondary' && secondary,
+      variant == 'success' && success,
+      variant == 'warning' && warning,
+      variant == 'pending' && pending,
+      variant == 'danger' && danger,
+      variant == 'dark' && dark,
+      variant == 'outline-primary' && outlinePrimary,
+      variant == 'outline-secondary' && outlineSecondary,
+      variant == 'outline-success' && outlineSuccess,
+      variant == 'outline-warning' && outlineWarning,
+      variant == 'outline-pending' && outlinePending,
+      variant == 'outline-danger' && outlineDanger,
+      variant == 'outline-dark' && outlineDark,
+      variant == 'soft-primary' && softPrimary,
+      variant == 'soft-secondary' && softSecondary,
+      variant == 'soft-success' && softSuccess,
+      variant == 'soft-warning' && softWarning,
+      variant == 'soft-pending' && softPending,
+      variant == 'soft-danger' && softDanger,
+      variant == 'soft-dark' && softDark,
+      dismissible && 'pl-5 pr-16',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
@@ -184,12 +181,7 @@ const computedClass = computed(() =>
     leaveFrom="visible opacity-100 translate-y-0"
     leaveTo="invisible opacity-0 translate-y-1"
   >
-    <component
-      :is="as"
-      role="alert"
-      :class="computedClass"
-      v-bind="_.omit(attrs, 'class')"
-    >
+    <component :is="as" role="alert" :class="computedClass" v-bind="_.omit(attrs, 'class')">
       <slot
         :dismiss="
           () => {
diff --git a/web/src/components/Base/Alert/DismissButton.vue b/web/src/components/Base/Alert/DismissButton.vue
index bb960bacc..14607be1c 100644
--- a/web/src/components/Base/Alert/DismissButton.vue
+++ b/web/src/components/Base/Alert/DismissButton.vue
@@ -1,40 +1,31 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type ButtonHTMLAttributes, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type ButtonHTMLAttributes, useAttrs } from 'vue';
 
-interface DismissButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
-  as?: string | object;
-}
+  interface DismissButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<DismissButtonProps>(), {
-  as: "button",
-});
+  const { as } = withDefaults(defineProps<DismissButtonProps>(), {
+    as: 'button',
+  });
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() =>
-  twMerge([
-    "text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge(['text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2', typeof attrs.class === 'string' && attrs.class]),
+  );
 </script>
 
 <template>
-  <component
-    :is="as"
-    type="button"
-    aria-label="Close"
-    :class="computedClass"
-    v-bind="_.omit(attrs, 'class')"
-  >
+  <component :is="as" type="button" aria-label="Close" :class="computedClass" v-bind="_.omit(attrs, 'class')">
     <slot></slot>
   </component>
 </template>
diff --git a/web/src/components/Base/Alert/index.ts b/web/src/components/Base/Alert/index.ts
index 9b9e1f1d7..048feb50d 100644
--- a/web/src/components/Base/Alert/index.ts
+++ b/web/src/components/Base/Alert/index.ts
@@ -1,5 +1,5 @@
-import Alert from "./Alert.vue";
-import DismissButton from "./DismissButton.vue";
+import Alert from './Alert.vue';
+import DismissButton from './DismissButton.vue';
 
 const AlertComponent = Object.assign({}, Alert, {
   DismissButton: DismissButton,
diff --git a/web/src/components/Base/Breadcrumb/Breadcrumb.vue b/web/src/components/Base/Breadcrumb/Breadcrumb.vue
index 7f8306ea1..31a03f5c8 100644
--- a/web/src/components/Base/Breadcrumb/Breadcrumb.vue
+++ b/web/src/components/Base/Breadcrumb/Breadcrumb.vue
@@ -1,36 +1,27 @@
 <script setup lang="ts">
-import { type HTMLAttributes, useSlots, provide } from "vue";
+  import { type HTMLAttributes, useSlots, provide } from 'vue';
 
-export type ProvideBeradcrumb = {
-  light?: boolean;
-};
+  export type ProvideBeradcrumb = {
+    light?: boolean;
+  };
 
-interface BreadcrumbProps extends /* @vue-ignore */ HTMLAttributes {
-  light?: boolean;
-}
+  interface BreadcrumbProps extends /* @vue-ignore */ HTMLAttributes {
+    light?: boolean;
+  }
 
-const slots = useSlots();
+  const slots = useSlots();
 
-const { light } = defineProps<BreadcrumbProps>();
+  const { light } = defineProps<BreadcrumbProps>();
 
-provide<ProvideBeradcrumb>("breadcrumb", {
-  light: light,
-});
+  provide<ProvideBeradcrumb>('breadcrumb', {
+    light: light,
+  });
 </script>
 
 <template>
   <nav class="flex" aria-label="breadcrumb">
-    <ol
-      :class="[
-        'flex items-center text-primary dark:text-slate-300',
-        { 'text-white/90': light },
-      ]"
-    >
-      <component
-        v-for="(item, key) in slots.default && slots.default()"
-        :is="item"
-        :index="key"
-      />
+    <ol :class="['flex items-center text-primary dark:text-slate-300', { 'text-white/90': light }]">
+      <component v-for="(item, key) in slots.default && slots.default()" :is="item" :index="key" />
     </ol>
   </nav>
 </template>
diff --git a/web/src/components/Base/Breadcrumb/Link.vue b/web/src/components/Base/Breadcrumb/Link.vue
index f67043fde..3b67cabbd 100644
--- a/web/src/components/Base/Breadcrumb/Link.vue
+++ b/web/src/components/Base/Breadcrumb/Link.vue
@@ -1,39 +1,36 @@
 <script setup lang="ts">
-import { type RouterLinkProps } from "vue-router";
-import { computed, type LiHTMLAttributes, inject } from "vue";
-import { type ProvideBeradcrumb } from "./Breadcrumb.vue";
+  import { type RouterLinkProps } from 'vue-router';
+  import { computed, type LiHTMLAttributes, inject } from 'vue';
+  import { type ProvideBeradcrumb } from './Breadcrumb.vue';
 
-interface LinkProps extends /* @vue-ignore */ LiHTMLAttributes {
-  to?: RouterLinkProps["to"];
-  active?: boolean;
-  index?: number;
-}
+  interface LinkProps extends /* @vue-ignore */ LiHTMLAttributes {
+    to?: RouterLinkProps['to'];
+    active?: boolean;
+    index?: number;
+  }
 
-const { to, active, index } = withDefaults(defineProps<LinkProps>(), {
-  to: "",
-  active: false,
-  index: 0,
-});
+  const { to, active, index } = withDefaults(defineProps<LinkProps>(), {
+    to: '',
+    active: false,
+    index: 0,
+  });
 
-const breadcrumb = inject<ProvideBeradcrumb>("breadcrumb");
+  const breadcrumb = inject<ProvideBeradcrumb>('breadcrumb');
 
-const computedClass = computed(() => [
-  index > 0 && "relative ml-5 pl-0.5",
-  breadcrumb &&
-    !breadcrumb.light &&
-    index > 0 &&
-    "before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-black before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
-  breadcrumb &&
-    breadcrumb.light &&
-    index > 0 &&
-    "before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-white before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
-  index > 0 && "dark:before:bg-chevron-white",
-  breadcrumb &&
-    !breadcrumb.light &&
-    active &&
-    "text-slate-800 cursor-text dark:text-slate-400",
-  breadcrumb && breadcrumb.light && active && "text-white/70",
-]);
+  const computedClass = computed(() => [
+    index > 0 && 'relative ml-5 pl-0.5',
+    breadcrumb &&
+      !breadcrumb.light &&
+      index > 0 &&
+      "before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-black before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
+    breadcrumb &&
+      breadcrumb.light &&
+      index > 0 &&
+      "before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-white before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
+    index > 0 && 'dark:before:bg-chevron-white',
+    breadcrumb && !breadcrumb.light && active && 'text-slate-800 cursor-text dark:text-slate-400',
+    breadcrumb && breadcrumb.light && active && 'text-white/70',
+  ]);
 </script>
 
 <template>
diff --git a/web/src/components/Base/Breadcrumb/Text.vue b/web/src/components/Base/Breadcrumb/Text.vue
index cadbd4f67..7f5a3fef8 100644
--- a/web/src/components/Base/Breadcrumb/Text.vue
+++ b/web/src/components/Base/Breadcrumb/Text.vue
@@ -1,41 +1,38 @@
-<script setup lang="ts">
-import { type RouterLinkProps } from "vue-router";
-import { computed, type LiHTMLAttributes, inject } from "vue";
-import { type ProvideBeradcrumb } from "./Breadcrumb.vue";
-
-interface TextProps extends /* @vue-ignore */ LiHTMLAttributes {
-  active?: boolean;
-  index?: number;
-}
-
-const { active, index } = withDefaults(defineProps<TextProps>(), {
-  active: false,
-  index: 0,
-});
-
-const breadcrumb = inject<ProvideBeradcrumb>("breadcrumb");
-
-const computedClass = computed(() => [
-  index > 0 && "relative ml-5 pl-0.5",
-  breadcrumb &&
-    !breadcrumb.light &&
-    index > 0 &&
-    "before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-black before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
-  breadcrumb &&
-    breadcrumb.light &&
-    index > 0 &&
-    "before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-white before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
-  index > 0 && "dark:before:bg-chevron-white",
-  breadcrumb &&
-    !breadcrumb.light &&
-    active &&
-    "text-slate-800 cursor-text dark:text-slate-400",
-  breadcrumb && breadcrumb.light && active && "text-white/70",
-]);
-</script>
-
-<template>
-  <li :class="computedClass">
-      <slot></slot>
-  </li>
-</template>
+<script setup lang="ts">
+  import { type RouterLinkProps } from 'vue-router';
+  import { computed, type LiHTMLAttributes, inject } from 'vue';
+  import { type ProvideBeradcrumb } from './Breadcrumb.vue';
+
+  interface TextProps extends /* @vue-ignore */ LiHTMLAttributes {
+    active?: boolean;
+    index?: number;
+  }
+
+  const { active, index } = withDefaults(defineProps<TextProps>(), {
+    active: false,
+    index: 0,
+  });
+
+  const breadcrumb = inject<ProvideBeradcrumb>('breadcrumb');
+
+  const computedClass = computed(() => [
+    index > 0 && 'relative ml-5 pl-0.5',
+    breadcrumb &&
+      !breadcrumb.light &&
+      index > 0 &&
+      "before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-black before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
+    breadcrumb &&
+      breadcrumb.light &&
+      index > 0 &&
+      "before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-white before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
+    index > 0 && 'dark:before:bg-chevron-white',
+    breadcrumb && !breadcrumb.light && active && 'text-slate-800 cursor-text dark:text-slate-400',
+    breadcrumb && breadcrumb.light && active && 'text-white/70',
+  ]);
+</script>
+
+<template>
+  <li :class="computedClass">
+    <slot></slot>
+  </li>
+</template>
diff --git a/web/src/components/Base/Breadcrumb/index.ts b/web/src/components/Base/Breadcrumb/index.ts
index 873b61697..b34b4d4b4 100644
--- a/web/src/components/Base/Breadcrumb/index.ts
+++ b/web/src/components/Base/Breadcrumb/index.ts
@@ -1,6 +1,6 @@
-import Breadcrumb from "./Breadcrumb.vue";
-import Link from "./Link.vue";
-import Text from "./Text.vue";
+import Breadcrumb from './Breadcrumb.vue';
+import Link from './Link.vue';
+import Text from './Text.vue';
 
 const BreadcrumbComponent = Object.assign({}, Breadcrumb, {
   Link: Link,
diff --git a/web/src/components/Base/Button/Button.vue b/web/src/components/Base/Button/Button.vue
index 529bc5a45..74d8243ea 100644
--- a/web/src/components/Base/Button/Button.vue
+++ b/web/src/components/Base/Button/Button.vue
@@ -1,237 +1,226 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type ButtonHTMLAttributes, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type ButtonHTMLAttributes, useAttrs } from 'vue';
 
-type Variant =
-  | "primary"
-  | "secondary"
-  | "success"
-  | "warning"
-  | "pending"
-  | "danger"
-  | "dark"
-  | "outline-primary"
-  | "outline-secondary"
-  | "outline-success"
-  | "outline-warning"
-  | "outline-pending"
-  | "outline-danger"
-  | "outline-dark"
-  | "soft-primary"
-  | "soft-secondary"
-  | "soft-success"
-  | "soft-warning"
-  | "soft-pending"
-  | "soft-danger"
-  | "soft-dark"
-  | "facebook"
-  | "twitter"
-  | "instagram"
-  | "linkedin";
+  type Variant =
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'pending'
+    | 'danger'
+    | 'dark'
+    | 'outline-primary'
+    | 'outline-secondary'
+    | 'outline-success'
+    | 'outline-warning'
+    | 'outline-pending'
+    | 'outline-danger'
+    | 'outline-dark'
+    | 'soft-primary'
+    | 'soft-secondary'
+    | 'soft-success'
+    | 'soft-warning'
+    | 'soft-pending'
+    | 'soft-danger'
+    | 'soft-dark'
+    | 'facebook'
+    | 'twitter'
+    | 'instagram'
+    | 'linkedin';
 
-type Elevated = boolean;
-type Size = "sm" | "lg";
-type Rounded = boolean;
+  type Elevated = boolean;
+  type Size = 'sm' | 'lg';
+  type Rounded = boolean;
 
-interface ButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
-  as?: string | object;
-  variant?: Variant;
-  elevated?: Elevated;
-  size?: Size;
-  rounded?: Rounded;
-}
-
-const { as, size, variant, elevated, rounded } = withDefaults(
-  defineProps<ButtonProps>(),
-  {
-    as: "button",
+  interface ButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
+    as?: string | object;
+    variant?: Variant;
+    elevated?: Elevated;
+    size?: Size;
+    rounded?: Rounded;
   }
-);
 
-const attrs = useAttrs();
+  const { as, size, variant, elevated, rounded } = withDefaults(defineProps<ButtonProps>(), {
+    as: 'button',
+  });
+
+  const attrs = useAttrs();
 
-// General Styles
-const generalStyles = [
-  "transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer", // Default
-  "focus:ring-4 focus:ring-primary focus:ring-opacity-20", // On focus
-  "focus-visible:outline-none", // On focus visible
-  "dark:focus:ring-slate-700 dark:focus:ring-opacity-50", // Dark mode
-  "[&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90", // On hover and not disabled
-  "[&:not(button)]:text-center", // Not a button element
-  "disabled:opacity-70 disabled:cursor-not-allowed", // Disabled
-];
+  // General Styles
+  const generalStyles = [
+    'transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer', // Default
+    'focus:ring-4 focus:ring-primary focus:ring-opacity-20', // On focus
+    'focus-visible:outline-none', // On focus visible
+    'dark:focus:ring-slate-700 dark:focus:ring-opacity-50', // Dark mode
+    '[&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90', // On hover and not disabled
+    '[&:not(button)]:text-center', // Not a button element
+    'disabled:opacity-70 disabled:cursor-not-allowed', // Disabled
+  ];
 
-// Sizes
-const small = ["text-xs py-1.5 px-2"];
-const large = ["text-lg py-1.5 px-4"];
+  // Sizes
+  const small = ['text-xs py-1.5 px-2'];
+  const large = ['text-lg py-1.5 px-4'];
 
-// Main Colors
-const primary = [
-  "bg-primary border-primary text-white dark:border-primary", // Default
-];
-const secondary = [
-  "bg-secondary/70 border-secondary/70 text-slate-500", // Default
-  "dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300", // Dark mode
-  "[&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100", // On hover and not disabled
-  "[&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80", // On hover and not disabled in dark mode
-];
-const success = [
-  "bg-success border-success text-slate-900", // Default
-  "dark:border-success", // Dark mode
-];
-const warning = [
-  "bg-warning border-warning text-slate-900", // Default
-  "dark:border-warning", // Dark mode
-];
-const pending = [
-  "bg-pending border-pending text-white", // Default
-  "dark:border-pending", // Dark mode
-];
-const danger = [
-  "bg-danger border-danger text-white", // Default
-  "dark:border-danger", // Dark mode
-];
-const dark = [
-  "bg-dark border-dark text-white", // Default
-  "dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300", // Dark mode
-  "[&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70", // On hover and not disabled in dark mode
-];
+  // Main Colors
+  const primary = [
+    'bg-primary border-primary text-white dark:border-primary', // Default
+  ];
+  const secondary = [
+    'bg-secondary/70 border-secondary/70 text-slate-500', // Default
+    'dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300', // Dark mode
+    '[&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100', // On hover and not disabled
+    '[&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80', // On hover and not disabled in dark mode
+  ];
+  const success = [
+    'bg-success border-success text-slate-900', // Default
+    'dark:border-success', // Dark mode
+  ];
+  const warning = [
+    'bg-warning border-warning text-slate-900', // Default
+    'dark:border-warning', // Dark mode
+  ];
+  const pending = [
+    'bg-pending border-pending text-white', // Default
+    'dark:border-pending', // Dark mode
+  ];
+  const danger = [
+    'bg-danger border-danger text-white', // Default
+    'dark:border-danger', // Dark mode
+  ];
+  const dark = [
+    'bg-dark border-dark text-white', // Default
+    'dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300', // Dark mode
+    '[&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70', // On hover and not disabled in dark mode
+  ];
 
-// Social Media
-const facebook = [
-  "bg-[#3b5998] border-[#3b5998] text-white dark:border-[#3b5998]",
-];
-const twitter = [
-  "bg-[#4ab3f4] border-[#4ab3f4] text-white dark:border-[#4ab3f4]",
-];
-const instagram = [
-  "bg-[#517fa4] border-[#517fa4] text-white dark:border-[#517fa4]",
-];
-const linkedin = [
-  "bg-[#0077b5] border-[#0077b5] text-white dark:border-[#0077b5]",
-];
+  // Social Media
+  const facebook = ['bg-[#3b5998] border-[#3b5998] text-white dark:border-[#3b5998]'];
+  const twitter = ['bg-[#4ab3f4] border-[#4ab3f4] text-white dark:border-[#4ab3f4]'];
+  const instagram = ['bg-[#517fa4] border-[#517fa4] text-white dark:border-[#517fa4]'];
+  const linkedin = ['bg-[#0077b5] border-[#0077b5] text-white dark:border-[#0077b5]'];
 
-// Outline
-const outlinePrimary = [
-  "border-primary text-primary", // Default
-  "dark:border-primary", // Dark mode
-  "[&:hover:not(:disabled)]:bg-primary/10", // On hover and not disabled
-];
-const outlineSecondary = [
-  "border-secondary text-slate-500", // Default
-  "dark:border-darkmode-100/40 dark:text-slate-300", // Dark mode
-  "[&:hover:not(:disabled)]:bg-secondary/20", // On hover and not disabled
-  "[&:hover:not(:disabled)]:dark:bg-darkmode-100/10", // On hover and not disabled in dark mode
-];
-const outlineSuccess = [
-  "border-success text-success", // Default
-  "dark:border-success", // Dark mode
-  "[&:hover:not(:disabled)]:bg-success/10", // On hover and not disabled
-];
-const outlineWarning = [
-  "border-warning text-warning", // Default
-  "dark:border-warning", // Dark mode
-  "[&:hover:not(:disabled)]:bg-warning/10", // On hover and not disabled
-];
-const outlinePending = [
-  "border-pending text-pending", // Default
-  "dark:border-pending", // Dark mode
-  "[&:hover:not(:disabled)]:bg-pending/10", // On hover and not disabled
-];
-const outlineDanger = [
-  "border-danger text-danger", // Default
-  "dark:border-danger", // Dark mode
-  "[&:hover:not(:disabled)]:bg-danger/10", // On hover and not disabled
-];
-const outlineDark = [
-  "border-dark text-dark", // Default
-  "dark:border-darkmode-800 dark:text-slate-300", // Dark mode
-  "[&:hover:not(:disabled)]:bg-darkmode-800/30", // On hover and not disabled
-  "[&:hover:not(:disabled)]:dark:bg-opacity-30", // On hover and not disabled in dark mode
-];
+  // Outline
+  const outlinePrimary = [
+    'border-primary text-primary', // Default
+    'dark:border-primary', // Dark mode
+    '[&:hover:not(:disabled)]:bg-primary/10', // On hover and not disabled
+  ];
+  const outlineSecondary = [
+    'border-secondary text-slate-500', // Default
+    'dark:border-darkmode-100/40 dark:text-slate-300', // Dark mode
+    '[&:hover:not(:disabled)]:bg-secondary/20', // On hover and not disabled
+    '[&:hover:not(:disabled)]:dark:bg-darkmode-100/10', // On hover and not disabled in dark mode
+  ];
+  const outlineSuccess = [
+    'border-success text-success', // Default
+    'dark:border-success', // Dark mode
+    '[&:hover:not(:disabled)]:bg-success/10', // On hover and not disabled
+  ];
+  const outlineWarning = [
+    'border-warning text-warning', // Default
+    'dark:border-warning', // Dark mode
+    '[&:hover:not(:disabled)]:bg-warning/10', // On hover and not disabled
+  ];
+  const outlinePending = [
+    'border-pending text-pending', // Default
+    'dark:border-pending', // Dark mode
+    '[&:hover:not(:disabled)]:bg-pending/10', // On hover and not disabled
+  ];
+  const outlineDanger = [
+    'border-danger text-danger', // Default
+    'dark:border-danger', // Dark mode
+    '[&:hover:not(:disabled)]:bg-danger/10', // On hover and not disabled
+  ];
+  const outlineDark = [
+    'border-dark text-dark', // Default
+    'dark:border-darkmode-800 dark:text-slate-300', // Dark mode
+    '[&:hover:not(:disabled)]:bg-darkmode-800/30', // On hover and not disabled
+    '[&:hover:not(:disabled)]:dark:bg-opacity-30', // On hover and not disabled in dark mode
+  ];
 
-// Soft Color
-const softPrimary = [
-  "bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary", // Default
-  "dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary", // Dark mode
-  "[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10", // On hover and not disabled
-  "[&:hover:not(:disabled)]:dark:border-opacity-60", // On hover and not disabled in dark mode
-];
-const softSecondary = [
-  "bg-slate-300 border-secondary bg-opacity-20 text-slate-500", // Default
-  "dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300", // Dark mode
-  "[&:hover:not(:disabled)]:bg-opacity-10", // On hover and not disabled
-  "[&:hover:not(:disabled)]:dark:bg-darkmode-100/10 [&:hover:not(:disabled)]:dark:border-darkmode-100/20", // On hover and not disabled in dark mode
-];
-const softSuccess = [
-  "bg-success border-success bg-opacity-20 border-opacity-5 text-success", // Default
-  "dark:border-success dark:border-opacity-20", // Dark mode
-  "[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10", // On hover and not disabled
-];
-const softWarning = [
-  "bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning", // Default
-  "dark:border-warning dark:border-opacity-20", // Dark mode
-  "[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10", // On hover and not disabled
-];
-const softPending = [
-  "bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending", // Default
-  "dark:border-pending dark:border-opacity-20", // Dark mode
-  "[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10", // On hover and not disabled
-];
-const softDanger = [
-  "bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger", // Default
-  "dark:border-danger dark:border-opacity-20", // Dark mode
-  "[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10", // On hover and not disabled
-];
-const softDark = [
-  "bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark", // Default
-  "dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300", // Dark mode
-  "[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10", // On hover and not disabled
-  "[&:hover:not(:disabled)]:dark:bg-darkmode-800/50 [&:hover:not(:disabled)]:dark:border-darkmode-800", // On hover and not disabled in dark mode
-];
+  // Soft Color
+  const softPrimary = [
+    'bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary', // Default
+    'dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary', // Dark mode
+    '[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10', // On hover and not disabled
+    '[&:hover:not(:disabled)]:dark:border-opacity-60', // On hover and not disabled in dark mode
+  ];
+  const softSecondary = [
+    'bg-slate-300 border-secondary bg-opacity-20 text-slate-500', // Default
+    'dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300', // Dark mode
+    '[&:hover:not(:disabled)]:bg-opacity-10', // On hover and not disabled
+    '[&:hover:not(:disabled)]:dark:bg-darkmode-100/10 [&:hover:not(:disabled)]:dark:border-darkmode-100/20', // On hover and not disabled in dark mode
+  ];
+  const softSuccess = [
+    'bg-success border-success bg-opacity-20 border-opacity-5 text-success', // Default
+    'dark:border-success dark:border-opacity-20', // Dark mode
+    '[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10', // On hover and not disabled
+  ];
+  const softWarning = [
+    'bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning', // Default
+    'dark:border-warning dark:border-opacity-20', // Dark mode
+    '[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10', // On hover and not disabled
+  ];
+  const softPending = [
+    'bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending', // Default
+    'dark:border-pending dark:border-opacity-20', // Dark mode
+    '[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10', // On hover and not disabled
+  ];
+  const softDanger = [
+    'bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger', // Default
+    'dark:border-danger dark:border-opacity-20', // Dark mode
+    '[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10', // On hover and not disabled
+  ];
+  const softDark = [
+    'bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark', // Default
+    'dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300', // Dark mode
+    '[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10', // On hover and not disabled
+    '[&:hover:not(:disabled)]:dark:bg-darkmode-800/50 [&:hover:not(:disabled)]:dark:border-darkmode-800', // On hover and not disabled in dark mode
+  ];
 
-const computedClass = computed(() =>
-  twMerge([
-    generalStyles,
-    size == "sm" && small,
-    size == "lg" && large,
-    variant == "primary" && primary,
-    variant == "secondary" && secondary,
-    variant == "success" && success,
-    variant == "warning" && warning,
-    variant == "pending" && pending,
-    variant == "danger" && danger,
-    variant == "dark" && dark,
-    variant == "outline-primary" && outlinePrimary,
-    variant == "outline-secondary" && outlineSecondary,
-    variant == "outline-success" && outlineSuccess,
-    variant == "outline-warning" && outlineWarning,
-    variant == "outline-pending" && outlinePending,
-    variant == "outline-danger" && outlineDanger,
-    variant == "outline-dark" && outlineDark,
-    variant == "soft-primary" && softPrimary,
-    variant == "soft-secondary" && softSecondary,
-    variant == "soft-success" && softSuccess,
-    variant == "soft-warning" && softWarning,
-    variant == "soft-pending" && softPending,
-    variant == "soft-danger" && softDanger,
-    variant == "soft-dark" && softDark,
-    variant == "facebook" && facebook,
-    variant == "twitter" && twitter,
-    variant == "instagram" && instagram,
-    variant == "linkedin" && linkedin,
-    rounded && "rounded-full",
-    elevated && "shadow-md",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      generalStyles,
+      size == 'sm' && small,
+      size == 'lg' && large,
+      variant == 'primary' && primary,
+      variant == 'secondary' && secondary,
+      variant == 'success' && success,
+      variant == 'warning' && warning,
+      variant == 'pending' && pending,
+      variant == 'danger' && danger,
+      variant == 'dark' && dark,
+      variant == 'outline-primary' && outlinePrimary,
+      variant == 'outline-secondary' && outlineSecondary,
+      variant == 'outline-success' && outlineSuccess,
+      variant == 'outline-warning' && outlineWarning,
+      variant == 'outline-pending' && outlinePending,
+      variant == 'outline-danger' && outlineDanger,
+      variant == 'outline-dark' && outlineDark,
+      variant == 'soft-primary' && softPrimary,
+      variant == 'soft-secondary' && softSecondary,
+      variant == 'soft-success' && softSuccess,
+      variant == 'soft-warning' && softWarning,
+      variant == 'soft-pending' && softPending,
+      variant == 'soft-danger' && softDanger,
+      variant == 'soft-dark' && softDark,
+      variant == 'facebook' && facebook,
+      variant == 'twitter' && twitter,
+      variant == 'instagram' && instagram,
+      variant == 'linkedin' && linkedin,
+      rounded && 'rounded-full',
+      elevated && 'shadow-md',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Button/index.ts b/web/src/components/Base/Button/index.ts
index 315e92730..dc25043d7 100644
--- a/web/src/components/Base/Button/index.ts
+++ b/web/src/components/Base/Button/index.ts
@@ -1,3 +1,3 @@
-import Button from "./Button.vue";
+import Button from './Button.vue';
 
 export default Button;
diff --git a/web/src/components/Base/FileIcon/FileIcon.vue b/web/src/components/Base/FileIcon/FileIcon.vue
index bb26bdbca..58ead03a3 100644
--- a/web/src/components/Base/FileIcon/FileIcon.vue
+++ b/web/src/components/Base/FileIcon/FileIcon.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { type HTMLAttributes } from "vue";
+  import { type HTMLAttributes } from 'vue';
 
-type Variant = "empty-directory" | "directory" | "file" | "image";
+  type Variant = 'empty-directory' | 'directory' | 'file' | 'image';
 
-interface FileIconProps extends /* @vue-ignore */ HTMLAttributes {
-  variant: Variant;
-  type?: string;
-  src?: string;
-}
+  interface FileIconProps extends /* @vue-ignore */ HTMLAttributes {
+    variant: Variant;
+    type?: string;
+    src?: string;
+  }
 
-function getSVG(variant: string) {
-  if (variant == "empty-directory") {
-    return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='786' height='786' viewBox='0 0 786 786'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_2' data-name='Group 2' transform='translate(-567 -93)'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='418' height='681' rx='40' transform='translate(896 109)' fill='%2395a5b9'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='433' height='681' rx='40' transform='translate(606 93)' fill='%23a0aec0'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='786' height='721' rx='40' transform='translate(567 158)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A\")";
-  } else if (variant == "directory") {
-    return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='786' height='786' viewBox='0 0 786 786'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_3' data-name='Group 3' transform='translate(-567 -93)'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='418' height='681' rx='40' transform='translate(896 109)' fill='%2395a5b9'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='433' height='681' rx='40' transform='translate(606 93)' fill='%23a0aec0'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='742' height='734' rx='40' transform='translate(590 145)' fill='%23bec8d9'/%3E%3Crect id='Rectangle_5' data-name='Rectangle 5' width='786' height='692' rx='40' transform='translate(567 187)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A\")";
-  } else if (variant == "file") {
-    return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='628.027' height='786.012' viewBox='0 0 628.027 786.012'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_5' data-name='Group 5' transform='translate(-646 -92.988)'%3E%3Cpath id='Union_2' data-name='Union 2' d='M40,786A40,40,0,0,1,0,746V40A40,40,0,0,1,40,0H501V103h29v24h98V746a40,40,0,0,1-40,40Z' transform='translate(646 93)' fill='url(%23linear-gradient)'/%3E%3Cpath id='Intersection_2' data-name='Intersection 2' d='M.409,162.042l.058-109.9c31.605,29.739,125.37,125.377,125.37,125.377l-109.976.049A20.025,20.025,0,0,1,.409,162.042Z' transform='translate(1147 42)' fill='%23bec8d9' stroke='%23bec8d9' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A\")";
+  function getSVG(variant: string) {
+    if (variant == 'empty-directory') {
+      return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='786' height='786' viewBox='0 0 786 786'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_2' data-name='Group 2' transform='translate(-567 -93)'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='418' height='681' rx='40' transform='translate(896 109)' fill='%2395a5b9'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='433' height='681' rx='40' transform='translate(606 93)' fill='%23a0aec0'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='786' height='721' rx='40' transform='translate(567 158)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A\")";
+    } else if (variant == 'directory') {
+      return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='786' height='786' viewBox='0 0 786 786'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_3' data-name='Group 3' transform='translate(-567 -93)'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='418' height='681' rx='40' transform='translate(896 109)' fill='%2395a5b9'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='433' height='681' rx='40' transform='translate(606 93)' fill='%23a0aec0'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='742' height='734' rx='40' transform='translate(590 145)' fill='%23bec8d9'/%3E%3Crect id='Rectangle_5' data-name='Rectangle 5' width='786' height='692' rx='40' transform='translate(567 187)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A\")";
+    } else if (variant == 'file') {
+      return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='628.027' height='786.012' viewBox='0 0 628.027 786.012'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_5' data-name='Group 5' transform='translate(-646 -92.988)'%3E%3Cpath id='Union_2' data-name='Union 2' d='M40,786A40,40,0,0,1,0,746V40A40,40,0,0,1,40,0H501V103h29v24h98V746a40,40,0,0,1-40,40Z' transform='translate(646 93)' fill='url(%23linear-gradient)'/%3E%3Cpath id='Intersection_2' data-name='Intersection 2' d='M.409,162.042l.058-109.9c31.605,29.739,125.37,125.377,125.37,125.377l-109.976.049A20.025,20.025,0,0,1,.409,162.042Z' transform='translate(1147 42)' fill='%23bec8d9' stroke='%23bec8d9' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A\")";
+    }
   }
-}
 
-const { variant, type, src } = defineProps<FileIconProps>();
+  const { variant, type, src } = defineProps<FileIconProps>();
 </script>
 
 <template>
@@ -36,15 +36,8 @@ const { variant, type, src } = defineProps<FileIconProps>();
       >
         {{ type }}
       </div>
-      <div
-        v-if="variant == 'image'"
-        class="absolute top-0 left-0 w-full h-full image-fit"
-      >
-        <img
-          class="rounded-md"
-          alt="DCSLab"
-          :src="src"
-        />
+      <div v-if="variant == 'image'" class="absolute top-0 left-0 w-full h-full image-fit">
+        <img class="rounded-md" alt="DCSLab" :src="src" />
       </div>
     </div>
   </div>
diff --git a/web/src/components/Base/FileIcon/index.ts b/web/src/components/Base/FileIcon/index.ts
index 550839158..e2cf5108c 100644
--- a/web/src/components/Base/FileIcon/index.ts
+++ b/web/src/components/Base/FileIcon/index.ts
@@ -1,3 +1,3 @@
-import FileIcon from "./FileIcon.vue";
+import FileIcon from './FileIcon.vue';
 
 export default FileIcon;
diff --git a/web/src/components/Base/Form/FormCheck/FormCheck.vue b/web/src/components/Base/Form/FormCheck/FormCheck.vue
index 073c2a70c..d7e37eddc 100644
--- a/web/src/components/Base/Form/FormCheck/FormCheck.vue
+++ b/web/src/components/Base/Form/FormCheck/FormCheck.vue
@@ -1,18 +1,16 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs } from 'vue';
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["flex items-center", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['flex items-center', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/FormCheck/Input.vue b/web/src/components/Base/Form/FormCheck/Input.vue
index b0b3c156d..4a090e36c 100644
--- a/web/src/components/Base/Form/FormCheck/Input.vue
+++ b/web/src/components/Base/Form/FormCheck/Input.vue
@@ -1,71 +1,66 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type InputHTMLAttributes, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type InputHTMLAttributes, useAttrs } from 'vue';
 
-interface InputProps extends /* @vue-ignore */ InputHTMLAttributes {
-  modelValue?: InputHTMLAttributes["value"];
-  type: "radio" | "checkbox";
-}
+  interface InputProps extends /* @vue-ignore */ InputHTMLAttributes {
+    modelValue?: InputHTMLAttributes['value'];
+    type: 'radio' | 'checkbox';
+  }
 
-interface InputEmit {
-  (e: "update:modelValue", value: string): void;
-}
+  interface InputEmit {
+    (e: 'update:modelValue', value: string): void;
+  }
 
-const props = defineProps<InputProps>();
+  const props = defineProps<InputProps>();
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() =>
-  twMerge([
-    // Default
-    "transition-all duration-100 ease-in-out",
+  const computedClass = computed(() =>
+    twMerge([
+      // Default
+      'transition-all duration-100 ease-in-out',
 
-    // Input type radio
-    props.type == "radio" &&
-      "shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50",
+      // Input type radio
+      props.type == 'radio' &&
+        'shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50',
 
-    // Input type checkbox
-    props.type == "checkbox" &&
-      "shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50",
+      // Input type checkbox
+      props.type == 'checkbox' &&
+        'shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50',
 
-    // On checked
-    "[&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10",
-    "[&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10",
+      // On checked
+      "[&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10",
+      "[&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10",
 
-    // On checked and not disabled
-    "[&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50",
+      // On checked and not disabled
+      '[&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50',
 
-    // On checked and disabled
-    "[&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50",
+      // On checked and disabled
+      '[&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50',
 
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 
-const emit = defineEmits<InputEmit>();
+  const emit = defineEmits<InputEmit>();
 
-const localValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
+  const localValue = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(newValue) {
+      emit('update:modelValue', newValue);
+    },
+  });
 </script>
 
 <template>
-  <input
-    :class="computedClass"
-    :type="props.type"
-    v-bind="_.omit(attrs, 'class')"
-    v-model="localValue"
-  />
+  <input :class="computedClass" :type="props.type" v-bind="_.omit(attrs, 'class')" v-model="localValue" />
 </template>
diff --git a/web/src/components/Base/Form/FormCheck/Label.vue b/web/src/components/Base/Form/FormCheck/Label.vue
index ad67d469f..8aa024194 100644
--- a/web/src/components/Base/Form/FormCheck/Label.vue
+++ b/web/src/components/Base/Form/FormCheck/Label.vue
@@ -1,21 +1,18 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs } from 'vue';
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "cursor-pointer ml-2",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge(['cursor-pointer ml-2', typeof attrs.class === 'string' && attrs.class]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/FormCheck/index.ts b/web/src/components/Base/Form/FormCheck/index.ts
index b5233ad3d..5532a3e43 100644
--- a/web/src/components/Base/Form/FormCheck/index.ts
+++ b/web/src/components/Base/Form/FormCheck/index.ts
@@ -1,6 +1,6 @@
-import FormCheck from "./FormCheck.vue";
-import Input from "./Input.vue";
-import Label from "./Label.vue";
+import FormCheck from './FormCheck.vue';
+import Input from './Input.vue';
+import Label from './Label.vue';
 
 const FormCheckComponent = Object.assign({}, FormCheck, {
   Input: Input,
diff --git a/web/src/components/Base/Form/FormErrorMessages.vue b/web/src/components/Base/Form/FormErrorMessages.vue
index f18fbda65..9ad0c1849 100644
--- a/web/src/components/Base/Form/FormErrorMessages.vue
+++ b/web/src/components/Base/Form/FormErrorMessages.vue
@@ -1,23 +1,23 @@
-<script setup lang="ts">
-import { computed, toRef } from 'vue';
-
-export interface FormErrorMessagesProps {
-    messages: string | undefined
-}
-
-const props = withDefaults(defineProps<FormErrorMessagesProps>(), {
-    messages: '',
-});
-
-const messages = toRef(props, 'messages');
-
-const visible = computed(() => {
-    if (messages.value.length == 0) return false;
-
-    return true;
-});
-</script>
-
-<template>
-    <span v-if="visible" class="mt-1 text-danger">{{ messages }}</span>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { computed, toRef } from 'vue';
+
+  export interface FormErrorMessagesProps {
+    messages: string | undefined;
+  }
+
+  const props = withDefaults(defineProps<FormErrorMessagesProps>(), {
+    messages: '',
+  });
+
+  const messages = toRef(props, 'messages');
+
+  const visible = computed(() => {
+    if (messages.value.length == 0) return false;
+
+    return true;
+  });
+</script>
+
+<template>
+  <span v-if="visible" class="mt-1 text-danger">{{ messages }}</span>
+</template>
diff --git a/web/src/components/Base/Form/FormFileUpload.vue b/web/src/components/Base/Form/FormFileUpload.vue
index b2141efb7..b17ffba13 100644
--- a/web/src/components/Base/Form/FormFileUpload.vue
+++ b/web/src/components/Base/Form/FormFileUpload.vue
@@ -1,102 +1,115 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
-
-<script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, InputHTMLAttributes, useAttrs, inject, ref, onMounted } from "vue";
-import { ProvideFormInline } from "./FormInline.vue";
-import { ProvideInputGroup } from "./InputGroup/InputGroup.vue";
-import DashboardService from "@/services/DashboardService";
-import noImage from "@/assets/images/no_image.png";
-import { useI18n } from "vue-i18n";
-import { FileUpload } from "@/types/models/FileUpload";
-import { ServiceResponse } from "@/types/services/ServiceResponse";
-
-interface FormInputProps extends /* @vue-ignore */ InputHTMLAttributes {
-  value?: InputHTMLAttributes["value"];
-  modelValue?: InputHTMLAttributes["value"];
-  formInputSize?: "sm" | "lg";
-  rounded?: boolean;
-}
-
-interface HTMLInputEvent extends Event {
-  target: HTMLInputElement & EventTarget;
-}
-
-const { t } = useI18n();
-const props = defineProps<FormInputProps>();
-const attrs = useAttrs();
-const formInline = inject<ProvideFormInline>("formInline", false);
-const inputGroup = inject<ProvideInputGroup>("inputGroup", false);
-const imageUrl = ref<string | undefined>('');
-const dashboardService = new DashboardService();
-
-const computedClass = computed(() =>
-  twMerge([
-    "disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent",
-    "[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent",
-    "transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",
-    props.formInputSize == "sm" && "text-xs py-1.5 px-2",
-    props.formInputSize == "lg" && "text-lg py-1.5 px-4",
-    props.rounded && "rounded-full",
-    formInline && "flex-1",
-    inputGroup &&
-    "rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string): void,
-}>();
-
-const localValue = computed({
-  get() {
-    return props.modelValue === undefined ? props.value : props.modelValue;
-
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
-
-const handleUpload = async (event: Event) => {
-  const _event = event as HTMLInputEvent;
-  const files = _event.target.files;
-  const fileReader = new FileReader();
-
-  if (files) {
-    let filename: string = files[0].name;
-    fileReader.readAsDataURL(files[0]);
-    localValue.value = filename
-    let uploadResponse: ServiceResponse<FileUpload | null> = await dashboardService.uploadFile(files[0])
-
-    if (uploadResponse && uploadResponse.data) {
-      imageUrl.value = uploadResponse.data.url;
-    }
-  }
-}
-
-onMounted(() => {
-  if (!imageUrl.value) {
-    imageUrl.value = noImage;
-  }
-});
-</script>
-
-<template>
-  <div v-if="imageUrl"
-    :class="['flex', 'justify-center', 'mt-2', 'w-full', 'align-center', { 'bg-slate-100': imageUrl }, 'rounded', 'p-4']">
-    <img class="rounded aspect-auto" :src="imageUrl ? imageUrl : ''" alt="Image Preview">
-  </div>
-  <div class="flex gap-2 mt-4">
-    <input disabled :class="computedClass" :type="props.type" v-bind="_.omit(attrs, 'class')" />
-    <input id="upload" type="file" hidden @change="(e) => handleUpload(e)" />
-    <label class="border-slate-200 border w-[15%] rounded bg-slate-100 cursor-pointer flex justify-center items-center"
-      for="upload">{{ t('components.file-upload.browse') }}</label>
-  </div>
-</template>
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, InputHTMLAttributes, useAttrs, inject, ref, onMounted } from 'vue';
+  import { ProvideFormInline } from './FormInline.vue';
+  import { ProvideInputGroup } from './InputGroup/InputGroup.vue';
+  import DashboardService from '@/services/DashboardService';
+  import noImage from '@/assets/images/no_image.png';
+  import { useI18n } from 'vue-i18n';
+  import { FileUpload } from '@/types/models/FileUpload';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+
+  interface FormInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+    value?: InputHTMLAttributes['value'];
+    modelValue?: InputHTMLAttributes['value'];
+    formInputSize?: 'sm' | 'lg';
+    rounded?: boolean;
+  }
+
+  interface HTMLInputEvent extends Event {
+    target: HTMLInputElement & EventTarget;
+  }
+
+  const { t } = useI18n();
+  const props = defineProps<FormInputProps>();
+  const attrs = useAttrs();
+  const formInline = inject<ProvideFormInline>('formInline', false);
+  const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
+  const imageUrl = ref<string | undefined>('');
+  const dashboardService = new DashboardService();
+
+  const computedClass = computed(() =>
+    twMerge([
+      'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+      '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+      'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+      props.formInputSize == 'sm' && 'text-xs py-1.5 px-2',
+      props.formInputSize == 'lg' && 'text-lg py-1.5 px-4',
+      props.rounded && 'rounded-full',
+      formInline && 'flex-1',
+      inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+  }>();
+
+  const localValue = computed({
+    get() {
+      return props.modelValue === undefined ? props.value : props.modelValue;
+    },
+    set(newValue) {
+      emit('update:modelValue', newValue);
+    },
+  });
+
+  const handleUpload = async (event: Event) => {
+    const _event = event as HTMLInputEvent;
+    const files = _event.target.files;
+    const fileReader = new FileReader();
+
+    if (files) {
+      let filename: string = files[0].name;
+      fileReader.readAsDataURL(files[0]);
+      localValue.value = filename;
+      let uploadResponse: ServiceResponse<FileUpload | null> = await dashboardService.uploadFile(files[0]);
+
+      if (uploadResponse && uploadResponse.data) {
+        imageUrl.value = uploadResponse.data.url;
+      }
+    }
+  };
+
+  onMounted(() => {
+    if (!imageUrl.value) {
+      imageUrl.value = noImage;
+    }
+  });
+</script>
+
+<template>
+  <div
+    v-if="imageUrl"
+    :class="[
+      'flex',
+      'justify-center',
+      'mt-2',
+      'w-full',
+      'align-center',
+      { 'bg-slate-100': imageUrl },
+      'rounded',
+      'p-4',
+    ]"
+  >
+    <img class="rounded aspect-auto" :src="imageUrl ? imageUrl : ''" alt="Image Preview" />
+  </div>
+  <div class="flex gap-2 mt-4">
+    <input disabled :class="computedClass" :type="props.type" v-bind="_.omit(attrs, 'class')" />
+    <input id="upload" type="file" hidden @change="(e) => handleUpload(e)" />
+    <label
+      class="border-slate-200 border w-[15%] rounded bg-slate-100 cursor-pointer flex justify-center items-center"
+      for="upload"
+    >
+      {{ t('components.file-upload.browse') }}
+    </label>
+  </div>
+</template>
diff --git a/web/src/components/Base/Form/FormHelp.vue b/web/src/components/Base/Form/FormHelp.vue
index f4b17482c..93ae87b68 100644
--- a/web/src/components/Base/Form/FormHelp.vue
+++ b/web/src/components/Base/Form/FormHelp.vue
@@ -1,21 +1,18 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs } from 'vue';
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "text-xs text-slate-500 mt-2",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge(['text-xs text-slate-500 mt-2', typeof attrs.class === 'string' && attrs.class]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/FormImageUpload.vue b/web/src/components/Base/Form/FormImageUpload.vue
new file mode 100644
index 000000000..fb2576db8
--- /dev/null
+++ b/web/src/components/Base/Form/FormImageUpload.vue
@@ -0,0 +1,209 @@
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, InputHTMLAttributes, useAttrs, inject, ref, onMounted, onUnmounted } from 'vue';
+  import { ProvideFormInline } from './FormInline.vue';
+  import { ProvideInputGroup } from './InputGroup/InputGroup.vue';
+  import ProductImageService from '@/services/ProductImageService';
+  import { useI18n } from 'vue-i18n';
+  import { ProductImage } from '@/types/models/ProductImage';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import Lucide from '@/components/Base/Lucide';
+  import Button from '@/components/Base/Button';
+  import { Dialog } from '@/components/Base/Headless';
+
+  export interface FormInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+    value?: InputHTMLAttributes['value'];
+    modelValue?: InputHTMLAttributes['value'];
+    formInputSize?: 'sm' | 'lg';
+    rounded?: boolean;
+  }
+
+  interface HTMLInputEvent extends Event {
+    target: HTMLInputElement & EventTarget;
+  }
+
+  const { t } = useI18n();
+  const props = defineProps<FormInputProps>();
+  const attrs = useAttrs();
+  const formInline = inject<ProvideFormInline>('formInline', false);
+  const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
+  
+  const productImageService = new ProductImageService();
+  const isUploading = ref(false);
+  const fileInput = ref<HTMLInputElement | null>(null);
+
+  // Camera refs
+  const showCameraModal = ref(false);
+  const videoRef = ref<HTMLVideoElement | null>(null);
+  const canvasRef = ref<HTMLCanvasElement | null>(null);
+  const stream = ref<MediaStream | null>(null);
+
+  const computedClass = computed(() =>
+    twMerge([
+      'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+      '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+      'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+      props.formInputSize == 'sm' && 'text-xs py-1.5 px-2',
+      props.formInputSize == 'lg' && 'text-lg py-1.5 px-4',
+      props.rounded && 'rounded-full',
+      formInline && 'flex-1',
+      inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  const emit = defineEmits<{
+    (e: 'uploaded', value: ProductImage): void;
+  }>();
+
+  const handleUpload = async (file: File) => {
+    isUploading.value = true;
+    try {
+      let uploadResponse: ServiceResponse<ProductImage | null> = await productImageService.upload(file);
+
+      if (uploadResponse.success && uploadResponse.data) {
+        emit('uploaded', uploadResponse.data);
+      }
+    } finally {
+      isUploading.value = false;
+    }
+  };
+
+  const onFileChange = (event: Event) => {
+    const _event = event as HTMLInputEvent;
+    const files = _event.target.files;
+    if (files && files.length > 0) {
+      handleUpload(files[0]);
+    }
+  };
+
+  const onDrop = (event: DragEvent) => {
+    const files = event.dataTransfer?.files;
+    if (files && files.length > 0) {
+      handleUpload(files[0]);
+    }
+  };
+
+  const openBrowse = () => {
+    fileInput.value?.click();
+  };
+
+  // Camera Functions
+  const startCamera = async () => {
+    showCameraModal.value = true;
+    try {
+      stream.value = await navigator.mediaDevices.getUserMedia({ video: true });
+      if (videoRef.value) {
+        videoRef.value.srcObject = stream.value;
+      }
+    } catch (err) {
+      console.error("Error accessing camera:", err);
+      // Handle permission errors or no camera found
+    }
+  };
+
+  const stopCamera = () => {
+    if (stream.value) {
+      stream.value.getTracks().forEach(track => track.stop());
+      stream.value = null;
+    }
+    showCameraModal.value = false;
+  };
+
+  const capturePhoto = () => {
+    if (videoRef.value && canvasRef.value) {
+      const video = videoRef.value;
+      const canvas = canvasRef.value;
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const context = canvas.getContext('2d');
+      if (context) {
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        canvas.toBlob((blob) => {
+          if (blob) {
+            const file = new File([blob], `camera_${Date.now()}.jpg`, { type: 'image/jpeg' });
+            handleUpload(file);
+            stopCamera();
+          }
+        }, 'image/jpeg');
+      }
+    }
+  };
+
+  onUnmounted(() => {
+    stopCamera();
+  });
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- Dropzone Area -->
+    <div
+      class="border-2 border-dashed border-slate-300 dark:border-darkmode-400 rounded-md p-6 flex flex-col justify-center items-center cursor-pointer hover:bg-slate-50 dark:hover:bg-darkmode-600/50 transition-colors"
+      @dragover.prevent
+      @drop.prevent="onDrop"
+      @click="openBrowse"
+    >
+      <Lucide icon="UploadCloud" class="w-10 h-10 text-slate-400 mb-2" />
+      <div class="text-slate-500 text-center">
+        <span class="font-medium text-primary">{{ t('components.file-upload.browse') }}</span> 
+        {{ t('components.file-upload.or_drag_drop') }}
+      </div>
+      <div class="text-slate-400 text-xs mt-1">
+        JPG, PNG
+      </div>
+      <input 
+        ref="fileInput"
+        type="file" 
+        accept="image/*" 
+        class="hidden" 
+        @change="onFileChange" 
+      />
+    </div>
+
+    <!-- Actions Row -->
+    <div class="flex gap-2">
+      <Button type="button" variant="outline-primary" class="w-full" @click="startCamera">
+        <Lucide icon="Camera" class="w-4 h-4 mr-2" />
+        {{ t('components.file-upload.camera') }}
+      </Button>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="isUploading" class="flex justify-center p-2">
+        <Lucide icon="Loader2" class="w-6 h-6 animate-spin text-primary" />
+    </div>
+
+    <!-- Camera Modal -->
+    <Dialog :open="showCameraModal" @close="stopCamera">
+      <Dialog.Panel>
+        <Dialog.Title>
+          <h2 class="mr-auto text-base font-medium">
+            {{ t('components.file-upload.camera') }}
+          </h2>
+        </Dialog.Title>
+        <Dialog.Description>
+          <div class="relative w-full aspect-video bg-black rounded overflow-hidden">
+            <video ref="videoRef" autoplay playsinline class="w-full h-full object-cover"></video>
+            <canvas ref="canvasRef" class="hidden"></canvas>
+          </div>
+        </Dialog.Description>
+        <Dialog.Footer>
+          <Button type="button" variant="outline-secondary" @click="stopCamera" class="w-24 mr-1">
+            {{ t('components.buttons.cancel') }}
+          </Button>
+          <Button type="button" variant="primary" @click="capturePhoto" class="w-24">
+            {{ t('components.file-upload.capture') }}
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Panel>
+    </Dialog>
+  </div>
+</template>
diff --git a/web/src/components/Base/Form/FormImagesField.vue b/web/src/components/Base/Form/FormImagesField.vue
new file mode 100644
index 000000000..d2f84fb88
--- /dev/null
+++ b/web/src/components/Base/Form/FormImagesField.vue
@@ -0,0 +1,460 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Dialog from '@/components/Base/Headless/Dialog';
+import ProductImageService from '@/services/ProductImageService';
+import ExpenseImageService from '@/services/ExpenseImageService';
+import type { ProductImage } from '@/types/models/ProductImage';
+import type { ExpenseImage } from '@/types/models/ExpenseImage';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+
+interface ImageHash {
+  hash: string;
+  is_main: boolean;
+}
+
+interface ImageItem {
+  id: string | number;
+  hash: string;
+  url: string;
+  is_main: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    entity: 'product' | 'expense';
+    modelValue: ImageHash[];
+    existingImages?: ImageItem[];
+    deleteImageIds?: Array<number | string>;
+  }>(),
+  {
+    modelValue: () => [],
+    existingImages: () => [],
+    deleteImageIds: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ImageHash[]): void;
+  (e: 'update:existingImages', value: ImageItem[]): void;
+  (e: 'update:deleteImageIds', value: Array<number | string>): void;
+}>();
+
+const { t } = useI18n();
+const productImageService = new ProductImageService();
+const expenseImageService = new ExpenseImageService();
+
+const imageHashes = computed({
+  get: () => props.modelValue,
+  set: (value: ImageHash[]) => emit('update:modelValue', value),
+});
+
+const existingImages = computed({
+  get: () => props.existingImages ?? [],
+  set: (value: ImageItem[]) => emit('update:existingImages', value),
+});
+
+const deleteImageIds = computed({
+  get: () => props.deleteImageIds ?? [],
+  set: (value: Array<number | string>) => emit('update:deleteImageIds', value),
+});
+
+const newImages = ref<ImageItem[]>([]);
+const isUploading = ref(false);
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const previewImageUrl = ref<string | null>(null);
+const isPreviewOpen = ref(false);
+
+const showCameraModal = ref(false);
+const videoRef = ref<HTMLVideoElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const stream = ref<MediaStream | null>(null);
+
+const isImageMain = (image: ImageItem): boolean => {
+  const item = imageHashes.value.find((hash) => hash.hash === image.hash);
+  return item ? item.is_main : false;
+};
+
+const uploadImage = async (file: File): Promise<ServiceResponse<ProductImage | ExpenseImage | null>> => {
+  if (props.entity === 'expense') {
+    return expenseImageService.upload(file);
+  }
+
+  return productImageService.upload(file);
+};
+
+const handleUpload = async (file: File) => {
+  isUploading.value = true;
+
+  try {
+    const uploadResponse = await uploadImage(file);
+
+    if (!uploadResponse.success || !uploadResponse.data) {
+      return;
+    }
+
+    const image: ImageItem = {
+      id: uploadResponse.data.id,
+      hash: uploadResponse.data.hash,
+      url: uploadResponse.data.url,
+      is_main: uploadResponse.data.is_main,
+    };
+
+    newImages.value = [...newImages.value, image];
+
+    const hashes = [...imageHashes.value];
+    hashes.push({
+      hash: image.hash,
+      is_main: hashes.length === 0,
+    });
+
+    imageHashes.value = hashes;
+  } finally {
+    isUploading.value = false;
+  }
+};
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+
+  target.value = '';
+};
+
+const onDrop = (event: DragEvent) => {
+  const files = event.dataTransfer?.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+};
+
+const openBrowse = () => {
+  fileInput.value?.click();
+};
+
+const openPreview = (url: string | undefined | null) => {
+  if (!url) {
+    return;
+  }
+
+  previewImageUrl.value = url;
+  isPreviewOpen.value = true;
+};
+
+const closePreview = () => {
+  isPreviewOpen.value = false;
+  previewImageUrl.value = null;
+};
+
+const removeExistingImage = (index: number) => {
+  const images = [...existingImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  const ids = [...deleteImageIds.value];
+  if (!ids.includes(image.id)) {
+    ids.push(image.id);
+  }
+  deleteImageIds.value = ids;
+
+  images.splice(index, 1);
+  existingImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const removeNewImage = (index: number) => {
+  const images = [...newImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  images.splice(index, 1);
+  newImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const setMainImage = (image: ImageItem) => {
+  imageHashes.value = imageHashes.value.map((hash) => ({
+    hash: hash.hash,
+    is_main: hash.hash === image.hash,
+  }));
+
+  existingImages.value = existingImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+
+  newImages.value = newImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+};
+
+const startCamera = async () => {
+  showCameraModal.value = true;
+
+  try {
+    stream.value = await navigator.mediaDevices.getUserMedia({ video: true });
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream.value;
+    }
+  } catch (error) {
+    console.error('Error accessing camera:', error);
+  }
+};
+
+const stopCamera = () => {
+  if (stream.value) {
+    stream.value.getTracks().forEach((track) => track.stop());
+    stream.value = null;
+  }
+
+  showCameraModal.value = false;
+};
+
+const capturePhoto = () => {
+  if (!videoRef.value || !canvasRef.value) {
+    return;
+  }
+
+  const video = videoRef.value;
+  const canvas = canvasRef.value;
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+
+    const filenamePrefix = props.entity === 'expense' ? 'expense' : 'product';
+    const file = new File([blob], `${filenamePrefix}_${Date.now()}.jpg`, { type: 'image/jpeg' });
+    handleUpload(file);
+    stopCamera();
+  }, 'image/jpeg');
+};
+
+onUnmounted(() => {
+  stopCamera();
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-4">
+    <div class="col-span-12 sm:col-span-4 lg:col-span-3">
+      <div class="flex flex-col gap-4">
+        <div
+          class="border-2 border-dashed border-slate-300 dark:border-darkmode-400 rounded-md p-6 flex flex-col justify-center items-center cursor-pointer hover:bg-slate-50 dark:hover:bg-darkmode-600/50 transition-colors"
+          @dragover.prevent
+          @drop.prevent="onDrop"
+          @click="openBrowse"
+        >
+          <Lucide icon="UploadCloud" class="w-10 h-10 text-slate-400 mb-2" />
+          <div class="text-slate-500 text-center">
+            <span class="font-medium text-primary">{{ t('components.file-upload.browse') }}</span>
+            {{ t('components.file-upload.or_drag_drop') }}
+          </div>
+          <div class="text-slate-400 text-xs mt-1">
+            JPG, PNG
+          </div>
+          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFileChange" />
+        </div>
+
+        <div class="flex gap-2">
+          <Button type="button" variant="outline-primary" class="w-full" @click="startCamera">
+            <Lucide icon="Camera" class="w-4 h-4 mr-2" />
+            {{ t('components.file-upload.camera') }}
+          </Button>
+        </div>
+
+        <div v-if="isUploading" class="flex justify-center p-2">
+          <Lucide icon="Loader2" class="w-6 h-6 animate-spin text-primary" />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-span-12 sm:col-span-8 lg:col-span-9">
+      <div
+        v-if="existingImages.length + newImages.length > 0"
+        class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"
+      >
+        <div
+          v-for="(image, index) in existingImages"
+          :key="`existing-${image.id}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeExistingImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+
+        <div
+          v-for="(image, index) in newImages"
+          :key="`new-${image.hash}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeNewImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="h-full flex items-center justify-center text-slate-400 border-2 border-dashed rounded-md bg-slate-50 dark:bg-darkmode-600/20 min-h-[150px]"
+      >
+        {{ t('components.data-list.data_not_found') }}
+      </div>
+    </div>
+  </div>
+
+  <Dialog :open="isPreviewOpen" size="lg" @close="closePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <div class="flex items-center justify-between w-full">
+          <div class="font-medium">
+            Preview
+          </div>
+          <Button type="button" variant="outline-secondary" size="sm" @click="closePreview">
+            <Lucide icon="X" class="w-4 h-4" />
+          </Button>
+        </div>
+      </Dialog.Title>
+      <Dialog.Description class="bg-slate-900 flex items-center justify-center">
+        <img
+          v-if="previewImageUrl"
+          :src="previewImageUrl"
+          class="max-h-[80vh] max-w-full object-contain"
+        />
+      </Dialog.Description>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="showCameraModal" @close="stopCamera">
+    <Dialog.Panel>
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          {{ t('components.file-upload.camera') }}
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description>
+        <div class="relative w-full aspect-video bg-black rounded overflow-hidden">
+          <video ref="videoRef" autoplay playsinline class="w-full h-full object-cover"></video>
+          <canvas ref="canvasRef" class="hidden"></canvas>
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" class="w-24 mr-1" @click="stopCamera">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="primary" class="w-24" @click="capturePhoto">
+          {{ t('components.file-upload.capture') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/components/Base/Form/FormInline.vue b/web/src/components/Base/Form/FormInline.vue
index bea1b70dc..f9d631a67 100644
--- a/web/src/components/Base/Form/FormInline.vue
+++ b/web/src/components/Base/Form/FormInline.vue
@@ -1,25 +1,22 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs, provide } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs, provide } from 'vue';
 
-export type ProvideFormInline = boolean;
+  export type ProvideFormInline = boolean;
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "block sm:flex items-center",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge(['block sm:flex items-center', typeof attrs.class === 'string' && attrs.class]),
+  );
 
-provide<ProvideFormInline>("formInline", true);
+  provide<ProvideFormInline>('formInline', true);
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/FormInput.vue b/web/src/components/Base/Form/FormInput.vue
index a6c0198d5..1122dc65b 100644
--- a/web/src/components/Base/Form/FormInput.vue
+++ b/web/src/components/Base/Form/FormInput.vue
@@ -1,64 +1,58 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type InputHTMLAttributes, useAttrs, inject } from "vue";
-import { type ProvideFormInline } from "./FormInline.vue";
-import { type ProvideInputGroup } from "./InputGroup/InputGroup.vue";
-
-interface FormInputProps extends /* @vue-ignore */ InputHTMLAttributes {
-  value?: InputHTMLAttributes["value"];
-  modelValue?: InputHTMLAttributes["value"];
-  formInputSize?: "sm" | "lg";
-  rounded?: boolean;
-}
-
-interface FormInputEmit {
-  (e: "update:modelValue", value: string): void;
-}
-
-const props = defineProps<FormInputProps>();
-const attrs = useAttrs();
-const formInline = inject<ProvideFormInline>("formInline", false);
-const inputGroup = inject<ProvideInputGroup>("inputGroup", false);
-
-const computedClass = computed(() =>
-  twMerge([
-    "disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent",
-    "[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent",
-    "transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",
-    props.formInputSize == "sm" && "text-xs py-1.5 px-2",
-    props.formInputSize == "lg" && "text-lg py-1.5 px-4",
-    props.rounded && "rounded-full",
-    formInline && "flex-1",
-    inputGroup &&
-      "rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
-
-const emit = defineEmits<FormInputEmit>();
-
-const localValue = computed({
-  get() {
-    return props.modelValue === undefined ? props.value : props.modelValue;
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type InputHTMLAttributes, useAttrs, inject } from 'vue';
+  import { type ProvideFormInline } from './FormInline.vue';
+  import { type ProvideInputGroup } from './InputGroup/InputGroup.vue';
+
+  interface FormInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+    value?: InputHTMLAttributes['value'];
+    modelValue?: InputHTMLAttributes['value'];
+    formInputSize?: 'sm' | 'lg';
+    rounded?: boolean;
+  }
+
+  interface FormInputEmit {
+    (e: 'update:modelValue', value: string): void;
+  }
+
+  const props = defineProps<FormInputProps>();
+  const attrs = useAttrs();
+  const formInline = inject<ProvideFormInline>('formInline', false);
+  const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
+
+  const computedClass = computed(() =>
+    twMerge([
+      'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+      '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+      'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+      props.formInputSize == 'sm' && 'text-xs py-1.5 px-2',
+      props.formInputSize == 'lg' && 'text-lg py-1.5 px-4',
+      props.rounded && 'rounded-full',
+      formInline && 'flex-1',
+      inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  const emit = defineEmits<FormInputEmit>();
+
+  const localValue = computed({
+    get() {
+      return props.modelValue === undefined ? props.value : props.modelValue;
+    },
+    set(newValue) {
+      emit('update:modelValue', newValue);
+    },
+  });
 </script>
 
 <template>
-  <input
-    :class="computedClass"
-    :type="props.type"
-    v-bind="_.omit(attrs, 'class')"
-    v-model="localValue"
-  />
+  <input :class="computedClass" :type="props.type" v-bind="_.omit(attrs, 'class')" v-model="localValue" />
 </template>
diff --git a/web/src/components/Base/Form/FormInputCode.vue b/web/src/components/Base/Form/FormInputCode.vue
index 699db76e1..d4e927e15 100644
--- a/web/src/components/Base/Form/FormInputCode.vue
+++ b/web/src/components/Base/Form/FormInputCode.vue
@@ -1,83 +1,85 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type InputHTMLAttributes, useAttrs, inject } from "vue";
-import { type ProvideFormInline } from "./FormInline.vue";
-import { type ProvideInputGroup } from "./InputGroup/InputGroup.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type InputHTMLAttributes, useAttrs, inject } from 'vue';
+  import { type ProvideFormInline } from './FormInline.vue';
+  import { type ProvideInputGroup } from './InputGroup/InputGroup.vue';
 
-interface FormInputCodeProps extends /* @vue-ignore */ InputHTMLAttributes {
-  value?: InputHTMLAttributes["value"];
-  modelValue?: InputHTMLAttributes["value"];
-  formInputSize?: "sm" | "lg";
-  rounded?: boolean;
-}
+  export interface FormInputCodeProps extends /* @vue-ignore */ InputHTMLAttributes {
+    value?: InputHTMLAttributes['value'];
+    modelValue?: InputHTMLAttributes['value'];
+    formInputSize?: 'sm' | 'lg';
+    rounded?: boolean;
+  }
 
-interface FormInputCodeEmit {
-  (e: "setAuto"): void;
-  (e: "update:modelValue", value: string): void;
-}
+  interface FormInputCodeEmit {
+    (e: 'setAuto'): void;
+    (e: 'update:modelValue', value: string): void;
+  }
 
-const props = defineProps<FormInputCodeProps>();
-const attrs = useAttrs();
-const formInline = inject<ProvideFormInline>("formInline", false);
-const inputGroup = inject<ProvideInputGroup>("inputGroup", false);
+  const props = defineProps<FormInputCodeProps>();
+  const attrs = useAttrs();
+  const formInline = inject<ProvideFormInline>('formInline', false);
+  const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
 
-const emit = defineEmits<FormInputCodeEmit>();
+  const emit = defineEmits<FormInputCodeEmit>();
 
-const disabledInput = computed(() => {
-  if (props.modelValue == '_AUTO_') return true;
-  else return false;
-});
+  const disabledInput = computed(() => {
+    if (props.modelValue == '_AUTO_') return true;
+    else return false;
+  });
 
-const computedClass = computed(() =>
-  twMerge([
-    "disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent",
-    "[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent",
-    "transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",
-    props.formInputSize == "sm" && "text-xs py-1.5 px-2",
-    props.formInputSize == "lg" && "text-lg py-1.5 px-4",
-    props.rounded && "rounded-full",
-    formInline && "flex-1",
-    inputGroup &&
-      "rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+      '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+      'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+      props.formInputSize == 'sm' && 'text-xs py-1.5 px-2',
+      props.formInputSize == 'lg' && 'text-lg py-1.5 px-4',
+      props.rounded && 'rounded-full',
+      formInline && 'flex-1',
+      inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 
-const localValue = computed({
-  get() {
-    return props.modelValue === undefined ? props.value : props.modelValue;
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
+  const localValue = computed({
+    get() {
+      return props.modelValue === undefined ? props.value : props.modelValue;
+    },
+    set(newValue) {
+      emit('update:modelValue', newValue);
+    },
+  });
 
-const handleClickAutoButton = () => {
-  emit('setAuto');
-};
+  const handleClickAutoButton = () => {
+    emit('setAuto');
+  };
 </script>
 
 <template>
-  <div class="block flex gap-2">
-    <input
-      :disabled="disabledInput"
-      :class="computedClass"
-      :type="props.type"
-      v-bind="_.omit(attrs, 'class')"
-      v-model="localValue"
-    />
-    <div 
-      class="border-slate-200 border w-[8%] rounded bg-slate-100 cursor-pointer flex justify-center items-center"
+  <div class="flex items-center gap-2">
+    <div class="flex-1">
+      <input
+        :disabled="disabledInput"
+        :class="computedClass"
+        :type="props.type"
+        v-bind="_.omit(attrs, 'class')"
+        v-model="localValue"
+      />
+    </div>
+    <button
+      type="button"
+      class="px-3 py-2.5 text-xs font-medium border border-slate-200 rounded-md bg-slate-100 text-slate-600 hover:bg-slate-200 whitespace-nowrap"
       @click="handleClickAutoButton"
     >
       Auto
-    </div>
+    </button>
   </div>
 </template>
diff --git a/web/src/components/Base/Form/FormInputCurrency.vue b/web/src/components/Base/Form/FormInputCurrency.vue
new file mode 100644
index 000000000..47a264032
--- /dev/null
+++ b/web/src/components/Base/Form/FormInputCurrency.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+  import { computed, ref, watch, type InputHTMLAttributes, useAttrs, inject } from 'vue';
+  import { twMerge } from 'tailwind-merge';
+  import _ from 'lodash';
+  import { formatCurrency } from '@/utils/helper';
+  import { type ProvideFormInline } from './FormInline.vue';
+  import { type ProvideInputGroup } from './InputGroup/InputGroup.vue';
+
+  interface FormInputCurrencyProps extends /* @vue-ignore */ InputHTMLAttributes {
+    modelValue?: number | string;
+    formInputSize?: 'sm' | 'lg';
+    rounded?: boolean;
+    allowNegative?: boolean;
+  }
+
+  interface FormInputCurrencyEmit {
+    (e: 'update:modelValue', value: number): void;
+    (e: 'change', value: number): void;
+  }
+
+  const props = withDefaults(defineProps<FormInputCurrencyProps>(), {
+    allowNegative: true,
+  });
+  const emit = defineEmits<FormInputCurrencyEmit>();
+  const attrs = useAttrs();
+  const formInline = inject<ProvideFormInline>('formInline', false);
+  const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
+
+  const inputRef = ref<HTMLInputElement | null>(null);
+  const isFocused = ref(false);
+
+  const computedClass = computed(() =>
+    twMerge([
+      'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+      '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+      'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+      props.formInputSize == 'sm' && 'text-xs py-1.5 px-2',
+      props.formInputSize == 'lg' && 'text-lg py-1.5 px-4',
+      props.rounded && 'rounded-full',
+      formInline && 'flex-1',
+      inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+      typeof attrs.class === 'string' && attrs.class,
+      'text-right', // Currency usually right aligned
+    ]),
+  );
+
+  const displayValue = ref('');
+
+  // Watch modelValue to update displayValue when not focused
+  watch(
+    () => props.modelValue,
+    (newVal) => {
+      if (!isFocused.value) {
+        displayValue.value = formatCurrency(newVal ?? '');
+      }
+    },
+    { immediate: true },
+  );
+
+  const parseCurrencyInput = (value: string) => {
+    const trimmedValue = value.trim();
+    if (trimmedValue === '' || trimmedValue === '-') return 0;
+
+    const isNegative = trimmedValue.startsWith('-') && props.allowNegative;
+    const unsignedValue = trimmedValue.replace(/-/g, '').replace(/\s/g, '');
+    const separators = unsignedValue.match(/[.,]/g) ?? [];
+
+    let normalizedValue = unsignedValue;
+
+    if (separators.length > 0) {
+      const lastDotIndex = unsignedValue.lastIndexOf('.');
+      const lastCommaIndex = unsignedValue.lastIndexOf(',');
+      const decimalIndex = Math.max(lastDotIndex, lastCommaIndex);
+      const decimalSeparator = decimalIndex >= 0 ? unsignedValue[decimalIndex] : '';
+      const separatorCount = separators.length;
+
+      if (separatorCount === 1 && decimalIndex >= 0) {
+        const decimalPartLength = unsignedValue.length - decimalIndex - 1;
+        normalizedValue = decimalPartLength === 3
+          ? unsignedValue.replace(/[.,]/g, '')
+          : unsignedValue.replace(decimalSeparator, '#DECIMAL#').replace(/[.,]/g, '').replace('#DECIMAL#', '.');
+      } else if (separatorCount > 1) {
+        const parts = unsignedValue.split(decimalSeparator);
+        const groupsAfterFirst = parts.slice(1);
+        const isThousandsPattern = groupsAfterFirst.every((part) => part.length === 3);
+
+        normalizedValue = isThousandsPattern
+          ? unsignedValue.replace(/[.,]/g, '')
+          : unsignedValue.replace(decimalSeparator, '#DECIMAL#').replace(/[.,]/g, '').replace('#DECIMAL#', '.');
+      }
+    }
+
+    const parsedValue = Number(normalizedValue);
+    if (Number.isNaN(parsedValue)) return 0;
+
+    return isNegative ? parsedValue * -1 : parsedValue;
+  };
+
+  const handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    let val = target.value;
+
+    if (!props.allowNegative) {
+      val = val.replace(/-/g, '');
+      displayValue.value = val;
+    }
+
+    emit('update:modelValue', parseCurrencyInput(val));
+  };
+
+  const handleFocus = () => {
+    isFocused.value = true;
+    if (props.modelValue !== undefined && props.modelValue !== null) {
+      displayValue.value = props.modelValue.toString().replace('.', ',');
+    }
+  };
+
+  const handleBlur = () => {
+    isFocused.value = false;
+    const normalizedValue = props.allowNegative
+      ? Number(props.modelValue ?? 0)
+      : Math.max(Number(props.modelValue ?? 0), 0);
+
+    if (normalizedValue !== Number(props.modelValue ?? 0)) {
+      emit('update:modelValue', normalizedValue);
+    }
+
+    displayValue.value = formatCurrency(normalizedValue);
+    emit('change', normalizedValue);
+  };
+</script>
+
+<template>
+  <input
+    ref="inputRef"
+    :class="computedClass"
+    type="text"
+    v-bind="_.omit(attrs, 'class')"
+    v-model="displayValue"
+    @input="handleInput"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  />
+</template>
diff --git a/web/src/components/Base/Form/FormInputDateTime.vue b/web/src/components/Base/Form/FormInputDateTime.vue
new file mode 100644
index 000000000..85608a0de
--- /dev/null
+++ b/web/src/components/Base/Form/FormInputDateTime.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref, watch, type InputHTMLAttributes, useAttrs, inject } from 'vue';
+import { twMerge } from 'tailwind-merge';
+import _ from 'lodash';
+import { formatDate } from '@/utils/helper';
+import { type ProvideFormInline } from './FormInline.vue';
+import { type ProvideInputGroup } from './InputGroup/InputGroup.vue';
+
+interface FormInputDateTimeProps extends /* @vue-ignore */ InputHTMLAttributes {
+  modelValue?: string | null;
+  formInputSize?: 'sm' | 'lg';
+  rounded?: boolean;
+}
+
+interface FormInputDateTimeEmit {
+  (e: 'update:modelValue', value: string | null): void;
+  (e: 'change', value: string | null): void;
+}
+
+const props = defineProps<FormInputDateTimeProps>();
+const emit = defineEmits<FormInputDateTimeEmit>();
+const attrs = useAttrs();
+const formInline = inject<ProvideFormInline>('formInline', false);
+const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const isFocused = ref(false);
+const displayValue = ref('');
+
+const computedClass = computed(() =>
+  twMerge([
+    'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+    '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+    'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+    props.formInputSize == 'sm' && 'text-xs py-1.5 px-2',
+    props.formInputSize == 'lg' && 'text-lg py-1.5 px-4',
+    props.rounded && 'rounded-full',
+    formInline && 'flex-1',
+    inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+    typeof attrs.class === 'string' && attrs.class,
+  ]),
+);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (isFocused.value) return;
+    if (!newVal) {
+      displayValue.value = '';
+      return;
+    }
+    displayValue.value = formatDate(newVal, 'YYYY-MM-DDTHH:mm:ss');
+  },
+  { immediate: true },
+);
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  displayValue.value = target.value;
+};
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = target.value;
+  if (!value) {
+    emit('update:modelValue', null);
+    emit('change', null);
+    return;
+  }
+  const [datePart, timePartRaw] = value.split('T');
+  let timePart = timePartRaw ?? '';
+  if (timePart && timePart.split(':').length === 2) {
+    timePart = `${timePart}:00`;
+  }
+  const normalized = `${datePart} ${timePart}`;
+  emit('update:modelValue', normalized);
+  emit('change', normalized);
+};
+
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleBlur = () => {
+  isFocused.value = false;
+};
+</script>
+
+<template>
+  <input
+    ref="inputRef"
+    :class="computedClass"
+    type="datetime-local"
+    step="1"
+    v-bind="_.omit(attrs, 'class')"
+    v-model="displayValue"
+    @input="handleInput"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  />
+</template>
+
diff --git a/web/src/components/Base/Form/FormInputDateTimeAuto.vue b/web/src/components/Base/Form/FormInputDateTimeAuto.vue
new file mode 100644
index 000000000..5871ca837
--- /dev/null
+++ b/web/src/components/Base/Form/FormInputDateTimeAuto.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed, ref, watch, type InputHTMLAttributes, useAttrs, inject, onBeforeUnmount } from 'vue';
+import { twMerge } from 'tailwind-merge';
+import _ from 'lodash';
+import { formatDate } from '@/utils/helper';
+import { type ProvideFormInline } from './FormInline.vue';
+import { type ProvideInputGroup } from './InputGroup/InputGroup.vue';
+
+interface FormInputDateTimeAutoProps extends /* @vue-ignore */ InputHTMLAttributes {
+  modelValue?: string | null;
+  formInputSize?: 'sm' | 'lg';
+  rounded?: boolean;
+}
+
+interface FormInputDateTimeAutoEmit {
+  (e: 'update:modelValue', value: string | null): void;
+  (e: 'change', value: string | null): void;
+}
+
+const props = defineProps<FormInputDateTimeAutoProps>();
+const emit = defineEmits<FormInputDateTimeAutoEmit>();
+const attrs = useAttrs();
+const formInline = inject<ProvideFormInline>('formInline', false);
+const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
+
+const AUTO_VALUE = '_AUTO_';
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const isFocused = ref(false);
+const displayValue = ref('');
+
+const isAutoMode = computed(() => props.modelValue === AUTO_VALUE);
+
+const computedClass = computed(() =>
+  twMerge([
+    'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+    '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+    'transition duration-200 ease-in-out w-full min-w-0 text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+    props.formInputSize == 'sm' && 'text-xs py-1.5 px-2',
+    props.formInputSize == 'lg' && 'text-lg py-1.5 px-4',
+    props.rounded && 'rounded-full',
+    formInline && 'flex-1',
+    inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+    typeof attrs.class === 'string' && attrs.class,
+  ]),
+);
+
+const isDisabled = computed(() => {
+  const attrDisabled = (attrs as any).disabled as boolean | undefined;
+  return !!attrDisabled || isAutoMode.value;
+});
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (isFocused.value) return;
+    if (!newVal || newVal === AUTO_VALUE) {
+      displayValue.value = '';
+      return;
+    }
+    displayValue.value = formatDate(newVal, 'YYYY-MM-DDTHH:mm:ss');
+  },
+  { immediate: true },
+);
+
+let autoTimer: number | null = null;
+
+const stopAutoTimer = () => {
+  if (autoTimer !== null) {
+    window.clearInterval(autoTimer);
+    autoTimer = null;
+  }
+};
+
+const startAutoTimer = () => {
+  stopAutoTimer();
+  autoTimer = window.setInterval(() => {
+    if (!isAutoMode.value) return;
+    const now = new Date().toString();
+    displayValue.value = formatDate(now, 'YYYY-MM-DDTHH:mm:ss');
+  }, 1000);
+};
+
+watch(
+  isAutoMode,
+  (auto) => {
+    if (auto) {
+      startAutoTimer();
+    } else {
+      stopAutoTimer();
+      const current = props.modelValue;
+      if (!current || current === AUTO_VALUE) {
+        displayValue.value = '';
+      } else {
+        displayValue.value = formatDate(current, 'YYYY-MM-DDTHH:mm:ss');
+      }
+    }
+  },
+  { immediate: true },
+);
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  displayValue.value = target.value;
+};
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = target.value;
+  if (!value) {
+    emit('update:modelValue', null);
+    emit('change', null);
+    return;
+  }
+  const [datePart, timePartRaw] = value.split('T');
+  let timePart = timePartRaw ?? '';
+  if (timePart && timePart.split(':').length === 2) {
+    timePart = `${timePart}:00`;
+  }
+  const normalized = `${datePart} ${timePart}`;
+  emit('update:modelValue', normalized);
+  emit('change', normalized);
+};
+
+const toggleAuto = () => {
+  if (isAutoMode.value) {
+    emit('update:modelValue', null);
+    emit('change', null);
+  } else {
+    emit('update:modelValue', AUTO_VALUE);
+    emit('change', AUTO_VALUE);
+  }
+};
+
+onBeforeUnmount(() => {
+  stopAutoTimer();
+});
+
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleBlur = () => {
+  isFocused.value = false;
+};
+</script>
+
+<template>
+  <div class="flex min-w-0 items-center gap-2">
+    <div class="min-w-0 flex-1">
+      <input
+        ref="inputRef"
+        :class="computedClass"
+        type="datetime-local"
+        step="1"
+        v-bind="_.omit(attrs, 'class')"
+        v-model="displayValue"
+        :disabled="isDisabled"
+        @input="handleInput"
+        @change="handleChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+    </div>
+    <button
+      type="button"
+      class="px-3 py-2.5 text-xs font-medium border border-slate-200 rounded-md bg-slate-100 text-slate-600 hover:bg-slate-200 whitespace-nowrap"
+      @click="toggleAuto"
+    >
+      Auto
+    </button>
+  </div>
+</template>
diff --git a/web/src/components/Base/Form/FormLabel.vue b/web/src/components/Base/Form/FormLabel.vue
index 29417be00..ee36cfc38 100644
--- a/web/src/components/Base/Form/FormLabel.vue
+++ b/web/src/components/Base/Form/FormLabel.vue
@@ -1,26 +1,26 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs, inject } from "vue";
-import { type ProvideFormInline } from "./FormInline.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs, inject } from 'vue';
+  import { type ProvideFormInline } from './FormInline.vue';
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const formInline = inject<ProvideFormInline>("formInline", false);
+  const formInline = inject<ProvideFormInline>('formInline', false);
 
-const computedClass = computed(() =>
-  twMerge([
-    "inline-block mb-2",
-    formInline && "mb-2 sm:mb-0 sm:mr-5 sm:text-right",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'inline-block mb-2',
+      formInline && 'mb-2 sm:mb-0 sm:mr-5 sm:text-right',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/FormLayout/TitleLayout.vue b/web/src/components/Base/Form/FormLayout/TitleLayout.vue
index c27aab2be..ac5712b16 100644
--- a/web/src/components/Base/Form/FormLayout/TitleLayout.vue
+++ b/web/src/components/Base/Form/FormLayout/TitleLayout.vue
@@ -1,12 +1,12 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="flex flex-col items-center intro-y sm:flex-row">
-    <h2 class="mr-auto text-lg font-medium">
-      <slot name="title"></slot>
-    </h2>
-    <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
-      <slot name="optional"></slot>
-    </div>
-  </div>
-</template>
+<script setup lang="ts"></script>
+
+<template>
+  <div class="flex flex-col items-center intro-y sm:flex-row">
+    <h2 class="mr-auto text-lg font-medium">
+      <slot name="title"></slot>
+    </h2>
+    <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+      <slot name="optional"></slot>
+    </div>
+  </div>
+</template>
diff --git a/web/src/components/Base/Form/FormLayout/TwoColumnsLayout.vue b/web/src/components/Base/Form/FormLayout/TwoColumnsLayout.vue
index 83af832ad..5c7f39a2f 100644
--- a/web/src/components/Base/Form/FormLayout/TwoColumnsLayout.vue
+++ b/web/src/components/Base/Form/FormLayout/TwoColumnsLayout.vue
@@ -1,130 +1,168 @@
-<script setup lang="ts">
-import { onMounted, ref, toRef } from "vue";
-import Lucide from "@/components/Base/Lucide";
-import { useI18n } from "vue-i18n";
-import { CardState } from "@/types/enums/CardState";
-
-export interface TwoColumnsLayoutCards {
-  id?: string | number,
-  title: string;
-  state: CardState;
-};
-
-
-export interface TwoColumnsLayoutProps {
-  cards: Array<TwoColumnsLayoutCards>,
-  showSideTab?: boolean,
-  usingSideTab?: boolean
-}
-
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<TwoColumnsLayoutProps>(), {
-  cards: (): Array<TwoColumnsLayoutCards> => [],
-  showSideTab: false,
-  usingSideTab: false
-});
-
-const showSideTab = toRef(props, 'showSideTab');
-const usingSideTab = toRef(props, 'usingSideTab')
-const isShowSideTab = ref<boolean>(false);
-
-const emits = defineEmits<{
-  (e: 'handleExpandCard', index: number): void,
-}>();
-
-onMounted(() => {
-  isShowSideTab.value = showSideTab.value;
-});
-
-const onLinkClicked = (index: number): void => {
-  emits('handleExpandCard', index);
-}
-
-const onCardTitleClicked = (index: number): void => {
-  emits('handleExpandCard', index);
-}
-
-const toggleSideTab = (show: boolean | undefined) => {
-  if (show != undefined) {
-    isShowSideTab.value = show;
-  } else {
-    isShowSideTab.value = !isShowSideTab.value;
-  }
-}
-</script>
-
-<template>
-  <div class="grid grid-cols-12 gap-6 mt-5">
-    <div v-if="isShowSideTab && usingSideTab"
-      class="col-span-12 lg:col-span-4 2xl:col-span-4 flex lg:block flex-col-reverse transition ease-in duration-100">
-      <div class="intro-y box mt-5 lg:mt-0">
-        <div class="relative flex items-center p-5">
-          <div class="ml-4 mr-auto flex items-center justify-between w-full">
-            <div class="font-medium text-base">
-              <slot name="side-menu-title"></slot>
-            </div>
-            <div class="transition ease-in duration-100 ml-auto mr-5 xl:block lg:block cursor-pointer"
-              @click="toggleSideTab(false)">
-              <Lucide class="w-4 h-4" icon="ChevronsLeft" />
-            </div>
-          </div>
-        </div>
-        <div class="p-5 border-t border-slate-200/60 dark:border-darkmode-400">
-          <template v-for="(link, index) in cards" :key="index">
-            <a class="flex items-center mt-5" :href="`#${index}`">
-              <Lucide icon="CircleDot" class="w-4 h-4 mr-2" />
-              {{ t(link.title) }}
-              <div
-                :class="{ 'transition ease-in duration-100 ml-auto mr-5 hidden xl:block': true, 'transform rotate-180': link.state }"
-                @click="onLinkClicked(index)">
-                <Lucide v-if="link.state === 'EXPANDED'" class="w-4 h-4" icon="Minus" />
-                <Lucide v-else-if="link.state" class="w-4 h-4" icon="Plus" />
-              </div>
-            </a>
-          </template>
-        </div>
-      </div>
-    </div>
-    <div v-else-if="usingSideTab">
-      <div class="transition ease-in duration-100 ml-auto mr-5 xl:block lg:block cursor-pointer"
-        @click="toggleSideTab(true)">
-        <Lucide class="w-4 h-4" icon="ChevronsRight" />
-      </div>
-    </div>
-
-    <div :class="[
-      `${isShowSideTab && usingSideTab && 'col-span-12 lg:col-span-8 xl:col-span-8'}`,
-      `${!usingSideTab && 'col-span-12'}`,
-      `${usingSideTab && !isShowSideTab && 'col-span-11'}`
-    ]">
-      <Transition>
-        <div class="mt-1 grid grid-cols-12 gap-6 box p-4">
-          <div v-for="(card, index) in cards" :key="index" :class="[
-            'intro-y',
-            { 'border': card.state === CardState.Expanded },
-            'rounded',
-            'col-span-12', '2xl:col-span-12']">
-            <div v-if="card.title" :id="`${index}`"
-              :class="['cursor-pointer', 'flex', 'px-5', 'py-5', 'sm:py-3', 'border-b', { 'border': card.state !== CardState.Expanded }, { 'rounded': card.state !== CardState.Expanded }, 'border-slate-200/60', 'dark:border-darkmode-400']">
-              <div class="w-1/2 flex justify-start" @click="onCardTitleClicked(index)">
-                <h2 class="font-medium text-base mr-auto">{{ t(card.title) }}</h2>
-              </div>
-              <div v-if="card.state !== CardState.Hidden" class="w-1/2 flex justify-end">
-                <div
-                  :class="{ 'transition ease-in duration-100 ml-auto hidden xl:block cursor-pointer': true, 'transform rotate-180': card.state === CardState.Expanded }"
-                  @click="onCardTitleClicked(index)">
-                  <Lucide class="w-6 h-6" icon="ChevronDown" />
-                </div>
-              </div>
-            </div>
-            <div
-              :class="[{ 'block': card.state === CardState.Expanded }, { 'hidden': card.state === CardState.Collapsed }]">
-              <slot :name="`card-items-${card.id ? card.id : index}`" :card="card" :index="index"></slot>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { onMounted, ref, toRef } from 'vue';
+  import Lucide from '@/components/Base/Lucide';
+  import { useI18n } from 'vue-i18n';
+  import { CardState } from '@/types/enums/CardState';
+
+  export interface TwoColumnsLayoutCards {
+    id?: string | number;
+    title: string;
+    state: CardState;
+  }
+
+  export interface TwoColumnsLayoutProps {
+    cards: Array<TwoColumnsLayoutCards>;
+    showSideTab?: boolean;
+    usingSideTab?: boolean;
+  }
+
+  const { t } = useI18n();
+
+  const props = withDefaults(defineProps<TwoColumnsLayoutProps>(), {
+    cards: (): Array<TwoColumnsLayoutCards> => [],
+    showSideTab: false,
+    usingSideTab: false,
+  });
+
+  const showSideTab = toRef(props, 'showSideTab');
+  const usingSideTab = toRef(props, 'usingSideTab');
+  const isShowSideTab = ref<boolean>(false);
+
+  const emits = defineEmits<{
+    (e: 'handleExpandCard', index: number): void;
+  }>();
+
+  onMounted(() => {
+    isShowSideTab.value = showSideTab.value;
+  });
+
+  const onLinkClicked = (index: number): void => {
+    emits('handleExpandCard', index);
+  };
+
+  const onCardTitleClicked = (index: number): void => {
+    emits('handleExpandCard', index);
+  };
+
+  const toggleSideTab = (show: boolean | undefined) => {
+    if (show != undefined) {
+      isShowSideTab.value = show;
+    } else {
+      isShowSideTab.value = !isShowSideTab.value;
+    }
+  };
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div
+      v-if="isShowSideTab && usingSideTab"
+      class="col-span-12 lg:col-span-4 2xl:col-span-4 flex lg:block flex-col-reverse transition ease-in duration-100"
+    >
+      <div class="intro-y box mt-5 lg:mt-0">
+        <div class="relative flex items-center p-5">
+          <div class="ml-4 mr-auto flex items-center justify-between w-full">
+            <div class="font-medium text-base">
+              <slot name="side-menu-title"></slot>
+            </div>
+            <div
+              class="transition ease-in duration-100 ml-auto mr-5 xl:block lg:block cursor-pointer"
+              @click="toggleSideTab(false)"
+            >
+              <Lucide class="w-4 h-4" icon="ChevronsLeft" />
+            </div>
+          </div>
+        </div>
+        <div class="p-5 border-t border-slate-200/60 dark:border-darkmode-400">
+          <template v-for="(link, index) in cards" :key="index">
+            <a class="flex items-center mt-5" :href="`#${index}`">
+              <Lucide icon="CircleDot" class="w-4 h-4 mr-2" />
+              {{ t(link.title) }}
+              <div
+                :class="{
+                  'transition ease-in duration-100 ml-auto mr-5 hidden xl:block': true,
+                  'transform rotate-180': link.state,
+                }"
+                @click="onLinkClicked(index)"
+              >
+                <Lucide v-if="link.state === 'EXPANDED'" class="w-4 h-4" icon="Minus" />
+                <Lucide v-else-if="link.state" class="w-4 h-4" icon="Plus" />
+              </div>
+            </a>
+          </template>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="usingSideTab">
+      <div
+        class="transition ease-in duration-100 ml-auto mr-5 xl:block lg:block cursor-pointer"
+        @click="toggleSideTab(true)"
+      >
+        <Lucide class="w-4 h-4" icon="ChevronsRight" />
+      </div>
+    </div>
+
+    <div
+      :class="[
+        `${isShowSideTab && usingSideTab && 'col-span-12 lg:col-span-8 xl:col-span-8'}`,
+        `${!usingSideTab && 'col-span-12'}`,
+        `${usingSideTab && !isShowSideTab && 'col-span-11'}`,
+      ]"
+    >
+      <Transition>
+        <div class="mt-1 grid grid-cols-12 gap-6 box p-4">
+          <div
+            v-for="(card, index) in cards"
+            :key="index"
+            :class="[
+              'intro-y',
+              { border: card.state === CardState.Expanded },
+              'rounded',
+              'col-span-12',
+              '2xl:col-span-12',
+            ]"
+          >
+            <div
+              v-if="card.title"
+              :id="`${index}`"
+              :class="[
+                'cursor-pointer',
+                'flex',
+                'px-5',
+                'py-5',
+                'sm:py-3',
+                'border-b',
+                { border: card.state !== CardState.Expanded },
+                { rounded: card.state !== CardState.Expanded },
+                'border-slate-200/60',
+                'dark:border-darkmode-400',
+              ]"
+              @click="onCardTitleClicked(index)"
+            >
+              <div class="w-1/2 flex justify-start">
+                <h2 class="font-medium text-base mr-auto">
+                  {{ t(card.title) }}
+                </h2>
+              </div>
+              <div v-if="card.state !== CardState.Hidden" class="w-1/2 flex justify-end">
+                <div
+                  :class="{
+                    'transition ease-in duration-100 ml-auto hidden xl:block cursor-pointer': true,
+                    'transform rotate-180': card.state === CardState.Expanded,
+                  }"
+                >
+                  <Lucide class="w-6 h-6" icon="ChevronDown" />
+                </div>
+              </div>
+            </div>
+            <div
+              :class="[{ block: card.state === CardState.Expanded }, { hidden: card.state === CardState.Collapsed }]"
+            >
+              <slot :name="`card-items-${card.id ? card.id : index}`" :card="card" :index="index"></slot>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
diff --git a/web/src/components/Base/Form/FormLayout/index.ts b/web/src/components/Base/Form/FormLayout/index.ts
index e90aa4144..e48a8319e 100644
--- a/web/src/components/Base/Form/FormLayout/index.ts
+++ b/web/src/components/Base/Form/FormLayout/index.ts
@@ -1,4 +1,4 @@
-import TwoColumnsLayout from './TwoColumnsLayout.vue'
-import TitleLayout from "./TitleLayout.vue";
-
-export { TwoColumnsLayout, TitleLayout }
+import TwoColumnsLayout from './TwoColumnsLayout.vue';
+import TitleLayout from './TitleLayout.vue';
+
+export { TwoColumnsLayout, TitleLayout };
diff --git a/web/src/components/Base/Form/FormSelect.vue b/web/src/components/Base/Form/FormSelect.vue
index 62797b27c..f05a3e58e 100644
--- a/web/src/components/Base/Form/FormSelect.vue
+++ b/web/src/components/Base/Form/FormSelect.vue
@@ -1,77 +1,64 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import {
-  computed,
-  type SelectHTMLAttributes,
-  useAttrs,
-  inject,
-  ref,
-} from "vue";
-import { type ProvideFormInline } from "./FormInline.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type SelectHTMLAttributes, useAttrs, inject, ref } from 'vue';
+  import { type ProvideFormInline } from './FormInline.vue';
 
-interface FormSelectProps extends /* @vue-ignore */ SelectHTMLAttributes {
-  value?: SelectHTMLAttributes["value"];
-  modelValue?: SelectHTMLAttributes["value"];
-  formSelectSize?: "sm" | "lg";
-}
+  export interface FormSelectProps extends /* @vue-ignore */ SelectHTMLAttributes {
+    value?: SelectHTMLAttributes['value'];
+    modelValue?: SelectHTMLAttributes['value'];
+    formSelectSize?: 'sm' | 'lg';
+  }
 
-interface FormSelectEmit {
-  (e: "update:modelValue", value: string): void;
-}
+  export interface FormSelectEmit {
+    (e: 'update:modelValue', value: string): void;
+  }
 
-const selectRef = ref<HTMLSelectElement>();
-const props = defineProps<FormSelectProps>();
-const attrs = useAttrs();
-const formInline = inject<ProvideFormInline>("formInline", false);
+  const selectRef = ref<HTMLSelectElement>();
+  const props = defineProps<FormSelectProps>();
+  const attrs = useAttrs();
+  const formInline = inject<ProvideFormInline>('formInline', false);
 
-const computedClass = computed(() =>
-  twMerge([
-    "disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50",
-    "[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50",
-    "transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50",
-    props.formSelectSize == "sm" && "text-xs py-1.5 pl-2 pr-8",
-    props.formSelectSize == "lg" && "text-lg py-1.5 pl-4 pr-8",
-    formInline && "flex-1",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50',
+      '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50',
+      'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50',
+      props.formSelectSize == 'sm' && 'text-xs py-1.5 pl-2 pr-8',
+      props.formSelectSize == 'lg' && 'text-lg py-1.5 pl-4 pr-8',
+      formInline && 'flex-1',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 
-const emit = defineEmits<FormSelectEmit>();
+  const emit = defineEmits<FormSelectEmit>();
 
-const localValue = computed({
-  get() {
-    if (props.modelValue === undefined && props.value === undefined) {
-      const firstOption = selectRef.value?.querySelectorAll("option")[0];
-      return (
-        firstOption !== undefined &&
-        (firstOption.getAttribute("value") !== null
-          ? firstOption.getAttribute("value")
-          : firstOption.text)
-      );
-    }
+  const localValue = computed({
+    get() {
+      if (props.modelValue === undefined && props.value === undefined) {
+        const firstOption = selectRef.value?.querySelectorAll('option')[0];
+        return (
+          firstOption !== undefined &&
+          (firstOption.getAttribute('value') !== null ? firstOption.getAttribute('value') : firstOption.text)
+        );
+      }
 
-    return props.modelValue === undefined ? props.value : props.modelValue;
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
+      return props.modelValue === undefined ? props.value : props.modelValue;
+    },
+    set(newValue) {
+      emit('update:modelValue', newValue);
+    },
+  });
 </script>
 
 <template>
-  <select
-    ref="selectRef"
-    :class="computedClass"
-    v-bind="_.omit(attrs, 'class')"
-    v-model="localValue"
-  >
+  <select ref="selectRef" :class="computedClass" v-bind="_.omit(attrs, 'class')" v-model="localValue">
     <slot></slot>
   </select>
 </template>
diff --git a/web/src/components/Base/Form/FormSelectSearch.vue b/web/src/components/Base/Form/FormSelectSearch.vue
new file mode 100644
index 000000000..33e328229
--- /dev/null
+++ b/web/src/components/Base/Form/FormSelectSearch.vue
@@ -0,0 +1,218 @@
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, nextTick, onBeforeUnmount, ref, watch, type CSSProperties, type InputHTMLAttributes, useAttrs, inject } from 'vue';
+  import { type ProvideFormInline } from './FormInline.vue';
+  import { type ProvideInputGroup } from './InputGroup/InputGroup.vue';
+  import Lucide from '@/components/Base/Lucide';
+
+  export interface FormSelectSearchOption {
+    value: string | number;
+    label: string;
+  }
+
+  export interface FormSelectSearchProps extends /* @vue-ignore */ InputHTMLAttributes {
+    modelValue?: string | number | null;
+    options?: FormSelectSearchOption[];
+    formInputSize?: 'sm' | 'lg';
+    rounded?: boolean;
+  }
+
+  export interface FormSelectSearchEmit {
+    (e: 'update:modelValue', value: string | number | null): void;
+    (e: 'change', value: string | number | null): void;
+    (e: 'update:search', value: string): void;
+    (e: 'search', value: string): void;
+    (e: 'clear'): void;
+  }
+
+  const props = defineProps<FormSelectSearchProps>();
+
+  const emit = defineEmits<FormSelectSearchEmit>();
+  const attrs = useAttrs();
+  const formInline = inject<ProvideFormInline>('formInline', false);
+  const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
+
+  const wrapperRef = ref<HTMLDivElement | null>(null);
+  const inputRef = ref<HTMLInputElement | null>(null);
+  const isFocused = ref(false);
+  const isOpen = ref(false);
+  const displayValue = ref('');
+  const dropdownStyle = ref<CSSProperties>({
+    top: '0px',
+    left: '0px',
+    width: '0px',
+  });
+
+  const computedClass = computed(() =>
+    twMerge([
+      'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+      '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+      'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+      props.formInputSize == 'sm' && 'text-xs py-1.5 px-2',
+      props.formInputSize == 'lg' && 'text-lg py-1.5 px-4',
+      props.rounded && 'rounded-full',
+      formInline && 'flex-1',
+      inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+      'pr-8',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  const selectedOption = computed<FormSelectSearchOption | null>(() => {
+    if (!props.options || props.modelValue === undefined || props.modelValue === null) {
+      return null;
+    }
+
+    return props.options.find((option) => option.value === props.modelValue) ?? null;
+  });
+
+  const displayedOptions = computed<FormSelectSearchOption[]>(() => props.options ?? []);
+
+  const isLocked = computed(() => selectedOption.value !== null);
+
+  const hasValue = computed(() => props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== '');
+
+  watch(
+    () => [props.modelValue, props.options],
+    () => {
+      if (!isFocused.value) {
+        displayValue.value = selectedOption.value ? selectedOption.value.label : '';
+      }
+    },
+    { immediate: true },
+  );
+
+  const emitSearchDebounced = _.debounce((value: string) => {
+    emit('update:search', value);
+    emit('search', value);
+  }, 300);
+
+  const updateDropdownPosition = () => {
+    const target = wrapperRef.value ?? inputRef.value;
+    if (!target) return;
+
+    const rect = target.getBoundingClientRect();
+    dropdownStyle.value = {
+      top: `${rect.bottom + 4}px`,
+      left: `${rect.left}px`,
+      width: `${rect.width}px`,
+    };
+  };
+
+  const attachDropdownListeners = () => {
+    window.addEventListener('resize', updateDropdownPosition);
+    window.addEventListener('scroll', updateDropdownPosition, true);
+  };
+
+  const detachDropdownListeners = () => {
+    window.removeEventListener('resize', updateDropdownPosition);
+    window.removeEventListener('scroll', updateDropdownPosition, true);
+  };
+
+  const handleInput = (event: Event) => {
+    if (isLocked.value) return;
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+
+    displayValue.value = value;
+    isOpen.value = true;
+    updateDropdownPosition();
+    emitSearchDebounced(value);
+  };
+
+  const handleFocus = async () => {
+    if (isLocked.value) return;
+    isFocused.value = true;
+    isOpen.value = true;
+    await nextTick();
+    updateDropdownPosition();
+  };
+
+  const handleBlur = () => {
+    isFocused.value = false;
+    isOpen.value = false;
+    displayValue.value = selectedOption.value ? selectedOption.value.label : displayValue.value;
+  };
+
+  const handleSelect = (option: FormSelectSearchOption) => {
+    emit('update:modelValue', option.value);
+    emit('change', option.value);
+    displayValue.value = option.label;
+    isOpen.value = false;
+    isFocused.value = false;
+  };
+
+  const handleClear = () => {
+    emit('update:modelValue', null);
+    emit('change', null);
+    displayValue.value = '';
+    isOpen.value = false;
+    isFocused.value = false;
+    emit('update:search', '');
+    emit('search', '');
+    emit('clear');
+  };
+
+  watch(isOpen, async (open) => {
+    if (open) {
+      await nextTick();
+      updateDropdownPosition();
+      attachDropdownListeners();
+      return;
+    }
+
+    detachDropdownListeners();
+  });
+
+  onBeforeUnmount(() => {
+    detachDropdownListeners();
+    emitSearchDebounced.cancel();
+  });
+</script>
+
+<template>
+  <div ref="wrapperRef" class="relative">
+    <input
+      ref="inputRef"
+      :class="computedClass"
+      type="text"
+      v-bind="_.omit(attrs, 'class')"
+      v-model="displayValue"
+      :readonly="isLocked"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="handleInput"
+    />
+    <button
+      v-if="hasValue"
+      type="button"
+      class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-danger"
+      @mousedown.prevent.stop="handleClear"
+    >
+      <Lucide icon="X" class="w-4 h-4" />
+    </button>
+    <Teleport to="body">
+      <ul
+        v-if="isOpen && displayedOptions.length > 0"
+        :style="dropdownStyle"
+        class="fixed z-[9999] max-h-60 overflow-auto rounded-md border border-slate-200 bg-white text-sm shadow-lg dark:border-slate-600 dark:bg-darkmode-800"
+      >
+        <li
+          v-for="option in displayedOptions"
+          :key="option.value"
+          class="cursor-pointer px-3 py-2 hover:bg-slate-100 dark:hover:bg-darkmode-700"
+          @mousedown.prevent="handleSelect(option)"
+        >
+          {{ option.label }}
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
diff --git a/web/src/components/Base/Form/FormSwitch/FormSwitch.vue b/web/src/components/Base/Form/FormSwitch/FormSwitch.vue
index adaa33f83..ec88f06e3 100644
--- a/web/src/components/Base/Form/FormSwitch/FormSwitch.vue
+++ b/web/src/components/Base/Form/FormSwitch/FormSwitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FormCheck from "../FormCheck";
+  import FormCheck from '../FormCheck';
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/FormSwitch/Input.vue b/web/src/components/Base/Form/FormSwitch/Input.vue
index 888dcea7f..3ab1bfa22 100644
--- a/web/src/components/Base/Form/FormSwitch/Input.vue
+++ b/web/src/components/Base/Form/FormSwitch/Input.vue
@@ -1,59 +1,54 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type InputHTMLAttributes, useAttrs } from "vue";
-import FormCheck from "../FormCheck";
-
-interface InputProps extends /* @vue-ignore */ InputHTMLAttributes {
-  modelValue?: InputHTMLAttributes["value"];
-  type: "checkbox";
-}
-
-interface InputEmit {
-  (e: "update:modelValue", value: string): void;
-}
-
-const props = defineProps<InputProps>();
-
-const attrs = useAttrs();
-
-const computedClass = computed(() =>
-  twMerge([
-    // Default
-    "w-[38px] h-[24px] p-px rounded-full relative",
-    "before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600",
-
-    // On checked
-    "checked:bg-primary checked:border-primary checked:bg-none",
-    "before:checked:ml-[14px] before:checked:bg-white",
-
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
-
-const emit = defineEmits<InputEmit>();
-
-const localValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type InputHTMLAttributes, useAttrs } from 'vue';
+  import FormCheck from '../FormCheck';
+
+  interface InputProps extends /* @vue-ignore */ InputHTMLAttributes {
+    modelValue?: InputHTMLAttributes['value'];
+    type: 'checkbox';
+  }
+
+  interface InputEmit {
+    (e: 'update:modelValue', value: string): void;
+  }
+
+  const props = defineProps<InputProps>();
+
+  const attrs = useAttrs();
+
+  const computedClass = computed(() =>
+    twMerge([
+      // Default
+      'w-[38px] h-[24px] p-px rounded-full relative',
+      'before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600',
+
+      // On checked
+      'checked:bg-primary checked:border-primary checked:bg-none',
+      'before:checked:ml-[14px] before:checked:bg-white',
+
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  const emit = defineEmits<InputEmit>();
+
+  const localValue = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(newValue) {
+      emit('update:modelValue', newValue);
+    },
+  });
 </script>
 
 <template>
-  <FormCheck.Input
-    :type="props.type"
-    :class="computedClass"
-    v-bind="_.omit(attrs, 'class')"
-    v-model="localValue"
-  />
+  <FormCheck.Input :type="props.type" :class="computedClass" v-bind="_.omit(attrs, 'class')" v-model="localValue" />
 </template>
diff --git a/web/src/components/Base/Form/FormSwitch/Label.vue b/web/src/components/Base/Form/FormSwitch/Label.vue
index cba4babcf..1896bf72a 100644
--- a/web/src/components/Base/Form/FormSwitch/Label.vue
+++ b/web/src/components/Base/Form/FormSwitch/Label.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FormCheck from "../FormCheck";
+  import FormCheck from '../FormCheck';
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/FormSwitch/index.ts b/web/src/components/Base/Form/FormSwitch/index.ts
index 151c78e7c..1a818a81b 100644
--- a/web/src/components/Base/Form/FormSwitch/index.ts
+++ b/web/src/components/Base/Form/FormSwitch/index.ts
@@ -1,6 +1,6 @@
-import FormSwitch from "./FormSwitch.vue";
-import Input from "./Input.vue";
-import Label from "./Label.vue";
+import FormSwitch from './FormSwitch.vue';
+import Input from './Input.vue';
+import Label from './Label.vue';
 
 const FormSwitchComponent = Object.assign({}, FormSwitch, {
   Input: Input,
diff --git a/web/src/components/Base/Form/FormTextarea.vue b/web/src/components/Base/Form/FormTextarea.vue
index f80c5fc21..fe0b314a1 100644
--- a/web/src/components/Base/Form/FormTextarea.vue
+++ b/web/src/components/Base/Form/FormTextarea.vue
@@ -1,64 +1,58 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type InputHTMLAttributes, useAttrs, inject } from "vue";
-import { type ProvideFormInline } from "./FormInline.vue";
-import { type ProvideInputGroup } from "./InputGroup/InputGroup.vue";
-
-interface FormTextareaProps extends /* @vue-ignore */ InputHTMLAttributes {
-  value?: InputHTMLAttributes["value"];
-  modelValue?: InputHTMLAttributes["value"];
-  formTextareaSize?: "sm" | "lg";
-  rounded?: boolean;
-}
-
-interface FormTextareaEmit {
-  (e: "update:modelValue", value: string): void;
-}
-
-const props = defineProps<FormTextareaProps>();
-const attrs = useAttrs();
-const formInline = inject<ProvideFormInline>("formInline", false);
-const inputGroup = inject<ProvideInputGroup>("inputGroup", false);
-
-const computedClass = computed(() =>
-  twMerge([
-    "disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent",
-    "[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent",
-    "transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",
-    props.formTextareaSize == "sm" && "text-xs py-1.5 px-2",
-    props.formTextareaSize == "lg" && "text-lg py-1.5 px-4",
-    props.rounded && "rounded-full",
-    formInline && "flex-1",
-    inputGroup &&
-      "rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
-
-const emit = defineEmits<FormTextareaEmit>();
-
-const localValue = computed({
-  get() {
-    return props.modelValue === undefined ? props.value : props.modelValue;
-  },
-  set(newValue) {
-    emit("update:modelValue", newValue);
-  },
-});
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type InputHTMLAttributes, useAttrs, inject } from 'vue';
+  import { type ProvideFormInline } from './FormInline.vue';
+  import { type ProvideInputGroup } from './InputGroup/InputGroup.vue';
+
+  interface FormTextareaProps extends /* @vue-ignore */ InputHTMLAttributes {
+    value?: InputHTMLAttributes['value'];
+    modelValue?: InputHTMLAttributes['value'];
+    formTextareaSize?: 'sm' | 'lg';
+    rounded?: boolean;
+  }
+
+  interface FormTextareaEmit {
+    (e: 'update:modelValue', value: string): void;
+  }
+
+  const props = defineProps<FormTextareaProps>();
+  const attrs = useAttrs();
+  const formInline = inject<ProvideFormInline>('formInline', false);
+  const inputGroup = inject<ProvideInputGroup>('inputGroup', false);
+
+  const computedClass = computed(() =>
+    twMerge([
+      'disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent',
+      '[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent',
+      'transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80',
+      props.formTextareaSize == 'sm' && 'text-xs py-1.5 px-2',
+      props.formTextareaSize == 'lg' && 'text-lg py-1.5 px-4',
+      props.rounded && 'rounded-full',
+      formInline && 'flex-1',
+      inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  const emit = defineEmits<FormTextareaEmit>();
+
+  const localValue = computed({
+    get() {
+      return props.modelValue === undefined ? props.value : props.modelValue;
+    },
+    set(newValue) {
+      emit('update:modelValue', newValue);
+    },
+  });
 </script>
 
 <template>
-  <textarea
-    :type="props.type"
-    :class="computedClass"
-    v-bind="_.omit(attrs, 'class')"
-    v-model="localValue"
-  />
+  <textarea :type="props.type" :class="computedClass" v-bind="_.omit(attrs, 'class')" v-model="localValue" />
 </template>
diff --git a/web/src/components/Base/Form/InputGroup/InputGroup.vue b/web/src/components/Base/Form/InputGroup/InputGroup.vue
index be836b4f4..7f2353078 100644
--- a/web/src/components/Base/Form/InputGroup/InputGroup.vue
+++ b/web/src/components/Base/Form/InputGroup/InputGroup.vue
@@ -1,22 +1,20 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs, provide } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs, provide } from 'vue';
 
-export type ProvideInputGroup = boolean;
+  export type ProvideInputGroup = boolean;
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["flex", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['flex', typeof attrs.class === 'string' && attrs.class]));
 
-provide<ProvideInputGroup>("inputGroup", true);
+  provide<ProvideInputGroup>('inputGroup', true);
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/InputGroup/Text.vue b/web/src/components/Base/Form/InputGroup/Text.vue
index 81170fa35..981b66e62 100644
--- a/web/src/components/Base/Form/InputGroup/Text.vue
+++ b/web/src/components/Base/Form/InputGroup/Text.vue
@@ -1,27 +1,26 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs, inject } from "vue";
-import { type ProvideInputGroup } from "./InputGroup.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs, inject } from 'vue';
+  import { type ProvideInputGroup } from './InputGroup.vue';
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const inputGroup = inject<ProvideInputGroup>("inputGroup");
+  const inputGroup = inject<ProvideInputGroup>('inputGroup');
 
-const computedClass = computed(() =>
-  twMerge([
-    "py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400",
-    inputGroup &&
-      "rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400',
+      inputGroup && 'rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Form/InputGroup/index.ts b/web/src/components/Base/Form/InputGroup/index.ts
index 933ee130d..3a806f239 100644
--- a/web/src/components/Base/Form/InputGroup/index.ts
+++ b/web/src/components/Base/Form/InputGroup/index.ts
@@ -1,5 +1,5 @@
-import InputGroup from "./InputGroup.vue";
-import Text from "./Text.vue";
+import InputGroup from './InputGroup.vue';
+import Text from './Text.vue';
 
 const InputGroupComponent = Object.assign({}, InputGroup, {
   Text: Text,
diff --git a/web/src/components/Base/Form/index.ts b/web/src/components/Base/Form/index.ts
index 60f4c77c3..943e9f91e 100644
--- a/web/src/components/Base/Form/index.ts
+++ b/web/src/components/Base/Form/index.ts
@@ -1,15 +1,22 @@
-import FormCheck from "./FormCheck";
-import FormInput from "./FormInput.vue";
-import FormTextarea from "./FormTextarea.vue";
-import FormHelp from "./FormHelp.vue";
-import FormInline from "./FormInline.vue";
-import FormLabel from "./FormLabel.vue";
-import FormSelect from "./FormSelect.vue";
-import FormSwitch from "./FormSwitch";
-import InputGroup from "./InputGroup";
-import FormFileUpload from "./FormFileUpload.vue";
-import FormInputCode from "./FormInputCode.vue";
-import FormErrorMessages from "./FormErrorMessages.vue";
+import FormCheck from './FormCheck';
+import FormInput from './FormInput.vue';
+import FormTextarea from './FormTextarea.vue';
+import FormHelp from './FormHelp.vue';
+import FormInline from './FormInline.vue';
+import FormLabel from './FormLabel.vue';
+import FormSelect from './FormSelect.vue';
+import FormSelectSearch from './FormSelectSearch.vue';
+import FormSwitch from './FormSwitch';
+import InputGroup from './InputGroup';
+import FormFileUpload from './FormFileUpload.vue';
+import FormImageUpload from './FormImageUpload.vue';
+import FormInputCode from './FormInputCode.vue';
+import FormInputCurrency from './FormInputCurrency.vue';
+import FormInputDateTime from './FormInputDateTime.vue';
+import FormInputDateTimeAuto from './FormInputDateTimeAuto.vue';
+import FormImagesField from './FormImagesField.vue';
+import FormErrorMessages from './FormErrorMessages.vue';
+import FormTomSelect from '../TomSelect';
 
 export {
   FormCheck,
@@ -19,9 +26,16 @@ export {
   FormInline,
   FormLabel,
   FormSelect,
+  FormSelectSearch,
   FormSwitch,
   InputGroup,
   FormInputCode,
+  FormInputCurrency,
+  FormInputDateTime,
+  FormInputDateTimeAuto,
+  FormImagesField,
   FormFileUpload,
+  FormImageUpload,
   FormErrorMessages,
+  FormTomSelect,
 };
diff --git a/web/src/components/Base/Headless/Dialog/Description.vue b/web/src/components/Base/Headless/Dialog/Description.vue
index 83268f1bc..33d6d8622 100644
--- a/web/src/components/Base/Headless/Dialog/Description.vue
+++ b/web/src/components/Base/Headless/Dialog/Description.vue
@@ -1,28 +1,25 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { DialogDescription as HeadlessDialogDescription } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { DialogDescription as HeadlessDialogDescription } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface DescriptionProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogDescription> {
-  as?: string | object;
-}
+  interface DescriptionProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogDescription> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<DescriptionProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<DescriptionProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["p-5", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['p-5', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Dialog/Dialog.vue b/web/src/components/Base/Headless/Dialog/Dialog.vue
index 6e2e94fca..4ebc887a9 100644
--- a/web/src/components/Base/Headless/Dialog/Dialog.vue
+++ b/web/src/components/Base/Headless/Dialog/Dialog.vue
@@ -1,70 +1,72 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 
-type Size = "sm" | "md" | "lg" | "xl";
+  type Size = 'sm' | 'md' | 'lg' | 'xl';
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { Dialog as HeadlessDialog, TransitionRoot } from "@headlessui/vue";
-import { provide, useAttrs, computed, ref, type Ref } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { Dialog as HeadlessDialog, TransitionRoot } from '@headlessui/vue';
+  import { provide, useAttrs, computed, ref, type Ref } from 'vue';
 
-export type ProvideDialog = {
-  open: boolean;
-  zoom: Ref<boolean>;
-  size?: Size;
-};
+  export type ProvideDialog = {
+    open: boolean;
+    zoom: Ref<boolean>;
+    size?: Size;
+  };
 
-interface DialogProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialog> {
-  size?: Size;
-  open: boolean;
-  staticBackdrop?: boolean;
-}
+  export interface DialogProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialog> {
+    size?: Size;
+    open: boolean;
+    staticBackdrop?: boolean;
+  }
 
-const props = withDefaults(defineProps<DialogProps>(), {
-  as: "div",
-  open: false,
-  size: "md",
-});
+  const props = withDefaults(defineProps<DialogProps>(), {
+    as: 'div',
+    open: false,
+    size: 'md',
+  });
 
-const { as, onClose, staticBackdrop, size } = props;
-const open = computed(() => props.open);
+  const { as, onClose, staticBackdrop, size } = props;
+  const open = computed(() => props.open);
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["relative z-[60]", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['relative z-[60]', typeof attrs.class === 'string' && attrs.class]));
 
-const zoom = ref(false);
-const emit = defineEmits<{
-  (e: "close", value: boolean): void;
-}>();
+  const zoom = ref(false);
+  const emit = defineEmits<{
+    (e: 'close', value: boolean): void;
+    (e: 'after-leave'): void;
+  }>();
 
-const handleClose = (value: boolean) => {
-  if (!staticBackdrop) {
-    onClose && onClose(value);
-    emit("close", value);
-  } else {
-    zoom.value = true;
-    setTimeout(() => {
-      zoom.value = false;
-    }, 300);
-  }
-};
+  const emitAfterLeave = () => {
+    emit('after-leave');
+  };
+
+  const handleClose = (value: boolean) => {
+    if (!staticBackdrop) {
+      onClose && onClose(value);
+      emit('close', value);
+    } else {
+      zoom.value = true;
+      setTimeout(() => {
+        zoom.value = false;
+      }, 300);
+    }
+  };
 
-provide<ProvideDialog>("dialog", {
-  open: open.value,
-  zoom: zoom,
-  size: size,
-});
+  provide<ProvideDialog>('dialog', {
+    open: open.value,
+    zoom: zoom,
+    size: size,
+  });
 </script>
 
 <template>
-  <TransitionRoot appear as="template" :show="open">
+  <TransitionRoot appear as="template" :show="open" @after-leave="emitAfterLeave">
     <HeadlessDialog
       :as="as"
       @close="
diff --git a/web/src/components/Base/Headless/Dialog/Footer.vue b/web/src/components/Base/Headless/Dialog/Footer.vue
index 805cf3863..00e1130e1 100644
--- a/web/src/components/Base/Headless/Dialog/Footer.vue
+++ b/web/src/components/Base/Headless/Dialog/Footer.vue
@@ -1,29 +1,29 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { useAttrs, computed } from 'vue';
 
-interface FooterProps {
-  as?: string | object;
-}
+  interface FooterProps {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<FooterProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<FooterProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Dialog/Panel.vue b/web/src/components/Base/Headless/Dialog/Panel.vue
index bf8f00feb..2d2128d33 100644
--- a/web/src/components/Base/Headless/Dialog/Panel.vue
+++ b/web/src/components/Base/Headless/Dialog/Panel.vue
@@ -1,42 +1,38 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import {
-  DialogPanel as HeadlessDialogPanel,
-  TransitionChild,
-} from "@headlessui/vue";
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { type ProvideDialog } from "./Dialog.vue";
-import { inject, useAttrs, computed } from "vue";
+  import { DialogPanel as HeadlessDialogPanel, TransitionChild } from '@headlessui/vue';
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { type ProvideDialog } from './Dialog.vue';
+  import { inject, useAttrs, computed } from 'vue';
 
-interface PanelProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogPanel> {
-  as?: string | object;
-}
+  interface PanelProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogPanel> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<PanelProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<PanelProps>(), {
+    as: 'div',
+  });
 
-const dialog = inject<ProvideDialog>("dialog");
+  const dialog = inject<ProvideDialog>('dialog');
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-transform dark:bg-darkmode-600",
-    dialog?.size == "md" && "sm:w-[460px]",
-    dialog?.size == "sm" && "sm:w-[300px]",
-    dialog?.size == "lg" && "sm:w-[600px]",
-    dialog?.size == "xl" && "sm:w-[600px] lg:w-[900px]",
-    dialog?.zoom.value && "scale-105",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-transform dark:bg-darkmode-600',
+      dialog?.size == 'md' && 'sm:w-[460px]',
+      dialog?.size == 'sm' && 'sm:w-[300px]',
+      dialog?.size == 'lg' && 'sm:w-[600px]',
+      dialog?.size == 'xl' && 'sm:w-[600px] lg:w-[900px] xl:w-[1100px]',
+      dialog?.zoom.value && 'scale-105',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
@@ -63,11 +59,7 @@ const computedClass = computed(() =>
     class="fixed inset-0"
   >
     <HeadlessDialogPanel as="template">
-      <component
-        :is="as"
-        :class="computedClass"
-        v-bind="_.omit(attrs, 'class')"
-      >
+      <component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
         <slot></slot>
       </component>
     </HeadlessDialogPanel>
diff --git a/web/src/components/Base/Headless/Dialog/Title.vue b/web/src/components/Base/Headless/Dialog/Title.vue
index bc11b85d2..5aac46744 100644
--- a/web/src/components/Base/Headless/Dialog/Title.vue
+++ b/web/src/components/Base/Headless/Dialog/Title.vue
@@ -1,31 +1,30 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { DialogTitle as HeadlessDialogTitle } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { DialogTitle as HeadlessDialogTitle } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface TitleProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogTitle> {
-  as?: string | object;
-}
+  interface TitleProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogTitle> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<TitleProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<TitleProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Dialog/index.ts b/web/src/components/Base/Headless/Dialog/index.ts
index 1fc968394..e86b7c654 100644
--- a/web/src/components/Base/Headless/Dialog/index.ts
+++ b/web/src/components/Base/Headless/Dialog/index.ts
@@ -1,8 +1,8 @@
-import Dialog from "./Dialog.vue";
-import Description from "./Description.vue";
-import Footer from "./Footer.vue";
-import Panel from "./Panel.vue";
-import Title from "./Title.vue";
+import Dialog from './Dialog.vue';
+import Description from './Description.vue';
+import Footer from './Footer.vue';
+import Panel from './Panel.vue';
+import Title from './Title.vue';
 
 const DialogComponent = Object.assign({}, Dialog, {
   Description: Description,
diff --git a/web/src/components/Base/Headless/Disclosure/Button.vue b/web/src/components/Base/Headless/Disclosure/Button.vue
index e1f6b8c10..dd02b9ac8 100644
--- a/web/src/components/Base/Headless/Disclosure/Button.vue
+++ b/web/src/components/Base/Headless/Disclosure/Button.vue
@@ -1,44 +1,42 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { DisclosureButton as HeadlessDisclosureButton } from "@headlessui/vue";
-import { useAttrs, computed, inject, watch } from "vue";
-import { type ProvideDisclosure } from "./Disclosure/Provider.vue";
-import { type ProvideGroup } from "./Group.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { DisclosureButton as HeadlessDisclosureButton } from '@headlessui/vue';
+  import { useAttrs, computed, inject, watch } from 'vue';
+  import { type ProvideDisclosure } from './Disclosure/Provider.vue';
+  import { type ProvideGroup } from './Group.vue';
 
-interface ButtonProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDisclosureButton> {
-  as?: string | object;
-}
+  interface ButtonProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDisclosureButton> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<ButtonProps>(), {
-  as: "button",
-});
+  const { as } = withDefaults(defineProps<ButtonProps>(), {
+    as: 'button',
+  });
 
-const disclosure = inject<ProvideDisclosure>("disclosure");
-const group = inject<ProvideGroup>("group");
+  const disclosure = inject<ProvideDisclosure>('disclosure');
+  const group = inject<ProvideGroup>('group');
 
-if (group) {
-  watch(group, () => {
-    group.value.selectedIndex !== disclosure?.value.index &&
-      disclosure?.value.close();
-  });
-}
+  if (group) {
+    watch(group, () => {
+      group.value.selectedIndex !== disclosure?.value.index && disclosure?.value.close();
+    });
+  }
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400",
-    disclosure?.value.open && "text-primary dark:text-slate-300",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'outline-none py-4 -my-4 font-medium w-full text-left dark:text-slate-400',
+      disclosure?.value.open && 'text-primary dark:text-slate-300',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Disclosure/Disclosure/Disclosure.vue b/web/src/components/Base/Headless/Disclosure/Disclosure/Disclosure.vue
index 9135fc1cd..3bfca2ba1 100644
--- a/web/src/components/Base/Headless/Disclosure/Disclosure/Disclosure.vue
+++ b/web/src/components/Base/Headless/Disclosure/Disclosure/Disclosure.vue
@@ -1,38 +1,37 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { Disclosure as HeadlessDisclosure } from "@headlessui/vue";
-import { useAttrs, computed, inject } from "vue";
-import { type ProvideGroup } from "../Group.vue";
-import Provider from "./Provider.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { Disclosure as HeadlessDisclosure } from '@headlessui/vue';
+  import { useAttrs, computed, inject } from 'vue';
+  import { type ProvideGroup } from '../Group.vue';
+  import Provider from './Provider.vue';
 
-interface DisclosureProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDisclosure> {
-  index?: number;
-}
+  interface DisclosureProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDisclosure> {
+    index?: number;
+  }
 
-const { index } = withDefaults(defineProps<DisclosureProps>(), {
-  index: 0,
-});
+  const { index } = withDefaults(defineProps<DisclosureProps>(), {
+    index: 0,
+  });
 
-const group = inject<ProvideGroup>("group");
+  const group = inject<ProvideGroup>('group');
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "py-4 first:-mt-4 last:-mb-4",
-    "[&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400",
-    group?.value.variant == "boxed" &&
-      "p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'py-4 first:-mt-4 last:-mb-4',
+      '[&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400',
+      group?.value.variant == 'boxed' &&
+        'p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Disclosure/Disclosure/Provider.vue b/web/src/components/Base/Headless/Disclosure/Disclosure/Provider.vue
index 5dea36ca3..5801429a6 100644
--- a/web/src/components/Base/Headless/Disclosure/Disclosure/Provider.vue
+++ b/web/src/components/Base/Headless/Disclosure/Disclosure/Provider.vue
@@ -1,34 +1,34 @@
 <script setup lang="ts">
-import { computed, provide, type ComputedRef } from "vue";
+  import { computed, provide, type ComputedRef } from 'vue';
 
-export type ProvideDisclosure = ComputedRef<{
-  open: boolean;
-  close: () => void;
-  index: number;
-}>;
+  export type ProvideDisclosure = ComputedRef<{
+    open: boolean;
+    close: () => void;
+    index: number;
+  }>;
 
-interface ProviderProps {
-  open: boolean;
-  close: (ref?: HTMLElement) => void;
-  index: number;
-}
+  interface ProviderProps {
+    open: boolean;
+    close: (ref?: HTMLElement) => void;
+    index: number;
+  }
 
-const props = withDefaults(defineProps<ProviderProps>(), {
-  open: false,
-  close: () => {},
-  index: 0,
-});
+  const props = withDefaults(defineProps<ProviderProps>(), {
+    open: false,
+    close: () => {},
+    index: 0,
+  });
 
-provide<ProvideDisclosure>(
-  "disclosure",
-  computed(() => {
-    return {
-      open: props.open,
-      close: props.close,
-      index: props.index,
-    };
-  })
-);
+  provide<ProvideDisclosure>(
+    'disclosure',
+    computed(() => {
+      return {
+        open: props.open,
+        close: props.close,
+        index: props.index,
+      };
+    }),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Disclosure/Disclosure/index.ts b/web/src/components/Base/Headless/Disclosure/Disclosure/index.ts
index a58842700..fb33ac587 100644
--- a/web/src/components/Base/Headless/Disclosure/Disclosure/index.ts
+++ b/web/src/components/Base/Headless/Disclosure/Disclosure/index.ts
@@ -1,3 +1,3 @@
-import Disclosure from "./Disclosure.vue";
+import Disclosure from './Disclosure.vue';
 
 export default Disclosure;
diff --git a/web/src/components/Base/Headless/Disclosure/Group.vue b/web/src/components/Base/Headless/Disclosure/Group.vue
index 92c0399ab..ea8c273cd 100644
--- a/web/src/components/Base/Headless/Disclosure/Group.vue
+++ b/web/src/components/Base/Headless/Disclosure/Group.vue
@@ -1,53 +1,49 @@
 <script lang="ts">
-type Variant = "default" | "boxed";
+  type Variant = 'default' | 'boxed';
 </script>
 
 <script setup lang="ts">
-import { ref, provide, useSlots, type ComputedRef, computed } from "vue";
-
-export type ProvideGroup = ComputedRef<{
-  selectedIndex?: number;
-  setSelectedIndex: (value: number) => void;
-  variant?: Variant;
-}>;
-
-interface GroupProps {
-  as?: string | object;
-  selectedIndex?: number;
-  variant?: Variant;
-}
-
-const slots = useSlots();
-
-const { as, selectedIndex, variant } = withDefaults(defineProps<GroupProps>(), {
-  as: "div",
-  selectedIndex: 0,
-  variant: "default",
-});
-
-const active = ref(selectedIndex);
-const setActive = (value: number) => {
-  active.value = value;
-};
-
-provide<ProvideGroup>(
-  "group",
-  computed(() => {
-    return {
-      selectedIndex: active.value,
-      setSelectedIndex: setActive,
-      variant: variant,
-    };
-  })
-);
+  import { ref, provide, useSlots, type ComputedRef, computed } from 'vue';
+
+  export type ProvideGroup = ComputedRef<{
+    selectedIndex?: number;
+    setSelectedIndex: (value: number) => void;
+    variant?: Variant;
+  }>;
+
+  interface GroupProps {
+    as?: string | object;
+    selectedIndex?: number;
+    variant?: Variant;
+  }
+
+  const slots = useSlots();
+
+  const { as, selectedIndex, variant } = withDefaults(defineProps<GroupProps>(), {
+    as: 'div',
+    selectedIndex: 0,
+    variant: 'default',
+  });
+
+  const active = ref(selectedIndex);
+  const setActive = (value: number) => {
+    active.value = value;
+  };
+
+  provide<ProvideGroup>(
+    'group',
+    computed(() => {
+      return {
+        selectedIndex: active.value,
+        setSelectedIndex: setActive,
+        variant: variant,
+      };
+    }),
+  );
 </script>
 
 <template>
   <component :is="as">
-    <component
-      v-for="(item, key) in slots.default && slots.default()"
-      :is="item"
-      :index="key"
-    />
+    <component v-for="(item, key) in slots.default && slots.default()" :is="item" :index="key" />
   </component>
 </template>
diff --git a/web/src/components/Base/Headless/Disclosure/Panel.vue b/web/src/components/Base/Headless/Disclosure/Panel.vue
index 51780188f..2c6c66ae2 100644
--- a/web/src/components/Base/Headless/Disclosure/Panel.vue
+++ b/web/src/components/Base/Headless/Disclosure/Panel.vue
@@ -1,34 +1,30 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import {
-  DisclosurePanel as HeadlessDisclosurePanel,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { DisclosurePanel as HeadlessDisclosurePanel, TransitionRoot } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface PanelProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDisclosurePanel> {
-  as?: string | object;
-}
+  interface PanelProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDisclosurePanel> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<PanelProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<PanelProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "mt-3 text-slate-700 leading-relaxed dark:text-slate-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'mt-3 text-slate-700 leading-relaxed dark:text-slate-400',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
@@ -43,11 +39,7 @@ const computedClass = computed(() =>
     leaveTo="mt-0 max-h-0 invisible opacity-0"
   >
     <HeadlessDisclosurePanel as="template">
-      <component
-        :is="as"
-        :class="computedClass"
-        v-bind="_.omit(attrs, 'class')"
-      >
+      <component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
         <slot></slot>
       </component>
     </HeadlessDisclosurePanel>
diff --git a/web/src/components/Base/Headless/Disclosure/index.ts b/web/src/components/Base/Headless/Disclosure/index.ts
index ff5199ea9..bda814b34 100644
--- a/web/src/components/Base/Headless/Disclosure/index.ts
+++ b/web/src/components/Base/Headless/Disclosure/index.ts
@@ -1,7 +1,7 @@
-import Disclosure from "./Disclosure";
-import Group from "./Group.vue";
-import Button from "./Button.vue";
-import Panel from "./Panel.vue";
+import Disclosure from './Disclosure';
+import Group from './Group.vue';
+import Button from './Button.vue';
+import Panel from './Panel.vue';
 
 const DisclosureComponent = Object.assign({}, Disclosure, {
   Group: Group,
diff --git a/web/src/components/Base/Headless/Menu/Button.vue b/web/src/components/Base/Headless/Menu/Button.vue
index b36ca803e..ef3a448af 100644
--- a/web/src/components/Base/Headless/Menu/Button.vue
+++ b/web/src/components/Base/Headless/Menu/Button.vue
@@ -1,34 +1,31 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { MenuButton as HeadlessMenuButton } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { MenuButton as HeadlessMenuButton } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface ButtonProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessMenuButton> {
-  as?: string | object;
-}
+  interface ButtonProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessMenuButton> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<ButtonProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<ButtonProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["cursor-pointer", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['cursor-pointer', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
   <HeadlessMenuButton as="template">
     <component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
-      <slot></slot
-    ></component>
+      <slot></slot>
+    </component>
   </HeadlessMenuButton>
 </template>
diff --git a/web/src/components/Base/Headless/Menu/Divider.vue b/web/src/components/Base/Headless/Menu/Divider.vue
index 8e6701a17..27758953c 100644
--- a/web/src/components/Base/Headless/Menu/Divider.vue
+++ b/web/src/components/Base/Headless/Menu/Divider.vue
@@ -1,29 +1,26 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { useAttrs, computed } from 'vue';
 
-interface DividerProps {
-  as?: string | object;
-}
+  interface DividerProps {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<DividerProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<DividerProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge(['h-px my-2 -mx-2 bg-slate-200/60 dark:bg-darkmode-400', typeof attrs.class === 'string' && attrs.class]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Menu/Footer.vue b/web/src/components/Base/Headless/Menu/Footer.vue
index 582cd17e0..158d929d6 100644
--- a/web/src/components/Base/Headless/Menu/Footer.vue
+++ b/web/src/components/Base/Headless/Menu/Footer.vue
@@ -1,26 +1,24 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { useAttrs, computed } from 'vue';
 
-interface FooterProps {
-  as?: string | object;
-}
+  interface FooterProps {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<FooterProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<FooterProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["flex p-1", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['flex p-1', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Menu/Header.vue b/web/src/components/Base/Headless/Menu/Header.vue
index fc5f5b0e5..603309999 100644
--- a/web/src/components/Base/Headless/Menu/Header.vue
+++ b/web/src/components/Base/Headless/Menu/Header.vue
@@ -1,26 +1,24 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { useAttrs, computed } from 'vue';
 
-interface HeaderProps {
-  as?: string | object;
-}
+  interface HeaderProps {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<HeaderProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<HeaderProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["p-2 font-medium", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['p-2 font-medium', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Menu/Item.vue b/web/src/components/Base/Headless/Menu/Item.vue
index 0e0e79287..bb003e70c 100644
--- a/web/src/components/Base/Headless/Menu/Item.vue
+++ b/web/src/components/Base/Headless/Menu/Item.vue
@@ -1,31 +1,30 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { MenuItem as HeadlessMenuItem } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { MenuItem as HeadlessMenuItem } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface ItemProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessMenuItem> {
-  as?: string | object;
-}
+  interface ItemProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessMenuItem> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<ItemProps>(), {
-  as: "a",
-});
+  const { as } = withDefaults(defineProps<ItemProps>(), {
+    as: 'a',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Menu/Items.vue b/web/src/components/Base/Headless/Menu/Items.vue
index 83f8c3d37..8add26183 100644
--- a/web/src/components/Base/Headless/Menu/Items.vue
+++ b/web/src/components/Base/Headless/Menu/Items.vue
@@ -1,48 +1,44 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import {
-  MenuItems as HeadlessMenuItems,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { MenuItems as HeadlessMenuItems, TransitionRoot } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface ItemsProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessMenuItems> {
-  as?: string | object;
-  placement?:
-    | "top-start"
-    | "top"
-    | "top-end"
-    | "right-start"
-    | "right"
-    | "right-end"
-    | "bottom-end"
-    | "bottom"
-    | "bottom-start"
-    | "left-start"
-    | "left"
-    | "left-end";
-}
+  interface ItemsProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessMenuItems> {
+    as?: string | object;
+    placement?:
+      | 'top-start'
+      | 'top'
+      | 'top-end'
+      | 'right-start'
+      | 'right'
+      | 'right-end'
+      | 'bottom-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'left-start'
+      | 'left'
+      | 'left-end';
+  }
 
-const { as } = withDefaults(defineProps<ItemsProps>(), {
-  as: "div",
-  placement: "bottom-end",
-});
+  const { as } = withDefaults(defineProps<ItemsProps>(), {
+    as: 'div',
+    placement: 'bottom-end',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "p-2 shadow-[0px_3px_10px_#00000017] bg-white border-transparent rounded-md dark:bg-darkmode-600 dark:border-transparent",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'p-2 shadow-[0px_3px_10px_#00000017] bg-white border-transparent rounded-md dark:bg-darkmode-600 dark:border-transparent',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
@@ -74,11 +70,7 @@ const computedClass = computed(() =>
       ]"
     >
       <HeadlessMenuItems as="template">
-        <component
-          :is="as"
-          :class="computedClass"
-          v-bind="_.omit(attrs, 'class')"
-        >
+        <component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
           <slot></slot>
         </component>
       </HeadlessMenuItems>
diff --git a/web/src/components/Base/Headless/Menu/Menu.vue b/web/src/components/Base/Headless/Menu/Menu.vue
index 6c0616d97..056edb6ae 100644
--- a/web/src/components/Base/Headless/Menu/Menu.vue
+++ b/web/src/components/Base/Headless/Menu/Menu.vue
@@ -1,28 +1,25 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { Menu as HeadlessMenu } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { Menu as HeadlessMenu } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface MenuProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessMenu> {
-  as?: string | object;
-}
+  interface MenuProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessMenu> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<MenuProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<MenuProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["relative", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['relative', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Menu/index.ts b/web/src/components/Base/Headless/Menu/index.ts
index 357b6ee4b..6099b2f62 100644
--- a/web/src/components/Base/Headless/Menu/index.ts
+++ b/web/src/components/Base/Headless/Menu/index.ts
@@ -1,10 +1,10 @@
-import Menu from "./Menu.vue";
-import Button from "./Button.vue";
-import Items from "./Items.vue";
-import Item from "./Item.vue";
-import Divider from "./Divider.vue";
-import Header from "./Header.vue";
-import Footer from "./Footer.vue";
+import Menu from './Menu.vue';
+import Button from './Button.vue';
+import Items from './Items.vue';
+import Item from './Item.vue';
+import Divider from './Divider.vue';
+import Header from './Header.vue';
+import Footer from './Footer.vue';
 
 const TabComponent = Object.assign({}, Menu, {
   Button: Button,
diff --git a/web/src/components/Base/Headless/Popover/Button.vue b/web/src/components/Base/Headless/Popover/Button.vue
index 8aa8ea6b9..f8ea301a6 100644
--- a/web/src/components/Base/Headless/Popover/Button.vue
+++ b/web/src/components/Base/Headless/Popover/Button.vue
@@ -1,34 +1,31 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { PopoverButton as HeadlessPopoverButton } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { PopoverButton as HeadlessPopoverButton } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface ButtonProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessPopoverButton> {
-  as?: string | object;
-}
+  interface ButtonProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessPopoverButton> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<ButtonProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<ButtonProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["cursor-pointer", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['cursor-pointer', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
   <HeadlessPopoverButton as="template">
     <component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
-      <slot></slot
-    ></component>
+      <slot></slot>
+    </component>
   </HeadlessPopoverButton>
 </template>
diff --git a/web/src/components/Base/Headless/Popover/Panel.vue b/web/src/components/Base/Headless/Popover/Panel.vue
index 1ec0fdb04..9ad101484 100644
--- a/web/src/components/Base/Headless/Popover/Panel.vue
+++ b/web/src/components/Base/Headless/Popover/Panel.vue
@@ -1,48 +1,44 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import {
-  PopoverPanel as HeadlessPopoverPanel,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { PopoverPanel as HeadlessPopoverPanel, TransitionRoot } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface PanelProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessPopoverPanel> {
-  as?: string | object;
-  placement?:
-    | "top-start"
-    | "top"
-    | "top-end"
-    | "right-start"
-    | "right"
-    | "right-end"
-    | "bottom-end"
-    | "bottom"
-    | "bottom-start"
-    | "left-start"
-    | "left"
-    | "left-end";
-}
+  interface PanelProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessPopoverPanel> {
+    as?: string | object;
+    placement?:
+      | 'top-start'
+      | 'top'
+      | 'top-end'
+      | 'right-start'
+      | 'right'
+      | 'right-end'
+      | 'bottom-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'left-start'
+      | 'left'
+      | 'left-end';
+  }
 
-const { as } = withDefaults(defineProps<PanelProps>(), {
-  as: "div",
-  placement: "bottom-end",
-});
+  const { as } = withDefaults(defineProps<PanelProps>(), {
+    as: 'div',
+    placement: 'bottom-end',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "p-2 shadow-[0px_3px_20px_#0000000b] bg-white border-transparent rounded-md dark:bg-darkmode-600 dark:border-transparent",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'p-2 shadow-[0px_3px_20px_#0000000b] bg-white border-transparent rounded-md dark:bg-darkmode-600 dark:border-transparent',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
@@ -73,11 +69,7 @@ const computedClass = computed(() =>
         { 'right-[100%] bottom-0': placement == 'left-end' },
       ]"
     >
-      <HeadlessPopoverPanel
-        :as="as"
-        :class="computedClass"
-        v-bind="_.omit(attrs, 'class')"
-      >
+      <HeadlessPopoverPanel :as="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
         <slot></slot>
       </HeadlessPopoverPanel>
     </div>
diff --git a/web/src/components/Base/Headless/Popover/Popover.vue b/web/src/components/Base/Headless/Popover/Popover.vue
index 505f3a8f3..3852e5bf4 100644
--- a/web/src/components/Base/Headless/Popover/Popover.vue
+++ b/web/src/components/Base/Headless/Popover/Popover.vue
@@ -1,34 +1,31 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { Popover as HeadlessPopover } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { Popover as HeadlessPopover } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface PopoverProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessPopover> {
-  as?: string | object;
-}
+  interface PopoverProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessPopover> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<PopoverProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<PopoverProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["relative", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['relative', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
   <HeadlessPopover as="template" v-slot="{ close }">
     <component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
-      <slot :close="close"></slot
-    ></component>
+      <slot :close="close"></slot>
+    </component>
   </HeadlessPopover>
 </template>
diff --git a/web/src/components/Base/Headless/Popover/index.ts b/web/src/components/Base/Headless/Popover/index.ts
index 4f22d162b..38db714bf 100644
--- a/web/src/components/Base/Headless/Popover/index.ts
+++ b/web/src/components/Base/Headless/Popover/index.ts
@@ -1,6 +1,6 @@
-import Popover from "./Popover.vue";
-import Button from "./Button.vue";
-import Panel from "./Panel.vue";
+import Popover from './Popover.vue';
+import Button from './Button.vue';
+import Panel from './Panel.vue';
 
 const DialogComponent = Object.assign({}, Popover, {
   Button: Button,
diff --git a/web/src/components/Base/Headless/Slideover/Description.vue b/web/src/components/Base/Headless/Slideover/Description.vue
index 390e9fa9b..5baf6a356 100644
--- a/web/src/components/Base/Headless/Slideover/Description.vue
+++ b/web/src/components/Base/Headless/Slideover/Description.vue
@@ -1,31 +1,27 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { DialogDescription as HeadlessDialogDescription } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { DialogDescription as HeadlessDialogDescription } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface DescriptionProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogDescription> {
-  as?: string | object;
-}
+  interface DescriptionProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogDescription> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<DescriptionProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<DescriptionProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "p-5 overflow-y-auto flex-1",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge(['p-5 overflow-y-auto flex-1', typeof attrs.class === 'string' && attrs.class]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Slideover/Footer.vue b/web/src/components/Base/Headless/Slideover/Footer.vue
index 805cf3863..00e1130e1 100644
--- a/web/src/components/Base/Headless/Slideover/Footer.vue
+++ b/web/src/components/Base/Headless/Slideover/Footer.vue
@@ -1,29 +1,29 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { useAttrs, computed } from 'vue';
 
-interface FooterProps {
-  as?: string | object;
-}
+  interface FooterProps {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<FooterProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<FooterProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'px-5 py-3 text-right border-t border-slate-200/60 dark:border-darkmode-400',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Slideover/Panel.vue b/web/src/components/Base/Headless/Slideover/Panel.vue
index 5969042b2..fada88d91 100644
--- a/web/src/components/Base/Headless/Slideover/Panel.vue
+++ b/web/src/components/Base/Headless/Slideover/Panel.vue
@@ -1,42 +1,38 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import {
-  DialogPanel as HeadlessDialogPanel,
-  TransitionChild,
-} from "@headlessui/vue";
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { type ProvideSlideover } from "./Slideover.vue";
-import { inject, useAttrs, computed } from "vue";
+  import { DialogPanel as HeadlessDialogPanel, TransitionChild } from '@headlessui/vue';
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { type ProvideSlideover } from './Slideover.vue';
+  import { inject, useAttrs, computed } from 'vue';
 
-interface PanelProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogPanel> {
-  as?: string | object;
-}
+  interface PanelProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogPanel> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<PanelProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<PanelProps>(), {
+    as: 'div',
+  });
 
-const slideover = inject<ProvideSlideover>("slideover");
+  const slideover = inject<ProvideSlideover>('slideover');
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-transform dark:bg-darkmode-600",
-    slideover?.size == "md" && "sm:w-[460px]",
-    slideover?.size == "sm" && "sm:w-[300px]",
-    slideover?.size == "lg" && "sm:w-[600px]",
-    slideover?.size == "xl" && "sm:w-[600px] lg:w-[900px]",
-    slideover?.zoom.value && "scale-105",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'w-[90%] ml-auto h-screen flex flex-col bg-white relative shadow-md transition-transform dark:bg-darkmode-600',
+      slideover?.size == 'md' && 'sm:w-[460px]',
+      slideover?.size == 'sm' && 'sm:w-[300px]',
+      slideover?.size == 'lg' && 'sm:w-[600px]',
+      slideover?.size == 'xl' && 'sm:w-[600px] lg:w-[900px]',
+      slideover?.zoom.value && 'scale-105',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
@@ -62,11 +58,7 @@ const computedClass = computed(() =>
     class="fixed inset-y-0 right-0"
   >
     <HeadlessDialogPanel as="template">
-      <component
-        :is="as"
-        :class="computedClass"
-        v-bind="_.omit(attrs, 'class')"
-      >
+      <component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
         <slot></slot>
       </component>
     </HeadlessDialogPanel>
diff --git a/web/src/components/Base/Headless/Slideover/Slideover.vue b/web/src/components/Base/Headless/Slideover/Slideover.vue
index 507742bd1..e40874c28 100644
--- a/web/src/components/Base/Headless/Slideover/Slideover.vue
+++ b/web/src/components/Base/Headless/Slideover/Slideover.vue
@@ -1,66 +1,63 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 
-type Size = "sm" | "md" | "lg" | "xl";
+  type Size = 'sm' | 'md' | 'lg' | 'xl';
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { Dialog as HeadlessDialog, TransitionRoot } from "@headlessui/vue";
-import { provide, useAttrs, computed, ref, type Ref } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { Dialog as HeadlessDialog, TransitionRoot } from '@headlessui/vue';
+  import { provide, useAttrs, computed, ref, type Ref } from 'vue';
 
-export type ProvideSlideover = {
-  open: boolean;
-  zoom: Ref<boolean>;
-  size?: Size;
-};
+  export type ProvideSlideover = {
+    open: boolean;
+    zoom: Ref<boolean>;
+    size?: Size;
+  };
 
-interface SlideoverProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialog> {
-  size?: Size;
-  open: boolean;
-  staticBackdrop?: boolean;
-}
+  interface SlideoverProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialog> {
+    size?: Size;
+    open: boolean;
+    staticBackdrop?: boolean;
+  }
 
-const props = withDefaults(defineProps<SlideoverProps>(), {
-  as: "div",
-  open: false,
-  size: "md",
-});
+  const props = withDefaults(defineProps<SlideoverProps>(), {
+    as: 'div',
+    open: false,
+    size: 'md',
+  });
 
-const { as, onClose, staticBackdrop, size } = props;
-const open = computed(() => props.open);
+  const { as, onClose, staticBackdrop, size } = props;
+  const open = computed(() => props.open);
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge(["relative z-[60]", typeof attrs.class === "string" && attrs.class])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() => twMerge(['relative z-[60]', typeof attrs.class === 'string' && attrs.class]));
 
-const zoom = ref(false);
-const emit = defineEmits<{
-  (e: "close", value: boolean): void;
-}>();
+  const zoom = ref(false);
+  const emit = defineEmits<{
+    (e: 'close', value: boolean): void;
+  }>();
 
-const handleClose = (value: boolean) => {
-  if (!staticBackdrop) {
-    onClose && onClose(value);
-    emit("close", value);
-  } else {
-    zoom.value = true;
-    setTimeout(() => {
-      zoom.value = false;
-    }, 300);
-  }
-};
+  const handleClose = (value: boolean) => {
+    if (!staticBackdrop) {
+      onClose && onClose(value);
+      emit('close', value);
+    } else {
+      zoom.value = true;
+      setTimeout(() => {
+        zoom.value = false;
+      }, 300);
+    }
+  };
 
-provide<ProvideSlideover>("slideover", {
-  open: open.value,
-  zoom: zoom,
-  size: size,
-});
+  provide<ProvideSlideover>('slideover', {
+    open: open.value,
+    zoom: zoom,
+    size: size,
+  });
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Slideover/Title.vue b/web/src/components/Base/Headless/Slideover/Title.vue
index bc11b85d2..5aac46744 100644
--- a/web/src/components/Base/Headless/Slideover/Title.vue
+++ b/web/src/components/Base/Headless/Slideover/Title.vue
@@ -1,31 +1,30 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { DialogTitle as HeadlessDialogTitle } from "@headlessui/vue";
-import { useAttrs, computed } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { DialogTitle as HeadlessDialogTitle } from '@headlessui/vue';
+  import { useAttrs, computed } from 'vue';
 
-interface TitleProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogTitle> {
-  as?: string | object;
-}
+  interface TitleProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessDialogTitle> {
+    as?: string | object;
+  }
 
-const { as } = withDefaults(defineProps<TitleProps>(), {
-  as: "div",
-});
+  const { as } = withDefaults(defineProps<TitleProps>(), {
+    as: 'div',
+  });
 
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    "flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      'flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Slideover/index.ts b/web/src/components/Base/Headless/Slideover/index.ts
index df1ce0731..b9fc4aac3 100644
--- a/web/src/components/Base/Headless/Slideover/index.ts
+++ b/web/src/components/Base/Headless/Slideover/index.ts
@@ -1,8 +1,8 @@
-import Slideover from "./Slideover.vue";
-import Description from "./Description.vue";
-import Footer from "./Footer.vue";
-import Panel from "./Panel.vue";
-import Title from "./Title.vue";
+import Slideover from './Slideover.vue';
+import Description from './Description.vue';
+import Footer from './Footer.vue';
+import Panel from './Panel.vue';
+import Title from './Title.vue';
 
 const SlideoverComponent = Object.assign({}, Slideover, {
   Description: Description,
diff --git a/web/src/components/Base/Headless/Tab/Button.vue b/web/src/components/Base/Headless/Tab/Button.vue
index bb1508d11..cc7da6159 100644
--- a/web/src/components/Base/Headless/Tab/Button.vue
+++ b/web/src/components/Base/Headless/Tab/Button.vue
@@ -1,67 +1,58 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type ButtonHTMLAttributes, useAttrs, inject } from "vue";
-import { type ProvideTab } from "./Tab/Provider.vue";
-import { type ProvideList } from "./List.vue";
-
-interface ButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
-  as?: string | object;
-}
-
-const { as } = withDefaults(defineProps<ButtonProps>(), {
-  as: "a",
-});
-
-const attrs = useAttrs();
-
-const tab = inject<ProvideTab>("tab");
-const list = inject<ProvideList>("list");
-
-const computedClass = computed(() =>
-  twMerge([
-    "cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400",
-    tab?.selected.value && "text-slate-800 dark:text-white",
-
-    // Default
-    list?.variant == "tabs" &&
-      "block border-transparent rounded-t-md dark:border-transparent",
-    list?.variant == "tabs" &&
-      tab?.selected.value &&
-      "bg-white border-slate-200 border-b-transparent font-medium dark:bg-transparent dark:border-t-darkmode-400 dark:border-b-darkmode-600 dark:border-x-darkmode-400",
-    list?.variant == "tabs" &&
-      !tab?.selected.value &&
-      "hover:bg-slate-100 dark:hover:bg-darkmode-400 dark:hover:border-transparent",
-
-    // Pills
-    list?.variant == "pills" && "rounded-md border-0",
-    list?.variant == "pills" &&
-      tab?.selected.value &&
-      "bg-primary text-white font-medium",
-
-    // Boxed tabs
-    list?.variant == "boxed-tabs" &&
-      "shadow-[0px_3px_20px_#0000000b] rounded-md",
-    list?.variant == "boxed-tabs" &&
-      tab?.selected.value &&
-      "bg-primary text-white font-medium",
-
-    // Link tabs
-    list?.variant == "link-tabs" &&
-      "border-b-2 border-transparent dark:border-transparent",
-    list?.variant == "link-tabs" &&
-      tab?.selected.value &&
-      "border-b-primary font-medium dark:border-b-primary",
-
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type ButtonHTMLAttributes, useAttrs, inject } from 'vue';
+  import { type ProvideTab } from './Tab/Provider.vue';
+  import { type ProvideList } from './List.vue';
+
+  interface ButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
+    as?: string | object;
+  }
+
+  const { as } = withDefaults(defineProps<ButtonProps>(), {
+    as: 'a',
+  });
+
+  const attrs = useAttrs();
+
+  const tab = inject<ProvideTab>('tab');
+  const list = inject<ProvideList>('list');
+
+  const computedClass = computed(() =>
+    twMerge([
+      'cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400',
+      tab?.selected.value && 'text-slate-800 dark:text-white',
+
+      // Default
+      list?.variant == 'tabs' && 'block border-transparent rounded-t-md dark:border-transparent',
+      list?.variant == 'tabs' &&
+        tab?.selected.value &&
+        'bg-white border-slate-200 border-b-transparent font-medium dark:bg-transparent dark:border-t-darkmode-400 dark:border-b-darkmode-600 dark:border-x-darkmode-400',
+      list?.variant == 'tabs' &&
+        !tab?.selected.value &&
+        'hover:bg-slate-100 dark:hover:bg-darkmode-400 dark:hover:border-transparent',
+
+      // Pills
+      list?.variant == 'pills' && 'rounded-md border-0',
+      list?.variant == 'pills' && tab?.selected.value && 'bg-primary text-white font-medium',
+
+      // Boxed tabs
+      list?.variant == 'boxed-tabs' && 'shadow-[0px_3px_20px_#0000000b] rounded-md',
+      list?.variant == 'boxed-tabs' && tab?.selected.value && 'bg-primary text-white font-medium',
+
+      // Link tabs
+      list?.variant == 'link-tabs' && 'border-b-2 border-transparent dark:border-transparent',
+      list?.variant == 'link-tabs' && tab?.selected.value && 'border-b-primary font-medium dark:border-b-primary',
+
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Tab/Group.vue b/web/src/components/Base/Headless/Tab/Group.vue
index db156c359..078e1c6da 100644
--- a/web/src/components/Base/Headless/Tab/Group.vue
+++ b/web/src/components/Base/Headless/Tab/Group.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { TabGroup as HeadlessTabGroup } from "@headlessui/vue";
+  import { TabGroup as HeadlessTabGroup } from '@headlessui/vue';
 
-interface GroupProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessTabGroup> {}
+  interface GroupProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessTabGroup> {}
 
-defineProps<GroupProps>();
+  defineProps<GroupProps>();
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Tab/List.vue b/web/src/components/Base/Headless/Tab/List.vue
index 3bbc41dc2..4c67501cb 100644
--- a/web/src/components/Base/Headless/Tab/List.vue
+++ b/web/src/components/Base/Headless/Tab/List.vue
@@ -1,50 +1,45 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 
-type Variant = "tabs" | "pills" | "boxed-tabs" | "link-tabs";
+  type Variant = 'tabs' | 'pills' | 'boxed-tabs' | 'link-tabs';
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { provide, useAttrs, computed } from "vue";
-import { twMerge } from "tailwind-merge";
-import { TabList as HeadlessTabList } from "@headlessui/vue";
-
-export type ProvideList = {
-  variant?: Variant;
-};
-
-interface ListProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessTabList> {
-  variant?: Variant;
-}
-
-const { variant } = withDefaults(defineProps<ListProps>(), {
-  variant: "tabs",
-});
-
-const attrs = useAttrs();
-const computedClass = computed(() =>
-  twMerge([
-    variant == "tabs" && "border-b border-slate-200 dark:border-darkmode-400",
-    "w-full flex",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
-
-provide<ProvideList>("list", {
-  variant: variant,
-});
+  import _ from 'lodash';
+  import { provide, useAttrs, computed } from 'vue';
+  import { twMerge } from 'tailwind-merge';
+  import { TabList as HeadlessTabList } from '@headlessui/vue';
+
+  export type ProvideList = {
+    variant?: Variant;
+  };
+
+  interface ListProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessTabList> {
+    variant?: Variant;
+  }
+
+  const { variant } = withDefaults(defineProps<ListProps>(), {
+    variant: 'tabs',
+  });
+
+  const attrs = useAttrs();
+  const computedClass = computed(() =>
+    twMerge([
+      variant == 'tabs' && 'border-b border-slate-200 dark:border-darkmode-400',
+      'w-full flex',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  provide<ProvideList>('list', {
+    variant: variant,
+  });
 </script>
 
 <template>
-  <HeadlessTabList
-    as="ul"
-    :class="computedClass"
-    v-bind="_.omit(attrs, 'class')"
-  >
+  <HeadlessTabList as="ul" :class="computedClass" v-bind="_.omit(attrs, 'class')">
     <slot></slot>
   </HeadlessTabList>
 </template>
diff --git a/web/src/components/Base/Headless/Tab/Panel.vue b/web/src/components/Base/Headless/Tab/Panel.vue
index 03f9583e9..b1b1ec221 100644
--- a/web/src/components/Base/Headless/Tab/Panel.vue
+++ b/web/src/components/Base/Headless/Tab/Panel.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { TabPanel as HeadlessTabPanel, TransitionRoot } from "@headlessui/vue";
+  import { TabPanel as HeadlessTabPanel, TransitionRoot } from '@headlessui/vue';
 
-interface PanelProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessTabPanel> {}
+  interface PanelProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessTabPanel> {}
 
-defineProps<PanelProps>();
+  defineProps<PanelProps>();
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Tab/Panels.vue b/web/src/components/Base/Headless/Tab/Panels.vue
index 6f450cd19..be91b7ad3 100644
--- a/web/src/components/Base/Headless/Tab/Panels.vue
+++ b/web/src/components/Base/Headless/Tab/Panels.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { TabPanels as HeadlessTabPanels } from "@headlessui/vue";
+  import { TabPanels as HeadlessTabPanels } from '@headlessui/vue';
 
-interface PanelsProps
-  extends /* @vue-ignore */ ExtractProps<typeof HeadlessTabPanels> {}
+  interface PanelsProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessTabPanels> {}
 
-defineProps<PanelsProps>();
+  defineProps<PanelsProps>();
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Tab/Tab/Provider.vue b/web/src/components/Base/Headless/Tab/Tab/Provider.vue
index 15af0e084..62b5b74ac 100644
--- a/web/src/components/Base/Headless/Tab/Tab/Provider.vue
+++ b/web/src/components/Base/Headless/Tab/Tab/Provider.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { computed, provide, type ComputedRef } from "vue";
+  import { computed, provide, type ComputedRef } from 'vue';
 
-export type ProvideTab = {
-  selected: ComputedRef<boolean>;
-};
+  export type ProvideTab = {
+    selected: ComputedRef<boolean>;
+  };
 
-interface ProviderProps {
-  selected: boolean;
-}
+  interface ProviderProps {
+    selected: boolean;
+  }
 
-const props = withDefaults(defineProps<ProviderProps>(), {
-  selected: false,
-});
+  const props = withDefaults(defineProps<ProviderProps>(), {
+    selected: false,
+  });
 
-provide<ProvideTab>("tab", {
-  selected: computed(() => props.selected),
-});
+  provide<ProvideTab>('tab', {
+    selected: computed(() => props.selected),
+  });
 </script>
 
 <template>
diff --git a/web/src/components/Base/Headless/Tab/Tab/Tab.vue b/web/src/components/Base/Headless/Tab/Tab/Tab.vue
index 4680b1e06..bec8e11ec 100644
--- a/web/src/components/Base/Headless/Tab/Tab/Tab.vue
+++ b/web/src/components/Base/Headless/Tab/Tab/Tab.vue
@@ -1,29 +1,23 @@
 <script setup lang="ts">
-import { inject } from "vue";
-import { Tab as HeadlessTab } from "@headlessui/vue";
-import Provider from "./Provider.vue";
-import { type ProvideList } from "../List.vue";
+  import { inject } from 'vue';
+  import { Tab as HeadlessTab } from '@headlessui/vue';
+  import Provider from './Provider.vue';
+  import { type ProvideList } from '../List.vue';
 
-interface TabProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessTab> {
-  fullWidth?: boolean;
-}
+  interface TabProps extends /* @vue-ignore */ ExtractProps<typeof HeadlessTab> {
+    fullWidth?: boolean;
+  }
 
-const { fullWidth } = withDefaults(defineProps<TabProps>(), {
-  fullWidth: true,
-});
+  const { fullWidth } = withDefaults(defineProps<TabProps>(), {
+    fullWidth: true,
+  });
 
-const list = inject<ProvideList>("list");
+  const list = inject<ProvideList>('list');
 </script>
 
 <template>
   <HeadlessTab as="template" v-slot="{ selected }">
-    <li
-      :class="[
-        'focus-visible:outline-none',
-        { 'flex-1': fullWidth },
-        { '-mb-px': list && list.variant == 'tabs' },
-      ]"
-    >
+    <li :class="['focus-visible:outline-none', { 'flex-1': fullWidth }, { '-mb-px': list && list.variant == 'tabs' }]">
       <Provider :selected="selected">
         <slot :selected="selected"></slot>
       </Provider>
diff --git a/web/src/components/Base/Headless/Tab/Tab/index.ts b/web/src/components/Base/Headless/Tab/Tab/index.ts
index 411609f4e..b58a044c9 100644
--- a/web/src/components/Base/Headless/Tab/Tab/index.ts
+++ b/web/src/components/Base/Headless/Tab/Tab/index.ts
@@ -1,3 +1,3 @@
-import Tab from "./Tab.vue";
+import Tab from './Tab.vue';
 
 export default Tab;
diff --git a/web/src/components/Base/Headless/Tab/index.ts b/web/src/components/Base/Headless/Tab/index.ts
index 3d0520558..f0183a146 100644
--- a/web/src/components/Base/Headless/Tab/index.ts
+++ b/web/src/components/Base/Headless/Tab/index.ts
@@ -1,9 +1,9 @@
-import Tab from "./Tab";
-import Button from "./Button.vue";
-import Group from "./Group.vue";
-import List from "./List.vue";
-import Panels from "./Panels.vue";
-import Panel from "./Panel.vue";
+import Tab from './Tab';
+import Button from './Button.vue';
+import Group from './Group.vue';
+import List from './List.vue';
+import Panels from './Panels.vue';
+import Panel from './Panel.vue';
 
 const TabComponent = Object.assign({}, Tab, {
   Button: Button,
diff --git a/web/src/components/Base/Headless/index.ts b/web/src/components/Base/Headless/index.ts
index 2cf012776..f123580a0 100644
--- a/web/src/components/Base/Headless/index.ts
+++ b/web/src/components/Base/Headless/index.ts
@@ -1,8 +1,8 @@
-import Menu from "./Menu";
-import Popover from "./Popover";
-import Tab from "./Tab";
-import Dialog from "./Dialog";
-import Disclosure from "./Disclosure";
-import Slideover from "./Slideover";
+import Menu from './Menu';
+import Popover from './Popover';
+import Tab from './Tab';
+import Dialog from './Dialog';
+import Disclosure from './Disclosure';
+import Slideover from './Slideover';
 
 export { Menu, Popover, Tab, Dialog, Disclosure, Slideover };
diff --git a/web/src/components/Base/Litepicker/Litepicker.vue b/web/src/components/Base/Litepicker/Litepicker.vue
index 453f55eb0..557e148a3 100644
--- a/web/src/components/Base/Litepicker/Litepicker.vue
+++ b/web/src/components/Base/Litepicker/Litepicker.vue
@@ -1,67 +1,67 @@
 <script lang="ts">
-type LitepickerConfig = Partial<ILPConfiguration>;
+  type LitepickerConfig = Partial<ILPConfiguration>;
 </script>
 
 <script setup lang="ts">
-import "@/assets/css/vendors/litepicker.css";
-import { type InputHTMLAttributes, onMounted, ref, inject } from "vue";
-import { setValue, init, reInit } from "./litepicker";
-import LitepickerJs from "litepicker";
-import { FormInput } from "@/components/Base/Form";
-import { type ILPConfiguration } from "litepicker/dist/types/interfaces.d";
+  import '@/assets/css/vendors/litepicker.css';
+  import { type InputHTMLAttributes, onMounted, ref, inject } from 'vue';
+  import { setValue, init, reInit } from './litepicker';
+  import LitepickerJs from 'litepicker';
+  import { FormInput } from '@/components/Base/Form';
+  import { type ILPConfiguration } from 'litepicker/dist/types/interfaces.d';
 
-export interface LitepickerElement extends HTMLInputElement {
-  litePickerInstance: LitepickerJs;
-}
+  export interface LitepickerElement extends HTMLInputElement {
+    litePickerInstance: LitepickerJs;
+  }
 
-export interface LitepickerEmit {
-  (e: "update:modelValue", value: string): void;
-}
+  export interface LitepickerEmit {
+    (e: 'update:modelValue', value: string): void;
+  }
 
-export interface LitepickerProps extends /* @vue-ignore */ InputHTMLAttributes {
-  options: {
-    format?: string | undefined;
-  } & LitepickerConfig;
-  modelValue: string;
-  refKey?: string;
-}
+  export interface LitepickerProps extends /* @vue-ignore */ InputHTMLAttributes {
+    options: {
+      format?: string | undefined;
+    } & LitepickerConfig;
+    modelValue: string;
+    refKey?: string;
+  }
 
-export type ProvideLitepicker = (el: LitepickerElement) => void;
+  export type ProvideLitepicker = (el: LitepickerElement) => void;
 
-const props = defineProps<LitepickerProps>();
-const litepickerRef = ref<LitepickerElement>();
-const tempValue = ref(props.modelValue);
-const emit = defineEmits<LitepickerEmit>();
+  const props = defineProps<LitepickerProps>();
+  const litepickerRef = ref<LitepickerElement>();
+  const tempValue = ref(props.modelValue);
+  const emit = defineEmits<LitepickerEmit>();
 
-const vLitepickerDirective = {
-  mounted(el: LitepickerElement) {
-    setValue(props, emit);
-    if (el !== null) {
-      init(el, props, emit);
-    }
-  },
-  updated(el: LitepickerElement) {
-    if (tempValue.value !== props.modelValue && el !== null) {
-      reInit(el, props, emit);
-      tempValue.value = props.modelValue;
-    }
-  },
-};
+  const vLitepickerDirective = {
+    mounted(el: LitepickerElement) {
+      setValue(props, emit);
+      if (el !== null) {
+        init(el, props, emit);
+      }
+    },
+    updated(el: LitepickerElement) {
+      if (tempValue.value !== props.modelValue && el !== null) {
+        reInit(el, props, emit);
+        tempValue.value = props.modelValue;
+      }
+    },
+  };
 
-const bindInstance = (el: LitepickerElement) => {
-  if (props.refKey) {
-    const bind = inject<ProvideLitepicker>(`bind[${props.refKey}]`);
-    if (bind) {
-      bind(el);
+  const bindInstance = (el: LitepickerElement) => {
+    if (props.refKey) {
+      const bind = inject<ProvideLitepicker>(`bind[${props.refKey}]`);
+      if (bind) {
+        bind(el);
+      }
     }
-  }
-};
+  };
 
-onMounted(() => {
-  if (litepickerRef.value) {
-    bindInstance(litepickerRef.value);
-  }
-});
+  onMounted(() => {
+    if (litepickerRef.value) {
+      bindInstance(litepickerRef.value);
+    }
+  });
 </script>
 
 <template>
@@ -69,9 +69,11 @@ onMounted(() => {
     ref="litepickerRef"
     type="text"
     :value="props.modelValue"
-    @change="(event: Event) => {
-      emit('update:modelValue', (event.target as HTMLInputElement).value);
-    }"
+    @change="
+      (event: Event) => {
+        emit('update:modelValue', (event.target as HTMLInputElement).value);
+      }
+    "
     v-litepicker-directive
   />
 </template>
diff --git a/web/src/components/Base/Litepicker/index.ts b/web/src/components/Base/Litepicker/index.ts
index eb358c96c..78b993ed8 100644
--- a/web/src/components/Base/Litepicker/index.ts
+++ b/web/src/components/Base/Litepicker/index.ts
@@ -1,3 +1,3 @@
-import Litepicker from "./Litepicker.vue";
+import Litepicker from './Litepicker.vue';
 
 export default Litepicker;
diff --git a/web/src/components/Base/Litepicker/litepicker.ts b/web/src/components/Base/Litepicker/litepicker.ts
index 897e85a34..4180defb6 100644
--- a/web/src/components/Base/Litepicker/litepicker.ts
+++ b/web/src/components/Base/Litepicker/litepicker.ts
@@ -1,13 +1,9 @@
-import dayjs from "dayjs";
-import Litepicker from "litepicker";
-import {
-  type LitepickerElement,
-  type LitepickerProps,
-  type LitepickerEmit,
-} from "./Litepicker.vue";
+import dayjs from 'dayjs';
+import Litepicker from 'litepicker';
+import { type LitepickerElement, type LitepickerProps, type LitepickerEmit } from './Litepicker.vue';
 
 const getDateFormat = (format: string | undefined) => {
-  return format !== undefined ? format : "D MMM, YYYY";
+  return format !== undefined ? format : 'D MMM, YYYY';
 };
 
 const setValue = (props: LitepickerProps, emit: LitepickerEmit) => {
@@ -16,17 +12,13 @@ const setValue = (props: LitepickerProps, emit: LitepickerEmit) => {
     let date = dayjs().format(format);
     date +=
       !props.options.singleMode && props.options.singleMode !== undefined
-        ? " - " + dayjs().add(1, "month").format(format)
-        : "";
-    emit("update:modelValue", date);
+        ? ' - ' + dayjs().add(1, 'month').format(format)
+        : '';
+    emit('update:modelValue', date);
   }
 };
 
-const init = (
-  el: LitepickerElement,
-  props: LitepickerProps,
-  emit: LitepickerEmit
-) => {
+const init = (el: LitepickerElement, props: LitepickerProps, emit: LitepickerEmit) => {
   const format = getDateFormat(props.options.format);
   el.litePickerInstance = new Litepicker({
     ...props.options,
@@ -34,24 +26,17 @@ const init = (
     format: format,
     setup: (picker) => {
       if (picker.on) {
-        picker.on("selected", (startDate, endDate) => {
+        picker.on('selected', (startDate, endDate) => {
           let date = dayjs(startDate.dateInstance).format(format);
-          date +=
-            endDate !== undefined && endDate !== null
-              ? " - " + dayjs(endDate.dateInstance).format(format)
-              : "";
-          emit("update:modelValue", date);
+          date += endDate !== undefined && endDate !== null ? ' - ' + dayjs(endDate.dateInstance).format(format) : '';
+          emit('update:modelValue', date);
         });
       }
     },
   });
 };
 
-const reInit = (
-  el: LitepickerElement,
-  props: LitepickerProps,
-  emit: LitepickerEmit
-) => {
+const reInit = (el: LitepickerElement, props: LitepickerProps, emit: LitepickerEmit) => {
   el.litePickerInstance.destroy();
   init(el, props, emit);
 };
diff --git a/web/src/components/Base/LoadingIcon/LoadingIcon.vue b/web/src/components/Base/LoadingIcon/LoadingIcon.vue
index a51c49d47..b047cbf18 100644
--- a/web/src/components/Base/LoadingIcon/LoadingIcon.vue
+++ b/web/src/components/Base/LoadingIcon/LoadingIcon.vue
@@ -1,34 +1,34 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useDarkModeStore } from "@/stores/dark-mode";
+  import { computed } from 'vue';
+  import { useDarkModeStore } from '@/stores/dark-mode';
 
-const props = withDefaults(
-  defineProps<{
-    icon:
-      | "audio"
-      | "ball-triangle"
-      | "bars"
-      | "circles"
-      | "grid"
-      | "hearts"
-      | "oval"
-      | "puff"
-      | "rings"
-      | "spinning-circles"
-      | "tail-spin"
-      | "three-dots";
-    color?: string;
-  }>(),
-  {
-    color: "#2d3748",
-  }
-);
+  const props = withDefaults(
+    defineProps<{
+      icon:
+        | 'audio'
+        | 'ball-triangle'
+        | 'bars'
+        | 'circles'
+        | 'grid'
+        | 'hearts'
+        | 'oval'
+        | 'puff'
+        | 'rings'
+        | 'spinning-circles'
+        | 'tail-spin'
+        | 'three-dots';
+      color?: string;
+    }>(),
+    {
+      color: '#2d3748',
+    },
+  );
 
-const darkMode = computed(() => useDarkModeStore().darkMode);
-const iconColor = computed(() => {
-  return !darkMode.value ? props.color : "#ffffff";
-});
-const { icon } = props;
+  const darkMode = computed(() => useDarkModeStore().darkMode);
+  const iconColor = computed(() => {
+    return !darkMode.value ? props.color : '#ffffff';
+  });
+  const { icon } = props;
 </script>
 
 <template>
@@ -512,21 +512,9 @@ const { icon } = props;
       :stroke="iconColor"
       class="w-full h-full"
     >
-      <g
-        fill="none"
-        fill-rule="evenodd"
-        transform="translate(1 1)"
-        stroke-width="3"
-      >
+      <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="3">
         <circle cx="22" cy="22" r="6" stroke-opacity="0">
-          <animate
-            attributeName="r"
-            begin="1.5s"
-            dur="3s"
-            values="6;22"
-            calcMode="linear"
-            repeatCount="indefinite"
-          />
+          <animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite" />
           <animate
             attributeName="stroke-opacity"
             begin="1.5s"
@@ -545,14 +533,7 @@ const { icon } = props;
           />
         </circle>
         <circle cx="22" cy="22" r="6" stroke-opacity="0">
-          <animate
-            attributeName="r"
-            begin="3s"
-            dur="3s"
-            values="6;22"
-            calcMode="linear"
-            repeatCount="indefinite"
-          />
+          <animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite" />
           <animate
             attributeName="stroke-opacity"
             begin="3s"
@@ -591,13 +572,7 @@ const { icon } = props;
     >
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(2 1)" :stroke="iconColor" stroke-width="1.5">
-          <circle
-            cx="42.601"
-            cy="11.462"
-            r="5"
-            fill-opacity="1"
-            :fill="iconColor"
-          >
+          <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" :fill="iconColor">
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -607,13 +582,7 @@ const { icon } = props;
               repeatCount="indefinite"
             />
           </circle>
-          <circle
-            cx="49.063"
-            cy="27.063"
-            r="5"
-            fill-opacity="0"
-            :fill="iconColor"
-          >
+          <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" :fill="iconColor">
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -623,13 +592,7 @@ const { icon } = props;
               repeatCount="indefinite"
             />
           </circle>
-          <circle
-            cx="42.601"
-            cy="42.663"
-            r="5"
-            fill-opacity="0"
-            :fill="iconColor"
-          >
+          <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" :fill="iconColor">
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -649,13 +612,7 @@ const { icon } = props;
               repeatCount="indefinite"
             />
           </circle>
-          <circle
-            cx="11.399"
-            cy="42.663"
-            r="5"
-            fill-opacity="0"
-            :fill="iconColor"
-          >
+          <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" :fill="iconColor">
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -665,13 +622,7 @@ const { icon } = props;
               repeatCount="indefinite"
             />
           </circle>
-          <circle
-            cx="4.938"
-            cy="27.063"
-            r="5"
-            fill-opacity="0"
-            :fill="iconColor"
-          >
+          <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" :fill="iconColor">
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -681,13 +632,7 @@ const { icon } = props;
               repeatCount="indefinite"
             />
           </circle>
-          <circle
-            cx="11.399"
-            cy="11.462"
-            r="5"
-            fill-opacity="0"
-            :fill="iconColor"
-          >
+          <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" :fill="iconColor">
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -726,12 +671,7 @@ const { icon } = props;
       </defs>
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(1 1)">
-          <path
-            id="Oval-2"
-            d="M36 18c0-9.94-8.06-18-18-18"
-            stroke="url(#a)"
-            stroke-width="3"
-          >
+          <path id="Oval-2" d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="3">
             <animateTransform
               attributeName="transform"
               type="rotate"
diff --git a/web/src/components/Base/LoadingIcon/index.ts b/web/src/components/Base/LoadingIcon/index.ts
index 67775ec97..56b7e007c 100644
--- a/web/src/components/Base/LoadingIcon/index.ts
+++ b/web/src/components/Base/LoadingIcon/index.ts
@@ -1,3 +1,3 @@
-import LoadingIcon from "./LoadingIcon.vue";
+import LoadingIcon from './LoadingIcon.vue';
 
 export default LoadingIcon;
diff --git a/web/src/components/Base/Lucide/Lucide.vue b/web/src/components/Base/Lucide/Lucide.vue
index ce9cce762..055b10f94 100644
--- a/web/src/components/Base/Lucide/Lucide.vue
+++ b/web/src/components/Base/Lucide/Lucide.vue
@@ -1,25 +1,20 @@
 <script setup lang="ts">
-import * as lucideIcons from "lucide-vue-next";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs, type SVGAttributes } from "vue";
+  import * as lucideIcons from 'lucide-vue-next';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs, type SVGAttributes } from 'vue';
 
-export type Icon = keyof typeof lucideIcons;
+  export type Icon = keyof typeof lucideIcons;
 
-interface LucideProps extends /* @vue-ignore */ SVGAttributes {
-  icon: Icon;
-  title?: string;
-}
+  interface LucideProps extends /* @vue-ignore */ SVGAttributes {
+    icon: Icon;
+    title?: string;
+  }
 
-const props = defineProps<LucideProps>();
+  const props = defineProps<LucideProps>();
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() =>
-  twMerge([
-    "stroke-1.5 w-5 h-5",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() => twMerge(['stroke-1.5 w-5 h-5', typeof attrs.class === 'string' && attrs.class]));
 </script>
 
 <template>
diff --git a/web/src/components/Base/Lucide/index.ts b/web/src/components/Base/Lucide/index.ts
index 5db00eded..f979d6c53 100644
--- a/web/src/components/Base/Lucide/index.ts
+++ b/web/src/components/Base/Lucide/index.ts
@@ -1,3 +1,3 @@
-import Lucide from "./Lucide.vue";
+import Lucide from './Lucide.vue';
 
 export default Lucide;
diff --git a/web/src/components/Base/Notification/Notification.vue b/web/src/components/Base/Notification/Notification.vue
index 69159e949..28e16062f 100644
--- a/web/src/components/Base/Notification/Notification.vue
+++ b/web/src/components/Base/Notification/Notification.vue
@@ -1,49 +1,49 @@
 <script setup lang="ts">
-import "@/assets/css/vendors/toastify.css";
-import { type HTMLAttributes, ref, onMounted, inject } from "vue";
-import { init, reInit } from "./notification";
-import Toastify, { type Options } from "toastify-js";
-
-export interface NotificationElement extends HTMLDivElement {
-  toastify: ReturnType<typeof Toastify>;
-  showToast: () => void;
-  hideToast: () => void;
-}
+  import '@/assets/css/vendors/toastify.css';
+  import { type HTMLAttributes, ref, onMounted, inject } from 'vue';
+  import { init, reInit } from './notification';
+  import Toastify, { type Options } from 'toastify-js';
+
+  export interface NotificationElement extends HTMLDivElement {
+    toastify: ReturnType<typeof Toastify>;
+    showToast: () => void;
+    hideToast: () => void;
+  }
 
-export interface NotificationProps extends /* @vue-ignore */ HTMLAttributes {
-  options?: Options;
-  refKey?: string;
-}
+  export interface NotificationProps extends /* @vue-ignore */ HTMLAttributes {
+    options?: Options;
+    refKey?: string;
+  }
 
-export type ProvideNotification = (el: NotificationElement) => void;
+  export type ProvideNotification = (el: NotificationElement) => void;
 
-const props = defineProps<NotificationProps>();
+  const props = defineProps<NotificationProps>();
 
-const toastifyRef = ref<NotificationElement>();
+  const toastifyRef = ref<NotificationElement>();
 
-const bindInstance = (el: NotificationElement) => {
-  if (props.refKey) {
-    const bind = inject<ProvideNotification>(`bind[${props.refKey}]`);
-    if (bind) {
-      bind(el);
+  const bindInstance = (el: NotificationElement) => {
+    if (props.refKey) {
+      const bind = inject<ProvideNotification>(`bind[${props.refKey}]`);
+      if (bind) {
+        bind(el);
+      }
     }
-  }
-};
-
-const vNotificationDirective = {
-  mounted(el: NotificationElement) {
-    init(el, props);
-  },
-  updated(el: NotificationElement) {
-    reInit(el);
-  },
-};
-
-onMounted(() => {
-  if (toastifyRef.value) {
-    bindInstance(toastifyRef.value);
-  }
-});
+  };
+
+  const vNotificationDirective = {
+    mounted(el: NotificationElement) {
+      init(el, props);
+    },
+    updated(el: NotificationElement) {
+      reInit(el);
+    },
+  };
+
+  onMounted(() => {
+    if (toastifyRef.value) {
+      bindInstance(toastifyRef.value);
+    }
+  });
 </script>
 
 <template>
diff --git a/web/src/components/Base/Notification/index.ts b/web/src/components/Base/Notification/index.ts
index 43dd68c65..fd2e97abd 100644
--- a/web/src/components/Base/Notification/index.ts
+++ b/web/src/components/Base/Notification/index.ts
@@ -1,8 +1,5 @@
-import Notification from "./Notification.vue";
+import Notification from './Notification.vue';
 
-export type {
-  NotificationElement,
-  ProvideNotification,
-} from "./Notification.vue";
+export type { NotificationElement, ProvideNotification } from './Notification.vue';
 
 export default Notification;
diff --git a/web/src/components/Base/Notification/notification.ts b/web/src/components/Base/Notification/notification.ts
index efb640abe..7fafdc3ae 100644
--- a/web/src/components/Base/Notification/notification.ts
+++ b/web/src/components/Base/Notification/notification.ts
@@ -1,34 +1,29 @@
-import Toastify from "toastify-js";
-import {
-  type NotificationElement,
-  type NotificationProps,
-} from "./Notification.vue";
+import Toastify from 'toastify-js';
+import { type NotificationElement, type NotificationProps } from './Notification.vue';
 
-const toastifyClass = "_" + Math.random().toString(36).substr(2, 9);
+const toastifyClass = '_' + Math.random().toString(36).substr(2, 9);
 
 const init = (el: NotificationElement, props: NotificationProps) => {
   el.showToast = () => {
     const clonedEl = el.cloneNode(true) as NotificationElement;
-    clonedEl.classList.remove("hidden");
+    clonedEl.classList.remove('hidden');
     clonedEl.classList.add(toastifyClass);
     clonedEl.toastify = Toastify({
       duration: -1,
       newWindow: true,
       close: true,
-      gravity: "top",
-      position: "right",
+      gravity: 'top',
+      position: 'right',
       stopOnFocus: true,
       ...props.options,
       node: clonedEl,
     });
     clonedEl.toastify.showToast();
-    clonedEl
-      .querySelectorAll("[data-dismiss='notification']")
-      .forEach(function (el) {
-        el.addEventListener("click", function () {
-          clonedEl.toastify.hideToast();
-        });
+    clonedEl.querySelectorAll("[data-dismiss='notification']").forEach(function (el) {
+      el.addEventListener('click', function () {
+        clonedEl.toastify.hideToast();
       });
+    });
 
     el.hideToast = () => {
       document.querySelectorAll(`.${toastifyClass}`).forEach(function (el) {
diff --git a/web/src/components/Base/Pagination/Link.vue b/web/src/components/Base/Pagination/Link.vue
index 07ac1bd83..d31e0e586 100644
--- a/web/src/components/Base/Pagination/Link.vue
+++ b/web/src/components/Base/Pagination/Link.vue
@@ -1,37 +1,37 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import { toRef } from "vue";
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type LiHTMLAttributes, useAttrs } from "vue";
-import Button from "../Button";
+  import { toRef } from 'vue';
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type LiHTMLAttributes, useAttrs } from 'vue';
+  import Button from '../Button';
 
-interface LinkProps extends /* @vue-ignore */ LiHTMLAttributes {
-  as?: string | object;
-  active?: boolean;
-}
+  interface LinkProps extends /* @vue-ignore */ LiHTMLAttributes {
+    as?: string | object;
+    active?: boolean;
+  }
 
-const props = withDefaults(defineProps<LinkProps>(), {
-  as: "a",
-  active: false,
-});
+  const props = withDefaults(defineProps<LinkProps>(), {
+    as: 'a',
+    active: false,
+  });
 
-const active = toRef(props, 'active');
+  const active = toRef(props, 'active');
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() => 
-  twMerge([
-    "min-w-0 sm:min-w-[40px] shadow-none font-normal flex items-center justify-center border-transparent text-slate-800 sm:mr-2 dark:text-slate-300 px-1 sm:px-3",
-    active.value && "!box font-medium dark:bg-darkmode-400",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'min-w-0 sm:min-w-[40px] shadow-none font-normal flex items-center justify-center border-transparent text-slate-800 sm:mr-2 dark:text-slate-300 px-1 sm:px-3',
+      active.value && '!box font-medium dark:bg-darkmode-400',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Pagination/index.ts b/web/src/components/Base/Pagination/index.ts
index 099c658fa..d9a6ba07f 100644
--- a/web/src/components/Base/Pagination/index.ts
+++ b/web/src/components/Base/Pagination/index.ts
@@ -1,5 +1,5 @@
-import Pagination from "./Pagination.vue";
-import Link from "./Link.vue";
+import Pagination from './Pagination.vue';
+import Link from './Link.vue';
 
 const PaginationComponent = Object.assign({}, Pagination, {
   Link: Link,
diff --git a/web/src/components/Base/Progress/Bar.vue b/web/src/components/Base/Progress/Bar.vue
index ab1c03f64..f3a96aa3d 100644
--- a/web/src/components/Base/Progress/Bar.vue
+++ b/web/src/components/Base/Progress/Bar.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs } from 'vue';
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() =>
-  twMerge([
-    "bg-primary h-full rounded text-xs text-white flex justify-center items-center",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'bg-primary h-full rounded text-xs text-white flex justify-center items-center',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Progress/Progress.vue b/web/src/components/Base/Progress/Progress.vue
index a3f62ed5b..8711fdf1d 100644
--- a/web/src/components/Base/Progress/Progress.vue
+++ b/web/src/components/Base/Progress/Progress.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs } from "vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs } from 'vue';
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() =>
-  twMerge([
-    "w-full h-2 bg-slate-200 rounded dark:bg-black/20",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge(['w-full h-2 bg-slate-200 rounded dark:bg-black/20', typeof attrs.class === 'string' && attrs.class]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Progress/index.ts b/web/src/components/Base/Progress/index.ts
index 476bcbf86..f34eebf96 100644
--- a/web/src/components/Base/Progress/index.ts
+++ b/web/src/components/Base/Progress/index.ts
@@ -1,5 +1,5 @@
-import Progress from "./Progress.vue";
-import Bar from "./Bar.vue";
+import Progress from './Progress.vue';
+import Bar from './Bar.vue';
 
 const ProgressComponent = Object.assign({}, Progress, {
   Bar: Bar,
diff --git a/web/src/components/Base/ScrollToTop/ScrollToTop.vue b/web/src/components/Base/ScrollToTop/ScrollToTop.vue
index 4cf6d1cfd..8b00191c5 100644
--- a/web/src/components/Base/ScrollToTop/ScrollToTop.vue
+++ b/web/src/components/Base/ScrollToTop/ScrollToTop.vue
@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import Lucide from "@/components/Base/Lucide";
+  import Lucide from '@/components/Base/Lucide';
 
-interface ScrollToTopProps {
-  visible: boolean,
-}
+  interface ScrollToTopProps {
+    visible: boolean;
+  }
 
-const props = withDefaults(defineProps<ScrollToTopProps>(), {
-  visible: true,
-});
+  const props = withDefaults(defineProps<ScrollToTopProps>(), {
+    visible: true,
+  });
 
-const goTop = () => {
-  window.scrollTo({ top: 0, behavior: 'smooth' });
-}
+  const goTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 </script>
 
 <template>
-  <div v-if="props.visible"
+  <div
+    v-if="props.visible"
     class="fixed bottom-0 right-0 z-50 flex items-center justify-center w-auto h-auto mb-5 mr-20 p-2 border rounded-full shadow-md cursor-pointer box"
-    @click="goTop">
+    @click="goTop"
+  >
     <Lucide icon="ArrowUp" class="w-5 h-5 hover:animate-bounce" />
   </div>
 </template>
diff --git a/web/src/components/Base/ScrollToTop/index.ts b/web/src/components/Base/ScrollToTop/index.ts
index dd769e47c..59d8c4981 100644
--- a/web/src/components/Base/ScrollToTop/index.ts
+++ b/web/src/components/Base/ScrollToTop/index.ts
@@ -1,3 +1,3 @@
-import ScrollToTop from "./ScrollToTop.vue";
+import ScrollToTop from './ScrollToTop.vue';
 
 export default ScrollToTop;
diff --git a/web/src/components/Base/Table/Table.vue b/web/src/components/Base/Table/Table.vue
index de2e8ee07..41bd7fb0b 100644
--- a/web/src/components/Base/Table/Table.vue
+++ b/web/src/components/Base/Table/Table.vue
@@ -1,58 +1,55 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type TableHTMLAttributes, useAttrs, provide } from "vue";
-
-export type ProvideTable = {
-  dark: boolean;
-  bordered: boolean;
-  hover: boolean;
-  striped: boolean;
-  sm: boolean;
-};
-
-interface TableProps extends /* @vue-ignore */ TableHTMLAttributes {
-  dark?: boolean;
-  bordered?: boolean;
-  hover?: boolean;
-  striped?: boolean;
-  sm?: boolean;
-}
-
-const { dark, bordered, hover, striped, sm } = withDefaults(
-  defineProps<TableProps>(),
-  {
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type TableHTMLAttributes, useAttrs, provide } from 'vue';
+
+  export type ProvideTable = {
+    dark: boolean;
+    bordered: boolean;
+    hover: boolean;
+    striped: boolean;
+    sm: boolean;
+  };
+
+  interface TableProps extends /* @vue-ignore */ TableHTMLAttributes {
+    dark?: boolean;
+    bordered?: boolean;
+    hover?: boolean;
+    striped?: boolean;
+    sm?: boolean;
+  }
+
+  const { dark, bordered, hover, striped, sm } = withDefaults(defineProps<TableProps>(), {
     dark: false,
     bordered: false,
     hover: false,
     striped: false,
     sm: false,
-  }
-);
-
-const attrs = useAttrs();
-
-const computedClass = computed(() =>
-  twMerge([
-    "w-full text-left",
-    dark && "bg-dark text-white dark:bg-black/30",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
-
-provide<ProvideTable>("table", {
-  dark: dark,
-  bordered: bordered,
-  hover: hover,
-  striped: striped,
-  sm: sm,
-});
+  });
+
+  const attrs = useAttrs();
+
+  const computedClass = computed(() =>
+    twMerge([
+      'w-full text-left',
+      dark && 'bg-dark text-white dark:bg-black/30',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  provide<ProvideTable>('table', {
+    dark: dark,
+    bordered: bordered,
+    hover: hover,
+    striped: striped,
+    sm: sm,
+  });
 </script>
 
 <template>
diff --git a/web/src/components/Base/Table/Td.vue b/web/src/components/Base/Table/Td.vue
index 24f1a5338..4ec608e0f 100644
--- a/web/src/components/Base/Table/Td.vue
+++ b/web/src/components/Base/Table/Td.vue
@@ -1,34 +1,34 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs, inject } from "vue";
-import { type ProvideTable } from "./Table.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs, inject } from 'vue';
+  import { type ProvideTable } from './Table.vue';
 
-const table = inject<ProvideTable>("table", {
-  dark: false,
-  bordered: false,
-  hover: false,
-  striped: false,
-  sm: false,
-});
+  const table = inject<ProvideTable>('table', {
+    dark: false,
+    bordered: false,
+    hover: false,
+    striped: false,
+    sm: false,
+  });
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() =>
-  twMerge([
-    "px-5 py-3 border-b dark:border-darkmode-300",
-    table?.dark && "border-slate-600 dark:border-darkmode-300",
-    table?.bordered && "border-l border-r border-t",
-    table?.sm && "px-4 py-2",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'px-5 py-3 border-b dark:border-darkmode-300',
+      table?.dark && 'border-slate-600 dark:border-darkmode-300',
+      table?.bordered && 'border-l border-r border-t',
+      table?.sm && 'px-4 py-2',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Table/Th.vue b/web/src/components/Base/Table/Th.vue
index 3ff428316..d657210fd 100644
--- a/web/src/components/Base/Table/Th.vue
+++ b/web/src/components/Base/Table/Th.vue
@@ -1,40 +1,40 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs, inject } from "vue";
-import { type ProvideTable } from "./Table.vue";
-import { type ProvideThead } from "./Thead.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs, inject } from 'vue';
+  import { type ProvideTable } from './Table.vue';
+  import { type ProvideThead } from './Thead.vue';
 
-const table = inject<ProvideTable>("table", {
-  dark: false,
-  bordered: false,
-  hover: false,
-  striped: false,
-  sm: false,
-});
-const thead = inject<ProvideThead>("thead", {
-  variant: "default",
-});
+  const table = inject<ProvideTable>('table', {
+    dark: false,
+    bordered: false,
+    hover: false,
+    striped: false,
+    sm: false,
+  });
+  const thead = inject<ProvideThead>('thead', {
+    variant: 'default',
+  });
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() =>
-  twMerge([
-    "font-medium px-5 py-3 border-b-2 dark:border-darkmode-300",
-    thead?.variant === "light" && "border-b-0 text-slate-700",
-    thead?.variant === "dark" && "border-b-0",
-    table?.dark && "border-slate-600 dark:border-darkmode-300",
-    table?.bordered && "border-l border-r border-t",
-    table?.sm && "px-4 py-2",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      'font-medium px-5 py-3 border-b-2 dark:border-darkmode-300',
+      thead?.variant === 'light' && 'border-b-0 text-slate-700',
+      thead?.variant === 'dark' && 'border-b-0',
+      table?.dark && 'border-slate-600 dark:border-darkmode-300',
+      table?.bordered && 'border-l border-r border-t',
+      table?.sm && 'px-4 py-2',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Table/Thead.vue b/web/src/components/Base/Table/Thead.vue
index 6ad55d830..8e31a890a 100644
--- a/web/src/components/Base/Table/Thead.vue
+++ b/web/src/components/Base/Table/Thead.vue
@@ -1,39 +1,39 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, type HTMLAttributes, useAttrs, provide } from "vue";
-
-export type ProvideThead = {
-  variant?: "default" | "light" | "dark";
-};
-
-interface TheadProps extends /* @vue-ignore */ HTMLAttributes {
-  variant?: "default" | "light" | "dark";
-}
-
-const props = withDefaults(defineProps<TheadProps>(), {
-  variant: "default",
-});
-
-const attrs = useAttrs();
-
-const computedClass = computed(() =>
-  twMerge([
-    props.variant === "light" && "bg-slate-200/60 dark:bg-slate-200",
-    props.variant === "dark" && "bg-dark text-white dark:bg-black/30",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
-
-provide<ProvideThead>("thead", {
-  variant: props.variant,
-});
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, type HTMLAttributes, useAttrs, provide } from 'vue';
+
+  export type ProvideThead = {
+    variant?: 'default' | 'light' | 'dark';
+  };
+
+  interface TheadProps extends /* @vue-ignore */ HTMLAttributes {
+    variant?: 'default' | 'light' | 'dark';
+  }
+
+  const props = withDefaults(defineProps<TheadProps>(), {
+    variant: 'default',
+  });
+
+  const attrs = useAttrs();
+
+  const computedClass = computed(() =>
+    twMerge([
+      props.variant === 'light' && 'bg-slate-200/60 dark:bg-slate-200',
+      props.variant === 'dark' && 'bg-dark text-white dark:bg-black/30',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
+
+  provide<ProvideThead>('thead', {
+    variant: props.variant,
+  });
 </script>
 
 <template>
diff --git a/web/src/components/Base/Table/Tr.vue b/web/src/components/Base/Table/Tr.vue
index 8dad99bf9..2b8ed9203 100644
--- a/web/src/components/Base/Table/Tr.vue
+++ b/web/src/components/Base/Table/Tr.vue
@@ -1,34 +1,33 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
+  export default {
+    inheritAttrs: false,
+  };
 </script>
 
 <script setup lang="ts">
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-import { computed, useAttrs, inject } from "vue";
-import { type ProvideTable } from "./Table.vue";
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+  import { computed, useAttrs, inject } from 'vue';
+  import { type ProvideTable } from './Table.vue';
 
-const table = inject<ProvideTable>("table", {
-  dark: false,
-  bordered: false,
-  hover: false,
-  striped: false,
-  sm: false,
-});
+  const table = inject<ProvideTable>('table', {
+    dark: false,
+    bordered: false,
+    hover: false,
+    striped: false,
+    sm: false,
+  });
 
-const attrs = useAttrs();
+  const attrs = useAttrs();
 
-const computedClass = computed(() =>
-  twMerge([
-    table?.hover &&
-      "[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50",
-    table?.striped &&
-      "[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50",
-    typeof attrs.class === "string" && attrs.class,
-  ])
-);
+  const computedClass = computed(() =>
+    twMerge([
+      table?.hover && '[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50',
+      table?.striped &&
+        '[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50',
+      typeof attrs.class === 'string' && attrs.class,
+    ]),
+  );
 </script>
 
 <template>
diff --git a/web/src/components/Base/Table/index.ts b/web/src/components/Base/Table/index.ts
index 60f1f7e63..b875ce110 100644
--- a/web/src/components/Base/Table/index.ts
+++ b/web/src/components/Base/Table/index.ts
@@ -1,9 +1,9 @@
-import Table from "./Table.vue";
-import Thead from "./Thead.vue";
-import Tbody from "./Tbody.vue";
-import Tr from "./Tr.vue";
-import Th from "./Th.vue";
-import Td from "./Td.vue";
+import Table from './Table.vue';
+import Thead from './Thead.vue';
+import Tbody from './Tbody.vue';
+import Tr from './Tr.vue';
+import Th from './Th.vue';
+import Td from './Td.vue';
 
 const TableComponent = Object.assign({}, Table, {
   Thead: Thead,
diff --git a/web/src/components/Base/Tippy/Tippy.vue b/web/src/components/Base/Tippy/Tippy.vue
index af065678d..fa9f0557b 100644
--- a/web/src/components/Base/Tippy/Tippy.vue
+++ b/web/src/components/Base/Tippy/Tippy.vue
@@ -1,85 +1,78 @@
 <script setup lang="ts">
-import "@/assets/css/vendors/tippy.css";
-import tippy, {
-  type PopperElement,
-  type Props,
-  roundArrow,
-  animateFill as animateFillPlugin,
-} from "tippy.js";
-import { ref, onMounted, inject, watch } from "vue";
+  import '@/assets/css/vendors/tippy.css';
+  import tippy, { type PopperElement, type Props, roundArrow, animateFill as animateFillPlugin } from 'tippy.js';
+  import { ref, onMounted, inject, watch } from 'vue';
 
-export type ProvideTippy = (el: PopperElement) => void;
+  export type ProvideTippy = (el: PopperElement) => void;
 
-interface TippyProps {
-  refKey?: string;
-  content: string;
-  disable?: boolean;
-  as?: string | object;
-  options?: Partial<Props>;
-}
+  interface TippyProps {
+    refKey?: string;
+    content: string;
+    disable?: boolean;
+    as?: string | object;
+    options?: Partial<Props>;
+  }
 
-const props = withDefaults(defineProps<TippyProps>(), {
-  as: "span",
-  disable: false,
-});
+  const props = withDefaults(defineProps<TippyProps>(), {
+    as: 'span',
+    disable: false,
+  });
 
-const tippyRef = ref<PopperElement>();
+  const tippyRef = ref<PopperElement>();
 
-const init = (el: PopperElement, props: TippyProps) => {
-  tippy(el, {
-    plugins: [animateFillPlugin],
-    content: props.content,
-    arrow: roundArrow,
-    popperOptions: {
-      modifiers: [
-        {
-          name: "preventOverflow",
-          options: {
-            rootBoundary: "viewport",
+  const init = (el: PopperElement, props: TippyProps) => {
+    tippy(el, {
+      plugins: [animateFillPlugin],
+      content: props.content,
+      arrow: roundArrow,
+      popperOptions: {
+        modifiers: [
+          {
+            name: 'preventOverflow',
+            options: {
+              rootBoundary: 'viewport',
+            },
           },
-        },
-      ],
-    },
-    animateFill: false,
-    animation: "shift-away",
-    ...props.options,
-  });
-};
+        ],
+      },
+      animateFill: false,
+      animation: 'shift-away',
+      ...props.options,
+    });
+  };
 
-const bindInstance = (el: PopperElement) => {
-  if (props.refKey) {
-    const bind = inject<ProvideTippy>(`bind[${props.refKey}]`, () => {});
-    if (bind) {
-      bind(el);
+  const bindInstance = (el: PopperElement) => {
+    if (props.refKey) {
+      const bind = inject<ProvideTippy>(`bind[${props.refKey}]`, () => {});
+      if (bind) {
+        bind(el);
+      }
     }
-  }
-};
-
-const vTippyDirective = {
-  mounted(el: PopperElement) {
-    tippyRef.value = el;
-  },
-};
+  };
 
-const isDisabled = () => {
-  if (tippyRef.value && tippyRef.value._tippy !== undefined) {
-    props.disable
-      ? tippyRef.value._tippy.disable()
-      : tippyRef.value._tippy.enable();
-  }
-};
+  const vTippyDirective = {
+    mounted(el: PopperElement) {
+      tippyRef.value = el;
+    },
+  };
 
-watch(props, () => {
-  isDisabled();
-});
+  const isDisabled = () => {
+    if (tippyRef.value && tippyRef.value._tippy !== undefined) {
+      props.disable ? tippyRef.value._tippy.disable() : tippyRef.value._tippy.enable();
+    }
+  };
 
-onMounted(() => {
-  if (tippyRef.value) {
-    init(tippyRef.value, props);
-    bindInstance(tippyRef.value);
+  watch(props, () => {
     isDisabled();
-  }
-});
+  });
+
+  onMounted(() => {
+    if (tippyRef.value) {
+      init(tippyRef.value, props);
+      bindInstance(tippyRef.value);
+      isDisabled();
+    }
+  });
 </script>
 
 <template>
diff --git a/web/src/components/Base/Tippy/index.ts b/web/src/components/Base/Tippy/index.ts
index e31419186..30dc27d30 100644
--- a/web/src/components/Base/Tippy/index.ts
+++ b/web/src/components/Base/Tippy/index.ts
@@ -1,5 +1,5 @@
-import Tippy from "./Tippy.vue";
+import Tippy from './Tippy.vue';
 
-export type { ProvideTippy } from "./Tippy.vue";
+export type { ProvideTippy } from './Tippy.vue';
 
 export default Tippy;
diff --git a/web/src/components/Base/TippyContent/TippyContent.vue b/web/src/components/Base/TippyContent/TippyContent.vue
index 22b7bc0cf..f1f12fbad 100644
--- a/web/src/components/Base/TippyContent/TippyContent.vue
+++ b/web/src/components/Base/TippyContent/TippyContent.vue
@@ -1,64 +1,59 @@
 <script setup lang="ts">
-import "@/assets/css/vendors/tippy.css";
-import tippy, {
-  type PopperElement,
-  type Props,
-  roundArrow,
-  animateFill as animateFillPlugin,
-} from "tippy.js";
-import { ref, onMounted, inject } from "vue";
+  import '@/assets/css/vendors/tippy.css';
+  import tippy, { type PopperElement, type Props, roundArrow, animateFill as animateFillPlugin } from 'tippy.js';
+  import { ref, onMounted, inject } from 'vue';
 
-export type ProvideTippy = (el: PopperElement) => void;
+  export type ProvideTippy = (el: PopperElement) => void;
 
-interface TippyContentProps {
-  to: string;
-  refKey?: string;
-  options?: Partial<Props>;
-}
-
-const props = defineProps<TippyContentProps>();
-
-const tippyRef = ref<PopperElement>();
+  interface TippyContentProps {
+    to: string;
+    refKey?: string;
+    options?: Partial<Props>;
+  }
 
-const init = (el: PopperElement, props: TippyContentProps) => {
-  tippy(`[data-tooltip="${props.to}"]`, {
-    plugins: [animateFillPlugin],
-    content: el,
-    allowHTML: true,
-    arrow: roundArrow,
-    popperOptions: {
-      modifiers: [
-        {
-          name: "preventOverflow",
-          options: {
-            rootBoundary: "viewport",
+  const props = defineProps<TippyContentProps>();
+
+  const tippyRef = ref<PopperElement>();
+
+  const init = (el: PopperElement, props: TippyContentProps) => {
+    tippy(`[data-tooltip="${props.to}"]`, {
+      plugins: [animateFillPlugin],
+      content: el,
+      allowHTML: true,
+      arrow: roundArrow,
+      popperOptions: {
+        modifiers: [
+          {
+            name: 'preventOverflow',
+            options: {
+              rootBoundary: 'viewport',
+            },
           },
-        },
-      ],
-    },
-    animateFill: false,
-    animation: "shift-away",
-    theme: "light",
-    trigger: "click",
-    ...props.options,
-  });
-};
-
-const bindInstance = (el: PopperElement) => {
-  if (props.refKey) {
-    const bind = inject<ProvideTippy>(`bind[${props.refKey}]`);
-    if (bind) {
-      bind(el);
+        ],
+      },
+      animateFill: false,
+      animation: 'shift-away',
+      theme: 'light',
+      trigger: 'click',
+      ...props.options,
+    });
+  };
+
+  const bindInstance = (el: PopperElement) => {
+    if (props.refKey) {
+      const bind = inject<ProvideTippy>(`bind[${props.refKey}]`);
+      if (bind) {
+        bind(el);
+      }
     }
-  }
-};
+  };
 
-onMounted(() => {
-  if (tippyRef.value) {
-    init(tippyRef.value, props);
-    bindInstance(tippyRef.value);
-  }
-});
+  onMounted(() => {
+    if (tippyRef.value) {
+      init(tippyRef.value, props);
+      bindInstance(tippyRef.value);
+    }
+  });
 </script>
 
 <template>
diff --git a/web/src/components/Base/TippyContent/index.ts b/web/src/components/Base/TippyContent/index.ts
index 5be2639e6..c34e87468 100644
--- a/web/src/components/Base/TippyContent/index.ts
+++ b/web/src/components/Base/TippyContent/index.ts
@@ -1,3 +1,3 @@
-import TippyContent from "./TippyContent.vue";
+import TippyContent from './TippyContent.vue';
 
 export default TippyContent;
diff --git a/web/src/components/Base/TomSelect/TomSelect.vue b/web/src/components/Base/TomSelect/TomSelect.vue
index 31e1b60fb..a721b9537 100644
--- a/web/src/components/Base/TomSelect/TomSelect.vue
+++ b/web/src/components/Base/TomSelect/TomSelect.vue
@@ -1,122 +1,111 @@
 <script setup lang="ts">
-import "@/assets/css/vendors/tom-select.css";
-import _ from "lodash";
-import { setValue, init, updateValue } from "./tom-select";
-import {
-  type TomSettings,
-  type RecursivePartial,
-} from "tom-select/src/types/index";
-import TomSelectPlugin from "tom-select";
-import {
-  computed,
-  type SelectHTMLAttributes,
-  onMounted,
-  inject,
-  ref,
-} from "vue";
-
-export interface TomSelectElement extends HTMLSelectElement {
-  TomSelect: TomSelectPlugin;
-}
-
-export interface TomSelectProps extends /* @vue-ignore */ SelectHTMLAttributes {
-  modelValue: string | string[];
-  options?: RecursivePartial<TomSettings>;
-  refKey?: string;
-}
-
-export interface TomSelectEmit {
-  (e: "update:modelValue", value: string | string[]): void;
-  (e: "optionAdd", value: string | number): void;
-}
-
-export type ProvideTomSelect = (el: TomSelectElement) => void;
-
-const props = withDefaults(defineProps<TomSelectProps>(), {});
-
-const emit = defineEmits<TomSelectEmit>();
-
-const tomSelectRef = ref<TomSelectElement>();
-
-// Compute all default options
-const computedOptions = computed(() => {
-  let options: TomSelectProps["options"] = {
-    ...props.options,
-    plugins: {
-      dropdown_input: {},
-      ...props.options?.plugins,
-    },
-  };
+  import '@/assets/css/vendors/tom-select.css';
+  import _ from 'lodash';
+  import { setValue, init, updateValue } from './tom-select';
+  import { type TomSettings, type RecursivePartial } from 'tom-select/src/types/index';
+  import TomSelectPlugin from 'tom-select';
+  import { computed, type SelectHTMLAttributes, onMounted, inject, ref } from 'vue';
+
+  export interface TomSelectElement extends HTMLSelectElement {
+    TomSelect: TomSelectPlugin;
+  }
 
-  if (Array.isArray(props.modelValue)) {
-    options = {
-      persist: false,
-      create: true,
-      onDelete: function (values: string[]) {
-        return confirm(
-          values.length > 1
-            ? "Are you sure you want to remove these " +
-                values.length +
-                " items?"
-            : 'Are you sure you want to remove "' + values[0] + '"?'
-        );
-      },
-      ...options,
+  export interface TomSelectProps extends /* @vue-ignore */ SelectHTMLAttributes {
+    modelValue: string | string[];
+    options?: RecursivePartial<TomSettings>;
+    refKey?: string;
+  }
+
+  export interface TomSelectEmit {
+    (e: 'update:modelValue', value: string | string[]): void;
+    (e: 'optionAdd', value: string | number): void;
+  }
+
+  export type ProvideTomSelect = (el: TomSelectElement) => void;
+
+  const props = withDefaults(defineProps<TomSelectProps>(), {});
+
+  const emit = defineEmits<TomSelectEmit>();
+
+  const tomSelectRef = ref<TomSelectElement>();
+
+  // Compute all default options
+  const computedOptions = computed(() => {
+    let options: TomSelectProps['options'] = {
+      ...props.options,
       plugins: {
-        remove_button: {
-          title: "Remove this item",
-        },
-        ...options.plugins,
+        dropdown_input: {},
+        ...props.options?.plugins,
       },
     };
-  }
 
-  return options;
-});
-
-const vSelectDirective = {
-  mounted(el: TomSelectElement) {
-    // Unique attribute
-    el.setAttribute("data-id", "_" + Math.random().toString(36).substr(2, 9));
-
-    // Clone the select element to prevent tom select remove the original element
-    const clonedEl = el.cloneNode(true) as TomSelectElement;
-
-    // Save initial classnames
-    const classNames = el?.getAttribute("class");
-    classNames && clonedEl.setAttribute("data-initial-class", classNames);
-
-    // Hide original element
-    el?.parentNode && el?.parentNode.appendChild(clonedEl);
-    el.setAttribute("hidden", "true");
-
-    // Initialize tom select
-    setValue(clonedEl, props);
-    init(el, clonedEl, props, computedOptions.value, emit);
-  },
-  updated(el: TomSelectElement) {
-    const clonedEl = document.querySelectorAll(
-      `[data-id='${el.getAttribute("data-id")}'][data-initial-class]`
-    )[0] as TomSelectElement;
-    const value = props.modelValue;
-    updateValue(el, clonedEl, value, props, computedOptions.value, emit);
-  },
-};
-
-const bindInstance = (el: TomSelectElement) => {
-  if (props.refKey) {
-    const bind = inject<ProvideTomSelect>(`bind[${props.refKey}]`);
-    if (bind) {
-      bind(el);
+    if (Array.isArray(props.modelValue)) {
+      options = {
+        persist: false,
+        create: true,
+        onDelete: function (values: string[]) {
+          return confirm(
+            values.length > 1
+              ? 'Are you sure you want to remove these ' + values.length + ' items?'
+              : 'Are you sure you want to remove "' + values[0] + '"?',
+          );
+        },
+        ...options,
+        plugins: {
+          remove_button: {
+            title: 'Remove this item',
+          },
+          ...options.plugins,
+        },
+      };
+    }
+
+    return options;
+  });
+
+  const vSelectDirective = {
+    mounted(el: TomSelectElement) {
+      // Unique attribute
+      el.setAttribute('data-id', '_' + Math.random().toString(36).substr(2, 9));
+
+      // Clone the select element to prevent tom select remove the original element
+      const clonedEl = el.cloneNode(true) as TomSelectElement;
+
+      // Save initial classnames
+      const classNames = el?.getAttribute('class');
+      classNames && clonedEl.setAttribute('data-initial-class', classNames);
+
+      // Hide original element
+      el?.parentNode && el?.parentNode.appendChild(clonedEl);
+      el.setAttribute('hidden', 'true');
+
+      // Initialize tom select
+      setValue(clonedEl, props);
+      init(el, clonedEl, props, computedOptions.value, emit);
+    },
+    updated(el: TomSelectElement) {
+      const clonedEl = document.querySelectorAll(
+        `[data-id='${el.getAttribute('data-id')}'][data-initial-class]`,
+      )[0] as TomSelectElement;
+      const value = props.modelValue;
+      updateValue(el, clonedEl, value, props, computedOptions.value, emit);
+    },
+  };
+
+  const bindInstance = (el: TomSelectElement) => {
+    if (props.refKey) {
+      const bind = inject<ProvideTomSelect>(`bind[${props.refKey}]`);
+      if (bind) {
+        bind(el);
+      }
     }
-  }
-};
+  };
 
-onMounted(() => {
-  if (tomSelectRef.value) {
-    bindInstance(tomSelectRef.value);
-  }
-});
+  onMounted(() => {
+    if (tomSelectRef.value) {
+      bindInstance(tomSelectRef.value);
+    }
+  });
 </script>
 
 <template>
diff --git a/web/src/components/Base/TomSelect/index.ts b/web/src/components/Base/TomSelect/index.ts
index fae7fc570..94c81fea5 100644
--- a/web/src/components/Base/TomSelect/index.ts
+++ b/web/src/components/Base/TomSelect/index.ts
@@ -1,3 +1,3 @@
-import TomSelect from "./TomSelect.vue";
+import TomSelect from './TomSelect.vue';
 
 export default TomSelect;
diff --git a/web/src/components/Base/TomSelect/tom-select.ts b/web/src/components/Base/TomSelect/tom-select.ts
index ef008a2e8..cb779a135 100644
--- a/web/src/components/Base/TomSelect/tom-select.ts
+++ b/web/src/components/Base/TomSelect/tom-select.ts
@@ -1,28 +1,17 @@
-import {
-  type TomSelectProps,
-  type TomSelectElement,
-  type TomSelectEmit,
-} from "./TomSelect.vue";
-import {
-  type TomSettings,
-  type RecursivePartial,
-} from "tom-select/src/types/index";
-import TomSelect from "tom-select";
-import _ from "lodash";
+import { type TomSelectProps, type TomSelectElement, type TomSelectEmit } from './TomSelect.vue';
+import { type TomSettings, type RecursivePartial } from 'tom-select/src/types/index';
+import TomSelect from 'tom-select';
+import _ from 'lodash';
 
 const setValue = (el: TomSelectElement, props: TomSelectProps) => {
   if (props.modelValue.length) {
     if (Array.isArray(props.modelValue)) {
       for (const value of props.modelValue) {
         const selectedOption = Array.from(el).find(
-          (option) =>
-            option instanceof HTMLOptionElement && option.value == value
+          (option) => option instanceof HTMLOptionElement && option.value == value,
         );
 
-        if (
-          selectedOption !== undefined &&
-          selectedOption instanceof HTMLOptionElement
-        ) {
+        if (selectedOption !== undefined && selectedOption instanceof HTMLOptionElement) {
           selectedOption.selected = true;
         }
       }
@@ -37,20 +26,20 @@ const init = (
   clonedEl: TomSelectElement,
   props: TomSelectProps,
   computedOptions: RecursivePartial<TomSettings>,
-  emit: TomSelectEmit
+  emit: TomSelectEmit,
 ) => {
   // On option add
   if (Array.isArray(props.modelValue)) {
     computedOptions = {
       onOptionAdd: function (value: string | number) {
         // Add new option
-        const newOption = document.createElement("option");
+        const newOption = document.createElement('option');
         newOption.value = value.toString();
         newOption.text = value.toString();
         originalEl.add(newOption);
 
         // Emit option add
-        emit("optionAdd", value);
+        emit('optionAdd', value);
       },
       ...computedOptions,
     };
@@ -59,18 +48,12 @@ const init = (
   clonedEl.TomSelect = new TomSelect(clonedEl, computedOptions);
 
   // On change
-  clonedEl.TomSelect.on("change", function (selectedItems: string[] | string) {
-    emit(
-      "update:modelValue",
-      Array.isArray(selectedItems) ? [...selectedItems] : selectedItems
-    );
+  clonedEl.TomSelect.on('change', function (selectedItems: string[] | string) {
+    emit('update:modelValue', Array.isArray(selectedItems) ? [...selectedItems] : selectedItems);
   });
 };
 
-const getOptions = (
-  options: HTMLCollection | undefined,
-  tempOptions: Element[] = []
-) => {
+const getOptions = (options: HTMLCollection | undefined, tempOptions: Element[] = []) => {
   if (options) {
     Array.from(options).forEach(function (optionEl) {
       if (optionEl instanceof HTMLOptGroupElement) {
@@ -90,18 +73,13 @@ const updateValue = (
   value: string | string[],
   props: TomSelectProps,
   computedOptions: RecursivePartial<TomSettings>,
-  emit: TomSelectEmit
+  emit: TomSelectEmit,
 ) => {
   // Remove old options
-  for (const [optionKey, option] of Object.entries(
-    clonedEl.TomSelect.options
-  )) {
+  for (const [optionKey, option] of Object.entries(clonedEl.TomSelect.options)) {
     if (
       !getOptions(originalEl.children).filter((optionEl) => {
-        return (
-          optionEl instanceof HTMLOptionElement &&
-          optionEl.value === option.value
-        );
+        return optionEl instanceof HTMLOptionElement && optionEl.value === option.value;
       }).length
     ) {
       clonedEl.TomSelect.removeOption(option.value);
@@ -109,31 +87,24 @@ const updateValue = (
   }
 
   // Update classnames
-  const initialClassNames = clonedEl
-    .getAttribute("data-initial-class")
-    ?.split(" ");
+  const initialClassNames = clonedEl.getAttribute('data-initial-class')?.split(' ');
   clonedEl.setAttribute(
-    "class",
+    'class',
     [
       ...Array.from(originalEl.classList),
-      ...Array.from(clonedEl.classList).filter(
-        (className) => initialClassNames?.indexOf(className) == -1
-      ),
-    ].join(" ")
+      ...Array.from(clonedEl.classList).filter((className) => initialClassNames?.indexOf(className) == -1),
+    ].join(' '),
   );
   clonedEl.TomSelect.wrapper.setAttribute(
-    "class",
+    'class',
     [
       ...Array.from(originalEl.classList),
       ...Array.from(clonedEl.TomSelect.wrapper.classList).filter(
-        (className) => initialClassNames?.indexOf(className) == -1
+        (className) => initialClassNames?.indexOf(className) == -1,
       ),
-    ].join(" ")
-  );
-  clonedEl.setAttribute(
-    "data-initial-class",
-    Array.from(originalEl.classList).join(" ")
+    ].join(' '),
   );
+  clonedEl.setAttribute('data-initial-class', Array.from(originalEl.classList).join(' '));
 
   // Add new options
   const options = originalEl.children;
@@ -141,7 +112,7 @@ const updateValue = (
     Array.from(options).forEach(function (optionEl) {
       clonedEl.TomSelect.addOption({
         text: optionEl.textContent,
-        value: optionEl.getAttribute("value"),
+        value: optionEl.getAttribute('value'),
       });
     });
   }
diff --git a/web/src/components/DataList/DataList.vue b/web/src/components/DataList/DataList.vue
index ca56b2d78..bed624433 100644
--- a/web/src/components/DataList/DataList.vue
+++ b/web/src/components/DataList/DataList.vue
@@ -1,302 +1,328 @@
-<script setup lang="ts">
-import { computed, ref, toRef, watch } from "vue";
-import { FormInput, FormSelect } from "@/components/Base/Form";
-import Button from "@/components/Base/Button";
-import Lucide from "@/components/Base/Lucide";
-import Pagination from "@/components/Base/Pagination";
-import { useI18n } from "vue-i18n";
-import { debounce } from "lodash";
-
-export interface PaginationData {
-  current_page: number,
-  from: number | null,
-  last_page: number,
-  path: string,
-  per_page: number,
-  to: number | null,
-  total: number,
-}
-
-export interface DataListEmittedData {
-  search: {
-    text: string,
-  },
-  pagination: {
-    page: number,
-    per_page: number,
-  }
-}
-
-export interface DataListProps {
-  visible: boolean,
-  canPrint: boolean,
-  canExport: boolean,
-  enableSearch: boolean,
-  pagination: PaginationData | null,
-}
-
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<DataListProps>(), {
-  visible: true,
-  canPrint: false,
-  canExport: false,
-  enableSearch: false,
-  pagination: () => ({
-    current_page: 0,
-    from: null,
-    last_page: 0,
-    path: '',
-    per_page: 10,
-    to: null,
-    total: 0,
-  }),
-});
-
-const emits = defineEmits<{
-  (e: 'dataListChanged', data: DataListEmittedData): void,
-  (e: 'print'): void,
-  (e: 'export', exportType: string): void
-}>();
-
-const visible = toRef(props, "visible");
-const canPrint = toRef(props, "canPrint");
-const canExport = toRef(props, "canExport");
-const enableSearch = toRef(props, "enableSearch");
-
-const showExportButtonGroups = ref<boolean>(false);
-
-const search = ref<string>('');
-const perPage = ref<number>(10);
-
-const textInfo = computed(() => {
-  if (props.pagination == null) return '';
-  if (props.pagination.from == null) return '';
-  if (props.pagination.to == null) return '';
-  if (props.pagination.total == null) return '';
-
-  return t('components.data-list.showing') + ' ' + props.pagination.from.toString() + ' ' +
-    t('components.data-list.to') + ' ' + props.pagination.to.toString() + ' ' +
-    t('components.data-list.of') + ' ' + props.pagination.total.toString() + ' ' +
-    t('components.data-list.entries');
-});
-
-const pages = computed(() => {
-  if (props.pagination == null) return [];
-  return generatePaginationArray(props.pagination.current_page, props.pagination.total, props.pagination.per_page);
-});
-
-const generatePaginationArray = (
-  currentPage: number,
-  totalRecords: number,
-  perPage: number,
-  maxVisiblePages = 7
-): number[] => {
-  if (currentPage === 0 || totalRecords === 0 || perPage === 0) {
-    return [];
-  }
-
-  const totalPages = Math.ceil(totalRecords / perPage);
-  const paginationArray: number[] = [];
-
-  if (totalPages <= maxVisiblePages) {
-    for (let i = 1; i <= totalPages; i++) {
-      paginationArray.push(i);
-    }
-  } else {
-    if (currentPage <= Math.floor(maxVisiblePages / 2) + 1) {
-      for (let i = 1; i <= maxVisiblePages - 2; i++) {
-        paginationArray.push(i);
-      }
-      paginationArray.push(-1);
-      paginationArray.push(totalPages);
-    } else if (currentPage >= totalPages - Math.floor(maxVisiblePages / 2)) {
-      paginationArray.push(1);
-      paginationArray.push(-1);
-      for (let i = totalPages - (maxVisiblePages - 2); i <= totalPages; i++) {
-        paginationArray.push(i);
-      }
-    } else {
-      paginationArray.push(1);
-      paginationArray.push(-1);
-      const start = currentPage - Math.floor(maxVisiblePages / 2) + 1;
-      const end = currentPage + Math.floor(maxVisiblePages / 2) - 1;
-      for (let i = start; i <= end; i++) {
-        paginationArray.push(i);
-      }
-      paginationArray.push(-1);
-      paginationArray.push(totalPages);
-    }
-  }
-
-  return paginationArray;
-}
-
-const createDataEmittedPayload = (search: string, page: number, per_page: number): DataListEmittedData => {
-  let result: DataListEmittedData = {
-    search: {
-      text: search,
-    },
-    pagination: {
-      page: page,
-      per_page: per_page,
-    }
-  };
-
-  return result;
-}
-
-const searchTextboxChanged = () => {
-  if (props.pagination != null)
-    emits('dataListChanged', createDataEmittedPayload(search.value, 1, props.pagination.per_page));
-}
-
-const refreshButtonClicked = () => {
-  if (props.pagination != null)
-    emits('dataListChanged', createDataEmittedPayload(search.value, props.pagination.current_page, props.pagination.per_page));
-}
-
-const printButtonClicked = () => {
-  emits('print');
-}
-
-const exportButtonClicked = (type: string) => {
-  if (type.length == 0) {
-    showExportButtonGroups.value = !showExportButtonGroups.value;
-    return;
-  }
-
-  emits('export', type);
-}
-
-const paginationFirstButtonClicked = () => {
-  if (props.pagination != null)
-    emits('dataListChanged', createDataEmittedPayload(search.value, 1, props.pagination.per_page));
-}
-
-const paginationPreviousButtonClicked = () => {
-  if (props.pagination != null) {
-    if (props.pagination.current_page > 1)
-      emits('dataListChanged', createDataEmittedPayload(search.value, props.pagination.current_page - 1, props.pagination.per_page));
-  }
-}
-
-const paginationNumberButtonClicked = (n: number) => {
-  if (props.pagination != null)
-    emits('dataListChanged', createDataEmittedPayload(search.value, n, props.pagination.per_page));
-}
-
-const paginationNextButtonClicked = () => {
-  if (props.pagination != null) {
-    if (props.pagination.current_page != props.pagination.last_page)
-      emits('dataListChanged', createDataEmittedPayload(search.value, props.pagination.current_page + 1, props.pagination.per_page));
-  }
-}
-
-const paginationLastButtonClicked = () => {
-  if (props.pagination != null)
-    emits('dataListChanged', createDataEmittedPayload(search.value, props.pagination.last_page, props.pagination.per_page));
-}
-
-const pageSizeChanged = () => {
-  if (props.pagination != null)
-    emits('dataListChanged', createDataEmittedPayload(search.value, 1, perPage.value));
-}
-
-watch(
-  search,
-  debounce((): void => {
-    searchTextboxChanged();
-  }, 500)
-);
-
-watch(perPage,
-  (val, oldVal) => {
-    if (val != oldVal) pageSizeChanged();
-  }
-);
-</script>
-
-<template>
-  <div v-if="visible" class="intro-y box p-5 mt-5">
-    <div class="grid justify-items-end">
-      <div class="flex flex-row gap-2">
-        <div v-if="enableSearch" class="relative w-56 text-slate-500">
-          <FormInput v-model="search" type="text" class="w-56 pr-10" placeholder="Search..." />
-          <Lucide icon="Search" class="absolute inset-y-0 right-0 w-4 h-4 my-auto mr-3" />
-        </div>
-
-        <Button @click="refreshButtonClicked">
-          <Lucide icon="RefreshCw" class="w-4 h-4" />
-        </Button>
-
-        <Button v-if="canPrint" @click="printButtonClicked">
-          <Lucide icon="Printer" class="w-4 h-4" />
-        </Button>
-
-        <Button v-if="canExport" @click="exportButtonClicked('')">
-          <Lucide icon="FileText" class="w-4 h-4" />
-        </Button>
-      </div>
-    </div>
-
-    <div v-if="showExportButtonGroups" class="mt-2 grid justify-items-end">
-      <div class="flex gap-2">
-        <Button size="sm" @click="exportButtonClicked('PDF')">
-          {{ t('components.data-list.export_to_pdf') }}
-        </Button>
-        <Button size="sm" @click="exportButtonClicked('XLS')">
-          {{ t('components.data-list.export_to_excel') }}
-        </Button>
-      </div>
-    </div>
-
-    <div class="overflow-x-auto mb-4">
-      <slot name="content"></slot>
-    </div>
-    <div class="flex flex-wrap justify-center intro-y sm:flex-row sm:flex-nowrap">
-      <div v-if="pages.length > 0" class="pb-1 border-b">
-        <Pagination class="w-full sm:w-auto sm:mr-auto">
-          <Pagination.Link @click="paginationFirstButtonClicked">
-            <Lucide icon="ChevronsLeft" class="w-4 h-4" />
-          </Pagination.Link>
-          <Pagination.Link @click="paginationPreviousButtonClicked">
-            <Lucide icon="ChevronLeft" class="w-4 h-4" />
-          </Pagination.Link>
-          <template v-for="n in pages" :key="n">
-            <template v-if="n > 0">
-              <Pagination.Link :active="pagination ? n == pagination.current_page : false"
-                @click="paginationNumberButtonClicked(n)">
-                {{ n }}
-              </Pagination.Link>
-            </template>
-            <template v-else>
-              <Pagination.Text>
-                {{ '...' }}
-              </Pagination.Text>
-            </template>
-          </template>
-          <Pagination.Link @click="paginationNextButtonClicked">
-            <Lucide icon="ChevronRight" class="w-4 h-4" />
-          </Pagination.Link>
-          <Pagination.Link @click="paginationLastButtonClicked">
-            <Lucide icon="ChevronsRight" class="w-4 h-4" />
-          </Pagination.Link>
-        </Pagination>
-      </div>
-    </div>
-    <div v-if="pages.length > 0" class="flex">
-      <div class="w-1/2 flex items-center justify-start">
-        {{ textInfo }}
-      </div>
-      <div class="w-1/2 flex justify-end">
-        <FormSelect v-model="perPage" class="w-20 mt-3 sm:mt-0">
-          <option value="10">10</option>
-          <option value="25">25</option>
-          <option value="50">50</option>
-          <option value="100">100</option>
-        </FormSelect>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+  import { computed, ref, toRef, watch } from 'vue';
+  import { FormInput, FormSelect } from '@/components/Base/Form';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Pagination from '@/components/Base/Pagination';
+  import { useI18n } from 'vue-i18n';
+  import { debounce } from 'lodash';
+
+  export interface PaginationData {
+    current_page: number;
+    from: number | null;
+    last_page: number;
+    path: string;
+    per_page: number;
+    to: number | null;
+    total: number;
+  }
+
+  export interface DataListEmittedData {
+    search: {
+      text: string;
+    };
+    pagination: {
+      page: number;
+      per_page: number;
+    };
+  }
+
+  export interface DataListProps {
+    visible: boolean;
+    canPrint: boolean;
+    canExport: boolean;
+    enableSearch: boolean;
+    pagination: PaginationData | null;
+  }
+
+  const { t } = useI18n();
+
+  const props = withDefaults(defineProps<DataListProps>(), {
+    visible: true,
+    canPrint: false,
+    canExport: false,
+    enableSearch: false,
+    pagination: () => ({
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 10,
+      to: null,
+      total: 0,
+    }),
+  });
+
+  const emits = defineEmits<{
+    (e: 'dataListChanged', data: DataListEmittedData): void;
+    (e: 'print'): void;
+    (e: 'export', exportType: string): void;
+  }>();
+
+  const visible = toRef(props, 'visible');
+  const canPrint = toRef(props, 'canPrint');
+  const canExport = toRef(props, 'canExport');
+  const enableSearch = toRef(props, 'enableSearch');
+
+  const showExportButtonGroups = ref<boolean>(false);
+
+  const search = ref<string>('');
+  const perPage = ref<number>(10);
+
+  const textInfo = computed(() => {
+    if (props.pagination == null) return '';
+    if (props.pagination.from == null) return '';
+    if (props.pagination.to == null) return '';
+    if (props.pagination.total == null) return '';
+
+    return (
+      t('components.data-list.showing') +
+      ' ' +
+      props.pagination.from.toString() +
+      ' ' +
+      t('components.data-list.to') +
+      ' ' +
+      props.pagination.to.toString() +
+      ' ' +
+      t('components.data-list.of') +
+      ' ' +
+      props.pagination.total.toString() +
+      ' ' +
+      t('components.data-list.entries')
+    );
+  });
+
+  const pages = computed(() => {
+    if (props.pagination == null) return [];
+    return generatePaginationArray(props.pagination.current_page, props.pagination.total, props.pagination.per_page);
+  });
+
+  const generatePaginationArray = (
+    currentPage: number,
+    totalRecords: number,
+    perPage: number,
+    maxVisiblePages = 7,
+  ): number[] => {
+    if (currentPage === 0 || totalRecords === 0 || perPage === 0) {
+      return [];
+    }
+
+    const totalPages = Math.ceil(totalRecords / perPage);
+    const paginationArray: number[] = [];
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        paginationArray.push(i);
+      }
+    } else {
+      if (currentPage <= Math.floor(maxVisiblePages / 2) + 1) {
+        for (let i = 1; i <= maxVisiblePages - 2; i++) {
+          paginationArray.push(i);
+        }
+        paginationArray.push(-1);
+        paginationArray.push(totalPages);
+      } else if (currentPage >= totalPages - Math.floor(maxVisiblePages / 2)) {
+        paginationArray.push(1);
+        paginationArray.push(-1);
+        for (let i = totalPages - (maxVisiblePages - 2); i <= totalPages; i++) {
+          paginationArray.push(i);
+        }
+      } else {
+        paginationArray.push(1);
+        paginationArray.push(-1);
+        const start = currentPage - Math.floor(maxVisiblePages / 2) + 1;
+        const end = currentPage + Math.floor(maxVisiblePages / 2) - 1;
+        for (let i = start; i <= end; i++) {
+          paginationArray.push(i);
+        }
+        paginationArray.push(-1);
+        paginationArray.push(totalPages);
+      }
+    }
+
+    return paginationArray;
+  };
+
+  const createDataEmittedPayload = (search: string, page: number, per_page: number): DataListEmittedData => {
+    let result: DataListEmittedData = {
+      search: {
+        text: search,
+      },
+      pagination: {
+        page: page,
+        per_page: per_page,
+      },
+    };
+
+    return result;
+  };
+
+  const searchTextboxChanged = () => {
+    if (props.pagination != null)
+      emits('dataListChanged', createDataEmittedPayload(search.value, 1, props.pagination.per_page));
+  };
+
+  const refreshButtonClicked = () => {
+    if (props.pagination != null)
+      emits(
+        'dataListChanged',
+        createDataEmittedPayload(search.value, props.pagination.current_page, props.pagination.per_page),
+      );
+  };
+
+  const printButtonClicked = () => {
+    emits('print');
+  };
+
+  const exportButtonClicked = (type: string) => {
+    if (type.length == 0) {
+      showExportButtonGroups.value = !showExportButtonGroups.value;
+      return;
+    }
+
+    emits('export', type);
+  };
+
+  const paginationFirstButtonClicked = () => {
+    if (props.pagination != null)
+      emits('dataListChanged', createDataEmittedPayload(search.value, 1, props.pagination.per_page));
+  };
+
+  const paginationPreviousButtonClicked = () => {
+    if (props.pagination != null) {
+      if (props.pagination.current_page > 1)
+        emits(
+          'dataListChanged',
+          createDataEmittedPayload(search.value, props.pagination.current_page - 1, props.pagination.per_page),
+        );
+    }
+  };
+
+  const paginationNumberButtonClicked = (n: number) => {
+    if (props.pagination != null)
+      emits('dataListChanged', createDataEmittedPayload(search.value, n, props.pagination.per_page));
+  };
+
+  const paginationNextButtonClicked = () => {
+    if (props.pagination != null) {
+      if (props.pagination.current_page != props.pagination.last_page)
+        emits(
+          'dataListChanged',
+          createDataEmittedPayload(search.value, props.pagination.current_page + 1, props.pagination.per_page),
+        );
+    }
+  };
+
+  const paginationLastButtonClicked = () => {
+    if (props.pagination != null)
+      emits(
+        'dataListChanged',
+        createDataEmittedPayload(search.value, props.pagination.last_page, props.pagination.per_page),
+      );
+  };
+
+  const pageSizeChanged = () => {
+    if (props.pagination != null) emits('dataListChanged', createDataEmittedPayload(search.value, 1, perPage.value));
+  };
+
+  watch(
+    search,
+    debounce((): void => {
+      searchTextboxChanged();
+    }, 500),
+  );
+
+  watch(perPage, (val, oldVal) => {
+    if (val != oldVal) pageSizeChanged();
+  });
+</script>
+
+<template>
+  <div v-if="visible" class="intro-y box p-5 mt-5">
+    <div class="flex flex-wrap items-start justify-between gap-2">
+      <div class="flex flex-row gap-2">
+        <slot name="toolbar-actions"></slot>
+      </div>
+
+      <div class="flex flex-row gap-2">
+        <div v-if="enableSearch" class="relative w-56 text-slate-500">
+          <FormInput v-model="search" type="text" class="w-56 pr-10" placeholder="Search..." />
+          <Lucide icon="Search" class="absolute inset-y-0 right-0 w-4 h-4 my-auto mr-3" />
+        </div>
+
+        <Button @click="refreshButtonClicked">
+          <Lucide icon="RefreshCw" class="w-4 h-4" />
+        </Button>
+
+        <Button v-if="canPrint" @click="printButtonClicked">
+          <Lucide icon="Printer" class="w-4 h-4" />
+        </Button>
+
+        <Button v-if="canExport" @click="exportButtonClicked('')">
+          <Lucide icon="FileText" class="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+
+    <div v-if="showExportButtonGroups" class="mt-2 grid justify-items-end">
+      <div class="flex gap-2">
+        <Button size="sm" @click="exportButtonClicked('PDF')">
+          {{ t('components.data-list.export_to_pdf') }}
+        </Button>
+        <Button size="sm" @click="exportButtonClicked('XLS')">
+          {{ t('components.data-list.export_to_excel') }}
+        </Button>
+      </div>
+    </div>
+
+    <div class="overflow-x-auto mb-4">
+      <slot name="content"></slot>
+    </div>
+    <div class="flex flex-wrap justify-center intro-y sm:flex-row sm:flex-nowrap">
+      <div v-if="pages.length > 0" class="pb-1 border-b">
+        <Pagination class="w-full sm:w-auto sm:mr-auto">
+          <Pagination.Link @click="paginationFirstButtonClicked">
+            <Lucide icon="ChevronsLeft" class="w-4 h-4" />
+          </Pagination.Link>
+          <Pagination.Link @click="paginationPreviousButtonClicked">
+            <Lucide icon="ChevronLeft" class="w-4 h-4" />
+          </Pagination.Link>
+          <template v-for="n in pages" :key="n">
+            <template v-if="n > 0">
+              <Pagination.Link
+                :active="pagination ? n == pagination.current_page : false"
+                @click="paginationNumberButtonClicked(n)"
+              >
+                {{ n }}
+              </Pagination.Link>
+            </template>
+            <template v-else>
+              <Pagination.Text>
+                {{ '...' }}
+              </Pagination.Text>
+            </template>
+          </template>
+          <Pagination.Link @click="paginationNextButtonClicked">
+            <Lucide icon="ChevronRight" class="w-4 h-4" />
+          </Pagination.Link>
+          <Pagination.Link @click="paginationLastButtonClicked">
+            <Lucide icon="ChevronsRight" class="w-4 h-4" />
+          </Pagination.Link>
+        </Pagination>
+      </div>
+    </div>
+    <div v-if="pages.length > 0" class="flex">
+      <div class="w-1/2 flex items-center justify-start">
+        {{ textInfo }}
+      </div>
+      <div class="w-1/2 flex justify-end">
+        <FormSelect v-model="perPage" class="w-20 mt-3 sm:mt-0">
+          <option value="10">10</option>
+          <option value="25">25</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+        </FormSelect>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/src/components/DataList/DataListFlex.vue b/web/src/components/DataList/DataListFlex.vue
new file mode 100644
index 000000000..a96949f31
--- /dev/null
+++ b/web/src/components/DataList/DataListFlex.vue
@@ -0,0 +1,353 @@
+<script setup lang="ts">
+  import { computed, ref, toRef, watch } from 'vue';
+  import { FormInput, FormSelect } from '@/components/Base/Form';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Pagination from '@/components/Base/Pagination';
+  import { useI18n } from 'vue-i18n';
+  import { debounce } from 'lodash';
+
+  export interface PaginationData {
+    current_page: number;
+    from: number | null;
+    last_page: number;
+    path: string;
+    per_page: number;
+    to: number | null;
+    total: number;
+  }
+
+  export interface DataListEmittedData {
+    search: {
+      text: string;
+    };
+    pagination: {
+      page: number;
+      per_page: number;
+    };
+  }
+
+  export interface DataListFlexProps<T = unknown> {
+    visible?: boolean;
+    canPrint?: boolean;
+    canExport?: boolean;
+    enableSearch?: boolean;
+    pagination?: PaginationData | null;
+    rows: T[];
+    rowClass?: string;
+  }
+
+  const { t } = useI18n();
+
+  const props = withDefaults(defineProps<DataListFlexProps>(), {
+    visible: true,
+    canPrint: false,
+    canExport: false,
+    enableSearch: false,
+    pagination: () => ({
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 10,
+      to: null,
+      total: 0,
+    }),
+    rows: () => [],
+    rowClass: '',
+  });
+
+  const emits = defineEmits<{
+    (e: 'dataListChanged', data: DataListEmittedData): void;
+    (e: 'print'): void;
+    (e: 'export', exportType: string): void;
+  }>();
+
+  const visible = toRef(props, 'visible');
+  const canPrint = toRef(props, 'canPrint');
+  const canExport = toRef(props, 'canExport');
+  const enableSearch = toRef(props, 'enableSearch');
+  const rows = toRef(props, 'rows');
+  const rowClass = toRef(props, 'rowClass');
+
+  const showExportButtonGroups = ref<boolean>(false);
+  const search = ref<string>('');
+  const perPage = ref<number>(10);
+
+  const textInfo = computed(() => {
+    if (props.pagination == null) return '';
+    if (props.pagination.from == null) return '';
+    if (props.pagination.to == null) return '';
+    if (props.pagination.total == null) return '';
+
+    return (
+      t('components.data-list.showing') +
+      ' ' +
+      props.pagination.from.toString() +
+      ' ' +
+      t('components.data-list.to') +
+      ' ' +
+      props.pagination.to.toString() +
+      ' ' +
+      t('components.data-list.of') +
+      ' ' +
+      props.pagination.total.toString() +
+      ' ' +
+      t('components.data-list.entries')
+    );
+  });
+
+  const pages = computed(() => {
+    if (props.pagination == null) return [];
+    return generatePaginationArray(props.pagination.current_page, props.pagination.total, props.pagination.per_page);
+  });
+
+  const generatePaginationArray = (
+    currentPage: number,
+    totalRecords: number,
+    perPage: number,
+    maxVisiblePages = 7,
+  ): number[] => {
+    if (currentPage === 0 || totalRecords === 0 || perPage === 0) {
+      return [];
+    }
+
+    const totalPages = Math.ceil(totalRecords / perPage);
+    const paginationArray: number[] = [];
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        paginationArray.push(i);
+      }
+    } else {
+      if (currentPage <= Math.floor(maxVisiblePages / 2) + 1) {
+        for (let i = 1; i <= maxVisiblePages - 2; i++) {
+          paginationArray.push(i);
+        }
+        paginationArray.push(-1);
+        paginationArray.push(totalPages);
+      } else if (currentPage >= totalPages - Math.floor(maxVisiblePages / 2)) {
+        paginationArray.push(1);
+        paginationArray.push(-1);
+        for (let i = totalPages - (maxVisiblePages - 2); i <= totalPages; i++) {
+          paginationArray.push(i);
+        }
+      } else {
+        paginationArray.push(1);
+        paginationArray.push(-1);
+        const start = currentPage - Math.floor(maxVisiblePages / 2) + 1;
+        const end = currentPage + Math.floor(maxVisiblePages / 2) - 1;
+        for (let i = start; i <= end; i++) {
+          paginationArray.push(i);
+        }
+        paginationArray.push(-1);
+        paginationArray.push(totalPages);
+      }
+    }
+
+    return paginationArray;
+  };
+
+  const createDataEmittedPayload = (search: string, page: number, per_page: number): DataListEmittedData => {
+    let result: DataListEmittedData = {
+      search: {
+        text: search,
+      },
+      pagination: {
+        page: page,
+        per_page: per_page,
+      },
+    };
+
+    return result;
+  };
+
+  const searchTextboxChanged = () => {
+    emits('dataListChanged', createDataEmittedPayload(search.value, 1, props.pagination?.per_page ?? perPage.value));
+  };
+
+  const refreshButtonClicked = () => {
+    emits(
+      'dataListChanged',
+      createDataEmittedPayload(search.value, props.pagination?.current_page ?? 1, props.pagination?.per_page ?? perPage.value),
+    );
+  };
+
+  const printButtonClicked = () => {
+    emits('print');
+  };
+
+  const exportButtonClicked = (type: string) => {
+    if (type.length == 0) {
+      showExportButtonGroups.value = !showExportButtonGroups.value;
+      return;
+    }
+
+    emits('export', type);
+  };
+
+  const paginationFirstButtonClicked = () => {
+    if (props.pagination != null)
+      emits('dataListChanged', createDataEmittedPayload(search.value, 1, props.pagination.per_page));
+  };
+
+  const paginationPreviousButtonClicked = () => {
+    if (props.pagination != null) {
+      if (props.pagination.current_page > 1)
+        emits(
+          'dataListChanged',
+          createDataEmittedPayload(search.value, props.pagination.current_page - 1, props.pagination.per_page),
+        );
+    }
+  };
+
+  const paginationNumberButtonClicked = (n: number) => {
+    if (props.pagination != null)
+      emits('dataListChanged', createDataEmittedPayload(search.value, n, props.pagination.per_page));
+  };
+
+  const paginationNextButtonClicked = () => {
+    if (props.pagination != null) {
+      if (props.pagination.current_page != props.pagination.last_page)
+        emits(
+          'dataListChanged',
+          createDataEmittedPayload(search.value, props.pagination.current_page + 1, props.pagination.per_page),
+        );
+    }
+  };
+
+  const paginationLastButtonClicked = () => {
+    if (props.pagination != null)
+      emits(
+        'dataListChanged',
+        createDataEmittedPayload(search.value, props.pagination.last_page, props.pagination.per_page),
+      );
+  };
+
+  const pageSizeChanged = () => {
+    if (props.pagination != null) emits('dataListChanged', createDataEmittedPayload(search.value, 1, perPage.value));
+  };
+
+  const resolveRowKey = (item: unknown, index: number): string | number => {
+    if (typeof item === 'object' && item !== null) {
+      const row = item as Record<string, unknown>;
+      if (typeof row.ulid === 'string' || typeof row.ulid === 'number') return row.ulid;
+      if (typeof row.id === 'string' || typeof row.id === 'number') return row.id;
+      if (typeof row.code === 'string' || typeof row.code === 'number') return row.code;
+    }
+
+    return index;
+  };
+
+  watch(
+    search,
+    debounce((): void => {
+      searchTextboxChanged();
+    }, 500),
+  );
+
+  watch(perPage, (val, oldVal) => {
+    if (val != oldVal) pageSizeChanged();
+  });
+</script>
+
+<template>
+  <div v-if="visible" class="intro-y box p-5 mt-5">
+    <div class="flex flex-wrap justify-end gap-2">
+      <div v-if="enableSearch" class="relative w-56 text-slate-500">
+        <FormInput v-model="search" type="text" class="w-56 pr-10" placeholder="Search..." />
+        <Lucide icon="Search" class="absolute inset-y-0 right-0 w-4 h-4 my-auto mr-3" />
+      </div>
+
+      <Button @click="refreshButtonClicked">
+        <Lucide icon="RefreshCw" class="w-4 h-4" />
+      </Button>
+
+      <Button v-if="canPrint" @click="printButtonClicked">
+        <Lucide icon="Printer" class="w-4 h-4" />
+      </Button>
+
+      <Button v-if="canExport" @click="exportButtonClicked('')">
+        <Lucide icon="FileText" class="w-4 h-4" />
+      </Button>
+    </div>
+
+    <div v-if="showExportButtonGroups" class="mt-2 flex justify-end">
+      <div class="flex flex-wrap gap-2">
+        <Button size="sm" @click="exportButtonClicked('PDF')">
+          {{ t('components.data-list.export_to_pdf') }}
+        </Button>
+        <Button size="sm" @click="exportButtonClicked('XLS')">
+          {{ t('components.data-list.export_to_excel') }}
+        </Button>
+      </div>
+    </div>
+
+    <div class="mt-5 mb-4 space-y-3">
+      <template v-if="rows.length > 0">
+        <div
+          v-for="(item, index) in rows"
+          :key="resolveRowKey(item, index)"
+          :class="[
+            'grid grid-cols-12 gap-3 items-center rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4',
+            rowClass,
+          ]"
+        >
+          <slot name="row" :item="item" :index="index"></slot>
+        </div>
+      </template>
+      <template v-else>
+        <div class="text-slate-500 text-sm italic">
+          {{ t('components.data-list.data_not_found') }}
+        </div>
+      </template>
+    </div>
+
+    <div class="flex flex-wrap justify-center intro-y sm:flex-row sm:flex-nowrap">
+      <div v-if="pages.length > 0" class="pb-1 border-b">
+        <Pagination class="w-full sm:w-auto sm:mr-auto">
+          <Pagination.Link @click="paginationFirstButtonClicked">
+            <Lucide icon="ChevronsLeft" class="w-4 h-4" />
+          </Pagination.Link>
+          <Pagination.Link @click="paginationPreviousButtonClicked">
+            <Lucide icon="ChevronLeft" class="w-4 h-4" />
+          </Pagination.Link>
+          <template v-for="n in pages" :key="n">
+            <template v-if="n > 0">
+              <Pagination.Link
+                :active="pagination ? n == pagination.current_page : false"
+                @click="paginationNumberButtonClicked(n)"
+              >
+                {{ n }}
+              </Pagination.Link>
+            </template>
+            <template v-else>
+              <Pagination.Text>
+                {{ '...' }}
+              </Pagination.Text>
+            </template>
+          </template>
+          <Pagination.Link @click="paginationNextButtonClicked">
+            <Lucide icon="ChevronRight" class="w-4 h-4" />
+          </Pagination.Link>
+          <Pagination.Link @click="paginationLastButtonClicked">
+            <Lucide icon="ChevronsRight" class="w-4 h-4" />
+          </Pagination.Link>
+        </Pagination>
+      </div>
+    </div>
+    <div v-if="pages.length > 0" class="flex">
+      <div class="w-1/2 flex items-center justify-start">
+        {{ textInfo }}
+      </div>
+      <div class="w-1/2 flex justify-end">
+        <FormSelect v-model="perPage" class="w-20 mt-3 sm:mt-0">
+          <option value="10">10</option>
+          <option value="25">25</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+        </FormSelect>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/src/components/DataList/index.ts b/web/src/components/DataList/index.ts
index e1abceeb6..662ed0365 100644
--- a/web/src/components/DataList/index.ts
+++ b/web/src/components/DataList/index.ts
@@ -1,3 +1,5 @@
-import DataList from "./DataList.vue";
-
-export default DataList;
+import DataList from './DataList.vue';
+import DataListFlex from './DataListFlex.vue';
+
+export default DataList;
+export { DataListFlex };
diff --git a/web/src/components/Expense/ExpenseImagesField.vue b/web/src/components/Expense/ExpenseImagesField.vue
new file mode 100644
index 000000000..fa3a38397
--- /dev/null
+++ b/web/src/components/Expense/ExpenseImagesField.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Dialog from '@/components/Base/Headless/Dialog';
+import ExpenseImageService from '@/services/ExpenseImageService';
+import type { ExpenseImage } from '@/types/models/ExpenseImage';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+
+interface ImageHash {
+  hash: string;
+  is_main: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: ImageHash[];
+    existingImages?: ExpenseImage[];
+    deleteImageIds?: Array<number | string>;
+  }>(),
+  {
+    modelValue: () => [],
+    existingImages: () => [],
+    deleteImageIds: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ImageHash[]): void;
+  (e: 'update:existingImages', value: ExpenseImage[]): void;
+  (e: 'update:deleteImageIds', value: Array<number | string>): void;
+}>();
+
+const { t } = useI18n();
+const expenseImageService = new ExpenseImageService();
+
+const imageHashes = computed({
+  get: () => props.modelValue,
+  set: (value: ImageHash[]) => emit('update:modelValue', value),
+});
+
+const existingImages = computed({
+  get: () => props.existingImages ?? [],
+  set: (value: ExpenseImage[]) => emit('update:existingImages', value),
+});
+
+const deleteImageIds = computed({
+  get: () => props.deleteImageIds ?? [],
+  set: (value: Array<number | string>) => emit('update:deleteImageIds', value),
+});
+
+const newImages = ref<ExpenseImage[]>([]);
+const isUploading = ref(false);
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const previewImageUrl = ref<string | null>(null);
+const isPreviewOpen = ref(false);
+
+const showCameraModal = ref(false);
+const videoRef = ref<HTMLVideoElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const stream = ref<MediaStream | null>(null);
+
+const isImageMain = (image: ExpenseImage): boolean => {
+  const item = imageHashes.value.find((hash) => hash.hash === image.hash);
+  return item ? item.is_main : false;
+};
+
+const handleUpload = async (file: File) => {
+  isUploading.value = true;
+
+  try {
+    const uploadResponse: ServiceResponse<ExpenseImage | null> = await expenseImageService.upload(file);
+
+    if (!uploadResponse.success || !uploadResponse.data) {
+      return;
+    }
+
+    newImages.value = [...newImages.value, uploadResponse.data];
+
+    const hashes = [...imageHashes.value];
+    hashes.push({
+      hash: uploadResponse.data.hash,
+      is_main: hashes.length === 0,
+    });
+
+    imageHashes.value = hashes;
+  } finally {
+    isUploading.value = false;
+  }
+};
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+
+  target.value = '';
+};
+
+const onDrop = (event: DragEvent) => {
+  const files = event.dataTransfer?.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+};
+
+const openBrowse = () => {
+  fileInput.value?.click();
+};
+
+const openPreview = (url: string | undefined | null) => {
+  if (!url) {
+    return;
+  }
+
+  previewImageUrl.value = url;
+  isPreviewOpen.value = true;
+};
+
+const closePreview = () => {
+  isPreviewOpen.value = false;
+  previewImageUrl.value = null;
+};
+
+const removeExistingImage = (index: number) => {
+  const images = [...existingImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  const ids = [...deleteImageIds.value];
+  if (!ids.includes(image.id)) {
+    ids.push(image.id);
+  }
+  deleteImageIds.value = ids;
+
+  images.splice(index, 1);
+  existingImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const removeNewImage = (index: number) => {
+  const images = [...newImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  images.splice(index, 1);
+  newImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const setMainImage = (image: ExpenseImage) => {
+  imageHashes.value = imageHashes.value.map((hash) => ({
+    hash: hash.hash,
+    is_main: hash.hash === image.hash,
+  }));
+
+  existingImages.value = existingImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+
+  newImages.value = newImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+};
+
+const startCamera = async () => {
+  showCameraModal.value = true;
+
+  try {
+    stream.value = await navigator.mediaDevices.getUserMedia({ video: true });
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream.value;
+    }
+  } catch (error) {
+    console.error('Error accessing camera:', error);
+  }
+};
+
+const stopCamera = () => {
+  if (stream.value) {
+    stream.value.getTracks().forEach((track) => track.stop());
+    stream.value = null;
+  }
+
+  showCameraModal.value = false;
+};
+
+const capturePhoto = () => {
+  if (!videoRef.value || !canvasRef.value) {
+    return;
+  }
+
+  const video = videoRef.value;
+  const canvas = canvasRef.value;
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+
+    const file = new File([blob], `expense_${Date.now()}.jpg`, { type: 'image/jpeg' });
+    handleUpload(file);
+    stopCamera();
+  }, 'image/jpeg');
+};
+
+onUnmounted(() => {
+  stopCamera();
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-4">
+    <div class="col-span-12 sm:col-span-4 lg:col-span-3">
+      <div class="flex flex-col gap-4">
+        <div
+          class="border-2 border-dashed border-slate-300 dark:border-darkmode-400 rounded-md p-6 flex flex-col justify-center items-center cursor-pointer hover:bg-slate-50 dark:hover:bg-darkmode-600/50 transition-colors"
+          @dragover.prevent
+          @drop.prevent="onDrop"
+          @click="openBrowse"
+        >
+          <Lucide icon="UploadCloud" class="w-10 h-10 text-slate-400 mb-2" />
+          <div class="text-slate-500 text-center">
+            <span class="font-medium text-primary">{{ t('components.file-upload.browse') }}</span>
+            {{ t('components.file-upload.or_drag_drop') }}
+          </div>
+          <div class="text-slate-400 text-xs mt-1">
+            JPG, PNG
+          </div>
+          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFileChange" />
+        </div>
+
+        <div class="flex gap-2">
+          <Button type="button" variant="outline-primary" class="w-full" @click="startCamera">
+            <Lucide icon="Camera" class="w-4 h-4 mr-2" />
+            {{ t('components.file-upload.camera') }}
+          </Button>
+        </div>
+
+        <div v-if="isUploading" class="flex justify-center p-2">
+          <Lucide icon="Loader2" class="w-6 h-6 animate-spin text-primary" />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-span-12 sm:col-span-8 lg:col-span-9">
+      <div
+        v-if="existingImages.length + newImages.length > 0"
+        class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"
+      >
+        <div
+          v-for="(image, index) in existingImages"
+          :key="`existing-${image.id}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeExistingImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+
+        <div
+          v-for="(image, index) in newImages"
+          :key="`new-${image.hash}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeNewImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="h-full flex items-center justify-center text-slate-400 border-2 border-dashed rounded-md bg-slate-50 dark:bg-darkmode-600/20 min-h-[150px]"
+      >
+        {{ t('components.data-list.data_not_found') }}
+      </div>
+    </div>
+  </div>
+
+  <Dialog :open="isPreviewOpen" size="lg" @close="closePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          Preview
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description class="p-0">
+        <div class="bg-slate-100 dark:bg-darkmode-800 flex items-center justify-center">
+          <img v-if="previewImageUrl" :src="previewImageUrl" class="max-h-[70vh] w-auto object-contain" />
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" @click="closePreview">
+          {{ t('components.buttons.close') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="showCameraModal" @close="stopCamera">
+    <Dialog.Panel>
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          {{ t('components.file-upload.camera') }}
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description>
+        <div class="relative w-full aspect-video bg-black rounded overflow-hidden">
+          <video ref="videoRef" autoplay playsinline class="w-full h-full object-cover"></video>
+          <canvas ref="canvasRef" class="hidden"></canvas>
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" class="w-24 mr-1" @click="stopCamera">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="primary" class="w-24" @click="capturePhoto">
+          {{ t('components.file-upload.capture') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/components/HomeLogo/HomeLogo.vue b/web/src/components/HomeLogo/HomeLogo.vue
index 1c4ce2ee8..7b79d732b 100644
--- a/web/src/components/HomeLogo/HomeLogo.vue
+++ b/web/src/components/HomeLogo/HomeLogo.vue
@@ -1,47 +1,43 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import logoUrl from "@/assets/images/logo.svg";
+  import { ref, computed } from 'vue';
+  import logoUrl from '@/assets/images/logo.svg';
 
-interface LanguageSwitcherProps {
-    visible: boolean,
-    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker',
-    layout?: "side-menu" | "simple-menu" | "top-menu",
-}
+  interface LanguageSwitcherProps {
+    visible: boolean;
+    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker';
+    layout?: 'side-menu' | 'simple-menu' | 'top-menu';
+  }
 
-const props = withDefaults(defineProps<LanguageSwitcherProps>(), {
+  const props = withDefaults(defineProps<LanguageSwitcherProps>(), {
     visible: true,
     theme: 'rubick',
     layout: 'side-menu',
-});
+  });
 
-const appName = import.meta.env.VITE_APP_NAME;
+  const appName = import.meta.env.VITE_APP_NAME;
 
-const toUrl = ref<string>('side-menu-dashboard-maindashboard');
+  const toUrl = ref<string>('side-menu-dashboard-maindashboard');
 </script>
 
 <template>
-    <RouterLink
-        :to="{ name: toUrl }"
-        :class="[
-                '-intro-x hidden md:flex',
-                props.layout == 'side-menu' && 'xl:w-[180px]',
-                props.layout == 'simple-menu' && 'xl:w-auto',
-                props.layout == 'top-menu' && 'w-auto',
-        ]"
+  <RouterLink
+    :to="{ name: toUrl }"
+    :class="[
+      '-intro-x hidden md:flex',
+      props.layout == 'side-menu' && 'xl:w-[180px]',
+      props.layout == 'simple-menu' && 'xl:w-auto',
+      props.layout == 'top-menu' && 'w-auto',
+    ]"
+  >
+    <img alt="DCSLab" class="w-6" :src="logoUrl" />
+    <span
+      :class="[
+        'ml-3 text-lg text-white',
+        props.layout == 'side-menu' && 'hidden xl:block',
+        props.layout == 'simple-menu' && 'hidden',
+      ]"
     >
-        <img
-            alt="DCSLab"
-            class="w-6"
-            :src="logoUrl"
-        />
-        <span
-            :class="[
-                    'ml-3 text-lg text-white',
-                    props.layout == 'side-menu' && 'hidden xl:block',
-                    props.layout == 'simple-menu' && 'hidden',
-            ]"
-        >
-            {{ appName }}
-        </span>
-    </RouterLink>
-</template>
\ No newline at end of file
+      {{ appName }}
+    </span>
+  </RouterLink>
+</template>
diff --git a/web/src/components/HomeLogo/index.ts b/web/src/components/HomeLogo/index.ts
index 7339d65ea..9c671ce03 100644
--- a/web/src/components/HomeLogo/index.ts
+++ b/web/src/components/HomeLogo/index.ts
@@ -1,3 +1,3 @@
-import HomeLogo from "./HomeLogo.vue";
+import HomeLogo from './HomeLogo.vue';
 
 export default HomeLogo;
diff --git a/web/src/components/Income/IncomeImagesField.vue b/web/src/components/Income/IncomeImagesField.vue
new file mode 100644
index 000000000..20d77df8e
--- /dev/null
+++ b/web/src/components/Income/IncomeImagesField.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Dialog from '@/components/Base/Headless/Dialog';
+import IncomeImageService from '@/services/IncomeImageService';
+import type { IncomeImage } from '@/types/models/IncomeImage';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+
+interface ImageHash {
+  hash: string;
+  is_main: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: ImageHash[];
+    existingImages?: IncomeImage[];
+    deleteImageIds?: Array<number | string>;
+  }>(),
+  {
+    modelValue: () => [],
+    existingImages: () => [],
+    deleteImageIds: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ImageHash[]): void;
+  (e: 'update:existingImages', value: IncomeImage[]): void;
+  (e: 'update:deleteImageIds', value: Array<number | string>): void;
+}>();
+
+const { t } = useI18n();
+const incomeImageService = new IncomeImageService();
+
+const imageHashes = computed({
+  get: () => props.modelValue,
+  set: (value: ImageHash[]) => emit('update:modelValue', value),
+});
+
+const existingImages = computed({
+  get: () => props.existingImages ?? [],
+  set: (value: IncomeImage[]) => emit('update:existingImages', value),
+});
+
+const deleteImageIds = computed({
+  get: () => props.deleteImageIds ?? [],
+  set: (value: Array<number | string>) => emit('update:deleteImageIds', value),
+});
+
+const newImages = ref<IncomeImage[]>([]);
+const isUploading = ref(false);
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const previewImageUrl = ref<string | null>(null);
+const isPreviewOpen = ref(false);
+
+const showCameraModal = ref(false);
+const videoRef = ref<HTMLVideoElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const stream = ref<MediaStream | null>(null);
+
+const isImageMain = (image: IncomeImage): boolean => {
+  const item = imageHashes.value.find((hash) => hash.hash === image.hash);
+  return item ? item.is_main : false;
+};
+
+const handleUpload = async (file: File) => {
+  isUploading.value = true;
+
+  try {
+    const uploadResponse: ServiceResponse<IncomeImage | null> = await incomeImageService.upload(file);
+
+    if (!uploadResponse.success || !uploadResponse.data) {
+      return;
+    }
+
+    newImages.value = [...newImages.value, uploadResponse.data];
+
+    const hashes = [...imageHashes.value];
+    hashes.push({
+      hash: uploadResponse.data.hash,
+      is_main: hashes.length === 0,
+    });
+
+    imageHashes.value = hashes;
+  } finally {
+    isUploading.value = false;
+  }
+};
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+
+  target.value = '';
+};
+
+const onDrop = (event: DragEvent) => {
+  const files = event.dataTransfer?.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+};
+
+const openBrowse = () => {
+  fileInput.value?.click();
+};
+
+const openPreview = (url: string | undefined | null) => {
+  if (!url) {
+    return;
+  }
+
+  previewImageUrl.value = url;
+  isPreviewOpen.value = true;
+};
+
+const closePreview = () => {
+  isPreviewOpen.value = false;
+  previewImageUrl.value = null;
+};
+
+const removeExistingImage = (index: number) => {
+  const images = [...existingImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  const ids = [...deleteImageIds.value];
+  if (!ids.includes(image.id)) {
+    ids.push(image.id);
+  }
+  deleteImageIds.value = ids;
+
+  images.splice(index, 1);
+  existingImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const removeNewImage = (index: number) => {
+  const images = [...newImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  images.splice(index, 1);
+  newImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const setMainImage = (image: IncomeImage) => {
+  imageHashes.value = imageHashes.value.map((hash) => ({
+    hash: hash.hash,
+    is_main: hash.hash === image.hash,
+  }));
+
+  existingImages.value = existingImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+
+  newImages.value = newImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+};
+
+const startCamera = async () => {
+  showCameraModal.value = true;
+
+  try {
+    stream.value = await navigator.mediaDevices.getUserMedia({ video: true });
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream.value;
+    }
+  } catch (error) {
+    console.error('Error accessing camera:', error);
+  }
+};
+
+const stopCamera = () => {
+  if (stream.value) {
+    stream.value.getTracks().forEach((track) => track.stop());
+    stream.value = null;
+  }
+
+  showCameraModal.value = false;
+};
+
+const capturePhoto = () => {
+  if (!videoRef.value || !canvasRef.value) {
+    return;
+  }
+
+  const video = videoRef.value;
+  const canvas = canvasRef.value;
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+
+    const file = new File([blob], `income_${Date.now()}.jpg`, { type: 'image/jpeg' });
+    handleUpload(file);
+    stopCamera();
+  }, 'image/jpeg');
+};
+
+onUnmounted(() => {
+  stopCamera();
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-4">
+    <div class="col-span-12 sm:col-span-4 lg:col-span-3">
+      <div class="flex flex-col gap-4">
+        <div
+          class="border-2 border-dashed border-slate-300 dark:border-darkmode-400 rounded-md p-6 flex flex-col justify-center items-center cursor-pointer hover:bg-slate-50 dark:hover:bg-darkmode-600/50 transition-colors"
+          @dragover.prevent
+          @drop.prevent="onDrop"
+          @click="openBrowse"
+        >
+          <Lucide icon="UploadCloud" class="w-10 h-10 text-slate-400 mb-2" />
+          <div class="text-slate-500 text-center">
+            <span class="font-medium text-primary">{{ t('components.file-upload.browse') }}</span>
+            {{ t('components.file-upload.or_drag_drop') }}
+          </div>
+          <div class="text-slate-400 text-xs mt-1">
+            JPG, PNG
+          </div>
+          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFileChange" />
+        </div>
+
+        <div class="flex gap-2">
+          <Button type="button" variant="outline-primary" class="w-full" @click="startCamera">
+            <Lucide icon="Camera" class="w-4 h-4 mr-2" />
+            {{ t('components.file-upload.camera') }}
+          </Button>
+        </div>
+
+        <div v-if="isUploading" class="flex justify-center p-2">
+          <Lucide icon="Loader2" class="w-6 h-6 animate-spin text-primary" />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-span-12 sm:col-span-8 lg:col-span-9">
+      <div
+        v-if="existingImages.length + newImages.length > 0"
+        class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"
+      >
+        <div
+          v-for="(image, index) in existingImages"
+          :key="`existing-${image.id}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeExistingImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+
+        <div
+          v-for="(image, index) in newImages"
+          :key="`new-${image.hash}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeNewImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="h-full flex items-center justify-center text-slate-400 border-2 border-dashed rounded-md bg-slate-50 dark:bg-darkmode-600/20 min-h-[150px]"
+      >
+        {{ t('components.data-list.data_not_found') }}
+      </div>
+    </div>
+  </div>
+
+  <Dialog :open="isPreviewOpen" size="lg" @close="closePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          Preview
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description class="p-0">
+        <div class="bg-slate-100 dark:bg-darkmode-800 flex items-center justify-center">
+          <img v-if="previewImageUrl" :src="previewImageUrl" class="max-h-[70vh] w-auto object-contain" />
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" @click="closePreview">
+          {{ t('components.buttons.close') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="showCameraModal" @close="stopCamera">
+    <Dialog.Panel>
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          {{ t('components.file-upload.camera') }}
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description>
+        <div class="relative w-full aspect-video bg-black rounded overflow-hidden">
+          <video ref="videoRef" autoplay playsinline class="w-full h-full object-cover"></video>
+          <canvas ref="canvasRef" class="hidden"></canvas>
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" class="w-24 mr-1" @click="stopCamera">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="primary" class="w-24" @click="capturePhoto">
+          {{ t('components.file-upload.capture') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/components/LanguageSwitcher/LanguageSwitcher.vue b/web/src/components/LanguageSwitcher/LanguageSwitcher.vue
index 3df45123c..8f16ff287 100644
--- a/web/src/components/LanguageSwitcher/LanguageSwitcher.vue
+++ b/web/src/components/LanguageSwitcher/LanguageSwitcher.vue
@@ -1,52 +1,56 @@
 <script setup lang="ts">
-import { Menu } from "@/components/Base/Headless";
-import { switchLang } from "@/lang";
-import { useI18n } from "vue-i18n";
-import Lucide from "@/components/Base/Lucide";
-import { twMerge } from "tailwind-merge";
-import { computed } from "vue";
+  import { Menu } from '@/components/Base/Headless';
+  import { switchLang } from '@/lang';
+  import { useI18n } from 'vue-i18n';
+  import Lucide from '@/components/Base/Lucide';
+  import { twMerge } from 'tailwind-merge';
+  import { computed } from 'vue';
 
-const { t } = useI18n();
+  const { t } = useI18n();
 
-interface LanguageSwitcherProps {
-    visible: boolean,
-    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker',
-    layout?: "side-menu" | "simple-menu" | "top-menu",
-}
+  interface LanguageSwitcherProps {
+    visible: boolean;
+    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker';
+    layout?: 'side-menu' | 'simple-menu' | 'top-menu';
+  }
 
-const props = withDefaults(defineProps<LanguageSwitcherProps>(), {
+  const props = withDefaults(defineProps<LanguageSwitcherProps>(), {
     visible: true,
     theme: 'rubick',
     layout: 'side-menu',
-});
+  });
 
-const switchLanguage = (lang: "en" | "id"): void => {
-  switchLang(lang);
-}
+  const switchLanguage = (lang: 'en' | 'id'): void => {
+    switchLang(lang);
+  };
 
-const computedClass = computed(() => 
+  const computedClass = computed(() =>
     twMerge([
-        props.theme == 'rubick' && props.layout == 'side-menu' && '',
-        props.theme == 'enigma' && 'text-white',
-        props.theme == 'tinker' && 'text-white',
-        props.theme == 'icewall' && 'text-white',
-        'hover:animate-spin'
-    ])
-);
+      props.theme == 'rubick' && props.layout == 'side-menu' && '',
+      props.theme == 'enigma' && 'text-white',
+      props.theme == 'tinker' && 'text-white',
+      props.theme == 'icewall' && 'text-white',
+      'hover:animate-spin',
+    ]),
+  );
 </script>
 
 <template>
-    <Menu class="mr-4 intro-x sm:mr-6">
-        <Menu.Button variant="primary">
-            <Lucide icon="Globe" :class="computedClass" />
-        </Menu.Button>
-        <Menu.Items class="w-48 h-24 overflow-y-auto" placement="bottom-end">
-            <Menu.Item @click="switchLanguage('en')">
-                <span class="text-primary">{{ t('components.language-switcher.language.english') }}</span>
-            </Menu.Item>
-            <Menu.Item @click="switchLanguage('id')">
-                <span class="text-primary">{{ t('components.language-switcher.language.indonesia') }}</span>
-            </Menu.Item>
-        </Menu.Items>
-    </Menu>
-</template>
\ No newline at end of file
+  <Menu class="mr-4 intro-x sm:mr-6">
+    <Menu.Button variant="primary">
+      <Lucide icon="Globe" :class="computedClass" />
+    </Menu.Button>
+    <Menu.Items class="w-48 h-24 overflow-y-auto" placement="bottom-end">
+      <Menu.Item @click="switchLanguage('en')">
+        <span class="text-primary">
+          {{ t('components.language-switcher.language.english') }}
+        </span>
+      </Menu.Item>
+      <Menu.Item @click="switchLanguage('id')">
+        <span class="text-primary">
+          {{ t('components.language-switcher.language.indonesia') }}
+        </span>
+      </Menu.Item>
+    </Menu.Items>
+  </Menu>
+</template>
diff --git a/web/src/components/LanguageSwitcher/index.ts b/web/src/components/LanguageSwitcher/index.ts
index bef3637db..4d840445b 100644
--- a/web/src/components/LanguageSwitcher/index.ts
+++ b/web/src/components/LanguageSwitcher/index.ts
@@ -1,3 +1,3 @@
-import LanguageSwitcher from "./LanguageSwitcher.vue";
+import LanguageSwitcher from './LanguageSwitcher.vue';
 
 export default LanguageSwitcher;
diff --git a/web/src/components/LoadingOverlay/LoadingOverlay.vue b/web/src/components/LoadingOverlay/LoadingOverlay.vue
index fb706981e..e7793abf7 100644
--- a/web/src/components/LoadingOverlay/LoadingOverlay.vue
+++ b/web/src/components/LoadingOverlay/LoadingOverlay.vue
@@ -1,26 +1,26 @@
-<script setup lang="ts">
-import { toRef } from "vue";
-import Spinner from "@/assets/images/spinner-big.gif";
-
-interface LoadingOverlayProps {
-    visible: boolean,
-    transparent: boolean,
-}
-
-const props = withDefaults(defineProps<LoadingOverlayProps>(), {
-    visible: false,
-    transparent: false,
-});
-
-const visible = toRef(props, 'visible');
-const transparent = toRef(props, 'transparent');
-</script>
-
-<template>
-    <div :class="{ 'loading-container': visible }">
-        <slot></slot>
-        <div v-if="visible" :class="{ 'loading-overlay': true, 'loading-overlay-gray': !transparent }">
-            <img :src="Spinner" class="spinner" alt="DCSLab" />
-        </div>
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { toRef } from 'vue';
+  import Spinner from '@/assets/images/spinner-big.gif';
+
+  interface LoadingOverlayProps {
+    visible: boolean;
+    transparent: boolean;
+  }
+
+  const props = withDefaults(defineProps<LoadingOverlayProps>(), {
+    visible: false,
+    transparent: false,
+  });
+
+  const visible = toRef(props, 'visible');
+  const transparent = toRef(props, 'transparent');
+</script>
+
+<template>
+  <div :class="{ 'loading-container': visible }">
+    <slot></slot>
+    <div v-if="visible" :class="{ 'loading-overlay': true, 'loading-overlay-gray': !transparent }">
+      <img :src="Spinner" class="spinner" alt="DCSLab" />
+    </div>
+  </div>
+</template>
diff --git a/web/src/components/LoadingOverlay/index.ts b/web/src/components/LoadingOverlay/index.ts
index 5b92de2b9..c404599ac 100644
--- a/web/src/components/LoadingOverlay/index.ts
+++ b/web/src/components/LoadingOverlay/index.ts
@@ -1,3 +1,3 @@
-import LoadingOverlay from "./LoadingOverlay.vue";
-
-export default LoadingOverlay;
+import LoadingOverlay from './LoadingOverlay.vue';
+
+export default LoadingOverlay;
diff --git a/web/src/components/MobileMenu/MobileMenu.vue b/web/src/components/MobileMenu/MobileMenu.vue
index db83a162c..3429387d0 100644
--- a/web/src/components/MobileMenu/MobileMenu.vue
+++ b/web/src/components/MobileMenu/MobileMenu.vue
@@ -1,57 +1,47 @@
 <script setup lang="ts">
-import "@/assets/css/vendors/simplebar.css";
-import "@/assets/css/components/mobile-menu.css";
-import { useRoute, useRouter } from "vue-router";
-import { twMerge } from "tailwind-merge";
-import logoUrl from "@/assets/images/logo.svg";
-import Lucide from "@/components/Base/Lucide";
-import { useMenuStore } from "@/stores/menu";
-import { useThemeStore } from "@/stores/theme";
-import {
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./mobile-menu";
-import { watch, reactive, computed, onMounted, ref } from "vue";
-import SimpleBar from "simplebar";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/vendors/simplebar.css';
+  import '@/assets/css/components/mobile-menu.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import { twMerge } from 'tailwind-merge';
+  import logoUrl from '@/assets/images/logo.svg';
+  import Lucide from '@/components/Base/Lucide';
+  import { useMenuStore } from '@/stores/menu';
+  import { useThemeStore } from '@/stores/theme';
+  import { type FormattedMenu, nestedMenu, linkTo, enter, leave } from './mobile-menu';
+  import { watch, reactive, computed, onMounted, ref } from 'vue';
+  import SimpleBar from 'simplebar';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+  const { t } = useI18n();
 
-const route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const themeStore = useThemeStore();
-const menuStore = useMenuStore();
-const menu = computed(() =>
-  nestedMenu(menuStore.menu(themeStore.theme.layout), route)
-);
+  const route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const themeStore = useThemeStore();
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu(themeStore.theme.layout), route));
 
-const activeMobileMenu = ref(false);
-const setActiveMobileMenu = (active: boolean) => {
-  activeMobileMenu.value = active;
-};
+  const activeMobileMenu = ref(false);
+  const setActiveMobileMenu = (active: boolean) => {
+    activeMobileMenu.value = active;
+  };
 
-const scrollableRef = ref<HTMLDivElement>();
+  const scrollableRef = ref<HTMLDivElement>();
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-onMounted(() => {
-  if (scrollableRef.value) {
-    new SimpleBar(scrollableRef.value);
-  }
+  onMounted(() => {
+    if (scrollableRef.value) {
+      new SimpleBar(scrollableRef.value);
+    }
 
-  setFormattedMenu(menu.value);
-});
+    setFormattedMenu(menu.value);
+  });
 </script>
 
 <template>
@@ -66,11 +56,7 @@ onMounted(() => {
   >
     <div class="h-[70px] px-3 sm:px-8 flex items-center">
       <a href="" class="flex mr-auto">
-        <img
-          alt="DCSLab"
-          class="w-6"
-          :src="logoUrl"
-        />
+        <img alt="DCSLab" class="w-6" :src="logoUrl" />
       </a>
       <a href="#" @click="(e) => e.preventDefault()">
         <Lucide
@@ -120,8 +106,8 @@ onMounted(() => {
           <li v-else>
             <a
               :href="
-                menu.subMenu 
-                  ? '#' 
+                menu.subMenu
+                  ? '#'
                   : ((pageName: string | undefined) => {
                       try {
                         return router.resolve({
@@ -135,7 +121,7 @@ onMounted(() => {
               @click="
                 (event) => {
                   event.preventDefault();
-                  linkTo(menu, router, setActiveMobileMenu);
+                  linkTo(menu, formattedMenu, router, setActiveMobileMenu);
                   setFormattedMenu([...formattedMenu]);
                 }
               "
@@ -146,30 +132,18 @@ onMounted(() => {
               </div>
               <div class="menu__title">
                 {{ t(menu.title) }}
-                <div
-                  v-if="menu.subMenu"
-                  :class="[
-                    'menu__sub-icon',
-                    menu.activeDropdown && 'transform rotate-180',
-                  ]"
-                >
+                <div v-if="menu.subMenu" :class="['menu__sub-icon', menu.activeDropdown && 'transform rotate-180']">
                   <Lucide icon="ChevronDown" />
                 </div>
               </div>
             </a>
             <Transition @enter="enter" @leave="leave">
-              <ul
-                v-if="menu.subMenu && menu.activeDropdown"
-                :class="{ 'menu__sub-open': menu.activeDropdown }"
-              >
-                <li
-                  v-for="(subMenu, subMenuKey) in menu.subMenu"
-                  :key="subMenuKey"
-                >
+              <ul v-if="menu.subMenu && menu.activeDropdown" :class="{ 'menu__sub-open': menu.activeDropdown }">
+                <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                   <a
                     :href="
-                      subMenu.subMenu 
-                        ? '#' 
+                      subMenu.subMenu
+                        ? '#'
                         : ((pageName: string | undefined) => {
                             try {
                               return router.resolve({
@@ -183,7 +157,7 @@ onMounted(() => {
                     @click="
                       (event) => {
                         event.preventDefault();
-                        linkTo(subMenu, router, setActiveMobileMenu);
+                        linkTo(subMenu, menu.subMenu ?? [], router, setActiveMobileMenu);
                         setFormattedMenu([...formattedMenu]);
                       }
                     "
@@ -196,10 +170,7 @@ onMounted(() => {
                       {{ t(subMenu.title) }}
                       <div
                         v-if="subMenu.subMenu"
-                        :class="[
-                          'menu__sub-icon',
-                          subMenu.activeDropdown && 'transform rotate-180',
-                        ]"
+                        :class="['menu__sub-icon', subMenu.activeDropdown && 'transform rotate-180']"
                       >
                         <Lucide icon="ChevronDown" />
                       </div>
@@ -210,14 +181,11 @@ onMounted(() => {
                       v-if="subMenu.subMenu && subMenu.activeDropdown"
                       :class="{ 'menu__sub-open': subMenu.activeDropdown }"
                     >
-                      <li
-                        v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu"
-                        :key="lastSubMenuKey"
-                      >
+                      <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                         <a
                           :href="
-                            lastSubMenu.subMenu 
-                              ? '#' 
+                            lastSubMenu.subMenu
+                              ? '#'
                               : ((pageName: string | undefined) => {
                                   try {
                                     return router.resolve({
@@ -231,18 +199,18 @@ onMounted(() => {
                           @click="
                             (event) => {
                               event.preventDefault();
-                              linkTo(lastSubMenu, router, setActiveMobileMenu);
+                              linkTo(lastSubMenu, subMenu.subMenu ?? [], router, setActiveMobileMenu);
                               setFormattedMenu([...formattedMenu]);
                             }
                           "
-                          :class="[
-                            lastSubMenu.active ? 'menu menu--active' : 'menu',
-                          ]"
+                          :class="[lastSubMenu.active ? 'menu menu--active' : 'menu']"
                         >
                           <div class="menu__icon">
                             <Lucide :icon="lastSubMenu.icon" />
                           </div>
-                          <div class="menu__title">{{ t(lastSubMenu.title) }}</div>
+                          <div class="menu__title">
+                            {{ t(lastSubMenu.title) }}
+                          </div>
                         </a>
                       </li>
                     </ul>
diff --git a/web/src/components/MobileMenu/index.ts b/web/src/components/MobileMenu/index.ts
index 350d75a60..bf3c7861d 100644
--- a/web/src/components/MobileMenu/index.ts
+++ b/web/src/components/MobileMenu/index.ts
@@ -1,3 +1,3 @@
-import MobileMenu from "./MobileMenu.vue";
+import MobileMenu from './MobileMenu.vue';
 
 export default MobileMenu;
diff --git a/web/src/components/MobileMenu/mobile-menu.ts b/web/src/components/MobileMenu/mobile-menu.ts
index 46c11fb15..7de4d48a4 100644
--- a/web/src/components/MobileMenu/mobile-menu.ts
+++ b/web/src/components/MobileMenu/mobile-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { slideUp, slideDown } from "@/utils/helper";
-import { type Menu } from "@/stores/menu";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { slideUp, slideDown } from '@/utils/helper';
+import { type Menu } from '@/stores/menu';
 
 export interface FormattedMenu extends Menu {
   active?: boolean;
@@ -17,10 +17,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -31,10 +29,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -43,10 +41,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -55,9 +51,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
@@ -70,13 +64,31 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
   return formattedMenu;
 };
 
-const linkTo = (
-  menu: FormattedMenu,
-  router: Router,
-  setActiveMobileMenu: (active: boolean) => void
-) => {
+const closeDropdown = (menu: FormattedMenu): void => {
+  menu.activeDropdown = false;
+
   if (menu.subMenu) {
-    menu.activeDropdown = !menu.activeDropdown;
+    menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+  }
+};
+
+const closeSiblingDropdowns = (menus: Array<FormattedMenu | 'divider'>, currentMenu: FormattedMenu): void => {
+  menus.forEach((menu) => {
+    if (menu !== 'divider' && menu !== currentMenu) {
+      closeDropdown(menu);
+    }
+  });
+};
+
+const linkTo = (menu: FormattedMenu, menus: Array<FormattedMenu | 'divider'>, router: Router, setActiveMobileMenu: (active: boolean) => void) => {
+  if (menu.subMenu) {
+    const nextActiveDropdown = !menu.activeDropdown;
+    closeSiblingDropdowns(menus, menu);
+    menu.activeDropdown = nextActiveDropdown;
+
+    if (!nextActiveDropdown) {
+      menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+    }
   } else {
     if (menu.pageName !== undefined) {
       setActiveMobileMenu(false);
diff --git a/web/src/components/PrepaidExpense/PrepaidExpenseImagesField.vue b/web/src/components/PrepaidExpense/PrepaidExpenseImagesField.vue
new file mode 100644
index 000000000..ebe881a01
--- /dev/null
+++ b/web/src/components/PrepaidExpense/PrepaidExpenseImagesField.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Dialog from '@/components/Base/Headless/Dialog';
+import PrepaidExpenseImageService from '@/services/PrepaidExpenseImageService';
+import type { PrepaidExpenseImage } from '@/types/models/PrepaidExpenseImage';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+
+interface ImageHash {
+  hash: string;
+  is_main: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: ImageHash[];
+    existingImages?: PrepaidExpenseImage[];
+    deleteImageIds?: Array<number | string>;
+  }>(),
+  {
+    modelValue: () => [],
+    existingImages: () => [],
+    deleteImageIds: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ImageHash[]): void;
+  (e: 'update:existingImages', value: PrepaidExpenseImage[]): void;
+  (e: 'update:deleteImageIds', value: Array<number | string>): void;
+}>();
+
+const { t } = useI18n();
+const prepaidExpenseImageService = new PrepaidExpenseImageService();
+
+const imageHashes = computed({
+  get: () => props.modelValue,
+  set: (value: ImageHash[]) => emit('update:modelValue', value),
+});
+
+const existingImages = computed({
+  get: () => props.existingImages ?? [],
+  set: (value: PrepaidExpenseImage[]) => emit('update:existingImages', value),
+});
+
+const deleteImageIds = computed({
+  get: () => props.deleteImageIds ?? [],
+  set: (value: Array<number | string>) => emit('update:deleteImageIds', value),
+});
+
+const newImages = ref<PrepaidExpenseImage[]>([]);
+const isUploading = ref(false);
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const previewImageUrl = ref<string | null>(null);
+const isPreviewOpen = ref(false);
+
+const showCameraModal = ref(false);
+const videoRef = ref<HTMLVideoElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const stream = ref<MediaStream | null>(null);
+
+const isImageMain = (image: PrepaidExpenseImage): boolean => {
+  const item = imageHashes.value.find((hash) => hash.hash === image.hash);
+  return item ? item.is_main : false;
+};
+
+const handleUpload = async (file: File) => {
+  isUploading.value = true;
+
+  try {
+    const uploadResponse: ServiceResponse<PrepaidExpenseImage | null> = await prepaidExpenseImageService.upload(file);
+
+    if (!uploadResponse.success || !uploadResponse.data) {
+      return;
+    }
+
+    newImages.value = [...newImages.value, uploadResponse.data];
+
+    const hashes = [...imageHashes.value];
+    hashes.push({
+      hash: uploadResponse.data.hash,
+      is_main: hashes.length === 0,
+    });
+
+    imageHashes.value = hashes;
+  } finally {
+    isUploading.value = false;
+  }
+};
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+
+  target.value = '';
+};
+
+const onDrop = (event: DragEvent) => {
+  const files = event.dataTransfer?.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+};
+
+const openBrowse = () => {
+  fileInput.value?.click();
+};
+
+const openPreview = (url: string | undefined | null) => {
+  if (!url) {
+    return;
+  }
+
+  previewImageUrl.value = url;
+  isPreviewOpen.value = true;
+};
+
+const closePreview = () => {
+  isPreviewOpen.value = false;
+  previewImageUrl.value = null;
+};
+
+const removeExistingImage = (index: number) => {
+  const images = [...existingImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  const ids = [...deleteImageIds.value];
+  if (!ids.includes(image.id)) {
+    ids.push(image.id);
+  }
+  deleteImageIds.value = ids;
+
+  images.splice(index, 1);
+  existingImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const removeNewImage = (index: number) => {
+  const images = [...newImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  images.splice(index, 1);
+  newImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const setMainImage = (image: PrepaidExpenseImage) => {
+  imageHashes.value = imageHashes.value.map((hash) => ({
+    hash: hash.hash,
+    is_main: hash.hash === image.hash,
+  }));
+
+  existingImages.value = existingImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+
+  newImages.value = newImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+};
+
+const startCamera = async () => {
+  showCameraModal.value = true;
+
+  try {
+    stream.value = await navigator.mediaDevices.getUserMedia({ video: true });
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream.value;
+    }
+  } catch (error) {
+    console.error('Error accessing camera:', error);
+  }
+};
+
+const stopCamera = () => {
+  if (stream.value) {
+    stream.value.getTracks().forEach((track) => track.stop());
+    stream.value = null;
+  }
+
+  showCameraModal.value = false;
+};
+
+const capturePhoto = () => {
+  if (!videoRef.value || !canvasRef.value) {
+    return;
+  }
+
+  const video = videoRef.value;
+  const canvas = canvasRef.value;
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+
+    const file = new File([blob], `prepaid_expense_${Date.now()}.jpg`, { type: 'image/jpeg' });
+    handleUpload(file);
+    stopCamera();
+  }, 'image/jpeg');
+};
+
+onUnmounted(() => {
+  stopCamera();
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-4">
+    <div class="col-span-12 sm:col-span-4 lg:col-span-3">
+      <div class="flex flex-col gap-4">
+        <div
+          class="border-2 border-dashed border-slate-300 dark:border-darkmode-400 rounded-md p-6 flex flex-col justify-center items-center cursor-pointer hover:bg-slate-50 dark:hover:bg-darkmode-600/50 transition-colors"
+          @dragover.prevent
+          @drop.prevent="onDrop"
+          @click="openBrowse"
+        >
+          <Lucide icon="UploadCloud" class="w-10 h-10 text-slate-400 mb-2" />
+          <div class="text-slate-500 text-center">
+            <span class="font-medium text-primary">{{ t('components.file-upload.browse') }}</span>
+            {{ t('components.file-upload.or_drag_drop') }}
+          </div>
+          <div class="text-slate-400 text-xs mt-1">
+            JPG, PNG
+          </div>
+          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFileChange" />
+        </div>
+
+        <div class="flex gap-2">
+          <Button type="button" variant="outline-primary" class="w-full" @click="startCamera">
+            <Lucide icon="Camera" class="w-4 h-4 mr-2" />
+            {{ t('components.file-upload.camera') }}
+          </Button>
+        </div>
+
+        <div v-if="isUploading" class="flex justify-center p-2">
+          <Lucide icon="Loader2" class="w-6 h-6 animate-spin text-primary" />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-span-12 sm:col-span-8 lg:col-span-9">
+      <div
+        v-if="existingImages.length + newImages.length > 0"
+        class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"
+      >
+        <div
+          v-for="(image, index) in existingImages"
+          :key="`existing-${image.id}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeExistingImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+
+        <div
+          v-for="(image, index) in newImages"
+          :key="`new-${image.hash}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeNewImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="h-full flex items-center justify-center text-slate-400 border-2 border-dashed rounded-md bg-slate-50 dark:bg-darkmode-600/20 min-h-[150px]"
+      >
+        {{ t('components.data-list.data_not_found') }}
+      </div>
+    </div>
+  </div>
+
+  <Dialog :open="isPreviewOpen" size="lg" @close="closePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          Preview
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description class="p-0">
+        <div class="bg-slate-100 dark:bg-darkmode-800 flex items-center justify-center">
+          <img v-if="previewImageUrl" :src="previewImageUrl" class="max-h-[70vh] w-auto object-contain" />
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" @click="closePreview">
+          {{ t('components.buttons.close') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="showCameraModal" @close="stopCamera">
+    <Dialog.Panel>
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          {{ t('components.file-upload.camera') }}
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description>
+        <div class="relative w-full aspect-video bg-black rounded overflow-hidden">
+          <video ref="videoRef" autoplay playsinline class="w-full h-full object-cover"></video>
+          <canvas ref="canvasRef" class="hidden"></canvas>
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" class="w-24 mr-1" @click="stopCamera">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="primary" class="w-24" @click="capturePhoto">
+          {{ t('components.file-upload.capture') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/components/PrepaidIncome/PrepaidIncomeImagesField.vue b/web/src/components/PrepaidIncome/PrepaidIncomeImagesField.vue
new file mode 100644
index 000000000..f4adfdddb
--- /dev/null
+++ b/web/src/components/PrepaidIncome/PrepaidIncomeImagesField.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Dialog from '@/components/Base/Headless/Dialog';
+import PrepaidIncomeImageService from '@/services/PrepaidIncomeImageService';
+import type { PrepaidIncomeImage } from '@/types/models/PrepaidIncomeImage';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+
+interface ImageHash {
+  hash: string;
+  is_main: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: ImageHash[];
+    existingImages?: PrepaidIncomeImage[];
+    deleteImageIds?: Array<number | string>;
+  }>(),
+  {
+    modelValue: () => [],
+    existingImages: () => [],
+    deleteImageIds: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ImageHash[]): void;
+  (e: 'update:existingImages', value: PrepaidIncomeImage[]): void;
+  (e: 'update:deleteImageIds', value: Array<number | string>): void;
+}>();
+
+const { t } = useI18n();
+const prepaidIncomeImageService = new PrepaidIncomeImageService();
+
+const imageHashes = computed({
+  get: () => props.modelValue,
+  set: (value: ImageHash[]) => emit('update:modelValue', value),
+});
+
+const existingImages = computed({
+  get: () => props.existingImages ?? [],
+  set: (value: PrepaidIncomeImage[]) => emit('update:existingImages', value),
+});
+
+const deleteImageIds = computed({
+  get: () => props.deleteImageIds ?? [],
+  set: (value: Array<number | string>) => emit('update:deleteImageIds', value),
+});
+
+const newImages = ref<PrepaidIncomeImage[]>([]);
+const isUploading = ref(false);
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const previewImageUrl = ref<string | null>(null);
+const isPreviewOpen = ref(false);
+
+const showCameraModal = ref(false);
+const videoRef = ref<HTMLVideoElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const stream = ref<MediaStream | null>(null);
+
+const isImageMain = (image: PrepaidIncomeImage): boolean => {
+  const item = imageHashes.value.find((hash) => hash.hash === image.hash);
+  return item ? item.is_main : false;
+};
+
+const handleUpload = async (file: File) => {
+  isUploading.value = true;
+
+  try {
+    const uploadResponse: ServiceResponse<PrepaidIncomeImage | null> = await prepaidIncomeImageService.upload(file);
+
+    if (!uploadResponse.success || !uploadResponse.data) {
+      return;
+    }
+
+    newImages.value = [...newImages.value, uploadResponse.data];
+
+    const hashes = [...imageHashes.value];
+    hashes.push({
+      hash: uploadResponse.data.hash,
+      is_main: hashes.length === 0,
+    });
+
+    imageHashes.value = hashes;
+  } finally {
+    isUploading.value = false;
+  }
+};
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+
+  target.value = '';
+};
+
+const onDrop = (event: DragEvent) => {
+  const files = event.dataTransfer?.files;
+
+  if (files && files.length > 0) {
+    handleUpload(files[0]);
+  }
+};
+
+const openBrowse = () => {
+  fileInput.value?.click();
+};
+
+const openPreview = (url: string | undefined | null) => {
+  if (!url) {
+    return;
+  }
+
+  previewImageUrl.value = url;
+  isPreviewOpen.value = true;
+};
+
+const closePreview = () => {
+  isPreviewOpen.value = false;
+  previewImageUrl.value = null;
+};
+
+const removeExistingImage = (index: number) => {
+  const images = [...existingImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  const ids = [...deleteImageIds.value];
+  if (!ids.includes(image.id)) {
+    ids.push(image.id);
+  }
+  deleteImageIds.value = ids;
+
+  images.splice(index, 1);
+  existingImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const removeNewImage = (index: number) => {
+  const images = [...newImages.value];
+  const image = images[index];
+
+  if (!image) {
+    return;
+  }
+
+  images.splice(index, 1);
+  newImages.value = images;
+
+  const hashes = [...imageHashes.value];
+  const hashIndex = hashes.findIndex((hash) => hash.hash === image.hash);
+
+  if (hashIndex !== -1) {
+    hashes.splice(hashIndex, 1);
+  }
+
+  if (hashes.length > 0 && !hashes.some((hash) => hash.is_main)) {
+    hashes[0].is_main = true;
+  }
+
+  imageHashes.value = hashes;
+};
+
+const setMainImage = (image: PrepaidIncomeImage) => {
+  imageHashes.value = imageHashes.value.map((hash) => ({
+    hash: hash.hash,
+    is_main: hash.hash === image.hash,
+  }));
+
+  existingImages.value = existingImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+
+  newImages.value = newImages.value.map((item) => ({
+    ...item,
+    is_main: item.hash === image.hash,
+  }));
+};
+
+const startCamera = async () => {
+  showCameraModal.value = true;
+
+  try {
+    stream.value = await navigator.mediaDevices.getUserMedia({ video: true });
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream.value;
+    }
+  } catch (error) {
+    console.error('Error accessing camera:', error);
+  }
+};
+
+const stopCamera = () => {
+  if (stream.value) {
+    stream.value.getTracks().forEach((track) => track.stop());
+    stream.value = null;
+  }
+
+  showCameraModal.value = false;
+};
+
+const capturePhoto = () => {
+  if (!videoRef.value || !canvasRef.value) {
+    return;
+  }
+
+  const video = videoRef.value;
+  const canvas = canvasRef.value;
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+
+    const file = new File([blob], `prepaid_income_${Date.now()}.jpg`, { type: 'image/jpeg' });
+    handleUpload(file);
+    stopCamera();
+  }, 'image/jpeg');
+};
+
+onUnmounted(() => {
+  stopCamera();
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-4">
+    <div class="col-span-12 sm:col-span-4 lg:col-span-3">
+      <div class="flex flex-col gap-4">
+        <div
+          class="border-2 border-dashed border-slate-300 dark:border-darkmode-400 rounded-md p-6 flex flex-col justify-center items-center cursor-pointer hover:bg-slate-50 dark:hover:bg-darkmode-600/50 transition-colors"
+          @dragover.prevent
+          @drop.prevent="onDrop"
+          @click="openBrowse"
+        >
+          <Lucide icon="UploadCloud" class="w-10 h-10 text-slate-400 mb-2" />
+          <div class="text-slate-500 text-center">
+            <span class="font-medium text-primary">{{ t('components.file-upload.browse') }}</span>
+            {{ t('components.file-upload.or_drag_drop') }}
+          </div>
+          <div class="text-slate-400 text-xs mt-1">
+            JPG, PNG
+          </div>
+          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFileChange" />
+        </div>
+
+        <div class="flex gap-2">
+          <Button type="button" variant="outline-primary" class="w-full" @click="startCamera">
+            <Lucide icon="Camera" class="w-4 h-4 mr-2" />
+            {{ t('components.file-upload.camera') }}
+          </Button>
+        </div>
+
+        <div v-if="isUploading" class="flex justify-center p-2">
+          <Lucide icon="Loader2" class="w-6 h-6 animate-spin text-primary" />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-span-12 sm:col-span-8 lg:col-span-9">
+      <div
+        v-if="existingImages.length + newImages.length > 0"
+        class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"
+      >
+        <div
+          v-for="(image, index) in existingImages"
+          :key="`existing-${image.id}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeExistingImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+
+        <div
+          v-for="(image, index) in newImages"
+          :key="`new-${image.hash}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeNewImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="h-full flex items-center justify-center text-slate-400 border-2 border-dashed rounded-md bg-slate-50 dark:bg-darkmode-600/20 min-h-[150px]"
+      >
+        {{ t('components.data-list.data_not_found') }}
+      </div>
+    </div>
+  </div>
+
+  <Dialog :open="isPreviewOpen" size="lg" @close="closePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          Preview
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description class="p-0">
+        <div class="bg-slate-100 dark:bg-darkmode-800 flex items-center justify-center">
+          <img v-if="previewImageUrl" :src="previewImageUrl" class="max-h-[70vh] w-auto object-contain" />
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" @click="closePreview">
+          {{ t('components.buttons.close') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="showCameraModal" @close="stopCamera">
+    <Dialog.Panel>
+      <Dialog.Title>
+        <h2 class="mr-auto text-base font-medium">
+          {{ t('components.file-upload.camera') }}
+        </h2>
+      </Dialog.Title>
+      <Dialog.Description>
+        <div class="relative w-full aspect-video bg-black rounded overflow-hidden">
+          <video ref="videoRef" autoplay playsinline class="w-full h-full object-cover"></video>
+          <canvas ref="canvasRef" class="hidden"></canvas>
+        </div>
+      </Dialog.Description>
+      <Dialog.Footer>
+        <Button type="button" variant="outline-secondary" class="w-24 mr-1" @click="stopCamera">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="primary" class="w-24" @click="capturePhoto">
+          {{ t('components.file-upload.capture') }}
+        </Button>
+      </Dialog.Footer>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/components/Product/ProductImagePreview.vue b/web/src/components/Product/ProductImagePreview.vue
new file mode 100644
index 000000000..b9355e2ed
--- /dev/null
+++ b/web/src/components/Product/ProductImagePreview.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+
+type Props = {
+  imageUrl?: string | null;
+  wrapperClass?: string;
+  imageClass?: string;
+  iconClass?: string;
+  previewTitle?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  imageUrl: null,
+  wrapperClass:
+    'w-14 h-14 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in',
+  imageClass: 'w-full h-full object-cover',
+  iconClass: 'w-6 h-6 text-slate-400',
+  previewTitle: '',
+});
+
+const { t } = useI18n();
+
+const isPreviewOpen = ref(false);
+
+const hasImage = computed(() => !!props.imageUrl);
+const resolvedPreviewTitle = computed(() => props.previewTitle || t('views.product.fields.images'));
+
+const openPreview = () => {
+  if (!hasImage.value) return;
+  isPreviewOpen.value = true;
+};
+
+const closePreview = () => {
+  isPreviewOpen.value = false;
+};
+</script>
+
+<template>
+  <div :class="wrapperClass" @click="openPreview">
+    <img v-if="hasImage" :src="imageUrl || ''" :class="imageClass" />
+    <Lucide v-else icon="ImageOff" :class="iconClass" />
+  </div>
+  <Dialog :open="isPreviewOpen" size="lg" @close="closePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <div class="flex items-center justify-between w-full">
+          <div class="font-medium">
+            {{ resolvedPreviewTitle }}
+          </div>
+          <Button type="button" variant="outline-secondary" size="sm" @click="closePreview">
+            <Lucide icon="X" class="w-4 h-4" />
+          </Button>
+        </div>
+      </Dialog.Title>
+      <Dialog.Description class="bg-slate-900 flex items-center justify-center">
+        <img v-if="hasImage" :src="imageUrl || ''" class="max-h-[80vh] max-w-full object-contain" />
+      </Dialog.Description>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/components/Product/ProductImagesField.vue b/web/src/components/Product/ProductImagesField.vue
new file mode 100644
index 000000000..230e01667
--- /dev/null
+++ b/web/src/components/Product/ProductImagesField.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FormImageUpload from '@/components/Base/Form/FormImageUpload.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Dialog from '@/components/Base/Headless/Dialog';
+import { ProductImage } from '@/types/models/ProductImage';
+
+interface ImageHash {
+  hash: string;
+  is_main: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: ImageHash[];
+    existingImages?: ProductImage[];
+    deleteImageIds?: Array<number | string>;
+  }>(),
+  {
+    modelValue: () => [],
+    existingImages: () => [],
+    deleteImageIds: () => [],
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ImageHash[]): void;
+  (e: 'update:existingImages', value: ProductImage[]): void;
+  (e: 'update:deleteImageIds', value: Array<number | string>): void;
+}>();
+
+const { t } = useI18n();
+
+const imageHashes = computed({
+  get: () => props.modelValue,
+  set: (value: ImageHash[]) => emit('update:modelValue', value),
+});
+
+const existingImages = computed({
+  get: () => props.existingImages ?? [],
+  set: (value: ProductImage[]) => emit('update:existingImages', value),
+});
+
+const deleteImageIds = computed({
+  get: () => props.deleteImageIds ?? [],
+  set: (value: Array<number | string>) => emit('update:deleteImageIds', value),
+});
+
+const newImages = ref<ProductImage[]>([]);
+const previewImageUrl = ref<string | null>(null);
+const isPreviewOpen = ref(false);
+
+const isImageMain = (image: ProductImage): boolean => {
+  const item = imageHashes.value.find((h) => h.hash === image.hash);
+  return item ? item.is_main : false;
+};
+
+const handleImageUploaded = (image: ProductImage) => {
+  newImages.value.push(image);
+
+  const hashes = [...imageHashes.value];
+  hashes.push({
+    hash: image.hash,
+    is_main: hashes.length === 0,
+  });
+
+  imageHashes.value = hashes;
+};
+
+const openPreview = (url: string | undefined | null) => {
+  if (!url) {
+    return;
+  }
+
+  previewImageUrl.value = url;
+  isPreviewOpen.value = true;
+};
+
+const closePreview = () => {
+  isPreviewOpen.value = false;
+  previewImageUrl.value = null;
+};
+
+const removeExistingImage = (index: number) => {
+  const images = [...existingImages.value];
+  const image = images[index];
+
+  if (image) {
+    const ids = [...deleteImageIds.value];
+    if (!ids.includes(image.id)) {
+      ids.push(image.id);
+    }
+    deleteImageIds.value = ids;
+
+    images.splice(index, 1);
+    existingImages.value = images;
+
+    const hashes = [...imageHashes.value];
+    const hashIndex = hashes.findIndex((h) => h.hash === image.hash);
+
+    if (hashIndex !== -1) {
+      hashes.splice(hashIndex, 1);
+    }
+
+    if (hashes.length > 0 && !hashes.some((img) => img.is_main)) {
+      hashes[0].is_main = true;
+    }
+
+    imageHashes.value = hashes;
+  }
+};
+
+const removeNewImage = (index: number) => {
+  const images = [...newImages.value];
+  const image = images[index];
+
+  if (image) {
+    images.splice(index, 1);
+    newImages.value = images;
+
+    const hashes = [...imageHashes.value];
+    const hashIndex = hashes.findIndex((h) => h.hash === image.hash);
+
+    if (hashIndex !== -1) {
+      hashes.splice(hashIndex, 1);
+    }
+
+    if (hashes.length > 0 && !hashes.some((img) => img.is_main)) {
+      hashes[0].is_main = true;
+    }
+
+    imageHashes.value = hashes;
+  }
+};
+
+const setMainImage = (image: ProductImage) => {
+  const hashes = imageHashes.value.map((img) => ({
+    hash: img.hash,
+    is_main: img.hash === image.hash,
+  }));
+
+  imageHashes.value = hashes;
+
+  const updatedExisting = existingImages.value.map((img) => ({
+    ...img,
+    is_main: img.hash === image.hash,
+  }));
+  existingImages.value = updatedExisting;
+
+  const updatedNew = newImages.value.map((img) => ({
+    ...img,
+    is_main: img.hash === image.hash,
+  }));
+  newImages.value = updatedNew;
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-4">
+    <div class="col-span-12 sm:col-span-4 lg:col-span-3">
+      <FormImageUpload @uploaded="handleImageUploaded" />
+    </div>
+
+    <div class="col-span-12 sm:col-span-8 lg:col-span-9">
+      <div
+        v-if="existingImages.length + newImages.length > 0"
+        class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"
+      >
+        <div
+          v-for="(image, index) in existingImages"
+          :key="`existing-${image.id}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeExistingImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+
+        <div
+          v-for="(image, index) in newImages"
+          :key="`new-${image.hash}`"
+          class="relative group border rounded-md overflow-hidden aspect-square bg-slate-100 dark:bg-darkmode-600 cursor-zoom-in"
+          @click="openPreview(image.url)"
+        >
+          <img :src="image.url" class="w-full h-full object-cover" />
+
+          <div
+            class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-center items-center gap-2"
+          >
+            <Button
+              type="button"
+              variant="danger"
+              size="sm"
+              class="w-8 h-8 rounded-full p-0"
+              @click.stop="removeNewImage(index)"
+            >
+              <Lucide icon="Trash2" class="w-4 h-4" />
+            </Button>
+
+            <Button
+              type="button"
+              :variant="isImageMain(image) ? 'primary' : 'secondary'"
+              size="sm"
+              class="text-xs px-2 py-1"
+              @click.stop="setMainImage(image)"
+            >
+              {{ isImageMain(image) ? 'Main' : 'Set Main' }}
+            </Button>
+          </div>
+
+          <div
+            v-if="isImageMain(image)"
+            class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded shadow-sm"
+          >
+            Main
+          </div>
+        </div>
+      </div>
+      <div
+        v-else
+        class="h-full flex items-center justify-center text-slate-400 border-2 border-dashed rounded-md bg-slate-50 dark:bg-darkmode-600/20 min-h-[150px]"
+      >
+        {{ t('components.data-list.data_not_found') }}
+      </div>
+    </div>
+  </div>
+
+  <Dialog :open="isPreviewOpen" size="lg" @close="closePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <div class="flex items-center justify-between w-full">
+          <div class="font-medium">
+            {{ t('views.product.fields.images') }}
+          </div>
+          <Button type="button" variant="outline-secondary" size="sm" @click="closePreview">
+            <Lucide icon="X" class="w-4 h-4" />
+          </Button>
+        </div>
+      </Dialog.Title>
+      <Dialog.Description class="bg-slate-900 flex items-center justify-center">
+        <img
+          v-if="previewImageUrl"
+          :src="previewImageUrl"
+          class="max-h-[80vh] max-w-full object-contain"
+        />
+      </Dialog.Description>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/components/Product/ProductUnitPickerDialog.vue b/web/src/components/Product/ProductUnitPickerDialog.vue
new file mode 100644
index 000000000..51387cb93
--- /dev/null
+++ b/web/src/components/Product/ProductUnitPickerDialog.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { FormInput, FormLabel } from '@/components/Base/Form';
+import { formatCurrency } from '@/utils/helper';
+import ProductImagePreview from './ProductImagePreview.vue';
+
+type ProductUnitPickerColumn = {
+  key: string;
+  label: string;
+  align?: 'left' | 'right';
+  formatter?: 'plain' | 'number' | 'currency';
+};
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+
+type ProductUnitPickerOption = {
+  product_name: string;
+  product_image_url?: string | null;
+  product_unit_code?: string | null;
+  product_code?: string | null;
+  [key: string]: unknown;
+};
+
+type Props = {
+  open: boolean;
+  title: string;
+  searchText: string;
+  isSearching: boolean;
+  options: ProductUnitPickerOption[];
+  columns: ProductUnitPickerColumn[];
+  searchDisabled?: boolean;
+  productCodeKey?: string;
+  panelClass?: string;
+  size?: DialogSize;
+  searchInputId?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  searchDisabled: false,
+  productCodeKey: 'product_unit_code',
+  panelClass: '',
+  size: 'xl',
+  searchInputId: 'product-unit-search-input',
+});
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'search'): void;
+  (e: 'after-leave'): void;
+  (e: 'update:searchText', value: string): void;
+  (e: 'select', value: ProductUnitPickerOption): void;
+}>();
+
+const { t } = useI18n();
+
+const emptyColspan = computed(() => props.columns.length + 3);
+
+const getProductCode = (option: ProductUnitPickerOption) => {
+  const value = option[props.productCodeKey];
+  return typeof value === 'string' ? value : '';
+};
+
+const getProductLabel = (option: ProductUnitPickerOption) => {
+  const code = getProductCode(option);
+
+  if (code) {
+    return `[${code}] ${option.product_name}`;
+  }
+
+  return option.product_name;
+};
+
+const getCellClass = (align?: 'left' | 'right') =>
+  align === 'right' ? 'px-3 py-2 text-right' : 'px-3 py-2 text-left';
+
+const formatValue = (value: unknown, formatter?: 'plain' | 'number' | 'currency') => {
+  if (value === undefined || value === null || value === '') {
+    return '-';
+  }
+
+  if (formatter === 'currency' || formatter === 'number') {
+    return formatCurrency(Number(value));
+  }
+
+  return String(value);
+};
+</script>
+
+<template>
+  <Dialog :size="size" :open="open" @close="emit('close')" @after-leave="emit('after-leave')" @closed="emit('after-leave')">
+    <Dialog.Panel :class="panelClass">
+      <div class="p-5">
+        <div class="flex items-center justify-between mb-4">
+          <FormLabel>
+            {{ title }}
+          </FormLabel>
+          <button type="button" class="text-slate-500 hover:text-danger" @click="emit('close')">
+            <Lucide icon="X" class="w-4 h-4" />
+          </button>
+        </div>
+        <div class="flex items-center gap-2 mb-4">
+          <FormInput
+            :id="searchInputId"
+            :model-value="searchText"
+            type="text"
+            :placeholder="t('components.search-box.placeholder.search')"
+            @update:model-value="emit('update:searchText', String($event))"
+            @keyup.enter="emit('search')"
+          />
+          <Button type="button" variant="primary" class="shadow-md" tabindex="-1" :disabled="searchDisabled" @click="emit('search')">
+            <template v-if="isSearching">
+              <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+            </template>
+            <template v-else>
+              {{ t('components.buttons.search') }}
+            </template>
+          </Button>
+        </div>
+        <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+          <table class="min-w-full text-sm">
+            <thead class="bg-slate-100 dark:bg-darkmode-600">
+              <tr>
+                <th class="px-3 py-2 text-left">
+                  {{ t('views.product.table.cols.image') }}
+                </th>
+                <th class="px-3 py-2 text-left">
+                  {{ t('views.product.fields.name') }}
+                </th>
+                <th v-for="column in columns" :key="column.key" :class="getCellClass(column.align)">
+                  {{ column.label }}
+                </th>
+                <th class="px-3 py-2"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="options.length === 0">
+                <td :colspan="emptyColspan" class="px-3 py-4 text-center text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </td>
+              </tr>
+              <tr
+                v-for="(option, index) in options"
+                :key="`${option.product_unit_id ?? option.product_code ?? option.product_name}-${index}`"
+                class="border-t border-slate-200/60 dark:border-darkmode-400"
+              >
+                <td class="px-3 py-2">
+                  <ProductImagePreview
+                    :image-url="option.product_image_url"
+                    wrapper-class="w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                    icon-class="w-4 h-4 text-slate-400"
+                    :preview-title="option.product_name"
+                  />
+                </td>
+                <td class="px-3 py-2">
+                  {{ getProductLabel(option) }}
+                </td>
+                <td v-for="column in columns" :key="column.key" :class="getCellClass(column.align)">
+                  {{ formatValue(option[column.key], column.formatter) }}
+                </td>
+                <td class="px-3 py-2 text-right">
+                  <Button type="button" variant="primary" size="sm" @click="emit('select', option)">
+                    {{ t('components.buttons.select') }}
+                  </Button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/components/ProfileMenu/ProfileMenu.vue b/web/src/components/ProfileMenu/ProfileMenu.vue
index 07787d18e..b9a87bb7f 100644
--- a/web/src/components/ProfileMenu/ProfileMenu.vue
+++ b/web/src/components/ProfileMenu/ProfileMenu.vue
@@ -1,102 +1,102 @@
-<script setup lang="ts">
-import { toRef, onMounted, computed } from "vue";
-import { Menu } from "../Base/Headless";
-import { useUserContextStore } from '../../stores/user-context';
-import defaultProfilePic from "@/assets/images/def-user.png";
-import ProfileService from "@/services/ProfileService";
-import { UserProfile } from "@/types/models/UserProfile";
-import { useI18n } from "vue-i18n";
-import Lucide from "@/components/Base/Lucide";
-import { useDashboardStore } from "../../stores/dashboard";
-import axios from "../../axios";
-import { useRouter } from "vue-router";
-
-const { t } = useI18n();
-const router = useRouter();
-
-interface ProfileMenuProps {
-    visible: boolean,
-    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker',
-    layout?: "side-menu" | "simple-menu" | "top-menu",
-}
-
-const props = withDefaults(defineProps<ProfileMenuProps>(), {
-    visible: true,
-    theme: 'rubick',
-    layout: 'side-menu',
-});
-
-const profileServices = new ProfileService();
-
-const visible = toRef(props, 'visible');
-
-const userContextStore = useUserContextStore();
-const dashboardStore = useDashboardStore();
-
-const userContext = computed(() => userContextStore.userContext);
-
-const profilePicture = computed(() => {
-    let defaultPic = defaultProfilePic;
-
-    return defaultPic;
-});
-
-const profilePictureAlt = computed(() => {
-    let defaultPicAlt = 'DCSLab';
-
-    return defaultPicAlt;
-});
-
-onMounted(async () => {
-    let userprofile = await profileServices.readProfile();
-    if (userprofile.success) {
-        userContextStore.setUserContext(userprofile.data as UserProfile);
-    }
-});
-
-const logout = () => {
-  dashboardStore.toggleScreenMaskValue();
-
-  axios.post('/logout').then(() => {
-    sessionStorage.clear();
-    window.location.href = '/';
-  });
-}
-</script>
-
-<template>
-    <Menu v-if="visible">
-        <Menu.Button
-        class="block w-8 h-8 overflow-hidden rounded-full shadow-lg image-fit zoom-in intro-x"
-        >
-            <img
-            :alt="profilePictureAlt"
-            :src="profilePicture"
-            />
-        </Menu.Button>
-        <Menu.Items
-            class="w-56 mt-px relative bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white"
-        >
-            <Menu.Header class="font-normal">
-                <div class="font-medium">{{ userContext.name }}</div>
-                <div class="text-xs text-white/70 mt-0.5 dark:text-slate-500">
-                    {{ userContext.email }}
-                </div>
-            </Menu.Header>
-            <Menu.Divider class="bg-white/[0.08]" />
-            <Menu.Item class="hover:bg-white/5" @click="router.push({ name: 'side-menu-dashboard-profile' })">
-                <Lucide icon="User" class="w-4 h-4 mr-2" /> {{ t('components.profile-menu.profile_ddl.profile') }}
-            </Menu.Item>
-            <Menu.Item class="hover:bg-white/5">
-                <Lucide icon="Mail" class="w-4 h-4 mr-2" /> {{ t('components.profile-menu.profile_ddl.inbox') }}
-            </Menu.Item>
-            <Menu.Item class="hover:bg-white/5">
-                <Lucide icon="Activity" class="w-4 h-4 mr-2" /> {{ t('components.profile-menu.profile_ddl.activity') }}
-            </Menu.Item>
-            <Menu.Divider class="bg-white/[0.08]" />
-            <Menu.Item class="hover:bg-white/5" @click="logout">
-                <Lucide icon="ToggleRight" class="w-4 h-4 mr-2" /> {{ t('components.profile-menu.profile_ddl.logout') }}
-            </Menu.Item>
-        </Menu.Items>
-    </Menu>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { toRef, onMounted, computed } from 'vue';
+  import { Menu } from '../Base/Headless';
+  import { useUserContextStore } from '../../stores/user-context';
+  import defaultProfilePic from '@/assets/images/def-user.png';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { useI18n } from 'vue-i18n';
+  import Lucide from '@/components/Base/Lucide';
+  import { useDashboardStore } from '../../stores/dashboard';
+  import axios from '../../axios';
+  import { useRouter } from 'vue-router';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  interface ProfileMenuProps {
+    visible: boolean;
+    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker';
+    layout?: 'side-menu' | 'simple-menu' | 'top-menu';
+  }
+
+  const props = withDefaults(defineProps<ProfileMenuProps>(), {
+    visible: true,
+    theme: 'rubick',
+    layout: 'side-menu',
+  });
+
+  const profileServices = new ProfileService();
+
+  const visible = toRef(props, 'visible');
+
+  const userContextStore = useUserContextStore();
+  const dashboardStore = useDashboardStore();
+
+  const userContext = computed(() => userContextStore.userContext);
+
+  const profilePicture = computed(() => {
+    let defaultPic = defaultProfilePic;
+
+    return defaultPic;
+  });
+
+  const profilePictureAlt = computed(() => {
+    let defaultPicAlt = 'DCSLab';
+
+    return defaultPicAlt;
+  });
+
+  onMounted(async () => {
+    let userprofile = await profileServices.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  });
+
+  const logout = () => {
+    dashboardStore.toggleScreenMaskValue();
+
+    axios.post('/logout').then(() => {
+      sessionStorage.clear();
+      localStorage.removeItem('selectedUserLocation');
+      window.location.href = '/';
+    });
+  };
+</script>
+
+<template>
+  <Menu v-if="visible">
+    <Menu.Button class="block w-8 h-8 overflow-hidden rounded-full shadow-lg image-fit zoom-in intro-x">
+      <img :alt="profilePictureAlt" :src="profilePicture" />
+    </Menu.Button>
+    <Menu.Items
+      class="w-56 mt-px relative bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white"
+    >
+      <Menu.Header class="font-normal">
+        <div class="font-medium">{{ userContext.name }}</div>
+        <div class="text-xs text-white/70 mt-0.5 dark:text-slate-500">
+          {{ userContext.email }}
+        </div>
+      </Menu.Header>
+      <Menu.Divider class="bg-white/[0.08]" />
+      <Menu.Item class="hover:bg-white/5" @click="router.push({ name: 'side-menu-dashboard-profile' })">
+        <Lucide icon="User" class="w-4 h-4 mr-2" />
+        {{ t('components.profile-menu.profile_ddl.profile') }}
+      </Menu.Item>
+      <Menu.Item class="hover:bg-white/5">
+        <Lucide icon="Mail" class="w-4 h-4 mr-2" />
+        {{ t('components.profile-menu.profile_ddl.inbox') }}
+      </Menu.Item>
+      <Menu.Item class="hover:bg-white/5">
+        <Lucide icon="Activity" class="w-4 h-4 mr-2" />
+        {{ t('components.profile-menu.profile_ddl.activity') }}
+      </Menu.Item>
+      <Menu.Divider class="bg-white/[0.08]" />
+      <Menu.Item class="hover:bg-white/5" @click="logout">
+        <Lucide icon="ToggleRight" class="w-4 h-4 mr-2" />
+        {{ t('components.profile-menu.profile_ddl.logout') }}
+      </Menu.Item>
+    </Menu.Items>
+  </Menu>
+</template>
diff --git a/web/src/components/ProfileMenu/index.ts b/web/src/components/ProfileMenu/index.ts
index 85c9f43ab..a2174b0ad 100644
--- a/web/src/components/ProfileMenu/index.ts
+++ b/web/src/components/ProfileMenu/index.ts
@@ -1,3 +1,3 @@
-import ProfileMenu from "./ProfileMenu.vue";
-
-export default ProfileMenu;
+import ProfileMenu from './ProfileMenu.vue';
+
+export default ProfileMenu;
diff --git a/web/src/components/SearchBox/SearchBox.vue b/web/src/components/SearchBox/SearchBox.vue
index 117b10574..6f5ee7ba4 100644
--- a/web/src/components/SearchBox/SearchBox.vue
+++ b/web/src/components/SearchBox/SearchBox.vue
@@ -1,91 +1,100 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import Lucide from "@/components/Base/Lucide";
-import { FormInput } from "@/components/Base/Form";
-import { TransitionRoot } from "@headlessui/vue";
-import { useI18n } from "vue-i18n";
-import LoadingIcon from "@/components/Base/LoadingIcon";
+  import { ref } from 'vue';
+  import Lucide from '@/components/Base/Lucide';
+  import { FormInput } from '@/components/Base/Form';
+  import { TransitionRoot } from '@headlessui/vue';
+  import { useI18n } from 'vue-i18n';
+  import LoadingIcon from '@/components/Base/LoadingIcon';
 
-const { t } = useI18n();
+  const { t } = useI18n();
 
-const props = withDefaults(defineProps<{
-    theme?: 'rubick' | 'icewall' | 'tinker' | 'enigma';
-    layout?: "side-menu" | "simple-menu" | "top-menu";
-    visible?: boolean;
-}>(),{
-    theme: 'rubick',
-    layout: "side-menu",
-    visible: true,
-});
+  const props = withDefaults(
+    defineProps<{
+      theme?: 'rubick' | 'icewall' | 'tinker' | 'enigma';
+      layout?: 'side-menu' | 'simple-menu' | 'top-menu';
+      visible?: boolean;
+    }>(),
+    {
+      theme: 'rubick',
+      layout: 'side-menu',
+      visible: true,
+    },
+  );
 
-const searchDropdown = ref(false);
+  const searchDropdown = ref(false);
 
-const showSearchDropdown = () => {
-  searchDropdown.value = true;
-};
+  const showSearchDropdown = () => {
+    searchDropdown.value = true;
+  };
 
-const hideSearchDropdown = () => {
-  searchDropdown.value = false;
-};
+  const hideSearchDropdown = () => {
+    searchDropdown.value = false;
+  };
 </script>
 
 <template>
-    <div v-if="props.visible" class="relative mr-3 intro-x sm:mr-6">
-        <div class="relative hidden sm:block">
-            <FormInput
-                type="text"
-                class="border-transparent w-56 shadow-none rounded-full bg-slate-200 pr-8 transition-[width] duration-300 ease-in-out focus:border-transparent focus:w-72 dark:bg-darkmode-400"
-                placeholder="Search..."
-                @focus="showSearchDropdown"
-                @blur="hideSearchDropdown"
-            />
-            <Lucide
-                icon="Search"
-                class="absolute inset-y-0 right-0 w-5 h-5 my-auto mr-3 text-slate-600 dark:text-slate-500"
-            />
-        </div>
-        <a class="relative text-white/70 sm:hidden" href="">
-            <Lucide icon="Search" class="w-5 h-5 dark:text-slate-500" />
-        </a>
-        <TransitionRoot
-            as="template"
-            :show="searchDropdown"
-            enter="transition-all ease-linear duration-150"
-            enterFrom="mt-5 invisible opacity-0 translate-y-1"
-            enterTo="mt-[3px] visible opacity-100 translate-y-0"
-            entered="mt-[3px]"
-            leave="transition-all ease-linear duration-150"
-            leaveFrom="mt-[3px] visible opacity-100 translate-y-0"
-            leaveTo="mt-5 invisible opacity-0 translate-y-1"
-        >
-            <div class="absolute right-0 z-10 mt-[3px]">
-                <div class="w-[450px] p-5 box">
-                    <div class="mb-2 font-medium">{{ t('components.search-box.search_group.user') }}</div>
-                    <div class="mb-5">
-                        <div class="flex items-center mt-2">
-                            <div class="ml-3">
-                                <LoadingIcon icon="puff" />
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mb-2 font-medium">{{ t('components.search-box.search_group.company') }}</div>
-                    <div class="mb-5">
-                        <div class="flex items-center mt-2">
-                            <div class="ml-3">
-                                <LoadingIcon icon="puff" />
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mb-2 font-medium">{{ t('components.search-box.search_group.branch') }}</div>
-                    <div class="mb-5">
-                        <div class="flex items-center mt-2">
-                            <div class="ml-3">
-                                <LoadingIcon icon="puff" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </TransitionRoot>
+  <div v-if="props.visible" class="relative mr-3 intro-x sm:mr-6">
+    <div class="relative hidden sm:block">
+      <FormInput
+        type="text"
+        class="border-transparent w-56 shadow-none rounded-full bg-slate-200 pr-8 transition-[width] duration-300 ease-in-out focus:border-transparent focus:w-72 dark:bg-darkmode-400"
+        placeholder="Search..."
+        @focus="showSearchDropdown"
+        @blur="hideSearchDropdown"
+      />
+      <Lucide
+        icon="Search"
+        class="absolute inset-y-0 right-0 w-5 h-5 my-auto mr-3 text-slate-600 dark:text-slate-500"
+      />
     </div>
-</template>
\ No newline at end of file
+    <a class="relative text-white/70 sm:hidden" href="">
+      <Lucide icon="Search" class="w-5 h-5 dark:text-slate-500" />
+    </a>
+    <TransitionRoot
+      as="template"
+      :show="searchDropdown"
+      enter="transition-all ease-linear duration-150"
+      enterFrom="mt-5 invisible opacity-0 translate-y-1"
+      enterTo="mt-[3px] visible opacity-100 translate-y-0"
+      entered="mt-[3px]"
+      leave="transition-all ease-linear duration-150"
+      leaveFrom="mt-[3px] visible opacity-100 translate-y-0"
+      leaveTo="mt-5 invisible opacity-0 translate-y-1"
+    >
+      <div class="absolute right-0 z-10 mt-[3px]">
+        <div class="w-[450px] p-5 box">
+          <div class="mb-2 font-medium">
+            {{ t('components.search-box.search_group.user') }}
+          </div>
+          <div class="mb-5">
+            <div class="flex items-center mt-2">
+              <div class="ml-3">
+                <LoadingIcon icon="puff" />
+              </div>
+            </div>
+          </div>
+          <div class="mb-2 font-medium">
+            {{ t('components.search-box.search_group.company') }}
+          </div>
+          <div class="mb-5">
+            <div class="flex items-center mt-2">
+              <div class="ml-3">
+                <LoadingIcon icon="puff" />
+              </div>
+            </div>
+          </div>
+          <div class="mb-2 font-medium">
+            {{ t('components.search-box.search_group.branch') }}
+          </div>
+          <div class="mb-5">
+            <div class="flex items-center mt-2">
+              <div class="ml-3">
+                <LoadingIcon icon="puff" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </TransitionRoot>
+  </div>
+</template>
diff --git a/web/src/components/SearchBox/index.ts b/web/src/components/SearchBox/index.ts
index fa0f5bff9..9621a50cc 100644
--- a/web/src/components/SearchBox/index.ts
+++ b/web/src/components/SearchBox/index.ts
@@ -1,3 +1,3 @@
-import SearchBox from "./SearchBox.vue";
+import SearchBox from './SearchBox.vue';
 
 export default SearchBox;
diff --git a/web/src/components/SidebarPop/SidebarPop.vue b/web/src/components/SidebarPop/SidebarPop.vue
index bb486992b..fc4fbb089 100644
--- a/web/src/components/SidebarPop/SidebarPop.vue
+++ b/web/src/components/SidebarPop/SidebarPop.vue
@@ -1,64 +1,84 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import Lucide from "@/components/Base/Lucide";
-import { Menu, Slideover } from "@/components/Base/Headless";
-import { useI18n } from "vue-i18n";
-import { twMerge } from "tailwind-merge";
+  import { ref, computed } from 'vue';
+  import Lucide from '@/components/Base/Lucide';
+  import { Menu, Slideover } from '@/components/Base/Headless';
+  import { useI18n } from 'vue-i18n';
+  import { twMerge } from 'tailwind-merge';
 
-const { t } = useI18n();
+  const { t } = useI18n();
 
-interface SidebarPopProps {
-    visible: boolean,
-    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker',
-    layout?: "side-menu" | "simple-menu" | "top-menu",
-}
+  interface SidebarPopProps {
+    visible: boolean;
+    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker';
+    layout?: 'side-menu' | 'simple-menu' | 'top-menu';
+  }
 
-const props = withDefaults(defineProps<SidebarPopProps>(), {
+  const props = withDefaults(defineProps<SidebarPopProps>(), {
     visible: true,
     theme: 'rubick',
     layout: 'side-menu',
-});
+  });
 
-const showSlideover = ref(false);
-const toggleSlideover = (value: boolean) => {
-  showSlideover.value = value;
-};
+  const showSlideover = ref(false);
+  const toggleSlideover = (value: boolean) => {
+    showSlideover.value = value;
+  };
 
-const computedClass = computed(() => 
+  const computedClass = computed(() =>
     twMerge([
-        props.theme == 'rubick' && props.layout == 'side-menu' && '',
-        props.theme == 'enigma' && 'text-white',
-        props.theme == 'tinker' && 'text-white',
-        props.theme == 'icewall' && 'text-white',
-    ])
-);
+      props.theme == 'rubick' && props.layout == 'side-menu' && '',
+      props.theme == 'enigma' && 'text-white',
+      props.theme == 'tinker' && 'text-white',
+      props.theme == 'icewall' && 'text-white',
+    ]),
+  );
 </script>
 
 <template>
-    <Menu class="mr-4 intro-x sm:mr-6">
-        <Menu.Button variant="primary" @click="(event: MouseEvent) => { event.preventDefault(); toggleSlideover(true); }">
-            <Lucide icon="Archive" :class="computedClass" />
-        </Menu.Button>
-    </Menu>
+  <Menu class="mr-4 intro-x sm:mr-6">
+    <Menu.Button
+      variant="primary"
+      @click="
+        (event: MouseEvent) => {
+          event.preventDefault();
+          toggleSlideover(true);
+        }
+      "
+    >
+      <Lucide icon="Archive" :class="computedClass" />
+    </Menu.Button>
+  </Menu>
 
-    <Slideover :open="showSlideover" @close="() => { toggleSlideover(false); }">
-        <Slideover.Panel>
-            <Slideover.Title class="p-5">
-                <h2 class="mr-auto text-base font-medium">
-                    &nbsp;
-                </h2>
-            </Slideover.Title>
-            <Slideover.Description>
-                &nbsp;
-            </Slideover.Description>
-            <Slideover.Footer>
-                <strong>{{ t('components.sidebar-pop.slide_over.footer.copyright') }} &copy; {{ (new Date()).getFullYear() }}
-                    <a href="https://www.github.com/GitzJoey">{{ t('components.sidebar-pop.slide_over.footer.copyright_name') }}</a>
-                    &nbsp;&amp;&nbsp;
-                    <a href="https://github.com/GitzJoey/DCSLab/graphs/contributors">{{ t('components.sidebar-pop.slide_over.footer.contributors') }}</a>.
-                </strong>
-                {{ t('components.sidebar-pop.slide_over.footer.rights') }} <br /> {{ t('components.sidebar-pop.slide_over.footer.powered_by') }}
-            </Slideover.Footer>
-        </Slideover.Panel>
-    </Slideover>
-</template>
\ No newline at end of file
+  <Slideover
+    :open="showSlideover"
+    @close="
+      () => {
+        toggleSlideover(false);
+      }
+    "
+  >
+    <Slideover.Panel>
+      <Slideover.Title class="p-5">
+        <h2 class="mr-auto text-base font-medium">&nbsp;</h2>
+      </Slideover.Title>
+      <Slideover.Description>&nbsp;</Slideover.Description>
+      <Slideover.Footer>
+        <strong>
+          {{ t('components.sidebar-pop.slide_over.footer.copyright') }} &copy;
+          {{ new Date().getFullYear() }}
+          <a href="https://www.github.com/GitzJoey">
+            {{ t('components.sidebar-pop.slide_over.footer.copyright_name') }}
+          </a>
+          &nbsp;&amp;&nbsp;
+          <a href="https://github.com/GitzJoey/DCSLab/graphs/contributors">
+            {{ t('components.sidebar-pop.slide_over.footer.contributors') }}
+          </a>
+          .
+        </strong>
+        {{ t('components.sidebar-pop.slide_over.footer.rights') }}
+        <br />
+        {{ t('components.sidebar-pop.slide_over.footer.powered_by') }}
+      </Slideover.Footer>
+    </Slideover.Panel>
+  </Slideover>
+</template>
diff --git a/web/src/components/SidebarPop/index.ts b/web/src/components/SidebarPop/index.ts
index 940b17d57..6bcd1cb82 100644
--- a/web/src/components/SidebarPop/index.ts
+++ b/web/src/components/SidebarPop/index.ts
@@ -1,3 +1,3 @@
-import SidebarPop from "./SidebarPop.vue";
+import SidebarPop from './SidebarPop.vue';
 
 export default SidebarPop;
diff --git a/web/src/components/ThemeSwitcher/ThemeSwitcher.vue b/web/src/components/ThemeSwitcher/ThemeSwitcher.vue
index c23249304..ff676d34e 100644
--- a/web/src/components/ThemeSwitcher/ThemeSwitcher.vue
+++ b/web/src/components/ThemeSwitcher/ThemeSwitcher.vue
@@ -1,69 +1,57 @@
 <script setup lang="ts">
-import { Slideover } from "@/components/Base/Headless";
-import Lucide from "@/components/Base/Lucide";
-import { useThemeStore, type Themes } from "@/stores/theme";
-import { useColorSchemeStore, type ColorSchemes } from "@/stores/color-scheme";
-import { useDarkModeStore } from "@/stores/dark-mode";
-import { ref } from "vue";
+  import { Slideover } from '@/components/Base/Headless';
+  import Lucide from '@/components/Base/Lucide';
+  import { useThemeStore, type Themes } from '@/stores/theme';
+  import { useColorSchemeStore, type ColorSchemes } from '@/stores/color-scheme';
+  import { useDarkModeStore } from '@/stores/dark-mode';
+  import { ref } from 'vue';
 
-const themeSwitcherSlideover = ref(false);
-const setThemeSwitcherSlideover = (value: boolean) => {
-  themeSwitcherSlideover.value = value;
-};
+  const themeSwitcherSlideover = ref(false);
+  const setThemeSwitcherSlideover = (value: boolean) => {
+    themeSwitcherSlideover.value = value;
+  };
 
-const themeStore = useThemeStore();
-const switchTheme = (theme: Themes["name"]) => {
-  useThemeStore().setTheme(theme);
-};
-const switchLayout = (layout: Themes["layout"]) => {
-  useThemeStore().setLayout(layout);
-};
+  const themeStore = useThemeStore();
+  const switchTheme = (theme: Themes['name']) => {
+    useThemeStore().setTheme(theme);
+  };
+  const switchLayout = (layout: Themes['layout']) => {
+    useThemeStore().setLayout(layout);
+  };
 
-const setColorSchemeClass = () => {
-  const el = document.querySelectorAll("html")[0];
-  el.setAttribute("class", useColorSchemeStore().colorSchemeValue);
-  useDarkModeStore().darkModeValue && el.classList.add("dark");
-};
-const colorSchemeStore = useColorSchemeStore();
-const switchColorScheme = (colorScheme: ColorSchemes) => {
-  useColorSchemeStore().setColorScheme(colorScheme);
+  const setColorSchemeClass = () => {
+    const el = document.querySelectorAll('html')[0];
+    el.setAttribute('class', useColorSchemeStore().colorSchemeValue);
+    useDarkModeStore().darkModeValue && el.classList.add('dark');
+  };
+  const colorSchemeStore = useColorSchemeStore();
+  const switchColorScheme = (colorScheme: ColorSchemes) => {
+    useColorSchemeStore().setColorScheme(colorScheme);
+    setColorSchemeClass();
+  };
   setColorSchemeClass();
-};
-setColorSchemeClass();
 
-const setDarkModeClass = () => {
-  const el = document.querySelectorAll("html")[0];
-  useDarkModeStore().darkModeValue
-    ? el.classList.add("dark")
-    : el.classList.remove("dark");
-};
-const darkModeStore = useDarkModeStore();
-const switchDarkMode = (darkMode: boolean) => {
-  useDarkModeStore().setDarkMode(darkMode);
+  const setDarkModeClass = () => {
+    const el = document.querySelectorAll('html')[0];
+    useDarkModeStore().darkModeValue ? el.classList.add('dark') : el.classList.remove('dark');
+  };
+  const darkModeStore = useDarkModeStore();
+  const switchDarkMode = (darkMode: boolean) => {
+    useDarkModeStore().setDarkMode(darkMode);
+    setDarkModeClass();
+  };
   setDarkModeClass();
-};
-setDarkModeClass();
 
-const themes: Array<Themes["name"]> = ["rubick", "icewall", "tinker", "enigma"];
-const layouts: Array<Themes["layout"]> = [
-  "side-menu",
-  "simple-menu",
-  "top-menu",
-];
-const colorSchemes: Array<ColorSchemes> = [
-  "default",
-  "theme-1",
-  "theme-2",
-  "theme-3",
-  "theme-4",
-];
+  const themes: Array<Themes['name']> = ['rubick', 'icewall', 'tinker', 'enigma'];
+  const layouts: Array<Themes['layout']> = ['side-menu', 'simple-menu', 'top-menu'];
+  const colorSchemes: Array<ColorSchemes> = ['default', 'theme-1', 'theme-2', 'theme-3', 'theme-4'];
 
-const themeImages = import.meta.glob<{
-  default: string;
-}>("/src/assets/images/themes/*.{jpg,jpeg,png,svg}", { eager: true });
-const layoutImages = import.meta.glob<{
-  default: string;
-}>("/src/assets/images/layouts/*.{jpg,jpeg,png,svg}", { eager: true });
+  const themeImages = import.meta.glob<{
+    default: string;
+  }>('/src/assets/images/themes/*.{jpg,jpeg,png,svg}', { eager: true });
+  const layoutImages = import.meta.glob<{
+    default: string;
+  }>('/src/assets/images/layouts/*.{jpg,jpeg,png,svg}', { eager: true });
 </script>
 
 <template>
@@ -79,10 +67,12 @@ const layoutImages = import.meta.glob<{
       <Slideover.Panel>
         <a
           class="absolute inset-y-0 left-0 right-auto my-auto -ml-[60px] flex h-8 w-8 items-center justify-center rounded-full border border-white/90 bg-white/5 text-white/90 transition-all hover:rotate-180 hover:scale-105 hover:bg-white/10 focus:outline-none sm:-ml-[105px] sm:h-14 sm:w-14"
-          @click="(event: MouseEvent) => {
-            event.preventDefault();
-            setThemeSwitcherSlideover(false);
-          }"
+          @click="
+            (event: MouseEvent) => {
+              event.preventDefault();
+              setThemeSwitcherSlideover(false);
+            }
+          "
         >
           <Lucide class="h-3 w-3 stroke-[1] sm:h-8 sm:w-8" icon="X" />
         </a>
@@ -94,27 +84,21 @@ const layoutImages = import.meta.glob<{
               <div class="mt-5 grid grid-cols-2 gap-x-5 gap-y-3.5">
                 <div v-for="theme in themes">
                   <a
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      switchTheme(theme)
-                    }"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        switchTheme(theme);
+                      }
+                    "
                     :class="[
                       'h-28 cursor-pointer bg-slate-50 box p-1 block',
-                      themeStore.theme.name == theme
-                        ? 'border-2 border-theme-1/60'
-                        : '',
+                      themeStore.theme.name == theme ? 'border-2 border-theme-1/60' : '',
                     ]"
                   >
-                    <div
-                      class="w-full h-full overflow-hidden rounded-md image-fit"
-                    >
+                    <div class="w-full h-full overflow-hidden rounded-md image-fit">
                       <img
                         class="w-full h-full"
-                        :src="
-                          themeImages[
-                            '/src/assets/images/themes/' + theme + '.png'
-                          ].default
-                        "
+                        :src="themeImages['/src/assets/images/themes/' + theme + '.png'].default"
                         alt="DCSLab"
                       />
                     </div>
@@ -132,31 +116,27 @@ const layoutImages = import.meta.glob<{
               <div class="mt-5 grid grid-cols-3 gap-x-5 gap-y-3.5">
                 <div v-for="layout in layouts">
                   <a
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      switchLayout(layout)
-                    }"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        switchLayout(layout);
+                      }
+                    "
                     :class="[
                       'h-24 cursor-pointer bg-slate-50 box p-1 block',
-                      themeStore.theme.layout == layout
-                        ? 'border-2 border-theme-1/60'
-                        : '',
+                      themeStore.theme.layout == layout ? 'border-2 border-theme-1/60' : '',
                     ]"
                   >
                     <div class="w-full h-full overflow-hidden rounded-md">
                       <img
                         class="w-full h-full"
-                        :src="
-                          layoutImages[
-                            '/src/assets/images/layouts/' + layout + '.png'
-                          ].default
-                        "
+                        :src="layoutImages['/src/assets/images/layouts/' + layout + '.png'].default"
                         alt="DCSLab"
                       />
                     </div>
                   </a>
                   <div class="mt-2.5 text-center text-xs capitalize">
-                    {{ layout.replace("-", " ") }}
+                    {{ layout.replace('-', ' ') }}
                   </div>
                 </div>
               </div>
@@ -168,32 +148,22 @@ const layoutImages = import.meta.glob<{
               <div class="mt-5 grid grid-cols-2 gap-3.5">
                 <div v-for="colorScheme in colorSchemes">
                   <a
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      switchColorScheme(colorScheme)
-                    }"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        switchColorScheme(colorScheme);
+                      }
+                    "
                     :class="[
                       'h-14 cursor-pointer bg-slate-50 box p-1 border-slate-300/80 block',
                       '[&.active]:border-2 [&.active]:border-theme-1/60',
-                      colorSchemeStore.colorSchemeValue == colorScheme
-                        ? 'active'
-                        : '',
+                      colorSchemeStore.colorSchemeValue == colorScheme ? 'active' : '',
                     ]"
                   >
                     <div class="h-full overflow-hidden rounded-md">
                       <div class="flex items-center h-full gap-1 -mx-2">
-                        <div
-                          :class="[
-                            'w-1/2 h-[200%] bg-theme-1 rotate-12',
-                            colorScheme,
-                          ]"
-                        ></div>
-                        <div
-                          :class="[
-                            'w-1/2 h-[200%] bg-theme-2 rotate-12',
-                            colorScheme,
-                          ]"
-                        ></div>
+                        <div :class="['w-1/2 h-[200%] bg-theme-1 rotate-12', colorScheme]"></div>
+                        <div :class="['w-1/2 h-[200%] bg-theme-2 rotate-12', colorScheme]"></div>
                       </div>
                     </div>
                   </a>
@@ -207,37 +177,37 @@ const layoutImages = import.meta.glob<{
               <div class="mt-5 grid grid-cols-2 gap-3.5">
                 <div>
                   <a
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      switchDarkMode(false)
-                    }"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        switchDarkMode(false);
+                      }
+                    "
                     :class="[
                       'h-12 cursor-pointer bg-slate-50 box p-1 border-slate-300/80 block',
                       '[&.active]:border-2 [&.active]:border-theme-1/60',
                       !darkModeStore.darkModeValue ? 'active' : '',
                     ]"
                   >
-                    <div
-                      class="h-full overflow-hidden rounded-md bg-slate-200"
-                    ></div>
+                    <div class="h-full overflow-hidden rounded-md bg-slate-200"></div>
                   </a>
                   <div class="mt-2.5 text-center text-xs capitalize">Light</div>
                 </div>
                 <div>
                   <a
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      switchDarkMode(true)
-                    }"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        switchDarkMode(true);
+                      }
+                    "
                     :class="[
                       'h-12 cursor-pointer bg-slate-50 box p-1 border-slate-300/80 block',
                       '[&.active]:border-2 [&.active]:border-theme-1/60',
                       darkModeStore.darkModeValue ? 'active' : '',
                     ]"
                   >
-                    <div
-                      class="h-full overflow-hidden rounded-md bg-slate-900"
-                    ></div>
+                    <div class="h-full overflow-hidden rounded-md bg-slate-900"></div>
                   </a>
                   <div class="mt-2.5 text-center text-xs capitalize">Dark</div>
                 </div>
@@ -249,10 +219,12 @@ const layoutImages = import.meta.glob<{
     </Slideover>
     <div
       class="fixed bottom-0 right-0 z-50 flex items-center justify-center mb-5 mr-5 text-white rounded-full shadow-lg cursor-pointer h-14 w-14 bg-theme-1"
-      @click="(event: MouseEvent) => {
-        event.preventDefault();
-        setThemeSwitcherSlideover(true);
-    }"
+      @click="
+        (event: MouseEvent) => {
+          event.preventDefault();
+          setThemeSwitcherSlideover(true);
+        }
+      "
     >
       <Lucide class="w-5 h-5 hover:animate-spin" icon="Settings" />
     </div>
diff --git a/web/src/components/ThemeSwitcher/index.ts b/web/src/components/ThemeSwitcher/index.ts
index 574ae317b..32caa0851 100644
--- a/web/src/components/ThemeSwitcher/index.ts
+++ b/web/src/components/ThemeSwitcher/index.ts
@@ -1,3 +1,3 @@
-import ThemeSwitcher from "./ThemeSwitcher.vue";
+import ThemeSwitcher from './ThemeSwitcher.vue';
 
 export default ThemeSwitcher;
diff --git a/web/src/components/Themes/Enigma/TopBar/TopBar.vue b/web/src/components/Themes/Enigma/TopBar/TopBar.vue
index dba48a446..f75b548a8 100644
--- a/web/src/components/Themes/Enigma/TopBar/TopBar.vue
+++ b/web/src/components/Themes/Enigma/TopBar/TopBar.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import HomeLogo from "@/components/HomeLogo/HomeLogo.vue";
-import UserLocation from "@/components/UserLocation/UserLocation.vue";
-import SearchBox from "@/components/SearchBox/SearchBox.vue";
-import SidebarPop from "@/components/SidebarPop/SidebarPop.vue";
-import LanguageSwitcher from "@/components/LanguageSwitcher/LanguageSwitcher.vue";
-import ProfileMenu from "@/components/ProfileMenu/ProfileMenu.vue";
+  import HomeLogo from '@/components/HomeLogo/HomeLogo.vue';
+  import UserLocation from '@/components/UserLocation/UserLocation.vue';
+  import SearchBox from '@/components/SearchBox/SearchBox.vue';
+  import SidebarPop from '@/components/SidebarPop/SidebarPop.vue';
+  import LanguageSwitcher from '@/components/LanguageSwitcher/LanguageSwitcher.vue';
+  import ProfileMenu from '@/components/ProfileMenu/ProfileMenu.vue';
 
-const props = defineProps<{
-  layout?: "side-menu" | "simple-menu" | "top-menu";
-}>();
+  const props = defineProps<{
+    layout?: 'side-menu' | 'simple-menu' | 'top-menu';
+  }>();
 </script>
 
 <template>
diff --git a/web/src/components/Themes/Enigma/TopBar/index.ts b/web/src/components/Themes/Enigma/TopBar/index.ts
index ea3f69c03..c97ac0da4 100644
--- a/web/src/components/Themes/Enigma/TopBar/index.ts
+++ b/web/src/components/Themes/Enigma/TopBar/index.ts
@@ -1,3 +1,3 @@
-import TopBar from "./TopBar.vue";
+import TopBar from './TopBar.vue';
 
 export default TopBar;
diff --git a/web/src/components/Themes/Icewall/TopBar/TopBar.vue b/web/src/components/Themes/Icewall/TopBar/TopBar.vue
index 5676196d4..bcd7975c4 100644
--- a/web/src/components/Themes/Icewall/TopBar/TopBar.vue
+++ b/web/src/components/Themes/Icewall/TopBar/TopBar.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import HomeLogo from "@/components/HomeLogo/HomeLogo.vue";
-import UserLocation from "@/components/UserLocation/UserLocation.vue";
-import SearchBox from "@/components/SearchBox/SearchBox.vue";
-import SidebarPop from "@/components/SidebarPop/SidebarPop.vue";
-import LanguageSwitcher from "@/components/LanguageSwitcher/LanguageSwitcher.vue";
-import ProfileMenu from "@/components/ProfileMenu/ProfileMenu.vue";
+  import HomeLogo from '@/components/HomeLogo/HomeLogo.vue';
+  import UserLocation from '@/components/UserLocation/UserLocation.vue';
+  import SearchBox from '@/components/SearchBox/SearchBox.vue';
+  import SidebarPop from '@/components/SidebarPop/SidebarPop.vue';
+  import LanguageSwitcher from '@/components/LanguageSwitcher/LanguageSwitcher.vue';
+  import ProfileMenu from '@/components/ProfileMenu/ProfileMenu.vue';
 </script>
 
 <template>
diff --git a/web/src/components/Themes/Icewall/TopBar/index.ts b/web/src/components/Themes/Icewall/TopBar/index.ts
index ea3f69c03..c97ac0da4 100644
--- a/web/src/components/Themes/Icewall/TopBar/index.ts
+++ b/web/src/components/Themes/Icewall/TopBar/index.ts
@@ -1,3 +1,3 @@
-import TopBar from "./TopBar.vue";
+import TopBar from './TopBar.vue';
 
 export default TopBar;
diff --git a/web/src/components/Themes/Rubick/TopBar/TopBar.vue b/web/src/components/Themes/Rubick/TopBar/TopBar.vue
index 69309563e..697189439 100644
--- a/web/src/components/Themes/Rubick/TopBar/TopBar.vue
+++ b/web/src/components/Themes/Rubick/TopBar/TopBar.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import UserLocation from "@/components/UserLocation/UserLocation.vue";
-import SearchBox from "@/components/SearchBox/SearchBox.vue";
-import SidebarPop from "@/components/SidebarPop/SidebarPop.vue";
-import LanguageSwitcher from "@/components/LanguageSwitcher/LanguageSwitcher.vue";
-import ProfileMenu from "@/components/ProfileMenu/ProfileMenu.vue";
+  import UserLocation from '@/components/UserLocation/UserLocation.vue';
+  import SearchBox from '@/components/SearchBox/SearchBox.vue';
+  import SidebarPop from '@/components/SidebarPop/SidebarPop.vue';
+  import LanguageSwitcher from '@/components/LanguageSwitcher/LanguageSwitcher.vue';
+  import ProfileMenu from '@/components/ProfileMenu/ProfileMenu.vue';
 </script>
 
 <template>
-  <div
-    class="relative z-[51] flex h-[67px] items-center border-b border-slate-200"
-  >
+  <div class="relative z-[51] flex h-[67px] items-center border-b border-slate-200">
     <UserLocation theme="rubick" />
     <SearchBox theme="rubick" />
     <SidebarPop theme="rubick" />
diff --git a/web/src/components/Themes/Rubick/TopBar/index.ts b/web/src/components/Themes/Rubick/TopBar/index.ts
index ea3f69c03..c97ac0da4 100644
--- a/web/src/components/Themes/Rubick/TopBar/index.ts
+++ b/web/src/components/Themes/Rubick/TopBar/index.ts
@@ -1,3 +1,3 @@
-import TopBar from "./TopBar.vue";
+import TopBar from './TopBar.vue';
 
 export default TopBar;
diff --git a/web/src/components/Themes/Tinker/TopBar/TopBar.vue b/web/src/components/Themes/Tinker/TopBar/TopBar.vue
index 594ced166..5c6ead8f1 100644
--- a/web/src/components/Themes/Tinker/TopBar/TopBar.vue
+++ b/web/src/components/Themes/Tinker/TopBar/TopBar.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import UserLocation from "@/components/UserLocation/UserLocation.vue";
-import SearchBox from "@/components/SearchBox/SearchBox.vue";
-import SidebarPop from "@/components/SidebarPop/SidebarPop.vue";
-import LanguageSwitcher from "@/components/LanguageSwitcher/LanguageSwitcher.vue";
-import ProfileMenu from "@/components/ProfileMenu/ProfileMenu.vue";
+  import UserLocation from '@/components/UserLocation/UserLocation.vue';
+  import SearchBox from '@/components/SearchBox/SearchBox.vue';
+  import SidebarPop from '@/components/SidebarPop/SidebarPop.vue';
+  import LanguageSwitcher from '@/components/LanguageSwitcher/LanguageSwitcher.vue';
+  import ProfileMenu from '@/components/ProfileMenu/ProfileMenu.vue';
 </script>
 
 <template>
-  <div
-    class="relative z-[51] flex h-[67px] items-center border-b border-slate-200"
-  >
+  <div class="relative z-[51] flex h-[67px] items-center border-b border-slate-200">
     <UserLocation theme="tinker" />
     <SearchBox theme="tinker" />
     <SidebarPop theme="tinker" />
diff --git a/web/src/components/Themes/Tinker/TopBar/index.ts b/web/src/components/Themes/Tinker/TopBar/index.ts
index ea3f69c03..c97ac0da4 100644
--- a/web/src/components/Themes/Tinker/TopBar/index.ts
+++ b/web/src/components/Themes/Tinker/TopBar/index.ts
@@ -1,3 +1,3 @@
-import TopBar from "./TopBar.vue";
+import TopBar from './TopBar.vue';
 
 export default TopBar;
diff --git a/web/src/components/TreeList/TreeList.vue b/web/src/components/TreeList/TreeList.vue
new file mode 100644
index 000000000..12f03b466
--- /dev/null
+++ b/web/src/components/TreeList/TreeList.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+export interface TreeListNode {
+  id: string | number;
+  children?: Array<TreeListNode>;
+  [key: string]: any;
+}
+
+interface TreeListVisibleRow {
+  item: TreeListNode;
+  depth: number;
+  hasChildren: boolean;
+  isExpanded: boolean;
+}
+
+interface TreeListProps {
+  items: Array<TreeListNode>;
+  itemKey?: string;
+  childrenKey?: string;
+}
+
+const props = withDefaults(defineProps<TreeListProps>(), {
+  itemKey: 'id',
+  childrenKey: 'children',
+});
+
+const expandedIds = ref<Array<string | number>>([]);
+
+const expandedIdSet = computed(() => new Set(expandedIds.value));
+
+const getItemKey = (item: TreeListNode): string | number => {
+  return (item as Record<string, string | number>)[props.itemKey] ?? item.id;
+};
+
+const getChildren = (item: TreeListNode): Array<TreeListNode> => {
+  const children = (item as Record<string, unknown>)[props.childrenKey];
+
+  return Array.isArray(children) ? (children as Array<TreeListNode>) : [];
+};
+
+const collectExpandableIds = (items: Array<TreeListNode>): Array<string | number> => {
+  const result: Array<string | number> = [];
+
+  const walk = (nodes: Array<TreeListNode>) => {
+    for (const node of nodes) {
+      const children = getChildren(node);
+
+      if (children.length > 0) {
+        result.push(getItemKey(node));
+        walk(children);
+      }
+    }
+  };
+
+  walk(items);
+
+  return result;
+};
+
+const toggleExpanded = (item: TreeListNode) => {
+  const itemId = getItemKey(item);
+
+  if (expandedIdSet.value.has(itemId)) {
+    expandedIds.value = expandedIds.value.filter((id) => id !== itemId);
+    return;
+  }
+
+  expandedIds.value = [...expandedIds.value, itemId];
+};
+
+const expandAll = () => {
+  expandedIds.value = collectExpandableIds(props.items);
+};
+
+const collapseAll = () => {
+  expandedIds.value = [];
+};
+
+const visibleRows = computed<Array<TreeListVisibleRow>>(() => {
+  const result: Array<TreeListVisibleRow> = [];
+
+  const walk = (items: Array<TreeListNode>, depth: number) => {
+    for (const item of items) {
+      const children = getChildren(item);
+      const itemId = getItemKey(item);
+      const hasChildren = children.length > 0;
+      const isExpanded = expandedIdSet.value.has(itemId);
+
+      result.push({
+        item,
+        depth,
+        hasChildren,
+        isExpanded,
+      });
+
+      if (hasChildren && isExpanded) {
+        walk(children, depth + 1);
+      }
+    }
+  };
+
+  walk(props.items, 0);
+
+  return result;
+});
+
+watch(
+  () => props.items,
+  () => {
+    expandedIds.value = [];
+  },
+);
+
+defineExpose({
+  expandAll,
+  collapseAll,
+});
+</script>
+
+<template>
+  <TransitionGroup name="tree-row">
+    <template v-for="row in visibleRows" :key="String(getItemKey(row.item))">
+      <slot
+        name="row"
+        :item="row.item"
+        :depth="row.depth"
+        :has-children="row.hasChildren"
+        :is-expanded="row.isExpanded"
+        :toggle="() => toggleExpanded(row.item)"
+      />
+    </template>
+  </TransitionGroup>
+</template>
+
+<style>
+.tree-row-enter-active,
+.tree-row-leave-active {
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.tree-row-enter-from,
+.tree-row-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.tree-row-move {
+  transition: transform 180ms ease;
+}
+</style>
diff --git a/web/src/components/UserLocation/UserLocation.vue b/web/src/components/UserLocation/UserLocation.vue
index 904c9b60c..d0089a8ea 100644
--- a/web/src/components/UserLocation/UserLocation.vue
+++ b/web/src/components/UserLocation/UserLocation.vue
@@ -1,155 +1,195 @@
-<script setup lang="ts">
-import { onMounted, computed, toRef } from "vue";
-import Breadcrumb from "@/components/Base/Breadcrumb";
-import Lucide from "@/components/Base/Lucide";
-import { Menu } from "@/components/Base/Headless";
-import { useUserContextStore } from "@/stores/user-context";
-import { useSelectedUserLocationStore } from "@/stores/selected-user-location";
-import { useI18n } from "vue-i18n";
-import _ from "lodash";
-import { twMerge } from "tailwind-merge";
-
-interface UserLocationProps {
-    visible: boolean,
-    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker',
-    layout?: "side-menu" | "simple-menu" | "top-menu",
-}
-
-const props = withDefaults(defineProps<UserLocationProps>(), {
-    visible: true,
-    theme: 'rubick',
-    layout: 'side-menu',
-});
-
-const visible = toRef(props, 'visible');
-const theme = toRef(props, 'theme');
-const layout = toRef(props, 'layout');
-
-const { t } = useI18n();
-
-const userContextStore = useUserContextStore();
-const selectedUserLocationStore = useSelectedUserLocationStore();
-
-const userContext = computed(() => userContextStore.userContext);
-const userLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
-
-const userLocationText = computed(() => {
-  let result = '';
-
-  if (userLocation.value.company.name != '') {
-    result = userLocation.value.company.name;
-  }
-  if (userLocation.value.branch.name != '') {
-    result += ' - ' + userLocation.value.branch.name
-  }
-
-  return result;
-});
-
-const userLocationLength = computed((): number => {
-  let result = 0;
-
-  userContext.value.companies.forEach(c => {
-    result += 1;
-    if (c.branches) {
-      result += c.branches.length;
-    }
-  });
-
-  return result;
-});
-
-const computedClass = computed(() =>
-  twMerge([
-    theme.value == 'rubick' && (layout.value == 'side-menu' || layout.value == 'simple-menu') && 'hidden mr-auto -intro-x sm:flex',
-    theme.value == 'rubick' && layout.value == 'top-menu' && 'h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x',
-
-    theme.value == 'icewall' && 'h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x',
-
-    theme.value == 'enigma' && 'h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x',
-
-    theme.value == 'tinker' && (layout.value == 'side-menu' || layout.value == 'simple-menu') && 'hidden mr-auto -intro-x sm:flex',
-    theme.value == 'tinker' && layout.value == 'top-menu' && 'h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x'
-  ])
-);
-
-const computedLight = computed(() => {
-  switch (true) {
-    case theme.value == 'rubick' && (layout.value == 'side-menu' || layout.value == 'simple-menu'):
-      return false;
-    case theme.value == 'rubick' && layout.value == 'top-menu':
-      return true;
-
-    case theme.value == 'icewall':
-      return true;
-
-    case theme.value == 'enigma':
-      return true;
-
-    case theme.value == 'tinker' && (layout.value == 'side-menu' || layout.value == 'simple-menu'):
-      return false;
-    case theme.value == 'tinker' && layout.value == 'top-menu':
-      return true;
-
-    default:
-      return false;
-  }
-});
-
-onMounted(() => {
-  selectedUserLocationStore.getSelectedUserLocation;
-});
-
-const setNewUserLocation = (companyId: string, branchId: string) => {
-  let company = _.find(userContext.value.companies, { id: companyId });
-
-  if (!company) return;
-
-  let branch = branchId == '' ? _.find(company.branches, { is_main: true }) : _.find(company.branches, { id: branchId });
-
-  if (branch) {
-    selectedUserLocationStore.clearSelectedUserLocation();
-    selectedUserLocationStore.setSelectedUserLocation(company.id, company.ulid, company.code, company.name, branch.id, branch.ulid, branch.code, branch.name);
-  } else {
-    selectedUserLocationStore.clearSelectedUserLocation();
-    selectedUserLocationStore.setSelectedUserLocation(company.id, company.ulid, company.code, company.name);
-  }
-};
-</script>
-
-<template>
-  <Breadcrumb :light="computedLight" :class="computedClass">
-    <Breadcrumb.Text>
-      <Menu>
-        <Menu.Button variant="primary">
-          <Lucide icon="Umbrella" />
-        </Menu.Button>
-        <Menu.Items :class="{
-          'w-96 h-12': userLocationLength == 0,
-          'w-96 h-48': userLocationLength >= 1 && userLocationLength <= 10,
-          'w-96 h-96': userLocationLength && userLocationLength > 10,
-          'overflow-y-auto': true
-        }" placement="bottom-start">
-          <template v-if="userContext.companies && userContext.companies.length != 0">
-            <template v-for="(c, cIdx) in  userContext.companies" :key="cIdx">
-              <Menu.Item @click="setNewUserLocation(c.id, '')">
-                <span :class="{ 'text-primary font-bold': true, 'underline': c.default }">{{ c.name }}</span>
-              </Menu.Item>
-              <Menu.Item v-for="(b, bIdx) in c.branches" :key="bIdx"
-                @click="setNewUserLocation(c.id, b == null ? '' : b.id)">
-                <span v-if="b != null" :class="{ 'text-primary': true, 'underline': b.is_main }">{{ b.name }}</span>
-              </Menu.Item>
-              <Menu.Divider v-if="userContext.companies.length - 1 != cIdx" />
-            </template>
-          </template>
-          <template v-else>
-            <Menu.Item><span class="text-primary">{{ t('components.user-location.data_not_found') }}</span></Menu.Item>
-          </template>
-        </Menu.Items>
-      </Menu>
-    </Breadcrumb.Text>
-    <Breadcrumb.Text v-if="userLocationText != ''">
-      {{ userLocationText }}
-    </Breadcrumb.Text>
-  </Breadcrumb>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { onMounted, computed, toRef } from 'vue';
+  import Breadcrumb from '@/components/Base/Breadcrumb';
+  import Lucide from '@/components/Base/Lucide';
+  import { Menu } from '@/components/Base/Headless';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useI18n } from 'vue-i18n';
+  import _ from 'lodash';
+  import { twMerge } from 'tailwind-merge';
+
+  interface UserLocationProps {
+    visible: boolean;
+    theme?: 'rubick' | 'icewall' | 'enigma' | 'tinker';
+    layout?: 'side-menu' | 'simple-menu' | 'top-menu';
+  }
+
+  const props = withDefaults(defineProps<UserLocationProps>(), {
+    visible: true,
+    theme: 'rubick',
+    layout: 'side-menu',
+  });
+
+  const visible = toRef(props, 'visible');
+  const theme = toRef(props, 'theme');
+  const layout = toRef(props, 'layout');
+
+  const { t } = useI18n();
+
+  const userContextStore = useUserContextStore();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const userContext = computed(() => userContextStore.userContext);
+  const userLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+  const userLocationText = computed(() => {
+    let result = '';
+
+    if (userLocation.value.company.name != '') {
+      result = userLocation.value.company.name;
+    }
+    if (userLocation.value.branch.name != '') {
+      result += ' - ' + userLocation.value.branch.name;
+    }
+
+    return result;
+  });
+
+  const userLocationLength = computed((): number => {
+    let result = 0;
+
+    userContext.value.companies.forEach((c) => {
+      result += 1;
+      if (c.branches) {
+        result += c.branches.length;
+      }
+    });
+
+    return result;
+  });
+
+  const computedClass = computed(() =>
+    twMerge([
+      theme.value == 'rubick' &&
+        (layout.value == 'side-menu' || layout.value == 'simple-menu') &&
+        'hidden mr-auto -intro-x sm:flex',
+      theme.value == 'rubick' &&
+        layout.value == 'top-menu' &&
+        'h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x',
+
+      theme.value == 'icewall' && 'h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x',
+
+      theme.value == 'enigma' && 'h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x',
+
+      theme.value == 'tinker' &&
+        (layout.value == 'side-menu' || layout.value == 'simple-menu') &&
+        'hidden mr-auto -intro-x sm:flex',
+      theme.value == 'tinker' &&
+        layout.value == 'top-menu' &&
+        'h-full md:ml-10 md:pl-10 md:border-l border-white/[0.08] mr-auto -intro-x',
+    ]),
+  );
+
+  const computedLight = computed(() => {
+    switch (true) {
+      case theme.value == 'rubick' && (layout.value == 'side-menu' || layout.value == 'simple-menu'):
+        return false;
+      case theme.value == 'rubick' && layout.value == 'top-menu':
+        return true;
+
+      case theme.value == 'icewall':
+        return true;
+
+      case theme.value == 'enigma':
+        return true;
+
+      case theme.value == 'tinker' && (layout.value == 'side-menu' || layout.value == 'simple-menu'):
+        return false;
+      case theme.value == 'tinker' && layout.value == 'top-menu':
+        return true;
+
+      default:
+        return false;
+    }
+  });
+
+  onMounted(() => {
+    selectedUserLocationStore.getSelectedUserLocation;
+  });
+
+  const setNewUserLocation = (companyId: string, branchId: string) => {
+    let company = _.find(userContext.value.companies, { id: companyId });
+
+    if (!company) return;
+
+    let branch =
+      branchId == '' ? _.find(company.branches, { is_main: true }) : _.find(company.branches, { id: branchId });
+
+    if (branch) {
+      selectedUserLocationStore.clearSelectedUserLocation();
+      selectedUserLocationStore.setSelectedUserLocation(
+        company.id,
+        company.ulid,
+        company.code,
+        company.name,
+        branch.id,
+        branch.ulid,
+        branch.code,
+        branch.name,
+      );
+    } else {
+      selectedUserLocationStore.clearSelectedUserLocation();
+      selectedUserLocationStore.setSelectedUserLocation(company.id, company.ulid, company.code, company.name);
+    }
+  };
+</script>
+
+<template>
+  <Breadcrumb :light="computedLight" :class="computedClass">
+    <Breadcrumb.Text>
+      <Menu>
+        <Menu.Button variant="primary">
+          <Lucide icon="Umbrella" />
+        </Menu.Button>
+        <Menu.Items
+          :class="{
+            'w-96 h-12': userLocationLength == 0,
+            'w-96 h-48': userLocationLength >= 1 && userLocationLength <= 10,
+            'w-96 h-96': userLocationLength && userLocationLength > 10,
+            'overflow-y-auto': true,
+          }"
+          placement="bottom-start"
+        >
+          <template v-if="userContext.companies && userContext.companies.length != 0">
+            <template v-for="(c, cIdx) in userContext.companies" :key="cIdx">
+              <Menu.Item @click="setNewUserLocation(c.id, '')" class="relative">
+                <span
+                  :class="{
+                    'text-primary font-bold': true,
+                    underline: c.default,
+                  }"
+                >
+                  {{ c.name }}
+                </span>
+              </Menu.Item>
+              <Menu.Item
+                v-for="(b, bIdx) in c.branches"
+                :key="bIdx"
+                @click="setNewUserLocation(c.id, b == null ? '' : b.id)"
+                class="pl-6 relative"
+              >
+                <div class="absolute left-3 top-0 h-full w-px bg-gray-200"></div>
+                <div class="absolute left-3 top-1/2 h-px w-3 bg-gray-200"></div>
+                <span v-if="b != null" class="pl-1" :class="{ 'text-primary': true, underline: b.is_main }">
+                  {{ b.name }}
+                </span>
+              </Menu.Item>
+              <Menu.Divider v-if="userContext.companies.length - 1 != cIdx" />
+            </template>
+          </template>
+          <template v-else>
+            <Menu.Item>
+              <span class="text-primary">
+                {{ t('components.user-location.data_not_found') }}
+              </span>
+            </Menu.Item>
+          </template>
+        </Menu.Items>
+      </Menu>
+    </Breadcrumb.Text>
+    <Breadcrumb.Text v-if="userLocationText != ''">
+      {{ userLocationText }}
+    </Breadcrumb.Text>
+  </Breadcrumb>
+</template>
diff --git a/web/src/components/UserLocation/index.ts b/web/src/components/UserLocation/index.ts
index 12ee8df90..be934dfc1 100644
--- a/web/src/components/UserLocation/index.ts
+++ b/web/src/components/UserLocation/index.ts
@@ -1,3 +1,3 @@
-import UserLocation from "./UserLocation.vue";
-
-export default UserLocation;
+import UserLocation from './UserLocation.vue';
+
+export default UserLocation;
diff --git a/web/src/lang/en/components/alert-placeholder.json b/web/src/lang/en/components/alert-placeholder.json
index f9d9a94f4..88db91c2e 100644
--- a/web/src/lang/en/components/alert-placeholder.json
+++ b/web/src/lang/en/components/alert-placeholder.json
@@ -1,6 +1,6 @@
-{
-    "default_title": "An unexpected error occurred.",
-    "email_verification": {
-        "message": "Email is not verified. Please verify your email to complete the registration process."
-    }
-}
\ No newline at end of file
+{
+  "default_title": "An unexpected error occurred.",
+  "email_verification": {
+    "message": "Email is not verified. Please verify your email to complete the registration process."
+  }
+}
diff --git a/web/src/lang/en/components/buttons.json b/web/src/lang/en/components/buttons.json
index 98624f03a..976a92247 100644
--- a/web/src/lang/en/components/buttons.json
+++ b/web/src/lang/en/components/buttons.json
@@ -1,20 +1,27 @@
-{
-    "save": "Save",
-    "update": "Update",
-    "cancel": "Cancel",
-    "delete": "Delete",
-    "back": "Back",
-    "reset": "Reset",
-    "compose": "Compose",
-    "revoke": "Revoke",
-    "activate": "Activate",
-    "submit": "Submit",
-    "send_verification_email": "Send Verification Email",
-    "auto": "Auto",
-    "new_order": "New Order",
-    "login": "Login",
-    "register": "Register",
-    "create_new": "Create New",
-    "retry": "Retry",
-    "reload": "Reload"
-}
\ No newline at end of file
+{
+  "add": "Add",
+  "save": "Save",
+  "update": "Update",
+  "cancel": "Cancel",
+  "close": "Close",
+  "delete": "Delete",
+  "back": "Back",
+  "reset": "Reset",
+  "compose": "Compose",
+  "revoke": "Revoke",
+  "activate": "Activate",
+  "submit": "Submit",
+  "send_verification_email": "Send Verification Email",
+  "auto": "Auto",
+  "new_order": "New Order",
+  "login": "Login",
+  "register": "Register",
+  "create_new": "Create New",
+  "create": "Create",
+  "retry": "Retry",
+  "reload": "Reload",
+  "search": "Search",
+  "select": "Select",
+  "yes": "Yes",
+  "no": "No"
+}
diff --git a/web/src/lang/en/components/data-list.json b/web/src/lang/en/components/data-list.json
index 4e7e0a198..a0e695e47 100644
--- a/web/src/lang/en/components/data-list.json
+++ b/web/src/lang/en/components/data-list.json
@@ -1,10 +1,10 @@
-{
-    "print": "Print",
-    "export_to_excel": "Export To Excel",
-    "export_to_pdf": "Export To PDF",
-    "data_not_found": "Data Not Found",
-    "showing": "Showing",
-    "to": "to",
-    "of": "of",
-    "entries": "entries"
-}
\ No newline at end of file
+{
+  "print": "Print",
+  "export_to_excel": "Export To Excel",
+  "export_to_pdf": "Export To PDF",
+  "data_not_found": "Data Not Found",
+  "showing": "Showing",
+  "to": "to",
+  "of": "of",
+  "entries": "entries"
+}
diff --git a/web/src/lang/en/components/delete-modal.json b/web/src/lang/en/components/delete-modal.json
index a2b98cf7c..3f1f1f729 100644
--- a/web/src/lang/en/components/delete-modal.json
+++ b/web/src/lang/en/components/delete-modal.json
@@ -1,5 +1,5 @@
-{
-    "title": "Confirmation",
-    "desc_1": "Do you really want to delete these records?",
-    "desc_2": "This process cannot be undone."
-}
\ No newline at end of file
+{
+  "title": "Confirmation",
+  "desc_1": "Do you really want to delete these records?",
+  "desc_2": "This process cannot be undone."
+}
diff --git a/web/src/lang/en/components/dropdown.json b/web/src/lang/en/components/dropdown.json
index 729de557b..627f26cf0 100644
--- a/web/src/lang/en/components/dropdown.json
+++ b/web/src/lang/en/components/dropdown.json
@@ -1,36 +1,40 @@
-{
-    "placeholder": "Please Select",
-    "values": {
-        "statusDDL": {
-            "active": "Active",
-            "inactive": "Inactive",
-            "deleted": "Deleted"
-        },
-        "productGroupCategoryDDL": {
-            "product": "Product",
-            "service": "Service"
-        },
-        "unitCategoryDDL": {
-            "product": "Product",
-            "service": "Service"
-        },
-        "paymentTermTypeDDL": {
-            "pia": "Payment In Advance",
-            "net": "Payment In X Days After Invoice Date",
-            "eom": "End Of Month",
-            "cod": "Cash On Delivery",
-            "cnd": "Cash Next Delivery",
-            "cbs": "Cash Before Shipment"
-        },
-        "productTypeDDL": {
-            "raw": "Raw Material",
-            "wip": "Work In Progress",
-            "fg": "Finished Good",
-            "svc": "Service"
-        },
-        "switch": {
-            "on": "Yes",
-            "off": "No"
-        }
-    }
-}
\ No newline at end of file
+{
+  "placeholder": "Please Select",
+  "values": {
+    "switch": {
+      "on": "Yes",
+      "off": "No"
+    },
+    "statusDDL": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "deleted": "Deleted"
+    },
+    "paymentTermTypeDDL": {
+      "pia": "Payment In Advance",
+      "net": "Payment In X Days After Invoice Date",
+      "eom": "End Of Month",
+      "cod": "Cash On Delivery",
+      "cnd": "Cash Next Delivery",
+      "cbs": "Cash Before Shipment"
+    },
+    "roundingTypeDDL": {
+      "up": "Round Up",
+      "down": "Round Down"
+    },
+    "productCategoryDDL": {
+      "product": "Product",
+      "service": "Service"
+    },
+    "unitCategoryDDL": {
+      "product": "Product",
+      "service": "Service"
+    },
+    "productTypeDDL": {
+      "raw": "Raw Material",
+      "wip": "Work In Progress",
+      "fg": "Finished Good",
+      "svc": "Service"
+    }
+  }
+}
diff --git a/web/src/lang/en/components/file-upload.json b/web/src/lang/en/components/file-upload.json
index 7f4648c5e..409c7aec9 100644
--- a/web/src/lang/en/components/file-upload.json
+++ b/web/src/lang/en/components/file-upload.json
@@ -1,3 +1,6 @@
-{
-    "browse": "Browse"
-}
\ No newline at end of file
+{
+  "browse": "Browse",
+  "or_drag_drop": "or drag and drop",
+  "camera": "Camera",
+  "capture": "Capture"
+}
diff --git a/web/src/lang/en/components/language-switcher.json b/web/src/lang/en/components/language-switcher.json
index 0b3aab244..1d3195d25 100644
--- a/web/src/lang/en/components/language-switcher.json
+++ b/web/src/lang/en/components/language-switcher.json
@@ -1,6 +1,6 @@
 {
-    "language": {
-        "indonesia": "Indonesia",
-        "english": "English"
-    }
-}
\ No newline at end of file
+  "language": {
+    "indonesia": "Indonesia",
+    "english": "English"
+  }
+}
diff --git a/web/src/lang/en/components/menu.json b/web/src/lang/en/components/menu.json
index f848cf640..ec13420f2 100644
--- a/web/src/lang/en/components/menu.json
+++ b/web/src/lang/en/components/menu.json
@@ -1,27 +1,86 @@
-{
-    "dashboard": "Dashboard",
-    "main-dashboard": "Main Dashboard",
-    "main-demo": "Demo",
-    "company": "Company",
-    "company-company": "Company",
-    "company-branch": "Branch",
-    "company-employee": "Employee",
-    "company-warehouse": "Warehouse",
-    "product": "Product",
-    "product-product_group": "Product Group",
-    "product-brand": "Brand",
-    "product-unit": "Unit",
-    "product-product": "Product",
-    "product-service": "Service",
-    "supplier": "Supplier",
-    "supplier-supplier": "Supplier",
-    "purchase_order": "Purchase Order",
-    "purchase_order-purchaseorder": "Purchase Order",
-    "administrator": "Administrator",
-    "administrator-user": "User",
-    "devtool": "Dev Tool",
-    "devtool-devtool": "Dev Tool",
-    "devtool-playground": "Playground",
-    "devtool-playground-p1": "Playground 1",
-    "devtool-playground-p2": "Playground 2"
-}
\ No newline at end of file
+{
+  "dashboard": "Dashboard",
+  "main-dashboard": "Main Dashboard",
+  "main-demo": "Demo",
+  "company-management": "Company Management",
+  "company": "Company",
+  "branch": "Branch",
+  "employee": "Employee",
+  "warehouse": "Warehouse",
+  "investor": "Investor",
+  "cash-account": "Cash Account",
+  "customer-management": "Customer Management",
+  "customer-group": "Customer Group",
+  "customer": "Customer",
+  "product-management": "Product Management",
+  "product-category": "Product Category",
+  "brand": "Brand",
+  "unit": "Unit",
+  "vat-profile": "VAT Profile",
+  "product": "Product",
+  "product-service": "Service",
+  "service": "Service",
+  "supplier": "Supplier",
+  "inventory-management": "Inventory Management",
+  "purchase-management": "Purchasing",
+  "finance": "Finance",
+  "finance-management": "Finance Management",
+  "transaction": "Transaction",
+  "capital-opening": "Capital Opening",
+  "capital-transaction": "Capital Transaction",
+  "cash-transfer": "Cash Transfer",
+  "expense": "Expense",
+  "debt": "Debt",
+  "prepaid-expense": "Prepaid Expense",
+  "expense-payment": "Expense Payment",
+  "debt-category": "Debt Category",
+  "receivable-category": "Receivable Category",
+  "debt-creditor": "Creditor",
+  "income": "Income",
+  "receivable": "Receivable",
+  "prepaid-income": "Prepaid Income",
+  "income-payment": "Income Payment",
+  "stock-adjustment": "Stock Adjustment",
+  "purchase-order": "Purchase Order",
+  "purchase": "Purchase",
+  "purchase-receipt": "Purchase Receipt",
+  "purchase-order-item": "Purchase Order by Item",
+  "purchase-order-down-payment": "Purchase Order Down Payment",
+  "purchase-order-down-payment-not-fully-allocated": "PO Down Payment Not Fully Allocated",
+  "purchase-order-down-payment-refund": "Purchase Order Down Payment Refund",
+  "stock-transfer": "Stock Transfer",
+  "stock-transfer-item": "Stock Transfer by Item",
+  "stock-transfer-item-serial": "Stock Transfer Serial by Item",
+  "stock-adjustment-in-item": "Stock Adjustment In Item",
+  "stock-adjustment-in-item-serial": "Stock Adjustment In Item Serial",
+  "stock-adjustment-out-item": "Stock Adjustment Out Item",
+  "stock-adjustment-out-item-serial": "Stock Adjustment Out Item Serial",
+  "stock-adjustment-category": "Stock Adjustment Category",
+  "expense-category": "Expense Category",
+  "income-category": "Income Category",
+  "asset-category": "Asset Category",
+  "asset-unit": "Asset Unit",
+  "asset": "Asset",
+  "asset-adjustment": "Asset Adjustment",
+  "asset-purchase": "Asset Purchase",
+  "asset-sale": "Asset Sale",
+  "chart-of-account": "Chart of Account",
+  "journal-entry": "Journal Entry",
+  "purchase-additional-cost-category": "Purchase Additional Cost Category",
+  "purchase-additional-cost": "Purchase Additional Cost",
+  "purchase-additional-cost-payment": "Purchase Additional Cost Payment",
+  "master-data": "Master Data",
+  "report": "Report",
+  "financial-statement": "Financial Statement",
+  "balance-sheet": "Balance Sheet",
+  "product-with-remaining-stock": "Products With Remaining Stock",
+  "cash-account-with-remaining-balance": "Cash Accounts With Remaining Balance",
+  "journal-entry-detail": "Journal Entry per Item",
+  "administrator": "Administrator",
+  "administrator-user": "User",
+  "devtool": "Dev Tool",
+  "devtool-devtool": "Dev Tool",
+  "devtool-playground": "Playground",
+  "devtool-playground-p1": "Playground 1",
+  "devtool-playground-p2": "Playground 2"
+}
diff --git a/web/src/lang/en/components/profile-menu.json b/web/src/lang/en/components/profile-menu.json
index 9592f62c7..466690188 100644
--- a/web/src/lang/en/components/profile-menu.json
+++ b/web/src/lang/en/components/profile-menu.json
@@ -1,8 +1,8 @@
 {
-    "profile_ddl": {
-        "profile": "Profile",
-        "inbox": "Inbox",
-        "activity": "Activity",
-        "logout": "Logout"
-    }
-}
\ No newline at end of file
+  "profile_ddl": {
+    "profile": "Profile",
+    "inbox": "Inbox",
+    "activity": "Activity",
+    "logout": "Logout"
+  }
+}
diff --git a/web/src/lang/en/components/search-box.json b/web/src/lang/en/components/search-box.json
index c06c129f6..5c9550759 100644
--- a/web/src/lang/en/components/search-box.json
+++ b/web/src/lang/en/components/search-box.json
@@ -1,10 +1,10 @@
 {
-    "placeholder": {
-        "search": "Search..."
-    },
-    "search_group": {
-        "user": "Users",
-        "company": "Companies",
-        "branch": "Branches"
-    }
-}
\ No newline at end of file
+  "placeholder": {
+    "search": "Search..."
+  },
+  "search_group": {
+    "user": "Users",
+    "company": "Companies",
+    "branch": "Branches"
+  }
+}
diff --git a/web/src/lang/en/components/sidebar-pop.json b/web/src/lang/en/components/sidebar-pop.json
index f8ef0a637..975b5a79c 100644
--- a/web/src/lang/en/components/sidebar-pop.json
+++ b/web/src/lang/en/components/sidebar-pop.json
@@ -1,11 +1,11 @@
 {
-    "slide_over": {
-        "footer": {
-            "copyright": "Copyright",
-            "copyright_name": "GitzJoey",
-            "contributors": "Contributors",
-            "rights": "All rights reserved.",
-            "powered_by": "Powered By Coffee & Curiosity."
-        }
+  "slide_over": {
+    "footer": {
+      "copyright": "Copyright",
+      "copyright_name": "GitzJoey",
+      "contributors": "Contributors",
+      "rights": "All rights reserved.",
+      "powered_by": "Powered By Coffee & Curiosity."
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/web/src/lang/en/components/user-location.json b/web/src/lang/en/components/user-location.json
index e84971f43..6fff4ff8d 100644
--- a/web/src/lang/en/components/user-location.json
+++ b/web/src/lang/en/components/user-location.json
@@ -1,3 +1,3 @@
-{
-    "data_not_found": "Data Not Found"
-}
\ No newline at end of file
+{
+  "data_not_found": "Data Not Found"
+}
diff --git a/web/src/lang/en/views/asset.json b/web/src/lang/en/views/asset.json
new file mode 100644
index 000000000..8bedce805
--- /dev/null
+++ b/web/src/lang/en/views/asset.json
@@ -0,0 +1,35 @@
+{
+  "page_title": "Asset",
+  "actions": {
+    "create": "Create Asset",
+    "edit": "Edit Asset"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "asset_data": "Asset Data"
+  },
+  "fields": {
+    "asset_category_id": "Asset Category",
+    "asset_unit_id": "Asset Unit",
+    "code": "Code",
+    "name": "Name",
+    "status": "Status",
+    "remarks": "Remarks"
+  },
+  "table": {
+    "title": "Asset List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "asset_category": "Category",
+      "asset_unit": "Unit",
+      "status": "Status"
+    }
+  },
+  "alert": {
+    "delete_asset": {
+      "title": "Asset deleted",
+      "content": "The asset has been deleted successfully."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/asset_adjustment.json b/web/src/lang/en/views/asset_adjustment.json
new file mode 100644
index 000000000..b0a710a21
--- /dev/null
+++ b/web/src/lang/en/views/asset_adjustment.json
@@ -0,0 +1,37 @@
+{
+  "page_title": "Asset Adjustment",
+  "actions": {
+    "create": "Create Asset Adjustment",
+    "edit": "Edit Asset Adjustment"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "asset_adjustment_data": "Asset Adjustment Data",
+    "in_items": "Incoming Assets",
+    "out_items": "Outgoing Assets"
+  },
+  "fields": {
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "remarks": "Remarks",
+    "is_posted": "Is Posted",
+    "total_incoming_asset_qty": "Total Incoming Asset Qty",
+    "total_outgoing_asset_qty": "Total Outgoing Asset Qty"
+  },
+  "table": {
+    "title": "Asset Adjustment List",
+    "cols": {
+      "asset": "Asset",
+      "qty": "Qty",
+      "serials": "Serials"
+    }
+  },
+  "alert": {
+    "delete": {
+      "title": "Asset adjustment deleted",
+      "message": "The asset adjustment has been deleted successfully."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/asset_adjustment_in_item.json b/web/src/lang/en/views/asset_adjustment_in_item.json
new file mode 100644
index 000000000..4a0262a98
--- /dev/null
+++ b/web/src/lang/en/views/asset_adjustment_in_item.json
@@ -0,0 +1,16 @@
+{
+  "page_title": "Incoming Asset",
+  "actions": {
+    "create": "Add Incoming Asset"
+  },
+  "fields": {
+    "qty": "Qty",
+    "remarks": "Remarks"
+  },
+  "table": {
+    "title": "Incoming Asset List",
+    "cols": {
+      "asset": "Asset"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/asset_adjustment_out_item.json b/web/src/lang/en/views/asset_adjustment_out_item.json
new file mode 100644
index 000000000..d36641409
--- /dev/null
+++ b/web/src/lang/en/views/asset_adjustment_out_item.json
@@ -0,0 +1,16 @@
+{
+  "page_title": "Outgoing Asset",
+  "actions": {
+    "create": "Add Outgoing Asset"
+  },
+  "fields": {
+    "qty": "Qty",
+    "remarks": "Remarks"
+  },
+  "table": {
+    "title": "Outgoing Asset List",
+    "cols": {
+      "asset": "Asset"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/asset_category.json b/web/src/lang/en/views/asset_category.json
new file mode 100644
index 000000000..b1f148770
--- /dev/null
+++ b/web/src/lang/en/views/asset_category.json
@@ -0,0 +1,26 @@
+{
+  "page_title": "Asset Category",
+  "actions": {
+    "create": "Create Asset Category",
+    "edit": "Edit Asset Category"
+  },
+  "table": {
+    "title": "Asset Category List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "asset_category_data": "Asset Category Data"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name",
+    "estimated_useful_life_months": "Estimated Useful Life (Months)",
+    "remarks": "Remarks"
+  },
+  "alert": {
+    "delete_asset_category": {
+      "title": "Successfully Deleted Asset Category",
+      "content": "Asset category has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/asset_purchase.json b/web/src/lang/en/views/asset_purchase.json
new file mode 100644
index 000000000..927ce033e
--- /dev/null
+++ b/web/src/lang/en/views/asset_purchase.json
@@ -0,0 +1,48 @@
+{
+  "page_title": "Asset Purchase",
+  "actions": {
+    "create": "Create Asset Purchase",
+    "edit": "Edit Asset Purchase"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "asset_purchase_data": "Asset Purchase Data",
+    "items": "Asset Items",
+    "summary": "Summary"
+  },
+  "fields": {
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "due_days": "Due Days",
+    "supplier_id": "Supplier",
+    "remarks": "Remarks",
+    "is_posted": "Posted",
+    "item_total": "Item Total",
+    "additional_cost": "Additional Cost",
+    "rounding": "Rounding",
+    "amount_payable": "Amount Payable"
+  },
+  "table": {
+    "title": "Asset Purchase List",
+    "cols": {
+      "asset": "Asset",
+      "qty": "Qty",
+      "unit_price": "Unit Price",
+      "subtotal": "Subtotal",
+      "serials": "Serials"
+    }
+  },
+  "summary": {
+    "allocated_additional_cost": "Allocated Additional Cost",
+    "subtotal_after_additional_cost": "Subtotal After Additional Cost",
+    "unit_acquisition_cost": "Unit Acquisition Cost"
+  },
+  "alert": {
+    "delete": {
+      "title": "Asset purchase deleted successfully",
+      "message": "The asset purchase data has been deleted successfully."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/asset_purchase_item.json b/web/src/lang/en/views/asset_purchase_item.json
new file mode 100644
index 000000000..94c1eaea8
--- /dev/null
+++ b/web/src/lang/en/views/asset_purchase_item.json
@@ -0,0 +1,12 @@
+{
+  "page_title": "Asset Purchase Item",
+  "actions": {
+    "create": "Add Asset Item"
+  },
+  "fields": {
+    "qty": "Qty",
+    "unit_price": "Unit Price",
+    "subtotal": "Subtotal",
+    "remarks": "Remarks"
+  }
+}
diff --git a/web/src/lang/en/views/asset_sale.json b/web/src/lang/en/views/asset_sale.json
new file mode 100644
index 000000000..48b674755
--- /dev/null
+++ b/web/src/lang/en/views/asset_sale.json
@@ -0,0 +1,42 @@
+{
+  "page_title": "Asset Sale",
+  "actions": {
+    "create": "Create Asset Sale",
+    "edit": "Edit Asset Sale"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "asset_sale_data": "Asset Sale Data",
+    "items": "Asset Items",
+    "summary": "Summary"
+  },
+  "fields": {
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "due_days": "Due Days",
+    "customer_id": "Customer",
+    "remarks": "Remarks",
+    "is_posted": "Posted",
+    "item_total": "Item Total",
+    "rounding": "Rounding",
+    "amount_receivable": "Amount Receivable"
+  },
+  "table": {
+    "title": "Asset Sale List",
+    "cols": {
+      "asset": "Asset",
+      "qty": "Qty",
+      "unit_price": "Unit Price",
+      "subtotal": "Subtotal",
+      "serials": "Serials"
+    }
+  },
+  "alert": {
+    "delete": {
+      "title": "Asset sale deleted successfully",
+      "message": "The asset sale data has been deleted successfully."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/asset_sale_item.json b/web/src/lang/en/views/asset_sale_item.json
new file mode 100644
index 000000000..c322edf82
--- /dev/null
+++ b/web/src/lang/en/views/asset_sale_item.json
@@ -0,0 +1,12 @@
+{
+  "page_title": "Asset Sale Item",
+  "actions": {
+    "create": "Add Asset Item"
+  },
+  "fields": {
+    "qty": "Qty",
+    "unit_price": "Unit Price",
+    "subtotal": "Subtotal",
+    "remarks": "Remarks"
+  }
+}
diff --git a/web/src/lang/en/views/asset_unit.json b/web/src/lang/en/views/asset_unit.json
new file mode 100644
index 000000000..d9a577d4b
--- /dev/null
+++ b/web/src/lang/en/views/asset_unit.json
@@ -0,0 +1,29 @@
+{
+  "page_title": "Asset Unit",
+  "actions": {
+    "create": "Create Asset Unit",
+    "edit": "Edit Asset Unit"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "asset_unit_data": "Asset Unit Data"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name",
+    "description": "Description"
+  },
+  "table": {
+    "title": "Asset Unit List",
+    "cols": {
+      "code": "Code",
+      "name": "Name"
+    }
+  },
+  "alert": {
+    "delete_asset_unit": {
+      "title": "Asset unit deleted",
+      "content": "The asset unit has been deleted successfully."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/balance_sheet.json b/web/src/lang/en/views/balance_sheet.json
new file mode 100644
index 000000000..6be90134e
--- /dev/null
+++ b/web/src/lang/en/views/balance_sheet.json
@@ -0,0 +1,31 @@
+{
+  "page_title": "Balance Sheet",
+  "table": {
+    "title": "Balance Sheet"
+  },
+  "fields": {
+    "end_date": "As Of Date",
+    "code": "Code",
+    "name": "Account",
+    "debit": "Debit",
+    "credit": "Credit",
+    "balance": "Balance"
+  },
+  "actions": {
+    "expand_all": "Expand All",
+    "collapse_all": "Collapse All"
+  },
+  "labels": {
+    "group_total": "Group Total",
+    "direct_mutation": "Direct Activity"
+  },
+  "summary": {
+    "asset": "Total Assets",
+    "liability": "Total Liabilities",
+    "equity": "Total Equity",
+    "liability_and_equity": "Total Liabilities + Equity",
+    "difference": "Balance Sheet Difference",
+    "status_balanced": "Balance Sheet Balanced",
+    "status_unbalanced": "Balance Sheet Not Balanced"
+  }
+}
diff --git a/web/src/lang/en/views/branch.json b/web/src/lang/en/views/branch.json
index c2f181881..5888ac2bd 100644
--- a/web/src/lang/en/views/branch.json
+++ b/web/src/lang/en/views/branch.json
@@ -1,43 +1,43 @@
-{
-    "page_title": "Branch",
-    "table": {
-        "title": "Branch List",
-        "cols": {
-            "code": "Code",
-            "name": "Name",
-            "address": "Address",
-            "city": "City",
-            "contact": "Contact",
-            "is_main": "Main Branch",
-            "remarks": "Remarks",
-            "status": "Status"
-        }
-    },
-    "actions": {
-        "create": "Create Branch",
-        "edit": "Edit Branch",
-        "show": "Show Branch",
-        "delete": "Delete Branch"
-    },
-    "field_groups": {
-        "company_info": "Company Information",
-        "branch_data": "Branch Data"
-    },
-    "fields": {
-        "company_id": "Company",
-        "code": "Code",
-        "name": "Name",
-        "address": "Address",
-        "city": "City",
-        "contact": "Contact",
-        "is_main": "Main Branch",
-        "remarks": "Remarks",
-        "status": "Status"
-    },
-    "alert": {
-        "delete_branch": {
-            "title": "Delete Branch",
-            "content": "Branch Deleted Successfully"
-        }
-    }
-}
\ No newline at end of file
+{
+  "page_title": "Branch",
+  "table": {
+    "title": "Branch List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "address": "Address",
+      "city": "City",
+      "contact": "Contact",
+      "is_main": "Main Branch",
+      "remarks": "Remarks",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Create Branch",
+    "edit": "Edit Branch",
+    "show": "Show Branch",
+    "delete": "Delete Branch"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "branch_data": "Branch Data"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name",
+    "address": "Address",
+    "city": "City",
+    "contact": "Contact",
+    "is_main": "Main Branch",
+    "remarks": "Remarks",
+    "status": "Status"
+  },
+  "alert": {
+    "delete_branch": {
+      "title": "Delete Branch",
+      "content": "Branch Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/brand.json b/web/src/lang/en/views/brand.json
new file mode 100644
index 000000000..7b3e757c3
--- /dev/null
+++ b/web/src/lang/en/views/brand.json
@@ -0,0 +1,31 @@
+{
+  "page_title": "Brand",
+  "table": {
+    "title": "Brand List",
+    "cols": {
+      "code": "Code",
+      "name": "Name"
+    }
+  },
+  "actions": {
+    "create": "Create Brand",
+    "edit": "Edit Brand",
+    "show": "Show Brand",
+    "delete": "Delete Brand"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "brand_data": "Brand Data"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name"
+  },
+  "alert": {
+    "delete_brand": {
+      "title": "Delete Brand",
+      "content": "Brand Successfully Deleted"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/capital_opening.json b/web/src/lang/en/views/capital_opening.json
new file mode 100644
index 000000000..14a7689f6
--- /dev/null
+++ b/web/src/lang/en/views/capital_opening.json
@@ -0,0 +1,39 @@
+{
+  "page_title": "Capital Opening",
+  "table": {
+    "title": "Capital Opening List",
+    "cols": {
+      "code": "Code",
+      "date": "Date",
+      "investor": "Investor",
+      "cash_account": "Cash Account",
+      "amount": "Amount"
+    }
+  },
+  "actions": {
+    "create": "Create Capital Opening",
+    "edit": "Edit Capital Opening",
+    "show": "Show Capital Opening",
+    "delete": "Delete Capital Opening"
+  },
+  "fields": {
+    "code": "Code",
+    "company": "Company",
+    "branch": "Branch",
+    "date": "Date",
+    "investor": "Investor",
+    "cash_account": "Cash Account",
+    "amount": "Amount",
+    "remarks": "Remarks"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "capital_opening_data": "Capital Opening Data"
+  },
+  "alert": {
+    "delete_capital_opening": {
+      "title": "Delete Capital Opening",
+      "content": "Capital Opening Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/capital_transaction.json b/web/src/lang/en/views/capital_transaction.json
new file mode 100644
index 000000000..ae94c9475
--- /dev/null
+++ b/web/src/lang/en/views/capital_transaction.json
@@ -0,0 +1,45 @@
+{
+  "page_title": "Capital Transaction",
+  "table": {
+    "title": "Capital Transaction List",
+    "cols": {
+      "code": "Code",
+      "date": "Date",
+      "investor": "Investor",
+      "type": "Type",
+      "cash_account": "Cash Account",
+      "amount": "Amount"
+    }
+  },
+  "actions": {
+    "create": "Create Capital Transaction",
+    "edit": "Edit Capital Transaction",
+    "show": "Show Capital Transaction",
+    "delete": "Delete Capital Transaction"
+  },
+  "fields": {
+    "code": "Code",
+    "company": "Company",
+    "branch": "Branch",
+    "date": "Date",
+    "investor": "Investor",
+    "type": "Type",
+    "cash_account": "Cash Account",
+    "amount": "Amount",
+    "remarks": "Remarks"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "capital_transaction_data": "Capital Transaction Data"
+  },
+  "types": {
+    "in": "In",
+    "out": "Out"
+  },
+  "alert": {
+    "delete_capital_transaction": {
+      "title": "Delete Capital Transaction",
+      "content": "Capital Transaction Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/cash_account.json b/web/src/lang/en/views/cash_account.json
new file mode 100644
index 000000000..d965569cb
--- /dev/null
+++ b/web/src/lang/en/views/cash_account.json
@@ -0,0 +1,48 @@
+{
+  "page_title": "Cash Account",
+  "page_title_with_remaining_balance": "Cash Accounts With Remaining Balance",
+  "balance_suffix": "Balance",
+  "with_remaining_balance_suffix": "Remaining Balance",
+  "table": {
+    "title": "Cash Account List",
+    "cols": {
+      "code": "Code",
+      "company": "Company",
+      "name": "Name",
+      "is_bank": "Bank",
+      "is_active": "Is Active",
+      "remarks": "Remarks",
+      "remaining_balance": "Remaining Balance"
+    }
+  },
+  "actions": {
+    "create": "Create Cash Account",
+    "edit": "Edit Cash Account",
+    "show": "Show Cash Account",
+    "delete": "Delete Cash Account"
+  },
+  "fields": {
+    "code": "Code",
+    "company": "Company",
+    "name": "Name",
+    "is_bank": "Bank",
+    "is_active": "Is Active",
+    "remarks": "Remarks",
+    "remaining_balance": "Remaining Balance",
+    "with_remaining_balance_end_date": "Balance as of date"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "cash_account_data": "Cash Account Data"
+  },
+  "types": {
+    "bank": "Bank",
+    "cash": "Cash"
+  },
+  "alert": {
+    "delete_cash_account": {
+      "title": "Delete Cash Account",
+      "content": "Cash Account Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/cash_transfer.json b/web/src/lang/en/views/cash_transfer.json
new file mode 100644
index 000000000..2cc4e9946
--- /dev/null
+++ b/web/src/lang/en/views/cash_transfer.json
@@ -0,0 +1,40 @@
+{
+  "page_title": "Cash Transfer",
+  "table": {
+    "title": "Cash Transfer List",
+    "cols": {
+      "code": "Code",
+      "date": "Date",
+      "source_cash_account": "Source Cash Account",
+      "destination_cash_account": "Destination Cash Account",
+      "amount": "Amount"
+    }
+  },
+  "actions": {
+    "create": "Create Cash Transfer",
+    "edit": "Edit Cash Transfer",
+    "show": "Show Cash Transfer",
+    "delete": "Delete Cash Transfer"
+  },
+  "fields": {
+    "code": "Code",
+    "company": "Company",
+    "branch": "Branch",
+    "date": "Date",
+    "source_cash_account": "Source Cash Account",
+    "destination_cash_account": "Destination Cash Account",
+    "amount": "Amount",
+    "remarks": "Remarks"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "transfer_data": "Cash Transfer Data"
+  },
+  "alert": {
+    "delete_cash_transfer": {
+      "title": "Delete Cash Transfer",
+      "content": "Cash Transfer Deleted Successfully"
+    }
+  }
+}
+
diff --git a/web/src/lang/en/views/chart_of_account.json b/web/src/lang/en/views/chart_of_account.json
new file mode 100644
index 000000000..6cf7aafe7
--- /dev/null
+++ b/web/src/lang/en/views/chart_of_account.json
@@ -0,0 +1,58 @@
+{
+  "page_title": "Chart of Account",
+  "actions": {
+    "create": "Create Chart of Account",
+    "edit": "Edit Chart of Account"
+  },
+  "table": {
+    "title": "Chart of Account Tree List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "chart_of_account_data": "Chart of Account Data"
+  },
+  "fields": {
+    "parent": "Parent",
+    "code": "Code",
+    "name": "Name",
+    "scope": "Scope",
+    "system_key": "System Key",
+    "source_type": "Source Type",
+    "source_id": "Source ID",
+    "account_type": "Account Type",
+    "normal_balance": "Normal Balance",
+    "level": "Level",
+    "is_group": "Group",
+    "is_active": "Active",
+    "remarks": "Remarks",
+    "child_count": "Child Count"
+  },
+  "options": {
+    "placeholder": "Select...",
+    "boolean": {
+      "yes": "Yes",
+      "no": "No"
+    },
+    "scope": {
+      "system": "System",
+      "user": "User"
+    },
+    "account_type": {
+      "asset": "Asset",
+      "liability": "Liability",
+      "equity": "Equity",
+      "income": "Income",
+      "expense": "Expense"
+    },
+    "normal_balance": {
+      "debit": "Debit",
+      "credit": "Credit"
+    }
+  },
+  "alert": {
+    "delete_chart_of_account": {
+      "title": "Successfully Deleted Chart of Account",
+      "content": "Chart of account has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/company.json b/web/src/lang/en/views/company.json
index cac1bd8bc..fc804295a 100644
--- a/web/src/lang/en/views/company.json
+++ b/web/src/lang/en/views/company.json
@@ -1,35 +1,35 @@
-{
-    "page_title": "Company",
-    "table": {
-        "title": "Company List",
-        "cols": {
-            "code": "Code",
-            "name": "Name",
-            "address": "Address",
-            "default": "Default",
-            "status": "Status"
-        }
-    },
-    "actions": {
-        "create": "Create Company",
-        "edit": "Edit Company",
-        "show": "Show Company",
-        "delete": "Delete Company"
-    },
-    "field_groups": {
-        "company_data": "Company Data"
-    },
-    "fields": {
-        "code": "Code",
-        "name": "Name",
-        "address": "Address",
-        "default": "Default",
-        "status": "Status"
-    },
-    "alert": {
-        "delete_company": {
-            "title": "Delete Company",
-            "content": "Company Deleted Successfully"
-        }
-    }
-}
\ No newline at end of file
+{
+  "page_title": "Company",
+  "table": {
+    "title": "Company List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "address": "Address",
+      "default": "Default",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Create Company",
+    "edit": "Edit Company",
+    "show": "Show Company",
+    "delete": "Delete Company"
+  },
+  "field_groups": {
+    "company_data": "Company Data"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name",
+    "address": "Address",
+    "default": "Default",
+    "status": "Status"
+  },
+  "alert": {
+    "delete_company": {
+      "title": "Delete Company",
+      "content": "Company Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/customer.json b/web/src/lang/en/views/customer.json
new file mode 100644
index 000000000..6a32f09e3
--- /dev/null
+++ b/web/src/lang/en/views/customer.json
@@ -0,0 +1,55 @@
+{
+  "page_title": "Customer",
+  "table": {
+    "title": "Customer List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "is_member": "Member",
+      "group": "Group",
+      "zone": "Zone",
+      "max_open_invoice": "Max Open Invoice",
+      "max_outstanding_invoice": "Max Outstanding Invoice",
+      "max_invoice_age": "Max Invoice Age",
+      "payment_term_type": "Payment Term Type",
+      "payment_term": "Payment Term",
+      "taxable_enterprise": "Taxable Enterprise",
+      "tax_id": "Tax ID",
+      "remarks": "Remarks",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Create Customer",
+    "edit": "Edit Customer",
+    "show": "Show Customer",
+    "delete": "Delete Customer"
+  },
+  "field_groups": {
+    "general_information": "General Information",
+    "credit_limit": "Credit Limit",
+    "tax_information": "Tax Information"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name",
+    "is_member": "Member",
+    "group": "Group",
+    "zone": "Zone",
+    "max_open_invoice": "Max Open Invoice",
+    "max_outstanding_invoice": "Max Outstanding Invoice",
+    "max_invoice_age": "Max Invoice Age",
+    "payment_term_type": "Payment Term Type",
+    "payment_term": "Payment Term",
+    "taxable_enterprise": "Taxable Enterprise",
+    "tax_id": "Tax ID",
+    "remarks": "Remarks",
+    "status": "Status"
+  },
+  "alert": {
+    "delete": {
+      "title": "Delete Customer",
+      "message": "Customer Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/customer_group.json b/web/src/lang/en/views/customer_group.json
new file mode 100644
index 000000000..8edf54281
--- /dev/null
+++ b/web/src/lang/en/views/customer_group.json
@@ -0,0 +1,66 @@
+{
+  "page_title": "Customer Group",
+  "table": {
+    "title": "Customer Group List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "max_open_invoice": "Max Open Invoice",
+      "max_outstanding_invoice": "Max Outstanding Invoice",
+      "max_invoice_age": "Max Invoice Age",
+      "payment_term_type": "Payment Term Type",
+      "payment_term": "Payment Term",
+      "selling_point": "Selling Point",
+      "selling_point_multiple": "Selling Point Multiple",
+      "sell_at_cost": "Sell at Cost",
+      "price_markup_percent": "Price Markup (%)",
+      "price_markup_nominal": "Price Markup (Nominal)",
+      "price_markdown_percent": "Price Markdown (%)",
+      "price_markdown_nominal": "Price Markdown (Nominal)",
+      "round_on": "Round On",
+      "rounding_type": "Rounding Type",
+      "rounding_digit": "Rounding Digit",
+      "remarks": "Remarks",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Create Customer Group",
+    "edit": "Edit Customer Group",
+    "show": "Show Customer Group",
+    "delete": "Delete Customer Group"
+  },
+  "field_groups": {
+    "general_information": "General Information",
+    "credit_limit": "Credit Limit",
+    "pricing_and_points": "Pricing and Points",
+    "rounding_rules": "Rounding Rules"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name",
+    "max_open_invoice": "Max Open Invoice",
+    "max_outstanding_invoice": "Max Outstanding Invoice",
+    "max_invoice_age": "Max Invoice Age",
+    "payment_term_type": "Payment Term Type",
+    "payment_term": "Payment Term",
+    "selling_point": "Selling Point",
+    "selling_point_multiple": "Selling Point Multiple",
+    "sell_at_cost": "Sell at Cost",
+    "price_markup_percent": "Price Markup (%)",
+    "price_markup_nominal": "Price Markup (Nominal)",
+    "price_markdown_percent": "Price Markdown (%)",
+    "price_markdown_nominal": "Price Markdown (Nominal)",
+    "round_on": "Round On",
+    "rounding_type": "Rounding Type",
+    "rounding_digit": "Rounding Digit",
+    "remarks": "Remarks",
+    "status": "Status"
+  },
+  "alert": {
+    "delete_customer_group": {
+      "title": "Delete Customer Group",
+      "content": "Customer Group Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/debt.json b/web/src/lang/en/views/debt.json
new file mode 100644
index 000000000..a5fd80ca4
--- /dev/null
+++ b/web/src/lang/en/views/debt.json
@@ -0,0 +1,56 @@
+{
+  "page_title": "Debt",
+  "actions": {
+    "create": "Create Debt",
+    "edit": "Edit Debt"
+  },
+  "table": {
+    "title": "Debt List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "debt_data": "Debt Data",
+    "balance_summary": "Balance Summary",
+    "payments": "Payments"
+  },
+  "fields": {
+    "company": "Company",
+    "branch": "Branch",
+    "category": "Debt Category",
+    "party_type": "Party Type",
+    "party": "Party",
+    "creditor": "Creditor",
+    "supplier": "Supplier",
+    "cash_account": "Cash Account",
+    "code": "Code",
+    "date": "Date",
+    "due_days": "Due Days",
+    "direct_amount_received": "Direct Amount Received",
+    "opening_amount_due": "Opening Amount Due",
+    "amount_total": "Total Debt",
+    "amount_paid_by_cash_account": "Paid via Cash",
+    "amount_paid_by_stock_adjustment": "Paid via Stock Adjustment",
+    "amount_due": "Amount Due",
+    "is_paid_off": "Debt Status",
+    "remarks": "Remarks",
+    "payment_code": "Payment Code",
+    "payment_date": "Payment Date",
+    "payment_cash_account": "Payment Cash Account",
+    "payment_amount": "Payment Value",
+    "payment_remarks": "Payment Remarks"
+  },
+  "party_types": {
+    "creditor": "Creditor",
+    "supplier": "Supplier"
+  },
+  "status": {
+    "paid_off": "Paid Off",
+    "not_paid_off": "Not Paid Off"
+  },
+  "alert": {
+    "delete_debt": {
+      "title": "Successfully Deleted Debt",
+      "content": "Debt has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/debt_category.json b/web/src/lang/en/views/debt_category.json
new file mode 100644
index 000000000..89df0f7ec
--- /dev/null
+++ b/web/src/lang/en/views/debt_category.json
@@ -0,0 +1,25 @@
+{
+  "page_title": "Debt Category",
+  "actions": {
+    "create": "Create Debt Category",
+    "edit": "Edit Debt Category"
+  },
+  "table": {
+    "title": "Debt Category List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "debt_category_data": "Debt Category Data"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name",
+    "sequence": "Sequence"
+  },
+  "alert": {
+    "delete_debt_category": {
+      "title": "Successfully Deleted Debt Category",
+      "content": "Debt category has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/debt_creditor.json b/web/src/lang/en/views/debt_creditor.json
new file mode 100644
index 000000000..831250328
--- /dev/null
+++ b/web/src/lang/en/views/debt_creditor.json
@@ -0,0 +1,25 @@
+{
+  "page_title": "Creditor",
+  "actions": {
+    "create": "Create Creditor",
+    "edit": "Edit Creditor"
+  },
+  "table": {
+    "title": "Creditor List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "debt_creditor_data": "Creditor Data"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name",
+    "remarks": "Remarks"
+  },
+  "alert": {
+    "delete_debt_creditor": {
+      "title": "Successfully Deleted Creditor",
+      "content": "Creditor has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/error.json b/web/src/lang/en/views/error.json
index 38ba58e4b..67a394795 100644
--- a/web/src/lang/en/views/error.json
+++ b/web/src/lang/en/views/error.json
@@ -1,9 +1,9 @@
-{
-    "title": "Error",
-    "code": {
-        "401": "Unauthenticated",
-        "403": "Forbidden",
-        "500": "Internal Error",
-        "10000": "Please Choose User Location"
-    }
-}
\ No newline at end of file
+{
+  "title": "Error",
+  "code": {
+    "401": "Unauthenticated",
+    "403": "Forbidden",
+    "500": "Internal Error",
+    "10000": "Please Choose User Location"
+  }
+}
diff --git a/web/src/lang/en/views/expense.json b/web/src/lang/en/views/expense.json
new file mode 100644
index 000000000..7545908e6
--- /dev/null
+++ b/web/src/lang/en/views/expense.json
@@ -0,0 +1,44 @@
+{
+  "page_title": "Expense",
+  "actions": {
+    "create": "Create Expense",
+    "edit": "Edit Expense"
+  },
+  "table": {
+    "title": "Expense List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "expense_data": "Expense Data",
+    "payable_summary": "Payable Summary",
+    "payments": "Payments",
+    "images": "Images"
+  },
+  "fields": {
+    "company": "Company",
+    "branch": "Branch",
+    "category": "Category",
+    "code": "Code",
+    "date": "Date",
+    "due_days": "Due Days",
+    "paid_immediately_cash_account": "Paid Immediately Cash Account",
+    "amount_paid_immediately": "Amount Paid Immediately",
+    "amount_payable": "Amount Payable",
+    "amount_payable_paid": "Amount Payable Paid",
+    "amount_payable_due": "Amount Payable Due",
+    "is_amount_payable_paid_off": "Paid Off Status",
+    "amount_total": "Amount Total",
+    "remarks": "Remarks",
+    "images": "Images"
+  },
+  "status": {
+    "paid_off": "Paid Off",
+    "not_paid_off": "Not Paid Off"
+  },
+  "alert": {
+    "delete_expense": {
+      "title": "Successfully Deleted Expense",
+      "content": "Expense has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/expense_category.json b/web/src/lang/en/views/expense_category.json
new file mode 100644
index 000000000..93739a0bb
--- /dev/null
+++ b/web/src/lang/en/views/expense_category.json
@@ -0,0 +1,37 @@
+{
+  "page_title": "Expense Category",
+  "actions": {
+    "create": "Create Expense Category",
+    "edit": "Edit Expense Category"
+  },
+  "table": {
+    "title": "Expense Category Tree List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "expense_category_data": "Expense Category Data"
+  },
+  "fields": {
+    "parent": "Parent",
+    "category_type": "Category Type",
+    "code": "Code",
+    "name": "Name",
+    "sequence": "Sequence",
+    "child_count": "Child Count"
+  },
+  "options": {
+    "category_type": {
+      "expense": "Operating Expense",
+      "other_expense": "Other Expense"
+    }
+  },
+  "descriptions": {
+    "category_type": "Used only when this category has no parent."
+  },
+  "alert": {
+    "delete_expense_category": {
+      "title": "Successfully Deleted Expense Category",
+      "content": "Expense category has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/expense_payment.json b/web/src/lang/en/views/expense_payment.json
new file mode 100644
index 000000000..cecad06b5
--- /dev/null
+++ b/web/src/lang/en/views/expense_payment.json
@@ -0,0 +1,28 @@
+{
+  "page_title": "Expense Payment",
+  "actions": {
+    "create": "Create Expense Payment",
+    "edit": "Edit Expense Payment"
+  },
+  "table": {
+    "title": "Expense Payment List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "expense_payment_data": "Expense Payment Data"
+  },
+  "fields": {
+    "expense": "Expense",
+    "code": "Code",
+    "date": "Date",
+    "cash_account": "Cash Account",
+    "amount": "Amount",
+    "remarks": "Remarks"
+  },
+  "alert": {
+    "delete_expense_payment": {
+      "title": "Successfully Deleted Expense Payment",
+      "content": "Expense payment has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/forgot_password.json b/web/src/lang/en/views/forgot_password.json
index e5ae26e4a..32d28ae4a 100644
--- a/web/src/lang/en/views/forgot_password.json
+++ b/web/src/lang/en/views/forgot_password.json
@@ -1,11 +1,11 @@
-{
-    "title": "Reset Password",
-    "page_title": "Reset Password",
-    "page_title_desc": "Please enter your email",
-    "fields": {
-        "email": "Email"
-    },
-    "alert": {
-        "successfully_send_link": "We have emailed your password reset link."
-    }
-}
\ No newline at end of file
+{
+  "title": "Reset Password",
+  "page_title": "Reset Password",
+  "page_title_desc": "Please enter your email",
+  "fields": {
+    "email": "Email"
+  },
+  "alert": {
+    "successfully_send_link": "We have emailed your password reset link."
+  }
+}
diff --git a/web/src/lang/en/views/income.json b/web/src/lang/en/views/income.json
new file mode 100644
index 000000000..73b95f02b
--- /dev/null
+++ b/web/src/lang/en/views/income.json
@@ -0,0 +1,44 @@
+{
+  "page_title": "Income",
+  "actions": {
+    "create": "Create Income",
+    "edit": "Edit Income"
+  },
+  "table": {
+    "title": "Income List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "income_data": "Income Data",
+    "receivable_summary": "Receivable Summary",
+    "payments": "Payments",
+    "images": "Images"
+  },
+  "fields": {
+    "company": "Company",
+    "branch": "Branch",
+    "category": "Category",
+    "code": "Code",
+    "date": "Date",
+    "due_days": "Due Days",
+    "paid_immediately_cash_account": "Paid Immediately Cash Account",
+    "amount_paid_immediately": "Amount Paid Immediately",
+    "amount_receivable": "Amount Receivable",
+    "amount_receivable_paid": "Amount Receivable Collected",
+    "amount_receivable_due": "Amount Receivable Due",
+    "is_amount_receivable_paid_off": "Paid Off Status",
+    "amount_total": "Amount Total",
+    "remarks": "Remarks",
+    "images": "Images"
+  },
+  "status": {
+    "paid_off": "Paid Off",
+    "not_paid_off": "Not Paid Off"
+  },
+  "alert": {
+    "delete_income": {
+      "title": "Successfully Deleted Income",
+      "content": "Income has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/income_category.json b/web/src/lang/en/views/income_category.json
new file mode 100644
index 000000000..746ad43d2
--- /dev/null
+++ b/web/src/lang/en/views/income_category.json
@@ -0,0 +1,27 @@
+{
+  "page_title": "Income Category",
+  "actions": {
+    "create": "Create Income Category",
+    "edit": "Edit Income Category"
+  },
+  "table": {
+    "title": "Income Category Tree List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "income_category_data": "Income Category Data"
+  },
+  "fields": {
+    "parent": "Parent",
+    "code": "Code",
+    "name": "Name",
+    "sequence": "Sequence",
+    "child_count": "Child Count"
+  },
+  "alert": {
+    "delete_income_category": {
+      "title": "Successfully Deleted Income Category",
+      "content": "Income category has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/income_payment.json b/web/src/lang/en/views/income_payment.json
new file mode 100644
index 000000000..e759bd8dd
--- /dev/null
+++ b/web/src/lang/en/views/income_payment.json
@@ -0,0 +1,28 @@
+{
+  "page_title": "Income Payment",
+  "actions": {
+    "create": "Create Income Payment",
+    "edit": "Edit Income Payment"
+  },
+  "table": {
+    "title": "Income Payment List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "income_payment_data": "Income Payment Data"
+  },
+  "fields": {
+    "income": "Income",
+    "code": "Code",
+    "date": "Date",
+    "cash_account": "Cash Account",
+    "amount": "Amount",
+    "remarks": "Remarks"
+  },
+  "alert": {
+    "delete_income_payment": {
+      "title": "Successfully Deleted Income Payment",
+      "content": "Income payment has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/investor.json b/web/src/lang/en/views/investor.json
new file mode 100644
index 000000000..66a4ab04b
--- /dev/null
+++ b/web/src/lang/en/views/investor.json
@@ -0,0 +1,34 @@
+{
+  "page_title": "Investor",
+  "table": {
+    "title": "Investor List",
+    "cols": {
+      "code": "Code",
+      "company": "Company",
+      "name": "Name",
+      "remarks": "Remarks"
+    }
+  },
+  "actions": {
+    "create": "Create Investor",
+    "edit": "Edit Investor",
+    "show": "Show Investor",
+    "delete": "Delete Investor"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "investor_data": "Investor Data"
+  },
+  "fields": {
+    "code": "Code",
+    "company": "Company",
+    "name": "Name",
+    "remarks": "Remarks"
+  },
+  "alert": {
+    "delete_investor": {
+      "title": "Delete Investor",
+      "content": "Investor Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/journal_entry.json b/web/src/lang/en/views/journal_entry.json
new file mode 100644
index 000000000..fc1fcaf57
--- /dev/null
+++ b/web/src/lang/en/views/journal_entry.json
@@ -0,0 +1,56 @@
+{
+  "page_title": "Journal Entry",
+  "report_entry_detail_title": "Journal Entry per Item",
+  "actions": {
+    "create": "Create Journal Entry",
+    "edit": "Edit Journal Entry",
+    "add_item": "Add Item"
+  },
+  "table": {
+    "title": "Journal Entry List",
+    "entry_detail_title": "Journal Entry per Item List"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "journal_entry_data": "Journal Entry Data",
+    "items": "Journal Items",
+    "summary": "Summary"
+  },
+  "fields": {
+    "company": "Company",
+    "branch": "Branch",
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "include_system_journals": "Show System Journals",
+    "source_type": "Source Type",
+    "source_id": "Source ID",
+    "reference_no": "Reference No",
+    "remarks": "Remarks",
+    "items": "Journal Items",
+    "item": "Item",
+    "chart_of_account": "Account",
+    "debit": "Debit",
+    "credit": "Credit",
+    "item_remarks": "Item Remarks",
+    "total_debit": "Total Debit",
+    "total_credit": "Total Credit",
+    "balance_status": "Balance Status"
+  },
+  "options": {
+    "balance": {
+      "balanced": "Balanced",
+      "unbalanced": "Unbalanced"
+    }
+  },
+  "helper": {
+    "single_side_amount": "Each item may only contain debit or credit amount."
+  },
+  "alert": {
+    "delete_journal_entry": {
+      "title": "Journal Deleted",
+      "content": "Journal entry has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/login.json b/web/src/lang/en/views/login.json
index 44918e1e0..87cd28103 100644
--- a/web/src/lang/en/views/login.json
+++ b/web/src/lang/en/views/login.json
@@ -1,18 +1,18 @@
-{
-    "title": "Login",
-    "fields": {
-        "email": "Email",
-        "password": "Password",
-        "remember_me": "Remember Me",
-        "forgot_pass": "Forgot Password",
-        "terms_and_cond": "Terms & Condition",
-        "privacy_policy": "Privacy Policy",
-        "2fa": {
-            "label": "Two Factor Challenge",
-            "label_description": "",
-            "code": "Code",
-            "recovery_code": "Recovery Code",
-            "use_recovery_codes": "Use Recovery Codes"
-        }
-    }
-}
\ No newline at end of file
+{
+  "title": "Login",
+  "fields": {
+    "email": "Email",
+    "password": "Password",
+    "remember_me": "Remember Me",
+    "forgot_pass": "Forgot Password",
+    "terms_and_cond": "Terms & Condition",
+    "privacy_policy": "Privacy Policy",
+    "2fa": {
+      "label": "Two Factor Challenge",
+      "label_description": "",
+      "code": "Code",
+      "recovery_code": "Recovery Code",
+      "use_recovery_codes": "Use Recovery Codes"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/prepaid_expense.json b/web/src/lang/en/views/prepaid_expense.json
new file mode 100644
index 000000000..75ff8db5d
--- /dev/null
+++ b/web/src/lang/en/views/prepaid_expense.json
@@ -0,0 +1,54 @@
+{
+  "page_title": "Prepaid Expense",
+  "actions": {
+    "create": "Create Prepaid Expense",
+    "edit": "Edit Prepaid Expense"
+  },
+  "table": {
+    "title": "Prepaid Expense List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "prepaid_expense_data": "Prepaid Expense Data",
+    "payable_summary": "Payable Summary",
+    "payments": "Payments",
+    "images": "Images"
+  },
+  "fields": {
+    "company": "Company",
+    "branch": "Branch",
+    "category": "Category",
+    "code": "Code",
+    "date": "Date",
+    "estimated_useful_life": "Estimated Useful Life",
+    "due_days": "Due Days",
+    "paid_immediately_cash_account": "Paid Immediately Cash Account",
+    "amount_paid_immediately": "Amount Paid Immediately",
+    "amount_payable": "Amount Payable",
+    "amount_payable_paid": "Amount Payable Paid",
+    "amount_payable_due": "Amount Payable Due",
+    "is_amount_payable_paid_off": "Paid Off Status",
+    "amount_total": "Amount Total",
+    "remarks": "Remarks",
+    "images": "Images"
+  },
+  "hints": {
+    "estimated_useful_life": "Enter the value in months."
+  },
+  "units": {
+    "month": "month",
+    "months": "months",
+    "year": "year",
+    "years": "years"
+  },
+  "status": {
+    "paid_off": "Paid Off",
+    "not_paid_off": "Not Paid Off"
+  },
+  "alert": {
+    "delete_prepaid_expense": {
+      "title": "Successfully Deleted Prepaid Expense",
+      "content": "Prepaid expense has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/prepaid_income.json b/web/src/lang/en/views/prepaid_income.json
new file mode 100644
index 000000000..c7b978d21
--- /dev/null
+++ b/web/src/lang/en/views/prepaid_income.json
@@ -0,0 +1,54 @@
+{
+  "page_title": "Prepaid Income",
+  "actions": {
+    "create": "Create Prepaid Income",
+    "edit": "Edit Prepaid Income"
+  },
+  "table": {
+    "title": "Prepaid Income List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "prepaid_income_data": "Prepaid Income Data",
+    "receivable_summary": "Receivable Summary",
+    "payments": "Payments",
+    "images": "Images"
+  },
+  "fields": {
+    "company": "Company",
+    "branch": "Branch",
+    "category": "Category",
+    "code": "Code",
+    "date": "Date",
+    "estimated_useful_life": "Estimated Useful Life",
+    "due_days": "Due Days",
+    "paid_immediately_cash_account": "Paid Immediately Cash Account",
+    "amount_paid_immediately": "Amount Paid Immediately",
+    "amount_receivable": "Amount Receivable",
+    "amount_receivable_paid": "Amount Receivable Collected",
+    "amount_receivable_due": "Amount Receivable Due",
+    "is_amount_receivable_paid_off": "Paid Off Status",
+    "amount_total": "Amount Total",
+    "remarks": "Remarks",
+    "images": "Images"
+  },
+  "hints": {
+    "estimated_useful_life": "Enter the value in months."
+  },
+  "units": {
+    "month": "month",
+    "months": "months",
+    "year": "year",
+    "years": "years"
+  },
+  "status": {
+    "paid_off": "Paid Off",
+    "not_paid_off": "Not Paid Off"
+  },
+  "alert": {
+    "delete_prepaid_income": {
+      "title": "Successfully Deleted Prepaid Income",
+      "content": "Prepaid income has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/product.json b/web/src/lang/en/views/product.json
new file mode 100644
index 000000000..0c89e2026
--- /dev/null
+++ b/web/src/lang/en/views/product.json
@@ -0,0 +1,85 @@
+{
+  "page_title": "Product",
+  "page_title_with_remaining_stock": "Products With Remaining Stock",
+  "with_remaining_stock_suffix": "Stock",
+  "table": {
+    "title": "Product List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "vat_profile": "VAT Profile",
+      "category": "Category",
+      "brand": "Brand",
+      "unit": "Unit",
+      "price": "Price",
+      "point": "Point",
+      "status": "Status",
+      "image": "Image"
+    }
+  },
+  "actions": {
+    "create": "Create Product",
+    "edit": "Edit Product",
+    "show": "Show Product",
+    "delete": "Delete Product",
+    "add_unit": "Add Unit"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "product_data": "Product Data",
+    "price_tax_settings": "Price & Tax Settings",
+    "unit_settings": "Unit Settings",
+    "other_settings": "Other Settings"
+  },
+  "detail": {
+    "info_title": "Product Information",
+    "settings_title": "Settings & Tax",
+    "units_title": "Product Units"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name",
+    "category_id": "Category",
+    "brand_id": "Brand",
+    "default_vat_profile_id": "VAT Profile",
+    "unit_id": "Unit",
+    "base_unit": "Base Unit",
+    "base_unit_price": "Price per Base Unit",
+    "other_unit": "Other Unit",
+    "images": "Images",
+    "type": "Type",
+    "conversion_value": "C. Value",
+    "is_base": "Is Base Unit",
+    "is_primary_unit": "Is Primary Unit",
+    "unit_code": "Unit Code",
+    "is_manufacturer_sku": "Is Manufacture SKU",
+    "price": "Price",
+    "point": "Point",
+    "is_price_include_vat": "Price Include VAT",
+    "is_use_serial_number": "Use Serial Number",
+    "serial_number": "Serial Number",
+    "is_expirable": "Expirable",
+    "status": "Status",
+    "remarks": "Remarks",
+    "with_remaining_stock_end_date": "Stock as of date"
+  },
+  "status": {
+    "active": "Active",
+    "inactive": "Inactive"
+  },
+  "alert": {
+    "create": {
+      "title": "Create Product",
+      "message": "Product Created Successfully"
+    },
+    "update": {
+      "title": "Update Product",
+      "message": "Product Updated Successfully"
+    },
+    "delete": {
+      "title": "Delete Product",
+      "message": "Product Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/product_category.json b/web/src/lang/en/views/product_category.json
new file mode 100644
index 000000000..20434e6e2
--- /dev/null
+++ b/web/src/lang/en/views/product_category.json
@@ -0,0 +1,37 @@
+{
+  "page_title": "Product Category",
+  "table": {
+    "title": "Product Category List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "type": "Type"
+    }
+  },
+  "actions": {
+    "create": "Create Product Category",
+    "edit": "Edit Product Category",
+    "show": "Show Product Category",
+    "delete": "Delete Product Category"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "product_category_data": "Product Category Data"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name",
+    "type": "Type"
+  },
+  "type": {
+    "product": "Product",
+    "service": "Service"
+  },
+  "alert": {
+    "delete_product_category": {
+      "title": "Delete Product Category",
+      "content": "Product Category Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/product_service.json b/web/src/lang/en/views/product_service.json
new file mode 100644
index 000000000..e3e66def0
--- /dev/null
+++ b/web/src/lang/en/views/product_service.json
@@ -0,0 +1,58 @@
+{
+  "page_title": "Product Service",
+  "table": {
+    "title": "Product Service List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "category": "Category",
+      "unit": "Unit",
+      "price": "Price",
+      "point": "Point",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Create Product Service",
+    "edit": "Edit Product Service",
+    "show": "Show Product Service",
+    "delete": "Delete Product Service"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "product_data": "Product Data",
+    "price_tax_settings": "Price & Tax Settings",
+    "other_settings": "Other Settings"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name",
+    "category_id": "Category",
+    "default_vat_profile_id": "VAT Profile",
+    "unit_id": "Unit",
+    "price": "Price",
+    "point": "Point",
+    "is_price_include_vat": "Price Include VAT",
+    "status": "Status",
+    "remarks": "Remarks"
+  },
+  "status": {
+    "active": "Active",
+    "inactive": "Inactive"
+  },
+  "alert": {
+    "create": {
+      "title": "Create Product Service",
+      "message": "Product Service Created Successfully"
+    },
+    "update": {
+      "title": "Update Product Service",
+      "message": "Product Service Updated Successfully"
+    },
+    "delete": {
+      "title": "Delete Product Service",
+      "message": "Product Service Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/profile.json b/web/src/lang/en/views/profile.json
index 5d05f04b7..51cdf44a7 100644
--- a/web/src/lang/en/views/profile.json
+++ b/web/src/lang/en/views/profile.json
@@ -1,69 +1,69 @@
-{
-    "title": "Profile",
-    "field_groups": {
-        "user_profile": "User Profile",
-        "email_verification": "Email Verification",
-        "personal_information": "Personal Information",
-        "account_settings": "Account Settings",
-        "roles": "Roles",
-        "change_password": "Change Password",
-        "api_token": "API Token",
-        "two_factor_authentication": "Two Factor Authentication"
-    },
-    "fields": {
-        "name": "Name",
-        "first_name": "First Name",
-        "last_name": "Last Name",
-        "address": "Address",
-        "city": "City",
-        "postal_code": "Postal Code",
-        "country": "Country",
-        "tax_id": "Tax ID",
-        "remarks": "Remarks",
-        "email": "Email",
-        "ic_num": "IC No.",
-        "settings": {
-            "theme": "Themes",
-            "date_format": "Date Format",
-            "time_format": "Time Format"
-        },
-        "change_password": {
-            "current_password": "Current Password",
-            "password": "New Password",
-            "password_confirmation": "Confirm Password"
-        },
-        "api_token": {
-            "total_token_generated": "Total Token Generated",
-            "reset": "Reset Token"
-        },
-        "2fa": {
-            "status": "2FA Authentication Status",
-            "qr-code": "QR Code",
-            "qr-code_description_1": "Please Scan This QR Code In Your Google Authenticator App",
-            "qr-code_description_2": "Download Google Authenticator In Google Play",
-            "qr-code_description_3": "",
-            "qr-code_description_4": "",
-            "recovery-codes": "Recovery Codes",
-            "recovery-codes_description_1": "Write Down And Save These Recovery Codes In A Safe Place.",
-            "recovery-codes_description_2": "This Codes Will Not Be Accessable Once You Close This Page.",
-            "secret-key": "Secret Key",
-            "secret-key_description_1": "Write Down And Save These Secret Key In A Safe Place.",
-            "secret-key_description_2": "This Secret Key Will Not Be Accessable Once You Close This Page.",
-            "confirm_password": "Confirm Password",
-            "confirm_password_error": "The Provided Password Was Incorrect.",
-            "confirm_2fa_auth_description_1": "Your Two Factor Authentication Also Need To Be Activated.",
-            "confirm_2fa_auth_description_2": "Please Input The Code Displayed In Google Authenticator App",
-            "confirm_2fa_auth": "Code From Google Authenticator",
-            "confirm_2fa_auth_error": "The Provided Code Was Incorrect."
-        }
-    },
-    "tooltip": {
-        "email_verified": "Email Verified"
-    },
-    "alert": {
-        "verification_email_sent": {
-            "title": "Email Verification",
-            "content": "Verification Email Sent"
-        }
-    }
-}
\ No newline at end of file
+{
+  "title": "Profile",
+  "field_groups": {
+    "user_profile": "User Profile",
+    "email_verification": "Email Verification",
+    "personal_information": "Personal Information",
+    "account_settings": "Account Settings",
+    "roles": "Roles",
+    "change_password": "Change Password",
+    "api_token": "API Token",
+    "two_factor_authentication": "Two Factor Authentication"
+  },
+  "fields": {
+    "name": "Name",
+    "first_name": "First Name",
+    "last_name": "Last Name",
+    "address": "Address",
+    "city": "City",
+    "postal_code": "Postal Code",
+    "country": "Country",
+    "tax_id": "Tax ID",
+    "remarks": "Remarks",
+    "email": "Email",
+    "ic_num": "IC No.",
+    "settings": {
+      "theme": "Themes",
+      "date_format": "Date Format",
+      "time_format": "Time Format"
+    },
+    "change_password": {
+      "current_password": "Current Password",
+      "password": "New Password",
+      "password_confirmation": "Confirm Password"
+    },
+    "api_token": {
+      "total_token_generated": "Total Token Generated",
+      "reset": "Reset Token"
+    },
+    "2fa": {
+      "status": "2FA Authentication Status",
+      "qr-code": "QR Code",
+      "qr-code_description_1": "Please Scan This QR Code In Your Google Authenticator App",
+      "qr-code_description_2": "Download Google Authenticator In Google Play",
+      "qr-code_description_3": "",
+      "qr-code_description_4": "",
+      "recovery-codes": "Recovery Codes",
+      "recovery-codes_description_1": "Write Down And Save These Recovery Codes In A Safe Place.",
+      "recovery-codes_description_2": "This Codes Will Not Be Accessable Once You Close This Page.",
+      "secret-key": "Secret Key",
+      "secret-key_description_1": "Write Down And Save These Secret Key In A Safe Place.",
+      "secret-key_description_2": "This Secret Key Will Not Be Accessable Once You Close This Page.",
+      "confirm_password": "Confirm Password",
+      "confirm_password_error": "The Provided Password Was Incorrect.",
+      "confirm_2fa_auth_description_1": "Your Two Factor Authentication Also Need To Be Activated.",
+      "confirm_2fa_auth_description_2": "Please Input The Code Displayed In Google Authenticator App",
+      "confirm_2fa_auth": "Code From Google Authenticator",
+      "confirm_2fa_auth_error": "The Provided Code Was Incorrect."
+    }
+  },
+  "tooltip": {
+    "email_verified": "Email Verified"
+  },
+  "alert": {
+    "verification_email_sent": {
+      "title": "Email Verification",
+      "content": "Verification Email Sent"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/purchase.json b/web/src/lang/en/views/purchase.json
new file mode 100644
index 000000000..89525eff2
--- /dev/null
+++ b/web/src/lang/en/views/purchase.json
@@ -0,0 +1,114 @@
+{
+  "page_title": "Purchase",
+  "table": {
+    "title": "Purchase List"
+  },
+  "actions": {
+    "create": "Create Purchase",
+    "create_direct": "Create Direct",
+    "create_manual": "Create Manual",
+    "edit": "Edit Purchase",
+    "show": "Show Purchase",
+    "delete": "Delete Purchase"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "purchase_data": "Purchase Data",
+    "summary": "Summary",
+    "status": "Status",
+    "items": "Items",
+    "additional_costs": "Additional Costs",
+    "status_breakdown": "Status Breakdown"
+  },
+  "fields": {
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "supplier_id": "Supplier",
+    "purchase_order_id": "Purchase Order",
+    "purchase_order_id_optional": "Leave empty if not created from a purchase order",
+    "due_days": "Due Days",
+    "direct_receipt_warehouse_id": "Direct Receipt Warehouse",
+    "tax_invoice_number": "Tax Invoice Number",
+    "tax_invoice_vat_base": "Tax Invoice VAT Base",
+    "tax_invoice_vat": "Tax Invoice VAT",
+    "remarks": "Remarks",
+    "receipt_mode": "Receipt Mode",
+    "progress_status": "Progress Status",
+    "amount_payable": "Amount Payable",
+    "amount_payable_preview": "Amount Payable Preview",
+    "amount_paid_immediately": "Amount Paid Immediately",
+    "amount_paid_total": "Amount Paid",
+    "amount_due": "Amount Due",
+    "purchase_additional_cost_category_id": "Additional Cost Category",
+    "paid_immediately_cash_account_id": "Immediate Payment Cash Account",
+    "item_total_before_global_discount": "Total Before Global Discount",
+    "global_discount": "Global Discount",
+    "global_discount_total": "Global Discount Total",
+    "item_total_after_global_discount": "Total After Global Discount",
+    "items_subtotal_after_discount": "Items Subtotal After Discount",
+    "vat_base": "VAT Base",
+    "vat": "VAT",
+    "vat_profile_id": "VAT Profile",
+    "vat_rate": "VAT Rate",
+    "vat_base_fraction": "VAT Base Fraction",
+    "additional_cost": "Additional Cost",
+    "rounding": "Rounding",
+    "is_paid_off": "Paid Off",
+    "is_posted": "Posted",
+    "product_unit_id": "Product",
+    "qty": "Qty",
+    "product_unit_qty_base": "Base Qty",
+    "qty_received_base": "Qty Received Base",
+    "qty_outstanding_base": "Qty Outstanding Base",
+    "qty_excess_base": "Qty Excess Base",
+    "product_unit_price": "Unit Price",
+    "product_unit_conversion_value": "Unit Conversion",
+    "product_unit_is_price_include_vat": "Price Includes VAT",
+    "product_unit_price_discounts": "Unit Price Discounts",
+    "product_unit_price_discounts_empty": "No unit price discounts yet",
+    "price_after_discount": "Unit Price After Discount",
+    "subtotal_discounts": "Subtotal Discounts",
+    "subtotal_discounts_empty": "No subtotal discounts yet",
+    "subtotal": "Subtotal",
+    "subtotal_after_discount": "Subtotal After Discount",
+    "serials": "Serial Numbers",
+    "serials_empty": "No serial numbers yet",
+    "item_price_breakdown": "Item Price Breakdown",
+    "item_additional_details": "Item Additional Details",
+    "sequence": "Sequence",
+    "discount_type": "Discount Type",
+    "discount_value": "Discount Value",
+    "subtotal_after_vat": "Subtotal After VAT",
+    "item_total_count": "Total Items",
+    "item_matched_count": "Matched Items",
+    "item_less_count": "Less Items",
+    "item_more_count": "More Items",
+    "item_unlinked_count": "Unlinked Items",
+    "manual_receipt_count": "Manual Receipt Count",
+    "items_empty": "No purchase items yet",
+    "additional_costs_hint": "Add additional costs when there are purchase-related charges outside item values.",
+    "additional_costs_empty": "No additional costs yet",
+    "global_discounts": "Global Discounts",
+    "global_discounts_empty": "No global discounts yet"
+  },
+  "alert": {
+    "create": {
+      "title": "Save Purchase",
+      "message": "Purchase has been saved"
+    },
+    "update": {
+      "title": "Update Purchase",
+      "message": "Purchase has been updated"
+    },
+    "delete": {
+      "title": "Delete Purchase",
+      "message": "Purchase has been deleted"
+    }
+  },
+  "form_placeholder": {
+    "title": "Purchase form is not finished yet",
+    "description": "Create and edit routes are connected, but the detailed purchase form still needs to be completed."
+  }
+}
diff --git a/web/src/lang/en/views/purchase_additional_cost.json b/web/src/lang/en/views/purchase_additional_cost.json
new file mode 100644
index 000000000..516f4f47f
--- /dev/null
+++ b/web/src/lang/en/views/purchase_additional_cost.json
@@ -0,0 +1,35 @@
+{
+  "page_title": "Purchase Additional Cost",
+  "actions": {
+    "create": "Create Purchase Additional Cost",
+    "edit": "Edit Purchase Additional Cost"
+  },
+  "table": {
+    "title": "Purchase Additional Cost List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "purchase_additional_cost_data": "Purchase Additional Cost Data"
+  },
+  "fields": {
+    "purchase": "Purchase",
+    "category": "Category",
+    "code": "Code",
+    "date": "Date",
+    "due_days": "Due Days",
+    "paid_immediately_cash_account": "Paid Immediately Cash Account",
+    "amount_paid_immediately": "Amount Paid Immediately",
+    "amount_payable": "Amount Payable",
+    "amount_payable_paid": "Amount Payable Paid",
+    "amount_payable_due": "Amount Payable Due",
+    "is_amount_payable_paid_off": "Paid Off Status",
+    "amount_total": "Amount Total",
+    "remarks": "Remarks"
+  },
+  "alert": {
+    "delete_purchase_additional_cost": {
+      "title": "Successfully Deleted Purchase Additional Cost",
+      "content": "Purchase additional cost has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/purchase_additional_cost_category.json b/web/src/lang/en/views/purchase_additional_cost_category.json
new file mode 100644
index 000000000..b4e6b85ef
--- /dev/null
+++ b/web/src/lang/en/views/purchase_additional_cost_category.json
@@ -0,0 +1,24 @@
+{
+  "page_title": "Purchase Additional Cost Category",
+  "actions": {
+    "create": "Create Purchase Additional Cost Category",
+    "edit": "Edit Purchase Additional Cost Category"
+  },
+  "table": {
+    "title": "Purchase Additional Cost Category List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "purchase_additional_cost_category_data": "Purchase Additional Cost Category Data"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name"
+  },
+  "alert": {
+    "delete_purchase_additional_cost_category": {
+      "title": "Successfully Deleted Purchase Additional Cost Category",
+      "content": "Purchase additional cost category has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/purchase_additional_cost_payment.json b/web/src/lang/en/views/purchase_additional_cost_payment.json
new file mode 100644
index 000000000..b71764b9f
--- /dev/null
+++ b/web/src/lang/en/views/purchase_additional_cost_payment.json
@@ -0,0 +1,28 @@
+{
+  "page_title": "Purchase Additional Cost Payment",
+  "actions": {
+    "create": "Create Purchase Additional Cost Payment",
+    "edit": "Edit Purchase Additional Cost Payment"
+  },
+  "table": {
+    "title": "Purchase Additional Cost Payment List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "purchase_additional_cost_payment_data": "Purchase Additional Cost Payment Data"
+  },
+  "fields": {
+    "purchase_additional_cost": "Purchase Additional Cost",
+    "code": "Code",
+    "date": "Date",
+    "cash_account": "Cash Account",
+    "amount": "Amount",
+    "remarks": "Remarks"
+  },
+  "alert": {
+    "delete_purchase_additional_cost_payment": {
+      "title": "Successfully Deleted Purchase Additional Cost Payment",
+      "content": "Purchase additional cost payment has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/purchase_order.json b/web/src/lang/en/views/purchase_order.json
new file mode 100644
index 000000000..1094fb5e6
--- /dev/null
+++ b/web/src/lang/en/views/purchase_order.json
@@ -0,0 +1,127 @@
+{
+  "page_title": "Purchase Order",
+  "table": {
+    "title": "Purchase Order List",
+    "cols": {
+      "code": "Code",
+      "date": "Date",
+      "supplier": "Supplier",
+      "due_days": "Due Days",
+      "grand_total": "Amount Payable",
+      "remarks": "Remarks"
+    }
+  },
+  "actions": {
+    "create": "Create Purchase Order",
+    "edit": "Edit Purchase Order",
+    "show": "Show Purchase Order",
+    "delete": "Delete Purchase Order"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "purchase_order_data": "Purchase Order Data",
+    "items": "Items",
+    "item_additional_details": "Item Additional Details",
+    "progress": "Progress",
+    "summary": "Summary",
+    "global_discounts": "Global Discounts",
+    "down_payments": "Down Payments",
+    "refunded_down_payments": "Down Payment Refunds"
+  },
+  "filters": {
+    "down_payment_allocation_status": "Down Payment Allocation Status",
+    "down_payment_allocation_status_not_fully_allocated": "Not / Not Fully Allocated",
+    "down_payment_allocation_status_fully_allocated": "Fully Allocated",
+    "progress_status": "Progress Status",
+    "progress_status_unlinked": "Unlinked",
+    "progress_status_unmatched": "Unmatched",
+    "progress_status_matched": "Matched"
+  },
+  "fields": {
+    "company_id": "Company",
+    "branch_id": "Branch",
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "due_days": "Due Days",
+    "supplier_id": "Supplier",
+    "remarks": "Remarks",
+    "grand_total": "Amount Payable",
+    "amount_payable": "Amount Payable",
+    "global_discount": "Global Discount",
+    "global_discounts": "Global Discounts",
+    "price_discount": "Price Discount",
+    "down_payment": "Down Payment",
+    "down_payments": "Down Payments",
+    "amount_paid_down_payment": "Down Payment Amount",
+    "amount_allocated": "Allocated Amount",
+    "amount_allocated_down_payment": "Allocated Down Payment Amount",
+    "amount_refunded_down_payment": "Refunded Down Payment Amount",
+    "amount_available_down_payment": "Available Down Payment Amount",
+    "refunded_down_payments": "Refunded Down Payments",
+    "progress_status": "Progress Status",
+    "item_total_count": "Total Items",
+    "item_matched_count": "Matched Items",
+    "item_less_count": "Short Items",
+    "item_more_count": "Excess Items",
+    "item_unlinked_count": "Unlinked Items",
+    "product_unit_id": "Product",
+    "product_unit_code": "Product Unit Code",
+    "unit_name": "Unit",
+    "qty": "Qty",
+    "qty_purchased_base": "Purchased Base Qty",
+    "qty_outstanding_base": "Outstanding Base Qty",
+    "qty_excess_base": "Excess Base Qty",
+    "product_unit_conversion_value": "Conversion Value",
+    "product_unit_price": "Unit Price",
+    "item_grand_total": "Item Amount Payable",
+    "product_unit_price_discounts": "Unit Price Discounts",
+    "product_unit_price_discounts_empty": "No unit price discount data yet",
+    "price_after_discount": "Unit Price After Discount",
+    "subtotal": "Subtotal After Unit Price Discount",
+    "subtotal_discount": "Subtotal Discount",
+    "subtotal_discounts_empty": "No subtotal discount data yet",
+    "subtotal_after_discount": "Subtotal After Discount",
+    "subtotal_after_vat": "Subtotal After VAT",
+    "item_price_breakdown": "Item Price Breakdown",
+    "item_additional_details": "Item Additional Details",
+    "items_grand_total_after_discount": "Total Item Amount Payable",
+    "items_subtotal_after_discount": "Total Subtotal After Discount",
+    "global_discounts_summary_hint": "Configure global discounts for the total of all items.",
+    "global_discount_total": "Global Discount Total",
+    "item_total_before_global_discount": "Total Before Global Discount",
+    "item_total_after_global_discount": "Total After Global Discount",
+    "item_total_after_vat": "Item Total After VAT",
+    "vat_base": "VAT Base",
+    "vat": "VAT",
+    "amount_payable_preview": "Amount Payable",
+    "rounding": "Rounding",
+    "subtotal_discounts": "Subtotal Discounts",
+    "product_unit_is_price_include_vat": "VAT Included",
+    "vat_profile_id": "VAT Profile",
+    "vat_rate": "VAT Rate",
+    "vat_base_fraction": "VAT Base Fraction",
+    "vat_base_numerator": "VAT Base Numerator",
+    "vat_base_denominator": "VAT Base Denominator",
+    "sequence": "Sequence",
+    "discount_type": "Discount Type",
+    "discount_value": "Discount Value",
+    "cash_account_id": "Cash Account",
+    "amount": "Amount"
+  },
+  "alert": {
+    "create": {
+      "title": "Create Purchase Order",
+      "message": "Purchase Order has been created"
+    },
+    "update": {
+      "title": "Edit Purchase Order",
+      "message": "Purchase Order has been updated"
+    },
+    "delete": {
+      "title": "Delete Purchase Order",
+      "message": "Purchase Order has been deleted"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/purchase_order_down_payment.json b/web/src/lang/en/views/purchase_order_down_payment.json
new file mode 100644
index 000000000..3c517fc0b
--- /dev/null
+++ b/web/src/lang/en/views/purchase_order_down_payment.json
@@ -0,0 +1,4 @@
+{
+  "page_title": "Purchase Order Down Payment List",
+  "page_title_not_fully_allocated": "Purchase Order Down Payment Not Fully Allocated List"
+}
diff --git a/web/src/lang/en/views/purchase_order_down_payment_refund.json b/web/src/lang/en/views/purchase_order_down_payment_refund.json
new file mode 100644
index 000000000..827a0f62b
--- /dev/null
+++ b/web/src/lang/en/views/purchase_order_down_payment_refund.json
@@ -0,0 +1,3 @@
+{
+  "page_title": "Purchase Order Down Payment Refund List"
+}
diff --git a/web/src/lang/en/views/purchase_order_item.json b/web/src/lang/en/views/purchase_order_item.json
new file mode 100644
index 000000000..7900c1a33
--- /dev/null
+++ b/web/src/lang/en/views/purchase_order_item.json
@@ -0,0 +1,3 @@
+{
+  "page_title": "Purchase Order Item List"
+}
diff --git a/web/src/lang/en/views/purchase_receipt.json b/web/src/lang/en/views/purchase_receipt.json
new file mode 100644
index 000000000..ac0cd3618
--- /dev/null
+++ b/web/src/lang/en/views/purchase_receipt.json
@@ -0,0 +1,61 @@
+{
+  "page_title": "Purchase Receipt",
+  "table": {
+    "title": "Purchase Receipt List"
+  },
+  "actions": {
+    "create": "Create Purchase Receipt",
+    "edit": "Edit Purchase Receipt",
+    "show": "Show Purchase Receipt",
+    "delete": "Delete Purchase Receipt"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "purchase_receipt_data": "Purchase Receipt Data",
+    "status": "Status",
+    "remarks": "Remarks",
+    "items": "Items"
+  },
+  "fields": {
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "supplier_id": "Supplier",
+    "purchase_id": "Purchase",
+    "warehouse_id": "Warehouse",
+    "remarks": "Remarks",
+    "is_from_direct_purchase": "From Direct Purchase",
+    "is_linked_to_purchase": "Linked To Purchase",
+    "is_posted": "Posted",
+    "item_count": "Item Count",
+    "product_unit_id": "Product",
+    "qty": "Qty",
+    "product_unit_conversion_value": "Conversion Value",
+    "serial_count": "Serial Count",
+    "items_empty": "No receipt items yet",
+    "purchase_link_hint": "This receipt is linked to a purchase. Supplier follows the purchase, and items can be reloaded from the selected purchase."
+  },
+  "alert": {
+    "create": {
+      "title": "Create Purchase Receipt",
+      "message": "Purchase Receipt created successfully"
+    },
+    "update": {
+      "title": "Update Purchase Receipt",
+      "message": "Purchase Receipt updated successfully"
+    },
+    "delete": {
+      "title": "Delete Purchase Receipt",
+      "message": "Purchase Receipt has been deleted"
+    },
+    "edit_blocked_direct": {
+      "title": "Edit Purchase Receipt",
+      "message": "Direct purchase receipts are managed from the purchase document and cannot be edited here."
+    }
+  },
+  "form_placeholder": {
+    "title": "Purchase receipt form is not finished yet",
+    "description": "Create and edit routes are connected, but the detailed purchase receipt form still needs to be completed."
+  }
+}
diff --git a/web/src/lang/en/views/receivable.json b/web/src/lang/en/views/receivable.json
new file mode 100644
index 000000000..681aa084b
--- /dev/null
+++ b/web/src/lang/en/views/receivable.json
@@ -0,0 +1,50 @@
+{
+  "page_title": "Receivable",
+  "actions": {
+    "create": "Create Receivable",
+    "edit": "Edit Receivable"
+  },
+  "table": {
+    "title": "Receivable List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "receivable_data": "Receivable Data",
+    "balance_summary": "Balance Summary",
+    "payments": "Payments"
+  },
+  "fields": {
+    "company": "Company",
+    "branch": "Branch",
+    "category": "Receivable Category",
+    "customer": "Customer",
+    "cash_account": "Cash Account",
+    "code": "Code",
+    "date": "Date",
+    "due_days": "Due Days",
+    "direct_amount_received": "Direct Amount Received",
+    "opening_amount_due": "Opening Amount Due",
+    "amount_total": "Total Receivable",
+    "amount_paid_by_cash_account": "Paid via Cash",
+    "amount_paid_by_stock_adjustment": "Paid via Stock Adjustment",
+    "amount_due": "Amount Due",
+    "is_paid_off": "Receivable Status",
+    "remarks": "Remarks",
+    "payment_code": "Payment Code",
+    "payment_date": "Payment Date",
+    "payment_cash_account": "Payment Cash Account",
+    "payment_amount": "Payment Value",
+    "payment_remarks": "Payment Remarks"
+  },
+  "status": {
+    "paid_off": "Paid Off",
+    "not_paid_off": "Not Paid Off"
+  },
+  "alert": {
+    "delete_receivable": {
+      "title": "Successfully Deleted Receivable",
+      "content": "Receivable has been deleted."
+    }
+  }
+}
+
diff --git a/web/src/lang/en/views/receivable_category.json b/web/src/lang/en/views/receivable_category.json
new file mode 100644
index 000000000..1871e9281
--- /dev/null
+++ b/web/src/lang/en/views/receivable_category.json
@@ -0,0 +1,25 @@
+{
+  "page_title": "Receivable Category",
+  "actions": {
+    "create": "Create Receivable Category",
+    "edit": "Edit Receivable Category"
+  },
+  "table": {
+    "title": "Receivable Category List"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "receivable_category_data": "Receivable Category Data"
+  },
+  "fields": {
+    "code": "Code",
+    "name": "Name",
+    "sequence": "Sequence"
+  },
+  "alert": {
+    "delete_receivable_category": {
+      "title": "Successfully Deleted Receivable Category",
+      "content": "Receivable category has been deleted."
+    }
+  }
+}
diff --git a/web/src/lang/en/views/register.json b/web/src/lang/en/views/register.json
index 9e1049b8e..b0069efb9 100644
--- a/web/src/lang/en/views/register.json
+++ b/web/src/lang/en/views/register.json
@@ -1,14 +1,14 @@
-{
-    "title": "Register",
-    "fields": {
-        "name": "Name",
-        "email": "Email",
-        "password": "Password",
-        "password_confirmation": "Password Confirmation",
-        "terms": "Terms",
-        "agree_1": "I agree to terms ",
-        "agree_2": "& conditions",
-        "already_member": "I already have a membership",
-        "terms_and_cond": "Terms & Condition"
-    }
-}
\ No newline at end of file
+{
+  "title": "Register",
+  "fields": {
+    "name": "Name",
+    "email": "Email",
+    "password": "Password",
+    "password_confirmation": "Password Confirmation",
+    "terms": "Terms",
+    "agree_1": "I agree to terms ",
+    "agree_2": "& conditions",
+    "already_member": "I already have a membership",
+    "terms_and_cond": "Terms & Condition"
+  }
+}
diff --git a/web/src/lang/en/views/reset_password.json b/web/src/lang/en/views/reset_password.json
index 7a7cbae25..2052a4cd6 100644
--- a/web/src/lang/en/views/reset_password.json
+++ b/web/src/lang/en/views/reset_password.json
@@ -1,13 +1,13 @@
-{
-    "title": "Reset Password",
-    "page_title": "Reset Password",
-    "page_title_desc": "Please enter your new password",
-    "fields": {
-        "email": "Email",
-        "password": "Password",
-        "password_confirmation": "Confirm password"
-    },
-    "alert": {
-        "successfully_reset_password": "Password changed."
-    }
-}
\ No newline at end of file
+{
+  "title": "Reset Password",
+  "page_title": "Reset Password",
+  "page_title_desc": "Please enter your new password",
+  "fields": {
+    "email": "Email",
+    "password": "Password",
+    "password_confirmation": "Confirm password"
+  },
+  "alert": {
+    "successfully_reset_password": "Password changed."
+  }
+}
diff --git a/web/src/lang/en/views/stock_adjustment.json b/web/src/lang/en/views/stock_adjustment.json
new file mode 100644
index 000000000..36214fd9e
--- /dev/null
+++ b/web/src/lang/en/views/stock_adjustment.json
@@ -0,0 +1,59 @@
+{
+  "page_title": "Stock Adjustment",
+  "table": {
+    "title": "Stock Adjustment List",
+    "cols": {
+      "code": "Code",
+      "date": "Date",
+      "category": "Category",
+      "in_warehouse": "In Warehouse",
+      "out_warehouse": "Out Warehouse",
+      "is_posted": "Posted",
+      "remarks": "Remarks"
+    }
+  },
+  "actions": {
+    "create": "Create Stock Adjustment",
+    "edit": "Edit Stock Adjustment",
+    "show": "Show Stock Adjustment",
+    "delete": "Delete Stock Adjustment"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "stock_adjustment_data": "Stock Adjustment Data",
+    "in_items": "In Items",
+    "out_items": "Out Items"
+  },
+  "fields": {
+    "company_id": "Company",
+    "branch_id": "Branch",
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "stock_adjustment_code": "Stock Adjustment Code",
+    "product_name": "Product Name",
+    "product_unit_code": "Product Code",
+    "category_id": "Category",
+    "in_warehouse_id": "In Warehouse",
+    "out_warehouse_id": "Out Warehouse",
+    "remarks": "Remarks",
+    "is_posted": "Posted",
+    "in_items": "In Items",
+    "out_items": "Out Items"
+  },
+  "alert": {
+    "create": {
+      "title": "Create Stock Adjustment",
+      "message": "Stock Adjustment Created Successfully"
+    },
+    "update": {
+      "title": "Update Stock Adjustment",
+      "message": "Stock Adjustment Updated Successfully"
+    },
+    "delete": {
+      "title": "Delete Stock Adjustment",
+      "message": "Stock Adjustment Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/stock_adjustment_category.json b/web/src/lang/en/views/stock_adjustment_category.json
new file mode 100644
index 000000000..3e7d92e8b
--- /dev/null
+++ b/web/src/lang/en/views/stock_adjustment_category.json
@@ -0,0 +1,31 @@
+{
+  "page_title": "Stock Adjustment Category",
+  "table": {
+    "title": "Stock Adjustment Category List",
+    "cols": {
+      "code": "Code",
+      "name": "Name"
+    }
+  },
+  "actions": {
+    "create": "Create Stock Adjustment Category",
+    "edit": "Edit Stock Adjustment Category",
+    "show": "Show Stock Adjustment Category",
+    "delete": "Delete Stock Adjustment Category"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "stock_adjustment_category_data": "Stock Adjustment Category Data"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name"
+  },
+  "alert": {
+    "delete_stock_adjustment_category": {
+      "title": "Delete Stock Adjustment Category",
+      "content": "Stock Adjustment Category Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/stock_adjustment_in_item.json b/web/src/lang/en/views/stock_adjustment_in_item.json
new file mode 100644
index 000000000..202f7ea42
--- /dev/null
+++ b/web/src/lang/en/views/stock_adjustment_in_item.json
@@ -0,0 +1,35 @@
+{
+  "page_title": "Stock Adjustment (In Items)",
+  "table": {
+    "title": "Stock Adjustment In Items",
+    "cols": {
+      "product": "Product",
+      "qty": "Qty",
+      "product_unit": "Product Unit",
+      "remaining_stock": "Remaining Stock",
+      "product_unit_conversion_value": "C. Val",
+      "product_unit_cogs": "Unit COGS",
+      "product_unit_total_cogs": "Total COGS",
+      "product_unit_base_unit_cogs": "Base Unit COGS",
+      "remarks": "Remarks"
+    }
+  },
+  "actions": {
+    "create": "Add In Item",
+    "edit": "Edit In Item",
+    "show": "Show In Item",
+    "delete": "Delete In Item"
+  },
+  "fields": {
+    "company_id": "Company",
+    "branch_id": "Branch",
+    "stock_adjustment_id": "Stock Adjustment",
+    "qty": "Qty",
+    "product_unit_id": "Product Unit",
+    "product_unit_conversion_value": "C. Val",
+    "product_unit_cogs": "Unit COGS",
+    "product_unit_total_cogs": "Total COGS",
+    "product_unit_base_unit_cogs": "Base Unit COGS",
+    "remarks": "Remarks"
+  }
+}
diff --git a/web/src/lang/en/views/stock_adjustment_in_item_serial.json b/web/src/lang/en/views/stock_adjustment_in_item_serial.json
new file mode 100644
index 000000000..f7bfa908d
--- /dev/null
+++ b/web/src/lang/en/views/stock_adjustment_in_item_serial.json
@@ -0,0 +1,22 @@
+{
+  "page_title": "Stock Adjustment In Item Serials",
+  "table": {
+    "title": "Stock Adjustment In Item Serials",
+    "cols": {
+      "stock_adjustment_code": "Code",
+      "product_name": "Product",
+      "serial": "Serial"
+    }
+  },
+  "actions": {
+    "create": "Add Serial",
+    "edit": "Edit Serial",
+    "show": "Show Serial",
+    "delete": "Delete Serial"
+  },
+  "fields": {
+    "stock_adjustment_id": "Stock Adjustment",
+    "stock_adjustment_in_item_id": "In Item",
+    "serial": "Serial"
+  }
+}
diff --git a/web/src/lang/en/views/stock_adjustment_out_item.json b/web/src/lang/en/views/stock_adjustment_out_item.json
new file mode 100644
index 000000000..c45b591ac
--- /dev/null
+++ b/web/src/lang/en/views/stock_adjustment_out_item.json
@@ -0,0 +1,31 @@
+{
+  "page_title": "Stock Adjustment (Out Items)",
+  "table": {
+    "title": "Stock Adjustment Out Items",
+    "cols": {
+      "product": "Product",
+      "qty": "Qty",
+      "product_unit": "Product Unit",
+      "remaining_stock": "Remaining Stock",
+      "product_unit_conversion_value": "C. Value",
+      "product_unit_cogs": "Unit COGS",
+      "remarks": "Remarks"
+    }
+  },
+  "actions": {
+    "create": "Add Out Item",
+    "edit": "Edit Out Item",
+    "show": "Show Out Item",
+    "delete": "Delete Out Item"
+  },
+  "fields": {
+    "company_id": "Company",
+    "branch_id": "Branch",
+    "stock_adjustment_id": "Stock Adjustment",
+    "qty": "Qty",
+    "product_id": "Product",
+    "product_unit_id": "Product Unit",
+    "product_unit_conversion_value": "C. Value",
+    "remarks": "Remarks"
+  }
+}
diff --git a/web/src/lang/en/views/stock_adjustment_out_item_serial.json b/web/src/lang/en/views/stock_adjustment_out_item_serial.json
new file mode 100644
index 000000000..0139e2719
--- /dev/null
+++ b/web/src/lang/en/views/stock_adjustment_out_item_serial.json
@@ -0,0 +1,22 @@
+{
+  "page_title": "Stock Adjustment Out Item Serials",
+  "table": {
+    "title": "Stock Adjustment Out Item Serials",
+    "cols": {
+      "stock_adjustment_code": "Code",
+      "product_name": "Product",
+      "serial": "Serial"
+    }
+  },
+  "actions": {
+    "create": "Add Serial",
+    "edit": "Edit Serial",
+    "show": "Show Serial",
+    "delete": "Delete Serial"
+  },
+  "fields": {
+    "stock_adjustment_id": "Stock Adjustment",
+    "stock_adjustment_out_item_id": "Out Item",
+    "serial": "Serial"
+  }
+}
diff --git a/web/src/lang/en/views/stock_transfer.json b/web/src/lang/en/views/stock_transfer.json
new file mode 100644
index 000000000..e7ac664dd
--- /dev/null
+++ b/web/src/lang/en/views/stock_transfer.json
@@ -0,0 +1,55 @@
+{
+  "page_title": "Stock Transfer",
+  "table": {
+    "title": "Stock Transfer List",
+    "cols": {
+      "code": "Code",
+      "date": "Date",
+      "source_warehouse": "Source Warehouse",
+      "destination_warehouse": "Destination Warehouse",
+      "is_posted": "Posted",
+      "remarks": "Remarks"
+    }
+  },
+  "actions": {
+    "create": "Create Stock Transfer",
+    "edit": "Edit Stock Transfer",
+    "show": "Show Stock Transfer",
+    "delete": "Delete Stock Transfer"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "stock_transfer_data": "Stock Transfer Data",
+    "items": "Items"
+  },
+  "fields": {
+    "company_id": "Company",
+    "branch_id": "Branch",
+    "code": "Code",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "stock_transfer_code": "Stock Transfer Code",
+    "product_name": "Product Name",
+    "product_unit_code": "Product Code",
+    "source_warehouse_id": "Source Warehouse",
+    "destination_warehouse_id": "Destination Warehouse",
+    "remarks": "Remarks",
+    "is_posted": "Posted",
+    "items": "Items"
+  },
+  "alert": {
+    "create": {
+      "title": "Create Stock Transfer",
+      "message": "Stock Transfer created successfully"
+    },
+    "update": {
+      "title": "Edit Stock Transfer",
+      "message": "Stock Transfer updated successfully"
+    },
+    "delete": {
+      "title": "Delete Stock Transfer",
+      "message": "Stock Transfer deleted successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/stock_transfer_item.json b/web/src/lang/en/views/stock_transfer_item.json
new file mode 100644
index 000000000..b2ad5e529
--- /dev/null
+++ b/web/src/lang/en/views/stock_transfer_item.json
@@ -0,0 +1,30 @@
+{
+  "page_title": "Stock Transfer by Item",
+  "table": {
+    "title": "Stock Transfer by Item List",
+    "cols": {
+      "product": "Product",
+      "qty": "Qty",
+      "product_unit": "Product Unit",
+      "product_unit_conversion_value": "C. Value",
+      "product_unit_qty_base": "Base Qty",
+      "remarks": "Remarks"
+    }
+  },
+  "actions": {
+    "create": "Add Item",
+    "edit": "Edit Item",
+    "show": "Item Detail",
+    "delete": "Delete Item"
+  },
+  "fields": {
+    "company_id": "Company",
+    "branch_id": "Branch",
+    "stock_transfer_id": "Stock Transfer",
+    "qty": "Qty",
+    "product_unit_id": "Product Unit",
+    "product_unit_conversion_value": "C. Value",
+    "product_unit_qty_base": "Base Qty",
+    "remarks": "Remarks"
+  }
+}
diff --git a/web/src/lang/en/views/stock_transfer_item_serial.json b/web/src/lang/en/views/stock_transfer_item_serial.json
new file mode 100644
index 000000000..3a25b2b2c
--- /dev/null
+++ b/web/src/lang/en/views/stock_transfer_item_serial.json
@@ -0,0 +1,22 @@
+{
+  "page_title": "Stock Transfer Serial by Item",
+  "table": {
+    "title": "Stock Transfer Serial by Item List",
+    "cols": {
+      "stock_transfer_code": "Code",
+      "product_name": "Product",
+      "serial": "Serial"
+    }
+  },
+  "actions": {
+    "create": "Create Serial",
+    "edit": "Edit Serial",
+    "show": "Show Serial",
+    "delete": "Delete Serial"
+  },
+  "fields": {
+    "stock_transfer_id": "Stock Transfer",
+    "stock_transfer_item_id": "Stock Transfer by Item",
+    "serial": "Serial"
+  }
+}
diff --git a/web/src/lang/en/views/supplier.json b/web/src/lang/en/views/supplier.json
new file mode 100644
index 000000000..5d823a3bf
--- /dev/null
+++ b/web/src/lang/en/views/supplier.json
@@ -0,0 +1,47 @@
+{
+  "page_title": "Supplier",
+  "table": {
+    "title": "Supplier List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "address": "Address",
+      "city": "City",
+      "payment_term_type": "Term Type",
+      "payment_term": "Term",
+      "taxable_enterprise": "Taxable",
+      "tax_id": "Tax ID",
+      "status": "Status",
+      "remarks": "Remarks"
+    }
+  },
+  "actions": {
+    "create": "Create Supplier",
+    "edit": "Edit Supplier",
+    "show": "Show Supplier",
+    "delete": "Delete Supplier"
+  },
+  "field_groups": {
+    "general": "General Information",
+    "finance": "Finance Information"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name",
+    "address": "Address",
+    "city": "City",
+    "payment_term_type": "Payment Term Type",
+    "payment_term": "Payment Term",
+    "taxable_enterprise": "Taxable Enterprise",
+    "tax_id": "Tax ID",
+    "status": "Status",
+    "remarks": "Remarks"
+  },
+  "alert": {
+    "delete": {
+      "title": "Delete Supplier",
+      "message": "Supplier Successfully Deleted"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/unit.json b/web/src/lang/en/views/unit.json
new file mode 100644
index 000000000..8480b3139
--- /dev/null
+++ b/web/src/lang/en/views/unit.json
@@ -0,0 +1,41 @@
+{
+  "page_title": "Unit",
+  "table": {
+    "title": "Unit List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "description": "Description",
+      "type": "Type"
+    }
+  },
+  "actions": {
+    "create": "Create Unit",
+    "edit": "Edit Unit",
+    "show": "Show Unit",
+    "delete": "Delete Unit"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "unit_data": "Unit Data"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name",
+    "description": "Description",
+    "type": "Type"
+  },
+  "enums": {
+    "unit_type": {
+      "product": "Product",
+      "service": "Service"
+    }
+  },
+  "alert": {
+    "delete_unit": {
+      "title": "Delete Unit",
+      "content": "Unit Successfully Deleted"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/user.json b/web/src/lang/en/views/user.json
index 0f9ebb118..7a65d0b3e 100644
--- a/web/src/lang/en/views/user.json
+++ b/web/src/lang/en/views/user.json
@@ -1,57 +1,57 @@
-{
-    "page_title": "Users",
-    "table": {
-        "title": "User Lists",
-        "cols": {
-            "name": "Name",
-            "email": "Email",
-            "roles": "Roles",
-            "status": "Status"
-        }
-    },
-    "actions": {
-        "create": "Create User",
-        "edit": "Edit User",
-        "show": "Show User"
-    },
-    "field_groups": {
-        "user_info": "User Information",
-        "user_profile": "User Profile",
-        "roles": "Roles",
-        "settings": "Settings",
-        "tokens_management": "Tokens Management",
-        "password_management": "Password Management",
-        "two_factor_auth": "Two Factor Authentication"
-    },
-    "fields": {
-        "name": "Name",
-        "email": "Email",
-        "roles": "Roles",
-        "picture": "Picture",
-        "first_name": "First Name",
-        "last_name": "Last Name",
-        "address": "Address",
-        "ic_num": "IC Number",
-        "country": "Country",
-        "remarks": "Remarks",
-        "status": "Status",
-        "tax_id": "Tax ID",
-        "postal_code": "Postal Code",
-        "city": "City",
-        "settings": {
-            "settings": "Settings",
-            "theme": "Themes",
-            "date_format": "Date Format",
-            "time_format": "Time Format",
-            "api_token": "API Token"
-        },
-        "tokens": {
-            "tokens": "Tokens",
-            "count": "Total Tokens",
-            "reset": "Reset Tokens"
-        },
-        "reset_password": "Reset Password",
-        "email_reset_password": "Send Email",
-        "reset_2fa": "Reset Two Factor Authentication"
-    }
-}
\ No newline at end of file
+{
+  "page_title": "Users",
+  "table": {
+    "title": "User Lists",
+    "cols": {
+      "name": "Name",
+      "email": "Email",
+      "roles": "Roles",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Create User",
+    "edit": "Edit User",
+    "show": "Show User"
+  },
+  "field_groups": {
+    "user_info": "User Information",
+    "user_profile": "User Profile",
+    "roles": "Roles",
+    "settings": "Settings",
+    "tokens_management": "Tokens Management",
+    "password_management": "Password Management",
+    "two_factor_auth": "Two Factor Authentication"
+  },
+  "fields": {
+    "name": "Name",
+    "email": "Email",
+    "roles": "Roles",
+    "picture": "Picture",
+    "first_name": "First Name",
+    "last_name": "Last Name",
+    "address": "Address",
+    "ic_num": "IC Number",
+    "country": "Country",
+    "remarks": "Remarks",
+    "status": "Status",
+    "tax_id": "Tax ID",
+    "postal_code": "Postal Code",
+    "city": "City",
+    "settings": {
+      "settings": "Settings",
+      "theme": "Themes",
+      "date_format": "Date Format",
+      "time_format": "Time Format",
+      "api_token": "API Token"
+    },
+    "tokens": {
+      "tokens": "Tokens",
+      "count": "Total Tokens",
+      "reset": "Reset Tokens"
+    },
+    "reset_password": "Reset Password",
+    "email_reset_password": "Send Email",
+    "reset_2fa": "Reset Two Factor Authentication"
+  }
+}
diff --git a/web/src/lang/en/views/vat_profile.json b/web/src/lang/en/views/vat_profile.json
new file mode 100644
index 000000000..28ec4a67d
--- /dev/null
+++ b/web/src/lang/en/views/vat_profile.json
@@ -0,0 +1,39 @@
+{
+  "page_title": "VAT Profiles",
+  "table": {
+    "title": "VAT Profile List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "vat_rate": "VAT Rate",
+      "vat_base_fraction": "VAT Base Fraction",
+      "is_active": "Active"
+    }
+  },
+  "actions": {
+    "create": "Create VAT Profile",
+    "edit": "Edit VAT Profile",
+    "show": "View VAT Profile",
+    "delete": "Delete VAT Profile"
+  },
+  "field_groups": {
+    "company_info": "Company Info",
+    "vat_profile_data": "VAT Profile Data"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name",
+    "vat_rate": "VAT Rate",
+    "vat_base_numerator": "VAT Base Numerator",
+    "vat_base_denominator": "VAT Base Denominator",
+    "remarks": "Remarks",
+    "is_active": "Active"
+  },
+  "alert": {
+    "delete_vat_profile": {
+      "title": "Delete VAT Profile",
+      "content": "VAT Profile deleted successfully"
+    }
+  }
+}
diff --git a/web/src/lang/en/views/warehouse.json b/web/src/lang/en/views/warehouse.json
new file mode 100644
index 000000000..34c36af85
--- /dev/null
+++ b/web/src/lang/en/views/warehouse.json
@@ -0,0 +1,43 @@
+{
+  "page_title": "Warehouse",
+  "table": {
+    "title": "Warehouse List",
+    "cols": {
+      "code": "Code",
+      "name": "Name",
+      "address": "Address",
+      "city": "City",
+      "contact": "Contact",
+      "is_main": "Main Warehouse",
+      "remarks": "Remarks",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Create Warehouse",
+    "edit": "Edit Warehouse",
+    "show": "Show Warehouse",
+    "delete": "Delete Warehouse"
+  },
+  "field_groups": {
+    "company_info": "Company Information",
+    "warehouse_data": "Warehouse Data"
+  },
+  "fields": {
+    "company_id": "Company",
+    "code": "Code",
+    "name": "Name",
+    "address": "Address",
+    "city": "City",
+    "contact": "Contact",
+    "is_main": "Main Warehouse",
+    "remarks": "Remarks",
+    "status": "Status"
+  },
+  "alert": {
+    "delete_warehouse": {
+      "title": "Delete Warehouse",
+      "content": "Warehouse Deleted Successfully"
+    }
+  }
+}
diff --git a/web/src/lang/id/components/alert-placeholder.json b/web/src/lang/id/components/alert-placeholder.json
index 6125137fc..aaaf3ce3f 100644
--- a/web/src/lang/id/components/alert-placeholder.json
+++ b/web/src/lang/id/components/alert-placeholder.json
@@ -1,6 +1,6 @@
-{
-    "default_title": "Terjadi kesalahan.",
-    "email_verification": {
-        "message": "Email tidak terverifikasi. Harap verifikasi email Anda untuk menyelesaikan proses pendaftaran."
-    }
-}
\ No newline at end of file
+{
+  "default_title": "Terjadi kesalahan.",
+  "email_verification": {
+    "message": "Email tidak terverifikasi. Harap verifikasi email Anda untuk menyelesaikan proses pendaftaran."
+  }
+}
diff --git a/web/src/lang/id/components/buttons.json b/web/src/lang/id/components/buttons.json
index 6bf5d5f61..35981524a 100644
--- a/web/src/lang/id/components/buttons.json
+++ b/web/src/lang/id/components/buttons.json
@@ -1,20 +1,27 @@
-{
-    "save": "Simpan",
-    "update": "Update",
-    "cancel": "Batal",
-    "delete": "Hapus",
-    "back": "Kembali",
-    "reset": "Reset",
-    "compose": "Pesan Baru",
-    "revoke": "Revoke",
-    "activate": "Aktifkan",
-    "submit": "Kirim",
-    "send_verification_email": "Kirim Email Verifikasi",
-    "auto": "Auto",
-    "new_order": "Order Baru",
-    "login": "Login",
-    "register": "Register",
-    "create_new": "Tambah Baru",
-    "retry": "Coba Kembali",
-    "reload": "Memuat Ulang"
-}
\ No newline at end of file
+{
+  "add": "Tambah",
+  "save": "Simpan",
+  "update": "Update",
+  "cancel": "Batal",
+  "close": "Tutup",
+  "delete": "Hapus",
+  "back": "Kembali",
+  "reset": "Reset",
+  "compose": "Pesan Baru",
+  "revoke": "Revoke",
+  "activate": "Aktifkan",
+  "submit": "Kirim",
+  "send_verification_email": "Kirim Email Verifikasi",
+  "auto": "Auto",
+  "new_order": "Order Baru",
+  "login": "Login",
+  "register": "Register",
+  "create_new": "Tambah Baru",
+  "create": "Tambah",
+  "retry": "Coba Kembali",
+  "reload": "Memuat Ulang",
+  "search": "Cari",
+  "select": "Pilih",
+  "yes": "Ya",
+  "no": "Tidak"
+}
diff --git a/web/src/lang/id/components/data-list.json b/web/src/lang/id/components/data-list.json
index 343c2976e..96dc1be92 100644
--- a/web/src/lang/id/components/data-list.json
+++ b/web/src/lang/id/components/data-list.json
@@ -1,10 +1,10 @@
-{
-    "print": "Print",
-    "export_to_excel": "Export To Excel",
-    "export_to_pdf": "Export To PDF",
-    "data_not_found": "Data Tidak Ditemukan",
-    "showing": "Menampilkan",
-    "to": "hingga",
-    "of": "dari",
-    "entries": "data"
-}
\ No newline at end of file
+{
+  "print": "Print",
+  "export_to_excel": "Export To Excel",
+  "export_to_pdf": "Export To PDF",
+  "data_not_found": "Data Tidak Ditemukan",
+  "showing": "Menampilkan",
+  "to": "hingga",
+  "of": "dari",
+  "entries": "data"
+}
diff --git a/web/src/lang/id/components/delete-modal.json b/web/src/lang/id/components/delete-modal.json
index bcbd4cadf..bc665a9bf 100644
--- a/web/src/lang/id/components/delete-modal.json
+++ b/web/src/lang/id/components/delete-modal.json
@@ -1,5 +1,5 @@
-{
-    "title": "Konfirmasi",
-    "desc_1": "Apakah Anda benar-benar ingin menghapus data ini?",
-    "desc_2": "Proses ini tidak dapat dibatalkan."
-}
\ No newline at end of file
+{
+  "title": "Konfirmasi",
+  "desc_1": "Apakah Anda benar-benar ingin menghapus data ini?",
+  "desc_2": "Proses ini tidak dapat dibatalkan."
+}
diff --git a/web/src/lang/id/components/dropdown.json b/web/src/lang/id/components/dropdown.json
index bb6ec3afc..910f8560b 100644
--- a/web/src/lang/id/components/dropdown.json
+++ b/web/src/lang/id/components/dropdown.json
@@ -1,36 +1,40 @@
-{
-    "placeholder": "Silahkan Pilih",
-    "values": {
-        "statusDDL": {
-            "active": "Aktif",
-            "inactive": "Tidak Aktif",
-            "deleted": "Dihapus"
-        },
-        "productGroupCategoryDDL": {
-            "product": "Produk",
-            "service": "Jasa"
-        },
-        "unitCategoryDDL": {
-            "product": "Produk",
-            "service": "Jasa"
-        },
-        "paymentTermTypeDDL": {
-            "pia": "Pembayaran Dimuka",
-            "net": "Pembayaran X Hari Setelah Tgl Invoice",
-            "eom": "Akhir Bulan",
-            "cod": "Cash On Delivery",
-            "cnd": "Cash Di Pengiriman Selanjutnya",
-            "cbs": "Cash Sebelum Pengiriman"
-        },
-        "productTypeDDL": {
-            "raw": "Bahan Baku",
-            "wip": "Barang Setengah Jadi",
-            "fg": "Barang Jadi",
-            "svc": "Jasa"
-        },
-        "switch": {
-            "on": "Ya",
-            "off": "Tidak"
-        }
-    }
-}
\ No newline at end of file
+{
+  "placeholder": "Silahkan Pilih",
+  "values": {
+    "switch": {
+      "on": "Ya",
+      "off": "Tidak"
+    },
+    "statusDDL": {
+      "active": "Aktif",
+      "inactive": "Tidak Aktif",
+      "deleted": "Dihapus"
+    },
+    "paymentTermTypeDDL": {
+      "pia": "Pembayaran Dimuka",
+      "net": "Pembayaran X Hari Setelah Tgl Invoice",
+      "eom": "Akhir Bulan",
+      "cod": "Cash On Delivery",
+      "cnd": "Cash Di Pengiriman Selanjutnya",
+      "cbs": "Cash Sebelum Pengiriman"
+    },
+    "roundingTypeDDL": {
+      "up": "Keatas",
+      "down": "Kebawah"
+    },
+    "productCategoryDDL": {
+      "product": "Produk",
+      "service": "Jasa"
+    },
+    "unitCategoryDDL": {
+      "product": "Produk",
+      "service": "Jasa"
+    },
+    "productTypeDDL": {
+      "raw": "Bahan Baku",
+      "wip": "Barang Setengah Jadi",
+      "fg": "Barang Jadi",
+      "svc": "Jasa"
+    }
+  }
+}
diff --git a/web/src/lang/id/components/file-upload.json b/web/src/lang/id/components/file-upload.json
index db23ecc7c..772e73874 100644
--- a/web/src/lang/id/components/file-upload.json
+++ b/web/src/lang/id/components/file-upload.json
@@ -1,3 +1,6 @@
-{
-    "browse": "Pilih"
-}
\ No newline at end of file
+{
+  "browse": "Pilih",
+  "or_drag_drop": "atau seret dan lepas",
+  "camera": "Kamera",
+  "capture": "Ambil Foto"
+}
diff --git a/web/src/lang/id/components/language-switcher.json b/web/src/lang/id/components/language-switcher.json
index 226772703..9f853ea43 100644
--- a/web/src/lang/id/components/language-switcher.json
+++ b/web/src/lang/id/components/language-switcher.json
@@ -1,6 +1,6 @@
 {
-    "language": {
-        "indonesia": "Indonesia",
-        "english": "Inggris"
-    }
-}
\ No newline at end of file
+  "language": {
+    "indonesia": "Indonesia",
+    "english": "Inggris"
+  }
+}
diff --git a/web/src/lang/id/components/menu.json b/web/src/lang/id/components/menu.json
index b580ee7c0..94a8113ab 100644
--- a/web/src/lang/id/components/menu.json
+++ b/web/src/lang/id/components/menu.json
@@ -1,27 +1,86 @@
-{
-    "dashboard": "Dashboard",
-    "main-dashboard": "Dashboard Utama",
-    "main-demo": "Demonstrasi",
-    "company": "Perusahaan",
-    "company-company": "Perusahaan",
-    "company-branch": "Cabang",
-    "company-employee": "Karyawan",
-    "company-warehouse": "Gudang",
-    "product": "Produk",
-    "product-product_group": "Kelompok Produk",
-    "product-brand": "Merk",
-    "product-unit": "Satuan",
-    "product-product": "Produk",
-    "product-service": "Layanan",
-    "supplier": "Pemasok",
-    "supplier-supplier": "Pemasok",
-    "purchase_order": "Pembelian",
-    "purchase_order-purchaseorder": "Pembelian",
-    "administrator": "Administrator",
-    "administrator-user": "Pengguna",
-    "devtool": "Dev Tool",
-    "devtool-devtool": "Dev Tool",
-    "devtool-playground": "Playground",
-    "devtool-playground-p1": "Playground 1",
-    "devtool-playground-p2": "Playground 2"
-}
\ No newline at end of file
+{
+  "dashboard": "Dashboard",
+  "main-dashboard": "Dashboard Utama",
+  "main-demo": "Demonstrasi",
+  "company-management": "Manajement Perusahaan",
+  "company": "Perusahaan",
+  "branch": "Cabang",
+  "employee": "Karyawan",
+  "warehouse": "Gudang",
+  "investor": "Investor",
+  "cash-account": "Akun Kas",
+  "customer-management": "Manajement Pelanggan",
+  "customer-group": "Grup Pelanggan",
+  "customer": "Pelanggan",
+  "product-management": "Manajement Produk",
+  "product-category": "Kategori Produk",
+  "brand": "Merk",
+  "unit": "Satuan",
+  "vat-profile": "Profil PPN",
+  "product": "Produk",
+  "product-service": "Produk Jasa",
+  "service": "Layanan",
+  "supplier": "Pemasok",
+  "inventory-management": "Manajemen Inventory",
+  "purchase-management": "Purchasing",
+  "finance": "Finance",
+  "finance-management": "Finance Management",
+  "transaction": "Transaksi",
+  "capital-opening": "Saldo Awal Modal",
+  "capital-transaction": "Transaksi Modal",
+  "cash-transfer": "Perpindahan Antar Kas",
+  "expense": "Biaya",
+  "debt": "Hutang",
+  "prepaid-expense": "Biaya Dibayar Dimuka",
+  "expense-payment": "Pembayaran Biaya",
+  "debt-category": "Kategori Hutang",
+  "receivable-category": "Kategori Piutang",
+  "debt-creditor": "Kreditur",
+  "income": "Pendapatan",
+  "receivable": "Piutang",
+  "prepaid-income": "Pendapatan Diterima Dimuka",
+  "income-payment": "Pembayaran Pendapatan",
+  "stock-adjustment": "Penyesuaian Stok",
+  "stock-adjustment-in-item": "Penyesuaian Stok Masuk per Item",
+  "stock-adjustment-in-item-serial": "Serial Penyesuaian Stok Masuk per Item",
+  "stock-adjustment-out-item": "Penyesuaian Stok Keluar per Item",
+  "stock-adjustment-out-item-serial": "Serial Penyesuaian Stok Keluar per Item",
+  "stock-adjustment-category": "Kategori Penyesuaian Stok",
+  "expense-category": "Kategori Biaya",
+  "income-category": "Kategori Pendapatan",
+  "asset-category": "Kategori Aset",
+  "asset-unit": "Satuan Aset",
+  "asset": "Aset",
+  "asset-adjustment": "Penyesuaian Aset",
+  "asset-purchase": "Pembelian Aset",
+  "asset-sale": "Penjualan Aset",
+  "chart-of-account": "Chart of Account",
+  "journal-entry": "Jurnal Umum",
+  "purchase-additional-cost-category": "Kategori Biaya Tambahan Purchase",
+  "purchase-order": "Purchase Order",
+  "purchase": "Purchase",
+  "purchase-receipt": "Purchase Receipt",
+  "purchase-additional-cost": "Biaya Tambahan Purchase",
+  "purchase-additional-cost-payment": "Pembayaran Biaya Tambahan Purchase",
+  "purchase-order-item": "Purchase Order per Item",
+  "purchase-order-down-payment": "Uang Muka Purchase Order",
+  "purchase-order-down-payment-not-fully-allocated": "Uang Muka PO Belum Full Dialokasikan",
+  "purchase-order-down-payment-refund": "Refund Uang Muka Purchase Order",
+  "stock-transfer": "Transfer Stok",
+  "stock-transfer-item": "Transfer Stok per Item",
+  "stock-transfer-item-serial": "Serial Transfer Stok per Item",
+  "master-data": "Master Data",
+  "report": "Laporan",
+  "financial-statement": "Laporan Keuangan",
+  "balance-sheet": "Neraca",
+  "product-with-remaining-stock": "Produk dengan Stok Tersisa",
+  "cash-account-with-remaining-balance": "Akun Kas dengan Sisa Saldo",
+  "journal-entry-detail": "Jurnal Umum per Item",
+  "administrator": "Administrator",
+  "administrator-user": "Pengguna",
+  "devtool": "Dev Tool",
+  "devtool-devtool": "Dev Tool",
+  "devtool-playground": "Playground",
+  "devtool-playground-p1": "Playground 1",
+  "devtool-playground-p2": "Playground 2"
+}
diff --git a/web/src/lang/id/components/profile-menu.json b/web/src/lang/id/components/profile-menu.json
index 9592f62c7..466690188 100644
--- a/web/src/lang/id/components/profile-menu.json
+++ b/web/src/lang/id/components/profile-menu.json
@@ -1,8 +1,8 @@
 {
-    "profile_ddl": {
-        "profile": "Profile",
-        "inbox": "Inbox",
-        "activity": "Activity",
-        "logout": "Logout"
-    }
-}
\ No newline at end of file
+  "profile_ddl": {
+    "profile": "Profile",
+    "inbox": "Inbox",
+    "activity": "Activity",
+    "logout": "Logout"
+  }
+}
diff --git a/web/src/lang/id/components/search-box.json b/web/src/lang/id/components/search-box.json
index b69ef3122..a08c7a63a 100644
--- a/web/src/lang/id/components/search-box.json
+++ b/web/src/lang/id/components/search-box.json
@@ -1,10 +1,10 @@
 {
-    "placeholder": {
-        "search": "Cari..."
-    },
-    "search_group": {
-        "user": "Penguna",
-        "company": "Perusahaan",
-        "branch": "Cabang"
-    }
-}
\ No newline at end of file
+  "placeholder": {
+    "search": "Cari..."
+  },
+  "search_group": {
+    "user": "Penguna",
+    "company": "Perusahaan",
+    "branch": "Cabang"
+  }
+}
diff --git a/web/src/lang/id/components/sidebar-pop.json b/web/src/lang/id/components/sidebar-pop.json
index 0291284da..78cbe152a 100644
--- a/web/src/lang/id/components/sidebar-pop.json
+++ b/web/src/lang/id/components/sidebar-pop.json
@@ -1,11 +1,11 @@
 {
-    "slide_over": {
-        "footer": {
-            "copyright": "Hak Cipta",
-            "copyright_name": "GitzJoey",
-            "contributors": "Kontributor",
-            "rights": "Seluruh hak cipta dilindungi.",
-            "powered_by": "Powered By Coffee & Curiosity."
-        }
+  "slide_over": {
+    "footer": {
+      "copyright": "Hak Cipta",
+      "copyright_name": "GitzJoey",
+      "contributors": "Kontributor",
+      "rights": "Seluruh hak cipta dilindungi.",
+      "powered_by": "Powered By Coffee & Curiosity."
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/web/src/lang/id/components/user-location.json b/web/src/lang/id/components/user-location.json
index 12f9dce5e..c2807dcbc 100644
--- a/web/src/lang/id/components/user-location.json
+++ b/web/src/lang/id/components/user-location.json
@@ -1,3 +1,3 @@
-{
-    "data_not_found": "Data Tidak Ditemukan"
-}
\ No newline at end of file
+{
+  "data_not_found": "Data Tidak Ditemukan"
+}
diff --git a/web/src/lang/id/views/asset.json b/web/src/lang/id/views/asset.json
new file mode 100644
index 000000000..586a7e43c
--- /dev/null
+++ b/web/src/lang/id/views/asset.json
@@ -0,0 +1,35 @@
+{
+  "page_title": "Aset",
+  "actions": {
+    "create": "Tambah Aset",
+    "edit": "Ubah Aset"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "asset_data": "Data Aset"
+  },
+  "fields": {
+    "asset_category_id": "Kategori Aset",
+    "asset_unit_id": "Satuan Aset",
+    "code": "Kode",
+    "name": "Nama",
+    "status": "Status",
+    "remarks": "Catatan"
+  },
+  "table": {
+    "title": "Daftar Aset",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "asset_category": "Kategori",
+      "asset_unit": "Satuan",
+      "status": "Status"
+    }
+  },
+  "alert": {
+    "delete_asset": {
+      "title": "Aset berhasil dihapus",
+      "content": "Data aset telah berhasil dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/asset_adjustment.json b/web/src/lang/id/views/asset_adjustment.json
new file mode 100644
index 000000000..b1763fbc6
--- /dev/null
+++ b/web/src/lang/id/views/asset_adjustment.json
@@ -0,0 +1,37 @@
+{
+  "page_title": "Penyesuaian Aset",
+  "actions": {
+    "create": "Tambah Penyesuaian Aset",
+    "edit": "Ubah Penyesuaian Aset"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "asset_adjustment_data": "Data Penyesuaian Aset",
+    "in_items": "Aset Masuk",
+    "out_items": "Aset Keluar"
+  },
+  "fields": {
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Mulai",
+    "end_date": "Tanggal Akhir",
+    "remarks": "Catatan",
+    "is_posted": "Terposting",
+    "total_incoming_asset_qty": "Total Qty Aset Masuk",
+    "total_outgoing_asset_qty": "Total Qty Aset Keluar"
+  },
+  "table": {
+    "title": "Daftar Penyesuaian Aset",
+    "cols": {
+      "asset": "Aset",
+      "qty": "Qty",
+      "serials": "Serial"
+    }
+  },
+  "alert": {
+    "delete": {
+      "title": "Penyesuaian aset berhasil dihapus",
+      "message": "Data penyesuaian aset telah berhasil dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/asset_adjustment_in_item.json b/web/src/lang/id/views/asset_adjustment_in_item.json
new file mode 100644
index 000000000..c616dd1bd
--- /dev/null
+++ b/web/src/lang/id/views/asset_adjustment_in_item.json
@@ -0,0 +1,16 @@
+{
+  "page_title": "Aset Masuk",
+  "actions": {
+    "create": "Tambah Aset Masuk"
+  },
+  "fields": {
+    "qty": "Qty",
+    "remarks": "Catatan"
+  },
+  "table": {
+    "title": "Daftar Aset Masuk",
+    "cols": {
+      "asset": "Aset"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/asset_adjustment_out_item.json b/web/src/lang/id/views/asset_adjustment_out_item.json
new file mode 100644
index 000000000..506d57ada
--- /dev/null
+++ b/web/src/lang/id/views/asset_adjustment_out_item.json
@@ -0,0 +1,16 @@
+{
+  "page_title": "Aset Keluar",
+  "actions": {
+    "create": "Tambah Aset Keluar"
+  },
+  "fields": {
+    "qty": "Qty",
+    "remarks": "Catatan"
+  },
+  "table": {
+    "title": "Daftar Aset Keluar",
+    "cols": {
+      "asset": "Aset"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/asset_category.json b/web/src/lang/id/views/asset_category.json
new file mode 100644
index 000000000..3e5ba6603
--- /dev/null
+++ b/web/src/lang/id/views/asset_category.json
@@ -0,0 +1,26 @@
+{
+  "page_title": "Kategori Aset",
+  "actions": {
+    "create": "Tambah Kategori Aset",
+    "edit": "Ubah Kategori Aset"
+  },
+  "table": {
+    "title": "Daftar Kategori Aset"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "asset_category_data": "Data Kategori Aset"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama",
+    "estimated_useful_life_months": "Taksiran Masa Manfaat (Bulan)",
+    "remarks": "Catatan"
+  },
+  "alert": {
+    "delete_asset_category": {
+      "title": "Berhasil Menghapus Kategori Aset",
+      "content": "Kategori aset telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/asset_purchase.json b/web/src/lang/id/views/asset_purchase.json
new file mode 100644
index 000000000..58bf0d37f
--- /dev/null
+++ b/web/src/lang/id/views/asset_purchase.json
@@ -0,0 +1,48 @@
+{
+  "page_title": "Pembelian Aset",
+  "actions": {
+    "create": "Tambah Pembelian Aset",
+    "edit": "Ubah Pembelian Aset"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "asset_purchase_data": "Data Pembelian Aset",
+    "items": "Item Aset",
+    "summary": "Ringkasan"
+  },
+  "fields": {
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Mulai",
+    "end_date": "Tanggal Akhir",
+    "due_days": "Jatuh Tempo (Hari)",
+    "supplier_id": "Supplier",
+    "remarks": "Catatan",
+    "is_posted": "Terposting",
+    "item_total": "Total Item",
+    "additional_cost": "Biaya Tambahan",
+    "rounding": "Pembulatan",
+    "amount_payable": "Jumlah Hutang"
+  },
+  "table": {
+    "title": "Daftar Pembelian Aset",
+    "cols": {
+      "asset": "Aset",
+      "qty": "Qty",
+      "unit_price": "Harga Satuan",
+      "subtotal": "Subtotal",
+      "serials": "Serial"
+    }
+  },
+  "summary": {
+    "allocated_additional_cost": "Alokasi Biaya Tambahan",
+    "subtotal_after_additional_cost": "Subtotal Setelah Biaya Tambahan",
+    "unit_acquisition_cost": "Harga Perolehan per Unit"
+  },
+  "alert": {
+    "delete": {
+      "title": "Pembelian aset berhasil dihapus",
+      "message": "Data pembelian aset telah berhasil dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/asset_purchase_item.json b/web/src/lang/id/views/asset_purchase_item.json
new file mode 100644
index 000000000..4ed7c1c7a
--- /dev/null
+++ b/web/src/lang/id/views/asset_purchase_item.json
@@ -0,0 +1,12 @@
+{
+  "page_title": "Item Pembelian Aset",
+  "actions": {
+    "create": "Tambah Item Aset"
+  },
+  "fields": {
+    "qty": "Qty",
+    "unit_price": "Harga Satuan",
+    "subtotal": "Subtotal",
+    "remarks": "Catatan"
+  }
+}
diff --git a/web/src/lang/id/views/asset_sale.json b/web/src/lang/id/views/asset_sale.json
new file mode 100644
index 000000000..f4fa81bcb
--- /dev/null
+++ b/web/src/lang/id/views/asset_sale.json
@@ -0,0 +1,42 @@
+{
+  "page_title": "Penjualan Aset",
+  "actions": {
+    "create": "Tambah Penjualan Aset",
+    "edit": "Ubah Penjualan Aset"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "asset_sale_data": "Data Penjualan Aset",
+    "items": "Item Aset",
+    "summary": "Ringkasan"
+  },
+  "fields": {
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Mulai",
+    "end_date": "Tanggal Akhir",
+    "due_days": "Jatuh Tempo (Hari)",
+    "customer_id": "Customer",
+    "remarks": "Catatan",
+    "is_posted": "Terposting",
+    "item_total": "Total Item",
+    "rounding": "Pembulatan",
+    "amount_receivable": "Jumlah Piutang"
+  },
+  "table": {
+    "title": "Daftar Penjualan Aset",
+    "cols": {
+      "asset": "Aset",
+      "qty": "Qty",
+      "unit_price": "Harga Satuan",
+      "subtotal": "Subtotal",
+      "serials": "Serial"
+    }
+  },
+  "alert": {
+    "delete": {
+      "title": "Penjualan aset berhasil dihapus",
+      "message": "Data penjualan aset telah berhasil dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/asset_sale_item.json b/web/src/lang/id/views/asset_sale_item.json
new file mode 100644
index 000000000..3853367ac
--- /dev/null
+++ b/web/src/lang/id/views/asset_sale_item.json
@@ -0,0 +1,12 @@
+{
+  "page_title": "Item Penjualan Aset",
+  "actions": {
+    "create": "Tambah Item Aset"
+  },
+  "fields": {
+    "qty": "Qty",
+    "unit_price": "Harga Satuan",
+    "subtotal": "Subtotal",
+    "remarks": "Catatan"
+  }
+}
diff --git a/web/src/lang/id/views/asset_unit.json b/web/src/lang/id/views/asset_unit.json
new file mode 100644
index 000000000..7332344b0
--- /dev/null
+++ b/web/src/lang/id/views/asset_unit.json
@@ -0,0 +1,29 @@
+{
+  "page_title": "Satuan Aset",
+  "actions": {
+    "create": "Tambah Satuan Aset",
+    "edit": "Ubah Satuan Aset"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "asset_unit_data": "Data Satuan Aset"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama",
+    "description": "Deskripsi"
+  },
+  "table": {
+    "title": "Daftar Satuan Aset",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama"
+    }
+  },
+  "alert": {
+    "delete_asset_unit": {
+      "title": "Satuan aset berhasil dihapus",
+      "content": "Data satuan aset telah berhasil dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/balance_sheet.json b/web/src/lang/id/views/balance_sheet.json
new file mode 100644
index 000000000..0a9847803
--- /dev/null
+++ b/web/src/lang/id/views/balance_sheet.json
@@ -0,0 +1,31 @@
+{
+  "page_title": "Neraca",
+  "table": {
+    "title": "Daftar Neraca"
+  },
+  "fields": {
+    "end_date": "Sampai Tanggal",
+    "code": "Kode",
+    "name": "Akun",
+    "debit": "Debit",
+    "credit": "Kredit",
+    "balance": "Saldo"
+  },
+  "actions": {
+    "expand_all": "Buka Semua",
+    "collapse_all": "Tutup Semua"
+  },
+  "labels": {
+    "group_total": "Total Grup",
+    "direct_mutation": "Mutasi Langsung"
+  },
+  "summary": {
+    "asset": "Total Aset",
+    "liability": "Total Liabilitas",
+    "equity": "Total Ekuitas",
+    "liability_and_equity": "Total Liabilitas + Ekuitas",
+    "difference": "Selisih Neraca",
+    "status_balanced": "Neraca Balance",
+    "status_unbalanced": "Neraca Belum Balance"
+  }
+}
diff --git a/web/src/lang/id/views/branch.json b/web/src/lang/id/views/branch.json
index 798b3f094..ad015a2e9 100644
--- a/web/src/lang/id/views/branch.json
+++ b/web/src/lang/id/views/branch.json
@@ -1,43 +1,43 @@
-{
-    "page_title": "Cabang",
-    "table": {
-        "title": "Daftar Cabang",
-        "cols": {
-            "code": "Kode",
-            "name": "Nama",
-            "address": "Alamat",
-            "city": "Kota",
-            "contact": "Kontak",
-            "is_main": "Cabang Utama",
-            "remarks": "Keterangan",
-            "status": "Status"
-        }
-    },
-    "actions": {
-        "create": "Tambah Cabang",
-        "edit": "Ubah Cabang",
-        "show": "Tampilkan Cabang",
-        "delete": "Hapus Cabang"
-    },
-    "field_groups": {
-        "company_info": "Informasi Perusahaan",
-        "branch_data": "Data Cabang"
-    },
-    "fields": {
-        "company_id": "Perusahaan",
-        "code": "Kode",
-        "name": "Nama",
-        "address": "Alamat",
-        "city": "Kota",
-        "contact": "Kontak",
-        "is_main": "Cabang Utama",
-        "remarks": "Keterangan",
-        "status": "Status"
-    },
-    "alert": {
-        "delete_branch": {
-            "title": "Hapus Cabang",
-            "content": "Cabang Berhasil Dihapus"
-        }
-    }
-}
\ No newline at end of file
+{
+  "page_title": "Cabang",
+  "table": {
+    "title": "Daftar Cabang",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "address": "Alamat",
+      "city": "Kota",
+      "contact": "Kontak",
+      "is_main": "Cabang Utama",
+      "remarks": "Keterangan",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Tambah Cabang",
+    "edit": "Ubah Cabang",
+    "show": "Tampilkan Cabang",
+    "delete": "Hapus Cabang"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "branch_data": "Data Cabang"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama",
+    "address": "Alamat",
+    "city": "Kota",
+    "contact": "Kontak",
+    "is_main": "Cabang Utama",
+    "remarks": "Keterangan",
+    "status": "Status"
+  },
+  "alert": {
+    "delete_branch": {
+      "title": "Hapus Cabang",
+      "content": "Cabang Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/brand.json b/web/src/lang/id/views/brand.json
new file mode 100644
index 000000000..09acfab4c
--- /dev/null
+++ b/web/src/lang/id/views/brand.json
@@ -0,0 +1,31 @@
+{
+  "page_title": "Brand",
+  "table": {
+    "title": "Daftar Brand",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama"
+    }
+  },
+  "actions": {
+    "create": "Tambah Brand",
+    "edit": "Ubah Brand",
+    "show": "Tampilkan Brand",
+    "delete": "Hapus Brand"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "brand_data": "Data Brand"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama"
+  },
+  "alert": {
+    "delete_brand": {
+      "title": "Hapus Brand",
+      "content": "Brand Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/capital_opening.json b/web/src/lang/id/views/capital_opening.json
new file mode 100644
index 000000000..9b219f2e3
--- /dev/null
+++ b/web/src/lang/id/views/capital_opening.json
@@ -0,0 +1,39 @@
+{
+  "page_title": "Modal Awal",
+  "table": {
+    "title": "Daftar Modal Awal",
+    "cols": {
+      "code": "Kode",
+      "date": "Tanggal",
+      "investor": "Investor",
+      "cash_account": "Akun Kas",
+      "amount": "Jumlah"
+    }
+  },
+  "actions": {
+    "create": "Buat Modal Awal",
+    "edit": "Ubah Modal Awal",
+    "show": "Lihat Modal Awal",
+    "delete": "Hapus Modal Awal"
+  },
+  "fields": {
+    "code": "Kode",
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "date": "Tanggal",
+    "investor": "Investor",
+    "cash_account": "Akun Kas",
+    "amount": "Jumlah",
+    "remarks": "Keterangan"
+  },
+  "field_groups": {
+    "company_info": "Info Perusahaan",
+    "capital_opening_data": "Data Modal Awal"
+  },
+  "alert": {
+    "delete_capital_opening": {
+      "title": "Hapus Modal Awal",
+      "content": "Modal Awal Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/capital_transaction.json b/web/src/lang/id/views/capital_transaction.json
new file mode 100644
index 000000000..e5474a273
--- /dev/null
+++ b/web/src/lang/id/views/capital_transaction.json
@@ -0,0 +1,45 @@
+{
+  "page_title": "Transaksi Modal",
+  "table": {
+    "title": "Daftar Transaksi Modal",
+    "cols": {
+      "code": "Kode",
+      "date": "Tanggal",
+      "investor": "Investor",
+      "type": "Tipe",
+      "cash_account": "Akun Kas",
+      "amount": "Jumlah"
+    }
+  },
+  "actions": {
+    "create": "Buat Transaksi Modal",
+    "edit": "Ubah Transaksi Modal",
+    "show": "Lihat Transaksi Modal",
+    "delete": "Hapus Transaksi Modal"
+  },
+  "fields": {
+    "code": "Kode",
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "date": "Tanggal",
+    "investor": "Investor",
+    "type": "Tipe",
+    "cash_account": "Akun Kas",
+    "amount": "Jumlah",
+    "remarks": "Keterangan"
+  },
+  "field_groups": {
+    "company_info": "Info Perusahaan",
+    "capital_transaction_data": "Data Transaksi Modal"
+  },
+  "types": {
+    "in": "Masuk",
+    "out": "Keluar"
+  },
+  "alert": {
+    "delete_capital_transaction": {
+      "title": "Hapus Transaksi Modal",
+      "content": "Transaksi Modal Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/cash_account.json b/web/src/lang/id/views/cash_account.json
new file mode 100644
index 000000000..a74e22743
--- /dev/null
+++ b/web/src/lang/id/views/cash_account.json
@@ -0,0 +1,48 @@
+{
+  "page_title": "Akun Kas",
+  "page_title_with_remaining_balance": "Akun Kas dengan Sisa Saldo",
+  "balance_suffix": "Saldo",
+  "with_remaining_balance_suffix": "Sisa Saldo",
+  "table": {
+    "title": "Daftar Akun Kas",
+    "cols": {
+      "code": "Kode",
+      "company": "Perusahaan",
+      "name": "Nama",
+      "is_bank": "Bank",
+      "is_active": "Aktif",
+      "remarks": "Keterangan",
+      "remaining_balance": "Sisa Saldo"
+    }
+  },
+  "actions": {
+    "create": "Buat Akun Kas",
+    "edit": "Ubah Akun Kas",
+    "show": "Lihat Akun Kas",
+    "delete": "Hapus Akun Kas"
+  },
+  "fields": {
+    "code": "Kode",
+    "company": "Perusahaan",
+    "name": "Nama",
+    "is_bank": "Bank",
+    "is_active": "Aktif",
+    "remarks": "Keterangan",
+    "remaining_balance": "Sisa Saldo",
+    "with_remaining_balance_end_date": "s/d Tanggal"
+  },
+  "field_groups": {
+    "company_info": "Info Perusahaan",
+    "cash_account_data": "Data Akun Kas"
+  },
+  "types": {
+    "bank": "Bank",
+    "cash": "Kas"
+  },
+  "alert": {
+    "delete_cash_account": {
+      "title": "Hapus Akun Kas",
+      "content": "Akun Kas Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/cash_transfer.json b/web/src/lang/id/views/cash_transfer.json
new file mode 100644
index 000000000..126ee9b81
--- /dev/null
+++ b/web/src/lang/id/views/cash_transfer.json
@@ -0,0 +1,40 @@
+{
+  "page_title": "Perpindahan Antar Kas",
+  "table": {
+    "title": "Daftar Perpindahan Antar Kas",
+    "cols": {
+      "code": "Kode",
+      "date": "Tanggal",
+      "source_cash_account": "Akun Kas Sumber",
+      "destination_cash_account": "Akun Kas Tujuan",
+      "amount": "Jumlah"
+    }
+  },
+  "actions": {
+    "create": "Buat Perpindahan Antar Kas",
+    "edit": "Ubah Perpindahan Antar Kas",
+    "show": "Lihat Perpindahan Antar Kas",
+    "delete": "Hapus Perpindahan Antar Kas"
+  },
+  "fields": {
+    "code": "Kode",
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "date": "Tanggal",
+    "source_cash_account": "Akun Kas Sumber",
+    "destination_cash_account": "Akun Kas Tujuan",
+    "amount": "Jumlah",
+    "remarks": "Keterangan"
+  },
+  "field_groups": {
+    "company_info": "Info Perusahaan",
+    "transfer_data": "Data Perpindahan Kas"
+  },
+  "alert": {
+    "delete_cash_transfer": {
+      "title": "Hapus Perpindahan Antar Kas",
+      "content": "Perpindahan Antar Kas Berhasil Dihapus"
+    }
+  }
+}
+
diff --git a/web/src/lang/id/views/chart_of_account.json b/web/src/lang/id/views/chart_of_account.json
new file mode 100644
index 000000000..3dd7761aa
--- /dev/null
+++ b/web/src/lang/id/views/chart_of_account.json
@@ -0,0 +1,58 @@
+{
+  "page_title": "Chart of Account",
+  "actions": {
+    "create": "Tambah Chart of Account",
+    "edit": "Ubah Chart of Account"
+  },
+  "table": {
+    "title": "Daftar Tree Chart of Account"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "chart_of_account_data": "Data Chart of Account"
+  },
+  "fields": {
+    "parent": "Parent",
+    "code": "Kode",
+    "name": "Nama",
+    "scope": "Scope",
+    "system_key": "System Key",
+    "source_type": "Source Type",
+    "source_id": "Source ID",
+    "account_type": "Tipe Akun",
+    "normal_balance": "Saldo Normal",
+    "level": "Level",
+    "is_group": "Group",
+    "is_active": "Aktif",
+    "remarks": "Catatan",
+    "child_count": "Jumlah Child"
+  },
+  "options": {
+    "placeholder": "Pilih...",
+    "boolean": {
+      "yes": "Ya",
+      "no": "Tidak"
+    },
+    "scope": {
+      "system": "System",
+      "user": "User"
+    },
+    "account_type": {
+      "asset": "Aset",
+      "liability": "Liabilitas",
+      "equity": "Ekuitas",
+      "income": "Pendapatan",
+      "expense": "Beban"
+    },
+    "normal_balance": {
+      "debit": "Debit",
+      "credit": "Kredit"
+    }
+  },
+  "alert": {
+    "delete_chart_of_account": {
+      "title": "Berhasil Menghapus Chart of Account",
+      "content": "Chart of account telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/company.json b/web/src/lang/id/views/company.json
index b3e1364ea..7185ff7da 100644
--- a/web/src/lang/id/views/company.json
+++ b/web/src/lang/id/views/company.json
@@ -1,35 +1,35 @@
-{
-    "page_title": "Perusahaan",
-    "table": {
-        "title": "Daftar Perusahaan",
-        "cols": {
-            "code": "Kode",
-            "name": "Nama",
-            "address": "Alamat",
-            "default": "Default",
-            "status": "Status"
-        }
-    },
-    "actions": {
-        "create": "Tambah Perusahaan",
-        "edit": "Ubah Perusahaan",
-        "show": "Tampilkan Perusahaan",
-        "delete": "Hapus Perusahaan"
-    },
-    "field_groups": {
-        "company_data": "Data Perusahaan"
-    },
-    "fields": {
-        "code": "Kode",
-        "name": "Nama",
-        "address": "Alamat",
-        "default": "Default",
-        "status": "Status"
-    },
-    "alert": {
-        "delete_company": {
-            "title": "Hapus Perusahaan",
-            "content": "Perusahaan Berhasil Dihapus"
-        }
-    }
-}
\ No newline at end of file
+{
+  "page_title": "Perusahaan",
+  "table": {
+    "title": "Daftar Perusahaan",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "address": "Alamat",
+      "default": "Default",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Tambah Perusahaan",
+    "edit": "Ubah Perusahaan",
+    "show": "Tampilkan Perusahaan",
+    "delete": "Hapus Perusahaan"
+  },
+  "field_groups": {
+    "company_data": "Data Perusahaan"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama",
+    "address": "Alamat",
+    "default": "Default",
+    "status": "Status"
+  },
+  "alert": {
+    "delete_company": {
+      "title": "Hapus Perusahaan",
+      "content": "Perusahaan Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/customer.json b/web/src/lang/id/views/customer.json
new file mode 100644
index 000000000..4dac2ec7a
--- /dev/null
+++ b/web/src/lang/id/views/customer.json
@@ -0,0 +1,55 @@
+{
+  "page_title": "Pelanggan",
+  "table": {
+    "title": "Daftar Pelanggan",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "is_member": "Anggota",
+      "group": "Grup",
+      "zone": "Zona",
+      "max_open_invoice": "Maks Faktur Terbuka",
+      "max_outstanding_invoice": "Maks Faktur Belum Lunas",
+      "max_invoice_age": "Maks Umur Faktur",
+      "payment_term_type": "Tipe Syarat Pembayaran",
+      "payment_term": "Syarat Pembayaran",
+      "taxable_enterprise": "Pengusaha Kena Pajak",
+      "tax_id": "NPWP",
+      "remarks": "Catatan",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Buat Pelanggan",
+    "edit": "Ubah Pelanggan",
+    "show": "Lihat Pelanggan",
+    "delete": "Hapus Pelanggan"
+  },
+  "field_groups": {
+    "general_information": "Informasi Umum",
+    "credit_limit": "Batas Kredit",
+    "tax_information": "Informasi Pajak"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama",
+    "is_member": "Anggota",
+    "group": "Grup",
+    "zone": "Zona",
+    "max_open_invoice": "Maks Faktur Terbuka",
+    "max_outstanding_invoice": "Maks Faktur Belum Lunas",
+    "max_invoice_age": "Maks Umur Faktur",
+    "payment_term_type": "Tipe Syarat Pembayaran",
+    "payment_term": "Syarat Pembayaran",
+    "taxable_enterprise": "Pengusaha Kena Pajak",
+    "tax_id": "NPWP",
+    "remarks": "Catatan",
+    "status": "Status"
+  },
+  "alert": {
+    "delete": {
+      "title": "Hapus Pelanggan",
+      "message": "Pelanggan Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/customer_group.json b/web/src/lang/id/views/customer_group.json
new file mode 100644
index 000000000..8d4b389c8
--- /dev/null
+++ b/web/src/lang/id/views/customer_group.json
@@ -0,0 +1,66 @@
+{
+  "page_title": "Grup Pelanggan",
+  "table": {
+    "title": "Daftar Grup Pelanggan",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "max_open_invoice": "Maks. Faktur Terbuka",
+      "max_outstanding_invoice": "Maks. Faktur Belum Lunas",
+      "max_invoice_age": "Maks. Umur Faktur",
+      "payment_term_type": "Jenis Termin Pembayaran",
+      "payment_term": "Termin Pembayaran",
+      "selling_point": "Poin Penjualan",
+      "selling_point_multiple": "Kelipatan Poin Penjualan",
+      "sell_at_cost": "Jual Sesuai Modal",
+      "price_markup_percent": "Markup Harga (%)",
+      "price_markup_nominal": "Markup Harga (Nominal)",
+      "price_markdown_percent": "Markdown Harga (%)",
+      "price_markdown_nominal": "Markdown Harga (Nominal)",
+      "round_on": "Pembulatan Pada",
+      "round_digit": "Digit Pembulatan",
+      "remarks": "Catatan",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Buat Grup Pelanggan",
+    "edit": "Ubah Grup Pelanggan",
+    "show": "Tampilkan Grup Pelanggan",
+    "delete": "Hapus Grup Pelanggan"
+  },
+  "field_groups": {
+    "general_information": "Informasi Umum",
+    "credit_limit": "Batas Kredit",
+    "pricing_and_points": "Harga dan Poin",
+    "rounding_rules": "Aturan Pembulatan"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama",
+    "max_open_invoice": "Maks. Faktur Terbuka",
+    "max_outstanding_invoice": "Maks. Faktur Belum Lunas",
+    "max_invoice_age": "Maks. Umur Faktur",
+    "payment_term_type": "Jenis Termin Pembayaran",
+    "payment_term": "Termin Pembayaran",
+    "selling_point": "Poin Penjualan",
+    "selling_point_multiple": "Kelipatan Poin Penjualan",
+    "sell_at_cost": "Jual Sesuai Modal",
+    "price_markup_percent": "Markup Harga (%)",
+    "price_markup_nominal": "Markup Harga (Nominal)",
+    "price_markdown_percent": "Markdown Harga (%)",
+    "price_markdown_nominal": "Markdown Harga (Nominal)",
+    "rounding_type": "Tipe Pembulatan",
+    "rounding_digit": "Digit Pembulatan",
+    "round_on": "Pembulatan Pada",
+    "round_digit": "Digit Pembulatan",
+    "remarks": "Catatan",
+    "status": "Status"
+  },
+  "alert": {
+    "delete_customer_group": {
+      "title": "Hapus Grup Pelanggan",
+      "content": "Grup Pelanggan Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/debt.json b/web/src/lang/id/views/debt.json
new file mode 100644
index 000000000..9b4a99070
--- /dev/null
+++ b/web/src/lang/id/views/debt.json
@@ -0,0 +1,56 @@
+{
+  "page_title": "Hutang",
+  "actions": {
+    "create": "Tambah Hutang",
+    "edit": "Ubah Hutang"
+  },
+  "table": {
+    "title": "Daftar Hutang"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "debt_data": "Data Hutang",
+    "balance_summary": "Ringkasan Saldo",
+    "payments": "Pembayaran"
+  },
+  "fields": {
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "category": "Kategori Hutang",
+    "party_type": "Tipe Pihak",
+    "party": "Pihak",
+    "creditor": "Kreditur",
+    "supplier": "Pemasok",
+    "cash_account": "Akun Kas",
+    "code": "Kode",
+    "date": "Tanggal",
+    "due_days": "Jatuh Tempo (Hari)",
+    "direct_amount_received": "Nominal Diterima Langsung",
+    "opening_amount_due": "Hutang Bawaan",
+    "amount_total": "Total Hutang",
+    "amount_paid_by_cash_account": "Dibayar via Kas",
+    "amount_paid_by_stock_adjustment": "Dibayar via Penyesuaian Stok",
+    "amount_due": "Sisa Hutang",
+    "is_paid_off": "Status Hutang",
+    "remarks": "Catatan",
+    "payment_code": "Kode Pembayaran",
+    "payment_date": "Tanggal Pembayaran",
+    "payment_cash_account": "Akun Kas Pembayaran",
+    "payment_amount": "Nominal Pembayaran",
+    "payment_remarks": "Catatan Pembayaran"
+  },
+  "party_types": {
+    "creditor": "Kreditur",
+    "supplier": "Pemasok"
+  },
+  "status": {
+    "paid_off": "Lunas",
+    "not_paid_off": "Belum Lunas"
+  },
+  "alert": {
+    "delete_debt": {
+      "title": "Berhasil Menghapus Hutang",
+      "content": "Hutang telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/debt_category.json b/web/src/lang/id/views/debt_category.json
new file mode 100644
index 000000000..e12d80f62
--- /dev/null
+++ b/web/src/lang/id/views/debt_category.json
@@ -0,0 +1,25 @@
+{
+  "page_title": "Kategori Hutang",
+  "actions": {
+    "create": "Tambah Kategori Hutang",
+    "edit": "Ubah Kategori Hutang"
+  },
+  "table": {
+    "title": "Daftar Kategori Hutang"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "debt_category_data": "Data Kategori Hutang"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama",
+    "sequence": "Urutan"
+  },
+  "alert": {
+    "delete_debt_category": {
+      "title": "Berhasil Menghapus Kategori Hutang",
+      "content": "Kategori hutang telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/debt_creditor.json b/web/src/lang/id/views/debt_creditor.json
new file mode 100644
index 000000000..43fcd36e7
--- /dev/null
+++ b/web/src/lang/id/views/debt_creditor.json
@@ -0,0 +1,25 @@
+{
+  "page_title": "Kreditur",
+  "actions": {
+    "create": "Tambah Kreditur",
+    "edit": "Ubah Kreditur"
+  },
+  "table": {
+    "title": "Daftar Kreditur"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "debt_creditor_data": "Data Kreditur"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama",
+    "remarks": "Catatan"
+  },
+  "alert": {
+    "delete_debt_creditor": {
+      "title": "Berhasil Menghapus Kreditur",
+      "content": "Kreditur telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/error.json b/web/src/lang/id/views/error.json
index 38ba58e4b..67a394795 100644
--- a/web/src/lang/id/views/error.json
+++ b/web/src/lang/id/views/error.json
@@ -1,9 +1,9 @@
-{
-    "title": "Error",
-    "code": {
-        "401": "Unauthenticated",
-        "403": "Forbidden",
-        "500": "Internal Error",
-        "10000": "Please Choose User Location"
-    }
-}
\ No newline at end of file
+{
+  "title": "Error",
+  "code": {
+    "401": "Unauthenticated",
+    "403": "Forbidden",
+    "500": "Internal Error",
+    "10000": "Please Choose User Location"
+  }
+}
diff --git a/web/src/lang/id/views/expense.json b/web/src/lang/id/views/expense.json
new file mode 100644
index 000000000..4e02fd938
--- /dev/null
+++ b/web/src/lang/id/views/expense.json
@@ -0,0 +1,44 @@
+{
+  "page_title": "Biaya",
+  "actions": {
+    "create": "Tambah Biaya",
+    "edit": "Ubah Biaya"
+  },
+  "table": {
+    "title": "Daftar Biaya"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "expense_data": "Data Biaya",
+    "payable_summary": "Ringkasan Hutang",
+    "payments": "Pembayaran",
+    "images": "Gambar"
+  },
+  "fields": {
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "category": "Kategori",
+    "code": "Kode",
+    "date": "Tanggal",
+    "due_days": "Jatuh Tempo (Hari)",
+    "paid_immediately_cash_account": "Akun Kas Bayar Langsung",
+    "amount_paid_immediately": "Jumlah Bayar Langsung",
+    "amount_payable": "Jumlah Terhutang",
+    "amount_payable_paid": "Terhutang Sudah Dibayar",
+    "amount_payable_due": "Sisa Hutang",
+    "is_amount_payable_paid_off": "Status Lunas",
+    "amount_total": "Jumlah Total",
+    "remarks": "Catatan",
+    "images": "Gambar"
+  },
+  "status": {
+    "paid_off": "Lunas",
+    "not_paid_off": "Belum Lunas"
+  },
+  "alert": {
+    "delete_expense": {
+      "title": "Berhasil Menghapus Biaya",
+      "content": "Biaya telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/expense_category.json b/web/src/lang/id/views/expense_category.json
new file mode 100644
index 000000000..2b0338a15
--- /dev/null
+++ b/web/src/lang/id/views/expense_category.json
@@ -0,0 +1,37 @@
+{
+  "page_title": "Kategori Biaya",
+  "actions": {
+    "create": "Tambah Kategori Biaya",
+    "edit": "Ubah Kategori Biaya"
+  },
+  "table": {
+    "title": "Daftar Tree Kategori Biaya"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "expense_category_data": "Data Kategori Biaya"
+  },
+  "fields": {
+    "parent": "Parent",
+    "category_type": "Jenis Kategori",
+    "code": "Kode",
+    "name": "Nama",
+    "sequence": "Urutan",
+    "child_count": "Jumlah Child"
+  },
+  "options": {
+    "category_type": {
+      "expense": "Beban Operasional",
+      "other_expense": "Beban Lain-lain"
+    }
+  },
+  "descriptions": {
+    "category_type": "Dipakai hanya jika kategori ini tidak punya parent."
+  },
+  "alert": {
+    "delete_expense_category": {
+      "title": "Berhasil Menghapus Kategori Biaya",
+      "content": "Kategori biaya telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/expense_payment.json b/web/src/lang/id/views/expense_payment.json
new file mode 100644
index 000000000..3692dd103
--- /dev/null
+++ b/web/src/lang/id/views/expense_payment.json
@@ -0,0 +1,28 @@
+{
+  "page_title": "Pembayaran Biaya",
+  "actions": {
+    "create": "Tambah Pembayaran Biaya",
+    "edit": "Ubah Pembayaran Biaya"
+  },
+  "table": {
+    "title": "Daftar Pembayaran Biaya"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "expense_payment_data": "Data Pembayaran Biaya"
+  },
+  "fields": {
+    "expense": "Biaya",
+    "code": "Kode",
+    "date": "Tanggal",
+    "cash_account": "Akun Kas",
+    "amount": "Jumlah",
+    "remarks": "Catatan"
+  },
+  "alert": {
+    "delete_expense_payment": {
+      "title": "Berhasil Menghapus Pembayaran Biaya",
+      "content": "Pembayaran biaya telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/forgot_password.json b/web/src/lang/id/views/forgot_password.json
index 7e42a81d6..71ad69f56 100644
--- a/web/src/lang/id/views/forgot_password.json
+++ b/web/src/lang/id/views/forgot_password.json
@@ -1,11 +1,11 @@
-{
-    "title": "Reset Password",
-    "page_title": "Reset Password",
-    "page_title_desc": "Silahkan masukan Email",
-    "fields": {
-        "email": "Email"
-    },
-    "alert": {
-        "successfully_send_link": "Kami telah mengirimkan email tautan setel ulang kata sandi Anda."
-    }
-}
\ No newline at end of file
+{
+  "title": "Reset Password",
+  "page_title": "Reset Password",
+  "page_title_desc": "Silahkan masukan Email",
+  "fields": {
+    "email": "Email"
+  },
+  "alert": {
+    "successfully_send_link": "Kami telah mengirimkan email tautan setel ulang kata sandi Anda."
+  }
+}
diff --git a/web/src/lang/id/views/income.json b/web/src/lang/id/views/income.json
new file mode 100644
index 000000000..8f785f221
--- /dev/null
+++ b/web/src/lang/id/views/income.json
@@ -0,0 +1,44 @@
+{
+  "page_title": "Pendapatan",
+  "actions": {
+    "create": "Tambah Pendapatan",
+    "edit": "Ubah Pendapatan"
+  },
+  "table": {
+    "title": "Daftar Pendapatan"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "income_data": "Data Pendapatan",
+    "receivable_summary": "Ringkasan Piutang",
+    "payments": "Pembayaran",
+    "images": "Gambar"
+  },
+  "fields": {
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "category": "Kategori",
+    "code": "Kode",
+    "date": "Tanggal",
+    "due_days": "Jatuh Tempo (Hari)",
+    "paid_immediately_cash_account": "Akun Kas Bayar Langsung",
+    "amount_paid_immediately": "Jumlah Diterima Langsung",
+    "amount_receivable": "Jumlah Piutang",
+    "amount_receivable_paid": "Piutang Sudah Diterima",
+    "amount_receivable_due": "Sisa Piutang",
+    "is_amount_receivable_paid_off": "Status Lunas",
+    "amount_total": "Jumlah Total",
+    "remarks": "Catatan",
+    "images": "Gambar"
+  },
+  "status": {
+    "paid_off": "Lunas",
+    "not_paid_off": "Belum Lunas"
+  },
+  "alert": {
+    "delete_income": {
+      "title": "Berhasil Menghapus Pendapatan",
+      "content": "Pendapatan telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/income_category.json b/web/src/lang/id/views/income_category.json
new file mode 100644
index 000000000..21c42df95
--- /dev/null
+++ b/web/src/lang/id/views/income_category.json
@@ -0,0 +1,27 @@
+{
+  "page_title": "Kategori Pendapatan",
+  "actions": {
+    "create": "Tambah Kategori Pendapatan",
+    "edit": "Ubah Kategori Pendapatan"
+  },
+  "table": {
+    "title": "Daftar Tree Kategori Pendapatan"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "income_category_data": "Data Kategori Pendapatan"
+  },
+  "fields": {
+    "parent": "Parent",
+    "code": "Kode",
+    "name": "Nama",
+    "sequence": "Urutan",
+    "child_count": "Jumlah Child"
+  },
+  "alert": {
+    "delete_income_category": {
+      "title": "Berhasil Menghapus Kategori Pendapatan",
+      "content": "Kategori pendapatan telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/income_payment.json b/web/src/lang/id/views/income_payment.json
new file mode 100644
index 000000000..d8d395dcf
--- /dev/null
+++ b/web/src/lang/id/views/income_payment.json
@@ -0,0 +1,28 @@
+{
+  "page_title": "Pembayaran Pendapatan",
+  "actions": {
+    "create": "Tambah Pembayaran Pendapatan",
+    "edit": "Ubah Pembayaran Pendapatan"
+  },
+  "table": {
+    "title": "Daftar Pembayaran Pendapatan"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "income_payment_data": "Data Pembayaran Pendapatan"
+  },
+  "fields": {
+    "income": "Pendapatan",
+    "code": "Kode",
+    "date": "Tanggal",
+    "cash_account": "Akun Kas",
+    "amount": "Jumlah",
+    "remarks": "Catatan"
+  },
+  "alert": {
+    "delete_income_payment": {
+      "title": "Berhasil Menghapus Pembayaran Pendapatan",
+      "content": "Pembayaran pendapatan telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/investor.json b/web/src/lang/id/views/investor.json
new file mode 100644
index 000000000..55e706717
--- /dev/null
+++ b/web/src/lang/id/views/investor.json
@@ -0,0 +1,34 @@
+{
+  "page_title": "Investor",
+  "table": {
+    "title": "Daftar Investor",
+    "cols": {
+      "code": "Kode",
+      "company": "Perusahaan",
+      "name": "Nama",
+      "remarks": "Keterangan"
+    }
+  },
+  "actions": {
+    "create": "Buat Investor",
+    "edit": "Edit Investor",
+    "show": "Lihat Investor",
+    "delete": "Hapus Investor"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "investor_data": "Data Investor"
+  },
+  "fields": {
+    "code": "Kode",
+    "company": "Perusahaan",
+    "name": "Nama",
+    "remarks": "Keterangan"
+  },
+  "alert": {
+    "delete_investor": {
+      "title": "Hapus Investor",
+      "content": "Investor berhasil dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/journal_entry.json b/web/src/lang/id/views/journal_entry.json
new file mode 100644
index 000000000..d3f218952
--- /dev/null
+++ b/web/src/lang/id/views/journal_entry.json
@@ -0,0 +1,56 @@
+{
+  "page_title": "Jurnal Umum",
+  "report_entry_detail_title": "Jurnal Umum per Item",
+  "actions": {
+    "create": "Tambah Jurnal Umum",
+    "edit": "Ubah Jurnal Umum",
+    "add_item": "Tambah Item"
+  },
+  "table": {
+    "title": "Daftar Jurnal Umum",
+    "entry_detail_title": "Daftar Jurnal Umum per Item"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "journal_entry_data": "Data Jurnal",
+    "items": "Item Jurnal",
+    "summary": "Ringkasan"
+  },
+  "fields": {
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Awal",
+    "end_date": "Tanggal Akhir",
+    "include_system_journals": "Tampilkan Jurnal Sistem",
+    "source_type": "Tipe Sumber",
+    "source_id": "ID Sumber",
+    "reference_no": "Nomor Referensi",
+    "remarks": "Catatan",
+    "items": "Item Jurnal",
+    "item": "Item",
+    "chart_of_account": "Akun",
+    "debit": "Debit",
+    "credit": "Kredit",
+    "item_remarks": "Catatan Item",
+    "total_debit": "Total Debit",
+    "total_credit": "Total Kredit",
+    "balance_status": "Status Balance"
+  },
+  "options": {
+    "balance": {
+      "balanced": "Balance",
+      "unbalanced": "Belum Balance"
+    }
+  },
+  "helper": {
+    "single_side_amount": "Setiap item hanya boleh diisi debit atau kredit."
+  },
+  "alert": {
+    "delete_journal_entry": {
+      "title": "Berhasil Menghapus Jurnal",
+      "content": "Jurnal berhasil dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/login.json b/web/src/lang/id/views/login.json
index 6cc5a1c68..cbe1f549d 100644
--- a/web/src/lang/id/views/login.json
+++ b/web/src/lang/id/views/login.json
@@ -1,16 +1,16 @@
-{
-    "title": "Login",
-    "fields": {
-        "email": "Email",
-        "password": "Password",
-        "remember_me": "Ingat Aku",
-        "forgot_pass": "Lupa Password",
-        "2fa": {
-            "label": "Tantangan Dua Faktor",
-            "label_description": "",
-            "code": "Kode",
-            "recovery_code": "Kode Pemulihan",
-            "use_recovery_codes": "Menggunakan Recovery Codes"
-        }
-    }
-}
\ No newline at end of file
+{
+  "title": "Login",
+  "fields": {
+    "email": "Email",
+    "password": "Password",
+    "remember_me": "Ingat Aku",
+    "forgot_pass": "Lupa Password",
+    "2fa": {
+      "label": "Tantangan Dua Faktor",
+      "label_description": "",
+      "code": "Kode",
+      "recovery_code": "Kode Pemulihan",
+      "use_recovery_codes": "Menggunakan Recovery Codes"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/prepaid_expense.json b/web/src/lang/id/views/prepaid_expense.json
new file mode 100644
index 000000000..b85b377b5
--- /dev/null
+++ b/web/src/lang/id/views/prepaid_expense.json
@@ -0,0 +1,54 @@
+{
+  "page_title": "Biaya Dibayar Dimuka",
+  "actions": {
+    "create": "Tambah Biaya Dibayar Dimuka",
+    "edit": "Ubah Biaya Dibayar Dimuka"
+  },
+  "table": {
+    "title": "Daftar Biaya Dibayar Dimuka"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "prepaid_expense_data": "Data Biaya Dibayar Dimuka",
+    "payable_summary": "Ringkasan Hutang",
+    "payments": "Pembayaran",
+    "images": "Gambar"
+  },
+  "fields": {
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "category": "Kategori",
+    "code": "Kode",
+    "date": "Tanggal",
+    "estimated_useful_life": "Taksiran Masa Manfaat",
+    "due_days": "Jatuh Tempo (Hari)",
+    "paid_immediately_cash_account": "Akun Kas Bayar Langsung",
+    "amount_paid_immediately": "Jumlah Bayar Langsung",
+    "amount_payable": "Jumlah Terhutang",
+    "amount_payable_paid": "Terhutang Sudah Dibayar",
+    "amount_payable_due": "Sisa Hutang",
+    "is_amount_payable_paid_off": "Status Lunas",
+    "amount_total": "Jumlah Total",
+    "remarks": "Catatan",
+    "images": "Gambar"
+  },
+  "hints": {
+    "estimated_useful_life": "Isi dalam satuan bulan."
+  },
+  "units": {
+    "month": "bulan",
+    "months": "bulan",
+    "year": "tahun",
+    "years": "tahun"
+  },
+  "status": {
+    "paid_off": "Lunas",
+    "not_paid_off": "Belum Lunas"
+  },
+  "alert": {
+    "delete_prepaid_expense": {
+      "title": "Berhasil Menghapus Biaya Dibayar Dimuka",
+      "content": "Biaya dibayar dimuka telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/prepaid_income.json b/web/src/lang/id/views/prepaid_income.json
new file mode 100644
index 000000000..c87ba2b54
--- /dev/null
+++ b/web/src/lang/id/views/prepaid_income.json
@@ -0,0 +1,54 @@
+{
+  "page_title": "Pendapatan Diterima Dimuka",
+  "actions": {
+    "create": "Tambah Pendapatan Diterima Dimuka",
+    "edit": "Ubah Pendapatan Diterima Dimuka"
+  },
+  "table": {
+    "title": "Daftar Pendapatan Diterima Dimuka"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "prepaid_income_data": "Data Pendapatan Diterima Dimuka",
+    "receivable_summary": "Ringkasan Piutang",
+    "payments": "Pembayaran",
+    "images": "Gambar"
+  },
+  "fields": {
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "category": "Kategori",
+    "code": "Kode",
+    "date": "Tanggal",
+    "estimated_useful_life": "Taksiran Masa Manfaat",
+    "due_days": "Jatuh Tempo (Hari)",
+    "paid_immediately_cash_account": "Akun Kas Bayar Langsung",
+    "amount_paid_immediately": "Jumlah Diterima Langsung",
+    "amount_receivable": "Jumlah Piutang",
+    "amount_receivable_paid": "Piutang Sudah Diterima",
+    "amount_receivable_due": "Sisa Piutang",
+    "is_amount_receivable_paid_off": "Status Lunas",
+    "amount_total": "Jumlah Total",
+    "remarks": "Catatan",
+    "images": "Gambar"
+  },
+  "hints": {
+    "estimated_useful_life": "Isi dalam satuan bulan."
+  },
+  "units": {
+    "month": "bulan",
+    "months": "bulan",
+    "year": "tahun",
+    "years": "tahun"
+  },
+  "status": {
+    "paid_off": "Lunas",
+    "not_paid_off": "Belum Lunas"
+  },
+  "alert": {
+    "delete_prepaid_income": {
+      "title": "Berhasil Menghapus Pendapatan Diterima Dimuka",
+      "content": "Pendapatan diterima dimuka telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/product.json b/web/src/lang/id/views/product.json
new file mode 100644
index 000000000..7048e71cb
--- /dev/null
+++ b/web/src/lang/id/views/product.json
@@ -0,0 +1,83 @@
+{
+  "page_title": "Produk",
+  "page_title_with_remaining_stock": "Produk dengan Sisa Stok",
+  "with_remaining_stock_suffix": "Stok",
+  "table": {
+    "title": "Daftar Produk",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "vat_profile": "Profil PPN",
+      "category": "Kategori",
+      "brand": "Merek",
+      "unit": "Satuan",
+      "price": "Harga",
+      "point": "Poin",
+      "status": "Status",
+      "image": "Gambar"
+    }
+  },
+  "actions": {
+    "create": "Buat Produk",
+    "edit": "Ubah Produk",
+    "show": "Lihat Produk",
+    "delete": "Hapus Produk"
+  },
+  "field_groups": {
+    "company_info": "Info Perusahaan",
+    "product_data": "Data Produk",
+    "price_tax_settings": "Pengaturan Harga & Pajak",
+    "unit_settings": "Pengaturan Satuan",
+    "other_settings": "Pengaturan Lainnya"
+  },
+  "detail": {
+    "info_title": "Informasi Produk",
+    "settings_title": "Pengaturan & Pajak",
+    "units_title": "Satuan Produk"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama",
+    "category_id": "Kategori",
+    "brand_id": "Merek",
+    "default_vat_profile_id": "Profil PPN",
+    "unit_id": "Satuan",
+    "base_unit": "Satuan Dasar",
+    "base_unit_price": "Harga per Satuan Dasar",
+    "other_unit": "Satuan Lain",
+    "images": "Gambar",
+    "type": "Tipe",
+    "conversion_value": "Isi",
+    "unit_code": "Kode Satuan",
+    "is_primary_unit": "Satuan Utama",
+    "is_manufacturer_sku": "SKU Pabrik",
+    "price": "Harga",
+    "point": "Poin",
+    "is_price_include_vat": "Harga Termasuk PPN",
+    "is_use_serial_number": "Gunakan Nomor Seri",
+    "serial_number": "Nomor Seri",
+    "is_expirable": "Dapat Kedaluwarsa",
+    "status": "Status",
+    "remarks": "Keterangan",
+    "with_remaining_stock_end_date": "s/d Tanggal"
+  },
+  "status": {
+    "active": "Aktif",
+    "inactive": "Tidak Aktif"
+  },
+  "alert": {
+    "create": {
+      "title": "Buat Produk",
+      "message": "Produk Berhasil Dibuat"
+    },
+    "update": {
+      "title": "Ubah Produk",
+      "message": "Produk Berhasil Diubah"
+    },
+    "delete": {
+      "title": "Hapus Produk",
+      "message": "Produk Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/product_category.json b/web/src/lang/id/views/product_category.json
new file mode 100644
index 000000000..7ae0be291
--- /dev/null
+++ b/web/src/lang/id/views/product_category.json
@@ -0,0 +1,37 @@
+{
+  "page_title": "Kategori Produk",
+  "table": {
+    "title": "Daftar Kategori Produk",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "type": "Tipe"
+    }
+  },
+  "actions": {
+    "create": "Tambah Kategori Produk",
+    "edit": "Ubah Kategori Produk",
+    "show": "Tampilkan Kategori Produk",
+    "delete": "Hapus Kategori Produk"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "product_category_data": "Data Kategori Produk"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama",
+    "type": "Tipe"
+  },
+  "type": {
+    "product": "Produk",
+    "service": "Jasa"
+  },
+  "alert": {
+    "delete_product_category": {
+      "title": "Hapus Kategori Produk",
+      "content": "Kategori Produk Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/product_service.json b/web/src/lang/id/views/product_service.json
new file mode 100644
index 000000000..0f83c29a2
--- /dev/null
+++ b/web/src/lang/id/views/product_service.json
@@ -0,0 +1,58 @@
+{
+  "page_title": "Produk Jasa",
+  "table": {
+    "title": "Daftar Produk Jasa",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "category": "Kategori",
+      "unit": "Satuan",
+      "price": "Harga",
+      "point": "Poin",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Buat Produk Jasa",
+    "edit": "Ubah Produk Jasa",
+    "show": "Lihat Produk Jasa",
+    "delete": "Hapus Produk Jasa"
+  },
+  "field_groups": {
+    "company_info": "Info Perusahaan",
+    "product_data": "Data Produk",
+    "price_tax_settings": "Pengaturan Harga & Pajak",
+    "other_settings": "Pengaturan Lainnya"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama",
+    "category_id": "Kategori",
+    "default_vat_profile_id": "Profil PPN",
+    "unit_id": "Satuan",
+    "price": "Harga",
+    "point": "Poin",
+    "is_price_include_vat": "Harga Termasuk PPN",
+    "status": "Status",
+    "remarks": "Keterangan"
+  },
+  "status": {
+    "active": "Aktif",
+    "inactive": "Tidak Aktif"
+  },
+  "alert": {
+    "create": {
+      "title": "Buat Produk Jasa",
+      "message": "Produk Jasa Berhasil Dibuat"
+    },
+    "update": {
+      "title": "Ubah Produk Jasa",
+      "message": "Produk Jasa Berhasil Diubah"
+    },
+    "delete": {
+      "title": "Hapus Produk Jasa",
+      "message": "Produk Jasa Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/profile.json b/web/src/lang/id/views/profile.json
index e09302737..9c8cc9cc5 100644
--- a/web/src/lang/id/views/profile.json
+++ b/web/src/lang/id/views/profile.json
@@ -1,69 +1,69 @@
-{
-    "title": "Profil",
-    "field_groups": {
-        "user_profile": "Profil Pengguna",
-        "email_verification": "Verifikasi Email",
-        "personal_information": "Informasi Pribadi",
-        "account_settings": "Pengaturan Akun",
-        "roles": "Peran",
-        "change_password": "Ubah Password",
-        "api_token": "API Token",
-        "two_factor_authentication": "Verifikasi Dua Langkah"
-    },
-    "fields": {
-        "name": "Nama",
-        "first_name": "Nama Depan",
-        "last_name": "Nama Keluarga",
-        "address": "Alamat",
-        "city": "Kota",
-        "postal_code": "Kode Pos",
-        "country": "Negara",
-        "tax_id": "NPWP",
-        "remarks": "Keterangan",
-        "email": "Email",
-        "ic_num": "KTP",
-        "settings": {
-            "theme": "Tema",
-            "date_format": "Format Tanggal",
-            "time_format": "Format Waktu"
-        },
-        "change_password": {
-            "current_password": "Password Sekarang",
-            "password": "Password Baru",
-            "password_confirmation": "Konfirmasi Password Baru"
-        },
-        "api_token": {
-            "total_token_generated": "Jumlah Token Yang Dimiliki",
-            "reset": "Reset Token"
-        },
-        "2fa": {
-            "status": "Status Verifikasi Dua Langkah",
-            "qr-code": "QR Code",
-            "qr-code_description_1": "Silakan Pindai Kode QR Ini Di Aplikasi Google Authenticator Anda",
-            "qr-code_description_2": "Unduh Google Authenticator di Google Play",
-            "qr-code_description_3": "",
-            "qr-code_description_4": "",
-            "recovery-codes": "Recovery Codes",
-            "recovery-codes_description_1": "Catat Dan Simpan Recovery Codes Ini Di Tempat Yang Aman.",
-            "recovery-codes_description_2": "Kode Ini Tidak Akan Dapat Diakses Setelah Anda Menutup Halaman Ini.",
-            "secret-key": "Kunci Rahasia",
-            "secret-key_description_1": "Catat Dan Simpan Secret Key Ini Di Tempat Yang Aman.",
-            "secret-key_description_2": "Secret Key Ini Tidak Akan Dapat Diakses Setelah Anda Menutup Halaman Ini.",
-            "confirm_password": "Konfirmasi Password",
-            "confirm_password_error": "Kata Sandi Yang Diberikan Salah.",
-            "confirm_2fa_auth_description_1": "Otentikasi Dua Faktor Anda Juga Perlu Diaktifkan.",
-            "confirm_2fa_auth_description_2": "Silakan Masukkan Kode Yang Ditampilkan Di Aplikasi Google Authenticator",
-            "confirm_2fa_auth": "Kode Dari Google Authenticator",
-            "confirm_2fa_auth_error": "Kode Yang Diberikan Salah."
-        }
-    },
-    "tooltip": {
-        "email_verified": "Email terverifikasi"
-    },
-    "alert": {
-        "verification_email_sent": {
-            "title": "Email Verifikasi",
-            "content": "Email verifikasi terkirim"
-        }
-    }
-}
\ No newline at end of file
+{
+  "title": "Profil",
+  "field_groups": {
+    "user_profile": "Profil Pengguna",
+    "email_verification": "Verifikasi Email",
+    "personal_information": "Informasi Pribadi",
+    "account_settings": "Pengaturan Akun",
+    "roles": "Peran",
+    "change_password": "Ubah Password",
+    "api_token": "API Token",
+    "two_factor_authentication": "Verifikasi Dua Langkah"
+  },
+  "fields": {
+    "name": "Nama",
+    "first_name": "Nama Depan",
+    "last_name": "Nama Keluarga",
+    "address": "Alamat",
+    "city": "Kota",
+    "postal_code": "Kode Pos",
+    "country": "Negara",
+    "tax_id": "NPWP",
+    "remarks": "Keterangan",
+    "email": "Email",
+    "ic_num": "KTP",
+    "settings": {
+      "theme": "Tema",
+      "date_format": "Format Tanggal",
+      "time_format": "Format Waktu"
+    },
+    "change_password": {
+      "current_password": "Password Sekarang",
+      "password": "Password Baru",
+      "password_confirmation": "Konfirmasi Password Baru"
+    },
+    "api_token": {
+      "total_token_generated": "Jumlah Token Yang Dimiliki",
+      "reset": "Reset Token"
+    },
+    "2fa": {
+      "status": "Status Verifikasi Dua Langkah",
+      "qr-code": "QR Code",
+      "qr-code_description_1": "Silakan Pindai Kode QR Ini Di Aplikasi Google Authenticator Anda",
+      "qr-code_description_2": "Unduh Google Authenticator di Google Play",
+      "qr-code_description_3": "",
+      "qr-code_description_4": "",
+      "recovery-codes": "Recovery Codes",
+      "recovery-codes_description_1": "Catat Dan Simpan Recovery Codes Ini Di Tempat Yang Aman.",
+      "recovery-codes_description_2": "Kode Ini Tidak Akan Dapat Diakses Setelah Anda Menutup Halaman Ini.",
+      "secret-key": "Kunci Rahasia",
+      "secret-key_description_1": "Catat Dan Simpan Secret Key Ini Di Tempat Yang Aman.",
+      "secret-key_description_2": "Secret Key Ini Tidak Akan Dapat Diakses Setelah Anda Menutup Halaman Ini.",
+      "confirm_password": "Konfirmasi Password",
+      "confirm_password_error": "Kata Sandi Yang Diberikan Salah.",
+      "confirm_2fa_auth_description_1": "Otentikasi Dua Faktor Anda Juga Perlu Diaktifkan.",
+      "confirm_2fa_auth_description_2": "Silakan Masukkan Kode Yang Ditampilkan Di Aplikasi Google Authenticator",
+      "confirm_2fa_auth": "Kode Dari Google Authenticator",
+      "confirm_2fa_auth_error": "Kode Yang Diberikan Salah."
+    }
+  },
+  "tooltip": {
+    "email_verified": "Email terverifikasi"
+  },
+  "alert": {
+    "verification_email_sent": {
+      "title": "Email Verifikasi",
+      "content": "Email verifikasi terkirim"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/purchase.json b/web/src/lang/id/views/purchase.json
new file mode 100644
index 000000000..c0ea09067
--- /dev/null
+++ b/web/src/lang/id/views/purchase.json
@@ -0,0 +1,114 @@
+{
+  "page_title": "Purchase",
+  "table": {
+    "title": "Daftar Purchase"
+  },
+  "actions": {
+    "create": "Tambah Purchase",
+    "create_direct": "Create Direct",
+    "create_manual": "Create Manual",
+    "edit": "Ubah Purchase",
+    "show": "Tampilkan Purchase",
+    "delete": "Hapus Purchase"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "purchase_data": "Data Purchase",
+    "summary": "Ringkasan",
+    "status": "Status",
+    "items": "Item-item",
+    "additional_costs": "Biaya Tambahan",
+    "status_breakdown": "Rincian Status"
+  },
+  "fields": {
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Awal",
+    "end_date": "Tanggal Akhir",
+    "supplier_id": "Pemasok",
+    "purchase_order_id": "Purchase Order",
+    "purchase_order_id_optional": "Kosongkan jika tidak berasal dari purchase order",
+    "due_days": "Jatuh Tempo (Hari)",
+    "direct_receipt_warehouse_id": "Gudang Penerimaan Langsung",
+    "tax_invoice_number": "Nomor Faktur Pajak",
+    "tax_invoice_vat_base": "DPP Faktur Pajak",
+    "tax_invoice_vat": "PPN Faktur Pajak",
+    "remarks": "Catatan",
+    "receipt_mode": "Mode Receipt",
+    "progress_status": "Status Progress",
+    "amount_payable": "Jumlah Harus Dibayar",
+    "amount_payable_preview": "Preview Jumlah Harus Dibayar",
+    "amount_paid_immediately": "Jumlah Bayar Langsung",
+    "amount_paid_total": "Jumlah Dibayar",
+    "amount_due": "Sisa Tagihan",
+    "purchase_additional_cost_category_id": "Kategori Biaya Tambahan",
+    "paid_immediately_cash_account_id": "Kas Bayar Langsung",
+    "item_total_before_global_discount": "Total Sebelum Diskon Global",
+    "global_discount": "Diskon Global",
+    "global_discount_total": "Total Diskon Global",
+    "item_total_after_global_discount": "Total Setelah Diskon Global",
+    "items_subtotal_after_discount": "Subtotal Item Setelah Diskon",
+    "vat_base": "Dasar PPN",
+    "vat": "PPN",
+    "vat_profile_id": "Profil PPN",
+    "vat_rate": "Tarif PPN",
+    "vat_base_fraction": "Fraksi Dasar PPN",
+    "additional_cost": "Biaya Tambahan",
+    "rounding": "Pembulatan",
+    "is_paid_off": "Lunas",
+    "is_posted": "Posted",
+    "product_unit_id": "Produk",
+    "qty": "Qty",
+    "product_unit_qty_base": "Qty Dasar",
+    "qty_received_base": "Qty Diterima Base",
+    "qty_outstanding_base": "Qty Outstanding Base",
+    "qty_excess_base": "Qty Kelebihan Base",
+    "product_unit_price": "Harga Satuan",
+    "product_unit_conversion_value": "Konversi Satuan",
+    "product_unit_is_price_include_vat": "Harga Termasuk PPN",
+    "product_unit_price_discounts": "Diskon Harga Satuan",
+    "product_unit_price_discounts_empty": "Belum ada diskon harga satuan",
+    "price_after_discount": "Harga Satuan Setelah Diskon",
+    "subtotal_discounts": "Diskon Subtotal",
+    "subtotal_discounts_empty": "Belum ada diskon subtotal",
+    "subtotal": "Subtotal",
+    "subtotal_after_discount": "Subtotal Setelah Diskon",
+    "serials": "Serial Number",
+    "serials_empty": "Belum ada serial number",
+    "item_price_breakdown": "Rincian Harga Item",
+    "item_additional_details": "Detail Tambahan Item",
+    "sequence": "Urutan",
+    "discount_type": "Jenis Diskon",
+    "discount_value": "Nilai Diskon",
+    "subtotal_after_vat": "Subtotal Setelah PPN",
+    "item_total_count": "Total Item",
+    "item_matched_count": "Item Sesuai",
+    "item_less_count": "Item Kurang",
+    "item_more_count": "Item Lebih",
+    "item_unlinked_count": "Item Belum Tertaut",
+    "manual_receipt_count": "Jumlah Receipt Manual",
+    "items_empty": "Belum ada item purchase",
+    "additional_costs_hint": "Tambahkan biaya tambahan jika ada biaya pembelian lain di luar item.",
+    "additional_costs_empty": "Belum ada biaya tambahan",
+    "global_discounts": "Diskon Global",
+    "global_discounts_empty": "Belum ada diskon global"
+  },
+  "alert": {
+    "create": {
+      "title": "Simpan Purchase",
+      "message": "Purchase berhasil disimpan"
+    },
+    "update": {
+      "title": "Ubah Purchase",
+      "message": "Purchase berhasil diperbarui"
+    },
+    "delete": {
+      "title": "Hapus Purchase",
+      "message": "Purchase berhasil dihapus"
+    }
+  },
+  "form_placeholder": {
+    "title": "Form purchase belum dilengkapi",
+    "description": "Route create dan edit sudah terhubung, tetapi form detail purchase masih perlu dilanjutkan."
+  }
+}
diff --git a/web/src/lang/id/views/purchase_additional_cost.json b/web/src/lang/id/views/purchase_additional_cost.json
new file mode 100644
index 000000000..3b3bccdda
--- /dev/null
+++ b/web/src/lang/id/views/purchase_additional_cost.json
@@ -0,0 +1,35 @@
+{
+  "page_title": "Biaya Tambahan Purchase",
+  "actions": {
+    "create": "Tambah Biaya Tambahan Purchase",
+    "edit": "Ubah Biaya Tambahan Purchase"
+  },
+  "table": {
+    "title": "Daftar Biaya Tambahan Purchase"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "purchase_additional_cost_data": "Data Biaya Tambahan Purchase"
+  },
+  "fields": {
+    "purchase": "Purchase",
+    "category": "Kategori",
+    "code": "Kode",
+    "date": "Tanggal",
+    "due_days": "Jatuh Tempo (Hari)",
+    "paid_immediately_cash_account": "Akun Kas Bayar Langsung",
+    "amount_paid_immediately": "Jumlah Bayar Langsung",
+    "amount_payable": "Jumlah Terhutang",
+    "amount_payable_paid": "Terhutang Sudah Dibayar",
+    "amount_payable_due": "Sisa Hutang",
+    "is_amount_payable_paid_off": "Status Lunas",
+    "amount_total": "Jumlah Total",
+    "remarks": "Catatan"
+  },
+  "alert": {
+    "delete_purchase_additional_cost": {
+      "title": "Berhasil Menghapus Biaya Tambahan Purchase",
+      "content": "Biaya tambahan purchase telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/purchase_additional_cost_category.json b/web/src/lang/id/views/purchase_additional_cost_category.json
new file mode 100644
index 000000000..159957a2d
--- /dev/null
+++ b/web/src/lang/id/views/purchase_additional_cost_category.json
@@ -0,0 +1,24 @@
+{
+  "page_title": "Kategori Biaya Tambahan Purchase",
+  "actions": {
+    "create": "Tambah Kategori Biaya Tambahan Purchase",
+    "edit": "Ubah Kategori Biaya Tambahan Purchase"
+  },
+  "table": {
+    "title": "Daftar Kategori Biaya Tambahan Purchase"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "purchase_additional_cost_category_data": "Data Kategori Biaya Tambahan Purchase"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama"
+  },
+  "alert": {
+    "delete_purchase_additional_cost_category": {
+      "title": "Berhasil Menghapus Kategori Biaya Tambahan Purchase",
+      "content": "Kategori biaya tambahan purchase telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/purchase_additional_cost_payment.json b/web/src/lang/id/views/purchase_additional_cost_payment.json
new file mode 100644
index 000000000..4587dad54
--- /dev/null
+++ b/web/src/lang/id/views/purchase_additional_cost_payment.json
@@ -0,0 +1,28 @@
+{
+  "page_title": "Pembayaran Biaya Tambahan Purchase",
+  "actions": {
+    "create": "Tambah Pembayaran Biaya Tambahan Purchase",
+    "edit": "Ubah Pembayaran Biaya Tambahan Purchase"
+  },
+  "table": {
+    "title": "Daftar Pembayaran Biaya Tambahan Purchase"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "purchase_additional_cost_payment_data": "Data Pembayaran Biaya Tambahan Purchase"
+  },
+  "fields": {
+    "purchase_additional_cost": "Biaya Tambahan Purchase",
+    "code": "Kode",
+    "date": "Tanggal",
+    "cash_account": "Akun Kas",
+    "amount": "Jumlah",
+    "remarks": "Catatan"
+  },
+  "alert": {
+    "delete_purchase_additional_cost_payment": {
+      "title": "Berhasil Menghapus Pembayaran Biaya Tambahan Purchase",
+      "content": "Pembayaran biaya tambahan purchase telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/purchase_order.json b/web/src/lang/id/views/purchase_order.json
new file mode 100644
index 000000000..3c8ecbabe
--- /dev/null
+++ b/web/src/lang/id/views/purchase_order.json
@@ -0,0 +1,127 @@
+{
+  "page_title": "Purchase Order",
+  "table": {
+    "title": "Daftar Purchase Order",
+    "cols": {
+      "code": "Kode",
+      "date": "Tanggal",
+      "supplier": "Pemasok",
+      "due_days": "Jatuh Tempo (Hari)",
+      "grand_total": "Jumlah Harus Dibayar",
+      "remarks": "Catatan"
+    }
+  },
+  "actions": {
+    "create": "Tambah Purchase Order",
+    "edit": "Ubah Purchase Order",
+    "show": "Tampilkan Purchase Order",
+    "delete": "Hapus Purchase Order"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "purchase_order_data": "Data Purchase Order",
+    "items": "Item-item",
+    "item_additional_details": "Detail Item Tambahan",
+    "progress": "Progres",
+    "summary": "Ringkasan",
+    "global_discounts": "Diskon Global",
+    "down_payments": "Uang Muka",
+    "refunded_down_payments": "Refund Uang Muka"
+  },
+  "filters": {
+    "down_payment_allocation_status": "Status Alokasi Uang Muka",
+    "down_payment_allocation_status_not_fully_allocated": "Belum / Belum Sepenuhnya Dialokasikan",
+    "down_payment_allocation_status_fully_allocated": "Sudah Dialokasikan Penuh",
+    "progress_status": "Status Progres",
+    "progress_status_unlinked": "Belum Terhubung",
+    "progress_status_unmatched": "Belum Sesuai",
+    "progress_status_matched": "Sesuai"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "branch_id": "Cabang",
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Awal",
+    "end_date": "Tanggal Akhir",
+    "due_days": "Jatuh Tempo (Hari)",
+    "supplier_id": "Pemasok",
+    "remarks": "Catatan",
+    "grand_total": "Jumlah Harus Dibayar",
+    "amount_payable": "Jumlah Harus Dibayar",
+    "global_discount": "Diskon Global",
+    "global_discounts": "Diskon Global",
+    "price_discount": "Diskon Harga",
+    "down_payment": "Uang Muka",
+    "down_payments": "Uang Muka",
+    "amount_paid_down_payment": "Jumlah Uang Muka",
+    "amount_allocated": "Jumlah Teralokasi",
+    "amount_allocated_down_payment": "Jumlah Uang Muka Teralokasi",
+    "amount_refunded_down_payment": "Jumlah Refund Uang Muka",
+    "amount_available_down_payment": "Sisa Uang Muka",
+    "refunded_down_payments": "Refund Uang Muka",
+    "progress_status": "Status Progres",
+    "item_total_count": "Total Item",
+    "item_matched_count": "Item Sesuai",
+    "item_less_count": "Item Kurang",
+    "item_more_count": "Item Lebih",
+    "item_unlinked_count": "Item Belum Terhubung",
+    "product_unit_id": "Produk",
+    "product_unit_code": "Kode Produk Satuan",
+    "unit_name": "Satuan",
+    "qty": "Qty",
+    "qty_purchased_base": "Qty Terbeli Base",
+    "qty_outstanding_base": "Qty Sisa Base",
+    "qty_excess_base": "Qty Lebih Base",
+    "product_unit_conversion_value": "Nilai Konversi",
+    "product_unit_price": "Harga Satuan",
+    "item_grand_total": "Jumlah Harus Dibayar Item",
+    "product_unit_price_discounts": "Diskon Harga Satuan",
+    "product_unit_price_discounts_empty": "Belum ada data diskon harga satuan",
+    "price_after_discount": "Harga Satuan Setelah Diskon",
+    "subtotal": "Subtotal Setelah Diskon Harga Satuan",
+    "subtotal_discount": "Diskon Subtotal",
+    "subtotal_discounts_empty": "Belum ada data diskon subtotal",
+    "subtotal_after_discount": "Subtotal Setelah Diskon",
+    "subtotal_after_vat": "Subtotal Setelah PPN",
+    "item_price_breakdown": "Rincian Harga Item",
+    "item_additional_details": "Detail Tambahan Item",
+    "items_grand_total_after_discount": "Total Jumlah Harus Dibayar Item",
+    "items_subtotal_after_discount": "Total Subtotal Setelah Diskon",
+    "global_discounts_summary_hint": "Atur diskon global untuk total semua item.",
+    "global_discount_total": "Total Diskon Global",
+    "item_total_before_global_discount": "Total Sebelum Diskon Global",
+    "item_total_after_global_discount": "Total Setelah Diskon Global",
+    "item_total_after_vat": "Total Item Setelah PPN",
+    "vat_base": "Dasar PPN",
+    "vat": "PPN",
+    "amount_payable_preview": "Jumlah Harus Dibayar",
+    "rounding": "Pembulatan",
+    "subtotal_discounts": "Diskon Subtotal",
+    "product_unit_is_price_include_vat": "Harga Termasuk PPN",
+    "vat_profile_id": "Profil PPN",
+    "vat_rate": "Tarif PPN",
+    "vat_base_fraction": "Fraksi Dasar PPN",
+    "vat_base_numerator": "Pembilang Dasar PPN",
+    "vat_base_denominator": "Penyebut Dasar PPN",
+    "sequence": "Urutan",
+    "discount_type": "Tipe Diskon",
+    "discount_value": "Nilai Diskon",
+    "cash_account_id": "Akun Kas",
+    "amount": "Jumlah"
+  },
+  "alert": {
+    "create": {
+      "title": "Tambah Purchase Order",
+      "message": "Purchase Order berhasil ditambahkan"
+    },
+    "update": {
+      "title": "Ubah Purchase Order",
+      "message": "Purchase Order berhasil diperbarui"
+    },
+    "delete": {
+      "title": "Hapus Purchase Order",
+      "message": "Purchase Order berhasil dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/purchase_order_down_payment.json b/web/src/lang/id/views/purchase_order_down_payment.json
new file mode 100644
index 000000000..9c90ef9e0
--- /dev/null
+++ b/web/src/lang/id/views/purchase_order_down_payment.json
@@ -0,0 +1,4 @@
+{
+  "page_title": "Daftar Uang Muka Purchase Order",
+  "page_title_not_fully_allocated": "Daftar Uang Muka Purchase Order Belum Full Dialokasikan"
+}
diff --git a/web/src/lang/id/views/purchase_order_down_payment_refund.json b/web/src/lang/id/views/purchase_order_down_payment_refund.json
new file mode 100644
index 000000000..79ba5a867
--- /dev/null
+++ b/web/src/lang/id/views/purchase_order_down_payment_refund.json
@@ -0,0 +1,3 @@
+{
+  "page_title": "Daftar Refund Uang Muka Purchase Order"
+}
diff --git a/web/src/lang/id/views/purchase_order_item.json b/web/src/lang/id/views/purchase_order_item.json
new file mode 100644
index 000000000..bf37e396b
--- /dev/null
+++ b/web/src/lang/id/views/purchase_order_item.json
@@ -0,0 +1,3 @@
+{
+  "page_title": "Daftar Item Purchase Order"
+}
diff --git a/web/src/lang/id/views/purchase_receipt.json b/web/src/lang/id/views/purchase_receipt.json
new file mode 100644
index 000000000..73365aa7c
--- /dev/null
+++ b/web/src/lang/id/views/purchase_receipt.json
@@ -0,0 +1,46 @@
+{
+  "page_title": "Purchase Receipt",
+  "table": {
+    "title": "Daftar Purchase Receipt"
+  },
+  "actions": {
+    "create": "Tambah Purchase Receipt",
+    "edit": "Ubah Purchase Receipt",
+    "show": "Tampilkan Purchase Receipt",
+    "delete": "Hapus Purchase Receipt"
+  },
+  "field_groups": {
+    "status": "Status",
+    "remarks": "Catatan",
+    "items": "Item-item"
+  },
+  "fields": {
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Awal",
+    "end_date": "Tanggal Akhir",
+    "supplier_id": "Pemasok",
+    "purchase_id": "Purchase",
+    "warehouse_id": "Gudang",
+    "remarks": "Catatan",
+    "is_from_direct_purchase": "Dari Purchase Langsung",
+    "is_linked_to_purchase": "Tertaut ke Purchase",
+    "is_posted": "Posted",
+    "item_count": "Jumlah Item",
+    "product_unit_id": "Produk",
+    "qty": "Qty",
+    "product_unit_conversion_value": "Nilai Konversi",
+    "serial_count": "Jumlah Serial",
+    "items_empty": "Belum ada item receipt"
+  },
+  "alert": {
+    "delete": {
+      "title": "Hapus Purchase Receipt",
+      "message": "Purchase Receipt berhasil dihapus"
+    }
+  },
+  "form_placeholder": {
+    "title": "Form purchase receipt belum dilengkapi",
+    "description": "Route create dan edit sudah terhubung, tetapi form detail purchase receipt masih perlu dilanjutkan."
+  }
+}
diff --git a/web/src/lang/id/views/receivable.json b/web/src/lang/id/views/receivable.json
new file mode 100644
index 000000000..d64de3fdb
--- /dev/null
+++ b/web/src/lang/id/views/receivable.json
@@ -0,0 +1,50 @@
+{
+  "page_title": "Piutang",
+  "actions": {
+    "create": "Tambah Piutang",
+    "edit": "Ubah Piutang"
+  },
+  "table": {
+    "title": "Daftar Piutang"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "receivable_data": "Data Piutang",
+    "balance_summary": "Ringkasan Saldo",
+    "payments": "Pembayaran"
+  },
+  "fields": {
+    "company": "Perusahaan",
+    "branch": "Cabang",
+    "category": "Kategori Piutang",
+    "customer": "Pelanggan",
+    "cash_account": "Akun Kas",
+    "code": "Kode",
+    "date": "Tanggal",
+    "due_days": "Jatuh Tempo (Hari)",
+    "direct_amount_received": "Nominal Diterima Langsung",
+    "opening_amount_due": "Piutang Bawaan",
+    "amount_total": "Total Piutang",
+    "amount_paid_by_cash_account": "Diterima via Kas",
+    "amount_paid_by_stock_adjustment": "Diterima via Penyesuaian Stok",
+    "amount_due": "Sisa Piutang",
+    "is_paid_off": "Status Piutang",
+    "remarks": "Catatan",
+    "payment_code": "Kode Pembayaran",
+    "payment_date": "Tanggal Pembayaran",
+    "payment_cash_account": "Akun Kas Pembayaran",
+    "payment_amount": "Nominal Pembayaran",
+    "payment_remarks": "Catatan Pembayaran"
+  },
+  "status": {
+    "paid_off": "Lunas",
+    "not_paid_off": "Belum Lunas"
+  },
+  "alert": {
+    "delete_receivable": {
+      "title": "Berhasil Menghapus Piutang",
+      "content": "Piutang telah dihapus."
+    }
+  }
+}
+
diff --git a/web/src/lang/id/views/receivable_category.json b/web/src/lang/id/views/receivable_category.json
new file mode 100644
index 000000000..8549de627
--- /dev/null
+++ b/web/src/lang/id/views/receivable_category.json
@@ -0,0 +1,25 @@
+{
+  "page_title": "Kategori Piutang",
+  "actions": {
+    "create": "Tambah Kategori Piutang",
+    "edit": "Ubah Kategori Piutang"
+  },
+  "table": {
+    "title": "Daftar Kategori Piutang"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "receivable_category_data": "Data Kategori Piutang"
+  },
+  "fields": {
+    "code": "Kode",
+    "name": "Nama",
+    "sequence": "Urutan"
+  },
+  "alert": {
+    "delete_receivable_category": {
+      "title": "Berhasil Menghapus Kategori Piutang",
+      "content": "Kategori piutang telah dihapus."
+    }
+  }
+}
diff --git a/web/src/lang/id/views/register.json b/web/src/lang/id/views/register.json
index e54e3fa54..d3aa10dab 100644
--- a/web/src/lang/id/views/register.json
+++ b/web/src/lang/id/views/register.json
@@ -1,12 +1,12 @@
-{
-    "title": "Daftar Baru",
-    "name": "Nama",
-    "email": "Email",
-    "password": "Password",
-    "password_confirmation": "Konfirmasi Password",
-    "terms": "Terms",
-    "agree_1": "I agree to the ",
-    "agree_2": "terms",
-    "already_member": "I already have a membership",
-    "terms_and_cond": "Terms & Condition"
-}
\ No newline at end of file
+{
+  "title": "Daftar Baru",
+  "name": "Nama",
+  "email": "Email",
+  "password": "Password",
+  "password_confirmation": "Konfirmasi Password",
+  "terms": "Terms",
+  "agree_1": "I agree to the ",
+  "agree_2": "terms",
+  "already_member": "I already have a membership",
+  "terms_and_cond": "Terms & Condition"
+}
diff --git a/web/src/lang/id/views/reset_password.json b/web/src/lang/id/views/reset_password.json
index 64be04773..b81e871d6 100644
--- a/web/src/lang/id/views/reset_password.json
+++ b/web/src/lang/id/views/reset_password.json
@@ -1,13 +1,13 @@
-{
-    "title": "Reset Password",
-    "page_title": "Reset Password",
-    "page_title_desc": "Silahkan masukan password baru",
-    "fields": {
-        "email": "Email",
-        "password": "Password",
-        "password_confirmation": "Confirm password"
-    },
-    "alert": {
-        "successfully_reset_password": "Password berhasil dirubah."
-    }
-}
\ No newline at end of file
+{
+  "title": "Reset Password",
+  "page_title": "Reset Password",
+  "page_title_desc": "Silahkan masukan password baru",
+  "fields": {
+    "email": "Email",
+    "password": "Password",
+    "password_confirmation": "Confirm password"
+  },
+  "alert": {
+    "successfully_reset_password": "Password berhasil dirubah."
+  }
+}
diff --git a/web/src/lang/id/views/stock_adjustment.json b/web/src/lang/id/views/stock_adjustment.json
new file mode 100644
index 000000000..9fc9a10b6
--- /dev/null
+++ b/web/src/lang/id/views/stock_adjustment.json
@@ -0,0 +1,59 @@
+{
+  "page_title": "Penyesuaian Stok",
+  "table": {
+    "title": "Daftar Penyesuaian Stok",
+    "cols": {
+      "code": "Kode",
+      "date": "Tanggal",
+      "category": "Kategori",
+      "in_warehouse": "Gudang Masuk",
+      "out_warehouse": "Gudang Keluar",
+      "is_posted": "Diposting",
+      "remarks": "Catatan"
+    }
+  },
+  "actions": {
+    "create": "Tambah Penyesuaian Stok",
+    "edit": "Ubah Penyesuaian Stok",
+    "show": "Tampilkan Penyesuaian Stok",
+    "delete": "Hapus Penyesuaian Stok"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "stock_adjustment_data": "Data Penyesuaian Stok",
+    "in_items": "Item Masuk",
+    "out_items": "Item Keluar"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "branch_id": "Cabang",
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Awal",
+    "end_date": "Tanggal Akhir",
+    "stock_adjustment_code": "Kode Penyesuaian Stok",
+    "product_name": "Nama Produk",
+    "product_unit_code": "Kode Produk",
+    "category_id": "Kategori",
+    "in_warehouse_id": "Gudang Masuk",
+    "out_warehouse_id": "Gudang Keluar",
+    "remarks": "Catatan",
+    "is_posted": "Diposting",
+    "in_items": "Item Masuk",
+    "out_items": "Item Keluar"
+  },
+  "alert": {
+    "create": {
+      "title": "Tambah Penyesuaian Stok",
+      "message": "Penyesuaian Stok Berhasil Ditambahkan"
+    },
+    "update": {
+      "title": "Ubah Penyesuaian Stok",
+      "message": "Penyesuaian Stok Berhasil Diperbarui"
+    },
+    "delete": {
+      "title": "Hapus Penyesuaian Stok",
+      "message": "Penyesuaian Stok Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/stock_adjustment_category.json b/web/src/lang/id/views/stock_adjustment_category.json
new file mode 100644
index 000000000..5fff6c7bd
--- /dev/null
+++ b/web/src/lang/id/views/stock_adjustment_category.json
@@ -0,0 +1,31 @@
+{
+  "page_title": "Kategori Penyesuaian Stok",
+  "table": {
+    "title": "Daftar Kategori Penyesuaian Stok",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama"
+    }
+  },
+  "actions": {
+    "create": "Tambah Kategori Penyesuaian Stok",
+    "edit": "Ubah Kategori Penyesuaian Stok",
+    "show": "Tampilkan Kategori Penyesuaian Stok",
+    "delete": "Hapus Kategori Penyesuaian Stok"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "stock_adjustment_category_data": "Data Kategori Penyesuaian Stok"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama"
+  },
+  "alert": {
+    "delete_stock_adjustment_category": {
+      "title": "Hapus Kategori Penyesuaian Stok",
+      "content": "Kategori Penyesuaian Stok Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/stock_adjustment_in_item.json b/web/src/lang/id/views/stock_adjustment_in_item.json
new file mode 100644
index 000000000..f1636bbb4
--- /dev/null
+++ b/web/src/lang/id/views/stock_adjustment_in_item.json
@@ -0,0 +1,35 @@
+{
+  "page_title": "Penyesuaian Stok Masuk per Item",
+  "table": {
+    "title": "Daftar Penyesuaian Stok Masuk per Item",
+    "cols": {
+      "product": "Produk",
+      "qty": "Qty",
+      "product_unit": "Satuan Produk",
+      "remaining_stock": "Sisa Stok",
+      "product_unit_conversion_value": "Isi",
+      "product_unit_cogs": "HPP Satuan",
+      "product_unit_total_cogs": "Total HPP",
+      "product_unit_base_unit_cogs": "HPP Satuan Dasar",
+      "remarks": "Catatan"
+    }
+  },
+  "actions": {
+    "create": "Tambah Item Masuk",
+    "edit": "Ubah Item Masuk",
+    "show": "Detail Item Masuk",
+    "delete": "Hapus Item Masuk"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "branch_id": "Cabang",
+    "stock_adjustment_id": "Penyesuaian Stok",
+    "qty": "Qty",
+    "product_unit_id": "Satuan Produk",
+    "product_unit_conversion_value": "Isi",
+    "product_unit_cogs": "HPP Satuan",
+    "product_unit_total_cogs": "Total HPP",
+    "product_unit_base_unit_cogs": "HPP Satuan Dasar",
+    "remarks": "Catatan"
+  }
+}
diff --git a/web/src/lang/id/views/stock_adjustment_in_item_serial.json b/web/src/lang/id/views/stock_adjustment_in_item_serial.json
new file mode 100644
index 000000000..5737cd7fa
--- /dev/null
+++ b/web/src/lang/id/views/stock_adjustment_in_item_serial.json
@@ -0,0 +1,22 @@
+{
+  "page_title": "Serial Penyesuaian Stok Masuk per Item",
+  "table": {
+    "title": "Daftar Serial Penyesuaian Stok Masuk per Item",
+    "cols": {
+      "stock_adjustment_code": "Kode",
+      "product_name": "Produk",
+      "serial": "Serial"
+    }
+  },
+  "actions": {
+    "create": "Tambah Serial",
+    "edit": "Ubah Serial",
+    "show": "Lihat Serial",
+    "delete": "Hapus Serial"
+  },
+  "fields": {
+    "stock_adjustment_id": "Penyesuaian Stok",
+    "stock_adjustment_in_item_id": "Item Masuk",
+    "serial": "Serial"
+  }
+}
diff --git a/web/src/lang/id/views/stock_adjustment_out_item.json b/web/src/lang/id/views/stock_adjustment_out_item.json
new file mode 100644
index 000000000..44484184a
--- /dev/null
+++ b/web/src/lang/id/views/stock_adjustment_out_item.json
@@ -0,0 +1,31 @@
+{
+  "page_title": "Penyesuaian Stok Keluar per Item",
+  "table": {
+    "title": "Daftar Penyesuaian Stok Keluar per Item",
+    "cols": {
+      "product": "Produk",
+      "qty": "Qty",
+      "product_unit": "Satuan Produk",
+      "remaining_stock": "Sisa Stok",
+      "product_unit_conversion_value": "Nilai Konversi",
+      "product_unit_cogs": "HPP Satuan",
+      "remarks": "Catatan"
+    }
+  },
+  "actions": {
+    "create": "Tambah Item Keluar",
+    "edit": "Ubah Item Keluar",
+    "show": "Detail Item Keluar",
+    "delete": "Hapus Item Keluar"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "branch_id": "Cabang",
+    "stock_adjustment_id": "Penyesuaian Stok",
+    "qty": "Qty",
+    "product_id": "Produk",
+    "product_unit_id": "Satuan Produk",
+    "product_unit_conversion_value": "Nilai Konversi",
+    "remarks": "Catatan"
+  }
+}
diff --git a/web/src/lang/id/views/stock_adjustment_out_item_serial.json b/web/src/lang/id/views/stock_adjustment_out_item_serial.json
new file mode 100644
index 000000000..a1c3373a0
--- /dev/null
+++ b/web/src/lang/id/views/stock_adjustment_out_item_serial.json
@@ -0,0 +1,22 @@
+{
+  "page_title": "Serial Penyesuaian Stok Keluar per Item",
+  "table": {
+    "title": "Daftar Serial Penyesuaian Stok Keluar per Item",
+    "cols": {
+      "stock_adjustment_code": "Kode",
+      "product_name": "Produk",
+      "serial": "Serial"
+    }
+  },
+  "actions": {
+    "create": "Tambah Serial",
+    "edit": "Ubah Serial",
+    "show": "Lihat Serial",
+    "delete": "Hapus Serial"
+  },
+  "fields": {
+    "stock_adjustment_id": "Penyesuaian Stok",
+    "stock_adjustment_out_item_id": "Item Keluar",
+    "serial": "Serial"
+  }
+}
diff --git a/web/src/lang/id/views/stock_transfer.json b/web/src/lang/id/views/stock_transfer.json
new file mode 100644
index 000000000..7abe65ac4
--- /dev/null
+++ b/web/src/lang/id/views/stock_transfer.json
@@ -0,0 +1,55 @@
+{
+  "page_title": "Transfer Stok",
+  "table": {
+    "title": "Daftar Transfer Stok",
+    "cols": {
+      "code": "Kode",
+      "date": "Tanggal",
+      "source_warehouse": "Gudang Sumber",
+      "destination_warehouse": "Gudang Tujuan",
+      "is_posted": "Diposting",
+      "remarks": "Catatan"
+    }
+  },
+  "actions": {
+    "create": "Tambah Transfer Stok",
+    "edit": "Ubah Transfer Stok",
+    "show": "Tampilkan Transfer Stok",
+    "delete": "Hapus Transfer Stok"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "stock_transfer_data": "Data Transfer Stok",
+    "items": "Item-item"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "branch_id": "Cabang",
+    "code": "Kode",
+    "date": "Tanggal",
+    "start_date": "Tanggal Awal",
+    "end_date": "Tanggal Akhir",
+    "stock_transfer_code": "Kode Transfer Stok",
+    "product_name": "Nama Produk",
+    "product_unit_code": "Kode Produk",
+    "source_warehouse_id": "Gudang Sumber",
+    "destination_warehouse_id": "Gudang Tujuan",
+    "remarks": "Catatan",
+    "is_posted": "Diposting",
+    "items": "Item-item"
+  },
+  "alert": {
+    "create": {
+      "title": "Tambah Transfer Stok",
+      "message": "Transfer Stok berhasil ditambahkan"
+    },
+    "update": {
+      "title": "Ubah Transfer Stok",
+      "message": "Transfer Stok berhasil diperbarui"
+    },
+    "delete": {
+      "title": "Hapus Transfer Stok",
+      "message": "Transfer Stok berhasil dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/stock_transfer_item.json b/web/src/lang/id/views/stock_transfer_item.json
new file mode 100644
index 000000000..ac973d0e6
--- /dev/null
+++ b/web/src/lang/id/views/stock_transfer_item.json
@@ -0,0 +1,30 @@
+{
+  "page_title": "Transfer Stok per Item",
+  "table": {
+    "title": "Daftar Transfer Stok per Item",
+    "cols": {
+      "product": "Produk",
+      "qty": "Qty",
+      "product_unit": "Satuan Produk",
+      "product_unit_conversion_value": "Nilai Konversi",
+      "product_unit_qty_base": "Qty Dasar",
+      "remarks": "Catatan"
+    }
+  },
+  "actions": {
+    "create": "Tambah Item",
+    "edit": "Ubah Item",
+    "show": "Detail Item",
+    "delete": "Hapus Item"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "branch_id": "Cabang",
+    "stock_transfer_id": "Transfer Stok",
+    "qty": "Qty",
+    "product_unit_id": "Satuan Produk",
+    "product_unit_conversion_value": "Nilai Konversi",
+    "product_unit_qty_base": "Qty Dasar",
+    "remarks": "Catatan"
+  }
+}
diff --git a/web/src/lang/id/views/stock_transfer_item_serial.json b/web/src/lang/id/views/stock_transfer_item_serial.json
new file mode 100644
index 000000000..e46447260
--- /dev/null
+++ b/web/src/lang/id/views/stock_transfer_item_serial.json
@@ -0,0 +1,22 @@
+{
+  "page_title": "Serial Transfer Stok per Item",
+  "table": {
+    "title": "Daftar Serial Transfer Stok per Item",
+    "cols": {
+      "stock_transfer_code": "Kode",
+      "product_name": "Produk",
+      "serial": "Serial"
+    }
+  },
+  "actions": {
+    "create": "Tambah Serial",
+    "edit": "Ubah Serial",
+    "show": "Lihat Serial",
+    "delete": "Hapus Serial"
+  },
+  "fields": {
+    "stock_transfer_id": "Transfer Stok",
+    "stock_transfer_item_id": "Transfer Stok per Item",
+    "serial": "Serial"
+  }
+}
diff --git a/web/src/lang/id/views/supplier.json b/web/src/lang/id/views/supplier.json
new file mode 100644
index 000000000..6d755aac4
--- /dev/null
+++ b/web/src/lang/id/views/supplier.json
@@ -0,0 +1,47 @@
+{
+  "page_title": "Pemasok",
+  "table": {
+    "title": "Daftar Pemasok",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "address": "Alamat",
+      "city": "Kota",
+      "payment_term_type": "Tipe Termin",
+      "payment_term": "Termin",
+      "taxable_enterprise": "PKP",
+      "tax_id": "NPWP",
+      "status": "Status",
+      "remarks": "Keterangan"
+    }
+  },
+  "actions": {
+    "create": "Buat Pemasok",
+    "edit": "Ubah Pemasok",
+    "show": "Lihat Pemasok",
+    "delete": "Hapus Pemasok"
+  },
+  "field_groups": {
+    "general": "Informasi Umum",
+    "finance": "Informasi Keuangan"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama",
+    "address": "Alamat",
+    "city": "Kota",
+    "payment_term_type": "Tipe Termin Pembayaran",
+    "payment_term": "Termin Pembayaran",
+    "taxable_enterprise": "Pengusaha Kena Pajak",
+    "tax_id": "NPWP",
+    "status": "Status",
+    "remarks": "Keterangan"
+  },
+  "alert": {
+    "delete": {
+      "title": "Hapus Pemasok",
+      "message": "Pemasok Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/unit.json b/web/src/lang/id/views/unit.json
new file mode 100644
index 000000000..9b4c988a6
--- /dev/null
+++ b/web/src/lang/id/views/unit.json
@@ -0,0 +1,41 @@
+{
+  "page_title": "Satuan",
+  "table": {
+    "title": "Daftar Satuan",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "description": "Deskripsi",
+      "type": "Tipe"
+    }
+  },
+  "actions": {
+    "create": "Buat Satuan",
+    "edit": "Ubah Satuan",
+    "show": "Lihat Satuan",
+    "delete": "Hapus Satuan"
+  },
+  "field_groups": {
+    "company_info": "Info Perusahaan",
+    "unit_data": "Data Satuan"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama",
+    "description": "Deskripsi",
+    "type": "Tipe"
+  },
+  "enums": {
+    "unit_type": {
+      "product": "Produk",
+      "service": "Jasa"
+    }
+  },
+  "alert": {
+    "delete_unit": {
+      "title": "Hapus Satuan",
+      "content": "Satuan Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/user.json b/web/src/lang/id/views/user.json
index f6e355215..0aa4d8f8e 100644
--- a/web/src/lang/id/views/user.json
+++ b/web/src/lang/id/views/user.json
@@ -1,56 +1,56 @@
-{
-    "page_title": "Pengguna",
-    "table": {
-        "title": "Daftar Pengguna",
-        "cols": {
-            "name": "Nama",
-            "email": "Email",
-            "roles": "Peran",
-            "status": "Status"
-        }
-    },
-    "actions": {
-        "create": "Tambah Pengguna",
-        "edit": "Ubah Pengguna",
-        "show": "Tampilkan Pengguna"
-    },
-    "field_groups": {
-        "user_info": "Informasi Pengguna",
-        "user_profile": "Profil Pengguna",
-        "roles": "Roles",
-        "settings": "Settings",
-        "tokens_management": "Tokens Management",
-        "password_management": "Password Management",
-        "two_factor_auth": "Verifikasi Dua Langkah"
-    },
-    "fields": {
-        "name": "Nama",
-        "email": "Email",
-        "roles": "Peran",
-        "picture": "Foto",
-        "first_name": "Nama Depan",
-        "last_name": "Nama Belakang",
-        "address": "Alamat",
-        "ic_num": "Nomor KTP",
-        "country": "Negara",
-        "remarks": "Deskripsi",
-        "status": "Status",
-        "tax_id": "No NPWP",
-        "postal_code": "Kode Pos",
-        "city": "Kota",
-        "settings": {
-            "settings": "Pengaturan",
-            "theme": "Tema",
-            "date_format": "Format Tanggal",
-            "time_format": "Format Waktu"
-        },
-        "tokens": {
-            "tokens": "Tokens",
-            "count": "Jumlah Tokens",
-            "reset": "Reset"
-        },
-        "reset_password": "Reset Password",
-        "email_reset_password": "Kirim Email",
-        "reset_2fa": "Reset Verifikasi Dua Langkah"
-    }
-}
\ No newline at end of file
+{
+  "page_title": "Pengguna",
+  "table": {
+    "title": "Daftar Pengguna",
+    "cols": {
+      "name": "Nama",
+      "email": "Email",
+      "roles": "Peran",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Tambah Pengguna",
+    "edit": "Ubah Pengguna",
+    "show": "Tampilkan Pengguna"
+  },
+  "field_groups": {
+    "user_info": "Informasi Pengguna",
+    "user_profile": "Profil Pengguna",
+    "roles": "Roles",
+    "settings": "Settings",
+    "tokens_management": "Tokens Management",
+    "password_management": "Password Management",
+    "two_factor_auth": "Verifikasi Dua Langkah"
+  },
+  "fields": {
+    "name": "Nama",
+    "email": "Email",
+    "roles": "Peran",
+    "picture": "Foto",
+    "first_name": "Nama Depan",
+    "last_name": "Nama Belakang",
+    "address": "Alamat",
+    "ic_num": "Nomor KTP",
+    "country": "Negara",
+    "remarks": "Deskripsi",
+    "status": "Status",
+    "tax_id": "No NPWP",
+    "postal_code": "Kode Pos",
+    "city": "Kota",
+    "settings": {
+      "settings": "Pengaturan",
+      "theme": "Tema",
+      "date_format": "Format Tanggal",
+      "time_format": "Format Waktu"
+    },
+    "tokens": {
+      "tokens": "Tokens",
+      "count": "Jumlah Tokens",
+      "reset": "Reset"
+    },
+    "reset_password": "Reset Password",
+    "email_reset_password": "Kirim Email",
+    "reset_2fa": "Reset Verifikasi Dua Langkah"
+  }
+}
diff --git a/web/src/lang/id/views/vat_profile.json b/web/src/lang/id/views/vat_profile.json
new file mode 100644
index 000000000..f4a9c4b00
--- /dev/null
+++ b/web/src/lang/id/views/vat_profile.json
@@ -0,0 +1,39 @@
+{
+  "page_title": "Profil PPN",
+  "table": {
+    "title": "Daftar Profil PPN",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "vat_rate": "Tarif PPN",
+      "vat_base_fraction": "Fraksi Dasar PPN",
+      "is_active": "Aktif"
+    }
+  },
+  "actions": {
+    "create": "Buat Profil PPN",
+    "edit": "Ubah Profil PPN",
+    "show": "Lihat Profil PPN",
+    "delete": "Hapus Profil PPN"
+  },
+  "field_groups": {
+    "company_info": "Info Perusahaan",
+    "vat_profile_data": "Data Profil PPN"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama",
+    "vat_rate": "Tarif PPN",
+    "vat_base_numerator": "Pembilang Dasar PPN",
+    "vat_base_denominator": "Penyebut Dasar PPN",
+    "remarks": "Catatan",
+    "is_active": "Aktif"
+  },
+  "alert": {
+    "delete_vat_profile": {
+      "title": "Hapus Profil PPN",
+      "content": "Profil PPN berhasil dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/id/views/warehouse.json b/web/src/lang/id/views/warehouse.json
new file mode 100644
index 000000000..e564c95c0
--- /dev/null
+++ b/web/src/lang/id/views/warehouse.json
@@ -0,0 +1,43 @@
+{
+  "page_title": "Gudang",
+  "table": {
+    "title": "Daftar Gudang",
+    "cols": {
+      "code": "Kode",
+      "name": "Nama",
+      "address": "Alamat",
+      "city": "Kota",
+      "contact": "Kontak",
+      "is_main": "Gudang Utama",
+      "remarks": "Keterangan",
+      "status": "Status"
+    }
+  },
+  "actions": {
+    "create": "Tambah Gudang",
+    "edit": "Ubah Gudang",
+    "show": "Tampilkan Gudang",
+    "delete": "Hapus Gudang"
+  },
+  "field_groups": {
+    "company_info": "Informasi Perusahaan",
+    "warehouse_data": "Data Gudang"
+  },
+  "fields": {
+    "company_id": "Perusahaan",
+    "code": "Kode",
+    "name": "Nama",
+    "address": "Alamat",
+    "city": "Kota",
+    "contact": "Kontak",
+    "is_main": "Gudang Utama",
+    "remarks": "Keterangan",
+    "status": "Status"
+  },
+  "alert": {
+    "delete_warehouse": {
+      "title": "Hapus Gudang",
+      "content": "Gudang Berhasil Dihapus"
+    }
+  }
+}
diff --git a/web/src/lang/index.ts b/web/src/lang/index.ts
index ab54627a6..7d6327af3 100644
--- a/web/src/lang/index.ts
+++ b/web/src/lang/index.ts
@@ -1,29 +1,29 @@
-import { createI18n } from "vue-i18n";
-import en from "./messages.en";
-import id from "./messages.id";
-
-const language = document.documentElement.lang;
-
-const i18n = createI18n({
-    legacy: false,
-    locale: language,
-    fallbackLocale: 'en',
-    messages: {
-        en: en,
-        id: id
-    },
-    missingWarn: false,
-    fallbackWarn: false
-});
-
-export function switchLang(lang: "en" | "id"): void {
-    i18n.global.locale.value = lang;
-    document.documentElement.setAttribute('lang', lang);
-    localStorage.setItem('DCSLAB_LANG', lang);
-}
-
-export function getLang(): string {
-    return i18n.global.locale.value;
-}
-
-export default i18n;
+import { createI18n } from 'vue-i18n';
+import en from './messages.en';
+import id from './messages.id';
+
+const language = document.documentElement.lang;
+
+const i18n = createI18n({
+  legacy: false,
+  locale: language,
+  fallbackLocale: 'en',
+  messages: {
+    en: en,
+    id: id,
+  },
+  missingWarn: false,
+  fallbackWarn: false,
+});
+
+export function switchLang(lang: 'en' | 'id'): void {
+  i18n.global.locale.value = lang;
+  document.documentElement.setAttribute('lang', lang);
+  localStorage.setItem('DCSLAB_LANG', lang);
+}
+
+export function getLang(): string {
+  return i18n.global.locale.value;
+}
+
+export default i18n;
diff --git a/web/src/lang/messages.en.ts b/web/src/lang/messages.en.ts
index bb7de31a4..837e8f7e5 100644
--- a/web/src/lang/messages.en.ts
+++ b/web/src/lang/messages.en.ts
@@ -1,50 +1,166 @@
-import menu from "./en/components/menu.json";
-import buttons from "./en/components/buttons.json";
-import alert_placeholder from "./en/components/alert-placeholder.json";
-import dropdown from "./en/components/dropdown.json";
-import profile_menu from "./en/components/profile-menu.json";
-import language_switcher from "./en/components/language-switcher.json";
-import search_box from "./en/components/search-box.json";
-import sidebar_pop from "./en/components/sidebar-pop.json";
-import data_list from "./en/components/data-list.json"
-import user_location from "./en/components/user-location.json";
-import delete_modal from "./en/components/delete-modal.json";
-import file_upload from "./en/components/file-upload.json";
-
-import login from "./en/views/login.json";
-import register from "./en/views/register.json";
-import forgot_password from "./en/views/forgot_password.json";
-import reset_password from "./en/views/reset_password.json";
-import profile from "./en/views/profile.json";
-import user from "./en/views/user.json";
-import company from "./en/views/company.json"
-import branch from "./en/views/branch.json"
-import error from "./en/views/error.json"
-
-export default {
-    "components": {
-        "menu": menu,
-        "alert-placeholder": alert_placeholder,
-        "buttons": buttons,
-        "dropdown": dropdown,
-        "data-list": data_list,
-        "user-location": user_location,
-        "delete-modal": delete_modal,
-        "file-upload": file_upload,
-        "profile-menu": profile_menu,
-        "language-switcher": language_switcher,
-        "search-box": search_box,
-        "sidebar-pop": sidebar_pop
-    },
-    "views": {
-        "login": login,
-        "register": register,
-        "forgot_password": forgot_password,
-        "reset_password": reset_password,
-        "profile": profile,
-        "user": user,
-        "company": company,
-        "branch": branch,
-        "error": error,
-    }
-}
\ No newline at end of file
+import menu from './en/components/menu.json';
+import buttons from './en/components/buttons.json';
+import alert_placeholder from './en/components/alert-placeholder.json';
+import dropdown from './en/components/dropdown.json';
+import profile_menu from './en/components/profile-menu.json';
+import language_switcher from './en/components/language-switcher.json';
+import search_box from './en/components/search-box.json';
+import sidebar_pop from './en/components/sidebar-pop.json';
+import data_list from './en/components/data-list.json';
+import user_location from './en/components/user-location.json';
+import delete_modal from './en/components/delete-modal.json';
+import file_upload from './en/components/file-upload.json';
+
+import login from './en/views/login.json';
+import register from './en/views/register.json';
+import forgot_password from './en/views/forgot_password.json';
+import reset_password from './en/views/reset_password.json';
+import profile from './en/views/profile.json';
+import user from './en/views/user.json';
+import company from './en/views/company.json';
+import branch from './en/views/branch.json';
+import warehouse from './en/views/warehouse.json';
+import product_category from './en/views/product_category.json';
+import brand from './en/views/brand.json';
+import unit from './en/views/unit.json';
+import vat_profile from './en/views/vat_profile.json';
+import customer_group from './en/views/customer_group.json';
+import customer from './en/views/customer.json';
+import investor from './en/views/investor.json';
+import cash_account from './en/views/cash_account.json';
+import capital_opening from './en/views/capital_opening.json';
+import capital_transaction from './en/views/capital_transaction.json';
+import cash_transfer from './en/views/cash_transfer.json';
+import expense from './en/views/expense.json';
+import prepaid_expense from './en/views/prepaid_expense.json';
+import expense_payment from './en/views/expense_payment.json';
+import debt from './en/views/debt.json';
+import receivable from './en/views/receivable.json';
+import income from './en/views/income.json';
+import prepaid_income from './en/views/prepaid_income.json';
+import income_payment from './en/views/income_payment.json';
+import purchase_additional_cost from './en/views/purchase_additional_cost.json';
+import purchase_additional_cost_payment from './en/views/purchase_additional_cost_payment.json';
+import purchase from './en/views/purchase.json';
+import purchase_receipt from './en/views/purchase_receipt.json';
+import expense_category from './en/views/expense_category.json';
+import debt_category from './en/views/debt_category.json';
+import asset_category from './en/views/asset_category.json';
+import asset_unit from './en/views/asset_unit.json';
+import asset from './en/views/asset.json';
+import asset_adjustment from './en/views/asset_adjustment.json';
+import asset_adjustment_in_item from './en/views/asset_adjustment_in_item.json';
+import asset_adjustment_out_item from './en/views/asset_adjustment_out_item.json';
+import asset_purchase from './en/views/asset_purchase.json';
+import asset_purchase_item from './en/views/asset_purchase_item.json';
+import asset_sale from './en/views/asset_sale.json';
+import asset_sale_item from './en/views/asset_sale_item.json';
+import receivable_category from './en/views/receivable_category.json';
+import debt_creditor from './en/views/debt_creditor.json';
+import income_category from './en/views/income_category.json';
+import chart_of_account from './en/views/chart_of_account.json';
+import journal_entry from './en/views/journal_entry.json';
+import balance_sheet from './en/views/balance_sheet.json';
+import product_service from './en/views/product_service.json';
+import product from './en/views/product.json';
+import supplier from './en/views/supplier.json';
+import stock_adjustment_category from './en/views/stock_adjustment_category.json';
+import stock_adjustment from './en/views/stock_adjustment.json';
+import stock_adjustment_in_item from './en/views/stock_adjustment_in_item.json';
+import stock_adjustment_in_item_serial from './en/views/stock_adjustment_in_item_serial.json';
+import stock_adjustment_out_item from './en/views/stock_adjustment_out_item.json';
+import stock_adjustment_out_item_serial from './en/views/stock_adjustment_out_item_serial.json';
+import purchase_order from './en/views/purchase_order.json';
+import purchase_order_item from './en/views/purchase_order_item.json';
+import purchase_order_down_payment from './en/views/purchase_order_down_payment.json';
+import purchase_order_down_payment_refund from './en/views/purchase_order_down_payment_refund.json';
+import stock_transfer from './en/views/stock_transfer.json';
+import stock_transfer_item from './en/views/stock_transfer_item.json';
+import stock_transfer_item_serial from './en/views/stock_transfer_item_serial.json';
+import error from './en/views/error.json';
+
+export default {
+  components: {
+    menu: menu,
+    'alert-placeholder': alert_placeholder,
+    buttons: buttons,
+    dropdown: dropdown,
+    'data-list': data_list,
+    'user-location': user_location,
+    'delete-modal': delete_modal,
+    'file-upload': file_upload,
+    'profile-menu': profile_menu,
+    'language-switcher': language_switcher,
+    'search-box': search_box,
+    'sidebar-pop': sidebar_pop,
+  },
+  views: {
+    login: login,
+    register: register,
+    forgot_password: forgot_password,
+    reset_password: reset_password,
+    profile: profile,
+    user: user,
+    company: company,
+    branch: branch,
+    warehouse: warehouse,
+    product_category: product_category,
+    brand: brand,
+    unit: unit,
+    vat_profile: vat_profile,
+    product_service: product_service,
+    product: product,
+    supplier: supplier,
+    customer_group: customer_group,
+    customer: customer,
+    investor: investor,
+    cash_account: cash_account,
+    capital_opening: capital_opening,
+    capital_transaction: capital_transaction,
+    cash_transfer: cash_transfer,
+    expense: expense,
+    prepaid_expense: prepaid_expense,
+    expense_payment: expense_payment,
+    debt: debt,
+    receivable: receivable,
+    income: income,
+    prepaid_income: prepaid_income,
+    income_payment: income_payment,
+    purchase_additional_cost: purchase_additional_cost,
+    purchase_additional_cost_payment: purchase_additional_cost_payment,
+    purchase: purchase,
+    purchase_receipt: purchase_receipt,
+    expense_category: expense_category,
+    debt_category: debt_category,
+    asset_category: asset_category,
+    asset_unit: asset_unit,
+    asset: asset,
+    asset_adjustment: asset_adjustment,
+    asset_adjustment_in_item: asset_adjustment_in_item,
+    asset_adjustment_out_item: asset_adjustment_out_item,
+    asset_purchase: asset_purchase,
+    asset_purchase_item: asset_purchase_item,
+    asset_sale: asset_sale,
+    asset_sale_item: asset_sale_item,
+    receivable_category: receivable_category,
+    debt_creditor: debt_creditor,
+    income_category: income_category,
+    chart_of_account: chart_of_account,
+    journal_entry: journal_entry,
+    balance_sheet: balance_sheet,
+    stock_adjustment_category: stock_adjustment_category,
+    stock_adjustment: stock_adjustment,
+    stock_adjustment_in_item: stock_adjustment_in_item,
+    stock_adjustment_in_item_serial: stock_adjustment_in_item_serial,
+    stock_adjustment_out_item: stock_adjustment_out_item,
+    stock_adjustment_out_item_serial: stock_adjustment_out_item_serial,
+    purchase_order: purchase_order,
+    purchase_order_item: purchase_order_item,
+    purchase_order_down_payment: purchase_order_down_payment,
+    purchase_order_down_payment_refund: purchase_order_down_payment_refund,
+    stock_transfer: stock_transfer,
+    stock_transfer_item: stock_transfer_item,
+    stock_transfer_item_serial: stock_transfer_item_serial,
+    error: error,
+  },
+};
diff --git a/web/src/lang/messages.id.ts b/web/src/lang/messages.id.ts
index ac94706ab..f68ff0935 100644
--- a/web/src/lang/messages.id.ts
+++ b/web/src/lang/messages.id.ts
@@ -1,50 +1,166 @@
-import menu from "./id/components/menu.json";
-import buttons from "./id/components/buttons.json";
-import alert_placeholder from "./id/components/alert-placeholder.json";
-import dropdown from "./id/components/dropdown.json";
-import profile_menu from "./id/components/profile-menu.json";
-import language_switcher from "./id/components/language-switcher.json";
-import search_box from "./id/components/search-box.json";
-import sidebar_pop from "./id/components/sidebar-pop.json";
-import data_list from "./id/components/data-list.json";
-import user_location from "./id/components/user-location.json";
-import delete_modal from "./id/components/delete-modal.json";
-import file_upload from "./id/components/file-upload.json";
-
-import login from "./id/views/login.json";
-import register from "./id/views/register.json";
-import forgot_password from "./en/views/forgot_password.json";
-import reset_password from "./en/views/reset_password.json";
-import profile from "./id/views/profile.json";
-import user from "./id/views/user.json";
-import company from "./id/views/company.json"
-import branch from "./id/views/branch.json"
-import error from "./id/views/error.json"
-
-export default {
-    "components": {
-        "menu": menu,
-        "alert-placeholder": alert_placeholder,
-        "buttons": buttons,
-        "dropdown": dropdown,
-        "data-list": data_list,
-        "user-location": user_location,
-        "delete-modal": delete_modal,
-        "file-upload": file_upload,
-        "profile-menu": profile_menu,
-        "language-switcher": language_switcher,
-        "search-box": search_box,
-        "sidebar-pop": sidebar_pop
-    },
-    "views": {
-        "login": login,
-        "register": register,
-        "forgot_password": forgot_password,
-        "reset_password": reset_password,
-        "profile": profile,
-        "user": user,
-        "company": company,
-        "branch": branch,
-        "error": error,
-    }
-}
\ No newline at end of file
+import menu from './id/components/menu.json';
+import buttons from './id/components/buttons.json';
+import alert_placeholder from './id/components/alert-placeholder.json';
+import dropdown from './id/components/dropdown.json';
+import profile_menu from './id/components/profile-menu.json';
+import language_switcher from './id/components/language-switcher.json';
+import search_box from './id/components/search-box.json';
+import sidebar_pop from './id/components/sidebar-pop.json';
+import data_list from './id/components/data-list.json';
+import user_location from './id/components/user-location.json';
+import delete_modal from './id/components/delete-modal.json';
+import file_upload from './id/components/file-upload.json';
+
+import login from './id/views/login.json';
+import register from './id/views/register.json';
+import forgot_password from './id/views/forgot_password.json';
+import reset_password from './id/views/reset_password.json';
+import profile from './id/views/profile.json';
+import user from './id/views/user.json';
+import company from './id/views/company.json';
+import branch from './id/views/branch.json';
+import warehouse from './id/views/warehouse.json';
+import product_category from './id/views/product_category.json';
+import brand from './id/views/brand.json';
+import unit from './id/views/unit.json';
+import vat_profile from './id/views/vat_profile.json';
+import customer_group from './id/views/customer_group.json';
+import customer from './id/views/customer.json';
+import investor from './id/views/investor.json';
+import cash_account from './id/views/cash_account.json';
+import capital_opening from './id/views/capital_opening.json';
+import capital_transaction from './id/views/capital_transaction.json';
+import cash_transfer from './id/views/cash_transfer.json';
+import expense from './id/views/expense.json';
+import prepaid_expense from './id/views/prepaid_expense.json';
+import expense_payment from './id/views/expense_payment.json';
+import debt from './id/views/debt.json';
+import receivable from './id/views/receivable.json';
+import income from './id/views/income.json';
+import prepaid_income from './id/views/prepaid_income.json';
+import income_payment from './id/views/income_payment.json';
+import purchase_additional_cost from './id/views/purchase_additional_cost.json';
+import purchase_additional_cost_payment from './id/views/purchase_additional_cost_payment.json';
+import purchase from './id/views/purchase.json';
+import purchase_receipt from './id/views/purchase_receipt.json';
+import expense_category from './id/views/expense_category.json';
+import debt_category from './id/views/debt_category.json';
+import asset_category from './id/views/asset_category.json';
+import asset_unit from './id/views/asset_unit.json';
+import asset from './id/views/asset.json';
+import asset_adjustment from './id/views/asset_adjustment.json';
+import asset_adjustment_in_item from './id/views/asset_adjustment_in_item.json';
+import asset_adjustment_out_item from './id/views/asset_adjustment_out_item.json';
+import asset_purchase from './id/views/asset_purchase.json';
+import asset_purchase_item from './id/views/asset_purchase_item.json';
+import asset_sale from './id/views/asset_sale.json';
+import asset_sale_item from './id/views/asset_sale_item.json';
+import receivable_category from './id/views/receivable_category.json';
+import debt_creditor from './id/views/debt_creditor.json';
+import income_category from './id/views/income_category.json';
+import chart_of_account from './id/views/chart_of_account.json';
+import journal_entry from './id/views/journal_entry.json';
+import balance_sheet from './id/views/balance_sheet.json';
+import product_service from './id/views/product_service.json';
+import product from './id/views/product.json';
+import supplier from './id/views/supplier.json';
+import stock_adjustment_category from './id/views/stock_adjustment_category.json';
+import stock_adjustment from './id/views/stock_adjustment.json';
+import stock_adjustment_in_item from './id/views/stock_adjustment_in_item.json';
+import stock_adjustment_in_item_serial from './id/views/stock_adjustment_in_item_serial.json';
+import stock_adjustment_out_item from './id/views/stock_adjustment_out_item.json';
+import stock_adjustment_out_item_serial from './id/views/stock_adjustment_out_item_serial.json';
+import purchase_order from './id/views/purchase_order.json';
+import purchase_order_item from './id/views/purchase_order_item.json';
+import purchase_order_down_payment from './id/views/purchase_order_down_payment.json';
+import purchase_order_down_payment_refund from './id/views/purchase_order_down_payment_refund.json';
+import stock_transfer from './id/views/stock_transfer.json';
+import stock_transfer_item from './id/views/stock_transfer_item.json';
+import stock_transfer_item_serial from './id/views/stock_transfer_item_serial.json';
+import error from './id/views/error.json';
+
+export default {
+  components: {
+    menu: menu,
+    'alert-placeholder': alert_placeholder,
+    buttons: buttons,
+    dropdown: dropdown,
+    'data-list': data_list,
+    'user-location': user_location,
+    'delete-modal': delete_modal,
+    'file-upload': file_upload,
+    'profile-menu': profile_menu,
+    'language-switcher': language_switcher,
+    'search-box': search_box,
+    'sidebar-pop': sidebar_pop,
+  },
+  views: {
+    login: login,
+    register: register,
+    forgot_password: forgot_password,
+    reset_password: reset_password,
+    profile: profile,
+    user: user,
+    company: company,
+    branch: branch,
+    warehouse: warehouse,
+    product_category: product_category,
+    brand: brand,
+    unit: unit,
+    vat_profile: vat_profile,
+    product_service: product_service,
+    product: product,
+    supplier: supplier,
+    customer_group: customer_group,
+    customer: customer,
+    investor: investor,
+    cash_account: cash_account,
+    capital_opening: capital_opening,
+    capital_transaction: capital_transaction,
+    cash_transfer: cash_transfer,
+    expense: expense,
+    prepaid_expense: prepaid_expense,
+    expense_payment: expense_payment,
+    debt: debt,
+    receivable: receivable,
+    income: income,
+    prepaid_income: prepaid_income,
+    income_payment: income_payment,
+    purchase_additional_cost: purchase_additional_cost,
+    purchase_additional_cost_payment: purchase_additional_cost_payment,
+    purchase: purchase,
+    purchase_receipt: purchase_receipt,
+    expense_category: expense_category,
+    debt_category: debt_category,
+    asset_category: asset_category,
+    asset_unit: asset_unit,
+    asset: asset,
+    asset_adjustment: asset_adjustment,
+    asset_adjustment_in_item: asset_adjustment_in_item,
+    asset_adjustment_out_item: asset_adjustment_out_item,
+    asset_purchase: asset_purchase,
+    asset_purchase_item: asset_purchase_item,
+    asset_sale: asset_sale,
+    asset_sale_item: asset_sale_item,
+    receivable_category: receivable_category,
+    debt_creditor: debt_creditor,
+    income_category: income_category,
+    chart_of_account: chart_of_account,
+    journal_entry: journal_entry,
+    balance_sheet: balance_sheet,
+    stock_adjustment_category: stock_adjustment_category,
+    stock_adjustment: stock_adjustment,
+    stock_adjustment_in_item: stock_adjustment_in_item,
+    stock_adjustment_in_item_serial: stock_adjustment_in_item_serial,
+    stock_adjustment_out_item: stock_adjustment_out_item,
+    stock_adjustment_out_item_serial: stock_adjustment_out_item_serial,
+    purchase_order: purchase_order,
+    purchase_order_item: purchase_order_item,
+    purchase_order_down_payment: purchase_order_down_payment,
+    purchase_order_down_payment_refund: purchase_order_down_payment_refund,
+    stock_transfer: stock_transfer,
+    stock_transfer_item: stock_transfer_item,
+    stock_transfer_item_serial: stock_transfer_item_serial,
+    error: error,
+  },
+};
diff --git a/web/src/main.ts b/web/src/main.ts
index fc1b80a65..29a0e54d5 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,9 +1,9 @@
-import { createApp } from "vue";
-import { createPinia } from "pinia";
-import App from "./App.vue";
-import router from "./router";
-import "./assets/css/app.css";
-import i18n from "./lang";
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import router from './router';
+import './assets/css/app.css';
+import i18n from './lang';
 
 const app = createApp(App);
 
@@ -11,4 +11,4 @@ app.use(createPinia());
 app.use(router);
 app.use(i18n);
 
-app.mount("#app");
+app.mount('#app');
diff --git a/web/src/pages/administrator/UserCreate.vue b/web/src/pages/administrator/UserCreate.vue
index c6918aeee..311f63066 100644
--- a/web/src/pages/administrator/UserCreate.vue
+++ b/web/src/pages/administrator/UserCreate.vue
@@ -1,341 +1,396 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { ServiceResponse } from "@/types/services/ServiceResponse";
-import { Resource } from "@/types/resources/Resource";
-import { Role } from "@/types/models/Role";
-import UserService from "@/services/UserService";
-import RoleService from "@/services/RoleService";
-import DashboardService from "@/services/DashboardService";
-import CacheService from "@/services/CacheService";
-import { DropDownOption } from "@/types/models/DropDownOption";
-import { TwoColumnsLayout } from "@/components/Base/Form/FormLayout";
-import {
-    FormInput,
-    FormLabel,
-    FormTextarea,
-    FormSelect,
-    FormFileUpload,
-    FormErrorMessages
-} from "@/components/Base/Form";
-import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
-import { CardState } from "@/types/enums/CardState";
-import Button from "@/components/Base/Button";
-import { ViewMode } from "@/types/enums/ViewMode";
-import { debounce } from "lodash";
-import Lucide from "@/components/Base/Lucide";
-import { useRouter } from "vue-router";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-
-const userServices = new UserService();
-const roleServices = new RoleService();
-const dashboardServices = new DashboardService();
-const cacheServices = new CacheService();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder']);
-// #endregion
-
-// #region Refs
-const cards = ref<Array<TwoColumnsLayoutCards>>([
-    { title: 'views.user.field_groups.user_info', state: CardState.Expanded, },
-    { title: 'views.user.field_groups.user_profile', state: CardState.Expanded },
-    { title: 'views.user.field_groups.roles', state: CardState.Expanded },
-    { title: 'views.user.field_groups.settings', state: CardState.Expanded },
-    { title: '', state: CardState.Hidden, id: 'button' }
-]);
-
-const rolesDDL = ref<Array<Role> | null>(null);
-const statusDDL = ref<Array<DropDownOption> | null>(null);
-const countriesDDL = ref<Array<DropDownOption> | null>(null);
-
-const userForm = userServices.useUserCreateForm();
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-    emits('mode-state', ViewMode.FORM_CREATE);
-    getDDL();
-
-    loadFromCache();
-});
-// #endregion
-
-// #region Methods
-const loadFromCache = () => {
-    let data = cacheServices.getLastEntity('USER_CREATE') as Record<string, unknown>;
-    if (!data) return;
-    userForm.setData(data);
-};
-
-const getDDL = (): void => {
-    roleServices.readAny().then((result: ServiceResponse<Resource<Array<Role>> | null>) => {
-        if (result.success && result.data) {
-            rolesDDL.value = result.data.data as Array<Role>;
-        }
-    });
-
-    dashboardServices.getCountriesDDL().then((result: Array<DropDownOption> | null) => {
-        countriesDDL.value = result;
-    });
-
-    dashboardServices.getStatusDDL().then((result: Array<DropDownOption> | null) => {
-        statusDDL.value = result;
-    });
-};
-
-const handleExpandCard = (index: number) => {
-    if (cards.value[index].state === CardState.Collapsed) {
-        cards.value[index].state = CardState.Expanded
-    } else if (cards.value[index].state === CardState.Expanded) {
-        cards.value[index].state = CardState.Collapsed
-    }
-};
-
-const scrollToError = (id: string): void => {
-    let el = document.getElementById(id);
-
-    if (!el) return;
-
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-};
-
-const onSubmit = async () => {
-    if (userForm.hasErrors) {
-        scrollToError(Object.keys(userForm.errors)[0]);
-    }
-
-    emits('loading-state', true);
-    await userForm.submit().then(() => {
-        resetForm();
-        router.push({ name: 'side-menu-administrator-user-list' });
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        emits('loading-state', false);
-    });
-};
-
-const resetForm = () => {
-    userForm.reset();
-    userForm.setErrors({});
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-
-const convertErrorTypeToAlertListType = (error: Error) => {
-    const record: Record<string, Array<string>> = {};
-
-    record.error = [error.message];
-
-    return record;
-};
-// #endregion
-
-// #region Watchers
-watch(
-    userForm,
-    debounce((newValue): void => {
-        cacheServices.setLastEntity('USER_CREATE', newValue.data())
-    }, 500),
-    { deep: true }
-);
-// #endregion
-</script>
-
-<template>
-    <form id="userForm" @submit.prevent="onSubmit">
-        <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
-            <template #card-items-0>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('name') }">
-                            {{ t('views.user.fields.name') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.name" type="text"
-                            :class="{ 'border-danger': userForm.invalid('name') }"
-                            :placeholder="t('views.user.fields.name')" @change="userForm.validate('name')" />
-                        <FormErrorMessages :messages="userForm.errors.name" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('email') }">
-                            {{ t('views.user.fields.email') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.email" type="text"
-                            :class="{ 'border-danger': userForm.invalid('email') }"
-                            :placeholder="t('views.user.fields.email')" @change="userForm.validate('email')" />
-                        <FormErrorMessages :messages="userForm.errors.email" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-1>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel>{{ t('views.user.fields.first_name') }}</FormLabel>
-                        <FormInput v-model="userForm.first_name" type="text"
-                            :placeholder="t('views.user.fields.name')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>{{ t('views.user.fields.last_name') }}</FormLabel>
-                        <FormInput v-model="userForm.last_name" type="text"
-                            :placeholder="t('views.user.fields.last_name')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel class="form-label">{{ t('views.user.fields.address') }}</FormLabel>
-                        <FormInput v-model="userForm.address" type="text"
-                            :placeholder="t('views.user.fields.address')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>{{ t('views.user.fields.city') }}</FormLabel>
-                        <FormInput v-model="userForm.city" type="text" class="form-control"
-                            :placeholder="t('views.user.fields.city')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>{{ t('views.user.fields.postal_code') }}</FormLabel>
-                        <FormInput v-model="userForm.postal_code" type="text"
-                            :placeholder="t('views.user.fields.postal_code')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('country') }">
-                            {{ t('views.user.fields.country') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.country" 
-                            :class="{ 'border-danger': userForm.invalid('country') }"
-                            :placeholder="t('views.user.fields.country')" @change="userForm.validate('country')">
-                            <option value="">{{ t('components.dropdown.placeholder') }}</option>
-                            <option v-for="c in countriesDDL" :key="c.name" :value="c.name">{{ c.name }}</option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="userForm.errors.country" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': false }">
-                            {{ t('views.user.fields.picture') }}
-                        </FormLabel>
-                        <FormFileUpload v-model="userForm.img_path"
-                            :class="{ 'border-danger': false }" :placeholder="t('views.user.fields.picture')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('tax_id') }">
-                            {{ t('views.user.fields.tax_id') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.tax_id" type="text"
-                            :class="{ 'border-danger': userForm.invalid('tax_id') }"
-                            @change="userForm.validate('tax_id')" />
-                        <FormErrorMessages :messages="userForm.errors.tax_id" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('ic_num') }">
-                            {{ t('views.user.fields.ic_num') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.ic_num" type="text"
-                            :class="{ 'border-danger': false }" @change="userForm.validate('ic_num')" />
-                        <FormErrorMessages :messages="userForm.errors.ic_num" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('status') }">
-                            {{ t('views.user.fields.status') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.status" :class="{ 'border-danger': false }"
-                            @change="userForm.validate('status')">
-                            <option value="">{{ t('components.dropdown.placeholder') }}</option>
-                            <option v-for="c in statusDDL" :key="c.code" :value="c.code">{{ t(c.name) }}</option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="userForm.errors.status" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': false }">
-                            {{ t('views.user.fields.remarks') }}
-                        </FormLabel>
-                        <FormTextarea v-model="userForm.remarks" type="text"
-                            :placeholder="t('views.user.fields.remarks')" rows="3" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-2>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('roles') }">
-                            {{ t('views.user.fields.roles') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.roles" multiple size="6"
-                            :class="{ 'border-danger': userForm.invalid('roles') }" @change="userForm.validate('roles')">
-                            <option v-for="r in rolesDDL" :key="r.id" :value="r">
-                                {{ r.display_name }}
-                            </option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="userForm.errors.roles" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-3>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.settings.theme') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.theme">
-                            <option value="side-menu-light-full">Menu Light</option>
-                            <option value="side-menu-light-mini">Mini Menu Light</option>
-                            <option value="side-menu-dark-full">Menu Dark</option>
-                            <option value="side-menu-dark-mini">Mini Menu Dark</option>
-                        </FormSelect>
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.settings.date_format') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.date_format">
-                            <option value="yyyy_MM_dd">{{ 'YYYY-MM-DD' }}</option>
-                            <option value="dd_MMM_yyyy">{{ 'DD-MMM-YYYY' }}</option>
-                        </FormSelect>
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.settings.time_format') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.time_format">
-                            <option value="hh_mm_ss">{{ 'HH:mm:ss' }}</option>
-                            <option value="h_m_A">{{ 'H:m A' }}</option>
-                        </FormSelect>
-                    </div>
-                </div>
-            </template>
-            <template #card-items-button>
-                <div class="flex gap-4">
-                    <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
-                        :disabled="userForm.validating || userForm.hasErrors">
-                        <Lucide v-if="userForm.validating" icon="Loader" class="animate-spin" />
-                        <template v-else>
-                            {{ t("components.buttons.submit") }}
-                        </template>
-                    </Button>
-                    <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
-                        {{ t("components.buttons.reset") }}
-                    </Button>
-                </div>
-            </template>
-        </TwoColumnsLayout>
-    </form>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { isAxiosError, AxiosError } from 'axios';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Resource } from '@/types/resources/Resource';
+  import { Role } from '@/types/models/Role';
+  import UserService from '@/services/UserService';
+  import RoleService from '@/services/RoleService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormFileUpload,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useRouter } from 'vue-router';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userServices = new UserService();
+  const roleServices = new RoleService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    { title: 'views.user.field_groups.user_info', state: CardState.Expanded },
+    {
+      title: 'views.user.field_groups.user_profile',
+      state: CardState.Expanded,
+    },
+    { title: 'views.user.field_groups.roles', state: CardState.Expanded },
+    { title: 'views.user.field_groups.settings', state: CardState.Expanded },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const rolesDDL = ref<Array<Role> | null>(null);
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+  const countriesDDL = ref<Array<DropDownOption> | null>(null);
+
+  const userForm = userServices.useUserCreateForm();
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    getDDL();
+
+    loadFromCache();
+  });
+  // #endregion
+
+  // #region Methods
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('USER_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    userForm.setData(data);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    try {
+      const [roleResult, countriesResult, statusResult] = await Promise.all([
+        roleServices.readAny(),
+        dashboardServices.getCountriesDDL(),
+        dashboardServices.getStatusDDL(),
+      ]);
+
+      if (roleResult.success && roleResult.data) {
+        rolesDDL.value = roleResult.data.data as Array<Role>;
+      }
+
+      countriesDDL.value = countriesResult;
+      statusDDL.value = statusResult;
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (userForm.hasErrors) {
+      scrollToError(Object.keys(userForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await userForm
+      .submit()
+      .then(() => {
+        resetForm();
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-administrator-user-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    userForm.reset();
+    userForm.setErrors({});
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #region Watchers
+  watch(
+    userForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('USER_CREATE', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="userForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('name') }">
+              {{ t('views.user.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="userForm.name"
+              type="text"
+              :class="{ 'border-danger': userForm.invalid('name') }"
+              :placeholder="t('views.user.fields.name')"
+              @change="userForm.validate('name')"
+            />
+            <FormErrorMessages :messages="userForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('email') }">
+              {{ t('views.user.fields.email') }}
+            </FormLabel>
+            <FormInput
+              v-model="userForm.email"
+              type="text"
+              :class="{ 'border-danger': userForm.invalid('email') }"
+              :placeholder="t('views.user.fields.email')"
+              @change="userForm.validate('email')"
+            />
+            <FormErrorMessages :messages="userForm.errors.email" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel>{{ t('views.user.fields.first_name') }}</FormLabel>
+            <FormInput v-model="userForm.first_name" type="text" :placeholder="t('views.user.fields.name')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>{{ t('views.user.fields.last_name') }}</FormLabel>
+            <FormInput v-model="userForm.last_name" type="text" :placeholder="t('views.user.fields.last_name')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel class="form-label">
+              {{ t('views.user.fields.address') }}
+            </FormLabel>
+            <FormInput v-model="userForm.address" type="text" :placeholder="t('views.user.fields.address')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>{{ t('views.user.fields.city') }}</FormLabel>
+            <FormInput
+              v-model="userForm.city"
+              type="text"
+              class="form-control"
+              :placeholder="t('views.user.fields.city')"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel>{{ t('views.user.fields.postal_code') }}</FormLabel>
+            <FormInput v-model="userForm.postal_code" type="text" :placeholder="t('views.user.fields.postal_code')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('country') }">
+              {{ t('views.user.fields.country') }}
+            </FormLabel>
+            <FormSelect
+              v-model="userForm.country"
+              :class="{ 'border-danger': userForm.invalid('country') }"
+              :placeholder="t('views.user.fields.country')"
+              @change="userForm.validate('country')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in countriesDDL" :key="c.name" :value="c.name">
+                {{ c.name }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="userForm.errors.country" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': false }">
+              {{ t('views.user.fields.picture') }}
+            </FormLabel>
+            <FormFileUpload
+              v-model="userForm.img_path"
+              :class="{ 'border-danger': false }"
+              :placeholder="t('views.user.fields.picture')"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('tax_id') }">
+              {{ t('views.user.fields.tax_id') }}
+            </FormLabel>
+            <FormInput
+              v-model="userForm.tax_id"
+              type="text"
+              :class="{ 'border-danger': userForm.invalid('tax_id') }"
+              @change="userForm.validate('tax_id')"
+            />
+            <FormErrorMessages :messages="userForm.errors.tax_id" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('ic_num') }">
+              {{ t('views.user.fields.ic_num') }}
+            </FormLabel>
+            <FormInput
+              v-model="userForm.ic_num"
+              type="text"
+              :class="{ 'border-danger': false }"
+              @change="userForm.validate('ic_num')"
+            />
+            <FormErrorMessages :messages="userForm.errors.ic_num" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('status') }">
+              {{ t('views.user.fields.status') }}
+            </FormLabel>
+            <FormSelect
+              v-model="userForm.status"
+              :class="{ 'border-danger': false }"
+              @change="userForm.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="userForm.errors.status" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': false }">
+              {{ t('views.user.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="userForm.remarks"
+              type="text"
+              :placeholder="t('views.user.fields.remarks')"
+              rows="3"
+            />
+          </div>
+        </div>
+      </template>
+      <template #card-items-2>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('roles') }">
+              {{ t('views.user.fields.roles') }}
+            </FormLabel>
+            <FormSelect
+              v-model="userForm.roles"
+              multiple
+              size="6"
+              :class="{ 'border-danger': userForm.invalid('roles') }"
+              @change="userForm.validate('roles')"
+            >
+              <option v-for="r in rolesDDL" :key="r.id" :value="r">
+                {{ r.display_name }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="userForm.errors.roles" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-3>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.settings.theme') }}
+            </FormLabel>
+            <FormSelect v-model="userForm.theme">
+              <option value="side-menu-light-full">Menu Light</option>
+              <option value="side-menu-light-mini">Mini Menu Light</option>
+              <option value="side-menu-dark-full">Menu Dark</option>
+              <option value="side-menu-dark-mini">Mini Menu Dark</option>
+            </FormSelect>
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.settings.date_format') }}
+            </FormLabel>
+            <FormSelect v-model="userForm.date_format">
+              <option value="yyyy_MM_dd">{{ 'YYYY-MM-DD' }}</option>
+              <option value="dd_MMM_yyyy">{{ 'DD-MMM-YYYY' }}</option>
+            </FormSelect>
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.settings.time_format') }}
+            </FormLabel>
+            <FormSelect v-model="userForm.time_format">
+              <option value="hh_mm_ss">{{ 'HH:mm:ss' }}</option>
+              <option value="h_m_A">{{ 'H:m A' }}</option>
+            </FormSelect>
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="userForm.validating || userForm.hasErrors"
+          >
+            <Lucide v-if="userForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/administrator/UserEdit.vue b/web/src/pages/administrator/UserEdit.vue
index 80585b994..0b4e70dab 100644
--- a/web/src/pages/administrator/UserEdit.vue
+++ b/web/src/pages/administrator/UserEdit.vue
@@ -1,421 +1,479 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { useRoute, useRouter } from "vue-router";
-import { Role } from "@/types/models/Role";
-import UserService from "@/services/UserService";
-import RoleService from "@/services/RoleService";
-import DashboardService from "@/services/DashboardService";
-import CacheService from "@/services/CacheService";
-import { TwoColumnsLayout } from "@/components/Base/Form/FormLayout";
-import {
-    FormInput,
-    FormLabel,
-    FormTextarea,
-    FormSelect,
-    FormSwitch,
-    FormFileUpload,
-    FormErrorMessages,
-} from "@/components/Base/Form";
-import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
-import { CardState } from "@/types/enums/CardState";
-import { DropDownOption } from "@/types/models/DropDownOption";
-import { ServiceResponse } from "@/types/services/ServiceResponse";
-import { Resource } from "@/types/resources/Resource";
-import { ViewMode } from "@/types/enums/ViewMode";
-import { User } from "@/types/models/User";
-import Button from "@/components/Base/Button";
-import { debounce } from "lodash";
-import Lucide from "@/components/Base/Lucide";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-const route = useRoute();
-const userServices = new UserService();
-const roleServices = new RoleService();
-const dashboardServices = new DashboardService();
-const cacheServices = new CacheService();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder']);
-// #endregion
-
-// #region Refs
-const cards = ref<Array<TwoColumnsLayoutCards>>([
-    { title: 'views.user.field_groups.user_info', state: CardState.Expanded, },
-    { title: 'views.user.field_groups.user_profile', state: CardState.Expanded },
-    { title: 'views.user.field_groups.roles', state: CardState.Expanded },
-    { title: 'views.user.field_groups.settings', state: CardState.Expanded },
-    { title: 'views.user.field_groups.tokens_management', state: CardState.Expanded },
-    { title: 'views.user.field_groups.password_management', state: CardState.Expanded },
-    { title: 'views.user.field_groups.two_factor_auth', state: CardState.Expanded },
-    { title: '', state: CardState.Hidden, id: 'button' }
-]);
-
-const rolesDDL = ref<Array<Role> | null>(null);
-const statusDDL = ref<Array<DropDownOption> | null>(null);
-const countriesDDL = ref<Array<DropDownOption> | null>(null);
-
-const userForm = userServices.useUserEditForm(route.params.ulid as string);
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-    emits('mode-state', ViewMode.FORM_EDIT);
-    getDDL();
-
-    await loadData(route.params.ulid as string);
-});
-// #endregion
-
-// #region Methods
-const loadData = async (ulid: string) => {
-    emits('loading-state', true);
-    let response: ServiceResponse<User | null> = await userServices.read(ulid);
-
-    if (response && response.data) {
-        let rolesArr: Array<Role> = [];
-        response.data.roles.forEach((r) => {
-            rolesArr.push({
-                id: r.id,
-                display_name: r.display_name
-            });
-        });
-
-        userForm.setData({
-            name: response.data.name,
-            email: response.data.email,
-
-            first_name: response.data.profile.first_name,
-            last_name: response.data.profile.last_name,
-            address: response.data.profile.address,
-            city: response.data.profile.city,
-            postal_code: response.data.profile.postal_code,
-            country: response.data.profile.country,
-            img_path: response.data.profile.img_path,
-            tax_id: response.data.profile.tax_id,
-            ic_num: response.data.profile.ic_num,
-            status: response.data.profile.status,
-            remarks: response.data.profile.remarks,
-
-            roles: rolesArr,
-
-            theme: response.data.settings.theme,
-            date_format: response.data.settings.date_format,
-            time_format: response.data.settings.time_format,
-
-            tokens_reset: false,
-            reset_password: false,
-            reset_2fa: false,
-        });
-    }
-    emits('loading-state', false);
-};
-
-const getDDL = (): void => {
-    roleServices.readAny().then((result: ServiceResponse<Resource<Array<Role>> | null>) => {
-        if (result.success && result.data) {
-            rolesDDL.value = result.data.data as Array<Role>;
-        }
-    });
-
-    dashboardServices.getCountriesDDL().then((result: Array<DropDownOption> | null) => {
-        countriesDDL.value = result;
-    });
-
-    dashboardServices.getStatusDDL().then((result: Array<DropDownOption> | null) => {
-        statusDDL.value = result;
-    });
-};
-
-const handleExpandCard = (index: number) => {
-    if (cards.value[index].state === CardState.Collapsed) {
-        cards.value[index].state = CardState.Expanded
-    } else if (cards.value[index].state === CardState.Expanded) {
-        cards.value[index].state = CardState.Collapsed
-    }
-};
-
-const scrollToError = (id: string): void => {
-    let el = document.getElementById(id);
-
-    if (!el) return;
-
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-};
-
-const onSubmit = async () => {
-    if (userForm.hasErrors) {
-        scrollToError(Object.keys(userForm.errors)[0]);
-    }
-
-    emits('loading-state', true);
-    await userForm.submit().then(() => {
-        resetForm();
-        router.push({ name: 'side-menu-administrator-user-list' });
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        emits('loading-state', false);
-    });
-};
-
-const resetForm = async () => {
-    userForm.reset();
-    userForm.setErrors({});
-    await loadData(route.params.ulid as string);
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-
-const convertErrorTypeToAlertListType = (error: Error) => {
-    const record: Record<string, Array<string>> = {};
-
-    record.error = [error.message];
-
-    return record;
-};
-// #endregion
-
-// #region Watchers
-watch(
-    userForm,
-    debounce((newValue): void => {
-        cacheServices.setLastEntity('USER_EDIT', newValue.data())
-    }, 500),
-    { deep: true }
-);
-// #endregion
-</script>
-
-<template>
-    <form id="userForm" @submit.prevent="onSubmit">
-        <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
-            <template #card-items-0>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('name') }">
-                            {{ t('views.user.fields.name') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.name" type="text"
-                            :class="{ 'border-danger': userForm.invalid('name') }"
-                            :placeholder="t('views.user.fields.name')" @change="userForm.validate('name')" />
-                        <FormErrorMessages :messages="userForm.errors.name" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.email') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.email" type="text" disabled />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-1>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel>{{ t('views.user.fields.first_name') }}</FormLabel>
-                        <FormInput v-model="userForm.first_name" type="text"
-                            :class="{ 'border-danger': false }" :placeholder="t('views.user.fields.name')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>{{ t('views.user.fields.last_name') }}</FormLabel>
-                        <FormInput v-model="userForm.last_name" type="text"
-                            :placeholder="t('views.user.fields.last_name')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel class="form-label">{{ t('views.user.fields.address') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.address" type="text"
-                            :placeholder="t('views.user.fields.address')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>{{ t('views.user.fields.city') }}</FormLabel>
-                        <FormInput v-model="userForm.city" type="text" class="form-control"
-                            :placeholder="t('views.user.fields.city')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>{{ t('views.user.fields.postal_code') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.postal_code" type="text"
-                            :placeholder="t('views.user.fields.postal_code')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('country') }">
-                            {{ t('views.user.fields.country') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.country"
-                            :class="{ 'border-danger': userForm.invalid('country') }"
-                            :placeholder="t('views.user.fields.country')" @change="userForm.validate('country')">
-                            <option value="">{{ t('components.dropdown.placeholder') }}</option>
-                            <option v-for="c in countriesDDL" :key="c.name" :value="c.name">{{ c.name }}</option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="userForm.errors.country" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': false }">
-                            {{ t('views.user.fields.picture') }}
-                        </FormLabel>
-                        <FormFileUpload v-model="userForm.img_path"
-                            :class="{ 'border-danger': false }" :placeholder="t('views.user.fields.picture')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('tax_id') }">
-                            {{ t('views.user.fields.tax_id') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.tax_id" type="text"
-                            :class="{ 'border-danger': userForm.invalid('tax_id') }"
-                            @change="userForm.validate('tax_id')" />
-                        <FormErrorMessages :messages="userForm.errors.tax_id" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('ic_num') }">
-                            {{ t('views.user.fields.ic_num') }}
-                        </FormLabel>
-                        <FormInput v-model="userForm.ic_num" type="text"
-                            :class="{ 'border-danger': userForm.invalid('ic_num') }"
-                            @change="userForm.validate('ic_num')" />
-                        <FormErrorMessages :messages="userForm.errors.ic_num" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('status') }">
-                            {{ t('views.user.fields.status') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.status"
-                            :class="{ 'border-danger': userForm.invalid('status') }" @change="userForm.validate('status')">
-                            <option value="">{{ t('components.dropdown.placeholder') }}</option>
-                            <option v-for="c in statusDDL" :key="c.code" :value="c.code">{{ t(c.name) }}
-                            </option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="userForm.errors.status" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.remarks') }}
-                        </FormLabel>
-                        <FormTextarea v-model="userForm.remarks" type="text"
-                            :placeholder="t('views.user.fields.remarks')" rows="3" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-2>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': userForm.invalid('roles') }">
-                            {{ t('views.user.fields.roles') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.roles" multiple size="6"
-                            :class="{ 'border-danger': userForm.invalid('roles') }" @change="userForm.validate('roles')">
-                            <option v-for="r in rolesDDL" :key="r.id" :value="r">
-                                {{ r.display_name }}
-                            </option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="userForm.errors.roles" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-3>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.settings.theme') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.theme">
-                            <option value="side-menu-light-full">Menu Light</option>
-                            <option value="side-menu-light-mini">Mini Menu Light</option>
-                            <option value="side-menu-dark-full">Menu Dark</option>
-                            <option value="side-menu-dark-mini">Mini Menu Dark</option>
-                        </FormSelect>
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.settings.date_format') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.date_format">
-                            <option value="yyyy_MM_dd">{{ 'YYYY-MM-DD' }}</option>
-                            <option value="dd_MMM_yyyy">{{ 'DD-MMM-YYYY' }}</option>
-                        </FormSelect>
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.settings.time_format') }}
-                        </FormLabel>
-                        <FormSelect v-model="userForm.time_format">
-                            <option value="hh_mm_ss">{{ 'HH:mm:ss' }}</option>
-                            <option value="h_m_A">{{ 'H:m A' }}</option>
-                        </FormSelect>
-                    </div>
-                </div>
-            </template>
-            <template #card-items-4>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.tokens.reset') }}
-                        </FormLabel>
-                        <FormSwitch>
-                            <FormSwitch.Input type="checkbox" v-model="userForm.tokens_reset" />
-                        </FormSwitch>
-                    </div>
-                </div>
-            </template>
-            <template #card-items-5>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.reset_password') }}
-                        </FormLabel>
-                        <FormSwitch>
-                            <FormSwitch.Input type="checkbox" v-model="userForm.reset_password" />
-                        </FormSwitch>
-                    </div>
-                </div>
-            </template>
-            <template #card-items-6>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.user.fields.reset_2fa') }}
-                        </FormLabel>
-                        <FormSwitch>
-                            <FormSwitch.Input type="checkbox" v-model="userForm.reset_2fa" />
-                        </FormSwitch>
-                    </div>
-                </div>
-            </template>
-            <template #card-items-button>
-                <div class="flex gap-4">
-                    <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
-                        :disabled="userForm.validating || userForm.hasErrors">
-                        <Lucide v-if="userForm.validating" icon="Loader" class="animate-spin" />
-                        <template v-else>
-                            {{ t("components.buttons.submit") }}
-                        </template>
-                    </Button>
-                    <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
-                        {{ t("components.buttons.reset") }}
-                    </Button>
-                </div>
-            </template>
-        </TwoColumnsLayout>
-    </form>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { Role } from '@/types/models/Role';
+  import UserService from '@/services/UserService';
+  import RoleService from '@/services/RoleService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormSwitch,
+    FormFileUpload,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Resource } from '@/types/resources/Resource';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { User } from '@/types/models/User';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const route = useRoute();
+  const userServices = new UserService();
+  const roleServices = new RoleService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    { title: 'views.user.field_groups.user_info', state: CardState.Expanded },
+    {
+      title: 'views.user.field_groups.user_profile',
+      state: CardState.Expanded,
+    },
+    { title: 'views.user.field_groups.roles', state: CardState.Expanded },
+    { title: 'views.user.field_groups.settings', state: CardState.Expanded },
+    {
+      title: 'views.user.field_groups.tokens_management',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.user.field_groups.password_management',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.user.field_groups.two_factor_auth',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const rolesDDL = ref<Array<Role> | null>(null);
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+  const countriesDDL = ref<Array<DropDownOption> | null>(null);
+
+  const userForm = userServices.useUserEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    await getDDL();
+
+    await loadData(route.params.ulid as string);
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    let response: ServiceResponse<User | null> = await userServices.read(ulid);
+
+    if (response && response.data) {
+      let rolesArr: Array<Role> = [];
+      response.data.roles.forEach((r) => {
+        rolesArr.push({
+          id: r.id,
+          display_name: r.display_name,
+        });
+      });
+
+      userForm.setData({
+        name: response.data.name,
+        email: response.data.email,
+
+        first_name: response.data.profile.first_name,
+        last_name: response.data.profile.last_name,
+        address: response.data.profile.address,
+        city: response.data.profile.city,
+        postal_code: response.data.profile.postal_code,
+        country: response.data.profile.country,
+        img_path: response.data.profile.img_path,
+        tax_id: response.data.profile.tax_id,
+        ic_num: response.data.profile.ic_num,
+        status: response.data.profile.status,
+        remarks: response.data.profile.remarks,
+
+        roles: rolesArr,
+
+        theme: response.data.settings.theme,
+        date_format: response.data.settings.date_format,
+        time_format: response.data.settings.time_format,
+
+        tokens_reset: false,
+        reset_password: false,
+        reset_2fa: false,
+      });
+    }
+    emits('loading-state', false);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    const [rolesResult, countriesResult, statusResult] = await Promise.all([
+      roleServices.readAny(),
+      dashboardServices.getCountriesDDL(),
+      dashboardServices.getStatusDDL(),
+    ]);
+
+    if (rolesResult.success && rolesResult.data) {
+      rolesDDL.value = rolesResult.data.data as Array<Role>;
+    }
+
+    countriesDDL.value = countriesResult;
+    statusDDL.value = statusResult;
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (userForm.hasErrors) {
+      scrollToError(Object.keys(userForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await userForm
+      .submit()
+      .then(() => {
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-administrator-user-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    userForm.reset();
+    userForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    userForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('USER_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="userForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('name') }">
+              {{ t('views.user.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="userForm.name"
+              type="text"
+              :class="{ 'border-danger': userForm.invalid('name') }"
+              :placeholder="t('views.user.fields.name')"
+              @change="userForm.validate('name')"
+            />
+            <FormErrorMessages :messages="userForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.email') }}
+            </FormLabel>
+            <FormInput v-model="userForm.email" type="text" disabled />
+          </div>
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel>{{ t('views.user.fields.first_name') }}</FormLabel>
+            <FormInput
+              v-model="userForm.first_name"
+              type="text"
+              :class="{ 'border-danger': false }"
+              :placeholder="t('views.user.fields.name')"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel>{{ t('views.user.fields.last_name') }}</FormLabel>
+            <FormInput v-model="userForm.last_name" type="text" :placeholder="t('views.user.fields.last_name')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel class="form-label">
+              {{ t('views.user.fields.address') }}
+            </FormLabel>
+            <FormInput v-model="userForm.address" type="text" :placeholder="t('views.user.fields.address')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>{{ t('views.user.fields.city') }}</FormLabel>
+            <FormInput
+              v-model="userForm.city"
+              type="text"
+              class="form-control"
+              :placeholder="t('views.user.fields.city')"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel>{{ t('views.user.fields.postal_code') }}</FormLabel>
+            <FormInput v-model="userForm.postal_code" type="text" :placeholder="t('views.user.fields.postal_code')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('country') }">
+              {{ t('views.user.fields.country') }}
+            </FormLabel>
+            <FormSelect
+              v-model="userForm.country"
+              :class="{ 'border-danger': userForm.invalid('country') }"
+              :placeholder="t('views.user.fields.country')"
+              @change="userForm.validate('country')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in countriesDDL" :key="c.name" :value="c.name">
+                {{ c.name }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="userForm.errors.country" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': false }">
+              {{ t('views.user.fields.picture') }}
+            </FormLabel>
+            <FormFileUpload
+              v-model="userForm.img_path"
+              :class="{ 'border-danger': false }"
+              :placeholder="t('views.user.fields.picture')"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('tax_id') }">
+              {{ t('views.user.fields.tax_id') }}
+            </FormLabel>
+            <FormInput
+              v-model="userForm.tax_id"
+              type="text"
+              :class="{ 'border-danger': userForm.invalid('tax_id') }"
+              @change="userForm.validate('tax_id')"
+            />
+            <FormErrorMessages :messages="userForm.errors.tax_id" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('ic_num') }">
+              {{ t('views.user.fields.ic_num') }}
+            </FormLabel>
+            <FormInput
+              v-model="userForm.ic_num"
+              type="text"
+              :class="{ 'border-danger': userForm.invalid('ic_num') }"
+              @change="userForm.validate('ic_num')"
+            />
+            <FormErrorMessages :messages="userForm.errors.ic_num" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('status') }">
+              {{ t('views.user.fields.status') }}
+            </FormLabel>
+            <FormSelect
+              v-model="userForm.status"
+              :class="{ 'border-danger': userForm.invalid('status') }"
+              @change="userForm.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="userForm.errors.status" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="userForm.remarks"
+              type="text"
+              :placeholder="t('views.user.fields.remarks')"
+              rows="3"
+            />
+          </div>
+        </div>
+      </template>
+      <template #card-items-2>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': userForm.invalid('roles') }">
+              {{ t('views.user.fields.roles') }}
+            </FormLabel>
+            <FormSelect
+              v-model="userForm.roles"
+              multiple
+              size="6"
+              :class="{ 'border-danger': userForm.invalid('roles') }"
+              @change="userForm.validate('roles')"
+            >
+              <option v-for="r in rolesDDL" :key="r.id" :value="r">
+                {{ r.display_name }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="userForm.errors.roles" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-3>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.settings.theme') }}
+            </FormLabel>
+            <FormSelect v-model="userForm.theme">
+              <option value="side-menu-light-full">Menu Light</option>
+              <option value="side-menu-light-mini">Mini Menu Light</option>
+              <option value="side-menu-dark-full">Menu Dark</option>
+              <option value="side-menu-dark-mini">Mini Menu Dark</option>
+            </FormSelect>
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.settings.date_format') }}
+            </FormLabel>
+            <FormSelect v-model="userForm.date_format">
+              <option value="yyyy_MM_dd">{{ 'YYYY-MM-DD' }}</option>
+              <option value="dd_MMM_yyyy">{{ 'DD-MMM-YYYY' }}</option>
+            </FormSelect>
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.settings.time_format') }}
+            </FormLabel>
+            <FormSelect v-model="userForm.time_format">
+              <option value="hh_mm_ss">{{ 'HH:mm:ss' }}</option>
+              <option value="h_m_A">{{ 'H:m A' }}</option>
+            </FormSelect>
+          </div>
+        </div>
+      </template>
+      <template #card-items-4>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.tokens.reset') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input type="checkbox" v-model="userForm.tokens_reset" />
+            </FormSwitch>
+          </div>
+        </div>
+      </template>
+      <template #card-items-5>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.reset_password') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input type="checkbox" v-model="userForm.reset_password" />
+            </FormSwitch>
+          </div>
+        </div>
+      </template>
+      <template #card-items-6>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.user.fields.reset_2fa') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input type="checkbox" v-model="userForm.reset_2fa" />
+            </FormSwitch>
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="userForm.validating || userForm.hasErrors"
+          >
+            <Lucide v-if="userForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/administrator/UserIndex.vue b/web/src/pages/administrator/UserIndex.vue
index d46a78632..cc2c17ac8 100644
--- a/web/src/pages/administrator/UserIndex.vue
+++ b/web/src/pages/administrator/UserIndex.vue
@@ -1,166 +1,176 @@
-<script setup lang="ts">
-// #region Imports
-import { ref, provide } from "vue";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { TitleLayout } from "@/components/Base/Form/FormLayout";
-import { useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-import Button from "@/components/Base/Button";
-import Lucide from "@/components/Base/Lucide";
-import { ViewMode } from "@/types/enums/ViewMode";
-import CacheService from "@/services/CacheService";
-import AlertPlaceholder from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-import Notification from "@/components/Base/Notification/Notification.vue";
-import { NotificationData } from "@/types/models/NotificationData";
-import { type NotificationElement } from "@/components/Base/Notification/Notification.vue";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-
-const cacheService = new CacheService();
-// #endregion
-
-// #region Props, Emits
-// #endregion
-
-// #region Refs
-const mode = ref<ViewMode>(ViewMode.INDEX);
-const loading = ref<boolean>(false);
-const titleView = ref<string>('views.user.page_title');
-
-const alertType = ref<'danger'|'success'|'warning'|'pending'|'dark'|'hidden'>('hidden');
-const title = ref<string>('');
-const alertList = ref<Record<string, Array<string>> | null>(null);
-
-const userNotification = ref<NotificationElement>();
-
-const notificationTitle = ref<string>('');
-const notificationContent = ref<string>('')
-// #endregion
-
-// #region Provide/Inject
-provide("bind[userNotification]", (el: NotificationElement) => {
-    userNotification.value = el;
-});
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-// #endregion
-
-// #region Methods
-const createNew = () => {
-    resetAlertPlaceholder();
-    mode.value = ViewMode.FORM_CREATE;
-    router.push({ name: 'side-menu-administrator-user-create' });
-};
-
-const backToList = async () => {
-    resetAlertPlaceholder();
-    clearCache(mode.value);
-    mode.value = ViewMode.LIST;
-    router.push({ name: 'side-menu-administrator-user-list' });
-};
-
-const onLoadingStateChanged = (state: boolean) => {
-    loading.value = state;
-};
-
-const onModeStateChanged = (state: ViewMode) => {
-    mode.value = state;
-
-    switch (state) {
-        case ViewMode.FORM_CREATE:
-            titleView.value = 'views.user.actions.create';
-            break;
-        case ViewMode.FORM_EDIT:
-            titleView.value = 'views.user.actions.edit';
-            break;
-        case ViewMode.INDEX:
-        case ViewMode.LIST:
-        default:
-            titleView.value = 'views.user.page_title';
-            break;
-    }
-};
-
-const clearCache = (mode: ViewMode) => {
-    switch (mode) {
-        case ViewMode.FORM_CREATE:
-            cacheService.removeLastEntity('USER_CREATE');
-            break;
-        case ViewMode.FORM_EDIT:
-            cacheService.removeLastEntity('USER_EDIT');
-            break;
-        default:
-            break;
-    }
-};
-
-const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
-    alertType.value = apProps.alertType;
-    title.value = apProps.title;
-    alertList.value = apProps.alertList;
-};
-
-const onShowNotificationTriggered = (notification: NotificationData) => {
-    notificationTitle.value = notification.title;
-    notificationContent.value = notification.content;
-
-    if (userNotification.value)
-        userNotification.value.showToast();
-};
-
-const resetAlertPlaceholder = () => {
-    title.value = '';
-    alertList.value = null;
-    alertType.value = 'hidden';
-};
-// #endregion
-
-// #region Watchers
-// #endregion
-</script>
-
-<template>
-    <div class="mt-8">
-        <LoadingOverlay :visible="loading">
-            <TitleLayout>
-                <template #title>
-                    {{ t(titleView) }}
-                </template>
-                <template #optional>
-                    <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
-                        <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md"
-                            @click="createNew">
-                            <Lucide icon="Plus" class="w-4 h-4" />&nbsp;{{ t("components.buttons.create_new") }}
-                        </Button>
-                        <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
-                            <Lucide icon="ArrowLeft" class="w-4 h-4" />&nbsp;{{ t("components.buttons.back") }}
-                        </Button>
-                    </div>
-                </template>
-            </TitleLayout>
-
-            <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
-            <RouterView @loading-state="onLoadingStateChanged" @mode-state="onModeStateChanged" @show-alertplaceholder="onAlertPlaceholderTriggered" @show-notification="onShowNotificationTriggered" />
-        </LoadingOverlay>
-        <Notification ref-key="userNotification" :options="{ duration: 3000, }" class="flex">
-            <Lucide icon="CheckCircle" class="text-success" />
-            <div class="ml-4 mr-4">
-                <div class="font-medium">{{ notificationTitle }}</div>
-                <div class="mt-1 text-slate-500">
-                    {{ notificationContent }}
-                </div>
-            </div>
-        </Notification>
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const cacheService = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.user.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const userNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[userNotification]', (el: NotificationElement) => {
+    userNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-administrator-user-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-administrator-user-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.user.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.user.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.user.page_title';
+        break;
+    }
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('USER_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('USER_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (userNotification.value) userNotification.value.showToast();
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="userNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/administrator/UserList.vue b/web/src/pages/administrator/UserList.vue
index 793acb8f8..74ca09cb0 100644
--- a/web/src/pages/administrator/UserList.vue
+++ b/web/src/pages/administrator/UserList.vue
@@ -1,274 +1,310 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref } from "vue";
-import AlertPlaceholder from "@/components/AlertPlaceholder";
-import DataList from "@/components/DataList";
-import { useI18n } from "vue-i18n";
-import Button from "@/components/Base/Button";
-import Lucide from "@/components/Base/Lucide";
-import Table from "@/components/Base/Table";
-import UserService from "@/services/UserService";
-import { User } from "@/types/models/User";
-import { Collection } from "@/types/resources/Collection";
-import { Role } from "@/types/models/Role";
-import { DataListEmittedData } from "@/components/DataList/DataList.vue";
-import { ServiceResponse } from "../../types/services/ServiceResponse";
-import { Resource } from "../../types/resources/Resource";
-import { ReadAnyRequest } from "../../types/services/ServiceRequest";
-import { useRouter } from "vue-router";
-import { ViewMode } from "../../types/enums/ViewMode";
-import { NotificationData } from "@/types/models/NotificationData";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-const userServices = new UserService();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder']);
-// #endregion
-
-// #region Refs
-const expandDetail = ref<number | null>(null);
-const userLists = ref<Collection<Array<User>> | null>({
-    data: [],
-    meta: {
-        current_page: 0,
-        from: null,
-        last_page: 0,
-        path: '',
-        per_page: 0,
-        to: null,
-        total: 0,
-    },
-    links: {
-        first: '',
-        last: '',
-        prev: null,
-        next: null,
-    }
-});
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-    emits('mode-state', ViewMode.LIST);
-    await getUsers('', true, true, 1, 10);
-});
-// #endregion
-
-// #region Methods
-const getUsers = async (search: string, refresh: boolean, paginate: boolean, page: number, per_page: number) => {
-    emits('loading-state', true);
-
-    const searchReq: ReadAnyRequest = {
-        search: search,
-        refresh: refresh,
-        paginate: paginate,
-        page: page,
-        per_page: per_page
-    };
-
-    let result: ServiceResponse<Collection<Array<User>> | Resource<Array<User>> | null> = await userServices.readAny(searchReq);
-
-    if (result.success && result.data) {
-        userLists.value = result.data as Collection<Array<User>>;
-    } else {
-        showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
-    }
-
-    emits('loading-state', false);
-};
-
-const onDataListChanged = async (data: DataListEmittedData) => {
-    await getUsers(data.search.text, false, true, data.pagination.page, data.pagination.per_page);
-}
-
-const viewSelected = (idx: number) => {
-    if (expandDetail.value === idx) {
-        expandDetail.value = null;
-    } else {
-        expandDetail.value = idx;
-    }
-};
-
-const editSelected = (itemIdx: number) => {
-    if (!userLists.value) return;
-
-    let ulid = userLists.value.data[itemIdx].ulid;
-    router.push({ name: 'side-menu-administrator-user-edit', params: { ulid: ulid } });
-};
-
-const flattenedRoles = (roles: Array<Role>): string => {
-    if (roles.length == 0) return '';
-    return roles.map((x: Role) => x.display_name).join(', ');
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-// #endregion
-
-// #region Watchers
-// #endregion
-</script>
-
-<template>
-    <DataList :title="t('views.user.table.title')" :enable-search="true" :can-print="true" :can-export="true"
-        :pagination="userLists ? userLists.meta : null" @dataListChanged="onDataListChanged">
-        <template #content>
-            <Table class="mt-5" :hover="true">
-                <Table.Thead variant="light">
-                    <Table.Tr>
-                        <Table.Th class="whitespace-nowrap">
-                            {{ t("views.user.table.cols.name") }}
-                        </Table.Th>
-                        <Table.Th class="whitespace-nowrap">
-                            {{ t("views.user.table.cols.email") }}
-                        </Table.Th>
-                        <Table.Th class="whitespace-nowrap">
-                            {{ t("views.user.table.cols.roles") }}
-                        </Table.Th>
-                        <Table.Th class="whitespace-nowrap">
-                            {{ t("views.user.table.cols.status") }}
-                        </Table.Th>
-                        <Table.Th class="whitespace-nowrap"></Table.Th>
-                    </Table.Tr>
-                </Table.Thead>
-                <Table.Tbody v-if="userLists !== null">
-                    <template v-if="userLists.data.length == 0">
-                        <Table.Tr class="intro-x">
-                            <Table.Td colspan="5">
-                                <div class="flex justify-center italic">{{
-                                    t('components.data-list.data_not_found') }}</div>
-                            </Table.Td>
-                        </Table.Tr>
-                    </template>
-                    <template v-for="( item, itemIdx ) in userLists.data" :key="item.ulid">
-                        <Table.Tr class="intro-x">
-                            <Table.Td>{{ item.name }}</Table.Td>
-                            <Table.Td>
-                                <a href="" class="hover:animate-pulse" @click.prevent="viewSelected(itemIdx)">
-                                    {{ item.email }}
-                                </a>
-                            </Table.Td>
-                            <Table.Td>
-                                <span v-for=" r  in  item.roles " :key="r.id">{{ r.display_name }} </span>
-                            </Table.Td>
-                            <Table.Td>
-                                <Lucide v-if="item.profile.status === 'ACTIVE'" icon="CheckCircle" />
-                                <Lucide v-if="item.profile.status === 'INACTIVE'" icon="X" />
-                            </Table.Td>
-                            <Table.Td>
-                                <div class="flex justify-end gap-1">
-                                    <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
-                                        <Lucide icon="Info" class="w-4 h-4" />
-                                    </Button>
-                                    <Button variant="outline-secondary" @click="editSelected(itemIdx)">
-                                        <Lucide icon="CheckSquare" class="w-4 h-4" />
-                                    </Button>
-                                </div>
-                            </Table.Td>
-                        </Table.Tr>
-                        <Table.Tr :class="{ 'intro-x': true, 'hidden transition-all': expandDetail !== itemIdx }">
-                            <Table.Td colspan="5">
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.name') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.name }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.email') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.email }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.first_name')
-                                    }}</div>
-                                    <div class="flex-1">{{ item.profile.first_name }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.last_name')
-                                    }}</div>
-                                    <div class="flex-1">{{ item.profile.last_name }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.address') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.profile.address }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.city') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.profile.city }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.postal_code')
-                                    }}</div>
-                                    <div class="flex-1">{{ item.profile.postal_code }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.country') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.profile.country }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.picture') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.profile.img_path }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.tax_id') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.profile.tax_id }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.ic_num') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.profile.ic_num }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.remarks') }}
-                                    </div>
-                                    <div class="flex-1">{{ item.profile.remarks }}</div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.status') }}
-                                    </div>
-                                    <div class="flex-1">
-                                        <span v-if="item.profile.status === 'ACTIVE'">
-                                            {{ t('components.dropdown.values.statusDDL.active') }}
-                                        </span>
-                                        <span v-if="item.profile.status === 'INACTIVE'">
-                                            {{ t('components.dropdown.values.statusDDL.inactive') }}
-                                        </span>
-                                    </div>
-                                </div>
-                                <div class="flex flex-row">
-                                    <div class="ml-5 w-48 text-right pr-5">{{ t('views.user.fields.roles') }}
-                                    </div>
-                                    <div class="flex-1">{{ flattenedRoles(item.roles) }}</div>
-                                </div>
-                            </Table.Td>
-                        </Table.Tr>
-                    </template>
-                </Table.Tbody>
-            </Table>
-        </template>
-    </DataList>
-</template>
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref } from 'vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import UserService from '@/services/UserService';
+  import { User } from '@/types/models/User';
+  import { Collection } from '@/types/resources/Collection';
+  import { Role } from '@/types/models/Role';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '../../types/services/ServiceResponse';
+  import { Resource } from '../../types/resources/Resource';
+  import { ReadAnyRequest } from '../../types/services/ServiceRequest';
+  import { useRouter } from 'vue-router';
+  import { ViewMode } from '../../types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const userServices = new UserService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const expandDetail = ref<number | null>(null);
+  const userLists = ref<Collection<Array<User>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+    await getUsers('', true, true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getUsers = async (search: string, refresh: boolean, paginate: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    const searchReq: ReadAnyRequest = {
+      search: search,
+      refresh: refresh,
+      paginate: paginate,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<User>> | Resource<Array<User>> | null> =
+      await userServices.readAny(searchReq);
+
+    if (result.success && result.data) {
+      userLists.value = result.data as Collection<Array<User>>;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getUsers(data.search.text, false, true, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!userLists.value) return;
+
+    let ulid = userLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-administrator-user-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const flattenedRoles = (roles: Array<Role>): string => {
+    if (roles.length == 0) return '';
+    return roles.map((x: Role) => x.display_name).join(', ');
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.user.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="userLists ? userLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.user.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.user.table.cols.email') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.user.table.cols.roles') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.user.table.cols.status') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="userLists !== null">
+          <template v-if="userLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in userLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>
+                <a href="" class="hover:animate-pulse" @click.prevent="viewSelected(itemIdx)">
+                  {{ item.email }}
+                </a>
+              </Table.Td>
+              <Table.Td>
+                <span v-for="r in item.roles" :key="r.id">
+                  {{ r.display_name }}
+                </span>
+              </Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.profile.status === 'ACTIVE'" icon="CheckCircle" />
+                <Lucide v-if="item.profile.status === 'INACTIVE'" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.email') }}
+                  </div>
+                  <div class="flex-1">{{ item.email }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.first_name') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.first_name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.last_name') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.last_name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.address') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.address }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.city') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.city }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.postal_code') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.postal_code }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.country') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.country }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.picture') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.img_path }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.tax_id') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.tax_id }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.ic_num') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.ic_num }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.profile.remarks }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.status') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.profile.status === 'ACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.active') }}
+                    </span>
+                    <span v-if="item.profile.status === 'INACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.inactive') }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.user.fields.roles') }}
+                  </div>
+                  <div class="flex-1">{{ flattenedRoles(item.roles) }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/asset-adjustment/AssetAdjustmentCreate.vue b/web/src/pages/asset-adjustment/AssetAdjustmentCreate.vue
new file mode 100644
index 000000000..4ba786609
--- /dev/null
+++ b/web/src/pages/asset-adjustment/AssetAdjustmentCreate.vue
@@ -0,0 +1,871 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import AssetService from '@/services/AssetService';
+import AssetAdjustmentService from '@/services/AssetAdjustmentService';
+import CacheService from '@/services/CacheService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type {
+  AssetAdjustmentInItemNestedStoreRequest,
+  AssetAdjustmentOutItemNestedStoreRequest,
+} from '@/types/services/asset-adjustment/AssetAdjustmentRequest';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type AssetAdjustmentInItemFormItem = {
+  qty: AssetAdjustmentInItemNestedStoreRequest['qty'];
+  asset_id: AssetAdjustmentInItemNestedStoreRequest['asset_id'];
+  asset_code?: string | null;
+  asset_name?: string | null;
+  asset_category_name?: string | null;
+  asset_unit_name?: string | null;
+  remarks: AssetAdjustmentInItemNestedStoreRequest['remarks'];
+  serials: { serial: string }[];
+};
+
+type AssetAdjustmentOutItemFormItem = {
+  qty: AssetAdjustmentOutItemNestedStoreRequest['qty'];
+  asset_id: AssetAdjustmentOutItemNestedStoreRequest['asset_id'];
+  asset_code?: string | null;
+  asset_name?: string | null;
+  asset_category_name?: string | null;
+  asset_unit_name?: string | null;
+  remarks: AssetAdjustmentOutItemNestedStoreRequest['remarks'];
+  serials: { serial: string }[];
+};
+
+type AssetOption = {
+  asset_id: string;
+  asset_code: string;
+  asset_name: string;
+  asset_category_name: string;
+  asset_unit_name: string;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const assetAdjustmentService = new AssetAdjustmentService();
+const assetAdjustmentForm = assetAdjustmentService.useAssetAdjustmentCreateForm();
+const assetService = new AssetService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.asset_adjustment.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.asset_adjustment.field_groups.asset_adjustment_data', state: CardState.Expanded },
+  { title: 'views.asset_adjustment.field_groups.in_items', state: CardState.Collapsed },
+  { title: 'views.asset_adjustment.field_groups.out_items', state: CardState.Collapsed },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const showAssetModal = ref<boolean>(false);
+const assetSearchText = ref<string>('');
+const isSearchingAsset = ref<boolean>(false);
+const assetOptions = ref<Array<AssetOption>>([]);
+const assetSelectionTarget = ref<'in' | 'out'>('in');
+const editingInAssetIndex = ref<number | null>(null);
+const editingOutAssetIndex = ref<number | null>(null);
+const inItemQtyToFocus = ref<number | null>(null);
+const outItemQtyToFocus = ref<number | null>(null);
+
+const inItemsRemarksExpanded = ref<boolean[]>([]);
+const outItemsRemarksExpanded = ref<boolean[]>([]);
+
+const inItemsForm = computed<AssetAdjustmentInItemFormItem[]>(
+  () => assetAdjustmentForm.in_items as AssetAdjustmentInItemFormItem[],
+);
+const outItemsForm = computed<AssetAdjustmentOutItemFormItem[]>(
+  () => assetAdjustmentForm.out_items as AssetAdjustmentOutItemFormItem[],
+);
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+watch(showAssetModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('asset-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(
+  assetAdjustmentForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_ADJUSTMENT_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(() => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+
+  assetAdjustmentForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+});
+
+const setCode = () => {
+  assetAdjustmentForm.forgetError('code');
+  assetAdjustmentForm.setData({
+    code: assetAdjustmentForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('ASSET_ADJUSTMENT_CREATE') as Record<string, unknown>;
+  if (!data) return;
+  assetAdjustmentForm.setData(data);
+};
+
+const searchAssets = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingAsset.value = true;
+
+  const result = await assetService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: assetSearchText.value,
+    asset_category_id: undefined,
+    asset_unit_id: undefined,
+    status: 1,
+    include_id: undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingAsset.value = false;
+
+  if (result.success && result.data) {
+    assetOptions.value = result.data.data.map((item) => ({
+      asset_id: item.id,
+      asset_code: item.code,
+      asset_name: item.name,
+      asset_category_name: item.asset_category?.name ?? '',
+      asset_unit_name: item.asset_unit?.name ?? '',
+    }));
+  } else {
+    assetOptions.value = [];
+  }
+};
+
+const selectAssetForIn = (option: AssetOption) => {
+  const baseData: Partial<AssetAdjustmentInItemFormItem> = {
+    asset_id: option.asset_id,
+    asset_code: option.asset_code,
+    asset_name: option.asset_name,
+    asset_category_name: option.asset_category_name,
+    asset_unit_name: option.asset_unit_name,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingInAssetIndex.value === null) {
+    const item: AssetAdjustmentInItemFormItem = {
+      qty: 0,
+      remarks: '',
+      ...baseData,
+    } as AssetAdjustmentInItemFormItem;
+
+    assetAdjustmentForm.in_items.push(item);
+    inItemsRemarksExpanded.value.push(false);
+    targetIndex = assetAdjustmentForm.in_items.length - 1;
+  } else {
+    const index = editingInAssetIndex.value;
+    const current = assetAdjustmentForm.in_items[index] as AssetAdjustmentInItemFormItem;
+    assetAdjustmentForm.in_items[index] = { ...current, ...baseData };
+    targetIndex = index;
+  }
+
+  showAssetModal.value = false;
+  editingInAssetIndex.value = null;
+  inItemQtyToFocus.value = targetIndex;
+};
+
+const selectAssetForOut = (option: AssetOption) => {
+  const baseData: Partial<AssetAdjustmentOutItemFormItem> = {
+    asset_id: option.asset_id,
+    asset_code: option.asset_code,
+    asset_name: option.asset_name,
+    asset_category_name: option.asset_category_name,
+    asset_unit_name: option.asset_unit_name,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingOutAssetIndex.value === null) {
+    const item: AssetAdjustmentOutItemFormItem = {
+      qty: 0,
+      remarks: '',
+      ...baseData,
+    } as AssetAdjustmentOutItemFormItem;
+
+    assetAdjustmentForm.out_items.push(item);
+    outItemsRemarksExpanded.value.push(false);
+    targetIndex = assetAdjustmentForm.out_items.length - 1;
+  } else {
+    const index = editingOutAssetIndex.value;
+    const current = assetAdjustmentForm.out_items[index] as AssetAdjustmentOutItemFormItem;
+    assetAdjustmentForm.out_items[index] = { ...current, ...baseData };
+    targetIndex = index;
+  }
+
+  showAssetModal.value = false;
+  editingOutAssetIndex.value = null;
+  outItemQtyToFocus.value = targetIndex;
+};
+
+const selectAsset = (option: AssetOption) => {
+  if (assetSelectionTarget.value === 'out') {
+    return selectAssetForOut(option);
+  }
+
+  return selectAssetForIn(option);
+};
+
+const handleAssetModalAfterLeave = () => {
+  const inIndex = inItemQtyToFocus.value;
+  const outIndex = outItemQtyToFocus.value;
+
+  inItemQtyToFocus.value = null;
+  outItemQtyToFocus.value = null;
+
+  if (inIndex === null && outIndex === null) return;
+
+  nextTick(() => {
+    let el: HTMLInputElement | null = null;
+
+    if (inIndex !== null) {
+      el = document.getElementById(`in-asset-qty-${inIndex}`) as HTMLInputElement | null;
+    } else if (outIndex !== null) {
+      el = document.getElementById(`out-asset-qty-${outIndex}`) as HTMLInputElement | null;
+    }
+
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addInAsset = () => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  assetSelectionTarget.value = 'in';
+  editingInAssetIndex.value = null;
+  showAssetModal.value = true;
+};
+
+const changeInAsset = (index: number) => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  assetSelectionTarget.value = 'in';
+  editingInAssetIndex.value = index;
+  showAssetModal.value = true;
+};
+
+const addOutAsset = () => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  assetSelectionTarget.value = 'out';
+  editingOutAssetIndex.value = null;
+  showAssetModal.value = true;
+};
+
+const changeOutAsset = (index: number) => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  assetSelectionTarget.value = 'out';
+  editingOutAssetIndex.value = index;
+  showAssetModal.value = true;
+};
+
+const addInAssetSerial = (index: number) => {
+  const item = inItemsForm.value[index];
+  if (!item) return;
+  item.serials.push({ serial: '' });
+  assetAdjustmentForm.validate(`in_items.${index}.serials` as any);
+};
+
+const removeInAssetSerial = (index: number, serialIndex: number) => {
+  const item = inItemsForm.value[index];
+  if (!item) return;
+  item.serials.splice(serialIndex, 1);
+  assetAdjustmentForm.validate(`in_items.${index}.serials` as any);
+};
+
+const addOutAssetSerial = (index: number) => {
+  const item = outItemsForm.value[index];
+  if (!item) return;
+  item.serials.push({ serial: '' });
+  assetAdjustmentForm.validate(`out_items.${index}.serials` as any);
+};
+
+const removeOutAssetSerial = (index: number, serialIndex: number) => {
+  const item = outItemsForm.value[index];
+  if (!item) return;
+  item.serials.splice(serialIndex, 1);
+  assetAdjustmentForm.validate(`out_items.${index}.serials` as any);
+};
+
+const toggleInAssetRemarks = (index: number) => {
+  inItemsRemarksExpanded.value[index] = !(inItemsRemarksExpanded.value[index] ?? false);
+};
+
+const toggleOutAssetRemarks = (index: number) => {
+  outItemsRemarksExpanded.value[index] = !(outItemsRemarksExpanded.value[index] ?? false);
+};
+
+const removeInAsset = (index: number) => {
+  assetAdjustmentForm.in_items.splice(index, 1);
+  inItemsRemarksExpanded.value.splice(index, 1);
+};
+
+const removeOutAsset = (index: number) => {
+  assetAdjustmentForm.out_items.splice(index, 1);
+  outItemsRemarksExpanded.value.splice(index, 1);
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const resetForm = () => {
+  assetAdjustmentForm.reset();
+  assetAdjustmentForm.setErrors({});
+  inItemsRemarksExpanded.value = [];
+  outItemsRemarksExpanded.value = [];
+  assetAdjustmentForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    remarks: '',
+    is_posted: true,
+    in_items: [],
+    out_items: [],
+  });
+};
+
+const onSubmit = async () => {
+  if (assetAdjustmentForm.hasErrors) {
+    const firstErrorKey = Object.keys(assetAdjustmentForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const originalInItems = assetAdjustmentForm.in_items as AssetAdjustmentInItemFormItem[];
+  const cleanedInItems: AssetAdjustmentInItemNestedStoreRequest[] = originalInItems.map((item) => ({
+    qty: item.qty,
+    asset_id: item.asset_id,
+    remarks: item.remarks,
+    serials: item.serials.map((serialItem) => ({ serial: serialItem.serial })),
+  }));
+
+  const originalOutItems = assetAdjustmentForm.out_items as AssetAdjustmentOutItemFormItem[];
+  const cleanedOutItems: AssetAdjustmentOutItemNestedStoreRequest[] = originalOutItems.map((item) => ({
+    qty: item.qty,
+    asset_id: item.asset_id,
+    remarks: item.remarks,
+    serials: item.serials.map((serialItem) => ({ serial: serialItem.serial })),
+  }));
+
+  const backupInItems = [...originalInItems];
+  const backupOutItems = [...originalOutItems];
+
+  assetAdjustmentForm.in_items = cleanedInItems as any;
+  assetAdjustmentForm.out_items = cleanedOutItems as any;
+
+  emits('loading-state', true);
+
+  try {
+    await assetAdjustmentForm.submit();
+    resetForm();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-asset-adjustment-list' });
+  } catch (error) {
+    assetAdjustmentForm.in_items = backupInItems as any;
+    assetAdjustmentForm.out_items = backupOutItems as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="assetAdjustmentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="assetAdjustmentForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="assetAdjustmentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid('code') }">
+                {{ t('views.asset_adjustment.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="assetAdjustmentForm.code"
+                :class="{ 'border-danger': assetAdjustmentForm.invalid('code') }"
+                :placeholder="t('views.asset_adjustment.fields.code')"
+                @set-auto="setCode"
+                @change="assetAdjustmentForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetAdjustmentForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid('date') }">
+                {{ t('views.asset_adjustment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="assetAdjustmentForm.date"
+                :class="{ 'border-danger': assetAdjustmentForm.invalid('date') }"
+                :placeholder="t('views.asset_adjustment.fields.date')"
+                @change="assetAdjustmentForm.validate('date')"
+              />
+              <FormErrorMessages :messages="assetAdjustmentForm.errors.date" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid('remarks') }">
+                {{ t('views.asset_adjustment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="assetAdjustmentForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': assetAdjustmentForm.invalid('remarks') }"
+                :placeholder="t('views.asset_adjustment.fields.remarks')"
+                @change="assetAdjustmentForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetAdjustmentForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">
+                {{ t('views.asset_adjustment.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="assetAdjustmentForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div v-if="assetAdjustmentForm.in_items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-5">
+            <div
+              v-for="(item, index) in inItemsForm"
+              :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.asset_adjustment_in_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary" @click="toggleInAssetRemarks(index)">
+                    {{ inItemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeInAsset(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`in_items.${index}.qty` as any) }">
+                    {{ t('views.asset_adjustment_in_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`in-asset-qty-${index}`"
+                    v-model="item.qty"
+                    :class="['text-right', { 'border-danger': assetAdjustmentForm.invalid(`in_items.${index}.qty` as any) }]"
+                    @change="
+                      assetAdjustmentForm.validate(`in_items.${index}.qty` as any);
+                      assetAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                    "
+                  />
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.qty`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-10">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`in_items.${index}.asset_id` as any) }">
+                    {{ t('views.asset_adjustment.table.cols.asset') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800">
+                        {{ item.asset_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1" @click="changeInAsset(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.asset_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    [{{ item.asset_code }}] {{ item.asset_category_name }}{{ item.asset_unit_name ? ` | ${item.asset_unit_name}` : '' }}
+                  </div>
+                </div>
+                <div class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`in_items.${index}.serials` as any) }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addInAssetSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="serialIndex" class="flex gap-2">
+                      <FormInput
+                        v-model="serial.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{ 'border-danger': assetAdjustmentForm.invalid(`in_items.${index}.serials.${serialIndex}.serial` as any) }"
+                        @change="
+                          assetAdjustmentForm.validate(`in_items.${index}.serials.${serialIndex}.serial` as any);
+                          assetAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                        "
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeInAssetSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.serials`]" />
+                </div>
+                <div v-if="inItemsRemarksExpanded[index]" class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`in_items.${index}.remarks` as any) }">
+                    {{ t('views.asset_adjustment_in_item.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    rows="2"
+                    v-model="assetAdjustmentForm.in_items[index].remarks"
+                    :class="{ 'border-danger': assetAdjustmentForm.invalid(`in_items.${index}.remarks` as any) }"
+                    @change="assetAdjustmentForm.validate(`in_items.${index}.remarks` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.remarks`]" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addInAsset">
+              {{ t('views.asset_adjustment_in_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <div v-if="assetAdjustmentForm.out_items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-5">
+            <div
+              v-for="(item, index) in outItemsForm"
+              :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.asset_adjustment_out_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary" @click="toggleOutAssetRemarks(index)">
+                    {{ outItemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeOutAsset(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`out_items.${index}.qty` as any) }">
+                    {{ t('views.asset_adjustment_out_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`out-asset-qty-${index}`"
+                    v-model="item.qty"
+                    :class="['text-right', { 'border-danger': assetAdjustmentForm.invalid(`out_items.${index}.qty` as any) }]"
+                    @change="
+                      assetAdjustmentForm.validate(`out_items.${index}.qty` as any);
+                      assetAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                    "
+                  />
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.qty`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-10">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`out_items.${index}.asset_id` as any) }">
+                    {{ t('views.asset_adjustment.table.cols.asset') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800">
+                        {{ item.asset_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1" @click="changeOutAsset(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.asset_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    [{{ item.asset_code }}] {{ item.asset_category_name }}{{ item.asset_unit_name ? ` | ${item.asset_unit_name}` : '' }}
+                  </div>
+                </div>
+                <div class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`out_items.${index}.serials` as any) }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addOutAssetSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="serialIndex" class="flex gap-2">
+                      <FormInput
+                        v-model="serial.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{ 'border-danger': assetAdjustmentForm.invalid(`out_items.${index}.serials.${serialIndex}.serial` as any) }"
+                        @change="
+                          assetAdjustmentForm.validate(`out_items.${index}.serials.${serialIndex}.serial` as any);
+                          assetAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                        "
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeOutAssetSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.serials`]" />
+                </div>
+                <div v-if="outItemsRemarksExpanded[index]" class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`out_items.${index}.remarks` as any) }">
+                    {{ t('views.asset_adjustment_out_item.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    rows="2"
+                    v-model="assetAdjustmentForm.out_items[index].remarks"
+                    :class="{ 'border-danger': assetAdjustmentForm.invalid(`out_items.${index}.remarks` as any) }"
+                    @change="assetAdjustmentForm.validate(`out_items.${index}.remarks` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.remarks`]" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addOutAsset">
+              {{ t('views.asset_adjustment_out_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4 p-5">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="assetAdjustmentForm.validating || assetAdjustmentForm.hasErrors"
+          >
+            <Lucide v-if="assetAdjustmentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+
+    <Dialog
+      size="xl"
+      :open="showAssetModal"
+      @close="
+        () => {
+          showAssetModal = false;
+        }
+      "
+      @after-leave="handleAssetModalAfterLeave"
+    >
+      <Dialog.Panel>
+        <div class="p-5">
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>
+              {{ t('views.asset_adjustment.table.title') }}
+            </FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showAssetModal = false">
+              <Lucide icon="X" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput
+              id="asset-search-input"
+              v-model="assetSearchText"
+              type="text"
+              :placeholder="t('components.search-box.placeholder.search')"
+              @keyup.enter="searchAssets"
+            />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchAssets" :disabled="isSearchingAsset">
+              <template v-if="isSearchingAsset">
+                <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+              </template>
+              <template v-else>
+                {{ t('components.buttons.search') }}
+              </template>
+            </Button>
+          </div>
+
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.code') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.name') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_category') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_unit') }}</th>
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="assetOptions.length === 0">
+                  <td colspan="5" class="px-3 py-4 text-center text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </td>
+                </tr>
+                <tr
+                  v-for="(option, optionIndex) in assetOptions"
+                  :key="optionIndex"
+                  class="border-t border-slate-200/60 dark:border-darkmode-400"
+                >
+                  <td class="px-3 py-2">{{ option.asset_code }}</td>
+                  <td class="px-3 py-2">{{ option.asset_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_category_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_unit_name }}</td>
+                  <td class="px-3 py-2 text-right">
+                    <Button type="button" variant="primary" size="sm" @click="selectAsset(option)">
+                      {{ t('components.buttons.select') }}
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  </form>
+</template>
diff --git a/web/src/pages/asset-adjustment/AssetAdjustmentEdit.vue b/web/src/pages/asset-adjustment/AssetAdjustmentEdit.vue
new file mode 100644
index 000000000..40d1095b8
--- /dev/null
+++ b/web/src/pages/asset-adjustment/AssetAdjustmentEdit.vue
@@ -0,0 +1,1029 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import AssetService from '@/services/AssetService';
+import AssetAdjustmentService from '@/services/AssetAdjustmentService';
+import CacheService from '@/services/CacheService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AssetAdjustment } from '@/types/models/AssetAdjustment';
+import type {
+  AssetAdjustmentInItemNestedUpdateRequest,
+  AssetAdjustmentOutItemNestedUpdateRequest,
+} from '@/types/services/asset-adjustment/AssetAdjustmentRequest';
+import { convertErrorTypeToAlertListType, formatDate } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type AssetAdjustmentInItemFormItem = {
+  id: AssetAdjustmentInItemNestedUpdateRequest['id'];
+  qty: AssetAdjustmentInItemNestedUpdateRequest['qty'];
+  asset_id: AssetAdjustmentInItemNestedUpdateRequest['asset_id'];
+  asset_code?: string | null;
+  asset_name?: string | null;
+  asset_category_name?: string | null;
+  asset_unit_name?: string | null;
+  remarks: AssetAdjustmentInItemNestedUpdateRequest['remarks'];
+  serials: { id: string | null; serial: string }[];
+  delete_serial_ids: string[];
+};
+
+type AssetAdjustmentOutItemFormItem = {
+  id: AssetAdjustmentOutItemNestedUpdateRequest['id'];
+  qty: AssetAdjustmentOutItemNestedUpdateRequest['qty'];
+  asset_id: AssetAdjustmentOutItemNestedUpdateRequest['asset_id'];
+  asset_code?: string | null;
+  asset_name?: string | null;
+  asset_category_name?: string | null;
+  asset_unit_name?: string | null;
+  remarks: AssetAdjustmentOutItemNestedUpdateRequest['remarks'];
+  serials: { id: string | null; serial: string }[];
+  delete_serial_ids: string[];
+};
+
+type AssetOption = {
+  asset_id: string;
+  asset_code: string;
+  asset_name: string;
+  asset_category_name: string;
+  asset_unit_name: string;
+};
+
+const assetAdjustmentData = ref<AssetAdjustment | null>(null);
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const assetAdjustmentService = new AssetAdjustmentService();
+const assetAdjustmentForm = assetAdjustmentService.useAssetAdjustmentEditForm(route.params.ulid as string);
+const assetService = new AssetService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.asset_adjustment.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.asset_adjustment.field_groups.asset_adjustment_data', state: CardState.Expanded },
+  { title: 'views.asset_adjustment.field_groups.in_items', state: CardState.Collapsed },
+  { title: 'views.asset_adjustment.field_groups.out_items', state: CardState.Collapsed },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const showAssetModal = ref<boolean>(false);
+const assetSearchText = ref<string>('');
+const isSearchingAsset = ref<boolean>(false);
+const assetOptions = ref<Array<AssetOption>>([]);
+const assetSelectionTarget = ref<'in' | 'out'>('in');
+const editingInAssetIndex = ref<number | null>(null);
+const editingOutAssetIndex = ref<number | null>(null);
+const inItemQtyToFocus = ref<number | null>(null);
+const outItemQtyToFocus = ref<number | null>(null);
+
+const inItemsRemarksExpanded = ref<boolean[]>([]);
+const outItemsRemarksExpanded = ref<boolean[]>([]);
+
+const inItemsForm = computed<AssetAdjustmentInItemFormItem[]>(
+  () => assetAdjustmentForm.in_items as AssetAdjustmentInItemFormItem[],
+);
+const outItemsForm = computed<AssetAdjustmentOutItemFormItem[]>(
+  () => assetAdjustmentForm.out_items as AssetAdjustmentOutItemFormItem[],
+);
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+watch(showAssetModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('asset-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(
+  assetAdjustmentForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_ADJUSTMENT_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await loadData();
+  } finally {
+    emits('loading-state', false);
+  }
+});
+
+const loadData = async () => {
+  const ulid = route.params.ulid as string | undefined;
+  if (!ulid) return;
+
+  const result = await assetAdjustmentService.read(ulid);
+  if (!result.success || !result.data) return;
+
+  const data = result.data as AssetAdjustment;
+  assetAdjustmentData.value = data;
+
+  const inItems: AssetAdjustmentInItemFormItem[] = (data.in_items || []).map((item) => ({
+    id: item.id ?? null,
+    qty: item.qty,
+    asset_id: item.asset?.id ?? '',
+    asset_code: item.asset?.code ?? '',
+    asset_name: item.asset?.name ?? '',
+    asset_category_name: item.asset?.asset_category?.name ?? '',
+    asset_unit_name: item.asset?.asset_unit?.name ?? '',
+    remarks: item.remarks ?? '',
+    serials: item.serials ? item.serials.map((serial) => ({ id: serial.id ?? null, serial: serial.serial })) : [],
+    delete_serial_ids: [],
+  }));
+
+  const outItems: AssetAdjustmentOutItemFormItem[] = (data.out_items || []).map((item) => ({
+    id: item.id ?? null,
+    qty: item.qty,
+    asset_id: item.asset?.id ?? '',
+    asset_code: item.asset?.code ?? '',
+    asset_name: item.asset?.name ?? '',
+    asset_category_name: item.asset?.asset_category?.name ?? '',
+    asset_unit_name: item.asset?.asset_unit?.name ?? '',
+    remarks: item.remarks ?? '',
+    serials: item.serials ? item.serials.map((serial) => ({ id: serial.id ?? null, serial: serial.serial })) : [],
+    delete_serial_ids: [],
+  }));
+
+  assetAdjustmentForm.setData({
+    company_id: data.company.id,
+    branch_id: data.branch.id,
+    code: data.code,
+    date: formatDate(data.date, 'YYYY-MM-DD HH:mm:ss'),
+    remarks: data.remarks ?? '',
+    is_posted: data.is_posted,
+    delete_in_item_ids: [],
+    in_items: inItems as any,
+    delete_out_item_ids: [],
+    out_items: outItems as any,
+  } as any);
+
+  inItemsRemarksExpanded.value = inItems.map(() => false);
+  outItemsRemarksExpanded.value = outItems.map(() => false);
+
+  if (inItems.length > 0) {
+    cards.value = cards.value.map((card) =>
+      card.title === 'views.asset_adjustment.field_groups.in_items'
+        ? { ...card, state: CardState.Expanded }
+        : card,
+    );
+  }
+
+  if (outItems.length > 0) {
+    cards.value = cards.value.map((card) =>
+      card.title === 'views.asset_adjustment.field_groups.out_items'
+        ? { ...card, state: CardState.Expanded }
+        : card,
+    );
+  }
+};
+
+const setCode = () => {
+  assetAdjustmentForm.forgetError('code');
+  assetAdjustmentForm.setData({
+    code: assetAdjustmentForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const searchAssets = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingAsset.value = true;
+
+  const result = await assetService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: assetSearchText.value,
+    asset_category_id: undefined,
+    asset_unit_id: undefined,
+    status: 1,
+    include_id: undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingAsset.value = false;
+
+  if (result.success && result.data) {
+    assetOptions.value = result.data.data.map((item) => ({
+      asset_id: item.id,
+      asset_code: item.code,
+      asset_name: item.name,
+      asset_category_name: item.asset_category?.name ?? '',
+      asset_unit_name: item.asset_unit?.name ?? '',
+    }));
+  } else {
+    assetOptions.value = [];
+  }
+};
+
+const selectAssetForIn = (option: AssetOption) => {
+  const baseData: Partial<AssetAdjustmentInItemFormItem> = {
+    asset_id: option.asset_id,
+    asset_code: option.asset_code,
+    asset_name: option.asset_name,
+    asset_category_name: option.asset_category_name,
+    asset_unit_name: option.asset_unit_name,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingInAssetIndex.value === null) {
+    const item: AssetAdjustmentInItemFormItem = {
+      id: null,
+      qty: 0,
+      remarks: '',
+      delete_serial_ids: [],
+      ...baseData,
+    } as AssetAdjustmentInItemFormItem;
+
+    assetAdjustmentForm.in_items.push(item);
+    inItemsRemarksExpanded.value.push(false);
+    targetIndex = assetAdjustmentForm.in_items.length - 1;
+  } else {
+    const index = editingInAssetIndex.value;
+    const current = assetAdjustmentForm.in_items[index] as AssetAdjustmentInItemFormItem;
+    const deleteSerialIds = [
+      ...current.delete_serial_ids,
+      ...current.serials
+        .filter((serial) => !!serial.id)
+        .map((serial) => serial.id as string),
+    ];
+
+    assetAdjustmentForm.in_items[index] = {
+      ...current,
+      ...baseData,
+      delete_serial_ids: Array.from(new Set(deleteSerialIds)),
+    };
+    targetIndex = index;
+  }
+
+  Object.keys(assetAdjustmentForm.errors).forEach((key) => {
+    if (key.startsWith('in_items.')) {
+      assetAdjustmentForm.forgetError(key as any);
+    }
+  });
+
+  showAssetModal.value = false;
+  editingInAssetIndex.value = null;
+  inItemQtyToFocus.value = targetIndex;
+};
+
+const selectAssetForOut = (option: AssetOption) => {
+  const baseData: Partial<AssetAdjustmentOutItemFormItem> = {
+    asset_id: option.asset_id,
+    asset_code: option.asset_code,
+    asset_name: option.asset_name,
+    asset_category_name: option.asset_category_name,
+    asset_unit_name: option.asset_unit_name,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingOutAssetIndex.value === null) {
+    const item: AssetAdjustmentOutItemFormItem = {
+      id: null,
+      qty: 0,
+      remarks: '',
+      delete_serial_ids: [],
+      ...baseData,
+    } as AssetAdjustmentOutItemFormItem;
+
+    assetAdjustmentForm.out_items.push(item);
+    outItemsRemarksExpanded.value.push(false);
+    targetIndex = assetAdjustmentForm.out_items.length - 1;
+  } else {
+    const index = editingOutAssetIndex.value;
+    const current = assetAdjustmentForm.out_items[index] as AssetAdjustmentOutItemFormItem;
+    const deleteSerialIds = [
+      ...current.delete_serial_ids,
+      ...current.serials
+        .filter((serial) => !!serial.id)
+        .map((serial) => serial.id as string),
+    ];
+
+    assetAdjustmentForm.out_items[index] = {
+      ...current,
+      ...baseData,
+      delete_serial_ids: Array.from(new Set(deleteSerialIds)),
+    };
+    targetIndex = index;
+  }
+
+  Object.keys(assetAdjustmentForm.errors).forEach((key) => {
+    if (key.startsWith('out_items.')) {
+      assetAdjustmentForm.forgetError(key as any);
+    }
+  });
+
+  showAssetModal.value = false;
+  editingOutAssetIndex.value = null;
+  outItemQtyToFocus.value = targetIndex;
+};
+
+const selectAsset = (option: AssetOption) => {
+  if (assetSelectionTarget.value === 'out') {
+    return selectAssetForOut(option);
+  }
+
+  return selectAssetForIn(option);
+};
+
+const handleAssetModalAfterLeave = () => {
+  const inIndex = inItemQtyToFocus.value;
+  const outIndex = outItemQtyToFocus.value;
+
+  inItemQtyToFocus.value = null;
+  outItemQtyToFocus.value = null;
+
+  if (inIndex === null && outIndex === null) return;
+
+  nextTick(() => {
+    let el: HTMLInputElement | null = null;
+
+    if (inIndex !== null) {
+      el = document.getElementById(`in-asset-qty-${inIndex}`) as HTMLInputElement | null;
+    } else if (outIndex !== null) {
+      el = document.getElementById(`out-asset-qty-${outIndex}`) as HTMLInputElement | null;
+    }
+
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addInAsset = () => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  assetSelectionTarget.value = 'in';
+  editingInAssetIndex.value = null;
+  showAssetModal.value = true;
+};
+
+const changeInAsset = (index: number) => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  assetSelectionTarget.value = 'in';
+  editingInAssetIndex.value = index;
+  showAssetModal.value = true;
+};
+
+const addOutAsset = () => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  assetSelectionTarget.value = 'out';
+  editingOutAssetIndex.value = null;
+  showAssetModal.value = true;
+};
+
+const changeOutAsset = (index: number) => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  assetSelectionTarget.value = 'out';
+  editingOutAssetIndex.value = index;
+  showAssetModal.value = true;
+};
+
+const addInAssetSerial = (index: number) => {
+  const item = inItemsForm.value[index];
+  if (!item) return;
+  item.serials.push({ id: null, serial: '' });
+  assetAdjustmentForm.validate(`in_items.${index}.serials` as any);
+};
+
+const removeInAssetSerial = (index: number, serialIndex: number) => {
+  const item = inItemsForm.value[index];
+  if (!item) return;
+
+  const serial = item.serials[serialIndex];
+  if (serial?.id) {
+    item.delete_serial_ids.push(serial.id);
+  }
+
+  item.serials.splice(serialIndex, 1);
+  item.delete_serial_ids = Array.from(new Set(item.delete_serial_ids));
+  assetAdjustmentForm.validate(`in_items.${index}.serials` as any);
+};
+
+const addOutAssetSerial = (index: number) => {
+  const item = outItemsForm.value[index];
+  if (!item) return;
+  item.serials.push({ id: null, serial: '' });
+  assetAdjustmentForm.validate(`out_items.${index}.serials` as any);
+};
+
+const removeOutAssetSerial = (index: number, serialIndex: number) => {
+  const item = outItemsForm.value[index];
+  if (!item) return;
+
+  const serial = item.serials[serialIndex];
+  if (serial?.id) {
+    item.delete_serial_ids.push(serial.id);
+  }
+
+  item.serials.splice(serialIndex, 1);
+  item.delete_serial_ids = Array.from(new Set(item.delete_serial_ids));
+  assetAdjustmentForm.validate(`out_items.${index}.serials` as any);
+};
+
+const toggleInAssetRemarks = (index: number) => {
+  inItemsRemarksExpanded.value[index] = !(inItemsRemarksExpanded.value[index] ?? false);
+};
+
+const toggleOutAssetRemarks = (index: number) => {
+  outItemsRemarksExpanded.value[index] = !(outItemsRemarksExpanded.value[index] ?? false);
+};
+
+const removeInAsset = (index: number) => {
+  const item = inItemsForm.value[index];
+  if (item?.id) {
+    assetAdjustmentForm.delete_in_item_ids.push(item.id);
+    assetAdjustmentForm.delete_in_item_ids = Array.from(new Set(assetAdjustmentForm.delete_in_item_ids));
+  }
+
+  assetAdjustmentForm.in_items.splice(index, 1);
+  inItemsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(assetAdjustmentForm.errors).forEach((key) => {
+    if (key.startsWith('in_items.')) {
+      assetAdjustmentForm.forgetError(key as any);
+    }
+  });
+};
+
+const removeOutAsset = (index: number) => {
+  const item = outItemsForm.value[index];
+  if (item?.id) {
+    assetAdjustmentForm.delete_out_item_ids.push(item.id);
+    assetAdjustmentForm.delete_out_item_ids = Array.from(new Set(assetAdjustmentForm.delete_out_item_ids));
+  }
+
+  assetAdjustmentForm.out_items.splice(index, 1);
+  outItemsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(assetAdjustmentForm.errors).forEach((key) => {
+    if (key.startsWith('out_items.')) {
+      assetAdjustmentForm.forgetError(key as any);
+    }
+  });
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const resetForm = async () => {
+  assetAdjustmentForm.reset();
+  assetAdjustmentForm.setErrors({});
+  inItemsRemarksExpanded.value = [];
+  outItemsRemarksExpanded.value = [];
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (assetAdjustmentForm.hasErrors) {
+    const firstErrorKey = Object.keys(assetAdjustmentForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const originalInItems = assetAdjustmentForm.in_items as AssetAdjustmentInItemFormItem[];
+  const cleanedInItems: AssetAdjustmentInItemNestedUpdateRequest[] = originalInItems.map((item) => ({
+    id: item.id,
+    qty: item.qty,
+    asset_id: item.asset_id,
+    remarks: item.remarks,
+    delete_serial_ids: item.delete_serial_ids,
+    serials: item.serials.map((serialItem) => ({
+      id: serialItem.id,
+      serial: serialItem.serial,
+    })),
+  }));
+
+  const originalOutItems = assetAdjustmentForm.out_items as AssetAdjustmentOutItemFormItem[];
+  const cleanedOutItems: AssetAdjustmentOutItemNestedUpdateRequest[] = originalOutItems.map((item) => ({
+    id: item.id,
+    qty: item.qty,
+    asset_id: item.asset_id,
+    remarks: item.remarks,
+    delete_serial_ids: item.delete_serial_ids,
+    serials: item.serials.map((serialItem) => ({
+      id: serialItem.id,
+      serial: serialItem.serial,
+    })),
+  }));
+
+  const backupInItems = [...originalInItems];
+  const backupOutItems = [...originalOutItems];
+
+  assetAdjustmentForm.in_items = cleanedInItems as any;
+  assetAdjustmentForm.out_items = cleanedOutItems as any;
+
+  emits('loading-state', true);
+
+  try {
+    await assetAdjustmentForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-asset-adjustment-list' });
+  } catch (error) {
+    assetAdjustmentForm.in_items = backupInItems as any;
+    assetAdjustmentForm.out_items = backupOutItems as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="assetAdjustmentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="assetAdjustmentForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="assetAdjustmentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid('code') }">
+                {{ t('views.asset_adjustment.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="assetAdjustmentForm.code"
+                :class="{ 'border-danger': assetAdjustmentForm.invalid('code') }"
+                :placeholder="t('views.asset_adjustment.fields.code')"
+                @set-auto="setCode"
+                @change="assetAdjustmentForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetAdjustmentForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid('date') }">
+                {{ t('views.asset_adjustment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="assetAdjustmentForm.date"
+                :class="{ 'border-danger': assetAdjustmentForm.invalid('date') }"
+                :placeholder="t('views.asset_adjustment.fields.date')"
+                @change="assetAdjustmentForm.validate('date')"
+              />
+              <FormErrorMessages :messages="assetAdjustmentForm.errors.date" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid('remarks') }">
+                {{ t('views.asset_adjustment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="assetAdjustmentForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': assetAdjustmentForm.invalid('remarks') }"
+                :placeholder="t('views.asset_adjustment.fields.remarks')"
+                @change="assetAdjustmentForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetAdjustmentForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">
+                {{ t('views.asset_adjustment.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="assetAdjustmentForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div v-if="assetAdjustmentForm.in_items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-5">
+            <div
+              v-for="(item, index) in inItemsForm"
+              :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.asset_adjustment_in_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary" @click="toggleInAssetRemarks(index)">
+                    {{ inItemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeInAsset(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`in_items.${index}.qty` as any) }">
+                    {{ t('views.asset_adjustment_in_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`in-asset-qty-${index}`"
+                    v-model="item.qty"
+                    :class="['text-right', { 'border-danger': assetAdjustmentForm.invalid(`in_items.${index}.qty` as any) }]"
+                    @change="
+                      assetAdjustmentForm.validate(`in_items.${index}.qty` as any);
+                      assetAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                    "
+                  />
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.qty`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-10">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`in_items.${index}.asset_id` as any) }">
+                    {{ t('views.asset_adjustment.table.cols.asset') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800">
+                        {{ item.asset_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1" @click="changeInAsset(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.asset_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    [{{ item.asset_code }}] {{ item.asset_category_name }}{{ item.asset_unit_name ? ` | ${item.asset_unit_name}` : '' }}
+                  </div>
+                </div>
+                <div class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`in_items.${index}.serials` as any) }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addInAssetSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="serialIndex" class="flex gap-2">
+                      <FormInput
+                        v-model="serial.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{ 'border-danger': assetAdjustmentForm.invalid(`in_items.${index}.serials.${serialIndex}.serial` as any) }"
+                        @change="
+                          assetAdjustmentForm.validate(`in_items.${index}.serials.${serialIndex}.serial` as any);
+                          assetAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                        "
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeInAssetSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, serialIndex) in item.serials"
+                    :key="`in-serial-error-${index}-${serialIndex}`"
+                    :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.serials.${serialIndex}.serial`]"
+                  />
+                </div>
+                <div v-if="inItemsRemarksExpanded[index]" class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`in_items.${index}.remarks` as any) }">
+                    {{ t('views.asset_adjustment_in_item.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    rows="2"
+                    v-model="assetAdjustmentForm.in_items[index].remarks"
+                    :class="{ 'border-danger': assetAdjustmentForm.invalid(`in_items.${index}.remarks` as any) }"
+                    @change="assetAdjustmentForm.validate(`in_items.${index}.remarks` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`in_items.${index}.remarks`]" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addInAsset">
+              {{ t('views.asset_adjustment_in_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <div v-if="assetAdjustmentForm.out_items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-5">
+            <div
+              v-for="(item, index) in outItemsForm"
+              :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.asset_adjustment_out_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary" @click="toggleOutAssetRemarks(index)">
+                    {{ outItemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeOutAsset(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`out_items.${index}.qty` as any) }">
+                    {{ t('views.asset_adjustment_out_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`out-asset-qty-${index}`"
+                    v-model="item.qty"
+                    :class="['text-right', { 'border-danger': assetAdjustmentForm.invalid(`out_items.${index}.qty` as any) }]"
+                    @change="
+                      assetAdjustmentForm.validate(`out_items.${index}.qty` as any);
+                      assetAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                    "
+                  />
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.qty`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-10">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`out_items.${index}.asset_id` as any) }">
+                    {{ t('views.asset_adjustment.table.cols.asset') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800">
+                        {{ item.asset_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1" @click="changeOutAsset(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.asset_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    [{{ item.asset_code }}] {{ item.asset_category_name }}{{ item.asset_unit_name ? ` | ${item.asset_unit_name}` : '' }}
+                  </div>
+                </div>
+                <div class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`out_items.${index}.serials` as any) }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addOutAssetSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="serialIndex" class="flex gap-2">
+                      <FormInput
+                        v-model="serial.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{ 'border-danger': assetAdjustmentForm.invalid(`out_items.${index}.serials.${serialIndex}.serial` as any) }"
+                        @change="
+                          assetAdjustmentForm.validate(`out_items.${index}.serials.${serialIndex}.serial` as any);
+                          assetAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                        "
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeOutAssetSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, serialIndex) in item.serials"
+                    :key="`out-serial-error-${index}-${serialIndex}`"
+                    :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.serials.${serialIndex}.serial`]"
+                  />
+                </div>
+                <div v-if="outItemsRemarksExpanded[index]" class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': assetAdjustmentForm.invalid(`out_items.${index}.remarks` as any) }">
+                    {{ t('views.asset_adjustment_out_item.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    rows="2"
+                    v-model="assetAdjustmentForm.out_items[index].remarks"
+                    :class="{ 'border-danger': assetAdjustmentForm.invalid(`out_items.${index}.remarks` as any) }"
+                    @change="assetAdjustmentForm.validate(`out_items.${index}.remarks` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetAdjustmentForm.errors as any)[`out_items.${index}.remarks`]" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addOutAsset">
+              {{ t('views.asset_adjustment_out_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4 p-5">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="assetAdjustmentForm.validating || assetAdjustmentForm.hasErrors"
+          >
+            <Lucide v-if="assetAdjustmentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+
+    <Dialog
+      size="xl"
+      :open="showAssetModal"
+      @close="
+        () => {
+          showAssetModal = false;
+        }
+      "
+      @after-leave="handleAssetModalAfterLeave"
+    >
+      <Dialog.Panel>
+        <div class="p-5">
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>
+              {{ t('views.asset_adjustment.table.title') }}
+            </FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showAssetModal = false">
+              <Lucide icon="X" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput
+              id="asset-search-input"
+              v-model="assetSearchText"
+              type="text"
+              :placeholder="t('components.search-box.placeholder.search')"
+              @keyup.enter="searchAssets"
+            />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchAssets" :disabled="isSearchingAsset">
+              <template v-if="isSearchingAsset">
+                <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+              </template>
+              <template v-else>
+                {{ t('components.buttons.search') }}
+              </template>
+            </Button>
+          </div>
+
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.code') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.name') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_category') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_unit') }}</th>
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="assetOptions.length === 0">
+                  <td colspan="5" class="px-3 py-4 text-center text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </td>
+                </tr>
+                <tr
+                  v-for="(option, optionIndex) in assetOptions"
+                  :key="optionIndex"
+                  class="border-t border-slate-200/60 dark:border-darkmode-400"
+                >
+                  <td class="px-3 py-2">{{ option.asset_code }}</td>
+                  <td class="px-3 py-2">{{ option.asset_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_category_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_unit_name }}</td>
+                  <td class="px-3 py-2 text-right">
+                    <Button type="button" variant="primary" size="sm" @click="selectAsset(option)">
+                      {{ t('components.buttons.select') }}
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  </form>
+</template>
diff --git a/web/src/pages/asset-adjustment/AssetAdjustmentIndex.vue b/web/src/pages/asset-adjustment/AssetAdjustmentIndex.vue
new file mode 100644
index 000000000..aa37dbeb1
--- /dev/null
+++ b/web/src/pages/asset-adjustment/AssetAdjustmentIndex.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.asset_adjustment.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const assetAdjustmentNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[assetAdjustmentNotification]', (el: NotificationElement) => {
+  assetAdjustmentNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-asset-adjustment-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-asset-adjustment-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.asset_adjustment.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.asset_adjustment.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.asset_adjustment.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (assetAdjustmentNotification.value) {
+    assetAdjustmentNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('ASSET_ADJUSTMENT_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('ASSET_ADJUSTMENT_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="assetAdjustmentNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/asset-adjustment/AssetAdjustmentList.vue b/web/src/pages/asset-adjustment/AssetAdjustmentList.vue
new file mode 100644
index 000000000..186b231f3
--- /dev/null
+++ b/web/src/pages/asset-adjustment/AssetAdjustmentList.vue
@@ -0,0 +1,377 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import { FormInputDateTime, FormLabel } from '@/components/Base/Form';
+import AssetAdjustmentService from '@/services/AssetAdjustmentService';
+import type { AssetAdjustment } from '@/types/models/AssetAdjustment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AssetAdjustmentReadAnyPaginateRequest } from '@/types/services/asset-adjustment/AssetAdjustmentRequest';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { formatDate, formatCurrency } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const assetAdjustmentService = new AssetAdjustmentService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+
+const assetAdjustmentLists = ref<Collection<Array<AssetAdjustment>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getAssetAdjustments('', true, 1, 10);
+});
+
+const getAssetAdjustments = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: AssetAdjustmentReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value || null,
+    end_date: endDate.value || null,
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result: ServiceResponse<Collection<Array<AssetAdjustment>> | null> =
+    await assetAdjustmentService.readAnyPaginate(request);
+
+  if (result.success && result.data) {
+    assetAdjustmentLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getAssetAdjustments(data.search.text, true, data.pagination.page, data.pagination.per_page);
+};
+
+const handleDateFilterChange = async () => {
+  const perPage = assetAdjustmentLists.value?.meta.per_page || 10;
+  await getAssetAdjustments(searchText.value, true, 1, perPage);
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!assetAdjustmentLists.value) return;
+
+  const ulid = assetAdjustmentLists.value.data[idx].ulid;
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({
+    name: 'side-menu-asset-adjustment-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!assetAdjustmentLists.value) return;
+
+  deleteUlid.value = assetAdjustmentLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await assetAdjustmentService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getAssetAdjustments(searchText.value, true, 1, assetAdjustmentLists.value?.meta.per_page || 10);
+    showNotification(
+      t('views.asset_adjustment.alert.delete.title'),
+      t('views.asset_adjustment.alert.delete.message'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const notification: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', notification);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const alertPlaceholder: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', alertPlaceholder);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.asset_adjustment.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.asset_adjustment.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="assetAdjustmentLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="assetAdjustmentLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="assetAdjustmentLists ? assetAdjustmentLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 lg:col-span-5 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_adjustment.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_adjustment.fields.code') }}:
+              {{ (item as AssetAdjustment).code ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_adjustment.fields.date') }}:
+              {{ (item as AssetAdjustment).date ? formatDate((item as AssetAdjustment).date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+            </div>
+            <div v-if="(item as AssetAdjustment).remarks?.trim()" class="text-slate-500 text-xs">
+              {{ t('views.asset_adjustment.fields.remarks') }}:
+              {{ (item as AssetAdjustment).remarks }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_adjustment.field_groups.company_info') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ (item as AssetAdjustment).branch?.name ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_adjustment.fields.total_incoming_asset_qty') }}:
+              {{ formatCurrency((item as AssetAdjustment).total_incoming_asset_qty ?? 0) }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_adjustment.fields.total_outgoing_asset_qty') }}:
+              {{ formatCurrency((item as AssetAdjustment).total_outgoing_asset_qty ?? 0) }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-2 md:col-span-2 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_adjustment.fields.is_posted') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              <span class="inline-flex items-center">
+                <Lucide v-if="(item as AssetAdjustment).is_posted" icon="CheckCircle" class="w-4 h-4 text-success" />
+                <Lucide v-else icon="X" class="w-4 h-4 text-danger" />
+              </span>
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-1 md:col-span-2 flex justify-end items-start gap-2">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+
+          <div
+            v-if="expandDetail === index"
+            class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3"
+          >
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_adjustment.field_groups.in_items') }}
+            </div>
+            <div v-if="((item as AssetAdjustment).in_items?.length ?? 0) === 0" class="text-slate-500 text-xs italic">
+              {{ t('components.data-list.data_not_found') }}
+            </div>
+            <div v-else class="space-y-2 text-xs mb-3">
+              <div v-for="(assetItem, assetIdx) in (item as AssetAdjustment).in_items" :key="assetItem.ulid" class="flex gap-2">
+                <div class="w-6 text-right text-slate-500">{{ assetIdx + 1 }}.</div>
+                <div class="flex-1">
+                  <div class="font-medium break-all">
+                    [{{ assetItem.asset.code }}] {{ assetItem.asset.name }}
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.asset_adjustment_in_item.fields.qty') }}:
+                    <span class="font-medium">{{ formatCurrency(assetItem.qty) }}</span>
+                  </div>
+                  <div class="text-slate-500 mt-0.5 break-all">
+                    {{ t('views.product.fields.serial_number') }}:
+                    <span v-if="assetItem.serials?.length">{{ assetItem.serials.map((serial) => serial.serial).join(', ') }}</span>
+                    <span v-else>{{ t('components.data-list.data_not_found') }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_adjustment.field_groups.out_items') }}
+            </div>
+            <div v-if="((item as AssetAdjustment).out_items?.length ?? 0) === 0" class="text-slate-500 text-xs italic">
+              {{ t('components.data-list.data_not_found') }}
+            </div>
+            <div v-else class="space-y-2 text-xs">
+              <div v-for="(assetItem, assetIdx) in (item as AssetAdjustment).out_items" :key="assetItem.ulid" class="flex gap-2">
+                <div class="w-6 text-right text-slate-500">{{ assetIdx + 1 }}.</div>
+                <div class="flex-1">
+                  <div class="font-medium break-all">
+                    [{{ assetItem.asset.code }}] {{ assetItem.asset.name }}
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.asset_adjustment_out_item.fields.qty') }}:
+                    <span class="font-medium">{{ formatCurrency(assetItem.qty) }}</span>
+                  </div>
+                  <div class="text-slate-500 mt-0.5 break-all">
+                    {{ t('views.product.fields.serial_number') }}:
+                    <span v-if="assetItem.serials?.length">{{ assetItem.serials.map((serial) => serial.serial).join(', ') }}</span>
+                    <span v-else>{{ t('components.data-list.data_not_found') }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog
+    :open="deleteModalShow"
+    @close="
+      () => {
+        deleteModalShow = false;
+      }
+    "
+  >
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">
+          {{ t('components.delete-modal.title') }}
+        </div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button
+          type="button"
+          variant="outline-secondary"
+          @click="
+            () => {
+              deleteModalShow = false;
+            }
+          "
+          class="w-24 mr-1"
+        >
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/asset-category/AssetCategoryCreate.vue b/web/src/pages/asset-category/AssetCategoryCreate.vue
new file mode 100644
index 000000000..2b1784fb8
--- /dev/null
+++ b/web/src/pages/asset-category/AssetCategoryCreate.vue
@@ -0,0 +1,317 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import AssetCategoryService from '@/services/AssetCategoryService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormTextarea,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const assetCategoryService = new AssetCategoryService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.asset_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.asset_category.field_groups.asset_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const assetCategoryForm = assetCategoryService.useAssetCategoryCreateForm();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  assetCategoryForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_CATEGORY_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+// #endregion
+
+// #region Methods - AssetCategory
+const setCompanyIdData = () => {
+  assetCategoryForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('ASSET_CATEGORY_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  if (!data.code) {
+    data.code = '_AUTO_';
+  }
+
+  if (
+    data.estimated_useful_life_months === undefined ||
+    data.estimated_useful_life_months === null
+  ) {
+    data.estimated_useful_life_months = '';
+  }
+
+  if (data.remarks === undefined || data.remarks === null) {
+    data.remarks = '';
+  }
+
+  assetCategoryForm.setData(data);
+};
+
+const setCode = () => {
+  assetCategoryForm.forgetError('code');
+  if (assetCategoryForm.code == '_AUTO_') {
+    assetCategoryForm.setData({ code: '' });
+  } else {
+    assetCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  assetCategoryForm.reset();
+  assetCategoryForm.setErrors({});
+  assetCategoryForm.setData({
+    code: '_AUTO_',
+    name: '',
+    estimated_useful_life_months: '',
+    remarks: '',
+  });
+  setCompanyIdData();
+};
+
+const onSubmit = async () => {
+  if (assetCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(assetCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await assetCategoryForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-asset-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="assetCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="assetCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': assetCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.asset_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="assetCategoryForm.code"
+                :class="{
+                  'border-danger': assetCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.asset_category.fields.code')"
+                @set-auto="setCode"
+                @change="assetCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': assetCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.asset_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="assetCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': assetCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.asset_category.fields.name')"
+                @change="assetCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="assetCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': assetCategoryForm.invalid('estimated_useful_life_months'),
+                }"
+              >
+                {{ t('views.asset_category.fields.estimated_useful_life_months') }}
+              </FormLabel>
+              <FormInput
+                id="estimated_useful_life_months"
+                v-model.number="assetCategoryForm.estimated_useful_life_months"
+                type="number"
+                min="1"
+                :class="{
+                  'border-danger': assetCategoryForm.invalid('estimated_useful_life_months'),
+                }"
+                :placeholder="t('views.asset_category.fields.estimated_useful_life_months')"
+                @change="assetCategoryForm.validate('estimated_useful_life_months')"
+              />
+              <FormErrorMessages :messages="assetCategoryForm.errors.estimated_useful_life_months" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel
+                :class="{
+                  'text-danger': assetCategoryForm.invalid('remarks'),
+                }"
+              >
+                {{ t('views.asset_category.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="assetCategoryForm.remarks"
+                :class="{
+                  'border-danger': assetCategoryForm.invalid('remarks'),
+                }"
+                :placeholder="t('views.asset_category.fields.remarks')"
+                @change="assetCategoryForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetCategoryForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="assetCategoryForm.validating || assetCategoryForm.hasErrors"
+          >
+            <Lucide v-if="assetCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/asset-category/AssetCategoryEdit.vue b/web/src/pages/asset-category/AssetCategoryEdit.vue
new file mode 100644
index 000000000..7877ec848
--- /dev/null
+++ b/web/src/pages/asset-category/AssetCategoryEdit.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import AssetCategoryService from '@/services/AssetCategoryService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode, FormTextarea } from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const assetCategoryService = new AssetCategoryService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.asset_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.asset_category.field_groups.asset_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const assetCategoryForm = assetCategoryService.useAssetCategoryEditForm(route.params.ulid.toString());
+const companyCode = ref<string>('');
+const companyName = ref<string>('');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+// #endregion
+
+// #region Methods - AssetCategory
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await assetCategoryService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    companyCode.value = result.data.company?.code ?? '';
+    companyName.value = result.data.company?.name ?? '';
+
+    assetCategoryForm.setData({
+      company_id: result.data.company?.id ?? '',
+      code: result.data.code,
+      name: result.data.name,
+      estimated_useful_life_months: result.data.estimated_useful_life_months ?? '',
+      remarks: result.data.remarks ?? '',
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-asset-category-list' });
+  }
+};
+
+const setCode = () => {
+  assetCategoryForm.forgetError('code');
+  if (assetCategoryForm.code == '_AUTO_') {
+    assetCategoryForm.setData({ code: '' });
+  } else {
+    assetCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  assetCategoryForm.reset();
+  assetCategoryForm.setErrors({});
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (assetCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(assetCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await assetCategoryForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-asset-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="assetCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ companyCode }}
+            <br />
+            {{ companyName }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="assetCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': assetCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.asset_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="assetCategoryForm.code"
+                :class="{
+                  'border-danger': assetCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.asset_category.fields.code')"
+                @set-auto="setCode"
+                @change="assetCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': assetCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.asset_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="assetCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': assetCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.asset_category.fields.name')"
+                @change="assetCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="assetCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': assetCategoryForm.invalid('estimated_useful_life_months'),
+                }"
+              >
+                {{ t('views.asset_category.fields.estimated_useful_life_months') }}
+              </FormLabel>
+              <FormInput
+                id="estimated_useful_life_months"
+                v-model.number="assetCategoryForm.estimated_useful_life_months"
+                type="number"
+                min="1"
+                :class="{
+                  'border-danger': assetCategoryForm.invalid('estimated_useful_life_months'),
+                }"
+                :placeholder="t('views.asset_category.fields.estimated_useful_life_months')"
+                @change="assetCategoryForm.validate('estimated_useful_life_months')"
+              />
+              <FormErrorMessages :messages="assetCategoryForm.errors.estimated_useful_life_months" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel
+                :class="{
+                  'text-danger': assetCategoryForm.invalid('remarks'),
+                }"
+              >
+                {{ t('views.asset_category.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="assetCategoryForm.remarks"
+                :class="{
+                  'border-danger': assetCategoryForm.invalid('remarks'),
+                }"
+                :placeholder="t('views.asset_category.fields.remarks')"
+                @change="assetCategoryForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetCategoryForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="assetCategoryForm.validating || assetCategoryForm.hasErrors"
+          >
+            <Lucide v-if="assetCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/asset-category/AssetCategoryIndex.vue b/web/src/pages/asset-category/AssetCategoryIndex.vue
new file mode 100644
index 000000000..84f311638
--- /dev/null
+++ b/web/src/pages/asset-category/AssetCategoryIndex.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.asset_category.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const assetCategoryNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[assetCategoryNotification]', (el: NotificationElement) => {
+  assetCategoryNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-asset-category-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-asset-category-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.asset_category.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.asset_category.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.asset_category.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (assetCategoryNotification.value) {
+    assetCategoryNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('ASSET_CATEGORY_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('ASSET_CATEGORY_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="assetCategoryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/asset-category/AssetCategoryList.vue b/web/src/pages/asset-category/AssetCategoryList.vue
new file mode 100644
index 000000000..56f35af7b
--- /dev/null
+++ b/web/src/pages/asset-category/AssetCategoryList.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import AssetCategoryService from '@/services/AssetCategoryService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { AssetCategory } from '@/types/models/AssetCategory';
+import { NotificationData } from '@/types/models/NotificationData';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { AssetCategoryReadAnyPaginateRequest } from '@/types/services/asset-category/AssetCategoryRequest';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const assetCategoryService = new AssetCategoryService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const assetCategoryLists = ref<Collection<Array<AssetCategory>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getAssetCategories('', true, 1, 10);
+});
+
+const getAssetCategories = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const searchReq: AssetCategoryReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<AssetCategory>> | null> =
+    await assetCategoryService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    assetCategoryLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getAssetCategories(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (idx: number) => {
+  if (!assetCategoryLists.value) return;
+  const ulid = assetCategoryLists.value.data[idx].ulid;
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({
+    name: 'side-menu-asset-category-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!assetCategoryLists.value) return;
+  deleteUlid.value = assetCategoryLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await assetCategoryService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getAssetCategories('', true, 1, 10);
+    showNotification(
+      t('views.asset_category.alert.delete_asset_category.title'),
+      t('views.asset_category.alert.delete_asset_category.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="assetCategoryLists"
+        :title="t('views.asset_category.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="assetCategoryLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="assetCategoryLists ? assetCategoryLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-5 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.asset_category.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.asset_category.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as AssetCategory).code }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.asset_category.fields.name') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as AssetCategory).name }}
+                </div>
+                <div class="col-span-4 text-slate-500">
+                  {{ t('views.asset_category.fields.estimated_useful_life_months') }}
+                </div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as AssetCategory).estimated_useful_life_months || '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.asset_category.fields.remarks') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as AssetCategory).remarks || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-5 self-start md:pl-3">
+            <div
+              v-if="expandDetail === index"
+              class="rounded-md border border-slate-200/60 p-4 text-xs dark:border-darkmode-400"
+            >
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2">
+                <div class="col-span-4 text-slate-500">{{ t('views.asset_category.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as AssetCategory).code }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.asset_category.fields.name') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as AssetCategory).name }}
+                </div>
+                <div class="col-span-4 text-slate-500">
+                  {{ t('views.asset_category.fields.estimated_useful_life_months') }}
+                </div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as AssetCategory).estimated_useful_life_months || '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.asset_category.fields.remarks') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as AssetCategory).remarks || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-2 self-center flex justify-end items-center gap-2 pt-2 md:flex-col">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" @click="deleteModalShow = false" class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/asset-purchase/AssetPurchaseCreate.vue b/web/src/pages/asset-purchase/AssetPurchaseCreate.vue
new file mode 100644
index 000000000..1ebba7d46
--- /dev/null
+++ b/web/src/pages/asset-purchase/AssetPurchaseCreate.vue
@@ -0,0 +1,784 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import type { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import AssetService from '@/services/AssetService';
+import AssetPurchaseService from '@/services/AssetPurchaseService';
+import CacheService from '@/services/CacheService';
+import SupplierService from '@/services/SupplierService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AssetPurchaseItemNestedStoreRequest } from '@/types/services/asset-purchase/AssetPurchaseRequest';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type AssetPurchaseItemFormItem = {
+  qty: AssetPurchaseItemNestedStoreRequest['qty'];
+  asset_id: AssetPurchaseItemNestedStoreRequest['asset_id'];
+  asset_code?: string | null;
+  asset_name?: string | null;
+  asset_category_name?: string | null;
+  asset_unit_name?: string | null;
+  unit_price: AssetPurchaseItemNestedStoreRequest['unit_price'];
+  remarks: AssetPurchaseItemNestedStoreRequest['remarks'];
+  serials: { serial: string }[];
+};
+
+type AssetOption = {
+  asset_id: string;
+  asset_code: string;
+  asset_name: string;
+  asset_category_name: string;
+  asset_unit_name: string;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const assetPurchaseService = new AssetPurchaseService();
+const assetPurchaseForm = assetPurchaseService.useAssetPurchaseCreateForm();
+const assetService = new AssetService();
+const supplierService = new SupplierService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.asset_purchase.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.asset_purchase.field_groups.asset_purchase_data', state: CardState.Expanded },
+  { title: 'views.asset_purchase.field_groups.items', state: CardState.Expanded },
+  { title: 'views.asset_purchase.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showAssetModal = ref<boolean>(false);
+const assetSearchText = ref<string>('');
+const isSearchingAsset = ref<boolean>(false);
+const assetOptions = ref<Array<AssetOption>>([]);
+const editingAssetIndex = ref<number | null>(null);
+const itemQtyToFocus = ref<number | null>(null);
+const itemsRemarksExpanded = ref<boolean[]>([]);
+
+const itemsForm = computed<AssetPurchaseItemFormItem[]>(
+  () => assetPurchaseForm.items as AssetPurchaseItemFormItem[],
+);
+
+const toNumber = (value: unknown): number => {
+  const parsed = Number(value ?? 0);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+const roundAmount = (value: number): number => {
+  return Math.round((value + Number.EPSILON) * 100000000) / 100000000;
+};
+
+const itemSubtotal = (item: AssetPurchaseItemFormItem): number => {
+  return roundAmount(toNumber(item.qty) * toNumber(item.unit_price));
+};
+
+const itemTotal = computed(() => {
+  return roundAmount(itemsForm.value.reduce((sum, item) => sum + itemSubtotal(item), 0));
+});
+
+const itemAllocatedAdditionalCost = (index: number): number => {
+  const additionalCost = toNumber(assetPurchaseForm.additional_cost);
+  const total = itemTotal.value;
+
+  if (total <= 0 || additionalCost === 0) {
+    return 0;
+  }
+
+  if (index === itemsForm.value.length - 1) {
+    const allocatedBefore = itemsForm.value
+      .slice(0, index)
+      .reduce((sum, item, currentIndex) => sum + itemAllocatedAdditionalCost(currentIndex), 0);
+    return roundAmount(additionalCost - allocatedBefore);
+  }
+
+  return roundAmount((additionalCost * itemSubtotal(itemsForm.value[index])) / total);
+};
+
+const itemSubtotalAfterAdditionalCost = (index: number): number => {
+  return roundAmount(itemSubtotal(itemsForm.value[index]) + itemAllocatedAdditionalCost(index));
+};
+
+const itemUnitAcquisitionCost = (index: number): number => {
+  const qty = toNumber(itemsForm.value[index]?.qty);
+  if (qty <= 0) return 0;
+  return roundAmount(itemSubtotalAfterAdditionalCost(index) / qty);
+};
+
+const amountPayable = computed(() => {
+  return roundAmount(itemTotal.value + toNumber(assetPurchaseForm.additional_cost) + toNumber(assetPurchaseForm.rounding));
+});
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+watch(showAssetModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('asset-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(
+  assetPurchaseForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_PURCHASE_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+
+  assetPurchaseForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  await loadSupplierDDL();
+});
+
+const setCode = () => {
+  assetPurchaseForm.forgetError('code');
+  assetPurchaseForm.setData({
+    code: assetPurchaseForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('ASSET_PURCHASE_CREATE') as Record<string, unknown>;
+  if (!data) return;
+  assetPurchaseForm.setData(data);
+};
+
+const loadSupplierDDL = async (search = supplierSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: 1,
+    include_id: assetPurchaseForm.supplier_id ?? undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `[${item.code}] ${item.name}`,
+    })) as DropDownOption[];
+  } else {
+    supplierDDL.value = [];
+  }
+};
+
+const searchAssets = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingAsset.value = true;
+
+  const result = await assetService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: assetSearchText.value,
+    asset_category_id: undefined,
+    asset_unit_id: undefined,
+    status: 1,
+    include_id: undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingAsset.value = false;
+
+  if (result.success && result.data) {
+    assetOptions.value = result.data.data.map((item) => ({
+      asset_id: item.id,
+      asset_code: item.code,
+      asset_name: item.name,
+      asset_category_name: item.asset_category?.name ?? '',
+      asset_unit_name: item.asset_unit?.name ?? '',
+    }));
+  } else {
+    assetOptions.value = [];
+  }
+};
+
+const selectAsset = (option: AssetOption) => {
+  const baseData: Partial<AssetPurchaseItemFormItem> = {
+    asset_id: option.asset_id,
+    asset_code: option.asset_code,
+    asset_name: option.asset_name,
+    asset_category_name: option.asset_category_name,
+    asset_unit_name: option.asset_unit_name,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingAssetIndex.value === null) {
+    const item: AssetPurchaseItemFormItem = {
+      qty: 0,
+      unit_price: 0,
+      remarks: '',
+      ...baseData,
+    } as AssetPurchaseItemFormItem;
+
+    assetPurchaseForm.items.push(item);
+    itemsRemarksExpanded.value.push(false);
+    targetIndex = assetPurchaseForm.items.length - 1;
+  } else {
+    const index = editingAssetIndex.value;
+    const current = assetPurchaseForm.items[index] as AssetPurchaseItemFormItem;
+    assetPurchaseForm.items[index] = { ...current, ...baseData };
+    targetIndex = index;
+  }
+
+  showAssetModal.value = false;
+  editingAssetIndex.value = null;
+  itemQtyToFocus.value = targetIndex;
+};
+
+const handleAssetModalAfterLeave = () => {
+  const index = itemQtyToFocus.value;
+  itemQtyToFocus.value = null;
+  if (index === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`asset-purchase-qty-${index}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addAsset = () => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  editingAssetIndex.value = null;
+  showAssetModal.value = true;
+};
+
+const changeAsset = (index: number) => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  editingAssetIndex.value = index;
+  showAssetModal.value = true;
+};
+
+const addAssetSerial = (index: number) => {
+  const item = itemsForm.value[index];
+  if (!item) return;
+  item.serials.push({ serial: '' });
+  assetPurchaseForm.validate(`items.${index}.serials` as any);
+};
+
+const removeAssetSerial = (index: number, serialIndex: number) => {
+  const item = itemsForm.value[index];
+  if (!item) return;
+  item.serials.splice(serialIndex, 1);
+  assetPurchaseForm.validate(`items.${index}.serials` as any);
+};
+
+const toggleAssetRemarks = (index: number) => {
+  itemsRemarksExpanded.value[index] = !(itemsRemarksExpanded.value[index] ?? false);
+};
+
+const removeAsset = (index: number) => {
+  assetPurchaseForm.items.splice(index, 1);
+  itemsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(assetPurchaseForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      assetPurchaseForm.forgetError(key as any);
+    }
+  });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const onSubmit = async () => {
+  const originalItems = assetPurchaseForm.items as AssetPurchaseItemFormItem[];
+  const cleanedItems = originalItems.map((item) => ({
+    qty: item.qty,
+    asset_id: item.asset_id,
+    unit_price: item.unit_price,
+    remarks: item.remarks,
+    serials: item.serials.map((serialItem) => ({ serial: serialItem.serial })),
+  }));
+
+  assetPurchaseForm.items = cleanedItems as any;
+
+  emits('loading-state', true);
+
+  try {
+    await assetPurchaseForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-asset-purchase-list' });
+  } catch (error) {
+    assetPurchaseForm.items = originalItems as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="assetPurchaseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="assetPurchaseForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="assetPurchaseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('code') }">
+                {{ t('views.asset_purchase.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="assetPurchaseForm.code"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('code') }"
+                :placeholder="t('views.asset_purchase.fields.code')"
+                @set-auto="setCode"
+                @change="assetPurchaseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('date') }">
+                {{ t('views.asset_purchase.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="assetPurchaseForm.date"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('date') }"
+                :placeholder="t('views.asset_purchase.fields.date')"
+                @change="assetPurchaseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('due_days') }">
+                {{ t('views.asset_purchase.fields.due_days') }}
+              </FormLabel>
+              <FormInput
+                v-model="assetPurchaseForm.due_days"
+                type="number"
+                min="0"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('due_days') }"
+                @change="assetPurchaseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('supplier_id') }">
+                {{ t('views.asset_purchase.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="assetPurchaseForm.supplier_id"
+                v-model:search="supplierSearch"
+                :options="supplierOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('supplier_id') }"
+                @search="loadSupplierDDL"
+                @change="assetPurchaseForm.validate('supplier_id')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.supplier_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('remarks') }">
+                {{ t('views.asset_purchase.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="assetPurchaseForm.remarks"
+                rows="2"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('remarks') }"
+                :placeholder="t('views.asset_purchase.fields.remarks')"
+                @change="assetPurchaseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">
+                {{ t('views.asset_purchase.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="assetPurchaseForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div v-if="assetPurchaseForm.items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-5">
+            <div
+              v-for="(item, index) in itemsForm"
+              :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.asset_purchase_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary" @click="toggleAssetRemarks(index)">
+                    {{ itemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeAsset(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-7">
+                  <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.asset_id` as any) }">
+                    {{ t('views.asset_purchase.table.cols.asset') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800">
+                        {{ item.asset_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1" @click="changeAsset(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.asset_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    [{{ item.asset_code }}] {{ item.asset_category_name }}{{ item.asset_unit_name ? ` | ${item.asset_unit_name}` : '' }}
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.qty` as any) }">
+                    {{ t('views.asset_purchase_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`asset-purchase-qty-${index}`"
+                    v-model="item.qty"
+                    :class="['text-right', { 'border-danger': assetPurchaseForm.invalid(`items.${index}.qty` as any) }]"
+                    @change="
+                      assetPurchaseForm.validate(`items.${index}.qty` as any);
+                      assetPurchaseForm.validate(`items.${index}.serials` as any);
+                    "
+                  />
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.qty`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.unit_price` as any) }">
+                    {{ t('views.asset_purchase_item.fields.unit_price') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    v-model="item.unit_price"
+                    :class="['text-right', { 'border-danger': assetPurchaseForm.invalid(`items.${index}.unit_price` as any) }]"
+                    @change="assetPurchaseForm.validate(`items.${index}.unit_price` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.unit_price`]" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.asset_purchase_item.fields.subtotal') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemSubtotal(item)" disabled />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.asset_purchase.summary.allocated_additional_cost') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemAllocatedAdditionalCost(index)" disabled />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.asset_purchase.summary.subtotal_after_additional_cost') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemSubtotalAfterAdditionalCost(index)" disabled />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.asset_purchase.summary.unit_acquisition_cost') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemUnitAcquisitionCost(index)" disabled />
+                </div>
+
+                <div class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.serials` as any) }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addAssetSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="serialIndex" class="flex gap-2">
+                      <FormInput
+                        v-model="serial.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{ 'border-danger': assetPurchaseForm.invalid(`items.${index}.serials.${serialIndex}.serial` as any) }"
+                        @change="
+                          assetPurchaseForm.validate(`items.${index}.serials.${serialIndex}.serial` as any);
+                          assetPurchaseForm.validate(`items.${index}.serials` as any);
+                        "
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeAssetSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, serialIndex) in item.serials"
+                    :key="`asset-purchase-serial-error-${index}-${serialIndex}`"
+                    :messages="(assetPurchaseForm.errors as any)[`items.${index}.serials.${serialIndex}.serial`]"
+                  />
+                </div>
+
+                <div v-if="itemsRemarksExpanded[index]" class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.remarks` as any) }">
+                    {{ t('views.asset_purchase_item.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    rows="2"
+                    v-model="assetPurchaseForm.items[index].remarks"
+                    :class="{ 'border-danger': assetPurchaseForm.invalid(`items.${index}.remarks` as any) }"
+                    @change="assetPurchaseForm.validate(`items.${index}.remarks` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.remarks`]" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addAsset">
+              {{ t('views.asset_purchase_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('additional_cost') }">
+                {{ t('views.asset_purchase.fields.additional_cost') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="assetPurchaseForm.additional_cost"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('additional_cost') }"
+                @change="assetPurchaseForm.validate('additional_cost')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.additional_cost" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('rounding') }">
+                {{ t('views.asset_purchase.fields.rounding') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="assetPurchaseForm.rounding"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('rounding') }"
+                @change="assetPurchaseForm.validate('rounding')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.rounding" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.asset_purchase.fields.item_total') }}</FormLabel>
+              <FormInputCurrency :model-value="itemTotal" disabled />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.asset_purchase.fields.amount_payable') }}</FormLabel>
+              <FormInputCurrency :model-value="amountPayable" disabled />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4 p-5">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="assetPurchaseForm.validating || assetPurchaseForm.hasErrors"
+          >
+            <Lucide v-if="assetPurchaseForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+
+    <Dialog
+      size="xl"
+      :open="showAssetModal"
+      @close="
+        () => {
+          showAssetModal = false;
+        }
+      "
+      @after-leave="handleAssetModalAfterLeave"
+    >
+      <Dialog.Panel>
+        <div class="p-5">
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>
+              {{ t('views.asset_purchase.table.title') }}
+            </FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showAssetModal = false">
+              <Lucide icon="X" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput
+              id="asset-search-input"
+              v-model="assetSearchText"
+              type="text"
+              :placeholder="t('components.search-box.placeholder.search')"
+              @keyup.enter="searchAssets"
+            />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchAssets" :disabled="isSearchingAsset">
+              <template v-if="isSearchingAsset">
+                <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+              </template>
+              <template v-else>
+                {{ t('components.buttons.search') }}
+              </template>
+            </Button>
+          </div>
+
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.code') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.name') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_category') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_unit') }}</th>
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="assetOptions.length === 0">
+                  <td colspan="5" class="px-3 py-4 text-center text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </td>
+                </tr>
+                <tr
+                  v-for="(option, optionIndex) in assetOptions"
+                  :key="optionIndex"
+                  class="border-t border-slate-200/60 dark:border-darkmode-400"
+                >
+                  <td class="px-3 py-2">{{ option.asset_code }}</td>
+                  <td class="px-3 py-2">{{ option.asset_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_category_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_unit_name }}</td>
+                  <td class="px-3 py-2 text-right">
+                    <Button type="button" variant="primary" size="sm" @click="selectAsset(option)">
+                      {{ t('components.buttons.select') }}
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  </form>
+</template>
diff --git a/web/src/pages/asset-purchase/AssetPurchaseEdit.vue b/web/src/pages/asset-purchase/AssetPurchaseEdit.vue
new file mode 100644
index 000000000..35a5de8be
--- /dev/null
+++ b/web/src/pages/asset-purchase/AssetPurchaseEdit.vue
@@ -0,0 +1,851 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import type { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import AssetService from '@/services/AssetService';
+import AssetPurchaseService from '@/services/AssetPurchaseService';
+import CacheService from '@/services/CacheService';
+import SupplierService from '@/services/SupplierService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AssetPurchase } from '@/types/models/AssetPurchase';
+import type { AssetPurchaseItemNestedUpdateRequest } from '@/types/services/asset-purchase/AssetPurchaseRequest';
+import { convertErrorTypeToAlertListType, formatDate } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type AssetPurchaseItemFormItem = {
+  id: string | null;
+  qty: AssetPurchaseItemNestedUpdateRequest['qty'];
+  asset_id: AssetPurchaseItemNestedUpdateRequest['asset_id'];
+  asset_code?: string | null;
+  asset_name?: string | null;
+  asset_category_name?: string | null;
+  asset_unit_name?: string | null;
+  unit_price: AssetPurchaseItemNestedUpdateRequest['unit_price'];
+  remarks: AssetPurchaseItemNestedUpdateRequest['remarks'];
+  serials: { id: string | null; serial: string }[];
+  delete_serial_ids: string[];
+};
+
+type AssetOption = {
+  asset_id: string;
+  asset_code: string;
+  asset_name: string;
+  asset_category_name: string;
+  asset_unit_name: string;
+};
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const assetPurchaseService = new AssetPurchaseService();
+const assetPurchaseForm = assetPurchaseService.useAssetPurchaseEditForm(route.params.ulid as string);
+const assetService = new AssetService();
+const supplierService = new SupplierService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.asset_purchase.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.asset_purchase.field_groups.asset_purchase_data', state: CardState.Expanded },
+  { title: 'views.asset_purchase.field_groups.items', state: CardState.Expanded },
+  { title: 'views.asset_purchase.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showAssetModal = ref<boolean>(false);
+const assetSearchText = ref<string>('');
+const isSearchingAsset = ref<boolean>(false);
+const assetOptions = ref<Array<AssetOption>>([]);
+const editingAssetIndex = ref<number | null>(null);
+const itemQtyToFocus = ref<number | null>(null);
+const itemsRemarksExpanded = ref<boolean[]>([]);
+
+const itemsForm = computed<AssetPurchaseItemFormItem[]>(
+  () => assetPurchaseForm.items as AssetPurchaseItemFormItem[],
+);
+
+const toNumber = (value: unknown): number => {
+  const parsed = Number(value ?? 0);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+const roundAmount = (value: number): number => {
+  return Math.round((value + Number.EPSILON) * 100000000) / 100000000;
+};
+
+const itemSubtotal = (item: AssetPurchaseItemFormItem): number => {
+  return roundAmount(toNumber(item.qty) * toNumber(item.unit_price));
+};
+
+const itemTotal = computed(() => {
+  return roundAmount(itemsForm.value.reduce((sum, item) => sum + itemSubtotal(item), 0));
+});
+
+const itemAllocatedAdditionalCost = (index: number): number => {
+  const additionalCost = toNumber(assetPurchaseForm.additional_cost);
+  const total = itemTotal.value;
+
+  if (total <= 0 || additionalCost === 0) {
+    return 0;
+  }
+
+  if (index === itemsForm.value.length - 1) {
+    const allocatedBefore = itemsForm.value
+      .slice(0, index)
+      .reduce((sum, item, currentIndex) => sum + itemAllocatedAdditionalCost(currentIndex), 0);
+    return roundAmount(additionalCost - allocatedBefore);
+  }
+
+  return roundAmount((additionalCost * itemSubtotal(itemsForm.value[index])) / total);
+};
+
+const itemSubtotalAfterAdditionalCost = (index: number): number => {
+  return roundAmount(itemSubtotal(itemsForm.value[index]) + itemAllocatedAdditionalCost(index));
+};
+
+const itemUnitAcquisitionCost = (index: number): number => {
+  const qty = toNumber(itemsForm.value[index]?.qty);
+  if (qty <= 0) return 0;
+  return roundAmount(itemSubtotalAfterAdditionalCost(index) / qty);
+};
+
+const amountPayable = computed(() => {
+  return roundAmount(itemTotal.value + toNumber(assetPurchaseForm.additional_cost) + toNumber(assetPurchaseForm.rounding));
+});
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+watch(showAssetModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('asset-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(
+  assetPurchaseForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_PURCHASE_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await loadData();
+    await loadSupplierDDL();
+  } finally {
+    emits('loading-state', false);
+  }
+});
+
+const setCode = () => {
+  assetPurchaseForm.forgetError('code');
+  assetPurchaseForm.setData({
+    code: assetPurchaseForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const loadSupplierDDL = async (search = supplierSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: 1,
+    include_id: assetPurchaseForm.supplier_id ?? undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `[${item.code}] ${item.name}`,
+    })) as DropDownOption[];
+  } else {
+    supplierDDL.value = [];
+  }
+};
+
+const loadData = async () => {
+  const ulid = route.params.ulid as string | undefined;
+  if (!ulid) return;
+
+  const result = await assetPurchaseService.read(ulid);
+  if (!result.success || !result.data) return;
+
+  const data = result.data as AssetPurchase;
+  const items: AssetPurchaseItemFormItem[] = (data.items || []).map((item) => ({
+    id: item.id ?? null,
+    qty: item.qty,
+    asset_id: item.asset?.id ?? '',
+    asset_code: item.asset?.code ?? '',
+    asset_name: item.asset?.name ?? '',
+    asset_category_name: item.asset?.asset_category?.name ?? '',
+    asset_unit_name: item.asset?.asset_unit?.name ?? '',
+    unit_price: item.unit_price,
+    remarks: item.remarks ?? '',
+    serials: item.serials ? item.serials.map((serial) => ({ id: serial.id ?? null, serial: serial.serial })) : [],
+    delete_serial_ids: [],
+  }));
+
+  assetPurchaseForm.setData({
+    company_id: data.company.id,
+    branch_id: data.branch.id,
+    code: data.code,
+    date: formatDate(data.date, 'YYYY-MM-DD HH:mm:ss'),
+    due_days: data.due_days,
+    supplier_id: data.supplier?.id ?? null,
+    remarks: data.remarks ?? '',
+    is_posted: data.is_posted,
+    additional_cost: data.additional_cost,
+    rounding: data.rounding,
+    delete_item_ids: [],
+    items: items as any,
+  } as any);
+
+  itemsRemarksExpanded.value = items.map(() => false);
+};
+
+const searchAssets = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingAsset.value = true;
+
+  const result = await assetService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: assetSearchText.value,
+    asset_category_id: undefined,
+    asset_unit_id: undefined,
+    status: 1,
+    include_id: undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingAsset.value = false;
+
+  if (result.success && result.data) {
+    assetOptions.value = result.data.data.map((item) => ({
+      asset_id: item.id,
+      asset_code: item.code,
+      asset_name: item.name,
+      asset_category_name: item.asset_category?.name ?? '',
+      asset_unit_name: item.asset_unit?.name ?? '',
+    }));
+  } else {
+    assetOptions.value = [];
+  }
+};
+
+const selectAsset = (option: AssetOption) => {
+  const baseData: Partial<AssetPurchaseItemFormItem> = {
+    asset_id: option.asset_id,
+    asset_code: option.asset_code,
+    asset_name: option.asset_name,
+    asset_category_name: option.asset_category_name,
+    asset_unit_name: option.asset_unit_name,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingAssetIndex.value === null) {
+    const item: AssetPurchaseItemFormItem = {
+      id: null,
+      qty: 0,
+      unit_price: 0,
+      remarks: '',
+      delete_serial_ids: [],
+      ...baseData,
+    } as AssetPurchaseItemFormItem;
+
+    assetPurchaseForm.items.push(item);
+    itemsRemarksExpanded.value.push(false);
+    targetIndex = assetPurchaseForm.items.length - 1;
+  } else {
+    const index = editingAssetIndex.value;
+    const current = assetPurchaseForm.items[index] as AssetPurchaseItemFormItem;
+    const deleteSerialIds = [
+      ...current.delete_serial_ids,
+      ...current.serials.filter((serial) => !!serial.id).map((serial) => serial.id as string),
+    ];
+
+    assetPurchaseForm.items[index] = {
+      ...current,
+      ...baseData,
+      delete_serial_ids: Array.from(new Set(deleteSerialIds)),
+    };
+    targetIndex = index;
+  }
+
+  showAssetModal.value = false;
+  editingAssetIndex.value = null;
+  itemQtyToFocus.value = targetIndex;
+};
+
+const handleAssetModalAfterLeave = () => {
+  const index = itemQtyToFocus.value;
+  itemQtyToFocus.value = null;
+  if (index === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`asset-purchase-edit-qty-${index}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addAsset = () => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  editingAssetIndex.value = null;
+  showAssetModal.value = true;
+};
+
+const changeAsset = (index: number) => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  editingAssetIndex.value = index;
+  showAssetModal.value = true;
+};
+
+const addAssetSerial = (index: number) => {
+  const item = itemsForm.value[index];
+  if (!item) return;
+  item.serials.push({ id: null, serial: '' });
+  assetPurchaseForm.validate(`items.${index}.serials` as any);
+};
+
+const removeAssetSerial = (index: number, serialIndex: number) => {
+  const item = itemsForm.value[index];
+  if (!item) return;
+
+  const serial = item.serials[serialIndex];
+  if (serial?.id) {
+    item.delete_serial_ids.push(serial.id);
+    item.delete_serial_ids = Array.from(new Set(item.delete_serial_ids));
+  }
+
+  item.serials.splice(serialIndex, 1);
+  assetPurchaseForm.validate(`items.${index}.serials` as any);
+};
+
+const toggleAssetRemarks = (index: number) => {
+  itemsRemarksExpanded.value[index] = !(itemsRemarksExpanded.value[index] ?? false);
+};
+
+const removeAsset = (index: number) => {
+  const item = itemsForm.value[index];
+  if (item?.id) {
+    assetPurchaseForm.delete_item_ids.push(item.id);
+    assetPurchaseForm.delete_item_ids = Array.from(new Set(assetPurchaseForm.delete_item_ids));
+  }
+
+  assetPurchaseForm.items.splice(index, 1);
+  itemsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(assetPurchaseForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      assetPurchaseForm.forgetError(key as any);
+    }
+  });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const onSubmit = async () => {
+  const originalItems = assetPurchaseForm.items as AssetPurchaseItemFormItem[];
+  const cleanedItems = originalItems.map((item) => ({
+    id: item.id,
+    qty: item.qty,
+    asset_id: item.asset_id,
+    unit_price: item.unit_price,
+    remarks: item.remarks,
+    delete_serial_ids: item.delete_serial_ids,
+    serials: item.serials.map((serialItem) => ({
+      id: serialItem.id,
+      serial: serialItem.serial,
+    })),
+  }));
+
+  assetPurchaseForm.items = cleanedItems as any;
+
+  emits('loading-state', true);
+
+  try {
+    await assetPurchaseForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-asset-purchase-list' });
+  } catch (error) {
+    assetPurchaseForm.items = originalItems as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="assetPurchaseEditForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="assetPurchaseForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="assetPurchaseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('code') }">
+                {{ t('views.asset_purchase.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="assetPurchaseForm.code"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('code') }"
+                :placeholder="t('views.asset_purchase.fields.code')"
+                @set-auto="setCode"
+                @change="assetPurchaseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('date') }">
+                {{ t('views.asset_purchase.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="assetPurchaseForm.date"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('date') }"
+                :placeholder="t('views.asset_purchase.fields.date')"
+                @change="assetPurchaseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('due_days') }">
+                {{ t('views.asset_purchase.fields.due_days') }}
+              </FormLabel>
+              <FormInput
+                v-model="assetPurchaseForm.due_days"
+                type="number"
+                min="0"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('due_days') }"
+                @change="assetPurchaseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('supplier_id') }">
+                {{ t('views.asset_purchase.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="assetPurchaseForm.supplier_id"
+                v-model:search="supplierSearch"
+                :options="supplierOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('supplier_id') }"
+                @search="loadSupplierDDL"
+                @change="assetPurchaseForm.validate('supplier_id')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.supplier_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('remarks') }">
+                {{ t('views.asset_purchase.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="assetPurchaseForm.remarks"
+                rows="2"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('remarks') }"
+                :placeholder="t('views.asset_purchase.fields.remarks')"
+                @change="assetPurchaseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">
+                {{ t('views.asset_purchase.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="assetPurchaseForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div v-if="assetPurchaseForm.items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-5">
+            <div
+              v-for="(item, index) in itemsForm"
+              :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.asset_purchase_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary" @click="toggleAssetRemarks(index)">
+                    {{ itemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeAsset(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-7">
+                  <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.asset_id` as any) }">
+                    {{ t('views.asset_purchase.table.cols.asset') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800">
+                        {{ item.asset_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1" @click="changeAsset(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.asset_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    [{{ item.asset_code }}] {{ item.asset_category_name }}{{ item.asset_unit_name ? ` | ${item.asset_unit_name}` : '' }}
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.qty` as any) }">
+                    {{ t('views.asset_purchase_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`asset-purchase-edit-qty-${index}`"
+                    v-model="item.qty"
+                    :class="['text-right', { 'border-danger': assetPurchaseForm.invalid(`items.${index}.qty` as any) }]"
+                    @change="
+                      assetPurchaseForm.validate(`items.${index}.qty` as any);
+                      assetPurchaseForm.validate(`items.${index}.serials` as any);
+                    "
+                  />
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.qty`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.unit_price` as any) }">
+                    {{ t('views.asset_purchase_item.fields.unit_price') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    v-model="item.unit_price"
+                    :class="['text-right', { 'border-danger': assetPurchaseForm.invalid(`items.${index}.unit_price` as any) }]"
+                    @change="assetPurchaseForm.validate(`items.${index}.unit_price` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.unit_price`]" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.asset_purchase_item.fields.subtotal') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemSubtotal(item)" disabled />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.asset_purchase.summary.allocated_additional_cost') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemAllocatedAdditionalCost(index)" disabled />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.asset_purchase.summary.subtotal_after_additional_cost') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemSubtotalAfterAdditionalCost(index)" disabled />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.asset_purchase.summary.unit_acquisition_cost') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemUnitAcquisitionCost(index)" disabled />
+                </div>
+
+                <div class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.serials` as any) }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addAssetSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="serialIndex" class="flex gap-2">
+                      <FormInput
+                        v-model="serial.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{ 'border-danger': assetPurchaseForm.invalid(`items.${index}.serials.${serialIndex}.serial` as any) }"
+                        @change="
+                          assetPurchaseForm.validate(`items.${index}.serials.${serialIndex}.serial` as any);
+                          assetPurchaseForm.validate(`items.${index}.serials` as any);
+                        "
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeAssetSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, serialIndex) in item.serials"
+                    :key="`asset-purchase-edit-serial-error-${index}-${serialIndex}`"
+                    :messages="(assetPurchaseForm.errors as any)[`items.${index}.serials.${serialIndex}.serial`]"
+                  />
+                </div>
+
+                <div v-if="itemsRemarksExpanded[index]" class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid(`items.${index}.remarks` as any) }">
+                    {{ t('views.asset_purchase_item.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    rows="2"
+                    v-model="assetPurchaseForm.items[index].remarks"
+                    :class="{ 'border-danger': assetPurchaseForm.invalid(`items.${index}.remarks` as any) }"
+                    @change="assetPurchaseForm.validate(`items.${index}.remarks` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetPurchaseForm.errors as any)[`items.${index}.remarks`]" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addAsset">
+              {{ t('views.asset_purchase_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('additional_cost') }">
+                {{ t('views.asset_purchase.fields.additional_cost') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="assetPurchaseForm.additional_cost"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('additional_cost') }"
+                @change="assetPurchaseForm.validate('additional_cost')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.additional_cost" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetPurchaseForm.invalid('rounding') }">
+                {{ t('views.asset_purchase.fields.rounding') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="assetPurchaseForm.rounding"
+                :class="{ 'border-danger': assetPurchaseForm.invalid('rounding') }"
+                @change="assetPurchaseForm.validate('rounding')"
+              />
+              <FormErrorMessages :messages="assetPurchaseForm.errors.rounding" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.asset_purchase.fields.item_total') }}</FormLabel>
+              <FormInputCurrency :model-value="itemTotal" disabled />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.asset_purchase.fields.amount_payable') }}</FormLabel>
+              <FormInputCurrency :model-value="amountPayable" disabled />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4 p-5">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="assetPurchaseForm.validating || assetPurchaseForm.hasErrors"
+          >
+            <Lucide v-if="assetPurchaseForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+
+    <Dialog
+      size="xl"
+      :open="showAssetModal"
+      @close="
+        () => {
+          showAssetModal = false;
+        }
+      "
+      @after-leave="handleAssetModalAfterLeave"
+    >
+      <Dialog.Panel>
+        <div class="p-5">
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>
+              {{ t('views.asset_purchase.table.title') }}
+            </FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showAssetModal = false">
+              <Lucide icon="X" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput
+              id="asset-search-input"
+              v-model="assetSearchText"
+              type="text"
+              :placeholder="t('components.search-box.placeholder.search')"
+              @keyup.enter="searchAssets"
+            />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchAssets" :disabled="isSearchingAsset">
+              <template v-if="isSearchingAsset">
+                <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+              </template>
+              <template v-else>
+                {{ t('components.buttons.search') }}
+              </template>
+            </Button>
+          </div>
+
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.code') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.name') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_category') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_unit') }}</th>
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="assetOptions.length === 0">
+                  <td colspan="5" class="px-3 py-4 text-center text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </td>
+                </tr>
+                <tr
+                  v-for="(option, optionIndex) in assetOptions"
+                  :key="optionIndex"
+                  class="border-t border-slate-200/60 dark:border-darkmode-400"
+                >
+                  <td class="px-3 py-2">{{ option.asset_code }}</td>
+                  <td class="px-3 py-2">{{ option.asset_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_category_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_unit_name }}</td>
+                  <td class="px-3 py-2 text-right">
+                    <Button type="button" variant="primary" size="sm" @click="selectAsset(option)">
+                      {{ t('components.buttons.select') }}
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  </form>
+</template>
diff --git a/web/src/pages/asset-purchase/AssetPurchaseIndex.vue b/web/src/pages/asset-purchase/AssetPurchaseIndex.vue
new file mode 100644
index 000000000..e01787729
--- /dev/null
+++ b/web/src/pages/asset-purchase/AssetPurchaseIndex.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.asset_purchase.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const assetPurchaseNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[assetPurchaseNotification]', (el: NotificationElement) => {
+  assetPurchaseNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-asset-purchase-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-asset-purchase-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.asset_purchase.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.asset_purchase.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.asset_purchase.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (assetPurchaseNotification.value) {
+    assetPurchaseNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('ASSET_PURCHASE_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('ASSET_PURCHASE_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="assetPurchaseNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/asset-purchase/AssetPurchaseList.vue b/web/src/pages/asset-purchase/AssetPurchaseList.vue
new file mode 100644
index 000000000..4dee85329
--- /dev/null
+++ b/web/src/pages/asset-purchase/AssetPurchaseList.vue
@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import { FormInputDateTime, FormLabel } from '@/components/Base/Form';
+import AssetPurchaseService from '@/services/AssetPurchaseService';
+import type { AssetPurchase } from '@/types/models/AssetPurchase';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AssetPurchaseReadAnyPaginateRequest } from '@/types/services/asset-purchase/AssetPurchaseRequest';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { formatDate, formatCurrency } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const assetPurchaseService = new AssetPurchaseService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+
+const assetPurchaseLists = ref<Collection<Array<AssetPurchase>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getAssetPurchases('', true, 1, 10);
+});
+
+const getAssetPurchases = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: AssetPurchaseReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value || null,
+    end_date: endDate.value || null,
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result: ServiceResponse<Collection<Array<AssetPurchase>> | null> =
+    await assetPurchaseService.readAnyPaginate(request);
+
+  if (result.success && result.data) {
+    assetPurchaseLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getAssetPurchases(data.search.text, true, data.pagination.page, data.pagination.per_page);
+};
+
+const handleDateFilterChange = async () => {
+  const perPage = assetPurchaseLists.value?.meta.per_page || 10;
+  await getAssetPurchases(searchText.value, true, 1, perPage);
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!assetPurchaseLists.value) return;
+
+  const ulid = assetPurchaseLists.value.data[idx].ulid;
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({
+    name: 'side-menu-asset-purchase-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!assetPurchaseLists.value) return;
+
+  deleteUlid.value = assetPurchaseLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await assetPurchaseService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getAssetPurchases(searchText.value, true, 1, assetPurchaseLists.value?.meta.per_page || 10);
+    showNotification(
+      t('views.asset_purchase.alert.delete.title'),
+      t('views.asset_purchase.alert.delete.message'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const notification: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', notification);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const alertPlaceholder: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', alertPlaceholder);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.asset_purchase.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.asset_purchase.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="assetPurchaseLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="assetPurchaseLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="assetPurchaseLists ? assetPurchaseLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_purchase.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_purchase.fields.code') }}:
+              {{ (item as AssetPurchase).code ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_purchase.fields.date') }}:
+              {{ (item as AssetPurchase).date ? formatDate((item as AssetPurchase).date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_purchase.fields.due_days') }}:
+              {{ (item as AssetPurchase).due_days ?? 0 }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_purchase.fields.supplier_id') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              [{{ (item as AssetPurchase).supplier?.code ?? '-' }}] {{ (item as AssetPurchase).supplier?.name ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_purchase.fields.item_total') }}:
+              {{ formatCurrency((item as AssetPurchase).item_total ?? 0) }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_purchase.fields.amount_payable') }}:
+              {{ formatCurrency((item as AssetPurchase).amount_payable ?? 0) }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-3 md:col-span-2 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_purchase.fields.is_posted') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap mb-1">
+              <span class="inline-flex items-center">
+                <Lucide v-if="(item as AssetPurchase).is_posted" icon="CheckCircle" class="w-4 h-4 text-success" />
+                <Lucide v-else icon="X" class="w-4 h-4 text-danger" />
+              </span>
+            </div>
+            <div v-if="(item as AssetPurchase).remarks?.trim()" class="text-slate-500 text-xs break-all">
+              {{ t('views.asset_purchase.fields.remarks') }}:
+              {{ (item as AssetPurchase).remarks }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-1 md:col-span-2 flex justify-end items-start gap-2">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+
+          <div
+            v-if="expandDetail === index"
+            class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3"
+          >
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_purchase.field_groups.items') }}
+            </div>
+            <div v-if="((item as AssetPurchase).items?.length ?? 0) === 0" class="text-slate-500 text-xs italic">
+              {{ t('components.data-list.data_not_found') }}
+            </div>
+            <div v-else class="space-y-2 text-xs">
+              <div v-for="(assetItem, assetIdx) in (item as AssetPurchase).items" :key="assetItem.ulid" class="flex gap-2">
+                <div class="w-6 text-right text-slate-500">{{ assetIdx + 1 }}.</div>
+                <div class="flex-1">
+                  <div class="font-medium break-all">
+                    [{{ assetItem.asset.code }}] {{ assetItem.asset.name }}
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.asset_purchase.table.cols.qty') }}:
+                    <span class="font-medium">{{ formatCurrency(assetItem.qty) }}</span>
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.asset_purchase.table.cols.unit_price') }}:
+                    <span class="font-medium">{{ formatCurrency(assetItem.unit_price) }}</span>
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.asset_purchase.table.cols.subtotal') }}:
+                    <span class="font-medium">{{ formatCurrency(assetItem.subtotal_after_additional_cost) }}</span>
+                  </div>
+                  <div class="text-slate-500 mt-0.5 break-all">
+                    {{ t('views.product.fields.serial_number') }}:
+                    <span v-if="assetItem.serials?.length">{{ assetItem.serials.map((serial) => serial.serial).join(', ') }}</span>
+                    <span v-else>{{ t('components.data-list.data_not_found') }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog
+    :open="deleteModalShow"
+    @close="
+      () => {
+        deleteModalShow = false;
+      }
+    "
+  >
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">
+          {{ t('components.delete-modal.title') }}
+        </div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button
+          type="button"
+          variant="outline-secondary"
+          @click="
+            () => {
+              deleteModalShow = false;
+            }
+          "
+          class="w-24 mr-1"
+        >
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/asset-sale/AssetSaleCreate.vue b/web/src/pages/asset-sale/AssetSaleCreate.vue
new file mode 100644
index 000000000..4cb60a9dd
--- /dev/null
+++ b/web/src/pages/asset-sale/AssetSaleCreate.vue
@@ -0,0 +1,606 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import type { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import AssetService from '@/services/AssetService';
+import AssetSaleService from '@/services/AssetSaleService';
+import CacheService from '@/services/CacheService';
+import CustomerService from '@/services/CustomerService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AssetSaleItemNestedStoreRequest } from '@/types/services/asset-sale/AssetSaleRequest';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type AssetSaleItemFormItem = {
+  qty: AssetSaleItemNestedStoreRequest['qty'];
+  asset_id: AssetSaleItemNestedStoreRequest['asset_id'];
+  asset_code?: string | null;
+  asset_name?: string | null;
+  asset_category_name?: string | null;
+  asset_unit_name?: string | null;
+  unit_price: AssetSaleItemNestedStoreRequest['unit_price'];
+  remarks: AssetSaleItemNestedStoreRequest['remarks'];
+  serials: { serial: string }[];
+};
+
+type AssetOption = {
+  asset_id: string;
+  asset_code: string;
+  asset_name: string;
+  asset_category_name: string;
+  asset_unit_name: string;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const assetSaleService = new AssetSaleService();
+const assetSaleForm = assetSaleService.useAssetSaleCreateForm();
+const assetService = new AssetService();
+const customerService = new CustomerService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.asset_sale.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.asset_sale.field_groups.asset_sale_data', state: CardState.Expanded },
+  { title: 'views.asset_sale.field_groups.items', state: CardState.Expanded },
+  { title: 'views.asset_sale.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const customerDDL = ref<Array<DropDownOption> | null>(null);
+const customerSearch = ref('');
+const customerOptions = computed(() =>
+  (customerDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showAssetModal = ref<boolean>(false);
+const assetSearchText = ref<string>('');
+const isSearchingAsset = ref<boolean>(false);
+const assetOptions = ref<Array<AssetOption>>([]);
+const editingAssetIndex = ref<number | null>(null);
+const itemQtyToFocus = ref<number | null>(null);
+const itemsRemarksExpanded = ref<boolean[]>([]);
+
+const itemsForm = computed<AssetSaleItemFormItem[]>(
+  () => assetSaleForm.items as AssetSaleItemFormItem[],
+);
+
+const toNumber = (value: unknown): number => {
+  const parsed = Number(value ?? 0);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+const roundAmount = (value: number): number => {
+  return Math.round((value + Number.EPSILON) * 100000000) / 100000000;
+};
+
+const itemSubtotal = (item: AssetSaleItemFormItem): number => {
+  return roundAmount(toNumber(item.qty) * toNumber(item.unit_price));
+};
+
+const itemTotal = computed(() => roundAmount(itemsForm.value.reduce((sum, item) => sum + itemSubtotal(item), 0)));
+const amountReceivable = computed(() => roundAmount(itemTotal.value + toNumber(assetSaleForm.rounding)));
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+watch(showAssetModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('asset-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(
+  assetSaleForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_SALE_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+
+  loadFromCache();
+
+  assetSaleForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  await loadCustomerDDL();
+});
+
+const setCode = () => {
+  assetSaleForm.forgetError('code');
+  assetSaleForm.setData({ code: assetSaleForm.code === '_AUTO_' ? '' : '_AUTO_' });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('ASSET_SALE_CREATE') as Record<string, unknown>;
+  if (!data) return;
+  assetSaleForm.setData(data);
+};
+
+const loadCustomerDDL = async (search = customerSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await customerService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: 1,
+    include_id: assetSaleForm.customer_id ?? undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    customerDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `[${item.code}] ${item.name}`,
+    })) as DropDownOption[];
+  } else {
+    customerDDL.value = [];
+  }
+};
+
+const searchAssets = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingAsset.value = true;
+
+  const result = await assetService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: assetSearchText.value,
+    asset_category_id: undefined,
+    asset_unit_id: undefined,
+    status: 1,
+    include_id: undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingAsset.value = false;
+
+  if (result.success && result.data) {
+    assetOptions.value = result.data.data.map((item) => ({
+      asset_id: item.id,
+      asset_code: item.code,
+      asset_name: item.name,
+      asset_category_name: item.asset_category?.name ?? '',
+      asset_unit_name: item.asset_unit?.name ?? '',
+    }));
+  } else {
+    assetOptions.value = [];
+  }
+};
+
+const selectAsset = (option: AssetOption) => {
+  const baseData: Partial<AssetSaleItemFormItem> = {
+    asset_id: option.asset_id,
+    asset_code: option.asset_code,
+    asset_name: option.asset_name,
+    asset_category_name: option.asset_category_name,
+    asset_unit_name: option.asset_unit_name,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingAssetIndex.value === null) {
+    const item: AssetSaleItemFormItem = {
+      qty: 0,
+      unit_price: 0,
+      remarks: '',
+      ...baseData,
+    } as AssetSaleItemFormItem;
+
+    assetSaleForm.items.push(item);
+    itemsRemarksExpanded.value.push(false);
+    targetIndex = assetSaleForm.items.length - 1;
+  } else {
+    const index = editingAssetIndex.value;
+    const current = assetSaleForm.items[index] as AssetSaleItemFormItem;
+    assetSaleForm.items[index] = { ...current, ...baseData };
+    targetIndex = index;
+  }
+
+  showAssetModal.value = false;
+  editingAssetIndex.value = null;
+  itemQtyToFocus.value = targetIndex;
+};
+
+const handleAssetModalAfterLeave = () => {
+  const index = itemQtyToFocus.value;
+  itemQtyToFocus.value = null;
+  if (index === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`asset-sale-qty-${index}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addAsset = () => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  editingAssetIndex.value = null;
+  showAssetModal.value = true;
+};
+
+const changeAsset = (index: number) => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  editingAssetIndex.value = index;
+  showAssetModal.value = true;
+};
+
+const addAssetSerial = (index: number) => {
+  const item = itemsForm.value[index];
+  if (!item) return;
+  item.serials.push({ serial: '' });
+  assetSaleForm.validate(`items.${index}.serials` as any);
+};
+
+const removeAssetSerial = (index: number, serialIndex: number) => {
+  const item = itemsForm.value[index];
+  if (!item) return;
+  item.serials.splice(serialIndex, 1);
+  assetSaleForm.validate(`items.${index}.serials` as any);
+};
+
+const toggleAssetRemarks = (index: number) => {
+  itemsRemarksExpanded.value[index] = !(itemsRemarksExpanded.value[index] ?? false);
+};
+
+const removeAsset = (index: number) => {
+  assetSaleForm.items.splice(index, 1);
+  itemsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(assetSaleForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      assetSaleForm.forgetError(key as any);
+    }
+  });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+
+const onSubmit = async () => {
+  const originalItems = assetSaleForm.items as AssetSaleItemFormItem[];
+  const cleanedItems = originalItems.map((item) => ({
+    qty: item.qty,
+    asset_id: item.asset_id,
+    unit_price: item.unit_price,
+    remarks: item.remarks,
+    serials: item.serials.map((serialItem) => ({ serial: serialItem.serial })),
+  }));
+
+  assetSaleForm.items = cleanedItems as any;
+
+  emits('loading-state', true);
+
+  try {
+    await assetSaleForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-asset-sale-list' });
+  } catch (error) {
+    assetSaleForm.items = originalItems as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="assetSaleForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>{{ selectedUserLocation.company.code }}<br />{{ selectedUserLocation.company.name }}</FormLabel>
+              <FormInput type="hidden" v-model="assetSaleForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>{{ selectedUserLocation.branch.code }}<br />{{ selectedUserLocation.branch.name }}</FormLabel>
+              <FormInput type="hidden" v-model="assetSaleForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('code') }">{{ t('views.asset_sale.fields.code') }}</FormLabel>
+              <FormInputCode
+                v-model="assetSaleForm.code"
+                :class="{ 'border-danger': assetSaleForm.invalid('code') }"
+                :placeholder="t('views.asset_sale.fields.code')"
+                @set-auto="setCode"
+                @change="assetSaleForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetSaleForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('date') }">{{ t('views.asset_sale.fields.date') }}</FormLabel>
+              <FormInputDateTimeAuto
+                v-model="assetSaleForm.date"
+                :class="{ 'border-danger': assetSaleForm.invalid('date') }"
+                :placeholder="t('views.asset_sale.fields.date')"
+                @change="assetSaleForm.validate('date')"
+              />
+              <FormErrorMessages :messages="assetSaleForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('due_days') }">{{ t('views.asset_sale.fields.due_days') }}</FormLabel>
+              <FormInput v-model="assetSaleForm.due_days" type="number" min="0" :class="{ 'border-danger': assetSaleForm.invalid('due_days') }" @change="assetSaleForm.validate('due_days')" />
+              <FormErrorMessages :messages="assetSaleForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('customer_id') }">{{ t('views.asset_sale.fields.customer_id') }}</FormLabel>
+              <FormSelectSearch
+                v-model="assetSaleForm.customer_id"
+                v-model:search="customerSearch"
+                :options="customerOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': assetSaleForm.invalid('customer_id') }"
+                @search="loadCustomerDDL"
+                @change="assetSaleForm.validate('customer_id')"
+              />
+              <FormErrorMessages :messages="assetSaleForm.errors.customer_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('remarks') }">{{ t('views.asset_sale.fields.remarks') }}</FormLabel>
+              <FormTextarea
+                v-model="assetSaleForm.remarks"
+                rows="2"
+                :class="{ 'border-danger': assetSaleForm.invalid('remarks') }"
+                :placeholder="t('views.asset_sale.fields.remarks')"
+                @change="assetSaleForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetSaleForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">{{ t('views.asset_sale.fields.is_posted') }}</FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="assetSaleForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div v-if="assetSaleForm.items.length === 0" class="text-slate-500 text-sm">{{ t('components.data-list.data_not_found') }}</div>
+          <div v-else class="space-y-5">
+            <div v-for="(item, index) in itemsForm" :key="index" class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4">
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">{{ t('views.asset_sale_item.page_title') }} #{{ index + 1 }}</div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary" @click="toggleAssetRemarks(index)">{{ itemsRemarksExpanded[index] ? '▲' : '▼' }}</Button>
+                  <Button type="button" variant="outline-secondary" @click="removeAsset(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-7">
+                  <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.asset_id` as any) }">{{ t('views.asset_sale.table.cols.asset') }}</FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800">{{ item.asset_name || '-' }}</div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1" @click="changeAsset(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.asset_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">[{{ item.asset_code }}] {{ item.asset_category_name }}{{ item.asset_unit_name ? ` | ${item.asset_unit_name}` : '' }}</div>
+                </div>
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.qty` as any) }">{{ t('views.asset_sale_item.fields.qty') }}</FormLabel>
+                  <FormInputCurrency
+                    :id="`asset-sale-qty-${index}`"
+                    v-model="item.qty"
+                    :class="['text-right', { 'border-danger': assetSaleForm.invalid(`items.${index}.qty` as any) }]"
+                    @change="assetSaleForm.validate(`items.${index}.qty` as any); assetSaleForm.validate(`items.${index}.serials` as any);"
+                  />
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.qty`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.unit_price` as any) }">{{ t('views.asset_sale_item.fields.unit_price') }}</FormLabel>
+                  <FormInputCurrency
+                    v-model="item.unit_price"
+                    :class="['text-right', { 'border-danger': assetSaleForm.invalid(`items.${index}.unit_price` as any) }]"
+                    @change="assetSaleForm.validate(`items.${index}.unit_price` as any)"
+                  />
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.unit_price`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel>{{ t('views.asset_sale_item.fields.subtotal') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemSubtotal(item)" disabled />
+                </div>
+                <div class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.serials` as any) }">{{ t('views.product.fields.serial_number') }}</FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addAssetSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">{{ t('components.data-list.data_not_found') }}</div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="serialIndex" class="flex gap-2">
+                      <FormInput
+                        v-model="serial.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{ 'border-danger': assetSaleForm.invalid(`items.${index}.serials.${serialIndex}.serial` as any) }"
+                        @change="assetSaleForm.validate(`items.${index}.serials.${serialIndex}.serial` as any); assetSaleForm.validate(`items.${index}.serials` as any);"
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeAssetSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, serialIndex) in item.serials"
+                    :key="`asset-sale-serial-error-${index}-${serialIndex}`"
+                    :messages="(assetSaleForm.errors as any)[`items.${index}.serials.${serialIndex}.serial`]"
+                  />
+                </div>
+                <div v-if="itemsRemarksExpanded[index]" class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.remarks` as any) }">{{ t('views.asset_sale_item.fields.remarks') }}</FormLabel>
+                  <FormTextarea rows="2" v-model="assetSaleForm.items[index].remarks" :class="{ 'border-danger': assetSaleForm.invalid(`items.${index}.remarks` as any) }" @change="assetSaleForm.validate(`items.${index}.remarks` as any)" />
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.remarks`]" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addAsset">{{ t('views.asset_sale_item.actions.create') }}</Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('rounding') }">{{ t('views.asset_sale.fields.rounding') }}</FormLabel>
+              <FormInputCurrency v-model="assetSaleForm.rounding" :class="{ 'border-danger': assetSaleForm.invalid('rounding') }" @change="assetSaleForm.validate('rounding')" />
+              <FormErrorMessages :messages="assetSaleForm.errors.rounding" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.asset_sale.fields.item_total') }}</FormLabel>
+              <FormInputCurrency :model-value="itemTotal" disabled />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.asset_sale.fields.amount_receivable') }}</FormLabel>
+              <FormInputCurrency :model-value="amountReceivable" disabled />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4 p-5">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="assetSaleForm.validating || assetSaleForm.hasErrors">
+            <Lucide v-if="assetSaleForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>{{ t('components.buttons.submit') }}</template>
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+
+    <Dialog size="xl" :open="showAssetModal" @close="() => { showAssetModal = false; }" @after-leave="handleAssetModalAfterLeave">
+      <Dialog.Panel>
+        <div class="p-5">
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>{{ t('views.asset_sale.table.title') }}</FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showAssetModal = false">
+              <Lucide icon="X" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput id="asset-search-input" v-model="assetSearchText" type="text" :placeholder="t('components.search-box.placeholder.search')" @keyup.enter="searchAssets" />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchAssets" :disabled="isSearchingAsset">
+              <template v-if="isSearchingAsset"><Lucide icon="Loader" class="w-4 h-4 animate-spin" /></template>
+              <template v-else>{{ t('components.buttons.search') }}</template>
+            </Button>
+          </div>
+
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.code') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.name') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_category') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_unit') }}</th>
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="assetOptions.length === 0">
+                  <td colspan="5" class="px-3 py-4 text-center text-slate-500">{{ t('components.data-list.data_not_found') }}</td>
+                </tr>
+                <tr v-for="(option, optionIndex) in assetOptions" :key="optionIndex" class="border-t border-slate-200/60 dark:border-darkmode-400">
+                  <td class="px-3 py-2">{{ option.asset_code }}</td>
+                  <td class="px-3 py-2">{{ option.asset_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_category_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_unit_name }}</td>
+                  <td class="px-3 py-2 text-right">
+                    <Button type="button" variant="primary" size="sm" @click="selectAsset(option)">{{ t('components.buttons.select') }}</Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  </form>
+</template>
diff --git a/web/src/pages/asset-sale/AssetSaleEdit.vue b/web/src/pages/asset-sale/AssetSaleEdit.vue
new file mode 100644
index 000000000..68b76f1f5
--- /dev/null
+++ b/web/src/pages/asset-sale/AssetSaleEdit.vue
@@ -0,0 +1,619 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import type { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import AssetService from '@/services/AssetService';
+import AssetSaleService from '@/services/AssetSaleService';
+import CacheService from '@/services/CacheService';
+import CustomerService from '@/services/CustomerService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AssetSale } from '@/types/models/AssetSale';
+import type { AssetSaleItemNestedUpdateRequest } from '@/types/services/asset-sale/AssetSaleRequest';
+import { convertErrorTypeToAlertListType, formatDate } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type AssetSaleItemFormItem = {
+  id: string | null;
+  qty: AssetSaleItemNestedUpdateRequest['qty'];
+  asset_id: AssetSaleItemNestedUpdateRequest['asset_id'];
+  asset_code?: string | null;
+  asset_name?: string | null;
+  asset_category_name?: string | null;
+  asset_unit_name?: string | null;
+  unit_price: AssetSaleItemNestedUpdateRequest['unit_price'];
+  remarks: AssetSaleItemNestedUpdateRequest['remarks'];
+  serials: { id: string | null; serial: string }[];
+  delete_serial_ids: string[];
+};
+
+type AssetOption = {
+  asset_id: string;
+  asset_code: string;
+  asset_name: string;
+  asset_category_name: string;
+  asset_unit_name: string;
+};
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const assetSaleService = new AssetSaleService();
+const assetSaleForm = assetSaleService.useAssetSaleEditForm(route.params.ulid as string);
+const assetService = new AssetService();
+const customerService = new CustomerService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.asset_sale.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.asset_sale.field_groups.asset_sale_data', state: CardState.Expanded },
+  { title: 'views.asset_sale.field_groups.items', state: CardState.Expanded },
+  { title: 'views.asset_sale.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const customerDDL = ref<Array<DropDownOption> | null>(null);
+const customerSearch = ref('');
+const customerOptions = computed(() =>
+  (customerDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showAssetModal = ref<boolean>(false);
+const assetSearchText = ref<string>('');
+const isSearchingAsset = ref<boolean>(false);
+const assetOptions = ref<Array<AssetOption>>([]);
+const editingAssetIndex = ref<number | null>(null);
+const itemQtyToFocus = ref<number | null>(null);
+const itemsRemarksExpanded = ref<boolean[]>([]);
+
+const itemsForm = computed<AssetSaleItemFormItem[]>(
+  () => assetSaleForm.items as AssetSaleItemFormItem[],
+);
+
+const toNumber = (value: unknown): number => {
+  const parsed = Number(value ?? 0);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+const roundAmount = (value: number): number => {
+  return Math.round((value + Number.EPSILON) * 100000000) / 100000000;
+};
+
+const itemSubtotal = (item: AssetSaleItemFormItem): number => {
+  return roundAmount(toNumber(item.qty) * toNumber(item.unit_price));
+};
+
+const itemTotal = computed(() => roundAmount(itemsForm.value.reduce((sum, item) => sum + itemSubtotal(item), 0)));
+const amountReceivable = computed(() => roundAmount(itemTotal.value + toNumber(assetSaleForm.rounding)));
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+watch(showAssetModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('asset-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(
+  assetSaleForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_SALE_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await loadData();
+    await loadCustomerDDL();
+  } finally {
+    emits('loading-state', false);
+  }
+});
+
+const setCode = () => {
+  assetSaleForm.forgetError('code');
+  assetSaleForm.setData({ code: assetSaleForm.code === '_AUTO_' ? '' : '_AUTO_' });
+};
+
+const loadCustomerDDL = async (search = customerSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await customerService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: 1,
+    include_id: assetSaleForm.customer_id ?? undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    customerDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `[${item.code}] ${item.name}`,
+    })) as DropDownOption[];
+  } else {
+    customerDDL.value = [];
+  }
+};
+
+const loadData = async () => {
+  const ulid = route.params.ulid as string | undefined;
+  if (!ulid) return;
+
+  const result = await assetSaleService.read(ulid);
+  if (!result.success || !result.data) return;
+
+  const data = result.data as AssetSale;
+  const items: AssetSaleItemFormItem[] = (data.items || []).map((item) => ({
+    id: item.id ?? null,
+    qty: item.qty,
+    asset_id: item.asset?.id ?? '',
+    asset_code: item.asset?.code ?? '',
+    asset_name: item.asset?.name ?? '',
+    asset_category_name: item.asset?.asset_category?.name ?? '',
+    asset_unit_name: item.asset?.asset_unit?.name ?? '',
+    unit_price: item.unit_price,
+    remarks: item.remarks ?? '',
+    serials: item.serials ? item.serials.map((serial) => ({ id: serial.id ?? null, serial: serial.serial })) : [],
+    delete_serial_ids: [],
+  }));
+
+  assetSaleForm.setData({
+    company_id: data.company.id,
+    branch_id: data.branch.id,
+    code: data.code,
+    date: formatDate(data.date, 'YYYY-MM-DD HH:mm:ss'),
+    due_days: data.due_days,
+    customer_id: data.customer?.id ?? null,
+    remarks: data.remarks ?? '',
+    is_posted: data.is_posted,
+    rounding: data.rounding,
+    delete_item_ids: [],
+    items: items as any,
+  } as any);
+
+  itemsRemarksExpanded.value = items.map(() => false);
+};
+
+const searchAssets = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingAsset.value = true;
+
+  const result = await assetService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: assetSearchText.value,
+    asset_category_id: undefined,
+    asset_unit_id: undefined,
+    status: 1,
+    include_id: undefined,
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingAsset.value = false;
+
+  if (result.success && result.data) {
+    assetOptions.value = result.data.data.map((item) => ({
+      asset_id: item.id,
+      asset_code: item.code,
+      asset_name: item.name,
+      asset_category_name: item.asset_category?.name ?? '',
+      asset_unit_name: item.asset_unit?.name ?? '',
+    }));
+  } else {
+    assetOptions.value = [];
+  }
+};
+
+const selectAsset = (option: AssetOption) => {
+  const baseData: Partial<AssetSaleItemFormItem> = {
+    asset_id: option.asset_id,
+    asset_code: option.asset_code,
+    asset_name: option.asset_name,
+    asset_category_name: option.asset_category_name,
+    asset_unit_name: option.asset_unit_name,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingAssetIndex.value === null) {
+    const item: AssetSaleItemFormItem = {
+      id: null,
+      qty: 0,
+      unit_price: 0,
+      remarks: '',
+      delete_serial_ids: [],
+      ...baseData,
+    } as AssetSaleItemFormItem;
+
+    assetSaleForm.items.push(item);
+    itemsRemarksExpanded.value.push(false);
+    targetIndex = assetSaleForm.items.length - 1;
+  } else {
+    const index = editingAssetIndex.value;
+    const current = assetSaleForm.items[index] as AssetSaleItemFormItem;
+    const deleteSerialIds = [
+      ...current.delete_serial_ids,
+      ...current.serials.filter((serial) => !!serial.id).map((serial) => serial.id as string),
+    ];
+
+    assetSaleForm.items[index] = {
+      ...current,
+      ...baseData,
+      delete_serial_ids: Array.from(new Set(deleteSerialIds)),
+    };
+    targetIndex = index;
+  }
+
+  showAssetModal.value = false;
+  editingAssetIndex.value = null;
+  itemQtyToFocus.value = targetIndex;
+};
+
+const handleAssetModalAfterLeave = () => {
+  const index = itemQtyToFocus.value;
+  itemQtyToFocus.value = null;
+  if (index === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`asset-sale-edit-qty-${index}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addAsset = () => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  editingAssetIndex.value = null;
+  showAssetModal.value = true;
+};
+
+const changeAsset = (index: number) => {
+  assetSearchText.value = '';
+  assetOptions.value = [];
+  isSearchingAsset.value = false;
+  editingAssetIndex.value = index;
+  showAssetModal.value = true;
+};
+
+const addAssetSerial = (index: number) => {
+  const item = itemsForm.value[index];
+  if (!item) return;
+  item.serials.push({ id: null, serial: '' });
+  assetSaleForm.validate(`items.${index}.serials` as any);
+};
+
+const removeAssetSerial = (index: number, serialIndex: number) => {
+  const item = itemsForm.value[index];
+  if (!item) return;
+
+  const serial = item.serials[serialIndex];
+  if (serial?.id) {
+    item.delete_serial_ids.push(serial.id);
+    item.delete_serial_ids = Array.from(new Set(item.delete_serial_ids));
+  }
+
+  item.serials.splice(serialIndex, 1);
+  assetSaleForm.validate(`items.${index}.serials` as any);
+};
+
+const toggleAssetRemarks = (index: number) => {
+  itemsRemarksExpanded.value[index] = !(itemsRemarksExpanded.value[index] ?? false);
+};
+
+const removeAsset = (index: number) => {
+  const item = itemsForm.value[index];
+  if (item?.id) {
+    assetSaleForm.delete_item_ids.push(item.id);
+    assetSaleForm.delete_item_ids = Array.from(new Set(assetSaleForm.delete_item_ids));
+  }
+
+  assetSaleForm.items.splice(index, 1);
+  itemsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(assetSaleForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      assetSaleForm.forgetError(key as any);
+    }
+  });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+
+const onSubmit = async () => {
+  const originalItems = assetSaleForm.items as AssetSaleItemFormItem[];
+  const cleanedItems = originalItems.map((item) => ({
+    id: item.id,
+    qty: item.qty,
+    asset_id: item.asset_id,
+    unit_price: item.unit_price,
+    remarks: item.remarks,
+    delete_serial_ids: item.delete_serial_ids,
+    serials: item.serials.map((serialItem) => ({ id: serialItem.id, serial: serialItem.serial })),
+  }));
+
+  assetSaleForm.items = cleanedItems as any;
+
+  emits('loading-state', true);
+
+  try {
+    await assetSaleForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-asset-sale-list' });
+  } catch (error) {
+    assetSaleForm.items = originalItems as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="assetSaleEditForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>{{ selectedUserLocation.company.code }}<br />{{ selectedUserLocation.company.name }}</FormLabel>
+              <FormInput type="hidden" v-model="assetSaleForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>{{ selectedUserLocation.branch.code }}<br />{{ selectedUserLocation.branch.name }}</FormLabel>
+              <FormInput type="hidden" v-model="assetSaleForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('code') }">{{ t('views.asset_sale.fields.code') }}</FormLabel>
+              <FormInputCode v-model="assetSaleForm.code" :class="{ 'border-danger': assetSaleForm.invalid('code') }" :placeholder="t('views.asset_sale.fields.code')" @set-auto="setCode" @change="assetSaleForm.validate('code')" />
+              <FormErrorMessages :messages="assetSaleForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('date') }">{{ t('views.asset_sale.fields.date') }}</FormLabel>
+              <FormInputDateTimeAuto v-model="assetSaleForm.date" :class="{ 'border-danger': assetSaleForm.invalid('date') }" :placeholder="t('views.asset_sale.fields.date')" @change="assetSaleForm.validate('date')" />
+              <FormErrorMessages :messages="assetSaleForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('due_days') }">{{ t('views.asset_sale.fields.due_days') }}</FormLabel>
+              <FormInput v-model="assetSaleForm.due_days" type="number" min="0" :class="{ 'border-danger': assetSaleForm.invalid('due_days') }" @change="assetSaleForm.validate('due_days')" />
+              <FormErrorMessages :messages="assetSaleForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('customer_id') }">{{ t('views.asset_sale.fields.customer_id') }}</FormLabel>
+              <FormSelectSearch
+                v-model="assetSaleForm.customer_id"
+                v-model:search="customerSearch"
+                :options="customerOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': assetSaleForm.invalid('customer_id') }"
+                @search="loadCustomerDDL"
+                @change="assetSaleForm.validate('customer_id')"
+              />
+              <FormErrorMessages :messages="assetSaleForm.errors.customer_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('remarks') }">{{ t('views.asset_sale.fields.remarks') }}</FormLabel>
+              <FormTextarea v-model="assetSaleForm.remarks" rows="2" :class="{ 'border-danger': assetSaleForm.invalid('remarks') }" :placeholder="t('views.asset_sale.fields.remarks')" @change="assetSaleForm.validate('remarks')" />
+              <FormErrorMessages :messages="assetSaleForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">{{ t('views.asset_sale.fields.is_posted') }}</FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="assetSaleForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div v-if="assetSaleForm.items.length === 0" class="text-slate-500 text-sm">{{ t('components.data-list.data_not_found') }}</div>
+          <div v-else class="space-y-5">
+            <div v-for="(item, index) in itemsForm" :key="index" class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4">
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">{{ t('views.asset_sale_item.page_title') }} #{{ index + 1 }}</div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary" @click="toggleAssetRemarks(index)">{{ itemsRemarksExpanded[index] ? '▲' : '▼' }}</Button>
+                  <Button type="button" variant="outline-secondary" @click="removeAsset(index)"><Lucide icon="Trash2" class="w-4 h-4 text-danger" /></Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-7">
+                  <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.asset_id` as any) }">{{ t('views.asset_sale.table.cols.asset') }}</FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800">{{ item.asset_name || '-' }}</div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1" @click="changeAsset(index)"><Lucide icon="Search" class="w-4 h-4" /></Button>
+                  </div>
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.asset_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">[{{ item.asset_code }}] {{ item.asset_category_name }}{{ item.asset_unit_name ? ` | ${item.asset_unit_name}` : '' }}</div>
+                </div>
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.qty` as any) }">{{ t('views.asset_sale_item.fields.qty') }}</FormLabel>
+                  <FormInputCurrency :id="`asset-sale-edit-qty-${index}`" v-model="item.qty" :class="['text-right', { 'border-danger': assetSaleForm.invalid(`items.${index}.qty` as any) }]" @change="assetSaleForm.validate(`items.${index}.qty` as any); assetSaleForm.validate(`items.${index}.serials` as any);" />
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.qty`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.unit_price` as any) }">{{ t('views.asset_sale_item.fields.unit_price') }}</FormLabel>
+                  <FormInputCurrency v-model="item.unit_price" :class="['text-right', { 'border-danger': assetSaleForm.invalid(`items.${index}.unit_price` as any) }]" @change="assetSaleForm.validate(`items.${index}.unit_price` as any)" />
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.unit_price`]" />
+                </div>
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel>{{ t('views.asset_sale_item.fields.subtotal') }}</FormLabel>
+                  <FormInputCurrency :model-value="itemSubtotal(item)" disabled />
+                </div>
+                <div class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.serials` as any) }">{{ t('views.product.fields.serial_number') }}</FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addAssetSerial(index)"><Lucide icon="Plus" class="w-3 h-3 mr-1" />{{ t('components.buttons.create') }}</Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">{{ t('components.data-list.data_not_found') }}</div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="serialIndex" class="flex gap-2">
+                      <FormInput v-model="serial.serial" :placeholder="t('views.product.fields.serial_number')" :class="{ 'border-danger': assetSaleForm.invalid(`items.${index}.serials.${serialIndex}.serial` as any) }" @change="assetSaleForm.validate(`items.${index}.serials.${serialIndex}.serial` as any); assetSaleForm.validate(`items.${index}.serials` as any);" />
+                      <Button type="button" variant="outline-secondary" @click="removeAssetSerial(index, serialIndex)"><Lucide icon="Trash2" class="w-4 h-4 text-danger" /></Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.serials`]" />
+                  <FormErrorMessages v-for="(_, serialIndex) in item.serials" :key="`asset-sale-edit-serial-error-${index}-${serialIndex}`" :messages="(assetSaleForm.errors as any)[`items.${index}.serials.${serialIndex}.serial`]" />
+                </div>
+                <div v-if="itemsRemarksExpanded[index]" class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': assetSaleForm.invalid(`items.${index}.remarks` as any) }">{{ t('views.asset_sale_item.fields.remarks') }}</FormLabel>
+                  <FormTextarea rows="2" v-model="assetSaleForm.items[index].remarks" :class="{ 'border-danger': assetSaleForm.invalid(`items.${index}.remarks` as any) }" @change="assetSaleForm.validate(`items.${index}.remarks` as any)" />
+                  <FormErrorMessages :messages="(assetSaleForm.errors as any)[`items.${index}.remarks`]" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addAsset">{{ t('views.asset_sale_item.actions.create') }}</Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetSaleForm.invalid('rounding') }">{{ t('views.asset_sale.fields.rounding') }}</FormLabel>
+              <FormInputCurrency v-model="assetSaleForm.rounding" :class="{ 'border-danger': assetSaleForm.invalid('rounding') }" @change="assetSaleForm.validate('rounding')" />
+              <FormErrorMessages :messages="assetSaleForm.errors.rounding" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.asset_sale.fields.item_total') }}</FormLabel>
+              <FormInputCurrency :model-value="itemTotal" disabled />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.asset_sale.fields.amount_receivable') }}</FormLabel>
+              <FormInputCurrency :model-value="amountReceivable" disabled />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4 p-5">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="assetSaleForm.validating || assetSaleForm.hasErrors">
+            <Lucide v-if="assetSaleForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>{{ t('components.buttons.submit') }}</template>
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+
+    <Dialog size="xl" :open="showAssetModal" @close="() => { showAssetModal = false; }" @after-leave="handleAssetModalAfterLeave">
+      <Dialog.Panel>
+        <div class="p-5">
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>{{ t('views.asset_sale.table.title') }}</FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showAssetModal = false"><Lucide icon="X" class="w-4 h-4" /></button>
+          </div>
+
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput id="asset-search-input" v-model="assetSearchText" type="text" :placeholder="t('components.search-box.placeholder.search')" @keyup.enter="searchAssets" />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchAssets" :disabled="isSearchingAsset">
+              <template v-if="isSearchingAsset"><Lucide icon="Loader" class="w-4 h-4 animate-spin" /></template>
+              <template v-else>{{ t('components.buttons.search') }}</template>
+            </Button>
+          </div>
+
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.code') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.name') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_category') }}</th>
+                  <th class="px-3 py-2 text-left">{{ t('views.asset.table.cols.asset_unit') }}</th>
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="assetOptions.length === 0"><td colspan="5" class="px-3 py-4 text-center text-slate-500">{{ t('components.data-list.data_not_found') }}</td></tr>
+                <tr v-for="(option, optionIndex) in assetOptions" :key="optionIndex" class="border-t border-slate-200/60 dark:border-darkmode-400">
+                  <td class="px-3 py-2">{{ option.asset_code }}</td>
+                  <td class="px-3 py-2">{{ option.asset_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_category_name }}</td>
+                  <td class="px-3 py-2">{{ option.asset_unit_name }}</td>
+                  <td class="px-3 py-2 text-right"><Button type="button" variant="primary" size="sm" @click="selectAsset(option)">{{ t('components.buttons.select') }}</Button></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  </form>
+</template>
diff --git a/web/src/pages/asset-sale/AssetSaleIndex.vue b/web/src/pages/asset-sale/AssetSaleIndex.vue
new file mode 100644
index 000000000..8a5bfbfcd
--- /dev/null
+++ b/web/src/pages/asset-sale/AssetSaleIndex.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.asset_sale.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const assetSaleNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[assetSaleNotification]', (el: NotificationElement) => {
+  assetSaleNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-asset-sale-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-asset-sale-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.asset_sale.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.asset_sale.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.asset_sale.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (assetSaleNotification.value) {
+    assetSaleNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('ASSET_SALE_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('ASSET_SALE_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="assetSaleNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/asset-sale/AssetSaleList.vue b/web/src/pages/asset-sale/AssetSaleList.vue
new file mode 100644
index 000000000..89bb0f627
--- /dev/null
+++ b/web/src/pages/asset-sale/AssetSaleList.vue
@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import { FormInputDateTime, FormLabel } from '@/components/Base/Form';
+import AssetSaleService from '@/services/AssetSaleService';
+import type { AssetSale } from '@/types/models/AssetSale';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AssetSaleReadAnyPaginateRequest } from '@/types/services/asset-sale/AssetSaleRequest';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { formatDate, formatCurrency } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const assetSaleService = new AssetSaleService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+
+const assetSaleLists = ref<Collection<Array<AssetSale>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getAssetSales('', true, 1, 10);
+});
+
+const getAssetSales = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: AssetSaleReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value || null,
+    end_date: endDate.value || null,
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result: ServiceResponse<Collection<Array<AssetSale>> | null> = await assetSaleService.readAnyPaginate(request);
+
+  if (result.success && result.data) {
+    assetSaleLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getAssetSales(data.search.text, true, data.pagination.page, data.pagination.per_page);
+};
+
+const handleDateFilterChange = async () => {
+  const perPage = assetSaleLists.value?.meta.per_page || 10;
+  await getAssetSales(searchText.value, true, 1, perPage);
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!assetSaleLists.value) return;
+
+  const ulid = assetSaleLists.value.data[idx].ulid;
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({ name: 'side-menu-asset-sale-edit', params: { ulid } });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!assetSaleLists.value) return;
+
+  deleteUlid.value = assetSaleLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await assetSaleService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getAssetSales(searchText.value, true, 1, assetSaleLists.value?.meta.per_page || 10);
+    showNotification(t('views.asset_sale.alert.delete.title'), t('views.asset_sale.alert.delete.message'));
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const notification: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', notification);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const alertPlaceholder: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', alertPlaceholder);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>{{ t('views.asset_sale.fields.start_date') }}</FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>{{ t('views.asset_sale.fields.end_date') }}</FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="assetSaleLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="assetSaleLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="assetSaleLists ? assetSaleLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_sale.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_sale.fields.code') }}: {{ (item as AssetSale).code ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_sale.fields.date') }}:
+              {{ (item as AssetSale).date ? formatDate((item as AssetSale).date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_sale.fields.due_days') }}: {{ (item as AssetSale).due_days ?? 0 }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_sale.fields.customer_id') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              [{{ (item as AssetSale).customer?.code ?? '-' }}] {{ (item as AssetSale).customer?.name ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_sale.fields.item_total') }}:
+              {{ formatCurrency((item as AssetSale).item_total ?? 0) }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.asset_sale.fields.amount_receivable') }}:
+              {{ formatCurrency((item as AssetSale).amount_receivable ?? 0) }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-3 md:col-span-2 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_sale.fields.is_posted') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap mb-1">
+              <span class="inline-flex items-center">
+                <Lucide v-if="(item as AssetSale).is_posted" icon="CheckCircle" class="w-4 h-4 text-success" />
+                <Lucide v-else icon="X" class="w-4 h-4 text-danger" />
+              </span>
+            </div>
+            <div v-if="(item as AssetSale).remarks?.trim()" class="text-slate-500 text-xs break-all">
+              {{ t('views.asset_sale.fields.remarks') }}: {{ (item as AssetSale).remarks }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-1 md:col-span-2 flex justify-end items-start gap-2">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+
+          <div v-if="expandDetail === index" class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.asset_sale.field_groups.items') }}
+            </div>
+            <div v-if="((item as AssetSale).items?.length ?? 0) === 0" class="text-slate-500 text-xs italic">
+              {{ t('components.data-list.data_not_found') }}
+            </div>
+            <div v-else class="space-y-2 text-xs">
+              <div v-for="(assetItem, assetIdx) in (item as AssetSale).items" :key="assetItem.ulid" class="flex gap-2">
+                <div class="w-6 text-right text-slate-500">{{ assetIdx + 1 }}.</div>
+                <div class="flex-1">
+                  <div class="font-medium break-all">[{{ assetItem.asset.code }}] {{ assetItem.asset.name }}</div>
+                  <div class="text-slate-500">
+                    {{ t('views.asset_sale.table.cols.qty') }}:
+                    <span class="font-medium">{{ formatCurrency(assetItem.qty) }}</span>
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.asset_sale.table.cols.unit_price') }}:
+                    <span class="font-medium">{{ formatCurrency(assetItem.unit_price) }}</span>
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.asset_sale.table.cols.subtotal') }}:
+                    <span class="font-medium">{{ formatCurrency(assetItem.subtotal) }}</span>
+                  </div>
+                  <div class="text-slate-500 mt-0.5 break-all">
+                    {{ t('views.product.fields.serial_number') }}:
+                    <span v-if="assetItem.serials?.length">{{ assetItem.serials.map((serial) => serial.serial).join(', ') }}</span>
+                    <span v-else>{{ t('components.data-list.data_not_found') }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" @click="() => { deleteModalShow = false; }" class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/asset-unit/AssetUnitCreate.vue b/web/src/pages/asset-unit/AssetUnitCreate.vue
new file mode 100644
index 000000000..2b4df6077
--- /dev/null
+++ b/web/src/pages/asset-unit/AssetUnitCreate.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import AssetUnitService from '@/services/AssetUnitService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode, FormTextarea } from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const assetUnitService = new AssetUnitService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.asset_unit.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.asset_unit.field_groups.asset_unit_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const assetUnitForm = assetUnitService.useAssetUnitCreateForm();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+});
+
+watch(
+  assetUnitForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_UNIT_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const setCompanyIdData = () => {
+  assetUnitForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('ASSET_UNIT_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  if (!data.code) data.code = '_AUTO_';
+  if (data.description === undefined || data.description === null) data.description = '';
+
+  assetUnitForm.setData(data);
+};
+
+const setCode = () => {
+  assetUnitForm.forgetError('code');
+  if (assetUnitForm.code == '_AUTO_') {
+    assetUnitForm.setData({ code: '' });
+  } else {
+    assetUnitForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  assetUnitForm.reset();
+  assetUnitForm.setErrors({});
+  assetUnitForm.setData({
+    code: '_AUTO_',
+    name: '',
+    description: '',
+  });
+  setCompanyIdData();
+};
+
+const onSubmit = async () => {
+  if (assetUnitForm.hasErrors) {
+    const firstErrorKey = Object.keys(assetUnitForm.errors)[0];
+    if (firstErrorKey) scrollToError(firstErrorKey);
+    return;
+  }
+
+  emits('loading-state', true);
+  await assetUnitForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-asset-unit-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="assetUnitForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="assetUnitForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetUnitForm.invalid('code') }">
+                {{ t('views.asset_unit.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="assetUnitForm.code"
+                :class="{ 'border-danger': assetUnitForm.invalid('code') }"
+                :placeholder="t('views.asset_unit.fields.code')"
+                @set-auto="setCode"
+                @change="assetUnitForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetUnitForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-8">
+              <FormLabel :class="{ 'text-danger': assetUnitForm.invalid('name') }">
+                {{ t('views.asset_unit.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="assetUnitForm.name"
+                type="text"
+                :class="{ 'border-danger': assetUnitForm.invalid('name') }"
+                :placeholder="t('views.asset_unit.fields.name')"
+                @change="assetUnitForm.validate('name')"
+              />
+              <FormErrorMessages :messages="assetUnitForm.errors.name" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': assetUnitForm.invalid('description') }">
+                {{ t('views.asset_unit.fields.description') }}
+              </FormLabel>
+              <FormTextarea
+                id="description"
+                v-model="assetUnitForm.description"
+                :class="{ 'border-danger': assetUnitForm.invalid('description') }"
+                :placeholder="t('views.asset_unit.fields.description')"
+                @change="assetUnitForm.validate('description')"
+              />
+              <FormErrorMessages :messages="assetUnitForm.errors.description" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="assetUnitForm.validating">
+            <Lucide v-if="assetUnitForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>{{ t('components.buttons.submit') }}</template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/asset-unit/AssetUnitEdit.vue b/web/src/pages/asset-unit/AssetUnitEdit.vue
new file mode 100644
index 000000000..838c58672
--- /dev/null
+++ b/web/src/pages/asset-unit/AssetUnitEdit.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import AssetUnitService from '@/services/AssetUnitService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode, FormTextarea } from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const assetUnitService = new AssetUnitService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.asset_unit.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.asset_unit.field_groups.asset_unit_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const assetUnitForm = assetUnitService.useAssetUnitEditForm(route.params.ulid.toString());
+const companyCode = ref<string>('');
+const companyName = ref<string>('');
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await assetUnitService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    companyCode.value = result.data.company?.code ?? '';
+    companyName.value = result.data.company?.name ?? '';
+
+    assetUnitForm.setData({
+      company_id: result.data.company?.id ?? '',
+      code: result.data.code,
+      name: result.data.name,
+      description: result.data.description ?? '',
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-asset-unit-list' });
+  }
+};
+
+const setCode = () => {
+  assetUnitForm.forgetError('code');
+  if (assetUnitForm.code == '_AUTO_') {
+    assetUnitForm.setData({ code: '' });
+  } else {
+    assetUnitForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  assetUnitForm.reset();
+  assetUnitForm.setErrors({});
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (assetUnitForm.hasErrors) {
+    const firstErrorKey = Object.keys(assetUnitForm.errors)[0];
+    if (firstErrorKey) scrollToError(firstErrorKey);
+    return;
+  }
+
+  emits('loading-state', true);
+  await assetUnitForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-asset-unit-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="assetUnitForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ companyCode }}
+            <br />
+            {{ companyName }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="assetUnitForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetUnitForm.invalid('code') }">
+                {{ t('views.asset_unit.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="assetUnitForm.code"
+                :class="{ 'border-danger': assetUnitForm.invalid('code') }"
+                :placeholder="t('views.asset_unit.fields.code')"
+                @set-auto="setCode"
+                @change="assetUnitForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetUnitForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-8">
+              <FormLabel :class="{ 'text-danger': assetUnitForm.invalid('name') }">
+                {{ t('views.asset_unit.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="assetUnitForm.name"
+                type="text"
+                :class="{ 'border-danger': assetUnitForm.invalid('name') }"
+                :placeholder="t('views.asset_unit.fields.name')"
+                @change="assetUnitForm.validate('name')"
+              />
+              <FormErrorMessages :messages="assetUnitForm.errors.name" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': assetUnitForm.invalid('description') }">
+                {{ t('views.asset_unit.fields.description') }}
+              </FormLabel>
+              <FormTextarea
+                id="description"
+                v-model="assetUnitForm.description"
+                :class="{ 'border-danger': assetUnitForm.invalid('description') }"
+                :placeholder="t('views.asset_unit.fields.description')"
+                @change="assetUnitForm.validate('description')"
+              />
+              <FormErrorMessages :messages="assetUnitForm.errors.description" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="assetUnitForm.validating || assetUnitForm.hasErrors"
+          >
+            <Lucide v-if="assetUnitForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>{{ t('components.buttons.submit') }}</template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/asset-unit/AssetUnitIndex.vue b/web/src/pages/asset-unit/AssetUnitIndex.vue
new file mode 100644
index 000000000..38094d10d
--- /dev/null
+++ b/web/src/pages/asset-unit/AssetUnitIndex.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.asset_unit.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const assetUnitNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[assetUnitNotification]', (el: NotificationElement) => {
+  assetUnitNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-asset-unit-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-asset-unit-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.asset_unit.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.asset_unit.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.asset_unit.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (assetUnitNotification.value) {
+    assetUnitNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('ASSET_UNIT_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('ASSET_UNIT_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="assetUnitNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/asset-unit/AssetUnitList.vue b/web/src/pages/asset-unit/AssetUnitList.vue
new file mode 100644
index 000000000..ee033e0b4
--- /dev/null
+++ b/web/src/pages/asset-unit/AssetUnitList.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import AssetUnitService from '@/services/AssetUnitService';
+import { AssetUnit } from '@/types/models/AssetUnit';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { AssetUnitReadAnyPaginateRequest } from '@/types/services/asset-unit/AssetUnitRequest';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const assetUnitService = new AssetUnitService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const assetUnitLists = ref<Collection<Array<AssetUnit>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getAssetUnits('', true, 1, 10);
+});
+
+const getAssetUnits = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const searchReq: AssetUnitReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<AssetUnit>> | null> = await assetUnitService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    assetUnitLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async (data: DataListEmittedData) => {
+  await getAssetUnits(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (itemIdx: number) => {
+  if (!assetUnitLists.value) return;
+
+  const ulid = assetUnitLists.value.data[itemIdx].ulid;
+  router.push({
+    name: 'side-menu-asset-unit-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (itemIdx: number) => {
+  if (!assetUnitLists.value) return;
+
+  deleteUlid.value = assetUnitLists.value.data[itemIdx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await assetUnitService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getAssetUnits('', true, 1, 10);
+    showNotification(
+      t('views.asset_unit.alert.delete_asset_unit.title'),
+      t('views.asset_unit.alert.delete_asset_unit.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <DataList
+    :title="t('views.asset_unit.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="assetUnitLists ? assetUnitLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">{{ t('views.asset_unit.table.cols.code') }}</Table.Th>
+            <Table.Th class="whitespace-nowrap">{{ t('views.asset_unit.table.cols.name') }}</Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="assetUnitLists !== null">
+          <template v-if="assetUnitLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="3">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in assetUnitLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="3">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset_unit.fields.code') }}</div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset_unit.fields.name') }}</div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset_unit.fields.description') }}</div>
+                  <div class="flex-1">{{ item.description || '-' }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+
+      <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+            <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button type="button" variant="outline-secondary" class="mr-1 w-24" @click="deleteModalShow = false">
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/asset/AssetCreate.vue b/web/src/pages/asset/AssetCreate.vue
new file mode 100644
index 000000000..67bd08adc
--- /dev/null
+++ b/web/src/pages/asset/AssetCreate.vue
@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import AssetService from '@/services/AssetService';
+import AssetCategoryService from '@/services/AssetCategoryService';
+import AssetUnitService from '@/services/AssetUnitService';
+import DashboardService from '@/services/DashboardService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormTextarea,
+  FormSelect,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const assetService = new AssetService();
+const assetCategoryService = new AssetCategoryService();
+const assetUnitService = new AssetUnitService();
+const dashboardService = new DashboardService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.asset.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.asset.field_groups.asset_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const assetForm = assetService.useAssetCreateForm();
+const assetCategoryDDL = ref<Array<DropDownOption>>([]);
+const assetUnitDDL = ref<Array<DropDownOption>>([]);
+const statusDDL = ref<Array<DropDownOption>>([]);
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+  await Promise.all([loadAssetCategories(), loadAssetUnits(), loadStatuses()]);
+});
+
+watch(
+  assetForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('ASSET_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const setCompanyIdData = () => {
+  assetForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadAssetCategories = async () => {
+  const result = await assetCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: '',
+    refresh: false,
+    limit: 50,
+  });
+
+  if (result.success && result.data) {
+    assetCategoryDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadAssetUnits = async () => {
+  const result = await assetUnitService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: '',
+    refresh: false,
+    limit: 50,
+  });
+
+  if (result.success && result.data) {
+    assetUnitDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadStatuses = async () => {
+  const result = await dashboardService.getStatusDDL(false);
+  if (result) {
+    statusDDL.value = result;
+  }
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('ASSET_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  if (!data.code) data.code = '_AUTO_';
+  if (!data.status) data.status = 1;
+  if (data.remarks === undefined || data.remarks === null) data.remarks = '';
+
+  assetForm.setData(data);
+};
+
+const setCode = () => {
+  assetForm.forgetError('code');
+  if (assetForm.code == '_AUTO_') {
+    assetForm.setData({ code: '' });
+  } else {
+    assetForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  assetForm.reset();
+  assetForm.setErrors({});
+  assetForm.setData({
+    asset_category_id: '',
+    code: '_AUTO_',
+    name: '',
+    asset_unit_id: '',
+    status: 1,
+    remarks: '',
+  });
+  setCompanyIdData();
+};
+
+const onSubmit = async () => {
+  if (assetForm.hasErrors) {
+    const firstErrorKey = Object.keys(assetForm.errors)[0];
+    if (firstErrorKey) scrollToError(firstErrorKey);
+    return;
+  }
+
+  emits('loading-state', true);
+  await assetForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-asset-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="assetForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="assetForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('asset_category_id') }">
+                {{ t('views.asset.fields.asset_category_id') }}
+              </FormLabel>
+              <FormSelect
+                id="asset_category_id"
+                v-model="assetForm.asset_category_id"
+                :class="{ 'border-danger': assetForm.invalid('asset_category_id') }"
+                @change="assetForm.validate('asset_category_id')"
+              >
+                <option value="" disabled>{{ t('components.dropdown.placeholder') }}</option>
+                <option v-for="item in assetCategoryDDL" :key="item.code" :value="item.code">
+                  {{ item.name }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="assetForm.errors.asset_category_id" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('code') }">
+                {{ t('views.asset.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="assetForm.code"
+                :class="{ 'border-danger': assetForm.invalid('code') }"
+                :placeholder="t('views.asset.fields.code')"
+                @set-auto="setCode"
+                @change="assetForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('name') }">
+                {{ t('views.asset.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="assetForm.name"
+                type="text"
+                :class="{ 'border-danger': assetForm.invalid('name') }"
+                :placeholder="t('views.asset.fields.name')"
+                @change="assetForm.validate('name')"
+              />
+              <FormErrorMessages :messages="assetForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('asset_unit_id') }">
+                {{ t('views.asset.fields.asset_unit_id') }}
+              </FormLabel>
+              <FormSelect
+                id="asset_unit_id"
+                v-model="assetForm.asset_unit_id"
+                :class="{ 'border-danger': assetForm.invalid('asset_unit_id') }"
+                @change="assetForm.validate('asset_unit_id')"
+              >
+                <option value="" disabled>{{ t('components.dropdown.placeholder') }}</option>
+                <option v-for="item in assetUnitDDL" :key="item.code" :value="item.code">
+                  {{ item.name }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="assetForm.errors.asset_unit_id" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('status') }">
+                {{ t('views.asset.fields.status') }}
+              </FormLabel>
+              <FormSelect
+                id="status"
+                v-model="assetForm.status"
+                :class="{ 'border-danger': assetForm.invalid('status') }"
+                @change="assetForm.validate('status')"
+              >
+                <option value="" disabled>{{ t('components.dropdown.placeholder') }}</option>
+                <option v-for="item in statusDDL" :key="item.code" :value="item.code">
+                  {{ item.name }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="assetForm.errors.status" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('remarks') }">
+                {{ t('views.asset.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="assetForm.remarks"
+                :class="{ 'border-danger': assetForm.invalid('remarks') }"
+                :placeholder="t('views.asset.fields.remarks')"
+                @change="assetForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="assetForm.validating">
+            <Lucide v-if="assetForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>{{ t('components.buttons.submit') }}</template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/asset/AssetEdit.vue b/web/src/pages/asset/AssetEdit.vue
new file mode 100644
index 000000000..817bc354b
--- /dev/null
+++ b/web/src/pages/asset/AssetEdit.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import AssetService from '@/services/AssetService';
+import AssetCategoryService from '@/services/AssetCategoryService';
+import AssetUnitService from '@/services/AssetUnitService';
+import DashboardService from '@/services/DashboardService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormTextarea,
+  FormSelect,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const assetService = new AssetService();
+const assetCategoryService = new AssetCategoryService();
+const assetUnitService = new AssetUnitService();
+const dashboardService = new DashboardService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.asset.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.asset.field_groups.asset_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const assetForm = assetService.useAssetEditForm(route.params.ulid.toString());
+const companyCode = ref<string>('');
+const companyName = ref<string>('');
+const assetCategoryDDL = ref<Array<DropDownOption>>([]);
+const assetUnitDDL = ref<Array<DropDownOption>>([]);
+const statusDDL = ref<Array<DropDownOption>>([]);
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await Promise.all([loadAssetCategories(), loadAssetUnits(), loadStatuses()]);
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const loadAssetCategories = async () => {
+  const result = await assetCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocationStore.selectedUserLocation.company.id,
+    search: '',
+    refresh: false,
+    limit: 50,
+  });
+
+  if (result.success && result.data) {
+    assetCategoryDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadAssetUnits = async () => {
+  const result = await assetUnitService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocationStore.selectedUserLocation.company.id,
+    search: '',
+    refresh: false,
+    limit: 50,
+  });
+
+  if (result.success && result.data) {
+    assetUnitDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadStatuses = async () => {
+  const result = await dashboardService.getStatusDDL(false);
+  if (result) {
+    statusDDL.value = result;
+  }
+};
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await assetService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    companyCode.value = result.data.company?.code ?? '';
+    companyName.value = result.data.company?.name ?? '';
+
+    assetForm.setData({
+      company_id: result.data.company?.id ?? '',
+      asset_category_id: result.data.asset_category?.id ?? '',
+      code: result.data.code,
+      name: result.data.name,
+      asset_unit_id: result.data.asset_unit?.id ?? '',
+      status: result.data.status,
+      remarks: result.data.remarks ?? '',
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-asset-list' });
+  }
+};
+
+const setCode = () => {
+  assetForm.forgetError('code');
+  if (assetForm.code == '_AUTO_') {
+    assetForm.setData({ code: '' });
+  } else {
+    assetForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  assetForm.reset();
+  assetForm.setErrors({});
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (assetForm.hasErrors) {
+    const firstErrorKey = Object.keys(assetForm.errors)[0];
+    if (firstErrorKey) scrollToError(firstErrorKey);
+    return;
+  }
+
+  emits('loading-state', true);
+  await assetForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-asset-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="assetForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ companyCode }}
+            <br />
+            {{ companyName }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="assetForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('asset_category_id') }">
+                {{ t('views.asset.fields.asset_category_id') }}
+              </FormLabel>
+              <FormSelect
+                id="asset_category_id"
+                v-model="assetForm.asset_category_id"
+                :class="{ 'border-danger': assetForm.invalid('asset_category_id') }"
+                @change="assetForm.validate('asset_category_id')"
+              >
+                <option value="" disabled>{{ t('components.dropdown.placeholder') }}</option>
+                <option v-for="item in assetCategoryDDL" :key="item.code" :value="item.code">
+                  {{ item.name }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="assetForm.errors.asset_category_id" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('code') }">
+                {{ t('views.asset.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="assetForm.code"
+                :class="{ 'border-danger': assetForm.invalid('code') }"
+                :placeholder="t('views.asset.fields.code')"
+                @set-auto="setCode"
+                @change="assetForm.validate('code')"
+              />
+              <FormErrorMessages :messages="assetForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('name') }">
+                {{ t('views.asset.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="assetForm.name"
+                type="text"
+                :class="{ 'border-danger': assetForm.invalid('name') }"
+                :placeholder="t('views.asset.fields.name')"
+                @change="assetForm.validate('name')"
+              />
+              <FormErrorMessages :messages="assetForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('asset_unit_id') }">
+                {{ t('views.asset.fields.asset_unit_id') }}
+              </FormLabel>
+              <FormSelect
+                id="asset_unit_id"
+                v-model="assetForm.asset_unit_id"
+                :class="{ 'border-danger': assetForm.invalid('asset_unit_id') }"
+                @change="assetForm.validate('asset_unit_id')"
+              >
+                <option value="" disabled>{{ t('components.dropdown.placeholder') }}</option>
+                <option v-for="item in assetUnitDDL" :key="item.code" :value="item.code">
+                  {{ item.name }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="assetForm.errors.asset_unit_id" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('status') }">
+                {{ t('views.asset.fields.status') }}
+              </FormLabel>
+              <FormSelect
+                id="status"
+                v-model="assetForm.status"
+                :class="{ 'border-danger': assetForm.invalid('status') }"
+                @change="assetForm.validate('status')"
+              >
+                <option value="" disabled>{{ t('components.dropdown.placeholder') }}</option>
+                <option v-for="item in statusDDL" :key="item.code" :value="item.code">
+                  {{ item.name }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="assetForm.errors.status" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': assetForm.invalid('remarks') }">
+                {{ t('views.asset.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="assetForm.remarks"
+                :class="{ 'border-danger': assetForm.invalid('remarks') }"
+                :placeholder="t('views.asset.fields.remarks')"
+                @change="assetForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="assetForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="assetForm.validating || assetForm.hasErrors"
+          >
+            <Lucide v-if="assetForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>{{ t('components.buttons.submit') }}</template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/asset/AssetIndex.vue b/web/src/pages/asset/AssetIndex.vue
new file mode 100644
index 000000000..5867f6a31
--- /dev/null
+++ b/web/src/pages/asset/AssetIndex.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.asset.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const assetNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[assetNotification]', (el: NotificationElement) => {
+  assetNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-asset-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-asset-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.asset.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.asset.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.asset.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (assetNotification.value) {
+    assetNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('ASSET_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('ASSET_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="assetNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/asset/AssetList.vue b/web/src/pages/asset/AssetList.vue
new file mode 100644
index 000000000..e6806ce5f
--- /dev/null
+++ b/web/src/pages/asset/AssetList.vue
@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import AssetService from '@/services/AssetService';
+import DashboardService from '@/services/DashboardService';
+import { Asset } from '@/types/models/Asset';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { AssetReadAnyPaginateRequest } from '@/types/services/asset/AssetRequest';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { DropDownOption } from '@/types/models/DropDownOption';
+
+const { t } = useI18n();
+const router = useRouter();
+const assetService = new AssetService();
+const dashboardService = new DashboardService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const assetLists = ref<Collection<Array<Asset>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+const statusDDL = ref<Array<DropDownOption>>([]);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadStatuses();
+  await getAssets('', true, 1, 10);
+});
+
+const loadStatuses = async () => {
+  const result = await dashboardService.getStatusDDL(false);
+  if (result) {
+    statusDDL.value = result;
+  }
+};
+
+const getStatusLabel = (status: number) => {
+  const selected = statusDDL.value.find((item) => Number(item.code) === Number(status));
+  return selected?.name ?? status;
+};
+
+const getAssets = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const searchReq: AssetReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<Asset>> | null> = await assetService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    assetLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async (data: DataListEmittedData) => {
+  await getAssets(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (itemIdx: number) => {
+  if (!assetLists.value) return;
+
+  const ulid = assetLists.value.data[itemIdx].ulid;
+  router.push({
+    name: 'side-menu-asset-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (itemIdx: number) => {
+  if (!assetLists.value) return;
+
+  deleteUlid.value = assetLists.value.data[itemIdx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await assetService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getAssets('', true, 1, 10);
+    showNotification(t('views.asset.alert.delete_asset.title'), t('views.asset.alert.delete_asset.content'));
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <DataList
+    :title="t('views.asset.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="assetLists ? assetLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">{{ t('views.asset.table.cols.code') }}</Table.Th>
+            <Table.Th class="whitespace-nowrap">{{ t('views.asset.table.cols.name') }}</Table.Th>
+            <Table.Th class="whitespace-nowrap">{{ t('views.asset.table.cols.asset_category') }}</Table.Th>
+            <Table.Th class="whitespace-nowrap">{{ t('views.asset.table.cols.asset_unit') }}</Table.Th>
+            <Table.Th class="whitespace-nowrap">{{ t('views.asset.table.cols.status') }}</Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="assetLists !== null">
+          <template v-if="assetLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="6">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in assetLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>{{ item.asset_category?.name || '-' }}</Table.Td>
+              <Table.Td>{{ item.asset_unit?.name || '-' }}</Table.Td>
+              <Table.Td>{{ getStatusLabel(item.status) }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="6">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset.fields.code') }}</div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset.fields.name') }}</div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset.fields.asset_category_id') }}</div>
+                  <div class="flex-1">{{ item.asset_category?.name || '-' }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset.fields.asset_unit_id') }}</div>
+                  <div class="flex-1">{{ item.asset_unit?.name || '-' }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset.fields.status') }}</div>
+                  <div class="flex-1">{{ getStatusLabel(item.status) }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">{{ t('views.asset.fields.remarks') }}</div>
+                  <div class="flex-1">{{ item.remarks || '-' }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+
+      <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+            <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button type="button" variant="outline-secondary" class="mr-1 w-24" @click="deleteModalShow = false">
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/auth/ForgotPasswordPage.vue b/web/src/pages/auth/ForgotPasswordPage.vue
index 394125104..b614a933d 100644
--- a/web/src/pages/auth/ForgotPasswordPage.vue
+++ b/web/src/pages/auth/ForgotPasswordPage.vue
@@ -1,106 +1,129 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import logoUrl from "@/assets/images/logo.svg";
-import illustrationUrl from "@/assets/images/illustration.svg";
-import { FormInput, FormErrorMessages } from "@/components/Base/Form";
-import Button from "@/components/Base/Button";
-import { useI18n } from "vue-i18n";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import AuthService from "@/services/AuthServices";
-import { useRouter } from "vue-router";
-import Alert from "@/components/Base/Alert";
-
-const { t } = useI18n();
-const router = useRouter();
-
-const authService = new AuthService();
-
-const appName = import.meta.env.VITE_APP_NAME;
-const loading = ref<boolean>(false);
-const status = ref<'onLoad' | 'success' | 'error'>('onLoad');
-const alertMessage = ref<string>('');
-
-const forgotPasswordForm = authService.useRequestResetPasswordForm();
-
-onMounted(async () => {
-    authService.ensureCSRF();
-});
-
-const onSubmit = async () => {
-    loading.value = true;
-
-    forgotPasswordForm.submit().then(() => {
-        status.value = 'success';
-        alertMessage.value = t('views.forgot_password.alert.successfully_send_link');
-    }).catch(error => {
-        status.value = 'error';
-        alertMessage.value = error.response.data.message;
-    }).finally(() => {
-        loading.value = false;
-    });
-};
-</script>
-
-<template>
-    <div :class="[
-        'p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600',
-        'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400',
-        'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700',
-    ]">
-        <div class="container relative z-10 sm:px-10">
-            <div class="block grid-cols-2 gap-4 xl:grid">
-                <div class="flex-col hidden min-h-screen xl:flex">
-                    <a href="" class="flex items-center pt-5 -intro-x">
-                        <img alt="DCSLab" class="w-6" :src="logoUrl" />
-                        <span class="ml-3 text-lg text-white"> {{ appName }} </span>
-                    </a>
-                    <div class="my-auto">
-                        <img alt="DCSLab" class="w-1/2 -mt-16 -intro-x" :src="illustrationUrl" />
-                        <div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x">
-                            <span class="hidden">&nbsp;</span><br />
-                            <span class="hidden">&nbsp;</span>
-                        </div>
-                        <div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400">
-                            <span class="hidden">&nbsp;</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0">
-                    <div
-                        class="w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto">
-                        <LoadingOverlay :visible="loading" :transparent="true">
-                            <h2 class="text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left">
-                                {{ t("views.forgot_password.title") }}
-                            </h2>
-                            <div class="mt-2 text-center intro-x text-slate-400 xl:hidden">
-                                &nbsp;
-                            </div>
-                            <form id="forgotPasswordForm" @submit.prevent="onSubmit">
-                                <Alert v-if="status != 'onLoad'" :variant="status == 'success' ? 'success' : 'danger'" class="mt-2">{{ alertMessage }}</Alert>
-                                <div class="mt-8 intro-x">
-                                    <FormInput v-model="forgotPasswordForm.email" type="text"
-                                        class="block px-4 py-3 intro-x min-w-full xl:min-w-[350px]"
-                                        :class="{ 'border-danger': forgotPasswordForm.invalid('email') }"
-                                        :placeholder="t('views.forgot_password.fields.email')"
-                                        @focus="forgotPasswordForm.forgetError('email')" />
-                                    <FormErrorMessages :messages="forgotPasswordForm.errors.email" />
-                                </div>
-                                <div class="mt-5 text-center intro-x xl:mt-8 xl:text-left">
-                                    <Button v-if="status == 'onLoad'" type="submit" variant="primary"
-                                        class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3">
-                                        {{ t("components.buttons.submit") }}
-                                    </Button>
-                                    <Button type="button" variant="outline-secondary"
-                                        class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0"
-                                        @click="forgotPasswordForm.forgetError('email'); router.push({ name: 'login' });">
-                                        {{ t("components.buttons.login") }}
-                                    </Button>
-                                </div>
-                            </form>
-                        </LoadingOverlay>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import logoUrl from '@/assets/images/logo.svg';
+  import illustrationUrl from '@/assets/images/illustration.svg';
+  import { FormInput, FormErrorMessages } from '@/components/Base/Form';
+  import Button from '@/components/Base/Button';
+  import { useI18n } from 'vue-i18n';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import AuthService from '@/services/AuthServices';
+  import { useRouter } from 'vue-router';
+  import Alert from '@/components/Base/Alert';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const authService = new AuthService();
+
+  const appName = import.meta.env.VITE_APP_NAME;
+  const loading = ref<boolean>(false);
+  const status = ref<'onLoad' | 'success' | 'error'>('onLoad');
+  const alertMessage = ref<string>('');
+
+  const forgotPasswordForm = authService.useRequestResetPasswordForm();
+
+  onMounted(async () => {
+    authService.ensureCSRF();
+  });
+
+  const onSubmit = async () => {
+    loading.value = true;
+
+    forgotPasswordForm
+      .submit()
+      .then(() => {
+        status.value = 'success';
+        alertMessage.value = t('views.forgot_password.alert.successfully_send_link');
+      })
+      .catch((error) => {
+        status.value = 'error';
+        alertMessage.value = error.response.data.message;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+</script>
+
+<template>
+  <div
+    :class="[
+      'p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600',
+      'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400',
+      'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700',
+    ]"
+  >
+    <div class="container relative z-10 sm:px-10">
+      <div class="block grid-cols-2 gap-4 xl:grid">
+        <div class="flex-col hidden min-h-screen xl:flex">
+          <a href="" class="flex items-center pt-5 -intro-x">
+            <img alt="DCSLab" class="w-6" :src="logoUrl" />
+            <span class="ml-3 text-lg text-white">{{ appName }}</span>
+          </a>
+          <div class="my-auto">
+            <img alt="DCSLab" class="w-1/2 -mt-16 -intro-x" :src="illustrationUrl" />
+            <div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x">
+              <span class="hidden">&nbsp;</span>
+              <br />
+              <span class="hidden">&nbsp;</span>
+            </div>
+            <div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400">
+              <span class="hidden">&nbsp;</span>
+            </div>
+          </div>
+        </div>
+        <div class="flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0">
+          <div
+            class="w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto"
+          >
+            <LoadingOverlay :visible="loading" :transparent="true">
+              <h2 class="text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left">
+                {{ t('views.forgot_password.title') }}
+              </h2>
+              <div class="mt-2 text-center intro-x text-slate-400 xl:hidden">&nbsp;</div>
+              <form id="forgotPasswordForm" @submit.prevent="onSubmit">
+                <Alert v-if="status != 'onLoad'" :variant="status == 'success' ? 'success' : 'danger'" class="mt-2">
+                  {{ alertMessage }}
+                </Alert>
+                <div class="mt-8 intro-x">
+                  <FormInput
+                    v-model="forgotPasswordForm.email"
+                    type="text"
+                    class="block px-4 py-3 intro-x min-w-full xl:min-w-[350px]"
+                    :class="{
+                      'border-danger': forgotPasswordForm.invalid('email'),
+                    }"
+                    :placeholder="t('views.forgot_password.fields.email')"
+                    @focus="forgotPasswordForm.forgetError('email')"
+                  />
+                  <FormErrorMessages :messages="forgotPasswordForm.errors.email" />
+                </div>
+                <div class="mt-5 text-center intro-x xl:mt-8 xl:text-left">
+                  <Button
+                    v-if="status == 'onLoad'"
+                    type="submit"
+                    variant="primary"
+                    class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3"
+                  >
+                    {{ t('components.buttons.submit') }}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline-secondary"
+                    class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0"
+                    @click="
+                      forgotPasswordForm.forgetError('email');
+                      router.push({ name: 'login' });
+                    "
+                  >
+                    {{ t('components.buttons.login') }}
+                  </Button>
+                </div>
+              </form>
+            </LoadingOverlay>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/auth/LoginPage.vue b/web/src/pages/auth/LoginPage.vue
index 63a6cd802..25ed05add 100644
--- a/web/src/pages/auth/LoginPage.vue
+++ b/web/src/pages/auth/LoginPage.vue
@@ -1,65 +1,73 @@
 <script setup lang="ts">
-import ThemeSwitcher from "@/components/ThemeSwitcher";
-import logoUrl from "@/assets/images/logo.svg";
-import illustrationUrl from "@/assets/images/illustration.svg";
-import { FormInput, FormCheck, FormErrorMessages } from "@/components/Base/Form";
-import Button from "@/components/Base/Button";
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
-import AuthService from "@/services/AuthServices";
-import { onMounted, ref } from "vue";
-import { LoginResponse } from "@/types/models/Auth";
-import Alert from "@/components/Base/Alert";
+  import ThemeSwitcher from '@/components/ThemeSwitcher';
+  import logoUrl from '@/assets/images/logo.svg';
+  import illustrationUrl from '@/assets/images/illustration.svg';
+  import { FormInput, FormCheck, FormErrorMessages } from '@/components/Base/Form';
+  import Button from '@/components/Base/Button';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import AuthService from '@/services/AuthServices';
+  import { onMounted, ref } from 'vue';
+  import { LoginResponse } from '@/types/models/Auth';
+  import Alert from '@/components/Base/Alert';
 
-const { t } = useI18n();
-const router = useRouter();
+  const { t } = useI18n();
+  const router = useRouter();
 
-const authService = new AuthService();
+  const authService = new AuthService();
 
-const appName = import.meta.env.VITE_APP_NAME;
-const loading = ref<boolean>(false);
-const status = ref<'onLoad' | 'success' | 'error'>('onLoad');
-const alertMessage = ref<string>('');
-const requireTwoFactor = ref<boolean>(false);
-const twoFactorRecoveryCodesMode = ref<boolean>(false);
+  const appName = import.meta.env.VITE_APP_NAME;
+  const loading = ref<boolean>(false);
+  const status = ref<'onLoad' | 'success' | 'error'>('onLoad');
+  const alertMessage = ref<string>('');
+  const requireTwoFactor = ref<boolean>(false);
+  const twoFactorRecoveryCodesMode = ref<boolean>(false);
 
-const loginForm = authService.useLoginForm();
-const twoFactorLoginForm = authService.useTwoFactorLoginForm();
+  const loginForm = authService.useLoginForm();
+  const twoFactorLoginForm = authService.useTwoFactorLoginForm();
 
-onMounted(async () => {
-  authService.ensureCSRF();
-});
+  onMounted(async () => {
+    authService.ensureCSRF();
+  });
 
-const onSubmit = async () => {
-  loading.value = true;
+  const onSubmit = async () => {
+    loading.value = true;
 
-  loginForm.submit().then((response: unknown) => {
-    let loginResp = response as LoginResponse;
-    if (loginResp.data.two_factor) {
-      requireTwoFactor.value = true;
-    } else {
-      router.push({ name: 'side-menu-dashboard-maindashboard' });
-    }
-  }).catch(error => {
-    status.value = 'error';
-    alertMessage.value = error.response.data.message;
-  }).finally(() => {
-    loading.value = false;
-  });
-};
+    loginForm
+      .submit()
+      .then((response: unknown) => {
+        let loginResp = response as LoginResponse;
+        if (loginResp.data.two_factor) {
+          requireTwoFactor.value = true;
+        } else {
+          router.push({ name: 'side-menu-dashboard-maindashboard' });
+        }
+      })
+      .catch((error) => {
+        status.value = 'error';
+        alertMessage.value = error.response.data.message;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
 
-const onTwoFactorLoginSubmit = async () => {
-  loading.value = true;
+  const onTwoFactorLoginSubmit = async () => {
+    loading.value = true;
 
-  twoFactorLoginForm.submit().then(() => {
-    router.push({ name: 'side-menu-dashboard-maindashboard' });
-  }).catch(error => {
-    status.value = 'error';
-    alertMessage.value = error.response.data.message;
-  }).finally(() => {
-    loading.value = false;
-  });
-}
+    twoFactorLoginForm
+      .submit()
+      .then(() => {
+        router.push({ name: 'side-menu-dashboard-maindashboard' });
+      })
+      .catch((error) => {
+        status.value = 'error';
+        alertMessage.value = error.response.data.message;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
 </script>
 
 <template>
@@ -75,28 +83,15 @@ const onTwoFactorLoginSubmit = async () => {
       <div class="block grid-cols-2 gap-4 xl:grid">
         <div class="flex-col hidden min-h-screen xl:flex">
           <a href="" class="flex items-center pt-5 -intro-x">
-            <img
-              alt="DCSLab"
-              class="w-6"
-              :src="logoUrl"
-            />
-            <span class="ml-3 text-lg text-white"> {{ appName }} </span>
+            <img alt="DCSLab" class="w-6" :src="logoUrl" />
+            <span class="ml-3 text-lg text-white">{{ appName }}</span>
           </a>
           <div class="my-auto">
-            <img
-              alt="DCSLab"
-              class="w-1/2 -mt-16 -intro-x"
-              :src="illustrationUrl"
-            />
-            <div
-              class="mt-10 text-4xl font-medium leading-tight text-white -intro-x"
-            >
+            <img alt="DCSLab" class="w-1/2 -mt-16 -intro-x" :src="illustrationUrl" />
+            <div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x">
               <br />
             </div>
-            <div
-              class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400"
-            >              
-            </div>
+            <div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400"></div>
           </div>
         </div>
         <div class="flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0">
@@ -105,12 +100,12 @@ const onTwoFactorLoginSubmit = async () => {
           >
             <LoadingOverlay :visible="loading" :transparent="true">
               <h2 class="text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left">
-              {{ t("views.login.title") }}
+                {{ t('views.login.title') }}
               </h2>
-              <div class="mt-2 text-center intro-x text-slate-400 xl:hidden">
-                &nbsp;
-              </div>
-              <Alert v-if="status != 'onLoad'" :variant="status == 'success' ? 'success' : 'danger'" class="mt-2">{{ alertMessage }}</Alert>
+              <div class="mt-2 text-center intro-x text-slate-400 xl:hidden">&nbsp;</div>
+              <Alert v-if="status != 'onLoad'" :variant="status == 'success' ? 'success' : 'danger'" class="mt-2">
+                {{ alertMessage }}
+              </Alert>
               <form v-if="!requireTwoFactor" id="loginForm" @submit.prevent="onSubmit">
                 <div class="mt-8 intro-x">
                   <FormInput
@@ -132,36 +127,27 @@ const onTwoFactorLoginSubmit = async () => {
                   />
                   <FormErrorMessages :messages="loginForm.errors.password" />
                 </div>
-                <div
-                  class="flex mt-4 text-xs intro-x text-slate-600 dark:text-slate-500 sm:text-sm"
-                >
+                <div class="flex mt-4 text-xs intro-x text-slate-600 dark:text-slate-500 sm:text-sm">
                   <div class="flex items-center mr-auto">
-                    <FormCheck.Input
-                      v-model="loginForm.remember"
-                      type="checkbox"
-                      class="mr-2 border"
-                    />
+                    <FormCheck.Input v-model="loginForm.remember" type="checkbox" class="mr-2 border" />
                     <label class="cursor-pointer select-none" htmlFor="remember-me">
-                      {{ t("views.login.fields.remember_me") }}
+                      {{ t('views.login.fields.remember_me') }}
                     </label>
                   </div>
                   <RouterLink to="/auth/forgot-password">
-                    {{ t("views.login.fields.forgot_pass") }}
+                    {{ t('views.login.fields.forgot_pass') }}
                   </RouterLink>
                 </div>
                 <div class="mt-5 text-center intro-x xl:mt-8 xl:text-left">
-                  <Button
-                    variant="primary"
-                    class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3"
-                  >
-                    {{ t("components.buttons.login") }}
+                  <Button variant="primary" class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3">
+                    {{ t('components.buttons.login') }}
                   </Button>
                   <Button
                     variant="outline-secondary"
                     class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0"
                     @click="router.push({ name: 'register' })"
                   >
-                    {{ t("components.buttons.register") }}
+                    {{ t('components.buttons.register') }}
                   </Button>
                 </div>
               </form>
@@ -170,21 +156,32 @@ const onTwoFactorLoginSubmit = async () => {
                   <FormLabel>
                     {{ t('views.login.fields.2fa.recovery_code') }}
                   </FormLabel>
-                  <FormInput v-model="twoFactorLoginForm.recovery_code" type="text"
-                            class="block px-4 py-3 intro-x min-w-full xl:min-w-[350px]"
-                            :class="{ 'border-danger': twoFactorLoginForm.invalid('recovery_code') }"
-                            :placeholder="t('views.login.fields.2fa.recovery_code')"
-                            @focus="twoFactorLoginForm.forgetError('recovery_code')" />
+                  <FormInput
+                    v-model="twoFactorLoginForm.recovery_code"
+                    type="text"
+                    class="block px-4 py-3 intro-x min-w-full xl:min-w-[350px]"
+                    :class="{
+                      'border-danger': twoFactorLoginForm.invalid('recovery_code'),
+                    }"
+                    :placeholder="t('views.login.fields.2fa.recovery_code')"
+                    @focus="twoFactorLoginForm.forgetError('recovery_code')"
+                  />
                   <FormErrorMessages :messages="twoFactorLoginForm.errors.recovery_code" />
                 </div>
                 <div v-else class="mt-8 intro-x">
                   <FormLabel>
                     {{ t('views.login.fields.2fa.label') }}
                   </FormLabel>
-                  <FormInput v-model="twoFactorLoginForm.code" type="text"
+                  <FormInput
+                    v-model="twoFactorLoginForm.code"
+                    type="text"
                     class="block px-4 py-3 intro-x min-w-full xl:min-w-[350px]"
-                    :class="{ 'border-danger': twoFactorLoginForm.invalid('code') }"
-                    :placeholder="t('views.login.fields.2fa.code')" @focus="twoFactorLoginForm.forgetError('code')" />
+                    :class="{
+                      'border-danger': twoFactorLoginForm.invalid('code'),
+                    }"
+                    :placeholder="t('views.login.fields.2fa.code')"
+                    @focus="twoFactorLoginForm.forgetError('code')"
+                  />
                   <FormErrorMessages :messages="twoFactorLoginForm.errors.code" />
                 </div>
                 <div class="flex mt-4 text-xs intro-x text-slate-600 dark:text-slate-500 sm:text-sm">
@@ -199,21 +196,15 @@ const onTwoFactorLoginSubmit = async () => {
                 </div>
                 <div class="mt-5 text-center intro-x xl:mt-8 xl:text-left">
                   <Button variant="primary" class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3">
-                    {{ t("components.buttons.login") }}
+                    {{ t('components.buttons.login') }}
                   </Button>
                 </div>
               </form>
-              <div
-                class="mt-10 text-center intro-x xl:mt-24 text-slate-600 dark:text-slate-500 xl:text-left"
-              >
+              <div class="mt-10 text-center intro-x xl:mt-24 text-slate-600 dark:text-slate-500 xl:text-left">
                 By signin up, you agree to our
-                <a class="text-primary dark:text-slate-200" href="">
-                  Terms and Conditions
-                </a>
+                <a class="text-primary dark:text-slate-200" href="">Terms and Conditions</a>
                 &
-                <a class="text-primary dark:text-slate-200" href="">
-                  Privacy Policy
-                </a>
+                <a class="text-primary dark:text-slate-200" href="">Privacy Policy</a>
               </div>
             </LoadingOverlay>
           </div>
@@ -221,4 +212,4 @@ const onTwoFactorLoginSubmit = async () => {
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/web/src/pages/auth/RegisterPage.vue b/web/src/pages/auth/RegisterPage.vue
index b604954cb..291f1d613 100644
--- a/web/src/pages/auth/RegisterPage.vue
+++ b/web/src/pages/auth/RegisterPage.vue
@@ -1,131 +1,182 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import ThemeSwitcher from "@/components/ThemeSwitcher";
-import logoUrl from "@/assets/images/logo.svg";
-import illustrationUrl from "@/assets/images/illustration.svg";
-import { FormInput, FormCheck } from "@/components/Base/Form";
-import Button from "@/components/Base/Button";
-import AuthService from "@/services/AuthServices";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
-import Alert from "@/components/Base/Alert";
-
-const { t } = useI18n();
-const router = useRouter();
-
-const authService = new AuthService();
-
-const status = ref<'onLoad' | 'success' | 'error'>('onLoad');
-const alertMessage = ref<string>('');
-const loading = ref<boolean>(false);
-
-const registerForm = authService.useRegisterForm();
-
-onMounted(async () => {
-  authService.ensureCSRF();
-});
-
-const onSubmit = async () => {
-  loading.value = true;
-
-  registerForm.submit().then(() => {
-    router.push({ name: 'side-menu-dashboard-maindashboard' });
-  }).catch(error => {
-    status.value = 'error';
-    alertMessage.value = error.response.data.message;
-  }).finally(() => {
-    loading.value = false;
-  });
-};
-</script>
-
-<template>
-  <div
-    :class="[
-      'p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600',
-      'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400',
-      'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700',
-    ]"
-  >
-    <ThemeSwitcher />
-    <div class="container relative z-10 sm:px-10">
-      <div class="block grid-cols-2 gap-4 xl:grid">
-        <div class="flex-col hidden min-h-screen xl:flex">
-          <a href="" class="flex items-center pt-5 -intro-x">
-            <img alt="DCSLab" class="w-6" :src="logoUrl" />
-            <span class="ml-3 text-lg text-white">
-              {{ t("views.login.fields.email") }}
-            </span>
-          </a>
-          <div class="my-auto">
-            <img alt="DCSLab" class="w-1/2 -mt-16 -intro-x" :src="illustrationUrl" />
-            <div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x">
-              <span class="hidden">&nbsp;</span><br />
-              <span class="hidden">&nbsp;</span>
-            </div>
-            <div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400">
-              <span class="hidden">&nbsp;</span>
-            </div>
-          </div>
-        </div>
-        <div class="flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0">
-          <div
-            class="w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto">
-            <LoadingOverlay :visible="loading" :transparent="true">
-              <h2 class="text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left">
-                {{ t("views.register.title") }}
-              </h2>
-              <div class="mt-2 text-center intro-x text-slate-400 dark:text-slate-400 xl:hidden">
-                &nbsp;
-              </div>
-              <form id="registerForm" @submit.prevent="onSubmit">
-                <Alert v-if="status != 'onLoad'" :variant="status == 'success' ? 'success' : 'danger'" class="mt-2">{{ alertMessage }}</Alert>
-                <div class="mt-8 intro-x">
-                  <FormInput v-model="registerForm.name" type="text"
-                    :class="{ 'block px-4 py-3 intro-x min-w-full xl:min-w-[350px]': true, 'border-danger': registerForm.invalid('name') }"
-                    :placeholder="t('views.register.fields.name')" @focus="registerForm.forgetError('name')" />
-                  <span class="ml-1 text-danger">{{ registerForm.errors.name }}</span>
-                  <FormInput v-model="registerForm.email" type="text"
-                    :class="{ 'block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]': true, 'border-danger': registerForm.invalid('email') }"
-                    :placeholder="t('views.register.fields.email')" @focus="registerForm.forgetError('email')" />
-                  <span class="ml-1 text-danger">{{ registerForm.errors.email }}</span>
-                  <FormInput v-model="registerForm.password" type="password"
-                    :class="{ 'block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]': true, 'border-danger': registerForm.invalid('password') }"
-                    :placeholder="t('views.register.fields.password')" @focus="registerForm.forgetError('password')" />
-                  <span class="ml-1 text-danger">{{ registerForm.errors.password }}</span>
-                  <FormInput v-model="registerForm.password_confirmation" type="password"
-                    :class="{ 'block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]': true, 'border-danger': registerForm.invalid('password') }"
-                    :placeholder="t('views.register.fields.password_confirmation')"
-                    @focus="registerForm.forgetError('password_confirmation')" />
-                  <span class="ml-1 text-danger">{{ registerForm.errors.password }}</span>
-                </div>
-                <div class="flex flex-col items-start mt-4 text-xs intro-x text-slate-600 dark:text-slate-500 sm:text-sm">
-                  <FormCheck>
-                    <FormCheck.Input v-model="registerForm.terms" type="checkbox"
-                      :class="{ 'border-danger': registerForm.errors.terms }"
-                      @focus="registerForm.forgetError('terms')" />
-                    <FormCheck.Label class="cursor-pointer select-none">
-                      I agree to the
-                      {{ t("views.register.fields.terms_and_cond") }}
-                    </FormCheck.Label>
-                  </FormCheck>
-                  <span class="ml-1 text-danger">{{ registerForm.errors.terms }}</span>
-                </div>
-                <div class="mt-5 text-center intro-x xl:mt-8 xl:text-left">
-                  <Button variant="primary" class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3">
-                    {{ t("components.buttons.register") }}
-                  </Button>
-                  <Button variant="outline-secondary" class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0"
-                    @click="router.push({ name: 'login' })">
-                    {{ t("components.buttons.login") }}
-                  </Button>
-                </div>
-              </form>
-            </LoadingOverlay>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import ThemeSwitcher from '@/components/ThemeSwitcher';
+  import logoUrl from '@/assets/images/logo.svg';
+  import illustrationUrl from '@/assets/images/illustration.svg';
+  import { FormInput, FormCheck } from '@/components/Base/Form';
+  import Button from '@/components/Base/Button';
+  import AuthService from '@/services/AuthServices';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import Alert from '@/components/Base/Alert';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const authService = new AuthService();
+
+  const status = ref<'onLoad' | 'success' | 'error'>('onLoad');
+  const alertMessage = ref<string>('');
+  const loading = ref<boolean>(false);
+
+  const registerForm = authService.useRegisterForm();
+
+  onMounted(async () => {
+    authService.ensureCSRF();
+  });
+
+  const onSubmit = async () => {
+    loading.value = true;
+
+    registerForm
+      .submit()
+      .then(() => {
+        router.push({ name: 'side-menu-dashboard-maindashboard' });
+      })
+      .catch((error) => {
+        status.value = 'error';
+        alertMessage.value = error.response.data.message;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+</script>
+
+<template>
+  <div
+    :class="[
+      'p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600',
+      'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400',
+      'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700',
+    ]"
+  >
+    <ThemeSwitcher />
+    <div class="container relative z-10 sm:px-10">
+      <div class="block grid-cols-2 gap-4 xl:grid">
+        <div class="flex-col hidden min-h-screen xl:flex">
+          <a href="" class="flex items-center pt-5 -intro-x">
+            <img alt="DCSLab" class="w-6" :src="logoUrl" />
+            <span class="ml-3 text-lg text-white">
+              {{ t('views.login.fields.email') }}
+            </span>
+          </a>
+          <div class="my-auto">
+            <img alt="DCSLab" class="w-1/2 -mt-16 -intro-x" :src="illustrationUrl" />
+            <div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x">
+              <span class="hidden">&nbsp;</span>
+              <br />
+              <span class="hidden">&nbsp;</span>
+            </div>
+            <div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400">
+              <span class="hidden">&nbsp;</span>
+            </div>
+          </div>
+        </div>
+        <div class="flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0">
+          <div
+            class="w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto"
+          >
+            <LoadingOverlay :visible="loading" :transparent="true">
+              <h2 class="text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left">
+                {{ t('views.register.title') }}
+              </h2>
+              <div class="mt-2 text-center intro-x text-slate-400 dark:text-slate-400 xl:hidden">&nbsp;</div>
+              <form id="registerForm" @submit.prevent="onSubmit">
+                <Alert v-if="status != 'onLoad'" :variant="status == 'success' ? 'success' : 'danger'" class="mt-2">
+                  {{ alertMessage }}
+                </Alert>
+                <div class="mt-8 intro-x">
+                  <FormInput
+                    v-model="registerForm.name"
+                    type="text"
+                    :class="{
+                      'block px-4 py-3 intro-x min-w-full xl:min-w-[350px]': true,
+                      'border-danger': registerForm.invalid('name'),
+                    }"
+                    :placeholder="t('views.register.fields.name')"
+                    @focus="registerForm.forgetError('name')"
+                  />
+                  <span class="ml-1 text-danger">
+                    {{ registerForm.errors.name }}
+                  </span>
+                  <FormInput
+                    v-model="registerForm.email"
+                    type="text"
+                    :class="{
+                      'block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]': true,
+                      'border-danger': registerForm.invalid('email'),
+                    }"
+                    :placeholder="t('views.register.fields.email')"
+                    @focus="registerForm.forgetError('email')"
+                  />
+                  <span class="ml-1 text-danger">
+                    {{ registerForm.errors.email }}
+                  </span>
+                  <FormInput
+                    v-model="registerForm.password"
+                    type="password"
+                    :class="{
+                      'block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]': true,
+                      'border-danger': registerForm.invalid('password'),
+                    }"
+                    :placeholder="t('views.register.fields.password')"
+                    @focus="registerForm.forgetError('password')"
+                  />
+                  <span class="ml-1 text-danger">
+                    {{ registerForm.errors.password }}
+                  </span>
+                  <FormInput
+                    v-model="registerForm.password_confirmation"
+                    type="password"
+                    :class="{
+                      'block px-4 py-3 mt-4 intro-x min-w-full xl:min-w-[350px]': true,
+                      'border-danger': registerForm.invalid('password'),
+                    }"
+                    :placeholder="t('views.register.fields.password_confirmation')"
+                    @focus="registerForm.forgetError('password_confirmation')"
+                  />
+                  <span class="ml-1 text-danger">
+                    {{ registerForm.errors.password }}
+                  </span>
+                </div>
+                <div
+                  class="flex flex-col items-start mt-4 text-xs intro-x text-slate-600 dark:text-slate-500 sm:text-sm"
+                >
+                  <FormCheck>
+                    <FormCheck.Input
+                      v-model="registerForm.terms"
+                      type="checkbox"
+                      :class="{ 'border-danger': registerForm.errors.terms }"
+                      @focus="registerForm.forgetError('terms')"
+                    />
+                    <FormCheck.Label class="cursor-pointer select-none">
+                      I agree to the
+                      {{ t('views.register.fields.terms_and_cond') }}
+                    </FormCheck.Label>
+                  </FormCheck>
+                  <span class="ml-1 text-danger">
+                    {{ registerForm.errors.terms }}
+                  </span>
+                </div>
+                <div class="mt-5 text-center intro-x xl:mt-8 xl:text-left">
+                  <Button variant="primary" class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3">
+                    {{ t('components.buttons.register') }}
+                  </Button>
+                  <Button
+                    variant="outline-secondary"
+                    class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0"
+                    @click="router.push({ name: 'login' })"
+                  >
+                    {{ t('components.buttons.login') }}
+                  </Button>
+                </div>
+              </form>
+            </LoadingOverlay>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/auth/ResetPasswordPage.vue b/web/src/pages/auth/ResetPasswordPage.vue
index 4ccb866a3..cae022e14 100644
--- a/web/src/pages/auth/ResetPasswordPage.vue
+++ b/web/src/pages/auth/ResetPasswordPage.vue
@@ -1,134 +1,165 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import logoUrl from "@/assets/images/logo.svg";
-import illustrationUrl from "@/assets/images/illustration.svg";
-import { FormInput, FormErrorMessages } from "@/components/Base/Form";
-import Button from "@/components/Base/Button";
-import { useI18n } from "vue-i18n";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import AuthService from "@/services/AuthServices";
-import { useRouter } from "vue-router";
-import Alert from "@/components/Base/Alert";
-
-const { t } = useI18n();
-const router = useRouter();
-
-const authService = new AuthService();
-
-const appName = import.meta.env.VITE_APP_NAME;
-const loading = ref<boolean>(false);
-const status = ref<'onLoad' | 'finishResetting' | 'resettingError'>('onLoad');
-const statusMessage = ref<string>('');
-
-const resetPasswordForm = authService.useResetPasswordForm();
-
-onMounted(async () => {
-    authService.ensureCSRF();
-
-    const searchParams = new URLSearchParams(window.location.search);
-    resetPasswordForm.setData({
-        token: searchParams.get('token'),
-        email: searchParams.get('email'),
-    });
-});
-
-const onSubmit = async () => {
-    loading.value = true;
-
-    resetPasswordForm.submit().then(() => {
-        status.value = 'finishResetting';
-        statusMessage.value = t('views.reset_password.alert.successfully_reset_password');
-    }).catch(error => {
-        status.value = 'resettingError';
-        statusMessage.value = error.response.data.message;
-    }).finally(() => {
-        loading.value = false;
-    });
-};
-
-const doReset = () => {
-    const searchParams = new URLSearchParams(window.location.search);
-    resetPasswordForm.reset();
-    resetPasswordForm.setData({
-        token: searchParams.get('token'),
-        email: searchParams.get('email'),
-    });
-};
-</script>
-
-<template>
-    <div :class="[
-        'p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600',
-        'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400',
-        'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700',
-    ]">
-        <div class="container relative z-10 sm:px-10">
-            <div class="block grid-cols-2 gap-4 xl:grid">
-                <div class="flex-col hidden min-h-screen xl:flex">
-                    <a href="" class="flex items-center pt-5 -intro-x">
-                        <img alt="DCSLab" class="w-6" :src="logoUrl" />
-                        <span class="ml-3 text-lg text-white"> {{ appName }} </span>
-                    </a>
-                    <div class="my-auto">
-                        <img alt="DCSLab" class="w-1/2 -mt-16 -intro-x" :src="illustrationUrl" />
-                        <div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x">
-                            <span class="hidden">&nbsp;</span><br />
-                            <span class="hidden">&nbsp;</span>
-                        </div>
-                        <div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400">
-                            <span class="hidden">&nbsp;</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0">
-                    <div
-                        class="w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto">
-                        <LoadingOverlay :visible="loading" :transparent="true">
-                            <h2 class="text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left">
-                                {{ t("views.reset_password.title") }}
-                            </h2>
-                            <div class="mt-2 text-center intro-x text-slate-400 xl:hidden">
-                                &nbsp;
-                            </div>
-                            <form id="forgotPasswordForm" @submit.prevent="onSubmit">
-                                <Alert v-if="status != 'onLoad'" :variant="status == 'finishResetting' ? 'success' : 'danger'" class="mt-2">{{ statusMessage }}</Alert>
-                                <div v-if="status == 'onLoad'" class="mt-8 intro-x">
-                                    <input type="hidden" v-model="resetPasswordForm.token" />
-                                    <input type="hidden" v-model="resetPasswordForm.email" />
-                                    <FormInput v-model="resetPasswordForm.password" type="password"
-                                        class="block px-4 py-3 intro-x login__input min-w-full xl:min-w-[350px]"
-                                        :class="{ 'border-danger': resetPasswordForm.invalid('password') }"
-                                        :placeholder="t('views.reset_password.fields.password')"
-                                        @focus="resetPasswordForm.forgetError('password')" />
-                                    <FormErrorMessages :messages="resetPasswordForm.errors.email" />
-                                    <FormErrorMessages :messages="resetPasswordForm.errors.password" />
-                                    <FormInput v-model="resetPasswordForm.password_confirmation" type="password"
-                                        class="block px-4 py-3 mt-4 intro-x login__input min-w-full xl:min-w-[350px]"
-                                        :class="{ 'border-danger': resetPasswordForm.invalid('password') }"
-                                        :placeholder="t('views.reset_password.fields.password_confirmation')"
-                                        @focus="resetPasswordForm.forgetError('password')" />
-                                    <FormErrorMessages :messages="resetPasswordForm.errors.password" />
-                                </div>
-                                <div class="mt-5 text-center intro-x xl:mt-8 xl:text-left">
-                                    <template v-if="status != 'finishResetting'">
-                                        <Button type="submit" variant="primary" class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3">
-                                            {{ t("components.buttons.submit") }}
-                                        </Button>
-                                        <Button type="button" variant="outline-secondary" class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0" @click="doReset">
-                                            {{ t("components.buttons.reset") }}
-                                        </Button>
-                                    </template>
-                                    <Button v-else type="button" variant="outline-secondary"
-                                        class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0"
-                                        @click="router.push({ name: 'login' });">
-                                        {{ t("components.buttons.login") }}
-                                    </Button>
-                                </div>
-                            </form>
-                        </LoadingOverlay>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import logoUrl from '@/assets/images/logo.svg';
+  import illustrationUrl from '@/assets/images/illustration.svg';
+  import { FormInput, FormErrorMessages } from '@/components/Base/Form';
+  import Button from '@/components/Base/Button';
+  import { useI18n } from 'vue-i18n';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import AuthService from '@/services/AuthServices';
+  import { useRouter } from 'vue-router';
+  import Alert from '@/components/Base/Alert';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const authService = new AuthService();
+
+  const appName = import.meta.env.VITE_APP_NAME;
+  const loading = ref<boolean>(false);
+  const status = ref<'onLoad' | 'finishResetting' | 'resettingError'>('onLoad');
+  const statusMessage = ref<string>('');
+
+  const resetPasswordForm = authService.useResetPasswordForm();
+
+  onMounted(async () => {
+    authService.ensureCSRF();
+
+    const searchParams = new URLSearchParams(window.location.search);
+    resetPasswordForm.setData({
+      token: searchParams.get('token'),
+      email: searchParams.get('email'),
+    });
+  });
+
+  const onSubmit = async () => {
+    loading.value = true;
+
+    resetPasswordForm
+      .submit()
+      .then(() => {
+        status.value = 'finishResetting';
+        statusMessage.value = t('views.reset_password.alert.successfully_reset_password');
+      })
+      .catch((error) => {
+        status.value = 'resettingError';
+        statusMessage.value = error.response.data.message;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  const doReset = () => {
+    const searchParams = new URLSearchParams(window.location.search);
+    resetPasswordForm.reset();
+    resetPasswordForm.setData({
+      token: searchParams.get('token'),
+      email: searchParams.get('email'),
+    });
+  };
+</script>
+
+<template>
+  <div
+    :class="[
+      'p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600',
+      'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400',
+      'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700',
+    ]"
+  >
+    <div class="container relative z-10 sm:px-10">
+      <div class="block grid-cols-2 gap-4 xl:grid">
+        <div class="flex-col hidden min-h-screen xl:flex">
+          <a href="" class="flex items-center pt-5 -intro-x">
+            <img alt="DCSLab" class="w-6" :src="logoUrl" />
+            <span class="ml-3 text-lg text-white">{{ appName }}</span>
+          </a>
+          <div class="my-auto">
+            <img alt="DCSLab" class="w-1/2 -mt-16 -intro-x" :src="illustrationUrl" />
+            <div class="mt-10 text-4xl font-medium leading-tight text-white -intro-x">
+              <span class="hidden">&nbsp;</span>
+              <br />
+              <span class="hidden">&nbsp;</span>
+            </div>
+            <div class="mt-5 text-lg text-white -intro-x text-opacity-70 dark:text-slate-400">
+              <span class="hidden">&nbsp;</span>
+            </div>
+          </div>
+        </div>
+        <div class="flex h-screen py-5 my-10 xl:h-auto xl:py-0 xl:my-0">
+          <div
+            class="w-full px-5 py-8 mx-auto my-auto bg-white rounded-md shadow-md xl:ml-20 dark:bg-darkmode-600 xl:bg-transparent sm:px-8 xl:p-0 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto"
+          >
+            <LoadingOverlay :visible="loading" :transparent="true">
+              <h2 class="text-2xl font-bold text-center intro-x xl:text-3xl xl:text-left">
+                {{ t('views.reset_password.title') }}
+              </h2>
+              <div class="mt-2 text-center intro-x text-slate-400 xl:hidden">&nbsp;</div>
+              <form id="forgotPasswordForm" @submit.prevent="onSubmit">
+                <Alert
+                  v-if="status != 'onLoad'"
+                  :variant="status == 'finishResetting' ? 'success' : 'danger'"
+                  class="mt-2"
+                >
+                  {{ statusMessage }}
+                </Alert>
+                <div v-if="status == 'onLoad'" class="mt-8 intro-x">
+                  <input type="hidden" v-model="resetPasswordForm.token" />
+                  <input type="hidden" v-model="resetPasswordForm.email" />
+                  <FormInput
+                    v-model="resetPasswordForm.password"
+                    type="password"
+                    class="block px-4 py-3 intro-x login__input min-w-full xl:min-w-[350px]"
+                    :class="{
+                      'border-danger': resetPasswordForm.invalid('password'),
+                    }"
+                    :placeholder="t('views.reset_password.fields.password')"
+                    @focus="resetPasswordForm.forgetError('password')"
+                  />
+                  <FormErrorMessages :messages="resetPasswordForm.errors.email" />
+                  <FormErrorMessages :messages="resetPasswordForm.errors.password" />
+                  <FormInput
+                    v-model="resetPasswordForm.password_confirmation"
+                    type="password"
+                    class="block px-4 py-3 mt-4 intro-x login__input min-w-full xl:min-w-[350px]"
+                    :class="{
+                      'border-danger': resetPasswordForm.invalid('password'),
+                    }"
+                    :placeholder="t('views.reset_password.fields.password_confirmation')"
+                    @focus="resetPasswordForm.forgetError('password')"
+                  />
+                  <FormErrorMessages :messages="resetPasswordForm.errors.password" />
+                </div>
+                <div class="mt-5 text-center intro-x xl:mt-8 xl:text-left">
+                  <template v-if="status != 'finishResetting'">
+                    <Button type="submit" variant="primary" class="w-full px-4 py-3 align-top xl:w-32 xl:mr-3">
+                      {{ t('components.buttons.submit') }}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0"
+                      @click="doReset"
+                    >
+                      {{ t('components.buttons.reset') }}
+                    </Button>
+                  </template>
+                  <Button
+                    v-else
+                    type="button"
+                    variant="outline-secondary"
+                    class="w-full px-4 py-3 mt-3 align-top xl:w-32 xl:mt-0"
+                    @click="router.push({ name: 'login' })"
+                  >
+                    {{ t('components.buttons.login') }}
+                  </Button>
+                </div>
+              </form>
+            </LoadingOverlay>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/balance-sheet/BalanceSheetIndex.vue b/web/src/pages/balance-sheet/BalanceSheetIndex.vue
new file mode 100644
index 000000000..e303e7e2e
--- /dev/null
+++ b/web/src/pages/balance-sheet/BalanceSheetIndex.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const mode = ref<ViewMode>(ViewMode.LIST);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.balance_sheet.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-dashboard-maindashboard' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+      />
+    </LoadingOverlay>
+  </div>
+</template>
diff --git a/web/src/pages/balance-sheet/BalanceSheetList.vue b/web/src/pages/balance-sheet/BalanceSheetList.vue
new file mode 100644
index 000000000..a1b7ef3d3
--- /dev/null
+++ b/web/src/pages/balance-sheet/BalanceSheetList.vue
@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { FormInputDateTime, FormLabel } from '@/components/Base/Form';
+import Table from '@/components/Base/Table';
+import TreeList from '@/components/TreeList/TreeList.vue';
+import ChartOfAccountService from '@/services/ChartOfAccountService';
+import JournalEntryItemService from '@/services/JournalEntryItemService';
+import { ChartOfAccount } from '@/types/models/ChartOfAccount';
+import { JournalEntryItem } from '@/types/models/JournalEntry';
+import { Resource } from '@/types/resources/Resource';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+
+interface TreeListRef {
+  expandAll: () => void;
+  collapseAll: () => void;
+}
+
+interface BalanceSheetNode extends ChartOfAccount {
+  children?: Array<BalanceSheetNode>;
+  ownDebit: number;
+  ownCredit: number;
+  ownBalance: number;
+  balance: number;
+}
+
+type SummaryAccountType = 'asset' | 'liability' | 'equity';
+
+const { t } = useI18n();
+const router = useRouter();
+const chartOfAccountService = new ChartOfAccountService();
+const journalEntryItemService = new JournalEntryItemService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'show-alertplaceholder',
+]);
+
+const treeListRef = ref<TreeListRef | null>(null);
+const filters = ref<{
+  end_date: string | null;
+}>({
+  end_date: null,
+});
+
+const chartOfAccountLists = ref<Resource<Array<ChartOfAccount>> | null>({
+  data: [],
+});
+
+const journalEntryItemLists = ref<Resource<Array<JournalEntryItem>> | null>({
+  data: [],
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const accountBalances = computed(() => {
+  const result = new Map<string, { debit: number; credit: number }>();
+
+  for (const item of journalEntryItemLists.value?.data ?? []) {
+    const chartOfAccountId = item.chart_of_account?.id;
+    if (!chartOfAccountId) continue;
+
+    const current = result.get(chartOfAccountId) ?? { debit: 0, credit: 0 };
+    current.debit += Number(item.debit ?? 0);
+    current.credit += Number(item.credit ?? 0);
+    result.set(chartOfAccountId, current);
+  }
+
+  return result;
+});
+
+const balanceSheetItems = computed<Array<BalanceSheetNode>>(() => {
+  const rootItems = chartOfAccountLists.value?.data ?? [];
+
+  const normalizeAccount = (account: ChartOfAccount): BalanceSheetNode | null => {
+    if (!['asset', 'liability', 'equity'].includes(account.account_type)) {
+      return null;
+    }
+
+    const current = accountBalances.value.get(account.id) ?? { debit: 0, credit: 0 };
+    const children = (account.children ?? [])
+      .map((child) => normalizeAccount(child))
+      .filter((child): child is BalanceSheetNode => child !== null);
+
+    const ownBalance = account.normal_balance === 'debit'
+      ? current.debit - current.credit
+      : current.credit - current.debit;
+
+    const balance = ownBalance + children.reduce((total, child) => total + child.balance, 0);
+
+    return {
+      ...account,
+      children,
+      ownDebit: current.debit,
+      ownCredit: current.credit,
+      ownBalance,
+      balance,
+    };
+  };
+
+  return rootItems
+    .map((item) => normalizeAccount(item))
+    .filter((item): item is BalanceSheetNode => item !== null);
+});
+
+const summaryBalance = computed<Record<SummaryAccountType, number>>(() => {
+  const result: Record<SummaryAccountType, number> = {
+    asset: 0,
+    liability: 0,
+    equity: 0,
+  };
+
+  for (const item of balanceSheetItems.value) {
+    result[item.account_type as SummaryAccountType] += item.balance;
+  }
+
+  return result;
+});
+
+const totalLiabilityAndEquity = computed(() => summaryBalance.value.liability + summaryBalance.value.equity);
+
+const balanceDifference = computed(() => summaryBalance.value.asset - totalLiabilityAndEquity.value);
+
+const isBalanced = computed(() => balanceDifference.value === 0);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  filters.value.end_date = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getBalanceSheet(true);
+});
+
+const getBalanceSheet = async (refresh: boolean) => {
+  emits('loading-state', true);
+
+  const chartOfAccountResult: ServiceResponse<Resource<Array<ChartOfAccount>> | null> =
+    await chartOfAccountService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search: '',
+      has_parent: false,
+      refresh,
+      limit: 1000,
+    });
+
+  const journalEntryItemResult: ServiceResponse<Resource<Array<JournalEntryItem>> | null> =
+    await journalEntryItemService.readAnyGet({
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      end_date: filters.value.end_date || undefined,
+      include_system_journals: true,
+      refresh,
+      limit: 1000,
+    });
+
+  if (chartOfAccountResult.success && chartOfAccountResult.data && journalEntryItemResult.success && journalEntryItemResult.data) {
+    chartOfAccountLists.value = chartOfAccountResult.data;
+    journalEntryItemLists.value = journalEntryItemResult.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder(
+      'danger',
+      '',
+      ((chartOfAccountResult.errors ?? journalEntryItemResult.errors) as Record<string, Array<string>> | undefined) ?? null,
+    );
+  }
+
+  emits('loading-state', false);
+};
+
+const handleFilterChange = async () => {
+  await getBalanceSheet(true);
+};
+
+const getRowIndentStyle = (depth: number) => ({
+  paddingLeft: `${depth * 1.5}rem`,
+});
+
+const expandAllTreeRows = () => {
+  treeListRef.value?.expandAll();
+};
+
+const collapseAllTreeRows = () => {
+  treeListRef.value?.collapseAll();
+};
+
+const toBalanceSheetNode = (item: unknown): BalanceSheetNode => item as BalanceSheetNode;
+
+const isGroupRow = (item: unknown) => {
+  const balanceSheetNode = toBalanceSheetNode(item);
+  return balanceSheetNode.children !== undefined && balanceSheetNode.children.length > 0;
+};
+
+const getDisplayedDebit = (item: unknown) => {
+  const balanceSheetNode = toBalanceSheetNode(item);
+  return isGroupRow(balanceSheetNode) ? null : balanceSheetNode.ownDebit;
+};
+
+const getDisplayedCredit = (item: unknown) => {
+  const balanceSheetNode = toBalanceSheetNode(item);
+  return isGroupRow(balanceSheetNode) ? null : balanceSheetNode.ownCredit;
+};
+
+const getDisplayedBalance = (item: unknown) => {
+  const balanceSheetNode = toBalanceSheetNode(item);
+  return isGroupRow(balanceSheetNode) ? balanceSheetNode.balance : balanceSheetNode.ownBalance;
+};
+
+const getDisplayedGroupBalance = (item: unknown, isExpanded: boolean) => {
+  const balanceSheetNode = toBalanceSheetNode(item);
+
+  if (!isGroupRow(balanceSheetNode)) {
+    return formatCurrency(balanceSheetNode.ownBalance);
+  }
+
+  return isExpanded ? '' : formatCurrency(balanceSheetNode.balance);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-4 md:col-span-6">
+          <FormLabel>
+            {{ t('views.balance_sheet.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime
+            v-model="filters.end_date"
+            :placeholder="t('views.balance_sheet.fields.end_date')"
+            @change="handleFilterChange"
+          />
+        </div>
+        <div class="col-span-12 lg:col-span-8 md:col-span-6 flex items-end justify-end gap-2">
+          <Button variant="outline-secondary" @click="collapseAllTreeRows">
+            <Lucide icon="ChevronsUpDown" class="mr-1 h-4 w-4" />
+            {{ t('views.balance_sheet.actions.collapse_all') }}
+          </Button>
+          <Button variant="outline-secondary" @click="expandAllTreeRows">
+            <Lucide icon="ListTree" class="mr-1 h-4 w-4" />
+            {{ t('views.balance_sheet.actions.expand_all') }}
+          </Button>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 gap-4 mb-4 lg:grid-cols-3">
+        <div class="rounded border border-slate-200 bg-white p-4 dark:border-darkmode-400 dark:bg-darkmode-600">
+          <div class="text-slate-500 text-xs uppercase">{{ t('views.balance_sheet.summary.asset') }}</div>
+          <div class="mt-1 text-lg font-medium">{{ formatCurrency(summaryBalance.asset) }}</div>
+        </div>
+        <div class="rounded border border-slate-200 bg-white p-4 dark:border-darkmode-400 dark:bg-darkmode-600">
+          <div class="text-slate-500 text-xs uppercase">{{ t('views.balance_sheet.summary.liability_and_equity') }}</div>
+          <div class="mt-1 text-lg font-medium">{{ formatCurrency(totalLiabilityAndEquity) }}</div>
+          <div class="mt-1 text-xs text-slate-500">
+            {{ t('views.balance_sheet.summary.liability') }}: {{ formatCurrency(summaryBalance.liability) }}
+          </div>
+          <div class="text-xs text-slate-500">
+            {{ t('views.balance_sheet.summary.equity') }}: {{ formatCurrency(summaryBalance.equity) }}
+          </div>
+        </div>
+        <div
+          class="rounded border p-4"
+          :class="isBalanced
+            ? 'border-success/30 bg-success/5 dark:border-success/20 dark:bg-success/10'
+            : 'border-warning/30 bg-warning/5 dark:border-warning/20 dark:bg-warning/10'"
+        >
+          <div class="text-slate-500 text-xs uppercase">{{ t('views.balance_sheet.summary.difference') }}</div>
+          <div class="mt-1 text-lg font-medium">{{ formatCurrency(Math.abs(balanceDifference)) }}</div>
+          <div class="mt-1 text-xs" :class="isBalanced ? 'text-success' : 'text-warning'">
+            {{
+              isBalanced
+                ? t('views.balance_sheet.summary.status_balanced')
+                : t('views.balance_sheet.summary.status_unbalanced')
+            }}
+          </div>
+        </div>
+      </div>
+
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.balance_sheet.fields.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.balance_sheet.fields.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap text-right">
+              {{ t('views.balance_sheet.fields.debit') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap text-right">
+              {{ t('views.balance_sheet.fields.credit') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap text-right">
+              {{ t('views.balance_sheet.fields.balance') }}
+            </Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <template v-if="balanceSheetItems.length === 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <TreeList v-else ref="treeListRef" :items="balanceSheetItems">
+            <template #row="{ item, depth, hasChildren, isExpanded, toggle }">
+              <Table.Tr class="intro-x">
+                <Table.Td class="font-medium">
+                  {{ item.code }}
+                </Table.Td>
+                <Table.Td>
+                  <div class="flex items-center gap-2" :style="getRowIndentStyle(depth)">
+                    <button
+                      v-if="hasChildren"
+                      type="button"
+                      class="flex h-5 w-5 items-center justify-center rounded border border-slate-200 text-slate-500 transition hover:bg-slate-100"
+                      :aria-label="isExpanded ? 'Collapse row' : 'Expand row'"
+                      @click="toggle()"
+                    >
+                      <Lucide :icon="isExpanded ? 'ChevronDown' : 'ChevronRight'" class="h-3 w-3" />
+                    </button>
+                    <Lucide v-else-if="depth > 0" icon="CornerDownRight" class="h-4 w-4 text-slate-400" />
+                    <div v-else class="w-5"></div>
+                    <div class="flex flex-col">
+                      <span :class="{ 'font-medium': item.is_group }">{{ item.name }}</span>
+                      <span class="text-xs text-slate-400">
+                        {{
+                          isGroupRow(item)
+                            ? t('views.balance_sheet.labels.group_total')
+                            : t('views.balance_sheet.labels.direct_mutation')
+                        }}
+                      </span>
+                    </div>
+                  </div>
+                </Table.Td>
+                <Table.Td class="text-right">
+                  {{
+                    getDisplayedDebit(item) === null
+                      ? '-'
+                      : formatCurrency(getDisplayedDebit(item) as number)
+                  }}
+                </Table.Td>
+                <Table.Td class="text-right">
+                  {{
+                    getDisplayedCredit(item) === null
+                      ? '-'
+                      : formatCurrency(getDisplayedCredit(item) as number)
+                  }}
+                </Table.Td>
+                <Table.Td class="text-right">
+                  {{
+                    isGroupRow(item)
+                      ? getDisplayedGroupBalance(item, isExpanded)
+                      : formatCurrency(getDisplayedBalance(item))
+                  }}
+                </Table.Td>
+              </Table.Tr>
+            </template>
+          </TreeList>
+        </Table.Tbody>
+      </Table>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/branch/BranchCreate.vue b/web/src/pages/branch/BranchCreate.vue
index 23f72671e..4fac5d4a3 100644
--- a/web/src/pages/branch/BranchCreate.vue
+++ b/web/src/pages/branch/BranchCreate.vue
@@ -1,280 +1,349 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref, computed, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import BranchService from "@/services/BranchService";
-import DashboardService from "@/services/DashboardService";
-import CacheService from "@/services/CacheService";
-import { DropDownOption } from "@/types/models/DropDownOption";
-import { TwoColumnsLayout } from "@/components/Base/Form/FormLayout";
-import {
-    FormInput,
-    FormLabel,
-    FormTextarea,
-    FormSelect,
-    FormInputCode,
-    FormSwitch,
-    FormErrorMessages
-} from "@/components/Base/Form";
-import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
-import { CardState } from "@/types/enums/CardState";
-import Button from "@/components/Base/Button";
-import { ViewMode } from "@/types/enums/ViewMode";
-import { debounce } from "lodash";
-import Lucide from "@/components/Base/Lucide";
-import { useSelectedUserLocationStore } from "@/stores/selected-user-location";
-import { useRouter } from "vue-router";
-import { ErrorCode } from "@/types/enums/ErrorCode";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-const branchServices = new BranchService();
-const dashboardServices = new DashboardService();
-const cacheServices = new CacheService();
-
-const selectedUserLocationStore = useSelectedUserLocationStore();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
-// #endregion
-
-// #region Refs
-const cards = ref<Array<TwoColumnsLayoutCards>>([
-    { title: 'views.branch.field_groups.company_info', state: CardState.Expanded, },
-    { title: 'views.branch.field_groups.branch_data', state: CardState.Expanded, },
-    { title: '', state: CardState.Hidden, id: 'button' }
-]);
-
-const statusDDL = ref<Array<DropDownOption> | null>(null);
-
-const branchForm = branchServices.useBranchCreateForm();
-// #endregion
-
-// #region Computed
-const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
-const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-    emits('mode-state', ViewMode.FORM_CREATE);
-
-    if (!isUserLocationSelected.value) {
-        router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
-    }
-
-    getDDL();
-
-    setCompanyIdData();
-    loadFromCache();
-});
-// #endregion
-
-// #region Methods
-const setCompanyIdData = () => {
-    branchForm.setData({
-        company_id: selectedUserLocation.value.company.id,
-    });
-};
-
-const loadFromCache = () => {
-    let data = cacheServices.getLastEntity('BRANCH_CREATE') as Record<string, unknown>;
-    if (!data) return;
-    branchForm.setData(data);
-};
-
-const getDDL = (): void => {
-    dashboardServices.getStatusDDL().then((result: Array<DropDownOption> | null) => {
-        statusDDL.value = result;
-    });
-};
-
-const handleExpandCard = (index: number) => {
-    if (cards.value[index].state === CardState.Collapsed) {
-        cards.value[index].state = CardState.Expanded
-    } else if (cards.value[index].state === CardState.Expanded) {
-        cards.value[index].state = CardState.Collapsed
-    }
-};
-
-const scrollToError = (id: string): void => {
-    let el = document.getElementById(id);
-
-    if (!el) return;
-
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-};
-
-const onSubmit = async () => {
-    if (branchForm.hasErrors) {
-        scrollToError(Object.keys(branchForm.errors)[0]);
-    }
-
-    emits('loading-state', true);
-    await branchForm.submit().then(() => {
-        resetForm();
-        emits('update-profile');
-        router.push({ name: 'side-menu-company-branch-list' });
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        emits('loading-state', false);
-    });
-};
-
-const resetForm = () => {
-    branchForm.reset();
-    branchForm.setErrors({});
-};
-
-const setCode = () => {
-    branchForm.forgetError('code');
-    if (branchForm.code == '_AUTO_') {
-        branchForm.setData({ code: '' });
-    } else {
-        branchForm.setData({ code: '_AUTO_' });
-    }
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-
-const convertErrorTypeToAlertListType = (error: Error) => {
-    const record: Record<string, Array<string>> = {};
-
-    record.error = [error.message];
-
-    return record;
-};
-// #endregion
-
-// #region Watchers
-watch(
-    branchForm,
-    debounce((newValue): void => {
-        cacheServices.setLastEntity('BRANCH_CREATE', newValue.data())
-    }, 500),
-    { deep: true }
-);
-// #endregion
-</script>
-
-<template>
-    <form id="branchForm" @submit.prevent="onSubmit">
-        <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
-            <template #card-items-0>
-                <div class="p-5">
-                    <FormLabel>
-                        {{ selectedUserLocation.company.code }}
-                        <br />
-                        {{ selectedUserLocation.company.name }}
-                    </FormLabel>
-                    <FormInput type="hidden" v-model="branchForm.company_id" />
-                </div>
-            </template>
-            <template #card-items-1>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': branchForm.invalid('code') }">
-                            {{ t('views.branch.fields.code') }}
-                        </FormLabel>
-                        <FormInputCode v-model="branchForm.code" type="text"
-                            :class="{ 'border-danger': branchForm.invalid('code') }"
-                            :placeholder="t('views.branch.fields.code')" @set-auto="setCode" @change="branchForm.validate('code')" />
-                        <FormErrorMessages :messages="branchForm.errors.code" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': branchForm.invalid('name') }">
-                            {{ t('views.branch.fields.name') }}
-                        </FormLabel>
-                        <FormInput v-model="branchForm.name" type="text"
-                            :class="{ 'border-danger': branchForm.invalid('name') }"
-                            :placeholder="t('views.branch.fields.name')" @change="branchForm.validate('name')" />
-                        <FormErrorMessages :messages="branchForm.errors.name" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.branch.fields.address') }}
-                        </FormLabel>
-                        <FormTextarea v-model="branchForm.address" type="text"
-                            :placeholder="t('views.branch.fields.address')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.branch.fields.city') }}
-                        </FormLabel>
-                        <FormInput v-model="branchForm.city" type="text"
-                            :placeholder="t('views.branch.fields.city')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.branch.fields.contact') }}
-                        </FormLabel>
-                        <FormInput v-model="branchForm.contact" type="text"
-                            :placeholder="t('views.branch.fields.contact')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': branchForm.invalid('is_main') }"
-                            class="pr-5">
-                            {{ t('views.branch.fields.is_main') }}
-                        </FormLabel>
-                        <FormSwitch>
-                            <FormSwitch.Input v-model="branchForm.is_main" type="checkbox"
-                                :class="{ 'border-danger': branchForm.invalid('is_main') }"
-                                :placeholder="t('views.branch.fields.is_main')" @change="branchForm.validate('is_main')" />
-                        </FormSwitch>
-                        <FormErrorMessages :messages="branchForm.errors.is_main" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.branch.fields.remarks') }}
-                        </FormLabel>
-                        <FormTextarea v-model="branchForm.remarks" type="text"
-                            :placeholder="t('views.branch.fields.remarks')" rows="3" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': branchForm.invalid('status') }">
-                            {{ t('views.branch.fields.status') }}
-                        </FormLabel>
-                        <FormSelect v-model="branchForm.status"
-                            :class="{ 'border-danger': branchForm.invalid('status') }"
-                            @change="branchForm.validate('status')">
-                            <option value="">{{ t('components.dropdown.placeholder') }}</option>
-                            <option v-for="c in statusDDL" :key="c.code" :value="c.code">{{ t(c.name) }}</option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="branchForm.errors.status" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-button>
-                <div class="flex gap-4">
-                    <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
-                        :disabled="branchForm.validating || branchForm.hasErrors">
-                        <Lucide v-if="branchForm.validating" icon="Loader" class="animate-spin" />
-                        <template v-else>
-                            {{ t("components.buttons.submit") }}
-                        </template>
-                    </Button>
-                    <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
-                        {{ t("components.buttons.reset") }}
-                    </Button>
-                </div>
-            </template>
-        </TwoColumnsLayout>
-    </form>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { AxiosError, isAxiosError } from 'axios';
+  import BranchService from '@/services/BranchService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormInputCode,
+    FormSwitch,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const branchServices = new BranchService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.branch.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.branch.field_groups.branch_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const branchForm = branchServices.useBranchCreateForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await Promise.all([getDDL()]);
+
+    loadFromCache();
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setCompanyIdData = () => {
+    branchForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('BRANCH_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    branchForm.setData(data);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    const result = await dashboardServices.getStatusDDL();
+    if (result) {
+      statusDDL.value = result;
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (branchForm.hasErrors) {
+      scrollToError(Object.keys(branchForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await branchForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-company-branch-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    branchForm.reset();
+    branchForm.setErrors({});
+  };
+
+  const setCode = () => {
+    branchForm.forgetError('code');
+    if (branchForm.code == '_AUTO_') {
+      branchForm.setData({ code: '' });
+    } else {
+      branchForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const convertErrorTypeToAlertListType = (error: unknown) => {
+    const record: Record<string, Array<string>> = {};
+
+    const anyError = error as any;
+    const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+    if (response && response.data) {
+      const data = response.data as any;
+
+      if (data.errors && typeof data.errors === 'object') {
+        for (const key of Object.keys(data.errors)) {
+          const value = data.errors[key];
+          if (Array.isArray(value)) {
+            record[key] = value;
+          } else if (value !== undefined && value !== null) {
+            record[key] = [String(value)];
+          }
+        }
+        return record;
+      }
+      if (data.message) {
+        record.error = [String(data.message)];
+        return record;
+      }
+    }
+    if (error instanceof Error && error.message) {
+      record.error = [error.message];
+    } else {
+      record.error = ['Unknown error'];
+    }
+    return record;
+  };
+  // #endregion
+
+  // #region Watchers
+  watch(
+    branchForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('BRANCH_CREATE', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="branchForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="branchForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': branchForm.invalid('code') }">
+              {{ t('views.branch.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="branchForm.code"
+              type="text"
+              :class="{ 'border-danger': branchForm.invalid('code') }"
+              :placeholder="t('views.branch.fields.code')"
+              @set-auto="setCode"
+              @change="branchForm.validate('code')"
+            />
+            <FormErrorMessages :messages="branchForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': branchForm.invalid('name') }">
+              {{ t('views.branch.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="branchForm.name"
+              type="text"
+              :class="{ 'border-danger': branchForm.invalid('name') }"
+              :placeholder="t('views.branch.fields.name')"
+              @change="branchForm.validate('name')"
+            />
+            <FormErrorMessages :messages="branchForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.branch.fields.address') }}
+            </FormLabel>
+            <FormTextarea v-model="branchForm.address" type="text" :placeholder="t('views.branch.fields.address')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.branch.fields.city') }}
+            </FormLabel>
+            <FormInput v-model="branchForm.city" type="text" :placeholder="t('views.branch.fields.city')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.branch.fields.contact') }}
+            </FormLabel>
+            <FormInput v-model="branchForm.contact" type="text" :placeholder="t('views.branch.fields.contact')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': branchForm.invalid('is_main') }" class="pr-5">
+              {{ t('views.branch.fields.is_main') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input
+                v-model="branchForm.is_main"
+                type="checkbox"
+                :class="{ 'border-danger': branchForm.invalid('is_main') }"
+                :placeholder="t('views.branch.fields.is_main')"
+                @change="branchForm.validate('is_main')"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="branchForm.errors.is_main" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.branch.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="branchForm.remarks"
+              type="text"
+              :placeholder="t('views.branch.fields.remarks')"
+              rows="3"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': branchForm.invalid('status') }">
+              {{ t('views.branch.fields.status') }}
+            </FormLabel>
+            <FormSelect
+              v-model="branchForm.status"
+              :class="{ 'border-danger': branchForm.invalid('status') }"
+              @change="branchForm.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="branchForm.errors.status" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="branchForm.validating || branchForm.hasErrors"
+          >
+            <Lucide v-if="branchForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/branch/BranchEdit.vue b/web/src/pages/branch/BranchEdit.vue
index 7445d0428..499301c06 100644
--- a/web/src/pages/branch/BranchEdit.vue
+++ b/web/src/pages/branch/BranchEdit.vue
@@ -1,292 +1,325 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref, computed, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { useRoute, useRouter } from "vue-router";
-import BranchService from "@/services/BranchService";
-import DashboardService from "@/services/DashboardService";
-import CacheService from "@/services/CacheService";
-import { TwoColumnsLayout } from "@/components/Base/Form/FormLayout";
-import {
-    FormInput,
-    FormLabel,
-    FormTextarea,
-    FormSelect,
-    FormSwitch,
-    FormInputCode,
-    FormErrorMessages,
-} from "@/components/Base/Form";
-import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
-import { CardState } from "@/types/enums/CardState";
-import { DropDownOption } from "@/types/models/DropDownOption";
-import { ServiceResponse } from "@/types/services/ServiceResponse";
-import { ViewMode } from "@/types/enums/ViewMode";
-import { Branch } from "@/types/models/Branch";
-import Button from "@/components/Base/Button";
-import { debounce } from "lodash";
-import Lucide from "@/components/Base/Lucide";
-import { useSelectedUserLocationStore } from "@/stores/selected-user-location";
-import { ErrorCode } from "@/types/enums/ErrorCode";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-const route = useRoute();
-
-const branchServices = new BranchService();
-const dashboardServices = new DashboardService();
-const cacheServices = new CacheService();
-
-const selectedUserLocationStore = useSelectedUserLocationStore();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
-// #endregion
-
-// #region Refs
-const cards = ref<Array<TwoColumnsLayoutCards>>([
-    { title: 'views.branch.field_groups.company_info', state: CardState.Expanded, },
-    { title: 'views.branch.field_groups.branch_data', state: CardState.Expanded, },
-    { title: '', state: CardState.Hidden, id: 'button' }
-]);
-
-const statusDDL = ref<Array<DropDownOption> | null>(null);
-
-const branchForm = branchServices.useBranchEditForm(route.params.ulid as string);
-// #endregion
-
-// #region Computed
-const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
-const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-    emits('mode-state', ViewMode.FORM_EDIT);
-
-    if (!isUserLocationSelected.value) {
-        router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
-    }
-
-    getDDL();
-
-    await loadData(route.params.ulid as string);
-});
-// #endregion
-
-// #region Methods
-const loadData = async (ulid: string) => {
-    emits('loading-state', true);
-    let response: ServiceResponse<Branch | null> = await branchServices.read(ulid);
-
-    if (response && response.data) {
-        branchForm.setData({
-            company_id: response.data.company.id,
-            code: response.data.code,
-            name: response.data.name,
-            address: response.data.address,
-            city: response.data.city,
-            contact: response.data.contact,
-            is_main: response.data.is_main,
-            remarks: response.data.remarks,
-            status: response.data.status,
-        });
-    }
-    emits('loading-state', false);
-};
-
-const getDDL = (): void => {
-    dashboardServices.getStatusDDL().then((result: Array<DropDownOption> | null) => {
-        statusDDL.value = result;
-    });
-};
-
-const handleExpandCard = (index: number) => {
-    if (cards.value[index].state === CardState.Collapsed) {
-        cards.value[index].state = CardState.Expanded
-    } else if (cards.value[index].state === CardState.Expanded) {
-        cards.value[index].state = CardState.Collapsed
-    }
-};
-
-const scrollToError = (id: string): void => {
-    let el = document.getElementById(id);
-
-    if (!el) return;
-
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-};
-
-const onSubmit = async () => {
-    if (branchForm.hasErrors) {
-        scrollToError(Object.keys(branchForm.errors)[0]);
-    }
-
-    emits('loading-state', true);
-    await branchForm.submit().then(() => {
-        resetForm();
-        emits('update-profile');
-        router.push({ name: 'side-menu-company-branch-list' });
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        emits('loading-state', false);
-    });
-};
-
-const resetForm = async () => {
-    branchForm.reset();
-    branchForm.setErrors({});
-    await loadData(route.params.ulid as string);
-};
-
-const setCode = () => {
-    branchForm.forgetError('code');
-    if (branchForm.code == '_AUTO_') {
-        branchForm.setData({ code: '' });
-    } else {
-        branchForm.setData({ code: '_AUTO_' });
-    }
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-
-const convertErrorTypeToAlertListType = (error: Error) => {
-    const record: Record<string, Array<string>> = {};
-
-    record.error = [error.message];
-
-    return record;
-};
-// #endregion
-
-// #region Watchers
-watch(
-    branchForm,
-    debounce((newValue): void => {
-        cacheServices.setLastEntity('BRANCH_EDIT', newValue.data())
-    }, 500),
-    { deep: true }
-);
-// #endregion
-</script>
-
-<template>
-    <form id="branchForm" @submit.prevent="onSubmit">
-        <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
-            <template #card-items-0>
-                <div class="p-5">
-                    <FormLabel>
-                        {{ selectedUserLocation.company.code }}
-                        <br />
-                        {{ selectedUserLocation.company.name }}
-                    </FormLabel>
-                    <FormInput type="hidden" v-model="branchForm.company_id" />
-                </div>
-            </template>
-            <template #card-items-1>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': branchForm.invalid('code') }">
-                            {{ t('views.branch.fields.code') }}
-                        </FormLabel>
-                        <FormInputCode v-model="branchForm.code" type="text"
-                            :class="{ 'border-danger': branchForm.invalid('code') }"
-                            :placeholder="t('views.branch.fields.code')" @set-auto="setCode" @change="branchForm.validate('code')" />
-                        <FormErrorMessages :messages="branchForm.errors.code" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': branchForm.invalid('name') }">
-                            {{ t('views.branch.fields.name') }}
-                        </FormLabel>
-                        <FormInput v-model="branchForm.name" type="text"
-                            :class="{ 'border-danger': branchForm.invalid('name') }"
-                            :placeholder="t('views.branch.fields.name')" @change="branchForm.validate('name')" />
-                        <FormErrorMessages :messages="branchForm.errors.name" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.branch.fields.address') }}
-                        </FormLabel>
-                        <FormTextarea v-model="branchForm.address" type="text"
-                            :placeholder="t('views.branch.fields.address')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.branch.fields.city') }}
-                        </FormLabel>
-                        <FormInput v-model="branchForm.city" type="text"
-                            :placeholder="t('views.branch.fields.city')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.branch.fields.contact') }}
-                        </FormLabel>
-                        <FormInput v-model="branchForm.contact" type="text"
-                            :placeholder="t('views.branch.fields.contact')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': branchForm.invalid('is_main') }"
-                            class="pr-5">
-                            {{ t('views.branch.fields.is_main') }}
-                        </FormLabel>
-                        <FormSwitch>
-                            <FormSwitch.Input v-model="branchForm.is_main" type="checkbox"
-                                :class="{ 'border-danger': branchForm.invalid('is_main') }"
-                                :placeholder="t('views.branch.fields.is_main')" @change="branchForm.validate('is_main')" />
-                        </FormSwitch>
-                        <FormErrorMessages :messages="branchForm.errors.is_main" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.branch.fields.remarks') }}
-                        </FormLabel>
-                        <FormTextarea v-model="branchForm.remarks" type="text"
-                            :placeholder="t('views.branch.fields.remarks')" rows="3" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': branchForm.invalid('status') }">
-                            {{ t('views.branch.fields.status') }}
-                        </FormLabel>
-                        <FormSelect v-model="branchForm.status"
-                            :class="{ 'border-danger': branchForm.invalid('status') }"
-                            @change="branchForm.validate('status')">
-                            <option value="">{{ t('components.dropdown.placeholder') }}</option>
-                            <option v-for="c in statusDDL" :key="c.code" :value="c.code">{{ t(c.name) }}</option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="branchForm.errors.status" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-button>
-                <div class="flex gap-4">
-                    <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
-                        :disabled="branchForm.validating || branchForm.hasErrors">
-                        <Lucide v-if="branchForm.validating" icon="Loader" class="animate-spin" />
-                        <template v-else>
-                            {{ t("components.buttons.submit") }}
-                        </template>
-                    </Button>
-                    <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
-                        {{ t("components.buttons.reset") }}
-                    </Button>
-                </div>
-            </template>
-        </TwoColumnsLayout>
-    </form>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import BranchService from '@/services/BranchService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormSwitch,
+    FormInputCode,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { Branch } from '@/types/models/Branch';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const route = useRoute();
+
+  const branchServices = new BranchService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.branch.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.branch.field_groups.branch_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const branchForm = branchServices.useBranchEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await Promise.all([getDDL(), loadData(route.params.ulid as string)]);
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    const result = await branchServices.read(ulid);
+
+    if (result.success && result.data) {
+      branchForm.setData({
+        company_id: result.data.company.id,
+        code: result.data.code,
+        name: result.data.name,
+        address: result.data.address,
+        city: result.data.city,
+        contact: result.data.contact,
+        is_main: result.data.is_main,
+        remarks: result.data.remarks,
+        status: result.data.status,
+      });
+    } else {
+      router.push({ name: 'side-menu-company-branch-list' });
+    }
+    emits('loading-state', false);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    statusDDL.value = await dashboardServices.getStatusDDL();
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (branchForm.hasErrors) {
+      scrollToError(Object.keys(branchForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await branchForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-company-branch-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    branchForm.reset();
+    branchForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    branchForm.forgetError('code');
+    if (branchForm.code == '_AUTO_') {
+      branchForm.setData({ code: '' });
+    } else {
+      branchForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    branchForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('BRANCH_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="branchForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="branchForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': branchForm.invalid('code') }">
+              {{ t('views.branch.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="branchForm.code"
+              type="text"
+              :class="{ 'border-danger': branchForm.invalid('code') }"
+              :placeholder="t('views.branch.fields.code')"
+              @set-auto="setCode"
+              @change="branchForm.validate('code')"
+            />
+            <FormErrorMessages :messages="branchForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': branchForm.invalid('name') }">
+              {{ t('views.branch.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="branchForm.name"
+              type="text"
+              :class="{ 'border-danger': branchForm.invalid('name') }"
+              :placeholder="t('views.branch.fields.name')"
+              @change="branchForm.validate('name')"
+            />
+            <FormErrorMessages :messages="branchForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.branch.fields.address') }}
+            </FormLabel>
+            <FormTextarea v-model="branchForm.address" type="text" :placeholder="t('views.branch.fields.address')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.branch.fields.city') }}
+            </FormLabel>
+            <FormInput v-model="branchForm.city" type="text" :placeholder="t('views.branch.fields.city')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.branch.fields.contact') }}
+            </FormLabel>
+            <FormInput v-model="branchForm.contact" type="text" :placeholder="t('views.branch.fields.contact')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': branchForm.invalid('is_main') }" class="pr-5">
+              {{ t('views.branch.fields.is_main') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input
+                v-model="branchForm.is_main"
+                type="checkbox"
+                :class="{ 'border-danger': branchForm.invalid('is_main') }"
+                :placeholder="t('views.branch.fields.is_main')"
+                @change="branchForm.validate('is_main')"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="branchForm.errors.is_main" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.branch.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="branchForm.remarks"
+              type="text"
+              :placeholder="t('views.branch.fields.remarks')"
+              rows="3"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': branchForm.invalid('status') }">
+              {{ t('views.branch.fields.status') }}
+            </FormLabel>
+            <FormSelect
+              v-model="branchForm.status"
+              :class="{ 'border-danger': branchForm.invalid('status') }"
+              @change="branchForm.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="branchForm.errors.status" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="branchForm.validating || branchForm.hasErrors"
+          >
+            <Lucide v-if="branchForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/branch/BranchIndex.vue b/web/src/pages/branch/BranchIndex.vue
index 02eec4e38..01273bcff 100644
--- a/web/src/pages/branch/BranchIndex.vue
+++ b/web/src/pages/branch/BranchIndex.vue
@@ -1,181 +1,191 @@
-<script setup lang="ts">
-// #region Imports
-import { ref, provide } from "vue";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { TitleLayout } from "@/components/Base/Form/FormLayout";
-import { useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-import Button from "@/components/Base/Button";
-import Lucide from "@/components/Base/Lucide";
-import { ViewMode } from "@/types/enums/ViewMode";
-import CacheService from "@/services/CacheService";
-import AlertPlaceholder from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-import { useUserContextStore } from "@/stores/user-context";
-import ProfileService from "@/services/ProfileService";
-import { UserProfile } from "@/types/models/UserProfile";
-import Notification from "@/components/Base/Notification/Notification.vue";
-import { NotificationData } from "@/types/models/NotificationData";
-import { type NotificationElement } from "@/components/Base/Notification/Notification.vue";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-
-const userContextStore = useUserContextStore();
-
-const cacheService = new CacheService();
-const profileService = new ProfileService();
-
-
-// #endregion
-
-// #region Props, Emits
-// #endregion
-
-// #region Refs
-const mode = ref<ViewMode>(ViewMode.INDEX);
-const loading = ref<boolean>(false);
-const titleView = ref<string>('views.branch.page_title');
-
-const alertType = ref<'danger'|'success'|'warning'|'pending'|'dark'|'hidden'>('hidden');
-const title = ref<string>('');
-const alertList = ref<Record<string, Array<string>> | null>(null);
-
-const branchNotification = ref<NotificationElement>();    
-
-const notificationTitle = ref<string>('');
-const notificationContent = ref<string>('')
-// #endregion
-
-// #region Provide/Inject
-provide("bind[branchNotification]", (el: NotificationElement) => {
-    branchNotification.value = el;
-});
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-// #endregion
-
-// #region Methods
-const createNew = () => {
-    resetAlertPlaceholder();
-    mode.value = ViewMode.FORM_CREATE;
-    router.push({ name: 'side-menu-company-branch-create' });
-};
-
-const backToList = async () => {
-    resetAlertPlaceholder();
-    clearCache(mode.value);
-    mode.value = ViewMode.LIST;
-    router.push({ name: 'side-menu-company-branch-list' });
-};
-
-const onLoadingStateChanged = (state: boolean) => {
-    loading.value = state;
-};
-
-const onModeStateChanged = (state: ViewMode) => {
-    mode.value = state;
-
-    switch (state) {
-        case ViewMode.FORM_CREATE:
-            titleView.value = 'views.branch.actions.create';
-            break;
-        case ViewMode.FORM_EDIT:
-            titleView.value = 'views.branch.actions.edit';
-            break;
-        case ViewMode.INDEX:
-        case ViewMode.LIST:
-        default:
-            titleView.value = 'views.branch.page_title';
-            break;
-    }
-};
-
-const clearCache = (mode: ViewMode) => {
-    switch (mode) {
-        case ViewMode.FORM_CREATE:
-            cacheService.removeLastEntity('BRANCH_CREATE');
-            break;
-        case ViewMode.FORM_EDIT:
-            cacheService.removeLastEntity('BRANCH_EDIT');
-            break;
-        default:
-            break;
-    }
-};
-
-const onUpdateProfileTriggered = async () => {
-    let userprofile = await profileService.readProfile();
-    if (userprofile.success) {
-        userContextStore.setUserContext(userprofile.data as UserProfile);
-    }
-};
-
-const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
-    alertType.value = apProps.alertType;
-    title.value = apProps.title;
-    alertList.value = apProps.alertList;
-};
-
-const onShowNotificationTriggered = (notification: NotificationData) => {
-    notificationTitle.value = notification.title;
-    notificationContent.value = notification.content;
-
-    if (branchNotification.value)
-        branchNotification.value.showToast();
-};
-
-const resetAlertPlaceholder = () => {
-    title.value = '';
-    alertList.value = null;
-    alertType.value = 'hidden';
-};
-// #endregion
-
-// #region Watchers
-// #endregion
-</script>
-
-<template>
-    <div class="mt-8">
-        <LoadingOverlay :visible="loading">
-            <TitleLayout>
-                <template #title>
-                    {{ t(titleView) }}
-                </template>
-                <template #optional>
-                    <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
-                        <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md"
-                            @click="createNew">
-                            <Lucide icon="Plus" class="w-4 h-4" />&nbsp;{{ t("components.buttons.create_new") }}
-                        </Button>
-                        <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
-                            <Lucide icon="ArrowLeft" class="w-4 h-4" />&nbsp;{{ t("components.buttons.back") }}
-                        </Button>
-                    </div>
-                </template>
-            </TitleLayout>
-
-            <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
-            <RouterView @loading-state="onLoadingStateChanged" @mode-state="onModeStateChanged" @update-profile="onUpdateProfileTriggered" @show-alertplaceholder="onAlertPlaceholderTriggered" @show-notification="onShowNotificationTriggered" />
-        </LoadingOverlay>
-        <Notification ref-key="branchNotification" :options="{ duration: 3000, }" class="flex">
-            <Lucide icon="CheckCircle" class="text-success" />
-            <div class="ml-4 mr-4">
-                <div class="font-medium">{{ notificationTitle }}</div>
-                <div class="mt-1 text-slate-500">
-                    {{ notificationContent }}
-                </div>
-            </div>
-        </Notification>
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.branch.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const branchNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[branchNotification]', (el: NotificationElement) => {
+    branchNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-company-branch-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-company-branch-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.branch.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.branch.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.branch.page_title';
+        break;
+    }
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('BRANCH_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('BRANCH_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (branchNotification.value) branchNotification.value.showToast();
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="branchNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/branch/BranchList.vue b/web/src/pages/branch/BranchList.vue
index bc75b410a..7b2d976ea 100644
--- a/web/src/pages/branch/BranchList.vue
+++ b/web/src/pages/branch/BranchList.vue
@@ -1,306 +1,381 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref, computed } from "vue";
-import DataList from "@/components/DataList";
-import { useI18n } from "vue-i18n";
-import Button from "@/components/Base/Button";
-import Lucide from "@/components/Base/Lucide";
-import Table from "@/components/Base/Table";
-import BranchService from "@/services/BranchService";
-import { Branch } from "@/types/models/Branch";
-import { Collection } from "@/types/resources/Collection";
-import { DataListEmittedData } from "@/components/DataList/DataList.vue";
-import { ServiceResponse } from "@/types/services/ServiceResponse";
-import { Resource } from "@/types/resources/Resource";
-import { ReadAnyRequest } from "@/types/services/ServiceRequest";
-import { useRouter } from "vue-router";
-import { Dialog } from "@/components/Base/Headless";
-import { useSelectedUserLocationStore } from "@/stores/selected-user-location";
-import { ErrorCode } from "@/types/enums/ErrorCode";
-import { ViewMode } from "@/types/enums/ViewMode";
-import { NotificationData } from "@/types/models/NotificationData";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-const branchServices = new BranchService();
-const selectedUserLocationStore = useSelectedUserLocationStore();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
-// #endregion
-
-// #region Refs
-const datalistErrors = ref<Record<string, Array<string>> | null>(null);
-const deleteUlid = ref<string>('');
-const deleteModalShow = ref<boolean>(false);
-const expandDetail = ref<number | null>(null);
-const branchLists = ref<Collection<Array<Branch>> | null>({
-  data: [],
-  meta: {
-    current_page: 0,
-    from: null,
-    last_page: 0,
-    path: '',
-    per_page: 0,
-    to: null,
-    total: 0,
-  },
-  links: {
-    first: '',
-    last: '',
-    prev: null,
-    next: null,
-  }
-});
-// #endregion
-
-// #region Computed
-const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
-const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-  emits('mode-state', ViewMode.LIST);
-
-  if (!isUserLocationSelected.value) {
-    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
-  }
-
-  await getBranches('', true, true, 1, 10);
-});
-// #endregion
-
-// #region Methods
-const getBranches = async (search: string, refresh: boolean, paginate: boolean, page: number, per_page: number) => {
-  emits('loading-state', true);
-
-  let company_id = selectedUserLocation.value.company.id;
-
-  const searchReq: ReadAnyRequest = {
-    company_id: company_id,
-    search: search,
-    refresh: refresh,
-    paginate: paginate,
-    page: page,
-    per_page: per_page
-  };
-
-  let result: ServiceResponse<Collection<Array<Branch>> | Resource<Array<Branch>> | null> = await branchServices.readAny(searchReq);
-
-  if (result.success && result.data) {
-    branchLists.value = result.data as Collection<Array<Branch>>;
-  } else {
-    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
-  }
-
-  emits('loading-state', false);
-};
-
-const onDataListChanged = async (data: DataListEmittedData) => {
-  await getBranches(data.search.text, false, true, data.pagination.page, data.pagination.per_page);
-}
-
-const viewSelected = (idx: number) => {
-  if (expandDetail.value === idx) {
-    expandDetail.value = null;
-  } else {
-    expandDetail.value = idx;
-  }
-};
-
-const editSelected = (itemIdx: number) => {
-  if (!branchLists.value) return;
-
-  let ulid = branchLists.value.data[itemIdx].ulid;
-  router.push({ name: 'side-menu-company-branch-edit', params: { ulid: ulid } });
-};
-
-const deleteSelected = (itemIdx: number) => {
-  if (!branchLists.value) return;
-
-  let itemUlid = branchLists.value.data[itemIdx].ulid;
-
-  deleteUlid.value = itemUlid;
-  deleteModalShow.value = true;
-};
-
-const confirmDelete = async () => {
-  deleteModalShow.value = false;
-  emits('loading-state', true);
-
-  let result: ServiceResponse<boolean | null> = await branchServices.delete(deleteUlid.value);
-
-  if (result.success) {
-    emits('update-profile');
-    await getBranches('', true, true, 1, 10);
-    showNotification(t('views.branch.alert.delete_branch.title'), t('views.branch.alert.delete_branch.content'));
-  } else {
-    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
-  }
-
-  emits('loading-state', false);
-};
-
-const showNotification = (pTitle: string, pContent: string) => {
-  let n: NotificationData = {
-    title: pTitle,
-    content: pContent
-  };
-
-  emits('show-notification', n);
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-// #endregion
-
-// #region Watchers
-// #endregion
-</script>
-
-<template>
-  <DataList :title="t('views.company.table.title')" :enable-search="true" :can-print="true" :can-export="true"
-    :pagination="branchLists ? branchLists.meta : null" @dataListChanged="onDataListChanged">
-    <template #content>
-      <Table class="mt-5" :hover="true">
-        <Table.Thead variant="light">
-          <Table.Tr>
-            <Table.Th class="whitespace-nowrap">
-              {{ t("views.branch.table.cols.code") }}
-            </Table.Th>
-            <Table.Th class="whitespace-nowrap">
-              {{ t("views.branch.table.cols.name") }}
-            </Table.Th>
-            <Table.Th class="whitespace-nowrap">
-              {{ t("views.branch.table.cols.is_main") }}
-            </Table.Th>
-            <Table.Th class="whitespace-nowrap">
-              {{ t("views.branch.table.cols.status") }}
-            </Table.Th>
-            <Table.Th class="whitespace-nowrap"></Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody v-if="branchLists !== null">
-          <template v-if="branchLists.data.length == 0">
-            <Table.Tr class="intro-x">
-              <Table.Td colspan="5">
-                <div class="flex justify-center italic">{{
-                  t('components.data-list.data_not_found') }}</div>
-              </Table.Td>
-            </Table.Tr>
-          </template>
-          <template v-for="( item, itemIdx ) in branchLists.data" :key="item.ulid">
-            <Table.Tr class="intro-x">
-              <Table.Td>{{ item.code }}</Table.Td>
-              <Table.Td>{{ item.name }}</Table.Td>
-              <Table.Td>
-                <Lucide v-if="item.is_main === true" icon="CheckCircle" />
-                <Lucide v-if="item.is_main === false" icon="X" />
-              </Table.Td>
-              <Table.Td>
-                <Lucide v-if="item.status === 'ACTIVE'" icon="CheckCircle" />
-                <Lucide v-if="item.status === 'INACTIVE'" icon="X" />
-              </Table.Td>
-              <Table.Td>
-                <div class="flex justify-end gap-1">
-                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
-                    <Lucide icon="Info" class="w-4 h-4" />
-                  </Button>
-                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
-                    <Lucide icon="CheckSquare" class="w-4 h-4" />
-                  </Button>
-                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
-                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
-                  </Button>
-                </div>
-              </Table.Td>
-            </Table.Tr>
-            <Table.Tr :class="{ 'intro-x': true, 'hidden transition-all': expandDetail !== itemIdx }">
-              <Table.Td colspan="5">
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.branch.fields.code') }}</div>
-                  <div class="flex-1">{{ item.code }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.branch.fields.name') }}</div>
-                  <div class="flex-1">{{ item.name }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.branch.fields.address') }}</div>
-                  <div class="flex-1">{{ item.address }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.branch.fields.city') }}</div>
-                  <div class="flex-1">{{ item.city }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.branch.fields.contact') }}</div>
-                  <div class="flex-1">{{ item.contact }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.branch.fields.is_main') }}</div>
-                  <div class="flex-1">
-                    <span v-if="item.is_main">{{ t('components.dropdown.values.switch.on') }}</span>
-                    <span v-else>{{ t('components.dropdown.values.switch.off') }}</span>
-                  </div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.branch.fields.remarks') }}</div>
-                  <div class="flex-1">{{ item.remarks }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.branch.fields.status') }}</div>
-                  <div class="flex-1">
-                    <span v-if="item.status === 'ACTIVE'">
-                      {{ t('components.dropdown.values.statusDDL.active') }}
-                    </span>
-                    <span v-if="item.status === 'INACTIVE'">
-                      {{ t('components.dropdown.values.statusDDL.inactive') }}
-                    </span>
-                  </div>
-                </div>
-              </Table.Td>
-            </Table.Tr>
-          </template>
-        </Table.Tbody>
-      </Table>
-      <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
-        <Dialog.Panel>
-          <div class="p-5 text-center">
-            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
-            <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
-            <div class="mt-2 text-slate-500">
-              {{ t('components.delete-modal.desc_1') }}
-              <br />
-              {{ t('components.delete-modal.desc_2') }}
-            </div>
-          </div>
-          <div class="px-5 pb-8 text-center">
-            <Button type="button" variant="outline-secondary" class="w-24 mr-1"
-              @click="() => { deleteModalShow = false; }">
-              {{ t('components.buttons.cancel') }}
-            </Button>
-            <Button type="button" variant="danger" class="w-24" @click="(confirmDelete)">
-              {{ t('components.buttons.delete') }}
-            </Button>
-          </div>
-        </Dialog.Panel>
-      </Dialog>
-    </template>
-  </DataList>
-</template>
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import BranchService from '@/services/BranchService';
+  import { Branch } from '@/types/models/Branch';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Resource } from '@/types/resources/Resource';
+  import { BranchReadAnyPaginateRequest } from '@/types/services/branch/BranchRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const branchServices = new BranchService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const branchLists = ref<Collection<Array<Branch>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getBranches('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getBranches = async (
+    search: string,
+
+    refresh: boolean,
+    page: number,
+    per_page: number,
+  ) => {
+    emits('loading-state', true);
+
+    let company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: BranchReadAnyPaginateRequest = {
+      with_trashed: false,
+
+      company_id: company_id,
+      search: search,
+      is_main: undefined,
+      status: undefined,
+      include_id: undefined,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<Branch>> | null> = await branchServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      branchLists.value = result.data;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getBranches(data.search.text, true, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!branchLists.value) return;
+
+    let ulid = branchLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-company-branch-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!branchLists.value) return;
+
+    let itemUlid = branchLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await branchServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getBranches('', true, 1, 10);
+      showNotification(t('views.branch.alert.delete_branch.title'), t('views.branch.alert.delete_branch.content'));
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.branch.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="branchLists ? branchLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.branch.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.branch.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.branch.table.cols.is_main') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.branch.table.cols.status') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="branchLists !== null">
+          <template v-if="branchLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in branchLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.is_main === true" icon="CheckCircle" />
+                <Lucide v-if="item.is_main === false" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.status === 'ACTIVE'" icon="CheckCircle" />
+                <Lucide v-if="item.status === 'INACTIVE'" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.branch.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.branch.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.branch.fields.address') }}
+                  </div>
+                  <div class="flex-1">{{ item.address }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.branch.fields.city') }}
+                  </div>
+                  <div class="flex-1">{{ item.city }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.branch.fields.contact') }}
+                  </div>
+                  <div class="flex-1">{{ item.contact }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.branch.fields.is_main') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.is_main">
+                      {{ t('components.dropdown.values.switch.on') }}
+                    </span>
+                    <span v-else>
+                      {{ t('components.dropdown.values.switch.off') }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.branch.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.branch.fields.status') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.status === 'ACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.active') }}
+                    </span>
+                    <span v-if="item.status === 'INACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.inactive') }}
+                    </span>
+                  </div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/brand/BrandCreate.vue b/web/src/pages/brand/BrandCreate.vue
new file mode 100644
index 000000000..00d06b66e
--- /dev/null
+++ b/web/src/pages/brand/BrandCreate.vue
@@ -0,0 +1,256 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { isAxiosError, AxiosError } from 'axios';
+  import BrandService from '@/services/BrandService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { FormInput, FormLabel, FormInputCode, FormErrorMessages } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const brandService = new BrandService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.brand.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.brand.field_groups.brand_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const brandForm = brandService.useBrandCreateForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    loadFromCache();
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setCompanyIdData = () => {
+    brandForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (brandForm.hasErrors) {
+      scrollToError(Object.keys(brandForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await brandForm
+      .submit()
+      .then((response: any) => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-product-brand-list' });
+      })
+      .catch((error: any) => {
+        console.error(error);
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    brandForm.reset();
+    brandForm.setErrors({});
+  };
+
+  const setCode = () => {
+    brandForm.forgetError('code');
+    if (brandForm.code == '_AUTO_') {
+      brandForm.setData({ code: '' });
+    } else {
+      brandForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  const convertErrorTypeToAlertListType = (error: unknown) => {
+    const record: Record<string, Array<string>> = {};
+    const anyError = error as any;
+    const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+    if (response && response.data) {
+      const data = response.data as any;
+      if (data.errors && typeof data.errors === 'object') {
+        for (const key of Object.keys(data.errors)) {
+          const value = data.errors[key];
+          if (Array.isArray(value)) {
+            record[key] = value;
+          } else if (value !== undefined && value !== null) {
+            record[key] = [String(value)];
+          }
+        }
+        return record;
+      }
+      if (data.message) {
+        record.error = [String(data.message)];
+        return record;
+      }
+    }
+
+    if (error instanceof Error && error.message) {
+      record.error = [error.message];
+    } else {
+      record.error = ['Unknown error'];
+    }
+    return record;
+  };
+
+  const loadFromCache = () => {
+    const data = cacheServices.getLastEntity('BRAND_CREATE') as Record<string, unknown>;
+    if (data) {
+      brandForm.setData(data);
+    }
+  };
+  // #endregion
+
+  // #region Watchers
+  watch(
+    brandForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('BRAND_CREATE', newValue.data());
+      if (brandForm.hasErrors) {
+      }
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="brandForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="brandForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': brandForm.invalid('code') }">
+              {{ t('views.brand.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="brandForm.code"
+              :class="{ 'border-danger': brandForm.invalid('code') }"
+              :placeholder="t('views.brand.fields.code')"
+              @set-auto="setCode"
+              @change="brandForm.validate('code')"
+            />
+            <FormErrorMessages :messages="brandForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': brandForm.invalid('name') }">
+              {{ t('views.brand.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="brandForm.name"
+              type="text"
+              :class="{ 'border-danger': brandForm.invalid('name') }"
+              :placeholder="t('views.brand.fields.name')"
+              @change="brandForm.validate('name')"
+            />
+            <FormErrorMessages :messages="brandForm.errors.name" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="brandForm.validating">
+            <Lucide v-if="brandForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/brand/BrandEdit.vue b/web/src/pages/brand/BrandEdit.vue
new file mode 100644
index 000000000..903c2fc4c
--- /dev/null
+++ b/web/src/pages/brand/BrandEdit.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+  import BrandService from '@/services/BrandService';
+  import CacheService from '@/services/CacheService';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { FormInput, FormLabel, FormInputCode, FormErrorMessages } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import { Brand } from '@/types/models/Brand';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import Lucide from '@/components/Base/Lucide';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const brandService = new BrandService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.brand.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.brand.field_groups.brand_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const brandForm = brandService.useBrandEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    await loadData(route.params.ulid as string);
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    const result: ServiceResponse<Brand | null> = await brandService.read(ulid);
+
+    if (result.success && result.data) {
+      brandForm.setData({
+        company_id: result.data.company.id,
+        code: result.data.code,
+        name: result.data.name,
+      });
+    } else {
+      router.push({ name: 'side-menu-product-brand-list' });
+    }
+    emits('loading-state', false);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (brandForm.hasErrors) {
+      scrollToError(Object.keys(brandForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await brandForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-product-brand-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    brandForm.reset();
+    brandForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    brandForm.forgetError('code');
+    if (brandForm.code == '_AUTO_') {
+      brandForm.setData({ code: '' });
+    } else {
+      brandForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    brandForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('BRAND_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+  // #endregion
+</script>
+
+<template>
+  <form id="brandForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="brandForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': brandForm.invalid('code') }">
+              {{ t('views.brand.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="brandForm.code"
+              :class="{ 'border-danger': brandForm.invalid('code') }"
+              :placeholder="t('views.brand.fields.code')"
+              @set-auto="setCode"
+              @change="brandForm.validate('code')"
+            />
+            <FormErrorMessages :messages="brandForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': brandForm.invalid('name') }">
+              {{ t('views.brand.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="brandForm.name"
+              type="text"
+              :class="{ 'border-danger': brandForm.invalid('name') }"
+              :placeholder="t('views.brand.fields.name')"
+              @change="brandForm.validate('name')"
+            />
+            <FormErrorMessages :messages="brandForm.errors.name" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="brandForm.validating || brandForm.hasErrors"
+          >
+            <Lucide v-if="brandForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/brand/BrandIndex.vue b/web/src/pages/brand/BrandIndex.vue
new file mode 100644
index 000000000..0f5a3135a
--- /dev/null
+++ b/web/src/pages/brand/BrandIndex.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.brand.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const brandNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[brandNotification]', (el: NotificationElement) => {
+    brandNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-product-brand-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-product-brand-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.brand.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.brand.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.brand.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (brandNotification.value) brandNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('BRAND_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('BRAND_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="brandNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/brand/BrandList.vue b/web/src/pages/brand/BrandList.vue
new file mode 100644
index 000000000..8f4625e2d
--- /dev/null
+++ b/web/src/pages/brand/BrandList.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import BrandService from '@/services/BrandService';
+  import { Brand } from '@/types/models/Brand';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { BrandReadAnyPaginateRequest } from '@/types/services/brand/BrandRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const brandServices = new BrandService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const brandLists = ref<Collection<Array<Brand>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getBrands('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getBrands = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    let company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: BrandReadAnyPaginateRequest = {
+      with_trashed: false,
+
+      company_id: company_id,
+      search: search,
+      include_id: undefined,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<Brand>> | null> = await brandServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      brandLists.value = result.data;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getBrands(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!brandLists.value) return;
+
+    let ulid = brandLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-product-brand-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!brandLists.value) return;
+
+    let itemUlid = brandLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<any> = await brandServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getBrands('', true, 1, 10);
+      showNotification(t('views.brand.alert.delete_brand.title'), t('views.brand.alert.delete_brand.content'));
+    } else {
+      showAlertPlaceholder(
+        'danger',
+        t('components.alert_placeholder.title.danger'),
+        result.errors as Record<string, Array<string>>,
+      );
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.brand.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="brandLists ? brandLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.brand.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.brand.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="brandLists !== null">
+          <template v-if="brandLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="3">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in brandLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>
+                {{ item.code }}
+              </Table.Td>
+              <Table.Td>
+                {{ item.name }}
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="3">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.brand.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.brand.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/capital-opening/CapitalOpeningCreate.vue b/web/src/pages/capital-opening/CapitalOpeningCreate.vue
new file mode 100644
index 000000000..e0fd50092
--- /dev/null
+++ b/web/src/pages/capital-opening/CapitalOpeningCreate.vue
@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import InvestorService from '@/services/InvestorService';
+import CashAccountService from '@/services/CashAccountService';
+import CapitalOpeningService from '@/services/CapitalOpeningService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const capitalOpeningService = new CapitalOpeningService();
+const investorService = new InvestorService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.capital_opening.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.capital_opening.field_groups.capital_opening_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const capitalOpeningForm = capitalOpeningService.useCapitalOpeningCreateForm();
+
+const investorDDL = ref<Array<DropDownOption> | null>(null);
+const investorSearch = ref<string>('');
+const investorOptions = computed(() =>
+  (investorDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await Promise.all([loadInvestorDDL(), loadCashAccountDDL()]);
+
+  loadFromCache();
+  setLocationData();
+});
+
+const setLocationData = () => {
+  capitalOpeningForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('CAPITAL_OPENING_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  capitalOpeningForm.setData(data);
+};
+
+const loadInvestorDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await investorService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    investorDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+
+  if (!el) return;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (capitalOpeningForm.hasErrors) {
+    const firstErrorKey = Object.keys(capitalOpeningForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await capitalOpeningForm
+    .submit()
+    .then(() => {
+      resetForm();
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-finance-capital-opening-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  capitalOpeningForm.reset();
+  capitalOpeningForm.setErrors({});
+  setLocationData();
+  investorSearch.value = '';
+  cashAccountSearch.value = '';
+};
+
+const setCode = () => {
+  capitalOpeningForm.forgetError('code');
+
+  if (capitalOpeningForm.code === '_AUTO_') {
+    capitalOpeningForm.setData({ code: '' });
+    return;
+  }
+
+  capitalOpeningForm.setData({ code: '_AUTO_' });
+};
+
+const clearInvestor = () => {
+  capitalOpeningForm.setData({ investor_id: '' });
+  capitalOpeningForm.forgetError('investor_id');
+};
+
+const clearCashAccount = () => {
+  capitalOpeningForm.setData({ cash_account_id: '' });
+  capitalOpeningForm.forgetError('cash_account_id');
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  capitalOpeningForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('CAPITAL_OPENING_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="capitalOpeningForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="capitalOpeningForm.company_id" />
+
+          <FormLabel class="mt-5">
+            {{ selectedUserLocation.branch.code }}
+            <br />
+            {{ selectedUserLocation.branch.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="capitalOpeningForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="grid grid-cols-12 gap-4 p-5">
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('code') }">
+              {{ t('views.capital_opening.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="capitalOpeningForm.code"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('code') }"
+              :placeholder="t('views.capital_opening.fields.code')"
+              @set-auto="setCode"
+              @change="capitalOpeningForm.validate('code')"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.code" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('date') }">
+              {{ t('views.capital_opening.fields.date') }}
+            </FormLabel>
+            <FormInputDateTimeAuto
+              v-model="capitalOpeningForm.date"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('date') }"
+              :placeholder="t('views.capital_opening.fields.date')"
+              @change="capitalOpeningForm.validate('date')"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.date" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('investor_id') }">
+              {{ t('views.capital_opening.fields.investor') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalOpeningForm.investor_id"
+              v-model:search="investorSearch"
+              :options="investorOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('investor_id') }"
+              @change="capitalOpeningForm.validate('investor_id')"
+              @search="loadInvestorDDL"
+              @clear="clearInvestor"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.investor_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('cash_account_id') }">
+              {{ t('views.capital_opening.fields.cash_account') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalOpeningForm.cash_account_id"
+              v-model:search="cashAccountSearch"
+              :options="cashAccountOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('cash_account_id') }"
+              @change="capitalOpeningForm.validate('cash_account_id')"
+              @search="loadCashAccountDDL"
+              @clear="clearCashAccount"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.cash_account_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('amount') }">
+              {{ t('views.capital_opening.fields.amount') }}
+            </FormLabel>
+            <FormInputCurrency
+              v-model="capitalOpeningForm.amount"
+              :allow-negative="false"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('amount') }"
+              :placeholder="t('views.capital_opening.fields.amount')"
+              @change="capitalOpeningForm.validate('amount')"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.amount" />
+          </div>
+          <div class="col-span-12">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('remarks') }">
+              {{ t('views.capital_opening.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="capitalOpeningForm.remarks"
+              rows="3"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('remarks') }"
+              :placeholder="t('views.capital_opening.fields.remarks')"
+              @change="capitalOpeningForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="capitalOpeningForm.validating || capitalOpeningForm.hasErrors"
+          >
+            <Lucide v-if="capitalOpeningForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/capital-opening/CapitalOpeningEdit.vue b/web/src/pages/capital-opening/CapitalOpeningEdit.vue
new file mode 100644
index 000000000..c13b19b1d
--- /dev/null
+++ b/web/src/pages/capital-opening/CapitalOpeningEdit.vue
@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import InvestorService from '@/services/InvestorService';
+import CashAccountService from '@/services/CashAccountService';
+import CapitalOpeningService from '@/services/CapitalOpeningService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { type ServiceResponse } from '@/types/services/ServiceResponse';
+import { type CapitalOpening } from '@/types/models/CapitalOpening';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const capitalOpeningService = new CapitalOpeningService();
+const investorService = new InvestorService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.capital_opening.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.capital_opening.field_groups.capital_opening_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const capitalOpeningForm = capitalOpeningService.useCapitalOpeningEditForm(route.params.ulid as string);
+const capitalOpeningData = ref<CapitalOpening | null>(null);
+
+const investorDDL = ref<Array<DropDownOption> | null>(null);
+const investorSearch = ref<string>('');
+const investorOptions = computed(() =>
+  (investorDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData(route.params.ulid as string);
+  await Promise.all([loadInvestorDDL(), loadCashAccountDDL()]);
+});
+
+const loadData = async (ulid: string) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<CapitalOpening | null> = await capitalOpeningService.read(ulid);
+
+  if (result.success && result.data) {
+    capitalOpeningData.value = result.data;
+
+    capitalOpeningForm.setData({
+      company_id: result.data.company.id,
+      branch_id: result.data.branch.id,
+      code: result.data.code,
+      date: result.data.date,
+      investor_id: result.data.investor.id,
+      cash_account_id: result.data.cash_account.id,
+      amount: result.data.amount,
+      remarks: result.data.remarks ?? '',
+    });
+  } else {
+    router.push({ name: 'side-menu-finance-capital-opening-list' });
+  }
+
+  emits('loading-state', false);
+};
+
+const loadInvestorDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await investorService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: capitalOpeningData.value?.investor?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    investorDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: capitalOpeningData.value?.cash_account?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+
+  if (!el) return;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (capitalOpeningForm.hasErrors) {
+    const firstErrorKey = Object.keys(capitalOpeningForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await capitalOpeningForm
+    .submit()
+    .then(() => {
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-finance-capital-opening-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  capitalOpeningForm.reset();
+  capitalOpeningForm.setErrors({});
+  await loadData(route.params.ulid as string);
+  await Promise.all([loadInvestorDDL(), loadCashAccountDDL()]);
+};
+
+const setCode = () => {
+  capitalOpeningForm.forgetError('code');
+
+  if (capitalOpeningForm.code === '_AUTO_') {
+    capitalOpeningForm.setData({ code: '' });
+    return;
+  }
+
+  capitalOpeningForm.setData({ code: '_AUTO_' });
+};
+
+const clearInvestor = () => {
+  capitalOpeningForm.setData({ investor_id: '' });
+  capitalOpeningForm.forgetError('investor_id');
+};
+
+const clearCashAccount = () => {
+  capitalOpeningForm.setData({ cash_account_id: '' });
+  capitalOpeningForm.forgetError('cash_account_id');
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  capitalOpeningForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('CAPITAL_OPENING_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="capitalOpeningForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="capitalOpeningForm.company_id" />
+
+          <FormLabel class="mt-5">
+            {{ selectedUserLocation.branch.code }}
+            <br />
+            {{ selectedUserLocation.branch.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="capitalOpeningForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="grid grid-cols-12 gap-4 p-5">
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('code') }">
+              {{ t('views.capital_opening.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="capitalOpeningForm.code"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('code') }"
+              :placeholder="t('views.capital_opening.fields.code')"
+              @set-auto="setCode"
+              @change="capitalOpeningForm.validate('code')"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.code" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('date') }">
+              {{ t('views.capital_opening.fields.date') }}
+            </FormLabel>
+            <FormInputDateTimeAuto
+              v-model="capitalOpeningForm.date"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('date') }"
+              :placeholder="t('views.capital_opening.fields.date')"
+              @change="capitalOpeningForm.validate('date')"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.date" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('investor_id') }">
+              {{ t('views.capital_opening.fields.investor') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalOpeningForm.investor_id"
+              v-model:search="investorSearch"
+              :options="investorOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('investor_id') }"
+              @change="capitalOpeningForm.validate('investor_id')"
+              @search="loadInvestorDDL"
+              @clear="clearInvestor"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.investor_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('cash_account_id') }">
+              {{ t('views.capital_opening.fields.cash_account') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalOpeningForm.cash_account_id"
+              v-model:search="cashAccountSearch"
+              :options="cashAccountOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('cash_account_id') }"
+              @change="capitalOpeningForm.validate('cash_account_id')"
+              @search="loadCashAccountDDL"
+              @clear="clearCashAccount"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.cash_account_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('amount') }">
+              {{ t('views.capital_opening.fields.amount') }}
+            </FormLabel>
+            <FormInputCurrency
+              v-model="capitalOpeningForm.amount"
+              :allow-negative="false"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('amount') }"
+              :placeholder="t('views.capital_opening.fields.amount')"
+              @change="capitalOpeningForm.validate('amount')"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.amount" />
+          </div>
+          <div class="col-span-12">
+            <FormLabel :class="{ 'text-danger': capitalOpeningForm.invalid('remarks') }">
+              {{ t('views.capital_opening.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="capitalOpeningForm.remarks"
+              rows="3"
+              :class="{ 'border-danger': capitalOpeningForm.invalid('remarks') }"
+              :placeholder="t('views.capital_opening.fields.remarks')"
+              @change="capitalOpeningForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="capitalOpeningForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="capitalOpeningForm.validating || capitalOpeningForm.hasErrors"
+          >
+            <Lucide v-if="capitalOpeningForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/capital-opening/CapitalOpeningIndex.vue b/web/src/pages/capital-opening/CapitalOpeningIndex.vue
new file mode 100644
index 000000000..d794b9ad0
--- /dev/null
+++ b/web/src/pages/capital-opening/CapitalOpeningIndex.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { useUserContextStore } from '@/stores/user-context';
+import ProfileService from '@/services/ProfileService';
+import { type UserProfile } from '@/types/models/UserProfile';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import { type NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.capital_opening.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const capitalOpeningNotification = ref<NotificationElement>();
+
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[capitalOpeningNotification]', (el: NotificationElement) => {
+  capitalOpeningNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-finance-capital-opening-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-finance-capital-opening-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.capital_opening.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.capital_opening.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.capital_opening.page_title';
+      break;
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('CAPITAL_OPENING_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('CAPITAL_OPENING_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (capitalOpeningNotification.value) {
+    capitalOpeningNotification.value.showToast();
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="capitalOpeningNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/capital-opening/CapitalOpeningList.vue b/web/src/pages/capital-opening/CapitalOpeningList.vue
new file mode 100644
index 000000000..8717f6f4f
--- /dev/null
+++ b/web/src/pages/capital-opening/CapitalOpeningList.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import CapitalOpeningService from '@/services/CapitalOpeningService';
+import { type CapitalOpening } from '@/types/models/CapitalOpening';
+import { type Collection } from '@/types/resources/Collection';
+import { type DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { type ServiceResponse } from '@/types/services/ServiceResponse';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { type NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+import { type CapitalOpeningReadAnyPaginateRequest } from '@/types/services/capital-opening/CapitalOpeningRequest';
+
+const { t } = useI18n();
+const router = useRouter();
+const capitalOpeningService = new CapitalOpeningService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const capitalOpeningLists = ref<Collection<Array<CapitalOpening>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getCapitalOpenings('', true, 1, 10);
+});
+
+const getCapitalOpenings = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const requestParams: CapitalOpeningReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    investor_id: undefined,
+    cash_account_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<CapitalOpening>> | null> =
+    await capitalOpeningService.readAnyPaginate(requestParams);
+
+  if (result.success && result.data) {
+    capitalOpeningLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async (data: DataListEmittedData) => {
+  await getCapitalOpenings(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (itemIdx: number) => {
+  if (!capitalOpeningLists.value) return;
+
+  const ulid = capitalOpeningLists.value.data[itemIdx].ulid;
+
+  router.push({
+    name: 'side-menu-finance-capital-opening-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (itemIdx: number) => {
+  if (!capitalOpeningLists.value) return;
+
+  deleteUlid.value = capitalOpeningLists.value.data[itemIdx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<boolean | null> = await capitalOpeningService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getCapitalOpenings('', true, 1, 10);
+    showNotification(
+      t('views.capital_opening.alert.delete_capital_opening.title'),
+      t('views.capital_opening.alert.delete_capital_opening.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = {
+    title,
+    content,
+  };
+
+  emits('show-notification', notification);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <DataList
+    :title="t('views.capital_opening.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="capitalOpeningLists ? capitalOpeningLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_opening.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_opening.table.cols.date') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_opening.table.cols.investor') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_opening.table.cols.cash_account') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap text-right">
+              {{ t('views.capital_opening.table.cols.amount') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="capitalOpeningLists !== null">
+          <template v-if="capitalOpeningLists.data.length === 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="6">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in capitalOpeningLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.date ? formatDate(item.date, 'DD-MMM-YYYY') : '-' }}</Table.Td>
+              <Table.Td>{{ item.investor.name }}</Table.Td>
+              <Table.Td>{{ item.cash_account.name }}</Table.Td>
+              <Table.Td class="text-right">{{ formatCurrency(item.amount) }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="6">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.capital_opening.fields.branch') }}
+                  </div>
+                  <div class="flex-1">{{ item.branch.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.capital_opening.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks || '-' }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/capital-transaction/CapitalTransactionCreate.vue b/web/src/pages/capital-transaction/CapitalTransactionCreate.vue
new file mode 100644
index 000000000..b5e02c6f8
--- /dev/null
+++ b/web/src/pages/capital-transaction/CapitalTransactionCreate.vue
@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import InvestorService from '@/services/InvestorService';
+import CashAccountService from '@/services/CashAccountService';
+import CapitalTransactionService from '@/services/CapitalTransactionService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const capitalTransactionService = new CapitalTransactionService();
+const investorService = new InvestorService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.capital_transaction.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.capital_transaction.field_groups.capital_transaction_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const capitalTransactionForm = capitalTransactionService.useCapitalTransactionCreateForm();
+
+const investorDDL = ref<Array<DropDownOption> | null>(null);
+const investorSearch = ref<string>('');
+const investorOptions = computed(() =>
+  (investorDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const typeDDL = ref<Array<DropDownOption> | null>(null);
+const typeOptions = computed(() =>
+  (typeDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: t(item.name),
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await Promise.all([loadInvestorDDL(), loadCashAccountDDL(), loadTypeDDL()]);
+
+  loadFromCache();
+  setLocationData();
+});
+
+const setLocationData = () => {
+  capitalTransactionForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('CAPITAL_TRANSACTION_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  capitalTransactionForm.setData(data);
+};
+
+const loadInvestorDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await investorService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    investorDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadTypeDDL = async () => {
+  const result = await capitalTransactionService.getTypes();
+
+  if (result) {
+    typeDDL.value = result;
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+
+  if (!el) return;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (capitalTransactionForm.hasErrors) {
+    const firstErrorKey = Object.keys(capitalTransactionForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await capitalTransactionForm
+    .submit()
+    .then(() => {
+      resetForm();
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-finance-capital-transaction-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  capitalTransactionForm.reset();
+  capitalTransactionForm.setErrors({});
+  setLocationData();
+  investorSearch.value = '';
+  cashAccountSearch.value = '';
+};
+
+const setCode = () => {
+  capitalTransactionForm.forgetError('code');
+
+  if (capitalTransactionForm.code === '_AUTO_') {
+    capitalTransactionForm.setData({ code: '' });
+    return;
+  }
+
+  capitalTransactionForm.setData({ code: '_AUTO_' });
+};
+
+const clearInvestor = () => {
+  capitalTransactionForm.setData({ investor_id: '' });
+  capitalTransactionForm.forgetError('investor_id');
+};
+
+const clearCashAccount = () => {
+  capitalTransactionForm.setData({ cash_account_id: '' });
+  capitalTransactionForm.forgetError('cash_account_id');
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  capitalTransactionForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('CAPITAL_TRANSACTION_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="capitalTransactionForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="capitalTransactionForm.company_id" />
+
+          <FormLabel class="mt-5">
+            {{ selectedUserLocation.branch.code }}
+            <br />
+            {{ selectedUserLocation.branch.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="capitalTransactionForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="grid grid-cols-12 gap-4 p-5">
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('code') }">
+              {{ t('views.capital_transaction.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="capitalTransactionForm.code"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('code') }"
+              :placeholder="t('views.capital_transaction.fields.code')"
+              @set-auto="setCode"
+              @change="capitalTransactionForm.validate('code')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.code" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('date') }">
+              {{ t('views.capital_transaction.fields.date') }}
+            </FormLabel>
+            <FormInputDateTimeAuto
+              v-model="capitalTransactionForm.date"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('date') }"
+              :placeholder="t('views.capital_transaction.fields.date')"
+              @change="capitalTransactionForm.validate('date')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.date" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('investor_id') }">
+              {{ t('views.capital_transaction.fields.investor') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalTransactionForm.investor_id"
+              v-model:search="investorSearch"
+              :options="investorOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('investor_id') }"
+              @change="capitalTransactionForm.validate('investor_id')"
+              @search="loadInvestorDDL"
+              @clear="clearInvestor"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.investor_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('cash_account_id') }">
+              {{ t('views.capital_transaction.fields.cash_account') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalTransactionForm.cash_account_id"
+              v-model:search="cashAccountSearch"
+              :options="cashAccountOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('cash_account_id') }"
+              @change="capitalTransactionForm.validate('cash_account_id')"
+              @search="loadCashAccountDDL"
+              @clear="clearCashAccount"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.cash_account_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('type') }">
+              {{ t('views.capital_transaction.fields.type') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalTransactionForm.type"
+              :options="typeOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('type') }"
+              @change="capitalTransactionForm.validate('type')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.type" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('amount') }">
+              {{ t('views.capital_transaction.fields.amount') }}
+            </FormLabel>
+            <FormInputCurrency
+              v-model="capitalTransactionForm.amount"
+              :allow-negative="false"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('amount') }"
+              :placeholder="t('views.capital_transaction.fields.amount')"
+              @change="capitalTransactionForm.validate('amount')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.amount" />
+          </div>
+          <div class="col-span-12">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('remarks') }">
+              {{ t('views.capital_transaction.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="capitalTransactionForm.remarks"
+              rows="3"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('remarks') }"
+              :placeholder="t('views.capital_transaction.fields.remarks')"
+              @change="capitalTransactionForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="capitalTransactionForm.validating || capitalTransactionForm.hasErrors"
+          >
+            <Lucide v-if="capitalTransactionForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button
+            type="button"
+            href="#"
+            variant="soft-secondary"
+            class="w-28 shadow-md"
+            @click="resetForm"
+          >
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/capital-transaction/CapitalTransactionEdit.vue b/web/src/pages/capital-transaction/CapitalTransactionEdit.vue
new file mode 100644
index 000000000..4cef04732
--- /dev/null
+++ b/web/src/pages/capital-transaction/CapitalTransactionEdit.vue
@@ -0,0 +1,422 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import InvestorService from '@/services/InvestorService';
+import CashAccountService from '@/services/CashAccountService';
+import CapitalTransactionService from '@/services/CapitalTransactionService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { type ServiceResponse } from '@/types/services/ServiceResponse';
+import { type CapitalTransaction } from '@/types/models/CapitalTransaction';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const capitalTransactionService = new CapitalTransactionService();
+const investorService = new InvestorService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.capital_transaction.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.capital_transaction.field_groups.capital_transaction_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const capitalTransactionForm = capitalTransactionService.useCapitalTransactionEditForm(route.params.ulid as string);
+const capitalTransactionData = ref<CapitalTransaction | null>(null);
+
+const investorDDL = ref<Array<DropDownOption> | null>(null);
+const investorSearch = ref<string>('');
+const investorOptions = computed(() =>
+  (investorDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const typeDDL = ref<Array<DropDownOption> | null>(null);
+const typeOptions = computed(() =>
+  (typeDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: t(item.name),
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await Promise.all([loadData(route.params.ulid as string), loadTypeDDL()]);
+  await Promise.all([loadInvestorDDL(), loadCashAccountDDL()]);
+});
+
+const loadData = async (ulid: string) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<CapitalTransaction | null> = await capitalTransactionService.read(ulid);
+
+  if (result.success && result.data) {
+    capitalTransactionData.value = result.data;
+
+    capitalTransactionForm.setData({
+      company_id: result.data.company.id,
+      branch_id: result.data.branch.id,
+      code: result.data.code,
+      date: result.data.date,
+      investor_id: result.data.investor.id,
+      cash_account_id: result.data.cash_account.id,
+      type: result.data.type,
+      amount: result.data.amount,
+      remarks: result.data.remarks ?? '',
+    });
+  } else {
+    router.push({ name: 'side-menu-finance-capital-transaction-list' });
+  }
+
+  emits('loading-state', false);
+};
+
+const loadInvestorDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await investorService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: capitalTransactionData.value?.investor?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    investorDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: capitalTransactionData.value?.cash_account?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadTypeDDL = async () => {
+  const result = await capitalTransactionService.getTypes();
+
+  if (result) {
+    typeDDL.value = result;
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+
+  if (!el) return;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (capitalTransactionForm.hasErrors) {
+    const firstErrorKey = Object.keys(capitalTransactionForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await capitalTransactionForm
+    .submit()
+    .then(() => {
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-finance-capital-transaction-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  capitalTransactionForm.reset();
+  capitalTransactionForm.setErrors({});
+  await loadData(route.params.ulid as string);
+  await Promise.all([loadInvestorDDL(), loadCashAccountDDL()]);
+};
+
+const setCode = () => {
+  capitalTransactionForm.forgetError('code');
+
+  if (capitalTransactionForm.code === '_AUTO_') {
+    capitalTransactionForm.setData({ code: '' });
+    return;
+  }
+
+  capitalTransactionForm.setData({ code: '_AUTO_' });
+};
+
+const clearInvestor = () => {
+  capitalTransactionForm.setData({ investor_id: '' });
+  capitalTransactionForm.forgetError('investor_id');
+};
+
+const clearCashAccount = () => {
+  capitalTransactionForm.setData({ cash_account_id: '' });
+  capitalTransactionForm.forgetError('cash_account_id');
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  capitalTransactionForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('CAPITAL_TRANSACTION_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="capitalTransactionForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="capitalTransactionForm.company_id" />
+
+          <FormLabel class="mt-5">
+            {{ selectedUserLocation.branch.code }}
+            <br />
+            {{ selectedUserLocation.branch.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="capitalTransactionForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="grid grid-cols-12 gap-4 p-5">
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('code') }">
+              {{ t('views.capital_transaction.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="capitalTransactionForm.code"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('code') }"
+              :placeholder="t('views.capital_transaction.fields.code')"
+              @set-auto="setCode"
+              @change="capitalTransactionForm.validate('code')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.code" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('date') }">
+              {{ t('views.capital_transaction.fields.date') }}
+            </FormLabel>
+            <FormInputDateTimeAuto
+              v-model="capitalTransactionForm.date"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('date') }"
+              :placeholder="t('views.capital_transaction.fields.date')"
+              @change="capitalTransactionForm.validate('date')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.date" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('investor_id') }">
+              {{ t('views.capital_transaction.fields.investor') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalTransactionForm.investor_id"
+              v-model:search="investorSearch"
+              :options="investorOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('investor_id') }"
+              @change="capitalTransactionForm.validate('investor_id')"
+              @search="loadInvestorDDL"
+              @clear="clearInvestor"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.investor_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('cash_account_id') }">
+              {{ t('views.capital_transaction.fields.cash_account') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalTransactionForm.cash_account_id"
+              v-model:search="cashAccountSearch"
+              :options="cashAccountOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('cash_account_id') }"
+              @change="capitalTransactionForm.validate('cash_account_id')"
+              @search="loadCashAccountDDL"
+              @clear="clearCashAccount"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.cash_account_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('type') }">
+              {{ t('views.capital_transaction.fields.type') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="capitalTransactionForm.type"
+              :options="typeOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('type') }"
+              @change="capitalTransactionForm.validate('type')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.type" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('amount') }">
+              {{ t('views.capital_transaction.fields.amount') }}
+            </FormLabel>
+            <FormInputCurrency
+              v-model="capitalTransactionForm.amount"
+              :allow-negative="false"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('amount') }"
+              :placeholder="t('views.capital_transaction.fields.amount')"
+              @change="capitalTransactionForm.validate('amount')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.amount" />
+          </div>
+          <div class="col-span-12">
+            <FormLabel :class="{ 'text-danger': capitalTransactionForm.invalid('remarks') }">
+              {{ t('views.capital_transaction.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="capitalTransactionForm.remarks"
+              rows="3"
+              :class="{ 'border-danger': capitalTransactionForm.invalid('remarks') }"
+              :placeholder="t('views.capital_transaction.fields.remarks')"
+              @change="capitalTransactionForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="capitalTransactionForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="capitalTransactionForm.validating || capitalTransactionForm.hasErrors"
+          >
+            <Lucide v-if="capitalTransactionForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button
+            type="button"
+            href="#"
+            variant="soft-secondary"
+            class="w-28 shadow-md"
+            @click="resetForm"
+          >
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/capital-transaction/CapitalTransactionIndex.vue b/web/src/pages/capital-transaction/CapitalTransactionIndex.vue
new file mode 100644
index 000000000..e8d935460
--- /dev/null
+++ b/web/src/pages/capital-transaction/CapitalTransactionIndex.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { useUserContextStore } from '@/stores/user-context';
+import ProfileService from '@/services/ProfileService';
+import { type UserProfile } from '@/types/models/UserProfile';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import { type NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.capital_transaction.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const capitalTransactionNotification = ref<NotificationElement>();
+
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[capitalTransactionNotification]', (el: NotificationElement) => {
+  capitalTransactionNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-finance-capital-transaction-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-finance-capital-transaction-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.capital_transaction.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.capital_transaction.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.capital_transaction.page_title';
+      break;
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('CAPITAL_TRANSACTION_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('CAPITAL_TRANSACTION_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (capitalTransactionNotification.value) {
+    capitalTransactionNotification.value.showToast();
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="capitalTransactionNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/capital-transaction/CapitalTransactionList.vue b/web/src/pages/capital-transaction/CapitalTransactionList.vue
new file mode 100644
index 000000000..6a629ba3b
--- /dev/null
+++ b/web/src/pages/capital-transaction/CapitalTransactionList.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import CapitalTransactionService from '@/services/CapitalTransactionService';
+import { type CapitalTransaction } from '@/types/models/CapitalTransaction';
+import { type Collection } from '@/types/resources/Collection';
+import { type DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { type ServiceResponse } from '@/types/services/ServiceResponse';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+import { type CapitalTransactionReadAnyPaginateRequest } from '@/types/services/capital-transaction/CapitalTransactionRequest';
+
+const { t } = useI18n();
+const router = useRouter();
+const capitalTransactionService = new CapitalTransactionService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const capitalTransactionLists = ref<Collection<Array<CapitalTransaction>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+const capitalTransactionTypesDDL = ref<Array<DropDownOption> | null>(null);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await Promise.all([getCapitalTransactionTypesDDL(), getCapitalTransactions('', true, 1, 10)]);
+});
+
+const getCapitalTransactions = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const requestParams: CapitalTransactionReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    investor_id: undefined,
+    cash_account_id: undefined,
+    type: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<CapitalTransaction>> | null> =
+    await capitalTransactionService.readAnyPaginate(requestParams);
+
+  if (result.success && result.data) {
+    capitalTransactionLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async (data: DataListEmittedData) => {
+  await getCapitalTransactions(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const getCapitalTransactionTypesDDL = async () => {
+  capitalTransactionTypesDDL.value = await capitalTransactionService.getTypes();
+};
+
+const getTypeLabel = (code: number | string): string => {
+  const type = (capitalTransactionTypesDDL.value ?? []).find((item) => item.code === code);
+
+  return type ? t(type.name) : String(code);
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (itemIdx: number) => {
+  if (!capitalTransactionLists.value) return;
+
+  const ulid = capitalTransactionLists.value.data[itemIdx].ulid;
+
+  router.push({
+    name: 'side-menu-finance-capital-transaction-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (itemIdx: number) => {
+  if (!capitalTransactionLists.value) return;
+
+  deleteUlid.value = capitalTransactionLists.value.data[itemIdx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<boolean | null> = await capitalTransactionService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getCapitalTransactions('', true, 1, 10);
+    showNotification(
+      t('views.capital_transaction.alert.delete_capital_transaction.title'),
+      t('views.capital_transaction.alert.delete_capital_transaction.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = {
+    title,
+    content,
+  };
+
+  emits('show-notification', notification);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <DataList
+    :title="t('views.capital_transaction.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="capitalTransactionLists ? capitalTransactionLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_transaction.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_transaction.table.cols.date') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_transaction.table.cols.investor') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_transaction.table.cols.type') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.capital_transaction.table.cols.cash_account') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap text-right">
+              {{ t('views.capital_transaction.table.cols.amount') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="capitalTransactionLists !== null">
+          <template v-if="capitalTransactionLists.data.length === 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="7">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in capitalTransactionLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.date ? formatDate(item.date, 'DD-MMM-YYYY') : '-' }}</Table.Td>
+              <Table.Td>{{ item.investor.name }}</Table.Td>
+              <Table.Td>{{ getTypeLabel(item.type) }}</Table.Td>
+              <Table.Td>{{ item.cash_account.name }}</Table.Td>
+              <Table.Td class="text-right">{{ formatCurrency(item.amount) }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="7">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.capital_transaction.fields.branch') }}
+                  </div>
+                  <div class="flex-1">{{ item.branch.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.capital_transaction.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks || '-' }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/cash-account/CashAccountCreate.vue b/web/src/pages/cash-account/CashAccountCreate.vue
new file mode 100644
index 000000000..6010f9535
--- /dev/null
+++ b/web/src/pages/cash-account/CashAccountCreate.vue
@@ -0,0 +1,335 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { isAxiosError, AxiosError } from 'axios';
+  import CashAccountService from '@/services/CashAccountService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormInputCode,
+    FormSwitch,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const cashAccountServices = new CashAccountService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.cash_account.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.cash_account.field_groups.cash_account_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const cashAccountForm = cashAccountServices.useCashAccountCreateForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    loadFromCache();
+    setLocationData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setLocationData = () => {
+    cashAccountForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+    });
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('CASH_ACCOUNT_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    cashAccountForm.setData(data);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (cashAccountForm.hasErrors) {
+      scrollToError(Object.keys(cashAccountForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await cashAccountForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-finance-cash-account-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    cashAccountForm.reset();
+    cashAccountForm.setErrors({});
+  };
+
+  const setCode = () => {
+    cashAccountForm.forgetError('code');
+    if (cashAccountForm.code == '_AUTO_') {
+      cashAccountForm.setData({ code: '' });
+    } else {
+      cashAccountForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const convertErrorTypeToAlertListType = (error: unknown) => {
+    const record: Record<string, Array<string>> = {};
+    const anyError = error as any;
+    const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+    if (response && response.data) {
+      const data = response.data as any;
+      if (data.errors && typeof data.errors === 'object') {
+        for (const key of Object.keys(data.errors)) {
+          const value = data.errors[key];
+          if (Array.isArray(value)) {
+            record[key] = value;
+          } else if (value !== undefined && value !== null) {
+            record[key] = [String(value)];
+          }
+        }
+        return record;
+      }
+      if (data.message) {
+        record.error = [String(data.message)];
+        return record;
+      }
+    }
+
+    if (error instanceof Error && error.message) {
+      record.error = [error.message];
+    } else {
+      record.error = ['Unknown error'];
+    }
+
+    return record;
+  };
+  // #endregion
+
+  // #region Watchers
+  watch(
+    cashAccountForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('CASH_ACCOUNT_CREATE', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="cashAccountForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :title="t('views.cash_account.page_title')" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="cashAccountForm.company_id" />
+
+          <FormLabel class="mt-5">
+            {{ selectedUserLocation.branch.code }}
+            <br />
+            {{ selectedUserLocation.branch.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="cashAccountForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <!-- Code -->
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': cashAccountForm.invalid('code') }">
+              {{ t('views.cash_account.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="cashAccountForm.code"
+              type="text"
+              :class="{ 'border-danger': cashAccountForm.invalid('code') }"
+              :placeholder="t('views.cash_account.fields.code')"
+              @set-auto="setCode"
+              @change="cashAccountForm.validate('code')"
+            />
+            <FormErrorMessages :messages="cashAccountForm.errors.code" />
+          </div>
+
+          <!-- Name -->
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': cashAccountForm.invalid('name') }">
+              {{ t('views.cash_account.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="cashAccountForm.name"
+              type="text"
+              :class="{ 'border-danger': cashAccountForm.invalid('name') }"
+              :placeholder="t('views.cash_account.fields.name')"
+              @change="cashAccountForm.validate('name')"
+            />
+            <FormErrorMessages :messages="cashAccountForm.errors.name" />
+          </div>
+
+          <!-- Is Bank -->
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': cashAccountForm.invalid('is_bank') }" class="pr-5">
+              {{ t('views.cash_account.fields.is_bank') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input
+                v-model="cashAccountForm.is_bank"
+                type="checkbox"
+                :class="{ 'border-danger': cashAccountForm.invalid('is_bank') }"
+                :placeholder="t('views.cash_account.fields.is_bank')"
+                @change="cashAccountForm.validate('is_bank')"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="cashAccountForm.errors.is_bank" />
+          </div>
+
+          <!-- Is Active -->
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': cashAccountForm.invalid('is_active') }" class="pr-5">
+              {{ t('views.cash_account.fields.is_active') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input
+                v-model="cashAccountForm.is_active"
+                type="checkbox"
+                :class="{
+                  'border-danger': cashAccountForm.invalid('is_active'),
+                }"
+                :placeholder="t('views.cash_account.fields.is_active')"
+                @change="cashAccountForm.validate('is_active')"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="cashAccountForm.errors.is_active" />
+          </div>
+
+          <!-- Remarks -->
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.cash_account.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="cashAccountForm.remarks"
+              type="text"
+              :placeholder="t('views.cash_account.fields.remarks')"
+              rows="3"
+            />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="cashAccountForm.validating || cashAccountForm.hasErrors"
+          >
+            <Lucide v-if="cashAccountForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/cash-account/CashAccountEdit.vue b/web/src/pages/cash-account/CashAccountEdit.vue
new file mode 100644
index 000000000..9206736e9
--- /dev/null
+++ b/web/src/pages/cash-account/CashAccountEdit.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+  import CashAccountService from '@/services/CashAccountService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSwitch,
+    FormInputCode,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { CashAccount } from '@/types/models/CashAccount';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const route = useRoute();
+
+  const cashAccountServices = new CashAccountService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.cash_account.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.cash_account.field_groups.cash_account_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const cashAccountForm = cashAccountServices.useCashAccountEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await loadData(route.params.ulid as string);
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    let result: ServiceResponse<CashAccount | null> = await cashAccountServices.read(ulid);
+
+    if (result.success && result.data) {
+      cashAccountForm.setData({
+        company_id: result.data.company.id,
+        code: result.data.code,
+        name: result.data.name,
+        is_bank: result.data.is_bank,
+        is_active: result.data.is_active,
+        remarks: result.data.remarks,
+      });
+    } else {
+      router.push({ name: 'side-menu-finance-cash-account-list' });
+    }
+    emits('loading-state', false);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (cashAccountForm.hasErrors) {
+      scrollToError(Object.keys(cashAccountForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await cashAccountForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-finance-cash-account-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    cashAccountForm.reset();
+    cashAccountForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    cashAccountForm.forgetError('code');
+    if (cashAccountForm.code == '_AUTO_') {
+      cashAccountForm.setData({ code: '' });
+    } else {
+      cashAccountForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    cashAccountForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('CASH_ACCOUNT_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="cashAccountForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout
+      :cards="cards"
+      :title="t('views.cash_account.page_title')"
+      :using-side-tab="false"
+      @handle-expand-card="handleExpandCard"
+    >
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="cashAccountForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <!-- Code -->
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': cashAccountForm.invalid('code') }">
+              {{ t('views.cash_account.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="cashAccountForm.code"
+              type="text"
+              :class="{ 'border-danger': cashAccountForm.invalid('code') }"
+              :placeholder="t('views.cash_account.fields.code')"
+              @set-auto="setCode"
+              @change="cashAccountForm.validate('code')"
+            />
+            <FormErrorMessages :messages="cashAccountForm.errors.code" />
+          </div>
+
+          <!-- Name -->
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': cashAccountForm.invalid('name') }">
+              {{ t('views.cash_account.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="cashAccountForm.name"
+              type="text"
+              :class="{ 'border-danger': cashAccountForm.invalid('name') }"
+              :placeholder="t('views.cash_account.fields.name')"
+              @change="cashAccountForm.validate('name')"
+            />
+            <FormErrorMessages :messages="cashAccountForm.errors.name" />
+          </div>
+
+          <!-- Is Bank -->
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': cashAccountForm.invalid('is_bank') }" class="pr-5">
+              {{ t('views.cash_account.fields.is_bank') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input
+                v-model="cashAccountForm.is_bank"
+                type="checkbox"
+                :class="{ 'border-danger': cashAccountForm.invalid('is_bank') }"
+                :placeholder="t('views.cash_account.fields.is_bank')"
+                @change="cashAccountForm.validate('is_bank')"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="cashAccountForm.errors.is_bank" />
+          </div>
+
+          <!-- Is Active -->
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': cashAccountForm.invalid('is_active') }" class="pr-5">
+              {{ t('views.cash_account.fields.is_active') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input
+                v-model="cashAccountForm.is_active"
+                type="checkbox"
+                :class="{
+                  'border-danger': cashAccountForm.invalid('is_active'),
+                }"
+                :placeholder="t('views.cash_account.fields.is_active')"
+                @change="cashAccountForm.validate('is_active')"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="cashAccountForm.errors.is_active" />
+          </div>
+
+          <!-- Remarks -->
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.cash_account.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="cashAccountForm.remarks"
+              type="text"
+              :placeholder="t('views.cash_account.fields.remarks')"
+              rows="3"
+            />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="cashAccountForm.validating || cashAccountForm.hasErrors"
+          >
+            <Lucide v-if="cashAccountForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/cash-account/CashAccountIndex.vue b/web/src/pages/cash-account/CashAccountIndex.vue
new file mode 100644
index 000000000..8814abdef
--- /dev/null
+++ b/web/src/pages/cash-account/CashAccountIndex.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.cash_account.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const cashAccountNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[cashAccountNotification]', (el: NotificationElement) => {
+    cashAccountNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-finance-cash-account-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-finance-cash-account-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.cash_account.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.cash_account.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.cash_account.page_title';
+        break;
+    }
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('CASH_ACCOUNT_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('CASH_ACCOUNT_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (cashAccountNotification.value) cashAccountNotification.value.showToast();
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="cashAccountNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/cash-account/CashAccountList.vue b/web/src/pages/cash-account/CashAccountList.vue
new file mode 100644
index 000000000..04cab4899
--- /dev/null
+++ b/web/src/pages/cash-account/CashAccountList.vue
@@ -0,0 +1,363 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import CashAccountService from '@/services/CashAccountService';
+  import { CashAccount } from '@/types/models/CashAccount';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { CashAccountReadAnyPaginateRequest } from '@/types/services/cash_account/CashAccountRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const cashAccountServices = new CashAccountService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const cashAccountLists = ref<Collection<Array<CashAccount>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getCashAccounts('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getCashAccounts = async (
+    search: string,
+
+    refresh: boolean,
+    page: number,
+    per_page: number,
+  ) => {
+    emits('loading-state', true);
+
+    let company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: CashAccountReadAnyPaginateRequest = {
+      with_trashed: false,
+
+      company_id: company_id,
+      search: search,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<CashAccount>> | null> =
+      await cashAccountServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      cashAccountLists.value = result.data;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getCashAccounts(data.search.text, true, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!cashAccountLists.value) return;
+
+    let ulid = cashAccountLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-finance-cash-account-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!cashAccountLists.value) return;
+
+    let itemUlid = cashAccountLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await cashAccountServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getCashAccounts('', true, 1, 10);
+      showNotification(
+        t('views.cash_account.alert.delete_cash_account.title'),
+        t('views.cash_account.alert.delete_cash_account.content'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.cash_account.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="cashAccountLists ? cashAccountLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.cash_account.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.cash_account.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.cash_account.table.cols.is_bank') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.cash_account.table.cols.is_active') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="cashAccountLists !== null">
+          <template v-if="cashAccountLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in cashAccountLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.is_bank === true" icon="CheckCircle" />
+                <Lucide v-if="item.is_bank === false" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.is_active === true" icon="CheckCircle" />
+                <Lucide v-if="item.is_active === false" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.cash_account.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.cash_account.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.cash_account.fields.is_bank') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.is_bank">
+                      {{ t('components.dropdown.values.switch.on') }}
+                    </span>
+                    <span v-else>
+                      {{ t('components.dropdown.values.switch.off') }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.cash_account.fields.is_active') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.is_active">
+                      {{ t('components.dropdown.values.switch.on') }}
+                    </span>
+                    <span v-else>
+                      {{ t('components.dropdown.values.switch.off') }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.cash_account.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+              class="w-24 mr-1"
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/cash-account/CashAccountWithRemainingBalanceIndex.vue b/web/src/pages/cash-account/CashAccountWithRemainingBalanceIndex.vue
new file mode 100644
index 000000000..b6f30d5dc
--- /dev/null
+++ b/web/src/pages/cash-account/CashAccountWithRemainingBalanceIndex.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useUserContextStore } from '@/stores/user-context';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.LIST);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.cash_account.page_title_with_remaining_balance');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const cashAccountNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache();
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-finance-cash-account-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (cashAccountNotification.value) cashAccountNotification.value.showToast();
+};
+
+const clearCache = () => {};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="cashAccountNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/cash-account/CashAccountWithRemainingBalanceList.vue b/web/src/pages/cash-account/CashAccountWithRemainingBalanceList.vue
new file mode 100644
index 000000000..a81d2ba7b
--- /dev/null
+++ b/web/src/pages/cash-account/CashAccountWithRemainingBalanceList.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { DataListFlex } from '@/components/DataList';
+import { FormInputDateTime, FormLabel, FormSelect } from '@/components/Base/Form';
+import { Collection } from '@/types/resources/Collection';
+import { CashAccount } from '@/types/models/CashAccount';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import CashAccountService from '@/services/CashAccountService';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { CashAccountReadAnyPaginateRequest } from '@/types/services/cash_account/CashAccountRequest';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const cashAccountService = new CashAccountService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder']);
+
+interface CashAccountWithRemainingBalanceFilters {
+  search: string;
+  endDate: string | null;
+  is_bank: boolean | null;
+}
+
+const filters = ref<CashAccountWithRemainingBalanceFilters>({
+  search: '',
+  endDate: null,
+  is_bank: null,
+});
+
+const cashAccountLists = ref<Collection<Array<CashAccount>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  filters.value.search = '';
+  const now = new Date();
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  filters.value.endDate = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getCashAccountsWithRemainingBalance('', true, 1, 10);
+});
+
+const getCashAccountsWithRemainingBalance = async (
+  search: string,
+  refresh: boolean,
+  page: number,
+  per_page: number,
+) => {
+  emits('loading-state', true);
+
+  const searchReq: CashAccountReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    is_bank: filters.value.is_bank,
+    with_remaining_balance: {
+      end_date: filters.value.endDate,
+    },
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<CashAccount>> | null> =
+    await cashAccountService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    cashAccountLists.value = result.data as Collection<Array<CashAccount>>;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  filters.value.search = data.search.text;
+
+  await getCashAccountsWithRemainingBalance(
+    filters.value.search,
+    false,
+    data.pagination.page,
+    data.pagination.per_page,
+  );
+};
+
+const handleEndDateFilterChange = async () => {
+  const perPage = cashAccountLists.value?.meta.per_page || 10;
+
+  await getCashAccountsWithRemainingBalance(filters.value.search, true, 1, perPage);
+};
+
+const handleIsBankFilterChange = async () => {
+  const perPage = cashAccountLists.value?.meta.per_page || 10;
+
+  await getCashAccountsWithRemainingBalance(filters.value.search, true, 1, perPage);
+};
+
+const getRemainingBalance = (cashAccount: CashAccount): number => {
+  return cashAccount.remaining_balance ?? 0;
+};
+
+const getCashAccountTypeLabel = (cashAccount: CashAccount): string => {
+  return cashAccount.is_bank ? t('views.cash_account.types.bank') : t('views.cash_account.types.cash');
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-4 md:col-span-6">
+          <FormLabel>
+            {{ t('views.cash_account.fields.with_remaining_balance_end_date') }}
+          </FormLabel>
+          <FormInputDateTime
+            v-model="filters.endDate"
+            :placeholder="t('views.cash_account.fields.with_remaining_balance_end_date')"
+            @change="handleEndDateFilterChange"
+          />
+        </div>
+        <div class="col-span-12 lg:col-span-4 md:col-span-6">
+          <FormLabel>
+            {{ t('views.cash_account.fields.is_bank') }}
+          </FormLabel>
+          <FormSelect v-model="filters.is_bank" @change="handleIsBankFilterChange">
+            <option :value="null"></option>
+            <option :value="true">{{ t('views.cash_account.types.bank') }}</option>
+            <option :value="false">{{ t('views.cash_account.types.cash') }}</option>
+          </FormSelect>
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="cashAccountLists"
+        :enable-search="true"
+        :can-print="false"
+        :can-export="false"
+        :rows="cashAccountLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="cashAccountLists ? cashAccountLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item }">
+          <div class="col-span-12 lg:col-span-6 sm:col-span-6 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.cash_account.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.cash_account.fields.code') }}:
+              {{ (item as CashAccount).code ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.cash_account.fields.name') }}:
+              {{ (item as CashAccount).name ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.cash_account.fields.is_bank') }}:
+              {{ getCashAccountTypeLabel(item as CashAccount) }}
+            </div>
+          </div>
+          <div class="col-span-12 lg:col-span-6 sm:col-span-6 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.cash_account.balance_suffix') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.cash_account.fields.remaining_balance') }}:
+              {{ formatCurrency(getRemainingBalance(item as CashAccount)) }}
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/cash-transfer/CashTransferCreate.vue b/web/src/pages/cash-transfer/CashTransferCreate.vue
new file mode 100644
index 000000000..b9a7a7e33
--- /dev/null
+++ b/web/src/pages/cash-transfer/CashTransferCreate.vue
@@ -0,0 +1,382 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import CashAccountService from '@/services/CashAccountService';
+import CashTransferService from '@/services/CashTransferService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const cashTransferService = new CashTransferService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.cash_transfer.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.cash_transfer.field_groups.transfer_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const cashTransferForm = cashTransferService.useCashTransferCreateForm();
+
+const sourceCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const sourceCashAccountSearch = ref<string>('');
+const sourceCashAccountOptions = computed(() =>
+  (sourceCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const destinationCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const destinationCashAccountSearch = ref<string>('');
+const destinationCashAccountOptions = computed(() =>
+  (destinationCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await Promise.all([loadSourceCashAccountDDL(), loadDestinationCashAccountDDL()]);
+
+  loadFromCache();
+  setLocationData();
+});
+
+const setLocationData = () => {
+  cashTransferForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('CASH_TRANSFER_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  cashTransferForm.setData(data);
+};
+
+const loadSourceCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    sourceCashAccountDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadDestinationCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    destinationCashAccountDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+
+  if (!el) return;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (cashTransferForm.hasErrors) {
+    const firstErrorKey = Object.keys(cashTransferForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await cashTransferForm
+    .submit()
+    .then(() => {
+      resetForm();
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-finance-cash-transfer-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  cashTransferForm.reset();
+  cashTransferForm.setErrors({});
+  setLocationData();
+  sourceCashAccountSearch.value = '';
+  destinationCashAccountSearch.value = '';
+};
+
+const setCode = () => {
+  cashTransferForm.forgetError('code');
+
+  if (cashTransferForm.code === '_AUTO_') {
+    cashTransferForm.setData({ code: '' });
+    return;
+  }
+
+  cashTransferForm.setData({ code: '_AUTO_' });
+};
+
+const clearSourceCashAccount = () => {
+  cashTransferForm.setData({ source_cash_account_id: '' });
+  cashTransferForm.forgetError('source_cash_account_id');
+};
+
+const clearDestinationCashAccount = () => {
+  cashTransferForm.setData({ destination_cash_account_id: '' });
+  cashTransferForm.forgetError('destination_cash_account_id');
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  cashTransferForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('CASH_TRANSFER_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="cashTransferForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="cashTransferForm.company_id" />
+
+          <FormLabel class="mt-5">
+            {{ selectedUserLocation.branch.code }}
+            <br />
+            {{ selectedUserLocation.branch.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="cashTransferForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="grid grid-cols-12 gap-4 p-5">
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('code') }">
+              {{ t('views.cash_transfer.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="cashTransferForm.code"
+              :class="{ 'border-danger': cashTransferForm.invalid('code') }"
+              :placeholder="t('views.cash_transfer.fields.code')"
+              @set-auto="setCode"
+              @change="cashTransferForm.validate('code')"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.code" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('date') }">
+              {{ t('views.cash_transfer.fields.date') }}
+            </FormLabel>
+            <FormInputDateTimeAuto
+              v-model="cashTransferForm.date"
+              :class="{ 'border-danger': cashTransferForm.invalid('date') }"
+              :placeholder="t('views.cash_transfer.fields.date')"
+              @change="cashTransferForm.validate('date')"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.date" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('source_cash_account_id') }">
+              {{ t('views.cash_transfer.fields.source_cash_account') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="cashTransferForm.source_cash_account_id"
+              v-model:search="sourceCashAccountSearch"
+              :options="sourceCashAccountOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': cashTransferForm.invalid('source_cash_account_id') }"
+              @change="cashTransferForm.validate('source_cash_account_id')"
+              @search="loadSourceCashAccountDDL"
+              @clear="clearSourceCashAccount"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.source_cash_account_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('destination_cash_account_id') }">
+              {{ t('views.cash_transfer.fields.destination_cash_account') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="cashTransferForm.destination_cash_account_id"
+              v-model:search="destinationCashAccountSearch"
+              :options="destinationCashAccountOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': cashTransferForm.invalid('destination_cash_account_id') }"
+              @change="cashTransferForm.validate('destination_cash_account_id')"
+              @search="loadDestinationCashAccountDDL"
+              @clear="clearDestinationCashAccount"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.destination_cash_account_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('amount') }">
+              {{ t('views.cash_transfer.fields.amount') }}
+            </FormLabel>
+            <FormInputCurrency
+              v-model="cashTransferForm.amount"
+              :allow-negative="false"
+              :class="{ 'border-danger': cashTransferForm.invalid('amount') }"
+              :placeholder="t('views.cash_transfer.fields.amount')"
+              @change="cashTransferForm.validate('amount')"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.amount" />
+          </div>
+          <div class="col-span-12">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('remarks') }">
+              {{ t('views.cash_transfer.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="cashTransferForm.remarks"
+              rows="3"
+              :class="{ 'border-danger': cashTransferForm.invalid('remarks') }"
+              :placeholder="t('views.cash_transfer.fields.remarks')"
+              @change="cashTransferForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="cashTransferForm.validating || cashTransferForm.hasErrors"
+          >
+            <Lucide v-if="cashTransferForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button
+            type="button"
+            href="#"
+            variant="soft-secondary"
+            class="w-28 shadow-md"
+            @click="resetForm"
+          >
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
+
diff --git a/web/src/pages/cash-transfer/CashTransferEdit.vue b/web/src/pages/cash-transfer/CashTransferEdit.vue
new file mode 100644
index 000000000..62d439152
--- /dev/null
+++ b/web/src/pages/cash-transfer/CashTransferEdit.vue
@@ -0,0 +1,392 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import CashAccountService from '@/services/CashAccountService';
+import CashTransferService from '@/services/CashTransferService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { type ServiceResponse } from '@/types/services/ServiceResponse';
+import { type CashTransfer } from '@/types/models/CashTransfer';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const cashTransferService = new CashTransferService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.cash_transfer.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.cash_transfer.field_groups.transfer_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const cashTransferForm = cashTransferService.useCashTransferEditForm(route.params.ulid as string);
+const cashTransferData = ref<CashTransfer | null>(null);
+
+const sourceCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const sourceCashAccountSearch = ref<string>('');
+const sourceCashAccountOptions = computed(() =>
+  (sourceCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const destinationCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const destinationCashAccountSearch = ref<string>('');
+const destinationCashAccountOptions = computed(() =>
+  (destinationCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData(route.params.ulid as string);
+  await Promise.all([loadSourceCashAccountDDL(), loadDestinationCashAccountDDL()]);
+});
+
+const loadData = async (ulid: string) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<CashTransfer | null> = await cashTransferService.read(ulid);
+
+  if (result.success && result.data) {
+    cashTransferData.value = result.data;
+
+    cashTransferForm.setData({
+      company_id: result.data.company.id,
+      branch_id: result.data.branch.id,
+      code: result.data.code,
+      date: result.data.date,
+      source_cash_account_id: result.data.source_cash_account.id,
+      destination_cash_account_id: result.data.destination_cash_account.id,
+      amount: result.data.amount,
+      remarks: result.data.remarks ?? '',
+    });
+  } else {
+    router.push({ name: 'side-menu-finance-cash-transfer-list' });
+  }
+
+  emits('loading-state', false);
+};
+
+const loadSourceCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: cashTransferData.value?.source_cash_account?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    sourceCashAccountDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadDestinationCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: cashTransferData.value?.destination_cash_account?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    destinationCashAccountDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+
+  if (!el) return;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (cashTransferForm.hasErrors) {
+    const firstErrorKey = Object.keys(cashTransferForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await cashTransferForm
+    .submit()
+    .then(() => {
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-finance-cash-transfer-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  cashTransferForm.reset();
+  cashTransferForm.setErrors({});
+  await loadData(route.params.ulid as string);
+  await Promise.all([loadSourceCashAccountDDL(), loadDestinationCashAccountDDL()]);
+};
+
+const setCode = () => {
+  cashTransferForm.forgetError('code');
+
+  if (cashTransferForm.code === '_AUTO_') {
+    cashTransferForm.setData({ code: '' });
+    return;
+  }
+
+  cashTransferForm.setData({ code: '_AUTO_' });
+};
+
+const clearSourceCashAccount = () => {
+  cashTransferForm.setData({ source_cash_account_id: '' });
+  cashTransferForm.forgetError('source_cash_account_id');
+};
+
+const clearDestinationCashAccount = () => {
+  cashTransferForm.setData({ destination_cash_account_id: '' });
+  cashTransferForm.forgetError('destination_cash_account_id');
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  cashTransferForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('CASH_TRANSFER_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="cashTransferForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="cashTransferForm.company_id" />
+
+          <FormLabel class="mt-5">
+            {{ selectedUserLocation.branch.code }}
+            <br />
+            {{ selectedUserLocation.branch.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="cashTransferForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="grid grid-cols-12 gap-4 p-5">
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('code') }">
+              {{ t('views.cash_transfer.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="cashTransferForm.code"
+              :class="{ 'border-danger': cashTransferForm.invalid('code') }"
+              :placeholder="t('views.cash_transfer.fields.code')"
+              @set-auto="setCode"
+              @change="cashTransferForm.validate('code')"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.code" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('date') }">
+              {{ t('views.cash_transfer.fields.date') }}
+            </FormLabel>
+            <FormInputDateTimeAuto
+              v-model="cashTransferForm.date"
+              :class="{ 'border-danger': cashTransferForm.invalid('date') }"
+              :placeholder="t('views.cash_transfer.fields.date')"
+              @change="cashTransferForm.validate('date')"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.date" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('source_cash_account_id') }">
+              {{ t('views.cash_transfer.fields.source_cash_account') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="cashTransferForm.source_cash_account_id"
+              v-model:search="sourceCashAccountSearch"
+              :options="sourceCashAccountOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': cashTransferForm.invalid('source_cash_account_id') }"
+              @change="cashTransferForm.validate('source_cash_account_id')"
+              @search="loadSourceCashAccountDDL"
+              @clear="clearSourceCashAccount"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.source_cash_account_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('destination_cash_account_id') }">
+              {{ t('views.cash_transfer.fields.destination_cash_account') }}
+            </FormLabel>
+            <FormSelectSearch
+              v-model="cashTransferForm.destination_cash_account_id"
+              v-model:search="destinationCashAccountSearch"
+              :options="destinationCashAccountOptions"
+              :placeholder="t('components.dropdown.placeholder')"
+              :class="{ 'border-danger': cashTransferForm.invalid('destination_cash_account_id') }"
+              @change="cashTransferForm.validate('destination_cash_account_id')"
+              @search="loadDestinationCashAccountDDL"
+              @clear="clearDestinationCashAccount"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.destination_cash_account_id" />
+          </div>
+          <div class="col-span-12 lg:col-span-6">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('amount') }">
+              {{ t('views.cash_transfer.fields.amount') }}
+            </FormLabel>
+            <FormInputCurrency
+              v-model="cashTransferForm.amount"
+              :allow-negative="false"
+              :class="{ 'border-danger': cashTransferForm.invalid('amount') }"
+              :placeholder="t('views.cash_transfer.fields.amount')"
+              @change="cashTransferForm.validate('amount')"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.amount" />
+          </div>
+          <div class="col-span-12">
+            <FormLabel :class="{ 'text-danger': cashTransferForm.invalid('remarks') }">
+              {{ t('views.cash_transfer.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="cashTransferForm.remarks"
+              rows="3"
+              :class="{ 'border-danger': cashTransferForm.invalid('remarks') }"
+              :placeholder="t('views.cash_transfer.fields.remarks')"
+              @change="cashTransferForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="cashTransferForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="cashTransferForm.validating || cashTransferForm.hasErrors"
+          >
+            <Lucide v-if="cashTransferForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button
+            type="button"
+            href="#"
+            variant="soft-secondary"
+            class="w-28 shadow-md"
+            @click="resetForm"
+          >
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
+
diff --git a/web/src/pages/cash-transfer/CashTransferIndex.vue b/web/src/pages/cash-transfer/CashTransferIndex.vue
new file mode 100644
index 000000000..49885c3d8
--- /dev/null
+++ b/web/src/pages/cash-transfer/CashTransferIndex.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { useUserContextStore } from '@/stores/user-context';
+import ProfileService from '@/services/ProfileService';
+import { type UserProfile } from '@/types/models/UserProfile';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import { type NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.cash_transfer.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const cashTransferNotification = ref<NotificationElement>();
+
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[cashTransferNotification]', (el: NotificationElement) => {
+  cashTransferNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-finance-cash-transfer-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-finance-cash-transfer-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.cash_transfer.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.cash_transfer.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.cash_transfer.page_title';
+      break;
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('CASH_TRANSFER_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('CASH_TRANSFER_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (cashTransferNotification.value) {
+    cashTransferNotification.value.showToast();
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="cashTransferNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
+
diff --git a/web/src/pages/cash-transfer/CashTransferList.vue b/web/src/pages/cash-transfer/CashTransferList.vue
new file mode 100644
index 000000000..2dbad5b95
--- /dev/null
+++ b/web/src/pages/cash-transfer/CashTransferList.vue
@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import CashTransferService from '@/services/CashTransferService';
+import { type CashTransfer } from '@/types/models/CashTransfer';
+import { type Collection } from '@/types/resources/Collection';
+import { type DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { type ServiceResponse } from '@/types/services/ServiceResponse';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { type NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+import { type CashTransferReadAnyPaginateRequest } from '@/types/services/cash-transfer/CashTransferRequest';
+
+const { t } = useI18n();
+const router = useRouter();
+const cashTransferService = new CashTransferService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const cashTransferLists = ref<Collection<Array<CashTransfer>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getCashTransfers('', true, 1, 10);
+});
+
+const getCashTransfers = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const requestParams: CashTransferReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<CashTransfer>> | null> =
+    await cashTransferService.readAnyPaginate(requestParams);
+
+  if (result.success && result.data) {
+    cashTransferLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async (data: DataListEmittedData) => {
+  await getCashTransfers(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (itemIdx: number) => {
+  if (!cashTransferLists.value) return;
+
+  const ulid = cashTransferLists.value.data[itemIdx].ulid;
+
+  router.push({
+    name: 'side-menu-finance-cash-transfer-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (itemIdx: number) => {
+  if (!cashTransferLists.value) return;
+
+  deleteUlid.value = cashTransferLists.value.data[itemIdx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<boolean | null> = await cashTransferService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getCashTransfers('', true, 1, 10);
+    showNotification(
+      t('views.cash_transfer.alert.delete_cash_transfer.title'),
+      t('views.cash_transfer.alert.delete_cash_transfer.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = {
+    title,
+    content,
+  };
+
+  emits('show-notification', notification);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <DataList
+    :title="t('views.cash_transfer.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="cashTransferLists ? cashTransferLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.cash_transfer.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.cash_transfer.table.cols.date') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.cash_transfer.table.cols.source_cash_account') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.cash_transfer.table.cols.destination_cash_account') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap text-right">
+              {{ t('views.cash_transfer.table.cols.amount') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="cashTransferLists !== null">
+          <template v-if="cashTransferLists.data.length === 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="6">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in cashTransferLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.date ? formatDate(item.date, 'DD-MMM-YYYY') : '-' }}</Table.Td>
+              <Table.Td>{{ item.source_cash_account.name }}</Table.Td>
+              <Table.Td>{{ item.destination_cash_account.name }}</Table.Td>
+              <Table.Td class="text-right">{{ formatCurrency(item.amount) }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="6">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.cash_transfer.fields.branch') }}
+                  </div>
+                  <div class="flex-1">{{ item.branch.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.cash_transfer.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks || '-' }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
+
diff --git a/web/src/pages/chart-of-account/ChartOfAccountCreate.vue b/web/src/pages/chart-of-account/ChartOfAccountCreate.vue
new file mode 100644
index 000000000..18d2abc01
--- /dev/null
+++ b/web/src/pages/chart-of-account/ChartOfAccountCreate.vue
@@ -0,0 +1,485 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import ChartOfAccountService from '@/services/ChartOfAccountService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormSelectSearch,
+  FormSelect,
+  FormTextarea,
+  FormSwitch,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import { CHART_OF_ACCOUNT_SYSTEM_KEYS } from '@/types/models/ChartOfAccount';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const chartOfAccountService = new ChartOfAccountService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.chart_of_account.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.chart_of_account.field_groups.chart_of_account_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const chartOfAccountForm = chartOfAccountService.useChartOfAccountCreateForm();
+const parentDDL = ref<Array<DropDownOption> | null>(null);
+const parentSearch = ref<string>('');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+const parentOptions = computed(() =>
+  (parentDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+const scopeOptions = computed(() => [
+  { value: 'user', label: t('views.chart_of_account.options.scope.user') },
+  { value: 'system', label: t('views.chart_of_account.options.scope.system') },
+]);
+const normalBalanceOptions = computed(() => [
+  { value: 'debit', label: t('views.chart_of_account.options.normal_balance.debit') },
+  { value: 'credit', label: t('views.chart_of_account.options.normal_balance.credit') },
+]);
+const systemKeyOptions = computed(() =>
+  CHART_OF_ACCOUNT_SYSTEM_KEYS.map((item) => ({
+    value: item,
+    label: item,
+  })),
+);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+  normalizeFormDefaults();
+  await loadParentDDL();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  chartOfAccountForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('CHART_OF_ACCOUNT_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+watch(
+  () => chartOfAccountForm.scope,
+  (newValue) => {
+    if (newValue !== 'system' && chartOfAccountForm.system_key) {
+      chartOfAccountForm.setData({ system_key: null });
+      chartOfAccountForm.forgetError('system_key');
+    }
+  },
+);
+// #endregion
+
+// #region Methods - ChartOfAccount
+const setCompanyIdData = () => {
+  chartOfAccountForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const normalizeFormDefaults = () => {
+  chartOfAccountForm.setData({
+    parent_id: chartOfAccountForm.parent_id ?? null,
+    scope: chartOfAccountForm.scope || 'user',
+    system_key: chartOfAccountForm.system_key || null,
+    source_type: chartOfAccountForm.source_type || null,
+    source_id: chartOfAccountForm.source_id || null,
+    code: chartOfAccountForm.code || '_AUTO_',
+    name: chartOfAccountForm.name || '',
+    normal_balance: chartOfAccountForm.normal_balance || 'debit',
+    is_group: chartOfAccountForm.is_group ?? false,
+    is_active: chartOfAccountForm.is_active ?? true,
+    remarks: chartOfAccountForm.remarks || '',
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('CHART_OF_ACCOUNT_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  const { account_type: _ignoredAccountType, ...sanitizedData } = data;
+  chartOfAccountForm.setData(sanitizedData);
+};
+
+const loadParentDDL = async (search = ''): Promise<void> => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await chartOfAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: undefined,
+    is_group: true,
+    include_id: chartOfAccountForm.parent_id ?? undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    parentDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const setCode = () => {
+  chartOfAccountForm.forgetError('code');
+  if (chartOfAccountForm.code == '_AUTO_') {
+    chartOfAccountForm.setData({ code: '' });
+  } else {
+    chartOfAccountForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  chartOfAccountForm.reset();
+  chartOfAccountForm.setErrors({});
+  chartOfAccountForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    parent_id: null,
+    scope: 'user',
+    system_key: null,
+    source_type: null,
+    source_id: null,
+    code: '_AUTO_',
+    name: '',
+    normal_balance: 'debit',
+    is_group: false,
+    is_active: true,
+    remarks: '',
+  });
+  parentSearch.value = '';
+  await loadParentDDL();
+};
+
+const onSubmit = async () => {
+  if (chartOfAccountForm.hasErrors) {
+    const firstErrorKey = Object.keys(chartOfAccountForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await chartOfAccountForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-chart-of-account-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="chartOfAccountForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="chartOfAccountForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('parent_id') }">
+                {{ t('views.chart_of_account.fields.parent') }}
+              </FormLabel>
+              <FormSelectSearch
+                id="parent_id"
+                v-model="chartOfAccountForm.parent_id"
+                v-model:search="parentSearch"
+                :options="parentOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('parent_id') }"
+                @change="chartOfAccountForm.validate('parent_id')"
+                @search="loadParentDDL"
+                @clear="chartOfAccountForm.validate('parent_id')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.parent_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('scope') }">
+                {{ t('views.chart_of_account.fields.scope') }}
+              </FormLabel>
+              <FormSelect
+                id="scope"
+                v-model="chartOfAccountForm.scope"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('scope') }"
+                @change="chartOfAccountForm.validate('scope')"
+              >
+                <option v-for="item in scopeOptions" :key="item.value" :value="item.value">
+                  {{ item.label }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="chartOfAccountForm.errors.scope" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('system_key') }">
+                {{ t('views.chart_of_account.fields.system_key') }}
+              </FormLabel>
+              <FormSelect
+                id="system_key"
+                v-model="chartOfAccountForm.system_key"
+                :disabled="chartOfAccountForm.scope !== 'system'"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('system_key') }"
+                @change="chartOfAccountForm.validate('system_key')"
+              >
+                <option :value="null">{{ t('views.chart_of_account.options.placeholder') }}</option>
+                <option v-for="item in systemKeyOptions" :key="item.value" :value="item.value">
+                  {{ item.label }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="chartOfAccountForm.errors.system_key" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('code') }">
+                {{ t('views.chart_of_account.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="chartOfAccountForm.code"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('code') }"
+                :placeholder="t('views.chart_of_account.fields.code')"
+                @set-auto="setCode"
+                @change="chartOfAccountForm.validate('code')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-8">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('name') }">
+                {{ t('views.chart_of_account.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="chartOfAccountForm.name"
+                type="text"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('name') }"
+                :placeholder="t('views.chart_of_account.fields.name')"
+                @change="chartOfAccountForm.validate('name')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('normal_balance') }">
+                {{ t('views.chart_of_account.fields.normal_balance') }}
+              </FormLabel>
+              <FormSelect
+                id="normal_balance"
+                v-model="chartOfAccountForm.normal_balance"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('normal_balance') }"
+                @change="chartOfAccountForm.validate('normal_balance')"
+              >
+                <option v-for="item in normalBalanceOptions" :key="item.value" :value="item.value">
+                  {{ item.label }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="chartOfAccountForm.errors.normal_balance" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('is_group') }" class="pr-5">
+                {{ t('views.chart_of_account.fields.is_group') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  id="is_group"
+                  v-model="chartOfAccountForm.is_group"
+                  type="checkbox"
+                  :class="{ 'border-danger': chartOfAccountForm.invalid('is_group') }"
+                  @change="chartOfAccountForm.validate('is_group')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="chartOfAccountForm.errors.is_group" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('is_active') }" class="pr-5">
+                {{ t('views.chart_of_account.fields.is_active') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  id="is_active"
+                  v-model="chartOfAccountForm.is_active"
+                  type="checkbox"
+                  :class="{ 'border-danger': chartOfAccountForm.invalid('is_active') }"
+                  @change="chartOfAccountForm.validate('is_active')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="chartOfAccountForm.errors.is_active" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('source_type') }">
+                {{ t('views.chart_of_account.fields.source_type') }}
+              </FormLabel>
+              <FormInput
+                id="source_type"
+                v-model="chartOfAccountForm.source_type"
+                type="text"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('source_type') }"
+                :placeholder="t('views.chart_of_account.fields.source_type')"
+                @change="chartOfAccountForm.validate('source_type')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.source_type" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('source_id') }">
+                {{ t('views.chart_of_account.fields.source_id') }}
+              </FormLabel>
+              <FormInput
+                id="source_id"
+                v-model="chartOfAccountForm.source_id"
+                type="number"
+                min="1"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('source_id') }"
+                :placeholder="t('views.chart_of_account.fields.source_id')"
+                @change="chartOfAccountForm.validate('source_id')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.source_id" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('remarks') }">
+                {{ t('views.chart_of_account.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="chartOfAccountForm.remarks"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('remarks') }"
+                :placeholder="t('views.chart_of_account.fields.remarks')"
+                @change="chartOfAccountForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="chartOfAccountForm.validating || chartOfAccountForm.hasErrors"
+          >
+            <Lucide v-if="chartOfAccountForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/chart-of-account/ChartOfAccountEdit.vue b/web/src/pages/chart-of-account/ChartOfAccountEdit.vue
new file mode 100644
index 000000000..363593f41
--- /dev/null
+++ b/web/src/pages/chart-of-account/ChartOfAccountEdit.vue
@@ -0,0 +1,402 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import ChartOfAccountService from '@/services/ChartOfAccountService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormSelectSearch,
+  FormSelect,
+  FormTextarea,
+  FormSwitch,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { ChartOfAccount } from '@/types/models/ChartOfAccount';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const chartOfAccountService = new ChartOfAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.chart_of_account.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.chart_of_account.field_groups.chart_of_account_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const chartOfAccountForm = chartOfAccountService.useChartOfAccountEditForm(route.params.ulid.toString());
+const chartOfAccountData = ref<ChartOfAccount | null>(null);
+const companyCode = ref<string>('');
+const companyName = ref<string>('');
+const parentDDL = ref<Array<DropDownOption> | null>(null);
+const parentSearch = ref<string>('');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const parentOptions = computed(() =>
+  (parentDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+const normalBalanceOptions = computed(() => [
+  { value: 'debit', label: t('views.chart_of_account.options.normal_balance.debit') },
+  { value: 'credit', label: t('views.chart_of_account.options.normal_balance.credit') },
+]);
+const scopeLabel = computed(() =>
+  chartOfAccountData.value?.scope
+    ? t(`views.chart_of_account.options.scope.${chartOfAccountData.value.scope}`)
+    : '-',
+);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+// #endregion
+
+// #region Methods - ChartOfAccount
+const loadParentDDL = async (search = ''): Promise<void> => {
+  if (!chartOfAccountData.value?.company.id) return;
+
+  const result = await chartOfAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: chartOfAccountData.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: undefined,
+    is_group: true,
+    include_id: chartOfAccountData.value.parent?.id ?? chartOfAccountForm.parent_id ?? undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    parentDDL.value = result.data.data
+      .filter((item) => item.id !== chartOfAccountData.value?.id)
+      .map((item) => ({
+        code: item.id,
+        name: `${item.code} - ${item.name}`,
+      }));
+  }
+};
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await chartOfAccountService.read(route.params.ulid.toString());
+
+  if (result.success && result.data) {
+    chartOfAccountData.value = result.data;
+    companyCode.value = result.data.company?.code ?? '';
+    companyName.value = result.data.company?.name ?? '';
+
+    chartOfAccountForm.setData({
+      company_id: result.data.company?.id ?? '',
+      parent_id: result.data.parent?.id ?? null,
+      code: result.data.code,
+      name: result.data.name,
+      normal_balance: result.data.normal_balance,
+      is_group: result.data.is_group,
+      is_active: result.data.is_active,
+      remarks: result.data.remarks ?? '',
+    } as any);
+
+    await loadParentDDL();
+  } else {
+    router.push({ name: 'side-menu-chart-of-account-list' });
+  }
+
+  emits('loading-state', false);
+};
+
+const setCode = () => {
+  chartOfAccountForm.forgetError('code');
+  if (chartOfAccountForm.code == '_AUTO_') {
+    chartOfAccountForm.setData({ code: '' });
+  } else {
+    chartOfAccountForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  chartOfAccountForm.reset();
+  chartOfAccountForm.setErrors({});
+  parentSearch.value = '';
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (chartOfAccountForm.hasErrors) {
+    const firstErrorKey = Object.keys(chartOfAccountForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await chartOfAccountForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-chart-of-account-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="chartOfAccountForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ companyCode }}
+            <br />
+            {{ companyName }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="chartOfAccountForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-6 lg:col-span-3">
+              <FormLabel>{{ t('views.chart_of_account.fields.scope') }}</FormLabel>
+              <FormInput :model-value="scopeLabel" type="text" readonly />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-5">
+              <FormLabel>{{ t('views.chart_of_account.fields.system_key') }}</FormLabel>
+              <FormInput :model-value="chartOfAccountData?.system_key ?? '-'" type="text" readonly />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.chart_of_account.fields.level') }}</FormLabel>
+              <FormInput :model-value="chartOfAccountData?.level?.toString() ?? '-'" type="text" readonly />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.chart_of_account.fields.source_id') }}</FormLabel>
+              <FormInput :model-value="chartOfAccountData?.source_id?.toString() ?? '-'" type="text" readonly />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel>{{ t('views.chart_of_account.fields.source_type') }}</FormLabel>
+              <FormInput :model-value="chartOfAccountData?.source_type ?? '-'" type="text" readonly />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('parent_id') }">
+                {{ t('views.chart_of_account.fields.parent') }}
+              </FormLabel>
+              <FormSelectSearch
+                id="parent_id"
+                v-model="chartOfAccountForm.parent_id"
+                v-model:search="parentSearch"
+                :options="parentOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('parent_id') }"
+                @change="chartOfAccountForm.validate('parent_id')"
+                @search="loadParentDDL"
+                @clear="chartOfAccountForm.validate('parent_id')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.parent_id" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('code') }">
+                {{ t('views.chart_of_account.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="chartOfAccountForm.code"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('code') }"
+                :placeholder="t('views.chart_of_account.fields.code')"
+                @set-auto="setCode"
+                @change="chartOfAccountForm.validate('code')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-8">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('name') }">
+                {{ t('views.chart_of_account.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="chartOfAccountForm.name"
+                type="text"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('name') }"
+                :placeholder="t('views.chart_of_account.fields.name')"
+                @change="chartOfAccountForm.validate('name')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('normal_balance') }">
+                {{ t('views.chart_of_account.fields.normal_balance') }}
+              </FormLabel>
+              <FormSelect
+                id="normal_balance"
+                v-model="chartOfAccountForm.normal_balance"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('normal_balance') }"
+                @change="chartOfAccountForm.validate('normal_balance')"
+              >
+                <option v-for="item in normalBalanceOptions" :key="item.value" :value="item.value">
+                  {{ item.label }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="chartOfAccountForm.errors.normal_balance" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('is_group') }" class="pr-5">
+                {{ t('views.chart_of_account.fields.is_group') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  id="is_group"
+                  v-model="chartOfAccountForm.is_group"
+                  type="checkbox"
+                  :class="{ 'border-danger': chartOfAccountForm.invalid('is_group') }"
+                  @change="chartOfAccountForm.validate('is_group')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="chartOfAccountForm.errors.is_group" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('is_active') }" class="pr-5">
+                {{ t('views.chart_of_account.fields.is_active') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  id="is_active"
+                  v-model="chartOfAccountForm.is_active"
+                  type="checkbox"
+                  :class="{ 'border-danger': chartOfAccountForm.invalid('is_active') }"
+                  @change="chartOfAccountForm.validate('is_active')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="chartOfAccountForm.errors.is_active" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': chartOfAccountForm.invalid('remarks') }">
+                {{ t('views.chart_of_account.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="chartOfAccountForm.remarks"
+                :class="{ 'border-danger': chartOfAccountForm.invalid('remarks') }"
+                :placeholder="t('views.chart_of_account.fields.remarks')"
+                @change="chartOfAccountForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="chartOfAccountForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="chartOfAccountForm.validating || chartOfAccountForm.hasErrors"
+          >
+            <Lucide v-if="chartOfAccountForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/chart-of-account/ChartOfAccountIndex.vue b/web/src/pages/chart-of-account/ChartOfAccountIndex.vue
new file mode 100644
index 000000000..60e4e3136
--- /dev/null
+++ b/web/src/pages/chart-of-account/ChartOfAccountIndex.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.chart_of_account.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const chartOfAccountNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[chartOfAccountNotification]', (el: NotificationElement) => {
+  chartOfAccountNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-chart-of-account-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-chart-of-account-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.chart_of_account.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.chart_of_account.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.chart_of_account.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (chartOfAccountNotification.value) {
+    chartOfAccountNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('CHART_OF_ACCOUNT_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('CHART_OF_ACCOUNT_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="chartOfAccountNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/chart-of-account/ChartOfAccountList.vue b/web/src/pages/chart-of-account/ChartOfAccountList.vue
new file mode 100644
index 000000000..78c1007e6
--- /dev/null
+++ b/web/src/pages/chart-of-account/ChartOfAccountList.vue
@@ -0,0 +1,414 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import TreeList from '@/components/TreeList/TreeList.vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import { Dialog } from '@/components/Base/Headless';
+import { useRouter } from 'vue-router';
+import ChartOfAccountService from '@/services/ChartOfAccountService';
+import { ChartOfAccount } from '@/types/models/ChartOfAccount';
+import { Resource } from '@/types/resources/Resource';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { NotificationData } from '@/types/models/NotificationData';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+// #endregion
+
+interface TreeListRef {
+  expandAll: () => void;
+  collapseAll: () => void;
+}
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const chartOfAccountService = new ChartOfAccountService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+// #endregion
+
+// #region Refs
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | number | null>(null);
+const treeListRef = ref<TreeListRef | null>(null);
+const chartOfAccountLists = ref<Resource<Array<ChartOfAccount>> | null>({
+  data: [],
+});
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getChartOfAccounts('', true);
+});
+// #endregion
+
+// #region Methods
+const getChartOfAccounts = async (search: string, refresh: boolean) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<Resource<Array<ChartOfAccount>> | null> = await chartOfAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: false,
+    has_children: undefined,
+    is_group: undefined,
+    include_id: undefined,
+    refresh,
+    limit: 1000,
+  });
+
+  if (result.success && result.data) {
+    chartOfAccountLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async () => {
+  await getChartOfAccounts('', false);
+};
+
+const viewSelected = (itemId: string | number) => {
+  if (expandDetail.value === itemId) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = itemId;
+  }
+};
+
+const editSelected = (item: ChartOfAccount) => {
+  router.push({
+    name: 'side-menu-chart-of-account-edit',
+    params: { ulid: item.ulid },
+  });
+};
+
+const deleteSelected = (item: ChartOfAccount) => {
+  deleteUlid.value = item.ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<boolean | null> = await chartOfAccountService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getChartOfAccounts('', true);
+    showNotification(
+      t('views.chart_of_account.alert.delete_chart_of_account.title'),
+      t('views.chart_of_account.alert.delete_chart_of_account.content'),
+    );
+  } else {
+    const alertList = result.errors ?? convertErrorTypeToAlertListType({ message: result.message });
+    showAlertPlaceholder('danger', result.message ?? '', alertList);
+  }
+
+  emits('loading-state', false);
+};
+
+const getRowIndentStyle = (depth: number) => ({
+  paddingLeft: `${depth * 1.5}rem`,
+});
+
+const optionLabel = (group: 'scope' | 'account_type' | 'normal_balance', value?: string | null) => {
+  if (!value) return '-';
+  return t(`views.chart_of_account.options.${group}.${value}`);
+};
+
+const booleanLabel = (value: boolean) =>
+  value ? t('views.chart_of_account.options.boolean.yes') : t('views.chart_of_account.options.boolean.no');
+
+const expandAllTreeRows = () => {
+  treeListRef.value?.expandAll();
+};
+
+const collapseAllTreeRows = () => {
+  treeListRef.value?.collapseAll();
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.chart_of_account.table.title')"
+    :enable-search="false"
+    :can-print="true"
+    :can-export="true"
+    :pagination="null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #toolbar-actions>
+      <Button variant="outline-secondary" @click="collapseAllTreeRows">
+        <Lucide icon="ChevronsUpDown" class="mr-1 h-4 w-4" />
+        Collapse All
+      </Button>
+      <Button variant="outline-secondary" @click="expandAllTreeRows">
+        <Lucide icon="ListTree" class="mr-1 h-4 w-4" />
+        Expand All
+      </Button>
+    </template>
+
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.chart_of_account.fields.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.chart_of_account.fields.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.chart_of_account.fields.scope') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.chart_of_account.fields.is_active') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="chartOfAccountLists !== null">
+          <template v-if="chartOfAccountLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <TreeList v-else ref="treeListRef" :items="chartOfAccountLists.data">
+            <template #row="{ item, depth, hasChildren, isExpanded, toggle }">
+              <Table.Tr class="intro-x">
+                <Table.Td>
+                  <div class="font-medium">{{ item.code }}</div>
+                </Table.Td>
+                <Table.Td>
+                  <div class="flex items-center gap-2" :style="getRowIndentStyle(depth)">
+                    <button
+                      v-if="hasChildren"
+                      type="button"
+                      class="flex h-5 w-5 items-center justify-center rounded border border-slate-200 text-slate-500 transition hover:bg-slate-100"
+                      :aria-label="isExpanded ? 'Collapse row' : 'Expand row'"
+                      @click="toggle()"
+                    >
+                      <Lucide :icon="isExpanded ? 'ChevronDown' : 'ChevronRight'" class="h-3 w-3" />
+                    </button>
+                    <Lucide v-else-if="depth > 0" icon="CornerDownRight" class="h-4 w-4 text-slate-400" />
+                    <div v-else class="w-5"></div>
+                    <span>{{ item.name }}</span>
+                  </div>
+                </Table.Td>
+                <Table.Td>
+                  {{ optionLabel('scope', item.scope) }}
+                </Table.Td>
+                <Table.Td>
+                  {{ booleanLabel(item.is_active) }}
+                </Table.Td>
+                <Table.Td>
+                  <div class="flex justify-end gap-1">
+                    <Button variant="outline-secondary" @click="viewSelected(item.id)">
+                      <Lucide icon="Info" class="h-4 w-4" />
+                    </Button>
+                    <Button variant="outline-secondary" @click="editSelected(item as ChartOfAccount)">
+                      <Lucide icon="Pen" class="h-4 w-4" />
+                    </Button>
+                    <Button variant="outline-secondary" @click="deleteSelected(item as ChartOfAccount)">
+                      <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                    </Button>
+                  </div>
+                </Table.Td>
+              </Table.Tr>
+              <Table.Tr
+                :class="{
+                  'intro-x': true,
+                  'hidden transition-all': expandDetail !== item.id,
+                }"
+              >
+                <Table.Td colspan="5">
+                  <div class="flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.code') }}
+                    </div>
+                    <div class="flex-1">{{ item.code }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.name') }}
+                    </div>
+                    <div class="flex-1">{{ item.name }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.parent') }}
+                    </div>
+                    <div class="flex-1">
+                      {{ item.parent ? `${item.parent.code} - ${item.parent.name}` : '-' }}
+                    </div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.account_type') }}
+                    </div>
+                    <div class="flex-1">{{ optionLabel('account_type', item.account_type) }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.normal_balance') }}
+                    </div>
+                    <div class="flex-1">{{ optionLabel('normal_balance', item.normal_balance) }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.system_key') }}
+                    </div>
+                    <div class="flex-1">{{ item.system_key ?? '-' }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.level') }}
+                    </div>
+                    <div class="flex-1">{{ item.level }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.is_group') }}
+                    </div>
+                    <div class="flex-1">{{ booleanLabel(item.is_group) }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.child_count') }}
+                    </div>
+                    <div class="flex-1">{{ item.children?.length ?? 0 }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.source_type') }}
+                    </div>
+                    <div class="flex-1">{{ item.source_type ?? '-' }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.source_id') }}
+                    </div>
+                    <div class="flex-1">{{ item.source_id ?? '-' }}</div>
+                  </div>
+                  <div class="mt-1 flex flex-row">
+                    <div class="ml-5 w-48 pr-5 text-right font-medium">
+                      {{ t('views.chart_of_account.fields.remarks') }}
+                    </div>
+                    <div class="flex-1">{{ item.remarks || '-' }}</div>
+                  </div>
+                </Table.Td>
+              </Table.Tr>
+            </template>
+          </TreeList>
+        </Table.Tbody>
+      </Table>
+
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="mr-1 w-24"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/company/CompanyCreate.vue b/web/src/pages/company/CompanyCreate.vue
index 45d8fbc30..dfe71c2f3 100644
--- a/web/src/pages/company/CompanyCreate.vue
+++ b/web/src/pages/company/CompanyCreate.vue
@@ -1,234 +1,292 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import CompanyService from "@/services/CompanyService";
-import DashboardService from "@/services/DashboardService";
-import CacheService from "@/services/CacheService";
-import { DropDownOption } from "@/types/models/DropDownOption";
-import { TwoColumnsLayout } from "@/components/Base/Form/FormLayout";
-import {
-    FormInput,
-    FormLabel,
-    FormTextarea,
-    FormSelect,
-    FormInputCode,
-    FormSwitch,
-    FormErrorMessages
-} from "@/components/Base/Form";
-import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
-import { CardState } from "@/types/enums/CardState";
-import Button from "@/components/Base/Button";
-import { ViewMode } from "@/types/enums/ViewMode";
-import { debounce } from "lodash";
-import Lucide from "@/components/Base/Lucide";
-import { useRouter } from "vue-router";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-
-const companyServices = new CompanyService();
-const dashboardServices = new DashboardService();
-const cacheServices = new CacheService();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
-// #endregion
-
-// #region Refs
-const cards = ref<Array<TwoColumnsLayoutCards>>([
-    { title: 'views.company.field_groups.company_data', state: CardState.Expanded, },
-    { title: '', state: CardState.Hidden, id: 'button' }
-]);
-
-const statusDDL = ref<Array<DropDownOption> | null>(null);
-
-const companyForm = companyServices.useCompanyCreateForm();
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-    emits('mode-state', ViewMode.FORM_CREATE);
-    getDDL();
-
-    loadFromCache();
-});
-// #endregion
-
-// #region Methods
-const loadFromCache = () => {
-    let data = cacheServices.getLastEntity('USER_CREATE') as Record<string, unknown>;
-    if (!data) return;
-    companyForm.setData(data);
-};
-
-const getDDL = (): void => {
-    dashboardServices.getStatusDDL().then((result: Array<DropDownOption> | null) => {
-        statusDDL.value = result;
-    });
-};
-
-const handleExpandCard = (index: number) => {
-    if (cards.value[index].state === CardState.Collapsed) {
-        cards.value[index].state = CardState.Expanded
-    } else if (cards.value[index].state === CardState.Expanded) {
-        cards.value[index].state = CardState.Collapsed
-    }
-};
-
-const scrollToError = (id: string): void => {
-    let el = document.getElementById(id);
-
-    if (!el) return;
-
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-};
-
-const onSubmit = async () => {
-    if (companyForm.hasErrors) {
-        scrollToError(Object.keys(companyForm.errors)[0]);
-    }
-
-    emits('loading-state', true);
-    await companyForm.submit().then(() => {
-        resetForm();
-        emits('update-profile');
-        router.push({ name: 'side-menu-company-company-list' });
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        emits('loading-state', false);
-    });
-};
-
-const resetForm = () => {
-    companyForm.reset();
-    companyForm.setErrors({});
-};
-
-const setCode = () => {
-    companyForm.forgetError('code');
-    if (companyForm.code == '_AUTO_') {
-        companyForm.setData({ code: '' });
-    } else {
-        companyForm.setData({ code: '_AUTO_' });
-    }
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-
-const convertErrorTypeToAlertListType = (error: Error) => {
-    const record: Record<string, Array<string>> = {};
-
-    record.error = [error.message];
-
-    return record;
-};
-// #endregion
-
-// #region Watchers
-watch(
-    companyForm,
-    debounce((newValue): void => {
-        cacheServices.setLastEntity('COMPANY_CREATE', newValue.data())
-        if (companyForm.hasErrors) {
-            
-        }
-    }, 500),
-    { deep: true }
-);
-// #endregion
-</script>
-
-<template>
-    <form id="companyForm" @submit.prevent="onSubmit">
-        <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
-            <template #card-items-0>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': companyForm.invalid('code') }">
-                            {{ t('views.company.fields.code') }}
-                        </FormLabel>
-                        <FormInputCode v-model="companyForm.code"
-                            :class="{ 'border-danger': companyForm.invalid('code') }"
-                            :placeholder="t('views.company.fields.code')"
-                            @set-auto="setCode" @change="companyForm.validate('code')" />
-                        <FormErrorMessages :messages="companyForm.errors.code" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': companyForm.invalid('name') }">
-                            {{ t('views.company.fields.name') }}
-                        </FormLabel>
-                        <FormInput v-model="companyForm.name" type="text"
-                            :class="{ 'border-danger': companyForm.invalid('name') }"
-                            :placeholder="t('views.company.fields.name')" @change="companyForm.validate('name')" />
-                        <FormErrorMessages :messages="companyForm.errors.name" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.company.fields.address') }}
-                        </FormLabel>
-                        <FormTextarea v-model="companyForm.address" type="text"
-                            :placeholder="t('views.company.fields.address')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': companyForm.invalid('default') }">
-                            {{ t('views.company.fields.default') }}
-                        </FormLabel>
-                        <FormSwitch class="mt-2">
-                            <FormSwitch.Input v-model="companyForm.default" type="checkbox"
-                                :class="{ 'border-danger': companyForm.invalid('default') }"
-                                :placeholder="t('views.company.fields.default')" />
-                        </FormSwitch>
-                        <FormErrorMessages :messages="companyForm.errors.default" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': companyForm.invalid('status') }">
-                            {{ t('views.company.fields.status') }}
-                        </FormLabel>
-                        <FormSelect v-model="companyForm.status"
-                            :class="{ 'border-danger': companyForm.invalid('status') }"
-                            @change="companyForm.validate('status')">
-                            <option value="">{{ t('components.dropdown.placeholder') }}</option>
-                            <option v-for="c in statusDDL" :key="c.code" :value="c.code">{{ t(c.name) }}</option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="companyForm.errors.status" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-button>
-                <div class="flex gap-4">
-                    <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
-                        :disabled="companyForm.validating || companyForm.hasErrors">
-                        <Lucide v-if="companyForm.validating" icon="Loader" class="animate-spin" />
-                        <template v-else>
-                            {{ t("components.buttons.submit") }}
-                        </template>
-                    </Button>
-                    <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
-                        {{ t("components.buttons.reset") }}
-                    </Button>
-                </div>
-            </template>
-        </TwoColumnsLayout>
-    </form>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { AxiosError, isAxiosError } from 'axios';
+  import CompanyService from '@/services/CompanyService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormInputCode,
+    FormSwitch,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useRouter } from 'vue-router';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const companyServices = new CompanyService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.company.field_groups.company_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const companyForm = companyServices.useCompanyCreateForm();
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    await Promise.all([getDDL()]);
+
+    loadFromCache();
+  });
+  // #endregion
+
+  // #region Methods
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('COMPANY_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    companyForm.setData(data);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    const result = await dashboardServices.getStatusDDL();
+    if (result) {
+      statusDDL.value = result;
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (companyForm.hasErrors) {
+      scrollToError(Object.keys(companyForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await companyForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-company-company-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    companyForm.reset();
+    companyForm.setErrors({});
+  };
+
+  const setCode = () => {
+    companyForm.forgetError('code');
+    if (companyForm.code == '_AUTO_') {
+      companyForm.setData({ code: '' });
+    } else {
+      companyForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const convertErrorTypeToAlertListType = (error: unknown) => {
+    const record: Record<string, Array<string>> = {};
+
+    const anyError = error as any;
+    const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+    if (response && response.data) {
+      const data = response.data as any;
+
+      if (data.errors && typeof data.errors === 'object') {
+        for (const key of Object.keys(data.errors)) {
+          const value = data.errors[key];
+          if (Array.isArray(value)) {
+            record[key] = value;
+          } else if (value !== undefined && value !== null) {
+            record[key] = [String(value)];
+          }
+        }
+        return record;
+      }
+      if (data.message) {
+        record.error = [String(data.message)];
+        return record;
+      }
+    }
+    if (error instanceof Error && error.message) {
+      record.error = [error.message];
+    } else {
+      record.error = ['Unknown error'];
+    }
+    return record;
+  };
+  // #endregion
+
+  // #region Watchers
+  watch(
+    companyForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('COMPANY_CREATE', newValue.data());
+      if (companyForm.hasErrors) {
+      }
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="companyForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': companyForm.invalid('code') }">
+              {{ t('views.company.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="companyForm.code"
+              :class="{ 'border-danger': companyForm.invalid('code') }"
+              :placeholder="t('views.company.fields.code')"
+              @set-auto="setCode"
+              @change="companyForm.validate('code')"
+            />
+            <FormErrorMessages :messages="companyForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': companyForm.invalid('name') }">
+              {{ t('views.company.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="companyForm.name"
+              type="text"
+              :class="{ 'border-danger': companyForm.invalid('name') }"
+              :placeholder="t('views.company.fields.name')"
+              @change="companyForm.validate('name')"
+            />
+            <FormErrorMessages :messages="companyForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.company.fields.address') }}
+            </FormLabel>
+            <FormTextarea v-model="companyForm.address" type="text" :placeholder="t('views.company.fields.address')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': companyForm.invalid('default') }">
+              {{ t('views.company.fields.default') }}
+            </FormLabel>
+            <FormSwitch class="mt-2">
+              <FormSwitch.Input
+                v-model="companyForm.default"
+                type="checkbox"
+                :class="{ 'border-danger': companyForm.invalid('default') }"
+                :placeholder="t('views.company.fields.default')"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="companyForm.errors.default" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': companyForm.invalid('status') }">
+              {{ t('views.company.fields.status') }}
+            </FormLabel>
+            <FormSelect
+              v-model="companyForm.status"
+              :class="{ 'border-danger': companyForm.invalid('status') }"
+              @change="companyForm.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="companyForm.errors.status" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="companyForm.validating || companyForm.hasErrors"
+          >
+            <Lucide v-if="companyForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/company/CompanyEdit.vue b/web/src/pages/company/CompanyEdit.vue
index eaeed28cf..55f0e5d32 100644
--- a/web/src/pages/company/CompanyEdit.vue
+++ b/web/src/pages/company/CompanyEdit.vue
@@ -1,248 +1,270 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import CompanyService from "@/services/CompanyService";
-import DashboardService from "@/services/DashboardService";
-import CacheService from "@/services/CacheService";
-import { TwoColumnsLayout } from "@/components/Base/Form/FormLayout";
-import {
-    FormInput,
-    FormLabel,
-    FormTextarea,
-    FormSelect,
-    FormSwitch,
-    FormInputCode,
-    FormErrorMessages,
-} from "@/components/Base/Form";
-import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
-import { CardState } from "@/types/enums/CardState";
-import { DropDownOption } from "@/types/models/DropDownOption";
-import { ServiceResponse } from "@/types/services/ServiceResponse";
-import { ViewMode } from "@/types/enums/ViewMode";
-import Button from "@/components/Base/Button";
-import { debounce } from "lodash";
-import Lucide from "@/components/Base/Lucide";
-import { Company } from "@/types/models/Company";
-import { useRouter } from "vue-router";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const companyServices = new CompanyService();
-const dashboardServices = new DashboardService();
-const cacheServices = new CacheService();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
-// #endregion
-
-// #region Refs
-const cards = ref<Array<TwoColumnsLayoutCards>>([
-    { title: 'views.company.field_groups.company_data', state: CardState.Expanded, },
-    { title: '', state: CardState.Hidden, id: 'button' }
-]);
-
-const statusDDL = ref<Array<DropDownOption> | null>(null);
-
-const companyForm = companyServices.useCompanyEditForm(route.params.ulid as string);
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-    emits('mode-state', ViewMode.FORM_EDIT);
-    getDDL();
-
-    await loadData(route.params.ulid as string);
-});
-// #endregion
-
-// #region Methods
-const loadData = async (ulid: string) => {
-    emits('loading-state', true);
-    let response: ServiceResponse<Company | null> = await companyServices.read(ulid);
-
-    if (response && response.data) {
-        companyForm.setData({
-            code: response.data.code,
-            name: response.data.name,
-            address: response.data.address,
-            default: response.data.default,
-            status: response.data.status,
-        });
-    }
-    emits('loading-state', false);
-}
-
-const getDDL = (): void => {
-    dashboardServices.getStatusDDL().then((result: Array<DropDownOption> | null) => {
-        statusDDL.value = result;
-    });
-}
-
-const handleExpandCard = (index: number) => {
-    if (cards.value[index].state === CardState.Collapsed) {
-        cards.value[index].state = CardState.Expanded
-    } else if (cards.value[index].state === CardState.Expanded) {
-        cards.value[index].state = CardState.Collapsed
-    }
-}
-
-const scrollToError = (id: string): void => {
-    let el = document.getElementById(id);
-
-    if (!el) return;
-
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-}
-
-const onSubmit = async () => {
-    if (companyForm.hasErrors) {
-        scrollToError(Object.keys(companyForm.errors)[0]);
-    }
-
-    emits('loading-state', true);
-    await companyForm.submit().then(() => {
-        resetForm();
-        emits('update-profile');
-        router.push({ name: 'side-menu-company-company-list' });
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        emits('loading-state', false);
-    });
-};
-
-const resetForm = async () => {
-    companyForm.reset();
-    companyForm.setErrors({});
-    await loadData(route.params.ulid as string);
-};
-
-const setCode = () => {
-    companyForm.forgetError('code');
-    if (companyForm.code == '_AUTO_') {
-        companyForm.setData({ code: '' });
-    } else {
-        companyForm.setData({ code: '_AUTO_' });
-    }
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-
-const convertErrorTypeToAlertListType = (error: Error) => {
-    const record: Record<string, Array<string>> = {};
-
-    record.error = [error.message];
-
-    return record;
-};
-// #endregion
-
-// #region Watchers
-watch(
-    companyForm,
-    debounce((newValue): void => {
-        cacheServices.setLastEntity('COMPANY_EDIT', newValue.data())
-        if (companyForm.hasErrors) {
-            
-        }
-    }, 500),
-    { deep: true }
-);
-// #endregion
-</script>
-
-<template>
-    <form id="companyForm" @submit.prevent="onSubmit">
-        <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
-            <template #card-items-0>
-                <div class="p-5">
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': companyForm.invalid('code') }">
-                            {{ t('views.company.fields.code') }}
-                        </FormLabel>
-                        <FormInputCode v-model="companyForm.code" 
-                            :class="{ 'border-danger': companyForm.invalid('code') }"
-                            :placeholder="t('views.company.fields.code')" @set-auto="setCode" @change="companyForm.validate('code')" />
-                        <FormErrorMessages :messages="companyForm.errors.code" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': companyForm.invalid('name') }">
-                            {{ t('views.company.fields.name') }}
-                        </FormLabel>
-                        <FormInput v-model="companyForm.name" type="text"
-                            :class="{ 'border-danger': companyForm.invalid('name') }"
-                            :placeholder="t('views.company.fields.name')" @change="companyForm.validate('name')" />
-                        <FormErrorMessages :messages="companyForm.errors.name" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel>
-                            {{ t('views.company.fields.address') }}
-                        </FormLabel>
-                        <FormTextarea v-model="companyForm.address" type="text"
-                            :placeholder="t('views.company.fields.address')" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': companyForm.invalid('default') }">
-                            {{ t('views.company.fields.default') }}
-                        </FormLabel>
-                        <FormSwitch class="mt-2">
-                            <FormSwitch.Input v-model="companyForm.default" type="checkbox"
-                                :class="{ 'border-danger': companyForm.invalid('default') }"
-                                :placeholder="t('views.company.fields.default')" />
-                        </FormSwitch>
-                        <FormErrorMessages :messages="companyForm.errors.default" />
-                    </div>
-                    <div class="pb-4">
-                        <FormLabel :class="{ 'text-danger': companyForm.invalid('status') }">
-                            {{ t('views.company.fields.status') }}
-                        </FormLabel>
-                        <FormSelect v-model="companyForm.status"
-                            :class="{ 'border-danger': companyForm.invalid('status') }"
-                            @change="companyForm.validate('status')">
-                            <option value="">{{ t('components.dropdown.placeholder') }}</option>
-                            <option v-for="c in statusDDL" :key="c.code" :value="c.code">{{ t(c.name) }}</option>
-                        </FormSelect>
-                        <FormErrorMessages :messages="companyForm.errors.status" />
-                    </div>
-                </div>
-            </template>
-            <template #card-items-button>
-                <div class="flex gap-4">
-                    <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
-                        :disabled="companyForm.validating || companyForm.hasErrors">
-                        <Lucide v-if="companyForm.validating" icon="Loader" class="animate-spin" />
-                        <template v-else>
-                            {{ t("components.buttons.submit") }}
-                        </template>
-                    </Button>
-                    <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
-                        {{ t("components.buttons.reset") }}
-                    </Button>
-                </div>
-            </template>
-        </TwoColumnsLayout>
-    </form>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { useRoute, useRouter } from 'vue-router';
+  import CompanyService from '@/services/CompanyService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormSwitch,
+    FormInputCode,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { Company } from '@/types/models/Company';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+
+  const companyServices = new CompanyService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.company.field_groups.company_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const companyForm = companyServices.useCompanyEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    getDDL();
+
+    await loadData(route.params.ulid as string);
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    let result: ServiceResponse<Company | null> = await companyServices.read(ulid);
+
+    if (result.success && result.data) {
+      companyForm.setData({
+        code: result.data.code,
+        name: result.data.name,
+        address: result.data.address,
+        default: result.data.default,
+        status: result.data.status,
+      });
+    } else {
+      router.push({ name: 'side-menu-company-company-list' });
+    }
+    emits('loading-state', false);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    statusDDL.value = await dashboardServices.getStatusDDL();
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (companyForm.hasErrors) {
+      scrollToError(Object.keys(companyForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await companyForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-company-company-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    companyForm.reset();
+    companyForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    companyForm.forgetError('code');
+    if (companyForm.code == '_AUTO_') {
+      companyForm.setData({ code: '' });
+    } else {
+      companyForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    companyForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('COMPANY_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="companyForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': companyForm.invalid('code') }">
+              {{ t('views.company.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="companyForm.code"
+              :class="{ 'border-danger': companyForm.invalid('code') }"
+              :placeholder="t('views.company.fields.code')"
+              @set-auto="setCode"
+              @change="companyForm.validate('code')"
+            />
+            <FormErrorMessages :messages="companyForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': companyForm.invalid('name') }">
+              {{ t('views.company.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="companyForm.name"
+              type="text"
+              :class="{ 'border-danger': companyForm.invalid('name') }"
+              :placeholder="t('views.company.fields.name')"
+              @change="companyForm.validate('name')"
+            />
+            <FormErrorMessages :messages="companyForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.company.fields.address') }}
+            </FormLabel>
+            <FormTextarea v-model="companyForm.address" type="text" :placeholder="t('views.company.fields.address')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': companyForm.invalid('default') }">
+              {{ t('views.company.fields.default') }}
+            </FormLabel>
+            <FormSwitch class="mt-2">
+              <FormSwitch.Input
+                v-model="companyForm.default"
+                type="checkbox"
+                :class="{ 'border-danger': companyForm.invalid('default') }"
+                :placeholder="t('views.company.fields.default')"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="companyForm.errors.default" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': companyForm.invalid('status') }">
+              {{ t('views.company.fields.status') }}
+            </FormLabel>
+            <FormSelect
+              v-model="companyForm.status"
+              :class="{ 'border-danger': companyForm.invalid('status') }"
+              @change="companyForm.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="companyForm.errors.status" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="companyForm.validating || companyForm.hasErrors"
+          >
+            <Lucide v-if="companyForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/company/CompanyIndex.vue b/web/src/pages/company/CompanyIndex.vue
index ad95c1377..1d121003f 100644
--- a/web/src/pages/company/CompanyIndex.vue
+++ b/web/src/pages/company/CompanyIndex.vue
@@ -1,179 +1,190 @@
-<script setup lang="ts">
-// #region Imports
-import { ref, provide } from "vue";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { TitleLayout } from "@/components/Base/Form/FormLayout";
-import { useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-import Button from "@/components/Base/Button";
-import Lucide from "@/components/Base/Lucide";
-import { ViewMode } from "@/types/enums/ViewMode";
-import CacheService from "@/services/CacheService";
-import AlertPlaceholder from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-import { useUserContextStore } from "@/stores/user-context";
-import ProfileService from "@/services/ProfileService";
-import { UserProfile } from "@/types/models/UserProfile";
-import Notification from "@/components/Base/Notification/Notification.vue";
-import { NotificationData } from "@/types/models/NotificationData";
-import { type NotificationElement } from "@/components/Base/Notification/Notification.vue";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-
-const userContextStore = useUserContextStore();
-
-const cacheService = new CacheService();
-const profileService = new ProfileService();
-// #endregion
-
-// #region Props, Emits
-// #endregion
-
-// #region Refs
-const mode = ref<ViewMode>(ViewMode.INDEX);
-const loading = ref<boolean>(false);
-const titleView = ref<string>('views.company.page_title');
-
-const alertType = ref<'danger'|'success'|'warning'|'pending'|'dark'|'hidden'>('hidden');
-const title = ref<string>('');
-const alertList = ref<Record<string, Array<string>> | null>(null);
-
-const companyNotification = ref<NotificationElement>();
-
-const notificationTitle = ref<string>('');
-const notificationContent = ref<string>('')
-// #endregion
-
-// #region Provide/Inject
-provide("bind[companyNotification]", (el: NotificationElement) => {
-    companyNotification.value = el;
-});
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-// #endregion
-
-// #region Methods
-const createNew = () => {
-    resetAlertPlaceholder();
-    mode.value = ViewMode.FORM_CREATE;
-    router.push({ name: 'side-menu-company-company-create' });
-};
-
-const backToList = async () => {
-    resetAlertPlaceholder();
-    clearCache(mode.value);
-    mode.value = ViewMode.LIST;
-    router.push({ name: 'side-menu-company-company-list' });
-};
-
-const onLoadingStateChanged = (state: boolean) => {
-    loading.value = state;
-};
-
-const onModeStateChanged = (state: ViewMode) => {
-    mode.value = state;
-
-    switch (state) {
-        case ViewMode.FORM_CREATE:
-            titleView.value = 'views.company.actions.create';
-            break;
-        case ViewMode.FORM_EDIT:
-            titleView.value = 'views.company.actions.edit';
-            break;
-        case ViewMode.INDEX:
-        case ViewMode.LIST:
-        default:
-            titleView.value = 'views.company.page_title';
-            break;
-    }
-};
-
-const onUpdateProfileTriggered = async () => {
-    let userprofile = await profileService.readProfile();
-    if (userprofile.success) {
-        userContextStore.setUserContext(userprofile.data as UserProfile);
-    }
-};
-
-const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
-    alertType.value = apProps.alertType;
-    title.value = apProps.title;
-    alertList.value = apProps.alertList;
-};
-
-const onShowNotificationTriggered = (notification: NotificationData) => {
-    notificationTitle.value = notification.title;
-    notificationContent.value = notification.content;
-
-    if (companyNotification.value)
-        companyNotification.value.showToast();
-};
-
-const clearCache = (mode: ViewMode) => {
-    switch (mode) {
-        case ViewMode.FORM_CREATE:
-            cacheService.removeLastEntity('COMPANY_CREATE');
-            break;
-        case ViewMode.FORM_EDIT:
-            cacheService.removeLastEntity('COMPANY_EDIT');
-            break;
-        default:
-            break;
-    }
-};
-
-const resetAlertPlaceholder = () => {
-    title.value = '';
-    alertList.value = null;
-    alertType.value = 'hidden';
-};
-// #endregion
-
-// #region Watchers
-// #endregion
-</script>
-
-<template>
-    <div class="mt-8">
-        <LoadingOverlay :visible="loading">
-            <TitleLayout>
-                <template #title>
-                    {{ t(titleView) }}
-                </template>
-                <template #optional>
-                    <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
-                        <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md"
-                            @click="createNew">
-                            <Lucide icon="Plus" class="w-4 h-4" />&nbsp;{{ t("components.buttons.create_new") }}
-                        </Button>
-                        <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
-                            <Lucide icon="ArrowLeft" class="w-4 h-4" />&nbsp;{{ t("components.buttons.back") }}
-                        </Button>
-                    </div>
-                </template>
-            </TitleLayout>
-
-            <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
-            <RouterView @loading-state="onLoadingStateChanged" @mode-state="onModeStateChanged" @update-profile="onUpdateProfileTriggered" @show-alertplaceholder="onAlertPlaceholderTriggered" @show-notification="onShowNotificationTriggered" />
-        </LoadingOverlay>
-        <Notification ref-key="companyNotification" :options="{ duration: 3000, }" class="flex">
-            <Lucide icon="CheckCircle" class="text-success" />
-            <div class="ml-4 mr-4">
-                <div class="font-medium">{{ notificationTitle }}</div>
-                <div class="mt-1 text-slate-500">
-                    {{ notificationContent }}
-                </div>
-            </div>
-        </Notification>
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.company.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const companyNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[companyNotification]', (el: NotificationElement) => {
+    companyNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-company-company-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-company-company-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.company.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.company.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.company.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (companyNotification.value) companyNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('COMPANY_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('COMPANY_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="companyNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/company/CompanyList.vue b/web/src/pages/company/CompanyList.vue
index 78e6b1f10..dbdb4d895 100644
--- a/web/src/pages/company/CompanyList.vue
+++ b/web/src/pages/company/CompanyList.vue
@@ -1,280 +1,345 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, ref } from "vue";
-import DataList from "@/components/DataList";
-import { useI18n } from "vue-i18n";
-import Button from "@/components/Base/Button";
-import Lucide from "@/components/Base/Lucide";
-import Table from "@/components/Base/Table";
-import CompanyService from "@/services/CompanyService";
-import { Company } from "@/types/models/Company";
-import { Collection } from "@/types/resources/Collection";
-import { DataListEmittedData } from "@/components/DataList/DataList.vue";
-import { ServiceResponse } from "@/types/services/ServiceResponse";
-import { Resource } from "@/types/resources/Resource";
-import { ReadAnyRequest } from "@/types/services/ServiceRequest";
-import { useRouter } from "vue-router";
-import { Dialog } from "@/components/Base/Headless";
-import { ViewMode } from "@/types/enums/ViewMode";
-import { NotificationData } from "@/types/models/NotificationData";
-import { type AlertPlaceholderProps } from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-const router = useRouter();
-const companyServices = new CompanyService();
-// #endregion
-
-// #region Props, Emits
-const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
-// #endregion
-
-// #region Refs
-const deleteUlid = ref<string>('');
-const deleteModalShow = ref<boolean>(false);
-const expandDetail = ref<number | null>(null);
-const companyLists = ref<Collection<Array<Company>> | null>({
-  data: [],
-  meta: {
-    current_page: 0,
-    from: null,
-    last_page: 0,
-    path: '',
-    per_page: 0,
-    to: null,
-    total: 0,
-  },
-  links: {
-    first: '',
-    last: '',
-    prev: null,
-    next: null,
-  }
-});
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-  emits('mode-state', ViewMode.LIST);
-  await getCompanies('', true, true, 1, 10);
-});
-// #endregion
-
-// #region Methods
-const getCompanies = async (search: string, refresh: boolean, paginate: boolean, page: number, per_page: number) => {
-  emits('loading-state', true);
-
-  const searchReq: ReadAnyRequest = {
-    search: search,
-    refresh: refresh,
-    paginate: paginate,
-    page: page,
-    per_page: per_page
-  };
-
-  let result: ServiceResponse<Collection<Array<Company>> | Resource<Array<Company>> | null> = await companyServices.readAny(searchReq);
-
-  if (result.success && result.data) {
-    companyLists.value = result.data as Collection<Array<Company>>;
-  } else {
-    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
-  }
-
-  emits('loading-state', false);
-};
-
-const onDataListChanged = async (data: DataListEmittedData) => {
-  await getCompanies(data.search.text, false, true, data.pagination.page, data.pagination.per_page);
-};
-
-const viewSelected = (idx: number) => {
-  if (expandDetail.value === idx) {
-    expandDetail.value = null;
-  } else {
-    expandDetail.value = idx;
-  }
-};
-
-const editSelected = (itemIdx: number) => {
-  if (!companyLists.value) return;
-
-  let ulid = companyLists.value.data[itemIdx].ulid;
-  router.push({ name: 'side-menu-company-company-edit', params: { ulid: ulid } });
-};
-
-const deleteSelected = (itemIdx: number) => {
-  if (!companyLists.value) return;
-
-  let itemUlid = companyLists.value.data[itemIdx].ulid;
-
-  deleteUlid.value = itemUlid;
-  deleteModalShow.value = true;
-};
-
-const confirmDelete = async () => {
-  deleteModalShow.value = false;
-  emits('loading-state', true);
-
-  let result: ServiceResponse<boolean | null> = await companyServices.delete(deleteUlid.value);
-
-  if (result.success) {
-    emits('update-profile');
-    await getCompanies('', true, true, 1, 10);
-    showNotification(t('views.company.alert.delete_company.title'), t('views.company.alert.delete_company.content'));
-  } else {
-    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
-  }
-
-  emits('loading-state', false);
-};
-
-const showNotification = (pTitle: string, pContent: string) => {
-  let n: NotificationData = {
-    title: pTitle,
-    content: pContent
-  };
-
-  emits('show-notification', n);
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-  let ap: AlertPlaceholderProps = {
-    alertType: pAlertType,
-    title: pTitle,
-    alertList: pAlertList,
-  };
-
-  emits('show-alertplaceholder', ap);
-};
-// #endregion
-
-// #region Watchers
-// #endregion
-</script>
-
-<template>
-  <DataList :title="t('views.company.table.title')" :enable-search="true" :can-print="true" :can-export="true"
-    :pagination="companyLists ? companyLists.meta : null" @dataListChanged="onDataListChanged">
-    <template #content>
-      <Table class="mt-5" :hover="true">
-        <Table.Thead variant="light">
-          <Table.Tr>
-            <Table.Th class="whitespace-nowrap">
-              {{ t("views.company.table.cols.code") }}
-            </Table.Th>
-            <Table.Th class="whitespace-nowrap">
-              {{ t("views.company.table.cols.name") }}
-            </Table.Th>
-            <Table.Th class="whitespace-nowrap">
-              {{ t("views.company.table.cols.default") }}
-            </Table.Th>
-            <Table.Th class="whitespace-nowrap">
-              {{ t("views.company.table.cols.status") }}
-            </Table.Th>
-            <Table.Th class="whitespace-nowrap"></Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody v-if="companyLists !== null">
-          <template v-if="companyLists.data.length == 0">
-            <Table.Tr class="intro-x">
-              <Table.Td colspan="5">
-                <div class="flex justify-center italic">{{
-                  t('components.data-list.data_not_found') }}</div>
-              </Table.Td>
-            </Table.Tr>
-          </template>
-          <template v-for="( item, itemIdx ) in companyLists.data" :key="item.ulid">
-            <Table.Tr class="intro-x">
-              <Table.Td>{{ item.code }}</Table.Td>
-              <Table.Td>{{ item.name }}</Table.Td>
-              <Table.Td>
-                <Lucide v-if="item.default === true" icon="CheckCircle" />
-                <Lucide v-if="item.default === false" icon="X" />
-              </Table.Td>
-              <Table.Td>
-                <Lucide v-if="item.status === 'ACTIVE'" icon="CheckCircle" />
-                <Lucide v-if="item.status === 'INACTIVE'" icon="X" />
-              </Table.Td>
-              <Table.Td>
-                <div class="flex justify-end gap-1">
-                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
-                    <Lucide icon="Info" class="w-4 h-4" />
-                  </Button>
-                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
-                    <Lucide icon="CheckSquare" class="w-4 h-4" />
-                  </Button>
-                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
-                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
-                  </Button>
-                </div>
-              </Table.Td>
-            </Table.Tr>
-            <Table.Tr :class="{ 'intro-x': true, 'hidden transition-all': expandDetail !== itemIdx }">
-              <Table.Td colspan="5">
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.company.fields.code') }}</div>
-                  <div class="flex-1">{{ item.code }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.company.fields.name') }}</div>
-                  <div class="flex-1">{{ item.name }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.company.fields.address') }}</div>
-                  <div class="flex-1">{{ item.address }}</div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.company.fields.default') }}</div>
-                  <div class="flex-1">
-                    <span v-if="item.default">{{ t('components.dropdown.values.switch.on') }}</span>
-                    <span v-else>{{ t('components.dropdown.values.switch.off') }}</span>
-                  </div>
-                </div>
-                <div class="flex flex-row">
-                  <div class="ml-5 w-48 text-right pr-5">{{ t('views.company.fields.status') }}</div>
-                  <div class="flex-1">
-                    <span v-if="item.status === 'ACTIVE'">
-                      {{ t('components.dropdown.values.statusDDL.active') }}
-                    </span>
-                    <span v-if="item.status === 'INACTIVE'">
-                      {{ t('components.dropdown.values.statusDDL.inactive') }}
-                    </span>
-                  </div>
-                </div>
-              </Table.Td>
-            </Table.Tr>
-          </template>
-        </Table.Tbody>
-      </Table>
-      <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
-        <Dialog.Panel>
-          <div class="p-5 text-center">
-            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
-            <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
-            <div class="mt-2 text-slate-500">
-              {{ t('components.delete-modal.desc_1') }}
-              <br />
-              {{ t('components.delete-modal.desc_2') }}
-            </div>
-          </div>
-          <div class="px-5 pb-8 text-center">
-            <Button type="button" variant="outline-secondary" class="w-24 mr-1"
-              @click="() => { deleteModalShow = false; }">
-              {{ t('components.buttons.cancel') }}
-            </Button>
-            <Button type="button" variant="danger" class="w-24" @click="(confirmDelete)">
-              {{ t('components.buttons.delete') }}
-            </Button>
-          </div>
-        </Dialog.Panel>
-      </Dialog>
-    </template>
-  </DataList>
-</template>
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import CompanyService from '@/services/CompanyService';
+  import { Company } from '@/types/models/Company';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { CompanyReadAnyPaginateRequest } from '@/types/services/company/CompanyRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const companyServices = new CompanyService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const companyLists = ref<Collection<Array<Company>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+    await getCompanies('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getCompanies = async (
+    search: string,
+
+    refresh: boolean,
+    page: number,
+    per_page: number,
+  ) => {
+    emits('loading-state', true);
+
+    const searchReq: CompanyReadAnyPaginateRequest = {
+      with_trashed: false,
+      search: search,
+      default: undefined,
+      status: undefined,
+      include_id: undefined,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<Company>> | null> = await companyServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      companyLists.value = result.data as Collection<Array<Company>>;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getCompanies(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!companyLists.value) return;
+
+    let ulid = companyLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-company-company-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!companyLists.value) return;
+
+    let itemUlid = companyLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await companyServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getCompanies('', true, 1, 10);
+      showNotification(t('views.company.alert.delete_company.title'), t('views.company.alert.delete_company.content'));
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.company.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="companyLists ? companyLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.company.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.company.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.company.table.cols.default') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.company.table.cols.status') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="companyLists !== null">
+          <template v-if="companyLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in companyLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.default === true" icon="CheckCircle" />
+                <Lucide v-if="item.default === false" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.status === 'ACTIVE'" icon="CheckCircle" />
+                <Lucide v-if="item.status === 'INACTIVE'" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.company.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.company.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.company.fields.address') }}
+                  </div>
+                  <div class="flex-1">{{ item.address }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.company.fields.default') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.default">
+                      {{ t('components.dropdown.values.switch.on') }}
+                    </span>
+                    <span v-else>
+                      {{ t('components.dropdown.values.switch.off') }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.company.fields.status') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.status === 'ACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.active') }}
+                    </span>
+                    <span v-if="item.status === 'INACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.inactive') }}
+                    </span>
+                  </div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/customer-group/CustomerGroupCreate.vue b/web/src/pages/customer-group/CustomerGroupCreate.vue
new file mode 100644
index 000000000..68348b967
--- /dev/null
+++ b/web/src/pages/customer-group/CustomerGroupCreate.vue
@@ -0,0 +1,543 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import CustomerGroupService from '@/services/CustomerGroupService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormInputCode,
+    FormSwitch,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { isAxiosError, AxiosError } from 'axios';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const customerGroupService = new CustomerGroupService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  // --- PERUBAHAN: Menambahkan lebih banyak kartu untuk organisasi ---
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.customer_group.field_groups.general_information',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer_group.field_groups.credit_limit',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer_group.field_groups.pricing_and_points',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer_group.field_groups.rounding_rules',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  // --- PERUBAHAN: Menambahkan ref untuk DDL baru ---
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+  const paymentTermTypeDDL = ref<Array<DropDownOption> | null>(null);
+  const roundOnDDL = ref<Array<DropDownOption> | null>(null);
+
+  const customerGroupForm = customerGroupService.useCustomerGroupCreateForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    await getDDL();
+    loadFromCache();
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setCompanyIdData = () => {
+    customerGroupForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('CUSTOMER_GROUP_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    customerGroupForm.setData(data);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    try {
+      const [status, paymentTermType, roundOn] = await Promise.all([
+        dashboardServices.getStatusDDL(),
+        dashboardServices.getPaymentTermTypesDDL(),
+        dashboardServices.getRoundingTypesDDL(),
+      ]);
+
+      statusDDL.value = status;
+      paymentTermTypeDDL.value = paymentTermType;
+      roundOnDDL.value = roundOn;
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (customerGroupForm.hasErrors) {
+      scrollToError(Object.keys(customerGroupForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await customerGroupForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-customer-group-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    customerGroupForm.reset();
+    customerGroupForm.setErrors({});
+  };
+
+  const setCode = () => {
+    customerGroupForm.forgetError('code');
+    if (customerGroupForm.code == '_AUTO_') {
+      customerGroupForm.setData({ code: '' });
+    } else {
+      customerGroupForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #region Watchers
+  watch(
+    customerGroupForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('CUSTOMER_GROUP_CREATE', newValue.data());
+      if (customerGroupForm.hasErrors) {
+      }
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="customerGroupForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': customerGroupForm.invalid('code') }">
+              {{ t('views.customer_group.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="customerGroupForm.code"
+              :class="{ 'border-danger': customerGroupForm.invalid('code') }"
+              :placeholder="t('views.customer_group.fields.code')"
+              @set-auto="setCode"
+              @change="customerGroupForm.validate('code')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': customerGroupForm.invalid('name') }">
+              {{ t('views.customer_group.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.name"
+              type="text"
+              :class="{ 'border-danger': customerGroupForm.invalid('name') }"
+              :placeholder="t('views.customer_group.fields.name')"
+              @change="customerGroupForm.validate('name')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.customer_group.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="customerGroupForm.remarks"
+              :placeholder="t('views.customer_group.fields.remarks')"
+              @change="customerGroupForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="pb-4">
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('max_open_invoice'),
+              }"
+            >
+              {{ t('views.customer_group.fields.max_open_invoice') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.max_open_invoice"
+              type="number"
+              :class="{
+                'border-danger': customerGroupForm.invalid('max_open_invoice'),
+              }"
+              @change="customerGroupForm.validate('max_open_invoice')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.max_open_invoice" />
+          </div>
+          <div class="pb-4">
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('max_outstanding_invoice'),
+              }"
+            >
+              {{ t('views.customer_group.fields.max_outstanding_invoice') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.max_outstanding_invoice"
+              type="number"
+              :class="{
+                'border-danger': customerGroupForm.invalid('max_outstanding_invoice'),
+              }"
+              @change="customerGroupForm.validate('max_outstanding_invoice')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.max_outstanding_invoice" />
+          </div>
+          <div class="pb-4">
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('max_invoice_age'),
+              }"
+            >
+              {{ t('views.customer_group.fields.max_invoice_age') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.max_invoice_age"
+              type="number"
+              :class="{
+                'border-danger': customerGroupForm.invalid('max_invoice_age'),
+              }"
+              @change="customerGroupForm.validate('max_invoice_age')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.max_invoice_age" />
+          </div>
+          <div class="pb-4">
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('payment_term_type'),
+              }"
+            >
+              {{ t('views.customer_group.fields.payment_term_type') }}
+            </FormLabel>
+            <FormSelect
+              v-model="customerGroupForm.payment_term_type"
+              :class="{
+                'border-danger': customerGroupForm.invalid('payment_term_type'),
+              }"
+              @change="customerGroupForm.validate('payment_term_type')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in paymentTermTypeDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="customerGroupForm.errors.payment_term_type" />
+          </div>
+          <div class="pb-4 col-span-1 md:col-span-2">
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('payment_term'),
+              }"
+            >
+              {{ t('views.customer_group.fields.payment_term') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.payment_term"
+              type="number"
+              :class="{
+                'border-danger': customerGroupForm.invalid('payment_term'),
+              }"
+              @change="customerGroupForm.validate('payment_term')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.payment_term" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div class="pb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('selling_point'),
+                }"
+              >
+                {{ t('views.customer_group.fields.selling_point') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.selling_point"
+                type="number"
+                :class="{
+                  'border-danger': customerGroupForm.invalid('selling_point'),
+                }"
+                @change="customerGroupForm.validate('selling_point')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.selling_point" />
+            </div>
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('selling_point_multiple'),
+                }"
+              >
+                {{ t('views.customer_group.fields.selling_point_multiple') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.selling_point_multiple"
+                type="number"
+                :class="{
+                  'border-danger': customerGroupForm.invalid('selling_point_multiple'),
+                }"
+                @change="customerGroupForm.validate('selling_point_multiple')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.selling_point_multiple" />
+            </div>
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.customer_group.fields.sell_at_cost') }}
+            </FormLabel>
+            <FormSwitch>
+              <FormSwitch.Input v-model="customerGroupForm.sell_at_cost" type="checkbox" />
+            </FormSwitch>
+          </div>
+          <div class="pb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('price_markup_percent'),
+                }"
+              >
+                {{ t('views.customer_group.fields.price_markup_percent') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.price_markup_percent"
+                type="number"
+                :class="{
+                  'border-danger': customerGroupForm.invalid('price_markup_percent'),
+                }"
+                @change="customerGroupForm.validate('price_markup_percent')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.price_markup_percent" />
+            </div>
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('price_markup_nominal'),
+                }"
+              >
+                {{ t('views.customer_group.fields.price_markup_nominal') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.price_markup_nominal"
+                type="number"
+                :class="{
+                  'border-danger': customerGroupForm.invalid('price_markup_nominal'),
+                }"
+                @change="customerGroupForm.validate('price_markup_nominal')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.price_markup_nominal" />
+            </div>
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('price_markdown_percent'),
+                }"
+              >
+                {{ t('views.customer_group.fields.price_markdown_percent') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.price_markdown_percent"
+                type="number"
+                :class="{
+                  'border-danger': customerGroupForm.invalid('price_markdown_percent'),
+                }"
+                @change="customerGroupForm.validate('price_markdown_percent')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.price_markdown_percent" />
+            </div>
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('price_markdown_nominal'),
+                }"
+              >
+                {{ t('views.customer_group.fields.price_markdown_nominal') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.price_markdown_nominal"
+                type="number"
+                :class="{
+                  'border-danger': customerGroupForm.invalid('price_markdown_nominal'),
+                }"
+                @change="customerGroupForm.validate('price_markdown_nominal')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.price_markdown_nominal" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="pb-4">
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('rounding_type'),
+              }"
+            >
+              {{ t('views.customer_group.fields.rounding_type') }}
+            </FormLabel>
+            <FormSelect
+              v-model="customerGroupForm.rounding_type"
+              :class="{
+                'border-danger': customerGroupForm.invalid('rounding_type'),
+              }"
+              @change="customerGroupForm.validate('rounding_type')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in roundOnDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="customerGroupForm.errors.rounding_type" />
+          </div>
+          <div class="pb-4">
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('rounding_digit'),
+              }"
+            >
+              {{ t('views.customer_group.fields.rounding_digit') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.rounding_digit"
+              type="number"
+              :class="{
+                'border-danger': customerGroupForm.invalid('rounding_digit'),
+              }"
+              @change="customerGroupForm.validate('rounding_digit')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.rounding_digit" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="customerGroupForm.validating || customerGroupForm.hasErrors"
+          >
+            <Lucide v-if="customerGroupForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/customer-group/CustomerGroupEdit.vue b/web/src/pages/customer-group/CustomerGroupEdit.vue
new file mode 100644
index 000000000..bae454d8b
--- /dev/null
+++ b/web/src/pages/customer-group/CustomerGroupEdit.vue
@@ -0,0 +1,473 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { useRoute, useRouter } from 'vue-router';
+  import CustomerGroupService from '@/services/CustomerGroupService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormSwitch,
+    FormInputCode,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { CustomerGroup } from '@/types/models/CustomerGroup';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+
+  const customerGroupServices = new CustomerGroupService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.customer_group.field_groups.general_information',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer_group.field_groups.credit_limit',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer_group.field_groups.pricing_and_points',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer_group.field_groups.rounding_rules',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+  const paymentTermTypeDDL = ref<Array<DropDownOption> | null>(null);
+  const roundOnDDL = ref<Array<DropDownOption> | null>(null);
+
+  const customerGroupForm = customerGroupServices.useCustomerGroupEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    await Promise.all([getDDL(), loadData(route.params.ulid as string)]);
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    const response = await customerGroupServices.read(ulid);
+
+    if (response && response.data) {
+      customerGroupForm.setData({
+        company_id: response.data.company.id,
+        code: response.data.code,
+        name: response.data.name,
+        remarks: response.data.remarks,
+        max_open_invoice: response.data.max_open_invoice,
+        max_outstanding_invoice: response.data.max_outstanding_invoice,
+        max_invoice_age: response.data.max_invoice_age,
+        payment_term_type: response.data.payment_term_type,
+        payment_term: response.data.payment_term,
+        selling_point: response.data.selling_point,
+        selling_point_multiple: response.data.selling_point_multiple,
+        sell_at_cost: response.data.sell_at_cost,
+        price_markup_percent: response.data.price_markup_percent,
+        price_markup_nominal: response.data.price_markup_nominal,
+        price_markdown_percent: response.data.price_markdown_percent,
+        price_markdown_nominal: response.data.price_markdown_nominal,
+        rounding_type: response.data.rounding_type,
+        rounding_digit: response.data.rounding_digit,
+      });
+    }
+    emits('loading-state', false);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    const [status, paymentTerm, rounding] = await Promise.all([
+      dashboardServices.getStatusDDL(),
+      dashboardServices.getPaymentTermTypesDDL(),
+      dashboardServices.getRoundingTypesDDL(),
+    ]);
+    statusDDL.value = status;
+    paymentTermTypeDDL.value = paymentTerm;
+    roundOnDDL.value = rounding;
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (customerGroupForm.hasErrors) {
+      scrollToError(Object.keys(customerGroupForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await customerGroupForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-customer-group-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    customerGroupForm.reset();
+    customerGroupForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    customerGroupForm.forgetError('code');
+    if (customerGroupForm.code == '_AUTO_') {
+      customerGroupForm.setData({ code: '' });
+    } else {
+      customerGroupForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    customerGroupForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('CUSTOMER_GROUP_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="customerGroupForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': customerGroupForm.invalid('code') }">
+              {{ t('views.customer_group.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="customerGroupForm.code"
+              :class="{ 'border-danger': customerGroupForm.invalid('code') }"
+              :placeholder="t('views.customer_group.fields.code')"
+              @set-auto="setCode"
+              @change="customerGroupForm.validate('code')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': customerGroupForm.invalid('name') }">
+              {{ t('views.customer_group.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.name"
+              type="text"
+              :class="{ 'border-danger': customerGroupForm.invalid('name') }"
+              :placeholder="t('views.customer_group.fields.name')"
+              @change="customerGroupForm.validate('name')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.customer_group.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="customerGroupForm.remarks"
+              :placeholder="t('views.customer_group.fields.remarks')"
+              @change="customerGroupForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('max_open_invoice'),
+              }"
+            >
+              {{ t('views.customer_group.fields.max_open_invoice') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.max_open_invoice"
+              type="number"
+              @change="customerGroupForm.validate('max_open_invoice')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.max_open_invoice" />
+          </div>
+          <div>
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('max_outstanding_invoice'),
+              }"
+            >
+              {{ t('views.customer_group.fields.max_outstanding_invoice') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.max_outstanding_invoice"
+              type="number"
+              @change="customerGroupForm.validate('max_outstanding_invoice')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.max_outstanding_invoice" />
+          </div>
+          <div>
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('max_invoice_age'),
+              }"
+            >
+              {{ t('views.customer_group.fields.max_invoice_age') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.max_invoice_age"
+              type="number"
+              @change="customerGroupForm.validate('max_invoice_age')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.max_invoice_age" />
+          </div>
+          <div>
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('payment_term_type'),
+              }"
+            >
+              {{ t('views.customer_group.fields.payment_term_type') }}
+            </FormLabel>
+            <FormSelect
+              v-model="customerGroupForm.payment_term_type"
+              @change="customerGroupForm.validate('payment_term_type')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="pt in paymentTermTypeDDL" :key="pt.code" :value="pt.code">
+                {{ t(pt.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="customerGroupForm.errors.payment_term_type" />
+          </div>
+          <div class="col-span-1 md:col-span-2">
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('payment_term'),
+              }"
+            >
+              {{ t('views.customer_group.fields.payment_term') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.payment_term"
+              type="number"
+              @change="customerGroupForm.validate('payment_term')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.payment_term" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.customer_group.fields.sell_at_cost') }}
+            </FormLabel>
+            <FormSwitch class="mt-2">
+              <FormSwitch.Input v-model="customerGroupForm.sell_at_cost" type="checkbox" />
+            </FormSwitch>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('price_markup_percent'),
+                }"
+              >
+                {{ t('views.customer_group.fields.price_markup_percent') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.price_markup_percent"
+                type="number"
+                @change="customerGroupForm.validate('price_markup_percent')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.price_markup_percent" />
+            </div>
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('price_markup_nominal'),
+                }"
+              >
+                {{ t('views.customer_group.fields.price_markup_nominal') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.price_markup_nominal"
+                type="number"
+                @change="customerGroupForm.validate('price_markup_nominal')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.price_markup_nominal" />
+            </div>
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('price_markdown_percent'),
+                }"
+              >
+                {{ t('views.customer_group.fields.price_markdown_percent') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.price_markdown_percent"
+                type="number"
+                @change="customerGroupForm.validate('price_markdown_percent')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.price_markdown_percent" />
+            </div>
+            <div>
+              <FormLabel
+                :class="{
+                  'text-danger': customerGroupForm.invalid('price_markdown_nominal'),
+                }"
+              >
+                {{ t('views.customer_group.fields.price_markdown_nominal') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerGroupForm.price_markdown_nominal"
+                type="number"
+                @change="customerGroupForm.validate('price_markdown_nominal')"
+              />
+              <FormErrorMessages :messages="customerGroupForm.errors.price_markdown_nominal" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('rounding_type'),
+              }"
+            >
+              {{ t('views.customer_group.fields.rounding_type') }}
+            </FormLabel>
+            <FormSelect v-model="customerGroupForm.rounding_type" @change="customerGroupForm.validate('rounding_type')">
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="ro in roundOnDDL" :key="ro.code" :value="ro.code">
+                {{ t(ro.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="customerGroupForm.errors.rounding_type" />
+          </div>
+          <div>
+            <FormLabel
+              :class="{
+                'text-danger': customerGroupForm.invalid('rounding_digit'),
+              }"
+            >
+              {{ t('views.customer_group.fields.rounding_digit') }}
+            </FormLabel>
+            <FormInput
+              v-model="customerGroupForm.rounding_digit"
+              type="number"
+              :class="{
+                'border-danger': customerGroupForm.invalid('rounding_digit'),
+              }"
+              @change="customerGroupForm.validate('rounding_digit')"
+            />
+            <FormErrorMessages :messages="customerGroupForm.errors.rounding_digit" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="customerGroupForm.validating || customerGroupForm.hasErrors"
+          >
+            <Lucide v-if="customerGroupForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/customer-group/CustomerGroupIndex.vue b/web/src/pages/customer-group/CustomerGroupIndex.vue
new file mode 100644
index 000000000..4ac9c7db0
--- /dev/null
+++ b/web/src/pages/customer-group/CustomerGroupIndex.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.customer_group.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const customerGroupNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[customerGroupNotification]', (el: NotificationElement) => {
+    customerGroupNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-customer-group-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-customer-group-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.customer_group.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.customer_group.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.customer_group.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (customerGroupNotification.value) customerGroupNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('CUSTOMER_GROUP_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('CUSTOMER_GROUP_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="customerGroupNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/customer-group/CustomerGroupList.vue b/web/src/pages/customer-group/CustomerGroupList.vue
new file mode 100644
index 000000000..1b47ae513
--- /dev/null
+++ b/web/src/pages/customer-group/CustomerGroupList.vue
@@ -0,0 +1,421 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import CustomerGroupService from '@/services/CustomerGroupService';
+  import { CustomerGroup } from '@/types/models/CustomerGroup';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { CustomerGroupReadAnyPaginateRequest } from '@/types/services/customer-group/CustomerGroupRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const customerGroupServices = new CustomerGroupService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const customerGroupLists = ref<Collection<Array<CustomerGroup>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getCustomerGroups('', true, true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getCustomerGroups = async (
+    search: string,
+    refresh: boolean,
+    paginate: boolean,
+    page: number,
+    per_page: number,
+  ) => {
+    emits('loading-state', true);
+
+    let company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: CustomerGroupReadAnyPaginateRequest = {
+      with_trashed: false,
+
+      company_id: company_id,
+      search: search,
+      include_id: undefined,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<CustomerGroup>> | null> =
+      await customerGroupServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      customerGroupLists.value = result.data as Collection<Array<CustomerGroup>>;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getCustomerGroups(data.search.text, false, true, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!customerGroupLists.value) return;
+
+    let ulid = customerGroupLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-customer-group-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!customerGroupLists.value) return;
+
+    let itemUlid = customerGroupLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await customerGroupServices.delete(deleteUlid.value); // Diubah dari companyServices
+
+    if (result.success) {
+      emits('update-profile');
+      await getCustomerGroups('', true, true, 1, 10); // Diubah dari getCompanies
+      showNotification(
+        t('views.customer_group.alert.delete_customer_group.title'),
+        t('views.customer_group.alert.delete_customer_group.content'),
+      ); // Diubah path terjemahan
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.customer_group.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="customerGroupLists ? customerGroupLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.customer_group.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.customer_group.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="customerGroupLists !== null">
+          <template v-if="customerGroupLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in customerGroupLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks || '-' }}</div>
+                </div>
+
+                <div class="w-full border-b my-3"></div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.max_open_invoice') }}
+                  </div>
+                  <div class="flex-1">{{ item.max_open_invoice }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.max_outstanding_invoice') }}
+                  </div>
+                  <div class="flex-1">{{ item.max_outstanding_invoice }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.max_invoice_age') }}
+                  </div>
+                  <div class="flex-1">{{ item.max_invoice_age }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.payment_term_type') }}
+                  </div>
+                  <div class="flex-1">{{ item.payment_term_type }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.payment_term') }}
+                  </div>
+                  <div class="flex-1">{{ item.payment_term }}</div>
+                </div>
+
+                <div class="w-full border-b my-3"></div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.sell_at_cost') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.sell_at_cost">
+                      {{ t('components.dropdown.values.switch.on') }}
+                    </span>
+                    <span v-else>
+                      {{ t('components.dropdown.values.switch.off') }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.selling_point') }}
+                  </div>
+                  <div class="flex-1">{{ item.selling_point }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.selling_point_multiple') }}
+                  </div>
+                  <div class="flex-1">{{ item.selling_point_multiple }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.price_markup_percent') }}
+                  </div>
+                  <div class="flex-1">{{ item.price_markup_percent }}%</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.price_markup_nominal') }}
+                  </div>
+                  <div class="flex-1">{{ item.price_markup_nominal }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.price_markdown_percent') }}
+                  </div>
+                  <div class="flex-1">{{ item.price_markdown_percent }}%</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.price_markdown_nominal') }}
+                  </div>
+                  <div class="flex-1">{{ item.price_markdown_nominal }}</div>
+                </div>
+
+                <div class="w-full border-b my-3"></div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.rounding_type') }}
+                  </div>
+                  <div class="flex-1">{{ item.rounding_type }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.customer_group.fields.rounding_digit') }}
+                  </div>
+                  <div class="flex-1">{{ item.rounding_digit }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/customer/CustomerCreate.vue b/web/src/pages/customer/CustomerCreate.vue
new file mode 100644
index 000000000..4992074d1
--- /dev/null
+++ b/web/src/pages/customer/CustomerCreate.vue
@@ -0,0 +1,566 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import CustomerService from '@/services/CustomerService';
+  import CustomerGroupService from '@/services/CustomerGroupService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormInputCode,
+    FormSwitch,
+    FormErrorMessages,
+    FormSelectSearch,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { CustomerGroup } from '@/types/models/CustomerGroup';
+  import { Collection } from '@/types/resources/Collection';
+  import { AxiosError, isAxiosError } from 'axios';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const customerService = new CustomerService();
+  const customerGroupService = new CustomerGroupService();
+  const cacheServices = new CacheService();
+  const dashboardServices = new DashboardService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.customer.field_groups.general_information',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer.field_groups.credit_limit',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer.field_groups.tax_information',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const customerGroupDDL = ref<Array<DropDownOption> | null>(null);
+  const customerGroupSearch = ref<string>('');
+  const customerGroupOptions = computed(() =>
+    (customerGroupDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const paymentTermTypeDDL = ref<Array<DropDownOption> | null>(null);
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const isDDLLoading = ref<boolean>(false);
+
+  const customerForm = customerService.useCustomerCreateForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    getDDL();
+    loadFromCache();
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setCompanyIdData = () => {
+    customerForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('CUSTOMER_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    customerForm.setData(data);
+  };
+
+  const getCustomerGroupDDL = async (search = ''): Promise<void> => {
+    const result = await customerGroupService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      include_id: undefined,
+      refresh: false,
+      limit: 10,
+    });
+
+    if (result.success && result.data) {
+      const collection = result.data as Collection<Array<CustomerGroup>>;
+      customerGroupDDL.value = collection.data.map((item: CustomerGroup) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const getDDL = async (): Promise<void> => {
+    isDDLLoading.value = true;
+
+    try {
+      await Promise.all([
+        (async () => {
+          const result = await dashboardServices.getStatusDDL();
+          statusDDL.value = result;
+        })(),
+        (async () => {
+          const result = await dashboardServices.getPaymentTermTypesDDL();
+          paymentTermTypeDDL.value = result;
+        })(),
+        getCustomerGroupDDL(),
+      ]);
+    } catch (error) {
+      console.error('Error loading DDLs:', error);
+    } finally {
+      isDDLLoading.value = false;
+    }
+  };
+
+  const clearGroup = () => {
+    customerForm.setData({ group_id: '' });
+    getCustomerGroupDDL('');
+    customerForm.forgetError('group_id');
+    customerForm.validate('group_id');
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (customerForm.hasErrors) {
+      scrollToError(Object.keys(customerForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await customerForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-customer-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    customerForm.reset();
+    customerForm.setErrors({});
+  };
+
+  const setCode = () => {
+    customerForm.forgetError('code');
+    if (customerForm.code == '_AUTO_') {
+      customerForm.setData({ code: '' });
+    } else {
+      customerForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  const convertErrorTypeToAlertListType = (error: unknown) => {
+    const record: Record<string, Array<string>> = {};
+
+    const anyError = error as any;
+    const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+    if (response && response.data) {
+      const data = response.data as any;
+
+      if (data.errors && typeof data.errors === 'object') {
+        for (const key of Object.keys(data.errors)) {
+          const value = data.errors[key];
+
+          if (Array.isArray(value)) {
+            record[key] = value;
+          } else if (value !== undefined && value !== null) {
+            record[key] = [String(value)];
+          }
+        }
+
+        return record;
+      }
+
+      if (data.message) {
+        record.error = [String(data.message)];
+        return record;
+      }
+    }
+
+    if (error instanceof Error && error.message) {
+      record.error = [error.message];
+    } else {
+      record.error = ['Unknown error'];
+    }
+
+    return record;
+  };
+  // #endregion
+
+  // #region Watchers
+  watch(
+    customerForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('CUSTOMER_CREATE', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="customerForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('code') }">
+                {{ t('views.customer.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="customerForm.code"
+                :class="{ 'border-danger': customerForm.invalid('code') }"
+                :placeholder="t('views.customer.fields.code')"
+                @set-auto="setCode"
+                @change="customerForm.validate('code')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.code" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('name') }">
+                {{ t('views.customer.fields.name') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.name"
+                type="text"
+                :class="{ 'border-danger': customerForm.invalid('name') }"
+                :placeholder="t('views.customer.fields.name')"
+                @change="customerForm.validate('name')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.name" />
+            </div>
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('group_id'),
+                }"
+              >
+                {{ t('views.customer.fields.group') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="customerForm.group_id"
+                v-model:search="customerGroupSearch"
+                :options="customerGroupOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': customerForm.invalid('group_id'),
+                }"
+                @change="customerForm.validate('group_id')"
+                @search="getCustomerGroupDDL"
+                @clear="clearGroup"
+              />
+              <FormErrorMessages :messages="customerForm.errors.group_id" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('is_member') }">
+                {{ t('views.customer.fields.is_member') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  v-model="customerForm.is_member"
+                  type="checkbox"
+                  :class="{
+                    'border-danger': customerForm.invalid('is_member'),
+                  }"
+                  :placeholder="t('views.customer.fields.is_member')"
+                  @change="customerForm.validate('is_member')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="customerForm.errors.is_member" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('zone') }">
+                {{ t('views.customer.fields.zone') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.zone"
+                type="text"
+                :class="{ 'border-danger': customerForm.invalid('zone') }"
+                :placeholder="t('views.customer.fields.zone')"
+                @change="customerForm.validate('zone')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.zone" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('status') }">
+                {{ t('views.customer.fields.status') }}
+              </FormLabel>
+              <FormSelect
+                v-model="customerForm.status"
+                :class="{ 'border-danger': customerForm.invalid('status') }"
+                @change="customerForm.validate('status')"
+              >
+                <option value="0" disabled>
+                  {{ t('components.dropdown.placeholder') }}
+                </option>
+                <option v-for="s in statusDDL" :key="s.code" :value="s.code">
+                  {{ t(s.name) }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="customerForm.errors.status" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('max_open_invoice'),
+                }"
+              >
+                {{ t('views.customer.fields.max_open_invoice') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.max_open_invoice"
+                type="number"
+                :class="{
+                  'border-danger': customerForm.invalid('max_open_invoice'),
+                }"
+                :placeholder="t('views.customer.fields.max_open_invoice')"
+                @change="customerForm.validate('max_open_invoice')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.max_open_invoice" />
+            </div>
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('max_outstanding_invoice'),
+                }"
+              >
+                {{ t('views.customer.fields.max_outstanding_invoice') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.max_outstanding_invoice"
+                type="number"
+                :class="{
+                  'border-danger': customerForm.invalid('max_outstanding_invoice'),
+                }"
+                :placeholder="t('views.customer.fields.max_outstanding_invoice')"
+                @change="customerForm.validate('max_outstanding_invoice')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.max_outstanding_invoice" />
+            </div>
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('max_invoice_age'),
+                }"
+              >
+                {{ t('views.customer.fields.max_invoice_age') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.max_invoice_age"
+                type="number"
+                :class="{
+                  'border-danger': customerForm.invalid('max_invoice_age'),
+                }"
+                :placeholder="t('views.customer.fields.max_invoice_age')"
+                @change="customerForm.validate('max_invoice_age')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.max_invoice_age" />
+            </div>
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('payment_term_type'),
+                }"
+              >
+                {{ t('views.customer.fields.payment_term_type') }}
+              </FormLabel>
+              <FormSelect
+                v-model="customerForm.payment_term_type"
+                :class="{
+                  'border-danger': customerForm.invalid('payment_term_type'),
+                }"
+                :placeholder="t('views.customer.fields.payment_term_type')"
+                @change="customerForm.validate('payment_term_type')"
+              >
+                <option value="0" disabled>
+                  {{ t('components.dropdown.placeholder') }}
+                </option>
+                <option v-for="s in paymentTermTypeDDL" :key="s.code" :value="s.code">
+                  {{ t(s.name) }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="customerForm.errors.payment_term_type" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('payment_term') }">
+                {{ t('views.customer.fields.payment_term') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.payment_term"
+                type="number"
+                :class="{
+                  'border-danger': customerForm.invalid('payment_term'),
+                }"
+                :placeholder="t('views.customer.fields.payment_term')"
+                @change="customerForm.validate('payment_term')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.payment_term" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('taxable_enterprise'),
+                }"
+              >
+                {{ t('views.customer.fields.taxable_enterprise') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  v-model="customerForm.taxable_enterprise"
+                  type="checkbox"
+                  :class="{
+                    'border-danger': customerForm.invalid('taxable_enterprise'),
+                  }"
+                  :placeholder="t('views.customer.fields.taxable_enterprise')"
+                  @change="customerForm.validate('taxable_enterprise')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="customerForm.errors.taxable_enterprise" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('tax_id') }">
+                {{ t('views.customer.fields.tax_id') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.tax_id"
+                type="text"
+                :class="{ 'border-danger': customerForm.invalid('tax_id') }"
+                :placeholder="t('views.customer.fields.tax_id')"
+                @change="customerForm.validate('tax_id')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.tax_id" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('remarks') }">
+                {{ t('views.customer.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="customerForm.remarks"
+                :class="{ 'border-danger': customerForm.invalid('remarks') }"
+                :placeholder="t('views.customer.fields.remarks')"
+                @change="customerForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="customerForm.validating || customerForm.hasErrors"
+          >
+            <Lucide v-if="customerForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/customer/CustomerEdit.vue b/web/src/pages/customer/CustomerEdit.vue
new file mode 100644
index 000000000..2a39535ff
--- /dev/null
+++ b/web/src/pages/customer/CustomerEdit.vue
@@ -0,0 +1,534 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import CustomerService from '@/services/CustomerService';
+  import CustomerGroupService from '@/services/CustomerGroupService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormInputCode,
+    FormSwitch,
+    FormErrorMessages,
+    FormSelectSearch,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { Customer } from '@/types/models/Customer';
+  import { CustomerGroup } from '@/types/models/CustomerGroup';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Collection } from '@/types/resources/Collection';
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const customerService = new CustomerService();
+  const customerGroupService = new CustomerGroupService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.customer.field_groups.general_information',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer.field_groups.credit_limit',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.customer.field_groups.tax_information',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const customerGroupDDL = ref<Array<DropDownOption> | null>(null);
+  const customerGroupSearch = ref<string>('');
+  const customerGroupOptions = computed(() =>
+    (customerGroupDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const paymentTermTypeDDL = ref<Array<DropDownOption> | null>(null);
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const isDDLLoading = ref<boolean>(false);
+
+  const customerForm = customerService.useCustomerEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    await Promise.all([getDDL(), loadData(route.params.ulid as string)]);
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setCompanyIdData = () => {
+    if (!selectedUserLocation.value) return;
+    customerForm.setData({ company_id: selectedUserLocation.value.company.id });
+  };
+
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    const response: ServiceResponse<Customer | null> = await customerService.read(ulid);
+
+    if (response && response.data) {
+      customerForm.setData({
+        company_id: response.data.company.id,
+        user_id: response.data.user?.id ?? '',
+        group_id: response.data.group?.id ?? '',
+        code: response.data.code,
+        name: response.data.name,
+        zone: response.data.zone,
+        max_open_invoice: response.data.max_open_invoice,
+        max_outstanding_invoice: response.data.max_outstanding_invoice,
+        max_invoice_age: response.data.max_invoice_age,
+        payment_term_type: response.data.payment_term_type,
+        payment_term: response.data.payment_term,
+        is_member: response.data.is_member,
+        taxable_enterprise: response.data.taxable_enterprise,
+        tax_id: response.data.tax_id,
+        status: response.data.status,
+        remarks: response.data.remarks,
+      });
+    }
+    emits('loading-state', false);
+  };
+
+  const getCustomerGroupDDL = async (search = ''): Promise<void> => {
+    const result = await customerGroupService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value?.company.id,
+      search,
+      include_id: undefined,
+      refresh: false,
+      limit: 10,
+    });
+
+    if (result.success && result.data) {
+      const collection = result.data as Collection<Array<CustomerGroup>>;
+      customerGroupDDL.value = collection.data.map((item: CustomerGroup) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const getDDL = async (): Promise<void> => {
+    isDDLLoading.value = true;
+
+    try {
+      await Promise.all([
+        (async () => {
+          const result = await dashboardServices.getStatusDDL();
+          statusDDL.value = result;
+        })(),
+        (async () => {
+          const result = await dashboardServices.getPaymentTermTypesDDL();
+          paymentTermTypeDDL.value = result;
+        })(),
+        getCustomerGroupDDL(),
+      ]);
+    } catch (error) {
+      //
+    } finally {
+      isDDLLoading.value = false;
+    }
+  };
+
+  const clearGroup = () => {
+    customerForm.setData({ group_id: '' });
+    getCustomerGroupDDL('');
+    customerForm.forgetError('group_id');
+    customerForm.validate('group_id');
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (customerForm.hasErrors) {
+      scrollToError(Object.keys(customerForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await customerForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-customer-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    customerForm.reset();
+    customerForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    customerForm.forgetError('code');
+    if (customerForm.code == '_AUTO_') {
+      customerForm.setData({ code: '' });
+    } else {
+      customerForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    const ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  watch(
+    customerForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('CUSTOMER_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="customerForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('code') }">
+                {{ t('views.customer.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="customerForm.code"
+                :class="{ 'border-danger': customerForm.invalid('code') }"
+                :placeholder="t('views.customer.fields.code')"
+                @set-auto="setCode"
+                @change="customerForm.validate('code')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.code" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('name') }">
+                {{ t('views.customer.fields.name') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.name"
+                type="text"
+                :class="{ 'border-danger': customerForm.invalid('name') }"
+                :placeholder="t('views.customer.fields.name')"
+                @change="customerForm.validate('name')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.name" />
+            </div>
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('group_id'),
+                }"
+              >
+                {{ t('views.customer.fields.group') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="customerForm.group_id"
+                v-model:search="customerGroupSearch"
+                :options="customerGroupOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': customerForm.invalid('group_id'),
+                }"
+                @change="customerForm.validate('group_id')"
+                @search="getCustomerGroupDDL"
+                @clear="clearGroup"
+              />
+              <FormErrorMessages :messages="customerForm.errors.group_id" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('is_member') }">
+                {{ t('views.customer.fields.is_member') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  v-model="customerForm.is_member"
+                  type="checkbox"
+                  :class="{
+                    'border-danger': customerForm.invalid('is_member'),
+                  }"
+                  :placeholder="t('views.customer.fields.is_member')"
+                  @change="customerForm.validate('is_member')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="customerForm.errors.is_member" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('zone') }">
+                {{ t('views.customer.fields.zone') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.zone"
+                type="text"
+                :class="{ 'border-danger': customerForm.invalid('zone') }"
+                :placeholder="t('views.customer.fields.zone')"
+                @change="customerForm.validate('zone')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.zone" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('status') }">
+                {{ t('views.customer.fields.status') }}
+              </FormLabel>
+              <FormSelect
+                v-model="customerForm.status"
+                :class="{ 'border-danger': customerForm.invalid('status') }"
+                @change="customerForm.validate('status')"
+              >
+                <option value="0" disabled>
+                  {{ t('components.dropdown.placeholder') }}
+                </option>
+                <option v-for="s in statusDDL" :key="s.code" :value="s.code">
+                  {{ t(s.name) }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="customerForm.errors.status" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('max_open_invoice'),
+                }"
+              >
+                {{ t('views.customer.fields.max_open_invoice') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.max_open_invoice"
+                type="number"
+                :class="{
+                  'border-danger': customerForm.invalid('max_open_invoice'),
+                }"
+                :placeholder="t('views.customer.fields.max_open_invoice')"
+                @change="customerForm.validate('max_open_invoice')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.max_open_invoice" />
+            </div>
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('max_outstanding_invoice'),
+                }"
+              >
+                {{ t('views.customer.fields.max_outstanding_invoice') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.max_outstanding_invoice"
+                type="number"
+                :class="{
+                  'border-danger': customerForm.invalid('max_outstanding_invoice'),
+                }"
+                :placeholder="t('views.customer.fields.max_outstanding_invoice')"
+                @change="customerForm.validate('max_outstanding_invoice')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.max_outstanding_invoice" />
+            </div>
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('max_invoice_age'),
+                }"
+              >
+                {{ t('views.customer.fields.max_invoice_age') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.max_invoice_age"
+                type="number"
+                :class="{
+                  'border-danger': customerForm.invalid('max_invoice_age'),
+                }"
+                :placeholder="t('views.customer.fields.max_invoice_age')"
+                @change="customerForm.validate('max_invoice_age')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.max_invoice_age" />
+            </div>
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('payment_term_type'),
+                }"
+              >
+                {{ t('views.customer_group.fields.payment_term_type') }}
+              </FormLabel>
+              <FormSelect v-model="customerForm.payment_term_type" @change="customerForm.validate('payment_term_type')">
+                <option value="">
+                  {{ t('components.dropdown.placeholder') }}
+                </option>
+                <option v-for="pt in paymentTermTypeDDL" :key="pt.code" :value="pt.code">
+                  {{ t(pt.name) }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="customerForm.errors.payment_term_type" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('payment_term') }">
+                {{ t('views.customer.fields.payment_term') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.payment_term"
+                type="number"
+                :class="{
+                  'border-danger': customerForm.invalid('payment_term'),
+                }"
+                :placeholder="t('views.customer.fields.payment_term')"
+                @change="customerForm.validate('payment_term')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.payment_term" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+            <div class="pb-4">
+              <FormLabel
+                :class="{
+                  'text-danger': customerForm.invalid('taxable_enterprise'),
+                }"
+              >
+                {{ t('views.customer.fields.taxable_enterprise') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  v-model="customerForm.taxable_enterprise"
+                  type="checkbox"
+                  :class="{
+                    'border-danger': customerForm.invalid('taxable_enterprise'),
+                  }"
+                  :placeholder="t('views.customer.fields.taxable_enterprise')"
+                  @change="customerForm.validate('taxable_enterprise')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="customerForm.errors.taxable_enterprise" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('tax_id') }">
+                {{ t('views.customer.fields.tax_id') }}
+              </FormLabel>
+              <FormInput
+                v-model="customerForm.tax_id"
+                type="text"
+                :class="{ 'border-danger': customerForm.invalid('tax_id') }"
+                :placeholder="t('views.customer.fields.tax_id')"
+                @change="customerForm.validate('tax_id')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.tax_id" />
+            </div>
+            <div class="pb-4">
+              <FormLabel :class="{ 'text-danger': customerForm.invalid('remarks') }">
+                {{ t('views.customer.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="customerForm.remarks"
+                :class="{ 'border-danger': customerForm.invalid('remarks') }"
+                :placeholder="t('views.customer.fields.remarks')"
+                @change="customerForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="customerForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="customerForm.validating">
+            <Lucide v-if="customerForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/customer/CustomerIndex.vue b/web/src/pages/customer/CustomerIndex.vue
new file mode 100644
index 000000000..8cd19699f
--- /dev/null
+++ b/web/src/pages/customer/CustomerIndex.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.customer.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const customerNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[customerNotification]', (el: NotificationElement) => {
+    customerNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-customer-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-customer-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.customer.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.customer.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.customer.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (customerNotification.value) customerNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('CUSTOMER_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('CUSTOMER_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="customerNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/customer/CustomerList.vue b/web/src/pages/customer/CustomerList.vue
new file mode 100644
index 000000000..355455db3
--- /dev/null
+++ b/web/src/pages/customer/CustomerList.vue
@@ -0,0 +1,370 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import CustomerService from '@/services/CustomerService';
+  import { Customer } from '@/types/models/Customer';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { CustomerReadAnyPaginateRequest } from '@/types/services/customer/CustomerRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const customerService = new CustomerService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const customerLists = ref<Collection<Array<Customer>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getCustomers('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getCustomers = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    const company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: CustomerReadAnyPaginateRequest = {
+      with_trashed: false,
+      company_id: company_id,
+      search: search,
+      status: null,
+      include_id: undefined,
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    const result: ServiceResponse<Collection<Array<Customer>> | null> =
+      await customerService.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      customerLists.value = result.data;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getCustomers(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!customerLists.value) return;
+
+    let ulid = customerLists.value.data[itemIdx].ulid;
+
+    router.push({
+      name: 'side-menu-customer-edit',
+      params: { ulid: ulid },
+    }); // Changed route name
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!customerLists.value) return;
+
+    let itemUlid = customerLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await customerService.delete(deleteUlid.value); // Changed to customerService
+
+    if (result.success) {
+      emits('update-profile');
+      await getCustomers('', true, 1, 10);
+      showNotification(t('views.customer.alert.delete.title'), t('views.customer.alert.delete.message')); // Changed translation path
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.customer.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="customerLists ? customerLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.customer.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.customer.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.customer.table.cols.group') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.customer.table.cols.zone') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="customerLists !== null">
+          <template v-if="customerLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in customerLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>{{ item.group ? item.group.name : '-' }}</Table.Td>
+              <Table.Td>{{ item.zone || '-' }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-4">
+                  <div class="flex flex-row mt-1">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.code') }}
+                    </div>
+                    <div class="flex-1">{{ item.code }}</div>
+                  </div>
+                  <div class="flex flex-row mt-1">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.name') }}
+                    </div>
+                    <div class="flex-1">{{ item.name }}</div>
+                  </div>
+                  <div class="flex flex-row mt-1">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.group') }}
+                    </div>
+                    <div class="flex-1">
+                      {{ item.group ? item.group.name : '-' }}
+                    </div>
+                  </div>
+                  <div class="flex flex-row mt-1">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.zone') }}
+                    </div>
+                    <div class="flex-1">{{ item.zone || '-' }}</div>
+                  </div>
+                  <div class="flex flex-row mt-1">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.zone') }}
+                    </div>
+                    <div class="flex-1">{{ item.zone || '-' }}</div>
+                  </div>
+                  <div class="flex flex-row mt-1">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.zone') }}
+                    </div>
+                    <div class="flex-1">{{ item.zone || '-' }}</div>
+                  </div>
+                  <div class="flex flex-row mt-1">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.taxable_enterprise') }}
+                    </div>
+                    <div class="flex-1">
+                      <span v-if="item.taxable_enterprise">
+                        {{ t('components.dropdown.values.switch.on') }}
+                      </span>
+                      <span v-else>
+                        {{ t('components.dropdown.values.switch.off') }}
+                      </span>
+                    </div>
+                  </div>
+                  <div class="flex flex-row mt-1">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.tax_id') }}
+                    </div>
+                    <div class="flex-1">{{ item.tax_id || '-' }}</div>
+                  </div>
+                  <div class="flex flex-row mt-1 md:col-span-2">
+                    <div class="w-48 text-left md:text-right pr-5 font-medium">
+                      {{ t('views.customer.fields.remarks') }}
+                    </div>
+                    <div class="flex-1">{{ item.remarks || '-' }}</div>
+                  </div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/dashboard/MainDashboard.vue b/web/src/pages/dashboard/MainDashboard.vue
index 16847c293..9170e00fc 100644
--- a/web/src/pages/dashboard/MainDashboard.vue
+++ b/web/src/pages/dashboard/MainDashboard.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useUserContextStore } from '../../stores/user-context';
-import _ from "lodash";
+  import { computed } from 'vue';
+  import { useUserContextStore } from '../../stores/user-context';
+  import _ from 'lodash';
 
-const userContextStore = useUserContextStore();
-const userContext = computed(() => userContextStore.userContext);
+  const userContextStore = useUserContextStore();
+  const userContext = computed(() => userContextStore.userContext);
 
-const welcomeName = computed(() => userContext.value.profile.first_name);
+  const welcomeName = computed(() => userContext.value.profile.first_name);
 </script>
 
 <template>
@@ -21,8 +21,8 @@ const welcomeName = computed(() => userContext.value.profile.first_name);
       <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
         <div
           :class="[
-                  'relative zoom-in',
-                  'before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-[\'\']',
+            'relative zoom-in',
+            'before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-[\'\']',
           ]"
         >
           <div class="p-5 box">
@@ -30,9 +30,9 @@ const welcomeName = computed(() => userContext.value.profile.first_name);
               <Lucide icon="ShoppingCart" class="w-[28px] h-[28px] text-primary" />
               <div class="ml-auto">
                 <Tippy
-                    as="div"
-                    class="cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium"
-                    content=""
+                  as="div"
+                  class="cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium"
+                  content=""
                 >
                   &nbsp;
                   <Lucide icon="ChevronUp" class="w-4 h-4 ml-0.5" />
@@ -47,8 +47,8 @@ const welcomeName = computed(() => userContext.value.profile.first_name);
       <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
         <div
           :class="[
-                  'relative zoom-in',
-                  'before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-[\'\']',
+            'relative zoom-in',
+            'before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-[\'\']',
           ]"
         >
           <div class="p-5 box">
@@ -56,9 +56,9 @@ const welcomeName = computed(() => userContext.value.profile.first_name);
               <Lucide icon="CreditCard" class="w-[28px] h-[28px] text-pending" />
               <div class="ml-auto">
                 <Tippy
-                    as="div"
-                    class="cursor-pointer bg-danger py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium"
-                    content=""
+                  as="div"
+                  class="cursor-pointer bg-danger py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium"
+                  content=""
                 >
                   &nbsp;
                   <Lucide icon="ChevronDown" class="w-4 h-4 ml-0.5" />
@@ -73,18 +73,18 @@ const welcomeName = computed(() => userContext.value.profile.first_name);
       <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
         <div
           :class="[
-                  'relative zoom-in',
-                  'before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-[\'\']',
+            'relative zoom-in',
+            'before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-[\'\']',
           ]"
         >
           <div class="p-5 box">
             <div class="flex">
-             <Lucide icon="Monitor" class="w-[28px] h-[28px] text-warning" />
+              <Lucide icon="Monitor" class="w-[28px] h-[28px] text-warning" />
               <div class="ml-auto">
                 <Tippy
-                    as="div"
-                    class="cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium"
-                    content=""
+                  as="div"
+                  class="cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium"
+                  content=""
                 >
                   &nbsp;
                   <Lucide icon="ChevronUp" class="w-4 h-4 ml-0.5" />
@@ -99,8 +99,8 @@ const welcomeName = computed(() => userContext.value.profile.first_name);
       <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
         <div
           :class="[
-                  'relative zoom-in',
-                  'before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-[\'\']',
+            'relative zoom-in',
+            'before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-[\'\']',
           ]"
         >
           <div class="p-5 box">
@@ -108,9 +108,9 @@ const welcomeName = computed(() => userContext.value.profile.first_name);
               <Lucide icon="User" class="w-[28px] h-[28px] text-success" />
               <div class="ml-auto">
                 <Tippy
-                    as="div"
-                    class="cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium"
-                    content=""
+                  as="div"
+                  class="cursor-pointer bg-success py-[3px] flex rounded-full text-white text-xs pl-2 pr-1 items-center font-medium"
+                  content=""
                 >
                   &nbsp;
                   <Lucide icon="ChevronUp" class="w-4 h-4 ml-0.5" />
@@ -125,4 +125,3 @@ const welcomeName = computed(() => userContext.value.profile.first_name);
     </div>
   </div>
 </template>
-  
\ No newline at end of file
diff --git a/web/src/pages/dashboard/ProfileView.vue b/web/src/pages/dashboard/ProfileView.vue
index 75ecb4af4..ce93c3fa5 100644
--- a/web/src/pages/dashboard/ProfileView.vue
+++ b/web/src/pages/dashboard/ProfileView.vue
@@ -1,927 +1,1136 @@
-<script setup lang="ts">
-// #region Imports
-import { onMounted, computed, ref, watchEffect, provide } from "vue";
-import { useI18n } from "vue-i18n";
-import {
-    FormInput,
-    FormLabel,
-    FormSwitch,
-    FormTextarea,
-    FormSelect,
-    FormErrorMessages,
-} from "@/components/Base/Form";
-import { useUserContextStore } from "@/stores/user-context";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-    TitleLayout,
-    TwoColumnsLayout,
-} from "@/components/Base/Form/FormLayout";
-import { TwoColumnsLayoutCards } from "@/components/Base/Form/FormLayout/TwoColumnsLayout.vue";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { CardState } from "@/types/enums/CardState";
-import posSystemImage from "@/assets/images/pos_system.png";
-import wareHouseImage from "@/assets/images/warehouse_system.png";
-import accountingImage from "@/assets/images/accounting_system.jpg";
-import googlePlayBadge from "@/assets/images/google-play-badge.png";
-import Lucide from "@/components/Base/Lucide";
-import Button from "@/components/Base/Button";
-import { formatDate } from "@/utils/helper";
-import ProfileService from "@/services/ProfileService";
-import DashboardService from "@/services/DashboardService";
-import { TwoFactorResponse, QRCode, SecretKeyResponse } from "@/types/models/TwoFactorAuthentication";
-import { ConfirmPasswordStatusResponse } from "@/types/models/ConfirmPassword";
-import { UserProfile } from "@/types/models/UserProfile";
-import { ServiceResponse } from "@/types/services/ServiceResponse";
-import { Dialog } from "@/components/Base/Headless";
-import { Config } from "ziggy-js";
-import AlertPlaceholder from "@/components/AlertPlaceholder/AlertPlaceholder.vue";
-import { type NotificationElement } from "@/components/Base/Notification/Notification.vue";
-// #endregion
-
-// #region Interfaces
-interface RoleSelection {
-    images: string;
-    state: 'selectable' | 'checked' | 'disabled',
-    rolekey: string;
-};
-// #endregion
-
-// #region Declarations
-const { t } = useI18n();
-
-const dashboardServices = new DashboardService();
-const profileServices = new ProfileService();
-
-const userContextStore = useUserContextStore();
-const menuStore = useMenuStore();
-const ziggyRouteStore = useZiggyRouteStore();
-// #endregion
-
-// #region Props, Emits
-// #endregion
-
-// #region Refs
-const loading = ref<boolean>(false);
-const cards = ref<Array<TwoColumnsLayoutCards>>([
-    { title: 'views.profile.field_groups.user_profile', state: CardState.Expanded },
-    { title: 'views.profile.field_groups.email_verification', state: CardState.Expanded },
-    { title: 'views.profile.field_groups.personal_information', state: CardState.Expanded },
-    { title: 'views.profile.field_groups.account_settings', state: CardState.Expanded },
-    { title: 'views.profile.field_groups.roles', state: CardState.Expanded },
-    { title: 'views.profile.field_groups.change_password', state: CardState.Expanded },
-    { title: 'views.profile.field_groups.api_token', state: CardState.Expanded },
-    { title: 'views.profile.field_groups.two_factor_authentication', state: CardState.Expanded },
-]);
-
-const sendVerificationEmailNotification = ref<NotificationElement>();
-
-provide("bind[sendVerificationEmailNotification]", (el: NotificationElement) => {
-    sendVerificationEmailNotification.value = el;
-});
-
-const roleSelection = ref<Array<RoleSelection>>([
-    {
-        images: posSystemImage,
-        state: 'disabled',
-        rolekey: "pos",
-    },
-    {
-        images: wareHouseImage,
-        state: 'disabled',
-        rolekey: "wh",
-    },
-    {
-        images: accountingImage,
-        state: 'disabled',
-        rolekey: "wh",
-    },
-]);
-
-const twoFactorAuthStatus = ref<boolean>(false);
-const showQRCodeField = ref<boolean>(false);
-const showRecoveryCodesField = ref<boolean>(false);
-const showSecretKeyField = ref<boolean>(false);
-
-const qrCode = ref<QRCode>({
-    svg: '',
-    url: '',
-});
-const twoFactorCode = ref<string>('');
-const twoFactorCodeErrorText = ref<string>('');
-const twoFactorRecoveryCodes = ref<Array<string>>([]);
-const twoFactorSecretKey = ref<string>('');
-
-const confirmPasswordStatus = ref<ConfirmPasswordStatusResponse>({
-    confirmed: false
-});
-const showConfirmPasswordDialog = ref<boolean>(false);
-const confirmPasswordPurpose = ref<'2FA' | 'QRCODE' | ''>('');
-const confirmPasswordText = ref<string>('');
-const confirmPasswordErrorText = ref<string>('');
-
-const updateUserProfileForm = profileServices.useUpdateUserProfileForm();
-const updatePersonalInfoForm = profileServices.useUpdatePersonalInfoForm();
-const updateAccountSettingsForm = profileServices.useUpdateAccountSettingsForm();
-const updateUserRolesForm = profileServices.useUpdateUserRolesForm();
-const updatePasswordForm = profileServices.useUpdatePasswordForm();
-const updateTokensForm = profileServices.useUpdateTokenForm();
-
-const alertType = ref<'hidden'|'danger'|'success'|'warning'|'pending'|'dark'>('hidden');
-const alertTitle = ref<string>('');
-const alertList = ref<Record<string, Array<string>>|null>(null);
-// #endregion
-
-// #region Provide/Inject
-// #endregion
-
-// #region Computed
-const userContextIsLoaded = computed(() => userContextStore.getIsLoaded);
-const userContext = computed(() => userContextStore.getUserContext);
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(async () => {
-    loading.value = true;
-    if (userContextIsLoaded.value) {
-        setFormData();
-        loading.value = false;
-    }
-});
-// #endregion
-
-// #region Methods
-const setFormData = () => {
-    updateUserProfileForm.setData({
-        name: userContext.value.name,
-    });
-
-    updatePersonalInfoForm.setData({
-        first_name: userContext.value.profile.first_name,
-        last_name: userContext.value.profile.last_name,
-        address: userContext.value.profile.address,
-        city: userContext.value.profile.city,
-        postal_code: userContext.value.profile.postal_code,
-        country: userContext.value.profile.country,
-        img_path: userContext.value.profile.img_path,
-        tax_id: userContext.value.profile.tax_id,
-        ic_num: userContext.value.profile.ic_num,
-        status: userContext.value.profile.status,
-        remarks: userContext.value.profile.remarks,
-    });
-
-    updateAccountSettingsForm.setData({
-        theme: userContext.value.settings.theme,
-        date_format: userContext.value.settings.date_format,
-        time_format: userContext.value.settings.time_format,
-    });
-
-    roleSelection.value.forEach((r) => {
-        if (r.rolekey == 'pos' && hasRolePOSOwner()) {
-            r.state = 'checked';
-        }
-        else if (r.rolekey == 'wh' && hasRoleWHOwner()) {
-            r.state = 'checked';
-        }
-        else if (r.rolekey == 'acc' && hasRoleACCOwner()) {
-            r.state = 'checked';
-        }
-        else {
-            r.state = 'selectable'
-        }
-    });
-};
-
-const handleExpandCard = (index: number) => {
-    if (cards.value[index].state === CardState.Collapsed) {
-        cards.value[index].state = CardState.Expanded;
-    } else if (cards.value[index].state === CardState.Expanded) {
-        cards.value[index].state = CardState.Collapsed;
-    }
-};
-
-const handleChangeRole = (index: number) => {
-    let activeRole: string = roleSelection.value[index].rolekey;
-
-    updateUserRolesForm.setData({
-        roles: activeRole
-    });
-};
-
-const hasRolePOSOwner = () => {
-    let result = false;
-    for (const r of userContext.value.roles) {
-        if (r.display_name == 'POS-owner') {
-            result = true;
-        }
-    }
-    return result;
-};
-
-const hasRoleWHOwner = () => {
-    let result = false;
-    for (const r of userContext.value.roles) {
-        if (r.display_name == 'WH-owner') {
-            result = true;
-        }
-    }
-    return result;
-};
-
-const hasRoleACCOwner = () => {
-    let result = false;
-    for (const r of userContext.value.roles) {
-        if (r.display_name == 'ACC-owner') {
-            result = true;
-        }
-    }
-    return result;
-};
-
-const setTwoFactorAuthStatus = async () => {
-    twoFactorAuthStatus.value = userContext.value.two_factor;
-};
-
-const setTwoFactor = async (event: Event) => {
-    let checked: boolean = (event.target as HTMLInputElement).checked;
-    twoFactorAuthStatus.value = checked;
-
-    await checkConfirmPasswordStatus();
-
-    if (confirmPasswordStatus.value.confirmed) {
-        await setTwoFactorWithoutOrAfterConfirmPassword();
-    } else {
-        confirmPasswordPurpose.value = '2FA';
-        await setTwoFactorWithConfirmPassword();
-    }
-};
-
-const setTwoFactorWithConfirmPassword = async () => {
-    confirmPasswordText.value = '';
-    confirmPasswordErrorText.value = '';
-    showConfirmPasswordDialog.value = true;
-};
-
-const setTwoFactorWithoutOrAfterConfirmPassword = async () => {
-    if (twoFactorAuthStatus.value) {
-        await profileServices.enableTwoFactor();
-        await showQR();
-    } else {
-        await profileServices.disableTwoFactor();
-        await reloadUserContext();
-    }
-};
-
-const doConfirmTwoFactorAuthentication = async () => {
-    let code = twoFactorCode.value;
-    let response: ServiceResponse<TwoFactorResponse | null> = await profileServices.TwoFactorAuthenticationConfirmed(code);
-
-    if (response.success) {
-        showQRCodeField.value = false;
-
-        await reloadUserContext();
-        await showRecoveryCodes();
-        await showSecretKey();
-    } else {
-        twoFactorCodeErrorText.value = t('views.profile.fields.2fa.confirm_2fa_auth_error');
-    }
-};
-
-const showQR = async () => {
-    await checkConfirmPasswordStatus();
-
-    if (confirmPasswordStatus.value.confirmed) {
-        await showQRWithoutOrAfterConfirmPassword();
-    } else {
-        confirmPasswordPurpose.value = 'QRCODE';
-        await showQRWithConfirmPassword();
-    }
-};
-
-const showQRWithoutOrAfterConfirmPassword = async () => {
-    let response: ServiceResponse<QRCode | null> = await profileServices.twoFactorQR();
-
-    if (response.success && response.data) {
-        qrCode.value = response.data;
-        showQRCodeField.value = true;
-    }
-};
-
-const showQRWithConfirmPassword = async () => {
-    confirmPasswordText.value = '';
-    confirmPasswordErrorText.value = '';
-    showConfirmPasswordDialog.value = true;
-};
-
-const showRecoveryCodes = async () => {
-    let response: ServiceResponse<Array<string> | null> = await profileServices.twoFactorRecoveryCodes();
-
-    if (response.success && response.data) {
-        twoFactorRecoveryCodes.value = response.data;
-        showRecoveryCodesField.value = true;
-    }
-};
-
-const showSecretKey = async () => {
-    let response: ServiceResponse<SecretKeyResponse | null> = await profileServices.twoFactorSecretKey();
-
-    if (response.success) {
-        if (response.data) {
-            twoFactorSecretKey.value = response.data.secretKey;
-            showSecretKeyField.value = true;
-        }
-    }
-};
-
-const checkConfirmPasswordStatus = async () => {
-    let response: ServiceResponse<ConfirmPasswordStatusResponse | null> = await profileServices.confirmPasswordStatus();
-
-    if (response.success && response.data) {
-        confirmPasswordStatus.value = response.data;
-    }
-};
-
-const submitConfirmPassword = async () => {
-    let response: ServiceResponse<TwoFactorResponse | null> = await profileServices.confirmPassword(confirmPasswordText.value);
-
-    if (response.success) {
-        switch (confirmPasswordPurpose.value) {
-            case '2FA':
-                await setTwoFactorWithoutOrAfterConfirmPassword();
-                break;
-            case 'QRCODE':
-                await showQRWithoutOrAfterConfirmPassword();
-                break;
-            case '':
-            default:
-                break;
-        }
-
-        await closeConfirmPasswordDialog();
-    } else {
-        confirmPasswordErrorText.value = t('views.profile.fields.2fa.confirm_password_error');
-    }
-};
-
-const closeConfirmPasswordDialog = async () => {
-    showConfirmPasswordDialog.value = false;
-
-    confirmPasswordText.value = '';
-    confirmPasswordErrorText.value = '';
-
-    confirmPasswordPurpose.value = '';
-
-    await reloadUserContext();
-};
-
-const reloadUserContext = async () => {
-    let userprofile = await profileServices.readProfile();
-    userContextStore.setUserContext(userprofile.data as UserProfile);
-};
-
-const sendEmailVerification = async () => {
-    loading.value = true;
-
-    let result = await profileServices.sendEmailVerification();
-
-    if (result.success && sendVerificationEmailNotification.value) {
-        sendVerificationEmailNotification.value.showToast();
-    }
-        
-    loading.value = false;
-};
-
-const updateUserProfile = async () => {
-    let userprofile = await profileServices.readProfile();
-    if (userprofile.success) {
-        userContextStore.setUserContext(userprofile.data as UserProfile);
-    }
-};
-
-const updateUserMenu = async () => {
-    let menuResult = await dashboardServices.readUserMenu();
-    menuStore.setMenu(menuResult.data as Array<sMenu>);
-
-    let apiResult = await dashboardServices.readUserApi();
-    ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
-
-const onSubmitUpdateUserProfile = async () => {
-    loading.value = true;
-
-    await updateUserProfileForm.submit().then(async () => {
-        await updateUserProfile();
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        loading.value = false;
-    });
-};
-
-const onSubmitUpdatePersonalInfo = async () => {
-    loading.value = true;
-
-    await updatePersonalInfoForm.submit().then(async () => {
-        await updateUserProfile();
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        loading.value = false;
-    });
-};
-
-const onSubmitUpdateAccountSettings = async () => {
-    loading.value = true;
-
-    await updateAccountSettingsForm.submit().then(async () => {
-        await updateUserProfile();
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        loading.value = false;
-    });
-};
-
-const onSubmitUpdateUserRoles = async () => {
-    loading.value = true;
-
-    await updateUserRolesForm.submit().then(async () => {
-        await updateUserProfile();
-        await updateUserMenu();
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        loading.value = false;
-    });
-};
-
-const onSubmitUpdatePassword = async () => {
-    loading.value = true;
-
-    await updatePasswordForm.submit().then(async () => {
-        await updateUserProfile();
-        updatePasswordForm.reset();
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        loading.value = false;
-    });
-};
-
-const onSubmitUpdateToken = async () => {
-    loading.value = true;
-
-    await updateTokensForm.submit().then(async () => {
-        await updateUserProfile();
-        updateTokensForm.reset();
-    }).catch(error => {
-        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
-        showAlertPlaceholder('danger', '', errorList);
-    }).finally(() => {
-        loading.value = false;
-    });
-};
-
-const showAlertPlaceholder = (pAlertType: 'hidden'|'danger'|'success'|'warning'|'pending'|'dark', pTitle: string, pAlertList: Record<string, Array<string>>|null) => {
-    alertType.value = pAlertType;
-    alertTitle.value = pTitle;
-    alertList.value = pAlertList;
-};
-
-const resetAlertPlaceholder = () => {
-    alertTitle.value = '';
-    alertList.value = null;
-    alertType.value = 'hidden';
-};
-
-const convertErrorTypeToAlertListType = (error: Error) => {
-    const record: Record<string, Array<string>> = {};
-
-    record.error = [error.message];
-
-    return record;
-};
-// #region Methods
-
-// #region Watchers
-watchEffect(async () => {
-    if (userContextIsLoaded.value) {
-        setFormData();
-        await setTwoFactorAuthStatus();
-
-        loading.value = false;
-    }
-});
-// #endregion
-</script>
-
-<template>
-    <div class="mt-8">
-        <LoadingOverlay :visible="loading">
-            <TitleLayout>
-                <template #title>
-                    {{ t("views.profile.title") }}
-                </template>
-            </TitleLayout>
-
-            <AlertPlaceholder :alert-type="alertType" :title="alertTitle" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
-
-            <TwoColumnsLayout :cards="cards" :show-side-tab="true" :using-side-tab="true"
-                @handleExpandCard="handleExpandCard">
-                <template #side-menu-title>
-                    {{ userContext.name }}
-                </template>
-                <template #card-items-0>
-                    <div class="p-5">
-                        <form id="updateUserProfileForm" @submit.prevent="onSubmitUpdateUserProfile">
-                            <div class="pb-4">
-                                <FormLabel
-                                    :class="{ 'text-danger': updateUserProfileForm.invalid('name') }">
-                                    {{ t("views.profile.fields.name") }}
-                                </FormLabel>
-                                <FormInput v-model="updateUserProfileForm.name" type="text"
-                                    :class="{ 'border-danger': updateUserProfileForm.invalid('name') }"
-                                    :placeholder="t('views.profile.fields.name')"
-                                    @change="updateUserProfileForm.validate('name')" />
-                                <FormErrorMessages :messages="updateUserProfileForm.errors.name" />
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.email") }}
-                                </FormLabel>
-                                <FormInput v-model="userContext.email" type="text"
-                                    :placeholder="t('views.profile.fields.email')" disabled />
-                            </div>
-                            <div>
-                                <Button type="submit" size="sm" href="#" variant="primary" class="w-28 shadow-md"
-                                    :disabled="updateUserProfileForm.validating || updateUserProfileForm.hasErrors">
-                                    <Lucide v-if="updateUserProfileForm.validating" icon="Loader" class="animate-spin" />
-                                    <template v-else>
-                                        {{ t("components.buttons.update") }}
-                                    </template>
-                                </Button>
-                            </div>
-                        </form>
-                    </div>
-                </template>
-                <template #card-items-1>
-                    <div class="p-5">
-                        <div v-if="userContext.email_verified" class="pb-4">
-                            <span>{{ t('views.profile.tooltip.email_verified') }}</span>
-                        </div>
-                        <div v-else>
-                            <Button type="button" size="sm" href="#" variant="primary" class="w-42 shadow-md"
-                                @click="sendEmailVerification">
-                                {{ t("components.buttons.send_verification_email") }}
-                            </Button>
-                        </div>
-                        <Notification ref-key="sendVerificationEmailNotification" :options="{ duration: 3000, }" class="flex">
-                            <Lucide icon="CheckCircle" class="text-success" />
-                            <div class="ml-4 mr-4">
-                                <div class="font-medium">{{ t('views.profile.alert.verification_email_sent.title') }}</div>
-                                <div class="mt-1 text-slate-500">
-                                    {{ t('views.profile.alert.verification_email_sent.content') }}
-                                </div>
-                            </div>
-                        </Notification>
-                    </div>
-                </template>
-                <template #card-items-2>
-                    <div class="p-5">
-                        <form id="updatePersonalInfoForm" @submit.prevent="onSubmitUpdatePersonalInfo">
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.first_name") }}
-                                </FormLabel>
-                                <FormInput v-model="updatePersonalInfoForm.first_name"
-                                    type="text" :placeholder="t('views.profile.fields.first_name')" />
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.last_name") }}
-                                </FormLabel>
-                                <FormInput v-model="updatePersonalInfoForm.last_name"
-                                    type="text" :placeholder="t('views.profile.fields.last_name')" />
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.address") }}
-                                </FormLabel>
-                                <FormTextarea v-model="updatePersonalInfoForm.address" rows="5"
-                                    :placeholder="t('views.profile.fields.address')" />
-                            </div>
-                            <div class="flex gap-2">
-                                <div class="pb-4 w-full">
-                                    <FormLabel>
-                                        {{ t("views.profile.fields.city") }}
-                                    </FormLabel>
-                                    <FormInput v-model="updatePersonalInfoForm.city" type="text"
-                                        class="w-full" :placeholder="t('views.profile.fields.city')" />
-                                </div>
-                                <div class="pb-4">
-                                    <FormLabel>
-                                        {{ t("views.profile.fields.postal_code") }}
-                                    </FormLabel>
-                                    <FormInput v-model="updatePersonalInfoForm.postal_code"
-                                        type="number"
-                                        :placeholder="t('views.profile.fields.postal_code')" />
-                                </div>
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.country") }}
-                                </FormLabel>
-                                <FormSelect v-model="updatePersonalInfoForm.country"
-                                    :class="{ 'border-danger': updatePersonalInfoForm.invalid('country') }"
-                                    :placeholder="t('views.profile.fields.country')"
-                                    @change="updatePersonalInfoForm.validate('country'); updatePersonalInfoForm.submit()">
-                                    <option>Singapore</option>
-                                    <option>Indonesia</option>
-                                </FormSelect>
-                                <FormErrorMessages :messages="updatePersonalInfoForm.errors.country" />
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel
-                                    :class="{ 'text-danger': updatePersonalInfoForm.invalid('tax_id') }">
-                                    {{ t("views.profile.fields.tax_id") }}
-                                </FormLabel>
-                                <FormInput v-model="updatePersonalInfoForm.tax_id" type="text"
-                                    :class="{ 'border-danger': updatePersonalInfoForm.invalid('tax_id') }"
-                                    :placeholder="t('views.profile.fields.tax_id')"
-                                    @change="updatePersonalInfoForm.validate('tax_id'); updatePersonalInfoForm.submit();" />
-                                <FormErrorMessages :messages="updatePersonalInfoForm.errors.tax_id" />
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel
-                                    :class="{ 'text-danger': updatePersonalInfoForm.invalid('ic_num') }">
-                                    {{ t("views.profile.fields.ic_num") }}
-                                </FormLabel>
-                                <FormInput v-model="updatePersonalInfoForm.ic_num" type="text"
-                                    :class="{ 'border-danger': updatePersonalInfoForm.invalid('ic_num') }"
-                                    :placeholder="t('views.profile.fields.ic_num')"
-                                    @change="updatePersonalInfoForm.validate('ic_num')" />
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.remarks") }}
-                                </FormLabel>
-                                <FormTextarea v-model="updatePersonalInfoForm.remarks" rows="5"
-                                    :placeholder="t('views.profile.fields.remarks')" />
-                            </div>
-                            <div>
-                                <Button type="submit" size="sm" href="#" variant="primary" class="w-28 shadow-md"
-                                    :disabled="updateUserProfileForm.validating || updateUserProfileForm.hasErrors">
-                                    <Lucide v-if="updateUserProfileForm.validating" icon="Loader" class="animate-spin" />
-                                    <template v-else>
-                                        {{ t("components.buttons.update") }}
-                                    </template>
-                                </Button>
-                            </div>
-                        </form>
-                    </div>
-                </template>
-                <template #card-items-3>
-                    <div class="p-5">
-                        <form id="updateAccountSettingsForm" @submit.prevent="onSubmitUpdateAccountSettings">
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.settings.theme") }}
-                                </FormLabel>
-                                <FormSelect v-model="updateAccountSettingsForm.theme">
-                                    <option value="side-menu-light-full">Menu Light</option>
-                                    <option value="side-menu-light-mini">Mini Menu Light</option>
-                                    <option value="side-menu-dark-full">Menu Dark</option>
-                                    <option value="side-menu-dark-mini">Mini Menu Dark</option>
-                                </FormSelect>
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.settings.date_format") }}
-                                </FormLabel>
-                                <FormSelect v-model="updateAccountSettingsForm.date_format">
-                                    <option value="yyyy_MM_dd">
-                                        {{ formatDate(new Date().toString(), "YYYY-MM-DD") }}
-                                    </option>
-                                    <option value="dd_MMM_yyyy">
-                                        {{ formatDate(new Date().toString(), "DD-MMM-YYYY") }}
-                                    </option>
-                                </FormSelect>
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.settings.time_format") }}
-                                </FormLabel>
-                                <FormSelect v-model="updateAccountSettingsForm.time_format">
-                                    <option value="hh_mm_ss">
-                                        {{ formatDate(new Date().toString(), "HH:mm:ss") }}
-                                    </option>
-                                    <option value="h_m_A">
-                                        {{ formatDate(new Date().toString(), "H:m A") }}
-                                    </option>
-                                </FormSelect>
-                            </div>
-                            <div>
-                                <Button type="submit" size="sm" href="#" variant="primary" class="w-28 shadow-md"
-                                    :disabled="updateUserProfileForm.validating || updateUserProfileForm.hasErrors">
-                                    <Lucide v-if="updateUserProfileForm.validating" icon="Loader" class="animate-spin" />
-                                    <template v-else>
-                                        {{ t("components.buttons.update") }}
-                                    </template>
-                                </Button>
-                            </div>
-                        </form>
-                    </div>
-                </template>
-                <template #card-items-4>
-                    <div class="p-5">
-                        <form id="updateUserRolesForm" @submit.prevent="onSubmitUpdateUserRoles">
-                            <div class="pb-4">
-                                <div class="grid grid-cols-3 gap-2 place-items center">
-                                    <div v-for="(item, index) in roleSelection" :key="index"
-                                        class="flex flex-col items-center">
-                                        <div :class="{ 'cursor-pointer': item.state == 'selectable', 'flex flex-col items-center justify-center': true }"
-                                            @click="handleChangeRole(index)">
-                                            <img alt="" :src="item.images" width="100" height="100" />
-                                            <div v-if="item.state == 'checked'" class="grid grid-cols-1 place-items-center">
-                                                <Lucide icon="Check" class="text-success" />
-                                            </div>
-                                            <Button v-else-if="item.state == 'selectable'" type="submit" variant="primary"
-                                                size="sm" class="w-28 shadow-md">
-                                                {{ t("components.buttons.activate") }}
-                                            </Button>
-                                            <span v-else>&nbsp;</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-                </template>
-                <template #card-items-5>
-                    <div class="p-5">
-                        <form id="updatePasswordForm" @submit.prevent="onSubmitUpdatePassword">
-                            <div class="pb-4">
-                                <FormLabel
-                                    :class="{ 'text-danger': updatePasswordForm.invalid('current_password') }">
-                                    {{ t("views.profile.fields.change_password.current_password") }}
-                                </FormLabel>
-                                <FormInput v-model="updatePasswordForm.current_password" type="password"
-                                    :class="{ 'border-danger': updatePasswordForm.invalid('current_password') }"
-                                    :placeholder="t('views.profile.fields.change_password.current_password')"
-                                    @change="updatePasswordForm.validate('current_password')" />
-                                <FormErrorMessages :messages="updatePasswordForm.errors.current_password" />
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel
-                                    :class="{ 'text-danger': updatePasswordForm.invalid('password') }">
-                                    {{ t("views.profile.fields.change_password.password") }}
-                                </FormLabel>
-                                <FormInput v-model="updatePasswordForm.password" 
-                                    type="password" :class="{ 'border-danger': updatePasswordForm.invalid('password') }"
-                                    :placeholder="t('views.profile.fields.change_password.password')" />
-                                <FormErrorMessages :messages="updatePasswordForm.errors.password" />
-                            </div>
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.change_password.password_confirmation") }}
-                                </FormLabel>
-                                <FormInput v-model="updatePasswordForm.password_confirmation"
-                                    type="password"
-                                    :placeholder="t('views.profile.fields.change_password.password_confirmation')" />
-                            </div>
-                            <div>
-                                <Button type="submit" size="sm" href="#" variant="primary" class="w-28 shadow-md"
-                                    :disabled="updateUserProfileForm.validating || updateUserProfileForm.hasErrors">
-                                    <Lucide v-if="updateUserProfileForm.validating" icon="Loader" class="animate-spin" />
-                                    <template v-else>
-                                        {{ t("components.buttons.update") }}
-                                    </template>
-                                </Button>
-                            </div>
-                        </form>
-                    </div>
-                </template>
-                <template #card-items-6>
-                    <div class="p-5">
-                        <form id="updateTokenForm" @submit.prevent="onSubmitUpdateToken">
-                            <div class="pb-4">
-                                <FormLabel>
-                                    {{ t("views.profile.fields.api_token.total_token_generated") }}&nbsp;:&nbsp;{{ userContext.personal_access_tokens }}
-                                </FormLabel>
-                            </div>
-                            <input id="resetToken" type="hidden" v-model="updateTokensForm.reset_tokens" />
-                            <div>
-                                <Button type="submit" size="sm" href="#" variant="primary" class="w-28 shadow-md"
-                                    :disabled="updateTokensForm.validating || updateTokensForm.hasErrors">
-                                    <Lucide v-if="updateTokensForm.validating" icon="Loader" class="animate-spin" />
-                                    <template v-else>
-                                        {{ t("components.buttons.reset") }}
-                                    </template>
-                                </Button>
-                            </div>
-                        </form>
-                    </div>
-                </template>
-                <template #card-items-7>
-                    <div class="p-5">
-                        <div class="pb-4">
-                            <FormLabel>
-                                {{ t('views.profile.fields.2fa.status') }}
-                            </FormLabel>
-                            <FormSwitch>
-                                <FormSwitch.Input type="checkbox" @change="setTwoFactor"
-                                    v-model="twoFactorAuthStatus" />
-                            </FormSwitch>
-                        </div>
-                        <div v-if="showQRCodeField" class="pb-4">
-                            <img v-html="qrCode.svg" alt="QR Code" />
-                            <br />
-                            {{ t('views.profile.fields.2fa.qr-code_description_1') }}
-                            <br />
-                            {{ t('views.profile.fields.2fa.qr-code_description_2') }}
-                            <br />
-                            <img :src="googlePlayBadge" alt="Google Play" width="120" height="120" />
-                            <br />
-                            {{ t('views.profile.fields.2fa.confirm_2fa_auth_description_1') }}
-                            <br />
-                            {{ t('views.profile.fields.2fa.confirm_2fa_auth_description_2') }}
-                            <br />
-                            <br />
-                            <FormLabel>
-                                {{ t('views.profile.fields.2fa.confirm_2fa_auth') }}
-                            </FormLabel>
-                            <FormInput v-model="twoFactorCode" />
-                            <FormErrorMessages v-if="twoFactorCodeErrorText != ''" :messages="twoFactorCodeErrorText" />
-                            <br />
-                            <Button type="button" variant="primary" @click="() => { doConfirmTwoFactorAuthentication(); }"
-                                class="mt-2 w-24">
-                                {{ t('components.buttons.submit') }}
-                            </Button>
-                        </div>
-                        <div v-if="showRecoveryCodesField" class="pb-4">
-                            {{ t('views.profile.fields.2fa.recovery-codes_description_1') }}
-                            <br />
-                            {{ t('views.profile.fields.2fa.recovery-codes_description_2') }}
-                            <br />
-                            <br />
-                            <FormLabel>
-                                {{ t('views.profile.fields.2fa.recovery-codes') }}
-                            </FormLabel>
-                            <div>
-                                <template v-for="(rc, rcIdx) in twoFactorRecoveryCodes">
-                                    <span class="italic">{{ rcIdx + 1 }}. {{ rc }}</span>
-                                    <br />
-                                </template>
-                            </div>
-                        </div>
-                        <div v-if="showSecretKeyField" class="pb-4">
-                            {{ t('views.profile.fields.2fa.secret-key_description_1') }}
-                            <br />
-                            {{ t('views.profile.fields.2fa.secret-key_description_2') }}
-                            <br />
-                            <br />
-                            <FormLabel>
-                                {{ t('views.profile.fields.2fa.secret-key') }}
-                            </FormLabel>
-                            <div class="italic">
-                                {{ twoFactorSecretKey }}
-                            </div>
-                        </div>
-                        <Dialog staticBackdrop :open="showConfirmPasswordDialog"
-                            @close="() => { closeConfirmPasswordDialog(); }">
-                            <Dialog.Panel class="px-5 py-10">
-                                <div class="text-center">
-                                    <div class="mb-5">
-                                        <FormLabel>
-                                            {{ t('views.profile.fields.2fa.confirm_password') }}
-                                        </FormLabel>
-                                        <FormInput v-model="confirmPasswordText"
-                                            type="password"
-                                            :placeholder="t('views.profile.fields.2fa.confirm_password')" />
-                                        <FormErrorMessages v-if="confirmPasswordErrorText != ''"
-                                            :messages="confirmPasswordErrorText" />
-                                    </div>
-                                    <div class="flex gap-2 justify-center items-center">
-                                        <Button type="button" variant="primary" @click="() => { submitConfirmPassword(); }"
-                                            class="w-24">
-                                            {{ t('components.buttons.submit') }}
-                                        </Button>
-                                        <Button type="button" variant="primary"
-                                            @click="() => { closeConfirmPasswordDialog(); }" class="w-24">
-                                            {{ t('components.buttons.cancel') }}
-                                        </Button>
-                                    </div>
-                                </div>
-                            </Dialog.Panel>
-                        </Dialog>
-                    </div>
-                </template>
-            </TwoColumnsLayout>
-        </LoadingOverlay>
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, computed, ref, watchEffect, provide } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import {
+    FormInput,
+    FormLabel,
+    FormSwitch,
+    FormTextarea,
+    FormSelect,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import { TitleLayout, TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { CardState } from '@/types/enums/CardState';
+  import posSystemImage from '@/assets/images/pos_system.png';
+  import wareHouseImage from '@/assets/images/warehouse_system.png';
+  import accountingImage from '@/assets/images/accounting_system.jpg';
+  import googlePlayBadge from '@/assets/images/google-play-badge.png';
+  import Lucide from '@/components/Base/Lucide';
+  import Button from '@/components/Base/Button';
+  import { formatDate } from '@/utils/helper';
+  import ProfileService from '@/services/ProfileService';
+  import DashboardService from '@/services/DashboardService';
+  import { TwoFactorResponse, QRCode, SecretKeyResponse } from '@/types/models/TwoFactorAuthentication';
+  import { ConfirmPasswordStatusResponse } from '@/types/models/ConfirmPassword';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Dialog } from '@/components/Base/Headless';
+  import { Config } from 'ziggy-js';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  // #endregion
+
+  // #region Interfaces
+  interface RoleSelection {
+    images: string;
+    state: 'selectable' | 'checked' | 'disabled';
+    rolekey: string;
+  }
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+
+  const dashboardServices = new DashboardService();
+  const profileServices = new ProfileService();
+
+  const userContextStore = useUserContextStore();
+  const menuStore = useMenuStore();
+  const ziggyRouteStore = useZiggyRouteStore();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const loading = ref<boolean>(false);
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.profile.field_groups.user_profile',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.profile.field_groups.email_verification',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.profile.field_groups.personal_information',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.profile.field_groups.account_settings',
+      state: CardState.Expanded,
+    },
+    { title: 'views.profile.field_groups.roles', state: CardState.Expanded },
+    {
+      title: 'views.profile.field_groups.change_password',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.profile.field_groups.api_token',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.profile.field_groups.two_factor_authentication',
+      state: CardState.Expanded,
+    },
+  ]);
+
+  const sendVerificationEmailNotification = ref<NotificationElement>();
+
+  provide('bind[sendVerificationEmailNotification]', (el: NotificationElement) => {
+    sendVerificationEmailNotification.value = el;
+  });
+
+  const roleSelection = ref<Array<RoleSelection>>([
+    {
+      images: posSystemImage,
+      state: 'disabled',
+      rolekey: 'pos',
+    },
+    {
+      images: wareHouseImage,
+      state: 'disabled',
+      rolekey: 'wh',
+    },
+    {
+      images: accountingImage,
+      state: 'disabled',
+      rolekey: 'wh',
+    },
+  ]);
+
+  const twoFactorAuthStatus = ref<boolean>(false);
+  const showQRCodeField = ref<boolean>(false);
+  const showRecoveryCodesField = ref<boolean>(false);
+  const showSecretKeyField = ref<boolean>(false);
+
+  const qrCode = ref<QRCode>({
+    svg: '',
+    url: '',
+  });
+  const twoFactorCode = ref<string>('');
+  const twoFactorCodeErrorText = ref<string>('');
+  const twoFactorRecoveryCodes = ref<Array<string>>([]);
+  const twoFactorSecretKey = ref<string>('');
+
+  const confirmPasswordStatus = ref<ConfirmPasswordStatusResponse>({
+    confirmed: false,
+  });
+  const showConfirmPasswordDialog = ref<boolean>(false);
+  const confirmPasswordPurpose = ref<'2FA' | 'QRCODE' | ''>('');
+  const confirmPasswordText = ref<string>('');
+  const confirmPasswordErrorText = ref<string>('');
+
+  const updateUserProfileForm = profileServices.useUpdateUserProfileForm();
+  const updatePersonalInfoForm = profileServices.useUpdatePersonalInfoForm();
+  const updateAccountSettingsForm = profileServices.useUpdateAccountSettingsForm();
+  const updateUserRolesForm = profileServices.useUpdateUserRolesForm();
+  const updatePasswordForm = profileServices.useUpdatePasswordForm();
+  const updateTokensForm = profileServices.useUpdateTokenForm();
+
+  const alertType = ref<'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark'>('hidden');
+  const alertTitle = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+  // #endregion
+
+  // #region Provide/Inject
+  // #endregion
+
+  // #region Computed
+  const userContextIsLoaded = computed(() => userContextStore.getIsLoaded);
+  const userContext = computed(() => userContextStore.getUserContext);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    loading.value = true;
+    if (userContextIsLoaded.value) {
+      setFormData();
+      loading.value = false;
+    }
+  });
+  // #endregion
+
+  // #region Methods
+  const setFormData = () => {
+    updateUserProfileForm.setData({
+      name: userContext.value.name,
+    });
+
+    updatePersonalInfoForm.setData({
+      first_name: userContext.value.profile.first_name,
+      last_name: userContext.value.profile.last_name,
+      address: userContext.value.profile.address,
+      city: userContext.value.profile.city,
+      postal_code: userContext.value.profile.postal_code,
+      country: userContext.value.profile.country,
+      img_path: userContext.value.profile.img_path,
+      tax_id: userContext.value.profile.tax_id,
+      ic_num: userContext.value.profile.ic_num,
+      status: userContext.value.profile.status,
+      remarks: userContext.value.profile.remarks,
+    });
+
+    updateAccountSettingsForm.setData({
+      theme: userContext.value.settings.theme,
+      date_format: userContext.value.settings.date_format,
+      time_format: userContext.value.settings.time_format,
+    });
+
+    roleSelection.value.forEach((r) => {
+      if (r.rolekey == 'pos' && hasRolePOSOwner()) {
+        r.state = 'checked';
+      } else if (r.rolekey == 'wh' && hasRoleWHOwner()) {
+        r.state = 'checked';
+      } else if (r.rolekey == 'acc' && hasRoleACCOwner()) {
+        r.state = 'checked';
+      } else {
+        r.state = 'selectable';
+      }
+    });
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const handleChangeRole = (index: number) => {
+    let activeRole: string = roleSelection.value[index].rolekey;
+
+    updateUserRolesForm.setData({
+      roles: activeRole,
+    });
+  };
+
+  const hasRolePOSOwner = () => {
+    let result = false;
+    for (const r of userContext.value.roles) {
+      if (r.display_name == 'POS-owner') {
+        result = true;
+      }
+    }
+    return result;
+  };
+
+  const hasRoleWHOwner = () => {
+    let result = false;
+    for (const r of userContext.value.roles) {
+      if (r.display_name == 'WH-owner') {
+        result = true;
+      }
+    }
+    return result;
+  };
+
+  const hasRoleACCOwner = () => {
+    let result = false;
+    for (const r of userContext.value.roles) {
+      if (r.display_name == 'ACC-owner') {
+        result = true;
+      }
+    }
+    return result;
+  };
+
+  const setTwoFactorAuthStatus = async () => {
+    twoFactorAuthStatus.value = userContext.value.two_factor;
+  };
+
+  const setTwoFactor = async (event: Event) => {
+    let checked: boolean = (event.target as HTMLInputElement).checked;
+    twoFactorAuthStatus.value = checked;
+
+    await checkConfirmPasswordStatus();
+
+    if (confirmPasswordStatus.value.confirmed) {
+      await setTwoFactorWithoutOrAfterConfirmPassword();
+    } else {
+      confirmPasswordPurpose.value = '2FA';
+      await setTwoFactorWithConfirmPassword();
+    }
+  };
+
+  const setTwoFactorWithConfirmPassword = async () => {
+    confirmPasswordText.value = '';
+    confirmPasswordErrorText.value = '';
+    showConfirmPasswordDialog.value = true;
+  };
+
+  const setTwoFactorWithoutOrAfterConfirmPassword = async () => {
+    if (twoFactorAuthStatus.value) {
+      await profileServices.enableTwoFactor();
+      await showQR();
+    } else {
+      await profileServices.disableTwoFactor();
+      await reloadUserContext();
+    }
+  };
+
+  const doConfirmTwoFactorAuthentication = async () => {
+    let code = twoFactorCode.value;
+    let response: ServiceResponse<TwoFactorResponse | null> =
+      await profileServices.TwoFactorAuthenticationConfirmed(code);
+
+    if (response.success) {
+      showQRCodeField.value = false;
+
+      await reloadUserContext();
+      await showRecoveryCodes();
+      await showSecretKey();
+    } else {
+      twoFactorCodeErrorText.value = t('views.profile.fields.2fa.confirm_2fa_auth_error');
+    }
+  };
+
+  const showQR = async () => {
+    await checkConfirmPasswordStatus();
+
+    if (confirmPasswordStatus.value.confirmed) {
+      await showQRWithoutOrAfterConfirmPassword();
+    } else {
+      confirmPasswordPurpose.value = 'QRCODE';
+      await showQRWithConfirmPassword();
+    }
+  };
+
+  const showQRWithoutOrAfterConfirmPassword = async () => {
+    let response: ServiceResponse<QRCode | null> = await profileServices.twoFactorQR();
+
+    if (response.success && response.data) {
+      qrCode.value = response.data;
+      showQRCodeField.value = true;
+    }
+  };
+
+  const showQRWithConfirmPassword = async () => {
+    confirmPasswordText.value = '';
+    confirmPasswordErrorText.value = '';
+    showConfirmPasswordDialog.value = true;
+  };
+
+  const showRecoveryCodes = async () => {
+    let response: ServiceResponse<Array<string> | null> = await profileServices.twoFactorRecoveryCodes();
+
+    if (response.success && response.data) {
+      twoFactorRecoveryCodes.value = response.data;
+      showRecoveryCodesField.value = true;
+    }
+  };
+
+  const showSecretKey = async () => {
+    let response: ServiceResponse<SecretKeyResponse | null> = await profileServices.twoFactorSecretKey();
+
+    if (response.success) {
+      if (response.data) {
+        twoFactorSecretKey.value = response.data.secretKey;
+        showSecretKeyField.value = true;
+      }
+    }
+  };
+
+  const checkConfirmPasswordStatus = async () => {
+    let response: ServiceResponse<ConfirmPasswordStatusResponse | null> = await profileServices.confirmPasswordStatus();
+
+    if (response.success && response.data) {
+      confirmPasswordStatus.value = response.data;
+    }
+  };
+
+  const submitConfirmPassword = async () => {
+    let response: ServiceResponse<TwoFactorResponse | null> = await profileServices.confirmPassword(
+      confirmPasswordText.value,
+    );
+
+    if (response.success) {
+      switch (confirmPasswordPurpose.value) {
+        case '2FA':
+          await setTwoFactorWithoutOrAfterConfirmPassword();
+          break;
+        case 'QRCODE':
+          await showQRWithoutOrAfterConfirmPassword();
+          break;
+        case '':
+        default:
+          break;
+      }
+
+      await closeConfirmPasswordDialog();
+    } else {
+      confirmPasswordErrorText.value = t('views.profile.fields.2fa.confirm_password_error');
+    }
+  };
+
+  const closeConfirmPasswordDialog = async () => {
+    showConfirmPasswordDialog.value = false;
+
+    confirmPasswordText.value = '';
+    confirmPasswordErrorText.value = '';
+
+    confirmPasswordPurpose.value = '';
+
+    await reloadUserContext();
+  };
+
+  const reloadUserContext = async () => {
+    let userprofile = await profileServices.readProfile();
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  };
+
+  const sendEmailVerification = async () => {
+    loading.value = true;
+
+    let result = await profileServices.sendEmailVerification();
+
+    if (result.success && sendVerificationEmailNotification.value) {
+      sendVerificationEmailNotification.value.showToast();
+    }
+
+    loading.value = false;
+  };
+
+  const updateUserProfile = async () => {
+    let userprofile = await profileServices.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const updateUserMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
+
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
+
+  const onSubmitUpdateUserProfile = async () => {
+    loading.value = true;
+
+    await updateUserProfileForm
+      .submit()
+      .then(async () => {
+        await updateUserProfile();
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  const onSubmitUpdatePersonalInfo = async () => {
+    loading.value = true;
+
+    await updatePersonalInfoForm
+      .submit()
+      .then(async () => {
+        await updateUserProfile();
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  const onSubmitUpdateAccountSettings = async () => {
+    loading.value = true;
+
+    await updateAccountSettingsForm
+      .submit()
+      .then(async () => {
+        await updateUserProfile();
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  const onSubmitUpdateUserRoles = async () => {
+    loading.value = true;
+
+    await updateUserRolesForm
+      .submit()
+      .then(async () => {
+        await updateUserProfile();
+        await updateUserMenu();
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  const onSubmitUpdatePassword = async () => {
+    loading.value = true;
+
+    await updatePasswordForm
+      .submit()
+      .then(async () => {
+        await updateUserProfile();
+        updatePasswordForm.reset();
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  const onSubmitUpdateToken = async () => {
+    loading.value = true;
+
+    await updateTokensForm
+      .submit()
+      .then(async () => {
+        await updateUserProfile();
+        updateTokensForm.reset();
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    alertType.value = pAlertType;
+    alertTitle.value = pTitle;
+    alertList.value = pAlertList;
+  };
+
+  const resetAlertPlaceholder = () => {
+    alertTitle.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+
+  const convertErrorTypeToAlertListType = (error: Error) => {
+    const record: Record<string, Array<string>> = {};
+
+    record.error = [error.message];
+
+    return record;
+  };
+  // #region Methods
+
+  // #region Watchers
+  watchEffect(async () => {
+    if (userContextIsLoaded.value) {
+      setFormData();
+      await setTwoFactorAuthStatus();
+
+      loading.value = false;
+    }
+  });
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t('views.profile.title') }}
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="alertTitle"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <TwoColumnsLayout
+        :cards="cards"
+        :show-side-tab="true"
+        :using-side-tab="true"
+        @handleExpandCard="handleExpandCard"
+      >
+        <template #side-menu-title>
+          {{ userContext.name }}
+        </template>
+        <template #card-items-0>
+          <div class="p-5">
+            <form id="updateUserProfileForm" @submit.prevent="onSubmitUpdateUserProfile">
+              <div class="pb-4">
+                <FormLabel
+                  :class="{
+                    'text-danger': updateUserProfileForm.invalid('name'),
+                  }"
+                >
+                  {{ t('views.profile.fields.name') }}
+                </FormLabel>
+                <FormInput
+                  v-model="updateUserProfileForm.name"
+                  type="text"
+                  :class="{
+                    'border-danger': updateUserProfileForm.invalid('name'),
+                  }"
+                  :placeholder="t('views.profile.fields.name')"
+                  @change="updateUserProfileForm.validate('name')"
+                />
+                <FormErrorMessages :messages="updateUserProfileForm.errors.name" />
+              </div>
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.email') }}
+                </FormLabel>
+                <FormInput
+                  v-model="userContext.email"
+                  type="text"
+                  :placeholder="t('views.profile.fields.email')"
+                  disabled
+                />
+              </div>
+              <div>
+                <Button
+                  type="submit"
+                  size="sm"
+                  href="#"
+                  variant="primary"
+                  class="w-28 shadow-md"
+                  :disabled="updateUserProfileForm.validating || updateUserProfileForm.hasErrors"
+                >
+                  <Lucide v-if="updateUserProfileForm.validating" icon="Loader" class="animate-spin" />
+                  <template v-else>
+                    {{ t('components.buttons.update') }}
+                  </template>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </template>
+        <template #card-items-1>
+          <div class="p-5">
+            <div v-if="userContext.email_verified" class="pb-4">
+              <span>{{ t('views.profile.tooltip.email_verified') }}</span>
+            </div>
+            <div v-else>
+              <Button
+                type="button"
+                size="sm"
+                href="#"
+                variant="primary"
+                class="w-42 shadow-md"
+                @click="sendEmailVerification"
+              >
+                {{ t('components.buttons.send_verification_email') }}
+              </Button>
+            </div>
+            <Notification ref-key="sendVerificationEmailNotification" :options="{ duration: 3000 }" class="flex">
+              <Lucide icon="CheckCircle" class="text-success" />
+              <div class="ml-4 mr-4">
+                <div class="font-medium">
+                  {{ t('views.profile.alert.verification_email_sent.title') }}
+                </div>
+                <div class="mt-1 text-slate-500">
+                  {{ t('views.profile.alert.verification_email_sent.content') }}
+                </div>
+              </div>
+            </Notification>
+          </div>
+        </template>
+        <template #card-items-2>
+          <div class="p-5">
+            <form id="updatePersonalInfoForm" @submit.prevent="onSubmitUpdatePersonalInfo">
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.first_name') }}
+                </FormLabel>
+                <FormInput
+                  v-model="updatePersonalInfoForm.first_name"
+                  type="text"
+                  :placeholder="t('views.profile.fields.first_name')"
+                />
+              </div>
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.last_name') }}
+                </FormLabel>
+                <FormInput
+                  v-model="updatePersonalInfoForm.last_name"
+                  type="text"
+                  :placeholder="t('views.profile.fields.last_name')"
+                />
+              </div>
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.address') }}
+                </FormLabel>
+                <FormTextarea
+                  v-model="updatePersonalInfoForm.address"
+                  rows="5"
+                  :placeholder="t('views.profile.fields.address')"
+                />
+              </div>
+              <div class="flex gap-2">
+                <div class="pb-4 w-full">
+                  <FormLabel>
+                    {{ t('views.profile.fields.city') }}
+                  </FormLabel>
+                  <FormInput
+                    v-model="updatePersonalInfoForm.city"
+                    type="text"
+                    class="w-full"
+                    :placeholder="t('views.profile.fields.city')"
+                  />
+                </div>
+                <div class="pb-4">
+                  <FormLabel>
+                    {{ t('views.profile.fields.postal_code') }}
+                  </FormLabel>
+                  <FormInput
+                    v-model="updatePersonalInfoForm.postal_code"
+                    type="number"
+                    :placeholder="t('views.profile.fields.postal_code')"
+                  />
+                </div>
+              </div>
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.country') }}
+                </FormLabel>
+                <FormSelect
+                  v-model="updatePersonalInfoForm.country"
+                  :class="{
+                    'border-danger': updatePersonalInfoForm.invalid('country'),
+                  }"
+                  :placeholder="t('views.profile.fields.country')"
+                  @change="
+                    updatePersonalInfoForm.validate('country');
+                    updatePersonalInfoForm.submit();
+                  "
+                >
+                  <option>Singapore</option>
+                  <option>Indonesia</option>
+                </FormSelect>
+                <FormErrorMessages :messages="updatePersonalInfoForm.errors.country" />
+              </div>
+              <div class="pb-4">
+                <FormLabel
+                  :class="{
+                    'text-danger': updatePersonalInfoForm.invalid('tax_id'),
+                  }"
+                >
+                  {{ t('views.profile.fields.tax_id') }}
+                </FormLabel>
+                <FormInput
+                  v-model="updatePersonalInfoForm.tax_id"
+                  type="text"
+                  :class="{
+                    'border-danger': updatePersonalInfoForm.invalid('tax_id'),
+                  }"
+                  :placeholder="t('views.profile.fields.tax_id')"
+                  @change="
+                    updatePersonalInfoForm.validate('tax_id');
+                    updatePersonalInfoForm.submit();
+                  "
+                />
+                <FormErrorMessages :messages="updatePersonalInfoForm.errors.tax_id" />
+              </div>
+              <div class="pb-4">
+                <FormLabel
+                  :class="{
+                    'text-danger': updatePersonalInfoForm.invalid('ic_num'),
+                  }"
+                >
+                  {{ t('views.profile.fields.ic_num') }}
+                </FormLabel>
+                <FormInput
+                  v-model="updatePersonalInfoForm.ic_num"
+                  type="text"
+                  :class="{
+                    'border-danger': updatePersonalInfoForm.invalid('ic_num'),
+                  }"
+                  :placeholder="t('views.profile.fields.ic_num')"
+                  @change="updatePersonalInfoForm.validate('ic_num')"
+                />
+              </div>
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.remarks') }}
+                </FormLabel>
+                <FormTextarea
+                  v-model="updatePersonalInfoForm.remarks"
+                  rows="5"
+                  :placeholder="t('views.profile.fields.remarks')"
+                />
+              </div>
+              <div>
+                <Button
+                  type="submit"
+                  size="sm"
+                  href="#"
+                  variant="primary"
+                  class="w-28 shadow-md"
+                  :disabled="updateUserProfileForm.validating || updateUserProfileForm.hasErrors"
+                >
+                  <Lucide v-if="updateUserProfileForm.validating" icon="Loader" class="animate-spin" />
+                  <template v-else>
+                    {{ t('components.buttons.update') }}
+                  </template>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </template>
+        <template #card-items-3>
+          <div class="p-5">
+            <form id="updateAccountSettingsForm" @submit.prevent="onSubmitUpdateAccountSettings">
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.settings.theme') }}
+                </FormLabel>
+                <FormSelect v-model="updateAccountSettingsForm.theme">
+                  <option value="side-menu-light-full">Menu Light</option>
+                  <option value="side-menu-light-mini">Mini Menu Light</option>
+                  <option value="side-menu-dark-full">Menu Dark</option>
+                  <option value="side-menu-dark-mini">Mini Menu Dark</option>
+                </FormSelect>
+              </div>
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.settings.date_format') }}
+                </FormLabel>
+                <FormSelect v-model="updateAccountSettingsForm.date_format">
+                  <option value="yyyy_MM_dd">
+                    {{ formatDate(new Date().toString(), 'YYYY-MM-DD') }}
+                  </option>
+                  <option value="dd_MMM_yyyy">
+                    {{ formatDate(new Date().toString(), 'DD-MMM-YYYY') }}
+                  </option>
+                </FormSelect>
+              </div>
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.settings.time_format') }}
+                </FormLabel>
+                <FormSelect v-model="updateAccountSettingsForm.time_format">
+                  <option value="hh_mm_ss">
+                    {{ formatDate(new Date().toString(), 'HH:mm:ss') }}
+                  </option>
+                  <option value="h_m_A">
+                    {{ formatDate(new Date().toString(), 'H:m A') }}
+                  </option>
+                </FormSelect>
+              </div>
+              <div>
+                <Button
+                  type="submit"
+                  size="sm"
+                  href="#"
+                  variant="primary"
+                  class="w-28 shadow-md"
+                  :disabled="updateUserProfileForm.validating || updateUserProfileForm.hasErrors"
+                >
+                  <Lucide v-if="updateUserProfileForm.validating" icon="Loader" class="animate-spin" />
+                  <template v-else>
+                    {{ t('components.buttons.update') }}
+                  </template>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </template>
+        <template #card-items-4>
+          <div class="p-5">
+            <form id="updateUserRolesForm" @submit.prevent="onSubmitUpdateUserRoles">
+              <div class="pb-4">
+                <div class="grid grid-cols-3 gap-2 place-items center">
+                  <div v-for="(item, index) in roleSelection" :key="index" class="flex flex-col items-center">
+                    <div
+                      :class="{
+                        'cursor-pointer': item.state == 'selectable',
+                        'flex flex-col items-center justify-center': true,
+                      }"
+                      @click="handleChangeRole(index)"
+                    >
+                      <img alt="" :src="item.images" width="100" height="100" />
+                      <div v-if="item.state == 'checked'" class="grid grid-cols-1 place-items-center">
+                        <Lucide icon="Check" class="text-success" />
+                      </div>
+                      <Button
+                        v-else-if="item.state == 'selectable'"
+                        type="submit"
+                        variant="primary"
+                        size="sm"
+                        class="w-28 shadow-md"
+                      >
+                        {{ t('components.buttons.activate') }}
+                      </Button>
+                      <span v-else>&nbsp;</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </template>
+        <template #card-items-5>
+          <div class="p-5">
+            <form id="updatePasswordForm" @submit.prevent="onSubmitUpdatePassword">
+              <div class="pb-4">
+                <FormLabel
+                  :class="{
+                    'text-danger': updatePasswordForm.invalid('current_password'),
+                  }"
+                >
+                  {{ t('views.profile.fields.change_password.current_password') }}
+                </FormLabel>
+                <FormInput
+                  v-model="updatePasswordForm.current_password"
+                  type="password"
+                  :class="{
+                    'border-danger': updatePasswordForm.invalid('current_password'),
+                  }"
+                  :placeholder="t('views.profile.fields.change_password.current_password')"
+                  @change="updatePasswordForm.validate('current_password')"
+                />
+                <FormErrorMessages :messages="updatePasswordForm.errors.current_password" />
+              </div>
+              <div class="pb-4">
+                <FormLabel
+                  :class="{
+                    'text-danger': updatePasswordForm.invalid('password'),
+                  }"
+                >
+                  {{ t('views.profile.fields.change_password.password') }}
+                </FormLabel>
+                <FormInput
+                  v-model="updatePasswordForm.password"
+                  type="password"
+                  :class="{
+                    'border-danger': updatePasswordForm.invalid('password'),
+                  }"
+                  :placeholder="t('views.profile.fields.change_password.password')"
+                />
+                <FormErrorMessages :messages="updatePasswordForm.errors.password" />
+              </div>
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.change_password.password_confirmation') }}
+                </FormLabel>
+                <FormInput
+                  v-model="updatePasswordForm.password_confirmation"
+                  type="password"
+                  :placeholder="t('views.profile.fields.change_password.password_confirmation')"
+                />
+              </div>
+              <div>
+                <Button
+                  type="submit"
+                  size="sm"
+                  href="#"
+                  variant="primary"
+                  class="w-28 shadow-md"
+                  :disabled="updateUserProfileForm.validating || updateUserProfileForm.hasErrors"
+                >
+                  <Lucide v-if="updateUserProfileForm.validating" icon="Loader" class="animate-spin" />
+                  <template v-else>
+                    {{ t('components.buttons.update') }}
+                  </template>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </template>
+        <template #card-items-6>
+          <div class="p-5">
+            <form id="updateTokenForm" @submit.prevent="onSubmitUpdateToken">
+              <div class="pb-4">
+                <FormLabel>
+                  {{ t('views.profile.fields.api_token.total_token_generated') }}&nbsp;:&nbsp;{{
+                    userContext.personal_access_tokens
+                  }}
+                </FormLabel>
+              </div>
+              <input id="resetToken" type="hidden" v-model="updateTokensForm.reset_tokens" />
+              <div>
+                <Button
+                  type="submit"
+                  size="sm"
+                  href="#"
+                  variant="primary"
+                  class="w-28 shadow-md"
+                  :disabled="updateTokensForm.validating || updateTokensForm.hasErrors"
+                >
+                  <Lucide v-if="updateTokensForm.validating" icon="Loader" class="animate-spin" />
+                  <template v-else>
+                    {{ t('components.buttons.reset') }}
+                  </template>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </template>
+        <template #card-items-7>
+          <div class="p-5">
+            <div class="pb-4">
+              <FormLabel>
+                {{ t('views.profile.fields.2fa.status') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input type="checkbox" @change="setTwoFactor" v-model="twoFactorAuthStatus" />
+              </FormSwitch>
+            </div>
+            <div v-if="showQRCodeField" class="pb-4">
+              <img v-html="qrCode.svg" alt="QR Code" />
+              <br />
+              {{ t('views.profile.fields.2fa.qr-code_description_1') }}
+              <br />
+              {{ t('views.profile.fields.2fa.qr-code_description_2') }}
+              <br />
+              <img :src="googlePlayBadge" alt="Google Play" width="120" height="120" />
+              <br />
+              {{ t('views.profile.fields.2fa.confirm_2fa_auth_description_1') }}
+              <br />
+              {{ t('views.profile.fields.2fa.confirm_2fa_auth_description_2') }}
+              <br />
+              <br />
+              <FormLabel>
+                {{ t('views.profile.fields.2fa.confirm_2fa_auth') }}
+              </FormLabel>
+              <FormInput v-model="twoFactorCode" />
+              <FormErrorMessages v-if="twoFactorCodeErrorText != ''" :messages="twoFactorCodeErrorText" />
+              <br />
+              <Button
+                type="button"
+                variant="primary"
+                @click="
+                  () => {
+                    doConfirmTwoFactorAuthentication();
+                  }
+                "
+                class="mt-2 w-24"
+              >
+                {{ t('components.buttons.submit') }}
+              </Button>
+            </div>
+            <div v-if="showRecoveryCodesField" class="pb-4">
+              {{ t('views.profile.fields.2fa.recovery-codes_description_1') }}
+              <br />
+              {{ t('views.profile.fields.2fa.recovery-codes_description_2') }}
+              <br />
+              <br />
+              <FormLabel>
+                {{ t('views.profile.fields.2fa.recovery-codes') }}
+              </FormLabel>
+              <div>
+                <template v-for="(rc, rcIdx) in twoFactorRecoveryCodes">
+                  <span class="italic">{{ rcIdx + 1 }}. {{ rc }}</span>
+                  <br />
+                </template>
+              </div>
+            </div>
+            <div v-if="showSecretKeyField" class="pb-4">
+              {{ t('views.profile.fields.2fa.secret-key_description_1') }}
+              <br />
+              {{ t('views.profile.fields.2fa.secret-key_description_2') }}
+              <br />
+              <br />
+              <FormLabel>
+                {{ t('views.profile.fields.2fa.secret-key') }}
+              </FormLabel>
+              <div class="italic">
+                {{ twoFactorSecretKey }}
+              </div>
+            </div>
+            <Dialog
+              staticBackdrop
+              :open="showConfirmPasswordDialog"
+              @close="
+                () => {
+                  closeConfirmPasswordDialog();
+                }
+              "
+            >
+              <Dialog.Panel class="px-5 py-10">
+                <div class="text-center">
+                  <div class="mb-5">
+                    <FormLabel>
+                      {{ t('views.profile.fields.2fa.confirm_password') }}
+                    </FormLabel>
+                    <FormInput
+                      v-model="confirmPasswordText"
+                      type="password"
+                      :placeholder="t('views.profile.fields.2fa.confirm_password')"
+                    />
+                    <FormErrorMessages v-if="confirmPasswordErrorText != ''" :messages="confirmPasswordErrorText" />
+                  </div>
+                  <div class="flex gap-2 justify-center items-center">
+                    <Button
+                      type="button"
+                      variant="primary"
+                      @click="
+                        () => {
+                          submitConfirmPassword();
+                        }
+                      "
+                      class="w-24"
+                    >
+                      {{ t('components.buttons.submit') }}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="primary"
+                      @click="
+                        () => {
+                          closeConfirmPasswordDialog();
+                        }
+                      "
+                      class="w-24"
+                    >
+                      {{ t('components.buttons.cancel') }}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Dialog>
+          </div>
+        </template>
+      </TwoColumnsLayout>
+    </LoadingOverlay>
+  </div>
+</template>
diff --git a/web/src/pages/debt-category/DebtCategoryCreate.vue b/web/src/pages/debt-category/DebtCategoryCreate.vue
new file mode 100644
index 000000000..789e5fe24
--- /dev/null
+++ b/web/src/pages/debt-category/DebtCategoryCreate.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import DebtCategoryService from '@/services/DebtCategoryService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const debtCategoryService = new DebtCategoryService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.debt_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.debt_category.field_groups.debt_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const debtCategoryForm = debtCategoryService.useDebtCategoryCreateForm();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  debtCategoryForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('DEBT_CATEGORY_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+// #endregion
+
+// #region Methods - DebtCategory
+const setCompanyIdData = () => {
+  debtCategoryForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('DEBT_CATEGORY_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  if (!data.code) {
+    data.code = '_AUTO_';
+  }
+
+  if (data.sequence === undefined || data.sequence === null) {
+    data.sequence = 0;
+  }
+
+  debtCategoryForm.setData(data);
+};
+
+const setCode = () => {
+  debtCategoryForm.forgetError('code');
+  if (debtCategoryForm.code == '_AUTO_') {
+    debtCategoryForm.setData({ code: '' });
+  } else {
+    debtCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  debtCategoryForm.reset();
+  debtCategoryForm.setErrors({});
+  debtCategoryForm.setData({
+    code: '_AUTO_',
+    name: '',
+    sequence: 0,
+  });
+  setCompanyIdData();
+};
+
+const onSubmit = async () => {
+  if (debtCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(debtCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await debtCategoryForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-debt-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="debtCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="debtCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': debtCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.debt_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="debtCategoryForm.code"
+                :class="{
+                  'border-danger': debtCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.debt_category.fields.code')"
+                @set-auto="setCode"
+                @change="debtCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="debtCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': debtCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.debt_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="debtCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': debtCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.debt_category.fields.name')"
+                @change="debtCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="debtCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': debtCategoryForm.invalid('sequence'),
+                }"
+              >
+                {{ t('views.debt_category.fields.sequence') }}
+              </FormLabel>
+              <FormInput
+                id="sequence"
+                v-model.number="debtCategoryForm.sequence"
+                type="number"
+                min="0"
+                :class="{
+                  'border-danger': debtCategoryForm.invalid('sequence'),
+                }"
+                :placeholder="t('views.debt_category.fields.sequence')"
+                @change="debtCategoryForm.validate('sequence')"
+              />
+              <FormErrorMessages :messages="debtCategoryForm.errors.sequence" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="debtCategoryForm.validating || debtCategoryForm.hasErrors"
+          >
+            <Lucide v-if="debtCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/debt-category/DebtCategoryEdit.vue b/web/src/pages/debt-category/DebtCategoryEdit.vue
new file mode 100644
index 000000000..37bf8ebb4
--- /dev/null
+++ b/web/src/pages/debt-category/DebtCategoryEdit.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import DebtCategoryService from '@/services/DebtCategoryService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode } from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const debtCategoryService = new DebtCategoryService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.debt_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.debt_category.field_groups.debt_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const debtCategoryForm = debtCategoryService.useDebtCategoryEditForm(route.params.ulid.toString());
+const companyCode = ref<string>('');
+const companyName = ref<string>('');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+// #endregion
+
+// #region Methods - DebtCategory
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await debtCategoryService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    companyCode.value = result.data.company?.code ?? '';
+    companyName.value = result.data.company?.name ?? '';
+
+    debtCategoryForm.setData({
+      company_id: result.data.company?.id ?? '',
+      code: result.data.code,
+      name: result.data.name,
+      sequence: result.data.sequence,
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-debt-category-list' });
+  }
+};
+
+const setCode = () => {
+  debtCategoryForm.forgetError('code');
+  if (debtCategoryForm.code == '_AUTO_') {
+    debtCategoryForm.setData({ code: '' });
+  } else {
+    debtCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  debtCategoryForm.reset();
+  debtCategoryForm.setErrors({});
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (debtCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(debtCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await debtCategoryForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-debt-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="debtCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ companyCode }}
+            <br />
+            {{ companyName }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="debtCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': debtCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.debt_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="debtCategoryForm.code"
+                :class="{
+                  'border-danger': debtCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.debt_category.fields.code')"
+                @set-auto="setCode"
+                @change="debtCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="debtCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': debtCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.debt_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="debtCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': debtCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.debt_category.fields.name')"
+                @change="debtCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="debtCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': debtCategoryForm.invalid('sequence'),
+                }"
+              >
+                {{ t('views.debt_category.fields.sequence') }}
+              </FormLabel>
+              <FormInput
+                id="sequence"
+                v-model.number="debtCategoryForm.sequence"
+                type="number"
+                min="0"
+                :class="{
+                  'border-danger': debtCategoryForm.invalid('sequence'),
+                }"
+                :placeholder="t('views.debt_category.fields.sequence')"
+                @change="debtCategoryForm.validate('sequence')"
+              />
+              <FormErrorMessages :messages="debtCategoryForm.errors.sequence" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="debtCategoryForm.validating || debtCategoryForm.hasErrors"
+          >
+            <Lucide v-if="debtCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/debt-category/DebtCategoryIndex.vue b/web/src/pages/debt-category/DebtCategoryIndex.vue
new file mode 100644
index 000000000..5b8b73ec5
--- /dev/null
+++ b/web/src/pages/debt-category/DebtCategoryIndex.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.debt_category.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const debtCategoryNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[debtCategoryNotification]', (el: NotificationElement) => {
+  debtCategoryNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-debt-category-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-debt-category-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.debt_category.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.debt_category.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.debt_category.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (debtCategoryNotification.value) {
+    debtCategoryNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('DEBT_CATEGORY_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('DEBT_CATEGORY_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="debtCategoryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/debt-category/DebtCategoryList.vue b/web/src/pages/debt-category/DebtCategoryList.vue
new file mode 100644
index 000000000..6b920c30e
--- /dev/null
+++ b/web/src/pages/debt-category/DebtCategoryList.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import { Dialog } from '@/components/Base/Headless';
+import { useRouter } from 'vue-router';
+import DebtCategoryService from '@/services/DebtCategoryService';
+import { DebtCategory } from '@/types/models/DebtCategory';
+import { Resource } from '@/types/resources/Resource';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { NotificationData } from '@/types/models/NotificationData';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const debtCategoryService = new DebtCategoryService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+// #endregion
+
+// #region Refs
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | null>(null);
+const debtCategoryLists = ref<Resource<Array<DebtCategory>> | null>({
+  data: [],
+});
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getDebtCategories('', true);
+});
+// #endregion
+
+// #region Methods
+const getDebtCategories = async (search: string, refresh: boolean) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<Resource<Array<DebtCategory>> | null> = await debtCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh,
+    limit: 1000,
+  });
+
+  if (result.success && result.data) {
+    debtCategoryLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async () => {
+  await getDebtCategories('', false);
+};
+
+const viewSelected = (itemId: string) => {
+  if (expandDetail.value === itemId) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = itemId;
+  }
+};
+
+const editSelected = (item: DebtCategory) => {
+  router.push({
+    name: 'side-menu-debt-category-edit',
+    params: { ulid: item.ulid },
+  });
+};
+
+const deleteSelected = (item: DebtCategory) => {
+  deleteUlid.value = item.ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<boolean | null> = await debtCategoryService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getDebtCategories('', true);
+    showNotification(
+      t('views.debt_category.alert.delete_debt_category.title'),
+      t('views.debt_category.alert.delete_debt_category.content'),
+    );
+  } else {
+    const alertList = result.errors ?? convertErrorTypeToAlertListType({ message: result.message });
+    showAlertPlaceholder('danger', result.message ?? '', alertList);
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.debt_category.table.title')"
+    :enable-search="false"
+    :can-print="true"
+    :can-export="true"
+    :pagination="null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.debt_category.fields.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.debt_category.fields.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.debt_category.fields.sequence') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="debtCategoryLists !== null">
+          <template v-if="debtCategoryLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="4">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-else v-for="item in debtCategoryLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>
+                <div class="font-medium">{{ item.code }}</div>
+              </Table.Td>
+              <Table.Td>
+                <span>{{ item.name }}</span>
+              </Table.Td>
+              <Table.Td>{{ item.sequence }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(item.ulid)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(item as DebtCategory)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(item as DebtCategory)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== item.id,
+              }"
+            >
+              <Table.Td colspan="3">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.debt_category.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.debt_category.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.debt_category.fields.sequence') }}
+                  </div>
+                  <div class="flex-1">{{ item.sequence }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="mr-1 w-24"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/debt-creditor/DebtCreditorCreate.vue b/web/src/pages/debt-creditor/DebtCreditorCreate.vue
new file mode 100644
index 000000000..5db2bd493
--- /dev/null
+++ b/web/src/pages/debt-creditor/DebtCreditorCreate.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import DebtCreditorService from '@/services/DebtCreditorService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { FormErrorMessages, FormInput, FormInputCode, FormLabel, FormTextarea } from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const debtCreditorService = new DebtCreditorService();
+const cacheService = new CacheService();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.debt_creditor.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.debt_creditor.field_groups.debt_creditor_data', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const debtCreditorForm = debtCreditorService.useDebtCreditorCreateForm();
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(() => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+});
+
+const setCompanyIdData = () => {
+  debtCreditorForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('DEBT_CREDITOR_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  debtCreditorForm.setData(data);
+};
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Expanded ? CardState.Collapsed : CardState.Expanded;
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (debtCreditorForm.hasErrors) {
+    const firstErrorKey = Object.keys(debtCreditorForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await debtCreditorForm
+    .submit()
+    .then(() => {
+      resetForm();
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-debt-creditor-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  debtCreditorForm.reset();
+  debtCreditorForm.setErrors({});
+  setCompanyIdData();
+};
+
+const setCode = () => {
+  debtCreditorForm.forgetError('code');
+  debtCreditorForm.setData({
+    code: debtCreditorForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  debtCreditorForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('DEBT_CREDITOR_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="debtCreditorForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="debtCreditorForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': debtCreditorForm.invalid('code') }">
+              {{ t('views.debt_creditor.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              id="code"
+              v-model="debtCreditorForm.code"
+              type="text"
+              :class="{ 'border-danger': debtCreditorForm.invalid('code') }"
+              :placeholder="t('views.debt_creditor.fields.code')"
+              @set-auto="setCode"
+              @change="debtCreditorForm.validate('code')"
+            />
+            <FormErrorMessages :messages="debtCreditorForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': debtCreditorForm.invalid('name') }">
+              {{ t('views.debt_creditor.fields.name') }}
+            </FormLabel>
+            <FormInput
+              id="name"
+              v-model="debtCreditorForm.name"
+              type="text"
+              :class="{ 'border-danger': debtCreditorForm.invalid('name') }"
+              :placeholder="t('views.debt_creditor.fields.name')"
+              @change="debtCreditorForm.validate('name')"
+            />
+            <FormErrorMessages :messages="debtCreditorForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': debtCreditorForm.invalid('remarks') }">
+              {{ t('views.debt_creditor.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              id="remarks"
+              v-model="debtCreditorForm.remarks"
+              type="text"
+              :class="{ 'border-danger': debtCreditorForm.invalid('remarks') }"
+              :placeholder="t('views.debt_creditor.fields.remarks')"
+              rows="3"
+              @change="debtCreditorForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="debtCreditorForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="debtCreditorForm.validating || debtCreditorForm.hasErrors"
+          >
+            <Lucide v-if="debtCreditorForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/debt-creditor/DebtCreditorEdit.vue b/web/src/pages/debt-creditor/DebtCreditorEdit.vue
new file mode 100644
index 000000000..b56399b1a
--- /dev/null
+++ b/web/src/pages/debt-creditor/DebtCreditorEdit.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import DebtCreditorService from '@/services/DebtCreditorService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { FormErrorMessages, FormInput, FormInputCode, FormLabel, FormTextarea } from '@/components/Base/Form';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { DebtCreditor } from '@/types/models/DebtCreditor';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const debtCreditorService = new DebtCreditorService();
+const cacheService = new CacheService();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.debt_creditor.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.debt_creditor.field_groups.debt_creditor_data', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const debtCreditorForm = debtCreditorService.useDebtCreditorEditForm(route.params.ulid as string);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData(route.params.ulid as string);
+});
+
+const loadData = async (ulid: string) => {
+  emits('loading-state', true);
+  const result: ServiceResponse<DebtCreditor | null> = await debtCreditorService.read(ulid);
+
+  if (result.success && result.data) {
+    debtCreditorForm.setData({
+      company_id: result.data.company.id,
+      code: result.data.code,
+      name: result.data.name,
+      remarks: result.data.remarks ?? '',
+    });
+  } else {
+    router.push({ name: 'side-menu-debt-creditor-list' });
+  }
+
+  emits('loading-state', false);
+};
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Expanded ? CardState.Collapsed : CardState.Expanded;
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (debtCreditorForm.hasErrors) {
+    const firstErrorKey = Object.keys(debtCreditorForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await debtCreditorForm
+    .submit()
+    .then(() => {
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-debt-creditor-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  debtCreditorForm.reset();
+  debtCreditorForm.setErrors({});
+  await loadData(route.params.ulid as string);
+};
+
+const setCode = () => {
+  debtCreditorForm.forgetError('code');
+  debtCreditorForm.setData({
+    code: debtCreditorForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  debtCreditorForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('DEBT_CREDITOR_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="debtCreditorForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="debtCreditorForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': debtCreditorForm.invalid('code') }">
+              {{ t('views.debt_creditor.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              id="code"
+              v-model="debtCreditorForm.code"
+              type="text"
+              :class="{ 'border-danger': debtCreditorForm.invalid('code') }"
+              :placeholder="t('views.debt_creditor.fields.code')"
+              @set-auto="setCode"
+              @change="debtCreditorForm.validate('code')"
+            />
+            <FormErrorMessages :messages="debtCreditorForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': debtCreditorForm.invalid('name') }">
+              {{ t('views.debt_creditor.fields.name') }}
+            </FormLabel>
+            <FormInput
+              id="name"
+              v-model="debtCreditorForm.name"
+              type="text"
+              :class="{ 'border-danger': debtCreditorForm.invalid('name') }"
+              :placeholder="t('views.debt_creditor.fields.name')"
+              @change="debtCreditorForm.validate('name')"
+            />
+            <FormErrorMessages :messages="debtCreditorForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': debtCreditorForm.invalid('remarks') }">
+              {{ t('views.debt_creditor.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              id="remarks"
+              v-model="debtCreditorForm.remarks"
+              type="text"
+              :class="{ 'border-danger': debtCreditorForm.invalid('remarks') }"
+              :placeholder="t('views.debt_creditor.fields.remarks')"
+              rows="3"
+              @change="debtCreditorForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="debtCreditorForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="debtCreditorForm.validating || debtCreditorForm.hasErrors"
+          >
+            <Lucide v-if="debtCreditorForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/debt-creditor/DebtCreditorIndex.vue b/web/src/pages/debt-creditor/DebtCreditorIndex.vue
new file mode 100644
index 000000000..5b11bc4dc
--- /dev/null
+++ b/web/src/pages/debt-creditor/DebtCreditorIndex.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.debt_creditor.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const debtCreditorNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[debtCreditorNotification]', (el: NotificationElement) => {
+    debtCreditorNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-debt-creditor-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-debt-creditor-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.debt_creditor.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.debt_creditor.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.debt_creditor.page_title';
+        break;
+    }
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('DEBT_CREDITOR_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('DEBT_CREDITOR_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (debtCreditorNotification.value) debtCreditorNotification.value.showToast();
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="debtCreditorNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/debt-creditor/DebtCreditorList.vue b/web/src/pages/debt-creditor/DebtCreditorList.vue
new file mode 100644
index 000000000..afac884d3
--- /dev/null
+++ b/web/src/pages/debt-creditor/DebtCreditorList.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import DebtCreditorService from '@/services/DebtCreditorService';
+  import { DebtCreditor } from '@/types/models/DebtCreditor';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Resource } from '@/types/resources/Resource';
+  import { DebtCreditorReadAnyPaginateRequest } from '@/types/services/debt-creditor/DebtCreditorRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const debtCreditorService = new DebtCreditorService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const debtCreditorLists = ref<Collection<Array<DebtCreditor>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getDebtCreditors('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getDebtCreditors = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    const company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: DebtCreditorReadAnyPaginateRequest = {
+      with_trashed: false,
+      company_id: company_id,
+      search: search,
+      include_id: undefined,
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    const result: ServiceResponse<Collection<Array<DebtCreditor>> | Resource<Array<DebtCreditor>> | null> =
+      await debtCreditorService.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      debtCreditorLists.value = result.data as Collection<Array<DebtCreditor>>;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getDebtCreditors(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!debtCreditorLists.value) return;
+
+    let ulid = debtCreditorLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-debt-creditor-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!debtCreditorLists.value) return;
+
+    let itemUlid = debtCreditorLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await debtCreditorService.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getDebtCreditors('', true, 1, 10);
+      showNotification(
+        t('views.debt_creditor.alert.delete_debt_creditor.title'),
+        t('views.debt_creditor.alert.delete_debt_creditor.content'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.debt_creditor.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="debtCreditorLists ? debtCreditorLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.debt_creditor.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.debt_creditor.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.debt_creditor.table.cols.remarks') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="debtCreditorLists !== null">
+          <template v-if="debtCreditorLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in debtCreditorLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>{{ item.remarks }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.debt_creditor.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.debt_creditor.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.debt_creditor.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/debt/DebtCreate.vue b/web/src/pages/debt/DebtCreate.vue
new file mode 100644
index 000000000..f49a006d9
--- /dev/null
+++ b/web/src/pages/debt/DebtCreate.vue
@@ -0,0 +1,875 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import DebtService from '@/services/DebtService';
+import DebtCategoryService from '@/services/DebtCategoryService';
+import DebtCreditorService from '@/services/DebtCreditorService';
+import SupplierService from '@/services/SupplierService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DebtCategory } from '@/types/models/DebtCategory';
+import type { DebtCreditor } from '@/types/models/DebtCreditor';
+import type { Supplier } from '@/types/models/Supplier';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+type DebtPaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+type PartyType = 'creditor' | 'supplier';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const debtService = new DebtService();
+const debtCategoryService = new DebtCategoryService();
+const debtCreditorService = new DebtCreditorService();
+const supplierService = new SupplierService();
+const cashAccountService = new CashAccountService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.debt.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.debt.field_groups.debt_data', state: CardState.Expanded },
+  { title: 'views.debt.field_groups.payments', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const debtForm = debtService.useDebtCreateForm();
+const partyType = ref<PartyType>('creditor');
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const creditorDDL = ref<Array<DropDownOption> | null>(null);
+const creditorSearch = ref<string>('');
+const creditorOptions = computed(() =>
+  (creditorDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref<string>('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const debtPaymentsForm = computed<DebtPaymentFormItem[]>(
+  () => debtForm.payments as DebtPaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const selectedPartyField = computed(() => (partyType.value === 'creditor' ? 'creditor_id' : 'supplier_id'));
+const selectedPartyOptions = computed(() =>
+  partyType.value === 'creditor' ? creditorOptions.value : supplierOptions.value,
+);
+const selectedPartyLabel = computed(() =>
+  partyType.value === 'creditor'
+    ? t('views.debt.fields.creditor')
+    : t('views.debt.fields.supplier'),
+);
+const partySearch = computed({
+  get: () => (partyType.value === 'creditor' ? creditorSearch.value : supplierSearch.value),
+  set: (value: string) => {
+    if (partyType.value === 'creditor') {
+      creditorSearch.value = value;
+      return;
+    }
+
+    supplierSearch.value = value;
+  },
+});
+const isSupplierParty = computed({
+  get: () => partyType.value === 'supplier',
+  set: (value: boolean) => {
+    setPartyType(value ? 'supplier' : 'creditor');
+  },
+});
+
+const amountTotalPreview = computed(
+  () => Number(debtForm.direct_amount_received ?? 0) + Number(debtForm.opening_amount_due ?? 0),
+);
+const amountPaidByCashAccountPreview = computed(() =>
+  debtPaymentsForm.value.reduce((total, payment) => total + Number(payment.amount ?? 0), 0),
+);
+const amountPaidByStockAdjustmentPreview = computed(() => 0);
+const amountDuePreview = computed(() =>
+  Math.max(
+    0,
+    amountTotalPreview.value
+      - amountPaidByCashAccountPreview.value
+      - amountPaidByStockAdjustmentPreview.value,
+  ),
+);
+const invalidDebtField = (field: string) => debtForm.invalid(field as any);
+const validateDebtField = (field: string) => debtForm.validate(field as any);
+const normalizeErrorMessages = (messages: string | string[] | undefined): string | undefined =>
+  Array.isArray(messages) ? messages.join(' ') : messages;
+const getDebtFieldErrors = (field: string) =>
+  normalizeErrorMessages(
+    (debtForm.errors as Record<string, string | string[] | undefined>)[field],
+  );
+const clearTopAlertPlaceholder = () => {
+  showAlertPlaceholder('hidden', '', null);
+};
+const clearStaleValidationErrors = (fields: string[]) => {
+  fields.forEach((field) => debtForm.forgetError(field as any));
+  clearTopAlertPlaceholder();
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  syncPartyTypeFromForm();
+  setLocationData();
+
+  await Promise.all([
+    loadCategoryDDL(),
+    loadCreditorDDL(),
+    loadSupplierDDL(),
+    loadCashAccountDDL(),
+  ]);
+});
+
+const setLocationData = () => {
+  debtForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('DEBT_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  debtForm.setData(data);
+};
+
+const syncPartyTypeFromForm = () => {
+  if (debtForm.supplier_id && !debtForm.creditor_id) {
+    partyType.value = 'supplier';
+    return;
+  }
+
+  partyType.value = 'creditor';
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await debtCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: debtForm.category_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: DebtCategory) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCreditorDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await debtCreditorService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: debtForm.creditor_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    creditorDDL.value = result.data.data.map((item: DebtCreditor) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: debtForm.supplier_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: Supplier) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: debtForm.cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const setPartyType = (value: PartyType) => {
+  if (partyType.value === value) return;
+
+  partyType.value = value;
+
+  if (value === 'creditor') {
+    debtForm.setData({ supplier_id: '' });
+    clearStaleValidationErrors(['supplier_id', 'form']);
+    supplierSearch.value = '';
+    return;
+  }
+
+  debtForm.setData({ creditor_id: '' });
+  clearStaleValidationErrors(['creditor_id', 'form']);
+  creditorSearch.value = '';
+};
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  debtForm.forgetError('code');
+  debtForm.setData({
+    code: debtForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const clearCategory = () => {
+  debtForm.setData({ category_id: '' });
+  clearStaleValidationErrors(['category_id', 'form']);
+};
+
+const clearCashAccount = () => {
+  debtForm.setData({ cash_account_id: '' });
+  debtForm.forgetError('cash_account_id');
+};
+
+const clearParty = () => {
+  clearStaleValidationErrors([selectedPartyField.value, 'form']);
+
+  if (partyType.value === 'creditor') {
+    debtForm.setData({ creditor_id: '' });
+    return;
+  }
+
+  debtForm.setData({ supplier_id: '' });
+};
+
+const handlePartySearch = async (search: string) => {
+  if (partyType.value === 'creditor') {
+    await loadCreditorDDL(search);
+    return;
+  }
+
+  await loadSupplierDDL(search);
+};
+
+const setPaymentCode = (index: number) => {
+  debtForm.forgetError(`payments.${index}.code` as any);
+  debtPaymentsForm.value[index].code =
+    debtPaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = debtPaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validateDebtField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  debtPaymentsForm.value.push({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+
+  Object.keys(debtForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      debtForm.forgetError(key as any);
+    }
+  });
+};
+
+const removePayment = (index: number) => {
+  debtPaymentsForm.value.splice(index, 1);
+
+  Object.keys(debtForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      debtForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  emits('loading-state', true);
+
+  await debtForm
+    .submit()
+    .then(() => {
+      cacheService.removeLastEntity('DEBT_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-debt-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  debtForm.reset();
+  debtForm.setErrors({});
+  debtForm.setData({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    creditor_id: '',
+    supplier_id: '',
+    cash_account_id: '',
+    direct_amount_received: 0,
+    opening_amount_due: 0,
+    due_days: 0,
+    remarks: '',
+    payments: [],
+  });
+  partyType.value = 'creditor';
+  categorySearch.value = '';
+  creditorSearch.value = '';
+  supplierSearch.value = '';
+  cashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+  setLocationData();
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  debtForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('DEBT_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+watch(
+  () => debtForm.category_id,
+  () => {
+    clearStaleValidationErrors(['category_id']);
+  },
+);
+
+watch(
+  () => [debtForm.direct_amount_received, debtForm.opening_amount_due],
+  () => {
+    clearStaleValidationErrors(['form']);
+  },
+);
+
+watch(
+  () => [debtForm.creditor_id, debtForm.supplier_id],
+  () => {
+    clearStaleValidationErrors(['form']);
+  },
+);
+</script>
+
+<template>
+  <form id="debtForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="debtForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="debtForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('code') }">
+                {{ t('views.debt.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="debtForm.code"
+                :class="{ 'border-danger': debtForm.invalid('code') }"
+                :placeholder="t('views.debt.fields.code')"
+                @set-auto="setCode"
+                @change="debtForm.validate('code')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('date') }">
+                {{ t('views.debt.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                id="date"
+                v-model="debtForm.date"
+                :class="{ 'border-danger': debtForm.invalid('date') }"
+                :placeholder="t('views.debt.fields.date')"
+                @change="debtForm.validate('date')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('category_id') }">
+                {{ t('views.debt.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="debtForm.category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': debtForm.invalid('category_id') }"
+                @change="debtForm.validate('category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="debtForm.errors.category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>
+                {{ t('views.debt.fields.party_type') }}
+              </FormLabel>
+              <div class="flex items-center gap-3 rounded-md border border-slate-200 px-3 py-2 dark:border-darkmode-400">
+                <span
+                  class="text-sm"
+                  :class="partyType === 'creditor' ? 'font-medium text-primary' : 'text-slate-500'"
+                >
+                  {{ t('views.debt.party_types.creditor') }}
+                </span>
+                <FormSwitch>
+                  <FormSwitch.Input v-model="isSupplierParty" type="checkbox" />
+                </FormSwitch>
+                <span
+                  class="text-sm"
+                  :class="partyType === 'supplier' ? 'font-medium text-primary' : 'text-slate-500'"
+                >
+                  {{ t('views.debt.party_types.supplier') }}
+                </span>
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-8">
+              <FormLabel :class="{ 'text-danger': invalidDebtField(selectedPartyField) }">
+                {{ selectedPartyLabel }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="debtForm[selectedPartyField]"
+                v-model:search="partySearch"
+                :options="selectedPartyOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidDebtField(selectedPartyField) }"
+                @change="validateDebtField(selectedPartyField)"
+                @search="handlePartySearch"
+                @clear="clearParty"
+              />
+              <FormErrorMessages :messages="getDebtFieldErrors(selectedPartyField)" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('cash_account_id') }">
+                {{ t('views.debt.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="debtForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': debtForm.invalid('cash_account_id') }"
+                @change="debtForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="debtForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('direct_amount_received') }">
+                {{ t('views.debt.fields.direct_amount_received') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="direct_amount_received"
+                v-model="debtForm.direct_amount_received"
+                :allow-negative="false"
+                :class="{ 'border-danger': debtForm.invalid('direct_amount_received') }"
+                :placeholder="t('views.debt.fields.direct_amount_received')"
+                @change="debtForm.validate('direct_amount_received')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.direct_amount_received" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('opening_amount_due') }">
+                {{ t('views.debt.fields.opening_amount_due') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="opening_amount_due"
+                v-model="debtForm.opening_amount_due"
+                :allow-negative="false"
+                :class="{ 'border-danger': debtForm.invalid('opening_amount_due') }"
+                :placeholder="t('views.debt.fields.opening_amount_due')"
+                @change="debtForm.validate('opening_amount_due')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.opening_amount_due" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('due_days') }">
+                {{ t('views.debt.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="debtForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': debtForm.invalid('due_days') }"
+                :placeholder="t('views.debt.fields.due_days')"
+                @change="debtForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.debt.fields.amount_total') }}</FormLabel>
+              <FormInputCurrency :model-value="amountTotalPreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.debt.fields.amount_due') }}</FormLabel>
+              <FormInputCurrency :model-value="amountDuePreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_paid_by_cash_account') }}</FormLabel>
+              <FormInputCurrency :model-value="amountPaidByCashAccountPreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_paid_by_stock_adjustment') }}</FormLabel>
+              <FormInputCurrency
+                :model-value="amountPaidByStockAdjustmentPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('remarks') }">
+                {{ t('views.debt.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="debtForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': debtForm.invalid('remarks') }"
+                :placeholder="t('views.debt.fields.remarks')"
+                @change="debtForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_total') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountTotalPreview) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_paid_by_cash_account') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountPaidByCashAccountPreview) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_due') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountDuePreview) }}
+              </div>
+            </div>
+          </div>
+
+          <FormErrorMessages :messages="(debtForm.errors as any).payments" />
+
+          <div v-if="debtPaymentsForm.length === 0" class="text-right text-sm text-slate-500">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div
+              v-for="(payment, index) in debtPaymentsForm"
+              :key="`debt-payment-${index}`"
+              class="rounded-md border border-slate-200 p-4 dark:border-darkmode-400"
+            >
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.code`) }">
+                    {{ t('views.debt.fields.payment_code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidDebtField(`payments.${index}.code`) }"
+                    :placeholder="t('views.debt.fields.payment_code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validateDebtField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.date`) }">
+                    {{ t('views.debt.fields.payment_date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidDebtField(`payments.${index}.date`) }"
+                    :placeholder="t('views.debt.fields.payment_date')"
+                    @change="validateDebtField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.debt.fields.payment_cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="cashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidDebtField(`payments.${index}.cash_account_id`) }"
+                    @change="validateDebtField(`payments.${index}.cash_account_id`)"
+                    @search="loadCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.amount`) }">
+                    {{ t('views.debt.fields.payment_amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="min-w-0 flex-1">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidDebtField(`payments.${index}.amount`) }"
+                        @change="validateDebtField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="flex h-[38px] w-[38px] min-w-0 items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.amount`)" />
+                </div>
+
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.remarks`) }">
+                    {{ t('views.debt.fields.payment_remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidDebtField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.debt.fields.payment_remarks')"
+                    @change="validateDebtField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="debtForm.validating"
+          >
+            <Lucide v-if="debtForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/debt/DebtEdit.vue b/web/src/pages/debt/DebtEdit.vue
new file mode 100644
index 000000000..a12b64574
--- /dev/null
+++ b/web/src/pages/debt/DebtEdit.vue
@@ -0,0 +1,889 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import DebtService from '@/services/DebtService';
+import DebtCategoryService from '@/services/DebtCategoryService';
+import DebtCreditorService from '@/services/DebtCreditorService';
+import SupplierService from '@/services/SupplierService';
+import CashAccountService from '@/services/CashAccountService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { Debt } from '@/types/models/Debt';
+import type { DebtCategory } from '@/types/models/DebtCategory';
+import type { DebtCreditor } from '@/types/models/DebtCreditor';
+import type { Supplier } from '@/types/models/Supplier';
+import type { CashAccount } from '@/types/models/CashAccount';
+import type { DebtPayment } from '@/types/models/DebtPayment';
+
+type DebtPaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+type PartyType = 'creditor' | 'supplier';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const debtService = new DebtService();
+const debtCategoryService = new DebtCategoryService();
+const debtCreditorService = new DebtCreditorService();
+const supplierService = new SupplierService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.debt.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.debt.field_groups.debt_data', state: CardState.Expanded },
+  { title: 'views.debt.field_groups.payments', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const debtForm = debtService.useDebtEditForm(route.params.ulid.toString());
+const debtData = ref<Debt | null>(null);
+const partyType = ref<PartyType>('creditor');
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const creditorDDL = ref<Array<DropDownOption> | null>(null);
+const creditorSearch = ref<string>('');
+const creditorOptions = computed(() =>
+  (creditorDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref<string>('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const debtPaymentsForm = computed<DebtPaymentFormItem[]>(
+  () => debtForm.payments as DebtPaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const selectedPartyField = computed(() => (partyType.value === 'creditor' ? 'creditor_id' : 'supplier_id'));
+const selectedPartyOptions = computed(() =>
+  partyType.value === 'creditor' ? creditorOptions.value : supplierOptions.value,
+);
+const selectedPartyLabel = computed(() =>
+  partyType.value === 'creditor'
+    ? t('views.debt.fields.creditor')
+    : t('views.debt.fields.supplier'),
+);
+const partySearch = computed({
+  get: () => (partyType.value === 'creditor' ? creditorSearch.value : supplierSearch.value),
+  set: (value: string) => {
+    if (partyType.value === 'creditor') {
+      creditorSearch.value = value;
+      return;
+    }
+
+    supplierSearch.value = value;
+  },
+});
+const isSupplierParty = computed({
+  get: () => partyType.value === 'supplier',
+  set: (value: boolean) => {
+    setPartyType(value ? 'supplier' : 'creditor');
+  },
+});
+
+const amountTotalPreview = computed(
+  () => Number(debtForm.direct_amount_received ?? 0) + Number(debtForm.opening_amount_due ?? 0),
+);
+const amountPaidByCashAccountPreview = computed(() =>
+  debtPaymentsForm.value.reduce((total, payment) => total + Number(payment.amount ?? 0), 0),
+);
+const amountPaidByStockAdjustmentPreview = computed(() => 0);
+const amountDuePreview = computed(() =>
+  Math.max(
+    0,
+    amountTotalPreview.value
+      - amountPaidByCashAccountPreview.value
+      - amountPaidByStockAdjustmentPreview.value,
+  ),
+);
+const invalidDebtField = (field: string) => debtForm.invalid(field as any);
+const validateDebtField = (field: string) => debtForm.validate(field as any);
+const normalizeErrorMessages = (messages: string | string[] | undefined): string | undefined =>
+  Array.isArray(messages) ? messages.join(' ') : messages;
+const getDebtFieldErrors = (field: string) =>
+  normalizeErrorMessages(
+    (debtForm.errors as Record<string, string | string[] | undefined>)[field],
+  );
+const clearTopAlertPlaceholder = () => {
+  showAlertPlaceholder('hidden', '', null);
+};
+const clearStaleValidationErrors = (fields: string[]) => {
+  fields.forEach((field) => debtForm.forgetError(field as any));
+  clearTopAlertPlaceholder();
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await Promise.all([
+    loadCategoryDDL(),
+    loadCreditorDDL(),
+    loadSupplierDDL(),
+    loadCashAccountDDL(),
+  ]);
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await debtService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (!result.success || !result.data) {
+    router.push({ name: 'side-menu-debt-list' });
+    return;
+  }
+
+  debtData.value = result.data;
+
+  debtForm.setData({
+    company_id: result.data.company?.id ?? '',
+    branch_id: result.data.branch?.id ?? '',
+    code: result.data.code,
+    date: formatDate(result.data.date, 'YYYY-MM-DD HH:mm:ss'),
+    category_id: result.data.category?.id ?? '',
+    creditor_id: result.data.creditor?.id ?? '',
+    supplier_id: result.data.supplier?.id ?? '',
+    cash_account_id: result.data.cash_account?.id ?? '',
+    direct_amount_received: result.data.direct_amount_received,
+    opening_amount_due: result.data.opening_amount_due,
+    due_days: result.data.due_days,
+    remarks: result.data.remarks ?? '',
+    delete_payment_ids: [],
+    payments: (result.data.payments ?? []).map((payment: DebtPayment) => ({
+      id: payment.id,
+      code: payment.code,
+      date: formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss'),
+      cash_account_id: payment.cash_account?.id ?? '',
+      amount: payment.amount,
+      remarks: payment.remarks ?? '',
+    })),
+  } as any);
+
+  syncPartyTypeFromForm();
+};
+
+const syncPartyTypeFromForm = () => {
+  if (debtForm.supplier_id && !debtForm.creditor_id) {
+    partyType.value = 'supplier';
+    return;
+  }
+
+  partyType.value = 'creditor';
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await debtCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: debtData.value?.category?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: DebtCategory) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCreditorDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await debtCreditorService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: debtData.value?.creditor?.id ?? undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    creditorDDL.value = result.data.data.map((item: DebtCreditor) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: debtData.value?.supplier?.id ?? undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: Supplier) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: debtData.value?.cash_account?.id ?? undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const setPartyType = (value: PartyType) => {
+  if (partyType.value === value) return;
+
+  partyType.value = value;
+
+  if (value === 'creditor') {
+    debtForm.setData({ supplier_id: '' });
+    clearStaleValidationErrors(['supplier_id', 'form']);
+    supplierSearch.value = '';
+    return;
+  }
+
+  debtForm.setData({ creditor_id: '' });
+  clearStaleValidationErrors(['creditor_id', 'form']);
+  creditorSearch.value = '';
+};
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  debtForm.forgetError('code');
+  debtForm.setData({
+    code: debtForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const clearCategory = () => {
+  debtForm.setData({ category_id: '' });
+  clearStaleValidationErrors(['category_id', 'form']);
+};
+
+const clearCashAccount = () => {
+  debtForm.setData({ cash_account_id: '' });
+  debtForm.forgetError('cash_account_id');
+};
+
+const clearParty = () => {
+  clearStaleValidationErrors([selectedPartyField.value, 'form']);
+
+  if (partyType.value === 'creditor') {
+    debtForm.setData({ creditor_id: '' });
+    return;
+  }
+
+  debtForm.setData({ supplier_id: '' });
+};
+
+const handlePartySearch = async (search: string) => {
+  if (partyType.value === 'creditor') {
+    await loadCreditorDDL(search);
+    return;
+  }
+
+  await loadSupplierDDL(search);
+};
+
+const setPaymentCode = (index: number) => {
+  debtForm.forgetError(`payments.${index}.code` as any);
+  debtPaymentsForm.value[index].code =
+    debtPaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = debtPaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validateDebtField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  debtPaymentsForm.value.push({
+    id: null,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+
+  Object.keys(debtForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      debtForm.forgetError(key as any);
+    }
+  });
+};
+
+const removePayment = (index: number) => {
+  const payment = debtPaymentsForm.value[index];
+
+  if (payment?.id && !debtForm.delete_payment_ids.includes(payment.id)) {
+    debtForm.delete_payment_ids.push(payment.id);
+  }
+
+  debtPaymentsForm.value.splice(index, 1);
+
+  Object.keys(debtForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      debtForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  emits('loading-state', true);
+
+  await debtForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-debt-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  debtForm.reset();
+  debtForm.setErrors({});
+  categorySearch.value = '';
+  creditorSearch.value = '';
+  supplierSearch.value = '';
+  cashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+  await loadData();
+  await Promise.all([
+    loadCategoryDDL(),
+    loadCreditorDDL(),
+    loadSupplierDDL(),
+    loadCashAccountDDL(),
+  ]);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  () => debtForm.category_id,
+  () => {
+    clearStaleValidationErrors(['category_id']);
+  },
+);
+
+watch(
+  () => [debtForm.direct_amount_received, debtForm.opening_amount_due],
+  () => {
+    clearStaleValidationErrors(['form']);
+  },
+);
+
+watch(
+  () => [debtForm.creditor_id, debtForm.supplier_id],
+  () => {
+    clearStaleValidationErrors(['form']);
+  },
+);
+</script>
+
+<template>
+  <form id="debtForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="debtForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="debtForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('code') }">
+                {{ t('views.debt.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="debtForm.code"
+                :class="{ 'border-danger': debtForm.invalid('code') }"
+                :placeholder="t('views.debt.fields.code')"
+                @set-auto="setCode"
+                @change="debtForm.validate('code')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('date') }">
+                {{ t('views.debt.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                id="date"
+                v-model="debtForm.date"
+                :class="{ 'border-danger': debtForm.invalid('date') }"
+                :placeholder="t('views.debt.fields.date')"
+                @change="debtForm.validate('date')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('category_id') }">
+                {{ t('views.debt.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="debtForm.category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': debtForm.invalid('category_id') }"
+                @change="debtForm.validate('category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="debtForm.errors.category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>
+                {{ t('views.debt.fields.party_type') }}
+              </FormLabel>
+              <div class="flex items-center gap-3 rounded-md border border-slate-200 px-3 py-2 dark:border-darkmode-400">
+                <span
+                  class="text-sm"
+                  :class="partyType === 'creditor' ? 'font-medium text-primary' : 'text-slate-500'"
+                >
+                  {{ t('views.debt.party_types.creditor') }}
+                </span>
+                <FormSwitch>
+                  <FormSwitch.Input v-model="isSupplierParty" type="checkbox" />
+                </FormSwitch>
+                <span
+                  class="text-sm"
+                  :class="partyType === 'supplier' ? 'font-medium text-primary' : 'text-slate-500'"
+                >
+                  {{ t('views.debt.party_types.supplier') }}
+                </span>
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-8">
+              <FormLabel :class="{ 'text-danger': invalidDebtField(selectedPartyField) }">
+                {{ selectedPartyLabel }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="debtForm[selectedPartyField]"
+                v-model:search="partySearch"
+                :options="selectedPartyOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidDebtField(selectedPartyField) }"
+                @change="validateDebtField(selectedPartyField)"
+                @search="handlePartySearch"
+                @clear="clearParty"
+              />
+              <FormErrorMessages :messages="getDebtFieldErrors(selectedPartyField)" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('cash_account_id') }">
+                {{ t('views.debt.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="debtForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': debtForm.invalid('cash_account_id') }"
+                @change="debtForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="debtForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('direct_amount_received') }">
+                {{ t('views.debt.fields.direct_amount_received') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="direct_amount_received"
+                v-model="debtForm.direct_amount_received"
+                :allow-negative="false"
+                :class="{ 'border-danger': debtForm.invalid('direct_amount_received') }"
+                :placeholder="t('views.debt.fields.direct_amount_received')"
+                @change="debtForm.validate('direct_amount_received')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.direct_amount_received" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('opening_amount_due') }">
+                {{ t('views.debt.fields.opening_amount_due') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="opening_amount_due"
+                v-model="debtForm.opening_amount_due"
+                :allow-negative="false"
+                :class="{ 'border-danger': debtForm.invalid('opening_amount_due') }"
+                :placeholder="t('views.debt.fields.opening_amount_due')"
+                @change="debtForm.validate('opening_amount_due')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.opening_amount_due" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('due_days') }">
+                {{ t('views.debt.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="debtForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': debtForm.invalid('due_days') }"
+                :placeholder="t('views.debt.fields.due_days')"
+                @change="debtForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.debt.fields.amount_total') }}</FormLabel>
+              <FormInputCurrency :model-value="amountTotalPreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.debt.fields.amount_due') }}</FormLabel>
+              <FormInputCurrency :model-value="amountDuePreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_paid_by_cash_account') }}</FormLabel>
+              <FormInputCurrency :model-value="amountPaidByCashAccountPreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_paid_by_stock_adjustment') }}</FormLabel>
+              <FormInputCurrency
+                :model-value="amountPaidByStockAdjustmentPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': debtForm.invalid('remarks') }">
+                {{ t('views.debt.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="debtForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': debtForm.invalid('remarks') }"
+                :placeholder="t('views.debt.fields.remarks')"
+                @change="debtForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="debtForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_total') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountTotalPreview) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_paid_by_cash_account') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountPaidByCashAccountPreview) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.debt.fields.amount_due') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountDuePreview) }}
+              </div>
+            </div>
+          </div>
+
+          <FormErrorMessages :messages="(debtForm.errors as any).payments" />
+          <FormErrorMessages :messages="(debtForm.errors as any).delete_payment_ids" />
+
+          <div v-if="debtPaymentsForm.length === 0" class="text-right text-sm text-slate-500">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div
+              v-for="(payment, index) in debtPaymentsForm"
+              :key="payment.id ?? `debt-payment-${index}`"
+              class="rounded-md border border-slate-200 p-4 dark:border-darkmode-400"
+            >
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.code`) }">
+                    {{ t('views.debt.fields.payment_code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidDebtField(`payments.${index}.code`) }"
+                    :placeholder="t('views.debt.fields.payment_code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validateDebtField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.date`) }">
+                    {{ t('views.debt.fields.payment_date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidDebtField(`payments.${index}.date`) }"
+                    :placeholder="t('views.debt.fields.payment_date')"
+                    @change="validateDebtField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.debt.fields.payment_cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="cashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidDebtField(`payments.${index}.cash_account_id`) }"
+                    @change="validateDebtField(`payments.${index}.cash_account_id`)"
+                    @search="loadCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.amount`) }">
+                    {{ t('views.debt.fields.payment_amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="min-w-0 flex-1">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidDebtField(`payments.${index}.amount`) }"
+                        @change="validateDebtField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="flex h-[38px] w-[38px] min-w-0 items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.amount`)" />
+                </div>
+
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidDebtField(`payments.${index}.remarks`) }">
+                    {{ t('views.debt.fields.payment_remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidDebtField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.debt.fields.payment_remarks')"
+                    @change="validateDebtField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getDebtFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="debtForm.validating"
+          >
+            <Lucide v-if="debtForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/debt/DebtIndex.vue b/web/src/pages/debt/DebtIndex.vue
new file mode 100644
index 000000000..a0c997c90
--- /dev/null
+++ b/web/src/pages/debt/DebtIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.debt.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const debtNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[debtNotification]', (el: NotificationElement) => {
+  debtNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-debt-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-debt-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.debt.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.debt.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.debt.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  debtNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('DEBT_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('DEBT_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="debtNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/debt/DebtList.vue b/web/src/pages/debt/DebtList.vue
new file mode 100644
index 000000000..8d16111c3
--- /dev/null
+++ b/web/src/pages/debt/DebtList.vue
@@ -0,0 +1,405 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import DebtService from '@/services/DebtService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { Debt } from '@/types/models/Debt';
+import type { DebtPayment } from '@/types/models/DebtPayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { DebtReadAnyPaginateRequest } from '@/types/services/debt/DebtRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const debtService = new DebtService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | null>(null);
+const debtLists = ref<Collection<Array<Debt>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+
+  await getDebts('', true, 1, 10);
+});
+
+const getDebts = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const searchReq: DebtReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    category_id: null,
+    creditor_id: null,
+    supplier_id: null,
+    is_paid_off: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<Debt>> | null> =
+    await debtService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    debtLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getDebts(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const editSelected = (idx: number) => {
+  if (!debtLists.value) return;
+
+  router.push({
+    name: 'side-menu-debt-edit',
+    params: { ulid: debtLists.value.data[idx].ulid },
+  });
+};
+
+const viewSelected = (idx: number) => {
+  if (!debtLists.value) return;
+
+  const debt = debtLists.value.data[idx];
+  expandDetail.value = expandDetail.value === debt.ulid ? null : debt.ulid;
+};
+
+const deleteSelected = (idx: number) => {
+  if (!debtLists.value) return;
+
+  deleteUlid.value = debtLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await debtService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getDebts('', true, 1, 10);
+    showNotification(
+      t('views.debt.alert.delete_debt.title'),
+      t('views.debt.alert.delete_debt.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+
+const getCategoryLabel = (debt: Debt) => debt.category?.name ?? '-';
+
+const getPartyLabel = (debt: Debt) => {
+  if (debt.creditor) {
+    return debt.creditor.code
+      ? `${debt.creditor.code} - ${debt.creditor.name}`
+      : debt.creditor.name;
+  }
+
+  if (debt.supplier) {
+    return debt.supplier.code
+      ? `${debt.supplier.code} - ${debt.supplier.name}`
+      : debt.supplier.name;
+  }
+
+  return '-';
+};
+
+const getPartyTypeLabel = (debt: Debt) =>
+  debt.creditor
+    ? t('views.debt.party_types.creditor')
+    : debt.supplier
+      ? t('views.debt.party_types.supplier')
+      : '-';
+
+const getCashAccountLabel = (debt: Debt) => {
+  if (!debt.cash_account) return '-';
+
+  return debt.cash_account.code
+    ? `${debt.cash_account.code} - ${debt.cash_account.name}`
+    : debt.cash_account.name;
+};
+
+const getPaidOffLabel = (debt: Debt) =>
+  debt.is_paid_off ? t('views.debt.status.paid_off') : t('views.debt.status.not_paid_off');
+
+const getDebtPayments = (debt: Debt) => debt.payments ?? [];
+
+const getPaymentCashAccountLabel = (payment: DebtPayment) => {
+  if (!payment.cash_account) return '-';
+
+  return payment.cash_account.code
+    ? `${payment.cash_account.code} - ${payment.cash_account.name}`
+    : payment.cash_account.name;
+};
+</script>
+
+<template>
+  <div class="mt-5 grid grid-cols-12 gap-6">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="debtLists"
+        :title="t('views.debt.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="debtLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="debtLists ? debtLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 self-start md:col-span-6 lg:col-span-5">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.debt.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.debt.fields.code') }}</div>
+                <div class="col-span-8 break-words font-medium text-slate-700 dark:text-slate-200">
+                  {{ (item as Debt).code }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.debt.fields.date') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as Debt).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.debt.fields.category') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCategoryLabel(item as Debt) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.debt.fields.party_type') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getPartyTypeLabel(item as Debt) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.debt.fields.party') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getPartyLabel(item as Debt) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.debt.fields.cash_account') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCashAccountLabel(item as Debt) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.debt.fields.remarks') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as Debt).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 self-start md:col-span-6 lg:col-span-5 lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.debt.field_groups.balance_summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.debt.fields.direct_amount_received') }}</div>
+                <div class="col-span-5 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Debt).direct_amount_received ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.debt.fields.opening_amount_due') }}</div>
+                <div class="col-span-5 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Debt).opening_amount_due ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.debt.fields.amount_total') }}</div>
+                <div class="col-span-5 text-right font-semibold text-primary">
+                  {{ formatCurrency(Number((item as Debt).amount_total ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.debt.fields.amount_paid_by_cash_account') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Debt).amount_paid_by_cash_account ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.debt.fields.amount_paid_by_stock_adjustment') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Debt).amount_paid_by_stock_adjustment ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.debt.fields.amount_due') }}</div>
+                <div class="col-span-5 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Debt).amount_due ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.debt.fields.due_days') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as Debt).due_days ?? 0 }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.debt.fields.is_paid_off') }}</div>
+                <div class="col-span-5 text-right">
+                  <span
+                    class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium"
+                    :class="
+                      (item as Debt).is_paid_off
+                        ? 'bg-success/20 text-success'
+                        : 'bg-warning/20 text-warning'
+                    "
+                  >
+                    {{ getPaidOffLabel(item as Debt) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 self-center md:col-span-6 lg:col-span-2">
+            <div class="flex justify-end gap-2 md:justify-start lg:min-h-full lg:items-center lg:justify-center">
+              <Button
+                size="sm"
+                variant="outline-secondary"
+                class="flex h-9 w-9 items-center justify-center"
+                @click="viewSelected(index)"
+              >
+                <Lucide icon="Info" class="h-4 w-4" />
+              </Button>
+              <Button
+                size="sm"
+                variant="outline-secondary"
+                class="flex h-9 w-9 items-center justify-center"
+                @click="editSelected(index)"
+              >
+                <Lucide icon="Pen" class="h-4 w-4" />
+              </Button>
+              <Button
+                size="sm"
+                variant="outline-secondary"
+                class="flex h-9 w-9 items-center justify-center"
+                @click="deleteSelected(index)"
+              >
+                <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+              </Button>
+            </div>
+          </div>
+
+          <div
+            v-if="expandDetail === (item as Debt).ulid"
+            class="col-span-12 mt-2 border-t border-slate-200 pt-3 dark:border-darkmode-400"
+          >
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.debt.field_groups.payments') }}
+                </div>
+
+                <div v-if="!getDebtPayments(item as Debt).length" class="text-xs text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <div v-else class="space-y-3 rounded-md border border-slate-200/60 p-3 dark:border-darkmode-400">
+                  <div
+                    v-for="payment in getDebtPayments(item as Debt)"
+                    :key="payment.ulid"
+                    class="border-b border-slate-200/60 pb-3 text-sm last:border-b-0 last:pb-0 dark:border-darkmode-400"
+                  >
+                    <div class="font-medium break-words text-slate-700 dark:text-slate-200">
+                      {{ payment.code }}
+                    </div>
+                    <div class="mt-1 break-words text-xs text-slate-500">
+                      {{ formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss') }}
+                    </div>
+                    <div class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-600 dark:text-slate-300">
+                      <span>
+                        {{ t('views.debt.fields.payment_cash_account') }}
+                        <span class="text-slate-700 dark:text-slate-200">
+                          {{ getPaymentCashAccountLabel(payment) }}
+                        </span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.debt.fields.payment_amount') }}
+                        <span class="font-medium text-slate-700 dark:text-slate-200">
+                          {{ formatCurrency(Number(payment.amount ?? 0)) }}
+                        </span>
+                      </span>
+                    </div>
+                    <div v-if="payment.remarks?.trim()" class="mt-2 break-words text-xs text-slate-500">
+                      {{ payment.remarks }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="mr-1 w-24" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/dev/DevTool.vue b/web/src/pages/dev/DevTool.vue
index 4c3109528..4dfcb3899 100644
--- a/web/src/pages/dev/DevTool.vue
+++ b/web/src/pages/dev/DevTool.vue
@@ -1,35 +1,35 @@
-<script setup lang="ts">
-// #region Imports
-// #endregion
-
-// #region Interfaces
-// #endregion
-
-// #region Declarations
-// #endregion
-
-// #region Props, Emits
-// #endregion
-
-// #region Refs
-// #endregion
-
-// #region Provide/Inject
-// #endregion
-
-// #region Computed
-// #endregion
-
-// #region Lifecycle Hooks
-// #endregion
-
-// #region Methods
-// #endregion
-
-// #region Watchers
-// #endregion
-</script>
-
-<template>
-    <div></div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  // #region Imports
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  // #endregion
+
+  // #region Provide/Inject
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div></div>
+</template>
diff --git a/web/src/pages/dev/PlayOne.vue b/web/src/pages/dev/PlayOne.vue
index 060c22e08..68dfe1f44 100644
--- a/web/src/pages/dev/PlayOne.vue
+++ b/web/src/pages/dev/PlayOne.vue
@@ -1,41 +1,37 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import Pagination from "@/components/Base/Pagination";
-import Button from "@/components/Base/Button";
-import {
-    FormInput
-} from "@/components/Base/Form";
-
-const is_active_1 = ref<boolean>(false);
-const is_active_2 = ref<boolean>(true);
-
-const inputTestVal = ref<number>(1);
-
-const changeInputTriggered = () => {
-    console.log('changeInputTriggered' + Date());
-}
-
-
-</script>
-
-<template>
-    <div>
-        <div>
-            <p>Pagination Test</p>
-            <Pagination>
-                <Pagination.Link :active="is_active_1" @click="is_active_1 = !is_active_1">test 1</Pagination.Link>
-                <Pagination.Link :active="is_active_2" @click="is_active_2 = !is_active_2">test 2</Pagination.Link>
-            </Pagination>
-
-            <Button variant="primary" @click="is_active_1 = true">Set Test 1 as Active</Button>
-        </div>
-        <br />
-        <div>
-            <p>FormInput Test</p>
-            <FormInput v-model="inputTestVal" type="text" @change="changeInputTriggered" />
-
-            <Button variant="primary" @click="inputTestVal = 2">Change Input Value To 2</Button>
-        </div>
-        <br />
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import Pagination from '@/components/Base/Pagination';
+  import Button from '@/components/Base/Button';
+  import { FormInput } from '@/components/Base/Form';
+
+  const is_active_1 = ref<boolean>(false);
+  const is_active_2 = ref<boolean>(true);
+
+  const inputTestVal = ref<number>(1);
+
+  const changeInputTriggered = () => {
+    console.log('changeInputTriggered' + Date());
+  };
+</script>
+
+<template>
+  <div>
+    <div>
+      <p>Pagination Test</p>
+      <Pagination>
+        <Pagination.Link :active="is_active_1" @click="is_active_1 = !is_active_1">test 1</Pagination.Link>
+        <Pagination.Link :active="is_active_2" @click="is_active_2 = !is_active_2">test 2</Pagination.Link>
+      </Pagination>
+
+      <Button variant="primary" @click="is_active_1 = true">Set Test 1 as Active</Button>
+    </div>
+    <br />
+    <div>
+      <p>FormInput Test</p>
+      <FormInput v-model="inputTestVal" type="text" @change="changeInputTriggered" />
+
+      <Button variant="primary" @click="inputTestVal = 2">Change Input Value To 2</Button>
+    </div>
+    <br />
+  </div>
+</template>
diff --git a/web/src/pages/dev/PlayTwo.vue b/web/src/pages/dev/PlayTwo.vue
index f5e2be5e5..e519b4170 100644
--- a/web/src/pages/dev/PlayTwo.vue
+++ b/web/src/pages/dev/PlayTwo.vue
@@ -1,4 +1,3 @@
-<script setup lang="ts">
-</script>
-
-<template></template>
\ No newline at end of file
+<script setup lang="ts"></script>
+
+<template></template>
diff --git a/web/src/pages/error/ErrorPage.vue b/web/src/pages/error/ErrorPage.vue
index ca99fc3b3..5c3efa950 100644
--- a/web/src/pages/error/ErrorPage.vue
+++ b/web/src/pages/error/ErrorPage.vue
@@ -1,7 +1,5 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-    <div></div>
-</template>
\ No newline at end of file
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
diff --git a/web/src/pages/error/ErrorView.vue b/web/src/pages/error/ErrorView.vue
index b4be66046..ef30b0c39 100644
--- a/web/src/pages/error/ErrorView.vue
+++ b/web/src/pages/error/ErrorView.vue
@@ -1,52 +1,52 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { TitleLayout } from '@/components/Base/Form/FormLayout';
-import { useI18n } from 'vue-i18n';
-import Button from "@/components/Base/Button";
-
-const { t } = useI18n();
-const route = useRoute();
-const errorCode = ref<number>(0);
-
-onMounted(() => {
-    errorCode.value = parseInt(route.params.code as string);
-});
-
-const back = () => {
-    window.history.go(-1);
-};
-</script>
-
-<template>
-    <div class="mt-8">
-        <TitleLayout>
-            <template #title>
-                {{ t('views.error.title') }}
-            </template>
-        </TitleLayout>
-
-        <div v-if="errorCode == 401">
-            {{ t('views.error.code.401') }}
-        </div>
-        <div v-else-if="errorCode == 403">
-            {{ t('views.error.code.403') }}
-        </div>
-        <div v-else-if="errorCode == 500">
-            {{ t('views.error.code.500') }}
-        </div>
-        <div v-else-if="errorCode == 500">
-            {{ t('views.error.code.500') }}
-        </div>
-        <div v-else-if="errorCode == 10000">
-            {{ t('views.error.code.10000') }}
-        </div>
-        <div v-else>
-
-        </div>
-
-        <br />
-        <br />
-        <Button variant="soft-primary" size="sm" @click="back">{{ t('components.buttons.back') }}</Button>
-    </div>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+
+  const { t } = useI18n();
+  const route = useRoute();
+  const errorCode = ref<number>(0);
+
+  onMounted(() => {
+    errorCode.value = parseInt(route.params.code as string);
+  });
+
+  const back = () => {
+    window.history.go(-1);
+  };
+</script>
+
+<template>
+  <div class="mt-8">
+    <TitleLayout>
+      <template #title>
+        {{ t('views.error.title') }}
+      </template>
+    </TitleLayout>
+
+    <div v-if="errorCode == 401">
+      {{ t('views.error.code.401') }}
+    </div>
+    <div v-else-if="errorCode == 403">
+      {{ t('views.error.code.403') }}
+    </div>
+    <div v-else-if="errorCode == 500">
+      {{ t('views.error.code.500') }}
+    </div>
+    <div v-else-if="errorCode == 500">
+      {{ t('views.error.code.500') }}
+    </div>
+    <div v-else-if="errorCode == 10000">
+      {{ t('views.error.code.10000') }}
+    </div>
+    <div v-else></div>
+
+    <br />
+    <br />
+    <Button variant="soft-primary" size="sm" @click="back">
+      {{ t('components.buttons.back') }}
+    </Button>
+  </div>
+</template>
diff --git a/web/src/pages/expense-category/ExpenseCategoryCreate.vue b/web/src/pages/expense-category/ExpenseCategoryCreate.vue
new file mode 100644
index 000000000..75928df73
--- /dev/null
+++ b/web/src/pages/expense-category/ExpenseCategoryCreate.vue
@@ -0,0 +1,409 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import ExpenseCategoryService from '@/services/ExpenseCategoryService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormSelect,
+  FormSelectSearch,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const expenseCategoryService = new ExpenseCategoryService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.expense_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense_category.field_groups.expense_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const expenseCategoryForm = expenseCategoryService.useExpenseCategoryCreateForm();
+const parentDDL = ref<Array<DropDownOption> | null>(null);
+const parentSearch = ref<string>('');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+const parentOptions = computed(() =>
+  (parentDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+const categoryTypeOptions = computed(() => [
+  {
+    value: 'expense',
+    label: t('views.expense_category.options.category_type.expense'),
+  },
+  {
+    value: 'other_expense',
+    label: t('views.expense_category.options.category_type.other_expense'),
+  },
+]);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+  await loadParentDDL();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  expenseCategoryForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('EXPENSE_CATEGORY_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+// #endregion
+
+// #region Methods - ExpenseCategory
+const setCompanyIdData = () => {
+  expenseCategoryForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('EXPENSE_CATEGORY_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  if (!data.code) {
+    data.code = '_AUTO_';
+  }
+
+  if (data.sequence === undefined || data.sequence === null) {
+    data.sequence = 0;
+  }
+
+  if (!('parent_id' in data)) {
+    data.parent_id = null;
+  }
+
+  if (!('category_type' in data) || !data.category_type) {
+    data.category_type = 'expense';
+  }
+
+  expenseCategoryForm.setData(data);
+};
+
+const loadParentDDL = async (search = ''): Promise<void> => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await expenseCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_children: undefined,
+    include_id: expenseCategoryForm.parent_id ?? undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    parentDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `${item.display_code} - ${item.name}`,
+    }));
+  }
+};
+
+const setCode = () => {
+  expenseCategoryForm.forgetError('code');
+  if (expenseCategoryForm.code == '_AUTO_') {
+    expenseCategoryForm.setData({ code: '' });
+  } else {
+    expenseCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const handleParentChange = () => {
+  if (expenseCategoryForm.parent_id) {
+    expenseCategoryForm.setData({
+      category_type: null,
+    });
+    expenseCategoryForm.forgetError('category_type');
+  } else if (!expenseCategoryForm.category_type) {
+    expenseCategoryForm.setData({
+      category_type: 'expense',
+    });
+  }
+
+  expenseCategoryForm.validate('parent_id');
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  expenseCategoryForm.reset();
+  expenseCategoryForm.setErrors({});
+  expenseCategoryForm.setData({
+    parent_id: null,
+    category_type: 'expense',
+    code: '_AUTO_',
+    name: '',
+    sequence: 0,
+  });
+  parentSearch.value = '';
+  setCompanyIdData();
+  await loadParentDDL();
+};
+
+const onSubmit = async () => {
+  if (expenseCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(expenseCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await expenseCategoryForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-expense-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="expenseCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="expenseCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('parent_id'),
+                }"
+              >
+                {{ t('views.expense_category.fields.parent') }}
+              </FormLabel>
+              <FormSelectSearch
+                id="parent_id"
+                v-model="expenseCategoryForm.parent_id"
+                v-model:search="parentSearch"
+                :options="parentOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('parent_id'),
+                }"
+                @change="handleParentChange"
+                @search="loadParentDDL"
+                @clear="handleParentChange"
+              />
+              <FormErrorMessages :messages="expenseCategoryForm.errors.parent_id" />
+            </div>
+
+            <div v-if="!expenseCategoryForm.parent_id" class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('category_type'),
+                }"
+              >
+                {{ t('views.expense_category.fields.category_type') }}
+              </FormLabel>
+              <FormSelect
+                id="category_type"
+                v-model="expenseCategoryForm.category_type"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('category_type'),
+                }"
+                @change="expenseCategoryForm.validate('category_type')"
+              >
+                <option v-for="item in categoryTypeOptions" :key="item.value" :value="item.value">
+                  {{ item.label }}
+                </option>
+              </FormSelect>
+              <div class="mt-1 text-xs text-slate-500">
+                {{ t('views.expense_category.descriptions.category_type') }}
+              </div>
+              <FormErrorMessages :messages="expenseCategoryForm.errors.category_type" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.expense_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="expenseCategoryForm.code"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.expense_category.fields.code')"
+                @set-auto="setCode"
+                @change="expenseCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="expenseCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.expense_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="expenseCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.expense_category.fields.name')"
+                @change="expenseCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="expenseCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('sequence'),
+                }"
+              >
+                {{ t('views.expense_category.fields.sequence') }}
+              </FormLabel>
+              <FormInput
+                id="sequence"
+                v-model.number="expenseCategoryForm.sequence"
+                type="number"
+                min="0"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('sequence'),
+                }"
+                :placeholder="t('views.expense_category.fields.sequence')"
+                @change="expenseCategoryForm.validate('sequence')"
+              />
+              <FormErrorMessages :messages="expenseCategoryForm.errors.sequence" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="expenseCategoryForm.validating || expenseCategoryForm.hasErrors"
+          >
+            <Lucide v-if="expenseCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/expense-category/ExpenseCategoryEdit.vue b/web/src/pages/expense-category/ExpenseCategoryEdit.vue
new file mode 100644
index 000000000..a58ee5c71
--- /dev/null
+++ b/web/src/pages/expense-category/ExpenseCategoryEdit.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import ExpenseCategoryService from '@/services/ExpenseCategoryService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode, FormSelect } from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const expenseCategoryService = new ExpenseCategoryService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.expense_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense_category.field_groups.expense_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const expenseCategoryForm = expenseCategoryService.useExpenseCategoryEditForm(route.params.ulid.toString());
+const companyCode = ref<string>('');
+const companyName = ref<string>('');
+const parentLabel = ref<string>('-');
+const categoryTypeLabel = ref<string>('-');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const categoryTypeOptions = computed(() => [
+  {
+    value: 'expense',
+    label: t('views.expense_category.options.category_type.expense'),
+  },
+  {
+    value: 'other_expense',
+    label: t('views.expense_category.options.category_type.other_expense'),
+  },
+]);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+// #endregion
+
+// #region Methods - ExpenseCategory
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await expenseCategoryService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    companyCode.value = result.data.company?.code ?? '';
+    companyName.value = result.data.company?.name ?? '';
+    parentLabel.value = result.data.parent
+      ? `${result.data.parent.display_code} - ${result.data.parent.name}`
+      : '-';
+    categoryTypeLabel.value = result.data.category_type
+      ? t(`views.expense_category.options.category_type.${result.data.category_type}`)
+      : '-';
+
+    expenseCategoryForm.setData({
+      company_id: result.data.company?.id ?? '',
+      category_type: result.data.category_type ?? 'expense',
+      code: result.data.code,
+      name: result.data.name,
+      sequence: result.data.sequence,
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-expense-category-list' });
+  }
+};
+
+const setCode = () => {
+  expenseCategoryForm.forgetError('code');
+  if (expenseCategoryForm.code == '_AUTO_') {
+    expenseCategoryForm.setData({ code: '' });
+  } else {
+    expenseCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  expenseCategoryForm.reset();
+  expenseCategoryForm.setErrors({});
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (expenseCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(expenseCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await expenseCategoryForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-expense-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="expenseCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ companyCode }}
+            <br />
+            {{ companyName }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="expenseCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel>{{ t('views.expense_category.fields.parent') }}</FormLabel>
+              <FormInput :model-value="parentLabel" type="text" readonly />
+            </div>
+
+            <div v-if="parentLabel === '-'" class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('category_type'),
+                }"
+              >
+                {{ t('views.expense_category.fields.category_type') }}
+              </FormLabel>
+              <FormSelect
+                id="category_type"
+                v-model="expenseCategoryForm.category_type"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('category_type'),
+                }"
+                @change="expenseCategoryForm.validate('category_type')"
+              >
+                <option v-for="item in categoryTypeOptions" :key="item.value" :value="item.value">
+                  {{ item.label }}
+                </option>
+              </FormSelect>
+              <div class="mt-1 text-xs text-slate-500">
+                {{ t('views.expense_category.descriptions.category_type') }}
+              </div>
+              <FormErrorMessages :messages="expenseCategoryForm.errors.category_type" />
+            </div>
+
+            <div v-else class="col-span-12 sm:col-span-4">
+              <FormLabel>{{ t('views.expense_category.fields.category_type') }}</FormLabel>
+              <FormInput :model-value="categoryTypeLabel" type="text" readonly />
+            </div>
+
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.expense_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="expenseCategoryForm.code"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.expense_category.fields.code')"
+                @set-auto="setCode"
+                @change="expenseCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="expenseCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.expense_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="expenseCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.expense_category.fields.name')"
+                @change="expenseCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="expenseCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': expenseCategoryForm.invalid('sequence'),
+                }"
+              >
+                {{ t('views.expense_category.fields.sequence') }}
+              </FormLabel>
+              <FormInput
+                id="sequence"
+                v-model.number="expenseCategoryForm.sequence"
+                type="number"
+                min="0"
+                :class="{
+                  'border-danger': expenseCategoryForm.invalid('sequence'),
+                }"
+                :placeholder="t('views.expense_category.fields.sequence')"
+                @change="expenseCategoryForm.validate('sequence')"
+              />
+              <FormErrorMessages :messages="expenseCategoryForm.errors.sequence" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="expenseCategoryForm.validating || expenseCategoryForm.hasErrors"
+          >
+            <Lucide v-if="expenseCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/expense-category/ExpenseCategoryIndex.vue b/web/src/pages/expense-category/ExpenseCategoryIndex.vue
new file mode 100644
index 000000000..7bc946bcb
--- /dev/null
+++ b/web/src/pages/expense-category/ExpenseCategoryIndex.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.expense_category.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const expenseCategoryNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[expenseCategoryNotification]', (el: NotificationElement) => {
+  expenseCategoryNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-expense-category-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-expense-category-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.expense_category.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.expense_category.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.expense_category.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (expenseCategoryNotification.value) {
+    expenseCategoryNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('EXPENSE_CATEGORY_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('EXPENSE_CATEGORY_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="expenseCategoryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/expense-category/ExpenseCategoryList.vue b/web/src/pages/expense-category/ExpenseCategoryList.vue
new file mode 100644
index 000000000..dad5402ef
--- /dev/null
+++ b/web/src/pages/expense-category/ExpenseCategoryList.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import TreeList from '@/components/TreeList/TreeList.vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import { Dialog } from '@/components/Base/Headless';
+import { useRouter } from 'vue-router';
+import ExpenseCategoryService from '@/services/ExpenseCategoryService';
+import { ExpenseCategory } from '@/types/models/ExpenseCategory';
+import { Resource } from '@/types/resources/Resource';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { NotificationData } from '@/types/models/NotificationData';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+// #endregion
+
+interface TreeListRef {
+  expandAll: () => void;
+  collapseAll: () => void;
+}
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const expenseCategoryService = new ExpenseCategoryService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+// #endregion
+
+// #region Refs
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | number | null>(null);
+const treeListRef = ref<TreeListRef | null>(null);
+const expenseCategoryLists = ref<Resource<Array<ExpenseCategory>> | null>({
+  data: [],
+});
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getExpenseCategories('', true);
+});
+// #endregion
+
+// #region Methods
+const getExpenseCategories = async (search: string, refresh: boolean) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<Resource<Array<ExpenseCategory>> | null> = await expenseCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: false,
+    has_children: undefined,
+    include_id: undefined,
+    refresh,
+    limit: 1000,
+  });
+
+  if (result.success && result.data) {
+    expenseCategoryLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async () => {
+  await getExpenseCategories('', false);
+};
+
+const viewSelected = (itemId: string | number) => {
+  if (expandDetail.value === itemId) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = itemId;
+  }
+};
+
+const editSelected = (item: ExpenseCategory) => {
+  router.push({
+    name: 'side-menu-expense-category-edit',
+    params: { ulid: item.ulid },
+  });
+};
+
+const deleteSelected = (item: ExpenseCategory) => {
+  deleteUlid.value = item.ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<boolean | null> = await expenseCategoryService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getExpenseCategories('', true);
+    showNotification(
+      t('views.expense_category.alert.delete_expense_category.title'),
+      t('views.expense_category.alert.delete_expense_category.content'),
+    );
+  } else {
+    const alertList = result.errors ?? convertErrorTypeToAlertListType({ message: result.message });
+    showAlertPlaceholder('danger', result.message ?? '', alertList);
+  }
+
+  emits('loading-state', false);
+};
+
+const getRowIndentStyle = (depth: number) => ({
+  paddingLeft: `${depth * 1.5}rem`,
+});
+
+const expandAllTreeRows = () => {
+  treeListRef.value?.expandAll();
+};
+
+const collapseAllTreeRows = () => {
+  treeListRef.value?.collapseAll();
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.expense_category.table.title')"
+    :enable-search="false"
+    :can-print="true"
+    :can-export="true"
+    :pagination="null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #toolbar-actions>
+      <Button variant="outline-secondary" @click="collapseAllTreeRows">
+        <Lucide icon="ChevronsUpDown" class="mr-1 h-4 w-4" />
+        Collapse All
+      </Button>
+      <Button variant="outline-secondary" @click="expandAllTreeRows">
+        <Lucide icon="ListTree" class="mr-1 h-4 w-4" />
+        Expand All
+      </Button>
+    </template>
+
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.expense_category.fields.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.expense_category.fields.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="expenseCategoryLists !== null">
+          <template v-if="expenseCategoryLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="3">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <TreeList v-else ref="treeListRef" :items="expenseCategoryLists.data">
+            <template #row="{ item, depth, hasChildren, isExpanded, toggle }">
+            <Table.Tr class="intro-x">
+              <Table.Td>
+                <div class="font-medium">{{ item.display_code }}</div>
+              </Table.Td>
+              <Table.Td>
+                <div class="flex items-center gap-2" :style="getRowIndentStyle(depth)">
+                  <button
+                    v-if="hasChildren"
+                    type="button"
+                    class="flex h-5 w-5 items-center justify-center rounded border border-slate-200 text-slate-500 transition hover:bg-slate-100"
+                    :aria-label="isExpanded ? 'Collapse row' : 'Expand row'"
+                    @click="toggle()"
+                  >
+                    <Lucide :icon="isExpanded ? 'ChevronDown' : 'ChevronRight'" class="h-3 w-3" />
+                  </button>
+                  <Lucide v-else-if="depth > 0" icon="CornerDownRight" class="w-4 h-4 text-slate-400" />
+                  <div v-else class="w-5"></div>
+                  <span>{{ item.name }}</span>
+                </div>
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(item.id)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(item as ExpenseCategory)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(item as ExpenseCategory)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== item.id,
+              }"
+            >
+              <Table.Td colspan="3">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.expense_category.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.display_code }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.expense_category.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.expense_category.fields.parent') }}
+                  </div>
+                  <div class="flex-1">{{ item.parent?.name ?? '-' }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.expense_category.fields.sequence') }}
+                  </div>
+                  <div class="flex-1">{{ item.sequence }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.expense_category.fields.child_count') }}
+                  </div>
+                  <div class="flex-1">{{ item.children?.length ?? 0 }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            </template>
+          </TreeList>
+        </Table.Tbody>
+      </Table>
+
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="mr-1 w-24"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/expense-payment/ExpensePaymentCreate.vue b/web/src/pages/expense-payment/ExpensePaymentCreate.vue
new file mode 100644
index 000000000..f529c6cad
--- /dev/null
+++ b/web/src/pages/expense-payment/ExpensePaymentCreate.vue
@@ -0,0 +1,415 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import ExpensePaymentService from '@/services/ExpensePaymentService';
+import ExpenseService from '@/services/ExpenseService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { Expense } from '@/types/models/Expense';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const expensePaymentService = new ExpensePaymentService();
+const expenseService = new ExpenseService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.expense_payment.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense_payment.field_groups.expense_payment_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const expensePaymentForm = expensePaymentService.useExpensePaymentCreateForm();
+
+const expenseDDL = ref<Array<DropDownOption> | null>(null);
+const expenseSearch = ref<string>('');
+const expenseOptions = computed(() =>
+  (expenseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const selectedExpense = computed(() => {
+  return (expenseDDL.value ?? []).find((item) => item.code === expensePaymentForm.expense_id);
+});
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([loadExpenseDDL(), loadCashAccountDDL()]);
+});
+
+const setLocationData = () => {
+  expensePaymentForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('EXPENSE_PAYMENT_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  expensePaymentForm.setData(data);
+};
+
+const loadExpenseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await expenseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    expense_category_id: null,
+    is_amount_payable_paid_off: false,
+    include_id: expensePaymentForm.expense_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    expenseDDL.value = result.data.data.map((item: Expense) => ({
+      code: item.id,
+      name: [
+        item.code,
+        item.category?.name ?? null,
+        `Sisa ${formatCurrency(Number(item.amount_payable_due ?? 0))}`,
+      ]
+        .filter(Boolean)
+        .join(' - '),
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: expensePaymentForm.cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  expensePaymentForm.forgetError('code');
+
+  if (expensePaymentForm.code === '_AUTO_') {
+    expensePaymentForm.setData({ code: '' });
+    return;
+  }
+
+  expensePaymentForm.setData({ code: '_AUTO_' });
+};
+
+const clearExpense = () => {
+  expensePaymentForm.setData({ expense_id: '' });
+  expensePaymentForm.forgetError('expense_id');
+};
+
+const clearCashAccount = () => {
+  expensePaymentForm.setData({ cash_account_id: '' });
+  expensePaymentForm.forgetError('cash_account_id');
+};
+
+const onSubmit = async () => {
+  if (expensePaymentForm.hasErrors) {
+    const firstErrorKey = Object.keys(expensePaymentForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await expensePaymentForm
+    .submit()
+    .then(() => {
+      cacheServices.removeLastEntity('EXPENSE_PAYMENT_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-expense-payment-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  expensePaymentForm.reset();
+  expensePaymentForm.setErrors({});
+  setLocationData();
+  expenseSearch.value = '';
+  cashAccountSearch.value = '';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  expensePaymentForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('EXPENSE_PAYMENT_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="expensePaymentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="expensePaymentForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="expensePaymentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('expense_id') }">
+                {{ t('views.expense_payment.fields.expense') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="expensePaymentForm.expense_id"
+                v-model:search="expenseSearch"
+                :options="expenseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': expensePaymentForm.invalid('expense_id') }"
+                @change="expensePaymentForm.validate('expense_id')"
+                @search="loadExpenseDDL"
+                @clear="clearExpense"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.expense_id" />
+            </div>
+
+            <div v-if="selectedExpense" class="col-span-12">
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 p-4 text-sm dark:border-darkmode-400 dark:bg-darkmode-600/40">
+                <div class="text-slate-500">{{ t('views.expense.fields.amount_payable_due') }}</div>
+                <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                  {{ selectedExpense.name }}
+                </div>
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('code') }">
+                {{ t('views.expense_payment.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="expensePaymentForm.code"
+                :class="{ 'border-danger': expensePaymentForm.invalid('code') }"
+                :placeholder="t('views.expense_payment.fields.code')"
+                @set-auto="setCode"
+                @change="expensePaymentForm.validate('code')"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('date') }">
+                {{ t('views.expense_payment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="expensePaymentForm.date"
+                :class="{ 'border-danger': expensePaymentForm.invalid('date') }"
+                :placeholder="t('views.expense_payment.fields.date')"
+                @change="expensePaymentForm.validate('date')"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('cash_account_id') }">
+                {{ t('views.expense_payment.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="expensePaymentForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': expensePaymentForm.invalid('cash_account_id') }"
+                @change="expensePaymentForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('amount') }">
+                {{ t('views.expense_payment.fields.amount') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="expensePaymentForm.amount"
+                :allow-negative="false"
+                :class="{ 'border-danger': expensePaymentForm.invalid('amount') }"
+                :placeholder="t('views.expense_payment.fields.amount')"
+                @change="expensePaymentForm.validate('amount')"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.amount" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('remarks') }">
+                {{ t('views.expense_payment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="expensePaymentForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': expensePaymentForm.invalid('remarks') }"
+                :placeholder="t('views.expense_payment.fields.remarks')"
+                @change="expensePaymentForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="expensePaymentForm.validating || expensePaymentForm.hasErrors"
+          >
+            <Lucide v-if="expensePaymentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/expense-payment/ExpensePaymentEdit.vue b/web/src/pages/expense-payment/ExpensePaymentEdit.vue
new file mode 100644
index 000000000..c7d6edcf6
--- /dev/null
+++ b/web/src/pages/expense-payment/ExpensePaymentEdit.vue
@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import ExpensePaymentService from '@/services/ExpensePaymentService';
+import CashAccountService from '@/services/CashAccountService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { ExpensePayment } from '@/types/models/ExpensePayment';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const expensePaymentService = new ExpensePaymentService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.expense_payment.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense_payment.field_groups.expense_payment_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const expensePaymentForm = expensePaymentService.useExpensePaymentEditForm(route.params.ulid.toString());
+const expensePaymentData = ref<ExpensePayment | null>(null);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const expenseLabel = computed(() => {
+  const expense = expensePaymentData.value?.expense;
+
+  if (!expense) return '-';
+
+  return [
+    expense.code,
+    expense.category?.name ?? null,
+    `Sisa ${formatCurrency(Number(expense.amount_payable_due ?? 0))}`,
+  ]
+    .filter(Boolean)
+    .join(' - ');
+});
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await loadCashAccountDDL();
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await expensePaymentService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    expensePaymentData.value = result.data;
+
+    expensePaymentForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      expense_id: result.data.expense?.id ?? '',
+      code: result.data.code,
+      date: result.data.date,
+      cash_account_id: result.data.cash_account?.id ?? '',
+      amount: result.data.amount,
+      remarks: result.data.remarks ?? '',
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-expense-payment-list' });
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: expensePaymentData.value?.cash_account?.id,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  expensePaymentForm.forgetError('code');
+
+  if (expensePaymentForm.code === '_AUTO_') {
+    expensePaymentForm.setData({ code: '' });
+    return;
+  }
+
+  expensePaymentForm.setData({ code: '_AUTO_' });
+};
+
+const clearCashAccount = () => {
+  expensePaymentForm.setData({ cash_account_id: '' });
+  expensePaymentForm.forgetError('cash_account_id');
+};
+
+const onSubmit = async () => {
+  if (expensePaymentForm.hasErrors) {
+    const firstErrorKey = Object.keys(expensePaymentForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await expensePaymentForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-expense-payment-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  expensePaymentForm.reset();
+  expensePaymentForm.setErrors({});
+  cashAccountSearch.value = '';
+  await loadData();
+  await loadCashAccountDDL();
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="expensePaymentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="expensePaymentForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="expensePaymentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel>
+                {{ t('views.expense_payment.fields.expense') }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="expensePaymentForm.expense_id" />
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 px-3 py-2 text-sm text-slate-700 dark:border-darkmode-400 dark:bg-darkmode-600/40 dark:text-slate-200">
+                {{ expenseLabel }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('code') }">
+                {{ t('views.expense_payment.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="expensePaymentForm.code"
+                :class="{ 'border-danger': expensePaymentForm.invalid('code') }"
+                :placeholder="t('views.expense_payment.fields.code')"
+                @set-auto="setCode"
+                @change="expensePaymentForm.validate('code')"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('date') }">
+                {{ t('views.expense_payment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="expensePaymentForm.date"
+                :class="{ 'border-danger': expensePaymentForm.invalid('date') }"
+                :placeholder="t('views.expense_payment.fields.date')"
+                @change="expensePaymentForm.validate('date')"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('cash_account_id') }">
+                {{ t('views.expense_payment.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="expensePaymentForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': expensePaymentForm.invalid('cash_account_id') }"
+                @change="expensePaymentForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('amount') }">
+                {{ t('views.expense_payment.fields.amount') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="expensePaymentForm.amount"
+                :allow-negative="false"
+                :class="{ 'border-danger': expensePaymentForm.invalid('amount') }"
+                :placeholder="t('views.expense_payment.fields.amount')"
+                @change="expensePaymentForm.validate('amount')"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.amount" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': expensePaymentForm.invalid('remarks') }">
+                {{ t('views.expense_payment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="expensePaymentForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': expensePaymentForm.invalid('remarks') }"
+                :placeholder="t('views.expense_payment.fields.remarks')"
+                @change="expensePaymentForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="expensePaymentForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="expensePaymentForm.validating || expensePaymentForm.hasErrors"
+          >
+            <Lucide v-if="expensePaymentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/expense-payment/ExpensePaymentIndex.vue b/web/src/pages/expense-payment/ExpensePaymentIndex.vue
new file mode 100644
index 000000000..0fe280907
--- /dev/null
+++ b/web/src/pages/expense-payment/ExpensePaymentIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.expense_payment.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const expensePaymentNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[expensePaymentNotification]', (el: NotificationElement) => {
+  expensePaymentNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-expense-payment-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-expense-payment-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.expense_payment.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.expense_payment.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.expense_payment.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  expensePaymentNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('EXPENSE_PAYMENT_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('EXPENSE_PAYMENT_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="expensePaymentNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/expense-payment/ExpensePaymentList.vue b/web/src/pages/expense-payment/ExpensePaymentList.vue
new file mode 100644
index 000000000..a1e4bf2d1
--- /dev/null
+++ b/web/src/pages/expense-payment/ExpensePaymentList.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ExpensePaymentService from '@/services/ExpensePaymentService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { ExpensePayment } from '@/types/models/ExpensePayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { ExpensePaymentReadAnyPaginateRequest } from '@/types/services/expense-payment/ExpensePaymentRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const expensePaymentService = new ExpensePaymentService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const expensePaymentLists = ref<Collection<Array<ExpensePayment>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+  await getExpensePayments('', true, 1, 10);
+});
+
+const getExpensePayments = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  const searchReq: ExpensePaymentReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    expense_id: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+  const result: ServiceResponse<Collection<Array<ExpensePayment>> | null> =
+    await expensePaymentService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    expensePaymentLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getExpensePayments(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!expensePaymentLists.value) return;
+  router.push({
+    name: 'side-menu-expense-payment-edit',
+    params: { ulid: expensePaymentLists.value.data[idx].ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!expensePaymentLists.value) return;
+  deleteUlid.value = expensePaymentLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+  const result = await expensePaymentService.delete(deleteUlid.value);
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getExpensePayments('', true, 1, 10);
+    showNotification(
+      t('views.expense_payment.alert.delete_expense_payment.title'),
+      t('views.expense_payment.alert.delete_expense_payment.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="expensePaymentLists"
+        :title="t('views.expense_payment.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="expensePaymentLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="expensePaymentLists ? expensePaymentLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-5 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ (item as ExpensePayment).code }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.expense_payment.fields.expense') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as ExpensePayment).expense?.code ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.expense_payment.fields.amount') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as ExpensePayment).amount ?? 0)) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.expense_payment.fields.cash_account') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as ExpensePayment).cash_account?.name ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-5 self-start md:pl-3">
+            <div v-if="expandDetail === index" class="rounded-md border border-slate-200/60 p-4 text-xs dark:border-darkmode-400">
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2">
+                <div class="col-span-4 text-slate-500">{{ t('views.expense_payment.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as ExpensePayment).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.expense_payment.fields.remarks') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as ExpensePayment).remarks ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-2 self-center flex justify-end items-center gap-2 pt-2 md:flex-col">
+            <Button size="sm" variant="outline-secondary" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/expense/ExpenseCreate.vue b/web/src/pages/expense/ExpenseCreate.vue
new file mode 100644
index 000000000..42432e0dd
--- /dev/null
+++ b/web/src/pages/expense/ExpenseCreate.vue
@@ -0,0 +1,646 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import ExpenseService from '@/services/ExpenseService';
+import ExpenseCategoryService from '@/services/ExpenseCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import ExpenseImagesField from '@/components/Expense/ExpenseImagesField.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { ExpenseCategory } from '@/types/models/ExpenseCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+type ExpensePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const expenseService = new ExpenseService();
+const expenseCategoryService = new ExpenseCategoryService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.expense.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense.field_groups.expense_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense.field_groups.payments',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense.field_groups.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const expenseForm = expenseService.useExpenseCreateForm();
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(expenseForm.amount_paid_immediately ?? 0) + Number(expenseForm.amount_payable ?? 0),
+);
+const expensePaymentsForm = computed<ExpensePaymentFormItem[]>(
+  () => expenseForm.payments as ExpensePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const invalidExpenseField = (field: string) => expenseForm.invalid(field as any);
+const validateExpenseField = (field: string) => expenseForm.validate(field as any);
+const getExpenseFieldErrors = (field: string): string | undefined => {
+  const errors = (expenseForm.errors as Record<string, string | string[] | undefined>)[field];
+
+  if (Array.isArray(errors)) {
+    return errors.join(' ');
+  }
+
+  return errors;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const setLocationData = () => {
+  expenseForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('EXPENSE_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  expenseForm.setData(data);
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await expenseCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: false,
+    include_id: expenseForm.expense_category_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: ExpenseCategory) => ({
+      code: item.id,
+      name: item.display_code ? `${item.display_code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: expenseForm.paid_immediately_cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  expenseForm.forgetError('code');
+
+  if (expenseForm.code === '_AUTO_') {
+    expenseForm.setData({ code: '' });
+    return;
+  }
+
+  expenseForm.setData({ code: '_AUTO_' });
+};
+
+const clearCategory = () => {
+  expenseForm.setData({ expense_category_id: '' });
+  expenseForm.forgetError('expense_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  expenseForm.setData({ paid_immediately_cash_account_id: '' });
+  expenseForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = expenseForm.errors as Record<string, string | string[]>;
+
+  if (amount_total) {
+    expenseForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_payable') => {
+  clearAmountTotalError();
+  expenseForm.validate(field);
+};
+
+const setPaymentCode = (index: number) => {
+  expenseForm.forgetError(`payments.${index}.code` as any);
+  expensePaymentsForm.value[index].code = expensePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = expensePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validateExpenseField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  expensePaymentsForm.value.push({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removePayment = (index: number) => {
+  expensePaymentsForm.value.splice(index, 1);
+
+  Object.keys(expenseForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      expenseForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  if (expenseForm.hasErrors) {
+    const firstErrorKey = Object.keys(expenseForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await expenseForm
+    .submit()
+    .then(() => {
+      cacheServices.removeLastEntity('EXPENSE_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-expense-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  expenseForm.reset();
+  expenseForm.setErrors({});
+  setLocationData();
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  expenseForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('EXPENSE_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="expenseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="expenseForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="expenseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('code') }">
+                {{ t('views.expense.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="expenseForm.code"
+                :class="{ 'border-danger': expenseForm.invalid('code') }"
+                :placeholder="t('views.expense.fields.code')"
+                @set-auto="setCode"
+                @change="expenseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('date') }">
+                {{ t('views.expense.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="expenseForm.date"
+                :class="{ 'border-danger': expenseForm.invalid('date') }"
+                :placeholder="t('views.expense.fields.date')"
+                @change="expenseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('expense_category_id') }">
+                {{ t('views.expense.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="expenseForm.expense_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': expenseForm.invalid('expense_category_id') }"
+                @change="expenseForm.validate('expense_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.expense_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.expense.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="expenseForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': expenseForm.invalid('paid_immediately_cash_account_id') }"
+                @change="expenseForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('amount_paid_immediately') }">
+                {{ t('views.expense.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="expenseForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': expenseForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.expense.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('amount_payable') }">
+                {{ t('views.expense.fields.amount_payable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="expenseForm.amount_payable"
+                :allow-negative="false"
+                :class="{ 'border-danger': expenseForm.invalid('amount_payable') }"
+                :placeholder="t('views.expense.fields.amount_payable')"
+                @change="handleAmountChange('amount_payable')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.amount_payable" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('due_days') }">
+                {{ t('views.expense.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="expenseForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': expenseForm.invalid('due_days') }"
+                :placeholder="t('views.expense.fields.due_days')"
+                @change="expenseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>
+                {{ t('views.expense.fields.amount_total') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="amount_total"
+                :model-value="amountTotalPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('remarks') }">
+                {{ t('views.expense.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="expenseForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': expenseForm.invalid('remarks') }"
+                :placeholder="t('views.expense.fields.remarks')"
+                @change="expenseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="(expenseForm.errors as any).payments" />
+
+          <div v-if="expensePaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div v-for="(payment, index) in expensePaymentsForm" :key="`expense-payment-${index}`" class="space-y-3">
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.code`) }">
+                    {{ t('views.expense.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidExpenseField(`payments.${index}.code`) }"
+                    :placeholder="t('views.expense.fields.code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validateExpenseField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.date`) }">
+                    {{ t('views.expense.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidExpenseField(`payments.${index}.date`) }"
+                    :placeholder="t('views.expense.fields.date')"
+                    @change="validateExpenseField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.expense_payment.fields.cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="paidImmediatelyCashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidExpenseField(`payments.${index}.cash_account_id`) }"
+                    @change="validateExpenseField(`payments.${index}.cash_account_id`)"
+                    @search="loadPaidImmediatelyCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.amount`) }">
+                    {{ t('views.expense_payment.fields.amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidExpenseField(`payments.${index}.amount`) }"
+                        @change="validateExpenseField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.amount`)" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.remarks`) }">
+                    {{ t('views.expense.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidExpenseField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.expense.fields.remarks')"
+                    @change="validateExpenseField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.expense.fields.images') }}
+          </FormLabel>
+          <ExpenseImagesField v-model="expenseForm.image_hashes" />
+          <FormErrorMessages :messages="(expenseForm.errors as any).image_hashes" />
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="expenseForm.validating || expenseForm.hasErrors"
+          >
+            <Lucide v-if="expenseForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/expense/ExpenseEdit.vue b/web/src/pages/expense/ExpenseEdit.vue
new file mode 100644
index 000000000..1736026fe
--- /dev/null
+++ b/web/src/pages/expense/ExpenseEdit.vue
@@ -0,0 +1,691 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import ExpenseService from '@/services/ExpenseService';
+import ExpenseCategoryService from '@/services/ExpenseCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import ExpenseImagesField from '@/components/Expense/ExpenseImagesField.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { Expense } from '@/types/models/Expense';
+import type { ExpenseCategory } from '@/types/models/ExpenseCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+import type { ExpenseImage } from '@/types/models/ExpenseImage';
+import type { ExpensePayment } from '@/types/models/ExpensePayment';
+
+type ExpensePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const expenseService = new ExpenseService();
+const expenseCategoryService = new ExpenseCategoryService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.expense.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense.field_groups.expense_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense.field_groups.payments',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.expense.field_groups.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const expenseForm = expenseService.useExpenseEditForm(route.params.ulid.toString());
+const expenseData = ref<Expense | null>(null);
+const uploadedImages = ref<ExpenseImage[]>([]);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(expenseForm.amount_paid_immediately ?? 0) + Number(expenseForm.amount_payable ?? 0),
+);
+const expensePaymentsForm = computed<ExpensePaymentFormItem[]>(
+  () => expenseForm.payments as ExpensePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const invalidExpenseField = (field: string) => expenseForm.invalid(field as any);
+const validateExpenseField = (field: string) => expenseForm.validate(field as any);
+const getExpenseFieldErrors = (field: string): string | undefined => {
+  const errors = (expenseForm.errors as Record<string, string | string[] | undefined>)[field];
+
+  if (Array.isArray(errors)) {
+    return errors.join(' ');
+  }
+
+  return errors;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await expenseService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    expenseData.value = result.data;
+
+    expenseForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      code: result.data.code,
+      date: formatDate(result.data.date, 'YYYY-MM-DD HH:mm:ss'),
+      expense_category_id: result.data.category?.id ?? '',
+      paid_immediately_cash_account_id: result.data.paid_immediately_cash_account?.id ?? '',
+      amount_paid_immediately: result.data.amount_paid_immediately,
+      amount_payable: result.data.amount_payable,
+      due_days: result.data.due_days,
+      remarks: result.data.remarks ?? '',
+      delete_image_ids: [],
+      image_hashes: [],
+      delete_payment_ids: [],
+      payments: (result.data.payments ?? []).map((payment: ExpensePayment) => ({
+        id: payment.id,
+        code: payment.code,
+        date: formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss'),
+        cash_account_id: payment.cash_account?.id ?? '',
+        amount: payment.amount,
+        remarks: payment.remarks ?? '',
+      })),
+    } as any);
+
+    if (result.data.expense_images) {
+      const images = result.data.expense_images.map((img: ExpenseImage) => ({
+        id: img.id,
+        expense_id: img.expense_id,
+        path: img.path,
+        url: img.url,
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+
+      uploadedImages.value = images;
+      expenseForm.image_hashes = images.map((img: ExpenseImage) => ({
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+    } else {
+      uploadedImages.value = [];
+    }
+  } else {
+    router.push({ name: 'side-menu-expense-list' });
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await expenseCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: false,
+    include_id: expenseData.value?.category?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: ExpenseCategory) => ({
+      code: item.id,
+      name: item.display_code ? `${item.display_code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: expenseData.value?.paid_immediately_cash_account?.id,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  expenseForm.forgetError('code');
+
+  if (expenseForm.code === '_AUTO_') {
+    expenseForm.setData({ code: '' });
+    return;
+  }
+
+  expenseForm.setData({ code: '_AUTO_' });
+};
+
+const clearCategory = () => {
+  expenseForm.setData({ expense_category_id: '' });
+  expenseForm.forgetError('expense_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  expenseForm.setData({ paid_immediately_cash_account_id: '' });
+  expenseForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = expenseForm.errors as Record<string, string | string[]>;
+
+  if (amount_total) {
+    expenseForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_payable') => {
+  clearAmountTotalError();
+  expenseForm.validate(field);
+};
+
+const setPaymentCode = (index: number) => {
+  expenseForm.forgetError(`payments.${index}.code` as any);
+  expensePaymentsForm.value[index].code = expensePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = expensePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validateExpenseField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  expensePaymentsForm.value.push({
+    id: null,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removePayment = (index: number) => {
+  const payment = expensePaymentsForm.value[index];
+
+  if (payment?.id && !expenseForm.delete_payment_ids.includes(payment.id)) {
+    expenseForm.delete_payment_ids.push(payment.id);
+  }
+
+  expensePaymentsForm.value.splice(index, 1);
+
+  Object.keys(expenseForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      expenseForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  if (expenseForm.hasErrors) {
+    const firstErrorKey = Object.keys(expenseForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await expenseForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-expense-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  expenseForm.reset();
+  expenseForm.setErrors({});
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+  await loadData();
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="expenseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="expenseForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="expenseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('code') }">
+                {{ t('views.expense.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="expenseForm.code"
+                :class="{ 'border-danger': expenseForm.invalid('code') }"
+                :placeholder="t('views.expense.fields.code')"
+                @set-auto="setCode"
+                @change="expenseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('date') }">
+                {{ t('views.expense.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="expenseForm.date"
+                :class="{ 'border-danger': expenseForm.invalid('date') }"
+                :placeholder="t('views.expense.fields.date')"
+                @change="expenseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('expense_category_id') }">
+                {{ t('views.expense.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="expenseForm.expense_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': expenseForm.invalid('expense_category_id') }"
+                @change="expenseForm.validate('expense_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.expense_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.expense.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="expenseForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': expenseForm.invalid('paid_immediately_cash_account_id') }"
+                @change="expenseForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('amount_paid_immediately') }">
+                {{ t('views.expense.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="expenseForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': expenseForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.expense.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('amount_payable') }">
+                {{ t('views.expense.fields.amount_payable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="expenseForm.amount_payable"
+                :allow-negative="false"
+                :class="{ 'border-danger': expenseForm.invalid('amount_payable') }"
+                :placeholder="t('views.expense.fields.amount_payable')"
+                @change="handleAmountChange('amount_payable')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.amount_payable" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('due_days') }">
+                {{ t('views.expense.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="expenseForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': expenseForm.invalid('due_days') }"
+                :placeholder="t('views.expense.fields.due_days')"
+                @change="expenseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>
+                {{ t('views.expense.fields.amount_total') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="amount_total"
+                :model-value="amountTotalPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': expenseForm.invalid('remarks') }">
+                {{ t('views.expense.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="expenseForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': expenseForm.invalid('remarks') }"
+                :placeholder="t('views.expense.fields.remarks')"
+                @change="expenseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="expenseForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="(expenseForm.errors as any).payments" />
+          <FormErrorMessages :messages="(expenseForm.errors as any).delete_payment_ids" />
+
+          <div v-if="expensePaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div v-for="(payment, index) in expensePaymentsForm" :key="payment.id ?? `expense-payment-${index}`" class="space-y-3">
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.code`) }">
+                    {{ t('views.expense.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidExpenseField(`payments.${index}.code`) }"
+                    :placeholder="t('views.expense.fields.code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validateExpenseField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.date`) }">
+                    {{ t('views.expense.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidExpenseField(`payments.${index}.date`) }"
+                    :placeholder="t('views.expense.fields.date')"
+                    @change="validateExpenseField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.expense_payment.fields.cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="paidImmediatelyCashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidExpenseField(`payments.${index}.cash_account_id`) }"
+                    @change="validateExpenseField(`payments.${index}.cash_account_id`)"
+                    @search="loadPaidImmediatelyCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.amount`) }">
+                    {{ t('views.expense_payment.fields.amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidExpenseField(`payments.${index}.amount`) }"
+                        @change="validateExpenseField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.amount`)" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidExpenseField(`payments.${index}.remarks`) }">
+                    {{ t('views.expense.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidExpenseField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.expense.fields.remarks')"
+                    @change="validateExpenseField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getExpenseFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.expense.fields.images') }}
+          </FormLabel>
+          <ExpenseImagesField
+            v-model="expenseForm.image_hashes"
+            v-model:existing-images="uploadedImages"
+            v-model:delete-image-ids="expenseForm.delete_image_ids"
+          />
+          <FormErrorMessages :messages="(expenseForm.errors as any).image_hashes" />
+          <FormErrorMessages :messages="(expenseForm.errors as any).delete_image_ids" />
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="expenseForm.validating || expenseForm.hasErrors"
+          >
+            <Lucide v-if="expenseForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/expense/ExpenseIndex.vue b/web/src/pages/expense/ExpenseIndex.vue
new file mode 100644
index 000000000..3ac37c882
--- /dev/null
+++ b/web/src/pages/expense/ExpenseIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.expense.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const expenseNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[expenseNotification]', (el: NotificationElement) => {
+  expenseNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-expense-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-expense-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.expense.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.expense.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.expense.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  expenseNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('EXPENSE_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('EXPENSE_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="expenseNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/expense/ExpenseList.vue b/web/src/pages/expense/ExpenseList.vue
new file mode 100644
index 000000000..495f77847
--- /dev/null
+++ b/web/src/pages/expense/ExpenseList.vue
@@ -0,0 +1,475 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ExpenseService from '@/services/ExpenseService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { Expense } from '@/types/models/Expense';
+import type { ExpenseImage } from '@/types/models/ExpenseImage';
+import type { ExpensePayment } from '@/types/models/ExpensePayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { ExpenseReadAnyPaginateRequest } from '@/types/services/expense/ExpenseRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const expenseService = new ExpenseService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | null>(null);
+const isImagePreviewOpen = ref(false);
+const previewImages = ref<ExpenseImage[]>([]);
+const previewImageIndex = ref(0);
+const previewExpenseCode = ref('');
+const expenseLists = ref<Collection<Array<Expense>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+  await getExpenses('', true, 1, 10);
+});
+
+const getExpenses = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  const searchReq: ExpenseReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    expense_category_id: null,
+    is_amount_payable_paid_off: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+  const result: ServiceResponse<Collection<Array<Expense>> | null> = await expenseService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    expenseLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getExpenses(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const editSelected = (idx: number) => {
+  if (!expenseLists.value) return;
+  router.push({
+    name: 'side-menu-expense-edit',
+    params: { ulid: expenseLists.value.data[idx].ulid },
+  });
+};
+
+const viewSelected = (idx: number) => {
+  if (!expenseLists.value) return;
+
+  const expense = expenseLists.value.data[idx];
+  expandDetail.value = expandDetail.value === expense.ulid ? null : expense.ulid;
+};
+
+const deleteSelected = (idx: number) => {
+  if (!expenseLists.value) return;
+  deleteUlid.value = expenseLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+  const result = await expenseService.delete(deleteUlid.value);
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getExpenses('', true, 1, 10);
+    showNotification(t('views.expense.alert.delete_expense.title'), t('views.expense.alert.delete_expense.content'));
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+
+const getCategoryLabel = (expense: Expense) => {
+  if (!expense.category) return '-';
+
+  return expense.category.display_code ? `${expense.category.display_code} - ${expense.category.name}` : expense.category.name;
+};
+
+const getCashAccountLabel = (expense: Expense) => {
+  if (!expense.paid_immediately_cash_account) return '-';
+
+  return expense.paid_immediately_cash_account.code
+    ? `${expense.paid_immediately_cash_account.code} - ${expense.paid_immediately_cash_account.name}`
+    : expense.paid_immediately_cash_account.name;
+};
+
+const getPaidOffLabel = (expense: Expense) =>
+  expense.is_amount_payable_paid_off ? t('views.expense.status.paid_off') : t('views.expense.status.not_paid_off');
+
+const getExpenseImages = (expense: Expense): ExpenseImage[] => {
+  const images = expense.expense_images?.filter((image) => !!image.url) ?? [];
+
+  if (images.length > 0) {
+    return images;
+  }
+
+  return expense.main_expense_image?.url ? [expense.main_expense_image] : [];
+};
+
+const getExpensePayments = (expense: Expense) => expense.payments ?? [];
+
+const getPaymentCashAccountLabel = (payment: ExpensePayment) => {
+  if (!payment.cash_account) return '-';
+
+  return payment.cash_account.code ? `${payment.cash_account.code} - ${payment.cash_account.name}` : payment.cash_account.name;
+};
+
+const openImagePreview = (expense: Expense) => {
+  const images = getExpenseImages(expense);
+
+  if (!images.length) return;
+
+  const mainImageIndex = images.findIndex((image) => image.is_main);
+
+  previewImages.value = images;
+  previewImageIndex.value = mainImageIndex >= 0 ? mainImageIndex : 0;
+  previewExpenseCode.value = expense.code;
+  isImagePreviewOpen.value = true;
+};
+
+const closeImagePreview = () => {
+  isImagePreviewOpen.value = false;
+  previewImages.value = [];
+  previewImageIndex.value = 0;
+  previewExpenseCode.value = '';
+};
+
+const showPreviousImage = () => {
+  if (previewImages.value.length <= 1) return;
+
+  previewImageIndex.value =
+    previewImageIndex.value === 0 ? previewImages.value.length - 1 : previewImageIndex.value - 1;
+};
+
+const showNextImage = () => {
+  if (previewImages.value.length <= 1) return;
+
+  previewImageIndex.value =
+    previewImageIndex.value === previewImages.value.length - 1 ? 0 : previewImageIndex.value + 1;
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="expenseLists"
+        :title="t('views.expense.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="expenseLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="expenseLists ? expenseLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-6 lg:col-span-6 self-start">
+            <div class="space-y-2">
+              <div class="flex items-start justify-between gap-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  Expense
+                </div>
+                <div
+                  v-if="(item as Expense).main_expense_image?.url"
+                  class="flex cursor-zoom-in items-center gap-2 rounded-md border border-slate-200/60 bg-slate-50 px-2 py-1 dark:border-darkmode-400 dark:bg-darkmode-700/50"
+                  @click="openImagePreview(item as Expense)"
+                >
+                  <img
+                    :src="(item as Expense).main_expense_image?.url"
+                    alt="Expense attachment"
+                    class="h-10 w-10 rounded object-cover"
+                  />
+                  <div class="text-[11px] font-medium text-slate-600 dark:text-slate-300">
+                    Attachment
+                  </div>
+                </div>
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.expense.fields.code') }}</div>
+                <div class="col-span-8 break-words font-medium text-slate-700 dark:text-slate-200">
+                  {{ (item as Expense).code }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.expense.fields.date') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as Expense).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.expense.fields.category') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCategoryLabel(item as Expense) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.expense.fields.paid_immediately_cash_account') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCashAccountLabel(item as Expense) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.expense.fields.amount_paid_immediately') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  <div class="w-full max-w-[8rem] font-semibold">
+                    {{ formatCurrency(Number((item as Expense).amount_paid_immediately ?? 0)) }}
+                  </div>
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.expense.fields.remarks') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as Expense).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-4 self-start lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.expense.field_groups.payable_summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-5 text-slate-500">{{ t('views.expense.fields.amount_payable') }}</div>
+                <div class="col-span-7 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Expense).amount_payable ?? 0)) }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.expense.fields.due_days') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as Expense).due_days ?? 0 }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.expense.fields.amount_payable_paid') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Expense).amount_payable_paid ?? 0)) }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.expense.fields.amount_payable_due') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Expense).amount_payable_due ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.expense.fields.amount_total') }}</div>
+                <div class="col-span-5 text-right font-semibold text-primary">
+                  {{ formatCurrency(Number((item as Expense).amount_total ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.expense.fields.is_amount_payable_paid_off') }}</div>
+                <div class="col-span-5 text-right">
+                  <span
+                    class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium"
+                    :class="
+                      (item as Expense).is_amount_payable_paid_off
+                        ? 'bg-success/20 text-success'
+                        : 'bg-warning/20 text-warning'
+                    "
+                  >
+                    {{ getPaidOffLabel(item as Expense) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-2 self-center">
+            <div class="flex justify-end gap-2 md:justify-start lg:min-h-full lg:items-center lg:justify-center">
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="viewSelected(index)"
+                >
+                  <Lucide icon="Info" class="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="editSelected(index)"
+                >
+                  <Lucide icon="Pen" class="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="deleteSelected(index)"
+                >
+                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                </Button>
+            </div>
+          </div>
+
+          <div
+            v-if="expandDetail === (item as Expense).ulid"
+            class="col-span-12 mt-2 border-t border-slate-200 pt-3 dark:border-darkmode-400"
+          >
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  Payment Detail
+                </div>
+
+                <div v-if="!getExpensePayments(item as Expense).length" class="text-xs text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <div v-else class="space-y-3 rounded-md border border-slate-200/60 p-3 dark:border-darkmode-400">
+                  <div
+                    v-for="payment in getExpensePayments(item as Expense)"
+                    :key="payment.ulid"
+                    class="border-b border-slate-200/60 pb-3 text-sm last:border-b-0 last:pb-0 dark:border-darkmode-400"
+                  >
+                    <div class="font-medium break-words text-slate-700 dark:text-slate-200">
+                      {{ payment.code }}
+                    </div>
+                    <div class="mt-1 break-words text-xs text-slate-500">
+                      {{ formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss') }}
+                    </div>
+                    <div class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-600 dark:text-slate-300">
+                      <span>
+                        {{ t('views.expense_payment.fields.cash_account') }}
+                        <span class="text-slate-700 dark:text-slate-200">{{ getPaymentCashAccountLabel(payment) }}</span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.expense_payment.fields.amount') }}
+                        <span class="font-medium text-slate-700 dark:text-slate-200">
+                          {{ formatCurrency(Number(payment.amount ?? 0)) }}
+                        </span>
+                      </span>
+                    </div>
+                    <div v-if="payment.remarks?.trim()" class="mt-2 break-words text-xs text-slate-500">
+                      {{ payment.remarks }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="isImagePreviewOpen" size="xl" @close="closeImagePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <div class="flex items-center justify-between gap-4">
+          <div class="font-medium">
+            {{ previewExpenseCode }} - Attachment
+          </div>
+          <div class="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              size="sm"
+              :disabled="previewImages.length <= 1"
+              @click="showPreviousImage"
+            >
+              <Lucide icon="ChevronLeft" class="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              variant="outline-secondary"
+              size="sm"
+              :disabled="previewImages.length <= 1"
+              @click="showNextImage"
+            >
+              <Lucide icon="ChevronRight" class="h-4 w-4" />
+            </Button>
+            <Button type="button" variant="outline-secondary" size="sm" @click="closeImagePreview">
+              <Lucide icon="X" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </Dialog.Title>
+      <Dialog.Description class="space-y-4 bg-slate-900 p-4">
+        <div class="flex min-h-[60vh] items-center justify-center">
+          <img
+            v-if="previewImages[previewImageIndex]?.url"
+            :src="previewImages[previewImageIndex]?.url"
+            class="max-h-[70vh] max-w-full object-contain"
+          />
+        </div>
+        <div
+          v-if="previewImages.length > 1"
+          class="flex gap-2 overflow-x-auto border-t border-slate-700 pt-3"
+        >
+          <button
+            v-for="(image, imageIndex) in previewImages"
+            :key="image.id"
+            type="button"
+            class="overflow-hidden rounded border-2"
+            :class="imageIndex === previewImageIndex ? 'border-primary' : 'border-transparent opacity-70'"
+            @click="previewImageIndex = imageIndex"
+          >
+            <img :src="image.url" class="h-14 w-14 object-cover" />
+          </button>
+        </div>
+      </Dialog.Description>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/income-category/IncomeCategoryCreate.vue b/web/src/pages/income-category/IncomeCategoryCreate.vue
new file mode 100644
index 000000000..79ebb0577
--- /dev/null
+++ b/web/src/pages/income-category/IncomeCategoryCreate.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import IncomeCategoryService from '@/services/IncomeCategoryService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormSelectSearch,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const incomeCategoryService = new IncomeCategoryService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.income_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income_category.field_groups.income_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const incomeCategoryForm = incomeCategoryService.useIncomeCategoryCreateForm();
+const parentDDL = ref<Array<DropDownOption> | null>(null);
+const parentSearch = ref<string>('');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+const parentOptions = computed(() =>
+  (parentDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+  await loadParentDDL();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  incomeCategoryForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('INCOME_CATEGORY_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+// #endregion
+
+// #region Methods - IncomeCategory
+const setCompanyIdData = () => {
+  incomeCategoryForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('INCOME_CATEGORY_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  if (!data.code) {
+    data.code = '_AUTO_';
+  }
+
+  if (data.sequence === undefined || data.sequence === null) {
+    data.sequence = 0;
+  }
+
+  if (!('parent_id' in data)) {
+    data.parent_id = null;
+  }
+
+  incomeCategoryForm.setData(data);
+};
+
+const loadParentDDL = async (search = ''): Promise<void> => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await incomeCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_children: undefined,
+    include_id: incomeCategoryForm.parent_id ?? undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    parentDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `${item.display_code} - ${item.name}`,
+    }));
+  }
+};
+
+const setCode = () => {
+  incomeCategoryForm.forgetError('code');
+  if (incomeCategoryForm.code == '_AUTO_') {
+    incomeCategoryForm.setData({ code: '' });
+  } else {
+    incomeCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  incomeCategoryForm.reset();
+  incomeCategoryForm.setErrors({});
+  incomeCategoryForm.setData({
+    parent_id: null,
+    code: '_AUTO_',
+    name: '',
+    sequence: 0,
+  });
+  parentSearch.value = '';
+  setCompanyIdData();
+  await loadParentDDL();
+};
+
+const onSubmit = async () => {
+  if (incomeCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(incomeCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await incomeCategoryForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-income-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="incomeCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="incomeCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel
+                :class="{
+                  'text-danger': incomeCategoryForm.invalid('parent_id'),
+                }"
+              >
+                {{ t('views.income_category.fields.parent') }}
+              </FormLabel>
+              <FormSelectSearch
+                id="parent_id"
+                v-model="incomeCategoryForm.parent_id"
+                v-model:search="parentSearch"
+                :options="parentOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': incomeCategoryForm.invalid('parent_id'),
+                }"
+                @change="incomeCategoryForm.validate('parent_id')"
+                @search="loadParentDDL"
+                @clear="incomeCategoryForm.validate('parent_id')"
+              />
+              <FormErrorMessages :messages="incomeCategoryForm.errors.parent_id" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': incomeCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.income_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="incomeCategoryForm.code"
+                :class="{
+                  'border-danger': incomeCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.income_category.fields.code')"
+                @set-auto="setCode"
+                @change="incomeCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="incomeCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': incomeCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.income_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="incomeCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': incomeCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.income_category.fields.name')"
+                @change="incomeCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="incomeCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': incomeCategoryForm.invalid('sequence'),
+                }"
+              >
+                {{ t('views.income_category.fields.sequence') }}
+              </FormLabel>
+              <FormInput
+                id="sequence"
+                v-model.number="incomeCategoryForm.sequence"
+                type="number"
+                min="0"
+                :class="{
+                  'border-danger': incomeCategoryForm.invalid('sequence'),
+                }"
+                :placeholder="t('views.income_category.fields.sequence')"
+                @change="incomeCategoryForm.validate('sequence')"
+              />
+              <FormErrorMessages :messages="incomeCategoryForm.errors.sequence" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="incomeCategoryForm.validating || incomeCategoryForm.hasErrors"
+          >
+            <Lucide v-if="incomeCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/income-category/IncomeCategoryEdit.vue b/web/src/pages/income-category/IncomeCategoryEdit.vue
new file mode 100644
index 000000000..59489d8e7
--- /dev/null
+++ b/web/src/pages/income-category/IncomeCategoryEdit.vue
@@ -0,0 +1,275 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import IncomeCategoryService from '@/services/IncomeCategoryService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode } from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const incomeCategoryService = new IncomeCategoryService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.income_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income_category.field_groups.income_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const incomeCategoryForm = incomeCategoryService.useIncomeCategoryEditForm(route.params.ulid.toString());
+const companyCode = ref<string>('');
+const companyName = ref<string>('');
+const parentLabel = ref<string>('-');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+// #endregion
+
+// #region Methods - IncomeCategory
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await incomeCategoryService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    companyCode.value = result.data.company?.code ?? '';
+    companyName.value = result.data.company?.name ?? '';
+    parentLabel.value = result.data.parent
+      ? `${result.data.parent.display_code} - ${result.data.parent.name}`
+      : '-';
+
+    incomeCategoryForm.setData({
+      company_id: result.data.company?.id ?? '',
+      code: result.data.code,
+      name: result.data.name,
+      sequence: result.data.sequence,
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-income-category-list' });
+  }
+};
+
+const setCode = () => {
+  incomeCategoryForm.forgetError('code');
+  if (incomeCategoryForm.code == '_AUTO_') {
+    incomeCategoryForm.setData({ code: '' });
+  } else {
+    incomeCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  incomeCategoryForm.reset();
+  incomeCategoryForm.setErrors({});
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (incomeCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(incomeCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await incomeCategoryForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-income-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="incomeCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ companyCode }}
+            <br />
+            {{ companyName }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="incomeCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel>{{ t('views.income_category.fields.parent') }}</FormLabel>
+              <FormInput :model-value="parentLabel" type="text" readonly />
+            </div>
+
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': incomeCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.income_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="incomeCategoryForm.code"
+                :class="{
+                  'border-danger': incomeCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.income_category.fields.code')"
+                @set-auto="setCode"
+                @change="incomeCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="incomeCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': incomeCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.income_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="incomeCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': incomeCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.income_category.fields.name')"
+                @change="incomeCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="incomeCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': incomeCategoryForm.invalid('sequence'),
+                }"
+              >
+                {{ t('views.income_category.fields.sequence') }}
+              </FormLabel>
+              <FormInput
+                id="sequence"
+                v-model.number="incomeCategoryForm.sequence"
+                type="number"
+                min="0"
+                :class="{
+                  'border-danger': incomeCategoryForm.invalid('sequence'),
+                }"
+                :placeholder="t('views.income_category.fields.sequence')"
+                @change="incomeCategoryForm.validate('sequence')"
+              />
+              <FormErrorMessages :messages="incomeCategoryForm.errors.sequence" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="incomeCategoryForm.validating || incomeCategoryForm.hasErrors"
+          >
+            <Lucide v-if="incomeCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/income-category/IncomeCategoryIndex.vue b/web/src/pages/income-category/IncomeCategoryIndex.vue
new file mode 100644
index 000000000..bda0b3035
--- /dev/null
+++ b/web/src/pages/income-category/IncomeCategoryIndex.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.income_category.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const incomeCategoryNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[incomeCategoryNotification]', (el: NotificationElement) => {
+  incomeCategoryNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-income-category-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-income-category-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.income_category.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.income_category.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.income_category.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (incomeCategoryNotification.value) {
+    incomeCategoryNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('INCOME_CATEGORY_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('INCOME_CATEGORY_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="incomeCategoryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/income-category/IncomeCategoryList.vue b/web/src/pages/income-category/IncomeCategoryList.vue
new file mode 100644
index 000000000..0d35e0d0d
--- /dev/null
+++ b/web/src/pages/income-category/IncomeCategoryList.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import TreeList from '@/components/TreeList/TreeList.vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import { Dialog } from '@/components/Base/Headless';
+import { useRouter } from 'vue-router';
+import IncomeCategoryService from '@/services/IncomeCategoryService';
+import { IncomeCategory } from '@/types/models/IncomeCategory';
+import { Resource } from '@/types/resources/Resource';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { NotificationData } from '@/types/models/NotificationData';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+// #endregion
+
+interface TreeListRef {
+  expandAll: () => void;
+  collapseAll: () => void;
+}
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const incomeCategoryService = new IncomeCategoryService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+// #endregion
+
+// #region Refs
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | number | null>(null);
+const treeListRef = ref<TreeListRef | null>(null);
+const incomeCategoryLists = ref<Resource<Array<IncomeCategory>> | null>({
+  data: [],
+});
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getIncomeCategories('', true);
+});
+// #endregion
+
+// #region Methods
+const getIncomeCategories = async (search: string, refresh: boolean) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<Resource<Array<IncomeCategory>> | null> = await incomeCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: false,
+    has_children: undefined,
+    include_id: undefined,
+    refresh,
+    limit: 1000,
+  });
+
+  if (result.success && result.data) {
+    incomeCategoryLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async () => {
+  await getIncomeCategories('', false);
+};
+
+const viewSelected = (itemId: string | number) => {
+  if (expandDetail.value === itemId) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = itemId;
+  }
+};
+
+const editSelected = (item: IncomeCategory) => {
+  router.push({
+    name: 'side-menu-income-category-edit',
+    params: { ulid: item.ulid },
+  });
+};
+
+const deleteSelected = (item: IncomeCategory) => {
+  deleteUlid.value = item.ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<boolean | null> = await incomeCategoryService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getIncomeCategories('', true);
+    showNotification(
+      t('views.income_category.alert.delete_income_category.title'),
+      t('views.income_category.alert.delete_income_category.content'),
+    );
+  } else {
+    const alertList = result.errors ?? convertErrorTypeToAlertListType({ message: result.message });
+    showAlertPlaceholder('danger', result.message ?? '', alertList);
+  }
+
+  emits('loading-state', false);
+};
+
+const getRowIndentStyle = (depth: number) => ({
+  paddingLeft: `${depth * 1.5}rem`,
+});
+
+const expandAllTreeRows = () => {
+  treeListRef.value?.expandAll();
+};
+
+const collapseAllTreeRows = () => {
+  treeListRef.value?.collapseAll();
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.income_category.table.title')"
+    :enable-search="false"
+    :can-print="true"
+    :can-export="true"
+    :pagination="null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #toolbar-actions>
+      <Button variant="outline-secondary" @click="collapseAllTreeRows">
+        <Lucide icon="ChevronsUpDown" class="mr-1 h-4 w-4" />
+        Collapse All
+      </Button>
+      <Button variant="outline-secondary" @click="expandAllTreeRows">
+        <Lucide icon="ListTree" class="mr-1 h-4 w-4" />
+        Expand All
+      </Button>
+    </template>
+
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.income_category.fields.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.income_category.fields.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="incomeCategoryLists !== null">
+          <template v-if="incomeCategoryLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="3">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <TreeList v-else ref="treeListRef" :items="incomeCategoryLists.data">
+            <template #row="{ item, depth, hasChildren, isExpanded, toggle }">
+            <Table.Tr class="intro-x">
+              <Table.Td>
+                <div class="font-medium">{{ item.display_code }}</div>
+              </Table.Td>
+              <Table.Td>
+                <div class="flex items-center gap-2" :style="getRowIndentStyle(depth)">
+                  <button
+                    v-if="hasChildren"
+                    type="button"
+                    class="flex h-5 w-5 items-center justify-center rounded border border-slate-200 text-slate-500 transition hover:bg-slate-100"
+                    :aria-label="isExpanded ? 'Collapse row' : 'Expand row'"
+                    @click="toggle()"
+                  >
+                    <Lucide :icon="isExpanded ? 'ChevronDown' : 'ChevronRight'" class="h-3 w-3" />
+                  </button>
+                  <Lucide v-else-if="depth > 0" icon="CornerDownRight" class="w-4 h-4 text-slate-400" />
+                  <div v-else class="w-5"></div>
+                  <span>{{ item.name }}</span>
+                </div>
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(item.id)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(item as IncomeCategory)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(item as IncomeCategory)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== item.id,
+              }"
+            >
+              <Table.Td colspan="3">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.income_category.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.display_code }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.income_category.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.income_category.fields.parent') }}
+                  </div>
+                  <div class="flex-1">{{ item.parent?.name ?? '-' }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.income_category.fields.sequence') }}
+                  </div>
+                  <div class="flex-1">{{ item.sequence }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.income_category.fields.child_count') }}
+                  </div>
+                  <div class="flex-1">{{ item.children?.length ?? 0 }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            </template>
+          </TreeList>
+        </Table.Tbody>
+      </Table>
+
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="mr-1 w-24"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/income-payment/IncomePaymentCreate.vue b/web/src/pages/income-payment/IncomePaymentCreate.vue
new file mode 100644
index 000000000..46da07ee5
--- /dev/null
+++ b/web/src/pages/income-payment/IncomePaymentCreate.vue
@@ -0,0 +1,415 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import IncomePaymentService from '@/services/IncomePaymentService';
+import IncomeService from '@/services/IncomeService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { Income } from '@/types/models/Income';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const incomePaymentService = new IncomePaymentService();
+const incomeService = new IncomeService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.income_payment.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income_payment.field_groups.income_payment_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const incomePaymentForm = incomePaymentService.useIncomePaymentCreateForm();
+
+const incomeDDL = ref<Array<DropDownOption> | null>(null);
+const incomeSearch = ref<string>('');
+const incomeOptions = computed(() =>
+  (incomeDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const selectedIncome = computed(() => {
+  return (incomeDDL.value ?? []).find((item) => item.code === incomePaymentForm.income_id);
+});
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([loadIncomeDDL(), loadCashAccountDDL()]);
+});
+
+const setLocationData = () => {
+  incomePaymentForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('INCOME_PAYMENT_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  incomePaymentForm.setData(data);
+};
+
+const loadIncomeDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await incomeService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    income_category_id: null,
+    is_amount_receivable_paid_off: false,
+    include_id: incomePaymentForm.income_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    incomeDDL.value = result.data.data.map((item: Income) => ({
+      code: item.id,
+      name: [
+        item.code,
+        item.category?.name ?? null,
+        `Sisa ${formatCurrency(Number(item.amount_receivable_due ?? 0))}`,
+      ]
+        .filter(Boolean)
+        .join(' - '),
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: incomePaymentForm.cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  incomePaymentForm.forgetError('code');
+
+  if (incomePaymentForm.code === '_AUTO_') {
+    incomePaymentForm.setData({ code: '' });
+    return;
+  }
+
+  incomePaymentForm.setData({ code: '_AUTO_' });
+};
+
+const clearIncome = () => {
+  incomePaymentForm.setData({ income_id: '' });
+  incomePaymentForm.forgetError('income_id');
+};
+
+const clearCashAccount = () => {
+  incomePaymentForm.setData({ cash_account_id: '' });
+  incomePaymentForm.forgetError('cash_account_id');
+};
+
+const onSubmit = async () => {
+  if (incomePaymentForm.hasErrors) {
+    const firstErrorKey = Object.keys(incomePaymentForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await incomePaymentForm
+    .submit()
+    .then(() => {
+      cacheServices.removeLastEntity('INCOME_PAYMENT_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-income-payment-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  incomePaymentForm.reset();
+  incomePaymentForm.setErrors({});
+  setLocationData();
+  incomeSearch.value = '';
+  cashAccountSearch.value = '';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  incomePaymentForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('INCOME_PAYMENT_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="incomePaymentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="incomePaymentForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="incomePaymentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('income_id') }">
+                {{ t('views.income_payment.fields.income') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="incomePaymentForm.income_id"
+                v-model:search="incomeSearch"
+                :options="incomeOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': incomePaymentForm.invalid('income_id') }"
+                @change="incomePaymentForm.validate('income_id')"
+                @search="loadIncomeDDL"
+                @clear="clearIncome"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.income_id" />
+            </div>
+
+            <div v-if="selectedIncome" class="col-span-12">
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 p-4 text-sm dark:border-darkmode-400 dark:bg-darkmode-600/40">
+                <div class="text-slate-500">{{ t('views.income.fields.amount_receivable_due') }}</div>
+                <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                  {{ selectedIncome.name }}
+                </div>
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('code') }">
+                {{ t('views.income_payment.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="incomePaymentForm.code"
+                :class="{ 'border-danger': incomePaymentForm.invalid('code') }"
+                :placeholder="t('views.income_payment.fields.code')"
+                @set-auto="setCode"
+                @change="incomePaymentForm.validate('code')"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('date') }">
+                {{ t('views.income_payment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="incomePaymentForm.date"
+                :class="{ 'border-danger': incomePaymentForm.invalid('date') }"
+                :placeholder="t('views.income_payment.fields.date')"
+                @change="incomePaymentForm.validate('date')"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('cash_account_id') }">
+                {{ t('views.income_payment.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="incomePaymentForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': incomePaymentForm.invalid('cash_account_id') }"
+                @change="incomePaymentForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('amount') }">
+                {{ t('views.income_payment.fields.amount') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="incomePaymentForm.amount"
+                :allow-negative="false"
+                :class="{ 'border-danger': incomePaymentForm.invalid('amount') }"
+                :placeholder="t('views.income_payment.fields.amount')"
+                @change="incomePaymentForm.validate('amount')"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.amount" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('remarks') }">
+                {{ t('views.income_payment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="incomePaymentForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': incomePaymentForm.invalid('remarks') }"
+                :placeholder="t('views.income_payment.fields.remarks')"
+                @change="incomePaymentForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="incomePaymentForm.validating || incomePaymentForm.hasErrors"
+          >
+            <Lucide v-if="incomePaymentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/income-payment/IncomePaymentEdit.vue b/web/src/pages/income-payment/IncomePaymentEdit.vue
new file mode 100644
index 000000000..9f3d7f87c
--- /dev/null
+++ b/web/src/pages/income-payment/IncomePaymentEdit.vue
@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import IncomePaymentService from '@/services/IncomePaymentService';
+import CashAccountService from '@/services/CashAccountService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { IncomePayment } from '@/types/models/IncomePayment';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const incomePaymentService = new IncomePaymentService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.income_payment.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income_payment.field_groups.income_payment_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const incomePaymentForm = incomePaymentService.useIncomePaymentEditForm(route.params.ulid.toString());
+const incomePaymentData = ref<IncomePayment | null>(null);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const incomeLabel = computed(() => {
+  const income = incomePaymentData.value?.income;
+
+  if (!income) return '-';
+
+  return [
+    income.code,
+    income.category?.name ?? null,
+    `Sisa ${formatCurrency(Number(income.amount_receivable_due ?? 0))}`,
+  ]
+    .filter(Boolean)
+    .join(' - ');
+});
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await loadCashAccountDDL();
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await incomePaymentService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    incomePaymentData.value = result.data;
+
+    incomePaymentForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      income_id: result.data.income?.id ?? '',
+      code: result.data.code,
+      date: result.data.date,
+      cash_account_id: result.data.cash_account?.id ?? '',
+      amount: result.data.amount,
+      remarks: result.data.remarks ?? '',
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-income-payment-list' });
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: incomePaymentData.value?.cash_account?.id,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  incomePaymentForm.forgetError('code');
+
+  if (incomePaymentForm.code === '_AUTO_') {
+    incomePaymentForm.setData({ code: '' });
+    return;
+  }
+
+  incomePaymentForm.setData({ code: '_AUTO_' });
+};
+
+const clearCashAccount = () => {
+  incomePaymentForm.setData({ cash_account_id: '' });
+  incomePaymentForm.forgetError('cash_account_id');
+};
+
+const onSubmit = async () => {
+  if (incomePaymentForm.hasErrors) {
+    const firstErrorKey = Object.keys(incomePaymentForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await incomePaymentForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-income-payment-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  incomePaymentForm.reset();
+  incomePaymentForm.setErrors({});
+  cashAccountSearch.value = '';
+  await loadData();
+  await loadCashAccountDDL();
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="incomePaymentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="incomePaymentForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="incomePaymentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel>
+                {{ t('views.income_payment.fields.income') }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="incomePaymentForm.income_id" />
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 px-3 py-2 text-sm text-slate-700 dark:border-darkmode-400 dark:bg-darkmode-600/40 dark:text-slate-200">
+                {{ incomeLabel }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('code') }">
+                {{ t('views.income_payment.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="incomePaymentForm.code"
+                :class="{ 'border-danger': incomePaymentForm.invalid('code') }"
+                :placeholder="t('views.income_payment.fields.code')"
+                @set-auto="setCode"
+                @change="incomePaymentForm.validate('code')"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('date') }">
+                {{ t('views.income_payment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="incomePaymentForm.date"
+                :class="{ 'border-danger': incomePaymentForm.invalid('date') }"
+                :placeholder="t('views.income_payment.fields.date')"
+                @change="incomePaymentForm.validate('date')"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('cash_account_id') }">
+                {{ t('views.income_payment.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="incomePaymentForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': incomePaymentForm.invalid('cash_account_id') }"
+                @change="incomePaymentForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('amount') }">
+                {{ t('views.income_payment.fields.amount') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="incomePaymentForm.amount"
+                :allow-negative="false"
+                :class="{ 'border-danger': incomePaymentForm.invalid('amount') }"
+                :placeholder="t('views.income_payment.fields.amount')"
+                @change="incomePaymentForm.validate('amount')"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.amount" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': incomePaymentForm.invalid('remarks') }">
+                {{ t('views.income_payment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="incomePaymentForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': incomePaymentForm.invalid('remarks') }"
+                :placeholder="t('views.income_payment.fields.remarks')"
+                @change="incomePaymentForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="incomePaymentForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="incomePaymentForm.validating || incomePaymentForm.hasErrors"
+          >
+            <Lucide v-if="incomePaymentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/income-payment/IncomePaymentIndex.vue b/web/src/pages/income-payment/IncomePaymentIndex.vue
new file mode 100644
index 000000000..cba738a64
--- /dev/null
+++ b/web/src/pages/income-payment/IncomePaymentIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.income_payment.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const incomePaymentNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[incomePaymentNotification]', (el: NotificationElement) => {
+  incomePaymentNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-income-payment-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-income-payment-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.income_payment.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.income_payment.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.income_payment.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  incomePaymentNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('INCOME_PAYMENT_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('INCOME_PAYMENT_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="incomePaymentNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/income-payment/IncomePaymentList.vue b/web/src/pages/income-payment/IncomePaymentList.vue
new file mode 100644
index 000000000..221b4f600
--- /dev/null
+++ b/web/src/pages/income-payment/IncomePaymentList.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import IncomePaymentService from '@/services/IncomePaymentService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { IncomePayment } from '@/types/models/IncomePayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { IncomePaymentReadAnyPaginateRequest } from '@/types/services/income-payment/IncomePaymentRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const incomePaymentService = new IncomePaymentService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const incomePaymentLists = ref<Collection<Array<IncomePayment>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+  await getIncomePayments('', true, 1, 10);
+});
+
+const getIncomePayments = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  const searchReq: IncomePaymentReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    income_id: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+  const result: ServiceResponse<Collection<Array<IncomePayment>> | null> =
+    await incomePaymentService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    incomePaymentLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getIncomePayments(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!incomePaymentLists.value) return;
+  router.push({
+    name: 'side-menu-income-payment-edit',
+    params: { ulid: incomePaymentLists.value.data[idx].ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!incomePaymentLists.value) return;
+  deleteUlid.value = incomePaymentLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+  const result = await incomePaymentService.delete(deleteUlid.value);
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getIncomePayments('', true, 1, 10);
+    showNotification(
+      t('views.income_payment.alert.delete_income_payment.title'),
+      t('views.income_payment.alert.delete_income_payment.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="incomePaymentLists"
+        :title="t('views.income_payment.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="incomePaymentLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="incomePaymentLists ? incomePaymentLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-5 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ (item as IncomePayment).code }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.income_payment.fields.income') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as IncomePayment).income?.code ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.income_payment.fields.amount') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as IncomePayment).amount ?? 0)) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.income_payment.fields.cash_account') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as IncomePayment).cash_account?.name ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-5 self-start md:pl-3">
+            <div v-if="expandDetail === index" class="rounded-md border border-slate-200/60 p-4 text-xs dark:border-darkmode-400">
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2">
+                <div class="col-span-4 text-slate-500">{{ t('views.income_payment.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as IncomePayment).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.income_payment.fields.remarks') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as IncomePayment).remarks ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-2 self-center flex justify-end items-center gap-2 pt-2 md:flex-col">
+            <Button size="sm" variant="outline-secondary" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/income/IncomeCreate.vue b/web/src/pages/income/IncomeCreate.vue
new file mode 100644
index 000000000..73b21b8d4
--- /dev/null
+++ b/web/src/pages/income/IncomeCreate.vue
@@ -0,0 +1,646 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import IncomeService from '@/services/IncomeService';
+import IncomeCategoryService from '@/services/IncomeCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import IncomeImagesField from '@/components/Income/IncomeImagesField.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { IncomeCategory } from '@/types/models/IncomeCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+type IncomePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const incomeService = new IncomeService();
+const incomeCategoryService = new IncomeCategoryService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.income.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income.field_groups.income_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income.field_groups.payments',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income.field_groups.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const incomeForm = incomeService.useIncomeCreateForm();
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(incomeForm.amount_paid_immediately ?? 0) + Number(incomeForm.amount_receivable ?? 0),
+);
+const incomePaymentsForm = computed<IncomePaymentFormItem[]>(
+  () => incomeForm.payments as IncomePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const invalidIncomeField = (field: string) => incomeForm.invalid(field as any);
+const validateIncomeField = (field: string) => incomeForm.validate(field as any);
+const getIncomeFieldErrors = (field: string): string | undefined => {
+  const errors = (incomeForm.errors as Record<string, string | string[] | undefined>)[field];
+
+  if (Array.isArray(errors)) {
+    return errors.join(' ');
+  }
+
+  return errors;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const setLocationData = () => {
+  incomeForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('INCOME_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  incomeForm.setData(data);
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await incomeCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: false,
+    include_id: incomeForm.income_category_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: IncomeCategory) => ({
+      code: item.id,
+      name: item.display_code ? `${item.display_code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: incomeForm.paid_immediately_cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  incomeForm.forgetError('code');
+
+  if (incomeForm.code === '_AUTO_') {
+    incomeForm.setData({ code: '' });
+    return;
+  }
+
+  incomeForm.setData({ code: '_AUTO_' });
+};
+
+const clearCategory = () => {
+  incomeForm.setData({ income_category_id: '' });
+  incomeForm.forgetError('income_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  incomeForm.setData({ paid_immediately_cash_account_id: '' });
+  incomeForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = incomeForm.errors as Record<string, string | string[]>;
+
+  if (amount_total) {
+    incomeForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_receivable') => {
+  clearAmountTotalError();
+  incomeForm.validate(field);
+};
+
+const setPaymentCode = (index: number) => {
+  incomeForm.forgetError(`payments.${index}.code` as any);
+  incomePaymentsForm.value[index].code = incomePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = incomePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validateIncomeField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  incomePaymentsForm.value.push({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removePayment = (index: number) => {
+  incomePaymentsForm.value.splice(index, 1);
+
+  Object.keys(incomeForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      incomeForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  if (incomeForm.hasErrors) {
+    const firstErrorKey = Object.keys(incomeForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await incomeForm
+    .submit()
+    .then(() => {
+      cacheServices.removeLastEntity('INCOME_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-income-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  incomeForm.reset();
+  incomeForm.setErrors({});
+  setLocationData();
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  incomeForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('INCOME_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="incomeForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="incomeForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="incomeForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('code') }">
+                {{ t('views.income.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="incomeForm.code"
+                :class="{ 'border-danger': incomeForm.invalid('code') }"
+                :placeholder="t('views.income.fields.code')"
+                @set-auto="setCode"
+                @change="incomeForm.validate('code')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('date') }">
+                {{ t('views.income.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="incomeForm.date"
+                :class="{ 'border-danger': incomeForm.invalid('date') }"
+                :placeholder="t('views.income.fields.date')"
+                @change="incomeForm.validate('date')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('income_category_id') }">
+                {{ t('views.income.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="incomeForm.income_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': incomeForm.invalid('income_category_id') }"
+                @change="incomeForm.validate('income_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.income_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.income.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="incomeForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': incomeForm.invalid('paid_immediately_cash_account_id') }"
+                @change="incomeForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('amount_paid_immediately') }">
+                {{ t('views.income.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="incomeForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': incomeForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.income.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('amount_receivable') }">
+                {{ t('views.income.fields.amount_receivable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="incomeForm.amount_receivable"
+                :allow-negative="false"
+                :class="{ 'border-danger': incomeForm.invalid('amount_receivable') }"
+                :placeholder="t('views.income.fields.amount_receivable')"
+                @change="handleAmountChange('amount_receivable')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.amount_receivable" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('due_days') }">
+                {{ t('views.income.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="incomeForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': incomeForm.invalid('due_days') }"
+                :placeholder="t('views.income.fields.due_days')"
+                @change="incomeForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>
+                {{ t('views.income.fields.amount_total') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="amount_total"
+                :model-value="amountTotalPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('remarks') }">
+                {{ t('views.income.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="incomeForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': incomeForm.invalid('remarks') }"
+                :placeholder="t('views.income.fields.remarks')"
+                @change="incomeForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="(incomeForm.errors as any).payments" />
+
+          <div v-if="incomePaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div v-for="(payment, index) in incomePaymentsForm" :key="`income-payment-${index}`" class="space-y-3">
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.code`) }">
+                    {{ t('views.income.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidIncomeField(`payments.${index}.code`) }"
+                    :placeholder="t('views.income.fields.code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validateIncomeField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.date`) }">
+                    {{ t('views.income.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidIncomeField(`payments.${index}.date`) }"
+                    :placeholder="t('views.income.fields.date')"
+                    @change="validateIncomeField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.income_payment.fields.cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="paidImmediatelyCashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidIncomeField(`payments.${index}.cash_account_id`) }"
+                    @change="validateIncomeField(`payments.${index}.cash_account_id`)"
+                    @search="loadPaidImmediatelyCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.amount`) }">
+                    {{ t('views.income_payment.fields.amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidIncomeField(`payments.${index}.amount`) }"
+                        @change="validateIncomeField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.amount`)" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.remarks`) }">
+                    {{ t('views.income.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidIncomeField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.income.fields.remarks')"
+                    @change="validateIncomeField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.income.fields.images') }}
+          </FormLabel>
+          <IncomeImagesField v-model="incomeForm.image_hashes" />
+          <FormErrorMessages :messages="(incomeForm.errors as any).image_hashes" />
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="incomeForm.validating || incomeForm.hasErrors"
+          >
+            <Lucide v-if="incomeForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/income/IncomeEdit.vue b/web/src/pages/income/IncomeEdit.vue
new file mode 100644
index 000000000..fab92416d
--- /dev/null
+++ b/web/src/pages/income/IncomeEdit.vue
@@ -0,0 +1,691 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import IncomeService from '@/services/IncomeService';
+import IncomeCategoryService from '@/services/IncomeCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import IncomeImagesField from '@/components/Income/IncomeImagesField.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { Income } from '@/types/models/Income';
+import type { IncomeCategory } from '@/types/models/IncomeCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+import type { IncomeImage } from '@/types/models/IncomeImage';
+import type { IncomePayment } from '@/types/models/IncomePayment';
+
+type IncomePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const incomeService = new IncomeService();
+const incomeCategoryService = new IncomeCategoryService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.income.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income.field_groups.income_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income.field_groups.payments',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.income.field_groups.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const incomeForm = incomeService.useIncomeEditForm(route.params.ulid.toString());
+const incomeData = ref<Income | null>(null);
+const uploadedImages = ref<IncomeImage[]>([]);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(incomeForm.amount_paid_immediately ?? 0) + Number(incomeForm.amount_receivable ?? 0),
+);
+const incomePaymentsForm = computed<IncomePaymentFormItem[]>(
+  () => incomeForm.payments as IncomePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const invalidIncomeField = (field: string) => incomeForm.invalid(field as any);
+const validateIncomeField = (field: string) => incomeForm.validate(field as any);
+const getIncomeFieldErrors = (field: string): string | undefined => {
+  const errors = (incomeForm.errors as Record<string, string | string[] | undefined>)[field];
+
+  if (Array.isArray(errors)) {
+    return errors.join(' ');
+  }
+
+  return errors;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await incomeService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    incomeData.value = result.data;
+
+    incomeForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      code: result.data.code,
+      date: formatDate(result.data.date, 'YYYY-MM-DD HH:mm:ss'),
+      income_category_id: result.data.category?.id ?? '',
+      paid_immediately_cash_account_id: result.data.paid_immediately_cash_account?.id ?? '',
+      amount_paid_immediately: result.data.amount_paid_immediately,
+      amount_receivable: result.data.amount_receivable,
+      due_days: result.data.due_days,
+      remarks: result.data.remarks ?? '',
+      delete_image_ids: [],
+      image_hashes: [],
+      delete_payment_ids: [],
+      payments: (result.data.payments ?? []).map((payment: IncomePayment) => ({
+        id: payment.id,
+        code: payment.code,
+        date: formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss'),
+        cash_account_id: payment.cash_account?.id ?? '',
+        amount: payment.amount,
+        remarks: payment.remarks ?? '',
+      })),
+    } as any);
+
+    if (result.data.income_images) {
+      const images = result.data.income_images.map((img: IncomeImage) => ({
+        id: img.id,
+        income_id: img.income_id,
+        path: img.path,
+        url: img.url,
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+
+      uploadedImages.value = images;
+      incomeForm.image_hashes = images.map((img: IncomeImage) => ({
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+    } else {
+      uploadedImages.value = [];
+    }
+  } else {
+    router.push({ name: 'side-menu-income-list' });
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await incomeCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: false,
+    include_id: incomeData.value?.category?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: IncomeCategory) => ({
+      code: item.id,
+      name: item.display_code ? `${item.display_code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: incomeData.value?.paid_immediately_cash_account?.id,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  incomeForm.forgetError('code');
+
+  if (incomeForm.code === '_AUTO_') {
+    incomeForm.setData({ code: '' });
+    return;
+  }
+
+  incomeForm.setData({ code: '_AUTO_' });
+};
+
+const clearCategory = () => {
+  incomeForm.setData({ income_category_id: '' });
+  incomeForm.forgetError('income_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  incomeForm.setData({ paid_immediately_cash_account_id: '' });
+  incomeForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = incomeForm.errors as Record<string, string | string[]>;
+
+  if (amount_total) {
+    incomeForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_receivable') => {
+  clearAmountTotalError();
+  incomeForm.validate(field);
+};
+
+const setPaymentCode = (index: number) => {
+  incomeForm.forgetError(`payments.${index}.code` as any);
+  incomePaymentsForm.value[index].code = incomePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = incomePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validateIncomeField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  incomePaymentsForm.value.push({
+    id: null,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removePayment = (index: number) => {
+  const payment = incomePaymentsForm.value[index];
+
+  if (payment?.id && !incomeForm.delete_payment_ids.includes(payment.id)) {
+    incomeForm.delete_payment_ids.push(payment.id);
+  }
+
+  incomePaymentsForm.value.splice(index, 1);
+
+  Object.keys(incomeForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      incomeForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  if (incomeForm.hasErrors) {
+    const firstErrorKey = Object.keys(incomeForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await incomeForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-income-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  incomeForm.reset();
+  incomeForm.setErrors({});
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+  await loadData();
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="incomeForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="incomeForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="incomeForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('code') }">
+                {{ t('views.income.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="incomeForm.code"
+                :class="{ 'border-danger': incomeForm.invalid('code') }"
+                :placeholder="t('views.income.fields.code')"
+                @set-auto="setCode"
+                @change="incomeForm.validate('code')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('date') }">
+                {{ t('views.income.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="incomeForm.date"
+                :class="{ 'border-danger': incomeForm.invalid('date') }"
+                :placeholder="t('views.income.fields.date')"
+                @change="incomeForm.validate('date')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('income_category_id') }">
+                {{ t('views.income.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="incomeForm.income_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': incomeForm.invalid('income_category_id') }"
+                @change="incomeForm.validate('income_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.income_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.income.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="incomeForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': incomeForm.invalid('paid_immediately_cash_account_id') }"
+                @change="incomeForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('amount_paid_immediately') }">
+                {{ t('views.income.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="incomeForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': incomeForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.income.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('amount_receivable') }">
+                {{ t('views.income.fields.amount_receivable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="incomeForm.amount_receivable"
+                :allow-negative="false"
+                :class="{ 'border-danger': incomeForm.invalid('amount_receivable') }"
+                :placeholder="t('views.income.fields.amount_receivable')"
+                @change="handleAmountChange('amount_receivable')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.amount_receivable" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('due_days') }">
+                {{ t('views.income.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="incomeForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': incomeForm.invalid('due_days') }"
+                :placeholder="t('views.income.fields.due_days')"
+                @change="incomeForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>
+                {{ t('views.income.fields.amount_total') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="amount_total"
+                :model-value="amountTotalPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': incomeForm.invalid('remarks') }">
+                {{ t('views.income.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="incomeForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': incomeForm.invalid('remarks') }"
+                :placeholder="t('views.income.fields.remarks')"
+                @change="incomeForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="incomeForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="(incomeForm.errors as any).payments" />
+          <FormErrorMessages :messages="(incomeForm.errors as any).delete_payment_ids" />
+
+          <div v-if="incomePaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div v-for="(payment, index) in incomePaymentsForm" :key="payment.id ?? `income-payment-${index}`" class="space-y-3">
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.code`) }">
+                    {{ t('views.income.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidIncomeField(`payments.${index}.code`) }"
+                    :placeholder="t('views.income.fields.code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validateIncomeField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.date`) }">
+                    {{ t('views.income.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidIncomeField(`payments.${index}.date`) }"
+                    :placeholder="t('views.income.fields.date')"
+                    @change="validateIncomeField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.income_payment.fields.cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="paidImmediatelyCashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidIncomeField(`payments.${index}.cash_account_id`) }"
+                    @change="validateIncomeField(`payments.${index}.cash_account_id`)"
+                    @search="loadPaidImmediatelyCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.amount`) }">
+                    {{ t('views.income_payment.fields.amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidIncomeField(`payments.${index}.amount`) }"
+                        @change="validateIncomeField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.amount`)" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidIncomeField(`payments.${index}.remarks`) }">
+                    {{ t('views.income.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidIncomeField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.income.fields.remarks')"
+                    @change="validateIncomeField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getIncomeFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.income.fields.images') }}
+          </FormLabel>
+          <IncomeImagesField
+            v-model="incomeForm.image_hashes"
+            v-model:existing-images="uploadedImages"
+            v-model:delete-image-ids="incomeForm.delete_image_ids"
+          />
+          <FormErrorMessages :messages="(incomeForm.errors as any).image_hashes" />
+          <FormErrorMessages :messages="(incomeForm.errors as any).delete_image_ids" />
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="incomeForm.validating || incomeForm.hasErrors"
+          >
+            <Lucide v-if="incomeForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/income/IncomeIndex.vue b/web/src/pages/income/IncomeIndex.vue
new file mode 100644
index 000000000..fb2145d15
--- /dev/null
+++ b/web/src/pages/income/IncomeIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.income.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const incomeNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[incomeNotification]', (el: NotificationElement) => {
+  incomeNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-income-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-income-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.income.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.income.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.income.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  incomeNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('INCOME_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('INCOME_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="incomeNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/income/IncomeList.vue b/web/src/pages/income/IncomeList.vue
new file mode 100644
index 000000000..1861e458c
--- /dev/null
+++ b/web/src/pages/income/IncomeList.vue
@@ -0,0 +1,475 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import IncomeService from '@/services/IncomeService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { Income } from '@/types/models/Income';
+import type { IncomeImage } from '@/types/models/IncomeImage';
+import type { IncomePayment } from '@/types/models/IncomePayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { IncomeReadAnyPaginateRequest } from '@/types/services/income/IncomeRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const incomeService = new IncomeService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | null>(null);
+const isImagePreviewOpen = ref(false);
+const previewImages = ref<IncomeImage[]>([]);
+const previewImageIndex = ref(0);
+const previewIncomeCode = ref('');
+const incomeLists = ref<Collection<Array<Income>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+  await getIncomes('', true, 1, 10);
+});
+
+const getIncomes = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  const searchReq: IncomeReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    income_category_id: null,
+    is_amount_receivable_paid_off: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+  const result: ServiceResponse<Collection<Array<Income>> | null> = await incomeService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    incomeLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getIncomes(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const editSelected = (idx: number) => {
+  if (!incomeLists.value) return;
+  router.push({
+    name: 'side-menu-income-edit',
+    params: { ulid: incomeLists.value.data[idx].ulid },
+  });
+};
+
+const viewSelected = (idx: number) => {
+  if (!incomeLists.value) return;
+
+  const income = incomeLists.value.data[idx];
+  expandDetail.value = expandDetail.value === income.ulid ? null : income.ulid;
+};
+
+const deleteSelected = (idx: number) => {
+  if (!incomeLists.value) return;
+  deleteUlid.value = incomeLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+  const result = await incomeService.delete(deleteUlid.value);
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getIncomes('', true, 1, 10);
+    showNotification(t('views.income.alert.delete_income.title'), t('views.income.alert.delete_income.content'));
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+
+const getCategoryLabel = (income: Income) => {
+  if (!income.category) return '-';
+
+  return income.category.display_code ? `${income.category.display_code} - ${income.category.name}` : income.category.name;
+};
+
+const getCashAccountLabel = (income: Income) => {
+  if (!income.paid_immediately_cash_account) return '-';
+
+  return income.paid_immediately_cash_account.code
+    ? `${income.paid_immediately_cash_account.code} - ${income.paid_immediately_cash_account.name}`
+    : income.paid_immediately_cash_account.name;
+};
+
+const getPaidOffLabel = (income: Income) =>
+  income.is_amount_receivable_paid_off ? t('views.income.status.paid_off') : t('views.income.status.not_paid_off');
+
+const getIncomeImages = (income: Income): IncomeImage[] => {
+  const images = income.income_images?.filter((image) => !!image.url) ?? [];
+
+  if (images.length > 0) {
+    return images;
+  }
+
+  return income.main_income_image?.url ? [income.main_income_image] : [];
+};
+
+const getIncomePayments = (income: Income) => income.payments ?? [];
+
+const getPaymentCashAccountLabel = (payment: IncomePayment) => {
+  if (!payment.cash_account) return '-';
+
+  return payment.cash_account.code ? `${payment.cash_account.code} - ${payment.cash_account.name}` : payment.cash_account.name;
+};
+
+const openImagePreview = (income: Income) => {
+  const images = getIncomeImages(income);
+
+  if (!images.length) return;
+
+  const mainImageIndex = images.findIndex((image) => image.is_main);
+
+  previewImages.value = images;
+  previewImageIndex.value = mainImageIndex >= 0 ? mainImageIndex : 0;
+  previewIncomeCode.value = income.code;
+  isImagePreviewOpen.value = true;
+};
+
+const closeImagePreview = () => {
+  isImagePreviewOpen.value = false;
+  previewImages.value = [];
+  previewImageIndex.value = 0;
+  previewIncomeCode.value = '';
+};
+
+const showPreviousImage = () => {
+  if (previewImages.value.length <= 1) return;
+
+  previewImageIndex.value =
+    previewImageIndex.value === 0 ? previewImages.value.length - 1 : previewImageIndex.value - 1;
+};
+
+const showNextImage = () => {
+  if (previewImages.value.length <= 1) return;
+
+  previewImageIndex.value =
+    previewImageIndex.value === previewImages.value.length - 1 ? 0 : previewImageIndex.value + 1;
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="incomeLists"
+        :title="t('views.income.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="incomeLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="incomeLists ? incomeLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-6 lg:col-span-6 self-start">
+            <div class="space-y-2">
+              <div class="flex items-start justify-between gap-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  Income
+                </div>
+                <div
+                  v-if="(item as Income).main_income_image?.url"
+                  class="flex cursor-zoom-in items-center gap-2 rounded-md border border-slate-200/60 bg-slate-50 px-2 py-1 dark:border-darkmode-400 dark:bg-darkmode-700/50"
+                  @click="openImagePreview(item as Income)"
+                >
+                  <img
+                    :src="(item as Income).main_income_image?.url"
+                    alt="Income attachment"
+                    class="h-10 w-10 rounded object-cover"
+                  />
+                  <div class="text-[11px] font-medium text-slate-600 dark:text-slate-300">
+                    Attachment
+                  </div>
+                </div>
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.income.fields.code') }}</div>
+                <div class="col-span-8 break-words font-medium text-slate-700 dark:text-slate-200">
+                  {{ (item as Income).code }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.income.fields.date') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as Income).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.income.fields.category') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCategoryLabel(item as Income) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.income.fields.paid_immediately_cash_account') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCashAccountLabel(item as Income) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.income.fields.amount_paid_immediately') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  <div class="w-full max-w-[8rem] font-semibold">
+                    {{ formatCurrency(Number((item as Income).amount_paid_immediately ?? 0)) }}
+                  </div>
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.income.fields.remarks') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as Income).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-4 self-start lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.income.field_groups.receivable_summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-5 text-slate-500">{{ t('views.income.fields.amount_receivable') }}</div>
+                <div class="col-span-7 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Income).amount_receivable ?? 0)) }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.income.fields.due_days') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as Income).due_days ?? 0 }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.income.fields.amount_receivable_paid') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Income).amount_receivable_paid ?? 0)) }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.income.fields.amount_receivable_due') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Income).amount_receivable_due ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.income.fields.amount_total') }}</div>
+                <div class="col-span-5 text-right font-semibold text-primary">
+                  {{ formatCurrency(Number((item as Income).amount_total ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.income.fields.is_amount_receivable_paid_off') }}</div>
+                <div class="col-span-5 text-right">
+                  <span
+                    class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium"
+                    :class="
+                      (item as Income).is_amount_receivable_paid_off
+                        ? 'bg-success/20 text-success'
+                        : 'bg-warning/20 text-warning'
+                    "
+                  >
+                    {{ getPaidOffLabel(item as Income) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-2 self-center">
+            <div class="flex justify-end gap-2 md:justify-start lg:min-h-full lg:items-center lg:justify-center">
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="viewSelected(index)"
+                >
+                  <Lucide icon="Info" class="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="editSelected(index)"
+                >
+                  <Lucide icon="Pen" class="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="deleteSelected(index)"
+                >
+                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                </Button>
+            </div>
+          </div>
+
+          <div
+            v-if="expandDetail === (item as Income).ulid"
+            class="col-span-12 mt-2 border-t border-slate-200 pt-3 dark:border-darkmode-400"
+          >
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  Payment Detail
+                </div>
+
+                <div v-if="!getIncomePayments(item as Income).length" class="text-xs text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <div v-else class="space-y-3 rounded-md border border-slate-200/60 p-3 dark:border-darkmode-400">
+                  <div
+                    v-for="payment in getIncomePayments(item as Income)"
+                    :key="payment.ulid"
+                    class="border-b border-slate-200/60 pb-3 text-sm last:border-b-0 last:pb-0 dark:border-darkmode-400"
+                  >
+                    <div class="font-medium break-words text-slate-700 dark:text-slate-200">
+                      {{ payment.code }}
+                    </div>
+                    <div class="mt-1 break-words text-xs text-slate-500">
+                      {{ formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss') }}
+                    </div>
+                    <div class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-600 dark:text-slate-300">
+                      <span>
+                        {{ t('views.income_payment.fields.cash_account') }}
+                        <span class="text-slate-700 dark:text-slate-200">{{ getPaymentCashAccountLabel(payment) }}</span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.income_payment.fields.amount') }}
+                        <span class="font-medium text-slate-700 dark:text-slate-200">
+                          {{ formatCurrency(Number(payment.amount ?? 0)) }}
+                        </span>
+                      </span>
+                    </div>
+                    <div v-if="payment.remarks?.trim()" class="mt-2 break-words text-xs text-slate-500">
+                      {{ payment.remarks }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="isImagePreviewOpen" size="xl" @close="closeImagePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <div class="flex items-center justify-between gap-4">
+          <div class="font-medium">
+            {{ previewIncomeCode }} - Attachment
+          </div>
+          <div class="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              size="sm"
+              :disabled="previewImages.length <= 1"
+              @click="showPreviousImage"
+            >
+              <Lucide icon="ChevronLeft" class="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              variant="outline-secondary"
+              size="sm"
+              :disabled="previewImages.length <= 1"
+              @click="showNextImage"
+            >
+              <Lucide icon="ChevronRight" class="h-4 w-4" />
+            </Button>
+            <Button type="button" variant="outline-secondary" size="sm" @click="closeImagePreview">
+              <Lucide icon="X" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </Dialog.Title>
+      <Dialog.Description class="space-y-4 bg-slate-900 p-4">
+        <div class="flex min-h-[60vh] items-center justify-center">
+          <img
+            v-if="previewImages[previewImageIndex]?.url"
+            :src="previewImages[previewImageIndex]?.url"
+            class="max-h-[70vh] max-w-full object-contain"
+          />
+        </div>
+        <div
+          v-if="previewImages.length > 1"
+          class="flex gap-2 overflow-x-auto border-t border-slate-700 pt-3"
+        >
+          <button
+            v-for="(image, imageIndex) in previewImages"
+            :key="image.id"
+            type="button"
+            class="overflow-hidden rounded border-2"
+            :class="imageIndex === previewImageIndex ? 'border-primary' : 'border-transparent opacity-70'"
+            @click="previewImageIndex = imageIndex"
+          >
+            <img :src="image.url" class="h-14 w-14 object-cover" />
+          </button>
+        </div>
+      </Dialog.Description>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/investor/InvestorCreate.vue b/web/src/pages/investor/InvestorCreate.vue
new file mode 100644
index 000000000..368d188bf
--- /dev/null
+++ b/web/src/pages/investor/InvestorCreate.vue
@@ -0,0 +1,298 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { isAxiosError, AxiosError } from 'axios';
+  import InvestorService from '@/services/InvestorService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormInputCode,
+    FormSwitch,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const investorServices = new InvestorService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.investor.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.investor.field_groups.investor_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const investorForm = investorServices.useInvestorCreateForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await Promise.all([getDDL()]);
+
+    loadFromCache();
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setCompanyIdData = () => {
+    investorForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('INVESTOR_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    investorForm.setData(data);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    const result = await dashboardServices.getStatusDDL();
+    if (result) {
+      statusDDL.value = result;
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (investorForm.hasErrors) {
+      scrollToError(Object.keys(investorForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await investorForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-company-investor-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    investorForm.reset();
+    investorForm.setErrors({});
+  };
+
+  const setCode = () => {
+    investorForm.forgetError('code');
+    if (investorForm.code == '_AUTO_') {
+      investorForm.setData({ code: '' });
+    } else {
+      investorForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const convertErrorTypeToAlertListType = (error: unknown) => {
+    const record: Record<string, Array<string>> = {};
+    const anyError = error as any;
+    const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+    if (response && response.data) {
+      const data = response.data as any;
+      if (data.errors && typeof data.errors === 'object') {
+        for (const key of Object.keys(data.errors)) {
+          const value = data.errors[key];
+          if (Array.isArray(value)) {
+            record[key] = value;
+          } else if (value !== undefined && value !== null) {
+            record[key] = [String(value)];
+          }
+        }
+        return record;
+      }
+      if (data.message) {
+        record.error = [String(data.message)];
+        return record;
+      }
+    }
+
+    if (error instanceof Error && error.message) {
+      record.error = [error.message];
+    } else {
+      record.error = ['Unknown error'];
+    }
+
+    return record;
+  };
+  // #endregion
+
+  // #region Watchers
+  watch(
+    investorForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('INVESTOR_CREATE', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="investorForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="investorForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': investorForm.invalid('code') }">
+              {{ t('views.investor.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="investorForm.code"
+              type="text"
+              :class="{ 'border-danger': investorForm.invalid('code') }"
+              :placeholder="t('views.investor.fields.code')"
+              @set-auto="setCode"
+              @change="investorForm.validate('code')"
+            />
+            <FormErrorMessages :messages="investorForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': investorForm.invalid('name') }">
+              {{ t('views.investor.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="investorForm.name"
+              type="text"
+              :class="{ 'border-danger': investorForm.invalid('name') }"
+              :placeholder="t('views.investor.fields.name')"
+              @change="investorForm.validate('name')"
+            />
+            <FormErrorMessages :messages="investorForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.investor.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="investorForm.remarks"
+              type="text"
+              :placeholder="t('views.investor.fields.remarks')"
+              rows="3"
+            />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="investorForm.validating || investorForm.hasErrors"
+          >
+            <Lucide v-if="investorForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/investor/InvestorEdit.vue b/web/src/pages/investor/InvestorEdit.vue
new file mode 100644
index 000000000..6af6bbc78
--- /dev/null
+++ b/web/src/pages/investor/InvestorEdit.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+  import InvestorService from '@/services/InvestorService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { FormInput, FormLabel, FormTextarea, FormInputCode, FormErrorMessages } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { Investor } from '@/types/models/Investor';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const route = useRoute();
+
+  const investorServices = new InvestorService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.investor.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.investor.field_groups.investor_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const investorForm = investorServices.useInvestorEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await Promise.all([getDDL(), loadData(route.params.ulid as string)]);
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    const result: ServiceResponse<Investor | null> = await investorServices.read(ulid);
+
+    if (result.success && result.data) {
+      investorForm.setData({
+        company_id: result.data.company.id,
+        code: result.data.code,
+        name: result.data.name,
+        remarks: result.data.remarks,
+      });
+    } else {
+      router.push({ name: 'side-menu-company-investor-list' });
+    }
+    emits('loading-state', false);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    statusDDL.value = await dashboardServices.getStatusDDL();
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (investorForm.hasErrors) {
+      scrollToError(Object.keys(investorForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await investorForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-company-investor-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    investorForm.reset();
+    investorForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    investorForm.forgetError('code');
+    if (investorForm.code == '_AUTO_') {
+      investorForm.setData({ code: '' });
+    } else {
+      investorForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    investorForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('INVESTOR_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="investorForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="investorForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': investorForm.invalid('code') }">
+              {{ t('views.investor.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="investorForm.code"
+              type="text"
+              :class="{ 'border-danger': investorForm.invalid('code') }"
+              :placeholder="t('views.investor.fields.code')"
+              @set-auto="setCode"
+              @change="investorForm.validate('code')"
+            />
+            <FormErrorMessages :messages="investorForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': investorForm.invalid('name') }">
+              {{ t('views.investor.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="investorForm.name"
+              type="text"
+              :class="{ 'border-danger': investorForm.invalid('name') }"
+              :placeholder="t('views.investor.fields.name')"
+              @change="investorForm.validate('name')"
+            />
+            <FormErrorMessages :messages="investorForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.investor.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="investorForm.remarks"
+              type="text"
+              :placeholder="t('views.investor.fields.remarks')"
+              rows="3"
+            />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="investorForm.validating || investorForm.hasErrors"
+          >
+            <Lucide v-if="investorForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/investor/InvestorIndex.vue b/web/src/pages/investor/InvestorIndex.vue
new file mode 100644
index 000000000..ff1768e6e
--- /dev/null
+++ b/web/src/pages/investor/InvestorIndex.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.investor.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const investorNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[investorNotification]', (el: NotificationElement) => {
+    investorNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-company-investor-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-company-investor-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.investor.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.investor.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.investor.page_title';
+        break;
+    }
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('INVESTOR_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('INVESTOR_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (investorNotification.value) investorNotification.value.showToast();
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="investorNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/investor/InvestorList.vue b/web/src/pages/investor/InvestorList.vue
new file mode 100644
index 000000000..0df2db61c
--- /dev/null
+++ b/web/src/pages/investor/InvestorList.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import InvestorService from '@/services/InvestorService';
+  import { Investor } from '@/types/models/Investor';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Resource } from '@/types/resources/Resource';
+  import { InvestorReadAnyPaginateRequest } from '@/types/services/investor/InvestorRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const investorServices = new InvestorService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const investorLists = ref<Collection<Array<Investor>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getInvestors('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getInvestors = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    const company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: InvestorReadAnyPaginateRequest = {
+      with_trashed: false,
+      company_id: company_id,
+      search: search,
+      include_id: undefined,
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    const result: ServiceResponse<Collection<Array<Investor>> | Resource<Array<Investor>> | null> =
+      await investorServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      investorLists.value = result.data as Collection<Array<Investor>>;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getInvestors(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!investorLists.value) return;
+
+    let ulid = investorLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-company-investor-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!investorLists.value) return;
+
+    let itemUlid = investorLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await investorServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getInvestors('', true, 1, 10);
+      showNotification(
+        t('views.investor.alert.delete_investor.title'),
+        t('views.investor.alert.delete_investor.content'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.investor.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="investorLists ? investorLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.investor.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.investor.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.investor.table.cols.remarks') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="investorLists !== null">
+          <template v-if="investorLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in investorLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>{{ item.remarks }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.investor.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.investor.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.investor.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/journal-entry/JournalEntryCreate.vue b/web/src/pages/journal-entry/JournalEntryCreate.vue
new file mode 100644
index 000000000..6078d1be6
--- /dev/null
+++ b/web/src/pages/journal-entry/JournalEntryCreate.vue
@@ -0,0 +1,478 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { debounce } from 'lodash';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import JournalEntryService from '@/services/JournalEntryService';
+import ChartOfAccountService from '@/services/ChartOfAccountService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormSelect,
+  FormTextarea,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const journalEntryService = new JournalEntryService();
+const chartOfAccountService = new ChartOfAccountService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.journal_entry.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.journal_entry.field_groups.journal_entry_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.journal_entry.field_groups.items',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const journalEntryForm = journalEntryService.useJournalEntryCreateForm();
+const accountOptionsDDL = ref<Array<{ value: string; label: string }>>([]);
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+const companyLabel = computed(() =>
+  selectedUserLocation.value
+    ? `${selectedUserLocation.value.company.code}\n${selectedUserLocation.value.company.name}`
+    : '',
+);
+const branchLabel = computed(() =>
+  selectedUserLocation.value
+    ? `${selectedUserLocation.value.branch.code}\n${selectedUserLocation.value.branch.name}`
+    : '',
+);
+const totalDebit = computed(() =>
+  journalEntryForm.items.reduce((total, item) => total + Number(item.debit || 0), 0),
+);
+const totalCredit = computed(() =>
+  journalEntryForm.items.reduce((total, item) => total + Number(item.credit || 0), 0),
+);
+const isBalanced = computed(() => Number(totalDebit.value.toFixed(8)) === Number(totalCredit.value.toFixed(8)));
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setDefaultHeaderData();
+  ensureMinimumItems();
+  await loadChartOfAccountDDL();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  journalEntryForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('JOURNAL_ENTRY_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('JOURNAL_ENTRY_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  journalEntryForm.setData(data);
+};
+
+const setDefaultHeaderData = () => {
+  journalEntryForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    code: journalEntryForm.code || '_AUTO_',
+    date: journalEntryForm.date || '_AUTO_',
+    source_type: journalEntryForm.source_type || null,
+    source_id: journalEntryForm.source_id || null,
+    reference_no: journalEntryForm.reference_no || '',
+    remarks: journalEntryForm.remarks || '',
+  });
+};
+
+const loadChartOfAccountDDL = async () => {
+  const result = await chartOfAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: '',
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: undefined,
+    is_group: false,
+    is_active: true,
+    include_id: undefined,
+    refresh: false,
+    limit: 1000,
+  });
+
+  if (result.success && result.data) {
+    accountOptionsDDL.value = result.data.data.map((item) => ({
+      value: item.id,
+      label: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const setCode = () => {
+  journalEntryForm.forgetError('code');
+  if (journalEntryForm.code === '_AUTO_') {
+    journalEntryForm.setData({ code: '' });
+  } else {
+    journalEntryForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const addItem = () => {
+  journalEntryForm.items.push({
+    chart_of_account_id: '',
+    debit: 0,
+    credit: 0,
+    remarks: '',
+  });
+};
+
+const ensureMinimumItems = () => {
+  while (journalEntryForm.items.length < 2) {
+    addItem();
+  }
+};
+
+const removeItem = (index: number) => {
+  journalEntryForm.items.splice(index, 1);
+  if (journalEntryForm.items.length === 0) {
+    ensureMinimumItems();
+  }
+};
+
+const invalidItemField = (field: string) => journalEntryForm.invalid(field as any);
+const itemFieldErrors = (field: string): string | undefined => {
+  const error = (journalEntryForm.errors as Record<string, Array<string> | string | undefined>)[field];
+
+  if (Array.isArray(error)) {
+    return error.join(', ');
+  }
+
+  return error;
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  journalEntryForm.reset();
+  journalEntryForm.setErrors({});
+  journalEntryForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    source_type: null,
+    source_id: null,
+    reference_no: '',
+    remarks: '',
+    items: [],
+  });
+  ensureMinimumItems();
+};
+
+const onSubmit = async () => {
+  if (journalEntryForm.hasErrors) {
+    const firstErrorKey = Object.keys(journalEntryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await journalEntryForm
+    .submit()
+    .then(async () => {
+      await resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-journal-entry-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="journalEntryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel>{{ t('views.journal_entry.fields.company') }}</FormLabel>
+              <FormLabel class="whitespace-pre-line">{{ companyLabel }}</FormLabel>
+              <FormInput type="hidden" v-model="journalEntryForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel>{{ t('views.journal_entry.fields.branch') }}</FormLabel>
+              <FormLabel class="whitespace-pre-line">{{ branchLabel }}</FormLabel>
+              <FormInput type="hidden" v-model="journalEntryForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('code') }">
+                {{ t('views.journal_entry.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="journalEntryForm.code"
+                :class="{ 'border-danger': journalEntryForm.invalid('code') }"
+                @click="setCode"
+                @change="journalEntryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('date') }">
+                {{ t('views.journal_entry.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="journalEntryForm.date"
+                :class="{ 'border-danger': journalEntryForm.invalid('date') }"
+                @change="journalEntryForm.validate('date')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('reference_no') }">
+                {{ t('views.journal_entry.fields.reference_no') }}
+              </FormLabel>
+              <FormInput
+                v-model="journalEntryForm.reference_no"
+                :class="{ 'border-danger': journalEntryForm.invalid('reference_no') }"
+                @change="journalEntryForm.validate('reference_no')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.reference_no" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('source_type') }">
+                {{ t('views.journal_entry.fields.source_type') }}
+              </FormLabel>
+              <FormInput
+                v-model="journalEntryForm.source_type"
+                :class="{ 'border-danger': journalEntryForm.invalid('source_type') }"
+                @change="journalEntryForm.validate('source_type')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.source_type" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('source_id') }">
+                {{ t('views.journal_entry.fields.source_id') }}
+              </FormLabel>
+              <FormInput
+                v-model="journalEntryForm.source_id"
+                type="number"
+                min="1"
+                :class="{ 'border-danger': journalEntryForm.invalid('source_id') }"
+                @change="journalEntryForm.validate('source_id')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.source_id" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('remarks') }">
+                {{ t('views.journal_entry.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="journalEntryForm.remarks"
+                :class="{ 'border-danger': journalEntryForm.invalid('remarks') }"
+                @change="journalEntryForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div class="mb-4 flex items-center justify-between">
+            <div>
+              <div class="text-base font-medium">{{ t('views.journal_entry.fields.items') }}</div>
+              <div class="text-sm text-slate-500">
+                {{ t('views.journal_entry.helper.single_side_amount') }}
+              </div>
+            </div>
+            <Button type="button" variant="outline-primary" @click="addItem">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('views.journal_entry.actions.add_item') }}
+            </Button>
+          </div>
+
+          <FormErrorMessages :messages="journalEntryForm.errors.items" />
+
+          <div class="space-y-4">
+            <div
+              v-for="(item, index) in journalEntryForm.items"
+              :key="index"
+              class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400"
+            >
+              <div class="mb-3 flex items-center justify-between">
+                <div class="font-medium">{{ t('views.journal_entry.fields.item') }} #{{ index + 1 }}</div>
+                <Button type="button" variant="outline-danger" @click="removeItem(index)">
+                  <Lucide icon="Trash2" class="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.chart_of_account_id`) }">
+                    {{ t('views.journal_entry.fields.chart_of_account') }}
+                  </FormLabel>
+                  <FormSelect
+                    :id="`items.${index}.chart_of_account_id`"
+                    v-model="item.chart_of_account_id"
+                    :options="accountOptionsDDL"
+                    :class="{ 'border-danger': invalidItemField(`items.${index}.chart_of_account_id`) }"
+                    @change="journalEntryForm.validate(`items.${index}.chart_of_account_id` as any)"
+                  />
+                  <FormErrorMessages :messages="itemFieldErrors(`items.${index}.chart_of_account_id`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.debit`) }">
+                    {{ t('views.journal_entry.fields.debit') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`items.${index}.debit`"
+                    v-model="item.debit"
+                    :allow-negative="false"
+                    :class="{ 'border-danger': invalidItemField(`items.${index}.debit`) }"
+                    @change="journalEntryForm.validate(`items.${index}.debit` as any)"
+                  />
+                  <FormErrorMessages :messages="itemFieldErrors(`items.${index}.debit`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.credit`) }">
+                    {{ t('views.journal_entry.fields.credit') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`items.${index}.credit`"
+                    v-model="item.credit"
+                    :allow-negative="false"
+                    :class="{ 'border-danger': invalidItemField(`items.${index}.credit`) }"
+                    @change="journalEntryForm.validate(`items.${index}.credit` as any)"
+                  />
+                  <FormErrorMessages :messages="itemFieldErrors(`items.${index}.credit`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.remarks`) }">
+                    {{ t('views.journal_entry.fields.item_remarks') }}
+                  </FormLabel>
+                  <FormInput
+                    :id="`items.${index}.remarks`"
+                    v-model="item.remarks"
+                    :class="{ 'border-danger': invalidItemField(`items.${index}.remarks`) }"
+                    @change="journalEntryForm.validate(`items.${index}.remarks` as any)"
+                  />
+                  <FormErrorMessages :messages="itemFieldErrors(`items.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-5 rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="grid grid-cols-12 gap-4 text-sm">
+              <div class="col-span-12 lg:col-span-4">
+                <div class="text-slate-500">{{ t('views.journal_entry.fields.total_debit') }}</div>
+                <div class="text-lg font-medium">{{ formatCurrency(totalDebit) }}</div>
+              </div>
+              <div class="col-span-12 lg:col-span-4">
+                <div class="text-slate-500">{{ t('views.journal_entry.fields.total_credit') }}</div>
+                <div class="text-lg font-medium">{{ formatCurrency(totalCredit) }}</div>
+              </div>
+              <div class="col-span-12 lg:col-span-4">
+                <div class="text-slate-500">{{ t('views.journal_entry.fields.balance_status') }}</div>
+                <div :class="['text-lg font-medium', isBalanced ? 'text-success' : 'text-danger']">
+                  {{ isBalanced ? t('views.journal_entry.options.balance.balanced') : t('views.journal_entry.options.balance.unbalanced') }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="button" variant="outline-secondary" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+          <Button type="submit" variant="primary">
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/journal-entry/JournalEntryDetailIndex.vue b/web/src/pages/journal-entry/JournalEntryDetailIndex.vue
new file mode 100644
index 000000000..7e2f06407
--- /dev/null
+++ b/web/src/pages/journal-entry/JournalEntryDetailIndex.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const mode = ref<ViewMode>(ViewMode.LIST);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.journal_entry.report_entry_detail_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-journal-entry-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+      />
+    </LoadingOverlay>
+  </div>
+</template>
diff --git a/web/src/pages/journal-entry/JournalEntryDetailList.vue b/web/src/pages/journal-entry/JournalEntryDetailList.vue
new file mode 100644
index 000000000..41b3caf46
--- /dev/null
+++ b/web/src/pages/journal-entry/JournalEntryDetailList.vue
@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import DataList from '@/components/DataList';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { FormInputDateTime, FormLabel, FormSwitch } from '@/components/Base/Form';
+import JournalEntryItemService from '@/services/JournalEntryItemService';
+import type { JournalEntryItem } from '@/types/models/JournalEntry';
+import type { Collection } from '@/types/resources/Collection';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+
+interface JournalEntryDetailRow {
+  id: string;
+  sequence: number;
+  journal_code: string;
+  date: string;
+  reference_no: string | null;
+  account_code: string | null;
+  account_name: string | null;
+  debit: number;
+  credit: number;
+  remarks: string | null;
+  journal_remarks: string | null;
+}
+
+const { t } = useI18n();
+const router = useRouter();
+const journalEntryItemService = new JournalEntryItemService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'show-alertplaceholder',
+]);
+
+const filters = ref<{
+  search: string;
+  include_system_journals: boolean;
+  start_date: string | null;
+  end_date: string | null;
+}>({
+  search: '',
+  include_system_journals: false,
+  start_date: null,
+  end_date: null,
+});
+
+const journalEntryItemLists = ref<Collection<Array<JournalEntryItem>> | null>({
+  data: [],
+  meta: {
+    current_page: 1,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 10,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const entryDetails = computed<JournalEntryDetailRow[]>(() =>
+  (journalEntryItemLists.value?.data ?? []).map((item) => ({
+    id: item.id,
+    sequence: item.sequence,
+    journal_code: item.journal_entry?.code ?? '-',
+    date: item.journal_entry?.date ?? '',
+    reference_no: item.journal_entry?.reference_no ?? null,
+    account_code: item.chart_of_account?.code ?? null,
+    account_name: item.chart_of_account?.name ?? null,
+    debit: item.debit,
+    credit: item.credit,
+    remarks: item.remarks,
+    journal_remarks: item.journal_entry?.remarks ?? null,
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  filters.value.start_date = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  filters.value.end_date = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getEntryDetails(true, 1, journalEntryItemLists.value?.meta.per_page ?? 10);
+});
+
+const getEntryDetails = async (refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<Collection<Array<JournalEntryItem>> | null> = await journalEntryItemService.readAnyPaginate({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search: filters.value.search || undefined,
+    start_date: filters.value.start_date || undefined,
+    end_date: filters.value.end_date || undefined,
+    include_system_journals: filters.value.include_system_journals,
+    refresh,
+    page,
+    per_page: perPage,
+  });
+
+  if (result.success && result.data) {
+    journalEntryItemLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  filters.value.search = data.search.text;
+  await getEntryDetails(false, data.pagination.page, data.pagination.per_page);
+};
+
+const handleDateFilterChange = async () => {
+  await getEntryDetails(true, 1, journalEntryItemLists.value?.meta.per_page ?? 10);
+};
+
+const handleSystemJournalFilterChange = async () => {
+  await getEntryDetails(true, 1, journalEntryItemLists.value?.meta.per_page ?? 10);
+};
+
+const formatAmountCell = (value: number) => {
+  return Number(value) === 0 ? '-' : formatCurrency(value);
+};
+
+const amountCellClass = (value: number) => {
+  return Number(value) === 0
+    ? 'text-slate-300 dark:text-slate-500'
+    : 'text-slate-700 dark:text-slate-100';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="mb-3 grid grid-cols-12 gap-4 gap-y-3">
+        <div class="col-span-12 md:col-span-4">
+          <FormLabel>
+            {{ t('views.journal_entry.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime
+            v-model="filters.start_date"
+            :placeholder="t('views.journal_entry.fields.start_date')"
+            @change="handleDateFilterChange"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-4">
+          <FormLabel>
+            {{ t('views.journal_entry.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime
+            v-model="filters.end_date"
+            :placeholder="t('views.journal_entry.fields.end_date')"
+            @change="handleDateFilterChange"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-4 flex items-center">
+          <FormSwitch>
+            <FormSwitch.Input
+              v-model="filters.include_system_journals"
+              type="checkbox"
+              @change="handleSystemJournalFilterChange"
+            />
+            <FormSwitch.Label>
+              {{ t('views.journal_entry.fields.include_system_journals') }}
+            </FormSwitch.Label>
+          </FormSwitch>
+        </div>
+      </div>
+
+      <DataList
+        :title="t('views.journal_entry.page_title')"
+        :enable-search="true"
+        :can-print="false"
+        :can-export="false"
+        :pagination="journalEntryItemLists ? journalEntryItemLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #content>
+          <div v-if="entryDetails.length === 0" class="mt-5 flex justify-center italic">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="mt-5 space-y-4">
+            <div
+              v-for="item in entryDetails"
+              :key="item.id"
+              class="grid grid-cols-12 gap-4 rounded-xl border border-slate-200 bg-slate-50/80 p-4 shadow-sm dark:border-darkmode-400 dark:bg-darkmode-600/30"
+            >
+              <div class="col-span-12 md:col-span-3 self-start">
+                <div class="space-y-2">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                    {{ t('views.journal_entry.page_title') }}
+                  </div>
+                  <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                    <div class="col-span-4 text-slate-500">{{ t('views.journal_entry.fields.code') }}</div>
+                    <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                      {{ item.journal_code }}
+                    </div>
+                    <div class="col-span-4 text-slate-500">{{ t('views.journal_entry.fields.item') }}</div>
+                    <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                      #{{ item.sequence }}
+                    </div>
+                    <div class="col-span-4 text-slate-500">{{ t('views.journal_entry.fields.date') }}</div>
+                    <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                      {{ item.date ? formatDate(item.date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+                    </div>
+                    <div class="col-span-4 text-slate-500">{{ t('views.journal_entry.fields.reference_no') }}</div>
+                    <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                      {{ item.reference_no || '-' }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 md:col-span-5 self-start md:px-3">
+                <div class="space-y-2">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                    {{ t('views.journal_entry.field_groups.items') }}
+                  </div>
+                  <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                    <div class="col-span-4 text-slate-500">{{ t('views.journal_entry.fields.chart_of_account') }}</div>
+                    <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                      {{ item.account_code || '-' }} - {{ item.account_name || '-' }}
+                    </div>
+                    <div class="col-span-4 text-slate-500">{{ t('views.journal_entry.fields.item_remarks') }}</div>
+                    <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                      {{ item.remarks || '-' }}
+                    </div>
+                    <div class="col-span-4 text-slate-500">{{ t('views.journal_entry.fields.remarks') }}</div>
+                    <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                      {{ item.journal_remarks || '-' }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 md:col-span-2 self-start">
+                <div class="space-y-2">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                    {{ t('views.journal_entry.fields.debit') }}
+                  </div>
+                  <div
+                    :class="[
+                      'flex min-h-[84px] items-center justify-end rounded-lg border border-slate-200/60 bg-white px-4 py-3 shadow-sm dark:border-darkmode-400 dark:bg-darkmode-500/20',
+                      amountCellClass(item.debit),
+                    ]"
+                  >
+                    <div class="text-right text-lg font-semibold tabular-nums">
+                      {{ formatAmountCell(item.debit) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 md:col-span-2 self-start">
+                <div class="space-y-2">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                    {{ t('views.journal_entry.fields.credit') }}
+                  </div>
+                  <div
+                    :class="[
+                      'flex min-h-[84px] items-center justify-end rounded-lg border border-slate-200/60 bg-white px-4 py-3 shadow-sm dark:border-darkmode-400 dark:bg-darkmode-500/20',
+                      amountCellClass(item.credit),
+                    ]"
+                  >
+                    <div class="text-right text-lg font-semibold tabular-nums">
+                      {{ formatAmountCell(item.credit) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataList>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/journal-entry/JournalEntryEdit.vue b/web/src/pages/journal-entry/JournalEntryEdit.vue
new file mode 100644
index 000000000..290076ba5
--- /dev/null
+++ b/web/src/pages/journal-entry/JournalEntryEdit.vue
@@ -0,0 +1,434 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import JournalEntryService from '@/services/JournalEntryService';
+import ChartOfAccountService from '@/services/ChartOfAccountService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormSelect,
+  FormTextarea,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { JournalEntry } from '@/types/models/JournalEntry';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const journalEntryService = new JournalEntryService();
+const chartOfAccountService = new ChartOfAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.journal_entry.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.journal_entry.field_groups.journal_entry_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.journal_entry.field_groups.items',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const journalEntryForm = journalEntryService.useJournalEntryEditForm(route.params.ulid.toString());
+const journalEntryData = ref<JournalEntry | null>(null);
+const accountOptionsDDL = ref<Array<{ value: string; label: string }>>([]);
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const totalDebit = computed(() =>
+  journalEntryForm.items.reduce((total, item) => total + Number(item.debit || 0), 0),
+);
+const totalCredit = computed(() =>
+  journalEntryForm.items.reduce((total, item) => total + Number(item.credit || 0), 0),
+);
+const isBalanced = computed(() => Number(totalDebit.value.toFixed(8)) === Number(totalCredit.value.toFixed(8)));
+const companyLabel = computed(() =>
+  journalEntryData.value?.company ? `${journalEntryData.value.company.code}\n${journalEntryData.value.company.name}` : '',
+);
+const branchLabel = computed(() =>
+  journalEntryData.value?.branch ? `${journalEntryData.value.branch.code}\n${journalEntryData.value.branch.name}` : '',
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const loadChartOfAccountDDL = async (companyId: string) => {
+  const result = await chartOfAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: companyId,
+    search: '',
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: undefined,
+    is_group: false,
+    is_active: true,
+    include_id: undefined,
+    refresh: false,
+    limit: 1000,
+  });
+
+  if (result.success && result.data) {
+    accountOptionsDDL.value = result.data.data.map((item) => ({
+      value: item.id,
+      label: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await journalEntryService.read(route.params.ulid.toString());
+
+  if (result.success && result.data) {
+    journalEntryData.value = result.data;
+    journalEntryForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      code: result.data.code,
+      date: result.data.date,
+      reference_no: result.data.reference_no ?? '',
+      remarks: result.data.remarks ?? '',
+      items: result.data.items.map((item) => ({
+        chart_of_account_id: item.chart_of_account?.id ?? '',
+        debit: Number(item.debit ?? 0),
+        credit: Number(item.credit ?? 0),
+        remarks: item.remarks ?? '',
+      })),
+    } as any);
+
+    if (result.data.company?.id) {
+      await loadChartOfAccountDDL(result.data.company.id);
+    }
+  } else {
+    router.push({ name: 'side-menu-journal-entry-list' });
+  }
+
+  emits('loading-state', false);
+};
+
+const setCode = () => {
+  journalEntryForm.forgetError('code');
+  if (journalEntryForm.code === '_AUTO_') {
+    journalEntryForm.setData({ code: '' });
+  } else {
+    journalEntryForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const addItem = () => {
+  journalEntryForm.items.push({
+    chart_of_account_id: '',
+    debit: 0,
+    credit: 0,
+    remarks: '',
+  });
+};
+
+const removeItem = (index: number) => {
+  journalEntryForm.items.splice(index, 1);
+};
+
+const invalidItemField = (field: string) => journalEntryForm.invalid(field as any);
+const itemFieldErrors = (field: string): string | undefined => {
+  const error = (journalEntryForm.errors as Record<string, Array<string> | string | undefined>)[field];
+
+  if (Array.isArray(error)) {
+    return error.join(', ');
+  }
+
+  return error;
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  journalEntryForm.reset();
+  journalEntryForm.setErrors({});
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (journalEntryForm.hasErrors) {
+    const firstErrorKey = Object.keys(journalEntryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await journalEntryForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-journal-entry-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="journalEntryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel>{{ t('views.journal_entry.fields.company') }}</FormLabel>
+              <FormLabel class="whitespace-pre-line">{{ companyLabel }}</FormLabel>
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel>{{ t('views.journal_entry.fields.branch') }}</FormLabel>
+              <FormLabel class="whitespace-pre-line">{{ branchLabel }}</FormLabel>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('code') }">
+                {{ t('views.journal_entry.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="journalEntryForm.code"
+                :class="{ 'border-danger': journalEntryForm.invalid('code') }"
+                @click="setCode"
+                @change="journalEntryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('date') }">
+                {{ t('views.journal_entry.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="journalEntryForm.date"
+                :class="{ 'border-danger': journalEntryForm.invalid('date') }"
+                @change="journalEntryForm.validate('date')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('reference_no') }">
+                {{ t('views.journal_entry.fields.reference_no') }}
+              </FormLabel>
+              <FormInput
+                v-model="journalEntryForm.reference_no"
+                :class="{ 'border-danger': journalEntryForm.invalid('reference_no') }"
+                @change="journalEntryForm.validate('reference_no')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.reference_no" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel>{{ t('views.journal_entry.fields.source_type') }}</FormLabel>
+              <FormInput :model-value="journalEntryData?.source_type ?? '-'" readonly />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel>{{ t('views.journal_entry.fields.source_id') }}</FormLabel>
+              <FormInput :model-value="journalEntryData?.source_id ?? '-'" readonly />
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': journalEntryForm.invalid('remarks') }">
+                {{ t('views.journal_entry.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="journalEntryForm.remarks"
+                :class="{ 'border-danger': journalEntryForm.invalid('remarks') }"
+                @change="journalEntryForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="journalEntryForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <div class="mb-4 flex items-center justify-between">
+            <div>
+              <div class="text-base font-medium">{{ t('views.journal_entry.fields.items') }}</div>
+              <div class="text-sm text-slate-500">
+                {{ t('views.journal_entry.helper.single_side_amount') }}
+              </div>
+            </div>
+            <Button type="button" variant="outline-primary" @click="addItem">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('views.journal_entry.actions.add_item') }}
+            </Button>
+          </div>
+
+          <FormErrorMessages :messages="journalEntryForm.errors.items" />
+
+          <div class="space-y-4">
+            <div
+              v-for="(item, index) in journalEntryForm.items"
+              :key="index"
+              class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400"
+            >
+              <div class="mb-3 flex items-center justify-between">
+                <div class="font-medium">{{ t('views.journal_entry.fields.item') }} #{{ index + 1 }}</div>
+                <Button type="button" variant="outline-danger" @click="removeItem(index)">
+                  <Lucide icon="Trash2" class="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.chart_of_account_id`) }">
+                    {{ t('views.journal_entry.fields.chart_of_account') }}
+                  </FormLabel>
+                  <FormSelect
+                    :id="`items.${index}.chart_of_account_id`"
+                    v-model="item.chart_of_account_id"
+                    :options="accountOptionsDDL"
+                    :class="{ 'border-danger': invalidItemField(`items.${index}.chart_of_account_id`) }"
+                    @change="journalEntryForm.validate(`items.${index}.chart_of_account_id` as any)"
+                  />
+                  <FormErrorMessages :messages="itemFieldErrors(`items.${index}.chart_of_account_id`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.debit`) }">
+                    {{ t('views.journal_entry.fields.debit') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`items.${index}.debit`"
+                    v-model="item.debit"
+                    :allow-negative="false"
+                    :class="{ 'border-danger': invalidItemField(`items.${index}.debit`) }"
+                    @change="journalEntryForm.validate(`items.${index}.debit` as any)"
+                  />
+                  <FormErrorMessages :messages="itemFieldErrors(`items.${index}.debit`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.credit`) }">
+                    {{ t('views.journal_entry.fields.credit') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`items.${index}.credit`"
+                    v-model="item.credit"
+                    :allow-negative="false"
+                    :class="{ 'border-danger': invalidItemField(`items.${index}.credit`) }"
+                    @change="journalEntryForm.validate(`items.${index}.credit` as any)"
+                  />
+                  <FormErrorMessages :messages="itemFieldErrors(`items.${index}.credit`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.remarks`) }">
+                    {{ t('views.journal_entry.fields.item_remarks') }}
+                  </FormLabel>
+                  <FormInput
+                    :id="`items.${index}.remarks`"
+                    v-model="item.remarks"
+                    :class="{ 'border-danger': invalidItemField(`items.${index}.remarks`) }"
+                    @change="journalEntryForm.validate(`items.${index}.remarks` as any)"
+                  />
+                  <FormErrorMessages :messages="itemFieldErrors(`items.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-5 rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="grid grid-cols-12 gap-4 text-sm">
+              <div class="col-span-12 lg:col-span-4">
+                <div class="text-slate-500">{{ t('views.journal_entry.fields.total_debit') }}</div>
+                <div class="text-lg font-medium">{{ formatCurrency(totalDebit) }}</div>
+              </div>
+              <div class="col-span-12 lg:col-span-4">
+                <div class="text-slate-500">{{ t('views.journal_entry.fields.total_credit') }}</div>
+                <div class="text-lg font-medium">{{ formatCurrency(totalCredit) }}</div>
+              </div>
+              <div class="col-span-12 lg:col-span-4">
+                <div class="text-slate-500">{{ t('views.journal_entry.fields.balance_status') }}</div>
+                <div :class="['text-lg font-medium', isBalanced ? 'text-success' : 'text-danger']">
+                  {{ isBalanced ? t('views.journal_entry.options.balance.balanced') : t('views.journal_entry.options.balance.unbalanced') }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="button" variant="outline-secondary" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+          <Button type="submit" variant="primary">
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/journal-entry/JournalEntryIndex.vue b/web/src/pages/journal-entry/JournalEntryIndex.vue
new file mode 100644
index 000000000..14ca4c086
--- /dev/null
+++ b/web/src/pages/journal-entry/JournalEntryIndex.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.journal_entry.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const journalEntryNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[journalEntryNotification]', (el: NotificationElement) => {
+  journalEntryNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-journal-entry-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-journal-entry-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.journal_entry.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.journal_entry.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.journal_entry.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (journalEntryNotification.value) {
+    journalEntryNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('JOURNAL_ENTRY_CREATE');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="journalEntryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/journal-entry/JournalEntryList.vue b/web/src/pages/journal-entry/JournalEntryList.vue
new file mode 100644
index 000000000..96aa3bace
--- /dev/null
+++ b/web/src/pages/journal-entry/JournalEntryList.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import { Dialog } from '@/components/Base/Headless';
+import { FormInputDateTime, FormLabel } from '@/components/Base/Form';
+import { useRouter } from 'vue-router';
+import JournalEntryService from '@/services/JournalEntryService';
+import { JournalEntry } from '@/types/models/JournalEntry';
+import { Resource } from '@/types/resources/Resource';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { NotificationData } from '@/types/models/NotificationData';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+
+const { t } = useI18n();
+const router = useRouter();
+const journalEntryService = new JournalEntryService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | number | null>(null);
+const filters = ref<{
+  start_date: string | null;
+  end_date: string | null;
+}>({
+  start_date: null,
+  end_date: null,
+});
+const journalEntryLists = ref<Resource<Array<JournalEntry>> | null>({
+  data: [],
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  filters.value.start_date = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  filters.value.end_date = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getJournalEntries(true);
+});
+
+const getJournalEntries = async (refresh: boolean) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<Resource<Array<JournalEntry>> | null> = await journalEntryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    start_date: filters.value.start_date || undefined,
+    end_date: filters.value.end_date || undefined,
+    refresh,
+    limit: 1000,
+  });
+
+  if (result.success && result.data) {
+    journalEntryLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async () => {
+  await getJournalEntries(false);
+};
+
+const handleFilter = async () => {
+  await getJournalEntries(true);
+};
+
+const viewSelected = (itemId: string | number) => {
+  expandDetail.value = expandDetail.value === itemId ? null : itemId;
+};
+
+const editSelected = (item: JournalEntry) => {
+  router.push({
+    name: 'side-menu-journal-entry-edit',
+    params: { ulid: item.ulid },
+  });
+};
+
+const deleteSelected = (item: JournalEntry) => {
+  deleteUlid.value = item.ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await journalEntryService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getJournalEntries(true);
+    showNotification(
+      t('views.journal_entry.alert.delete_journal_entry.title'),
+      t('views.journal_entry.alert.delete_journal_entry.content'),
+    );
+  } else {
+    const alertList = result.errors ?? convertErrorTypeToAlertListType({ message: result.message });
+    showAlertPlaceholder('danger', result.message ?? '', alertList);
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <DataList
+    :title="t('views.journal_entry.table.title')"
+    :enable-search="false"
+    :can-print="true"
+    :can-export="true"
+    :pagination="null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #toolbar-actions>
+      <div class="grid grid-cols-12 gap-3">
+        <div class="col-span-12 md:col-span-4">
+          <FormLabel>
+            {{ t('views.journal_entry.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime
+            v-model="filters.start_date"
+            :placeholder="t('views.journal_entry.fields.start_date')"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-4">
+          <FormLabel>
+            {{ t('views.journal_entry.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime
+            v-model="filters.end_date"
+            :placeholder="t('views.journal_entry.fields.end_date')"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-4 flex items-end">
+          <Button variant="primary" @click="handleFilter">
+            <Lucide icon="Search" class="mr-1 h-4 w-4" />
+            {{ t('components.buttons.search') }}
+          </Button>
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th>{{ t('views.journal_entry.fields.code') }}</Table.Th>
+            <Table.Th>{{ t('views.journal_entry.fields.date') }}</Table.Th>
+            <Table.Th>{{ t('views.journal_entry.fields.reference_no') }}</Table.Th>
+            <Table.Th class="text-right">{{ t('views.journal_entry.fields.total_debit') }}</Table.Th>
+            <Table.Th class="text-right">{{ t('views.journal_entry.fields.total_credit') }}</Table.Th>
+            <Table.Th></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="journalEntryLists !== null">
+          <template v-if="journalEntryLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="6">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-else>
+            <template v-for="item in journalEntryLists.data" :key="item.id">
+              <Table.Tr class="intro-x">
+                <Table.Td class="font-medium">{{ item.code }}</Table.Td>
+                <Table.Td>{{ item.date ? formatDate(item.date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}</Table.Td>
+                <Table.Td>{{ item.reference_no || '-' }}</Table.Td>
+                <Table.Td class="text-right">{{ formatCurrency(item.total_debit) }}</Table.Td>
+                <Table.Td class="text-right">{{ formatCurrency(item.total_credit) }}</Table.Td>
+                <Table.Td>
+                  <div class="flex items-center justify-end gap-2">
+                    <Button variant="outline-secondary" @click="viewSelected(item.id)">
+                      <Lucide icon="Eye" class="h-4 w-4" />
+                    </Button>
+                    <Button variant="outline-primary" @click="editSelected(item)">
+                      <Lucide icon="Pencil" class="h-4 w-4" />
+                    </Button>
+                    <Button variant="outline-danger" @click="deleteSelected(item)">
+                      <Lucide icon="Trash2" class="h-4 w-4" />
+                    </Button>
+                  </div>
+                </Table.Td>
+              </Table.Tr>
+              <Table.Tr v-if="expandDetail === item.id">
+                <Table.Td colspan="6" class="bg-slate-50 dark:bg-darkmode-600/20">
+                  <div class="space-y-3 p-2">
+                    <div class="grid grid-cols-12 gap-4 text-sm">
+                      <div class="col-span-12 lg:col-span-3">
+                        <span class="font-medium">{{ t('views.journal_entry.fields.branch') }}:</span>
+                        {{ item.branch?.name ?? '-' }}
+                      </div>
+                      <div class="col-span-12 lg:col-span-3">
+                        <span class="font-medium">{{ t('views.journal_entry.fields.source_type') }}:</span>
+                        {{ item.source_type ?? '-' }}
+                      </div>
+                      <div class="col-span-12 lg:col-span-3">
+                        <span class="font-medium">{{ t('views.journal_entry.fields.source_id') }}:</span>
+                        {{ item.source_id ?? '-' }}
+                      </div>
+                      <div class="col-span-12 lg:col-span-3">
+                        <span class="font-medium">{{ t('views.journal_entry.fields.remarks') }}:</span>
+                        {{ item.remarks || '-' }}
+                      </div>
+                    </div>
+
+                    <Table class="mt-2">
+                      <Table.Thead variant="light">
+                        <Table.Tr>
+                          <Table.Th>#</Table.Th>
+                          <Table.Th>{{ t('views.journal_entry.fields.chart_of_account') }}</Table.Th>
+                          <Table.Th class="text-right">{{ t('views.journal_entry.fields.debit') }}</Table.Th>
+                          <Table.Th class="text-right">{{ t('views.journal_entry.fields.credit') }}</Table.Th>
+                          <Table.Th>{{ t('views.journal_entry.fields.item_remarks') }}</Table.Th>
+                        </Table.Tr>
+                      </Table.Thead>
+                      <Table.Tbody>
+                        <Table.Tr v-for="journalEntryItem in item.items" :key="journalEntryItem.id">
+                          <Table.Td>{{ journalEntryItem.sequence }}</Table.Td>
+                          <Table.Td>
+                            {{ journalEntryItem.chart_of_account?.code ?? '-' }} - {{ journalEntryItem.chart_of_account?.name ?? '-' }}
+                          </Table.Td>
+                          <Table.Td class="text-right">{{ formatCurrency(journalEntryItem.debit) }}</Table.Td>
+                          <Table.Td class="text-right">{{ formatCurrency(journalEntryItem.credit) }}</Table.Td>
+                          <Table.Td>{{ journalEntryItem.remarks || '-' }}</Table.Td>
+                        </Table.Tr>
+                      </Table.Tbody>
+                    </Table>
+                  </div>
+                </Table.Td>
+              </Table.Tr>
+            </template>
+          </template>
+        </Table.Tbody>
+      </Table>
+    </template>
+  </DataList>
+
+  <Dialog :open="deleteModalShow" @close="deleteModalShow = false">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="AlertTriangle" class="mx-auto mt-3 h-16 w-16 text-warning" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">{{ t('components.delete-modal.content') }}</div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="mr-1 w-24" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/prepaid-expense/PrepaidExpenseCreate.vue b/web/src/pages/prepaid-expense/PrepaidExpenseCreate.vue
new file mode 100644
index 000000000..1d0ab1059
--- /dev/null
+++ b/web/src/pages/prepaid-expense/PrepaidExpenseCreate.vue
@@ -0,0 +1,664 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import PrepaidExpenseService from '@/services/PrepaidExpenseService';
+import ExpenseCategoryService from '@/services/ExpenseCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import PrepaidExpenseImagesField from '@/components/PrepaidExpense/PrepaidExpenseImagesField.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { ExpenseCategory } from '@/types/models/ExpenseCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+type PrepaidExpensePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const prepaidExpenseService = new PrepaidExpenseService();
+const expenseCategoryService = new ExpenseCategoryService();
+const cashAccountService = new CashAccountService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.prepaid_expense.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_expense.field_groups.prepaid_expense_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_expense.field_groups.payments',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_expense.field_groups.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const prepaidExpenseForm = prepaidExpenseService.usePrepaidExpenseCreateForm();
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(prepaidExpenseForm.amount_paid_immediately ?? 0) + Number(prepaidExpenseForm.amount_payable ?? 0),
+);
+const prepaidExpensePaymentsForm = computed<PrepaidExpensePaymentFormItem[]>(
+  () => prepaidExpenseForm.payments as PrepaidExpensePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const invalidPrepaidExpenseField = (field: string) => prepaidExpenseForm.invalid(field as any);
+const validatePrepaidExpenseField = (field: string) => prepaidExpenseForm.validate(field as any);
+const getPrepaidExpenseFieldErrors = (field: string): string | undefined => {
+  const errors = (prepaidExpenseForm.errors as Record<string, string | string[] | undefined>)[field];
+
+  if (Array.isArray(errors)) {
+    return errors.join(' ');
+  }
+
+  return errors;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const setLocationData = () => {
+  prepaidExpenseForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('PREPAID_EXPENSE_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  prepaidExpenseForm.setData(data);
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await expenseCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: false,
+    include_id: prepaidExpenseForm.expense_category_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: ExpenseCategory) => ({
+      code: item.id,
+      name: item.display_code ? `${item.display_code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: prepaidExpenseForm.paid_immediately_cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  prepaidExpenseForm.forgetError('code');
+
+  if (prepaidExpenseForm.code === '_AUTO_') {
+    prepaidExpenseForm.setData({ code: '' });
+    return;
+  }
+
+  prepaidExpenseForm.setData({ code: '_AUTO_' });
+};
+
+const clearCategory = () => {
+  prepaidExpenseForm.setData({ expense_category_id: '' });
+  prepaidExpenseForm.forgetError('expense_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  prepaidExpenseForm.setData({ paid_immediately_cash_account_id: '' });
+  prepaidExpenseForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = prepaidExpenseForm.errors as Record<string, string | string[]>;
+
+  if (amount_total) {
+    prepaidExpenseForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_payable') => {
+  clearAmountTotalError();
+  prepaidExpenseForm.validate(field);
+};
+
+const setPaymentCode = (index: number) => {
+  prepaidExpenseForm.forgetError(`payments.${index}.code` as any);
+  prepaidExpensePaymentsForm.value[index].code =
+    prepaidExpensePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = prepaidExpensePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validatePrepaidExpenseField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  prepaidExpensePaymentsForm.value.push({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removePayment = (index: number) => {
+  prepaidExpensePaymentsForm.value.splice(index, 1);
+
+  Object.keys(prepaidExpenseForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      prepaidExpenseForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  if (prepaidExpenseForm.hasErrors) {
+    const firstErrorKey = Object.keys(prepaidExpenseForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await prepaidExpenseForm
+    .submit()
+    .then(() => {
+      cacheService.removeLastEntity('PREPAID_EXPENSE_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-prepaid-expense-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  prepaidExpenseForm.reset();
+  prepaidExpenseForm.setErrors({});
+  setLocationData();
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  prepaidExpenseForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('PREPAID_EXPENSE_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="prepaidExpenseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="prepaidExpenseForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="prepaidExpenseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('code') }">
+                {{ t('views.prepaid_expense.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="prepaidExpenseForm.code"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('code') }"
+                :placeholder="t('views.prepaid_expense.fields.code')"
+                @set-auto="setCode"
+                @change="prepaidExpenseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('date') }">
+                {{ t('views.prepaid_expense.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="prepaidExpenseForm.date"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('date') }"
+                :placeholder="t('views.prepaid_expense.fields.date')"
+                @change="prepaidExpenseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('expense_category_id') }">
+                {{ t('views.prepaid_expense.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="prepaidExpenseForm.expense_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('expense_category_id') }"
+                @change="prepaidExpenseForm.validate('expense_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.expense_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('estimated_useful_life') }">
+                {{ t('views.prepaid_expense.fields.estimated_useful_life') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="estimated_useful_life"
+                v-model="prepaidExpenseForm.estimated_useful_life"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('estimated_useful_life') }"
+                :placeholder="t('views.prepaid_expense.fields.estimated_useful_life')"
+                @change="prepaidExpenseForm.validate('estimated_useful_life')"
+              />
+              <div class="mt-1 text-xs text-slate-500">
+                {{ t('views.prepaid_expense.hints.estimated_useful_life') }}
+              </div>
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.estimated_useful_life" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.prepaid_expense.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="prepaidExpenseForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('paid_immediately_cash_account_id') }"
+                @change="prepaidExpenseForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('amount_paid_immediately') }">
+                {{ t('views.prepaid_expense.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="prepaidExpenseForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.prepaid_expense.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('amount_payable') }">
+                {{ t('views.prepaid_expense.fields.amount_payable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="prepaidExpenseForm.amount_payable"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('amount_payable') }"
+                :placeholder="t('views.prepaid_expense.fields.amount_payable')"
+                @change="handleAmountChange('amount_payable')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.amount_payable" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('due_days') }">
+                {{ t('views.prepaid_expense.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="prepaidExpenseForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('due_days') }"
+                :placeholder="t('views.prepaid_expense.fields.due_days')"
+                @change="prepaidExpenseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>
+                {{ t('views.prepaid_expense.fields.amount_total') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="amount_total"
+                :model-value="amountTotalPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('remarks') }">
+                {{ t('views.prepaid_expense.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="prepaidExpenseForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('remarks') }"
+                :placeholder="t('views.prepaid_expense.fields.remarks')"
+                @change="prepaidExpenseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="(prepaidExpenseForm.errors as any).payments" />
+
+          <div v-if="prepaidExpensePaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div v-for="(payment, index) in prepaidExpensePaymentsForm" :key="`prepaid-expense-payment-${index}`" class="space-y-3">
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.code`) }">
+                    {{ t('views.prepaid_expense.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.code`) }"
+                    :placeholder="t('views.prepaid_expense.fields.code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validatePrepaidExpenseField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.date`) }">
+                    {{ t('views.prepaid_expense.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.date`) }"
+                    :placeholder="t('views.prepaid_expense.fields.date')"
+                    @change="validatePrepaidExpenseField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.expense_payment.fields.cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="paidImmediatelyCashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.cash_account_id`) }"
+                    @change="validatePrepaidExpenseField(`payments.${index}.cash_account_id`)"
+                    @search="loadPaidImmediatelyCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.amount`) }">
+                    {{ t('views.expense_payment.fields.amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.amount`) }"
+                        @change="validatePrepaidExpenseField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.amount`)" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.remarks`) }">
+                    {{ t('views.prepaid_expense.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.prepaid_expense.fields.remarks')"
+                    @change="validatePrepaidExpenseField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.prepaid_expense.fields.images') }}
+          </FormLabel>
+          <PrepaidExpenseImagesField v-model="prepaidExpenseForm.image_hashes" />
+          <FormErrorMessages :messages="(prepaidExpenseForm.errors as any).image_hashes" />
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="prepaidExpenseForm.validating || prepaidExpenseForm.hasErrors"
+          >
+            <Lucide v-if="prepaidExpenseForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/prepaid-expense/PrepaidExpenseEdit.vue b/web/src/pages/prepaid-expense/PrepaidExpenseEdit.vue
new file mode 100644
index 000000000..44e0cfe17
--- /dev/null
+++ b/web/src/pages/prepaid-expense/PrepaidExpenseEdit.vue
@@ -0,0 +1,710 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatDate } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import PrepaidExpenseService from '@/services/PrepaidExpenseService';
+import ExpenseCategoryService from '@/services/ExpenseCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import PrepaidExpenseImagesField from '@/components/PrepaidExpense/PrepaidExpenseImagesField.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { PrepaidExpense } from '@/types/models/PrepaidExpense';
+import type { ExpenseCategory } from '@/types/models/ExpenseCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+import type { PrepaidExpenseImage } from '@/types/models/PrepaidExpenseImage';
+import type { PrepaidExpensePayment } from '@/types/models/PrepaidExpensePayment';
+
+type PrepaidExpensePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const prepaidExpenseService = new PrepaidExpenseService();
+const expenseCategoryService = new ExpenseCategoryService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.prepaid_expense.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_expense.field_groups.prepaid_expense_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_expense.field_groups.payments',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_expense.field_groups.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const prepaidExpenseForm = prepaidExpenseService.usePrepaidExpenseEditForm(route.params.ulid.toString());
+const prepaidExpenseData = ref<PrepaidExpense | null>(null);
+const uploadedImages = ref<PrepaidExpenseImage[]>([]);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(prepaidExpenseForm.amount_paid_immediately ?? 0) + Number(prepaidExpenseForm.amount_payable ?? 0),
+);
+const prepaidExpensePaymentsForm = computed<PrepaidExpensePaymentFormItem[]>(
+  () => prepaidExpenseForm.payments as PrepaidExpensePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const invalidPrepaidExpenseField = (field: string) => prepaidExpenseForm.invalid(field as any);
+const validatePrepaidExpenseField = (field: string) => prepaidExpenseForm.validate(field as any);
+const getPrepaidExpenseFieldErrors = (field: string): string | undefined => {
+  const errors = (prepaidExpenseForm.errors as Record<string, string | string[] | undefined>)[field];
+
+  if (Array.isArray(errors)) {
+    return errors.join(' ');
+  }
+
+  return errors;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await prepaidExpenseService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    prepaidExpenseData.value = result.data;
+
+    prepaidExpenseForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      code: result.data.code,
+      date: formatDate(result.data.date, 'YYYY-MM-DD HH:mm:ss'),
+      expense_category_id: result.data.category?.id ?? '',
+      estimated_useful_life: result.data.estimated_useful_life,
+      paid_immediately_cash_account_id: result.data.paid_immediately_cash_account?.id ?? '',
+      amount_paid_immediately: result.data.amount_paid_immediately,
+      amount_payable: result.data.amount_payable,
+      due_days: result.data.due_days,
+      remarks: result.data.remarks ?? '',
+      delete_image_ids: [],
+      image_hashes: [],
+      delete_payment_ids: [],
+      payments: (result.data.payments ?? []).map((payment: PrepaidExpensePayment) => ({
+        id: payment.id,
+        code: payment.code,
+        date: formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss'),
+        cash_account_id: payment.cash_account?.id ?? '',
+        amount: payment.amount,
+        remarks: payment.remarks ?? '',
+      })),
+    } as any);
+
+    if (result.data.prepaid_expense_images) {
+      const images = result.data.prepaid_expense_images.map((img: PrepaidExpenseImage) => ({
+        id: img.id,
+        prepaid_expense_id: img.prepaid_expense_id,
+        path: img.path,
+        url: img.url,
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+
+      uploadedImages.value = images;
+      prepaidExpenseForm.image_hashes = images.map((img: PrepaidExpenseImage) => ({
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+    } else {
+      uploadedImages.value = [];
+    }
+  } else {
+    router.push({ name: 'side-menu-prepaid-expense-list' });
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await expenseCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: false,
+    include_id: prepaidExpenseData.value?.category?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: ExpenseCategory) => ({
+      code: item.id,
+      name: item.display_code ? `${item.display_code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: prepaidExpenseData.value?.paid_immediately_cash_account?.id,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  prepaidExpenseForm.forgetError('code');
+
+  if (prepaidExpenseForm.code === '_AUTO_') {
+    prepaidExpenseForm.setData({ code: '' });
+    return;
+  }
+
+  prepaidExpenseForm.setData({ code: '_AUTO_' });
+};
+
+const clearCategory = () => {
+  prepaidExpenseForm.setData({ expense_category_id: '' });
+  prepaidExpenseForm.forgetError('expense_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  prepaidExpenseForm.setData({ paid_immediately_cash_account_id: '' });
+  prepaidExpenseForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = prepaidExpenseForm.errors as Record<string, string | string[]>;
+
+  if (amount_total) {
+    prepaidExpenseForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_payable') => {
+  clearAmountTotalError();
+  prepaidExpenseForm.validate(field);
+};
+
+const setPaymentCode = (index: number) => {
+  prepaidExpenseForm.forgetError(`payments.${index}.code` as any);
+  prepaidExpensePaymentsForm.value[index].code =
+    prepaidExpensePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = prepaidExpensePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validatePrepaidExpenseField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  prepaidExpensePaymentsForm.value.push({
+    id: null,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removePayment = (index: number) => {
+  const payment = prepaidExpensePaymentsForm.value[index];
+
+  if (payment?.id && !prepaidExpenseForm.delete_payment_ids.includes(payment.id)) {
+    prepaidExpenseForm.delete_payment_ids.push(payment.id);
+  }
+
+  prepaidExpensePaymentsForm.value.splice(index, 1);
+
+  Object.keys(prepaidExpenseForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      prepaidExpenseForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  if (prepaidExpenseForm.hasErrors) {
+    const firstErrorKey = Object.keys(prepaidExpenseForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await prepaidExpenseForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-prepaid-expense-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  prepaidExpenseForm.reset();
+  prepaidExpenseForm.setErrors({});
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+  await loadData();
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="prepaidExpenseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="prepaidExpenseForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="prepaidExpenseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('code') }">
+                {{ t('views.prepaid_expense.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="prepaidExpenseForm.code"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('code') }"
+                :placeholder="t('views.prepaid_expense.fields.code')"
+                @set-auto="setCode"
+                @change="prepaidExpenseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('date') }">
+                {{ t('views.prepaid_expense.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="prepaidExpenseForm.date"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('date') }"
+                :placeholder="t('views.prepaid_expense.fields.date')"
+                @change="prepaidExpenseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('expense_category_id') }">
+                {{ t('views.prepaid_expense.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="prepaidExpenseForm.expense_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('expense_category_id') }"
+                @change="prepaidExpenseForm.validate('expense_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.expense_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('estimated_useful_life') }">
+                {{ t('views.prepaid_expense.fields.estimated_useful_life') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="estimated_useful_life"
+                v-model="prepaidExpenseForm.estimated_useful_life"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('estimated_useful_life') }"
+                :placeholder="t('views.prepaid_expense.fields.estimated_useful_life')"
+                @change="prepaidExpenseForm.validate('estimated_useful_life')"
+              />
+              <div class="mt-1 text-xs text-slate-500">
+                {{ t('views.prepaid_expense.hints.estimated_useful_life') }}
+              </div>
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.estimated_useful_life" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.prepaid_expense.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="prepaidExpenseForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('paid_immediately_cash_account_id') }"
+                @change="prepaidExpenseForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('amount_paid_immediately') }">
+                {{ t('views.prepaid_expense.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="prepaidExpenseForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.prepaid_expense.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('amount_payable') }">
+                {{ t('views.prepaid_expense.fields.amount_payable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="prepaidExpenseForm.amount_payable"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('amount_payable') }"
+                :placeholder="t('views.prepaid_expense.fields.amount_payable')"
+                @change="handleAmountChange('amount_payable')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.amount_payable" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('due_days') }">
+                {{ t('views.prepaid_expense.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="prepaidExpenseForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('due_days') }"
+                :placeholder="t('views.prepaid_expense.fields.due_days')"
+                @change="prepaidExpenseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>
+                {{ t('views.prepaid_expense.fields.amount_total') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="amount_total"
+                :model-value="amountTotalPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': prepaidExpenseForm.invalid('remarks') }">
+                {{ t('views.prepaid_expense.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="prepaidExpenseForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': prepaidExpenseForm.invalid('remarks') }"
+                :placeholder="t('views.prepaid_expense.fields.remarks')"
+                @change="prepaidExpenseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="prepaidExpenseForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="(prepaidExpenseForm.errors as any).payments" />
+          <FormErrorMessages :messages="(prepaidExpenseForm.errors as any).delete_payment_ids" />
+
+          <div v-if="prepaidExpensePaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div v-for="(payment, index) in prepaidExpensePaymentsForm" :key="payment.id ?? `prepaid-expense-payment-${index}`" class="space-y-3">
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.code`) }">
+                    {{ t('views.prepaid_expense.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.code`) }"
+                    :placeholder="t('views.prepaid_expense.fields.code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validatePrepaidExpenseField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.date`) }">
+                    {{ t('views.prepaid_expense.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.date`) }"
+                    :placeholder="t('views.prepaid_expense.fields.date')"
+                    @change="validatePrepaidExpenseField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.expense_payment.fields.cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="paidImmediatelyCashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.cash_account_id`) }"
+                    @change="validatePrepaidExpenseField(`payments.${index}.cash_account_id`)"
+                    @search="loadPaidImmediatelyCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.amount`) }">
+                    {{ t('views.expense_payment.fields.amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.amount`) }"
+                        @change="validatePrepaidExpenseField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.amount`)" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidExpenseField(`payments.${index}.remarks`) }">
+                    {{ t('views.prepaid_expense.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidPrepaidExpenseField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.prepaid_expense.fields.remarks')"
+                    @change="validatePrepaidExpenseField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidExpenseFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.prepaid_expense.fields.images') }}
+          </FormLabel>
+          <PrepaidExpenseImagesField
+            v-model="prepaidExpenseForm.image_hashes"
+            v-model:existing-images="uploadedImages"
+            v-model:delete-image-ids="prepaidExpenseForm.delete_image_ids"
+          />
+          <FormErrorMessages :messages="(prepaidExpenseForm.errors as any).image_hashes" />
+          <FormErrorMessages :messages="(prepaidExpenseForm.errors as any).delete_image_ids" />
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="prepaidExpenseForm.validating || prepaidExpenseForm.hasErrors"
+          >
+            <Lucide v-if="prepaidExpenseForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/prepaid-expense/PrepaidExpenseIndex.vue b/web/src/pages/prepaid-expense/PrepaidExpenseIndex.vue
new file mode 100644
index 000000000..fb13c1d0b
--- /dev/null
+++ b/web/src/pages/prepaid-expense/PrepaidExpenseIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.prepaid_expense.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const prepaidExpenseNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[prepaidExpenseNotification]', (el: NotificationElement) => {
+  prepaidExpenseNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-prepaid-expense-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-prepaid-expense-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.prepaid_expense.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.prepaid_expense.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.prepaid_expense.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  prepaidExpenseNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('PREPAID_EXPENSE_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('PREPAID_EXPENSE_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="prepaidExpenseNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/prepaid-expense/PrepaidExpenseList.vue b/web/src/pages/prepaid-expense/PrepaidExpenseList.vue
new file mode 100644
index 000000000..f5d8c38e1
--- /dev/null
+++ b/web/src/pages/prepaid-expense/PrepaidExpenseList.vue
@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PrepaidExpenseService from '@/services/PrepaidExpenseService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { PrepaidExpense } from '@/types/models/PrepaidExpense';
+import type { PrepaidExpenseImage } from '@/types/models/PrepaidExpenseImage';
+import type { PrepaidExpensePayment } from '@/types/models/PrepaidExpensePayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PrepaidExpenseReadAnyPaginateRequest } from '@/types/services/prepaid-expense/PrepaidExpenseRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const prepaidExpenseService = new PrepaidExpenseService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | null>(null);
+const isImagePreviewOpen = ref(false);
+const previewImages = ref<PrepaidExpenseImage[]>([]);
+const previewImageIndex = ref(0);
+const previewPrepaidExpenseCode = ref('');
+const prepaidExpenseLists = ref<Collection<Array<PrepaidExpense>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+  await getPrepaidExpenses('', true, 1, 10);
+});
+
+const getPrepaidExpenses = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  const searchReq: PrepaidExpenseReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    expense_category_id: null,
+    is_amount_payable_paid_off: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+  const result: ServiceResponse<Collection<Array<PrepaidExpense>> | null> =
+    await prepaidExpenseService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    prepaidExpenseLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getPrepaidExpenses(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const editSelected = (idx: number) => {
+  if (!prepaidExpenseLists.value) return;
+  router.push({
+    name: 'side-menu-prepaid-expense-edit',
+    params: { ulid: prepaidExpenseLists.value.data[idx].ulid },
+  });
+};
+
+const viewSelected = (idx: number) => {
+  if (!prepaidExpenseLists.value) return;
+
+  const prepaidExpense = prepaidExpenseLists.value.data[idx];
+  expandDetail.value = expandDetail.value === prepaidExpense.ulid ? null : prepaidExpense.ulid;
+};
+
+const deleteSelected = (idx: number) => {
+  if (!prepaidExpenseLists.value) return;
+  deleteUlid.value = prepaidExpenseLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+  const result = await prepaidExpenseService.delete(deleteUlid.value);
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getPrepaidExpenses('', true, 1, 10);
+    showNotification(
+      t('views.prepaid_expense.alert.delete_prepaid_expense.title'),
+      t('views.prepaid_expense.alert.delete_prepaid_expense.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+
+const getCategoryLabel = (prepaidExpense: PrepaidExpense) => {
+  if (!prepaidExpense.category) return '-';
+
+  return prepaidExpense.category.display_code
+    ? `${prepaidExpense.category.display_code} - ${prepaidExpense.category.name}`
+    : prepaidExpense.category.name;
+};
+
+const getCashAccountLabel = (prepaidExpense: PrepaidExpense) => {
+  if (!prepaidExpense.paid_immediately_cash_account) return '-';
+
+  return prepaidExpense.paid_immediately_cash_account.code
+    ? `${prepaidExpense.paid_immediately_cash_account.code} - ${prepaidExpense.paid_immediately_cash_account.name}`
+    : prepaidExpense.paid_immediately_cash_account.name;
+};
+
+const getPaidOffLabel = (prepaidExpense: PrepaidExpense) =>
+  prepaidExpense.is_amount_payable_paid_off
+    ? t('views.prepaid_expense.status.paid_off')
+    : t('views.prepaid_expense.status.not_paid_off');
+
+const formatEstimatedUsefulLife = (estimatedUsefulLife?: number | null): string => {
+  const totalMonths = Number(estimatedUsefulLife ?? 0);
+  const totalYears = totalMonths / 12;
+  const formattedYears = Number.isInteger(totalYears)
+    ? totalYears.toString()
+    : totalYears.toFixed(1).replace(/\.0$/, '');
+  const monthUnit = totalMonths === 1
+    ? t('views.prepaid_expense.units.month')
+    : t('views.prepaid_expense.units.months');
+  const yearUnit = totalYears === 1
+    ? t('views.prepaid_expense.units.year')
+    : t('views.prepaid_expense.units.years');
+
+  return `${totalMonths} ${monthUnit} (${formattedYears} ${yearUnit})`;
+};
+
+const getPrepaidExpenseImages = (prepaidExpense: PrepaidExpense): PrepaidExpenseImage[] => {
+  const images = prepaidExpense.prepaid_expense_images?.filter((image) => !!image.url) ?? [];
+
+  if (images.length > 0) {
+    return images;
+  }
+
+  return prepaidExpense.main_prepaid_expense_image?.url ? [prepaidExpense.main_prepaid_expense_image] : [];
+};
+
+const getPrepaidExpensePayments = (prepaidExpense: PrepaidExpense) => prepaidExpense.payments ?? [];
+
+const getPaymentCashAccountLabel = (payment: PrepaidExpensePayment) => {
+  if (!payment.cash_account) return '-';
+
+  return payment.cash_account.code ? `${payment.cash_account.code} - ${payment.cash_account.name}` : payment.cash_account.name;
+};
+
+const openImagePreview = (prepaidExpense: PrepaidExpense) => {
+  const images = getPrepaidExpenseImages(prepaidExpense);
+
+  if (!images.length) return;
+
+  const mainImageIndex = images.findIndex((image) => image.is_main);
+
+  previewImages.value = images;
+  previewImageIndex.value = mainImageIndex >= 0 ? mainImageIndex : 0;
+  previewPrepaidExpenseCode.value = prepaidExpense.code;
+  isImagePreviewOpen.value = true;
+};
+
+const closeImagePreview = () => {
+  isImagePreviewOpen.value = false;
+  previewImages.value = [];
+  previewImageIndex.value = 0;
+  previewPrepaidExpenseCode.value = '';
+};
+
+const showPreviousImage = () => {
+  if (previewImages.value.length <= 1) return;
+
+  previewImageIndex.value =
+    previewImageIndex.value === 0 ? previewImages.value.length - 1 : previewImageIndex.value - 1;
+};
+
+const showNextImage = () => {
+  if (previewImages.value.length <= 1) return;
+
+  previewImageIndex.value =
+    previewImageIndex.value === previewImages.value.length - 1 ? 0 : previewImageIndex.value + 1;
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="prepaidExpenseLists"
+        :title="t('views.prepaid_expense.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="prepaidExpenseLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="prepaidExpenseLists ? prepaidExpenseLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-6 lg:col-span-6 self-start">
+            <div class="space-y-2">
+              <div class="flex items-start justify-between gap-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.prepaid_expense.page_title') }}
+                </div>
+                <div
+                  v-if="(item as PrepaidExpense).main_prepaid_expense_image?.url"
+                  class="flex cursor-zoom-in items-center gap-2 rounded-md border border-slate-200/60 bg-slate-50 px-2 py-1 dark:border-darkmode-400 dark:bg-darkmode-700/50"
+                  @click="openImagePreview(item as PrepaidExpense)"
+                >
+                  <img
+                    :src="(item as PrepaidExpense).main_prepaid_expense_image?.url"
+                    :alt="`${t('views.prepaid_expense.page_title')} ${t('views.prepaid_expense.fields.images')}`"
+                    class="h-10 w-10 rounded object-cover"
+                  />
+                  <div class="text-[11px] font-medium text-slate-600 dark:text-slate-300">
+                    {{ t('views.prepaid_expense.fields.images') }}
+                  </div>
+                </div>
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_expense.fields.code') }}</div>
+                <div class="col-span-8 break-words font-medium text-slate-700 dark:text-slate-200">
+                  {{ (item as PrepaidExpense).code }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_expense.fields.date') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as PrepaidExpense).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_expense.fields.category') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCategoryLabel(item as PrepaidExpense) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_expense.fields.estimated_useful_life') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ formatEstimatedUsefulLife((item as PrepaidExpense).estimated_useful_life) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_expense.fields.paid_immediately_cash_account') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCashAccountLabel(item as PrepaidExpense) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_expense.fields.amount_paid_immediately') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  <div class="w-full max-w-[8rem] font-semibold">
+                    {{ formatCurrency(Number((item as PrepaidExpense).amount_paid_immediately ?? 0)) }}
+                  </div>
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_expense.fields.remarks') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as PrepaidExpense).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-4 self-start lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.prepaid_expense.field_groups.payable_summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-5 text-slate-500">{{ t('views.prepaid_expense.fields.amount_payable') }}</div>
+                <div class="col-span-7 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PrepaidExpense).amount_payable ?? 0)) }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.prepaid_expense.fields.due_days') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as PrepaidExpense).due_days ?? 0 }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.prepaid_expense.fields.amount_payable_paid') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PrepaidExpense).amount_payable_paid ?? 0)) }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.prepaid_expense.fields.amount_payable_due') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PrepaidExpense).amount_payable_due ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.prepaid_expense.fields.amount_total') }}</div>
+                <div class="col-span-5 text-right font-semibold text-primary">
+                  {{ formatCurrency(Number((item as PrepaidExpense).amount_total ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.prepaid_expense.fields.is_amount_payable_paid_off') }}</div>
+                <div class="col-span-5 text-right">
+                  <span
+                    class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium"
+                    :class="
+                      (item as PrepaidExpense).is_amount_payable_paid_off
+                        ? 'bg-success/20 text-success'
+                        : 'bg-warning/20 text-warning'
+                    "
+                  >
+                    {{ getPaidOffLabel(item as PrepaidExpense) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-2 self-center">
+            <div class="flex justify-end gap-2 md:justify-start lg:min-h-full lg:items-center lg:justify-center">
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="viewSelected(index)"
+                >
+                  <Lucide icon="Info" class="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="editSelected(index)"
+                >
+                  <Lucide icon="Pen" class="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="deleteSelected(index)"
+                >
+                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                </Button>
+            </div>
+          </div>
+
+          <div
+            v-if="expandDetail === (item as PrepaidExpense).ulid"
+            class="col-span-12 mt-2 border-t border-slate-200 pt-3 dark:border-darkmode-400"
+          >
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  Payment Detail
+                </div>
+
+                <div v-if="!getPrepaidExpensePayments(item as PrepaidExpense).length" class="text-xs text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <div v-else class="space-y-3 rounded-md border border-slate-200/60 p-3 dark:border-darkmode-400">
+                  <div
+                    v-for="payment in getPrepaidExpensePayments(item as PrepaidExpense)"
+                    :key="payment.ulid"
+                    class="border-b border-slate-200/60 pb-3 text-sm last:border-b-0 last:pb-0 dark:border-darkmode-400"
+                  >
+                    <div class="font-medium break-words text-slate-700 dark:text-slate-200">
+                      {{ payment.code }}
+                    </div>
+                    <div class="mt-1 break-words text-xs text-slate-500">
+                      {{ formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss') }}
+                    </div>
+                    <div class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-600 dark:text-slate-300">
+                      <span>
+                        {{ t('views.expense_payment.fields.cash_account') }}
+                        <span class="text-slate-700 dark:text-slate-200">{{ getPaymentCashAccountLabel(payment) }}</span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.expense_payment.fields.amount') }}
+                        <span class="font-medium text-slate-700 dark:text-slate-200">
+                          {{ formatCurrency(Number(payment.amount ?? 0)) }}
+                        </span>
+                      </span>
+                    </div>
+                    <div v-if="payment.remarks?.trim()" class="mt-2 break-words text-xs text-slate-500">
+                      {{ payment.remarks }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="isImagePreviewOpen" size="xl" @close="closeImagePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <div class="flex items-center justify-between gap-4">
+          <div class="font-medium">
+            {{ previewPrepaidExpenseCode }} - {{ t('views.prepaid_expense.fields.images') }}
+          </div>
+          <div class="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              size="sm"
+              :disabled="previewImages.length <= 1"
+              @click="showPreviousImage"
+            >
+              <Lucide icon="ChevronLeft" class="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              variant="outline-secondary"
+              size="sm"
+              :disabled="previewImages.length <= 1"
+              @click="showNextImage"
+            >
+              <Lucide icon="ChevronRight" class="h-4 w-4" />
+            </Button>
+            <Button type="button" variant="outline-secondary" size="sm" @click="closeImagePreview">
+              <Lucide icon="X" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </Dialog.Title>
+      <Dialog.Description class="space-y-4 bg-slate-900 p-4">
+        <div class="flex min-h-[60vh] items-center justify-center">
+          <img
+            v-if="previewImages[previewImageIndex]?.url"
+            :src="previewImages[previewImageIndex]?.url"
+            class="max-h-[70vh] max-w-full object-contain"
+          />
+        </div>
+        <div
+          v-if="previewImages.length > 1"
+          class="flex gap-2 overflow-x-auto border-t border-slate-700 pt-3"
+        >
+          <button
+            v-for="(image, imageIndex) in previewImages"
+            :key="image.id"
+            type="button"
+            class="overflow-hidden rounded border-2"
+            :class="imageIndex === previewImageIndex ? 'border-primary' : 'border-transparent opacity-70'"
+            @click="previewImageIndex = imageIndex"
+          >
+            <img :src="image.url" class="h-14 w-14 object-cover" />
+          </button>
+        </div>
+      </Dialog.Description>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/prepaid-income/PrepaidIncomeCreate.vue b/web/src/pages/prepaid-income/PrepaidIncomeCreate.vue
new file mode 100644
index 000000000..93a27b494
--- /dev/null
+++ b/web/src/pages/prepaid-income/PrepaidIncomeCreate.vue
@@ -0,0 +1,664 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import PrepaidIncomeService from '@/services/PrepaidIncomeService';
+import IncomeCategoryService from '@/services/IncomeCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import PrepaidIncomeImagesField from '@/components/PrepaidIncome/PrepaidIncomeImagesField.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { IncomeCategory } from '@/types/models/IncomeCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+
+type PrepaidIncomePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const prepaidIncomeService = new PrepaidIncomeService();
+const incomeCategoryService = new IncomeCategoryService();
+const cashAccountService = new CashAccountService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.prepaid_income.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_income.field_groups.prepaid_income_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_income.field_groups.payments',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_income.field_groups.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const prepaidIncomeForm = prepaidIncomeService.usePrepaidIncomeCreateForm();
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(prepaidIncomeForm.amount_paid_immediately ?? 0) + Number(prepaidIncomeForm.amount_receivable ?? 0),
+);
+const prepaidIncomePaymentsForm = computed<PrepaidIncomePaymentFormItem[]>(
+  () => prepaidIncomeForm.payments as PrepaidIncomePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const invalidPrepaidIncomeField = (field: string) => prepaidIncomeForm.invalid(field as any);
+const validatePrepaidIncomeField = (field: string) => prepaidIncomeForm.validate(field as any);
+const getPrepaidIncomeFieldErrors = (field: string): string | undefined => {
+  const errors = (prepaidIncomeForm.errors as Record<string, string | string[] | undefined>)[field];
+
+  if (Array.isArray(errors)) {
+    return errors.join(' ');
+  }
+
+  return errors;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const setLocationData = () => {
+  prepaidIncomeForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('PREPAID_INCOME_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  prepaidIncomeForm.setData(data);
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await incomeCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: false,
+    include_id: prepaidIncomeForm.income_category_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: IncomeCategory) => ({
+      code: item.id,
+      name: item.display_code ? `${item.display_code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: prepaidIncomeForm.paid_immediately_cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  prepaidIncomeForm.forgetError('code');
+
+  if (prepaidIncomeForm.code === '_AUTO_') {
+    prepaidIncomeForm.setData({ code: '' });
+    return;
+  }
+
+  prepaidIncomeForm.setData({ code: '_AUTO_' });
+};
+
+const clearCategory = () => {
+  prepaidIncomeForm.setData({ income_category_id: '' });
+  prepaidIncomeForm.forgetError('income_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  prepaidIncomeForm.setData({ paid_immediately_cash_account_id: '' });
+  prepaidIncomeForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = prepaidIncomeForm.errors as Record<string, string | string[]>;
+
+  if (amount_total) {
+    prepaidIncomeForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_receivable') => {
+  clearAmountTotalError();
+  prepaidIncomeForm.validate(field);
+};
+
+const setPaymentCode = (index: number) => {
+  prepaidIncomeForm.forgetError(`payments.${index}.code` as any);
+  prepaidIncomePaymentsForm.value[index].code =
+    prepaidIncomePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = prepaidIncomePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validatePrepaidIncomeField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  prepaidIncomePaymentsForm.value.push({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removePayment = (index: number) => {
+  prepaidIncomePaymentsForm.value.splice(index, 1);
+
+  Object.keys(prepaidIncomeForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      prepaidIncomeForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  if (prepaidIncomeForm.hasErrors) {
+    const firstErrorKey = Object.keys(prepaidIncomeForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await prepaidIncomeForm
+    .submit()
+    .then(() => {
+      cacheService.removeLastEntity('PREPAID_INCOME_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-prepaid-income-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  prepaidIncomeForm.reset();
+  prepaidIncomeForm.setErrors({});
+  setLocationData();
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  prepaidIncomeForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('PREPAID_INCOME_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="prepaidIncomeForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="prepaidIncomeForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="prepaidIncomeForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('code') }">
+                {{ t('views.prepaid_income.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="prepaidIncomeForm.code"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('code') }"
+                :placeholder="t('views.prepaid_income.fields.code')"
+                @set-auto="setCode"
+                @change="prepaidIncomeForm.validate('code')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('date') }">
+                {{ t('views.prepaid_income.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="prepaidIncomeForm.date"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('date') }"
+                :placeholder="t('views.prepaid_income.fields.date')"
+                @change="prepaidIncomeForm.validate('date')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('income_category_id') }">
+                {{ t('views.prepaid_income.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="prepaidIncomeForm.income_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('income_category_id') }"
+                @change="prepaidIncomeForm.validate('income_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.income_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('estimated_useful_life') }">
+                {{ t('views.prepaid_income.fields.estimated_useful_life') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="estimated_useful_life"
+                v-model="prepaidIncomeForm.estimated_useful_life"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('estimated_useful_life') }"
+                :placeholder="t('views.prepaid_income.fields.estimated_useful_life')"
+                @change="prepaidIncomeForm.validate('estimated_useful_life')"
+              />
+              <div class="mt-1 text-xs text-slate-500">
+                {{ t('views.prepaid_income.hints.estimated_useful_life') }}
+              </div>
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.estimated_useful_life" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.prepaid_income.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="prepaidIncomeForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('paid_immediately_cash_account_id') }"
+                @change="prepaidIncomeForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('amount_paid_immediately') }">
+                {{ t('views.prepaid_income.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="prepaidIncomeForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.prepaid_income.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('amount_receivable') }">
+                {{ t('views.prepaid_income.fields.amount_receivable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="prepaidIncomeForm.amount_receivable"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('amount_receivable') }"
+                :placeholder="t('views.prepaid_income.fields.amount_receivable')"
+                @change="handleAmountChange('amount_receivable')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.amount_receivable" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('due_days') }">
+                {{ t('views.prepaid_income.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="prepaidIncomeForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('due_days') }"
+                :placeholder="t('views.prepaid_income.fields.due_days')"
+                @change="prepaidIncomeForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>
+                {{ t('views.prepaid_income.fields.amount_total') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="amount_total"
+                :model-value="amountTotalPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('remarks') }">
+                {{ t('views.prepaid_income.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="prepaidIncomeForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('remarks') }"
+                :placeholder="t('views.prepaid_income.fields.remarks')"
+                @change="prepaidIncomeForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="(prepaidIncomeForm.errors as any).payments" />
+
+          <div v-if="prepaidIncomePaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div v-for="(payment, index) in prepaidIncomePaymentsForm" :key="`prepaid-income-payment-${index}`" class="space-y-3">
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.code`) }">
+                    {{ t('views.prepaid_income.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.code`) }"
+                    :placeholder="t('views.prepaid_income.fields.code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validatePrepaidIncomeField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.date`) }">
+                    {{ t('views.prepaid_income.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.date`) }"
+                    :placeholder="t('views.prepaid_income.fields.date')"
+                    @change="validatePrepaidIncomeField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.income_payment.fields.cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="paidImmediatelyCashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.cash_account_id`) }"
+                    @change="validatePrepaidIncomeField(`payments.${index}.cash_account_id`)"
+                    @search="loadPaidImmediatelyCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.amount`) }">
+                    {{ t('views.income_payment.fields.amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.amount`) }"
+                        @change="validatePrepaidIncomeField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.amount`)" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.remarks`) }">
+                    {{ t('views.prepaid_income.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.prepaid_income.fields.remarks')"
+                    @change="validatePrepaidIncomeField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.prepaid_income.fields.images') }}
+          </FormLabel>
+          <PrepaidIncomeImagesField v-model="prepaidIncomeForm.image_hashes" />
+          <FormErrorMessages :messages="(prepaidIncomeForm.errors as any).image_hashes" />
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="prepaidIncomeForm.validating || prepaidIncomeForm.hasErrors"
+          >
+            <Lucide v-if="prepaidIncomeForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/prepaid-income/PrepaidIncomeEdit.vue b/web/src/pages/prepaid-income/PrepaidIncomeEdit.vue
new file mode 100644
index 000000000..5a35f4738
--- /dev/null
+++ b/web/src/pages/prepaid-income/PrepaidIncomeEdit.vue
@@ -0,0 +1,710 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatDate } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import PrepaidIncomeService from '@/services/PrepaidIncomeService';
+import IncomeCategoryService from '@/services/IncomeCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import PrepaidIncomeImagesField from '@/components/PrepaidIncome/PrepaidIncomeImagesField.vue';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { PrepaidIncome } from '@/types/models/PrepaidIncome';
+import type { IncomeCategory } from '@/types/models/IncomeCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+import type { PrepaidIncomeImage } from '@/types/models/PrepaidIncomeImage';
+import type { PrepaidIncomePayment } from '@/types/models/PrepaidIncomePayment';
+
+type PrepaidIncomePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const prepaidIncomeService = new PrepaidIncomeService();
+const incomeCategoryService = new IncomeCategoryService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.prepaid_income.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_income.field_groups.prepaid_income_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_income.field_groups.payments',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.prepaid_income.field_groups.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const prepaidIncomeForm = prepaidIncomeService.usePrepaidIncomeEditForm(route.params.ulid.toString());
+const prepaidIncomeData = ref<PrepaidIncome | null>(null);
+const uploadedImages = ref<PrepaidIncomeImage[]>([]);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(prepaidIncomeForm.amount_paid_immediately ?? 0) + Number(prepaidIncomeForm.amount_receivable ?? 0),
+);
+const prepaidIncomePaymentsForm = computed<PrepaidIncomePaymentFormItem[]>(
+  () => prepaidIncomeForm.payments as PrepaidIncomePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+const invalidPrepaidIncomeField = (field: string) => prepaidIncomeForm.invalid(field as any);
+const validatePrepaidIncomeField = (field: string) => prepaidIncomeForm.validate(field as any);
+const getPrepaidIncomeFieldErrors = (field: string): string | undefined => {
+  const errors = (prepaidIncomeForm.errors as Record<string, string | string[] | undefined>)[field];
+
+  if (Array.isArray(errors)) {
+    return errors.join(' ');
+  }
+
+  return errors;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await prepaidIncomeService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    prepaidIncomeData.value = result.data;
+
+    prepaidIncomeForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      code: result.data.code,
+      date: formatDate(result.data.date, 'YYYY-MM-DD HH:mm:ss'),
+      income_category_id: result.data.category?.id ?? '',
+      estimated_useful_life: result.data.estimated_useful_life,
+      paid_immediately_cash_account_id: result.data.paid_immediately_cash_account?.id ?? '',
+      amount_paid_immediately: result.data.amount_paid_immediately,
+      amount_receivable: result.data.amount_receivable,
+      due_days: result.data.due_days,
+      remarks: result.data.remarks ?? '',
+      delete_image_ids: [],
+      image_hashes: [],
+      delete_payment_ids: [],
+      payments: (result.data.payments ?? []).map((payment: PrepaidIncomePayment) => ({
+        id: payment.id,
+        code: payment.code,
+        date: formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss'),
+        cash_account_id: payment.cash_account?.id ?? '',
+        amount: payment.amount,
+        remarks: payment.remarks ?? '',
+      })),
+    } as any);
+
+    if (result.data.prepaid_income_images) {
+      const images = result.data.prepaid_income_images.map((img: PrepaidIncomeImage) => ({
+        id: img.id,
+        prepaid_income_id: img.prepaid_income_id,
+        path: img.path,
+        url: img.url,
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+
+      uploadedImages.value = images;
+      prepaidIncomeForm.image_hashes = images.map((img: PrepaidIncomeImage) => ({
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+    } else {
+      uploadedImages.value = [];
+    }
+  } else {
+    router.push({ name: 'side-menu-prepaid-income-list' });
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await incomeCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    parent_id: undefined,
+    has_parent: undefined,
+    has_children: false,
+    include_id: prepaidIncomeData.value?.category?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: IncomeCategory) => ({
+      code: item.id,
+      name: item.display_code ? `${item.display_code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: prepaidIncomeData.value?.paid_immediately_cash_account?.id,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  prepaidIncomeForm.forgetError('code');
+
+  if (prepaidIncomeForm.code === '_AUTO_') {
+    prepaidIncomeForm.setData({ code: '' });
+    return;
+  }
+
+  prepaidIncomeForm.setData({ code: '_AUTO_' });
+};
+
+const clearCategory = () => {
+  prepaidIncomeForm.setData({ income_category_id: '' });
+  prepaidIncomeForm.forgetError('income_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  prepaidIncomeForm.setData({ paid_immediately_cash_account_id: '' });
+  prepaidIncomeForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = prepaidIncomeForm.errors as Record<string, string | string[]>;
+
+  if (amount_total) {
+    prepaidIncomeForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_receivable') => {
+  clearAmountTotalError();
+  prepaidIncomeForm.validate(field);
+};
+
+const setPaymentCode = (index: number) => {
+  prepaidIncomeForm.forgetError(`payments.${index}.code` as any);
+  prepaidIncomePaymentsForm.value[index].code =
+    prepaidIncomePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = prepaidIncomePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validatePrepaidIncomeField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  prepaidIncomePaymentsForm.value.push({
+    id: null,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removePayment = (index: number) => {
+  const payment = prepaidIncomePaymentsForm.value[index];
+
+  if (payment?.id && !prepaidIncomeForm.delete_payment_ids.includes(payment.id)) {
+    prepaidIncomeForm.delete_payment_ids.push(payment.id);
+  }
+
+  prepaidIncomePaymentsForm.value.splice(index, 1);
+
+  Object.keys(prepaidIncomeForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      prepaidIncomeForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  if (prepaidIncomeForm.hasErrors) {
+    const firstErrorKey = Object.keys(prepaidIncomeForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await prepaidIncomeForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-prepaid-income-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  prepaidIncomeForm.reset();
+  prepaidIncomeForm.setErrors({});
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+  await loadData();
+  await Promise.all([loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="prepaidIncomeForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="prepaidIncomeForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="prepaidIncomeForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('code') }">
+                {{ t('views.prepaid_income.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="prepaidIncomeForm.code"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('code') }"
+                :placeholder="t('views.prepaid_income.fields.code')"
+                @set-auto="setCode"
+                @change="prepaidIncomeForm.validate('code')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('date') }">
+                {{ t('views.prepaid_income.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="prepaidIncomeForm.date"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('date') }"
+                :placeholder="t('views.prepaid_income.fields.date')"
+                @change="prepaidIncomeForm.validate('date')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('income_category_id') }">
+                {{ t('views.prepaid_income.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="prepaidIncomeForm.income_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('income_category_id') }"
+                @change="prepaidIncomeForm.validate('income_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.income_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('estimated_useful_life') }">
+                {{ t('views.prepaid_income.fields.estimated_useful_life') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="estimated_useful_life"
+                v-model="prepaidIncomeForm.estimated_useful_life"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('estimated_useful_life') }"
+                :placeholder="t('views.prepaid_income.fields.estimated_useful_life')"
+                @change="prepaidIncomeForm.validate('estimated_useful_life')"
+              />
+              <div class="mt-1 text-xs text-slate-500">
+                {{ t('views.prepaid_income.hints.estimated_useful_life') }}
+              </div>
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.estimated_useful_life" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.prepaid_income.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="prepaidIncomeForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('paid_immediately_cash_account_id') }"
+                @change="prepaidIncomeForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('amount_paid_immediately') }">
+                {{ t('views.prepaid_income.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="prepaidIncomeForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.prepaid_income.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('amount_receivable') }">
+                {{ t('views.prepaid_income.fields.amount_receivable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="prepaidIncomeForm.amount_receivable"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('amount_receivable') }"
+                :placeholder="t('views.prepaid_income.fields.amount_receivable')"
+                @change="handleAmountChange('amount_receivable')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.amount_receivable" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('due_days') }">
+                {{ t('views.prepaid_income.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="prepaidIncomeForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('due_days') }"
+                :placeholder="t('views.prepaid_income.fields.due_days')"
+                @change="prepaidIncomeForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>
+                {{ t('views.prepaid_income.fields.amount_total') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="amount_total"
+                :model-value="amountTotalPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': prepaidIncomeForm.invalid('remarks') }">
+                {{ t('views.prepaid_income.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="prepaidIncomeForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': prepaidIncomeForm.invalid('remarks') }"
+                :placeholder="t('views.prepaid_income.fields.remarks')"
+                @change="prepaidIncomeForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="prepaidIncomeForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="(prepaidIncomeForm.errors as any).payments" />
+          <FormErrorMessages :messages="(prepaidIncomeForm.errors as any).delete_payment_ids" />
+
+          <div v-if="prepaidIncomePaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div v-for="(payment, index) in prepaidIncomePaymentsForm" :key="payment.id ?? `prepaid-income-payment-${index}`" class="space-y-3">
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.code`) }">
+                    {{ t('views.prepaid_income.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.code`) }"
+                    :placeholder="t('views.prepaid_income.fields.code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validatePrepaidIncomeField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.date`) }">
+                    {{ t('views.prepaid_income.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.date`) }"
+                    :placeholder="t('views.prepaid_income.fields.date')"
+                    @change="validatePrepaidIncomeField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.income_payment.fields.cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="paidImmediatelyCashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.cash_account_id`) }"
+                    @change="validatePrepaidIncomeField(`payments.${index}.cash_account_id`)"
+                    @search="loadPaidImmediatelyCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.amount`) }">
+                    {{ t('views.income_payment.fields.amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.amount`) }"
+                        @change="validatePrepaidIncomeField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.amount`)" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidPrepaidIncomeField(`payments.${index}.remarks`) }">
+                    {{ t('views.prepaid_income.fields.remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidPrepaidIncomeField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.prepaid_income.fields.remarks')"
+                    @change="validatePrepaidIncomeField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getPrepaidIncomeFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.prepaid_income.fields.images') }}
+          </FormLabel>
+          <PrepaidIncomeImagesField
+            v-model="prepaidIncomeForm.image_hashes"
+            v-model:existing-images="uploadedImages"
+            v-model:delete-image-ids="prepaidIncomeForm.delete_image_ids"
+          />
+          <FormErrorMessages :messages="(prepaidIncomeForm.errors as any).image_hashes" />
+          <FormErrorMessages :messages="(prepaidIncomeForm.errors as any).delete_image_ids" />
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="prepaidIncomeForm.validating || prepaidIncomeForm.hasErrors"
+          >
+            <Lucide v-if="prepaidIncomeForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/prepaid-income/PrepaidIncomeIndex.vue b/web/src/pages/prepaid-income/PrepaidIncomeIndex.vue
new file mode 100644
index 000000000..11e725181
--- /dev/null
+++ b/web/src/pages/prepaid-income/PrepaidIncomeIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.prepaid_income.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const prepaidIncomeNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[prepaidIncomeNotification]', (el: NotificationElement) => {
+  prepaidIncomeNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-prepaid-income-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-prepaid-income-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.prepaid_income.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.prepaid_income.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.prepaid_income.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  prepaidIncomeNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('PREPAID_INCOME_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('PREPAID_INCOME_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="prepaidIncomeNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/prepaid-income/PrepaidIncomeList.vue b/web/src/pages/prepaid-income/PrepaidIncomeList.vue
new file mode 100644
index 000000000..d23045379
--- /dev/null
+++ b/web/src/pages/prepaid-income/PrepaidIncomeList.vue
@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PrepaidIncomeService from '@/services/PrepaidIncomeService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { PrepaidIncome } from '@/types/models/PrepaidIncome';
+import type { PrepaidIncomeImage } from '@/types/models/PrepaidIncomeImage';
+import type { PrepaidIncomePayment } from '@/types/models/PrepaidIncomePayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PrepaidIncomeReadAnyPaginateRequest } from '@/types/services/prepaid-income/PrepaidIncomeRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const prepaidIncomeService = new PrepaidIncomeService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | null>(null);
+const isImagePreviewOpen = ref(false);
+const previewImages = ref<PrepaidIncomeImage[]>([]);
+const previewImageIndex = ref(0);
+const previewPrepaidIncomeCode = ref('');
+const prepaidIncomeLists = ref<Collection<Array<PrepaidIncome>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+  await getPrepaidIncomes('', true, 1, 10);
+});
+
+const getPrepaidIncomes = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  const searchReq: PrepaidIncomeReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    income_category_id: null,
+    is_amount_receivable_paid_off: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+  const result: ServiceResponse<Collection<Array<PrepaidIncome>> | null> =
+    await prepaidIncomeService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    prepaidIncomeLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getPrepaidIncomes(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const editSelected = (idx: number) => {
+  if (!prepaidIncomeLists.value) return;
+  router.push({
+    name: 'side-menu-prepaid-income-edit',
+    params: { ulid: prepaidIncomeLists.value.data[idx].ulid },
+  });
+};
+
+const viewSelected = (idx: number) => {
+  if (!prepaidIncomeLists.value) return;
+
+  const prepaidIncome = prepaidIncomeLists.value.data[idx];
+  expandDetail.value = expandDetail.value === prepaidIncome.ulid ? null : prepaidIncome.ulid;
+};
+
+const deleteSelected = (idx: number) => {
+  if (!prepaidIncomeLists.value) return;
+  deleteUlid.value = prepaidIncomeLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+  const result = await prepaidIncomeService.delete(deleteUlid.value);
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getPrepaidIncomes('', true, 1, 10);
+    showNotification(
+      t('views.prepaid_income.alert.delete_prepaid_income.title'),
+      t('views.prepaid_income.alert.delete_prepaid_income.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+
+const getCategoryLabel = (prepaidIncome: PrepaidIncome) => {
+  if (!prepaidIncome.category) return '-';
+
+  return prepaidIncome.category.display_code
+    ? `${prepaidIncome.category.display_code} - ${prepaidIncome.category.name}`
+    : prepaidIncome.category.name;
+};
+
+const getCashAccountLabel = (prepaidIncome: PrepaidIncome) => {
+  if (!prepaidIncome.paid_immediately_cash_account) return '-';
+
+  return prepaidIncome.paid_immediately_cash_account.code
+    ? `${prepaidIncome.paid_immediately_cash_account.code} - ${prepaidIncome.paid_immediately_cash_account.name}`
+    : prepaidIncome.paid_immediately_cash_account.name;
+};
+
+const getPaidOffLabel = (prepaidIncome: PrepaidIncome) =>
+  prepaidIncome.is_amount_receivable_paid_off
+    ? t('views.prepaid_income.status.paid_off')
+    : t('views.prepaid_income.status.not_paid_off');
+
+const formatEstimatedUsefulLife = (estimatedUsefulLife?: number | null): string => {
+  const totalMonths = Number(estimatedUsefulLife ?? 0);
+  const totalYears = totalMonths / 12;
+  const formattedYears = Number.isInteger(totalYears)
+    ? totalYears.toString()
+    : totalYears.toFixed(1).replace(/\.0$/, '');
+  const monthUnit = totalMonths === 1
+    ? t('views.prepaid_income.units.month')
+    : t('views.prepaid_income.units.months');
+  const yearUnit = totalYears === 1
+    ? t('views.prepaid_income.units.year')
+    : t('views.prepaid_income.units.years');
+
+  return `${totalMonths} ${monthUnit} (${formattedYears} ${yearUnit})`;
+};
+
+const getPrepaidIncomeImages = (prepaidIncome: PrepaidIncome): PrepaidIncomeImage[] => {
+  const images = prepaidIncome.prepaid_income_images?.filter((image) => !!image.url) ?? [];
+
+  if (images.length > 0) {
+    return images;
+  }
+
+  return prepaidIncome.main_prepaid_income_image?.url ? [prepaidIncome.main_prepaid_income_image] : [];
+};
+
+const getPrepaidIncomePayments = (prepaidIncome: PrepaidIncome) => prepaidIncome.payments ?? [];
+
+const getPaymentCashAccountLabel = (payment: PrepaidIncomePayment) => {
+  if (!payment.cash_account) return '-';
+
+  return payment.cash_account.code ? `${payment.cash_account.code} - ${payment.cash_account.name}` : payment.cash_account.name;
+};
+
+const openImagePreview = (prepaidIncome: PrepaidIncome) => {
+  const images = getPrepaidIncomeImages(prepaidIncome);
+
+  if (!images.length) return;
+
+  const mainImageIndex = images.findIndex((image) => image.is_main);
+
+  previewImages.value = images;
+  previewImageIndex.value = mainImageIndex >= 0 ? mainImageIndex : 0;
+  previewPrepaidIncomeCode.value = prepaidIncome.code;
+  isImagePreviewOpen.value = true;
+};
+
+const closeImagePreview = () => {
+  isImagePreviewOpen.value = false;
+  previewImages.value = [];
+  previewImageIndex.value = 0;
+  previewPrepaidIncomeCode.value = '';
+};
+
+const showPreviousImage = () => {
+  if (previewImages.value.length <= 1) return;
+
+  previewImageIndex.value =
+    previewImageIndex.value === 0 ? previewImages.value.length - 1 : previewImageIndex.value - 1;
+};
+
+const showNextImage = () => {
+  if (previewImages.value.length <= 1) return;
+
+  previewImageIndex.value =
+    previewImageIndex.value === previewImages.value.length - 1 ? 0 : previewImageIndex.value + 1;
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="prepaidIncomeLists"
+        :title="t('views.prepaid_income.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="prepaidIncomeLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="prepaidIncomeLists ? prepaidIncomeLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-6 lg:col-span-6 self-start">
+            <div class="space-y-2">
+              <div class="flex items-start justify-between gap-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.prepaid_income.page_title') }}
+                </div>
+                <div
+                  v-if="(item as PrepaidIncome).main_prepaid_income_image?.url"
+                  class="flex cursor-zoom-in items-center gap-2 rounded-md border border-slate-200/60 bg-slate-50 px-2 py-1 dark:border-darkmode-400 dark:bg-darkmode-700/50"
+                  @click="openImagePreview(item as PrepaidIncome)"
+                >
+                  <img
+                    :src="(item as PrepaidIncome).main_prepaid_income_image?.url"
+                    :alt="`${t('views.prepaid_income.page_title')} ${t('views.prepaid_income.fields.images')}`"
+                    class="h-10 w-10 rounded object-cover"
+                  />
+                  <div class="text-[11px] font-medium text-slate-600 dark:text-slate-300">
+                    {{ t('views.prepaid_income.fields.images') }}
+                  </div>
+                </div>
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_income.fields.code') }}</div>
+                <div class="col-span-8 break-words font-medium text-slate-700 dark:text-slate-200">
+                  {{ (item as PrepaidIncome).code }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_income.fields.date') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as PrepaidIncome).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_income.fields.category') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCategoryLabel(item as PrepaidIncome) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_income.fields.estimated_useful_life') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ formatEstimatedUsefulLife((item as PrepaidIncome).estimated_useful_life) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_income.fields.paid_immediately_cash_account') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCashAccountLabel(item as PrepaidIncome) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_income.fields.amount_paid_immediately') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  <div class="w-full max-w-[8rem] font-semibold">
+                    {{ formatCurrency(Number((item as PrepaidIncome).amount_paid_immediately ?? 0)) }}
+                  </div>
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.prepaid_income.fields.remarks') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as PrepaidIncome).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-4 self-start lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.prepaid_income.field_groups.receivable_summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-5 text-slate-500">{{ t('views.prepaid_income.fields.amount_receivable') }}</div>
+                <div class="col-span-7 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PrepaidIncome).amount_receivable ?? 0)) }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.prepaid_income.fields.due_days') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as PrepaidIncome).due_days ?? 0 }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.prepaid_income.fields.amount_receivable_paid') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PrepaidIncome).amount_receivable_paid ?? 0)) }}
+                </div>
+                <div class="col-span-5 text-slate-500">{{ t('views.prepaid_income.fields.amount_receivable_due') }}</div>
+                <div class="col-span-7 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PrepaidIncome).amount_receivable_due ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.prepaid_income.fields.amount_total') }}</div>
+                <div class="col-span-5 text-right font-semibold text-primary">
+                  {{ formatCurrency(Number((item as PrepaidIncome).amount_total ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.prepaid_income.fields.is_amount_receivable_paid_off') }}</div>
+                <div class="col-span-5 text-right">
+                  <span
+                    class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium"
+                    :class="
+                      (item as PrepaidIncome).is_amount_receivable_paid_off
+                        ? 'bg-success/20 text-success'
+                        : 'bg-warning/20 text-warning'
+                    "
+                  >
+                    {{ getPaidOffLabel(item as PrepaidIncome) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-2 self-center">
+            <div class="flex justify-end gap-2 md:justify-start lg:min-h-full lg:items-center lg:justify-center">
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="viewSelected(index)"
+                >
+                  <Lucide icon="Info" class="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="editSelected(index)"
+                >
+                  <Lucide icon="Pen" class="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline-secondary"
+                  class="flex h-9 w-9 items-center justify-center"
+                  @click="deleteSelected(index)"
+                >
+                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                </Button>
+            </div>
+          </div>
+
+          <div
+            v-if="expandDetail === (item as PrepaidIncome).ulid"
+            class="col-span-12 mt-2 border-t border-slate-200 pt-3 dark:border-darkmode-400"
+          >
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  Payment Detail
+                </div>
+
+                <div v-if="!getPrepaidIncomePayments(item as PrepaidIncome).length" class="text-xs text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <div v-else class="space-y-3 rounded-md border border-slate-200/60 p-3 dark:border-darkmode-400">
+                  <div
+                    v-for="payment in getPrepaidIncomePayments(item as PrepaidIncome)"
+                    :key="payment.ulid"
+                    class="border-b border-slate-200/60 pb-3 text-sm last:border-b-0 last:pb-0 dark:border-darkmode-400"
+                  >
+                    <div class="font-medium break-words text-slate-700 dark:text-slate-200">
+                      {{ payment.code }}
+                    </div>
+                    <div class="mt-1 break-words text-xs text-slate-500">
+                      {{ formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss') }}
+                    </div>
+                    <div class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-600 dark:text-slate-300">
+                      <span>
+                        {{ t('views.income_payment.fields.cash_account') }}
+                        <span class="text-slate-700 dark:text-slate-200">{{ getPaymentCashAccountLabel(payment) }}</span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.income_payment.fields.amount') }}
+                        <span class="font-medium text-slate-700 dark:text-slate-200">
+                          {{ formatCurrency(Number(payment.amount ?? 0)) }}
+                        </span>
+                      </span>
+                    </div>
+                    <div v-if="payment.remarks?.trim()" class="mt-2 break-words text-xs text-slate-500">
+                      {{ payment.remarks }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+
+  <Dialog :open="isImagePreviewOpen" size="xl" @close="closeImagePreview">
+    <Dialog.Panel class="flex flex-col">
+      <Dialog.Title>
+        <div class="flex items-center justify-between gap-4">
+          <div class="font-medium">
+            {{ previewPrepaidIncomeCode }} - {{ t('views.prepaid_income.fields.images') }}
+          </div>
+          <div class="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              size="sm"
+              :disabled="previewImages.length <= 1"
+              @click="showPreviousImage"
+            >
+              <Lucide icon="ChevronLeft" class="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              variant="outline-secondary"
+              size="sm"
+              :disabled="previewImages.length <= 1"
+              @click="showNextImage"
+            >
+              <Lucide icon="ChevronRight" class="h-4 w-4" />
+            </Button>
+            <Button type="button" variant="outline-secondary" size="sm" @click="closeImagePreview">
+              <Lucide icon="X" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </Dialog.Title>
+      <Dialog.Description class="space-y-4 bg-slate-900 p-4">
+        <div class="flex min-h-[60vh] items-center justify-center">
+          <img
+            v-if="previewImages[previewImageIndex]?.url"
+            :src="previewImages[previewImageIndex]?.url"
+            class="max-h-[70vh] max-w-full object-contain"
+          />
+        </div>
+        <div
+          v-if="previewImages.length > 1"
+          class="flex gap-2 overflow-x-auto border-t border-slate-700 pt-3"
+        >
+          <button
+            v-for="(image, imageIndex) in previewImages"
+            :key="image.id"
+            type="button"
+            class="overflow-hidden rounded border-2"
+            :class="imageIndex === previewImageIndex ? 'border-primary' : 'border-transparent opacity-70'"
+            @click="previewImageIndex = imageIndex"
+          >
+            <img :src="image.url" class="h-14 w-14 object-cover" />
+          </button>
+        </div>
+      </Dialog.Description>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/product-category/ProductCategoryCreate.vue b/web/src/pages/product-category/ProductCategoryCreate.vue
new file mode 100644
index 000000000..e0d5f29e5
--- /dev/null
+++ b/web/src/pages/product-category/ProductCategoryCreate.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { FormInput, FormLabel, FormSelect, FormInputCode, FormErrorMessages } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { AxiosError, isAxiosError } from 'axios';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const productCategoryService = new ProductCategoryService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.product_category.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.product_category.field_groups.product_category_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const typeDDL = ref<Array<DropDownOption> | null>(null);
+
+  const productCategoryForm = productCategoryService.useProductCategoryCreateForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    loadFromCache();
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    getDDL();
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const getDDL = async (): Promise<void> => {
+    const result = await productCategoryService.getTypes();
+    if (result) {
+      typeDDL.value = result;
+    }
+  };
+
+  const setCompanyIdData = () => {
+    productCategoryForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('PRODUCT_CATEGORY_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    productCategoryForm.setData(data);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (productCategoryForm.hasErrors) {
+      scrollToError(Object.keys(productCategoryForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await productCategoryForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-product-product-category-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    productCategoryForm.reset();
+    productCategoryForm.setErrors({});
+  };
+
+  const setCode = () => {
+    productCategoryForm.forgetError('code');
+    if (productCategoryForm.code == '_AUTO_') {
+      productCategoryForm.setData({ code: '' });
+    } else {
+      productCategoryForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    productCategoryForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('PRODUCT_CATEGORY_CREATE', newValue.data());
+      if (productCategoryForm.hasErrors) {
+      }
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="productCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="productCategoryForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': productCategoryForm.invalid('code') }">
+              {{ t('views.product_category.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="productCategoryForm.code"
+              :class="{ 'border-danger': productCategoryForm.invalid('code') }"
+              :placeholder="t('views.product_category.fields.code')"
+              @set-auto="setCode"
+              @change="productCategoryForm.validate('code')"
+            />
+            <FormErrorMessages :messages="productCategoryForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': productCategoryForm.invalid('name') }">
+              {{ t('views.product_category.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="productCategoryForm.name"
+              type="text"
+              :class="{ 'border-danger': productCategoryForm.invalid('name') }"
+              :placeholder="t('views.product_category.fields.name')"
+              @change="productCategoryForm.validate('name')"
+            />
+            <FormErrorMessages :messages="productCategoryForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': productCategoryForm.invalid('type') }">
+              {{ t('views.product_category.fields.type') }}
+            </FormLabel>
+            <FormSelect
+              v-model="productCategoryForm.type"
+              :class="{ 'border-danger': productCategoryForm.invalid('type') }"
+              @change="productCategoryForm.validate('type')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in typeDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="productCategoryForm.errors.type" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="productCategoryForm.validating || productCategoryForm.hasErrors"
+          >
+            <Lucide v-if="productCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/product-category/ProductCategoryEdit.vue b/web/src/pages/product-category/ProductCategoryEdit.vue
new file mode 100644
index 000000000..348c204d9
--- /dev/null
+++ b/web/src/pages/product-category/ProductCategoryEdit.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { useRoute, useRouter } from 'vue-router';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { FormInput, FormLabel, FormSelect, FormInputCode, FormErrorMessages } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { ProductCategory } from '@/types/models/ProductCategory';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const productCategoryService = new ProductCategoryService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.product_category.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.product_category.field_groups.product_category_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const typeDDL = ref<Array<DropDownOption> | null>(null);
+
+  const productCategoryForm = productCategoryService.useProductCategoryEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    await Promise.all([getDDL(), loadData(route.params.ulid as string)]);
+  });
+  // #endregion
+
+  // #region Methods
+  const getDDL = async (): Promise<void> => {
+    typeDDL.value = await productCategoryService.getTypes();
+  };
+
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    const response: ServiceResponse<ProductCategory | null> = await productCategoryService.read(ulid);
+
+    if (response && response.data) {
+      productCategoryForm.setData({
+        company_id: response.data.company.id,
+        code: response.data.code,
+        name: response.data.name,
+        type: response.data.type,
+      });
+    }
+    emits('loading-state', false);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (productCategoryForm.hasErrors) {
+      scrollToError(Object.keys(productCategoryForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await productCategoryForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-product-product-category-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    productCategoryForm.reset();
+    productCategoryForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    productCategoryForm.forgetError('code');
+    if (productCategoryForm.code == '_AUTO_') {
+      productCategoryForm.setData({ code: '' });
+    } else {
+      productCategoryForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #region Watchers
+  watch(
+    productCategoryForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('PRODUCT_CATEGORY_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="productCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="productCategoryForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': productCategoryForm.invalid('code') }">
+              {{ t('views.product_category.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="productCategoryForm.code"
+              :class="{ 'border-danger': productCategoryForm.invalid('code') }"
+              :placeholder="t('views.product_category.fields.code')"
+              @set-auto="setCode"
+              @change="productCategoryForm.validate('code')"
+            />
+            <FormErrorMessages :messages="productCategoryForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': productCategoryForm.invalid('name') }">
+              {{ t('views.product_category.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="productCategoryForm.name"
+              type="text"
+              :class="{ 'border-danger': productCategoryForm.invalid('name') }"
+              :placeholder="t('views.product_category.fields.name')"
+              @change="productCategoryForm.validate('name')"
+            />
+            <FormErrorMessages :messages="productCategoryForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': productCategoryForm.invalid('type') }">
+              {{ t('views.product_category.fields.type') }}
+            </FormLabel>
+            <FormSelect
+              v-model="productCategoryForm.type"
+              :class="{ 'border-danger': productCategoryForm.invalid('type') }"
+              @change="productCategoryForm.validate('type')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in typeDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="productCategoryForm.errors.type" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="productCategoryForm.validating || productCategoryForm.hasErrors"
+          >
+            <Lucide v-if="productCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/product-category/ProductCategoryIndex.vue b/web/src/pages/product-category/ProductCategoryIndex.vue
new file mode 100644
index 000000000..aa0d0ac3e
--- /dev/null
+++ b/web/src/pages/product-category/ProductCategoryIndex.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.product_category.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const productCategoryNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[productCategoryNotification]', (el: NotificationElement) => {
+    productCategoryNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-product-product-category-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-product-product-category-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.product_category.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.product_category.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.product_category.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (productCategoryNotification.value) productCategoryNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('PRODUCT_CATEGORY_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('PRODUCT_CATEGORY_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="productCategoryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/product-category/ProductCategoryList.vue b/web/src/pages/product-category/ProductCategoryList.vue
new file mode 100644
index 000000000..a4d7ce879
--- /dev/null
+++ b/web/src/pages/product-category/ProductCategoryList.vue
@@ -0,0 +1,328 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import { ProductCategory } from '@/types/models/ProductCategory';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Resource } from '@/types/resources/Resource';
+  import { ProductCategoryReadAnyPaginateRequest } from '@/types/services/product-category/ProductCategoryRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const productCategoryServices = new ProductCategoryService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const productCategoryLists = ref<Collection<Array<ProductCategory>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getProductCategories('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getProductCategories = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    let company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: ProductCategoryReadAnyPaginateRequest = {
+      with_trashed: false,
+
+      company_id: company_id,
+      search: search,
+      type: undefined,
+      include_id: undefined,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<ProductCategory>> | null> =
+      await productCategoryServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      productCategoryLists.value = result.data as Collection<Array<ProductCategory>>;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getProductCategories(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!productCategoryLists.value) return;
+
+    let ulid = productCategoryLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-product-product-category-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!productCategoryLists.value) return;
+
+    let itemUlid = productCategoryLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await productCategoryServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getProductCategories('', true, 1, 10);
+      showNotification(
+        t('views.product_category.alert.delete_product_category.title'),
+        t('views.product_category.alert.delete_product_category.content'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const getTypeLabel = (type: number): string => {
+    return type === 1 ? t('views.product_category.type.product') : t('views.product_category.type.service');
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.product_category.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="productCategoryLists ? productCategoryLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.product_category.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.product_category.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.product_category.table.cols.type') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="productCategoryLists !== null">
+          <template v-if="productCategoryLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="4">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in productCategoryLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>{{ getTypeLabel(item.type) }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="4">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.product_category.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.product_category.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.product_category.fields.type') }}
+                  </div>
+                  <div class="flex-1">{{ getTypeLabel(item.type) }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/product-service/ProductServiceCreate.vue b/web/src/pages/product-service/ProductServiceCreate.vue
new file mode 100644
index 000000000..0aa82b8b6
--- /dev/null
+++ b/web/src/pages/product-service/ProductServiceCreate.vue
@@ -0,0 +1,493 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import ProductService from '@/services/ProductService';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import UnitService from '@/services/UnitService';
+  import VatProfileService from '@/services/VatProfileService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormSelect,
+    FormInputCode,
+    FormInputCurrency,
+    FormErrorMessages,
+    FormSwitch,
+    FormTextarea,
+    FormSelectSearch,
+    FormImagesField,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ProductImage } from '@/types/models/ProductImage';
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const productService = new ProductService();
+  const productCategoryService = new ProductCategoryService();
+  const unitService = new UnitService();
+  const vatProfileService = new VatProfileService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.product_service.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.product_service.field_groups.product_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const categoryDDL = ref<Array<DropDownOption> | null>(null);
+  const categorySearch = ref<string>('');
+  const categoryOptions = computed(() =>
+    (categoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const unitDDL = ref<Array<DropDownOption> | null>(null);
+  const unitSearch = ref<string>('');
+  const unitOptions = computed(() =>
+    (unitDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const vatProfileDDL = ref<Array<DropDownOption> | null>(null);
+  const vatProfileSearch = ref<string>('');
+  const vatProfileOptions = computed(() =>
+    (vatProfileDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const productServiceForm = productService.useProductServiceStoreForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    loadFromCache();
+    await Promise.all([getCategoryDDL(), getUnitDDL(), getVatProfileDDL(), getStatusDDL()]);
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setCompanyIdData = () => {
+    productServiceForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const getCategoryDDL = async (search = ''): Promise<void> => {
+    const result = await productCategoryService.readAnyGet({
+      with_trashed: false,
+
+      search: search,
+      company_id: selectedUserLocation.value.company.id,
+      type: 2,
+
+      refresh: false,
+      limit: 10,
+    });
+
+    if (result.success && result.data) {
+      categoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const getUnitDDL = async (search = ''): Promise<void> => {
+    const result = await unitService.readAnyGet({
+      with_trashed: false,
+
+      search: search,
+      company_id: selectedUserLocation.value.company.id,
+
+      refresh: false,
+      limit: 10,
+    });
+
+    if (result.success && result.data) {
+      unitDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const getVatProfileDDL = async (search = ''): Promise<void> => {
+    const result = await vatProfileService.readAnyGet({
+      with_trashed: false,
+      search: search,
+      company_id: selectedUserLocation.value.company.id,
+      include_id: productServiceForm.default_vat_profile_id ?? undefined,
+      refresh: false,
+      limit: 10,
+    });
+
+    if (result.success && result.data) {
+      vatProfileDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const getStatusDDL = async (): Promise<void> => {
+    const result = await dashboardServices.getStatusDDL(false);
+    if (result) {
+      statusDDL.value = result;
+    }
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('PRODUCT_SERVICE_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    productServiceForm.setData(data);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (productServiceForm.hasErrors) {
+      scrollToError(Object.keys(productServiceForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await productServiceForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-product-product-service-list' }); // Make sure this route exists or is created
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    productServiceForm.reset();
+    productServiceForm.setErrors({});
+  };
+
+  const setCode = () => {
+    productServiceForm.forgetError('code');
+    if (productServiceForm.code == '_AUTO_') {
+      productServiceForm.setData({ code: '' });
+    } else {
+      productServiceForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #region Watchers
+  watch(
+    productServiceForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('PRODUCT_SERVICE_CREATE', newValue.data());
+      if (productServiceForm.hasErrors) {
+      }
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="productServiceForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <!-- Card 1: Company Info -->
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="productServiceForm.company_id" />
+        </div>
+      </template>
+
+      <!-- Card 2: Product Data -->
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-2 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('code') }">
+                {{ t('views.product_service.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="productServiceForm.code"
+                :class="{ 'border-danger': productServiceForm.invalid('code') }"
+                :placeholder="t('views.product_service.fields.code')"
+                @set-auto="setCode"
+                @change="productServiceForm.validate('code')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel
+                :class="{
+                  'text-danger': productServiceForm.invalid('category_id'),
+                }"
+              >
+                {{ t('views.product_service.fields.category_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="productServiceForm.category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': productServiceForm.invalid('category_id'),
+                }"
+                @change="productServiceForm.validate('category_id')"
+                @search="getCategoryDDL"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.category_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('unit_id') }">
+                {{ t('views.product_service.fields.unit_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="productServiceForm.unit_id"
+                v-model:search="unitSearch"
+                :options="unitOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': productServiceForm.invalid('unit_id'),
+                }"
+                @change="productServiceForm.validate('unit_id')"
+                @search="getUnitDDL"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.unit_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-5">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('name') }">
+                {{ t('views.product_service.fields.name') }}
+              </FormLabel>
+              <FormInput
+                v-model="productServiceForm.name"
+                type="text"
+                :class="{ 'border-danger': productServiceForm.invalid('name') }"
+                :placeholder="t('views.product_service.fields.name')"
+                @change="productServiceForm.validate('name')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('default_vat_profile_id') }">
+                {{ t('views.product_service.fields.default_vat_profile_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="productServiceForm.default_vat_profile_id"
+                v-model:search="vatProfileSearch"
+                :options="vatProfileOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': productServiceForm.invalid('default_vat_profile_id'),
+                }"
+                @change="productServiceForm.validate('default_vat_profile_id')"
+                @search="getVatProfileDDL"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.default_vat_profile_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel
+                :class="{
+                  'text-danger': productServiceForm.invalid('is_price_include_vat'),
+                }"
+              >
+                {{ t('views.product_service.fields.is_price_include_vat') }}
+              </FormLabel>
+              <FormSwitch class="mt-2">
+                <FormSwitch.Input
+                  v-model="productServiceForm.is_price_include_vat"
+                  type="checkbox"
+                  :class="{
+                    'border-danger': productServiceForm.invalid('is_price_include_vat'),
+                  }"
+                  @change="productServiceForm.validate('is_price_include_vat')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="productServiceForm.errors.is_price_include_vat" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('price') }">
+                {{ t('views.product_service.fields.price') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="productServiceForm.price"
+                :class="{ 'border-danger': productServiceForm.invalid('price') }"
+                :placeholder="t('views.product_service.fields.price')"
+                @change="productServiceForm.validate('price')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.price" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('point') }">
+                {{ t('views.product_service.fields.point') }}
+              </FormLabel>
+              <FormInput
+                v-model="productServiceForm.point"
+                type="number"
+                :class="{ 'border-danger': productServiceForm.invalid('point') }"
+                :placeholder="t('views.product_service.fields.point')"
+                @change="productServiceForm.validate('point')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.point" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('status') }">
+                {{ t('views.product_service.fields.status') }}
+              </FormLabel>
+              <FormSelect
+                v-model="productServiceForm.status"
+                :class="{ 'border-danger': productServiceForm.invalid('status') }"
+                @change="productServiceForm.validate('status')"
+              >
+                <option value="">
+                  {{ t('components.dropdown.placeholder') }}
+                </option>
+                <option v-for="s in statusDDL" :key="s.code" :value="s.code">
+                  {{ t(s.name) }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="productServiceForm.errors.status" />
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-12">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('remarks') }">
+                {{ t('views.product_service.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="productServiceForm.remarks"
+                :class="{
+                  'border-danger': productServiceForm.invalid('remarks'),
+                }"
+                :placeholder="t('views.product_service.fields.remarks')"
+                @change="productServiceForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.remarks" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel>
+                {{ t('views.product.fields.images') }}
+              </FormLabel>
+              <FormImagesField entity="product" v-model="productServiceForm.image_hashes" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Buttons -->
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="productServiceForm.validating || productServiceForm.hasErrors"
+          >
+            <Lucide v-if="productServiceForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/product-service/ProductServiceEdit.vue b/web/src/pages/product-service/ProductServiceEdit.vue
new file mode 100644
index 000000000..0a68c8153
--- /dev/null
+++ b/web/src/pages/product-service/ProductServiceEdit.vue
@@ -0,0 +1,531 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import ProductService from '@/services/ProductService';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import UnitService from '@/services/UnitService';
+  import VatProfileService from '@/services/VatProfileService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormSelect,
+    FormInputCode,
+    FormInputCurrency,
+    FormErrorMessages,
+    FormSwitch,
+    FormTextarea,
+    FormSelectSearch,
+    FormImagesField,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRoute, useRouter } from 'vue-router';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ProductImage } from '@/types/models/ProductImage';
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const route = useRoute();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const productService = new ProductService();
+  const productCategoryService = new ProductCategoryService();
+  const unitService = new UnitService();
+  const vatProfileService = new VatProfileService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.product_service.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.product_service.field_groups.product_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const categoryDDL = ref<Array<DropDownOption> | null>(null);
+  const categorySearch = ref<string>('');
+  const categoryOptions = computed(() =>
+    (categoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const unitDDL = ref<Array<DropDownOption> | null>(null);
+  const unitSearch = ref<string>('');
+  const unitOptions = computed(() =>
+    (unitDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const vatProfileDDL = ref<Array<DropDownOption> | null>(null);
+  const vatProfileSearch = ref<string>('');
+  const vatProfileOptions = computed(() =>
+    (vatProfileDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const productServiceForm = productService.useProductServiceUpdateForm(route.params.ulid.toString());
+
+  const uploadedImages = ref<ProductImage[]>([]);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    await Promise.all([getCategoryDDL(), getUnitDDL(), getStatusDDL()]);
+    await loadData();
+    await getVatProfileDDL();
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async () => {
+    emits('loading-state', true);
+    const result = await productService.read(route.params.ulid.toString());
+    emits('loading-state', false);
+
+    if (result.success && result.data) {
+      productServiceForm.setData({
+        company_id: result.data.company.id,
+        code: result.data.code,
+        category_id: result.data.category.id,
+        name: result.data.name,
+        default_vat_profile_id: result.data.default_vat_profile?.id ?? null,
+        is_price_include_vat: result.data.is_price_include_vat,
+        remarks: result.data.remarks,
+        status: result.data.status,
+        unit_id: result.data.product_units[0].unit.id,
+        price: result.data.product_units[0].price,
+        point: result.data.product_units[0].point,
+        product_units: result.data.product_units,
+      } as any);
+
+      if (result.data.product_images) {
+        const images = result.data.product_images.map((img: any) => ({
+          id: img.id,
+          product_id: img.product_id,
+          path: img.path,
+          url: img.url,
+          hash: img.hash,
+          is_main: img.is_main,
+        }));
+
+        uploadedImages.value = images;
+        productServiceForm.image_hashes = images.map((img: any) => ({
+          hash: img.hash,
+          is_main: img.is_main,
+        }));
+      }
+    } else {
+      router.push({ name: 'side-menu-product-product-service-list' });
+    }
+  };
+
+  const getCategoryDDL = async (search = ''): Promise<void> => {
+    const result = await productCategoryService.readAnyGet({
+      with_trashed: false,
+
+      search: search,
+      company_id: selectedUserLocation.value.company.id,
+      type: 2,
+
+      refresh: false,
+      limit: 10,
+    });
+
+    if (result.success && result.data) {
+      categoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const getUnitDDL = async (search = ''): Promise<void> => {
+    const result = await unitService.readAnyGet({
+      with_trashed: false,
+
+      search: search,
+      company_id: selectedUserLocation.value.company.id,
+
+      refresh: false,
+      limit: 10,
+    });
+
+    if (result.success && result.data) {
+      unitDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const getVatProfileDDL = async (search = ''): Promise<void> => {
+    const result = await vatProfileService.readAnyGet({
+      with_trashed: false,
+      search: search,
+      company_id: selectedUserLocation.value.company.id,
+      include_id: productServiceForm.default_vat_profile_id ?? undefined,
+      refresh: false,
+      limit: 10,
+    });
+
+    if (result.success && result.data) {
+      vatProfileDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const getStatusDDL = async (): Promise<void> => {
+    const result = await dashboardServices.getStatusDDL(false);
+    if (result) {
+      statusDDL.value = result;
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (productServiceForm.hasErrors) {
+      scrollToError(Object.keys(productServiceForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await productServiceForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-product-product-service-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    productServiceForm.reset();
+    productServiceForm.setErrors({});
+    await loadData(); // Reload data on reset
+  };
+
+  const setCode = () => {
+    productServiceForm.forgetError('code');
+    if (productServiceForm.code == '_AUTO_') {
+      productServiceForm.setData({ code: '' });
+    } else {
+      productServiceForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    productServiceForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('PRODUCT_SERVICE_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="productServiceForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <!-- Card 1: Company Info -->
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="productServiceForm.company_id" />
+        </div>
+      </template>
+
+      <!-- Card 2: Product Data -->
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-2 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('code') }">
+                {{ t('views.product_service.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="productServiceForm.code"
+                :class="{ 'border-danger': productServiceForm.invalid('code') }"
+                :placeholder="t('views.product_service.fields.code')"
+                @set-auto="setCode"
+                @change="productServiceForm.validate('code')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel
+                :class="{
+                  'text-danger': productServiceForm.invalid('category_id'),
+                }"
+              >
+                {{ t('views.product_service.fields.category_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="productServiceForm.category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': productServiceForm.invalid('category_id'),
+                }"
+                @change="productServiceForm.validate('category_id')"
+                @search="getCategoryDDL"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.category_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('unit_id') }">
+                {{ t('views.product_service.fields.unit_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="productServiceForm.unit_id"
+                v-model:search="unitSearch"
+                :options="unitOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': productServiceForm.invalid('unit_id'),
+                }"
+                @change="productServiceForm.validate('unit_id')"
+                @search="getUnitDDL"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.unit_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-5">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('name') }">
+                {{ t('views.product_service.fields.name') }}
+              </FormLabel>
+              <FormInput
+                v-model="productServiceForm.name"
+                type="text"
+                :class="{ 'border-danger': productServiceForm.invalid('name') }"
+                :placeholder="t('views.product_service.fields.name')"
+                @change="productServiceForm.validate('name')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('default_vat_profile_id') }">
+                {{ t('views.product_service.fields.default_vat_profile_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="productServiceForm.default_vat_profile_id"
+                v-model:search="vatProfileSearch"
+                :options="vatProfileOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{
+                  'border-danger': productServiceForm.invalid('default_vat_profile_id'),
+                }"
+                @change="productServiceForm.validate('default_vat_profile_id')"
+                @search="getVatProfileDDL"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.default_vat_profile_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel
+                :class="{
+                  'text-danger': productServiceForm.invalid('is_price_include_vat'),
+                }"
+              >
+                {{ t('views.product_service.fields.is_price_include_vat') }}
+              </FormLabel>
+              <FormSwitch class="mt-2">
+                <FormSwitch.Input
+                  v-model="productServiceForm.is_price_include_vat"
+                  type="checkbox"
+                  :class="{
+                    'border-danger': productServiceForm.invalid('is_price_include_vat'),
+                  }"
+                  @change="productServiceForm.validate('is_price_include_vat')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="productServiceForm.errors.is_price_include_vat" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('price') }">
+                {{ t('views.product_service.fields.price') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="productServiceForm.price"
+                :class="{ 'border-danger': productServiceForm.invalid('price') }"
+                :placeholder="t('views.product_service.fields.price')"
+                @change="productServiceForm.validate('price')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.price" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('point') }">
+                {{ t('views.product_service.fields.point') }}
+              </FormLabel>
+              <FormInput
+                v-model="productServiceForm.point"
+                type="number"
+                :class="{ 'border-danger': productServiceForm.invalid('point') }"
+                :placeholder="t('views.product_service.fields.point')"
+                @change="productServiceForm.validate('point')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.point" />
+            </div>
+
+            <div class="col-span-12 md:col-span-2 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('status') }">
+                {{ t('views.product_service.fields.status') }}
+              </FormLabel>
+              <FormSelect
+                v-model="productServiceForm.status"
+                :class="{ 'border-danger': productServiceForm.invalid('status') }"
+                @change="productServiceForm.validate('status')"
+              >
+                <option value="">
+                  {{ t('components.dropdown.placeholder') }}
+                </option>
+                <option v-for="s in statusDDL" :key="s.code" :value="s.code">
+                  {{ t(s.name) }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="productServiceForm.errors.status" />
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-12">
+              <FormLabel :class="{ 'text-danger': productServiceForm.invalid('remarks') }">
+                {{ t('views.product_service.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="productServiceForm.remarks"
+                :class="{
+                  'border-danger': productServiceForm.invalid('remarks'),
+                }"
+                :placeholder="t('views.product_service.fields.remarks')"
+                @change="productServiceForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="productServiceForm.errors.remarks" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel>
+                {{ t('views.product.fields.images') }}
+              </FormLabel>
+              <FormImagesField
+                entity="product"
+                v-model="productServiceForm.image_hashes"
+                v-model:existing-images="uploadedImages"
+                v-model:delete-image-ids="productServiceForm.delete_image_ids"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Buttons -->
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="productServiceForm.validating || productServiceForm.hasErrors"
+          >
+            <Lucide v-if="productServiceForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/product-service/ProductServiceIndex.vue b/web/src/pages/product-service/ProductServiceIndex.vue
new file mode 100644
index 000000000..77b94d3a2
--- /dev/null
+++ b/web/src/pages/product-service/ProductServiceIndex.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.product_service.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const productServiceNotification = ref<NotificationElement>();
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[productServiceNotification]', (el: NotificationElement) => {
+    productServiceNotification.value = el;
+  });
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-product-product-service-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-product-product-service-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.product_service.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.product_service.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.product_service.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (productServiceNotification.value) productServiceNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('PRODUCT_SERVICE_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('PRODUCT_SERVICE_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="productServiceNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/product-service/ProductServiceList.vue b/web/src/pages/product-service/ProductServiceList.vue
new file mode 100644
index 000000000..eb2d54f58
--- /dev/null
+++ b/web/src/pages/product-service/ProductServiceList.vue
@@ -0,0 +1,651 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import ProductService from '@/services/ProductService';
+import { Product } from '@/types/models/Product';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ProductReadAnyPaginateRequest } from '@/types/services/product/ProductRequest';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { FormLabel, FormSelectSearch, FormSelect } from '@/components/Base/Form';
+import { DropDownOption } from '@/types/models/DropDownOption';
+import ProductCategoryService from '@/services/ProductCategoryService';
+import VatProfileService from '@/services/VatProfileService';
+import DashboardService from '@/services/DashboardService';
+import { formatCurrency } from '@/utils/helper';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const productServices = new ProductService();
+const productCategoryService = new ProductCategoryService();
+const vatProfileService = new VatProfileService();
+const dashboardServices = new DashboardService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+// #endregion
+
+interface ProductServiceListFilters {
+  search: string;
+  category_id: string | null;
+  default_vat_profile_id: string | null;
+  is_price_include_vat: string | null;
+  status: string | null;
+}
+
+// #region Refs
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const productLists = ref<Collection<Array<Product>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const filters = ref<ProductServiceListFilters>({
+  search: '',
+  category_id: null,
+  default_vat_profile_id: null,
+  is_price_include_vat: null,
+  status: null,
+});
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<DropDownOption> | null>(null);
+const vatProfileSearch = ref<string>('');
+const vatProfileOptions = computed(() =>
+  (vatProfileDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const statusDDL = ref<Array<DropDownOption> | null>(null);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const booleanOptions = computed<Array<DropDownOption>>(() => [
+  { code: 'true', name: t('components.dropdown.values.switch.on') },
+  { code: 'false', name: t('components.dropdown.values.switch.off') },
+]);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  filters.value.search = '';
+
+  await Promise.all([loadCategoryDDL(), loadVatProfileDDL(), loadStatusDDL()]);
+
+  await getProducts('', true, 1, 10);
+});
+// #endregion
+
+// #region Methods
+const getProducts = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  let company_id = selectedUserLocation.value.company.id;
+
+  const searchReq: ProductReadAnyPaginateRequest = {
+    with_trashed: false,
+
+    company_id: company_id,
+    search: search,
+    category_id: filters.value.category_id || undefined,
+    default_vat_profile_id: filters.value.default_vat_profile_id || undefined,
+    is_price_include_vat:
+      filters.value.is_price_include_vat === 'true'
+        ? true
+        : filters.value.is_price_include_vat === 'false'
+          ? false
+          : undefined,
+    type: 4,
+    status: filters.value.status || undefined,
+    include_id: undefined,
+
+    refresh: refresh,
+    page: page,
+    per_page: per_page,
+  };
+
+  let result: ServiceResponse<Collection<Array<Product>> | null> = await productServices.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    productLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  filters.value.search = data.search.text;
+  await getProducts(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const handleCategoryFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleIsPriceIncludeVatFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleDefaultVatProfileFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleStatusFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const clearCategoryFilter = () => {
+  filters.value.category_id = null;
+  categorySearch.value = '';
+};
+
+const clearDefaultVatProfileFilter = () => {
+  filters.value.default_vat_profile_id = null;
+  vatProfileSearch.value = '';
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await productCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    type: 2,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadVatProfileDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: filters.value.default_vat_profile_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadStatusDDL = async () => {
+  const result = await dashboardServices.getStatusDDL(false);
+  if (result) {
+    statusDDL.value = result;
+  }
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (idx: number) => {
+  if (!productLists.value) return;
+  let ulid = productLists.value.data[idx].ulid;
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({
+    name: 'side-menu-product-product-service-edit',
+    params: { ulid: ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!productLists.value) return;
+  let ulid = productLists.value.data[idx].ulid;
+  deleteUlid.value = ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  let result = await productServices.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    await getProducts(filters.value.search, true, 1, productLists.value?.meta.per_page || 10);
+    showNotification(t('views.product_service.alert.delete.title'), t('views.product_service.alert.delete.message'));
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  let n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  let ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+const getProductMainImageUrl = (item: Product): string | null => {
+  if (!item.product_images || item.product_images.length === 0) return null;
+
+  const mainImage = item.product_images.find((img) => img.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  const first = item.product_images[0];
+  return first?.url ?? null;
+};
+// #endregion
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.product_service.fields.category_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="filters.category_id" v-model:search="categorySearch"
+                :options="categoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleCategoryFilterChange" @search="loadCategoryDDL" @clear="clearCategoryFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.product_service.fields.default_vat_profile_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="filters.default_vat_profile_id" v-model:search="vatProfileSearch"
+                :options="vatProfileOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleDefaultVatProfileFilterChange" @search="loadVatProfileDDL"
+                @clear="clearDefaultVatProfileFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.product_service.fields.status') }}
+          </FormLabel>
+          <FormSelect v-model="filters.status" @change="handleStatusFilterChange">
+            <option value="">{{ t('components.dropdown.placeholder') }}</option>
+            <option v-for="item in statusDDL ?? []" :key="item.code" :value="item.code">{{ t(item.name) }}</option>
+          </FormSelect>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.product_service.fields.is_price_include_vat') }}
+          </FormLabel>
+          <FormSelect v-model="filters.is_price_include_vat" @change="handleIsPriceIncludeVatFilterChange">
+            <option value="">{{ t('components.dropdown.placeholder') }}</option>
+            <option v-for="item in booleanOptions" :key="item.code" :value="item.code">{{ item.name }}</option>
+          </FormSelect>
+        </div>
+      </div>
+
+      <DataList :title="t('views.product_service.table.title')" :data="productLists" :enable-search="true"
+        :can-print="true" :can-export="true" :pagination="productLists ? productLists.meta : null"
+        @dataListChanged="handleDataListChange">
+        <template #content>
+          <Table class="mt-5" :hover="true">
+            <Table.Thead variant="light">
+              <Table.Tr>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.table.cols.image') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.detail.info_title') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.table.cols.name') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap text-right">
+                  {{ t('views.product.table.cols.unit') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.table.cols.price') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap"></Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody v-if="productLists !== null">
+              <template v-if="productLists.data.length === 0">
+                <Table.Tr class="intro-x">
+                  <Table.Td colspan="7">
+                    <div class="flex justify-center italic">
+                      {{ t('components.data-list.data_not_found') }}
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+              </template>
+              <template v-for="(item, itemIdx) in productLists.data" :key="item.ulid">
+                <Table.Tr class="intro-x">
+                  <Table.Td>
+                    <ProductImagePreview :image-url="getProductMainImageUrl(item)" />
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="font-medium whitespace-nowrap">
+                      {{ item.code }}
+                    </div>
+                    <div class="mt-0.5 flex items-center flex-wrap">
+                      <span class="font-medium">{{ item.category.name }}</span>
+                    </div>
+                    <div class="mt-1">
+                      <div v-if="item.status == 'ACTIVE'" class="flex items-center text-success text-xs">
+                        <Lucide icon="CheckCircle" class="w-3 h-3 mr-1" />
+                        {{ t('views.product_service.status.active') }}
+                      </div>
+                      <div v-else class="flex items-center text-danger text-xs">
+                        <Lucide icon="X" class="w-3 h-3 mr-1" />
+                        {{ t('views.product_service.status.inactive') }}
+                      </div>
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="font-medium">
+                      {{ item.name }}
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="flex flex-col gap-0">
+                      <div v-for="unit in item.product_units" :key="unit.ulid"
+                        class="h-6 flex items-center whitespace-nowrap">
+                        {{
+                          unit.unit.name
+                        }}{{
+                          unit.conversion_value > 1
+                            ? ': ' + formatCurrency(unit.conversion_value) + ' ' + item.product_units[0].unit.name
+                            : ''
+                        }}
+                      </div>
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="flex flex-col gap-0 items-end">
+                      <div v-for="unit in item.product_units" :key="unit.ulid"
+                        class="h-6 flex items-center whitespace-nowrap">
+                        {{ formatCurrency(unit.price) }}
+                      </div>
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="flex justify-end gap-1">
+                      <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                        <Lucide icon="Info" class="w-4 h-4" />
+                      </Button>
+                      <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                        <Lucide icon="Pen" class="w-4 h-4" />
+                      </Button>
+                      <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+                <Table.Tr :class="{
+                  'intro-x': true,
+                  'hidden transition-all': expandDetail !== itemIdx,
+                }">
+                  <Table.Td colspan="5" class="p-5">
+                    <div class="grid grid-cols-12 gap-6">
+                      <div class="col-span-12 lg:col-span-6">
+                        <div class="font-medium text-base mb-3 border-b pb-2">
+                          {{ t('views.product.detail.info_title') }}
+                        </div>
+                        <div class="grid grid-cols-1 gap-y-2">
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.code') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.code }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.category_id') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.category.name }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.name') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.name }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.status') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.status == 'ACTIVE'
+                                  ? t('views.product_service.status.active')
+                                  : t('views.product_service.status.inactive')
+                              }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.remarks') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.remarks || '-' }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="col-span-12 lg:col-span-6">
+                        <div class="font-medium text-base mb-3 border-b pb-2">
+                          {{ t('views.product.detail.settings_title') }}
+                        </div>
+                        <div class="grid grid-cols-1 gap-y-2">
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.default_vat_profile_id') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.default_vat_profile?.name || '-' }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.is_price_include_vat') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.is_price_include_vat
+                                  ? t('components.dropdown.values.switch.on')
+                                  : t('components.dropdown.values.switch.off')
+                              }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.unit_id') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.product_units && item.product_units.length > 0
+                                  ? item.product_units[0].unit.name
+                                  : '-'
+                              }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.price') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.product_units && item.product_units.length > 0
+                                  ? formatCurrency(item.product_units[0].price)
+                                  : '-'
+                              }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product_service.fields.point') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.product_units && item.product_units.length > 0
+                                  ? item.product_units[0].point
+                                  : '-'
+                              }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+              </template>
+            </Table.Tbody>
+          </Table>
+        </template>
+      </DataList>
+    </div>
+  </div>
+  <Dialog :open="deleteModalShow" @close="
+    () => {
+      deleteModalShow = false;
+    }
+  ">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">
+          {{ t('components.delete-modal.title') }}
+        </div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" @click="
+          () => {
+            deleteModalShow = false;
+          }
+        " class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/product/ProductCreate.vue b/web/src/pages/product/ProductCreate.vue
new file mode 100644
index 000000000..222e64f35
--- /dev/null
+++ b/web/src/pages/product/ProductCreate.vue
@@ -0,0 +1,904 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref, watch, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ProductService from '@/services/ProductService';
+import ProductCategoryService from '@/services/ProductCategoryService';
+import BrandService from '@/services/BrandService';
+import UnitService from '@/services/UnitService';
+import VatProfileService from '@/services/VatProfileService';
+import DashboardService from '@/services/DashboardService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import {
+  FormCheck,
+  FormInput,
+  FormLabel,
+  FormSelect,
+  FormInputCode,
+  FormInputCurrency,
+  FormErrorMessages,
+  FormSwitch,
+  FormTextarea,
+  FormSelectSearch,
+  FormImagesField,
+} from '@/components/Base/Form';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { debounce } from 'lodash';
+import Lucide from '@/components/Base/Lucide';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { useRouter } from 'vue-router';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { DropDownOption } from '@/types/models/DropDownOption';
+import { formatCurrency } from '@/utils/helper';
+import { AxiosError, isAxiosError } from 'axios';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const productService = new ProductService();
+const productCategoryService = new ProductCategoryService();
+const brandService = new BrandService();
+const unitService = new UnitService();
+const vatProfileService = new VatProfileService();
+const dashboardServices = new DashboardService();
+const cacheServices = new CacheService();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Refs
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.product.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.product.field_groups.product_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.product.field_groups.unit_settings',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.product.fields.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const brandDDL = ref<Array<DropDownOption> | null>(null);
+const brandSearch = ref<string>('');
+const brandOptions = computed(() =>
+  (brandDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<DropDownOption> | null>(null);
+const vatProfileSearch = ref<string>('');
+const vatProfileOptions = computed(() =>
+  (vatProfileDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const unitDDL = ref<Record<number, Array<DropDownOption>>>({});
+const unitSearch = ref<string[]>([]);
+const getUnitOptions = (index: number) =>
+  (unitDDL.value[index] ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  }));
+
+const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+const productForm = productService.useProductPhysicalStoreForm();
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+  }
+
+  loadFromCache();
+
+  if (productForm.product_units.length === 0) {
+    productForm.product_units.push({
+      code: '_AUTO_',
+      is_manufacturer_sku: false,
+      unit_id: '',
+      unit_name: '',
+      price: 0,
+      is_base: true,
+      conversion_value: 1,
+      is_primary_unit: true,
+      point: 0,
+      remarks: '',
+    });
+  }
+
+  await Promise.all([getCategoryDDL(), getBrandDDL(), getVatProfileDDL(), getStatusDDL()]);
+
+  if (productForm.product_units.length > 0) {
+    await getUnitDDL(0, '');
+  }
+
+  setCompanyIdData();
+});
+// #endregion
+
+// #region Methods
+const setCompanyIdData = () => {
+  productForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const getCategoryDDL = async (search = ''): Promise<void> => {
+  const result = await productCategoryService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    type: 1, // Product Type
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const getBrandDDL = async (search = ''): Promise<void> => {
+  const result = await brandService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    brandDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const getUnitDDL = async (index: number, search = ''): Promise<void> => {
+  const result = await unitService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    const options: Array<DropDownOption> = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+
+    const currentUnit = productForm.product_units[index];
+    if (currentUnit?.unit_id && !options.some((opt) => opt.code === currentUnit.unit_id)) {
+      options.push({
+        code: currentUnit.unit_id,
+        name: currentUnit.unit_name || '',
+      });
+    }
+
+    unitDDL.value[index] = options;
+
+    if (currentUnit?.unit_id && !currentUnit.unit_name) {
+      const match = options.find((opt) => opt.code === currentUnit.unit_id);
+      if (match) currentUnit.unit_name = match.name;
+    }
+  } else {
+    unitDDL.value[index] = [];
+  }
+};
+
+const getVatProfileDDL = async (search = ''): Promise<void> => {
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    include_id: productForm.default_vat_profile_id ?? undefined,
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const getStatusDDL = async (): Promise<void> => {
+  const result = await dashboardServices.getStatusDDL(false);
+  if (result) {
+    statusDDL.value = result;
+  }
+};
+
+const loadFromCache = () => {
+  let data = cacheServices.getLastEntity('PRODUCT_CREATE') as Record<string, unknown>;
+  if (!data) return;
+  if (!data.code) data.code = '_AUTO_';
+  productForm.setData(data);
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  let el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (productForm.hasErrors) {
+    scrollToError(Object.keys(productForm.errors)[0]);
+  }
+  emits('loading-state', true);
+  await productForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-product-product-list' });
+    })
+    .catch((error) => {
+      const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+      showAlertPlaceholder('danger', '', errorList);
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  productForm.reset();
+  productForm.setErrors({});
+  // Re-initialize unit
+  productForm.setData({
+    product_units: [
+      {
+        code: '_AUTO_',
+        is_manufacturer_sku: false,
+        unit_id: '',
+        unit_name: '',
+        price: 0,
+        is_base: true,
+        conversion_value: 1,
+        is_primary_unit: true,
+        point: 0,
+        remarks: '',
+      },
+    ],
+  });
+};
+
+const setCode = () => {
+  productForm.forgetError('code');
+  if (productForm.code == '_AUTO_') {
+    productForm.setData({ code: '' });
+  } else {
+    productForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const setUnitCode = (index: number) => {
+  if (productForm.product_units[index].code == '_AUTO_') {
+    productForm.product_units[index].code = '';
+  } else {
+    productForm.product_units[index].code = '_AUTO_';
+  }
+};
+
+const setPrimaryUnit = (index: number) => {
+  productForm.product_units.forEach((u: any, i: number) => {
+    u.is_primary_unit = i === index;
+  });
+  productForm.validate('product_units.is_primary_unit' as any);
+};
+
+const addUnit = () => {
+  productForm.product_units.push({
+    code: '_AUTO_',
+    is_manufacturer_sku: false,
+    unit_id: '',
+    unit_name: '',
+    price: 0,
+    is_base: false,
+    conversion_value: '',
+    is_primary_unit: false,
+    point: 0,
+    remarks: '',
+  } as any);
+
+  Object.keys(productForm.errors).forEach((key) => {
+    if (key.startsWith('product_units.')) {
+      productForm.forgetError(key as any);
+    }
+  });
+};
+
+const updateUnitName = (index: number, newUnitId?: string) => {
+  const unitId = newUnitId ?? productForm.product_units[index].unit_id;
+  if (!unitId) {
+    productForm.product_units[index].unit_name = '';
+    return;
+  }
+
+  const options = unitDDL.value[index] ?? [];
+  const unit = options.find((u) => u.code === unitId);
+
+  if (unit) {
+    productForm.product_units[index].unit_name = unit.name;
+    productForm.forgetError(`product_units.${index}.unit_id` as any);
+  }
+};
+
+const clearUnit = (index: number) => {
+  productForm.product_units[index].unit_id = '';
+  productForm.product_units[index].unit_name = '';
+  productForm.forgetError(`product_units.${index}.unit_id` as any);
+};
+
+const removeUnit = (index: number) => {
+  const isPrimary = productForm.product_units[index].is_primary_unit;
+  productForm.product_units.splice(index, 1);
+
+  // If the removed unit was the primary unit, set the first unit (Base Unit) as primary
+  if (isPrimary && productForm.product_units.length > 0) {
+    productForm.product_units[0].is_primary_unit = true;
+  }
+
+  // Clear errors related to product_units to prevent stale "duplicate" errors
+  // because 'distinct' validation depends on the array content
+  Object.keys(productForm.errors).forEach((key) => {
+    if (key.startsWith('product_units.')) {
+      productForm.forgetError(key as any);
+    }
+  });
+};
+
+watch(
+  () => productForm.errors,
+  () => {},
+  { deep: true },
+);
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  let ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const convertErrorTypeToAlertListType = (error: unknown) => {
+  const record: Record<string, Array<string>> = {};
+
+  const anyError = error as any;
+  const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+  if (response && response.data) {
+    const data = response.data as any;
+
+    if (data.errors && typeof data.errors === 'object') {
+      for (const key of Object.keys(data.errors)) {
+        const value = data.errors[key];
+
+        if (Array.isArray(value)) {
+          record[key] = value;
+        } else if (value !== undefined && value !== null) {
+          record[key] = [String(value)];
+        }
+      }
+
+      return record;
+    }
+
+    if (data.message) {
+      record.error = [String(data.message)];
+      return record;
+    }
+  }
+
+  if (error instanceof Error && error.message) {
+    record.error = [error.message];
+  } else {
+    record.error = ['Unknown error'];
+  }
+
+  return record;
+};
+// #endregion
+
+// #region Watchers
+watch(
+  productForm,
+  debounce(() => {
+    cacheServices.setLastEntity('PRODUCT_CREATE', productForm.data());
+  }, 500),
+  { deep: true },
+);
+// #endregion
+</script>
+
+<template>
+  <form id="productForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <!-- Card 1: Company Info -->
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="productForm.company_id" />
+        </div>
+      </template>
+
+      <!-- Card 2: Product Data (Header Fields: L33-46) -->
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <!-- Column 1: Code -->
+            <div class="col-span-12 md:col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('code') }">
+                {{ t('views.product.fields.code') }}
+              </FormLabel>
+              <FormInputCode v-model="productForm.code" :class="{ 'border-danger': productForm.invalid('code') }"
+                :placeholder="t('views.product.fields.code')" @set-auto="setCode"
+                @change="productForm.validate('code')" />
+              <FormErrorMessages :messages="productForm.errors.code" />
+            </div>
+
+            <!-- Column 2: Category -->
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('category_id') }">
+                {{ t('views.product.fields.category_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="productForm.category_id" v-model:search="categorySearch"
+                :options="categoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': productForm.invalid('category_id') }"
+                @change="productForm.validate('category_id')" @search="getCategoryDDL" />
+              <FormErrorMessages :messages="productForm.errors.category_id" />
+            </div>
+
+            <!-- Column 3: Brand -->
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('brand_id') }">
+                {{ t('views.product.fields.brand_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="productForm.brand_id" v-model:search="brandSearch" :options="brandOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': productForm.invalid('brand_id') }" @change="productForm.validate('brand_id')"
+                @search="getBrandDDL" />
+              <FormErrorMessages :messages="productForm.errors.brand_id" />
+            </div>
+
+            <!-- Column 4: Name -->
+            <div class="col-span-12 md:col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('name') }">
+                {{ t('views.product.fields.name') }}
+              </FormLabel>
+              <FormInput v-model="productForm.name" type="text"
+                :class="{ 'border-danger': productForm.invalid('name') }" :placeholder="t('views.product.fields.name')"
+                @change="productForm.validate('name')" />
+              <FormErrorMessages :messages="productForm.errors.name" />
+            </div>
+
+            <!-- Column 5: Default VAT Profile -->
+            <div class="col-span-12 md:col-span-8 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('default_vat_profile_id') }">
+                {{ t('views.product.fields.default_vat_profile_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="productForm.default_vat_profile_id" v-model:search="vatProfileSearch"
+                :options="vatProfileOptions" :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': productForm.invalid('default_vat_profile_id') }"
+                @change="productForm.validate('default_vat_profile_id')" @search="getVatProfileDDL" />
+              <FormErrorMessages :messages="productForm.errors.default_vat_profile_id" />
+            </div>
+
+            <!-- Column 6: Is Price Include VAT Profile -->
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{
+                'text-danger': productForm.invalid('is_price_include_vat'),
+              }">
+                {{ t('views.product.fields.is_price_include_vat') }}
+              </FormLabel>
+              <FormSwitch class="mt-2">
+                <FormSwitch.Input v-model="productForm.is_price_include_vat" type="checkbox" :class="{
+                  'border-danger': productForm.invalid('is_price_include_vat'),
+                }" @change="productForm.validate('is_price_include_vat')" />
+              </FormSwitch>
+              <FormErrorMessages :messages="productForm.errors.is_price_include_vat" />
+            </div>
+
+            <!-- Column 8: Is Use Serial Number -->
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{
+                'text-danger': productForm.invalid('is_use_serial_number'),
+              }">
+                {{ t('views.product.fields.is_use_serial_number') }}
+              </FormLabel>
+              <FormSwitch class="mt-2">
+                <FormSwitch.Input v-model="productForm.is_use_serial_number" type="checkbox" :class="{
+                  'border-danger': productForm.invalid('is_use_serial_number'),
+                }" @change="productForm.validate('is_use_serial_number')" />
+              </FormSwitch>
+              <FormErrorMessages :messages="productForm.errors.is_use_serial_number" />
+            </div>
+
+            <!-- Column 9: Is Expirable -->
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('is_expirable') }">
+                {{ t('views.product.fields.is_expirable') }}
+              </FormLabel>
+              <FormSwitch class="mt-2">
+                <FormSwitch.Input v-model="productForm.is_expirable" type="checkbox" :class="{
+                  'border-danger': productForm.invalid('is_expirable'),
+                }" @change="productForm.validate('is_expirable')" />
+              </FormSwitch>
+              <FormErrorMessages :messages="productForm.errors.is_expirable" />
+            </div>
+
+            <!-- Column 11: Status -->
+            <div class="col-span-12 md:col-span-4 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('status') }">
+                {{ t('views.product.fields.status') }}
+              </FormLabel>
+              <FormSelect v-model="productForm.status" :class="{ 'border-danger': productForm.invalid('status') }"
+                @change="productForm.validate('status')">
+                <option value="">
+                  {{ t('components.dropdown.placeholder') }}
+                </option>
+                <option v-for="s in statusDDL" :key="s.code" :value="s.code">
+                  {{ t(s.name) }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="productForm.errors.status" />
+            </div>
+
+            <!-- Column 10: Remarks -->
+            <div class="col-span-12 md:col-span-12 lg:col-span-12">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('remarks') }">
+                {{ t('views.product.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea v-model="productForm.remarks" :class="{ 'border-danger': productForm.invalid('remarks') }"
+                :placeholder="t('views.product.fields.remarks')" @change="productForm.validate('remarks')" />
+              <FormErrorMessages :messages="productForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Card 3: Product Unit Settings (Unit Fields: L48-56) -->
+      <template #card-items-2>
+        <div class="p-5">
+          <!-- No Product Unit Found -->
+          <div v-if="productForm.product_units.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <!-- Product Unit List -->
+          <div v-else class="space-y-5">
+            <div v-for="(unit, index) in productForm.product_units" :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4">
+              <!-- title -->
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{
+                    index === 0
+                      ? t('views.product.fields.base_unit')
+                      : t('views.product.fields.other_unit') + ' #' + index
+                  }}
+                </div>
+                <Button v-if="index > 0" type="button" variant="outline-secondary" @click="removeUnit(index)">
+                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                </Button>
+              </div>
+
+              <!-- Columns Unit Code, Unit Name, Conversion Value, Price, Point, Is Primary Unit -->
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <!-- Column 1: Unit Code + Is Manufacturer SKU -->
+                <div class="col-span-12 lg:col-span-4">
+                  <div class="grid grid-cols-12 items-center gap-4">
+                    <div class="col-span-7">
+                      <FormLabel :class="{
+                        'text-danger': productForm.invalid(`product_units.${index}.code` as any),
+                      }">
+                        {{ t('views.product.fields.unit_code') }}
+                      </FormLabel>
+                    </div>
+                    <div class="col-span-5">
+                      <FormLabel :class="{
+                        'text-danger': productForm.invalid(`product_units.${index}.is_manufacturer_sku` as any),
+                      }">
+                        {{ t('views.product.fields.is_manufacturer_sku') }}
+                      </FormLabel>
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 items-center gap-4 mt-1">
+                    <!-- Unit Code Input -->
+                    <div class="col-span-7">
+                      <FormInputCode v-model="productForm.product_units[index].code" :class="{
+                        'border-danger': productForm.invalid(`product_units.${index}.code` as any),
+                      }" :placeholder="t('views.product.fields.unit_code')" @set-auto="setUnitCode(index)"
+                        @change="productForm.validate(`product_units.${index}.code` as any)" />
+                      <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.code`]" />
+                    </div>
+                    <!-- Is Manufacturer SKU Switch -->
+                    <div class="col-span-5">
+                      <div class="flex items-center">
+                        <FormSwitch>
+                          <FormSwitch.Input v-model="productForm.product_units[index].is_manufacturer_sku"
+                            type="checkbox" :class="{
+                              'border-danger': productForm.invalid(
+                                `product_units.${index}.is_manufacturer_sku` as any,
+                              ),
+                            }" @change="productForm.validate(`product_units.${index}.is_manufacturer_sku` as any)" />
+                        </FormSwitch>
+                      </div>
+                    </div>
+                  </div>
+                  <FormErrorMessages
+                    :messages="(productForm.errors as any)[`product_units.${index}.is_manufacturer_sku`]" />
+                </div>
+
+                <!-- Column 2: Unit Name (Base Unit) -->
+                <div class="col-span-12 lg:col-span-3" v-if="index === 0">
+                  <!-- Unit Name Input -->
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.unit_id` as any),
+                  }">
+                    {{ t('views.product.fields.unit_id') }}
+                  </FormLabel>
+                  <!-- Unit Name Dropdown -->
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <FormSelectSearch v-model="productForm.product_units[index].unit_id"
+                        v-model:search="unitSearch[index]" :options="getUnitOptions(index)"
+                        :placeholder="t('components.dropdown.placeholder')" :class="{
+                          'border-danger': productForm.invalid(`product_units.${index}.unit_id` as any),
+                        }" @change="
+                          () => {
+                            updateUnitName(index);
+                            productForm.validate(`product_units.${index}.unit_id` as any);
+                          }
+                        " @search="(q) => getUnitDDL(index, q)" @clear="clearUnit(index)" />
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.unit_id`]" />
+                </div>
+
+                <!-- Column 2: Unit Name (Other Units) -->
+                <div class="col-span-12 lg:col-span-2" v-else>
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.unit_id` as any),
+                  }">
+                    {{ t('views.product.fields.unit_id') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <FormSelectSearch v-model="productForm.product_units[index].unit_id"
+                        v-model:search="unitSearch[index]" :options="getUnitOptions(index)"
+                        :placeholder="t('components.dropdown.placeholder')" :class="{
+                          'border-danger': productForm.invalid(`product_units.${index}.unit_id` as any),
+                        }" @change="
+                          () => {
+                            updateUnitName(index);
+                            productForm.validate(`product_units.${index}.unit_id` as any);
+                          }
+                        " @search="(q) => getUnitDDL(index, q)" @clear="clearUnit(index)" />
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.unit_id`]" />
+                </div>
+
+                <!-- Column 3: Conversion Value -->
+                <div class="col-span-12 lg:col-span-1" v-if="index > 0">
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.conversion_value` as any),
+                  }">
+                    {{ t('views.product.fields.conversion_value') }}
+                  </FormLabel>
+                  <FormErrorMessages :messages="(productForm.errors as any)['product_units.is_primary_unit']" />
+                  <FormInputCurrency v-model="productForm.product_units[index].conversion_value" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.conversion_value` as any),
+                  }" :placeholder="t('views.product.fields.conversion_value')"
+                    @change="productForm.validate(`product_units.${index}.conversion_value` as any)" />
+                  <!-- base unit name -->
+                  <div class="flex justify-end">
+                    <FormLabel class="text-xs font-bold mt-1 text-slate-500 text-right">
+                      {{ productForm.product_units[0].unit_name }}
+                    </FormLabel>
+                  </div>
+                  <FormErrorMessages
+                    :messages="(productForm.errors as any)[`product_units.${index}.conversion_value`]" />
+                </div>
+
+                <!-- Column 4: Price (Base Unit) -->
+                <div class="col-span-12 lg:col-span-2" v-else>
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.price` as any),
+                  }">
+                    {{ t('views.product.fields.base_unit_price') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="productForm.product_units[index].price" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.price` as any),
+                  }" :placeholder="t('views.product.fields.base_unit_price')"
+                    @change="productForm.validate(`product_units.${index}.price` as any)" />
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.price`]" />
+                </div>
+
+                <!-- Column 4: Price (Other-->
+                <div class="col-span-12 lg:col-span-2" v-if="index > 0">
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.price` as any),
+                  }">
+                    {{ t('views.product.fields.price') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="productForm.product_units[index].price" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.price` as any),
+                  }" :placeholder="t('views.product.fields.price')"
+                    @change="productForm.validate(`product_units.${index}.price` as any)" />
+                  <div v-if="
+                    !productForm.product_units[index].is_base &&
+                    productForm.product_units[index].conversion_value > 0 &&
+                    productForm.product_units[index].price > 0
+                  " class="text-xs text-slate-500 mt-1 text-right">
+                    {{ t('views.product.fields.base_unit_price') }}:
+                    {{
+                      formatCurrency(
+                        (
+                          productForm.product_units[index].price / productForm.product_units[index].conversion_value
+                        ).toFixed(2),
+                      )
+                    }}
+                  </div>
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.price`]" />
+                </div>
+
+                <!-- Column 6: Point (Base Unit) -->
+                <div class="col-span-12 lg:col-span-1" v-if="index === 0">
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.point` as any),
+                  }">
+                    {{ t('views.product.fields.point') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="productForm.product_units[index].point" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.point` as any),
+                  }" :placeholder="t('views.product.fields.point')"
+                    @change="productForm.validate(`product_units.${index}.point` as any)" />
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.point`]" />
+                </div>
+
+                <!-- Column 6: Point (Other Units) -->
+                <div class="col-span-12 sm:col-span-1" v-if="index > 0">
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.point` as any),
+                  }">
+                    {{ t('views.product.fields.point') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="productForm.product_units[index].point" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.point` as any),
+                  }" :placeholder="t('views.product.fields.point')"
+                    @change="productForm.validate(`product_units.${index}.point` as any)" />
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.point`]" />
+                </div>
+
+                <!-- Column 7: Is Primary Unit -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormCheck class="mt-9">
+                    <FormCheck.Input type="radio" name="primary_unit" class="mr-2 border-slate-300" :class="{
+                      'border-danger': (productForm.errors as any)['product_units.is_primary_unit'],
+                    }" :checked="productForm.product_units[index].is_primary_unit" @change="setPrimaryUnit(index)" />
+                    <FormCheck.Label class="text-sm" :class="{
+                      'text-danger': (productForm.errors as any)['product_units.is_primary_unit'],
+                      '': !(productForm.errors as any)['product_units.is_primary_unit'],
+                    }">
+                      {{ t('views.product.fields.is_primary_unit') }}
+                    </FormCheck.Label>
+                  </FormCheck>
+                  <FormErrorMessages :messages="(productForm.errors as any)['product_units.is_primary_unit']" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Add Product Unit Button -->
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addUnit">
+              <Lucide icon="Plus" class="w-4 h-4 mr-2" />
+              {{ t('views.product.actions.add_unit') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <!-- Card 4: Product Images -->
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.product.fields.images') }}
+          </FormLabel>
+          <FormImagesField entity="product" v-model="productForm.image_hashes" />
+        </div>
+      </template>
+
+      <!-- Buttons -->
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
+            :disabled="productForm.validating || productForm.hasErrors">
+            <Lucide v-if="productForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/product/ProductEdit.vue b/web/src/pages/product/ProductEdit.vue
new file mode 100644
index 000000000..ab820d73d
--- /dev/null
+++ b/web/src/pages/product/ProductEdit.vue
@@ -0,0 +1,893 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref, watch, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ProductService from '@/services/ProductService';
+import ProductCategoryService from '@/services/ProductCategoryService';
+import BrandService from '@/services/BrandService';
+import UnitService from '@/services/UnitService';
+import VatProfileService from '@/services/VatProfileService';
+import DashboardService from '@/services/DashboardService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import {
+  FormCheck,
+  FormInput,
+  FormLabel,
+  FormSelect,
+  FormInputCode,
+  FormInputCurrency,
+  FormErrorMessages,
+  FormSwitch,
+  FormTextarea,
+  FormSelectSearch,
+  FormImagesField,
+} from '@/components/Base/Form';
+import { ProductImage } from '@/types/models/ProductImage';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { debounce } from 'lodash';
+import Lucide from '@/components/Base/Lucide';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { useRoute, useRouter } from 'vue-router';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { DropDownOption } from '@/types/models/DropDownOption';
+import { formatCurrency, convertErrorTypeToAlertListType } from '@/utils/helper';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const productService = new ProductService();
+const productCategoryService = new ProductCategoryService();
+const brandService = new BrandService();
+const unitService = new UnitService();
+const vatProfileService = new VatProfileService();
+const dashboardServices = new DashboardService();
+const cacheServices = new CacheService();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Refs
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.product.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.product.field_groups.product_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.product.field_groups.unit_settings',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.product.fields.images',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const brandDDL = ref<Array<DropDownOption> | null>(null);
+const brandSearch = ref<string>('');
+const brandOptions = computed(() =>
+  (brandDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<DropDownOption> | null>(null);
+const vatProfileSearch = ref<string>('');
+const vatProfileOptions = computed(() =>
+  (vatProfileDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const unitDDL = ref<Record<number, Array<DropDownOption>>>({});
+const unitSearch = ref<string[]>([]);
+const getUnitOptions = (index: number) =>
+  (unitDDL.value[index] ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  }));
+
+const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+const productForm = productService.useProductPhysicalUpdateForm(route.params.ulid.toString());
+
+const uploadedImages = ref<ProductImage[]>([]);
+
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+  }
+
+  await Promise.all([getCategoryDDL(), getBrandDDL(), getStatusDDL()]);
+  await loadData();
+
+  await Promise.all(
+    [...productForm.product_units.map((_, index) => getUnitDDL(index, '')), getVatProfileDDL()],
+  );
+});
+// #endregion
+
+// #region Methods
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await productService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    productForm.setData({
+      company_id: result.data.company?.id ?? '',
+      code: result.data.code,
+      category_id: result.data.category?.id ?? '',
+      brand_id: result.data.brand?.id ?? '',
+      name: result.data.name,
+      default_vat_profile_id: result.data.default_vat_profile?.id ?? null,
+      is_price_include_vat: result.data.is_price_include_vat,
+      is_use_serial_number: result.data.is_use_serial_number,
+      is_expirable: result.data.is_expirable,
+      remarks: result.data.remarks,
+      status: result.data.status,
+      product_units: result.data.product_units.map((u: any) => ({
+        id: u.id,
+        code: u.code,
+        is_manufacturer_sku: false,
+        unit_id: u.unit?.id ?? '',
+        unit_name: u.unit?.name ?? '',
+        price: u.price,
+        is_base: u.is_base,
+        conversion_value: u.conversion_value,
+        is_primary_unit: u.is_primary_unit,
+        point: u.point,
+        remarks: u.remarks,
+      })),
+    } as any);
+
+    if (result.data.product_images) {
+      const images = result.data.product_images.map((img: any) => ({
+        id: img.id,
+        product_id: img.product_id,
+        path: img.path,
+        url: img.url,
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+
+      uploadedImages.value = images;
+      productForm.image_hashes = images.map((img: any) => ({
+        hash: img.hash,
+        is_main: img.is_main,
+      }));
+    }
+
+    // Ensure at least one unit exists for the form to render correctly
+    if (productForm.product_units.length === 0) {
+      productForm.product_units.push({
+        code: '_AUTO_',
+        is_manufacturer_sku: false,
+        unit_id: '',
+        unit_name: '',
+        price: 0,
+        is_base: true,
+        conversion_value: 1,
+        is_primary_unit: true,
+        point: 0,
+        remarks: '',
+      });
+    }
+  } else {
+    router.push({ name: 'side-menu-product-product-list' });
+  }
+};
+
+const getCategoryDDL = async (search = ''): Promise<void> => {
+  const result = await productCategoryService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    type: 1, // Product Type
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const getBrandDDL = async (search = ''): Promise<void> => {
+  const result = await brandService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    brandDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const getUnitDDL = async (index: number, search = ''): Promise<void> => {
+  const result = await unitService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    const options: Array<DropDownOption> = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+
+    const currentUnit = productForm.product_units[index];
+    if (currentUnit?.unit_id && !options.some((opt) => opt.code === currentUnit.unit_id)) {
+      options.push({
+        code: currentUnit.unit_id,
+        name: currentUnit.unit_name || '',
+      });
+    }
+
+    unitDDL.value[index] = options;
+
+    if (currentUnit?.unit_id && !currentUnit.unit_name) {
+      const match = options.find((opt) => opt.code === currentUnit.unit_id);
+      if (match) currentUnit.unit_name = match.name;
+    }
+  } else {
+    unitDDL.value[index] = [];
+  }
+};
+
+const getVatProfileDDL = async (search = ''): Promise<void> => {
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    include_id: productForm.default_vat_profile_id ?? undefined,
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const getStatusDDL = async (): Promise<void> => {
+  const result = await dashboardServices.getStatusDDL(false);
+  if (result) {
+    statusDDL.value = result;
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  let el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (productForm.hasErrors) {
+    scrollToError(Object.keys(productForm.errors)[0]);
+  }
+  emits('loading-state', true);
+  await productForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-product-product-list' });
+    })
+    .catch((error) => {
+      const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+      showAlertPlaceholder('danger', '', errorList);
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  productForm.reset();
+  productForm.setErrors({});
+  await loadData();
+};
+
+const setCode = () => {
+  productForm.forgetError('code');
+  if (productForm.code == '_AUTO_') {
+    productForm.setData({ code: '' });
+  } else {
+    productForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const setUnitCode = (index: number) => {
+  if (productForm.product_units[index].code == '_AUTO_') {
+    productForm.product_units[index].code = '';
+  } else {
+    productForm.product_units[index].code = '_AUTO_';
+  }
+};
+
+const setPrimaryUnit = (index: number) => {
+  productForm.product_units.forEach((u: any, i: number) => {
+    u.is_primary_unit = i === index;
+  });
+  productForm.validate('product_units.is_primary_unit' as any);
+};
+
+const addUnit = () => {
+  productForm.product_units.push({
+    code: '_AUTO_',
+    is_manufacturer_sku: false,
+    unit_id: '',
+    unit_name: '',
+    price: 0,
+    is_base: false,
+    conversion_value: '',
+    is_primary_unit: false,
+    point: 0,
+    remarks: '',
+  } as any);
+
+  Object.keys(productForm.errors).forEach((key) => {
+    if (key.startsWith('product_units.')) {
+      productForm.forgetError(key as any);
+    }
+  });
+};
+
+const updateUnitName = (index: number, newUnitId?: string) => {
+  const unitId = newUnitId ?? productForm.product_units[index].unit_id;
+  if (!unitId) {
+    productForm.product_units[index].unit_name = '';
+    return;
+  }
+
+  const options = unitDDL.value[index] ?? [];
+  const unit = options.find((u) => u.code === unitId);
+
+  if (unit) {
+    productForm.product_units[index].unit_name = unit.name;
+    productForm.forgetError(`product_units.${index}.unit_id` as any);
+  }
+};
+
+const clearUnit = (index: number) => {
+  productForm.product_units[index].unit_id = '';
+  productForm.product_units[index].unit_name = '';
+};
+
+const removeUnit = (index: number) => {
+  const unit = productForm.product_units[index] as any;
+  if (unit.id) {
+    if (!productForm.delete_product_unit_ids) {
+      productForm.delete_product_unit_ids = [];
+    }
+    productForm.delete_product_unit_ids.push(unit.id);
+  }
+
+  const isPrimary = productForm.product_units[index].is_primary_unit;
+  productForm.product_units.splice(index, 1);
+
+  // If the removed unit was the primary unit, set the first unit (Base Unit) as primary
+  if (isPrimary && productForm.product_units.length > 0) {
+    productForm.product_units[0].is_primary_unit = true;
+  }
+
+  // Clear errors related to product_units to prevent stale "duplicate" errors
+  Object.keys(productForm.errors).forEach((key) => {
+    if (key.startsWith('product_units.')) {
+      productForm.forgetError(key as any);
+    }
+  });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  let ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+// #endregion
+
+// #region Watchers
+watch(
+  productForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('PRODUCT_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+// #endregion
+</script>
+
+<template>
+  <form id="productForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <!-- Card 1: Company Info -->
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="productForm.company_id" />
+        </div>
+      </template>
+
+      <!-- Card 2: Product Data -->
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('code') }">
+                {{ t('views.product.fields.code') }}
+              </FormLabel>
+              <FormInputCode v-model="productForm.code" :class="{ 'border-danger': productForm.invalid('code') }"
+                :placeholder="t('views.product.fields.code')" @set-auto="setCode"
+                @change="productForm.validate('code')" />
+              <FormErrorMessages :messages="productForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('category_id') }">
+                {{ t('views.product.fields.category_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="productForm.category_id" v-model:search="categorySearch"
+                :options="categoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': productForm.invalid('category_id') }"
+                @change="productForm.validate('category_id')" @search="getCategoryDDL" />
+              <FormErrorMessages :messages="productForm.errors.category_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('brand_id') }">
+                {{ t('views.product.fields.brand_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="productForm.brand_id" v-model:search="brandSearch" :options="brandOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': productForm.invalid('brand_id') }" @change="productForm.validate('brand_id')"
+                @search="getBrandDDL" />
+              <FormErrorMessages :messages="productForm.errors.brand_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('name') }">
+                {{ t('views.product.fields.name') }}
+              </FormLabel>
+              <FormInput v-model="productForm.name" type="text"
+                :class="{ 'border-danger': productForm.invalid('name') }" :placeholder="t('views.product.fields.name')"
+                @change="productForm.validate('name')" />
+              <FormErrorMessages :messages="productForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 md:col-span-8 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('default_vat_profile_id') }">
+                {{ t('views.product.fields.default_vat_profile_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="productForm.default_vat_profile_id"
+                v-model:search="vatProfileSearch"
+                :options="vatProfileOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': productForm.invalid('default_vat_profile_id') }"
+                @change="productForm.validate('default_vat_profile_id')"
+                @search="getVatProfileDDL"
+              />
+              <FormErrorMessages :messages="productForm.errors.default_vat_profile_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{
+                'text-danger': productForm.invalid('is_price_include_vat'),
+              }">
+                {{ t('views.product.fields.is_price_include_vat') }}
+              </FormLabel>
+              <FormSwitch class="mt-2">
+                <FormSwitch.Input v-model="productForm.is_price_include_vat" type="checkbox" :class="{
+                  'border-danger': productForm.invalid('is_price_include_vat'),
+                }" @change="productForm.validate('is_price_include_vat')" />
+              </FormSwitch>
+              <FormErrorMessages :messages="productForm.errors.is_price_include_vat" />
+            </div>
+
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{
+                'text-danger': productForm.invalid('is_use_serial_number'),
+              }">
+                {{ t('views.product.fields.is_use_serial_number') }}
+              </FormLabel>
+              <FormSwitch class="mt-2">
+                <FormSwitch.Input v-model="productForm.is_use_serial_number" type="checkbox" :class="{
+                  'border-danger': productForm.invalid('is_use_serial_number'),
+                }" @change="productForm.validate('is_use_serial_number')" />
+              </FormSwitch>
+              <FormErrorMessages :messages="productForm.errors.is_use_serial_number" />
+            </div>
+
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('is_expirable') }">
+                {{ t('views.product.fields.is_expirable') }}
+              </FormLabel>
+              <FormSwitch class="mt-2">
+                <FormSwitch.Input v-model="productForm.is_expirable" type="checkbox" :class="{
+                  'border-danger': productForm.invalid('is_expirable'),
+                }" @change="productForm.validate('is_expirable')" />
+              </FormSwitch>
+              <FormErrorMessages :messages="productForm.errors.is_expirable" />
+            </div>
+
+            <div class="col-span-12 md:col-span-4 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('status') }">
+                {{ t('views.product.fields.status') }}
+              </FormLabel>
+              <FormSelect v-model="productForm.status" :class="{ 'border-danger': productForm.invalid('status') }"
+                @change="productForm.validate('status')">
+                <option value="">
+                  {{ t('components.dropdown.placeholder') }}
+                </option>
+                <option v-for="s in statusDDL" :key="s.code" :value="s.code">
+                  {{ t(s.name) }}
+                </option>
+              </FormSelect>
+              <FormErrorMessages :messages="productForm.errors.status" />
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-12">
+              <FormLabel :class="{ 'text-danger': productForm.invalid('remarks') }">
+                {{ t('views.product.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea v-model="productForm.remarks" :class="{ 'border-danger': productForm.invalid('remarks') }"
+                :placeholder="t('views.product.fields.remarks')" @change="productForm.validate('remarks')" />
+              <FormErrorMessages :messages="productForm.errors.remarks" />
+            </div>
+
+          </div>
+        </div>
+      </template>
+
+      <!-- Card 3: Product Unit Settings -->
+      <template #card-items-2>
+        <div class="p-5">
+          <!-- No Product Unit Found -->
+          <div v-if="productForm.product_units.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <!-- Product Unit List -->
+          <div v-else class="space-y-5">
+            <div v-for="(unit, index) in productForm.product_units" :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4">
+              <!-- title -->
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{
+                    index === 0
+                      ? t('views.product.fields.base_unit')
+                      : t('views.product.fields.other_unit') + ' #' + index
+                  }}
+                </div>
+                <Button v-if="index > 0" type="button" variant="outline-secondary" @click="removeUnit(index)">
+                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                </Button>
+              </div>
+
+              <!-- Columns Unit Code, Unit Name, Conversion Value, Price, Point, Is Primary Unit -->
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <!-- Column 1: Unit Code + Is Manufacturer SKU -->
+                <div class="col-span-12 lg:col-span-4">
+                  <div class="grid grid-cols-12 items-center gap-4">
+                    <div class="col-span-7">
+                      <FormLabel :class="{
+                        'text-danger': productForm.invalid(`product_units.${index}.code` as any),
+                      }">
+                        {{ t('views.product.fields.unit_code') }}
+                      </FormLabel>
+                    </div>
+                    <div class="col-span-5">
+                      <FormLabel :class="{
+                        'text-danger': productForm.invalid(`product_units.${index}.is_manufacturer_sku` as any),
+                      }">
+                        {{ t('views.product.fields.is_manufacturer_sku') }}
+                      </FormLabel>
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 items-center gap-4 mt-1">
+                    <!-- Unit Code Input -->
+                    <div class="col-span-7">
+                      <FormInputCode v-model="productForm.product_units[index].code" :class="{
+                        'border-danger': productForm.invalid(`product_units.${index}.code` as any),
+                      }" :placeholder="t('views.product.fields.unit_code')" @set-auto="setUnitCode(index)"
+                        @change="productForm.validate(`product_units.${index}.code` as any)" />
+                      <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.code`]" />
+                    </div>
+                    <!-- Is Manufacturer SKU Switch -->
+                    <div class="col-span-5">
+                      <div class="flex items-center">
+                        <FormSwitch>
+                          <FormSwitch.Input v-model="productForm.product_units[index].is_manufacturer_sku"
+                            type="checkbox" :class="{
+                              'border-danger': productForm.invalid(
+                                `product_units.${index}.is_manufacturer_sku` as any,
+                              ),
+                            }" @change="productForm.validate(`product_units.${index}.is_manufacturer_sku` as any)" />
+                        </FormSwitch>
+                      </div>
+                    </div>
+                  </div>
+                  <FormErrorMessages
+                    :messages="(productForm.errors as any)[`product_units.${index}.is_manufacturer_sku`]" />
+                </div>
+
+                <!-- Column 2: Unit Name (Base Unit) -->
+                <div class="col-span-12 lg:col-span-3" v-if="index === 0">
+                  <!-- Unit Name Input -->
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.unit_id` as any),
+                  }">
+                    {{ t('views.product.fields.unit_id') }}
+                  </FormLabel>
+                  <!-- Unit Name Dropdown -->
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <FormSelectSearch v-model="productForm.product_units[index].unit_id"
+                        v-model:search="unitSearch[index]" :options="getUnitOptions(index)"
+                        :placeholder="t('components.dropdown.placeholder')" :class="{
+                          'border-danger': productForm.invalid(`product_units.${index}.unit_id` as any),
+                        }" @change="
+                          () => {
+                            updateUnitName(index);
+                            productForm.validate(`product_units.${index}.unit_id` as any);
+                          }
+                        " @search="(q) => getUnitDDL(index, q)" @clear="clearUnit(index)" />
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.unit_id`]" />
+                </div>
+
+                <!-- Column 2: Unit Name (Other Units) -->
+                <div class="col-span-12 lg:col-span-2" v-else>
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.unit_id` as any),
+                  }">
+                    {{ t('views.product.fields.unit_id') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <FormSelectSearch v-model="productForm.product_units[index].unit_id"
+                        v-model:search="unitSearch[index]" :options="getUnitOptions(index)"
+                        :placeholder="t('components.dropdown.placeholder')" :class="{
+                          'border-danger': productForm.invalid(`product_units.${index}.unit_id` as any),
+                        }" @change="
+                          () => {
+                            updateUnitName(index);
+                            productForm.validate(`product_units.${index}.unit_id` as any);
+                          }
+                        " @search="(q) => getUnitDDL(index, q)" @clear="clearUnit(index)" />
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.unit_id`]" />
+                </div>
+
+                <!-- Column 3: Conversion Value -->
+                <div class="col-span-12 lg:col-span-1" v-if="index > 0">
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.conversion_value` as any),
+                  }">
+                    {{ t('views.product.fields.conversion_value') }}
+                  </FormLabel>
+                  <FormErrorMessages :messages="(productForm.errors as any)['product_units.is_primary_unit']" />
+                  <FormInputCurrency v-model="productForm.product_units[index].conversion_value" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.conversion_value` as any),
+                  }" :placeholder="t('views.product.fields.conversion_value')"
+                    @change="productForm.validate(`product_units.${index}.conversion_value` as any)" />
+                  <!-- base unit name -->
+                  <div class="flex justify-end">
+                    <FormLabel class="text-xs font-bold mt-1 text-slate-500 text-right">
+                      {{ productForm.product_units[0].unit_name }}
+                    </FormLabel>
+                  </div>
+                  <FormErrorMessages
+                    :messages="(productForm.errors as any)[`product_units.${index}.conversion_value`]" />
+                </div>
+
+                <!-- Column 4: Price (Base Unit) -->
+                <div class="col-span-12 lg:col-span-2" v-else>
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.price` as any),
+                  }">
+                    {{ t('views.product.fields.base_unit_price') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="productForm.product_units[index].price" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.price` as any),
+                  }" :placeholder="t('views.product.fields.base_unit_price')"
+                    @change="productForm.validate(`product_units.${index}.price` as any)" />
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.price`]" />
+                </div>
+
+                <!-- Column 4: Price (Other-->
+                <div class="col-span-12 lg:col-span-2" v-if="index > 0">
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.price` as any),
+                  }">
+                    {{ t('views.product.fields.price') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="productForm.product_units[index].price" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.price` as any),
+                  }" :placeholder="t('views.product.fields.price')"
+                    @change="productForm.validate(`product_units.${index}.price` as any)" />
+                  <div v-if="
+                    !productForm.product_units[index].is_base &&
+                    productForm.product_units[index].conversion_value > 0 &&
+                    productForm.product_units[index].price > 0
+                  " class="text-xs text-slate-500 mt-1 text-right">
+                    {{ t('views.product.fields.base_unit_price') }}:
+                    {{
+                      formatCurrency(
+                        (
+                          productForm.product_units[index].price / productForm.product_units[index].conversion_value
+                        ).toFixed(2),
+                      )
+                    }}
+                  </div>
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.price`]" />
+                </div>
+
+                <!-- Column 6: Point (Base Unit) -->
+                <div class="col-span-12 lg:col-span-1" v-if="index === 0">
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.point` as any),
+                  }">
+                    {{ t('views.product.fields.point') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="productForm.product_units[index].point" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.point` as any),
+                  }" :placeholder="t('views.product.fields.point')"
+                    @change="productForm.validate(`product_units.${index}.point` as any)" />
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.point`]" />
+                </div>
+
+                <!-- Column 6: Point (Other Units) -->
+                <div class="col-span-12 sm:col-span-1" v-if="index > 0">
+                  <FormLabel :class="{
+                    'text-danger': productForm.invalid(`product_units.${index}.point` as any),
+                  }">
+                    {{ t('views.product.fields.point') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="productForm.product_units[index].point" :class="{
+                    'border-danger': productForm.invalid(`product_units.${index}.point` as any),
+                  }" :placeholder="t('views.product.fields.point')"
+                    @change="productForm.validate(`product_units.${index}.point` as any)" />
+                  <FormErrorMessages :messages="(productForm.errors as any)[`product_units.${index}.point`]" />
+                </div>
+
+                <!-- Column 7: Is Primary Unit -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormCheck class="mt-9">
+                    <FormCheck.Input type="radio" name="primary_unit" class="mr-2 border-slate-300" :class="{
+                      'border-danger': (productForm.errors as any)['product_units.is_primary_unit'],
+                    }" :checked="productForm.product_units[index].is_primary_unit" @change="setPrimaryUnit(index)" />
+                    <FormCheck.Label class="text-sm" :class="{
+                      'text-danger': (productForm.errors as any)['product_units.is_primary_unit'],
+                      '': !(productForm.errors as any)['product_units.is_primary_unit'],
+                    }">
+                      {{ t('views.product.fields.is_primary_unit') }}
+                    </FormCheck.Label>
+                  </FormCheck>
+                  <FormErrorMessages :messages="(productForm.errors as any)['product_units.is_primary_unit']" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Add Product Unit Button -->
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addUnit">
+              <Lucide icon="Plus" class="w-4 h-4 mr-2" />
+              {{ t('views.product.actions.add_unit') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <!-- Card 4: Product Images -->
+      <template #card-items-3>
+        <div class="p-5">
+          <FormLabel>
+            {{ t('views.product.fields.images') }}
+          </FormLabel>
+          <FormImagesField
+            entity="product"
+            v-model="productForm.image_hashes"
+            v-model:existing-images="uploadedImages"
+            v-model:delete-image-ids="productForm.delete_image_ids"
+          />
+        </div>
+      </template>
+
+      <!-- Buttons -->
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="productForm.validating">
+            <Lucide v-if="productForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/product/ProductIndex.vue b/web/src/pages/product/ProductIndex.vue
new file mode 100644
index 000000000..01d321112
--- /dev/null
+++ b/web/src/pages/product/ProductIndex.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.product.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const productNotification = ref<NotificationElement>();
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[productNotification]', (el: NotificationElement) => {
+    productNotification.value = el;
+  });
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-product-product-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-product-product-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.product.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.product.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.product.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (productNotification.value) productNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('PRODUCT_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('PRODUCT_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="productNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/product/ProductList.vue b/web/src/pages/product/ProductList.vue
new file mode 100644
index 000000000..fb069f525
--- /dev/null
+++ b/web/src/pages/product/ProductList.vue
@@ -0,0 +1,856 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import ProductService from '@/services/ProductService';
+import { Product } from '@/types/models/Product';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ProductReadAnyPaginateRequest } from '@/types/services/product/ProductRequest';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { FormLabel, FormSelectSearch, FormSelect } from '@/components/Base/Form';
+import { DropDownOption } from '@/types/models/DropDownOption';
+import ProductCategoryService from '@/services/ProductCategoryService';
+import BrandService from '@/services/BrandService';
+import VatProfileService from '@/services/VatProfileService';
+import DashboardService from '@/services/DashboardService';
+import { formatCurrency } from '@/utils/helper';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const productServices = new ProductService();
+const productCategoryService = new ProductCategoryService();
+const brandService = new BrandService();
+const vatProfileService = new VatProfileService();
+const dashboardServices = new DashboardService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+// #endregion
+
+interface ProductListFilters {
+  search: string;
+  category_id: string | null;
+  brand_id: string | null;
+  default_vat_profile_id: string | null;
+  is_price_include_vat: string | null;
+  is_use_serial_number: string | null;
+  is_expirable: string | null;
+  status: string | null;
+}
+
+// #region Refs
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const productLists = ref<Collection<Array<Product>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const showAdvancedFilters = ref<boolean>(false);
+
+const filters = ref<ProductListFilters>({
+  search: '',
+  category_id: null,
+  brand_id: null,
+  default_vat_profile_id: null,
+  is_price_include_vat: null,
+  is_use_serial_number: null,
+  is_expirable: null,
+  status: null,
+});
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const brandDDL = ref<Array<DropDownOption> | null>(null);
+const brandSearch = ref<string>('');
+const brandOptions = computed(() =>
+  (brandDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<DropDownOption> | null>(null);
+const vatProfileSearch = ref<string>('');
+const vatProfileOptions = computed(() =>
+  (vatProfileDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const statusDDL = ref<Array<DropDownOption> | null>(null);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const booleanOptions = computed<Array<DropDownOption>>(() => [
+  { code: 'true', name: t('components.dropdown.values.switch.on') },
+  { code: 'false', name: t('components.dropdown.values.switch.off') },
+]);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  filters.value.search = '';
+
+  await Promise.all([loadCategoryDDL(), loadBrandDDL(), loadVatProfileDDL(), loadStatusDDL()]);
+
+  await getProducts('', true, 1, 10);
+});
+// #endregion
+
+// #region Methods
+const getProducts = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  let company_id = selectedUserLocation.value.company.id;
+
+  const searchReq: ProductReadAnyPaginateRequest = {
+    with_trashed: false,
+
+    company_id: company_id,
+    search: search,
+    category_id: filters.value.category_id || undefined,
+    brand_id: filters.value.brand_id || undefined,
+    default_vat_profile_id: filters.value.default_vat_profile_id || undefined,
+    is_price_include_vat:
+      filters.value.is_price_include_vat === 'true'
+        ? true
+        : filters.value.is_price_include_vat === 'false'
+          ? false
+          : undefined,
+    is_use_serial_number:
+      filters.value.is_use_serial_number === 'true'
+        ? true
+        : filters.value.is_use_serial_number === 'false'
+          ? false
+          : undefined,
+    is_expirable:
+      filters.value.is_expirable === 'true'
+        ? true
+        : filters.value.is_expirable === 'false'
+          ? false
+          : undefined,
+    type: 1, // Physical Product
+    status: filters.value.status || undefined,
+
+    include_id: undefined,
+
+    refresh: refresh,
+    page: page,
+    per_page: per_page,
+  };
+
+  let result: ServiceResponse<Collection<Array<Product>> | null> = await productServices.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    productLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  filters.value.search = data.search.text;
+  await getProducts(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const handleCategoryFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleBrandFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleDefaultVatProfileFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleIsPriceIncludeVatFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleIsUseSerialNumberFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleIsExpirableFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const handleStatusFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProducts(filters.value.search, true, 1, perPage);
+};
+
+const clearCategoryFilter = () => {
+  filters.value.category_id = null;
+  categorySearch.value = '';
+};
+
+const clearBrandFilter = () => {
+  filters.value.brand_id = null;
+  brandSearch.value = '';
+};
+
+const clearDefaultVatProfileFilter = () => {
+  filters.value.default_vat_profile_id = null;
+  vatProfileSearch.value = '';
+};
+
+const toggleAdvancedFilters = () => {
+  showAdvancedFilters.value = !showAdvancedFilters.value;
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await productCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    type: 1, // Product Type
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadBrandDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await brandService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    brandDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadVatProfileDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: filters.value.default_vat_profile_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadStatusDDL = async () => {
+  const result = await dashboardServices.getStatusDDL(false);
+  if (result) {
+    statusDDL.value = result;
+  }
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (idx: number) => {
+  if (!productLists.value) return;
+  let ulid = productLists.value.data[idx].ulid;
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({
+    name: 'side-menu-product-product-edit',
+    params: { ulid: ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!productLists.value) return;
+  let ulid = productLists.value.data[idx].ulid;
+  deleteUlid.value = ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  let result = await productServices.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    await getProducts(filters.value.search, true, 1, productLists.value?.meta.per_page || 10);
+    showAlertPlaceholder('hidden', '', null);
+    showNotification(t('views.product.alert.delete.title'), t('views.product.alert.delete.message'));
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  let n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  let ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+const getProductMainImageUrl = (item: Product): string | null => {
+  if (!item.product_images || item.product_images.length === 0) return null;
+
+  const mainImage = item.product_images.find((img) => img.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  const first = item.product_images[0];
+  return first?.url ?? null;
+};
+// #endregion
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.product.fields.category_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="filters.category_id" v-model:search="categorySearch"
+                :options="categoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleCategoryFilterChange" @search="loadCategoryDDL" @clear="clearCategoryFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.product.fields.brand_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="filters.brand_id" v-model:search="brandSearch"
+                :options="brandOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleBrandFilterChange" @search="loadBrandDDL" @clear="clearBrandFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.product.fields.status') }}
+          </FormLabel>
+          <FormSelect v-model="filters.status" @change="handleStatusFilterChange">
+            <option value="">{{ t('components.dropdown.placeholder') }}</option>
+            <option v-for="item in statusDDL ?? []" :key="item.code" :value="item.code">{{ t(item.name) }}</option>
+          </FormSelect>
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+          <Button
+            variant="soft-secondary"
+            class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+            @click="toggleAdvancedFilters"
+          >
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.product.fields.default_vat_profile_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="filters.default_vat_profile_id" v-model:search="vatProfileSearch"
+                :options="vatProfileOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleDefaultVatProfileFilterChange" @search="loadVatProfileDDL"
+                @clear="clearDefaultVatProfileFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.product.fields.is_price_include_vat') }}
+          </FormLabel>
+          <FormSelect v-model="filters.is_price_include_vat" @change="handleIsPriceIncludeVatFilterChange">
+            <option value="">{{ t('components.dropdown.placeholder') }}</option>
+            <option v-for="item in booleanOptions" :key="item.code" :value="item.code">{{ item.name }}</option>
+          </FormSelect>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.product.fields.is_use_serial_number') }}
+          </FormLabel>
+          <FormSelect v-model="filters.is_use_serial_number" @change="handleIsUseSerialNumberFilterChange">
+            <option value="">{{ t('components.dropdown.placeholder') }}</option>
+            <option v-for="item in booleanOptions" :key="item.code" :value="item.code">{{ item.name }}</option>
+          </FormSelect>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.product.fields.is_expirable') }}
+          </FormLabel>
+          <FormSelect v-model="filters.is_expirable" @change="handleIsExpirableFilterChange">
+            <option value="">{{ t('components.dropdown.placeholder') }}</option>
+            <option v-for="item in booleanOptions" :key="item.code" :value="item.code">{{ item.name }}</option>
+          </FormSelect>
+        </div>
+      </div>
+
+      <DataList :title="t('views.product.table.title')" :data="productLists" :enable-search="true" :can-print="true"
+        :can-export="true" :pagination="productLists ? productLists.meta : null"
+        @dataListChanged="handleDataListChange">
+        <template #content>
+          <Table class="mt-5" :hover="true">
+            <Table.Thead variant="light">
+              <Table.Tr>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.table.cols.image') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.detail.info_title') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.table.cols.name') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.table.cols.vat_profile') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.product.table.cols.unit') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap text-right">
+                  {{ t('views.product.table.cols.price') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap"></Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody v-if="productLists !== null">
+              <!-- Product list: empty state -->
+              <template v-if="productLists.data.length === 0">
+                <Table.Tr class="intro-x">
+                  <Table.Td colspan="7">
+                    <div class="flex justify-center italic">
+                      {{ t('components.data-list.data_not_found') }}
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+              </template>
+              <!-- Product list: main rows (summary) -->
+              <template v-for="(item, itemIdx) in productLists.data" :key="item.ulid">
+                <Table.Tr class="intro-x">
+                  <Table.Td>
+                    <ProductImagePreview :image-url="getProductMainImageUrl(item)" />
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="font-medium whitespace-nowrap">
+                      {{ item.code }}
+                    </div>
+                    <div class="mt-0.5 flex items-center flex-wrap">
+                      <span class="font-medium">{{ item.category.name }}</span>
+                      <template v-if="item.brand">
+                        <Lucide icon="ChevronRight" class="w-3 h-3 text-slate-400 mx-1" />
+                        <span>{{ item.brand.name }}</span>
+                      </template>
+                    </div>
+                    <div class="mt-1">
+                      <div v-if="item.status == 'ACTIVE'" class="flex items-center text-success text-xs">
+                        <Lucide icon="CheckCircle" class="w-3 h-3 mr-1" />
+                        {{ t('views.product.status.active') }}
+                      </div>
+                      <div v-else class="flex items-center text-danger text-xs">
+                        <Lucide icon="X" class="w-3 h-3 mr-1" />
+                        {{ t('views.product.status.inactive') }}
+                      </div>
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="font-medium">
+                      {{ item.name }}
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    {{ item.default_vat_profile?.name || '-' }}
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="flex flex-col gap-0">
+                      <div v-for="unit in item.product_units" :key="unit.ulid"
+                        class="h-6 flex items-center whitespace-nowrap">
+                        {{ unit.unit.name
+                        }}{{
+                          unit.conversion_value > 1
+                            ? ': ' + formatCurrency(unit.conversion_value) + ' ' + item.product_units[0].unit.name
+                            : ''
+                        }}
+                      </div>
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="flex flex-col gap-0 items-end">
+                      <div v-for="unit in item.product_units" :key="unit.ulid"
+                        class="h-6 flex items-center whitespace-nowrap">
+                        {{ formatCurrency(unit.price) }}
+                      </div>
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="flex justify-end gap-1">
+                      <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                        <Lucide icon="Info" class="w-4 h-4" />
+                      </Button>
+                      <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                        <Lucide icon="Pen" class="w-4 h-4" />
+                      </Button>
+                      <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+                <!-- Product list: expandable detail row -->
+                <Table.Tr :class="{
+                  'intro-x': true,
+                  'hidden transition-all': expandDetail !== itemIdx,
+                }">
+                  <Table.Td colspan="7" class="p-5">
+                    <div class="grid grid-cols-12 gap-6">
+                      <!-- Product detail: basic information -->
+                      <div class="col-span-12 lg:col-span-6">
+                        <div class="font-medium text-base mb-3 border-b pb-2">
+                          {{ t('views.product.detail.info_title') }}
+                        </div>
+                        <div class="grid grid-cols-1 gap-y-2">
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.code') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.code }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.category_id') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.category.name }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.brand_id') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.brand ? item.brand.name : '-' }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.name') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.name }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.status') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.status == 'ACTIVE'
+                                  ? t('views.product.status.active')
+                                  : t('views.product.status.inactive')
+                              }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.remarks') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.remarks || '-' }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Product detail: settings / tax info -->
+                      <div class="col-span-12 lg:col-span-6">
+                        <div class="font-medium text-base mb-3 border-b pb-2">
+                          {{ t('views.product.detail.settings_title') }}
+                        </div>
+                        <div class="grid grid-cols-1 gap-y-2">
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.default_vat_profile_id') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.default_vat_profile?.name || '-' }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.is_price_include_vat') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.is_price_include_vat
+                                  ? t('components.dropdown.values.switch.on')
+                                  : t('components.dropdown.values.switch.off')
+                              }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.is_use_serial_number') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.is_use_serial_number
+                                  ? t('components.dropdown.values.switch.on')
+                                  : t('components.dropdown.values.switch.off')
+                              }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.product.fields.is_expirable') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{
+                                item.is_expirable
+                                  ? t('components.dropdown.values.switch.on')
+                                  : t('components.dropdown.values.switch.off')
+                              }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Product detail: units table -->
+                      <div class="col-span-12">
+                        <div class="font-medium text-base mb-3 border-b pb-2">
+                          {{ t('views.product.detail.units_title') }}
+                        </div>
+                        <Table class="border">
+                          <Table.Thead>
+                            <Table.Tr>
+                              <Table.Th>
+                                {{ t('views.product.fields.code') }}
+                              </Table.Th>
+                              <Table.Th>
+                                {{ t('views.product.fields.unit_id') }}
+                              </Table.Th>
+                              <Table.Th>
+                                {{ t('views.product.fields.conversion_value') }}
+                              </Table.Th>
+                              <Table.Th class="text-right">
+                                {{ t('views.product.fields.price') }}
+                              </Table.Th>
+                              <Table.Th class="text-right">
+                                {{ t('views.product.fields.point') }}
+                              </Table.Th>
+                              <Table.Th class="text-center">
+                                {{ t('views.product.fields.is_manufacturer_sku') }}
+                              </Table.Th>
+                            </Table.Tr>
+                          </Table.Thead>
+                          <Table.Tbody>
+                            <Table.Tr v-for="unit in item.product_units" :key="unit.ulid">
+                              <Table.Td>{{ unit.code }}</Table.Td>
+                              <Table.Td class="font-medium">
+                                {{ unit.unit.name }}
+                              </Table.Td>
+                              <Table.Td>
+                                <div class="flex flex-col">
+                                  <span>
+                                    {{ formatCurrency(unit.conversion_value) }}
+                                  </span>
+                                  <span v-if="unit.conversion_value > 1" class="text-xs text-slate-500">
+                                    1 {{ unit.unit.name }} =
+                                    {{ formatCurrency(unit.conversion_value) }}
+                                    {{ item.product_units[0].unit.name }}
+                                  </span>
+                                  <span v-else class="text-xs text-slate-500">
+                                    {{ t('views.product.fields.base_unit') }}
+                                  </span>
+                                </div>
+                              </Table.Td>
+                              <Table.Td class="text-right">
+                                <div class="flex flex-col">
+                                  <span>{{ formatCurrency(unit.price) }}</span>
+                                  <span v-if="unit.conversion_value > 1 && unit.price > 0"
+                                    class="text-xs text-slate-500 whitespace-nowrap">
+                                    {{ t('views.product.fields.base_unit_price') }}:
+                                    {{ formatCurrency((unit.price / unit.conversion_value).toFixed(2)) }}
+                                  </span>
+                                </div>
+                              </Table.Td>
+                              <Table.Td class="text-right">
+                                {{ unit.point }}
+                              </Table.Td>
+                              <Table.Td class="text-center">
+                                <Lucide v-if="unit.is_manufacturer_sku" icon="CheckCircle"
+                                  class="text-success w-4 h-4 mx-auto" />
+                                <Lucide v-else icon="X" class="text-danger w-4 h-4 mx-auto" />
+                              </Table.Td>
+                            </Table.Tr>
+                          </Table.Tbody>
+                        </Table>
+                      </div>
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+              </template>
+            </Table.Tbody>
+          </Table>
+        </template>
+      </DataList>
+    </div>
+  </div>
+  <Dialog :open="deleteModalShow" @close="
+    () => {
+      deleteModalShow = false;
+    }
+  ">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">
+          {{ t('components.delete-modal.title') }}
+        </div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" @click="
+          () => {
+            deleteModalShow = false;
+          }
+        " class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/product/ProductWithRemainingStockIndex.vue b/web/src/pages/product/ProductWithRemainingStockIndex.vue
new file mode 100644
index 000000000..d21d70a44
--- /dev/null
+++ b/web/src/pages/product/ProductWithRemainingStockIndex.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.LIST);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.product.page_title_with_remaining_stock');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const productNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-product-product-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (productNotification.value) productNotification.value.showToast();
+};
+
+const clearCache = (mode: ViewMode) => {
+  switch (mode) {
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="productNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
+
diff --git a/web/src/pages/product/ProductWithRemainingStockList.vue b/web/src/pages/product/ProductWithRemainingStockList.vue
new file mode 100644
index 000000000..2037bd34e
--- /dev/null
+++ b/web/src/pages/product/ProductWithRemainingStockList.vue
@@ -0,0 +1,482 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { FormInput, FormInputDateTime, FormLabel, FormSelect, FormSelectSearch } from '@/components/Base/Form';
+import { Collection } from '@/types/resources/Collection';
+import { Product } from '@/types/models/Product';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import ProductService from '@/services/ProductService';
+import ProductCategoryService from '@/services/ProductCategoryService';
+import BrandService from '@/services/BrandService';
+import WarehouseService from '@/services/WarehouseService';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ProductReadAnyPaginateRequest } from '@/types/services/product/ProductRequest';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+import { DropDownOption } from '@/types/models/DropDownOption';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const productServices = new ProductService();
+const productCategoryService = new ProductCategoryService();
+const brandService = new BrandService();
+const warehouseService = new WarehouseService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder']);
+
+interface ProductWithRemainingStockFilters {
+  search: string;
+  endDate: string | null;
+  warehouse_id: string | null;
+  less_than: number | null;
+  greater_than: number | null;
+  category_id: string | null;
+  brand_id: string | null;
+  stock_filter: 'has_stock' | 'empty' | 'valid' | 'invalid' | null;
+  sort_by_remaining_stock: 'asc' | 'desc' | null;
+}
+
+const filters = ref<ProductWithRemainingStockFilters>({
+  search: '',
+  endDate: null,
+  warehouse_id: null,
+  less_than: null,
+  greater_than: null,
+  category_id: null,
+  brand_id: null,
+  stock_filter: null,
+  sort_by_remaining_stock: null,
+});
+
+const productLists = ref<Collection<Array<Product>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const brandDDL = ref<Array<DropDownOption> | null>(null);
+const brandSearch = ref<string>('');
+const brandOptions = computed(() =>
+  (brandDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+const warehouseDDL = ref<Array<DropDownOption> | null>(null);
+const warehouseSearch = ref<string>('');
+const warehouseOptions = computed(() =>
+  (warehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+const showAdvancedFilters = ref(false);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  filters.value.search = '';
+  const now = new Date();
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  filters.value.endDate = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await Promise.all([getCategoryDDL(), getBrandDDL(), getWarehouseDDL()]);
+
+  await getProductsWithRemainingStock('', true, 1, 10);
+});
+
+const getProductsWithRemainingStock = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const searchReq: ProductReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: search,
+    category_id: filters.value.category_id || undefined,
+    brand_id: filters.value.brand_id || undefined,
+    type: 1,
+    with_remaining_stock: {
+      end_date: filters.value.endDate,
+      warehouse_id: filters.value.warehouse_id,
+      stock_filter: filters.value.stock_filter,
+      less_than: normalizeNullableNumber(filters.value.less_than),
+      greater_than: normalizeNullableNumber(filters.value.greater_than),
+      sort_by_remaining_stock: filters.value.sort_by_remaining_stock,
+    },
+    refresh: refresh,
+    page: page,
+    per_page: per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<Product>> | null> =
+    await productServices.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    productLists.value = result.data as Collection<Array<Product>>;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  filters.value.search = data.search.text;
+
+  await getProductsWithRemainingStock(
+    filters.value.search,
+    false,
+    data.pagination.page,
+    data.pagination.per_page,
+  );
+};
+
+const handleEndDateFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProductsWithRemainingStock(filters.value.search, true, 1, perPage);
+};
+
+const handleCategoryFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProductsWithRemainingStock(filters.value.search, true, 1, perPage);
+};
+
+const handleBrandFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProductsWithRemainingStock(filters.value.search, true, 1, perPage);
+};
+
+const handleWarehouseFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProductsWithRemainingStock(filters.value.search, true, 1, perPage);
+};
+
+const handleRangeFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProductsWithRemainingStock(filters.value.search, true, 1, perPage);
+};
+
+const handleStockFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProductsWithRemainingStock(filters.value.search, true, 1, perPage);
+};
+
+const handleSortFilterChange = async () => {
+  const perPage = productLists.value?.meta.per_page || 10;
+
+  await getProductsWithRemainingStock(filters.value.search, true, 1, perPage);
+};
+
+const clearCategoryFilter = () => {
+  filters.value.category_id = null;
+  categorySearch.value = '';
+};
+
+const clearBrandFilter = () => {
+  filters.value.brand_id = null;
+  brandSearch.value = '';
+};
+
+const clearWarehouseFilter = () => {
+  filters.value.warehouse_id = null;
+  warehouseSearch.value = '';
+};
+
+const getPrimaryUnit = (product: Product) => {
+  return product.product_units.find((u) => u.is_primary_unit) ?? null;
+};
+
+const getProductMainImageUrl = (product: Product | null | undefined): string | null => {
+  const images = product?.product_images ?? [];
+  if (images.length === 0) return null;
+
+  const mainImage = images.find((img) => img.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  return images[0]?.url ?? null;
+};
+
+const getRemainingStockPrimaryQty = (product: Product): number | null => {
+  if (product.remaining_stock_base_unit === undefined || product.remaining_stock_base_unit === null) {
+    return null;
+  }
+
+  const primaryUnit = getPrimaryUnit(product);
+  if (!primaryUnit || !primaryUnit.conversion_value) {
+    return null;
+  }
+
+  const baseQty = product.remaining_stock_base_unit;
+  return baseQty / primaryUnit.conversion_value;
+};
+
+const getCategoryDDL = async (search = ''): Promise<void> => {
+  const result = await productCategoryService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    type: 1,
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const getBrandDDL = async (search = ''): Promise<void> => {
+  const result = await brandService.readAnyGet({
+    with_trashed: false,
+    search: search,
+    company_id: selectedUserLocation.value.company.id,
+    refresh: false,
+    limit: 10,
+  });
+
+  if (result.success && result.data) {
+    brandDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const getWarehouseDDL = async (search = ''): Promise<void> => {
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    warehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const normalizeNullableNumber = (value: number | null): number | null => {
+  if (value === null || Number.isNaN(value)) {
+    return null;
+  }
+
+  return value;
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+const toggleAdvancedFilters = () => {
+  showAdvancedFilters.value = !showAdvancedFilters.value;
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-2 md:col-span-6">
+          <FormLabel>
+            {{ t('views.product.fields.category_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="filters.category_id" v-model:search="categorySearch"
+                :options="categoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleCategoryFilterChange" @search="getCategoryDDL" @clear="clearCategoryFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 lg:col-span-2 md:col-span-6">
+          <FormLabel>
+            {{ t('views.product.fields.brand_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="filters.brand_id" v-model:search="brandSearch" :options="brandOptions"
+                :placeholder="t('components.dropdown.placeholder')" @change="handleBrandFilterChange"
+                @search="getBrandDDL" @clear="clearBrandFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 lg:col-span-3 md:col-span-6">
+          <FormLabel>
+            {{ t('views.product.fields.with_remaining_stock_end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="filters.endDate"
+            :placeholder="t('views.product.fields.with_remaining_stock_end_date')" @change="handleEndDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3 md:col-span-6">
+          <FormLabel>
+            {{ t('views.warehouse.page_title') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="filters.warehouse_id" v-model:search="warehouseSearch"
+                :options="warehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleWarehouseFilterChange" @search="getWarehouseDDL" @clear="clearWarehouseFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+          <Button
+            variant="soft-secondary"
+            class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+            @click="toggleAdvancedFilters"
+          >
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-2 md:col-span-6">
+          <FormLabel>
+            Filter Stok
+          </FormLabel>
+          <FormSelect v-model="filters.stock_filter" @change="handleStockFilterChange">
+            <option :value="null"></option>
+            <option value="has_stock">Punya Stok</option>
+            <option value="empty">Stok Kosong</option>
+            <option value="valid">Stok Valid</option>
+            <option value="invalid">Stok Invalid</option>
+          </FormSelect>
+        </div>
+        <div class="col-span-12 lg:col-span-2 md:col-span-6">
+          <FormLabel>
+            Stok > Dari
+          </FormLabel>
+          <FormInput v-model.number="filters.greater_than" type="number" @change="handleRangeFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-2 md:col-span-6">
+          <FormLabel>
+            Stok < Dari
+          </FormLabel>
+          <FormInput v-model.number="filters.less_than" type="number" @change="handleRangeFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-2 md:col-span-6">
+          <FormLabel>
+            Urutkan Stok
+          </FormLabel>
+          <FormSelect v-model="filters.sort_by_remaining_stock" @change="handleSortFilterChange">
+            <option :value="null"></option>
+            <option value="desc">Tertinggi ke Terendah</option>
+            <option value="asc">Terendah ke Tertinggi</option>
+          </FormSelect>
+        </div>
+      </div>
+
+      <DataListFlex :data="productLists" :enable-search="true" :can-print="false" :can-export="false"
+        :rows="productLists?.data ?? []" row-class="bg-white dark:bg-darkmode-600"
+        :pagination="productLists ? productLists.meta : null" @dataListChanged="handleDataListChange">
+        <template #row="{ item }">
+          <div class="col-span-12 lg:col-span-1 sm:col-span-12 flex items-center justify-center md:justify-start">
+            <ProductImagePreview
+              :image-url="getProductMainImageUrl(item as Product)"
+              wrapper-class="w-12 h-12 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+              icon-class="w-4 h-4 text-slate-400"
+            />
+          </div>
+          <div class="col-span-12 lg:col-span-5 sm:col-span-6 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.product.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.product.fields.code') }}:
+              {{ (item as Product).code ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.product.fields.category_id') }}:
+              {{ (item as Product).category?.name ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.product.fields.brand_id') }}:
+              {{ (item as Product).brand?.name ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs">
+              {{ t('views.product.fields.name') }}:
+              {{ (item as Product).name ?? '-' }}
+            </div>
+          </div>
+          <div class="col-span-12 lg:col-span-6 sm:col-span-6 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.product.with_remaining_stock_suffix') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_adjustment_in_item.table.cols.remaining_stock') }}:
+              {{ formatCurrency(getRemainingStockPrimaryQty(item as Product) ?? 0) }} {{ getPrimaryUnit(item as Product)?.unit.name ?? '-' }}
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryCreate.vue b/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryCreate.vue
new file mode 100644
index 000000000..f636e270f
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryCreate.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode } from '@/components/Base/Form';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { debounce } from 'lodash';
+import Lucide from '@/components/Base/Lucide';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { useRouter } from 'vue-router';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const cacheServices = new CacheService();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.purchase_additional_cost_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_additional_cost_category.field_groups.purchase_additional_cost_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const purchaseAdditionalCostCategoryForm =
+  purchaseAdditionalCostCategoryService.usePurchaseAdditionalCostCategoryCreateForm();
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+  loadFromCache();
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+  }
+
+  setCompanyIdData();
+});
+
+const setCompanyIdData = () => {
+  purchaseAdditionalCostCategoryForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('PURCHASE_ADDITIONAL_COST_CATEGORY_CREATE') as Record<string, unknown>;
+  if (!data) return;
+  purchaseAdditionalCostCategoryForm.setData(data);
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (purchaseAdditionalCostCategoryForm.hasErrors) {
+    scrollToError(Object.keys(purchaseAdditionalCostCategoryForm.errors)[0]);
+  }
+  emits('loading-state', true);
+  await purchaseAdditionalCostCategoryForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-purchase-additional-cost-category-list' });
+    })
+    .catch((error) => {
+      const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+      showAlertPlaceholder('danger', '', errorList);
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  purchaseAdditionalCostCategoryForm.reset();
+  purchaseAdditionalCostCategoryForm.setErrors({});
+  setCompanyIdData();
+};
+
+const setCode = () => {
+  purchaseAdditionalCostCategoryForm.forgetError('code');
+  if (purchaseAdditionalCostCategoryForm.code == '_AUTO_') {
+    purchaseAdditionalCostCategoryForm.setData({ code: '' });
+  } else {
+    purchaseAdditionalCostCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  purchaseAdditionalCostCategoryForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('PURCHASE_ADDITIONAL_COST_CATEGORY_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="purchaseAdditionalCostCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="purchaseAdditionalCostCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel
+                :class="{
+                  'text-danger': purchaseAdditionalCostCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.purchase_additional_cost_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseAdditionalCostCategoryForm.code"
+                :class="{
+                  'border-danger': purchaseAdditionalCostCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.purchase_additional_cost_category.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseAdditionalCostCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel
+                :class="{
+                  'text-danger': purchaseAdditionalCostCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.purchase_additional_cost_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseAdditionalCostCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': purchaseAdditionalCostCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.purchase_additional_cost_category.fields.name')"
+                @change="purchaseAdditionalCostCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostCategoryForm.errors.name" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="purchaseAdditionalCostCategoryForm.validating || purchaseAdditionalCostCategoryForm.hasErrors"
+          >
+            <Lucide v-if="purchaseAdditionalCostCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryEdit.vue b/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryEdit.vue
new file mode 100644
index 000000000..af1efdc4d
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryEdit.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode } from '@/components/Base/Form';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import { ViewMode } from '@/types/enums/ViewMode';
+import Lucide from '@/components/Base/Lucide';
+import { debounce } from 'lodash';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { useRoute, useRouter } from 'vue-router';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const cacheServices = new CacheService();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.purchase_additional_cost_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_additional_cost_category.field_groups.purchase_additional_cost_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const purchaseAdditionalCostCategoryForm =
+  purchaseAdditionalCostCategoryService.usePurchaseAdditionalCostCategoryEditForm(route.params.ulid.toString());
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+  }
+
+  await loadData();
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await purchaseAdditionalCostCategoryService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    purchaseAdditionalCostCategoryForm.setData({
+      company_id: result.data.company?.id ?? '',
+      code: result.data.code,
+      name: result.data.name,
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-purchase-additional-cost-category-list' });
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (purchaseAdditionalCostCategoryForm.hasErrors) {
+    scrollToError(Object.keys(purchaseAdditionalCostCategoryForm.errors)[0]);
+  }
+  emits('loading-state', true);
+  await purchaseAdditionalCostCategoryForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-purchase-additional-cost-category-list' });
+    })
+    .catch((error) => {
+      const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+      showAlertPlaceholder('danger', '', errorList);
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  purchaseAdditionalCostCategoryForm.reset();
+  purchaseAdditionalCostCategoryForm.setErrors({});
+  await loadData();
+};
+
+const setCode = () => {
+  purchaseAdditionalCostCategoryForm.forgetError('code');
+  if (purchaseAdditionalCostCategoryForm.code == '_AUTO_') {
+    purchaseAdditionalCostCategoryForm.setData({ code: '' });
+  } else {
+    purchaseAdditionalCostCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  purchaseAdditionalCostCategoryForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('PURCHASE_ADDITIONAL_COST_CATEGORY_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="purchaseAdditionalCostCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="purchaseAdditionalCostCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel
+                :class="{
+                  'text-danger': purchaseAdditionalCostCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.purchase_additional_cost_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseAdditionalCostCategoryForm.code"
+                :class="{
+                  'border-danger': purchaseAdditionalCostCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.purchase_additional_cost_category.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseAdditionalCostCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel
+                :class="{
+                  'text-danger': purchaseAdditionalCostCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.purchase_additional_cost_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseAdditionalCostCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': purchaseAdditionalCostCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.purchase_additional_cost_category.fields.name')"
+                @change="purchaseAdditionalCostCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostCategoryForm.errors.name" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="purchaseAdditionalCostCategoryForm.validating || purchaseAdditionalCostCategoryForm.hasErrors"
+          >
+            <Lucide v-if="purchaseAdditionalCostCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryIndex.vue b/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryIndex.vue
new file mode 100644
index 000000000..c3b211f83
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryIndex.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { ref, provide } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.purchase_additional_cost_category.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const purchaseAdditionalCostCategoryNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[purchaseAdditionalCostCategoryNotification]', (el: NotificationElement) => {
+  purchaseAdditionalCostCategoryNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-purchase-additional-cost-category-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-purchase-additional-cost-category-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.purchase_additional_cost_category.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.purchase_additional_cost_category.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.purchase_additional_cost_category.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (purchaseAdditionalCostCategoryNotification.value) {
+    purchaseAdditionalCostCategoryNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('PURCHASE_ADDITIONAL_COST_CATEGORY_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('PURCHASE_ADDITIONAL_COST_CATEGORY_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="purchaseAdditionalCostCategoryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryList.vue b/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryList.vue
new file mode 100644
index 000000000..bdc1dc753
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryList.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { PurchaseAdditionalCostCategory } from '@/types/models/PurchaseAdditionalCostCategory';
+import { NotificationData } from '@/types/models/NotificationData';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { PurchaseAdditionalCostCategoryReadAnyPaginateRequest } from '@/types/services/purchase-additional-cost-category/PurchaseAdditionalCostCategoryRequest';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const purchaseAdditionalCostCategoryLists = ref<Collection<Array<PurchaseAdditionalCostCategory>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+  }
+
+  await getPurchaseAdditionalCostCategories('', true, 1, 10);
+});
+
+const getPurchaseAdditionalCostCategories = async (
+  search: string,
+  refresh: boolean,
+  page: number,
+  per_page: number,
+) => {
+  emits('loading-state', true);
+
+  const searchReq: PurchaseAdditionalCostCategoryReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<PurchaseAdditionalCostCategory>> | null> =
+    await purchaseAdditionalCostCategoryService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    purchaseAdditionalCostCategoryLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getPurchaseAdditionalCostCategories(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (idx: number) => {
+  if (!purchaseAdditionalCostCategoryLists.value) return;
+  const ulid = purchaseAdditionalCostCategoryLists.value.data[idx].ulid;
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({
+    name: 'side-menu-purchase-additional-cost-category-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!purchaseAdditionalCostCategoryLists.value) return;
+  deleteUlid.value = purchaseAdditionalCostCategoryLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await purchaseAdditionalCostCategoryService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getPurchaseAdditionalCostCategories('', true, 1, 10);
+    showNotification(
+      t('views.purchase_additional_cost_category.alert.delete_purchase_additional_cost_category.title'),
+      t('views.purchase_additional_cost_category.alert.delete_purchase_additional_cost_category.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="purchaseAdditionalCostCategoryLists"
+        :title="t('views.purchase_additional_cost_category.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="purchaseAdditionalCostCategoryLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="purchaseAdditionalCostCategoryLists ? purchaseAdditionalCostCategoryLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-5 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_additional_cost_category.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_category.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as PurchaseAdditionalCostCategory).code }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_category.fields.name') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as PurchaseAdditionalCostCategory).name }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-5 self-start md:pl-3">
+            <div v-if="expandDetail === index" class="rounded-md border border-slate-200/60 p-4 text-xs dark:border-darkmode-400">
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_category.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as PurchaseAdditionalCostCategory).code }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_category.fields.name') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as PurchaseAdditionalCostCategory).name }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-2 self-center flex justify-end items-center gap-2 pt-2 md:flex-col">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">Are you sure?</div>
+        <div class="mt-2 text-slate-500">
+          This action cannot be undone.
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" @click="deleteModalShow = false" class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentCreate.vue b/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentCreate.vue
new file mode 100644
index 000000000..4cddee624
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentCreate.vue
@@ -0,0 +1,418 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import PurchaseAdditionalCostPaymentService from '@/services/PurchaseAdditionalCostPaymentService';
+import PurchaseAdditionalCostService from '@/services/PurchaseAdditionalCostService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { type PurchaseAdditionalCost } from '@/types/models/PurchaseAdditionalCost';
+import { type CashAccount } from '@/types/models/CashAccount';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const purchaseAdditionalCostPaymentService = new PurchaseAdditionalCostPaymentService();
+const purchaseAdditionalCostService = new PurchaseAdditionalCostService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.purchase_additional_cost_payment.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_additional_cost_payment.field_groups.purchase_additional_cost_payment_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const purchaseAdditionalCostPaymentForm = purchaseAdditionalCostPaymentService.usePurchaseAdditionalCostPaymentCreateForm();
+
+const purchaseAdditionalCostDDL = ref<Array<DropDownOption> | null>(null);
+const purchaseAdditionalCostSearch = ref<string>('');
+const purchaseAdditionalCostOptions = computed(() =>
+  (purchaseAdditionalCostDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const selectedPurchaseAdditionalCost = computed(() => {
+  return (purchaseAdditionalCostDDL.value ?? []).find(
+    (item) => item.code === purchaseAdditionalCostPaymentForm.purchase_additional_cost_id,
+  );
+});
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([loadPurchaseAdditionalCostDDL(), loadCashAccountDDL()]);
+});
+
+const setLocationData = () => {
+  purchaseAdditionalCostPaymentForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('PURCHASE_ADDITIONAL_COST_PAYMENT_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  purchaseAdditionalCostPaymentForm.setData(data);
+};
+
+const loadPurchaseAdditionalCostDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseAdditionalCostService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    purchase_id: null,
+    purchase_additional_cost_category_id: null,
+    is_amount_payable_paid_off: false,
+    include_id: purchaseAdditionalCostPaymentForm.purchase_additional_cost_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    purchaseAdditionalCostDDL.value = result.data.data.map((item: PurchaseAdditionalCost) => ({
+      code: item.id,
+      name: [
+        item.code,
+        item.purchase?.code ? `Purchase ${item.purchase.code}` : null,
+        `Sisa ${formatCurrency(Number(item.amount_payable_due ?? 0))}`,
+      ]
+        .filter(Boolean)
+        .join(' - '),
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: purchaseAdditionalCostPaymentForm.cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  purchaseAdditionalCostPaymentForm.forgetError('code');
+
+  if (purchaseAdditionalCostPaymentForm.code === '_AUTO_') {
+    purchaseAdditionalCostPaymentForm.setData({ code: '' });
+    return;
+  }
+
+  purchaseAdditionalCostPaymentForm.setData({ code: '_AUTO_' });
+};
+
+const clearPurchaseAdditionalCost = () => {
+  purchaseAdditionalCostPaymentForm.setData({ purchase_additional_cost_id: '' });
+  purchaseAdditionalCostPaymentForm.forgetError('purchase_additional_cost_id');
+};
+
+const clearCashAccount = () => {
+  purchaseAdditionalCostPaymentForm.setData({ cash_account_id: '' });
+  purchaseAdditionalCostPaymentForm.forgetError('cash_account_id');
+};
+
+const onSubmit = async () => {
+  if (purchaseAdditionalCostPaymentForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseAdditionalCostPaymentForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await purchaseAdditionalCostPaymentForm
+    .submit()
+    .then(() => {
+      cacheServices.removeLastEntity('PURCHASE_ADDITIONAL_COST_PAYMENT_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-purchase-additional-cost-payment-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  purchaseAdditionalCostPaymentForm.reset();
+  purchaseAdditionalCostPaymentForm.setErrors({});
+  setLocationData();
+  purchaseAdditionalCostSearch.value = '';
+  cashAccountSearch.value = '';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  purchaseAdditionalCostPaymentForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('PURCHASE_ADDITIONAL_COST_PAYMENT_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="purchaseAdditionalCostPaymentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostPaymentForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostPaymentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('purchase_additional_cost_id') }">
+                {{ t('views.purchase_additional_cost_payment.fields.purchase_additional_cost') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostPaymentForm.purchase_additional_cost_id"
+                v-model:search="purchaseAdditionalCostSearch"
+                :options="purchaseAdditionalCostOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('purchase_additional_cost_id') }"
+                @change="purchaseAdditionalCostPaymentForm.validate('purchase_additional_cost_id')"
+                @search="loadPurchaseAdditionalCostDDL"
+                @clear="clearPurchaseAdditionalCost"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.purchase_additional_cost_id" />
+            </div>
+
+            <div v-if="selectedPurchaseAdditionalCost" class="col-span-12">
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 p-4 text-sm dark:border-darkmode-400 dark:bg-darkmode-600/40">
+                <div class="text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_payable_due') }}</div>
+                <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                  {{ selectedPurchaseAdditionalCost.name }}
+                </div>
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('code') }">
+                {{ t('views.purchase_additional_cost_payment.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseAdditionalCostPaymentForm.code"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('code') }"
+                :placeholder="t('views.purchase_additional_cost_payment.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseAdditionalCostPaymentForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('date') }">
+                {{ t('views.purchase_additional_cost_payment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseAdditionalCostPaymentForm.date"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('date') }"
+                :placeholder="t('views.purchase_additional_cost_payment.fields.date')"
+                @change="purchaseAdditionalCostPaymentForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('cash_account_id') }">
+                {{ t('views.purchase_additional_cost_payment.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostPaymentForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('cash_account_id') }"
+                @change="purchaseAdditionalCostPaymentForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('amount') }">
+                {{ t('views.purchase_additional_cost_payment.fields.amount') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseAdditionalCostPaymentForm.amount"
+                :allow-negative="false"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('amount') }"
+                :placeholder="t('views.purchase_additional_cost_payment.fields.amount')"
+                @change="purchaseAdditionalCostPaymentForm.validate('amount')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.amount" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('remarks') }">
+                {{ t('views.purchase_additional_cost_payment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="purchaseAdditionalCostPaymentForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('remarks') }"
+                :placeholder="t('views.purchase_additional_cost_payment.fields.remarks')"
+                @change="purchaseAdditionalCostPaymentForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="purchaseAdditionalCostPaymentForm.validating || purchaseAdditionalCostPaymentForm.hasErrors"
+          >
+            <Lucide v-if="purchaseAdditionalCostPaymentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentEdit.vue b/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentEdit.vue
new file mode 100644
index 000000000..225aaa743
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentEdit.vue
@@ -0,0 +1,387 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import PurchaseAdditionalCostPaymentService from '@/services/PurchaseAdditionalCostPaymentService';
+import CashAccountService from '@/services/CashAccountService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { type PurchaseAdditionalCostPayment } from '@/types/models/PurchaseAdditionalCostPayment';
+import { type CashAccount } from '@/types/models/CashAccount';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const purchaseAdditionalCostPaymentService = new PurchaseAdditionalCostPaymentService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.purchase_additional_cost_payment.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_additional_cost_payment.field_groups.purchase_additional_cost_payment_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const purchaseAdditionalCostPaymentForm = purchaseAdditionalCostPaymentService.usePurchaseAdditionalCostPaymentEditForm(
+  route.params.ulid.toString(),
+);
+
+const purchaseAdditionalCostPaymentData = ref<PurchaseAdditionalCostPayment | null>(null);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const purchaseAdditionalCostLabel = computed(() => {
+  const purchaseAdditionalCost = purchaseAdditionalCostPaymentData.value?.purchase_additional_cost;
+
+  if (!purchaseAdditionalCost) return '-';
+
+  return [
+    purchaseAdditionalCost.code,
+    purchaseAdditionalCost.purchase?.code ? `Purchase ${purchaseAdditionalCost.purchase.code}` : null,
+    `Sisa ${formatCurrency(Number(purchaseAdditionalCost.amount_payable_due ?? 0))}`,
+  ]
+    .filter(Boolean)
+    .join(' - ');
+});
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await loadCashAccountDDL();
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await purchaseAdditionalCostPaymentService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    purchaseAdditionalCostPaymentData.value = result.data;
+
+    purchaseAdditionalCostPaymentForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      purchase_additional_cost_id: result.data.purchase_additional_cost?.id ?? '',
+      code: result.data.code,
+      date: result.data.date,
+      cash_account_id: result.data.cash_account?.id ?? '',
+      amount: result.data.amount,
+      remarks: result.data.remarks ?? '',
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-purchase-additional-cost-payment-list' });
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: purchaseAdditionalCostPaymentData.value?.cash_account?.id,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  purchaseAdditionalCostPaymentForm.forgetError('code');
+
+  if (purchaseAdditionalCostPaymentForm.code === '_AUTO_') {
+    purchaseAdditionalCostPaymentForm.setData({ code: '' });
+    return;
+  }
+
+  purchaseAdditionalCostPaymentForm.setData({ code: '_AUTO_' });
+};
+
+const clearCashAccount = () => {
+  purchaseAdditionalCostPaymentForm.setData({ cash_account_id: '' });
+  purchaseAdditionalCostPaymentForm.forgetError('cash_account_id');
+};
+
+const onSubmit = async () => {
+  if (purchaseAdditionalCostPaymentForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseAdditionalCostPaymentForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await purchaseAdditionalCostPaymentForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-purchase-additional-cost-payment-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  purchaseAdditionalCostPaymentForm.reset();
+  purchaseAdditionalCostPaymentForm.setErrors({});
+  cashAccountSearch.value = '';
+  await loadData();
+  await loadCashAccountDDL();
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="purchaseAdditionalCostPaymentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostPaymentForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostPaymentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12">
+              <FormLabel>
+                {{ t('views.purchase_additional_cost_payment.fields.purchase_additional_cost') }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostPaymentForm.purchase_additional_cost_id" />
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 px-3 py-2 text-sm text-slate-700 dark:border-darkmode-400 dark:bg-darkmode-600/40 dark:text-slate-200">
+                {{ purchaseAdditionalCostLabel }}
+              </div>
+            </div>
+
+            <div class="col-span-12">
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 p-4 text-sm dark:border-darkmode-400 dark:bg-darkmode-600/40">
+                <div class="grid grid-cols-12 gap-3">
+                  <div class="col-span-12 md:col-span-4">
+                    <div class="text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_payable') }}</div>
+                    <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                      {{ formatCurrency(Number(purchaseAdditionalCostPaymentData?.purchase_additional_cost?.amount_payable ?? 0)) }}
+                    </div>
+                  </div>
+                  <div class="col-span-12 md:col-span-4">
+                    <div class="text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_payable_paid') }}</div>
+                    <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                      {{ formatCurrency(Number(purchaseAdditionalCostPaymentData?.purchase_additional_cost?.amount_payable_paid ?? 0)) }}
+                    </div>
+                  </div>
+                  <div class="col-span-12 md:col-span-4">
+                    <div class="text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_payable_due') }}</div>
+                    <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                      {{ formatCurrency(Number(purchaseAdditionalCostPaymentData?.purchase_additional_cost?.amount_payable_due ?? 0)) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('code') }">
+                {{ t('views.purchase_additional_cost_payment.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseAdditionalCostPaymentForm.code"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('code') }"
+                :placeholder="t('views.purchase_additional_cost_payment.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseAdditionalCostPaymentForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('date') }">
+                {{ t('views.purchase_additional_cost_payment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseAdditionalCostPaymentForm.date"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('date') }"
+                :placeholder="t('views.purchase_additional_cost_payment.fields.date')"
+                @change="purchaseAdditionalCostPaymentForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('cash_account_id') }">
+                {{ t('views.purchase_additional_cost_payment.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostPaymentForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('cash_account_id') }"
+                @change="purchaseAdditionalCostPaymentForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('amount') }">
+                {{ t('views.purchase_additional_cost_payment.fields.amount') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseAdditionalCostPaymentForm.amount"
+                :allow-negative="false"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('amount') }"
+                :placeholder="t('views.purchase_additional_cost_payment.fields.amount')"
+                @change="purchaseAdditionalCostPaymentForm.validate('amount')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.amount" />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostPaymentForm.invalid('remarks') }">
+                {{ t('views.purchase_additional_cost_payment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="purchaseAdditionalCostPaymentForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': purchaseAdditionalCostPaymentForm.invalid('remarks') }"
+                :placeholder="t('views.purchase_additional_cost_payment.fields.remarks')"
+                @change="purchaseAdditionalCostPaymentForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostPaymentForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="purchaseAdditionalCostPaymentForm.validating || purchaseAdditionalCostPaymentForm.hasErrors"
+          >
+            <Lucide v-if="purchaseAdditionalCostPaymentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentIndex.vue b/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentIndex.vue
new file mode 100644
index 000000000..1009c67de
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useI18n } from 'vue-i18n';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.purchase_additional_cost_payment.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const purchaseAdditionalCostPaymentNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[purchaseAdditionalCostPaymentNotification]', (el: NotificationElement) => {
+  purchaseAdditionalCostPaymentNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-purchase-additional-cost-payment-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-purchase-additional-cost-payment-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.purchase_additional_cost_payment.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.purchase_additional_cost_payment.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.purchase_additional_cost_payment.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  purchaseAdditionalCostPaymentNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('PURCHASE_ADDITIONAL_COST_PAYMENT_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('PURCHASE_ADDITIONAL_COST_PAYMENT_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="purchaseAdditionalCostPaymentNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentList.vue b/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentList.vue
new file mode 100644
index 000000000..c0d667fb1
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentList.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PurchaseAdditionalCostPaymentService from '@/services/PurchaseAdditionalCostPaymentService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { PurchaseAdditionalCostPayment } from '@/types/models/PurchaseAdditionalCostPayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PurchaseAdditionalCostPaymentReadAnyPaginateRequest } from '@/types/services/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseAdditionalCostPaymentService = new PurchaseAdditionalCostPaymentService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const purchaseAdditionalCostPaymentLists = ref<Collection<Array<PurchaseAdditionalCostPayment>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+  }
+  await getPurchaseAdditionalCostPayments('', true, 1, 10);
+});
+
+const getPurchaseAdditionalCostPayments = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  const searchReq: PurchaseAdditionalCostPaymentReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    purchase_additional_cost_id: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+  const result: ServiceResponse<Collection<Array<PurchaseAdditionalCostPayment>> | null> =
+    await purchaseAdditionalCostPaymentService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    purchaseAdditionalCostPaymentLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getPurchaseAdditionalCostPayments(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!purchaseAdditionalCostPaymentLists.value) return;
+  router.push({
+    name: 'side-menu-purchase-additional-cost-payment-edit',
+    params: { ulid: purchaseAdditionalCostPaymentLists.value.data[idx].ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!purchaseAdditionalCostPaymentLists.value) return;
+  deleteUlid.value = purchaseAdditionalCostPaymentLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+  const result = await purchaseAdditionalCostPaymentService.delete(deleteUlid.value);
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getPurchaseAdditionalCostPayments('', true, 1, 10);
+    showNotification(
+      t('views.purchase_additional_cost_payment.alert.delete_purchase_additional_cost_payment.title'),
+      t('views.purchase_additional_cost_payment.alert.delete_purchase_additional_cost_payment.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="purchaseAdditionalCostPaymentLists"
+        :title="t('views.purchase_additional_cost_payment.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="purchaseAdditionalCostPaymentLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="purchaseAdditionalCostPaymentLists ? purchaseAdditionalCostPaymentLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-5 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ (item as PurchaseAdditionalCostPayment).code }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_payment.fields.purchase_additional_cost') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseAdditionalCostPayment).purchase_additional_cost?.code ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_payment.fields.amount') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PurchaseAdditionalCostPayment).amount ?? 0)) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_payment.fields.cash_account') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseAdditionalCostPayment).cash_account?.name ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-5 self-start md:pl-3">
+            <div v-if="expandDetail === index" class="rounded-md border border-slate-200/60 p-4 text-xs dark:border-darkmode-400">
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_payment.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as PurchaseAdditionalCostPayment).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost_payment.fields.remarks') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseAdditionalCostPayment).remarks ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-2 self-center flex justify-end items-center gap-2 pt-2 md:flex-col">
+            <Button size="sm" variant="outline-secondary" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">Are you sure?</div>
+        <div class="mt-2 text-slate-500">This action cannot be undone.</div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostCreate.vue b/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostCreate.vue
new file mode 100644
index 000000000..38498915d
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostCreate.vue
@@ -0,0 +1,511 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import PurchaseAdditionalCostService from '@/services/PurchaseAdditionalCostService';
+import PurchaseService from '@/services/PurchaseService';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { type Purchase } from '@/types/models/Purchase';
+import { type PurchaseAdditionalCostCategory } from '@/types/models/PurchaseAdditionalCostCategory';
+import { type CashAccount } from '@/types/models/CashAccount';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const purchaseAdditionalCostService = new PurchaseAdditionalCostService();
+const purchaseService = new PurchaseService();
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const cashAccountService = new CashAccountService();
+const cacheServices = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.purchase_additional_cost.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_additional_cost.field_groups.purchase_additional_cost_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const purchaseAdditionalCostForm = purchaseAdditionalCostService.usePurchaseAdditionalCostCreateForm();
+
+const purchaseDDL = ref<Array<DropDownOption> | null>(null);
+const purchaseSearch = ref<string>('');
+const purchaseOptions = computed(() =>
+  (purchaseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(purchaseAdditionalCostForm.amount_paid_immediately ?? 0) + Number(purchaseAdditionalCostForm.amount_payable ?? 0),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([loadPurchaseDDL(), loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const setLocationData = () => {
+  purchaseAdditionalCostForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('PURCHASE_ADDITIONAL_COST_CREATE') as Record<string, unknown>;
+
+  if (!data) return;
+
+  purchaseAdditionalCostForm.setData(data);
+};
+
+const loadPurchaseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: undefined,
+    end_date: undefined,
+    supplier_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    purchaseDDL.value = result.data.data.map((item: Purchase) => ({
+      code: item.id,
+      name: item.supplier?.name ? `${item.code} - ${item.supplier.name}` : item.code,
+    }));
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseAdditionalCostCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: purchaseAdditionalCostForm.purchase_additional_cost_category_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: PurchaseAdditionalCostCategory) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: purchaseAdditionalCostForm.paid_immediately_cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  purchaseAdditionalCostForm.forgetError('code');
+
+  if (purchaseAdditionalCostForm.code === '_AUTO_') {
+    purchaseAdditionalCostForm.setData({ code: '' });
+    return;
+  }
+
+  purchaseAdditionalCostForm.setData({ code: '_AUTO_' });
+};
+
+const clearPurchase = () => {
+  purchaseAdditionalCostForm.setData({ purchase_id: '' });
+  purchaseAdditionalCostForm.forgetError('purchase_id');
+};
+
+const clearCategory = () => {
+  purchaseAdditionalCostForm.setData({ purchase_additional_cost_category_id: '' });
+  purchaseAdditionalCostForm.forgetError('purchase_additional_cost_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  purchaseAdditionalCostForm.setData({ paid_immediately_cash_account_id: '' });
+  purchaseAdditionalCostForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = purchaseAdditionalCostForm.errors as Record<
+    string,
+    string | string[]
+  >;
+
+  if (amount_total) {
+    purchaseAdditionalCostForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_payable') => {
+  clearAmountTotalError();
+  purchaseAdditionalCostForm.validate(field);
+};
+
+const onSubmit = async () => {
+  if (purchaseAdditionalCostForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseAdditionalCostForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await purchaseAdditionalCostForm
+    .submit()
+    .then(() => {
+      cacheServices.removeLastEntity('PURCHASE_ADDITIONAL_COST_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-purchase-additional-cost-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  purchaseAdditionalCostForm.reset();
+  purchaseAdditionalCostForm.setErrors({});
+  setLocationData();
+  purchaseSearch.value = '';
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  purchaseAdditionalCostForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('PURCHASE_ADDITIONAL_COST_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="purchaseAdditionalCostForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('purchase_id') }">
+                {{ t('views.purchase_additional_cost.fields.purchase') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostForm.purchase_id"
+                v-model:search="purchaseSearch"
+                :options="purchaseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('purchase_id') }"
+                @change="purchaseAdditionalCostForm.validate('purchase_id')"
+                @search="loadPurchaseDDL"
+                @clear="clearPurchase"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.purchase_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('code') }">
+                {{ t('views.purchase_additional_cost.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseAdditionalCostForm.code"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('code') }"
+                :placeholder="t('views.purchase_additional_cost.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseAdditionalCostForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('date') }">
+                {{ t('views.purchase_additional_cost.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseAdditionalCostForm.date"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('date') }"
+                :placeholder="t('views.purchase_additional_cost.fields.date')"
+                @change="purchaseAdditionalCostForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('due_days') }">
+                {{ t('views.purchase_additional_cost.fields.due_days') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseAdditionalCostForm.due_days"
+                type="number"
+                min="0"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('due_days') }"
+                :placeholder="t('views.purchase_additional_cost.fields.due_days')"
+                @change="purchaseAdditionalCostForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('purchase_additional_cost_category_id') }">
+                {{ t('views.purchase_additional_cost.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostForm.purchase_additional_cost_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('purchase_additional_cost_category_id') }"
+                @change="purchaseAdditionalCostForm.validate('purchase_additional_cost_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.purchase_additional_cost_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.purchase_additional_cost.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('paid_immediately_cash_account_id') }"
+                @change="purchaseAdditionalCostForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('amount_paid_immediately') }">
+                {{ t('views.purchase_additional_cost.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseAdditionalCostForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.purchase_additional_cost.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('amount_payable') }">
+                {{ t('views.purchase_additional_cost.fields.amount_payable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseAdditionalCostForm.amount_payable"
+                :allow-negative="false"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('amount_payable') }"
+                :placeholder="t('views.purchase_additional_cost.fields.amount_payable')"
+                @change="handleAmountChange('amount_payable')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.amount_payable" />
+            </div>
+
+            <div class="col-span-12">
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 p-4 text-sm dark:border-darkmode-400 dark:bg-darkmode-600/40">
+                <div class="flex items-center justify-between gap-4">
+                  <span class="text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_total') }}</span>
+                  <span class="font-medium text-slate-700 dark:text-slate-200">
+                    {{ formatCurrency(amountTotalPreview) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('remarks') }">
+                {{ t('views.purchase_additional_cost.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="purchaseAdditionalCostForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('remarks') }"
+                :placeholder="t('views.purchase_additional_cost.fields.remarks')"
+                @change="purchaseAdditionalCostForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="purchaseAdditionalCostForm.validating || purchaseAdditionalCostForm.hasErrors"
+          >
+            <Lucide v-if="purchaseAdditionalCostForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostEdit.vue b/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostEdit.vue
new file mode 100644
index 000000000..fba782644
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostEdit.vue
@@ -0,0 +1,528 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import PurchaseAdditionalCostService from '@/services/PurchaseAdditionalCostService';
+import PurchaseService from '@/services/PurchaseService';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { type Purchase } from '@/types/models/Purchase';
+import { type PurchaseAdditionalCost } from '@/types/models/PurchaseAdditionalCost';
+import { type PurchaseAdditionalCostCategory } from '@/types/models/PurchaseAdditionalCostCategory';
+import { type CashAccount } from '@/types/models/CashAccount';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const purchaseAdditionalCostService = new PurchaseAdditionalCostService();
+const purchaseService = new PurchaseService();
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const cashAccountService = new CashAccountService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.purchase_additional_cost.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_additional_cost.field_groups.purchase_additional_cost_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const purchaseAdditionalCostForm = purchaseAdditionalCostService.usePurchaseAdditionalCostEditForm(
+  route.params.ulid.toString(),
+);
+
+const purchaseAdditionalCostData = ref<PurchaseAdditionalCost | null>(null);
+
+const purchaseDDL = ref<Array<DropDownOption> | null>(null);
+const purchaseSearch = ref<string>('');
+const purchaseOptions = computed(() =>
+  (purchaseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const paidImmediatelyCashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const paidImmediatelyCashAccountSearch = ref<string>('');
+const paidImmediatelyCashAccountOptions = computed(() =>
+  (paidImmediatelyCashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const amountTotalPreview = computed(() =>
+  Number(purchaseAdditionalCostForm.amount_paid_immediately ?? 0) + Number(purchaseAdditionalCostForm.amount_payable ?? 0),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await Promise.all([loadPurchaseDDL(), loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await purchaseAdditionalCostService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    purchaseAdditionalCostData.value = result.data;
+
+    purchaseAdditionalCostForm.setData({
+      company_id: result.data.company?.id ?? '',
+      branch_id: result.data.branch?.id ?? '',
+      purchase_id: result.data.purchase?.id ?? '',
+      code: result.data.code,
+      date: result.data.date,
+      due_days: result.data.due_days,
+      purchase_additional_cost_category_id: result.data.category?.id ?? '',
+      paid_immediately_cash_account_id: result.data.paid_immediately_cash_account?.id ?? '',
+      amount_paid_immediately: result.data.amount_paid_immediately,
+      amount_payable: result.data.amount_payable,
+      remarks: result.data.remarks ?? '',
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-purchase-additional-cost-list' });
+  }
+};
+
+const loadPurchaseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: undefined,
+    end_date: undefined,
+    supplier_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    purchaseDDL.value = result.data.data.map((item: Purchase) => ({
+      code: item.id,
+      name: item.supplier?.name ? `${item.code} - ${item.supplier.name}` : item.code,
+    }));
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseAdditionalCostCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: purchaseAdditionalCostData.value?.category?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: PurchaseAdditionalCostCategory) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadPaidImmediatelyCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: purchaseAdditionalCostData.value?.paid_immediately_cash_account?.id,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    paidImmediatelyCashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: `${item.code} - ${item.name}`,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  purchaseAdditionalCostForm.forgetError('code');
+
+  if (purchaseAdditionalCostForm.code === '_AUTO_') {
+    purchaseAdditionalCostForm.setData({ code: '' });
+    return;
+  }
+
+  purchaseAdditionalCostForm.setData({ code: '_AUTO_' });
+};
+
+const clearPurchase = () => {
+  purchaseAdditionalCostForm.setData({ purchase_id: '' });
+  purchaseAdditionalCostForm.forgetError('purchase_id');
+};
+
+const clearCategory = () => {
+  purchaseAdditionalCostForm.setData({ purchase_additional_cost_category_id: '' });
+  purchaseAdditionalCostForm.forgetError('purchase_additional_cost_category_id');
+};
+
+const clearPaidImmediatelyCashAccount = () => {
+  purchaseAdditionalCostForm.setData({ paid_immediately_cash_account_id: '' });
+  purchaseAdditionalCostForm.forgetError('paid_immediately_cash_account_id');
+};
+
+const clearAmountTotalError = () => {
+  const { amount_total, ...restErrors } = purchaseAdditionalCostForm.errors as Record<
+    string,
+    string | string[]
+  >;
+
+  if (amount_total) {
+    purchaseAdditionalCostForm.setErrors(restErrors);
+  }
+};
+
+const handleAmountChange = (field: 'amount_paid_immediately' | 'amount_payable') => {
+  clearAmountTotalError();
+  purchaseAdditionalCostForm.validate(field);
+};
+
+const onSubmit = async () => {
+  if (purchaseAdditionalCostForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseAdditionalCostForm.errors)[0];
+
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+
+    return;
+  }
+
+  emits('loading-state', true);
+
+  await purchaseAdditionalCostForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-purchase-additional-cost-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  purchaseAdditionalCostForm.reset();
+  purchaseAdditionalCostForm.setErrors({});
+  purchaseSearch.value = '';
+  categorySearch.value = '';
+  paidImmediatelyCashAccountSearch.value = '';
+  await loadData();
+  await Promise.all([loadPurchaseDDL(), loadCategoryDDL(), loadPaidImmediatelyCashAccountDDL()]);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <form id="purchaseAdditionalCostForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseAdditionalCostForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('purchase_id') }">
+                {{ t('views.purchase_additional_cost.fields.purchase') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostForm.purchase_id"
+                v-model:search="purchaseSearch"
+                :options="purchaseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('purchase_id') }"
+                @change="purchaseAdditionalCostForm.validate('purchase_id')"
+                @search="loadPurchaseDDL"
+                @clear="clearPurchase"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.purchase_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('code') }">
+                {{ t('views.purchase_additional_cost.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseAdditionalCostForm.code"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('code') }"
+                :placeholder="t('views.purchase_additional_cost.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseAdditionalCostForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('date') }">
+                {{ t('views.purchase_additional_cost.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseAdditionalCostForm.date"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('date') }"
+                :placeholder="t('views.purchase_additional_cost.fields.date')"
+                @change="purchaseAdditionalCostForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('due_days') }">
+                {{ t('views.purchase_additional_cost.fields.due_days') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseAdditionalCostForm.due_days"
+                type="number"
+                min="0"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('due_days') }"
+                :placeholder="t('views.purchase_additional_cost.fields.due_days')"
+                @change="purchaseAdditionalCostForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('purchase_additional_cost_category_id') }">
+                {{ t('views.purchase_additional_cost.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostForm.purchase_additional_cost_category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('purchase_additional_cost_category_id') }"
+                @change="purchaseAdditionalCostForm.validate('purchase_additional_cost_category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.purchase_additional_cost_category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('paid_immediately_cash_account_id') }">
+                {{ t('views.purchase_additional_cost.fields.paid_immediately_cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseAdditionalCostForm.paid_immediately_cash_account_id"
+                v-model:search="paidImmediatelyCashAccountSearch"
+                :options="paidImmediatelyCashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('paid_immediately_cash_account_id') }"
+                @change="purchaseAdditionalCostForm.validate('paid_immediately_cash_account_id')"
+                @search="loadPaidImmediatelyCashAccountDDL"
+                @clear="clearPaidImmediatelyCashAccount"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.paid_immediately_cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('amount_paid_immediately') }">
+                {{ t('views.purchase_additional_cost.fields.amount_paid_immediately') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseAdditionalCostForm.amount_paid_immediately"
+                :allow-negative="false"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('amount_paid_immediately') }"
+                :placeholder="t('views.purchase_additional_cost.fields.amount_paid_immediately')"
+                @change="handleAmountChange('amount_paid_immediately')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.amount_paid_immediately" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('amount_payable') }">
+                {{ t('views.purchase_additional_cost.fields.amount_payable') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseAdditionalCostForm.amount_payable"
+                :allow-negative="false"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('amount_payable') }"
+                :placeholder="t('views.purchase_additional_cost.fields.amount_payable')"
+                @change="handleAmountChange('amount_payable')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.amount_payable" />
+            </div>
+
+            <div class="col-span-12">
+              <div class="rounded-md border border-slate-200/60 bg-slate-50 p-4 text-sm dark:border-darkmode-400 dark:bg-darkmode-600/40">
+                <div class="grid grid-cols-12 gap-3">
+                  <div class="col-span-12 md:col-span-4">
+                    <div class="text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_payable_paid') }}</div>
+                    <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                      {{ formatCurrency(Number(purchaseAdditionalCostData?.amount_payable_paid ?? 0)) }}
+                    </div>
+                  </div>
+                  <div class="col-span-12 md:col-span-4">
+                    <div class="text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_payable_due') }}</div>
+                    <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                      {{ formatCurrency(Number(purchaseAdditionalCostData?.amount_payable_due ?? 0)) }}
+                    </div>
+                  </div>
+                  <div class="col-span-12 md:col-span-4">
+                    <div class="text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_total') }}</div>
+                    <div class="mt-1 font-medium text-slate-700 dark:text-slate-200">
+                      {{ formatCurrency(amountTotalPreview) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': purchaseAdditionalCostForm.invalid('remarks') }">
+                {{ t('views.purchase_additional_cost.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="purchaseAdditionalCostForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': purchaseAdditionalCostForm.invalid('remarks') }"
+                :placeholder="t('views.purchase_additional_cost.fields.remarks')"
+                @change="purchaseAdditionalCostForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="purchaseAdditionalCostForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="purchaseAdditionalCostForm.validating || purchaseAdditionalCostForm.hasErrors"
+          >
+            <Lucide v-if="purchaseAdditionalCostForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostIndex.vue b/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostIndex.vue
new file mode 100644
index 000000000..a99bf711c
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostIndex.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useI18n } from 'vue-i18n';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.purchase_additional_cost.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const purchaseAdditionalCostNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[purchaseAdditionalCostNotification]', (el: NotificationElement) => {
+  purchaseAdditionalCostNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-purchase-additional-cost-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-purchase-additional-cost-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.purchase_additional_cost.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.purchase_additional_cost.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.purchase_additional_cost.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  purchaseAdditionalCostNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('PURCHASE_ADDITIONAL_COST_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('PURCHASE_ADDITIONAL_COST_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="purchaseAdditionalCostNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostList.vue b/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostList.vue
new file mode 100644
index 000000000..4af8449e8
--- /dev/null
+++ b/web/src/pages/purchase-additional-cost/PurchaseAdditionalCostList.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PurchaseAdditionalCostService from '@/services/PurchaseAdditionalCostService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { PurchaseAdditionalCost } from '@/types/models/PurchaseAdditionalCost';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PurchaseAdditionalCostReadAnyPaginateRequest } from '@/types/services/purchase-additional-cost/PurchaseAdditionalCostRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseAdditionalCostService = new PurchaseAdditionalCostService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder', 'show-notification']);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const purchaseAdditionalCostLists = ref<Collection<Array<PurchaseAdditionalCost>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+  }
+  await getPurchaseAdditionalCosts('', true, 1, 10);
+});
+
+const getPurchaseAdditionalCosts = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  const searchReq: PurchaseAdditionalCostReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    purchase_id: null,
+    purchase_additional_cost_category_id: null,
+    is_amount_payable_paid_off: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+  const result: ServiceResponse<Collection<Array<PurchaseAdditionalCost>> | null> =
+    await purchaseAdditionalCostService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    purchaseAdditionalCostLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getPurchaseAdditionalCosts(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!purchaseAdditionalCostLists.value) return;
+  router.push({
+    name: 'side-menu-purchase-additional-cost-edit',
+    params: { ulid: purchaseAdditionalCostLists.value.data[idx].ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!purchaseAdditionalCostLists.value) return;
+  deleteUlid.value = purchaseAdditionalCostLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+  const result = await purchaseAdditionalCostService.delete(deleteUlid.value);
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getPurchaseAdditionalCosts('', true, 1, 10);
+    showNotification(
+      t('views.purchase_additional_cost.alert.delete_purchase_additional_cost.title'),
+      t('views.purchase_additional_cost.alert.delete_purchase_additional_cost.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="purchaseAdditionalCostLists"
+        :title="t('views.purchase_additional_cost.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="purchaseAdditionalCostLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="purchaseAdditionalCostLists ? purchaseAdditionalCostLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-5 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ (item as PurchaseAdditionalCost).code }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost.fields.purchase') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseAdditionalCost).purchase?.code ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost.fields.category') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseAdditionalCost).category?.name ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_total') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PurchaseAdditionalCost).amount_total ?? 0)) }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-5 self-start md:pl-3">
+            <div v-if="expandDetail === index" class="rounded-md border border-slate-200/60 p-4 text-xs dark:border-darkmode-400">
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as PurchaseAdditionalCost).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_paid_immediately') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PurchaseAdditionalCost).amount_paid_immediately ?? 0)) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost.fields.amount_payable_due') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as PurchaseAdditionalCost).amount_payable_due ?? 0)) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_additional_cost.fields.is_amount_payable_paid_off') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseAdditionalCost).is_amount_payable_paid_off ? 'Yes' : 'No' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-2 self-center flex justify-end items-center gap-2 pt-2 md:flex-col">
+            <Button size="sm" variant="outline-secondary" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">Are you sure?</div>
+        <div class="mt-2 text-slate-500">This action cannot be undone.</div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderCreate.vue b/web/src/pages/purchase-order/PurchaseOrderCreate.vue
new file mode 100644
index 000000000..99d88ebbe
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderCreate.vue
@@ -0,0 +1,2253 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTime,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormErrorMessages,
+  FormSelect,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import ProductUnitPickerDialog from '@/components/Product/ProductUnitPickerDialog.vue';
+import CacheService from '@/services/CacheService';
+import CashAccountService from '@/services/CashAccountService';
+import ProductService from '@/services/ProductService';
+import PurchaseOrderService from '@/services/PurchaseOrderService';
+import SupplierService from '@/services/SupplierService';
+import VatProfileService from '@/services/VatProfileService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { DropDownOption } from '@/types/models/DropDownOption';
+import { NotificationData } from '@/types/models/NotificationData';
+import {
+  PurchaseOrderDownPaymentNestedStoreRequest,
+  PurchaseOrderDownPaymentRefundNestedStoreRequest,
+  PurchaseOrderGlobalDiscountNestedStoreRequest,
+  PurchaseOrderItemDiscountNestedStoreRequest,
+  PurchaseOrderItemNestedStoreRequest,
+} from '@/types/services/purchase-order/PurchaseOrderRequest';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+
+type PurchaseOrderItemFormItem = PurchaseOrderItemNestedStoreRequest & {
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_image_url?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  vat_profile_name?: string | null;
+};
+
+type ProductUnitOption = {
+  product_unit_id: string;
+  product_unit_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  price: number;
+  product_unit_is_price_include_vat: boolean;
+  vat_profile_id: string | null;
+  vat_profile_name: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+};
+
+type VatProfileOption = {
+  code: string;
+  name: string;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const purchaseOrderService = new PurchaseOrderService();
+const supplierService = new SupplierService();
+const vatProfileService = new VatProfileService();
+const cashAccountService = new CashAccountService();
+const productService = new ProductService();
+const cacheService = new CacheService();
+
+const purchaseOrderForm = purchaseOrderService.usePurchaseOrderCreateForm();
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.purchase_order.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.purchase_order.field_groups.purchase_order_data', state: CardState.Expanded },
+  { title: 'views.purchase_order.field_groups.items', state: CardState.Expanded },
+  { title: 'views.purchase_order.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref<string>('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<VatProfileOption> | null>(null);
+const vatProfileSearch = ref<string>('');
+const vatProfileOptions = computed(() =>
+  (vatProfileDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showProductUnitModal = ref<boolean>(false);
+const productSearchText = ref<string>('');
+const isSearchingProductUnit = ref<boolean>(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+const editingProductUnitIndex = ref<number | null>(null);
+const productUnitQtyToFocus = ref<number | null>(null);
+const purchaseOrderItemDiscountsExpanded = ref<boolean[]>([]);
+const viewportWidth = ref<number>(window.innerWidth);
+
+const productUnitDialogColumns = [
+  {
+    key: 'unit_name',
+    label: t('views.product.table.cols.unit'),
+  },
+  {
+    key: 'conversion_value',
+    label: t('views.purchase_order.fields.product_unit_conversion_value'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+  {
+    key: 'price',
+    label: t('views.purchase_order.fields.product_unit_price'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+];
+
+const currentItemLayout = computed<'sm' | 'md' | 'lg'>(() => {
+  if (viewportWidth.value >= 1024) return 'lg';
+  if (viewportWidth.value >= 768) return 'md';
+  return 'sm';
+});
+
+const discountTypeOptions = [
+  { value: 'PERCENTAGE', label: 'Percentage' },
+  { value: 'NOMINAL', label: 'Nominal' },
+];
+
+const purchaseOrderItemsForm = computed<PurchaseOrderItemFormItem[]>(
+  () => purchaseOrderForm.items as PurchaseOrderItemFormItem[],
+);
+const purchaseOrderGlobalDiscountsForm = computed<PurchaseOrderGlobalDiscountNestedStoreRequest[]>(
+  () => purchaseOrderForm.global_discounts as PurchaseOrderGlobalDiscountNestedStoreRequest[],
+);
+
+const isGlobalDiscountEditorExpanded = ref(false);
+const isTotalsBreakdownExpanded = ref(false);
+const purchaseOrderDownPaymentsForm = computed<PurchaseOrderDownPaymentNestedStoreRequest[]>(
+  () => purchaseOrderForm.down_payments as PurchaseOrderDownPaymentNestedStoreRequest[],
+);
+const isDownPaymentEditorExpanded = ref(false);
+const purchaseOrderRefundedDownPaymentsForm = computed<PurchaseOrderDownPaymentRefundNestedStoreRequest[]>(
+  () => purchaseOrderForm.refunded_down_payments as PurchaseOrderDownPaymentRefundNestedStoreRequest[],
+);
+const isRefundedDownPaymentEditorExpanded = ref(false);
+
+const invalidPurchaseOrderField = (field: string) => purchaseOrderForm.invalid(field as any);
+const validatePurchaseOrderField = (field: string) => purchaseOrderForm.validate(field as any);
+const getPurchaseOrderFieldErrors = (field: string) =>
+  (purchaseOrderForm.errors as Record<string, string | undefined>)[field];
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+watch(
+  purchaseOrderForm,
+  debounce((newValue) => {
+    cacheService.setLastEntity('PURCHASE_ORDER_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+const syncViewportWidth = () => {
+  viewportWidth.value = window.innerWidth;
+};
+
+onMounted(async () => {
+  syncViewportWidth();
+  window.addEventListener('resize', syncViewportWidth);
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+
+  purchaseOrderForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  await Promise.all([loadSupplierDDL(), loadVatProfileDDL(), loadCashAccountDDL()]);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncViewportWidth);
+});
+
+const setCode = () => {
+  purchaseOrderForm.forgetError('code');
+  purchaseOrderForm.setData({
+    code: purchaseOrderForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const setDownPaymentCode = (index: number) => {
+  purchaseOrderForm.forgetError(`down_payments.${index}.code` as any);
+  purchaseOrderDownPaymentsForm.value[index].code =
+    purchaseOrderDownPaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const setRefundedDownPaymentCode = (index: number) => {
+  purchaseOrderForm.forgetError(`refunded_down_payments.${index}.code` as any);
+  purchaseOrderRefundedDownPaymentsForm.value[index].code =
+    purchaseOrderRefundedDownPaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadVatProfileDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+      vat_rate: Number(item.vat_rate ?? 0),
+      vat_base_numerator: Number(item.vat_base_numerator ?? 1),
+      vat_base_denominator: Number(item.vat_base_denominator ?? 1),
+    }));
+  }
+
+  purchaseOrderItemsForm.value.forEach((item) => {
+    appendVatProfileOption({
+      id: item.vat_profile_id,
+      name: item.vat_profile_name,
+      vat_rate: item.vat_rate,
+      vat_base_numerator: item.vat_base_numerator,
+      vat_base_denominator: item.vat_base_denominator,
+    });
+  });
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    is_bank: undefined,
+    include_id: undefined,
+    with_remaining_balance: undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearSupplier = () => {
+  purchaseOrderForm.setData({ supplier_id: null });
+  purchaseOrderForm.forgetError('supplier_id');
+  purchaseOrderForm.validate('supplier_id');
+};
+
+const appendVatProfileOption = (
+  vatProfile?: {
+    id?: string | null;
+    name?: string | null;
+    vat_rate?: number | null;
+    vat_base_numerator?: number | null;
+    vat_base_denominator?: number | null;
+  } | null,
+) => {
+  if (!vatProfile?.id) return;
+
+  const currentOptions = vatProfileDDL.value ?? [];
+  if (currentOptions.some((option) => option.code === vatProfile.id)) return;
+
+  currentOptions.push({
+    code: vatProfile.id,
+    name: vatProfile.name ?? vatProfile.id,
+    vat_rate: Number(vatProfile.vat_rate ?? 0),
+    vat_base_numerator: Number(vatProfile.vat_base_numerator ?? 1),
+    vat_base_denominator: Number(vatProfile.vat_base_denominator ?? 1),
+  });
+
+  vatProfileDDL.value = [...currentOptions];
+};
+
+const applyVatProfileToItem = (
+  item: PurchaseOrderItemFormItem,
+  vatProfileId: string | null,
+) => {
+  item.vat_profile_id = vatProfileId;
+
+  const selectedVatProfile = (vatProfileDDL.value ?? []).find((vatProfile) => vatProfile.code === vatProfileId);
+
+  if (!selectedVatProfile) {
+    item.vat_profile_name = null;
+    item.vat_rate = 0;
+    item.vat_base_numerator = 1;
+    item.vat_base_denominator = 1;
+    return;
+  }
+
+  item.vat_profile_name = selectedVatProfile.name;
+  item.vat_rate = selectedVatProfile.vat_rate;
+  item.vat_base_numerator = selectedVatProfile.vat_base_numerator;
+  item.vat_base_denominator = selectedVatProfile.vat_base_denominator;
+};
+
+const clearVatProfile = (index: number) => {
+  const item = purchaseOrderItemsForm.value[index];
+  if (!item) return;
+  applyVatProfileToItem(item, null);
+  purchaseOrderForm.validate(`items.${index}.vat_profile_id` as any);
+};
+
+const syncVatProfile = (index: number) => {
+  const item = purchaseOrderItemsForm.value[index];
+  if (!item) return;
+
+  applyVatProfileToItem(item, item.vat_profile_id ?? null);
+  purchaseOrderForm.validate(`items.${index}.vat_profile_id` as any);
+};
+
+const clearCashAccount = (index: number) => {
+  const downPayment = purchaseOrderDownPaymentsForm.value[index];
+  if (!downPayment) return;
+  downPayment.cash_account_id = '';
+  purchaseOrderForm.validate(`down_payments.${index}.cash_account_id` as any);
+};
+
+const clearRefundedCashAccount = (index: number) => {
+  const refundedDownPayment = purchaseOrderRefundedDownPaymentsForm.value[index];
+  if (!refundedDownPayment) return;
+  refundedDownPayment.cash_account_id = '';
+  purchaseOrderForm.validate(`refunded_down_payments.${index}.cash_account_id` as any);
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('PURCHASE_ORDER_CREATE') as Record<string, unknown>;
+  if (!data) return;
+  purchaseOrderForm.setData(data);
+  purchaseOrderItemDiscountsExpanded.value = purchaseOrderItemsForm.value.map(
+    (item) => item.product_unit_price_discounts.length > 0,
+  );
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    default_vat_profile_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: undefined,
+    refresh: true,
+    limit: 50,
+  });
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((product: any) => {
+      const units: any[] = product.product_units || [];
+      const baseUnitName =
+        units.find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+      return units.map((unit: any) => ({
+        product_unit_id: unit.id,
+        product_unit_code: unit.code,
+        product_name: product.name,
+        product_image_url: product.main_product_image?.url ?? null,
+        unit_name: unit.unit?.name ?? '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(unit.conversion_value ?? 1),
+        price: Number(unit.price ?? 0),
+        product_unit_is_price_include_vat: Boolean(product.is_price_include_vat),
+        vat_profile_id: product.default_vat_profile?.id ?? null,
+        vat_profile_name: product.default_vat_profile?.name ?? null,
+        vat_rate: Number(product.default_vat_profile?.vat_rate ?? 0),
+        vat_base_numerator: Number(product.default_vat_profile?.vat_base_numerator ?? 1),
+        vat_base_denominator: Number(product.default_vat_profile?.vat_base_denominator ?? 1),
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const openAddProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  editingProductUnitIndex.value = null;
+  showProductUnitModal.value = true;
+};
+
+const openChangeProductUnit = (index: number) => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  editingProductUnitIndex.value = index;
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  let vatProfileId: string | null = null;
+  let vatProfileName: string | null = null;
+  let vatRate = 0;
+  let vatBaseNumerator = 1;
+  let vatBaseDenominator = 1;
+
+  if (option.vat_profile_id) {
+    vatProfileId = option.vat_profile_id;
+    vatProfileName = option.vat_profile_name;
+    vatRate = option.vat_rate;
+    vatBaseNumerator = option.vat_base_numerator;
+    vatBaseDenominator = option.vat_base_denominator;
+
+    appendVatProfileOption({
+      id: vatProfileId,
+      name: vatProfileName,
+      vat_rate: vatRate,
+      vat_base_numerator: vatBaseNumerator,
+      vat_base_denominator: vatBaseDenominator,
+    });
+  }
+
+  const itemData: PurchaseOrderItemFormItem = {
+    qty: 1,
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_product_image_url: option.product_image_url,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.base_unit_name,
+    product_unit_conversion_value: option.conversion_value,
+    product_unit_price: option.price,
+    product_unit_price_discounts: [],
+    subtotal_discounts: [],
+    product_unit_is_price_include_vat: option.product_unit_is_price_include_vat,
+    vat_profile_id: vatProfileId,
+    vat_profile_name: vatProfileName,
+    vat_rate: vatRate,
+    vat_base_numerator: vatBaseNumerator,
+    vat_base_denominator: vatBaseDenominator,
+    remarks: '',
+  };
+
+  let targetIndex: number;
+
+  if (editingProductUnitIndex.value === null) {
+    purchaseOrderForm.items.push(itemData as any);
+    targetIndex = purchaseOrderForm.items.length - 1;
+    purchaseOrderItemDiscountsExpanded.value[targetIndex] = false;
+  } else {
+    const currentItem = purchaseOrderItemsForm.value[editingProductUnitIndex.value];
+    purchaseOrderItemsForm.value[editingProductUnitIndex.value] = {
+      ...currentItem,
+      ...itemData,
+      product_unit_price_discounts: currentItem.product_unit_price_discounts,
+      subtotal_discounts: currentItem.subtotal_discounts,
+    };
+    targetIndex = editingProductUnitIndex.value;
+    purchaseOrderItemDiscountsExpanded.value[targetIndex] =
+      purchaseOrderItemDiscountsExpanded.value[targetIndex] ??
+      (currentItem.product_unit_price_discounts.length > 0);
+  }
+
+  showProductUnitModal.value = false;
+  editingProductUnitIndex.value = null;
+  productUnitQtyToFocus.value = targetIndex;
+
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const handleProductUnitModalAfterLeave = () => {
+  const index = productUnitQtyToFocus.value;
+  productUnitQtyToFocus.value = null;
+
+  if (index === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`purchase-order-item-qty-${index}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const resequence = (items: Array<{ sequence: number }>) => {
+  items.forEach((item, index) => {
+    item.sequence = index + 1;
+  });
+};
+
+const addGlobalDiscount = () => {
+  purchaseOrderGlobalDiscountsForm.value.push({
+    sequence: purchaseOrderGlobalDiscountsForm.value.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeGlobalDiscount = (index: number) => {
+  purchaseOrderGlobalDiscountsForm.value.splice(index, 1);
+  resequence(purchaseOrderGlobalDiscountsForm.value);
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('global_discounts.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const addItemPriceDiscount = (index: number) => {
+  purchaseOrderItemDiscountsExpanded.value[index] = true;
+  purchaseOrderItemsForm.value[index].product_unit_price_discounts.push({
+    sequence: purchaseOrderItemsForm.value[index].product_unit_price_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemPriceDiscount = (index: number, discountIndex: number) => {
+  purchaseOrderItemsForm.value[index].product_unit_price_discounts.splice(discountIndex, 1);
+  resequence(purchaseOrderItemsForm.value[index].product_unit_price_discounts);
+};
+
+const addItemSubtotalDiscount = (index: number) => {
+  purchaseOrderItemsForm.value[index].subtotal_discounts.push({
+    sequence: purchaseOrderItemsForm.value[index].subtotal_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemSubtotalDiscount = (index: number, discountIndex: number) => {
+  purchaseOrderItemsForm.value[index].subtotal_discounts.splice(discountIndex, 1);
+  resequence(purchaseOrderItemsForm.value[index].subtotal_discounts);
+};
+
+const removeProductUnit = (index: number) => {
+  purchaseOrderItemsForm.value.splice(index, 1);
+  purchaseOrderItemDiscountsExpanded.value.splice(index, 1);
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const togglePurchaseOrderItemDiscounts = (index: number) => {
+  purchaseOrderItemDiscountsExpanded.value[index] = !purchaseOrderItemDiscountsExpanded.value[index];
+};
+
+const addDownPayment = () => {
+  purchaseOrderDownPaymentsForm.value.push({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    amount_allocated: 0,
+    remarks: '',
+  });
+};
+
+const removeDownPayment = (index: number) => {
+  purchaseOrderDownPaymentsForm.value.splice(index, 1);
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('down_payments.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const addRefundedDownPayment = () => {
+  purchaseOrderRefundedDownPaymentsForm.value.push({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removeRefundedDownPayment = (index: number) => {
+  purchaseOrderRefundedDownPaymentsForm.value.splice(index, 1);
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('refunded_down_payments.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const getItemUnitPriceAfterDiscountPreview = (item: PurchaseOrderItemFormItem) => {
+  return item.product_unit_price_discounts.reduce((currentPrice, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextPrice = discount.discount_type === 'PERCENTAGE'
+      ? currentPrice - ((currentPrice * discountValue) / 100)
+      : currentPrice - discountValue;
+
+    return Math.max(nextPrice, 0);
+  }, Number(item.product_unit_price || 0));
+};
+
+const getItemUnitPriceSubtotalAfterDiscountPreview = (item: PurchaseOrderItemFormItem) =>
+  Number(item.qty || 0) * getItemUnitPriceAfterDiscountPreview(item);
+
+const getItemSubtotalAfterDiscountPreview = (item: PurchaseOrderItemFormItem) => {
+  return item.subtotal_discounts.reduce((currentSubtotal, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextSubtotal = discount.discount_type === 'PERCENTAGE'
+      ? currentSubtotal - ((currentSubtotal * discountValue) / 100)
+      : currentSubtotal - discountValue;
+
+    return Math.max(nextSubtotal, 0);
+  }, getItemUnitPriceSubtotalAfterDiscountPreview(item));
+};
+
+const getItemsSubtotalAfterDiscountPreview = () =>
+  purchaseOrderItemsForm.value.reduce((total, item) => total + getItemSubtotalAfterDiscountPreview(item), 0);
+
+const getPurchaseOrderGlobalDiscountPreview = () => {
+  let totalDiscount = 0;
+
+  purchaseOrderGlobalDiscountsForm.value.forEach((discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const currentTotal = Math.max(getItemsSubtotalAfterDiscountPreview() - totalDiscount, 0);
+    const appliedDiscount = discount.discount_type === 'PERCENTAGE'
+      ? (currentTotal * discountValue) / 100
+      : discountValue;
+
+    totalDiscount += Math.min(Math.max(appliedDiscount, 0), currentTotal);
+  });
+
+  return totalDiscount;
+};
+
+const getItemGlobalDiscountPreview = (item: PurchaseOrderItemFormItem, itemIndex: number) => {
+  const totalBeforeGlobalDiscount = getItemsSubtotalAfterDiscountPreview();
+  const totalGlobalDiscount = getPurchaseOrderGlobalDiscountPreview();
+
+  if (totalBeforeGlobalDiscount <= 0 || totalGlobalDiscount <= 0) {
+    return 0;
+  }
+
+  const allocations = purchaseOrderItemsForm.value.map((currentItem, index) => {
+    if (index === purchaseOrderItemsForm.value.length - 1) {
+      return 0;
+    }
+
+    return totalGlobalDiscount * (getItemSubtotalAfterDiscountPreview(currentItem) / totalBeforeGlobalDiscount);
+  });
+
+  const allocatedBeforeCurrent = allocations
+    .slice(0, itemIndex)
+    .reduce((total, allocation) => total + allocation, 0);
+
+  if (itemIndex === purchaseOrderItemsForm.value.length - 1) {
+    return Math.max(totalGlobalDiscount - allocatedBeforeCurrent, 0);
+  }
+
+  return Math.min(Math.max(allocations[itemIndex] || 0, 0), getItemSubtotalAfterDiscountPreview(item));
+};
+
+const getItemSubtotalAfterGlobalDiscountPreview = (item: PurchaseOrderItemFormItem, itemIndex: number) =>
+  Math.max(
+    getItemSubtotalAfterDiscountPreview(item) - getItemGlobalDiscountPreview(item, itemIndex),
+    0,
+  );
+
+const getItemVatBasePreview = (item: PurchaseOrderItemFormItem, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+  const vatBaseFactor = Number(item.vat_base_denominator || 0) > 0
+    ? Number(item.vat_base_numerator || 0) / Number(item.vat_base_denominator || 1)
+    : 0;
+
+  if (subtotalAfterGlobalDiscount <= 0 || vatRate <= 0 || vatBaseFactor <= 0) {
+    return 0;
+  }
+
+  let taxableBase = subtotalAfterGlobalDiscount;
+
+  if (item.product_unit_is_price_include_vat) {
+    taxableBase = taxableBase / (1 + (vatRate / 100));
+  }
+
+  return taxableBase * vatBaseFactor;
+};
+
+const getItemVatPreview = (item: PurchaseOrderItemFormItem, itemIndex: number) => {
+  const vatBase = getItemVatBasePreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+
+  if (vatBase <= 0 || vatRate <= 0) {
+    return 0;
+  }
+
+  return vatBase * (vatRate / 100);
+};
+
+const getItemTotalBeforeRoundingPreview = (item: PurchaseOrderItemFormItem, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+
+  if (item.product_unit_is_price_include_vat) {
+    return subtotalAfterGlobalDiscount;
+  }
+
+  return subtotalAfterGlobalDiscount + getItemVatPreview(item, itemIndex);
+};
+
+const getItemAmountPayablePreview = (item: PurchaseOrderItemFormItem) => {
+  const itemIndex = purchaseOrderItemsForm.value.indexOf(item);
+
+  if (itemIndex < 0) {
+    return 0;
+  }
+
+  return getItemTotalBeforeRoundingPreview(item, itemIndex);
+};
+
+const getPurchaseOrderItemTotalAfterGlobalDiscountPreview = () =>
+  purchaseOrderItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseOrderVatBasePreview = () =>
+  purchaseOrderItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemVatBasePreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseOrderVatPreview = () =>
+  purchaseOrderItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemVatPreview(item, itemIndex),
+    0,
+  );
+
+const formatCurrencyPreviewValue = (value: number) => Number(value.toFixed(2));
+const formatCompactNumberValue = (value: number | string, precision = 4) =>
+  formatCurrency(Number(Number(value ?? 0).toFixed(precision)));
+
+const getTotalAmountPayableBeforeRoundingPreview = () =>
+  purchaseOrderItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemTotalBeforeRoundingPreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseOrderAmountPayablePreview = () =>
+  getTotalAmountPayableBeforeRoundingPreview() + Number(purchaseOrderForm.rounding || 0);
+
+const getDownPaymentsTotalPreview = () =>
+  purchaseOrderDownPaymentsForm.value.reduce(
+    (total, downPayment) => total + Math.max(Number(downPayment.amount || 0), 0),
+    0,
+  );
+
+const getRefundedDownPaymentsTotalPreview = () =>
+  purchaseOrderRefundedDownPaymentsForm.value.reduce(
+    (total, refundedDownPayment) => total + Math.max(Number(refundedDownPayment.amount || 0), 0),
+    0,
+  );
+
+const getAllocatedDownPaymentsTotalPreview = () =>
+  purchaseOrderDownPaymentsForm.value.reduce(
+    (total, downPayment) => total + Math.max(Number(downPayment.amount_allocated ?? 0), 0),
+    0,
+  );
+
+const getAvailableDownPaymentsTotalPreview = () =>
+  getDownPaymentsTotalPreview()
+  - getAllocatedDownPaymentsTotalPreview()
+  - getRefundedDownPaymentsTotalPreview();
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = {
+    title,
+    content,
+  };
+  emits('show-notification', notification);
+};
+
+const onSubmit = async () => {
+  if (purchaseOrderForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseOrderForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const backupItems = [...purchaseOrderItemsForm.value];
+  const backupGlobalDiscounts = [...purchaseOrderGlobalDiscountsForm.value];
+  const backupDownPayments = [...purchaseOrderDownPaymentsForm.value];
+  const backupRefundedDownPayments = [...purchaseOrderRefundedDownPaymentsForm.value];
+
+  const cleanedItems: PurchaseOrderItemNestedStoreRequest[] = purchaseOrderItemsForm.value.map((item) => ({
+    qty: item.qty,
+    product_unit_id: item.product_unit_id,
+    product_unit_conversion_value: item.product_unit_conversion_value,
+    product_unit_price: item.product_unit_price,
+    product_unit_price_discounts: item.product_unit_price_discounts.map((discount) => ({
+      sequence: discount.sequence,
+      discount_type: discount.discount_type,
+      discount_value: discount.discount_value,
+    })),
+    subtotal_discounts: item.subtotal_discounts.map((discount) => ({
+      sequence: discount.sequence,
+      discount_type: discount.discount_type,
+      discount_value: discount.discount_value,
+    })),
+    product_unit_is_price_include_vat: item.product_unit_is_price_include_vat,
+    vat_profile_id: item.vat_profile_id,
+    vat_rate: item.vat_rate,
+    vat_base_numerator: item.vat_base_numerator,
+    vat_base_denominator: item.vat_base_denominator,
+    remarks: item.remarks,
+  }));
+
+  purchaseOrderForm.items = cleanedItems as any;
+  purchaseOrderForm.global_discounts = purchaseOrderGlobalDiscountsForm.value.map((discount) => ({
+    sequence: discount.sequence,
+    discount_type: discount.discount_type,
+    discount_value: discount.discount_value,
+  })) as any;
+  purchaseOrderForm.down_payments = purchaseOrderDownPaymentsForm.value.map((downPayment) => ({
+    code: downPayment.code,
+    date: downPayment.date,
+    cash_account_id: downPayment.cash_account_id,
+    amount: downPayment.amount,
+    remarks: downPayment.remarks,
+  })) as any;
+  purchaseOrderForm.refunded_down_payments = purchaseOrderRefundedDownPaymentsForm.value.map((refundedDownPayment) => ({
+    code: refundedDownPayment.code,
+    date: refundedDownPayment.date,
+    cash_account_id: refundedDownPayment.cash_account_id,
+    amount: refundedDownPayment.amount,
+    remarks: refundedDownPayment.remarks,
+  })) as any;
+
+  emits('loading-state', true);
+
+  try {
+    await purchaseOrderForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(t('views.purchase_order.alert.create.title'), t('views.purchase_order.alert.create.message'));
+    router.push({ name: 'side-menu-purchase-order-list' });
+  } catch (error) {
+    purchaseOrderForm.items = backupItems as any;
+    purchaseOrderForm.global_discounts = backupGlobalDiscounts as any;
+    purchaseOrderForm.down_payments = backupDownPayments as any;
+    purchaseOrderForm.refunded_down_payments = backupRefundedDownPayments as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="purchaseOrderForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <!-- card: company and branch context -->
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <!-- company info -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseOrderForm.company_id" />
+            </div>
+            <!-- branch info -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseOrderForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- card: purchase order header information -->
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <!-- purchase order code -->
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('code') }">
+                {{ t('views.purchase_order.fields.code') }}
+              </FormLabel>
+              <FormInputCode v-model="purchaseOrderForm.code"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('code') }"
+                :placeholder="t('views.purchase_order.fields.code')" @set-auto="setCode"
+                @change="purchaseOrderForm.validate('code')" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.code" />
+            </div>
+            <!-- purchase order date -->
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('date') }">
+                {{ t('views.purchase_order.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto v-model="purchaseOrderForm.date"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('date') }"
+                :placeholder="t('views.purchase_order.fields.date')" @change="purchaseOrderForm.validate('date')" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.date" />
+            </div>
+            <!-- purchase order due days -->
+            <div class="col-span-12 md:col-span-6 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('due_days') }">
+                {{ t('views.purchase_order.fields.due_days') }}
+              </FormLabel>
+              <FormInput v-model="purchaseOrderForm.due_days" type="number" min="0"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('due_days') }"
+                @change="purchaseOrderForm.validate('due_days')" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.due_days" />
+            </div>
+            <!-- purchase order supplier -->
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('supplier_id') }">
+                {{ t('views.purchase_order.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="purchaseOrderForm.supplier_id" v-model:search="supplierSearch"
+                :options="supplierOptions" :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('supplier_id') }"
+                @change="purchaseOrderForm.validate('supplier_id')" @search="loadSupplierDDL" @clear="clearSupplier" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.supplier_id" />
+            </div>
+            <!-- purchase order remarks -->
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('remarks') }">
+                {{ t('views.purchase_order.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea v-model="purchaseOrderForm.remarks"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('remarks') }"
+                @change="purchaseOrderForm.validate('remarks')" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- card: purchase order item list and per-item breakdown -->
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="purchaseOrderForm.errors.items" />
+
+          <!-- items: empty state -->
+          <div v-if="purchaseOrderItemsForm.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <!-- items: repeating item blocks -->
+          <div v-else>
+            <div v-for="(item, index) in purchaseOrderItemsForm" :key="`${item.product_unit_id}-${index}`"
+              class="mt-3 border-t border-slate-200/60 pt-5 first:mt-0 first:border-t-0 first:pt-0 dark:border-darkmode-400">
+              <!-- item content: stacked mobile layout -->
+              <div v-if="currentItemLayout === 'sm'" class="grid grid-cols-12 gap-4 gap-y-3">
+                <!-- item image -->
+                <div class="col-span-12">
+                  <div class="form-control border rounded-md px-3">
+                    <div class="flex justify-center">
+                      <ProductImagePreview :image-url="item.product_unit_product_image_url"
+                        wrapper-class="w-16 h-16 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in shrink-0"
+                        icon-class="w-5 h-5 text-slate-400"
+                        :preview-title="item.product_unit_product_name || t('views.purchase_order.fields.product_unit_id')" />
+                    </div>
+                  </div>
+                </div>
+                <!-- item product -->
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_id`) }">
+                    <span>{{ t('views.purchase_order.fields.product_unit_id') }}</span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      #{{ index + 1 }}
+                    </span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      {{ item.product_unit_product_code || '-' }}
+                    </span>
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1 min-w-0">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary" tabindex="-1"
+                        class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary h-[38px] w-[38px]"
+                        @click="openChangeProductUnit(index)">
+                        <Lucide icon="Search" class="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_id`)" />
+                </div>
+                <!-- item qty and unit -->
+                <div class="col-span-12">
+                  <div class="grid grid-cols-2 gap-4">
+                    <!-- item qty -->
+                    <div>
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.qty`) }">
+                        {{ t('views.purchase_order.fields.qty') }}
+                      </FormLabel>
+                      <FormInputCurrency :id="`purchase-order-item-qty-${index}`" v-model="item.qty"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.qty`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.qty`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.qty`)" />
+                    </div>
+                    <!-- item unit -->
+                    <div>
+                      <FormLabel>
+                        {{ t('views.product.table.cols.unit') }}
+                      </FormLabel>
+                      <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                    </div>
+                  </div>
+                  <div v-if="Number(item.product_unit_conversion_value || 1) > 1" class="mt-1 text-right">
+                    <div class="text-sm text-slate-500 dark:text-slate-400">
+                      {{ `${t('views.product.fields.conversion_value')}
+                      ${formatCompactNumberValue(item.product_unit_conversion_value)}
+                      ${item.product_unit_base_unit_name || ''}`.trim() }}
+                    </div>
+                  </div>
+                </div>
+                <!-- item price -->
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }">
+                    {{ t('views.purchase_order.fields.product_unit_price') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                    :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }"
+                    @change="validatePurchaseOrderField(`items.${index}.product_unit_price`)" />
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_price`)" />
+                </div>
+                <!-- item amount payable -->
+                <div class="col-span-12">
+                  <FormLabel>{{ t('views.purchase_order.fields.subtotal_after_discount') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="togglePurchaseOrderItemDiscounts(index)">
+                        {{ purchaseOrderItemDiscountsExpanded[index] ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removeProductUnit(index)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- item content: tablet layout -->
+              <div v-else-if="currentItemLayout === 'md'" class="grid grid-cols-12 gap-4 gap-y-3">
+                <!-- item image -->
+                <div class="col-span-12 md:col-span-3">
+                  <div class="form-control border rounded-md px-3">
+                    <div class="flex justify-center">
+                      <ProductImagePreview :image-url="item.product_unit_product_image_url"
+                        wrapper-class="w-16 h-16 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in shrink-0"
+                        icon-class="w-5 h-5 text-slate-400"
+                        :preview-title="item.product_unit_product_name || t('views.purchase_order.fields.product_unit_id')" />
+                    </div>
+                  </div>
+                </div>
+                <!-- item product -->
+                <div class="col-span-12 md:col-span-9">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_id`) }">
+                    <span>{{ t('views.purchase_order.fields.product_unit_id') }}</span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      #{{ index + 1 }}
+                    </span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      {{ item.product_unit_product_code || '-' }}
+                    </span>
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1 min-w-0">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary" tabindex="-1"
+                        class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary h-[38px] w-[38px]"
+                        @click="openChangeProductUnit(index)">
+                        <Lucide icon="Search" class="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_id`)" />
+                </div>
+                <!-- item qty and unit -->
+                <div class="col-span-12 md:col-span-4">
+                  <div class="grid grid-cols-2 gap-4">
+                    <!-- item qty -->
+                    <div>
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.qty`) }">
+                        {{ t('views.purchase_order.fields.qty') }}
+                      </FormLabel>
+                      <FormInputCurrency :id="`purchase-order-item-qty-${index}`" v-model="item.qty"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.qty`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.qty`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.qty`)" />
+                    </div>
+                    <!-- item unit -->
+                    <div>
+                      <FormLabel>
+                        {{ t('views.product.table.cols.unit') }}
+                      </FormLabel>
+                      <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                    </div>
+                  </div>
+                  <div v-if="Number(item.product_unit_conversion_value || 1) > 1" class="mt-1 text-right">
+                    <div class="text-sm text-slate-500 dark:text-slate-400">
+                      {{ `${t('views.product.fields.conversion_value')}
+                      ${formatCompactNumberValue(item.product_unit_conversion_value)}
+                      ${item.product_unit_base_unit_name || ''}`.trim() }}
+                    </div>
+                  </div>
+                </div>
+                <!-- item price -->
+                <div class="col-span-12 md:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }">
+                    {{ t('views.purchase_order.fields.product_unit_price') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                    :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }"
+                    @change="validatePurchaseOrderField(`items.${index}.product_unit_price`)" />
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_price`)" />
+                </div>
+                <!-- item amount payable -->
+                <div class="col-span-12 md:col-span-4">
+                  <FormLabel>{{ t('views.purchase_order.fields.subtotal_after_discount') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="togglePurchaseOrderItemDiscounts(index)">
+                        {{ purchaseOrderItemDiscountsExpanded[index] ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removeProductUnit(index)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- item content: desktop summary row -->
+              <div v-else class="grid grid-cols-12 gap-4 gap-y-3">
+                <!-- item image -->
+                <div class="col-span-12 lg:col-span-1">
+                  <div class="form-control border rounded-md px-3">
+                    <div class="flex justify-center">
+                      <ProductImagePreview :image-url="item.product_unit_product_image_url"
+                        wrapper-class="w-16 h-16 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in shrink-0"
+                        icon-class="w-5 h-5 text-slate-400"
+                        :preview-title="item.product_unit_product_name || t('views.purchase_order.fields.product_unit_id')" />
+                    </div>
+                  </div>
+                </div>
+                <!-- item product -->
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_id`) }">
+                    <span>{{ t('views.purchase_order.fields.product_unit_id') }}</span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      #{{ index + 1 }}
+                    </span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      {{ item.product_unit_product_code || '-' }}
+                    </span>
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary" tabindex="-1"
+                        class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary h-[38px] w-[38px]"
+                        @click="openChangeProductUnit(index)">
+                        <Lucide icon="Search" class="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_id`)" />
+                </div>
+                <!-- item qty and unit -->
+                <div class="col-span-12 lg:col-span-2">
+                  <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                    <!-- item qty -->
+                    <div>
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.qty`) }">
+                        {{ t('views.purchase_order.fields.qty') }}
+                      </FormLabel>
+                      <FormInputCurrency :id="`purchase-order-item-qty-${index}`" v-model="item.qty"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.qty`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.qty`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.qty`)" />
+                    </div>
+                    <!-- item unit -->
+                    <div>
+                      <FormLabel>
+                        {{ t('views.product.table.cols.unit') }}
+                      </FormLabel>
+                      <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                    </div>
+                  </div>
+                  <div v-if="Number(item.product_unit_conversion_value || 1) > 1" class="mt-1 text-right">
+                    <div class="text-sm text-slate-500 dark:text-slate-400">
+                      {{ `${t('views.product.fields.conversion_value')}
+                      ${formatCompactNumberValue(item.product_unit_conversion_value)}
+                      ${item.product_unit_base_unit_name || ''}`.trim() }}
+                    </div>
+                  </div>
+                </div>
+                <!-- item price -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }">
+                    {{ t('views.purchase_order.fields.product_unit_price') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.product_unit_price`)" />
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_price`)" />
+                </div>
+                <!-- item amount payable -->
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.purchase_order.fields.subtotal_after_discount') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="togglePurchaseOrderItemDiscounts(index)">
+                        {{ purchaseOrderItemDiscountsExpanded[index] ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removeProductUnit(index)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- item details: stacked breakdown panels for mobile and tablet -->
+              <div v-if="currentItemLayout !== 'lg' && purchaseOrderItemDiscountsExpanded[index]"
+                class="mt-4 space-y-4">
+                <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-5">
+                  <!-- stacked panel: price and discount breakdown -->
+                  <div class="font-medium text-sm">{{ t('views.purchase_order.fields.item_price_breakdown') }}</div>
+
+                  <!-- unit price discounts and derived totals -->
+                  <div class="space-y-3">
+                    <div v-if="item.product_unit_price_discounts.length === 0"
+                      class="text-right text-slate-500 text-sm">
+                      {{ t('views.purchase_order.fields.product_unit_price_discounts_empty') }}
+                    </div>
+
+                    <div v-else class="space-y-3">
+                      <div v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                        :key="`${index}-price-mobile-${discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemPriceDiscount(index, discountIndex)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                        <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                        {{ t('components.buttons.create_new') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase_order.fields.price_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase_order.fields.subtotal') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- subtotal discounts and final item subtotal -->
+                  <div class="space-y-3">
+                    <div v-if="item.subtotal_discounts.length === 0" class="text-right text-slate-500 text-sm">
+                      {{ t('views.purchase_order.fields.subtotal_discounts_empty') }}
+                    </div>
+
+                    <div v-else class="space-y-3">
+                      <div v-for="(discount, discountIndex) in item.subtotal_discounts"
+                        :key="`${index}-subtotal-mobile-${discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemSubtotalDiscount(index, discountIndex)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                        <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                        {{ t('components.buttons.create_new') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase_order.fields.subtotal_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-4">
+                  <!-- stacked panel: tax and additional item metadata -->
+                  <div class="font-medium text-sm">{{ t('views.purchase_order.fields.item_additional_details') }}</div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel>{{ t('views.purchase_order.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                      <FormSwitch>
+                        <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                      </FormSwitch>
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_profile_id`) }">
+                        {{ t('views.purchase_order.fields.vat_profile_id') }}
+                      </FormLabel>
+                      <FormSelectSearch v-model="item.vat_profile_id" v-model:search="vatProfileSearch"
+                        :options="vatProfileOptions" :placeholder="t('components.dropdown.placeholder')"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_profile_id`) }"
+                        @change="syncVatProfile(index)" @search="loadVatProfileDDL" @clear="clearVatProfile(index)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_profile_id`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_rate`) }">
+                        {{ t('views.purchase_order.fields.vat_rate') }}
+                      </FormLabel>
+                      <FormInputCurrency v-model="item.vat_rate" :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_rate`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.vat_rate`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_rate`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel
+                        :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_base_numerator`) }">
+                        {{ t('views.purchase_order.fields.vat_base_numerator') }}
+                      </FormLabel>
+                      <FormInput v-model="item.vat_base_numerator" type="number" min="1"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_base_numerator`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.vat_base_numerator`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_base_numerator`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel
+                        :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_base_denominator`) }">
+                        {{ t('views.purchase_order.fields.vat_base_denominator') }}
+                      </FormLabel>
+                      <FormInput v-model="item.vat_base_denominator" type="number" min="1"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_base_denominator`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.vat_base_denominator`)" />
+                      <FormErrorMessages
+                        :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_base_denominator`)" />
+                    </div>
+                    <div class="col-span-12">
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.remarks`) }">
+                        {{ t('views.purchase_order.fields.remarks') }}
+                      </FormLabel>
+                      <FormTextarea v-model="item.remarks"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.remarks`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.remarks`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.remarks`)" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- item details: desktop breakdown panels -->
+              <div v-else-if="purchaseOrderItemDiscountsExpanded[index]" class="mt-4 grid grid-cols-12 gap-4">
+                <div class="col-span-12 lg:col-span-6">
+                  <!-- right panel: tax and additional item metadata -->
+                  <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-4">
+                    <div class="font-medium text-sm">{{ t('views.purchase_order.fields.item_additional_details') }}
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-5">
+                        <FormLabel>{{
+                          t('views.purchase_order.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                        <FormSwitch>
+                          <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                        </FormSwitch>
+                      </div>
+                      <div class="col-span-12 md:col-span-7">
+                        <FormLabel
+                          :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_profile_id`) }">
+                          {{ t('views.purchase_order.fields.vat_profile_id') }}
+                        </FormLabel>
+                        <FormSelectSearch v-model="item.vat_profile_id" v-model:search="vatProfileSearch"
+                          :options="vatProfileOptions" :placeholder="t('components.dropdown.placeholder')"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_profile_id`) }"
+                          @change="syncVatProfile(index)" @search="loadVatProfileDDL" @clear="clearVatProfile(index)" />
+                        <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_profile_id`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_rate`) }">
+                          {{ t('views.purchase_order.fields.vat_rate') }}
+                        </FormLabel>
+                        <FormInputCurrency v-model="item.vat_rate" :allow-negative="false"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_rate`) }"
+                          @change="validatePurchaseOrderField(`items.${index}.vat_rate`)" />
+                        <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_rate`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel
+                          :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_base_numerator`) }">
+                          {{ t('views.purchase_order.fields.vat_base_numerator') }}
+                        </FormLabel>
+                        <FormInput v-model="item.vat_base_numerator" type="number" min="1"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_base_numerator`) }"
+                          @change="validatePurchaseOrderField(`items.${index}.vat_base_numerator`)" />
+                        <FormErrorMessages
+                          :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_base_numerator`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel
+                          :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_base_denominator`) }">
+                          {{ t('views.purchase_order.fields.vat_base_denominator') }}
+                        </FormLabel>
+                        <FormInput v-model="item.vat_base_denominator" type="number" min="1"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_base_denominator`) }"
+                          @change="validatePurchaseOrderField(`items.${index}.vat_base_denominator`)" />
+                        <FormErrorMessages
+                          :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_base_denominator`)" />
+                      </div>
+                      <div class="col-span-12">
+                        <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.remarks`) }">
+                          {{ t('views.purchase_order.fields.remarks') }}
+                        </FormLabel>
+                        <FormTextarea v-model="item.remarks"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.remarks`) }"
+                          @change="validatePurchaseOrderField(`items.${index}.remarks`)" />
+                        <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.remarks`)" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-6">
+                  <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-5">
+                    <!-- left panel: price and discount breakdown -->
+                    <div class="font-medium text-sm">{{ t('views.purchase_order.fields.item_price_breakdown') }}</div>
+
+                    <!-- unit price discounts and derived totals -->
+                    <div class="space-y-3">
+                      <div v-if="item.product_unit_price_discounts.length === 0"
+                        class="text-right text-slate-500 text-sm">
+                        {{ t('views.purchase_order.fields.product_unit_price_discounts_empty') }}
+                      </div>
+
+                      <div v-else class="space-y-3">
+                        <div v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                          :key="`${index}-price-${discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                          <div class="col-span-12 md:col-span-2">
+                            <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                            <FormInput :model-value="discountIndex + 1" readonly />
+                          </div>
+                          <div class="col-span-12 md:col-span-4">
+                            <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                            <FormSelect v-model="discount.discount_type">
+                              <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                                {{ option.label }}
+                              </option>
+                            </FormSelect>
+                          </div>
+                          <div class="col-span-12 md:col-span-6">
+                            <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                            <div class="flex items-start gap-2">
+                              <div class="flex-1">
+                                <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                              </div>
+                              <div class="shrink-0">
+                                <Button type="button" variant="outline-secondary"
+                                  class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                  @click="removeItemPriceDiscount(index, discountIndex)">
+                                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                                </Button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="flex justify-end">
+                        <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                          <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                          {{ t('components.buttons.create_new') }}
+                        </Button>
+                      </div>
+
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                          {{ t('views.purchase_order.fields.price_after_discount') }}
+                        </div>
+                        <div class="col-span-12 md:col-span-8">
+                          <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                        </div>
+                      </div>
+
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                          {{ t('views.purchase_order.fields.subtotal') }}
+                        </div>
+                        <div class="col-span-12 md:col-span-8">
+                          <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)"
+                            readonly />
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- subtotal discounts and final item subtotal -->
+                    <div class="space-y-3">
+                      <div v-if="item.subtotal_discounts.length === 0" class="text-right text-slate-500 text-sm">
+                        {{ t('views.purchase_order.fields.subtotal_discounts_empty') }}
+                      </div>
+
+                      <div v-else class="space-y-3">
+                        <div v-for="(discount, discountIndex) in item.subtotal_discounts"
+                          :key="`${index}-subtotal-${discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                          <div class="col-span-12 md:col-span-2">
+                            <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                            <FormInput :model-value="discountIndex + 1" readonly />
+                          </div>
+                          <div class="col-span-12 md:col-span-4">
+                            <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                            <FormSelect v-model="discount.discount_type">
+                              <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                                {{ option.label }}
+                              </option>
+                            </FormSelect>
+                          </div>
+                          <div class="col-span-12 md:col-span-6">
+                            <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                            <div class="flex items-start gap-2">
+                              <div class="flex-1">
+                                <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                              </div>
+                              <div class="shrink-0">
+                                <Button type="button" variant="outline-secondary"
+                                  class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                  @click="removeItemSubtotalDiscount(index, discountIndex)">
+                                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                                </Button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="flex justify-end">
+                        <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                          <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                          {{ t('components.buttons.create_new') }}
+                        </Button>
+                      </div>
+
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                          {{ t('views.purchase_order.fields.subtotal_after_discount') }}
+                        </div>
+                        <div class="col-span-12 md:col-span-8">
+                          <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="openAddProductUnit">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <!-- card: financial summary -->
+      <template #card-items-3>
+        <div class="p-5 space-y-4">
+          <!-- summary card: item totals, global discounts, and down payments -->
+          <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-4">
+            <!-- summary: total amount payable of all items after item-level discounts -->
+            <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+              <!-- summary spacer: keeps totals aligned to the right on desktop -->
+              <div class="col-span-12 lg:col-span-9"></div>
+              <div class="col-span-12 lg:col-span-3">
+                <FormLabel>{{ t('views.purchase_order.fields.items_subtotal_after_discount') }}</FormLabel>
+                <FormInputCurrency :model-value="getItemsSubtotalAfterDiscountPreview()" readonly />
+              </div>
+            </div>
+
+            <!-- summary: adjustments, totals, and payment flow -->
+            <div class="space-y-4">
+              <!-- global discounts: editor -->
+              <div v-if="isGlobalDiscountEditorExpanded" class="space-y-4">
+                <FormErrorMessages :messages="purchaseOrderForm.errors.global_discounts" />
+
+                <!-- global discounts: empty state -->
+                <div v-if="purchaseOrderGlobalDiscountsForm.length === 0" class="text-right text-slate-500 text-sm">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <!-- global discounts: list -->
+                <div v-else class="space-y-3">
+                  <div v-for="(discount, index) in purchaseOrderGlobalDiscountsForm" :key="`global-discount-${index}`"
+                    class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 lg:col-span-6">
+
+                    </div>
+                    <div class="col-span-12 md:col-span-2 lg:col-span-1">
+                      <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                      <FormInput :model-value="index + 1" readonly />
+                    </div>
+                    <div class="col-span-12 md:col-span-3 lg:col-span-3">
+                      <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                      <FormSelect v-model="discount.discount_type">
+                        <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                          {{ option.label }}
+                        </option>
+                      </FormSelect>
+                    </div>
+                    <div class="col-span-12 md:col-span-3 lg:col-span-2">
+                      <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                      <div class="flex items-start gap-2">
+                        <div class="flex-1 min-w-0">
+                          <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                        </div>
+                        <div class="shrink-0">
+                          <Button type="button" variant="outline-secondary"
+                            class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                            @click="removeGlobalDiscount(index)">
+                            <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- global discounts: add action -->
+                <div class="flex justify-end">
+                  <Button type="button" variant="outline-primary" @click="addGlobalDiscount">
+                    <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                    {{ t('components.buttons.create_new') }}
+                  </Button>
+                </div>
+              </div>
+
+              <!-- global discounts: collapsed summary row and expand trigger -->
+              <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                <!-- summary spacer: keeps the numeric field aligned with other totals -->
+                <div class="col-span-12 lg:col-span-9"></div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.purchase_order.fields.global_discount_total') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="isGlobalDiscountEditorExpanded = !isGlobalDiscountEditorExpanded">
+                        {{ isGlobalDiscountEditorExpanded ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getPurchaseOrderGlobalDiscountPreview()" readonly />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <template v-if="isTotalsBreakdownExpanded">
+                <!-- summary: total after global discount -->
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.item_total_after_global_discount') }}</FormLabel>
+                    <FormInputCurrency :model-value="getPurchaseOrderItemTotalAfterGlobalDiscountPreview()" readonly />
+                  </div>
+                </div>
+
+                <!-- summary: vat base -->
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.vat_base') }}</FormLabel>
+                    <FormInputCurrency :model-value="formatCurrencyPreviewValue(getPurchaseOrderVatBasePreview())"
+                      readonly />
+                  </div>
+                </div>
+
+                <!-- summary: vat -->
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.vat') }}</FormLabel>
+                    <FormInputCurrency :model-value="formatCurrencyPreviewValue(getPurchaseOrderVatPreview())"
+                      readonly />
+                  </div>
+                </div>
+
+                <!-- summary: rounding adjustment before amount payable -->
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('rounding') }">
+                      {{ t('views.purchase_order.fields.rounding') }}
+                    </FormLabel>
+                    <FormInputCurrency v-model="purchaseOrderForm.rounding"
+                      :class="{ 'border-danger': purchaseOrderForm.invalid('rounding') }"
+                      @change="purchaseOrderForm.validate('rounding')" />
+                    <FormErrorMessages :messages="purchaseOrderForm.errors.rounding" />
+                  </div>
+                </div>
+              </template>
+
+              <!-- summary: amount payable after applying global discounts and rounding -->
+              <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                <!-- summary spacer: keeps the numeric field aligned with other totals -->
+                <div class="col-span-12 lg:col-span-9"></div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.purchase_order.fields.amount_payable') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="isTotalsBreakdownExpanded = !isTotalsBreakdownExpanded">
+                        {{ isTotalsBreakdownExpanded ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getPurchaseOrderAmountPayablePreview()" readonly />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- summary: down payment editor and aggregates -->
+              <div class="space-y-4">
+                <!-- down payments: editor -->
+                <div v-if="isDownPaymentEditorExpanded" class="space-y-4">
+                  <FormErrorMessages :messages="purchaseOrderForm.errors.down_payments" />
+
+                  <!-- down payments: empty state -->
+                  <div v-if="purchaseOrderDownPaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+
+                  <!-- down payments: list -->
+                  <div v-else class="space-y-4">
+                    <div v-for="(downPayment, index) in purchaseOrderDownPaymentsForm" :key="`down-payment-${index}`"
+                      class="space-y-3">
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <!-- down payment spacer: keeps editor fields aligned to the right side -->
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2"></div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.code`) }">
+                            {{ t('views.purchase_order.fields.code') }}
+                          </FormLabel>
+                          <FormInputCode v-model="downPayment.code"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.code`) }"
+                            :placeholder="t('views.purchase_order.fields.code')" @set-auto="setDownPaymentCode(index)"
+                            @change="validatePurchaseOrderField(`down_payments.${index}.code`)" />
+                          <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.code`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-4">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.date`) }">
+                            {{ t('views.purchase_order.fields.date') }}
+                          </FormLabel>
+                          <FormInputDateTimeAuto v-model="downPayment.date"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.date`) }"
+                            :placeholder="t('views.purchase_order.fields.date')"
+                            @change="validatePurchaseOrderField(`down_payments.${index}.date`)" />
+                          <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.date`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-8 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.cash_account_id`) }">
+                            {{ t('views.purchase_order.fields.cash_account_id') }}
+                          </FormLabel>
+                          <FormSelectSearch v-model="downPayment.cash_account_id" v-model:search="cashAccountSearch"
+                            :options="cashAccountOptions" :placeholder="t('components.dropdown.placeholder')"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.cash_account_id`) }"
+                            @change="validatePurchaseOrderField(`down_payments.${index}.cash_account_id`)"
+                            @search="loadCashAccountDDL" @clear="clearCashAccount(index)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.cash_account_id`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.amount`) }">
+                            {{ t('views.purchase_order.fields.amount') }}
+                          </FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="downPayment.amount" :allow-negative="false"
+                                :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.amount`) }"
+                                @change="validatePurchaseOrderField(`down_payments.${index}.amount`)" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeDownPayment(index)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                          <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.amount`)" />
+                        </div>
+                      </div>
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <!-- down payment spacer: keeps remarks width consistent with fields above -->
+                        <div class="col-span-12 lg:col-span-2"></div>
+                        <div class="col-span-12 lg:col-span-7">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.remarks`) }">
+                            {{ t('views.purchase_order.fields.remarks') }}
+                          </FormLabel>
+                          <FormTextarea v-model="downPayment.remarks"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.remarks`) }"
+                            @change="validatePurchaseOrderField(`down_payments.${index}.remarks`)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.remarks`)" />
+                        </div>
+                        <div class="col-span-12 lg:col-span-3">
+                          <FormLabel>{{ t('views.purchase_order.fields.amount_allocated') }}</FormLabel>
+                          <FormInputCurrency :model-value="Number(downPayment.amount_allocated ?? 0)" readonly />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- down payments: add action -->
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addDownPayment">
+                      <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                      {{ t('components.buttons.create_new') }}
+                    </Button>
+                  </div>
+                </div>
+
+                <!-- down payments: collapsed summary row and expand trigger -->
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <!-- summary spacer: keeps the numeric field aligned with other totals -->
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.amount_paid_down_payment') }}</FormLabel>
+                    <div class="flex items-start gap-2">
+                      <div class="shrink-0">
+                        <Button type="button" variant="outline-secondary"
+                          class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                          @click="isDownPaymentEditorExpanded = !isDownPaymentEditorExpanded">
+                          {{ isDownPaymentEditorExpanded ? '▲' : '▼' }}
+                        </Button>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <FormInputCurrency :model-value="getDownPaymentsTotalPreview()" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div v-if="isRefundedDownPaymentEditorExpanded" class="space-y-4">
+                  <FormErrorMessages :messages="purchaseOrderForm.errors.refunded_down_payments" />
+
+                  <div v-if="purchaseOrderRefundedDownPaymentsForm.length === 0"
+                    class="text-right text-slate-500 text-sm">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+
+                  <div v-else class="space-y-4">
+                    <div v-for="(refundedDownPayment, index) in purchaseOrderRefundedDownPaymentsForm"
+                      :key="`refunded-down-payment-${index}`" class="space-y-3">
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2"></div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.code`) }">
+                            {{ t('views.purchase_order.fields.code') }}
+                          </FormLabel>
+                          <FormInputCode v-model="refundedDownPayment.code"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.code`) }"
+                            :placeholder="t('views.purchase_order.fields.code')"
+                            @set-auto="setRefundedDownPaymentCode(index)"
+                            @change="validatePurchaseOrderField(`refunded_down_payments.${index}.code`)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.code`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-4">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.date`) }">
+                            {{ t('views.purchase_order.fields.date') }}
+                          </FormLabel>
+                          <FormInputDateTimeAuto v-model="refundedDownPayment.date"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.date`) }"
+                            :placeholder="t('views.purchase_order.fields.date')"
+                            @change="validatePurchaseOrderField(`refunded_down_payments.${index}.date`)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.date`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-8 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.cash_account_id`) }">
+                            {{ t('views.purchase_order.fields.cash_account_id') }}
+                          </FormLabel>
+                          <FormSelectSearch v-model="refundedDownPayment.cash_account_id"
+                            v-model:search="cashAccountSearch" :options="cashAccountOptions"
+                            :placeholder="t('components.dropdown.placeholder')"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.cash_account_id`) }"
+                            @change="validatePurchaseOrderField(`refunded_down_payments.${index}.cash_account_id`)"
+                            @search="loadCashAccountDDL" @clear="clearRefundedCashAccount(index)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.cash_account_id`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.amount`) }">
+                            {{ t('views.purchase_order.fields.amount') }}
+                          </FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="refundedDownPayment.amount" :allow-negative="false"
+                                :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.amount`) }"
+                                @change="validatePurchaseOrderField(`refunded_down_payments.${index}.amount`)" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeRefundedDownPayment(index)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.amount`)" />
+                        </div>
+                      </div>
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 lg:col-span-2"></div>
+                        <div class="col-span-12 lg:col-span-10">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.remarks`) }">
+                            {{ t('views.purchase_order.fields.remarks') }}
+                          </FormLabel>
+                          <FormTextarea v-model="refundedDownPayment.remarks"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.remarks`) }"
+                            @change="validatePurchaseOrderField(`refunded_down_payments.${index}.remarks`)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.remarks`)" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addRefundedDownPayment">
+                      <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                      {{ t('components.buttons.create_new') }}
+                    </Button>
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.amount_refunded_down_payment') }}</FormLabel>
+                    <div class="flex items-start gap-2">
+                      <div class="shrink-0">
+                        <Button type="button" variant="outline-secondary"
+                          class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                          @click="isRefundedDownPaymentEditorExpanded = !isRefundedDownPaymentEditorExpanded">
+                          {{ isRefundedDownPaymentEditorExpanded ? '▲' : '▼' }}
+                        </Button>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <FormInputCurrency :model-value="getRefundedDownPaymentsTotalPreview()" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.amount_allocated_down_payment') }}</FormLabel>
+                    <FormInputCurrency :model-value="getAllocatedDownPaymentsTotalPreview()" readonly />
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.amount_available_down_payment') }}</FormLabel>
+                    <FormInputCurrency :model-value="getAvailableDownPaymentsTotalPreview()" readonly />
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- form actions: final submit -->
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="submit" variant="primary" class="w-32 shadow-md"
+            :disabled="purchaseOrderForm.validating || purchaseOrderForm.hasErrors">
+            <Lucide v-if="purchaseOrderForm.validating" icon="Loader" class="w-4 h-4 mr-2 animate-spin" />
+            <template v-else>
+              <Lucide icon="Save" class="w-4 h-4 mr-2" />
+            </template>
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <!-- dialog: product unit picker for add/change item -->
+  <ProductUnitPickerDialog size="xl" panel-class="max-w-5xl" :open="showProductUnitModal"
+    :title="t('views.purchase_order.fields.product_unit_id')" :search-text="productSearchText"
+    :is-searching="isSearchingProductUnit" :options="productUnitOptions" :columns="productUnitDialogColumns"
+    @update:search-text="productSearchText = $event" @search="searchProductUnits"
+    @select="selectProductUnit($event as ProductUnitOption)" @close="showProductUnitModal = false"
+    @after-leave="handleProductUnitModalAfterLeave" />
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderDownPaymentIndex.vue b/web/src/pages/purchase-order/PurchaseOrderDownPaymentIndex.vue
new file mode 100644
index 000000000..41d126283
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderDownPaymentIndex.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import PurchaseOrderDownPaymentList from './PurchaseOrderDownPaymentList.vue';
+
+const { t } = useI18n();
+
+const loading = ref(false);
+const titleView = ref<string>('views.purchase_order_down_payment.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const notificationTitle = ref('');
+const notificationContent = ref('');
+const purchaseOrderDownPaymentNotification = ref<NotificationElement>();
+
+provide('bind[purchaseOrderDownPaymentNotification]', (el: NotificationElement) => {
+  purchaseOrderDownPaymentNotification.value = el;
+});
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  if (state === ViewMode.LIST) {
+    titleView.value = 'views.purchase_order_down_payment.page_title';
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (purchaseOrderDownPaymentNotification.value) {
+    purchaseOrderDownPaymentNotification.value.showToast();
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+
+      <PurchaseOrderDownPaymentList
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="purchaseOrderDownPaymentNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderDownPaymentList.vue b/web/src/pages/purchase-order/PurchaseOrderDownPaymentList.vue
new file mode 100644
index 000000000..23cf8cf01
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderDownPaymentList.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { FormInputDateTime, FormLabel, FormSelect, FormSelectSearch } from '@/components/Base/Form';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PurchaseOrderDownPaymentService from '@/services/PurchaseOrderDownPaymentService';
+import SupplierService from '@/services/SupplierService';
+import CashAccountService from '@/services/CashAccountService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { PurchaseOrderDownPaymentAllocationStatus } from '@/types/enums/PurchaseOrderDownPaymentAllocationStatus';
+import type { PurchaseOrderDownPayment } from '@/types/models/PurchaseOrderDownPayment';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PurchaseOrderDownPaymentReadAnyPaginateRequest } from '@/types/services/purchase-order-down-payment/PurchaseOrderDownPaymentRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const props = withDefaults(defineProps<{
+  presetAllocationStatus?: PurchaseOrderDownPaymentAllocationStatus | null;
+  hideAllocationStatusFilter?: boolean;
+}>(), {
+  presetAllocationStatus: null,
+  hideAllocationStatusFilter: false,
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseOrderDownPaymentService = new PurchaseOrderDownPaymentService();
+const supplierService = new SupplierService();
+const cashAccountService = new CashAccountService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder', 'show-notification']);
+
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref('');
+const selectedSupplierId = ref<string | null>(null);
+const selectedCashAccountId = ref<string | null>(null);
+const selectedAllocationStatus = ref<PurchaseOrderDownPaymentAllocationStatus | ''>(props.presetAllocationStatus ?? '');
+const supplierSearch = ref('');
+const cashAccountSearch = ref('');
+
+const lists = ref<Collection<Array<PurchaseOrderDownPayment>> | null>({
+  data: [],
+  meta: { current_page: 1, from: null, last_page: 0, path: '', per_page: 10, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const allocationStatusDDL = ref<Array<DropDownOption> | null>(null);
+const supplierOptions = computed(() => (supplierDDL.value ?? []).map((item) => ({ value: item.code, label: item.name })));
+const cashAccountOptions = computed(() => (cashAccountDDL.value ?? []).map((item) => ({ value: item.code, label: item.name })));
+const allocationStatusOptions = computed(() => (allocationStatusDDL.value ?? []).map((item) => ({ value: item.code, label: t(item.name) })));
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await Promise.all([loadSupplierDDL(), loadCashAccountDDL(), loadAllocationStatusDDL()]);
+  await getLists('', true, 1, 10);
+});
+
+const getLists = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: PurchaseOrderDownPaymentReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value || undefined,
+    end_date: endDate.value || undefined,
+    supplier_id: selectedSupplierId.value,
+    cash_account_id: selectedCashAccountId.value,
+    allocation_status: selectedAllocationStatus.value || null,
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result = (await purchaseOrderDownPaymentService.readAnyPaginate(
+    request,
+  )) as ServiceResponse<Collection<Array<PurchaseOrderDownPayment>> | null>;
+
+  if (result.success && result.data) {
+    lists.value = result.data;
+  }
+
+  emits('loading-state', false);
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: selectedSupplierId.value ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({ code: item.id, name: item.name }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: any) => ({ code: item.id, name: item.name }));
+  }
+};
+
+const loadAllocationStatusDDL = async () => {
+  const result = await purchaseOrderDownPaymentService.readAllocationStatuses();
+  if (result.success && result.data) {
+    allocationStatusDDL.value = result.data;
+  }
+};
+
+const handleDataListChange = async (emittedData: DataListEmittedData) => {
+  await getLists(emittedData.search.text, true, emittedData.pagination.page, emittedData.pagination.per_page);
+};
+
+const handleFilterChange = async () => {
+  await getLists(searchText.value, true, 1, lists.value?.meta.per_page ?? 10);
+};
+
+const clearSupplierFilter = async () => {
+  selectedSupplierId.value = null;
+  await handleFilterChange();
+};
+
+const clearCashAccountFilter = async () => {
+  selectedCashAccountId.value = null;
+  await handleFilterChange();
+};
+
+const viewSelected = (index: number) => {
+  expandDetail.value = expandDetail.value === index ? null : index;
+};
+
+const editSelected = (index: number) => {
+  const ulid = lists.value?.data?.[index]?.purchase_order?.ulid;
+  if (!ulid) return;
+
+  router.push({
+    name: 'side-menu-purchase-order-edit',
+    params: { ulid },
+  });
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <div class="grid grid-cols-12 gap-4 mb-5">
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.start_date') }}</FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.end_date') }}</FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.supplier_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedSupplierId"
+            v-model:search="supplierSearch"
+            :options="supplierOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="handleFilterChange"
+            @search="loadSupplierDDL"
+            @clear="clearSupplierFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.cash_account_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedCashAccountId"
+            v-model:search="cashAccountSearch"
+            :options="cashAccountOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="handleFilterChange"
+            @search="loadCashAccountDDL"
+            @clear="clearCashAccountFilter"
+          />
+        </div>
+        <div v-if="!props.hideAllocationStatusFilter" class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.filters.down_payment_allocation_status') }}</FormLabel>
+          <FormSelect v-model="selectedAllocationStatus" @change="handleFilterChange">
+            <option value="">{{ t('components.dropdown.placeholder') }}</option>
+            <option v-for="item in allocationStatusOptions" :key="item.value" :value="item.value">{{ item.label }}</option>
+          </FormSelect>
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="lists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="lists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="lists ? lists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-12 lg:col-span-4 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as PurchaseOrderDownPayment).purchase_order?.code ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPayment).purchase_order?.date ? formatDate((item as PurchaseOrderDownPayment).purchase_order?.date as string, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.supplier_id') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPayment).purchase_order?.supplier?.name ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.due_days') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseOrderDownPayment).purchase_order?.due_days ?? 0 }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.remarks') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPayment).purchase_order?.remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-4 self-start md:pr-3 lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.fields.down_payment') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as PurchaseOrderDownPayment).code ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPayment).date ? formatDate((item as PurchaseOrderDownPayment).date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.cash_account_id') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPayment).cash_account?.name ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-5 lg:col-span-3 self-start md:pl-3 lg:pl-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.field_groups.summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.amount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as PurchaseOrderDownPayment).amount ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.amount_allocated') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as PurchaseOrderDownPayment).amount_allocated ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.remarks') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPayment).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-1 md:col-span-1 self-center flex justify-end items-center gap-2 pt-2 md:flex-col lg:flex-col">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+          </div>
+
+          <div v-if="expandDetail === index" class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3">
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 lg:col-span-6 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.field_groups.summary') }}
+                </div>
+                <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.company_id') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as PurchaseOrderDownPayment).company?.name ?? '-' }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.supplier_id') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as PurchaseOrderDownPayment).purchase_order?.supplier?.name ?? '-' }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.amount_available_down_payment') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                    {{ formatCurrency(((item as PurchaseOrderDownPayment).amount ?? 0) - ((item as PurchaseOrderDownPayment).amount_allocated ?? 0)) }}
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-6 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.fields.remarks') }}
+                </div>
+                <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 px-3 py-2 text-slate-700 dark:text-slate-200 break-words min-h-[72px]">
+                  {{ (item as PurchaseOrderDownPayment).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderDownPaymentNotFullyAllocatedIndex.vue b/web/src/pages/purchase-order/PurchaseOrderDownPaymentNotFullyAllocatedIndex.vue
new file mode 100644
index 000000000..c83c7adae
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderDownPaymentNotFullyAllocatedIndex.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import PurchaseOrderDownPaymentList from './PurchaseOrderDownPaymentList.vue';
+import { PurchaseOrderDownPaymentAllocationStatus } from '@/types/enums/PurchaseOrderDownPaymentAllocationStatus';
+
+const { t } = useI18n();
+
+const loading = ref(false);
+const titleView = ref<string>('views.purchase_order_down_payment.page_title_not_fully_allocated');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const notificationTitle = ref('');
+const notificationContent = ref('');
+const purchaseOrderDownPaymentNotification = ref<NotificationElement>();
+
+provide('bind[purchaseOrderDownPaymentNotification]', (el: NotificationElement) => {
+  purchaseOrderDownPaymentNotification.value = el;
+});
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  if (state === ViewMode.LIST) {
+    titleView.value = 'views.purchase_order_down_payment.page_title_not_fully_allocated';
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (purchaseOrderDownPaymentNotification.value) {
+    purchaseOrderDownPaymentNotification.value.showToast();
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+
+      <PurchaseOrderDownPaymentList
+        :preset-allocation-status="PurchaseOrderDownPaymentAllocationStatus.NOT_FULLY_ALLOCATED"
+        :hide-allocation-status-filter="true"
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="purchaseOrderDownPaymentNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderDownPaymentRefundIndex.vue b/web/src/pages/purchase-order/PurchaseOrderDownPaymentRefundIndex.vue
new file mode 100644
index 000000000..4235e095a
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderDownPaymentRefundIndex.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import PurchaseOrderDownPaymentRefundList from './PurchaseOrderDownPaymentRefundList.vue';
+
+const { t } = useI18n();
+
+const loading = ref(false);
+const titleView = ref<string>('views.purchase_order_down_payment_refund.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const notificationTitle = ref('');
+const notificationContent = ref('');
+const purchaseOrderDownPaymentRefundNotification = ref<NotificationElement>();
+
+provide('bind[purchaseOrderDownPaymentRefundNotification]', (el: NotificationElement) => {
+  purchaseOrderDownPaymentRefundNotification.value = el;
+});
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  if (state === ViewMode.LIST) {
+    titleView.value = 'views.purchase_order_down_payment_refund.page_title';
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (purchaseOrderDownPaymentRefundNotification.value) {
+    purchaseOrderDownPaymentRefundNotification.value.showToast();
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+
+      <PurchaseOrderDownPaymentRefundList
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="purchaseOrderDownPaymentRefundNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderDownPaymentRefundList.vue b/web/src/pages/purchase-order/PurchaseOrderDownPaymentRefundList.vue
new file mode 100644
index 000000000..70c2a5262
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderDownPaymentRefundList.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PurchaseOrderDownPaymentRefundService from '@/services/PurchaseOrderDownPaymentRefundService';
+import SupplierService from '@/services/SupplierService';
+import CashAccountService from '@/services/CashAccountService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { PurchaseOrderDownPaymentRefund } from '@/types/models/PurchaseOrderDownPaymentRefund';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PurchaseOrderDownPaymentRefundReadAnyPaginateRequest } from '@/types/services/purchase-order-down-payment-refund/PurchaseOrderDownPaymentRefundRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseOrderDownPaymentRefundService = new PurchaseOrderDownPaymentRefundService();
+const supplierService = new SupplierService();
+const cashAccountService = new CashAccountService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'show-alertplaceholder', 'show-notification']);
+
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref('');
+const selectedSupplierId = ref<string | null>(null);
+const selectedCashAccountId = ref<string | null>(null);
+const supplierSearch = ref('');
+const cashAccountSearch = ref('');
+
+const lists = ref<Collection<Array<PurchaseOrderDownPaymentRefund>> | null>({
+  data: [],
+  meta: { current_page: 1, from: null, last_page: 0, path: '', per_page: 10, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const supplierOptions = computed(() => (supplierDDL.value ?? []).map((item) => ({ value: item.code, label: item.name })));
+const cashAccountOptions = computed(() => (cashAccountDDL.value ?? []).map((item) => ({ value: item.code, label: item.name })));
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await Promise.all([loadSupplierDDL(), loadCashAccountDDL()]);
+  await getLists('', true, 1, 10);
+});
+
+const getLists = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: PurchaseOrderDownPaymentRefundReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value || undefined,
+    end_date: endDate.value || undefined,
+    supplier_id: selectedSupplierId.value,
+    cash_account_id: selectedCashAccountId.value,
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result = (await purchaseOrderDownPaymentRefundService.readAnyPaginate(
+    request,
+  )) as ServiceResponse<Collection<Array<PurchaseOrderDownPaymentRefund>> | null>;
+
+  if (result.success && result.data) {
+    lists.value = result.data;
+  }
+
+  emits('loading-state', false);
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: selectedSupplierId.value ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({ code: item.id, name: item.name }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: any) => ({ code: item.id, name: item.name }));
+  }
+};
+
+const handleDataListChange = async (emittedData: DataListEmittedData) => {
+  await getLists(emittedData.search.text, true, emittedData.pagination.page, emittedData.pagination.per_page);
+};
+
+const handleFilterChange = async () => {
+  await getLists(searchText.value, true, 1, lists.value?.meta.per_page ?? 10);
+};
+
+const clearSupplierFilter = async () => {
+  selectedSupplierId.value = null;
+  await handleFilterChange();
+};
+
+const clearCashAccountFilter = async () => {
+  selectedCashAccountId.value = null;
+  await handleFilterChange();
+};
+
+const viewSelected = (index: number) => {
+  expandDetail.value = expandDetail.value === index ? null : index;
+};
+
+const editSelected = (index: number) => {
+  const ulid = lists.value?.data?.[index]?.purchase_order?.ulid;
+  if (!ulid) return;
+
+  router.push({
+    name: 'side-menu-purchase-order-edit',
+    params: { ulid },
+  });
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <div class="grid grid-cols-12 gap-4 mb-5">
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.start_date') }}</FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.end_date') }}</FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.supplier_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedSupplierId"
+            v-model:search="supplierSearch"
+            :options="supplierOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="handleFilterChange"
+            @search="loadSupplierDDL"
+            @clear="clearSupplierFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.cash_account_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedCashAccountId"
+            v-model:search="cashAccountSearch"
+            :options="cashAccountOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="handleFilterChange"
+            @search="loadCashAccountDDL"
+            @clear="clearCashAccountFilter"
+          />
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="lists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="lists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="lists ? lists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-12 lg:col-span-4 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.fields.refunded_down_payments') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as PurchaseOrderDownPaymentRefund).code }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPaymentRefund).date ? formatDate((item as PurchaseOrderDownPaymentRefund).date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.supplier_id') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPaymentRefund).purchase_order?.supplier?.name ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-4 self-start md:pr-3 lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.field_groups.summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.amount') }}</div>
+                <div class="col-span-5 text-right text-primary font-medium">{{ formatCurrency((item as PurchaseOrderDownPaymentRefund).amount ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.cash_account_id') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPaymentRefund).cash_account?.name ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-5 lg:col-span-3 self-start md:pl-3 lg:pl-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.field_groups.purchase_order_data') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.code') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderDownPaymentRefund).purchase_order?.code ?? '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-1 md:col-span-1 self-center flex justify-end items-center gap-2 pt-2 md:flex-col lg:flex-col">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+          </div>
+
+          <div v-if="expandDetail === index" class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3">
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 lg:col-span-6 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.field_groups.purchase_order_data') }}
+                </div>
+                <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.company_id') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as PurchaseOrderDownPaymentRefund).company?.name ?? '-' }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.supplier_id') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as PurchaseOrderDownPaymentRefund).purchase_order?.supplier?.name ?? '-' }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.code') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as PurchaseOrderDownPaymentRefund).purchase_order?.code ?? '-' }}</div>
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-6 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.fields.remarks') }}
+                </div>
+                <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 px-3 py-2 text-slate-700 dark:text-slate-200 break-words min-h-[72px]">
+                  {{ (item as PurchaseOrderDownPaymentRefund).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderEdit.vue b/web/src/pages/purchase-order/PurchaseOrderEdit.vue
new file mode 100644
index 000000000..4a8cb6ae7
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderEdit.vue
@@ -0,0 +1,2284 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormErrorMessages,
+  FormSelect,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import ProductUnitPickerDialog from '@/components/Product/ProductUnitPickerDialog.vue';
+import CashAccountService from '@/services/CashAccountService';
+import ProductService from '@/services/ProductService';
+import PurchaseOrderService from '@/services/PurchaseOrderService';
+import SupplierService from '@/services/SupplierService';
+import VatProfileService from '@/services/VatProfileService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { DropDownOption } from '@/types/models/DropDownOption';
+import { NotificationData } from '@/types/models/NotificationData';
+import { PurchaseOrder } from '@/types/models/PurchaseOrder';
+import {
+  PurchaseOrderDownPaymentNestedUpdateRequest,
+  PurchaseOrderDownPaymentRefundNestedUpdateRequest,
+  PurchaseOrderGlobalDiscountNestedUpdateRequest,
+  PurchaseOrderItemDiscountNestedUpdateRequest,
+  PurchaseOrderItemNestedUpdateRequest,
+} from '@/types/services/purchase-order/PurchaseOrderRequest';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+
+type PurchaseOrderItemFormItem = PurchaseOrderItemNestedUpdateRequest & {
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_image_url?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  vat_profile_name?: string | null;
+};
+
+type ProductUnitOption = {
+  product_unit_id: string;
+  product_unit_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  price: number;
+  product_unit_is_price_include_vat: boolean;
+  vat_profile_id: string | null;
+  vat_profile_name: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+};
+
+type VatProfileOption = {
+  code: string;
+  name: string;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+};
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const purchaseOrderService = new PurchaseOrderService();
+const supplierService = new SupplierService();
+const vatProfileService = new VatProfileService();
+const cashAccountService = new CashAccountService();
+const productService = new ProductService();
+
+const purchaseOrderForm = purchaseOrderService.usePurchaseOrderEditForm(route.params.ulid as string);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const purchaseOrderData = ref<PurchaseOrder | null>(null);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.purchase_order.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.purchase_order.field_groups.purchase_order_data', state: CardState.Expanded },
+  { title: 'views.purchase_order.field_groups.items', state: CardState.Expanded },
+  { title: 'views.purchase_order.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref<string>('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<VatProfileOption> | null>(null);
+const vatProfileSearch = ref<string>('');
+const vatProfileOptions = computed(() =>
+  (vatProfileDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showProductUnitModal = ref<boolean>(false);
+const productSearchText = ref<string>('');
+const isSearchingProductUnit = ref<boolean>(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+const editingProductUnitIndex = ref<number | null>(null);
+const productUnitQtyToFocus = ref<number | null>(null);
+const purchaseOrderItemDiscountsExpanded = ref<boolean[]>([]);
+const viewportWidth = ref<number>(window.innerWidth);
+
+const productUnitDialogColumns = [
+  {
+    key: 'unit_name',
+    label: t('views.product.table.cols.unit'),
+  },
+  {
+    key: 'conversion_value',
+    label: t('views.purchase_order.fields.product_unit_conversion_value'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+  {
+    key: 'price',
+    label: t('views.purchase_order.fields.product_unit_price'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+];
+
+const currentItemLayout = computed<'sm' | 'md' | 'lg'>(() => {
+  if (viewportWidth.value >= 1024) return 'lg';
+  if (viewportWidth.value >= 768) return 'md';
+  return 'sm';
+});
+
+const discountTypeOptions = [
+  { value: 'PERCENTAGE', label: 'Percentage' },
+  { value: 'NOMINAL', label: 'Nominal' },
+];
+
+const purchaseOrderItemsForm = computed<PurchaseOrderItemFormItem[]>(
+  () => purchaseOrderForm.items as PurchaseOrderItemFormItem[],
+);
+const purchaseOrderGlobalDiscountsForm = computed<PurchaseOrderGlobalDiscountNestedUpdateRequest[]>(
+  () => purchaseOrderForm.global_discounts as PurchaseOrderGlobalDiscountNestedUpdateRequest[],
+);
+const purchaseOrderDownPaymentsForm = computed<PurchaseOrderDownPaymentNestedUpdateRequest[]>(
+  () => purchaseOrderForm.down_payments as PurchaseOrderDownPaymentNestedUpdateRequest[],
+);
+const purchaseOrderRefundedDownPaymentsForm = computed<PurchaseOrderDownPaymentRefundNestedUpdateRequest[]>(
+  () => purchaseOrderForm.refunded_down_payments as PurchaseOrderDownPaymentRefundNestedUpdateRequest[],
+);
+const isGlobalDiscountEditorExpanded = ref(false);
+const isTotalsBreakdownExpanded = ref(false);
+const isDownPaymentEditorExpanded = ref(false);
+const isRefundedDownPaymentEditorExpanded = ref(false);
+
+const invalidPurchaseOrderField = (field: string) => purchaseOrderForm.invalid(field as any);
+const validatePurchaseOrderField = (field: string) => purchaseOrderForm.validate(field as any);
+const getPurchaseOrderFieldErrors = (field: string) =>
+  (purchaseOrderForm.errors as Record<string, string | undefined>)[field];
+
+const syncViewportWidth = () => {
+  viewportWidth.value = window.innerWidth;
+};
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+onMounted(async () => {
+  syncViewportWidth();
+  window.addEventListener('resize', syncViewportWidth);
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  emits('loading-state', true);
+  try {
+    await Promise.all([loadSupplierDDL(), loadVatProfileDDL(), loadCashAccountDDL()]);
+    await loadData();
+    await Promise.all([loadSupplierDDL(), loadVatProfileDDL(), loadCashAccountDDL()]);
+  } finally {
+    emits('loading-state', false);
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncViewportWidth);
+});
+
+const setCode = () => {
+  purchaseOrderForm.forgetError('code');
+  purchaseOrderForm.setData({
+    code: purchaseOrderForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const setDownPaymentCode = (index: number) => {
+  purchaseOrderForm.forgetError(`down_payments.${index}.code` as any);
+  purchaseOrderDownPaymentsForm.value[index].code =
+    purchaseOrderDownPaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const setRefundedDownPaymentCode = (index: number) => {
+  purchaseOrderForm.forgetError(`refunded_down_payments.${index}.code` as any);
+  purchaseOrderRefundedDownPaymentsForm.value[index].code =
+    purchaseOrderRefundedDownPaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const appendDDL = (
+  target: typeof supplierDDL | typeof cashAccountDDL,
+  item?: { id: string; name?: string | null; code?: string | null } | null,
+) => {
+  if (!item?.id) return;
+  const current = target.value ?? [];
+  if (current.find((entry) => entry.code === item.id)) return;
+  current.push({
+    code: item.id,
+    name: item.name ?? item.code ?? item.id,
+  });
+  target.value = [...current];
+};
+
+const appendVatProfileOption = (
+  vatProfile?: {
+    id?: string | null;
+    name?: string | null;
+    vat_rate?: number | null;
+    vat_base_numerator?: number | null;
+    vat_base_denominator?: number | null;
+  } | null,
+) => {
+  if (!vatProfile?.id) return;
+
+  const currentOptions = vatProfileDDL.value ?? [];
+  if (currentOptions.some((option) => option.code === vatProfile.id)) return;
+
+  currentOptions.push({
+    code: vatProfile.id,
+    name: vatProfile.name ?? vatProfile.id,
+    vat_rate: Number(vatProfile.vat_rate ?? 0),
+    vat_base_numerator: Number(vatProfile.vat_base_numerator ?? 1),
+    vat_base_denominator: Number(vatProfile.vat_base_denominator ?? 1),
+  });
+
+  vatProfileDDL.value = [...currentOptions];
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: purchaseOrderData.value?.supplier?.id,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+
+  appendDDL(supplierDDL, purchaseOrderData.value?.supplier);
+};
+
+const loadVatProfileDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+      vat_rate: Number(item.vat_rate ?? 0),
+      vat_base_numerator: Number(item.vat_base_numerator ?? 1),
+      vat_base_denominator: Number(item.vat_base_denominator ?? 1),
+    }));
+  }
+
+  (purchaseOrderData.value?.items ?? []).forEach((item) => appendVatProfileOption({
+    id: item.vat_profile?.id,
+    name: item.vat_profile?.name,
+    vat_rate: item.vat_rate,
+    vat_base_numerator: item.vat_base_numerator,
+    vat_base_denominator: item.vat_base_denominator,
+  }));
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    is_bank: undefined,
+    include_id: undefined,
+    with_remaining_balance: undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+
+  (purchaseOrderData.value?.down_payments ?? []).forEach((item) => appendDDL(cashAccountDDL, item.cash_account));
+  (purchaseOrderData.value?.refunded_down_payments ?? []).forEach((item) => appendDDL(cashAccountDDL, item.cash_account));
+};
+
+const clearSupplier = () => {
+  purchaseOrderForm.setData({ supplier_id: null });
+  purchaseOrderForm.forgetError('supplier_id');
+  purchaseOrderForm.validate('supplier_id');
+};
+
+const applyVatProfileToItem = (
+  item: PurchaseOrderItemFormItem,
+  vatProfileId: string | null,
+) => {
+  item.vat_profile_id = vatProfileId;
+
+  const selectedVatProfile = (vatProfileDDL.value ?? []).find((vatProfile) => vatProfile.code === vatProfileId);
+
+  if (!selectedVatProfile) {
+    item.vat_profile_name = null;
+    item.vat_rate = 0;
+    item.vat_base_numerator = 1;
+    item.vat_base_denominator = 1;
+    return;
+  }
+
+  item.vat_profile_name = selectedVatProfile.name;
+  item.vat_rate = selectedVatProfile.vat_rate;
+  item.vat_base_numerator = selectedVatProfile.vat_base_numerator;
+  item.vat_base_denominator = selectedVatProfile.vat_base_denominator;
+};
+
+const clearVatProfile = (index: number) => {
+  const item = purchaseOrderItemsForm.value[index];
+  if (!item) return;
+  applyVatProfileToItem(item, null);
+  purchaseOrderForm.validate(`items.${index}.vat_profile_id` as any);
+};
+
+const syncVatProfile = (index: number) => {
+  const item = purchaseOrderItemsForm.value[index];
+  if (!item) return;
+
+  applyVatProfileToItem(item, item.vat_profile_id ?? null);
+  purchaseOrderForm.validate(`items.${index}.vat_profile_id` as any);
+};
+
+const clearCashAccount = (index: number) => {
+  const downPayment = purchaseOrderDownPaymentsForm.value[index];
+  if (!downPayment) return;
+  downPayment.cash_account_id = '';
+  purchaseOrderForm.validate(`down_payments.${index}.cash_account_id` as any);
+};
+
+const clearRefundedCashAccount = (index: number) => {
+  const refundedDownPayment = purchaseOrderRefundedDownPaymentsForm.value[index];
+  if (!refundedDownPayment) return;
+  refundedDownPayment.cash_account_id = '';
+  purchaseOrderForm.validate(`refunded_down_payments.${index}.cash_account_id` as any);
+};
+
+const loadData = async () => {
+  const ulid = route.params.ulid as string | undefined;
+  if (!ulid) return;
+
+  const result = await purchaseOrderService.read(ulid);
+
+  if (result.success && result.data) {
+    const data = result.data;
+    purchaseOrderData.value = data;
+
+    const items: PurchaseOrderItemFormItem[] = (data.items || []).map((item: any) => ({
+      id: item.id ?? null,
+      qty: item.qty,
+      product_unit_id: item.product_unit?.id ?? '',
+      product_unit_product_code: item.product_unit?.code ?? '',
+      product_unit_product_name: item.product_unit?.product?.name ?? '',
+      product_unit_product_image_url: item.product_unit?.product?.main_product_image?.url ?? null,
+      product_unit_unit_name: item.product_unit?.unit?.name ?? '',
+      product_unit_base_unit_name: Number(item.product_unit_conversion_value ?? 1) !== 1
+        ? item.product_unit?.product?.base_product_unit?.unit?.name ?? ''
+        : '',
+      product_unit_conversion_value: item.product_unit_conversion_value,
+      product_unit_price: item.product_unit_price,
+      delete_product_unit_price_discount_ids: [],
+      product_unit_price_discounts: (item.product_unit_price_discounts || []).map((discount: any) => ({
+        id: discount.id ?? null,
+        sequence: discount.sequence,
+        discount_type: discount.discount_type,
+        discount_value: discount.discount_value,
+      })),
+      delete_subtotal_discount_ids: [],
+      subtotal_discounts: (item.subtotal_discounts || []).map((discount: any) => ({
+        id: discount.id ?? null,
+        sequence: discount.sequence,
+        discount_type: discount.discount_type,
+        discount_value: discount.discount_value,
+      })),
+      product_unit_is_price_include_vat: item.product_unit_is_price_include_vat,
+      vat_profile_id: item.vat_profile?.id ?? null,
+      vat_profile_name: item.vat_profile?.name ?? null,
+      vat_rate: Number(item.vat_rate ?? 0),
+      vat_base_numerator: item.vat_base_numerator,
+      vat_base_denominator: item.vat_base_denominator,
+      remarks: item.remarks ?? '',
+    }));
+
+    purchaseOrderForm.setData({
+      company_id: data.company.id,
+      branch_id: data.branch.id,
+      code: data.code,
+      date: formatDate(data.date, 'YYYY-MM-DD HH:mm:ss'),
+      due_days: data.due_days,
+      supplier_id: data.supplier?.id ?? null,
+      remarks: data.remarks ?? '',
+      rounding: data.rounding ?? 0,
+      delete_global_discount_ids: [],
+      global_discounts: (data.global_discounts || []).map((discount: any) => ({
+        id: discount.id ?? null,
+        sequence: discount.sequence,
+        discount_type: discount.discount_type,
+        discount_value: discount.discount_value,
+      })) as any,
+      delete_item_ids: [],
+      items: items as any,
+      delete_down_payment_ids: [],
+      down_payments: (data.down_payments || []).map((downPayment: any) => ({
+        id: downPayment.id ?? null,
+        code: downPayment.code,
+        date: formatDate(downPayment.date, 'YYYY-MM-DD HH:mm:ss'),
+        cash_account_id: downPayment.cash_account?.id ?? '',
+        amount: downPayment.amount,
+        amount_allocated: downPayment.amount_allocated ?? 0,
+        remarks: downPayment.remarks ?? '',
+      })) as any,
+      delete_refunded_down_payment_ids: [],
+      refunded_down_payments: (data.refunded_down_payments || []).map((refundedDownPayment: any) => ({
+        id: refundedDownPayment.id ?? null,
+        code: refundedDownPayment.code,
+        date: formatDate(refundedDownPayment.date, 'YYYY-MM-DD HH:mm:ss'),
+        cash_account_id: refundedDownPayment.cash_account?.id ?? '',
+        amount: refundedDownPayment.amount,
+        remarks: refundedDownPayment.remarks ?? '',
+      })) as any,
+    } as any);
+    purchaseOrderItemDiscountsExpanded.value = items.map(() => false);
+  }
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    default_vat_profile_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: undefined,
+    refresh: true,
+    limit: 50,
+  });
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((product: any) => {
+      const units: any[] = product.product_units || [];
+      const baseUnitName =
+        units.find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+      return units.map((unit: any) => ({
+        product_unit_id: unit.id,
+        product_unit_code: unit.code,
+        product_name: product.name,
+        product_image_url: product.main_product_image?.url ?? null,
+        unit_name: unit.unit?.name ?? '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(unit.conversion_value ?? 1),
+        price: Number(unit.price ?? 0),
+        product_unit_is_price_include_vat: Boolean(product.is_price_include_vat),
+        vat_profile_id: product.default_vat_profile?.id ?? null,
+        vat_profile_name: product.default_vat_profile?.name ?? null,
+        vat_rate: Number(product.default_vat_profile?.vat_rate ?? 0),
+        vat_base_numerator: Number(product.default_vat_profile?.vat_base_numerator ?? 1),
+        vat_base_denominator: Number(product.default_vat_profile?.vat_base_denominator ?? 1),
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const openAddProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  editingProductUnitIndex.value = null;
+  showProductUnitModal.value = true;
+};
+
+const openChangeProductUnit = (index: number) => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  editingProductUnitIndex.value = index;
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  let vatProfileId: string | null = null;
+  let vatProfileName: string | null = null;
+  let vatRate = 0;
+  let vatBaseNumerator = 1;
+  let vatBaseDenominator = 1;
+
+  if (option.vat_profile_id) {
+    vatProfileId = option.vat_profile_id;
+    vatProfileName = option.vat_profile_name;
+    vatRate = option.vat_rate;
+    vatBaseNumerator = option.vat_base_numerator;
+    vatBaseDenominator = option.vat_base_denominator;
+
+    appendVatProfileOption({
+      id: vatProfileId,
+      name: vatProfileName,
+      vat_rate: vatRate,
+      vat_base_numerator: vatBaseNumerator,
+      vat_base_denominator: vatBaseDenominator,
+    });
+  }
+
+  const itemData: Partial<PurchaseOrderItemFormItem> = {
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_product_image_url: option.product_image_url,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.conversion_value != 1 ? option.base_unit_name : '',
+    product_unit_conversion_value: option.conversion_value,
+    product_unit_price: option.price,
+    product_unit_is_price_include_vat: option.product_unit_is_price_include_vat,
+    vat_profile_id: vatProfileId,
+    vat_profile_name: vatProfileName,
+    vat_rate: vatRate,
+    vat_base_numerator: vatBaseNumerator,
+    vat_base_denominator: vatBaseDenominator,
+  };
+
+  let targetIndex: number;
+
+  if (editingProductUnitIndex.value === null) {
+    purchaseOrderForm.items.push({
+      id: null,
+      qty: 1,
+      product_unit_id: option.product_unit_id,
+      product_unit_product_code: option.product_unit_code,
+      product_unit_product_name: option.product_name,
+      product_unit_product_image_url: option.product_image_url,
+      product_unit_unit_name: option.unit_name,
+      product_unit_base_unit_name: option.conversion_value != 1 ? option.base_unit_name : '',
+      product_unit_conversion_value: option.conversion_value,
+      product_unit_price: option.price,
+      delete_product_unit_price_discount_ids: [],
+      product_unit_price_discounts: [],
+      delete_subtotal_discount_ids: [],
+      subtotal_discounts: [],
+      product_unit_is_price_include_vat: option.product_unit_is_price_include_vat,
+      vat_profile_id: vatProfileId,
+      vat_profile_name: vatProfileName,
+      vat_rate: vatRate,
+      vat_base_numerator: vatBaseNumerator,
+      vat_base_denominator: vatBaseDenominator,
+      remarks: '',
+    } as any);
+    targetIndex = purchaseOrderForm.items.length - 1;
+    purchaseOrderItemDiscountsExpanded.value[targetIndex] = true;
+  } else {
+    purchaseOrderItemsForm.value[editingProductUnitIndex.value] = {
+      ...purchaseOrderItemsForm.value[editingProductUnitIndex.value],
+      ...itemData,
+    } as PurchaseOrderItemFormItem;
+    targetIndex = editingProductUnitIndex.value;
+  }
+
+  showProductUnitModal.value = false;
+  editingProductUnitIndex.value = null;
+  productUnitQtyToFocus.value = targetIndex;
+
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const handleProductUnitModalAfterLeave = () => {
+  const index = productUnitQtyToFocus.value;
+  productUnitQtyToFocus.value = null;
+  if (index === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`purchase-order-item-qty-${index}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const resequence = (items: Array<{ sequence: number }>) => {
+  items.forEach((item, index) => {
+    item.sequence = index + 1;
+  });
+};
+
+const addGlobalDiscount = () => {
+  purchaseOrderGlobalDiscountsForm.value.push({
+    id: null,
+    sequence: purchaseOrderGlobalDiscountsForm.value.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeGlobalDiscount = (index: number) => {
+  const discount = purchaseOrderGlobalDiscountsForm.value[index];
+  if (discount?.id) {
+    purchaseOrderForm.delete_global_discount_ids.push(discount.id);
+  }
+  purchaseOrderGlobalDiscountsForm.value.splice(index, 1);
+  resequence(purchaseOrderGlobalDiscountsForm.value);
+};
+
+const addItemPriceDiscount = (index: number) => {
+  purchaseOrderItemsForm.value[index].product_unit_price_discounts.push({
+    id: null,
+    sequence: purchaseOrderItemsForm.value[index].product_unit_price_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemPriceDiscount = (index: number, discountIndex: number) => {
+  const discount = purchaseOrderItemsForm.value[index].product_unit_price_discounts[discountIndex];
+  if (discount?.id) {
+    purchaseOrderItemsForm.value[index].delete_product_unit_price_discount_ids.push(discount.id);
+  }
+  purchaseOrderItemsForm.value[index].product_unit_price_discounts.splice(discountIndex, 1);
+  resequence(purchaseOrderItemsForm.value[index].product_unit_price_discounts);
+};
+
+const addItemSubtotalDiscount = (index: number) => {
+  purchaseOrderItemsForm.value[index].subtotal_discounts.push({
+    id: null,
+    sequence: purchaseOrderItemsForm.value[index].subtotal_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemSubtotalDiscount = (index: number, discountIndex: number) => {
+  const discount = purchaseOrderItemsForm.value[index].subtotal_discounts[discountIndex];
+  if (discount?.id) {
+    purchaseOrderItemsForm.value[index].delete_subtotal_discount_ids.push(discount.id);
+  }
+  purchaseOrderItemsForm.value[index].subtotal_discounts.splice(discountIndex, 1);
+  resequence(purchaseOrderItemsForm.value[index].subtotal_discounts);
+};
+
+const removeProductUnit = (index: number) => {
+  const item = purchaseOrderItemsForm.value[index];
+  if (item?.id) {
+    purchaseOrderForm.delete_item_ids.push(item.id);
+  }
+  purchaseOrderItemsForm.value.splice(index, 1);
+  purchaseOrderItemDiscountsExpanded.value.splice(index, 1);
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const togglePurchaseOrderItemDiscounts = (index: number) => {
+  purchaseOrderItemDiscountsExpanded.value[index] = !purchaseOrderItemDiscountsExpanded.value[index];
+};
+
+const addDownPayment = () => {
+  purchaseOrderDownPaymentsForm.value.push({
+    id: null,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    amount_allocated: 0,
+    remarks: '',
+  });
+};
+
+const removeDownPayment = (index: number) => {
+  const downPayment = purchaseOrderDownPaymentsForm.value[index];
+  if (downPayment?.id) {
+    purchaseOrderForm.delete_down_payment_ids.push(downPayment.id);
+  }
+  purchaseOrderDownPaymentsForm.value.splice(index, 1);
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('down_payments.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const addRefundedDownPayment = () => {
+  purchaseOrderRefundedDownPaymentsForm.value.push({
+    id: null,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+};
+
+const removeRefundedDownPayment = (index: number) => {
+  const refundedDownPayment = purchaseOrderRefundedDownPaymentsForm.value[index];
+  if (refundedDownPayment?.id) {
+    purchaseOrderForm.delete_refunded_down_payment_ids.push(refundedDownPayment.id);
+  }
+  purchaseOrderRefundedDownPaymentsForm.value.splice(index, 1);
+  Object.keys(purchaseOrderForm.errors).forEach((key) => {
+    if (key.startsWith('refunded_down_payments.')) {
+      purchaseOrderForm.forgetError(key as any);
+    }
+  });
+};
+
+const getItemUnitPriceAfterDiscountPreview = (item: PurchaseOrderItemFormItem) => {
+  return item.product_unit_price_discounts.reduce((currentPrice, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextPrice = discount.discount_type === 'PERCENTAGE'
+      ? currentPrice - ((currentPrice * discountValue) / 100)
+      : currentPrice - discountValue;
+
+    return Math.max(nextPrice, 0);
+  }, Number(item.product_unit_price || 0));
+};
+
+const getItemUnitPriceSubtotalAfterDiscountPreview = (item: PurchaseOrderItemFormItem) =>
+  Number(item.qty || 0) * getItemUnitPriceAfterDiscountPreview(item);
+
+const getItemSubtotalAfterDiscountPreview = (item: PurchaseOrderItemFormItem) => {
+  return item.subtotal_discounts.reduce((currentSubtotal, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextSubtotal = discount.discount_type === 'PERCENTAGE'
+      ? currentSubtotal - ((currentSubtotal * discountValue) / 100)
+      : currentSubtotal - discountValue;
+
+    return Math.max(nextSubtotal, 0);
+  }, getItemUnitPriceSubtotalAfterDiscountPreview(item));
+};
+
+const getItemsSubtotalAfterDiscountPreview = () =>
+  purchaseOrderItemsForm.value.reduce((total, item) => total + getItemSubtotalAfterDiscountPreview(item), 0);
+
+const getPurchaseOrderGlobalDiscountPreview = () => {
+  let totalDiscount = 0;
+
+  purchaseOrderGlobalDiscountsForm.value.forEach((discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const currentTotal = Math.max(getItemsSubtotalAfterDiscountPreview() - totalDiscount, 0);
+    const appliedDiscount = discount.discount_type === 'PERCENTAGE'
+      ? (currentTotal * discountValue) / 100
+      : discountValue;
+
+    totalDiscount += Math.min(Math.max(appliedDiscount, 0), currentTotal);
+  });
+
+  return totalDiscount;
+};
+
+const getItemGlobalDiscountPreview = (item: PurchaseOrderItemFormItem, itemIndex: number) => {
+  const totalBeforeGlobalDiscount = getItemsSubtotalAfterDiscountPreview();
+  const totalGlobalDiscount = getPurchaseOrderGlobalDiscountPreview();
+
+  if (totalBeforeGlobalDiscount <= 0 || totalGlobalDiscount <= 0) {
+    return 0;
+  }
+
+  const allocations = purchaseOrderItemsForm.value.map((currentItem, index) => {
+    if (index === purchaseOrderItemsForm.value.length - 1) {
+      return 0;
+    }
+
+    return totalGlobalDiscount * (getItemSubtotalAfterDiscountPreview(currentItem) / totalBeforeGlobalDiscount);
+  });
+
+  const allocatedBeforeCurrent = allocations
+    .slice(0, itemIndex)
+    .reduce((total, allocation) => total + allocation, 0);
+
+  if (itemIndex === purchaseOrderItemsForm.value.length - 1) {
+    return Math.max(totalGlobalDiscount - allocatedBeforeCurrent, 0);
+  }
+
+  return Math.min(Math.max(allocations[itemIndex] || 0, 0), getItemSubtotalAfterDiscountPreview(item));
+};
+
+const getItemSubtotalAfterGlobalDiscountPreview = (item: PurchaseOrderItemFormItem, itemIndex: number) =>
+  Math.max(
+    getItemSubtotalAfterDiscountPreview(item) - getItemGlobalDiscountPreview(item, itemIndex),
+    0,
+  );
+
+const getItemVatBasePreview = (item: PurchaseOrderItemFormItem, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+  const vatBaseFactor = Number(item.vat_base_denominator || 0) > 0
+    ? Number(item.vat_base_numerator || 0) / Number(item.vat_base_denominator || 1)
+    : 0;
+
+  if (subtotalAfterGlobalDiscount <= 0 || vatRate <= 0 || vatBaseFactor <= 0) {
+    return 0;
+  }
+
+  let taxableBase = subtotalAfterGlobalDiscount;
+
+  if (item.product_unit_is_price_include_vat) {
+    taxableBase = taxableBase / (1 + (vatRate / 100));
+  }
+
+  return taxableBase * vatBaseFactor;
+};
+
+const getItemVatPreview = (item: PurchaseOrderItemFormItem, itemIndex: number) => {
+  const vatBase = getItemVatBasePreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+
+  if (vatBase <= 0 || vatRate <= 0) {
+    return 0;
+  }
+
+  return vatBase * (vatRate / 100);
+};
+
+const getItemTotalBeforeRoundingPreview = (item: PurchaseOrderItemFormItem, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+
+  if (item.product_unit_is_price_include_vat) {
+    return subtotalAfterGlobalDiscount;
+  }
+
+  return subtotalAfterGlobalDiscount + getItemVatPreview(item, itemIndex);
+};
+
+const getItemAmountPayablePreview = (item: PurchaseOrderItemFormItem) => {
+  const itemIndex = purchaseOrderItemsForm.value.indexOf(item);
+
+  if (itemIndex < 0) {
+    return 0;
+  }
+
+  return getItemTotalBeforeRoundingPreview(item, itemIndex);
+};
+
+const getPurchaseOrderItemTotalAfterGlobalDiscountPreview = () =>
+  purchaseOrderItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseOrderVatBasePreview = () =>
+  purchaseOrderItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemVatBasePreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseOrderVatPreview = () =>
+  purchaseOrderItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemVatPreview(item, itemIndex),
+    0,
+  );
+
+const formatCurrencyPreviewValue = (value: number) => Number(value.toFixed(2));
+const formatCompactNumberValue = (value: number | string, precision = 4) =>
+  formatCurrency(Number(Number(value ?? 0).toFixed(precision)));
+
+const getTotalAmountPayableBeforeRoundingPreview = () =>
+  purchaseOrderItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemTotalBeforeRoundingPreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseOrderAmountPayablePreview = () =>
+  getTotalAmountPayableBeforeRoundingPreview() + Number(purchaseOrderForm.rounding || 0);
+
+const getDownPaymentsTotalPreview = () =>
+  purchaseOrderDownPaymentsForm.value.reduce(
+    (total, downPayment) => total + Math.max(Number(downPayment.amount || 0), 0),
+    0,
+  );
+
+const getRefundedDownPaymentsTotalPreview = () =>
+  purchaseOrderRefundedDownPaymentsForm.value.reduce(
+    (total, refundedDownPayment) => total + Math.max(Number(refundedDownPayment.amount || 0), 0),
+    0,
+  );
+
+const getAllocatedDownPaymentsTotalPreview = () =>
+  purchaseOrderDownPaymentsForm.value.reduce(
+    (total, downPayment) => total + Math.max(Number(downPayment.amount_allocated ?? 0), 0),
+    0,
+  );
+
+const getAvailableDownPaymentsTotalPreview = () =>
+  getDownPaymentsTotalPreview()
+  - getAllocatedDownPaymentsTotalPreview()
+  - getRefundedDownPaymentsTotalPreview();
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = {
+    title,
+    content,
+  };
+  emits('show-notification', notification);
+};
+
+const onSubmit = async () => {
+  if (purchaseOrderForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseOrderForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const backupItems = [...purchaseOrderItemsForm.value];
+  const backupGlobalDiscounts = [...purchaseOrderGlobalDiscountsForm.value];
+  const backupDownPayments = [...purchaseOrderDownPaymentsForm.value];
+  const backupRefundedDownPayments = [...purchaseOrderRefundedDownPaymentsForm.value];
+
+  const cleanedItems: PurchaseOrderItemNestedUpdateRequest[] = purchaseOrderItemsForm.value.map((item) => ({
+    id: item.id,
+    qty: item.qty,
+    product_unit_id: item.product_unit_id,
+    product_unit_conversion_value: item.product_unit_conversion_value,
+    product_unit_price: item.product_unit_price,
+    delete_product_unit_price_discount_ids: item.delete_product_unit_price_discount_ids,
+    product_unit_price_discounts: item.product_unit_price_discounts.map((discount: PurchaseOrderItemDiscountNestedUpdateRequest) => ({
+      id: discount.id,
+      sequence: discount.sequence,
+      discount_type: discount.discount_type,
+      discount_value: discount.discount_value,
+    })),
+    delete_subtotal_discount_ids: item.delete_subtotal_discount_ids,
+    subtotal_discounts: item.subtotal_discounts.map((discount: PurchaseOrderItemDiscountNestedUpdateRequest) => ({
+      id: discount.id,
+      sequence: discount.sequence,
+      discount_type: discount.discount_type,
+      discount_value: discount.discount_value,
+    })),
+    product_unit_is_price_include_vat: item.product_unit_is_price_include_vat,
+    vat_profile_id: item.vat_profile_id,
+    vat_rate: item.vat_rate,
+    vat_base_numerator: item.vat_base_numerator,
+    vat_base_denominator: item.vat_base_denominator,
+    remarks: item.remarks,
+  }));
+
+  purchaseOrderForm.items = cleanedItems as any;
+  purchaseOrderForm.global_discounts = purchaseOrderGlobalDiscountsForm.value.map((discount) => ({
+    id: discount.id,
+    sequence: discount.sequence,
+    discount_type: discount.discount_type,
+    discount_value: discount.discount_value,
+  })) as any;
+  purchaseOrderForm.down_payments = purchaseOrderDownPaymentsForm.value.map((downPayment) => ({
+    id: downPayment.id,
+    code: downPayment.code,
+    date: downPayment.date,
+    cash_account_id: downPayment.cash_account_id,
+    amount: downPayment.amount,
+    remarks: downPayment.remarks,
+  })) as any;
+  purchaseOrderForm.refunded_down_payments = purchaseOrderRefundedDownPaymentsForm.value.map((refundedDownPayment) => ({
+    id: refundedDownPayment.id,
+    code: refundedDownPayment.code,
+    date: refundedDownPayment.date,
+    cash_account_id: refundedDownPayment.cash_account_id,
+    amount: refundedDownPayment.amount,
+    remarks: refundedDownPayment.remarks,
+  })) as any;
+
+  emits('loading-state', true);
+
+  try {
+    await purchaseOrderForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(t('views.purchase_order.alert.update.title'), t('views.purchase_order.alert.update.message'));
+    router.push({ name: 'side-menu-purchase-order-list' });
+  } catch (error) {
+    purchaseOrderForm.items = backupItems as any;
+    purchaseOrderForm.global_discounts = backupGlobalDiscounts as any;
+    purchaseOrderForm.down_payments = backupDownPayments as any;
+    purchaseOrderForm.refunded_down_payments = backupRefundedDownPayments as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="purchaseOrderForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseOrderForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseOrderForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('code') }">
+                {{ t('views.purchase_order.fields.code') }}
+              </FormLabel>
+              <FormInputCode v-model="purchaseOrderForm.code"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('code') }"
+                :placeholder="t('views.purchase_order.fields.code')" @set-auto="setCode"
+                @change="purchaseOrderForm.validate('code')" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.code" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('date') }">
+                {{ t('views.purchase_order.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto v-model="purchaseOrderForm.date"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('date') }"
+                :placeholder="t('views.purchase_order.fields.date')" @change="purchaseOrderForm.validate('date')" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.date" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('due_days') }">
+                {{ t('views.purchase_order.fields.due_days') }}
+              </FormLabel>
+              <FormInput v-model="purchaseOrderForm.due_days" type="number" min="0"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('due_days') }"
+                @change="purchaseOrderForm.validate('due_days')" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('supplier_id') }">
+                {{ t('views.purchase_order.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="purchaseOrderForm.supplier_id" v-model:search="supplierSearch"
+                :options="supplierOptions" :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('supplier_id') }"
+                @change="purchaseOrderForm.validate('supplier_id')" @search="loadSupplierDDL" @clear="clearSupplier" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.supplier_id" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('remarks') }">
+                {{ t('views.purchase_order.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea v-model="purchaseOrderForm.remarks"
+                :class="{ 'border-danger': purchaseOrderForm.invalid('remarks') }"
+                @change="purchaseOrderForm.validate('remarks')" />
+              <FormErrorMessages :messages="purchaseOrderForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <FormErrorMessages :messages="purchaseOrderForm.errors.items" />
+
+          <div v-if="purchaseOrderItemsForm.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else>
+            <div v-for="(item, index) in purchaseOrderItemsForm" :key="`${item.id ?? item.product_unit_id}-${index}`"
+              class="mt-3 border-t border-slate-200/60 pt-5 first:mt-0 first:border-t-0 first:pt-0 dark:border-darkmode-400">
+              <!-- item content: stacked mobile layout -->
+              <div v-if="currentItemLayout === 'sm'" class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12">
+                  <div class="form-control border rounded-md px-3">
+                    <div class="flex justify-center">
+                      <ProductImagePreview :image-url="item.product_unit_product_image_url"
+                        wrapper-class="w-16 h-16 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in shrink-0"
+                        icon-class="w-5 h-5 text-slate-400"
+                        :preview-title="item.product_unit_product_name || t('views.purchase_order.fields.product_unit_id')" />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_id`) }">
+                    <span>{{ t('views.purchase_order.fields.product_unit_id') }}</span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      #{{ index + 1 }}
+                    </span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      {{ item.product_unit_product_code || '-' }}
+                    </span>
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1 min-w-0">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary" tabindex="-1"
+                        class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary h-[38px] w-[38px]"
+                        @click="openChangeProductUnit(index)">
+                        <Lucide icon="Search" class="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_id`)" />
+                </div>
+                <div class="col-span-12">
+                  <div class="grid grid-cols-2 gap-4">
+                    <div>
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.qty`) }">
+                        {{ t('views.purchase_order.fields.qty') }}
+                      </FormLabel>
+                      <FormInputCurrency :id="`purchase-order-item-qty-${index}`" v-model="item.qty"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.qty`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.qty`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.qty`)" />
+                    </div>
+                    <div>
+                      <FormLabel>
+                        {{ t('views.product.table.cols.unit') }}
+                      </FormLabel>
+                      <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                    </div>
+                  </div>
+                  <div v-if="Number(item.product_unit_conversion_value || 1) > 1" class="mt-1 text-right">
+                    <div class="text-sm text-slate-500 dark:text-slate-400">
+                      {{ `${t('views.product.fields.conversion_value')}
+                      ${formatCompactNumberValue(item.product_unit_conversion_value)}
+                      ${item.product_unit_base_unit_name || ''}`.trim() }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }">
+                    {{ t('views.purchase_order.fields.product_unit_price') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                    :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }"
+                    @change="validatePurchaseOrderField(`items.${index}.product_unit_price`)" />
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_price`)" />
+                </div>
+                <div class="col-span-12">
+                  <FormLabel>{{ t('views.purchase_order.fields.subtotal_after_discount') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="togglePurchaseOrderItemDiscounts(index)">
+                        {{ purchaseOrderItemDiscountsExpanded[index] ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removeProductUnit(index)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="currentItemLayout === 'md'" class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-3">
+                  <div class="form-control border rounded-md px-3">
+                    <div class="flex justify-center">
+                      <ProductImagePreview :image-url="item.product_unit_product_image_url"
+                        wrapper-class="w-16 h-16 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in shrink-0"
+                        icon-class="w-5 h-5 text-slate-400"
+                        :preview-title="item.product_unit_product_name || t('views.purchase_order.fields.product_unit_id')" />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-span-12 md:col-span-9">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_id`) }">
+                    <span>{{ t('views.purchase_order.fields.product_unit_id') }}</span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      #{{ index + 1 }}
+                    </span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      {{ item.product_unit_product_code || '-' }}
+                    </span>
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1 min-w-0">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary" tabindex="-1"
+                        class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary h-[38px] w-[38px]"
+                        @click="openChangeProductUnit(index)">
+                        <Lucide icon="Search" class="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_id`)" />
+                </div>
+                <div class="col-span-12 md:col-span-4">
+                  <div class="grid grid-cols-2 gap-4">
+                    <div>
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.qty`) }">
+                        {{ t('views.purchase_order.fields.qty') }}
+                      </FormLabel>
+                      <FormInputCurrency :id="`purchase-order-item-qty-${index}`" v-model="item.qty"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.qty`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.qty`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.qty`)" />
+                    </div>
+                    <div>
+                      <FormLabel>
+                        {{ t('views.product.table.cols.unit') }}
+                      </FormLabel>
+                      <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                    </div>
+                  </div>
+                  <div v-if="Number(item.product_unit_conversion_value || 1) > 1" class="mt-1 text-right">
+                    <div class="text-sm text-slate-500 dark:text-slate-400">
+                      {{ `${t('views.product.fields.conversion_value')}
+                      ${formatCompactNumberValue(item.product_unit_conversion_value)}
+                      ${item.product_unit_base_unit_name || ''}`.trim() }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col-span-12 md:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }">
+                    {{ t('views.purchase_order.fields.product_unit_price') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                    :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }"
+                    @change="validatePurchaseOrderField(`items.${index}.product_unit_price`)" />
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_price`)" />
+                </div>
+                <div class="col-span-12 md:col-span-4">
+                  <FormLabel>{{ t('views.purchase_order.fields.subtotal_after_discount') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="togglePurchaseOrderItemDiscounts(index)">
+                        {{ purchaseOrderItemDiscountsExpanded[index] ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removeProductUnit(index)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-1">
+                  <div class="form-control border rounded-md px-3">
+                    <div class="flex justify-center">
+                      <ProductImagePreview :image-url="item.product_unit_product_image_url"
+                        wrapper-class="w-16 h-16 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in shrink-0"
+                        icon-class="w-5 h-5 text-slate-400"
+                        :preview-title="item.product_unit_product_name || t('views.purchase_order.fields.product_unit_id')" />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_id`) }">
+                    <span>{{ t('views.purchase_order.fields.product_unit_id') }}</span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      #{{ index + 1 }}
+                    </span>
+                    <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                      {{ item.product_unit_product_code || '-' }}
+                    </span>
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1 min-w-0">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary" tabindex="-1"
+                        class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary h-[38px] w-[38px]"
+                        @click="openChangeProductUnit(index)">
+                        <Lucide icon="Search" class="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_id`)" />
+                </div>
+                <div class="col-span-12 lg:col-span-2">
+                  <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                    <div>
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.qty`) }">
+                        {{ t('views.purchase_order.fields.qty') }}
+                      </FormLabel>
+                      <FormInputCurrency :id="`purchase-order-item-qty-${index}`" v-model="item.qty"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.qty`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.qty`)" />
+                    </div>
+                    <div>
+                      <FormLabel>
+                        {{ t('views.product.table.cols.unit') }}
+                      </FormLabel>
+                      <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                    </div>
+                  </div>
+                  <div v-if="Number(item.product_unit_conversion_value || 1) > 1" class="mt-1 text-right">
+                    <div class="text-sm text-slate-500 dark:text-slate-400">
+                      {{ `${t('views.product.fields.conversion_value')}
+                      ${formatCompactNumberValue(item.product_unit_conversion_value)}
+                      ${item.product_unit_base_unit_name || ''}`.trim() }}
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.qty`)" />
+                </div>
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }">
+                    {{ t('views.purchase_order.fields.product_unit_price') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.product_unit_price`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.product_unit_price`)" />
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.product_unit_price`)" />
+                </div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.purchase_order.fields.subtotal_after_discount') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="togglePurchaseOrderItemDiscounts(index)">
+                        {{ purchaseOrderItemDiscountsExpanded[index] ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="removeProductUnit(index)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="currentItemLayout !== 'lg' && purchaseOrderItemDiscountsExpanded[index]"
+                class="mt-4 space-y-4">
+                <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-5">
+                  <div class="font-medium text-sm">{{ t('views.purchase_order.fields.item_price_breakdown') }}</div>
+                  <div class="space-y-3">
+                    <div v-if="item.product_unit_price_discounts.length === 0"
+                      class="text-right text-slate-500 text-sm">
+                      {{ t('views.purchase_order.fields.product_unit_price_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                        :key="`${index}-price-${discount.id ?? discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemPriceDiscount(index, discountIndex)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                        <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                        {{ t('components.buttons.create_new') }}
+                      </Button>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase_order.fields.price_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase_order.fields.subtotal') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="space-y-3">
+                    <div v-if="item.subtotal_discounts.length === 0" class="text-right text-slate-500 text-sm">
+                      {{ t('views.purchase_order.fields.subtotal_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div v-for="(discount, discountIndex) in item.subtotal_discounts"
+                        :key="`${index}-subtotal-${discount.id ?? discountIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemSubtotalDiscount(index, discountIndex)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                        <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                        {{ t('components.buttons.create_new') }}
+                      </Button>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase_order.fields.subtotal_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-4">
+                  <div class="font-medium text-sm">{{ t('views.purchase_order.fields.item_additional_details') }}</div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel>{{ t('views.purchase_order.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                      <FormSwitch>
+                        <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                      </FormSwitch>
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_profile_id`) }">
+                        {{ t('views.purchase_order.fields.vat_profile_id') }}
+                      </FormLabel>
+                      <FormSelectSearch v-model="item.vat_profile_id" v-model:search="vatProfileSearch"
+                        :options="vatProfileOptions" :placeholder="t('components.dropdown.placeholder')"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_profile_id`) }"
+                        @change="syncVatProfile(index)" @search="loadVatProfileDDL" @clear="clearVatProfile(index)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_profile_id`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_rate`) }">
+                        {{ t('views.purchase_order.fields.vat_rate') }}
+                      </FormLabel>
+                      <FormInputCurrency v-model="item.vat_rate" :allow-negative="false"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_rate`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.vat_rate`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_rate`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel
+                        :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_base_numerator`) }">
+                        {{ t('views.purchase_order.fields.vat_base_numerator') }}
+                      </FormLabel>
+                      <FormInput v-model="item.vat_base_numerator" type="number" min="1"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_base_numerator`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.vat_base_numerator`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_base_numerator`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel
+                        :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_base_denominator`) }">
+                        {{ t('views.purchase_order.fields.vat_base_denominator') }}
+                      </FormLabel>
+                      <FormInput v-model="item.vat_base_denominator" type="number" min="1"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_base_denominator`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.vat_base_denominator`)" />
+                      <FormErrorMessages
+                        :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_base_denominator`)" />
+                    </div>
+                    <div class="col-span-12">
+                      <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.remarks`) }">
+                        {{ t('views.purchase_order.fields.remarks') }}
+                      </FormLabel>
+                      <FormTextarea v-model="item.remarks"
+                        :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.remarks`) }"
+                        @change="validatePurchaseOrderField(`items.${index}.remarks`)" />
+                      <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.remarks`)" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div v-else-if="purchaseOrderItemDiscountsExpanded[index]" class="mt-4 grid grid-cols-12 gap-4">
+                <div class="col-span-12 lg:col-span-6">
+                  <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-4">
+                    <div class="font-medium text-sm">{{ t('views.purchase_order.fields.item_additional_details') }}
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-5">
+                        <FormLabel>{{ t('views.purchase_order.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                        <FormSwitch>
+                          <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                        </FormSwitch>
+                      </div>
+                      <div class="col-span-12 md:col-span-7">
+                        <FormLabel
+                          :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_profile_id`) }">
+                          {{ t('views.purchase_order.fields.vat_profile_id') }}
+                        </FormLabel>
+                        <FormSelectSearch v-model="item.vat_profile_id" v-model:search="vatProfileSearch"
+                          :options="vatProfileOptions" :placeholder="t('components.dropdown.placeholder')"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_profile_id`) }"
+                          @change="syncVatProfile(index)" @search="loadVatProfileDDL" @clear="clearVatProfile(index)" />
+                        <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_profile_id`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_rate`) }">
+                          {{ t('views.purchase_order.fields.vat_rate') }}
+                        </FormLabel>
+                        <FormInputCurrency v-model="item.vat_rate" :allow-negative="false"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_rate`) }"
+                          @change="validatePurchaseOrderField(`items.${index}.vat_rate`)" />
+                        <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_rate`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel
+                          :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_base_numerator`) }">
+                          {{ t('views.purchase_order.fields.vat_base_numerator') }}
+                        </FormLabel>
+                        <FormInput v-model="item.vat_base_numerator" type="number" min="1"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_base_numerator`) }"
+                          @change="validatePurchaseOrderField(`items.${index}.vat_base_numerator`)" />
+                        <FormErrorMessages
+                          :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_base_numerator`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel
+                          :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.vat_base_denominator`) }">
+                          {{ t('views.purchase_order.fields.vat_base_denominator') }}
+                        </FormLabel>
+                        <FormInput v-model="item.vat_base_denominator" type="number" min="1"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.vat_base_denominator`) }"
+                          @change="validatePurchaseOrderField(`items.${index}.vat_base_denominator`)" />
+                        <FormErrorMessages
+                          :messages="getPurchaseOrderFieldErrors(`items.${index}.vat_base_denominator`)" />
+                      </div>
+                      <div class="col-span-12">
+                        <FormLabel :class="{ 'text-danger': invalidPurchaseOrderField(`items.${index}.remarks`) }">
+                          {{ t('views.purchase_order.fields.remarks') }}
+                        </FormLabel>
+                        <FormTextarea v-model="item.remarks"
+                          :class="{ 'border-danger': invalidPurchaseOrderField(`items.${index}.remarks`) }"
+                          @change="validatePurchaseOrderField(`items.${index}.remarks`)" />
+                        <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`items.${index}.remarks`)" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-6">
+                  <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-5">
+                    <div class="font-medium text-sm">{{ t('views.purchase_order.fields.item_price_breakdown') }}</div>
+                    <div class="space-y-3">
+                      <div v-if="item.product_unit_price_discounts.length === 0"
+                        class="text-right text-slate-500 text-sm">
+                        {{ t('views.purchase_order.fields.product_unit_price_discounts_empty') }}
+                      </div>
+                      <div v-else class="space-y-3">
+                        <div v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                          :key="`${index}-price-lg-${discount.id ?? discountIndex}`"
+                          class="grid grid-cols-12 gap-4 gap-y-3">
+                          <div class="col-span-12 md:col-span-2">
+                            <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                            <FormInput :model-value="discountIndex + 1" readonly />
+                          </div>
+                          <div class="col-span-12 md:col-span-4">
+                            <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                            <FormSelect v-model="discount.discount_type">
+                              <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                                {{ option.label }}
+                              </option>
+                            </FormSelect>
+                          </div>
+                          <div class="col-span-12 md:col-span-6">
+                            <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                            <div class="flex items-start gap-2">
+                              <div class="flex-1 min-w-0">
+                                <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                              </div>
+                              <div class="shrink-0">
+                                <Button type="button" variant="outline-secondary"
+                                  class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                  @click="removeItemPriceDiscount(index, discountIndex)">
+                                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                                </Button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="flex justify-end">
+                        <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                          <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                          {{ t('components.buttons.create_new') }}
+                        </Button>
+                      </div>
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                          {{ t('views.purchase_order.fields.price_after_discount') }}
+                        </div>
+                        <div class="col-span-12 md:col-span-8">
+                          <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                        </div>
+                      </div>
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                          {{ t('views.purchase_order.fields.subtotal') }}
+                        </div>
+                        <div class="col-span-12 md:col-span-8">
+                          <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)"
+                            readonly />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="space-y-3">
+                      <div v-if="item.subtotal_discounts.length === 0" class="text-right text-slate-500 text-sm">
+                        {{ t('views.purchase_order.fields.subtotal_discounts_empty') }}
+                      </div>
+                      <div v-else class="space-y-3">
+                        <div v-for="(discount, discountIndex) in item.subtotal_discounts"
+                          :key="`${index}-subtotal-lg-${discount.id ?? discountIndex}`"
+                          class="grid grid-cols-12 gap-4 gap-y-3">
+                          <div class="col-span-12 md:col-span-2">
+                            <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                            <FormInput :model-value="discountIndex + 1" readonly />
+                          </div>
+                          <div class="col-span-12 md:col-span-4">
+                            <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                            <FormSelect v-model="discount.discount_type">
+                              <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                                {{ option.label }}
+                              </option>
+                            </FormSelect>
+                          </div>
+                          <div class="col-span-12 md:col-span-6">
+                            <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                            <div class="flex items-start gap-2">
+                              <div class="flex-1 min-w-0">
+                                <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                              </div>
+                              <div class="shrink-0">
+                                <Button type="button" variant="outline-secondary"
+                                  class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                  @click="removeItemSubtotalDiscount(index, discountIndex)">
+                                  <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                                </Button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="flex justify-end">
+                        <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                          <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                          {{ t('components.buttons.create_new') }}
+                        </Button>
+                      </div>
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                          {{ t('views.purchase_order.fields.subtotal_after_discount') }}
+                        </div>
+                        <div class="col-span-12 md:col-span-8">
+                          <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="openAddProductUnit">
+              <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="p-5 space-y-4">
+          <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 p-4 space-y-4">
+            <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+              <div class="col-span-12 lg:col-span-9"></div>
+              <div class="col-span-12 lg:col-span-3">
+                <FormLabel>{{ t('views.purchase_order.fields.items_subtotal_after_discount') }}</FormLabel>
+                <FormInputCurrency :model-value="getItemsSubtotalAfterDiscountPreview()" readonly />
+              </div>
+            </div>
+
+            <div class="space-y-4">
+              <div v-if="isGlobalDiscountEditorExpanded" class="space-y-4">
+                <FormErrorMessages :messages="purchaseOrderForm.errors.global_discounts" />
+                <div v-if="purchaseOrderGlobalDiscountsForm.length === 0" class="text-right text-slate-500 text-sm">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+                <div v-else class="space-y-3">
+                  <div v-for="(discount, index) in purchaseOrderGlobalDiscountsForm"
+                    :key="`global-discount-${discount.id ?? index}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 lg:col-span-6"></div>
+                    <div class="col-span-12 md:col-span-2 lg:col-span-1">
+                      <FormLabel>{{ t('views.purchase_order.fields.sequence') }}</FormLabel>
+                      <FormInput :model-value="index + 1" readonly />
+                    </div>
+                    <div class="col-span-12 md:col-span-3 lg:col-span-3">
+                      <FormLabel>{{ t('views.purchase_order.fields.discount_type') }}</FormLabel>
+                      <FormSelect v-model="discount.discount_type">
+                        <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                          {{ option.label }}
+                        </option>
+                      </FormSelect>
+                    </div>
+                    <div class="col-span-12 md:col-span-3 lg:col-span-2">
+                      <FormLabel>{{ t('views.purchase_order.fields.discount_value') }}</FormLabel>
+                      <div class="flex items-start gap-2">
+                        <div class="flex-1 min-w-0">
+                          <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                        </div>
+                        <div class="shrink-0">
+                          <Button type="button" variant="outline-secondary"
+                            class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                            @click="removeGlobalDiscount(index)">
+                            <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex justify-end">
+                  <Button type="button" variant="outline-primary" @click="addGlobalDiscount">
+                    <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                    {{ t('components.buttons.create_new') }}
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                <div class="col-span-12 lg:col-span-9"></div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.purchase_order.fields.global_discount_total') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="isGlobalDiscountEditorExpanded = !isGlobalDiscountEditorExpanded">
+                        {{ isGlobalDiscountEditorExpanded ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getPurchaseOrderGlobalDiscountPreview()" readonly />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <template v-if="isTotalsBreakdownExpanded">
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.item_total_after_global_discount') }}</FormLabel>
+                    <FormInputCurrency :model-value="getPurchaseOrderItemTotalAfterGlobalDiscountPreview()" readonly />
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.vat_base') }}</FormLabel>
+                    <FormInputCurrency :model-value="formatCurrencyPreviewValue(getPurchaseOrderVatBasePreview())"
+                      readonly />
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.vat') }}</FormLabel>
+                    <FormInputCurrency :model-value="formatCurrencyPreviewValue(getPurchaseOrderVatPreview())"
+                      readonly />
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel :class="{ 'text-danger': purchaseOrderForm.invalid('rounding') }">
+                      {{ t('views.purchase_order.fields.rounding') }}
+                    </FormLabel>
+                    <FormInputCurrency v-model="purchaseOrderForm.rounding"
+                      :class="{ 'border-danger': purchaseOrderForm.invalid('rounding') }"
+                      @change="purchaseOrderForm.validate('rounding')" />
+                    <FormErrorMessages :messages="purchaseOrderForm.errors.rounding" />
+                  </div>
+                </div>
+              </template>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                <div class="col-span-12 lg:col-span-9"></div>
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel>{{ t('views.purchase_order.fields.amount_payable') }}</FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="shrink-0">
+                      <Button type="button" variant="outline-secondary"
+                        class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                        @click="isTotalsBreakdownExpanded = !isTotalsBreakdownExpanded">
+                        {{ isTotalsBreakdownExpanded ? '▲' : '▼' }}
+                      </Button>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <FormInputCurrency :model-value="getPurchaseOrderAmountPayablePreview()" readonly />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="space-y-4">
+                <div v-if="isDownPaymentEditorExpanded" class="space-y-4">
+                  <FormErrorMessages :messages="purchaseOrderForm.errors.down_payments" />
+                  <div v-if="purchaseOrderDownPaymentsForm.length === 0" class="text-right text-slate-500 text-sm">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="space-y-4">
+                    <div v-for="(downPayment, index) in purchaseOrderDownPaymentsForm"
+                      :key="`down-payment-${downPayment.id ?? index}`" class="space-y-3">
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2"></div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.code`) }">
+                            {{ t('views.purchase_order.fields.code') }}
+                          </FormLabel>
+                          <FormInputCode v-model="downPayment.code"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.code`) }"
+                            :placeholder="t('views.purchase_order.fields.code')" @set-auto="setDownPaymentCode(index)"
+                            @change="validatePurchaseOrderField(`down_payments.${index}.code`)" />
+                          <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.code`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-4">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.date`) }">
+                            {{ t('views.purchase_order.fields.date') }}
+                          </FormLabel>
+                          <FormInputDateTimeAuto v-model="downPayment.date"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.date`) }"
+                            :placeholder="t('views.purchase_order.fields.date')"
+                            @change="validatePurchaseOrderField(`down_payments.${index}.date`)" />
+                          <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.date`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-8 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.cash_account_id`) }">
+                            {{ t('views.purchase_order.fields.cash_account_id') }}
+                          </FormLabel>
+                          <FormSelectSearch v-model="downPayment.cash_account_id" v-model:search="cashAccountSearch"
+                            :options="cashAccountOptions" :placeholder="t('components.dropdown.placeholder')"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.cash_account_id`) }"
+                            @change="validatePurchaseOrderField(`down_payments.${index}.cash_account_id`)"
+                            @search="loadCashAccountDDL" @clear="clearCashAccount(index)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.cash_account_id`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.amount`) }">
+                            {{ t('views.purchase_order.fields.amount') }}
+                          </FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="downPayment.amount" :allow-negative="false"
+                                :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.amount`) }"
+                                @change="validatePurchaseOrderField(`down_payments.${index}.amount`)" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeDownPayment(index)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                          <FormErrorMessages :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.amount`)" />
+                        </div>
+                      </div>
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 lg:col-span-2"></div>
+                        <div class="col-span-12 lg:col-span-7">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`down_payments.${index}.remarks`) }">
+                            {{ t('views.purchase_order.fields.remarks') }}
+                          </FormLabel>
+                          <FormTextarea v-model="downPayment.remarks"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`down_payments.${index}.remarks`) }"
+                            @change="validatePurchaseOrderField(`down_payments.${index}.remarks`)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`down_payments.${index}.remarks`)" />
+                        </div>
+                        <div class="col-span-12 lg:col-span-3">
+                          <FormLabel>{{ t('views.purchase_order.fields.amount_allocated') }}</FormLabel>
+                          <FormInputCurrency :model-value="Number(downPayment.amount_allocated ?? 0)" readonly />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addDownPayment">
+                      <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                      {{ t('components.buttons.create_new') }}
+                    </Button>
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.amount_paid_down_payment') }}</FormLabel>
+                    <div class="flex items-start gap-2">
+                      <div class="shrink-0">
+                        <Button type="button" variant="outline-secondary"
+                          class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                          @click="isDownPaymentEditorExpanded = !isDownPaymentEditorExpanded">
+                          {{ isDownPaymentEditorExpanded ? '▲' : '▼' }}
+                        </Button>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <FormInputCurrency :model-value="getDownPaymentsTotalPreview()" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div v-if="isRefundedDownPaymentEditorExpanded" class="space-y-4">
+                  <FormErrorMessages :messages="purchaseOrderForm.errors.refunded_down_payments" />
+                  <div v-if="purchaseOrderRefundedDownPaymentsForm.length === 0"
+                    class="text-right text-slate-500 text-sm">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="space-y-4">
+                    <div v-for="(refundedDownPayment, index) in purchaseOrderRefundedDownPaymentsForm"
+                      :key="`refunded-down-payment-${refundedDownPayment.id ?? index}`" class="space-y-3">
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2"></div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.code`) }">
+                            {{ t('views.purchase_order.fields.code') }}
+                          </FormLabel>
+                          <FormInputCode v-model="refundedDownPayment.code"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.code`) }"
+                            :placeholder="t('views.purchase_order.fields.code')"
+                            @set-auto="setRefundedDownPaymentCode(index)"
+                            @change="validatePurchaseOrderField(`refunded_down_payments.${index}.code`)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.code`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-4">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.date`) }">
+                            {{ t('views.purchase_order.fields.date') }}
+                          </FormLabel>
+                          <FormInputDateTimeAuto v-model="refundedDownPayment.date"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.date`) }"
+                            :placeholder="t('views.purchase_order.fields.date')"
+                            @change="validatePurchaseOrderField(`refunded_down_payments.${index}.date`)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.date`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-8 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.cash_account_id`) }">
+                            {{ t('views.purchase_order.fields.cash_account_id') }}
+                          </FormLabel>
+                          <FormSelectSearch v-model="refundedDownPayment.cash_account_id"
+                            v-model:search="cashAccountSearch" :options="cashAccountOptions"
+                            :placeholder="t('components.dropdown.placeholder')"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.cash_account_id`) }"
+                            @change="validatePurchaseOrderField(`refunded_down_payments.${index}.cash_account_id`)"
+                            @search="loadCashAccountDDL" @clear="clearRefundedCashAccount(index)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.cash_account_id`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.amount`) }">
+                            {{ t('views.purchase_order.fields.amount') }}
+                          </FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="refundedDownPayment.amount" :allow-negative="false"
+                                :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.amount`) }"
+                                @change="validatePurchaseOrderField(`refunded_down_payments.${index}.amount`)" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeRefundedDownPayment(index)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.amount`)" />
+                        </div>
+                      </div>
+                      <div class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 lg:col-span-2"></div>
+                        <div class="col-span-12 lg:col-span-10">
+                          <FormLabel
+                            :class="{ 'text-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.remarks`) }">
+                            {{ t('views.purchase_order.fields.remarks') }}
+                          </FormLabel>
+                          <FormTextarea v-model="refundedDownPayment.remarks"
+                            :class="{ 'border-danger': invalidPurchaseOrderField(`refunded_down_payments.${index}.remarks`) }"
+                            @change="validatePurchaseOrderField(`refunded_down_payments.${index}.remarks`)" />
+                          <FormErrorMessages
+                            :messages="getPurchaseOrderFieldErrors(`refunded_down_payments.${index}.remarks`)" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addRefundedDownPayment">
+                      <Lucide icon="Plus" class="w-4 h-4 mr-1" />
+                      {{ t('components.buttons.create_new') }}
+                    </Button>
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.amount_refunded_down_payment') }}</FormLabel>
+                    <div class="flex items-start gap-2">
+                      <div class="shrink-0">
+                        <Button type="button" variant="outline-secondary"
+                          class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                          @click="isRefundedDownPaymentEditorExpanded = !isRefundedDownPaymentEditorExpanded">
+                          {{ isRefundedDownPaymentEditorExpanded ? '▲' : '▼' }}
+                        </Button>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <FormInputCurrency :model-value="getRefundedDownPaymentsTotalPreview()" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.amount_allocated_down_payment') }}</FormLabel>
+                    <FormInputCurrency :model-value="getAllocatedDownPaymentsTotalPreview()" readonly />
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3 items-end">
+                  <div class="col-span-12 lg:col-span-9"></div>
+                  <div class="col-span-12 lg:col-span-3">
+                    <FormLabel>{{ t('views.purchase_order.fields.amount_available_down_payment') }}</FormLabel>
+                    <FormInputCurrency :model-value="getAvailableDownPaymentsTotalPreview()" readonly />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="submit" variant="primary" class="w-32 shadow-md"
+            :disabled="purchaseOrderForm.validating || purchaseOrderForm.hasErrors">
+            <Lucide v-if="purchaseOrderForm.validating" icon="Loader" class="w-4 h-4 mr-2 animate-spin" />
+            <template v-else>
+              <Lucide icon="Save" class="w-4 h-4 mr-2" />
+            </template>
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <ProductUnitPickerDialog size="xl" panel-class="max-w-5xl" :open="showProductUnitModal"
+    :title="t('views.purchase_order.fields.product_unit_id')" :search-text="productSearchText"
+    :is-searching="isSearchingProductUnit" :options="productUnitOptions" :columns="productUnitDialogColumns"
+    @update:search-text="productSearchText = $event" @search="searchProductUnits"
+    @select="selectProductUnit($event as ProductUnitOption)" @close="showProductUnitModal = false"
+    @after-leave="handleProductUnitModalAfterLeave" />
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderIndex.vue b/web/src/pages/purchase-order/PurchaseOrderIndex.vue
new file mode 100644
index 000000000..9a1543262
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderIndex.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { NotificationData } from '@/types/models/NotificationData';
+import { UserProfile } from '@/types/models/UserProfile';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.purchase_order.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const purchaseOrderNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[purchaseOrderNotification]', (el: NotificationElement) => {
+  purchaseOrderNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-purchase-order-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-purchase-order-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.purchase_order.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.purchase_order.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.purchase_order.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  purchaseOrderNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('PURCHASE_ORDER_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('PURCHASE_ORDER_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="purchaseOrderNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderItemIndex.vue b/web/src/pages/purchase-order/PurchaseOrderItemIndex.vue
new file mode 100644
index 000000000..a71a794e3
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderItemIndex.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import PurchaseOrderItemList from './PurchaseOrderItemList.vue';
+
+const { t } = useI18n();
+
+const loading = ref(false);
+const titleView = ref<string>('views.purchase_order_item.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const notificationTitle = ref('');
+const notificationContent = ref('');
+const purchaseOrderItemNotification = ref<NotificationElement>();
+
+provide('bind[purchaseOrderItemNotification]', (el: NotificationElement) => {
+  purchaseOrderItemNotification.value = el;
+});
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  if (state === ViewMode.LIST) {
+    titleView.value = 'views.purchase_order_item.page_title';
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (purchaseOrderItemNotification.value) {
+    purchaseOrderItemNotification.value.showToast();
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+
+      <PurchaseOrderItemList
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="purchaseOrderItemNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderItemList.vue b/web/src/pages/purchase-order/PurchaseOrderItemList.vue
new file mode 100644
index 000000000..feebd2414
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderItemList.vue
@@ -0,0 +1,597 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { FormInput, FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import PurchaseOrderItemService from '@/services/PurchaseOrderItemService';
+import PurchaseOrderService from '@/services/PurchaseOrderService';
+import SupplierService from '@/services/SupplierService';
+import ProductCategoryService from '@/services/ProductCategoryService';
+import BrandService from '@/services/BrandService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { PurchaseOrderItem } from '@/types/models/PurchaseOrderItem';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PurchaseOrderItemReadAnyPaginateRequest } from '@/types/services/purchase-order-item/PurchaseOrderItemRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseOrderItemService = new PurchaseOrderItemService();
+const purchaseOrderService = new PurchaseOrderService();
+const supplierService = new SupplierService();
+const productCategoryService = new ProductCategoryService();
+const brandService = new BrandService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref('');
+const purchaseOrderCode = ref('');
+const productUnitCode = ref('');
+const productName = ref('');
+const selectedSupplierId = ref<string | null>(null);
+const selectedProductCategoryId = ref<string | null>(null);
+const selectedProductBrandId = ref<string | null>(null);
+const supplierSearch = ref('');
+const productCategorySearch = ref('');
+const productBrandSearch = ref('');
+const showAdvancedFilters = ref(false);
+
+const purchaseOrderItemLists = ref<Collection<Array<PurchaseOrderItem>> | null>({
+  data: [],
+  meta: {
+    current_page: 1,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 10,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const progressStatusDDL = ref<Array<DropDownOption> | null>(null);
+const productCategoryDDL = ref<Array<DropDownOption> | null>(null);
+const productBrandDDL = ref<Array<DropDownOption> | null>(null);
+
+const supplierOptions = computed(() => (supplierDDL.value ?? []).map((item) => ({ value: item.code, label: item.name })));
+const progressStatusLabelMap = computed<Record<string, string>>(() =>
+  Object.fromEntries(
+    (progressStatusDDL.value ?? []).map((item) => [String(item.code), item.name]),
+  ),
+);
+const productCategoryOptions = computed(() => (productCategoryDDL.value ?? []).map((item) => ({ value: item.code, label: item.name })));
+const productBrandOptions = computed(() => (productBrandDDL.value ?? []).map((item) => ({ value: item.code, label: item.name })));
+
+const formatQuantityValue = (value: number | string, precision = 4) =>
+  new Intl.NumberFormat('id-ID', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: precision,
+  }).format(Number(value ?? 0));
+
+const getProgressStatusBadgeClass = (status: string | null | undefined) => {
+  switch (status) {
+    case 'matched':
+      return 'bg-success/15 text-success';
+    case 'unmatched':
+      return 'bg-warning/15 text-warning';
+    case 'unlinked':
+    default:
+      return 'bg-slate-200/80 text-slate-700 dark:bg-darkmode-400 dark:text-slate-200';
+  }
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await Promise.all([
+    loadSupplierDDL(),
+    loadProgressStatusDDL(),
+    loadProductCategoryDDL(),
+    loadProductBrandDDL(),
+  ]);
+  await getPurchaseOrderItems('', true, 1, 10);
+});
+
+const getPurchaseOrderItems = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: PurchaseOrderItemReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    purchase_order_code: purchaseOrderCode.value || undefined,
+    purchase_order_start_date: startDate.value || undefined,
+    purchase_order_end_date: endDate.value || undefined,
+    purchase_order_supplier_id: selectedSupplierId.value,
+    product_unit_code: productUnitCode.value || undefined,
+    product_unit_product_name: productName.value || undefined,
+    product_unit_product_category_id: selectedProductCategoryId.value,
+    product_unit_product_brand_id: selectedProductBrandId.value,
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result = (await purchaseOrderItemService.readAnyPaginate(
+    request,
+  )) as ServiceResponse<Collection<Array<PurchaseOrderItem>> | null>;
+
+  if (result.success && result.data) {
+    purchaseOrderItemLists.value = result.data;
+  }
+
+  emits('loading-state', false);
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: selectedSupplierId.value ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({ code: item.id, name: item.name }));
+  }
+};
+
+const loadProgressStatusDDL = async () => {
+  const result = await purchaseOrderService.readProgressStatuses();
+
+  if (result.success && result.data) {
+    progressStatusDDL.value = result.data;
+  }
+};
+
+const loadProductCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await productCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    type: 1,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    productCategoryDDL.value = result.data.data.map((item: any) => ({ code: item.id, name: item.name }));
+  }
+};
+
+const loadProductBrandDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await brandService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    productBrandDDL.value = result.data.data.map((item: any) => ({ code: item.id, name: item.name }));
+  }
+};
+
+const handleDataListChange = async (emittedData: DataListEmittedData) => {
+  await getPurchaseOrderItems(
+    emittedData.search.text,
+    true,
+    emittedData.pagination.page,
+    emittedData.pagination.per_page,
+  );
+};
+
+const handleFilterChange = async () => {
+  await getPurchaseOrderItems(searchText.value, true, 1, purchaseOrderItemLists.value?.meta.per_page ?? 10);
+};
+
+const clearSupplierFilter = async () => {
+  selectedSupplierId.value = null;
+  await handleFilterChange();
+};
+
+const clearProductCategoryFilter = async () => {
+  selectedProductCategoryId.value = null;
+  await handleFilterChange();
+};
+
+const clearProductBrandFilter = async () => {
+  selectedProductBrandId.value = null;
+  await handleFilterChange();
+};
+
+const toggleAdvancedFilters = async () => {
+  showAdvancedFilters.value = !showAdvancedFilters.value;
+  if (showAdvancedFilters.value) {
+    await Promise.all([
+      loadSupplierDDL(supplierSearch.value),
+      loadProductCategoryDDL(productCategorySearch.value),
+      loadProductBrandDDL(productBrandSearch.value),
+    ]);
+  }
+};
+
+const viewSelected = (index: number) => {
+  expandDetail.value = expandDetail.value === index ? null : index;
+};
+
+const editSelected = (index: number) => {
+  const ulid = purchaseOrderItemLists.value?.data?.[index]?.purchase_order?.ulid;
+  if (!ulid) return;
+
+  router.push({
+    name: 'side-menu-purchase-order-edit',
+    params: { ulid },
+  });
+};
+
+const getProductMainImageUrl = (item: PurchaseOrderItem): string | null => {
+  const images = item.product_unit?.product?.product_images ?? [];
+  if (images.length === 0) return null;
+
+  const mainImage = images.find((img) => img.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  return images[0]?.url ?? null;
+};
+
+const getBaseUnitName = (item: PurchaseOrderItem): string => {
+  const units = item.product_unit?.product?.product_units ?? [];
+  const baseUnit =
+    units.find((unit) => unit.is_base) ??
+    units.find((unit) => Number(unit.conversion_value) === 1) ??
+    units.find((unit) => unit.is_primary_unit) ??
+    null;
+
+  return baseUnit?.unit?.name ?? '';
+};
+
+const getQtyDisplay = (item: PurchaseOrderItem): string => {
+  const qty = formatQuantityValue(item.qty);
+  const unitName = item.product_unit?.unit?.name ?? '';
+  if (!unitName) return qty;
+
+  const conversionValue = Number(item.product_unit_conversion_value ?? 1);
+  if (conversionValue <= 1) return `${qty} ${unitName}`;
+
+  const baseUnitName = getBaseUnitName(item);
+  if (!baseUnitName || baseUnitName === unitName) return `${qty} ${unitName}`;
+
+  const baseQty = formatQuantityValue(item.qty * conversionValue);
+  return `${qty} ${unitName} (${baseQty} ${baseUnitName})`;
+};
+
+const getBaseQtyDisplay = (qtyBase: number | string, item: PurchaseOrderItem): string => {
+  const baseUnitName = getBaseUnitName(item);
+  const qty = formatQuantityValue(qtyBase);
+
+  return baseUnitName ? `${qty} ${baseUnitName}` : qty;
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = { title, content };
+  emits('show-notification', notification);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.start_date') }}</FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.end_date') }}</FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+          <Button variant="soft-secondary" class="shadow-sm" @click="toggleAdvancedFilters">
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>{{ t('views.purchase_order.fields.code') }}</FormLabel>
+          <FormInput v-model="purchaseOrderCode" type="text" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>{{ t('views.purchase_order.fields.supplier_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedSupplierId"
+            v-model:search="supplierSearch"
+            :options="supplierOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="handleFilterChange"
+            @search="loadSupplierDDL"
+            @clear="clearSupplierFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>{{ t('views.purchase_order.fields.product_unit_code') }}</FormLabel>
+          <FormInput v-model="productUnitCode" type="text" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>{{ t('views.stock_transfer.fields.product_name') }}</FormLabel>
+          <FormInput v-model="productName" type="text" @change="handleFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>{{ t('views.product.fields.category_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedProductCategoryId"
+            v-model:search="productCategorySearch"
+            :options="productCategoryOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="handleFilterChange"
+            @search="loadProductCategoryDDL"
+            @clear="clearProductCategoryFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+          <FormLabel>{{ t('views.product.fields.brand_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedProductBrandId"
+            v-model:search="productBrandSearch"
+            :options="productBrandOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="handleFilterChange"
+            @search="loadProductBrandDDL"
+            @clear="clearProductBrandFilter"
+          />
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="purchaseOrderItemLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="purchaseOrderItemLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="purchaseOrderItemLists ? purchaseOrderItemLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-12 lg:col-span-4 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderItem).purchase_order?.code ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderItem).purchase_order?.date ? formatDate((item as PurchaseOrderItem).purchase_order?.date as string, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.supplier_id') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderItem).purchase_order?.supplier?.name ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.due_days') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseOrderItem).purchase_order?.due_days ?? 0 }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.progress_status') }}</div>
+                <div class="col-span-8">
+                  <span
+                    class="inline-flex rounded-full px-2 py-1 text-[11px] font-medium"
+                    :class="getProgressStatusBadgeClass((item as PurchaseOrderItem).purchase_order?.progress_status)"
+                  >
+                    {{ t(progressStatusLabelMap[(item as PurchaseOrderItem).purchase_order?.progress_status ?? '']
+                      ?? 'views.purchase_order.filters.progress_status_unlinked') }}
+                  </span>
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.remarks') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderItem).purchase_order?.remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-4 self-start md:pr-3 lg:pr-4">
+            <div class="space-y-3">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.field_groups.items') }}
+              </div>
+              <div class="flex items-start gap-3">
+                <ProductImagePreview
+                  :image-url="getProductMainImageUrl(item as PurchaseOrderItem)"
+                  wrapper-class="w-14 h-14 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in shrink-0"
+                  image-class="object-cover w-full h-full"
+                  empty-icon-class="w-5 h-5 text-slate-400"
+                />
+                <div class="min-w-0 flex-1">
+                  <div class="font-medium text-slate-700 dark:text-slate-200 break-words">
+                    {{ (item as PurchaseOrderItem).product_unit?.product?.name ?? '-' }}
+                  </div>
+                  <div class="mt-1 text-xs text-slate-500 break-words">
+                    {{ (item as PurchaseOrderItem).product_unit?.code ?? '-' }}
+                  </div>
+                </div>
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.product.fields.category_id') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderItem).product_unit?.product?.category?.name ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.product.fields.brand_id') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrderItem).product_unit?.product?.brand?.name ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.vat_profile_id') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as PurchaseOrderItem).vat_profile?.name ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.vat_rate') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ formatQuantityValue((item as PurchaseOrderItem).vat_rate ?? 0) }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.vat_base_fraction') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ `${formatQuantityValue((item as PurchaseOrderItem).vat_base_numerator ?? 0)}/${formatQuantityValue((item as PurchaseOrderItem).vat_base_denominator ?? 0)}` }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-5 lg:col-span-3 self-start md:pl-3 lg:pl-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.field_groups.summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.qty') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200 break-words">
+                  {{ `${formatQuantityValue((item as PurchaseOrderItem).qty ?? 0)} ${(item as PurchaseOrderItem).product_unit?.unit?.name ?? ''}`.trim() || '-' }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.product_unit_price') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as PurchaseOrderItem).product_unit_price ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.price_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as PurchaseOrderItem).price_discount ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.subtotal_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as PurchaseOrderItem).subtotal_discount ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.subtotal_after_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as PurchaseOrderItem).subtotal_after_discount ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.vat') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as PurchaseOrderItem).vat ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.qty_purchased_base') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ getBaseQtyDisplay((item as
+                  PurchaseOrderItem).qty_purchased_base ?? 0, item as PurchaseOrderItem) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.qty_outstanding_base') }}</div>
+                <div class="col-span-5 text-right text-warning">{{ getBaseQtyDisplay((item as
+                  PurchaseOrderItem).qty_outstanding_base ?? 0, item as PurchaseOrderItem) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.qty_excess_base') }}</div>
+                <div class="col-span-5 text-right text-danger">{{ getBaseQtyDisplay((item as PurchaseOrderItem).qty_excess_base
+                  ?? 0, item as PurchaseOrderItem) }}</div>
+                <div class="col-span-7 text-primary font-medium">{{ t('views.purchase_order.fields.amount_payable') }}</div>
+                <div class="col-span-5 text-right text-primary font-medium">{{ formatCurrency((item as PurchaseOrderItem).amount_payable ?? 0) }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-1 md:col-span-12 self-center flex justify-end items-center gap-2 pt-2 md:flex-col lg:flex-col">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+          </div>
+
+          <div v-if="expandDetail === index" class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3">
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 lg:col-span-6 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.field_groups.item_additional_details') }}
+                </div>
+                <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.product_unit_conversion_value') }}</div>
+                  <div class="col-span-8 text-right text-slate-700 dark:text-slate-200">{{ formatQuantityValue((item as PurchaseOrderItem).product_unit_conversion_value ?? 0) }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.item_total_count') }}</div>
+                  <div class="col-span-8 text-right text-slate-700 dark:text-slate-200">{{ formatQuantityValue((item as
+                    PurchaseOrderItem).purchase_order?.item_total_count ?? 0, 0) }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.item_matched_count') }}</div>
+                  <div class="col-span-8 text-right text-success">{{ formatQuantityValue((item as
+                    PurchaseOrderItem).purchase_order?.item_matched_count ?? 0, 0) }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.item_less_count') }}</div>
+                  <div class="col-span-8 text-right text-warning">{{ formatQuantityValue((item as
+                    PurchaseOrderItem).purchase_order?.item_less_count ?? 0, 0) }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.item_more_count') }}</div>
+                  <div class="col-span-8 text-right text-danger">{{ formatQuantityValue((item as
+                    PurchaseOrderItem).purchase_order?.item_more_count ?? 0, 0) }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.item_unlinked_count') }}</div>
+                  <div class="col-span-8 text-right text-slate-700 dark:text-slate-200">{{ formatQuantityValue((item as
+                    PurchaseOrderItem).purchase_order?.item_unlinked_count ?? 0, 0) }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.global_discount') }}</div>
+                  <div class="col-span-8 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as PurchaseOrderItem).global_discount ?? 0) }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.product_unit_is_price_include_vat') }}</div>
+                  <div class="col-span-8 text-right text-slate-700 dark:text-slate-200">{{ (item as PurchaseOrderItem).product_unit_is_price_include_vat ? 'Yes' : 'No' }}</div>
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-6 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.fields.remarks') }}
+                </div>
+                <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 px-3 py-2 text-slate-700 dark:text-slate-200 break-words min-h-[72px]">
+                  {{ (item as PurchaseOrderItem).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-order/PurchaseOrderList.vue b/web/src/pages/purchase-order/PurchaseOrderList.vue
new file mode 100644
index 000000000..31633684d
--- /dev/null
+++ b/web/src/pages/purchase-order/PurchaseOrderList.vue
@@ -0,0 +1,591 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PurchaseOrderService from '@/services/PurchaseOrderService';
+import SupplierService from '@/services/SupplierService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { PurchaseOrder } from '@/types/models/PurchaseOrder';
+import { DropDownOption } from '@/types/models/DropDownOption';
+import { NotificationData } from '@/types/models/NotificationData';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { PurchaseOrderReadAnyPaginateRequest } from '@/types/services/purchase-order/PurchaseOrderRequest';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseOrderService = new PurchaseOrderService();
+const supplierService = new SupplierService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+const selectedSupplierId = ref<string | null>(null);
+const selectedProgressStatus = ref<string | null>(null);
+
+const formatCurrencyRounded = (value: number | string, precision = 2) =>
+  formatCurrency(Number(Number(value ?? 0).toFixed(precision)));
+
+const formatQuantityValue = (value: number | string, precision = 4) =>
+  new Intl.NumberFormat('id-ID', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: precision,
+  }).format(Number(value ?? 0));
+
+const getProgressStatusBadgeClass = (status: string | null | undefined) => {
+  switch (status) {
+    case 'matched':
+      return 'bg-success/15 text-success';
+    case 'unmatched':
+      return 'bg-warning/15 text-warning';
+    case 'unlinked':
+    default:
+      return 'bg-slate-200/80 text-slate-700 dark:bg-darkmode-400 dark:text-slate-200';
+  }
+};
+
+const purchaseOrderLists = ref<Collection<Array<PurchaseOrder>> | null>({
+  data: [],
+  meta: {
+    current_page: 1,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 10,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const progressStatusDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref<string>('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const progressStatusOptions = computed(() => [
+  ...(progressStatusDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: t(item.name),
+  })),
+]);
+
+const progressStatusLabelMap = computed<Record<string, string>>(() =>
+  Object.fromEntries(
+    (progressStatusDDL.value ?? []).map((item) => [String(item.code), item.name]),
+  ),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await Promise.all([loadSupplierDDL(), loadProgressStatusDDL()]);
+  await getPurchaseOrders('', true, 1, 10);
+});
+
+const getPurchaseOrders = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: PurchaseOrderReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value,
+    end_date: endDate.value,
+    supplier_id: selectedSupplierId.value,
+    progress_status: selectedProgressStatus.value,
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result = (await purchaseOrderService.readAnyPaginate(
+    request,
+  )) as ServiceResponse<Collection<Array<PurchaseOrder>> | null>;
+
+  if (result.success && result.data) {
+    purchaseOrderLists.value = result.data;
+  }
+
+  emits('loading-state', false);
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: selectedSupplierId.value ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadProgressStatusDDL = async () => {
+  const result = await purchaseOrderService.readProgressStatuses();
+
+  if (result.success && result.data) {
+    progressStatusDDL.value = result.data;
+  }
+};
+
+const clearSupplierFilter = async () => {
+  selectedSupplierId.value = null;
+  await getPurchaseOrders(searchText.value, true, 1, purchaseOrderLists.value?.meta.per_page ?? 10);
+};
+
+const clearProgressStatusFilter = async () => {
+  selectedProgressStatus.value = null;
+  await getPurchaseOrders(searchText.value, true, 1, purchaseOrderLists.value?.meta.per_page ?? 10);
+};
+
+const handleDataListChange = async (emittedData: DataListEmittedData) => {
+  await getPurchaseOrders(
+    emittedData.search.text,
+    true,
+    emittedData.pagination.page,
+    emittedData.pagination.per_page,
+  );
+};
+
+const viewSelected = (index: number) => {
+  expandDetail.value = expandDetail.value === index ? null : index;
+};
+
+const editSelected = (index: number) => {
+  if (!purchaseOrderLists.value?.data?.[index]) return;
+  router.push({
+    name: 'side-menu-purchase-order-edit',
+    params: { ulid: purchaseOrderLists.value.data[index].ulid },
+  });
+};
+
+const deleteSelected = (index: number) => {
+  if (!purchaseOrderLists.value?.data?.[index]) return;
+  deleteUlid.value = purchaseOrderLists.value.data[index].ulid;
+  deleteModalShow.value = true;
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = {
+    title,
+    content,
+  };
+  emits('show-notification', notification);
+};
+
+const confirmDelete = async () => {
+  emits('loading-state', true);
+  const result = await purchaseOrderService.delete(deleteUlid.value);
+  emits('loading-state', false);
+  deleteModalShow.value = false;
+
+  if (result.success) {
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(t('views.purchase_order.alert.delete.title'), t('views.purchase_order.alert.delete.message'));
+    await getPurchaseOrders(searchText.value, true, purchaseOrderLists.value?.meta.current_page ?? 1, purchaseOrderLists.value?.meta.per_page ?? 10);
+  }
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12">
+      <div class="grid grid-cols-12 gap-4 mb-5">
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.start_date') }}</FormLabel>
+          <FormInputDateTime v-model="startDate"
+            @change="getPurchaseOrders(searchText, true, 1, purchaseOrderLists?.meta.per_page ?? 10)" />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.end_date') }}</FormLabel>
+          <FormInputDateTime v-model="endDate"
+            @change="getPurchaseOrders(searchText, true, 1, purchaseOrderLists?.meta.per_page ?? 10)" />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.fields.supplier_id') }}</FormLabel>
+          <FormSelectSearch v-model="selectedSupplierId" v-model:search="supplierSearch" :options="supplierOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchaseOrders(searchText, true, 1, purchaseOrderLists?.meta.per_page ?? 10)"
+            @search="loadSupplierDDL" @clear="clearSupplierFilter" />
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>{{ t('views.purchase_order.filters.progress_status') }}</FormLabel>
+          <FormSelectSearch v-model="selectedProgressStatus" :options="progressStatusOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchaseOrders(searchText, true, 1, purchaseOrderLists?.meta.per_page ?? 10)"
+            @clear="clearProgressStatusFilter" />
+        </div>
+      </div>
+
+      <DataListFlex :data="purchaseOrderLists" :enable-search="true" :can-print="true" :can-export="true"
+        :rows="purchaseOrderLists?.data ?? []" row-class="bg-white dark:bg-darkmode-600"
+        :pagination="purchaseOrderLists ? purchaseOrderLists.meta : null" @dataListChanged="handleDataListChange">
+        <template #row="{ item, index }">
+          <div class="col-span-12 md:col-span-12 lg:col-span-4 self-start">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.code') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as PurchaseOrder).code ?? '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.date') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">
+                  {{ (item as PurchaseOrder).date ? formatDate((item as PurchaseOrder).date, 'DD-MMM-YYYY HH:mm:ss') :
+                  '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.supplier_id') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as
+                  PurchaseOrder).supplier?.name ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.due_days') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as PurchaseOrder).due_days ?? 0 }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_order.fields.remarks') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200 break-words">{{ (item as
+                  PurchaseOrder).remarks?.trim() || '-' }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-6 lg:col-span-4 self-start md:pr-3 lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.purchase_order.field_groups.summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{
+                  t('views.purchase_order.fields.item_total_before_global_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as
+                  PurchaseOrder).item_total_before_global_discount ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.global_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as
+                  PurchaseOrder).global_discount ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{
+                  t('views.purchase_order.fields.item_total_after_global_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as
+                  PurchaseOrder).item_total_after_global_discount ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.vat_base') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrencyRounded((item as
+                  PurchaseOrder).vat_base ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.vat') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrencyRounded((item as
+                  PurchaseOrder).vat ?? 0) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.rounding') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as
+                  PurchaseOrder).rounding ?? 0) }}</div>
+                <div class="col-span-4 text-primary font-medium">{{ t('views.purchase_order.fields.amount_payable') }}
+                </div>
+                <div class="col-span-8 text-right text-primary font-medium">{{ formatCurrency((item as
+                  PurchaseOrder).amount_payable ?? 0) }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 md:col-span-5 lg:col-span-3 self-start md:pl-3 lg:pl-4">
+            <div class="space-y-4">
+              <div class="space-y-2">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.field_groups.progress') }}
+                </div>
+                <div class="rounded-md border border-slate-200/60 dark:border-darkmode-400 px-3 py-3">
+                  <div class="flex items-center justify-between gap-2">
+                    <span class="text-xs text-slate-500">{{ t('views.purchase_order.fields.progress_status') }}</span>
+                    <span
+                      class="inline-flex rounded-full px-2 py-1 text-[11px] font-medium"
+                      :class="getProgressStatusBadgeClass((item as PurchaseOrder).progress_status)"
+                    >
+                      {{ t(progressStatusLabelMap[(item as PurchaseOrder).progress_status ?? '']
+                        ?? 'views.purchase_order.filters.progress_status_unlinked') }}
+                    </span>
+                  </div>
+                  <div class="mt-3 grid grid-cols-12 gap-x-3 gap-y-2 text-xs">
+                    <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.item_total_count') }}</div>
+                    <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{
+                      formatQuantityValue((item as PurchaseOrder).item_total_count ?? 0, 0) }}</div>
+                    <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.item_matched_count') }}</div>
+                    <div class="col-span-5 text-right text-success">{{ formatQuantityValue((item as
+                      PurchaseOrder).item_matched_count ?? 0, 0) }}</div>
+                    <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.item_less_count') }}</div>
+                    <div class="col-span-5 text-right text-warning">{{ formatQuantityValue((item as
+                      PurchaseOrder).item_less_count ?? 0, 0) }}</div>
+                    <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.item_more_count') }}</div>
+                    <div class="col-span-5 text-right text-danger">{{ formatQuantityValue((item as
+                      PurchaseOrder).item_more_count ?? 0, 0) }}</div>
+                    <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.item_unlinked_count') }}
+                    </div>
+                    <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{
+                      formatQuantityValue((item as PurchaseOrder).item_unlinked_count ?? 0, 0) }}</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="space-y-2">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.fields.down_payment') }}
+                </div>
+                <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                  <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.amount_paid_down_payment') }}
+                  </div>
+                  <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as
+                    PurchaseOrder).amount_paid_down_payment ?? 0) }}</div>
+                  <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.amount_allocated_down_payment')
+                    }}</div>
+                  <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as
+                    PurchaseOrder).amount_allocated_down_payment ?? 0) }}</div>
+                  <div class="col-span-7 text-slate-500">{{ t('views.purchase_order.fields.amount_refunded_down_payment')
+                    }}</div>
+                  <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency((item as
+                    PurchaseOrder).amount_refunded_down_payment ?? 0) }}</div>
+                  <div class="col-span-7 text-primary font-medium">{{
+                    t('views.purchase_order.fields.amount_available_down_payment') }}</div>
+                  <div class="col-span-5 text-right text-primary font-medium">{{ formatCurrency((item as
+                    PurchaseOrder).amount_available_down_payment ?? 0) }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            class="col-span-12 md:col-span-1 lg:col-span-1 self-center flex justify-end items-center gap-2 pt-2 md:flex-col lg:flex-col">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1"
+              @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+
+          <div v-if="expandDetail === index"
+            class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3">
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 lg:col-span-6 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.purchase_order.field_groups.items') }}
+                </div>
+                <div v-if="!(item as PurchaseOrder).items?.length" class="text-xs text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+                <div v-else class="space-y-3 rounded-md border border-slate-200/60 dark:border-darkmode-400 p-3">
+                  <div v-for="poItem in (item as PurchaseOrder).items" :key="poItem.id"
+                    class="border-b border-slate-200/60 pb-3 text-sm last:border-b-0 last:pb-0 dark:border-darkmode-400">
+                    <div class="font-medium text-slate-700 dark:text-slate-200 break-words">
+                      {{ poItem.product_unit?.product?.name ?? '-' }}
+                    </div>
+                    <div class="mt-1 text-xs text-slate-500 break-words">
+                      {{ poItem.product_unit?.code ?? '-' }}{{ poItem.product_unit?.unit?.name ? `
+                      (${poItem.product_unit.unit.name})` : '' }}
+                    </div>
+                    <div
+                      class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-600 dark:text-slate-300">
+                      <span>
+                        {{ t('views.purchase_order.fields.qty') }}
+                        <span class="text-slate-700 dark:text-slate-200">{{ formatQuantityValue(poItem.qty ?? 0)
+                          }}</span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.purchase_order.fields.unit_name') }}
+                        <span class="text-slate-700 dark:text-slate-200">{{ poItem.product_unit?.unit?.name ?? '-'
+                          }}</span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.purchase_order.fields.product_unit_price') }}
+                        <span class="text-slate-700 dark:text-slate-200">{{ formatCurrency(poItem.product_unit_price ??
+                          0) }}</span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.purchase_order.fields.subtotal_after_discount') }}
+                        <span class="font-medium text-slate-700 dark:text-slate-200">{{
+                          formatCurrency(poItem.subtotal_after_discount ?? 0) }}</span>
+                      </span>
+                    </div>
+                    <div class="mt-2 grid grid-cols-12 gap-x-3 gap-y-1 text-xs">
+                      <div class="col-span-6 text-slate-500">{{ t('views.purchase_order.fields.qty_purchased_base') }}
+                      </div>
+                      <div class="col-span-6 text-right text-slate-700 dark:text-slate-200">{{
+                        formatQuantityValue(poItem.qty_purchased_base ?? 0) }}</div>
+                      <div class="col-span-6 text-slate-500">{{ t('views.purchase_order.fields.qty_outstanding_base') }}
+                      </div>
+                      <div class="col-span-6 text-right text-warning">{{ formatQuantityValue(
+                        poItem.qty_outstanding_base ?? 0) }}</div>
+                      <div class="col-span-6 text-slate-500">{{ t('views.purchase_order.fields.qty_excess_base') }}</div>
+                      <div class="col-span-6 text-right text-danger">{{ formatQuantityValue(
+                        poItem.qty_excess_base ?? 0) }}</div>
+                    </div>
+                    <div v-if="poItem.remarks?.trim()" class="mt-2 text-xs text-slate-500 break-words">
+                      {{ poItem.remarks }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 lg:col-span-6 space-y-4">
+                <div class="space-y-3">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                    {{ t('views.purchase_order.fields.global_discounts') }}
+                  </div>
+                  <div v-if="!(item as PurchaseOrder).global_discounts?.length" class="text-xs text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="space-y-2">
+                    <div v-for="discount in (item as PurchaseOrder).global_discounts" :key="discount.id"
+                      class="rounded-md border border-slate-200/60 dark:border-darkmode-400 px-3 py-2 grid grid-cols-12 gap-3 text-xs">
+                      <div class="col-span-3 text-slate-500">#{{ discount.sequence }}</div>
+                      <div class="col-span-5 text-slate-700 dark:text-slate-200">{{ discount.discount_type }}</div>
+                      <div class="col-span-4 text-right text-slate-700 dark:text-slate-200">{{
+                        formatCurrency(discount.discount_value ?? 0) }}</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="space-y-3">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                    {{ t('views.purchase_order.fields.down_payments') }}
+                  </div>
+                  <div v-if="!(item as PurchaseOrder).down_payments?.length" class="text-xs text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="space-y-2">
+                    <div v-for="downPayment in (item as PurchaseOrder).down_payments" :key="downPayment.id"
+                      class="rounded-md border border-slate-200/60 dark:border-darkmode-400 px-3 py-2 grid grid-cols-12 gap-3 text-xs">
+                      <div class="col-span-4 text-slate-700 dark:text-slate-200">{{ downPayment.code }}</div>
+                      <div class="col-span-4 text-slate-500">{{ downPayment.cash_account?.name ?? '-' }}</div>
+                      <div class="col-span-4 text-right text-slate-700 dark:text-slate-200">{{
+                        formatCurrency(downPayment.amount ?? 0) }}</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="space-y-3">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                    {{ t('views.purchase_order.fields.refunded_down_payments') }}
+                  </div>
+                  <div v-if="!(item as PurchaseOrder).refunded_down_payments?.length" class="text-xs text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="space-y-2">
+                    <div v-for="refundedDownPayment in (item as PurchaseOrder).refunded_down_payments"
+                      :key="refundedDownPayment.id"
+                      class="rounded-md border border-slate-200/60 dark:border-darkmode-400 px-3 py-2 grid grid-cols-12 gap-3 text-xs">
+                      <div class="col-span-4 text-slate-700 dark:text-slate-200">{{ refundedDownPayment.code }}</div>
+                      <div class="col-span-4 text-slate-500">{{ refundedDownPayment.cash_account?.name ?? '-' }}</div>
+                      <div class="col-span-4 text-right text-slate-700 dark:text-slate-200">{{
+                        formatCurrency(refundedDownPayment.amount ?? 0) }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">
+          {{ t('components.delete-modal.title') }}
+        </div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/purchase-receipt/PurchaseReceiptCreate.vue b/web/src/pages/purchase-receipt/PurchaseReceiptCreate.vue
new file mode 100644
index 000000000..c18e5257f
--- /dev/null
+++ b/web/src/pages/purchase-receipt/PurchaseReceiptCreate.vue
@@ -0,0 +1,1030 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { type TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductUnitPickerDialog from '@/components/Product/ProductUnitPickerDialog.vue';
+import ProductService from '@/services/ProductService';
+import PurchaseReceiptService from '@/services/PurchaseReceiptService';
+import PurchaseService from '@/services/PurchaseService';
+import SupplierService from '@/services/SupplierService';
+import WarehouseService from '@/services/WarehouseService';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Product } from '@/types/models/Product';
+import type { ProductUnit } from '@/types/models/ProductUnit';
+import type { Purchase } from '@/types/models/Purchase';
+import type { PurchaseItem } from '@/types/models/PurchaseItem';
+import type { PurchaseReceiptItemNestedStoreRequest } from '@/types/services/purchase-receipt/PurchaseReceiptRequest';
+// #endregion
+
+// #region Declarations
+type PurchaseOption = DropDownOption & {
+  ulid: string;
+  supplier_id: string | null;
+  supplier_name: string | null;
+};
+
+type PurchaseReceiptSerialFormItem = {
+  serial: string;
+};
+
+type PurchaseReceiptItemFormItem = PurchaseReceiptItemNestedStoreRequest & {
+  has_purchase_item_product: boolean;
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  product_unit_product_image_url?: string | null;
+  purchase_item_label?: string | null;
+  is_use_serial_number?: boolean;
+};
+
+type ProductUnitOption = {
+  product_unit_id: string;
+  product_unit_code: string;
+  product_name: string;
+  product_image_url?: string | null;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  is_use_serial_number: boolean;
+};
+
+const emits = defineEmits([
+  'loading-state',
+  'mode-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const { t } = useI18n();
+const router = useRouter();
+
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const purchaseReceiptService = new PurchaseReceiptService();
+const purchaseService = new PurchaseService();
+const supplierService = new SupplierService();
+const warehouseService = new WarehouseService();
+const productService = new ProductService();
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const purchaseReceiptForm: any = purchaseReceiptService.usePurchaseReceiptCreateForm();
+
+const selectedPurchaseData = ref<Purchase | null>(null);
+const initializing = ref<boolean>(true);
+const isSearchingProductUnit = ref<boolean>(false);
+const showProductUnitModal = ref<boolean>(false);
+const editingItemIndex = ref<number | null>(null);
+const productSearchText = ref<string>('');
+const supplierSearch = ref<string>('');
+const purchaseSearch = ref<string>('');
+const warehouseSearch = ref<string>('');
+
+const supplierDDL = ref<Array<DropDownOption>>([]);
+const purchaseDDL = ref<Array<PurchaseOption>>([]);
+const warehouseDDL = ref<Array<DropDownOption>>([]);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.purchase_receipt.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_receipt.field_groups.purchase_receipt_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_receipt.field_groups.items',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierOptions = computed(() =>
+  supplierDDL.value.map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const purchaseOptions = computed(() =>
+  purchaseDDL.value.map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const warehouseOptions = computed(() =>
+  warehouseDDL.value.map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const productUnitDialogColumns = computed(() => [
+  {
+    key: 'unit_name',
+    label: t('views.product.table.cols.unit'),
+  },
+  {
+    key: 'base_unit_name',
+    label: t('views.product.fields.base_unit'),
+  },
+  {
+    key: 'conversion_value',
+    label: t('views.purchase_receipt.fields.product_unit_conversion_value'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+]);
+// #endregion
+
+// #region Vue Core
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  purchaseReceiptForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  await Promise.all([loadSupplierDDL(), loadPurchaseDDL(), loadWarehouseDDL()]);
+  initializing.value = false;
+});
+// #endregion
+
+// #region Methods - Helpers
+const getItems = () => purchaseReceiptForm.items as PurchaseReceiptItemFormItem[];
+
+const getItemFieldErrors = (field: string) => (purchaseReceiptForm.errors as any)[field];
+
+const invalidField = (field: string) => purchaseReceiptForm.invalid(field);
+
+const invalidItemField = (field: string) => purchaseReceiptForm.invalid(field as any);
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  alertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  title: string,
+  alertList: Record<string, Array<string>> | null,
+) => {
+  const payload: AlertPlaceholderProps = {
+    alertType,
+    title,
+    alertList,
+  };
+
+  emits('show-alertplaceholder', payload);
+};
+
+const showNotification = (title: string, content: string) => {
+  const payload: NotificationData = {
+    title,
+    content,
+  };
+
+  emits('show-notification', payload);
+};
+
+const clearItemErrors = () => {
+  Object.keys(purchaseReceiptForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseReceiptForm.forgetError(key as any);
+    }
+  });
+};
+
+const appendDropDownOption = (
+  target: { value: Array<DropDownOption> },
+  option: DropDownOption | null | undefined,
+) => {
+  if (!option?.code) return;
+
+  if (!target.value.some((item) => item.code === option.code)) {
+    target.value = [...target.value, option];
+  }
+};
+
+const appendPurchaseOption = (purchase: Purchase | null | undefined) => {
+  if (!purchase?.id || !purchase.ulid) return;
+
+  if (!purchaseDDL.value.some((item) => item.code === purchase.id)) {
+    purchaseDDL.value = [
+      ...purchaseDDL.value,
+      {
+        code: purchase.id,
+        name: `${purchase.code} - ${purchase.supplier?.name ?? '-'}`,
+        ulid: purchase.ulid,
+        supplier_id: purchase.supplier?.id ?? null,
+        supplier_name: purchase.supplier?.name ?? null,
+      },
+    ];
+  }
+};
+
+const buildBaseUnitName = (product: Product | null | undefined, conversionValue: number) => {
+  if (!product || conversionValue === 1) {
+    return '';
+  }
+
+  return product.product_units.find((unit) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+};
+
+const formatPurchaseItemLabel = (purchaseItem: PurchaseItem | null | undefined) => {
+  if (!purchaseItem) return null;
+
+  const productUnit = purchaseItem.product_unit;
+  const productCode = productUnit?.code ?? '';
+  const productName = productUnit?.product?.name ?? '-';
+
+  return productCode ? `[${productCode}] ${productName}` : productName;
+};
+
+const buildManualItemFromProductUnit = (option: ProductUnitOption): PurchaseReceiptItemFormItem => ({
+  has_purchase_item_product: false,
+  qty: 1,
+  product_unit_id: option.product_unit_id,
+  product_unit_conversion_value: option.conversion_value,
+  remarks: '',
+  serials: [],
+  product_unit_product_code: option.product_unit_code,
+  product_unit_product_name: option.product_name,
+  product_unit_unit_name: option.unit_name,
+  product_unit_base_unit_name: option.base_unit_name,
+  product_unit_product_image_url: option.product_image_url ?? null,
+  purchase_item_label: null,
+  is_use_serial_number: option.is_use_serial_number,
+});
+
+const buildReceiptItemFromPurchaseItem = (purchaseItem: PurchaseItem): PurchaseReceiptItemFormItem => {
+  const productUnit = purchaseItem.product_unit;
+  const product = productUnit?.product;
+  const conversionValue = Number(purchaseItem.product_unit_conversion_value ?? productUnit?.conversion_value ?? 1);
+  const outstandingBase = Number(purchaseItem.qty_outstanding_base ?? 0);
+  const defaultQty = outstandingBase > 0
+    ? outstandingBase / Math.max(conversionValue, 1)
+    : Number(purchaseItem.qty ?? 0);
+
+  return {
+    has_purchase_item_product: true,
+    qty: defaultQty > 0 ? defaultQty : 1,
+    product_unit_id: productUnit?.id ?? '',
+    product_unit_conversion_value: conversionValue,
+    remarks: purchaseItem.remarks ?? '',
+    serials: [],
+    product_unit_product_code: productUnit?.code ?? '',
+    product_unit_product_name: product?.name ?? '-',
+    product_unit_unit_name: productUnit?.unit?.name ?? '',
+    product_unit_base_unit_name: buildBaseUnitName(product, Number(productUnit?.conversion_value ?? conversionValue)),
+    product_unit_product_image_url: product?.main_product_image?.url ?? null,
+    purchase_item_label: formatPurchaseItemLabel(purchaseItem),
+    is_use_serial_number: Boolean(product?.is_use_serial_number),
+  };
+};
+// #endregion
+
+// #region Methods - Purchase Receipt
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: (purchaseReceiptForm.supplier_id as string | null | undefined) ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadPurchaseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: null,
+    end_date: undefined,
+    supplier_id: (purchaseReceiptForm.supplier_id as string | null) ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    purchaseDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `${item.code} - ${item.supplier?.name ?? '-'}`,
+      ulid: item.ulid,
+      supplier_id: item.supplier?.id ?? null,
+      supplier_name: item.supplier?.name ?? null,
+    }));
+  } else {
+    purchaseDDL.value = [];
+  }
+
+  appendPurchaseOption(selectedPurchaseData.value);
+};
+
+const loadWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: (purchaseReceiptForm.warehouse_id as string | null | undefined) ?? undefined,
+    status: undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    warehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const setCode = () => {
+  purchaseReceiptForm.forgetError('code');
+
+  if (purchaseReceiptForm.code === '_AUTO_') {
+    purchaseReceiptForm.setData({ code: '' });
+    return;
+  }
+
+  purchaseReceiptForm.setData({ code: '_AUTO_' });
+};
+
+const loadPurchaseDetail = async (purchaseUlid: string) => {
+  const result = await purchaseService.read(purchaseUlid);
+
+  if (result.success && result.data) {
+    selectedPurchaseData.value = result.data;
+    appendPurchaseOption(result.data);
+
+    if (result.data.supplier) {
+      appendDropDownOption(supplierDDL, {
+        code: result.data.supplier.id,
+        name: result.data.supplier.name,
+      });
+    }
+
+    return result.data;
+  }
+
+  showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  return null;
+};
+
+const syncItemsFromPurchase = (purchase: Purchase) => {
+  purchaseReceiptForm.setData({
+    supplier_id: purchase.supplier?.id ?? null,
+    items: (purchase.items ?? []).map((item) => buildReceiptItemFromPurchaseItem(item)) as any,
+  });
+
+  clearItemErrors();
+};
+
+const clearPurchase = async () => {
+  selectedPurchaseData.value = null;
+  purchaseReceiptForm.setData({
+    purchase_id: null,
+    items: [] as any,
+  });
+  purchaseReceiptForm.forgetError('purchase_id');
+  clearItemErrors();
+  await loadPurchaseDDL();
+};
+
+const clearSupplier = async () => {
+  purchaseReceiptForm.setData({
+    supplier_id: null,
+    purchase_id: null,
+    items: [] as any,
+  });
+  selectedPurchaseData.value = null;
+  purchaseReceiptForm.forgetError('supplier_id');
+  purchaseReceiptForm.forgetError('purchase_id');
+  clearItemErrors();
+  await loadPurchaseDDL();
+};
+
+const clearWarehouse = () => {
+  purchaseReceiptForm.setData({ warehouse_id: null });
+  purchaseReceiptForm.forgetError('warehouse_id');
+};
+
+const handleSupplierChanged = async () => {
+  purchaseReceiptForm.validate('supplier_id');
+
+  if (purchaseReceiptForm.purchase_id) {
+    return;
+  }
+
+  await loadPurchaseDDL();
+};
+
+const handlePurchaseChanged = async (purchaseId: string | number | null) => {
+  purchaseReceiptForm.validate('purchase_id');
+
+  if (!purchaseId) {
+    await clearPurchase();
+    return;
+  }
+
+  const option = purchaseDDL.value.find((item) => item.code === purchaseId);
+  if (!option) {
+    return;
+  }
+
+  const purchase = await loadPurchaseDetail(option.ulid);
+  if (!purchase) {
+    return;
+  }
+
+  syncItemsFromPurchase(purchase);
+};
+
+const reloadItemsFromPurchase = async () => {
+  if (!purchaseReceiptForm.purchase_id) {
+    return;
+  }
+
+  const option = purchaseDDL.value.find((item) => item.code === purchaseReceiptForm.purchase_id);
+  if (!option) {
+    return;
+  }
+
+  const purchase = await loadPurchaseDetail(option.ulid);
+  if (!purchase) {
+    return;
+  }
+
+  syncItemsFromPurchase(purchase);
+};
+// #endregion
+
+// #region Methods - Items
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    default_vat_profile_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: undefined,
+    refresh: true,
+    limit: 50,
+  } as any);
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as Product[];
+
+    productUnitOptions.value = products.flatMap((product: Product) => {
+      const units = product.product_units ?? [];
+      const baseUnitName =
+        units.find((unit) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+
+      return units.map((unit: ProductUnit) => ({
+        product_unit_id: unit.id,
+        product_unit_code: unit.code,
+        product_name: product.name,
+        product_image_url: product.main_product_image?.url ?? null,
+        unit_name: unit.unit?.name ?? '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(unit.conversion_value ?? 1),
+        is_use_serial_number: Boolean(product.is_use_serial_number),
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const openAddProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  editingItemIndex.value = null;
+  showProductUnitModal.value = true;
+};
+
+const openChangeProductUnit = (index: number) => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  editingItemIndex.value = index;
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  const items = getItems();
+  const serials = editingItemIndex.value === null
+    ? []
+    : items[editingItemIndex.value]?.is_use_serial_number
+      ? [...(items[editingItemIndex.value]?.serials ?? [])]
+      : [];
+
+  const baseData = buildManualItemFromProductUnit(option);
+  baseData.serials = serials;
+
+  if (editingItemIndex.value === null) {
+    purchaseReceiptForm.items.push(baseData as any);
+  } else {
+    const currentItem = items[editingItemIndex.value];
+
+    purchaseReceiptForm.items[editingItemIndex.value] = {
+      ...currentItem,
+      ...baseData,
+      qty: currentItem?.qty ?? 1,
+      remarks: currentItem?.remarks ?? '',
+      serials: baseData.is_use_serial_number ? serials : [],
+    };
+  }
+
+  clearItemErrors();
+  showProductUnitModal.value = false;
+  editingItemIndex.value = null;
+};
+
+const removeItem = (index: number) => {
+  const items = getItems();
+  items.splice(index, 1);
+  clearItemErrors();
+};
+
+const addSerial = (index: number) => {
+  const item = getItems()[index];
+  if (!item) return;
+
+  item.serials.push({ serial: '' });
+  purchaseReceiptForm.validate(`items.${index}.serials` as any);
+};
+
+const removeSerial = (index: number, serialIndex: number) => {
+  const item = getItems()[index];
+  if (!item) return;
+
+  item.serials.splice(serialIndex, 1);
+  purchaseReceiptForm.validate(`items.${index}.serials` as any);
+};
+// #endregion
+
+// #region Actions
+const onSubmit = async () => {
+  if (purchaseReceiptForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseReceiptForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const originalItems = getItems();
+  const cleanedItems = originalItems.map((item) => ({
+    qty: Number(item.qty ?? 0),
+    product_unit_id: item.product_unit_id,
+    product_unit_conversion_value: Number(item.product_unit_conversion_value ?? 0),
+    remarks: item.remarks ?? '',
+    serials: item.serials.map((serial) => ({
+      serial: serial.serial,
+    })),
+  }));
+  const backupItems = [...originalItems];
+
+  purchaseReceiptForm.items = cleanedItems as any;
+  emits('loading-state', true);
+
+  try {
+    await purchaseReceiptForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(
+      t('views.purchase_receipt.alert.create.title'),
+      t('views.purchase_receipt.alert.create.message'),
+    );
+    router.push({ name: 'side-menu-purchase-receipt-list' });
+  } catch (error) {
+    purchaseReceiptForm.items = backupItems as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+// #endregion
+</script>
+
+<template>
+  <form v-if="selectedUserLocation && !initializing" id="purchaseReceiptForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput v-model="purchaseReceiptForm.company_id" type="hidden" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput v-model="purchaseReceiptForm.branch_id" type="hidden" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('code') }">
+                {{ t('views.purchase_receipt.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseReceiptForm.code"
+                :class="{ 'border-danger': invalidField('code') }"
+                :placeholder="t('views.purchase_receipt.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseReceiptForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('date') }">
+                {{ t('views.purchase_receipt.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseReceiptForm.date"
+                :class="{ 'border-danger': invalidField('date') }"
+                :placeholder="t('views.purchase_receipt.fields.date')"
+                @change="purchaseReceiptForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('supplier_id') }">
+                {{ t('views.purchase_receipt.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseReceiptForm.supplier_id"
+                v-model:search="supplierSearch"
+                :options="supplierOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :disabled="Boolean(purchaseReceiptForm.purchase_id)"
+                :class="{ 'border-danger': invalidField('supplier_id') }"
+                @change="handleSupplierChanged"
+                @search="loadSupplierDDL"
+                @clear="clearSupplier"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.supplier_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('purchase_id') }">
+                {{ t('views.purchase_receipt.fields.purchase_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseReceiptForm.purchase_id"
+                v-model:search="purchaseSearch"
+                :options="purchaseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('purchase_id') }"
+                @change="(value) => handlePurchaseChanged(value as string | number | null)"
+                @search="loadPurchaseDDL"
+                @clear="clearPurchase"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.purchase_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('warehouse_id') }">
+                {{ t('views.purchase_receipt.fields.warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseReceiptForm.warehouse_id"
+                v-model:search="warehouseSearch"
+                :options="warehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('warehouse_id') }"
+                @change="purchaseReceiptForm.validate('warehouse_id')"
+                @search="loadWarehouseDDL"
+                @clear="clearWarehouse"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.warehouse_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4 flex flex-col justify-center">
+              <FormLabel :class="{ 'text-danger': invalidField('is_posted') }">
+                {{ t('views.purchase_receipt.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="purchaseReceiptForm.is_posted" type="checkbox" />
+              </FormSwitch>
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.is_posted" />
+            </div>
+          </div>
+
+          <div v-if="purchaseReceiptForm.purchase_id" class="mt-4 rounded-md border border-primary/20 bg-primary/5 px-4 py-3 text-sm text-slate-700 dark:text-slate-200">
+            {{ t('views.purchase_receipt.fields.purchase_link_hint') }}
+          </div>
+
+          <div class="mt-4">
+            <FormLabel :class="{ 'text-danger': invalidField('remarks') }">
+              {{ t('views.purchase_receipt.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="purchaseReceiptForm.remarks"
+              :class="{ 'border-danger': invalidField('remarks') }"
+              :placeholder="t('views.purchase_receipt.fields.remarks')"
+              @change="purchaseReceiptForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="purchaseReceiptForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div class="text-sm text-slate-500">
+              {{ t('views.purchase_receipt.fields.item_count') }}: {{ getItems().length }}
+            </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <Button
+                v-if="purchaseReceiptForm.purchase_id"
+                type="button"
+                variant="outline-primary"
+                @click="reloadItemsFromPurchase"
+              >
+                <Lucide icon="RefreshCw" class="mr-2 h-4 w-4" />
+                {{ t('components.buttons.reload') }}
+              </Button>
+              <Button
+                v-else
+                type="button"
+                variant="outline-primary"
+                @click="openAddProductUnit"
+              >
+                <Lucide icon="Plus" class="mr-2 h-4 w-4" />
+                {{ t('components.buttons.add') }}
+              </Button>
+            </div>
+          </div>
+
+          <FormErrorMessages :messages="purchaseReceiptForm.errors.items" />
+
+          <div v-if="getItems().length === 0" class="rounded-md border border-dashed border-slate-300 px-4 py-6 text-center text-sm text-slate-500 dark:border-darkmode-400">
+            {{ t('views.purchase_receipt.fields.items_empty') }}
+          </div>
+
+          <div
+            v-for="(item, index) in getItems()"
+            :key="`${item.has_purchase_item_product ? 'purchase' : 'manual'}-${item.product_unit_id ?? 'item'}-${index}`"
+            class="rounded-md border border-slate-200/70 p-4 dark:border-darkmode-400"
+          >
+            <div class="flex flex-wrap items-start justify-between gap-3">
+              <div>
+                <div class="text-sm font-medium text-slate-900 dark:text-slate-100">
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+                <div class="text-xs text-slate-500">
+                  <span v-if="item.product_unit_product_code">[{{ item.product_unit_product_code }}]</span>
+                  <span v-if="item.product_unit_unit_name">
+                    {{ item.product_unit_product_code ? ' - ' : '' }}{{ item.product_unit_unit_name }}
+                  </span>
+                  <span v-if="item.product_unit_base_unit_name">
+                    / {{ item.product_unit_base_unit_name }}
+                  </span>
+                </div>
+                <div v-if="item.purchase_item_label" class="mt-1 text-xs text-primary">
+                  {{ item.purchase_item_label }}
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <Button
+                  v-if="!purchaseReceiptForm.purchase_id"
+                  type="button"
+                  size="sm"
+                  variant="outline-primary"
+                  @click="openChangeProductUnit(index)"
+                >
+                  <Lucide icon="Pencil" class="h-4 w-4" />
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline-secondary"
+                  @click="removeItem(index)"
+                >
+                  <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                </Button>
+              </div>
+            </div>
+
+            <div class="mt-4 grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12 lg:col-span-4">
+                <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.product_unit_id`) }">
+                  {{ t('views.purchase_receipt.fields.product_unit_id') }}
+                </FormLabel>
+                <FormInput
+                  :model-value="item.product_unit_product_code ? `[${item.product_unit_product_code}] ${item.product_unit_product_name}` : item.product_unit_product_name"
+                  readonly
+                />
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.product_unit_id`)" />
+              </div>
+
+              <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.qty`) }">
+                  {{ t('views.purchase_receipt.fields.qty') }}
+                </FormLabel>
+                <FormInput
+                  :id="`items.${index}.qty`"
+                  v-model="item.qty"
+                  type="number"
+                  min="0"
+                  step="any"
+                  :class="{ 'border-danger': invalidItemField(`items.${index}.qty`) }"
+                  @change="purchaseReceiptForm.validate(`items.${index}.qty` as any)"
+                />
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.qty`)" />
+              </div>
+
+              <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.product_unit_conversion_value`) }">
+                  {{ t('views.purchase_receipt.fields.product_unit_conversion_value') }}
+                </FormLabel>
+                <FormInput
+                  v-model="item.product_unit_conversion_value"
+                  readonly
+                  :class="{ 'border-danger': invalidItemField(`items.${index}.product_unit_conversion_value`) }"
+                />
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+              </div>
+
+              <div class="col-span-12 lg:col-span-4">
+                <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.remarks`) }">
+                  {{ t('views.purchase_receipt.fields.remarks') }}
+                </FormLabel>
+                <FormTextarea
+                  v-model="item.remarks"
+                  :class="{ 'border-danger': invalidItemField(`items.${index}.remarks`) }"
+                  :placeholder="t('views.purchase_receipt.fields.remarks')"
+                  @change="purchaseReceiptForm.validate(`items.${index}.remarks` as any)"
+                />
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.remarks`)" />
+              </div>
+
+              <div v-if="item.is_use_serial_number" class="col-span-12">
+                <div class="mb-2 flex items-center justify-between">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.serials`) }">
+                    {{ t('views.product.fields.serial_number') }}
+                  </FormLabel>
+                  <Button type="button" size="sm" variant="outline-primary" @click="addSerial(index)">
+                    <Lucide icon="Plus" class="mr-1 h-3 w-3" />
+                    {{ t('components.buttons.create') }}
+                  </Button>
+                </div>
+
+                <div v-if="item.serials.length === 0" class="text-xs italic text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-3 lg:grid-cols-4">
+                  <div v-for="(serial, serialIndex) in item.serials" :key="`${index}-${serialIndex}`" class="flex gap-2">
+                    <FormInput
+                      v-model="serial.serial"
+                      :placeholder="t('views.product.fields.serial_number')"
+                      :class="{ 'border-danger': invalidItemField(`items.${index}.serials.${serialIndex}.serial`) }"
+                      @change="
+                        purchaseReceiptForm.validate(`items.${index}.serials.${serialIndex}.serial` as any);
+                        purchaseReceiptForm.validate(`items.${index}.serials` as any);
+                      "
+                    />
+                    <Button type="button" variant="outline-secondary" @click="removeSerial(index, serialIndex)">
+                      <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.serials`)" />
+                <FormErrorMessages
+                  v-for="(_, serialIndex) in item.serials"
+                  :key="`serial-error-${index}-${serialIndex}`"
+                  :messages="getItemFieldErrors(`items.${index}.serials.${serialIndex}.serial`)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button
+            type="submit"
+            variant="primary"
+            class="w-32 shadow-md"
+            :disabled="purchaseReceiptForm.validating || purchaseReceiptForm.hasErrors"
+          >
+            <Lucide v-if="purchaseReceiptForm.validating" icon="Loader" class="mr-2 h-4 w-4 animate-spin" />
+            <Lucide v-else icon="Save" class="mr-2 h-4 w-4" />
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <ProductUnitPickerDialog
+    v-if="selectedUserLocation"
+    v-model:search-text="productSearchText"
+    :open="showProductUnitModal"
+    :title="t('views.purchase_receipt.fields.product_unit_id')"
+    :is-searching="isSearchingProductUnit"
+    :options="productUnitOptions"
+    :columns="productUnitDialogColumns"
+    @close="showProductUnitModal = false"
+    @search="searchProductUnits"
+    @select="selectProductUnit($event as ProductUnitOption)"
+  />
+</template>
diff --git a/web/src/pages/purchase-receipt/PurchaseReceiptEdit.vue b/web/src/pages/purchase-receipt/PurchaseReceiptEdit.vue
new file mode 100644
index 000000000..97453e3cf
--- /dev/null
+++ b/web/src/pages/purchase-receipt/PurchaseReceiptEdit.vue
@@ -0,0 +1,1131 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatDate } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { type TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductUnitPickerDialog from '@/components/Product/ProductUnitPickerDialog.vue';
+import ProductService from '@/services/ProductService';
+import PurchaseReceiptService from '@/services/PurchaseReceiptService';
+import PurchaseService from '@/services/PurchaseService';
+import SupplierService from '@/services/SupplierService';
+import WarehouseService from '@/services/WarehouseService';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Product } from '@/types/models/Product';
+import type { ProductUnit } from '@/types/models/ProductUnit';
+import type { Purchase } from '@/types/models/Purchase';
+import type { PurchaseItem } from '@/types/models/PurchaseItem';
+import type { PurchaseReceipt } from '@/types/models/PurchaseReceipt';
+import type { PurchaseReceiptItemNestedStoreRequest } from '@/types/services/purchase-receipt/PurchaseReceiptRequest';
+// #endregion
+
+// #region Declarations
+type PurchaseOption = DropDownOption & {
+  ulid: string;
+  supplier_id: string | null;
+  supplier_name: string | null;
+};
+
+type PurchaseReceiptSerialFormItem = {
+  serial: string;
+};
+
+type PurchaseReceiptItemFormItem = PurchaseReceiptItemNestedStoreRequest & {
+  has_purchase_item_product: boolean;
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  product_unit_product_image_url?: string | null;
+  purchase_item_label?: string | null;
+  is_use_serial_number?: boolean;
+};
+
+type ProductUnitOption = {
+  product_unit_id: string;
+  product_unit_code: string;
+  product_name: string;
+  product_image_url?: string | null;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  is_use_serial_number: boolean;
+};
+
+const emits = defineEmits([
+  'loading-state',
+  'mode-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const purchaseReceiptService = new PurchaseReceiptService();
+const purchaseService = new PurchaseService();
+const supplierService = new SupplierService();
+const warehouseService = new WarehouseService();
+const productService = new ProductService();
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const purchaseReceiptForm: any = purchaseReceiptService.usePurchaseReceiptEditForm(route.params.ulid as string);
+
+const purchaseReceiptData = ref<PurchaseReceipt | null>(null);
+const selectedPurchaseData = ref<Purchase | null>(null);
+const initializing = ref<boolean>(true);
+const isSearchingProductUnit = ref<boolean>(false);
+const showProductUnitModal = ref<boolean>(false);
+const editingItemIndex = ref<number | null>(null);
+const productSearchText = ref<string>('');
+const supplierSearch = ref<string>('');
+const purchaseSearch = ref<string>('');
+const warehouseSearch = ref<string>('');
+
+const supplierDDL = ref<Array<DropDownOption>>([]);
+const purchaseDDL = ref<Array<PurchaseOption>>([]);
+const warehouseDDL = ref<Array<DropDownOption>>([]);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.purchase_receipt.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_receipt.field_groups.purchase_receipt_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.purchase_receipt.field_groups.items',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierOptions = computed(() =>
+  supplierDDL.value.map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const purchaseOptions = computed(() =>
+  purchaseDDL.value.map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const warehouseOptions = computed(() =>
+  warehouseDDL.value.map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const productUnitDialogColumns = computed(() => [
+  {
+    key: 'unit_name',
+    label: t('views.product.table.cols.unit'),
+  },
+  {
+    key: 'base_unit_name',
+    label: t('views.product.fields.base_unit'),
+  },
+  {
+    key: 'conversion_value',
+    label: t('views.purchase_receipt.fields.product_unit_conversion_value'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+]);
+// #endregion
+
+// #region Vue Core
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const loaded = await loadData();
+  if (!loaded) {
+    return;
+  }
+
+  await Promise.all([loadSupplierDDL(), loadPurchaseDDL(), loadWarehouseDDL()]);
+  initializing.value = false;
+});
+// #endregion
+
+// #region Methods - Helpers
+const getItems = () => purchaseReceiptForm.items as PurchaseReceiptItemFormItem[];
+
+const getItemFieldErrors = (field: string) => (purchaseReceiptForm.errors as any)[field];
+
+const invalidField = (field: string) => purchaseReceiptForm.invalid(field);
+
+const invalidItemField = (field: string) => purchaseReceiptForm.invalid(field as any);
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  alertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  title: string,
+  alertList: Record<string, Array<string>> | null,
+) => {
+  const payload: AlertPlaceholderProps = {
+    alertType,
+    title,
+    alertList,
+  };
+
+  emits('show-alertplaceholder', payload);
+};
+
+const showNotification = (title: string, content: string) => {
+  const payload: NotificationData = {
+    title,
+    content,
+  };
+
+  emits('show-notification', payload);
+};
+
+const clearItemErrors = () => {
+  Object.keys(purchaseReceiptForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseReceiptForm.forgetError(key as any);
+    }
+  });
+};
+
+const appendDropDownOption = (
+  target: { value: Array<DropDownOption> },
+  option: DropDownOption | null | undefined,
+) => {
+  if (!option?.code) return;
+
+  if (!target.value.some((item) => item.code === option.code)) {
+    target.value = [...target.value, option];
+  }
+};
+
+const appendPurchaseOption = (purchase: Purchase | null | undefined) => {
+  if (!purchase?.id || !purchase.ulid) return;
+
+  if (!purchaseDDL.value.some((item) => item.code === purchase.id)) {
+    purchaseDDL.value = [
+      ...purchaseDDL.value,
+      {
+        code: purchase.id,
+        name: `${purchase.code} - ${purchase.supplier?.name ?? '-'}`,
+        ulid: purchase.ulid,
+        supplier_id: purchase.supplier?.id ?? null,
+        supplier_name: purchase.supplier?.name ?? null,
+      },
+    ];
+  }
+};
+
+const buildBaseUnitName = (product: Product | null | undefined, conversionValue: number) => {
+  if (!product || conversionValue === 1) {
+    return '';
+  }
+
+  return product.product_units.find((unit) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+};
+
+const formatPurchaseItemLabel = (purchaseItem: PurchaseItem | null | undefined) => {
+  if (!purchaseItem) return null;
+
+  const productUnit = purchaseItem.product_unit;
+  const productCode = productUnit?.code ?? '';
+  const productName = productUnit?.product?.name ?? '-';
+
+  return productCode ? `[${productCode}] ${productName}` : productName;
+};
+
+const formatPurchaseItemLabelFromProductUnit = (productUnit: ProductUnit | null | undefined) => {
+  const productCode = productUnit?.code ?? '';
+  const productName = productUnit?.product?.name ?? '-';
+
+  return productCode ? `[${productCode}] ${productName}` : productName;
+};
+
+const buildManualItemFromProductUnit = (option: ProductUnitOption): PurchaseReceiptItemFormItem => ({
+  has_purchase_item_product: false,
+  qty: 1,
+  product_unit_id: option.product_unit_id,
+  product_unit_conversion_value: option.conversion_value,
+  remarks: '',
+  serials: [],
+  product_unit_product_code: option.product_unit_code,
+  product_unit_product_name: option.product_name,
+  product_unit_unit_name: option.unit_name,
+  product_unit_base_unit_name: option.base_unit_name,
+  product_unit_product_image_url: option.product_image_url ?? null,
+  purchase_item_label: null,
+  is_use_serial_number: option.is_use_serial_number,
+});
+
+const buildReceiptItemFromPurchaseItem = (purchaseItem: PurchaseItem): PurchaseReceiptItemFormItem => {
+  const productUnit = purchaseItem.product_unit;
+  const product = productUnit?.product;
+  const conversionValue = Number(purchaseItem.product_unit_conversion_value ?? productUnit?.conversion_value ?? 1);
+  const outstandingBase = Number(purchaseItem.qty_outstanding_base ?? 0);
+  const defaultQty = outstandingBase > 0
+    ? outstandingBase / Math.max(conversionValue, 1)
+    : Number(purchaseItem.qty ?? 0);
+
+  return {
+    has_purchase_item_product: true,
+    qty: defaultQty > 0 ? defaultQty : 1,
+    product_unit_id: productUnit?.id ?? '',
+    product_unit_conversion_value: conversionValue,
+    remarks: purchaseItem.remarks ?? '',
+    serials: [],
+    product_unit_product_code: productUnit?.code ?? '',
+    product_unit_product_name: product?.name ?? '-',
+    product_unit_unit_name: productUnit?.unit?.name ?? '',
+    product_unit_base_unit_name: buildBaseUnitName(product, Number(productUnit?.conversion_value ?? conversionValue)),
+    product_unit_product_image_url: product?.main_product_image?.url ?? null,
+    purchase_item_label: formatPurchaseItemLabel(purchaseItem),
+    is_use_serial_number: Boolean(product?.is_use_serial_number),
+  };
+};
+
+const buildFormItemFromReceiptItem = (receipt: PurchaseReceipt, item: any): PurchaseReceiptItemFormItem => {
+  const productUnit: ProductUnit | null | undefined = item.product_unit;
+  const product = productUnit?.product;
+  const conversionValue = Number(item.product_unit_conversion_value ?? productUnit?.conversion_value ?? 1);
+
+  return {
+    has_purchase_item_product: item.has_purchase_item_product,
+    qty: Number(item.qty ?? 0),
+    product_unit_id: productUnit?.id ?? '',
+    product_unit_conversion_value: conversionValue,
+    remarks: item.remarks ?? '',
+    serials: (item.serials ?? []).map((serial: any) => ({
+      serial: serial.serial,
+    })) as PurchaseReceiptSerialFormItem[],
+    product_unit_product_code: productUnit?.code ?? '',
+    product_unit_product_name: product?.name ?? '-',
+    product_unit_unit_name: productUnit?.unit?.name ?? '',
+    product_unit_base_unit_name: buildBaseUnitName(product, Number(productUnit?.conversion_value ?? conversionValue)),
+    product_unit_product_image_url: product?.main_product_image?.url ?? null,
+    purchase_item_label:
+      receipt.purchase && item.has_purchase_item_product
+        ? formatPurchaseItemLabelFromProductUnit(productUnit)
+        : null,
+    is_use_serial_number: Boolean(product?.is_use_serial_number),
+  };
+};
+// #endregion
+
+// #region Methods - Purchase Receipt
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const includeId =
+    purchaseReceiptData.value?.supplier?.id ??
+    (purchaseReceiptForm.supplier_id as string | null | undefined) ??
+    undefined;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: includeId,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+
+  appendDropDownOption(supplierDDL, purchaseReceiptData.value?.supplier
+    ? {
+      code: purchaseReceiptData.value.supplier.id,
+      name: purchaseReceiptData.value.supplier.name,
+    }
+    : null);
+};
+
+const loadPurchaseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: null,
+    end_date: undefined,
+    supplier_id: (purchaseReceiptForm.supplier_id as string | null) ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    purchaseDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `${item.code} - ${item.supplier?.name ?? '-'}`,
+      ulid: item.ulid,
+      supplier_id: item.supplier?.id ?? null,
+      supplier_name: item.supplier?.name ?? null,
+    }));
+  } else {
+    purchaseDDL.value = [];
+  }
+
+  appendPurchaseOption(purchaseReceiptData.value?.purchase);
+  appendPurchaseOption(selectedPurchaseData.value);
+};
+
+const loadWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const includeId =
+    purchaseReceiptData.value?.warehouse?.id ??
+    (purchaseReceiptForm.warehouse_id as string | null | undefined) ??
+    undefined;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: includeId,
+    status: undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    warehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+
+  appendDropDownOption(warehouseDDL, purchaseReceiptData.value?.warehouse
+    ? {
+      code: purchaseReceiptData.value.warehouse.id,
+      name: purchaseReceiptData.value.warehouse.name,
+    }
+    : null);
+};
+
+const setCode = () => {
+  purchaseReceiptForm.forgetError('code');
+
+  if (purchaseReceiptForm.code === '_AUTO_') {
+    purchaseReceiptForm.setData({ code: '' });
+    return;
+  }
+
+  purchaseReceiptForm.setData({ code: '_AUTO_' });
+};
+
+const loadPurchaseDetail = async (purchaseUlid: string) => {
+  const result = await purchaseService.read(purchaseUlid);
+
+  if (result.success && result.data) {
+    selectedPurchaseData.value = result.data;
+    appendPurchaseOption(result.data);
+
+    if (result.data.supplier) {
+      appendDropDownOption(supplierDDL, {
+        code: result.data.supplier.id,
+        name: result.data.supplier.name,
+      });
+    }
+
+    return result.data;
+  }
+
+  showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  return null;
+};
+
+const syncItemsFromPurchase = (purchase: Purchase) => {
+  purchaseReceiptForm.setData({
+    supplier_id: purchase.supplier?.id ?? null,
+    items: (purchase.items ?? []).map((item) => buildReceiptItemFromPurchaseItem(item)) as any,
+  });
+
+  clearItemErrors();
+};
+
+const clearPurchase = async () => {
+  selectedPurchaseData.value = null;
+  purchaseReceiptForm.setData({
+    purchase_id: null,
+    items: [] as any,
+  });
+  purchaseReceiptForm.forgetError('purchase_id');
+  clearItemErrors();
+  await loadPurchaseDDL();
+};
+
+const clearSupplier = async () => {
+  purchaseReceiptForm.setData({
+    supplier_id: null,
+    purchase_id: null,
+    items: [] as any,
+  });
+  selectedPurchaseData.value = null;
+  purchaseReceiptForm.forgetError('supplier_id');
+  purchaseReceiptForm.forgetError('purchase_id');
+  clearItemErrors();
+  await loadPurchaseDDL();
+};
+
+const clearWarehouse = () => {
+  purchaseReceiptForm.setData({ warehouse_id: null });
+  purchaseReceiptForm.forgetError('warehouse_id');
+};
+
+const handleSupplierChanged = async () => {
+  purchaseReceiptForm.validate('supplier_id');
+
+  if (purchaseReceiptForm.purchase_id) {
+    return;
+  }
+
+  await loadPurchaseDDL();
+};
+
+const handlePurchaseChanged = async (purchaseId: string | number | null) => {
+  purchaseReceiptForm.validate('purchase_id');
+
+  if (!purchaseId) {
+    await clearPurchase();
+    return;
+  }
+
+  const option = purchaseDDL.value.find((item) => item.code === purchaseId);
+  if (!option) {
+    return;
+  }
+
+  const purchase = await loadPurchaseDetail(option.ulid);
+  if (!purchase) {
+    return;
+  }
+
+  syncItemsFromPurchase(purchase);
+};
+
+const reloadItemsFromPurchase = async () => {
+  if (!purchaseReceiptForm.purchase_id) {
+    return;
+  }
+
+  const option = purchaseDDL.value.find((item) => item.code === purchaseReceiptForm.purchase_id);
+  if (!option) {
+    return;
+  }
+
+  const purchase = await loadPurchaseDetail(option.ulid);
+  if (!purchase) {
+    return;
+  }
+
+  syncItemsFromPurchase(purchase);
+};
+
+const loadData = async () => {
+  const result = await purchaseReceiptService.read(route.params.ulid as string);
+
+  if (!result.success || !result.data) {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    return false;
+  }
+
+  const data = result.data;
+  purchaseReceiptData.value = data;
+
+  if (data.is_from_direct_purchase) {
+    showAlertPlaceholder(
+      'warning',
+      t('views.purchase_receipt.alert.edit_blocked_direct.title'),
+      { general: [t('views.purchase_receipt.alert.edit_blocked_direct.message')] },
+    );
+    router.push({ name: 'side-menu-purchase-receipt-list' });
+    return false;
+  }
+
+  purchaseReceiptForm.setData({
+    supplier_id: data.supplier?.id ?? null,
+    purchase_id: data.purchase?.id ?? null,
+    code: data.code,
+    date: formatDate(data.date, 'YYYY-MM-DD HH:mm:ss'),
+    warehouse_id: data.warehouse?.id ?? null,
+    remarks: data.remarks ?? '',
+    is_posted: data.is_posted,
+    items: (data.items ?? []).map((item: any) => buildFormItemFromReceiptItem(data, item)) as any,
+  });
+
+  appendPurchaseOption(data.purchase);
+
+  if (data.purchase?.ulid) {
+    await loadPurchaseDetail(data.purchase.ulid);
+  }
+
+  return true;
+};
+// #endregion
+
+// #region Methods - Items
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    default_vat_profile_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: undefined,
+    refresh: true,
+    limit: 50,
+  } as any);
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as Product[];
+
+    productUnitOptions.value = products.flatMap((product: Product) => {
+      const units = product.product_units ?? [];
+      const baseUnitName =
+        units.find((unit) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+
+      return units.map((unit: ProductUnit) => ({
+        product_unit_id: unit.id,
+        product_unit_code: unit.code,
+        product_name: product.name,
+        product_image_url: product.main_product_image?.url ?? null,
+        unit_name: unit.unit?.name ?? '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(unit.conversion_value ?? 1),
+        is_use_serial_number: Boolean(product.is_use_serial_number),
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const openAddProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  editingItemIndex.value = null;
+  showProductUnitModal.value = true;
+};
+
+const openChangeProductUnit = (index: number) => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  editingItemIndex.value = index;
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  const items = getItems();
+  const serials = editingItemIndex.value === null
+    ? []
+    : items[editingItemIndex.value]?.is_use_serial_number
+      ? [...(items[editingItemIndex.value]?.serials ?? [])]
+      : [];
+
+  const baseData = buildManualItemFromProductUnit(option);
+  baseData.serials = serials;
+
+  if (editingItemIndex.value === null) {
+    purchaseReceiptForm.items.push(baseData as any);
+  } else {
+    const currentItem = items[editingItemIndex.value];
+
+    purchaseReceiptForm.items[editingItemIndex.value] = {
+      ...currentItem,
+      ...baseData,
+      qty: currentItem?.qty ?? 1,
+      remarks: currentItem?.remarks ?? '',
+      serials: baseData.is_use_serial_number ? serials : [],
+    };
+  }
+
+  clearItemErrors();
+  showProductUnitModal.value = false;
+  editingItemIndex.value = null;
+};
+
+const removeItem = (index: number) => {
+  const items = getItems();
+  items.splice(index, 1);
+  clearItemErrors();
+};
+
+const addSerial = (index: number) => {
+  const item = getItems()[index];
+  if (!item) return;
+
+  item.serials.push({ serial: '' });
+  purchaseReceiptForm.validate(`items.${index}.serials` as any);
+};
+
+const removeSerial = (index: number, serialIndex: number) => {
+  const item = getItems()[index];
+  if (!item) return;
+
+  item.serials.splice(serialIndex, 1);
+  purchaseReceiptForm.validate(`items.${index}.serials` as any);
+};
+// #endregion
+
+// #region Actions
+const onSubmit = async () => {
+  if (purchaseReceiptForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseReceiptForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const originalItems = getItems();
+  const cleanedItems = originalItems.map((item) => ({
+    qty: Number(item.qty ?? 0),
+    product_unit_id: item.product_unit_id,
+    product_unit_conversion_value: Number(item.product_unit_conversion_value ?? 0),
+    remarks: item.remarks ?? '',
+    serials: item.serials.map((serial) => ({
+      serial: serial.serial,
+    })),
+  }));
+  const backupItems = [...originalItems];
+
+  purchaseReceiptForm.items = cleanedItems as any;
+  emits('loading-state', true);
+
+  try {
+    await purchaseReceiptForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(
+      t('views.purchase_receipt.alert.update.title'),
+      t('views.purchase_receipt.alert.update.message'),
+    );
+    router.push({ name: 'side-menu-purchase-receipt-list' });
+  } catch (error) {
+    purchaseReceiptForm.items = backupItems as any;
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+// #endregion
+</script>
+
+<template>
+  <form v-if="selectedUserLocation && !initializing" id="purchaseReceiptForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('code') }">
+                {{ t('views.purchase_receipt.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseReceiptForm.code"
+                :class="{ 'border-danger': invalidField('code') }"
+                :placeholder="t('views.purchase_receipt.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseReceiptForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('date') }">
+                {{ t('views.purchase_receipt.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseReceiptForm.date"
+                :class="{ 'border-danger': invalidField('date') }"
+                :placeholder="t('views.purchase_receipt.fields.date')"
+                @change="purchaseReceiptForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('supplier_id') }">
+                {{ t('views.purchase_receipt.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseReceiptForm.supplier_id"
+                v-model:search="supplierSearch"
+                :options="supplierOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :disabled="Boolean(purchaseReceiptForm.purchase_id)"
+                :class="{ 'border-danger': invalidField('supplier_id') }"
+                @change="handleSupplierChanged"
+                @search="loadSupplierDDL"
+                @clear="clearSupplier"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.supplier_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('purchase_id') }">
+                {{ t('views.purchase_receipt.fields.purchase_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseReceiptForm.purchase_id"
+                v-model:search="purchaseSearch"
+                :options="purchaseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('purchase_id') }"
+                @change="(value) => handlePurchaseChanged(value as string | number | null)"
+                @search="loadPurchaseDDL"
+                @clear="clearPurchase"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.purchase_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('warehouse_id') }">
+                {{ t('views.purchase_receipt.fields.warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseReceiptForm.warehouse_id"
+                v-model:search="warehouseSearch"
+                :options="warehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('warehouse_id') }"
+                @change="purchaseReceiptForm.validate('warehouse_id')"
+                @search="loadWarehouseDDL"
+                @clear="clearWarehouse"
+              />
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.warehouse_id" />
+            </div>
+
+            <div class="col-span-12 md:col-span-6 lg:col-span-4 flex flex-col justify-center">
+              <FormLabel :class="{ 'text-danger': invalidField('is_posted') }">
+                {{ t('views.purchase_receipt.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="purchaseReceiptForm.is_posted" type="checkbox" />
+              </FormSwitch>
+              <FormErrorMessages :messages="purchaseReceiptForm.errors.is_posted" />
+            </div>
+          </div>
+
+          <div v-if="purchaseReceiptForm.purchase_id" class="mt-4 rounded-md border border-primary/20 bg-primary/5 px-4 py-3 text-sm text-slate-700 dark:text-slate-200">
+            {{ t('views.purchase_receipt.fields.purchase_link_hint') }}
+          </div>
+
+          <div class="mt-4">
+            <FormLabel :class="{ 'text-danger': invalidField('remarks') }">
+              {{ t('views.purchase_receipt.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="purchaseReceiptForm.remarks"
+              :class="{ 'border-danger': invalidField('remarks') }"
+              :placeholder="t('views.purchase_receipt.fields.remarks')"
+              @change="purchaseReceiptForm.validate('remarks')"
+            />
+            <FormErrorMessages :messages="purchaseReceiptForm.errors.remarks" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div class="text-sm text-slate-500">
+              {{ t('views.purchase_receipt.fields.item_count') }}: {{ getItems().length }}
+            </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <Button
+                v-if="purchaseReceiptForm.purchase_id"
+                type="button"
+                variant="outline-primary"
+                @click="reloadItemsFromPurchase"
+              >
+                <Lucide icon="RefreshCw" class="mr-2 h-4 w-4" />
+                {{ t('components.buttons.reload') }}
+              </Button>
+              <Button
+                v-else
+                type="button"
+                variant="outline-primary"
+                @click="openAddProductUnit"
+              >
+                <Lucide icon="Plus" class="mr-2 h-4 w-4" />
+                {{ t('components.buttons.add') }}
+              </Button>
+            </div>
+          </div>
+
+          <FormErrorMessages :messages="purchaseReceiptForm.errors.items" />
+
+          <div v-if="getItems().length === 0" class="rounded-md border border-dashed border-slate-300 px-4 py-6 text-center text-sm text-slate-500 dark:border-darkmode-400">
+            {{ t('views.purchase_receipt.fields.items_empty') }}
+          </div>
+
+          <div
+            v-for="(item, index) in getItems()"
+            :key="`${item.has_purchase_item_product ? 'purchase' : 'manual'}-${item.product_unit_id ?? 'item'}-${index}`"
+            class="rounded-md border border-slate-200/70 p-4 dark:border-darkmode-400"
+          >
+            <div class="flex flex-wrap items-start justify-between gap-3">
+              <div>
+                <div class="text-sm font-medium text-slate-900 dark:text-slate-100">
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+                <div class="text-xs text-slate-500">
+                  <span v-if="item.product_unit_product_code">[{{ item.product_unit_product_code }}]</span>
+                  <span v-if="item.product_unit_unit_name">
+                    {{ item.product_unit_product_code ? ' - ' : '' }}{{ item.product_unit_unit_name }}
+                  </span>
+                  <span v-if="item.product_unit_base_unit_name">
+                    / {{ item.product_unit_base_unit_name }}
+                  </span>
+                </div>
+                <div v-if="item.purchase_item_label" class="mt-1 text-xs text-primary">
+                  {{ item.purchase_item_label }}
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <Button
+                  v-if="!purchaseReceiptForm.purchase_id"
+                  type="button"
+                  size="sm"
+                  variant="outline-primary"
+                  @click="openChangeProductUnit(index)"
+                >
+                  <Lucide icon="Pencil" class="h-4 w-4" />
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline-secondary"
+                  @click="removeItem(index)"
+                >
+                  <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                </Button>
+              </div>
+            </div>
+
+            <div class="mt-4 grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12 lg:col-span-4">
+                <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.product_unit_id`) }">
+                  {{ t('views.purchase_receipt.fields.product_unit_id') }}
+                </FormLabel>
+                <FormInput
+                  :model-value="item.product_unit_product_code ? `[${item.product_unit_product_code}] ${item.product_unit_product_name}` : item.product_unit_product_name"
+                  readonly
+                />
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.product_unit_id`)" />
+              </div>
+
+              <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.qty`) }">
+                  {{ t('views.purchase_receipt.fields.qty') }}
+                </FormLabel>
+                <FormInput
+                  :id="`items.${index}.qty`"
+                  v-model="item.qty"
+                  type="number"
+                  min="0"
+                  step="any"
+                  :class="{ 'border-danger': invalidItemField(`items.${index}.qty`) }"
+                  @change="purchaseReceiptForm.validate(`items.${index}.qty` as any)"
+                />
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.qty`)" />
+              </div>
+
+              <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.product_unit_conversion_value`) }">
+                  {{ t('views.purchase_receipt.fields.product_unit_conversion_value') }}
+                </FormLabel>
+                <FormInput
+                  v-model="item.product_unit_conversion_value"
+                  readonly
+                  :class="{ 'border-danger': invalidItemField(`items.${index}.product_unit_conversion_value`) }"
+                />
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+              </div>
+
+              <div class="col-span-12 lg:col-span-4">
+                <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.remarks`) }">
+                  {{ t('views.purchase_receipt.fields.remarks') }}
+                </FormLabel>
+                <FormTextarea
+                  v-model="item.remarks"
+                  :class="{ 'border-danger': invalidItemField(`items.${index}.remarks`) }"
+                  :placeholder="t('views.purchase_receipt.fields.remarks')"
+                  @change="purchaseReceiptForm.validate(`items.${index}.remarks` as any)"
+                />
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.remarks`)" />
+              </div>
+
+              <div v-if="item.is_use_serial_number" class="col-span-12">
+                <div class="mb-2 flex items-center justify-between">
+                  <FormLabel :class="{ 'text-danger': invalidItemField(`items.${index}.serials`) }">
+                    {{ t('views.product.fields.serial_number') }}
+                  </FormLabel>
+                  <Button type="button" size="sm" variant="outline-primary" @click="addSerial(index)">
+                    <Lucide icon="Plus" class="mr-1 h-3 w-3" />
+                    {{ t('components.buttons.create') }}
+                  </Button>
+                </div>
+
+                <div v-if="item.serials.length === 0" class="text-xs italic text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-3 lg:grid-cols-4">
+                  <div v-for="(serial, serialIndex) in item.serials" :key="`${index}-${serialIndex}`" class="flex gap-2">
+                    <FormInput
+                      v-model="serial.serial"
+                      :placeholder="t('views.product.fields.serial_number')"
+                      :class="{ 'border-danger': invalidItemField(`items.${index}.serials.${serialIndex}.serial`) }"
+                      @change="
+                        purchaseReceiptForm.validate(`items.${index}.serials.${serialIndex}.serial` as any);
+                        purchaseReceiptForm.validate(`items.${index}.serials` as any);
+                      "
+                    />
+                    <Button type="button" variant="outline-secondary" @click="removeSerial(index, serialIndex)">
+                      <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+
+                <FormErrorMessages :messages="getItemFieldErrors(`items.${index}.serials`)" />
+                <FormErrorMessages
+                  v-for="(_, serialIndex) in item.serials"
+                  :key="`serial-error-${index}-${serialIndex}`"
+                  :messages="getItemFieldErrors(`items.${index}.serials.${serialIndex}.serial`)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button
+            type="submit"
+            variant="primary"
+            class="w-32 shadow-md"
+            :disabled="purchaseReceiptForm.validating || purchaseReceiptForm.hasErrors"
+          >
+            <Lucide v-if="purchaseReceiptForm.validating" icon="Loader" class="mr-2 h-4 w-4 animate-spin" />
+            <Lucide v-else icon="Save" class="mr-2 h-4 w-4" />
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <ProductUnitPickerDialog
+    v-if="selectedUserLocation"
+    v-model:search-text="productSearchText"
+    :open="showProductUnitModal"
+    :title="t('views.purchase_receipt.fields.product_unit_id')"
+    :is-searching="isSearchingProductUnit"
+    :options="productUnitOptions"
+    :columns="productUnitDialogColumns"
+    @close="showProductUnitModal = false"
+    @search="searchProductUnits"
+    @select="selectProductUnit($event as ProductUnitOption)"
+  />
+</template>
diff --git a/web/src/pages/purchase-receipt/PurchaseReceiptIndex.vue b/web/src/pages/purchase-receipt/PurchaseReceiptIndex.vue
new file mode 100644
index 000000000..902f3bf68
--- /dev/null
+++ b/web/src/pages/purchase-receipt/PurchaseReceiptIndex.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.purchase_receipt.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const purchaseReceiptNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[purchaseReceiptNotification]', (el: NotificationElement) => {
+  purchaseReceiptNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-purchase-receipt-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-purchase-receipt-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.purchase_receipt.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.purchase_receipt.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.purchase_receipt.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  purchaseReceiptNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('PURCHASE_RECEIPT_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('PURCHASE_RECEIPT_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="purchaseReceiptNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase-receipt/PurchaseReceiptList.vue b/web/src/pages/purchase-receipt/PurchaseReceiptList.vue
new file mode 100644
index 000000000..d42f60377
--- /dev/null
+++ b/web/src/pages/purchase-receipt/PurchaseReceiptList.vue
@@ -0,0 +1,544 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PurchaseService from '@/services/PurchaseService';
+import PurchaseReceiptService from '@/services/PurchaseReceiptService';
+import SupplierService from '@/services/SupplierService';
+import WarehouseService from '@/services/WarehouseService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { PurchaseReceipt } from '@/types/models/PurchaseReceipt';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PurchaseReceiptReadAnyPaginateRequest } from '@/types/services/purchase-receipt/PurchaseReceiptRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseReceiptService = new PurchaseReceiptService();
+const purchaseService = new PurchaseService();
+const supplierService = new SupplierService();
+const warehouseService = new WarehouseService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+const selectedSupplierId = ref<string | null>(null);
+const selectedPurchaseId = ref<string | null>(null);
+const selectedWarehouseId = ref<string | null>(null);
+const selectedIsPosted = ref<string | null>(null);
+const selectedIsFromDirectPurchase = ref<string | null>(null);
+
+const purchaseReceiptLists = ref<Collection<Array<PurchaseReceipt>> | null>({
+  data: [],
+  meta: {
+    current_page: 1,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 10,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref<string>('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const purchaseDDL = ref<Array<DropDownOption> | null>(null);
+const purchaseSearch = ref<string>('');
+const purchaseOptions = computed(() =>
+  (purchaseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const warehouseDDL = ref<Array<DropDownOption> | null>(null);
+const warehouseSearch = ref<string>('');
+const warehouseOptions = computed(() =>
+  (warehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const postedOptions = computed(() => [
+  { value: 'true', label: t('components.buttons.yes') },
+  { value: 'false', label: t('components.buttons.no') },
+]);
+
+const directPurchaseOptions = computed(() => [
+  { value: 'true', label: t('components.buttons.yes') },
+  { value: 'false', label: t('components.buttons.no') },
+]);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await Promise.all([loadSupplierDDL(), loadPurchaseDDL(), loadWarehouseDDL()]);
+  await getPurchaseReceipts('', true, 1, 10);
+});
+
+const getPurchaseReceipts = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: PurchaseReceiptReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value,
+    end_date: endDate.value,
+    supplier_id: selectedSupplierId.value,
+    purchase_id: selectedPurchaseId.value,
+    warehouse_id: selectedWarehouseId.value,
+    is_posted: selectedIsPosted.value === null ? null : selectedIsPosted.value === 'true',
+    is_from_direct_purchase:
+      selectedIsFromDirectPurchase.value === null ? null : selectedIsFromDirectPurchase.value === 'true',
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result = (await purchaseReceiptService.readAnyPaginate(
+    request,
+  )) as ServiceResponse<Collection<Array<PurchaseReceipt>> | null>;
+
+  if (result.success && result.data) {
+    purchaseReceiptLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: selectedSupplierId.value ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadPurchaseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: null,
+    end_date: undefined,
+    supplier_id: selectedSupplierId.value,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    purchaseDDL.value = result.data.data.map((item) => ({
+      code: item.id,
+      name: `${item.code} - ${item.supplier?.name ?? '-'}`,
+    }));
+  }
+};
+
+const loadWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: selectedWarehouseId.value ?? undefined,
+    status: undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    warehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const reloadList = async () => {
+  await getPurchaseReceipts(searchText.value, true, 1, purchaseReceiptLists.value?.meta.per_page ?? 10);
+};
+
+const clearSupplierFilter = async () => {
+  selectedSupplierId.value = null;
+  await loadPurchaseDDL();
+  await reloadList();
+};
+
+const clearPurchaseFilter = async () => {
+  selectedPurchaseId.value = null;
+  await reloadList();
+};
+
+const clearWarehouseFilter = async () => {
+  selectedWarehouseId.value = null;
+  await reloadList();
+};
+
+const handleDataListChange = async (emittedData: DataListEmittedData) => {
+  await getPurchaseReceipts(
+    emittedData.search.text,
+    true,
+    emittedData.pagination.page,
+    emittedData.pagination.per_page,
+  );
+};
+
+const viewSelected = (index: number) => {
+  expandDetail.value = expandDetail.value === index ? null : index;
+};
+
+const editSelected = (index: number) => {
+  if (!purchaseReceiptLists.value?.data?.[index]) return;
+
+  router.push({
+    name: 'side-menu-purchase-receipt-edit',
+    params: { ulid: purchaseReceiptLists.value.data[index].ulid },
+  });
+};
+
+const deleteSelected = (index: number) => {
+  if (!purchaseReceiptLists.value?.data?.[index]) return;
+
+  deleteUlid.value = purchaseReceiptLists.value.data[index].ulid;
+  deleteModalShow.value = true;
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = {
+    title,
+    content,
+  };
+
+  emits('show-notification', notification);
+};
+
+const confirmDelete = async () => {
+  emits('loading-state', true);
+  const result = await purchaseReceiptService.delete(deleteUlid.value);
+  emits('loading-state', false);
+  deleteModalShow.value = false;
+
+  if (result.success) {
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(
+      t('views.purchase_receipt.alert.delete.title'),
+      t('views.purchase_receipt.alert.delete.message'),
+    );
+    await getPurchaseReceipts(
+      searchText.value,
+      true,
+      purchaseReceiptLists.value?.meta.current_page ?? 1,
+      purchaseReceiptLists.value?.meta.per_page ?? 10,
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+</script>
+
+<template>
+  <div class="mt-5 grid grid-cols-12 gap-6">
+    <div class="col-span-12">
+      <div class="mb-5 grid grid-cols-12 gap-4">
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_receipt.fields.start_date') }}</FormLabel>
+          <FormInputDateTime
+            v-model="startDate"
+            @change="getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10)"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_receipt.fields.end_date') }}</FormLabel>
+          <FormInputDateTime
+            v-model="endDate"
+            @change="getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10)"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_receipt.fields.supplier_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedSupplierId"
+            v-model:search="supplierSearch"
+            :options="supplierOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="async () => { await loadPurchaseDDL(); await getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10); }"
+            @search="loadSupplierDDL"
+            @clear="clearSupplierFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_receipt.fields.purchase_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedPurchaseId"
+            v-model:search="purchaseSearch"
+            :options="purchaseOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10)"
+            @search="loadPurchaseDDL"
+            @clear="clearPurchaseFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_receipt.fields.warehouse_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedWarehouseId"
+            v-model:search="warehouseSearch"
+            :options="warehouseOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10)"
+            @search="loadWarehouseDDL"
+            @clear="clearWarehouseFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_receipt.fields.is_from_direct_purchase') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedIsFromDirectPurchase"
+            :options="directPurchaseOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10)"
+            @clear="getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10)"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase_receipt.fields.is_posted') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedIsPosted"
+            :options="postedOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10)"
+            @clear="getPurchaseReceipts(searchText, true, 1, purchaseReceiptLists?.meta.per_page ?? 10)"
+          />
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="purchaseReceiptLists"
+        :title="t('views.purchase_receipt.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="purchaseReceiptLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="purchaseReceiptLists ? purchaseReceiptLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 self-start lg:col-span-5">
+            <div class="space-y-2">
+              <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                {{ t('views.purchase_receipt.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.code') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as PurchaseReceipt).code ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.date') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseReceipt).date ? formatDate((item as PurchaseReceipt).date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.supplier_id') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as PurchaseReceipt).supplier?.name ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.purchase_id') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as PurchaseReceipt).purchase?.code ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.warehouse_id') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as PurchaseReceipt).warehouse?.name ?? '-' }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 self-start lg:col-span-3">
+            <div class="space-y-2">
+              <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                {{ t('views.purchase_receipt.field_groups.status') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_receipt.fields.is_from_direct_purchase') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseReceipt).is_from_direct_purchase ? t('components.buttons.yes') : t('components.buttons.no') }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_receipt.fields.is_linked_to_purchase') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseReceipt).is_linked_to_purchase ? t('components.buttons.yes') : t('components.buttons.no') }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_receipt.fields.is_posted') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as PurchaseReceipt).is_posted ? t('components.buttons.yes') : t('components.buttons.no') }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase_receipt.fields.item_count') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ (item as PurchaseReceipt).items?.length ?? 0 }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 self-start lg:col-span-3">
+            <div class="space-y-2">
+              <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                {{ t('views.purchase_receipt.field_groups.remarks') }}
+              </div>
+              <div class="rounded-md border border-slate-200/70 p-3 text-xs text-slate-700 dark:border-darkmode-400 dark:text-slate-200">
+                {{ (item as PurchaseReceipt).remarks?.trim() || '-' }}
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 flex items-center justify-end gap-2 self-center pt-2 md:col-span-1 md:flex-col lg:col-span-1 lg:flex-col">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="h-4 w-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="h-4 w-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+            </Button>
+          </div>
+
+          <div v-if="expandDetail === index" class="col-span-12 mt-2 border-t border-slate-200 pt-3 dark:border-darkmode-400">
+            <div class="space-y-3">
+              <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                {{ t('views.purchase_receipt.field_groups.items') }}
+              </div>
+              <div v-if="!(item as PurchaseReceipt).items?.length" class="text-xs text-slate-500">
+                {{ t('views.purchase_receipt.fields.items_empty') }}
+              </div>
+              <div
+                v-for="(receiptItem, itemIndex) in (item as PurchaseReceipt).items ?? []"
+                :key="receiptItem.ulid ?? `${(item as PurchaseReceipt).ulid}-item-${itemIndex}`"
+                class="rounded-md border border-slate-200/70 p-3 dark:border-darkmode-400"
+              >
+                <div class="grid grid-cols-12 gap-x-3 gap-y-2 text-xs">
+                  <div class="col-span-12 font-medium text-slate-700 dark:text-slate-200">
+                    {{ receiptItem.product_unit?.product?.name ?? receiptItem.product_unit?.code ?? '-' }}
+                  </div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.product_unit_id') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ receiptItem.product_unit?.code ?? '-' }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.qty') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ receiptItem.qty ?? 0 }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.product_unit_conversion_value') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ receiptItem.product_unit_conversion_value ?? 0 }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.serial_count') }}</div>
+                  <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ receiptItem.serials?.length ?? 0 }}</div>
+                  <div class="col-span-4 text-slate-500">{{ t('views.purchase_receipt.fields.remarks') }}</div>
+                  <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ receiptItem.remarks?.trim() || '-' }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+        <div class="mt-5 text-3xl">Are you sure?</div>
+        <div class="mt-2 text-slate-500">This action cannot be undone.</div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="mr-1 w-24" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/purchase/PurchaseCreateDirect.vue b/web/src/pages/purchase/PurchaseCreateDirect.vue
new file mode 100644
index 000000000..26f908fde
--- /dev/null
+++ b/web/src/pages/purchase/PurchaseCreateDirect.vue
@@ -0,0 +1,2080 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { debounce } from 'lodash';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import type { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelect,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductUnitPickerDialog from '@/components/Product/ProductUnitPickerDialog.vue';
+import CacheService from '@/services/CacheService';
+import CashAccountService from '@/services/CashAccountService';
+import ProductService from '@/services/ProductService';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import PurchaseService from '@/services/PurchaseService';
+import SupplierService from '@/services/SupplierService';
+import VatProfileService from '@/services/VatProfileService';
+import WarehouseService from '@/services/WarehouseService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { CardState } from '@/types/enums/CardState';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type PurchaseCreateDirectForm = ReturnType<PurchaseService['usePurchaseCreateDirectForm']>;
+
+type PurchaseDiscountForm = {
+  id?: string | null;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+};
+
+type PurchaseSerialForm = {
+  id?: string | null;
+  serial: string;
+};
+
+type PurchaseAdditionalCostForm = {
+  id?: string | null;
+  purchase_additional_cost_category_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  paid_immediately_cash_account_id: string | null;
+  amount_paid_immediately: number;
+  amount_payable: number;
+  remarks: string | null;
+};
+
+type ProductUnitOption = {
+  product_unit_id: string;
+  product_unit_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  price: number;
+  product_unit_is_price_include_vat: boolean;
+  vat_profile_id: string | null;
+  vat_profile_name: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  is_use_serial_number: boolean;
+};
+
+type VatProfileOption = {
+  code: string;
+  name: string;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+};
+
+type PurchaseItemForm = {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_price: number;
+  product_unit_is_price_include_vat: boolean;
+  product_unit_price_discounts: PurchaseDiscountForm[];
+  subtotal_discounts: PurchaseDiscountForm[];
+  vat_profile_id: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  vat_profile_name?: string | null;
+  is_use_serial_number?: boolean;
+  serials: PurchaseSerialForm[];
+};
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const purchaseService = new PurchaseService();
+const supplierService = new SupplierService();
+const vatProfileService = new VatProfileService();
+const cashAccountService = new CashAccountService();
+const warehouseService = new WarehouseService();
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const productService = new ProductService();
+const cacheService = new CacheService();
+
+const purchaseForm: PurchaseCreateDirectForm = purchaseService.usePurchaseCreateDirectForm();
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+const isDirectMode = computed(() => true);
+const cacheKey = 'PURCHASE_CREATE_DIRECT';
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.purchase.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.purchase_data', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.items', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const warehouseDDL = ref<Array<DropDownOption> | null>(null);
+const warehouseSearch = ref('');
+const warehouseOptions = computed(() =>
+  (warehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const additionalCostCategoryDDL = ref<Array<DropDownOption> | null>(null);
+const additionalCostCategorySearch = ref('');
+const additionalCostCategoryOptions = computed(() =>
+  (additionalCostCategoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<VatProfileOption> | null>(null);
+const vatProfileOptions = computed(() => vatProfileDDL.value ?? []);
+
+const showProductUnitModal = ref(false);
+const productSearchText = ref('');
+const isSearchingProductUnit = ref(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+
+const discountTypeOptions = [
+  { value: 'PERCENTAGE', label: 'Percentage' },
+  { value: 'NOMINAL', label: 'Nominal' },
+];
+
+const productUnitDialogColumns = [
+  {
+    key: 'unit_name',
+    label: t('views.product.table.cols.unit'),
+  },
+  {
+    key: 'conversion_value',
+    label: t('views.purchase.fields.product_unit_conversion_value'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+  {
+    key: 'price',
+    label: t('views.purchase.fields.product_unit_price'),
+    align: 'right' as const,
+    formatter: 'currency' as const,
+  },
+];
+
+const purchaseItemsForm = computed<PurchaseItemForm[]>(
+  () => purchaseForm.items as PurchaseItemForm[],
+);
+const purchaseItemDetailsExpanded = ref<boolean[]>([]);
+const viewportWidth = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 1024);
+const purchaseGlobalDiscountsForm = computed<PurchaseDiscountForm[]>(
+  () => purchaseForm.global_discounts as PurchaseDiscountForm[],
+);
+const purchaseAdditionalCostsForm = computed<PurchaseAdditionalCostForm[]>(
+  () => purchaseForm.additional_costs as PurchaseAdditionalCostForm[],
+);
+
+const currentItemLayout = computed<'sm' | 'md' | 'lg'>(() => {
+  if (viewportWidth.value >= 1024) return 'lg';
+  if (viewportWidth.value >= 768) return 'md';
+  return 'sm';
+});
+
+const invalidField = (field: string) => purchaseForm.invalid(field as any);
+const validateField = (field: string) => purchaseForm.validate(field as any);
+const getFieldErrors = (field: string) =>
+  (purchaseForm.errors as Record<string, string | undefined>)[field];
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+const getPurchaseItemShouldStartExpanded = (item: PurchaseItemForm) =>
+  item.product_unit_price_discounts.length > 0 ||
+  item.subtotal_discounts.length > 0 ||
+  (isDirectMode.value && item.serials.length > 0);
+
+const syncPurchaseItemDetailsExpanded = () => {
+  purchaseItemDetailsExpanded.value = purchaseItemsForm.value.map(
+    (item, index) => purchaseItemDetailsExpanded.value[index] ?? getPurchaseItemShouldStartExpanded(item),
+  );
+};
+
+const syncViewportWidth = () => {
+  viewportWidth.value = typeof window !== 'undefined' ? window.innerWidth : 1024;
+};
+
+const appendDropDownOption = (
+  target: typeof supplierDDL | typeof warehouseDDL | typeof cashAccountDDL | typeof additionalCostCategoryDDL,
+  option?: DropDownOption | null,
+) => {
+  if (!option?.code) return;
+
+  const current = target.value ?? [];
+  if (current.some((item) => item.code === option.code)) return;
+  target.value = [...current, option];
+};
+
+const appendVatProfileOption = (option: VatProfileOption) => {
+  const current = vatProfileDDL.value ?? [];
+  if (current.some((item) => item.code === option.code)) return;
+  vatProfileDDL.value = [...current, option];
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const normalizeVatBaseFactor = (value: unknown) => Math.max(1, Number(value ?? 1) || 0);
+
+const syncDerivedFields = () => {
+  purchaseForm.additional_cost = getAdditionalCostsTotalPreview();
+};
+
+watch(
+  purchaseForm,
+  debounce((newValue) => {
+    cacheService.setLastEntity(cacheKey, newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+watch(
+  purchaseAdditionalCostsForm,
+  () => {
+    syncDerivedFields();
+  },
+  { deep: true },
+);
+
+watch(
+  purchaseItemsForm,
+  () => {
+    syncPurchaseItemDetailsExpanded();
+  },
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  purchaseForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  await Promise.all([
+    loadSupplierDDL(),
+    loadVatProfileDDL(),
+    loadCashAccountDDL(),
+    loadAdditionalCostCategoryDDL(),
+    ...(isDirectMode.value ? [loadWarehouseDDL()] : []),
+  ]);
+
+  loadFromCache();
+  syncDerivedFields();
+  syncPurchaseItemDetailsExpanded();
+  window.addEventListener('resize', syncViewportWidth);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncViewportWidth);
+});
+
+const loadFromCache = () => {
+  const lastEntity = cacheService.getLastEntity(cacheKey);
+  if (!isRecord(lastEntity)) return;
+  purchaseForm.setData(lastEntity);
+  syncPurchaseItemDetailsExpanded();
+};
+
+const setCode = () => {
+  purchaseForm.forgetError('code');
+  purchaseForm.setData({
+    code: purchaseForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const setAdditionalCostCode = (index: number) => {
+  purchaseForm.forgetError(`additional_costs.${index}.code` as any);
+  purchaseAdditionalCostsForm.value[index].code =
+    purchaseAdditionalCostsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const loadSupplierDDL = async (search = supplierSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadWarehouseDDL = async (search = warehouseSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    warehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = cashAccountSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    category_id: undefined,
+    type: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadAdditionalCostCategoryDDL = async (search = additionalCostCategorySearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseAdditionalCostCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    additionalCostCategoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadVatProfileDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+      vat_rate: Number(item.vat_rate ?? 0),
+      vat_base_numerator: normalizeVatBaseFactor(item.vat_base_numerator ?? 1),
+      vat_base_denominator: normalizeVatBaseFactor(item.vat_base_denominator ?? 1),
+    }));
+  }
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    default_vat_profile_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: undefined,
+    refresh: true,
+    limit: 50,
+  } as any);
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((product: any) => {
+      const units: any[] = product.product_units || [];
+      const baseUnitName =
+        units.find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+      return units.map((unit: any) => ({
+        product_unit_id: unit.id,
+        product_unit_code: unit.code,
+        product_name: product.name,
+        product_image_url: product.main_product_image?.url ?? null,
+        unit_name: unit.unit?.name ?? '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(unit.conversion_value ?? 1),
+        price: Number(unit.price ?? 0),
+        product_unit_is_price_include_vat: Boolean(product.is_price_include_vat),
+        vat_profile_id: product.default_vat_profile?.id ?? null,
+        vat_profile_name: product.default_vat_profile?.name ?? null,
+        vat_rate: Number(product.default_vat_profile?.vat_rate ?? 0),
+        vat_base_numerator: normalizeVatBaseFactor(product.default_vat_profile?.vat_base_numerator ?? 1),
+        vat_base_denominator: normalizeVatBaseFactor(product.default_vat_profile?.vat_base_denominator ?? 1),
+        is_use_serial_number: Boolean(product.is_use_serial_number),
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const openAddProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  if (option.vat_profile_id) {
+    appendVatProfileOption({
+      code: option.vat_profile_id,
+      name: option.vat_profile_name ?? '-',
+      vat_rate: option.vat_rate,
+      vat_base_numerator: option.vat_base_numerator,
+      vat_base_denominator: option.vat_base_denominator,
+    });
+  }
+
+  purchaseItemsForm.value.push({
+    qty: 1,
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.base_unit_name,
+    product_unit_conversion_value: option.conversion_value,
+    product_unit_price: option.price,
+    product_unit_is_price_include_vat: option.product_unit_is_price_include_vat,
+    product_unit_price_discounts: [],
+    subtotal_discounts: [],
+    vat_profile_id: option.vat_profile_id,
+    vat_profile_name: option.vat_profile_name,
+    vat_rate: option.vat_rate,
+    vat_base_numerator: normalizeVatBaseFactor(option.vat_base_numerator),
+    vat_base_denominator: normalizeVatBaseFactor(option.vat_base_denominator),
+    remarks: '',
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  });
+  purchaseItemDetailsExpanded.value.push(false);
+
+  showProductUnitModal.value = false;
+  nextTick(() => {
+    const index = purchaseItemsForm.value.length - 1;
+    const el = document.getElementById(`purchase-item-qty-${index}`) as HTMLInputElement | null;
+    el?.focus();
+    el?.select();
+  });
+};
+
+const removeItem = (index: number) => {
+  purchaseItemsForm.value.splice(index, 1);
+  purchaseItemDetailsExpanded.value.splice(index, 1);
+  Object.keys(purchaseForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseForm.forgetError(key as any);
+    }
+  });
+};
+
+const resequence = (items: Array<{ sequence: number }>) => {
+  items.forEach((item, index) => {
+    item.sequence = index + 1;
+  });
+};
+
+const addItemPriceDiscount = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].product_unit_price_discounts.push({
+    id: null,
+    sequence: purchaseItemsForm.value[index].product_unit_price_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemPriceDiscount = (index: number, discountIndex: number) => {
+  const item = purchaseItemsForm.value[index];
+  item.product_unit_price_discounts.splice(discountIndex, 1);
+  resequence(item.product_unit_price_discounts);
+};
+
+const addItemSubtotalDiscount = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].subtotal_discounts.push({
+    id: null,
+    sequence: purchaseItemsForm.value[index].subtotal_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemSubtotalDiscount = (index: number, discountIndex: number) => {
+  const item = purchaseItemsForm.value[index];
+  item.subtotal_discounts.splice(discountIndex, 1);
+  resequence(item.subtotal_discounts);
+};
+
+const addGlobalDiscount = () => {
+  purchaseGlobalDiscountsForm.value.push({
+    id: null,
+    sequence: purchaseGlobalDiscountsForm.value.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeGlobalDiscount = (index: number) => {
+  purchaseGlobalDiscountsForm.value.splice(index, 1);
+  resequence(purchaseGlobalDiscountsForm.value);
+};
+
+const addAdditionalCost = () => {
+  purchaseAdditionalCostsForm.value.push({
+    id: null,
+    purchase_additional_cost_category_id: '',
+    code: '_AUTO_',
+    date: '_AUTO_',
+    due_days: 0,
+    paid_immediately_cash_account_id: null,
+    amount_paid_immediately: 0,
+    amount_payable: 0,
+    remarks: '',
+  });
+};
+
+const removeAdditionalCost = (index: number) => {
+  purchaseAdditionalCostsForm.value.splice(index, 1);
+  Object.keys(purchaseForm.errors).forEach((key) => {
+    if (key.startsWith('additional_costs.')) {
+      purchaseForm.forgetError(key as any);
+    }
+  });
+  syncDerivedFields();
+};
+
+const addSerial = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].serials.push({ id: null, serial: '' });
+  validateField(`items.${index}.serials`);
+};
+
+const removeSerial = (index: number, serialIndex: number) => {
+  purchaseItemsForm.value[index].serials.splice(serialIndex, 1);
+  validateField(`items.${index}.serials`);
+};
+
+const togglePurchaseItemDetails = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = !purchaseItemDetailsExpanded.value[index];
+};
+
+const updateVatProfileForItem = (item: PurchaseItemForm) => {
+  const selectedVatProfile = vatProfileOptions.value.find((option) => option.code === item.vat_profile_id);
+
+  if (!selectedVatProfile) {
+    item.vat_profile_id = null;
+    item.vat_profile_name = null;
+    item.vat_rate = 0;
+    item.vat_base_numerator = 1;
+    item.vat_base_denominator = 1;
+    return;
+  }
+
+  item.vat_profile_name = selectedVatProfile.name;
+  item.vat_rate = selectedVatProfile.vat_rate;
+  item.vat_base_numerator = normalizeVatBaseFactor(selectedVatProfile.vat_base_numerator);
+  item.vat_base_denominator = normalizeVatBaseFactor(selectedVatProfile.vat_base_denominator);
+};
+
+const getItemUnitPriceAfterDiscountPreview = (item: PurchaseItemForm) =>
+  item.product_unit_price_discounts.reduce((currentPrice, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextPrice = discount.discount_type === 'PERCENTAGE'
+      ? currentPrice - ((currentPrice * discountValue) / 100)
+      : currentPrice - discountValue;
+
+    return Math.max(nextPrice, 0);
+  }, Number(item.product_unit_price || 0));
+
+const getItemUnitPriceSubtotalAfterDiscountPreview = (item: PurchaseItemForm) =>
+  Number(item.qty || 0) * getItemUnitPriceAfterDiscountPreview(item);
+
+const getItemSubtotalAfterDiscountPreview = (item: PurchaseItemForm) =>
+  item.subtotal_discounts.reduce((currentSubtotal, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextSubtotal = discount.discount_type === 'PERCENTAGE'
+      ? currentSubtotal - ((currentSubtotal * discountValue) / 100)
+      : currentSubtotal - discountValue;
+
+    return Math.max(nextSubtotal, 0);
+  }, getItemUnitPriceSubtotalAfterDiscountPreview(item));
+
+const getItemsSubtotalAfterDiscountPreview = () =>
+  purchaseItemsForm.value.reduce((total, item) => total + getItemSubtotalAfterDiscountPreview(item), 0);
+
+const getPurchaseGlobalDiscountPreview = () => {
+  let totalDiscount = 0;
+
+  purchaseGlobalDiscountsForm.value.forEach((discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const currentTotal = Math.max(getItemsSubtotalAfterDiscountPreview() - totalDiscount, 0);
+    const appliedDiscount = discount.discount_type === 'PERCENTAGE'
+      ? (currentTotal * discountValue) / 100
+      : discountValue;
+
+    totalDiscount += Math.min(Math.max(appliedDiscount, 0), currentTotal);
+  });
+
+  return totalDiscount;
+};
+
+const getItemGlobalDiscountPreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const totalBeforeGlobalDiscount = getItemsSubtotalAfterDiscountPreview();
+  const totalGlobalDiscount = getPurchaseGlobalDiscountPreview();
+
+  if (totalBeforeGlobalDiscount <= 0 || totalGlobalDiscount <= 0) {
+    return 0;
+  }
+
+  const allocations = purchaseItemsForm.value.map((currentItem, index) => {
+    if (index === purchaseItemsForm.value.length - 1) {
+      return 0;
+    }
+
+    return totalGlobalDiscount * (getItemSubtotalAfterDiscountPreview(currentItem) / totalBeforeGlobalDiscount);
+  });
+
+  const allocatedBeforeCurrent = allocations
+    .slice(0, itemIndex)
+    .reduce((total, allocation) => total + allocation, 0);
+
+  if (itemIndex === purchaseItemsForm.value.length - 1) {
+    return Math.max(totalGlobalDiscount - allocatedBeforeCurrent, 0);
+  }
+
+  return Math.min(Math.max(allocations[itemIndex] || 0, 0), getItemSubtotalAfterDiscountPreview(item));
+};
+
+const getItemSubtotalAfterGlobalDiscountPreview = (item: PurchaseItemForm, itemIndex: number) =>
+  Math.max(getItemSubtotalAfterDiscountPreview(item) - getItemGlobalDiscountPreview(item, itemIndex), 0);
+
+const getItemVatBasePreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+  const vatBaseFactor = Number(item.vat_base_denominator || 0) > 0
+    ? Number(item.vat_base_numerator || 0) / Number(item.vat_base_denominator || 1)
+    : 0;
+
+  if (subtotalAfterGlobalDiscount <= 0 || vatRate <= 0 || vatBaseFactor <= 0) {
+    return 0;
+  }
+
+  let taxableBase = subtotalAfterGlobalDiscount;
+
+  if (item.product_unit_is_price_include_vat) {
+    taxableBase = taxableBase / (1 + (vatRate / 100));
+  }
+
+  return taxableBase * vatBaseFactor;
+};
+
+const getItemVatPreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const vatBase = getItemVatBasePreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+
+  if (vatBase <= 0 || vatRate <= 0) {
+    return 0;
+  }
+
+  return vatBase * (vatRate / 100);
+};
+
+const getItemAmountPayablePreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  if (item.product_unit_is_price_include_vat) {
+    return subtotalAfterGlobalDiscount;
+  }
+
+  return subtotalAfterGlobalDiscount + getItemVatPreview(item, itemIndex);
+};
+
+const getPurchaseItemTotalAfterGlobalDiscountPreview = () =>
+  purchaseItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseVatBasePreview = () =>
+  purchaseItemsForm.value.reduce((total, item, itemIndex) => total + getItemVatBasePreview(item, itemIndex), 0);
+
+const getPurchaseVatPreview = () =>
+  purchaseItemsForm.value.reduce((total, item, itemIndex) => total + getItemVatPreview(item, itemIndex), 0);
+
+const getAdditionalCostTotal = (additionalCost: PurchaseAdditionalCostForm) =>
+  Math.max(Number(additionalCost.amount_paid_immediately || 0), 0)
+  + Math.max(Number(additionalCost.amount_payable || 0), 0);
+
+const getAdditionalCostsTotalPreview = () =>
+  purchaseAdditionalCostsForm.value.reduce((total, item) => total + getAdditionalCostTotal(item), 0);
+
+const getPurchaseAmountPayablePreview = () =>
+  purchaseItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemAmountPayablePreview(item, itemIndex),
+    0,
+  ) + getAdditionalCostsTotalPreview() + Number(purchaseForm.rounding || 0);
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  alertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  title: string,
+  alertList: Record<string, Array<string>> | null,
+) => {
+  const payload: AlertPlaceholderProps = {
+    alertType,
+    title,
+    alertList,
+  };
+  emits('show-alertplaceholder', payload);
+};
+
+const showNotification = (title: string, content: string) => {
+  const payload: NotificationData = {
+    title,
+    content,
+  };
+  emits('show-notification', payload);
+};
+
+const onSubmit = async () => {
+  syncDerivedFields();
+
+  if (purchaseForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await purchaseForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(
+      t('views.purchase.alert.create.title'),
+      t('views.purchase.alert.create.message'),
+    );
+    router.push({ name: 'side-menu-purchase-list' });
+  } catch (error) {
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form v-if="selectedUserLocation" id="purchaseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': invalidField('code') }">
+                {{ t('views.purchase.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseForm.code"
+                :class="{ 'border-danger': invalidField('code') }"
+                :placeholder="t('views.purchase.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.code" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('date') }">
+                {{ t('views.purchase.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseForm.date"
+                :class="{ 'border-danger': invalidField('date') }"
+                @change="purchaseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.date" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': invalidField('due_days') }">
+                {{ t('views.purchase.fields.due_days') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.due_days"
+                type="number"
+                min="0"
+                :class="{ 'border-danger': invalidField('due_days') }"
+                @change="purchaseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('supplier_id') }">
+                {{ t('views.purchase.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseForm.supplier_id"
+                v-model:search="supplierSearch"
+                :options="supplierOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('supplier_id') }"
+                @search="loadSupplierDDL"
+                @change="purchaseForm.validate('supplier_id')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.supplier_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('purchase_order_id') }">
+                {{ t('views.purchase.fields.purchase_order_id') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.purchase_order_id"
+                :class="{ 'border-danger': invalidField('purchase_order_id') }"
+                :placeholder="t('views.purchase.fields.purchase_order_id_optional')"
+                @change="purchaseForm.validate('purchase_order_id')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.purchase_order_id" />
+            </div>
+            <div v-if="isDirectMode" class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('direct_receipt_warehouse_id') }">
+                {{ t('views.purchase.fields.direct_receipt_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseForm.direct_receipt_warehouse_id"
+                v-model:search="warehouseSearch"
+                :options="warehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('direct_receipt_warehouse_id') }"
+                @search="loadWarehouseDDL"
+                @change="purchaseForm.validate('direct_receipt_warehouse_id')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.direct_receipt_warehouse_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_number') }">
+                {{ t('views.purchase.fields.tax_invoice_number') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.tax_invoice_number"
+                :class="{ 'border-danger': invalidField('tax_invoice_number') }"
+                @change="purchaseForm.validate('tax_invoice_number')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_number" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_vat_base') }">
+                {{ t('views.purchase.fields.tax_invoice_vat_base') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.tax_invoice_vat_base"
+                :allow-negative="false"
+                :class="{ 'border-danger': invalidField('tax_invoice_vat_base') }"
+                @change="purchaseForm.validate('tax_invoice_vat_base')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_vat_base" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_vat') }">
+                {{ t('views.purchase.fields.tax_invoice_vat') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.tax_invoice_vat"
+                :allow-negative="false"
+                :class="{ 'border-danger': invalidField('tax_invoice_vat') }"
+                @change="purchaseForm.validate('tax_invoice_vat')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_vat" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4 flex flex-col justify-center">
+              <FormLabel>
+                {{ t('views.purchase.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="purchaseForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': invalidField('remarks') }">
+                {{ t('views.purchase.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="purchaseForm.remarks"
+                :class="{ 'border-danger': invalidField('remarks') }"
+                @change="purchaseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="space-y-4 p-5">
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.items_empty') }}
+            </div>
+            <Button type="button" variant="primary" @click="openAddProductUnit">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.add') }}
+            </Button>
+          </div>
+
+          <FormErrorMessages :messages="purchaseForm.errors.items" />
+
+          <div v-if="purchaseItemsForm.length === 0" class="rounded-md border border-dashed p-4 text-sm text-slate-500">
+            {{ t('views.purchase.fields.items_empty') }}
+          </div>
+
+          <div
+            v-for="(item, index) in purchaseItemsForm"
+            :key="`${item.product_unit_id}-${index}`"
+            class="mt-3 border-t border-slate-200/60 pt-5 first:mt-0 first:border-t-0 first:pt-0 dark:border-darkmode-400"
+          >
+            <div v-if="currentItemLayout === 'sm'" class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12">
+                <div class="grid grid-cols-3 gap-4">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="currentItemLayout === 'md'" class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12 md:col-span-5">
+                <div class="grid grid-cols-3 gap-4">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12 md:col-span-4">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12 lg:col-span-4">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-3">
+                <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-2">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12 lg:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="currentItemLayout !== 'lg' && purchaseItemDetailsExpanded[index]" class="mt-4 space-y-4">
+              <div class="rounded-md border border-slate-200/60 p-4 space-y-5 dark:border-darkmode-400">
+                <div class="font-medium text-sm">{{ t('views.purchase.fields.item_price_breakdown') }}</div>
+
+                <div class="space-y-3">
+                  <div v-if="item.product_unit_price_discounts.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.product_unit_price_discounts_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                      :key="`${index}-price-mobile-${discountIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-2">
+                        <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                        <FormInput :model-value="discountIndex + 1" readonly />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                        <FormSelect v-model="discount.discount_type">
+                          <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </option>
+                        </FormSelect>
+                      </div>
+                      <div class="col-span-12 md:col-span-6">
+                        <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                        <div class="flex items-start gap-2">
+                          <div class="flex-1 min-w-0">
+                            <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                          </div>
+                          <div class="shrink-0">
+                            <Button
+                              type="button"
+                              variant="outline-secondary"
+                              class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                              @click="removeItemPriceDiscount(index, discountIndex)"
+                            >
+                              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.price_after_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.subtotal') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+                </div>
+
+                <div class="space-y-3">
+                  <div v-if="item.subtotal_discounts.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.subtotal_discounts_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(discount, discountIndex) in item.subtotal_discounts"
+                      :key="`${index}-subtotal-mobile-${discountIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-2">
+                        <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                        <FormInput :model-value="discountIndex + 1" readonly />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                        <FormSelect v-model="discount.discount_type">
+                          <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </option>
+                        </FormSelect>
+                      </div>
+                      <div class="col-span-12 md:col-span-6">
+                        <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                        <div class="flex items-start gap-2">
+                          <div class="flex-1 min-w-0">
+                            <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                          </div>
+                          <div class="shrink-0">
+                            <Button
+                              type="button"
+                              variant="outline-secondary"
+                              class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                              @click="removeItemSubtotalDiscount(index, discountIndex)"
+                            >
+                              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.subtotal_after_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.global_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemGlobalDiscountPreview(item, index)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.vat') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemVatPreview(item, index)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.amount_payable') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rounded-md border border-slate-200/60 p-4 space-y-4 dark:border-darkmode-400">
+                <div class="font-medium text-sm">{{ t('views.purchase.fields.item_additional_details') }}</div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3">
+                  <div class="col-span-12 md:col-span-4">
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                    <FormSwitch>
+                      <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                    </FormSwitch>
+                  </div>
+                  <div class="col-span-12 md:col-span-8">
+                    <FormLabel>{{ t('views.purchase.fields.vat_profile_id') }}</FormLabel>
+                    <FormSelect
+                      v-model="item.vat_profile_id"
+                      @change="
+                        updateVatProfileForItem(item);
+                        validateField(`items.${index}.vat_profile_id`);
+                      "
+                    >
+                      <option :value="null">{{ t('components.dropdown.placeholder') }}</option>
+                      <option v-for="vatProfile in vatProfileOptions" :key="vatProfile.code" :value="vatProfile.code">
+                        {{ vatProfile.name }}
+                      </option>
+                    </FormSelect>
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.vat_profile_id`)" />
+                  </div>
+                  <div class="col-span-12 md:col-span-4">
+                    <FormLabel>{{ t('views.purchase.fields.vat_rate') }}</FormLabel>
+                    <FormInputCurrency :model-value="item.vat_rate" readonly />
+                  </div>
+                  <div class="col-span-12 md:col-span-8">
+                    <FormLabel>{{ t('views.purchase.fields.vat_base_fraction') }}</FormLabel>
+                    <FormInput :model-value="`${item.vat_base_numerator}/${item.vat_base_denominator}`" readonly />
+                  </div>
+                  <div class="col-span-12">
+                    <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                    <FormTextarea v-model="item.remarks" @change="validateField(`items.${index}.remarks`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.remarks`)" />
+                  </div>
+                </div>
+
+                <div v-if="isDirectMode && item.is_use_serial_number" class="space-y-3">
+                  <div class="flex items-center justify-between">
+                    <div class="font-medium">{{ t('views.purchase.fields.serials') }}</div>
+                    <Button type="button" variant="outline-primary" size="sm" @click="addSerial(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials`)" />
+                  <div v-if="item.serials.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.serials_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(serial, serialIndex) in item.serials"
+                      :key="`serial-${index}-${serialIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-10">
+                        <FormLabel>{{ t('views.product.fields.serial_number') }}</FormLabel>
+                        <FormInput
+                          v-model="serial.serial"
+                          @change="validateField(`items.${index}.serials.${serialIndex}.serial`)"
+                        />
+                        <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials.${serialIndex}.serial`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-2 flex items-end">
+                        <Button
+                          type="button"
+                          variant="outline-secondary"
+                          class="h-[38px] w-full min-w-0 flex items-center justify-center"
+                          @click="removeSerial(index, serialIndex)"
+                        >
+                          <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="purchaseItemDetailsExpanded[index]" class="mt-4 grid grid-cols-12 gap-4">
+              <div class="col-span-12 lg:col-span-6">
+                <div class="rounded-md border border-slate-200/60 p-4 space-y-4 dark:border-darkmode-400">
+                  <div class="font-medium text-sm">{{ t('views.purchase.fields.item_additional_details') }}</div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-5">
+                      <FormLabel>{{ t('views.purchase.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                      <FormSwitch>
+                        <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                      </FormSwitch>
+                    </div>
+                    <div class="col-span-12 md:col-span-7">
+                      <FormLabel>{{ t('views.purchase.fields.vat_profile_id') }}</FormLabel>
+                      <FormSelect
+                        v-model="item.vat_profile_id"
+                        @change="
+                          updateVatProfileForItem(item);
+                          validateField(`items.${index}.vat_profile_id`);
+                        "
+                      >
+                        <option :value="null">{{ t('components.dropdown.placeholder') }}</option>
+                        <option v-for="vatProfile in vatProfileOptions" :key="vatProfile.code" :value="vatProfile.code">
+                          {{ vatProfile.name }}
+                        </option>
+                      </FormSelect>
+                      <FormErrorMessages :messages="getFieldErrors(`items.${index}.vat_profile_id`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel>{{ t('views.purchase.fields.vat_rate') }}</FormLabel>
+                      <FormInputCurrency :model-value="item.vat_rate" readonly />
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormLabel>{{ t('views.purchase.fields.vat_base_fraction') }}</FormLabel>
+                      <FormInput :model-value="`${item.vat_base_numerator}/${item.vat_base_denominator}`" readonly />
+                    </div>
+                    <div class="col-span-12">
+                      <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                      <FormTextarea v-model="item.remarks" @change="validateField(`items.${index}.remarks`)" />
+                      <FormErrorMessages :messages="getFieldErrors(`items.${index}.remarks`)" />
+                    </div>
+                  </div>
+
+                  <div v-if="isDirectMode && item.is_use_serial_number" class="space-y-3">
+                    <div class="flex items-center justify-between">
+                      <div class="font-medium">{{ t('views.purchase.fields.serials') }}</div>
+                      <Button type="button" variant="outline-primary" size="sm" @click="addSerial(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials`)" />
+                    <div v-if="item.serials.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.serials_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(serial, serialIndex) in item.serials"
+                        :key="`${index}-serial-${serialIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-10">
+                          <FormLabel>{{ t('views.product.fields.serial_number') }}</FormLabel>
+                          <FormInput
+                            v-model="serial.serial"
+                            @change="validateField(`items.${index}.serials.${serialIndex}.serial`)"
+                          />
+                          <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials.${serialIndex}.serial`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-2 flex items-end">
+                          <Button
+                            type="button"
+                            variant="outline-secondary"
+                            class="h-[38px] w-full min-w-0 flex items-center justify-center"
+                            @click="removeSerial(index, serialIndex)"
+                          >
+                            <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 lg:col-span-6">
+                <div class="rounded-md border border-slate-200/60 p-4 space-y-5 dark:border-darkmode-400">
+                  <div class="font-medium text-sm">{{ t('views.purchase.fields.item_price_breakdown') }}</div>
+
+                  <div class="space-y-3">
+                    <div v-if="item.product_unit_price_discounts.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.product_unit_price_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                        :key="`${index}-price-${discountIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button
+                                type="button"
+                                variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemPriceDiscount(index, discountIndex)"
+                              >
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.price_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.subtotal') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="space-y-3">
+                    <div v-if="item.subtotal_discounts.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.subtotal_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(discount, discountIndex) in item.subtotal_discounts"
+                        :key="`${index}-subtotal-${discountIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button
+                                type="button"
+                                variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemSubtotalDiscount(index, discountIndex)"
+                              >
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.subtotal_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.global_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemGlobalDiscountPreview(item, index)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.vat') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemVatPreview(item, index)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.amount_payable') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="space-y-4 p-5">
+          <div class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="mb-3 flex items-center justify-between gap-3">
+              <div class="font-medium">{{ t('views.purchase.fields.global_discounts') }}</div>
+              <Button type="button" variant="primary" @click="addGlobalDiscount">
+                <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                {{ t('components.buttons.add') }}
+              </Button>
+            </div>
+            <div v-if="purchaseGlobalDiscountsForm.length === 0" class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.global_discounts_empty') }}
+            </div>
+            <div
+              v-for="(discount, index) in purchaseGlobalDiscountsForm"
+              :key="`global-discount-${index}`"
+              class="mb-3 grid grid-cols-12 gap-3 last:mb-0"
+            >
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                <FormInput :model-value="discount.sequence" readonly />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                <FormSelect v-model="discount.discount_type">
+                  <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                  </option>
+                </FormSelect>
+              </div>
+              <div class="col-span-12 md:col-span-2">
+                <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+              </div>
+              <div class="col-span-12 md:col-span-2 flex items-end">
+                <Button
+                  type="button"
+                  variant="outline-secondary"
+                  class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                  @click="removeGlobalDiscount(index)"
+                >
+                  <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="mb-3 flex items-center justify-between gap-3">
+              <div>
+                <div class="font-medium">{{ t('views.purchase.field_groups.additional_costs') }}</div>
+                <div class="text-sm text-slate-500">
+                  {{ t('views.purchase.fields.additional_costs_hint') }}
+                </div>
+              </div>
+              <Button type="button" variant="primary" @click="addAdditionalCost">
+                <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                {{ t('components.buttons.add') }}
+              </Button>
+            </div>
+
+            <FormErrorMessages :messages="purchaseForm.errors.additional_costs" />
+
+            <div v-if="purchaseAdditionalCostsForm.length === 0" class="rounded-md border border-dashed p-4 text-sm text-slate-500">
+              {{ t('views.purchase.fields.additional_costs_empty') }}
+            </div>
+
+            <div
+              v-for="(additionalCost, index) in purchaseAdditionalCostsForm"
+              :key="`additional-cost-${index}`"
+              class="mt-4 rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400"
+            >
+              <div class="mb-3 flex justify-end">
+                <Button type="button" variant="outline-danger" @click="removeAdditionalCost(index)">
+                  <Lucide icon="Trash2" class="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.code`) }">
+                    {{ t('views.purchase.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    v-model="additionalCost.code"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.code`) }"
+                    @set-auto="setAdditionalCostCode(index)"
+                    @change="validateField(`additional_costs.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.code`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.date`) }">
+                    {{ t('views.purchase.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    v-model="additionalCost.date"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.date`) }"
+                    @change="validateField(`additional_costs.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.date`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.due_days`) }">
+                    {{ t('views.purchase.fields.due_days') }}
+                  </FormLabel>
+                  <FormInput
+                    v-model="additionalCost.due_days"
+                    type="number"
+                    min="0"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.due_days`) }"
+                    @change="validateField(`additional_costs.${index}.due_days`)"
+                  />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.due_days`)" />
+                </div>
+                <div class="col-span-12 md:col-span-6">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.purchase_additional_cost_category_id`) }">
+                    {{ t('views.purchase.fields.purchase_additional_cost_category_id') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    v-model="additionalCost.purchase_additional_cost_category_id"
+                    v-model:search="additionalCostCategorySearch"
+                    :options="additionalCostCategoryOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.purchase_additional_cost_category_id`) }"
+                    @search="loadAdditionalCostCategoryDDL"
+                    @change="validateField(`additional_costs.${index}.purchase_additional_cost_category_id`)"
+                  />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.purchase_additional_cost_category_id`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.paid_immediately_cash_account_id`) }">
+                    {{ t('views.purchase.fields.paid_immediately_cash_account_id') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    v-model="additionalCost.paid_immediately_cash_account_id"
+                    v-model:search="cashAccountSearch"
+                    :options="cashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.paid_immediately_cash_account_id`) }"
+                    @search="loadCashAccountDDL"
+                    @change="validateField(`additional_costs.${index}.paid_immediately_cash_account_id`)"
+                  />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.paid_immediately_cash_account_id`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.amount_paid_immediately`) }">
+                    {{ t('views.purchase.fields.amount_paid_immediately') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    v-model="additionalCost.amount_paid_immediately"
+                    :allow-negative="false"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.amount_paid_immediately`) }"
+                    @change="
+                      validateField(`additional_costs.${index}.amount_paid_immediately`);
+                      syncDerivedFields();
+                    "
+                  />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.amount_paid_immediately`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.amount_payable`) }">
+                    {{ t('views.purchase.fields.amount_payable') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    v-model="additionalCost.amount_payable"
+                    :allow-negative="false"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.amount_payable`) }"
+                    @change="
+                      validateField(`additional_costs.${index}.amount_payable`);
+                      syncDerivedFields();
+                    "
+                  />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.amount_payable`)" />
+                </div>
+                <div class="col-span-12 md:col-span-12">
+                  <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                  <FormTextarea
+                    v-model="additionalCost.remarks"
+                    @change="validateField(`additional_costs.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-12 gap-4 rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.items_subtotal_after_discount') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getItemsSubtotalAfterDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.global_discount_total') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseGlobalDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.item_total_after_global_discount') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseItemTotalAfterGlobalDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.vat_base') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseVatBasePreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.vat') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseVatPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.additional_cost') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getAdditionalCostsTotalPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': invalidField('rounding') }">
+                {{ t('views.purchase.fields.rounding') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.rounding"
+                :class="{ 'border-danger': invalidField('rounding') }"
+                @change="purchaseForm.validate('rounding')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.rounding" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>{{ t('views.purchase.fields.amount_payable_preview') }}</FormLabel>
+              <FormInputCurrency :model-value="getPurchaseAmountPayablePreview()" readonly />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="submit" variant="primary" class="w-32 shadow-md" :disabled="purchaseForm.validating || purchaseForm.hasErrors">
+            <Lucide v-if="purchaseForm.validating" icon="Loader" class="mr-2 h-4 w-4 animate-spin" />
+            <Lucide v-else icon="Save" class="mr-2 h-4 w-4" />
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <ProductUnitPickerDialog
+    v-if="selectedUserLocation"
+    v-model:search-text="productSearchText"
+    :open="showProductUnitModal"
+    :title="t('views.purchase.fields.product_unit_id')"
+    :is-searching="isSearchingProductUnit"
+    :options="productUnitOptions"
+    :columns="productUnitDialogColumns"
+    @close="showProductUnitModal = false"
+    @search="searchProductUnits"
+    @select="selectProductUnit($event as ProductUnitOption)"
+  />
+</template>
diff --git a/web/src/pages/purchase/PurchaseCreateManual.vue b/web/src/pages/purchase/PurchaseCreateManual.vue
new file mode 100644
index 000000000..4db3c32e6
--- /dev/null
+++ b/web/src/pages/purchase/PurchaseCreateManual.vue
@@ -0,0 +1,1986 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { debounce } from 'lodash';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import type { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelect,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductUnitPickerDialog from '@/components/Product/ProductUnitPickerDialog.vue';
+import CacheService from '@/services/CacheService';
+import CashAccountService from '@/services/CashAccountService';
+import ProductService from '@/services/ProductService';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import PurchaseService from '@/services/PurchaseService';
+import SupplierService from '@/services/SupplierService';
+import VatProfileService from '@/services/VatProfileService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { CardState } from '@/types/enums/CardState';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Purchase } from '@/types/models/Purchase';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type PurchaseDiscountForm = {
+  id?: string | null;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+};
+
+type PurchaseSerialForm = {
+  id?: string | null;
+  serial: string;
+};
+
+type PurchaseAdditionalCostForm = {
+  id?: string | null;
+  purchase_additional_cost_category_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  paid_immediately_cash_account_id: string | null;
+  amount_paid_immediately: number;
+  amount_payable: number;
+  remarks: string | null;
+};
+
+type ProductUnitOption = {
+  product_unit_id: string;
+  product_unit_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  price: number;
+  product_unit_is_price_include_vat: boolean;
+  vat_profile_id: string | null;
+  vat_profile_name: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  is_use_serial_number: boolean;
+};
+
+type VatProfileOption = {
+  code: string;
+  name: string;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+};
+
+type PurchaseItemForm = {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_price: number;
+  product_unit_is_price_include_vat: boolean;
+  product_unit_price_discounts: PurchaseDiscountForm[];
+  subtotal_discounts: PurchaseDiscountForm[];
+  vat_profile_id: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  vat_profile_name?: string | null;
+  is_use_serial_number?: boolean;
+  serials: PurchaseSerialForm[];
+};
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const purchaseService = new PurchaseService();
+const supplierService = new SupplierService();
+const vatProfileService = new VatProfileService();
+const cashAccountService = new CashAccountService();
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const productService = new ProductService();
+const cacheService = new CacheService();
+
+const purchaseForm: any = purchaseService.usePurchaseCreateManualForm();
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+const isDirectMode = computed(() => false);
+const cacheKey = 'PURCHASE_CREATE_MANUAL';
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.purchase.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.purchase_data', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.items', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const additionalCostCategoryDDL = ref<Array<DropDownOption> | null>(null);
+const additionalCostCategorySearch = ref('');
+const additionalCostCategoryOptions = computed(() =>
+  (additionalCostCategoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<VatProfileOption> | null>(null);
+const vatProfileOptions = computed(() => vatProfileDDL.value ?? []);
+
+const showProductUnitModal = ref(false);
+const productSearchText = ref('');
+const isSearchingProductUnit = ref(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+
+const discountTypeOptions = [
+  { value: 'PERCENTAGE', label: 'Percentage' },
+  { value: 'NOMINAL', label: 'Nominal' },
+];
+
+const productUnitDialogColumns = [
+  {
+    key: 'unit_name',
+    label: t('views.product.table.cols.unit'),
+  },
+  {
+    key: 'conversion_value',
+    label: t('views.purchase.fields.product_unit_conversion_value'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+  {
+    key: 'price',
+    label: t('views.purchase.fields.product_unit_price'),
+    align: 'right' as const,
+    formatter: 'currency' as const,
+  },
+];
+
+const purchaseItemsForm = computed<PurchaseItemForm[]>(
+  () => purchaseForm.items as PurchaseItemForm[],
+);
+const purchaseItemDetailsExpanded = ref<boolean[]>([]);
+const viewportWidth = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 1024);
+const purchaseGlobalDiscountsForm = computed<PurchaseDiscountForm[]>(
+  () => purchaseForm.global_discounts as PurchaseDiscountForm[],
+);
+const purchaseAdditionalCostsForm = computed<PurchaseAdditionalCostForm[]>(
+  () => purchaseForm.additional_costs as PurchaseAdditionalCostForm[],
+);
+
+const currentItemLayout = computed<'sm' | 'md' | 'lg'>(() => {
+  if (viewportWidth.value >= 1024) return 'lg';
+  if (viewportWidth.value >= 768) return 'md';
+  return 'sm';
+});
+
+const invalidField = (field: string) => purchaseForm.invalid(field as any);
+const validateField = (field: string) => purchaseForm.validate(field as any);
+const getFieldErrors = (field: string) =>
+  (purchaseForm.errors as Record<string, string | undefined>)[field];
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+const getPurchaseItemShouldStartExpanded = (item: PurchaseItemForm) =>
+  item.product_unit_price_discounts.length > 0 ||
+  item.subtotal_discounts.length > 0 ||
+  (isDirectMode.value && item.serials.length > 0);
+
+const syncPurchaseItemDetailsExpanded = () => {
+  purchaseItemDetailsExpanded.value = purchaseItemsForm.value.map(
+    (item, index) => purchaseItemDetailsExpanded.value[index] ?? getPurchaseItemShouldStartExpanded(item),
+  );
+};
+
+const syncViewportWidth = () => {
+  viewportWidth.value = typeof window !== 'undefined' ? window.innerWidth : 1024;
+};
+
+const appendDropDownOption = (
+  target: typeof supplierDDL | typeof cashAccountDDL | typeof additionalCostCategoryDDL,
+  option?: DropDownOption | null,
+) => {
+  if (!option?.code) return;
+
+  const current = target.value ?? [];
+  if (current.some((item) => item.code === option.code)) return;
+  target.value = [...current, option];
+};
+
+const appendVatProfileOption = (option: VatProfileOption) => {
+  const current = vatProfileDDL.value ?? [];
+  if (current.some((item) => item.code === option.code)) return;
+  vatProfileDDL.value = [...current, option];
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const normalizeVatBaseFactor = (value: unknown) => Math.max(1, Number(value ?? 1) || 0);
+const getBaseUnitName = (product: any) =>
+  (product?.product_units ?? []).find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+
+const syncDerivedFields = () => {
+  purchaseForm.additional_cost = getAdditionalCostsTotalPreview();
+};
+
+watch(
+  purchaseForm,
+  debounce((newValue) => {
+    cacheService.setLastEntity(cacheKey, newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+watch(
+  purchaseAdditionalCostsForm,
+  () => {
+    syncDerivedFields();
+  },
+  { deep: true },
+);
+
+watch(
+  purchaseItemsForm,
+  () => {
+    syncPurchaseItemDetailsExpanded();
+  },
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  purchaseForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  await Promise.all([
+    loadSupplierDDL(),
+    loadVatProfileDDL(),
+    loadCashAccountDDL(),
+    loadAdditionalCostCategoryDDL(),
+  ]);
+
+  loadFromCache();
+  syncDerivedFields();
+  syncPurchaseItemDetailsExpanded();
+  window.addEventListener('resize', syncViewportWidth);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncViewportWidth);
+});
+
+const loadFromCache = () => {
+  const lastEntity = cacheService.getLastEntity(cacheKey);
+  if (!isRecord(lastEntity)) return;
+  purchaseForm.setData(lastEntity);
+  syncPurchaseItemDetailsExpanded();
+};
+
+const hydrateForm = (purchase: Purchase) => {
+  appendDropDownOption(supplierDDL, purchase.supplier
+    ? {
+      code: purchase.supplier.id,
+      name: purchase.supplier.name,
+    }
+    : null);
+
+  (purchase.additional_costs ?? []).forEach((additionalCost) => {
+    appendDropDownOption(additionalCostCategoryDDL, additionalCost.category
+      ? {
+        code: additionalCost.category.id,
+        name: additionalCost.category.name,
+      }
+      : null);
+    appendDropDownOption(cashAccountDDL, additionalCost.paid_immediately_cash_account
+      ? {
+        code: additionalCost.paid_immediately_cash_account.id,
+        name: additionalCost.paid_immediately_cash_account.name,
+      }
+      : null);
+  });
+
+  purchaseForm.setData({
+    company_id: purchase.company?.id ?? selectedUserLocation.value?.company.id ?? '',
+    branch_id: purchase.branch?.id ?? selectedUserLocation.value?.branch.id ?? '',
+    code: purchase.code,
+    date: formatDate(purchase.date, 'YYYY-MM-DD HH:mm:ss'),
+    due_days: Number(purchase.due_days ?? 0),
+    supplier_id: purchase.supplier?.id ?? null,
+    purchase_order_id: purchase.purchase_order?.id ?? null,
+    tax_invoice_number: purchase.tax_invoice_number ?? null,
+    tax_invoice_vat_base: Number(purchase.tax_invoice_vat_base ?? 0),
+    tax_invoice_vat: Number(purchase.tax_invoice_vat ?? 0),
+    remarks: purchase.remarks ?? '',
+    is_posted: Boolean(purchase.is_posted),
+    additional_cost: Number(purchase.additional_cost ?? 0),
+    rounding: Number(purchase.rounding ?? 0),
+    delete_item_ids: [],
+    items: (purchase.items ?? []).map((item) => {
+      if (item.vat_profile?.id) {
+        appendVatProfileOption({
+          code: item.vat_profile.id,
+          name: item.vat_profile.name,
+          vat_rate: Number(item.vat_profile.vat_rate ?? item.vat_rate ?? 0),
+          vat_base_numerator: normalizeVatBaseFactor(
+            item.vat_profile.vat_base_numerator ?? item.vat_base_numerator ?? 1,
+          ),
+          vat_base_denominator: normalizeVatBaseFactor(
+            item.vat_profile.vat_base_denominator ?? item.vat_base_denominator ?? 1,
+          ),
+        });
+      }
+
+      return {
+        id: item.id ?? null,
+        qty: Number(item.qty ?? 0),
+        product_unit_id: item.product_unit?.id ?? '',
+        product_unit_product_code: item.product_unit?.code ?? '',
+        product_unit_product_name: item.product_unit?.product?.name ?? '',
+        product_unit_unit_name: item.product_unit?.unit?.name ?? '',
+        product_unit_base_unit_name: getBaseUnitName(item.product_unit?.product),
+        product_unit_conversion_value: Number(item.product_unit_conversion_value ?? item.product_unit?.conversion_value ?? 1),
+        product_unit_price: Number(item.product_unit_price ?? 0),
+        product_unit_is_price_include_vat: Boolean(item.product_unit_is_price_include_vat),
+        delete_product_unit_price_discount_ids: [],
+        product_unit_price_discounts: (item.product_unit_price_discounts ?? []).map((discount) => ({
+          id: discount.id ?? null,
+          sequence: Number(discount.sequence ?? 0),
+          discount_type: discount.discount_type ?? 'PERCENTAGE',
+          discount_value: Number(discount.discount_value ?? 0),
+        })),
+        delete_subtotal_discount_ids: [],
+        subtotal_discounts: (item.subtotal_discounts ?? []).map((discount) => ({
+          id: discount.id ?? null,
+          sequence: Number(discount.sequence ?? 0),
+          discount_type: discount.discount_type ?? 'PERCENTAGE',
+          discount_value: Number(discount.discount_value ?? 0),
+        })),
+        vat_profile_id: item.vat_profile?.id ?? null,
+        vat_profile_name: item.vat_profile?.name ?? null,
+        vat_rate: Number(item.vat_rate ?? 0),
+        vat_base_numerator: normalizeVatBaseFactor(item.vat_base_numerator ?? 1),
+        vat_base_denominator: normalizeVatBaseFactor(item.vat_base_denominator ?? 1),
+        remarks: item.remarks ?? '',
+        is_use_serial_number: Boolean(item.product_unit?.product?.is_use_serial_number),
+        serials: [],
+      };
+    }),
+    delete_global_discount_ids: [],
+    global_discounts: (purchase.global_discounts ?? []).map((discount) => ({
+      id: discount.id ?? null,
+      sequence: Number(discount.sequence ?? 0),
+      discount_type: discount.discount_type ?? 'PERCENTAGE',
+      discount_value: Number(discount.discount_value ?? 0),
+    })),
+    delete_additional_cost_ids: [],
+    additional_costs: (purchase.additional_costs ?? []).map((additionalCost) => ({
+      id: additionalCost.id ?? null,
+      purchase_additional_cost_category_id: additionalCost.category?.id ?? '',
+      code: additionalCost.code ?? '_AUTO_',
+      date: formatDate(additionalCost.date, 'YYYY-MM-DD HH:mm:ss'),
+      due_days: Number(additionalCost.due_days ?? 0),
+      paid_immediately_cash_account_id: additionalCost.paid_immediately_cash_account?.id ?? null,
+      amount_paid_immediately: Number(additionalCost.amount_paid_immediately ?? 0),
+      amount_payable: Number(additionalCost.amount_payable ?? 0),
+      remarks: additionalCost.remarks ?? '',
+    })),
+  } as any);
+  syncPurchaseItemDetailsExpanded();
+};
+
+const setCode = () => {
+  purchaseForm.forgetError('code');
+  purchaseForm.setData({
+    code: purchaseForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const setAdditionalCostCode = (index: number) => {
+  purchaseForm.forgetError(`additional_costs.${index}.code` as any);
+  purchaseAdditionalCostsForm.value[index].code =
+    purchaseAdditionalCostsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const loadSupplierDDL = async (search = supplierSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = cashAccountSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    category_id: undefined,
+    type: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadAdditionalCostCategoryDDL = async (search = additionalCostCategorySearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseAdditionalCostCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    additionalCostCategoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadVatProfileDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+      vat_rate: Number(item.vat_rate ?? 0),
+      vat_base_numerator: normalizeVatBaseFactor(item.vat_base_numerator ?? 1),
+      vat_base_denominator: normalizeVatBaseFactor(item.vat_base_denominator ?? 1),
+    }));
+  }
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    default_vat_profile_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: undefined,
+    refresh: true,
+    limit: 50,
+  } as any);
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((product: any) => {
+      const units: any[] = product.product_units || [];
+      const baseUnitName =
+        units.find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+      return units.map((unit: any) => ({
+        product_unit_id: unit.id,
+        product_unit_code: unit.code,
+        product_name: product.name,
+        product_image_url: product.main_product_image?.url ?? null,
+        unit_name: unit.unit?.name ?? '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(unit.conversion_value ?? 1),
+        price: Number(unit.price ?? 0),
+        product_unit_is_price_include_vat: Boolean(product.is_price_include_vat),
+        vat_profile_id: product.default_vat_profile?.id ?? null,
+        vat_profile_name: product.default_vat_profile?.name ?? null,
+        vat_rate: Number(product.default_vat_profile?.vat_rate ?? 0),
+        vat_base_numerator: normalizeVatBaseFactor(product.default_vat_profile?.vat_base_numerator ?? 1),
+        vat_base_denominator: normalizeVatBaseFactor(product.default_vat_profile?.vat_base_denominator ?? 1),
+        is_use_serial_number: Boolean(product.is_use_serial_number),
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const openAddProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  if (option.vat_profile_id) {
+    appendVatProfileOption({
+      code: option.vat_profile_id,
+      name: option.vat_profile_name ?? '-',
+      vat_rate: option.vat_rate,
+      vat_base_numerator: option.vat_base_numerator,
+      vat_base_denominator: option.vat_base_denominator,
+    });
+  }
+
+  purchaseItemsForm.value.push({
+    qty: 1,
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.base_unit_name,
+    product_unit_conversion_value: option.conversion_value,
+    product_unit_price: option.price,
+    product_unit_is_price_include_vat: option.product_unit_is_price_include_vat,
+    product_unit_price_discounts: [],
+    subtotal_discounts: [],
+    vat_profile_id: option.vat_profile_id,
+    vat_profile_name: option.vat_profile_name,
+    vat_rate: option.vat_rate,
+    vat_base_numerator: normalizeVatBaseFactor(option.vat_base_numerator),
+    vat_base_denominator: normalizeVatBaseFactor(option.vat_base_denominator),
+    remarks: '',
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  });
+  purchaseItemDetailsExpanded.value.push(false);
+
+  showProductUnitModal.value = false;
+  nextTick(() => {
+    const index = purchaseItemsForm.value.length - 1;
+    const el = document.getElementById(`purchase-item-qty-${index}`) as HTMLInputElement | null;
+    el?.focus();
+    el?.select();
+  });
+};
+
+const removeItem = (index: number) => {
+  purchaseItemsForm.value.splice(index, 1);
+  purchaseItemDetailsExpanded.value.splice(index, 1);
+  Object.keys(purchaseForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseForm.forgetError(key as any);
+    }
+  });
+};
+
+const resequence = (items: Array<{ sequence: number }>) => {
+  items.forEach((item, index) => {
+    item.sequence = index + 1;
+  });
+};
+
+const addItemPriceDiscount = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].product_unit_price_discounts.push({
+    id: null,
+    sequence: purchaseItemsForm.value[index].product_unit_price_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemPriceDiscount = (index: number, discountIndex: number) => {
+  const item = purchaseItemsForm.value[index];
+  item.product_unit_price_discounts.splice(discountIndex, 1);
+  resequence(item.product_unit_price_discounts);
+};
+
+const addItemSubtotalDiscount = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].subtotal_discounts.push({
+    id: null,
+    sequence: purchaseItemsForm.value[index].subtotal_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemSubtotalDiscount = (index: number, discountIndex: number) => {
+  const item = purchaseItemsForm.value[index];
+  item.subtotal_discounts.splice(discountIndex, 1);
+  resequence(item.subtotal_discounts);
+};
+
+const addGlobalDiscount = () => {
+  purchaseGlobalDiscountsForm.value.push({
+    id: null,
+    sequence: purchaseGlobalDiscountsForm.value.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeGlobalDiscount = (index: number) => {
+  purchaseGlobalDiscountsForm.value.splice(index, 1);
+  resequence(purchaseGlobalDiscountsForm.value);
+};
+
+const addAdditionalCost = () => {
+  purchaseAdditionalCostsForm.value.push({
+    id: null,
+    purchase_additional_cost_category_id: '',
+    code: '_AUTO_',
+    date: '_AUTO_',
+    due_days: 0,
+    paid_immediately_cash_account_id: null,
+    amount_paid_immediately: 0,
+    amount_payable: 0,
+    remarks: '',
+  });
+};
+
+const removeAdditionalCost = (index: number) => {
+  purchaseAdditionalCostsForm.value.splice(index, 1);
+  Object.keys(purchaseForm.errors).forEach((key) => {
+    if (key.startsWith('additional_costs.')) {
+      purchaseForm.forgetError(key as any);
+    }
+  });
+  syncDerivedFields();
+};
+
+const addSerial = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].serials.push({ id: null, serial: '' });
+  validateField(`items.${index}.serials`);
+};
+
+const removeSerial = (index: number, serialIndex: number) => {
+  purchaseItemsForm.value[index].serials.splice(serialIndex, 1);
+  validateField(`items.${index}.serials`);
+};
+
+const togglePurchaseItemDetails = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = !purchaseItemDetailsExpanded.value[index];
+};
+
+const updateVatProfileForItem = (item: PurchaseItemForm) => {
+  const selectedVatProfile = vatProfileOptions.value.find((option) => option.code === item.vat_profile_id);
+
+  if (!selectedVatProfile) {
+    item.vat_profile_id = null;
+    item.vat_profile_name = null;
+    item.vat_rate = 0;
+    item.vat_base_numerator = 1;
+    item.vat_base_denominator = 1;
+    return;
+  }
+
+  item.vat_profile_name = selectedVatProfile.name;
+  item.vat_rate = selectedVatProfile.vat_rate;
+  item.vat_base_numerator = normalizeVatBaseFactor(selectedVatProfile.vat_base_numerator);
+  item.vat_base_denominator = normalizeVatBaseFactor(selectedVatProfile.vat_base_denominator);
+};
+
+const getItemUnitPriceAfterDiscountPreview = (item: PurchaseItemForm) =>
+  item.product_unit_price_discounts.reduce((currentPrice, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextPrice = discount.discount_type === 'PERCENTAGE'
+      ? currentPrice - ((currentPrice * discountValue) / 100)
+      : currentPrice - discountValue;
+
+    return Math.max(nextPrice, 0);
+  }, Number(item.product_unit_price || 0));
+
+const getItemUnitPriceSubtotalAfterDiscountPreview = (item: PurchaseItemForm) =>
+  Number(item.qty || 0) * getItemUnitPriceAfterDiscountPreview(item);
+
+const getItemSubtotalAfterDiscountPreview = (item: PurchaseItemForm) =>
+  item.subtotal_discounts.reduce((currentSubtotal, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextSubtotal = discount.discount_type === 'PERCENTAGE'
+      ? currentSubtotal - ((currentSubtotal * discountValue) / 100)
+      : currentSubtotal - discountValue;
+
+    return Math.max(nextSubtotal, 0);
+  }, getItemUnitPriceSubtotalAfterDiscountPreview(item));
+
+const getItemsSubtotalAfterDiscountPreview = () =>
+  purchaseItemsForm.value.reduce((total, item) => total + getItemSubtotalAfterDiscountPreview(item), 0);
+
+const getPurchaseGlobalDiscountPreview = () => {
+  let totalDiscount = 0;
+
+  purchaseGlobalDiscountsForm.value.forEach((discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const currentTotal = Math.max(getItemsSubtotalAfterDiscountPreview() - totalDiscount, 0);
+    const appliedDiscount = discount.discount_type === 'PERCENTAGE'
+      ? (currentTotal * discountValue) / 100
+      : discountValue;
+
+    totalDiscount += Math.min(Math.max(appliedDiscount, 0), currentTotal);
+  });
+
+  return totalDiscount;
+};
+
+const getItemGlobalDiscountPreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const totalBeforeGlobalDiscount = getItemsSubtotalAfterDiscountPreview();
+  const totalGlobalDiscount = getPurchaseGlobalDiscountPreview();
+
+  if (totalBeforeGlobalDiscount <= 0 || totalGlobalDiscount <= 0) {
+    return 0;
+  }
+
+  const allocations = purchaseItemsForm.value.map((currentItem, index) => {
+    if (index === purchaseItemsForm.value.length - 1) {
+      return 0;
+    }
+
+    return totalGlobalDiscount * (getItemSubtotalAfterDiscountPreview(currentItem) / totalBeforeGlobalDiscount);
+  });
+
+  const allocatedBeforeCurrent = allocations
+    .slice(0, itemIndex)
+    .reduce((total, allocation) => total + allocation, 0);
+
+  if (itemIndex === purchaseItemsForm.value.length - 1) {
+    return Math.max(totalGlobalDiscount - allocatedBeforeCurrent, 0);
+  }
+
+  return Math.min(Math.max(allocations[itemIndex] || 0, 0), getItemSubtotalAfterDiscountPreview(item));
+};
+
+const getItemSubtotalAfterGlobalDiscountPreview = (item: PurchaseItemForm, itemIndex: number) =>
+  Math.max(getItemSubtotalAfterDiscountPreview(item) - getItemGlobalDiscountPreview(item, itemIndex), 0);
+
+const getItemVatBasePreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+  const vatBaseFactor = Number(item.vat_base_denominator || 0) > 0
+    ? Number(item.vat_base_numerator || 0) / Number(item.vat_base_denominator || 1)
+    : 0;
+
+  if (subtotalAfterGlobalDiscount <= 0 || vatRate <= 0 || vatBaseFactor <= 0) {
+    return 0;
+  }
+
+  let taxableBase = subtotalAfterGlobalDiscount;
+
+  if (item.product_unit_is_price_include_vat) {
+    taxableBase = taxableBase / (1 + (vatRate / 100));
+  }
+
+  return taxableBase * vatBaseFactor;
+};
+
+const getItemVatPreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const vatBase = getItemVatBasePreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+
+  if (vatBase <= 0 || vatRate <= 0) {
+    return 0;
+  }
+
+  return vatBase * (vatRate / 100);
+};
+
+const getItemAmountPayablePreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  if (item.product_unit_is_price_include_vat) {
+    return subtotalAfterGlobalDiscount;
+  }
+
+  return subtotalAfterGlobalDiscount + getItemVatPreview(item, itemIndex);
+};
+
+const getPurchaseItemTotalAfterGlobalDiscountPreview = () =>
+  purchaseItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseVatBasePreview = () =>
+  purchaseItemsForm.value.reduce((total, item, itemIndex) => total + getItemVatBasePreview(item, itemIndex), 0);
+
+const getPurchaseVatPreview = () =>
+  purchaseItemsForm.value.reduce((total, item, itemIndex) => total + getItemVatPreview(item, itemIndex), 0);
+
+const getAdditionalCostTotal = (additionalCost: PurchaseAdditionalCostForm) =>
+  Math.max(Number(additionalCost.amount_paid_immediately || 0), 0)
+  + Math.max(Number(additionalCost.amount_payable || 0), 0);
+
+const getAdditionalCostsTotalPreview = () =>
+  purchaseAdditionalCostsForm.value.reduce((total, item) => total + getAdditionalCostTotal(item), 0);
+
+const getPurchaseAmountPayablePreview = () =>
+  purchaseItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemAmountPayablePreview(item, itemIndex),
+    0,
+  ) + getAdditionalCostsTotalPreview() + Number(purchaseForm.rounding || 0);
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  alertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  title: string,
+  alertList: Record<string, Array<string>> | null,
+) => {
+  const payload: AlertPlaceholderProps = {
+    alertType,
+    title,
+    alertList,
+  };
+  emits('show-alertplaceholder', payload);
+};
+
+const showNotification = (title: string, content: string) => {
+  const payload: NotificationData = {
+    title,
+    content,
+  };
+  emits('show-notification', payload);
+};
+
+const onSubmit = async () => {
+  syncDerivedFields();
+
+  if (purchaseForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await purchaseForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(
+      t('views.purchase.alert.create.title'),
+      t('views.purchase.alert.create.message'),
+    );
+    router.push({ name: 'side-menu-purchase-list' });
+  } catch (error) {
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form v-if="selectedUserLocation" id="purchaseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': invalidField('code') }">
+                {{ t('views.purchase.fields.code') }}
+              </FormLabel>
+              <FormInputCode v-model="purchaseForm.code" :class="{ 'border-danger': invalidField('code') }"
+                :placeholder="t('views.purchase.fields.code')" @set-auto="setCode"
+                @change="purchaseForm.validate('code')" />
+              <FormErrorMessages :messages="purchaseForm.errors.code" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('date') }">
+                {{ t('views.purchase.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto v-model="purchaseForm.date" :class="{ 'border-danger': invalidField('date') }"
+                @change="purchaseForm.validate('date')" />
+              <FormErrorMessages :messages="purchaseForm.errors.date" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': invalidField('due_days') }">
+                {{ t('views.purchase.fields.due_days') }}
+              </FormLabel>
+              <FormInput v-model="purchaseForm.due_days" type="number" min="0"
+                :class="{ 'border-danger': invalidField('due_days') }" @change="purchaseForm.validate('due_days')" />
+              <FormErrorMessages :messages="purchaseForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('supplier_id') }">
+                {{ t('views.purchase.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="purchaseForm.supplier_id" v-model:search="supplierSearch"
+                :options="supplierOptions" :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('supplier_id') }" @search="loadSupplierDDL"
+                @change="purchaseForm.validate('supplier_id')" />
+              <FormErrorMessages :messages="purchaseForm.errors.supplier_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('purchase_order_id') }">
+                {{ t('views.purchase.fields.purchase_order_id') }}
+              </FormLabel>
+              <FormInput v-model="purchaseForm.purchase_order_id"
+                :class="{ 'border-danger': invalidField('purchase_order_id') }"
+                :placeholder="t('views.purchase.fields.purchase_order_id_optional')"
+                @change="purchaseForm.validate('purchase_order_id')" />
+              <FormErrorMessages :messages="purchaseForm.errors.purchase_order_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_number') }">
+                {{ t('views.purchase.fields.tax_invoice_number') }}
+              </FormLabel>
+              <FormInput v-model="purchaseForm.tax_invoice_number"
+                :class="{ 'border-danger': invalidField('tax_invoice_number') }"
+                @change="purchaseForm.validate('tax_invoice_number')" />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_number" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_vat_base') }">
+                {{ t('views.purchase.fields.tax_invoice_vat_base') }}
+              </FormLabel>
+              <FormInputCurrency v-model="purchaseForm.tax_invoice_vat_base" :allow-negative="false"
+                :class="{ 'border-danger': invalidField('tax_invoice_vat_base') }"
+                @change="purchaseForm.validate('tax_invoice_vat_base')" />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_vat_base" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_vat') }">
+                {{ t('views.purchase.fields.tax_invoice_vat') }}
+              </FormLabel>
+              <FormInputCurrency v-model="purchaseForm.tax_invoice_vat" :allow-negative="false"
+                :class="{ 'border-danger': invalidField('tax_invoice_vat') }"
+                @change="purchaseForm.validate('tax_invoice_vat')" />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_vat" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4 flex flex-col justify-center">
+              <FormLabel>
+                {{ t('views.purchase.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="purchaseForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': invalidField('remarks') }">
+                {{ t('views.purchase.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea v-model="purchaseForm.remarks" :class="{ 'border-danger': invalidField('remarks') }"
+                @change="purchaseForm.validate('remarks')" />
+              <FormErrorMessages :messages="purchaseForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="space-y-4 p-5">
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.items_empty') }}
+            </div>
+            <Button type="button" variant="primary" @click="openAddProductUnit">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.add') }}
+            </Button>
+          </div>
+
+          <FormErrorMessages :messages="purchaseForm.errors.items" />
+
+          <div v-if="purchaseItemsForm.length === 0" class="rounded-md border border-dashed p-4 text-sm text-slate-500">
+            {{ t('views.purchase.fields.items_empty') }}
+          </div>
+
+          <div v-for="(item, index) in purchaseItemsForm" :key="`${item.product_unit_id}-${index}`"
+            class="mt-3 border-t border-slate-200/60 pt-5 first:mt-0 first:border-t-0 first:pt-0 dark:border-darkmode-400">
+            <div v-if="currentItemLayout === 'sm'" class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12">
+                <div class="grid grid-cols-3 gap-4">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency :id="`purchase-item-qty-${index}`" v-model="item.qty" :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency v-model="item.product_unit_conversion_value" :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)" />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button type="button" variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)">
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'"
+                        class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button type="button" variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center" @click="removeItem(index)">
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="currentItemLayout === 'md'" class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12 md:col-span-5">
+                <div class="grid grid-cols-3 gap-4">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency :id="`purchase-item-qty-${index}`" v-model="item.qty" :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency v-model="item.product_unit_conversion_value" :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)" />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12 md:col-span-4">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button type="button" variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)">
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'"
+                        class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button type="button" variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center" @click="removeItem(index)">
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12 lg:col-span-4">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-3">
+                <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency :id="`purchase-item-qty-${index}`" v-model="item.qty" :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency v-model="item.product_unit_conversion_value" :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-2">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency v-model="item.product_unit_price" :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)" />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12 lg:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button type="button" variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)">
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'"
+                        class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button type="button" variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center" @click="removeItem(index)">
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="currentItemLayout !== 'lg' && purchaseItemDetailsExpanded[index]" class="mt-4 space-y-4">
+              <div class="rounded-md border border-slate-200/60 p-4 space-y-5 dark:border-darkmode-400">
+                <div class="font-medium text-sm">{{ t('views.purchase.fields.item_price_breakdown') }}</div>
+
+                <div class="space-y-3">
+                  <div v-if="item.product_unit_price_discounts.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.product_unit_price_discounts_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                      :key="`${index}-price-mobile-${discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-2">
+                        <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                        <FormInput :model-value="discountIndex + 1" readonly />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                        <FormSelect v-model="discount.discount_type">
+                          <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </option>
+                        </FormSelect>
+                      </div>
+                      <div class="col-span-12 md:col-span-6">
+                        <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                        <div class="flex items-start gap-2">
+                          <div class="flex-1 min-w-0">
+                            <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                          </div>
+                          <div class="shrink-0">
+                            <Button type="button" variant="outline-secondary"
+                              class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                              @click="removeItemPriceDiscount(index, discountIndex)">
+                              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.price_after_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.subtotal') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+                </div>
+
+                <div class="space-y-3">
+                  <div v-if="item.subtotal_discounts.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.subtotal_discounts_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div v-for="(discount, discountIndex) in item.subtotal_discounts"
+                      :key="`${index}-subtotal-mobile-${discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-2">
+                        <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                        <FormInput :model-value="discountIndex + 1" readonly />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                        <FormSelect v-model="discount.discount_type">
+                          <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </option>
+                        </FormSelect>
+                      </div>
+                      <div class="col-span-12 md:col-span-6">
+                        <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                        <div class="flex items-start gap-2">
+                          <div class="flex-1 min-w-0">
+                            <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                          </div>
+                          <div class="shrink-0">
+                            <Button type="button" variant="outline-secondary"
+                              class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                              @click="removeItemSubtotalDiscount(index, discountIndex)">
+                              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.subtotal_after_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.global_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemGlobalDiscountPreview(item, index)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.vat') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemVatPreview(item, index)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.amount_payable') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rounded-md border border-slate-200/60 p-4 space-y-4 dark:border-darkmode-400">
+                <div class="font-medium text-sm">{{ t('views.purchase.fields.item_additional_details') }}</div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3">
+                  <div class="col-span-12 md:col-span-4">
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                    <FormSwitch>
+                      <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                    </FormSwitch>
+                  </div>
+                  <div class="col-span-12 md:col-span-8">
+                    <FormLabel>{{ t('views.purchase.fields.vat_profile_id') }}</FormLabel>
+                    <FormSelect v-model="item.vat_profile_id" @change="
+                      updateVatProfileForItem(item);
+                    validateField(`items.${index}.vat_profile_id`);
+                    ">
+                      <option :value="null">{{ t('components.dropdown.placeholder') }}</option>
+                      <option v-for="vatProfile in vatProfileOptions" :key="vatProfile.code" :value="vatProfile.code">
+                        {{ vatProfile.name }}
+                      </option>
+                    </FormSelect>
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.vat_profile_id`)" />
+                  </div>
+                  <div class="col-span-12 md:col-span-4">
+                    <FormLabel>{{ t('views.purchase.fields.vat_rate') }}</FormLabel>
+                    <FormInputCurrency :model-value="item.vat_rate" readonly />
+                  </div>
+                  <div class="col-span-12 md:col-span-8">
+                    <FormLabel>{{ t('views.purchase.fields.vat_base_fraction') }}</FormLabel>
+                    <FormInput :model-value="`${item.vat_base_numerator}/${item.vat_base_denominator}`" readonly />
+                  </div>
+                  <div class="col-span-12">
+                    <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                    <FormTextarea v-model="item.remarks" @change="validateField(`items.${index}.remarks`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.remarks`)" />
+                  </div>
+                </div>
+
+                <div v-if="isDirectMode && item.is_use_serial_number" class="space-y-3">
+                  <div class="flex items-center justify-between">
+                    <div class="font-medium">{{ t('views.purchase.fields.serials') }}</div>
+                    <Button type="button" variant="outline-primary" size="sm" @click="addSerial(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials`)" />
+                  <div v-if="item.serials.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.serials_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div v-for="(serial, serialIndex) in item.serials" :key="`serial-${index}-${serialIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-10">
+                        <FormLabel>{{ t('views.product.fields.serial_number') }}</FormLabel>
+                        <FormInput v-model="serial.serial"
+                          @change="validateField(`items.${index}.serials.${serialIndex}.serial`)" />
+                        <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials.${serialIndex}.serial`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-2 flex items-end">
+                        <Button type="button" variant="outline-secondary"
+                          class="h-[38px] w-full min-w-0 flex items-center justify-center"
+                          @click="removeSerial(index, serialIndex)">
+                          <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="purchaseItemDetailsExpanded[index]" class="mt-4 grid grid-cols-12 gap-4">
+              <div class="col-span-12 lg:col-span-6">
+                <div class="rounded-md border border-slate-200/60 p-4 space-y-4 dark:border-darkmode-400">
+                  <div class="font-medium text-sm">{{ t('views.purchase.fields.item_additional_details') }}</div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-5">
+                      <FormLabel>{{ t('views.purchase.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                      <FormSwitch>
+                        <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                      </FormSwitch>
+                    </div>
+                    <div class="col-span-12 md:col-span-7">
+                      <FormLabel>{{ t('views.purchase.fields.vat_profile_id') }}</FormLabel>
+                      <FormSelect v-model="item.vat_profile_id" @change="
+                        updateVatProfileForItem(item);
+                      validateField(`items.${index}.vat_profile_id`);
+                      ">
+                        <option :value="null">{{ t('components.dropdown.placeholder') }}</option>
+                        <option v-for="vatProfile in vatProfileOptions" :key="vatProfile.code" :value="vatProfile.code">
+                          {{ vatProfile.name }}
+                        </option>
+                      </FormSelect>
+                      <FormErrorMessages :messages="getFieldErrors(`items.${index}.vat_profile_id`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel>{{ t('views.purchase.fields.vat_rate') }}</FormLabel>
+                      <FormInputCurrency :model-value="item.vat_rate" readonly />
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormLabel>{{ t('views.purchase.fields.vat_base_fraction') }}</FormLabel>
+                      <FormInput :model-value="`${item.vat_base_numerator}/${item.vat_base_denominator}`" readonly />
+                    </div>
+                    <div class="col-span-12">
+                      <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                      <FormTextarea v-model="item.remarks" @change="validateField(`items.${index}.remarks`)" />
+                      <FormErrorMessages :messages="getFieldErrors(`items.${index}.remarks`)" />
+                    </div>
+                  </div>
+
+                  <div v-if="isDirectMode && item.is_use_serial_number" class="space-y-3">
+                    <div class="flex items-center justify-between">
+                      <div class="font-medium">{{ t('views.purchase.fields.serials') }}</div>
+                      <Button type="button" variant="outline-primary" size="sm" @click="addSerial(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials`)" />
+                    <div v-if="item.serials.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.serials_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div v-for="(serial, serialIndex) in item.serials" :key="`${index}-serial-${serialIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-10">
+                          <FormLabel>{{ t('views.product.fields.serial_number') }}</FormLabel>
+                          <FormInput v-model="serial.serial"
+                            @change="validateField(`items.${index}.serials.${serialIndex}.serial`)" />
+                          <FormErrorMessages
+                            :messages="getFieldErrors(`items.${index}.serials.${serialIndex}.serial`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-2 flex items-end">
+                          <Button type="button" variant="outline-secondary"
+                            class="h-[38px] w-full min-w-0 flex items-center justify-center"
+                            @click="removeSerial(index, serialIndex)">
+                            <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 lg:col-span-6">
+                <div class="rounded-md border border-slate-200/60 p-4 space-y-5 dark:border-darkmode-400">
+                  <div class="font-medium text-sm">{{ t('views.purchase.fields.item_price_breakdown') }}</div>
+
+                  <div class="space-y-3">
+                    <div v-if="item.product_unit_price_discounts.length === 0"
+                      class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.product_unit_price_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                        :key="`${index}-price-${discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemPriceDiscount(index, discountIndex)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.price_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.subtotal') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="space-y-3">
+                    <div v-if="item.subtotal_discounts.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.subtotal_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div v-for="(discount, discountIndex) in item.subtotal_discounts"
+                        :key="`${index}-subtotal-${discountIndex}`" class="grid grid-cols-12 gap-4 gap-y-3">
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button type="button" variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemSubtotalDiscount(index, discountIndex)">
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.subtotal_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.global_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemGlobalDiscountPreview(item, index)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.vat') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemVatPreview(item, index)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.amount_payable') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="space-y-4 p-5">
+          <div class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="mb-3 flex items-center justify-between gap-3">
+              <div class="font-medium">{{ t('views.purchase.fields.global_discounts') }}</div>
+              <Button type="button" variant="primary" @click="addGlobalDiscount">
+                <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                {{ t('components.buttons.add') }}
+              </Button>
+            </div>
+            <div v-if="purchaseGlobalDiscountsForm.length === 0" class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.global_discounts_empty') }}
+            </div>
+            <div v-for="(discount, index) in purchaseGlobalDiscountsForm" :key="`global-discount-${index}`"
+              class="mb-3 grid grid-cols-12 gap-3 last:mb-0">
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                <FormInput :model-value="discount.sequence" readonly />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                <FormSelect v-model="discount.discount_type">
+                  <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                  </option>
+                </FormSelect>
+              </div>
+              <div class="col-span-12 md:col-span-4">
+                <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+              </div>
+              <div class="col-span-12 md:col-span-2 flex items-end">
+                <Button
+                  type="button"
+                  variant="outline-secondary"
+                  class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                  @click="removeGlobalDiscount(index)"
+                >
+                  <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="mb-3 flex items-center justify-between gap-3">
+              <div>
+                <div class="font-medium">{{ t('views.purchase.field_groups.additional_costs') }}</div>
+                <div class="text-sm text-slate-500">
+                  {{ t('views.purchase.fields.additional_costs_hint') }}
+                </div>
+              </div>
+              <Button type="button" variant="primary" @click="addAdditionalCost">
+                <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                {{ t('components.buttons.add') }}
+              </Button>
+            </div>
+
+            <FormErrorMessages :messages="purchaseForm.errors.additional_costs" />
+
+            <div v-if="purchaseAdditionalCostsForm.length === 0"
+              class="rounded-md border border-dashed p-4 text-sm text-slate-500">
+              {{ t('views.purchase.fields.additional_costs_empty') }}
+            </div>
+
+            <div v-for="(additionalCost, index) in purchaseAdditionalCostsForm" :key="`additional-cost-${index}`"
+              class="mt-4 rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+              <div class="mb-3 flex justify-end">
+                <Button type="button" variant="outline-danger" @click="removeAdditionalCost(index)">
+                  <Lucide icon="Trash2" class="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.code`) }">
+                    {{ t('views.purchase.fields.code') }}
+                  </FormLabel>
+                  <FormInputCode v-model="additionalCost.code"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.code`) }"
+                    @set-auto="setAdditionalCostCode(index)"
+                    @change="validateField(`additional_costs.${index}.code`)" />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.code`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.date`) }">
+                    {{ t('views.purchase.fields.date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto v-model="additionalCost.date"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.date`) }"
+                    @change="validateField(`additional_costs.${index}.date`)" />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.date`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.due_days`) }">
+                    {{ t('views.purchase.fields.due_days') }}
+                  </FormLabel>
+                  <FormInput v-model="additionalCost.due_days" type="number" min="0"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.due_days`) }"
+                    @change="validateField(`additional_costs.${index}.due_days`)" />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.due_days`)" />
+                </div>
+                <div class="col-span-12 md:col-span-6">
+                  <FormLabel
+                    :class="{ 'text-danger': invalidField(`additional_costs.${index}.purchase_additional_cost_category_id`) }">
+                    {{ t('views.purchase.fields.purchase_additional_cost_category_id') }}
+                  </FormLabel>
+                  <FormSelectSearch v-model="additionalCost.purchase_additional_cost_category_id"
+                    v-model:search="additionalCostCategorySearch" :options="additionalCostCategoryOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.purchase_additional_cost_category_id`) }"
+                    @search="loadAdditionalCostCategoryDDL"
+                    @change="validateField(`additional_costs.${index}.purchase_additional_cost_category_id`)" />
+                  <FormErrorMessages
+                    :messages="getFieldErrors(`additional_costs.${index}.purchase_additional_cost_category_id`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel
+                    :class="{ 'text-danger': invalidField(`additional_costs.${index}.paid_immediately_cash_account_id`) }">
+                    {{ t('views.purchase.fields.paid_immediately_cash_account_id') }}
+                  </FormLabel>
+                  <FormSelectSearch v-model="additionalCost.paid_immediately_cash_account_id"
+                    v-model:search="cashAccountSearch" :options="cashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.paid_immediately_cash_account_id`) }"
+                    @search="loadCashAccountDDL"
+                    @change="validateField(`additional_costs.${index}.paid_immediately_cash_account_id`)" />
+                  <FormErrorMessages
+                    :messages="getFieldErrors(`additional_costs.${index}.paid_immediately_cash_account_id`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel
+                    :class="{ 'text-danger': invalidField(`additional_costs.${index}.amount_paid_immediately`) }">
+                    {{ t('views.purchase.fields.amount_paid_immediately') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="additionalCost.amount_paid_immediately" :allow-negative="false"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.amount_paid_immediately`) }"
+                    @change="
+                      validateField(`additional_costs.${index}.amount_paid_immediately`);
+                    syncDerivedFields();
+                    " />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.amount_paid_immediately`)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.amount_payable`) }">
+                    {{ t('views.purchase.fields.amount_payable') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="additionalCost.amount_payable" :allow-negative="false"
+                    :class="{ 'border-danger': invalidField(`additional_costs.${index}.amount_payable`) }" @change="
+                      validateField(`additional_costs.${index}.amount_payable`);
+                    syncDerivedFields();
+                    " />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.amount_payable`)" />
+                </div>
+                <div class="col-span-12 md:col-span-12">
+                  <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                  <FormTextarea v-model="additionalCost.remarks"
+                    @change="validateField(`additional_costs.${index}.remarks`)" />
+                  <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-12 gap-4 rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.items_subtotal_after_discount') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getItemsSubtotalAfterDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.global_discount_total') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseGlobalDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.item_total_after_global_discount') }}
+              </div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseItemTotalAfterGlobalDiscountPreview()) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.vat_base') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseVatBasePreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.vat') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseVatPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.additional_cost') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getAdditionalCostsTotalPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': invalidField('rounding') }">
+                {{ t('views.purchase.fields.rounding') }}
+              </FormLabel>
+              <FormInputCurrency v-model="purchaseForm.rounding" :class="{ 'border-danger': invalidField('rounding') }"
+                @change="purchaseForm.validate('rounding')" />
+              <FormErrorMessages :messages="purchaseForm.errors.rounding" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>{{ t('views.purchase.fields.amount_payable_preview') }}</FormLabel>
+              <FormInputCurrency :model-value="getPurchaseAmountPayablePreview()" readonly />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="submit" variant="primary" class="w-32 shadow-md"
+            :disabled="purchaseForm.validating || purchaseForm.hasErrors">
+            <Lucide v-if="purchaseForm.validating" icon="Loader" class="mr-2 h-4 w-4 animate-spin" />
+            <Lucide v-else icon="Save" class="mr-2 h-4 w-4" />
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <ProductUnitPickerDialog v-if="selectedUserLocation" v-model:search-text="productSearchText"
+    :open="showProductUnitModal" :title="t('views.purchase.fields.product_unit_id')"
+    :is-searching="isSearchingProductUnit" :options="productUnitOptions" :columns="productUnitDialogColumns"
+    @close="showProductUnitModal = false" @search="searchProductUnits"
+    @select="selectProductUnit($event as ProductUnitOption)" />
+</template>
diff --git a/web/src/pages/purchase/PurchaseEditDirect.vue b/web/src/pages/purchase/PurchaseEditDirect.vue
new file mode 100644
index 000000000..8770509a9
--- /dev/null
+++ b/web/src/pages/purchase/PurchaseEditDirect.vue
@@ -0,0 +1,2244 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import type { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelect,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductUnitPickerDialog from '@/components/Product/ProductUnitPickerDialog.vue';
+import CashAccountService from '@/services/CashAccountService';
+import ProductService from '@/services/ProductService';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import PurchaseService from '@/services/PurchaseService';
+import SupplierService from '@/services/SupplierService';
+import VatProfileService from '@/services/VatProfileService';
+import WarehouseService from '@/services/WarehouseService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { CardState } from '@/types/enums/CardState';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Purchase } from '@/types/models/Purchase';
+import type { PurchaseReceiptItemSerial } from '@/types/models/PurchaseReceiptItemSerial';
+import type {
+  PurchaseAdditionalCostNestedUpdateRequest,
+  PurchaseDirectItemNestedUpdateRequest,
+  PurchaseGlobalDiscountNestedUpdateRequest,
+} from '@/types/services/purchase/PurchaseRequest';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type ProductUnitOption = {
+  product_unit_id: string;
+  product_unit_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  price: number;
+  product_unit_is_price_include_vat: boolean;
+  vat_profile_id: string | null;
+  vat_profile_name: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  is_use_serial_number: boolean;
+};
+
+type VatProfileOption = {
+  code: string;
+  name: string;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+};
+
+type PurchaseDiscountForm = {
+  id?: string | null;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+};
+
+type PurchaseSerialForm = {
+  id?: string | null;
+  serial: string;
+};
+
+type PurchaseItemForm = {
+  id?: string | null;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_price: number;
+  product_unit_is_price_include_vat: boolean;
+  delete_product_unit_price_discount_ids?: string[];
+  product_unit_price_discounts: PurchaseDiscountForm[];
+  delete_subtotal_discount_ids?: string[];
+  subtotal_discounts: PurchaseDiscountForm[];
+  vat_profile_id: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  vat_profile_name?: string | null;
+  is_use_serial_number?: boolean;
+  serials: PurchaseSerialForm[];
+};
+
+type PurchaseAdditionalCostForm = PurchaseAdditionalCostNestedUpdateRequest;
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const purchaseService = new PurchaseService();
+const supplierService = new SupplierService();
+const vatProfileService = new VatProfileService();
+const cashAccountService = new CashAccountService();
+const warehouseService = new WarehouseService();
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const productService = new ProductService();
+const ulid = route.params.ulid.toString();
+const purchaseForm = purchaseService.usePurchaseEditDirectForm(ulid);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+const isDirectMode = computed(() => true);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.purchase.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.purchase_data', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.items', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.additional_costs', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const warehouseDDL = ref<Array<DropDownOption> | null>(null);
+const warehouseSearch = ref('');
+const warehouseOptions = computed(() =>
+  (warehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const additionalCostCategoryDDL = ref<Array<DropDownOption> | null>(null);
+const additionalCostCategorySearch = ref('');
+const additionalCostCategoryOptions = computed(() =>
+  (additionalCostCategoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<VatProfileOption> | null>(null);
+const vatProfileOptions = computed(() => vatProfileDDL.value ?? []);
+
+const showProductUnitModal = ref(false);
+const productSearchText = ref('');
+const isSearchingProductUnit = ref(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+
+const discountTypeOptions = [
+  { value: 'PERCENTAGE', label: 'Percentage' },
+  { value: 'NOMINAL', label: 'Nominal' },
+];
+
+const productUnitDialogColumns = [
+  {
+    key: 'unit_name',
+    label: t('views.product.table.cols.unit'),
+  },
+  {
+    key: 'conversion_value',
+    label: t('views.purchase.fields.product_unit_conversion_value'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+  {
+    key: 'price',
+    label: t('views.purchase.fields.product_unit_price'),
+    align: 'right' as const,
+    formatter: 'currency' as const,
+  },
+];
+
+const purchaseItemsForm = computed<PurchaseItemForm[]>(
+  () => purchaseForm.items as PurchaseItemForm[],
+);
+const purchaseItemDetailsExpanded = ref<boolean[]>([]);
+const viewportWidth = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 1024);
+const purchaseGlobalDiscountsForm = computed<PurchaseDiscountForm[]>(
+  () => purchaseForm.global_discounts as PurchaseDiscountForm[],
+);
+const purchaseAdditionalCostsForm = computed<PurchaseAdditionalCostForm[]>(
+  () => purchaseForm.additional_costs as PurchaseAdditionalCostForm[],
+);
+
+const currentItemLayout = computed<'sm' | 'md' | 'lg'>(() => {
+  if (viewportWidth.value >= 1024) return 'lg';
+  if (viewportWidth.value >= 768) return 'md';
+  return 'sm';
+});
+
+const invalidField = (field: string) => purchaseForm.invalid(field as any);
+const validateField = (field: string) => purchaseForm.validate(field as any);
+const getFieldErrors = (field: string) =>
+  (purchaseForm.errors as Record<string, string | undefined>)[field];
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+const getPurchaseItemShouldStartExpanded = (item: PurchaseItemForm) =>
+  item.product_unit_price_discounts.length > 0 ||
+  item.subtotal_discounts.length > 0 ||
+  (isDirectMode.value && item.serials.length > 0);
+
+const syncPurchaseItemDetailsExpanded = () => {
+  purchaseItemDetailsExpanded.value = purchaseItemsForm.value.map(
+    (item, index) => purchaseItemDetailsExpanded.value[index] ?? getPurchaseItemShouldStartExpanded(item),
+  );
+};
+
+const syncViewportWidth = () => {
+  viewportWidth.value = typeof window !== 'undefined' ? window.innerWidth : 1024;
+};
+
+const appendDropDownOption = (
+  target: typeof supplierDDL | typeof warehouseDDL | typeof cashAccountDDL | typeof additionalCostCategoryDDL,
+  option?: DropDownOption | null,
+) => {
+  if (!option?.code) return;
+
+  const current = target.value ?? [];
+  if (current.some((item) => item.code === option.code)) return;
+  target.value = [...current, option];
+};
+
+const appendVatProfileOption = (option: VatProfileOption) => {
+  const current = vatProfileDDL.value ?? [];
+  if (current.some((item) => item.code === option.code)) return;
+  vatProfileDDL.value = [...current, option];
+};
+
+const normalizeVatBaseFactor = (value: unknown) => Math.max(1, Number(value ?? 1) || 0);
+const getBaseUnitName = (product: any) =>
+  (product?.product_units ?? []).find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+
+const syncDerivedFields = () => {
+  purchaseForm.additional_cost = getAdditionalCostsTotalPreview();
+};
+
+watch(
+  purchaseAdditionalCostsForm,
+  () => {
+    syncDerivedFields();
+  },
+  { deep: true },
+);
+
+watch(
+  purchaseItemsForm,
+  () => {
+    syncPurchaseItemDetailsExpanded();
+  },
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  emits('loading-state', true);
+  try {
+    purchaseForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+    });
+
+    await Promise.all([
+      loadSupplierDDL(),
+      loadVatProfileDDL(),
+      loadCashAccountDDL(),
+      loadAdditionalCostCategoryDDL(),
+      ...(isDirectMode.value ? [loadWarehouseDDL()] : []),
+    ]);
+
+    await loadData();
+  } finally {
+    emits('loading-state', false);
+  }
+
+  syncDerivedFields();
+  syncPurchaseItemDetailsExpanded();
+  window.addEventListener('resize', syncViewportWidth);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncViewportWidth);
+});
+
+const loadData = async () => {
+  const result = await purchaseService.read(ulid);
+
+  if (!result.success || !result.data) {
+    router.push({ name: 'side-menu-purchase-list' });
+    return;
+  }
+
+  hydrateForm(result.data);
+};
+
+const hydrateForm = (purchase: Purchase) => {
+  appendDropDownOption(supplierDDL, purchase.supplier
+    ? {
+      code: purchase.supplier.id,
+      name: purchase.supplier.name,
+    }
+    : null);
+  appendDropDownOption(warehouseDDL, purchase.direct_receipt?.warehouse
+    ? {
+      code: purchase.direct_receipt.warehouse.id,
+      name: purchase.direct_receipt.warehouse.name,
+    }
+    : null);
+
+  (purchase.additional_costs ?? []).forEach((additionalCost) => {
+    appendDropDownOption(additionalCostCategoryDDL, additionalCost.category
+      ? {
+        code: additionalCost.category.id,
+        name: additionalCost.category.name,
+      }
+      : null);
+    appendDropDownOption(cashAccountDDL, additionalCost.paid_immediately_cash_account
+      ? {
+        code: additionalCost.paid_immediately_cash_account.id,
+        name: additionalCost.paid_immediately_cash_account.name,
+      }
+      : null);
+  });
+
+  const directReceiptItemsByProductUnit = isDirectMode.value
+    ? (purchase.direct_receipt?.items ?? []).reduce<Record<string, any[]>>((accumulator, receiptItem) => {
+      if (!receiptItem.has_purchase_item_product || !receiptItem.product_unit?.id) return accumulator;
+
+      const key = receiptItem.product_unit.id;
+      accumulator[key] ??= [];
+      accumulator[key].push(receiptItem);
+
+      return accumulator;
+    }, {})
+    : {};
+  const directReceiptUsageByProductUnit: Record<string, number> = {};
+
+  purchaseForm.setData({
+    company_id: purchase.company?.id ?? selectedUserLocation.value?.company.id ?? '',
+    branch_id: purchase.branch?.id ?? selectedUserLocation.value?.branch.id ?? '',
+    code: purchase.code,
+    date: formatDate(purchase.date, 'YYYY-MM-DD HH:mm:ss'),
+    due_days: Number(purchase.due_days ?? 0),
+    supplier_id: purchase.supplier?.id ?? null,
+    purchase_order_id: purchase.purchase_order?.id ?? null,
+    direct_receipt_warehouse_id: purchase.direct_receipt?.warehouse?.id ?? '',
+    tax_invoice_number: purchase.tax_invoice_number ?? null,
+    tax_invoice_vat_base: Number(purchase.tax_invoice_vat_base ?? 0),
+    tax_invoice_vat: Number(purchase.tax_invoice_vat ?? 0),
+    remarks: purchase.remarks ?? '',
+    is_posted: Boolean(purchase.is_posted),
+    additional_cost: Number(purchase.additional_cost ?? 0),
+    rounding: Number(purchase.rounding ?? 0),
+    delete_item_ids: [],
+    items: (purchase.items ?? []).map((item) => {
+      const productUnitId = item.product_unit?.id ?? '';
+      const currentUsageIndex = directReceiptUsageByProductUnit[productUnitId] ?? 0;
+      const matchingReceiptItem = isDirectMode.value && productUnitId
+        ? directReceiptItemsByProductUnit[productUnitId]?.[currentUsageIndex] ?? null
+        : null;
+
+      if (productUnitId) {
+        directReceiptUsageByProductUnit[productUnitId] = currentUsageIndex + 1;
+      }
+
+      const serials = isDirectMode.value
+        ? matchingReceiptItem
+          ?.serials
+          ?.map((serial: PurchaseReceiptItemSerial) => ({
+            id: serial.id ?? null,
+            serial: serial.serial,
+          })) ?? []
+        : [];
+
+      if (item.vat_profile?.id) {
+        appendVatProfileOption({
+          code: item.vat_profile.id,
+          name: item.vat_profile.name,
+          vat_rate: Number(item.vat_profile.vat_rate ?? item.vat_rate ?? 0),
+          vat_base_numerator: normalizeVatBaseFactor(
+            item.vat_profile.vat_base_numerator ?? item.vat_base_numerator ?? 1,
+          ),
+          vat_base_denominator: normalizeVatBaseFactor(
+            item.vat_profile.vat_base_denominator ?? item.vat_base_denominator ?? 1,
+          ),
+        });
+      }
+
+      return {
+        id: item.id ?? null,
+        qty: Number(item.qty ?? 0),
+        product_unit_id: item.product_unit?.id ?? '',
+        product_unit_product_code: item.product_unit?.code ?? '',
+        product_unit_product_name: item.product_unit?.product?.name ?? '',
+        product_unit_unit_name: item.product_unit?.unit?.name ?? '',
+        product_unit_base_unit_name: getBaseUnitName(item.product_unit?.product),
+        product_unit_conversion_value: Number(item.product_unit_conversion_value ?? item.product_unit?.conversion_value ?? 1),
+        product_unit_price: Number(item.product_unit_price ?? 0),
+        product_unit_is_price_include_vat: Boolean(item.product_unit_is_price_include_vat),
+        delete_product_unit_price_discount_ids: [],
+        product_unit_price_discounts: (item.product_unit_price_discounts ?? []).map((discount) => ({
+          id: discount.id ?? null,
+          sequence: Number(discount.sequence ?? 0),
+          discount_type: discount.discount_type ?? 'PERCENTAGE',
+          discount_value: Number(discount.discount_value ?? 0),
+        })),
+        delete_subtotal_discount_ids: [],
+        subtotal_discounts: (item.subtotal_discounts ?? []).map((discount) => ({
+          id: discount.id ?? null,
+          sequence: Number(discount.sequence ?? 0),
+          discount_type: discount.discount_type ?? 'PERCENTAGE',
+          discount_value: Number(discount.discount_value ?? 0),
+        })),
+        vat_profile_id: item.vat_profile?.id ?? null,
+        vat_profile_name: item.vat_profile?.name ?? null,
+        vat_rate: Number(item.vat_rate ?? 0),
+        vat_base_numerator: normalizeVatBaseFactor(item.vat_base_numerator ?? 1),
+        vat_base_denominator: normalizeVatBaseFactor(item.vat_base_denominator ?? 1),
+        remarks: item.remarks ?? '',
+        is_use_serial_number: Boolean(item.product_unit?.product?.is_use_serial_number),
+        serials,
+      };
+    }) as PurchaseDirectItemNestedUpdateRequest[],
+    delete_global_discount_ids: [],
+    global_discounts: (purchase.global_discounts ?? []).map((discount) => ({
+      id: discount.id ?? null,
+      sequence: Number(discount.sequence ?? 0),
+      discount_type: discount.discount_type ?? 'PERCENTAGE',
+      discount_value: Number(discount.discount_value ?? 0),
+    })),
+    delete_additional_cost_ids: [],
+    additional_costs: (purchase.additional_costs ?? []).map((additionalCost) => ({
+      id: additionalCost.id ?? null,
+      purchase_additional_cost_category_id: additionalCost.category?.id ?? '',
+      code: additionalCost.code ?? '_AUTO_',
+      date: formatDate(additionalCost.date, 'YYYY-MM-DD HH:mm:ss'),
+      due_days: Number(additionalCost.due_days ?? 0),
+      paid_immediately_cash_account_id: additionalCost.paid_immediately_cash_account?.id ?? null,
+      amount_paid_immediately: Number(additionalCost.amount_paid_immediately ?? 0),
+      amount_payable: Number(additionalCost.amount_payable ?? 0),
+      remarks: additionalCost.remarks ?? '',
+    })),
+  } as any);
+  syncPurchaseItemDetailsExpanded();
+};
+
+const setCode = () => {
+  purchaseForm.forgetError('code');
+  purchaseForm.setData({
+    code: purchaseForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const setAdditionalCostCode = (index: number) => {
+  purchaseForm.forgetError(`additional_costs.${index}.code` as any);
+  purchaseAdditionalCostsForm.value[index].code =
+    purchaseAdditionalCostsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const loadSupplierDDL = async (search = supplierSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadWarehouseDDL = async (search = warehouseSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    warehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = cashAccountSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    category_id: undefined,
+    type: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadAdditionalCostCategoryDDL = async (search = additionalCostCategorySearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseAdditionalCostCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    additionalCostCategoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadVatProfileDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+      vat_rate: Number(item.vat_rate ?? 0),
+      vat_base_numerator: normalizeVatBaseFactor(item.vat_base_numerator ?? 1),
+      vat_base_denominator: normalizeVatBaseFactor(item.vat_base_denominator ?? 1),
+    }));
+  }
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    default_vat_profile_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: undefined,
+    refresh: true,
+    limit: 50,
+  } as any);
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((product: any) => {
+      const units: any[] = product.product_units || [];
+      const baseUnitName =
+        units.find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+      return units.map((unit: any) => ({
+        product_unit_id: unit.id,
+        product_unit_code: unit.code,
+        product_name: product.name,
+        product_image_url: product.main_product_image?.url ?? null,
+        unit_name: unit.unit?.name ?? '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(unit.conversion_value ?? 1),
+        price: Number(unit.price ?? 0),
+        product_unit_is_price_include_vat: Boolean(product.is_price_include_vat),
+        vat_profile_id: product.default_vat_profile?.id ?? null,
+        vat_profile_name: product.default_vat_profile?.name ?? null,
+        vat_rate: Number(product.default_vat_profile?.vat_rate ?? 0),
+        vat_base_numerator: normalizeVatBaseFactor(product.default_vat_profile?.vat_base_numerator ?? 1),
+        vat_base_denominator: normalizeVatBaseFactor(product.default_vat_profile?.vat_base_denominator ?? 1),
+        is_use_serial_number: Boolean(product.is_use_serial_number),
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const openAddProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  if (option.vat_profile_id) {
+    appendVatProfileOption({
+      code: option.vat_profile_id,
+      name: option.vat_profile_name ?? '-',
+      vat_rate: option.vat_rate,
+      vat_base_numerator: option.vat_base_numerator,
+      vat_base_denominator: option.vat_base_denominator,
+    });
+  }
+
+  purchaseItemsForm.value.push({
+    qty: 1,
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.base_unit_name,
+    product_unit_conversion_value: option.conversion_value,
+    product_unit_price: option.price,
+    product_unit_is_price_include_vat: option.product_unit_is_price_include_vat,
+    product_unit_price_discounts: [],
+    subtotal_discounts: [],
+    vat_profile_id: option.vat_profile_id,
+    vat_profile_name: option.vat_profile_name,
+    vat_rate: option.vat_rate,
+    vat_base_numerator: normalizeVatBaseFactor(option.vat_base_numerator),
+    vat_base_denominator: normalizeVatBaseFactor(option.vat_base_denominator),
+    remarks: '',
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  });
+  purchaseItemDetailsExpanded.value.push(false);
+
+  showProductUnitModal.value = false;
+  nextTick(() => {
+    const index = purchaseItemsForm.value.length - 1;
+    const el = document.getElementById(`purchase-item-qty-${index}`) as HTMLInputElement | null;
+    el?.focus();
+    el?.select();
+  });
+};
+
+const removeItem = (index: number) => {
+  const item = purchaseItemsForm.value[index];
+  if (item?.id) {
+    purchaseForm.delete_item_ids.push(item.id);
+  }
+  purchaseItemsForm.value.splice(index, 1);
+  purchaseItemDetailsExpanded.value.splice(index, 1);
+  Object.keys(purchaseForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseForm.forgetError(key as any);
+    }
+  });
+};
+
+const resequence = (items: Array<{ sequence: number }>) => {
+  items.forEach((item, index) => {
+    item.sequence = index + 1;
+  });
+};
+
+const addItemPriceDiscount = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].product_unit_price_discounts.push({
+    id: null,
+    sequence: purchaseItemsForm.value[index].product_unit_price_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemPriceDiscount = (index: number, discountIndex: number) => {
+  const item = purchaseItemsForm.value[index];
+  const discount = item.product_unit_price_discounts[discountIndex];
+  if (discount?.id) {
+    item.delete_product_unit_price_discount_ids ??= [];
+    item.delete_product_unit_price_discount_ids.push(discount.id);
+  }
+  item.product_unit_price_discounts.splice(discountIndex, 1);
+  resequence(item.product_unit_price_discounts);
+};
+
+const addItemSubtotalDiscount = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].subtotal_discounts.push({
+    id: null,
+    sequence: purchaseItemsForm.value[index].subtotal_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemSubtotalDiscount = (index: number, discountIndex: number) => {
+  const item = purchaseItemsForm.value[index];
+  const discount = item.subtotal_discounts[discountIndex];
+  if (discount?.id) {
+    item.delete_subtotal_discount_ids ??= [];
+    item.delete_subtotal_discount_ids.push(discount.id);
+  }
+  item.subtotal_discounts.splice(discountIndex, 1);
+  resequence(item.subtotal_discounts);
+};
+
+const addGlobalDiscount = () => {
+  purchaseGlobalDiscountsForm.value.push({
+    id: null,
+    sequence: purchaseGlobalDiscountsForm.value.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeGlobalDiscount = (index: number) => {
+  const discount = purchaseGlobalDiscountsForm.value[index];
+  if (discount?.id) {
+    purchaseForm.delete_global_discount_ids.push(discount.id);
+  }
+  purchaseGlobalDiscountsForm.value.splice(index, 1);
+  resequence(purchaseGlobalDiscountsForm.value);
+};
+
+const addAdditionalCost = () => {
+  purchaseAdditionalCostsForm.value.push({
+    id: null,
+    purchase_additional_cost_category_id: '',
+    code: '_AUTO_',
+    date: '_AUTO_',
+    due_days: 0,
+    paid_immediately_cash_account_id: null,
+    amount_paid_immediately: 0,
+    amount_payable: 0,
+    remarks: '',
+  });
+};
+
+const removeAdditionalCost = (index: number) => {
+  const additionalCost = purchaseAdditionalCostsForm.value[index];
+  if (additionalCost?.id) {
+    purchaseForm.delete_additional_cost_ids.push(additionalCost.id);
+  }
+  purchaseAdditionalCostsForm.value.splice(index, 1);
+  Object.keys(purchaseForm.errors).forEach((key) => {
+    if (key.startsWith('additional_costs.')) {
+      purchaseForm.forgetError(key as any);
+    }
+  });
+  syncDerivedFields();
+};
+
+const addSerial = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].serials.push({ id: null, serial: '' });
+  validateField(`items.${index}.serials`);
+};
+
+const removeSerial = (index: number, serialIndex: number) => {
+  purchaseItemsForm.value[index].serials.splice(serialIndex, 1);
+  validateField(`items.${index}.serials`);
+};
+
+const togglePurchaseItemDetails = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = !purchaseItemDetailsExpanded.value[index];
+};
+
+const updateVatProfileForItem = (item: PurchaseItemForm) => {
+  const selectedVatProfile = vatProfileOptions.value.find((option) => option.code === item.vat_profile_id);
+
+  if (!selectedVatProfile) {
+    item.vat_profile_id = null;
+    item.vat_profile_name = null;
+    item.vat_rate = 0;
+    item.vat_base_numerator = 1;
+    item.vat_base_denominator = 1;
+    return;
+  }
+
+  item.vat_profile_name = selectedVatProfile.name;
+  item.vat_rate = selectedVatProfile.vat_rate;
+  item.vat_base_numerator = normalizeVatBaseFactor(selectedVatProfile.vat_base_numerator);
+  item.vat_base_denominator = normalizeVatBaseFactor(selectedVatProfile.vat_base_denominator);
+};
+
+const getItemUnitPriceAfterDiscountPreview = (item: PurchaseItemForm) =>
+  item.product_unit_price_discounts.reduce((currentPrice, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextPrice = discount.discount_type === 'PERCENTAGE'
+      ? currentPrice - ((currentPrice * discountValue) / 100)
+      : currentPrice - discountValue;
+
+    return Math.max(nextPrice, 0);
+  }, Number(item.product_unit_price || 0));
+
+const getItemUnitPriceSubtotalAfterDiscountPreview = (item: PurchaseItemForm) =>
+  Number(item.qty || 0) * getItemUnitPriceAfterDiscountPreview(item);
+
+const getItemSubtotalAfterDiscountPreview = (item: PurchaseItemForm) =>
+  item.subtotal_discounts.reduce((currentSubtotal, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextSubtotal = discount.discount_type === 'PERCENTAGE'
+      ? currentSubtotal - ((currentSubtotal * discountValue) / 100)
+      : currentSubtotal - discountValue;
+
+    return Math.max(nextSubtotal, 0);
+  }, getItemUnitPriceSubtotalAfterDiscountPreview(item));
+
+const getItemsSubtotalAfterDiscountPreview = () =>
+  purchaseItemsForm.value.reduce((total, item) => total + getItemSubtotalAfterDiscountPreview(item), 0);
+
+const getPurchaseGlobalDiscountPreview = () => {
+  let totalDiscount = 0;
+
+  purchaseGlobalDiscountsForm.value.forEach((discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const currentTotal = Math.max(getItemsSubtotalAfterDiscountPreview() - totalDiscount, 0);
+    const appliedDiscount = discount.discount_type === 'PERCENTAGE'
+      ? (currentTotal * discountValue) / 100
+      : discountValue;
+
+    totalDiscount += Math.min(Math.max(appliedDiscount, 0), currentTotal);
+  });
+
+  return totalDiscount;
+};
+
+const getItemGlobalDiscountPreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const totalBeforeGlobalDiscount = getItemsSubtotalAfterDiscountPreview();
+  const totalGlobalDiscount = getPurchaseGlobalDiscountPreview();
+
+  if (totalBeforeGlobalDiscount <= 0 || totalGlobalDiscount <= 0) {
+    return 0;
+  }
+
+  const allocations = purchaseItemsForm.value.map((currentItem, index) => {
+    if (index === purchaseItemsForm.value.length - 1) {
+      return 0;
+    }
+
+    return totalGlobalDiscount * (getItemSubtotalAfterDiscountPreview(currentItem) / totalBeforeGlobalDiscount);
+  });
+
+  const allocatedBeforeCurrent = allocations
+    .slice(0, itemIndex)
+    .reduce((total, allocation) => total + allocation, 0);
+
+  if (itemIndex === purchaseItemsForm.value.length - 1) {
+    return Math.max(totalGlobalDiscount - allocatedBeforeCurrent, 0);
+  }
+
+  return Math.min(Math.max(allocations[itemIndex] || 0, 0), getItemSubtotalAfterDiscountPreview(item));
+};
+
+const getItemSubtotalAfterGlobalDiscountPreview = (item: PurchaseItemForm, itemIndex: number) =>
+  Math.max(getItemSubtotalAfterDiscountPreview(item) - getItemGlobalDiscountPreview(item, itemIndex), 0);
+
+const getItemVatBasePreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+  const vatBaseFactor = Number(item.vat_base_denominator || 0) > 0
+    ? Number(item.vat_base_numerator || 0) / Number(item.vat_base_denominator || 1)
+    : 0;
+
+  if (subtotalAfterGlobalDiscount <= 0 || vatRate <= 0 || vatBaseFactor <= 0) {
+    return 0;
+  }
+
+  let taxableBase = subtotalAfterGlobalDiscount;
+
+  if (item.product_unit_is_price_include_vat) {
+    taxableBase = taxableBase / (1 + (vatRate / 100));
+  }
+
+  return taxableBase * vatBaseFactor;
+};
+
+const getItemVatPreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const vatBase = getItemVatBasePreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+
+  if (vatBase <= 0 || vatRate <= 0) {
+    return 0;
+  }
+
+  return vatBase * (vatRate / 100);
+};
+
+const getItemAmountPayablePreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  if (item.product_unit_is_price_include_vat) {
+    return subtotalAfterGlobalDiscount;
+  }
+
+  return subtotalAfterGlobalDiscount + getItemVatPreview(item, itemIndex);
+};
+
+const getPurchaseItemTotalAfterGlobalDiscountPreview = () =>
+  purchaseItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseVatBasePreview = () =>
+  purchaseItemsForm.value.reduce((total, item, itemIndex) => total + getItemVatBasePreview(item, itemIndex), 0);
+
+const getPurchaseVatPreview = () =>
+  purchaseItemsForm.value.reduce((total, item, itemIndex) => total + getItemVatPreview(item, itemIndex), 0);
+
+const getAdditionalCostTotal = (additionalCost: PurchaseAdditionalCostForm) =>
+  Math.max(Number(additionalCost.amount_paid_immediately || 0), 0)
+  + Math.max(Number(additionalCost.amount_payable || 0), 0);
+
+const getAdditionalCostsTotalPreview = () =>
+  purchaseAdditionalCostsForm.value.reduce((total, item) => total + getAdditionalCostTotal(item), 0);
+
+const getPurchaseAmountPayablePreview = () =>
+  purchaseItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemAmountPayablePreview(item, itemIndex),
+    0,
+  ) + getAdditionalCostsTotalPreview() + Number(purchaseForm.rounding || 0);
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  alertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  title: string,
+  alertList: Record<string, Array<string>> | null,
+) => {
+  const payload: AlertPlaceholderProps = {
+    alertType,
+    title,
+    alertList,
+  };
+  emits('show-alertplaceholder', payload);
+};
+
+const showNotification = (title: string, content: string) => {
+  const payload: NotificationData = {
+    title,
+    content,
+  };
+  emits('show-notification', payload);
+};
+
+const onSubmit = async () => {
+  syncDerivedFields();
+
+  if (purchaseForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await purchaseForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(
+      t('views.purchase.alert.update.title'),
+      t('views.purchase.alert.update.message'),
+    );
+    router.push({ name: 'side-menu-purchase-list' });
+  } catch (error) {
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form v-if="selectedUserLocation" id="purchaseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': invalidField('code') }">
+                {{ t('views.purchase.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseForm.code"
+                :class="{ 'border-danger': invalidField('code') }"
+                :placeholder="t('views.purchase.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.code" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('date') }">
+                {{ t('views.purchase.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseForm.date"
+                :class="{ 'border-danger': invalidField('date') }"
+                @change="purchaseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.date" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': invalidField('due_days') }">
+                {{ t('views.purchase.fields.due_days') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.due_days"
+                type="number"
+                min="0"
+                :class="{ 'border-danger': invalidField('due_days') }"
+                @change="purchaseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('supplier_id') }">
+                {{ t('views.purchase.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseForm.supplier_id"
+                v-model:search="supplierSearch"
+                :options="supplierOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('supplier_id') }"
+                @search="loadSupplierDDL"
+                @change="purchaseForm.validate('supplier_id')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.supplier_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('purchase_order_id') }">
+                {{ t('views.purchase.fields.purchase_order_id') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.purchase_order_id"
+                :class="{ 'border-danger': invalidField('purchase_order_id') }"
+                :placeholder="t('views.purchase.fields.purchase_order_id_optional')"
+                @change="purchaseForm.validate('purchase_order_id')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.purchase_order_id" />
+            </div>
+            <div v-if="isDirectMode" class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('direct_receipt_warehouse_id') }">
+                {{ t('views.purchase.fields.direct_receipt_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseForm.direct_receipt_warehouse_id"
+                v-model:search="warehouseSearch"
+                :options="warehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('direct_receipt_warehouse_id') }"
+                @search="loadWarehouseDDL"
+                @change="purchaseForm.validate('direct_receipt_warehouse_id')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.direct_receipt_warehouse_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_number') }">
+                {{ t('views.purchase.fields.tax_invoice_number') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.tax_invoice_number"
+                :class="{ 'border-danger': invalidField('tax_invoice_number') }"
+                @change="purchaseForm.validate('tax_invoice_number')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_number" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_vat_base') }">
+                {{ t('views.purchase.fields.tax_invoice_vat_base') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.tax_invoice_vat_base"
+                :allow-negative="false"
+                :class="{ 'border-danger': invalidField('tax_invoice_vat_base') }"
+                @change="purchaseForm.validate('tax_invoice_vat_base')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_vat_base" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_vat') }">
+                {{ t('views.purchase.fields.tax_invoice_vat') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.tax_invoice_vat"
+                :allow-negative="false"
+                :class="{ 'border-danger': invalidField('tax_invoice_vat') }"
+                @change="purchaseForm.validate('tax_invoice_vat')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_vat" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4 flex flex-col justify-center">
+              <FormLabel>
+                {{ t('views.purchase.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="purchaseForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': invalidField('remarks') }">
+                {{ t('views.purchase.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="purchaseForm.remarks"
+                :class="{ 'border-danger': invalidField('remarks') }"
+                @change="purchaseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="space-y-4 p-5">
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.items_empty') }}
+            </div>
+            <Button type="button" variant="primary" @click="openAddProductUnit">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.add') }}
+            </Button>
+          </div>
+
+          <FormErrorMessages :messages="purchaseForm.errors.items" />
+
+          <div v-if="purchaseItemsForm.length === 0" class="rounded-md border border-dashed p-4 text-sm text-slate-500">
+            {{ t('views.purchase.fields.items_empty') }}
+          </div>
+
+          <div
+            v-for="(item, index) in purchaseItemsForm"
+            :key="`${item.product_unit_id}-${index}`"
+            class="mt-3 border-t border-slate-200/60 pt-5 first:mt-0 first:border-t-0 first:pt-0 dark:border-darkmode-400"
+          >
+            <div v-if="currentItemLayout === 'sm'" class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12">
+                <div class="grid grid-cols-3 gap-4">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="currentItemLayout === 'md'" class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12 md:col-span-5">
+                <div class="grid grid-cols-3 gap-4">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12 md:col-span-4">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12 lg:col-span-4">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-3">
+                <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-2">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12 lg:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="currentItemLayout !== 'lg' && purchaseItemDetailsExpanded[index]" class="mt-4 space-y-4">
+              <div class="rounded-md border border-slate-200/60 p-4 space-y-5 dark:border-darkmode-400">
+                <div class="font-medium text-sm">{{ t('views.purchase.fields.item_price_breakdown') }}</div>
+
+                <div class="space-y-3">
+                  <div v-if="item.product_unit_price_discounts.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.product_unit_price_discounts_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                      :key="`${index}-price-mobile-${discountIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-2">
+                        <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                        <FormInput :model-value="discountIndex + 1" readonly />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                        <FormSelect v-model="discount.discount_type">
+                          <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </option>
+                        </FormSelect>
+                      </div>
+                      <div class="col-span-12 md:col-span-6">
+                        <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                        <div class="flex items-start gap-2">
+                          <div class="flex-1 min-w-0">
+                            <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                          </div>
+                          <div class="shrink-0">
+                            <Button
+                              type="button"
+                              variant="outline-secondary"
+                              class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                              @click="removeItemPriceDiscount(index, discountIndex)"
+                            >
+                              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.price_after_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.subtotal') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+                </div>
+
+                <div class="space-y-3">
+                  <div v-if="item.subtotal_discounts.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.subtotal_discounts_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(discount, discountIndex) in item.subtotal_discounts"
+                      :key="`${index}-subtotal-mobile-${discountIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-2">
+                        <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                        <FormInput :model-value="discountIndex + 1" readonly />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                        <FormSelect v-model="discount.discount_type">
+                          <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </option>
+                        </FormSelect>
+                      </div>
+                      <div class="col-span-12 md:col-span-6">
+                        <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                        <div class="flex items-start gap-2">
+                          <div class="flex-1 min-w-0">
+                            <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                          </div>
+                          <div class="shrink-0">
+                            <Button
+                              type="button"
+                              variant="outline-secondary"
+                              class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                              @click="removeItemSubtotalDiscount(index, discountIndex)"
+                            >
+                              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.subtotal_after_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.global_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemGlobalDiscountPreview(item, index)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.vat') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemVatPreview(item, index)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.amount_payable') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rounded-md border border-slate-200/60 p-4 space-y-4 dark:border-darkmode-400">
+                <div class="font-medium text-sm">{{ t('views.purchase.fields.item_additional_details') }}</div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3">
+                  <div class="col-span-12 md:col-span-4">
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                    <FormSwitch>
+                      <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                    </FormSwitch>
+                  </div>
+                  <div class="col-span-12 md:col-span-8">
+                    <FormLabel>{{ t('views.purchase.fields.vat_profile_id') }}</FormLabel>
+                    <FormSelect
+                      v-model="item.vat_profile_id"
+                      @change="
+                        updateVatProfileForItem(item);
+                        validateField(`items.${index}.vat_profile_id`);
+                      "
+                    >
+                      <option :value="null">{{ t('components.dropdown.placeholder') }}</option>
+                      <option v-for="vatProfile in vatProfileOptions" :key="vatProfile.code" :value="vatProfile.code">
+                        {{ vatProfile.name }}
+                      </option>
+                    </FormSelect>
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.vat_profile_id`)" />
+                  </div>
+                  <div class="col-span-12 md:col-span-4">
+                    <FormLabel>{{ t('views.purchase.fields.vat_rate') }}</FormLabel>
+                    <FormInputCurrency :model-value="item.vat_rate" readonly />
+                  </div>
+                  <div class="col-span-12 md:col-span-8">
+                    <FormLabel>{{ t('views.purchase.fields.vat_base_fraction') }}</FormLabel>
+                    <FormInput :model-value="`${item.vat_base_numerator}/${item.vat_base_denominator}`" readonly />
+                  </div>
+                  <div class="col-span-12">
+                    <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                    <FormTextarea v-model="item.remarks" @change="validateField(`items.${index}.remarks`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.remarks`)" />
+                  </div>
+                </div>
+
+                <div v-if="isDirectMode && item.is_use_serial_number" class="space-y-3">
+                  <div class="flex items-center justify-between">
+                    <div class="font-medium">{{ t('views.purchase.fields.serials') }}</div>
+                    <Button type="button" variant="outline-primary" size="sm" @click="addSerial(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials`)" />
+                  <div v-if="item.serials.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.serials_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(serial, serialIndex) in item.serials"
+                      :key="`serial-${index}-${serialIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-10">
+                        <FormLabel>{{ t('views.product.fields.serial_number') }}</FormLabel>
+                        <FormInput
+                          v-model="serial.serial"
+                          @change="validateField(`items.${index}.serials.${serialIndex}.serial`)"
+                        />
+                        <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials.${serialIndex}.serial`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-2 flex items-end">
+                        <Button
+                          type="button"
+                          variant="outline-secondary"
+                          class="h-[38px] w-full min-w-0 flex items-center justify-center"
+                          @click="removeSerial(index, serialIndex)"
+                        >
+                          <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="purchaseItemDetailsExpanded[index]" class="mt-4 grid grid-cols-12 gap-4">
+              <div class="col-span-12 lg:col-span-6">
+                <div class="rounded-md border border-slate-200/60 p-4 space-y-4 dark:border-darkmode-400">
+                  <div class="font-medium text-sm">{{ t('views.purchase.fields.item_additional_details') }}</div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-5">
+                      <FormLabel>{{ t('views.purchase.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                      <FormSwitch>
+                        <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                      </FormSwitch>
+                    </div>
+                    <div class="col-span-12 md:col-span-7">
+                      <FormLabel>{{ t('views.purchase.fields.vat_profile_id') }}</FormLabel>
+                      <FormSelect
+                        v-model="item.vat_profile_id"
+                        @change="
+                          updateVatProfileForItem(item);
+                          validateField(`items.${index}.vat_profile_id`);
+                        "
+                      >
+                        <option :value="null">{{ t('components.dropdown.placeholder') }}</option>
+                        <option v-for="vatProfile in vatProfileOptions" :key="vatProfile.code" :value="vatProfile.code">
+                          {{ vatProfile.name }}
+                        </option>
+                      </FormSelect>
+                      <FormErrorMessages :messages="getFieldErrors(`items.${index}.vat_profile_id`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel>{{ t('views.purchase.fields.vat_rate') }}</FormLabel>
+                      <FormInputCurrency :model-value="item.vat_rate" readonly />
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormLabel>{{ t('views.purchase.fields.vat_base_fraction') }}</FormLabel>
+                      <FormInput :model-value="`${item.vat_base_numerator}/${item.vat_base_denominator}`" readonly />
+                    </div>
+                    <div class="col-span-12">
+                      <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                      <FormTextarea v-model="item.remarks" @change="validateField(`items.${index}.remarks`)" />
+                      <FormErrorMessages :messages="getFieldErrors(`items.${index}.remarks`)" />
+                    </div>
+                  </div>
+
+                  <div v-if="isDirectMode && item.is_use_serial_number" class="space-y-3">
+                    <div class="flex items-center justify-between">
+                      <div class="font-medium">{{ t('views.purchase.fields.serials') }}</div>
+                      <Button type="button" variant="outline-primary" size="sm" @click="addSerial(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials`)" />
+                    <div v-if="item.serials.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.serials_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(serial, serialIndex) in item.serials"
+                        :key="`${index}-serial-${serialIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-10">
+                          <FormLabel>{{ t('views.product.fields.serial_number') }}</FormLabel>
+                          <FormInput
+                            v-model="serial.serial"
+                            @change="validateField(`items.${index}.serials.${serialIndex}.serial`)"
+                          />
+                          <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials.${serialIndex}.serial`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-2 flex items-end">
+                          <Button
+                            type="button"
+                            variant="outline-secondary"
+                            class="h-[38px] w-full min-w-0 flex items-center justify-center"
+                            @click="removeSerial(index, serialIndex)"
+                          >
+                            <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 lg:col-span-6">
+                <div class="rounded-md border border-slate-200/60 p-4 space-y-5 dark:border-darkmode-400">
+                  <div class="font-medium text-sm">{{ t('views.purchase.fields.item_price_breakdown') }}</div>
+
+                  <div class="space-y-3">
+                    <div v-if="item.product_unit_price_discounts.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.product_unit_price_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                        :key="`${index}-price-${discountIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button
+                                type="button"
+                                variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemPriceDiscount(index, discountIndex)"
+                              >
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.price_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.subtotal') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="space-y-3">
+                    <div v-if="item.subtotal_discounts.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.subtotal_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(discount, discountIndex) in item.subtotal_discounts"
+                        :key="`${index}-subtotal-${discountIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button
+                                type="button"
+                                variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemSubtotalDiscount(index, discountIndex)"
+                              >
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.subtotal_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.global_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemGlobalDiscountPreview(item, index)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.vat') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemVatPreview(item, index)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.amount_payable') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="space-y-4 p-5">
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.additional_costs_hint') }}
+            </div>
+            <Button type="button" variant="primary" @click="addAdditionalCost">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.add') }}
+            </Button>
+          </div>
+
+          <FormErrorMessages :messages="purchaseForm.errors.additional_costs" />
+
+          <div v-if="purchaseAdditionalCostsForm.length === 0" class="rounded-md border border-dashed p-4 text-sm text-slate-500">
+            {{ t('views.purchase.fields.additional_costs_empty') }}
+          </div>
+
+          <div
+            v-for="(additionalCost, index) in purchaseAdditionalCostsForm"
+            :key="`additional-cost-${index}`"
+            class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400"
+          >
+            <div class="mb-3 flex justify-end">
+              <Button type="button" variant="outline-danger" @click="removeAdditionalCost(index)">
+                <Lucide icon="Trash2" class="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.code`) }">
+                  {{ t('views.purchase.fields.code') }}
+                </FormLabel>
+                <FormInputCode
+                  v-model="additionalCost.code"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.code`) }"
+                  @set-auto="setAdditionalCostCode(index)"
+                  @change="validateField(`additional_costs.${index}.code`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.code`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.date`) }">
+                  {{ t('views.purchase.fields.date') }}
+                </FormLabel>
+                <FormInputDateTimeAuto
+                  v-model="additionalCost.date"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.date`) }"
+                  @change="validateField(`additional_costs.${index}.date`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.date`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.due_days`) }">
+                  {{ t('views.purchase.fields.due_days') }}
+                </FormLabel>
+                <FormInput
+                  v-model="additionalCost.due_days"
+                  type="number"
+                  min="0"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.due_days`) }"
+                  @change="validateField(`additional_costs.${index}.due_days`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.due_days`)" />
+              </div>
+              <div class="col-span-12 md:col-span-6">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.purchase_additional_cost_category_id`) }">
+                  {{ t('views.purchase.fields.purchase_additional_cost_category_id') }}
+                </FormLabel>
+                <FormSelectSearch
+                  v-model="additionalCost.purchase_additional_cost_category_id"
+                  v-model:search="additionalCostCategorySearch"
+                  :options="additionalCostCategoryOptions"
+                  :placeholder="t('components.dropdown.placeholder')"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.purchase_additional_cost_category_id`) }"
+                  @search="loadAdditionalCostCategoryDDL"
+                  @change="validateField(`additional_costs.${index}.purchase_additional_cost_category_id`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.purchase_additional_cost_category_id`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.paid_immediately_cash_account_id`) }">
+                  {{ t('views.purchase.fields.paid_immediately_cash_account_id') }}
+                </FormLabel>
+                <FormSelectSearch
+                  v-model="additionalCost.paid_immediately_cash_account_id"
+                  v-model:search="cashAccountSearch"
+                  :options="cashAccountOptions"
+                  :placeholder="t('components.dropdown.placeholder')"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.paid_immediately_cash_account_id`) }"
+                  @search="loadCashAccountDDL"
+                  @change="validateField(`additional_costs.${index}.paid_immediately_cash_account_id`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.paid_immediately_cash_account_id`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.amount_paid_immediately`) }">
+                  {{ t('views.purchase.fields.amount_paid_immediately') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="additionalCost.amount_paid_immediately"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.amount_paid_immediately`) }"
+                  @change="
+                    validateField(`additional_costs.${index}.amount_paid_immediately`);
+                    syncDerivedFields();
+                  "
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.amount_paid_immediately`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.amount_payable`) }">
+                  {{ t('views.purchase.fields.amount_payable') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="additionalCost.amount_payable"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.amount_payable`) }"
+                  @change="
+                    validateField(`additional_costs.${index}.amount_payable`);
+                    syncDerivedFields();
+                  "
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.amount_payable`)" />
+              </div>
+              <div class="col-span-12 md:col-span-12">
+                <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                <FormTextarea
+                  v-model="additionalCost.remarks"
+                  @change="validateField(`additional_costs.${index}.remarks`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.remarks`)" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-4>
+        <div class="space-y-4 p-5">
+          <div class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="mb-3 flex items-center justify-between">
+              <div class="font-medium">{{ t('views.purchase.fields.global_discounts') }}</div>
+              <Button type="button" variant="outline-primary" size="sm" @click="addGlobalDiscount">
+                <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                {{ t('components.buttons.add') }}
+              </Button>
+            </div>
+            <div v-if="purchaseGlobalDiscountsForm.length === 0" class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.global_discounts_empty') }}
+            </div>
+            <div
+              v-for="(discount, index) in purchaseGlobalDiscountsForm"
+              :key="`global-discount-${index}`"
+              class="mb-3 grid grid-cols-12 gap-3 last:mb-0"
+            >
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                <FormInput :model-value="discount.sequence" readonly />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                <FormSelect v-model="discount.discount_type">
+                  <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                  </option>
+                </FormSelect>
+              </div>
+              <div class="col-span-12 md:col-span-4">
+                <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+              </div>
+              <div class="col-span-12 md:col-span-2 flex items-end">
+                <Button type="button" variant="outline-danger" class="w-full" @click="removeGlobalDiscount(index)">
+                  <Lucide icon="Trash2" class="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-12 gap-4 rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.items_subtotal_after_discount') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getItemsSubtotalAfterDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.global_discount_total') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseGlobalDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.item_total_after_global_discount') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseItemTotalAfterGlobalDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.vat_base') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseVatBasePreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.vat') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseVatPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.additional_cost') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getAdditionalCostsTotalPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': invalidField('rounding') }">
+                {{ t('views.purchase.fields.rounding') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.rounding"
+                :class="{ 'border-danger': invalidField('rounding') }"
+                @change="purchaseForm.validate('rounding')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.rounding" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>{{ t('views.purchase.fields.amount_payable_preview') }}</FormLabel>
+              <FormInputCurrency :model-value="getPurchaseAmountPayablePreview()" readonly />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="submit" variant="primary" class="w-32 shadow-md" :disabled="purchaseForm.validating || purchaseForm.hasErrors">
+            <Lucide v-if="purchaseForm.validating" icon="Loader" class="mr-2 h-4 w-4 animate-spin" />
+            <Lucide v-else icon="Save" class="mr-2 h-4 w-4" />
+            {{ t('components.buttons.update') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <ProductUnitPickerDialog
+    v-if="selectedUserLocation"
+    v-model:search-text="productSearchText"
+    :open="showProductUnitModal"
+    :title="t('views.purchase.fields.product_unit_id')"
+    :is-searching="isSearchingProductUnit"
+    :options="productUnitOptions"
+    :columns="productUnitDialogColumns"
+    @close="showProductUnitModal = false"
+    @search="searchProductUnits"
+    @select="selectProductUnit($event as ProductUnitOption)"
+  />
+</template>
diff --git a/web/src/pages/purchase/PurchaseEditManual.vue b/web/src/pages/purchase/PurchaseEditManual.vue
new file mode 100644
index 000000000..445fc1652
--- /dev/null
+++ b/web/src/pages/purchase/PurchaseEditManual.vue
@@ -0,0 +1,2163 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { debounce } from 'lodash';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import type { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelect,
+  FormSelectSearch,
+  FormSwitch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ProductUnitPickerDialog from '@/components/Product/ProductUnitPickerDialog.vue';
+import CacheService from '@/services/CacheService';
+import CashAccountService from '@/services/CashAccountService';
+import ProductService from '@/services/ProductService';
+import PurchaseAdditionalCostCategoryService from '@/services/PurchaseAdditionalCostCategoryService';
+import PurchaseService from '@/services/PurchaseService';
+import SupplierService from '@/services/SupplierService';
+import VatProfileService from '@/services/VatProfileService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { CardState } from '@/types/enums/CardState';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Purchase } from '@/types/models/Purchase';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type PurchaseDiscountForm = {
+  id?: string | null;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+};
+
+type PurchaseSerialForm = {
+  id?: string | null;
+  serial: string;
+};
+
+type PurchaseAdditionalCostForm = {
+  id?: string | null;
+  purchase_additional_cost_category_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  paid_immediately_cash_account_id: string | null;
+  amount_paid_immediately: number;
+  amount_payable: number;
+  remarks: string | null;
+};
+
+type ProductUnitOption = {
+  product_unit_id: string;
+  product_unit_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  price: number;
+  product_unit_is_price_include_vat: boolean;
+  vat_profile_id: string | null;
+  vat_profile_name: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  is_use_serial_number: boolean;
+};
+
+type VatProfileOption = {
+  code: string;
+  name: string;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+};
+
+type PurchaseItemForm = {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_price: number;
+  product_unit_is_price_include_vat: boolean;
+  product_unit_price_discounts: PurchaseDiscountForm[];
+  subtotal_discounts: PurchaseDiscountForm[];
+  vat_profile_id: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  vat_profile_name?: string | null;
+  is_use_serial_number?: boolean;
+  serials: PurchaseSerialForm[];
+};
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const purchaseService = new PurchaseService();
+const supplierService = new SupplierService();
+const vatProfileService = new VatProfileService();
+const cashAccountService = new CashAccountService();
+const purchaseAdditionalCostCategoryService = new PurchaseAdditionalCostCategoryService();
+const productService = new ProductService();
+const cacheService = new CacheService();
+
+const ulid = route.params.ulid.toString();
+const initialPurchase = ref<Purchase | null>(null);
+const purchaseForm: any = purchaseService.usePurchaseEditManualForm(ulid);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+const isDirectMode = computed(() => false);
+const cacheKey = null;
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.purchase.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.purchase_data', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.items', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.additional_costs', state: CardState.Expanded },
+  { title: 'views.purchase.field_groups.summary', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const additionalCostCategoryDDL = ref<Array<DropDownOption> | null>(null);
+const additionalCostCategorySearch = ref('');
+const additionalCostCategoryOptions = computed(() =>
+  (additionalCostCategoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const vatProfileDDL = ref<Array<VatProfileOption> | null>(null);
+const vatProfileOptions = computed(() => vatProfileDDL.value ?? []);
+
+const showProductUnitModal = ref(false);
+const productSearchText = ref('');
+const isSearchingProductUnit = ref(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+
+const discountTypeOptions = [
+  { value: 'PERCENTAGE', label: 'Percentage' },
+  { value: 'NOMINAL', label: 'Nominal' },
+];
+
+const productUnitDialogColumns = [
+  {
+    key: 'unit_name',
+    label: t('views.product.table.cols.unit'),
+  },
+  {
+    key: 'conversion_value',
+    label: t('views.purchase.fields.product_unit_conversion_value'),
+    align: 'right' as const,
+    formatter: 'number' as const,
+  },
+  {
+    key: 'price',
+    label: t('views.purchase.fields.product_unit_price'),
+    align: 'right' as const,
+    formatter: 'currency' as const,
+  },
+];
+
+const purchaseItemsForm = computed<PurchaseItemForm[]>(
+  () => purchaseForm.items as PurchaseItemForm[],
+);
+const purchaseItemDetailsExpanded = ref<boolean[]>([]);
+const viewportWidth = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 1024);
+const purchaseGlobalDiscountsForm = computed<PurchaseDiscountForm[]>(
+  () => purchaseForm.global_discounts as PurchaseDiscountForm[],
+);
+const purchaseAdditionalCostsForm = computed<PurchaseAdditionalCostForm[]>(
+  () => purchaseForm.additional_costs as PurchaseAdditionalCostForm[],
+);
+
+const currentItemLayout = computed<'sm' | 'md' | 'lg'>(() => {
+  if (viewportWidth.value >= 1024) return 'lg';
+  if (viewportWidth.value >= 768) return 'md';
+  return 'sm';
+});
+
+const invalidField = (field: string) => purchaseForm.invalid(field as any);
+const validateField = (field: string) => purchaseForm.validate(field as any);
+const getFieldErrors = (field: string) =>
+  (purchaseForm.errors as Record<string, string | undefined>)[field];
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+const getPurchaseItemShouldStartExpanded = (item: PurchaseItemForm) =>
+  item.product_unit_price_discounts.length > 0 ||
+  item.subtotal_discounts.length > 0 ||
+  (isDirectMode.value && item.serials.length > 0);
+
+const syncPurchaseItemDetailsExpanded = () => {
+  purchaseItemDetailsExpanded.value = purchaseItemsForm.value.map(
+    (item, index) => purchaseItemDetailsExpanded.value[index] ?? getPurchaseItemShouldStartExpanded(item),
+  );
+};
+
+const syncViewportWidth = () => {
+  viewportWidth.value = typeof window !== 'undefined' ? window.innerWidth : 1024;
+};
+
+const appendDropDownOption = (
+  target: typeof supplierDDL | typeof cashAccountDDL | typeof additionalCostCategoryDDL,
+  option?: DropDownOption | null,
+) => {
+  if (!option?.code) return;
+
+  const current = target.value ?? [];
+  if (current.some((item) => item.code === option.code)) return;
+  target.value = [...current, option];
+};
+
+const appendVatProfileOption = (option: VatProfileOption) => {
+  const current = vatProfileDDL.value ?? [];
+  if (current.some((item) => item.code === option.code)) return;
+  vatProfileDDL.value = [...current, option];
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const normalizeVatBaseFactor = (value: unknown) => Math.max(1, Number(value ?? 1) || 0);
+const getBaseUnitName = (product: any) =>
+  (product?.product_units ?? []).find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+
+const syncDerivedFields = () => {
+  purchaseForm.additional_cost = getAdditionalCostsTotalPreview();
+};
+
+watch(
+  purchaseForm,
+  debounce((newValue) => {
+    if (!cacheKey) return;
+    cacheService.setLastEntity(cacheKey, newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+watch(
+  purchaseAdditionalCostsForm,
+  () => {
+    syncDerivedFields();
+  },
+  { deep: true },
+);
+
+watch(
+  purchaseItemsForm,
+  () => {
+    syncPurchaseItemDetailsExpanded();
+  },
+  { deep: true },
+);
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await purchaseService.read(ulid);
+  emits('loading-state', false);
+
+  if (!result.success || !result.data) {
+    router.push({ name: 'side-menu-purchase-list' });
+    return false;
+  }
+
+  initialPurchase.value = result.data;
+  return true;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  purchaseForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  const isLoaded = await loadData();
+  if (!isLoaded || !initialPurchase.value) {
+    return;
+  }
+
+  await Promise.all([
+    loadSupplierDDL(),
+    loadVatProfileDDL(),
+    loadCashAccountDDL(),
+    loadAdditionalCostCategoryDDL(),
+  ]);
+
+  hydrateForm(initialPurchase.value);
+  syncDerivedFields();
+  syncPurchaseItemDetailsExpanded();
+  window.addEventListener('resize', syncViewportWidth);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncViewportWidth);
+});
+
+const loadFromCache = () => {
+  if (!cacheKey) return;
+  const lastEntity = cacheService.getLastEntity(cacheKey);
+  if (!isRecord(lastEntity)) return;
+  purchaseForm.setData(lastEntity);
+  syncPurchaseItemDetailsExpanded();
+};
+
+const hydrateForm = (purchase: Purchase) => {
+  appendDropDownOption(supplierDDL, purchase.supplier
+    ? {
+      code: purchase.supplier.id,
+      name: purchase.supplier.name,
+    }
+    : null);
+
+  (purchase.additional_costs ?? []).forEach((additionalCost) => {
+    appendDropDownOption(additionalCostCategoryDDL, additionalCost.category
+      ? {
+        code: additionalCost.category.id,
+        name: additionalCost.category.name,
+      }
+      : null);
+    appendDropDownOption(cashAccountDDL, additionalCost.paid_immediately_cash_account
+      ? {
+        code: additionalCost.paid_immediately_cash_account.id,
+        name: additionalCost.paid_immediately_cash_account.name,
+      }
+      : null);
+  });
+
+  purchaseForm.setData({
+    company_id: purchase.company?.id ?? selectedUserLocation.value?.company.id ?? '',
+    branch_id: purchase.branch?.id ?? selectedUserLocation.value?.branch.id ?? '',
+    code: purchase.code,
+    date: formatDate(purchase.date, 'YYYY-MM-DD HH:mm:ss'),
+    due_days: Number(purchase.due_days ?? 0),
+    supplier_id: purchase.supplier?.id ?? null,
+    purchase_order_id: purchase.purchase_order?.id ?? null,
+    tax_invoice_number: purchase.tax_invoice_number ?? null,
+    tax_invoice_vat_base: Number(purchase.tax_invoice_vat_base ?? 0),
+    tax_invoice_vat: Number(purchase.tax_invoice_vat ?? 0),
+    remarks: purchase.remarks ?? '',
+    is_posted: Boolean(purchase.is_posted),
+    additional_cost: Number(purchase.additional_cost ?? 0),
+    rounding: Number(purchase.rounding ?? 0),
+    delete_item_ids: [],
+    items: (purchase.items ?? []).map((item) => {
+      if (item.vat_profile?.id) {
+        appendVatProfileOption({
+          code: item.vat_profile.id,
+          name: item.vat_profile.name,
+          vat_rate: Number(item.vat_profile.vat_rate ?? item.vat_rate ?? 0),
+          vat_base_numerator: normalizeVatBaseFactor(
+            item.vat_profile.vat_base_numerator ?? item.vat_base_numerator ?? 1,
+          ),
+          vat_base_denominator: normalizeVatBaseFactor(
+            item.vat_profile.vat_base_denominator ?? item.vat_base_denominator ?? 1,
+          ),
+        });
+      }
+
+      return {
+        id: item.id ?? null,
+        qty: Number(item.qty ?? 0),
+        product_unit_id: item.product_unit?.id ?? '',
+        product_unit_product_code: item.product_unit?.code ?? '',
+        product_unit_product_name: item.product_unit?.product?.name ?? '',
+        product_unit_unit_name: item.product_unit?.unit?.name ?? '',
+        product_unit_base_unit_name: getBaseUnitName(item.product_unit?.product),
+        product_unit_conversion_value: Number(item.product_unit_conversion_value ?? item.product_unit?.conversion_value ?? 1),
+        product_unit_price: Number(item.product_unit_price ?? 0),
+        product_unit_is_price_include_vat: Boolean(item.product_unit_is_price_include_vat),
+        delete_product_unit_price_discount_ids: [],
+        product_unit_price_discounts: (item.product_unit_price_discounts ?? []).map((discount) => ({
+          id: discount.id ?? null,
+          sequence: Number(discount.sequence ?? 0),
+          discount_type: discount.discount_type ?? 'PERCENTAGE',
+          discount_value: Number(discount.discount_value ?? 0),
+        })),
+        delete_subtotal_discount_ids: [],
+        subtotal_discounts: (item.subtotal_discounts ?? []).map((discount) => ({
+          id: discount.id ?? null,
+          sequence: Number(discount.sequence ?? 0),
+          discount_type: discount.discount_type ?? 'PERCENTAGE',
+          discount_value: Number(discount.discount_value ?? 0),
+        })),
+        vat_profile_id: item.vat_profile?.id ?? null,
+        vat_profile_name: item.vat_profile?.name ?? null,
+        vat_rate: Number(item.vat_rate ?? 0),
+        vat_base_numerator: normalizeVatBaseFactor(item.vat_base_numerator ?? 1),
+        vat_base_denominator: normalizeVatBaseFactor(item.vat_base_denominator ?? 1),
+        remarks: item.remarks ?? '',
+        is_use_serial_number: Boolean(item.product_unit?.product?.is_use_serial_number),
+        serials: [],
+      };
+    }),
+    delete_global_discount_ids: [],
+    global_discounts: (purchase.global_discounts ?? []).map((discount) => ({
+      id: discount.id ?? null,
+      sequence: Number(discount.sequence ?? 0),
+      discount_type: discount.discount_type ?? 'PERCENTAGE',
+      discount_value: Number(discount.discount_value ?? 0),
+    })),
+    delete_additional_cost_ids: [],
+    additional_costs: (purchase.additional_costs ?? []).map((additionalCost) => ({
+      id: additionalCost.id ?? null,
+      purchase_additional_cost_category_id: additionalCost.category?.id ?? '',
+      code: additionalCost.code ?? '_AUTO_',
+      date: formatDate(additionalCost.date, 'YYYY-MM-DD HH:mm:ss'),
+      due_days: Number(additionalCost.due_days ?? 0),
+      paid_immediately_cash_account_id: additionalCost.paid_immediately_cash_account?.id ?? null,
+      amount_paid_immediately: Number(additionalCost.amount_paid_immediately ?? 0),
+      amount_payable: Number(additionalCost.amount_payable ?? 0),
+      remarks: additionalCost.remarks ?? '',
+    })),
+  } as any);
+  syncPurchaseItemDetailsExpanded();
+};
+
+const setCode = () => {
+  purchaseForm.forgetError('code');
+  purchaseForm.setData({
+    code: purchaseForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const setAdditionalCostCode = (index: number) => {
+  purchaseForm.forgetError(`additional_costs.${index}.code` as any);
+  purchaseAdditionalCostsForm.value[index].code =
+    purchaseAdditionalCostsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const loadSupplierDDL = async (search = supplierSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = cashAccountSearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    category_id: undefined,
+    type: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadAdditionalCostCategoryDDL = async (search = additionalCostCategorySearch.value) => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseAdditionalCostCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    additionalCostCategoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadVatProfileDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await vatProfileService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  } as any);
+
+  if (result.success && result.data) {
+    vatProfileDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+      vat_rate: Number(item.vat_rate ?? 0),
+      vat_base_numerator: normalizeVatBaseFactor(item.vat_base_numerator ?? 1),
+      vat_base_denominator: normalizeVatBaseFactor(item.vat_base_denominator ?? 1),
+    }));
+  }
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    default_vat_profile_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: undefined,
+    refresh: true,
+    limit: 50,
+  } as any);
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((product: any) => {
+      const units: any[] = product.product_units || [];
+      const baseUnitName =
+        units.find((unit: any) => Number(unit.conversion_value ?? 1) === 1)?.unit?.name ?? '';
+      return units.map((unit: any) => ({
+        product_unit_id: unit.id,
+        product_unit_code: unit.code,
+        product_name: product.name,
+        product_image_url: product.main_product_image?.url ?? null,
+        unit_name: unit.unit?.name ?? '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(unit.conversion_value ?? 1),
+        price: Number(unit.price ?? 0),
+        product_unit_is_price_include_vat: Boolean(product.is_price_include_vat),
+        vat_profile_id: product.default_vat_profile?.id ?? null,
+        vat_profile_name: product.default_vat_profile?.name ?? null,
+        vat_rate: Number(product.default_vat_profile?.vat_rate ?? 0),
+        vat_base_numerator: normalizeVatBaseFactor(product.default_vat_profile?.vat_base_numerator ?? 1),
+        vat_base_denominator: normalizeVatBaseFactor(product.default_vat_profile?.vat_base_denominator ?? 1),
+        is_use_serial_number: Boolean(product.is_use_serial_number),
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const openAddProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  if (option.vat_profile_id) {
+    appendVatProfileOption({
+      code: option.vat_profile_id,
+      name: option.vat_profile_name ?? '-',
+      vat_rate: option.vat_rate,
+      vat_base_numerator: option.vat_base_numerator,
+      vat_base_denominator: option.vat_base_denominator,
+    });
+  }
+
+  purchaseItemsForm.value.push({
+    qty: 1,
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.base_unit_name,
+    product_unit_conversion_value: option.conversion_value,
+    product_unit_price: option.price,
+    product_unit_is_price_include_vat: option.product_unit_is_price_include_vat,
+    product_unit_price_discounts: [],
+    subtotal_discounts: [],
+    vat_profile_id: option.vat_profile_id,
+    vat_profile_name: option.vat_profile_name,
+    vat_rate: option.vat_rate,
+    vat_base_numerator: normalizeVatBaseFactor(option.vat_base_numerator),
+    vat_base_denominator: normalizeVatBaseFactor(option.vat_base_denominator),
+    remarks: '',
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  });
+  purchaseItemDetailsExpanded.value.push(false);
+
+  showProductUnitModal.value = false;
+  nextTick(() => {
+    const index = purchaseItemsForm.value.length - 1;
+    const el = document.getElementById(`purchase-item-qty-${index}`) as HTMLInputElement | null;
+    el?.focus();
+    el?.select();
+  });
+};
+
+const removeItem = (index: number) => {
+  purchaseItemsForm.value.splice(index, 1);
+  purchaseItemDetailsExpanded.value.splice(index, 1);
+  Object.keys(purchaseForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      purchaseForm.forgetError(key as any);
+    }
+  });
+};
+
+const resequence = (items: Array<{ sequence: number }>) => {
+  items.forEach((item, index) => {
+    item.sequence = index + 1;
+  });
+};
+
+const addItemPriceDiscount = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].product_unit_price_discounts.push({
+    id: null,
+    sequence: purchaseItemsForm.value[index].product_unit_price_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemPriceDiscount = (index: number, discountIndex: number) => {
+  const item = purchaseItemsForm.value[index];
+  item.product_unit_price_discounts.splice(discountIndex, 1);
+  resequence(item.product_unit_price_discounts);
+};
+
+const addItemSubtotalDiscount = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].subtotal_discounts.push({
+    id: null,
+    sequence: purchaseItemsForm.value[index].subtotal_discounts.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeItemSubtotalDiscount = (index: number, discountIndex: number) => {
+  const item = purchaseItemsForm.value[index];
+  item.subtotal_discounts.splice(discountIndex, 1);
+  resequence(item.subtotal_discounts);
+};
+
+const addGlobalDiscount = () => {
+  purchaseGlobalDiscountsForm.value.push({
+    id: null,
+    sequence: purchaseGlobalDiscountsForm.value.length + 1,
+    discount_type: 'PERCENTAGE',
+    discount_value: 0,
+  });
+};
+
+const removeGlobalDiscount = (index: number) => {
+  purchaseGlobalDiscountsForm.value.splice(index, 1);
+  resequence(purchaseGlobalDiscountsForm.value);
+};
+
+const addAdditionalCost = () => {
+  purchaseAdditionalCostsForm.value.push({
+    id: null,
+    purchase_additional_cost_category_id: '',
+    code: '_AUTO_',
+    date: '_AUTO_',
+    due_days: 0,
+    paid_immediately_cash_account_id: null,
+    amount_paid_immediately: 0,
+    amount_payable: 0,
+    remarks: '',
+  });
+};
+
+const removeAdditionalCost = (index: number) => {
+  purchaseAdditionalCostsForm.value.splice(index, 1);
+  Object.keys(purchaseForm.errors).forEach((key) => {
+    if (key.startsWith('additional_costs.')) {
+      purchaseForm.forgetError(key as any);
+    }
+  });
+  syncDerivedFields();
+};
+
+const addSerial = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = true;
+  purchaseItemsForm.value[index].serials.push({ id: null, serial: '' });
+  validateField(`items.${index}.serials`);
+};
+
+const removeSerial = (index: number, serialIndex: number) => {
+  purchaseItemsForm.value[index].serials.splice(serialIndex, 1);
+  validateField(`items.${index}.serials`);
+};
+
+const togglePurchaseItemDetails = (index: number) => {
+  purchaseItemDetailsExpanded.value[index] = !purchaseItemDetailsExpanded.value[index];
+};
+
+const updateVatProfileForItem = (item: PurchaseItemForm) => {
+  const selectedVatProfile = vatProfileOptions.value.find((option) => option.code === item.vat_profile_id);
+
+  if (!selectedVatProfile) {
+    item.vat_profile_id = null;
+    item.vat_profile_name = null;
+    item.vat_rate = 0;
+    item.vat_base_numerator = 1;
+    item.vat_base_denominator = 1;
+    return;
+  }
+
+  item.vat_profile_name = selectedVatProfile.name;
+  item.vat_rate = selectedVatProfile.vat_rate;
+  item.vat_base_numerator = normalizeVatBaseFactor(selectedVatProfile.vat_base_numerator);
+  item.vat_base_denominator = normalizeVatBaseFactor(selectedVatProfile.vat_base_denominator);
+};
+
+const getItemUnitPriceAfterDiscountPreview = (item: PurchaseItemForm) =>
+  item.product_unit_price_discounts.reduce((currentPrice, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextPrice = discount.discount_type === 'PERCENTAGE'
+      ? currentPrice - ((currentPrice * discountValue) / 100)
+      : currentPrice - discountValue;
+
+    return Math.max(nextPrice, 0);
+  }, Number(item.product_unit_price || 0));
+
+const getItemUnitPriceSubtotalAfterDiscountPreview = (item: PurchaseItemForm) =>
+  Number(item.qty || 0) * getItemUnitPriceAfterDiscountPreview(item);
+
+const getItemSubtotalAfterDiscountPreview = (item: PurchaseItemForm) =>
+  item.subtotal_discounts.reduce((currentSubtotal, discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const nextSubtotal = discount.discount_type === 'PERCENTAGE'
+      ? currentSubtotal - ((currentSubtotal * discountValue) / 100)
+      : currentSubtotal - discountValue;
+
+    return Math.max(nextSubtotal, 0);
+  }, getItemUnitPriceSubtotalAfterDiscountPreview(item));
+
+const getItemsSubtotalAfterDiscountPreview = () =>
+  purchaseItemsForm.value.reduce((total, item) => total + getItemSubtotalAfterDiscountPreview(item), 0);
+
+const getPurchaseGlobalDiscountPreview = () => {
+  let totalDiscount = 0;
+
+  purchaseGlobalDiscountsForm.value.forEach((discount) => {
+    const discountValue = Math.max(Number(discount.discount_value || 0), 0);
+    const currentTotal = Math.max(getItemsSubtotalAfterDiscountPreview() - totalDiscount, 0);
+    const appliedDiscount = discount.discount_type === 'PERCENTAGE'
+      ? (currentTotal * discountValue) / 100
+      : discountValue;
+
+    totalDiscount += Math.min(Math.max(appliedDiscount, 0), currentTotal);
+  });
+
+  return totalDiscount;
+};
+
+const getItemGlobalDiscountPreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const totalBeforeGlobalDiscount = getItemsSubtotalAfterDiscountPreview();
+  const totalGlobalDiscount = getPurchaseGlobalDiscountPreview();
+
+  if (totalBeforeGlobalDiscount <= 0 || totalGlobalDiscount <= 0) {
+    return 0;
+  }
+
+  const allocations = purchaseItemsForm.value.map((currentItem, index) => {
+    if (index === purchaseItemsForm.value.length - 1) {
+      return 0;
+    }
+
+    return totalGlobalDiscount * (getItemSubtotalAfterDiscountPreview(currentItem) / totalBeforeGlobalDiscount);
+  });
+
+  const allocatedBeforeCurrent = allocations
+    .slice(0, itemIndex)
+    .reduce((total, allocation) => total + allocation, 0);
+
+  if (itemIndex === purchaseItemsForm.value.length - 1) {
+    return Math.max(totalGlobalDiscount - allocatedBeforeCurrent, 0);
+  }
+
+  return Math.min(Math.max(allocations[itemIndex] || 0, 0), getItemSubtotalAfterDiscountPreview(item));
+};
+
+const getItemSubtotalAfterGlobalDiscountPreview = (item: PurchaseItemForm, itemIndex: number) =>
+  Math.max(getItemSubtotalAfterDiscountPreview(item) - getItemGlobalDiscountPreview(item, itemIndex), 0);
+
+const getItemVatBasePreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+  const vatBaseFactor = Number(item.vat_base_denominator || 0) > 0
+    ? Number(item.vat_base_numerator || 0) / Number(item.vat_base_denominator || 1)
+    : 0;
+
+  if (subtotalAfterGlobalDiscount <= 0 || vatRate <= 0 || vatBaseFactor <= 0) {
+    return 0;
+  }
+
+  let taxableBase = subtotalAfterGlobalDiscount;
+
+  if (item.product_unit_is_price_include_vat) {
+    taxableBase = taxableBase / (1 + (vatRate / 100));
+  }
+
+  return taxableBase * vatBaseFactor;
+};
+
+const getItemVatPreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const vatBase = getItemVatBasePreview(item, itemIndex);
+  const vatRate = Number(item.vat_rate || 0);
+
+  if (vatBase <= 0 || vatRate <= 0) {
+    return 0;
+  }
+
+  return vatBase * (vatRate / 100);
+};
+
+const getItemAmountPayablePreview = (item: PurchaseItemForm, itemIndex: number) => {
+  const subtotalAfterGlobalDiscount = getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex);
+  if (item.product_unit_is_price_include_vat) {
+    return subtotalAfterGlobalDiscount;
+  }
+
+  return subtotalAfterGlobalDiscount + getItemVatPreview(item, itemIndex);
+};
+
+const getPurchaseItemTotalAfterGlobalDiscountPreview = () =>
+  purchaseItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemSubtotalAfterGlobalDiscountPreview(item, itemIndex),
+    0,
+  );
+
+const getPurchaseVatBasePreview = () =>
+  purchaseItemsForm.value.reduce((total, item, itemIndex) => total + getItemVatBasePreview(item, itemIndex), 0);
+
+const getPurchaseVatPreview = () =>
+  purchaseItemsForm.value.reduce((total, item, itemIndex) => total + getItemVatPreview(item, itemIndex), 0);
+
+const getAdditionalCostTotal = (additionalCost: PurchaseAdditionalCostForm) =>
+  Math.max(Number(additionalCost.amount_paid_immediately || 0), 0)
+  + Math.max(Number(additionalCost.amount_payable || 0), 0);
+
+const getAdditionalCostsTotalPreview = () =>
+  purchaseAdditionalCostsForm.value.reduce((total, item) => total + getAdditionalCostTotal(item), 0);
+
+const getPurchaseAmountPayablePreview = () =>
+  purchaseItemsForm.value.reduce(
+    (total, item, itemIndex) => total + getItemAmountPayablePreview(item, itemIndex),
+    0,
+  ) + getAdditionalCostsTotalPreview() + Number(purchaseForm.rounding || 0);
+
+const scrollToError = (id: string) => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  alertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  title: string,
+  alertList: Record<string, Array<string>> | null,
+) => {
+  const payload: AlertPlaceholderProps = {
+    alertType,
+    title,
+    alertList,
+  };
+  emits('show-alertplaceholder', payload);
+};
+
+const showNotification = (title: string, content: string) => {
+  const payload: NotificationData = {
+    title,
+    content,
+  };
+  emits('show-notification', payload);
+};
+
+const onSubmit = async () => {
+  syncDerivedFields();
+
+  if (purchaseForm.hasErrors) {
+    const firstErrorKey = Object.keys(purchaseForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await purchaseForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(
+      t('views.purchase.alert.update.title'),
+      t('views.purchase.alert.update.message'),
+    );
+    router.push({ name: 'side-menu-purchase-list' });
+  } catch (error) {
+    showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form v-if="selectedUserLocation" id="purchaseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseForm.company_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="purchaseForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': invalidField('code') }">
+                {{ t('views.purchase.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="purchaseForm.code"
+                :class="{ 'border-danger': invalidField('code') }"
+                :placeholder="t('views.purchase.fields.code')"
+                @set-auto="setCode"
+                @change="purchaseForm.validate('code')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.code" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('date') }">
+                {{ t('views.purchase.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="purchaseForm.date"
+                :class="{ 'border-danger': invalidField('date') }"
+                @change="purchaseForm.validate('date')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.date" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': invalidField('due_days') }">
+                {{ t('views.purchase.fields.due_days') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.due_days"
+                type="number"
+                min="0"
+                :class="{ 'border-danger': invalidField('due_days') }"
+                @change="purchaseForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.due_days" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('supplier_id') }">
+                {{ t('views.purchase.fields.supplier_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="purchaseForm.supplier_id"
+                v-model:search="supplierSearch"
+                :options="supplierOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': invalidField('supplier_id') }"
+                @search="loadSupplierDDL"
+                @change="purchaseForm.validate('supplier_id')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.supplier_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('purchase_order_id') }">
+                {{ t('views.purchase.fields.purchase_order_id') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.purchase_order_id"
+                :class="{ 'border-danger': invalidField('purchase_order_id') }"
+                :placeholder="t('views.purchase.fields.purchase_order_id_optional')"
+                @change="purchaseForm.validate('purchase_order_id')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.purchase_order_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_number') }">
+                {{ t('views.purchase.fields.tax_invoice_number') }}
+              </FormLabel>
+              <FormInput
+                v-model="purchaseForm.tax_invoice_number"
+                :class="{ 'border-danger': invalidField('tax_invoice_number') }"
+                @change="purchaseForm.validate('tax_invoice_number')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_number" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_vat_base') }">
+                {{ t('views.purchase.fields.tax_invoice_vat_base') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.tax_invoice_vat_base"
+                :allow-negative="false"
+                :class="{ 'border-danger': invalidField('tax_invoice_vat_base') }"
+                @change="purchaseForm.validate('tax_invoice_vat_base')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_vat_base" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': invalidField('tax_invoice_vat') }">
+                {{ t('views.purchase.fields.tax_invoice_vat') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.tax_invoice_vat"
+                :allow-negative="false"
+                :class="{ 'border-danger': invalidField('tax_invoice_vat') }"
+                @change="purchaseForm.validate('tax_invoice_vat')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.tax_invoice_vat" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-4 flex flex-col justify-center">
+              <FormLabel>
+                {{ t('views.purchase.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="purchaseForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': invalidField('remarks') }">
+                {{ t('views.purchase.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="purchaseForm.remarks"
+                :class="{ 'border-danger': invalidField('remarks') }"
+                @change="purchaseForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="space-y-4 p-5">
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.items_empty') }}
+            </div>
+            <Button type="button" variant="primary" @click="openAddProductUnit">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.add') }}
+            </Button>
+          </div>
+
+          <FormErrorMessages :messages="purchaseForm.errors.items" />
+
+          <div v-if="purchaseItemsForm.length === 0" class="rounded-md border border-dashed p-4 text-sm text-slate-500">
+            {{ t('views.purchase.fields.items_empty') }}
+          </div>
+
+          <div
+            v-for="(item, index) in purchaseItemsForm"
+            :key="`${item.product_unit_id}-${index}`"
+            class="mt-3 border-t border-slate-200/60 pt-5 first:mt-0 first:border-t-0 first:pt-0 dark:border-darkmode-400"
+          >
+            <div v-if="currentItemLayout === 'sm'" class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12">
+                <div class="grid grid-cols-3 gap-4">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="currentItemLayout === 'md'" class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12 md:col-span-5">
+                <div class="grid grid-cols-3 gap-4">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12 md:col-span-4">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12 lg:col-span-4">
+                <FormLabel>
+                  <span>{{ t('views.purchase.fields.product_unit_id') }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">#{{ index + 1 }}</span>
+                  <span class="ml-2 text-xs font-normal text-slate-500 dark:text-slate-400">
+                    {{ item.product_unit_product_code || '-' }}
+                  </span>
+                </FormLabel>
+                <div
+                  class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                >
+                  {{ item.product_unit_product_name || '-' }}
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-3">
+                <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.qty`) }">
+                      {{ t('views.purchase.fields.qty') }}
+                    </FormLabel>
+                    <FormInputCurrency
+                      :id="`purchase-item-qty-${index}`"
+                      v-model="item.qty"
+                      :allow-negative="false"
+                      :class="{ 'border-danger': invalidField(`items.${index}.qty`) }"
+                      @change="validateField(`items.${index}.qty`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.qty`)" />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.product.table.cols.unit') }}</FormLabel>
+                    <FormInput :model-value="item.product_unit_unit_name || '-'" readonly />
+                  </div>
+                  <div>
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_conversion_value') }}</FormLabel>
+                    <FormInputCurrency
+                      v-model="item.product_unit_conversion_value"
+                      :allow-negative="false"
+                      @change="validateField(`items.${index}.product_unit_conversion_value`)"
+                    />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_conversion_value`)" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-12 lg:col-span-2">
+                <FormLabel :class="{ 'text-danger': invalidField(`items.${index}.product_unit_price`) }">
+                  {{ t('views.purchase.fields.product_unit_price') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="item.product_unit_price"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`items.${index}.product_unit_price`) }"
+                  @change="validateField(`items.${index}.product_unit_price`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`items.${index}.product_unit_price`)" />
+              </div>
+              <div class="col-span-12 lg:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.amount_payable') }}</FormLabel>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1 min-w-0">
+                    <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="togglePurchaseItemDetails(index)"
+                    >
+                      <Lucide :icon="purchaseItemDetailsExpanded[index] ? 'ChevronUp' : 'ChevronDown'" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div class="shrink-0">
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                      @click="removeItem(index)"
+                    >
+                      <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="currentItemLayout !== 'lg' && purchaseItemDetailsExpanded[index]" class="mt-4 space-y-4">
+              <div class="rounded-md border border-slate-200/60 p-4 space-y-5 dark:border-darkmode-400">
+                <div class="font-medium text-sm">{{ t('views.purchase.fields.item_price_breakdown') }}</div>
+
+                <div class="space-y-3">
+                  <div v-if="item.product_unit_price_discounts.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.product_unit_price_discounts_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                      :key="`${index}-price-mobile-${discountIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-2">
+                        <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                        <FormInput :model-value="discountIndex + 1" readonly />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                        <FormSelect v-model="discount.discount_type">
+                          <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </option>
+                        </FormSelect>
+                      </div>
+                      <div class="col-span-12 md:col-span-6">
+                        <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                        <div class="flex items-start gap-2">
+                          <div class="flex-1 min-w-0">
+                            <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                          </div>
+                          <div class="shrink-0">
+                            <Button
+                              type="button"
+                              variant="outline-secondary"
+                              class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                              @click="removeItemPriceDiscount(index, discountIndex)"
+                            >
+                              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.price_after_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.subtotal') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+                </div>
+
+                <div class="space-y-3">
+                  <div v-if="item.subtotal_discounts.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.subtotal_discounts_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(discount, discountIndex) in item.subtotal_discounts"
+                      :key="`${index}-subtotal-mobile-${discountIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-2">
+                        <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                        <FormInput :model-value="discountIndex + 1" readonly />
+                      </div>
+                      <div class="col-span-12 md:col-span-4">
+                        <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                        <FormSelect v-model="discount.discount_type">
+                          <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </option>
+                        </FormSelect>
+                      </div>
+                      <div class="col-span-12 md:col-span-6">
+                        <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                        <div class="flex items-start gap-2">
+                          <div class="flex-1 min-w-0">
+                            <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                          </div>
+                          <div class="shrink-0">
+                            <Button
+                              type="button"
+                              variant="outline-secondary"
+                              class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                              @click="removeItemSubtotalDiscount(index, discountIndex)"
+                            >
+                              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.subtotal_after_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.global_discount') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemGlobalDiscountPreview(item, index)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.vat') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemVatPreview(item, index)" readonly />
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                      {{ t('views.purchase.fields.amount_payable') }}
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rounded-md border border-slate-200/60 p-4 space-y-4 dark:border-darkmode-400">
+                <div class="font-medium text-sm">{{ t('views.purchase.fields.item_additional_details') }}</div>
+
+                <div class="grid grid-cols-12 gap-4 gap-y-3">
+                  <div class="col-span-12 md:col-span-4">
+                    <FormLabel>{{ t('views.purchase.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                    <FormSwitch>
+                      <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                    </FormSwitch>
+                  </div>
+                  <div class="col-span-12 md:col-span-8">
+                    <FormLabel>{{ t('views.purchase.fields.vat_profile_id') }}</FormLabel>
+                    <FormSelect
+                      v-model="item.vat_profile_id"
+                      @change="
+                        updateVatProfileForItem(item);
+                        validateField(`items.${index}.vat_profile_id`);
+                      "
+                    >
+                      <option :value="null">{{ t('components.dropdown.placeholder') }}</option>
+                      <option v-for="vatProfile in vatProfileOptions" :key="vatProfile.code" :value="vatProfile.code">
+                        {{ vatProfile.name }}
+                      </option>
+                    </FormSelect>
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.vat_profile_id`)" />
+                  </div>
+                  <div class="col-span-12 md:col-span-4">
+                    <FormLabel>{{ t('views.purchase.fields.vat_rate') }}</FormLabel>
+                    <FormInputCurrency :model-value="item.vat_rate" readonly />
+                  </div>
+                  <div class="col-span-12 md:col-span-8">
+                    <FormLabel>{{ t('views.purchase.fields.vat_base_fraction') }}</FormLabel>
+                    <FormInput :model-value="`${item.vat_base_numerator}/${item.vat_base_denominator}`" readonly />
+                  </div>
+                  <div class="col-span-12">
+                    <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                    <FormTextarea v-model="item.remarks" @change="validateField(`items.${index}.remarks`)" />
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.remarks`)" />
+                  </div>
+                </div>
+
+                <div v-if="isDirectMode && item.is_use_serial_number" class="space-y-3">
+                  <div class="flex items-center justify-between">
+                    <div class="font-medium">{{ t('views.purchase.fields.serials') }}</div>
+                    <Button type="button" variant="outline-primary" size="sm" @click="addSerial(index)">
+                      <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                      {{ t('components.buttons.add') }}
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials`)" />
+                  <div v-if="item.serials.length === 0" class="text-sm text-right text-slate-500">
+                    {{ t('views.purchase.fields.serials_empty') }}
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div
+                      v-for="(serial, serialIndex) in item.serials"
+                      :key="`serial-${index}-${serialIndex}`"
+                      class="grid grid-cols-12 gap-4 gap-y-3"
+                    >
+                      <div class="col-span-12 md:col-span-10">
+                        <FormLabel>{{ t('views.product.fields.serial_number') }}</FormLabel>
+                        <FormInput
+                          v-model="serial.serial"
+                          @change="validateField(`items.${index}.serials.${serialIndex}.serial`)"
+                        />
+                        <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials.${serialIndex}.serial`)" />
+                      </div>
+                      <div class="col-span-12 md:col-span-2 flex items-end">
+                        <Button
+                          type="button"
+                          variant="outline-secondary"
+                          class="h-[38px] w-full min-w-0 flex items-center justify-center"
+                          @click="removeSerial(index, serialIndex)"
+                        >
+                          <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="purchaseItemDetailsExpanded[index]" class="mt-4 grid grid-cols-12 gap-4">
+              <div class="col-span-12 lg:col-span-6">
+                <div class="rounded-md border border-slate-200/60 p-4 space-y-4 dark:border-darkmode-400">
+                  <div class="font-medium text-sm">{{ t('views.purchase.fields.item_additional_details') }}</div>
+
+                  <div class="grid grid-cols-12 gap-4 gap-y-3">
+                    <div class="col-span-12 md:col-span-5">
+                      <FormLabel>{{ t('views.purchase.fields.product_unit_is_price_include_vat') }}</FormLabel>
+                      <FormSwitch>
+                        <FormSwitch.Input v-model="item.product_unit_is_price_include_vat" type="checkbox" />
+                      </FormSwitch>
+                    </div>
+                    <div class="col-span-12 md:col-span-7">
+                      <FormLabel>{{ t('views.purchase.fields.vat_profile_id') }}</FormLabel>
+                      <FormSelect
+                        v-model="item.vat_profile_id"
+                        @change="
+                          updateVatProfileForItem(item);
+                          validateField(`items.${index}.vat_profile_id`);
+                        "
+                      >
+                        <option :value="null">{{ t('components.dropdown.placeholder') }}</option>
+                        <option v-for="vatProfile in vatProfileOptions" :key="vatProfile.code" :value="vatProfile.code">
+                          {{ vatProfile.name }}
+                        </option>
+                      </FormSelect>
+                      <FormErrorMessages :messages="getFieldErrors(`items.${index}.vat_profile_id`)" />
+                    </div>
+                    <div class="col-span-12 md:col-span-4">
+                      <FormLabel>{{ t('views.purchase.fields.vat_rate') }}</FormLabel>
+                      <FormInputCurrency :model-value="item.vat_rate" readonly />
+                    </div>
+                    <div class="col-span-12 md:col-span-8">
+                      <FormLabel>{{ t('views.purchase.fields.vat_base_fraction') }}</FormLabel>
+                      <FormInput :model-value="`${item.vat_base_numerator}/${item.vat_base_denominator}`" readonly />
+                    </div>
+                    <div class="col-span-12">
+                      <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                      <FormTextarea v-model="item.remarks" @change="validateField(`items.${index}.remarks`)" />
+                      <FormErrorMessages :messages="getFieldErrors(`items.${index}.remarks`)" />
+                    </div>
+                  </div>
+
+                  <div v-if="isDirectMode && item.is_use_serial_number" class="space-y-3">
+                    <div class="flex items-center justify-between">
+                      <div class="font-medium">{{ t('views.purchase.fields.serials') }}</div>
+                      <Button type="button" variant="outline-primary" size="sm" @click="addSerial(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+                    <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials`)" />
+                    <div v-if="item.serials.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.serials_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(serial, serialIndex) in item.serials"
+                        :key="`${index}-serial-${serialIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-10">
+                          <FormLabel>{{ t('views.product.fields.serial_number') }}</FormLabel>
+                          <FormInput
+                            v-model="serial.serial"
+                            @change="validateField(`items.${index}.serials.${serialIndex}.serial`)"
+                          />
+                          <FormErrorMessages :messages="getFieldErrors(`items.${index}.serials.${serialIndex}.serial`)" />
+                        </div>
+                        <div class="col-span-12 md:col-span-2 flex items-end">
+                          <Button
+                            type="button"
+                            variant="outline-secondary"
+                            class="h-[38px] w-full min-w-0 flex items-center justify-center"
+                            @click="removeSerial(index, serialIndex)"
+                          >
+                            <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 lg:col-span-6">
+                <div class="rounded-md border border-slate-200/60 p-4 space-y-5 dark:border-darkmode-400">
+                  <div class="font-medium text-sm">{{ t('views.purchase.fields.item_price_breakdown') }}</div>
+
+                  <div class="space-y-3">
+                    <div v-if="item.product_unit_price_discounts.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.product_unit_price_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(discount, discountIndex) in item.product_unit_price_discounts"
+                        :key="`${index}-price-${discountIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button
+                                type="button"
+                                variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemPriceDiscount(index, discountIndex)"
+                              >
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemPriceDiscount(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.price_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.subtotal') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemUnitPriceSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="space-y-3">
+                    <div v-if="item.subtotal_discounts.length === 0" class="text-sm text-right text-slate-500">
+                      {{ t('views.purchase.fields.subtotal_discounts_empty') }}
+                    </div>
+                    <div v-else class="space-y-3">
+                      <div
+                        v-for="(discount, discountIndex) in item.subtotal_discounts"
+                        :key="`${index}-subtotal-${discountIndex}`"
+                        class="grid grid-cols-12 gap-4 gap-y-3"
+                      >
+                        <div class="col-span-12 md:col-span-2">
+                          <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                          <FormInput :model-value="discountIndex + 1" readonly />
+                        </div>
+                        <div class="col-span-12 md:col-span-4">
+                          <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                          <FormSelect v-model="discount.discount_type">
+                            <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                              {{ option.label }}
+                            </option>
+                          </FormSelect>
+                        </div>
+                        <div class="col-span-12 md:col-span-6">
+                          <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                          <div class="flex items-start gap-2">
+                            <div class="flex-1 min-w-0">
+                              <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+                            </div>
+                            <div class="shrink-0">
+                              <Button
+                                type="button"
+                                variant="outline-secondary"
+                                class="h-[38px] w-[38px] min-w-0 flex items-center justify-center"
+                                @click="removeItemSubtotalDiscount(index, discountIndex)"
+                              >
+                                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-end">
+                      <Button type="button" variant="outline-primary" @click="addItemSubtotalDiscount(index)">
+                        <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                        {{ t('components.buttons.add') }}
+                      </Button>
+                    </div>
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.subtotal_after_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemSubtotalAfterDiscountPreview(item)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.global_discount') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemGlobalDiscountPreview(item, index)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.vat') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemVatPreview(item, index)" readonly />
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-4 gap-y-3">
+                      <div class="col-span-12 md:col-span-4 flex items-center text-sm font-medium">
+                        {{ t('views.purchase.fields.amount_payable') }}
+                      </div>
+                      <div class="col-span-12 md:col-span-8">
+                        <FormInputCurrency :model-value="getItemAmountPayablePreview(item, index)" readonly />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-3>
+        <div class="space-y-4 p-5">
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.additional_costs_hint') }}
+            </div>
+            <Button type="button" variant="primary" @click="addAdditionalCost">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.add') }}
+            </Button>
+          </div>
+
+          <FormErrorMessages :messages="purchaseForm.errors.additional_costs" />
+
+          <div v-if="purchaseAdditionalCostsForm.length === 0" class="rounded-md border border-dashed p-4 text-sm text-slate-500">
+            {{ t('views.purchase.fields.additional_costs_empty') }}
+          </div>
+
+          <div
+            v-for="(additionalCost, index) in purchaseAdditionalCostsForm"
+            :key="`additional-cost-${index}`"
+            class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400"
+          >
+            <div class="mb-3 flex justify-end">
+              <Button type="button" variant="outline-danger" @click="removeAdditionalCost(index)">
+                <Lucide icon="Trash2" class="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div class="grid grid-cols-12 gap-4 gap-y-3">
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.code`) }">
+                  {{ t('views.purchase.fields.code') }}
+                </FormLabel>
+                <FormInputCode
+                  v-model="additionalCost.code"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.code`) }"
+                  @set-auto="setAdditionalCostCode(index)"
+                  @change="validateField(`additional_costs.${index}.code`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.code`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.date`) }">
+                  {{ t('views.purchase.fields.date') }}
+                </FormLabel>
+                <FormInputDateTimeAuto
+                  v-model="additionalCost.date"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.date`) }"
+                  @change="validateField(`additional_costs.${index}.date`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.date`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.due_days`) }">
+                  {{ t('views.purchase.fields.due_days') }}
+                </FormLabel>
+                <FormInput
+                  v-model="additionalCost.due_days"
+                  type="number"
+                  min="0"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.due_days`) }"
+                  @change="validateField(`additional_costs.${index}.due_days`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.due_days`)" />
+              </div>
+              <div class="col-span-12 md:col-span-6">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.purchase_additional_cost_category_id`) }">
+                  {{ t('views.purchase.fields.purchase_additional_cost_category_id') }}
+                </FormLabel>
+                <FormSelectSearch
+                  v-model="additionalCost.purchase_additional_cost_category_id"
+                  v-model:search="additionalCostCategorySearch"
+                  :options="additionalCostCategoryOptions"
+                  :placeholder="t('components.dropdown.placeholder')"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.purchase_additional_cost_category_id`) }"
+                  @search="loadAdditionalCostCategoryDDL"
+                  @change="validateField(`additional_costs.${index}.purchase_additional_cost_category_id`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.purchase_additional_cost_category_id`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.paid_immediately_cash_account_id`) }">
+                  {{ t('views.purchase.fields.paid_immediately_cash_account_id') }}
+                </FormLabel>
+                <FormSelectSearch
+                  v-model="additionalCost.paid_immediately_cash_account_id"
+                  v-model:search="cashAccountSearch"
+                  :options="cashAccountOptions"
+                  :placeholder="t('components.dropdown.placeholder')"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.paid_immediately_cash_account_id`) }"
+                  @search="loadCashAccountDDL"
+                  @change="validateField(`additional_costs.${index}.paid_immediately_cash_account_id`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.paid_immediately_cash_account_id`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.amount_paid_immediately`) }">
+                  {{ t('views.purchase.fields.amount_paid_immediately') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="additionalCost.amount_paid_immediately"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.amount_paid_immediately`) }"
+                  @change="
+                    validateField(`additional_costs.${index}.amount_paid_immediately`);
+                    syncDerivedFields();
+                  "
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.amount_paid_immediately`)" />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel :class="{ 'text-danger': invalidField(`additional_costs.${index}.amount_payable`) }">
+                  {{ t('views.purchase.fields.amount_payable') }}
+                </FormLabel>
+                <FormInputCurrency
+                  v-model="additionalCost.amount_payable"
+                  :allow-negative="false"
+                  :class="{ 'border-danger': invalidField(`additional_costs.${index}.amount_payable`) }"
+                  @change="
+                    validateField(`additional_costs.${index}.amount_payable`);
+                    syncDerivedFields();
+                  "
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.amount_payable`)" />
+              </div>
+              <div class="col-span-12 md:col-span-12">
+                <FormLabel>{{ t('views.purchase.fields.remarks') }}</FormLabel>
+                <FormTextarea
+                  v-model="additionalCost.remarks"
+                  @change="validateField(`additional_costs.${index}.remarks`)"
+                />
+                <FormErrorMessages :messages="getFieldErrors(`additional_costs.${index}.remarks`)" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-4>
+        <div class="space-y-4 p-5">
+          <div class="rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="mb-3 flex items-center justify-between">
+              <div class="font-medium">{{ t('views.purchase.fields.global_discounts') }}</div>
+              <Button type="button" variant="outline-primary" size="sm" @click="addGlobalDiscount">
+                <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+                {{ t('components.buttons.add') }}
+              </Button>
+            </div>
+            <div v-if="purchaseGlobalDiscountsForm.length === 0" class="text-sm text-slate-500">
+              {{ t('views.purchase.fields.global_discounts_empty') }}
+            </div>
+            <div
+              v-for="(discount, index) in purchaseGlobalDiscountsForm"
+              :key="`global-discount-${index}`"
+              class="mb-3 grid grid-cols-12 gap-3 last:mb-0"
+            >
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.sequence') }}</FormLabel>
+                <FormInput :model-value="discount.sequence" readonly />
+              </div>
+              <div class="col-span-12 md:col-span-3">
+                <FormLabel>{{ t('views.purchase.fields.discount_type') }}</FormLabel>
+                <FormSelect v-model="discount.discount_type">
+                  <option v-for="option in discountTypeOptions" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                  </option>
+                </FormSelect>
+              </div>
+              <div class="col-span-12 md:col-span-4">
+                <FormLabel>{{ t('views.purchase.fields.discount_value') }}</FormLabel>
+                <FormInputCurrency v-model="discount.discount_value" :allow-negative="false" />
+              </div>
+              <div class="col-span-12 md:col-span-2 flex items-end">
+                <Button type="button" variant="outline-danger" class="w-full" @click="removeGlobalDiscount(index)">
+                  <Lucide icon="Trash2" class="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-12 gap-4 rounded-md border border-slate-200/60 p-4 dark:border-darkmode-400">
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.items_subtotal_after_discount') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getItemsSubtotalAfterDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.global_discount_total') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseGlobalDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.item_total_after_global_discount') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseItemTotalAfterGlobalDiscountPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.vat_base') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseVatBasePreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.vat') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getPurchaseVatPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <div class="text-xs text-slate-500">{{ t('views.purchase.fields.additional_cost') }}</div>
+              <div class="text-lg font-medium">{{ formatCurrency(getAdditionalCostsTotalPreview()) }}</div>
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': invalidField('rounding') }">
+                {{ t('views.purchase.fields.rounding') }}
+              </FormLabel>
+              <FormInputCurrency
+                v-model="purchaseForm.rounding"
+                :class="{ 'border-danger': invalidField('rounding') }"
+                @change="purchaseForm.validate('rounding')"
+              />
+              <FormErrorMessages :messages="purchaseForm.errors.rounding" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>{{ t('views.purchase.fields.amount_payable_preview') }}</FormLabel>
+              <FormInputCurrency :model-value="getPurchaseAmountPayablePreview()" readonly />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="submit" variant="primary" class="w-32 shadow-md" :disabled="purchaseForm.validating || purchaseForm.hasErrors">
+            <Lucide v-if="purchaseForm.validating" icon="Loader" class="mr-2 h-4 w-4 animate-spin" />
+            <Lucide v-else icon="Save" class="mr-2 h-4 w-4" />
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <ProductUnitPickerDialog
+    v-if="selectedUserLocation"
+    v-model:search-text="productSearchText"
+    :open="showProductUnitModal"
+    :title="t('views.purchase.fields.product_unit_id')"
+    :is-searching="isSearchingProductUnit"
+    :options="productUnitOptions"
+    :columns="productUnitDialogColumns"
+    @close="showProductUnitModal = false"
+    @search="searchProductUnits"
+    @select="selectProductUnit($event as ProductUnitOption)"
+  />
+</template>
diff --git a/web/src/pages/purchase/PurchaseIndex.vue b/web/src/pages/purchase/PurchaseIndex.vue
new file mode 100644
index 000000000..b9c43557f
--- /dev/null
+++ b/web/src/pages/purchase/PurchaseIndex.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.purchase.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const purchaseNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[purchaseNotification]', (el: NotificationElement) => {
+  purchaseNotification.value = el;
+});
+
+const createDirect = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-purchase-create-direct' });
+};
+
+const createManual = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-purchase-create-manual' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-purchase-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.purchase.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.purchase.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.purchase.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  purchaseNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('PURCHASE_CREATE');
+      cacheService.removeLastEntity('PURCHASE_CREATE_DIRECT');
+      cacheService.removeLastEntity('PURCHASE_CREATE_MANUAL');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('PURCHASE_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full flex-wrap gap-2 sm:mt-0 sm:w-auto sm:justify-end">
+            <template v-if="mode == ViewMode.LIST">
+              <Button as="a" href="#" variant="primary" class="shadow-md" @click="createDirect">
+                <Lucide icon="Plus" class="h-4 w-4" />
+                &nbsp;{{ t('views.purchase.actions.create_direct') }}
+              </Button>
+              <Button as="a" href="#" variant="outline-primary" class="shadow-md" @click="createManual">
+                <Lucide icon="Plus" class="h-4 w-4" />
+                &nbsp;{{ t('views.purchase.actions.create_manual') }}
+              </Button>
+            </template>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="purchaseNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/purchase/PurchaseList.vue b/web/src/pages/purchase/PurchaseList.vue
new file mode 100644
index 000000000..c845cce04
--- /dev/null
+++ b/web/src/pages/purchase/PurchaseList.vue
@@ -0,0 +1,626 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { Dialog } from '@/components/Base/Headless';
+import { FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import PurchaseService from '@/services/PurchaseService';
+import PurchaseOrderService from '@/services/PurchaseOrderService';
+import SupplierService from '@/services/SupplierService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { Purchase } from '@/types/models/Purchase';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { PurchaseReadAnyPaginateRequest } from '@/types/services/purchase/PurchaseRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const purchaseService = new PurchaseService();
+const purchaseOrderService = new PurchaseOrderService();
+const supplierService = new SupplierService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+const selectedSupplierId = ref<string | null>(null);
+const selectedPurchaseOrderId = ref<string | null>(null);
+const selectedReceiptMode = ref<string | null>(null);
+const selectedProgressStatus = ref<string | null>(null);
+const selectedIsPosted = ref<string | null>(null);
+const selectedIsPaidOff = ref<string | null>(null);
+
+const purchaseLists = ref<Collection<Array<Purchase>> | null>({
+  data: [],
+  meta: {
+    current_page: 1,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 10,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const supplierDDL = ref<Array<DropDownOption> | null>(null);
+const supplierSearch = ref<string>('');
+const supplierOptions = computed(() =>
+  (supplierDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const purchaseOrderDDL = ref<Array<DropDownOption> | null>(null);
+const purchaseOrderSearch = ref<string>('');
+const purchaseOrderOptions = computed(() =>
+  (purchaseOrderDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const receiptModeOptions = computed(() => [
+  { value: 'direct', label: 'Direct' },
+  { value: 'manual', label: 'Manual' },
+]);
+
+const progressStatusOptions = computed(() => [
+  { value: 'unlinked', label: 'Unlinked' },
+  { value: 'unmatched', label: 'Unmatched' },
+  { value: 'matched', label: 'Matched' },
+]);
+
+const postedOptions = computed(() => [
+  { value: 'true', label: t('components.buttons.yes') },
+  { value: 'false', label: t('components.buttons.no') },
+]);
+
+const paidOffOptions = computed(() => [
+  { value: 'true', label: t('components.buttons.yes') },
+  { value: 'false', label: t('components.buttons.no') },
+]);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await Promise.all([loadSupplierDDL(), loadPurchaseOrderDDL()]);
+  await getPurchases('', true, 1, 10);
+});
+
+const getPurchases = async (search: string, refresh: boolean, page: number, perPage: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: PurchaseReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value,
+    end_date: endDate.value ?? undefined,
+    supplier_id: selectedSupplierId.value,
+    purchase_order_id: selectedPurchaseOrderId.value,
+    receipt_mode: selectedReceiptMode.value,
+    is_posted: selectedIsPosted.value === null ? null : selectedIsPosted.value === 'true',
+    is_paid_off: selectedIsPaidOff.value === null ? null : selectedIsPaidOff.value === 'true',
+    progress_status: selectedProgressStatus.value,
+    refresh,
+    page,
+    per_page: perPage,
+  };
+
+  const result = (await purchaseService.readAnyPaginate(request)) as ServiceResponse<Collection<Array<Purchase>> | null>;
+
+  if (result.success && result.data) {
+    purchaseLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const loadSupplierDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await supplierService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    status: undefined,
+    include_id: selectedSupplierId.value ?? undefined,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    supplierDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadPurchaseOrderDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await purchaseOrderService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: null,
+    end_date: null,
+    supplier_id: selectedSupplierId.value,
+    refresh: false,
+    limit: 100,
+  });
+
+  if (result.success && result.data) {
+    purchaseOrderDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.code,
+    }));
+  }
+};
+
+const clearSupplierFilter = async () => {
+  selectedSupplierId.value = null;
+  selectedPurchaseOrderId.value = null;
+  await loadPurchaseOrderDDL();
+  await getPurchases(searchText.value, true, 1, purchaseLists.value?.meta.per_page ?? 10);
+};
+
+const handleSupplierFilterChange = async () => {
+  selectedPurchaseOrderId.value = null;
+  await loadPurchaseOrderDDL();
+  await getPurchases(searchText.value, true, 1, purchaseLists.value?.meta.per_page ?? 10);
+};
+
+const clearPurchaseOrderFilter = async () => {
+  selectedPurchaseOrderId.value = null;
+  await getPurchases(searchText.value, true, 1, purchaseLists.value?.meta.per_page ?? 10);
+};
+
+const handleDataListChange = async (emittedData: DataListEmittedData) => {
+  await getPurchases(
+    emittedData.search.text,
+    true,
+    emittedData.pagination.page,
+    emittedData.pagination.per_page,
+  );
+};
+
+const viewSelected = (index: number) => {
+  expandDetail.value = expandDetail.value === index ? null : index;
+};
+
+const editSelected = (index: number) => {
+  if (!purchaseLists.value?.data?.[index]) return;
+
+  const selectedPurchase = purchaseLists.value.data[index];
+  const editRouteName = selectedPurchase.receipt_mode === 'direct'
+    ? 'side-menu-purchase-edit-direct'
+    : 'side-menu-purchase-edit-manual';
+
+  router.push({
+    name: editRouteName,
+    params: { ulid: selectedPurchase.ulid },
+  });
+};
+
+const deleteSelected = (index: number) => {
+  if (!purchaseLists.value?.data?.[index]) return;
+
+  deleteUlid.value = purchaseLists.value.data[index].ulid;
+  deleteModalShow.value = true;
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+const showNotification = (title: string, content: string) => {
+  const notification: NotificationData = {
+    title,
+    content,
+  };
+
+  emits('show-notification', notification);
+};
+
+const confirmDelete = async () => {
+  emits('loading-state', true);
+  const result = await purchaseService.delete(deleteUlid.value);
+  emits('loading-state', false);
+  deleteModalShow.value = false;
+
+  if (result.success) {
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    showNotification(t('views.purchase.alert.delete.title'), t('views.purchase.alert.delete.message'));
+    await getPurchases(searchText.value, true, purchaseLists.value?.meta.current_page ?? 1, purchaseLists.value?.meta.per_page ?? 10);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+</script>
+
+<template>
+  <div class="mt-5 grid grid-cols-12 gap-6">
+    <div class="col-span-12">
+      <div class="mb-5 grid grid-cols-12 gap-4">
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase.fields.start_date') }}</FormLabel>
+          <FormInputDateTime
+            v-model="startDate"
+            @change="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase.fields.end_date') }}</FormLabel>
+          <FormInputDateTime
+            v-model="endDate"
+            @change="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase.fields.supplier_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedSupplierId"
+            v-model:search="supplierSearch"
+            :options="supplierOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="handleSupplierFilterChange"
+            @search="loadSupplierDDL"
+            @clear="clearSupplierFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-3">
+          <FormLabel>{{ t('views.purchase.fields.purchase_order_id') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedPurchaseOrderId"
+            v-model:search="purchaseOrderSearch"
+            :options="purchaseOrderOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+            @search="loadPurchaseOrderDDL"
+            @clear="clearPurchaseOrderFilter"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-4">
+          <FormLabel>{{ t('views.purchase.fields.receipt_mode') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedReceiptMode"
+            :options="receiptModeOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+            @clear="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-4">
+          <FormLabel>{{ t('views.purchase.fields.progress_status') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedProgressStatus"
+            :options="progressStatusOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+            @clear="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-4">
+          <FormLabel>{{ t('views.purchase.fields.is_posted') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedIsPosted"
+            :options="postedOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+            @clear="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+          />
+        </div>
+        <div class="col-span-12 md:col-span-4">
+          <FormLabel>{{ t('views.purchase.fields.is_paid_off') }}</FormLabel>
+          <FormSelectSearch
+            v-model="selectedIsPaidOff"
+            :options="paidOffOptions"
+            :placeholder="t('components.dropdown.placeholder')"
+            @change="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+            @clear="getPurchases(searchText, true, 1, purchaseLists?.meta.per_page ?? 10)"
+          />
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="purchaseLists"
+        :title="t('views.purchase.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="purchaseLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="purchaseLists ? purchaseLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 self-start lg:col-span-4">
+            <div class="space-y-2">
+              <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                {{ t('views.purchase.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase.fields.code') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as Purchase).code ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase.fields.date') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as Purchase).date ? formatDate((item as Purchase).date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase.fields.supplier_id') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as Purchase).supplier?.name ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase.fields.purchase_order_id') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as Purchase).purchase_order?.code ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase.fields.receipt_mode') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as Purchase).receipt_mode ?? '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase.fields.due_days') }}</div>
+                <div class="col-span-8 text-slate-700 dark:text-slate-200">{{ (item as Purchase).due_days ?? 0 }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase.fields.remarks') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">{{ (item as Purchase).remarks?.trim() || '-' }}</div>
+                <div class="col-span-4 text-slate-500">{{ t('views.purchase.fields.is_posted') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as Purchase).is_posted ? t('components.buttons.yes') : t('components.buttons.no') }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 self-start md:pr-3 lg:col-span-4 lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                {{ t('views.purchase.field_groups.summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.item_total_before_global_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).item_total_before_global_discount ?? 0)) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.global_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).global_discount ?? 0)) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.item_total_after_global_discount') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).item_total_after_global_discount ?? 0)) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.vat_base') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).vat_base ?? 0)) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.vat') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).vat ?? 0)) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.additional_cost') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).additional_cost ?? 0)) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.rounding') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).rounding ?? 0)) }}</div>
+                <div class="col-span-4 font-medium text-primary">{{ t('views.purchase.fields.amount_payable') }}</div>
+                <div class="col-span-8 text-right font-medium text-primary">{{ formatCurrency(Number((item as Purchase).amount_payable ?? 0)) }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 self-start md:pl-3 lg:col-span-3 lg:pl-4">
+            <div class="space-y-2">
+              <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                {{ t('views.purchase.field_groups.status') }}
+              </div>
+              <div class="grid grid-cols-12 items-center gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.amount_paid_total') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).amount_paid_total ?? 0)) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.amount_due') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">{{ formatCurrency(Number((item as Purchase).amount_due ?? 0)) }}</div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.is_paid_off') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as Purchase).is_paid_off ? t('components.buttons.yes') : t('components.buttons.no') }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.purchase.fields.progress_status') }}</div>
+                <div class="col-span-5 text-right text-slate-700 capitalize dark:text-slate-200">{{ (item as Purchase).progress_status ?? '-' }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 flex items-center justify-end gap-2 self-center pt-2 md:col-span-1 md:flex-col lg:col-span-1 lg:flex-col">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="h-4 w-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="h-4 w-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+            </Button>
+          </div>
+
+          <div v-if="expandDetail === index" class="col-span-12 mt-2 border-t border-slate-200 pt-3 dark:border-darkmode-400">
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 space-y-3">
+                <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                  {{ t('views.purchase.field_groups.status_breakdown') }}
+                </div>
+                <div class="rounded-md border border-slate-200/70 p-3 dark:border-darkmode-400">
+                  <div class="flex flex-wrap gap-2 text-xs">
+                    <div class="flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 dark:border-darkmode-300 dark:bg-darkmode-600">
+                      <span class="text-slate-500">{{ t('views.purchase.fields.item_total_count') }}</span>
+                      <span class="font-medium text-slate-700 dark:text-slate-100">{{ (item as Purchase).item_total_count ?? 0 }}</span>
+                    </div>
+                    <div class="flex items-center gap-2 rounded-full border border-success/30 bg-success/10 px-3 py-1.5 dark:border-success/20 dark:bg-success/10">
+                      <span class="text-slate-500 dark:text-slate-300">{{ t('views.purchase.fields.item_matched_count') }}</span>
+                      <span class="font-medium text-success">{{ (item as Purchase).item_matched_count ?? 0 }}</span>
+                    </div>
+                    <div class="flex items-center gap-2 rounded-full border border-warning/30 bg-warning/10 px-3 py-1.5 dark:border-warning/20 dark:bg-warning/10">
+                      <span class="text-slate-500 dark:text-slate-300">{{ t('views.purchase.fields.item_less_count') }}</span>
+                      <span class="font-medium text-warning">{{ (item as Purchase).item_less_count ?? 0 }}</span>
+                    </div>
+                    <div class="flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-3 py-1.5 dark:border-primary/20 dark:bg-primary/10">
+                      <span class="text-slate-500 dark:text-slate-300">{{ t('views.purchase.fields.item_more_count') }}</span>
+                      <span class="font-medium text-primary">{{ (item as Purchase).item_more_count ?? 0 }}</span>
+                    </div>
+                    <div class="flex items-center gap-2 rounded-full border border-pending/30 bg-pending/10 px-3 py-1.5 dark:border-pending/20 dark:bg-pending/10">
+                      <span class="text-slate-500 dark:text-slate-300">{{ t('views.purchase.fields.item_unlinked_count') }}</span>
+                      <span class="font-medium text-pending">{{ (item as Purchase).item_unlinked_count ?? 0 }}</span>
+                    </div>
+                    <div class="flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 dark:border-darkmode-300 dark:bg-darkmode-600">
+                      <span class="text-slate-500">{{ t('views.purchase.fields.manual_receipt_count') }}</span>
+                      <span class="font-medium text-slate-700 dark:text-slate-100">{{ (item as Purchase).manual_receipts?.length ?? 0 }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-span-12 space-y-3">
+                <div class="text-xs font-semibold uppercase tracking-wide text-primary">
+                  {{ t('views.purchase.field_groups.items') }}
+                </div>
+                <div v-if="!(item as Purchase).items?.length" class="text-xs text-slate-500">
+                  {{ t('views.purchase.fields.items_empty') }}
+                </div>
+                <div v-else class="space-y-2">
+                  <div
+                    v-for="(purchaseItem, itemIndex) in (item as Purchase).items ?? []"
+                    :key="purchaseItem.ulid ?? `${(item as Purchase).ulid}-item-${itemIndex}`"
+                    class="flex flex-wrap items-stretch gap-2 rounded-xl border border-slate-200/70 bg-slate-50/60 px-3 py-3 text-xs dark:border-darkmode-400 dark:bg-darkmode-700/40"
+                  >
+                    <div class="flex min-w-0 basis-full items-center gap-3 lg:flex-1 lg:basis-auto">
+                      <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 text-[11px] font-semibold text-primary">
+                        {{ itemIndex + 1 }}
+                      </div>
+                      <div class="min-w-0 flex-1">
+                        <div class="truncate text-sm font-semibold text-slate-800 dark:text-slate-100">
+                          {{ purchaseItem.product_unit?.product?.name ?? purchaseItem.product_unit?.code ?? '-' }}
+                        </div>
+                        <div class="truncate text-[11px] text-slate-500 dark:text-slate-400">
+                          {{ purchaseItem.product_unit?.code ?? '-' }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="flex min-h-[56px] min-w-[104px] flex-col justify-between rounded-lg border border-slate-200/80 bg-white px-3 py-2 dark:border-darkmode-500 dark:bg-darkmode-600/70 sm:min-w-[116px]">
+                      <div class="truncate text-[11px] leading-4 text-slate-500">{{ t('views.purchase.fields.qty') }}</div>
+                      <div class="text-sm font-semibold leading-5 text-slate-700 dark:text-slate-100">{{ purchaseItem.qty ?? 0 }}</div>
+                    </div>
+
+                    <div class="flex min-h-[56px] min-w-[104px] flex-col justify-between rounded-lg border border-slate-200/80 bg-white px-3 py-2 dark:border-darkmode-500 dark:bg-darkmode-600/70 sm:min-w-[116px]">
+                      <div class="truncate text-[11px] leading-4 text-slate-500">{{ t('views.purchase.fields.product_unit_price') }}</div>
+                      <div class="text-sm font-semibold leading-5 text-slate-700 dark:text-slate-100">
+                        {{ formatCurrency(Number(purchaseItem.product_unit_price ?? 0)) }}
+                      </div>
+                    </div>
+
+                    <div class="flex min-h-[56px] min-w-[104px] flex-col justify-between rounded-lg border border-success/20 bg-success/10 px-3 py-2 sm:min-w-[116px]">
+                      <div class="truncate text-[11px] leading-4 text-slate-500 dark:text-slate-300">{{ t('views.purchase.fields.subtotal') }}</div>
+                      <div class="text-sm font-semibold leading-5 text-success">
+                        {{ formatCurrency(Number(purchaseItem.subtotal_after_vat ?? 0)) }}
+                      </div>
+                    </div>
+
+                    <div class="flex min-h-[56px] min-w-[104px] flex-col justify-between rounded-lg border border-slate-200/80 bg-white px-3 py-2 dark:border-darkmode-500 dark:bg-darkmode-600/70 sm:min-w-[116px]">
+                      <div class="truncate text-[11px] leading-4 text-slate-500">{{ t('views.purchase.fields.product_unit_qty_base') }}</div>
+                      <div class="text-sm font-semibold leading-5 text-slate-700 dark:text-slate-100">{{ purchaseItem.product_unit_qty_base ?? 0 }}</div>
+                    </div>
+
+                    <div class="flex min-h-[56px] min-w-[104px] flex-col justify-between rounded-lg border border-slate-200/80 bg-white px-3 py-2 dark:border-darkmode-500 dark:bg-darkmode-600/70 sm:min-w-[116px]">
+                      <div class="truncate text-[11px] leading-4 text-slate-500">{{ t('views.purchase.fields.qty_received_base') }}</div>
+                      <div class="text-sm font-semibold leading-5 text-slate-700 dark:text-slate-100">{{ purchaseItem.qty_received_base ?? 0 }}</div>
+                    </div>
+
+                    <div class="flex min-h-[56px] min-w-[104px] flex-col justify-between rounded-lg border border-slate-200/80 bg-white px-3 py-2 dark:border-darkmode-500 dark:bg-darkmode-600/70 sm:min-w-[116px]">
+                      <div class="truncate text-[11px] leading-4 text-slate-500">{{ t('views.purchase.fields.qty_outstanding_base') }}</div>
+                      <div class="text-sm font-semibold leading-5 text-slate-700 dark:text-slate-100">{{ purchaseItem.qty_outstanding_base ?? 0 }}</div>
+                    </div>
+
+                    <div class="flex min-h-[56px] min-w-[104px] flex-col justify-between rounded-lg border border-slate-200/80 bg-white px-3 py-2 dark:border-darkmode-500 dark:bg-darkmode-600/70 sm:min-w-[116px]">
+                      <div class="truncate text-[11px] leading-4 text-slate-500">{{ t('views.purchase.fields.qty_excess_base') }}</div>
+                      <div class="text-sm font-semibold leading-5 text-slate-700 dark:text-slate-100">{{ purchaseItem.qty_excess_base ?? 0 }}</div>
+                    </div>
+
+                    <div
+                      v-if="purchaseItem.remarks?.trim()"
+                      class="min-w-0 basis-full text-[11px] text-slate-600 dark:text-slate-300 xl:basis-auto xl:flex-1"
+                    >
+                      <span class="text-slate-500">{{ t('views.purchase.fields.remarks') }}:</span>
+                      {{ purchaseItem.remarks?.trim() }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+        <div class="mt-5 text-3xl">Are you sure?</div>
+        <div class="mt-2 text-slate-500">This action cannot be undone.</div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="mr-1 w-24" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/receivable-category/ReceivableCategoryCreate.vue b/web/src/pages/receivable-category/ReceivableCategoryCreate.vue
new file mode 100644
index 000000000..b23f74bce
--- /dev/null
+++ b/web/src/pages/receivable-category/ReceivableCategoryCreate.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import ReceivableCategoryService from '@/services/ReceivableCategoryService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+} from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const receivableCategoryService = new ReceivableCategoryService();
+const cacheService = new CacheService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.receivable_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.receivable_category.field_groups.receivable_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const receivableCategoryForm = receivableCategoryService.useReceivableCategoryCreateForm();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setCompanyIdData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  receivableCategoryForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('RECEIVABLE_CATEGORY_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+// #endregion
+
+// #region Methods - ReceivableCategory
+const setCompanyIdData = () => {
+  receivableCategoryForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('RECEIVABLE_CATEGORY_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  if (!data.code) {
+    data.code = '_AUTO_';
+  }
+
+  if (data.sequence === undefined || data.sequence === null) {
+    data.sequence = 0;
+  }
+
+  receivableCategoryForm.setData(data);
+};
+
+const setCode = () => {
+  receivableCategoryForm.forgetError('code');
+  if (receivableCategoryForm.code == '_AUTO_') {
+    receivableCategoryForm.setData({ code: '' });
+  } else {
+    receivableCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  receivableCategoryForm.reset();
+  receivableCategoryForm.setErrors({});
+  receivableCategoryForm.setData({
+    code: '_AUTO_',
+    name: '',
+    sequence: 0,
+  });
+  setCompanyIdData();
+};
+
+const onSubmit = async () => {
+  if (receivableCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(receivableCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await receivableCategoryForm
+    .submit()
+    .then(() => {
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-receivable-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="receivableCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="receivableCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': receivableCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.receivable_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="receivableCategoryForm.code"
+                :class="{
+                  'border-danger': receivableCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.receivable_category.fields.code')"
+                @set-auto="setCode"
+                @change="receivableCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="receivableCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': receivableCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.receivable_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="receivableCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': receivableCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.receivable_category.fields.name')"
+                @change="receivableCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="receivableCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': receivableCategoryForm.invalid('sequence'),
+                }"
+              >
+                {{ t('views.receivable_category.fields.sequence') }}
+              </FormLabel>
+              <FormInput
+                id="sequence"
+                v-model.number="receivableCategoryForm.sequence"
+                type="number"
+                min="0"
+                :class="{
+                  'border-danger': receivableCategoryForm.invalid('sequence'),
+                }"
+                :placeholder="t('views.receivable_category.fields.sequence')"
+                @change="receivableCategoryForm.validate('sequence')"
+              />
+              <FormErrorMessages :messages="receivableCategoryForm.errors.sequence" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="receivableCategoryForm.validating || receivableCategoryForm.hasErrors"
+          >
+            <Lucide v-if="receivableCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/receivable-category/ReceivableCategoryEdit.vue b/web/src/pages/receivable-category/ReceivableCategoryEdit.vue
new file mode 100644
index 000000000..0bf356aa9
--- /dev/null
+++ b/web/src/pages/receivable-category/ReceivableCategoryEdit.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import ReceivableCategoryService from '@/services/ReceivableCategoryService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { FormInput, FormLabel, FormErrorMessages, FormInputCode } from '@/components/Base/Form';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+const receivableCategoryService = new ReceivableCategoryService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.receivable_category.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.receivable_category.field_groups.receivable_category_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const receivableCategoryForm = receivableCategoryService.useReceivableCategoryEditForm(route.params.ulid.toString());
+const companyCode = ref<string>('');
+const companyName = ref<string>('');
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+// #endregion
+
+// #region Vue Core
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+});
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+// #endregion
+
+// #region Methods - ReceivableCategory
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await receivableCategoryService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (result.success && result.data) {
+    companyCode.value = result.data.company?.code ?? '';
+    companyName.value = result.data.company?.name ?? '';
+
+    receivableCategoryForm.setData({
+      company_id: result.data.company?.id ?? '',
+      code: result.data.code,
+      name: result.data.name,
+      sequence: result.data.sequence,
+    } as any);
+  } else {
+    router.push({ name: 'side-menu-receivable-category-list' });
+  }
+};
+
+const setCode = () => {
+  receivableCategoryForm.forgetError('code');
+  if (receivableCategoryForm.code == '_AUTO_') {
+    receivableCategoryForm.setData({ code: '' });
+  } else {
+    receivableCategoryForm.setData({ code: '_AUTO_' });
+  }
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  receivableCategoryForm.reset();
+  receivableCategoryForm.setErrors({});
+  await loadData();
+};
+
+const onSubmit = async () => {
+  if (receivableCategoryForm.hasErrors) {
+    const firstErrorKey = Object.keys(receivableCategoryForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  emits('loading-state', true);
+  await receivableCategoryForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-receivable-category-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <form id="receivableCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ companyCode }}
+            <br />
+            {{ companyName }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="receivableCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-4">
+              <FormLabel
+                :class="{
+                  'text-danger': receivableCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.receivable_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="receivableCategoryForm.code"
+                :class="{
+                  'border-danger': receivableCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.receivable_category.fields.code')"
+                @set-auto="setCode"
+                @change="receivableCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="receivableCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-5">
+              <FormLabel
+                :class="{
+                  'text-danger': receivableCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.receivable_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="receivableCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': receivableCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.receivable_category.fields.name')"
+                @change="receivableCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="receivableCategoryForm.errors.name" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-3">
+              <FormLabel
+                :class="{
+                  'text-danger': receivableCategoryForm.invalid('sequence'),
+                }"
+              >
+                {{ t('views.receivable_category.fields.sequence') }}
+              </FormLabel>
+              <FormInput
+                id="sequence"
+                v-model.number="receivableCategoryForm.sequence"
+                type="number"
+                min="0"
+                :class="{
+                  'border-danger': receivableCategoryForm.invalid('sequence'),
+                }"
+                :placeholder="t('views.receivable_category.fields.sequence')"
+                @change="receivableCategoryForm.validate('sequence')"
+              />
+              <FormErrorMessages :messages="receivableCategoryForm.errors.sequence" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="receivableCategoryForm.validating || receivableCategoryForm.hasErrors"
+          >
+            <Lucide v-if="receivableCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/receivable-category/ReceivableCategoryIndex.vue b/web/src/pages/receivable-category/ReceivableCategoryIndex.vue
new file mode 100644
index 000000000..bc8ca38f3
--- /dev/null
+++ b/web/src/pages/receivable-category/ReceivableCategoryIndex.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.receivable_category.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const receivableCategoryNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[receivableCategoryNotification]', (el: NotificationElement) => {
+  receivableCategoryNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-receivable-category-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-receivable-category-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.receivable_category.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.receivable_category.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.receivable_category.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (receivableCategoryNotification.value) {
+    receivableCategoryNotification.value.showToast();
+  }
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('RECEIVABLE_CATEGORY_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('RECEIVABLE_CATEGORY_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="h-4 w-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="receivableCategoryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/receivable-category/ReceivableCategoryList.vue b/web/src/pages/receivable-category/ReceivableCategoryList.vue
new file mode 100644
index 000000000..9264a4ebc
--- /dev/null
+++ b/web/src/pages/receivable-category/ReceivableCategoryList.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, onMounted, ref } from 'vue';
+import DataList from '@/components/DataList';
+import { useI18n } from 'vue-i18n';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import { Dialog } from '@/components/Base/Headless';
+import { useRouter } from 'vue-router';
+import ReceivableCategoryService from '@/services/ReceivableCategoryService';
+import { ReceivableCategory } from '@/types/models/ReceivableCategory';
+import { Resource } from '@/types/resources/Resource';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { NotificationData } from '@/types/models/NotificationData';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+// #endregion
+
+// #region Declarations
+const { t } = useI18n();
+const router = useRouter();
+const receivableCategoryService = new ReceivableCategoryService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+// #endregion
+
+// #region Props, Emits
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+// #endregion
+
+// #region Refs
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | null>(null);
+const receivableCategoryLists = ref<Resource<Array<ReceivableCategory>> | null>({
+  data: [],
+});
+// #endregion
+
+// #region Computed
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getReceivableCategories('', true);
+});
+// #endregion
+
+// #region Methods
+const getReceivableCategories = async (search: string, refresh: boolean) => {
+  emits('loading-state', true);
+
+  const result: ServiceResponse<Resource<Array<ReceivableCategory>> | null> = await receivableCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh,
+    limit: 1000,
+  });
+
+  if (result.success && result.data) {
+    receivableCategoryLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async () => {
+  await getReceivableCategories('', false);
+};
+
+const viewSelected = (itemId: string) => {
+  if (expandDetail.value === itemId) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = itemId;
+  }
+};
+
+const editSelected = (item: ReceivableCategory) => {
+  router.push({
+    name: 'side-menu-receivable-category-edit',
+    params: { ulid: item.ulid },
+  });
+};
+
+const deleteSelected = (item: ReceivableCategory) => {
+  deleteUlid.value = item.ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<boolean | null> = await receivableCategoryService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getReceivableCategories('', true);
+    showNotification(
+      t('views.receivable_category.alert.delete_receivable_category.title'),
+      t('views.receivable_category.alert.delete_receivable_category.content'),
+    );
+  } else {
+    const alertList = result.errors ?? convertErrorTypeToAlertListType({ message: result.message });
+    showAlertPlaceholder('danger', result.message ?? '', alertList);
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+// #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.receivable_category.table.title')"
+    :enable-search="false"
+    :can-print="true"
+    :can-export="true"
+    :pagination="null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.receivable_category.fields.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.receivable_category.fields.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.receivable_category.fields.sequence') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="receivableCategoryLists !== null">
+          <template v-if="receivableCategoryLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="4">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-else v-for="item in receivableCategoryLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>
+                <div class="font-medium">{{ item.code }}</div>
+              </Table.Td>
+              <Table.Td>
+                <span>{{ item.name }}</span>
+              </Table.Td>
+              <Table.Td>{{ item.sequence }}</Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(item.ulid)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(item as ReceivableCategory)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(item as ReceivableCategory)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== item.id,
+              }"
+            >
+              <Table.Td colspan="3">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.receivable_category.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.receivable_category.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="mt-1 flex flex-row">
+                  <div class="ml-5 w-48 pr-5 text-right font-medium">
+                    {{ t('views.receivable_category.fields.sequence') }}
+                  </div>
+                  <div class="flex-1">{{ item.sequence }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="mr-1 w-24"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/receivable/ReceivableCreate.vue b/web/src/pages/receivable/ReceivableCreate.vue
new file mode 100644
index 000000000..b5a396487
--- /dev/null
+++ b/web/src/pages/receivable/ReceivableCreate.vue
@@ -0,0 +1,744 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType, formatCurrency } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import ReceivableService from '@/services/ReceivableService';
+import ReceivableCategoryService from '@/services/ReceivableCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import CacheService from '@/services/CacheService';
+import CustomerService from '@/services/CustomerService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { ReceivableCategory } from '@/types/models/ReceivableCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+import type { Customer } from '@/types/models/Customer';
+
+type ReceivablePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const receivableService = new ReceivableService();
+const receivableCategoryService = new ReceivableCategoryService();
+const cashAccountService = new CashAccountService();
+const cacheService = new CacheService();
+const customerService = new CustomerService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.receivable.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.receivable.field_groups.receivable_data', state: CardState.Expanded },
+  { title: 'views.receivable.field_groups.payments', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const receivableForm = receivableService.useReceivableCreateForm();
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const customerDDL = ref<Array<DropDownOption> | null>(null);
+const customerSearch = ref<string>('');
+const customerOptions = computed(() =>
+  (customerDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const receivablePaymentsForm = computed<ReceivablePaymentFormItem[]>(
+  () => receivableForm.payments as ReceivablePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+
+const amountTotalPreview = computed(
+  () => Number(receivableForm.direct_amount_received ?? 0) + Number(receivableForm.opening_amount_due ?? 0),
+);
+const amountPaidByCashAccountPreview = computed(() =>
+  receivablePaymentsForm.value.reduce((total, payment) => total + Number(payment.amount ?? 0), 0),
+);
+const amountPaidByStockAdjustmentPreview = computed(() => 0);
+const amountDuePreview = computed(() =>
+  Math.max(
+    0,
+    amountTotalPreview.value
+      - amountPaidByCashAccountPreview.value
+      - amountPaidByStockAdjustmentPreview.value,
+  ),
+);
+const invalidReceivableField = (field: string) => receivableForm.invalid(field as any);
+const validateReceivableField = (field: string) => receivableForm.validate(field as any);
+const normalizeErrorMessages = (messages: string | string[] | undefined): string | undefined =>
+  Array.isArray(messages) ? messages.join(' ') : messages;
+const getReceivableFieldErrors = (field: string) =>
+  normalizeErrorMessages(
+    (receivableForm.errors as Record<string, string | string[] | undefined>)[field],
+  );
+const clearTopAlertPlaceholder = () => {
+  showAlertPlaceholder('hidden', '', null);
+};
+const clearStaleValidationErrors = (fields: string[]) => {
+  fields.forEach((field) => receivableForm.forgetError(field as any));
+  clearTopAlertPlaceholder();
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+  setLocationData();
+
+  await Promise.all([
+    loadCategoryDDL(),
+    loadCustomerDDL(),
+    loadCashAccountDDL(),
+  ]);
+});
+
+const setLocationData = () => {
+  receivableForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+};
+
+const loadFromCache = () => {
+  const data = cacheService.getLastEntity('RECEIVABLE_CREATE') as Record<string, unknown> | null;
+  if (!data) return;
+
+  receivableForm.setData(data);
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await receivableCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: receivableForm.category_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: ReceivableCategory) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCustomerDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await customerService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: receivableForm.customer_id || undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    customerDDL.value = result.data.data.map((item: Customer) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: receivableForm.cash_account_id || undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  receivableForm.forgetError('code');
+  receivableForm.setData({
+    code: receivableForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const clearCategory = () => {
+  receivableForm.setData({ category_id: '' });
+  clearStaleValidationErrors(['category_id', 'form']);
+};
+
+const clearCashAccount = () => {
+  receivableForm.setData({ cash_account_id: '' });
+  receivableForm.forgetError('cash_account_id');
+};
+
+const clearCustomer = () => {
+  receivableForm.setData({ customer_id: '' });
+  clearStaleValidationErrors(['customer_id', 'form']);
+};
+
+const setPaymentCode = (index: number) => {
+  receivableForm.forgetError(`payments.${index}.code` as any);
+  receivablePaymentsForm.value[index].code =
+    receivablePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = receivablePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validateReceivableField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  receivablePaymentsForm.value.push({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+
+  Object.keys(receivableForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      receivableForm.forgetError(key as any);
+    }
+  });
+};
+
+const removePayment = (index: number) => {
+  receivablePaymentsForm.value.splice(index, 1);
+
+  Object.keys(receivableForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      receivableForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  emits('loading-state', true);
+
+  await receivableForm
+    .submit()
+    .then(() => {
+      cacheService.removeLastEntity('RECEIVABLE_CREATE');
+      resetForm();
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-receivable-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  receivableForm.reset();
+  receivableForm.setErrors({});
+  receivableForm.setData({
+    code: '_AUTO_',
+    date: '_AUTO_',
+    customer_id: '',
+    cash_account_id: '',
+    direct_amount_received: 0,
+    opening_amount_due: 0,
+    due_days: 0,
+    remarks: '',
+    payments: [],
+  });
+  categorySearch.value = '';
+  customerSearch.value = '';
+  cashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+  setLocationData();
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  receivableForm,
+  debounce((newValue): void => {
+    cacheService.setLastEntity('RECEIVABLE_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+watch(
+  () => receivableForm.category_id,
+  () => {
+    clearStaleValidationErrors(['category_id']);
+  },
+);
+
+watch(
+  () => [receivableForm.direct_amount_received, receivableForm.opening_amount_due],
+  () => {
+    clearStaleValidationErrors(['form']);
+  },
+);
+
+watch(
+  () => receivableForm.customer_id,
+  () => {
+    clearStaleValidationErrors(['customer_id', 'form']);
+  },
+);
+</script>
+
+<template>
+  <form id="receivableForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="receivableForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="receivableForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('code') }">
+                {{ t('views.receivable.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="receivableForm.code"
+                :class="{ 'border-danger': receivableForm.invalid('code') }"
+                :placeholder="t('views.receivable.fields.code')"
+                @set-auto="setCode"
+                @change="receivableForm.validate('code')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('date') }">
+                {{ t('views.receivable.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                id="date"
+                v-model="receivableForm.date"
+                :class="{ 'border-danger': receivableForm.invalid('date') }"
+                :placeholder="t('views.receivable.fields.date')"
+                @change="receivableForm.validate('date')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('category_id') }">
+                {{ t('views.receivable.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="receivableForm.category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': receivableForm.invalid('category_id') }"
+                @change="receivableForm.validate('category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('customer_id') }">
+                {{ t('views.receivable.fields.customer') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="receivableForm.customer_id"
+                v-model:search="customerSearch"
+                :options="customerOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': receivableForm.invalid('customer_id') }"
+                @change="receivableForm.validate('customer_id')"
+                @search="loadCustomerDDL"
+                @clear="clearCustomer"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.customer_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('cash_account_id') }">
+                {{ t('views.receivable.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="receivableForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': receivableForm.invalid('cash_account_id') }"
+                @change="receivableForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('direct_amount_received') }">
+                {{ t('views.receivable.fields.direct_amount_received') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="direct_amount_received"
+                v-model="receivableForm.direct_amount_received"
+                :allow-negative="false"
+                :class="{ 'border-danger': receivableForm.invalid('direct_amount_received') }"
+                :placeholder="t('views.receivable.fields.direct_amount_received')"
+                @change="receivableForm.validate('direct_amount_received')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.direct_amount_received" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('opening_amount_due') }">
+                {{ t('views.receivable.fields.opening_amount_due') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="opening_amount_due"
+                v-model="receivableForm.opening_amount_due"
+                :allow-negative="false"
+                :class="{ 'border-danger': receivableForm.invalid('opening_amount_due') }"
+                :placeholder="t('views.receivable.fields.opening_amount_due')"
+                @change="receivableForm.validate('opening_amount_due')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.opening_amount_due" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('due_days') }">
+                {{ t('views.receivable.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="receivableForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': receivableForm.invalid('due_days') }"
+                :placeholder="t('views.receivable.fields.due_days')"
+                @change="receivableForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.receivable.fields.amount_total') }}</FormLabel>
+              <FormInputCurrency :model-value="amountTotalPreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.receivable.fields.amount_due') }}</FormLabel>
+              <FormInputCurrency :model-value="amountDuePreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.receivable.fields.amount_paid_by_cash_account') }}</FormLabel>
+              <FormInputCurrency :model-value="amountPaidByCashAccountPreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.receivable.fields.amount_paid_by_stock_adjustment') }}</FormLabel>
+              <FormInputCurrency
+                :model-value="amountPaidByStockAdjustmentPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('remarks') }">
+                {{ t('views.receivable.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="receivableForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': receivableForm.invalid('remarks') }"
+                :placeholder="t('views.receivable.fields.remarks')"
+                @change="receivableForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.receivable.fields.amount_total') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountTotalPreview) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.receivable.fields.amount_paid_by_cash_account') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountPaidByCashAccountPreview) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.receivable.fields.amount_due') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountDuePreview) }}
+              </div>
+            </div>
+          </div>
+
+          <FormErrorMessages :messages="(receivableForm.errors as any).payments" />
+
+          <div v-if="receivablePaymentsForm.length === 0" class="text-right text-sm text-slate-500">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div
+              v-for="(payment, index) in receivablePaymentsForm"
+              :key="`receivable-payment-${index}`"
+              class="rounded-md border border-slate-200 p-4 dark:border-darkmode-400"
+            >
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.code`) }">
+                    {{ t('views.receivable.fields.payment_code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidReceivableField(`payments.${index}.code`) }"
+                    :placeholder="t('views.receivable.fields.payment_code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validateReceivableField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.date`) }">
+                    {{ t('views.receivable.fields.payment_date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidReceivableField(`payments.${index}.date`) }"
+                    :placeholder="t('views.receivable.fields.payment_date')"
+                    @change="validateReceivableField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.receivable.fields.payment_cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="cashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidReceivableField(`payments.${index}.cash_account_id`) }"
+                    @change="validateReceivableField(`payments.${index}.cash_account_id`)"
+                    @search="loadCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.amount`) }">
+                    {{ t('views.receivable.fields.payment_amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="min-w-0 flex-1">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidReceivableField(`payments.${index}.amount`) }"
+                        @change="validateReceivableField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="flex h-[38px] w-[38px] min-w-0 items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.amount`)" />
+                </div>
+
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.remarks`) }">
+                    {{ t('views.receivable.fields.payment_remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidReceivableField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.receivable.fields.payment_remarks')"
+                    @change="validateReceivableField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="receivableForm.validating"
+          >
+            <Lucide v-if="receivableForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
+
diff --git a/web/src/pages/receivable/ReceivableEdit.vue b/web/src/pages/receivable/ReceivableEdit.vue
new file mode 100644
index 000000000..b506eb2a0
--- /dev/null
+++ b/web/src/pages/receivable/ReceivableEdit.vue
@@ -0,0 +1,757 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormErrorMessages,
+  FormInput,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormLabel,
+  FormSelectSearch,
+  FormTextarea,
+} from '@/components/Base/Form';
+import ReceivableService from '@/services/ReceivableService';
+import ReceivableCategoryService from '@/services/ReceivableCategoryService';
+import CashAccountService from '@/services/CashAccountService';
+import CustomerService from '@/services/CustomerService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import type { DropDownOption } from '@/types/models/DropDownOption';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import type { Receivable } from '@/types/models/Receivable';
+import type { ReceivableCategory } from '@/types/models/ReceivableCategory';
+import type { CashAccount } from '@/types/models/CashAccount';
+import type { ReceivablePayment } from '@/types/models/ReceivablePayment';
+import type { Customer } from '@/types/models/Customer';
+
+type ReceivablePaymentFormItem = {
+  id?: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string;
+};
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const receivableService = new ReceivableService();
+const receivableCategoryService = new ReceivableCategoryService();
+const cashAccountService = new CashAccountService();
+const customerService = new CustomerService();
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  { title: 'views.receivable.field_groups.company_info', state: CardState.Expanded },
+  { title: 'views.receivable.field_groups.receivable_data', state: CardState.Expanded },
+  { title: 'views.receivable.field_groups.payments', state: CardState.Expanded },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const receivableForm = receivableService.useReceivableEditForm(route.params.ulid.toString());
+const receivableData = ref<Receivable | null>(null);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const customerDDL = ref<Array<DropDownOption> | null>(null);
+const customerSearch = ref<string>('');
+const customerOptions = computed(() =>
+  (customerDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const cashAccountDDL = ref<Array<DropDownOption> | null>(null);
+const cashAccountSearch = ref<string>('');
+const cashAccountOptions = computed(() =>
+  (cashAccountDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const receivablePaymentsForm = computed<ReceivablePaymentFormItem[]>(
+  () => receivableForm.payments as ReceivablePaymentFormItem[],
+);
+const paymentCashAccountSearch = ref<string>('');
+
+const amountTotalPreview = computed(
+  () => Number(receivableForm.direct_amount_received ?? 0) + Number(receivableForm.opening_amount_due ?? 0),
+);
+const amountPaidByCashAccountPreview = computed(() =>
+  receivablePaymentsForm.value.reduce((total, payment) => total + Number(payment.amount ?? 0), 0),
+);
+const amountPaidByStockAdjustmentPreview = computed(() => 0);
+const amountDuePreview = computed(() =>
+  Math.max(
+    0,
+    amountTotalPreview.value
+      - amountPaidByCashAccountPreview.value
+      - amountPaidByStockAdjustmentPreview.value,
+  ),
+);
+const invalidReceivableField = (field: string) => receivableForm.invalid(field as any);
+const validateReceivableField = (field: string) => receivableForm.validate(field as any);
+const normalizeErrorMessages = (messages: string | string[] | undefined): string | undefined =>
+  Array.isArray(messages) ? messages.join(' ') : messages;
+const getReceivableFieldErrors = (field: string) =>
+  normalizeErrorMessages(
+    (receivableForm.errors as Record<string, string | string[] | undefined>)[field],
+  );
+const clearTopAlertPlaceholder = () => {
+  showAlertPlaceholder('hidden', '', null);
+};
+const clearStaleValidationErrors = (fields: string[]) => {
+  fields.forEach((field) => receivableForm.forgetError(field as any));
+  clearTopAlertPlaceholder();
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData();
+  await Promise.all([
+    loadCategoryDDL(),
+    loadCustomerDDL(),
+    loadCashAccountDDL(),
+  ]);
+});
+
+const loadData = async () => {
+  emits('loading-state', true);
+  const result = await receivableService.read(route.params.ulid.toString());
+  emits('loading-state', false);
+
+  if (!result.success || !result.data) {
+    router.push({ name: 'side-menu-receivable-list' });
+    return;
+  }
+
+  receivableData.value = result.data;
+
+  receivableForm.setData({
+    company_id: result.data.company?.id ?? '',
+    branch_id: result.data.branch?.id ?? '',
+    code: result.data.code,
+    date: formatDate(result.data.date, 'YYYY-MM-DD HH:mm:ss'),
+    category_id: result.data.category?.id ?? '',
+    customer_id: result.data.customer?.id ?? '',
+    cash_account_id: result.data.cash_account?.id ?? '',
+    direct_amount_received: result.data.direct_amount_received,
+    opening_amount_due: result.data.opening_amount_due,
+    due_days: result.data.due_days,
+    remarks: result.data.remarks ?? '',
+    delete_payment_ids: [],
+    payments: (result.data.payments ?? []).map((payment: ReceivablePayment) => ({
+      id: payment.id,
+      code: payment.code,
+      date: formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss'),
+      cash_account_id: payment.cash_account?.id ?? '',
+      amount: payment.amount,
+      remarks: payment.remarks ?? '',
+    })),
+  } as any);
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await receivableCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: receivableData.value?.category?.id,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: ReceivableCategory) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCustomerDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await customerService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: receivableData.value?.customer?.id ?? undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    customerDDL.value = result.data.data.map((item: Customer) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const loadCashAccountDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await cashAccountService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    is_bank: null,
+    search,
+    include_id: receivableData.value?.cash_account?.id ?? undefined,
+    with_remaining_balance: null,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    cashAccountDDL.value = result.data.data.map((item: CashAccount) => ({
+      code: item.id,
+      name: item.code ? `${item.code} - ${item.name}` : item.name,
+    }));
+  }
+};
+
+const handleExpandCard = (index: number) => {
+  cards.value[index].state =
+    cards.value[index].state === CardState.Collapsed ? CardState.Expanded : CardState.Collapsed;
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const setCode = () => {
+  receivableForm.forgetError('code');
+  receivableForm.setData({
+    code: receivableForm.code === '_AUTO_' ? '' : '_AUTO_',
+  });
+};
+
+const clearCategory = () => {
+  receivableForm.setData({ category_id: '' });
+  clearStaleValidationErrors(['category_id', 'form']);
+};
+
+const clearCashAccount = () => {
+  receivableForm.setData({ cash_account_id: '' });
+  receivableForm.forgetError('cash_account_id');
+};
+
+const clearCustomer = () => {
+  receivableForm.setData({ customer_id: '' });
+  clearStaleValidationErrors(['customer_id', 'form']);
+};
+
+const setPaymentCode = (index: number) => {
+  receivableForm.forgetError(`payments.${index}.code` as any);
+  receivablePaymentsForm.value[index].code =
+    receivablePaymentsForm.value[index].code === '_AUTO_' ? '' : '_AUTO_';
+};
+
+const clearPaymentCashAccount = (index: number) => {
+  const payment = receivablePaymentsForm.value[index];
+  if (!payment) return;
+
+  payment.cash_account_id = '';
+  validateReceivableField(`payments.${index}.cash_account_id`);
+};
+
+const addPayment = () => {
+  receivablePaymentsForm.value.push({
+    id: null,
+    code: '_AUTO_',
+    date: '_AUTO_',
+    cash_account_id: '',
+    amount: 0,
+    remarks: '',
+  });
+
+  Object.keys(receivableForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      receivableForm.forgetError(key as any);
+    }
+  });
+};
+
+const removePayment = (index: number) => {
+  const payment = receivablePaymentsForm.value[index];
+
+  if (payment?.id && !receivableForm.delete_payment_ids.includes(payment.id)) {
+    receivableForm.delete_payment_ids.push(payment.id);
+  }
+
+  receivablePaymentsForm.value.splice(index, 1);
+
+  Object.keys(receivableForm.errors).forEach((key) => {
+    if (key === 'payments' || key.startsWith('payments.')) {
+      receivableForm.forgetError(key as any);
+    }
+  });
+};
+
+const onSubmit = async () => {
+  emits('loading-state', true);
+
+  await receivableForm
+    .submit()
+    .then(() => {
+      showAlertPlaceholder('hidden', '', null);
+      emits('update-profile');
+      router.push({ name: 'side-menu-receivable-list' });
+    })
+    .catch((error) => {
+      showAlertPlaceholder('danger', '', convertErrorTypeToAlertListType(error));
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  receivableForm.reset();
+  receivableForm.setErrors({});
+  categorySearch.value = '';
+  customerSearch.value = '';
+  cashAccountSearch.value = '';
+  paymentCashAccountSearch.value = '';
+  await loadData();
+  await Promise.all([
+    loadCategoryDDL(),
+    loadCustomerDDL(),
+    loadCashAccountDDL(),
+  ]);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  () => receivableForm.category_id,
+  () => {
+    clearStaleValidationErrors(['category_id']);
+  },
+);
+
+watch(
+  () => [receivableForm.direct_amount_received, receivableForm.opening_amount_due],
+  () => {
+    clearStaleValidationErrors(['form']);
+  },
+);
+
+watch(
+  () => receivableForm.customer_id,
+  () => {
+    clearStaleValidationErrors(['customer_id', 'form']);
+  },
+);
+</script>
+
+<template>
+  <form id="receivableForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInputCurrency type="hidden" v-model="receivableForm.company_id" />
+            </div>
+            <div class="col-span-12 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="receivableForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('code') }">
+                {{ t('views.receivable.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="receivableForm.code"
+                :class="{ 'border-danger': receivableForm.invalid('code') }"
+                :placeholder="t('views.receivable.fields.code')"
+                @set-auto="setCode"
+                @change="receivableForm.validate('code')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-3">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('date') }">
+                {{ t('views.receivable.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                id="date"
+                v-model="receivableForm.date"
+                :class="{ 'border-danger': receivableForm.invalid('date') }"
+                :placeholder="t('views.receivable.fields.date')"
+                @change="receivableForm.validate('date')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.date" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('category_id') }">
+                {{ t('views.receivable.fields.category') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="receivableForm.category_id"
+                v-model:search="categorySearch"
+                :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': receivableForm.invalid('category_id') }"
+                @change="receivableForm.validate('category_id')"
+                @search="loadCategoryDDL"
+                @clear="clearCategory"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.category_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-8">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('customer_id') }">
+                {{ t('views.receivable.fields.customer') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="receivableForm.customer_id"
+                v-model:search="customerSearch"
+                :options="customerOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': receivableForm.invalid('customer_id') }"
+                @change="receivableForm.validate('customer_id')"
+                @search="loadCustomerDDL"
+                @clear="clearCustomer"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.customer_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('cash_account_id') }">
+                {{ t('views.receivable.fields.cash_account') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="receivableForm.cash_account_id"
+                v-model:search="cashAccountSearch"
+                :options="cashAccountOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': receivableForm.invalid('cash_account_id') }"
+                @change="receivableForm.validate('cash_account_id')"
+                @search="loadCashAccountDDL"
+                @clear="clearCashAccount"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.cash_account_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('direct_amount_received') }">
+                {{ t('views.receivable.fields.direct_amount_received') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="direct_amount_received"
+                v-model="receivableForm.direct_amount_received"
+                :allow-negative="false"
+                :class="{ 'border-danger': receivableForm.invalid('direct_amount_received') }"
+                :placeholder="t('views.receivable.fields.direct_amount_received')"
+                @change="receivableForm.validate('direct_amount_received')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.direct_amount_received" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('opening_amount_due') }">
+                {{ t('views.receivable.fields.opening_amount_due') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="opening_amount_due"
+                v-model="receivableForm.opening_amount_due"
+                :allow-negative="false"
+                :class="{ 'border-danger': receivableForm.invalid('opening_amount_due') }"
+                :placeholder="t('views.receivable.fields.opening_amount_due')"
+                @change="receivableForm.validate('opening_amount_due')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.opening_amount_due" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('due_days') }">
+                {{ t('views.receivable.fields.due_days') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="due_days"
+                v-model="receivableForm.due_days"
+                :allow-negative="false"
+                :class="{ 'border-danger': receivableForm.invalid('due_days') }"
+                :placeholder="t('views.receivable.fields.due_days')"
+                @change="receivableForm.validate('due_days')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.due_days" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.receivable.fields.amount_total') }}</FormLabel>
+              <FormInputCurrency :model-value="amountTotalPreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.receivable.fields.amount_due') }}</FormLabel>
+              <FormInputCurrency :model-value="amountDuePreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.receivable.fields.amount_paid_by_cash_account') }}</FormLabel>
+              <FormInputCurrency :model-value="amountPaidByCashAccountPreview" readonly :allow-negative="false" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-2">
+              <FormLabel>{{ t('views.receivable.fields.amount_paid_by_stock_adjustment') }}</FormLabel>
+              <FormInputCurrency
+                :model-value="amountPaidByStockAdjustmentPreview"
+                readonly
+                :allow-negative="false"
+              />
+            </div>
+
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': receivableForm.invalid('remarks') }">
+                {{ t('views.receivable.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="receivableForm.remarks"
+                rows="3"
+                :class="{ 'border-danger': receivableForm.invalid('remarks') }"
+                :placeholder="t('views.receivable.fields.remarks')"
+                @change="receivableForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="receivableForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5 space-y-4">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.receivable.fields.amount_total') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountTotalPreview) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.receivable.fields.amount_paid_by_cash_account') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountPaidByCashAccountPreview) }}
+              </div>
+            </div>
+            <div class="col-span-12 md:col-span-4">
+              <FormLabel>{{ t('views.receivable.fields.amount_due') }}</FormLabel>
+              <div class="rounded-md border border-slate-200 px-3 py-2 text-right text-sm font-medium dark:border-darkmode-400">
+                {{ formatCurrency(amountDuePreview) }}
+              </div>
+            </div>
+          </div>
+
+          <FormErrorMessages :messages="(receivableForm.errors as any).payments" />
+          <FormErrorMessages :messages="(receivableForm.errors as any).delete_payment_ids" />
+
+          <div v-if="receivablePaymentsForm.length === 0" class="text-right text-sm text-slate-500">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-4">
+            <div
+              v-for="(payment, index) in receivablePaymentsForm"
+              :key="payment.id ?? `receivable-payment-${index}`"
+              class="rounded-md border border-slate-200 p-4 dark:border-darkmode-400"
+            >
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 md:col-span-4 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.code`) }">
+                    {{ t('views.receivable.fields.payment_code') }}
+                  </FormLabel>
+                  <FormInputCode
+                    :id="`payments.${index}.code`"
+                    v-model="payment.code"
+                    :class="{ 'border-danger': invalidReceivableField(`payments.${index}.code`) }"
+                    :placeholder="t('views.receivable.fields.payment_code')"
+                    @set-auto="setPaymentCode(index)"
+                    @change="validateReceivableField(`payments.${index}.code`)"
+                  />
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.code`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.date`) }">
+                    {{ t('views.receivable.fields.payment_date') }}
+                  </FormLabel>
+                  <FormInputDateTimeAuto
+                    :id="`payments.${index}.date`"
+                    v-model="payment.date"
+                    :class="{ 'border-danger': invalidReceivableField(`payments.${index}.date`) }"
+                    :placeholder="t('views.receivable.fields.payment_date')"
+                    @change="validateReceivableField(`payments.${index}.date`)"
+                  />
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.date`)" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.cash_account_id`) }">
+                    {{ t('views.receivable.fields.payment_cash_account') }}
+                  </FormLabel>
+                  <FormSelectSearch
+                    :id="`payments.${index}.cash_account_id`"
+                    v-model="payment.cash_account_id"
+                    v-model:search="paymentCashAccountSearch"
+                    :options="cashAccountOptions"
+                    :placeholder="t('components.dropdown.placeholder')"
+                    :class="{ 'border-danger': invalidReceivableField(`payments.${index}.cash_account_id`) }"
+                    @change="validateReceivableField(`payments.${index}.cash_account_id`)"
+                    @search="loadCashAccountDDL"
+                    @clear="clearPaymentCashAccount(index)"
+                  />
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.cash_account_id`)" />
+                </div>
+
+                <div class="col-span-12 md:col-span-8 lg:col-span-3">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.amount`) }">
+                    {{ t('views.receivable.fields.payment_amount') }}
+                  </FormLabel>
+                  <div class="flex items-start gap-2">
+                    <div class="min-w-0 flex-1">
+                      <FormInputCurrency
+                        :id="`payments.${index}.amount`"
+                        v-model="payment.amount"
+                        :allow-negative="false"
+                        :class="{ 'border-danger': invalidReceivableField(`payments.${index}.amount`) }"
+                        @change="validateReceivableField(`payments.${index}.amount`)"
+                      />
+                    </div>
+                    <div class="shrink-0">
+                      <Button
+                        type="button"
+                        variant="outline-secondary"
+                        class="flex h-[38px] w-[38px] min-w-0 items-center justify-center"
+                        @click="removePayment(index)"
+                      >
+                        <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.amount`)" />
+                </div>
+
+                <div class="col-span-12">
+                  <FormLabel :class="{ 'text-danger': invalidReceivableField(`payments.${index}.remarks`) }">
+                    {{ t('views.receivable.fields.payment_remarks') }}
+                  </FormLabel>
+                  <FormTextarea
+                    :id="`payments.${index}.remarks`"
+                    v-model="payment.remarks"
+                    rows="2"
+                    :class="{ 'border-danger': invalidReceivableField(`payments.${index}.remarks`) }"
+                    :placeholder="t('views.receivable.fields.payment_remarks')"
+                    @change="validateReceivableField(`payments.${index}.remarks`)"
+                  />
+                  <FormErrorMessages :messages="getReceivableFieldErrors(`payments.${index}.remarks`)" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button type="button" variant="outline-primary" @click="addPayment">
+              <Lucide icon="Plus" class="mr-1 h-4 w-4" />
+              {{ t('components.buttons.create_new') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="receivableForm.validating"
+          >
+            <Lucide v-if="receivableForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
+
diff --git a/web/src/pages/receivable/ReceivableIndex.vue b/web/src/pages/receivable/ReceivableIndex.vue
new file mode 100644
index 000000000..c107586d8
--- /dev/null
+++ b/web/src/pages/receivable/ReceivableIndex.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import CacheService from '@/services/CacheService';
+import ProfileService from '@/services/ProfileService';
+import { useUserContextStore } from '@/stores/user-context';
+import type { UserProfile } from '@/types/models/UserProfile';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+const userContextStore = useUserContextStore();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.receivable.page_title');
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const receivableNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[receivableNotification]', (el: NotificationElement) => {
+  receivableNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-receivable-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-receivable-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.receivable.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.receivable.actions.edit';
+      break;
+    default:
+      titleView.value = 'views.receivable.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+  receivableNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('RECEIVABLE_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('RECEIVABLE_EDIT');
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>{{ t(titleView) }}</template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button
+              v-if="mode == ViewMode.LIST"
+              as="a"
+              href="#"
+              variant="primary"
+              class="shadow-md"
+              @click="createNew"
+            >
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList" @dismiss="resetAlertPlaceholder" />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="receivableNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">{{ notificationContent }}</div>
+      </div>
+    </Notification>
+  </div>
+</template>
+
diff --git a/web/src/pages/receivable/ReceivableList.vue b/web/src/pages/receivable/ReceivableList.vue
new file mode 100644
index 000000000..284bb44f4
--- /dev/null
+++ b/web/src/pages/receivable/ReceivableList.vue
@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Dialog } from '@/components/Base/Headless';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import ReceivableService from '@/services/ReceivableService';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { ViewMode } from '@/types/enums/ViewMode';
+import type { Receivable } from '@/types/models/Receivable';
+import type { ReceivablePayment } from '@/types/models/ReceivablePayment';
+import type { NotificationData } from '@/types/models/NotificationData';
+import type { Collection } from '@/types/resources/Collection';
+import type { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import type { ReceivableReadAnyPaginateRequest } from '@/types/services/receivable/ReceivableRequest';
+import type { ServiceResponse } from '@/types/services/ServiceResponse';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency, formatDate } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const receivableService = new ReceivableService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<string | null>(null);
+const receivableLists = ref<Collection<Array<Receivable>> | null>({
+  data: [],
+  meta: { current_page: 0, from: null, last_page: 0, path: '', per_page: 0, to: null, total: 0 },
+  links: { first: '', last: '', prev: null, next: null },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({ name: 'side-menu-error-code', params: { code: ErrorCode.USERLOCATION_REQUIRED } });
+    return;
+  }
+
+  await getReceivables('', true, 1, 10);
+});
+
+const getReceivables = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const searchReq: ReceivableReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    category_id: null,
+    customer_id: null,
+    is_paid_off: null,
+    include_id: undefined,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<Receivable>> | null> =
+    await receivableService.readAnyPaginate(searchReq);
+
+  if (result.success && result.data) {
+    receivableLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getReceivables(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const editSelected = (idx: number) => {
+  if (!receivableLists.value) return;
+
+  router.push({
+    name: 'side-menu-receivable-edit',
+    params: { ulid: receivableLists.value.data[idx].ulid },
+  });
+};
+
+const viewSelected = (idx: number) => {
+  if (!receivableLists.value) return;
+
+  const receivable = receivableLists.value.data[idx];
+  expandDetail.value = expandDetail.value === receivable.ulid ? null : receivable.ulid;
+};
+
+const deleteSelected = (idx: number) => {
+  if (!receivableLists.value) return;
+
+  deleteUlid.value = receivableLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await receivableService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getReceivables('', true, 1, 10);
+    showNotification(
+      t('views.receivable.alert.delete_receivable.title'),
+      t('views.receivable.alert.delete_receivable.content'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = { title: pTitle, content: pContent };
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = { alertType: pAlertType, title: pTitle, alertList: pAlertList };
+  emits('show-alertplaceholder', ap);
+};
+
+const getCategoryLabel = (receivable: Receivable) => receivable.category?.name ?? '-';
+
+const getCustomerLabel = (receivable: Receivable) => {
+  if (!receivable.customer) return '-';
+
+  return receivable.customer.code
+    ? `${receivable.customer.code} - ${receivable.customer.name}`
+    : receivable.customer.name;
+};
+
+const getCashAccountLabel = (receivable: Receivable) => {
+  if (!receivable.cash_account) return '-';
+
+  return receivable.cash_account.code
+    ? `${receivable.cash_account.code} - ${receivable.cash_account.name}`
+    : receivable.cash_account.name;
+};
+
+const getPaidOffLabel = (receivable: Receivable) =>
+  receivable.is_paid_off ? t('views.receivable.status.paid_off') : t('views.receivable.status.not_paid_off');
+
+const getReceivablePayments = (receivable: Receivable) => receivable.payments ?? [];
+
+const getPaymentCashAccountLabel = (payment: ReceivablePayment) => {
+  if (!payment.cash_account) return '-';
+
+  return payment.cash_account.code
+    ? `${payment.cash_account.code} - ${payment.cash_account.name}`
+    : payment.cash_account.name;
+};
+</script>
+
+<template>
+  <div class="mt-5 grid grid-cols-12 gap-6">
+    <div class="col-span-12">
+      <DataListFlex
+        :data="receivableLists"
+        :title="t('views.receivable.table.title')"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="receivableLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="receivableLists ? receivableLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 self-start md:col-span-6 lg:col-span-5">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.receivable.page_title') }}
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-4 text-slate-500">{{ t('views.receivable.fields.code') }}</div>
+                <div class="col-span-8 break-words font-medium text-slate-700 dark:text-slate-200">
+                  {{ (item as Receivable).code }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.receivable.fields.date') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ formatDate((item as Receivable).date, 'YYYY-MM-DD HH:mm:ss') }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.receivable.fields.category') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCategoryLabel(item as Receivable) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.receivable.fields.customer') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCustomerLabel(item as Receivable) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.receivable.fields.cash_account') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ getCashAccountLabel(item as Receivable) }}
+                </div>
+                <div class="col-span-4 text-slate-500">{{ t('views.receivable.fields.remarks') }}</div>
+                <div class="col-span-8 break-words text-slate-700 dark:text-slate-200">
+                  {{ (item as Receivable).remarks?.trim() || '-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 self-start md:col-span-6 lg:col-span-5 lg:pr-4">
+            <div class="space-y-2">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                {{ t('views.receivable.field_groups.balance_summary') }}
+              </div>
+              <div class="grid grid-cols-12 items-start gap-x-3 gap-y-2 text-xs">
+                <div class="col-span-7 text-slate-500">{{ t('views.receivable.fields.direct_amount_received') }}</div>
+                <div class="col-span-5 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Receivable).direct_amount_received ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.receivable.fields.opening_amount_due') }}</div>
+                <div class="col-span-5 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Receivable).opening_amount_due ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.receivable.fields.amount_total') }}</div>
+                <div class="col-span-5 text-right font-semibold text-primary">
+                  {{ formatCurrency(Number((item as Receivable).amount_total ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.receivable.fields.amount_paid_by_cash_account') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Receivable).amount_paid_by_cash_account ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.receivable.fields.amount_paid_by_stock_adjustment') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Receivable).amount_paid_by_stock_adjustment ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.receivable.fields.amount_due') }}</div>
+                <div class="col-span-5 text-right font-semibold text-slate-700 dark:text-slate-200">
+                  {{ formatCurrency(Number((item as Receivable).amount_due ?? 0)) }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.receivable.fields.due_days') }}</div>
+                <div class="col-span-5 text-right text-slate-700 dark:text-slate-200">
+                  {{ (item as Receivable).due_days ?? 0 }}
+                </div>
+                <div class="col-span-7 text-slate-500">{{ t('views.receivable.fields.is_paid_off') }}</div>
+                <div class="col-span-5 text-right">
+                  <span
+                    class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium"
+                    :class="
+                      (item as Receivable).is_paid_off
+                        ? 'bg-success/20 text-success'
+                        : 'bg-warning/20 text-warning'
+                    "
+                  >
+                    {{ getPaidOffLabel(item as Receivable) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-span-12 self-center md:col-span-6 lg:col-span-2">
+            <div class="flex justify-end gap-2 md:justify-start lg:min-h-full lg:items-center lg:justify-center">
+              <Button
+                size="sm"
+                variant="outline-secondary"
+                class="flex h-9 w-9 items-center justify-center"
+                @click="viewSelected(index)"
+              >
+                <Lucide icon="Info" class="h-4 w-4" />
+              </Button>
+              <Button
+                size="sm"
+                variant="outline-secondary"
+                class="flex h-9 w-9 items-center justify-center"
+                @click="editSelected(index)"
+              >
+                <Lucide icon="Pen" class="h-4 w-4" />
+              </Button>
+              <Button
+                size="sm"
+                variant="outline-secondary"
+                class="flex h-9 w-9 items-center justify-center"
+                @click="deleteSelected(index)"
+              >
+                <Lucide icon="Trash2" class="h-4 w-4 text-danger" />
+              </Button>
+            </div>
+          </div>
+
+          <div
+            v-if="expandDetail === (item as Receivable).ulid"
+            class="col-span-12 mt-2 border-t border-slate-200 pt-3 dark:border-darkmode-400"
+          >
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12 space-y-3">
+                <div class="text-primary text-xs font-semibold uppercase tracking-wide">
+                  {{ t('views.receivable.field_groups.payments') }}
+                </div>
+
+                <div v-if="!getReceivablePayments(item as Receivable).length" class="text-xs text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+
+                <div v-else class="space-y-3 rounded-md border border-slate-200/60 p-3 dark:border-darkmode-400">
+                  <div
+                    v-for="payment in getReceivablePayments(item as Receivable)"
+                    :key="payment.ulid"
+                    class="border-b border-slate-200/60 pb-3 text-sm last:border-b-0 last:pb-0 dark:border-darkmode-400"
+                  >
+                    <div class="font-medium break-words text-slate-700 dark:text-slate-200">
+                      {{ payment.code }}
+                    </div>
+                    <div class="mt-1 break-words text-xs text-slate-500">
+                      {{ formatDate(payment.date, 'YYYY-MM-DD HH:mm:ss') }}
+                    </div>
+                    <div class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-600 dark:text-slate-300">
+                      <span>
+                        {{ t('views.receivable.fields.payment_cash_account') }}
+                        <span class="text-slate-700 dark:text-slate-200">
+                          {{ getPaymentCashAccountLabel(payment) }}
+                        </span>
+                      </span>
+                      <span class="text-slate-400">|</span>
+                      <span>
+                        {{ t('views.receivable.fields.payment_amount') }}
+                        <span class="font-medium text-slate-700 dark:text-slate-200">
+                          {{ formatCurrency(Number(payment.amount ?? 0)) }}
+                        </span>
+                      </span>
+                    </div>
+                    <div v-if="payment.remarks?.trim()" class="mt-2 break-words text-xs text-slate-500">
+                      {{ payment.remarks }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="mx-auto mt-3 h-16 w-16 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button variant="outline-secondary" type="button" class="mr-1 w-24" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button variant="danger" type="button" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
+
diff --git a/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryCreate.vue b/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryCreate.vue
new file mode 100644
index 000000000..650ef1004
--- /dev/null
+++ b/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryCreate.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { isAxiosError, AxiosError } from 'axios';
+  import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { FormInput, FormLabel, FormErrorMessages, FormTextarea, FormInputCode } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+  const cacheServices = new CacheService();
+
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.stock_adjustment_category.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.stock_adjustment_category.field_groups.stock_adjustment_category_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const stockAdjustmentCategoryForm = stockAdjustmentCategoryService.useStockAdjustmentCategoryCreateForm();
+
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    loadFromCache();
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    setCompanyIdData();
+  });
+
+  const setCompanyIdData = () => {
+    stockAdjustmentCategoryForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const loadFromCache = () => {
+    const data = cacheServices.getLastEntity('STOCK_ADJUSTMENT_CATEGORY_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    stockAdjustmentCategoryForm.setData(data);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (stockAdjustmentCategoryForm.hasErrors) {
+      scrollToError(Object.keys(stockAdjustmentCategoryForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await stockAdjustmentCategoryForm
+      .submit()
+      .then(() => {
+        resetForm();
+        showAlertPlaceholder('hidden', '', null);
+        emits('update-profile');
+        router.push({ name: 'side-menu-stock-adjustment-category-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    stockAdjustmentCategoryForm.reset();
+    stockAdjustmentCategoryForm.setErrors({});
+  };
+
+  const setCode = () => {
+    stockAdjustmentCategoryForm.forgetError('code');
+    if (stockAdjustmentCategoryForm.code == '_AUTO_') {
+      stockAdjustmentCategoryForm.setData({ code: '' });
+    } else {
+      stockAdjustmentCategoryForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    const ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  watch(
+    stockAdjustmentCategoryForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('STOCK_ADJUSTMENT_CATEGORY_CREATE', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+</script>
+
+<template>
+  <form id="stockAdjustmentCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="stockAdjustmentCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel
+                :class="{
+                  'text-danger': stockAdjustmentCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.stock_adjustment_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="stockAdjustmentCategoryForm.code"
+                :class="{
+                  'border-danger': stockAdjustmentCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.stock_adjustment_category.fields.code')"
+                @set-auto="setCode"
+                @change="stockAdjustmentCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="stockAdjustmentCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel
+                :class="{
+                  'text-danger': stockAdjustmentCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.stock_adjustment_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                v-model="stockAdjustmentCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': stockAdjustmentCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.stock_adjustment_category.fields.name')"
+                @change="stockAdjustmentCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="stockAdjustmentCategoryForm.errors.name" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="stockAdjustmentCategoryForm.validating || stockAdjustmentCategoryForm.hasErrors"
+          >
+            <Lucide v-if="stockAdjustmentCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryEdit.vue b/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryEdit.vue
new file mode 100644
index 000000000..306906179
--- /dev/null
+++ b/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryEdit.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { FormInput, FormLabel, FormErrorMessages, FormInputCode } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Lucide from '@/components/Base/Lucide';
+  import { debounce } from 'lodash';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRoute, useRouter } from 'vue-router';
+  import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const route = useRoute();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+  const cacheServices = new CacheService();
+
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.stock_adjustment_category.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.stock_adjustment_category.field_groups.stock_adjustment_category_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const stockAdjustmentCategoryForm = stockAdjustmentCategoryService.useStockAdjustmentCategoryEditForm(
+    route.params.ulid.toString(),
+  );
+
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await loadData();
+  });
+
+  const loadData = async () => {
+    emits('loading-state', true);
+    const result = await stockAdjustmentCategoryService.read(route.params.ulid.toString());
+    emits('loading-state', false);
+
+    if (result.success && result.data) {
+      stockAdjustmentCategoryForm.setData({
+        company_id: result.data.company?.id ?? '',
+        code: result.data.code,
+        name: result.data.name,
+      } as any);
+    } else {
+      router.push({ name: 'side-menu-stock-adjustment-category-list' });
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (stockAdjustmentCategoryForm.hasErrors) {
+      scrollToError(Object.keys(stockAdjustmentCategoryForm.errors)[0]);
+    }
+    emits('loading-state', true);
+    await stockAdjustmentCategoryForm
+      .submit()
+      .then(() => {
+        showAlertPlaceholder('hidden', '', null);
+        emits('update-profile');
+        router.push({ name: 'side-menu-stock-adjustment-category-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    stockAdjustmentCategoryForm.reset();
+    stockAdjustmentCategoryForm.setErrors({});
+    await loadData();
+  };
+
+  const setCode = () => {
+    stockAdjustmentCategoryForm.forgetError('code');
+    if (stockAdjustmentCategoryForm.code == '_AUTO_') {
+      stockAdjustmentCategoryForm.setData({ code: '' });
+    } else {
+      stockAdjustmentCategoryForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    const ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  watch(
+    stockAdjustmentCategoryForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('STOCK_ADJUSTMENT_CATEGORY_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+</script>
+
+<template>
+  <form id="stockAdjustmentCategoryForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="stockAdjustmentCategoryForm.company_id" />
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel
+                :class="{
+                  'text-danger': stockAdjustmentCategoryForm.invalid('code'),
+                }"
+              >
+                {{ t('views.stock_adjustment_category.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="stockAdjustmentCategoryForm.code"
+                :class="{
+                  'border-danger': stockAdjustmentCategoryForm.invalid('code'),
+                }"
+                :placeholder="t('views.stock_adjustment_category.fields.code')"
+                @set-auto="setCode"
+                @change="stockAdjustmentCategoryForm.validate('code')"
+              />
+              <FormErrorMessages :messages="stockAdjustmentCategoryForm.errors.code" />
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <FormLabel
+                :class="{
+                  'text-danger': stockAdjustmentCategoryForm.invalid('name'),
+                }"
+              >
+                {{ t('views.stock_adjustment_category.fields.name') }}
+              </FormLabel>
+              <FormInput
+                v-model="stockAdjustmentCategoryForm.name"
+                type="text"
+                :class="{
+                  'border-danger': stockAdjustmentCategoryForm.invalid('name'),
+                }"
+                :placeholder="t('views.stock_adjustment_category.fields.name')"
+                @change="stockAdjustmentCategoryForm.validate('name')"
+              />
+              <FormErrorMessages :messages="stockAdjustmentCategoryForm.errors.name" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="stockAdjustmentCategoryForm.validating || stockAdjustmentCategoryForm.hasErrors"
+          >
+            <Lucide v-if="stockAdjustmentCategoryForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryIndex.vue b/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryIndex.vue
new file mode 100644
index 000000000..1759f3ecc
--- /dev/null
+++ b/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryIndex.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+  import { ref, provide } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.stock_adjustment_category.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const stockAdjustmentCategoryNotification = ref<NotificationElement>();
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+
+  provide('bind[stockAdjustmentCategoryNotification]', (el: NotificationElement) => {
+    stockAdjustmentCategoryNotification.value = el;
+  });
+
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-stock-adjustment-category-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-stock-adjustment-category-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.stock_adjustment_category.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.stock_adjustment_category.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.stock_adjustment_category.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    const userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (stockAdjustmentCategoryNotification.value) {
+      stockAdjustmentCategoryNotification.value.showToast();
+    }
+  };
+
+  const clearCache = (currentMode: ViewMode) => {
+    switch (currentMode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('STOCK_ADJUSTMENT_CATEGORY_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('STOCK_ADJUSTMENT_CATEGORY_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="stockAdjustmentCategoryNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryList.vue b/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryList.vue
new file mode 100644
index 000000000..78fee6386
--- /dev/null
+++ b/web/src/pages/stock-adjustment-category/StockAdjustmentCategoryList.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+  import { StockAdjustmentCategory } from '@/types/models/StockAdjustmentCategory';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { StockAdjustmentCategoryReadAnyPaginateRequest } from '@/types/services/stock-adjustment-category/StockAdjustmentCategoryRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const stockAdjustmentCategoryLists = ref<Collection<Array<StockAdjustmentCategory>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getStockAdjustmentCategories('', true, 1, 10);
+  });
+
+  const getStockAdjustmentCategories = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    const company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: StockAdjustmentCategoryReadAnyPaginateRequest = {
+      with_trashed: false,
+
+      company_id: company_id,
+      search: search,
+      include_id: undefined,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    const result: ServiceResponse<Collection<Array<StockAdjustmentCategory>> | null> =
+      await stockAdjustmentCategoryService.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      stockAdjustmentCategoryLists.value = result.data;
+      showAlertPlaceholder('hidden', '', null);
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const handleDataListChange = async (data: DataListEmittedData) => {
+    await getStockAdjustmentCategories(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (idx: number) => {
+    if (!stockAdjustmentCategoryLists.value) return;
+    const ulid = stockAdjustmentCategoryLists.value.data[idx].ulid;
+    emits('mode-state', ViewMode.FORM_EDIT);
+    router.push({
+      name: 'side-menu-stock-adjustment-category-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (idx: number) => {
+    if (!stockAdjustmentCategoryLists.value) return;
+    const ulid = stockAdjustmentCategoryLists.value.data[idx].ulid;
+    deleteUlid.value = ulid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    const result = await stockAdjustmentCategoryService.delete(deleteUlid.value);
+
+    emits('loading-state', false);
+
+    if (result.success) {
+      emits('update-profile');
+      await getStockAdjustmentCategories('', true, 1, 10);
+      showNotification(
+        t('views.stock_adjustment_category.alert.delete_stock_adjustment_category.title'),
+        t('views.stock_adjustment_category.alert.delete_stock_adjustment_category.content'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    const n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    const ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <DataList
+        :title="t('views.stock_adjustment_category.table.title')"
+        :data="stockAdjustmentCategoryLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :pagination="stockAdjustmentCategoryLists ? stockAdjustmentCategoryLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #content>
+          <Table class="mt-5" :hover="true">
+            <Table.Thead variant="light">
+              <Table.Tr>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.stock_adjustment_category.fields.code') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap">
+                  {{ t('views.stock_adjustment_category.fields.name') }}
+                </Table.Th>
+                <Table.Th class="whitespace-nowrap"></Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody v-if="stockAdjustmentCategoryLists !== null">
+              <template v-if="stockAdjustmentCategoryLists.data.length === 0">
+                <Table.Tr class="intro-x">
+                  <Table.Td colspan="3">
+                    <div class="flex justify-center italic">
+                      {{ t('components.data-list.data_not_found') }}
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+              </template>
+              <template v-for="(item, itemIdx) in stockAdjustmentCategoryLists.data" :key="item.ulid">
+                <Table.Tr class="intro-x">
+                  <Table.Td>
+                    <div class="font-medium whitespace-nowrap">
+                      {{ item.code }}
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="font-medium">
+                      {{ item.name }}
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <div class="flex justify-end gap-1">
+                      <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                        <Lucide icon="Info" class="w-4 h-4" />
+                      </Button>
+                      <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                        <Lucide icon="Pen" class="w-4 h-4" />
+                      </Button>
+                      <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+                <Table.Tr
+                  :class="{
+                    'intro-x': true,
+                    'hidden transition-all': expandDetail !== itemIdx,
+                  }"
+                >
+                  <Table.Td colspan="3" class="p-5">
+                    <div class="grid grid-cols-12 gap-6">
+                      <div class="col-span-12">
+                        <div class="font-medium text-base mb-3 border-b pb-2">
+                          {{ t('views.stock_adjustment_category.page_title') }}
+                        </div>
+                        <div class="grid grid-cols-1 gap-y-2">
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.stock_adjustment_category.fields.code') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.code }}
+                            </div>
+                          </div>
+                          <div class="flex flex-row">
+                            <div class="w-48 text-slate-500">
+                              {{ t('views.stock_adjustment_category.fields.name') }}
+                            </div>
+                            <div class="flex-1 font-medium">
+                              {{ item.name }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Table.Td>
+                </Table.Tr>
+              </template>
+            </Table.Tbody>
+          </Table>
+        </template>
+      </DataList>
+    </div>
+  </div>
+  <Dialog
+    :open="deleteModalShow"
+    @close="
+      () => {
+        deleteModalShow = false;
+      }
+    "
+  >
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">
+          {{ t('components.delete-modal.title') }}
+        </div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button
+          type="button"
+          variant="outline-secondary"
+          @click="
+            () => {
+              deleteModalShow = false;
+            }
+          "
+          class="w-24 mr-1"
+        >
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentCreate.vue b/web/src/pages/stock-adjustment/StockAdjustmentCreate.vue
new file mode 100644
index 000000000..07417062d
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentCreate.vue
@@ -0,0 +1,1555 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, ref, onMounted, nextTick, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormTextarea,
+  FormSelectSearch,
+  FormSwitch,
+} from '@/components/Base/Form';
+import WarehouseService from '@/services/WarehouseService';
+import ProductService from '@/services/ProductService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import { formatDate, formatCurrency, convertErrorTypeToAlertListType } from '@/utils/helper';
+import StockAdjustmentService from '@/services/StockAdjustmentService';
+import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+import CacheService from '@/services/CacheService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import {
+  type StockAdjustmentInItemNestedStoreRequest,
+  type StockAdjustmentOutItemNestedStoreRequest,
+} from '@/types/services/stock-adjustment/StockAdjustmentRequest';
+import { debounce } from 'lodash';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+type StockAdjustmentInItemFormItem = {
+  qty: StockAdjustmentInItemNestedStoreRequest['qty'];
+  product_unit_id: StockAdjustmentInItemNestedStoreRequest['product_unit_id'];
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  product_unit_conversion_value: StockAdjustmentInItemNestedStoreRequest['product_unit_conversion_value'];
+  product_unit_cogs: StockAdjustmentInItemNestedStoreRequest['product_unit_cogs'];
+  product_unit_total_cogs?: number | null;
+  remarks: StockAdjustmentInItemNestedStoreRequest['remarks'];
+  is_use_serial_number?: boolean;
+  serials: { serial: string }[];
+};
+
+type StockAdjustmentOutItemFormItem = {
+  qty: StockAdjustmentOutItemNestedStoreRequest['qty'];
+  product_unit_id: StockAdjustmentOutItemNestedStoreRequest['product_unit_id'];
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  product_unit_conversion_value: StockAdjustmentOutItemNestedStoreRequest['product_unit_conversion_value'];
+  remarks: StockAdjustmentOutItemNestedStoreRequest['remarks'];
+  is_use_serial_number?: boolean;
+  serials: { serial: string }[];
+};
+
+type ProductUnitOption = {
+  product_id: string;
+  product_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  product_unit_id: string;
+  product_unit_code: string;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  cogs: number;
+  remaining_stock: number;
+  is_use_serial_number: boolean;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const stockAdjustmentService = new StockAdjustmentService();
+const stockAdjustmentForm = stockAdjustmentService.useStockAdjustmentCreateForm();
+const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+const warehouseService = new WarehouseService();
+const productService = new ProductService();
+const cacheServices = new CacheService();
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const inWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const inWarehouseSearch = ref<string>('');
+const inWarehouseOptions = computed(() =>
+  (inWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+const outWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const outWarehouseSearch = ref<string>('');
+const outWarehouseOptions = computed(() =>
+  (outWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showInProductUnitModal = ref<boolean>(false);
+const productSearchTextIn = ref<string>('');
+const isSearchingInProductUnit = ref<boolean>(false);
+const productUnitOptionsIn = ref<Array<ProductUnitOption>>([]);
+const editingInProductIndex = ref<number | null>(null);
+const inItemQtyToFocus = ref<number | null>(null);
+const inItemsRemarksExpanded = ref<boolean[]>([]);
+const inItemsForm = computed<StockAdjustmentInItemFormItem[]>(
+  () => stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[],
+);
+
+const showOutProductUnitModal = ref<boolean>(false);
+const productSearchTextOut = ref<string>('');
+const isSearchingOutProductUnit = ref<boolean>(false);
+const productUnitOptionsOut = ref<Array<ProductUnitOption>>([]);
+const editingOutProductIndex = ref<number | null>(null);
+const outItemQtyToFocus = ref<number | null>(null);
+const outItemsRemarksExpanded = ref<boolean[]>([]);
+const outItemsForm = computed<StockAdjustmentOutItemFormItem[]>(
+  () => stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[],
+);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.stock_adjustment.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.stock_adjustment.field_groups.stock_adjustment_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.stock_adjustment.field_groups.in_items',
+    state: CardState.Collapsed,
+  },
+  {
+    title: 'views.stock_adjustment.field_groups.out_items',
+    state: CardState.Collapsed,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+// #endregion
+
+const getProductMainImageUrl = (product: any): string | null => {
+  const images: any[] = product?.product_images ?? [];
+  if (images.length === 0) return null;
+
+  const mainImage = images.find((img: any) => img?.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  return images[0]?.url ?? null;
+};
+
+// #region Vue Core
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  () => stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[],
+  (items: StockAdjustmentInItemFormItem[]) => {
+    if (!items) return;
+    items.forEach((item: StockAdjustmentInItemFormItem) => {
+      const qty = Number(item.qty ?? 0);
+      const cogs = Number(item.product_unit_cogs ?? 0);
+      item.product_unit_total_cogs = qty * cogs;
+    });
+  },
+  { deep: true },
+);
+
+watch(showInProductUnitModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('product-unit-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(showOutProductUnitModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('product-unit-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(
+  stockAdjustmentForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('STOCK_ADJUSTMENT_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(() => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+
+  stockAdjustmentForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  loadCategoryDDL();
+  loadInWarehouseDDL();
+  loadOutWarehouseDDL();
+});
+// #endregion
+
+// #region Methods - Stock Adjustment
+const setCode = () => {
+  stockAdjustmentForm.forgetError('code');
+  if (stockAdjustmentForm.code === '_AUTO_') {
+    stockAdjustmentForm.setData({ code: '' });
+  } else {
+    stockAdjustmentForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const loadInWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    inWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadOutWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    outWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await stockAdjustmentCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearInWarehouse = () => {
+  stockAdjustmentForm.setData({ in_warehouse_id: '' });
+  stockAdjustmentForm.forgetError('in_warehouse_id');
+  stockAdjustmentForm.validate('in_warehouse_id');
+};
+
+const clearOutWarehouse = () => {
+  stockAdjustmentForm.setData({ out_warehouse_id: '' });
+  stockAdjustmentForm.forgetError('out_warehouse_id');
+  stockAdjustmentForm.validate('out_warehouse_id');
+};
+
+const clearCategory = () => {
+  stockAdjustmentForm.setData({ category_id: '' });
+  stockAdjustmentForm.forgetError('category_id');
+  stockAdjustmentForm.validate('category_id');
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('STOCK_ADJUSTMENT_CREATE') as Record<string, unknown>;
+  if (!data) return;
+  stockAdjustmentForm.setData(data);
+};
+// #endregion
+
+// #region Methods - In Items
+const addInProduct = () => {
+  productSearchTextIn.value = '';
+  productUnitOptionsIn.value = [];
+  isSearchingInProductUnit.value = false;
+  editingInProductIndex.value = null;
+  showInProductUnitModal.value = true;
+};
+
+const changeInProductProductUnit = (index: number) => {
+  productSearchTextIn.value = '';
+  productUnitOptionsIn.value = [];
+  isSearchingInProductUnit.value = false;
+  editingInProductIndex.value = index;
+  showInProductUnitModal.value = true;
+};
+
+const searchInProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  if (!stockAdjustmentForm.in_warehouse_id) {
+    stockAdjustmentForm.validate('in_warehouse_id');
+    return;
+  }
+
+  if (!stockAdjustmentForm.date) {
+    stockAdjustmentForm.validate('date');
+    return;
+  }
+
+  isSearchingInProductUnit.value = true;
+
+  let endDate: string;
+  if (stockAdjustmentForm.date === '_AUTO_') {
+    endDate = formatDate(new Date().toString(), 'YYYY-MM-DD HH:mm:ss');
+  } else {
+    endDate = stockAdjustmentForm.date as string;
+  }
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchTextIn.value,
+    category_id: undefined,
+    brand_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: {
+      end_date: endDate,
+      warehouse_id: stockAdjustmentForm.in_warehouse_id as string,
+      include_service_products: false,
+    },
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingInProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptionsIn.value = products.flatMap((p: any) => {
+      const units: any[] = p.product_units || [];
+      const remainingStockBaseUnit = Number(p.remaining_stock_base_unit ?? 0);
+
+      let baseUnit = units.find((u: any) => u.is_base);
+      if (!baseUnit) baseUnit = units.find((u: any) => Number(u.conversion_value) === 1);
+      if (!baseUnit) baseUnit = units.find((u: any) => u.is_primary_unit);
+      if (!baseUnit && units.length > 0) baseUnit = units[0];
+      const baseUnitName = baseUnit && baseUnit.unit ? baseUnit.unit.name : '';
+
+      return units.map((u: any) => {
+        const conversionValue = Number(u.conversion_value) || 1;
+        const remainingStock = remainingStockBaseUnit / conversionValue;
+
+        return {
+          product_id: p.id,
+          product_code: p.code,
+          product_name: p.name,
+          product_image_url: getProductMainImageUrl(p),
+          product_unit_id: u.id,
+          product_unit_code: u.code,
+          unit_name: u.unit ? u.unit.name : '',
+          base_unit_name: baseUnitName,
+          conversion_value: conversionValue,
+          cogs: Number(u.price),
+          remaining_stock: remainingStock,
+          is_use_serial_number: p.is_use_serial_number,
+        };
+      });
+    });
+  } else {
+    productUnitOptionsIn.value = [];
+  }
+};
+
+const selectProductUnitForIn = (option: ProductUnitOption) => {
+  const baseData: Partial<StockAdjustmentInItemFormItem> = {
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.conversion_value != 1 ? option.base_unit_name : '',
+    product_unit_conversion_value: option.conversion_value,
+    product_unit_cogs: option.cogs,
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingInProductIndex.value === null) {
+    const item: StockAdjustmentInItemFormItem = {
+      qty: 0,
+      remarks: '',
+      ...baseData,
+    } as StockAdjustmentInItemFormItem;
+
+    stockAdjustmentForm.in_items.push(item);
+    inItemsRemarksExpanded.value.push(false);
+    targetIndex = stockAdjustmentForm.in_items.length - 1;
+  } else {
+    const index = editingInProductIndex.value;
+    const current = stockAdjustmentForm.in_items[index] as StockAdjustmentInItemFormItem;
+    stockAdjustmentForm.in_items[index] = {
+      ...current,
+      ...baseData,
+    };
+    targetIndex = index;
+  }
+
+  showInProductUnitModal.value = false;
+  editingInProductIndex.value = null;
+  inItemQtyToFocus.value = targetIndex;
+};
+
+const toggleInProductRemarks = (index: number) => {
+  const current = inItemsRemarksExpanded.value[index] ?? false;
+  inItemsRemarksExpanded.value[index] = !current;
+};
+
+const handleInProductUnitModalAfterLeave = () => {
+  const inIndex = inItemQtyToFocus.value;
+
+  inItemQtyToFocus.value = null;
+
+  if (inIndex === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`in-product-qty-${inIndex}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addInProductSerial = (index: number) => {
+  const items = stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[];
+  const item = items[index];
+  if (!item) return;
+  item.serials.push({ serial: '' });
+  stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+};
+
+const removeInProductSerial = (index: number, serialIndex: number) => {
+  const items = stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[];
+  const item = items[index];
+  if (!item) return;
+  item.serials.splice(serialIndex, 1);
+  stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+};
+
+const removeInProduct = (index: number) => {
+  stockAdjustmentForm.in_items.splice(index, 1);
+  inItemsRemarksExpanded.value.splice(index, 1);
+};
+// #endregion
+
+// #region Methods - Out Items
+const addOutProduct = () => {
+  productSearchTextOut.value = '';
+  productUnitOptionsOut.value = [];
+  isSearchingOutProductUnit.value = false;
+  editingOutProductIndex.value = null;
+  showOutProductUnitModal.value = true;
+};
+
+const changeOutProductProductUnit = (index: number) => {
+  productSearchTextOut.value = '';
+  productUnitOptionsOut.value = [];
+  isSearchingOutProductUnit.value = false;
+  editingOutProductIndex.value = index;
+  showOutProductUnitModal.value = true;
+};
+
+const searchOutProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  if (!stockAdjustmentForm.out_warehouse_id) {
+    stockAdjustmentForm.validate('out_warehouse_id');
+    return;
+  }
+
+  if (!stockAdjustmentForm.date) {
+    stockAdjustmentForm.validate('date');
+    return;
+  }
+
+  isSearchingOutProductUnit.value = true;
+
+  let endDate: string;
+  if (stockAdjustmentForm.date === '_AUTO_') {
+    endDate = formatDate(new Date().toString(), 'YYYY-MM-DD HH:mm:ss');
+  } else {
+    endDate = stockAdjustmentForm.date as string;
+  }
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchTextOut.value,
+    category_id: undefined,
+    brand_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: {
+      end_date: endDate,
+      warehouse_id: stockAdjustmentForm.out_warehouse_id as string,
+      stock_filter: 'has_stock',
+      include_service_products: false,
+    },
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingOutProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptionsOut.value = products.flatMap((p: any) => {
+      const units: any[] = p.product_units || [];
+      const remainingStockBaseUnit = Number(p.remaining_stock_base_unit ?? 0);
+
+      let baseUnit = units.find((u: any) => u.is_base);
+      if (!baseUnit) baseUnit = units.find((u: any) => Number(u.conversion_value) === 1);
+      if (!baseUnit) baseUnit = units.find((u: any) => u.is_primary_unit);
+      if (!baseUnit && units.length > 0) baseUnit = units[0];
+      const baseUnitName = baseUnit && baseUnit.unit ? baseUnit.unit.name : '';
+
+      return units.map((u: any) => {
+        const conversionValue = Number(u.conversion_value) || 1;
+        const remainingStock = remainingStockBaseUnit / conversionValue;
+
+        return {
+          product_id: p.id,
+          product_code: p.code,
+          product_name: p.name,
+          product_image_url: getProductMainImageUrl(p),
+          product_unit_id: u.id,
+          product_unit_code: u.code,
+          unit_name: u.unit ? u.unit.name : '',
+          base_unit_name: baseUnitName,
+          conversion_value: conversionValue,
+          cogs: Number(u.price),
+          remaining_stock: remainingStock,
+          is_use_serial_number: p.is_use_serial_number,
+        };
+      });
+    });
+  } else {
+    productUnitOptionsOut.value = [];
+  }
+};
+
+const selectProductUnitForOut = (option: ProductUnitOption) => {
+  const baseData: Partial<StockAdjustmentOutItemFormItem> = {
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.conversion_value != 1 ? option.base_unit_name : '',
+    product_unit_conversion_value: option.conversion_value,
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingOutProductIndex.value === null) {
+    const item: StockAdjustmentOutItemFormItem = {
+      qty: 0,
+      remarks: '',
+      ...baseData,
+    } as StockAdjustmentOutItemFormItem;
+
+    stockAdjustmentForm.out_items.push(item);
+    outItemsRemarksExpanded.value.push(false);
+    targetIndex = stockAdjustmentForm.out_items.length - 1;
+  } else {
+    const index = editingOutProductIndex.value;
+    const current = stockAdjustmentForm.out_items[index] as StockAdjustmentOutItemFormItem;
+    stockAdjustmentForm.out_items[index] = {
+      ...current,
+      ...baseData,
+    };
+    targetIndex = index;
+  }
+
+  showOutProductUnitModal.value = false;
+  editingOutProductIndex.value = null;
+  outItemQtyToFocus.value = targetIndex;
+};
+
+const toggleOutProductRemarks = (index: number) => {
+  const current = outItemsRemarksExpanded.value[index] ?? false;
+  outItemsRemarksExpanded.value = [
+    ...outItemsRemarksExpanded.value.slice(0, index),
+    !current,
+    ...outItemsRemarksExpanded.value.slice(index + 1),
+  ];
+};
+
+const handleOutProductUnitModalAfterLeave = () => {
+  const outIndex = outItemQtyToFocus.value;
+
+  outItemQtyToFocus.value = null;
+
+  if (outIndex === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`out-product-qty-${outIndex}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addOutProductSerial = (index: number) => {
+  const items = stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[];
+  const item = items[index];
+  if (!item) return;
+  item.serials.push({ serial: '' });
+  stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+};
+
+const removeOutProductSerial = (index: number, serialIndex: number) => {
+  const items = stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[];
+  const item = items[index];
+  if (!item) return;
+  item.serials.splice(serialIndex, 1);
+  stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+};
+
+const removeOutProduct = (index: number) => {
+  stockAdjustmentForm.out_items.splice(index, 1);
+  outItemsRemarksExpanded.value.splice(index, 1);
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const resetForm = () => {
+  stockAdjustmentForm.reset();
+  stockAdjustmentForm.setErrors({});
+  inItemsRemarksExpanded.value = [];
+  outItemsRemarksExpanded.value = [];
+};
+
+const onSubmit = async () => {
+  if (stockAdjustmentForm.hasErrors) {
+    const firstErrorKey = Object.keys(stockAdjustmentForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const originalInProducts = stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[];
+  const cleanedInProducts: StockAdjustmentInItemNestedStoreRequest[] = originalInProducts.map(
+    (item: StockAdjustmentInItemFormItem) => ({
+      qty: item.qty,
+      product_unit_id: item.product_unit_id,
+      product_unit_conversion_value: item.product_unit_conversion_value,
+      product_unit_cogs: item.product_unit_cogs,
+      remarks: item.remarks,
+      serials: item.serials.map((serialItem) => ({
+        serial: serialItem.serial,
+      })),
+    }),
+  );
+
+  const originalOutProducts = stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[];
+  const cleanedOutProducts: StockAdjustmentOutItemNestedStoreRequest[] = originalOutProducts.map(
+    (item: StockAdjustmentOutItemFormItem) => ({
+      qty: item.qty,
+      product_unit_id: item.product_unit_id,
+      product_unit_conversion_value: item.product_unit_conversion_value,
+      remarks: item.remarks,
+      serials: item.serials.map((serialItem) => ({
+        serial: serialItem.serial,
+      })),
+    }),
+  );
+
+  const backupInProducts = [...originalInProducts];
+  const backupOutProducts = [...originalOutProducts];
+
+  stockAdjustmentForm.in_items = cleanedInProducts as any;
+  stockAdjustmentForm.out_items = cleanedOutProducts as any;
+
+  emits('loading-state', true);
+
+  try {
+    await stockAdjustmentForm.submit();
+    resetForm();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-stock-adjustment-list' });
+  } catch (error) {
+    stockAdjustmentForm.in_items = backupInProducts as any;
+    stockAdjustmentForm.out_items = backupOutProducts as any;
+    const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+    showAlertPlaceholder('danger', '', errorList);
+  } finally {
+    emits('loading-state', false);
+  }
+};
+// #endregion
+</script>
+
+<template>
+  <form id="stockAdjustmentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <!-- company & branch -->
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <!-- company -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="stockAdjustmentForm.company_id" />
+            </div>
+
+            <!-- branch -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="stockAdjustmentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- stock_adjustment -->
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <!-- code -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockAdjustmentForm.invalid('code') }">
+                {{ t('views.stock_adjustment.fields.code') }}
+              </FormLabel>
+              <FormInputCode v-model="stockAdjustmentForm.code" :class="{
+                'border-danger': stockAdjustmentForm.invalid('code'),
+              }" :placeholder="t('views.stock_adjustment.fields.code')" @set-auto="setCode"
+                @change="stockAdjustmentForm.validate('code')" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.code" />
+            </div>
+            <!-- date -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockAdjustmentForm.invalid('date') }">
+                {{ t('views.stock_adjustment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto v-model="stockAdjustmentForm.date" :class="{
+                'border-danger': stockAdjustmentForm.invalid('date'),
+              }" :placeholder="t('views.stock_adjustment.fields.date')"
+                @change="stockAdjustmentForm.validate('date')" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.date" />
+            </div>
+            <!-- category -->
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{
+                'text-danger': stockAdjustmentForm.invalid('category_id'),
+              }">
+                {{ t('views.stock_adjustment.fields.category_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="stockAdjustmentForm.category_id" v-model:search="categorySearch"
+                :options="categoryOptions" :placeholder="t('components.dropdown.placeholder')" :class="{
+                  'border-danger': stockAdjustmentForm.invalid('category_id'),
+                }" @change="stockAdjustmentForm.validate('category_id')" @search="loadCategoryDDL"
+                @clear="clearCategory" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.category_id" />
+            </div>
+            <!-- in_warehouse -->
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{
+                'text-danger': stockAdjustmentForm.invalid('in_warehouse_id'),
+              }">
+                {{ t('views.stock_adjustment.fields.in_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="stockAdjustmentForm.in_warehouse_id" v-model:search="inWarehouseSearch"
+                :options="inWarehouseOptions" :placeholder="t('components.dropdown.placeholder')" :class="{
+                  'border-danger': stockAdjustmentForm.invalid('in_warehouse_id'),
+                }" @change="stockAdjustmentForm.validate('in_warehouse_id')" @search="loadInWarehouseDDL"
+                @clear="clearInWarehouse" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.in_warehouse_id" />
+            </div>
+            <!-- out_warehouse -->
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{
+                'text-danger': stockAdjustmentForm.invalid('out_warehouse_id'),
+              }">
+                {{ t('views.stock_adjustment.fields.out_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="stockAdjustmentForm.out_warehouse_id" v-model:search="outWarehouseSearch"
+                :options="outWarehouseOptions" :placeholder="t('components.dropdown.placeholder')" :class="{
+                  'border-danger': stockAdjustmentForm.invalid('out_warehouse_id'),
+                }" @change="stockAdjustmentForm.validate('out_warehouse_id')" @search="loadOutWarehouseDDL"
+                @clear="clearOutWarehouse" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.out_warehouse_id" />
+            </div>
+            <!-- remarks -->
+            <div class="col-span-12">
+              <FormLabel :class="{
+                'text-danger': stockAdjustmentForm.invalid('remarks'),
+              }">
+                {{ t('views.stock_adjustment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea v-model="stockAdjustmentForm.remarks" rows="3" :class="{
+                'border-danger': stockAdjustmentForm.invalid('remarks'),
+              }" :placeholder="t('views.stock_adjustment.fields.remarks')"
+                @change="stockAdjustmentForm.validate('remarks')" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.remarks" />
+            </div>
+            <!-- is_posted -->
+            <div class="col-span-12">
+              <FormLabel class="pr-5">
+                {{ t('views.stock_adjustment.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="stockAdjustmentForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- in_product -->
+      <template #card-items-2>
+        <div class="p-5">
+          <div v-if="stockAdjustmentForm.in_items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <!-- in_product list -->
+          <div v-else class="space-y-5">
+            <div v-for="(item, index) in inItemsForm" :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4">
+              <!-- in_product actions -->
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.stock_adjustment_in_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary"
+                    @click="toggleInProductRemarks(index)">
+                    {{ inItemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeInProduct(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <!-- in_product fields -->
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <!-- qty -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.qty` as any),
+                  }">
+                    {{ t('views.stock_adjustment_in_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency :id="`in-product-qty-${index}`" v-model="item.qty"
+                    @change="
+                      stockAdjustmentForm.validate(`in_items.${index}.qty` as any);
+                      stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                    " :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(`in_items.${index}.qty` as any),
+                      },
+                    ]" />
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.qty`]" />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_unit_name }}
+                  </div>
+                </div>
+
+                <!-- product description (name + code) -->
+                <div class="col-span-12 lg:col-span-5">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.product_unit_id` as any),
+                  }">
+                    {{ t('views.stock_adjustment_in_item.table.cols.product') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1"
+                      class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary"
+                      @click="changeInProductProductUnit(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages
+                    :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.product_unit_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    {{ item.product_unit_product_code }}
+                  </div>
+                </div>
+
+                <!-- product_unit_conversion_value -->
+                <div class="col-span-12 lg:col-span-1">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(
+                      `in_items.${index}.product_unit_conversion_value` as any,
+                    ),
+                  }">
+                    {{ t('views.stock_adjustment_in_item.fields.product_unit_conversion_value') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_conversion_value" tabindex="-1"
+                    @change="
+                      stockAdjustmentForm.validate(`in_items.${index}.product_unit_conversion_value` as any);
+                      stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                    "
+                    :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(
+                          `in_items.${index}.product_unit_conversion_value` as any,
+                        ),
+                      },
+                    ]" />
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.product_unit_conversion_value`]
+                    " />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_base_unit_name }}
+                  </div>
+                </div>
+
+                <!-- product_unit_cogs -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.product_unit_cogs` as any),
+                  }">
+                    {{ t('views.stock_adjustment_in_item.fields.product_unit_cogs') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_cogs"
+                    @change="stockAdjustmentForm.validate(`in_items.${index}.product_unit_cogs` as any)" :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(`in_items.${index}.product_unit_cogs` as any),
+                      },
+                    ]" />
+                  <FormErrorMessages
+                    :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.product_unit_cogs`]" />
+                  <div v-if="
+                    item.product_unit_conversion_value > 1 &&
+                    item.product_unit_cogs &&
+                    item.product_unit_base_unit_name
+                  " class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ formatCurrency((item.product_unit_cogs / item.product_unit_conversion_value).toFixed(2)) }}
+                    / {{ item.product_unit_base_unit_name }}
+                  </div>
+                </div>
+
+                <!-- product_unit_total_cogs -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel>
+                    {{ t('views.stock_adjustment_in_item.fields.product_unit_total_cogs') }}
+                  </FormLabel>
+                  <FormInputCurrency :model-value="item.product_unit_total_cogs ?? 0" readonly tabindex="-1"
+                    class="text-right" />
+                </div>
+
+                <!-- serials -->
+                <div v-if="item.is_use_serial_number" class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{
+                      'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.serials` as any),
+                    }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addInProductSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, sIdx) in item.serials" :key="sIdx" class="flex gap-2">
+                      <FormInput v-model="serial.serial" :placeholder="t('views.product.fields.serial_number')" :class="{
+                        'border-danger': stockAdjustmentForm.invalid(`in_items.${index}.serials.${sIdx}.serial` as any),
+                      }" @change="
+                        stockAdjustmentForm.validate(`in_items.${index}.serials.${sIdx}.serial` as any);
+                        stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                      " />
+                      <Button type="button" variant="outline-secondary" @click="removeInProductSerial(index, sIdx)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, sIdx) in item.serials"
+                    :key="`in-products-serial-error-${index}-${sIdx}`"
+                    :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.serials.${sIdx}.serial`]"
+                  />
+                </div>
+
+                <div v-if="inItemsRemarksExpanded[index]" class="col-span-12 space-y-3">
+                  <div>
+                    <FormLabel :class="{
+                      'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.remarks` as any),
+                    }">
+                      {{ t('views.stock_adjustment_in_item.fields.remarks') }}
+                    </FormLabel>
+                    <FormTextarea rows="2" v-model="stockAdjustmentForm.in_items[index].remarks" :class="{
+                      'border-danger': stockAdjustmentForm.invalid(`in_items.${index}.remarks` as any),
+                    }" @change="stockAdjustmentForm.validate(`in_items.${index}.remarks` as any)" />
+                    <FormErrorMessages
+                      :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.remarks`]" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- in_product actions -->
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel>
+              <!-- {{ t("views.stock_adjustment.field_groups.in_items") }} -->
+            </FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addInProduct">
+              {{ t('views.stock_adjustment_in_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <!-- out_product -->
+      <template #card-items-3>
+        <div class="p-5">
+          <div v-if="stockAdjustmentForm.out_items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <!-- out_product list -->
+          <div v-else class="space-y-5">
+            <div v-for="(item, index) in outItemsForm" :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4">
+              <!-- out_product actions -->
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.stock_adjustment_out_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary"
+                    @click="toggleOutProductRemarks(index)">
+                    {{ outItemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeOutProduct(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <!-- out_product fields -->
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <!-- qty -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`out_items.${index}.qty` as any),
+                  }">
+                    {{ t('views.stock_adjustment_out_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency :id="`out-product-qty-${index}`" v-model="item.qty"
+                    @change="
+                      stockAdjustmentForm.validate(`out_items.${index}.qty` as any);
+                      stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                    " :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(`out_items.${index}.qty` as any),
+                      },
+                    ]" />
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.qty`]" />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_unit_name }}
+                  </div>
+                </div>
+
+                <!-- product description (name + code) -->
+                <div class="col-span-12 lg:col-span-8">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`out_items.${index}.product_unit_id` as any),
+                  }">
+                    {{ t('views.stock_adjustment_out_item.table.cols.product') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1"
+                      class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary"
+                      @click="changeOutProductProductUnit(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages
+                    :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.product_unit_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    {{ item.product_unit_product_code }}
+                  </div>
+                </div>
+
+                <!-- product_unit_conversion_value -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(
+                      `out_items.${index}.product_unit_conversion_value` as any,
+                    ),
+                  }">
+                    {{ t('views.stock_adjustment_out_item.fields.product_unit_conversion_value') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_conversion_value" tabindex="-1"
+                    @change="
+                      stockAdjustmentForm.validate(`out_items.${index}.product_unit_conversion_value` as any);
+                      stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                    "
+                    :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(
+                          `out_items.${index}.product_unit_conversion_value` as any,
+                        ),
+                      },
+                    ]" />
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.product_unit_conversion_value`]
+                    " />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_base_unit_name }}
+                  </div>
+                </div>
+
+                <!-- serials -->
+                <div v-if="item.is_use_serial_number" class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{
+                      'text-danger': stockAdjustmentForm.invalid(`out_items.${index}.serials` as any),
+                    }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addOutProductSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, sIdx) in item.serials" :key="sIdx" class="flex gap-2">
+                      <FormInput v-model="serial.serial" :placeholder="t('views.product.fields.serial_number')" :class="{
+                        'border-danger': stockAdjustmentForm.invalid(`out_items.${index}.serials.${sIdx}.serial` as any),
+                      }" @change="
+                        stockAdjustmentForm.validate(`out_items.${index}.serials.${sIdx}.serial` as any);
+                        stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                      " />
+                      <Button type="button" variant="outline-secondary" @click="removeOutProductSerial(index, sIdx)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, sIdx) in item.serials"
+                    :key="`out-products-serial-error-${index}-${sIdx}`"
+                    :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.serials.${sIdx}.serial`]"
+                  />
+                </div>
+
+                <div v-if="outItemsRemarksExpanded[index]" class="col-span-12 space-y-3">
+                  <div>
+                    <FormLabel :class="{
+                      'text-danger': stockAdjustmentForm.invalid(`out_items.${index}.remarks` as any),
+                    }">
+                      {{ t('views.stock_adjustment_out_item.fields.remarks') }}
+                    </FormLabel>
+                    <FormTextarea rows="2" v-model="stockAdjustmentForm.out_items[index].remarks" :class="{
+                      'border-danger': stockAdjustmentForm.invalid(`out_items.${index}.remarks` as any),
+                    }" @change="stockAdjustmentForm.validate(`out_items.${index}.remarks` as any)" />
+                    <FormErrorMessages
+                      :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.remarks`]" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- out_product actions -->
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel>
+              <!-- {{ t("views.stock_adjustment.field_groups.out_items") }} -->
+            </FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addOutProduct">
+              {{ t('views.stock_adjustment_out_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <!-- stock_adjustment actions -->
+      <template #card-items-button>
+        <div class="flex gap-4 p-5">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
+            :disabled="stockAdjustmentForm.validating || stockAdjustmentForm.hasErrors">
+            <Lucide v-if="stockAdjustmentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+
+    <!-- product_unit modal - IN -->
+    <Dialog size="xl" :open="showInProductUnitModal" @close="
+      () => {
+        showInProductUnitModal = false;
+      }
+    " @after-leave="handleInProductUnitModalAfterLeave">
+      <Dialog.Panel>
+        <div class="p-5">
+          <!-- modal header -->
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>
+              {{ t('views.stock_adjustment_in_item.table.title') }}
+            </FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showInProductUnitModal = false">
+              <Lucide icon="X" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <!-- search box -->
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput id="product-unit-search-input" v-model="productSearchTextIn" type="text"
+              :placeholder="t('components.search-box.placeholder.search')" @keyup.enter="searchInProductUnits" />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchInProductUnits" tabindex="-1"
+              :disabled="isSearchingInProductUnit || !stockAdjustmentForm.in_warehouse_id">
+              <template v-if="isSearchingInProductUnit">
+                <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+              </template>
+              <template v-else>
+                {{ t('components.buttons.search') }}
+              </template>
+            </Button>
+          </div>
+
+          <!-- product unit table -->
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.product.table.cols.image') }}
+                  </th>
+                  <!-- product -->
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.stock_adjustment_in_item.table.cols.product') }}
+                  </th>
+                  <!-- remaining_stock -->
+                  <th class="px-3 py-2 text-right">
+                    {{ t('views.stock_adjustment_in_item.table.cols.remaining_stock') }}
+                  </th>
+                  <!-- unit -->
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.product.table.cols.unit') }}
+                  </th>
+                  <!-- conversion_value -->
+                  <th class="px-3 py-2 text-right">
+                    {{ t('views.product.fields.conversion_value') }}
+                  </th>
+                  <!-- product_unit_cogs -->
+                  <th class="px-3 py-2 text-right">
+                    {{ t('views.stock_adjustment_in_item.table.cols.product_unit_cogs') }}
+                  </th>
+                  <!-- actions -->
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- empty state -->
+                <tr v-if="productUnitOptionsIn.length === 0">
+                  <td colspan="7" class="px-3 py-4 text-center text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </td>
+                </tr>
+
+                <!-- product unit rows -->
+                <tr v-for="(opt, idx) in productUnitOptionsIn" :key="idx"
+                  class="border-t border-slate-200/60 dark:border-darkmode-400">
+                  <td class="px-3 py-2">
+                    <ProductImagePreview :image-url="opt.product_image_url"
+                      wrapper-class="w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                      icon-class="w-4 h-4 text-slate-400" />
+                  </td>
+                  <!-- product -->
+                  <td class="px-3 py-2">[{{ opt.product_unit_code }}] {{ opt.product_name }}</td>
+                  <!-- remaining_stock -->
+                  <td class="px-3 py-2 text-right">
+                    {{ formatCurrency(opt.remaining_stock) }}
+                  </td>
+                  <!-- unit -->
+                  <td class="px-3 py-2">
+                    {{ opt.unit_name }}
+                  </td>
+                  <!-- conversion_value -->
+                  <td class="px-3 py-2 text-right">
+                    {{ formatCurrency(opt.conversion_value) }}
+                  </td>
+                  <!-- product_unit_cogs -->
+                  <td class="px-3 py-2 text-right">
+                    {{ formatCurrency(opt.cogs) }}
+                  </td>
+                  <!-- select button -->
+                  <td class="px-3 py-2 text-right">
+                    <Button type="button" variant="primary" size="sm" @click="selectProductUnitForIn(opt)">
+                      {{ t('components.buttons.select') }}
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+
+    <!-- product_unit modal - OUT -->
+    <Dialog size="xl" :open="showOutProductUnitModal" @close="
+      () => {
+        showOutProductUnitModal = false;
+      }
+    " @after-leave="handleOutProductUnitModalAfterLeave">
+      <Dialog.Panel>
+        <div class="p-5">
+          <!-- modal header -->
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>
+              {{ t('views.stock_adjustment_out_item.table.title') }}
+            </FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showOutProductUnitModal = false">
+              <Lucide icon="X" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <!-- search box -->
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput id="product-unit-search-input" v-model="productSearchTextOut" type="text"
+              :placeholder="t('components.search-box.placeholder.search')" @keyup.enter="searchOutProductUnits" />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchOutProductUnits" tabindex="-1"
+              :disabled="isSearchingOutProductUnit || !stockAdjustmentForm.out_warehouse_id">
+              <template v-if="isSearchingOutProductUnit">
+                <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+              </template>
+              <template v-else>
+                {{ t('components.buttons.search') }}
+              </template>
+            </Button>
+          </div>
+
+          <!-- product unit table -->
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.product.table.cols.image') }}
+                  </th>
+                  <!-- product -->
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.stock_adjustment_out_item.table.cols.product') }}
+                  </th>
+                  <!-- remaining_stock -->
+                  <th class="px-3 py-2 text-right">
+                    {{ t('views.stock_adjustment_out_item.table.cols.remaining_stock') }}
+                  </th>
+                  <!-- unit -->
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.product.table.cols.unit') }}
+                  </th>
+                  <!-- conversion_value -->
+                  <th class="px-3 py-2 text-right">
+                    {{ t('views.product.fields.conversion_value') }}
+                  </th>
+                  <!-- product_unit_cogs -->
+                  <th class="px-3 py-2 text-right">
+                    {{ t('views.stock_adjustment_out_item.table.cols.product_unit_cogs') }}
+                  </th>
+                  <!-- actions -->
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- empty state -->
+                <tr v-if="productUnitOptionsOut.length === 0">
+                  <td colspan="7" class="px-3 py-4 text-center text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </td>
+                </tr>
+
+                <!-- product unit rows -->
+                <tr v-for="(opt, idx) in productUnitOptionsOut" :key="idx"
+                  class="border-t border-slate-200/60 dark:border-darkmode-400">
+                  <td class="px-3 py-2">
+                    <ProductImagePreview :image-url="opt.product_image_url"
+                      wrapper-class="w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                      icon-class="w-4 h-4 text-slate-400" />
+                  </td>
+                  <!-- product -->
+                  <td class="px-3 py-2">[{{ opt.product_unit_code }}] {{ opt.product_name }}</td>
+                  <!-- remaining_stock -->
+                  <td class="px-3 py-2 text-right">
+                    {{ formatCurrency(opt.remaining_stock) }}
+                  </td>
+                  <!-- unit -->
+                  <td class="px-3 py-2">
+                    {{ opt.unit_name }}
+                  </td>
+                  <!-- conversion_value -->
+                  <td class="px-3 py-2 text-right">
+                    {{ formatCurrency(opt.conversion_value) }}
+                  </td>
+                  <!-- product_unit_cogs -->
+                  <td class="px-3 py-2 text-right">
+                    {{ formatCurrency(opt.cogs) }}
+                  </td>
+                  <!-- select button -->
+                  <td class="px-3 py-2 text-right">
+                    <Button type="button" variant="primary" size="sm" @click="selectProductUnitForOut(opt)">
+                      {{ t('components.buttons.select') }}
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  </form>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentEdit.vue b/web/src/pages/stock-adjustment/StockAdjustmentEdit.vue
new file mode 100644
index 000000000..c051fa8d4
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentEdit.vue
@@ -0,0 +1,1452 @@
+<script setup lang="ts">
+// #region Imports
+import { computed, ref, onMounted, nextTick, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormTextarea,
+  FormSelectSearch,
+  FormSwitch,
+} from '@/components/Base/Form';
+import WarehouseService from '@/services/WarehouseService';
+import ProductService from '@/services/ProductService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import { formatDate, formatCurrency, convertErrorTypeToAlertListType } from '@/utils/helper';
+import StockAdjustmentService from '@/services/StockAdjustmentService';
+import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+import CacheService from '@/services/CacheService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import {
+  type StockAdjustmentInItemNestedUpdateRequest,
+  type StockAdjustmentOutItemNestedUpdateRequest,
+} from '@/types/services/stock-adjustment/StockAdjustmentRequest';
+import type { StockAdjustment } from '@/types/models/StockAdjustment';
+import { debounce } from 'lodash';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+// #endregion
+
+// #region Declarations
+const stockAdjustmentData = ref<StockAdjustment | null>(null);
+
+type StockAdjustmentInItemFormItem = {
+  id: StockAdjustmentInItemNestedUpdateRequest['id'];
+  qty: StockAdjustmentInItemNestedUpdateRequest['qty'];
+  product_unit_id: StockAdjustmentInItemNestedUpdateRequest['product_unit_id'];
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  product_unit_conversion_value: StockAdjustmentInItemNestedUpdateRequest['product_unit_conversion_value'];
+  product_unit_cogs: StockAdjustmentInItemNestedUpdateRequest['product_unit_cogs'];
+  product_unit_total_cogs?: number | null;
+  remarks: StockAdjustmentInItemNestedUpdateRequest['remarks'];
+  is_use_serial_number?: boolean;
+  serials: { id: string | null; serial: string }[];
+  delete_serial_ids: string[];
+};
+
+type StockAdjustmentOutItemFormItem = {
+  id: StockAdjustmentOutItemNestedUpdateRequest['id'];
+  qty: StockAdjustmentOutItemNestedUpdateRequest['qty'];
+  product_unit_id: StockAdjustmentOutItemNestedUpdateRequest['product_unit_id'];
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  product_unit_conversion_value: StockAdjustmentOutItemNestedUpdateRequest['product_unit_conversion_value'];
+  remarks: StockAdjustmentOutItemNestedUpdateRequest['remarks'];
+  is_use_serial_number?: boolean;
+  serials: { id: string | null; serial: string }[];
+  delete_serial_ids: string[];
+};
+
+type ProductUnitOption = {
+  product_id: string;
+  product_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  product_unit_id: string;
+  product_unit_code: string;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  cogs: number;
+  is_use_serial_number: boolean;
+};
+
+const inItemsRemarksExpanded = ref<boolean[]>([]);
+const outItemsRemarksExpanded = ref<boolean[]>([]);
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const stockAdjustmentService = new StockAdjustmentService();
+const stockAdjustmentForm = stockAdjustmentService.useStockAdjustmentEditForm(route.params.ulid as string);
+const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+const warehouseService = new WarehouseService();
+const productService = new ProductService();
+const cacheServices = new CacheService();
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const inWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const inWarehouseSearch = ref<string>('');
+const inWarehouseOptions = computed(() =>
+  (inWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const outWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const outWarehouseSearch = ref<string>('');
+const outWarehouseOptions = computed(() =>
+  (outWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showProductUnitModal = ref<boolean>(false);
+const productSearchText = ref<string>('');
+const isSearchingProductUnit = ref<boolean>(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+const editingInProductIndex = ref<number | null>(null);
+const inItemQtyToFocus = ref<number | null>(null);
+const editingOutProductIndex = ref<number | null>(null);
+const outItemQtyToFocus = ref<number | null>(null);
+const productUnitSelectionTarget = ref<'in' | 'out'>('in');
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.stock_adjustment.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.stock_adjustment.field_groups.stock_adjustment_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.stock_adjustment.field_groups.in_items',
+    state: CardState.Collapsed,
+  },
+  {
+    title: 'views.stock_adjustment.field_groups.out_items',
+    state: CardState.Collapsed,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const inItemsForm = computed<StockAdjustmentInItemFormItem[]>(
+  () => stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[],
+);
+const outItemsForm = computed<StockAdjustmentOutItemFormItem[]>(
+  () => stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[],
+);
+// #endregion
+
+const getProductMainImageUrl = (product: any): string | null => {
+  const images: any[] = product?.product_images ?? [];
+  if (images.length === 0) return null;
+
+  const mainImage = images.find((img: any) => img?.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  return images[0]?.url ?? null;
+};
+
+// #region Vue Core
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  () => stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[],
+  (items: StockAdjustmentInItemFormItem[]) => {
+    if (!items) return;
+    items.forEach((item: StockAdjustmentInItemFormItem) => {
+      const qty = Number(item.qty ?? 0);
+      const cogs = Number(item.product_unit_cogs ?? 0);
+      item.product_unit_total_cogs = qty * cogs;
+    });
+  },
+  { deep: true },
+);
+
+watch(showProductUnitModal, (open) => {
+  if (!open) return;
+  nextTick(() => {
+    const el = document.getElementById('product-unit-search-input') as HTMLInputElement | null;
+    el?.focus();
+  });
+});
+
+watch(
+  stockAdjustmentForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('STOCK_ADJUSTMENT_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await loadData();
+
+    await Promise.all([loadCategoryDDL(), loadInWarehouseDDL(), loadOutWarehouseDDL()]);
+  } finally {
+    emits('loading-state', false);
+  }
+});
+
+const loadData = async () => {
+  const ulid = route.params.ulid as string | undefined;
+  if (!ulid) return;
+
+  const result = await stockAdjustmentService.read(ulid);
+
+  if (result.success && result.data) {
+    const data = result.data as StockAdjustment;
+
+    stockAdjustmentData.value = data;
+
+    const inItems: StockAdjustmentInItemFormItem[] = (data.in_items || []).map((item: any) => {
+      const productUnit = item.product_unit;
+      const unit = productUnit?.unit;
+      const product = (productUnit as any)?.product;
+
+      return {
+        id: item.id ?? null,
+        qty: item.qty,
+        product_unit_id: productUnit?.id ?? '',
+        product_unit_product_code: productUnit?.code ?? '',
+        product_unit_product_name: product?.name ?? '',
+        product_unit_unit_name: unit?.name ?? '',
+        product_unit_base_unit_name: '',
+        product_unit_conversion_value: item.product_unit_conversion_value,
+        product_unit_cogs: item.product_unit_cogs,
+        product_unit_total_cogs: item.product_unit_total_cogs,
+        remarks: item.remarks ?? '',
+        is_use_serial_number: product?.is_use_serial_number ?? false,
+        serials: item.serials ? item.serials.map((s: any) => ({ id: s.id ?? null, serial: s.serial })) : [],
+        delete_serial_ids: [],
+      };
+    });
+
+    const outItems: StockAdjustmentOutItemFormItem[] = (data.out_items || []).map((item: any) => {
+      const productUnit = item.product_unit;
+      const unit = productUnit?.unit;
+      const product = (productUnit as any)?.product;
+
+      return {
+        id: item.id ?? null,
+        qty: item.qty,
+        product_unit_id: productUnit?.id ?? '',
+        product_unit_product_code: productUnit?.code ?? '',
+        product_unit_product_name: product?.name ?? '',
+        product_unit_unit_name: unit?.name ?? '',
+        product_unit_base_unit_name: '',
+        product_unit_conversion_value: item.product_unit_conversion_value,
+        remarks: item.remarks ?? '',
+        is_use_serial_number: product?.is_use_serial_number ?? false,
+        serials: item.serials ? item.serials.map((s: any) => ({ id: s.id ?? null, serial: s.serial })) : [],
+        delete_serial_ids: [],
+      };
+    });
+
+    stockAdjustmentForm.setData({
+      company_id: data.company.id,
+      branch_id: data.branch.id,
+      code: data.code,
+      date: formatDate(data.date, 'YYYY-MM-DD HH:mm:ss'),
+      category_id: data.category?.id ?? '',
+      in_warehouse_id: data.in_warehouse?.id ?? '',
+      out_warehouse_id: data.out_warehouse?.id ?? '',
+      remarks: data.remarks ?? '',
+      is_posted: data.is_posted,
+      delete_in_item_ids: [],
+      in_items: inItems as any,
+      delete_out_item_ids: [],
+      out_items: outItems as any,
+    } as any);
+
+    inItemsRemarksExpanded.value = inItems.map(() => false);
+    outItemsRemarksExpanded.value = outItems.map(() => false);
+
+    if (inItems.length > 0) {
+      cards.value = cards.value.map((card) =>
+        card.title === 'views.stock_adjustment.field_groups.in_items'
+          ? { ...card, state: CardState.Expanded }
+          : card,
+      );
+    }
+
+    if (outItems.length > 0) {
+      cards.value = cards.value.map((card) =>
+        card.title === 'views.stock_adjustment.field_groups.out_items'
+          ? { ...card, state: CardState.Expanded }
+          : card,
+      );
+    }
+  }
+};
+// #endregion
+
+// #region Methods - Stock Adjustment
+const setCode = () => {
+  stockAdjustmentForm.forgetError('code');
+  if (stockAdjustmentForm.code === '_AUTO_') {
+    stockAdjustmentForm.setData({ code: '' });
+  } else {
+    stockAdjustmentForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await stockAdjustmentCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: stockAdjustmentData.value?.category?.id as string | undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearCategory = () => {
+  stockAdjustmentForm.setData({ category_id: '' });
+  stockAdjustmentForm.forgetError('category_id');
+  stockAdjustmentForm.validate('category_id');
+};
+
+const loadInWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: stockAdjustmentData.value?.in_warehouse?.id as string | undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    inWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearInWarehouse = () => {
+  stockAdjustmentForm.setData({ in_warehouse_id: '' });
+  stockAdjustmentForm.forgetError('in_warehouse_id');
+  stockAdjustmentForm.validate('in_warehouse_id');
+};
+
+const loadOutWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: stockAdjustmentData.value?.out_warehouse?.id as string | undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    outWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearOutWarehouse = () => {
+  stockAdjustmentForm.setData({ out_warehouse_id: '' });
+  stockAdjustmentForm.forgetError('out_warehouse_id');
+  stockAdjustmentForm.validate('out_warehouse_id');
+};
+// #endregion
+
+// #region Methods - In Items
+const selectProductUnitForIn = (option: ProductUnitOption) => {
+  const baseData: Partial<StockAdjustmentInItemFormItem> = {
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.conversion_value != 1 ? option.base_unit_name : '',
+    product_unit_conversion_value: option.conversion_value,
+    product_unit_cogs: option.cogs,
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingInProductIndex.value === null) {
+    const item: StockAdjustmentInItemFormItem = {
+      id: null,
+      qty: 0,
+      remarks: '',
+      delete_serial_ids: [],
+      ...baseData,
+    } as StockAdjustmentInItemFormItem;
+
+    stockAdjustmentForm.in_items.push(item);
+    inItemsRemarksExpanded.value.push(false);
+    targetIndex = stockAdjustmentForm.in_items.length - 1;
+  } else {
+    const index = editingInProductIndex.value;
+    const current = stockAdjustmentForm.in_items[index] as StockAdjustmentInItemFormItem;
+    stockAdjustmentForm.in_items[index] = {
+      ...current,
+      ...baseData,
+    };
+    targetIndex = index;
+  }
+
+  showProductUnitModal.value = false;
+  editingInProductIndex.value = null;
+  inItemQtyToFocus.value = targetIndex;
+
+  Object.keys(stockAdjustmentForm.errors).forEach((key) => {
+    if (key.startsWith('in_items.')) {
+      stockAdjustmentForm.forgetError(key as any);
+    }
+  });
+};
+
+const selectProductUnitForOut = (option: ProductUnitOption) => {
+  const baseData: Partial<StockAdjustmentOutItemFormItem> = {
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.conversion_value != 1 ? option.base_unit_name : '',
+    product_unit_conversion_value: option.conversion_value,
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingOutProductIndex.value === null) {
+    const item: StockAdjustmentOutItemFormItem = {
+      id: null,
+      qty: 0,
+      remarks: '',
+      delete_serial_ids: [],
+      ...baseData,
+    } as StockAdjustmentOutItemFormItem;
+
+    stockAdjustmentForm.out_items.push(item);
+    outItemsRemarksExpanded.value.push(false);
+    targetIndex = stockAdjustmentForm.out_items.length - 1;
+  } else {
+    const index = editingOutProductIndex.value;
+    const current = stockAdjustmentForm.out_items[index] as StockAdjustmentOutItemFormItem;
+    stockAdjustmentForm.out_items[index] = {
+      ...current,
+      ...baseData,
+    };
+    targetIndex = index;
+  }
+
+  showProductUnitModal.value = false;
+  editingOutProductIndex.value = null;
+  outItemQtyToFocus.value = targetIndex;
+
+  Object.keys(stockAdjustmentForm.errors).forEach((key) => {
+    if (key.startsWith('out_items.')) {
+      stockAdjustmentForm.forgetError(key as any);
+    }
+  });
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  if (productUnitSelectionTarget.value === 'out') {
+    return selectProductUnitForOut(option);
+  }
+
+  return selectProductUnitForIn(option);
+};
+
+const handleProductUnitModalAfterLeave = () => {
+  const inIndex = inItemQtyToFocus.value;
+  const outIndex = outItemQtyToFocus.value;
+
+  inItemQtyToFocus.value = null;
+  outItemQtyToFocus.value = null;
+
+  if (inIndex === null && outIndex === null) return;
+
+  nextTick(() => {
+    let el: HTMLInputElement | null = null;
+
+    if (inIndex !== null) {
+      el = document.getElementById(`in-product-qty-${inIndex}`) as HTMLInputElement | null;
+    } else if (outIndex !== null) {
+      el = document.getElementById(`out-product-qty-${outIndex}`) as HTMLInputElement | null;
+    }
+
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  isSearchingProductUnit.value = true;
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((p: any) => {
+      const units: any[] = p.product_units || [];
+
+      let baseUnit = units.find((u: any) => u.is_base);
+      if (!baseUnit) baseUnit = units.find((u: any) => Number(u.conversion_value) === 1);
+      if (!baseUnit) baseUnit = units.find((u: any) => u.is_primary_unit);
+      if (!baseUnit && units.length > 0) baseUnit = units[0];
+      const baseUnitName = baseUnit && baseUnit.unit ? baseUnit.unit.name : '';
+
+      return units.map((u: any) => ({
+        product_id: p.id,
+        product_code: p.code,
+        product_name: p.name,
+        product_image_url: getProductMainImageUrl(p),
+        product_unit_id: u.id,
+        product_unit_code: u.code,
+        unit_name: u.unit ? u.unit.name : '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(u.conversion_value),
+        cogs: Number(u.price),
+        is_use_serial_number: p.is_use_serial_number,
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const addInProduct = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  isSearchingProductUnit.value = false;
+  productUnitSelectionTarget.value = 'in';
+  editingInProductIndex.value = null;
+  showProductUnitModal.value = true;
+};
+
+const changeInProductProductUnit = (index: number) => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  isSearchingProductUnit.value = false;
+  productUnitSelectionTarget.value = 'in';
+  editingInProductIndex.value = index;
+  showProductUnitModal.value = true;
+};
+
+const toggleInProductRemarks = (index: number) => {
+  const current = inItemsRemarksExpanded.value[index] ?? false;
+  inItemsRemarksExpanded.value[index] = !current;
+};
+
+const addInProductSerial = (index: number) => {
+  const items = stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[];
+  const item = items[index];
+  if (!item) return;
+  item.serials.push({ id: null, serial: '' });
+  stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+};
+
+const removeInProductSerial = (index: number, serialIndex: number) => {
+  const items = stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[];
+  const item = items[index];
+  if (!item) return;
+  const serial = item.serials[serialIndex];
+
+  if (serial.id) {
+    item.delete_serial_ids.push(serial.id);
+  }
+
+  item.serials.splice(serialIndex, 1);
+  stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+};
+
+const removeInProduct = (index: number) => {
+  const items = stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[];
+  const item = items[index];
+
+  if (item && item.id) {
+    stockAdjustmentForm.delete_in_item_ids.push(item.id);
+  }
+
+  items.splice(index, 1);
+  inItemsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(stockAdjustmentForm.errors).forEach((key) => {
+    if (key.startsWith('in_items.')) {
+      stockAdjustmentForm.forgetError(key as any);
+    }
+  });
+};
+// #endregion
+
+// #region Methods - Out Items
+const addOutProduct = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  isSearchingProductUnit.value = false;
+  productUnitSelectionTarget.value = 'out';
+  editingOutProductIndex.value = null;
+  showProductUnitModal.value = true;
+};
+
+const changeOutProductProductUnit = (index: number) => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  isSearchingProductUnit.value = false;
+  productUnitSelectionTarget.value = 'out';
+  editingOutProductIndex.value = index;
+  showProductUnitModal.value = true;
+};
+
+const toggleOutProductRemarks = (index: number) => {
+  const current = outItemsRemarksExpanded.value[index] ?? false;
+  outItemsRemarksExpanded.value = [
+    ...outItemsRemarksExpanded.value.slice(0, index),
+    !current,
+    ...outItemsRemarksExpanded.value.slice(index + 1),
+  ];
+};
+
+const addOutProductSerial = (index: number) => {
+  const items = stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[];
+  const item = items[index];
+  if (!item) return;
+  item.serials.push({ id: null, serial: '' });
+  stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+};
+
+const removeOutProductSerial = (index: number, serialIndex: number) => {
+  const items = stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[];
+  const item = items[index];
+  if (!item) return;
+  const serial = item.serials[serialIndex];
+
+  if (serial.id) {
+    item.delete_serial_ids.push(serial.id);
+  }
+
+  item.serials.splice(serialIndex, 1);
+  stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+};
+
+const removeOutProduct = (index: number) => {
+  const items = stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[];
+  const item = items[index];
+
+  if (item && item.id) {
+    stockAdjustmentForm.delete_out_item_ids.push(item.id);
+  }
+
+  items.splice(index, 1);
+  outItemsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(stockAdjustmentForm.errors).forEach((key) => {
+    if (key.startsWith('out_items.')) {
+      stockAdjustmentForm.forgetError(key as any);
+    }
+  });
+};
+// #endregion
+
+// #region Actions
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const resetForm = async () => {
+  stockAdjustmentForm.reset();
+  stockAdjustmentForm.setErrors({});
+  inItemsRemarksExpanded.value = [];
+  outItemsRemarksExpanded.value = [];
+  await loadData();
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const onSubmit = async () => {
+  if (stockAdjustmentForm.hasErrors) {
+    const firstErrorKey = Object.keys(stockAdjustmentForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const originalInProducts = stockAdjustmentForm.in_items as StockAdjustmentInItemFormItem[];
+  const cleanedInProducts: StockAdjustmentInItemNestedUpdateRequest[] = originalInProducts.map(
+    (item: StockAdjustmentInItemFormItem) => ({
+      id: item.id,
+      qty: item.qty,
+      product_unit_id: item.product_unit_id,
+      product_unit_conversion_value: item.product_unit_conversion_value,
+      product_unit_cogs: item.product_unit_cogs,
+      remarks: item.remarks,
+      delete_serial_ids: item.delete_serial_ids,
+      serials: item.serials.map((serialItem) => ({
+        id: serialItem.id,
+        serial: serialItem.serial,
+      })),
+    }),
+  );
+
+  const originalOutProducts = stockAdjustmentForm.out_items as StockAdjustmentOutItemFormItem[];
+  const cleanedOutProducts: StockAdjustmentOutItemNestedUpdateRequest[] = originalOutProducts.map(
+    (item: StockAdjustmentOutItemFormItem) => ({
+      id: item.id,
+      qty: item.qty,
+      product_unit_id: item.product_unit_id,
+      product_unit_conversion_value: item.product_unit_conversion_value,
+      remarks: item.remarks,
+      delete_serial_ids: item.delete_serial_ids,
+      serials: item.serials.map((serialItem) => ({
+        id: serialItem.id,
+        serial: serialItem.serial,
+      })),
+    }),
+  );
+
+  const backupInProducts = [...originalInProducts];
+  const backupOutProducts = [...originalOutProducts];
+
+  stockAdjustmentForm.in_items = cleanedInProducts as any;
+  stockAdjustmentForm.out_items = cleanedOutProducts as any;
+
+  emits('loading-state', true);
+
+  try {
+    await stockAdjustmentForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-stock-adjustment-list' });
+  } catch (error) {
+    stockAdjustmentForm.in_items = backupInProducts as any;
+    stockAdjustmentForm.out_items = backupOutProducts as any;
+    const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+    showAlertPlaceholder('danger', '', errorList);
+  } finally {
+    emits('loading-state', false);
+  }
+};
+// #endregion
+</script>
+
+<template>
+  <form id="stockAdjustmentForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="stockAdjustmentForm.company_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="stockAdjustmentForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockAdjustmentForm.invalid('code') }">
+                {{ t('views.stock_adjustment.fields.code') }}
+              </FormLabel>
+              <FormInputCode v-model="stockAdjustmentForm.code" :class="{
+                'border-danger': stockAdjustmentForm.invalid('code'),
+              }" :placeholder="t('views.stock_adjustment.fields.code')" @set-auto="setCode"
+                @change="stockAdjustmentForm.validate('code')" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockAdjustmentForm.invalid('date') }">
+                {{ t('views.stock_adjustment.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto v-model="stockAdjustmentForm.date" :class="{
+                'border-danger': stockAdjustmentForm.invalid('date'),
+              }" :placeholder="t('views.stock_adjustment.fields.date')"
+                @change="stockAdjustmentForm.validate('date')" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-4">
+              <FormLabel :class="{
+                'text-danger': stockAdjustmentForm.invalid('category_id'),
+              }">
+                {{ t('views.stock_adjustment.fields.category_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="stockAdjustmentForm.category_id" v-model:search="categorySearch"
+                :options="categoryOptions" :placeholder="t('components.dropdown.placeholder')" :class="{
+                  'border-danger': stockAdjustmentForm.invalid('category_id'),
+                }" @change="stockAdjustmentForm.validate('category_id')" @search="loadCategoryDDL"
+                @clear="clearCategory" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.category_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{
+                'text-danger': stockAdjustmentForm.invalid('in_warehouse_id'),
+              }">
+                {{ t('views.stock_adjustment.fields.in_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="stockAdjustmentForm.in_warehouse_id" v-model:search="inWarehouseSearch"
+                :options="inWarehouseOptions" :placeholder="t('components.dropdown.placeholder')" :class="{
+                  'border-danger': stockAdjustmentForm.invalid('in_warehouse_id'),
+                }" @change="stockAdjustmentForm.validate('in_warehouse_id')" @search="loadInWarehouseDDL"
+                @clear="clearInWarehouse" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.in_warehouse_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{
+                'text-danger': stockAdjustmentForm.invalid('out_warehouse_id'),
+              }">
+                {{ t('views.stock_adjustment.fields.out_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch v-model="stockAdjustmentForm.out_warehouse_id" v-model:search="outWarehouseSearch"
+                :options="outWarehouseOptions" :placeholder="t('components.dropdown.placeholder')" :class="{
+                  'border-danger': stockAdjustmentForm.invalid('out_warehouse_id'),
+                }" @change="stockAdjustmentForm.validate('out_warehouse_id')" @search="loadOutWarehouseDDL"
+                @clear="clearOutWarehouse" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.out_warehouse_id" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{
+                'text-danger': stockAdjustmentForm.invalid('remarks'),
+              }">
+                {{ t('views.stock_adjustment.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea v-model="stockAdjustmentForm.remarks" rows="3" :class="{
+                'border-danger': stockAdjustmentForm.invalid('remarks'),
+              }" :placeholder="t('views.stock_adjustment.fields.remarks')"
+                @change="stockAdjustmentForm.validate('remarks')" />
+              <FormErrorMessages :messages="stockAdjustmentForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">
+                {{ t('views.stock_adjustment.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="stockAdjustmentForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- in_product -->
+      <template #card-items-2>
+        <div class="p-5">
+          <div v-if="stockAdjustmentForm.in_items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <!-- in_product list -->
+          <div v-else class="space-y-5">
+            <div v-for="(item, index) in inItemsForm" :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4">
+              <!-- in_product actions -->
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.stock_adjustment_in_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary"
+                    @click="toggleInProductRemarks(index)">
+                    {{ inItemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeInProduct(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <!-- in_product fields -->
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <!-- qty -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.qty` as any),
+                  }">
+                    {{ t('views.stock_adjustment_in_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency :id="`in-product-qty-${index}`" v-model="item.qty"
+                    @change="
+                      stockAdjustmentForm.validate(`in_items.${index}.qty` as any);
+                      stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                    " :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(`in_items.${index}.qty` as any),
+                      },
+                    ]" />
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.qty`]" />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_unit_name }}
+                  </div>
+                </div>
+
+                <!-- product description (name + code) -->
+                <div class="col-span-12 lg:col-span-5">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.product_unit_id` as any),
+                  }">
+                    {{ t('views.stock_adjustment_in_item.table.cols.product') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1"
+                      class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary"
+                      @click="changeInProductProductUnit(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages
+                    :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.product_unit_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    {{ item.product_unit_product_code }}
+                  </div>
+                </div>
+
+                <!-- product unit conversion value -->
+                <div class="col-span-12 lg:col-span-1">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(
+                      `in_items.${index}.product_unit_conversion_value` as any,
+                    ),
+                  }">
+                    {{ t('views.stock_adjustment_in_item.fields.product_unit_conversion_value') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_conversion_value" tabindex="-1"
+                    @change="
+                      stockAdjustmentForm.validate(`in_items.${index}.product_unit_conversion_value` as any);
+                      stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                    "
+                    :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(
+                          `in_items.${index}.product_unit_conversion_value` as any,
+                        ),
+                      },
+                    ]" />
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.product_unit_conversion_value`]
+                    " />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_base_unit_name }}
+                  </div>
+                </div>
+
+                <!-- product_unit_cogs -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.product_unit_cogs` as any),
+                  }">
+                    {{ t('views.stock_adjustment_in_item.fields.product_unit_cogs') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_cogs"
+                    @change="stockAdjustmentForm.validate(`in_items.${index}.product_unit_cogs` as any)" :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(`in_items.${index}.product_unit_cogs` as any),
+                      },
+                    ]" />
+                  <FormErrorMessages
+                    :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.product_unit_cogs`]" />
+                  <div v-if="
+                    item.product_unit_conversion_value > 1 &&
+                    item.product_unit_cogs &&
+                    item.product_unit_base_unit_name
+                  " class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ formatCurrency((item.product_unit_cogs / item.product_unit_conversion_value).toFixed(2)) }}
+                    / {{ item.product_unit_base_unit_name }}
+                  </div>
+                </div>
+
+                <!-- product_unit_total_cogs -->
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel>
+                    {{ t('views.stock_adjustment_in_item.fields.product_unit_total_cogs') }}
+                  </FormLabel>
+                  <FormInputCurrency :model-value="item.product_unit_total_cogs ?? 0" readonly tabindex="-1"
+                    class="text-right" />
+                </div>
+
+                <!-- serials -->
+                <div v-if="item.is_use_serial_number" class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{
+                      'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.serials` as any),
+                    }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addInProductSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, sIdx) in item.serials" :key="sIdx" class="flex gap-2">
+                      <FormInput v-model="serial.serial" :placeholder="t('views.product.fields.serial_number')" :class="{
+                        'border-danger': stockAdjustmentForm.invalid(`in_items.${index}.serials.${sIdx}.serial` as any),
+                      }" @change="
+                        stockAdjustmentForm.validate(`in_items.${index}.serials.${sIdx}.serial` as any);
+                        stockAdjustmentForm.validate(`in_items.${index}.serials` as any);
+                      " />
+                      <Button type="button" variant="outline-secondary" @click="removeInProductSerial(index, sIdx)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, sIdx) in item.serials"
+                    :key="`in-products-serial-error-${index}-${sIdx}`"
+                    :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.serials.${sIdx}.serial`]"
+                  />
+                </div>
+
+                <div v-if="inItemsRemarksExpanded[index]" class="col-span-12 space-y-3">
+                  <div>
+                    <FormLabel :class="{
+                      'text-danger': stockAdjustmentForm.invalid(`in_items.${index}.remarks` as any),
+                    }">
+                      {{ t('views.stock_adjustment_in_item.fields.remarks') }}
+                    </FormLabel>
+                    <FormTextarea rows="2" v-model="stockAdjustmentForm.in_items[index].remarks" :class="{
+                      'border-danger': stockAdjustmentForm.invalid(`in_items.${index}.remarks` as any),
+                    }" @change="stockAdjustmentForm.validate(`in_items.${index}.remarks` as any)" />
+                    <FormErrorMessages
+                      :messages="(stockAdjustmentForm.errors as any)[`in_items.${index}.remarks`]" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- in_product actions -->
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addInProduct">
+              {{ t('views.stock_adjustment_in_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <!-- out_product -->
+      <template #card-items-3>
+        <div class="p-5">
+          <div v-if="stockAdjustmentForm.out_items.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <!-- out_product list -->
+          <div v-else class="space-y-5">
+            <div v-for="(item, index) in outItemsForm" :key="index"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4">
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.stock_adjustment_out_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button type="button" class="text-xs text-slate-500 hover:text-primary"
+                    @click="toggleOutProductRemarks(index)">
+                    {{ outItemsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeOutProduct(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <!-- out_product fields -->
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`out_items.${index}.qty` as any),
+                  }">
+                    {{ t('views.stock_adjustment_out_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency :id="`out-product-qty-${index}`" v-model="item.qty"
+                    @change="
+                      stockAdjustmentForm.validate(`out_items.${index}.qty` as any);
+                      stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                    " :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(`out_items.${index}.qty` as any),
+                      },
+                    ]" />
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.qty`]" />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_unit_name }}
+                  </div>
+                </div>
+
+                <div class="col-span-12 lg:col-span-5">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(`out_items.${index}.product_unit_id` as any),
+                  }">
+                    {{ t('views.stock_adjustment_out_item.table.cols.product') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300">
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <Button type="button" variant="outline-secondary" tabindex="-1"
+                      class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary"
+                      @click="changeOutProductProductUnit(index)">
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages
+                    :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.product_unit_id`]" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    {{ item.product_unit_product_code }}
+                  </div>
+                </div>
+
+                <div class="col-span-12 lg:col-span-3">
+                  <FormLabel :class="{
+                    'text-danger': stockAdjustmentForm.invalid(
+                      `out_items.${index}.product_unit_conversion_value` as any,
+                    ),
+                  }">
+                    {{ t('views.stock_adjustment_out_item.fields.product_unit_conversion_value') }}
+                  </FormLabel>
+                  <FormInputCurrency v-model="item.product_unit_conversion_value" tabindex="-1"
+                    @change="
+                      stockAdjustmentForm.validate(`out_items.${index}.product_unit_conversion_value` as any);
+                      stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                    "
+                    :class="[
+                      'text-right',
+                      {
+                        'border-danger': stockAdjustmentForm.invalid(
+                          `out_items.${index}.product_unit_conversion_value` as any,
+                        ),
+                      },
+                    ]" />
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.product_unit_conversion_value`]
+                    " />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_base_unit_name }}
+                  </div>
+                </div>
+
+                <!-- serials -->
+                <div v-if="item.is_use_serial_number" class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{
+                      'text-danger': stockAdjustmentForm.invalid(`out_items.${index}.serials` as any),
+                    }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addOutProductSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div v-for="(serial, sIdx) in item.serials" :key="sIdx" class="flex gap-2">
+                      <FormInput v-model="serial.serial" :placeholder="t('views.product.fields.serial_number')" :class="{
+                        'border-danger': stockAdjustmentForm.invalid(`out_items.${index}.serials.${sIdx}.serial` as any),
+                      }" @change="
+                        stockAdjustmentForm.validate(`out_items.${index}.serials.${sIdx}.serial` as any);
+                        stockAdjustmentForm.validate(`out_items.${index}.serials` as any);
+                      " />
+                      <Button type="button" variant="outline-secondary" @click="removeOutProductSerial(index, sIdx)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.serials`]" />
+                  <FormErrorMessages
+                    v-for="(_, sIdx) in item.serials"
+                    :key="`out-products-serial-error-${index}-${sIdx}`"
+                    :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.serials.${sIdx}.serial`]"
+                  />
+                </div>
+
+                <div v-if="outItemsRemarksExpanded[index]" class="col-span-12 space-y-3">
+                  <div>
+                    <FormLabel :class="{
+                      'text-danger': stockAdjustmentForm.invalid(`out_items.${index}.remarks` as any),
+                    }">
+                      {{ t('views.stock_adjustment_out_item.fields.remarks') }}
+                    </FormLabel>
+                    <FormTextarea rows="2" v-model="stockAdjustmentForm.out_items[index].remarks" :class="{
+                      'border-danger': stockAdjustmentForm.invalid(`out_items.${index}.remarks` as any),
+                    }" @change="stockAdjustmentForm.validate(`out_items.${index}.remarks` as any)" />
+                    <FormErrorMessages
+                      :messages="(stockAdjustmentForm.errors as any)[`out_items.${index}.remarks`]" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- out_product actions -->
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel></FormLabel>
+            <Button type="button" variant="primary" class="shadow-md" @click="addOutProduct">
+              {{ t('views.stock_adjustment_out_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4 p-5">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md"
+            :disabled="stockAdjustmentForm.validating || stockAdjustmentForm.hasErrors">
+            <Lucide v-if="stockAdjustmentForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+
+    <!-- product_unit modal -->
+    <Dialog size="xl" :open="showProductUnitModal" @close="
+      () => {
+        showProductUnitModal = false;
+      }
+    " @after-leave="handleProductUnitModalAfterLeave">
+      <Dialog.Panel>
+        <div class="p-5">
+          <!-- modal header -->
+          <div class="flex items-center justify-between mb-4">
+            <FormLabel>
+              {{ t('views.stock_adjustment_in_item.table.title') }}
+            </FormLabel>
+            <button type="button" class="text-slate-500 hover:text-danger" @click="showProductUnitModal = false">
+              <Lucide icon="X" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <!-- search box -->
+          <div class="flex items-center gap-2 mb-4">
+            <FormInput id="product-unit-search-input" v-model="productSearchText" type="text"
+              :placeholder="t('components.search-box.placeholder.search')" @keyup.enter="searchProductUnits" />
+            <Button type="button" variant="primary" class="shadow-md" @click="searchProductUnits" tabindex="-1"
+              :disabled="isSearchingProductUnit">
+              <template v-if="isSearchingProductUnit">
+                <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+              </template>
+              <template v-else>
+                {{ t('components.buttons.search') }}
+              </template>
+            </Button>
+          </div>
+
+          <!-- product unit table -->
+          <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+            <table class="min-w-full text-sm">
+              <thead class="bg-slate-100 dark:bg-darkmode-600">
+                <tr>
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.product.table.cols.image') }}
+                  </th>
+                  <!-- product -->
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.stock_adjustment_in_item.table.cols.product') }}
+                  </th>
+                  <!-- unit -->
+                  <th class="px-3 py-2 text-left">
+                    {{ t('views.product.table.cols.unit') }}
+                  </th>
+                  <!-- conversion_value -->
+                  <th class="px-3 py-2 text-right">
+                    {{ t('views.product.fields.conversion_value') }}
+                  </th>
+                  <!-- product_unit_cogs -->
+                  <th class="px-3 py-2 text-right">
+                    {{ t('views.stock_adjustment_in_item.table.cols.product_unit_cogs') }}
+                  </th>
+                  <!-- actions -->
+                  <th class="px-3 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- empty state -->
+                <tr v-if="productUnitOptions.length === 0">
+                  <td colspan="6" class="px-3 py-4 text-center text-slate-500">
+                    {{ t('components.data-list.data_not_found') }}
+                  </td>
+                </tr>
+
+                <!-- product unit rows -->
+                <tr v-for="(opt, idx) in productUnitOptions" :key="idx"
+                  class="border-t border-slate-200/60 dark:border-darkmode-400">
+                  <td class="px-3 py-2">
+                    <ProductImagePreview :image-url="opt.product_image_url"
+                      wrapper-class="w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                      icon-class="w-4 h-4 text-slate-400" />
+                  </td>
+                  <!-- product -->
+                  <td class="px-3 py-2">[{{ opt.product_code }}] {{ opt.product_name }}</td>
+                  <!-- unit -->
+                  <td class="px-3 py-2">
+                    {{ opt.unit_name }}
+                  </td>
+                  <!-- conversion_value -->
+                  <td class="px-3 py-2 text-right">
+                    {{ formatCurrency(opt.conversion_value) }}
+                  </td>
+                  <!-- product_unit_cogs -->
+                  <td class="px-3 py-2 text-right">
+                    {{ formatCurrency(opt.cogs) }}
+                  </td>
+                  <!-- select button -->
+                  <td class="px-3 py-2 text-right">
+                    <Button type="button" variant="primary" size="sm" @click="selectProductUnit(opt)">
+                      {{ t('components.buttons.select') }}
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  </form>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentInItemIndex.vue b/web/src/pages/stock-adjustment/StockAdjustmentInItemIndex.vue
new file mode 100644
index 000000000..a8af1ea06
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentInItemIndex.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+  import { ref, provide } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import Lucide from '@/components/Base/Lucide';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import StockAdjustmentInItemList from './StockAdjustmentInItemList.vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+  const profileService = new ProfileService();
+
+  const mode = ref<ViewMode>(ViewMode.LIST);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.stock_adjustment_in_item.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const stockAdjustmentInItemNotification = ref<NotificationElement>();
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+
+  provide('bind[stockAdjustmentInItemNotification]', (el: NotificationElement) => {
+    stockAdjustmentInItemNotification.value = el;
+  });
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.stock_adjustment_in_item.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    const userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (stockAdjustmentInItemNotification.value) {
+      stockAdjustmentInItemNotification.value.showToast();
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <!-- No optional buttons for now -->
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <StockAdjustmentInItemList
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="stockAdjustmentInItemNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentInItemList.vue b/web/src/pages/stock-adjustment/StockAdjustmentInItemList.vue
new file mode 100644
index 000000000..d669ee9ed
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentInItemList.vue
@@ -0,0 +1,736 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { DataListFlex } from '@/components/DataList';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { Dialog } from '@/components/Base/Headless';
+  import StockAdjustmentInItemService from '@/services/StockAdjustmentInItemService';
+  import { StockAdjustmentInItem } from '@/types/models/StockAdjustmentInItem';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { StockAdjustmentInItemReadAnyPaginateRequest } from '@/types/services/stock-adjustment-in-item/StockAdjustmentInItemRequest';
+  import { useRouter } from 'vue-router';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { formatCurrency, formatDate } from '@/utils/helper';
+  import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+  import { FormInput, FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+  import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import BrandService from '@/services/BrandService';
+  import WarehouseService from '@/services/WarehouseService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const stockAdjustmentInItemService = new StockAdjustmentInItemService();
+  const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+  const productCategoryService = new ProductCategoryService();
+  const brandService = new BrandService();
+  const warehouseService = new WarehouseService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const startDate = ref<string | null>(null);
+  const endDate = ref<string | null>(null);
+  const searchText = ref<string>('');
+  const showAdvancedFilters = ref<boolean>(false);
+  const stockAdjustmentCode = ref<string>('');
+  const productUnitCode = ref<string>('');
+  const productName = ref<string>('');
+  const selectedCategoryId = ref<string | null>(null);
+  const selectedInWarehouseId = ref<string | null>(null);
+  const selectedOutWarehouseId = ref<string | null>(null);
+  const selectedProductCategoryId = ref<string | null>(null);
+  const selectedProductBrandId = ref<string | null>(null);
+
+  const stockAdjustmentInItemLists = ref<Collection<Array<StockAdjustmentInItem>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  const categoryDDL = ref<Array<DropDownOption> | null>(null);
+  const categorySearch = ref<string>('');
+  const categoryOptions = computed(() =>
+    (categoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const inWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+  const inWarehouseSearch = ref<string>('');
+  const inWarehouseOptions = computed(() =>
+    (inWarehouseDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const outWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+  const outWarehouseSearch = ref<string>('');
+  const outWarehouseOptions = computed(() =>
+    (outWarehouseDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+  const productCategoryDDL = ref<Array<DropDownOption> | null>(null);
+  const productCategorySearch = ref<string>('');
+  const productCategoryOptions = computed(() =>
+    (productCategoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+  const productBrandDDL = ref<Array<DropDownOption> | null>(null);
+  const productBrandSearch = ref<string>('');
+  const productBrandOptions = computed(() =>
+    (productBrandDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+      return;
+    }
+
+    const now = new Date();
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+    startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+    endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+    await getStockAdjustmentInItems('', true, 1, 10);
+  });
+
+  const getStockAdjustmentInItems = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+    searchText.value = search;
+
+    const request: StockAdjustmentInItemReadAnyPaginateRequest = {
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      stock_adjustment_code: stockAdjustmentCode.value || null,
+      stock_adjustment_start_date: startDate.value || null,
+      stock_adjustment_end_date: endDate.value || null,
+      stock_adjustment_category_id: selectedCategoryId.value,
+      stock_adjustment_in_warehouse_id: selectedInWarehouseId.value,
+      stock_adjustment_out_warehouse_id: selectedOutWarehouseId.value,
+      product_unit_code: productUnitCode.value || null,
+      product_unit_product_name: productName.value || null,
+      product_unit_product_category_id: selectedProductCategoryId.value,
+      product_unit_product_brand_id: selectedProductBrandId.value,
+      refresh,
+      page,
+      per_page,
+    };
+
+    const result: ServiceResponse<Collection<Array<StockAdjustmentInItem>> | null> =
+      await stockAdjustmentInItemService.readAnyPaginate(request);
+
+    if (result.success && result.data) {
+      stockAdjustmentInItemLists.value = result.data;
+      showAlertPlaceholder('hidden', '', null);
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const handleDataListChange = async (data: DataListEmittedData) => {
+    await getStockAdjustmentInItems(
+      data.search.text, 
+      true, 
+      data.pagination.page, 
+      data.pagination.per_page
+    );
+  };
+
+  const handleDateFilterChange = async () => {
+    const perPage = stockAdjustmentInItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleTextFilterChange = async () => {
+    const perPage = stockAdjustmentInItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleCategoryFilterChange = async () => {
+    const perPage = stockAdjustmentInItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleInWarehouseFilterChange = async () => {
+    const perPage = stockAdjustmentInItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleOutWarehouseFilterChange = async () => {
+    const perPage = stockAdjustmentInItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleProductCategoryFilterChange = async () => {
+    const perPage = stockAdjustmentInItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleProductBrandFilterChange = async () => {
+    const perPage = stockAdjustmentInItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItems(searchText.value, true, 1, perPage);
+  };
+
+  const loadInWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      status: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      inWarehouseDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadOutWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      status: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      outWarehouseDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await stockAdjustmentCategoryService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      include_id: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      categoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadProductCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await productCategoryService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      type: 1,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      productCategoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadProductBrandDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await brandService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      productBrandDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const clearCategoryFilter = () => {
+    selectedCategoryId.value = null;
+    categorySearch.value = '';
+  };
+
+  const clearInWarehouseFilter = () => {
+    selectedInWarehouseId.value = null;
+    inWarehouseSearch.value = '';
+  };
+
+  const clearOutWarehouseFilter = () => {
+    selectedOutWarehouseId.value = null;
+    outWarehouseSearch.value = '';
+  };
+
+  const clearProductCategoryFilter = () => {
+    selectedProductCategoryId.value = null;
+    productCategorySearch.value = '';
+  };
+
+  const clearProductBrandFilter = () => {
+    selectedProductBrandId.value = null;
+    productBrandSearch.value = '';
+  };
+
+  const toggleAdvancedFilters = async () => {
+    showAdvancedFilters.value = !showAdvancedFilters.value;
+    if (showAdvancedFilters.value) {
+      await Promise.all([
+        loadCategoryDDL(categorySearch.value),
+        loadInWarehouseDDL(inWarehouseSearch.value),
+        loadOutWarehouseDDL(outWarehouseSearch.value),
+        loadProductCategoryDDL(productCategorySearch.value),
+        loadProductBrandDDL(productBrandSearch.value),
+      ]);
+    }
+  };
+
+  const deleteSelected = (idx: number) => {
+    if (!stockAdjustmentInItemLists.value) return;
+
+    const ulid = stockAdjustmentInItemLists.value.data[idx].ulid;
+    deleteUlid.value = ulid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    const result = await stockAdjustmentInItemService.delete(deleteUlid.value);
+
+    emits('loading-state', false);
+
+    if (result.success) {
+      emits('update-profile');
+      await getStockAdjustmentInItems('', true, 1, 10);
+      showNotification(
+        t('components.delete-modal.title'),
+        t('components.delete-modal.message'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    const n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    const ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const getProductMainImageUrl = (item: StockAdjustmentInItem): string | null => {
+    const images = item.product_unit?.product?.product_images ?? [];
+    if (images.length === 0) return null;
+
+    const mainImage = images.find((img) => img.is_main);
+    if (mainImage?.url) return mainImage.url;
+
+    return images[0]?.url ?? null;
+  };
+
+  const getBaseUnitName = (item: StockAdjustmentInItem): string => {
+    const baseUnitFromRelation = (item.product_unit?.product as any)?.base_product_unit?.unit?.name;
+    if (baseUnitFromRelation) return baseUnitFromRelation;
+
+    const units = item.product_unit?.product?.product_units ?? [];
+    const baseUnit =
+      units.find((unit) => unit.is_base) ??
+      units.find((unit) => Number(unit.conversion_value) === 1) ??
+      units.find((unit) => unit.is_primary_unit) ??
+      null;
+
+    return baseUnit?.unit?.name ?? '';
+  };
+
+  const getQtyDisplay = (item: StockAdjustmentInItem): string => {
+    const qty = formatCurrency(item.qty);
+    const unitName = item.product_unit?.unit?.name ?? '';
+    if (!unitName) return qty;
+
+    const conversionValue = Number(item.product_unit_conversion_value ?? 1);
+    if (conversionValue <= 1) return `${qty} ${unitName}`;
+
+    const baseUnitName = getBaseUnitName(item);
+    if (!baseUnitName || baseUnitName === unitName) return `${qty} ${unitName}`;
+
+    const baseQty = formatCurrency(item.qty * conversionValue);
+    return `${qty} ${unitName} (${baseQty} ${baseUnitName})`;
+  };
+
+  const getConversionValueDisplay = (item: StockAdjustmentInItem): string => {
+    const conversionValue = formatCurrency(item.product_unit_conversion_value);
+    const productUnit = item.product_unit;
+    if (!productUnit || productUnit.is_base) return conversionValue;
+
+    const baseUnitName = getBaseUnitName(item);
+    const currentUnitName = productUnit.unit?.name ?? '';
+    if (!baseUnitName || !currentUnitName) return conversionValue;
+
+    return `${conversionValue} ${baseUnitName} / ${currentUnitName}`;
+  };
+
+  const getBaseUnitCogsDisplay = (item: StockAdjustmentInItem): string => {
+    const baseUnitName = getBaseUnitName(item);
+    const baseUnitCogs = formatCurrency(item.product_unit_base_unit_cogs);
+    if (!baseUnitName) return baseUnitCogs;
+
+    return `${baseUnitCogs} / ${baseUnitName}`;
+  };
+
+  const getSerialsDisplay = (item: StockAdjustmentInItem): string => {
+    const serials = item.serials ?? [];
+    if (serials.length === 0) return '-';
+
+    return serials.map((serialItem) => serialItem.serial).join(', ');
+  };
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+          <Button
+            variant="soft-secondary"
+            class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+            @click="toggleAdvancedFilters"
+          >
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.stock_adjustment_code') }}
+            </FormLabel>
+            <FormInput v-model="stockAdjustmentCode" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.category_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedCategoryId" v-model:search="categorySearch" :options="categoryOptions"
+                  :placeholder="t('components.dropdown.placeholder')" @change="handleCategoryFilterChange"
+                  @search="loadCategoryDDL" @clear="clearCategoryFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.in_warehouse_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedInWarehouseId" v-model:search="inWarehouseSearch"
+                  :options="inWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleInWarehouseFilterChange" @search="loadInWarehouseDDL" @clear="clearInWarehouseFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.out_warehouse_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedOutWarehouseId" v-model:search="outWarehouseSearch"
+                  :options="outWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleOutWarehouseFilterChange" @search="loadOutWarehouseDDL"
+                  @clear="clearOutWarehouseFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.product_unit_code') }}
+            </FormLabel>
+            <FormInput v-model="productUnitCode" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.product_name') }}
+            </FormLabel>
+            <FormInput v-model="productName" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.product.fields.category_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedProductCategoryId" v-model:search="productCategorySearch"
+                  :options="productCategoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleProductCategoryFilterChange" @search="loadProductCategoryDDL"
+                  @clear="clearProductCategoryFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.product.fields.brand_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedProductBrandId" v-model:search="productBrandSearch"
+                  :options="productBrandOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleProductBrandFilterChange" @search="loadProductBrandDDL"
+                  @clear="clearProductBrandFilter" />
+              </div>
+            </div>
+          </div>
+      </div>
+      <DataListFlex
+        :data="stockAdjustmentInItemLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="stockAdjustmentInItemLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="stockAdjustmentInItemLists ? stockAdjustmentInItemLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+            <!-- Product Image -->
+            <div class="col-span-12 lg:col-span-1 md:col-span-12 flex items-center justify-center md:justify-start">
+              <ProductImagePreview
+                :image-url="getProductMainImageUrl(item as StockAdjustmentInItem)"
+                wrapper-class="w-12 h-12 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                icon-class="w-4 h-4 text-slate-400"
+              />
+            </div>
+
+            <!-- Stock Adjustment -->
+            <div class="col-span-12 lg:col-span-4 md:col-span-5 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.stock_adjustment.page_title') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.code') }}:
+                {{ (item as StockAdjustmentInItem).stock_adjustment?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.date') }}:
+                {{ (item as StockAdjustmentInItem).stock_adjustment?.date ? formatDate((item as StockAdjustmentInItem).stock_adjustment.date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.category_id') }}:
+                {{ (item as StockAdjustmentInItem).stock_adjustment?.category?.name ?? '-' }}
+              </div>              
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.in_warehouse_id') }}:
+                {{ (item as StockAdjustmentInItem).stock_adjustment?.in_warehouse?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.out_warehouse_id') }}:
+                {{ (item as StockAdjustmentInItem).stock_adjustment?.out_warehouse?.name ?? '-' }}
+              </div>
+              <div v-if="(item as StockAdjustmentInItem).stock_adjustment?.remarks?.trim()" class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.remarks') }}:
+                {{ (item as StockAdjustmentInItem).stock_adjustment?.remarks }}
+              </div>
+            </div>
+
+            <!-- Product -->
+            <div class="col-span-12 lg:col-span-3 md:col-span-4 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.product.page_title') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.code') }}:
+                {{ (item as StockAdjustmentInItem).product_unit?.product?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.name') }}:
+                {{ (item as StockAdjustmentInItem).product_unit?.product?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.category_id') }}:
+                {{ (item as StockAdjustmentInItem).product_unit?.product?.category?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.brand_id') }}:
+                {{ (item as StockAdjustmentInItem).product_unit?.product?.brand?.name ?? '-' }}
+              </div>
+            </div>
+
+            <!-- Product Unit -->
+            <div class="col-span-12 lg:col-span-3 md:col-span-3 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.stock_adjustment_in_item.table.cols.product_unit') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.unit_code') }}:
+                {{ (item as StockAdjustmentInItem).product_unit?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment_in_item.table.cols.qty') }}:
+                {{ getQtyDisplay(item as StockAdjustmentInItem) }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment_in_item.table.cols.product_unit_cogs') }}:
+                {{ formatCurrency((item as StockAdjustmentInItem).product_unit_cogs) }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment_in_item.table.cols.product_unit_total_cogs') }}:
+                {{ formatCurrency((item as StockAdjustmentInItem).product_unit_total_cogs) }}
+              </div>
+              <div v-if="
+                Number((item as StockAdjustmentInItem).product_unit_conversion_value ?? 1) > 1
+                && !((item as StockAdjustmentInItem).product_unit?.is_base)
+              " class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment_in_item.table.cols.product_unit_base_unit_cogs') }}:
+                {{ getBaseUnitCogsDisplay(item as StockAdjustmentInItem) }}
+              </div>
+              <div v-if="(item as StockAdjustmentInItem).remarks?.trim()" class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment_in_item.table.cols.remarks') }}:
+                {{ (item as StockAdjustmentInItem).remarks }}
+              </div>
+              <div v-if="((item as StockAdjustmentInItem).serials?.length ?? 0) > 0" class="text-slate-500 text-xs mt-1">
+                <span class="font-medium">{{ t('views.product.fields.serial_number') }}:</span>
+                <span class="break-all"> {{ getSerialsDisplay(item as StockAdjustmentInItem) }}</span>
+              </div>
+            </div>
+
+            <!-- Delete Button -->
+            <div class="col-span-12 lg:col-span-1 md:col-span-12 flex justify-end items-center gap-2">
+              <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+              </Button>
+            </div>
+          </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="deleteModalShow = false">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" @click="deleteModalShow = false" class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentInItemSerialIndex.vue b/web/src/pages/stock-adjustment/StockAdjustmentInItemSerialIndex.vue
new file mode 100644
index 000000000..f82fcc0cf
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentInItemSerialIndex.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+  import { ref, provide } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import StockAdjustmentInItemSerialList from './StockAdjustmentInItemSerialList.vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+  const profileService = new ProfileService();
+
+  const mode = ref<ViewMode>(ViewMode.LIST);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.stock_adjustment_in_item_serial.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const stockAdjustmentInItemSerialNotification = ref<NotificationElement>();
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+
+  provide('bind[stockAdjustmentInItemSerialNotification]', (el: NotificationElement) => {
+    stockAdjustmentInItemSerialNotification.value = el;
+  });
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.stock_adjustment_in_item_serial.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    const userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (stockAdjustmentInItemSerialNotification.value) {
+      stockAdjustmentInItemSerialNotification.value.showToast();
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <!-- No optional buttons for now -->
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <StockAdjustmentInItemSerialList
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="stockAdjustmentInItemSerialNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentInItemSerialList.vue b/web/src/pages/stock-adjustment/StockAdjustmentInItemSerialList.vue
new file mode 100644
index 000000000..cf9d6d02d
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentInItemSerialList.vue
@@ -0,0 +1,643 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { DataListFlex } from '@/components/DataList';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { Dialog } from '@/components/Base/Headless';
+  import StockAdjustmentInItemSerialService from '@/services/StockAdjustmentInItemSerialService';
+  import { StockAdjustmentInItemSerial } from '@/types/models/StockAdjustmentInItemSerial';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { StockAdjustmentInItemSerialReadAnyPaginateRequest } from '@/types/services/stock-adjustment-in-item-serial/StockAdjustmentInItemSerialRequest';
+  import { useRouter } from 'vue-router';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+  import { FormInput, FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+  import { formatDate } from '@/utils/helper';
+  import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import BrandService from '@/services/BrandService';
+  import WarehouseService from '@/services/WarehouseService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const stockAdjustmentInItemSerialService = new StockAdjustmentInItemSerialService();
+  const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+  const productCategoryService = new ProductCategoryService();
+  const brandService = new BrandService();
+  const warehouseService = new WarehouseService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const startDate = ref<string | null>(null);
+  const endDate = ref<string | null>(null);
+  const searchText = ref<string>('');
+  const showAdvancedFilters = ref<boolean>(false);
+  const stockAdjustmentCode = ref<string>('');
+  const productUnitCode = ref<string>('');
+  const productName = ref<string>('');
+  const selectedCategoryId = ref<string | null>(null);
+  const selectedInWarehouseId = ref<string | null>(null);
+  const selectedOutWarehouseId = ref<string | null>(null);
+  const selectedProductCategoryId = ref<string | null>(null);
+  const selectedProductBrandId = ref<string | null>(null);
+
+  const stockAdjustmentInItemSerialLists = ref<Collection<Array<StockAdjustmentInItemSerial>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  const categoryDDL = ref<Array<DropDownOption> | null>(null);
+  const categorySearch = ref<string>('');
+  const categoryOptions = computed(() =>
+    (categoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const inWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+  const inWarehouseSearch = ref<string>('');
+  const inWarehouseOptions = computed(() =>
+    (inWarehouseDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const outWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+  const outWarehouseSearch = ref<string>('');
+  const outWarehouseOptions = computed(() =>
+    (outWarehouseDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+  const productCategoryDDL = ref<Array<DropDownOption> | null>(null);
+  const productCategorySearch = ref<string>('');
+  const productCategoryOptions = computed(() =>
+    (productCategoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+  const productBrandDDL = ref<Array<DropDownOption> | null>(null);
+  const productBrandSearch = ref<string>('');
+  const productBrandOptions = computed(() =>
+    (productBrandDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+      return;
+    }
+
+    const now = new Date();
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+    startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+    endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+    await getStockAdjustmentInItemSerials('', true, 1, 10);
+  });
+
+  const getStockAdjustmentInItemSerials = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+    searchText.value = search;
+
+    const request: StockAdjustmentInItemSerialReadAnyPaginateRequest = {
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      stock_adjustment_code: stockAdjustmentCode.value || null,
+      stock_adjustment_start_date: startDate.value || null,
+      stock_adjustment_end_date: endDate.value || null,
+      stock_adjustment_category_id: selectedCategoryId.value,
+      stock_adjustment_in_warehouse_id: selectedInWarehouseId.value,
+      stock_adjustment_out_warehouse_id: selectedOutWarehouseId.value,
+      product_unit_code: productUnitCode.value || null,
+      product_unit_product_name: productName.value || null,
+      product_unit_product_category_id: selectedProductCategoryId.value,
+      product_unit_product_brand_id: selectedProductBrandId.value,
+      refresh,
+      page,
+      per_page,
+    };
+
+    const result: ServiceResponse<Collection<Array<StockAdjustmentInItemSerial>> | null> =
+      await stockAdjustmentInItemSerialService.readAnyPaginate(request);
+
+    if (result.success && result.data) {
+      stockAdjustmentInItemSerialLists.value = result.data;
+      showAlertPlaceholder('hidden', '', null);
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const handleDataListChange = async (data: DataListEmittedData) => {
+    await getStockAdjustmentInItemSerials(
+      data.search.text, 
+      true, 
+      data.pagination.page, 
+      data.pagination.per_page
+    );
+  };
+
+  const handleDateFilterChange = async () => {
+    const perPage = stockAdjustmentInItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleTextFilterChange = async () => {
+    const perPage = stockAdjustmentInItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleCategoryFilterChange = async () => {
+    const perPage = stockAdjustmentInItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleInWarehouseFilterChange = async () => {
+    const perPage = stockAdjustmentInItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleOutWarehouseFilterChange = async () => {
+    const perPage = stockAdjustmentInItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleProductCategoryFilterChange = async () => {
+    const perPage = stockAdjustmentInItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleProductBrandFilterChange = async () => {
+    const perPage = stockAdjustmentInItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentInItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const loadInWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      status: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      inWarehouseDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadOutWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      status: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      outWarehouseDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await stockAdjustmentCategoryService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      include_id: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      categoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadProductCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await productCategoryService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      type: 1,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      productCategoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadProductBrandDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await brandService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      productBrandDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const clearCategoryFilter = () => {
+    selectedCategoryId.value = null;
+    categorySearch.value = '';
+  };
+
+  const clearInWarehouseFilter = () => {
+    selectedInWarehouseId.value = null;
+    inWarehouseSearch.value = '';
+  };
+
+  const clearOutWarehouseFilter = () => {
+    selectedOutWarehouseId.value = null;
+    outWarehouseSearch.value = '';
+  };
+
+  const clearProductCategoryFilter = () => {
+    selectedProductCategoryId.value = null;
+    productCategorySearch.value = '';
+  };
+
+  const clearProductBrandFilter = () => {
+    selectedProductBrandId.value = null;
+    productBrandSearch.value = '';
+  };
+
+  const toggleAdvancedFilters = async () => {
+    showAdvancedFilters.value = !showAdvancedFilters.value;
+    if (showAdvancedFilters.value) {
+      await Promise.all([
+        loadCategoryDDL(categorySearch.value),
+        loadInWarehouseDDL(inWarehouseSearch.value),
+        loadOutWarehouseDDL(outWarehouseSearch.value),
+        loadProductCategoryDDL(productCategorySearch.value),
+        loadProductBrandDDL(productBrandSearch.value),
+      ]);
+    }
+  };
+
+  const deleteSelected = (idx: number) => {
+    if (!stockAdjustmentInItemSerialLists.value) return;
+
+    const ulid = stockAdjustmentInItemSerialLists.value.data[idx].ulid;
+    deleteUlid.value = ulid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    const result = await stockAdjustmentInItemSerialService.delete(deleteUlid.value);
+
+    emits('loading-state', false);
+
+    if (result.success) {
+      emits('update-profile');
+      await getStockAdjustmentInItemSerials('', true, 1, 10);
+      showNotification(
+        t('components.delete-modal.title'),
+        t('components.delete-modal.message'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    const n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    const ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const getProductMainImageUrl = (item: StockAdjustmentInItemSerial): string | null => {
+    const images = item.stock_adjustment_in_item?.product_unit?.product?.product_images ?? [];
+    if (images.length === 0) return null;
+
+    const mainImage = images.find((img) => img.is_main);
+    if (mainImage?.url) return mainImage.url;
+
+    return images[0]?.url ?? null;
+  };
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+          <Button
+            variant="soft-secondary"
+            class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+            @click="toggleAdvancedFilters"
+          >
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.stock_adjustment_code') }}
+            </FormLabel>
+            <FormInput v-model="stockAdjustmentCode" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.category_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedCategoryId" v-model:search="categorySearch" :options="categoryOptions"
+                  :placeholder="t('components.dropdown.placeholder')" @change="handleCategoryFilterChange"
+                  @search="loadCategoryDDL" @clear="clearCategoryFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.in_warehouse_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedInWarehouseId" v-model:search="inWarehouseSearch"
+                  :options="inWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleInWarehouseFilterChange" @search="loadInWarehouseDDL" @clear="clearInWarehouseFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.out_warehouse_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedOutWarehouseId" v-model:search="outWarehouseSearch"
+                  :options="outWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleOutWarehouseFilterChange" @search="loadOutWarehouseDDL"
+                  @clear="clearOutWarehouseFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.product_unit_code') }}
+            </FormLabel>
+            <FormInput v-model="productUnitCode" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.product_name') }}
+            </FormLabel>
+            <FormInput v-model="productName" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.product.fields.category_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedProductCategoryId" v-model:search="productCategorySearch"
+                  :options="productCategoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleProductCategoryFilterChange" @search="loadProductCategoryDDL"
+                  @clear="clearProductCategoryFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.product.fields.brand_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedProductBrandId" v-model:search="productBrandSearch"
+                  :options="productBrandOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleProductBrandFilterChange" @search="loadProductBrandDDL"
+                  @clear="clearProductBrandFilter" />
+              </div>
+            </div>
+          </div>
+      </div>
+      <DataListFlex
+        :data="stockAdjustmentInItemSerialLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="stockAdjustmentInItemSerialLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="stockAdjustmentInItemSerialLists ? stockAdjustmentInItemSerialLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+            <div class="col-span-12 lg:col-span-1 md:col-span-12 flex items-center justify-center md:justify-start">
+              <ProductImagePreview
+                :image-url="getProductMainImageUrl(item as StockAdjustmentInItemSerial)"
+                wrapper-class="w-12 h-12 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                icon-class="w-4 h-4 text-slate-400"
+              />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-5 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.stock_adjustment.page_title') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.code') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.date') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment?.date ? formatDate(String((item as StockAdjustmentInItemSerial).stock_adjustment?.date), 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.category_id') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment?.category?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.in_warehouse_id') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment?.in_warehouse?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.out_warehouse_id') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment?.out_warehouse?.name ?? '-' }}
+              </div>
+              <div v-if="(item as StockAdjustmentInItemSerial).stock_adjustment?.remarks?.trim()" class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.remarks') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment?.remarks }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.product.page_title') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.code') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment_in_item?.product_unit?.product?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.name') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment_in_item?.product_unit?.product?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.unit_code') }}:
+                {{ (item as StockAdjustmentInItemSerial).stock_adjustment_in_item?.product_unit?.code ?? '-' }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-2 md:col-span-2 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.product.fields.serial_number') }}
+              </div>
+              <div class="text-slate-500 text-xs break-all">
+                {{ (item as StockAdjustmentInItemSerial).serial || '-' }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-1 md:col-span-12 flex justify-end items-center gap-2">
+              <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+              </Button>
+            </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="deleteModalShow = false">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" @click="deleteModalShow = false" class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentIndex.vue b/web/src/pages/stock-adjustment/StockAdjustmentIndex.vue
new file mode 100644
index 000000000..78eb5e400
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentIndex.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+  import { ref, provide } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.stock_adjustment.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const stockAdjustmentNotification = ref<NotificationElement>();
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+
+  provide('bind[stockAdjustmentNotification]', (el: NotificationElement) => {
+    stockAdjustmentNotification.value = el;
+  });
+
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-stock-adjustment-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-stock-adjustment-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.stock_adjustment.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.stock_adjustment.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.stock_adjustment.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    const userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (stockAdjustmentNotification.value) {
+      stockAdjustmentNotification.value.showToast();
+    }
+  };
+
+  const clearCache = (currentMode: ViewMode) => {
+    switch (currentMode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('STOCK_ADJUSTMENT_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('STOCK_ADJUSTMENT_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="stockAdjustmentNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentList.vue b/web/src/pages/stock-adjustment/StockAdjustmentList.vue
new file mode 100644
index 000000000..c2d2f5e34
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentList.vue
@@ -0,0 +1,567 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import StockAdjustmentService from '@/services/StockAdjustmentService';
+import { StockAdjustment } from '@/types/models/StockAdjustment';
+import { NotificationData } from '@/types/models/NotificationData';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { StockAdjustmentReadAnyPaginateRequest } from '@/types/services/stock-adjustment/StockAdjustmentRequest';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { formatDate, formatCurrency } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+import WarehouseService from '@/services/WarehouseService';
+import { DropDownOption } from '@/types/models/DropDownOption';
+
+const { t } = useI18n();
+const router = useRouter();
+const stockAdjustmentService = new StockAdjustmentService();
+const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+const warehouseService = new WarehouseService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+const showAdvancedFilters = ref<boolean>(false);
+const selectedCategoryId = ref<string | null>(null);
+const selectedInWarehouseId = ref<string | null>(null);
+const selectedOutWarehouseId = ref<string | null>(null);
+
+const stockAdjustmentLists = ref<Collection<Array<StockAdjustment>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const categoryDDL = ref<Array<DropDownOption> | null>(null);
+const categorySearch = ref<string>('');
+const categoryOptions = computed(() =>
+  (categoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const inWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const inWarehouseSearch = ref<string>('');
+const inWarehouseOptions = computed(() =>
+  (inWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const outWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const outWarehouseSearch = ref<string>('');
+const outWarehouseOptions = computed(() =>
+  (outWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getStockAdjustments('', true, 1, 10);
+});
+
+const getStockAdjustments = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+
+  const request: StockAdjustmentReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value || null,
+    end_date: endDate.value || null,
+    category_id: selectedCategoryId.value,
+    in_warehouse_id: selectedInWarehouseId.value,
+    out_warehouse_id: selectedOutWarehouseId.value,
+    refresh,
+    page,
+    per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<StockAdjustment>> | null> =
+    await stockAdjustmentService.readAnyPaginate(request);
+
+  if (result.success && result.data) {
+    stockAdjustmentLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getStockAdjustments(
+    data.search.text,
+    true,
+    data.pagination.page,
+    data.pagination.per_page
+  );
+};
+
+const handleDateFilterChange = async () => {
+  const perPage = stockAdjustmentLists.value?.meta.per_page || 10;
+  await getStockAdjustments(searchText.value, true, 1, perPage);
+};
+
+const handleCategoryFilterChange = async () => {
+  const perPage = stockAdjustmentLists.value?.meta.per_page || 10;
+  await getStockAdjustments(searchText.value, true, 1, perPage);
+};
+
+const handleInWarehouseFilterChange = async () => {
+  const perPage = stockAdjustmentLists.value?.meta.per_page || 10;
+  await getStockAdjustments(searchText.value, true, 1, perPage);
+};
+
+const handleOutWarehouseFilterChange = async () => {
+  const perPage = stockAdjustmentLists.value?.meta.per_page || 10;
+  await getStockAdjustments(searchText.value, true, 1, perPage);
+};
+
+const loadInWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    inWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadOutWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    outWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await stockAdjustmentCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    include_id: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    categoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearCategoryFilter = () => {
+  selectedCategoryId.value = null;
+  categorySearch.value = '';
+};
+
+const clearInWarehouseFilter = () => {
+  selectedInWarehouseId.value = null;
+  inWarehouseSearch.value = '';
+};
+
+const clearOutWarehouseFilter = () => {
+  selectedOutWarehouseId.value = null;
+  outWarehouseSearch.value = '';
+};
+
+const toggleAdvancedFilters = async () => {
+  showAdvancedFilters.value = !showAdvancedFilters.value;
+  if (showAdvancedFilters.value) {
+    await Promise.all([
+      loadCategoryDDL(categorySearch.value),
+      loadInWarehouseDDL(inWarehouseSearch.value),
+      loadOutWarehouseDDL(outWarehouseSearch.value),
+    ]);
+  }
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (idx: number) => {
+  if (!stockAdjustmentLists.value) return;
+
+  const ulid = stockAdjustmentLists.value.data[idx].ulid;
+
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({
+    name: 'side-menu-stock-adjustment-edit',
+    params: { ulid: ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!stockAdjustmentLists.value) return;
+
+  const ulid = stockAdjustmentLists.value.data[idx].ulid;
+  deleteUlid.value = ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await stockAdjustmentService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getStockAdjustments('', true, 1, 10);
+    showNotification(
+      t('views.stock_adjustment.alert.delete.title'),
+      t('views.stock_adjustment.alert.delete.message'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <!-- page layout -->
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-1 flex items-end">
+          <Button variant="soft-secondary"
+            class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+            @click="toggleAdvancedFilters">
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 md:col-span-4 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.category_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="selectedCategoryId" v-model:search="categorySearch" :options="categoryOptions"
+                :placeholder="t('components.dropdown.placeholder')" @change="handleCategoryFilterChange"
+                @search="loadCategoryDDL" @clear="clearCategoryFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-4 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.in_warehouse_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="selectedInWarehouseId" v-model:search="inWarehouseSearch"
+                :options="inWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleInWarehouseFilterChange" @search="loadInWarehouseDDL" @clear="clearInWarehouseFilter" />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-4 lg:col-span-2">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.out_warehouse_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch v-model="selectedOutWarehouseId" v-model:search="outWarehouseSearch"
+                :options="outWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleOutWarehouseFilterChange" @search="loadOutWarehouseDDL"
+                @clear="clearOutWarehouseFilter" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <DataListFlex :data="stockAdjustmentLists" :enable-search="true" :can-print="true" :can-export="true"
+        :rows="stockAdjustmentLists?.data ?? []" row-class="bg-white dark:bg-darkmode-600"
+        :pagination="stockAdjustmentLists ? stockAdjustmentLists.meta : null" @dataListChanged="handleDataListChange">
+        <template #row="{ item, index }">
+          <div class="col-span-12 lg:col-span-5 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.stock_adjustment.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_adjustment.fields.code') }}:
+              {{ (item as StockAdjustment).code ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_adjustment.fields.date') }}:
+              {{ (item as StockAdjustment).date ? formatDate((item as StockAdjustment).date, 'DD-MMM-YYYY HH:mm:ss') :
+              '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_adjustment.fields.category_id') }}:
+              {{ (item as StockAdjustment).category?.name ?? '-' }}
+            </div>
+            <div v-if="(item as StockAdjustment).remarks?.trim()" class="text-slate-500 text-xs">
+              {{ t('views.stock_adjustment.fields.remarks') }}:
+              {{ (item as StockAdjustment).remarks }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.warehouse.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_adjustment.fields.in_warehouse_id') }}:
+              {{ (item as StockAdjustment).in_warehouse?.name ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_adjustment.fields.out_warehouse_id') }}:
+              {{ (item as StockAdjustment).out_warehouse?.name ?? '-' }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-2 md:col-span-2 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.stock_adjustment.fields.is_posted') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              <span class="inline-flex items-center">
+                <Lucide v-if="(item as StockAdjustment).is_posted" icon="CheckCircle" class="w-4 h-4 text-success" />
+                <Lucide v-else icon="X" class="w-4 h-4 text-danger" />
+              </span>
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-1 md:col-span-2 flex justify-end items-start gap-2">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1"
+              @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+
+          <div v-if="expandDetail === index"
+            class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.stock_adjustment.field_groups.in_items') }}
+            </div>
+            <div v-if="((item as StockAdjustment).in_items?.length ?? 0) === 0"
+              class="text-slate-500 text-xs italic">
+              {{ t('components.data-list.data_not_found') }}
+            </div>
+            <div v-else class="space-y-2 text-xs mb-3">
+              <div v-for="(p, productIdx) in (item as StockAdjustment).in_items" :key="p.ulid" class="flex gap-2">
+                <div class="w-6 text-right text-slate-500">{{ productIdx + 1 }}.</div>
+                <div class="flex-1">
+                  <div class="font-medium break-all">
+                    [{{ p.product_unit.code }}] {{ p.product_unit.product.name }}
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.stock_adjustment_in_item.fields.qty') }}:
+                    <span class="font-medium">{{ formatCurrency(p.qty) }} {{ p.product_unit.unit.name }}</span>
+                  </div>
+                  <div v-if="p.product_unit?.product?.is_use_serial_number" class="text-slate-500 mt-0.5">
+                    {{ t('views.product.fields.serial_number') }}:
+                    <span v-if="p.serials?.length" class="break-all">{{p.serials.map((s) => s.serial).join(', ')
+                      }}</span>
+                    <span v-else>{{ t('components.data-list.data_not_found') }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.stock_adjustment.field_groups.out_items') }}
+            </div>
+            <div v-if="((item as StockAdjustment).out_items?.length ?? 0) === 0"
+              class="text-slate-500 text-xs italic">
+              {{ t('components.data-list.data_not_found') }}
+            </div>
+            <div v-else class="space-y-2 text-xs">
+              <div v-for="(p, productIdx) in (item as StockAdjustment).out_items" :key="p.ulid" class="flex gap-2">
+                <div class="w-6 text-right text-slate-500">{{ productIdx + 1 }}.</div>
+                <div class="flex-1">
+                  <div class="font-medium break-all">
+                    [{{ p.product_unit.code }}] {{ p.product_unit.product.name }}
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.stock_adjustment_in_item.fields.qty') }}:
+                    <span class="font-medium">{{ formatCurrency(p.qty) }} {{ p.product_unit.unit.name }}</span>
+                  </div>
+                  <div v-if="p.product_unit?.product?.is_use_serial_number" class="text-slate-500 mt-0.5">
+                    {{ t('views.product.fields.serial_number') }}:
+                    <span v-if="p.serials?.length" class="break-all">{{p.serials.map((s) => s.serial).join(', ')
+                      }}</span>
+                    <span v-else>{{ t('components.data-list.data_not_found') }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+  <!-- delete confirmation modal -->
+  <Dialog :open="deleteModalShow" @close="
+    () => {
+      deleteModalShow = false;
+    }
+  ">
+    <Dialog.Panel>
+      <!-- modal content -->
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">
+          {{ t('components.delete-modal.title') }}
+        </div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <!-- modal actions -->
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" @click="
+          () => {
+            deleteModalShow = false;
+          }
+        " class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentOutItemIndex.vue b/web/src/pages/stock-adjustment/StockAdjustmentOutItemIndex.vue
new file mode 100644
index 000000000..8189b5ef5
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentOutItemIndex.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+  import { ref, provide } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import Lucide from '@/components/Base/Lucide';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import StockAdjustmentOutItemList from './StockAdjustmentOutItemList.vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+  const profileService = new ProfileService();
+
+  const mode = ref<ViewMode>(ViewMode.LIST);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.stock_adjustment_out_item.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const stockAdjustmentOutItemNotification = ref<NotificationElement>();
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+
+  provide('bind[stockAdjustmentOutItemNotification]', (el: NotificationElement) => {
+    stockAdjustmentOutItemNotification.value = el;
+  });
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.stock_adjustment_out_item.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    const userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (stockAdjustmentOutItemNotification.value) {
+      stockAdjustmentOutItemNotification.value.showToast();
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <!-- No optional buttons for now -->
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <StockAdjustmentOutItemList
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="stockAdjustmentOutItemNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentOutItemList.vue b/web/src/pages/stock-adjustment/StockAdjustmentOutItemList.vue
new file mode 100644
index 000000000..a4af4a731
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentOutItemList.vue
@@ -0,0 +1,713 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { DataListFlex } from '@/components/DataList';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { Dialog } from '@/components/Base/Headless';
+  import StockAdjustmentOutItemService from '@/services/StockAdjustmentOutItemService';
+  import { StockAdjustmentOutItem } from '@/types/models/StockAdjustmentOutItem';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { StockAdjustmentOutItemReadAnyPaginateRequest } from '@/types/services/stock-adjustment-out-item/StockAdjustmentOutItemRequest';
+  import { useRouter } from 'vue-router';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { formatCurrency, formatDate } from '@/utils/helper';
+  import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+  import { FormInput, FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+  import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import BrandService from '@/services/BrandService';
+  import WarehouseService from '@/services/WarehouseService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const stockAdjustmentOutItemService = new StockAdjustmentOutItemService();
+  const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+  const productCategoryService = new ProductCategoryService();
+  const brandService = new BrandService();
+  const warehouseService = new WarehouseService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const startDate = ref<string | null>(null);
+  const endDate = ref<string | null>(null);
+  const searchText = ref<string>('');
+  const showAdvancedFilters = ref<boolean>(false);
+  const stockAdjustmentCode = ref<string>('');
+  const productUnitCode = ref<string>('');
+  const productName = ref<string>('');
+  const selectedCategoryId = ref<string | null>(null);
+  const selectedInWarehouseId = ref<string | null>(null);
+  const selectedOutWarehouseId = ref<string | null>(null);
+  const selectedProductCategoryId = ref<string | null>(null);
+  const selectedProductBrandId = ref<string | null>(null);
+
+  const stockAdjustmentOutItemLists = ref<Collection<Array<StockAdjustmentOutItem>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  const categoryDDL = ref<Array<DropDownOption> | null>(null);
+  const categorySearch = ref<string>('');
+  const categoryOptions = computed(() =>
+    (categoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const inWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+  const inWarehouseSearch = ref<string>('');
+  const inWarehouseOptions = computed(() =>
+    (inWarehouseDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const outWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+  const outWarehouseSearch = ref<string>('');
+  const outWarehouseOptions = computed(() =>
+    (outWarehouseDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+  const productCategoryDDL = ref<Array<DropDownOption> | null>(null);
+  const productCategorySearch = ref<string>('');
+  const productCategoryOptions = computed(() =>
+    (productCategoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+  const productBrandDDL = ref<Array<DropDownOption> | null>(null);
+  const productBrandSearch = ref<string>('');
+  const productBrandOptions = computed(() =>
+    (productBrandDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+      return;
+    }
+
+    const now = new Date();
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+    startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+    endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+    await getStockAdjustmentOutItems('', true, 1, 10);
+  });
+
+  const getStockAdjustmentOutItems = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+    searchText.value = search;
+
+    const request: StockAdjustmentOutItemReadAnyPaginateRequest = {
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      stock_adjustment_code: stockAdjustmentCode.value || null,
+      stock_adjustment_start_date: startDate.value || null,
+      stock_adjustment_end_date: endDate.value || null,
+      stock_adjustment_category_id: selectedCategoryId.value,
+      stock_adjustment_in_warehouse_id: selectedInWarehouseId.value,
+      stock_adjustment_out_warehouse_id: selectedOutWarehouseId.value,
+      product_unit_code: productUnitCode.value || null,
+      product_unit_product_name: productName.value || null,
+      product_unit_product_category_id: selectedProductCategoryId.value,
+      product_unit_product_brand_id: selectedProductBrandId.value,
+      refresh,
+      page,
+      per_page,
+    };
+
+    const result: ServiceResponse<Collection<Array<StockAdjustmentOutItem>> | null> =
+      await stockAdjustmentOutItemService.readAnyPaginate(request);
+
+    if (result.success && result.data) {
+      stockAdjustmentOutItemLists.value = result.data;
+      showAlertPlaceholder('hidden', '', null);
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const handleDataListChange = async (data: DataListEmittedData) => {
+    await getStockAdjustmentOutItems(
+      data.search.text, 
+      true, 
+      data.pagination.page, 
+      data.pagination.per_page
+    );
+  };
+
+  const handleDateFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleTextFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleCategoryFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleInWarehouseFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleOutWarehouseFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleProductCategoryFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItems(searchText.value, true, 1, perPage);
+  };
+
+  const handleProductBrandFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItems(searchText.value, true, 1, perPage);
+  };
+
+  const loadInWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      status: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      inWarehouseDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadOutWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      status: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      outWarehouseDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await stockAdjustmentCategoryService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      include_id: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      categoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadProductCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await productCategoryService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      type: 1,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      productCategoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadProductBrandDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await brandService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      productBrandDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const clearCategoryFilter = () => {
+    selectedCategoryId.value = null;
+    categorySearch.value = '';
+  };
+
+  const clearInWarehouseFilter = () => {
+    selectedInWarehouseId.value = null;
+    inWarehouseSearch.value = '';
+  };
+
+  const clearOutWarehouseFilter = () => {
+    selectedOutWarehouseId.value = null;
+    outWarehouseSearch.value = '';
+  };
+
+  const clearProductCategoryFilter = () => {
+    selectedProductCategoryId.value = null;
+    productCategorySearch.value = '';
+  };
+
+  const clearProductBrandFilter = () => {
+    selectedProductBrandId.value = null;
+    productBrandSearch.value = '';
+  };
+
+  const toggleAdvancedFilters = async () => {
+    showAdvancedFilters.value = !showAdvancedFilters.value;
+    if (showAdvancedFilters.value) {
+      await Promise.all([
+        loadCategoryDDL(categorySearch.value),
+        loadInWarehouseDDL(inWarehouseSearch.value),
+        loadOutWarehouseDDL(outWarehouseSearch.value),
+        loadProductCategoryDDL(productCategorySearch.value),
+        loadProductBrandDDL(productBrandSearch.value),
+      ]);
+    }
+  };
+
+  const deleteSelected = (idx: number) => {
+    if (!stockAdjustmentOutItemLists.value) return;
+
+    const ulid = stockAdjustmentOutItemLists.value.data[idx].ulid;
+    deleteUlid.value = ulid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    const result = await stockAdjustmentOutItemService.delete(deleteUlid.value);
+
+    emits('loading-state', false);
+
+    if (result.success) {
+      emits('update-profile');
+      await getStockAdjustmentOutItems('', true, 1, 10);
+      showNotification(
+        t('components.delete-modal.title'),
+        t('components.delete-modal.message'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    const n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    const ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const getProductMainImageUrl = (item: StockAdjustmentOutItem): string | null => {
+    const images = item.product_unit?.product?.product_images ?? [];
+    if (images.length === 0) return null;
+
+    const mainImage = images.find((img) => img.is_main);
+    if (mainImage?.url) return mainImage.url;
+
+    return images[0]?.url ?? null;
+  };
+
+  const getBaseUnitName = (item: StockAdjustmentOutItem): string => {
+    const baseUnitFromRelation = (item.product_unit?.product as any)?.base_product_unit?.unit?.name;
+    if (baseUnitFromRelation) return baseUnitFromRelation;
+
+    const units = item.product_unit?.product?.product_units ?? [];
+    const baseUnit =
+      units.find((unit) => unit.is_base) ??
+      units.find((unit) => Number(unit.conversion_value) === 1) ??
+      units.find((unit) => unit.is_primary_unit) ??
+      null;
+
+    return baseUnit?.unit?.name ?? '';
+  };
+
+  const getQtyDisplay = (item: StockAdjustmentOutItem): string => {
+    const qty = formatCurrency(item.qty);
+    const unitName = item.product_unit?.unit?.name ?? '';
+    if (!unitName) return qty;
+
+    const conversionValue = Number(item.product_unit_conversion_value ?? 1);
+    if (conversionValue <= 1) return `${qty} ${unitName}`;
+
+    const baseUnitName = getBaseUnitName(item);
+    if (!baseUnitName || baseUnitName === unitName) return `${qty} ${unitName}`;
+
+    const baseQty = formatCurrency(item.qty * conversionValue);
+    return `${qty} ${unitName} (${baseQty} ${baseUnitName})`;
+  };
+
+  const getConversionValueDisplay = (item: StockAdjustmentOutItem): string => {
+    const conversionValue = formatCurrency(item.product_unit_conversion_value);
+    const productUnit = item.product_unit;
+    if (!productUnit || productUnit.is_base) return conversionValue;
+
+    const baseUnitName = getBaseUnitName(item);
+    const currentUnitName = productUnit.unit?.name ?? '';
+    if (!baseUnitName || !currentUnitName) return conversionValue;
+
+    return `${conversionValue} ${baseUnitName} / ${currentUnitName}`;
+  };
+
+  const getSerialsDisplay = (item: StockAdjustmentOutItem): string => {
+    const serials = item.serials ?? [];
+    if (serials.length === 0) return '-';
+
+    return serials.map((serialItem) => serialItem.serial).join(', ');
+  };
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+          <Button
+            variant="soft-secondary"
+            class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+            @click="toggleAdvancedFilters"
+          >
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.stock_adjustment_code') }}
+            </FormLabel>
+            <FormInput v-model="stockAdjustmentCode" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.category_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedCategoryId" v-model:search="categorySearch" :options="categoryOptions"
+                  :placeholder="t('components.dropdown.placeholder')" @change="handleCategoryFilterChange"
+                  @search="loadCategoryDDL" @clear="clearCategoryFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.in_warehouse_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedInWarehouseId" v-model:search="inWarehouseSearch"
+                  :options="inWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleInWarehouseFilterChange" @search="loadInWarehouseDDL" @clear="clearInWarehouseFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.out_warehouse_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedOutWarehouseId" v-model:search="outWarehouseSearch"
+                  :options="outWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleOutWarehouseFilterChange" @search="loadOutWarehouseDDL"
+                  @clear="clearOutWarehouseFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.product_unit_code') }}
+            </FormLabel>
+            <FormInput v-model="productUnitCode" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.product_name') }}
+            </FormLabel>
+            <FormInput v-model="productName" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.product.fields.category_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedProductCategoryId" v-model:search="productCategorySearch"
+                  :options="productCategoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleProductCategoryFilterChange" @search="loadProductCategoryDDL"
+                  @clear="clearProductCategoryFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.product.fields.brand_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedProductBrandId" v-model:search="productBrandSearch"
+                  :options="productBrandOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleProductBrandFilterChange" @search="loadProductBrandDDL"
+                  @clear="clearProductBrandFilter" />
+              </div>
+            </div>
+          </div>
+      </div>
+      <DataListFlex
+        :data="stockAdjustmentOutItemLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="stockAdjustmentOutItemLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="stockAdjustmentOutItemLists ? stockAdjustmentOutItemLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+            <div class="col-span-12 lg:col-span-1 md:col-span-12 flex items-center justify-center md:justify-start">
+              <ProductImagePreview
+                :image-url="getProductMainImageUrl(item as StockAdjustmentOutItem)"
+                wrapper-class="w-12 h-12 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                icon-class="w-4 h-4 text-slate-400"
+              />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-5 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.stock_adjustment.page_title') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.code') }}:
+                {{ (item as StockAdjustmentOutItem).stock_adjustment?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.date') }}:
+                {{ (item as StockAdjustmentOutItem).stock_adjustment?.date ? formatDate((item as StockAdjustmentOutItem).stock_adjustment.date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.category_id') }}:
+                {{ (item as StockAdjustmentOutItem).stock_adjustment?.category?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.in_warehouse_id') }}:
+                {{ (item as StockAdjustmentOutItem).stock_adjustment?.in_warehouse?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.out_warehouse_id') }}:
+                {{ (item as StockAdjustmentOutItem).stock_adjustment?.out_warehouse?.name ?? '-' }}
+              </div>
+              <div v-if="(item as StockAdjustmentOutItem).stock_adjustment?.remarks?.trim()" class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.remarks') }}:
+                {{ (item as StockAdjustmentOutItem).stock_adjustment?.remarks }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-3 md:col-span-4 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.product.page_title') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.code') }}:
+                {{ (item as StockAdjustmentOutItem).product_unit?.product?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.name') }}:
+                {{ (item as StockAdjustmentOutItem).product_unit?.product?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.category_id') }}:
+                {{ (item as StockAdjustmentOutItem).product_unit?.product?.category?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.brand_id') }}:
+                {{ (item as StockAdjustmentOutItem).product_unit?.product?.brand?.name ?? '-' }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-3 md:col-span-3 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.stock_adjustment_out_item.table.cols.product_unit') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.unit_code') }}:
+                {{ (item as StockAdjustmentOutItem).product_unit?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment_out_item.table.cols.qty') }}:
+                {{ getQtyDisplay(item as StockAdjustmentOutItem) }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment_out_item.table.cols.product_unit_conversion_value') }}:
+                {{ getConversionValueDisplay(item as StockAdjustmentOutItem) }}
+              </div>
+              <div v-if="(item as StockAdjustmentOutItem).remarks?.trim()" class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment_out_item.table.cols.remarks') }}:
+                {{ (item as StockAdjustmentOutItem).remarks }}
+              </div>
+              <div v-if="((item as StockAdjustmentOutItem).serials?.length ?? 0) > 0" class="text-slate-500 text-xs mt-1">
+                <span class="font-medium">{{ t('views.product.fields.serial_number') }}:</span>
+                <span class="break-all"> {{ getSerialsDisplay(item as StockAdjustmentOutItem) }}</span>
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-1 md:col-span-12 flex justify-end items-center gap-2">
+              <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+              </Button>
+            </div>
+          </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="deleteModalShow = false">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" @click="deleteModalShow = false" class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentOutItemSerialIndex.vue b/web/src/pages/stock-adjustment/StockAdjustmentOutItemSerialIndex.vue
new file mode 100644
index 000000000..e988c15f5
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentOutItemSerialIndex.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+  import { ref, provide } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useUserContextStore } from '@/stores/user-context';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import StockAdjustmentOutItemSerialList from './StockAdjustmentOutItemSerialList.vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+  const profileService = new ProfileService();
+
+  const mode = ref<ViewMode>(ViewMode.LIST);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.stock_adjustment_out_item_serial.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const stockAdjustmentOutItemSerialNotification = ref<NotificationElement>();
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+
+  provide('bind[stockAdjustmentOutItemSerialNotification]', (el: NotificationElement) => {
+    stockAdjustmentOutItemSerialNotification.value = el;
+  });
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.stock_adjustment_out_item_serial.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    const userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (stockAdjustmentOutItemSerialNotification.value) {
+      stockAdjustmentOutItemSerialNotification.value.showToast();
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <!-- No optional buttons for now -->
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <StockAdjustmentOutItemSerialList
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="stockAdjustmentOutItemSerialNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/stock-adjustment/StockAdjustmentOutItemSerialList.vue b/web/src/pages/stock-adjustment/StockAdjustmentOutItemSerialList.vue
new file mode 100644
index 000000000..3addbe812
--- /dev/null
+++ b/web/src/pages/stock-adjustment/StockAdjustmentOutItemSerialList.vue
@@ -0,0 +1,643 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { DataListFlex } from '@/components/DataList';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { Dialog } from '@/components/Base/Headless';
+  import StockAdjustmentOutItemSerialService from '@/services/StockAdjustmentOutItemSerialService';
+  import { StockAdjustmentOutItemSerial } from '@/types/models/StockAdjustmentOutItemSerial';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { StockAdjustmentOutItemSerialReadAnyPaginateRequest } from '@/types/services/stock-adjustment-out-item-serial/StockAdjustmentOutItemSerialRequest';
+  import { useRouter } from 'vue-router';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+  import { FormInput, FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+  import { formatDate } from '@/utils/helper';
+  import StockAdjustmentCategoryService from '@/services/StockAdjustmentCategoryService';
+  import ProductCategoryService from '@/services/ProductCategoryService';
+  import BrandService from '@/services/BrandService';
+  import WarehouseService from '@/services/WarehouseService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const stockAdjustmentOutItemSerialService = new StockAdjustmentOutItemSerialService();
+  const stockAdjustmentCategoryService = new StockAdjustmentCategoryService();
+  const productCategoryService = new ProductCategoryService();
+  const brandService = new BrandService();
+  const warehouseService = new WarehouseService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const startDate = ref<string | null>(null);
+  const endDate = ref<string | null>(null);
+  const searchText = ref<string>('');
+  const showAdvancedFilters = ref<boolean>(false);
+  const stockAdjustmentCode = ref<string>('');
+  const productUnitCode = ref<string>('');
+  const productName = ref<string>('');
+  const selectedCategoryId = ref<string | null>(null);
+  const selectedInWarehouseId = ref<string | null>(null);
+  const selectedOutWarehouseId = ref<string | null>(null);
+  const selectedProductCategoryId = ref<string | null>(null);
+  const selectedProductBrandId = ref<string | null>(null);
+
+  const stockAdjustmentOutItemSerialLists = ref<Collection<Array<StockAdjustmentOutItemSerial>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  const categoryDDL = ref<Array<DropDownOption> | null>(null);
+  const categorySearch = ref<string>('');
+  const categoryOptions = computed(() =>
+    (categoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const inWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+  const inWarehouseSearch = ref<string>('');
+  const inWarehouseOptions = computed(() =>
+    (inWarehouseDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  const outWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+  const outWarehouseSearch = ref<string>('');
+  const outWarehouseOptions = computed(() =>
+    (outWarehouseDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+  const productCategoryDDL = ref<Array<DropDownOption> | null>(null);
+  const productCategorySearch = ref<string>('');
+  const productCategoryOptions = computed(() =>
+    (productCategoryDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+  const productBrandDDL = ref<Array<DropDownOption> | null>(null);
+  const productBrandSearch = ref<string>('');
+  const productBrandOptions = computed(() =>
+    (productBrandDDL.value ?? []).map((item) => ({
+      value: item.code,
+      label: item.name,
+    })),
+  );
+
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+      return;
+    }
+
+    const now = new Date();
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+    startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+    endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+    await getStockAdjustmentOutItemSerials('', true, 1, 10);
+  });
+
+  const getStockAdjustmentOutItemSerials = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+    searchText.value = search;
+
+    const request: StockAdjustmentOutItemSerialReadAnyPaginateRequest = {
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      stock_adjustment_code: stockAdjustmentCode.value || null,
+      stock_adjustment_start_date: startDate.value || null,
+      stock_adjustment_end_date: endDate.value || null,
+      stock_adjustment_category_id: selectedCategoryId.value,
+      stock_adjustment_in_warehouse_id: selectedInWarehouseId.value,
+      stock_adjustment_out_warehouse_id: selectedOutWarehouseId.value,
+      product_unit_code: productUnitCode.value || null,
+      product_unit_product_name: productName.value || null,
+      product_unit_product_category_id: selectedProductCategoryId.value,
+      product_unit_product_brand_id: selectedProductBrandId.value,
+      refresh,
+      page,
+      per_page,
+    };
+
+    const result: ServiceResponse<Collection<Array<StockAdjustmentOutItemSerial>> | null> =
+      await stockAdjustmentOutItemSerialService.readAnyPaginate(request);
+
+    if (result.success && result.data) {
+      stockAdjustmentOutItemSerialLists.value = result.data;
+      showAlertPlaceholder('hidden', '', null);
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const handleDataListChange = async (data: DataListEmittedData) => {
+    await getStockAdjustmentOutItemSerials(
+      data.search.text, 
+      true, 
+      data.pagination.page, 
+      data.pagination.per_page
+    );
+  };
+
+  const handleDateFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleTextFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleCategoryFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleInWarehouseFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleOutWarehouseFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleProductCategoryFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const handleProductBrandFilterChange = async () => {
+    const perPage = stockAdjustmentOutItemSerialLists.value?.meta.per_page || 10;
+    await getStockAdjustmentOutItemSerials(searchText.value, true, 1, perPage);
+  };
+
+  const loadInWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      status: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      inWarehouseDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadOutWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+      search,
+      status: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      outWarehouseDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await stockAdjustmentCategoryService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      include_id: undefined,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      categoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadProductCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await productCategoryService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      type: 1,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      productCategoryDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const loadProductBrandDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await brandService.readAnyGet({
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search,
+      refresh: false,
+      limit: 20,
+    });
+
+    if (result.success && result.data) {
+      productBrandDDL.value = result.data.data.map((item: any) => ({
+        code: item.id,
+        name: item.name,
+      }));
+    }
+  };
+
+  const clearCategoryFilter = () => {
+    selectedCategoryId.value = null;
+    categorySearch.value = '';
+  };
+
+  const clearInWarehouseFilter = () => {
+    selectedInWarehouseId.value = null;
+    inWarehouseSearch.value = '';
+  };
+
+  const clearOutWarehouseFilter = () => {
+    selectedOutWarehouseId.value = null;
+    outWarehouseSearch.value = '';
+  };
+
+  const clearProductCategoryFilter = () => {
+    selectedProductCategoryId.value = null;
+    productCategorySearch.value = '';
+  };
+
+  const clearProductBrandFilter = () => {
+    selectedProductBrandId.value = null;
+    productBrandSearch.value = '';
+  };
+
+  const toggleAdvancedFilters = async () => {
+    showAdvancedFilters.value = !showAdvancedFilters.value;
+    if (showAdvancedFilters.value) {
+      await Promise.all([
+        loadCategoryDDL(categorySearch.value),
+        loadInWarehouseDDL(inWarehouseSearch.value),
+        loadOutWarehouseDDL(outWarehouseSearch.value),
+        loadProductCategoryDDL(productCategorySearch.value),
+        loadProductBrandDDL(productBrandSearch.value),
+      ]);
+    }
+  };
+
+  const deleteSelected = (idx: number) => {
+    if (!stockAdjustmentOutItemSerialLists.value) return;
+
+    const ulid = stockAdjustmentOutItemSerialLists.value.data[idx].ulid;
+    deleteUlid.value = ulid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    const result = await stockAdjustmentOutItemSerialService.delete(deleteUlid.value);
+
+    emits('loading-state', false);
+
+    if (result.success) {
+      emits('update-profile');
+      await getStockAdjustmentOutItemSerials('', true, 1, 10);
+      showNotification(
+        t('components.delete-modal.title'),
+        t('components.delete-modal.message'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    const n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    const ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  const getProductMainImageUrl = (item: StockAdjustmentOutItemSerial): string | null => {
+    const images = item.stock_adjustment_out_item?.product_unit?.product?.product_images ?? [];
+    if (images.length === 0) return null;
+
+    const mainImage = images.find((img) => img.is_main);
+    if (mainImage?.url) return mainImage.url;
+
+    return images[0]?.url ?? null;
+  };
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_adjustment.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+          <Button
+            variant="soft-secondary"
+            class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+            @click="toggleAdvancedFilters"
+          >
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.stock_adjustment_code') }}
+            </FormLabel>
+            <FormInput v-model="stockAdjustmentCode" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.category_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedCategoryId" v-model:search="categorySearch" :options="categoryOptions"
+                  :placeholder="t('components.dropdown.placeholder')" @change="handleCategoryFilterChange"
+                  @search="loadCategoryDDL" @clear="clearCategoryFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.in_warehouse_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedInWarehouseId" v-model:search="inWarehouseSearch"
+                  :options="inWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleInWarehouseFilterChange" @search="loadInWarehouseDDL" @clear="clearInWarehouseFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.out_warehouse_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedOutWarehouseId" v-model:search="outWarehouseSearch"
+                  :options="outWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleOutWarehouseFilterChange" @search="loadOutWarehouseDDL"
+                  @clear="clearOutWarehouseFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.product_unit_code') }}
+            </FormLabel>
+            <FormInput v-model="productUnitCode" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.stock_adjustment.fields.product_name') }}
+            </FormLabel>
+            <FormInput v-model="productName" type="text" @change="handleTextFilterChange" />
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.product.fields.category_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedProductCategoryId" v-model:search="productCategorySearch"
+                  :options="productCategoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleProductCategoryFilterChange" @search="loadProductCategoryDDL"
+                  @clear="clearProductCategoryFilter" />
+              </div>
+            </div>
+          </div>
+          <div class="col-span-12 md:col-span-6 lg:col-span-2">
+            <FormLabel>
+              {{ t('views.product.fields.brand_id') }}
+            </FormLabel>
+            <div class="flex items-center gap-2">
+              <div class="flex-1">
+                <FormSelectSearch v-model="selectedProductBrandId" v-model:search="productBrandSearch"
+                  :options="productBrandOptions" :placeholder="t('components.dropdown.placeholder')"
+                  @change="handleProductBrandFilterChange" @search="loadProductBrandDDL"
+                  @clear="clearProductBrandFilter" />
+              </div>
+            </div>
+          </div>
+      </div>
+      <DataListFlex
+        :data="stockAdjustmentOutItemSerialLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="stockAdjustmentOutItemSerialLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="stockAdjustmentOutItemSerialLists ? stockAdjustmentOutItemSerialLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+            <div class="col-span-12 lg:col-span-1 md:col-span-12 flex items-center justify-center md:justify-start">
+              <ProductImagePreview
+                :image-url="getProductMainImageUrl(item as StockAdjustmentOutItemSerial)"
+                wrapper-class="w-12 h-12 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                icon-class="w-4 h-4 text-slate-400"
+              />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-5 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.stock_adjustment.page_title') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.code') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.date') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment?.date ? formatDate(String((item as StockAdjustmentOutItemSerial).stock_adjustment?.date), 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.category_id') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment?.category?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.in_warehouse_id') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment?.in_warehouse?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.out_warehouse_id') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment?.out_warehouse?.name ?? '-' }}
+              </div>
+              <div v-if="(item as StockAdjustmentOutItemSerial).stock_adjustment?.remarks?.trim()" class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.stock_adjustment.fields.remarks') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment?.remarks }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.product.page_title') }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.code') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment_out_item?.product_unit?.product?.code ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.name') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment_out_item?.product_unit?.product?.name ?? '-' }}
+              </div>
+              <div class="text-slate-500 text-xs whitespace-nowrap">
+                {{ t('views.product.fields.unit_code') }}:
+                {{ (item as StockAdjustmentOutItemSerial).stock_adjustment_out_item?.product_unit?.code ?? '-' }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-2 md:col-span-2 self-start">
+              <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                {{ t('views.product.fields.serial_number') }}
+              </div>
+              <div class="text-slate-500 text-xs break-all">
+                {{ (item as StockAdjustmentOutItemSerial).serial || '-' }}
+              </div>
+            </div>
+
+            <div class="col-span-12 lg:col-span-1 md:col-span-12 flex justify-end items-center gap-2">
+              <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+                <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+              </Button>
+            </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="deleteModalShow = false">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">{{ t('components.delete-modal.title') }}</div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" @click="deleteModalShow = false" class="w-24 mr-1">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/stock-transfer/StockTransferCreate.vue b/web/src/pages/stock-transfer/StockTransferCreate.vue
new file mode 100644
index 000000000..dc43c6b32
--- /dev/null
+++ b/web/src/pages/stock-transfer/StockTransferCreate.vue
@@ -0,0 +1,917 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormTextarea,
+  FormSelectSearch,
+  FormSwitch,
+} from '@/components/Base/Form';
+import WarehouseService from '@/services/WarehouseService';
+import ProductService from '@/services/ProductService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import StockTransferService from '@/services/StockTransferService';
+import CacheService from '@/services/CacheService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import {
+  type StockTransferItemNestedStoreRequest,
+} from '@/types/services/stock-transfer/StockTransferRequest';
+import { debounce } from 'lodash';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type StockTransferItemFormItem = {
+  qty: StockTransferItemNestedStoreRequest['qty'];
+  product_unit_id: StockTransferItemNestedStoreRequest['product_unit_id'];
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  product_unit_conversion_value: StockTransferItemNestedStoreRequest['product_unit_conversion_value'];
+  remarks: StockTransferItemNestedStoreRequest['remarks'];
+  is_use_serial_number?: boolean;
+  serials: { serial: string }[];
+};
+
+type ProductUnitOption = {
+  product_id: string;
+  product_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  product_unit_id: string;
+  product_unit_code: string;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  cogs: number;
+  remaining_stock: number;
+  is_use_serial_number: boolean;
+};
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const stockTransferService = new StockTransferService();
+const stockTransferForm = stockTransferService.useStockTransferCreateForm();
+const warehouseService = new WarehouseService();
+const productService = new ProductService();
+const cacheServices = new CacheService();
+
+const sourceWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const sourceWarehouseSearch = ref<string>('');
+const sourceWarehouseOptions = computed(() =>
+  (sourceWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const destinationWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const destinationWarehouseSearch = ref<string>('');
+const destinationWarehouseOptions = computed(() =>
+  (destinationWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showProductUnitModal = ref<boolean>(false);
+const productSearchText = ref<string>('');
+const isSearchingProductUnit = ref<boolean>(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+const editingProductUnitIndex = ref<number | null>(null);
+const productUnitQtyToFocus = ref<number | null>(null);
+const productUnitsRemarksExpanded = ref<boolean[]>([]);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.stock_transfer.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.stock_transfer.field_groups.stock_transfer_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.stock_transfer.field_groups.items',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const productUnitsForm = computed<StockTransferItemFormItem[]>(
+  () => stockTransferForm.items as StockTransferItemFormItem[],
+);
+
+const invalidStockTransferField = (field: string) => stockTransferForm.invalid(field as any);
+
+const validateStockTransferField = (field: string) => stockTransferForm.validate(field as any);
+
+const getStockTransferFieldErrors = (field: string) =>
+  (stockTransferForm.errors as Record<string, string | undefined>)[field];
+
+const getProductMainImageUrl = (product: any): string | null => {
+  const images: any[] = product?.product_images ?? [];
+  if (images.length === 0) return null;
+
+  const mainImage = images.find((img: any) => img?.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  return images[0]?.url ?? null;
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  stockTransferForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('STOCK_TRANSFER_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  loadFromCache();
+
+  stockTransferForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+  });
+
+  await Promise.all([loadSourceWarehouseDDL(), loadDestinationWarehouseDDL()]);
+});
+
+const setCode = () => {
+  stockTransferForm.forgetError('code');
+  if (stockTransferForm.code === '_AUTO_') {
+    stockTransferForm.setData({ code: '' });
+  } else {
+    stockTransferForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const loadSourceWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    sourceWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadDestinationWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    destinationWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearSourceWarehouse = () => {
+  stockTransferForm.setData({ source_warehouse_id: '' });
+  stockTransferForm.forgetError('source_warehouse_id');
+  stockTransferForm.validate('source_warehouse_id');
+};
+
+const clearDestinationWarehouse = () => {
+  stockTransferForm.setData({ destination_warehouse_id: '' });
+  stockTransferForm.forgetError('destination_warehouse_id');
+  stockTransferForm.validate('destination_warehouse_id');
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('STOCK_TRANSFER_CREATE') as Record<string, unknown>;
+  if (!data) return;
+  stockTransferForm.setData(data);
+  productUnitsRemarksExpanded.value = ((data.items as unknown[]) ?? []).map(() => false);
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  if (!stockTransferForm.source_warehouse_id) {
+    stockTransferForm.validate('source_warehouse_id');
+    return;
+  }
+
+  if (!stockTransferForm.date) {
+    stockTransferForm.validate('date');
+    return;
+  }
+
+  isSearchingProductUnit.value = true;
+
+  let endDate: string;
+  if (stockTransferForm.date === '_AUTO_') {
+    endDate = formatDate(new Date().toString(), 'YYYY-MM-DD HH:mm:ss');
+  } else {
+    endDate = stockTransferForm.date as string;
+  }
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: {
+      end_date: endDate,
+      warehouse_id: stockTransferForm.source_warehouse_id as string,
+      stock_filter: 'has_stock',
+      include_service_products: false,
+    },
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((p: any) => {
+      const units: any[] = p.product_units || [];
+      const remainingStockBaseUnit = Number(p.remaining_stock_base_unit ?? 0);
+
+      let baseUnit = units.find((u: any) => u.is_base);
+      if (!baseUnit) baseUnit = units.find((u: any) => Number(u.conversion_value) === 1);
+      if (!baseUnit) baseUnit = units.find((u: any) => u.is_primary_unit);
+      if (!baseUnit && units.length > 0) baseUnit = units[0];
+      const baseUnitName = baseUnit && baseUnit.unit ? baseUnit.unit.name : '';
+
+      return units.map((u: any) => {
+        const conversionValue = Number(u.conversion_value) || 1;
+        const remainingStock = remainingStockBaseUnit / conversionValue;
+
+        return {
+          product_id: p.id,
+          product_code: p.code,
+          product_name: p.name,
+          product_image_url: getProductMainImageUrl(p),
+          product_unit_id: u.id,
+          product_unit_code: u.code,
+          unit_name: u.unit ? u.unit.name : '',
+          base_unit_name: baseUnitName,
+          conversion_value: conversionValue,
+          cogs: Number(u.price),
+          remaining_stock: remainingStock,
+          is_use_serial_number: p.is_use_serial_number,
+        };
+      });
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const addProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  isSearchingProductUnit.value = false;
+  editingProductUnitIndex.value = null;
+  showProductUnitModal.value = true;
+};
+
+const changeProductUnit = (index: number) => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  isSearchingProductUnit.value = false;
+  editingProductUnitIndex.value = index;
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  const baseData: Partial<StockTransferItemFormItem> = {
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.conversion_value != 1 ? option.base_unit_name : '',
+    product_unit_conversion_value: option.conversion_value,
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingProductUnitIndex.value === null) {
+    const item: StockTransferItemFormItem = {
+      qty: 0,
+      remarks: '',
+      ...baseData,
+    } as StockTransferItemFormItem;
+
+    stockTransferForm.items.push(item as any);
+    productUnitsRemarksExpanded.value.push(false);
+    targetIndex = stockTransferForm.items.length - 1;
+  } else {
+    const index = editingProductUnitIndex.value;
+    const current = stockTransferForm.items[index] as StockTransferItemFormItem;
+    stockTransferForm.items[index] = {
+      ...current,
+      ...baseData,
+    } as any;
+    targetIndex = index;
+  }
+
+  showProductUnitModal.value = false;
+  editingProductUnitIndex.value = null;
+  productUnitQtyToFocus.value = targetIndex;
+
+  Object.keys(stockTransferForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      stockTransferForm.forgetError(key as any);
+    }
+  });
+};
+
+const toggleProductUnitRemarks = (index: number) => {
+  const current = productUnitsRemarksExpanded.value[index] ?? false;
+  productUnitsRemarksExpanded.value[index] = !current;
+};
+
+const handleProductUnitModalAfterLeave = () => {
+  const index = productUnitQtyToFocus.value;
+
+  productUnitQtyToFocus.value = null;
+
+  if (index === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`product-units-qty-${index}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addProductUnitSerial = (index: number) => {
+  const item = productUnitsForm.value[index];
+  if (!item) return;
+  item.serials.push({ serial: '' });
+  stockTransferForm.validate(`items.${index}.serials` as any);
+};
+
+const removeProductUnitSerial = (index: number, serialIndex: number) => {
+  const item = productUnitsForm.value[index];
+  if (!item) return;
+  item.serials.splice(serialIndex, 1);
+  stockTransferForm.validate(`items.${index}.serials` as any);
+};
+
+const removeProductUnit = (index: number) => {
+  productUnitsForm.value.splice(index, 1);
+  productUnitsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(stockTransferForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      stockTransferForm.forgetError(key as any);
+    }
+  });
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const onSubmit = async () => {
+  if (stockTransferForm.hasErrors) {
+    const firstErrorKey = Object.keys(stockTransferForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const originalProductUnits = stockTransferForm.items as StockTransferItemFormItem[];
+  const cleanedProductUnits: StockTransferItemNestedStoreRequest[] = originalProductUnits.map(
+    (item: StockTransferItemFormItem) => ({
+      qty: item.qty,
+      product_unit_id: item.product_unit_id,
+      product_unit_conversion_value: item.product_unit_conversion_value,
+      remarks: item.remarks,
+      serials: item.serials.map((serialItem) => ({
+        serial: serialItem.serial,
+      })),
+    }),
+  );
+
+  const backupProductUnits = [...originalProductUnits];
+  stockTransferForm.items = cleanedProductUnits as any;
+
+  emits('loading-state', true);
+
+  try {
+    await stockTransferForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-stock-transfer-list' });
+  } catch (error) {
+    stockTransferForm.items = backupProductUnits as any;
+    const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+    showAlertPlaceholder('danger', '', errorList);
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="stockTransferForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="stockTransferForm.company_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="stockTransferForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('code') }">
+                {{ t('views.stock_transfer.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="stockTransferForm.code"
+                :class="{ 'border-danger': stockTransferForm.invalid('code') }"
+                :placeholder="t('views.stock_transfer.fields.code')"
+                @set-auto="setCode"
+                @change="stockTransferForm.validate('code')"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('date') }">
+                {{ t('views.stock_transfer.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="stockTransferForm.date"
+                :class="{ 'border-danger': stockTransferForm.invalid('date') }"
+                :placeholder="t('views.stock_transfer.fields.date')"
+                @change="stockTransferForm.validate('date')"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('source_warehouse_id') }">
+                {{ t('views.stock_transfer.fields.source_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="stockTransferForm.source_warehouse_id"
+                v-model:search="sourceWarehouseSearch"
+                :options="sourceWarehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': stockTransferForm.invalid('source_warehouse_id') }"
+                @change="stockTransferForm.validate('source_warehouse_id')"
+                @search="loadSourceWarehouseDDL"
+                @clear="clearSourceWarehouse"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.source_warehouse_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('destination_warehouse_id') }">
+                {{ t('views.stock_transfer.fields.destination_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="stockTransferForm.destination_warehouse_id"
+                v-model:search="destinationWarehouseSearch"
+                :options="destinationWarehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': stockTransferForm.invalid('destination_warehouse_id') }"
+                @change="stockTransferForm.validate('destination_warehouse_id')"
+                @search="loadDestinationWarehouseDDL"
+                @clear="clearDestinationWarehouse"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.destination_warehouse_id" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('remarks') }">
+                {{ t('views.stock_transfer.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="stockTransferForm.remarks"
+                :class="{ 'border-danger': stockTransferForm.invalid('remarks') }"
+                :placeholder="t('views.stock_transfer.fields.remarks')"
+                @change="stockTransferForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">
+                {{ t('views.stock_transfer.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="stockTransferForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <FormErrorMessages :messages="stockTransferForm.errors.items" />
+
+          <div v-if="productUnitsForm.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-5">
+            <div
+              v-for="(item, index) in productUnitsForm"
+              :key="`${item.product_unit_id}-${index}`"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.stock_transfer_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button
+                    type="button"
+                    class="text-xs text-slate-500 hover:text-primary"
+                    @click="toggleProductUnitRemarks(index)"
+                  >
+                    {{ productUnitsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeProductUnit(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidStockTransferField(`items.${index}.qty`) }">
+                    {{ t('views.stock_transfer_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`product-units-qty-${index}`"
+                    v-model="item.qty"
+                    :allow-negative="false"
+                    :class="[
+                      'text-right',
+                      {
+                        'border-danger': invalidStockTransferField(`items.${index}.qty`),
+                      },
+                    ]"
+                    @change="
+                      validateStockTransferField(`items.${index}.qty`);
+                      validateStockTransferField(`items.${index}.serials`);
+                    "
+                  />
+                  <FormErrorMessages :messages="getStockTransferFieldErrors(`items.${index}.qty`)" />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_unit_name }}
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-8">
+                  <FormLabel
+                    :class="{ 'text-danger': invalidStockTransferField(`items.${index}.product_unit_id`) }"
+                  >
+                    {{ t('views.stock_transfer_item.table.cols.product') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                      >
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      tabindex="-1"
+                      class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary"
+                      @click="changeProductUnit(index)"
+                    >
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="getStockTransferFieldErrors(`items.${index}.product_unit_id`)" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    {{ item.product_unit_product_code }}
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel
+                    :class="{
+                      'text-danger': invalidStockTransferField(`items.${index}.product_unit_conversion_value`),
+                    }"
+                  >
+                    {{ t('views.stock_transfer_item.fields.product_unit_conversion_value') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    v-model="item.product_unit_conversion_value"
+                    tabindex="-1"
+                    :class="[
+                      'text-right',
+                      {
+                        'border-danger': invalidStockTransferField(`items.${index}.product_unit_conversion_value`),
+                      },
+                    ]"
+                    @change="
+                      validateStockTransferField(`items.${index}.product_unit_conversion_value`);
+                      validateStockTransferField(`items.${index}.serials`);
+                    "
+                  />
+                  <FormErrorMessages
+                    :messages="getStockTransferFieldErrors(`items.${index}.product_unit_conversion_value`)"
+                  />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_base_unit_name }}
+                  </div>
+                </div>
+
+                <div v-if="item.is_use_serial_number" class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': invalidStockTransferField(`items.${index}.serials`) }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addProductUnitSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div
+                      v-for="(serialItem, serialIndex) in item.serials"
+                      :key="`${index}-${serialIndex}`"
+                      class="flex gap-2"
+                    >
+                      <FormInput
+                        :id="`items.${index}.serials.${serialIndex}.serial`"
+                        v-model="serialItem.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{
+                          'border-danger': invalidStockTransferField(`items.${index}.serials.${serialIndex}.serial`),
+                        }"
+                        @change="
+                          validateStockTransferField(`items.${index}.serials.${serialIndex}.serial`);
+                          validateStockTransferField(`items.${index}.serials`);
+                        "
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeProductUnitSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getStockTransferFieldErrors(`items.${index}.serials`)" />
+                  <FormErrorMessages
+                    v-for="(_, serialIndex) in item.serials"
+                    :key="`product-units-serial-error-${index}-${serialIndex}`"
+                    :messages="getStockTransferFieldErrors(`items.${index}.serials.${serialIndex}.serial`)"
+                  />
+                </div>
+
+                <div v-if="productUnitsRemarksExpanded[index]" class="col-span-12 space-y-3">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidStockTransferField(`items.${index}.remarks`) }">
+                      {{ t('views.stock_transfer_item.fields.remarks') }}
+                    </FormLabel>
+                    <FormTextarea
+                      v-model="item.remarks"
+                      rows="2"
+                      :class="{ 'border-danger': invalidStockTransferField(`items.${index}.remarks`) }"
+                      @change="validateStockTransferField(`items.${index}.remarks`)"
+                    />
+                    <FormErrorMessages :messages="getStockTransferFieldErrors(`items.${index}.remarks`)" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel />
+            <Button type="button" variant="primary" class="shadow-md" @click="addProductUnit">
+              {{ t('views.stock_transfer_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="submit" variant="primary">
+            <Lucide icon="Save" class="w-4 h-4 mr-2" />
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <Dialog size="xl" :open="showProductUnitModal" @close="showProductUnitModal = false" @after-leave="handleProductUnitModalAfterLeave">
+    <Dialog.Panel>
+      <div class="p-5">
+        <div class="flex items-center justify-between mb-4">
+          <FormLabel>
+            {{ t('views.stock_transfer.field_groups.items') }}
+          </FormLabel>
+          <button type="button" class="text-slate-500 hover:text-danger" @click="showProductUnitModal = false">
+            <Lucide icon="X" class="w-4 h-4" />
+          </button>
+        </div>
+
+        <div class="flex items-center gap-2 mb-4">
+          <FormInput
+            id="product-unit-search-input"
+            v-model="productSearchText"
+            type="text"
+            :placeholder="t('components.search-box.placeholder.search')"
+            @keyup.enter="searchProductUnits"
+          />
+          <Button
+            type="button"
+            variant="primary"
+            class="shadow-md"
+            tabindex="-1"
+            :disabled="isSearchingProductUnit || !stockTransferForm.source_warehouse_id"
+            @click="searchProductUnits"
+          >
+            <template v-if="isSearchingProductUnit">
+              <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+            </template>
+            <template v-else>
+              {{ t('components.buttons.search') }}
+            </template>
+          </Button>
+        </div>
+
+        <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+          <table class="min-w-full text-sm">
+            <thead class="bg-slate-100 dark:bg-darkmode-600">
+              <tr>
+                <th class="px-3 py-2 text-left">
+                  {{ t('views.product.table.cols.image') }}
+                </th>
+                <th class="px-3 py-2 text-left">
+                  {{ t('views.stock_transfer_item.table.cols.product') }}
+                </th>
+                <th class="px-3 py-2 text-right">
+                  {{ t('views.stock_adjustment_out_item.table.cols.remaining_stock') }}
+                </th>
+                <th class="px-3 py-2 text-left">
+                  {{ t('views.product.table.cols.unit') }}
+                </th>
+                <th class="px-3 py-2 text-right">
+                  {{ t('views.product.fields.conversion_value') }}
+                </th>
+                <th class="px-3 py-2 text-right">
+                  {{ t('views.stock_adjustment_in_item.table.cols.product_unit_cogs') }}
+                </th>
+                <th class="px-3 py-2"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="productUnitOptions.length === 0">
+                <td colspan="7" class="px-3 py-4 text-center text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </td>
+              </tr>
+              <tr
+                v-for="(option, index) in productUnitOptions"
+                :key="`${option.product_unit_id}-${index}`"
+                class="border-t border-slate-200/60 dark:border-darkmode-400"
+              >
+                <td class="px-3 py-2">
+                  <ProductImagePreview
+                    :image-url="option.product_image_url"
+                    wrapper-class="w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                    icon-class="w-4 h-4 text-slate-400"
+                  />
+                </td>
+                <td class="px-3 py-2">[{{ option.product_unit_code }}] {{ option.product_name }}</td>
+                <td class="px-3 py-2 text-right">
+                  {{ formatCurrency(option.remaining_stock) }}
+                </td>
+                <td class="px-3 py-2">
+                  {{ option.unit_name }}
+                </td>
+                <td class="px-3 py-2 text-right">
+                  {{ formatCurrency(option.conversion_value) }}
+                </td>
+                <td class="px-3 py-2 text-right">
+                  {{ formatCurrency(option.cogs) }}
+                </td>
+                <td class="px-3 py-2 text-right">
+                  <Button type="button" variant="primary" size="sm" @click="selectProductUnit(option)">
+                    {{ t('components.buttons.select') }}
+                  </Button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/stock-transfer/StockTransferEdit.vue b/web/src/pages/stock-transfer/StockTransferEdit.vue
new file mode 100644
index 000000000..4ba548018
--- /dev/null
+++ b/web/src/pages/stock-transfer/StockTransferEdit.vue
@@ -0,0 +1,967 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import {
+  FormInput,
+  FormLabel,
+  FormErrorMessages,
+  FormInputCode,
+  FormInputCurrency,
+  FormInputDateTimeAuto,
+  FormTextarea,
+  FormSelectSearch,
+  FormSwitch,
+} from '@/components/Base/Form';
+import WarehouseService from '@/services/WarehouseService';
+import ProductService from '@/services/ProductService';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import { convertErrorTypeToAlertListType, formatCurrency, formatDate } from '@/utils/helper';
+import StockTransferService from '@/services/StockTransferService';
+import CacheService from '@/services/CacheService';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type DropDownOption } from '@/types/models/DropDownOption';
+import {
+  type StockTransferItemNestedUpdateRequest,
+} from '@/types/services/stock-transfer/StockTransferRequest';
+import type { StockTransfer } from '@/types/models/StockTransfer';
+import { debounce } from 'lodash';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+type StockTransferItemFormItem = {
+  id: StockTransferItemNestedUpdateRequest['id'];
+  qty: StockTransferItemNestedUpdateRequest['qty'];
+  product_unit_id: StockTransferItemNestedUpdateRequest['product_unit_id'];
+  product_unit_product_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_unit_name?: string | null;
+  product_unit_base_unit_name?: string | null;
+  product_unit_conversion_value: StockTransferItemNestedUpdateRequest['product_unit_conversion_value'];
+  remarks: StockTransferItemNestedUpdateRequest['remarks'];
+  is_use_serial_number?: boolean;
+  serials: { id: string | null; serial: string }[];
+  delete_serial_ids: string[];
+};
+
+type ProductUnitOption = {
+  product_id: string;
+  product_code: string;
+  product_name: string;
+  product_image_url: string | null;
+  product_unit_id: string;
+  product_unit_code: string;
+  unit_name: string;
+  base_unit_name: string;
+  conversion_value: number;
+  cogs: number;
+  is_use_serial_number: boolean;
+};
+
+const stockTransferData = ref<StockTransfer | null>(null);
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const stockTransferService = new StockTransferService();
+const stockTransferForm = stockTransferService.useStockTransferEditForm(route.params.ulid as string);
+const warehouseService = new WarehouseService();
+const productService = new ProductService();
+const cacheServices = new CacheService();
+
+const sourceWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const sourceWarehouseSearch = ref<string>('');
+const sourceWarehouseOptions = computed(() =>
+  (sourceWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const destinationWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const destinationWarehouseSearch = ref<string>('');
+const destinationWarehouseOptions = computed(() =>
+  (destinationWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const showProductUnitModal = ref<boolean>(false);
+const productSearchText = ref<string>('');
+const isSearchingProductUnit = ref<boolean>(false);
+const productUnitOptions = ref<Array<ProductUnitOption>>([]);
+const editingProductUnitIndex = ref<number | null>(null);
+const productUnitQtyToFocus = ref<number | null>(null);
+const productUnitsRemarksExpanded = ref<boolean[]>([]);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.stock_transfer.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.stock_transfer.field_groups.stock_transfer_data',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.stock_transfer.field_groups.items',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const productUnitsForm = computed<StockTransferItemFormItem[]>(
+  () => stockTransferForm.items as StockTransferItemFormItem[],
+);
+
+const invalidStockTransferField = (field: string) => stockTransferForm.invalid(field as any);
+
+const validateStockTransferField = (field: string) => stockTransferForm.validate(field as any);
+
+const getStockTransferFieldErrors = (field: string) =>
+  (stockTransferForm.errors as Record<string, string | undefined>)[field];
+
+const getProductMainImageUrl = (product: any): string | null => {
+  const images: any[] = product?.product_images ?? [];
+  if (images.length === 0) return null;
+
+  const mainImage = images.find((img: any) => img?.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  return images[0]?.url ?? null;
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+watch(
+  stockTransferForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('STOCK_TRANSFER_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  emits('loading-state', true);
+
+  try {
+    await loadData();
+    await Promise.all([loadSourceWarehouseDDL(), loadDestinationWarehouseDDL()]);
+  } finally {
+    emits('loading-state', false);
+  }
+});
+
+const loadData = async () => {
+  const ulid = route.params.ulid as string | undefined;
+  if (!ulid) return;
+
+  const result = await stockTransferService.read(ulid);
+
+  if (result.success && result.data) {
+    const data = result.data as StockTransfer;
+    stockTransferData.value = data;
+
+    const productUnits: StockTransferItemFormItem[] = (data.items || []).map((item: any) => {
+      const productUnit = item.product_unit;
+      const unit = productUnit?.unit;
+      const product = (productUnit as any)?.product;
+
+      return {
+        id: item.id ?? null,
+        qty: item.qty,
+        product_unit_id: productUnit?.id ?? '',
+        product_unit_product_code: productUnit?.code ?? '',
+        product_unit_product_name: product?.name ?? '',
+        product_unit_unit_name: unit?.name ?? '',
+        product_unit_base_unit_name: '',
+        product_unit_conversion_value: item.product_unit_conversion_value,
+        remarks: item.remarks ?? '',
+        is_use_serial_number: product?.is_use_serial_number ?? false,
+        serials: item.serials ? item.serials.map((serial: any) => ({ id: serial.id ?? null, serial: serial.serial })) : [],
+        delete_serial_ids: [],
+      };
+    });
+
+    stockTransferForm.setData({
+      company_id: data.company.id,
+      branch_id: data.branch.id,
+      code: data.code,
+      date: formatDate(data.date, 'YYYY-MM-DD HH:mm:ss'),
+      source_warehouse_id: data.source_warehouse?.id ?? '',
+      destination_warehouse_id: data.destination_warehouse?.id ?? '',
+      remarks: data.remarks ?? '',
+      is_posted: data.is_posted,
+      delete_item_ids: [],
+      items: productUnits as any,
+    } as any);
+
+    productUnitsRemarksExpanded.value = productUnits.map(() => false);
+  }
+};
+
+const setCode = () => {
+  stockTransferForm.forgetError('code');
+  if (stockTransferForm.code === '_AUTO_') {
+    stockTransferForm.setData({ code: '' });
+  } else {
+    stockTransferForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const loadSourceWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: stockTransferData.value?.source_warehouse?.id as string | undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    sourceWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadDestinationWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: stockTransferData.value?.destination_warehouse?.id as string | undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    destinationWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearSourceWarehouse = () => {
+  stockTransferForm.setData({ source_warehouse_id: '' });
+  stockTransferForm.forgetError('source_warehouse_id');
+  stockTransferForm.validate('source_warehouse_id');
+};
+
+const clearDestinationWarehouse = () => {
+  stockTransferForm.setData({ destination_warehouse_id: '' });
+  stockTransferForm.forgetError('destination_warehouse_id');
+  stockTransferForm.validate('destination_warehouse_id');
+};
+
+const searchProductUnits = async () => {
+  if (!selectedUserLocation.value) return;
+
+  if (!stockTransferForm.source_warehouse_id) {
+    stockTransferForm.validate('source_warehouse_id');
+    return;
+  }
+
+  if (!stockTransferForm.date) {
+    stockTransferForm.validate('date');
+    return;
+  }
+
+  isSearchingProductUnit.value = true;
+
+  let endDate: string;
+  if (stockTransferForm.date === '_AUTO_') {
+    endDate = formatDate(new Date().toString(), 'YYYY-MM-DD HH:mm:ss');
+  } else {
+    endDate = stockTransferForm.date as string;
+  }
+
+  const result = await productService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: productSearchText.value,
+    category_id: undefined,
+    brand_id: undefined,
+    is_price_include_vat: undefined,
+    is_use_serial_number: undefined,
+    is_expirable: undefined,
+    type: undefined,
+    status: undefined,
+    include_id: undefined,
+    with_remaining_stock: {
+      end_date: endDate,
+      warehouse_id: stockTransferForm.source_warehouse_id as string,
+      stock_filter: 'has_stock',
+      include_service_products: false,
+    },
+    refresh: true,
+    limit: 20,
+  });
+
+  isSearchingProductUnit.value = false;
+
+  if (result.success && result.data) {
+    const products = result.data.data as any[];
+    productUnitOptions.value = products.flatMap((p: any) => {
+      const units: any[] = p.product_units || [];
+
+      let baseUnit = units.find((u: any) => u.is_base);
+      if (!baseUnit) baseUnit = units.find((u: any) => Number(u.conversion_value) === 1);
+      if (!baseUnit) baseUnit = units.find((u: any) => u.is_primary_unit);
+      if (!baseUnit && units.length > 0) baseUnit = units[0];
+      const baseUnitName = baseUnit && baseUnit.unit ? baseUnit.unit.name : '';
+
+      return units.map((u: any) => ({
+        product_id: p.id,
+        product_code: p.code,
+        product_name: p.name,
+        product_image_url: getProductMainImageUrl(p),
+        product_unit_id: u.id,
+        product_unit_code: u.code,
+        unit_name: u.unit ? u.unit.name : '',
+        base_unit_name: baseUnitName,
+        conversion_value: Number(u.conversion_value),
+        cogs: Number(u.price),
+        is_use_serial_number: p.is_use_serial_number,
+      }));
+    });
+  } else {
+    productUnitOptions.value = [];
+  }
+};
+
+const addProductUnit = () => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  isSearchingProductUnit.value = false;
+  editingProductUnitIndex.value = null;
+  showProductUnitModal.value = true;
+};
+
+const changeProductUnit = (index: number) => {
+  productSearchText.value = '';
+  productUnitOptions.value = [];
+  isSearchingProductUnit.value = false;
+  editingProductUnitIndex.value = index;
+  showProductUnitModal.value = true;
+};
+
+const selectProductUnit = (option: ProductUnitOption) => {
+  const baseData: Partial<StockTransferItemFormItem> = {
+    product_unit_id: option.product_unit_id,
+    product_unit_product_code: option.product_unit_code,
+    product_unit_product_name: option.product_name,
+    product_unit_unit_name: option.unit_name,
+    product_unit_base_unit_name: option.conversion_value != 1 ? option.base_unit_name : '',
+    product_unit_conversion_value: option.conversion_value,
+    is_use_serial_number: option.is_use_serial_number,
+    serials: [],
+  };
+
+  let targetIndex: number;
+
+  if (editingProductUnitIndex.value === null) {
+    const item: StockTransferItemFormItem = {
+      id: null,
+      qty: 0,
+      remarks: '',
+      delete_serial_ids: [],
+      ...baseData,
+    } as StockTransferItemFormItem;
+
+    stockTransferForm.items.push(item as any);
+    productUnitsRemarksExpanded.value.push(false);
+    targetIndex = stockTransferForm.items.length - 1;
+  } else {
+    const index = editingProductUnitIndex.value;
+    const current = stockTransferForm.items[index] as StockTransferItemFormItem;
+    stockTransferForm.items[index] = {
+      ...current,
+      ...baseData,
+    } as any;
+    targetIndex = index;
+  }
+
+  showProductUnitModal.value = false;
+  editingProductUnitIndex.value = null;
+  productUnitQtyToFocus.value = targetIndex;
+
+  Object.keys(stockTransferForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      stockTransferForm.forgetError(key as any);
+    }
+  });
+};
+
+const toggleProductUnitRemarks = (index: number) => {
+  const current = productUnitsRemarksExpanded.value[index] ?? false;
+  productUnitsRemarksExpanded.value[index] = !current;
+};
+
+const handleProductUnitModalAfterLeave = () => {
+  const index = productUnitQtyToFocus.value;
+
+  productUnitQtyToFocus.value = null;
+
+  if (index === null) return;
+
+  nextTick(() => {
+    const el = document.getElementById(`product-units-qty-${index}`) as HTMLInputElement | null;
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus();
+    el?.select();
+  });
+};
+
+const addProductUnitSerial = (index: number) => {
+  const item = productUnitsForm.value[index];
+  if (!item) return;
+  item.serials.push({ id: null, serial: '' });
+  stockTransferForm.validate(`items.${index}.serials` as any);
+};
+
+const removeProductUnitSerial = (index: number, serialIndex: number) => {
+  const item = productUnitsForm.value[index];
+  if (!item) return;
+  const serial = item.serials[serialIndex];
+
+  if (serial.id) {
+    item.delete_serial_ids.push(serial.id);
+  }
+
+  item.serials.splice(serialIndex, 1);
+  stockTransferForm.validate(`items.${index}.serials` as any);
+};
+
+const removeProductUnit = (index: number) => {
+  const item = productUnitsForm.value[index];
+
+  if (item?.id) {
+    stockTransferForm.delete_item_ids.push(item.id);
+  }
+
+  productUnitsForm.value.splice(index, 1);
+  productUnitsRemarksExpanded.value.splice(index, 1);
+
+  Object.keys(stockTransferForm.errors).forEach((key) => {
+    if (key.startsWith('items.')) {
+      stockTransferForm.forgetError(key as any);
+    }
+  });
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const onSubmit = async () => {
+  if (stockTransferForm.hasErrors) {
+    const firstErrorKey = Object.keys(stockTransferForm.errors)[0];
+    if (firstErrorKey) {
+      scrollToError(firstErrorKey);
+    }
+    return;
+  }
+
+  const originalProductUnits = stockTransferForm.items as StockTransferItemFormItem[];
+  const cleanedProductUnits: StockTransferItemNestedUpdateRequest[] = originalProductUnits.map(
+    (item: StockTransferItemFormItem) => ({
+      id: item.id,
+      qty: item.qty,
+      product_unit_id: item.product_unit_id,
+      product_unit_conversion_value: item.product_unit_conversion_value,
+      remarks: item.remarks,
+      delete_serial_ids: item.delete_serial_ids,
+      serials: item.serials.map((serialItem) => ({
+        id: serialItem.id,
+        serial: serialItem.serial,
+      })),
+    }),
+  );
+
+  const backupProductUnits = [...originalProductUnits];
+  stockTransferForm.items = cleanedProductUnits as any;
+
+  emits('loading-state', true);
+
+  try {
+    await stockTransferForm.submit();
+    showAlertPlaceholder('hidden', '', null);
+    emits('update-profile');
+    router.push({ name: 'side-menu-stock-transfer-list' });
+  } catch (error) {
+    stockTransferForm.items = backupProductUnits as any;
+    const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+    showAlertPlaceholder('danger', '', errorList);
+  } finally {
+    emits('loading-state', false);
+  }
+};
+</script>
+
+<template>
+  <form id="stockTransferForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.company.code }}
+                <br />
+                {{ selectedUserLocation.company.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="stockTransferForm.company_id" />
+            </div>
+
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel>
+                {{ selectedUserLocation.branch.code }}
+                <br />
+                {{ selectedUserLocation.branch.name }}
+              </FormLabel>
+              <FormInput type="hidden" v-model="stockTransferForm.branch_id" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('code') }">
+                {{ t('views.stock_transfer.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                v-model="stockTransferForm.code"
+                :class="{ 'border-danger': stockTransferForm.invalid('code') }"
+                :placeholder="t('views.stock_transfer.fields.code')"
+                @set-auto="setCode"
+                @change="stockTransferForm.validate('code')"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.code" />
+            </div>
+            <div class="col-span-12 lg:col-span-4 md:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('date') }">
+                {{ t('views.stock_transfer.fields.date') }}
+              </FormLabel>
+              <FormInputDateTimeAuto
+                v-model="stockTransferForm.date"
+                :class="{ 'border-danger': stockTransferForm.invalid('date') }"
+                :placeholder="t('views.stock_transfer.fields.date')"
+                @change="stockTransferForm.validate('date')"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.date" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('source_warehouse_id') }">
+                {{ t('views.stock_transfer.fields.source_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="stockTransferForm.source_warehouse_id"
+                v-model:search="sourceWarehouseSearch"
+                :options="sourceWarehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': stockTransferForm.invalid('source_warehouse_id') }"
+                @change="stockTransferForm.validate('source_warehouse_id')"
+                @search="loadSourceWarehouseDDL"
+                @clear="clearSourceWarehouse"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.source_warehouse_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-6">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('destination_warehouse_id') }">
+                {{ t('views.stock_transfer.fields.destination_warehouse_id') }}
+              </FormLabel>
+              <FormSelectSearch
+                v-model="stockTransferForm.destination_warehouse_id"
+                v-model:search="destinationWarehouseSearch"
+                :options="destinationWarehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                :class="{ 'border-danger': stockTransferForm.invalid('destination_warehouse_id') }"
+                @change="stockTransferForm.validate('destination_warehouse_id')"
+                @search="loadDestinationWarehouseDDL"
+                @clear="clearDestinationWarehouse"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.destination_warehouse_id" />
+            </div>
+            <div class="col-span-12 lg:col-span-8">
+              <FormLabel :class="{ 'text-danger': stockTransferForm.invalid('remarks') }">
+                {{ t('views.stock_transfer.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                v-model="stockTransferForm.remarks"
+                :class="{ 'border-danger': stockTransferForm.invalid('remarks') }"
+                :placeholder="t('views.stock_transfer.fields.remarks')"
+                @change="stockTransferForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="stockTransferForm.errors.remarks" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel class="pr-5">
+                {{ t('views.stock_transfer.fields.is_posted') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input v-model="stockTransferForm.is_posted" type="checkbox" />
+              </FormSwitch>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-2>
+        <div class="p-5">
+          <FormErrorMessages :messages="stockTransferForm.errors.items" />
+
+          <div v-if="productUnitsForm.length === 0" class="text-slate-500 text-sm">
+            {{ t('components.data-list.data_not_found') }}
+          </div>
+
+          <div v-else class="space-y-5">
+            <div
+              v-for="(item, index) in productUnitsForm"
+              :key="item.id ? `${item.id}` : `${item.product_unit_id}-${index}`"
+              class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-medium text-sm">
+                  {{ t('views.stock_transfer_item.page_title') }} #{{ index + 1 }}
+                </div>
+                <div class="flex items-center gap-2">
+                  <Button
+                    type="button"
+                    class="text-xs text-slate-500 hover:text-primary"
+                    @click="toggleProductUnitRemarks(index)"
+                  >
+                    {{ productUnitsRemarksExpanded[index] ? '▲' : '▼' }}
+                  </Button>
+                  <Button type="button" variant="outline-secondary" @click="removeProductUnit(index)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-12 gap-4 gap-y-3">
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel :class="{ 'text-danger': invalidStockTransferField(`items.${index}.qty`) }">
+                    {{ t('views.stock_transfer_item.fields.qty') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    :id="`product-units-qty-${index}`"
+                    v-model="item.qty"
+                    :allow-negative="false"
+                    :class="[
+                      'text-right',
+                      {
+                        'border-danger': invalidStockTransferField(`items.${index}.qty`),
+                      },
+                    ]"
+                    @change="
+                      validateStockTransferField(`items.${index}.qty`);
+                      validateStockTransferField(`items.${index}.serials`);
+                    "
+                  />
+                  <FormErrorMessages :messages="getStockTransferFieldErrors(`items.${index}.qty`)" />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_unit_name }}
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-8">
+                  <FormLabel
+                    :class="{ 'text-danger': invalidStockTransferField(`items.${index}.product_unit_id`) }"
+                  >
+                    {{ t('views.stock_transfer_item.table.cols.product') }}
+                  </FormLabel>
+                  <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                      <div
+                        class="form-control border rounded-md px-3 py-2 bg-slate-50 dark:bg-darkmode-800 text-slate-700 dark:text-slate-300"
+                      >
+                        {{ item.product_unit_product_name || '-' }}
+                      </div>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline-secondary"
+                      tabindex="-1"
+                      class="flex items-center justify-center border-slate-500 text-slate-500 hover:text-primary hover:border-primary"
+                      @click="changeProductUnit(index)"
+                    >
+                      <Lucide icon="Search" class="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <FormErrorMessages :messages="getStockTransferFieldErrors(`items.${index}.product_unit_id`)" />
+                  <div class="text-sm text-slate-500 font-bold mt-1">
+                    {{ item.product_unit_product_code }}
+                  </div>
+                </div>
+                <div class="col-span-12 lg:col-span-2">
+                  <FormLabel
+                    :class="{
+                      'text-danger': invalidStockTransferField(`items.${index}.product_unit_conversion_value`),
+                    }"
+                  >
+                    {{ t('views.stock_transfer_item.fields.product_unit_conversion_value') }}
+                  </FormLabel>
+                  <FormInputCurrency
+                    v-model="item.product_unit_conversion_value"
+                    tabindex="-1"
+                    :class="[
+                      'text-right',
+                      {
+                        'border-danger': invalidStockTransferField(`items.${index}.product_unit_conversion_value`),
+                      },
+                    ]"
+                    @change="
+                      validateStockTransferField(`items.${index}.product_unit_conversion_value`);
+                      validateStockTransferField(`items.${index}.serials`);
+                    "
+                  />
+                  <FormErrorMessages
+                    :messages="getStockTransferFieldErrors(`items.${index}.product_unit_conversion_value`)"
+                  />
+                  <div class="text-sm text-slate-500 text-right font-bold mt-1">
+                    {{ item.product_unit_base_unit_name }}
+                  </div>
+                </div>
+
+                <div v-if="item.is_use_serial_number" class="col-span-12">
+                  <div class="flex items-center justify-between mb-2">
+                    <FormLabel :class="{ 'text-danger': invalidStockTransferField(`items.${index}.serials`) }">
+                      {{ t('views.product.fields.serial_number') }}
+                    </FormLabel>
+                    <Button type="button" size="sm" variant="outline-primary" @click="addProductUnitSerial(index)">
+                      <Lucide icon="Plus" class="w-3 h-3 mr-1" />
+                      {{ t('components.buttons.create') }}
+                    </Button>
+                  </div>
+                  <div v-if="item.serials.length === 0" class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+                    <div
+                      v-for="(serialItem, serialIndex) in item.serials"
+                      :key="serialItem.id ? `${serialItem.id}` : `${index}-${serialIndex}`"
+                      class="flex gap-2"
+                    >
+                      <FormInput
+                        :id="`items.${index}.serials.${serialIndex}.serial`"
+                        v-model="serialItem.serial"
+                        :placeholder="t('views.product.fields.serial_number')"
+                        :class="{
+                          'border-danger': invalidStockTransferField(`items.${index}.serials.${serialIndex}.serial`),
+                        }"
+                        @change="
+                          validateStockTransferField(`items.${index}.serials.${serialIndex}.serial`);
+                          validateStockTransferField(`items.${index}.serials`);
+                        "
+                      />
+                      <Button type="button" variant="outline-secondary" @click="removeProductUnitSerial(index, serialIndex)">
+                        <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                      </Button>
+                    </div>
+                  </div>
+                  <FormErrorMessages :messages="getStockTransferFieldErrors(`items.${index}.serials`)" />
+                  <FormErrorMessages
+                    v-for="(_, serialIndex) in item.serials"
+                    :key="`product-units-serial-error-${index}-${serialIndex}`"
+                    :messages="getStockTransferFieldErrors(`items.${index}.serials.${serialIndex}.serial`)"
+                  />
+                </div>
+
+                <div v-if="productUnitsRemarksExpanded[index]" class="col-span-12 space-y-3">
+                  <div>
+                    <FormLabel :class="{ 'text-danger': invalidStockTransferField(`items.${index}.remarks`) }">
+                      {{ t('views.stock_transfer_item.fields.remarks') }}
+                    </FormLabel>
+                    <FormTextarea
+                      v-model="item.remarks"
+                      rows="2"
+                      :class="{ 'border-danger': invalidStockTransferField(`items.${index}.remarks`) }"
+                      @change="validateStockTransferField(`items.${index}.remarks`)"
+                    />
+                    <FormErrorMessages :messages="getStockTransferFieldErrors(`items.${index}.remarks`)" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <FormLabel />
+            <Button type="button" variant="primary" class="shadow-md" @click="addProductUnit">
+              {{ t('views.stock_transfer_item.actions.create') }}
+            </Button>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex justify-end gap-2 p-5">
+          <Button type="submit" variant="primary">
+            <Lucide icon="Save" class="w-4 h-4 mr-2" />
+            {{ t('components.buttons.save') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+
+  <Dialog size="xl" :open="showProductUnitModal" @close="showProductUnitModal = false" @after-leave="handleProductUnitModalAfterLeave">
+    <Dialog.Panel>
+      <div class="p-5">
+        <div class="flex items-center justify-between mb-4">
+          <FormLabel>
+            {{ t('views.stock_transfer.field_groups.items') }}
+          </FormLabel>
+          <button type="button" class="text-slate-500 hover:text-danger" @click="showProductUnitModal = false">
+            <Lucide icon="X" class="w-4 h-4" />
+          </button>
+        </div>
+
+        <div class="flex items-center gap-2 mb-4">
+          <FormInput
+            id="product-unit-search-input"
+            v-model="productSearchText"
+            type="text"
+            :placeholder="t('components.search-box.placeholder.search')"
+            @keyup.enter="searchProductUnits"
+          />
+          <Button
+            type="button"
+            variant="primary"
+            class="shadow-md"
+            tabindex="-1"
+            :disabled="isSearchingProductUnit"
+            @click="searchProductUnits"
+          >
+            <template v-if="isSearchingProductUnit">
+              <Lucide icon="Loader" class="w-4 h-4 animate-spin" />
+            </template>
+            <template v-else>
+              {{ t('components.buttons.search') }}
+            </template>
+          </Button>
+        </div>
+
+        <div class="max-h-80 overflow-auto border border-slate-200/60 dark:border-darkmode-400 rounded-md">
+          <table class="min-w-full text-sm">
+            <thead class="bg-slate-100 dark:bg-darkmode-600">
+              <tr>
+                <th class="px-3 py-2 text-left">
+                  {{ t('views.product.table.cols.image') }}
+                </th>
+                <th class="px-3 py-2 text-left">
+                  {{ t('views.stock_transfer_item.table.cols.product') }}
+                </th>
+                <th class="px-3 py-2 text-left">
+                  {{ t('views.product.table.cols.unit') }}
+                </th>
+                <th class="px-3 py-2 text-right">
+                  {{ t('views.product.fields.conversion_value') }}
+                </th>
+                <th class="px-3 py-2 text-right">
+                  {{ t('views.stock_adjustment_in_item.table.cols.product_unit_cogs') }}
+                </th>
+                <th class="px-3 py-2"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="productUnitOptions.length === 0">
+                <td colspan="6" class="px-3 py-4 text-center text-slate-500">
+                  {{ t('components.data-list.data_not_found') }}
+                </td>
+              </tr>
+              <tr
+                v-for="(option, index) in productUnitOptions"
+                :key="`${option.product_unit_id}-${index}`"
+                class="border-t border-slate-200/60 dark:border-darkmode-400"
+              >
+                <td class="px-3 py-2">
+                  <ProductImagePreview
+                    :image-url="option.product_image_url"
+                    wrapper-class="w-10 h-10 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                    icon-class="w-4 h-4 text-slate-400"
+                  />
+                </td>
+                <td class="px-3 py-2">[{{ option.product_code }}] {{ option.product_name }}</td>
+                <td class="px-3 py-2">
+                  {{ option.unit_name }}
+                </td>
+                <td class="px-3 py-2 text-right">
+                  {{ formatCurrency(option.conversion_value) }}
+                </td>
+                <td class="px-3 py-2 text-right">
+                  {{ formatCurrency(option.cogs) }}
+                </td>
+                <td class="px-3 py-2 text-right">
+                  <Button type="button" variant="primary" size="sm" @click="selectProductUnit(option)">
+                    {{ t('components.buttons.select') }}
+                  </Button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/stock-transfer/StockTransferIndex.vue b/web/src/pages/stock-transfer/StockTransferIndex.vue
new file mode 100644
index 000000000..48faac72b
--- /dev/null
+++ b/web/src/pages/stock-transfer/StockTransferIndex.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref, provide } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import { useUserContextStore } from '@/stores/user-context';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.stock_transfer.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const stockTransferNotification = ref<NotificationElement>();
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[stockTransferNotification]', (el: NotificationElement) => {
+  stockTransferNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-stock-transfer-create' });
+};
+
+const backToList = () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-stock-transfer-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.stock_transfer.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.stock_transfer.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.stock_transfer.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  stockTransferNotification.value?.showToast();
+};
+
+const clearCache = (currentMode: ViewMode) => {
+  switch (currentMode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('STOCK_TRANSFER_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('STOCK_TRANSFER_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+
+    <Notification ref-key="stockTransferNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/stock-transfer/StockTransferItemList.vue b/web/src/pages/stock-transfer/StockTransferItemList.vue
new file mode 100644
index 000000000..ba332da19
--- /dev/null
+++ b/web/src/pages/stock-transfer/StockTransferItemList.vue
@@ -0,0 +1,631 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import StockTransferItemService from '@/services/StockTransferItemService';
+import WarehouseService from '@/services/WarehouseService';
+import ProductCategoryService from '@/services/ProductCategoryService';
+import BrandService from '@/services/BrandService';
+import { StockTransferItem } from '@/types/models/StockTransferItem';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { StockTransferItemReadAnyPaginateRequest } from '@/types/services/stock-transfer-item/StockTransferItemRequest';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { formatDate, formatCurrency } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import { FormInput, FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import { DropDownOption } from '@/types/models/DropDownOption';
+
+const { t } = useI18n();
+const router = useRouter();
+const stockTransferItemService = new StockTransferItemService();
+const warehouseService = new WarehouseService();
+const productCategoryService = new ProductCategoryService();
+const brandService = new BrandService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const loading = ref<boolean>(false);
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+const showAdvancedFilters = ref<boolean>(false);
+const stockTransferCode = ref<string>('');
+const productUnitCode = ref<string>('');
+const productName = ref<string>('');
+const selectedSourceWarehouseId = ref<string | null>(null);
+const selectedDestinationWarehouseId = ref<string | null>(null);
+const selectedProductCategoryId = ref<string | null>(null);
+const selectedProductBrandId = ref<string | null>(null);
+
+const stockTransferItemLists = ref<Collection<Array<StockTransferItem>> | null>({
+  data: [],
+  meta: {
+    current_page: 1,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 10,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const sourceWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const sourceWarehouseSearch = ref<string>('');
+const sourceWarehouseOptions = computed(() =>
+  (sourceWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const destinationWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const destinationWarehouseSearch = ref<string>('');
+const destinationWarehouseOptions = computed(() =>
+  (destinationWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const productCategoryDDL = ref<Array<DropDownOption> | null>(null);
+const productCategorySearch = ref<string>('');
+const productCategoryOptions = computed(() =>
+  (productCategoryDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const productBrandDDL = ref<Array<DropDownOption> | null>(null);
+const productBrandSearch = ref<string>('');
+const productBrandOptions = computed(() =>
+  (productBrandDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getStockTransferItems('', true, 1, 10);
+});
+
+const getStockTransferItems = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  setLoadingState(true);
+  searchText.value = search;
+  const safePage = page > 0 ? page : 1;
+  const safePerPage = per_page > 0 ? per_page : 10;
+
+  const request: StockTransferItemReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    stock_transfer_code: stockTransferCode.value || null,
+    stock_transfer_start_date: startDate.value || null,
+    stock_transfer_end_date: endDate.value || null,
+    stock_transfer_source_warehouse_id: selectedSourceWarehouseId.value,
+    stock_transfer_destination_warehouse_id: selectedDestinationWarehouseId.value,
+    product_unit_code: productUnitCode.value || null,
+    product_unit_product_name: productName.value || null,
+    product_unit_product_category_id: selectedProductCategoryId.value,
+    product_unit_product_brand_id: selectedProductBrandId.value,
+    refresh,
+    page: safePage,
+    per_page: safePerPage,
+  };
+
+  const result: ServiceResponse<Collection<Array<StockTransferItem>> | null> =
+    await stockTransferItemService.readAnyPaginate(request);
+
+  if (result.success && result.data) {
+    stockTransferItemLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  setLoadingState(false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getStockTransferItems(data.search.text, true, data.pagination.page, data.pagination.per_page);
+};
+
+const handleDateFilterChange = async () => {
+  const perPage = stockTransferItemLists.value?.meta.per_page || 10;
+  await getStockTransferItems(searchText.value, true, 1, perPage);
+};
+
+const handleTextFilterChange = async () => {
+  const perPage = stockTransferItemLists.value?.meta.per_page || 10;
+  await getStockTransferItems(searchText.value, true, 1, perPage);
+};
+
+const handleSourceWarehouseFilterChange = async () => {
+  const perPage = stockTransferItemLists.value?.meta.per_page || 10;
+  await getStockTransferItems(searchText.value, true, 1, perPage);
+};
+
+const handleDestinationWarehouseFilterChange = async () => {
+  const perPage = stockTransferItemLists.value?.meta.per_page || 10;
+  await getStockTransferItems(searchText.value, true, 1, perPage);
+};
+
+const handleProductCategoryFilterChange = async () => {
+  const perPage = stockTransferItemLists.value?.meta.per_page || 10;
+  await getStockTransferItems(searchText.value, true, 1, perPage);
+};
+
+const handleProductBrandFilterChange = async () => {
+  const perPage = stockTransferItemLists.value?.meta.per_page || 10;
+  await getStockTransferItems(searchText.value, true, 1, perPage);
+};
+
+const loadSourceWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    sourceWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadDestinationWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    destinationWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadProductCategoryDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await productCategoryService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    type: 1,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    productCategoryDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadProductBrandDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await brandService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    productBrandDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearSourceWarehouseFilter = async () => {
+  selectedSourceWarehouseId.value = null;
+  await handleSourceWarehouseFilterChange();
+};
+
+const clearDestinationWarehouseFilter = async () => {
+  selectedDestinationWarehouseId.value = null;
+  await handleDestinationWarehouseFilterChange();
+};
+
+const clearProductCategoryFilter = async () => {
+  selectedProductCategoryId.value = null;
+  productCategorySearch.value = '';
+  await handleProductCategoryFilterChange();
+};
+
+const clearProductBrandFilter = async () => {
+  selectedProductBrandId.value = null;
+  productBrandSearch.value = '';
+  await handleProductBrandFilterChange();
+};
+
+const toggleAdvancedFilters = async () => {
+  showAdvancedFilters.value = !showAdvancedFilters.value;
+  if (showAdvancedFilters.value) {
+    await Promise.all([
+      loadSourceWarehouseDDL(sourceWarehouseSearch.value),
+      loadDestinationWarehouseDDL(destinationWarehouseSearch.value),
+      loadProductCategoryDDL(productCategorySearch.value),
+      loadProductBrandDDL(productBrandSearch.value),
+    ]);
+  }
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!stockTransferItemLists.value) return;
+
+  const ulid = stockTransferItemLists.value.data[idx].stock_transfer?.ulid;
+  if (!ulid) return;
+
+  router.push({
+    name: 'side-menu-stock-transfer-edit',
+    params: { ulid },
+  });
+};
+
+const formatStockTransferDate = (date?: string) => {
+  if (!date) return '-';
+
+  return formatDate(date, 'DD-MMM-YYYY HH:mm:ss');
+};
+
+const getProductMainImageUrl = (item: StockTransferItem): string | null => {
+  const images = item.product_unit?.product?.product_images ?? [];
+  if (images.length === 0) return null;
+
+  const mainImage = images.find((img) => img.is_main);
+  if (mainImage?.url) return mainImage.url;
+
+  return images[0]?.url ?? null;
+};
+
+const getBaseUnitName = (item: StockTransferItem): string => {
+  const units = item.product_unit?.product?.product_units ?? [];
+  const baseUnit =
+    units.find((unit) => unit.is_base) ??
+    units.find((unit) => Number(unit.conversion_value) === 1) ??
+    units.find((unit) => unit.is_primary_unit) ??
+    null;
+
+  return baseUnit?.unit?.name ?? '';
+};
+
+const getQtyDisplay = (item: StockTransferItem): string => {
+  const qty = formatCurrency(item.qty);
+  const unitName = item.product_unit?.unit?.name ?? '';
+  if (!unitName) return qty;
+
+  const conversionValue = Number(item.product_unit_conversion_value ?? 1);
+  if (conversionValue <= 1) return `${qty} ${unitName}`;
+
+  const baseUnitName = getBaseUnitName(item);
+  if (!baseUnitName || baseUnitName === unitName) return `${qty} ${unitName}`;
+
+  const baseQty = formatCurrency(item.qty * conversionValue);
+  return `${qty} ${unitName} (${baseQty} ${baseUnitName})`;
+};
+
+const getConversionValueDisplay = (item: StockTransferItem): string => {
+  const conversionValue = formatCurrency(item.product_unit_conversion_value);
+  const productUnit = item.product_unit;
+  if (!productUnit || productUnit.is_base) return conversionValue;
+
+  const baseUnitName = getBaseUnitName(item);
+  const currentUnitName = productUnit.unit?.name ?? '';
+  if (!baseUnitName || !currentUnitName) return conversionValue;
+
+  return `${conversionValue} ${baseUnitName} / ${currentUnitName}`;
+};
+
+const getSerialsDisplay = (item: StockTransferItem): string => {
+  const serials = item.serials ?? [];
+  if (serials.length === 0) return '-';
+
+  return serials.map((serialItem) => serialItem.serial).join(', ');
+};
+
+const setLoadingState = (state: boolean) => {
+  loading.value = state;
+  emits('loading-state', state);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  alertType.value = pAlertType;
+  title.value = pTitle;
+  alertList.value = pAlertList;
+
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div>
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t('views.stock_transfer_item.page_title') }}
+        </template>
+      </TitleLayout>
+
+      <div class="grid grid-cols-12 gap-6 mt-5">
+        <div class="col-span-12 intro-y lg:col-span-12">
+          <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList"
+            @dismiss="resetAlertPlaceholder" />
+
+          <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel>{{ t('views.stock_transfer.fields.start_date') }}</FormLabel>
+              <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-3">
+              <FormLabel>{{ t('views.stock_transfer.fields.end_date') }}</FormLabel>
+              <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+            </div>
+            <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+              <Button variant="soft-secondary"
+                class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+                @click="toggleAdvancedFilters">
+                <Lucide icon="Filter" class="w-4 h-5" />
+              </Button>
+            </div>
+          </div>
+
+          <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.stock_transfer.fields.stock_transfer_code') }}</FormLabel>
+              <FormInput v-model="stockTransferCode" type="text" @change="handleTextFilterChange" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.stock_transfer.fields.source_warehouse_id') }}</FormLabel>
+              <FormSelectSearch v-model="selectedSourceWarehouseId" v-model:search="sourceWarehouseSearch"
+                :options="sourceWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleSourceWarehouseFilterChange" @search="loadSourceWarehouseDDL"
+                @clear="clearSourceWarehouseFilter" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.stock_transfer.fields.destination_warehouse_id') }}</FormLabel>
+              <FormSelectSearch v-model="selectedDestinationWarehouseId" v-model:search="destinationWarehouseSearch"
+                :options="destinationWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleDestinationWarehouseFilterChange" @search="loadDestinationWarehouseDDL"
+                @clear="clearDestinationWarehouseFilter" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.stock_transfer.fields.product_unit_code') }}</FormLabel>
+              <FormInput v-model="productUnitCode" type="text" @change="handleTextFilterChange" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.stock_transfer.fields.product_name') }}</FormLabel>
+              <FormInput v-model="productName" type="text" @change="handleTextFilterChange" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.product.fields.category_id') }}</FormLabel>
+              <FormSelectSearch v-model="selectedProductCategoryId" v-model:search="productCategorySearch"
+                :options="productCategoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleProductCategoryFilterChange" @search="loadProductCategoryDDL"
+                @clear="clearProductCategoryFilter" />
+            </div>
+            <div class="col-span-12 md:col-span-6 lg:col-span-2">
+              <FormLabel>{{ t('views.product.fields.brand_id') }}</FormLabel>
+              <FormSelectSearch v-model="selectedProductBrandId" v-model:search="productBrandSearch"
+                :options="productBrandOptions" :placeholder="t('components.dropdown.placeholder')"
+                @change="handleProductBrandFilterChange" @search="loadProductBrandDDL"
+                @clear="clearProductBrandFilter" />
+            </div>
+          </div>
+
+          <DataListFlex :data="stockTransferItemLists" :enable-search="true" :can-print="true"
+              :can-export="true" :rows="stockTransferItemLists?.data ?? []"
+              row-class="bg-white dark:bg-darkmode-600"
+              :pagination="stockTransferItemLists ? stockTransferItemLists.meta : null"
+              @dataListChanged="handleDataListChange">
+              <template #row="{ item, index }">
+                <div class="col-span-12 lg:col-span-1 md:col-span-12 flex items-center justify-center md:justify-start">
+                  <ProductImagePreview :image-url="getProductMainImageUrl(item as StockTransferItem)"
+                    wrapper-class="w-12 h-12 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                    icon-class="w-4 h-4 text-slate-400" />
+                </div>
+
+                <div class="col-span-12 lg:col-span-4 md:col-span-5 self-start">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                    {{ t('views.stock_transfer.page_title') }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.stock_transfer.fields.code') }}:
+                    {{ (item as StockTransferItem).stock_transfer?.code ?? '-' }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.stock_transfer.fields.date') }}:
+                    {{ formatStockTransferDate((item as StockTransferItem).stock_transfer?.date) }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.stock_transfer.fields.source_warehouse_id') }}:
+                    {{ (item as StockTransferItem).stock_transfer?.source_warehouse?.name ?? '-' }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.stock_transfer.fields.destination_warehouse_id') }}:
+                    {{ (item as StockTransferItem).stock_transfer?.destination_warehouse?.name ?? '-' }}
+                  </div>
+                  <div v-if="(item as StockTransferItem).stock_transfer?.remarks?.trim()"
+                    class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.stock_transfer.fields.remarks') }}:
+                    {{ (item as StockTransferItem).stock_transfer?.remarks }}
+                  </div>
+                </div>
+
+                <div class="col-span-12 lg:col-span-3 md:col-span-4 self-start">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                    {{ t('views.product.page_title') }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.product.fields.code') }}:
+                    {{ (item as StockTransferItem).product_unit?.product?.code ?? '-' }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.product.fields.name') }}:
+                    {{ (item as StockTransferItem).product_unit?.product?.name ?? '-' }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.product.fields.category_id') }}:
+                    {{ (item as StockTransferItem).product_unit?.product?.category?.name ?? '-' }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.product.fields.brand_id') }}:
+                    {{ (item as StockTransferItem).product_unit?.product?.brand?.name ?? '-' }}
+                  </div>
+                </div>
+
+                <div class="col-span-12 lg:col-span-3 md:col-span-3 self-start">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                    {{ t('views.stock_transfer_item.table.cols.product_unit') }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.product.fields.unit_code') }}:
+                    {{ (item as StockTransferItem).product_unit?.code ?? '-' }}
+                  </div>
+                  <div class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.stock_transfer_item.table.cols.qty') }}:
+                    {{ getQtyDisplay(item as StockTransferItem) }}
+                  </div>
+                  <div v-if="Number((item as StockTransferItem).product_unit_conversion_value ?? 1) > 1"
+                    class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.stock_transfer_item.table.cols.product_unit_conversion_value') }}:
+                    {{ getConversionValueDisplay(item as StockTransferItem) }}
+                  </div>
+                  <div v-if="(item as StockTransferItem).remarks?.trim()"
+                    class="text-slate-500 text-xs whitespace-nowrap">
+                    {{ t('views.stock_transfer_item.table.cols.remarks') }}:
+                    {{ (item as StockTransferItem).remarks }}
+                  </div>
+                  <div v-if="((item as StockTransferItem).serials?.length ?? 0) > 0"
+                    class="text-slate-500 text-xs mt-1">
+                    <span class="font-medium">{{ t('views.product.fields.serial_number') }}:</span>
+                    <span class="break-all"> {{ getSerialsDisplay(item as StockTransferItem) }}</span>
+                  </div>
+                </div>
+
+                <div class="col-span-12 lg:col-span-1 md:col-span-12 flex justify-end items-center gap-2">
+                  <Button size="sm" variant="outline-secondary" class="flex items-center gap-1"
+                    @click="viewSelected(index)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button size="sm" variant="outline-secondary" class="flex items-center gap-1"
+                    @click="editSelected(index)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                </div>
+
+                <div v-if="expandDetail === index"
+                  class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3">
+                  <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                    {{ t('views.product.fields.serial_number') }}
+                  </div>
+                  <div v-if="((item as StockTransferItem).serials?.length ?? 0) === 0"
+                    class="text-slate-500 text-xs italic">
+                    {{ t('components.data-list.data_not_found') }}
+                  </div>
+                  <div v-else class="text-slate-500 text-xs break-all">
+                    {{(item as StockTransferItem).serials.map((serial) => serial.serial).join(', ')}}
+                  </div>
+                </div>
+              </template>
+          </DataListFlex>
+        </div>
+      </div>
+    </LoadingOverlay>
+  </div>
+</template>
diff --git a/web/src/pages/stock-transfer/StockTransferItemSerialList.vue b/web/src/pages/stock-transfer/StockTransferItemSerialList.vue
new file mode 100644
index 000000000..50606ef6d
--- /dev/null
+++ b/web/src/pages/stock-transfer/StockTransferItemSerialList.vue
@@ -0,0 +1,576 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import StockTransferItemSerialService from '@/services/StockTransferItemSerialService';
+import WarehouseService from '@/services/WarehouseService';
+import ProductCategoryService from '@/services/ProductCategoryService';
+import BrandService from '@/services/BrandService';
+import { StockTransferItemSerial } from '@/types/models/StockTransferItemSerial';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { StockTransferItemSerialReadAnyPaginateRequest } from '@/types/services/stock-transfer-item-serial/StockTransferItemSerialRequest';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { formatDate } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import ProductImagePreview from '@/components/Product/ProductImagePreview.vue';
+import { FormInput, FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import { DropDownOption } from '@/types/models/DropDownOption';
+
+const { t } = useI18n();
+const router = useRouter();
+const stockTransferItemSerialService = new StockTransferItemSerialService();
+const warehouseService = new WarehouseService();
+const productCategoryService = new ProductCategoryService();
+const brandService = new BrandService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+]);
+
+const loading = ref<boolean>(false);
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+const showAdvancedFilters = ref<boolean>(false);
+const stockTransferCode = ref<string>('');
+const productUnitCode = ref<string>('');
+const productName = ref<string>('');
+const selectedSourceWarehouseId = ref<string | null>(null);
+const selectedDestinationWarehouseId = ref<string | null>(null);
+const selectedProductCategoryId = ref<string | null>(null);
+const selectedProductBrandId = ref<string | null>(null);
+
+const stockTransferItemSerialLists = ref<Collection<Array<StockTransferItemSerial>> | null>({
+    data: [],
+    meta: {
+        current_page: 1,
+        from: null,
+        last_page: 0,
+        path: '',
+        per_page: 10,
+        to: null,
+        total: 0,
+    },
+    links: {
+        first: '',
+        last: '',
+        prev: null,
+        next: null,
+    },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const sourceWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const sourceWarehouseSearch = ref<string>('');
+const sourceWarehouseOptions = computed(() =>
+    (sourceWarehouseDDL.value ?? []).map((item) => ({
+        value: item.code,
+        label: item.name,
+    })),
+);
+
+const destinationWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const destinationWarehouseSearch = ref<string>('');
+const destinationWarehouseOptions = computed(() =>
+    (destinationWarehouseDDL.value ?? []).map((item) => ({
+        value: item.code,
+        label: item.name,
+    })),
+);
+
+const productCategoryDDL = ref<Array<DropDownOption> | null>(null);
+const productCategorySearch = ref<string>('');
+const productCategoryOptions = computed(() =>
+    (productCategoryDDL.value ?? []).map((item) => ({
+        value: item.code,
+        label: item.name,
+    })),
+);
+
+const productBrandDDL = ref<Array<DropDownOption> | null>(null);
+const productBrandSearch = ref<string>('');
+const productBrandOptions = computed(() =>
+    (productBrandDDL.value ?? []).map((item) => ({
+        value: item.code,
+        label: item.name,
+    })),
+);
+
+onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+        router.push({
+            name: 'side-menu-error-code',
+            params: { code: ErrorCode.USERLOCATION_REQUIRED },
+        });
+        return;
+    }
+
+    const now = new Date();
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+    startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+    endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+    await getStockTransferItemSerials('', true, 1, 10);
+});
+
+const getStockTransferItemSerials = async (
+    search: string,
+    refresh: boolean,
+    page: number,
+    per_page: number,
+) => {
+    setLoadingState(true);
+    searchText.value = search;
+    const safePage = page > 0 ? page : 1;
+    const safePerPage = per_page > 0 ? per_page : 10;
+
+    const request: StockTransferItemSerialReadAnyPaginateRequest = {
+        with_trashed: false,
+        company_id: selectedUserLocation.value.company.id,
+        branch_id: selectedUserLocation.value.branch.id,
+        search,
+        stock_transfer_code: stockTransferCode.value || null,
+        stock_transfer_start_date: startDate.value || null,
+        stock_transfer_end_date: endDate.value || null,
+        stock_transfer_source_warehouse_id: selectedSourceWarehouseId.value,
+        stock_transfer_destination_warehouse_id: selectedDestinationWarehouseId.value,
+        product_unit_code: productUnitCode.value || null,
+        product_unit_product_name: productName.value || null,
+        product_unit_product_category_id: selectedProductCategoryId.value,
+        product_unit_product_brand_id: selectedProductBrandId.value,
+        refresh,
+        page: safePage,
+        per_page: safePerPage,
+    };
+
+    const result: ServiceResponse<Collection<Array<StockTransferItemSerial>> | null> =
+        await stockTransferItemSerialService.readAnyPaginate(request);
+
+    if (result.success && result.data) {
+        stockTransferItemSerialLists.value = result.data;
+        showAlertPlaceholder('hidden', '', null);
+    } else {
+        showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    setLoadingState(false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+    await getStockTransferItemSerials(data.search.text, true, data.pagination.page, data.pagination.per_page);
+};
+
+const handleDateFilterChange = async () => {
+    const perPage = stockTransferItemSerialLists.value?.meta.per_page || 10;
+    await getStockTransferItemSerials(searchText.value, true, 1, perPage);
+};
+
+const handleTextFilterChange = async () => {
+    const perPage = stockTransferItemSerialLists.value?.meta.per_page || 10;
+    await getStockTransferItemSerials(searchText.value, true, 1, perPage);
+};
+
+const handleSourceWarehouseFilterChange = async () => {
+    const perPage = stockTransferItemSerialLists.value?.meta.per_page || 10;
+    await getStockTransferItemSerials(searchText.value, true, 1, perPage);
+};
+
+const handleDestinationWarehouseFilterChange = async () => {
+    const perPage = stockTransferItemSerialLists.value?.meta.per_page || 10;
+    await getStockTransferItemSerials(searchText.value, true, 1, perPage);
+};
+
+const handleProductCategoryFilterChange = async () => {
+    const perPage = stockTransferItemSerialLists.value?.meta.per_page || 10;
+    await getStockTransferItemSerials(searchText.value, true, 1, perPage);
+};
+
+const handleProductBrandFilterChange = async () => {
+    const perPage = stockTransferItemSerialLists.value?.meta.per_page || 10;
+    await getStockTransferItemSerials(searchText.value, true, 1, perPage);
+};
+
+const loadSourceWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+        with_trashed: false,
+        company_id: selectedUserLocation.value.company.id,
+        branch_id: selectedUserLocation.value.branch.id,
+        search,
+        include_id: undefined,
+        status: undefined,
+        refresh: false,
+        limit: 20,
+    });
+
+    if (result.success && result.data) {
+        sourceWarehouseDDL.value = result.data.data.map((item: any) => ({
+            code: item.id,
+            name: item.name,
+        }));
+    }
+};
+
+const loadDestinationWarehouseDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await warehouseService.readAnyGet({
+        with_trashed: false,
+        company_id: selectedUserLocation.value.company.id,
+        branch_id: selectedUserLocation.value.branch.id,
+        search,
+        include_id: undefined,
+        status: undefined,
+        refresh: false,
+        limit: 20,
+    });
+
+    if (result.success && result.data) {
+        destinationWarehouseDDL.value = result.data.data.map((item: any) => ({
+            code: item.id,
+            name: item.name,
+        }));
+    }
+};
+
+const loadProductCategoryDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await productCategoryService.readAnyGet({
+        with_trashed: false,
+        company_id: selectedUserLocation.value.company.id,
+        search,
+        type: 1,
+        refresh: false,
+        limit: 20,
+    });
+
+    if (result.success && result.data) {
+        productCategoryDDL.value = result.data.data.map((item: any) => ({
+            code: item.id,
+            name: item.name,
+        }));
+    }
+};
+
+const loadProductBrandDDL = async (search = '') => {
+    if (!selectedUserLocation.value) return;
+
+    const result = await brandService.readAnyGet({
+        with_trashed: false,
+        company_id: selectedUserLocation.value.company.id,
+        search,
+        refresh: false,
+        limit: 20,
+    });
+
+    if (result.success && result.data) {
+        productBrandDDL.value = result.data.data.map((item: any) => ({
+            code: item.id,
+            name: item.name,
+        }));
+    }
+};
+
+const clearSourceWarehouseFilter = async () => {
+    selectedSourceWarehouseId.value = null;
+    await handleSourceWarehouseFilterChange();
+};
+
+const clearDestinationWarehouseFilter = async () => {
+    selectedDestinationWarehouseId.value = null;
+    await handleDestinationWarehouseFilterChange();
+};
+
+const clearProductCategoryFilter = async () => {
+    selectedProductCategoryId.value = null;
+    productCategorySearch.value = '';
+    await handleProductCategoryFilterChange();
+};
+
+const clearProductBrandFilter = async () => {
+    selectedProductBrandId.value = null;
+    productBrandSearch.value = '';
+    await handleProductBrandFilterChange();
+};
+
+const toggleAdvancedFilters = async () => {
+    showAdvancedFilters.value = !showAdvancedFilters.value;
+    if (showAdvancedFilters.value) {
+        await Promise.all([
+            loadSourceWarehouseDDL(sourceWarehouseSearch.value),
+            loadDestinationWarehouseDDL(destinationWarehouseSearch.value),
+            loadProductCategoryDDL(productCategorySearch.value),
+            loadProductBrandDDL(productBrandSearch.value),
+        ]);
+    }
+};
+
+const editSelected = (idx: number) => {
+    if (!stockTransferItemSerialLists.value) return;
+
+    const ulid = stockTransferItemSerialLists.value.data[idx].stock_transfer?.ulid;
+    if (!ulid) return;
+
+    router.push({
+        name: 'side-menu-stock-transfer-edit',
+        params: { ulid },
+    });
+};
+
+const formatStockTransferDate = (item: StockTransferItemSerial) => {
+    const date = item.stock_transfer?.date;
+    if (!date) return '-';
+
+    return formatDate(date, 'DD-MMM-YYYY HH:mm:ss');
+};
+
+const getProductMainImageUrl = (item: StockTransferItemSerial): string | null => {
+    const images = item.stock_transfer_item?.product_unit?.product?.product_images ?? [];
+    if (images.length === 0) return null;
+
+    const mainImage = images.find((img) => img.is_main);
+    if (mainImage?.url) return mainImage.url;
+
+    return images[0]?.url ?? null;
+};
+
+const setLoadingState = (state: boolean) => {
+    loading.value = state;
+    emits('loading-state', state);
+};
+
+const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+) => {
+    alertType.value = pAlertType;
+    title.value = pTitle;
+    alertList.value = pAlertList;
+
+    const ap: AlertPlaceholderProps = {
+        alertType: pAlertType,
+        title: pTitle,
+        alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+};
+
+const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+};
+</script>
+
+<template>
+    <div>
+        <LoadingOverlay :visible="loading">
+            <TitleLayout>
+                <template #title>
+                    {{ t('views.stock_transfer_item_serial.page_title') }}
+                </template>
+            </TitleLayout>
+
+            <div class="grid grid-cols-12 gap-6 mt-5">
+                <div class="col-span-12 intro-y lg:col-span-12">
+                    <AlertPlaceholder :alert-type="alertType" :title="title" :alert-list="alertList"
+                        @dismiss="resetAlertPlaceholder" />
+
+                    <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+                        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+                            <FormLabel>{{ t('views.stock_transfer.fields.start_date') }}</FormLabel>
+                            <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+                            <FormLabel>{{ t('views.stock_transfer.fields.end_date') }}</FormLabel>
+                            <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+                        </div>
+                        <div class="col-span-12 md:col-span-12 lg:col-span-2 flex items-end">
+                            <Button variant="soft-secondary"
+                                class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+                                @click="toggleAdvancedFilters">
+                                <Lucide icon="Filter" class="w-4 h-5" />
+                            </Button>
+                        </div>
+                    </div>
+
+                    <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                            <FormLabel>{{ t('views.stock_transfer.fields.stock_transfer_code') }}</FormLabel>
+                            <FormInput v-model="stockTransferCode" type="text" @change="handleTextFilterChange" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                            <FormLabel>{{ t('views.stock_transfer.fields.source_warehouse_id') }}</FormLabel>
+                            <FormSelectSearch v-model="selectedSourceWarehouseId" v-model:search="sourceWarehouseSearch"
+                                :options="sourceWarehouseOptions" :placeholder="t('components.dropdown.placeholder')"
+                                @change="handleSourceWarehouseFilterChange" @search="loadSourceWarehouseDDL"
+                                @clear="clearSourceWarehouseFilter" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                            <FormLabel>{{ t('views.stock_transfer.fields.destination_warehouse_id') }}</FormLabel>
+                            <FormSelectSearch v-model="selectedDestinationWarehouseId"
+                                v-model:search="destinationWarehouseSearch" :options="destinationWarehouseOptions"
+                                :placeholder="t('components.dropdown.placeholder')"
+                                @change="handleDestinationWarehouseFilterChange" @search="loadDestinationWarehouseDDL"
+                                @clear="clearDestinationWarehouseFilter" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                            <FormLabel>{{ t('views.stock_transfer.fields.product_unit_code') }}</FormLabel>
+                            <FormInput v-model="productUnitCode" type="text" @change="handleTextFilterChange" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                            <FormLabel>{{ t('views.stock_transfer.fields.product_name') }}</FormLabel>
+                            <FormInput v-model="productName" type="text" @change="handleTextFilterChange" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                            <FormLabel>{{ t('views.product.fields.category_id') }}</FormLabel>
+                            <FormSelectSearch v-model="selectedProductCategoryId" v-model:search="productCategorySearch"
+                                :options="productCategoryOptions" :placeholder="t('components.dropdown.placeholder')"
+                                @change="handleProductCategoryFilterChange" @search="loadProductCategoryDDL"
+                                @clear="clearProductCategoryFilter" />
+                        </div>
+                        <div class="col-span-12 md:col-span-6 lg:col-span-2">
+                            <FormLabel>{{ t('views.product.fields.brand_id') }}</FormLabel>
+                            <FormSelectSearch v-model="selectedProductBrandId" v-model:search="productBrandSearch"
+                                :options="productBrandOptions" :placeholder="t('components.dropdown.placeholder')"
+                                @change="handleProductBrandFilterChange" @search="loadProductBrandDDL"
+                                @clear="clearProductBrandFilter" />
+                        </div>
+                    </div>
+
+                    <DataListFlex :data="stockTransferItemSerialLists" :enable-search="true"
+                            :can-print="true" :can-export="true" :rows="stockTransferItemSerialLists?.data ?? []"
+                            row-class="bg-white dark:bg-darkmode-600"
+                            :pagination="stockTransferItemSerialLists ? stockTransferItemSerialLists.meta : null"
+                            @dataListChanged="handleDataListChange">
+                            <template #row="{ item, index }">
+                                <div
+                                    class="col-span-12 lg:col-span-1 md:col-span-12 flex items-center justify-center md:justify-start">
+                                    <ProductImagePreview
+                                        :image-url="getProductMainImageUrl(item as StockTransferItemSerial)"
+                                        wrapper-class="w-12 h-12 rounded-md overflow-hidden bg-slate-100 dark:bg-darkmode-600 flex items-center justify-center cursor-zoom-in"
+                                        icon-class="w-4 h-4 text-slate-400" />
+                                </div>
+
+                                <div class="col-span-12 lg:col-span-4 md:col-span-5 self-start">
+                                    <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                                        {{ t('views.stock_transfer.page_title') }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.stock_transfer.fields.code') }}:
+                                        {{ (item as StockTransferItemSerial).stock_transfer?.code ?? '-' }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.stock_transfer.fields.date') }}:
+                                        {{ formatStockTransferDate(item as StockTransferItemSerial) }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.stock_transfer.fields.source_warehouse_id') }}:
+                                        {{ (item as
+                                            StockTransferItemSerial).stock_transfer?.source_warehouse?.name ?? '-' }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.stock_transfer.fields.destination_warehouse_id') }}:
+                                        {{ (item as
+                                            StockTransferItemSerial).stock_transfer?.destination_warehouse?.name ??
+                                        '-' }}
+                                    </div>
+                                    <div v-if="(item as StockTransferItemSerial).stock_transfer?.remarks?.trim()"
+                                        class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.stock_transfer.fields.remarks') }}:
+                                        {{ (item as StockTransferItemSerial).stock_transfer?.remarks }}
+                                    </div>
+                                </div>
+
+                                <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+                                    <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                                        {{ t('views.product.page_title') }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.product.fields.code') }}:
+                                        {{ (item as
+                                            StockTransferItemSerial).stock_transfer_item?.product_unit?.product?.code
+                                        ?? '-' }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.product.fields.name') }}:
+                                        {{ (item as
+                                            StockTransferItemSerial).stock_transfer_item?.product_unit?.product?.name
+                                        ?? '-' }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.product.fields.category_id') }}:
+                                        {{ (item as
+                                            StockTransferItemSerial).stock_transfer_item?.product_unit?.product?.category?.name
+                                        ?? '-' }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.product.fields.brand_id') }}:
+                                        {{ (item as
+                                            StockTransferItemSerial).stock_transfer_item?.product_unit?.product?.brand?.name
+                                        ?? '-' }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.product.fields.unit_code') }}:
+                                        {{ (item as
+                                            StockTransferItemSerial).stock_transfer_item?.product_unit?.code
+                                        ?? '-' }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs whitespace-nowrap">
+                                        {{ t('views.stock_transfer_item.fields.product_unit_id') }}:
+                                        {{ (item as
+                                            StockTransferItemSerial).stock_transfer_item?.product_unit?.unit?.name
+                                        ?? '-' }}
+                                    </div>
+                                </div>
+
+                                <div class="col-span-12 lg:col-span-2 md:col-span-2 self-start">
+                                    <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+                                        {{ t('views.product.fields.serial_number') }}
+                                    </div>
+                                    <div class="text-slate-500 text-xs break-all">
+                                        {{ (item as StockTransferItemSerial).serial || '-' }}
+                                    </div>
+                                </div>
+
+                                <div
+                                    class="col-span-12 lg:col-span-1 md:col-span-12 flex justify-end items-center gap-2">
+                                    <Button size="sm" variant="outline-secondary" class="flex items-center gap-1"
+                                        @click="editSelected(index)">
+                                        <Lucide icon="Pen" class="w-4 h-4" />
+                                    </Button>
+                                </div>
+                            </template>
+                    </DataListFlex>
+                </div>
+            </div>
+        </LoadingOverlay>
+    </div>
+</template>
diff --git a/web/src/pages/stock-transfer/StockTransferList.vue b/web/src/pages/stock-transfer/StockTransferList.vue
new file mode 100644
index 000000000..6ab41b97b
--- /dev/null
+++ b/web/src/pages/stock-transfer/StockTransferList.vue
@@ -0,0 +1,500 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataListFlex } from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { Dialog } from '@/components/Base/Headless';
+import StockTransferService from '@/services/StockTransferService';
+import WarehouseService from '@/services/WarehouseService';
+import { StockTransfer } from '@/types/models/StockTransfer';
+import { NotificationData } from '@/types/models/NotificationData';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { StockTransferReadAnyPaginateRequest } from '@/types/services/stock-transfer/StockTransferRequest';
+import { useRouter } from 'vue-router';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { formatDate, formatCurrency } from '@/utils/helper';
+import type { AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { FormInputDateTime, FormLabel, FormSelectSearch } from '@/components/Base/Form';
+import { DropDownOption } from '@/types/models/DropDownOption';
+
+const { t } = useI18n();
+const router = useRouter();
+const stockTransferService = new StockTransferService();
+const warehouseService = new WarehouseService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const startDate = ref<string | null>(null);
+const endDate = ref<string | null>(null);
+const searchText = ref<string>('');
+const showAdvancedFilters = ref<boolean>(false);
+const selectedSourceWarehouseId = ref<string | null>(null);
+const selectedDestinationWarehouseId = ref<string | null>(null);
+
+const stockTransferLists = ref<Collection<Array<StockTransfer>> | null>({
+  data: [],
+  meta: {
+    current_page: 1,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 10,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const sourceWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const sourceWarehouseSearch = ref<string>('');
+const sourceWarehouseOptions = computed(() =>
+  (sourceWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+const destinationWarehouseDDL = ref<Array<DropDownOption> | null>(null);
+const destinationWarehouseSearch = ref<string>('');
+const destinationWarehouseOptions = computed(() =>
+  (destinationWarehouseDDL.value ?? []).map((item) => ({
+    value: item.code,
+    label: item.name,
+  })),
+);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+  startDate.value = formatDate(startOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+  endDate.value = formatDate(endOfMonth.toString(), 'YYYY-MM-DD HH:mm:ss');
+
+  await getStockTransfers('', true, 1, 10);
+});
+
+const getStockTransfers = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+  searchText.value = search;
+  const safePage = page > 0 ? page : 1;
+  const safePerPage = per_page > 0 ? per_page : 10;
+
+  const request: StockTransferReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    start_date: startDate.value || null,
+    end_date: endDate.value || null,
+    source_warehouse_id: selectedSourceWarehouseId.value,
+    destination_warehouse_id: selectedDestinationWarehouseId.value,
+    refresh,
+    page: safePage,
+    per_page: safePerPage,
+  };
+
+  const result: ServiceResponse<Collection<Array<StockTransfer>> | null> =
+    await stockTransferService.readAnyPaginate(request);
+
+  if (result.success && result.data) {
+    stockTransferLists.value = result.data;
+    showAlertPlaceholder('hidden', '', null);
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const handleDataListChange = async (data: DataListEmittedData) => {
+  await getStockTransfers(data.search.text, true, data.pagination.page, data.pagination.per_page);
+};
+
+const handleDateFilterChange = async () => {
+  const perPage = stockTransferLists.value?.meta.per_page || 10;
+  await getStockTransfers(searchText.value, true, 1, perPage);
+};
+
+const handleSourceWarehouseFilterChange = async () => {
+  const perPage = stockTransferLists.value?.meta.per_page || 10;
+  await getStockTransfers(searchText.value, true, 1, perPage);
+};
+
+const handleDestinationWarehouseFilterChange = async () => {
+  const perPage = stockTransferLists.value?.meta.per_page || 10;
+  await getStockTransfers(searchText.value, true, 1, perPage);
+};
+
+const loadSourceWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    sourceWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const loadDestinationWarehouseDDL = async (search = '') => {
+  if (!selectedUserLocation.value) return;
+
+  const result = await warehouseService.readAnyGet({
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    branch_id: selectedUserLocation.value.branch.id,
+    search,
+    include_id: undefined,
+    status: undefined,
+    refresh: false,
+    limit: 20,
+  });
+
+  if (result.success && result.data) {
+    destinationWarehouseDDL.value = result.data.data.map((item: any) => ({
+      code: item.id,
+      name: item.name,
+    }));
+  }
+};
+
+const clearSourceWarehouseFilter = async () => {
+  selectedSourceWarehouseId.value = null;
+  await handleSourceWarehouseFilterChange();
+};
+
+const clearDestinationWarehouseFilter = async () => {
+  selectedDestinationWarehouseId.value = null;
+  await handleDestinationWarehouseFilterChange();
+};
+
+const toggleAdvancedFilters = async () => {
+  showAdvancedFilters.value = !showAdvancedFilters.value;
+  if (showAdvancedFilters.value) {
+    await Promise.all([
+      loadSourceWarehouseDDL(sourceWarehouseSearch.value),
+      loadDestinationWarehouseDDL(destinationWarehouseSearch.value),
+    ]);
+  }
+};
+
+const viewSelected = (idx: number) => {
+  expandDetail.value = expandDetail.value === idx ? null : idx;
+};
+
+const editSelected = (idx: number) => {
+  if (!stockTransferLists.value) return;
+
+  const ulid = stockTransferLists.value.data[idx].ulid;
+
+  emits('mode-state', ViewMode.FORM_EDIT);
+  router.push({
+    name: 'side-menu-stock-transfer-edit',
+    params: { ulid },
+  });
+};
+
+const deleteSelected = (idx: number) => {
+  if (!stockTransferLists.value) return;
+
+  deleteUlid.value = stockTransferLists.value.data[idx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result = await stockTransferService.delete(deleteUlid.value);
+
+  emits('loading-state', false);
+
+  if (result.success) {
+    emits('update-profile');
+    await getStockTransfers('', true, 1, 10);
+    showNotification(
+      t('views.stock_transfer.alert.delete.title'),
+      t('views.stock_transfer.alert.delete.message'),
+    );
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-12 gap-6 mt-5">
+    <div class="col-span-12 intro-y lg:col-span-12">
+      <div class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_transfer.fields.start_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="startDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_transfer.fields.end_date') }}
+          </FormLabel>
+          <FormInputDateTime v-model="endDate" @change="handleDateFilterChange" />
+        </div>
+        <div class="col-span-12 md:col-span-12 lg:col-span-1 flex items-end">
+          <Button variant="soft-secondary"
+            class="shadow-sm border-slate-300 bg-slate-100/80 hover:bg-slate-200 hover:border-slate-400 dark:border-darkmode-300 dark:bg-darkmode-300/40 dark:hover:bg-darkmode-300"
+            @click="toggleAdvancedFilters">
+            <Lucide icon="Filter" class="w-4 h-5" />
+          </Button>
+        </div>
+      </div>
+
+      <div v-if="showAdvancedFilters" class="grid grid-cols-12 gap-4 gap-y-3 mb-3">
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_transfer.fields.source_warehouse_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch
+                v-model="selectedSourceWarehouseId"
+                v-model:search="sourceWarehouseSearch"
+                :options="sourceWarehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                @change="handleSourceWarehouseFilterChange"
+                @search="loadSourceWarehouseDDL"
+                @clear="clearSourceWarehouseFilter"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-6 lg:col-span-3">
+          <FormLabel>
+            {{ t('views.stock_transfer.fields.destination_warehouse_id') }}
+          </FormLabel>
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <FormSelectSearch
+                v-model="selectedDestinationWarehouseId"
+                v-model:search="destinationWarehouseSearch"
+                :options="destinationWarehouseOptions"
+                :placeholder="t('components.dropdown.placeholder')"
+                @change="handleDestinationWarehouseFilterChange"
+                @search="loadDestinationWarehouseDDL"
+                @clear="clearDestinationWarehouseFilter"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <DataListFlex
+        :data="stockTransferLists"
+        :enable-search="true"
+        :can-print="true"
+        :can-export="true"
+        :rows="stockTransferLists?.data ?? []"
+        row-class="bg-white dark:bg-darkmode-600"
+        :pagination="stockTransferLists ? stockTransferLists.meta : null"
+        @dataListChanged="handleDataListChange"
+      >
+        <template #row="{ item, index }">
+          <div class="col-span-12 lg:col-span-5 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.stock_transfer.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_transfer.fields.code') }}:
+              {{ (item as StockTransfer).code ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_transfer.fields.date') }}:
+              {{ (item as StockTransfer).date ? formatDate((item as StockTransfer).date, 'DD-MMM-YYYY HH:mm:ss') : '-' }}
+            </div>
+            <div v-if="(item as StockTransfer).remarks?.trim()" class="text-slate-500 text-xs">
+              {{ t('views.stock_transfer.fields.remarks') }}:
+              {{ (item as StockTransfer).remarks }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-4 md:col-span-4 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.warehouse.page_title') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_transfer.fields.source_warehouse_id') }}:
+              {{ (item as StockTransfer).source_warehouse?.name ?? '-' }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              {{ t('views.stock_transfer.fields.destination_warehouse_id') }}:
+              {{ (item as StockTransfer).destination_warehouse?.name ?? '-' }}
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-2 md:col-span-2 self-start">
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.stock_transfer.fields.is_posted') }}
+            </div>
+            <div class="text-slate-500 text-xs whitespace-nowrap">
+              <span class="inline-flex items-center">
+                <Lucide v-if="(item as StockTransfer).is_posted" icon="CheckCircle" class="w-4 h-4 text-success" />
+                <Lucide v-else icon="X" class="w-4 h-4 text-danger" />
+              </span>
+            </div>
+          </div>
+
+          <div class="col-span-12 lg:col-span-1 md:col-span-2 flex justify-end items-start gap-2">
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="viewSelected(index)">
+              <Lucide icon="Info" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="editSelected(index)">
+              <Lucide icon="Pen" class="w-4 h-4" />
+            </Button>
+            <Button size="sm" variant="outline-secondary" class="flex items-center gap-1" @click="deleteSelected(index)">
+              <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+            </Button>
+          </div>
+
+          <div
+            v-if="expandDetail === index"
+            class="col-span-12 border-t border-slate-200 dark:border-darkmode-400 mt-2 pt-3"
+          >
+            <div class="text-primary text-xs font-semibold uppercase tracking-wide mb-1">
+              {{ t('views.stock_transfer.field_groups.items') }}
+            </div>
+            <div
+              v-if="((item as StockTransfer).items?.length ?? 0) === 0"
+              class="text-slate-500 text-xs italic"
+            >
+              {{ t('components.data-list.data_not_found') }}
+            </div>
+            <div v-else class="space-y-2 text-xs">
+              <div
+                v-for="(productUnit, productIdx) in (item as StockTransfer).items"
+                :key="productUnit.ulid"
+                class="flex gap-2"
+              >
+                <div class="w-6 text-right text-slate-500">{{ productIdx + 1 }}.</div>
+                <div class="flex-1">
+                  <div class="font-medium break-all">
+                    [{{ productUnit.product_unit.code }}] {{ productUnit.product_unit.product.name }}
+                  </div>
+                  <div class="text-slate-500">
+                    {{ t('views.stock_transfer_item.fields.qty') }}:
+                    <span class="font-medium">
+                      {{ formatCurrency(productUnit.qty) }} {{ productUnit.product_unit.unit.name }}
+                    </span>
+                  </div>
+                  <div v-if="Number(productUnit.product_unit_conversion_value ?? 1) > 1" class="text-slate-500">
+                    {{ t('views.stock_transfer_item.fields.product_unit_conversion_value') }}:
+                    <span class="font-medium">{{ formatCurrency(productUnit.product_unit_conversion_value) }}</span>
+                  </div>
+                  <div v-if="productUnit.remarks?.trim()" class="text-slate-500">
+                    {{ t('views.stock_transfer_item.fields.remarks') }}:
+                    <span class="font-medium">{{ productUnit.remarks }}</span>
+                  </div>
+                  <div v-if="productUnit.product_unit?.product?.is_use_serial_number" class="text-slate-500 mt-0.5">
+                    {{ t('views.product.fields.serial_number') }}:
+                    <span v-if="productUnit.serials?.length" class="break-all">
+                      {{ productUnit.serials.map((serial) => serial.serial).join(', ') }}
+                    </span>
+                    <span v-else>{{ t('components.data-list.data_not_found') }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataListFlex>
+    </div>
+  </div>
+
+  <Dialog :open="deleteModalShow" @close="() => { deleteModalShow = false; }">
+    <Dialog.Panel>
+      <div class="p-5 text-center">
+        <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+        <div class="mt-5 text-3xl">
+          {{ t('components.delete-modal.title') }}
+        </div>
+        <div class="mt-2 text-slate-500">
+          {{ t('components.delete-modal.desc_1') }}
+          <br />
+          {{ t('components.delete-modal.desc_2') }}
+        </div>
+      </div>
+      <div class="px-5 pb-8 text-center">
+        <Button type="button" variant="outline-secondary" class="w-24 mr-1" @click="deleteModalShow = false">
+          {{ t('components.buttons.cancel') }}
+        </Button>
+        <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+          {{ t('components.buttons.delete') }}
+        </Button>
+      </div>
+    </Dialog.Panel>
+  </Dialog>
+</template>
diff --git a/web/src/pages/supplier/SupplierCreate.vue b/web/src/pages/supplier/SupplierCreate.vue
new file mode 100644
index 000000000..98cca2696
--- /dev/null
+++ b/web/src/pages/supplier/SupplierCreate.vue
@@ -0,0 +1,444 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, watch, computed } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import { debounce } from 'lodash';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { AxiosError, isAxiosError } from 'axios';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+
+  import {
+    FormInput,
+    FormLabel,
+    FormSelect,
+    FormErrorMessages,
+    FormInputCode,
+    FormCheck,
+    FormTextarea,
+    FormSwitch,
+  } from '@/components/Base/Form';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+
+  import SupplierService from '@/services/SupplierService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+
+  import { ViewMode } from '@/types/enums/ViewMode';
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const supplierServices = new SupplierService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const form = supplierServices.useSupplierCreateForm();
+  // #endregion
+
+  // #region Refs
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+  const paymentTermTypeDDL = ref<Array<DropDownOption> | null>(null);
+  const isDDLLoading = ref<boolean>(false);
+
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.supplier.field_groups.general',
+      state: CardState.Expanded,
+      id: 'general',
+    },
+    {
+      title: 'views.supplier.field_groups.finance',
+      state: CardState.Expanded,
+      id: 'finance',
+    },
+    {
+      title: '',
+      state: CardState.Hidden,
+      id: 'button',
+    },
+  ]);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alert-placeholder']);
+  // #endregion
+
+  // #region Methods
+  const setCode = () => {
+    form.forgetError('code');
+    if (form.code == '_AUTO_') {
+      form.setData({ code: '' });
+    } else {
+      form.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const getDDL = async (): Promise<void> => {
+    isDDLLoading.value = true;
+    try {
+      await Promise.all([
+        (async () => {
+          const result = await dashboardServices.getStatusDDL(false);
+          statusDDL.value = result;
+        })(),
+        (async () => {
+          const result = await dashboardServices.getPaymentTermTypesDDL();
+          paymentTermTypeDDL.value = result;
+        })(),
+      ]);
+    } catch (error) {
+      console.error('Error loading DDLs:', error);
+    } finally {
+      isDDLLoading.value = false;
+    }
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('SUPPLIER_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    form.setData(data);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (form.hasErrors) {
+      scrollToError(Object.keys(form.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await form
+      .submit()
+      .then(() => {
+        onReset();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-supplier' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const onReset = () => {
+    form.reset();
+    form.setErrors({});
+    cacheServices.removeLastEntity('SUPPLIER_CREATE');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alert-placeholder', ap);
+  };
+
+  const convertErrorTypeToAlertListType = (error: unknown) => {
+    const record: Record<string, Array<string>> = {};
+
+    const anyError = error as any;
+    const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+    if (response && response.data) {
+      const data = response.data as any;
+
+      if (data.errors && typeof data.errors === 'object') {
+        for (const key of Object.keys(data.errors)) {
+          const value = data.errors[key];
+          if (Array.isArray(value)) {
+            record[key] = value;
+          } else if (value !== undefined && value !== null) {
+            record[key] = [String(value)];
+          }
+        }
+        return record;
+      }
+      if (data.message) {
+        record.error = [String(data.message)];
+        return record;
+      }
+    }
+    if (error instanceof Error && error.message) {
+      record.error = [error.message];
+    } else {
+      record.error = ['Unknown error'];
+    }
+    return record;
+  };
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+
+    loadFromCache();
+
+    if (isUserLocationSelected.value) {
+      form.setData({ company_id: selectedUserLocation.value.company.id });
+    }
+
+    await getDDL();
+  });
+  // #endregion
+
+  // #region Watchers
+  watch(
+    form,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('SUPPLIER_CREATE', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <!-- STEP 2: Struktur Template Dasar -->
+  <form @submit.prevent="onSubmit">
+    <!-- Kita panggil Layout 2 Kolom -->
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <!-- Slot untuk Card General -->
+      <template #card-items-general>
+        <div class="p-5">
+          <!-- Code -->
+          <div class="mt-3">
+            <FormLabel htmlFor="code">
+              {{ t('views.supplier.fields.code') }}
+              <span class="text-danger">*</span>
+            </FormLabel>
+            <FormInputCode
+              id="code"
+              v-model="form.code"
+              :placeholder="t('views.supplier.fields.code')"
+              :class="{ 'border-danger': form.invalid('code') }"
+              @set-auto="setCode"
+              @change="form.validate('code')"
+            />
+            <FormErrorMessages :messages="form.errors.code" />
+          </div>
+
+          <!-- Name -->
+          <div class="mt-3">
+            <FormLabel htmlFor="name">
+              {{ t('views.supplier.fields.name') }}
+              <span class="text-danger">*</span>
+            </FormLabel>
+            <FormInput
+              id="name"
+              v-model="form.name"
+              type="text"
+              :placeholder="t('views.supplier.fields.name')"
+              :class="{ 'border-danger': form.invalid('name') }"
+              @change="form.validate('name')"
+            />
+            <FormErrorMessages :messages="form.errors.name" />
+          </div>
+
+          <!-- Address -->
+          <div class="mt-3">
+            <FormLabel htmlFor="address">
+              {{ t('views.supplier.fields.address') }}
+            </FormLabel>
+            <FormTextarea
+              id="address"
+              v-model="form.address"
+              :placeholder="t('views.supplier.fields.address')"
+              :class="{ 'border-danger': form.invalid('address') }"
+              @change="form.validate('address')"
+            />
+            <FormErrorMessages :messages="form.errors.address" />
+          </div>
+
+          <!-- City -->
+          <div class="mt-3">
+            <FormLabel htmlFor="city">
+              {{ t('views.supplier.fields.city') }}
+            </FormLabel>
+            <FormInput
+              id="city"
+              v-model="form.city"
+              type="text"
+              :placeholder="t('views.supplier.fields.city')"
+              :class="{ 'border-danger': form.invalid('city') }"
+              @change="form.validate('city')"
+            />
+            <FormErrorMessages :messages="form.errors.city" />
+          </div>
+
+          <!-- Status -->
+          <div class="mt-3">
+            <FormLabel htmlFor="status">
+              {{ t('views.supplier.fields.status') }}
+              <span class="text-danger">*</span>
+            </FormLabel>
+            <FormSelect
+              id="status"
+              v-model="form.status"
+              :class="{ 'border-danger': form.invalid('status') }"
+              @change="form.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="form.errors.status" />
+          </div>
+
+          <!-- Remarks -->
+          <div class="mt-3">
+            <FormLabel htmlFor="remarks">
+              {{ t('views.supplier.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              id="remarks"
+              v-model="form.remarks"
+              :placeholder="t('views.supplier.fields.remarks')"
+              :class="{ 'border-danger': form.invalid('remarks') }"
+              @change="form.validate('remarks')"
+            />
+            <FormErrorMessages :messages="form.errors.remarks" />
+          </div>
+        </div>
+      </template>
+
+      <!-- Slot untuk Card Finance -->
+      <template #card-items-finance>
+        <div class="p-5">
+          <!-- Payment Term Type -->
+          <div class="mt-3">
+            <FormLabel htmlFor="payment_term_type">
+              {{ t('views.supplier.fields.payment_term_type') }}
+            </FormLabel>
+            <FormSelect
+              id="payment_term_type"
+              v-model="form.payment_term_type"
+              :class="{ 'border-danger': form.invalid('payment_term_type') }"
+              @change="form.validate('payment_term_type')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in paymentTermTypeDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="form.errors.payment_term_type" />
+          </div>
+
+          <!-- Payment Term -->
+          <div class="mt-3">
+            <FormLabel htmlFor="payment_term">
+              {{ t('views.supplier.fields.payment_term') }}
+            </FormLabel>
+            <FormInput
+              id="payment_term"
+              v-model="form.payment_term"
+              type="number"
+              :placeholder="t('views.supplier.fields.payment_term')"
+              :class="{ 'border-danger': form.invalid('payment_term') }"
+              @change="form.validate('payment_term')"
+            />
+            <FormErrorMessages :messages="form.errors.payment_term" />
+          </div>
+
+          <!-- Taxable Enterprise -->
+          <div class="mt-3">
+            <FormLabel htmlFor="taxable_enterprise">
+              {{ t('views.supplier.fields.taxable_enterprise') }}
+            </FormLabel>
+            <FormSwitch class="mt-2">
+              <FormSwitch.Input
+                id="taxable_enterprise"
+                v-model="form.taxable_enterprise"
+                type="checkbox"
+                :class="{ 'border-danger': form.invalid('taxable_enterprise') }"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="form.errors.taxable_enterprise" />
+          </div>
+
+          <!-- Tax ID (NPWP) -->
+          <div class="mt-3">
+            <FormLabel htmlFor="tax_id">
+              {{ t('views.supplier.fields.tax_id') }}
+            </FormLabel>
+            <FormInput
+              id="tax_id"
+              v-model="form.tax_id"
+              type="text"
+              :placeholder="t('views.supplier.fields.tax_id')"
+              :class="{ 'border-danger': form.invalid('tax_id') }"
+              @change="form.validate('tax_id')"
+            />
+            <FormErrorMessages :messages="form.errors.tax_id" />
+          </div>
+        </div>
+      </template>
+
+      <!-- Slot untuk Tombol -->
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="form.validating || form.hasErrors"
+          >
+            <Lucide v-if="form.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="onReset">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/supplier/SupplierEdit.vue b/web/src/pages/supplier/SupplierEdit.vue
new file mode 100644
index 000000000..fe2619e52
--- /dev/null
+++ b/web/src/pages/supplier/SupplierEdit.vue
@@ -0,0 +1,430 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { useRoute, useRouter } from 'vue-router';
+  import SupplierService from '@/services/SupplierService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormSwitch,
+    FormInputCode,
+    FormErrorMessages,
+    FormCheck,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { Supplier } from '@/types/models/Supplier';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { storeToRefs } from 'pinia';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+
+  const supplierServices = new SupplierService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  const { isUserLocationSelected } = storeToRefs(selectedUserLocationStore);
+
+  const form = supplierServices.useSupplierEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alert-placeholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.supplier.field_groups.general',
+      state: CardState.Expanded,
+      id: 'general',
+    },
+    {
+      title: 'views.supplier.field_groups.finance',
+      state: CardState.Expanded,
+      id: 'finance',
+    },
+    {
+      title: '',
+      state: CardState.Hidden,
+      id: 'button',
+    },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+  const paymentTermTypeDDL = ref<Array<DropDownOption> | null>(null);
+  const isDDLLoading = ref<boolean>(false);
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    let result: ServiceResponse<Supplier | null> = await supplierServices.read(ulid);
+
+    if (result.success && result.data) {
+      form.setData({
+        company_id: result.data.company.id,
+        code: result.data.code,
+        name: result.data.name,
+        address: result.data.address,
+        city: result.data.city,
+        payment_term_type: result.data.payment_term_type,
+        payment_term: result.data.payment_term,
+        taxable_enterprise: result.data.taxable_enterprise,
+        tax_id: result.data.tax_id,
+        status: result.data.status,
+        remarks: result.data.remarks,
+      });
+    } else {
+      router.push({ name: 'side-menu-supplier' });
+    }
+    emits('loading-state', false);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    isDDLLoading.value = true;
+    try {
+      await Promise.all([
+        (async () => {
+          const result = await dashboardServices.getStatusDDL(false);
+          statusDDL.value = result;
+        })(),
+        (async () => {
+          const result = await dashboardServices.getPaymentTermTypesDDL();
+          paymentTermTypeDDL.value = result;
+        })(),
+      ]);
+    } catch (error) {
+      console.error('Error loading DDLs:', error);
+    } finally {
+      isDDLLoading.value = false;
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (form.hasErrors) {
+      scrollToError(Object.keys(form.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await form
+      .submit()
+      .then(() => {
+        showAlertPlaceholder('hidden', '', null);
+        emits('update-profile');
+        router.push({ name: 'side-menu-supplier' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    form.reset();
+    form.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    form.forgetError('code');
+    if (form.code == '_AUTO_') {
+      form.setData({ code: '' });
+    } else {
+      form.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alert-placeholder', ap);
+  };
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+      return;
+    }
+
+    emits('mode-state', ViewMode.FORM_EDIT);
+    await getDDL();
+
+    await loadData(route.params.ulid as string);
+  });
+  // #endregion
+
+  // #region Watchers
+  watch(
+    form,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('SUPPLIER_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="supplierForm" @submit.prevent="onSubmit">
+    <!-- Kita panggil Layout 2 Kolom -->
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <!-- Slot untuk Card General -->
+      <template #card-items-general>
+        <div class="p-5">
+          <!-- Code -->
+          <div class="mt-3">
+            <FormLabel htmlFor="code">
+              {{ t('views.supplier.fields.code') }}
+              <span class="text-danger">*</span>
+            </FormLabel>
+            <FormInputCode
+              id="code"
+              v-model="form.code"
+              :placeholder="t('views.supplier.fields.code')"
+              :class="{ 'border-danger': form.invalid('code') }"
+              @set-auto="setCode"
+              @change="form.validate('code')"
+            />
+            <FormErrorMessages :messages="form.errors.code" />
+          </div>
+
+          <!-- Name -->
+          <div class="mt-3">
+            <FormLabel htmlFor="name">
+              {{ t('views.supplier.fields.name') }}
+              <span class="text-danger">*</span>
+            </FormLabel>
+            <FormInput
+              id="name"
+              v-model="form.name"
+              type="text"
+              :placeholder="t('views.supplier.fields.name')"
+              :class="{ 'border-danger': form.invalid('name') }"
+              @change="form.validate('name')"
+            />
+            <FormErrorMessages :messages="form.errors.name" />
+          </div>
+
+          <!-- Address -->
+          <div class="mt-3">
+            <FormLabel htmlFor="address">
+              {{ t('views.supplier.fields.address') }}
+            </FormLabel>
+            <FormTextarea
+              id="address"
+              v-model="form.address"
+              :placeholder="t('views.supplier.fields.address')"
+              :class="{ 'border-danger': form.invalid('address') }"
+              @change="form.validate('address')"
+            />
+            <FormErrorMessages :messages="form.errors.address" />
+          </div>
+
+          <!-- City -->
+          <div class="mt-3">
+            <FormLabel htmlFor="city">
+              {{ t('views.supplier.fields.city') }}
+            </FormLabel>
+            <FormInput
+              id="city"
+              v-model="form.city"
+              type="text"
+              :placeholder="t('views.supplier.fields.city')"
+              :class="{ 'border-danger': form.invalid('city') }"
+              @change="form.validate('city')"
+            />
+            <FormErrorMessages :messages="form.errors.city" />
+          </div>
+
+          <!-- Status -->
+          <div class="mt-3">
+            <FormLabel htmlFor="status">
+              {{ t('views.supplier.fields.status') }}
+              <span class="text-danger">*</span>
+            </FormLabel>
+            <FormSelect
+              id="status"
+              v-model="form.status"
+              :class="{ 'border-danger': form.invalid('status') }"
+              @change="form.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="form.errors.status" />
+          </div>
+
+          <!-- Remarks -->
+          <div class="mt-3">
+            <FormLabel htmlFor="remarks">
+              {{ t('views.supplier.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              id="remarks"
+              v-model="form.remarks"
+              :placeholder="t('views.supplier.fields.remarks')"
+              :class="{ 'border-danger': form.invalid('remarks') }"
+              @change="form.validate('remarks')"
+            />
+            <FormErrorMessages :messages="form.errors.remarks" />
+          </div>
+        </div>
+      </template>
+
+      <!-- Slot untuk Card Finance -->
+      <template #card-items-finance>
+        <div class="p-5">
+          <!-- Payment Term Type -->
+          <div class="mt-3">
+            <FormLabel htmlFor="payment_term_type">
+              {{ t('views.supplier.fields.payment_term_type') }}
+            </FormLabel>
+            <FormSelect
+              id="payment_term_type"
+              v-model="form.payment_term_type"
+              :class="{ 'border-danger': form.invalid('payment_term_type') }"
+              @change="form.validate('payment_term_type')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in paymentTermTypeDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="form.errors.payment_term_type" />
+          </div>
+
+          <!-- Payment Term -->
+          <div class="mt-3">
+            <FormLabel htmlFor="payment_term">
+              {{ t('views.supplier.fields.payment_term') }}
+            </FormLabel>
+            <FormInput
+              id="payment_term"
+              v-model="form.payment_term"
+              type="number"
+              :placeholder="t('views.supplier.fields.payment_term')"
+              :class="{ 'border-danger': form.invalid('payment_term') }"
+              @change="form.validate('payment_term')"
+            />
+            <FormErrorMessages :messages="form.errors.payment_term" />
+          </div>
+
+          <!-- Taxable Enterprise -->
+          <div class="mt-3">
+            <FormLabel htmlFor="taxable_enterprise">
+              {{ t('views.supplier.fields.taxable_enterprise') }}
+            </FormLabel>
+            <FormSwitch class="mt-2">
+              <FormSwitch.Input
+                id="taxable_enterprise"
+                v-model="form.taxable_enterprise"
+                type="checkbox"
+                :class="{ 'border-danger': form.invalid('taxable_enterprise') }"
+              />
+            </FormSwitch>
+            <FormErrorMessages :messages="form.errors.taxable_enterprise" />
+          </div>
+
+          <!-- Tax ID (NPWP) -->
+          <div class="mt-3">
+            <FormLabel htmlFor="tax_id">
+              {{ t('views.supplier.fields.tax_id') }}
+            </FormLabel>
+            <FormInput
+              id="tax_id"
+              v-model="form.tax_id"
+              type="text"
+              :placeholder="t('views.supplier.fields.tax_id')"
+              :class="{ 'border-danger': form.invalid('tax_id') }"
+              @change="form.validate('tax_id')"
+            />
+            <FormErrorMessages :messages="form.errors.tax_id" />
+          </div>
+        </div>
+      </template>
+
+      <!-- Slot untuk Tombol -->
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="form.validating || form.hasErrors"
+          >
+            <Lucide v-if="form.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/supplier/SupplierIndex.vue b/web/src/pages/supplier/SupplierIndex.vue
new file mode 100644
index 000000000..bd2fcc6fc
--- /dev/null
+++ b/web/src/pages/supplier/SupplierIndex.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.supplier.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const supplierNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[supplierNotification]', (el: NotificationElement) => {
+    supplierNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-supplier-supplier-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-supplier-supplier-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.supplier.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.supplier.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.supplier.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (supplierNotification.value) supplierNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('SUPPLIER_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('SUPPLIER_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alert-placeholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="supplierNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/supplier/SupplierList.vue b/web/src/pages/supplier/SupplierList.vue
new file mode 100644
index 000000000..ce195ae70
--- /dev/null
+++ b/web/src/pages/supplier/SupplierList.vue
@@ -0,0 +1,334 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import { storeToRefs } from 'pinia';
+  import DataList from '@/components/DataList';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import SupplierService from '@/services/SupplierService';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { Supplier } from '@/types/models/Supplier';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Dialog } from '@/components/Base/Headless';
+  import { SupplierReadAnyPaginateRequest } from '@/types/services/supplier/SupplierRequest';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const supplierServices = new SupplierService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alert-placeholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const supplierLists = ref<Collection<Array<Supplier>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Methods
+  const getSuppliers = async (
+    search: string,
+
+    refresh: boolean,
+    page: number,
+    per_page: number,
+  ) => {
+    emits('loading-state', true);
+
+    const requestParams: SupplierReadAnyPaginateRequest = {
+      with_trashed: false,
+      company_id: selectedUserLocation.value.company.id,
+      search: search,
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<Supplier>> | null> =
+      await supplierServices.readAnyPaginate(requestParams);
+
+    if (result.success && result.data) {
+      supplierLists.value = result.data;
+      emits('show-alert-placeholder', {
+        alertType: 'hidden',
+        title: '',
+        alertList: null,
+      });
+    } else {
+      emits('show-alert-placeholder', {
+        alertType: 'danger',
+        title: '',
+        alertList: result.errors,
+      });
+    }
+
+    emits('loading-state', false);
+  };
+
+  const handleDataListChange = async (data: DataListEmittedData) => {
+    await getSuppliers(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (idx: number) => {
+    if (!supplierLists.value) return;
+    const ulid = supplierLists.value.data[idx].ulid;
+    router.push({
+      name: 'side-menu-supplier-supplier-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (idx: number) => {
+    if (!supplierLists.value) return;
+    deleteUlid.value = supplierLists.value.data[idx].ulid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    const result: ServiceResponse<boolean | null> = await supplierServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getSuppliers('', true, 1, 10);
+      emits('show-notification', {
+        title: t('views.supplier.alert.delete.title'),
+        content: t('views.supplier.alert.delete.message'),
+      });
+    } else {
+      emits('show-alert-placeholder', {
+        alertType: 'danger',
+        title: '',
+        alertList: result.errors,
+      });
+    }
+
+    emits('loading-state', false);
+  };
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+      return;
+    }
+
+    await getSuppliers('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.supplier.table.title')"
+    :data="supplierLists"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="supplierLists ? supplierLists.meta : null"
+    @dataListChanged="handleDataListChange"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.supplier.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.supplier.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.supplier.table.cols.status') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="supplierLists !== null">
+          <template v-if="supplierLists.data.length === 0">
+            <Table.Tr>
+              <Table.Td colspan="4" class="text-center italic">
+                {{ t('components.data-list.data_not_found') }}
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in supplierLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.status === 'ACTIVE'" icon="CheckCircle" />
+                <Lucide v-if="item.status === 'INACTIVE'" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="4">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.supplier.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.supplier.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.supplier.fields.address') }}
+                  </div>
+                  <div class="flex-1">{{ item.address }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.supplier.fields.tax_id') }}
+                  </div>
+                  <div class="flex-1">{{ item.tax_id }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.supplier.fields.status') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.status === 'ACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.active') }}
+                    </span>
+                    <span v-if="item.status === 'INACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.inactive') }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.supplier.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/unit/UnitCreate.vue b/web/src/pages/unit/UnitCreate.vue
new file mode 100644
index 000000000..427fed816
--- /dev/null
+++ b/web/src/pages/unit/UnitCreate.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import UnitService from '@/services/UnitService';
+  import CacheService from '@/services/CacheService';
+  import DashboardService from '@/services/DashboardService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormInputCode,
+    FormErrorMessages,
+    FormTextarea,
+    FormSelect,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const unitService = new UnitService();
+  const cacheServices = new CacheService();
+  const dashboardService = new DashboardService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.unit.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.unit.field_groups.unit_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const unitForm = unitService.useUnitCreateForm();
+  const unitTypesDDL = ref<Array<DropDownOption> | null>([]);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+    await getUnitTypesDDL();
+    loadFromCache();
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const getUnitTypesDDL = async () => {
+    await Promise.all([
+      unitService.getTypes().then((result: Array<DropDownOption> | null) => {
+        unitTypesDDL.value = result;
+      }),
+    ]);
+  };
+
+  const setCompanyIdData = () => {
+    unitForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+    });
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (unitForm.hasErrors) {
+      scrollToError(Object.keys(unitForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await unitForm
+      .submit()
+      .then((response: any) => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-product-unit-list' });
+      })
+      .catch((error: any) => {
+        console.error(error);
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    unitForm.reset();
+    unitForm.setErrors({});
+  };
+
+  const setCode = () => {
+    unitForm.forgetError('code');
+    if (unitForm.code == '_AUTO_') {
+      unitForm.setData({ code: '' });
+    } else {
+      unitForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  const loadFromCache = () => {
+    const data = cacheServices.getLastEntity('UNIT_CREATE') as Record<string, unknown>;
+    if (data) {
+      unitForm.setData(data);
+    }
+  };
+  // #endregion
+
+  // #region Watchers
+  watch(
+    unitForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('UNIT_CREATE', newValue.data());
+      if (unitForm.hasErrors) {
+      }
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="unitForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="unitForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': unitForm.invalid('code') }">
+              {{ t('views.unit.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="unitForm.code"
+              :class="{ 'border-danger': unitForm.invalid('code') }"
+              :placeholder="t('views.unit.fields.code')"
+              @set-auto="setCode"
+              @change="unitForm.validate('code')"
+            />
+            <FormErrorMessages :messages="unitForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': unitForm.invalid('name') }">
+              {{ t('views.unit.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="unitForm.name"
+              type="text"
+              :class="{ 'border-danger': unitForm.invalid('name') }"
+              :placeholder="t('views.unit.fields.name')"
+              @change="unitForm.validate('name')"
+            />
+            <FormErrorMessages :messages="unitForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': unitForm.invalid('description') }">
+              {{ t('views.unit.fields.description') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="unitForm.description"
+              :class="{ 'border-danger': unitForm.invalid('description') }"
+              :placeholder="t('views.unit.fields.description')"
+              @change="unitForm.validate('description')"
+            />
+            <FormErrorMessages :messages="unitForm.errors.description" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': unitForm.invalid('type') }">
+              {{ t('views.unit.fields.type') }}
+            </FormLabel>
+            <FormSelect
+              v-model="unitForm.type"
+              :class="{ 'border-danger': unitForm.invalid('type') }"
+              @change="unitForm.validate('type')"
+            >
+              <option value="" disabled selected>
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="item in unitTypesDDL" :key="item.code" :value="item.code">
+                {{ t(item.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="unitForm.errors.type" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="unitForm.validating">
+            <Lucide v-if="unitForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/unit/UnitEdit.vue b/web/src/pages/unit/UnitEdit.vue
new file mode 100644
index 000000000..b2c50f8bd
--- /dev/null
+++ b/web/src/pages/unit/UnitEdit.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { useRoute, useRouter } from 'vue-router';
+  import UnitService from '@/services/UnitService';
+  import CacheService from '@/services/CacheService';
+  import DashboardService from '@/services/DashboardService';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormInputCode,
+    FormErrorMessages,
+    FormTextarea,
+    FormSelect,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import { Unit } from '@/types/models/Unit';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import Lucide from '@/components/Base/Lucide';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+
+  const unitService = new UnitService();
+  const cacheServices = new CacheService();
+  const dashboardService = new DashboardService();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.unit.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.unit.field_groups.unit_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const unitForm = unitService.useUnitEditForm(route.params.ulid as string);
+  const unitTypesDDL = ref<Array<DropDownOption> | null>([]);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+    await getUnitTypesDDL();
+    await loadData(route.params.ulid as string);
+  });
+  // #endregion
+
+  // #region Methods
+  const getUnitTypesDDL = async () => {
+    unitTypesDDL.value = await unitService.getTypes();
+  };
+
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    const result: ServiceResponse<Unit | null> = await unitService.read(ulid);
+
+    if (result.success && result.data) {
+      unitForm.setData({
+        company_id: result.data.company.id,
+        code: result.data.code,
+        name: result.data.name,
+        description: result.data.description,
+        type: result.data.type,
+      });
+    } else {
+      router.push({ name: 'side-menu-product-unit-list' });
+    }
+    emits('loading-state', false);
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (unitForm.hasErrors) {
+      scrollToError(Object.keys(unitForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await unitForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-product-unit-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    unitForm.reset();
+    unitForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    unitForm.forgetError('code');
+    if (unitForm.code == '_AUTO_') {
+      unitForm.setData({ code: '' });
+    } else {
+      unitForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #region Watchers
+  watch(
+    unitForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('UNIT_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="unitForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="unitForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': unitForm.invalid('code') }">
+              {{ t('views.unit.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              id="code"
+              v-model="unitForm.code"
+              :class="{ 'border-danger': unitForm.invalid('code') }"
+              @change="unitForm.validate('code')"
+              @set-auto="setCode"
+            />
+            <FormErrorMessages :messages="unitForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': unitForm.invalid('name') }">
+              {{ t('views.unit.fields.name') }}
+            </FormLabel>
+            <FormInput
+              id="name"
+              type="text"
+              v-model="unitForm.name"
+              :class="{ 'border-danger': unitForm.invalid('name') }"
+              :placeholder="t('views.unit.fields.name')"
+              @change="unitForm.validate('name')"
+            />
+            <FormErrorMessages :messages="unitForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.unit.fields.description') }}
+            </FormLabel>
+            <FormTextarea
+              id="description"
+              v-model="unitForm.description"
+              :class="{
+                'border-danger': unitForm.invalid('description'),
+              }"
+              :placeholder="t('views.unit.fields.description')"
+              @change="unitForm.validate('description')"
+            />
+            <FormErrorMessages :messages="unitForm.errors.description" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': unitForm.invalid('type') }">
+              {{ t('views.unit.fields.type') }}
+            </FormLabel>
+            <FormSelect
+              v-model="unitForm.type"
+              :class="{ 'border-danger': unitForm.invalid('type') }"
+              @change="unitForm.validate('type')"
+            >
+              <option value="" disabled selected>
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="item in unitTypesDDL" :key="item.code" :value="item.code">
+                {{ t(item.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="unitForm.errors.type" />
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="unitForm.validating || unitForm.hasErrors"
+          >
+            <Lucide v-if="unitForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/unit/UnitIndex.vue b/web/src/pages/unit/UnitIndex.vue
new file mode 100644
index 000000000..732c58f9e
--- /dev/null
+++ b/web/src/pages/unit/UnitIndex.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.unit.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const unitNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[unitNotification]', (el: NotificationElement) => {
+    unitNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-product-unit-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-product-unit-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.unit.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.unit.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.unit.page_title';
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (unitNotification.value) unitNotification.value.showToast();
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('UNIT_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('UNIT_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="unitNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/unit/UnitList.vue b/web/src/pages/unit/UnitList.vue
new file mode 100644
index 000000000..777e49f3b
--- /dev/null
+++ b/web/src/pages/unit/UnitList.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import UnitService from '@/services/UnitService';
+  import DashboardService from '@/services/DashboardService';
+  import { Unit } from '@/types/models/Unit';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { UnitReadAnyPaginateRequest } from '@/types/services/unit/UnitRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const unitServices = new UnitService();
+  const dashboardService = new DashboardService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const unitLists = ref<Collection<Array<Unit>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  const unitTypesDDL = ref<Array<DropDownOption> | null>([]);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getUnitTypesDDL();
+    await getUnits('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getUnitTypesDDL = async () => {
+    unitTypesDDL.value = await unitServices.getTypes();
+  };
+
+  const getUnitTypeLabel = (code: number | string) => {
+    if (!unitTypesDDL.value) return code;
+    const option = unitTypesDDL.value.find((x) => x.code == code);
+    return option ? t(option.name) : code;
+  };
+
+  const getUnits = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    let company_id = selectedUserLocation.value.company.id;
+
+    const searchReq: UnitReadAnyPaginateRequest = {
+      with_trashed: false,
+
+      company_id: company_id,
+      search: search,
+      include_id: undefined,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<Unit>> | null> = await unitServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      unitLists.value = result.data;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getUnits(data.search.text, false, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!unitLists.value) return;
+
+    let ulid = unitLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-product-unit-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!unitLists.value) return;
+
+    let itemUlid = unitLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<any> = await unitServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getUnits('', true, 1, 10);
+      showNotification(t('views.unit.alert.delete_unit.title'), t('views.unit.alert.delete_unit.content'));
+    } else {
+      showAlertPlaceholder(
+        'danger',
+        t('components.alert_placeholder.title.danger'),
+        result.errors as Record<string, Array<string>>,
+      );
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.unit.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="unitLists ? unitLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.unit.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.unit.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.unit.table.cols.type') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="unitLists !== null">
+          <template v-if="unitLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="4">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in unitLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>
+                {{ item.code }}
+              </Table.Td>
+              <Table.Td>
+                {{ item.name }}
+              </Table.Td>
+              <Table.Td>
+                {{ getUnitTypeLabel(item.type) }}
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="4">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.unit.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.unit.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.unit.fields.type') }}
+                  </div>
+                  <div class="flex-1">{{ getUnitTypeLabel(item.type) }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.unit.fields.description') }}
+                  </div>
+                  <div class="flex-1">{{ item.description }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/vat-profile/VatProfileCreate.vue b/web/src/pages/vat-profile/VatProfileCreate.vue
new file mode 100644
index 000000000..21af2568b
--- /dev/null
+++ b/web/src/pages/vat-profile/VatProfileCreate.vue
@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import VatProfileService from '@/services/VatProfileService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import {
+  FormInput,
+  FormLabel,
+  FormInputCode,
+  FormInputCurrency,
+  FormErrorMessages,
+  FormTextarea,
+  FormSwitch,
+} from '@/components/Base/Form';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import Button from '@/components/Base/Button';
+import { ViewMode } from '@/types/enums/ViewMode';
+import Lucide from '@/components/Base/Lucide';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const vatProfileService = new VatProfileService();
+const cacheServices = new CacheService();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.vat_profile.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.vat_profile.field_groups.vat_profile_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const vatProfileForm = vatProfileService.useVatProfileCreateForm();
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_CREATE);
+  loadFromCache();
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  setCompanyIdData();
+});
+
+const setCompanyIdData = () => {
+  vatProfileForm.setData({
+    company_id: selectedUserLocation.value.company.id,
+  });
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (vatProfileForm.hasErrors) {
+    scrollToError(Object.keys(vatProfileForm.errors)[0]);
+  }
+
+  emits('loading-state', true);
+  await vatProfileForm
+    .submit()
+    .then(() => {
+      resetForm();
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-product-vat-profile-list' });
+    })
+    .catch((error: any) => {
+      const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error as Error);
+      showAlertPlaceholder('danger', '', errorList);
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = () => {
+  vatProfileForm.reset();
+  vatProfileForm.setErrors({});
+  setCompanyIdData();
+};
+
+const setCode = () => {
+  vatProfileForm.forgetError('code');
+  if (vatProfileForm.code == '_AUTO_') {
+    vatProfileForm.setData({ code: '' });
+  } else {
+    vatProfileForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+const loadFromCache = () => {
+  const data = cacheServices.getLastEntity('VAT_PROFILE_CREATE') as Record<string, unknown>;
+  if (data) {
+    vatProfileForm.setData(data);
+  }
+};
+
+watch(
+  vatProfileForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('VAT_PROFILE_CREATE', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="vatProfileForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="vatProfileForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('code') }">
+                {{ t('views.vat_profile.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="vatProfileForm.code"
+                :class="{ 'border-danger': vatProfileForm.invalid('code') }"
+                :placeholder="t('views.vat_profile.fields.code')"
+                @set-auto="setCode"
+                @change="vatProfileForm.validate('code')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.code" />
+            </div>
+            <div class="col-span-12 md:col-span-8 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('name') }">
+                {{ t('views.vat_profile.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="vatProfileForm.name"
+                type="text"
+                :class="{ 'border-danger': vatProfileForm.invalid('name') }"
+                :placeholder="t('views.vat_profile.fields.name')"
+                @change="vatProfileForm.validate('name')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.name" />
+            </div>
+            <div class="col-span-12 md:col-span-2 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('vat_rate') }">
+                {{ t('views.vat_profile.fields.vat_rate') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="vat_rate"
+                v-model="vatProfileForm.vat_rate"
+                :class="{ 'border-danger': vatProfileForm.invalid('vat_rate') }"
+                :placeholder="t('views.vat_profile.fields.vat_rate')"
+                @change="vatProfileForm.validate('vat_rate')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.vat_rate" />
+            </div>
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('vat_base_numerator') }">
+                {{ t('views.vat_profile.fields.vat_base_numerator') }}
+              </FormLabel>
+              <FormInput
+                id="vat_base_numerator"
+                v-model="vatProfileForm.vat_base_numerator"
+                type="number"
+                min="0"
+                step="1"
+                :class="{ 'border-danger': vatProfileForm.invalid('vat_base_numerator') }"
+                :placeholder="t('views.vat_profile.fields.vat_base_numerator')"
+                @change="vatProfileForm.validate('vat_base_numerator')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.vat_base_numerator" />
+            </div>
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('vat_base_denominator') }">
+                {{ t('views.vat_profile.fields.vat_base_denominator') }}
+              </FormLabel>
+              <FormInput
+                id="vat_base_denominator"
+                v-model="vatProfileForm.vat_base_denominator"
+                type="number"
+                min="1"
+                step="1"
+                :class="{ 'border-danger': vatProfileForm.invalid('vat_base_denominator') }"
+                :placeholder="t('views.vat_profile.fields.vat_base_denominator')"
+                @change="vatProfileForm.validate('vat_base_denominator')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.vat_base_denominator" />
+            </div>
+            <div class="col-span-12 md:col-span-2 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('is_active') }">
+                {{ t('views.vat_profile.fields.is_active') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  id="is_active"
+                  v-model="vatProfileForm.is_active"
+                  type="checkbox"
+                  :class="{ 'border-danger': vatProfileForm.invalid('is_active') }"
+                  @change="vatProfileForm.validate('is_active')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="vatProfileForm.errors.is_active" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel>
+                {{ t('views.vat_profile.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="vatProfileForm.remarks"
+                :placeholder="t('views.vat_profile.fields.remarks')"
+                rows="3"
+                @change="vatProfileForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button type="submit" href="#" variant="primary" class="w-28 shadow-md" :disabled="vatProfileForm.validating">
+            <Lucide v-if="vatProfileForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/vat-profile/VatProfileEdit.vue b/web/src/pages/vat-profile/VatProfileEdit.vue
new file mode 100644
index 000000000..e7fe3ce0e
--- /dev/null
+++ b/web/src/pages/vat-profile/VatProfileEdit.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from 'lodash';
+import { convertErrorTypeToAlertListType } from '@/utils/helper';
+import VatProfileService from '@/services/VatProfileService';
+import CacheService from '@/services/CacheService';
+import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+import {
+  FormInput,
+  FormLabel,
+  FormInputCode,
+  FormInputCurrency,
+  FormErrorMessages,
+  FormTextarea,
+  FormSwitch,
+} from '@/components/Base/Form';
+import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+import { CardState } from '@/types/enums/CardState';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { ViewMode } from '@/types/enums/ViewMode';
+import Button from '@/components/Base/Button';
+import { VatProfile } from '@/types/models/VatProfile';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import Lucide from '@/components/Base/Lucide';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const vatProfileService = new VatProfileService();
+const cacheServices = new CacheService();
+
+const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+
+const cards = ref<Array<TwoColumnsLayoutCards>>([
+  {
+    title: 'views.vat_profile.field_groups.company_info',
+    state: CardState.Expanded,
+  },
+  {
+    title: 'views.vat_profile.field_groups.vat_profile_data',
+    state: CardState.Expanded,
+  },
+  { title: '', state: CardState.Hidden, id: 'button' },
+]);
+
+const vatProfileForm = vatProfileService.useVatProfileEditForm(route.params.ulid as string);
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.FORM_EDIT);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await loadData(route.params.ulid as string);
+});
+
+const loadData = async (ulid: string) => {
+  emits('loading-state', true);
+  const result: ServiceResponse<VatProfile | null> = await vatProfileService.read(ulid);
+
+  if (result.success && result.data) {
+    vatProfileForm.setData({
+      company_id: result.data.company.id,
+      code: result.data.code,
+      name: result.data.name,
+      vat_rate: result.data.vat_rate,
+      vat_base_numerator: result.data.vat_base_numerator,
+      vat_base_denominator: result.data.vat_base_denominator,
+      remarks: result.data.remarks,
+      is_active: result.data.is_active,
+    });
+  } else {
+    router.push({ name: 'side-menu-product-vat-profile-list' });
+  }
+
+  emits('loading-state', false);
+};
+
+const handleExpandCard = (index: number) => {
+  if (cards.value[index].state === CardState.Collapsed) {
+    cards.value[index].state = CardState.Expanded;
+  } else if (cards.value[index].state === CardState.Expanded) {
+    cards.value[index].state = CardState.Collapsed;
+  }
+};
+
+const scrollToError = (id: string): void => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+const onSubmit = async () => {
+  if (vatProfileForm.hasErrors) {
+    scrollToError(Object.keys(vatProfileForm.errors)[0]);
+  }
+
+  emits('loading-state', true);
+  await vatProfileForm
+    .submit()
+    .then(() => {
+      emits('update-profile');
+      showAlertPlaceholder('hidden', '', null);
+      router.push({ name: 'side-menu-product-vat-profile-list' });
+    })
+    .catch((error) => {
+      const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+      showAlertPlaceholder('danger', '', errorList);
+    })
+    .finally(() => {
+      emits('loading-state', false);
+    });
+};
+
+const resetForm = async () => {
+  vatProfileForm.reset();
+  vatProfileForm.setErrors({});
+  await loadData(route.params.ulid as string);
+};
+
+const setCode = () => {
+  vatProfileForm.forgetError('code');
+  if (vatProfileForm.code == '_AUTO_') {
+    vatProfileForm.setData({ code: '' });
+  } else {
+    vatProfileForm.setData({ code: '_AUTO_' });
+  }
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+  emits('show-alertplaceholder', ap);
+};
+
+watch(
+  vatProfileForm,
+  debounce((newValue): void => {
+    cacheServices.setLastEntity('VAT_PROFILE_EDIT', newValue.data());
+  }, 500),
+  { deep: true },
+);
+</script>
+
+<template>
+  <form id="vatProfileForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="vatProfileForm.company_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="grid grid-cols-12 gap-4 gap-y-3">
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('code') }">
+                {{ t('views.vat_profile.fields.code') }}
+              </FormLabel>
+              <FormInputCode
+                id="code"
+                v-model="vatProfileForm.code"
+                :class="{ 'border-danger': vatProfileForm.invalid('code') }"
+                @change="vatProfileForm.validate('code')"
+                @set-auto="setCode"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.code" />
+            </div>
+            <div class="col-span-12 md:col-span-8 lg:col-span-4">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('name') }">
+                {{ t('views.vat_profile.fields.name') }}
+              </FormLabel>
+              <FormInput
+                id="name"
+                v-model="vatProfileForm.name"
+                type="text"
+                :class="{ 'border-danger': vatProfileForm.invalid('name') }"
+                :placeholder="t('views.vat_profile.fields.name')"
+                @change="vatProfileForm.validate('name')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.name" />
+            </div>
+            <div class="col-span-12 md:col-span-2 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('vat_rate') }">
+                {{ t('views.vat_profile.fields.vat_rate') }}
+              </FormLabel>
+              <FormInputCurrency
+                id="vat_rate"
+                v-model="vatProfileForm.vat_rate"
+                :class="{ 'border-danger': vatProfileForm.invalid('vat_rate') }"
+                :placeholder="t('views.vat_profile.fields.vat_rate')"
+                @change="vatProfileForm.validate('vat_rate')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.vat_rate" />
+            </div>
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('vat_base_numerator') }">
+                {{ t('views.vat_profile.fields.vat_base_numerator') }}
+              </FormLabel>
+              <FormInput
+                id="vat_base_numerator"
+                v-model="vatProfileForm.vat_base_numerator"
+                type="number"
+                min="0"
+                step="1"
+                :class="{ 'border-danger': vatProfileForm.invalid('vat_base_numerator') }"
+                :placeholder="t('views.vat_profile.fields.vat_base_numerator')"
+                @change="vatProfileForm.validate('vat_base_numerator')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.vat_base_numerator" />
+            </div>
+            <div class="col-span-12 md:col-span-4 lg:col-span-2">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('vat_base_denominator') }">
+                {{ t('views.vat_profile.fields.vat_base_denominator') }}
+              </FormLabel>
+              <FormInput
+                id="vat_base_denominator"
+                v-model="vatProfileForm.vat_base_denominator"
+                type="number"
+                min="1"
+                step="1"
+                :class="{ 'border-danger': vatProfileForm.invalid('vat_base_denominator') }"
+                :placeholder="t('views.vat_profile.fields.vat_base_denominator')"
+                @change="vatProfileForm.validate('vat_base_denominator')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.vat_base_denominator" />
+            </div>
+            <div class="col-span-12 md:col-span-2 lg:col-span-1">
+              <FormLabel :class="{ 'text-danger': vatProfileForm.invalid('is_active') }">
+                {{ t('views.vat_profile.fields.is_active') }}
+              </FormLabel>
+              <FormSwitch>
+                <FormSwitch.Input
+                  id="is_active"
+                  v-model="vatProfileForm.is_active"
+                  type="checkbox"
+                  :class="{ 'border-danger': vatProfileForm.invalid('is_active') }"
+                  @change="vatProfileForm.validate('is_active')"
+                />
+              </FormSwitch>
+              <FormErrorMessages :messages="vatProfileForm.errors.is_active" />
+            </div>
+            <div class="col-span-12">
+              <FormLabel>
+                {{ t('views.vat_profile.fields.remarks') }}
+              </FormLabel>
+              <FormTextarea
+                id="remarks"
+                v-model="vatProfileForm.remarks"
+                :placeholder="t('views.vat_profile.fields.remarks')"
+                rows="3"
+                @change="vatProfileForm.validate('remarks')"
+              />
+              <FormErrorMessages :messages="vatProfileForm.errors.remarks" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="vatProfileForm.validating || vatProfileForm.hasErrors"
+          >
+            <Lucide v-if="vatProfileForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/vat-profile/VatProfileIndex.vue b/web/src/pages/vat-profile/VatProfileIndex.vue
new file mode 100644
index 000000000..bbffe7dd2
--- /dev/null
+++ b/web/src/pages/vat-profile/VatProfileIndex.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import LoadingOverlay from '@/components/LoadingOverlay';
+import { TitleLayout } from '@/components/Base/Form/FormLayout';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import { ViewMode } from '@/types/enums/ViewMode';
+import CacheService from '@/services/CacheService';
+import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { useUserContextStore } from '@/stores/user-context';
+import ProfileService from '@/services/ProfileService';
+import { UserProfile } from '@/types/models/UserProfile';
+import Notification from '@/components/Base/Notification/Notification.vue';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const userContextStore = useUserContextStore();
+
+const cacheService = new CacheService();
+const profileService = new ProfileService();
+
+const mode = ref<ViewMode>(ViewMode.INDEX);
+const loading = ref<boolean>(false);
+const titleView = ref<string>('views.vat_profile.page_title');
+
+const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+const title = ref<string>('');
+const alertList = ref<Record<string, Array<string>> | null>(null);
+
+const vatProfileNotification = ref<NotificationElement>();
+
+const notificationTitle = ref<string>('');
+const notificationContent = ref<string>('');
+
+provide('bind[vatProfileNotification]', (el: NotificationElement) => {
+  vatProfileNotification.value = el;
+});
+
+const createNew = () => {
+  resetAlertPlaceholder();
+  mode.value = ViewMode.FORM_CREATE;
+  router.push({ name: 'side-menu-product-vat-profile-create' });
+};
+
+const backToList = async () => {
+  resetAlertPlaceholder();
+  clearCache(mode.value);
+  mode.value = ViewMode.LIST;
+  router.push({ name: 'side-menu-product-vat-profile-list' });
+};
+
+const onLoadingStateChanged = (state: boolean) => {
+  loading.value = state;
+};
+
+const onModeStateChanged = (state: ViewMode) => {
+  mode.value = state;
+
+  switch (state) {
+    case ViewMode.FORM_CREATE:
+      titleView.value = 'views.vat_profile.actions.create';
+      break;
+    case ViewMode.FORM_EDIT:
+      titleView.value = 'views.vat_profile.actions.edit';
+      break;
+    case ViewMode.INDEX:
+    case ViewMode.LIST:
+    default:
+      titleView.value = 'views.vat_profile.page_title';
+      break;
+  }
+};
+
+const onUpdateProfileTriggered = async () => {
+  const userprofile = await profileService.readProfile();
+  if (userprofile.success) {
+    userContextStore.setUserContext(userprofile.data as UserProfile);
+  }
+};
+
+const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+  alertType.value = apProps.alertType;
+  title.value = apProps.title;
+  alertList.value = apProps.alertList;
+};
+
+const onShowNotificationTriggered = (notification: NotificationData) => {
+  notificationTitle.value = notification.title;
+  notificationContent.value = notification.content;
+
+  if (vatProfileNotification.value) vatProfileNotification.value.showToast();
+};
+
+const clearCache = (mode: ViewMode) => {
+  switch (mode) {
+    case ViewMode.FORM_CREATE:
+      cacheService.removeLastEntity('VAT_PROFILE_CREATE');
+      break;
+    case ViewMode.FORM_EDIT:
+      cacheService.removeLastEntity('VAT_PROFILE_EDIT');
+      break;
+    default:
+      break;
+  }
+};
+
+const resetAlertPlaceholder = () => {
+  title.value = '';
+  alertList.value = null;
+  alertType.value = 'hidden';
+};
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="vatProfileNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/vat-profile/VatProfileList.vue b/web/src/pages/vat-profile/VatProfileList.vue
new file mode 100644
index 000000000..e64b1b524
--- /dev/null
+++ b/web/src/pages/vat-profile/VatProfileList.vue
@@ -0,0 +1,346 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import DataList from '@/components/DataList';
+import Button from '@/components/Base/Button';
+import Lucide from '@/components/Base/Lucide';
+import Table from '@/components/Base/Table';
+import { Dialog } from '@/components/Base/Headless';
+import VatProfileService from '@/services/VatProfileService';
+import { VatProfile } from '@/types/models/VatProfile';
+import { Collection } from '@/types/resources/Collection';
+import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+import { ServiceResponse } from '@/types/services/ServiceResponse';
+import { VatProfileReadAnyPaginateRequest } from '@/types/services/vat_profile/VatProfileRequest';
+import { ViewMode } from '@/types/enums/ViewMode';
+import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+import { ErrorCode } from '@/types/enums/ErrorCode';
+import { NotificationData } from '@/types/models/NotificationData';
+import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+import { formatCurrency } from '@/utils/helper';
+
+const { t } = useI18n();
+const router = useRouter();
+const vatProfileService = new VatProfileService();
+const selectedUserLocationStore = useSelectedUserLocationStore();
+
+const emits = defineEmits([
+  'mode-state',
+  'loading-state',
+  'update-profile',
+  'show-alertplaceholder',
+  'show-notification',
+]);
+
+const deleteUlid = ref<string>('');
+const deleteModalShow = ref<boolean>(false);
+const expandDetail = ref<number | null>(null);
+const vatProfileLists = ref<Collection<Array<VatProfile>> | null>({
+  data: [],
+  meta: {
+    current_page: 0,
+    from: null,
+    last_page: 0,
+    path: '',
+    per_page: 0,
+    to: null,
+    total: 0,
+  },
+  links: {
+    first: '',
+    last: '',
+    prev: null,
+    next: null,
+  },
+});
+
+const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+
+const formatVatBaseFraction = (item: VatProfile) => {
+  return `${item.vat_base_numerator} / ${item.vat_base_denominator}`;
+};
+
+onMounted(async () => {
+  emits('mode-state', ViewMode.LIST);
+
+  if (!isUserLocationSelected.value) {
+    router.push({
+      name: 'side-menu-error-code',
+      params: { code: ErrorCode.USERLOCATION_REQUIRED },
+    });
+    return;
+  }
+
+  await getVatProfiles('', true, 1, 10);
+});
+
+const getVatProfiles = async (search: string, refresh: boolean, page: number, per_page: number) => {
+  emits('loading-state', true);
+
+  const searchReq: VatProfileReadAnyPaginateRequest = {
+    with_trashed: false,
+    company_id: selectedUserLocation.value.company.id,
+    search: search,
+    include_id: undefined,
+    refresh: refresh,
+    page: page,
+    per_page: per_page,
+  };
+
+  const result: ServiceResponse<Collection<Array<VatProfile>> | null> = await vatProfileService.readAnyPaginate(
+    searchReq,
+  );
+
+  if (result.success && result.data) {
+    vatProfileLists.value = result.data;
+  } else {
+    showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+  }
+
+  emits('loading-state', false);
+};
+
+const onDataListChanged = async (data: DataListEmittedData) => {
+  await getVatProfiles(data.search.text, false, data.pagination.page, data.pagination.per_page);
+};
+
+const viewSelected = (idx: number) => {
+  if (expandDetail.value === idx) {
+    expandDetail.value = null;
+  } else {
+    expandDetail.value = idx;
+  }
+};
+
+const editSelected = (itemIdx: number) => {
+  if (!vatProfileLists.value) return;
+
+  const ulid = vatProfileLists.value.data[itemIdx].ulid;
+  router.push({
+    name: 'side-menu-product-vat-profile-edit',
+    params: { ulid: ulid },
+  });
+};
+
+const deleteSelected = (itemIdx: number) => {
+  if (!vatProfileLists.value) return;
+
+  deleteUlid.value = vatProfileLists.value.data[itemIdx].ulid;
+  deleteModalShow.value = true;
+};
+
+const confirmDelete = async () => {
+  deleteModalShow.value = false;
+  emits('loading-state', true);
+
+  const result: ServiceResponse<any> = await vatProfileService.delete(deleteUlid.value);
+
+  if (result.success) {
+    emits('update-profile');
+    await getVatProfiles('', true, 1, 10);
+    showNotification(t('views.vat_profile.alert.delete_vat_profile.title'), t('views.vat_profile.alert.delete_vat_profile.content'));
+  } else {
+    showAlertPlaceholder(
+      'danger',
+      t('components.alert_placeholder.title.danger'),
+      result.errors as Record<string, Array<string>>,
+    );
+  }
+
+  emits('loading-state', false);
+};
+
+const showNotification = (pTitle: string, pContent: string) => {
+  const n: NotificationData = {
+    title: pTitle,
+    content: pContent,
+  };
+
+  emits('show-notification', n);
+};
+
+const showAlertPlaceholder = (
+  pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+  pTitle: string,
+  pAlertList: Record<string, Array<string>> | null,
+) => {
+  const ap: AlertPlaceholderProps = {
+    alertType: pAlertType,
+    title: pTitle,
+    alertList: pAlertList,
+  };
+
+  emits('show-alertplaceholder', ap);
+};
+</script>
+
+<template>
+  <DataList
+    :title="t('views.vat_profile.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="vatProfileLists ? vatProfileLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.vat_profile.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.vat_profile.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap text-right">
+              {{ t('views.vat_profile.table.cols.vat_rate') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap text-right">
+              {{ t('views.vat_profile.table.cols.vat_base_fraction') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.vat_profile.table.cols.is_active') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="vatProfileLists !== null">
+          <template v-if="vatProfileLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="6">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in vatProfileLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td class="text-right">{{ formatCurrency(item.vat_rate) }}</Table.Td>
+              <Table.Td class="text-right">{{ formatVatBaseFraction(item) }}</Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.is_active" icon="CheckCircle" class="text-success" />
+                <Lucide v-else icon="X" class="text-danger" />
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="6">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.vat_profile.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.vat_profile.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.vat_profile.fields.vat_rate') }}
+                  </div>
+                  <div class="flex-1">{{ formatCurrency(item.vat_rate) }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.vat_profile.fields.vat_base_numerator') }}
+                  </div>
+                  <div class="flex-1">{{ item.vat_base_numerator }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.vat_profile.fields.vat_base_denominator') }}
+                  </div>
+                  <div class="flex-1">{{ item.vat_base_denominator }}</div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.vat_profile.fields.is_active') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.is_active">
+                      {{ t('components.dropdown.values.statusDDL.active') }}
+                    </span>
+                    <span v-else>
+                      {{ t('components.dropdown.values.statusDDL.inactive') }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex flex-row mt-1">
+                  <div class="ml-5 w-48 text-right pr-5 font-medium">
+                    {{ t('views.vat_profile.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks ?? '-' }}</div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/pages/warehouse/WarehouseCreate.vue b/web/src/pages/warehouse/WarehouseCreate.vue
new file mode 100644
index 000000000..880d9032c
--- /dev/null
+++ b/web/src/pages/warehouse/WarehouseCreate.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { isAxiosError, AxiosError } from 'axios';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormInputCode,
+    FormSwitch,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import Button from '@/components/Base/Button';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { useRouter } from 'vue-router';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import WarehouseService from '@/services/WarehouseService';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const warehouseServices = new WarehouseService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.warehouse.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.warehouse.field_groups.warehouse_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const warehouseForm = warehouseServices.useWarehouseCreateForm();
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_CREATE);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await Promise.all([getDDL()]);
+
+    loadFromCache();
+    setCompanyIdData();
+  });
+  // #endregion
+
+  // #region Methods
+  const setCompanyIdData = () => {
+    warehouseForm.setData({
+      company_id: selectedUserLocation.value.company.id,
+      branch_id: selectedUserLocation.value.branch.id,
+    });
+  };
+
+  const loadFromCache = () => {
+    let data = cacheServices.getLastEntity('WAREHOUSE_CREATE') as Record<string, unknown>;
+    if (!data) return;
+    warehouseForm.setData(data);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    const result = await dashboardServices.getStatusDDL();
+    if (result) {
+      statusDDL.value = result;
+    }
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (warehouseForm.hasErrors) {
+      scrollToError(Object.keys(warehouseForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await warehouseForm
+      .submit()
+      .then(() => {
+        resetForm();
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-company-warehouse-list' });
+      })
+      .catch((error) => {
+        let errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = () => {
+    warehouseForm.reset();
+    warehouseForm.setErrors({});
+  };
+
+  const setCode = () => {
+    warehouseForm.forgetError('code');
+    if (warehouseForm.code == '_AUTO_') {
+      warehouseForm.setData({ code: '' });
+    } else {
+      warehouseForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #region Watchers
+  watch(
+    warehouseForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('WAREHOUSE_CREATE', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="warehouseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="warehouseForm.company_id" />
+          <FormInput type="hidden" v-model="warehouseForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': warehouseForm.invalid('code') }">
+              {{ t('views.warehouse.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="warehouseForm.code"
+              type="text"
+              :class="{ 'border-danger': warehouseForm.invalid('code') }"
+              :placeholder="t('views.warehouse.fields.code')"
+              @set-auto="setCode"
+              @change="warehouseForm.validate('code')"
+            />
+            <FormErrorMessages :messages="warehouseForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': warehouseForm.invalid('name') }">
+              {{ t('views.warehouse.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="warehouseForm.name"
+              type="text"
+              :class="{ 'border-danger': warehouseForm.invalid('name') }"
+              :placeholder="t('views.warehouse.fields.name')"
+              @change="warehouseForm.validate('name')"
+            />
+            <FormErrorMessages :messages="warehouseForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.warehouse.fields.address') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="warehouseForm.address"
+              type="text"
+              :placeholder="t('views.warehouse.fields.address')"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.warehouse.fields.city') }}
+            </FormLabel>
+            <FormInput v-model="warehouseForm.city" type="text" :placeholder="t('views.warehouse.fields.city')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.warehouse.fields.contact') }}
+            </FormLabel>
+            <FormInput v-model="warehouseForm.contact" type="text" :placeholder="t('views.warehouse.fields.contact')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.warehouse.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="warehouseForm.remarks"
+              type="text"
+              :placeholder="t('views.warehouse.fields.remarks')"
+              rows="3"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': warehouseForm.invalid('status') }">
+              {{ t('views.warehouse.fields.status') }}
+            </FormLabel>
+            <FormSelect
+              v-model="warehouseForm.status"
+              :class="{ 'border-danger': warehouseForm.invalid('status') }"
+              @change="warehouseForm.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="warehouseForm.errors.status" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="warehouseForm.validating || warehouseForm.hasErrors"
+          >
+            <Lucide v-if="warehouseForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/warehouse/WarehouseEdit.vue b/web/src/pages/warehouse/WarehouseEdit.vue
new file mode 100644
index 000000000..0323f1354
--- /dev/null
+++ b/web/src/pages/warehouse/WarehouseEdit.vue
@@ -0,0 +1,315 @@
+<script setup lang="ts">
+  // #region Imports
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+  import WarehouseService from '@/services/WarehouseService';
+  import DashboardService from '@/services/DashboardService';
+  import CacheService from '@/services/CacheService';
+  import { convertErrorTypeToAlertListType } from '@/utils/helper';
+  import { TwoColumnsLayout } from '@/components/Base/Form/FormLayout';
+  import {
+    FormInput,
+    FormLabel,
+    FormTextarea,
+    FormSelect,
+    FormSwitch,
+    FormInputCode,
+    FormErrorMessages,
+  } from '@/components/Base/Form';
+  import { TwoColumnsLayoutCards } from '@/components/Base/Form/FormLayout/TwoColumnsLayout.vue';
+  import { CardState } from '@/types/enums/CardState';
+  import { DropDownOption } from '@/types/models/DropDownOption';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import Button from '@/components/Base/Button';
+  import { debounce } from 'lodash';
+  import Lucide from '@/components/Base/Lucide';
+  import { Warehouse } from '@/types/models/Warehouse';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+
+  const warehouseServices = new WarehouseService();
+  const dashboardServices = new DashboardService();
+  const cacheServices = new CacheService();
+
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits(['mode-state', 'loading-state', 'update-profile', 'show-alertplaceholder']);
+  // #endregion
+
+  // #region Refs
+  const cards = ref<Array<TwoColumnsLayoutCards>>([
+    {
+      title: 'views.warehouse.field_groups.company_info',
+      state: CardState.Expanded,
+    },
+    {
+      title: 'views.warehouse.field_groups.warehouse_data',
+      state: CardState.Expanded,
+    },
+    { title: '', state: CardState.Hidden, id: 'button' },
+  ]);
+
+  const statusDDL = ref<Array<DropDownOption> | null>(null);
+
+  const warehouseForm = warehouseServices.useWarehouseEditForm(route.params.ulid as string);
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.FORM_EDIT);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await Promise.all([getDDL(), loadData(route.params.ulid as string)]);
+  });
+  // #endregion
+
+  // #region Methods
+  const loadData = async (ulid: string) => {
+    emits('loading-state', true);
+    const result: ServiceResponse<Warehouse | null> = await warehouseServices.read(ulid);
+
+    if (result.success && result.data) {
+      warehouseForm.setData({
+        company_id: result.data.company.id,
+        branch_id: result.data.branch.id,
+        code: result.data.code,
+        name: result.data.name,
+        address: result.data.address,
+        city: result.data.city,
+        contact: result.data.contact,
+        remarks: result.data.remarks,
+        status: result.data.status,
+      });
+    } else {
+      router.push({ name: 'side-menu-company-warehouse-list' });
+    }
+    emits('loading-state', false);
+  };
+
+  const getDDL = async (): Promise<void> => {
+    statusDDL.value = await dashboardServices.getStatusDDL();
+  };
+
+  const handleExpandCard = (index: number) => {
+    if (cards.value[index].state === CardState.Collapsed) {
+      cards.value[index].state = CardState.Expanded;
+    } else if (cards.value[index].state === CardState.Expanded) {
+      cards.value[index].state = CardState.Collapsed;
+    }
+  };
+
+  const scrollToError = (id: string): void => {
+    let el = document.getElementById(id);
+
+    if (!el) return;
+
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  };
+
+  const onSubmit = async () => {
+    if (warehouseForm.hasErrors) {
+      scrollToError(Object.keys(warehouseForm.errors)[0]);
+    }
+
+    emits('loading-state', true);
+    await warehouseForm
+      .submit()
+      .then(() => {
+        emits('update-profile');
+        showAlertPlaceholder('hidden', '', null);
+        router.push({ name: 'side-menu-company-warehouse-list' });
+      })
+      .catch((error) => {
+        const errorList: Record<string, Array<string>> = convertErrorTypeToAlertListType(error);
+        showAlertPlaceholder('danger', '', errorList);
+      })
+      .finally(() => {
+        emits('loading-state', false);
+      });
+  };
+
+  const resetForm = async () => {
+    warehouseForm.reset();
+    warehouseForm.setErrors({});
+    await loadData(route.params.ulid as string);
+  };
+
+  const setCode = () => {
+    warehouseForm.forgetError('code');
+    if (warehouseForm.code == '_AUTO_') {
+      warehouseForm.setData({ code: '' });
+    } else {
+      warehouseForm.setData({ code: '_AUTO_' });
+    }
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+
+  // #endregion
+
+  // #region Watchers
+  watch(
+    warehouseForm,
+    debounce((newValue): void => {
+      cacheServices.setLastEntity('WAREHOUSE_EDIT', newValue.data());
+    }, 500),
+    { deep: true },
+  );
+  // #endregion
+</script>
+
+<template>
+  <form id="warehouseForm" @submit.prevent="onSubmit">
+    <TwoColumnsLayout :cards="cards" :using-side-tab="false" @handle-expand-card="handleExpandCard">
+      <template #card-items-0>
+        <div class="p-5">
+          <FormLabel>
+            {{ selectedUserLocation.company.code }}
+            <br />
+            {{ selectedUserLocation.company.name }}
+          </FormLabel>
+          <FormInput type="hidden" v-model="warehouseForm.company_id" />
+          <FormInput type="hidden" v-model="warehouseForm.branch_id" />
+        </div>
+      </template>
+      <template #card-items-1>
+        <div class="p-5">
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': warehouseForm.invalid('code') }">
+              {{ t('views.warehouse.fields.code') }}
+            </FormLabel>
+            <FormInputCode
+              v-model="warehouseForm.code"
+              type="text"
+              :class="{ 'border-danger': warehouseForm.invalid('code') }"
+              :placeholder="t('views.warehouse.fields.code')"
+              @set-auto="setCode"
+              @change="warehouseForm.validate('code')"
+            />
+            <FormErrorMessages :messages="warehouseForm.errors.code" />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': warehouseForm.invalid('name') }">
+              {{ t('views.warehouse.fields.name') }}
+            </FormLabel>
+            <FormInput
+              v-model="warehouseForm.name"
+              type="text"
+              :class="{ 'border-danger': warehouseForm.invalid('name') }"
+              :placeholder="t('views.warehouse.fields.name')"
+              @change="warehouseForm.validate('name')"
+            />
+            <FormErrorMessages :messages="warehouseForm.errors.name" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.warehouse.fields.address') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="warehouseForm.address"
+              type="text"
+              :placeholder="t('views.warehouse.fields.address')"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.warehouse.fields.city') }}
+            </FormLabel>
+            <FormInput v-model="warehouseForm.city" type="text" :placeholder="t('views.warehouse.fields.city')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.warehouse.fields.contact') }}
+            </FormLabel>
+            <FormInput v-model="warehouseForm.contact" type="text" :placeholder="t('views.warehouse.fields.contact')" />
+          </div>
+          <div class="pb-4">
+            <FormLabel>
+              {{ t('views.warehouse.fields.remarks') }}
+            </FormLabel>
+            <FormTextarea
+              v-model="warehouseForm.remarks"
+              type="text"
+              :placeholder="t('views.warehouse.fields.remarks')"
+              rows="3"
+            />
+          </div>
+          <div class="pb-4">
+            <FormLabel :class="{ 'text-danger': warehouseForm.invalid('status') }">
+              {{ t('views.warehouse.fields.status') }}
+            </FormLabel>
+            <FormSelect
+              v-model="warehouseForm.status"
+              :class="{ 'border-danger': warehouseForm.invalid('status') }"
+              @change="warehouseForm.validate('status')"
+            >
+              <option value="">
+                {{ t('components.dropdown.placeholder') }}
+              </option>
+              <option v-for="c in statusDDL" :key="c.code" :value="c.code">
+                {{ t(c.name) }}
+              </option>
+            </FormSelect>
+            <FormErrorMessages :messages="warehouseForm.errors.status" />
+          </div>
+        </div>
+      </template>
+      <template #card-items-button>
+        <div class="flex gap-4">
+          <Button
+            type="submit"
+            href="#"
+            variant="primary"
+            class="w-28 shadow-md"
+            :disabled="warehouseForm.validating || warehouseForm.hasErrors"
+          >
+            <Lucide v-if="warehouseForm.validating" icon="Loader" class="animate-spin" />
+            <template v-else>
+              {{ t('components.buttons.submit') }}
+            </template>
+          </Button>
+          <Button type="button" href="#" variant="soft-secondary" class="w-28 shadow-md" @click="resetForm">
+            {{ t('components.buttons.reset') }}
+          </Button>
+        </div>
+      </template>
+    </TwoColumnsLayout>
+  </form>
+</template>
diff --git a/web/src/pages/warehouse/WarehouseIndex.vue b/web/src/pages/warehouse/WarehouseIndex.vue
new file mode 100644
index 000000000..56bef1423
--- /dev/null
+++ b/web/src/pages/warehouse/WarehouseIndex.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+  // #region Imports
+  import { ref, provide } from 'vue';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { TitleLayout } from '@/components/Base/Form/FormLayout';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import CacheService from '@/services/CacheService';
+  import AlertPlaceholder from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  import { useUserContextStore } from '@/stores/user-context';
+  import ProfileService from '@/services/ProfileService';
+  import { UserProfile } from '@/types/models/UserProfile';
+  import Notification from '@/components/Base/Notification/Notification.vue';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type NotificationElement } from '@/components/Base/Notification/Notification.vue';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+
+  const userContextStore = useUserContextStore();
+
+  const cacheService = new CacheService();
+  const profileService = new ProfileService();
+
+  // #endregion
+
+  // #region Props, Emits
+  // #endregion
+
+  // #region Refs
+  const mode = ref<ViewMode>(ViewMode.INDEX);
+  const loading = ref<boolean>(false);
+  const titleView = ref<string>('views.warehouse.page_title');
+
+  const alertType = ref<'danger' | 'success' | 'warning' | 'pending' | 'dark' | 'hidden'>('hidden');
+  const title = ref<string>('');
+  const alertList = ref<Record<string, Array<string>> | null>(null);
+
+  const warehouseNotification = ref<NotificationElement>();
+
+  const notificationTitle = ref<string>('');
+  const notificationContent = ref<string>('');
+  // #endregion
+
+  // #region Provide/Inject
+  provide('bind[warehouseNotification]', (el: NotificationElement) => {
+    warehouseNotification.value = el;
+  });
+  // #endregion
+
+  // #region Computed
+  // #endregion
+
+  // #region Lifecycle Hooks
+  // #endregion
+
+  // #region Methods
+  const createNew = () => {
+    resetAlertPlaceholder();
+    mode.value = ViewMode.FORM_CREATE;
+    router.push({ name: 'side-menu-company-warehouse-create' });
+  };
+
+  const backToList = async () => {
+    resetAlertPlaceholder();
+    clearCache(mode.value);
+    mode.value = ViewMode.LIST;
+    router.push({ name: 'side-menu-company-warehouse-list' });
+  };
+
+  const onLoadingStateChanged = (state: boolean) => {
+    loading.value = state;
+  };
+
+  const onModeStateChanged = (state: ViewMode) => {
+    mode.value = state;
+
+    switch (state) {
+      case ViewMode.FORM_CREATE:
+        titleView.value = 'views.warehouse.actions.create';
+        break;
+      case ViewMode.FORM_EDIT:
+        titleView.value = 'views.warehouse.actions.edit';
+        break;
+      case ViewMode.INDEX:
+      case ViewMode.LIST:
+      default:
+        titleView.value = 'views.warehouse.page_title';
+        break;
+    }
+  };
+
+  const clearCache = (mode: ViewMode) => {
+    switch (mode) {
+      case ViewMode.FORM_CREATE:
+        cacheService.removeLastEntity('WAREHOUSE_CREATE');
+        break;
+      case ViewMode.FORM_EDIT:
+        cacheService.removeLastEntity('WAREHOUSE_EDIT');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onUpdateProfileTriggered = async () => {
+    let userprofile = await profileService.readProfile();
+    if (userprofile.success) {
+      userContextStore.setUserContext(userprofile.data as UserProfile);
+    }
+  };
+
+  const onAlertPlaceholderTriggered = (apProps: AlertPlaceholderProps) => {
+    alertType.value = apProps.alertType;
+    title.value = apProps.title;
+    alertList.value = apProps.alertList;
+  };
+
+  const onShowNotificationTriggered = (notification: NotificationData) => {
+    notificationTitle.value = notification.title;
+    notificationContent.value = notification.content;
+
+    if (warehouseNotification.value) warehouseNotification.value.showToast();
+  };
+
+  const resetAlertPlaceholder = () => {
+    title.value = '';
+    alertList.value = null;
+    alertType.value = 'hidden';
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <div class="mt-8">
+    <LoadingOverlay :visible="loading">
+      <TitleLayout>
+        <template #title>
+          {{ t(titleView) }}
+        </template>
+        <template #optional>
+          <div v-if="mode != ViewMode.INDEX" class="flex w-full mt-4 sm:w-auto sm:mt-0">
+            <Button v-if="mode == ViewMode.LIST" as="a" href="#" variant="primary" class="shadow-md" @click="createNew">
+              <Lucide icon="Plus" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.create_new') }}
+            </Button>
+            <Button v-else as="a" href="#" variant="primary" class="shadow-md" @click="backToList">
+              <Lucide icon="ArrowLeft" class="w-4 h-4" />
+              &nbsp;{{ t('components.buttons.back') }}
+            </Button>
+          </div>
+        </template>
+      </TitleLayout>
+
+      <AlertPlaceholder
+        :alert-type="alertType"
+        :title="title"
+        :alert-list="alertList"
+        @dismiss="resetAlertPlaceholder"
+      />
+      <RouterView
+        @loading-state="onLoadingStateChanged"
+        @mode-state="onModeStateChanged"
+        @update-profile="onUpdateProfileTriggered"
+        @show-alertplaceholder="onAlertPlaceholderTriggered"
+        @show-notification="onShowNotificationTriggered"
+      />
+    </LoadingOverlay>
+    <Notification ref-key="warehouseNotification" :options="{ duration: 3000 }" class="flex">
+      <Lucide icon="CheckCircle" class="text-success" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">{{ notificationTitle }}</div>
+        <div class="mt-1 text-slate-500">
+          {{ notificationContent }}
+        </div>
+      </div>
+    </Notification>
+  </div>
+</template>
diff --git a/web/src/pages/warehouse/WarehouseList.vue b/web/src/pages/warehouse/WarehouseList.vue
new file mode 100644
index 000000000..229578ee5
--- /dev/null
+++ b/web/src/pages/warehouse/WarehouseList.vue
@@ -0,0 +1,359 @@
+<script setup lang="ts">
+  // #region Imports
+  import { onMounted, ref, computed } from 'vue';
+  import DataList from '@/components/DataList';
+  import { useI18n } from 'vue-i18n';
+  import Button from '@/components/Base/Button';
+  import Lucide from '@/components/Base/Lucide';
+  import Table from '@/components/Base/Table';
+  import WarehouseService from '@/services/WarehouseService';
+  import { Warehouse } from '@/types/models/Warehouse';
+  import { Collection } from '@/types/resources/Collection';
+  import { DataListEmittedData } from '@/components/DataList/DataList.vue';
+  import { ServiceResponse } from '@/types/services/ServiceResponse';
+  import { Resource } from '@/types/resources/Resource';
+  import { WarehouseReadAnyPaginateRequest } from '@/types/services/warehouse/WarehouseRequest';
+  import { useRouter } from 'vue-router';
+  import { Dialog } from '@/components/Base/Headless';
+  import { useSelectedUserLocationStore } from '@/stores/selected-user-location';
+  import { ErrorCode } from '@/types/enums/ErrorCode';
+  import { ViewMode } from '@/types/enums/ViewMode';
+  import { NotificationData } from '@/types/models/NotificationData';
+  import { type AlertPlaceholderProps } from '@/components/AlertPlaceholder/AlertPlaceholder.vue';
+  // #endregion
+
+  // #region Interfaces
+  // #endregion
+
+  // #region Declarations
+  const { t } = useI18n();
+  const router = useRouter();
+  const warehouseServices = new WarehouseService();
+  const selectedUserLocationStore = useSelectedUserLocationStore();
+  // #endregion
+
+  // #region Props, Emits
+  const emits = defineEmits([
+    'mode-state',
+    'loading-state',
+    'update-profile',
+    'show-alertplaceholder',
+    'show-notification',
+  ]);
+  // #endregion
+
+  // #region Refs
+  const deleteUlid = ref<string>('');
+  const deleteModalShow = ref<boolean>(false);
+  const expandDetail = ref<number | null>(null);
+  const warehouseLists = ref<Collection<Array<Warehouse>> | null>({
+    data: [],
+    meta: {
+      current_page: 0,
+      from: null,
+      last_page: 0,
+      path: '',
+      per_page: 0,
+      to: null,
+      total: 0,
+    },
+    links: {
+      first: '',
+      last: '',
+      prev: null,
+      next: null,
+    },
+  });
+  // #endregion
+
+  // #region Computed
+  const isUserLocationSelected = computed(() => selectedUserLocationStore.isUserLocationSelected);
+  const selectedUserLocation = computed(() => selectedUserLocationStore.selectedUserLocation);
+  // #endregion
+
+  // #region Lifecycle Hooks
+  onMounted(async () => {
+    emits('mode-state', ViewMode.LIST);
+
+    if (!isUserLocationSelected.value) {
+      router.push({
+        name: 'side-menu-error-code',
+        params: { code: ErrorCode.USERLOCATION_REQUIRED },
+      });
+    }
+
+    await getWarehouses('', true, 1, 10);
+  });
+  // #endregion
+
+  // #region Methods
+  const getWarehouses = async (search: string, refresh: boolean, page: number, per_page: number) => {
+    emits('loading-state', true);
+
+    let company_id = selectedUserLocation.value.company.id;
+    let branch_id = selectedUserLocation.value.branch.id;
+
+    const searchReq: WarehouseReadAnyPaginateRequest = {
+      with_trashed: false,
+
+      company_id: company_id,
+      branch_id: branch_id,
+      search: search,
+      status: undefined,
+
+      refresh: refresh,
+      page: page,
+      per_page: per_page,
+    };
+
+    let result: ServiceResponse<Collection<Array<Warehouse>> | null> =
+      await warehouseServices.readAnyPaginate(searchReq);
+
+    if (result.success && result.data) {
+      warehouseLists.value = result.data;
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const onDataListChanged = async (data: DataListEmittedData) => {
+    await getWarehouses(data.search.text, true, data.pagination.page, data.pagination.per_page);
+  };
+
+  const viewSelected = (idx: number) => {
+    if (expandDetail.value === idx) {
+      expandDetail.value = null;
+    } else {
+      expandDetail.value = idx;
+    }
+  };
+
+  const editSelected = (itemIdx: number) => {
+    if (!warehouseLists.value) return;
+
+    let ulid = warehouseLists.value.data[itemIdx].ulid;
+    router.push({
+      name: 'side-menu-company-warehouse-edit',
+      params: { ulid: ulid },
+    });
+  };
+
+  const deleteSelected = (itemIdx: number) => {
+    if (!warehouseLists.value) return;
+
+    let itemUlid = warehouseLists.value.data[itemIdx].ulid;
+
+    deleteUlid.value = itemUlid;
+    deleteModalShow.value = true;
+  };
+
+  const confirmDelete = async () => {
+    deleteModalShow.value = false;
+    emits('loading-state', true);
+
+    let result: ServiceResponse<boolean | null> = await warehouseServices.delete(deleteUlid.value);
+
+    if (result.success) {
+      emits('update-profile');
+      await getWarehouses('', true, 1, 10);
+      showNotification(
+        t('views.warehouse.alert.delete_warehouse.title'),
+        t('views.warehouse.alert.delete_warehouse.content'),
+      );
+    } else {
+      showAlertPlaceholder('danger', '', result.errors as Record<string, Array<string>>);
+    }
+
+    emits('loading-state', false);
+  };
+
+  const showNotification = (pTitle: string, pContent: string) => {
+    let n: NotificationData = {
+      title: pTitle,
+      content: pContent,
+    };
+
+    emits('show-notification', n);
+  };
+
+  const showAlertPlaceholder = (
+    pAlertType: 'hidden' | 'danger' | 'success' | 'warning' | 'pending' | 'dark',
+    pTitle: string,
+    pAlertList: Record<string, Array<string>> | null,
+  ) => {
+    let ap: AlertPlaceholderProps = {
+      alertType: pAlertType,
+      title: pTitle,
+      alertList: pAlertList,
+    };
+
+    emits('show-alertplaceholder', ap);
+  };
+  // #endregion
+
+  // #region Watchers
+  // #endregion
+</script>
+
+<template>
+  <DataList
+    :title="t('views.warehouse.table.title')"
+    :enable-search="true"
+    :can-print="true"
+    :can-export="true"
+    :pagination="warehouseLists ? warehouseLists.meta : null"
+    @dataListChanged="onDataListChanged"
+  >
+    <template #content>
+      <Table class="mt-5" :hover="true">
+        <Table.Thead variant="light">
+          <Table.Tr>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.warehouse.table.cols.code') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.warehouse.table.cols.name') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap">
+              {{ t('views.warehouse.table.cols.status') }}
+            </Table.Th>
+            <Table.Th class="whitespace-nowrap"></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody v-if="warehouseLists !== null">
+          <template v-if="warehouseLists.data.length == 0">
+            <Table.Tr class="intro-x">
+              <Table.Td colspan="5">
+                <div class="flex justify-center italic">
+                  {{ t('components.data-list.data_not_found') }}
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+          <template v-for="(item, itemIdx) in warehouseLists.data" :key="item.ulid">
+            <Table.Tr class="intro-x">
+              <Table.Td>{{ item.code }}</Table.Td>
+              <Table.Td>{{ item.name }}</Table.Td>
+              <Table.Td>
+                <Lucide v-if="item.status === 'ACTIVE'" icon="CheckCircle" />
+                <Lucide v-if="item.status === 'INACTIVE'" icon="X" />
+              </Table.Td>
+              <Table.Td>
+                <div class="flex justify-end gap-1">
+                  <Button variant="outline-secondary" @click="viewSelected(itemIdx)">
+                    <Lucide icon="Info" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="editSelected(itemIdx)">
+                    <Lucide icon="Pen" class="w-4 h-4" />
+                  </Button>
+                  <Button variant="outline-secondary" @click="deleteSelected(itemIdx)">
+                    <Lucide icon="Trash2" class="w-4 h-4 text-danger" />
+                  </Button>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+            <Table.Tr
+              :class="{
+                'intro-x': true,
+                'hidden transition-all': expandDetail !== itemIdx,
+              }"
+            >
+              <Table.Td colspan="5">
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.warehouse.fields.code') }}
+                  </div>
+                  <div class="flex-1">{{ item.code }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.warehouse.fields.name') }}
+                  </div>
+                  <div class="flex-1">{{ item.name }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.warehouse.fields.address') }}
+                  </div>
+                  <div class="flex-1">{{ item.address }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.warehouse.fields.city') }}
+                  </div>
+                  <div class="flex-1">{{ item.city }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.warehouse.fields.contact') }}
+                  </div>
+                  <div class="flex-1">{{ item.contact }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.warehouse.fields.remarks') }}
+                  </div>
+                  <div class="flex-1">{{ item.remarks }}</div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="ml-5 w-48 text-right pr-5">
+                    {{ t('views.warehouse.fields.status') }}
+                  </div>
+                  <div class="flex-1">
+                    <span v-if="item.status === 'ACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.active') }}
+                    </span>
+                    <span v-if="item.status === 'INACTIVE'">
+                      {{ t('components.dropdown.values.statusDDL.inactive') }}
+                    </span>
+                  </div>
+                </div>
+              </Table.Td>
+            </Table.Tr>
+          </template>
+        </Table.Tbody>
+      </Table>
+      <Dialog
+        :open="deleteModalShow"
+        @close="
+          () => {
+            deleteModalShow = false;
+          }
+        "
+      >
+        <Dialog.Panel>
+          <div class="p-5 text-center">
+            <Lucide icon="XCircle" class="w-16 h-16 mx-auto mt-3 text-danger" />
+            <div class="mt-5 text-3xl">
+              {{ t('components.delete-modal.title') }}
+            </div>
+            <div class="mt-2 text-slate-500">
+              {{ t('components.delete-modal.desc_1') }}
+              <br />
+              {{ t('components.delete-modal.desc_2') }}
+            </div>
+          </div>
+          <div class="px-5 pb-8 text-center">
+            <Button
+              type="button"
+              variant="outline-secondary"
+              class="w-24 mr-1"
+              @click="
+                () => {
+                  deleteModalShow = false;
+                }
+              "
+            >
+              {{ t('components.buttons.cancel') }}
+            </Button>
+            <Button type="button" variant="danger" class="w-24" @click="confirmDelete">
+              {{ t('components.buttons.delete') }}
+            </Button>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </template>
+  </DataList>
+</template>
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 3da50127b..27d27b1ea 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,11 +1,11 @@
-import { createRouter, createWebHistory } from "vue-router";
-import r from "./routes";
+import { createRouter, createWebHistory } from 'vue-router';
+import r from './routes';
 
 const routes = r;
 
 const router = createRouter({
   history: createWebHistory(),
-  routes
+  routes,
 });
 
 router.beforeEach(async (to, from, next) => {
@@ -13,7 +13,7 @@ router.beforeEach(async (to, from, next) => {
 });
 
 router.afterEach((to, from) => {
-  if (to.matched.some(r => r.meta.remember)) {
+  if (to.matched.some((r) => r.meta.remember)) {
     sessionStorage.setItem('DCSLAB_LAST_ROUTE', to.name as string);
   }
 });
diff --git a/web/src/router/routes.ts b/web/src/router/routes.ts
index b531e99a3..f9eb3e367 100644
--- a/web/src/router/routes.ts
+++ b/web/src/router/routes.ts
@@ -1,251 +1,2262 @@
-import Layout from "@/themes";
-
-import LoginPage from "../pages/auth/LoginPage.vue";
-import RegisterPage from "../pages/auth/RegisterPage.vue";
-import ForgotPasswordPage from "../pages/auth/ForgotPasswordPage.vue";
-import ResetPasswordPage from "../pages/auth/ResetPasswordPage.vue";
-import MainDashboard from "../pages/dashboard/MainDashboard.vue";
-import ProfileView from "../pages/dashboard/ProfileView.vue";
-import DevTool from "../pages/dev/DevTool.vue";
-import PlayOne from "../pages/dev/PlayOne.vue";
-import PlayTwo from "../pages/dev/PlayTwo.vue";
-import ErrorView from "../pages/error/ErrorView.vue";
-import ErrorPage from "../pages/error/ErrorPage.vue";
-import UserIndex from "../pages/administrator/UserIndex.vue";
-import UserList from "../pages/administrator/UserList.vue";
-import UserCreate from "../pages/administrator/UserCreate.vue";
-import UserEdit from "../pages/administrator/UserEdit.vue";
-import CompanyIndex from "../pages/company/CompanyIndex.vue";
-import CompanyList from "../pages/company/CompanyList.vue";
-import CompanyCreate from "../pages/company/CompanyCreate.vue";
-import CompanyEdit from "../pages/company/CompanyEdit.vue";
-import BranchIndex from "../pages/branch/BranchIndex.vue";
-import BranchList from "../pages/branch/BranchList.vue";
-import BranchCreate from "../pages/branch/BranchCreate.vue";
-import BranchEdit from "../pages/branch/BranchEdit.vue";
-
-export default [
-    {
-        path: "/",
-        redirect: "/auth/login",
-    },
-    {
-        path: "/home",
-        redirect: "/dashboard/main",
-    },
-    {
-        path: "/auth",
-        children: [
-            {
-                path: "/auth/login",
-                name: "login",
-                component: LoginPage,
-            },
-
-            {
-                path: "/auth/register",
-                name: 'register',
-                component: RegisterPage,
-            },
-            {
-                path: "/auth/forgot-password",
-                name: 'forgot-password',
-                component: ForgotPasswordPage,
-            },
-            {
-                path: "/auth/reset-password",
-                name: 'reset-password',
-                component: ResetPasswordPage,
-            },
-        ]
-    },
-    {
-        path: "/dashboard",
-        component: Layout,
-        children: [
-            {
-                path: "/dashboard/main",
-                name: "side-menu-dashboard-maindashboard",
-                component: MainDashboard,
-                meta: {
-                    remember: true,
-                },
-            },
-            {
-                path: "/dashboard/profile",
-                name: "side-menu-dashboard-profile",
-                component: ProfileView,
-                meta: {
-                    remember: true,
-                },
-            },
-            {
-                path: "/dashboard/company",
-                children: [
-                    {
-                        path: "/dashboard/company/company",
-                        name: "side-menu-company-company",
-                        redirect: "/dashboard/company/company/list",
-                        component: CompanyIndex,
-                        children: [
-                            {
-                                path: "/dashboard/company/company/list",
-                                name: "side-menu-company-company-list",
-                                component: CompanyList,
-                                meta: {
-                                    remember: true,
-                                },
-                            },
-                            {
-                                path: "/dashboard/company/company/create",
-                                name: "side-menu-company-company-create",
-                                component: CompanyCreate,
-                                meta: {
-                                    remember: true,
-                                },
-                            },
-                            {
-                                path: "/dashboard/company/company/edit/:ulid",
-                                name: "side-menu-company-company-edit",
-                                component: CompanyEdit,
-                                meta: {
-                                    remember: true,
-                                },
-                            }
-                        ]
-                    },
-                    {
-                        path: "/dashboard/company/branch",
-                        name: "side-menu-company-branch",
-                        redirect: "/dashboard/company/branch/list",
-                        component: BranchIndex,
-                        children: [
-                            {
-                                path: "/dashboard/company/branch/list",
-                                name: "side-menu-company-branch-list",
-                                component: BranchList,
-                                meta: {
-                                    remember: true,
-                                },
-                            },
-                            {
-                                path: "/dashboard/company/branch/create",
-                                name: "side-menu-company-branch-create",
-                                component: BranchCreate,
-                                meta: {
-                                    remember: true,
-                                },
-                            },
-                            {
-                                path: "/dashboard/company/branch/edit/:ulid",
-                                name: "side-menu-company-branch-edit",
-                                component: BranchEdit,
-                                meta: {
-                                    remember: true,
-                                },
-                            }
-                        ]
-                    },
-                ]
-            },
-            {
-                path: "/dashboard/administrator",
-                name: "side-menu-administrator",
-                children: [
-                    {
-                        path: "/dashboard/administrator/user",
-                        name: "side-menu-administrator-user",
-                        redirect: "/dashboard/administrator/user/list",
-                        component: UserIndex,
-                        children: [
-                            {
-                                path: "/dashboard/administrator/user/list",
-                                name: "side-menu-administrator-user-list",
-                                component: UserList,
-                                meta: {
-                                    remember: true,
-                                },
-                            },
-                            {
-                                path: "/dashboard/administrator/user/create",
-                                name: "side-menu-administrator-user-create",
-                                component: UserCreate,
-                                meta: {
-                                    remember: true,
-                                },
-                            },
-                            {
-                                path: "/dashboard/administrator/user/edit/:ulid",
-                                name: "side-menu-administrator-user-edit",
-                                component: UserEdit,
-                                meta: {
-                                    remember: true,
-                                },
-                            }
-                        ]
-                    }
-
-                ]
-            },
-            {
-                path: "/dashboard/devtool",
-                name: "side-menu-devtool",
-                children: [
-                    {
-                        path: "/dashboard/devtool/devtool",
-                        name: "side-menu-devtool-devtool",
-                        component: DevTool,
-                        meta: {
-                            remember: false,
-                        },
-                    },
-                    {
-                        path: "/dashboard/devtool/playground",
-                        name: "side-menu-devtool-playground",
-                        children: [
-                            {
-                                path: "/dashboard/devtool/playground/p1",
-                                name: "side-menu-devtool-playground-p1",
-                                component: PlayOne,
-                                meta: {
-                                    remember: true,
-                                },
-                            },
-                            {
-                                path: "/dashboard/devtool/playground/p2",
-                                name: "side-menu-devtool-playground-p2",
-                                component: PlayTwo,
-                                meta: {
-                                    remember: true,
-                                },
-                            }
-                        ]
-                    }
-                ]
-            },
-            {
-                path: "/dashboard/error" + "/:code",
-                name: "side-menu-error-code",
-                component: ErrorView,
-                meta: {
-                    remember: false,
-                },
-            }
-        ],
-    },
-    {
-        path: "/:pathMatch(.*)*",
-        component: ErrorPage,
-        meta: {
-            remember: false,
-        },
-    },
-    {
-        path: "/error-page",
-        name: "error-page",
-        component: ErrorPage,
-        meta: {
-            remember: false,
-        },
-    }
-];
+import Layout from '@/themes';
+
+import LoginPage from '../pages/auth/LoginPage.vue';
+import RegisterPage from '../pages/auth/RegisterPage.vue';
+import ForgotPasswordPage from '../pages/auth/ForgotPasswordPage.vue';
+import ResetPasswordPage from '../pages/auth/ResetPasswordPage.vue';
+import MainDashboard from '../pages/dashboard/MainDashboard.vue';
+import ProfileView from '../pages/dashboard/ProfileView.vue';
+import DevTool from '../pages/dev/DevTool.vue';
+import PlayOne from '../pages/dev/PlayOne.vue';
+import PlayTwo from '../pages/dev/PlayTwo.vue';
+import ErrorView from '../pages/error/ErrorView.vue';
+import ErrorPage from '../pages/error/ErrorPage.vue';
+import UserIndex from '../pages/administrator/UserIndex.vue';
+import UserList from '../pages/administrator/UserList.vue';
+import UserCreate from '../pages/administrator/UserCreate.vue';
+import UserEdit from '../pages/administrator/UserEdit.vue';
+
+import CompanyIndex from '../pages/company/CompanyIndex.vue';
+import CompanyList from '../pages/company/CompanyList.vue';
+import CompanyCreate from '../pages/company/CompanyCreate.vue';
+import CompanyEdit from '../pages/company/CompanyEdit.vue';
+import BranchIndex from '../pages/branch/BranchIndex.vue';
+import BranchList from '../pages/branch/BranchList.vue';
+import BranchCreate from '../pages/branch/BranchCreate.vue';
+import BranchEdit from '../pages/branch/BranchEdit.vue';
+import WarehouseIndex from '@/pages/warehouse/WarehouseIndex.vue';
+import WarehouseList from '@/pages/warehouse/WarehouseList.vue';
+import WarehouseCreate from '@/pages/warehouse/WarehouseCreate.vue';
+import WarehouseEdit from '@/pages/warehouse/WarehouseEdit.vue';
+import InvestorIndex from '@/pages/investor/InvestorIndex.vue';
+import InvestorList from '@/pages/investor/InvestorList.vue';
+import InvestorCreate from '@/pages/investor/InvestorCreate.vue';
+import InvestorEdit from '@/pages/investor/InvestorEdit.vue';
+import ChartOfAccountIndex from '@/pages/chart-of-account/ChartOfAccountIndex.vue';
+import ChartOfAccountList from '@/pages/chart-of-account/ChartOfAccountList.vue';
+import ChartOfAccountCreate from '@/pages/chart-of-account/ChartOfAccountCreate.vue';
+import ChartOfAccountEdit from '@/pages/chart-of-account/ChartOfAccountEdit.vue';
+import JournalEntryIndex from '@/pages/journal-entry/JournalEntryIndex.vue';
+import JournalEntryList from '@/pages/journal-entry/JournalEntryList.vue';
+import JournalEntryCreate from '@/pages/journal-entry/JournalEntryCreate.vue';
+import JournalEntryEdit from '@/pages/journal-entry/JournalEntryEdit.vue';
+import JournalEntryDetailIndex from '@/pages/journal-entry/JournalEntryDetailIndex.vue';
+import JournalEntryDetailList from '@/pages/journal-entry/JournalEntryDetailList.vue';
+import BalanceSheetIndex from '@/pages/balance-sheet/BalanceSheetIndex.vue';
+import BalanceSheetList from '@/pages/balance-sheet/BalanceSheetList.vue';
+import CashAccountIndex from '@/pages/cash-account/CashAccountIndex.vue';
+import CashAccountList from '@/pages/cash-account/CashAccountList.vue';
+import CashAccountCreate from '@/pages/cash-account/CashAccountCreate.vue';
+import CashAccountEdit from '@/pages/cash-account/CashAccountEdit.vue';
+import CashAccountWithRemainingBalanceIndex from '@/pages/cash-account/CashAccountWithRemainingBalanceIndex.vue';
+import CashAccountWithRemainingBalanceList from '@/pages/cash-account/CashAccountWithRemainingBalanceList.vue';
+import CapitalOpeningIndex from '@/pages/capital-opening/CapitalOpeningIndex.vue';
+import CapitalOpeningList from '@/pages/capital-opening/CapitalOpeningList.vue';
+import CapitalOpeningCreate from '@/pages/capital-opening/CapitalOpeningCreate.vue';
+import CapitalOpeningEdit from '@/pages/capital-opening/CapitalOpeningEdit.vue';
+import CapitalTransactionIndex from '@/pages/capital-transaction/CapitalTransactionIndex.vue';
+import CapitalTransactionList from '@/pages/capital-transaction/CapitalTransactionList.vue';
+import CapitalTransactionCreate from '@/pages/capital-transaction/CapitalTransactionCreate.vue';
+import CapitalTransactionEdit from '@/pages/capital-transaction/CapitalTransactionEdit.vue';
+import CashTransferIndex from '@/pages/cash-transfer/CashTransferIndex.vue';
+import CashTransferList from '@/pages/cash-transfer/CashTransferList.vue';
+import CashTransferCreate from '@/pages/cash-transfer/CashTransferCreate.vue';
+import CashTransferEdit from '@/pages/cash-transfer/CashTransferEdit.vue';
+import ExpenseIndex from '@/pages/expense/ExpenseIndex.vue';
+import ExpenseList from '@/pages/expense/ExpenseList.vue';
+import ExpenseCreate from '@/pages/expense/ExpenseCreate.vue';
+import ExpenseEdit from '@/pages/expense/ExpenseEdit.vue';
+import DebtIndex from '@/pages/debt/DebtIndex.vue';
+import DebtList from '@/pages/debt/DebtList.vue';
+import DebtCreate from '@/pages/debt/DebtCreate.vue';
+import DebtEdit from '@/pages/debt/DebtEdit.vue';
+import PrepaidExpenseIndex from '@/pages/prepaid-expense/PrepaidExpenseIndex.vue';
+import PrepaidExpenseList from '@/pages/prepaid-expense/PrepaidExpenseList.vue';
+import PrepaidExpenseCreate from '@/pages/prepaid-expense/PrepaidExpenseCreate.vue';
+import PrepaidExpenseEdit from '@/pages/prepaid-expense/PrepaidExpenseEdit.vue';
+import ExpensePaymentIndex from '@/pages/expense-payment/ExpensePaymentIndex.vue';
+import ExpensePaymentList from '@/pages/expense-payment/ExpensePaymentList.vue';
+import ExpensePaymentCreate from '@/pages/expense-payment/ExpensePaymentCreate.vue';
+import ExpensePaymentEdit from '@/pages/expense-payment/ExpensePaymentEdit.vue';
+import IncomePaymentIndex from '@/pages/income-payment/IncomePaymentIndex.vue';
+import IncomePaymentList from '@/pages/income-payment/IncomePaymentList.vue';
+import IncomePaymentCreate from '@/pages/income-payment/IncomePaymentCreate.vue';
+import IncomePaymentEdit from '@/pages/income-payment/IncomePaymentEdit.vue';
+import ExpenseCategoryIndex from '@/pages/expense-category/ExpenseCategoryIndex.vue';
+import ExpenseCategoryList from '@/pages/expense-category/ExpenseCategoryList.vue';
+import ExpenseCategoryCreate from '@/pages/expense-category/ExpenseCategoryCreate.vue';
+import ExpenseCategoryEdit from '@/pages/expense-category/ExpenseCategoryEdit.vue';
+import DebtCategoryIndex from '@/pages/debt-category/DebtCategoryIndex.vue';
+import DebtCategoryList from '@/pages/debt-category/DebtCategoryList.vue';
+import DebtCategoryCreate from '@/pages/debt-category/DebtCategoryCreate.vue';
+import DebtCategoryEdit from '@/pages/debt-category/DebtCategoryEdit.vue';
+import AssetCategoryIndex from '@/pages/asset-category/AssetCategoryIndex.vue';
+import AssetCategoryList from '@/pages/asset-category/AssetCategoryList.vue';
+import AssetCategoryCreate from '@/pages/asset-category/AssetCategoryCreate.vue';
+import AssetCategoryEdit from '@/pages/asset-category/AssetCategoryEdit.vue';
+import AssetUnitIndex from '@/pages/asset-unit/AssetUnitIndex.vue';
+import AssetUnitList from '@/pages/asset-unit/AssetUnitList.vue';
+import AssetUnitCreate from '@/pages/asset-unit/AssetUnitCreate.vue';
+import AssetUnitEdit from '@/pages/asset-unit/AssetUnitEdit.vue';
+import AssetIndex from '@/pages/asset/AssetIndex.vue';
+import AssetList from '@/pages/asset/AssetList.vue';
+import AssetCreate from '@/pages/asset/AssetCreate.vue';
+import AssetEdit from '@/pages/asset/AssetEdit.vue';
+import ReceivableCategoryIndex from '@/pages/receivable-category/ReceivableCategoryIndex.vue';
+import ReceivableCategoryList from '@/pages/receivable-category/ReceivableCategoryList.vue';
+import ReceivableCategoryCreate from '@/pages/receivable-category/ReceivableCategoryCreate.vue';
+import ReceivableCategoryEdit from '@/pages/receivable-category/ReceivableCategoryEdit.vue';
+import DebtCreditorIndex from '@/pages/debt-creditor/DebtCreditorIndex.vue';
+import DebtCreditorList from '@/pages/debt-creditor/DebtCreditorList.vue';
+import DebtCreditorCreate from '@/pages/debt-creditor/DebtCreditorCreate.vue';
+import DebtCreditorEdit from '@/pages/debt-creditor/DebtCreditorEdit.vue';
+import IncomeCategoryIndex from '@/pages/income-category/IncomeCategoryIndex.vue';
+import IncomeCategoryList from '@/pages/income-category/IncomeCategoryList.vue';
+import IncomeCategoryCreate from '@/pages/income-category/IncomeCategoryCreate.vue';
+import IncomeCategoryEdit from '@/pages/income-category/IncomeCategoryEdit.vue';
+import IncomeIndex from '@/pages/income/IncomeIndex.vue';
+import IncomeList from '@/pages/income/IncomeList.vue';
+import IncomeCreate from '@/pages/income/IncomeCreate.vue';
+import IncomeEdit from '@/pages/income/IncomeEdit.vue';
+import ReceivableIndex from '@/pages/receivable/ReceivableIndex.vue';
+import ReceivableList from '@/pages/receivable/ReceivableList.vue';
+import ReceivableCreate from '@/pages/receivable/ReceivableCreate.vue';
+import ReceivableEdit from '@/pages/receivable/ReceivableEdit.vue';
+import PrepaidIncomeIndex from '@/pages/prepaid-income/PrepaidIncomeIndex.vue';
+import PrepaidIncomeList from '@/pages/prepaid-income/PrepaidIncomeList.vue';
+import PrepaidIncomeCreate from '@/pages/prepaid-income/PrepaidIncomeCreate.vue';
+import PrepaidIncomeEdit from '@/pages/prepaid-income/PrepaidIncomeEdit.vue';
+import ProductCategoryIndex from '@/pages/product-category/ProductCategoryIndex.vue';
+import ProductCategoryList from '@/pages/product-category/ProductCategoryList.vue';
+import ProductCategoryCreate from '@/pages/product-category/ProductCategoryCreate.vue';
+import ProductCategoryEdit from '@/pages/product-category/ProductCategoryEdit.vue';
+import BrandIndex from '@/pages/brand/BrandIndex.vue';
+import BrandList from '@/pages/brand/BrandList.vue';
+import BrandCreate from '@/pages/brand/BrandCreate.vue';
+import BrandEdit from '@/pages/brand/BrandEdit.vue';
+import UnitIndex from '@/pages/unit/UnitIndex.vue';
+import UnitList from '@/pages/unit/UnitList.vue';
+import UnitCreate from '@/pages/unit/UnitCreate.vue';
+import UnitEdit from '@/pages/unit/UnitEdit.vue';
+import VatProfileIndex from '@/pages/vat-profile/VatProfileIndex.vue';
+import VatProfileList from '@/pages/vat-profile/VatProfileList.vue';
+import VatProfileCreate from '@/pages/vat-profile/VatProfileCreate.vue';
+import VatProfileEdit from '@/pages/vat-profile/VatProfileEdit.vue';
+import ProductIndex from '@/pages/product/ProductIndex.vue';
+import ProductList from '@/pages/product/ProductList.vue';
+import ProductCreate from '@/pages/product/ProductCreate.vue';
+import ProductEdit from '@/pages/product/ProductEdit.vue';
+import ProductServiceIndex from '@/pages/product-service/ProductServiceIndex.vue';
+import ProductServiceList from '@/pages/product-service/ProductServiceList.vue';
+import ProductServiceCreate from '@/pages/product-service/ProductServiceCreate.vue';
+import ProductServiceEdit from '@/pages/product-service/ProductServiceEdit.vue';
+import SupplierIndex from '@/pages/supplier/SupplierIndex.vue';
+import SupplierList from '@/pages/supplier/SupplierList.vue';
+import SupplierCreate from '@/pages/supplier/SupplierCreate.vue';
+import SupplierEdit from '@/pages/supplier/SupplierEdit.vue';
+import CustomerGroupIndex from '@/pages/customer-group/CustomerGroupIndex.vue';
+import CustomerGroupList from '@/pages/customer-group/CustomerGroupList.vue';
+import CustomerGroupCreate from '@/pages/customer-group/CustomerGroupCreate.vue';
+import CustomerGroupEdit from '@/pages/customer-group/CustomerGroupEdit.vue';
+import CustomerIndex from '@/pages/customer/CustomerIndex.vue';
+import CustomerList from '@/pages/customer/CustomerList.vue';
+import CustomerCreate from '@/pages/customer/CustomerCreate.vue';
+import CustomerEdit from '@/pages/customer/CustomerEdit.vue';
+import StockAdjustmentCategoryIndex from '@/pages/stock-adjustment-category/StockAdjustmentCategoryIndex.vue';
+import StockAdjustmentCategoryList from '@/pages/stock-adjustment-category/StockAdjustmentCategoryList.vue';
+import StockAdjustmentCategoryCreate from '@/pages/stock-adjustment-category/StockAdjustmentCategoryCreate.vue';
+import StockAdjustmentCategoryEdit from '@/pages/stock-adjustment-category/StockAdjustmentCategoryEdit.vue';
+import PurchaseAdditionalCostCategoryIndex from '@/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryIndex.vue';
+import PurchaseAdditionalCostCategoryList from '@/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryList.vue';
+import PurchaseAdditionalCostCategoryCreate from '@/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryCreate.vue';
+import PurchaseAdditionalCostCategoryEdit from '@/pages/purchase-additional-cost-category/PurchaseAdditionalCostCategoryEdit.vue';
+import PurchaseAdditionalCostIndex from '@/pages/purchase-additional-cost/PurchaseAdditionalCostIndex.vue';
+import PurchaseAdditionalCostList from '@/pages/purchase-additional-cost/PurchaseAdditionalCostList.vue';
+import PurchaseAdditionalCostCreate from '@/pages/purchase-additional-cost/PurchaseAdditionalCostCreate.vue';
+import PurchaseAdditionalCostEdit from '@/pages/purchase-additional-cost/PurchaseAdditionalCostEdit.vue';
+import PurchaseAdditionalCostPaymentIndex from '@/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentIndex.vue';
+import PurchaseAdditionalCostPaymentList from '@/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentList.vue';
+import PurchaseAdditionalCostPaymentCreate from '@/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentCreate.vue';
+import PurchaseAdditionalCostPaymentEdit from '@/pages/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentEdit.vue';
+import StockAdjustmentIndex from '@/pages/stock-adjustment/StockAdjustmentIndex.vue';
+import StockAdjustmentList from '@/pages/stock-adjustment/StockAdjustmentList.vue';
+import StockAdjustmentCreate from '@/pages/stock-adjustment/StockAdjustmentCreate.vue';
+import StockAdjustmentEdit from '@/pages/stock-adjustment/StockAdjustmentEdit.vue';
+import AssetAdjustmentIndex from '@/pages/asset-adjustment/AssetAdjustmentIndex.vue';
+import AssetAdjustmentList from '@/pages/asset-adjustment/AssetAdjustmentList.vue';
+import AssetAdjustmentCreate from '@/pages/asset-adjustment/AssetAdjustmentCreate.vue';
+import AssetAdjustmentEdit from '@/pages/asset-adjustment/AssetAdjustmentEdit.vue';
+import AssetPurchaseIndex from '@/pages/asset-purchase/AssetPurchaseIndex.vue';
+import AssetPurchaseList from '@/pages/asset-purchase/AssetPurchaseList.vue';
+import AssetPurchaseCreate from '@/pages/asset-purchase/AssetPurchaseCreate.vue';
+import AssetPurchaseEdit from '@/pages/asset-purchase/AssetPurchaseEdit.vue';
+import AssetSaleIndex from '@/pages/asset-sale/AssetSaleIndex.vue';
+import AssetSaleList from '@/pages/asset-sale/AssetSaleList.vue';
+import AssetSaleCreate from '@/pages/asset-sale/AssetSaleCreate.vue';
+import AssetSaleEdit from '@/pages/asset-sale/AssetSaleEdit.vue';
+import StockAdjustmentInItemIndex from '@/pages/stock-adjustment/StockAdjustmentInItemIndex.vue';
+import StockAdjustmentInItemList from '@/pages/stock-adjustment/StockAdjustmentInItemList.vue';
+import StockAdjustmentOutItemIndex from '@/pages/stock-adjustment/StockAdjustmentOutItemIndex.vue';
+import StockAdjustmentOutItemList from '@/pages/stock-adjustment/StockAdjustmentOutItemList.vue';
+import StockAdjustmentInItemSerialIndex from '@/pages/stock-adjustment/StockAdjustmentInItemSerialIndex.vue';
+import StockAdjustmentInItemSerialList from '@/pages/stock-adjustment/StockAdjustmentInItemSerialList.vue';
+import StockAdjustmentOutItemSerialIndex from '@/pages/stock-adjustment/StockAdjustmentOutItemSerialIndex.vue';
+import StockAdjustmentOutItemSerialList from '@/pages/stock-adjustment/StockAdjustmentOutItemSerialList.vue';
+import PurchaseOrderIndex from '@/pages/purchase-order/PurchaseOrderIndex.vue';
+import PurchaseOrderList from '@/pages/purchase-order/PurchaseOrderList.vue';
+import PurchaseOrderCreate from '@/pages/purchase-order/PurchaseOrderCreate.vue';
+import PurchaseOrderEdit from '@/pages/purchase-order/PurchaseOrderEdit.vue';
+import PurchaseIndex from '@/pages/purchase/PurchaseIndex.vue';
+import PurchaseList from '@/pages/purchase/PurchaseList.vue';
+import PurchaseCreateDirect from '@/pages/purchase/PurchaseCreateDirect.vue';
+import PurchaseCreateManual from '@/pages/purchase/PurchaseCreateManual.vue';
+import PurchaseEditDirect from '@/pages/purchase/PurchaseEditDirect.vue';
+import PurchaseEditManual from '@/pages/purchase/PurchaseEditManual.vue';
+import PurchaseReceiptIndex from '@/pages/purchase-receipt/PurchaseReceiptIndex.vue';
+import PurchaseReceiptList from '@/pages/purchase-receipt/PurchaseReceiptList.vue';
+import PurchaseReceiptCreate from '@/pages/purchase-receipt/PurchaseReceiptCreate.vue';
+import PurchaseReceiptEdit from '@/pages/purchase-receipt/PurchaseReceiptEdit.vue';
+import PurchaseOrderItemIndex from '@/pages/purchase-order/PurchaseOrderItemIndex.vue';
+import PurchaseOrderItemList from '@/pages/purchase-order/PurchaseOrderItemList.vue';
+import PurchaseOrderDownPaymentIndex from '@/pages/purchase-order/PurchaseOrderDownPaymentIndex.vue';
+import PurchaseOrderDownPaymentList from '@/pages/purchase-order/PurchaseOrderDownPaymentList.vue';
+import PurchaseOrderDownPaymentNotFullyAllocatedIndex from '@/pages/purchase-order/PurchaseOrderDownPaymentNotFullyAllocatedIndex.vue';
+import PurchaseOrderDownPaymentRefundIndex from '@/pages/purchase-order/PurchaseOrderDownPaymentRefundIndex.vue';
+import PurchaseOrderDownPaymentRefundList from '@/pages/purchase-order/PurchaseOrderDownPaymentRefundList.vue';
+import StockTransferIndex from '@/pages/stock-transfer/StockTransferIndex.vue';
+import StockTransferList from '@/pages/stock-transfer/StockTransferList.vue';
+import StockTransferCreate from '@/pages/stock-transfer/StockTransferCreate.vue';
+import StockTransferEdit from '@/pages/stock-transfer/StockTransferEdit.vue';
+import StockTransferItemList from '@/pages/stock-transfer/StockTransferItemList.vue';
+import StockTransferItemSerialList from '@/pages/stock-transfer/StockTransferItemSerialList.vue';
+import ProductWithRemainingStockIndex from '@/pages/product/ProductWithRemainingStockIndex.vue';
+import ProductWithRemainingStockList from '@/pages/product/ProductWithRemainingStockList.vue';
+
+
+export default [
+  // login
+  {
+    path: '/',
+    redirect: '/auth/login',
+  },
+  // home
+  {
+    path: '/home',
+    redirect: '/dashboard/main',
+  },
+  // auth
+  {
+    path: '/auth',
+    children: [
+      {
+        path: '/auth/login',
+        name: 'login',
+        component: LoginPage,
+      },
+      {
+        path: '/auth/register',
+        name: 'register',
+        component: RegisterPage,
+      },
+      {
+        path: '/auth/forgot-password',
+        name: 'forgot-password',
+        component: ForgotPasswordPage,
+      },
+      {
+        path: '/auth/reset-password',
+        name: 'reset-password',
+        component: ResetPasswordPage,
+      },
+    ],
+  },
+  // menu
+  {
+    path: '/dashboard',
+    component: Layout,
+    children: [
+      // dashboard
+      {
+        path: '/dashboard/main',
+        name: 'side-menu-dashboard-maindashboard',
+        component: MainDashboard,
+        meta: {
+          remember: true,
+        },
+      },
+      // profile
+      {
+        path: '/dashboard/profile',
+        name: 'side-menu-dashboard-profile',
+        component: ProfileView,
+        meta: {
+          remember: true,
+        },
+      },
+
+      // Company Management
+      {
+        path: '/company',
+        children: [
+          // Company
+          {
+            path: '/company',
+            name: 'side-menu-company-company',
+            redirect: '/company/list',
+            component: CompanyIndex,
+            children: [
+              {
+                path: '/company/list',
+                name: 'side-menu-company-company-list',
+                component: CompanyList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/company/create',
+                name: 'side-menu-company-company-create',
+                component: CompanyCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/company/edit/:ulid',
+                name: 'side-menu-company-company-edit',
+                component: CompanyEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Branch
+          {
+            path: '/company/branch',
+            name: 'side-menu-company-branch',
+            redirect: '/company/branch/list',
+            component: BranchIndex,
+            children: [
+              {
+                path: '/company/branch/list',
+                name: 'side-menu-company-branch-list',
+                component: BranchList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/company/branch/create',
+                name: 'side-menu-company-branch-create',
+                component: BranchCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/company/branch/edit/:ulid',
+                name: 'side-menu-company-branch-edit',
+                component: BranchEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Warehouse
+          {
+            path: '/company/warehouse',
+            name: 'side-menu-company-warehouse',
+            redirect: '/company/warehouse/list',
+            component: WarehouseIndex,
+            children: [
+              {
+                path: '/company/warehouse/list',
+                name: 'side-menu-company-warehouse-list',
+                component: WarehouseList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/company/warehouse/create',
+                name: 'side-menu-company-warehouse-create',
+                component: WarehouseCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/company/warehouse/edit/:ulid',
+                name: 'side-menu-company-warehouse-edit',
+                component: WarehouseEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Finance Management
+      {
+        path: '/finance',
+        children: [
+          // COA
+          {
+            path: '/chart-of-account',
+            children: [
+              {
+                path: '/chart-of-account',
+                name: 'side-menu-chart-of-account',
+                redirect: '/chart-of-account/list',
+                component: ChartOfAccountIndex,
+                children: [
+                  {
+                    path: '/chart-of-account/list',
+                    name: 'side-menu-chart-of-account-list',
+                    component: ChartOfAccountList,
+                    meta: {
+                      remember: true,
+                    },
+                  },
+                  {
+                    path: '/chart-of-account/create',
+                    name: 'side-menu-chart-of-account-create',
+                    component: ChartOfAccountCreate,
+                    meta: {
+                      remember: true,
+                    },
+                  },
+                  {
+                    path: '/chart-of-account/edit/:ulid',
+                    name: 'side-menu-chart-of-account-edit',
+                    component: ChartOfAccountEdit,
+                    meta: {
+                      remember: true,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+          // Journal Entry
+          {
+            path: '/journal-entry',
+            children: [
+              {
+                path: '/journal-entry',
+                name: 'side-menu-journal-entry',
+                redirect: '/journal-entry/list',
+                component: JournalEntryIndex,
+                children: [
+                  {
+                    path: '/journal-entry/list',
+                    name: 'side-menu-journal-entry-list',
+                    component: JournalEntryList,
+                    meta: {
+                      remember: true,
+                    },
+                  },
+                  {
+                    path: '/journal-entry/create',
+                    name: 'side-menu-journal-entry-create',
+                    component: JournalEntryCreate,
+                    meta: {
+                      remember: true,
+                    },
+                  },
+                  {
+                    path: '/journal-entry/edit/:ulid',
+                    name: 'side-menu-journal-entry-edit',
+                    component: JournalEntryEdit,
+                    meta: {
+                      remember: true,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+          // Investor
+          {
+            path: '/finance/investor',
+            name: 'side-menu-company-investor',
+            redirect: '/finance/investor/list',
+            component: InvestorIndex,
+            children: [
+              {
+                path: '/finance/investor/list',
+                name: 'side-menu-company-investor-list',
+                component: InvestorList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/investor/create',
+                name: 'side-menu-company-investor-create',
+                component: InvestorCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/investor/edit/:ulid',
+                name: 'side-menu-company-investor-edit',
+                component: InvestorEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Cash Account
+          {
+            path: '/finance/cash-account',
+            name: 'side-menu-finance-cash-account',
+            redirect: '/finance/cash-account/list',
+            component: CashAccountIndex,
+            children: [
+              {
+                path: '/finance/cash-account/list',
+                name: 'side-menu-finance-cash-account-list',
+                component: CashAccountList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/cash-account/create',
+                name: 'side-menu-finance-cash-account-create',
+                component: CashAccountCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/cash-account/edit/:ulid',
+                name: 'side-menu-finance-cash-account-edit',
+                component: CashAccountEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Product Management
+      {
+        path: '/product',
+        children: [
+          {
+            path: '/product/product-category',
+            name: 'side-menu-product-product-category',
+            redirect: '/product/product-category/list',
+            component: ProductCategoryIndex,
+            children: [
+              {
+                path: '/product/product-category/list',
+                name: 'side-menu-product-product-category-list',
+                component: ProductCategoryList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/product-category/create',
+                name: 'side-menu-product-product-category-create',
+                component: ProductCategoryCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/product-category/edit/:ulid',
+                name: 'side-menu-product-product-category-edit',
+                component: ProductCategoryEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/product/brand',
+            name: 'side-menu-product-brand',
+            redirect: '/product/brand/list',
+            component: BrandIndex,
+            children: [
+              {
+                path: '/product/brand/list',
+                name: 'side-menu-product-brand-list',
+                component: BrandList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/brand/create',
+                name: 'side-menu-product-brand-create',
+                component: BrandCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/brand/edit/:ulid',
+                name: 'side-menu-product-brand-edit',
+                component: BrandEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/product/unit',
+            name: 'side-menu-product-unit',
+            redirect: '/product/unit/list',
+            component: UnitIndex,
+            children: [
+              {
+                path: '/product/unit/list',
+                name: 'side-menu-product-unit-list',
+                component: UnitList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/unit/create',
+                name: 'side-menu-product-unit-create',
+                component: UnitCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/unit/edit/:ulid',
+                name: 'side-menu-product-unit-edit',
+                component: UnitEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/product/vat-profile',
+            name: 'side-menu-product-vat-profile',
+            redirect: '/product/vat-profile/list',
+            component: VatProfileIndex,
+            children: [
+              {
+                path: '/product/vat-profile/list',
+                name: 'side-menu-product-vat-profile-list',
+                component: VatProfileList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/vat-profile/create',
+                name: 'side-menu-product-vat-profile-create',
+                component: VatProfileCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/vat-profile/edit/:ulid',
+                name: 'side-menu-product-vat-profile-edit',
+                component: VatProfileEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/product',
+            name: 'side-menu-product-product',
+            redirect: '/product/list',
+            component: ProductIndex,
+            children: [
+              {
+                path: '/product/list',
+                name: 'side-menu-product-product-list',
+                component: ProductList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/create',
+                name: 'side-menu-product-product-create',
+                component: ProductCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/edit/:ulid',
+                name: 'side-menu-product-product-edit',
+                component: ProductEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/product/product-service',
+            name: 'side-menu-product-product-service',
+            redirect: '/product/product-service/list',
+            component: ProductServiceIndex,
+            children: [
+              {
+                path: '/product/product-service/list',
+                name: 'side-menu-product-product-service-list',
+                component: ProductServiceList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/product-service/create',
+                name: 'side-menu-product-product-service-create',
+                component: ProductServiceCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/product/product-service/edit/:ulid',
+                name: 'side-menu-product-product-service-edit',
+                component: ProductServiceEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Supplier
+      {
+        path: '/supplier',
+        children: [
+          {
+            path: '/supplier',
+            name: 'side-menu-supplier',
+            redirect: '/supplier/list',
+            component: SupplierIndex,
+            children: [
+              {
+                path: '/supplier/list',
+                name: 'side-menu-supplier-supplier-list',
+                component: SupplierList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/supplier/create',
+                name: 'side-menu-supplier-supplier-create',
+                component: SupplierCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/supplier/edit/:ulid',
+                name: 'side-menu-supplier-supplier-edit',
+                component: SupplierEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Customer Management
+      {
+        path: '/customer',
+        children: [
+          // Customer Group
+          {
+            path: '/customer/customer-group',
+            name: 'side-menu-customer-group',
+            redirect: '/customer/customer-group/list',
+            component: CustomerGroupIndex,
+            children: [
+              {
+                path: '/customer/customer-group/list',
+                name: 'side-menu-customer-group-list',
+                component: CustomerGroupList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/customer/customer-group/create',
+                name: 'side-menu-customer-group-create',
+                component: CustomerGroupCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/customer/customer-group/edit/:ulid',
+                name: 'side-menu-customer-group-edit',
+                component: CustomerGroupEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Customer
+          {
+            path: '/customer',
+            name: 'side-menu-customer',
+            redirect: '/customer/list',
+            component: CustomerIndex,
+            children: [
+              {
+                path: '/customer/list',
+                name: 'side-menu-customer-list',
+                component: CustomerList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/customer/create',
+                name: 'side-menu-customer-create',
+                component: CustomerCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/customer/edit/:ulid',
+                name: 'side-menu-customer-edit',
+                component: CustomerEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Stock Adjustment Category
+      {
+        path: '/stock-adjustment-category',
+        children: [
+          {
+            path: '/stock-adjustment-category',
+            name: 'side-menu-stock-adjustment-category',
+            redirect: '/stock-adjustment-category/list',
+            component: StockAdjustmentCategoryIndex,
+            children: [
+              {
+                path: '/stock-adjustment-category/list',
+                name: 'side-menu-stock-adjustment-category-list',
+                component: StockAdjustmentCategoryList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/stock-adjustment-category/create',
+                name: 'side-menu-stock-adjustment-category-create',
+                component: StockAdjustmentCategoryCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/stock-adjustment-category/edit/:ulid',
+                name: 'side-menu-stock-adjustment-category-edit',
+                component: StockAdjustmentCategoryEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Purchase Additional Cost Category
+      {
+        path: '/expense-category',
+        children: [
+          {
+            path: '/expense-category',
+            name: 'side-menu-expense-category',
+            redirect: '/expense-category/list',
+            component: ExpenseCategoryIndex,
+            children: [
+              {
+                path: '/expense-category/list',
+                name: 'side-menu-expense-category-list',
+                component: ExpenseCategoryList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/expense-category/create',
+                name: 'side-menu-expense-category-create',
+                component: ExpenseCategoryCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/expense-category/edit/:ulid',
+                name: 'side-menu-expense-category-edit',
+                component: ExpenseCategoryEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/debt-category',
+        children: [
+          {
+            path: '/debt-category',
+            name: 'side-menu-debt-category',
+            redirect: '/debt-category/list',
+            component: DebtCategoryIndex,
+            children: [
+              {
+                path: '/debt-category/list',
+                name: 'side-menu-debt-category-list',
+                component: DebtCategoryList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/debt-category/create',
+                name: 'side-menu-debt-category-create',
+                component: DebtCategoryCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/debt-category/edit/:ulid',
+                name: 'side-menu-debt-category-edit',
+                component: DebtCategoryEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/asset-category',
+        children: [
+          {
+            path: '/asset-category',
+            name: 'side-menu-asset-category',
+            redirect: '/asset-category/list',
+            component: AssetCategoryIndex,
+            children: [
+              {
+                path: '/asset-category/list',
+                name: 'side-menu-asset-category-list',
+                component: AssetCategoryList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-category/create',
+                name: 'side-menu-asset-category-create',
+                component: AssetCategoryCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-category/edit/:ulid',
+                name: 'side-menu-asset-category-edit',
+                component: AssetCategoryEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/asset-unit',
+        children: [
+          {
+            path: '/asset-unit',
+            name: 'side-menu-asset-unit',
+            redirect: '/asset-unit/list',
+            component: AssetUnitIndex,
+            children: [
+              {
+                path: '/asset-unit/list',
+                name: 'side-menu-asset-unit-list',
+                component: AssetUnitList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-unit/create',
+                name: 'side-menu-asset-unit-create',
+                component: AssetUnitCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-unit/edit/:ulid',
+                name: 'side-menu-asset-unit-edit',
+                component: AssetUnitEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/asset',
+        children: [
+          {
+            path: '/asset',
+            name: 'side-menu-asset',
+            redirect: '/asset/list',
+            component: AssetIndex,
+            children: [
+              {
+                path: '/asset/list',
+                name: 'side-menu-asset-list',
+                component: AssetList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset/create',
+                name: 'side-menu-asset-create',
+                component: AssetCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset/edit/:ulid',
+                name: 'side-menu-asset-edit',
+                component: AssetEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/receivable-category',
+        children: [
+          {
+            path: '/receivable-category',
+            name: 'side-menu-receivable-category',
+            redirect: '/receivable-category/list',
+            component: ReceivableCategoryIndex,
+            children: [
+              {
+                path: '/receivable-category/list',
+                name: 'side-menu-receivable-category-list',
+                component: ReceivableCategoryList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/receivable-category/create',
+                name: 'side-menu-receivable-category-create',
+                component: ReceivableCategoryCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/receivable-category/edit/:ulid',
+                name: 'side-menu-receivable-category-edit',
+                component: ReceivableCategoryEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/debt-creditor',
+        children: [
+          {
+            path: '/debt-creditor',
+            name: 'side-menu-debt-creditor',
+            redirect: '/debt-creditor/list',
+            component: DebtCreditorIndex,
+            children: [
+              {
+                path: '/debt-creditor/list',
+                name: 'side-menu-debt-creditor-list',
+                component: DebtCreditorList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/debt-creditor/create',
+                name: 'side-menu-debt-creditor-create',
+                component: DebtCreditorCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/debt-creditor/edit/:ulid',
+                name: 'side-menu-debt-creditor-edit',
+                component: DebtCreditorEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '/income-category',
+        children: [
+          {
+            path: '/income-category',
+            name: 'side-menu-income-category',
+            redirect: '/income-category/list',
+            component: IncomeCategoryIndex,
+            children: [
+              {
+                path: '/income-category/list',
+                name: 'side-menu-income-category-list',
+                component: IncomeCategoryList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/income-category/create',
+                name: 'side-menu-income-category-create',
+                component: IncomeCategoryCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/income-category/edit/:ulid',
+                name: 'side-menu-income-category-edit',
+                component: IncomeCategoryEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Purchase Additional Cost Category
+      {
+        path: '/purchase-additional-cost-category',
+        children: [
+          {
+            path: '/purchase-additional-cost-category',
+            name: 'side-menu-purchase-additional-cost-category',
+            redirect: '/purchase-additional-cost-category/list',
+            component: PurchaseAdditionalCostCategoryIndex,
+            children: [
+              {
+                path: '/purchase-additional-cost-category/list',
+                name: 'side-menu-purchase-additional-cost-category-list',
+                component: PurchaseAdditionalCostCategoryList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase-additional-cost-category/create',
+                name: 'side-menu-purchase-additional-cost-category-create',
+                component: PurchaseAdditionalCostCategoryCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase-additional-cost-category/edit/:ulid',
+                name: 'side-menu-purchase-additional-cost-category-edit',
+                component: PurchaseAdditionalCostCategoryEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Purchase Additional Cost
+      {
+        path: '/purchase-additional-cost',
+        children: [
+          {
+            path: '/purchase-additional-cost',
+            name: 'side-menu-purchase-additional-cost',
+            redirect: '/purchase-additional-cost/list',
+            component: PurchaseAdditionalCostIndex,
+            children: [
+              {
+                path: '/purchase-additional-cost/list',
+                name: 'side-menu-purchase-additional-cost-list',
+                component: PurchaseAdditionalCostList,
+                meta: { remember: true },
+              },
+              {
+                path: '/purchase-additional-cost/create',
+                name: 'side-menu-purchase-additional-cost-create',
+                component: PurchaseAdditionalCostCreate,
+                meta: { remember: true },
+              },
+              {
+                path: '/purchase-additional-cost/edit/:ulid',
+                name: 'side-menu-purchase-additional-cost-edit',
+                component: PurchaseAdditionalCostEdit,
+                meta: { remember: true },
+              },
+            ],
+          },
+        ],
+      },
+      // Purchase Additional Cost Payment
+      {
+        path: '/purchase-additional-cost-payment',
+        children: [
+          {
+            path: '/purchase-additional-cost-payment',
+            name: 'side-menu-purchase-additional-cost-payment',
+            redirect: '/purchase-additional-cost-payment/list',
+            component: PurchaseAdditionalCostPaymentIndex,
+            children: [
+              {
+                path: '/purchase-additional-cost-payment/list',
+                name: 'side-menu-purchase-additional-cost-payment-list',
+                component: PurchaseAdditionalCostPaymentList,
+                meta: { remember: true },
+              },
+              {
+                path: '/purchase-additional-cost-payment/create',
+                name: 'side-menu-purchase-additional-cost-payment-create',
+                component: PurchaseAdditionalCostPaymentCreate,
+                meta: { remember: true },
+              },
+              {
+                path: '/purchase-additional-cost-payment/edit/:ulid',
+                name: 'side-menu-purchase-additional-cost-payment-edit',
+                component: PurchaseAdditionalCostPaymentEdit,
+                meta: { remember: true },
+              },
+            ],
+          },
+        ],
+      },
+      // Transaction
+      {
+        path: '/transaction',
+        name: 'side-menu-transaction',
+        children: [
+          // Stock Adjustment
+          {
+            path: '/stock-adjustment',
+            name: 'side-menu-stock-adjustment',
+            redirect: '/stock-adjustment/list',
+            component: StockAdjustmentIndex,
+            children: [
+              {
+                path: '/stock-adjustment/list',
+                name: 'side-menu-stock-adjustment-list',
+                component: StockAdjustmentList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/stock-adjustment/create',
+                name: 'side-menu-stock-adjustment-create',
+                component: StockAdjustmentCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/stock-adjustment/edit/:ulid',
+                name: 'side-menu-stock-adjustment-edit',
+                component: StockAdjustmentEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Asset Adjustment
+          {
+            path: '/asset-adjustment',
+            name: 'side-menu-asset-adjustment',
+            redirect: '/asset-adjustment/list',
+            component: AssetAdjustmentIndex,
+            children: [
+              {
+                path: '/asset-adjustment/list',
+                name: 'side-menu-asset-adjustment-list',
+                component: AssetAdjustmentList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-adjustment/create',
+                name: 'side-menu-asset-adjustment-create',
+                component: AssetAdjustmentCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-adjustment/edit/:ulid',
+                name: 'side-menu-asset-adjustment-edit',
+                component: AssetAdjustmentEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/asset-purchase',
+            name: 'side-menu-asset-purchase',
+            redirect: '/asset-purchase/list',
+            component: AssetPurchaseIndex,
+            children: [
+              {
+                path: '/asset-purchase/list',
+                name: 'side-menu-asset-purchase-list',
+                component: AssetPurchaseList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-purchase/create',
+                name: 'side-menu-asset-purchase-create',
+                component: AssetPurchaseCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-purchase/edit/:ulid',
+                name: 'side-menu-asset-purchase-edit',
+                component: AssetPurchaseEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/asset-sale',
+            name: 'side-menu-asset-sale',
+            redirect: '/asset-sale/list',
+            component: AssetSaleIndex,
+            children: [
+              {
+                path: '/asset-sale/list',
+                name: 'side-menu-asset-sale-list',
+                component: AssetSaleList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-sale/create',
+                name: 'side-menu-asset-sale-create',
+                component: AssetSaleCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/asset-sale/edit/:ulid',
+                name: 'side-menu-asset-sale-edit',
+                component: AssetSaleEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Purchase Order
+          {
+            path: '/purchase-order',
+            name: 'side-menu-purchase-order',
+            redirect: '/purchase-order/list',
+            component: PurchaseOrderIndex,
+            children: [
+              {
+                path: '/purchase-order/list',
+                name: 'side-menu-purchase-order-list',
+                component: PurchaseOrderList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase-order/create',
+                name: 'side-menu-purchase-order-create',
+                component: PurchaseOrderCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase-order/edit/:ulid',
+                name: 'side-menu-purchase-order-edit',
+                component: PurchaseOrderEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/purchase',
+            name: 'side-menu-purchase',
+            redirect: '/purchase/list',
+            component: PurchaseIndex,
+            children: [
+              {
+                path: '/purchase/list',
+                name: 'side-menu-purchase-list',
+                component: PurchaseList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase/create',
+                name: 'side-menu-purchase-create',
+                redirect: '/purchase/create/manual',
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase/create/direct',
+                name: 'side-menu-purchase-create-direct',
+                component: PurchaseCreateDirect,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase/create/manual',
+                name: 'side-menu-purchase-create-manual',
+                component: PurchaseCreateManual,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase/edit/direct/:ulid',
+                name: 'side-menu-purchase-edit-direct',
+                component: PurchaseEditDirect,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase/edit/manual/:ulid',
+                name: 'side-menu-purchase-edit-manual',
+                component: PurchaseEditManual,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/purchase-receipt',
+            name: 'side-menu-purchase-receipt',
+            redirect: '/purchase-receipt/list',
+            component: PurchaseReceiptIndex,
+            children: [
+              {
+                path: '/purchase-receipt/list',
+                name: 'side-menu-purchase-receipt-list',
+                component: PurchaseReceiptList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase-receipt/create',
+                name: 'side-menu-purchase-receipt-create',
+                component: PurchaseReceiptCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/purchase-receipt/edit/:ulid',
+                name: 'side-menu-purchase-receipt-edit',
+                component: PurchaseReceiptEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/purchase-order-item',
+            name: 'side-menu-purchase-order-item',
+            redirect: '/purchase-order-item/list',
+            component: PurchaseOrderItemIndex,
+            children: [
+              {
+                path: '/purchase-order-item/list',
+                name: 'side-menu-purchase-order-item-list',
+                component: PurchaseOrderItemList,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/purchase-order-down-payment',
+            name: 'side-menu-purchase-order-down-payment',
+            redirect: '/purchase-order-down-payment/list',
+            component: PurchaseOrderDownPaymentIndex,
+            children: [
+              {
+                path: '/purchase-order-down-payment/list',
+                name: 'side-menu-purchase-order-down-payment-list',
+                component: PurchaseOrderDownPaymentList,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/purchase-order-down-payment-not-fully-allocated',
+            name: 'side-menu-purchase-order-down-payment-not-fully-allocated',
+            component: PurchaseOrderDownPaymentNotFullyAllocatedIndex,
+            meta: {
+              remember: true,
+            },
+          },
+          {
+            path: '/purchase-order-down-payment-refund',
+            name: 'side-menu-purchase-order-down-payment-refund',
+            redirect: '/purchase-order-down-payment-refund/list',
+            component: PurchaseOrderDownPaymentRefundIndex,
+            children: [
+              {
+                path: '/purchase-order-down-payment-refund/list',
+                name: 'side-menu-purchase-order-down-payment-refund-list',
+                component: PurchaseOrderDownPaymentRefundList,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Capital Opening
+          {
+            path: '/finance/capital-opening',
+            name: 'side-menu-finance-capital-opening',
+            redirect: '/finance/capital-opening/list',
+            component: CapitalOpeningIndex,
+            children: [
+              {
+                path: '/finance/capital-opening/list',
+                name: 'side-menu-finance-capital-opening-list',
+                component: CapitalOpeningList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/capital-opening/create',
+                name: 'side-menu-finance-capital-opening-create',
+                component: CapitalOpeningCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/capital-opening/edit/:ulid',
+                name: 'side-menu-finance-capital-opening-edit',
+                component: CapitalOpeningEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Capital Transaction
+          {
+            path: '/finance/capital-transaction',
+            name: 'side-menu-finance-capital-transaction',
+            redirect: '/finance/capital-transaction/list',
+            component: CapitalTransactionIndex,
+            children: [
+              {
+                path: '/finance/capital-transaction/list',
+                name: 'side-menu-finance-capital-transaction-list',
+                component: CapitalTransactionList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/capital-transaction/create',
+                name: 'side-menu-finance-capital-transaction-create',
+                component: CapitalTransactionCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/capital-transaction/edit/:ulid',
+                name: 'side-menu-finance-capital-transaction-edit',
+                component: CapitalTransactionEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Cash Account Transfer
+          {
+            path: '/finance/cash-transfer',
+            name: 'side-menu-finance-cash-transfer',
+            redirect: '/finance/cash-transfer/list',
+            component: CashTransferIndex,
+            children: [
+              {
+                path: '/finance/cash-transfer/list',
+                name: 'side-menu-finance-cash-transfer-list',
+                component: CashTransferList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/cash-transfer/create',
+                name: 'side-menu-finance-cash-transfer-create',
+                component: CashTransferCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/finance/cash-transfer/edit/:ulid',
+                name: 'side-menu-finance-cash-transfer-edit',
+                component: CashTransferEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Expense
+          {
+            path: '/expense',
+            name: 'side-menu-expense',
+            redirect: '/expense/list',
+            component: ExpenseIndex,
+            children: [
+              {
+                path: '/expense/list',
+                name: 'side-menu-expense-list',
+                component: ExpenseList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/expense/create',
+                name: 'side-menu-expense-create',
+                component: ExpenseCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/expense/edit/:ulid',
+                name: 'side-menu-expense-edit',
+                component: ExpenseEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Debt
+          {
+            path: '/debt',
+            name: 'side-menu-debt',
+            redirect: '/debt/list',
+            component: DebtIndex,
+            children: [
+              {
+                path: '/debt/list',
+                name: 'side-menu-debt-list',
+                component: DebtList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/debt/create',
+                name: 'side-menu-debt-create',
+                component: DebtCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/debt/edit/:ulid',
+                name: 'side-menu-debt-edit',
+                component: DebtEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Prepaid Expense
+          {
+            path: '/prepaid-expense',
+            name: 'side-menu-prepaid-expense',
+            redirect: '/prepaid-expense/list',
+            component: PrepaidExpenseIndex,
+            children: [
+              {
+                path: '/prepaid-expense/list',
+                name: 'side-menu-prepaid-expense-list',
+                component: PrepaidExpenseList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/prepaid-expense/create',
+                name: 'side-menu-prepaid-expense-create',
+                component: PrepaidExpenseCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/prepaid-expense/edit/:ulid',
+                name: 'side-menu-prepaid-expense-edit',
+                component: PrepaidExpenseEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Expense Payment
+          {
+            path: '/expense-payment',
+            name: 'side-menu-expense-payment',
+            redirect: '/expense-payment/list',
+            component: ExpensePaymentIndex,
+            children: [
+              {
+                path: '/expense-payment/list',
+                name: 'side-menu-expense-payment-list',
+                component: ExpensePaymentList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/expense-payment/create',
+                name: 'side-menu-expense-payment-create',
+                component: ExpensePaymentCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/expense-payment/edit/:ulid',
+                name: 'side-menu-expense-payment-edit',
+                component: ExpensePaymentEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/income',
+            name: 'side-menu-income',
+            redirect: '/income/list',
+            component: IncomeIndex,
+            children: [
+              {
+                path: '/income/list',
+                name: 'side-menu-income-list',
+                component: IncomeList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/income/create',
+                name: 'side-menu-income-create',
+                component: IncomeCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/income/edit/:ulid',
+                name: 'side-menu-income-edit',
+                component: IncomeEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/receivable',
+            name: 'side-menu-receivable',
+            redirect: '/receivable/list',
+            component: ReceivableIndex,
+            children: [
+              {
+                path: '/receivable/list',
+                name: 'side-menu-receivable-list',
+                component: ReceivableList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/receivable/create',
+                name: 'side-menu-receivable-create',
+                component: ReceivableCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/receivable/edit/:ulid',
+                name: 'side-menu-receivable-edit',
+                component: ReceivableEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/prepaid-income',
+            name: 'side-menu-prepaid-income',
+            redirect: '/prepaid-income/list',
+            component: PrepaidIncomeIndex,
+            children: [
+              {
+                path: '/prepaid-income/list',
+                name: 'side-menu-prepaid-income-list',
+                component: PrepaidIncomeList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/prepaid-income/create',
+                name: 'side-menu-prepaid-income-create',
+                component: PrepaidIncomeCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/prepaid-income/edit/:ulid',
+                name: 'side-menu-prepaid-income-edit',
+                component: PrepaidIncomeEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          {
+            path: '/income-payment',
+            name: 'side-menu-income-payment',
+            redirect: '/income-payment/list',
+            component: IncomePaymentIndex,
+            children: [
+              {
+                path: '/income-payment/list',
+                name: 'side-menu-income-payment-list',
+                component: IncomePaymentList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/income-payment/create',
+                name: 'side-menu-income-payment-create',
+                component: IncomePaymentCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/income-payment/edit/:ulid',
+                name: 'side-menu-income-payment-edit',
+                component: IncomePaymentEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+
+          // Stock Transfer
+          {
+            path: '/stock-transfer',
+            name: 'side-menu-stock-transfer',
+            redirect: '/stock-transfer/list',
+            component: StockTransferIndex,
+            children: [
+              {
+                path: '/stock-transfer/list',
+                name: 'side-menu-stock-transfer-list',
+                component: StockTransferList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/stock-transfer/create',
+                name: 'side-menu-stock-transfer-create',
+                component: StockTransferCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/stock-transfer/edit/:ulid',
+                name: 'side-menu-stock-transfer-edit',
+                component: StockTransferEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Stock Adjustment In Item
+          {
+            path: '/stock-adjustment-in-item',
+            name: 'side-menu-stock-adjustment-in-item',
+            redirect: '/stock-adjustment-in-item/list',
+            component: StockAdjustmentInItemIndex,
+            children: [
+              {
+                path: '/stock-adjustment-in-item/list',
+                name: 'side-menu-stock-adjustment-in-item-list',
+                component: StockAdjustmentInItemList,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Stock Adjustment In Item Serial
+          {
+            path: '/stock-adjustment-in-item-serial',
+            name: 'side-menu-stock-adjustment-in-item-serial',
+            redirect: '/stock-adjustment-in-item-serial/list',
+            component: StockAdjustmentInItemSerialIndex,
+            children: [
+              {
+                path: '/stock-adjustment-in-item-serial/list',
+                name: 'side-menu-stock-adjustment-in-item-serial-list',
+                component: StockAdjustmentInItemSerialList,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Stock Adjustment Out Item
+          {
+            path: '/stock-adjustment-out-item',
+            name: 'side-menu-stock-adjustment-out-item',
+            redirect: '/stock-adjustment-out-item/list',
+            component: StockAdjustmentOutItemIndex,
+            children: [
+              {
+                path: '/stock-adjustment-out-item/list',
+                name: 'side-menu-stock-adjustment-out-item-list',
+                component: StockAdjustmentOutItemList,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Stock Adjustment Out Item Serial
+          {
+            path: '/stock-adjustment-out-item-serial',
+            name: 'side-menu-stock-adjustment-out-item-serial',
+            redirect: '/stock-adjustment-out-item-serial/list',
+            component: StockAdjustmentOutItemSerialIndex,
+            children: [
+              {
+                path: '/stock-adjustment-out-item-serial/list',
+                name: 'side-menu-stock-adjustment-out-item-serial-list',
+                component: StockAdjustmentOutItemSerialList,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+          // Stock Transfer Product Unit
+          {
+            path: '/stock-transfer-item',
+            name: 'side-menu-stock-transfer-item',
+            component: StockTransferItemList,
+            meta: {
+              remember: true,
+            },
+          },
+          // Stock Transfer Product Unit Serial
+          {
+            path: '/stock-transfer-item-serial',
+            name: 'side-menu-stock-transfer-item-serial',
+            component: StockTransferItemSerialList,
+            meta: {
+              remember: true,
+            },
+          },
+        ],
+      },
+
+      // Cash Account With Remaining Balance
+      {
+        path: '/finance/cash-account-with-remaining-balance',
+        name: 'side-menu-cash-account-with-remaining-balance',
+        redirect: '/finance/cash-account-with-remaining-balance/list',
+        component: CashAccountWithRemainingBalanceIndex,
+        children: [
+          {
+            path: '/finance/cash-account-with-remaining-balance/list',
+            name: 'side-menu-cash-account-with-remaining-balance-list',
+            component: CashAccountWithRemainingBalanceList,
+            meta: {
+              remember: true,
+            },
+          },
+        ],
+      },
+      // Product With Remaining Stock
+      {
+        path: '/product/product-with-remaining-stock',
+        name: 'side-menu-product-with-remaining-stock',
+        redirect: '/product/product-with-remaining-stock/list',
+        component: ProductWithRemainingStockIndex,
+        children: [
+          {
+            path: '/product/product-with-remaining-stock/list',
+            name: 'side-menu-product-with-remaining-stock-list',
+            component: ProductWithRemainingStockList,
+            meta: {
+              remember: true,
+            },
+          },
+        ],
+      },
+      // Journal Entry Detail Report
+      {
+        path: '/report/balance-sheet',
+        name: 'side-menu-report-balance-sheet',
+        redirect: '/report/balance-sheet/list',
+        component: BalanceSheetIndex,
+        children: [
+          {
+            path: '/report/balance-sheet/list',
+            name: 'side-menu-report-balance-sheet-list',
+            component: BalanceSheetList,
+            meta: {
+              remember: true,
+            },
+          },
+        ],
+      },
+      // Journal Entry Detail Report
+      {
+        path: '/report/journal-entry-detail',
+        name: 'side-menu-report-journal-entry-detail',
+        redirect: '/report/journal-entry-detail/list',
+        component: JournalEntryDetailIndex,
+        children: [
+          {
+            path: '/report/journal-entry-detail/list',
+            name: 'side-menu-report-journal-entry-detail-list',
+            component: JournalEntryDetailList,
+            meta: {
+              remember: true,
+            },
+          },
+        ],
+      },
+      // user
+      {
+        path: '/administrator',
+        name: 'side-menu-administrator',
+        children: [
+          {
+            path: '/administrator/user',
+            name: 'side-menu-administrator-user',
+            redirect: '/administrator/user/list',
+            component: UserIndex,
+            children: [
+              {
+                path: '/administrator/user/list',
+                name: 'side-menu-administrator-user-list',
+                component: UserList,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/administrator/user/create',
+                name: 'side-menu-administrator-user-create',
+                component: UserCreate,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/administrator/user/edit/:ulid',
+                name: 'side-menu-administrator-user-edit',
+                component: UserEdit,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // devtool
+      {
+        path: '/devtool',
+        name: 'side-menu-devtool',
+        children: [
+          {
+            path: '/devtool',
+            name: 'side-menu-devtool-devtool',
+            component: DevTool,
+            meta: {
+              remember: false,
+            },
+          },
+          {
+            path: '/devtool/playground',
+            name: 'side-menu-devtool-playground',
+            children: [
+              {
+                path: '/devtool/playground/p1',
+                name: 'side-menu-devtool-playground-p1',
+                component: PlayOne,
+                meta: {
+                  remember: true,
+                },
+              },
+              {
+                path: '/devtool/playground/p2',
+                name: 'side-menu-devtool-playground-p2',
+                component: PlayTwo,
+                meta: {
+                  remember: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // error
+      {
+        path: '/error' + '/:code',
+        name: 'side-menu-error-code',
+        component: ErrorView,
+        meta: {
+          remember: false,
+        },
+      },
+    ],
+  },
+  // not found
+  {
+    path: '/:pathMatch(.*)*',
+    component: ErrorPage,
+    meta: {
+      remember: false,
+    },
+  },
+  // error page
+  {
+    path: '/error-page',
+    name: 'error-page',
+    component: ErrorPage,
+    meta: {
+      remember: false,
+    },
+  },
+];
+
diff --git a/web/src/services/AssetAdjustmentService.ts b/web/src/services/AssetAdjustmentService.ts
new file mode 100644
index 000000000..5d23d56df
--- /dev/null
+++ b/web/src/services/AssetAdjustmentService.ts
@@ -0,0 +1,222 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { Config, route } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { AssetAdjustment } from '../types/models/AssetAdjustment';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type AssetAdjustmentReadAnyGetRequest,
+  type AssetAdjustmentReadAnyPaginateRequest,
+  type AssetAdjustmentStoreRequest,
+  type AssetAdjustmentUpdateRequest,
+} from '../types/services/asset-adjustment/AssetAdjustmentRequest';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class AssetAdjustmentService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useAssetAdjustmentCreateForm() {
+    const url = route('api.post.asset_adjustment.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      remarks: '',
+      is_posted: true,
+      in_items: [] as AssetAdjustmentStoreRequest['in_items'],
+      out_items: [] as AssetAdjustmentStoreRequest['out_items'],
+    });
+  }
+
+  public useAssetAdjustmentEditForm(ulid: string) {
+    const url = route(
+      'api.post.asset_adjustment.edit',
+      { asset_adjustment: ulid },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      remarks: '',
+      is_posted: false,
+      delete_in_item_ids: [] as AssetAdjustmentUpdateRequest['delete_in_item_ids'],
+      in_items: [] as AssetAdjustmentUpdateRequest['in_items'],
+      delete_out_item_ids: [] as AssetAdjustmentUpdateRequest['delete_out_item_ids'],
+      out_items: [] as AssetAdjustmentUpdateRequest['out_items'],
+    });
+  }
+
+  public async readAnyPaginate(
+    args: AssetAdjustmentReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<AssetAdjustment>> | null>> {
+    const result: ServiceResponse<Collection<Array<AssetAdjustment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        branch_id: args.branch_id,
+        search: args.search,
+        start_date: args.start_date,
+        end_date: args.end_date,
+        refresh: args.refresh,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      const url = route(
+        'api.get.asset_adjustment.read_any',
+        { _query: queryParams },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<AssetAdjustment>>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: AssetAdjustmentReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<AssetAdjustment>> | null>> {
+    const result: ServiceResponse<Resource<Array<AssetAdjustment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        branch_id: args.branch_id,
+        search: args.search,
+        start_date: args.start_date,
+        end_date: args.end_date,
+        refresh: args.refresh,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      const url = route(
+        'api.get.asset_adjustment.read_any',
+        { _query: queryParams },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<AssetAdjustment>>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<AssetAdjustment | null>> {
+    const result: ServiceResponse<AssetAdjustment | null> = { success: false };
+
+    try {
+      const url = route(
+        'api.get.asset_adjustment.read',
+        { asset_adjustment: ulid },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<AssetAdjustment>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route(
+        'api.post.asset_adjustment.delete',
+        { asset_adjustment: ulid },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/AssetCategoryService.ts b/web/src/services/AssetCategoryService.ts
new file mode 100644
index 000000000..29494de95
--- /dev/null
+++ b/web/src/services/AssetCategoryService.ts
@@ -0,0 +1,237 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AssetCategory } from '../types/models/AssetCategory';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  AssetCategoryReadAnyPaginateRequest,
+  AssetCategoryReadAnyGetRequest,
+} from '../types/services/asset-category/AssetCategoryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class AssetCategoryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useAssetCategoryCreateForm() {
+    const url = route('api.post.asset_category.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      estimated_useful_life_months: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: AssetCategoryReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<AssetCategory>> | null>> {
+    const result: ServiceResponse<Collection<Array<AssetCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.asset_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<AssetCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: AssetCategoryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<AssetCategory>> | null>> {
+    const result: ServiceResponse<Resource<Array<AssetCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.asset_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<AssetCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<AssetCategory | null>> {
+    const result: ServiceResponse<AssetCategory | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.asset_category.read',
+        {
+          asset_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<AssetCategory>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useAssetCategoryEditForm(ulid: string) {
+    const url = route(
+      'api.post.asset_category.edit',
+      {
+        asset_category: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      estimated_useful_life_months: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.asset_category.delete',
+        {
+          asset_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/AssetPurchaseService.ts b/web/src/services/AssetPurchaseService.ts
new file mode 100644
index 000000000..d06121b82
--- /dev/null
+++ b/web/src/services/AssetPurchaseService.ts
@@ -0,0 +1,198 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { Config, route } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { AssetPurchase } from '../types/models/AssetPurchase';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type AssetPurchaseReadAnyGetRequest,
+  type AssetPurchaseReadAnyPaginateRequest,
+  type AssetPurchaseStoreRequest,
+  type AssetPurchaseUpdateRequest,
+} from '../types/services/asset-purchase/AssetPurchaseRequest';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class AssetPurchaseService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useAssetPurchaseCreateForm() {
+    const url = route('api.post.asset_purchase.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      due_days: 0,
+      supplier_id: null,
+      remarks: '',
+      is_posted: true,
+      additional_cost: 0,
+      rounding: 0,
+      items: [] as AssetPurchaseStoreRequest['items'],
+    });
+  }
+
+  public useAssetPurchaseEditForm(ulid: string) {
+    const url = route('api.post.asset_purchase.edit', { asset_purchase: ulid }, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      due_days: 0,
+      supplier_id: null,
+      remarks: '',
+      is_posted: false,
+      additional_cost: 0,
+      rounding: 0,
+      delete_item_ids: [] as AssetPurchaseUpdateRequest['delete_item_ids'],
+      items: [] as AssetPurchaseUpdateRequest['items'],
+    });
+  }
+
+  public async readAnyPaginate(
+    args: AssetPurchaseReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<AssetPurchase>> | null>> {
+    const result: ServiceResponse<Collection<Array<AssetPurchase>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        branch_id: args.branch_id,
+        search: args.search,
+        start_date: args.start_date,
+        end_date: args.end_date,
+        refresh: args.refresh,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      const url = route('api.get.asset_purchase.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<AssetPurchase>>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: AssetPurchaseReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<AssetPurchase>> | null>> {
+    const result: ServiceResponse<Resource<Array<AssetPurchase>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        branch_id: args.branch_id,
+        search: args.search,
+        start_date: args.start_date,
+        end_date: args.end_date,
+        refresh: args.refresh,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      const url = route('api.get.asset_purchase.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<AssetPurchase>>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<AssetPurchase | null>> {
+    const result: ServiceResponse<AssetPurchase | null> = { success: false };
+
+    try {
+      const url = route('api.get.asset_purchase.read', { asset_purchase: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<AssetPurchase>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.asset_purchase.delete', { asset_purchase: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/AssetSaleService.ts b/web/src/services/AssetSaleService.ts
new file mode 100644
index 000000000..9abdbdf94
--- /dev/null
+++ b/web/src/services/AssetSaleService.ts
@@ -0,0 +1,196 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { Config, route } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { AssetSale } from '../types/models/AssetSale';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type AssetSaleReadAnyGetRequest,
+  type AssetSaleReadAnyPaginateRequest,
+  type AssetSaleStoreRequest,
+  type AssetSaleUpdateRequest,
+} from '../types/services/asset-sale/AssetSaleRequest';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class AssetSaleService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useAssetSaleCreateForm() {
+    const url = route('api.post.asset_sale.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      due_days: 0,
+      customer_id: null,
+      remarks: '',
+      is_posted: true,
+      rounding: 0,
+      items: [] as AssetSaleStoreRequest['items'],
+    });
+  }
+
+  public useAssetSaleEditForm(ulid: string) {
+    const url = route('api.post.asset_sale.edit', { asset_sale: ulid }, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      due_days: 0,
+      customer_id: null,
+      remarks: '',
+      is_posted: false,
+      rounding: 0,
+      delete_item_ids: [] as AssetSaleUpdateRequest['delete_item_ids'],
+      items: [] as AssetSaleUpdateRequest['items'],
+    });
+  }
+
+  public async readAnyPaginate(
+    args: AssetSaleReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<AssetSale>> | null>> {
+    const result: ServiceResponse<Collection<Array<AssetSale>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        branch_id: args.branch_id,
+        search: args.search,
+        start_date: args.start_date,
+        end_date: args.end_date,
+        refresh: args.refresh,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      const url = route('api.get.asset_sale.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<AssetSale>>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: AssetSaleReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<AssetSale>> | null>> {
+    const result: ServiceResponse<Resource<Array<AssetSale>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        branch_id: args.branch_id,
+        search: args.search,
+        start_date: args.start_date,
+        end_date: args.end_date,
+        refresh: args.refresh,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      const url = route('api.get.asset_sale.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<AssetSale>>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<AssetSale | null>> {
+    const result: ServiceResponse<AssetSale | null> = { success: false };
+
+    try {
+      const url = route('api.get.asset_sale.read', { asset_sale: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<AssetSale>> = await axios.get(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.asset_sale.delete', { asset_sale: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status === StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/AssetService.ts b/web/src/services/AssetService.ts
new file mode 100644
index 000000000..fef842bf5
--- /dev/null
+++ b/web/src/services/AssetService.ts
@@ -0,0 +1,240 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Asset } from '../types/models/Asset';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { AssetReadAnyPaginateRequest, AssetReadAnyGetRequest } from '../types/services/asset/AssetRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class AssetService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useAssetCreateForm() {
+    const url = route('api.post.asset.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      asset_category_id: '',
+      code: '_AUTO_',
+      name: '',
+      asset_unit_id: '',
+      status: 1,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: AssetReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Asset>> | null>> {
+    const result: ServiceResponse<Collection<Array<Asset>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.asset_category_id) queryParams['asset_category_id'] = args.asset_category_id;
+      if (args.asset_unit_id) queryParams['asset_unit_id'] = args.asset_unit_id;
+      if (args.status !== undefined && args.status !== null && args.status !== '') queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.asset.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Asset>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: AssetReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Asset>> | null>> {
+    const result: ServiceResponse<Resource<Array<Asset>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.asset_category_id) queryParams['asset_category_id'] = args.asset_category_id;
+      if (args.asset_unit_id) queryParams['asset_unit_id'] = args.asset_unit_id;
+      if (args.status !== undefined && args.status !== null && args.status !== '') queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.asset.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Asset>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Asset | null>> {
+    const result: ServiceResponse<Asset | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.asset.read',
+        {
+          asset: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Asset>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useAssetEditForm(ulid: string) {
+    const url = route(
+      'api.post.asset.edit',
+      {
+        asset: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      asset_category_id: '',
+      code: '_AUTO_',
+      name: '',
+      asset_unit_id: '',
+      status: 1,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.asset.delete',
+        {
+          asset: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/AssetUnitService.ts b/web/src/services/AssetUnitService.ts
new file mode 100644
index 000000000..adc917691
--- /dev/null
+++ b/web/src/services/AssetUnitService.ts
@@ -0,0 +1,233 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AssetUnit } from '../types/models/AssetUnit';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  AssetUnitReadAnyPaginateRequest,
+  AssetUnitReadAnyGetRequest,
+} from '../types/services/asset-unit/AssetUnitRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class AssetUnitService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useAssetUnitCreateForm() {
+    const url = route('api.post.asset_unit.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      description: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: AssetUnitReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<AssetUnit>> | null>> {
+    const result: ServiceResponse<Collection<Array<AssetUnit>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.asset_unit.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<AssetUnit>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: AssetUnitReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<AssetUnit>> | null>> {
+    const result: ServiceResponse<Resource<Array<AssetUnit>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.asset_unit.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<AssetUnit>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<AssetUnit | null>> {
+    const result: ServiceResponse<AssetUnit | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.asset_unit.read',
+        {
+          asset_unit: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<AssetUnit>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useAssetUnitEditForm(ulid: string) {
+    const url = route(
+      'api.post.asset_unit.edit',
+      {
+        asset_unit: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      description: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.asset_unit.delete',
+        {
+          asset_unit: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/AuthServices.ts b/web/src/services/AuthServices.ts
index b1d46b173..4b06c44c4 100644
--- a/web/src/services/AuthServices.ts
+++ b/web/src/services/AuthServices.ts
@@ -1,92 +1,94 @@
-import { client, useForm } from "laravel-precognition-vue";
-import { authAxiosInstance } from "../axios";
-
-export default class AuthService {
-    public async ensureCSRF(): Promise<void> {
-        let resultXSRF = await this.checkCookieExists('XSRF-TOKEN');
-
-        if (resultXSRF) return;
-
-        await this.generateCSRF();
-    }
-
-    private checkCookieExists = (cookieName: string): Promise<boolean> => {
-        return new Promise<boolean>((resolve) => {
-            const cookies = document.cookie.split('; ');
-
-            for (const cookie of cookies) {
-                const [name] = cookie.split('=');
-                if (name === cookieName) {
-                    resolve(true);
-                    return;
-                }
-            }
-
-            resolve(false);
-        });
-    };
-
-    public async generateCSRF(): Promise<void> {
-        await authAxiosInstance.get('/sanctum/csrf-cookie');
-    }
-
-    public useLoginForm() {
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', import.meta.env.VITE_BACKEND_URL + '/login', {
-            email: '',
-            password: '',
-            remember: false,
-        });
-
-        return form;
-    }
-
-    public useTwoFactorLoginForm() {
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', import.meta.env.VITE_BACKEND_URL + '/two-factor-challenge', {
-            code: '',
-            recovery_code: '',
-        });
-
-        return form;
-    }
-
-    public useRegisterForm() {
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', import.meta.env.VITE_BACKEND_URL + '/register', {
-            name: '',
-            email: '',
-            password: '',
-            password_confirmation: '',
-            terms: false,
-        });
-
-        return form;
-    }
-
-    public useRequestResetPasswordForm() {
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', import.meta.env.VITE_BACKEND_URL + '/forgot-password', {
-            email: '',
-        });
-
-        return form;
-    }
-
-    public useResetPasswordForm() {
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', import.meta.env.VITE_BACKEND_URL + '/reset-password', {
-            email: '',
-            token: '',
-            password: '',
-            password_confirmation: '',
-        });
-
-        return form;
-    }
-}
\ No newline at end of file
+import { client, useForm } from 'laravel-precognition-vue';
+import { authAxiosInstance } from '../axios';
+import { getBackendUrl } from '@/utils/config';
+
+export default class AuthService {
+  public async ensureCSRF(): Promise<void> {
+    let resultXSRF = await this.checkCookieExists('XSRF-TOKEN');
+
+    if (resultXSRF) return;
+
+    await this.generateCSRF();
+  }
+
+  private checkCookieExists = (cookieName: string): Promise<boolean> => {
+    return new Promise<boolean>((resolve) => {
+      const cookies = document.cookie.split('; ');
+
+      for (const cookie of cookies) {
+        const [name] = cookie.split('=');
+        if (name === cookieName) {
+          resolve(true);
+          return;
+        }
+      }
+
+      resolve(false);
+    });
+  };
+
+  public async generateCSRF(): Promise<void> {
+    await authAxiosInstance.get('/sanctum/csrf-cookie');
+  }
+
+  public useLoginForm() {
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    client.axios().defaults.headers.common['X-Timezone'] = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const form = useForm('post', getBackendUrl() + '/login', {
+      email: '',
+      password: '',
+      remember: false,
+    });
+
+    return form;
+  }
+
+  public useTwoFactorLoginForm() {
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', getBackendUrl() + '/two-factor-challenge', {
+      code: '',
+      recovery_code: '',
+    });
+
+    return form;
+  }
+
+  public useRegisterForm() {
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', getBackendUrl() + '/register', {
+      name: '',
+      email: '',
+      password: '',
+      password_confirmation: '',
+      terms: false,
+    });
+
+    return form;
+  }
+
+  public useRequestResetPasswordForm() {
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', getBackendUrl() + '/forgot-password', {
+      email: '',
+    });
+
+    return form;
+  }
+
+  public useResetPasswordForm() {
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', getBackendUrl() + '/reset-password', {
+      email: '',
+      token: '',
+      password: '',
+      password_confirmation: '',
+    });
+
+    return form;
+  }
+}
diff --git a/web/src/services/BranchService.ts b/web/src/services/BranchService.ts
index 2f8f86344..a43a2aff5 100644
--- a/web/src/services/BranchService.ts
+++ b/web/src/services/BranchService.ts
@@ -1,159 +1,225 @@
-import axios from "../axios";
-import { useZiggyRouteStore } from "../stores/ziggy-route";
-import { route, Config } from "ziggy-js";
-import { Branch } from "../types/models/Branch";
-import { Resource } from "../types/resources/Resource";
-import { Collection } from "../types/resources/Collection";
-import { ServiceResponse } from "../types/services/ServiceResponse";
-import { AxiosError, AxiosResponse, isAxiosError } from "axios";
-import ErrorHandlerService from "./ErrorHandlerService";
-import { ReadAnyRequest } from "../types/services/ServiceRequest";
-import { StatusCode } from "../types/enums/StatusCode";
-import { client, useForm } from "laravel-precognition-vue";
-
-export default class BranchService {
-    private ziggyRoute: Config;
-    private ziggyRouteStore = useZiggyRouteStore();
-
-    private errorHandlerService;
-
-    constructor() {
-        this.ziggyRoute = this.ziggyRouteStore.getZiggy;
-
-        this.errorHandlerService = new ErrorHandlerService();
-    }
-
-    public useBranchCreateForm() {
-        const url = route('api.post.db.company.branch.save', undefined, true, this.ziggyRoute);
-
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', url, {
-            company_id: '',
-            code: '_AUTO_',
-            name: '',
-            address: '',
-            city: '',
-            contact: '',
-            is_main: false,
-            remarks: '',
-            status: 'ACTIVE',
-        });
-
-        return form;
-    }
-
-    public async readAny(args: ReadAnyRequest): Promise<ServiceResponse<Collection<Array<Branch>> | Resource<Array<Branch>> | null>> {
-        const result: ServiceResponse<Collection<Array<Branch>> | Resource<Array<Branch>> | null> = {
-            success: false
-        }
-
-        try {
-            const queryParams: Record<string, string | number | boolean> = {};
-            if (args.company_id) {
-                queryParams['company_id'] = args.company_id;
-            }
-            queryParams['search'] = args.search ? args.search : '';
-            queryParams['refresh'] = args.refresh;
-            queryParams['paginate'] = args.paginate;
-            if (args.page) queryParams['page'] = args.page;
-            if (args.per_page) queryParams['per_page'] = args.per_page;
-
-            const url = route('api.get.db.company.branch.read_any', {
-                _query: queryParams
-            }, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Collection<Array<Branch>>> = await axios.get(url);
-
-            if (response.status == StatusCode.OK) {
-                result.success = true;
-                result.data = response.data;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public async read(ulid: string): Promise<ServiceResponse<Branch | null>> {
-        const result: ServiceResponse<Branch | null> = {
-            success: false
-        }
-
-        try {
-            const url = route('api.get.db.company.branch.read', {
-                branch: ulid
-            }, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Resource<Branch>> = await axios.get(url);
-
-            if (response.status == StatusCode.OK) {
-                result.success = true;
-                result.data = response.data.data;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public useBranchEditForm(ulid: string) {
-        const url = route('api.post.db.company.branch.edit', ulid, true, this.ziggyRoute);
-
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', url, {
-            company_id: '',
-            code: '_AUTO_',
-            name: '',
-            address: '',
-            city: '',
-            contact: '',
-            is_main: false,
-            remarks: '',
-            status: 'ACTIVE',
-        });
-
-        return form;
-    }
-
-    public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
-        const result: ServiceResponse<boolean | null> = {
-            success: false,
-        }
-
-        try {
-            const url = route('api.post.db.company.branch.delete', ulid, false, this.ziggyRoute);
-
-            const response: AxiosResponse<boolean | null> = await axios.post(url);
-
-            if (response.status == StatusCode.OK) {
-                result.success = true;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-}
\ No newline at end of file
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Branch } from '../types/models/Branch';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { BranchReadAnyPaginateRequest, BranchReadAnyGetRequest } from '../types/services/branch/BranchRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class BranchService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useBranchCreateForm() {
+    const url = route('api.post.branch.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      address: null,
+      city: null,
+      contact: null,
+      is_main: false,
+      remarks: null,
+      status: 'ACTIVE',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: BranchReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Branch>> | null>> {
+    const result: ServiceResponse<Collection<Array<Branch>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.is_main !== undefined) queryParams['is_main'] = args.is_main;
+      if (args.status) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.branch.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Branch>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: BranchReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Branch>> | null>> {
+    const result: ServiceResponse<Resource<Array<Branch>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.is_main !== undefined) queryParams['is_main'] = args.is_main;
+      if (args.status) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.branch.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Branch>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Branch | null>> {
+    const result: ServiceResponse<Branch | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.branch.read',
+        {
+          branch: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Branch>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useBranchEditForm(ulid: string) {
+    const url = route('api.post.branch.edit', ulid, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      address: null,
+      city: null,
+      contact: null,
+      is_main: false,
+      remarks: null,
+      status: 'ACTIVE',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.post.branch.delete', ulid, false, this.ziggyRoute);
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/BrandService.ts b/web/src/services/BrandService.ts
new file mode 100644
index 000000000..2b09fd9bd
--- /dev/null
+++ b/web/src/services/BrandService.ts
@@ -0,0 +1,222 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Brand } from '../types/models/Brand';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { BrandReadAnyPaginateRequest, BrandReadAnyGetRequest } from '../types/services/brand/BrandRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class BrandService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useBrandCreateForm() {
+    const url = route('api.post.brand.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: BrandReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Brand>> | null>> {
+    const result: ServiceResponse<Collection<Array<Brand>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.brand.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Brand>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: BrandReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Brand>> | null>> {
+    const result: ServiceResponse<Resource<Array<Brand>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.brand.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Brand>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Brand | null>> {
+    const result: ServiceResponse<Brand | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.brand.read',
+        {
+          brand: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Brand>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useBrandEditForm(ulid: string) {
+    const url = route(
+      'api.post.brand.edit',
+      {
+        brand: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.brand.delete',
+        {
+          brand: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/CacheService.ts b/web/src/services/CacheService.ts
index 8a51a616e..06469719f 100644
--- a/web/src/services/CacheService.ts
+++ b/web/src/services/CacheService.ts
@@ -1,103 +1,103 @@
-import { DropDownOption } from "../types/models/DropDownOption";
-import { omit } from "lodash";
-
-export default class CacheService {
-    protected debugMode = false;
-    protected DCSLAB_SYSTEM_KEY = 'DCSLAB_SYSTEM';
-    protected DCSLAB_LAST_ENTITY_KEY = 'DCSLAB_LAST_ENTITY';
-
-    constructor() {
-        this.debugMode = import.meta.env.VITE_APP_DEBUG;
-    }
-
-    public getCachedDDL(ddlname: string): Array<DropDownOption> | null {
-        const dcslabSystems = sessionStorage.getItem(this.DCSLAB_SYSTEM_KEY);
-        if (dcslabSystems == null) return null;
-
-        const ddl = this.debugMode ? JSON.parse(dcslabSystems) : JSON.parse(atob(dcslabSystems));
-
-        const hasDDL = Object.hasOwnProperty.call(ddl, ddlname);
-
-        return hasDDL ? ddl[ddlname] as Array<DropDownOption> : null;
-    }
-
-    public setCachedDDL(ddlname: string, value: Array<DropDownOption> | null): void {
-        if (value == null) return;
-        let dcslabSystems = sessionStorage.getItem(this.DCSLAB_SYSTEM_KEY);
-        if (dcslabSystems == null) {
-            dcslabSystems = JSON.stringify(new Object());
-        };
-
-        const new_dcslabSystems = this.debugMode ? JSON.parse(dcslabSystems) : JSON.parse(atob(dcslabSystems));
-
-        new_dcslabSystems[ddlname] = value;
-
-        if (this.debugMode) {
-            sessionStorage.setItem(this.DCSLAB_SYSTEM_KEY, JSON.stringify(new_dcslabSystems));
-        } else {
-            sessionStorage.setItem(this.DCSLAB_SYSTEM_KEY, btoa(JSON.stringify(new_dcslabSystems)));
-        }
-    }
-
-    public getLastEntity(key: string): unknown | null {
-        const dcslabLastEntity = sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);
-        if (dcslabLastEntity == null) return null;
-
-        const entity = this.debugMode ? JSON.parse(dcslabLastEntity) : JSON.parse(atob(dcslabLastEntity));
-        if (entity == null) return null;
-
-        key = key.toUpperCase();
-        const hasEntity = Object.hasOwnProperty.call(entity, key);
-        if (!hasEntity) return null;
-
-        return entity[key];
-    }
-
-    public setLastEntity(key: string, value: unknown | null): void {
-        key = key.toUpperCase();
-
-        if (value == null) return;
-
-        const newObj: Record<string, unknown> = {};
-        newObj[key] = value;
-
-        if (this.debugMode) {
-            sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY, JSON.stringify(newObj));
-        } else {
-            sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY, btoa(JSON.stringify(newObj)));
-        }
-    }
-
-    public removeLastEntity(key: string): void {
-        const dcslabLastEntity = sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);
-        if (dcslabLastEntity == null) return;
-
-        const entity = this.debugMode ? JSON.parse(dcslabLastEntity) : JSON.parse(atob(dcslabLastEntity));
-        if (entity == null) return;
-
-        key = key.toUpperCase();
-        const hasEntity = Object.hasOwnProperty.call(entity, key);
-        if (!hasEntity) return;
-
-        let newObj: Record<string, unknown> = {};
-        newObj = omit(entity, [key]);
-
-        if (this.debugMode) {
-            sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY, JSON.stringify(newObj));
-        } else {
-            sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY, btoa(JSON.stringify(newObj)));
-        }
-    }
-
-    public isLastEntity(key: string): boolean {
-        const dcslabLastEntity = sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);
-        if (dcslabLastEntity == null) return false;
-
-        const entity = this.debugMode ? JSON.parse(dcslabLastEntity) : JSON.parse(atob(dcslabLastEntity));
-        if (entity == null) return false;
-
-        key = key.toUpperCase();
-
-        return key in entity;
-    }
-}
\ No newline at end of file
+import { DropDownOption } from '../types/models/DropDownOption';
+import { omit } from 'lodash';
+
+export default class CacheService {
+  protected debugMode = false;
+  protected DCSLAB_SYSTEM_KEY = 'DCSLAB_SYSTEM';
+  protected DCSLAB_LAST_ENTITY_KEY = 'DCSLAB_LAST_ENTITY';
+
+  constructor() {
+    this.debugMode = import.meta.env.VITE_APP_DEBUG;
+  }
+
+  public getCachedDDL(ddlname: string): Array<DropDownOption> | null {
+    const dcslabSystems = sessionStorage.getItem(this.DCSLAB_SYSTEM_KEY);
+    if (dcslabSystems == null) return null;
+
+    const ddl = this.debugMode ? JSON.parse(dcslabSystems) : JSON.parse(atob(dcslabSystems));
+
+    const hasDDL = Object.hasOwnProperty.call(ddl, ddlname);
+
+    return hasDDL ? (ddl[ddlname] as Array<DropDownOption>) : null;
+  }
+
+  public setCachedDDL(ddlname: string, value: Array<DropDownOption> | null): void {
+    if (value == null) return;
+    let dcslabSystems = sessionStorage.getItem(this.DCSLAB_SYSTEM_KEY);
+    if (dcslabSystems == null) {
+      dcslabSystems = JSON.stringify(new Object());
+    }
+
+    const new_dcslabSystems = this.debugMode ? JSON.parse(dcslabSystems) : JSON.parse(atob(dcslabSystems));
+
+    new_dcslabSystems[ddlname] = value;
+
+    if (this.debugMode) {
+      sessionStorage.setItem(this.DCSLAB_SYSTEM_KEY, JSON.stringify(new_dcslabSystems));
+    } else {
+      sessionStorage.setItem(this.DCSLAB_SYSTEM_KEY, btoa(JSON.stringify(new_dcslabSystems)));
+    }
+  }
+
+  public getLastEntity(key: string): unknown | null {
+    const dcslabLastEntity = sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);
+    if (dcslabLastEntity == null) return null;
+
+    const entity = this.debugMode ? JSON.parse(dcslabLastEntity) : JSON.parse(atob(dcslabLastEntity));
+    if (entity == null) return null;
+
+    key = key.toUpperCase();
+    const hasEntity = Object.hasOwnProperty.call(entity, key);
+    if (!hasEntity) return null;
+
+    return entity[key];
+  }
+
+  public setLastEntity(key: string, value: unknown | null): void {
+    key = key.toUpperCase();
+
+    if (value == null) return;
+
+    const newObj: Record<string, unknown> = {};
+    newObj[key] = value;
+
+    if (this.debugMode) {
+      sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY, JSON.stringify(newObj));
+    } else {
+      sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY, btoa(JSON.stringify(newObj)));
+    }
+  }
+
+  public removeLastEntity(key: string): void {
+    const dcslabLastEntity = sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);
+    if (dcslabLastEntity == null) return;
+
+    const entity = this.debugMode ? JSON.parse(dcslabLastEntity) : JSON.parse(atob(dcslabLastEntity));
+    if (entity == null) return;
+
+    key = key.toUpperCase();
+    const hasEntity = Object.hasOwnProperty.call(entity, key);
+    if (!hasEntity) return;
+
+    let newObj: Record<string, unknown> = {};
+    newObj = omit(entity, [key]);
+
+    if (this.debugMode) {
+      sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY, JSON.stringify(newObj));
+    } else {
+      sessionStorage.setItem(this.DCSLAB_LAST_ENTITY_KEY, btoa(JSON.stringify(newObj)));
+    }
+  }
+
+  public isLastEntity(key: string): boolean {
+    const dcslabLastEntity = sessionStorage.getItem(this.DCSLAB_LAST_ENTITY_KEY);
+    if (dcslabLastEntity == null) return false;
+
+    const entity = this.debugMode ? JSON.parse(dcslabLastEntity) : JSON.parse(atob(dcslabLastEntity));
+    if (entity == null) return false;
+
+    key = key.toUpperCase();
+
+    return key in entity;
+  }
+}
diff --git a/web/src/services/CapitalOpeningService.ts b/web/src/services/CapitalOpeningService.ts
new file mode 100644
index 000000000..1cedb9b17
--- /dev/null
+++ b/web/src/services/CapitalOpeningService.ts
@@ -0,0 +1,244 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { route, Config } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import { CapitalOpening } from '../types/models/CapitalOpening';
+import { type Collection } from '../types/resources/Collection';
+import { type Resource } from '../types/resources/Resource';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type CapitalOpeningReadAnyGetRequest,
+  type CapitalOpeningReadAnyPaginateRequest,
+  type CapitalOpeningStoreRequest,
+  type CapitalOpeningUpdateRequest,
+} from '../types/services/capital-opening/CapitalOpeningRequest';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class CapitalOpeningService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: CapitalOpeningReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<CapitalOpening>> | null>> {
+    const result: ServiceResponse<Collection<Array<CapitalOpening>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.investor_id) queryParams['investor_id'] = args.investor_id;
+      if (args.cash_account_id) queryParams['cash_account_id'] = args.cash_account_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.capital_opening.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<CapitalOpening>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: CapitalOpeningReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<CapitalOpening>> | null>> {
+    const result: ServiceResponse<Resource<Array<CapitalOpening>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.investor_id) queryParams['investor_id'] = args.investor_id;
+      if (args.cash_account_id) queryParams['cash_account_id'] = args.cash_account_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.capital_opening.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<CapitalOpening>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<CapitalOpening | null>> {
+    const result: ServiceResponse<CapitalOpening | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.capital_opening.read',
+        {
+          capital_opening: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<CapitalOpening>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useCapitalOpeningCreateForm() {
+    const url = route('api.post.capital_opening.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      investor_id: '',
+      cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public useCapitalOpeningEditForm(ulid: string) {
+    const url = route(
+      'api.post.capital_opening.edit',
+      {
+        capital_opening: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      investor_id: '',
+      cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.capital_opening.delete',
+        {
+          capital_opening: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/CapitalTransactionService.ts b/web/src/services/CapitalTransactionService.ts
new file mode 100644
index 000000000..798c64266
--- /dev/null
+++ b/web/src/services/CapitalTransactionService.ts
@@ -0,0 +1,277 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { route, Config } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { type DropDownOption } from '../types/models/DropDownOption';
+import { StatusCode } from '../types/enums/StatusCode';
+import { CapitalTransaction } from '../types/models/CapitalTransaction';
+import { type Collection } from '../types/resources/Collection';
+import { type Resource } from '../types/resources/Resource';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type CapitalTransactionReadAnyGetRequest,
+  type CapitalTransactionReadAnyPaginateRequest,
+  type CapitalTransactionStoreRequest,
+  type CapitalTransactionUpdateRequest,
+} from '../types/services/capital-transaction/CapitalTransactionRequest';
+import CacheService from './CacheService';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class CapitalTransactionService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+  private cacheService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+    this.cacheService = new CacheService();
+  }
+
+  public async readAnyPaginate(
+    args: CapitalTransactionReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<CapitalTransaction>> | null>> {
+    const result: ServiceResponse<Collection<Array<CapitalTransaction>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.investor_id) queryParams['investor_id'] = args.investor_id;
+      if (args.cash_account_id) queryParams['cash_account_id'] = args.cash_account_id;
+      if (args.type) queryParams['type'] = args.type;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.capital_transaction.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<CapitalTransaction>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: CapitalTransactionReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<CapitalTransaction>> | null>> {
+    const result: ServiceResponse<Resource<Array<CapitalTransaction>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.investor_id) queryParams['investor_id'] = args.investor_id;
+      if (args.cash_account_id) queryParams['cash_account_id'] = args.cash_account_id;
+      if (args.type) queryParams['type'] = args.type;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.capital_transaction.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<CapitalTransaction>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<CapitalTransaction | null>> {
+    const result: ServiceResponse<CapitalTransaction | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.capital_transaction.read',
+        {
+          capital_transaction: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<CapitalTransaction>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useCapitalTransactionCreateForm() {
+    const url = route('api.post.capital_transaction.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      investor_id: '',
+      cash_account_id: '',
+      type: '',
+      amount: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public useCapitalTransactionEditForm(ulid: string) {
+    const url = route(
+      'api.post.capital_transaction.edit',
+      {
+        capital_transaction: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      investor_id: '',
+      cash_account_id: '',
+      type: '',
+      amount: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.capital_transaction.delete',
+        {
+          capital_transaction: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async getTypes(): Promise<Array<DropDownOption> | null> {
+    const ddlName = 'capitalTransactionTypesDDL';
+    let result: Array<DropDownOption> = [];
+
+    try {
+      if (this.cacheService.getCachedDDL(ddlName) == null) {
+        const url = route('api.get.capital_transaction.read_types', undefined, false, this.ziggyRoute);
+
+        const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
+
+        this.cacheService.setCachedDDL(ddlName, response.data);
+      }
+
+      const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
+
+      if (cachedData != null) {
+        result = cachedData as Array<DropDownOption>;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      return result;
+    }
+  }
+}
diff --git a/web/src/services/CashAccountService.ts b/web/src/services/CashAccountService.ts
new file mode 100644
index 000000000..462c4ed2e
--- /dev/null
+++ b/web/src/services/CashAccountService.ts
@@ -0,0 +1,261 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { CashAccount } from '../types/models/CashAccount';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  CashAccountReadAnyPaginateRequest,
+  CashAccountReadAnyGetRequest,
+} from '../types/services/cash_account/CashAccountRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import CacheService from './CacheService';
+
+export default class CashAccountService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+  private cacheService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+    this.cacheService = new CacheService();
+  }
+
+  public useCashAccountCreateForm() {
+    const url = route('api.post.cash_account.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      name: '',
+      is_bank: false,
+      is_active: true,
+      remarks: null,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: CashAccountReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<CashAccount>> | null>> {
+    const result: ServiceResponse<Collection<Array<CashAccount>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.is_bank !== undefined && args.is_bank !== null) queryParams['is_bank'] = args.is_bank;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      if (args.with_remaining_balance !== undefined && args.with_remaining_balance !== null) {
+        const withRemainingBalanceQuery: Record<string, any> = {};
+
+        if (args.with_remaining_balance.end_date !== undefined && args.with_remaining_balance.end_date !== null) {
+          withRemainingBalanceQuery['end_date'] = args.with_remaining_balance.end_date;
+        }
+
+        queryParams['with_remaining_balance'] = withRemainingBalanceQuery;
+      }
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.cash_account.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<CashAccount>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: CashAccountReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<CashAccount>> | null>> {
+    const result: ServiceResponse<Resource<Array<CashAccount>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.is_bank !== undefined && args.is_bank !== null) queryParams['is_bank'] = args.is_bank;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      if (args.with_remaining_balance !== undefined && args.with_remaining_balance !== null) {
+        const withRemainingBalanceQuery: Record<string, any> = {};
+
+        if (args.with_remaining_balance.end_date !== undefined && args.with_remaining_balance.end_date !== null) {
+          withRemainingBalanceQuery['end_date'] = args.with_remaining_balance.end_date;
+        }
+
+        queryParams['with_remaining_balance'] = withRemainingBalanceQuery;
+      }
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.cash_account.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<CashAccount>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<CashAccount | null>> {
+    const result: ServiceResponse<CashAccount | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.cash_account.read',
+        {
+          cash_account: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<CashAccount>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useCashAccountEditForm(ulid: string) {
+    const url = route(
+      'api.post.cash_account.edit',
+      {
+        cash_account: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      is_bank: false,
+      is_active: true,
+      remarks: null,
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.cash_account.delete',
+        {
+          cash_account: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/CashTransferService.ts b/web/src/services/CashTransferService.ts
new file mode 100644
index 000000000..21fc94cb5
--- /dev/null
+++ b/web/src/services/CashTransferService.ts
@@ -0,0 +1,242 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { route, Config } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import { CashTransfer } from '../types/models/CashTransfer';
+import { type Collection } from '../types/resources/Collection';
+import { type Resource } from '../types/resources/Resource';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type CashTransferReadAnyGetRequest,
+  type CashTransferReadAnyPaginateRequest,
+  type CashTransferStoreRequest,
+  type CashTransferUpdateRequest,
+} from '../types/services/cash-transfer/CashTransferRequest';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class CashTransferService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: CashTransferReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<CashTransfer>> | null>> {
+    const result: ServiceResponse<Collection<Array<CashTransfer>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.cash_transfer.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<CashTransfer>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: CashTransferReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<CashTransfer>> | null>> {
+    const result: ServiceResponse<Resource<Array<CashTransfer>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.cash_transfer.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<CashTransfer>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<CashTransfer | null>> {
+    const result: ServiceResponse<CashTransfer | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.cash_transfer.read',
+        {
+          cash_transfer: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<CashTransfer>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useCashTransferCreateForm() {
+    const url = route('api.post.cash_transfer.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      source_cash_account_id: '',
+      destination_cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public useCashTransferEditForm(ulid: string) {
+    const url = route(
+      'api.post.cash_transfer.edit',
+      {
+        cash_transfer: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      source_cash_account_id: '',
+      destination_cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.cash_transfer.delete',
+        {
+          cash_transfer: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+}
+
diff --git a/web/src/services/ChartOfAccountService.ts b/web/src/services/ChartOfAccountService.ts
new file mode 100644
index 000000000..d1af8d4a3
--- /dev/null
+++ b/web/src/services/ChartOfAccountService.ts
@@ -0,0 +1,277 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { ChartOfAccount } from '../types/models/ChartOfAccount';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  ChartOfAccountReadAnyPaginateRequest,
+  ChartOfAccountReadAnyGetRequest,
+} from '../types/services/chart-of-account/ChartOfAccountRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class ChartOfAccountService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useChartOfAccountCreateForm() {
+    const url = route('api.post.chart_of_account.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      parent_id: null as string | null,
+      scope: 'user',
+      system_key: null as string | null,
+      source_type: null as string | null,
+      source_id: null as number | null,
+      code: '_AUTO_',
+      name: '',
+      normal_balance: 'debit',
+      is_group: false,
+      is_active: true,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: ChartOfAccountReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<ChartOfAccount>> | null>> {
+    const result: ServiceResponse<Collection<Array<ChartOfAccount>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.parent_id) queryParams['parent_id'] = args.parent_id;
+      if (args.has_parent !== undefined) {
+        queryParams['has_parent'] = args.has_parent;
+      }
+      if (args.has_children !== undefined) {
+        queryParams['has_children'] = args.has_children;
+      }
+      if (args.scope) queryParams['scope'] = args.scope;
+      if (args.system_key) queryParams['system_key'] = args.system_key;
+      if (args.account_type) queryParams['account_type'] = args.account_type;
+      if (args.normal_balance) queryParams['normal_balance'] = args.normal_balance;
+      if (args.is_group !== undefined) queryParams['is_group'] = args.is_group;
+      if (args.is_active !== undefined) queryParams['is_active'] = args.is_active;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.chart_of_account.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<ChartOfAccount>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: ChartOfAccountReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<ChartOfAccount>> | null>> {
+    const result: ServiceResponse<Resource<Array<ChartOfAccount>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.parent_id) queryParams['parent_id'] = args.parent_id;
+      if (args.has_parent !== undefined) {
+        queryParams['has_parent'] = args.has_parent ? 1 : 0;
+      }
+      if (args.has_children !== undefined) {
+        queryParams['has_children'] = args.has_children ? 1 : 0;
+      }
+      if (args.scope) queryParams['scope'] = args.scope;
+      if (args.system_key) queryParams['system_key'] = args.system_key;
+      if (args.account_type) queryParams['account_type'] = args.account_type;
+      if (args.normal_balance) queryParams['normal_balance'] = args.normal_balance;
+      if (args.is_group !== undefined) {
+        queryParams['is_group'] = args.is_group ? 1 : 0;
+      }
+      if (args.is_active !== undefined) {
+        queryParams['is_active'] = args.is_active ? 1 : 0;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.chart_of_account.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<ChartOfAccount>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<ChartOfAccount | null>> {
+    const result: ServiceResponse<ChartOfAccount | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.chart_of_account.read',
+        {
+          chart_of_account: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<ChartOfAccount>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useChartOfAccountEditForm(ulid: string) {
+    const url = route(
+      'api.post.chart_of_account.edit',
+      {
+        chart_of_account: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      parent_id: null as string | null,
+      code: '_AUTO_',
+      name: '',
+      normal_balance: 'debit',
+      is_group: false,
+      is_active: true,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.chart_of_account.delete',
+        {
+          chart_of_account: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/CompanyService.ts b/web/src/services/CompanyService.ts
index 1d26f6f9a..0d487037a 100644
--- a/web/src/services/CompanyService.ts
+++ b/web/src/services/CompanyService.ts
@@ -1,148 +1,208 @@
-import axios from "../axios";
-import { useZiggyRouteStore } from "../stores/ziggy-route";
-import { route, Config } from "ziggy-js";
-import { Company } from "../types/models/Company";
-import { Resource } from "../types/resources/Resource";
-import { Collection } from "../types/resources/Collection";
-import { ServiceResponse } from "../types/services/ServiceResponse";
-import { AxiosError, AxiosResponse, isAxiosError } from "axios";
-import ErrorHandlerService from "./ErrorHandlerService";
-import { ReadAnyRequest } from "../types/services/ServiceRequest";
-import { StatusCode } from "../types/enums/StatusCode";
-import { client, useForm } from "laravel-precognition-vue";
-
-export default class CompanyService {
-    private ziggyRoute: Config;
-    private ziggyRouteStore = useZiggyRouteStore();
-
-    private errorHandlerService;
-
-    constructor() {
-        this.ziggyRoute = this.ziggyRouteStore.getZiggy;
-
-        this.errorHandlerService = new ErrorHandlerService();
-    }
-
-    public useCompanyCreateForm() {
-        const url = route('api.post.db.company.company.save', undefined, true, this.ziggyRoute);
-
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', url, {
-            code: '_AUTO_',
-            name: '',
-            address: '',
-            default: false,
-            status: 'ACTIVE',
-        });
-
-        return form;
-    }
-
-    public async readAny(args: ReadAnyRequest): Promise<ServiceResponse<Collection<Array<Company>> | Resource<Array<Company>> | null>> {
-        const result: ServiceResponse<Collection<Array<Company>> | Resource<Array<Company>> | null> = {
-            success: false
-        }
-
-        try {
-            const queryParams: Record<string, string | number | boolean> = {};
-            queryParams['search'] = args.search ? args.search : '';
-            queryParams['refresh'] = args.refresh;
-            queryParams['paginate'] = args.paginate;
-            if (args.page) queryParams['page'] = args.page;
-            if (args.per_page) queryParams['per_page'] = args.per_page;
-
-            const url = route('api.get.db.company.company.read_any', {
-                _query: queryParams
-            }, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Collection<Array<Company>>> = await axios.get(url);
-
-            if (response.status == StatusCode.OK) {
-                result.success = true;
-                result.data = response.data;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public async read(ulid: string): Promise<ServiceResponse<Company | null>> {
-        const result: ServiceResponse<Company | null> = {
-            success: false
-        }
-
-        try {
-            const url = route('api.get.db.company.company.read', {
-                company: ulid
-            }, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Resource<Company>> = await axios.get(url);
-
-            if (response.status == StatusCode.OK) {
-                result.success = true;
-                result.data = response.data.data;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public useCompanyEditForm(ulid: string) {
-        const url = route('api.post.db.company.company.edit', ulid, true, this.ziggyRoute);
-
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', url, {
-            code: '_AUTO_',
-            name: '',
-            address: '',
-            default: false,
-            status: 'ACTIVE',
-        });
-
-        return form;
-    }
-
-    public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
-        const result: ServiceResponse<boolean | null> = {
-            success: false,
-        }
-
-        try {
-            const url = route('api.post.db.company.company.delete', ulid, false, this.ziggyRoute);
-
-            const response: AxiosResponse<boolean | null> = await axios.post(url);
-
-            if (response.status == StatusCode.OK) {
-                result.success = true;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-}
\ No newline at end of file
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Company } from '../types/models/Company';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { CompanyReadAnyPaginateRequest, CompanyReadAnyGetRequest } from '../types/services/company/CompanyRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class CompanyService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useCompanyCreateForm() {
+    const url = route('api.post.company.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      code: '_AUTO_',
+      name: '',
+      address: null,
+      default: false,
+      status: 'ACTIVE',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: CompanyReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Company>> | null>> {
+    const result: ServiceResponse<Collection<Array<Company>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.status) queryParams['status'] = args.status;
+      if (args.default !== undefined) queryParams['default'] = args.default;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.company.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Company>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: CompanyReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Company>> | null>> {
+    const result: ServiceResponse<Resource<Array<Company>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.status) queryParams['status'] = args.status;
+      if (args.default !== undefined) queryParams['default'] = args.default;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.company.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Company>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Company | null>> {
+    const result: ServiceResponse<Company | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.get.company.read', { company: ulid }, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Resource<Company>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useCompanyEditForm(ulid: string) {
+    const url = route('api.post.company.edit', ulid, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      code: '_AUTO_',
+      name: '',
+      address: null,
+      default: false,
+      status: 'ACTIVE',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.post.company.delete', { company: ulid }, false, this.ziggyRoute);
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/CustomerGroupService.ts b/web/src/services/CustomerGroupService.ts
new file mode 100644
index 000000000..bf56530d3
--- /dev/null
+++ b/web/src/services/CustomerGroupService.ts
@@ -0,0 +1,261 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { CustomerGroup } from '@/types/models/CustomerGroup';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  CustomerGroupReadAnyPaginateRequest,
+  CustomerGroupReadAnyGetRequest,
+} from '../types/services/customer-group/CustomerGroupRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import CacheService from './CacheService';
+
+export default class CustomerGroupService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+  private cacheService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+    this.cacheService = new CacheService();
+  }
+
+  public useCustomerGroupCreateForm() {
+    const url = route('api.post.customer_group.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      max_open_invoice: 0,
+      max_outstanding_invoice: 0,
+      max_invoice_age: 0,
+      payment_term_type: 'PIA',
+      payment_term: 0,
+      selling_point: 0,
+      selling_point_multiple: 0,
+      sell_at_cost: false,
+      price_markup_percent: 0,
+      price_markup_nominal: 0,
+      price_markdown_percent: 0,
+      price_markdown_nominal: 0,
+      rounding_type: 1,
+      rounding_digit: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: CustomerGroupReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<CustomerGroup>> | null>> {
+    const result: ServiceResponse<Collection<Array<CustomerGroup>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.customer_group.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<CustomerGroup>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: CustomerGroupReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<CustomerGroup>> | null>> {
+    const result: ServiceResponse<Resource<Array<CustomerGroup>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.customer_group.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<CustomerGroup>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<CustomerGroup | null>> {
+    const result: ServiceResponse<CustomerGroup | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.customer_group.read',
+        {
+          customer_group: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<CustomerGroup>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useCustomerGroupEditForm(ulid: string) {
+    const url = route(
+      'api.post.customer_group.edit',
+      {
+        customer_group: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      max_open_invoice: 0,
+      max_outstanding_invoice: 0,
+      max_invoice_age: 0,
+      payment_term_type: 'PIA',
+      payment_term: 0,
+      selling_point: 0,
+      selling_point_multiple: 0,
+      sell_at_cost: false,
+      price_markup_percent: 0,
+      price_markup_nominal: 0,
+      price_markdown_percent: 0,
+      price_markdown_nominal: 0,
+      rounding_type: 1,
+      rounding_digit: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.customer_group.delete',
+        {
+          customer_group: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/CustomerService.ts b/web/src/services/CustomerService.ts
new file mode 100644
index 000000000..73589ea6d
--- /dev/null
+++ b/web/src/services/CustomerService.ts
@@ -0,0 +1,239 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Customer } from '@/types/models/Customer';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import { CustomerReadAnyPaginateRequest, CustomerReadAnyGetRequest } from '../types/services/customer/CustomerRequest';
+
+export default class CustomerService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useCustomerCreateForm() {
+    const url = route('api.post.customer.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      group_id: '',
+      code: '_AUTO_',
+      name: '',
+      zone: '',
+      max_open_invoice: 0,
+      max_outstanding_invoice: 0,
+      max_invoice_age: 0,
+      payment_term_type: '',
+      payment_term: 0,
+      is_member: false,
+      taxable_enterprise: false,
+      tax_id: '',
+      status: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: CustomerReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Customer>> | null>> {
+    const result: ServiceResponse<Collection<Array<Customer>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.status !== undefined && args.status !== null) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.customer.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Customer>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: CustomerReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Customer>> | null>> {
+    const result: ServiceResponse<Resource<Array<Customer>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.status !== undefined && args.status !== null) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.customer.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Customer>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Customer | null>> {
+    const result: ServiceResponse<Customer | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.customer.read',
+        {
+          customer: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Customer>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useCustomerEditForm(ulid: string) {
+    const url = route('api.post.customer.edit', { customer: ulid }, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      group_id: '',
+      code: '_AUTO_',
+      name: '',
+      zone: '',
+      max_open_invoice: 0,
+      max_outstanding_invoice: 0,
+      max_invoice_age: 0,
+      payment_term_type: '',
+      payment_term: 0,
+      is_member: false,
+      taxable_enterprise: false,
+      tax_id: '',
+      status: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.customer.delete',
+        {
+          customer: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/DashboardService.ts b/web/src/services/DashboardService.ts
index e0db416e5..b9d1db821 100644
--- a/web/src/services/DashboardService.ts
+++ b/web/src/services/DashboardService.ts
@@ -1,156 +1,206 @@
-import axios from "../axios";
-import { useZiggyRouteStore } from "../stores/ziggy-route";
-import { route, Config } from "ziggy-js";
-import CacheService from "./CacheService";
-import { AxiosResponse, AxiosError, isAxiosError } from "axios";
-import { ServiceResponse } from "../types/services/ServiceResponse";
-import { Menu as sMenu } from "../stores/menu";
-import ErrorHandlerService from "./ErrorHandlerService";
-import { Resource } from "../types/resources/Resource";
-import { DropDownOption } from "../types/models/DropDownOption";
-import { FileUpload } from "../types/models/FileUpload";
-
-export default class DashboardService {
-    private ziggyRoute: Config;
-    private ziggyRouteStore = useZiggyRouteStore();
-
-    private cacheService;
-    private errorHandlerService;
-
-    constructor() {
-        this.ziggyRoute = this.ziggyRouteStore.getZiggy;
-
-        this.cacheService = new CacheService();
-        this.errorHandlerService = new ErrorHandlerService();
-    }
-
-    public async readUserMenu(): Promise<ServiceResponse<Array<sMenu> | null>> {
-        const result: ServiceResponse<Array<sMenu>> | null = {
-            success: false,
-        };
-
-        try {
-            const url = route('api.get.db.core.user.menu', undefined, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Array<sMenu>> = await axios.get(url);
-
-            result.success = true;
-            result.data = response.data;
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public async readUserApi(): Promise<ServiceResponse<Config | null>> {
-        const result: ServiceResponse<Config> | null = {
-            success: false,
-        };
-
-        try {
-            const url = route('api.get.db.core.user.api', undefined, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Config> = await axios.get(url);
-
-            result.success = true;
-            result.data = response.data;
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public async getStatusDDL(): Promise<Array<DropDownOption> | null> {
-        const ddlName = 'statusDDL';
-        let result: Array<DropDownOption> = [];
-
-        try {
-            if (this.cacheService.getCachedDDL(ddlName) == null) {
-                const url = route('api.get.db.common.ddl.list.statuses', undefined, false, this.ziggyRoute);
-
-                const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
-
-                this.cacheService.setCachedDDL(ddlName, response.data);
-            }
-
-            const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
-
-            if (cachedData != null) {
-                result = cachedData as Array<DropDownOption>;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            return result;
-        }
-    }
-
-    public async getCountriesDDL(): Promise<Array<DropDownOption> | null> {
-        const ddlName = 'countriesDDL';
-        let result: Array<DropDownOption> = [];
-
-        try {
-            if (this.cacheService.getCachedDDL(ddlName) == null) {
-                const url = route('api.get.db.common.ddl.list.countries', undefined, false, this.ziggyRoute);
-
-                const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
-
-                this.cacheService.setCachedDDL(ddlName, response.data);
-            }
-
-            const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
-
-            if (cachedData != null) {
-                result = cachedData as Array<DropDownOption>;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            return result;
-        }
-    }
-
-    public async uploadFile(file: File): Promise<ServiceResponse<FileUpload | null>> {
-        const result: ServiceResponse<FileUpload | null> = {
-            success: false
-        }
-
-        try {
-            const formData = new FormData()
-            formData.append('file', file)
-
-            const url = route('api.post.db.core.user.upload', undefined, false, this.ziggyRoute)
-
-            axios.defaults.headers.common['Content-Type'] = "multipart/form-data"
-
-            const response: AxiosResponse<Resource<FileUpload>> = await axios.post(url, formData);
-
-            result.success = true;
-            result.data = response.data.data;
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-}
\ No newline at end of file
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import CacheService from './CacheService';
+import { AxiosResponse, AxiosError, isAxiosError } from 'axios';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { Menu as sMenu } from '../stores/menu';
+import ErrorHandlerService from './ErrorHandlerService';
+import { Resource } from '../types/resources/Resource';
+import { DropDownOption } from '../types/models/DropDownOption';
+import { FileUpload } from '../types/models/FileUpload';
+
+export default class DashboardService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private cacheService;
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.cacheService = new CacheService();
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readUserMenu(): Promise<ServiceResponse<Array<sMenu> | null>> {
+    const result: ServiceResponse<Array<sMenu>> | null = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.get.db.core.user.menu', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Array<sMenu>> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readUserApi(): Promise<ServiceResponse<Config | null>> {
+    const result: ServiceResponse<Config> | null = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.get.db.core.user.api', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Config> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async getStatusDDL(showDeleted: boolean = true): Promise<Array<DropDownOption> | null> {
+    const ddlName = showDeleted ? 'statusDDL_with_deleted' : 'statusDDL_no_deleted';
+    let result: Array<DropDownOption> = [];
+
+    try {
+      if (this.cacheService.getCachedDDL(ddlName) == null) {
+        const url = route('api.get.db.common.ddl.list.statuses', { show_deleted: showDeleted }, false, this.ziggyRoute);
+
+        const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
+
+        this.cacheService.setCachedDDL(ddlName, response.data);
+      }
+
+      const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
+
+      if (cachedData != null) {
+        result = cachedData as Array<DropDownOption>;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      return result;
+    }
+  }
+
+  public async getCountriesDDL(): Promise<Array<DropDownOption> | null> {
+    const ddlName = 'countriesDDL';
+    let result: Array<DropDownOption> = [];
+
+    try {
+      if (this.cacheService.getCachedDDL(ddlName) == null) {
+        const url = route('api.get.db.common.ddl.list.countries', undefined, false, this.ziggyRoute);
+
+        const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
+
+        this.cacheService.setCachedDDL(ddlName, response.data);
+      }
+
+      const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
+
+      if (cachedData != null) {
+        result = cachedData as Array<DropDownOption>;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      return result;
+    }
+  }
+
+  public async getPaymentTermTypesDDL(): Promise<Array<DropDownOption> | null> {
+    const ddlName = 'paymentTermTypesDDL';
+    let result: Array<DropDownOption> = [];
+
+    try {
+      if (this.cacheService.getCachedDDL(ddlName) == null) {
+        const url = route('api.get.db.common.ddl.list.payment_term_types', undefined, false, this.ziggyRoute);
+
+        const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
+
+        this.cacheService.setCachedDDL(ddlName, response.data);
+      }
+
+      const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
+
+      if (cachedData != null) {
+        result = cachedData as Array<DropDownOption>;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      return result;
+    }
+  }
+
+  public async getRoundingTypesDDL(): Promise<Array<DropDownOption> | null> {
+    const ddlName = 'roundingTypesDDL';
+    let result: Array<DropDownOption> = [];
+
+    try {
+      if (this.cacheService.getCachedDDL(ddlName) == null) {
+        const url = route('api.get.db.common.ddl.list.rounding_types', undefined, false, this.ziggyRoute);
+
+        const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
+
+        this.cacheService.setCachedDDL(ddlName, response.data);
+      }
+
+      const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
+
+      if (cachedData != null) {
+        result = cachedData as Array<DropDownOption>;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      return result;
+    }
+  }
+
+  public async uploadFile(file: File): Promise<ServiceResponse<FileUpload | null>> {
+    const result: ServiceResponse<FileUpload | null> = {
+      success: false,
+    };
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const url = route('api.post.db.core.user.upload', undefined, false, this.ziggyRoute);
+
+      axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
+
+      const response: AxiosResponse<Resource<FileUpload>> = await axios.post(url, formData);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/DebtCategoryService.ts b/web/src/services/DebtCategoryService.ts
new file mode 100644
index 000000000..43ef00b62
--- /dev/null
+++ b/web/src/services/DebtCategoryService.ts
@@ -0,0 +1,235 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { DebtCategory } from '../types/models/DebtCategory';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  DebtCategoryReadAnyPaginateRequest,
+  DebtCategoryReadAnyGetRequest,
+} from '../types/services/debt-category/DebtCategoryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class DebtCategoryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useDebtCategoryCreateForm() {
+    const url = route('api.post.debt_category.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      sequence: 0,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: DebtCategoryReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<DebtCategory>> | null>> {
+    const result: ServiceResponse<Collection<Array<DebtCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.debt_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<DebtCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: DebtCategoryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<DebtCategory>> | null>> {
+    const result: ServiceResponse<Resource<Array<DebtCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.debt_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<DebtCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<DebtCategory | null>> {
+    const result: ServiceResponse<DebtCategory | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.debt_category.read',
+        {
+          debt_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<DebtCategory>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useDebtCategoryEditForm(ulid: string) {
+    const url = route(
+      'api.post.debt_category.edit',
+      {
+        debt_category: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      sequence: 0,
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.debt_category.delete',
+        {
+          debt_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/DebtCreditorService.ts b/web/src/services/DebtCreditorService.ts
new file mode 100644
index 000000000..b793ee307
--- /dev/null
+++ b/web/src/services/DebtCreditorService.ts
@@ -0,0 +1,223 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { DebtCreditor } from '../types/models/DebtCreditor';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import { DebtCreditorReadAnyGetRequest, DebtCreditorReadAnyPaginateRequest } from '../types/services/debt-creditor/DebtCreditorRequest';
+
+export default class DebtCreditorService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useDebtCreditorCreateForm() {
+    const url = route('api.post.debt_creditor.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: DebtCreditorReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<DebtCreditor>> | null>> {
+    const result: ServiceResponse<Collection<Array<DebtCreditor>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.debt_creditor.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<DebtCreditor>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: DebtCreditorReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<DebtCreditor>> | null>> {
+    const result: ServiceResponse<Resource<Array<DebtCreditor>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.debt_creditor.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<DebtCreditor>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<DebtCreditor | null>> {
+    const result: ServiceResponse<DebtCreditor | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.debt_creditor.read',
+        {
+          debt_creditor: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<DebtCreditor>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useDebtCreditorEditForm(ulid: string) {
+    const url = route(
+      'api.post.debt_creditor.edit',
+      {
+        debt_creditor: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.debt_creditor.delete',
+        {
+          debt_creditor: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/DebtService.ts b/web/src/services/DebtService.ts
new file mode 100644
index 000000000..d7392c02a
--- /dev/null
+++ b/web/src/services/DebtService.ts
@@ -0,0 +1,198 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { Debt } from '../types/models/Debt';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import type {
+  DebtReadAnyGetRequest,
+  DebtReadAnyPaginateRequest,
+} from '../types/services/debt/DebtRequest';
+
+export default class DebtService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: DebtReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Debt>> | null>> {
+    const result: ServiceResponse<Collection<Array<Debt>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.category_id) queryParams['category_id'] = args.category_id;
+      if (args.creditor_id) queryParams['creditor_id'] = args.creditor_id;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.is_paid_off !== null && args.is_paid_off !== undefined) queryParams['is_paid_off'] = args.is_paid_off;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.debt.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<Debt>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: DebtReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<Debt>> | null>> {
+    const result: ServiceResponse<Resource<Array<Debt>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.category_id) queryParams['category_id'] = args.category_id;
+      if (args.creditor_id) queryParams['creditor_id'] = args.creditor_id;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.is_paid_off !== null && args.is_paid_off !== undefined) queryParams['is_paid_off'] = args.is_paid_off ? 1 : 0;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.debt.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<Debt>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Debt | null>> {
+    const result: ServiceResponse<Debt | null> = { success: false };
+
+    try {
+      const url = route('api.get.debt.read', { debt: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Debt>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useDebtCreateForm() {
+    const url = route('api.post.debt.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      category_id: '',
+      creditor_id: '',
+      supplier_id: '',
+      cash_account_id: '',
+      direct_amount_received: 0,
+      opening_amount_due: 0,
+      due_days: 0,
+      remarks: '',
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public useDebtEditForm(ulid: string) {
+    const url = route('api.post.debt.edit', { debt: ulid }, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      category_id: '',
+      creditor_id: '',
+      supplier_id: '',
+      cash_account_id: '',
+      direct_amount_received: 0,
+      opening_amount_due: 0,
+      due_days: 0,
+      remarks: '',
+      delete_payment_ids: [] as Array<string>,
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.debt.delete', { debt: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ErrorHandlerService.ts b/web/src/services/ErrorHandlerService.ts
index e2187fff6..7c14a2442 100644
--- a/web/src/services/ErrorHandlerService.ts
+++ b/web/src/services/ErrorHandlerService.ts
@@ -1,47 +1,47 @@
-import { AxiosError, AxiosResponse } from "axios";
-import { ServiceResponse } from "../types/services/ServiceResponse";
-
-export default class ErrorHandlerService {
-    public generateZiggyUrlErrorServiceResponse(message?: string): ServiceResponse<null> {
-        const result: ServiceResponse<null> = {
-            success: false,
-            errors: {
-                ziggy: [message ? message : 'Ziggy error: unknown'],
-            }
-        }
-
-        return result;
-    }
-
-    public generateAxiosValidationErrorServiceResponse(axiosErr: AxiosError): ServiceResponse<null> {
-        const result: ServiceResponse<null> = {
-            success: false,
-        }
-
-        const axiosResp = axiosErr.response as AxiosResponse;
-
-        const keys = Object.keys(axiosResp.data.errors);
-        for (const key of keys) {
-            if (result.errors == undefined) {
-                result.errors = {};
-            }
-
-            result.errors[key] = axiosResp.data.errors[key];
-        }
-
-        return result;
-    }
-
-    public generateAxiosErrorServiceResponse(axiosErr: AxiosError): ServiceResponse<null> {
-        const axiosResp = axiosErr.response as AxiosResponse;
-
-        const result: ServiceResponse<null> = {
-            success: false,
-            errors: {
-                axios: [axiosResp.data.message + ' (' + axiosResp.status + ':' + axiosResp.statusText + ')']
-            }
-        }
-
-        return result;
-    }
-}
\ No newline at end of file
+import { AxiosError, AxiosResponse } from 'axios';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+
+export default class ErrorHandlerService {
+  public generateZiggyUrlErrorServiceResponse(message?: string): ServiceResponse<null> {
+    const result: ServiceResponse<null> = {
+      success: false,
+      errors: {
+        ziggy: [message ? message : 'Ziggy error: unknown'],
+      },
+    };
+
+    return result;
+  }
+
+  public generateAxiosValidationErrorServiceResponse(axiosErr: AxiosError): ServiceResponse<null> {
+    const result: ServiceResponse<null> = {
+      success: false,
+    };
+
+    const axiosResp = axiosErr.response as AxiosResponse;
+
+    const keys = Object.keys(axiosResp.data.errors);
+    for (const key of keys) {
+      if (result.errors == undefined) {
+        result.errors = {};
+      }
+
+      result.errors[key] = axiosResp.data.errors[key];
+    }
+
+    return result;
+  }
+
+  public generateAxiosErrorServiceResponse(axiosErr: AxiosError): ServiceResponse<null> {
+    const axiosResp = axiosErr.response as AxiosResponse;
+
+    const result: ServiceResponse<null> = {
+      success: false,
+      errors: {
+        axios: [axiosResp.data.message + ' (' + axiosResp.status + ':' + axiosResp.statusText + ')'],
+      },
+    };
+
+    return result;
+  }
+}
diff --git a/web/src/services/ExpenseCategoryService.ts b/web/src/services/ExpenseCategoryService.ts
new file mode 100644
index 000000000..a1889e96c
--- /dev/null
+++ b/web/src/services/ExpenseCategoryService.ts
@@ -0,0 +1,252 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { ExpenseCategory } from '../types/models/ExpenseCategory';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  ExpenseCategoryReadAnyPaginateRequest,
+  ExpenseCategoryReadAnyGetRequest,
+} from '../types/services/expense-category/ExpenseCategoryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class ExpenseCategoryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useExpenseCategoryCreateForm() {
+    const url = route('api.post.expense_category.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      parent_id: null as string | null,
+      category_type: 'expense' as 'expense' | 'other_expense' | null,
+      code: '_AUTO_',
+      name: '',
+      sequence: 0,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: ExpenseCategoryReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<ExpenseCategory>> | null>> {
+    const result: ServiceResponse<Collection<Array<ExpenseCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.parent_id) queryParams['parent_id'] = args.parent_id;
+      if (args.has_parent !== undefined) {
+        queryParams['has_parent'] = args.has_parent;
+      }
+      if (args.has_children !== undefined) {
+        queryParams['has_children'] = args.has_children;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.expense_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<ExpenseCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: ExpenseCategoryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<ExpenseCategory>> | null>> {
+    const result: ServiceResponse<Resource<Array<ExpenseCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.parent_id) queryParams['parent_id'] = args.parent_id;
+      if (args.has_parent !== undefined) {
+        queryParams['has_parent'] = args.has_parent ? 1 : 0;
+      }
+      if (args.has_children !== undefined) {
+        queryParams['has_children'] = args.has_children ? 1 : 0;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.expense_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<ExpenseCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<ExpenseCategory | null>> {
+    const result: ServiceResponse<ExpenseCategory | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.expense_category.read',
+        {
+          expense_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<ExpenseCategory>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useExpenseCategoryEditForm(ulid: string) {
+    const url = route(
+      'api.post.expense_category.edit',
+      {
+        expense_category: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      category_type: null as 'expense' | 'other_expense' | null,
+      code: '_AUTO_',
+      name: '',
+      sequence: 0,
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.expense_category.delete',
+        {
+          expense_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ExpenseImageService.ts b/web/src/services/ExpenseImageService.ts
new file mode 100644
index 000000000..821cde1b4
--- /dev/null
+++ b/web/src/services/ExpenseImageService.ts
@@ -0,0 +1,50 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosResponse, AxiosError, isAxiosError } from 'axios';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import ErrorHandlerService from './ErrorHandlerService';
+import { Resource } from '../types/resources/Resource';
+import { ExpenseImage } from '../types/models/ExpenseImage';
+
+export default class ExpenseImageService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async upload(file: File): Promise<ServiceResponse<ExpenseImage | null>> {
+    const result: ServiceResponse<ExpenseImage | null> = {
+      success: false,
+    };
+
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const url = route('api.post.expense.image.upload', undefined, false, this.ziggyRoute);
+
+      axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
+
+      const response: AxiosResponse<Resource<ExpenseImage>> = await axios.post(url, formData);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ExpensePaymentService.ts b/web/src/services/ExpensePaymentService.ts
new file mode 100644
index 000000000..3489d1b31
--- /dev/null
+++ b/web/src/services/ExpensePaymentService.ts
@@ -0,0 +1,181 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { ExpensePayment } from '../types/models/ExpensePayment';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import type {
+  ExpensePaymentReadAnyGetRequest,
+  ExpensePaymentReadAnyPaginateRequest,
+} from '../types/services/expense-payment/ExpensePaymentRequest';
+
+export default class ExpensePaymentService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: ExpensePaymentReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<ExpensePayment>> | null>> {
+    const result: ServiceResponse<Collection<Array<ExpensePayment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.expense_id) queryParams['expense_id'] = args.expense_id;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.expense_payment.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<ExpensePayment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: ExpensePaymentReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<ExpensePayment>> | null>> {
+    const result: ServiceResponse<Resource<Array<ExpensePayment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.expense_id) queryParams['expense_id'] = args.expense_id;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.expense_payment.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<ExpensePayment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<ExpensePayment | null>> {
+    const result: ServiceResponse<ExpensePayment | null> = { success: false };
+
+    try {
+      const url = route('api.get.expense_payment.read', { expense_payment: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<ExpensePayment>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useExpensePaymentCreateForm() {
+    const url = route('api.post.expense_payment.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      expense_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+  }
+
+  public useExpensePaymentEditForm(ulid: string) {
+    const url = route('api.post.expense_payment.edit', { expense_payment: ulid }, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      expense_id: '',
+      code: '_AUTO_',
+      date: '',
+      cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.expense_payment.delete', { expense_payment: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ExpenseService.ts b/web/src/services/ExpenseService.ts
new file mode 100644
index 000000000..365eca793
--- /dev/null
+++ b/web/src/services/ExpenseService.ts
@@ -0,0 +1,203 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { Expense } from '../types/models/Expense';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import type {
+  ExpenseReadAnyGetRequest,
+  ExpenseReadAnyPaginateRequest,
+} from '../types/services/expense/ExpenseRequest';
+
+export default class ExpenseService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: ExpenseReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Expense>> | null>> {
+    const result: ServiceResponse<Collection<Array<Expense>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.expense_category_id) queryParams['expense_category_id'] = args.expense_category_id;
+      if (args.is_amount_payable_paid_off !== null && args.is_amount_payable_paid_off !== undefined) {
+        queryParams['is_amount_payable_paid_off'] = args.is_amount_payable_paid_off;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.expense.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<Expense>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: ExpenseReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<Expense>> | null>> {
+    const result: ServiceResponse<Resource<Array<Expense>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.expense_category_id) queryParams['expense_category_id'] = args.expense_category_id;
+      if (args.is_amount_payable_paid_off !== null && args.is_amount_payable_paid_off !== undefined) {
+        queryParams['is_amount_payable_paid_off'] = args.is_amount_payable_paid_off ? 1 : 0;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.expense.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<Expense>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Expense | null>> {
+    const result: ServiceResponse<Expense | null> = { success: false };
+
+    try {
+      const url = route('api.get.expense.read', { expense: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Expense>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useExpenseCreateForm() {
+    const url = route('api.post.expense.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      expense_category_id: '',
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_payable: 0,
+      due_days: 0,
+      remarks: '',
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public useExpenseEditForm(ulid: string) {
+    const url = route('api.post.expense.edit', { expense: ulid }, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      expense_category_id: '',
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_payable: 0,
+      due_days: 0,
+      remarks: '',
+      delete_image_ids: [] as Array<string>,
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+      delete_payment_ids: [] as Array<string>,
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.expense.delete', { expense: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/IncomeCategoryService.ts b/web/src/services/IncomeCategoryService.ts
new file mode 100644
index 000000000..e6acdc697
--- /dev/null
+++ b/web/src/services/IncomeCategoryService.ts
@@ -0,0 +1,250 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { IncomeCategory } from '../types/models/IncomeCategory';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  IncomeCategoryReadAnyPaginateRequest,
+  IncomeCategoryReadAnyGetRequest,
+} from '../types/services/income-category/IncomeCategoryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class IncomeCategoryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useIncomeCategoryCreateForm() {
+    const url = route('api.post.income_category.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      parent_id: null as string | null,
+      code: '_AUTO_',
+      name: '',
+      sequence: 0,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: IncomeCategoryReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<IncomeCategory>> | null>> {
+    const result: ServiceResponse<Collection<Array<IncomeCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.parent_id) queryParams['parent_id'] = args.parent_id;
+      if (args.has_parent !== undefined) {
+        queryParams['has_parent'] = args.has_parent;
+      }
+      if (args.has_children !== undefined) {
+        queryParams['has_children'] = args.has_children;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.income_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<IncomeCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: IncomeCategoryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<IncomeCategory>> | null>> {
+    const result: ServiceResponse<Resource<Array<IncomeCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.parent_id) queryParams['parent_id'] = args.parent_id;
+      if (args.has_parent !== undefined) {
+        queryParams['has_parent'] = args.has_parent ? 1 : 0;
+      }
+      if (args.has_children !== undefined) {
+        queryParams['has_children'] = args.has_children ? 1 : 0;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.income_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<IncomeCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<IncomeCategory | null>> {
+    const result: ServiceResponse<IncomeCategory | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.income_category.read',
+        {
+          income_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<IncomeCategory>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useIncomeCategoryEditForm(ulid: string) {
+    const url = route(
+      'api.post.income_category.edit',
+      {
+        income_category: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      sequence: 0,
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.income_category.delete',
+        {
+          income_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/IncomeImageService.ts b/web/src/services/IncomeImageService.ts
new file mode 100644
index 000000000..772a3ed1a
--- /dev/null
+++ b/web/src/services/IncomeImageService.ts
@@ -0,0 +1,50 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosResponse, AxiosError, isAxiosError } from 'axios';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import ErrorHandlerService from './ErrorHandlerService';
+import { Resource } from '../types/resources/Resource';
+import { IncomeImage } from '../types/models/IncomeImage';
+
+export default class IncomeImageService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async upload(file: File): Promise<ServiceResponse<IncomeImage | null>> {
+    const result: ServiceResponse<IncomeImage | null> = {
+      success: false,
+    };
+
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const url = route('api.post.income.image.upload', undefined, false, this.ziggyRoute);
+
+      axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
+
+      const response: AxiosResponse<Resource<IncomeImage>> = await axios.post(url, formData);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/IncomePaymentService.ts b/web/src/services/IncomePaymentService.ts
new file mode 100644
index 000000000..b0cbc4e20
--- /dev/null
+++ b/web/src/services/IncomePaymentService.ts
@@ -0,0 +1,181 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { IncomePayment } from '../types/models/IncomePayment';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import type {
+  IncomePaymentReadAnyGetRequest,
+  IncomePaymentReadAnyPaginateRequest,
+} from '../types/services/income-payment/IncomePaymentRequest';
+
+export default class IncomePaymentService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: IncomePaymentReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<IncomePayment>> | null>> {
+    const result: ServiceResponse<Collection<Array<IncomePayment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.income_id) queryParams['income_id'] = args.income_id;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.income_payment.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<IncomePayment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: IncomePaymentReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<IncomePayment>> | null>> {
+    const result: ServiceResponse<Resource<Array<IncomePayment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.income_id) queryParams['income_id'] = args.income_id;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.income_payment.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<IncomePayment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<IncomePayment | null>> {
+    const result: ServiceResponse<IncomePayment | null> = { success: false };
+
+    try {
+      const url = route('api.get.income_payment.read', { income_payment: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<IncomePayment>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useIncomePaymentCreateForm() {
+    const url = route('api.post.income_payment.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      income_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+  }
+
+  public useIncomePaymentEditForm(ulid: string) {
+    const url = route('api.post.income_payment.edit', { income_payment: ulid }, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      income_id: '',
+      code: '_AUTO_',
+      date: '',
+      cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.income_payment.delete', { income_payment: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/IncomeService.ts b/web/src/services/IncomeService.ts
new file mode 100644
index 000000000..d19859ad5
--- /dev/null
+++ b/web/src/services/IncomeService.ts
@@ -0,0 +1,203 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { Income } from '../types/models/Income';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import type {
+  IncomeReadAnyGetRequest,
+  IncomeReadAnyPaginateRequest,
+} from '../types/services/income/IncomeRequest';
+
+export default class IncomeService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: IncomeReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Income>> | null>> {
+    const result: ServiceResponse<Collection<Array<Income>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.income_category_id) queryParams['income_category_id'] = args.income_category_id;
+      if (args.is_amount_receivable_paid_off !== null && args.is_amount_receivable_paid_off !== undefined) {
+        queryParams['is_amount_receivable_paid_off'] = args.is_amount_receivable_paid_off;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.income.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<Income>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: IncomeReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<Income>> | null>> {
+    const result: ServiceResponse<Resource<Array<Income>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.income_category_id) queryParams['income_category_id'] = args.income_category_id;
+      if (args.is_amount_receivable_paid_off !== null && args.is_amount_receivable_paid_off !== undefined) {
+        queryParams['is_amount_receivable_paid_off'] = args.is_amount_receivable_paid_off ? 1 : 0;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.income.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<Income>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Income | null>> {
+    const result: ServiceResponse<Income | null> = { success: false };
+
+    try {
+      const url = route('api.get.income.read', { income: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Income>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useIncomeCreateForm() {
+    const url = route('api.post.income.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      income_category_id: '',
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_receivable: 0,
+      due_days: 0,
+      remarks: '',
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public useIncomeEditForm(ulid: string) {
+    const url = route('api.post.income.edit', { income: ulid }, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      income_category_id: '',
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_receivable: 0,
+      due_days: 0,
+      remarks: '',
+      delete_image_ids: [] as Array<string>,
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+      delete_payment_ids: [] as Array<string>,
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.income.delete', { income: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/InvestorService.ts b/web/src/services/InvestorService.ts
new file mode 100644
index 000000000..76d25b5e2
--- /dev/null
+++ b/web/src/services/InvestorService.ts
@@ -0,0 +1,223 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Investor } from '../types/models/Investor';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import { InvestorReadAnyGetRequest, InvestorReadAnyPaginateRequest } from '../types/services/investor/InvestorRequest';
+
+export default class InvestorService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useInvestorCreateForm() {
+    const url = route('api.post.investor.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: InvestorReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Investor>> | null>> {
+    const result: ServiceResponse<Collection<Array<Investor>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.investor.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Investor>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: InvestorReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Investor>> | null>> {
+    const result: ServiceResponse<Resource<Array<Investor>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.investor.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Investor>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Investor | null>> {
+    const result: ServiceResponse<Investor | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.investor.read',
+        {
+          investor: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Investor>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useInvestorEditForm(ulid: string) {
+    const url = route(
+      'api.post.investor.edit',
+      {
+        investor: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.investor.delete',
+        {
+          investor: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/JournalEntryItemService.ts b/web/src/services/JournalEntryItemService.ts
new file mode 100644
index 000000000..b9c5110e6
--- /dev/null
+++ b/web/src/services/JournalEntryItemService.ts
@@ -0,0 +1,116 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import type { JournalEntryItem } from '../types/models/JournalEntry';
+import type { Resource } from '../types/resources/Resource';
+import type { Collection } from '../types/resources/Collection';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import type {
+  JournalEntryItemReadAnyGetRequest,
+  JournalEntryItemReadAnyPaginateRequest,
+} from '../types/services/journal-entry-item/JournalEntryItemRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+
+export default class JournalEntryItemService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: JournalEntryItemReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<JournalEntryItem>> | null>> {
+    const result: ServiceResponse<Collection<Array<JournalEntryItem>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {
+        company_id: args.company_id,
+        refresh: args.refresh ? 1 : 0,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      if (args.branch_id) queryParams.branch_id = args.branch_id;
+      if (args.search) queryParams.search = args.search;
+      if (args.start_date) queryParams.start_date = args.start_date;
+      if (args.end_date) queryParams.end_date = args.end_date;
+      if (args.journal_entry_id) queryParams.journal_entry_id = args.journal_entry_id;
+      if (args.chart_of_account_id) queryParams.chart_of_account_id = args.chart_of_account_id;
+      if (args.include_system_journals != null) queryParams.include_system_journals = args.include_system_journals ? 1 : 0;
+      if (args.include_id) queryParams.include_id = args.include_id;
+
+      const url = route('api.get.journal_entry_item.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<JournalEntryItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: JournalEntryItemReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<JournalEntryItem>> | null>> {
+    const result: ServiceResponse<Resource<Array<JournalEntryItem>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {
+        company_id: args.company_id,
+        refresh: args.refresh ? 1 : 0,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      if (args.branch_id) queryParams.branch_id = args.branch_id;
+      if (args.search) queryParams.search = args.search;
+      if (args.start_date) queryParams.start_date = args.start_date;
+      if (args.end_date) queryParams.end_date = args.end_date;
+      if (args.journal_entry_id) queryParams.journal_entry_id = args.journal_entry_id;
+      if (args.chart_of_account_id) queryParams.chart_of_account_id = args.chart_of_account_id;
+      if (args.include_system_journals != null) queryParams.include_system_journals = args.include_system_journals ? 1 : 0;
+      if (args.include_id) queryParams.include_id = args.include_id;
+
+      const url = route('api.get.journal_entry_item.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<JournalEntryItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/JournalEntryService.ts b/web/src/services/JournalEntryService.ts
new file mode 100644
index 000000000..ef0f24371
--- /dev/null
+++ b/web/src/services/JournalEntryService.ts
@@ -0,0 +1,195 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { JournalEntry } from '../types/models/JournalEntry';
+import { Resource } from '../types/resources/Resource';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { JournalEntryReadAnyGetRequest } from '../types/services/journal-entry/JournalEntryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class JournalEntryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useJournalEntryCreateForm() {
+    const url = route('api.post.journal_entry.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      source_type: null as string | null,
+      source_id: null as number | null,
+      reference_no: '',
+      remarks: '',
+      items: [] as Array<{
+        chart_of_account_id: string;
+        debit: number;
+        credit: number;
+        remarks: string | null;
+      }>,
+    });
+  }
+
+  public useJournalEntryEditForm(ulid: string) {
+    const url = route(
+      'api.post.journal_entry.edit',
+      {
+        journal_entry: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      reference_no: '',
+      remarks: '',
+      items: [] as Array<{
+        chart_of_account_id: string;
+        debit: number;
+        credit: number;
+        remarks: string | null;
+      }>,
+    });
+  }
+
+  public async readAnyGet(
+    args: JournalEntryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<JournalEntry>> | null>> {
+    const result: ServiceResponse<Resource<Array<JournalEntry>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh ? 1 : 0,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      if (args.branch_id) queryParams.branch_id = args.branch_id;
+      if (args.search) queryParams.search = args.search;
+      if (args.start_date) queryParams.start_date = args.start_date;
+      if (args.end_date) queryParams.end_date = args.end_date;
+      if (args.source_type) queryParams.source_type = args.source_type;
+      if (args.source_id) queryParams.source_id = args.source_id;
+
+      const url = route(
+        'api.get.journal_entry.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<JournalEntry>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<JournalEntry | null>> {
+    const result: ServiceResponse<JournalEntry | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.journal_entry.read',
+        {
+          journal_entry: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<JournalEntry>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.journal_entry.delete',
+        {
+          journal_entry: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PrepaidExpenseImageService.ts b/web/src/services/PrepaidExpenseImageService.ts
new file mode 100644
index 000000000..287631aee
--- /dev/null
+++ b/web/src/services/PrepaidExpenseImageService.ts
@@ -0,0 +1,50 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosResponse, AxiosError, isAxiosError } from 'axios';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import ErrorHandlerService from './ErrorHandlerService';
+import { Resource } from '../types/resources/Resource';
+import { PrepaidExpenseImage } from '../types/models/PrepaidExpenseImage';
+
+export default class PrepaidExpenseImageService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async upload(file: File): Promise<ServiceResponse<PrepaidExpenseImage | null>> {
+    const result: ServiceResponse<PrepaidExpenseImage | null> = {
+      success: false,
+    };
+
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const url = route('api.post.prepaid_expense.image.upload', undefined, false, this.ziggyRoute);
+
+      axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
+
+      const response: AxiosResponse<Resource<PrepaidExpenseImage>> = await axios.post(url, formData);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PrepaidExpenseService.ts b/web/src/services/PrepaidExpenseService.ts
new file mode 100644
index 000000000..025ab37db
--- /dev/null
+++ b/web/src/services/PrepaidExpenseService.ts
@@ -0,0 +1,205 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { PrepaidExpense } from '../types/models/PrepaidExpense';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import type {
+  PrepaidExpenseReadAnyGetRequest,
+  PrepaidExpenseReadAnyPaginateRequest,
+} from '../types/services/prepaid-expense/PrepaidExpenseRequest';
+
+export default class PrepaidExpenseService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: PrepaidExpenseReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PrepaidExpense>> | null>> {
+    const result: ServiceResponse<Collection<Array<PrepaidExpense>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.expense_category_id) queryParams['expense_category_id'] = args.expense_category_id;
+      if (args.is_amount_payable_paid_off !== null && args.is_amount_payable_paid_off !== undefined) {
+        queryParams['is_amount_payable_paid_off'] = args.is_amount_payable_paid_off;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.prepaid_expense.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<PrepaidExpense>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: PrepaidExpenseReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PrepaidExpense>> | null>> {
+    const result: ServiceResponse<Resource<Array<PrepaidExpense>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.expense_category_id) queryParams['expense_category_id'] = args.expense_category_id;
+      if (args.is_amount_payable_paid_off !== null && args.is_amount_payable_paid_off !== undefined) {
+        queryParams['is_amount_payable_paid_off'] = args.is_amount_payable_paid_off ? 1 : 0;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.prepaid_expense.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<PrepaidExpense>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PrepaidExpense | null>> {
+    const result: ServiceResponse<PrepaidExpense | null> = { success: false };
+
+    try {
+      const url = route('api.get.prepaid_expense.read', { prepaid_expense: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<PrepaidExpense>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public usePrepaidExpenseCreateForm() {
+    const url = route('api.post.prepaid_expense.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      expense_category_id: '',
+      estimated_useful_life: 0,
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_payable: 0,
+      due_days: 0,
+      remarks: '',
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public usePrepaidExpenseEditForm(ulid: string) {
+    const url = route('api.post.prepaid_expense.edit', { prepaid_expense: ulid }, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      expense_category_id: '',
+      estimated_useful_life: 0,
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_payable: 0,
+      due_days: 0,
+      remarks: '',
+      delete_image_ids: [] as Array<string>,
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+      delete_payment_ids: [] as Array<string>,
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.prepaid_expense.delete', { prepaid_expense: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PrepaidIncomeImageService.ts b/web/src/services/PrepaidIncomeImageService.ts
new file mode 100644
index 000000000..60f09fa42
--- /dev/null
+++ b/web/src/services/PrepaidIncomeImageService.ts
@@ -0,0 +1,50 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosResponse, AxiosError, isAxiosError } from 'axios';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import ErrorHandlerService from './ErrorHandlerService';
+import { Resource } from '../types/resources/Resource';
+import { PrepaidIncomeImage } from '../types/models/PrepaidIncomeImage';
+
+export default class PrepaidIncomeImageService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async upload(file: File): Promise<ServiceResponse<PrepaidIncomeImage | null>> {
+    const result: ServiceResponse<PrepaidIncomeImage | null> = {
+      success: false,
+    };
+
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const url = route('api.post.prepaid_income.image.upload', undefined, false, this.ziggyRoute);
+
+      axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
+
+      const response: AxiosResponse<Resource<PrepaidIncomeImage>> = await axios.post(url, formData);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PrepaidIncomeService.ts b/web/src/services/PrepaidIncomeService.ts
new file mode 100644
index 000000000..28db6526f
--- /dev/null
+++ b/web/src/services/PrepaidIncomeService.ts
@@ -0,0 +1,205 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { PrepaidIncome } from '../types/models/PrepaidIncome';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import type {
+  PrepaidIncomeReadAnyGetRequest,
+  PrepaidIncomeReadAnyPaginateRequest,
+} from '../types/services/prepaid-income/PrepaidIncomeRequest';
+
+export default class PrepaidIncomeService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: PrepaidIncomeReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PrepaidIncome>> | null>> {
+    const result: ServiceResponse<Collection<Array<PrepaidIncome>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.income_category_id) queryParams['income_category_id'] = args.income_category_id;
+      if (args.is_amount_receivable_paid_off !== null && args.is_amount_receivable_paid_off !== undefined) {
+        queryParams['is_amount_receivable_paid_off'] = args.is_amount_receivable_paid_off;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.prepaid_income.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<PrepaidIncome>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: PrepaidIncomeReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PrepaidIncome>> | null>> {
+    const result: ServiceResponse<Resource<Array<PrepaidIncome>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.income_category_id) queryParams['income_category_id'] = args.income_category_id;
+      if (args.is_amount_receivable_paid_off !== null && args.is_amount_receivable_paid_off !== undefined) {
+        queryParams['is_amount_receivable_paid_off'] = args.is_amount_receivable_paid_off ? 1 : 0;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.prepaid_income.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<PrepaidIncome>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PrepaidIncome | null>> {
+    const result: ServiceResponse<PrepaidIncome | null> = { success: false };
+
+    try {
+      const url = route('api.get.prepaid_income.read', { prepaid_income: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<PrepaidIncome>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public usePrepaidIncomeCreateForm() {
+    const url = route('api.post.prepaid_income.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      income_category_id: '',
+      estimated_useful_life: 0,
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_receivable: 0,
+      due_days: 0,
+      remarks: '',
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public usePrepaidIncomeEditForm(ulid: string) {
+    const url = route('api.post.prepaid_income.edit', { prepaid_income: ulid }, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      income_category_id: '',
+      estimated_useful_life: 0,
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_receivable: 0,
+      due_days: 0,
+      remarks: '',
+      delete_image_ids: [] as Array<string>,
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+      delete_payment_ids: [] as Array<string>,
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.prepaid_income.delete', { prepaid_income: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ProductCategoryService.ts b/web/src/services/ProductCategoryService.ts
new file mode 100644
index 000000000..d1f3cb687
--- /dev/null
+++ b/web/src/services/ProductCategoryService.ts
@@ -0,0 +1,260 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { ProductCategory } from '../types/models/ProductCategory';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  ProductCategoryReadAnyPaginateRequest,
+  ProductCategoryReadAnyGetRequest,
+} from '../types/services/product-category/ProductCategoryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import CacheService from './CacheService';
+import { DropDownOption } from '../types/models/DropDownOption';
+
+export default class ProductCategoryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+  private cacheService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+    this.cacheService = new CacheService();
+  }
+
+  public useProductCategoryCreateForm() {
+    const url = route('api.post.product_category.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      type: 1,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: ProductCategoryReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<ProductCategory>> | null>> {
+    const result: ServiceResponse<Collection<Array<ProductCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.type) queryParams['type'] = args.type;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.product_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<ProductCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: ProductCategoryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<ProductCategory>> | null>> {
+    const result: ServiceResponse<Resource<Array<ProductCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.type) queryParams['type'] = args.type;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.product_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<ProductCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<ProductCategory | null>> {
+    const result: ServiceResponse<ProductCategory | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.product_category.read',
+        {
+          product_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<ProductCategory>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useProductCategoryEditForm(ulid: string) {
+    const url = route(
+      'api.post.product_category.edit',
+      {
+        product_category: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      type: 1,
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.product_category.delete',
+        {
+          product_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async getTypes(): Promise<Array<DropDownOption> | null> {
+    const ddlName = 'productCategoryTypesDDL';
+    let result: Array<DropDownOption> = [];
+
+    try {
+      if (this.cacheService.getCachedDDL(ddlName) == null) {
+        const url = route('api.get.product_category.read_types', undefined, false, this.ziggyRoute);
+
+        const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
+
+        this.cacheService.setCachedDDL(ddlName, response.data);
+      }
+
+      const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
+
+      if (cachedData != null) {
+        result = cachedData as Array<DropDownOption>;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      return result;
+    }
+  }
+}
diff --git a/web/src/services/ProductImageService.ts b/web/src/services/ProductImageService.ts
new file mode 100644
index 000000000..3f4f4f489
--- /dev/null
+++ b/web/src/services/ProductImageService.ts
@@ -0,0 +1,50 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosResponse, AxiosError, isAxiosError } from 'axios';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import ErrorHandlerService from './ErrorHandlerService';
+import { Resource } from '../types/resources/Resource';
+import { ProductImage } from '../types/models/ProductImage';
+
+export default class ProductImageService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async upload(file: File): Promise<ServiceResponse<ProductImage | null>> {
+    const result: ServiceResponse<ProductImage | null> = {
+      success: false,
+    };
+
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const url = route('api.post.product.image.upload', undefined, false, this.ziggyRoute);
+
+      axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
+
+      const response: AxiosResponse<Resource<ProductImage>> = await axios.post(url, formData);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ProductService.ts b/web/src/services/ProductService.ts
new file mode 100644
index 000000000..e0e90374c
--- /dev/null
+++ b/web/src/services/ProductService.ts
@@ -0,0 +1,378 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Product } from '../types/models/Product';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { ProductReadAnyPaginateRequest, ProductReadAnyGetRequest } from '../types/services/product/ProductRequest';
+import { ProductUnitStoreRequest, ProductUnitUpdateRequest } from '../types/services/product-unit/ProductUnitRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import CacheService from './CacheService';
+
+export default class ProductService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+  private cacheService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+    this.cacheService = new CacheService();
+  }
+
+  public async readAnyPaginate(
+    args: ProductReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Product>> | null>> {
+    const result: ServiceResponse<Collection<Array<Product>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.category_id) queryParams['category_id'] = args.category_id;
+      if (args.brand_id) queryParams['brand_id'] = args.brand_id;
+      if (args.default_vat_profile_id) queryParams['default_vat_profile_id'] = args.default_vat_profile_id;
+      if (args.is_price_include_vat !== undefined && args.is_price_include_vat !== null)
+        queryParams['is_price_include_vat'] = args.is_price_include_vat;
+      if (args.is_use_serial_number !== undefined && args.is_use_serial_number !== null)
+        queryParams['is_use_serial_number'] = args.is_use_serial_number;
+      if (args.is_expirable !== undefined && args.is_expirable !== null)
+        queryParams['is_expirable'] = args.is_expirable;
+      if (args.type) queryParams['type'] = args.type;
+      if (args.status) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      if (args.with_remaining_stock) {
+        const wrs = args.with_remaining_stock;
+        const wrsQuery: Record<string, any> = {};
+
+        if (wrs.end_date !== undefined && wrs.end_date !== null) wrsQuery['end_date'] = wrs.end_date;
+        if (wrs.warehouse_id) wrsQuery['warehouse_id'] = wrs.warehouse_id;
+        if (wrs.stock_filter) wrsQuery['stock_filter'] = wrs.stock_filter;
+        if (wrs.less_than !== undefined && wrs.less_than !== null) wrsQuery['less_than'] = wrs.less_than;
+        if (wrs.greater_than !== undefined && wrs.greater_than !== null) wrsQuery['greater_than'] = wrs.greater_than;
+        if (wrs.include_service_products !== undefined && wrs.include_service_products !== null)
+          wrsQuery['include_service_products'] = wrs.include_service_products;
+        if (wrs.sort_by_remaining_stock) wrsQuery['sort_by_remaining_stock'] = wrs.sort_by_remaining_stock;
+
+        if (Object.keys(wrsQuery).length > 0) queryParams['with_remaining_stock'] = wrsQuery;
+      }
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.product.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Product>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: ProductReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Product>> | null>> {
+    const result: ServiceResponse<Resource<Array<Product>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.category_id) queryParams['category_id'] = args.category_id;
+      if (args.brand_id) queryParams['brand_id'] = args.brand_id;
+      if (args.default_vat_profile_id) queryParams['default_vat_profile_id'] = args.default_vat_profile_id;
+      if (args.is_price_include_vat !== undefined && args.is_price_include_vat !== null)
+        queryParams['is_price_include_vat'] = args.is_price_include_vat ? 1 : 0;
+      if (args.is_use_serial_number !== undefined && args.is_use_serial_number !== null)
+        queryParams['is_use_serial_number'] = args.is_use_serial_number ? 1 : 0;
+      if (args.is_expirable !== undefined && args.is_expirable !== null)
+        queryParams['is_expirable'] = args.is_expirable ? 1 : 0;
+      if (args.type) queryParams['type'] = args.type;
+      if (args.status) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      if (args.with_remaining_stock) {
+        const wrs = args.with_remaining_stock;
+        const wrsQuery: Record<string, any> = {};
+
+        if (wrs.end_date !== undefined && wrs.end_date !== null) wrsQuery['end_date'] = wrs.end_date;
+        if (wrs.warehouse_id) wrsQuery['warehouse_id'] = wrs.warehouse_id;
+        if (wrs.stock_filter) wrsQuery['stock_filter'] = wrs.stock_filter;
+        if (wrs.less_than !== undefined && wrs.less_than !== null) wrsQuery['less_than'] = wrs.less_than;
+        if (wrs.greater_than !== undefined && wrs.greater_than !== null) wrsQuery['greater_than'] = wrs.greater_than;
+        if (wrs.include_service_products !== undefined && wrs.include_service_products !== null)
+          wrsQuery['include_service_products'] = wrs.include_service_products ? 1 : 0;
+        if (wrs.sort_by_remaining_stock) wrsQuery['sort_by_remaining_stock'] = wrs.sort_by_remaining_stock;
+
+        if (Object.keys(wrsQuery).length > 0) queryParams['with_remaining_stock'] = wrsQuery;
+      }
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.product.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Product>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Product | null>> {
+    const result: ServiceResponse<Product | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.product.read',
+        {
+          product: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Product>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useProductPhysicalStoreForm() {
+    const url = route('api.post.product.save.physical', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      category_id: '',
+      name: '',
+      brand_id: null,
+      default_vat_profile_id: null,
+      is_price_include_vat: false,
+      is_use_serial_number: false,
+      is_expirable: false,
+      remarks: null,
+      type: 1,
+      status: 1,
+
+      product_units: [] as ProductUnitStoreRequest[],
+
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+    });
+
+    return form;
+  }
+
+  public useProductPhysicalUpdateForm(ulid: string) {
+    const url = route(
+      'api.post.product.edit.physical',
+      {
+        product: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '',
+      category_id: '',
+      name: '',
+      brand_id: null,
+      default_vat_profile_id: null,
+      is_price_include_vat: false,
+      is_use_serial_number: false,
+      is_expirable: false,
+      remarks: null,
+      type: 1,
+      status: 1,
+
+      delete_product_unit_ids: [] as string[],
+      product_units: [] as ProductUnitUpdateRequest[],
+
+      delete_image_ids: [] as string[],
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+    });
+
+    return form;
+  }
+
+  public useProductServiceStoreForm() {
+    const url = route('api.post.product.save.service', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      category_id: '',
+      name: '',
+      default_vat_profile_id: null,
+      is_price_include_vat: false,
+      remarks: null,
+      status: '',
+      unit_id: '',
+      price: 0,
+      point: 0,
+
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+    });
+
+    return form;
+  }
+
+  public useProductServiceUpdateForm(ulid: string) {
+    const url = route(
+      'api.post.product.edit.service',
+      {
+        product: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '',
+      category_id: '',
+      name: '',
+      default_vat_profile_id: null,
+      is_price_include_vat: false,
+      remarks: null,
+      status: '',
+      unit_id: '',
+      price: 0,
+      point: 0,
+
+      product_units: [],
+      
+      delete_image_ids: [] as string[],
+      image_hashes: [] as {
+        hash: string;
+        is_main: boolean;
+      }[],
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.product.delete',
+        {
+          product: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ProfileService.ts b/web/src/services/ProfileService.ts
index 89c9e5268..989890951 100644
--- a/web/src/services/ProfileService.ts
+++ b/web/src/services/ProfileService.ts
@@ -1,380 +1,379 @@
-import { useZiggyRouteStore } from "../stores/ziggy-route";
-import { route, Config } from "ziggy-js";
-import { client, useForm } from "laravel-precognition-vue";
-import { ServiceResponse } from "../types/services/ServiceResponse";
-import { AxiosResponse, isAxiosError, AxiosError } from "axios";
-import axios from "../axios";
-import ErrorHandlerService from "./ErrorHandlerService";
-import { TwoFactorResponse, QRCode, SecretKeyResponse } from "../types/models/TwoFactorAuthentication";
-import { ConfirmPasswordStatusResponse } from "../types/models/ConfirmPassword";
-import { StatusCode } from "../types/enums/StatusCode";
-import { UserProfile } from "../types/models/UserProfile";
-import { Resource } from "../types/resources/Resource";
-
-export default class ProfileService {
-  private ziggyRoute: Config;
-  private ziggyRouteStore = useZiggyRouteStore();
-  private errorHandlerService;
-
-  constructor() {
-    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
-
-    this.errorHandlerService = new ErrorHandlerService();
-  }
-
-  public async readProfile(): Promise<ServiceResponse<UserProfile | null>> {
-    const result: ServiceResponse<UserProfile | null> = {
-      success: false,
-    };
-
-    try {
-      const url = route('api.get.db.module.profile.read', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<Resource<UserProfile>> = await axios.get(url);
-
-      result.success = true;
-      result.data = response.data.data;
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public useUpdateUserProfileForm() {
-    const url = route('api.post.db.module.profile.update.user_profile', undefined, true, this.ziggyRoute);
-
-    client.axios().defaults.withCredentials = true;
-    client.axios().defaults.withXSRFToken = true;
-    const form = useForm('post', url, {
-      name: '',
-    });
-
-    return form;
-  }
-
-  public useUpdatePersonalInfoForm() {
-    const url = route('api.post.db.module.profile.update.personal_info', undefined, true, this.ziggyRoute);
-
-    client.axios().defaults.withCredentials = true;
-    client.axios().defaults.withXSRFToken = true;
-    const form = useForm('post', url, {
-      first_name: '',
-      last_name: '',
-      address: '',
-      city: '',
-      postal_code: '',
-      country: '',
-      img_path: '',
-      tax_id: 0,
-      ic_num: 0,
-      status: '',
-      remarks: '',
-    });
-
-    return form;
-  }
-
-  public async sendEmailVerification() {
-    const result: ServiceResponse<null> = {
-      success: false,
-    };
-
-    try {
-      const url = route('api.post.db.module.profile.send.email_verification', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<null> = await axios.post(url);
-
-      if (response.status == StatusCode.OK) {
-        result.success = true;
-      }
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public useUpdateAccountSettingsForm() {
-    const url = route('api.post.db.module.profile.update.account_settings', undefined, true, this.ziggyRoute);
-
-    client.axios().defaults.withCredentials = true;
-    client.axios().defaults.withXSRFToken = true;
-    const form = useForm('post', url, {
-      theme: 'side-menu-light-full',
-      date_format: 'dd_MMM_yyyy',
-      time_format: 'hh_mm_ss',
-    });
-
-    return form;
-  }
-
-  public useUpdateUserRolesForm() {
-    const url = route('api.post.db.module.profile.update.roles', undefined, true, this.ziggyRoute);
-
-    client.axios().defaults.withCredentials = true;
-    client.axios().defaults.withXSRFToken = true;
-    const form = useForm('post', url, {
-      roles: '',
-    });
-
-    return form;
-  }
-
-  public useUpdatePasswordForm() {
-    const url = route('api.post.db.module.profile.update.password', undefined, true, this.ziggyRoute);
-
-    client.axios().defaults.withCredentials = true;
-    client.axios().defaults.withXSRFToken = true;
-    const form = useForm('post', url, {
-      current_password: '',
-      password: '',
-      password_confirmation: '',
-    });
-
-    return form;
-  }
-
-  public useUpdateTokenForm() {
-    const url = route('api.post.db.module.profile.update.tokens', undefined, true, this.ziggyRoute);
-
-    client.axios().defaults.withCredentials = true;
-    client.axios().defaults.withXSRFToken = true;
-    const form = useForm('post', url, {
-      reset_tokens: true,
-    });
-
-    return form;
-  }
-
-  public async enableTwoFactor(): Promise<ServiceResponse<TwoFactorResponse | null>> {
-    const result: ServiceResponse<TwoFactorResponse | null> = {
-      success: false,
-    }
-
-    try {
-      const url = route('two-factor.enable', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<TwoFactorResponse> = await axios.post(url);
-
-      if (response.status == StatusCode.OK) {
-        result.success = true;
-        result.data = response.data;
-      } else {
-        result.success = false;
-        result.data = response.data
-      }
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public async disableTwoFactor(): Promise<ServiceResponse<TwoFactorResponse | null>> {
-    const result: ServiceResponse<TwoFactorResponse | null> = {
-      success: false,
-    }
-
-    try {
-      const url = route('two-factor.disable', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<TwoFactorResponse> = await axios.delete(url);
-
-      if (response.status == StatusCode.OK) {
-        result.success = true;
-        result.data = response.data;
-      } else {
-        result.success = false;
-        result.data = response.data;
-      }
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public async confirmPassword(password: string): Promise<ServiceResponse<TwoFactorResponse | null>> {
-    const result: ServiceResponse<TwoFactorResponse | null> = {
-      success: false,
-    }
-
-    try {
-      const url = route('password.confirm', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<TwoFactorResponse> = await axios.post(url, {
-        password: password
-      });
-
-      if (response.status == StatusCode.OK || response.status == StatusCode.Created) {
-        result.success = true;
-      } else {
-        result.success = false;
-        result.data = response.data;
-      }
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public async confirmPasswordStatus(): Promise<ServiceResponse<ConfirmPasswordStatusResponse | null>> {
-    const result: ServiceResponse<ConfirmPasswordStatusResponse | null> = {
-      success: false,
-    }
-
-    try {
-      const url = route('password.confirmation', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<ConfirmPasswordStatusResponse> = await axios.get(url);
-
-      result.success = true;
-      result.data = response.data;
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public async TwoFactorAuthenticationConfirmed(code: string): Promise<ServiceResponse<TwoFactorResponse | null>> {
-    const result: ServiceResponse<TwoFactorResponse | null> = {
-      success: false,
-    }
-
-    try {
-      const url = route('two-factor.confirm', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<TwoFactorResponse | null> = await axios.post(url, {
-        code: code
-      });
-
-      result.success = true;
-      result.data = response.data;
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public async twoFactorQR(): Promise<ServiceResponse<QRCode | null>> {
-    const result: ServiceResponse<QRCode | null> = {
-      success: false,
-    }
-
-    try {
-      const url = route('two-factor.qr-code', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<QRCode> = await axios.get(url);
-
-      result.success = true;
-      result.data = response.data;
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public async twoFactorRecoveryCodes(): Promise<ServiceResponse<Array<string> | null>> {
-    const result: ServiceResponse<Array<string> | null> = {
-      success: false,
-    }
-
-    try {
-      const url = route('two-factor.recovery-codes', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<Array<string>> = await axios.get(url);
-
-      result.success = true;
-      result.data = response.data;
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-
-  public async twoFactorSecretKey(): Promise<ServiceResponse<SecretKeyResponse | null>> {
-    const result: ServiceResponse<SecretKeyResponse | null> = {
-      success: false,
-    }
-
-    try {
-      const url = route('two-factor.secret-key', undefined, false, this.ziggyRoute);
-
-      const response: AxiosResponse<SecretKeyResponse> = await axios.get(url);
-
-      result.success = true;
-      result.data = response.data;
-
-      return result;
-    } catch (e: unknown) {
-      if (e instanceof Error && e.message.includes('Ziggy error')) {
-        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-      } else if (isAxiosError(e)) {
-        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-      } else {
-        return result;
-      }
-    }
-  }
-}
-
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { client, useForm } from 'laravel-precognition-vue';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosResponse, isAxiosError, AxiosError } from 'axios';
+import axios from '../axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { TwoFactorResponse, QRCode, SecretKeyResponse } from '../types/models/TwoFactorAuthentication';
+import { ConfirmPasswordStatusResponse } from '../types/models/ConfirmPassword';
+import { StatusCode } from '../types/enums/StatusCode';
+import { UserProfile } from '../types/models/UserProfile';
+import { Resource } from '../types/resources/Resource';
+
+export default class ProfileService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readProfile(): Promise<ServiceResponse<UserProfile | null>> {
+    const result: ServiceResponse<UserProfile | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.get.db.module.profile.read', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Resource<UserProfile>> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useUpdateUserProfileForm() {
+    const url = route('api.post.db.module.profile.update.user_profile', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      name: '',
+    });
+
+    return form;
+  }
+
+  public useUpdatePersonalInfoForm() {
+    const url = route('api.post.db.module.profile.update.personal_info', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      first_name: '',
+      last_name: '',
+      address: '',
+      city: '',
+      postal_code: '',
+      country: '',
+      img_path: '',
+      tax_id: 0,
+      ic_num: 0,
+      status: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async sendEmailVerification() {
+    const result: ServiceResponse<null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.post.db.module.profile.send.email_verification', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useUpdateAccountSettingsForm() {
+    const url = route('api.post.db.module.profile.update.account_settings', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      theme: 'side-menu-light-full',
+      date_format: 'dd_MMM_yyyy',
+      time_format: 'hh_mm_ss',
+    });
+
+    return form;
+  }
+
+  public useUpdateUserRolesForm() {
+    const url = route('api.post.db.module.profile.update.roles', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      roles: '',
+    });
+
+    return form;
+  }
+
+  public useUpdatePasswordForm() {
+    const url = route('api.post.db.module.profile.update.password', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      current_password: '',
+      password: '',
+      password_confirmation: '',
+    });
+
+    return form;
+  }
+
+  public useUpdateTokenForm() {
+    const url = route('api.post.db.module.profile.update.tokens', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      reset_tokens: true,
+    });
+
+    return form;
+  }
+
+  public async enableTwoFactor(): Promise<ServiceResponse<TwoFactorResponse | null>> {
+    const result: ServiceResponse<TwoFactorResponse | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('two-factor.enable', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<TwoFactorResponse> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      } else {
+        result.success = false;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async disableTwoFactor(): Promise<ServiceResponse<TwoFactorResponse | null>> {
+    const result: ServiceResponse<TwoFactorResponse | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('two-factor.disable', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<TwoFactorResponse> = await axios.delete(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      } else {
+        result.success = false;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async confirmPassword(password: string): Promise<ServiceResponse<TwoFactorResponse | null>> {
+    const result: ServiceResponse<TwoFactorResponse | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('password.confirm', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<TwoFactorResponse> = await axios.post(url, {
+        password: password,
+      });
+
+      if (response.status == StatusCode.OK || response.status == StatusCode.Created) {
+        result.success = true;
+      } else {
+        result.success = false;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async confirmPasswordStatus(): Promise<ServiceResponse<ConfirmPasswordStatusResponse | null>> {
+    const result: ServiceResponse<ConfirmPasswordStatusResponse | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('password.confirmation', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<ConfirmPasswordStatusResponse> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async TwoFactorAuthenticationConfirmed(code: string): Promise<ServiceResponse<TwoFactorResponse | null>> {
+    const result: ServiceResponse<TwoFactorResponse | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('two-factor.confirm', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<TwoFactorResponse | null> = await axios.post(url, {
+        code: code,
+      });
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async twoFactorQR(): Promise<ServiceResponse<QRCode | null>> {
+    const result: ServiceResponse<QRCode | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('two-factor.qr-code', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<QRCode> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async twoFactorRecoveryCodes(): Promise<ServiceResponse<Array<string> | null>> {
+    const result: ServiceResponse<Array<string> | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('two-factor.recovery-codes', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Array<string>> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async twoFactorSecretKey(): Promise<ServiceResponse<SecretKeyResponse | null>> {
+    const result: ServiceResponse<SecretKeyResponse | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('two-factor.secret-key', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<SecretKeyResponse> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PurchaseAdditionalCostCategoryService.ts b/web/src/services/PurchaseAdditionalCostCategoryService.ts
new file mode 100644
index 000000000..4006c5213
--- /dev/null
+++ b/web/src/services/PurchaseAdditionalCostCategoryService.ts
@@ -0,0 +1,224 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { PurchaseAdditionalCostCategory } from '../types/models/PurchaseAdditionalCostCategory';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  PurchaseAdditionalCostCategoryReadAnyPaginateRequest,
+  PurchaseAdditionalCostCategoryReadAnyGetRequest,
+} from '../types/services/purchase-additional-cost-category/PurchaseAdditionalCostCategoryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class PurchaseAdditionalCostCategoryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public usePurchaseAdditionalCostCategoryCreateForm() {
+    const url = route('api.post.purchase_additional_cost_category.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseAdditionalCostCategoryReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PurchaseAdditionalCostCategory>> | null>> {
+    const result: ServiceResponse<Collection<Array<PurchaseAdditionalCostCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.purchase_additional_cost_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<PurchaseAdditionalCostCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseAdditionalCostCategoryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PurchaseAdditionalCostCategory>> | null>> {
+    const result: ServiceResponse<Resource<Array<PurchaseAdditionalCostCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.purchase_additional_cost_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<PurchaseAdditionalCostCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PurchaseAdditionalCostCategory | null>> {
+    const result: ServiceResponse<PurchaseAdditionalCostCategory | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.purchase_additional_cost_category.read',
+        {
+          purchase_additional_cost_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<PurchaseAdditionalCostCategory>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public usePurchaseAdditionalCostCategoryEditForm(ulid: string) {
+    const url = route(
+      'api.post.purchase_additional_cost_category.edit',
+      {
+        purchase_additional_cost_category: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.purchase_additional_cost_category.delete',
+        {
+          purchase_additional_cost_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PurchaseAdditionalCostPaymentService.ts b/web/src/services/PurchaseAdditionalCostPaymentService.ts
new file mode 100644
index 000000000..5aa4d1ac1
--- /dev/null
+++ b/web/src/services/PurchaseAdditionalCostPaymentService.ts
@@ -0,0 +1,196 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { PurchaseAdditionalCostPayment } from '../types/models/PurchaseAdditionalCostPayment';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  PurchaseAdditionalCostPaymentReadAnyGetRequest,
+  PurchaseAdditionalCostPaymentReadAnyPaginateRequest,
+} from '../types/services/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class PurchaseAdditionalCostPaymentService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseAdditionalCostPaymentReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PurchaseAdditionalCostPayment>> | null>> {
+    const result: ServiceResponse<Collection<Array<PurchaseAdditionalCostPayment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.purchase_additional_cost_id) queryParams['purchase_additional_cost_id'] = args.purchase_additional_cost_id;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.purchase_additional_cost_payment.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<PurchaseAdditionalCostPayment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseAdditionalCostPaymentReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PurchaseAdditionalCostPayment>> | null>> {
+    const result: ServiceResponse<Resource<Array<PurchaseAdditionalCostPayment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.purchase_additional_cost_id) queryParams['purchase_additional_cost_id'] = args.purchase_additional_cost_id;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.purchase_additional_cost_payment.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<PurchaseAdditionalCostPayment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PurchaseAdditionalCostPayment | null>> {
+    const result: ServiceResponse<PurchaseAdditionalCostPayment | null> = { success: false };
+
+    try {
+      const url = route(
+        'api.get.purchase_additional_cost_payment.read',
+        { purchase_additional_cost_payment: ulid },
+        false,
+        this.ziggyRoute,
+      );
+      const response: AxiosResponse<Resource<PurchaseAdditionalCostPayment>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public usePurchaseAdditionalCostPaymentCreateForm() {
+    const url = route('api.post.purchase_additional_cost_payment.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      purchase_additional_cost_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+  }
+
+  public usePurchaseAdditionalCostPaymentEditForm(ulid: string) {
+    const url = route(
+      'api.post.purchase_additional_cost_payment.edit',
+      { purchase_additional_cost_payment: ulid },
+      true,
+      this.ziggyRoute,
+    );
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      purchase_additional_cost_id: '',
+      code: '_AUTO_',
+      date: '',
+      cash_account_id: '',
+      amount: 0,
+      remarks: '',
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route(
+        'api.post.purchase_additional_cost_payment.delete',
+        { purchase_additional_cost_payment: ulid },
+        false,
+        this.ziggyRoute,
+      );
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PurchaseAdditionalCostService.ts b/web/src/services/PurchaseAdditionalCostService.ts
new file mode 100644
index 000000000..10bb023e3
--- /dev/null
+++ b/web/src/services/PurchaseAdditionalCostService.ts
@@ -0,0 +1,204 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { PurchaseAdditionalCost } from '../types/models/PurchaseAdditionalCost';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  PurchaseAdditionalCostReadAnyGetRequest,
+  PurchaseAdditionalCostReadAnyPaginateRequest,
+} from '../types/services/purchase-additional-cost/PurchaseAdditionalCostRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class PurchaseAdditionalCostService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseAdditionalCostReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PurchaseAdditionalCost>> | null>> {
+    const result: ServiceResponse<Collection<Array<PurchaseAdditionalCost>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.purchase_id) queryParams['purchase_id'] = args.purchase_id;
+      if (args.purchase_additional_cost_category_id) {
+        queryParams['purchase_additional_cost_category_id'] = args.purchase_additional_cost_category_id;
+      }
+      if (args.is_amount_payable_paid_off !== null && args.is_amount_payable_paid_off !== undefined) {
+        queryParams['is_amount_payable_paid_off'] = args.is_amount_payable_paid_off;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.purchase_additional_cost.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<PurchaseAdditionalCost>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseAdditionalCostReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PurchaseAdditionalCost>> | null>> {
+    const result: ServiceResponse<Resource<Array<PurchaseAdditionalCost>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.purchase_id) queryParams['purchase_id'] = args.purchase_id;
+      if (args.purchase_additional_cost_category_id) {
+        queryParams['purchase_additional_cost_category_id'] = args.purchase_additional_cost_category_id;
+      }
+      if (args.is_amount_payable_paid_off !== null && args.is_amount_payable_paid_off !== undefined) {
+        queryParams['is_amount_payable_paid_off'] = args.is_amount_payable_paid_off;
+      }
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.purchase_additional_cost.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<PurchaseAdditionalCost>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PurchaseAdditionalCost | null>> {
+    const result: ServiceResponse<PurchaseAdditionalCost | null> = { success: false };
+
+    try {
+      const url = route('api.get.purchase_additional_cost.read', { purchase_additional_cost: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<PurchaseAdditionalCost>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public usePurchaseAdditionalCostCreateForm() {
+    const url = route('api.post.purchase_additional_cost.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      purchase_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      due_days: 0,
+      purchase_additional_cost_category_id: '',
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_payable: 0,
+      remarks: '',
+    });
+  }
+
+  public usePurchaseAdditionalCostEditForm(ulid: string) {
+    const url = route(
+      'api.post.purchase_additional_cost.edit',
+      { purchase_additional_cost: ulid },
+      true,
+      this.ziggyRoute,
+    );
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      purchase_id: '',
+      code: '_AUTO_',
+      date: '',
+      due_days: 0,
+      purchase_additional_cost_category_id: '',
+      paid_immediately_cash_account_id: '',
+      amount_paid_immediately: 0,
+      amount_payable: 0,
+      remarks: '',
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.purchase_additional_cost.delete', { purchase_additional_cost: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PurchaseOrderDownPaymentRefundService.ts b/web/src/services/PurchaseOrderDownPaymentRefundService.ts
new file mode 100644
index 000000000..bf9982a3e
--- /dev/null
+++ b/web/src/services/PurchaseOrderDownPaymentRefundService.ts
@@ -0,0 +1,134 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import type { PurchaseOrderDownPaymentRefund } from '../types/models/PurchaseOrderDownPaymentRefund';
+import type { Resource } from '../types/resources/Resource';
+import type { Collection } from '../types/resources/Collection';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  type PurchaseOrderDownPaymentRefundReadAnyGetRequest,
+  type PurchaseOrderDownPaymentRefundReadAnyPaginateRequest,
+} from '../types/services/purchase-order-down-payment-refund/PurchaseOrderDownPaymentRefundRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+
+export default class PurchaseOrderDownPaymentRefundService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseOrderDownPaymentRefundReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PurchaseOrderDownPaymentRefund>> | null>> {
+    const result: ServiceResponse<Collection<Array<PurchaseOrderDownPaymentRefund>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.start_date) queryParams['start_date'] = args.start_date;
+      if (args.end_date) queryParams['end_date'] = args.end_date;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.cash_account_id) queryParams['cash_account_id'] = args.cash_account_id;
+
+      const url = route('api.get.purchase_order_down_payment_refund.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<PurchaseOrderDownPaymentRefund>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseOrderDownPaymentRefundReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PurchaseOrderDownPaymentRefund>> | null>> {
+    const result: ServiceResponse<Resource<Array<PurchaseOrderDownPaymentRefund>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.start_date) queryParams['start_date'] = args.start_date;
+      if (args.end_date) queryParams['end_date'] = args.end_date;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.cash_account_id) queryParams['cash_account_id'] = args.cash_account_id;
+
+      const url = route('api.get.purchase_order_down_payment_refund.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<PurchaseOrderDownPaymentRefund>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PurchaseOrderDownPaymentRefund | null>> {
+    const result: ServiceResponse<PurchaseOrderDownPaymentRefund | null> = { success: false };
+
+    try {
+      const url = route('api.get.purchase_order_down_payment_refund.read', { purchase_order_down_payment_refund: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<PurchaseOrderDownPaymentRefund>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+}
diff --git a/web/src/services/PurchaseOrderDownPaymentService.ts b/web/src/services/PurchaseOrderDownPaymentService.ts
new file mode 100644
index 000000000..f3873e399
--- /dev/null
+++ b/web/src/services/PurchaseOrderDownPaymentService.ts
@@ -0,0 +1,161 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import type { PurchaseOrderDownPayment } from '../types/models/PurchaseOrderDownPayment';
+import type { Resource } from '../types/resources/Resource';
+import type { Collection } from '../types/resources/Collection';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import type { DropDownOption } from '../types/models/DropDownOption';
+import {
+  type PurchaseOrderDownPaymentReadAnyGetRequest,
+  type PurchaseOrderDownPaymentReadAnyPaginateRequest,
+} from '../types/services/purchase-order-down-payment/PurchaseOrderDownPaymentRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+
+export default class PurchaseOrderDownPaymentService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAllocationStatuses(): Promise<ServiceResponse<Array<DropDownOption> | null>> {
+    const result: ServiceResponse<Array<DropDownOption> | null> = { success: false };
+
+    try {
+      const url = route('api.get.purchase_order_down_payment.read_allocation_statuses', {}, false, this.ziggyRoute);
+      const response: AxiosResponse<Array<DropDownOption>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseOrderDownPaymentReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PurchaseOrderDownPayment>> | null>> {
+    const result: ServiceResponse<Collection<Array<PurchaseOrderDownPayment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.start_date) queryParams['start_date'] = args.start_date;
+      if (args.end_date) queryParams['end_date'] = args.end_date;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.cash_account_id) queryParams['cash_account_id'] = args.cash_account_id;
+      if (args.allocation_status) queryParams['allocation_status'] = args.allocation_status;
+
+      const url = route('api.get.purchase_order_down_payment.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<PurchaseOrderDownPayment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseOrderDownPaymentReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PurchaseOrderDownPayment>> | null>> {
+    const result: ServiceResponse<Resource<Array<PurchaseOrderDownPayment>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.start_date) queryParams['start_date'] = args.start_date;
+      if (args.end_date) queryParams['end_date'] = args.end_date;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.cash_account_id) queryParams['cash_account_id'] = args.cash_account_id;
+      if (args.allocation_status) queryParams['allocation_status'] = args.allocation_status;
+
+      const url = route('api.get.purchase_order_down_payment.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<PurchaseOrderDownPayment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PurchaseOrderDownPayment | null>> {
+    const result: ServiceResponse<PurchaseOrderDownPayment | null> = { success: false };
+
+    try {
+      const url = route('api.get.purchase_order_down_payment.read', { purchase_order_down_payment: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<PurchaseOrderDownPayment>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+}
diff --git a/web/src/services/PurchaseOrderItemService.ts b/web/src/services/PurchaseOrderItemService.ts
new file mode 100644
index 000000000..fb8d8cb46
--- /dev/null
+++ b/web/src/services/PurchaseOrderItemService.ts
@@ -0,0 +1,142 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import type { PurchaseOrderItem } from '../types/models/PurchaseOrderItem';
+import type { Resource } from '../types/resources/Resource';
+import type { Collection } from '../types/resources/Collection';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  type PurchaseOrderItemReadAnyGetRequest,
+  type PurchaseOrderItemReadAnyPaginateRequest,
+} from '../types/services/purchase-order-item/PurchaseOrderItemRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+
+export default class PurchaseOrderItemService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseOrderItemReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PurchaseOrderItem>> | null>> {
+    const result: ServiceResponse<Collection<Array<PurchaseOrderItem>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.purchase_order_code) queryParams['purchase_order_code'] = args.purchase_order_code;
+      if (args.purchase_order_start_date) queryParams['purchase_order_start_date'] = args.purchase_order_start_date;
+      if (args.purchase_order_end_date) queryParams['purchase_order_end_date'] = args.purchase_order_end_date;
+      if (args.purchase_order_supplier_id) queryParams['purchase_order_supplier_id'] = args.purchase_order_supplier_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      const url = route('api.get.purchase_order_item.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<PurchaseOrderItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseOrderItemReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PurchaseOrderItem>> | null>> {
+    const result: ServiceResponse<Resource<Array<PurchaseOrderItem>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.purchase_order_code) queryParams['purchase_order_code'] = args.purchase_order_code;
+      if (args.purchase_order_start_date) queryParams['purchase_order_start_date'] = args.purchase_order_start_date;
+      if (args.purchase_order_end_date) queryParams['purchase_order_end_date'] = args.purchase_order_end_date;
+      if (args.purchase_order_supplier_id) queryParams['purchase_order_supplier_id'] = args.purchase_order_supplier_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      const url = route('api.get.purchase_order_item.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<PurchaseOrderItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PurchaseOrderItem | null>> {
+    const result: ServiceResponse<PurchaseOrderItem | null> = { success: false };
+
+    try {
+      const url = route('api.get.purchase_order_item.read', { purchase_order_item: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<PurchaseOrderItem>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      }
+
+      return result;
+    }
+  }
+}
diff --git a/web/src/services/PurchaseOrderService.ts b/web/src/services/PurchaseOrderService.ts
new file mode 100644
index 000000000..2f939aed2
--- /dev/null
+++ b/web/src/services/PurchaseOrderService.ts
@@ -0,0 +1,284 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { route, Config } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import type { DropDownOption } from '../types/models/DropDownOption';
+import { PurchaseOrder } from '../types/models/PurchaseOrder';
+import { StatusCode } from '../types/enums/StatusCode';
+import { type Collection } from '../types/resources/Collection';
+import { type Resource } from '../types/resources/Resource';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type PurchaseOrderReadAnyGetRequest,
+  type PurchaseOrderReadAnyPaginateRequest,
+  type PurchaseOrderStoreRequest,
+  type PurchaseOrderUpdateRequest,
+} from '../types/services/purchase-order/PurchaseOrderRequest';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class PurchaseOrderService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readProgressStatuses(): Promise<ServiceResponse<Array<DropDownOption> | null>> {
+    const result: ServiceResponse<Array<DropDownOption> | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.purchase_order.read_progress_statuses',
+        {},
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Array<DropDownOption>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseOrderReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PurchaseOrder>> | null>> {
+    const result: ServiceResponse<Collection<Array<PurchaseOrder>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      queryParams['branch_id'] = args.branch_id;
+      queryParams['search'] = args.search;
+      queryParams['start_date'] = args.start_date;
+      queryParams['end_date'] = args.end_date;
+      queryParams['supplier_id'] = args.supplier_id;
+      queryParams['progress_status'] = args.progress_status;
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.purchase_order.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<PurchaseOrder>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseOrderReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PurchaseOrder>> | null>> {
+    const result: ServiceResponse<Resource<Array<PurchaseOrder>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      queryParams['branch_id'] = args.branch_id;
+      queryParams['search'] = args.search;
+      queryParams['start_date'] = args.start_date;
+      queryParams['end_date'] = args.end_date;
+      queryParams['supplier_id'] = args.supplier_id;
+      queryParams['progress_status'] = args.progress_status;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.purchase_order.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<PurchaseOrder>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PurchaseOrder | null>> {
+    const result: ServiceResponse<PurchaseOrder | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.purchase_order.read',
+        {
+          purchase_order: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<PurchaseOrder>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public usePurchaseOrderCreateForm() {
+    const url = route('api.post.purchase_order.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      due_days: 0,
+      supplier_id: null,
+      remarks: '',
+      rounding: 0,
+      global_discounts: [] as NonNullable<PurchaseOrderStoreRequest['global_discounts']>,
+      items: [] as NonNullable<PurchaseOrderStoreRequest['items']>,
+      down_payments: [] as NonNullable<PurchaseOrderStoreRequest['down_payments']>,
+      refunded_down_payments: [] as NonNullable<PurchaseOrderStoreRequest['refunded_down_payments']>,
+    });
+  }
+
+  public usePurchaseOrderEditForm(ulid: string) {
+    const url = route(
+      'api.post.purchase_order.edit',
+      {
+        purchase_order: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      due_days: 0,
+      supplier_id: null,
+      remarks: '',
+      rounding: 0,
+      delete_global_discount_ids: [] as NonNullable<PurchaseOrderUpdateRequest['delete_global_discount_ids']>,
+      global_discounts: [] as NonNullable<PurchaseOrderUpdateRequest['global_discounts']>,
+      delete_item_ids: [] as NonNullable<PurchaseOrderUpdateRequest['delete_item_ids']>,
+      items: [] as NonNullable<PurchaseOrderUpdateRequest['items']>,
+      delete_down_payment_ids: [] as NonNullable<PurchaseOrderUpdateRequest['delete_down_payment_ids']>,
+      down_payments: [] as NonNullable<PurchaseOrderUpdateRequest['down_payments']>,
+      delete_refunded_down_payment_ids: [] as NonNullable<PurchaseOrderUpdateRequest['delete_refunded_down_payment_ids']>,
+      refunded_down_payments: [] as NonNullable<PurchaseOrderUpdateRequest['refunded_down_payments']>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.purchase_order.delete',
+        {
+          purchase_order: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PurchaseReceiptService.ts b/web/src/services/PurchaseReceiptService.ts
new file mode 100644
index 000000000..1eb416ada
--- /dev/null
+++ b/web/src/services/PurchaseReceiptService.ts
@@ -0,0 +1,236 @@
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { route, Config } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import { PurchaseReceipt } from '../types/models/PurchaseReceipt';
+import { Collection } from '../types/resources/Collection';
+import { Resource } from '../types/resources/Resource';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  PurchaseReceiptReadAnyGetRequest,
+  PurchaseReceiptReadAnyPaginateRequest,
+  PurchaseReceiptStoreRequest,
+  PurchaseReceiptUpdateRequest,
+} from '../types/services/purchase-receipt/PurchaseReceiptRequest';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class PurchaseReceiptService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseReceiptReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<PurchaseReceipt>> | null>> {
+    const result: ServiceResponse<Collection<Array<PurchaseReceipt>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.purchase_id) queryParams['purchase_id'] = args.purchase_id;
+      if (args.is_from_direct_purchase !== undefined && args.is_from_direct_purchase !== null) queryParams['is_from_direct_purchase'] = args.is_from_direct_purchase;
+      if (args.start_date) queryParams['start_date'] = args.start_date;
+      if (args.end_date) queryParams['end_date'] = args.end_date;
+      if (args.warehouse_id) queryParams['warehouse_id'] = args.warehouse_id;
+      if (args.is_posted !== undefined && args.is_posted !== null) queryParams['is_posted'] = args.is_posted;
+
+      const url = route(
+        'api.get.purchase_receipt.read_any',
+        { _query: queryParams },
+        false,
+        this.ziggyRoute,
+      );
+      const response: AxiosResponse<Collection<Array<PurchaseReceipt>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseReceiptReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<PurchaseReceipt>> | null>> {
+    const result: ServiceResponse<Resource<Array<PurchaseReceipt>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.purchase_id) queryParams['purchase_id'] = args.purchase_id;
+      if (args.is_from_direct_purchase !== undefined && args.is_from_direct_purchase !== null) queryParams['is_from_direct_purchase'] = args.is_from_direct_purchase;
+      if (args.start_date) queryParams['start_date'] = args.start_date;
+      if (args.end_date) queryParams['end_date'] = args.end_date;
+      if (args.warehouse_id) queryParams['warehouse_id'] = args.warehouse_id;
+      if (args.is_posted !== undefined && args.is_posted !== null) queryParams['is_posted'] = args.is_posted;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route(
+        'api.get.purchase_receipt.read_any',
+        { _query: queryParams },
+        false,
+        this.ziggyRoute,
+      );
+      const response: AxiosResponse<Resource<Array<PurchaseReceipt>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<PurchaseReceipt | null>> {
+    const result: ServiceResponse<PurchaseReceipt | null> = { success: false };
+
+    try {
+      const url = route(
+        'api.get.purchase_receipt.read',
+        {
+          purchase_receipt: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+      const response: AxiosResponse<Resource<PurchaseReceipt>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public usePurchaseReceiptCreateForm() {
+    const url = route('api.post.purchase_receipt.save.manual', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      supplier_id: null,
+      purchase_id: null,
+      code: '_AUTO_',
+      date: '_AUTO_',
+      warehouse_id: null,
+      remarks: '',
+      is_posted: false,
+      items: [] as NonNullable<PurchaseReceiptStoreRequest['items']>,
+    });
+  }
+
+  public usePurchaseReceiptEditForm(ulid: string) {
+    const url = route(
+      'api.post.purchase_receipt.edit.manual',
+      {
+        purchase_receipt: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      supplier_id: null,
+      purchase_id: null,
+      code: '_AUTO_',
+      date: '',
+      warehouse_id: null,
+      remarks: '',
+      is_posted: false,
+      items: [] as NonNullable<PurchaseReceiptUpdateRequest['items']>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route(
+        'api.post.purchase_receipt.delete.manual',
+        {
+          purchase_receipt: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/PurchaseService.ts b/web/src/services/PurchaseService.ts
new file mode 100644
index 000000000..8811c7561
--- /dev/null
+++ b/web/src/services/PurchaseService.ts
@@ -0,0 +1,320 @@
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { route, Config } from 'ziggy-js';
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import { Purchase } from '../types/models/Purchase';
+import { Collection } from '../types/resources/Collection';
+import { Resource } from '../types/resources/Resource';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  PurchaseReadAnyGetRequest,
+  PurchaseReadAnyPaginateRequest,
+  PurchaseDirectStoreRequest,
+  PurchaseDirectUpdateRequest,
+  PurchaseManualStoreRequest,
+  PurchaseManualUpdateRequest,
+  PurchaseStoreRequest,
+  PurchaseUpdateRequest,
+} from '../types/services/purchase/PurchaseRequest';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class PurchaseService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: PurchaseReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Purchase>> | null>> {
+    const result: ServiceResponse<Collection<Array<Purchase>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: {
+          page: args.page,
+          per_page: args.per_page,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.start_date) queryParams['start_date'] = args.start_date;
+      if (args.end_date) queryParams['end_date'] = args.end_date;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.purchase_order_id) queryParams['purchase_order_id'] = args.purchase_order_id;
+      if (args.receipt_mode) queryParams['receipt_mode'] = args.receipt_mode;
+      if (args.progress_status) queryParams['progress_status'] = args.progress_status;
+      if (args.is_posted !== undefined && args.is_posted !== null) queryParams['is_posted'] = args.is_posted;
+      if (args.is_paid_off !== undefined && args.is_paid_off !== null) queryParams['is_paid_off'] = args.is_paid_off;
+
+      const url = route('api.get.purchase.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<Purchase>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: PurchaseReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<Purchase>> | null>> {
+    const result: ServiceResponse<Resource<Array<Purchase>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: {
+          limit: args.limit,
+        },
+      };
+
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.start_date) queryParams['start_date'] = args.start_date;
+      if (args.end_date) queryParams['end_date'] = args.end_date;
+      if (args.supplier_id) queryParams['supplier_id'] = args.supplier_id;
+      if (args.purchase_order_id) queryParams['purchase_order_id'] = args.purchase_order_id;
+      if (args.receipt_mode) queryParams['receipt_mode'] = args.receipt_mode;
+      if (args.progress_status) queryParams['progress_status'] = args.progress_status;
+      if (args.is_posted !== undefined && args.is_posted !== null) queryParams['is_posted'] = args.is_posted;
+      if (args.is_paid_off !== undefined && args.is_paid_off !== null) queryParams['is_paid_off'] = args.is_paid_off ? 1 : 0;
+
+      const url = route('api.get.purchase.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<Purchase>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Purchase | null>> {
+    const result: ServiceResponse<Purchase | null> = { success: false };
+
+    try {
+      const url = route(
+        'api.get.purchase.read',
+        {
+          purchase: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+      const response: AxiosResponse<Resource<Purchase>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public usePurchaseCreateManualForm() {
+    const url = route('api.post.purchase.save.manual', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      due_days: 0,
+      supplier_id: null,
+      purchase_order_id: null,
+      tax_invoice_number: null,
+      tax_invoice_vat_base: 0,
+      tax_invoice_vat: 0,
+      remarks: '',
+      is_posted: false,
+      additional_cost: 0,
+      rounding: 0,
+      items: [] as NonNullable<PurchaseManualStoreRequest['items']>,
+      global_discounts: [] as NonNullable<PurchaseManualStoreRequest['global_discounts']>,
+      additional_costs: [] as NonNullable<PurchaseManualStoreRequest['additional_costs']>,
+    });
+  }
+
+  public usePurchaseEditForm(ulid: string) {
+    return this.usePurchaseEditManualForm(ulid);
+  }
+
+  public usePurchaseCreateDirectForm() {
+    const url = route('api.post.purchase.save.direct', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      due_days: 0,
+      supplier_id: null,
+      purchase_order_id: null,
+      direct_receipt_warehouse_id: '',
+      tax_invoice_number: null,
+      tax_invoice_vat_base: 0,
+      tax_invoice_vat: 0,
+      remarks: '',
+      is_posted: false,
+      additional_cost: 0,
+      rounding: 0,
+      items: [] as NonNullable<PurchaseDirectStoreRequest['items']>,
+      global_discounts: [] as NonNullable<PurchaseDirectStoreRequest['global_discounts']>,
+      additional_costs: [] as NonNullable<PurchaseDirectStoreRequest['additional_costs']>,
+    });
+  }
+
+  public usePurchaseEditManualForm(ulid: string) {
+    const url = route(
+      'api.post.purchase.edit.manual',
+      {
+        purchase: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      due_days: 0,
+      supplier_id: null,
+      purchase_order_id: null,
+      tax_invoice_number: null,
+      tax_invoice_vat_base: 0,
+      tax_invoice_vat: 0,
+      remarks: '',
+      is_posted: false,
+      additional_cost: 0,
+      rounding: 0,
+      delete_item_ids: [] as NonNullable<PurchaseManualUpdateRequest['delete_item_ids']>,
+      items: [] as NonNullable<PurchaseManualUpdateRequest['items']>,
+      delete_global_discount_ids: [] as NonNullable<PurchaseManualUpdateRequest['delete_global_discount_ids']>,
+      global_discounts: [] as NonNullable<PurchaseManualUpdateRequest['global_discounts']>,
+      delete_additional_cost_ids: [] as NonNullable<PurchaseManualUpdateRequest['delete_additional_cost_ids']>,
+      additional_costs: [] as NonNullable<PurchaseManualUpdateRequest['additional_costs']>,
+    });
+  }
+
+  public usePurchaseEditDirectForm(ulid: string) {
+    const url = route(
+      'api.post.purchase.edit.direct',
+      {
+        purchase: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      due_days: 0,
+      supplier_id: null,
+      purchase_order_id: null,
+      direct_receipt_warehouse_id: '',
+      tax_invoice_number: null,
+      tax_invoice_vat_base: 0,
+      tax_invoice_vat: 0,
+      remarks: '',
+      is_posted: false,
+      additional_cost: 0,
+      rounding: 0,
+      delete_item_ids: [] as NonNullable<PurchaseDirectUpdateRequest['delete_item_ids']>,
+      items: [] as NonNullable<PurchaseDirectUpdateRequest['items']>,
+      delete_global_discount_ids: [] as NonNullable<PurchaseDirectUpdateRequest['delete_global_discount_ids']>,
+      global_discounts: [] as NonNullable<PurchaseDirectUpdateRequest['global_discounts']>,
+      delete_additional_cost_ids: [] as NonNullable<PurchaseDirectUpdateRequest['delete_additional_cost_ids']>,
+      additional_costs: [] as NonNullable<PurchaseDirectUpdateRequest['additional_costs']>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route(
+        'api.post.purchase.delete',
+        {
+          purchase: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ReceivableCategoryService.ts b/web/src/services/ReceivableCategoryService.ts
new file mode 100644
index 000000000..280076131
--- /dev/null
+++ b/web/src/services/ReceivableCategoryService.ts
@@ -0,0 +1,235 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { ReceivableCategory } from '../types/models/ReceivableCategory';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  ReceivableCategoryReadAnyPaginateRequest,
+  ReceivableCategoryReadAnyGetRequest,
+} from '../types/services/receivable-category/ReceivableCategoryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class ReceivableCategoryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useReceivableCategoryCreateForm() {
+    const url = route('api.post.receivable_category.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      sequence: 0,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: ReceivableCategoryReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<ReceivableCategory>> | null>> {
+    const result: ServiceResponse<Collection<Array<ReceivableCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.receivable_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<ReceivableCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: ReceivableCategoryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<ReceivableCategory>> | null>> {
+    const result: ServiceResponse<Resource<Array<ReceivableCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.receivable_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<ReceivableCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<ReceivableCategory | null>> {
+    const result: ServiceResponse<ReceivableCategory | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.receivable_category.read',
+        {
+          receivable_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<ReceivableCategory>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useReceivableCategoryEditForm(ulid: string) {
+    const url = route(
+      'api.post.receivable_category.edit',
+      {
+        receivable_category: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      sequence: 0,
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.receivable_category.delete',
+        {
+          receivable_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/ReceivableService.ts b/web/src/services/ReceivableService.ts
new file mode 100644
index 000000000..365e979dc
--- /dev/null
+++ b/web/src/services/ReceivableService.ts
@@ -0,0 +1,195 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import type { Receivable } from '../types/models/Receivable';
+import type { Collection } from '../types/resources/Collection';
+import type { Resource } from '../types/resources/Resource';
+import type { ServiceResponse } from '../types/services/ServiceResponse';
+import type {
+  ReceivableReadAnyGetRequest,
+  ReceivableReadAnyPaginateRequest,
+} from '../types/services/receivable/ReceivableRequest';
+
+export default class ReceivableService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: ReceivableReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Receivable>> | null>> {
+    const result: ServiceResponse<Collection<Array<Receivable>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        paginate: { page: args.page, per_page: args.per_page },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.category_id) queryParams['category_id'] = args.category_id;
+      if (args.customer_id) queryParams['customer_id'] = args.customer_id;
+      if (args.is_paid_off !== null && args.is_paid_off !== undefined) queryParams['is_paid_off'] = args.is_paid_off;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.receivable.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Collection<Array<Receivable>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: ReceivableReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<Receivable>> | null>> {
+    const result: ServiceResponse<Resource<Array<Receivable>> | null> = { success: false };
+
+    try {
+      const queryParams: Record<string, any> = {
+        with_trashed: args.with_trashed ? 1 : 0,
+        company_id: args.company_id,
+        refresh: args.refresh,
+        get: { limit: args.limit },
+      };
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.category_id) queryParams['category_id'] = args.category_id;
+      if (args.customer_id) queryParams['customer_id'] = args.customer_id;
+      if (args.is_paid_off !== null && args.is_paid_off !== undefined) queryParams['is_paid_off'] = args.is_paid_off ? 1 : 0;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      const url = route('api.get.receivable.read_any', { _query: queryParams }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Array<Receivable>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Receivable | null>> {
+    const result: ServiceResponse<Receivable | null> = { success: false };
+
+    try {
+      const url = route('api.get.receivable.read', { receivable: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<Resource<Receivable>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useReceivableCreateForm() {
+    const url = route('api.post.receivable.save', undefined, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      category_id: '',
+      customer_id: '',
+      cash_account_id: '',
+      direct_amount_received: 0,
+      opening_amount_due: 0,
+      due_days: 0,
+      remarks: '',
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public useReceivableEditForm(ulid: string) {
+    const url = route('api.post.receivable.edit', { receivable: ulid }, true, this.ziggyRoute);
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    return useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      category_id: '',
+      customer_id: '',
+      cash_account_id: '',
+      direct_amount_received: 0,
+      opening_amount_due: 0,
+      due_days: 0,
+      remarks: '',
+      delete_payment_ids: [] as Array<string>,
+      payments: [] as Array<Record<string, unknown>>,
+    });
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = { success: false };
+
+    try {
+      const url = route('api.post.receivable.delete', { receivable: ulid }, false, this.ziggyRoute);
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
+
diff --git a/web/src/services/RoleService.ts b/web/src/services/RoleService.ts
index 2261e8119..4156486e2 100644
--- a/web/src/services/RoleService.ts
+++ b/web/src/services/RoleService.ts
@@ -1,69 +1,70 @@
-import axios from "../axios";
-import { useZiggyRouteStore } from "../stores/ziggy-route";
-import { route, Config } from "ziggy-js";
-import { AxiosError, AxiosResponse, isAxiosError } from "axios";
-import { Role } from "../types/models/Role";
-import { Resource } from "../types/resources/Resource";
-import { ServiceResponse } from "../types/services/ServiceResponse";
-import ErrorHandlerService from "./ErrorHandlerService";
-
-export default class RoleService {
-    private ziggyRoute: Config;
-    private ziggyRouteStore = useZiggyRouteStore();
-
-    private errorHandlerService;
-
-    constructor() {
-        this.ziggyRoute = this.ziggyRouteStore.getZiggy;
-
-        this.errorHandlerService = new ErrorHandlerService();
-    }
-
-    public async readAny(): Promise<ServiceResponse<Resource<Array<Role>> | null>> {
-        const result: ServiceResponse<Resource<Array<Role>> | null> = {
-            success: false,
-        };
-
-        try {
-            const url = route('api.get.db.admin.role.read_any', undefined, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Resource<Array<Role>>> = await axios.get(url);
-
-            result.success = true;
-            result.data = response.data;
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public async Update(roles: string): Promise<ServiceResponse<Resource<Role> | null>> {
-        const result: ServiceResponse<Resource<Role> | null> = {
-            success: false
-        }
-        try {
-            const url = route('api.post.db.module.profile.update.roles', undefined, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Resource<Role>> = await axios.post(url, { 'roles': roles })
-            result.success = true
-            result.data = response.data
-            return result
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-}
\ No newline at end of file
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { Role } from '../types/models/Role';
+import { Resource } from '../types/resources/Resource';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class RoleService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAny(): Promise<ServiceResponse<Resource<Array<Role>> | null>> {
+    const result: ServiceResponse<Resource<Array<Role>> | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.get.db.admin.role.read_any', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Resource<Array<Role>>> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async update(roles: string): Promise<ServiceResponse<Resource<Role> | null>> {
+    const result: ServiceResponse<Resource<Role> | null> = {
+      success: false,
+    };
+    try {
+      const url = route('api.post.db.module.profile.update.roles', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Resource<Role>> = await axios.post(url, {
+        roles: roles,
+      });
+      result.success = true;
+      result.data = response.data;
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/SearchService.ts b/web/src/services/SearchService.ts
index f74ed63c4..89ac811ad 100644
--- a/web/src/services/SearchService.ts
+++ b/web/src/services/SearchService.ts
@@ -1,46 +1,46 @@
-import axios from "../axios";
-import { useZiggyRouteStore } from "../stores/ziggy-route";
-import { route, Config } from "ziggy-js";
-import { AxiosError, AxiosResponse, isAxiosError } from "axios";
-import { Resource } from "../types/resources/Resource";
-import { ServiceResponse } from "../types/services/ServiceResponse";
-import ErrorHandlerService from "./ErrorHandlerService";
-import { SearchResult } from "@/types/models/SearchResult";
-
-export default class RoleService {
-    private ziggyRoute: Config;
-    private ziggyRouteStore = useZiggyRouteStore();
-
-    private errorHandlerService;
-
-    constructor() {
-        this.ziggyRoute = this.ziggyRouteStore.getZiggy;
-
-        this.errorHandlerService = new ErrorHandlerService();
-    }
-
-    public async search(): Promise<ServiceResponse<Resource<Array<SearchResult>> | null>> {
-        const result: ServiceResponse<Resource<Array<SearchResult>> | null> = {
-            success: false,
-        };
-
-        try {
-            const url = route('api.get.db.core.search', undefined, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Resource<Array<SearchResult>>> = await axios.get(url);
-
-            result.success = true;
-            result.data = response.data;
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import { Resource } from '../types/resources/Resource';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import ErrorHandlerService from './ErrorHandlerService';
+import { SearchResult } from '@/types/models/SearchResult';
+
+export default class SearchService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async search(): Promise<ServiceResponse<Resource<Array<SearchResult>> | null>> {
+    const result: ServiceResponse<Resource<Array<SearchResult>> | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.get.db.core.search', undefined, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Resource<Array<SearchResult>>> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/web/src/services/StockAdjustmentCategoryService.ts b/web/src/services/StockAdjustmentCategoryService.ts
new file mode 100644
index 000000000..af52ef5e8
--- /dev/null
+++ b/web/src/services/StockAdjustmentCategoryService.ts
@@ -0,0 +1,227 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { StockAdjustmentCategory } from '../types/models/StockAdjustmentCategory';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  StockAdjustmentCategoryReadAnyPaginateRequest,
+  StockAdjustmentCategoryReadAnyGetRequest,
+} from '../types/services/stock-adjustment-category/StockAdjustmentCategoryRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class StockAdjustmentCategoryService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useStockAdjustmentCategoryCreateForm() {
+    const url = route('api.post.stock_adjustment_category.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: StockAdjustmentCategoryReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockAdjustmentCategory>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockAdjustmentCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockAdjustmentCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockAdjustmentCategoryReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockAdjustmentCategory>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockAdjustmentCategory>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_category.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockAdjustmentCategory>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockAdjustmentCategory | null>> {
+    const result: ServiceResponse<StockAdjustmentCategory | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_adjustment_category.read',
+        {
+          stock_adjustment_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockAdjustmentCategory>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useStockAdjustmentCategoryEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_adjustment_category.edit',
+      {
+        stock_adjustment_category: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_adjustment_category.delete',
+        {
+          stock_adjustment_category: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/StockAdjustmentInItemSerialService.ts b/web/src/services/StockAdjustmentInItemSerialService.ts
new file mode 100644
index 000000000..17d14cd64
--- /dev/null
+++ b/web/src/services/StockAdjustmentInItemSerialService.ts
@@ -0,0 +1,248 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import { StockAdjustmentInItemSerial } from '../types/models/StockAdjustmentInItemSerial';
+import { type Resource } from '../types/resources/Resource';
+import { type Collection } from '../types/resources/Collection';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  type StockAdjustmentInItemSerialReadAnyGetRequest,
+  type StockAdjustmentInItemSerialReadAnyPaginateRequest,
+} from '../types/services/stock-adjustment-in-item-serial/StockAdjustmentInItemSerialRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class StockAdjustmentInItemSerialService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useStockAdjustmentInItemSerialCreateForm() {
+    const url = route('api.post.stock_adjustment_in_item_serial.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_adjustment_id: '',
+      stock_adjustment_in_item_id: '',
+      serial: '',
+    });
+
+    return form;
+  }
+
+  public useStockAdjustmentInItemSerialEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_adjustment_in_item_serial.edit',
+      {
+        stock_adjustment_in_item_serial: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      serial: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: StockAdjustmentInItemSerialReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockAdjustmentInItemSerial>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockAdjustmentInItemSerial>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.stock_adjustment_code) queryParams['stock_adjustment_code'] = args.stock_adjustment_code;
+      if (args.stock_adjustment_start_date) queryParams['stock_adjustment_start_date'] = args.stock_adjustment_start_date;
+      if (args.stock_adjustment_end_date) queryParams['stock_adjustment_end_date'] = args.stock_adjustment_end_date;
+      if (args.stock_adjustment_category_id) queryParams['stock_adjustment_category_id'] = args.stock_adjustment_category_id;
+      if (args.stock_adjustment_in_warehouse_id) queryParams['stock_adjustment_in_warehouse_id'] = args.stock_adjustment_in_warehouse_id;
+      if (args.stock_adjustment_out_warehouse_id) queryParams['stock_adjustment_out_warehouse_id'] = args.stock_adjustment_out_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_in_item_serial.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockAdjustmentInItemSerial>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockAdjustmentInItemSerialReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockAdjustmentInItemSerial>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockAdjustmentInItemSerial>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.stock_adjustment_code) queryParams['stock_adjustment_code'] = args.stock_adjustment_code;
+      if (args.stock_adjustment_start_date) queryParams['stock_adjustment_start_date'] = args.stock_adjustment_start_date;
+      if (args.stock_adjustment_end_date) queryParams['stock_adjustment_end_date'] = args.stock_adjustment_end_date;
+      if (args.stock_adjustment_category_id) queryParams['stock_adjustment_category_id'] = args.stock_adjustment_category_id;
+      if (args.stock_adjustment_in_warehouse_id) queryParams['stock_adjustment_in_warehouse_id'] = args.stock_adjustment_in_warehouse_id;
+      if (args.stock_adjustment_out_warehouse_id) queryParams['stock_adjustment_out_warehouse_id'] = args.stock_adjustment_out_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_in_item_serial.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockAdjustmentInItemSerial>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockAdjustmentInItemSerial | null>> {
+    const result: ServiceResponse<StockAdjustmentInItemSerial | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_adjustment_in_item_serial.read',
+        {
+          stock_adjustment_in_item_serial: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockAdjustmentInItemSerial>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_adjustment_in_item_serial.delete',
+        {
+          stock_adjustment_in_item_serial: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
+
diff --git a/web/src/services/StockAdjustmentInItemService.ts b/web/src/services/StockAdjustmentInItemService.ts
new file mode 100644
index 000000000..680f94779
--- /dev/null
+++ b/web/src/services/StockAdjustmentInItemService.ts
@@ -0,0 +1,257 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import { StockAdjustmentInItem } from '../types/models/StockAdjustmentInItem';
+import { type Resource } from '../types/resources/Resource';
+import { type Collection } from '../types/resources/Collection';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  type StockAdjustmentInItemReadAnyGetRequest,
+  type StockAdjustmentInItemReadAnyPaginateRequest,
+} from '../types/services/stock-adjustment-in-item/StockAdjustmentInItemRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class StockAdjustmentInItemService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: StockAdjustmentInItemReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockAdjustmentInItem>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockAdjustmentInItem>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.stock_adjustment_code) queryParams['stock_adjustment_code'] = args.stock_adjustment_code;
+      if (args.stock_adjustment_start_date) queryParams['stock_adjustment_start_date'] = args.stock_adjustment_start_date;
+      if (args.stock_adjustment_end_date) queryParams['stock_adjustment_end_date'] = args.stock_adjustment_end_date;
+      if (args.stock_adjustment_category_id) queryParams['stock_adjustment_category_id'] = args.stock_adjustment_category_id;
+      if (args.stock_adjustment_in_warehouse_id) queryParams['stock_adjustment_in_warehouse_id'] = args.stock_adjustment_in_warehouse_id;
+      if (args.stock_adjustment_out_warehouse_id) queryParams['stock_adjustment_out_warehouse_id'] = args.stock_adjustment_out_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_in_item.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockAdjustmentInItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockAdjustmentInItemReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockAdjustmentInItem>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockAdjustmentInItem>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.stock_adjustment_code) queryParams['stock_adjustment_code'] = args.stock_adjustment_code;
+      if (args.stock_adjustment_start_date) queryParams['stock_adjustment_start_date'] = args.stock_adjustment_start_date;
+      if (args.stock_adjustment_end_date) queryParams['stock_adjustment_end_date'] = args.stock_adjustment_end_date;
+      if (args.stock_adjustment_category_id) queryParams['stock_adjustment_category_id'] = args.stock_adjustment_category_id;
+      if (args.stock_adjustment_in_warehouse_id) queryParams['stock_adjustment_in_warehouse_id'] = args.stock_adjustment_in_warehouse_id;
+      if (args.stock_adjustment_out_warehouse_id) queryParams['stock_adjustment_out_warehouse_id'] = args.stock_adjustment_out_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_in_item.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockAdjustmentInItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockAdjustmentInItem | null>> {
+    const result: ServiceResponse<StockAdjustmentInItem | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_adjustment_in_item.read',
+        {
+          stock_adjustment_in_item: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockAdjustmentInItem>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useStockAdjustmentInItemCreateForm() {
+    const url = route('api.post.stock_adjustment_in_item.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_adjustment_id: '',
+      qty: 0,
+      product_unit_id: '',
+      product_unit_conversion_value: 1,
+      product_unit_cogs: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public useStockAdjustmentInItemEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_adjustment_in_item.edit',
+      {
+        stock_adjustment_in_item: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_adjustment_id: '',
+      qty: 0,
+      product_unit_id: '',
+      product_unit_conversion_value: 1,
+      product_unit_cogs: 0,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_adjustment_in_item.delete',
+        {
+          stock_adjustment_in_item: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/StockAdjustmentOutItemSerialService.ts b/web/src/services/StockAdjustmentOutItemSerialService.ts
new file mode 100644
index 000000000..992a13bef
--- /dev/null
+++ b/web/src/services/StockAdjustmentOutItemSerialService.ts
@@ -0,0 +1,247 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import { StockAdjustmentOutItemSerial } from '../types/models/StockAdjustmentOutItemSerial';
+import { type Resource } from '../types/resources/Resource';
+import { type Collection } from '../types/resources/Collection';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  type StockAdjustmentOutItemSerialReadAnyGetRequest,
+  type StockAdjustmentOutItemSerialReadAnyPaginateRequest,
+} from '../types/services/stock-adjustment-out-item-serial/StockAdjustmentOutItemSerialRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class StockAdjustmentOutItemSerialService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useStockAdjustmentOutItemSerialCreateForm() {
+    const url = route('api.post.stock_adjustment_out_item_serial.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_adjustment_id: '',
+      stock_adjustment_out_item_id: '',
+      serial: '',
+    });
+
+    return form;
+  }
+
+  public useStockAdjustmentOutItemSerialEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_adjustment_out_item_serial.edit',
+      {
+        stock_adjustment_out_item_serial: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      serial: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: StockAdjustmentOutItemSerialReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockAdjustmentOutItemSerial>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockAdjustmentOutItemSerial>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.stock_adjustment_code) queryParams['stock_adjustment_code'] = args.stock_adjustment_code;
+      if (args.stock_adjustment_start_date) queryParams['stock_adjustment_start_date'] = args.stock_adjustment_start_date;
+      if (args.stock_adjustment_end_date) queryParams['stock_adjustment_end_date'] = args.stock_adjustment_end_date;
+      if (args.stock_adjustment_category_id) queryParams['stock_adjustment_category_id'] = args.stock_adjustment_category_id;
+      if (args.stock_adjustment_in_warehouse_id) queryParams['stock_adjustment_in_warehouse_id'] = args.stock_adjustment_in_warehouse_id;
+      if (args.stock_adjustment_out_warehouse_id) queryParams['stock_adjustment_out_warehouse_id'] = args.stock_adjustment_out_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_out_item_serial.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockAdjustmentOutItemSerial>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockAdjustmentOutItemSerialReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockAdjustmentOutItemSerial>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockAdjustmentOutItemSerial>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.stock_adjustment_code) queryParams['stock_adjustment_code'] = args.stock_adjustment_code;
+      if (args.stock_adjustment_start_date) queryParams['stock_adjustment_start_date'] = args.stock_adjustment_start_date;
+      if (args.stock_adjustment_end_date) queryParams['stock_adjustment_end_date'] = args.stock_adjustment_end_date;
+      if (args.stock_adjustment_category_id) queryParams['stock_adjustment_category_id'] = args.stock_adjustment_category_id;
+      if (args.stock_adjustment_in_warehouse_id) queryParams['stock_adjustment_in_warehouse_id'] = args.stock_adjustment_in_warehouse_id;
+      if (args.stock_adjustment_out_warehouse_id) queryParams['stock_adjustment_out_warehouse_id'] = args.stock_adjustment_out_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_out_item_serial.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockAdjustmentOutItemSerial>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockAdjustmentOutItemSerial | null>> {
+    const result: ServiceResponse<StockAdjustmentOutItemSerial | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_adjustment_out_item_serial.read',
+        {
+          stock_adjustment_out_item_serial: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockAdjustmentOutItemSerial>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_adjustment_out_item_serial.delete',
+        {
+          stock_adjustment_out_item_serial: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/StockAdjustmentOutItemService.ts b/web/src/services/StockAdjustmentOutItemService.ts
new file mode 100644
index 000000000..2c2e52d46
--- /dev/null
+++ b/web/src/services/StockAdjustmentOutItemService.ts
@@ -0,0 +1,255 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import { StockAdjustmentOutItem } from '../types/models/StockAdjustmentOutItem';
+import { type Resource } from '../types/resources/Resource';
+import { type Collection } from '../types/resources/Collection';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  type StockAdjustmentOutItemReadAnyGetRequest,
+  type StockAdjustmentOutItemReadAnyPaginateRequest,
+} from '../types/services/stock-adjustment-out-item/StockAdjustmentOutItemRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class StockAdjustmentOutItemService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: StockAdjustmentOutItemReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockAdjustmentOutItem>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockAdjustmentOutItem>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.stock_adjustment_code) queryParams['stock_adjustment_code'] = args.stock_adjustment_code;
+      if (args.stock_adjustment_start_date) queryParams['stock_adjustment_start_date'] = args.stock_adjustment_start_date;
+      if (args.stock_adjustment_end_date) queryParams['stock_adjustment_end_date'] = args.stock_adjustment_end_date;
+      if (args.stock_adjustment_category_id) queryParams['stock_adjustment_category_id'] = args.stock_adjustment_category_id;
+      if (args.stock_adjustment_in_warehouse_id) queryParams['stock_adjustment_in_warehouse_id'] = args.stock_adjustment_in_warehouse_id;
+      if (args.stock_adjustment_out_warehouse_id) queryParams['stock_adjustment_out_warehouse_id'] = args.stock_adjustment_out_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_out_item.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockAdjustmentOutItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockAdjustmentOutItemReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockAdjustmentOutItem>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockAdjustmentOutItem>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.stock_adjustment_code) queryParams['stock_adjustment_code'] = args.stock_adjustment_code;
+      if (args.stock_adjustment_start_date) queryParams['stock_adjustment_start_date'] = args.stock_adjustment_start_date;
+      if (args.stock_adjustment_end_date) queryParams['stock_adjustment_end_date'] = args.stock_adjustment_end_date;
+      if (args.stock_adjustment_category_id) queryParams['stock_adjustment_category_id'] = args.stock_adjustment_category_id;
+      if (args.stock_adjustment_in_warehouse_id) queryParams['stock_adjustment_in_warehouse_id'] = args.stock_adjustment_in_warehouse_id;
+      if (args.stock_adjustment_out_warehouse_id) queryParams['stock_adjustment_out_warehouse_id'] = args.stock_adjustment_out_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment_out_item.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockAdjustmentOutItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useStockAdjustmentOutItemCreateForm() {
+    const url = route('api.post.stock_adjustment_out_item.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_adjustment_id: '',
+      qty: 0,
+      product_unit_id: '',
+      product_unit_conversion_value: 1,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public useStockAdjustmentOutItemEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_adjustment_out_item.edit',
+      {
+        stock_adjustment_out_item: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_adjustment_id: '',
+      qty: 0,
+      product_unit_id: '',
+      product_unit_conversion_value: 1,
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockAdjustmentOutItem | null>> {
+    const result: ServiceResponse<StockAdjustmentOutItem | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_adjustment_out_item.read',
+        {
+          stock_adjustment_out_item: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockAdjustmentOutItem>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_adjustment_out_item.delete',
+        {
+          stock_adjustment_out_item: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/StockAdjustmentService.ts b/web/src/services/StockAdjustmentService.ts
new file mode 100644
index 000000000..1947bd823
--- /dev/null
+++ b/web/src/services/StockAdjustmentService.ts
@@ -0,0 +1,257 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { route, Config } from 'ziggy-js';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import { StockAdjustment } from '../types/models/StockAdjustment';
+import { type Collection } from '../types/resources/Collection';
+import { type Resource } from '../types/resources/Resource';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type StockAdjustmentReadAnyGetRequest,
+  type StockAdjustmentReadAnyPaginateRequest,
+  type StockAdjustmentStoreRequest,
+  type StockAdjustmentUpdateRequest,
+} from '../types/services/stock-adjustment/StockAdjustmentRequest';
+import axios from '../axios';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class StockAdjustmentService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useStockAdjustmentCreateForm() {
+    const url = route('api.post.stock_adjustment.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      category_id: '',
+      in_warehouse_id: '',
+      out_warehouse_id: '',
+      remarks: '',
+      is_posted: true,
+      in_items: [] as NonNullable<StockAdjustmentStoreRequest['in_items']>,
+      out_items: [] as NonNullable<StockAdjustmentStoreRequest['out_items']>,
+    });
+
+    return form;
+  }
+
+  public useStockAdjustmentEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_adjustment.edit',
+      {
+        stock_adjustment: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      category_id: '',
+      in_warehouse_id: '',
+      out_warehouse_id: '',
+      remarks: '',
+      is_posted: false,
+      delete_in_item_ids: [] as NonNullable<StockAdjustmentUpdateRequest['delete_in_item_ids']>,
+      in_items: [] as NonNullable<StockAdjustmentUpdateRequest['in_items']>,
+      delete_out_item_ids: [] as NonNullable<StockAdjustmentUpdateRequest['delete_out_item_ids']>,
+      out_items: [] as NonNullable<StockAdjustmentUpdateRequest['out_items']>,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: StockAdjustmentReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockAdjustment>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockAdjustment>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      queryParams['branch_id'] = args.branch_id;
+      queryParams['search'] = args.search;
+      queryParams['start_date'] = args.start_date;
+      queryParams['end_date'] = args.end_date;
+      queryParams['category_id'] = args.category_id;
+      queryParams['in_warehouse_id'] = args.in_warehouse_id;
+      queryParams['out_warehouse_id'] = args.out_warehouse_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockAdjustment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockAdjustmentReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockAdjustment>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockAdjustment>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      queryParams['branch_id'] = args.branch_id;
+      queryParams['search'] = args.search;
+      queryParams['start_date'] = args.start_date;
+      queryParams['end_date'] = args.end_date;
+      queryParams['category_id'] = args.category_id;
+      queryParams['in_warehouse_id'] = args.in_warehouse_id;
+      queryParams['out_warehouse_id'] = args.out_warehouse_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_adjustment.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockAdjustment>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockAdjustment | null>> {
+    const result: ServiceResponse<StockAdjustment | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_adjustment.read',
+        {
+          stock_adjustment: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockAdjustment>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_adjustment.delete',
+        {
+          stock_adjustment: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/StockTransferItemSerialService.ts b/web/src/services/StockTransferItemSerialService.ts
new file mode 100644
index 000000000..153177cf1
--- /dev/null
+++ b/web/src/services/StockTransferItemSerialService.ts
@@ -0,0 +1,247 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import { StockTransferItemSerial } from '../types/models/StockTransferItemSerial';
+import { type Resource } from '../types/resources/Resource';
+import { type Collection } from '../types/resources/Collection';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  type StockTransferItemSerialReadAnyGetRequest,
+  type StockTransferItemSerialReadAnyPaginateRequest,
+} from '../types/services/stock-transfer-item-serial/StockTransferItemSerialRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class StockTransferItemSerialService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: StockTransferItemSerialReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockTransferItemSerial>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockTransferItemSerial>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+
+      if (args.stock_transfer_code) queryParams['stock_transfer_code'] = args.stock_transfer_code;
+      if (args.stock_transfer_start_date) queryParams['stock_transfer_start_date'] = args.stock_transfer_start_date;
+      if (args.stock_transfer_end_date) queryParams['stock_transfer_end_date'] = args.stock_transfer_end_date;
+      if (args.stock_transfer_source_warehouse_id) queryParams['stock_transfer_source_warehouse_id'] = args.stock_transfer_source_warehouse_id;
+      if (args.stock_transfer_destination_warehouse_id) queryParams['stock_transfer_destination_warehouse_id'] = args.stock_transfer_destination_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_transfer_item_serial.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockTransferItemSerial>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockTransferItemSerialReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockTransferItemSerial>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockTransferItemSerial>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      
+      if (args.stock_transfer_code) queryParams['stock_transfer_code'] = args.stock_transfer_code;
+      if (args.stock_transfer_start_date) queryParams['stock_transfer_start_date'] = args.stock_transfer_start_date;
+      if (args.stock_transfer_end_date) queryParams['stock_transfer_end_date'] = args.stock_transfer_end_date;
+      if (args.stock_transfer_source_warehouse_id) queryParams['stock_transfer_source_warehouse_id'] = args.stock_transfer_source_warehouse_id;
+      if (args.stock_transfer_destination_warehouse_id) queryParams['stock_transfer_destination_warehouse_id'] = args.stock_transfer_destination_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_transfer_item_serial.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockTransferItemSerial>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockTransferItemSerial | null>> {
+    const result: ServiceResponse<StockTransferItemSerial | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_transfer_item_serial.read',
+        {
+          stock_transfer_item_serial: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockTransferItemSerial>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useStockTransferItemSerialCreateForm() {
+    const url = route('api.post.stock_transfer_item_serial.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_transfer_id: '',
+      stock_transfer_item_id: '',
+      serial: '',
+    });
+
+    return form;
+  }
+
+  public useStockTransferItemSerialEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_transfer_item_serial.edit',
+      {
+        stock_transfer_item_serial: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      serial: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_transfer_item_serial.delete',
+        {
+          stock_transfer_item_serial: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/StockTransferItemService.ts b/web/src/services/StockTransferItemService.ts
new file mode 100644
index 000000000..f0a88de61
--- /dev/null
+++ b/web/src/services/StockTransferItemService.ts
@@ -0,0 +1,260 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, type Config } from 'ziggy-js';
+import { StockTransferItem } from '../types/models/StockTransferItem';
+import { type Resource } from '../types/resources/Resource';
+import { type Collection } from '../types/resources/Collection';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  type StockTransferItemReadAnyGetRequest,
+  type StockTransferItemReadAnyPaginateRequest,
+  type StockTransferItemStoreRequest,
+  type StockTransferItemUpdateRequest,
+} from '../types/services/stock-transfer-item/StockTransferItemRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class StockTransferItemService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public async readAnyPaginate(
+    args: StockTransferItemReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockTransferItem>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockTransferItem>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      
+      if (args.stock_transfer_code) queryParams['stock_transfer_code'] = args.stock_transfer_code;
+      if (args.stock_transfer_start_date) queryParams['stock_transfer_start_date'] = args.stock_transfer_start_date;
+      if (args.stock_transfer_end_date) queryParams['stock_transfer_end_date'] = args.stock_transfer_end_date;
+      if (args.stock_transfer_source_warehouse_id) queryParams['stock_transfer_source_warehouse_id'] = args.stock_transfer_source_warehouse_id;
+      if (args.stock_transfer_destination_warehouse_id) queryParams['stock_transfer_destination_warehouse_id'] = args.stock_transfer_destination_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_transfer_item.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockTransferItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockTransferItemReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockTransferItem>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockTransferItem>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      
+      if (args.stock_transfer_code) queryParams['stock_transfer_code'] = args.stock_transfer_code;
+      if (args.stock_transfer_start_date) queryParams['stock_transfer_start_date'] = args.stock_transfer_start_date;
+      if (args.stock_transfer_end_date) queryParams['stock_transfer_end_date'] = args.stock_transfer_end_date;
+      if (args.stock_transfer_source_warehouse_id) queryParams['stock_transfer_source_warehouse_id'] = args.stock_transfer_source_warehouse_id;
+      if (args.stock_transfer_destination_warehouse_id) queryParams['stock_transfer_destination_warehouse_id'] = args.stock_transfer_destination_warehouse_id;
+      if (args.product_unit_code) queryParams['product_unit_code'] = args.product_unit_code;
+      if (args.product_unit_product_name) queryParams['product_unit_product_name'] = args.product_unit_product_name;
+      if (args.product_unit_product_category_id) queryParams['product_unit_product_category_id'] = args.product_unit_product_category_id;
+      if (args.product_unit_product_brand_id) queryParams['product_unit_product_brand_id'] = args.product_unit_product_brand_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_transfer_item.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockTransferItem>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockTransferItem | null>> {
+    const result: ServiceResponse<StockTransferItem | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_transfer_item.read',
+        {
+          stock_transfer_item: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockTransferItem>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useStockTransferItemCreateForm() {
+    const url = route('api.post.stock_transfer_item.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_transfer_id: '',
+      qty: 0,
+      product_unit_id: '',
+      product_unit_conversion_value: 1,
+      remarks: '',
+      serials: [] as NonNullable<StockTransferItemStoreRequest['serials']>,
+    });
+
+    return form;
+  }
+
+  public useStockTransferItemEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_transfer_item.edit',
+      {
+        stock_transfer_item: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      stock_transfer_id: '',
+      qty: 0,
+      product_unit_id: '',
+      product_unit_conversion_value: 1,
+      remarks: '',
+      delete_serial_ids: [] as NonNullable<StockTransferItemUpdateRequest['delete_serial_ids']>,
+      serials: [] as NonNullable<StockTransferItemUpdateRequest['serials']>,
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_transfer_item.delete',
+        {
+          stock_transfer_item: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/StockTransferService.ts b/web/src/services/StockTransferService.ts
new file mode 100644
index 000000000..6f7949af0
--- /dev/null
+++ b/web/src/services/StockTransferService.ts
@@ -0,0 +1,251 @@
+import { type AxiosError, type AxiosResponse, isAxiosError } from 'axios';
+import { client, useForm } from 'laravel-precognition-vue';
+import { route, Config } from 'ziggy-js';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { StatusCode } from '../types/enums/StatusCode';
+import { StockTransfer } from '../types/models/StockTransfer';
+import { type Collection } from '../types/resources/Collection';
+import { type Resource } from '../types/resources/Resource';
+import { type ServiceResponse } from '../types/services/ServiceResponse';
+import {
+  type StockTransferReadAnyGetRequest,
+  type StockTransferReadAnyPaginateRequest,
+  type StockTransferStoreRequest,
+  type StockTransferUpdateRequest,
+} from '../types/services/stock-transfer/StockTransferRequest';
+import axios from '../axios';
+import ErrorHandlerService from './ErrorHandlerService';
+
+export default class StockTransferService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useStockTransferCreateForm() {
+    const url = route('api.post.stock_transfer.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '_AUTO_',
+      source_warehouse_id: '',
+      destination_warehouse_id: '',
+      remarks: '',
+      is_posted: true,
+      items: [] as NonNullable<StockTransferStoreRequest['items']>,
+    });
+
+    return form;
+  }
+
+  public useStockTransferEditForm(ulid: string) {
+    const url = route(
+      'api.post.stock_transfer.edit',
+      {
+        stock_transfer: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      date: '',
+      source_warehouse_id: '',
+      destination_warehouse_id: '',
+      remarks: '',
+      is_posted: false,
+      delete_item_ids: [] as NonNullable<StockTransferUpdateRequest['delete_item_ids']>,
+      items: [] as NonNullable<StockTransferUpdateRequest['items']>,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: StockTransferReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<StockTransfer>> | null>> {
+    const result: ServiceResponse<Collection<Array<StockTransfer>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      queryParams['branch_id'] = args.branch_id;
+      queryParams['search'] = args.search;
+      
+      queryParams['start_date'] = args.start_date;
+      queryParams['end_date'] = args.end_date;
+      queryParams['source_warehouse_id'] = args.source_warehouse_id;
+      queryParams['destination_warehouse_id'] = args.destination_warehouse_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.stock_transfer.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<StockTransfer>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: StockTransferReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<StockTransfer>> | null>> {
+    const result: ServiceResponse<Resource<Array<StockTransfer>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed;
+      queryParams['company_id'] = args.company_id;
+      queryParams['branch_id'] = args.branch_id;
+      queryParams['search'] = args.search;
+      queryParams['start_date'] = args.start_date;
+      queryParams['end_date'] = args.end_date;
+      queryParams['source_warehouse_id'] = args.source_warehouse_id;
+      queryParams['destination_warehouse_id'] = args.destination_warehouse_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.stock_transfer.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<StockTransfer>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<StockTransfer | null>> {
+    const result: ServiceResponse<StockTransfer | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.stock_transfer.read',
+        {
+          stock_transfer: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<StockTransfer>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.stock_transfer.delete',
+        {
+          stock_transfer: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/SupplierService.ts b/web/src/services/SupplierService.ts
new file mode 100644
index 000000000..5abfd71e2
--- /dev/null
+++ b/web/src/services/SupplierService.ts
@@ -0,0 +1,231 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Supplier } from '@/types/models/Supplier';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import { SupplierReadAnyPaginateRequest, SupplierReadAnyGetRequest } from '../types/services/supplier/SupplierRequest';
+
+export default class SupplierService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useSupplierCreateForm() {
+    const url = route('api.post.supplier.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      address: '',
+      city: '',
+      payment_term_type: '',
+      payment_term: 0,
+      taxable_enterprise: false,
+      tax_id: '',
+      status: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: SupplierReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Supplier>> | null>> {
+    const result: ServiceResponse<Collection<Array<Supplier>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.status !== undefined && args.status !== null) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.supplier.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Supplier>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: SupplierReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Supplier>> | null>> {
+    const result: ServiceResponse<Resource<Array<Supplier>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.status !== undefined && args.status !== null) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.supplier.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Supplier>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Supplier | null>> {
+    const result: ServiceResponse<Supplier | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.supplier.read',
+        {
+          supplier: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Supplier>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useSupplierEditForm(ulid: string) {
+    const url = route('api.post.supplier.edit', ulid, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      address: '',
+      city: '',
+      payment_term_type: '',
+      payment_term: 0,
+      taxable_enterprise: false,
+      tax_id: '',
+      status: '',
+      remarks: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.supplier.delete',
+        {
+          supplier: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/UnitService.ts b/web/src/services/UnitService.ts
new file mode 100644
index 000000000..1bb2107b6
--- /dev/null
+++ b/web/src/services/UnitService.ts
@@ -0,0 +1,255 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Unit } from '../types/models/Unit';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { UnitReadAnyPaginateRequest, UnitReadAnyGetRequest } from '../types/services/unit/UnitRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+import CacheService from './CacheService';
+import { DropDownOption } from '../types/models/DropDownOption';
+
+export default class UnitService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+  private cacheService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+    this.cacheService = new CacheService();
+  }
+
+  public useUnitCreateForm() {
+    const url = route('api.post.unit.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      description: '',
+      type: '',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: UnitReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Unit>> | null>> {
+    const result: ServiceResponse<Collection<Array<Unit>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.unit.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Unit>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(args: UnitReadAnyGetRequest): Promise<ServiceResponse<Resource<Array<Unit>> | null>> {
+    const result: ServiceResponse<Resource<Array<Unit>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      queryParams['with_trashed'] = args.with_trashed ? 1 : 0;
+
+      queryParams['company_id'] = args.company_id;
+      queryParams['search'] = args.search ? args.search : '';
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.unit.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Unit>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Unit | null>> {
+    const result: ServiceResponse<Unit | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.unit.read',
+        {
+          unit: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Unit>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useUnitEditForm(ulid: string) {
+    const url = route(
+      'api.post.unit.edit',
+      {
+        unit: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      description: '',
+      type: '',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.unit.delete',
+        {
+          unit: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async getTypes(): Promise<Array<DropDownOption> | null> {
+    const ddlName = 'unitTypesDDL';
+    let result: Array<DropDownOption> = [];
+
+    try {
+      if (this.cacheService.getCachedDDL(ddlName) == null) {
+        const url = route('api.get.unit.read_types', undefined, false, this.ziggyRoute);
+
+        const response: AxiosResponse<Array<DropDownOption> | null> = await axios.get(url);
+
+        this.cacheService.setCachedDDL(ddlName, response.data);
+      }
+
+      const cachedData: Array<DropDownOption> | null = this.cacheService.getCachedDDL(ddlName);
+
+      if (cachedData != null) {
+        result = cachedData as Array<DropDownOption>;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      return result;
+    }
+  }
+}
diff --git a/web/src/services/UserService.ts b/web/src/services/UserService.ts
index 355fc5b00..026ccc6e0 100644
--- a/web/src/services/UserService.ts
+++ b/web/src/services/UserService.ts
@@ -1,198 +1,210 @@
-import axios from "../axios";
-import { useZiggyRouteStore } from "../stores/ziggy-route";
-import { route, Config } from "ziggy-js";
-import { User } from "../types/models/User";
-import { Resource } from "../types/resources/Resource";
-import { Collection } from "../types/resources/Collection";
-import { ServiceResponse } from "../types/services/ServiceResponse";
-import { AxiosError, AxiosResponse, isAxiosError } from "axios";
-import ErrorHandlerService from "./ErrorHandlerService";
-import { ReadAnyRequest } from "../types/services/ServiceRequest";
-import { StatusCode } from "../types/enums/StatusCode";
-import { client, useForm } from "laravel-precognition-vue";
-
-export default class UserService {
-    private ziggyRoute: Config;
-    private ziggyRouteStore = useZiggyRouteStore();
-
-    private errorHandlerService;
-
-    constructor() {
-        this.ziggyRoute = this.ziggyRouteStore.getZiggy;
-
-        this.errorHandlerService = new ErrorHandlerService();
-    }
-
-    public useUserCreateForm() {
-        const url = route('api.post.db.admin.user.save', undefined, true, this.ziggyRoute);
-
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', url, {
-            name: '',
-            email: '',
-
-            first_name: '',
-            last_name: '',
-            address: '',
-            city: '',
-            postal_code: '',
-            country: '',
-            img_path: '',
-            tax_id: 0,
-            ic_num: 0,
-            status: '',
-            remarks: '',
-
-            roles: [],
-
-            theme: 'side-menu-light-full',
-            date_format: 'dd_MMM_yyyy',
-            time_format: 'hh_mm_ss',
-        });
-
-        return form;
-    }
-
-    public async readAny(args: ReadAnyRequest): Promise<ServiceResponse<Collection<Array<User>> | Resource<Array<User>> | null>> {
-        const result: ServiceResponse<Collection<Array<User>> | Resource<Array<User>> | null> = {
-            success: false,
-        }
-
-        try {
-            const queryParams: Record<string, string | number | boolean> = {};
-            queryParams['search'] = args.search ? args.search : '';
-            queryParams['refresh'] = args.refresh;
-            queryParams['paginate'] = args.paginate;
-            if (args.page) queryParams['page'] = args.page;
-            if (args.per_page) queryParams['per_page'] = args.per_page;
-
-            //ZiggyRouteNotFoundException
-            //const url = route('invalid.route', undefined, false, this.ziggyRoute);
-            const url = route('api.get.db.admin.user.read_any', { _query: queryParams }, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Collection<Array<User>>> = await axios.get(url);
-
-            //Slow API Call (10 seconds Delay)
-            /*
-            await new Promise((resolve) => {
-                setTimeout(resolve, 10000);
-            });
-            console.log('Slow API Call (10 Seconds Delay)');
-            */
-
-            if (response != null) {
-                result.success = true;
-                result.data = response.data;
-            }
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                if (e.response) {
-                    switch (e.response.status) {
-                        case StatusCode.UnprocessableEntity:
-                            return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
-                        default:
-                            return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-                    }
-                } else {
-                    return result;
-                }
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public async read(ulid: string): Promise<ServiceResponse<User | null>> {
-        const result: ServiceResponse<User | null> = {
-            success: false,
-        }
-
-        try {
-            const url = route('api.get.db.admin.user.read', {
-                user: ulid
-            }, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Resource<User>> = await axios.get(url);
-
-            result.success = true;
-            result.data = response.data.data;
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-
-    public useUserEditForm(ulid: string) {
-        const url = route('api.post.db.admin.user.edit', ulid, true, this.ziggyRoute);
-
-        client.axios().defaults.withCredentials = true;
-        client.axios().defaults.withXSRFToken = true;
-        const form = useForm('post', url, {
-            name: '',
-            email: '',
-
-            first_name: '',
-            last_name: '',
-            address: '',
-            city: '',
-            postal_code: '',
-            country: '',
-            img_path: '',
-            tax_id: 0,
-            ic_num: 0,
-            status: '',
-            remarks: '',
-
-            roles: [],
-
-            theme: 'side-menu-light-full',
-            date_format: 'dd_MMM_yyyy',
-            time_format: 'hh_mm_ss',
-
-            tokens_reset: false,
-            reset_password: false,
-            reset_2fa: false,
-        });
-
-        return form;
-    }
-
-    public async getTokensCount(ulid: string): Promise<ServiceResponse<number | null>> {
-        const result: ServiceResponse<number | null> = {
-            success: false,
-        }
-
-        try {
-            const url = route('api.get.db.admin.user.read.tokens.count', {
-                user: ulid
-            }, false, this.ziggyRoute);
-
-            const response: AxiosResponse<Resource<number>> = await axios.get(url);
-
-            result.success = true;
-            result.data = response.data.data;
-
-            return result;
-        } catch (e: unknown) {
-            if (e instanceof Error && e.message.includes('Ziggy error')) {
-                return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
-            } else if (isAxiosError(e)) {
-                return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
-            } else {
-                return result;
-            }
-        }
-    }
-}
\ No newline at end of file
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { User } from '../types/models/User';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import { ReadAnyRequest } from '../types/services/ServiceRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class UserService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useUserCreateForm() {
+    const url = route('api.post.db.admin.user.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      name: '',
+      email: '',
+
+      first_name: '',
+      last_name: '',
+      address: '',
+      city: '',
+      postal_code: '',
+      country: '',
+      img_path: '',
+      tax_id: 0,
+      ic_num: 0,
+      status: '',
+      remarks: '',
+
+      roles: [],
+
+      theme: 'side-menu-light-full',
+      date_format: 'dd_MMM_yyyy',
+      time_format: 'hh_mm_ss',
+    });
+
+    return form;
+  }
+
+  public async readAny(
+    args: ReadAnyRequest,
+  ): Promise<ServiceResponse<Collection<Array<User>> | Resource<Array<User>> | null>> {
+    const result: ServiceResponse<Collection<Array<User>> | Resource<Array<User>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, string | number | boolean> = {};
+      if (args.search) queryParams['search'] = args.search;
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = args.paginate;
+      if (args.page) queryParams['page'] = args.page;
+      if (args.per_page) queryParams['per_page'] = args.per_page;
+
+      //ZiggyRouteNotFoundException
+      //const url = route('invalid.route', undefined, false, this.ziggyRoute);
+      const url = route('api.get.db.admin.user.read_any', { _query: queryParams }, false, this.ziggyRoute);
+
+      const response: AxiosResponse<Collection<Array<User>>> = await axios.get(url);
+
+      //Slow API Call (10 seconds Delay)
+      /*
+            await new Promise((resolve) => {
+                setTimeout(resolve, 10000);
+            });
+            console.log('Slow API Call (10 Seconds Delay)');
+            */
+
+      if (response != null) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        if (e.response) {
+          switch (e.response.status) {
+            case StatusCode.UnprocessableEntity:
+              return this.errorHandlerService.generateAxiosValidationErrorServiceResponse(e as AxiosError);
+            default:
+              return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+          }
+        } else {
+          return result;
+        }
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<User | null>> {
+    const result: ServiceResponse<User | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.db.admin.user.read',
+        {
+          user: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<User>> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useUserEditForm(ulid: string) {
+    const url = route('api.post.db.admin.user.edit', ulid, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      name: '',
+      email: '',
+
+      first_name: '',
+      last_name: '',
+      address: '',
+      city: '',
+      postal_code: '',
+      country: '',
+      img_path: '',
+      tax_id: 0,
+      ic_num: 0,
+      status: '',
+      remarks: '',
+
+      roles: [],
+
+      theme: 'side-menu-light-full',
+      date_format: 'dd_MMM_yyyy',
+      time_format: 'hh_mm_ss',
+
+      tokens_reset: false,
+      reset_password: false,
+      reset_2fa: false,
+    });
+
+    return form;
+  }
+
+  public async getTokensCount(ulid: string): Promise<ServiceResponse<number | null>> {
+    const result: ServiceResponse<number | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.db.admin.user.read.tokens.count',
+        {
+          user: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<number>> = await axios.get(url);
+
+      result.success = true;
+      result.data = response.data.data;
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/VatProfileService.ts b/web/src/services/VatProfileService.ts
new file mode 100644
index 000000000..8274c5042
--- /dev/null
+++ b/web/src/services/VatProfileService.ts
@@ -0,0 +1,234 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { VatProfile } from '../types/models/VatProfile';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  VatProfileReadAnyPaginateRequest,
+  VatProfileReadAnyGetRequest,
+} from '../types/services/vat_profile/VatProfileRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class VatProfileService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useVatProfileCreateForm() {
+    const url = route('api.post.vat_profile.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      vat_rate: '',
+      vat_base_numerator: 1,
+      vat_base_denominator: 1,
+      remarks: null,
+      is_active: true,
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: VatProfileReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<VatProfile>> | null>> {
+    const result: ServiceResponse<Collection<Array<VatProfile>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.vat_profile.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<VatProfile>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: VatProfileReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<VatProfile>> | null>> {
+    const result: ServiceResponse<Resource<Array<VatProfile>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.vat_profile.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<VatProfile>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<VatProfile | null>> {
+    const result: ServiceResponse<VatProfile | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.vat_profile.read',
+        {
+          vat_profile: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<VatProfile>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useVatProfileEditForm(ulid: string) {
+    const url = route(
+      'api.post.vat_profile.edit',
+      {
+        vat_profile: ulid,
+      },
+      true,
+      this.ziggyRoute,
+    );
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      code: '_AUTO_',
+      name: '',
+      vat_rate: '',
+      vat_base_numerator: 1,
+      vat_base_denominator: 1,
+      remarks: null,
+      is_active: true,
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.post.vat_profile.delete',
+        {
+          vat_profile: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/services/WarehouseService.ts b/web/src/services/WarehouseService.ts
new file mode 100644
index 000000000..1fe72908f
--- /dev/null
+++ b/web/src/services/WarehouseService.ts
@@ -0,0 +1,230 @@
+import axios from '../axios';
+import { useZiggyRouteStore } from '../stores/ziggy-route';
+import { route, Config } from 'ziggy-js';
+import { Warehouse } from '../types/models/Warehouse';
+import { Resource } from '../types/resources/Resource';
+import { Collection } from '../types/resources/Collection';
+import { ServiceResponse } from '../types/services/ServiceResponse';
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import ErrorHandlerService from './ErrorHandlerService';
+import {
+  WarehouseReadAnyPaginateRequest,
+  WarehouseReadAnyGetRequest,
+} from '../types/services/warehouse/WarehouseRequest';
+import { StatusCode } from '../types/enums/StatusCode';
+import { client, useForm } from 'laravel-precognition-vue';
+
+export default class WarehouseService {
+  private ziggyRoute: Config;
+  private ziggyRouteStore = useZiggyRouteStore();
+
+  private errorHandlerService;
+
+  constructor() {
+    this.ziggyRoute = this.ziggyRouteStore.getZiggy;
+
+    this.errorHandlerService = new ErrorHandlerService();
+  }
+
+  public useWarehouseCreateForm() {
+    const url = route('api.post.warehouse.save', undefined, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      name: '',
+      address: null,
+      city: null,
+      contact: null,
+      remarks: null,
+      status: 'ACTIVE',
+    });
+
+    return form;
+  }
+
+  public async readAnyPaginate(
+    args: WarehouseReadAnyPaginateRequest,
+  ): Promise<ServiceResponse<Collection<Array<Warehouse>> | null>> {
+    const result: ServiceResponse<Collection<Array<Warehouse>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.status) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['paginate'] = {
+        page: args.page,
+        per_page: args.per_page,
+      };
+
+      const url = route(
+        'api.get.warehouse.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Collection<Array<Warehouse>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async readAnyGet(
+    args: WarehouseReadAnyGetRequest,
+  ): Promise<ServiceResponse<Resource<Array<Warehouse>> | null>> {
+    const result: ServiceResponse<Resource<Array<Warehouse>> | null> = {
+      success: false,
+    };
+
+    try {
+      const queryParams: Record<string, any> = {};
+      if (args.with_trashed !== undefined) queryParams['with_trashed'] = args.with_trashed;
+
+      if (args.company_id) queryParams['company_id'] = args.company_id;
+      if (args.branch_id) queryParams['branch_id'] = args.branch_id;
+      if (args.search) queryParams['search'] = args.search;
+      if (args.status) queryParams['status'] = args.status;
+      if (args.include_id) queryParams['include_id'] = args.include_id;
+
+      queryParams['refresh'] = args.refresh;
+      queryParams['get'] = {
+        limit: args.limit,
+      };
+
+      const url = route(
+        'api.get.warehouse.read_any',
+        {
+          _query: queryParams,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Array<Warehouse>>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public async read(ulid: string): Promise<ServiceResponse<Warehouse | null>> {
+    const result: ServiceResponse<Warehouse | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route(
+        'api.get.warehouse.read',
+        {
+          warehouse: ulid,
+        },
+        false,
+        this.ziggyRoute,
+      );
+
+      const response: AxiosResponse<Resource<Warehouse>> = await axios.get(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+        result.data = response.data.data;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+
+  public useWarehouseEditForm(ulid: string) {
+    const url = route('api.post.warehouse.edit', ulid, true, this.ziggyRoute);
+
+    client.axios().defaults.withCredentials = true;
+    client.axios().defaults.withXSRFToken = true;
+    const form = useForm('post', url, {
+      company_id: '',
+      branch_id: '',
+      code: '_AUTO_',
+      name: '',
+      address: null,
+      city: null,
+      contact: null,
+      remarks: null,
+      status: 'ACTIVE',
+    });
+
+    return form;
+  }
+
+  public async delete(ulid: string): Promise<ServiceResponse<boolean | null>> {
+    const result: ServiceResponse<boolean | null> = {
+      success: false,
+    };
+
+    try {
+      const url = route('api.post.warehouse.delete', ulid, false, this.ziggyRoute);
+
+      const response: AxiosResponse<boolean | null> = await axios.post(url);
+
+      if (response.status == StatusCode.OK) {
+        result.success = true;
+      }
+
+      return result;
+    } catch (e: unknown) {
+      if (e instanceof Error && e.message.includes('Ziggy error')) {
+        return this.errorHandlerService.generateZiggyUrlErrorServiceResponse(e.message);
+      } else if (isAxiosError(e)) {
+        return this.errorHandlerService.generateAxiosErrorServiceResponse(e as AxiosError);
+      } else {
+        return result;
+      }
+    }
+  }
+}
diff --git a/web/src/stores/color-scheme.ts b/web/src/stores/color-scheme.ts
index c08df3a3e..5d78b902d 100644
--- a/web/src/stores/color-scheme.ts
+++ b/web/src/stores/color-scheme.ts
@@ -1,37 +1,28 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia';
 
-const colorSchemes = [
-  "default",
-  "theme-1",
-  "theme-2",
-  "theme-3",
-  "theme-4",
-] as const;
+const colorSchemes = ['default', 'theme-1', 'theme-2', 'theme-3', 'theme-4'] as const;
 
-export type ColorSchemes = typeof colorSchemes[number];
+export type ColorSchemes = (typeof colorSchemes)[number];
 
 interface ColorSchemeState {
   colorSchemeValue: ColorSchemes;
 }
 
 const getColorScheme = () => {
-  const colorScheme = localStorage.getItem("colorScheme");
+  const colorScheme = localStorage.getItem('colorScheme');
   return colorSchemes.filter((item, key) => {
     return item === colorScheme;
   })[0];
 };
 
-export const useColorSchemeStore = defineStore("colorScheme", {
+export const useColorSchemeStore = defineStore('colorScheme', {
   state: (): ColorSchemeState => ({
-    colorSchemeValue:
-      localStorage.getItem("colorScheme") === null
-        ? "default"
-        : getColorScheme(),
+    colorSchemeValue: localStorage.getItem('colorScheme') === null ? 'default' : getColorScheme(),
   }),
   getters: {
     colorScheme(state) {
-      if (localStorage.getItem("colorScheme") === null) {
-        localStorage.setItem("colorScheme", "default");
+      if (localStorage.getItem('colorScheme') === null) {
+        localStorage.setItem('colorScheme', 'default');
       }
 
       return state.colorSchemeValue;
@@ -39,7 +30,7 @@ export const useColorSchemeStore = defineStore("colorScheme", {
   },
   actions: {
     setColorScheme(colorScheme: ColorSchemes) {
-      localStorage.setItem("colorScheme", colorScheme);
+      localStorage.setItem('colorScheme', colorScheme);
       this.colorSchemeValue = colorScheme;
     },
   },
diff --git a/web/src/stores/dark-mode.ts b/web/src/stores/dark-mode.ts
index ee906605e..25b450523 100644
--- a/web/src/stores/dark-mode.ts
+++ b/web/src/stores/dark-mode.ts
@@ -1,17 +1,17 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia';
 
 interface DarkModeState {
   darkModeValue: boolean;
 }
 
-export const useDarkModeStore = defineStore("darkMode", {
+export const useDarkModeStore = defineStore('darkMode', {
   state: (): DarkModeState => ({
-    darkModeValue: localStorage.getItem("darkMode") === "true",
+    darkModeValue: localStorage.getItem('darkMode') === 'true',
   }),
   getters: {
     darkMode(state) {
-      if (localStorage.getItem("darkMode") === null) {
-        localStorage.setItem("darkMode", "false");
+      if (localStorage.getItem('darkMode') === null) {
+        localStorage.setItem('darkMode', 'false');
       }
 
       return state.darkModeValue;
@@ -19,7 +19,7 @@ export const useDarkModeStore = defineStore("darkMode", {
   },
   actions: {
     setDarkMode(darkMode: boolean) {
-      localStorage.setItem("darkMode", darkMode.toString());
+      localStorage.setItem('darkMode', darkMode.toString());
       this.darkModeValue = darkMode;
     },
   },
diff --git a/web/src/stores/dashboard.ts b/web/src/stores/dashboard.ts
index 4d35f36e1..94d998f96 100644
--- a/web/src/stores/dashboard.ts
+++ b/web/src/stores/dashboard.ts
@@ -1,29 +1,29 @@
-import { defineStore } from "pinia";
-
-export interface DashboardState {
-    screenMaskValue: boolean,
-    layoutValue: 'side-menu' | 'simple-menu' | undefined
-}
-
-export const useDashboardStore = defineStore("dashboardStore", {
-    state: (): DashboardState => ({
-        screenMaskValue: false,
-        layoutValue: 'side-menu'
-    }),
-    getters: {
-        getScreenMaskValue: state => state.screenMaskValue,
-        getLayoutValue: state => state.layoutValue
-    },
-    actions: {
-        setScreenMaskValue(screenMaskVal: boolean) {
-            this.screenMaskValue = screenMaskVal;
-        },
-        toggleLayoutValue() {
-            if (this.layoutValue == 'side-menu') this.layoutValue = 'simple-menu';
-            else this.layoutValue = 'side-menu';
-        },
-        toggleScreenMaskValue() {
-            this.screenMaskValue = !this.screenMaskValue;
-        }
-    }
-});
\ No newline at end of file
+import { defineStore } from 'pinia';
+
+export interface DashboardState {
+  screenMaskValue: boolean;
+  layoutValue: 'side-menu' | 'simple-menu' | undefined;
+}
+
+export const useDashboardStore = defineStore('dashboardStore', {
+  state: (): DashboardState => ({
+    screenMaskValue: false,
+    layoutValue: 'side-menu',
+  }),
+  getters: {
+    getScreenMaskValue: (state) => state.screenMaskValue,
+    getLayoutValue: (state) => state.layoutValue,
+  },
+  actions: {
+    setScreenMaskValue(screenMaskVal: boolean) {
+      this.screenMaskValue = screenMaskVal;
+    },
+    toggleLayoutValue() {
+      if (this.layoutValue == 'side-menu') this.layoutValue = 'simple-menu';
+      else this.layoutValue = 'side-menu';
+    },
+    toggleScreenMaskValue() {
+      this.screenMaskValue = !this.screenMaskValue;
+    },
+  },
+});
diff --git a/web/src/stores/menu.ts b/web/src/stores/menu.ts
index 6f656ed52..56386610b 100644
--- a/web/src/stores/menu.ts
+++ b/web/src/stores/menu.ts
@@ -1,6 +1,6 @@
-import { type Icon } from "@/components/Base/Lucide/Lucide.vue";
-import { type Themes } from "@/stores/theme";
-import { defineStore } from "pinia";
+import { type Icon } from '@/components/Base/Lucide/Lucide.vue';
+import { type Themes } from '@/stores/theme';
+import { defineStore } from 'pinia';
 
 export interface Menu {
   icon: Icon;
@@ -11,33 +11,26 @@ export interface Menu {
 }
 
 export interface MenuState {
-  menuValue: Array<Menu | "divider">;
+  menuValue: Array<Menu | 'divider'>;
 }
 
-export const useMenuStore = defineStore("menu", {
+export const useMenuStore = defineStore('menu', {
   state: (): MenuState => ({
     menuValue: [
       {
         icon: 'Home',
-        pageName: 'side-menu-dashboard',
+        pageName: 'side-menu-dashboard-maindashboard',
         title: 'Dashboard',
-        subMenu: [
-          {
-            icon: "ChevronRight",
-            pageName: "side-menu-dashboard-maindashboard",
-            title: "Main Dashboard",
-          }
-        ]
-      }
+      },
     ],
   }),
   getters: {
-    menu: (state) => (layout: Themes["layout"]) => {
-      if (layout == "top-menu") {
+    menu: (state) => (layout: Themes['layout']) => {
+      if (layout == 'top-menu') {
         return state.menuValue;
       }
 
-      if (layout == "simple-menu") {
+      if (layout == 'simple-menu') {
         return state.menuValue;
       }
 
@@ -47,6 +40,6 @@ export const useMenuStore = defineStore("menu", {
   actions: {
     setMenu(menu: Array<Menu>) {
       this.menuValue = menu;
-    }
-  }
+    },
+  },
 });
diff --git a/web/src/stores/selected-user-location.ts b/web/src/stores/selected-user-location.ts
index d0d58bea7..0155b30a0 100644
--- a/web/src/stores/selected-user-location.ts
+++ b/web/src/stores/selected-user-location.ts
@@ -1,118 +1,139 @@
-import { defineStore } from "pinia";
-
-export interface SelectedUserLocation {
-    company: {
-        id: string,
-        ulid: string,
-        code: string,
-        name: string,
-    },
-    branch: {
-        id: string,
-        ulid: string,
-        code: string,
-        name: string,
-    }
-}
-
-export interface SelectedUserLocationState {
-    isUserLocationSelected: boolean,
-    selectedUserLocation: SelectedUserLocation,
-}
-
-export const useSelectedUserLocationStore = defineStore("selectedUserLocation", {
-    state: (): SelectedUserLocationState => ({
-        isUserLocationSelected: false,
-        selectedUserLocation: {
-            company: {
-                id: '',
-                ulid: '',
-                code: '',
-                name: '',
-            },
-            branch: {
-                id: '',
-                ulid: '',
-                code: '',
-                name: '',
-            }
-        }
-    }),
-    getters: {
-        getSelectedUserLocation: state => {
-            const serializedSelectedUserLocation = sessionStorage.getItem('selectedUserLocation');
-
-            if (serializedSelectedUserLocation) {
-                const debug = import.meta.env.VITE_APP_DEBUG === 'true';
-                const derializedSelectedUserLocation: SelectedUserLocation = JSON.parse(debug ? serializedSelectedUserLocation : atob(serializedSelectedUserLocation));
-
-                state.selectedUserLocation = derializedSelectedUserLocation;
-
-                state.isUserLocationSelected = true;
-            }
-
-            return state.selectedUserLocation;
-        },
-        getSelectedUserCompany: state => {
-            const serializedSelectedUserLocation = sessionStorage.getItem('selectedUserLocation');
-
-            if (serializedSelectedUserLocation) {
-                const debug = import.meta.env.VITE_APP_DEBUG === 'true';
-                const derializedSelectedUserLocation: SelectedUserLocation = JSON.parse(debug ? serializedSelectedUserLocation : atob(serializedSelectedUserLocation));
-
-                state.selectedUserLocation = derializedSelectedUserLocation;
-
-                state.isUserLocationSelected = true;
-            }
-
-            return state.selectedUserLocation.company;
-        },
-        getSelectedUserBranch: state => {
-            const serializedSelectedUserLocation = sessionStorage.getItem('selectedUserLocation');
-
-            if (serializedSelectedUserLocation) {
-                const debug = import.meta.env.VITE_APP_DEBUG === 'true';
-                const derializedSelectedUserLocation: SelectedUserLocation = JSON.parse(debug ? serializedSelectedUserLocation : atob(serializedSelectedUserLocation));
-
-                state.selectedUserLocation = derializedSelectedUserLocation;
-
-                state.isUserLocationSelected = true;
-            }
-
-            return state.selectedUserLocation.branch;
-        },
-    },
-    actions: {
-        clearSelectedUserLocation() {
-            this.selectedUserLocation.company = { id: '', ulid: '', code: '', name: '' };
-            this.selectedUserLocation.branch = { id: '', ulid: '', code: '', name: '' };
-
-            this.isUserLocationSelected = false;
-        },
-        setSelectedUserLocation(companyId: string, companyUlid: string, companyCode: string, companyName: string, branchId?: string, branchUlid?: string, branchCode?: string, branchName?: string) {
-            this.clearSelectedUserLocation();
-
-            this.selectedUserLocation.company.id = companyId;
-            this.selectedUserLocation.company.ulid = companyUlid;
-            this.selectedUserLocation.company.code = companyCode;
-            this.selectedUserLocation.company.name = companyName;
-
-            if (branchId)
-                this.selectedUserLocation.branch.id = branchId;
-
-            if (branchUlid)
-                this.selectedUserLocation.branch.ulid = branchUlid;
-            
-            if (branchCode)
-                this.selectedUserLocation.branch.code = branchCode;
-            
-            if (branchName)
-                this.selectedUserLocation.branch.name = branchName;
-
-            const debug = import.meta.env.VITE_APP_DEBUG === 'true';
-            sessionStorage.setItem('selectedUserLocation', debug ? JSON.stringify(this.selectedUserLocation) : btoa(JSON.stringify(this.selectedUserLocation)));
-
-            this.isUserLocationSelected = true;
-        }
-    },
-});
+import { defineStore } from 'pinia';
+
+export interface SelectedUserLocation {
+  company: {
+    id: string;
+    ulid: string;
+    code: string;
+    name: string;
+  };
+  branch: {
+    id: string;
+    ulid: string;
+    code: string;
+    name: string;
+  };
+}
+
+export interface SelectedUserLocationState {
+  isUserLocationSelected: boolean;
+  selectedUserLocation: SelectedUserLocation;
+}
+
+const SELECTED_USER_LOCATION_STORAGE_KEY = 'selectedUserLocation';
+
+const createEmptySelectedUserLocation = (): SelectedUserLocation => ({
+  company: {
+    id: '',
+    ulid: '',
+    code: '',
+    name: '',
+  },
+  branch: {
+    id: '',
+    ulid: '',
+    code: '',
+    name: '',
+  },
+});
+
+const isDebugMode = (): boolean => import.meta.env.VITE_APP_DEBUG === 'true';
+
+const serializeSelectedUserLocation = (selectedUserLocation: SelectedUserLocation): string => {
+  const serializedSelectedUserLocation = JSON.stringify(selectedUserLocation);
+
+  return isDebugMode() ? serializedSelectedUserLocation : btoa(serializedSelectedUserLocation);
+};
+
+const deserializeSelectedUserLocation = (serializedSelectedUserLocation: string): SelectedUserLocation => {
+  return JSON.parse(isDebugMode() ? serializedSelectedUserLocation : atob(serializedSelectedUserLocation));
+};
+
+const clearStoredSelectedUserLocation = (): void => {
+  localStorage.removeItem(SELECTED_USER_LOCATION_STORAGE_KEY);
+  sessionStorage.removeItem(SELECTED_USER_LOCATION_STORAGE_KEY);
+};
+
+const getStoredSelectedUserLocation = (): SelectedUserLocation | null => {
+  const serializedSelectedUserLocation =
+    localStorage.getItem(SELECTED_USER_LOCATION_STORAGE_KEY) ??
+    sessionStorage.getItem(SELECTED_USER_LOCATION_STORAGE_KEY);
+
+  if (!serializedSelectedUserLocation) {
+    return null;
+  }
+
+  try {
+    const selectedUserLocation = deserializeSelectedUserLocation(serializedSelectedUserLocation);
+
+    // Migrate legacy session storage selection to local storage for new tabs.
+    localStorage.setItem(
+      SELECTED_USER_LOCATION_STORAGE_KEY,
+      serializeSelectedUserLocation(selectedUserLocation),
+    );
+    sessionStorage.removeItem(SELECTED_USER_LOCATION_STORAGE_KEY);
+
+    return selectedUserLocation;
+  } catch (_error) {
+    clearStoredSelectedUserLocation();
+
+    return null;
+  }
+};
+
+const initialSelectedUserLocation = getStoredSelectedUserLocation();
+
+export const useSelectedUserLocationStore = defineStore('selectedUserLocation', {
+  state: (): SelectedUserLocationState => ({
+    isUserLocationSelected: initialSelectedUserLocation !== null,
+    selectedUserLocation: initialSelectedUserLocation ?? createEmptySelectedUserLocation(),
+  }),
+  getters: {
+    getSelectedUserLocation: (state) => state.selectedUserLocation,
+    getSelectedUserCompany: (state) => state.selectedUserLocation.company,
+    getSelectedUserBranch: (state) => state.selectedUserLocation.branch,
+  },
+  actions: {
+    clearSelectedUserLocation() {
+      this.selectedUserLocation = createEmptySelectedUserLocation();
+      this.isUserLocationSelected = false;
+
+      clearStoredSelectedUserLocation();
+    },
+    setSelectedUserLocation(
+      companyId: string,
+      companyUlid: string,
+      companyCode: string,
+      companyName: string,
+      branchId?: string,
+      branchUlid?: string,
+      branchCode?: string,
+      branchName?: string,
+    ) {
+      this.clearSelectedUserLocation();
+
+      this.selectedUserLocation.company.id = companyId;
+      this.selectedUserLocation.company.ulid = companyUlid;
+      this.selectedUserLocation.company.code = companyCode;
+      this.selectedUserLocation.company.name = companyName;
+
+      if (branchId) this.selectedUserLocation.branch.id = branchId;
+
+      if (branchUlid) this.selectedUserLocation.branch.ulid = branchUlid;
+
+      if (branchCode) this.selectedUserLocation.branch.code = branchCode;
+
+      if (branchName) this.selectedUserLocation.branch.name = branchName;
+
+      localStorage.setItem(
+        SELECTED_USER_LOCATION_STORAGE_KEY,
+        serializeSelectedUserLocation(this.selectedUserLocation),
+      );
+      sessionStorage.removeItem(SELECTED_USER_LOCATION_STORAGE_KEY);
+
+      this.isUserLocationSelected = true;
+
+      window.location.reload();
+    },
+  },
+});
diff --git a/web/src/stores/theme.ts b/web/src/stores/theme.ts
index 3d6d1f943..ac8a8767a 100644
--- a/web/src/stores/theme.ts
+++ b/web/src/stores/theme.ts
@@ -1,76 +1,76 @@
-import { defineStore } from "pinia";
-import RubickSideMenu from "@/themes/Rubick/SideMenu";
-import RubickSimpleMenu from "@/themes/Rubick/SimpleMenu";
-import RubickTopMenu from "@/themes/Rubick/TopMenu";
-import IcewallSideMenu from "@/themes/Icewall/SideMenu";
-import IcewallSimpleMenu from "@/themes/Icewall/SimpleMenu";
-import IcewallTopMenu from "@/themes/Icewall/TopMenu";
-import TinkerSideMenu from "@/themes/Tinker/SideMenu";
-import TinkerSimpleMenu from "@/themes/Tinker/SimpleMenu";
-import TinkerTopMenu from "@/themes/Tinker/TopMenu";
-import EnigmaSideMenu from "@/themes/Enigma/SideMenu";
-import EnigmaSimpleMenu from "@/themes/Enigma/SimpleMenu";
-import EnigmaTopMenu from "@/themes/Enigma/TopMenu";
+import { defineStore } from 'pinia';
+import RubickSideMenu from '@/themes/Rubick/SideMenu';
+import RubickSimpleMenu from '@/themes/Rubick/SimpleMenu';
+import RubickTopMenu from '@/themes/Rubick/TopMenu';
+import IcewallSideMenu from '@/themes/Icewall/SideMenu';
+import IcewallSimpleMenu from '@/themes/Icewall/SimpleMenu';
+import IcewallTopMenu from '@/themes/Icewall/TopMenu';
+import TinkerSideMenu from '@/themes/Tinker/SideMenu';
+import TinkerSimpleMenu from '@/themes/Tinker/SimpleMenu';
+import TinkerTopMenu from '@/themes/Tinker/TopMenu';
+import EnigmaSideMenu from '@/themes/Enigma/SideMenu';
+import EnigmaSimpleMenu from '@/themes/Enigma/SimpleMenu';
+import EnigmaTopMenu from '@/themes/Enigma/TopMenu';
 
 export const themes = [
   {
-    name: "rubick",
-    layout: "side-menu",
+    name: 'rubick',
+    layout: 'side-menu',
     component: RubickSideMenu,
   },
   {
-    name: "rubick",
-    layout: "simple-menu",
+    name: 'rubick',
+    layout: 'simple-menu',
     component: RubickSimpleMenu,
   },
   {
-    name: "rubick",
-    layout: "top-menu",
+    name: 'rubick',
+    layout: 'top-menu',
     component: RubickTopMenu,
   },
   {
-    name: "icewall",
-    layout: "side-menu",
+    name: 'icewall',
+    layout: 'side-menu',
     component: IcewallSideMenu,
   },
   {
-    name: "icewall",
-    layout: "simple-menu",
+    name: 'icewall',
+    layout: 'simple-menu',
     component: IcewallSimpleMenu,
   },
   {
-    name: "icewall",
-    layout: "top-menu",
+    name: 'icewall',
+    layout: 'top-menu',
     component: IcewallTopMenu,
   },
   {
-    name: "tinker",
-    layout: "side-menu",
+    name: 'tinker',
+    layout: 'side-menu',
     component: TinkerSideMenu,
   },
   {
-    name: "tinker",
-    layout: "simple-menu",
+    name: 'tinker',
+    layout: 'simple-menu',
     component: TinkerSimpleMenu,
   },
   {
-    name: "tinker",
-    layout: "top-menu",
+    name: 'tinker',
+    layout: 'top-menu',
     component: TinkerTopMenu,
   },
   {
-    name: "enigma",
-    layout: "side-menu",
+    name: 'enigma',
+    layout: 'side-menu',
     component: EnigmaSideMenu,
   },
   {
-    name: "enigma",
-    layout: "simple-menu",
+    name: 'enigma',
+    layout: 'simple-menu',
     component: EnigmaSimpleMenu,
   },
   {
-    name: "enigma",
-    layout: "top-menu",
+    name: 'enigma',
+    layout: 'top-menu',
     component: EnigmaTopMenu,
   },
 ] as const;
@@ -79,71 +79,60 @@ export type Themes = (typeof themes)[number];
 
 interface ThemeState {
   themeValue: {
-    name: Themes["name"];
-    layout: Themes["layout"];
+    name: Themes['name'];
+    layout: Themes['layout'];
   };
 }
 
-export const getTheme = (search?: {
-  name: Themes["name"];
-  layout: Themes["layout"];
-}) => {
+export const getTheme = (search?: { name: Themes['name']; layout: Themes['layout'] }) => {
   const searchValues =
     search === undefined
       ? {
-          name: localStorage.getItem("theme"),
-          layout: localStorage.getItem("layout"),
+          name: localStorage.getItem('theme'),
+          layout: localStorage.getItem('layout'),
         }
       : search;
   return themes.filter((item, key) => {
-    return (
-      item.name === searchValues.name && item.layout === searchValues.layout
-    );
+    return item.name === searchValues.name && item.layout === searchValues.layout;
   })[0];
 };
 
-export const useThemeStore = defineStore("theme", {
+export const useThemeStore = defineStore('theme', {
   state: (): ThemeState => ({
     themeValue: {
-      name:
-        localStorage.getItem("theme") === null
-          ? themes[0].name
-          : getTheme().name,
-      layout:
-        localStorage.getItem("layout") === null
-          ? themes[0].layout
-          : getTheme().layout,
+      name: localStorage.getItem('theme') === null ? themes[0].name : getTheme().name,
+      layout: localStorage.getItem('layout') === null ? themes[0].layout : getTheme().layout,
     },
   }),
   getters: {
     theme(state) {
-      if (localStorage.getItem("theme") === null) {
-        localStorage.setItem("theme", "rubick");
+      if (localStorage.getItem('theme') === null) {
+        localStorage.setItem('theme', 'rubick');
       }
 
-      if (localStorage.getItem("layout") === null) {
-        localStorage.setItem("layout", "side-menu");
+      if (localStorage.getItem('layout') === null) {
+        localStorage.setItem('layout', 'side-menu');
       }
 
       return state.themeValue;
     },
   },
   actions: {
-    setTheme(theme: Themes["name"]) {
+    setTheme(theme: Themes['name']) {
       this.themeValue = {
         name: theme,
         layout: this.themeValue.layout,
       };
 
-      localStorage.setItem("theme", theme);
+      localStorage.setItem('theme', theme);
     },
-    setLayout(layout: Themes["layout"]) {
+    setLayout(layout: Themes['layout']) {
       this.themeValue = {
         name: this.themeValue.name,
         layout: layout,
       };
 
-      localStorage.setItem("layout", layout);
+      localStorage.setItem('layout', layout);
     },
   },
 });
diff --git a/web/src/stores/user-context.ts b/web/src/stores/user-context.ts
index 562899810..bf6751f89 100644
--- a/web/src/stores/user-context.ts
+++ b/web/src/stores/user-context.ts
@@ -1,57 +1,57 @@
-import { defineStore } from "pinia";
-import { UserProfile } from "../types/models/UserProfile";
-
-export interface UserContextState {
-  isLoaded: boolean,
-  isAuthenticated: boolean,
-  userContext: UserProfile,
-}
-
-export const useUserContextStore = defineStore("userContext", {
-  state: (): UserContextState => ({
-    isLoaded: false,
-    isAuthenticated: false,
-    userContext: {
-      id: '',
-      ulid: '',
-      name: '',
-      email: '',
-      email_verified: false,
-      profile: {
-        first_name: '',
-        last_name: '',
-        address: '',
-        city: '',
-        postal_code: '',
-        country: '',
-        status: '',
-        tax_id: 0,
-        ic_num: 0,
-        img_path: '',
-        remarks: '',
-      },
-      roles: [],
-      companies: [],
-      settings: {
-        theme: '',
-        date_format: '',
-        time_format: '',
-      },
-      two_factor: false,
-      personal_access_tokens: 0
-    },
-  }),
-  getters: {
-    getIsLoaded: state => state.isLoaded,
-    getIsAuthenticated: state => state.isAuthenticated,
-    getUserContext: state => state.userContext,
-  },
-  actions: {
-    setUserContext(userContext: UserProfile) {
-      this.userContext = userContext;
-
-      this.isLoaded = true;
-      this.isAuthenticated = true;
-    },
-  },
-});
+import { defineStore } from 'pinia';
+import { UserProfile } from '../types/models/UserProfile';
+
+export interface UserContextState {
+  isLoaded: boolean;
+  isAuthenticated: boolean;
+  userContext: UserProfile;
+}
+
+export const useUserContextStore = defineStore('userContext', {
+  state: (): UserContextState => ({
+    isLoaded: false,
+    isAuthenticated: false,
+    userContext: {
+      id: '',
+      ulid: '',
+      name: '',
+      email: '',
+      email_verified: false,
+      profile: {
+        first_name: '',
+        last_name: '',
+        address: '',
+        city: '',
+        postal_code: '',
+        country: '',
+        status: '',
+        tax_id: 0,
+        ic_num: 0,
+        img_path: '',
+        remarks: '',
+      },
+      roles: [],
+      companies: [],
+      settings: {
+        theme: '',
+        date_format: '',
+        time_format: '',
+      },
+      two_factor: false,
+      personal_access_tokens: 0,
+    },
+  }),
+  getters: {
+    getIsLoaded: (state) => state.isLoaded,
+    getIsAuthenticated: (state) => state.isAuthenticated,
+    getUserContext: (state) => state.userContext,
+  },
+  actions: {
+    setUserContext(userContext: UserProfile) {
+      this.userContext = userContext;
+
+      this.isLoaded = true;
+      this.isAuthenticated = true;
+    },
+  },
+});
diff --git a/web/src/stores/ziggy-route.ts b/web/src/stores/ziggy-route.ts
index 9e14082a2..31ce30707 100644
--- a/web/src/stores/ziggy-route.ts
+++ b/web/src/stores/ziggy-route.ts
@@ -1,66 +1,67 @@
-import { defineStore } from "pinia";
-import { Config } from "ziggy-js";
-
-export interface ZiggyState {
-  ziggyRoute: Config
-}
-
-const getDomain = () => {
-  const domain = (new URL(import.meta.env.VITE_BACKEND_URL));
-
-  if (!domain) return 'localhost';
-
-  return domain.hostname;
-}
-
-const getDomainPort = () => {
-  const domain = (new URL(import.meta.env.VITE_BACKEND_URL));
-
-  if (!domain) return 8000;
-
-  return Number(domain.port);
-}
-
-export const useZiggyRouteStore = defineStore("ziggyRoute", {
-  state: (): ZiggyState => ({
-    ziggyRoute: {
-      url: getDomain(),
-      port: getDomainPort(),
-      defaults: {},
-      routes: {
-        'api.get.db.module.profile.read': {
-          uri: 'api/get/dashboard/module/profile/read',
-          methods: ['GET', 'HEAD']
-        },
-        'api.get.db.core.user.menu': {
-          uri: 'api/get/dashboard/core/user/menu',
-          methods: ['GET', 'HEAD']
-        },
-        'api.get.db.core.user.api': {
-          uri: 'api/get/dashboard/core/user/api',
-          methods: ['GET', 'HEAD']
-        }
-      }
-    }
-  }),
-  getters: {
-    getZiggy(state): Config {
-      const serializedZiggy = sessionStorage.getItem('ziggyRoute');
-      if (serializedZiggy) {
-        const debug = import.meta.env.VITE_APP_DEBUG === 'true';
-        const deserializedZiggy: Config = JSON.parse(debug ? serializedZiggy : atob(serializedZiggy));
-        this.ziggyRoute = deserializedZiggy;
-      }
-      return state.ziggyRoute;
-    },
-  },
-  actions: {
-    setZiggy(ziggy: Config) {
-      if (ziggy != undefined) {
-        const debug = import.meta.env.VITE_APP_DEBUG === 'true';
-        sessionStorage.setItem('ziggyRoute', debug ? JSON.stringify(ziggy) : btoa(JSON.stringify(ziggy)));
-        this.ziggyRoute = ziggy;
-      }
-    },
-  },
-});
+import { defineStore } from 'pinia';
+import { Config } from 'ziggy-js';
+import { getBackendUrl } from '@/utils/config';
+
+export interface ZiggyState {
+  ziggyRoute: Config;
+}
+
+const getDomain = () => {
+  const domain = new URL(getBackendUrl());
+
+  if (!domain) return 'localhost';
+
+  return domain.hostname;
+};
+
+const getDomainPort = () => {
+  const domain = new URL(getBackendUrl());
+
+  if (!domain) return 8000;
+
+  return Number(domain.port);
+};
+
+export const useZiggyRouteStore = defineStore('ziggyRoute', {
+  state: (): ZiggyState => ({
+    ziggyRoute: {
+      url: getDomain(),
+      port: getDomainPort(),
+      defaults: {},
+      routes: {
+        'api.get.db.module.profile.read': {
+          uri: 'api/get/dashboard/module/profile/read',
+          methods: ['GET', 'HEAD'],
+        },
+        'api.get.db.core.user.menu': {
+          uri: 'api/get/dashboard/core/user/menu',
+          methods: ['GET', 'HEAD'],
+        },
+        'api.get.db.core.user.api': {
+          uri: 'api/get/dashboard/core/user/api',
+          methods: ['GET', 'HEAD'],
+        },
+      },
+    },
+  }),
+  getters: {
+    getZiggy(state): Config {
+      const serializedZiggy = sessionStorage.getItem('ziggyRoute');
+      if (serializedZiggy) {
+        const debug = import.meta.env.VITE_APP_DEBUG === 'true';
+        const deserializedZiggy: Config = JSON.parse(debug ? serializedZiggy : atob(serializedZiggy));
+        this.ziggyRoute = deserializedZiggy;
+      }
+      return state.ziggyRoute;
+    },
+  },
+  actions: {
+    setZiggy(ziggy: Config) {
+      if (ziggy != undefined) {
+        const debug = import.meta.env.VITE_APP_DEBUG === 'true';
+        sessionStorage.setItem('ziggyRoute', debug ? JSON.stringify(ziggy) : btoa(JSON.stringify(ziggy)));
+        this.ziggyRoute = ziggy;
+      }
+    },
+  },
+});
diff --git a/web/src/themes/Enigma/SideMenu/SideMenu.vue b/web/src/themes/Enigma/SideMenu/SideMenu.vue
index c2d8cd90d..9874849e6 100644
--- a/web/src/themes/Enigma/SideMenu/SideMenu.vue
+++ b/web/src/themes/Enigma/SideMenu/SideMenu.vue
@@ -1,97 +1,95 @@
 <script setup lang="ts">
-import "@/assets/css/themes/enigma/side-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import Tippy from "@/components/Base/Tippy";
-import Lucide from "@/components/Base/Lucide";
-import TopBar from "@/components/Themes/Enigma/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./side-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/enigma/side-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import Tippy from '@/components/Base/Tippy';
+  import Lucide from '@/components/Base/Lucide';
+  import TopBar from '@/components/Themes/Enigma/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+    enter,
+    leave,
+  } from './side-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+  const { t } = useI18n();
 
-const dashboardServices = new DashboardService();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("side-menu"), route));
-const windowWidth = ref(window.innerWidth);
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('side-menu'), route));
+  const windowWidth = ref(window.innerWidth);
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
+    setFormattedMenu(menu.value);
 
-  window.addEventListener("resize", () => {
-    windowWidth.value = window.innerWidth;
+    window.addEventListener('resize', () => {
+      windowWidth.value = window.innerWidth;
+    });
   });
-});
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -106,17 +104,10 @@ const updateMenu = async () => {
         <MobileMenu />
         <TopBar layout="side-menu" />
         <div class="flex overflow-hidden">
-          <nav
-            class="side-nav w-[100px] xl:w-[260px] px-5 pb-16 overflow-x-hidden z-50 pt-32 -mt-4 hidden md:block"
-          >
+          <nav class="side-nav w-[100px] xl:w-[260px] px-5 pb-16 overflow-x-hidden z-50 pt-32 -mt-4 hidden md:block">
             <ul>
               <template v-for="(menu, menuKey) in formattedMenu">
-                <li
-                  v-if="menu == 'divider'"
-                  type="li"
-                  class="my-6 side-nav__divider"
-                  :key="'divider-' + menuKey"
-                ></li>
+                <li v-if="menu == 'divider'" type="li" class="my-6 side-nav__divider" :key="'divider-' + menuKey"></li>
                 <li v-else :key="menuKey">
                   <Tippy
                     as="a"
@@ -138,14 +129,14 @@ const updateMenu = async () => {
                             }
                           })(menu.pageName)
                     "
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(menu, router);
-                      setFormattedMenu([...formattedMenu]);
-                    }"
-                    :class="[
-                      menu.active ? 'side-menu side-menu--active' : 'side-menu',
-                    ]"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        linkTo(menu, formattedMenu, router);
+                        setFormattedMenu([...formattedMenu]);
+                      }
+                    "
+                    :class="[menu.active ? 'side-menu side-menu--active' : 'side-menu']"
                   >
                     <div class="side-menu__icon">
                       <Lucide :icon="menu.icon" />
@@ -154,10 +145,7 @@ const updateMenu = async () => {
                       {{ t(menu.title) }}
                       <div
                         v-if="menu.subMenu"
-                        :class="[
-                          'side-menu__sub-icon',
-                          { 'transform rotate-180': menu.activeDropdown },
-                        ]"
+                        :class="['side-menu__sub-icon', { 'transform rotate-180': menu.activeDropdown }]"
                       >
                         <Lucide icon="ChevronDown" />
                       </div>
@@ -168,10 +156,7 @@ const updateMenu = async () => {
                       v-if="menu.subMenu && menu.activeDropdown"
                       :class="{ 'side-menu__sub-open': menu.activeDropdown }"
                     >
-                      <li
-                        v-for="(subMenu, subMenuKey) in menu.subMenu"
-                        :key="subMenuKey"
-                      >
+                      <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                         <Tippy
                           as="a"
                           :content="t(subMenu.title)"
@@ -192,16 +177,14 @@ const updateMenu = async () => {
                                   }
                                 })(subMenu.pageName)
                           "
-                          :class="[
-                            subMenu.active
-                              ? 'side-menu side-menu--active'
-                              : 'side-menu',
-                          ]"
-                          @click="(event: MouseEvent) => {
-                            event.preventDefault();
-                            linkTo(subMenu, router);
-                            setFormattedMenu([...formattedMenu]);
-                          }"
+                          :class="[subMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(subMenu, menu.subMenu ?? [], router);
+                              setFormattedMenu([...formattedMenu]);
+                            }
+                          "
                         >
                           <div class="side-menu__icon">
                             <Lucide :icon="subMenu.icon" />
@@ -221,23 +204,14 @@ const updateMenu = async () => {
                             </div>
                           </div>
                         </Tippy>
-                        <Transition
-                          @enter="enter"
-                          @leave="leave"
-                          v-if="subMenu.subMenu"
-                        >
+                        <Transition @enter="enter" @leave="leave" v-if="subMenu.subMenu">
                           <ul
                             v-if="subMenu.subMenu && subMenu.activeDropdown"
                             :class="{
                               'side-menu__sub-open': subMenu.activeDropdown,
                             }"
                           >
-                            <li
-                              v-for="(
-                                lastSubMenu, lastSubMenuKey
-                              ) in subMenu.subMenu"
-                              :key="lastSubMenuKey"
-                            >
+                            <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                               <Tippy
                                 as="a"
                                 :content="t(lastSubMenu.title)"
@@ -258,16 +232,14 @@ const updateMenu = async () => {
                                         }
                                       })(lastSubMenu.pageName)
                                 "
-                                :class="[
-                                  lastSubMenu.active
-                                    ? 'side-menu side-menu--active'
-                                    : 'side-menu',
-                                ]"
-                                @click="(event: MouseEvent) => {
-                                  event.preventDefault();
-                                  linkTo(lastSubMenu, router);
-                                  setFormattedMenu([...formattedMenu]);
-                                }"
+                                :class="[lastSubMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                                @click="
+                                  (event: MouseEvent) => {
+                                    event.preventDefault();
+                                    linkTo(lastSubMenu, subMenu.subMenu ?? [], router);
+                                    setFormattedMenu([...formattedMenu]);
+                                  }
+                                "
                               >
                                 <div class="side-menu__icon">
                                   <Lucide :icon="lastSubMenu.icon" />
diff --git a/web/src/themes/Enigma/SideMenu/index.ts b/web/src/themes/Enigma/SideMenu/index.ts
index 4a5c27b6b..4a89e60cb 100644
--- a/web/src/themes/Enigma/SideMenu/index.ts
+++ b/web/src/themes/Enigma/SideMenu/index.ts
@@ -1,3 +1,3 @@
-import SideMenu from "./SideMenu.vue";
+import SideMenu from './SideMenu.vue';
 
 export default SideMenu;
diff --git a/web/src/themes/Enigma/SideMenu/side-menu.ts b/web/src/themes/Enigma/SideMenu/side-menu.ts
index 5e9651fbe..d02361625 100644
--- a/web/src/themes/Enigma/SideMenu/side-menu.ts
+++ b/web/src/themes/Enigma/SideMenu/side-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
-import { slideUp, slideDown } from "@/utils/helper";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
+import { slideUp, slideDown } from '@/utils/helper';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -23,10 +23,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -37,10 +35,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -49,10 +47,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -61,9 +57,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
@@ -76,9 +70,31 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
   return formattedMenu;
 };
 
-const linkTo = (menu: FormattedMenu, router: Router) => {
+const closeDropdown = (menu: FormattedMenu): void => {
+  menu.activeDropdown = false;
+
   if (menu.subMenu) {
-    menu.activeDropdown = !menu.activeDropdown;
+    menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+  }
+};
+
+const closeSiblingDropdowns = (menus: Array<FormattedMenu | 'divider'>, currentMenu: FormattedMenu): void => {
+  menus.forEach((menu) => {
+    if (menu !== 'divider' && menu !== currentMenu) {
+      closeDropdown(menu);
+    }
+  });
+};
+
+const linkTo = (menu: FormattedMenu, menus: Array<FormattedMenu | 'divider'>, router: Router) => {
+  if (menu.subMenu) {
+    const nextActiveDropdown = !menu.activeDropdown;
+    closeSiblingDropdowns(menus, menu);
+    menu.activeDropdown = nextActiveDropdown;
+
+    if (!nextActiveDropdown) {
+      menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+    }
   } else {
     if (menu.pageName !== undefined) {
       router.push({
diff --git a/web/src/themes/Enigma/SimpleMenu/SimpleMenu.vue b/web/src/themes/Enigma/SimpleMenu/SimpleMenu.vue
index efe5e55cf..f0f43a11f 100644
--- a/web/src/themes/Enigma/SimpleMenu/SimpleMenu.vue
+++ b/web/src/themes/Enigma/SimpleMenu/SimpleMenu.vue
@@ -1,91 +1,89 @@
 <script setup lang="ts">
-import "@/assets/css/themes/enigma/side-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import Tippy from "@/components/Base/Tippy";
-import Lucide from "@/components/Base/Lucide";
-import TopBar from "@/components/Themes/Enigma/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./simple-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/enigma/side-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import Tippy from '@/components/Base/Tippy';
+  import Lucide from '@/components/Base/Lucide';
+  import TopBar from '@/components/Themes/Enigma/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+    enter,
+    leave,
+  } from './simple-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("simple-menu"), route));
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('simple-menu'), route));
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
-});
+    setFormattedMenu(menu.value);
+  });
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -110,9 +108,7 @@ const updateMenu = async () => {
                   type="li"
                   :class="[
                     'side-nav__divider my-6',
-                    `opacity-0 animate-[0.4s_ease-in-out_0.1s_intro-divider] animate-fill-mode-forwards animate-delay-${
-                      (menuKey + 1) * 10
-                    }`,
+                    `opacity-0 animate-[0.4s_ease-in-out_0.1s_intro-divider] animate-fill-mode-forwards animate-delay-${(menuKey + 1) * 10}`,
                   ]"
                   :key="'divider-' + menuKey"
                 ></li>
@@ -136,11 +132,13 @@ const updateMenu = async () => {
                             }
                           })(menu.pageName)
                     "
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(menu, router);
-                      setFormattedMenu([...formattedMenu]);
-                    }"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        linkTo(menu, router);
+                        setFormattedMenu([...formattedMenu]);
+                      }
+                    "
                     :class="[
                       menu.active ? 'side-menu side-menu--active' : 'side-menu',
                       {
@@ -157,10 +155,7 @@ const updateMenu = async () => {
                       {{ t(menu.title) }}
                       <div
                         v-if="menu.subMenu"
-                        :class="[
-                          'side-menu__sub-icon',
-                          { 'transform rotate-180': menu.activeDropdown },
-                        ]"
+                        :class="['side-menu__sub-icon', { 'transform rotate-180': menu.activeDropdown }]"
                       >
                         <Lucide icon="ChevronDown" />
                       </div>
@@ -171,10 +166,7 @@ const updateMenu = async () => {
                       v-if="menu.subMenu && menu.activeDropdown"
                       :class="{ 'side-menu__sub-open': menu.activeDropdown }"
                     >
-                      <li
-                        v-for="(subMenu, subMenuKey) in menu.subMenu"
-                        :key="subMenuKey"
-                      >
+                      <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                         <Tippy
                           as="a"
                           :content="t(subMenu.title)"
@@ -195,20 +187,20 @@ const updateMenu = async () => {
                                 })(subMenu.pageName)
                           "
                           :class="[
-                            subMenu.active
-                              ? 'side-menu side-menu--active'
-                              : 'side-menu',
+                            subMenu.active ? 'side-menu side-menu--active' : 'side-menu',
                             {
                               [`opacity-0 translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-${
                                 (subMenuKey + 1) * 10
                               }`]: !subMenu.active,
                             },
                           ]"
-                          @click="(event: MouseEvent) => {
-                            event.preventDefault();
-                            linkTo(subMenu, router);
-                            setFormattedMenu([...formattedMenu]);
-                          }"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(subMenu, router);
+                              setFormattedMenu([...formattedMenu]);
+                            }
+                          "
                         >
                           <div class="side-menu__icon">
                             <Lucide :icon="subMenu.icon" />
@@ -228,23 +220,14 @@ const updateMenu = async () => {
                             </div>
                           </div>
                         </Tippy>
-                        <Transition
-                          @enter="enter"
-                          @leave="leave"
-                          v-if="subMenu.subMenu"
-                        >
+                        <Transition @enter="enter" @leave="leave" v-if="subMenu.subMenu">
                           <ul
                             v-if="subMenu.subMenu && subMenu.activeDropdown"
                             :class="{
                               'side-menu__sub-open': subMenu.activeDropdown,
                             }"
                           >
-                            <li
-                              v-for="(
-                                lastSubMenu, lastSubMenuKey
-                              ) in subMenu.subMenu"
-                              :key="lastSubMenuKey"
-                            >
+                            <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                               <Tippy
                                 as="a"
                                 :content="t(lastSubMenu.title)"
@@ -265,20 +248,20 @@ const updateMenu = async () => {
                                       })(lastSubMenu.pageName)
                                 "
                                 :class="[
-                                  lastSubMenu.active
-                                    ? 'side-menu side-menu--active'
-                                    : 'side-menu',
+                                  lastSubMenu.active ? 'side-menu side-menu--active' : 'side-menu',
                                   {
                                     [`opacity-0 translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-${
                                       (lastSubMenuKey + 1) * 10
                                     }`]: !lastSubMenu.active,
                                   },
                                 ]"
-                                @click="(event: MouseEvent) => {
-                                  event.preventDefault();
-                                  linkTo(lastSubMenu, router);
-                                  setFormattedMenu([...formattedMenu]);
-                                }"
+                                @click="
+                                  (event: MouseEvent) => {
+                                    event.preventDefault();
+                                    linkTo(lastSubMenu, router);
+                                    setFormattedMenu([...formattedMenu]);
+                                  }
+                                "
                               >
                                 <div class="side-menu__icon">
                                   <Lucide :icon="lastSubMenu.icon" />
diff --git a/web/src/themes/Enigma/SimpleMenu/index.ts b/web/src/themes/Enigma/SimpleMenu/index.ts
index 35556c5b6..eb8eea61d 100644
--- a/web/src/themes/Enigma/SimpleMenu/index.ts
+++ b/web/src/themes/Enigma/SimpleMenu/index.ts
@@ -1,3 +1,3 @@
-import SimpleMenu from "./SimpleMenu.vue";
+import SimpleMenu from './SimpleMenu.vue';
 
 export default SimpleMenu;
diff --git a/web/src/themes/Enigma/SimpleMenu/simple-menu.ts b/web/src/themes/Enigma/SimpleMenu/simple-menu.ts
index 5e9651fbe..626e12265 100644
--- a/web/src/themes/Enigma/SimpleMenu/simple-menu.ts
+++ b/web/src/themes/Enigma/SimpleMenu/simple-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
-import { slideUp, slideDown } from "@/utils/helper";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
+import { slideUp, slideDown } from '@/utils/helper';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -23,10 +23,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -37,10 +35,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -49,10 +47,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -61,9 +57,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
diff --git a/web/src/themes/Enigma/TopMenu/TopMenu.vue b/web/src/themes/Enigma/TopMenu/TopMenu.vue
index b8804a112..2de93c24f 100644
--- a/web/src/themes/Enigma/TopMenu/TopMenu.vue
+++ b/web/src/themes/Enigma/TopMenu/TopMenu.vue
@@ -1,89 +1,87 @@
 <script setup lang="ts">
-import "@/assets/css/themes/enigma/top-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import Lucide from "@/components/Base/Lucide";
-import MobileMenu from "@/components/MobileMenu";
-import TopBar from "@/components/Themes/Enigma/TopBar";
-import _ from "lodash";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-} from "./top-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/enigma/top-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import Lucide from '@/components/Base/Lucide';
+  import MobileMenu from '@/components/MobileMenu';
+  import TopBar from '@/components/Themes/Enigma/TopBar';
+  import _ from 'lodash';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+  } from './top-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("top-menu"), route));
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('top-menu'), route));
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
-});
+    setFormattedMenu(menu.value);
+  });
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -108,109 +106,95 @@ const updateMenu = async () => {
               <template v-if="menu != 'divider'">
                 <a
                   :href="
-                  menu.subMenu
-                    ? '#'
-                    : ((pageName: string | undefined) => {
-                        try {
-                          return router.resolve({
-                            name: pageName,
-                          }).fullPath;
-                        } catch (err) {
-                          return '';
-                        }
-                      })(menu.pageName)
-                "
+                    menu.subMenu
+                      ? '#'
+                      : ((pageName: string | undefined) => {
+                          try {
+                            return router.resolve({
+                              name: pageName,
+                            }).fullPath;
+                          } catch (err) {
+                            return '';
+                          }
+                        })(menu.pageName)
+                  "
                   :class="[menu.active ? 'top-menu top-menu--active' : 'top-menu']"
-                  @click="(event: MouseEvent) => {
-                  event.preventDefault();
-                  linkTo(menu, router);
-                }"
+                  @click="
+                    (event: MouseEvent) => {
+                      event.preventDefault();
+                      linkTo(menu, router);
+                    }
+                  "
                 >
                   <div class="top-menu__icon">
                     <Lucide :icon="menu.icon" />
                   </div>
                   <div class="top-menu__title">
-                    {{ t(menu.title) }}
-                    <Lucide
-                      v-if="menu.subMenu"
-                      class="top-menu__sub-icon"
-                      icon="ChevronDown"
-                    />
+                    <span class="top-menu__title-text">{{ t(menu.title) }}</span>
+                    <Lucide v-if="menu.subMenu" class="top-menu__sub-icon" icon="ChevronDown" />
                   </div>
                 </a>
-                <ul
-                  v-if="menu.subMenu"
-                  :class="{ 'side-menu__sub-open': menu.activeDropdown }"
-                >
-                  <li
-                    v-for="(subMenu, subMenuKey) in menu.subMenu"
-                    :key="subMenuKey"
-                  >
+                <ul v-if="menu.subMenu" :class="{ 'side-menu__sub-open': menu.activeDropdown }">
+                  <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                     <a
                       :href="
-                      subMenu.subMenu
-                        ? '#'
-                        : ((pageName: string | undefined) => {
-                            try {
-                              return router.resolve({
-                                name: pageName,
-                              }).fullPath;
-                            } catch (err) {
-                              return '';
-                            }
-                          })(subMenu.pageName)
-                    "
+                        subMenu.subMenu
+                          ? '#'
+                          : ((pageName: string | undefined) => {
+                              try {
+                                return router.resolve({
+                                  name: pageName,
+                                }).fullPath;
+                              } catch (err) {
+                                return '';
+                              }
+                            })(subMenu.pageName)
+                      "
                       class="top-menu"
-                      @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(subMenu, router);
-                    }"
+                      @click="
+                        (event: MouseEvent) => {
+                          event.preventDefault();
+                          linkTo(subMenu, router);
+                        }
+                      "
                     >
                       <div class="top-menu__icon">
                         <Lucide :icon="subMenu.icon" />
                       </div>
                       <div class="top-menu__title">
-                        {{ t(subMenu.title) }}
-                        <Lucide
-                          v-if="subMenu.subMenu"
-                          class="top-menu__sub-icon"
-                          icon="ChevronDown"
-                        />
+                        <span class="top-menu__title-text">{{ t(subMenu.title) }}</span>
+                        <Lucide v-if="subMenu.subMenu" class="top-menu__sub-icon" icon="ChevronDown" />
                       </div>
                     </a>
-                    <ul
-                      v-if="subMenu.subMenu"
-                      :class="{ 'side-menu__sub-open': subMenu.activeDropdown }"
-                    >
-                      <li
-                        v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu"
-                        :key="lastSubMenuKey"
-                      >
+                    <ul v-if="subMenu.subMenu" :class="{ 'side-menu__sub-open': subMenu.activeDropdown }">
+                      <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                         <a
                           :href="
-                          lastSubMenu.subMenu
-                            ? '#'
-                            : ((pageName: string | undefined) => {
-                                try {
-                                  return router.resolve({
-                                    name: pageName,
-                                  }).fullPath;
-                                } catch (err) {
-                                  return '';
-                                }
-                              })(lastSubMenu.pageName)
-                        "
+                            lastSubMenu.subMenu
+                              ? '#'
+                              : ((pageName: string | undefined) => {
+                                  try {
+                                    return router.resolve({
+                                      name: pageName,
+                                    }).fullPath;
+                                  } catch (err) {
+                                    return '';
+                                  }
+                                })(lastSubMenu.pageName)
+                          "
                           class="top-menu"
-                          @click="(event: MouseEvent) => {
-                          event.preventDefault();
-                          linkTo(lastSubMenu, router);
-                        }"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(lastSubMenu, router);
+                            }
+                          "
                         >
                           <div class="top-menu__icon">
                             <Lucide :icon="lastSubMenu.icon" />
                           </div>
                           <div class="top-menu__title">
-                            {{ t(lastSubMenu.title) }}
+                            <span class="top-menu__title-text">{{ t(lastSubMenu.title) }}</span>
                           </div>
                         </a>
                       </li>
diff --git a/web/src/themes/Enigma/TopMenu/index.ts b/web/src/themes/Enigma/TopMenu/index.ts
index 77706acd8..62c003465 100644
--- a/web/src/themes/Enigma/TopMenu/index.ts
+++ b/web/src/themes/Enigma/TopMenu/index.ts
@@ -1,3 +1,3 @@
-import TopMenu from "./TopMenu.vue";
+import TopMenu from './TopMenu.vue';
 
 export default TopMenu;
diff --git a/web/src/themes/Enigma/TopMenu/top-menu.ts b/web/src/themes/Enigma/TopMenu/top-menu.ts
index a5278bca5..fe8b0f443 100644
--- a/web/src/themes/Enigma/TopMenu/top-menu.ts
+++ b/web/src/themes/Enigma/TopMenu/top-menu.ts
@@ -1,5 +1,5 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -22,10 +22,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -36,10 +34,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -48,10 +46,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -60,9 +56,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
diff --git a/web/src/themes/Icewall/SideMenu/SideMenu.vue b/web/src/themes/Icewall/SideMenu/SideMenu.vue
index 719fbb881..670280c91 100644
--- a/web/src/themes/Icewall/SideMenu/SideMenu.vue
+++ b/web/src/themes/Icewall/SideMenu/SideMenu.vue
@@ -1,96 +1,94 @@
 <script setup lang="ts">
-import "@/assets/css/themes/icewall/side-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import Tippy from "@/components/Base/Tippy";
-import Lucide from "@/components/Base/Lucide";
-import TopBar from "@/components/Themes/Icewall/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./side-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/icewall/side-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import Tippy from '@/components/Base/Tippy';
+  import Lucide from '@/components/Base/Lucide';
+  import TopBar from '@/components/Themes/Icewall/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+    enter,
+    leave,
+  } from './side-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("side-menu"), route));
-const windowWidth = ref(window.innerWidth);
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('side-menu'), route));
+  const windowWidth = ref(window.innerWidth);
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
+    setFormattedMenu(menu.value);
 
-  window.addEventListener("resize", () => {
-    windowWidth.value = window.innerWidth;
+    window.addEventListener('resize', () => {
+      windowWidth.value = window.innerWidth;
+    });
   });
-});
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -116,9 +114,7 @@ const updateMenu = async () => {
               'before:block before:absolute before:inset-0 before:bg-black/[0.15] before:rounded-[1.3rem] before:z-[-1]',
             ]"
           >
-            <nav
-              class="side-nav hidden md:block w-[100px] xl:w-[250px] px-5 pt-8 pb-16 overflow-x-hidden"
-            >
+            <nav class="side-nav hidden md:block w-[100px] xl:w-[250px] px-5 pt-8 pb-16 overflow-x-hidden">
               <ul>
                 <template v-for="(menu, menuKey) in formattedMenu">
                   <li
@@ -136,26 +132,26 @@ const updateMenu = async () => {
                       }"
                       :disable="windowWidth > 1260"
                       :href="
-                      menu.subMenu
-                        ? '#'
-                        : ((pageName: string | undefined) => {
-                            try {
-                              return router.resolve({
-                                name: pageName,
-                              }).fullPath;
-                            } catch (err) {
-                              return '';
-                            }
-                          })(menu.pageName)
-                    "
-                      @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(menu, router);
-                      setFormattedMenu([...formattedMenu]);
-                    }"
-                      :class="[
-                        menu.active ? 'side-menu side-menu--active' : 'side-menu',
-                      ]"
+                        menu.subMenu
+                          ? '#'
+                          : ((pageName: string | undefined) => {
+                              try {
+                                return router.resolve({
+                                  name: pageName,
+                                }).fullPath;
+                              } catch (err) {
+                                return '';
+                              }
+                            })(menu.pageName)
+                      "
+                      @click="
+                        (event: MouseEvent) => {
+                          event.preventDefault();
+                        linkTo(menu, formattedMenu, router);
+                          setFormattedMenu([...formattedMenu]);
+                        }
+                      "
+                      :class="[menu.active ? 'side-menu side-menu--active' : 'side-menu']"
                     >
                       <div class="side-menu__icon">
                         <Lucide :icon="menu.icon" />
@@ -164,10 +160,7 @@ const updateMenu = async () => {
                         {{ t(menu.title) }}
                         <div
                           v-if="menu.subMenu"
-                          :class="[
-                            'side-menu__sub-icon',
-                            { 'transform rotate-180': menu.activeDropdown },
-                          ]"
+                          :class="['side-menu__sub-icon', { 'transform rotate-180': menu.activeDropdown }]"
                         >
                           <Lucide icon="ChevronDown" />
                         </div>
@@ -178,10 +171,7 @@ const updateMenu = async () => {
                         v-if="menu.subMenu && menu.activeDropdown"
                         :class="{ 'side-menu__sub-open': menu.activeDropdown }"
                       >
-                        <li
-                          v-for="(subMenu, subMenuKey) in menu.subMenu"
-                          :key="subMenuKey"
-                        >
+                        <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                           <Tippy
                             as="a"
                             :content="t(subMenu.title)"
@@ -190,28 +180,26 @@ const updateMenu = async () => {
                             }"
                             :disable="windowWidth > 1260"
                             :href="
-                            subMenu.subMenu
-                              ? '#'
-                              : ((pageName: string | undefined) => {
-                                  try {
-                                    return router.resolve({
-                                      name: pageName,
-                                    }).fullPath;
-                                  } catch (err) {
-                                    return '';
-                                  }
-                                })(subMenu.pageName)
-                          "
-                            :class="[
-                              subMenu.active
-                                ? 'side-menu side-menu--active'
-                                : 'side-menu',
-                            ]"
-                            @click="(event: MouseEvent) => {
-                            event.preventDefault();
-                            linkTo(subMenu, router);
-                            setFormattedMenu([...formattedMenu]);
-                          }"
+                              subMenu.subMenu
+                                ? '#'
+                                : ((pageName: string | undefined) => {
+                                    try {
+                                      return router.resolve({
+                                        name: pageName,
+                                      }).fullPath;
+                                    } catch (err) {
+                                      return '';
+                                    }
+                                  })(subMenu.pageName)
+                            "
+                            :class="[subMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                            @click="
+                              (event: MouseEvent) => {
+                                event.preventDefault();
+                              linkTo(subMenu, menu.subMenu ?? [], router);
+                                setFormattedMenu([...formattedMenu]);
+                              }
+                            "
                           >
                             <div class="side-menu__icon">
                               <Lucide :icon="subMenu.icon" />
@@ -231,23 +219,14 @@ const updateMenu = async () => {
                               </div>
                             </div>
                           </Tippy>
-                          <Transition
-                            @enter="enter"
-                            @leave="leave"
-                            v-if="subMenu.subMenu"
-                          >
+                          <Transition @enter="enter" @leave="leave" v-if="subMenu.subMenu">
                             <ul
                               v-if="subMenu.subMenu && subMenu.activeDropdown"
                               :class="{
                                 'side-menu__sub-open': subMenu.activeDropdown,
                               }"
                             >
-                              <li
-                                v-for="(
-                                  lastSubMenu, lastSubMenuKey
-                                ) in subMenu.subMenu"
-                                :key="lastSubMenuKey"
-                              >
+                              <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                                 <Tippy
                                   as="a"
                                   :content="t(lastSubMenu.title)"
@@ -256,28 +235,26 @@ const updateMenu = async () => {
                                   }"
                                   :disable="windowWidth > 1260"
                                   :href="
-                                  lastSubMenu.subMenu
-                                    ? '#'
-                                    : ((pageName: string | undefined) => {
-                                        try {
-                                          return router.resolve({
-                                            name: pageName,
-                                          }).fullPath;
-                                        } catch (err) {
-                                          return '';
-                                        }
-                                      })(lastSubMenu.pageName)
-                                "
-                                  :class="[
-                                    lastSubMenu.active
-                                      ? 'side-menu side-menu--active'
-                                      : 'side-menu',
-                                  ]"
-                                  @click="(event: MouseEvent) => {
-                                  event.preventDefault();
-                                  linkTo(lastSubMenu, router);
-                                  setFormattedMenu([...formattedMenu]);
-                                }"
+                                    lastSubMenu.subMenu
+                                      ? '#'
+                                      : ((pageName: string | undefined) => {
+                                          try {
+                                            return router.resolve({
+                                              name: pageName,
+                                            }).fullPath;
+                                          } catch (err) {
+                                            return '';
+                                          }
+                                        })(lastSubMenu.pageName)
+                                  "
+                                  :class="[lastSubMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                                  @click="
+                                    (event: MouseEvent) => {
+                                      event.preventDefault();
+                                    linkTo(lastSubMenu, subMenu.subMenu ?? [], router);
+                                      setFormattedMenu([...formattedMenu]);
+                                    }
+                                  "
                                 >
                                   <div class="side-menu__icon">
                                     <Lucide :icon="lastSubMenu.icon" />
diff --git a/web/src/themes/Icewall/SideMenu/index.ts b/web/src/themes/Icewall/SideMenu/index.ts
index 4a5c27b6b..4a89e60cb 100644
--- a/web/src/themes/Icewall/SideMenu/index.ts
+++ b/web/src/themes/Icewall/SideMenu/index.ts
@@ -1,3 +1,3 @@
-import SideMenu from "./SideMenu.vue";
+import SideMenu from './SideMenu.vue';
 
 export default SideMenu;
diff --git a/web/src/themes/Icewall/SideMenu/side-menu.ts b/web/src/themes/Icewall/SideMenu/side-menu.ts
index 5e9651fbe..d02361625 100644
--- a/web/src/themes/Icewall/SideMenu/side-menu.ts
+++ b/web/src/themes/Icewall/SideMenu/side-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
-import { slideUp, slideDown } from "@/utils/helper";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
+import { slideUp, slideDown } from '@/utils/helper';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -23,10 +23,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -37,10 +35,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -49,10 +47,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -61,9 +57,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
@@ -76,9 +70,31 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
   return formattedMenu;
 };
 
-const linkTo = (menu: FormattedMenu, router: Router) => {
+const closeDropdown = (menu: FormattedMenu): void => {
+  menu.activeDropdown = false;
+
   if (menu.subMenu) {
-    menu.activeDropdown = !menu.activeDropdown;
+    menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+  }
+};
+
+const closeSiblingDropdowns = (menus: Array<FormattedMenu | 'divider'>, currentMenu: FormattedMenu): void => {
+  menus.forEach((menu) => {
+    if (menu !== 'divider' && menu !== currentMenu) {
+      closeDropdown(menu);
+    }
+  });
+};
+
+const linkTo = (menu: FormattedMenu, menus: Array<FormattedMenu | 'divider'>, router: Router) => {
+  if (menu.subMenu) {
+    const nextActiveDropdown = !menu.activeDropdown;
+    closeSiblingDropdowns(menus, menu);
+    menu.activeDropdown = nextActiveDropdown;
+
+    if (!nextActiveDropdown) {
+      menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+    }
   } else {
     if (menu.pageName !== undefined) {
       router.push({
diff --git a/web/src/themes/Icewall/SimpleMenu/SimpleMenu.vue b/web/src/themes/Icewall/SimpleMenu/SimpleMenu.vue
index a7ebcdd54..3ef5c05e2 100644
--- a/web/src/themes/Icewall/SimpleMenu/SimpleMenu.vue
+++ b/web/src/themes/Icewall/SimpleMenu/SimpleMenu.vue
@@ -1,91 +1,89 @@
 <script setup lang="ts">
-import "@/assets/css/themes/icewall/side-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import Tippy from "@/components/Base/Tippy";
-import Lucide from "@/components/Base/Lucide";
-import TopBar from "@/components/Themes/Icewall/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./simple-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/icewall/side-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import Tippy from '@/components/Base/Tippy';
+  import Lucide from '@/components/Base/Lucide';
+  import TopBar from '@/components/Themes/Icewall/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+    enter,
+    leave,
+  } from './simple-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("simple-menu"), route));
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('simple-menu'), route));
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
-});
+    setFormattedMenu(menu.value);
+  });
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -111,9 +109,7 @@ const updateMenu = async () => {
               'before:block before:absolute before:inset-0 before:bg-black/[0.15] before:rounded-[1.3rem] before:z-[-1]',
             ]"
           >
-            <nav
-              class="side-nav side-nav--simple hidden md:block w-[100px] px-5 pt-8 pb-16 overflow-x-hidden"
-            >
+            <nav class="side-nav side-nav--simple hidden md:block w-[100px] px-5 pt-8 pb-16 overflow-x-hidden">
               <ul>
                 <template v-for="(menu, menuKey) in formattedMenu">
                   <li
@@ -130,26 +126,26 @@ const updateMenu = async () => {
                         placement: 'right',
                       }"
                       :href="
-                      menu.subMenu
-                        ? '#'
-                        : ((pageName: string | undefined) => {
-                            try {
-                              return router.resolve({
-                                name: pageName,
-                              }).fullPath;
-                            } catch (err) {
-                              return '';
-                            }
-                          })(menu.pageName)
-                    "
-                      @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(menu, router);
-                      setFormattedMenu([...formattedMenu]);
-                    }"
-                      :class="[
-                        menu.active ? 'side-menu side-menu--active' : 'side-menu',
-                      ]"
+                        menu.subMenu
+                          ? '#'
+                          : ((pageName: string | undefined) => {
+                              try {
+                                return router.resolve({
+                                  name: pageName,
+                                }).fullPath;
+                              } catch (err) {
+                                return '';
+                              }
+                            })(menu.pageName)
+                      "
+                      @click="
+                        (event: MouseEvent) => {
+                          event.preventDefault();
+                          linkTo(menu, router);
+                          setFormattedMenu([...formattedMenu]);
+                        }
+                      "
+                      :class="[menu.active ? 'side-menu side-menu--active' : 'side-menu']"
                     >
                       <div class="side-menu__icon">
                         <Lucide :icon="menu.icon" />
@@ -158,10 +154,7 @@ const updateMenu = async () => {
                         {{ t(menu.title) }}
                         <div
                           v-if="menu.subMenu"
-                          :class="[
-                            'side-menu__sub-icon',
-                            { 'transform rotate-180': menu.activeDropdown },
-                          ]"
+                          :class="['side-menu__sub-icon', { 'transform rotate-180': menu.activeDropdown }]"
                         >
                           <Lucide icon="ChevronDown" />
                         </div>
@@ -172,10 +165,7 @@ const updateMenu = async () => {
                         v-if="menu.subMenu && menu.activeDropdown"
                         :class="{ 'side-menu__sub-open': menu.activeDropdown }"
                       >
-                        <li
-                          v-for="(subMenu, subMenuKey) in menu.subMenu"
-                          :key="subMenuKey"
-                        >
+                        <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                           <Tippy
                             as="a"
                             :content="t(subMenu.title)"
@@ -183,28 +173,26 @@ const updateMenu = async () => {
                               placement: 'right',
                             }"
                             :href="
-                            subMenu.subMenu
-                              ? '#'
-                              : ((pageName: string | undefined) => {
-                                  try {
-                                    return router.resolve({
-                                      name: pageName,
-                                    }).fullPath;
-                                  } catch (err) {
-                                    return '';
-                                  }
-                                })(subMenu.pageName)
-                          "
-                            :class="[
-                              subMenu.active
-                                ? 'side-menu side-menu--active'
-                                : 'side-menu',
-                            ]"
-                            @click="(event: MouseEvent) => {
-                            event.preventDefault();
-                            linkTo(subMenu, router);
-                            setFormattedMenu([...formattedMenu]);
-                          }"
+                              subMenu.subMenu
+                                ? '#'
+                                : ((pageName: string | undefined) => {
+                                    try {
+                                      return router.resolve({
+                                        name: pageName,
+                                      }).fullPath;
+                                    } catch (err) {
+                                      return '';
+                                    }
+                                  })(subMenu.pageName)
+                            "
+                            :class="[subMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                            @click="
+                              (event: MouseEvent) => {
+                                event.preventDefault();
+                                linkTo(subMenu, router);
+                                setFormattedMenu([...formattedMenu]);
+                              }
+                            "
                           >
                             <div class="side-menu__icon">
                               <Lucide :icon="subMenu.icon" />
@@ -224,23 +212,14 @@ const updateMenu = async () => {
                               </div>
                             </div>
                           </Tippy>
-                          <Transition
-                            @enter="enter"
-                            @leave="leave"
-                            v-if="subMenu.subMenu"
-                          >
+                          <Transition @enter="enter" @leave="leave" v-if="subMenu.subMenu">
                             <ul
                               v-if="subMenu.subMenu && subMenu.activeDropdown"
                               :class="{
                                 'side-menu__sub-open': subMenu.activeDropdown,
                               }"
                             >
-                              <li
-                                v-for="(
-                                  lastSubMenu, lastSubMenuKey
-                                ) in subMenu.subMenu"
-                                :key="lastSubMenuKey"
-                              >
+                              <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                                 <Tippy
                                   as="a"
                                   :content="t(lastSubMenu.title)"
@@ -248,28 +227,26 @@ const updateMenu = async () => {
                                     placement: 'right',
                                   }"
                                   :href="
-                                  lastSubMenu.subMenu
-                                    ? '#'
-                                    : ((pageName: string | undefined) => {
-                                        try {
-                                          return router.resolve({
-                                            name: pageName,
-                                          }).fullPath;
-                                        } catch (err) {
-                                          return '';
-                                        }
-                                      })(lastSubMenu.pageName)
-                                "
-                                  :class="[
-                                    lastSubMenu.active
-                                      ? 'side-menu side-menu--active'
-                                      : 'side-menu',
-                                  ]"
-                                  @click="(event: MouseEvent) => {
-                                  event.preventDefault();
-                                  linkTo(lastSubMenu, router);
-                                  setFormattedMenu([...formattedMenu]);
-                                }"
+                                    lastSubMenu.subMenu
+                                      ? '#'
+                                      : ((pageName: string | undefined) => {
+                                          try {
+                                            return router.resolve({
+                                              name: pageName,
+                                            }).fullPath;
+                                          } catch (err) {
+                                            return '';
+                                          }
+                                        })(lastSubMenu.pageName)
+                                  "
+                                  :class="[lastSubMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                                  @click="
+                                    (event: MouseEvent) => {
+                                      event.preventDefault();
+                                      linkTo(lastSubMenu, router);
+                                      setFormattedMenu([...formattedMenu]);
+                                    }
+                                  "
                                 >
                                   <div class="side-menu__icon">
                                     <Lucide :icon="lastSubMenu.icon" />
diff --git a/web/src/themes/Icewall/SimpleMenu/index.ts b/web/src/themes/Icewall/SimpleMenu/index.ts
index 35556c5b6..eb8eea61d 100644
--- a/web/src/themes/Icewall/SimpleMenu/index.ts
+++ b/web/src/themes/Icewall/SimpleMenu/index.ts
@@ -1,3 +1,3 @@
-import SimpleMenu from "./SimpleMenu.vue";
+import SimpleMenu from './SimpleMenu.vue';
 
 export default SimpleMenu;
diff --git a/web/src/themes/Icewall/SimpleMenu/simple-menu.ts b/web/src/themes/Icewall/SimpleMenu/simple-menu.ts
index 5e9651fbe..626e12265 100644
--- a/web/src/themes/Icewall/SimpleMenu/simple-menu.ts
+++ b/web/src/themes/Icewall/SimpleMenu/simple-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
-import { slideUp, slideDown } from "@/utils/helper";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
+import { slideUp, slideDown } from '@/utils/helper';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -23,10 +23,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -37,10 +35,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -49,10 +47,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -61,9 +57,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
diff --git a/web/src/themes/Icewall/TopMenu/TopMenu.vue b/web/src/themes/Icewall/TopMenu/TopMenu.vue
index 72010d71b..2e0d71a2b 100644
--- a/web/src/themes/Icewall/TopMenu/TopMenu.vue
+++ b/web/src/themes/Icewall/TopMenu/TopMenu.vue
@@ -1,89 +1,87 @@
 <script setup lang="ts">
-import "@/assets/css/themes/icewall/top-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import TopBar from "@/components/Themes/Icewall/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import _ from "lodash";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-} from "./top-menu";
-import Lucide from "@/components/Base/Lucide";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/icewall/top-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import TopBar from '@/components/Themes/Icewall/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import _ from 'lodash';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+  } from './top-menu';
+  import Lucide from '@/components/Base/Lucide';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("top-menu"), route));
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('top-menu'), route));
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
-});
+    setFormattedMenu(menu.value);
+  });
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -105,109 +103,95 @@ const updateMenu = async () => {
               <template v-if="menu != 'divider'">
                 <a
                   :href="
-                  menu.subMenu
-                    ? '#'
-                    : ((pageName: string | undefined) => {
-                        try {
-                          return router.resolve({
-                            name: pageName,
-                          }).fullPath;
-                        } catch (err) {
-                          return '';
-                        }
-                      })(menu.pageName)
-                "
+                    menu.subMenu
+                      ? '#'
+                      : ((pageName: string | undefined) => {
+                          try {
+                            return router.resolve({
+                              name: pageName,
+                            }).fullPath;
+                          } catch (err) {
+                            return '';
+                          }
+                        })(menu.pageName)
+                  "
                   :class="[menu.active ? 'top-menu top-menu--active' : 'top-menu']"
-                  @click="(event: MouseEvent) => {
-                  event.preventDefault();
-                  linkTo(menu, router);
-                }"
+                  @click="
+                    (event: MouseEvent) => {
+                      event.preventDefault();
+                      linkTo(menu, router);
+                    }
+                  "
                 >
                   <div class="top-menu__icon">
                     <Lucide :icon="menu.icon" />
                   </div>
                   <div class="top-menu__title">
-                    {{ t(menu.title) }}
-                    <Lucide
-                      v-if="menu.subMenu"
-                      class="top-menu__sub-icon"
-                      icon="ChevronDown"
-                    />
+                    <span class="top-menu__title-text">{{ t(menu.title) }}</span>
+                    <Lucide v-if="menu.subMenu" class="top-menu__sub-icon" icon="ChevronDown" />
                   </div>
                 </a>
-                <ul
-                  v-if="menu.subMenu"
-                  :class="{ 'side-menu__sub-open': menu.activeDropdown }"
-                >
-                  <li
-                    v-for="(subMenu, subMenuKey) in menu.subMenu"
-                    :key="subMenuKey"
-                  >
+                <ul v-if="menu.subMenu" :class="{ 'side-menu__sub-open': menu.activeDropdown }">
+                  <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                     <a
                       :href="
-                      subMenu.subMenu
-                        ? '#'
-                        : ((pageName: string | undefined) => {
-                            try {
-                              return router.resolve({
-                                name: pageName,
-                              }).fullPath;
-                            } catch (err) {
-                              return '';
-                            }
-                          })(subMenu.pageName)
-                    "
+                        subMenu.subMenu
+                          ? '#'
+                          : ((pageName: string | undefined) => {
+                              try {
+                                return router.resolve({
+                                  name: pageName,
+                                }).fullPath;
+                              } catch (err) {
+                                return '';
+                              }
+                            })(subMenu.pageName)
+                      "
                       class="top-menu"
-                      @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(subMenu, router);
-                    }"
+                      @click="
+                        (event: MouseEvent) => {
+                          event.preventDefault();
+                          linkTo(subMenu, router);
+                        }
+                      "
                     >
                       <div class="top-menu__icon">
                         <Lucide :icon="subMenu.icon" />
                       </div>
                       <div class="top-menu__title">
-                        {{ t(subMenu.title) }}
-                        <Lucide
-                          v-if="subMenu.subMenu"
-                          class="top-menu__sub-icon"
-                          icon="ChevronDown"
-                        />
+                        <span class="top-menu__title-text">{{ t(subMenu.title) }}</span>
+                        <Lucide v-if="subMenu.subMenu" class="top-menu__sub-icon" icon="ChevronDown" />
                       </div>
                     </a>
-                    <ul
-                      v-if="subMenu.subMenu"
-                      :class="{ 'side-menu__sub-open': subMenu.activeDropdown }"
-                    >
-                      <li
-                        v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu"
-                        :key="lastSubMenuKey"
-                      >
+                    <ul v-if="subMenu.subMenu" :class="{ 'side-menu__sub-open': subMenu.activeDropdown }">
+                      <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                         <a
                           :href="
-                          lastSubMenu.subMenu
-                            ? '#'
-                            : ((pageName: string | undefined) => {
-                                try {
-                                  return router.resolve({
-                                    name: pageName,
-                                  }).fullPath;
-                                } catch (err) {
-                                  return '';
-                                }
-                              })(lastSubMenu.pageName)
-                        "
+                            lastSubMenu.subMenu
+                              ? '#'
+                              : ((pageName: string | undefined) => {
+                                  try {
+                                    return router.resolve({
+                                      name: pageName,
+                                    }).fullPath;
+                                  } catch (err) {
+                                    return '';
+                                  }
+                                })(lastSubMenu.pageName)
+                          "
                           class="top-menu"
-                          @click="(event: MouseEvent) => {
-                          event.preventDefault();
-                          linkTo(lastSubMenu, router);
-                        }"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(lastSubMenu, router);
+                            }
+                          "
                         >
                           <div class="top-menu__icon">
                             <Lucide :icon="lastSubMenu.icon" />
                           </div>
                           <div class="top-menu__title">
-                            {{ t(lastSubMenu.title) }}
+                            <span class="top-menu__title-text">{{ t(lastSubMenu.title) }}</span>
                           </div>
                         </a>
                       </li>
diff --git a/web/src/themes/Icewall/TopMenu/index.ts b/web/src/themes/Icewall/TopMenu/index.ts
index 77706acd8..62c003465 100644
--- a/web/src/themes/Icewall/TopMenu/index.ts
+++ b/web/src/themes/Icewall/TopMenu/index.ts
@@ -1,3 +1,3 @@
-import TopMenu from "./TopMenu.vue";
+import TopMenu from './TopMenu.vue';
 
 export default TopMenu;
diff --git a/web/src/themes/Icewall/TopMenu/top-menu.ts b/web/src/themes/Icewall/TopMenu/top-menu.ts
index a5278bca5..fe8b0f443 100644
--- a/web/src/themes/Icewall/TopMenu/top-menu.ts
+++ b/web/src/themes/Icewall/TopMenu/top-menu.ts
@@ -1,5 +1,5 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -22,10 +22,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -36,10 +34,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -48,10 +46,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -60,9 +56,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
diff --git a/web/src/themes/Layout.vue b/web/src/themes/Layout.vue
index 1427c2c5d..53b0e31db 100644
--- a/web/src/themes/Layout.vue
+++ b/web/src/themes/Layout.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useThemeStore, getTheme } from "@/stores/theme";
-import ThemeSwitcher from "@/components/ThemeSwitcher";
-import { onMounted, computed } from "vue";
+  import { useThemeStore, getTheme } from '@/stores/theme';
+  import ThemeSwitcher from '@/components/ThemeSwitcher';
+  import { onMounted, computed } from 'vue';
 
-const themeStore = useThemeStore();
-const Component = computed(() => getTheme(themeStore.theme).component);
+  const themeStore = useThemeStore();
+  const Component = computed(() => getTheme(themeStore.theme).component);
 </script>
 
 <template>
diff --git a/web/src/themes/Rubick/SideMenu/SideMenu.vue b/web/src/themes/Rubick/SideMenu/SideMenu.vue
index 06cae572f..229283c47 100644
--- a/web/src/themes/Rubick/SideMenu/SideMenu.vue
+++ b/web/src/themes/Rubick/SideMenu/SideMenu.vue
@@ -1,99 +1,97 @@
 <script setup lang="ts">
-import "@/assets/css/themes/rubick/side-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import logoUrl from "@/assets/images/logo.svg";
-import Tippy from "@/components/Base/Tippy";
-import Lucide from "@/components/Base/Lucide";
-import TopBar from "@/components/Themes/Rubick/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./side-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/rubick/side-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import logoUrl from '@/assets/images/logo.svg';
+  import Tippy from '@/components/Base/Tippy';
+  import Lucide from '@/components/Base/Lucide';
+  import TopBar from '@/components/Themes/Rubick/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+    enter,
+    leave,
+  } from './side-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("side-menu"), route));
-const windowWidth = ref(window.innerWidth);
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('side-menu'), route));
+  const windowWidth = ref(window.innerWidth);
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
+    setFormattedMenu(menu.value);
 
-  window.addEventListener("resize", () => {
-    windowWidth.value = window.innerWidth;
+    window.addEventListener('resize', () => {
+      windowWidth.value = window.innerWidth;
+    });
   });
-});
 
-const appName = import.meta.env.VITE_APP_NAME;
+  const appName = import.meta.env.VITE_APP_NAME;
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -107,29 +105,17 @@ const updateMenu = async () => {
       >
         <MobileMenu />
         <div class="mt-[4.7rem] flex md:mt-0">
-          <nav
-            class="side-nav hidden w-[80px] overflow-x-hidden pb-16 pr-5 md:block xl:w-[230px]"
-          >
-            <RouterLink
-              :to="{ name: 'side-menu-dashboard-maindashboard' }"
-              class="flex items-center pt-4 pl-5 intro-x"
-            >
-              <img
-                alt="DCSLab"
-                class="w-6"
-                :src="logoUrl"
-              />
-              <span class="hidden ml-3 text-lg text-white xl:block"> {{ appName }} </span>
+          <nav class="side-nav hidden w-[80px] overflow-x-hidden pb-16 pr-5 md:block xl:w-[230px]">
+            <RouterLink :to="{ name: 'side-menu-dashboard-maindashboard' }" class="flex items-center pt-4 pl-5 intro-x">
+              <img alt="DCSLab" class="w-6" :src="logoUrl" />
+              <span class="hidden ml-3 text-lg text-white xl:block">
+                {{ appName }}
+              </span>
             </RouterLink>
             <div class="my-6 side-nav__divider"></div>
             <ul>
               <template v-for="(menu, menuKey) in formattedMenu">
-                <li
-                  v-if="menu == 'divider'"
-                  type="li"
-                  class="my-6 side-nav__divider"
-                  :key="'divider-' + menuKey"
-                ></li>
+                <li v-if="menu == 'divider'" type="li" class="my-6 side-nav__divider" :key="'divider-' + menuKey"></li>
                 <li v-else :key="menuKey">
                   <Tippy
                     as="a"
@@ -151,14 +137,14 @@ const updateMenu = async () => {
                             }
                           })(menu.pageName)
                     "
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(menu, router);
-                      setFormattedMenu([...formattedMenu]);
-                    }"
-                    :class="[
-                      menu.active ? 'side-menu side-menu--active' : 'side-menu',
-                    ]"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        linkTo(menu, formattedMenu, router);
+                        setFormattedMenu([...formattedMenu]);
+                      }
+                    "
+                    :class="[menu.active ? 'side-menu side-menu--active' : 'side-menu']"
                   >
                     <div class="side-menu__icon">
                       <Lucide :icon="menu.icon" />
@@ -167,10 +153,7 @@ const updateMenu = async () => {
                       {{ t(menu.title) }}
                       <div
                         v-if="menu.subMenu"
-                        :class="[
-                          'side-menu__sub-icon',
-                          { 'transform rotate-180': menu.activeDropdown },
-                        ]"
+                        :class="['side-menu__sub-icon', { 'transform rotate-180': menu.activeDropdown }]"
                       >
                         <Lucide icon="ChevronDown" />
                       </div>
@@ -181,10 +164,7 @@ const updateMenu = async () => {
                       v-if="menu.subMenu && menu.activeDropdown"
                       :class="{ 'side-menu__sub-open': menu.activeDropdown }"
                     >
-                      <li
-                        v-for="(subMenu, subMenuKey) in menu.subMenu"
-                        :key="subMenuKey"
-                      >
+                      <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                         <Tippy
                           as="a"
                           :content="t(subMenu.title)"
@@ -205,16 +185,14 @@ const updateMenu = async () => {
                                   }
                                 })(subMenu.pageName)
                           "
-                          :class="[
-                            subMenu.active
-                              ? 'side-menu side-menu--active'
-                              : 'side-menu',
-                          ]"
-                          @click="(event: MouseEvent) => {
-                            event.preventDefault();
-                            linkTo(subMenu, router);
-                            setFormattedMenu([...formattedMenu]);
-                          }"
+                          :class="[subMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(subMenu, menu.subMenu ?? [], router);
+                              setFormattedMenu([...formattedMenu]);
+                            }
+                          "
                         >
                           <div class="side-menu__icon">
                             <Lucide :icon="subMenu.icon" />
@@ -225,30 +203,23 @@ const updateMenu = async () => {
                               v-if="subMenu.subMenu"
                               :class="[
                                 'side-menu__sub-icon',
-                                { 'transform rotate-180': subMenu.activeDropdown },
+                                {
+                                  'transform rotate-180': subMenu.activeDropdown,
+                                },
                               ]"
                             >
                               <Lucide icon="ChevronDown" />
                             </div>
                           </div>
                         </Tippy>
-                        <Transition
-                          @enter="enter"
-                          @leave="leave"
-                          v-if="subMenu.subMenu"
-                        >
+                        <Transition @enter="enter" @leave="leave" v-if="subMenu.subMenu">
                           <ul
                             v-if="subMenu.subMenu && subMenu.activeDropdown"
                             :class="{
                               'side-menu__sub-open': subMenu.activeDropdown,
                             }"
                           >
-                            <li
-                              v-for="(
-                                lastSubMenu, lastSubMenuKey
-                              ) in subMenu.subMenu"
-                              :key="lastSubMenuKey"
-                            >
+                            <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                               <Tippy
                                 as="a"
                                 :content="t(lastSubMenu.title)"
@@ -269,16 +240,14 @@ const updateMenu = async () => {
                                         }
                                       })(lastSubMenu.pageName)
                                 "
-                                :class="[
-                                  lastSubMenu.active
-                                    ? 'side-menu side-menu--active'
-                                    : 'side-menu',
-                                ]"
-                                @click="(event: MouseEvent) => {
-                                  event.preventDefault();
-                                  linkTo(lastSubMenu, router);
-                                  setFormattedMenu([...formattedMenu]);
-                                }"
+                                :class="[lastSubMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                                @click="
+                                  (event: MouseEvent) => {
+                                    event.preventDefault();
+                                    linkTo(lastSubMenu, subMenu.subMenu ?? [], router);
+                                    setFormattedMenu([...formattedMenu]);
+                                  }
+                                "
                               >
                                 <div class="side-menu__icon">
                                   <Lucide :icon="lastSubMenu.icon" />
diff --git a/web/src/themes/Rubick/SideMenu/index.ts b/web/src/themes/Rubick/SideMenu/index.ts
index 4a5c27b6b..4a89e60cb 100644
--- a/web/src/themes/Rubick/SideMenu/index.ts
+++ b/web/src/themes/Rubick/SideMenu/index.ts
@@ -1,3 +1,3 @@
-import SideMenu from "./SideMenu.vue";
+import SideMenu from './SideMenu.vue';
 
 export default SideMenu;
diff --git a/web/src/themes/Rubick/SideMenu/side-menu.ts b/web/src/themes/Rubick/SideMenu/side-menu.ts
index 5e9651fbe..d02361625 100644
--- a/web/src/themes/Rubick/SideMenu/side-menu.ts
+++ b/web/src/themes/Rubick/SideMenu/side-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
-import { slideUp, slideDown } from "@/utils/helper";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
+import { slideUp, slideDown } from '@/utils/helper';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -23,10 +23,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -37,10 +35,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -49,10 +47,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -61,9 +57,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
@@ -76,9 +70,31 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
   return formattedMenu;
 };
 
-const linkTo = (menu: FormattedMenu, router: Router) => {
+const closeDropdown = (menu: FormattedMenu): void => {
+  menu.activeDropdown = false;
+
   if (menu.subMenu) {
-    menu.activeDropdown = !menu.activeDropdown;
+    menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+  }
+};
+
+const closeSiblingDropdowns = (menus: Array<FormattedMenu | 'divider'>, currentMenu: FormattedMenu): void => {
+  menus.forEach((menu) => {
+    if (menu !== 'divider' && menu !== currentMenu) {
+      closeDropdown(menu);
+    }
+  });
+};
+
+const linkTo = (menu: FormattedMenu, menus: Array<FormattedMenu | 'divider'>, router: Router) => {
+  if (menu.subMenu) {
+    const nextActiveDropdown = !menu.activeDropdown;
+    closeSiblingDropdowns(menus, menu);
+    menu.activeDropdown = nextActiveDropdown;
+
+    if (!nextActiveDropdown) {
+      menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+    }
   } else {
     if (menu.pageName !== undefined) {
       router.push({
diff --git a/web/src/themes/Rubick/SimpleMenu/SimpleMenu.vue b/web/src/themes/Rubick/SimpleMenu/SimpleMenu.vue
index d6184ef17..856627abc 100644
--- a/web/src/themes/Rubick/SimpleMenu/SimpleMenu.vue
+++ b/web/src/themes/Rubick/SimpleMenu/SimpleMenu.vue
@@ -1,92 +1,90 @@
 <script setup lang="ts">
-import "@/assets/css/themes/rubick/side-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import logoUrl from "@/assets/images/logo.svg";
-import Tippy from "@/components/Base/Tippy";
-import Lucide from "@/components/Base/Lucide";
-import TopBar from "@/components/Themes/Rubick/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./simple-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/rubick/side-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import logoUrl from '@/assets/images/logo.svg';
+  import Tippy from '@/components/Base/Tippy';
+  import Lucide from '@/components/Base/Lucide';
+  import TopBar from '@/components/Themes/Rubick/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+    enter,
+    leave,
+  } from './simple-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("simple-menu"), route));
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('simple-menu'), route));
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
-});
+    setFormattedMenu(menu.value);
+  });
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -100,28 +98,14 @@ const updateMenu = async () => {
       >
         <MobileMenu />
         <div class="flex mt-[4.7rem] md:mt-0">
-          <nav
-            class="side-nav side-nav--simple pr-5 pb-16 overflow-x-hidden hidden md:block w-[80px]"
-          >
-            <RouterLink
-              :to="{ name: 'side-menu-dashboard-maindashboard' }"
-              class="flex items-center pt-4 pl-5 intro-x"
-            >
-              <img
-                alt="DCSLab"
-                class="w-6"
-                :src="logoUrl"
-              />
+          <nav class="side-nav side-nav--simple pr-5 pb-16 overflow-x-hidden hidden md:block w-[80px]">
+            <RouterLink :to="{ name: 'side-menu-dashboard-maindashboard' }" class="flex items-center pt-4 pl-5 intro-x">
+              <img alt="DCSLab" class="w-6" :src="logoUrl" />
             </RouterLink>
             <div class="my-6 side-nav__divider"></div>
             <ul>
               <template v-for="(menu, menuKey) in formattedMenu">
-                <li
-                  v-if="menu == 'divider'"
-                  type="li"
-                  class="my-6 side-nav__divider"
-                  :key="'divider-' + menuKey"
-                ></li>
+                <li v-if="menu == 'divider'" type="li" class="my-6 side-nav__divider" :key="'divider-' + menuKey"></li>
                 <li v-else :key="menuKey">
                   <Tippy
                     as="a"
@@ -142,14 +126,14 @@ const updateMenu = async () => {
                             }
                           })(menu.pageName)
                     "
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(menu, router);
-                      setFormattedMenu([...formattedMenu]);
-                    }"
-                    :class="[
-                      menu.active ? 'side-menu side-menu--active' : 'side-menu',
-                    ]"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        linkTo(menu, router);
+                        setFormattedMenu([...formattedMenu]);
+                      }
+                    "
+                    :class="[menu.active ? 'side-menu side-menu--active' : 'side-menu']"
                   >
                     <div class="side-menu__icon">
                       <Lucide :icon="menu.icon" />
@@ -158,10 +142,7 @@ const updateMenu = async () => {
                       {{ t(menu.title) }}
                       <div
                         v-if="menu.subMenu"
-                        :class="[
-                          'side-menu__sub-icon',
-                          { 'transform rotate-180': menu.activeDropdown },
-                        ]"
+                        :class="['side-menu__sub-icon', { 'transform rotate-180': menu.activeDropdown }]"
                       >
                         <Lucide icon="ChevronDown" />
                       </div>
@@ -172,10 +153,7 @@ const updateMenu = async () => {
                       v-if="menu.subMenu && menu.activeDropdown"
                       :class="{ 'side-menu__sub-open': menu.activeDropdown }"
                     >
-                      <li
-                        v-for="(subMenu, subMenuKey) in menu.subMenu"
-                        :key="subMenuKey"
-                      >
+                      <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                         <Tippy
                           as="a"
                           :content="t(subMenu.title)"
@@ -195,16 +173,14 @@ const updateMenu = async () => {
                                   }
                                 })(subMenu.pageName)
                           "
-                          :class="[
-                            subMenu.active
-                              ? 'side-menu side-menu--active'
-                              : 'side-menu',
-                          ]"
-                          @click="(event: MouseEvent) => {
-                            event.preventDefault();
-                            linkTo(subMenu, router);
-                            setFormattedMenu([...formattedMenu]);
-                          }"
+                          :class="[subMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(subMenu, router);
+                              setFormattedMenu([...formattedMenu]);
+                            }
+                          "
                         >
                           <div class="side-menu__icon">
                             <Lucide :icon="subMenu.icon" />
@@ -215,30 +191,23 @@ const updateMenu = async () => {
                               v-if="subMenu.subMenu"
                               :class="[
                                 'side-menu__sub-icon',
-                                { 'transform rotate-180': subMenu.activeDropdown },
+                                {
+                                  'transform rotate-180': subMenu.activeDropdown,
+                                },
                               ]"
                             >
                               <Lucide icon="ChevronDown" />
                             </div>
                           </div>
                         </Tippy>
-                        <Transition
-                          @enter="enter"
-                          @leave="leave"
-                          v-if="subMenu.subMenu"
-                        >
+                        <Transition @enter="enter" @leave="leave" v-if="subMenu.subMenu">
                           <ul
                             v-if="subMenu.subMenu && subMenu.activeDropdown"
                             :class="{
                               'side-menu__sub-open': subMenu.activeDropdown,
                             }"
                           >
-                            <li
-                              v-for="(
-                                lastSubMenu, lastSubMenuKey
-                              ) in subMenu.subMenu"
-                              :key="lastSubMenuKey"
-                            >
+                            <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                               <Tippy
                                 as="a"
                                 :content="t(lastSubMenu.title)"
@@ -258,16 +227,14 @@ const updateMenu = async () => {
                                         }
                                       })(lastSubMenu.pageName)
                                 "
-                                :class="[
-                                  lastSubMenu.active
-                                    ? 'side-menu side-menu--active'
-                                    : 'side-menu',
-                                ]"
-                                @click="(event: MouseEvent) => {
-                                  event.preventDefault();
-                                  linkTo(lastSubMenu, router);
-                                  setFormattedMenu([...formattedMenu]);
-                                }"
+                                :class="[lastSubMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                                @click="
+                                  (event: MouseEvent) => {
+                                    event.preventDefault();
+                                    linkTo(lastSubMenu, router);
+                                    setFormattedMenu([...formattedMenu]);
+                                  }
+                                "
                               >
                                 <div class="side-menu__icon">
                                   <Lucide :icon="lastSubMenu.icon" />
diff --git a/web/src/themes/Rubick/SimpleMenu/index.ts b/web/src/themes/Rubick/SimpleMenu/index.ts
index 35556c5b6..eb8eea61d 100644
--- a/web/src/themes/Rubick/SimpleMenu/index.ts
+++ b/web/src/themes/Rubick/SimpleMenu/index.ts
@@ -1,3 +1,3 @@
-import SimpleMenu from "./SimpleMenu.vue";
+import SimpleMenu from './SimpleMenu.vue';
 
 export default SimpleMenu;
diff --git a/web/src/themes/Rubick/SimpleMenu/simple-menu.ts b/web/src/themes/Rubick/SimpleMenu/simple-menu.ts
index 5e9651fbe..626e12265 100644
--- a/web/src/themes/Rubick/SimpleMenu/simple-menu.ts
+++ b/web/src/themes/Rubick/SimpleMenu/simple-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
-import { slideUp, slideDown } from "@/utils/helper";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
+import { slideUp, slideDown } from '@/utils/helper';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -23,10 +23,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -37,10 +35,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -49,10 +47,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -61,9 +57,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
diff --git a/web/src/themes/Rubick/TopMenu/TopMenu.vue b/web/src/themes/Rubick/TopMenu/TopMenu.vue
index 4aedd1576..e481c75ac 100644
--- a/web/src/themes/Rubick/TopMenu/TopMenu.vue
+++ b/web/src/themes/Rubick/TopMenu/TopMenu.vue
@@ -1,102 +1,100 @@
 <script setup lang="ts">
-import "@/assets/css/themes/rubick/top-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import logoUrl from "@/assets/images/logo.svg";
-import MobileMenu from "@/components/MobileMenu";
-import _ from "lodash";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-} from "./top-menu";
-import Lucide from "@/components/Base/Lucide";
-import { watch, reactive, computed, onMounted, ref, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
-import HomeLogo from "@/components/HomeLogo/HomeLogo.vue";
-import UserLocation from "@/components/UserLocation/UserLocation.vue";
-import SearchBox from "@/components/SearchBox/SearchBox.vue";
-import ProfileMenu from "@/components/ProfileMenu/ProfileMenu.vue";
-import LanguageSwitcher from "@/components/LanguageSwitcher/LanguageSwitcher.vue";
-import SidebarPop from "@/components/SidebarPop/SidebarPop.vue";
-import { useDashboardStore } from "@/stores/dashboard";
-
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
-
-const searchDropdown = ref(false);
-const showSearchDropdown = () => {
-  searchDropdown.value = true;
-};
-const hideSearchDropdown = () => {
-  searchDropdown.value = false;
-};
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("top-menu"), route));
-
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
-
-const ziggyRouteStore = useZiggyRouteStore();
-
-const showBackToTop = ref<boolean>(false);
-
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
-
-window.addEventListener('scroll', handlescroll);
-
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
-
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
-
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
-
-onMounted(async () => {
-  await updateMenu();
-
-  setFormattedMenu(menu.value);
-});
-
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
-
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+  import '@/assets/css/themes/rubick/top-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import logoUrl from '@/assets/images/logo.svg';
+  import MobileMenu from '@/components/MobileMenu';
+  import _ from 'lodash';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+  } from './top-menu';
+  import Lucide from '@/components/Base/Lucide';
+  import { watch, reactive, computed, onMounted, ref, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
+  import HomeLogo from '@/components/HomeLogo/HomeLogo.vue';
+  import UserLocation from '@/components/UserLocation/UserLocation.vue';
+  import SearchBox from '@/components/SearchBox/SearchBox.vue';
+  import ProfileMenu from '@/components/ProfileMenu/ProfileMenu.vue';
+  import LanguageSwitcher from '@/components/LanguageSwitcher/LanguageSwitcher.vue';
+  import SidebarPop from '@/components/SidebarPop/SidebarPop.vue';
+  import { useDashboardStore } from '@/stores/dashboard';
+
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
+
+  const searchDropdown = ref(false);
+  const showSearchDropdown = () => {
+    searchDropdown.value = true;
+  };
+  const hideSearchDropdown = () => {
+    searchDropdown.value = false;
+  };
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('top-menu'), route));
+
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
+
+  const ziggyRouteStore = useZiggyRouteStore();
+
+  const showBackToTop = ref<boolean>(false);
+
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
+
+  window.addEventListener('scroll', handlescroll);
+
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
+
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
+
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
+
+  onMounted(async () => {
+    await updateMenu();
+
+    setFormattedMenu(menu.value);
+  });
+
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
+
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -110,11 +108,9 @@ const updateMenu = async () => {
       >
         <MobileMenu />
 
-        <div
-          class="border-b border-white/[0.08] mt-[2.2rem] md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 pt-3 md:pt-0 mb-10"
-        >
+        <div class="border-b border-white/[0.08] mt-[2.2rem] md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 pt-3 md:pt-0 mb-10">
           <div class="flex items-center h-[70px] z-[51] relative">
-            <HomeLogo layout="top-menu"/>
+            <HomeLogo layout="top-menu" />
             <UserLocation theme="rubick" layout="top-menu" />
             <SidebarPop />
             <LanguageSwitcher />
@@ -128,109 +124,95 @@ const updateMenu = async () => {
               <template v-if="menu != 'divider'">
                 <a
                   :href="
-                  menu.subMenu
-                    ? '#'
-                    : ((pageName: string | undefined) => {
-                        try {
-                          return router.resolve({
-                            name: pageName,
-                          }).fullPath;
-                        } catch (err) {
-                          return '';
-                        }
-                      })(menu.pageName)
-                "
+                    menu.subMenu
+                      ? '#'
+                      : ((pageName: string | undefined) => {
+                          try {
+                            return router.resolve({
+                              name: pageName,
+                            }).fullPath;
+                          } catch (err) {
+                            return '';
+                          }
+                        })(menu.pageName)
+                  "
                   :class="[menu.active ? 'top-menu top-menu--active' : 'top-menu']"
-                  @click="(event: MouseEvent) => {
-                  event.preventDefault();
-                  linkTo(menu, router);
-                }"
+                  @click="
+                    (event: MouseEvent) => {
+                      event.preventDefault();
+                      linkTo(menu, router);
+                    }
+                  "
                 >
                   <div class="top-menu__icon">
                     <Lucide :icon="menu.icon" />
                   </div>
                   <div class="top-menu__title">
-                    {{ t(menu.title) }}
-                    <Lucide
-                      v-if="menu.subMenu"
-                      class="top-menu__sub-icon"
-                      icon="ChevronDown"
-                    />
+                    <span class="top-menu__title-text">{{ t(menu.title) }}</span>
+                    <Lucide v-if="menu.subMenu" class="top-menu__sub-icon" icon="ChevronDown" />
                   </div>
                 </a>
-                <ul
-                  v-if="menu.subMenu"
-                  :class="{ 'side-menu__sub-open': menu.activeDropdown }"
-                >
-                  <li
-                    v-for="(subMenu, subMenuKey) in menu.subMenu"
-                    :key="subMenuKey"
-                  >
+                <ul v-if="menu.subMenu" :class="{ 'side-menu__sub-open': menu.activeDropdown }">
+                  <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                     <a
                       :href="
-                      subMenu.subMenu
-                        ? '#'
-                        : ((pageName: string | undefined) => {
-                            try {
-                              return router.resolve({
-                                name: pageName,
-                              }).fullPath;
-                            } catch (err) {
-                              return '';
-                            }
-                          })(subMenu.pageName)
-                    "
+                        subMenu.subMenu
+                          ? '#'
+                          : ((pageName: string | undefined) => {
+                              try {
+                                return router.resolve({
+                                  name: pageName,
+                                }).fullPath;
+                              } catch (err) {
+                                return '';
+                              }
+                            })(subMenu.pageName)
+                      "
                       class="top-menu"
-                      @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(subMenu, router);
-                    }"
+                      @click="
+                        (event: MouseEvent) => {
+                          event.preventDefault();
+                          linkTo(subMenu, router);
+                        }
+                      "
                     >
                       <div class="top-menu__icon">
                         <Lucide :icon="subMenu.icon" />
                       </div>
                       <div class="top-menu__title">
-                        {{ t(subMenu.title) }}
-                        <Lucide
-                          v-if="subMenu.subMenu"
-                          class="top-menu__sub-icon"
-                          icon="ChevronDown"
-                        />
+                        <span class="top-menu__title-text">{{ t(subMenu.title) }}</span>
+                        <Lucide v-if="subMenu.subMenu" class="top-menu__sub-icon" icon="ChevronDown" />
                       </div>
                     </a>
-                    <ul
-                      v-if="subMenu.subMenu"
-                      :class="{ 'side-menu__sub-open': subMenu.activeDropdown }"
-                    >
-                      <li
-                        v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu"
-                        :key="lastSubMenuKey"
-                      >
+                    <ul v-if="subMenu.subMenu" :class="{ 'side-menu__sub-open': subMenu.activeDropdown }">
+                      <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                         <a
                           :href="
-                          lastSubMenu.subMenu
-                            ? '#'
-                            : ((pageName: string | undefined) => {
-                                try {
-                                  return router.resolve({
-                                    name: pageName,
-                                  }).fullPath;
-                                } catch (err) {
-                                  return '';
-                                }
-                              })(lastSubMenu.pageName)
-                        "
+                            lastSubMenu.subMenu
+                              ? '#'
+                              : ((pageName: string | undefined) => {
+                                  try {
+                                    return router.resolve({
+                                      name: pageName,
+                                    }).fullPath;
+                                  } catch (err) {
+                                    return '';
+                                  }
+                                })(lastSubMenu.pageName)
+                          "
                           class="top-menu"
-                          @click="(event: MouseEvent) => {
-                          event.preventDefault();
-                          linkTo(lastSubMenu, router);
-                        }"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(lastSubMenu, router);
+                            }
+                          "
                         >
                           <div class="top-menu__icon">
                             <Lucide :icon="lastSubMenu.icon" />
                           </div>
                           <div class="top-menu__title">
-                            {{ t(lastSubMenu.title) }}
+                            <span class="top-menu__title-text">{{ t(lastSubMenu.title) }}</span>
                           </div>
                         </a>
                       </li>
diff --git a/web/src/themes/Rubick/TopMenu/index.ts b/web/src/themes/Rubick/TopMenu/index.ts
index 77706acd8..62c003465 100644
--- a/web/src/themes/Rubick/TopMenu/index.ts
+++ b/web/src/themes/Rubick/TopMenu/index.ts
@@ -1,3 +1,3 @@
-import TopMenu from "./TopMenu.vue";
+import TopMenu from './TopMenu.vue';
 
 export default TopMenu;
diff --git a/web/src/themes/Rubick/TopMenu/top-menu.ts b/web/src/themes/Rubick/TopMenu/top-menu.ts
index a5278bca5..fe8b0f443 100644
--- a/web/src/themes/Rubick/TopMenu/top-menu.ts
+++ b/web/src/themes/Rubick/TopMenu/top-menu.ts
@@ -1,5 +1,5 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -22,10 +22,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -36,10 +34,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -48,10 +46,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -60,9 +56,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
diff --git a/web/src/themes/Tinker/SideMenu/SideMenu.vue b/web/src/themes/Tinker/SideMenu/SideMenu.vue
index 001d25217..0e7453e84 100644
--- a/web/src/themes/Tinker/SideMenu/SideMenu.vue
+++ b/web/src/themes/Tinker/SideMenu/SideMenu.vue
@@ -1,99 +1,97 @@
 <script setup lang="ts">
-import "@/assets/css/themes/tinker/side-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import logoUrl from "@/assets/images/logo.svg";
-import Tippy from "@/components/Base/Tippy";
-import Lucide from "@/components/Base/Lucide";
-import TopBar from "@/components/Themes/Tinker/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./side-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/tinker/side-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import logoUrl from '@/assets/images/logo.svg';
+  import Tippy from '@/components/Base/Tippy';
+  import Lucide from '@/components/Base/Lucide';
+  import TopBar from '@/components/Themes/Tinker/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+    enter,
+    leave,
+  } from './side-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("side-menu"), route));
-const windowWidth = ref(window.innerWidth);
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('side-menu'), route));
+  const windowWidth = ref(window.innerWidth);
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
+    setFormattedMenu(menu.value);
 
-  window.addEventListener("resize", () => {
-    windowWidth.value = window.innerWidth;
+    window.addEventListener('resize', () => {
+      windowWidth.value = window.innerWidth;
+    });
   });
-});
 
-const appName = import.meta.env.VITE_APP_NAME;
+  const appName = import.meta.env.VITE_APP_NAME;
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -107,29 +105,20 @@ const updateMenu = async () => {
       >
         <MobileMenu />
         <div class="flex mt-[4.7rem] md:mt-0 overflow-hidden">
-          <nav
-            class="side-nav hidden md:block md:w-[100px] xl:w-[250px] px-5 pb-16 overflow-x-hidden z-10"
-          >
+          <nav class="side-nav hidden md:block md:w-[100px] xl:w-[250px] px-5 pb-16 overflow-x-hidden z-10">
             <RouterLink
               :to="{ name: 'side-menu-dashboard-maindashboard' }"
               class="flex items-center pt-4 pl-5 mt-3 intro-x"
             >
-              <img
-                alt="DCSLab"
-                class="w-6"
-                :src="logoUrl"
-              />
-              <span class="hidden ml-3 text-lg text-white xl:block"> {{ appName }} </span>
+              <img alt="DCSLab" class="w-6" :src="logoUrl" />
+              <span class="hidden ml-3 text-lg text-white xl:block">
+                {{ appName }}
+              </span>
             </RouterLink>
             <div class="my-6 side-nav__divider"></div>
             <ul>
               <template v-for="(menu, menuKey) in formattedMenu">
-                <li
-                  v-if="menu == 'divider'"
-                  type="li"
-                  class="my-6 side-nav__divider"
-                  :key="'divider-' + menuKey"
-                ></li>
+                <li v-if="menu == 'divider'" type="li" class="my-6 side-nav__divider" :key="'divider-' + menuKey"></li>
                 <li v-else :key="menuKey">
                   <Tippy
                     as="a"
@@ -151,14 +140,14 @@ const updateMenu = async () => {
                             }
                           })(menu.pageName)
                     "
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(menu, router);
-                      setFormattedMenu([...formattedMenu]);
-                    }"
-                    :class="[
-                      menu.active ? 'side-menu side-menu--active' : 'side-menu',
-                    ]"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        linkTo(menu, formattedMenu, router);
+                        setFormattedMenu([...formattedMenu]);
+                      }
+                    "
+                    :class="[menu.active ? 'side-menu side-menu--active' : 'side-menu']"
                   >
                     <div class="side-menu__icon">
                       <Lucide :icon="menu.icon" />
@@ -167,10 +156,7 @@ const updateMenu = async () => {
                       {{ t(menu.title) }}
                       <div
                         v-if="menu.subMenu"
-                        :class="[
-                          'side-menu__sub-icon',
-                          { 'transform rotate-180': menu.activeDropdown },
-                        ]"
+                        :class="['side-menu__sub-icon', { 'transform rotate-180': menu.activeDropdown }]"
                       >
                         <Lucide icon="ChevronDown" />
                       </div>
@@ -181,10 +167,7 @@ const updateMenu = async () => {
                       v-if="menu.subMenu && menu.activeDropdown"
                       :class="{ 'side-menu__sub-open': menu.activeDropdown }"
                     >
-                      <li
-                        v-for="(subMenu, subMenuKey) in menu.subMenu"
-                        :key="subMenuKey"
-                      >
+                      <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                         <Tippy
                           as="a"
                           :content="t(subMenu.title)"
@@ -205,16 +188,14 @@ const updateMenu = async () => {
                                   }
                                 })(subMenu.pageName)
                           "
-                          :class="[
-                            subMenu.active
-                              ? 'side-menu side-menu--active'
-                              : 'side-menu',
-                          ]"
-                          @click="(event: MouseEvent) => {
-                            event.preventDefault();
-                            linkTo(subMenu, router);
-                            setFormattedMenu([...formattedMenu]);
-                          }"
+                          :class="[subMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(subMenu, menu.subMenu ?? [], router);
+                              setFormattedMenu([...formattedMenu]);
+                            }
+                          "
                         >
                           <div class="side-menu__icon">
                             <Lucide :icon="subMenu.icon" />
@@ -225,30 +206,23 @@ const updateMenu = async () => {
                               v-if="subMenu.subMenu"
                               :class="[
                                 'side-menu__sub-icon',
-                                { 'transform rotate-180': subMenu.activeDropdown },
+                                {
+                                  'transform rotate-180': subMenu.activeDropdown,
+                                },
                               ]"
                             >
                               <Lucide icon="ChevronDown" />
                             </div>
                           </div>
                         </Tippy>
-                        <Transition
-                          @enter="enter"
-                          @leave="leave"
-                          v-if="subMenu.subMenu"
-                        >
+                        <Transition @enter="enter" @leave="leave" v-if="subMenu.subMenu">
                           <ul
                             v-if="subMenu.subMenu && subMenu.activeDropdown"
                             :class="{
                               'side-menu__sub-open': subMenu.activeDropdown,
                             }"
                           >
-                            <li
-                              v-for="(
-                                lastSubMenu, lastSubMenuKey
-                              ) in subMenu.subMenu"
-                              :key="lastSubMenuKey"
-                            >
+                            <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                               <Tippy
                                 as="a"
                                 :content="t(lastSubMenu.title)"
@@ -269,16 +243,14 @@ const updateMenu = async () => {
                                         }
                                       })(lastSubMenu.pageName)
                                 "
-                                :class="[
-                                  lastSubMenu.active
-                                    ? 'side-menu side-menu--active'
-                                    : 'side-menu',
-                                ]"
-                                @click="(event: MouseEvent) => {
-                                  event.preventDefault();
-                                  linkTo(lastSubMenu, router);
-                                  setFormattedMenu([...formattedMenu]);
-                                }"
+                                :class="[lastSubMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                                @click="
+                                  (event: MouseEvent) => {
+                                    event.preventDefault();
+                                    linkTo(lastSubMenu, subMenu.subMenu ?? [], router);
+                                    setFormattedMenu([...formattedMenu]);
+                                  }
+                                "
                               >
                                 <div class="side-menu__icon">
                                   <Lucide :icon="lastSubMenu.icon" />
diff --git a/web/src/themes/Tinker/SideMenu/index.ts b/web/src/themes/Tinker/SideMenu/index.ts
index 4a5c27b6b..4a89e60cb 100644
--- a/web/src/themes/Tinker/SideMenu/index.ts
+++ b/web/src/themes/Tinker/SideMenu/index.ts
@@ -1,3 +1,3 @@
-import SideMenu from "./SideMenu.vue";
+import SideMenu from './SideMenu.vue';
 
 export default SideMenu;
diff --git a/web/src/themes/Tinker/SideMenu/side-menu.ts b/web/src/themes/Tinker/SideMenu/side-menu.ts
index 5e9651fbe..d02361625 100644
--- a/web/src/themes/Tinker/SideMenu/side-menu.ts
+++ b/web/src/themes/Tinker/SideMenu/side-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
-import { slideUp, slideDown } from "@/utils/helper";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
+import { slideUp, slideDown } from '@/utils/helper';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -23,10 +23,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -37,10 +35,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -49,10 +47,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -61,9 +57,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
@@ -76,9 +70,31 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
   return formattedMenu;
 };
 
-const linkTo = (menu: FormattedMenu, router: Router) => {
+const closeDropdown = (menu: FormattedMenu): void => {
+  menu.activeDropdown = false;
+
   if (menu.subMenu) {
-    menu.activeDropdown = !menu.activeDropdown;
+    menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+  }
+};
+
+const closeSiblingDropdowns = (menus: Array<FormattedMenu | 'divider'>, currentMenu: FormattedMenu): void => {
+  menus.forEach((menu) => {
+    if (menu !== 'divider' && menu !== currentMenu) {
+      closeDropdown(menu);
+    }
+  });
+};
+
+const linkTo = (menu: FormattedMenu, menus: Array<FormattedMenu | 'divider'>, router: Router) => {
+  if (menu.subMenu) {
+    const nextActiveDropdown = !menu.activeDropdown;
+    closeSiblingDropdowns(menus, menu);
+    menu.activeDropdown = nextActiveDropdown;
+
+    if (!nextActiveDropdown) {
+      menu.subMenu.forEach((subMenu) => closeDropdown(subMenu));
+    }
   } else {
     if (menu.pageName !== undefined) {
       router.push({
diff --git a/web/src/themes/Tinker/SimpleMenu/SimpleMenu.vue b/web/src/themes/Tinker/SimpleMenu/SimpleMenu.vue
index 51eb62845..fa7f6edd4 100644
--- a/web/src/themes/Tinker/SimpleMenu/SimpleMenu.vue
+++ b/web/src/themes/Tinker/SimpleMenu/SimpleMenu.vue
@@ -1,92 +1,90 @@
 <script setup lang="ts">
-import "@/assets/css/themes/rubick/side-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import logoUrl from "@/assets/images/logo.svg";
-import Tippy from "@/components/Base/Tippy";
-import Lucide from "@/components/Base/Lucide";
-import TopBar from "@/components/Themes/Rubick/TopBar";
-import MobileMenu from "@/components/MobileMenu";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-  enter,
-  leave,
-} from "./simple-menu";
-import { watch, reactive, ref, computed, onMounted, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
+  import '@/assets/css/themes/rubick/side-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import logoUrl from '@/assets/images/logo.svg';
+  import Tippy from '@/components/Base/Tippy';
+  import Lucide from '@/components/Base/Lucide';
+  import TopBar from '@/components/Themes/Rubick/TopBar';
+  import MobileMenu from '@/components/MobileMenu';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+    enter,
+    leave,
+  } from './simple-menu';
+  import { watch, reactive, ref, computed, onMounted, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
 
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("simple-menu"), route));
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('simple-menu'), route));
 
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
 
-const ziggyRouteStore = useZiggyRouteStore();
+  const ziggyRouteStore = useZiggyRouteStore();
 
-const showBackToTop = ref<boolean>(false);
+  const showBackToTop = ref<boolean>(false);
 
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
 
-window.addEventListener('scroll', handlescroll);
+  window.addEventListener('scroll', handlescroll);
 
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
 
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
 
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
 
-onMounted(async () => {
-  await updateMenu();
+  onMounted(async () => {
+    await updateMenu();
 
-  setFormattedMenu(menu.value);
-});
+    setFormattedMenu(menu.value);
+  });
 
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
 
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -107,21 +105,12 @@ const updateMenu = async () => {
               :to="{ name: 'side-menu-dashboard-maindashboard' }"
               class="flex items-center pt-4 pl-5 mt-3 intro-x"
             >
-              <img
-                alt="DCSLab"
-                class="w-6"
-                :src="logoUrl"
-              />
+              <img alt="DCSLab" class="w-6" :src="logoUrl" />
             </RouterLink>
             <div class="my-6 side-nav__divider"></div>
             <ul>
               <template v-for="(menu, menuKey) in formattedMenu">
-                <li
-                  v-if="menu == 'divider'"
-                  type="li"
-                  class="my-6 side-nav__divider"
-                  :key="'divider-' + menuKey"
-                ></li>
+                <li v-if="menu == 'divider'" type="li" class="my-6 side-nav__divider" :key="'divider-' + menuKey"></li>
                 <li v-else :key="menuKey">
                   <Tippy
                     as="a"
@@ -142,14 +131,14 @@ const updateMenu = async () => {
                             }
                           })(menu.pageName)
                     "
-                    @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(menu, router);
-                      setFormattedMenu([...formattedMenu]);
-                    }"
-                    :class="[
-                      menu.active ? 'side-menu side-menu--active' : 'side-menu',
-                    ]"
+                    @click="
+                      (event: MouseEvent) => {
+                        event.preventDefault();
+                        linkTo(menu, router);
+                        setFormattedMenu([...formattedMenu]);
+                      }
+                    "
+                    :class="[menu.active ? 'side-menu side-menu--active' : 'side-menu']"
                   >
                     <div class="side-menu__icon">
                       <Lucide :icon="menu.icon" />
@@ -158,10 +147,7 @@ const updateMenu = async () => {
                       {{ t(menu.title) }}
                       <div
                         v-if="menu.subMenu"
-                        :class="[
-                          'side-menu__sub-icon',
-                          { 'transform rotate-180': menu.activeDropdown },
-                        ]"
+                        :class="['side-menu__sub-icon', { 'transform rotate-180': menu.activeDropdown }]"
                       >
                         <Lucide icon="ChevronDown" />
                       </div>
@@ -172,10 +158,7 @@ const updateMenu = async () => {
                       v-if="menu.subMenu && menu.activeDropdown"
                       :class="{ 'side-menu__sub-open': menu.activeDropdown }"
                     >
-                      <li
-                        v-for="(subMenu, subMenuKey) in menu.subMenu"
-                        :key="subMenuKey"
-                      >
+                      <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                         <Tippy
                           as="a"
                           :content="t(subMenu.title)"
@@ -195,16 +178,14 @@ const updateMenu = async () => {
                                   }
                                 })(subMenu.pageName)
                           "
-                          :class="[
-                            subMenu.active
-                              ? 'side-menu side-menu--active'
-                              : 'side-menu',
-                          ]"
-                          @click="(event: MouseEvent) => {
-                            event.preventDefault();
-                            linkTo(subMenu, router);
-                            setFormattedMenu([...formattedMenu]);
-                          }"
+                          :class="[subMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(subMenu, router);
+                              setFormattedMenu([...formattedMenu]);
+                            }
+                          "
                         >
                           <div class="side-menu__icon">
                             <Lucide :icon="subMenu.icon" />
@@ -215,30 +196,23 @@ const updateMenu = async () => {
                               v-if="subMenu.subMenu"
                               :class="[
                                 'side-menu__sub-icon',
-                                { 'transform rotate-180': subMenu.activeDropdown },
+                                {
+                                  'transform rotate-180': subMenu.activeDropdown,
+                                },
                               ]"
                             >
                               <Lucide icon="ChevronDown" />
                             </div>
                           </div>
                         </Tippy>
-                        <Transition
-                          @enter="enter"
-                          @leave="leave"
-                          v-if="subMenu.subMenu"
-                        >
+                        <Transition @enter="enter" @leave="leave" v-if="subMenu.subMenu">
                           <ul
                             v-if="subMenu.subMenu && subMenu.activeDropdown"
                             :class="{
                               'side-menu__sub-open': subMenu.activeDropdown,
                             }"
                           >
-                            <li
-                              v-for="(
-                                lastSubMenu, lastSubMenuKey
-                              ) in subMenu.subMenu"
-                              :key="lastSubMenuKey"
-                            >
+                            <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                               <Tippy
                                 as="a"
                                 :content="t(lastSubMenu.title)"
@@ -258,16 +232,14 @@ const updateMenu = async () => {
                                         }
                                       })(lastSubMenu.pageName)
                                 "
-                                :class="[
-                                  lastSubMenu.active
-                                    ? 'side-menu side-menu--active'
-                                    : 'side-menu',
-                                ]"
-                                @click="(event: MouseEvent) => {
-                                  event.preventDefault();
-                                  linkTo(lastSubMenu, router);
-                                  setFormattedMenu([...formattedMenu]);
-                                }"
+                                :class="[lastSubMenu.active ? 'side-menu side-menu--active' : 'side-menu']"
+                                @click="
+                                  (event: MouseEvent) => {
+                                    event.preventDefault();
+                                    linkTo(lastSubMenu, router);
+                                    setFormattedMenu([...formattedMenu]);
+                                  }
+                                "
                               >
                                 <div class="side-menu__icon">
                                   <Lucide :icon="lastSubMenu.icon" />
diff --git a/web/src/themes/Tinker/SimpleMenu/index.ts b/web/src/themes/Tinker/SimpleMenu/index.ts
index 35556c5b6..eb8eea61d 100644
--- a/web/src/themes/Tinker/SimpleMenu/index.ts
+++ b/web/src/themes/Tinker/SimpleMenu/index.ts
@@ -1,3 +1,3 @@
-import SimpleMenu from "./SimpleMenu.vue";
+import SimpleMenu from './SimpleMenu.vue';
 
 export default SimpleMenu;
diff --git a/web/src/themes/Tinker/SimpleMenu/simple-menu.ts b/web/src/themes/Tinker/SimpleMenu/simple-menu.ts
index 5e9651fbe..626e12265 100644
--- a/web/src/themes/Tinker/SimpleMenu/simple-menu.ts
+++ b/web/src/themes/Tinker/SimpleMenu/simple-menu.ts
@@ -1,6 +1,6 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
-import { slideUp, slideDown } from "@/utils/helper";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
+import { slideUp, slideDown } from '@/utils/helper';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -23,10 +23,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -37,10 +35,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -49,10 +47,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -61,9 +57,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
diff --git a/web/src/themes/Tinker/TopMenu/TopMenu.vue b/web/src/themes/Tinker/TopMenu/TopMenu.vue
index bbc4fa006..6f1491f95 100644
--- a/web/src/themes/Tinker/TopMenu/TopMenu.vue
+++ b/web/src/themes/Tinker/TopMenu/TopMenu.vue
@@ -1,95 +1,93 @@
 <script setup lang="ts">
-import "@/assets/css/themes/tinker/top-nav.css";
-import { useRoute, useRouter } from "vue-router";
-import logoUrl from "@/assets/images/logo.svg";
-import MobileMenu from "@/components/MobileMenu";
-import _ from "lodash";
-import { useMenuStore, Menu as sMenu } from "@/stores/menu";
-import {
-  type ProvideForceActiveMenu,
-  forceActiveMenu,
-  type Route,
-  type FormattedMenu,
-  nestedMenu,
-  linkTo,
-} from "./top-menu";
-import Lucide from "@/components/Base/Lucide";
-import { watch, reactive, computed, onMounted, ref, provide } from "vue";
-import ScrollToTop from "@/components/Base/ScrollToTop";
-import LoadingOverlay from "@/components/LoadingOverlay";
-import { EmailVerificationAlert } from "@/components/AlertPlaceholder";
-import { useDashboardStore } from "@/stores/dashboard";
-import DashboardService from "@/services/DashboardService";
-import { useZiggyRouteStore } from "@/stores/ziggy-route";
-import { Config } from "ziggy-js";
-import { useI18n } from "vue-i18n";
-import HomeLogo from "@/components/HomeLogo/HomeLogo.vue";
-import UserLocation from "@/components/UserLocation/UserLocation.vue";
-import SearchBox from "@/components/SearchBox/SearchBox.vue";
-import ProfileMenu from "@/components/ProfileMenu/ProfileMenu.vue";
-import LanguageSwitcher from "@/components/LanguageSwitcher/LanguageSwitcher.vue";
-import SidebarPop from "@/components/SidebarPop/SidebarPop.vue";
-
-const { t } = useI18n();
-const dashboardServices = new DashboardService();
-
-const route: Route = useRoute();
-const router = useRouter();
-let formattedMenu = reactive<Array<FormattedMenu | "divider">>([]);
-const setFormattedMenu = (
-  computedFormattedMenu: Array<FormattedMenu | "divider">
-) => {
-  Object.assign(formattedMenu, computedFormattedMenu);
-};
-const menuStore = useMenuStore();
-const menu = computed(() => nestedMenu(menuStore.menu("top-menu"), route));
-
-const dashboardStore = useDashboardStore();
-const screenMask = computed(() => dashboardStore.screenMaskValue);
-
-const ziggyRouteStore = useZiggyRouteStore();
-
-const showBackToTop = ref<boolean>(false);
-
-const handlescroll = () => {
-  if (window.scrollY > 100) {
-    showBackToTop.value = true;
-  } else {
-    showBackToTop.value = false;
-  }
-}
-
-window.addEventListener('scroll', handlescroll);
-
-provide<ProvideForceActiveMenu>("forceActiveMenu", (pageName: string) => {
-  forceActiveMenu(route, pageName);
-  setFormattedMenu(menu.value);
-});
-
-watch(menu, () => {
-  setFormattedMenu(menu.value);
-});
-
-watch(
-  computed(() => route.path),
-  () => {
-    delete route.forceActiveMenu;
-  }
-);
-
-onMounted(async () => {
-  await updateMenu();
-
-  setFormattedMenu(menu.value);
-});
-
-const updateMenu = async () => {
-  let menuResult = await dashboardServices.readUserMenu();
-  menuStore.setMenu(menuResult.data as Array<sMenu>);
-
-  let apiResult = await dashboardServices.readUserApi();
-  ziggyRouteStore.setZiggy(apiResult.data as Config);
-};
+  import '@/assets/css/themes/tinker/top-nav.css';
+  import { useRoute, useRouter } from 'vue-router';
+  import logoUrl from '@/assets/images/logo.svg';
+  import MobileMenu from '@/components/MobileMenu';
+  import _ from 'lodash';
+  import { useMenuStore, Menu as sMenu } from '@/stores/menu';
+  import {
+    type ProvideForceActiveMenu,
+    forceActiveMenu,
+    type Route,
+    type FormattedMenu,
+    nestedMenu,
+    linkTo,
+  } from './top-menu';
+  import Lucide from '@/components/Base/Lucide';
+  import { watch, reactive, computed, onMounted, ref, provide } from 'vue';
+  import ScrollToTop from '@/components/Base/ScrollToTop';
+  import LoadingOverlay from '@/components/LoadingOverlay';
+  import { EmailVerificationAlert } from '@/components/AlertPlaceholder';
+  import { useDashboardStore } from '@/stores/dashboard';
+  import DashboardService from '@/services/DashboardService';
+  import { useZiggyRouteStore } from '@/stores/ziggy-route';
+  import { Config } from 'ziggy-js';
+  import { useI18n } from 'vue-i18n';
+  import HomeLogo from '@/components/HomeLogo/HomeLogo.vue';
+  import UserLocation from '@/components/UserLocation/UserLocation.vue';
+  import SearchBox from '@/components/SearchBox/SearchBox.vue';
+  import ProfileMenu from '@/components/ProfileMenu/ProfileMenu.vue';
+  import LanguageSwitcher from '@/components/LanguageSwitcher/LanguageSwitcher.vue';
+  import SidebarPop from '@/components/SidebarPop/SidebarPop.vue';
+
+  const { t } = useI18n();
+  const dashboardServices = new DashboardService();
+
+  const route: Route = useRoute();
+  const router = useRouter();
+  let formattedMenu = reactive<Array<FormattedMenu | 'divider'>>([]);
+  const setFormattedMenu = (computedFormattedMenu: Array<FormattedMenu | 'divider'>) => {
+    Object.assign(formattedMenu, computedFormattedMenu);
+  };
+  const menuStore = useMenuStore();
+  const menu = computed(() => nestedMenu(menuStore.menu('top-menu'), route));
+
+  const dashboardStore = useDashboardStore();
+  const screenMask = computed(() => dashboardStore.screenMaskValue);
+
+  const ziggyRouteStore = useZiggyRouteStore();
+
+  const showBackToTop = ref<boolean>(false);
+
+  const handlescroll = () => {
+    if (window.scrollY > 100) {
+      showBackToTop.value = true;
+    } else {
+      showBackToTop.value = false;
+    }
+  };
+
+  window.addEventListener('scroll', handlescroll);
+
+  provide<ProvideForceActiveMenu>('forceActiveMenu', (pageName: string) => {
+    forceActiveMenu(route, pageName);
+    setFormattedMenu(menu.value);
+  });
+
+  watch(menu, () => {
+    setFormattedMenu(menu.value);
+  });
+
+  watch(
+    computed(() => route.path),
+    () => {
+      delete route.forceActiveMenu;
+    },
+  );
+
+  onMounted(async () => {
+    await updateMenu();
+
+    setFormattedMenu(menu.value);
+  });
+
+  const updateMenu = async () => {
+    let menuResult = await dashboardServices.readUserMenu();
+    menuStore.setMenu(menuResult.data as Array<sMenu>);
+
+    let apiResult = await dashboardServices.readUserApi();
+    ziggyRouteStore.setZiggy(apiResult.data as Config);
+  };
 </script>
 
 <template>
@@ -116,117 +114,101 @@ const updateMenu = async () => {
           </div>
         </div>
 
-        <nav
-          class="top-nav relative z-50 -mt-[3px] hidden translate-y-[50px] opacity-0 md:block"
-        >
+        <nav class="top-nav relative z-50 -mt-[3px] hidden translate-y-[50px] opacity-0 md:block">
           <ul class="flex flex-wrap h-[58px] px-6 xl:px-[50px]">
             <li v-for="(menu, menuKey) in formattedMenu" :key="menuKey">
               <template v-if="menu != 'divider'">
                 <a
                   :href="
-                  menu.subMenu
-                    ? '#'
-                    : ((pageName: string | undefined) => {
-                        try {
-                          return router.resolve({
-                            name: pageName,
-                          }).fullPath;
-                        } catch (err) {
-                          return '';
-                        }
-                      })(menu.pageName)
-                "
+                    menu.subMenu
+                      ? '#'
+                      : ((pageName: string | undefined) => {
+                          try {
+                            return router.resolve({
+                              name: pageName,
+                            }).fullPath;
+                          } catch (err) {
+                            return '';
+                          }
+                        })(menu.pageName)
+                  "
                   :class="[menu.active ? 'top-menu top-menu--active' : 'top-menu']"
-                  @click="(event: MouseEvent) => {
-                  event.preventDefault();
-                  linkTo(menu, router);
-                }"
+                  @click="
+                    (event: MouseEvent) => {
+                      event.preventDefault();
+                      linkTo(menu, router);
+                    }
+                  "
                 >
                   <div class="top-menu__icon">
                     <Lucide :icon="menu.icon" />
                   </div>
                   <div class="top-menu__title">
-                    {{ t(menu.title) }}
-                    <Lucide
-                      v-if="menu.subMenu"
-                      class="top-menu__sub-icon"
-                      icon="ChevronDown"
-                    />
+                    <span class="top-menu__title-text">{{ t(menu.title) }}</span>
+                    <Lucide v-if="menu.subMenu" class="top-menu__sub-icon" icon="ChevronDown" />
                   </div>
                 </a>
-                <ul
-                  v-if="menu.subMenu"
-                  :class="{ 'side-menu__sub-open': menu.activeDropdown }"
-                >
-                  <li
-                    v-for="(subMenu, subMenuKey) in menu.subMenu"
-                    :key="subMenuKey"
-                  >
+                <ul v-if="menu.subMenu" :class="{ 'side-menu__sub-open': menu.activeDropdown }">
+                  <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
                     <a
                       :href="
-                      subMenu.subMenu
-                        ? '#'
-                        : ((pageName: string | undefined) => {
-                            try {
-                              return router.resolve({
-                                name: pageName,
-                              }).fullPath;
-                            } catch (err) {
-                              return '';
-                            }
-                          })(subMenu.pageName)
-                    "
+                        subMenu.subMenu
+                          ? '#'
+                          : ((pageName: string | undefined) => {
+                              try {
+                                return router.resolve({
+                                  name: pageName,
+                                }).fullPath;
+                              } catch (err) {
+                                return '';
+                              }
+                            })(subMenu.pageName)
+                      "
                       class="top-menu"
-                      @click="(event: MouseEvent) => {
-                      event.preventDefault();
-                      linkTo(subMenu, router);
-                    }"
+                      @click="
+                        (event: MouseEvent) => {
+                          event.preventDefault();
+                          linkTo(subMenu, router);
+                        }
+                      "
                     >
                       <div class="top-menu__icon">
                         <Lucide :icon="subMenu.icon" />
                       </div>
                       <div class="top-menu__title">
-                        {{ t(subMenu.title) }}
-                        <Lucide
-                          v-if="subMenu.subMenu"
-                          class="top-menu__sub-icon"
-                          icon="ChevronDown"
-                        />
+                        <span class="top-menu__title-text">{{ t(subMenu.title) }}</span>
+                        <Lucide v-if="subMenu.subMenu" class="top-menu__sub-icon" icon="ChevronDown" />
                       </div>
                     </a>
-                    <ul
-                      v-if="subMenu.subMenu"
-                      :class="{ 'side-menu__sub-open': subMenu.activeDropdown }"
-                    >
-                      <li
-                        v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu"
-                        :key="lastSubMenuKey"
-                      >
+                    <ul v-if="subMenu.subMenu" :class="{ 'side-menu__sub-open': subMenu.activeDropdown }">
+                      <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
                         <a
                           :href="
-                          lastSubMenu.subMenu
-                            ? '#'
-                            : ((pageName: string | undefined) => {
-                                try {
-                                  return router.resolve({
-                                    name: pageName,
-                                  }).fullPath;
-                                } catch (err) {
-                                  return '';
-                                }
-                              })(lastSubMenu.pageName)
-                        "
+                            lastSubMenu.subMenu
+                              ? '#'
+                              : ((pageName: string | undefined) => {
+                                  try {
+                                    return router.resolve({
+                                      name: pageName,
+                                    }).fullPath;
+                                  } catch (err) {
+                                    return '';
+                                  }
+                                })(lastSubMenu.pageName)
+                          "
                           class="top-menu"
-                          @click="(event: MouseEvent) => {
-                          event.preventDefault();
-                          linkTo(lastSubMenu, router);
-                        }"
+                          @click="
+                            (event: MouseEvent) => {
+                              event.preventDefault();
+                              linkTo(lastSubMenu, router);
+                            }
+                          "
                         >
                           <div class="top-menu__icon">
                             <Lucide :icon="lastSubMenu.icon" />
                           </div>
                           <div class="top-menu__title">
-                            {{ t(lastSubMenu.title) }}
+                            <span class="top-menu__title-text">{{ t(lastSubMenu.title) }}</span>
                           </div>
                         </a>
                       </li>
diff --git a/web/src/themes/Tinker/TopMenu/index.ts b/web/src/themes/Tinker/TopMenu/index.ts
index 77706acd8..62c003465 100644
--- a/web/src/themes/Tinker/TopMenu/index.ts
+++ b/web/src/themes/Tinker/TopMenu/index.ts
@@ -1,3 +1,3 @@
-import TopMenu from "./TopMenu.vue";
+import TopMenu from './TopMenu.vue';
 
 export default TopMenu;
diff --git a/web/src/themes/Tinker/TopMenu/top-menu.ts b/web/src/themes/Tinker/TopMenu/top-menu.ts
index a5278bca5..fe8b0f443 100644
--- a/web/src/themes/Tinker/TopMenu/top-menu.ts
+++ b/web/src/themes/Tinker/TopMenu/top-menu.ts
@@ -1,5 +1,5 @@
-import { type Router, type RouteLocationNormalizedLoaded } from "vue-router";
-import { type Menu } from "@/stores/menu";
+import { type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
+import { type Menu } from '@/stores/menu';
 
 export interface Route extends RouteLocationNormalizedLoaded {
   forceActiveMenu?: string;
@@ -22,10 +22,8 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   let match = false;
   subMenu.forEach((item) => {
     if (
-      ((route.forceActiveMenu !== undefined &&
-        item.pageName === route.forceActiveMenu) ||
-        (route.forceActiveMenu === undefined &&
-          item.pageName === route.name)) &&
+      ((route.forceActiveMenu !== undefined && item.pageName === route.forceActiveMenu) ||
+        (route.forceActiveMenu === undefined && item.pageName === route.name)) &&
       !item.ignore
     ) {
       match = true;
@@ -36,10 +34,10 @@ const findActiveMenu = (subMenu: Menu[], route: Route): boolean => {
   return match;
 };
 
-const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
-  const formattedMenu: Array<FormattedMenu | "divider"> = [];
+const nestedMenu = (menu: Array<Menu | 'divider'>, route: Route) => {
+  const formattedMenu: Array<FormattedMenu | 'divider'> = [];
   menu.forEach((item) => {
-    if (typeof item !== "string") {
+    if (typeof item !== 'string') {
       const menuItem: FormattedMenu = {
         icon: item.icon,
         title: item.title,
@@ -48,10 +46,8 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
         ignore: item.ignore,
       };
       menuItem.active =
-        ((route.forceActiveMenu !== undefined &&
-          menuItem.pageName === route.forceActiveMenu) ||
-          (route.forceActiveMenu === undefined &&
-            menuItem.pageName === route.name) ||
+        ((route.forceActiveMenu !== undefined && menuItem.pageName === route.forceActiveMenu) ||
+          (route.forceActiveMenu === undefined && menuItem.pageName === route.name) ||
           (menuItem.subMenu && findActiveMenu(menuItem.subMenu, route))) &&
         !menuItem.ignore;
 
@@ -60,9 +56,7 @@ const nestedMenu = (menu: Array<Menu | "divider">, route: Route) => {
 
         // Nested menu
         const subMenu: Array<FormattedMenu> = [];
-        nestedMenu(menuItem.subMenu, route).map(
-          (menu) => typeof menu !== "string" && subMenu.push(menu)
-        );
+        nestedMenu(menuItem.subMenu, route).map((menu) => typeof menu !== 'string' && subMenu.push(menu));
         menuItem.subMenu = subMenu;
       }
 
diff --git a/web/src/themes/index.ts b/web/src/themes/index.ts
index 00f750908..7a5df10c1 100644
--- a/web/src/themes/index.ts
+++ b/web/src/themes/index.ts
@@ -1,3 +1,3 @@
-import Layout from "./Layout.vue";
+import Layout from './Layout.vue';
 
 export default Layout;
diff --git a/web/src/types/enums/CapitalTransactionType.ts b/web/src/types/enums/CapitalTransactionType.ts
new file mode 100644
index 000000000..b88990906
--- /dev/null
+++ b/web/src/types/enums/CapitalTransactionType.ts
@@ -0,0 +1,4 @@
+export enum CapitalTransactionType {
+  IN = 'IN',
+  OUT = 'OUT',
+}
diff --git a/web/src/types/enums/CardState.ts b/web/src/types/enums/CardState.ts
index ac815bc31..f1403a3e7 100644
--- a/web/src/types/enums/CardState.ts
+++ b/web/src/types/enums/CardState.ts
@@ -1,5 +1,5 @@
-export enum CardState {
-    Collapsed = "COLLAPSED",
-    Hidden = "HIDDEN",
-    Expanded = "EXPANDED"
-}
\ No newline at end of file
+export enum CardState {
+  Collapsed = 'COLLAPSED',
+  Hidden = 'HIDDEN',
+  Expanded = 'EXPANDED',
+}
diff --git a/web/src/types/enums/ErrorCode.ts b/web/src/types/enums/ErrorCode.ts
index ec4e39855..a3312cca9 100644
--- a/web/src/types/enums/ErrorCode.ts
+++ b/web/src/types/enums/ErrorCode.ts
@@ -1,3 +1,3 @@
-export enum ErrorCode {
-    USERLOCATION_REQUIRED = 10000,
-}
\ No newline at end of file
+export enum ErrorCode {
+  USERLOCATION_REQUIRED = 10000,
+}
diff --git a/web/src/types/enums/PaymentTermType.ts b/web/src/types/enums/PaymentTermType.ts
new file mode 100644
index 000000000..28fbb6278
--- /dev/null
+++ b/web/src/types/enums/PaymentTermType.ts
@@ -0,0 +1,8 @@
+export enum PaymentTermType {
+  PAYMENT_IN_ADVANCE = 'PIA',
+  X_DAYS_AFTER_INVOICE = 'NET',
+  END_OF_MONTH = 'EOM',
+  CASH_ON_DELIVERY = 'COD',
+  CASH_ON_NEXT_DELIVERY = 'CND',
+  CASH_BEFORE_SHIPMENT = 'CBS',
+}
diff --git a/web/src/types/enums/PurchaseOrderDownPaymentAllocationStatus.ts b/web/src/types/enums/PurchaseOrderDownPaymentAllocationStatus.ts
new file mode 100644
index 000000000..362ce868e
--- /dev/null
+++ b/web/src/types/enums/PurchaseOrderDownPaymentAllocationStatus.ts
@@ -0,0 +1,4 @@
+export enum PurchaseOrderDownPaymentAllocationStatus {
+  NOT_FULLY_ALLOCATED = 'not_fully_allocated',
+  FULLY_ALLOCATED = 'fully_allocated',
+}
diff --git a/web/src/types/enums/RoundOn.ts b/web/src/types/enums/RoundOn.ts
new file mode 100644
index 000000000..5fa1f965e
--- /dev/null
+++ b/web/src/types/enums/RoundOn.ts
@@ -0,0 +1,4 @@
+export enum RoundOn {
+  UP = 1,
+  DOWN = 2,
+}
diff --git a/web/src/types/enums/StatusCode.ts b/web/src/types/enums/StatusCode.ts
index b06d222b4..8e8743700 100644
--- a/web/src/types/enums/StatusCode.ts
+++ b/web/src/types/enums/StatusCode.ts
@@ -1,11 +1,11 @@
-export enum StatusCode {
-    OK = 200,
-    Created = 201,
-    BadRequest = 400,
-    UnprocessableEntity = 422,
-    Locked = 423,
-    Unauthorized,
-    PaymentRequired,
-    Forbidden,
-    NotFound,
-}
\ No newline at end of file
+export enum StatusCode {
+  OK = 200,
+  Created = 201,
+  BadRequest = 400,
+  UnprocessableEntity = 422,
+  Locked = 423,
+  Unauthorized,
+  PaymentRequired,
+  Forbidden,
+  NotFound,
+}
diff --git a/web/src/types/enums/ViewMode.ts b/web/src/types/enums/ViewMode.ts
index cee2e90f2..8e520d988 100644
--- a/web/src/types/enums/ViewMode.ts
+++ b/web/src/types/enums/ViewMode.ts
@@ -1,6 +1,6 @@
-export enum ViewMode {
-    INDEX = 'INDEX',
-    LIST = 'LIST',
-    FORM_CREATE = 'FORM_CREATE',
-    FORM_EDIT = 'FORM_EDIT',
-}
\ No newline at end of file
+export enum ViewMode {
+  INDEX = 'INDEX',
+  LIST = 'LIST',
+  FORM_CREATE = 'FORM_CREATE',
+  FORM_EDIT = 'FORM_EDIT',
+}
diff --git a/web/src/types/models/Asset.ts b/web/src/types/models/Asset.ts
new file mode 100644
index 000000000..deb495013
--- /dev/null
+++ b/web/src/types/models/Asset.ts
@@ -0,0 +1,15 @@
+import type { Company } from './Company';
+import type { AssetCategory } from './AssetCategory';
+import type { AssetUnit } from './AssetUnit';
+
+export interface Asset {
+  id: string;
+  ulid: string;
+  company?: Company;
+  asset_category?: AssetCategory;
+  code: string;
+  name: string;
+  asset_unit?: AssetUnit;
+  status: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/AssetAdjustment.ts b/web/src/types/models/AssetAdjustment.ts
new file mode 100644
index 000000000..f7d6d7f7a
--- /dev/null
+++ b/web/src/types/models/AssetAdjustment.ts
@@ -0,0 +1,19 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { AssetAdjustmentInItem } from './AssetAdjustmentInItem';
+import type { AssetAdjustmentOutItem } from './AssetAdjustmentOutItem';
+
+export interface AssetAdjustment {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  date: string;
+  remarks: string | null;
+  is_posted: boolean;
+  total_incoming_asset_qty: number;
+  total_outgoing_asset_qty: number;
+  in_items: AssetAdjustmentInItem[];
+  out_items: AssetAdjustmentOutItem[];
+}
diff --git a/web/src/types/models/AssetAdjustmentInItem.ts b/web/src/types/models/AssetAdjustmentInItem.ts
new file mode 100644
index 000000000..a2215f81f
--- /dev/null
+++ b/web/src/types/models/AssetAdjustmentInItem.ts
@@ -0,0 +1,11 @@
+import type { Asset } from './Asset';
+import type { AssetAdjustmentInItemSerial } from './AssetAdjustmentInItemSerial';
+
+export interface AssetAdjustmentInItem {
+  id: string;
+  ulid: string;
+  asset: Asset;
+  qty: number;
+  remarks: string | null;
+  serials: AssetAdjustmentInItemSerial[];
+}
diff --git a/web/src/types/models/AssetAdjustmentInItemSerial.ts b/web/src/types/models/AssetAdjustmentInItemSerial.ts
new file mode 100644
index 000000000..e4495ea65
--- /dev/null
+++ b/web/src/types/models/AssetAdjustmentInItemSerial.ts
@@ -0,0 +1,5 @@
+export interface AssetAdjustmentInItemSerial {
+  id: string;
+  ulid: string;
+  serial: string;
+}
diff --git a/web/src/types/models/AssetAdjustmentOutItem.ts b/web/src/types/models/AssetAdjustmentOutItem.ts
new file mode 100644
index 000000000..5242e8ead
--- /dev/null
+++ b/web/src/types/models/AssetAdjustmentOutItem.ts
@@ -0,0 +1,11 @@
+import type { Asset } from './Asset';
+import type { AssetAdjustmentOutItemSerial } from './AssetAdjustmentOutItemSerial';
+
+export interface AssetAdjustmentOutItem {
+  id: string;
+  ulid: string;
+  asset: Asset;
+  qty: number;
+  remarks: string | null;
+  serials: AssetAdjustmentOutItemSerial[];
+}
diff --git a/web/src/types/models/AssetAdjustmentOutItemSerial.ts b/web/src/types/models/AssetAdjustmentOutItemSerial.ts
new file mode 100644
index 000000000..265a08397
--- /dev/null
+++ b/web/src/types/models/AssetAdjustmentOutItemSerial.ts
@@ -0,0 +1,5 @@
+export interface AssetAdjustmentOutItemSerial {
+  id: string;
+  ulid: string;
+  serial: string;
+}
diff --git a/web/src/types/models/AssetCategory.ts b/web/src/types/models/AssetCategory.ts
new file mode 100644
index 000000000..1d3e55cf5
--- /dev/null
+++ b/web/src/types/models/AssetCategory.ts
@@ -0,0 +1,11 @@
+import type { Company } from './Company';
+
+export interface AssetCategory {
+  id: string;
+  ulid: string;
+  company?: Company;
+  code: string;
+  name: string;
+  estimated_useful_life_months: number | null;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/AssetPurchase.ts b/web/src/types/models/AssetPurchase.ts
new file mode 100644
index 000000000..60f73714c
--- /dev/null
+++ b/web/src/types/models/AssetPurchase.ts
@@ -0,0 +1,22 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { Supplier } from './Supplier';
+import type { AssetPurchaseItem } from './AssetPurchaseItem';
+
+export interface AssetPurchase {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  supplier: Supplier;
+  code: string;
+  date: string;
+  due_days: number;
+  remarks: string | null;
+  is_posted: boolean;
+  item_total: number;
+  additional_cost: number;
+  rounding: number;
+  amount_payable: number;
+  items: AssetPurchaseItem[];
+}
diff --git a/web/src/types/models/AssetPurchaseItem.ts b/web/src/types/models/AssetPurchaseItem.ts
new file mode 100644
index 000000000..d6cc39ca0
--- /dev/null
+++ b/web/src/types/models/AssetPurchaseItem.ts
@@ -0,0 +1,16 @@
+import type { Asset } from './Asset';
+import type { AssetPurchaseItemSerial } from './AssetPurchaseItemSerial';
+
+export interface AssetPurchaseItem {
+  id: string;
+  ulid: string;
+  asset: Asset;
+  qty: number;
+  unit_price: number;
+  subtotal: number;
+  allocated_additional_cost: number;
+  subtotal_after_additional_cost: number;
+  unit_acquisition_cost: number;
+  remarks: string | null;
+  serials: AssetPurchaseItemSerial[];
+}
diff --git a/web/src/types/models/AssetPurchaseItemSerial.ts b/web/src/types/models/AssetPurchaseItemSerial.ts
new file mode 100644
index 000000000..ffbba6ea4
--- /dev/null
+++ b/web/src/types/models/AssetPurchaseItemSerial.ts
@@ -0,0 +1,5 @@
+export interface AssetPurchaseItemSerial {
+  id: string;
+  ulid: string;
+  serial: string;
+}
diff --git a/web/src/types/models/AssetSale.ts b/web/src/types/models/AssetSale.ts
new file mode 100644
index 000000000..cb275a159
--- /dev/null
+++ b/web/src/types/models/AssetSale.ts
@@ -0,0 +1,21 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { Customer } from './Customer';
+import type { AssetSaleItem } from './AssetSaleItem';
+
+export interface AssetSale {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  customer: Customer;
+  code: string;
+  date: string;
+  due_days: number;
+  remarks: string | null;
+  is_posted: boolean;
+  item_total: number;
+  rounding: number;
+  amount_receivable: number;
+  items: AssetSaleItem[];
+}
diff --git a/web/src/types/models/AssetSaleItem.ts b/web/src/types/models/AssetSaleItem.ts
new file mode 100644
index 000000000..0a15fe2b9
--- /dev/null
+++ b/web/src/types/models/AssetSaleItem.ts
@@ -0,0 +1,13 @@
+import type { Asset } from './Asset';
+import type { AssetSaleItemSerial } from './AssetSaleItemSerial';
+
+export interface AssetSaleItem {
+  id: string;
+  ulid: string;
+  asset: Asset;
+  qty: number;
+  unit_price: number;
+  subtotal: number;
+  remarks: string | null;
+  serials: AssetSaleItemSerial[];
+}
diff --git a/web/src/types/models/AssetSaleItemSerial.ts b/web/src/types/models/AssetSaleItemSerial.ts
new file mode 100644
index 000000000..bbe39f857
--- /dev/null
+++ b/web/src/types/models/AssetSaleItemSerial.ts
@@ -0,0 +1,5 @@
+export interface AssetSaleItemSerial {
+  id: string;
+  ulid: string;
+  serial: string;
+}
diff --git a/web/src/types/models/AssetUnit.ts b/web/src/types/models/AssetUnit.ts
new file mode 100644
index 000000000..0e25c1efe
--- /dev/null
+++ b/web/src/types/models/AssetUnit.ts
@@ -0,0 +1,10 @@
+import type { Company } from './Company';
+
+export interface AssetUnit {
+  id: string;
+  ulid: string;
+  company?: Company;
+  code: string;
+  name: string;
+  description: string | null;
+}
diff --git a/web/src/types/models/Auth.ts b/web/src/types/models/Auth.ts
index eb514befa..b534bc1e7 100644
--- a/web/src/types/models/Auth.ts
+++ b/web/src/types/models/Auth.ts
@@ -1,5 +1,5 @@
-export interface LoginResponse {
-    data: {
-        two_factor: boolean
-    }
-}
\ No newline at end of file
+export interface LoginResponse {
+  data: {
+    two_factor: boolean;
+  };
+}
diff --git a/web/src/types/models/Branch.ts b/web/src/types/models/Branch.ts
index d43b2c95b..a856d0d4e 100644
--- a/web/src/types/models/Branch.ts
+++ b/web/src/types/models/Branch.ts
@@ -1,15 +1,15 @@
-import { Company } from "./Company"
-
-export interface Branch {
-    id: string,
-    ulid: string,
-    company: Company,
-    code: string,
-    name: string,
-    address: string,
-    city: string,
-    contact: string,
-    is_main: boolean,
-    remarks: string,
-    status: string,
-}
\ No newline at end of file
+import { Company } from './Company';
+
+export interface Branch {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+  address: string;
+  city: string;
+  contact: string;
+  is_main: boolean;
+  remarks: string;
+  status: string;
+}
diff --git a/web/src/types/models/Brand.ts b/web/src/types/models/Brand.ts
new file mode 100644
index 000000000..f663a8065
--- /dev/null
+++ b/web/src/types/models/Brand.ts
@@ -0,0 +1,9 @@
+import { Company } from './Company';
+
+export interface Brand {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+}
diff --git a/web/src/types/models/CapitalOpening.ts b/web/src/types/models/CapitalOpening.ts
new file mode 100644
index 000000000..6d25e0a35
--- /dev/null
+++ b/web/src/types/models/CapitalOpening.ts
@@ -0,0 +1,17 @@
+import { Branch } from './Branch';
+import { CashAccount } from './CashAccount';
+import { Company } from './Company';
+import { Investor } from './Investor';
+
+export interface CapitalOpening {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  date: string;
+  investor: Investor;
+  cash_account: CashAccount;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/CapitalTransaction.ts b/web/src/types/models/CapitalTransaction.ts
new file mode 100644
index 000000000..7688bef0a
--- /dev/null
+++ b/web/src/types/models/CapitalTransaction.ts
@@ -0,0 +1,19 @@
+import { Branch } from './Branch';
+import { CashAccount } from './CashAccount';
+import { Company } from './Company';
+import { Investor } from './Investor';
+import { CapitalTransactionType } from '../enums/CapitalTransactionType';
+
+export interface CapitalTransaction {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  date: string;
+  investor: Investor;
+  cash_account: CashAccount;
+  type: CapitalTransactionType;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/CashAccount.ts b/web/src/types/models/CashAccount.ts
new file mode 100644
index 000000000..f9660dd64
--- /dev/null
+++ b/web/src/types/models/CashAccount.ts
@@ -0,0 +1,15 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+
+export interface CashAccount {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  name: string;
+  is_bank: boolean;
+  is_active: boolean;
+  remarks: string;
+  remaining_balance?: number | null;
+}
diff --git a/web/src/types/models/CashTransfer.ts b/web/src/types/models/CashTransfer.ts
new file mode 100644
index 000000000..03fb6a86c
--- /dev/null
+++ b/web/src/types/models/CashTransfer.ts
@@ -0,0 +1,17 @@
+import { Branch } from './Branch';
+import { CashAccount } from './CashAccount';
+import { Company } from './Company';
+
+export interface CashTransfer {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  date: string;
+  source_cash_account: CashAccount;
+  destination_cash_account: CashAccount;
+  amount: number;
+  remarks: string | null;
+}
+
diff --git a/web/src/types/models/ChartOfAccount.ts b/web/src/types/models/ChartOfAccount.ts
new file mode 100644
index 000000000..c05133eaf
--- /dev/null
+++ b/web/src/types/models/ChartOfAccount.ts
@@ -0,0 +1,65 @@
+import { Company } from './Company';
+
+export type ChartOfAccountScope = 'system' | 'user';
+export type ChartOfAccountAccountType = 'asset' | 'liability' | 'equity' | 'income' | 'expense';
+export type ChartOfAccountNormalBalance = 'debit' | 'credit';
+
+export interface ChartOfAccountParent {
+  id: string;
+  ulid: string;
+  code: string;
+  name: string;
+}
+
+export interface ChartOfAccount {
+  id: string;
+  ulid: string;
+  company: Company;
+  parent?: ChartOfAccountParent | null;
+  scope: ChartOfAccountScope;
+  system_key?: string | null;
+  source_type?: string | null;
+  source_id?: number | null;
+  code: string;
+  name: string;
+  account_type: ChartOfAccountAccountType;
+  normal_balance: ChartOfAccountNormalBalance;
+  level: number;
+  is_group: boolean;
+  is_active: boolean;
+  remarks?: string | null;
+  children?: Array<ChartOfAccount>;
+}
+
+export const CHART_OF_ACCOUNT_SYSTEM_KEYS = [
+  'asset_root',
+  'asset_current',
+  'asset_current_cash_and_cash_equivalents',
+  'asset_current_account_receivable',
+  'asset_current_inventory',
+  'asset_current_prepaid_expense',
+  'asset_non_current',
+  'asset_non_current_fixed_asset',
+  'asset_non_current_accumulated_depreciation',
+  'asset_non_current_intangible_asset',
+  'liability_root',
+  'liability_account_payable',
+  'liability_tax_payable',
+  'equity_root',
+  'equity_owner_capital',
+  'equity_retained_earnings',
+  'income_root',
+  'income_sales',
+  'income_service',
+  'cogs_root',
+  'cogs_material_cost',
+  'cogs_direct_labor_cost',
+  'expense_root',
+  'expense_salary',
+  'expense_electricity',
+  'expense_rent',
+  'other_income_root',
+  'other_income_interest',
+  'other_expense_root',
+  'other_expense_interest',
+] as const;
diff --git a/web/src/types/models/Company.ts b/web/src/types/models/Company.ts
index 5c5bbd482..f7671a218 100644
--- a/web/src/types/models/Company.ts
+++ b/web/src/types/models/Company.ts
@@ -1,12 +1,12 @@
-import { Branch } from "./Branch";
-
-export interface Company {
-    id: string,
-    ulid: string,
-    code: string,
-    name: string,
-    address: string,
-    default: boolean,
-    status: string,
-    branches?: Array<Branch | null>,
-}
\ No newline at end of file
+import { Branch } from './Branch';
+
+export interface Company {
+  id: string;
+  ulid: string;
+  code: string;
+  name: string;
+  address: string;
+  default: boolean;
+  status: string;
+  branches?: Array<Branch | null>;
+}
diff --git a/web/src/types/models/ConfirmPassword.ts b/web/src/types/models/ConfirmPassword.ts
index c2506354e..d24d3ec2f 100644
--- a/web/src/types/models/ConfirmPassword.ts
+++ b/web/src/types/models/ConfirmPassword.ts
@@ -1,8 +1,8 @@
-export interface ConfirmPasswordStatusResponse {
-    confirmed: boolean
-}
-
-export interface ConfirmPasswordResponse {
-    message: string,
-    error?: Record<string, Array<string>>
-}
\ No newline at end of file
+export interface ConfirmPasswordStatusResponse {
+  confirmed: boolean;
+}
+
+export interface ConfirmPasswordResponse {
+  message: string;
+  error?: Record<string, Array<string>>;
+}
diff --git a/web/src/types/models/Customer.ts b/web/src/types/models/Customer.ts
new file mode 100644
index 000000000..244dc36fd
--- /dev/null
+++ b/web/src/types/models/Customer.ts
@@ -0,0 +1,24 @@
+import { Company } from './Company';
+import { CustomerGroup } from './CustomerGroup';
+import { User } from './User';
+
+export interface Customer {
+  id: string;
+  ulid: string;
+  company: Company;
+  user: User;
+  code: string;
+  is_member: boolean;
+  name: string;
+  group: CustomerGroup;
+  zone: string;
+  max_open_invoice: number;
+  max_outstanding_invoice: number;
+  max_invoice_age: number;
+  payment_term_type: string;
+  payment_term: number;
+  taxable_enterprise: boolean;
+  tax_id: string;
+  status: string;
+  remarks: string;
+}
diff --git a/web/src/types/models/CustomerGroup.ts b/web/src/types/models/CustomerGroup.ts
new file mode 100644
index 000000000..2a1cc54f1
--- /dev/null
+++ b/web/src/types/models/CustomerGroup.ts
@@ -0,0 +1,24 @@
+import { Company } from './Company';
+
+export interface CustomerGroup {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+  max_open_invoice: number;
+  max_outstanding_invoice: number;
+  max_invoice_age: number;
+  payment_term_type: string;
+  payment_term: number;
+  selling_point: number;
+  selling_point_multiple: number;
+  sell_at_cost: boolean;
+  price_markup_percent: number;
+  price_markup_nominal: number;
+  price_markdown_percent: number;
+  price_markdown_nominal: number;
+  rounding_type: string;
+  rounding_digit: number;
+  remarks: string;
+}
diff --git a/web/src/types/models/Debt.ts b/web/src/types/models/Debt.ts
new file mode 100644
index 000000000..9be9d0b7d
--- /dev/null
+++ b/web/src/types/models/Debt.ts
@@ -0,0 +1,30 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { DebtCategory } from './DebtCategory';
+import type { DebtCreditor } from './DebtCreditor';
+import type { DebtPayment } from './DebtPayment';
+import type { Supplier } from './Supplier';
+
+export interface Debt {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  code: string;
+  date: string;
+  category?: DebtCategory | null;
+  creditor?: DebtCreditor | null;
+  supplier?: Supplier | null;
+  cash_account?: CashAccount | null;
+  direct_amount_received: number;
+  opening_amount_due: number;
+  amount_total: number;
+  due_days: number;
+  amount_paid_by_cash_account: number;
+  amount_paid_by_stock_adjustment: number;
+  amount_due: number;
+  is_paid_off: boolean;
+  remarks: string | null;
+  payments?: DebtPayment[];
+}
diff --git a/web/src/types/models/DebtCategory.ts b/web/src/types/models/DebtCategory.ts
new file mode 100644
index 000000000..72379009d
--- /dev/null
+++ b/web/src/types/models/DebtCategory.ts
@@ -0,0 +1,10 @@
+import type { Company } from './Company';
+
+export interface DebtCategory {
+  id: string;
+  ulid: string;
+  company?: Company;
+  code: string;
+  name: string;
+  sequence: number;
+}
diff --git a/web/src/types/models/DebtCreditor.ts b/web/src/types/models/DebtCreditor.ts
new file mode 100644
index 000000000..995b84c21
--- /dev/null
+++ b/web/src/types/models/DebtCreditor.ts
@@ -0,0 +1,10 @@
+import { Company } from './Company';
+
+export interface DebtCreditor {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+  remarks: string;
+}
diff --git a/web/src/types/models/DebtPayment.ts b/web/src/types/models/DebtPayment.ts
new file mode 100644
index 000000000..dc7ac2c5c
--- /dev/null
+++ b/web/src/types/models/DebtPayment.ts
@@ -0,0 +1,17 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { Debt } from './Debt';
+
+export interface DebtPayment {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  debt?: Debt | null;
+  cash_account?: CashAccount | null;
+  code: string;
+  date: string;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/DropDownOption.ts b/web/src/types/models/DropDownOption.ts
index 318f9593b..79afb7151 100644
--- a/web/src/types/models/DropDownOption.ts
+++ b/web/src/types/models/DropDownOption.ts
@@ -1,4 +1,4 @@
-export interface DropDownOption {
-    code: number | string,
-    name: string,
-}
\ No newline at end of file
+export interface DropDownOption {
+  code: number | string;
+  name: string;
+}
diff --git a/web/src/types/models/Expense.ts b/web/src/types/models/Expense.ts
new file mode 100644
index 000000000..7a8f0d340
--- /dev/null
+++ b/web/src/types/models/Expense.ts
@@ -0,0 +1,28 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { ExpenseCategory } from './ExpenseCategory';
+import type { ExpenseImage } from './ExpenseImage';
+import type { ExpensePayment } from './ExpensePayment';
+
+export interface Expense {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  code: string;
+  date: string;
+  category?: ExpenseCategory | null;
+  paid_immediately_cash_account?: CashAccount | null;
+  amount_paid_immediately: number;
+  amount_payable: number;
+  due_days: number;
+  amount_payable_paid: number;
+  amount_payable_due: number;
+  is_amount_payable_paid_off: boolean;
+  amount_total: number;
+  remarks: string | null;
+  expense_images?: ExpenseImage[];
+  main_expense_image?: ExpenseImage | null;
+  payments?: ExpensePayment[];
+}
diff --git a/web/src/types/models/ExpenseCategory.ts b/web/src/types/models/ExpenseCategory.ts
new file mode 100644
index 000000000..ed04d6662
--- /dev/null
+++ b/web/src/types/models/ExpenseCategory.ts
@@ -0,0 +1,22 @@
+import { Company } from './Company';
+
+export interface ExpenseCategoryParent {
+  id: string;
+  ulid: string;
+  code: string;
+  display_code: string;
+  name: string;
+}
+
+export interface ExpenseCategory {
+  id: string;
+  ulid: string;
+  company: Company;
+  parent?: ExpenseCategoryParent | null;
+  category_type?: 'expense' | 'other_expense' | null;
+  code: string;
+  display_code: string;
+  name: string;
+  sequence: number;
+  children?: Array<ExpenseCategory>;
+}
diff --git a/web/src/types/models/ExpenseImage.ts b/web/src/types/models/ExpenseImage.ts
new file mode 100644
index 000000000..25e520e4b
--- /dev/null
+++ b/web/src/types/models/ExpenseImage.ts
@@ -0,0 +1,8 @@
+export interface ExpenseImage {
+  id: string;
+  expense_id?: string | null;
+  path: string;
+  hash: string;
+  url: string;
+  is_main: boolean;
+}
diff --git a/web/src/types/models/ExpensePayment.ts b/web/src/types/models/ExpensePayment.ts
new file mode 100644
index 000000000..73d695695
--- /dev/null
+++ b/web/src/types/models/ExpensePayment.ts
@@ -0,0 +1,17 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { Expense } from './Expense';
+
+export interface ExpensePayment {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  expense?: Expense | null;
+  cash_account?: CashAccount | null;
+  code: string;
+  date: string;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/FileUpload.ts b/web/src/types/models/FileUpload.ts
index f46d5647f..76cfb6b20 100644
--- a/web/src/types/models/FileUpload.ts
+++ b/web/src/types/models/FileUpload.ts
@@ -1,3 +1,3 @@
-export interface FileUpload {
-    url: string,
-}
\ No newline at end of file
+export interface FileUpload {
+  url: string;
+}
diff --git a/web/src/types/models/ForgotPassword.ts b/web/src/types/models/ForgotPassword.ts
index 2b9c2d24c..326cb531a 100644
--- a/web/src/types/models/ForgotPassword.ts
+++ b/web/src/types/models/ForgotPassword.ts
@@ -1,3 +1,3 @@
-export interface ForgotPassword {
-    message: string,
-}
\ No newline at end of file
+export interface ForgotPassword {
+  message: string;
+}
diff --git a/web/src/types/models/Income.ts b/web/src/types/models/Income.ts
new file mode 100644
index 000000000..a5947dbaa
--- /dev/null
+++ b/web/src/types/models/Income.ts
@@ -0,0 +1,28 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { IncomeCategory } from './IncomeCategory';
+import type { IncomeImage } from './IncomeImage';
+import type { IncomePayment } from './IncomePayment';
+
+export interface Income {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  code: string;
+  date: string;
+  category?: IncomeCategory | null;
+  paid_immediately_cash_account?: CashAccount | null;
+  amount_paid_immediately: number;
+  amount_receivable: number;
+  due_days: number;
+  amount_receivable_paid: number;
+  amount_receivable_due: number;
+  is_amount_receivable_paid_off: boolean;
+  amount_total: number;
+  remarks: string | null;
+  income_images?: IncomeImage[];
+  main_income_image?: IncomeImage | null;
+  payments?: IncomePayment[];
+}
diff --git a/web/src/types/models/IncomeCategory.ts b/web/src/types/models/IncomeCategory.ts
new file mode 100644
index 000000000..aa3b0453b
--- /dev/null
+++ b/web/src/types/models/IncomeCategory.ts
@@ -0,0 +1,21 @@
+import { Company } from './Company';
+
+export interface IncomeCategoryParent {
+  id: string;
+  ulid: string;
+  code: string;
+  display_code: string;
+  name: string;
+}
+
+export interface IncomeCategory {
+  id: string;
+  ulid: string;
+  company: Company;
+  parent?: IncomeCategoryParent | null;
+  code: string;
+  display_code: string;
+  name: string;
+  sequence: number;
+  children?: Array<IncomeCategory>;
+}
diff --git a/web/src/types/models/IncomeImage.ts b/web/src/types/models/IncomeImage.ts
new file mode 100644
index 000000000..fea216d58
--- /dev/null
+++ b/web/src/types/models/IncomeImage.ts
@@ -0,0 +1,8 @@
+export interface IncomeImage {
+  id: string;
+  income_id?: string | null;
+  path: string;
+  hash: string;
+  url: string;
+  is_main: boolean;
+}
diff --git a/web/src/types/models/IncomePayment.ts b/web/src/types/models/IncomePayment.ts
new file mode 100644
index 000000000..c6fb8cfcc
--- /dev/null
+++ b/web/src/types/models/IncomePayment.ts
@@ -0,0 +1,17 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { Income } from './Income';
+
+export interface IncomePayment {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  income?: Income | null;
+  cash_account?: CashAccount | null;
+  code: string;
+  date: string;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/Investor.ts b/web/src/types/models/Investor.ts
new file mode 100644
index 000000000..539168e3c
--- /dev/null
+++ b/web/src/types/models/Investor.ts
@@ -0,0 +1,10 @@
+import { Company } from './Company';
+
+export interface Investor {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+  remarks: string;
+}
diff --git a/web/src/types/models/JournalEntry.ts b/web/src/types/models/JournalEntry.ts
new file mode 100644
index 000000000..fca2eab5e
--- /dev/null
+++ b/web/src/types/models/JournalEntry.ts
@@ -0,0 +1,29 @@
+import type { Branch } from './Branch';
+import type { ChartOfAccount } from './ChartOfAccount';
+import type { Company } from './Company';
+
+export interface JournalEntryItem {
+  id: string;
+  journal_entry?: JournalEntry;
+  chart_of_account?: Pick<ChartOfAccount, 'id' | 'ulid' | 'code' | 'name' | 'account_type' | 'normal_balance'>;
+  sequence: number;
+  debit: number;
+  credit: number;
+  remarks: string | null;
+}
+
+export interface JournalEntry {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch | null;
+  code: string;
+  date: string;
+  source_type: string | null;
+  source_id: number | null;
+  reference_no: string | null;
+  total_debit: number;
+  total_credit: number;
+  remarks: string | null;
+  items: JournalEntryItem[];
+}
diff --git a/web/src/types/models/NotificationData.ts b/web/src/types/models/NotificationData.ts
index d96d331c3..cd0d0b808 100644
--- a/web/src/types/models/NotificationData.ts
+++ b/web/src/types/models/NotificationData.ts
@@ -1,4 +1,4 @@
 export interface NotificationData {
-    title: string,
-    content: string,
+  title: string;
+  content: string;
 }
diff --git a/web/src/types/models/Permission.ts b/web/src/types/models/Permission.ts
index 4cd60c506..42eb548e0 100644
--- a/web/src/types/models/Permission.ts
+++ b/web/src/types/models/Permission.ts
@@ -1,5 +1,4 @@
-
-export interface Permission {
-    id: string,
-    display_name: string,
-}
\ No newline at end of file
+export interface Permission {
+  id: string;
+  display_name: string;
+}
diff --git a/web/src/types/models/PrepaidExpense.ts b/web/src/types/models/PrepaidExpense.ts
new file mode 100644
index 000000000..d65f85699
--- /dev/null
+++ b/web/src/types/models/PrepaidExpense.ts
@@ -0,0 +1,29 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { ExpenseCategory } from './ExpenseCategory';
+import type { PrepaidExpenseImage } from './PrepaidExpenseImage';
+import type { PrepaidExpensePayment } from './PrepaidExpensePayment';
+
+export interface PrepaidExpense {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  code: string;
+  date: string;
+  category?: ExpenseCategory | null;
+  estimated_useful_life: number;
+  paid_immediately_cash_account?: CashAccount | null;
+  amount_paid_immediately: number;
+  amount_payable: number;
+  due_days: number;
+  amount_payable_paid: number;
+  amount_payable_due: number;
+  is_amount_payable_paid_off: boolean;
+  amount_total: number;
+  remarks: string | null;
+  prepaid_expense_images?: PrepaidExpenseImage[];
+  main_prepaid_expense_image?: PrepaidExpenseImage | null;
+  payments?: PrepaidExpensePayment[];
+}
diff --git a/web/src/types/models/PrepaidExpenseImage.ts b/web/src/types/models/PrepaidExpenseImage.ts
new file mode 100644
index 000000000..5c4484154
--- /dev/null
+++ b/web/src/types/models/PrepaidExpenseImage.ts
@@ -0,0 +1,8 @@
+export interface PrepaidExpenseImage {
+  id: string;
+  prepaid_expense_id?: string | null;
+  path: string;
+  hash: string;
+  url: string;
+  is_main: boolean;
+}
diff --git a/web/src/types/models/PrepaidExpensePayment.ts b/web/src/types/models/PrepaidExpensePayment.ts
new file mode 100644
index 000000000..dcc816311
--- /dev/null
+++ b/web/src/types/models/PrepaidExpensePayment.ts
@@ -0,0 +1,17 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { PrepaidExpense } from './PrepaidExpense';
+
+export interface PrepaidExpensePayment {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  prepaid_expense?: PrepaidExpense | null;
+  cash_account?: CashAccount | null;
+  code: string;
+  date: string;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/PrepaidIncome.ts b/web/src/types/models/PrepaidIncome.ts
new file mode 100644
index 000000000..45dec7010
--- /dev/null
+++ b/web/src/types/models/PrepaidIncome.ts
@@ -0,0 +1,29 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { IncomeCategory } from './IncomeCategory';
+import type { PrepaidIncomeImage } from './PrepaidIncomeImage';
+import type { PrepaidIncomePayment } from './PrepaidIncomePayment';
+
+export interface PrepaidIncome {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  code: string;
+  date: string;
+  category?: IncomeCategory | null;
+  estimated_useful_life: number;
+  paid_immediately_cash_account?: CashAccount | null;
+  amount_paid_immediately: number;
+  amount_receivable: number;
+  due_days: number;
+  amount_receivable_paid: number;
+  amount_receivable_due: number;
+  is_amount_receivable_paid_off: boolean;
+  amount_total: number;
+  remarks: string | null;
+  prepaid_income_images?: PrepaidIncomeImage[];
+  main_prepaid_income_image?: PrepaidIncomeImage | null;
+  payments?: PrepaidIncomePayment[];
+}
diff --git a/web/src/types/models/PrepaidIncomeImage.ts b/web/src/types/models/PrepaidIncomeImage.ts
new file mode 100644
index 000000000..29024b274
--- /dev/null
+++ b/web/src/types/models/PrepaidIncomeImage.ts
@@ -0,0 +1,8 @@
+export interface PrepaidIncomeImage {
+  id: string;
+  prepaid_income_id?: string | null;
+  path: string;
+  hash: string;
+  url: string;
+  is_main: boolean;
+}
diff --git a/web/src/types/models/PrepaidIncomePayment.ts b/web/src/types/models/PrepaidIncomePayment.ts
new file mode 100644
index 000000000..e7e7a6d5b
--- /dev/null
+++ b/web/src/types/models/PrepaidIncomePayment.ts
@@ -0,0 +1,17 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { PrepaidIncome } from './PrepaidIncome';
+
+export interface PrepaidIncomePayment {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  prepaid_income?: PrepaidIncome | null;
+  cash_account?: CashAccount | null;
+  code: string;
+  date: string;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/Product.ts b/web/src/types/models/Product.ts
new file mode 100644
index 000000000..a312ea0a9
--- /dev/null
+++ b/web/src/types/models/Product.ts
@@ -0,0 +1,27 @@
+import { Company } from './Company';
+import { Brand } from './Brand';
+import { ProductCategory } from './ProductCategory';
+import { ProductUnit } from './ProductUnit';
+import { ProductImage } from './ProductImage';
+import { VatProfile } from './VatProfile';
+
+export interface Product {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  category: ProductCategory;
+  brand: Brand | null;
+  default_vat_profile?: VatProfile | null;
+  name: string;
+  is_price_include_vat: boolean;
+  is_use_serial_number: boolean;
+  is_expirable: boolean;
+  remarks: string;
+  type: number;
+  status: string;
+  remaining_stock_base_unit?: number;
+  product_units: ProductUnit[];
+  product_images?: ProductImage[];
+  main_product_image?: ProductImage | null;
+}
diff --git a/web/src/types/models/ProductCategory.ts b/web/src/types/models/ProductCategory.ts
new file mode 100644
index 000000000..3350149dd
--- /dev/null
+++ b/web/src/types/models/ProductCategory.ts
@@ -0,0 +1,10 @@
+import { Company } from './Company';
+
+export interface ProductCategory {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+  type: number;
+}
diff --git a/web/src/types/models/ProductImage.ts b/web/src/types/models/ProductImage.ts
new file mode 100644
index 000000000..d50980cda
--- /dev/null
+++ b/web/src/types/models/ProductImage.ts
@@ -0,0 +1,8 @@
+export interface ProductImage {
+  id: string;
+  product_id?: string | null;
+  path: string;
+  hash: string;
+  url: string;
+  is_main: boolean;
+}
diff --git a/web/src/types/models/ProductUnit.ts b/web/src/types/models/ProductUnit.ts
new file mode 100644
index 000000000..6acff8885
--- /dev/null
+++ b/web/src/types/models/ProductUnit.ts
@@ -0,0 +1,19 @@
+import { Company } from './Company';
+import { Product } from './Product';
+import { Unit } from './Unit';
+
+export interface ProductUnit {
+  id: string;
+  ulid: string;
+  company: Company;
+  product: Product;
+  code: string;
+  is_manufacturer_sku: boolean;
+  unit: Unit;
+  price: number;
+  is_base: boolean;
+  conversion_value: number;
+  is_primary_unit: boolean;
+  point: number;
+  remarks: string;
+}
diff --git a/web/src/types/models/Profile.ts b/web/src/types/models/Profile.ts
index ac220453f..eb8a60e5d 100644
--- a/web/src/types/models/Profile.ts
+++ b/web/src/types/models/Profile.ts
@@ -1,13 +1,13 @@
-export interface Profile {
-    first_name: string,
-    last_name: string,
-    address: string,
-    city: string,
-    postal_code: string,
-    country: string,
-    status: string,
-    tax_id: number,
-    ic_num: number,
-    img_path: string,
-    remarks: string,
-}
+export interface Profile {
+  first_name: string;
+  last_name: string;
+  address: string;
+  city: string;
+  postal_code: string;
+  country: string;
+  status: string;
+  tax_id: number;
+  ic_num: number;
+  img_path: string;
+  remarks: string;
+}
diff --git a/web/src/types/models/Purchase.ts b/web/src/types/models/Purchase.ts
new file mode 100644
index 000000000..7384ba5b3
--- /dev/null
+++ b/web/src/types/models/Purchase.ts
@@ -0,0 +1,51 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { PurchaseAdditionalCost } from './PurchaseAdditionalCost';
+import type { PurchaseGlobalDiscount } from './PurchaseGlobalDiscount';
+import type { PurchaseItem } from './PurchaseItem';
+import type { PurchaseOrder } from './PurchaseOrder';
+import type { PurchaseReceipt } from './PurchaseReceipt';
+import type { Supplier } from './Supplier';
+
+export interface Purchase {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  code: string;
+  date: string;
+  due_days: number;
+  supplier?: Supplier | null;
+  purchase_order?: PurchaseOrder | null;
+  receipt_mode?: string | null;
+  tax_invoice_number?: string | null;
+  tax_invoice_vat_base?: string | null;
+  tax_invoice_vat?: string | null;
+  remarks?: string | null;
+  is_posted: boolean;
+  item_total_before_global_discount?: string | null;
+  global_discount?: string | null;
+  item_total_after_global_discount?: string | null;
+  vat_base?: string | null;
+  vat?: string | null;
+  item_total_after_vat?: string | null;
+  additional_cost?: string | null;
+  rounding?: string | null;
+  amount_payable?: string | null;
+  amount_paid_by_purchase_order_down_payment?: string | null;
+  amount_paid_by_purchase_return?: string | null;
+  amount_paid_total?: string | null;
+  amount_due?: string | null;
+  is_paid_off: boolean;
+  progress_status?: string | null;
+  item_total_count: number;
+  item_matched_count: number;
+  item_less_count: number;
+  item_more_count: number;
+  item_unlinked_count: number;
+  items?: PurchaseItem[];
+  direct_receipt?: PurchaseReceipt | null;
+  manual_receipts?: PurchaseReceipt[];
+  global_discounts?: PurchaseGlobalDiscount[];
+  additional_costs?: PurchaseAdditionalCost[];
+}
diff --git a/web/src/types/models/PurchaseAdditionalCost.ts b/web/src/types/models/PurchaseAdditionalCost.ts
new file mode 100644
index 000000000..1702f7c74
--- /dev/null
+++ b/web/src/types/models/PurchaseAdditionalCost.ts
@@ -0,0 +1,27 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { Purchase } from './Purchase';
+import type { PurchaseAdditionalCostCategory } from './PurchaseAdditionalCostCategory';
+import type { PurchaseAdditionalCostPayment } from './PurchaseAdditionalCostPayment';
+
+export interface PurchaseAdditionalCost {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase?: Purchase;
+  code: string;
+  date: string;
+  due_days: number;
+  category?: PurchaseAdditionalCostCategory;
+  paid_immediately_cash_account?: CashAccount | null;
+  amount_paid_immediately: number;
+  amount_payable: number;
+  amount_payable_paid: number;
+  amount_payable_due: number;
+  is_amount_payable_paid_off: boolean;
+  amount_total: number;
+  remarks: string | null;
+  payments?: PurchaseAdditionalCostPayment[];
+}
diff --git a/web/src/types/models/PurchaseAdditionalCostCategory.ts b/web/src/types/models/PurchaseAdditionalCostCategory.ts
new file mode 100644
index 000000000..6c945e6ba
--- /dev/null
+++ b/web/src/types/models/PurchaseAdditionalCostCategory.ts
@@ -0,0 +1,9 @@
+import { Company } from './Company';
+
+export interface PurchaseAdditionalCostCategory {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+}
diff --git a/web/src/types/models/PurchaseAdditionalCostPayment.ts b/web/src/types/models/PurchaseAdditionalCostPayment.ts
new file mode 100644
index 000000000..9ad70733c
--- /dev/null
+++ b/web/src/types/models/PurchaseAdditionalCostPayment.ts
@@ -0,0 +1,17 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { PurchaseAdditionalCost } from './PurchaseAdditionalCost';
+
+export interface PurchaseAdditionalCostPayment {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase_additional_cost?: PurchaseAdditionalCost;
+  cash_account?: CashAccount | null;
+  code: string;
+  date: string;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/PurchaseGlobalDiscount.ts b/web/src/types/models/PurchaseGlobalDiscount.ts
new file mode 100644
index 000000000..650a1c5e0
--- /dev/null
+++ b/web/src/types/models/PurchaseGlobalDiscount.ts
@@ -0,0 +1,14 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { Purchase } from './Purchase';
+
+export interface PurchaseGlobalDiscount {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase?: Purchase;
+  sequence: number;
+  discount_type?: string | null;
+  discount_value?: string | null;
+}
diff --git a/web/src/types/models/PurchaseItem.ts b/web/src/types/models/PurchaseItem.ts
new file mode 100644
index 000000000..bb4989b68
--- /dev/null
+++ b/web/src/types/models/PurchaseItem.ts
@@ -0,0 +1,67 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { ProductUnit } from './ProductUnit';
+import type { Purchase } from './Purchase';
+import type { VatProfile } from './VatProfile';
+
+export interface PurchaseItemProductUnitPriceDiscount {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase_item?: PurchaseItem;
+  sequence: number;
+  discount_type?: string | null;
+  discount_value?: string | null;
+}
+
+export interface PurchaseItemSubtotalDiscount {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase_item?: PurchaseItem;
+  sequence: number;
+  discount_type?: string | null;
+  discount_value?: string | null;
+}
+
+export interface PurchaseItem {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase?: Purchase;
+  product_unit?: ProductUnit | null;
+  vat_profile?: VatProfile | null;
+  product_unit_price_discounts?: PurchaseItemProductUnitPriceDiscount[];
+  subtotal_discounts?: PurchaseItemSubtotalDiscount[];
+  qty?: string | null;
+  product_unit_conversion_value?: string | null;
+  product_unit_qty_base?: string | null;
+  qty_received_base?: string | null;
+  qty_outstanding_base?: string | null;
+  qty_excess_base?: string | null;
+  product_unit_price?: string | null;
+  product_unit_is_price_include_vat: boolean;
+  price_discount?: string | null;
+  price_after_discount?: string | null;
+  subtotal?: string | null;
+  subtotal_discount?: string | null;
+  subtotal_after_discount?: string | null;
+  global_discount?: string | null;
+  subtotal_after_global_discount?: string | null;
+  vat_rate?: string | null;
+  vat_base_numerator?: number | null;
+  vat_base_denominator?: number | null;
+  vat_base?: string | null;
+  vat?: string | null;
+  subtotal_after_vat?: string | null;
+  additional_cost?: string | null;
+  rounding?: string | null;
+  amount_payable?: string | null;
+  cogs?: string | null;
+  total_cogs?: string | null;
+  base_unit_cogs?: string | null;
+  remarks?: string | null;
+}
diff --git a/web/src/types/models/PurchaseOrder.ts b/web/src/types/models/PurchaseOrder.ts
new file mode 100644
index 000000000..c4bbf3a42
--- /dev/null
+++ b/web/src/types/models/PurchaseOrder.ts
@@ -0,0 +1,50 @@
+import { Branch } from './Branch';
+import { Company } from './Company';
+import type { PurchaseOrderDownPayment } from './PurchaseOrderDownPayment';
+import type { PurchaseOrderDownPaymentRefund } from './PurchaseOrderDownPaymentRefund';
+import type { PurchaseOrderItem } from './PurchaseOrderItem';
+import { Supplier } from './Supplier';
+
+export interface PurchaseOrderGlobalDiscount {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseOrder {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  date: string;
+  due_days: number;
+  supplier?: Supplier | null;
+  remarks: string | null;
+  item_total_before_global_discount: number;
+  global_discount: number;
+  item_total_after_global_discount: number;
+  vat_base: number;
+  vat: number;
+  item_total_after_vat: number;
+  rounding: number;
+  amount_payable: number;
+  amount_paid_down_payment: number;
+  amount_allocated_down_payment: number;
+  amount_refunded_down_payment: number;
+  amount_available_down_payment: number;
+  progress_status: string;
+  item_total_count: number;
+  item_matched_count: number;
+  item_less_count: number;
+  item_more_count: number;
+  item_unlinked_count: number;
+  global_discounts: PurchaseOrderGlobalDiscount[];
+  items: PurchaseOrderItem[];
+  down_payments: PurchaseOrderDownPayment[];
+  refunded_down_payments: PurchaseOrderDownPaymentRefund[];
+}
diff --git a/web/src/types/models/PurchaseOrderDownPayment.ts b/web/src/types/models/PurchaseOrderDownPayment.ts
new file mode 100644
index 000000000..7c801eefa
--- /dev/null
+++ b/web/src/types/models/PurchaseOrderDownPayment.ts
@@ -0,0 +1,18 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { PurchaseOrder } from './PurchaseOrder';
+
+export interface PurchaseOrderDownPayment {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase_order?: PurchaseOrder;
+  code: string;
+  date: string;
+  cash_account?: CashAccount | null;
+  amount: number;
+  amount_allocated: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/PurchaseOrderDownPaymentRefund.ts b/web/src/types/models/PurchaseOrderDownPaymentRefund.ts
new file mode 100644
index 000000000..3d48da704
--- /dev/null
+++ b/web/src/types/models/PurchaseOrderDownPaymentRefund.ts
@@ -0,0 +1,17 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { PurchaseOrder } from './PurchaseOrder';
+
+export interface PurchaseOrderDownPaymentRefund {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase_order?: PurchaseOrder;
+  code: string;
+  date: string;
+  cash_account?: CashAccount | null;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/PurchaseOrderItem.ts b/web/src/types/models/PurchaseOrderItem.ts
new file mode 100644
index 000000000..1a2c35a05
--- /dev/null
+++ b/web/src/types/models/PurchaseOrderItem.ts
@@ -0,0 +1,64 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { ProductUnit } from './ProductUnit';
+import type { PurchaseOrder } from './PurchaseOrder';
+import type { VatProfile } from './VatProfile';
+
+export interface PurchaseOrderItemPriceDiscount {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseOrderItemSubtotalDiscount {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseOrderItem {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase_order?: PurchaseOrder;
+  qty: number;
+  product_unit: ProductUnit;
+  product_unit_conversion_value: number;
+  product_unit_qty_base: number;
+  qty_purchased_base: number;
+  qty_outstanding_base: number;
+  qty_excess_base: number;
+  product_unit_price: number;
+  price_discount: number;
+  product_unit_price_discounts: PurchaseOrderItemPriceDiscount[];
+  price_after_discount: number;
+  subtotal: number;
+  subtotal_discount: number;
+  subtotal_discounts: PurchaseOrderItemSubtotalDiscount[];
+  subtotal_after_discount: number;
+  global_discount: number;
+  subtotal_after_global_discount: number;
+  product_unit_is_price_include_vat: boolean;
+  vat_profile?: VatProfile | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  vat_base: number;
+  vat: number;
+  subtotal_after_vat: number;
+  rounding: number;
+  amount_payable: number;
+  cogs: number;
+  total_cogs: number;
+  base_unit_cogs: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/models/PurchaseReceipt.ts b/web/src/types/models/PurchaseReceipt.ts
new file mode 100644
index 000000000..e0f819ba9
--- /dev/null
+++ b/web/src/types/models/PurchaseReceipt.ts
@@ -0,0 +1,23 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { Purchase } from './Purchase';
+import type { PurchaseReceiptItem } from './PurchaseReceiptItem';
+import type { Supplier } from './Supplier';
+import type { Warehouse } from './Warehouse';
+
+export interface PurchaseReceipt {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  supplier?: Supplier | null;
+  purchase?: Purchase | null;
+  code: string;
+  date: string;
+  is_linked_to_purchase: boolean;
+  is_from_direct_purchase: boolean;
+  warehouse?: Warehouse | null;
+  remarks?: string | null;
+  is_posted: boolean;
+  items?: PurchaseReceiptItem[];
+}
diff --git a/web/src/types/models/PurchaseReceiptItem.ts b/web/src/types/models/PurchaseReceiptItem.ts
new file mode 100644
index 000000000..c2658b55f
--- /dev/null
+++ b/web/src/types/models/PurchaseReceiptItem.ts
@@ -0,0 +1,20 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { ProductUnit } from './ProductUnit';
+import type { PurchaseReceipt } from './PurchaseReceipt';
+import type { PurchaseReceiptItemSerial } from './PurchaseReceiptItemSerial';
+
+export interface PurchaseReceiptItem {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase_receipt?: PurchaseReceipt;
+  has_purchase_item_product: boolean;
+  qty?: string | null;
+  product_unit?: ProductUnit | null;
+  product_unit_conversion_value?: string | null;
+  product_unit_qty_base?: string | null;
+  remarks?: string | null;
+  serials?: PurchaseReceiptItemSerial[];
+}
diff --git a/web/src/types/models/PurchaseReceiptItemSerial.ts b/web/src/types/models/PurchaseReceiptItemSerial.ts
new file mode 100644
index 000000000..4de3a66d8
--- /dev/null
+++ b/web/src/types/models/PurchaseReceiptItemSerial.ts
@@ -0,0 +1,14 @@
+import type { Branch } from './Branch';
+import type { Company } from './Company';
+import type { PurchaseReceipt } from './PurchaseReceipt';
+import type { PurchaseReceiptItem } from './PurchaseReceiptItem';
+
+export interface PurchaseReceiptItemSerial {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  purchase_receipt?: PurchaseReceipt;
+  purchase_receipt_item?: PurchaseReceiptItem;
+  serial: string;
+}
diff --git a/web/src/types/models/Receivable.ts b/web/src/types/models/Receivable.ts
new file mode 100644
index 000000000..287c5a12c
--- /dev/null
+++ b/web/src/types/models/Receivable.ts
@@ -0,0 +1,29 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { Customer } from './Customer';
+import type { ReceivableCategory } from './ReceivableCategory';
+import type { ReceivablePayment } from './ReceivablePayment';
+
+export interface Receivable {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  code: string;
+  date: string;
+  category?: ReceivableCategory | null;
+  customer?: Customer | null;
+  cash_account?: CashAccount | null;
+  direct_amount_received: number;
+  opening_amount_due: number;
+  amount_total: number;
+  due_days: number;
+  amount_paid_by_cash_account: number;
+  amount_paid_by_stock_adjustment: number;
+  amount_due: number;
+  is_paid_off: boolean;
+  remarks: string | null;
+  payments?: ReceivablePayment[];
+}
+
diff --git a/web/src/types/models/ReceivableCategory.ts b/web/src/types/models/ReceivableCategory.ts
new file mode 100644
index 000000000..d4e457d25
--- /dev/null
+++ b/web/src/types/models/ReceivableCategory.ts
@@ -0,0 +1,10 @@
+import type { Company } from './Company';
+
+export interface ReceivableCategory {
+  id: string;
+  ulid: string;
+  company?: Company;
+  code: string;
+  name: string;
+  sequence: number;
+}
diff --git a/web/src/types/models/ReceivablePayment.ts b/web/src/types/models/ReceivablePayment.ts
new file mode 100644
index 000000000..5f7f13f24
--- /dev/null
+++ b/web/src/types/models/ReceivablePayment.ts
@@ -0,0 +1,18 @@
+import type { Branch } from './Branch';
+import type { CashAccount } from './CashAccount';
+import type { Company } from './Company';
+import type { Receivable } from './Receivable';
+
+export interface ReceivablePayment {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  receivable?: Receivable | null;
+  cash_account?: CashAccount | null;
+  code: string;
+  date: string;
+  amount: number;
+  remarks: string | null;
+}
+
diff --git a/web/src/types/models/ResetPassword.ts b/web/src/types/models/ResetPassword.ts
index efdcd46ad..fee10c911 100644
--- a/web/src/types/models/ResetPassword.ts
+++ b/web/src/types/models/ResetPassword.ts
@@ -1,3 +1,3 @@
-export interface ResetPassword {
-    message: string,
-}
\ No newline at end of file
+export interface ResetPassword {
+  message: string;
+}
diff --git a/web/src/types/models/Role.ts b/web/src/types/models/Role.ts
index 98f8fe90b..b2b7e26bc 100644
--- a/web/src/types/models/Role.ts
+++ b/web/src/types/models/Role.ts
@@ -1,7 +1,7 @@
-import { Permission } from "./Permission";
-
-export interface Role {
-    id: string,
-    display_name: string,
-    permissions?: Array<Permission>,
-}
\ No newline at end of file
+import { Permission } from './Permission';
+
+export interface Role {
+  id: string;
+  display_name: string;
+  permissions?: Array<Permission>;
+}
diff --git a/web/src/types/models/SearchResult.ts b/web/src/types/models/SearchResult.ts
index 194fe9dcf..ee5d9733c 100644
--- a/web/src/types/models/SearchResult.ts
+++ b/web/src/types/models/SearchResult.ts
@@ -1,5 +1,5 @@
 export interface SearchResult {
-    category: string,
-    text: string,
-    url: string,
-}
\ No newline at end of file
+  category: string;
+  text: string;
+  url: string;
+}
diff --git a/web/src/types/models/Setting.ts b/web/src/types/models/Setting.ts
index 5469f563e..d45686c97 100644
--- a/web/src/types/models/Setting.ts
+++ b/web/src/types/models/Setting.ts
@@ -1,5 +1,5 @@
-export interface Setting {
-    theme: string,
-    date_format: string,
-    time_format: string,
-}
\ No newline at end of file
+export interface Setting {
+  theme: string;
+  date_format: string;
+  time_format: string;
+}
diff --git a/web/src/types/models/StockAdjustment.ts b/web/src/types/models/StockAdjustment.ts
new file mode 100644
index 000000000..7d04ca480
--- /dev/null
+++ b/web/src/types/models/StockAdjustment.ts
@@ -0,0 +1,25 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+import { Warehouse } from './Warehouse';
+import { StockAdjustmentCategory } from './StockAdjustmentCategory';
+import { StockAdjustmentInItem } from './StockAdjustmentInItem';
+import { StockAdjustmentOutItem } from './StockAdjustmentOutItem';
+
+export interface StockAdjustment {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  date: string;
+  category: StockAdjustmentCategory;
+  in_warehouse: Warehouse | null;
+  out_warehouse: Warehouse | null;
+  remarks: string | null;
+  is_posted: boolean;
+  total_incoming_item_qty: number;
+  total_incoming_item_cogs: number;
+  total_outgoing_item_qty: number;
+  in_items: StockAdjustmentInItem[];
+  out_items: StockAdjustmentOutItem[];
+}
diff --git a/web/src/types/models/StockAdjustmentCategory.ts b/web/src/types/models/StockAdjustmentCategory.ts
new file mode 100644
index 000000000..b22e230d9
--- /dev/null
+++ b/web/src/types/models/StockAdjustmentCategory.ts
@@ -0,0 +1,9 @@
+import { Company } from './Company';
+
+export interface StockAdjustmentCategory {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+}
diff --git a/web/src/types/models/StockAdjustmentInItem.ts b/web/src/types/models/StockAdjustmentInItem.ts
new file mode 100644
index 000000000..b5ba76668
--- /dev/null
+++ b/web/src/types/models/StockAdjustmentInItem.ts
@@ -0,0 +1,22 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+import { StockAdjustment } from './StockAdjustment';
+import { ProductUnit } from './ProductUnit';
+import { StockAdjustmentInItemSerial } from './StockAdjustmentInItemSerial';
+
+export interface StockAdjustmentInItem {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  stock_adjustment: StockAdjustment;
+  qty: number;
+  product_unit: ProductUnit;
+  product_unit_conversion_value: number;
+  product_unit_qty_base: number;
+  product_unit_cogs: number;
+  product_unit_total_cogs: number;
+  product_unit_base_unit_cogs: number;
+  remarks: string | null;
+  serials: StockAdjustmentInItemSerial[];
+}
diff --git a/web/src/types/models/StockAdjustmentInItemSerial.ts b/web/src/types/models/StockAdjustmentInItemSerial.ts
new file mode 100644
index 000000000..c5d4b0375
--- /dev/null
+++ b/web/src/types/models/StockAdjustmentInItemSerial.ts
@@ -0,0 +1,14 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+import { StockAdjustment } from './StockAdjustment';
+import { StockAdjustmentInItem } from './StockAdjustmentInItem';
+
+export interface StockAdjustmentInItemSerial {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  stock_adjustment?: StockAdjustment;
+  stock_adjustment_in_item?: StockAdjustmentInItem;
+  serial: string;
+}
diff --git a/web/src/types/models/StockAdjustmentOutItem.ts b/web/src/types/models/StockAdjustmentOutItem.ts
new file mode 100644
index 000000000..c16961cf1
--- /dev/null
+++ b/web/src/types/models/StockAdjustmentOutItem.ts
@@ -0,0 +1,19 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+import { StockAdjustment } from './StockAdjustment';
+import { ProductUnit } from './ProductUnit';
+import { StockAdjustmentOutItemSerial } from './StockAdjustmentOutItemSerial';
+
+export interface StockAdjustmentOutItem {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  stock_adjustment: StockAdjustment;
+  qty: number;
+  product_unit: ProductUnit;
+  product_unit_conversion_value: number;
+  product_unit_qty_base: number;
+  remarks: string | null;
+  serials: StockAdjustmentOutItemSerial[];
+}
diff --git a/web/src/types/models/StockAdjustmentOutItemSerial.ts b/web/src/types/models/StockAdjustmentOutItemSerial.ts
new file mode 100644
index 000000000..49263139e
--- /dev/null
+++ b/web/src/types/models/StockAdjustmentOutItemSerial.ts
@@ -0,0 +1,14 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+import { StockAdjustment } from './StockAdjustment';
+import { StockAdjustmentOutItem } from './StockAdjustmentOutItem';
+
+export interface StockAdjustmentOutItemSerial {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  stock_adjustment?: StockAdjustment;
+  stock_adjustment_out_item?: StockAdjustmentOutItem;
+  serial: string;
+}
diff --git a/web/src/types/models/StockTransfer.ts b/web/src/types/models/StockTransfer.ts
new file mode 100644
index 000000000..9d33bb92e
--- /dev/null
+++ b/web/src/types/models/StockTransfer.ts
@@ -0,0 +1,18 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+import { Warehouse } from './Warehouse';
+import { StockTransferItem } from './StockTransferItem';
+
+export interface StockTransfer {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  date: string;
+  source_warehouse: Warehouse | null;
+  destination_warehouse: Warehouse | null;
+  remarks: string | null;
+  is_posted: boolean;
+  items: StockTransferItem[];
+}
diff --git a/web/src/types/models/StockTransferItem.ts b/web/src/types/models/StockTransferItem.ts
new file mode 100644
index 000000000..22ef90119
--- /dev/null
+++ b/web/src/types/models/StockTransferItem.ts
@@ -0,0 +1,19 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+import { StockTransfer } from './StockTransfer';
+import { ProductUnit } from './ProductUnit';
+import { StockTransferItemSerial } from './StockTransferItemSerial';
+
+export interface StockTransferItem {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  stock_transfer: StockTransfer;
+  qty: number;
+  product_unit: ProductUnit;
+  product_unit_conversion_value: number;
+  product_unit_qty_base: number;
+  remarks: string | null;
+  serials: StockTransferItemSerial[];
+}
diff --git a/web/src/types/models/StockTransferItemSerial.ts b/web/src/types/models/StockTransferItemSerial.ts
new file mode 100644
index 000000000..2c0ab94a8
--- /dev/null
+++ b/web/src/types/models/StockTransferItemSerial.ts
@@ -0,0 +1,14 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+import { StockTransfer } from './StockTransfer';
+import { StockTransferItem } from './StockTransferItem';
+
+export interface StockTransferItemSerial {
+  id: string;
+  ulid: string;
+  company?: Company;
+  branch?: Branch;
+  stock_transfer?: StockTransfer;
+  stock_transfer_item?: StockTransferItem;
+  serial: string;
+}
diff --git a/web/src/types/models/Supplier.ts b/web/src/types/models/Supplier.ts
new file mode 100644
index 000000000..938c97fd4
--- /dev/null
+++ b/web/src/types/models/Supplier.ts
@@ -0,0 +1,18 @@
+import { Company } from './Company';
+import { PaymentTermType } from '../enums/PaymentTermType';
+
+export interface Supplier {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+  address: string;
+  city: string;
+  payment_term_type: PaymentTermType;
+  payment_term: number;
+  taxable_enterprise: boolean;
+  tax_id: string;
+  status: string;
+  remarks: string;
+}
diff --git a/web/src/types/models/TwoFactorAuthentication.ts b/web/src/types/models/TwoFactorAuthentication.ts
index b6e2eb5a6..3832025dd 100644
--- a/web/src/types/models/TwoFactorAuthentication.ts
+++ b/web/src/types/models/TwoFactorAuthentication.ts
@@ -1,13 +1,13 @@
-export interface TwoFactorResponse {
-    message: string,
-    error?: Record<string, Array<string>>
-}
-
-export interface QRCode {
-    svg: string,
-    url: string,
-}
-
-export interface SecretKeyResponse {
-    secretKey: string
-}
\ No newline at end of file
+export interface TwoFactorResponse {
+  message: string;
+  error?: Record<string, Array<string>>;
+}
+
+export interface QRCode {
+  svg: string;
+  url: string;
+}
+
+export interface SecretKeyResponse {
+  secretKey: string;
+}
diff --git a/web/src/types/models/Unit.ts b/web/src/types/models/Unit.ts
new file mode 100644
index 000000000..10b0241cd
--- /dev/null
+++ b/web/src/types/models/Unit.ts
@@ -0,0 +1,11 @@
+import { Company } from './Company';
+
+export interface Unit {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+  description: string;
+  type: string | number;
+}
diff --git a/web/src/types/models/User.ts b/web/src/types/models/User.ts
index 2ce197933..db851273b 100644
--- a/web/src/types/models/User.ts
+++ b/web/src/types/models/User.ts
@@ -1,16 +1,16 @@
-import { Company } from "./Company";
-import { Profile } from "./Profile";
-import { Role } from "./Role";
-import { Setting } from "./Setting";
-
-export interface User {
-    id: string,
-    ulid: string,
-    name: string,
-    email: string,
-    email_verified: boolean,
-    profile: Profile,
-    roles: Array<Role>,
-    companies: Array<Company>,
-    settings: Setting
-}
\ No newline at end of file
+import { Company } from './Company';
+import { Profile } from './Profile';
+import { Role } from './Role';
+import { Setting } from './Setting';
+
+export interface User {
+  id: string;
+  ulid: string;
+  name: string;
+  email: string;
+  email_verified: boolean;
+  profile: Profile;
+  roles: Array<Role>;
+  companies: Array<Company>;
+  settings: Setting;
+}
diff --git a/web/src/types/models/UserProfile.ts b/web/src/types/models/UserProfile.ts
index b48e3fcfa..2c867ecfe 100644
--- a/web/src/types/models/UserProfile.ts
+++ b/web/src/types/models/UserProfile.ts
@@ -1,18 +1,18 @@
-import { Company } from "./Company";
-import { Profile } from "./Profile";
-import { Role } from "./Role";
-import { Setting } from "./Setting";
-
-export interface UserProfile {
-    id: string,
-    ulid: string,
-    name: string,
-    email: string,
-    email_verified: boolean,
-    profile: Profile,
-    roles: Array<Role>,
-    companies: Array<Company>,
-    settings: Setting,
-    two_factor: boolean,
-    personal_access_tokens: number,
-}
\ No newline at end of file
+import { Company } from './Company';
+import { Profile } from './Profile';
+import { Role } from './Role';
+import { Setting } from './Setting';
+
+export interface UserProfile {
+  id: string;
+  ulid: string;
+  name: string;
+  email: string;
+  email_verified: boolean;
+  profile: Profile;
+  roles: Array<Role>;
+  companies: Array<Company>;
+  settings: Setting;
+  two_factor: boolean;
+  personal_access_tokens: number;
+}
diff --git a/web/src/types/models/VatProfile.ts b/web/src/types/models/VatProfile.ts
new file mode 100644
index 000000000..3500fd962
--- /dev/null
+++ b/web/src/types/models/VatProfile.ts
@@ -0,0 +1,14 @@
+import { Company } from './Company';
+
+export interface VatProfile {
+  id: string;
+  ulid: string;
+  company: Company;
+  code: string;
+  name: string;
+  vat_rate: number | string;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+  is_active: boolean;
+}
diff --git a/web/src/types/models/Warehouse.ts b/web/src/types/models/Warehouse.ts
new file mode 100644
index 000000000..3bbf5e037
--- /dev/null
+++ b/web/src/types/models/Warehouse.ts
@@ -0,0 +1,16 @@
+import { Company } from './Company';
+import { Branch } from './Branch';
+
+export interface Warehouse {
+  id: string;
+  ulid: string;
+  company: Company;
+  branch: Branch;
+  code: string;
+  name: string;
+  address: string;
+  city: string;
+  contact: string;
+  remarks: string;
+  status: string;
+}
diff --git a/web/src/types/resources/Collection.ts b/web/src/types/resources/Collection.ts
index f200f1a70..1756ec71e 100644
--- a/web/src/types/resources/Collection.ts
+++ b/web/src/types/resources/Collection.ts
@@ -1,18 +1,18 @@
-export interface Collection<T> {
-    data: T,
-    meta: {
-        current_page: number,
-        from: number | null,
-        last_page: number,
-        path: string,
-        per_page: number,
-        to: number | null,
-        total: number,
-    },
-    links: {
-        first: string,
-        last: string,
-        prev: string | null,
-        next: string | null,
-    }
-}
\ No newline at end of file
+export interface Collection<T> {
+  data: T;
+  meta: {
+    current_page: number;
+    from: number | null;
+    last_page: number;
+    path: string;
+    per_page: number;
+    to: number | null;
+    total: number;
+  };
+  links: {
+    first: string;
+    last: string;
+    prev: string | null;
+    next: string | null;
+  };
+}
diff --git a/web/src/types/resources/Resource.ts b/web/src/types/resources/Resource.ts
index 1b2374922..d14429f57 100644
--- a/web/src/types/resources/Resource.ts
+++ b/web/src/types/resources/Resource.ts
@@ -1,3 +1,3 @@
-export interface Resource<T> {
-    data: T
-}
\ No newline at end of file
+export interface Resource<T> {
+  data: T;
+}
diff --git a/web/src/types/services/ServiceRequest.ts b/web/src/types/services/ServiceRequest.ts
index 34166de1f..ee947554e 100644
--- a/web/src/types/services/ServiceRequest.ts
+++ b/web/src/types/services/ServiceRequest.ts
@@ -1,8 +1,10 @@
-export interface ReadAnyRequest {
-    company_id?: string,
-    search: string | null,
-    refresh: boolean,
-    paginate: boolean,
-    page?: number,
-    per_page?: number,
-}
\ No newline at end of file
+export interface ReadAnyRequest {
+  company_id?: string;
+  branch_id?: string;
+  search: string | null;
+  refresh: boolean;
+  paginate: boolean;
+  page?: number;
+  per_page?: number;
+  with_trashed?: boolean;
+}
diff --git a/web/src/types/services/ServiceResponse.ts b/web/src/types/services/ServiceResponse.ts
index 6497c0c4a..e005c98c2 100644
--- a/web/src/types/services/ServiceResponse.ts
+++ b/web/src/types/services/ServiceResponse.ts
@@ -1,6 +1,6 @@
-export interface ServiceResponse<T> {
-    success: boolean;
-    data?: T;
-    message?: string,
-    errors?: Record<string, Array<string>>;
-}
\ No newline at end of file
+export interface ServiceResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  errors?: Record<string, Array<string>>;
+}
diff --git a/web/src/types/services/asset-adjustment/AssetAdjustmentRequest.ts b/web/src/types/services/asset-adjustment/AssetAdjustmentRequest.ts
new file mode 100644
index 000000000..237dfbd03
--- /dev/null
+++ b/web/src/types/services/asset-adjustment/AssetAdjustmentRequest.ts
@@ -0,0 +1,78 @@
+export interface AssetAdjustmentReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface AssetAdjustmentReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface AssetAdjustmentInItemNestedStoreRequest {
+  qty: number;
+  asset_id: string;
+  remarks: string | null;
+  serials: { serial: string }[];
+}
+
+export interface AssetAdjustmentOutItemNestedStoreRequest {
+  qty: number;
+  asset_id: string;
+  remarks: string | null;
+  serials: { serial: string }[];
+}
+
+export interface AssetAdjustmentStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  remarks: string | null;
+  is_posted: boolean;
+  in_items: AssetAdjustmentInItemNestedStoreRequest[];
+  out_items: AssetAdjustmentOutItemNestedStoreRequest[];
+}
+
+export interface AssetAdjustmentInItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  asset_id: string;
+  remarks: string | null;
+  delete_serial_ids: string[];
+  serials: { id: string | null; serial: string }[];
+}
+
+export interface AssetAdjustmentOutItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  asset_id: string;
+  remarks: string | null;
+  delete_serial_ids: string[];
+  serials: { id: string | null; serial: string }[];
+}
+
+export interface AssetAdjustmentUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  remarks: string | null;
+  is_posted: boolean;
+  delete_in_item_ids: string[];
+  in_items: AssetAdjustmentInItemNestedUpdateRequest[];
+  delete_out_item_ids: string[];
+  out_items: AssetAdjustmentOutItemNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/asset-category/AssetCategoryRequest.ts b/web/src/types/services/asset-category/AssetCategoryRequest.ts
new file mode 100644
index 000000000..db96f0f15
--- /dev/null
+++ b/web/src/types/services/asset-category/AssetCategoryRequest.ts
@@ -0,0 +1,18 @@
+export interface AssetCategoryReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface AssetCategoryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/asset-purchase/AssetPurchaseRequest.ts b/web/src/types/services/asset-purchase/AssetPurchaseRequest.ts
new file mode 100644
index 000000000..ccda8162d
--- /dev/null
+++ b/web/src/types/services/asset-purchase/AssetPurchaseRequest.ts
@@ -0,0 +1,69 @@
+export interface AssetPurchaseReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface AssetPurchaseReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface AssetPurchaseItemNestedStoreRequest {
+  qty: number;
+  asset_id: string;
+  unit_price: number;
+  remarks: string | null;
+  serials: { serial: string }[];
+}
+
+export interface AssetPurchaseStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  supplier_id: string | null;
+  remarks: string | null;
+  is_posted: boolean;
+  additional_cost: number;
+  rounding: number;
+  items: AssetPurchaseItemNestedStoreRequest[];
+}
+
+export interface AssetPurchaseItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  asset_id: string;
+  unit_price: number;
+  remarks: string | null;
+  delete_serial_ids: string[];
+  serials: { id: string | null; serial: string }[];
+}
+
+export interface AssetPurchaseUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  supplier_id: string | null;
+  remarks: string | null;
+  is_posted: boolean;
+  additional_cost: number;
+  rounding: number;
+  delete_item_ids: string[];
+  items: AssetPurchaseItemNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/asset-sale/AssetSaleRequest.ts b/web/src/types/services/asset-sale/AssetSaleRequest.ts
new file mode 100644
index 000000000..eaa779d41
--- /dev/null
+++ b/web/src/types/services/asset-sale/AssetSaleRequest.ts
@@ -0,0 +1,67 @@
+export interface AssetSaleReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface AssetSaleReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface AssetSaleItemNestedStoreRequest {
+  qty: number;
+  asset_id: string;
+  unit_price: number;
+  remarks: string | null;
+  serials: { serial: string }[];
+}
+
+export interface AssetSaleStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  customer_id: string | null;
+  remarks: string | null;
+  is_posted: boolean;
+  rounding: number;
+  items: AssetSaleItemNestedStoreRequest[];
+}
+
+export interface AssetSaleItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  asset_id: string;
+  unit_price: number;
+  remarks: string | null;
+  delete_serial_ids: string[];
+  serials: { id: string | null; serial: string }[];
+}
+
+export interface AssetSaleUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  customer_id: string | null;
+  remarks: string | null;
+  is_posted: boolean;
+  rounding: number;
+  delete_item_ids: string[];
+  items: AssetSaleItemNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/asset-unit/AssetUnitRequest.ts b/web/src/types/services/asset-unit/AssetUnitRequest.ts
new file mode 100644
index 000000000..6f6d1aed5
--- /dev/null
+++ b/web/src/types/services/asset-unit/AssetUnitRequest.ts
@@ -0,0 +1,18 @@
+export interface AssetUnitReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface AssetUnitReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/asset/AssetRequest.ts b/web/src/types/services/asset/AssetRequest.ts
new file mode 100644
index 000000000..64e8ceb0d
--- /dev/null
+++ b/web/src/types/services/asset/AssetRequest.ts
@@ -0,0 +1,24 @@
+export interface AssetReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  asset_category_id?: string;
+  asset_unit_id?: string;
+  status?: number | string;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface AssetReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  asset_category_id?: string;
+  asset_unit_id?: string;
+  status?: number | string;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/branch/BranchRequest.ts b/web/src/types/services/branch/BranchRequest.ts
new file mode 100644
index 000000000..60da19583
--- /dev/null
+++ b/web/src/types/services/branch/BranchRequest.ts
@@ -0,0 +1,22 @@
+export interface BranchReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  is_main?: boolean;
+  status?: string | number;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface BranchReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  is_main?: boolean;
+  status?: string | number;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/brand/BrandRequest.ts b/web/src/types/services/brand/BrandRequest.ts
new file mode 100644
index 000000000..cc480d5a3
--- /dev/null
+++ b/web/src/types/services/brand/BrandRequest.ts
@@ -0,0 +1,18 @@
+export interface BrandReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface BrandReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/capital-opening/CapitalOpeningRequest.ts b/web/src/types/services/capital-opening/CapitalOpeningRequest.ts
new file mode 100644
index 000000000..3baaf7f4d
--- /dev/null
+++ b/web/src/types/services/capital-opening/CapitalOpeningRequest.ts
@@ -0,0 +1,44 @@
+export interface CapitalOpeningReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  investor_id?: string | null;
+  cash_account_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface CapitalOpeningReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  investor_id?: string | null;
+  cash_account_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface CapitalOpeningStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  investor_id: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string | null;
+}
+
+export interface CapitalOpeningUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  investor_id: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/services/capital-transaction/CapitalTransactionRequest.ts b/web/src/types/services/capital-transaction/CapitalTransactionRequest.ts
new file mode 100644
index 000000000..3dab26d88
--- /dev/null
+++ b/web/src/types/services/capital-transaction/CapitalTransactionRequest.ts
@@ -0,0 +1,50 @@
+import { CapitalTransactionType } from '../../enums/CapitalTransactionType';
+
+export interface CapitalTransactionReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  investor_id?: string | null;
+  cash_account_id?: string | null;
+  type?: CapitalTransactionType | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface CapitalTransactionReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  investor_id?: string | null;
+  cash_account_id?: string | null;
+  type?: CapitalTransactionType | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface CapitalTransactionStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  investor_id: string;
+  cash_account_id: string;
+  type: CapitalTransactionType | '';
+  amount: number;
+  remarks: string | null;
+}
+
+export interface CapitalTransactionUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  investor_id: string;
+  cash_account_id: string;
+  type: CapitalTransactionType | '';
+  amount: number;
+  remarks: string | null;
+}
diff --git a/web/src/types/services/cash-transfer/CashTransferRequest.ts b/web/src/types/services/cash-transfer/CashTransferRequest.ts
new file mode 100644
index 000000000..2768ad618
--- /dev/null
+++ b/web/src/types/services/cash-transfer/CashTransferRequest.ts
@@ -0,0 +1,41 @@
+export interface CashTransferReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface CashTransferReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface CashTransferStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  source_cash_account_id: string;
+  destination_cash_account_id: string;
+  amount: number;
+  remarks: string | null;
+}
+
+export interface CashTransferUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  source_cash_account_id: string;
+  destination_cash_account_id: string;
+  amount: number;
+  remarks: string | null;
+}
+
diff --git a/web/src/types/services/cash_account/CashAccountRequest.ts b/web/src/types/services/cash_account/CashAccountRequest.ts
new file mode 100644
index 000000000..9e14ee0ec
--- /dev/null
+++ b/web/src/types/services/cash_account/CashAccountRequest.ts
@@ -0,0 +1,28 @@
+export interface CashAccountWithRemainingBalanceFilter {
+  end_date?: string | null;
+}
+
+export interface CashAccountReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  branch_id?: string | null;
+  is_bank?: boolean | null;
+  include_id?: string;
+  with_remaining_balance?: CashAccountWithRemainingBalanceFilter | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface CashAccountReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  branch_id?: string | null;
+  is_bank?: boolean | null;
+  include_id?: string;
+  with_remaining_balance?: CashAccountWithRemainingBalanceFilter | null;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/chart-of-account/ChartOfAccountRequest.ts b/web/src/types/services/chart-of-account/ChartOfAccountRequest.ts
new file mode 100644
index 000000000..821b41ff7
--- /dev/null
+++ b/web/src/types/services/chart-of-account/ChartOfAccountRequest.ts
@@ -0,0 +1,36 @@
+export interface ChartOfAccountReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  parent_id?: string | null;
+  has_parent?: boolean;
+  has_children?: boolean;
+  scope?: string | null;
+  system_key?: string | null;
+  account_type?: string | null;
+  normal_balance?: string | null;
+  is_group?: boolean;
+  is_active?: boolean;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ChartOfAccountReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  parent_id?: string | null;
+  has_parent?: boolean;
+  has_children?: boolean;
+  scope?: string | null;
+  system_key?: string | null;
+  account_type?: string | null;
+  normal_balance?: string | null;
+  is_group?: boolean;
+  is_active?: boolean;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/company/CompanyRequest.ts b/web/src/types/services/company/CompanyRequest.ts
new file mode 100644
index 000000000..28face8a3
--- /dev/null
+++ b/web/src/types/services/company/CompanyRequest.ts
@@ -0,0 +1,20 @@
+export interface CompanyReadAnyPaginateRequest {
+  with_trashed: boolean;
+  search?: string | null;
+  default?: boolean;
+  status?: string | number;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface CompanyReadAnyGetRequest {
+  with_trashed: boolean;
+  search?: string | null;
+  default?: boolean;
+  status?: string | number;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/customer-group/CustomerGroupRequest.ts b/web/src/types/services/customer-group/CustomerGroupRequest.ts
new file mode 100644
index 000000000..02f32f933
--- /dev/null
+++ b/web/src/types/services/customer-group/CustomerGroupRequest.ts
@@ -0,0 +1,18 @@
+export interface CustomerGroupReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface CustomerGroupReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/customer/CustomerRequest.ts b/web/src/types/services/customer/CustomerRequest.ts
new file mode 100644
index 000000000..3db197442
--- /dev/null
+++ b/web/src/types/services/customer/CustomerRequest.ts
@@ -0,0 +1,20 @@
+export interface CustomerReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  status?: string | number;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface CustomerReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  status?: string | number;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/debt-category/DebtCategoryRequest.ts b/web/src/types/services/debt-category/DebtCategoryRequest.ts
new file mode 100644
index 000000000..4af2f2aae
--- /dev/null
+++ b/web/src/types/services/debt-category/DebtCategoryRequest.ts
@@ -0,0 +1,18 @@
+export interface DebtCategoryReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface DebtCategoryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/debt-creditor/DebtCreditorRequest.ts b/web/src/types/services/debt-creditor/DebtCreditorRequest.ts
new file mode 100644
index 000000000..daaa6f657
--- /dev/null
+++ b/web/src/types/services/debt-creditor/DebtCreditorRequest.ts
@@ -0,0 +1,18 @@
+export interface DebtCreditorReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface DebtCreditorReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/debt/DebtRequest.ts b/web/src/types/services/debt/DebtRequest.ts
new file mode 100644
index 000000000..4de82283f
--- /dev/null
+++ b/web/src/types/services/debt/DebtRequest.ts
@@ -0,0 +1,28 @@
+export interface DebtReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  category_id?: string | null;
+  creditor_id?: string | null;
+  supplier_id?: string | null;
+  is_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface DebtReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  category_id?: string | null;
+  creditor_id?: string | null;
+  supplier_id?: string | null;
+  is_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/expense-category/ExpenseCategoryRequest.ts b/web/src/types/services/expense-category/ExpenseCategoryRequest.ts
new file mode 100644
index 000000000..dcc509de6
--- /dev/null
+++ b/web/src/types/services/expense-category/ExpenseCategoryRequest.ts
@@ -0,0 +1,24 @@
+export interface ExpenseCategoryReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  parent_id?: string | null;
+  has_parent?: boolean;
+  has_children?: boolean;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ExpenseCategoryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  parent_id?: string | null;
+  has_parent?: boolean;
+  has_children?: boolean;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/expense-payment/ExpensePaymentRequest.ts b/web/src/types/services/expense-payment/ExpensePaymentRequest.ts
new file mode 100644
index 000000000..5b50da37e
--- /dev/null
+++ b/web/src/types/services/expense-payment/ExpensePaymentRequest.ts
@@ -0,0 +1,22 @@
+export interface ExpensePaymentReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  expense_id?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ExpensePaymentReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  expense_id?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/expense/ExpenseRequest.ts b/web/src/types/services/expense/ExpenseRequest.ts
new file mode 100644
index 000000000..0566a9637
--- /dev/null
+++ b/web/src/types/services/expense/ExpenseRequest.ts
@@ -0,0 +1,24 @@
+export interface ExpenseReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  expense_category_id?: string | null;
+  is_amount_payable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ExpenseReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  expense_category_id?: string | null;
+  is_amount_payable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/income-category/IncomeCategoryRequest.ts b/web/src/types/services/income-category/IncomeCategoryRequest.ts
new file mode 100644
index 000000000..d9e00d917
--- /dev/null
+++ b/web/src/types/services/income-category/IncomeCategoryRequest.ts
@@ -0,0 +1,24 @@
+export interface IncomeCategoryReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  parent_id?: string | null;
+  has_parent?: boolean;
+  has_children?: boolean;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface IncomeCategoryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  parent_id?: string | null;
+  has_parent?: boolean;
+  has_children?: boolean;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/income-payment/IncomePaymentRequest.ts b/web/src/types/services/income-payment/IncomePaymentRequest.ts
new file mode 100644
index 000000000..9fe0c077c
--- /dev/null
+++ b/web/src/types/services/income-payment/IncomePaymentRequest.ts
@@ -0,0 +1,22 @@
+export interface IncomePaymentReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  income_id?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface IncomePaymentReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  income_id?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/income/IncomeRequest.ts b/web/src/types/services/income/IncomeRequest.ts
new file mode 100644
index 000000000..0d426aaa3
--- /dev/null
+++ b/web/src/types/services/income/IncomeRequest.ts
@@ -0,0 +1,24 @@
+export interface IncomeReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  income_category_id?: string | null;
+  is_amount_receivable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface IncomeReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  income_category_id?: string | null;
+  is_amount_receivable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/investor/InvestorRequest.ts b/web/src/types/services/investor/InvestorRequest.ts
new file mode 100644
index 000000000..5da42bb63
--- /dev/null
+++ b/web/src/types/services/investor/InvestorRequest.ts
@@ -0,0 +1,18 @@
+export interface InvestorReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface InvestorReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/journal-entry-item/JournalEntryItemRequest.ts b/web/src/types/services/journal-entry-item/JournalEntryItemRequest.ts
new file mode 100644
index 000000000..a8b831a89
--- /dev/null
+++ b/web/src/types/services/journal-entry-item/JournalEntryItemRequest.ts
@@ -0,0 +1,28 @@
+export interface JournalEntryItemReadAnyPaginateRequest {
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  start_date?: string | null;
+  end_date?: string | null;
+  journal_entry_id?: string | null;
+  chart_of_account_id?: string | null;
+  include_system_journals?: boolean;
+  include_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface JournalEntryItemReadAnyGetRequest {
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  start_date?: string | null;
+  end_date?: string | null;
+  journal_entry_id?: string | null;
+  chart_of_account_id?: string | null;
+  include_system_journals?: boolean;
+  include_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/journal-entry/JournalEntryRequest.ts b/web/src/types/services/journal-entry/JournalEntryRequest.ts
new file mode 100644
index 000000000..8bc162803
--- /dev/null
+++ b/web/src/types/services/journal-entry/JournalEntryRequest.ts
@@ -0,0 +1,41 @@
+export interface JournalEntryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  start_date?: string | null;
+  end_date?: string | null;
+  source_type?: string | null;
+  source_id?: number | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface JournalEntryItemStoreRequest {
+  chart_of_account_id: string;
+  debit: number;
+  credit: number;
+  remarks: string | null;
+}
+
+export interface JournalEntryStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  source_type: string | null;
+  source_id: number | null;
+  reference_no: string | null;
+  remarks: string | null;
+  items: JournalEntryItemStoreRequest[];
+}
+
+export interface JournalEntryUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  reference_no: string | null;
+  remarks: string | null;
+  items: JournalEntryItemStoreRequest[];
+}
diff --git a/web/src/types/services/prepaid-expense/PrepaidExpenseRequest.ts b/web/src/types/services/prepaid-expense/PrepaidExpenseRequest.ts
new file mode 100644
index 000000000..c8c7dd5de
--- /dev/null
+++ b/web/src/types/services/prepaid-expense/PrepaidExpenseRequest.ts
@@ -0,0 +1,24 @@
+export interface PrepaidExpenseReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  expense_category_id?: string | null;
+  is_amount_payable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PrepaidExpenseReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  expense_category_id?: string | null;
+  is_amount_payable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/prepaid-income/PrepaidIncomeRequest.ts b/web/src/types/services/prepaid-income/PrepaidIncomeRequest.ts
new file mode 100644
index 000000000..90b97f9d8
--- /dev/null
+++ b/web/src/types/services/prepaid-income/PrepaidIncomeRequest.ts
@@ -0,0 +1,24 @@
+export interface PrepaidIncomeReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  income_category_id?: string | null;
+  is_amount_receivable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PrepaidIncomeReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  income_category_id?: string | null;
+  is_amount_receivable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/product-category/ProductCategoryRequest.ts b/web/src/types/services/product-category/ProductCategoryRequest.ts
new file mode 100644
index 000000000..a171d49fa
--- /dev/null
+++ b/web/src/types/services/product-category/ProductCategoryRequest.ts
@@ -0,0 +1,20 @@
+export interface ProductCategoryReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  type?: number | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ProductCategoryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  type?: number | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/product-unit/ProductUnitRequest.ts b/web/src/types/services/product-unit/ProductUnitRequest.ts
new file mode 100644
index 000000000..a8e5a9a92
--- /dev/null
+++ b/web/src/types/services/product-unit/ProductUnitRequest.ts
@@ -0,0 +1,52 @@
+export interface ProductUnitReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  product_id?: string | null;
+  unit_id?: string | null;
+  is_base?: boolean | null;
+  is_primary_unit?: boolean | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ProductUnitReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  product_id?: string | null;
+  unit_id?: string | null;
+  is_base?: boolean | null;
+  is_primary_unit?: boolean | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface ProductUnitStoreRequest {
+  product_id?: string; // Optional because usually inferred from parent
+  code: string;
+  is_manufacturer_sku: boolean;
+  unit_id: string;
+  unit_name?: string;
+  price: number;
+  is_base: boolean;
+  conversion_value: number;
+  is_primary_unit: boolean;
+  point: number;
+  remarks?: string | null;
+}
+
+export interface ProductUnitUpdateRequest {
+  id?: string;
+  code: string;
+  is_manufacturer_sku: boolean;
+  unit_id: string;
+  unit_name?: string;
+  price: number;
+  is_base: boolean;
+  conversion_value: number;
+  is_primary_unit: boolean;
+  point: number;
+  remarks?: string | null;
+}
diff --git a/web/src/types/services/product/ProductRequest.ts b/web/src/types/services/product/ProductRequest.ts
new file mode 100644
index 000000000..f7d55ec00
--- /dev/null
+++ b/web/src/types/services/product/ProductRequest.ts
@@ -0,0 +1,134 @@
+import { ProductUnitStoreRequest, ProductUnitUpdateRequest } from '../product-unit/ProductUnitRequest';
+
+export type ProductStockFilter = 'has_stock' | 'empty' | 'valid' | 'invalid';
+export type SortDirection = 'asc' | 'desc';
+
+export interface ProductWithRemainingStockFilter {
+  end_date?: string | null;
+  warehouse_id?: string | null;
+  stock_filter?: ProductStockFilter | null;
+  less_than?: number | null;
+  greater_than?: number | null;
+  include_service_products?: boolean | null;
+  sort_by_remaining_stock?: SortDirection | null;
+}
+
+export interface ProductReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+
+  category_id?: string | null;
+  brand_id?: string | null;
+  default_vat_profile_id?: string | null;
+  is_price_include_vat?: boolean | null;
+  is_use_serial_number?: boolean | null;
+  is_expirable?: boolean | null;
+  type?: number | null;
+  status?: string | number;
+  include_id?: string;
+  with_remaining_stock?: ProductWithRemainingStockFilter | null;
+
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ProductReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+
+  category_id?: string | null;
+  brand_id?: string | null;
+  default_vat_profile_id?: string | null;
+  is_price_include_vat?: boolean | null;
+  is_use_serial_number?: boolean | null;
+  is_expirable?: boolean | null;
+  type?: number | null;
+  status?: string | number;
+  include_id?: string;
+  with_remaining_stock?: ProductWithRemainingStockFilter | null;
+
+  refresh: boolean;
+  limit: number;
+}
+
+export interface ProductPhysicalStoreRequest {
+  company_id: string;
+  code: string;
+  category_id: string;
+  brand_id: string;
+  name: string;
+  is_price_include_vat: boolean;
+  is_use_serial_number: boolean;
+  is_expirable: boolean;
+  remarks?: string | null;
+  type: number;
+  status: number;
+
+  product_units: Array<ProductUnitStoreRequest>;
+  image_hashes?: {
+    hash: string;
+    is_main: boolean;
+  }[];
+}
+
+export interface ProductPhysicalUpdateRequest {
+  company_id: string;
+  code: string;
+  category_id: string;
+  brand_id: string;
+  name: string;
+  is_price_include_vat: boolean;
+  is_use_serial_number: boolean;
+  is_expirable: boolean;
+  remarks?: string | null;
+  type: number;
+  status: number;
+
+  delete_product_unit_ids?: string[] | null;
+  product_units: Array<ProductUnitUpdateRequest>;
+  delete_image_ids?: string[] | null;
+  image_hashes?: {
+    hash: string;
+    is_main: boolean;
+  }[];
+}
+
+export interface ProductServiceStoreRequest {
+  company_id: string;
+  code: string;
+  category_id: string;
+  name: string;
+  is_price_include_vat: boolean;
+  remarks?: string | null;
+  status: number;
+  unit_id: string;
+  price: number;
+  point: number;
+
+  image_hashes?: {
+    hash: string;
+    is_main: boolean;
+  }[];
+}
+
+export interface ProductServiceUpdateRequest {
+  company_id: string;
+  code: string;
+  category_id: string;
+  name: string;
+  is_price_include_vat: boolean;
+  remarks?: string | null;
+  status: number;
+  unit_id: string;
+  price: number;
+  point: number;
+  
+  delete_image_ids?: string[] | null;
+  image_hashes?: {
+    hash: string;
+    is_main: boolean;
+  }[];
+}
diff --git a/web/src/types/services/purchase-additional-cost-category/PurchaseAdditionalCostCategoryRequest.ts b/web/src/types/services/purchase-additional-cost-category/PurchaseAdditionalCostCategoryRequest.ts
new file mode 100644
index 000000000..36956dfd3
--- /dev/null
+++ b/web/src/types/services/purchase-additional-cost-category/PurchaseAdditionalCostCategoryRequest.ts
@@ -0,0 +1,18 @@
+export interface PurchaseAdditionalCostCategoryReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseAdditionalCostCategoryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentRequest.ts b/web/src/types/services/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentRequest.ts
new file mode 100644
index 000000000..82a7fb907
--- /dev/null
+++ b/web/src/types/services/purchase-additional-cost-payment/PurchaseAdditionalCostPaymentRequest.ts
@@ -0,0 +1,22 @@
+export interface PurchaseAdditionalCostPaymentReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  purchase_additional_cost_id?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseAdditionalCostPaymentReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  purchase_additional_cost_id?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/purchase-additional-cost/PurchaseAdditionalCostRequest.ts b/web/src/types/services/purchase-additional-cost/PurchaseAdditionalCostRequest.ts
new file mode 100644
index 000000000..c61d328e1
--- /dev/null
+++ b/web/src/types/services/purchase-additional-cost/PurchaseAdditionalCostRequest.ts
@@ -0,0 +1,26 @@
+export interface PurchaseAdditionalCostReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  purchase_id?: string | null;
+  purchase_additional_cost_category_id?: string | null;
+  is_amount_payable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseAdditionalCostReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  purchase_id?: string | null;
+  purchase_additional_cost_category_id?: string | null;
+  is_amount_payable_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/purchase-order-down-payment-refund/PurchaseOrderDownPaymentRefundRequest.ts b/web/src/types/services/purchase-order-down-payment-refund/PurchaseOrderDownPaymentRefundRequest.ts
new file mode 100644
index 000000000..07b090817
--- /dev/null
+++ b/web/src/types/services/purchase-order-down-payment-refund/PurchaseOrderDownPaymentRefundRequest.ts
@@ -0,0 +1,26 @@
+export interface PurchaseOrderDownPaymentRefundReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  start_date?: string;
+  end_date?: string;
+  supplier_id?: string | null;
+  cash_account_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseOrderDownPaymentRefundReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  start_date?: string;
+  end_date?: string;
+  supplier_id?: string | null;
+  cash_account_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/purchase-order-down-payment/PurchaseOrderDownPaymentRequest.ts b/web/src/types/services/purchase-order-down-payment/PurchaseOrderDownPaymentRequest.ts
new file mode 100644
index 000000000..d6af63714
--- /dev/null
+++ b/web/src/types/services/purchase-order-down-payment/PurchaseOrderDownPaymentRequest.ts
@@ -0,0 +1,30 @@
+import type { PurchaseOrderDownPaymentAllocationStatus } from '@/types/enums/PurchaseOrderDownPaymentAllocationStatus';
+
+export interface PurchaseOrderDownPaymentReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  start_date?: string;
+  end_date?: string;
+  supplier_id?: string | null;
+  cash_account_id?: string | null;
+  allocation_status?: PurchaseOrderDownPaymentAllocationStatus | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseOrderDownPaymentReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  start_date?: string;
+  end_date?: string;
+  supplier_id?: string | null;
+  cash_account_id?: string | null;
+  allocation_status?: PurchaseOrderDownPaymentAllocationStatus | null;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/purchase-order-item/PurchaseOrderItemRequest.ts b/web/src/types/services/purchase-order-item/PurchaseOrderItemRequest.ts
new file mode 100644
index 000000000..cbffd81b0
--- /dev/null
+++ b/web/src/types/services/purchase-order-item/PurchaseOrderItemRequest.ts
@@ -0,0 +1,34 @@
+export interface PurchaseOrderItemReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  purchase_order_code?: string;
+  purchase_order_start_date?: string;
+  purchase_order_end_date?: string;
+  purchase_order_supplier_id?: string | null;
+  product_unit_code?: string;
+  product_unit_product_name?: string;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseOrderItemReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string;
+  purchase_order_code?: string;
+  purchase_order_start_date?: string;
+  purchase_order_end_date?: string;
+  purchase_order_supplier_id?: string | null;
+  product_unit_code?: string;
+  product_unit_product_name?: string;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/purchase-order/PurchaseOrderRequest.ts b/web/src/types/services/purchase-order/PurchaseOrderRequest.ts
new file mode 100644
index 000000000..48101c73c
--- /dev/null
+++ b/web/src/types/services/purchase-order/PurchaseOrderRequest.ts
@@ -0,0 +1,155 @@
+export interface PurchaseOrderReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  supplier_id: string | null;
+  progress_status: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseOrderReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  supplier_id: string | null;
+  progress_status?: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface PurchaseOrderGlobalDiscountNestedStoreRequest {
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseOrderItemDiscountNestedStoreRequest {
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseOrderItemNestedStoreRequest {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_price: number;
+  product_unit_price_discounts: PurchaseOrderItemDiscountNestedStoreRequest[];
+  subtotal_discounts: PurchaseOrderItemDiscountNestedStoreRequest[];
+  product_unit_is_price_include_vat: boolean;
+  vat_profile_id: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+}
+
+export interface PurchaseOrderDownPaymentNestedStoreRequest {
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  amount_allocated?: number;
+  remarks: string | null;
+}
+
+export interface PurchaseOrderDownPaymentRefundNestedStoreRequest {
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string | null;
+}
+
+export interface PurchaseOrderStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  supplier_id: string | null;
+  remarks: string | null;
+  rounding: number;
+  global_discounts: PurchaseOrderGlobalDiscountNestedStoreRequest[];
+  items: PurchaseOrderItemNestedStoreRequest[];
+  down_payments: PurchaseOrderDownPaymentNestedStoreRequest[];
+  refunded_down_payments: PurchaseOrderDownPaymentRefundNestedStoreRequest[];
+}
+
+export interface PurchaseOrderGlobalDiscountNestedUpdateRequest {
+  id: string | null;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseOrderItemDiscountNestedUpdateRequest {
+  id: string | null;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseOrderItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_price: number;
+  delete_product_unit_price_discount_ids: string[];
+  product_unit_price_discounts: PurchaseOrderItemDiscountNestedUpdateRequest[];
+  delete_subtotal_discount_ids: string[];
+  subtotal_discounts: PurchaseOrderItemDiscountNestedUpdateRequest[];
+  product_unit_is_price_include_vat: boolean;
+  vat_profile_id: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+}
+
+export interface PurchaseOrderDownPaymentNestedUpdateRequest {
+  id: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  amount_allocated?: number;
+  remarks: string | null;
+}
+
+export interface PurchaseOrderDownPaymentRefundNestedUpdateRequest {
+  id: string | null;
+  code: string;
+  date: string;
+  cash_account_id: string;
+  amount: number;
+  remarks: string | null;
+}
+
+export interface PurchaseOrderUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  supplier_id: string | null;
+  remarks: string | null;
+  rounding: number;
+  delete_global_discount_ids: string[];
+  global_discounts: PurchaseOrderGlobalDiscountNestedUpdateRequest[];
+  delete_item_ids: string[];
+  items: PurchaseOrderItemNestedUpdateRequest[];
+  delete_down_payment_ids: string[];
+  down_payments: PurchaseOrderDownPaymentNestedUpdateRequest[];
+  delete_refunded_down_payment_ids: string[];
+  refunded_down_payments: PurchaseOrderDownPaymentRefundNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/purchase-receipt/PurchaseReceiptRequest.ts b/web/src/types/services/purchase-receipt/PurchaseReceiptRequest.ts
new file mode 100644
index 000000000..d0cca94fc
--- /dev/null
+++ b/web/src/types/services/purchase-receipt/PurchaseReceiptRequest.ts
@@ -0,0 +1,81 @@
+export interface PurchaseReceiptReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  supplier_id?: string | null;
+  purchase_id?: string | null;
+  is_from_direct_purchase?: boolean | null;
+  start_date?: string | null;
+  end_date?: string | null;
+  warehouse_id?: string | null;
+  is_posted?: boolean | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseReceiptReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  supplier_id?: string | null;
+  purchase_id?: string | null;
+  is_from_direct_purchase?: boolean | null;
+  start_date?: string | null;
+  end_date?: string | null;
+  warehouse_id?: string | null;
+  is_posted?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface PurchaseReceiptItemSerialNestedStoreRequest {
+  serial: string;
+}
+
+export interface PurchaseReceiptItemNestedStoreRequest {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  serials: PurchaseReceiptItemSerialNestedStoreRequest[];
+}
+
+export interface PurchaseReceiptStoreRequest {
+  company_id: string;
+  branch_id: string;
+  supplier_id: string | null;
+  purchase_id: string | null;
+  code: string;
+  date: string;
+  warehouse_id: string | null;
+  remarks: string | null;
+  is_posted: boolean;
+  items: PurchaseReceiptItemNestedStoreRequest[];
+}
+
+export interface PurchaseReceiptItemSerialNestedUpdateRequest {
+  serial: string;
+}
+
+export interface PurchaseReceiptItemNestedUpdateRequest {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  serials: PurchaseReceiptItemSerialNestedUpdateRequest[];
+}
+
+export interface PurchaseReceiptUpdateRequest {
+  supplier_id: string | null;
+  purchase_id: string | null;
+  code: string;
+  date: string;
+  warehouse_id: string | null;
+  remarks: string | null;
+  is_posted: boolean;
+  items: PurchaseReceiptItemNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/purchase/PurchaseRequest.ts b/web/src/types/services/purchase/PurchaseRequest.ts
new file mode 100644
index 000000000..16b960a52
--- /dev/null
+++ b/web/src/types/services/purchase/PurchaseRequest.ts
@@ -0,0 +1,190 @@
+export interface PurchaseReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  start_date?: string | null;
+  end_date?: string;
+  supplier_id?: string | null;
+  purchase_order_id?: string | null;
+  receipt_mode?: string | null;
+  is_posted?: boolean | null;
+  is_paid_off?: boolean | null;
+  progress_status?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface PurchaseReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  start_date?: string | null;
+  end_date?: string;
+  supplier_id?: string | null;
+  purchase_order_id?: string | null;
+  receipt_mode?: string | null;
+  is_posted?: boolean | null;
+  is_paid_off?: boolean | null;
+  progress_status?: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface PurchaseDiscountNestedStoreRequest {
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseItemSerialNestedStoreRequest {
+  serial: string;
+}
+
+export interface PurchaseItemNestedStoreRequest {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_price: number;
+  product_unit_is_price_include_vat: boolean;
+  product_unit_price_discounts: PurchaseDiscountNestedStoreRequest[];
+  subtotal_discounts: PurchaseDiscountNestedStoreRequest[];
+  vat_profile_id: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+}
+
+export interface PurchaseDirectItemNestedStoreRequest extends PurchaseItemNestedStoreRequest {
+  serials: PurchaseItemSerialNestedStoreRequest[];
+}
+
+export interface PurchaseGlobalDiscountNestedStoreRequest {
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseAdditionalCostNestedStoreRequest {
+  purchase_additional_cost_category_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  paid_immediately_cash_account_id: string | null;
+  amount_paid_immediately: number;
+  amount_payable: number;
+  remarks: string | null;
+}
+
+export interface PurchaseStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  supplier_id: string | null;
+  purchase_order_id: string | null;
+  tax_invoice_number: string | null;
+  tax_invoice_vat_base: number;
+  tax_invoice_vat: number;
+  remarks: string | null;
+  is_posted: boolean;
+  additional_cost: number;
+  rounding: number;
+  items: PurchaseItemNestedStoreRequest[];
+  global_discounts: PurchaseGlobalDiscountNestedStoreRequest[];
+  additional_costs: PurchaseAdditionalCostNestedStoreRequest[];
+}
+
+export interface PurchaseManualStoreRequest extends PurchaseStoreRequest {}
+
+export interface PurchaseDirectStoreRequest extends Omit<PurchaseStoreRequest, 'items'> {
+  direct_receipt_warehouse_id: string;
+  items: PurchaseDirectItemNestedStoreRequest[];
+}
+
+export interface PurchaseDiscountNestedUpdateRequest {
+  id: string | null;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseItemSerialNestedUpdateRequest {
+  id: string | null;
+  serial: string;
+}
+
+export interface PurchaseItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_price: number;
+  product_unit_is_price_include_vat: boolean;
+  delete_product_unit_price_discount_ids: string[];
+  product_unit_price_discounts: PurchaseDiscountNestedUpdateRequest[];
+  delete_subtotal_discount_ids: string[];
+  subtotal_discounts: PurchaseDiscountNestedUpdateRequest[];
+  vat_profile_id: string | null;
+  vat_rate: number;
+  vat_base_numerator: number;
+  vat_base_denominator: number;
+  remarks: string | null;
+}
+
+export interface PurchaseDirectItemNestedUpdateRequest extends PurchaseItemNestedUpdateRequest {
+  serials: PurchaseItemSerialNestedUpdateRequest[];
+}
+
+export interface PurchaseGlobalDiscountNestedUpdateRequest {
+  id: string | null;
+  sequence: number;
+  discount_type: string;
+  discount_value: number;
+}
+
+export interface PurchaseAdditionalCostNestedUpdateRequest {
+  id: string | null;
+  purchase_additional_cost_category_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  paid_immediately_cash_account_id: string | null;
+  amount_paid_immediately: number;
+  amount_payable: number;
+  remarks: string | null;
+}
+
+export interface PurchaseUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  due_days: number;
+  supplier_id: string | null;
+  purchase_order_id: string | null;
+  tax_invoice_number: string | null;
+  tax_invoice_vat_base: number;
+  tax_invoice_vat: number;
+  remarks: string | null;
+  is_posted: boolean;
+  additional_cost: number;
+  rounding: number;
+  delete_item_ids: string[];
+  items: PurchaseItemNestedUpdateRequest[];
+  delete_global_discount_ids: string[];
+  global_discounts: PurchaseGlobalDiscountNestedUpdateRequest[];
+  delete_additional_cost_ids: string[];
+  additional_costs: PurchaseAdditionalCostNestedUpdateRequest[];
+}
+
+export interface PurchaseManualUpdateRequest extends PurchaseUpdateRequest {}
+
+export interface PurchaseDirectUpdateRequest extends Omit<PurchaseUpdateRequest, 'items'> {
+  direct_receipt_warehouse_id: string;
+  items: PurchaseDirectItemNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/receivable-category/ReceivableCategoryRequest.ts b/web/src/types/services/receivable-category/ReceivableCategoryRequest.ts
new file mode 100644
index 000000000..08c3e45df
--- /dev/null
+++ b/web/src/types/services/receivable-category/ReceivableCategoryRequest.ts
@@ -0,0 +1,18 @@
+export interface ReceivableCategoryReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ReceivableCategoryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/receivable/ReceivableRequest.ts b/web/src/types/services/receivable/ReceivableRequest.ts
new file mode 100644
index 000000000..37c0f1e4d
--- /dev/null
+++ b/web/src/types/services/receivable/ReceivableRequest.ts
@@ -0,0 +1,27 @@
+export interface ReceivableReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  category_id?: string | null;
+  customer_id?: string | null;
+  is_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface ReceivableReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  category_id?: string | null;
+  customer_id?: string | null;
+  is_paid_off?: boolean | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
+
diff --git a/web/src/types/services/stock-adjustment-category/StockAdjustmentCategoryRequest.ts b/web/src/types/services/stock-adjustment-category/StockAdjustmentCategoryRequest.ts
new file mode 100644
index 000000000..fccc381e5
--- /dev/null
+++ b/web/src/types/services/stock-adjustment-category/StockAdjustmentCategoryRequest.ts
@@ -0,0 +1,18 @@
+export interface StockAdjustmentCategoryReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockAdjustmentCategoryReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/stock-adjustment-in-item-serial/StockAdjustmentInItemSerialRequest.ts b/web/src/types/services/stock-adjustment-in-item-serial/StockAdjustmentInItemSerialRequest.ts
new file mode 100644
index 000000000..bb7fb985b
--- /dev/null
+++ b/web/src/types/services/stock-adjustment-in-item-serial/StockAdjustmentInItemSerialRequest.ts
@@ -0,0 +1,50 @@
+export interface StockAdjustmentInItemSerialReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  stock_adjustment_code?: string | null;
+  stock_adjustment_start_date?: string | null;
+  stock_adjustment_end_date?: string | null;
+  stock_adjustment_category_id?: string | null;
+  stock_adjustment_in_warehouse_id?: string | null;
+  stock_adjustment_out_warehouse_id?: string | null;
+  product_unit_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockAdjustmentInItemSerialReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  stock_adjustment_code?: string | null;
+  stock_adjustment_start_date?: string | null;
+  stock_adjustment_end_date?: string | null;
+  stock_adjustment_category_id?: string | null;
+  stock_adjustment_in_warehouse_id?: string | null;
+  stock_adjustment_out_warehouse_id?: string | null;
+  product_unit_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface StockAdjustmentInItemSerialStoreRequest {
+  company_id: string;
+  branch_id: string;
+  stock_adjustment_id: string;
+  stock_adjustment_in_item_id: string;
+  serial: string;
+}
+
+export interface StockAdjustmentInItemSerialUpdateRequest {
+  serial: string;
+}
diff --git a/web/src/types/services/stock-adjustment-in-item/StockAdjustmentInItemRequest.ts b/web/src/types/services/stock-adjustment-in-item/StockAdjustmentInItemRequest.ts
new file mode 100644
index 000000000..b705e04a4
--- /dev/null
+++ b/web/src/types/services/stock-adjustment-in-item/StockAdjustmentInItemRequest.ts
@@ -0,0 +1,63 @@
+export interface StockAdjustmentInItemReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  stock_adjustment_code?: string | null;
+  stock_adjustment_start_date?: string | null;
+  stock_adjustment_end_date?: string | null;
+  stock_adjustment_category_id?: string | null;
+  stock_adjustment_in_warehouse_id?: string | null;
+  stock_adjustment_out_warehouse_id?: string | null;
+  product_unit_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockAdjustmentInItemReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  stock_adjustment_code?: string | null;
+  stock_adjustment_start_date?: string | null;
+  stock_adjustment_end_date?: string | null;
+  stock_adjustment_category_id?: string | null;
+  stock_adjustment_in_warehouse_id?: string | null;
+  stock_adjustment_out_warehouse_id?: string | null;
+  product_unit_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface StockAdjustmentInItemStoreRequest {
+  company_id: string;
+  branch_id: string;
+  stock_adjustment_id: string;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_cogs: number;
+  remarks: string | null;
+  serials: { serial: string }[] | null;
+}
+
+export interface StockAdjustmentInItemUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  stock_adjustment_id: string;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_cogs: number;
+  remarks: string | null;
+  delete_serial_ids: string[] | null;
+  serials: { id: string | null; serial: string }[] | null;
+}
diff --git a/web/src/types/services/stock-adjustment-out-item-serial/StockAdjustmentOutItemSerialRequest.ts b/web/src/types/services/stock-adjustment-out-item-serial/StockAdjustmentOutItemSerialRequest.ts
new file mode 100644
index 000000000..4c1303781
--- /dev/null
+++ b/web/src/types/services/stock-adjustment-out-item-serial/StockAdjustmentOutItemSerialRequest.ts
@@ -0,0 +1,50 @@
+export interface StockAdjustmentOutItemSerialReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  stock_adjustment_code?: string | null;
+  stock_adjustment_start_date?: string | null;
+  stock_adjustment_end_date?: string | null;
+  stock_adjustment_category_id?: string | null;
+  stock_adjustment_in_warehouse_id?: string | null;
+  stock_adjustment_out_warehouse_id?: string | null;
+  product_unit_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockAdjustmentOutItemSerialReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  stock_adjustment_code?: string | null;
+  stock_adjustment_start_date?: string | null;
+  stock_adjustment_end_date?: string | null;
+  stock_adjustment_category_id?: string | null;
+  stock_adjustment_in_warehouse_id?: string | null;
+  stock_adjustment_out_warehouse_id?: string | null;
+  product_unit_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface StockAdjustmentOutItemSerialStoreRequest {
+  company_id: string;
+  branch_id: string;
+  stock_adjustment_id: string;
+  stock_adjustment_out_item_id: string;
+  serial: string;
+}
+
+export interface StockAdjustmentOutItemSerialUpdateRequest {
+  serial: string;
+}
diff --git a/web/src/types/services/stock-adjustment-out-item/StockAdjustmentOutItemRequest.ts b/web/src/types/services/stock-adjustment-out-item/StockAdjustmentOutItemRequest.ts
new file mode 100644
index 000000000..ce9cf0234
--- /dev/null
+++ b/web/src/types/services/stock-adjustment-out-item/StockAdjustmentOutItemRequest.ts
@@ -0,0 +1,61 @@
+export interface StockAdjustmentOutItemReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  stock_adjustment_code?: string | null;
+  stock_adjustment_start_date?: string | null;
+  stock_adjustment_end_date?: string | null;
+  stock_adjustment_category_id?: string | null;
+  stock_adjustment_in_warehouse_id?: string | null;
+  stock_adjustment_out_warehouse_id?: string | null;
+  product_unit_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockAdjustmentOutItemReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id?: string | null;
+  search?: string | null;
+  stock_adjustment_code?: string | null;
+  stock_adjustment_start_date?: string | null;
+  stock_adjustment_end_date?: string | null;
+  stock_adjustment_category_id?: string | null;
+  stock_adjustment_in_warehouse_id?: string | null;
+  stock_adjustment_out_warehouse_id?: string | null;
+  product_unit_code?: string | null;
+  product_unit_product_name?: string | null;
+  product_unit_product_category_id?: string | null;
+  product_unit_product_brand_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface StockAdjustmentOutItemStoreRequest {
+  company_id: string;
+  branch_id: string;
+  stock_adjustment_id: string;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  serials: { serial: string }[] | null;
+}
+
+export interface StockAdjustmentOutItemUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  stock_adjustment_id: string;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  delete_serial_ids: string[] | null;
+  serials: { id: string | null; serial: string }[] | null;
+}
diff --git a/web/src/types/services/stock-adjustment/StockAdjustmentRequest.ts b/web/src/types/services/stock-adjustment/StockAdjustmentRequest.ts
new file mode 100644
index 000000000..fc6b07578
--- /dev/null
+++ b/web/src/types/services/stock-adjustment/StockAdjustmentRequest.ts
@@ -0,0 +1,96 @@
+export interface StockAdjustmentReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  category_id: string | null;
+  in_warehouse_id: string | null;
+  out_warehouse_id: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockAdjustmentReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  category_id: string | null;
+  in_warehouse_id: string | null;
+  out_warehouse_id: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface StockAdjustmentInItemNestedStoreRequest {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_cogs: number;
+  remarks: string | null;
+  serials: { serial: string }[];
+}
+
+export interface StockAdjustmentOutItemNestedStoreRequest {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  serials: { serial: string }[];
+}
+
+export interface StockAdjustmentStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  category_id: string;
+  in_warehouse_id: string | null;
+  out_warehouse_id: string | null;
+  remarks: string | null;
+  is_posted: boolean;
+  in_items?: StockAdjustmentInItemNestedStoreRequest[];
+  out_items?: StockAdjustmentOutItemNestedStoreRequest[];
+}
+
+export interface StockAdjustmentInItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  product_unit_cogs: number;
+  remarks: string | null;
+  delete_serial_ids: string[];
+  serials: { id: string | null; serial: string }[];
+}
+
+export interface StockAdjustmentOutItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  delete_serial_ids: string[];
+  serials: { id: string | null; serial: string }[];
+}
+
+export interface StockAdjustmentUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  category_id: string;
+  in_warehouse_id: string | null;
+  out_warehouse_id: string | null;
+  remarks: string | null;
+  is_posted: boolean;
+  delete_in_item_ids: string[];
+  in_items?: StockAdjustmentInItemNestedUpdateRequest[];
+  delete_out_item_ids: string[];
+  out_items?: StockAdjustmentOutItemNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/stock-transfer-item-serial/StockTransferItemSerialRequest.ts b/web/src/types/services/stock-transfer-item-serial/StockTransferItemSerialRequest.ts
new file mode 100644
index 000000000..532b44ded
--- /dev/null
+++ b/web/src/types/services/stock-transfer-item-serial/StockTransferItemSerialRequest.ts
@@ -0,0 +1,48 @@
+export interface StockTransferItemSerialReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  stock_transfer_code: string | null;
+  stock_transfer_start_date: string | null;
+  stock_transfer_end_date: string | null;
+  stock_transfer_source_warehouse_id: string | null;
+  stock_transfer_destination_warehouse_id: string | null;
+  product_unit_code: string | null;
+  product_unit_product_name: string | null;
+  product_unit_product_category_id: string | null;
+  product_unit_product_brand_id: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockTransferItemSerialReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  stock_transfer_code: string | null;
+  stock_transfer_start_date: string | null;
+  stock_transfer_end_date: string | null;
+  stock_transfer_source_warehouse_id: string | null;
+  stock_transfer_destination_warehouse_id: string | null;
+  product_unit_code: string | null;
+  product_unit_product_name: string | null;
+  product_unit_product_category_id: string | null;
+  product_unit_product_brand_id: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface StockTransferItemSerialStoreRequest {
+  company_id: string;
+  branch_id: string;
+  stock_transfer_id: string;
+  stock_transfer_item_id: string;
+  serial: string;
+}
+
+export interface StockTransferItemSerialUpdateRequest {
+  serial: string;
+}
diff --git a/web/src/types/services/stock-transfer-item/StockTransferItemRequest.ts b/web/src/types/services/stock-transfer-item/StockTransferItemRequest.ts
new file mode 100644
index 000000000..ab677bc6a
--- /dev/null
+++ b/web/src/types/services/stock-transfer-item/StockTransferItemRequest.ts
@@ -0,0 +1,68 @@
+export interface StockTransferItemReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  stock_transfer_code: string | null;
+  stock_transfer_start_date: string | null;
+  stock_transfer_end_date: string | null;
+  stock_transfer_source_warehouse_id: string | null;
+  stock_transfer_destination_warehouse_id: string | null;
+  product_unit_code: string | null;
+  product_unit_product_name: string | null;
+  product_unit_product_category_id: string | null;
+  product_unit_product_brand_id: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockTransferItemReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  stock_transfer_code: string | null;
+  stock_transfer_start_date: string | null;
+  stock_transfer_end_date: string | null;
+  stock_transfer_source_warehouse_id: string | null;
+  stock_transfer_destination_warehouse_id: string | null;
+  product_unit_code: string | null;
+  product_unit_product_name: string | null;
+  product_unit_product_category_id: string | null;
+  product_unit_product_brand_id: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface StockTransferItemSerialNestedStoreRequest {
+  serial: string;
+}
+
+export interface StockTransferItemStoreRequest {
+  company_id: string;
+  branch_id: string;
+  stock_transfer_id: string;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  serials: StockTransferItemSerialNestedStoreRequest[];
+}
+
+export interface StockTransferItemSerialNestedUpdateRequest {
+  id: string | null;
+  serial: string;
+}
+
+export interface StockTransferItemUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  stock_transfer_id: string;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  delete_serial_ids: string[];
+  serials: StockTransferItemSerialNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/stock-transfer/StockTransferRequest.ts b/web/src/types/services/stock-transfer/StockTransferRequest.ts
new file mode 100644
index 000000000..6e79269d4
--- /dev/null
+++ b/web/src/types/services/stock-transfer/StockTransferRequest.ts
@@ -0,0 +1,78 @@
+export interface StockTransferReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  source_warehouse_id: string | null;
+  destination_warehouse_id: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface StockTransferReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  branch_id: string | null;
+  search: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  source_warehouse_id: string | null;
+  destination_warehouse_id: string | null;
+  refresh: boolean;
+  limit: number;
+}
+
+export interface StockTransferItemSerialNestedStoreRequest {
+  serial: string;
+}
+
+export interface StockTransferItemNestedStoreRequest {
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  serials: StockTransferItemSerialNestedStoreRequest[];
+}
+
+export interface StockTransferStoreRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  source_warehouse_id: string;
+  destination_warehouse_id: string;
+  remarks: string | null;
+  is_posted: boolean;
+  items?: StockTransferItemNestedStoreRequest[];
+}
+
+export interface StockTransferItemSerialNestedUpdateRequest {
+  id: string | null;
+  serial: string;
+}
+
+export interface StockTransferItemNestedUpdateRequest {
+  id: string | null;
+  qty: number;
+  product_unit_id: string;
+  product_unit_conversion_value: number;
+  remarks: string | null;
+  delete_serial_ids: string[];
+  serials: StockTransferItemSerialNestedUpdateRequest[];
+}
+
+export interface StockTransferUpdateRequest {
+  company_id: string;
+  branch_id: string;
+  code: string;
+  date: string;
+  source_warehouse_id: string;
+  destination_warehouse_id: string;
+  remarks: string | null;
+  is_posted: boolean;
+  delete_item_ids: string[];
+  items?: StockTransferItemNestedUpdateRequest[];
+}
diff --git a/web/src/types/services/supplier/SupplierRequest.ts b/web/src/types/services/supplier/SupplierRequest.ts
new file mode 100644
index 000000000..8c80b1583
--- /dev/null
+++ b/web/src/types/services/supplier/SupplierRequest.ts
@@ -0,0 +1,20 @@
+export interface SupplierReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  status?: string | number;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface SupplierReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  status?: string | number;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/unit/UnitRequest.ts b/web/src/types/services/unit/UnitRequest.ts
new file mode 100644
index 000000000..2d2d40847
--- /dev/null
+++ b/web/src/types/services/unit/UnitRequest.ts
@@ -0,0 +1,18 @@
+export interface UnitReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface UnitReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/vat_profile/VatProfileRequest.ts b/web/src/types/services/vat_profile/VatProfileRequest.ts
new file mode 100644
index 000000000..9ea9055af
--- /dev/null
+++ b/web/src/types/services/vat_profile/VatProfileRequest.ts
@@ -0,0 +1,18 @@
+export interface VatProfileReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface VatProfileReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  include_id?: string;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/services/warehouse/WarehouseRequest.ts b/web/src/types/services/warehouse/WarehouseRequest.ts
new file mode 100644
index 000000000..f98e99486
--- /dev/null
+++ b/web/src/types/services/warehouse/WarehouseRequest.ts
@@ -0,0 +1,22 @@
+export interface WarehouseReadAnyPaginateRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  branch_id?: string | null;
+  status?: string | number;
+  include_id?: string | null;
+  refresh: boolean;
+  page: number;
+  per_page: number;
+}
+
+export interface WarehouseReadAnyGetRequest {
+  with_trashed: boolean;
+  company_id: string;
+  search?: string | null;
+  branch_id?: string | null;
+  status?: string | number;
+  include_id?: string | null;
+  refresh: boolean;
+  limit: number;
+}
diff --git a/web/src/types/tailwind-config.d.ts b/web/src/types/tailwind-config.d.ts
index 8391aa8c2..2ffe8f1f0 100644
--- a/web/src/types/tailwind-config.d.ts
+++ b/web/src/types/tailwind-config.d.ts
@@ -1,9 +1,9 @@
-declare module "tailwindcss/lib/util/color" {
+declare module 'tailwindcss/lib/util/color' {
   const parseColor = (value: string): { color: Array<string> } => {};
   export { parseColor };
 }
 
-declare module "tailwind-config" {
+declare module 'tailwind-config' {
   const config: Config;
   export default config;
 }
diff --git a/web/src/types/utils.d.ts b/web/src/types/utils.d.ts
index e02020c5d..e53a5ebeb 100644
--- a/web/src/types/utils.d.ts
+++ b/web/src/types/utils.d.ts
@@ -1,15 +1,13 @@
-type ExtractProps<T> = InstanceType<T>["$props"];
+type ExtractProps<T> = InstanceType<T>['$props'];
 
-type DotPrefix<T extends string> = T extends "" ? "" : `.${T}`;
+type DotPrefix<T extends string> = T extends '' ? '' : `.${T}`;
 
 type DotNestedKeys<T> = (
   T extends object
     ? {
-        [K in Exclude<keyof T, symbol>]: `${K}${DotPrefix<
-          DotNestedKeys<T[K]>
-        >}`;
+        [K in Exclude<keyof T, symbol>]: `${K}${DotPrefix<DotNestedKeys<T[K]>>}`;
       }[Exclude<keyof T, symbol>]
-    : ""
+    : ''
 ) extends infer D
   ? Extract<D, string>
   : never;
diff --git a/web/src/utils/colors.ts b/web/src/utils/colors.ts
index 6fc582a7d..9e30f9e72 100644
--- a/web/src/utils/colors.ts
+++ b/web/src/utils/colors.ts
@@ -1,8 +1,8 @@
-import { toRGB } from "./helper";
-import tailwindColors from "tailwindcss/colors";
-import resolveConfig from "tailwindcss/resolveConfig";
-import tailwindConfig from "tailwind-config";
-import { flatten } from "flat";
+import { toRGB } from './helper';
+import tailwindColors from 'tailwindcss/colors';
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from 'tailwind-config';
+import { flatten } from 'flat';
 
 const twConfig = resolveConfig(tailwindConfig);
 const colors = twConfig.theme?.colors;
@@ -43,15 +43,11 @@ const getColor = (colorKey: DotNestedKeys<Colors>, opacity: number = 1) => {
     }
   >(colors);
 
-  if (flattenColors[colorKey].search("var") === -1) {
+  if (flattenColors[colorKey].search('var') === -1) {
     return `rgb(${toRGB(flattenColors[colorKey])} / ${opacity})`;
   } else {
-    const cssVariableName = `--color-${
-      flattenColors[colorKey].split("--color-")[1].split(")")[0]
-    }`;
-    return `rgb(${getComputedStyle(document.body).getPropertyValue(
-      cssVariableName
-    )} / ${opacity})`;
+    const cssVariableName = `--color-${flattenColors[colorKey].split('--color-')[1].split(')')[0]}`;
+    return `rgb(${getComputedStyle(document.body).getPropertyValue(cssVariableName)} / ${opacity})`;
   }
 };
 
diff --git a/web/src/utils/config.ts b/web/src/utils/config.ts
new file mode 100644
index 000000000..7b3ceec0b
--- /dev/null
+++ b/web/src/utils/config.ts
@@ -0,0 +1,16 @@
+export interface AppConfig {
+  VITE_BACKEND_URL: string;
+}
+
+declare global {
+  interface Window {
+    APP_CONFIG?: AppConfig;
+  }
+}
+
+export const getBackendUrl = (): string => {
+  if (typeof window !== 'undefined' && window.APP_CONFIG && window.APP_CONFIG.VITE_BACKEND_URL) {
+    return window.APP_CONFIG.VITE_BACKEND_URL;
+  }
+  return import.meta.env.VITE_BACKEND_URL;
+};
diff --git a/web/src/utils/helper.ts b/web/src/utils/helper.ts
index 3d4243dd0..31d1308a3 100644
--- a/web/src/utils/helper.ts
+++ b/web/src/utils/helper.ts
@@ -1,15 +1,16 @@
-import dayjs from "dayjs";
-import duration from "dayjs/plugin/duration";
-import { parseColor } from "tailwindcss/lib/util/color";
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { parseColor } from 'tailwindcss/lib/util/color';
+import { isAxiosError, AxiosError } from 'axios';
 
 dayjs.extend(duration);
 
 const cutText = (text: string, length: number) => {
-  if (text.split(" ").length > 1) {
+  if (text.split(' ').length > 1) {
     const string = text.substring(0, length);
-    const splitText = string.split(" ");
+    const splitText = string.split(' ');
     splitText.pop();
-    return splitText.join(" ") + "...";
+    return splitText.join(' ') + '...';
   } else {
     return text;
   }
@@ -23,62 +24,80 @@ const capitalizeFirstLetter = (string: string) => {
   if (string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
   } else {
-    return "";
+    return '';
   }
 };
 
 const onlyNumber = (string: string) => {
   if (string) {
-    return string.replace(/\D/g, "");
+    return string.replace(/\D/g, '');
   } else {
-    return "";
+    return '';
   }
 };
 
-const formatCurrency = (number: number) => {
-  if (number) {
-    const formattedNumber = number.toString().replace(/\D/g, "");
-    const rest = formattedNumber.length % 3;
-    let currency = formattedNumber.substr(0, rest);
-    const thousand = formattedNumber.substr(rest).match(/\d{3}/g);
+const formatCurrency = (number: number | string) => {
+  if (number !== null && number !== undefined && number !== '') {
+    // Convert to string and handle decimals
+    let numStr = number.toString().trim();
+    const isNegative = numStr.startsWith('-');
+
+    // Split integer and decimal parts if exists
+    let [integerPart, decimalPart] = numStr.split('.');
+
+    // Remove non-digit characters from integer part
+    integerPart = integerPart.replace(/\D/g, '');
+
+    const rest = integerPart.length % 3;
+    let currency = integerPart.substr(0, rest);
+    const thousand = integerPart.substr(rest).match(/\d{3}/g);
     let separator;
 
     if (thousand) {
-      separator = rest ? "." : "";
-      currency += separator + thousand.join(".");
+      separator = rest ? '.' : '';
+      currency += separator + thousand.join('.');
     }
 
-    return currency;
+    // Add decimal part back if it exists and is not zero
+    if (decimalPart) {
+      // Remove trailing zeros
+      decimalPart = decimalPart.replace(/0+$/, '');
+      if (decimalPart.length > 0) {
+        currency += ',' + decimalPart;
+      }
+    }
+
+    return isNegative && currency !== '' ? `-${currency}` : currency;
   } else {
-    return "";
+    return '';
   }
 };
 
 const timeAgo = (time: string) => {
-  const date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " "));
+  const date = new Date((time || '').replace(/-/g, '/').replace(/[TZ]/g, ' '));
   const diff = (new Date().getTime() - date.getTime()) / 1000;
   const dayDiff = Math.floor(diff / 86400);
 
   if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
-    return dayjs(time).format("MMMM DD, YYYY");
+    return dayjs(time).format('MMMM DD, YYYY');
   }
 
   return (
     (dayDiff === 0 &&
-      ((diff < 60 && "just now") ||
-        (diff < 120 && "1 minute ago") ||
-        (diff < 3600 && Math.floor(diff / 60) + " minutes ago") ||
-        (diff < 7200 && "1 hour ago") ||
-        (diff < 86400 && Math.floor(diff / 3600) + " hours ago"))) ||
-    (dayDiff === 1 && "Yesterday") ||
-    (dayDiff < 7 && dayDiff + " days ago") ||
-    (dayDiff < 31 && Math.ceil(dayDiff / 7) + " weeks ago")
+      ((diff < 60 && 'just now') ||
+        (diff < 120 && '1 minute ago') ||
+        (diff < 3600 && Math.floor(diff / 60) + ' minutes ago') ||
+        (diff < 7200 && '1 hour ago') ||
+        (diff < 86400 && Math.floor(diff / 3600) + ' hours ago'))) ||
+    (dayDiff === 1 && 'Yesterday') ||
+    (dayDiff < 7 && dayDiff + ' days ago') ||
+    (dayDiff < 31 && Math.ceil(dayDiff / 7) + ' weeks ago')
   );
 };
 
 const diffTimeByNow = (time: string) => {
-  const startDate = dayjs(dayjs().format("YYYY-MM-DD HH:mm:ss").toString());
-  const endDate = dayjs(dayjs(time).format("YYYY-MM-DD HH:mm:ss").toString());
+  const startDate = dayjs(dayjs().format('YYYY-MM-DD HH:mm:ss').toString());
+  const endDate = dayjs(dayjs(time).format('YYYY-MM-DD HH:mm:ss').toString());
 
   const duration = dayjs.duration(endDate.diff(startDate));
   const milliseconds = Math.floor(duration.asMilliseconds());
@@ -86,25 +105,23 @@ const diffTimeByNow = (time: string) => {
   const days = Math.round(milliseconds / 86400000);
   const hours = Math.round((milliseconds % 86400000) / 3600000);
   let minutes = Math.round(((milliseconds % 86400000) % 3600000) / 60000);
-  const seconds = Math.round(
-    (((milliseconds % 86400000) % 3600000) % 60000) / 1000
-  );
+  const seconds = Math.round((((milliseconds % 86400000) % 3600000) % 60000) / 1000);
 
   if (seconds < 30 && seconds >= 0) {
     minutes += 1;
   }
 
   return {
-    days: days.toString().length < 2 ? "0" + days : days,
-    hours: hours.toString().length < 2 ? "0" + hours : hours,
-    minutes: minutes.toString().length < 2 ? "0" + minutes : minutes,
-    seconds: seconds.toString().length < 2 ? "0" + seconds : seconds,
+    days: days.toString().length < 2 ? '0' + days : days,
+    hours: hours.toString().length < 2 ? '0' + hours : hours,
+    minutes: minutes.toString().length < 2 ? '0' + minutes : minutes,
+    seconds: seconds.toString().length < 2 ? '0' + seconds : seconds,
   };
 };
 
 const isset = (obj: object | string) => {
   if (obj !== null && obj !== undefined) {
-    if (typeof obj === "object" || Array.isArray(obj)) {
+    if (typeof obj === 'object' || Array.isArray(obj)) {
       return Object.keys(obj).length;
     } else {
       return obj.toString().length;
@@ -128,77 +145,109 @@ const randomNumbers = (from: number, to: number, length: number) => {
 };
 
 const toRGB = (value: string) => {
-  return parseColor(value).color.join(" ");
+  return parseColor(value).color.join(' ');
 };
 
 const stringToHTML = (arg: string) => {
   const parser = new DOMParser(),
-    DOM = parser.parseFromString(arg, "text/html");
+    DOM = parser.parseFromString(arg, 'text/html');
   return DOM.body.childNodes[0] as HTMLElement;
 };
 
-const slideUp = (
-  el: HTMLElement,
-  duration = 300,
-  callback = (el: HTMLElement) => {}
-) => {
-  el.style.transitionProperty = "height, margin, padding";
-  el.style.transitionDuration = duration + "ms";
-  el.style.height = el.offsetHeight + "px";
+const slideUp = (el: HTMLElement, duration = 300, callback = (el: HTMLElement) => {}) => {
+  el.style.transitionProperty = 'height, margin, padding';
+  el.style.transitionDuration = duration + 'ms';
+  el.style.height = el.offsetHeight + 'px';
   el.offsetHeight;
-  el.style.overflow = "hidden";
-  el.style.height = "0";
-  el.style.paddingTop = "0";
-  el.style.paddingBottom = "0";
-  el.style.marginTop = "0";
-  el.style.marginBottom = "0";
+  el.style.overflow = 'hidden';
+  el.style.height = '0';
+  el.style.paddingTop = '0';
+  el.style.paddingBottom = '0';
+  el.style.marginTop = '0';
+  el.style.marginBottom = '0';
   window.setTimeout(() => {
-    el.style.display = "none";
-    el.style.removeProperty("height");
-    el.style.removeProperty("padding-top");
-    el.style.removeProperty("padding-bottom");
-    el.style.removeProperty("margin-top");
-    el.style.removeProperty("margin-bottom");
-    el.style.removeProperty("overflow");
-    el.style.removeProperty("transition-duration");
-    el.style.removeProperty("transition-property");
+    el.style.display = 'none';
+    el.style.removeProperty('height');
+    el.style.removeProperty('padding-top');
+    el.style.removeProperty('padding-bottom');
+    el.style.removeProperty('margin-top');
+    el.style.removeProperty('margin-bottom');
+    el.style.removeProperty('overflow');
+    el.style.removeProperty('transition-duration');
+    el.style.removeProperty('transition-property');
     callback(el);
   }, duration);
 };
 
-const slideDown = (
-  el: HTMLElement,
-  duration = 300,
-  callback = (el: HTMLElement) => {}
-) => {
-  el.style.removeProperty("display");
+const slideDown = (el: HTMLElement, duration = 300, callback = (el: HTMLElement) => {}) => {
+  el.style.removeProperty('display');
   let display = window.getComputedStyle(el).display;
-  if (display === "none") display = "block";
+  if (display === 'none') display = 'block';
   el.style.display = display;
   let height = el.offsetHeight;
-  el.style.overflow = "hidden";
-  el.style.height = "0";
-  el.style.paddingTop = "0";
-  el.style.paddingBottom = "0";
-  el.style.marginTop = "0";
-  el.style.marginBottom = "0";
+  el.style.overflow = 'hidden';
+  el.style.height = '0';
+  el.style.paddingTop = '0';
+  el.style.paddingBottom = '0';
+  el.style.marginTop = '0';
+  el.style.marginBottom = '0';
   el.offsetHeight;
-  el.style.transitionProperty = "height, margin, padding";
-  el.style.transitionDuration = duration + "ms";
-  el.style.height = height + "px";
-  el.style.removeProperty("padding-top");
-  el.style.removeProperty("padding-bottom");
-  el.style.removeProperty("margin-top");
-  el.style.removeProperty("margin-bottom");
+  el.style.transitionProperty = 'height, margin, padding';
+  el.style.transitionDuration = duration + 'ms';
+  el.style.height = height + 'px';
+  el.style.removeProperty('padding-top');
+  el.style.removeProperty('padding-bottom');
+  el.style.removeProperty('margin-top');
+  el.style.removeProperty('margin-bottom');
   window.setTimeout(() => {
-    el.style.removeProperty("height");
-    el.style.removeProperty("overflow");
-    el.style.removeProperty("transition-duration");
-    el.style.removeProperty("transition-property");
+    el.style.removeProperty('height');
+    el.style.removeProperty('overflow');
+    el.style.removeProperty('transition-duration');
+    el.style.removeProperty('transition-property');
     callback(el);
   }, duration);
 };
 
+const convertErrorTypeToAlertListType = (error: unknown) => {
+  const record: Record<string, Array<string>> = {};
+
+  const anyError = error as any;
+  const response = isAxiosError(error) ? (error as AxiosError).response : anyError?.response;
+
+  if (response && response.data) {
+    const data = response.data as any;
+
+    if (data.errors && typeof data.errors === 'object') {
+      for (const key of Object.keys(data.errors)) {
+        const value = data.errors[key];
+
+        if (Array.isArray(value)) {
+          record[key] = value;
+        } else if (value !== undefined && value !== null) {
+          record[key] = [String(value)];
+        }
+      }
+
+      return record;
+    }
+
+    if (data.message) {
+      record.error = [String(data.message)];
+      return record;
+    }
+  }
+
+  if (error instanceof Error && error.message) {
+    record.error = [error.message];
+  } else if (anyError?.message) {
+    record.error = [String(anyError.message)];
+  } else {
+    record.error = ['Unknown error'];
+  }
+
+  return record;
+};
+
 export {
   cutText,
   formatDate,
@@ -214,4 +263,5 @@ export {
   stringToHTML,
   slideUp,
   slideDown,
+  convertErrorTypeToAlertListType,
 };
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
index 323c78a6c..af36df349 100644
--- a/web/src/vite-env.d.ts
+++ b/web/src/vite-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 44e4877d7..22b9dfaef 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,55 +1,55 @@
-const plugin = require("tailwindcss/plugin");
-const colors = require("tailwindcss/colors");
-const { parseColor } = require("tailwindcss/lib/util/color");
+const plugin = require('tailwindcss/plugin');
+const colors = require('tailwindcss/colors');
+const { parseColor } = require('tailwindcss/lib/util/color');
 
 /** Converts HEX color to RGB */
 const toRGB = (value) => {
-  return parseColor(value).color.join(" ");
+  return parseColor(value).color.join(' ');
 };
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,vue}"],
-  darkMode: "class",
+  content: ['./src/**/*.{js,jsx,ts,vue}'],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
         theme: {
-          1: "rgb(var(--color-theme-1) / <alpha-value>)",
-          2: "rgb(var(--color-theme-2) / <alpha-value>)",
+          1: 'rgb(var(--color-theme-1) / <alpha-value>)',
+          2: 'rgb(var(--color-theme-2) / <alpha-value>)',
         },
-        primary: "rgb(var(--color-primary) / <alpha-value>)",
-        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
-        success: "rgb(var(--color-success) / <alpha-value>)",
-        info: "rgb(var(--color-info) / <alpha-value>)",
-        warning: "rgb(var(--color-warning) / <alpha-value>)",
-        pending: "rgb(var(--color-pending) / <alpha-value>)",
-        danger: "rgb(var(--color-danger) / <alpha-value>)",
-        light: "rgb(var(--color-light) / <alpha-value>)",
-        dark: "rgb(var(--color-dark) / <alpha-value>)",
+        primary: 'rgb(var(--color-primary) / <alpha-value>)',
+        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
+        success: 'rgb(var(--color-success) / <alpha-value>)',
+        info: 'rgb(var(--color-info) / <alpha-value>)',
+        warning: 'rgb(var(--color-warning) / <alpha-value>)',
+        pending: 'rgb(var(--color-pending) / <alpha-value>)',
+        danger: 'rgb(var(--color-danger) / <alpha-value>)',
+        light: 'rgb(var(--color-light) / <alpha-value>)',
+        dark: 'rgb(var(--color-dark) / <alpha-value>)',
         darkmode: {
-          50: "rgb(var(--color-darkmode-50) / <alpha-value>)",
-          100: "rgb(var(--color-darkmode-100) / <alpha-value>)",
-          200: "rgb(var(--color-darkmode-200) / <alpha-value>)",
-          300: "rgb(var(--color-darkmode-300) / <alpha-value>)",
-          400: "rgb(var(--color-darkmode-400) / <alpha-value>)",
-          500: "rgb(var(--color-darkmode-500) / <alpha-value>)",
-          600: "rgb(var(--color-darkmode-600) / <alpha-value>)",
-          700: "rgb(var(--color-darkmode-700) / <alpha-value>)",
-          800: "rgb(var(--color-darkmode-800) / <alpha-value>)",
-          900: "rgb(var(--color-darkmode-900) / <alpha-value>)",
+          50: 'rgb(var(--color-darkmode-50) / <alpha-value>)',
+          100: 'rgb(var(--color-darkmode-100) / <alpha-value>)',
+          200: 'rgb(var(--color-darkmode-200) / <alpha-value>)',
+          300: 'rgb(var(--color-darkmode-300) / <alpha-value>)',
+          400: 'rgb(var(--color-darkmode-400) / <alpha-value>)',
+          500: 'rgb(var(--color-darkmode-500) / <alpha-value>)',
+          600: 'rgb(var(--color-darkmode-600) / <alpha-value>)',
+          700: 'rgb(var(--color-darkmode-700) / <alpha-value>)',
+          800: 'rgb(var(--color-darkmode-800) / <alpha-value>)',
+          900: 'rgb(var(--color-darkmode-900) / <alpha-value>)',
         },
       },
       fontFamily: {
-        roboto: ["Roboto"],
+        roboto: ['Roboto'],
       },
       container: {
         center: true,
       },
       maxWidth: {
-        "1/4": "25%",
-        "1/2": "50%",
-        "3/4": "75%",
+        '1/4': '25%',
+        '1/2': '50%',
+        '3/4': '75%',
       },
       strokeWidth: {
         0.5: 0.5,
@@ -57,117 +57,117 @@ module.exports = {
         2.5: 2.5,
       },
       backgroundImage: {
-        "chevron-white":
+        'chevron-white':
           "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff95' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")",
-        "chevron-black":
+        'chevron-black':
           "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300000095' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")",
-        "file-icon-empty-directory":
+        'file-icon-empty-directory':
           "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='786' height='786' viewBox='0 0 786 786'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_2' data-name='Group 2' transform='translate(-567 -93)'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='418' height='681' rx='40' transform='translate(896 109)' fill='%2395a5b9'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='433' height='681' rx='40' transform='translate(606 93)' fill='%23a0aec0'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='786' height='721' rx='40' transform='translate(567 158)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A\")",
-        "file-icon-directory":
+        'file-icon-directory':
           "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='786' height='786' viewBox='0 0 786 786'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_3' data-name='Group 3' transform='translate(-567 -93)'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='418' height='681' rx='40' transform='translate(896 109)' fill='%2395a5b9'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='433' height='681' rx='40' transform='translate(606 93)' fill='%23a0aec0'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='742' height='734' rx='40' transform='translate(590 145)' fill='%23bec8d9'/%3E%3Crect id='Rectangle_5' data-name='Rectangle 5' width='786' height='692' rx='40' transform='translate(567 187)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A\")",
-        "file-icon-file":
+        'file-icon-file':
           "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='628.027' height='786.012' viewBox='0 0 628.027 786.012'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_5' data-name='Group 5' transform='translate(-646 -92.988)'%3E%3Cpath id='Union_2' data-name='Union 2' d='M40,786A40,40,0,0,1,0,746V40A40,40,0,0,1,40,0H501V103h29v24h98V746a40,40,0,0,1-40,40Z' transform='translate(646 93)' fill='url(%23linear-gradient)'/%3E%3Cpath id='Intersection_2' data-name='Intersection 2' d='M.409,162.042l.058-109.9c31.605,29.739,125.37,125.377,125.37,125.377l-109.976.049A20.025,20.025,0,0,1,.409,162.042Z' transform='translate(1147 42)' fill='%23bec8d9' stroke='%23bec8d9' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A\")",
       },
     },
   },
   plugins: [
-    require("@tailwindcss/forms"),
+    require('@tailwindcss/forms'),
     plugin(function ({ addBase }) {
       addBase({
         // Default colors
-        ":root": {
-          "--color-theme-1": toRGB(colors.blue["800"]),
-          "--color-theme-2": toRGB(colors.blue["900"]),
-          "--color-primary": toRGB(colors.blue["900"]),
-          "--color-secondary": toRGB(colors.slate["200"]),
-          "--color-success": toRGB(colors.lime["500"]),
-          "--color-info": toRGB(colors.cyan["500"]),
-          "--color-warning": toRGB(colors.yellow["400"]),
-          "--color-pending": toRGB(colors.orange["500"]),
-          "--color-danger": toRGB(colors.red["600"]),
-          "--color-light": toRGB(colors.slate["100"]),
-          "--color-dark": toRGB(colors.slate["800"]),
+        ':root': {
+          '--color-theme-1': toRGB(colors.blue['800']),
+          '--color-theme-2': toRGB(colors.blue['900']),
+          '--color-primary': toRGB(colors.blue['900']),
+          '--color-secondary': toRGB(colors.slate['200']),
+          '--color-success': toRGB(colors.lime['500']),
+          '--color-info': toRGB(colors.cyan['500']),
+          '--color-warning': toRGB(colors.yellow['400']),
+          '--color-pending': toRGB(colors.orange['500']),
+          '--color-danger': toRGB(colors.red['600']),
+          '--color-light': toRGB(colors.slate['100']),
+          '--color-dark': toRGB(colors.slate['800']),
         },
         // Default dark-mode colors
-        ".dark": {
-          "--color-primary": toRGB(colors.blue["700"]),
-          "--color-darkmode-50": "87 103 132",
-          "--color-darkmode-100": "74 90 121",
-          "--color-darkmode-200": "65 81 114",
-          "--color-darkmode-300": "53 69 103",
-          "--color-darkmode-400": "48 61 93",
-          "--color-darkmode-500": "41 53 82",
-          "--color-darkmode-600": "40 51 78",
-          "--color-darkmode-700": "35 45 69",
-          "--color-darkmode-800": "27 37 59",
-          "--color-darkmode-900": "15 23 42",
+        '.dark': {
+          '--color-primary': toRGB(colors.blue['700']),
+          '--color-darkmode-50': '87 103 132',
+          '--color-darkmode-100': '74 90 121',
+          '--color-darkmode-200': '65 81 114',
+          '--color-darkmode-300': '53 69 103',
+          '--color-darkmode-400': '48 61 93',
+          '--color-darkmode-500': '41 53 82',
+          '--color-darkmode-600': '40 51 78',
+          '--color-darkmode-700': '35 45 69',
+          '--color-darkmode-800': '27 37 59',
+          '--color-darkmode-900': '15 23 42',
         },
         // Theme 1 colors
-        ".theme-1": {
-          "--color-theme-1": toRGB(colors.emerald["800"]),
-          "--color-theme-2": toRGB(colors.emerald["900"]),
-          "--color-primary": toRGB(colors.emerald["900"]),
-          "--color-secondary": toRGB(colors.slate["200"]),
-          "--color-success": toRGB(colors.emerald["600"]),
-          "--color-info": toRGB(colors.cyan["500"]),
-          "--color-warning": toRGB(colors.yellow["400"]),
-          "--color-pending": toRGB(colors.amber["500"]),
-          "--color-danger": toRGB(colors.rose["600"]),
-          "--color-light": toRGB(colors.slate["100"]),
-          "--color-dark": toRGB(colors.slate["800"]),
-          "&.dark": {
-            "--color-primary": toRGB(colors.emerald["800"]),
+        '.theme-1': {
+          '--color-theme-1': toRGB(colors.emerald['800']),
+          '--color-theme-2': toRGB(colors.emerald['900']),
+          '--color-primary': toRGB(colors.emerald['900']),
+          '--color-secondary': toRGB(colors.slate['200']),
+          '--color-success': toRGB(colors.emerald['600']),
+          '--color-info': toRGB(colors.cyan['500']),
+          '--color-warning': toRGB(colors.yellow['400']),
+          '--color-pending': toRGB(colors.amber['500']),
+          '--color-danger': toRGB(colors.rose['600']),
+          '--color-light': toRGB(colors.slate['100']),
+          '--color-dark': toRGB(colors.slate['800']),
+          '&.dark': {
+            '--color-primary': toRGB(colors.emerald['800']),
           },
         },
         // Theme 2 colors
-        ".theme-2": {
-          "--color-theme-1": toRGB(colors.blue["900"]),
-          "--color-theme-2": toRGB(colors.blue["950"]),
-          "--color-primary": toRGB(colors.blue["950"]),
-          "--color-secondary": toRGB(colors.slate["200"]),
-          "--color-success": toRGB(colors.teal["600"]),
-          "--color-info": toRGB(colors.cyan["500"]),
-          "--color-warning": toRGB(colors.amber["500"]),
-          "--color-pending": toRGB(colors.orange["500"]),
-          "--color-danger": toRGB(colors.red["700"]),
-          "--color-light": toRGB(colors.slate["100"]),
-          "--color-dark": toRGB(colors.slate["800"]),
-          "&.dark": {
-            "--color-primary": toRGB(colors.blue["800"]),
+        '.theme-2': {
+          '--color-theme-1': toRGB(colors.blue['900']),
+          '--color-theme-2': toRGB(colors.blue['950']),
+          '--color-primary': toRGB(colors.blue['950']),
+          '--color-secondary': toRGB(colors.slate['200']),
+          '--color-success': toRGB(colors.teal['600']),
+          '--color-info': toRGB(colors.cyan['500']),
+          '--color-warning': toRGB(colors.amber['500']),
+          '--color-pending': toRGB(colors.orange['500']),
+          '--color-danger': toRGB(colors.red['700']),
+          '--color-light': toRGB(colors.slate['100']),
+          '--color-dark': toRGB(colors.slate['800']),
+          '&.dark': {
+            '--color-primary': toRGB(colors.blue['800']),
           },
         },
         // Theme 3 colors
-        ".theme-3": {
-          "--color-theme-1": toRGB(colors.cyan["800"]),
-          "--color-theme-2": toRGB(colors.cyan["900"]),
-          "--color-primary": toRGB(colors.cyan["900"]),
-          "--color-secondary": toRGB(colors.slate["200"]),
-          "--color-success": toRGB(colors.teal["600"]),
-          "--color-info": toRGB(colors.cyan["500"]),
-          "--color-warning": toRGB(colors.amber["500"]),
-          "--color-pending": toRGB(colors.amber["600"]),
-          "--color-danger": toRGB(colors.red["700"]),
-          "--color-light": toRGB(colors.slate["100"]),
-          "--color-dark": toRGB(colors.slate["800"]),
-          "&.dark": {
-            "--color-primary": toRGB(colors.cyan["800"]),
+        '.theme-3': {
+          '--color-theme-1': toRGB(colors.cyan['800']),
+          '--color-theme-2': toRGB(colors.cyan['900']),
+          '--color-primary': toRGB(colors.cyan['900']),
+          '--color-secondary': toRGB(colors.slate['200']),
+          '--color-success': toRGB(colors.teal['600']),
+          '--color-info': toRGB(colors.cyan['500']),
+          '--color-warning': toRGB(colors.amber['500']),
+          '--color-pending': toRGB(colors.amber['600']),
+          '--color-danger': toRGB(colors.red['700']),
+          '--color-light': toRGB(colors.slate['100']),
+          '--color-dark': toRGB(colors.slate['800']),
+          '&.dark': {
+            '--color-primary': toRGB(colors.cyan['800']),
           },
         },
         // Theme 4 colors
-        ".theme-4": {
-          "--color-theme-1": toRGB(colors.indigo["800"]),
-          "--color-theme-2": toRGB(colors.indigo["900"]),
-          "--color-primary": toRGB(colors.indigo["900"]),
-          "--color-secondary": toRGB(colors.slate["200"]),
-          "--color-success": toRGB(colors.emerald["600"]),
-          "--color-info": toRGB(colors.cyan["500"]),
-          "--color-warning": toRGB(colors.yellow["500"]),
-          "--color-pending": toRGB(colors.orange["600"]),
-          "--color-danger": toRGB(colors.red["700"]),
-          "--color-light": toRGB(colors.slate["100"]),
-          "--color-dark": toRGB(colors.slate["800"]),
-          "&.dark": {
-            "--color-primary": toRGB(colors.indigo["700"]),
+        '.theme-4': {
+          '--color-theme-1': toRGB(colors.indigo['800']),
+          '--color-theme-2': toRGB(colors.indigo['900']),
+          '--color-primary': toRGB(colors.indigo['900']),
+          '--color-secondary': toRGB(colors.slate['200']),
+          '--color-success': toRGB(colors.emerald['600']),
+          '--color-info': toRGB(colors.cyan['500']),
+          '--color-warning': toRGB(colors.yellow['500']),
+          '--color-pending': toRGB(colors.orange['600']),
+          '--color-danger': toRGB(colors.red['700']),
+          '--color-light': toRGB(colors.slate['100']),
+          '--color-dark': toRGB(colors.slate['800']),
+          '&.dark': {
+            '--color-primary': toRGB(colors.indigo['700']),
           },
         },
       });
@@ -175,7 +175,7 @@ module.exports = {
   ],
   variants: {
     extend: {
-      boxShadow: ["dark"],
+      boxShadow: ['dark'],
     },
   },
 };
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
index ee28d7a9a..1800c7527 100644
--- a/web/tsconfig.app.json
+++ b/web/tsconfig.app.json
@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "verbatimModuleSyntax": false,
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
index 46cf2e142..e7565f149 100644
--- a/web/tsconfig.node.json
+++ b/web/tsconfig.node.json
@@ -1,12 +1,6 @@
 {
   "extends": "@tsconfig/node18/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ],
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
     "noEmit": true,
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 498bc5b99..fb6fa14bc 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,25 +1,23 @@
-import { fileURLToPath, URL } from "node:url";
+import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     commonjsOptions: {
-      include: ["tailwind.config.js", "node_modules/**"],
+      include: ['tailwind.config.js', 'node_modules/**'],
     },
   },
   optimizeDeps: {
-    include: ["tailwind-config"],
+    include: ['tailwind-config'],
   },
   plugins: [vue()],
   resolve: {
     alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-      "tailwind-config": fileURLToPath(
-        new URL("./tailwind.config.js", import.meta.url)
-      ),
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      'tailwind-config': fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
     },
   },
 });